CodeMirror 6.0 Stable Release | Hacker News Reader

CodeMirror 6.0 Stable Release

marijnhaverbeke.nl

191 pointsJohnHammersley59 comments

Obsidian developers here! (https://obsidian.md/)

The new editor in Obsidian was made possible by CodeMirror 6, and it has been powering both the Live Preview mode (like Typora) and the source mode in Obsidian ever since.

It can be a bit overwhelming to get into first, but as we experimented more with it, we found it to be extremely extensible and powerful. It's also highly performant for large documents. Another major reason we chose CM 6 is that it's also one of the only code editors that work decently on mobile.

While developing the new editor, Marijn was also amazingly responsive in investigating and fixing all the big and little things we ran into, even relatively niche issues like IME input bugs.

If you find CM 6 useful, consider what you can to support the project! Funding link is here: https://marijnhaverbeke.nl/fund/

What does obsidian use for the graph view plugin? Is it cytoscape? It is very smooth and easy to use.

We use PixiJS!

We used to use d3-force for force simulation, but then we rewrote it in wasm ourselves for performance.

Huh Pixi JS. I used to be a contributor many moons back. It's a great little library. Would love to read about challenges with d3 force and your wasm approach if obsidian has a tech blog.

Why wasn't ProseMirror a fit for Obsidian? Seems like that would be better for structured documents.

For a good portion of its users, an important feature of Obsidian is the use of flat Markdown files.

I'm inquiring about actual implementation not Markdown. Markdown -> AST -> CodeMirror vs Markdown -> AST -> ProseMirror.

CodeMirror 6 is an awesome piece of software and very flexible — I was even able to build a notebook UI with it — https://bqnpad.mechanize.systems/notebook — this is a notebook (WIP) for BQN[1].

The nice thing is that the whole notebook is a single CodeMirror editor with cells stored as ranges in CodeMirror state. This way intercell actions like selection/copy/paste are possible and still you can control execution per cell.

Shortcuts at https://bqnpad.mechanize.systems/notebook

* Shift+Enter to eval cell

* Cmd-Enter to create new cell

* Cmd-Option-Enter to split cell at cursor

* Cmd-Backspace to join cell with the previous one

[1]: https://mlochbaum.github.io/BQN/index.html

CodeMirror is one of the most important pieces of software, period. This thing is powering everyone's editors - heck, Chrome DevTools uses it.

CM6 has a steep learning curve, in exchange for being even more flexible than 5. It's worth it.

I'm not sure the over-exaggerations are necessary (one of the most important? Everyone's editors?), CodeMirror is plenty good to just stand on its own merits without over-hyping it.

CodeMirror powers a ton of editors that people use: https://codemirror.net/5/doc/realworld.html

It's exhausting to tailor language to the comments section. I once wrote a post called "the best programming font" and all the comments were about how it was not provably scientifically the best and it was just "my opinion." We're not writing math proofs here, let people express thoughts.

Sure, I'm not saying it doesn't power a lot of editors. But it doesn't even come close to powering the editors most people use daily, so your over-exaggeration just makes the praise feel less like adding value to conversation and like over-hyping something for no reason.

As some sort of reference, the most common (loved) editors are: neovim, vscode, rider, vim, emacs, intellij, ipython/jupyter, webstorm, pycharm, visual studio, rubymind, phpstorm, notepad++, xcode, sublime, android studio and so on.

Neither of those use CodeMirror.

https://insights.stackoverflow.com/survey/2021#most-loved-dr...

> Question: Which development environments did you use regularly over the past year, and which do you want to work with over the next year? Please check all that apply.

Yes, CodeMirror is big and popular, and great overall. Again, I'm not saying otherwise. It's just hard to take comments seriously when they are obviously not factual, and it detracts from the message you want to convey.

Edit: To be a bit more constructive: Instead of saying "CodeMirror is what everyone uses!" or "This font is the best font for programming!", try to write out the reasons of why you think like that instead, and let people arrive to their own conclusions. Describe the cases you've seen where CodeMirror shines, or write why and in what cases the font truly stands out to you. And maybe then you'll get a warmer reception in your replies.

