Hacker News new | past | comments | ask | show | jobs | submit login
ProseMirror – A toolkit for building rich-text editors on the web (prosemirror.net)
236 points by octosphere on Jan 25, 2019 | hide | past | favorite | 51 comments



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) 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)


Is Zoho funding ProseMirror development at https://marijnhaverbeke.nl/fund/ ?


I tried to use ProseMirror for https://coisas.alhur.es/, couldn't make it do the simplest goal in the world: be a Markdown editor, because documentation was confusing, very confusing.

Then I tried to read the code: what I found was thousands of micro-modules, which were impossible to understand how fitted together or what each one did.


Interestingly, the platform design of ProseMirror is one of the key reason which drives me to Quill in one of my side projects. Don't get me wrong, if your goals mostly align with ProseMirror, it's a perfect tool, but if you want to deviate with ProseMirror in some aspects, the coupling design between different ProseMirror packages is actually a headache. On the other hand, Quill feels more like a simple library targeting exactly one use case.

In addition, I feel that Quill's delta format [1] is much more elegant and easier to work with than ProseMirror's changeset [2], especially if your architecture uses a different language that's not JS.

[1]: https://quilljs.com/docs/delta/ [2]: https://github.com/ProseMirror/prosemirror-changeset


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


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


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.


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.


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.


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.


For a front-end library like this, wouldn't regular GPLv3 do the same thing? I thought AGPL was mainly for server stuff.


You can have a GPL-licensed SaaS that charges you for stuff


It's just human nature. Humans greatly enjoy outsmarting other humans. Humans in these major businesses are simply outsmarting the developer and greatly enjoy doing so. That's why a donation-based business model does not work.


We are using and customizing ProseMirror exhaustively at Missive (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). 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!


Is Missive funding ProseMirror development at https://marijnhaverbeke.nl/fund/ ?


Ha! I’m the one who opened that ticket. I had implemented my own spell checker which was having some performance issues and was pleased to see ProseMirror works much better now with the browsers spell checker!


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://eloquentjavascript.net/


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

https://marijnhaverbeke.nl/


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


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


I've briefly analysed ProseMirror as well as Quill. IMO ProseMirror seemed well built with better literature compared to Quill.

ProseMirror's author has truly thought out every API and has got most of the details just right.

For example, if I ought to build a grammar checker on top of Quill vs ProseMirror, I couldn't find any APIs in Quill that lets us decorate the view with grammar errors and suggestions, without polluting the core data-model with custom nodes/attributes. ProseMirror on the other hand had the concept of Decorators (https://prosemirror.net/docs/ref/#view.Decorations) for such a case. That was just one example.

More from the author of Quill himself: https://news.ycombinator.com/item?id=15468402


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


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


While I like many things about Slate, I would advice against it if performance is at all important, and if you want a stable API. I'm working on an app which started with Slate but its rendering speed (at least on older versions) is quite bad, and my Prosemirror rewrite beats Slate night and day: I been able to archive 10th of the rendering speed. Prosemirror is quite easy to make compatible with React through nodeViews and the API is better IMO.


I've used Quill for a large production app and generally it works well, so I appreciate the work that has gone into it. With that said, it falls a bit short on in-depth documentation and the source code is a bit hard to digest.


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.


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


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.


Having used Draft and Slate, Slate is definitely the choice to go with today if you want something built on top of React.

Draft appears to be essentially somewhat unmaintained, whereas the Slate community has continued to be very active (thanks for the Android support! That's one reason we ended up using Quill for now)

The built-in copy-paste handling is pretty messy to extend compared to Slate, where the system of normalizers works a lot better.


Quill JS also supports Android and mobile very well (https://quilljs.com/)


Quill doesn't support modern standards like web components. But prosemirror works fine as far as I can tell.



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


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

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.


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)


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


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.


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

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.


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


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


maybe it would be possible to use part of another editor like you mention summernote or maybe tinymce, to process the pasted text, and convert it to something (styled html?) a newer editor could understand?


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.


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.


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)?


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.



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

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


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.



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


What a sick logo.




Guidelines | FAQ | Lists | API | Security | Legal | Apply to YC | Contact

Search: