microsoft / monaco-editor Goto Github PK

View Code? Open in Web Editor NEW

39.0K 526.0 3.5K 133.05 MB

A browser based code editor

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

License: MIT License

JavaScript 61.26% HTML 1.49% CSS 0.04% Shell 0.02% TypeScript 37.19% SCSS 0.01%

monaco-editor vscode editor browser typescript

monaco-editor's People

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

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

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?

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,

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.

Missing intellisense more details icon

Monaco Editor:

VS Code:

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

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?

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.

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!

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

Manually execute "Format Code" action

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

Thanks!

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.

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

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.

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

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

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?

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.

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?

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

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.

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

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?

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

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.

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!

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

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.

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

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.

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.

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.

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.

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.

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?

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)

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

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.

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"));
}

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

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();
      }
    });

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

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

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

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 .

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.

How is monaco better than alternative web code editors?

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

Website dropdown is off by 1 or 2

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

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

microsoft / monaco-editor Goto Github PK

monaco-editor's People

Stargazers

Watchers

Forkers

monaco-editor's Issues

Recommend Projects

Recommend Topics

Recommend Org