Serialising Lexical generated content to HTML

default discord avatar
jinal.kothari
last month
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
    augdust
    last month

    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.kothari
    last month

    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
    displicity
    last month

    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.kothari
    4 weeks ago

    Thank you, that's a good insight

  • discord user avatar
    alessiogr
    Payload Team
    4 weeks ago
Open the post
Continue the discussion in Discord
Like what we're doing?
Star us on GitHub!

Star

Connect with the Payload Community on Discord

Discord

online

Can't find what you're looking for?

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