-
-
Notifications
You must be signed in to change notification settings - Fork 5.5k
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Switch code editor to Monaco #11366
Switch code editor to Monaco #11366
Conversation
TODO:
|
Should be good for review now. I decided to not cut features. The bundles are big without a doubt, but it still loads within around 2 seconds on my machine. |
Codecov Report
@@ Coverage Diff @@
## master #11366 +/- ##
==========================================
- Coverage 43.84% 43.83% -0.01%
==========================================
Files 613 613
Lines 87229 87213 -16
==========================================
- Hits 38242 38233 -9
+ Misses 44266 44258 -8
- Partials 4721 4722 +1
Continue to review full report at Codecov.
|
This is soooo nice :) |
There is a issue with the |
Actually it's fine, I was just misinterpreting webpack output. |
When creating a new file from the UI, it seemed to be perpetually "loading..." |
Will fix that, did not try creating new files yet. |
File creation fixed, it was related to bad error handling which I clean up. Also fixed editorconfig being missing in the template code after POST (for example, when filename already exists). |
This switches out CodeMirror for Monaco which is based on the same code base as VS code and should work pretty similar to it. It does add a few async chunks, totalling around 10MB to our build. It currently supports around 65 languages and in the default configuration, each language would emit one ugly [number].js chunk, so I opted to combine them all into a single file for now. CodeMirror is still being used under the hood by SimpleMDE so it can not be removed yet.
@jolheiser care to have another look? |
|
Yes, I suppose we can create a small options UI later, especially for things that can not be controlled via But first, I think we'd need some kind of mechanism to store user UI settings in the database (maybe just a JSON object stored as string). |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
LGTM
make lg-tm work |
@@ -1,5 +1,5 @@ | |||
<!DOCTYPE html> | |||
<html lang="{{.Language}}"> | |||
<html lang="{{.Language}}" class="theme-{{.SignedUser.Theme}}"> |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
How to handle non-login user?
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
I don't think anonymous users have access to code edditor
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
he's right, condition should be improved as even unsigned users should have a theme, just not in this variable. Right now it does not matter but I want to move the theme to CSS variables using this class so it has to work then.
* Switch code editor to Monaco This switches out CodeMirror for Monaco which is based on the same code base as VS code and should work pretty similar to it. It does add a few async chunks, totalling around 10MB to our build. It currently supports around 65 languages and in the default configuration, each language would emit one ugly [number].js chunk, so I opted to combine them all into a single file for now. CodeMirror is still being used under the hood by SimpleMDE so it can not be removed yet. * inline editorconfig, fix diff, use for markdown, remove more dead code * refactors, remove jquery usage * use tab_width * fix intellisense * rename function for clarity * misc tweaks, enable webpack progress display * only use --progress on dev build * remove useless borders in arc-green * fix typo * remove obsolete comment * small refactor * fix file creation and various refactors * unset useTabStops too when no editorconfig * small refactor * disable webpack's [big] warnings * remove useless await * fix dark theme check * rename chunk to 'monaco' * add to .gitignore and delete webpack dest before build * increase editor height * support more editorconfig properties * remove empty element filter * rename Co-authored-by: John Olheiser <john.olheiser@gmail.com>
This switches out CodeMirror for Monaco which is based on the same code base as VS Code and should work pretty similar to it.
It does add a few async chunks, totalling around 10MB to our build. It currently supports around 65 languages and in the default configuration, each language would emit one ugly
[number].js
chunk, so I opted to combine them all into a single 4MB file for now.CodeMirror is still being used under the hood by SimpleMDE so it can not be removed yet.