Serialising Lexical generated content to HTML

default discord avatar
jinal.kothari8 months ago
5

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:


https://github.com/AlessioGr/payload-plugin-lexical/tree/develop/serialize-example

.


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.

  • default discord avatar
    augdust7 months ago

    hi @jinal.kothari ! did you figure out a way to render Lexical rich text in a Nextjs app yet? looking for a solution myself :)

  • default discord avatar
    jinal.kothari7 months ago

    Hi,



    As you must have seen, there is example code that shows how it could be done.



    But we haven't implemented it ourselves

  • default discord avatar
    displicity7 months ago

    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/2455
    The 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.

  • default discord avatar
    jinal.kothari7 months ago

    Thank you, that's a good insight

  • discord user avatar
    alessiogr
    7 months ago
Star on GitHub

Star

Chat on Discord

Discord

online

Can't find what you're looking for?

Get help straight from the Payload team with an Enterprise License.