search

reasonml / reasonml.github.io

Reason's documentation site
https://reasonml.github.io
MIT License
333 stars 400 forks source link

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

Open chenglou opened 7 years ago

glennsl commented 7 years ago

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 commented 7 years ago

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

glennsl commented 7 years ago

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 commented 7 years ago

cc @jaredly

I wonder if we can remove the flex reset

chenglou commented 7 years ago

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

CompuIves commented 7 years ago

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

glennsl commented 7 years ago

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

jaredly commented 7 years ago

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

jaredly commented 7 years ago

It's annoying that safari is bad at flex though

rebornix commented 7 years ago

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 commented 7 years ago

@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