Rendering solutions editor content

[leedia-tech]

My application involves rendering the JSON content of the editor in a different codebase from where the editor is actually integrated. To maintain the efficiency and lightweight nature of this application, I would prefer not to integrate the entire editor in display mode.

In this context, I have two main questions:

• Is there a dedicated package available that can facilitate lightweight rendering of the editor's elements?
• How can I convert the JSON content into HTML within my onChange event handler? This would enable me to directly render the content in the desired format.

Any tips or code snippets that could guide me in achieving this would be greatly appreciated.
Thank you in advance for any assistance or suggestions you can provide.

[12joan]

I recommend rendering the editor content at the point of use, rather than storing HTML in the database if you can avoid it, since that cuts down the risk of stored XSS and makes it easier for you to deploy fixes to your Slate -> HTML conversion.

For rendering a Slate value to HTML, if you don't want to use Plate's (not at all lightweight) serializeHtml function, you can use the third-party package slate-react-presentation.

[leedia-tech]

Thanks, this looks exactly like what I was looking for! Do you know how I can use Plate's render functions with slate-react-presentation? I'd prefer to use Plate's elements instead of rewriting the render functions from scratch.

[12joan]

If you want to use Plate's render pipeline, you're better off using serializeHtml. See Accessing the Editor for info on how to get a suitable editor instance.

[12joan]

It's technically possible to import Plate's pipeRenderElement and pipeRenderLeaf functions and use them to contstruct the render functions from an editor instance, but I don't think there's any advantage over using serializeHtml directly.

[leedia-tech]

@12joan Many thanks for your clarifications