CodeMirror 6 status update

Hi all. Here’s a status update on the CodeMirror 6 rewrite. Just in time for the new year, I’ve put the library on NPM in its (pretty much) final shape—as a bunch of separate packages named @codemirror/state, @codemirror/view, etc. The code works well, and I’m really happy with how it turned out, but of course hasn’t been used anywhere near as widely and intensively as the 5.x codebase. So this is where I invite you all to start testing it. Some highlights…

  • The API changed completely. It got a lot better, but this does mean you will have to change/rewrite the code that interacts with the editor.

  • Especially for demanding, complex integrations, the new interface is likely to be a lot more effective to work with than the old. Collaborative editing integration is provided as a core package (@codemirror/collab).

  • The new codebase is way more modern—written in TypeScript, with fully typed docs, exporting tree-shaking-friendly ES modules instead of a hodgepodge of UMD files.

  • This version is a lot more accessible, bidi-capable, and touchscreen-friendly than the 5.x codebase.

So, if you’re in a position to upgrade and these interest you, take a look and let me know what you think.

Version 5.x is going to continue being maintained on the level it has been for the past years—no major new work will happen but I’ll look at patches and fix significant bugs—for at least a while longer.

11 Likes

Thanks Marijn! That’s great news! Congrats on all your hard work!

Is there, or will there be a migration guide of some sort to help us know what we have to change to move from V5 to V6?

That’s not really something that can be summarized by a short checklist, but I’ve made an attempt to summarize the changes and provide equivalents for basic method calls in the new migration guide on the website.

Is there a zipped browser version? Will there be?

No and no. You’ll want to run your own bundler so that you can select the packages you need.

Is there a help guide?
I dont use Node.js.

Is there a help guide?

See https://codemirror.net/6/examples/bundle/

Congratulations Marijn on reaching this milestone!

We’ve just released structural editing for Clojure built on it and we’re very happy with the result. In the future, we hope to bring this to other lisps as well.

Thanks again for enabling this Marijn!

1 Like

Congratulations! Could I interest you in packaging up your editor-specific Clojure handling into a lang-clojure package similar to my language packages? (No detailed guide on language packaging available yet, sorry, but basically just export some Language instance and a function that takes some optional configuration and returns a LanguageSupport instance.)

Could I interest you in packaging up your editor-specific Clojure handling into a lang-clojure package similar to my language packages?

Sure, will look into this next week. Have a good weekend!

So there’s no way to import CodeMirror 6 without ESM ?

Thanks

All packages also provide CJS files.

Yeah but that won’t work directly in browser from a script tag.