Try https://microsoft.github.io/monaco-editor/ for Try playground

[reasonml]

Try https://microsoft.github.io/monaco-editor/ for Try playground

[glennsl]

Hi @CompuIves! I'm not working on this atm since it looks like we can solve our performance problems by just not having silly css. Of course I'd still love to see better Reason support in Monaco! :)

[glennsl]

I had a go at this, but the css is so royally fucked it might have to be redone.

My guess is the Monaco editor is inserting divs to measure certain things, and having every single div "reset" to display: flex is (unsurprisingly) messing with those measurements, which causes Monaco to insert a 1000px margin, and offset this and that a few thousand pixels in either direction.

Removing the css "reset" fixes it, but of course screws up everything else.

[chenglou]

Can we un-reset just regions of that page? Through a selector

[glennsl]

Tried that, but I think it inserts divs at root. Also tried limiting what's reset, but that seems to make it too specific to be overridden where that's needed.

[chenglou]

cc @jaredly

I wonder if we can remove the flex reset

[chenglou]

I'm also suspecting that the flex reset across all divs is what's causing the huge slowdown on Try playground for Safari

[CompuIves]

Hey! I'm currently looking into Monaco support for ReasonML as well, maybe we can work together on building/porting a language extension for this.

Related issue on CodeSandbox: codesandbox/codesandbox-client#119

[jaredly]

We could remove the flex reset, and just use a base "View" component instead of div, that has display: flex setup for us

[jaredly]

It's annoying that safari is bad at flex though

[rebornix]

Share my 2 cents here, since vscode-reasonml uses https://github.com/freebroccolo/ocaml-language-server, which is written in TS, we can port it to Monaco and provide the same intellisense as VSCode in browser. (Actually it doesn't matter if the LSP/Plugin is written in ocaml/reason or JavaScript as BuckleScript can help it out). I converted Vetur to monaco-vue so it should be not that complex to do the conversion for vscode-reasonml. The only thing I don't have confidence with is writing Reason language definition in https://microsoft.github.io/monaco-editor/monarch.html . @chenglou thoughts?

[chenglou]

@rebornix sorry for the late reply. Do these help? https://github.com/reasonml-editor/vscode-reasonml/tree/941bfbc803a7de24369b06ce1f26b58ca7821d7f/syntaxes

If it's just highlighting, in the worst case we can use JavaScript's