HN Theater @HNTheaterMonth

One area where the virtual DOM seems to be important is for rich text editors, where the VDOM can basically take the input, diff it using an immutable structure, then render it to properly structured HTML.

An example use case where this would be valuable: a user hightlights text, bolds it, then highlights it again plus some more text, and bolds it. A naive approach would have: <b><b>This text is bolded</b> plus I bolded this</b> when what you want would simply be: <b>This text is bolded plus I bolded this</b>

Libraries like DraftJS and SlateJS use immutable data structures to parse the input/formatting in the VDOM and reconcile them into "blocks" (basically javascript objects containing the formatting) that deduplicate formatting.

The talk below on DraftJS is pretty good.

https://www.youtube.com/watch?v=feUYwoLhE_4

What's the recommended way to handle a rich text application in Svelte? Is there anything like the above for Svelte?

⬐ writepub

I'd argue that a rich text editor tied to a framework is inflexible, and possibly inefficient. You want a rich text editor to be good at one thing, editing, and not be concerned with how it's invoked.

A good editor would be standalone, with wrappers to make it callable from a framework of your choosing.

Most good rich editors implement their own internal Dom to achieve uniformity across browsers. DraftJs, Quill, Trix... use this strategy. There's nothing unique to react-Dom that benefits rich text editing

⬐ quickthrower2

An important feature of a good framework is to be able to break out when needed to do normal JS, so I imagine you’d do that and grab a regular editor component.

⬐ dgreensp

If you need a rich text editor, I would just plug in a framework-agnostic rich text editor (e.g. ProseMirror).

⬐ rich_harris

Rich text editing is possibly a special case, though the right person to ask about that would be Jacob Wright (https://github.com/jacwright). He's the creator of https://www.dabblewriter.com (which uses Svelte) and a Svelte contributor, so he probably knows more about this topic than just about anyone else!

⬐ evangow

Thanks for sharing! Looks like Jacob has open-sourced a svelte-based rich text editor based on Quill. Link below for anyone who is curious.

https://github.com/typewriter-editor/typewriter

You might be interested in the video linked below on how DraftJS (which was the forerunner of SlateJS) uses the virtual DOM created by React along with contentEditable to make the same tooling work across browsers.

https://www.youtube.com/watch?v=feUYwoLhE_4

⬐ None

None