c701dd41a9
Fixes #8168, #8277 The fact that `lexicalHTMLField` doesn't work with live preview was already clarified at the beginning of the page. I mentioned it again in the dedicated section because it seems there was still confusion. Also, I reordered and hierarchized the headings correctly. The introduction said there were two ways to convert to HTML, but there were four headings with the same level. I also made the headings a little shorter to make the table of contents easier to parse.
71 lines
1.9 KiB
Plaintext
71 lines
1.9 KiB
Plaintext
---
|
|
title: Converting Plaintext
|
|
label: Converting Plaintext
|
|
order: 24
|
|
desc: Converting between lexical richtext and plaintext
|
|
keywords: lexical, richtext, plaintext, text
|
|
---
|
|
|
|
## Richtext to Plaintext
|
|
|
|
Here's how you can convert richtext data to plaintext using `@payloadcms/richtext-lexical/plaintext`.
|
|
|
|
```ts
|
|
import type { SerializedEditorState } from '@payloadcms/richtext-lexical/lexical'
|
|
|
|
import { convertLexicalToPlaintext } from '@payloadcms/richtext-lexical/plaintext'
|
|
|
|
// Your richtext data here
|
|
const data: SerializedEditorState = {}
|
|
|
|
const plaintext = convertLexicalToPlaintext({ data })
|
|
```
|
|
|
|
### Custom Converters
|
|
|
|
The `convertLexicalToPlaintext` functions accepts a `converters` object that allows you to customize how specific nodes are converted to plaintext.
|
|
|
|
```ts
|
|
import type {
|
|
DefaultNodeTypes,
|
|
SerializedBlockNode,
|
|
} from '@payloadcms/richtext-lexical'
|
|
import type { SerializedEditorState } from '@payloadcms/richtext-lexical/lexical'
|
|
import type { MyTextBlock } from '@/payload-types'
|
|
|
|
import {
|
|
convertLexicalToPlaintext,
|
|
type PlaintextConverters,
|
|
} from '@payloadcms/richtext-lexical/plaintext'
|
|
|
|
// Your richtext data here
|
|
const data: SerializedEditorState = {}
|
|
|
|
const converters: PlaintextConverters<
|
|
DefaultNodeTypes | SerializedBlockNode<MyTextBlock>
|
|
> = {
|
|
blocks: {
|
|
textBlock: ({ node }) => {
|
|
return node.fields.text ?? ''
|
|
},
|
|
},
|
|
link: ({ node }) => {
|
|
return node.fields.url ?? ''
|
|
},
|
|
}
|
|
|
|
const plaintext = convertLexicalToPlaintext({
|
|
converters,
|
|
data,
|
|
})
|
|
```
|
|
|
|
Unlike other converters, there are no default converters for plaintext.
|
|
|
|
If a node does not have a converter defined, the following heuristics are used to convert it to plaintext:
|
|
|
|
- If the node has a `text` field, it will be used as the plaintext.
|
|
- If the node has a `children` field, the children will be recursively converted to plaintext.
|
|
- If the node has neither, it will be ignored.
|
|
- Paragraph, text and tab nodes insert newline / tab characters.
|