microsoft / monaco-editor Goto Github PK

View Code? Open in Web Editor NEW

38.3K 38.3K 3.5K 131.14 MB

A browser based code editor

Home Page: https://microsoft.github.io/monaco-editor/

License: MIT License

JavaScript 61.75% HTML 1.69% CSS 0.04% Shell 0.02% TypeScript 36.49% SCSS 0.01%

browser editor monaco-editor typescript vscode

monaco-editor's Introduction

Monaco Editor

The Monaco Editor is the fully featured code editor from VS Code. Check out the VS Code docs to see some of the supported features.

Try it out

Try out the editor and see various examples in our interactive playground.

The playground is the best way to learn about how to use the editor, which features is supports, to try out different versions and to create minimal reproducible examples for bug reports.

Installing

> npm install monaco-editor

You will get:

inside /esm: ESM version of the editor (compatible with e.g. webpack)
inside /dev: AMD bundled, not minified
inside /min: AMD bundled, and minified
inside /min-maps: source maps for min
monaco.d.ts: this specifies the API of the editor (this is what is actually versioned, everything else is considered private and might break with any release).

It is recommended to develop against the dev version, and in production to use the min version.

Concepts

Monaco editor is best known for being the text editor that powers VS Code. However, it's a bit more nuanced. Some basic understanding about the underlying concepts is needed to use Monaco editor effectively.

Models

Models are at the heart of Monaco editor. It's what you interact with when managing content. A model represents a file that has been opened. This could represent a file that exists on a file system, but it doesn't have to. For example, the model holds the text content, determines the language of the content, and tracks the edit history of the content.

URIs

Each model is identified by a URI. This is why it's not possible for two models to have the same URI. Ideally when you represent content in Monaco editor, you should think of a virtual file system that matches the files your users are editing. For example, you could use file:/// as a base path. If a model is created without a URI, its URI will be inmemory://model/1. The number increases as more models are created.

Editors

An editor is a user facing view of the model. This is what gets attached to the DOM and what your users see visually. Typical editor operations are displaying a model, managing the view state, or executing actions or commands.

Providers

Providers provide smart editor features. For example, this includes completion and hover information. It is not the same as, but often maps to language server protocol features.

Providers work on models. Some smart features depends on the file URI. For example, for TypeScript to resolve imports, or for JSON IntelliSense to determine which JSON schema to apply to which model. So it's important to choose proper model URIs.

Disposables

Many Monaco related objects often implement the .dispose() method. This method is intended to perform cleanups when a resource is no longer needed. For example, calling model.dispose() will unregister it, freeing up the URI for a new model. Editors should be disposed to free up resources and remove their model listeners.

Documentation

Learn how to integrate the editor with these complete samples.
- Integrate the AMD version.
- Integrate the ESM version
Learn how to use the editor API and try out your own customizations in the playground.
Explore the API docs or read them straight from monaco.d.ts.
Read this guide to ensure the editor is accessible to all your users!
Create a Monarch tokenizer for a new programming language in the Monarch playground.
Ask questions on StackOverflow! Search open and closed issues, there are a lot of tips in there!

Issues

Create issues in this repository for anything related to the Monaco Editor. Please search for existing issues to avoid duplicates.

FAQ

❓ What is the relationship between VS Code and the Monaco Editor?

The Monaco Editor is generated straight from VS Code's sources with some shims around services the code needs to make it run in a web browser outside of its home.

❓ What is the relationship between VS Code's version and the Monaco Editor's version?

None. The Monaco Editor is a library and it reflects directly the source code.

❓ I've written an extension for VS Code, will it work on the Monaco Editor in a browser?

No.

Note: If the extension is fully based on the LSP and if the language server is authored in JavaScript, then it would be possible.

❓ Why all these web workers and why should I care?

Language services create web workers to compute heavy stuff outside of the UI thread. They cost hardly anything in terms of resource overhead and you shouldn't worry too much about them, as long as you get them to work (see above the cross-domain case).

❓ What is this loader.js? Can I use require.js?

It is an AMD loader that we use in VS Code. Yes.

❓ I see the warning "Could not create web worker". What should I do?

HTML5 does not allow pages loaded on file:// to create web workers. Please load the editor with a web server on http:// or https:// schemes.

