Re:Facebook open sources Lexical, an extensible text editor ...
by lewisjoe on Thursday April 14, 2022 @07:31AM
(#31025467)
quick question: I assume it ships(or supports a plugin) with a serializer to convert an editor state JSON to HTML. Does it depend on browser APIs to do so? Can it be somehow liberated out of native DOM APIs and language bindings for JSON-2-HTML in common languages like Java & Rust.
This could be a huge win for simple multi-platform rendering.
Re:Facebook open sources Lexical, an extensible text editor ...
by trueadm on Thursday April 14, 2022 @08:03AM
(#31025742)
The EditorState is fully JSON serializable. You can use JSON.stringify in the browser, or an alternative on other platforms. You can then pass the stringified values around and parse them using `editor.parseEditorState()`
Re:Facebook open sources Lexical, an extensible text editor ...
by lewisjoe on Thursday April 14, 2022 @08:19AM
(#31025895)
But, let's say I'd like to parse this stored state and send an email (as HTML) on the server?
My best guess is to use a NodeJS/V8 instance on the server to somehow transform JSON to HTML using Lexical's serializer (if something like that exists). Even this is tricky because it might depend on browser DOM apis for the conversion.
A better solution would be support language specific bindings to get HTML from JSON with zero dependecies.
Any chance you thought along these lines?
Re:Facebook open sources Lexical, an extensible text editor ...
by trueadm on Thursday April 14, 2022 @08:35AM
(#31026077)
Yeah, I'd roll with Node/Deno and use Lexical that way. :)
Lexical also treat its own EditorState as the source of truth. We use DOM MutationObservers to ensure the DOM matches the EditorState at all times. We do allow external mutations from things like spellcheckers update Lexical – otherwise people wouldn't be able to use Grammarly and other tools with Lexical. However, that's really constrained so that they don't overreach.
Lexical also has the notion of double-buffering. When you update Lexical, or use a node transform, you're actually mutating the "work in progress" EditorState. Once Lexical feels that the EditorState is ready, it will commit it to the DOM, and that EditorState will become immutable and will reflect what you see on the page.