6 ms·

CodeMirror 6.0 Stable Release

191 points by JohnHammersley 4y ago

anton96 4y ago
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.
- jitl 4y ago
  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 https://github.com/reactjs/reactjs.org/pull/4720
tmcw 4y ago
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.
- Existenceblinks 4y ago
  The best editor will have no syntax. I'm more into re-visiting structure editor to finally skip lexer and parser altogether.
- capableweb 4y ago
  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.
  - tmcw 4y ago
    CodeMirror powers a ton of editors that people use: https://codemirror.net/5/doc/realworld.html 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.
    - capableweb 4y ago
      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-dreaded-and-wanted-new-collab-tools-love-dread 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.
      - Existenceblinks 4y ago
        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.
capableweb 4y ago
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.
- nicoburns 4y ago
  > 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.
  - capableweb 4y ago
    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?
- wonderbore 4y ago
  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.
jitl 4y ago
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!
- ushakov 4y ago
  do you have it on GitHub?
  - jitl 4y ago
    Latest work is here: https://github.com/reactjs/reactjs.org/pull/4720 https://github.com/reactjs/reactjs.org/pull/4720
    - ushakov 4y ago
      looks so cool! wow! thanks for sharing
d--b 4y ago
Thank you Marijn.
Existenceblinks 4y ago
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 https://bundlephobia.com/package/codemirror@6.0.0
- o_m 4y ago
  It says 6 is tree-shakeable, and 5 wasn't. So its like comparing oranges to apples.
  - Existenceblinks 4y ago
    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.
- terpimost 4y ago
  IMHO worth it
edwinjm 4y ago
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.
- capableweb 4y ago
  Not all examples have demos. The ones that do, usually have them at the bottom. One example: https://codemirror.net/examples/lang-package/ https://codemirror.net/examples/lang-package/
euroderf 4y ago
Doesn't this filter thru to ProseMirror at some point ?
andreypopp 4y ago
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 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 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 https://mlochbaum.github.io/BQN/index.html
dindresto 4y ago
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 https://github.com/niklaskorz/puredit Also, here's a demo: https://thesis.korz.tech/ https://thesis.korz.tech/
- prox 4y ago
  Congratulations on the work done, and what a coincidence it is. Codemirror looks quite interesting!
bityard 4y ago
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 https://bugzilla.mozilla.org/show_bug.cgi?id=1593761
jaustin 4y ago
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 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!
- wch 4y ago
  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.
kldx 4y ago
What are its advantages compared to Monaco (VSCode editor component)?
- gernb 4y ago
  It's smaller, and it runs on mobile are 2 big ones.
- terpimost 4y ago
  Extensions infrastructure looks better
JohnHammersley 4y ago
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/ https://www.overleaf.com/ [2] https://www.overleaf.com/beta/participate https://www.overleaf.com/beta/participate
antidnan 4y ago
It is amazing how many modern software applications rely on CodeMirror. A gift to the public. Thanks Marijn!
hkhanna 4y ago
We're working on integrating CodeMirror 6 into Magistrate (https://getmagistrate.com/ 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.
qwertox 4y ago
I just realized that Marijn is also the creator of ProseMirror. This dude...
- explorigin 4y ago
  And [Eloquent Javascript](https://eloquentjavascript.net/ https://eloquentjavascript.net/)
lanecwagner 4y ago
This is fantastic. I use code mirror for the editor on https://boot.dev https://boot.dev and really like it. I'll need to take a look at upgrading to 6
ericax 4y ago
Obsidian developers here! (https://obsidian.md/ 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/ https://marijnhaverbeke.nl/fund/
- ilrwbwrkhv 4y ago
  What does obsidian use for the graph view plugin? Is it cytoscape? It is very smooth and easy to use.
  - ericax 4y ago
    We use PixiJS! We used to use d3-force for force simulation, but then we rewrote it in wasm ourselves for performance.
    - ilrwbwrkhv 4y ago
      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.
- mmgutz 4y ago
  Why wasn't ProseMirror a fit for Obsidian? Seems like that would be better for structured documents.
  - scambier 4y ago
difflens 4y ago
DiffLens developers here! (https://github.com/marketplace/difflens 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.
bramd 4y ago
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.
bob1029 4y ago
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.

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.

jitl 4y ago
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 https://github.com/reactjs/reactjs.org/pull/4720

tmcw 4y ago

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.

Existenceblinks 4y ago
The best editor will have no syntax. I'm more into re-visiting structure editor to finally skip lexer and parser altogether.
capableweb 4y ago
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.
- tmcw 4y ago
  CodeMirror powers a ton of editors that people use: https://codemirror.net/5/doc/realworld.html 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.
  - capableweb 4y ago
    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-dreaded-and-wanted-new-collab-tools-love-dread 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.
    - Existenceblinks 4y ago
      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.

capableweb 4y ago

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.

nicoburns 4y ago
> 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.
- capableweb 4y ago
  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?
wonderbore 4y ago
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.

jitl 4y ago

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!

ushakov 4y ago
do you have it on GitHub?
- jitl 4y ago
  Latest work is here: https://github.com/reactjs/reactjs.org/pull/4720 https://github.com/reactjs/reactjs.org/pull/4720
  - ushakov 4y ago
    looks so cool! wow! thanks for sharing

d--b 4y ago

Thank you Marijn.

Existenceblinks 4y ago

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 https://bundlephobia.com/package/codemirror@6.0.0

o_m 4y ago
It says 6 is tree-shakeable, and 5 wasn't. So its like comparing oranges to apples.
- Existenceblinks 4y ago
  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.
terpimost 4y ago
IMHO worth it

edwinjm 4y ago

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.

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

euroderf 4y ago

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

andreypopp 4y ago

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 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 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 https://mlochbaum.github.io/BQN/index.html

dindresto 4y ago

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 https://github.com/niklaskorz/puredit Also, here's a demo: https://thesis.korz.tech/ https://thesis.korz.tech/

prox 4y ago
Congratulations on the work done, and what a coincidence it is. Codemirror looks quite interesting!

bityard 4y ago

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 https://bugzilla.mozilla.org/show_bug.cgi?id=1593761

jaustin 4y ago

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 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!

wch 4y ago
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.

kldx 4y ago

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

gernb 4y ago
It's smaller, and it runs on mobile are 2 big ones.
terpimost 4y ago
Extensions infrastructure looks better

JohnHammersley 4y ago

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/ https://www.overleaf.com/ [2] https://www.overleaf.com/beta/participate https://www.overleaf.com/beta/participate

antidnan 4y ago

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

hkhanna 4y ago

We're working on integrating CodeMirror 6 into Magistrate (https://getmagistrate.com/ 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.

qwertox 4y ago

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

explorigin 4y ago
And [Eloquent Javascript](https://eloquentjavascript.net/ https://eloquentjavascript.net/)

lanecwagner 4y ago

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

ericax 4y ago

Obsidian developers here! (https://obsidian.md/ 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/ https://marijnhaverbeke.nl/fund/

ilrwbwrkhv 4y ago
What does obsidian use for the graph view plugin? Is it cytoscape? It is very smooth and easy to use.
- ericax 4y ago
  We use PixiJS! We used to use d3-force for force simulation, but then we rewrote it in wasm ourselves for performance.
  - ilrwbwrkhv 4y ago
    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.
mmgutz 4y ago
Why wasn't ProseMirror a fit for Obsidian? Seems like that would be better for structured documents.
- scambier 4y ago

difflens 4y ago

DiffLens developers here! (https://github.com/marketplace/difflens 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.

bramd 4y ago

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.

bob1029 4y ago

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.