HTML -> Lexical unable to find an active editor state

default discord avatar
iankotch5 months ago
2

Long story short -- the company I work for uses an applicant tracking system that doesn't have an open api, so I've built a scraper that uses Node to gather the information I'd like to store in payload to show on our website.



I've gotten to the point that I'm able to save the data to MongoDB and it shows up in the Lexical editor, BUT when I attempt to edit the text in the editor I'm getting the following error:



Error: Unable to find an active editor state. State helpers or node methods can only be used synchronously during the callback of editor.update() or editorState.read().

This is how I have the HTML - Lexical part of my scraper function setup



const editorConfig = defaultEditorConfig
      const editorNodes: any = []
      editorConfig.features = [...defaultEditorFeatures]
      const headlessEditor = createHeadlessEditor({ ...editorConfig, nodes: editorNodes })

      headlessEditor.update(
        () => {
          const dom = new JSDOM(sanitizeDescription?.join(''))

          const nodes = $generateNodesFromDOM(headlessEditor, dom.window.document)

          $getRoot().select()

          const selection = $getSelection()
          selection?.insertNodes(nodes)
        },
        { discrete: true },
      )


Any help would be much appreciated!

  • discord user avatar
    alessiogr
    5 months ago

    Hey, this can happen if you have mismatching versions of lexical installed in your project. Make sure the lexical version you've installed matched the one which the

    @payloadcms/richtext-lexical

    package is using. You can check the package.json of

    @payloadcms/richtext-lexical

    to find the version you need

  • default discord avatar
    iankotch5 months ago

    This worked for beta-19. Thank you!

Star on GitHub

Star

Chat on Discord

Discord

online

Can't find what you're looking for?

Get help straight from the Payload team with an Enterprise License.