@tohuhono/puck-rich-text/dist/rich-text-editor/lexical/server-side-render.js

A puck component for rich text editing made for OberonCMS

import { jsx } from "react/jsx-runtime";
import { $generateHtmlFromNodes } from "@lexical/html";
import { createHeadlessEditor } from "@lexical/headless";
import { JSDOM } from "jsdom";
import DOMPurify from "dompurify";
import { HeadingNode, QuoteNode } from "@lexical/rich-text";
import { CodeHighlightNode, CodeNode } from "@lexical/code";
import { AutoLinkNode, LinkNode } from "@lexical/link";
import { ListItemNode, ListNode } from "@lexical/list";
const editor = createHeadlessEditor({
  namespace: "ssr-editor",
  nodes: [
    HeadingNode,
    QuoteNode,
    AutoLinkNode,
    LinkNode,
    ListItemNode,
    ListNode,
    CodeHighlightNode,
    CodeNode
  ],
  onError: (error) => {
    console.log("headless lexical error", error);
  }
});
function setupDom() {
  const dom = new JSDOM();
  const _window = global.window;
  const _document = global.document;
  global.window = dom.window;
  global.document = dom.window.document;
  return () => {
    global.window = _window;
    global.document = _document;
  };
}
async function ServerSideRender({
  state
}) {
  if (!state) {
    return null;
  }
  const __html = await new Promise((resolve) => {
    editor.setEditorState(editor.parseEditorState(state));
    editor.update(async () => {
      const cleanup = setupDom();
      try {
        const purify = DOMPurify(window);
        const raw = $generateHtmlFromNodes(editor, null);
        const html = purify.sanitize(raw);
        resolve(html);
      } finally {
        cleanup();
      }
    });
  });
  return /* @__PURE__ */ jsx("div", { dangerouslySetInnerHTML: { __html } });
}
export {
  ServerSideRender
};