Components
RichTextContent
Lexical rich text renderer
RichTextContent
A component for rendering Payload CMS Lexical rich text.
Basic Usage
import { RichTextContent } from '@01.software/sdk/components'
function Article({ post }) {
return (
<article className="prose">
<RichTextContent data={post.content} />
</article>
)
}Props
| Prop | Type | Description |
|---|---|---|
data | SerializedEditorState | Lexical editor data (required) |
className | string | CSS class |
internalDocToHref | (args: { linkNode, relationTo, doc }) => string | Internal document link conversion function |
blocks | Record<string, JSXConverter> | Custom block components (Iframe, Player, etc.) |
Internal Link Handling
<RichTextContent
data={post.content}
internalDocToHref={(args) => {
switch (args.relationTo) {
case 'posts': return `/blog/${args.doc.slug}`
case 'products': return `/products/${args.doc.slug}`
default: return '/'
}
}}
/>Custom Blocks
<RichTextContent
data={post.content}
blocks={{
Iframe: ({ url }) => <iframe src={url} className="w-full" />,
Player: ({ url }) => <ReactPlayer url={url} controls />,
}}
/>