Lexical Converters - Payload

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:

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:

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:

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:

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:

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:

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(),
    },
  ],
}