Simplify your stack and build anything. Or everything.
Build tomorrow’s web with a modern solution you truly own.
Code-based nature means you can build on top of it to power anything.
It’s time to take back your content infrastructure.

Serialising Lexical generated content to HTML

default discord avatar
jinal.kotharilast year
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
    augdustlast year

    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.kotharilast year

    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
    displicitylast year

    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.kotharilast year

    Thank you, that's a good insight

Star on GitHub

Star

Chat on Discord

Discord

online

Can't find what you're looking for?

Get dedicated engineering support directly from the Payload team..