THIS IS RENDERED ON NEXTJS SERVER SIDE.

You can inspect that the rendered HTML by the headless editor is served
in the network tab of your browser's devTools.

Check the code: GitHub
Welcome to the playground

You can start editing this page once you convert the editor to edit mode by clicking the button on the top of this page.
This is just a simple demo to check compatibility of Lexical and Next.js.
You can explore more Lexical on the playground.

The playground is a demo environment built with @lexical/react. Try typing in some text with different formats.

Make sure to check out the various plugins in the toolbar.

If you'd like to find out more about Lexical, you can:

• Visit the Lexical website for documentation and more information.
• Check out the code on our GitHub repository.
• Playground code can be found here.
• Join our Discord Server and chat with the team.

Lastly, we're constantly adding cool new features to this playground. So make sure you check back here when you next get a chance.

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

  const _window = global.window;
  const _document = global.document;

  // @ts-expect-error
  global.window = dom.window;
  global.document = dom.window.document;

  return () => {
    global.window = _window;
    global.document = _document;
  };
}

async function getHtml() {
  const html: string = await new Promise(resolve => {
    const editor = createHeadlessEditor({
      namespace: 'Editor',
      nodes: [],
      onError: () => {},
    });

    editor.setEditorState(editor.parseEditorState(JSON.stringify(editorState)));

    editor.update(() => {
      try {
        const cleanup = setupDom();
        const _html = $generateHtmlFromNodes(editor, null);
        cleanup();
        
        resolve(_html);
      } catch (e) {
        console.log(e);
      }
    });
  });

  return html;
}

export default async function Home() {
  const html = await getHtml();
  return (
    <div className='container mx-auto'>
      <div className='viewer' dangerouslySetInnerHTML={{ __html: html }}></div>
    </div>
  );
}