Replace ACE with CodeMirror

[outoftime]

CodeMirror is a promising-looking alternative to ACE that is used in a lot of projects, including the developer tools for Chrome, Firefox, and Safari.

Let’s investigate and see whether CodeMirror would alleviate any of the major ACE pain points:

1. It’s a huge portion of the overall bundle footprint. I’m guessing we load a fair amount of unused code.
2. It uses a proprietary module system, and is only compatible with CommonJS/ES6 modules at all via the third-party brace port. This is probably a major contributor to the first issue.
3. Preventing the inclusion of every available language plugin in the bundle requires webpack configuration level hacks.

For full release we need to make sure all these features from the status quo are maintained:

• Display errors as annotations in the gutter
• Ability to customize editor behavior, especially to disable auto-closing of brackets
• Built in syntax highlighting with fully customizable color scheme
• Start/end bracket highlighting
• Undo
• Find-in-code
• Support for auto-formatting (capture the keyboard shortcut, etc.)
• Support regular vs. large text mode
• Focus on error location when error is clicked in output
• Use it for the console input as well
• Highlight current line

[wylieconlon]

I'm planning to investigate this more thoroughly and recommend a specific editor option, such as CodeMirror or Monaco based on the work I'm doing to integrate VSCode-style language intelligence

[wylieconlon]

A summary of my findings is that both CodeMirror and Monaco support each of the requirements you've described above. CodeMirror has fewer of those features enabled in its default setting, but the addons are easy to use and can be styled to a point. Monaco has a bunch of additional features included out of the box, including use of service workers, but I tested with that disabled and it just acted like a very basic text editor. The biggest difference is bundle size- CodeMirror is a significantly smaller codebase. Monaco is probably around 5-7Mb of code depending on how many extensions are included. So the basic idea is that Monaco is a very full-featured editor, which has many customization options out of the box. CodeMirror requires more tweaking and state management to get working, but all the features of the larger library are achievable.

So based on my findings, I think we should use CodeMirror. I reached a similar conclusion for my other projects, which I posted about- it is easier to customize a CodeMirror extension than to rewrite core parts of the Monaco library.