Yep, at the end of the day it's just text editor. I hope UX people with coding skills would re-visiting Paredit and make it mainstream. Designing keystroke for the mass is hard, especially for text heavy (e.g. docs) content.

Thanks for the tips in the edit, I'll try to do that :-) (I'm sbd else).

Same as "Show, don't tell" among writers

This seems to go beyond choice of words. All you’re saying here is that context is exhausting. But sounds like you’d sooner exhaust your listeners with vagueness then try to exhaust yourself to find clarity.

The best editor will have no syntax. I'm more into re-visiting structure editor to finally skip lexer and parser altogether.

What a coincidence. My master thesis "Projectional Editing of Internal Domain-Specific Languages" relies on CodeMirror 6 for its implementation, and I just happen to have handed in my thesis today, on the same day CodeMirror 6 is released. :)

If anyone is interested in the topic, the implementation is on Github: https://github.com/niklaskorz/puredit

Also, here's a demo: https://thesis.korz.tech/

Congratulations on the work done, and what a coincidence it is.

Codemirror looks quite interesting!

This is great news! I know Obsidian uses CodeMirror 5 on desktop while using CodeMirror 6 on mobile, maybe the stable release will make them unite the versions again so 6 runs both on desktop and mobile? Would make life easier for writing plugins.

On a unrelated note, this irks me slightly:

> CodeMirror 6 is a new code editor library for the web, a from-scratch implementation

Why not just call it something different at that point? It's essentially CodeMirrorNext v1, if everything has been reimplemented from scratch and all the API interface intentionally changed.

That way there won't be any confusion what editor API you talk about when you say "CodeMirror". Instead, we now have to ask follow up question "Version 6 or older though?".

This seems to happen in a large part of the ecosystem. React Router for example has gone through a lot of API churn, where basically the first three/four versions of React Router all look different, and should instead have been just three/four different libraries instead of versions.

> That way there won't be any confusion what editor API you talk about when you say "CodeMirror"

Perhaps, but that's not new. IIRC all major version bumps of CodeMirror have essentially been full rewrites.

I was only involved in one major project that relied heavily on CodeMirror since version 2.something. I participated in moving the project from version 2->3 and 3->4 (but not 4->5 which someone else did), and for those moves, the editor API didn't change very drastically as far as I can remember. Maybe the 4->5 migration was bigger?

If Python 3 was just named Cobra 1, I guaranteed that Python 2 would have been “forked”

Increasing the version is a straightforward way to say “n is outdated, use n+1.” As a publisher I don’t want to start a new project with zero followers, especially if the project does the same exact thing my previous project did, just better.

> As a publisher I don’t want to start a new project with zero followers, especially if the project does the same exact thing my previous project did, just better.

Yeah, that's a good point and a lot of API interface churn we're seeing in the ecosystem makes sense to me now. People don't want to lose their social clout.

Would this have applied to, say, Perl 6 vs Raku?

The second tip is to have the next version finished within 20 years of the previous one.

FWIW, Perl 6 was released in 2015, so roughly 15 years after the original announcement.

I assume you mean Perl 5 vs Perl 6 ?

One could argue that that is exactly what happened in 2008, when the "sister language" meme was introduced. At that time, the Perl Porters basically abandoned all support for Perl 6 and started developing on Perl 5 again.

So development of Perl 6 basically fell back on just a handful of people, on the Parrot backend, which became less and less acceptable for Perl 6. And then people still wonder why it took so long?

Angular 1 seems like a quaint memory

> Obsidian uses CodeMirror 5 on desktop while using CodeMirror 6 on mobile

Obsidian Live Preview is CM6 on desktop afaik?

This is correct, Obsidian uses CM6 on all platforms.

A CM5 based editor is still available as "Legacy Editor" in the settings on desktop, to support older plugins.

Mobile was always using a CM6 editor, while desktop only got CM6 some time after that. Which is probably the source of the confusion.

Huge thanks to Marijn for all the work he's put into this.

We're currently integrating CodeMirror 6 into Overleaf [1], and you can try it out by joining our beta program [2] (which will give the option to select the beta source editor, which is the one built using CM6). If you do give it a try and spot any bugs/issues, please let us know, feedback is always much appreciated.

