
ProseMirror – A toolkit for building rich-text editors on the web - octosphere
http://prosemirror.net/
======
lewisjoe
ProseMirror is easily the best source code I've ever worked with. The
components are so well architected, that inside the codebase there's a 100
page book on software design principles waiting to come out. I'm serious.
Marijn Haverbeke should certainly write a AOSA
([http://aosabook.org/en/index.html](http://aosabook.org/en/index.html)) style
piece on how & why the software is architected in such way.

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](https://writer.zoho.com))

~~~
williamstein
Agreed. Many of the ideas in ProseMirror beautifully reflect many of the best
modern trends in frontend web development (e.g., react).

~~~
Existenceblinks
Sorry, what are ideas it reflects, and what's best modern trends? Is React one
of the best .. modern trends?

------
james_in_the_uk
From no more than the 15 comments posted I'm able to establish that:

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.

~~~
Nokinside
It's typical for small open source teams. It's hard to make money with open
source.

My suggestion wold be to use AGPLv3 license and sell commercial licenses to
improve the income situation.

~~~
throw2016
Amazon, Google and hundreds of others show otherwise. They have tens of
billions of dollars in revenue from open source. Open source is probably
supporting revenue in the hundreds of billions now.

However without closing the gap between the creators and monetizers this model
can't sustain itself and the party will eventually crash.

~~~
Nokinside
As I said, I was referring to small companies.

Amazon or Google don't open source the main software they use make money from.
Only supporting infrastructure software and research.

For a small company it's possible to open source the main product if you use
GPL or AGPL.

------
rafBM
We are using and customizing ProseMirror exhaustively at Missive
([https://missiveapp.com/](https://missiveapp.com/)) Our rich text editor
allows teams to collaboratively compose / review email drafts in real time.

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

~~~
dman
Is Missive funding ProseMirror development at
[https://marijnhaverbeke.nl/fund/](https://marijnhaverbeke.nl/fund/) ?

------
keb_
For those who don't know, this is by Marijn Haverbeke, developer of the great
CodeMirror (in-browser code editor), and author of the even greater Eloquent
JavaScript.

[https://codemirror.net/](https://codemirror.net/)

[https://eloquentjavascript.net/](https://eloquentjavascript.net/)

~~~
aerique
Let us not forget his Common Lisp work or his winning JS1K entry:

[https://marijnhaverbeke.nl/](https://marijnhaverbeke.nl/)

------
squiggy22
Of note - the Guardian engineering team have moved away from their custom RTE
over to this [https://www.theguardian.com/info/2019/jan/24/leaving-
scribe](https://www.theguardian.com/info/2019/jan/24/leaving-scribe)

------
arciini
I've recently been building an editor and considered Slate and briefly used
Draft (both built on top of React). We ended up using Quill.

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](https://github.com/GitbookIO/slate-edit-list)

~~~
thesunny
With respect to Slate, I've got a PR for mobile that works with Android 8 and
9. Will add 7 support later.

I just noticed the problem with the Gitbook plugins and have put up an issue.
My hope is to have a de-forked version in mainline either officially or semi-
officially supported.

Android is happening. The plugins issue is hopefully something we can
resolve...

~~~
arciini
For the plugins, I actually ported slate-edit-list in my project. Let me see
if I can find some time to publish a basic version of it on Github that's
decently-easy to install later tonight

------
andreasscherman
Worth mentioning about prosemirror is that it supports mobile devices
fantastically, which I don't think can be said about _any_ of it competitors.
Realised that far too late after investing in Draft.js, but migrated now to
prosemirror and it truly works great.

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.

~~~
DougBTX
For Slate.js there's a PR to add Android support, looks like this is very hard
to do well:
[https://github.com/ianstormtaylor/slate/issues/2062](https://github.com/ianstormtaylor/slate/issues/2062)

~~~
thesunny
Hello, I’m the individual submitting the PR. It is a hard nut to crack for
sure and took over a solid month of work.

If you are using React, Slate is IMO an excellent choice and the code
quality/extensibility/community are great. I really appreciate DraftJS for
coming out first and I contributed there as well, but Slate’s goals are
overall better aligned to the needs of the community.

------
manigandham
Time to bust out the big list of editors/frameworks:
[https://gist.github.com/manigandham/65543a0bc2bf7006a487](https://gist.github.com/manigandham/65543a0bc2bf7006a487)

------
pier25
I had to choose a rich text library for developing a in house editor with
custom blocks (latex, interactive activities, images, etc).

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](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.

~~~
jorde
I forked Tiptap for React and Typescript with a bunch of additions. Haven't
open sourced it just yet but if you're curious giving it a try, hit me up
(email in profile)

~~~
Findeton
I don't see your email, but I'm interested!

------
devwastaken
As cool as editors in web browsers are, they really don't match up to the
expectations of what an editor can already do in something like Microsoft
word. Rich-text has been done to death, and is only useable in cases where
content input is heavily guided. I would like to see at the least images being
able to be easily moved around, resized, and format with existing content.

------
burtonator
I did a huge deep dive of rich text editors for web HTML recently when I was
building Polar

[https://getpolarized.io/](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/](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.

~~~
lewisjoe
> 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.

I guess you are looking for a fully packed editor that preserves as much
formatting as possible when pasted.

ProseMirror can do that. But for that, you have to first configure ProseMirror
(by adding necessary schema info) to make it understand background colour,
font colour and other such formatting that doesn't come by default. That is
probably why, it might have _seemed_ like ProseMirror couldn't handle the
paste.

~~~
bigmanwalter
After a few days of configuring ProseMirror I was nowhere close to having a
usable editor. It's not for the feint of heart.

------
QML
Anyone know if it's possible to give Markdown and LaTeX first-class support in
ProseMirror? Having only regex-based shortcuts does not achieve that.

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.

~~~
eslaught
Frankly, I have yet to find a good Markdown editor period, regardless of
whether it's open/closed source or whatever. As far as I know all the Markdown
editors I'm aware of only support subsets of the syntax in e.g. Pandoc, so I
keep hitting edge cases where my document won't render properly. In the better
editors, they at least don't mess with the parts of the document they don't
understand, so you can edit with (relative) safety as long as you don't need
to touch the unsupported sections. But some editors, the process of
loading/saving isn't lossless, so you can't even edit such documents. The
editor from texts.io is a big offender here.

I just took Typora out for a spin, and it looks pretty good except it doesn't
understand soft line wrapping. So if you have a document with something like:

    
    
        Some paragraph text
        6. that happens to be broken with a number in front.
    

Then it interrupts the paragraph and makes a list. But at least in my initial
tests it seems to be lossless, so it at least won't mess with existing
formatting too badly.

~~~
QML
Yeah, Typora is still in beta last time I checked so minor issues like that
are expected. Just open up an issue on their Github issue page.

Hm, for me Pandoc has worked pretty well for converting .md to .html. Is it
the specific flavor of Markdown that you are using (I use Github flavored
Markdown)?

~~~
eslaught
I use Pandoc with Pandoc's dialect of Markdown. My issue isn't in the final
conversion step, it's that if I use an editor that isn't careful to preserve
syntax it doesn't understand then the Markdown syntax itself may get messed up
when loading/saving the file. Historically I haven't been able to trust any
native Markdown editors so I just use Emacs and edit in the raw format. But
Typora looks promising and I may try to see how far I can get with it.

------
wes-k
Built out our editor on it with a handful of customizations:
[https://www.wikiful.com/@demo/dev-team-welcome-
wiki](https://www.wikiful.com/@demo/dev-team-welcome-wiki)

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

------
Swalden123
This looks promising! I’ve been hacking code mirror to try to do what
ProseMirror is doing with Markdown. I might have to check out using
ProseMirror in my notebook app.

------
leeoniya
in a similar vein:

[https://bustle.github.io/mobiledoc-
kit/demo/](https://bustle.github.io/mobiledoc-kit/demo/)

------
mkl
Can this be used offline? E.g. sync for collaboration when reconnected.

------
bananatron
What a sick logo.

