feat: Use monaco editor #3076
feat: Use monaco editor #3076
Conversation
👷 Deploy request for babel-next pending review.Visit the deploys page to approve it
|
✅ Deploy Preview for babel ready!Built without sensitive environment variables
To edit notification comments on pull requests, go to your Netlify site configuration. |
js/repl/Monaco.tsx
Outdated
| padding: { | ||
| top: 2, | ||
| }, | ||
| theme: "dark-plus", |
There was a problem hiding this comment.
Can we set the light theme by default? Ideally it should adapt to the user colour scheme preference.
There was a problem hiding this comment.
Since our tabs and options are dark, I prefer to always use a dark theme. :)
There was a problem hiding this comment.
The current REPL supports user colour scheme preference. If you prefer dark scheme, the REPL will adapt to the system settings (we should have also migrated the top-right colour scheme switch button to REPL page):
Light mode:
Dark mode:
The tabs/options are for the contrast with the editor, it does not mean we should use dark unconditionally: Similar to the landing page: the upper part is always dark
Light mode:
Dark mode:
There was a problem hiding this comment.
To be honest, our current light mode doesn't seem very ideal.
As an example, typescript-eslint is more like full light mode.
Of course I am in favor of introducing a button so that users can quickly switch.
There was a problem hiding this comment.
I am all for changing the setting panel accordingly. But to force users with light mode to use dark mode editor is another thing. The current behaviour is that, if the system is in light mode, the editor will be in light mode as well, so as to the dark mode.
|
On colour mode switch button: If we merge REPL back to a docusuarus page, the global navbar will be reused and we should automatically get the colour switch button. Of course this can be an idea for a new PR. |
|
Yes I'm trying. |
It was separated when we are migrating to docusuarus 2 so that we can speed up the migration process: #2622 (comment) Now that we are using docusaurus v3 and planing a REPL overhaul, maybe we can try to see if we can move it back and unify the navbar. @nicolo-ribaudo WDYT? |
|
The new build looks much better. Now that the monaco editor will capture the command/ctrl key so cmd/ctrl+K will not work, can we hide the 
|
js/repl/Monaco.tsx
Outdated
| model: fastMode | ||
| ? monaco.editor.createModel( | ||
| "", | ||
| "javascript", | ||
| monaco.Uri.file("output/output.tsx") | ||
| ) |
There was a problem hiding this comment.
This is a somewhat bad hack.
The syntax highlighter registered by shiki will cause performance degradation, which is obvious when using timeTravel on large files.
And monaco does not support using different syntax highlighters for the same language.
So we set the language of the output code to js, it will use a worse highlight, and notice that it will not warn even if we output ts.
What do you think about using this solution, or not using it (because it is not very slow, just a little slow), or continuing to use codemirror for output code?
This was tested manually, so let me see if everything works fine after deployment.