exportconstMyComponent=({ data }:{ data:SerializedEditorState})=>{
6
return<RichTextdata={data}/>
7
}
The RichText component includes built-in converters for common Lexical nodes. You can add or override converters via the converters prop for custom blocks, custom nodes, or any modifications you need. See the website template for a working example.
When fetching data, ensure your depth setting is high enough to fully populate Lexical nodes such as uploads. The JSX converter requires fully populated data to work correctly.
By default, Payload doesn't know how to convert internal links to JSX, as it doesn't know what the corresponding URL of the internal link is. You'll notice that you get a "found internal link, but internalDocToHref is not provided" error in the console when you try to render content with internal links.
To fix this, you need to pass the internalDocToHref prop to LinkJSXConverter. This prop is a function that receives the link node and returns the URL of the document.
If your rich text includes custom Blocks or Inline Blocks, you must supply custom converters that match each block's slug. This converter is not included by default, as Payload doesn't know how to render your custom blocks.
You can override any of the default JSX converters by passing passing your custom converter, keyed to the node type, to the converters prop / the converters function.
Example - overriding the upload node converter to use next/image: