ProseMirror – A toolkit for building rich-text editors on the web

What sets ProseMirror apart from the rest (Slate, Quill, Trix, Draft, etc.) is - ProseMirror isn't simply a library. It's an entire platform with all bits and pieces needed to build a simpler rich text library. Rightly named "toolkit" instead of a "library".

Source: We are using it to build our soon-to-be-released rich text feature in comments for Zoho Writer (https://writer.zoho.com)

1. This component is very high quality and already in use by major businesses: New York Times, The Guardian, Zoho...

2. This component is shepherded by a developer who is very well regarded in the open source community.

3. That developer has only received ~ 50% of his monthly target of Eur 5k.

Something doesn't add up.

In our first version, we used Firepad because it provided collaborative editing somewhat effortlessly. You can imagine how people have very strict requirements regarding email and old habits anchored in other apps (Gmail, Outlook, to name a few). Here’s the one thing we hadn’t thought that made Firepad a deal breaker: spell checking. Firepad’s rendering does not use `contenteditable`, which makes browser-native spell checking impossible to provide. Big bummer for many people.

We started searching for a contenteditable-based tool that supported collaborative editing. At the time, ProseMirror was the only candidate left after discarding Quill due to its overly simplistic document model (no nested lists nor multi-line quotes) and I believe this still holds true today. ProseMirror has actually come a long way to allow proper spell checking (see https://github.com/ProseMirror/prosemirror/issues/390). Marijn very kindly responded to feedback on this topic and ended up rewriting significant parts of ProseMirror to support it. I am extremely thankful for his dedication.

We are very satisfied with ProseMirror as part of our stack. I don’t think any other editor library offers all the options we need. Thanks a ton Marijn!

https://codemirror.net/

https://eloquentjavascript.net/

If any of you have used Quill and Prosemirror, what were your impressions of the differences between the two?

Here's what I've observed so far:

1. DraftJS (React) works on desktop, but has no plans for collaborative editing, mobile support, and limited development. We found it hard to extend the paste handling for custom behaviours too. On the other hand, there are a lot of nice libraries built around it (we used medium-draft)

2. Slate (React) is definitely the way to go for React developers who don't yet need mobile support. It's mature and has a good community of developers. The one downside is that some of the popular plugins lost compatibility with the latest version of Slate, and some plugin maintainers (notably Gitbooks) have decided to stop tracking the mainline releases [1]

3. Quill (non-React) seems very mature with a good ecosystem of plugins. Instead of relying on React Components, it relies on there being a strict mapping between the DOM and the model that you build. The "model" is the DOM, so-to-speak, but with heavy restrictions to avoid ContentEditable issues. We've found it to be very mature, and it's the only one of the 3 we've found to have great mobile and collaborative-editing support out of the box. That was important for us, so we ended up using it today

(1) https://github.com/GitbookIO/slate-edit-list

It does not contain a lot of helper functions (by choice), which can make it a bit difficult to get up and running if you're doing something non-standard.

I tried ProseMirror for a week and while I think it's super elegant, architecturally speaking, it's very low level and not for the faint of heart. Another factor (which might be a pro or a con depending on your use case) is that ProseMirror is completely agnostic at the view level. This forces you do a lot of stuff unless you find a wrapper like TipTap for Vue.

After trying a couple of options I ended up using Slate. It's for React which means the integration with the view layer is already solved for you. The bad thing about Slate is that it's still a work in progress. For example the project is undergoing a massive rewrite removing immutable.js:

https://github.com/ianstormtaylor/slate/issues/2345

My experience with Slate has been great. I'm much more productive than with ProseMirror, but OTOH I'm not very happy that sometime in the near future I will have to do a big rewrite. It's completely my fault for build something with a unfinished library though.

https://getpolarized.io/

Polar is a document management platform which support rich annotations around your documents including reading progress.

Comments, flashcards, etc.

Rich text / HTML was a big requirement.

I also wanted advanced features like mathematics / latex and pasting of HTML from your existing tools.

I actually ended up using Summernote:

https://summernote.org/

which was interesting as it's a bit older and not actively developed as much as the alternatives.

I think the big deciding factor for me was that it handled rich pasting better than all other platforms. I can copy from my editor (IntelliJ) and paste into it and the format is preserved perfectly.

With other systems this didn't work.

The BIG downside though is the size. It's huge and requires jquery (which is also huge).

I think what I'm going to do is bifurcate my app into two parts. The basic app is setup to load quickly and then the resources for the annotation come 1-2 seconds later.

Most people read for a bit before they're ready to start working with the document.

This give me time to download things in the background.

I just tested the above scenario (copy from my editor) and pasted into prosemirror and it couldn't handle it. In fact nothing happened.

I wish there was a CLEARLY obvious winner here but we're still all over the map in terms of functionality and feature set.

What I mean is if you typed bold, let it turn into a bolded word, and then decide to edit the word itself, it should be surrounded by bold again instead of defaulting to ctrl-b due to content-editable. The same goes for LaTeX with $$ decorators.

I find this more natural when writing with Markdown and LaTeX than having to click the menu bar and inserting a math formula or whatnot. I think the best editor I found so far that does this is Typora, but that library is not open-source. There is an open-source library very close to it called Marktext, but that has a few annoying bugs and only has 1-2 developers.

So I'm wondering if ProseMirror is the mature library for me?

Edit: Ok, HackerNews only renders italtics which makes writing a bit annoying. The bold was initially surrounded by two * on both sides.

This is THE toolkit if you want power and flexibility when building out your editor!

https://bustle.github.io/mobiledoc-kit/demo/