#How to properly get an existing lexical editorConfig and retrieve the headlessEditor?

2 messages · Page 1 of 1 (latest)

ember spear
#

I'm trying to follow https://payloadcms.com/docs/rich-text/converters#getting-the-editor-config for the generateTitle function of @payloadcms/plugin-seo

const generateDescription: GenerateDescription<Page> = async ({ doc, collectionConfig }) => {
  if (!collectionConfig || !doc?.content) return ''
  const collectionFields = flattenTopLevelFields(collectionConfig.fields)
  const field = collectionFields.find(
    (field): field is RichTextField => 'name' in field && field.name === 'content' && 'editor' in field
  )

  console.log('field: ', field)

  if (!field || !field.editor) return ''

  const lexicalAdapter = field.editor as LexicalRichTextAdapter

  console.log('lexicalAdapter (field.editor: ', lexicalAdapter)

  const sanitizedServerEditorConfig = lexicalAdapter.editorConfig as SanitizedServerEditorConfig

  if (!sanitizedServerEditorConfig || !sanitizedServerEditorConfig.features) {
    console.error('Editor configuration is missing or invalid:', sanitizedServerEditorConfig)
    return ''
  }

  const headlessEditor = createHeadlessEditor({
    nodes: getEnabledNodes({
      editorConfig: sanitizedServerEditorConfig,
    }),
  })

  const editorState: SerializedEditorState = doc.content

  try {
    headlessEditor.update(
      () => {
        headlessEditor.setEditorState(headlessEditor.parseEditorState(editorState))
      },
      {
        discrete: true,
      }
    )
  } catch (error) {
    console.error('Error updating headless editor:', error)
    return ''
  }

  const plainText =
    headlessEditor.getEditorState().read(() => {
      return $getRoot().getTextContent()
    }) || ''

  return plainText.slice(0, 120).trimEnd()
}

I believe the problem is that the editor config I'm trying to use is not sanitized? But I couldn't exactly seem to sanitize it either when I tried.