3 ms·

(Mobiledoc contrib here) One thing Draft and Mobiledoc seem to have in common is a robust programmatic API. Draft is pitched as a "framework for building rich

by mixonic 11y ago

(Mobiledoc contrib here) 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.

spicyj 11y ago
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.
- mixonic 11y ago
  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. [0]: https://github.com/bustlelabs/mobiledoc-kit/blob/master/MOBILEDOC.md https://github.com/bustlelabs/mobiledoc-kit/blob/master/MOBI... [1]: http://facebook.github.io/draft-js/docs/advanced-topics-block-components.html#content http://facebook.github.io/draft-js/docs/advanced-topics-bloc... [2]: https://github.com/bustlelabs/mobiledoc-kit/blob/master/CARDS.md https://github.com/bustlelabs/mobiledoc-kit/blob/master/CARD... [edit] looks like http://facebook.github.io/draft-js/docs/api-reference-data-conversion.html#content http://facebook.github.io/draft-js/docs/api-reference-data-c... serializes the abstract of a Draft into something persistable, and potentially renderable.
  - spicyj 11y ago
    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 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.

by mixonic 11y ago

spicyj 11y ago

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.

mixonic 11y ago
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. [0]: https://github.com/bustlelabs/mobiledoc-kit/blob/master/MOBILEDOC.md https://github.com/bustlelabs/mobiledoc-kit/blob/master/MOBI... [1]: http://facebook.github.io/draft-js/docs/advanced-topics-block-components.html#content http://facebook.github.io/draft-js/docs/advanced-topics-bloc... [2]: https://github.com/bustlelabs/mobiledoc-kit/blob/master/CARDS.md https://github.com/bustlelabs/mobiledoc-kit/blob/master/CARD... [edit] looks like http://facebook.github.io/draft-js/docs/api-reference-data-conversion.html#content http://facebook.github.io/draft-js/docs/api-reference-data-c... serializes the abstract of a Draft into something persistable, and potentially renderable.
- spicyj 11y ago
  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 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.