HTML to Lexical Migration

[cguerrero1205]

Hello Lexical community,

I am working on a data migration process from an old database that contains a column with rich HTML content. My goal is to convert that HTML to Lexical compliant JSON to store it in a new database and render it later in a Lexical editor on the frontend.

To do this, I created an API in Next.js (App Router) that runs on the server side. This API receives the HTML, converts it using createEditor + $generateNodesFromDOM + jsdom, and returns the result as JSON. However, the result is always:

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

I have verified that jsdom is working correctly and that the necessary nodes (ParagraphNode, TextNode, HeadingNode, etc.) are registered. I also added a namespace to the editor (as required in recent versions), but the result is still empty:

// app/api/convert2lexical/route.ts
import { NextResponse } from "next/server";
import { createEditor, $getRoot } from "lexical";
import { $generateNodesFromDOM } from "@lexical/html";
import { JSDOM } from "jsdom";
import { ParagraphNode, TextNode } from "lexical";
import { HeadingNode, QuoteNode } from "@lexical/rich-text";

function convertHtmlToLexicalJSON(html: string) {
  const editor = createEditor({
    namespace: "my-editor",
    nodes: [ParagraphNode, TextNode, HeadingNode, QuoteNode],
  });

  let result: any = null;

  editor.update(() => {
    const cleanHtml = html.replace(/<!--[\s\S]*?-->/g, "");
    const dom = new JSDOM(cleanHtml);
    const body = dom.window.document.body;
    const nodes = $generateNodesFromDOM(editor, body);
    const root = $getRoot();
    root.clear();
    root.append(...nodes);

    result = editor.getEditorState().toJSON();
  });

  return result;
}

export async function POST(req: Request) {
  try {
    const { html } = await req.json();
    if (typeof html !== "string" || html.trim() === "") {
      return NextResponse.json(
        { error: 'El campo "html" es requerido y debe ser un string.' },
        { status: 400 }
      );
    }

    const lexicalJson = convertHtmlToLexicalJSON(html);
    return NextResponse.json({ lexical: lexicalJson });
  } catch (error) {
    console.error("Error al convertir HTML a Lexical JSON:", error);
    return NextResponse.json(
      { error: "Error interno del servidor." },
      { status: 500 }
    );
  }
}

I understand that certain Lexical operations only work in the context of the browser, which makes me think that the problem is related to the use of the editor outside the client.

Is there an official or recommended way to convert HTML to Lexical state in a server environment (Node.js)? Or should this operation be performed exclusively on the client?

I appreciate any guidance, experience or suggestions you can share.

Thanks in advance.

[etrepum]

You need to get the editor state after the update. https://lexical.dev/docs/concepts/editor-state#synchronous-reconciliation-with-discrete-updates

[cguerrero1205]

You need to get the editor state after the update. https://lexical.dev/docs/concepts/editor-state#synchronous-reconciliation-with-discrete-updates

Hi, @etrepum

I was reading the documentation you shared with me, I added { discrete: true } and moved editor.getEditorState().toJSON() to the final return of the function, but I still get the empty json:

This is the version of the code I am using now:

// app/api/html2lexical/route.ts
import { NextResponse } from "next/server";
import { createEditor, $getRoot } from "lexical";
import { $generateNodesFromDOM } from "@lexical/html";
import { JSDOM } from "jsdom";
import { ParagraphNode, TextNode } from "lexical";
import { HeadingNode, QuoteNode } from "@lexical/rich-text";

function convertHtmlToLexicalJSON(html: string) {
  const editor = createEditor({
    namespace: "my-editor",
    nodes: [ParagraphNode, TextNode, HeadingNode, QuoteNode],
  });

  editor.update(
    () => {
      const cleanHtml = html.replace(/<!--[\s\S]*?-->/g, "");
      const dom = new JSDOM(cleanHtml);
      const body = dom.window.document.body;
      const nodes = $generateNodesFromDOM(editor, body);
      const root = $getRoot();
      root.clear();
      root.append(...nodes);
    },
    { discrete: true }                // <== I added this.
  );

  return editor.getEditorState().toJSON();                    // <== I moved this.
}

export async function POST(req: Request) {
  try {
    const { html } = await req.json();
    if (typeof html !== "string" || html.trim() === "") {
      return NextResponse.json(
        { error: 'El campo "html" es requerido y debe ser un string.' },
        { status: 400 }
      );
    }

    const lexicalJson = convertHtmlToLexicalJSON(html);
    return NextResponse.json({ lexical: lexicalJson });
  } catch (error) {
    console.error("Error al convertir HTML a Lexical JSON:", error);
    return NextResponse.json(
      { error: "Error interno del servidor." },
      { status: 500 }
    );
  }
}

I appreciate any help.

[etrepum]

Hard to say at a glance without a full runnable example including the input string. There’s probably something wrong with how you’re doing the update.

[cguerrero1205]

Hard to say at a glance without a full runnable example including the input string. There’s probably something wrong with how you’re doing the update.

Hi, @etrepum

I uploaded a small example with the code so you can clone and test it.

https://github.com/cguerrero1205/html2lexical

I make the request using postman, passing this small test HTML:

{
  "html": "<h2><strong><em>Por Carlos Guerrero</em></strong></h2><p>Esto es una prueba.</p>"
}

[etrepum]

I think you forgot to actually commit any code, that is just a starter template.

[cguerrero1205]

I think you forgot to actually commit any code, that is just a starter template.

Sorry, I forgot to push.

I did it now.

[etrepum]

This is the problem, you're passing the body when the API expects a document

      const body = dom.window.document.body;
      const nodes = $generateNodesFromDOM(editor, body);

[cguerrero1205]

This is the problem, you're passing the body when the API expects a document

      const body = dom.window.document.body;
      const nodes = $generateNodesFromDOM(editor, body);

My God, that was the problem!

I already made the change and uploaded to the repository, it works perfectly.

Thank you very much!

[etrepum]

See also https://lexical.dev/docs/concepts/serialization#html---lexical