Lexical Converters

Richtext fields save data in JSON - this is great for storage and flexibility and allows you to easily to convert it to other formats:

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:

1import type { SanitizedConfig } from 'payload'
2import { editorConfigFactory } from '@payloadcms/richtext-lexical'
3
4// Your Payload Config needs to be available in order to retrieve the default editor config
5const config: SanitizedConfig = {} as SanitizedConfig

Option 1: Default Editor Config

If you require the default editor config:

1const 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:

1const fieldEditorConfig = editorConfigFactory.fromField({
2  field: config.collections[0].fields[1],
3})

Option 3: Create a Custom Editor Config

You can create a custom editor configuration by specifying additional features:

1import { FixedToolbarFeature } from '@payloadcms/richtext-lexical'
2
3const customEditorConfig = await editorConfigFactory.fromFeatures({
4  config,
5  features: ({ defaultFeatures }) => [
6    ...defaultFeatures,
7    FixedToolbarFeature(),
8  ],
9})

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:

1const editor = lexicalEditor({
2  features: ({ defaultFeatures }) => [
3    ...defaultFeatures,
4    FixedToolbarFeature(),
5  ],
6})
7
8const instantiatedEditorConfig = await editorConfigFactory.fromEditor({
9  config,
10  editor,
11})

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:

1import type { CollectionConfig, RichTextField } from 'payload'
2
3import {
editorConfigFactory,
getEnabledNodes,
lexicalEditor,
7} from '@payloadcms/richtext-lexical'
8
9export 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
21
          const editorConfig = editorConfigFactory.fromField({
            field,
          })
25
          // Now you can use the editor config
27
          return value
        },
      ],
    },
  },
  {
    name: 'richText',
    type: 'richText',
    editor: lexicalEditor(),
  },
],
39}

See what others are building with Payload.

"Payload has transformed the way our clients manage content. It's an indispensable tool for any modern agency."

Deploy your entire stack in one place with Payload Cloud.

Microsoft chose Payload to tell the world about AI.