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

Aug 24 '17 19:08 chenglou

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.

Aug 26 '17 21:08 glennsl

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

Aug 26 '17 22:08 chenglou

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.

Aug 27 '17 00:08 glennsl

cc @jaredly

I wonder if we can remove the flex reset

Aug 27 '17 00:08 chenglou

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

Aug 27 '17 00:08 chenglou

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: https://github.com/CompuIves/codesandbox-client/issues/119

Sep 10 '17 14:09 CompuIves

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! :)

Sep 10 '17 17:09 glennsl

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

Sep 11 '17 15:09 jaredly

It's annoying that safari is bad at flex though

Sep 11 '17 15:09 jaredly

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?

Sep 23 '17 20:09 rebornix

@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

Oct 08 '17 06:10 chenglou