One of the things I was hoping to see in this release was first-class LSP (language server protocol) support.
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:
^ 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.
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).
"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."
> 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?
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.
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).
> 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.
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).
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?
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.
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.
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.
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."
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.
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.
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.
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...
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.
> 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.
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.)
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.
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.
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.
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].
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.
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.
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].
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.
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!
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."
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.
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.)
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