❓ Is the editor supported in mobile browsers or mobile web app frameworks?

No.

❓ Why doesn't the editor support TextMate grammars?

Please see https://github.com/bolinfest/monaco-tm which puts together monaco-editor, vscode-oniguruma and vscode-textmate to get TM grammar support in the editor.

Contributing / Local Development

We are welcoming contributions from the community! Please see CONTRIBUTING for details how you can contribute effectively, how you can run the editor from sources and how you can debug and fix issues.

Code of Conduct

This project has adopted the Microsoft Open Source Code of Conduct. For more information see the Code of Conduct FAQ or contact [email protected] with any additional questions or comments.

License

Licensed under the MIT License.

monaco-editor's People

Contributors

Stargazers

Watchers

Forkers

e42s modulexcite rashoodkhan ares7 mohsen1 hahmed dmorosinotto cedarlogic hookdoo lb5tr waldyrious herpiko jvonruden mohammadyounes jongalloway yetone jonathanhotono pombredanne pkthebud njhouse dominhhai zed9 austad frialex ezhangle romgrk haroenv nikikante jqk6 wishnet rlugojr donma prashant-kumar-masand andrejtelle bansicloud2 ryania-devops ningtao1984 lucassanttoss parastoo-62 prepare robinscherer is00hcw duguruiyuan dut3062796s nunodotferreira zen-li lijie371 laiweiwei pandahisham fnet123 skyformat99 fengyangfei andygoo axcoto stanate8 ricardowebsite emrul fengweijp coderlongren lfhx hu19891110 richardy2012 luniclynx ewqasd200g bootinge kitsonk clrsdream quasi-project thinkplus cybernetics xeronith archer-christ anrainie zsvanderlaan cargarg7 nangal taoqf azuya lovewitty ekiramdhani eki-ramdhani tensam jgkim7 hackur shzhng sangloo k12f paveldk eisenspalter nagyistge voicis colelawrence vyraun wskplho wujie520303 teaganrocha jyostudio jyzor sandyarmstrong xamarin

monaco-editor's Issues

How do I get the Text of the Model

Probably a dumb question but I'm having an awful hard time with it.

I loaded up the easy sample, and all I want to do is get the text out that the user has entered.

This is proving hard for me to find

<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta http-equiv="Content-Type" content="text/html;charset=utf-8" >
</head>
<body>

<div id="container" style="width:800px;height:600px;border:1px solid grey"></div>

<script src="monaco-editor/min/vs/loader.js"></script>
<script>
    require.config({ paths: { 'vs': 'monaco-editor/min/vs' }});
    require(['vs/editor/editor.main'], function() {
        var editor = monaco.editor.create(document.getElementById('container'), {
            value: [
                'function x() {',
                '\tconsole.log("Hello world!");',
                '}'
            ].join('\n'),
            language: 'javascript'
        });
    });
</script>
</body>
</html>

If I add a function

function saveFile() {
    var value = */ somehow get the text output that is in the editor */;
    someMethodThatSaves(value);
}

How would I go about doing that?

The only method I've found is something like

monaco.editor.getModels()[0]._lines which would give me the line objects array and in turn I could get at _text of each line. I'm assuming this is not the way it was meant to be done.

Any pointers appreciated.

I created a Stack Overflow question asking the same thing with the monaco-editor tag, but I thought i'd probably have better luck asking here since this is so new.

Binding multiple keycode command

Hi Team,

I understand that binding a single key can be easily achieved using this following code:

var myBinding = editor.addCommand(monaco.KeyCode.F9, function() {
    alert('F9 pressed!');
});

However is it also possible to bind multiple key code such as Ctrl+S for save?

Within monaco.d.ts I found that the addCommand editor within the IStandaloneCodeEditor only receives a single number keybinding:

export interface IStandaloneCodeEditor extends ICodeEditor {
        addCommand(keybinding: number, handler: ICommandHandler, context: string): string;
        createContextKey<T>(key: string, defaultValue: T): IKeybindingContextKey<T>;
        addAction(descriptor: IActionDescriptor): void;
}

I might have reading it wrong since I also found that the right click context menu shown some key combination code:

