CodeMirror 6(codemirror.net)
codemirror.net
CodeMirror 6
https://codemirror.net/6/
88 comments
There's still no way to use create-react-app with monaco out of the box with offline support (@monaco-editor/react includes calls to a CDN instead of using the bundled JS).
Yes, mobile support is the Holy Grail here.
It's not just Monaco... pretty much all the available text editor components (beyond a plain raw textarea) suck bigly on mobile.
Editing structured text on a phone is always going to suck to some degree, so it's always nice to see anything that promises to make it suck less.
It's not just Monaco... pretty much all the available text editor components (beyond a plain raw textarea) suck bigly on mobile.
Editing structured text on a phone is always going to suck to some degree, so it's always nice to see anything that promises to make it suck less.
It might be outside the scope of CodeMirror. CodeMirror is not an IDE. Monaco is extracted from one.
Monaco was not extracted from VS Code and predated it by many years.
What I meant was this:
"Please note that this repository contains no source code for the code editor, it only contains the scripts to package everything together and ship the monaco-editor npm module."
https://github.com/microsoft/monaco-editor
"Please note that this repository contains no source code for the code editor, it only contains the scripts to package everything together and ship the monaco-editor npm module."
https://github.com/microsoft/monaco-editor
VS Code is not really an IDE, either. Of course, what is an isn’t an IDE isn’t so clear-cut these days.
Was Dreamweaver an IDE?
Nope. Competition to Frontpage.
For it to be an IDE it would need to support developing Website end to end across all layers.
By the way I use present tense, as Dreamweaver is still around, https://www.adobe.com/products/dreamweaver.html
For it to be an IDE it would need to support developing Website end to end across all layers.
By the way I use present tense, as Dreamweaver is still around, https://www.adobe.com/products/dreamweaver.html
....wikipedia lists DW as IDE :)
I was just joking about the debate, which is running since Macromedia’s times.
I was just joking about the debate, which is running since Macromedia’s times.
> This version of CodeMirror was designed from the start with accessibility in mind, avoiding a number of pitfalls that the current crop of editors suffer from
Would love to read more about the details. What makes a code editor accessible and conversely what makes it not accessible?
Would love to read more about the details. What makes a code editor accessible and conversely what makes it not accessible?
The accessibility support here is a BIG deal! The previous versions of CodeMirror confused the heck out of screenreader applications (the way the DOM was constructed). I used CM in an open source side project which wound up getting legs, and was the horrified to learn I had built something with a reasonably large user base, that was quite inaccessible, without a great path to fix it.
I / my company (Grove Collaborative) got in touch with Marijn (the developer of CM) in 2018, asking if we could fund the project specifically to support accessibility. He very kindly shared that the next version (which appears to have been 6) was not yet under development and there was no way to put those dollars to work on that theme at that time -- but please check back in six months because he is thinking about it.
The integrity here is pretty amazing; he actually turned down the funding because the dollars couldn't, at that time, be allocated to accessibility in good faith even though he was actually preparing to do the work.
It's so SO cool to see that he was taking it seriously, and that the work got done, and I can finally update the open source project.
And, yes - accessibility should be a focus at the beginning...but if the best time to do it was years ago, the next best time is now.
I / my company (Grove Collaborative) got in touch with Marijn (the developer of CM) in 2018, asking if we could fund the project specifically to support accessibility. He very kindly shared that the next version (which appears to have been 6) was not yet under development and there was no way to put those dollars to work on that theme at that time -- but please check back in six months because he is thinking about it.
The integrity here is pretty amazing; he actually turned down the funding because the dollars couldn't, at that time, be allocated to accessibility in good faith even though he was actually preparing to do the work.
It's so SO cool to see that he was taking it seriously, and that the work got done, and I can finally update the open source project.
And, yes - accessibility should be a focus at the beginning...but if the best time to do it was years ago, the next best time is now.
It's referring to a11y[0]/WCAG[1] type accessibility (i.e. the ability for screen readers and other a11y tools to be able to easily parse and navigate a CM editor).
Example from: https://codemirror.net/6/examples/tab/
> By default, CodeMirror does not handle the Tab key. This isn't an oversight—it is an intentional decision to make the default configuration pass the "no keyboard trap" criterion of the W3C Web Content Accessibility Guidelines. Some users browse the web without access to a pointing device, and it is really unfriendly towards such users to have focusable inputs that they cannot escape from.
[0] https://www.a11yproject.com/checklist/
[1] https://www.w3.org/WAI/standards-guidelines/wcag/
Example from: https://codemirror.net/6/examples/tab/
> By default, CodeMirror does not handle the Tab key. This isn't an oversight—it is an intentional decision to make the default configuration pass the "no keyboard trap" criterion of the W3C Web Content Accessibility Guidelines. Some users browse the web without access to a pointing device, and it is really unfriendly towards such users to have focusable inputs that they cannot escape from.
[0] https://www.a11yproject.com/checklist/
[1] https://www.w3.org/WAI/standards-guidelines/wcag/
I'm using CodeMirror 6 for https://promlens.com and together with the lezer parser generator, it was great for developing syntax highlighting, contextual autocompletion, and inline linting for PromQL (that part is OSS actually, in https://github.com/prometheus-community/codemirror-promql, much of it built by Augustin Husson, some by myself).
An interesting way the dev handles the licensing, by asserting that commercial ventures have a social obligation to pay:
> CodeMirror is open source (MIT or GPL3). It is being developed on GitHub. Contributions are welcome.
> If you are using CodeMirror commercially, there is a social expectation that you help fund its maintenance
> CodeMirror is open source (MIT or GPL3). It is being developed on GitHub. Contributions are welcome.
> If you are using CodeMirror commercially, there is a social expectation that you help fund its maintenance
CodeMirror is such an awesome library, its one of the core components in our snippet management tool https://codekeep.io
Since it seems you're using CodeMirror commercially and it's a core part of your offering, can I ask if you are currently supporting the development financially?
CodeMirror is dual licensed under MIT and GPLv3.
I don't mind the question but I do mind the implied shame it brings if the reply is "no". Which would be a perfectly fine reply. No one owes CodeMirror anything.
I don't mind the question but I do mind the implied shame it brings if the reply is "no". Which would be a perfectly fine reply. No one owes CodeMirror anything.
Not sure where the "implied shame" comes from, I certainly never put any shame if someone chooses not to donate to something where it's not required. I just saw the statement about the author wanting donations and thought I ask because I was curious. Both yes and no would have been fine in my book since as you say, no one owes CodeMirror nor the people behind it, anything.
markdown(1)
ProseMirror (by the same original author) has this on its homepage:
> If you are using ProseMirror to make profit, there is a social expectation that you help fund its maintenance.
But I don't see anything similar on the CodeMirror homepage.
> If you are using ProseMirror to make profit, there is a social expectation that you help fund its maintenance.
But I don't see anything similar on the CodeMirror homepage.
There is something similar - it's under the About section:
> CodeMirror is open source (MIT or GPL3). It is being developed on GitHub. Contributions are welcome.
> If you are using CodeMirror commercially, there is a social expectation that you help fund its maintenance. Start here.
> CodeMirror is open source (MIT or GPL3). It is being developed on GitHub. Contributions are welcome.
> If you are using CodeMirror commercially, there is a social expectation that you help fund its maintenance. Start here.
That's a pretty shitty thing to do, in my opinion. Guilt tripping isn't the right way to go about this. If you want your cake and to eat it too, then use a license that expects financial compensation from commercial uses.
> That's a pretty shitty thing to do, in my opinion.
The founder and main developer has shared some of his thoughts in this matter here: https://marijnhaverbeke.nl/blog/sustainable-maintenance.html
He has put thousands of hours into these projects, and are giving them away for free – that is, if you can stomach the slight hint that if you're making money on it, then maybe contribute a tiny bit.
He hasn't blogged about burnout yet, like many other open source maintainers do. A recurring theme is about toxic community members. I hope he scrolls past your comment.
The founder and main developer has shared some of his thoughts in this matter here: https://marijnhaverbeke.nl/blog/sustainable-maintenance.html
He has put thousands of hours into these projects, and are giving them away for free – that is, if you can stomach the slight hint that if you're making money on it, then maybe contribute a tiny bit.
He hasn't blogged about burnout yet, like many other open source maintainers do. A recurring theme is about toxic community members. I hope he scrolls past your comment.
I can't help but be irked by the push to consider profiting off Open Source software without financially contributing to be considered "socially unacceptable."
I'm all for donating to Open Source projects and supporting maintainers, but if you expect to profit from corporations exploiting your software, maybe don't license it as OSS?
If I use Open Sorce software and make money, but don't donate, is that socially unacceptable? Is that evil? Greedy?
What about literally every company that uses Open Source software? Are they evil too?
The spirit of Open Source software is that it comes with no or few strings attached. The idea that there is a social expectation to pay goes against that spirit, even if would be nice in theory.
I'm all for donating to Open Source projects and supporting maintainers, but if you expect to profit from corporations exploiting your software, maybe don't license it as OSS?
If I use Open Sorce software and make money, but don't donate, is that socially unacceptable? Is that evil? Greedy?
What about literally every company that uses Open Source software? Are they evil too?
The spirit of Open Source software is that it comes with no or few strings attached. The idea that there is a social expectation to pay goes against that spirit, even if would be nice in theory.
The use of a permissive license allows CodeMirror to be integrated into a lot more settings than would be possible with a copyleft license, even with a paid dual-license for proprietary applications.
Marijn has given CodeMirror to the world for free, and it is in my opinion a very valuable contribution indeed. Comments like yours reflect an entitled view of what proper behavior is for an open source developer.
Obviously anyone who wants to use CodeMirror commercially but doesn't feel Marijn is due any compensation for his work is free to act on that belief. I fail to see how that's "shitty."
Marijn has given CodeMirror to the world for free, and it is in my opinion a very valuable contribution indeed. Comments like yours reflect an entitled view of what proper behavior is for an open source developer.
Obviously anyone who wants to use CodeMirror commercially but doesn't feel Marijn is due any compensation for his work is free to act on that belief. I fail to see how that's "shitty."
I'm so perplexed that someone would feel the need to attack an open source developer for a gentle suggestion of an optional donation.
You're free to pretend there's a constrained license, and pay the project for their work. Are you saying you'd rather be forced to do so by a license? That makes no sense -- you can do it without being forced, if you want to.
You're free to pretend there's a constrained license, and pay the project for their work. Are you saying you'd rather be forced to do so by a license? That makes no sense -- you can do it without being forced, if you want to.
Yeah, it's an absurd complaint.
I mean, I like copyleft licensing. But it's perfectly reasonable (albeit possibly naïve) to request commercial donations on a non-copyleft project.
I mean, I like copyleft licensing. But it's perfectly reasonable (albeit possibly naïve) to request commercial donations on a non-copyleft project.
For an author of an Open Source project to say it's "not socially acceptable" to use their software to make money without contributing back is heavily idealistic, but we don't live in a meritocracy.
If I use the software and make money, but don't donate, should I fear being socially reprimanded? What's the line there?
Piracy is one thing, but this borders on extortion and frankly would make me uncomfortable using this software.
If I use the software and make money, but don't donate, should I fear being socially reprimanded? What's the line there?
Piracy is one thing, but this borders on extortion and frankly would make me uncomfortable using this software.
I think you're being a bit melodramatic.
It's a request, not a demand. And this project's maintainer is being more upfront than other projects.
It's a request, not a demand. And this project's maintainer is being more upfront than other projects.
I'm not attacking anyone, and it's not a gentle suggestion for an optional donation. If it were, I'd have no problem here. I'm happy to support developers and am fully supportive of developers who accept donations.
The developer states the following:
> If you are using CodeMirror commercially, there is a social expectation that you help fund its maintenance.
Calling it a "social expectation" is frankly a pretty big turn off for me.
The developer states the following:
> If you are using CodeMirror commercially, there is a social expectation that you help fund its maintenance.
Calling it a "social expectation" is frankly a pretty big turn off for me.
Consensual financial support based on social expectation seems a lot less shitty to me than non-consensual financial support based on legal recourse.
It sounds like you're guilt tripping guilt tripping?
> If you want your cake and to eat it too
Indeed, so let's assume because CodeMirror doesn't have a license like that, the authors don't "want their cake and eat it too", as the license is simply open source. Don't know where you get the whole "guilt tripping" stuff from, having a message that says "if you enjoy this, please donate" is guilt tripping...
Indeed, so let's assume because CodeMirror doesn't have a license like that, the authors don't "want their cake and eat it too", as the license is simply open source. Don't know where you get the whole "guilt tripping" stuff from, having a message that says "if you enjoy this, please donate" is guilt tripping...
It doesn't say "If you enjoy this, please donate," it says:
> If you are using CodeMirror commercially, there is a social expectation that you help fund its maintenance.
> If you are using CodeMirror commercially, there is a social expectation that you help fund its maintenance.
You seem to be a bit stuck on semantics. The meaning of "there is a social expectation that you" amounts to "please". Just as you go to the doctor and the doctor says "please have a seat", it means you're expected to sit down. The doctor could also have said "There is a social expectation that you sit down now", and you could also say/do "No, I'd like to stand", which would have been fine too.
[deleted]
> If you are using CodeMirror commercially, there is a social expectation that you help fund its maintenance. Start here.
Nice! I liked this!
This clarification, maybe with a board of supporters for those who wish to be visible seems like a much better approach than all kinds of not-osi-open-source.
Nice! I liked this!
This clarification, maybe with a board of supporters for those who wish to be visible seems like a much better approach than all kinds of not-osi-open-source.
Is this an official release or did the submitter just stumble across it? Last I looked version 6 has been in development for a few years.
(Disclaimer: I do use CodeMirror in a personal project of mine but haven't tried 6 because I'm not great at Javascript and there are not many examples of how to use it, although there are tons for 5.)
(Disclaimer: I do use CodeMirror in a personal project of mine but haven't tried 6 because I'm not great at Javascript and there are not many examples of how to use it, although there are tons for 5.)
This is such a great library, you should definitely donate to it if you use it or even do a support contract with the maintainer if it's a part of your core business (i.e. if you use it for some repl.it or leetcode style service where coding is central to the product). This is developed and maintained by a single person.
Yes Marijn spends countless hours on ProseMirror and CodeMirror. He does the coding, issues/PRs and support on discuss.(code|prose)mirror.net. It’s the heart of my product and I will definitely contribute if possible.
[deleted]
Just out of curiosity: does anyone use touchscreen functionality while coding?
It seems like devs generally consider productivity as keyboard > mouse, and I'd assume that mouse > touchscreen, but I've never tried it.
It seems like devs generally consider productivity as keyboard > mouse, and I'd assume that mouse > touchscreen, but I've never tried it.
I have on occasion attempted to use https://play.rust-lang.org and https://gcc.godbolt.org/ from my phone. Both are sites where you enter standalone snippets of code (in C or Rust respectively) and get back compiler output: useful when I’m checking up on obscure corners of language semantics, usually for the sake of some sort of internet discussion (and/or for fun). Both sites use fancy JavaScript-based editor widgets (not sure which ones) instead of raw textareas. Unfortunately, on my iPhone these hurt more than they help. On the former site I can’t copy or paste; on the latter, I can’t even bring up the keyboard. It’s not the end of the world; I can always wait until I get back to my laptop. But it would be nice if I didn’t have to.
CodeMirror is sometimes integrated into notes apps. Roam, Logseq, etc.
I do sometimes on my dell xps 13 (scrolling, not selecting)
Amazing! In the past I used Ace, Monaco, and CM, and CM was always the best. But the API was a bit behind a couple years ago (typescript was wanting), so very excited about this and can’t wait to check it out.
I actually moved from CM to Ace recently because of performance issues with very large JSON documents. I also like the collapsible code and integrated search capabilities in Ace.
I tried codemirror and draftjs. Draftjs was actually much better than codemirror, the api for the former is so difficult to deal with, the latter was a bliss.
One is for code, the other is for rich text. Are you sure it's an apt comparison?
Indeed there was a confusion, it was ProseMirror. To be more specific about my use-case, I wanted to build a text editor for a forum which allows to embed images and videos directly in the editing zone, in between paragraphs of the text. It’s a rather advanced thing to do for a text editor, and the solution took me several hundred of line of code with draftjs, but it was quite easy to achieve because draftjs api is very solid. Initially with ProseMirror it was a lot of struggling, and couldn’t find a way to do it . I also tried Quilljs, but wasn’t satisfied with it either.
I had a similar experience starting out with ProseMirror; I wanted to make something similar to the editors in Dropbox Paper and Notion, and found an out-of-the-box rich text editor called tiptap built onto of it.
They already had nodes for images and embeds [1, 2] which made development easy (I would recommend checking out the source code; its about a hundred lines of code for each, and simple). But as I made more custom nodes, I learned pretty well the internals of tiptap and how it used ProseMirror. And over time, I've come to appreciate knowing its api.
So if there's any advice for people trying to get started with ProseMirror, I would say to look at libraries which built upon it as example code such as tiptap or the outline rich-markdown-editor [3].
[1] https://github.com/ueberdosis/tiptap/blob/main/packages/tipt...
[2] https://github.com/ueberdosis/tiptap/blob/main/examples/Comp...
[3] https://github.com/outline/rich-markdown-editor
They already had nodes for images and embeds [1, 2] which made development easy (I would recommend checking out the source code; its about a hundred lines of code for each, and simple). But as I made more custom nodes, I learned pretty well the internals of tiptap and how it used ProseMirror. And over time, I've come to appreciate knowing its api.
So if there's any advice for people trying to get started with ProseMirror, I would say to look at libraries which built upon it as example code such as tiptap or the outline rich-markdown-editor [3].
[1] https://github.com/ueberdosis/tiptap/blob/main/packages/tipt...
[2] https://github.com/ueberdosis/tiptap/blob/main/examples/Comp...
[3] https://github.com/outline/rich-markdown-editor
You can do some interesting non-code things with CodeMirror.
HyperMD[0] is probably the craziest (in a good way) thing I've seen done with CodeMirror.
[0] https://laobubu.net/HyperMD/#./docs/zh-CN/README.md and https://github.com/laobubu/HyperMD
HyperMD[0] is probably the craziest (in a good way) thing I've seen done with CodeMirror.
[0] https://laobubu.net/HyperMD/#./docs/zh-CN/README.md and https://github.com/laobubu/HyperMD
OP should try out ProseMirror [1], which is the rich-text editor sibling of CodeMirror. And if you like ProseMirror's API, CodeMirror 6 is structured similar to it.
[1] https://prosemirror.net/
[1] https://prosemirror.net/
I discovered CodeMirror when I noticed Zapier was using it for their advanced text inputs.
Like turning special elements in a text input like [code] into a blue css box with [x] button. With copy/paste support in the original [code] format. That sort of thing.
It was great to work with in my own project but I saw 6 was close to coming out but did the 5 implementation anyway. Sad to see it come out so soon. Maybe I'll upgrade it some day.
Like turning special elements in a text input like [code] into a blue css box with [x] button. With copy/paste support in the original [code] format. That sort of thing.
It was great to work with in my own project but I saw 6 was close to coming out but did the 5 implementation anyway. Sad to see it come out so soon. Maybe I'll upgrade it some day.
A bit tangential, but for anyone looking to learn JS the main author of CodeMirror actually wrote an excellent book on it titled Eloquent JavaScript [1].
[1]: https://eloquentjavascript.net/
[1]: https://eloquentjavascript.net/
Anyone know how this works with React? The old version has a wrapper, but it's pretty crude.
I've never used CodeMirror, but I'm using ProseMirror by the same author and it relies a lot on having control of the DOM.
I'm guessing the integration will be basically a wrapper component with a ref of a DOM node where CodeMirror will do its thing.
I'm guessing the integration will be basically a wrapper component with a ref of a DOM node where CodeMirror will do its thing.
> I'm guessing the integration will be basically a wrapper component with a ref of a DOM node where CodeMirror will do its thing.
Pretty much. This is how my React ProseMirror integration works: https://github.com/dminkovsky/use-prosemirror/blob/main/src/.... Though there are some complexities. I believe CodeMirror would be the same.
Pretty much. This is how my React ProseMirror integration works: https://github.com/dminkovsky/use-prosemirror/blob/main/src/.... Though there are some complexities. I believe CodeMirror would be the same.
I use it in React by pointing the setup code at a ref of the CodeMirror div container and then I store the CodeMirror View object in another separate ref of the component so I have access to it from other places. Slightly awkward, but seems to work fine.
Not sure on using CodeMirror but I’m using Ace on my vim learning tool because it has vim key bindings. It’s been a great tool!
Would like to check out code mirror also though too and see if I like it better.
I've been using it with React for a couple months now. In my experience it's been a little awkward but overall fairly usable. It seems like it would be easy to write a wrapper for.
You'd likely be better off using the library directly and writing your own wrapper. You could probably setup a basic one in 10 lines of code.
Take a look at draftjs, it’s an alternative built by facebook (I’m not affiliated with Facebook in any way)
Awesome, CodeMirror is a great online editor. Nice to see it getting modernized.
Neat! I've been following 6 for a while, glad to hear it's in beta :)
Hey! I was making Freecodecamp like app for mobile devices for quite some time (you might have seen it - CodeNGo) and CodeMirror was the only library that worked well on mobile. Thanks for all the hard work!
CodeMirror is a core part of https://jeroo.org/beta/dashboard, happy to see version 6 is stable
What does it mean for it to be dual licensed under MIT/GPL?
GPL was added at the request of the Wordpress Foundation. "This means that you, as user, may choose one of these licenses to abide by. I.e. if complying with the GPL is problematic for you, you can choose the more liberal MIT license."
https://github.com/codemirror/codemirror.next/commit/8a8dc87...
https://github.com/codemirror/codemirror.next/commit/8a8dc87...
Does someone know why this project was supported by the German ministry for research and education?
The German ministry for research and education sponsors a lot of open-source projects they think will be useful for the open-source-landscape or their own projects some day.
specifically, Codemirror got funding [0] via the Prototype Fund [1], which is a partnership beteeen the Open Knowledge Foundation Germany [2] and the German federal ministry of education and research [3].
they fund public-interest open source projects, several per funding round.
[0] https://prototypefund.de/en/project/codemirror/
[1] https://prototypefund.de/en/about-2/
[2] https://okfn.de/en/
[3] https://www.bmbf.de/en/index.html
they fund public-interest open source projects, several per funding round.
[0] https://prototypefund.de/en/project/codemirror/
[1] https://prototypefund.de/en/about-2/
[2] https://okfn.de/en/
[3] https://www.bmbf.de/en/index.html
I make a guess: they find it useful and want to see work on it continue, and have some funds they can use for that?
I see a lot of import statements in the examples like:
import {EditorState, basicSetup}
No, import/export statements are part of ES6 modules. If you're targeting modern browsers (https://caniuse.com/?search=es6%20modules) you can just use it straight up, no need for complicating things with webpack, browserify and/or et al.
(Not really, at this point—the project, like most libraries with dependencies, uses non-relative imports, which browsers don't really handle yet at this point.)
No, not necessarily.
There is a dedicated page under examples, if you're interested: https://codemirror.net/6/examples/bundle/.
There is a dedicated page under examples, if you're interested: https://codemirror.net/6/examples/bundle/.
[deleted]
VS Code's editor is actually available as a separate NPM package as Monaco[0], which is great because it means that you can trivially get LSP support. For example:
https://sorbet.run
^ Sorbet (Ruby type checker) implements the LSP protocol and can be compiled to WASM. So by using Monaco in the browser, we get a playground that supports all the same features as you'd get in VS Code.
It's the same for the TypeScript Playground[1].
There's a lot of great work in this release of CodeMirror. I'm especially excited to see mobile support as a headline feature, because that's completely lacking in Monaco. Maybe LSP support can be a future improvement.
[0] https://microsoft.github.io/monaco-editor/index.html
[1] https://www.typescriptlang.org/play