Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

docs: update Lexical to JSX documentation for RichText component #9926

Merged
merged 1 commit into from
Dec 12, 2024
Merged

docs: update Lexical to JSX documentation for RichText component #9926

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
12 changes: 8 additions & 4 deletions docs/lexical/converters.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -10,20 +10,24 @@ Lexical saves data in JSON - this is great for storage and flexibility and allow

## Lexical => JSX

If you have a React-based frontend, converting lexical to JSX is the recommended way to render rich text content in your frontend. To do that, import the `RichText` component from `@payloadcms/richtext-lexical/react` and pass the lexical content to it:
If your frontend uses React, converting Lexical to JSX is the recommended way to render rich text content. Import the `RichText` component from `@payloadcms/richtext-lexical/react` and pass the Lexical content to it:

```tsx
import React from 'react'
import { RichText } from '@payloadcms/richtext-lexical/react'
import { SerializedEditorState } from '@payloadcms/richtext-lexical/lexical'

export const MyComponent = ({ lexicalData }) => {
export const MyComponent = ({ data }: { data: SerializedEditorState }) => {
return (
<RichText data={lexicalData} />
<RichText data={data} />
)
}
```

The `RichText` component will come with the most common serializers built-in, though you can also pass in your own serializers if you need to.
The `RichText` component includes built-in serializers for common Lexical nodes but allows customization through the `converters` prop.

In our website template [you have an example](https://github.com/payloadcms/payload/blob/main/templates/website/src/components/RichText/index.tsx) of how to use `converters` to render custom blocks.


<Banner type="default">
The JSX converter expects the input data to be fully populated. When fetching data, ensure the `depth` setting is high enough, to ensure that lexical nodes such as uploads are populated.
Expand Down
19 changes: 17 additions & 2 deletions packages/richtext-lexical/src/exports/react/components/RichText/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -20,15 +20,30 @@ export type JSXConvertersFunction<
| SerializedInlineBlockNode<{ blockName?: null | string; blockType: string }>,
> = (args: { defaultConverters: JSXConverters<DefaultNodeTypes> }) => JSXConverters<T>

type Props = {
type RichTextProps = {
/**
* Additional class names for the container.
*/
className?: string
/**
* Custom converters to transform your nodes to JSX. Can be an object or a function that receives the default converters.
*/
converters?: JSXConverters | JSXConvertersFunction
/**
* Serialized editor state to render.
*/
data: SerializedEditorState
/**
* If true, disables indentation globally. If an array, disables for specific node `type` values.
*/
disableIndent?: boolean | string[]
/**
* If true, disables text alignment globally. If an array, disables for specific node `type` values.
*/
disableTextAlign?: boolean | string[]
}

export const RichText: React.FC<Props> = ({
export const RichText: React.FC<RichTextProps> = ({
className,
converters,
data: editorState,
Expand Down