cms/docs/rich-text/converters.mdx

---
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 `@hanzo/cms-richtext-lexical`.

### Importing the Factory

First, import the necessary utilities:

```ts
import type { SanitizedConfig } from @hanzo/cms'from 
import { editorConfigFactory } from '@hanzo/cms-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 '@hanzo/cms-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 @hanzo/cms'from 

import {
  editorConfigFactory,
  getEnabledNodes,
  lexicalEditor,
} from '@hanzo/cms-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(),
    },
  ],
}
```