@lexical/headless with Next.js

[Metrakit]

Hi there,

It's possible to use @lexical/headless with Next.js? I have tried without success.
Someone have an example how to integrate @lexical/headless with Next.js?

[alexluong]

It's certainly possible. I ran into some issues as well. What I've found is you can use the onUpdate hook to wait for the editor to finish its async updates.

editor.update(() => {
  // do your stuff
}, {
  onUpdate: () => {
    // get final editor state
    // convert to HTML
    // etc etc
  }
})

If you have more specific questions, I'm happy to look into it further and see if I can help.

[yaju19]

Hi alexluong,

I am also using the headless lexical to create a lexical editor state from the parsed html string.
In the documentation, it has been suggested to use JSDOM with headless lexical for the same which does not work in the React JS frontend but on the node server.

I tried implementing the same on the node server but there also it is not working properly.

the Node JS code

import type { NextApiRequest, NextApiResponse } from "next";
import { createHeadlessEditor } from "@lexical/headless";
import Nodes from "components/lexicalEditor/nodes/Nodes";
import { $getSelection, $getRoot } from "lexical";
import { $generateNodesFromDOM } from "@lexical/html";
import { JSDOM } from "jsdom";

const parseHTMLString = async (req: NextApiRequest, res: NextApiResponse) => {
  const { body, method } = req;

  if (method === "POST") {
    try {
      const { htmlString } = body;
      const editor = createHeadlessEditor({
        nodes: Nodes,
        onError: () => {},
      });

      editor.update(() => {
        const dom = new JSDOM(htmlString);
        const nodes = $generateNodesFromDOM(editor, dom.window.document);
        $getRoot().select();
        const selection = $getSelection();
        selection?.insertNodes(nodes);
      });
      const editorState = editor.getEditorState().toJSON();
      return res.status(200).send({ editorState: editorState });
    } catch (e) {
      return res.status(400).send({ message: "something went wrong." });
    }
  }
};

export default parseHTMLString;

The payload sent with the request

{
"htmlString":"<p>Hello World!</p>"
}

The response received

"editorState": {
        "root": {
            "children": [],
            "direction": null,
            "format": "",
            "indent": 0,
            "type": "root",
            "version": 1
        }
    }
}

Is there a way to make this work in frontend (without JSDOM as it will not work in frontend) and if it is not possible to make this work in front-end there is there a way to make this work on node server?

[alexluong]

The reason your code is not working is that the update happens asynchronously so you need to wait for it to be applied first before reading the editor state.

      editor.update(() => {
        const dom = new JSDOM(htmlString);
        const nodes = $generateNodesFromDOM(editor, dom.window.document);
        $getRoot().select();
        const selection = $getSelection();
        selection?.insertNodes(nodes);
      }, {
         onUpdate: () => {
           const editorState = editor.getEditorState().toJSON(); // this should work
         }
      });

You can potentially wrap this in a promise so it works a bit better

async function editorUpdateAsync(editor, updateFunction) {
  return new Promise(resolve => {
    editor.update(updateFunction, { onUpdate: resolve })
  })
}

// usage
await editorUpdateAsync(editor, () => {})
const editorState = editor.getEditorState().toJSON();
return res.status(200).send({ editorState: editorState });

[yaju19]

Thank you alexluong for pointing out the error

The following solution is working fine now.

  try {
      const { htmlString } = body;
      const editor = createHeadlessEditor({
        nodes: Nodes,
        onError: () => {},
      });

      await editor.update(() => {
        const dom = new JSDOM(htmlString);
        const nodes = $generateNodesFromDOM(editor, dom.window.document);
        $getRoot().select();
        const selection = $getSelection();
        selection?.insertNodes(nodes);
      });
      const editorState = editor.getEditorState().toJSON();
      return res.status(200).send({ editorState: editorState });
    }

Though I got one working solution(with the mentioned fix) for the node, I tried to make changes to it to make it front-end compatible by using the regular DOM parser instead of JSDOM, as shown below, but then the function does not work.

try {
      const { htmlString } = body;
      const editor = createHeadlessEditor({
        nodes: Nodes,
        onError: () => {},
      });

      await editor.update(() => {
        const dom = new DOMParser();
        const parsedVal = dom.parseFromString(htmlString, "text/html");
        const nodes = $generateNodesFromDOM(editor, parsedVal);
        $getRoot().select();
        const selection = $getSelection();
        selection?.insertNodes(nodes);
      });
      const editorState = editor.getEditorState().toJSON();
      return res.status(200).send({ editorState: editorState });
    }

Please share your thoughts on the above, if possible