
ProseMirror 1.0 - bpierre
http://marijnhaverbeke.nl/blog/prosemirror-1.html
======
mattberkowitz
Hello, from The New York Times CMS team. We have been working with ProseMirror
for the last year and a half or so. Congratulations, it's great to see this
finally reach 1.0!

Some of the things we've found really great about working with ProseMirror:

\- Separation of the data model from the rendered display has allowed us to
extract things like tracked changes and comments which we traditionally
embedded as HTML tags in TinyMCE. This leads to less cleaning and prevents
inadvertent publishing of metadata.

\- Unidirectional data flow makes it work well with applications that use this
type of data architecture.

\- Separation of modules (prosemirror-state, prosemirror-model, etc) has
allowed us to quickly write better tests around our editor code.

\- Decorations have been great for implementing the previously mentioned
metadata aspects of our editor like comments and change tracking. They're
useful for features like our custom spell checking implementation, which
checks for Times style in addition to normal spelling/grammar.

\- Node views allow us to implement rendering in our own way. We've been
rendering React components into them which will eventually allow us to share
code between our editing environment and our user facing web stack. They also
allow use to render the same editor schema in different ways depending on the
context/view they are being used in.

\- The step/transaction model has allowed us to move from what was previously
a set of additions and deletions persisted within the document to a calculated
change tracking implementation. This allows both for a cleaner document but
also allows for a wider range of tracking (i.e. show the differences between
versions 10 and 15) rather than a static current vs the last "accepted"
version comparison.

\- Prosemirror’s plugin system is really simple and flexible and has allowed
us to add new features to our editor rapidly in a modular way without
interfering with other features (comments, custom spell checking, custom
find/replace, etc).

~~~
hitekker
Nice overview on the pros of ProseMirror.

When you were surveying the editor-landscape, what made you choose ProseMirror
over its competitors?

~~~
mattberkowitz
At the time we started revamping our editing interface many of the options
were still in early/incomplete places. I think ProseMirror had an funding
campaign at the time that didn't meet its goal initially, although did later
on in a second attempt. Ultimately we decided to venture down the path of
building our own editor, which was based on a combination of our own learnings
in text editing and a collaborative system some folks in our graphics
department had put together.

About 6 months in, near the start of 2016, when moving on from the
exploration/demo stage of the project to actually building out the real deal
we took another look at the landscape and decided to move to ProseMirror. I
don't remember the exact points that went into the decision but transitioning
from our in house solution to ProseMirror felt pretty natural as they followed
similar design philosophies.

~~~
hitekker
Thanks for the response!

You went down the hard path of rolling out your own editor, and used the
knowledge gained to choose a worthy successor.

I'm impressed. I should give ProseMirror another shot.

------
hitekker
The true test of ProseMirror, SlateJS, and all these new augmented text-
editors will not be comments, posts or even blog articles.

It will be Wikipages.

