Serialising Lexical generated content to HTML

jinal.kothari

last month

5

• 

  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 :)

• 

  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

• 

  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.

• 

  jinal.kothari

  4 weeks ago

  Thank you, that's a good insight

• 

  alessiogr

  Payload Team

  4 weeks ago

  This is now also documented here:

  https://payloadcms.com/docs/rich-text/lexical#lexical-html