For those of you looking for a rich text editor like this that is lighterweight and doesn't come with a heavy React dependency, I can highly recommend Mobiledoc[1]. I've been using it in several production sites and it has performed like a champ.
The best part of Mobiledoc is its portability; I've seen it used in both Ember.js and Riot.js, two libraries on opposite ends of the spectrum.
It's also been designed for rich, interactive content in addition to rich text. You can add interactive cards (think slideshows, before/after image sliders, etc.) and easily provide a different implementation on each platform. This lets your content authors write once and have a great experience on both native and web, and adding a new card is super easy.
One thing Draft and Mobiledoc seem to have in common is a robust programmatic API. Draft is pitched as a "framework for building rich text editors in React". Mobiledoc pitches itself as a toolkit for building WYSIWYG editors, so fairly similar goals.
Mobiledoc is designed to be very quick and easy to render, and additionally to support rich content "cards" and "atoms". These are runtime-implemented rich content sections, and our main sponsor for this work (Bustle Labs) uses them for image sliders, animated and interactive SVG features, videos, and more.
These runtime rendering points also make it easy to have multiple representations of a document. For example, we render Mobiledoc into text for ElasticSearch, into HTML for normal web visitors, and into AMP HTML. When rendering into text or AMP we can't use the normal card implementations, and runtime-configuration makes this easy.
And the rich cards work with copy paste! and undo/redo! Anyway, there is definitely overlap here, but IMO the goals of Draft are pretty narrow so far.
Just so I understand fully, can you explain which things Mobiledoc handles which Draft doesn't? It sounds like you should be able to easily implement any of those behaviors on top of Draft.
Hm, I don't think some of the things we're working on are easy to implement on top of Draft, but I've only browsed the (very good) documentation so far. Perhaps I'm wrong.
For a first, I'm not clear on how you would write a custom renderer against the data structure (we try to do this for Mobiledoc [0], and it has helped contributors). It seems straight ahead to derive looking at it in a debugger, but I would love to see a link to the docs on it in case I've missed them.
As for cards, we've worked hard to make sure cursors work well around cards, and around atoms. There aren't any demos of "Custom Block Components" [1] in readonly mode, but based on the inability to place a cursor after a "Code Block" with arrows when it is last, I think Mobiledoc might be a bit more robust at this date.
But conceptually custom block components are very similar to Mobiledoc cards [2]. Block based rich content with an object payload. We provide a non-block construct called "atoms" that are inline as well, for things like `@mentions` in text.
This is really neat stuff, but yup, we've been playing around with similar ideas for a few months! Happy to see so much life in the editor world again.
Yes, it should be easy to serialize the state using convertToRaw and/or convert it to HTML/Markdown/etc. I could imagine official helpers for this might be added.
You can try the embedded photo experience in Facebook Notes at https://www.facebook.com/notes. I think it does essentially everything that you have described. (I believe we do keep at least one (possibly empty) block after each media object to allow putting the cursor there.)
Mentions (like on Facebook) can be done easily with Draft's entities, and mentions that behave more like syntax highlighting (like on Twitter) can be easily done with decorators.
Mobiledoc looks pretty awesome though. I hadn't seen it before this -- thanks for sharing.
+1 on mobiledoc-kit. We switched from a custom, hard to maintain and full of browser-specific quirks rich-text editor to mobiledoc-kit about 3 months ago. It's a world of difference in terms of stability and maintenance. It's still under heavy development but it's improving quickly and we're very happy with our choice so far. Kudos to the 201 Created team for this!
The thing that impressed me most about MobileDoc is how nice the copy/paste support is. You can paste in all kinds of rich content and it does the right thing -- both your own custom cards, and arbitrary HTML gets cleaned up to match only what's allowed in your mobiledoc.
The best part of Mobiledoc is its portability; I've seen it used in both Ember.js and Riot.js, two libraries on opposite ends of the spectrum.
It's also been designed for rich, interactive content in addition to rich text. You can add interactive cards (think slideshows, before/after image sliders, etc.) and easily provide a different implementation on each platform. This lets your content authors write once and have a great experience on both native and web, and adding a new card is super easy.
1: https://github.com/bustlelabs/mobiledoc-kit