News for hackers. Stuff that matters.
Re:Ace, CodeMirror, and Monaco: A comparison of browser code... by bityard on Monday March 14, 2022 @12:14PM (#30674225)
FYI, this is a few months old, if you want to read something up to date, check out https://blog.replit.com/codemirror

Unfortunately copy and paste doesn't work well on Firefox on Linux in any of these fancy editors because support for the primary selection is broken and Mozilla doesn't seem interested in fixing it: https://bugzilla.mozilla.org/show_bug.cgi?id=1593761

The article calls CodeMirror "lightweight" but the minified JS is still over 1 MB. If you want lightweight then you probably want something like CodeJar (https://github.com/antonmedv/codejar) which clocks in at 2 kB.

Re:Ace, CodeMirror, and Monaco: A comparison of browser code... by masfrost on Monday March 14, 2022 @01:18PM (#30675152)
The 1MB number is not correct, the core of CodeMirror is 150kb before gzip. Codejar is pretty cool, but it's super minimal, it's great if you want something very basic. It also doesn't really work on mobile despite using contentEditable.
Re:Ace, CodeMirror, and Monaco: A comparison of browser code... by bityard on Monday March 14, 2022 @02:17PM (#30675957)
I'm not taking gzip into consideration, I'm going by the fact that this file is 1.14MB: https://codemirror.net/6/codemirror.js
Re:Ace, CodeMirror, and Monaco: A comparison of browser code... by grayrest on Monday March 14, 2022 @03:24PM (#30676980)
The size is going to depend on the set of features enabled and I expect that build has everything turned on so that it can be used for all the demos.

I did a quick check of a CM6 project (customizing the JS lexer) with the base options and a JS-derived lexer and it came out to 405k / 124k gzip. I wouldn't consider it especially lightweight but I think the size is reasonable for the feature set.

Re:Ace, CodeMirror, and Monaco: A comparison of browser code... by masfrost on Monday March 14, 2022 @04:54PM (#30678149)
Hmm, not sure.

Here it is around 300kb inflated https://codemirror-basic-setup.replitfaris.repl.co/ using the basic-setup package, and I don't think this build tree-shakes.

Code for this build is here https://codemirror-basic-setup.replitfaris.repl.co/__repl

Re:Ace, CodeMirror, and Monaco: A comparison of browser code... by robocat on Monday March 14, 2022 @04:55PM (#30678177)
Your points are valid, but are not relevant.

> Unfortunately copy and paste doesn't work well on Firefox on Linux

Code editing in the browser has plenty of valid criticisms, but that criticism is as pointless as saying it won’t work in Lynx. Use any one of the many many browsers that do support copy and paste.

> which clocks in at 2 kB.

You aren’t comparing like-for-like in terms of functionality. You might as well say just use a <textarea> tag which clocks in at 0.02kB.

> but the minified JS is still over 1 MB

From the article: Modularity, bundling, and footprint: “CodeMirror is built with modern technologies. You can even use ES6 modules to import it with no bundler involved. Lazy-loading features is a breeze; dynamic ES6 imports are all you need. The project is very modular and has a very slim core.”.

CodeMirror is relatively light, compared against Monaco: “Monaco is huge. monaco-editor and related libraries contributed a whopping 51.17 MB to our bundle size (5.01 MB when parsed + gzipped)”, in Monaco “lazy-loading features are not possible as far as I'm aware”.