Thanks

Website editor 404 mishandled, results in permanent error message

As you'll be able to see quite quickly for yourself, the editor in the website suggests that it supports SCSS, but the related file ('/index/sample.scss.txt') is missing, resulting in a 404 error.

Using Chrome 49.0.2623.110, I selected SCSS through the menu. This failed silently. On my next selection and thereafter, the samples loaded but were displaced downwards by an error message that could not be dismissed by any means I could discover.

How to register custom json schema which is applied on file match pattern

Hi Team,

I am looking for registering my own schema. Additionnaly, I would like this schema automatically applied based on file uri match. I know this is doable in vscode (https://code.visualstudio.com/docs/languages/json#_json-schemas-settings) but could not find a way to do it. Could you please guide me ?

Thanks,
Nicolas

different javascript defaults base on uri match

Hi Team,

I would like to know if (and how) this is possible to have 2 default libs sets (eg. one for client and one for server). The feature for 1 default libs set already exists in the playground (https://microsoft.github.io/monaco-editor/playground.html#extending-language-services-configure-javascript-defaults), but I cannot see any way to do it with another libs set. The perfect feature would be to make an extra lib base on some criteria like uri match or function call.

Thanks,
Nicolas

Loader silently fails when used on page in ASP.NET MVC "Areas" page.

I can easily use Monaco on a page hosted in the standard Views folder of an ASP.NET MVC site (like http://localhost/MySite/Monaco. That works great. However when I try to do the same thing on a page under an Area in my site (like http://localhost/MySite/Admin/Monaco, the loader silently fails and leaves "monaco" undefined. The loader does not throw any errors, but when you try to create an editor monaco.editor.create(...), you get a Uncaught ReferenceError: monaco is not defined error. Watching the file loads from the browser's debugger shows that the last file loaded by the browser is editor.main.js (and it does load successfully, it's not an issue of it not being able to find the file); In a successful Monaco load (such as on the base site), that is followed by the editor.main.css and editor.main.nls.js files (then a whole bunch of other workers and services once we 'create' our editor). I have tried hosting the Monaco files both in the local site, as well as putting them on another site (CDN-style) and using the provided guidance to ensure web-worker support (both ways work on a standard view, but not one in an Area). I've tried it on Chrome, FFox, and IE; all three show the same behavior. In IE, if I load the page with the debugger open, it will sometimes stop on an error Object doesn't support property or method 'create' on editor.main.js line 47280 column 21, which maps to file:///C:/Alex/src/vscode/src/vs/editor/common/services/editorSimpleWorker.ts line 315. I don't know if that's actually related to the load failure or not. Whatever the cause, I've spend several hours trying to get this working to no avail, so I'm opening this issue.

It takes more space than its contrainer

html,body {
  margin: 0;
  padding: 0;
  border: 0;
  height:100%;
}

#container {
  margin: 0;
  padding: 0;
  border: 0;
  width: 100%;
  height: 100%;
}

When I run a demo, I can see both horizontal and vertical scroll bars. Which means it takes more space than its container which is not ideal.

Html workers

Hi, is html workers coming to this package ?

I've managed to make they work by copying the missing files from the demo pages to the same folders in my project.

It did great except for inline css and javascript and script tags which didn't work.

Support for module.js or commonjs?

It looks like this isn't the case, as with Node.js and webpack I'm unable to require('.../editor.main'). Is that correct that there is no support for modulejs or common.js?

The right-pointing mouse pointer is oversized in high DPI

(I have to take a photo because there is no software can take a correct snapshot)

Weird behavior only when typing <span in HTML

Steps to reproduce, using Chrome Version 50.0.2661.102 m (64-bit):

Go to https://microsoft.github.io/monaco-editor/index.html
Change language to HTML.
Click at the end of and press Enter.
Type "<span" and notice how it suddenly becomes "span <" (before even pressing space). If I backspace, it goes back to "<spa". If I type "<spandex", it will show as "spandex <". After pressing space or ">", the cursor jumps past the "<", but the problem remains. Similar behavior occurs when trying to type the closing tag "", so trying to type "" becomes "span span <> </>".

I was also able to reproduce this in IE11.

I am not able to reproduce this with any other tag. Typing "<div" or "<spin" or anything that doesn't start with "<span" does not cause the problematic behavior.

browser support info from CSS IntelliSense missing from tooltops

Steps:

Start typing a CSS property with browser info, such as motion-path
Note browser support info included at end of Intellisense string
complete typing the declaration
hover the property to see the tooltip

Expected:

Browser support info included at end of strong (perhaps on new line)

Actual:

It is missing from the tooltip; it only shows when typing the property.

Arguably it is more useful in the tooltip as you can check quickly if the existing code in your css file is supported, rather than having to delete some text and trigger intellisense again to see that info.

location of the typings file is not listed in the package.json / not named index.d.ts

Missing intellisense more details icon

Monaco Editor:

VS Code:

API to hide parts of the code

Hi,

we use the monaco editor for a project and we need to hide some parts of the code from the user, because there is a Header and a Footer generated, and only a part between which should be editable by the user. We need the whole file in the background, to have a running code completion.

export class GeneratedClass {
     public GeneratedProperty1: string;
     public GeneratedProperty2: string;

    construcor() {}

    // User Code starts here
    public Property1ByUser: string;
    public Property2ByUser: srting;

    public MethodByUser() {}
    // User Code ends here
}

The user should only be able to edit the code between the two comments.
Is it possible to hide the other parts from the user, or disable them in any way?

Thanks,

Achim

import in Angular2 Appliaction

Hi!

Has anybody an Idea how to use the Monaco Editor inside of an Angular2 Application??
I can't figure it out how to import the Editor using SystemJS! >.<
Like "import { monaco } from 'monaco-editor/monaco'" or something similar..

Many thanks for every hint or idea!

How to highlight a range/selection in the editor

I want to highlight a specific range/selection within the editor with a special background color. Is this currently supported?

For examples does the diff editor highlight lines. I want to highlight only a range/selection and not a complete line.

Clicking is broken in IE11 due to use of window.scrollX

https://developer.mozilla.org/en-US/docs/Web/API/Window/scrollX and https://developer.mozilla.org/en-US/docs/Web/API/Window/scrollY are now updated to reflect that IE does not support window.scrollX / window.scrollY

Ability to grab contents of editor as text.

Is this a possibility? Say I wanted to include the contents of the editor as part of a form and submit the entered text? Codemirror supports this by allowing you to bind the editor to a textarea. Binding it like this is not really necessary in my specific situation but an easy call to grab the contents of the editor as text would be helpful. Is this possible?

Website - Jade should be Pug

For awhile now, Jade has been slowly renaming itself to Pug due to copyright issues.

On the Monaco website, it is still called Jade. At some point, this will have to be changed.

not loading dev editor - only min version

these lines aren't correct - please correct me if I am wrong.
can we possibly just default to the dev version - i am assuming anyone wanting to run monaco well be a dev anyway? not sure.
cheers

open http://localhost:8080/monaco-editor/test/?monaco-typescript=dev

window.location.search = "?monaco-typescript=dev"

function loadDevEditor() {
    return (getQueryStringValue('editor') === 'dev');
}

function getQueryStringValue (key) {
    return unescape(window.location.search.replace(new RegExp("^(?:.*[&\\?]" + escape(key).replace(/[\.\+\*]/g, "\\$&") + "(?:\\=([^&]*))?)?.*$", "i"), "$1"));
}

Access to Markers?

I'm killing myself trying to figure out how to get access to the info/warning/error markers created by the language linters. Is this possible?

I've found how I can access decorations (IModel.onDidChangeDecorations and a few get... methods in ITextModelWithDecorations). I can filter for decorations that are "IModelDecorationsChangedEventDecorationData.isForValidation), but that doesn't give me access to the marker.

I've found how I can SET markers (monaco.editor.setModelMarkers).

Am I missing something, or are the markers currently not exposed? Is there a preferred method of enumerating errors and warnings?

Website dropdown is off by 1 or 2

From https://news.ycombinator.com/item?id=11939557#11941327

C language sample on website uses C++ code, not C

Mentioned in this Hacker News comment: https://news.ycombinator.com/item?id=11942119

Note that the issue isn't how the highlighter works, it's just that the sample code is C++ rather than C code.

Is there a way to set monaco-editor readonly?

Hi,

I wonder if there is a way to disable editing i.e. enter into read only mode.

Thanks,

Any plans to add a showcase section to the repo README

Hi,

Will there be any plans to include showcases for products/tools that uses the Monaco Editor? I figure this would be a mutually beneficial for both parties since it provides advertisement for the creators and provides more examples for what you can do with the editor.

Cheers

jQuery and AngularJS file reference for intellisense

Hi team,

How do I add file map reference for jQuery or angularJS file reference for typescript/javascript?

Also is it possible to include another JS/TS file link reference so VS can learn the variables/objects within the other files and provide it on the intellisense?

Thanks

Jonathan

Any way to have access to undo manager ?

Dear team,

I am in the process of replacing ace editor with monaco, but there are some features which I don't know how to translate them.

Could you please tell me how to access the undo manager or whatever name it is in monaco ?

The purpose would be to know where I am in the stack so that at which point of the undo stack the file was saved.

Thanks,
Nicolas

package.json autocomplete not working

Hi,

The autocomplete for package.json files it not providing any intellisense and not providing information for dependencies. Any chance to see it coming in monaco-editor ?

Thanks,
Nicolas

Reveal.js Example

As a presenter, I have long wished I could embed a fantastic code editor like Monaco into my slides for simple demonstrations. With the open sourcing of Monaco, it seems that may now be possible. Unfortunately, in my first attempt of bringing the two together using Reveal.js, I found that the way that Reveal automatically scales content seems to make Monaco not work well; the font size is too small (and can't be increased), the command pallete shows up with font too big and gets cut off, and the cursor doesn't line up with the text the further down the line you go.

It would be great to get an example out there of how you can use the two together, even if it requires additional CSS and/or JS to get them to play nicely.

Mouse operations fail when the editor is hosted inside a fixed container

Hey, thanks for the excelent work.

Monaco editor selection doesn't work properly when it's inside a div with position fixed/absolute and document has being vertically scrolled.

My workaround is to manually change body scroll top to 0 when dialogbox is shown.

Suggest widget rendering broken (IE9)

from @isidorn

IE9, https://microsoft.github.io/monaco-editor/index.html
Trigger suggest widget, scroll down, scroll back up -> notice how the rendering is broken, none of the suggestions get rendered

webpack/browserify compatible AMD headers

Hello,

Is there any way to change AMD headers to be compatible with webpack/browserify?

Are there any plans to support CommonJS, UMD or ECMAscript 6 for the package and external modules in monaco.d.ts?

Manually execute "Format Code" action

Is it possible to manually execute the "Format Code" action ? and How ?

Thanks!

Keybinding & bubbling

If, for example, I bind a command to Ctrl+S:

var myBinding = editor.addCommand([monaco.KeyMod.CtrlCmd | monaco.KeyCode.KEY_S], function() {
    alert('SAVE pressed!');
});

The command runs, but the key combination also bubbles up to the browser, prompting me to save the page. Does the same thing if I use addAction as well. Tried returning false, etc. Any way to prevent bubbling?

For what it's worth, I tried:

    editor.onKeyDown(function (e) {
      if (e.ctrlKey && e.keyCode === monaco.KeyCode.KEY_S) {
        e.preventDefault();
      }
    });
    editor.onKeyUp(function (e) {
      if (e.ctrlKey && e.keyCode === monaco.KeyCode.KEY_S) {
        e.preventDefault();
      }
    });

Minimap support in the editor

Really like the red, green dashes on the side near the scrollbar. It would be awesome if it showed some sort minimap like sublime has. Super useful in long files trying to figure out where certain part of code starts and ends.

How to set the max length number of one line in monaco editor ?

hi all,

After past a very long one line text more than 300 ascii char into monaco , I fond that the line is wraped , but 300 is much more thant what I want .

How to set the max length number of one line in monaco editor ? or set allow auto wrap according to the editor width as common html editor does.

thanks in advance .

Command pallete rendering broken (IE9)

@isidorn

Ref: microsoft/vscode#8229

IE9, https://microsoft.github.io/monaco-editor/index.html
open the command pallete, scroll down, scroll up, after scrolling up notice how the command pallette is broken

Auto resize with contrainer

html,body {
  margin: 0;
  padding: 0;
  height:100%;
}

#container {
  height: 100%;
}

The container always takes 100% of the page size. When I resize the page, however, the monaco editor doesn't resize itself. I want the editor to resize itself so there will never be horizontal or vertical scroll bars. I have done similar things with ACE and CodeMirror. Is it possible with monaco-editor?

where is inmemory:// ?

/// <reference path="typings/test.d.ts"/>

Gives me "file 'inmemory://model/typings/test.d.ts' not found."

Where and how can I put this file, in order for it to be found like this?

Thank you very much for any hint!

Transpiling TypeScript to JavaScript and SASS/LESS to CSS

Is there any method to transpile/compile the typescript to javascript and SASS/LESS to CSS just like what we have in typescript playground?

Thanks

HTMLHint (or extension support)

Currently VSCode/Monaco supports linting for a good number of languages, but HTML is not one of them. VSCode makes up for this with an extension: https://github.com/Microsoft/vscode-htmlhint

So, will VSCode extensions (perhaps with minor mods) work in Monaco? If not, any plans to add HTML linting?

How to filter suggestions?

I would like to filter suggestions to remove properties and functions starting with _.

Is it possible?

Disable editing in the modified window (right side) and jump to first diff in diff editor

Hi,

Is there an official way to disable editing on the modified window (right side) in the diff editor? In the source, I can see you can disable/enable editing on the original (left side). Right now, I'm do a cheap hack to remove editing in the modified window, and was wondering if there is a supported/proper way to do this.

Second question. Is there a way to jump/scroll to the first diff, in the diff editor?

Thanks

Intellisense of variables

Is it possible to have intellisense for child properties of variables? I have a few select C# models that I want to use in the editor and intellisense for all the properties is necessary for the functionality I am looking to implement.

where is the compiler

Hi Team,

I am looking for the typescript compiler. I had a look at the typescript playground, which is using getEmitOutput, but I cannot find how to use it myself. Could you please guide me on how to proceed ?

Thanks,
Nicolas

How is monaco better than alternative web code editors?

So how is this exactly better than other web code editors? notably Ace?

Not-hardcoded provideCompletionItems

Is it possible to call web service in provideCompletionItems to return not-hardcoded/dynamic provideCompletetionItems?

monaco.languages.registerCompletionItemProvider('mySpecialLanguage', {
provideCompletionItems: () => {
return [
{
label: 'simpleText',
kind: monaco.languages.CompletionItemKind.Text
}, {
label: 'testing',
kind: monaco.languages.CompletionItemKind.Keyword,
insertText:'testing({{condition}})'
},
{
label: 'ifelse',
kind: monaco.languages.CompletionItemKind.Snippet,
insertText: [
'if ({{condition}}) {',
'\t{{}}',
'} else {',
'\t',
'}'
].join('\n'),
documentation: 'If-Else Statement'
}
]
}
});
https://microsoft.github.io/monaco-editor/playground.html#extending-language-services-custom-languages

Folding Glyph hidden on FF

The +/- glyph appears not to show up in Firefox v47 (fine in Edge+Chrome). Tracked down to:

.monaco-editor .margin-view-overlays .folding::after {
z-index: -1;
}

Remove that line (or set z-index to auto) and it shows fine. Not sure what effect that might have on other / older browsers, though.

Unable to properly type or delete text when using monaco on Android

Hopefully this is the right place for this issue.

I'm having trouble using this editor on Android mobile devices - I am unable to type or delete text when using the on screen keyboard. This is within the Chrome browser on Android 6.0.

This issue does not occur on my Lumia 435 I have for WP development.

Attached is a gif demonstrating the issue on the monaco editor homepage: Link

microsoft / monaco-editor Goto Github PK

monaco-editor's Introduction

Monaco Editor

Try it out

Installing

Concepts

Models

URIs

Editors

Providers

Disposables

Documentation

Issues

FAQ

Contributing / Local Development

Code of Conduct

License

monaco-editor's People

Contributors

Stargazers

Watchers

Forkers

monaco-editor's Issues

Recommend Projects

Recommend Topics

Recommend Org