From LexicalNode[] to string on editorState

[maasencioh]

I'm migrating from HTML to lexical string state to store in the database. For this case, I'm approaching as described in the documentation.

import { createHeadlessEditor } from '@lexical/headless';
import { $generateNodesFromDOM } from '@lexical/html';
import { JSDOM } from 'jsdom';
import { $createParagraphNode, $getRoot } from 'lexical';

export function toLexical(htmlString: string): string {
  const editor = createHeadlessEditor({
    namespace: 'lexical',
    onError(error) {
      throw error;
    },
  });

  editor.update(() => {
    const dom = new JSDOM(htmlString).window.document;
    const nodes = $generateNodesFromDOM(editor, dom);
    $getRoot().append($createParagraphNode().append(...nodes));
  });

  const editorState = editor.getEditorState();
  const response = JSON.stringify(editorState);
  return response;
}

The problem is that the response is an empty root element

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

What could be missing? is the editor.update asynchronous?

[yaju19]

The editor state update is asynchronous
Please try the following once

export async function toLexical(htmlString: string): string {
  const editor = createHeadlessEditor({
    namespace: 'lexical',
    onError(error) {
      throw error;
    },
  });

  await editor.update(() => {
    const dom = new JSDOM(htmlString).window.document;
    const nodes = $generateNodesFromDOM(editor, dom);
    $getRoot().append($createParagraphNode().append(...nodes));
  });

  const editorState = editor.getEditorState();
  const response = JSON.stringify(editorState);
  return response;
}

[vineetdigit]

Is editor.update() really asynchronous? I've seen this being proposed as a solution, but it hasn't worked for me.

[yaju19]

can you please elaborate it a bit more and share the concerned code?

[vineetdigit]

Since my comment above, I experimented a bit more. And yes, I found the update to be asynchronous like you said. But the return value of editor.update() is undefined and not a promise. So the "await" as you've proposed doesn't work. I used following to obtain the editorState after the update has been applied.

const emptyEditorState = await new Promise((resolve) =>
        editor.update(
          () => {
            $getRoot().append($createParagraphNode());
          },
          {
            onUpdate: () => resolve(editor.getEditorState().toJSON()),
          }
        )
      );