[1] https://www.overleaf.com/

[2] https://www.overleaf.com/beta/participate

I’ve been working on CodeMirror 6 extensions for Typescript-based autocomplete, autoimport, hover tooltips, etc. The extension system is very deep, but there are APIs at many levels of abstraction. Marijn is also very quick to address feedback. CodeMirror is also much more usable on touch devices than Monaco (VS Code’s editor component).

Thanks Marijn for all your work!

do you have it on GitHub?

Latest work is here: https://github.com/reactjs/reactjs.org/pull/4720

looks so cool! wow!

thanks for sharing

CodeMirror is great.

Now I would absolutely love it it Firefox would fix copy-and-paste with the primary selection so that I can actually use it in my workflow: https://bugzilla.mozilla.org/show_bug.cgi?id=1593761

I just realized that Marijn is also the creator of ProseMirror. This dude...

And [Eloquent Javascript](https://eloquentjavascript.net/)

It is amazing how many modern software applications rely on CodeMirror. A gift to the public. Thanks Marijn!

In those days when developers tirelessly try to develop in their iPads, I think a library such as this one has great future.

This sixth version fully support touch input, that is unlike Monaco editor on vs code were you can have multiple online versions (self hosted, one hosted by Microsoft and GitHub code spaces) but none of them work well on the iPad.

I don’t know if there’s something similar to vs code already implemented with CodeMirror but I would tend to think there’s market (of free editor) for that.

A whole VS Code competitor is a lot of work, but I’ve been working on Typescript/JavaScript extensions for CodeMirror. My PR here has the latest: https://github.com/reactjs/reactjs.org/pull/4720

DiffLens developers here! (https://github.com/marketplace/difflens) We current use ACE for our editors, but we've always been interested in checking out CodeMirror too. When we initially started work on DiffLens, CodeMirror 6.0 wasn't "ready" yet, so we chose ACE. Congrats on the release! CodeMirror is so full of features.

Thank you Marijn.

Marijn has done much to make CM6 an accessible code editor. Now with Monaco (editor component of VS Code) and CM6 both being accessible, online code runners/playgrounds and interactive code examples in docs/courses are almost guaranteed to be accessible when they use one of those editors. This eliminates a big accessibility issue when you are learning to code and rely on assistive technologies.

CodeMirror 6.0 is pretty sweet - If you want to see it in action, we've been using it to build the new version of the micro:bit Python Editor:

https://python.microbit.org/v/beta

We’ve found CodeMirror 6’s APIs and in particular its extensibility to be well thought out and great to work with.

Thanks Marijn!

That looks fantastic. It also looks like you also have Pyright running in the browser. Is that right? I thought Pyright only supported running on NodeJS.

We're working on integrating CodeMirror 6 into Magistrate (https://getmagistrate.com/) for drafting legal documents in plain text.

It's an incredible piece of software, and Marijn is very active in the community. We're proud sponsors of CodeMirror.

codemirror@5.65.5:

  169.3 kB Minified 
  55.8 kB Minified + Gzipped

codemirror@6.0.0:

  310.9 kB Minified 
  98 kB Minified + Gzipped

source: https://bundlephobia.com/package/codemirror@6.0.0

It says 6 is tree-shakeable, and 5 wasn't. So its like comparing oranges to apples.

No, I'm comparing apple to apple because I didn't say anything about import. Just like comparing 5% and 10%, it's just an opaque unit comparison.

IMHO worth it

Will definitely be taking a look at this release. I've alternated between CM and Ace for browser IDE purposes. I've got a new C#/DSL scripting environment I need to prototype, so I will give this a spin.

This is fantastic. I use code mirror for the editor on https://boot.dev and really like it. I'll need to take a look at upgrading to 6

What are its advantages compared to Monaco (VSCode editor component)?

It's smaller, and it runs on mobile are 2 big ones.

Extensions infrastructure looks better

Doesn't this filter thru to ProseMirror at some point ?

Seems very nice, but why can’t I find a demo? Even when I click examples, there is a description and code but no editor.

Not all examples have demos. The ones that do, usually have them at the bottom. One example: https://codemirror.net/examples/lang-package/

Reply on news.ycombinator.com