82840aa09b
- Introduces a new lexical => plaintext converter - Introduces a new lexical <=> markdown converter - Restructures converter docs. Each conversion type gets its own docs pag
131 lines
3.7 KiB
Plaintext
131 lines
3.7 KiB
Plaintext
---
|
|
title: Lexical Converters
|
|
label: Converters
|
|
order: 20
|
|
desc: Conversion between lexical, markdown, jsx and html
|
|
keywords: lexical, rich text, editor, headless cms, convert, html, mdx, markdown, md, conversion, export, jsx
|
|
---
|
|
|
|
Richtext fields save data in JSON - this is great for storage and flexibility and allows you to easily to convert it to other formats:
|
|
|
|
- [Converting JSX](/docs/rich-text/converting-jsx)
|
|
- [Converting HTML](/docs/rich-text/converting-html)
|
|
- [Converting Plaintext](/docs/rich-text/converting-plaintext)
|
|
- [Converting Markdown and MDX](/docs/rich-text/converting-markdown)
|
|
|
|
## Retrieving the Editor Config
|
|
|
|
Some converters require access to the Lexical editor config, which defines available features and behaviors. Payload provides multiple ways to obtain the editor config through the `editorConfigFactory` from `@payloadcms/richtext-lexical`.
|
|
|
|
### Importing the Factory
|
|
|
|
First, import the necessary utilities:
|
|
|
|
```ts
|
|
import type { SanitizedConfig } from 'payload'
|
|
import { editorConfigFactory } from '@payloadcms/richtext-lexical'
|
|
|
|
// Your Payload Config needs to be available in order to retrieve the default editor config
|
|
const config: SanitizedConfig = {} as SanitizedConfig
|
|
```
|
|
|
|
### Option 1: Default Editor Config
|
|
|
|
If you require the default editor config:
|
|
|
|
```ts
|
|
const defaultEditorConfig = await editorConfigFactory.default({ config })
|
|
```
|
|
|
|
### Option 2: Extract from a Lexical Field
|
|
|
|
When a lexical field config is available, you can extract the editor config directly:
|
|
|
|
```ts
|
|
const fieldEditorConfig = editorConfigFactory.fromField({
|
|
field: config.collections[0].fields[1],
|
|
})
|
|
```
|
|
|
|
### Option 3: Create a Custom Editor Config
|
|
|
|
You can create a custom editor configuration by specifying additional features:
|
|
|
|
```ts
|
|
import { FixedToolbarFeature } from '@payloadcms/richtext-lexical'
|
|
|
|
const customEditorConfig = await editorConfigFactory.fromFeatures({
|
|
config,
|
|
features: ({ defaultFeatures }) => [
|
|
...defaultFeatures,
|
|
FixedToolbarFeature(),
|
|
],
|
|
})
|
|
```
|
|
|
|
### Option 4: Extract from an Instantiated Editor
|
|
|
|
If you've created a global or reusable Lexical editor instance, you can access its configuration. This method is typically less efficient and not recommended:
|
|
|
|
```ts
|
|
const editor = lexicalEditor({
|
|
features: ({ defaultFeatures }) => [
|
|
...defaultFeatures,
|
|
FixedToolbarFeature(),
|
|
],
|
|
})
|
|
|
|
const instantiatedEditorConfig = await editorConfigFactory.fromEditor({
|
|
config,
|
|
editor,
|
|
})
|
|
```
|
|
|
|
For better efficiency, consider extracting the `features` into a separate variable and using `fromFeatures` instead of this method.
|
|
|
|
### Example - Retrieving the editor config from an existing field
|
|
|
|
If you have access to the sanitized collection config, you can access the lexical sanitized editor config, as every lexical richText field returns it. Here is an example how you can retrieve it from another field's afterRead hook:
|
|
|
|
```ts
|
|
import type { CollectionConfig, RichTextField } from 'payload'
|
|
|
|
import {
|
|
editorConfigFactory,
|
|
getEnabledNodes,
|
|
lexicalEditor,
|
|
} from '@payloadcms/richtext-lexical'
|
|
|
|
export const MyCollection: CollectionConfig = {
|
|
slug: 'slug',
|
|
fields: [
|
|
{
|
|
name: 'text',
|
|
type: 'text',
|
|
hooks: {
|
|
afterRead: [
|
|
({ siblingFields, value }) => {
|
|
const field: RichTextField = siblingFields.find(
|
|
(field) => 'name' in field && field.name === 'richText',
|
|
) as RichTextField
|
|
|
|
const editorConfig = editorConfigFactory.fromField({
|
|
field,
|
|
})
|
|
|
|
// Now you can use the editor config
|
|
|
|
return value
|
|
},
|
|
],
|
|
},
|
|
},
|
|
{
|
|
name: 'richText',
|
|
type: 'richText',
|
|
editor: lexicalEditor(),
|
|
},
|
|
],
|
|
}
|
|
```
|