A visual editor for a wikipage is the crystallization of the semantic-content
conflict as described eloquently by
[https://en.wikipedia.org/wiki/WYSIWYM](https://en.wikipedia.org/wiki/WYSIWYM)

To date, despite a stream of donations and years of development, Wikimedia has
failed to develop an editor that is better, by productivity and other lagging
metrics, than just editing a text-field:

[https://en.wikipedia.org/wiki/VisualEditor](https://en.wikipedia.org/wiki/VisualEditor)
[https://www.theregister.co.uk/2013/09/25/wikipedia_peasants_...](https://www.theregister.co.uk/2013/09/25/wikipedia_peasants_revolt/)

Increasingly, I believe what we really need is an enhanced markup editor--
where bolded text is bolded text, a quote is automatically highlighted as a
quote, but links look like (check this link
out)[[http://example.com](http://example.com)]. The ideal would be to forgo
the "drop down to normal text editor" button and have the only & best way to
edit be through the new editor.

~~~
bjoernm
We’re building the wiki engine
[https://www.nuclino.com](https://www.nuclino.com) based on Prosemirror. It
would be great to get your feedback on it! I think a single editing mode is
the way to go and Prosemirror's flexibility allows us to strike a great
balance between usability for non-technical users (via menus) and speed for
technical users (via markdown commands).

~~~
hitekker
I find the UI of your website to be intuitive and attractive, although I'm
probably not the customer you have in mind.

Can these WikiPages be made public to non team users? I.e., made public?

This is likely a non-issue for your product, seeing as it is team-oriented
rather than community-oriented.

~~~
bjoernm
I'm glad you like the UI. Unfortunately, making the entire wiki public is not
possible at the moment due to our focus on teams and companies. They use it to
share knowledge internally and explicitly don’t want to have it indexed and
publicly accessible.

It could be interesting though to expand Nuclino for the use in communities in
the future as a lot of requirements overlap.

------
marijn
I wrote this. I'll be monitoring this thread and responding to questions here
for the next few hours.

~~~
jameskilton
This looks awesome! I'm a big fan of CodeMirror and I will definitely play
with this tool as well.

Quick note: the Markdown example page
([http://prosemirror.net/examples/markdown/](http://prosemirror.net/examples/markdown/))
has a javascript error that's keeping the editor from loading.

Thanks for all your hard work.

~~~
marijn
Markdown demo should be fixed now, thanks!

------
davidpolberger
CKEditor 5 is also worth a look. They just released their first alpha version.
The editor now uses a model separate from the DOM which can be used to
implement support for collaborative editing. In addition to providing an
extensive API, there are ready-made builds which can serve the same purpose as
TinyMCE and CKEditor 4. This being CKEditor, we can probably expect support
for pasting content from Word and Excel in the future. GPL/LGPL/MPL. We've
just started using it in our SaaS product and have been impressed so far.
[https://github.com/ckeditor/ckeditor5-design/issues/181](https://github.com/ckeditor/ckeditor5-design/issues/181)

~~~
alceta
Your note is very appreciated. I'm currently in the early stages of deciding
on an editor/framework that we need to build upon for custom features.
CKEditor just went up the list after looking at it.

ProseMirror was up there from recommendations from a colleague who has worked
with CodeMirror as a basis for a collaborative editor before, but it needs
more work for basic features.

------
fiatjaf
I love CodeMirror and like very much the content of the Marijn's blog posts
I've read, but I must say ProseMirror is a nightmare to work with. I guess the
problem is that there is too much customization options, no sane defaults, no
understandable tutorials, many different overlapping API and documentation
versions.

I've tried a lot to get it working for
[https://github.com/fiatjaf/coisas](https://github.com/fiatjaf/coisas) and
only managed to make it work by copying running code from one of the demos,
ignoring all customization and working myself around the editor to provide the
custom functions I needed.

I may be totally wrong here, but I'm trying to be sincere about my experience.

~~~
porker
Have you looked at Quill [https://quilljs.com/](https://quilljs.com/)? I was
looking at text editors yesterday for a new project, where I want to represent
images as either custom tags or placeholders that get transformed (in the
system the image is known by its storage ID, not a URL) and Quill looked
easier to work with than ProseMirror.

~~~
benjismith
I haven't tried ProseMirror, but I've can second the endorsement for Quill.
For the past three months, I've been working on a large-scale integration of
Quill (with lots of customizations) into a commercial word-processor
([https://shaxpir.com](https://shaxpir.com)) and it has been a lovely
experience.

A lot of the underlying ideas are similar between Quill and ProseMirror, so
I'm curious to hear a knowledgable comparison of the two. But the excellent
Quill documentation, as well as the responsiveness of the primary developer to
github issues and stackoverflow questions, made it an easy choice for me.

------
catpolice
Cool to see persistent data structures under the covers here. I tried to make
a contentEditable editor some time ago and gave up when I realized how many
edge cases there would be, but from what I learned when working on that, this
general sort of approach seems like the right way.

What do you feel like you learned when working on this project? Will any of it
make it back to Codemirror?

~~~
marijn
I finally figured out how to apply a functional / unidirectional data flow
architecture to the (demanding) case of an editor. And yes, there are plans to
integrate this into CodeMirror at some point.

~~~
dgreensp
Can you comment on what you figured out? Was it about making
functional/persistent data structures performant enough, or something else?

~~~
marijn
That. And also how to deal with the interaction between browser state (around
IME and such) and the component state. And how to properly model updates (see
thread [1]) in a way that plugins can extend and consume in a modular way.

[1]: [https://discuss.prosemirror.net/t/discussion-the-limits-
of-a...](https://discuss.prosemirror.net/t/discussion-the-limits-of-actions-
and-reducers/551)

------
leejoramo
Marijn, congratulations on the 1.0! This project is a great example of an
entirely new crowd-funded open-source project. I am glad I made a small
personal 25€ contribution, and I hope that future work projects will allow me
to send more money your way.

------
KaoruAoiShiho
How does it compare with other modern solutions like
[https://quilljs.com/](https://quilljs.com/)?

~~~
hitekker
I wouldn't use Quill.

The developers are passive-aggressive to the notion of rendering Quill content
outside of the Quill Editor, having ripped out the APIs to do so from newer
versions, and silencing conversations in their Github Issues.

You can see the latest flare-ups here:
[https://github.com/quilljs/quill/issues/993](https://github.com/quilljs/quill/issues/993)

The project also has secondary smells such as inventing weird names for
existing concepts; 'Delta', for example instead of 'data source' or something
more intelligible.

Lastly, it markets itself as feature-complete, but has failed to implement
support for something as basic as tables, which have been repeatedly requested
for the past 3 years.

Personally, I would be afraid to build anything mission-critical upon it.

~~~
jhchen
Quill is now a very popular project on Github, in the top 250 of all projects.
A lot of people want to add their two cents to popular project and
unfortunately the volume is far too high for a) me to respond to every single
attempt at adding said cents and b) Github Issues's linear commenting UI makes
all attempts at adding two cents confusing and cluttering. With this I
prioritize the question that was asked, and specifically the concerns the OP
raises.

I have repeated many times that the removal of getHTML was because it was a
passthrough function that added no additional value to Quill. You can look at
the code history and the implementation of getHTML to confirm this fact. It
has nothing to do with the desire to remove functionality as no functionality
was removed.

I'm confused why Delta is a bad name, since the word delta means change,
variation or difference and that's seems to describe what it is: a change to
Quill's content. Data source on the other hand is unspecific and even
misleading. Naming is hard though and other readers can find out what Deltas
are here [https://quilljs.com/docs/delta/](https://quilljs.com/docs/delta/)
and decide for themselves.

Tables was reported as a feature request by me early in the project life
because it is a known feature of Word but only years later did users indicated
strong interest in it in Sept 2016. I believe in community contribution to
open source so I decided to give the community a chance to build it so I wrote
offered detailed implementation guidance:
[https://github.com/quilljs/quill/issues/117#issuecomment-244...](https://github.com/quilljs/quill/issues/117#issuecomment-244575777).
The fact that this user had seemingly urgent need for it and was employed by a
large public company with resources also contributed to this decision.
Valuable exchanges were had in the Issue and multiple users has fully
implemented it for their companies to varying levels of feature richness
depending on their requirements. An official canonical implementation is
coming in 2.0: [https://medium.com/@jhchen/the-state-of-quill-
and-2-0-fb38db...](https://medium.com/@jhchen/the-state-of-quill-
and-2-0-fb38db7a59b9).

~~~
KaoruAoiShiho
Your response is mostly reasonable and your parent sounds overdramatic.
However the github thread looks quite bad for you.

------
sime2009
Marijn, I'm big fan and user of CodeMirror. I make extensive use (and arguably
abuse) of it in my side project. Thanks for building ProseMirror.

One thing, how does ProseMirror work roughly? Does it avoid the
`contentEditable` minefield? (I'm speaking as someone who has built a WYSIWYG
editor in a past job.)

~~~
marijn
Yes, it uses contentEditable. There's a write-up from last year at
[http://marijnhaverbeke.nl/blog/prosemirror.html](http://marijnhaverbeke.nl/blog/prosemirror.html)
. Some details have changed (we make more use of DOM diffing and mutation
observers than initially hoped), but most of the info there still applies.

------
tkone
We actually use codemirror at work as the basis of a fully-operational
operation-transform based collaborative editor. We are working on open-
sourcing our implementation, but thank you for all your hard work!

It's interesting about not being able to easily bolt on collaboration; it was
not a trivial endeavor at all, but codemirror's APIs made that part
exceedingly easy :)

------
roughfalls
What I've never seen in any rich-text web editor is an ability to have more
complex numbered lists. So often I want to put in a block of content (e.g., a
small code example) as part of a numbered list item, and then resume the list
after the block . But they all restart me at "1."...

~~~
marijn
If you press backspace in an empty list item in the demo, you can continue the
item above. The schema is tree-shaped, so you don't have the usual awkwardness
about nesting things.

Or, if you mean lists starting at something other than 1.--The schema used in
the examples actually supports a `start` attribute on numbered lists, but the
UI doesn't currently expose it.

------
Ivoah
The color of the links on that blog is not very colorblind friendly. I
couldn't tell what was a link and what wasn't without zooming in to make the
text larger.

~~~
marijn
I've made them a little brighter, hope that helps.

------
tarr11
I'm a big fan of your work Marijn!

Do you have a Patreon or other donation method on your site?

~~~
marijn
Yes, I have a small patreon at
[https://www.patreon.com/marijn](https://www.patreon.com/marijn). Right now
I'm also running a crowd-funding for the new edition of my book at
[https://eloquentjavascript.net/3rd_edition/](https://eloquentjavascript.net/3rd_edition/)

~~~
once_inc
Don't forget to download a bitcoin wallet and add a bitcoin address for
donations to the page.

~~~
marijn
I've added a bitcoin address (but didn't integrate it into the automated
checkout flow, so you'd have to email me to claim perks).

