@haklex/rich-editor 0.0.81 → 0.0.83

package/dist/config-BP_kyJbW.js

@@ -0,0 +1,1363 @@
+var __defProp = Object.defineProperty;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "symbol" ? key + "" : key, value);
+import { CodeNode } from "@lexical/code";
+import { HorizontalRuleNode } from "@lexical/extension";
+import { LinkNode, AutoLinkNode } from "@lexical/link";
+import { ListNode, ListItemNode } from "@lexical/list";
+import { HeadingNode, QuoteNode } from "@lexical/rich-text";
+import { TableNode, TableCellNode, TableRowNode } from "@lexical/table";
+import { u as useNestedContentRenderer, o as extractTextContent, S as SpoilerNode, M as MentionNode, k as KaTeXInlineNode, K as KaTeXBlockNode, I as ImageNode, s as AlertQuoteNode, F as FootnoteNode, l as MermaidNode, T as TagNode } from "./theme-Cg8JUW_j.js";
+import { DecoratorNode, $insertNodes, TextNode, ElementNode, $createTextNode } from "lexical";
+import { createElement, createContext, use, useState, useRef, useEffect, useCallback } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { a as RendererWrapper, g as useVariant, c as createRendererDecoration, b as useFootnoteDefinitions } from "./KaTeXRenderer-BFryJSIS.js";
+import { Code, MessageSquareQuote, ChevronRight, Link, Video } from "lucide-react";
+import { s as semanticClassNames, b as sharedStyles, d as clsx } from "./utils-gy2c_HWc.js";
+import { L as LinkCardRenderer } from "./LinkCardRenderer-QmkOlyXb.js";
+const BannerRenderer = ({ type }) => {
+  return /* @__PURE__ */ jsx("span", { className: `rich-banner-icon rich-banner-icon-${type}` });
+};
+function BannerStaticDecorator({ bannerType, contentState }) {
+  const renderContent = useNestedContentRenderer();
+  return /* @__PURE__ */ jsxs("div", { className: "rich-banner-inner", children: [
+    /* @__PURE__ */ jsx(
+      RendererWrapper,
+      {
+        defaultRenderer: BannerRenderer,
+        props: { type: bannerType },
+        rendererKey: "Banner"
+      }
+    ),
+    /* @__PURE__ */ jsx("div", { className: "rich-banner-content", children: renderContent(contentState) })
+  ] });
+}
+const LEGACY_TYPE_MAP = {
+  info: "note",
+  success: "tip",
+  error: "caution"
+};
+function normalizeBannerType(type) {
+  if (type in LEGACY_TYPE_MAP) return LEGACY_TYPE_MAP[type];
+  return type || "note";
+}
+const BANNER_TYPES = [
+  "note",
+  "tip",
+  "important",
+  "warning",
+  "caution"
+];
+const BANNER_LABELS = {
+  note: "Note",
+  tip: "Tip",
+  important: "Important",
+  warning: "Warning",
+  caution: "Caution"
+};
+class BannerNode extends DecoratorNode {
+  constructor(bannerType, contentState, key) {
+    super(key);
+    __publicField(this, "__bannerType");
+    __publicField(this, "__contentState");
+    this.__bannerType = bannerType;
+    this.__contentState = contentState || {
+      root: {
+        children: [
+          {
+            type: "paragraph",
+            children: [],
+            direction: null,
+            format: "",
+            indent: 0,
+            textFormat: 0,
+            textStyle: "",
+            version: 1
+          }
+        ],
+        direction: null,
+        format: "",
+        indent: 0,
+        type: "root",
+        version: 1
+      }
+    };
+  }
+  static getType() {
+    return "banner";
+  }
+  static clone(node) {
+    return new BannerNode(node.__bannerType, node.__contentState, node.__key);
+  }
+  createDOM(_config) {
+    const div = document.createElement("div");
+    div.className = `rich-banner rich-banner-${this.__bannerType}`;
+    return div;
+  }
+  updateDOM(prevNode, dom) {
+    if (prevNode.__bannerType !== this.__bannerType) {
+      dom.className = `rich-banner rich-banner-${this.__bannerType}`;
+    }
+    return false;
+  }
+  isInline() {
+    return false;
+  }
+  getBannerType() {
+    return this.__bannerType;
+  }
+  setBannerType(bannerType) {
+    const writable = this.getWritable();
+    writable.__bannerType = bannerType;
+  }
+  getContentState() {
+    return this.getLatest().__contentState;
+  }
+  setContentState(state) {
+    const writable = this.getWritable();
+    writable.__contentState = state;
+  }
+  getTextContent() {
+    return extractTextContent(this.__contentState);
+  }
+  static importJSON(serializedNode) {
+    const legacy = serializedNode;
+    const bannerType = normalizeBannerType(serializedNode.bannerType);
+    if (serializedNode.content) {
+      return new BannerNode(bannerType, serializedNode.content);
+    }
+    if (legacy.children) {
+      const content = {
+        root: {
+          children: legacy.children,
+          direction: null,
+          format: "",
+          indent: 0,
+          type: "root",
+          version: 1
+        }
+      };
+      return new BannerNode(bannerType, content);
+    }
+    return new BannerNode(bannerType);
+  }
+  exportJSON() {
+    return {
+      ...super.exportJSON(),
+      type: "banner",
+      bannerType: this.__bannerType,
+      content: this.__contentState,
+      version: 1
+    };
+  }
+  decorate(_editor, _config) {
+    return createElement(BannerStaticDecorator, {
+      bannerType: this.__bannerType,
+      contentState: this.__contentState
+    });
+  }
+}
+function $isBannerNode(node) {
+  return node instanceof BannerNode;
+}
+const ColorSchemeContext = createContext("light");
+function ColorSchemeProvider({
+  colorScheme,
+  children
+}) {
+  return /* @__PURE__ */ jsx(ColorSchemeContext.Provider, { value: colorScheme, children });
+}
+function useColorScheme() {
+  return use(ColorSchemeContext);
+}
+let codeToHtmlFn = null;
+let shikiLoadPromise = null;
+function loadCodeToHtml() {
+  if (codeToHtmlFn) return Promise.resolve(codeToHtmlFn);
+  if (!shikiLoadPromise) {
+    shikiLoadPromise = import("shiki/bundle/web").then((mod) => {
+      codeToHtmlFn = mod.codeToHtml;
+      return mod.codeToHtml;
+    }).catch((err) => {
+      shikiLoadPromise = null;
+      throw err;
+    });
+  }
+  return shikiLoadPromise;
+}
+function CodeBlockRenderer({
+  code,
+  language,
+  showLineNumbers: showLineNumbersProp
+}) {
+  const variant = useVariant();
+  const showLineNumbers = showLineNumbersProp ?? variant !== "comment";
+  const colorScheme = useColorScheme();
+  const shikiTheme = colorScheme === "dark" ? "github-dark" : "github-light";
+  const [highlightedHtml, setHighlightedHtml] = useState(null);
+  const [copied, setCopied] = useState(false);
+  const copyTimerRef = useRef(void 0);
+  useEffect(() => {
+    let cancelled = false;
+    setHighlightedHtml(null);
+    loadCodeToHtml().then(
+      (toHtml) => toHtml(code, {
+        lang: language,
+        theme: shikiTheme
+      })
+    ).then((html) => {
+      if (!cancelled) {
+        setHighlightedHtml(html);
+      }
+    }).catch(() => {
+      if (!cancelled) {
+        setHighlightedHtml(null);
+      }
+    });
+    return () => {
+      cancelled = true;
+    };
+  }, [code, language, shikiTheme]);
+  useEffect(() => {
+    return () => clearTimeout(copyTimerRef.current);
+  }, []);
+  const handleCopy = useCallback(() => {
+    navigator.clipboard.writeText(code).then(() => {
+      setCopied(true);
+      clearTimeout(copyTimerRef.current);
+      copyTimerRef.current = setTimeout(() => setCopied(false), 2e3);
+    }).catch(() => {
+    });
+  }, [code]);
+  const header = language ? /* @__PURE__ */ jsxs("div", { className: "rich-code-block-header", children: [
+    /* @__PURE__ */ jsx("span", { className: "rich-code-block-lang", children: language }),
+    /* @__PURE__ */ jsx(
+      "button",
+      {
+        "aria-label": copied ? "Copied to clipboard" : "Copy code",
+        className: "rich-code-block-copy",
+        type: "button",
+        onClick: handleCopy,
+        children: copied ? "Copied" : "Copy"
+      }
+    )
+  ] }) : null;
+  const wrapperClass = showLineNumbers ? "rich-code-block rich-code-block-numbered" : "rich-code-block";
+  if (highlightedHtml) {
+    return /* @__PURE__ */ jsxs("div", { className: wrapperClass, children: [
+      header,
+      /* @__PURE__ */ jsx("div", { dangerouslySetInnerHTML: { __html: highlightedHtml } })
+    ] });
+  }
+  const lines = code.split("\n");
+  return /* @__PURE__ */ jsxs("div", { className: wrapperClass, children: [
+    header,
+    /* @__PURE__ */ jsx("pre", { children: /* @__PURE__ */ jsx("code", { children: lines.map((line, i) => /* @__PURE__ */ jsxs("span", { className: "line", children: [
+      line,
+      i < lines.length - 1 ? "\n" : ""
+    ] }, i)) }) })
+  ] });
+}
+const _CodeBlockNode = class _CodeBlockNode extends DecoratorNode {
+  constructor(code, language, key) {
+    super(key);
+    __publicField(this, "__code");
+    __publicField(this, "__language");
+    this.__code = code;
+    this.__language = language;
+  }
+  static getType() {
+    return "code-block";
+  }
+  static clone(node) {
+    return new _CodeBlockNode(node.__code, node.__language, node.__key);
+  }
+  createDOM(_config) {
+    const div = document.createElement("div");
+    div.className = "rich-code-block-wrapper";
+    return div;
+  }
+  updateDOM() {
+    return false;
+  }
+  isInline() {
+    return false;
+  }
+  isKeyboardSelectable() {
+    return true;
+  }
+  static importJSON(serializedNode) {
+    return $createCodeBlockNode(serializedNode.code, serializedNode.language);
+  }
+  exportJSON() {
+    return {
+      ...super.exportJSON(),
+      type: "code-block",
+      code: this.__code,
+      language: this.__language,
+      version: 1
+    };
+  }
+  getCode() {
+    return this.__code;
+  }
+  setCode(code) {
+    const writable = this.getWritable();
+    writable.__code = code;
+  }
+  getLanguage() {
+    return this.__language;
+  }
+  setLanguage(language) {
+    const writable = this.getWritable();
+    writable.__language = language;
+  }
+  decorate(_editor, _config) {
+    return createRendererDecoration("CodeBlock", CodeBlockRenderer, {
+      code: this.__code,
+      language: this.__language
+    });
+  }
+};
+__publicField(_CodeBlockNode, "commandItems", [
+  {
+    title: "Code Block",
+    icon: createElement(Code, { size: 20 }),
+    description: "Syntax-highlighted code",
+    keywords: ["code", "snippet", "codeblock"],
+    section: "MEDIA",
+    placement: ["slash", "toolbar"],
+    group: "insert",
+    onSelect: (editor) => {
+      editor.update(() => {
+        $insertNodes([$createCodeBlockNode("", "text")]);
+      });
+    }
+  }
+]);
+let CodeBlockNode = _CodeBlockNode;
+function $createCodeBlockNode(code, language) {
+  return new CodeBlockNode(code, language);
+}
+function $isCodeBlockNode(node) {
+  return node instanceof CodeBlockNode;
+}
+const DEFAULT_COMMENT_TEXT = "comment";
+const _CommentNode = class _CommentNode extends TextNode {
+  static getType() {
+    return "comment";
+  }
+  static clone(node) {
+    return new _CommentNode(node.__text, node.__key);
+  }
+  static importDOM() {
+    return {
+      "#comment": () => ({
+        conversion: (domNode) => {
+          if (!(domNode instanceof Comment)) return null;
+          return {
+            node: $createCommentNode(domNode.data)
+          };
+        },
+        priority: 4
+      }),
+      "span": () => ({
+        conversion: (domNode) => {
+          if (!(domNode instanceof HTMLElement)) return null;
+          if (!domNode.classList.contains(semanticClassNames.comment)) return null;
+          return {
+            node: $createCommentNode(domNode.dataset.comment ?? domNode.textContent ?? "")
+          };
+        },
+        priority: 2
+      })
+    };
+  }
+  constructor(text, key) {
+    super(text, key);
+  }
+  createDOM(config) {
+    const element = super.createDOM(config);
+    element.classList.add(semanticClassNames.comment, sharedStyles.comment);
+    element.dataset.comment = this.__text;
+    return element;
+  }
+  updateDOM(prevNode, dom, config) {
+    const updated = super.updateDOM(prevNode, dom, config);
+    dom.classList.add(semanticClassNames.comment, sharedStyles.comment);
+    if (prevNode.__text !== this.__text) {
+      dom.dataset.comment = this.__text;
+    }
+    return updated;
+  }
+  exportDOM(_editor) {
+    return {
+      element: document.createComment(this.getTextContent())
+    };
+  }
+  static importJSON(serializedNode) {
+    const node = $createCommentNode(serializedNode.text ?? "");
+    node.setFormat(serializedNode.format ?? 0);
+    node.setDetail(serializedNode.detail ?? 0);
+    node.setMode(serializedNode.mode ?? "normal");
+    node.setStyle(serializedNode.style ?? "");
+    return node;
+  }
+  exportJSON() {
+    return {
+      ...super.exportJSON(),
+      type: "comment",
+      version: 1
+    };
+  }
+};
+__publicField(_CommentNode, "commandItems", [
+  {
+    title: "HTML Comment",
+    icon: createElement(MessageSquareQuote, { size: 20 }),
+    description: "Insert an HTML comment node",
+    keywords: ["comment", "html", "annotation", "hidden", "<!-- -->"],
+    section: "INLINE",
+    placement: ["slash", "toolbar"],
+    group: "insert",
+    onSelect: (editor, _queryString) => {
+      editor.update(() => {
+        const node = $createCommentNode(DEFAULT_COMMENT_TEXT);
+        $insertNodes([node]);
+        node.select(0, node.getTextContentSize());
+      });
+    }
+  }
+]);
+let CommentNode = _CommentNode;
+function $createCommentNode(text) {
+  return new CommentNode(text);
+}
+function $createCommentPlaceholderNode() {
+  return $createCommentNode(DEFAULT_COMMENT_TEXT);
+}
+function $isCommentNode(node) {
+  return node instanceof CommentNode;
+}
+const SVG_NS = "http://www.w3.org/2000/svg";
+const DEFAULT_ATTRS = {
+  xmlns: SVG_NS,
+  width: "24",
+  height: "24",
+  viewBox: "0 0 24 24",
+  fill: "none",
+  stroke: "currentColor",
+  "stroke-width": "2",
+  "stroke-linecap": "round",
+  "stroke-linejoin": "round"
+};
+function createLucideSvg(iconNode, attrs = {}) {
+  const svg = document.createElementNS(SVG_NS, "svg");
+  const merged = { ...DEFAULT_ATTRS, ...attrs };
+  for (const [k, v] of Object.entries(merged)) {
+    svg.setAttribute(k, v);
+  }
+  for (const [tag, elAttrs] of iconNode) {
+    const el = document.createElementNS(SVG_NS, tag);
+    for (const [k, v] of Object.entries(elAttrs)) {
+      if (k === "key") continue;
+      el.setAttribute(k, v);
+    }
+    svg.append(el);
+  }
+  return svg;
+}
+const ChevronRightIconNode = [["path", { d: "M8 6L12 10L8 14" }]];
+const _DetailsNode = class _DetailsNode extends ElementNode {
+  constructor(summary, open = false, key) {
+    super(key);
+    __publicField(this, "__summary");
+    __publicField(this, "__open");
+    this.__summary = summary;
+    this.__open = open;
+  }
+  static getType() {
+    return "details";
+  }
+  static clone(node) {
+    return new _DetailsNode(node.__summary, node.__open, node.__key);
+  }
+  createDOM(_config) {
+    const details = document.createElement("details");
+    details.className = "rich-details";
+    if (this.__open) {
+      details.open = true;
+    }
+    const summary = document.createElement("summary");
+    summary.className = "rich-details-summary";
+    const chevron = document.createElement("span");
+    chevron.className = "rich-details-chevron";
+    chevron.setAttribute("aria-hidden", "true");
+    chevron.append(
+      createLucideSvg(ChevronRightIconNode, {
+        width: "20",
+        height: "20",
+        viewBox: "0 0 20 20",
+        "stroke-width": "1.5"
+      })
+    );
+    summary.append(chevron);
+    const label = document.createElement("span");
+    label.className = "rich-details-summary-text";
+    label.textContent = this.__summary;
+    summary.append(label);
+    const content = document.createElement("div");
+    content.className = "rich-details-content";
+    details.append(summary, content);
+    return details;
+  }
+  updateDOM(prevNode, dom) {
+    const details = dom;
+    if (prevNode.__open !== this.__open) {
+      details.open = this.__open;
+    }
+    if (prevNode.__summary !== this.__summary) {
+      const label = dom.querySelector(".rich-details-summary-text");
+      if (label) {
+        label.textContent = this.__summary;
+      }
+    }
+    return false;
+  }
+  static importJSON(serializedNode) {
+    return $createDetailsNode(serializedNode.summary, serializedNode.open);
+  }
+  exportJSON() {
+    return {
+      ...super.exportJSON(),
+      type: "details",
+      summary: this.__summary,
+      open: this.__open,
+      version: 1
+    };
+  }
+  getSummary() {
+    return this.getLatest().__summary;
+  }
+  setSummary(summary) {
+    const writable = this.getWritable();
+    writable.__summary = summary;
+  }
+  getOpen() {
+    return this.getLatest().__open;
+  }
+  setOpen(open) {
+    const writable = this.getWritable();
+    writable.__open = open;
+  }
+  toggleOpen() {
+    this.setOpen(!this.getOpen());
+  }
+  getDOMSlot(element) {
+    const content = element.querySelector(
+      ".rich-details-content"
+    );
+    return super.getDOMSlot(element).withElement(content);
+  }
+  isInline() {
+    return false;
+  }
+};
+__publicField(_DetailsNode, "slashMenuItems", [
+  {
+    title: "Details",
+    icon: createElement(ChevronRight, { size: 20 }),
+    description: "Collapsible content block",
+    keywords: ["details", "toggle", "collapse", "accordion"],
+    section: "ADVANCED",
+    onSelect: (editor) => {
+      editor.update(() => {
+        $insertNodes([$createDetailsNode("Details")]);
+      });
+    }
+  }
+]);
+let DetailsNode = _DetailsNode;
+function $createDetailsNode(summary, open = false) {
+  return new DetailsNode(summary, open);
+}
+function FootnoteSectionRenderer({ definitions }) {
+  const { displayNumberMap } = useFootnoteDefinitions();
+  const sortedEntries = Object.entries(definitions).sort(
+    ([a], [b]) => (displayNumberMap[a] ?? 0) - (displayNumberMap[b] ?? 0)
+  );
+  if (sortedEntries.length === 0) return null;
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      role: "doc-endnotes",
+      className: clsx(
+        "rich-footnote-section-content",
+        semanticClassNames.footnoteSection,
+        sharedStyles.footnoteSection
+      ),
+      children: [
+        /* @__PURE__ */ jsx(
+          "hr",
+          {
+            className: clsx(
+              semanticClassNames.footnoteSectionDivider,
+              sharedStyles.footnoteSectionDivider
+            )
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          "ol",
+          {
+            className: clsx(semanticClassNames.footnoteSectionList, sharedStyles.footnoteSectionList),
+            children: sortedEntries.map(([identifier, content]) => {
+              const displayNum = displayNumberMap[identifier] ?? identifier;
+              return /* @__PURE__ */ jsx(
+                FootnoteSectionItem,
+                {
+                  content,
+                  displayNum,
+                  identifier
+                },
+                identifier
+              );
+            })
+          }
+        )
+      ]
+    }
+  );
+}
+function FootnoteSectionItem({
+  identifier,
+  content,
+  displayNum
+}) {
+  const targetId = `footnote-${identifier}`;
+  const refId = `footnote-ref-${identifier}`;
+  const handleBackClick = useCallback(
+    (e) => {
+      e.preventDefault();
+      const refElement = document.getElementById(refId);
+      if (!refElement) return;
+      refElement.scrollIntoView({ behavior: "smooth", block: "center" });
+      refElement.classList.add(
+        semanticClassNames.footnoteHighlight,
+        sharedStyles.footnoteHighlight
+      );
+      window.setTimeout(() => {
+        refElement.classList.remove(
+          semanticClassNames.footnoteHighlight,
+          sharedStyles.footnoteHighlight
+        );
+      }, 1200);
+    },
+    [refId]
+  );
+  return /* @__PURE__ */ jsxs(
+    "li",
+    {
+      className: clsx(semanticClassNames.footnoteSectionItem, sharedStyles.footnoteSectionItem),
+      id: targetId,
+      value: typeof displayNum === "number" ? displayNum : void 0,
+      children: [
+        /* @__PURE__ */ jsx("span", { className: "rich-footnote-section-item-content", children: content }),
+        /* @__PURE__ */ jsx(
+          "a",
+          {
+            "aria-label": `Back to reference ${displayNum}`,
+            className: clsx(semanticClassNames.footnoteBackRef, sharedStyles.footnoteBackRef),
+            href: `#${refId}`,
+            role: "doc-backlink",
+            onClick: handleBackClick,
+            children: "↩"
+          }
+        )
+      ]
+    }
+  );
+}
+class FootnoteSectionNode extends DecoratorNode {
+  constructor(definitions, key) {
+    super(key);
+    __publicField(this, "__definitions");
+    this.__definitions = definitions;
+  }
+  static getType() {
+    return "footnote-section";
+  }
+  static clone(node) {
+    return new FootnoteSectionNode({ ...node.__definitions }, node.__key);
+  }
+  createDOM(_config) {
+    const div = document.createElement("div");
+    div.className = `${semanticClassNames.footnoteSection} ${sharedStyles.footnoteSection}`;
+    return div;
+  }
+  updateDOM() {
+    return false;
+  }
+  isInline() {
+    return false;
+  }
+  static importJSON(serializedNode) {
+    return $createFootnoteSectionNode(serializedNode.definitions);
+  }
+  exportJSON() {
+    return {
+      ...super.exportJSON(),
+      type: "footnote-section",
+      definitions: this.__definitions,
+      version: 1
+    };
+  }
+  getDefinitions() {
+    return this.getLatest().__definitions;
+  }
+  setDefinitions(definitions) {
+    const writable = this.getWritable();
+    writable.__definitions = definitions;
+  }
+  getDefinition(identifier) {
+    return this.getLatest().__definitions[identifier];
+  }
+  setDefinition(identifier, content) {
+    const writable = this.getWritable();
+    writable.__definitions = {
+      ...writable.__definitions,
+      [identifier]: content
+    };
+  }
+  removeDefinition(identifier) {
+    const writable = this.getWritable();
+    const { [identifier]: _, ...rest } = writable.__definitions;
+    writable.__definitions = rest;
+  }
+  decorate(_editor, _config) {
+    return createRendererDecoration("FootnoteSection", FootnoteSectionRenderer, {
+      definitions: this.__definitions,
+      nodeKey: this.__key
+    });
+  }
+}
+function $createFootnoteSectionNode(definitions = {}) {
+  return new FootnoteSectionNode(definitions);
+}
+function $isFootnoteSectionNode(node) {
+  return node instanceof FootnoteSectionNode;
+}
+function GridStaticDecorator({ cols, gap, cellStates }) {
+  const renderContent = useNestedContentRenderer();
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      className: "rich-grid-inner",
+      style: {
+        display: "grid",
+        gridTemplateColumns: `repeat(${cols}, 1fr)`,
+        gap
+      },
+      children: cellStates.map((state, i) => /* @__PURE__ */ jsx("div", { className: "rich-grid-cell", children: renderContent(state) }, i))
+    }
+  );
+}
+class GridContainerNode extends DecoratorNode {
+  constructor(cols = 2, gap, cellStates, key) {
+    super(key);
+    __publicField(this, "__cols");
+    __publicField(this, "__gap");
+    __publicField(this, "__cellStates");
+    this.__cols = cols;
+    this.__gap = gap || "16px";
+    if (cellStates) {
+      this.__cellStates = cellStates;
+    } else {
+      const emptyState = {
+        root: {
+          children: [
+            {
+              type: "paragraph",
+              children: [],
+              direction: null,
+              format: "",
+              indent: 0,
+              textFormat: 0,
+              textStyle: "",
+              version: 1
+            }
+          ],
+          direction: null,
+          format: "",
+          indent: 0,
+          type: "root",
+          version: 1
+        }
+      };
+      this.__cellStates = Array.from({ length: cols }, () => emptyState);
+    }
+  }
+  static getType() {
+    return "grid-container";
+  }
+  static clone(node) {
+    return new GridContainerNode(node.__cols, node.__gap, [...node.__cellStates], node.__key);
+  }
+  createDOM(_config) {
+    const div = document.createElement("div");
+    div.className = "rich-grid-container";
+    return div;
+  }
+  updateDOM() {
+    return false;
+  }
+  isInline() {
+    return false;
+  }
+  getCols() {
+    return this.getLatest().__cols;
+  }
+  setCols(cols) {
+    const writable = this.getWritable();
+    const prev = writable.__cellStates.length;
+    writable.__cols = cols;
+    if (cols > prev) {
+      const emptyState = {
+        root: {
+          children: [
+            {
+              type: "paragraph",
+              children: [],
+              direction: null,
+              format: "",
+              indent: 0,
+              textFormat: 0,
+              textStyle: "",
+              version: 1
+            }
+          ],
+          direction: null,
+          format: "",
+          indent: 0,
+          type: "root",
+          version: 1
+        }
+      };
+      for (let i = prev; i < cols; i++) {
+        writable.__cellStates.push(emptyState);
+      }
+    }
+  }
+  getGap() {
+    return this.getLatest().__gap;
+  }
+  setGap(gap) {
+    const writable = this.getWritable();
+    writable.__gap = gap;
+  }
+  getCellStates() {
+    return this.getLatest().__cellStates;
+  }
+  addCells(count) {
+    const writable = this.getWritable();
+    const emptyState = {
+      root: {
+        children: [
+          {
+            type: "paragraph",
+            children: [],
+            direction: null,
+            format: "",
+            indent: 0,
+            textFormat: 0,
+            textStyle: "",
+            version: 1
+          }
+        ],
+        direction: null,
+        format: "",
+        indent: 0,
+        type: "root",
+        version: 1
+      }
+    };
+    for (let i = 0; i < count; i++) {
+      writable.__cellStates.push(emptyState);
+    }
+  }
+  removeCells(count) {
+    const writable = this.getWritable();
+    const states = writable.__cellStates;
+    const toRemove = Math.min(count, states.length);
+    for (let i = 0; i < toRemove; i++) {
+      const state = states.at(-1);
+      if (!state) break;
+      const isEmpty = extractTextContent(state).trim() === "";
+      if (!isEmpty) break;
+      states.pop();
+    }
+  }
+  getTextContent() {
+    return this.__cellStates.map((s) => extractTextContent(s)).join("\n");
+  }
+  static importJSON(serializedNode) {
+    const legacy = serializedNode;
+    const cols = legacy.cols || 2;
+    const rawGap = legacy.gap;
+    const gap = typeof rawGap === "number" ? `${rawGap}px` : rawGap;
+    if (legacy.cells && legacy.cells.length > 0) {
+      return new GridContainerNode(cols, gap, legacy.cells);
+    }
+    if (legacy.children) {
+      const cellStates = legacy.children.map((child) => {
+        return {
+          root: {
+            children: [child],
+            direction: null,
+            format: "",
+            indent: 0,
+            type: "root",
+            version: 1
+          }
+        };
+      });
+      return new GridContainerNode(cols, gap, cellStates);
+    }
+    return new GridContainerNode(cols, gap);
+  }
+  exportJSON() {
+    return {
+      ...super.exportJSON(),
+      type: "grid-container",
+      cols: this.__cols,
+      gap: this.__gap,
+      cells: this.__cellStates,
+      version: 1
+    };
+  }
+  decorate(_editor, _config) {
+    return createElement(GridStaticDecorator, {
+      cols: this.__cols,
+      gap: this.__gap,
+      cellStates: this.__cellStates
+    });
+  }
+}
+function $createGridContainerNode(cols = 2, gap) {
+  return new GridContainerNode(cols, gap);
+}
+function $isGridContainerNode(node) {
+  return node instanceof GridContainerNode;
+}
+const _LinkCardNode = class _LinkCardNode extends DecoratorNode {
+  constructor(payload, key) {
+    super(key);
+    __publicField(this, "__url");
+    __publicField(this, "__source");
+    __publicField(this, "__id");
+    __publicField(this, "__title");
+    __publicField(this, "__description");
+    __publicField(this, "__favicon");
+    __publicField(this, "__image");
+    this.__url = payload.url;
+    this.__source = payload.source;
+    this.__id = payload.id;
+    this.__title = payload.title;
+    this.__description = payload.description;
+    this.__favicon = payload.favicon;
+    this.__image = payload.image;
+  }
+  static getType() {
+    return "link-card";
+  }
+  static clone(node) {
+    return new _LinkCardNode(
+      {
+        url: node.__url,
+        source: node.__source,
+        id: node.__id,
+        title: node.__title,
+        description: node.__description,
+        favicon: node.__favicon,
+        image: node.__image
+      },
+      node.__key
+    );
+  }
+  createDOM(_config) {
+    const div = document.createElement("div");
+    div.className = "rich-link-card-wrapper";
+    return div;
+  }
+  updateDOM() {
+    return false;
+  }
+  isInline() {
+    return false;
+  }
+  static importJSON(serializedNode) {
+    return $createLinkCardNode({
+      url: serializedNode.url,
+      source: serializedNode.source,
+      id: serializedNode.id,
+      title: serializedNode.title,
+      description: serializedNode.description,
+      favicon: serializedNode.favicon,
+      image: serializedNode.image
+    });
+  }
+  exportJSON() {
+    return {
+      ...super.exportJSON(),
+      type: "link-card",
+      url: this.__url,
+      source: this.__source,
+      id: this.__id,
+      title: this.__title,
+      description: this.__description,
+      favicon: this.__favicon,
+      image: this.__image,
+      version: 1
+    };
+  }
+  getUrl() {
+    return this.getLatest().__url;
+  }
+  setUrl(url) {
+    const writable = this.getWritable();
+    writable.__url = url;
+  }
+  getSource() {
+    return this.getLatest().__source;
+  }
+  setSource(source) {
+    const writable = this.getWritable();
+    writable.__source = source;
+  }
+  getId() {
+    return this.getLatest().__id;
+  }
+  setId(id) {
+    const writable = this.getWritable();
+    writable.__id = id;
+  }
+  decorate(_editor, _config) {
+    return createRendererDecoration("LinkCard", LinkCardRenderer, {
+      url: this.__url,
+      source: this.__source,
+      id: this.__id,
+      title: this.__title,
+      description: this.__description,
+      favicon: this.__favicon,
+      image: this.__image
+    });
+  }
+};
+__publicField(_LinkCardNode, "commandItems", [
+  {
+    title: "Link Card",
+    icon: createElement(Link, { size: 20 }),
+    description: "Link preview card",
+    keywords: ["link", "card", "bookmark", "embed"],
+    section: "MEDIA",
+    placement: ["slash", "toolbar"],
+    group: "insert",
+    onSelect: (editor) => {
+      editor.update(() => {
+        $insertNodes([$createLinkCardNode({ url: "" })]);
+      });
+    }
+  }
+]);
+let LinkCardNode = _LinkCardNode;
+function $createLinkCardNode(payload) {
+  return new LinkCardNode(payload);
+}
+function $isLinkCardNode(node) {
+  return node instanceof LinkCardNode;
+}
+function readBaseTextFromRuby(element) {
+  let base = "";
+  for (const child of Array.from(element.childNodes)) {
+    if (child.nodeType === Node.TEXT_NODE) {
+      base += child.textContent ?? "";
+      continue;
+    }
+    if (child.nodeType !== Node.ELEMENT_NODE) continue;
+    const childElement = child;
+    const tag = childElement.tagName.toLowerCase();
+    if (tag === "rt" || tag === "rp") continue;
+    base += childElement.textContent ?? "";
+  }
+  return base;
+}
+class RubyNode extends ElementNode {
+  constructor(reading, key) {
+    super(key);
+    __publicField(this, "__reading");
+    this.__reading = reading;
+  }
+  static getType() {
+    return "ruby";
+  }
+  static clone(node) {
+    return new RubyNode(node.__reading, node.__key);
+  }
+  static importJSON(serializedNode) {
+    return $createRubyNode(serializedNode.reading ?? "");
+  }
+  exportJSON() {
+    return {
+      ...super.exportJSON(),
+      type: "ruby",
+      reading: this.__reading,
+      version: 1
+    };
+  }
+  static importDOM() {
+    return {
+      ruby: () => ({
+        conversion: (domNode) => {
+          if (!(domNode instanceof HTMLElement)) return null;
+          const reading = domNode.querySelector("rt")?.textContent ?? "";
+          const baseText = readBaseTextFromRuby(domNode);
+          const node = $createRubyNode(reading);
+          if (baseText) {
+            node.append($createTextNode(baseText));
+          }
+          return { node };
+        },
+        priority: 2
+      })
+    };
+  }
+  exportDOM() {
+    const ruby = document.createElement("ruby");
+    ruby.className = `${semanticClassNames.ruby} ${sharedStyles.ruby}`;
+    const baseText = this.getTextContent();
+    if (baseText) {
+      ruby.append(baseText);
+    }
+    if (this.__reading) {
+      const rt = document.createElement("rt");
+      rt.className = `${semanticClassNames.rubyRt} ${sharedStyles.rubyRt}`;
+      rt.textContent = this.__reading;
+      ruby.append(rt);
+    }
+    return { element: ruby };
+  }
+  createDOM(_config) {
+    const span = document.createElement("span");
+    span.className = `${semanticClassNames.ruby} ${sharedStyles.ruby}`;
+    if (this.__reading) {
+      span.dataset.ruby = this.__reading;
+    }
+    return span;
+  }
+  updateDOM(prevNode, dom) {
+    if (prevNode.__reading !== this.__reading) {
+      if (this.__reading) {
+        dom.dataset.ruby = this.__reading;
+      } else {
+        delete dom.dataset.ruby;
+      }
+    }
+    return false;
+  }
+  canInsertTextBefore() {
+    return true;
+  }
+  canInsertTextAfter() {
+    return true;
+  }
+  isInline() {
+    return true;
+  }
+  getReading() {
+    return this.getLatest().__reading;
+  }
+  setReading(reading) {
+    const writable = this.getWritable();
+    writable.__reading = reading;
+  }
+}
+function $createRubyNode(reading) {
+  return new RubyNode(reading);
+}
+function $isRubyNode(node) {
+  return node instanceof RubyNode;
+}
+function VideoRenderer({ src, poster, width, height }) {
+  return /* @__PURE__ */ jsx("figure", { className: "rich-video", children: /* @__PURE__ */ jsx(
+    "video",
+    {
+      controls: true,
+      height,
+      poster,
+      preload: "metadata",
+      src,
+      style: { maxWidth: "100%", height: "auto" },
+      width
+    }
+  ) });
+}
+const _VideoNode = class _VideoNode extends DecoratorNode {
+  constructor(payload, key) {
+    super(key);
+    __publicField(this, "__src");
+    __publicField(this, "__poster");
+    __publicField(this, "__width");
+    __publicField(this, "__height");
+    this.__src = payload.src;
+    this.__poster = payload.poster;
+    this.__width = payload.width;
+    this.__height = payload.height;
+  }
+  static getType() {
+    return "video";
+  }
+  static clone(node) {
+    return new _VideoNode(
+      {
+        src: node.__src,
+        poster: node.__poster,
+        width: node.__width,
+        height: node.__height
+      },
+      node.__key
+    );
+  }
+  createDOM(_config) {
+    const div = document.createElement("div");
+    div.className = "rich-video-wrapper";
+    return div;
+  }
+  updateDOM() {
+    return false;
+  }
+  isInline() {
+    return false;
+  }
+  static importJSON(serializedNode) {
+    return $createVideoNode({
+      src: serializedNode.src,
+      poster: serializedNode.poster,
+      width: serializedNode.width,
+      height: serializedNode.height
+    });
+  }
+  exportJSON() {
+    return {
+      ...super.exportJSON(),
+      type: "video",
+      src: this.__src,
+      poster: this.__poster,
+      width: this.__width,
+      height: this.__height,
+      version: 1
+    };
+  }
+  getSrc() {
+    return this.getLatest().__src;
+  }
+  setSrc(src) {
+    const writable = this.getWritable();
+    writable.__src = src;
+  }
+  decorate(_editor, _config) {
+    return createRendererDecoration("Video", VideoRenderer, {
+      src: this.__src,
+      poster: this.__poster,
+      width: this.__width,
+      height: this.__height
+    });
+  }
+};
+__publicField(_VideoNode, "commandItems", [
+  {
+    title: "Video",
+    icon: createElement(Video, { size: 20 }),
+    description: "Embed a video",
+    keywords: ["video", "media", "mp4"],
+    section: "MEDIA",
+    placement: ["slash", "toolbar"],
+    group: "insert",
+    onSelect: (editor) => {
+      editor.update(() => {
+        $insertNodes([$createVideoNode({ src: "" })]);
+      });
+    }
+  }
+]);
+let VideoNode = _VideoNode;
+function $createVideoNode(payload) {
+  return new VideoNode(payload);
+}
+const builtinNodes = [
+  HeadingNode,
+  QuoteNode,
+  ListNode,
+  ListItemNode,
+  LinkNode,
+  AutoLinkNode,
+  HorizontalRuleNode,
+  TableNode,
+  TableCellNode,
+  TableRowNode,
+  CodeNode
+];
+const customNodes = [
+  SpoilerNode,
+  MentionNode,
+  KaTeXInlineNode,
+  KaTeXBlockNode,
+  ImageNode,
+  AlertQuoteNode,
+  CodeBlockNode,
+  FootnoteNode,
+  FootnoteSectionNode,
+  VideoNode,
+  LinkCardNode,
+  CommentNode,
+  DetailsNode,
+  GridContainerNode,
+  BannerNode,
+  MermaidNode,
+  RubyNode,
+  TagNode
+];
+const allNodes = [...builtinNodes, ...customNodes];
+export {
+  $createCommentNode as $,
+  BANNER_LABELS as B,
+  CommentNode as C,
+  DetailsNode as D,
+  FootnoteSectionNode as F,
+  GridContainerNode as G,
+  LinkCardNode as L,
+  RubyNode as R,
+  VideoNode as V,
+  $createFootnoteSectionNode as a,
+  $createGridContainerNode as b,
+  $createLinkCardNode as c,
+  $createRubyNode as d,
+  $isCommentNode as e,
+  $isFootnoteSectionNode as f,
+  $isGridContainerNode as g,
+  $isLinkCardNode as h,
+  $isRubyNode as i,
+  BANNER_TYPES as j,
+  allNodes as k,
+  builtinNodes as l,
+  customNodes as m,
+  ColorSchemeProvider as n,
+  $isBannerNode as o,
+  BannerRenderer as p,
+  BannerNode as q,
+  normalizeBannerType as r,
+  $isCodeBlockNode as s,
+  CodeBlockRenderer as t,
+  useColorScheme as u,
+  CodeBlockNode as v,
+  $createCommentPlaceholderNode as w,
+  $createDetailsNode as x
+};