Feature request - switch to Monaco Editor

[OSUblake]

https://github.com/Microsoft/monaco-editor

Replace CodeMirror with Monaco. It provides a much richer editor. Monaco is the same editor that powers VS Code, TypeScript Playground, and Visual Studio Online.

Demo page.

[henri-hulski]

Monaco has also no support for mobile.
I think this would be an important feature.

[OSUblake]

@henri-hulski True. It can be a little unpredictable in some mobile browsers, but mobile support has been added to their Backlog milestone. When or if we might see that completed is anybody's guess.
microsoft/monaco-editor#246

But right now there doesn't seem to be any mobile support anyways. I always get a message that says "This size is not supported, please flip phone or make browser wider".

[henri-hulski]

Yeah at the moment webpackbin has no mobile support but it would be great to have one.

[christianalfoni]

Yeah, Monaco looks awesome, but there are some requirements for the LIVE feature. It needs to track exact changes made and reproduce them on the other clients. This is used with change events and some custom code on Webpackbin now. The Monaco docs are not example driven and generally there is very little information about how to use it at a lower level searching google.

Basically what I need is to listen to some event on the editor which gives what text has changed at what position. This information needs to be passed to a second instance of the editor and update the content of that second editor.

If you find a way to do that I am happy to look into it :)

[OSUblake]

@christianalfoni I'm not familiar with the API either, but it sounds like the onDidChangeModelContent event might be what you're looking for. It will give you the line and column number of the changed content.
https://microsoft.github.io/monaco-editor/api/interfaces/monaco.editor.icodeeditor.html#ondidchangemodelcontent

[christianalfoni]

Thanks for looking into it @OSUblake, I hope to find some time to look into this :-)