mobiledoc-kit

OK I have to say I have never thought about what should happen if you try to select a sequence of text that mixes rtl and ltr languages. It's deeply in my mental zone of "undefined behavior, I don't even have an intuition about what to do." One of the more fun programming projects I ever worked on was a custom text editor. Mainly it supported rich annotations that could be applied to any chosen term or stretch of text. It used Mobiledoc[1] which already provided pretty well-developed primitives for rich text editing on the web, and it was still a complicated project, even with a solid framework. [1] https://github.com/bustle/mobiledoc-kit

There's also MobileDoc: https://github.com/bustle/mobiledoc-kit/blob/master/MOBILEDO...

Apparently it uses a format called Mobiledoc¹, not Markdown. ¹ https://github.com/bustle/mobiledoc-kit/blob/master/MOBILEDO...

LinkedIn also uses a similar WYSIWYG. This design has been around longer than any of these companies have been using it. What separates this is that you won't just get a dump of HTML from the editor. You'll get the content split into JSON https://github.com/bustle/mobiledoc-kit/blob/master/MOBILEDO... This is beneficial if you plan to use your content in more than one place. For example, maybe the content is used on multiple websites, pulled into an e-mail newsletter, displayed on digital signage, integrated into an app or news services outside of your control. If you're interested in this idea, I suggest searching for the terms COPE or decoupled CMS.

They mention building their new editor on this: https://github.com/bustle/mobiledoc-kit Anybody have experience with it?

MobileDoc might be interesting to you: https://github.com/bustlelabs/mobiledoc-kit

Well what I liked about Mobiledoc-kit[1] is that their demo was essentially an explanation of their document model. You changed things on the left, then saw the document model mutate in real time, and finally saw the rendered output. Also, the very first thing in their documentation is an explanation of how to write a 'card' for embedded input, which is what is used to embed images in the demo. It was an ah-ha! moment for me because most editor documentation begins by telling you how they parse ranges, and showing you how you can use regex to back-check to document and change it to your own elements, etc. That's just too deep into the internals for me to get an idea of what's going on. [1]: https://github.com/bustlelabs/mobiledoc-kit

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 s

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. 1: https://github.com/bustlelabs/mobiledoc-kit

mobiledoc sounds like an open source implementation of some of these ideas: https://github.com/bustlelabs/mobiledoc-kit