Lexical Converters

Rich Text fields store structured JSON. Use the converter that matches where the content will be consumed:

Retrieving the editor config

Some conversions need the sanitized editor configuration because enabled features define the available nodes and transformers. editorConfigFactory provides five ways to retrieve one.

import config from '@frogbot-config'

import {
  editorConfigFactory,
  lexicalEditor,
} from '@frogbotai/richtext-lexical'

type SanitizedRichTextField = Parameters<
  typeof editorConfigFactory.fromField
>[0]['field']

const field = {
  type: 'richText',
  editor: lexicalEditor({}),
} as const

Each method takes one object. This table lists every option and the methods that accept it:

Option	Type	Default	Description
`config`	`FrogBotSanitizedConfig \| Promise<FrogBotSanitizedConfig>`	Required, except by `fromField`	The config returned by `buildConfig`, such as the `@frogbot-config` import. Throws if the value did not come from `buildConfig`.
`field`	`{ type: 'richText'; editor }`	Required by `fromField` and `fromUnsanitizedField`	The Rich Text field to read. `fromField` requires a sanitized editor and throws for an editor provider; `fromUnsanitizedField` requires an editor provider and throws otherwise.
`editor`	`ReturnType<typeof lexicalEditor>`	Required by `fromEditor`	The editor provider to build.
`features`	`FeatureProviderServer[] \| (args) => FeatureProviderServer[]`	Recommended defaults	`fromFeatures` only. Same as the `lexicalEditor` `features` option.
`lexical`	`EditorConfig`	Built-in Lexical configuration	`fromFeatures` uses it as the `lexicalEditor` `lexical` option. `fromEditor` accepts it but ignores it; the editor provider’s own `lexical` option applies.
`isRoot`	`boolean`	`false`	`fromEditor`, `fromFeatures`, and `fromUnsanitizedField`. Builds the configuration as the root editor, so rich text fields nested in feature fields must set their own `editor`.
`parentIsLocalized`	`boolean`	`false`	Every method except `fromField`. Whether the field sits inside a localized field.

Every method returns the sanitized editor config. fromField returns it directly; the others return a promise.

Default editor config

Build the package’s default feature set against your FrogBot config:

import config from '@frogbot-config'
import { editorConfigFactory } from '@frogbotai/richtext-lexical'

const editorConfig = await editorConfigFactory.default({ config })

Config from a sanitized field

fromField is synchronous and accepts a Rich Text field whose editor has already been sanitized:

import { editorConfigFactory } from '@frogbotai/richtext-lexical'

type SanitizedRichTextField = Parameters<
  typeof editorConfigFactory.fromField
>[0]['field']

export function configFromField(field: SanitizedRichTextField) {
  return editorConfigFactory.fromField({ field })
}

Config from features

Build a configuration from a feature list without instantiating a reusable editor provider:

import config from '@frogbot-config'
import {
  editorConfigFactory,
  FixedToolbarFeature,
} from '@frogbotai/richtext-lexical'

const editorConfig = await editorConfigFactory.fromFeatures({
  config,
  features: ({ defaultFeatures }) => [
    ...defaultFeatures,
    FixedToolbarFeature(),
  ],
})

This method also accepts isRoot, lexical, and parentIsLocalized options.

Config from an editor provider

Use fromEditor when you already have a reusable editor provider:

import config from '@frogbot-config'
import {
  FixedToolbarFeature,
  editorConfigFactory,
  lexicalEditor,
} from '@frogbotai/richtext-lexical'

const editor = lexicalEditor({
  features: ({ defaultFeatures }) => [
    ...defaultFeatures,
    FixedToolbarFeature(),
  ],
})

const editorConfig = await editorConfigFactory.fromEditor({
  config,
  editor,
})

Prefer fromFeatures when you only need the feature list. fromEditor also accepts isRoot and parentIsLocalized.

Config from an unsanitized field

Use fromUnsanitizedField while you have a field with an editor provider rather than a sanitized adapter:

import config from '@frogbot-config'
import {
  editorConfigFactory,
  lexicalEditor,
} from '@frogbotai/richtext-lexical'

const field = {
  type: 'richText',
  editor: lexicalEditor({}),
} as const

const editorConfig = await editorConfigFactory.fromUnsanitizedField({
  config,
  field,
})

This method also accepts isRoot and parentIsLocalized.

Read a sibling field config in a hook

import {
  editorConfigFactory,
  lexicalEditor,
} from '@frogbotai/richtext-lexical'
import type { CollectionConfig } from 'frogbot'

type SanitizedRichTextField = Parameters<
  typeof editorConfigFactory.fromField
>[0]['field']

function isNamedSanitizedRichTextField(
  field: unknown,
  name: string,
): field is SanitizedRichTextField {
  return (
    typeof field === 'object' &&
    field !== null &&
    'name' in field &&
    field.name === name &&
    'type' in field &&
    field.type === 'richText' &&
    'editor' in field
  )
}

export const Articles: CollectionConfig = {
  slug: 'articles',
  fields: [
    {
      name: 'summary',
      type: 'text',
      hooks: {
        afterRead: [
          (args) => {
            const siblingFields =
              'siblingFields' in args && Array.isArray(args.siblingFields)
                ? args.siblingFields
                : []
            const field = siblingFields.find(
              (candidate) => isNamedSanitizedRichTextField(candidate, 'content'),
            )

            if (!field) {
              return args.value
            }

            const editorConfig = editorConfigFactory.fromField({ field })

            return args.value
          },
        ],
      },
    },
    {
      name: 'content',
      type: 'richText',
      editor: lexicalEditor({}),
    },
  ],
}

Start here

Basics

Managing Data

Features

Ecosystem

Deployment

Retrieving the editor config

Default editor config

Config from a sanitized field

Config from features

Config from an editor provider

Config from an unsanitized field

Read a sibling field config in a hook

​Retrieving the editor config

​Default editor config

​Config from a sanitized field

​Config from features

​Config from an editor provider

​Config from an unsanitized field

​Read a sibling field config in a hook

Retrieving the editor config

Default editor config

Config from a sanitized field

Config from features

Config from an editor provider

Config from an unsanitized field

Read a sibling field config in a hook