Generate HTML string in headless mode from editor state

[JavoByte]

Hi.
I'm using Lexical to generate posts in an app I'm building. So far I'm able to send the editor state serialized to our backend. In our backend, I would like to store it in 3 ways: Raw Text, HTML, and Original State.

Original state is easy, just storing what I received.
Raw Text I achieved with this:

const textContent = await new Promise<string>((resolve, reject) => {
   const editor = createHeadlessEditor({
      nodes: [],
      onError: reject,
    });

    editor.setEditorState(editor.parseEditorState(rawContent));

    editor.update(() => {
      const rootNode = $getRoot();
      const text = $getRoot().getTextContent();
      
      resolve(text);
    });
});

I tried something similar for HTML with

const htmlContent = $generateHtmlFromNodes(editor);

However, I get this error:

Error: To use $generateHtmlFromNodes in headless mode please initialize a headless browser implementation such as JSDom before calling this function.

I looked into the code within @lexical/html and it seems that document / window are read as global variables, so it's not possible to provide them as arguments.

Is there any other way to generate the HTML?

Ideally I would like to avoid sending Lexical State AND html from the browser.

[rodbs]

Same situation here. There is not a clear explanation/example about how to generate HTML code. It would be highly appreciated it if somebody could create an example..

In this issue they seem to be generated markdown. But not sure about the window... Does it have to be generated on the client?
#3097
https://stackblitz.com/edit/node-xwgfmq?file=index.js

In my case I'm using Remix on Cloudflare Workers. Any ideas how to do generate HTML? Generate markdown in the server, and then hydratate in the client?

[2wheeh]

Hi folks, I'm struggling with same situation ✋🏻.

I'm trying with following code after seeing some issues about this situation:

function setUpDom() {
  const dom = new JSDOM();

  const _window = global.window;
  const _document = global.document;
  const _documentFragment = global.DocumentFragment;
  const _navigator = global.navigator;

  // @ts-ignore
  global.window = dom.window;
  global.document = dom.window.document;
  global.DocumentFragment = dom.window.DocumentFragment;
  global.navigator = dom.window.navigator;

  return () => {
    // @ts-ignore
    global.window = _window;
    global.document = _document;
    global.DocumentFragment = _documentFragment;
    global.navigator = _navigator;
  };
}

export async function getHtml(jsonState: string) {
  const html = await new Promise<string>((resolve, reject) => {
    const editor = createHeadlessEditor({
      nodes: [HeadingNode, QuoteNode, ListNode, ListItemNode, LinkNode],
      namespace: 'blog',
      onError: (error: Error) => {
        throw error;
      },
    });
    editor.setEditorState(editor.parseEditorState(jsonState));

    editor.update(() => {
      const cleanUpDom = setUpDom();
      const _html = $generateHtmlFromNodes(editor, null);

      cleanUpDom();
      resolve(_html);
    });
  });

  return html;
}

Now I still see the error about dom environment ...
Have you guys found out any working workaround ?

Edit:
This works on https://stackblitz.com/edit/node-2aqurj?file=index.js,package.json

Seems my code base has some other issue 😮‍💨

[2wheeh]

There is an unit test just added for this:

lexical/packages/lexical-headless/src/__tests__/unit/LexicalHeadlessEditor.test.ts

Line 189 in 4074bc5

it('can generate html from the nodes when dom is set', async () => {

[JavoByte]

I can confirm that overwriting global.window as suggested by @2wheeh works properly.

Still feels odd to overwrite global variables but at least we have this workaround.