Storing Rich Text

i've been researching a bit about rich text editors and different approaches to storing rich text. It's a surprisingly complicated question so I thought i would post what i'm finding.

Discourse uses (and expected all users to use) Markdown, also giving a preview panel while you are writing posts. The post editor came with a toolbar, that (similar to what Discord does while I'm writing this post) provides shortcuts that help the user use Markdown syntax. The Discourse API gives you both the original Markdown as well as the 'cooked' HTML which I guess it serialises when the post is saved or published. Sometimes HTML tags were also included in the Markdown if you used a custom plugin.

As a user experience, i think even with toolbars that provide shortcuts etc, expecting users to learn and write (or even look at) Markdown is probably the biggest issue with Discourse, particularly in terms of writing long or particularly media-rich posts. Markdown is very simple to store though, and benefits from being more agnostic to presentation style

For editing long-form content like blog posts, I guess the most popular paradigm is WYSIWYG rich text editing like you get in Microsoft Word, Wordpress etc.

In total i've looked into the following open source options for rich text editors:

• CKEditor
• Quill
• Editor.js
• Draft
• Slate
• ProseMirror

basically my main findings are:

• the main options for storing rich text are HTML, Markdown and JSON. HTML is generated by most older WYSIWYG editors such as CKEditor. Storing text as JSON is preferred by a lot of people for lots of reasons, but I guess the big picture reason is that it provides an abstraction for content that can be resilient and useful across a variety of contexts, whereas HTML could be limiting
• storing rich text as JSON basically means that the text is stored as a tree of nested node objects. I first encountered the concept with Editor.js which is marketed as a block editor library and this appealed to me because I’ve really enjoyed using Notion’s editor (block based with drag and drop) and Squarespace. We wouldn’t need anything so advanced but having the freedom to define custom media blocks is a massive plus for making it easy to integrate lots of media types. I think it’s also going to be good for accessibility. I just realised last night that editor.js doesn’t store inline styles as JSON, just blocks. Anything inside the block is styled using HTML. This is compared to other libraries like Slate which store all content as JSON, blocks and inline nodes. An advantage of this is, I think, is that it makes it easier to implement Operational Transfer, which is a system for tracking and diffing simultaneous edits, which enables real time collaboration to happen