Kudos to the team for such an excellent project.
Is there any existing documentation on how to serialise the Lexical RichText field to HTML? My use case is that for a blog and website. I saw the following, which is a very helpful starting point:
.
Shows how to convert nodes to HTML. Some useful information about Lexical codes too.
Also saw this:
https://github.com/AlessioGr/payload-plugin-lexical/blob/develop/src/fields/LexicalRichText/FieldComponent.tsx#L160
Uses
$generateHtmlFromNodes
A complete example where for instance we render the Rich Text in a Next JS Blog would encourage many to leverage the new features.
Also, examples related to the ability to inline custom blocks in the rich text field.
hi @jinal.kothari ! did you figure out a way to render Lexical rich text in a Nextjs app yet? looking for a solution myself :)
Hi,
As you must have seen, there is example code that shows how it could be done.
But we haven't implemented it ourselves
Have you considered using Lexical as the renderer set to "read mode" and with minimal plugins? I can't find it in the current docs, but the Lexical team used to have a note about it being a good use case. Here is the question on github:
https://github.com/facebook/lexical/discussions/2455The Lexical readOnly mode on the editor is the easiest way to show serialized HTML or JSON editor state.
and
If client-side performance more of a concern though, you can build a separate "read-only" Lexical Editor which strips out any unnecessary plugins which are used in editing (e.g. OnChangePlugin).
Not that unsanitized Lexical data couldn't cause issues but I just get anxiety reading HTML from a database and directly rendering it. You also get the added boost of extensibility with decorator nodes and React components. Worked well enough for me when I was messing with Lexical a year or so ago. I used tailwind/classes applied to the config so nothing felt out of place.
Thank you, that's a good insight
This is now also documented here:
https://payloadcms.com/docs/rich-text/lexical#lexical-htmlStar
Discord
online
Get dedicated engineering support directly from the Payload team..