@haklex/rich-editor 0.0.1

package/dist/RichEditor-DeRWrU51.js

@@ -0,0 +1,1125 @@
+import { jsxs, Fragment, jsx } from "react/jsx-runtime";
+import { W as $isAlertQuoteNode, X as RendererWrapper, Y as AlertRenderer, Z as AlertQuoteNode, _ as $isBannerNode, a0 as BannerRenderer, a1 as BannerNode, a2 as normalizeBannerType, a3 as $isCodeBlockNode, a4 as CodeBlockRenderer, a5 as CodeBlockNode, S as useFootnoteDefinitions, s as FootnoteSectionNode, k as $isGridContainerNode, G as GridContainerNode, e as editorTheme, N as NESTED_EDITOR_NODES, b as builtinNodes, a6 as SpoilerNode, a7 as MentionNode, t as KaTeXInlineNode, K as KaTeXBlockNode, a8 as ImageNode, a9 as FootnoteNode, aa as TaskListItemNode, ab as VideoNode, L as LinkCardNode, ac as DetailsNode, M as MermaidNode, ad as $createAlertQuoteNode, ae as $createImageNode, af as $createKaTeXInlineNode, ag as $createKaTeXBlockNode, ah as $createBannerNode, ai as $createDetailsNode, aj as $isDetailsNode, ak as $createFootnoteNode, al as $isFootnoteNode, j as $isFootnoteSectionNode, $ as $createFootnoteSectionNode, m as $isKaTeXInlineNode, l as $isKaTeXBlockNode, am as $createMentionNode, an as $isMentionNode, ao as $createSpoilerNode, ap as $isSpoilerNode, aq as $createTaskListItemNode, ar as $isTaskListItemNode, i as $createMermaidNode, d as clsx, P as PortalThemeProvider, C as ColorSchemeProvider, R as RendererConfigProvider, F as FootnotePlugin, g as getVariantClass } from "./utils-CctLX9nj.js";
+import { LexicalComposer } from "@lexical/react/LexicalComposer";
+import { LexicalErrorBoundary } from "@lexical/react/LexicalErrorBoundary";
+import { HistoryPlugin } from "@lexical/react/LexicalHistoryPlugin";
+import { LinkPlugin } from "@lexical/react/LexicalLinkPlugin";
+import { ListPlugin } from "@lexical/react/LexicalListPlugin";
+import { RichTextPlugin } from "@lexical/react/LexicalRichTextPlugin";
+import { TabIndentationPlugin } from "@lexical/react/LexicalTabIndentationPlugin";
+import { TablePlugin } from "@lexical/react/LexicalTablePlugin";
+import { useCallback, createElement, useState, useEffect, useRef } from "react";
+import { useLexicalComposerContext } from "@lexical/react/LexicalComposerContext";
+import { ContentEditable as ContentEditable$1 } from "@lexical/react/LexicalContentEditable";
+import { LexicalNestedComposer } from "@lexical/react/LexicalNestedComposer";
+import { $getNodeByKey, $nodesOfType, $getRoot, createEditor, createCommand, $insertNodes, COMMAND_PRIORITY_EDITOR, $createParagraphNode, $createTextNode, KEY_ENTER_COMMAND, COMMAND_PRIORITY_HIGH } from "lexical";
+import { LayoutGrid, Plus, Minus } from "lucide-react";
+import { createLinkMatcherWithRegExp, registerAutoLink } from "@lexical/link";
+import { MarkdownShortcutPlugin } from "@lexical/react/LexicalMarkdownShortcutPlugin";
+import { TRANSFORMERS } from "@lexical/markdown";
+import { $isQuoteNode } from "@lexical/rich-text";
+function AlertEditDecorator({
+  nodeKey,
+  alertType,
+  contentEditor
+}) {
+  const [editor] = useLexicalComposerContext();
+  const editable = editor.isEditable();
+  const handleTypeChange = useCallback(
+    (newType) => {
+      editor.update(() => {
+        const node = $getNodeByKey(nodeKey);
+        if ($isAlertQuoteNode(node)) {
+          node.setAlertType(newType);
+        }
+      });
+    },
+    [editor, nodeKey]
+  );
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx(
+      RendererWrapper,
+      {
+        rendererKey: "Alert",
+        defaultRenderer: AlertRenderer,
+        props: {
+          type: alertType,
+          editable,
+          onTypeChange: editable ? handleTypeChange : void 0
+        }
+      }
+    ),
+    /* @__PURE__ */ jsx("div", { className: "rich-alert-content", children: /* @__PURE__ */ jsxs(LexicalNestedComposer, { initialEditor: contentEditor, children: [
+      /* @__PURE__ */ jsx(
+        RichTextPlugin,
+        {
+          contentEditable: /* @__PURE__ */ jsx(
+            ContentEditable$1,
+            {
+              className: "rich-alert-content-editable",
+              style: { outline: "none" },
+              "aria-placeholder": "",
+              placeholder: /* @__PURE__ */ jsx("span", { style: { display: "none" } })
+            }
+          ),
+          ErrorBoundary: LexicalErrorBoundary
+        }
+      ),
+      /* @__PURE__ */ jsx(ListPlugin, {}),
+      /* @__PURE__ */ jsx(LinkPlugin, {})
+    ] }) })
+  ] });
+}
+class AlertQuoteEditNode extends AlertQuoteNode {
+  static clone(node) {
+    return new AlertQuoteEditNode(
+      node.__alertType,
+      node.__contentEditor,
+      node.__key
+    );
+  }
+  static importJSON(serializedNode) {
+    const node = new AlertQuoteEditNode(serializedNode.alertType);
+    if (serializedNode.content) {
+      const editorState = node.__contentEditor.parseEditorState(
+        serializedNode.content
+      );
+      node.__contentEditor.setEditorState(editorState);
+    }
+    return node;
+  }
+  decorate(_editor, _config) {
+    return createElement(AlertEditDecorator, {
+      nodeKey: this.__key,
+      alertType: this.__alertType,
+      contentEditor: this.__contentEditor
+    });
+  }
+}
+function BannerEditDecorator({
+  nodeKey,
+  bannerType,
+  contentEditor
+}) {
+  const [editor] = useLexicalComposerContext();
+  const editable = editor.isEditable();
+  const handleTypeChange = useCallback(
+    (newType) => {
+      editor.update(() => {
+        const node = $getNodeByKey(nodeKey);
+        if ($isBannerNode(node)) {
+          node.setBannerType(newType);
+        }
+      });
+    },
+    [editor, nodeKey]
+  );
+  return /* @__PURE__ */ jsxs("div", { className: "rich-banner-inner", children: [
+    /* @__PURE__ */ jsx(
+      RendererWrapper,
+      {
+        rendererKey: "Banner",
+        defaultRenderer: BannerRenderer,
+        props: {
+          type: bannerType,
+          editable,
+          onTypeChange: editable ? handleTypeChange : void 0
+        }
+      }
+    ),
+    /* @__PURE__ */ jsx("div", { className: "rich-banner-content", children: /* @__PURE__ */ jsxs(LexicalNestedComposer, { initialEditor: contentEditor, children: [
+      /* @__PURE__ */ jsx(
+        RichTextPlugin,
+        {
+          contentEditable: /* @__PURE__ */ jsx(
+            ContentEditable$1,
+            {
+              className: "rich-banner-content-editable",
+              style: { outline: "none" },
+              "aria-placeholder": "",
+              placeholder: /* @__PURE__ */ jsx("span", { style: { display: "none" } })
+            }
+          ),
+          ErrorBoundary: LexicalErrorBoundary
+        }
+      ),
+      /* @__PURE__ */ jsx(ListPlugin, {}),
+      /* @__PURE__ */ jsx(LinkPlugin, {})
+    ] }) })
+  ] });
+}
+class BannerEditNode extends BannerNode {
+  static clone(node) {
+    return new BannerEditNode(
+      node.__bannerType,
+      node.__contentEditor,
+      node.__key
+    );
+  }
+  static importJSON(serializedNode) {
+    const legacy = serializedNode;
+    const bannerType = normalizeBannerType(serializedNode.bannerType);
+    const node = new BannerEditNode(bannerType);
+    if (serializedNode.content) {
+      const editorState = node.__contentEditor.parseEditorState(
+        serializedNode.content
+      );
+      node.__contentEditor.setEditorState(editorState);
+    } else if (legacy.children) {
+      const content = {
+        root: {
+          children: legacy.children,
+          direction: null,
+          format: "",
+          indent: 0,
+          type: "root",
+          version: 1
+        }
+      };
+      const editorState = node.__contentEditor.parseEditorState(content);
+      node.__contentEditor.setEditorState(editorState);
+    }
+    return node;
+  }
+  decorate(_editor, _config) {
+    return createElement(BannerEditDecorator, {
+      nodeKey: this.__key,
+      bannerType: this.__bannerType,
+      contentEditor: this.__contentEditor
+    });
+  }
+}
+function CodeBlockEditDecorator({
+  nodeKey,
+  code,
+  language
+}) {
+  const [editor] = useLexicalComposerContext();
+  const editable = editor.isEditable();
+  const handleCodeChange = useCallback(
+    (newCode) => {
+      editor.update(() => {
+        const node = $getNodeByKey(nodeKey);
+        if ($isCodeBlockNode(node)) {
+          node.setCode(newCode);
+        }
+      });
+    },
+    [editor, nodeKey]
+  );
+  return /* @__PURE__ */ jsx(
+    RendererWrapper,
+    {
+      rendererKey: "CodeBlock",
+      defaultRenderer: CodeBlockRenderer,
+      props: {
+        code,
+        language,
+        editable,
+        onCodeChange: editable ? handleCodeChange : void 0
+      }
+    }
+  );
+}
+class CodeBlockEditNode extends CodeBlockNode {
+  static clone(node) {
+    return new CodeBlockEditNode(node.__code, node.__language, node.__key);
+  }
+  static importJSON(serializedNode) {
+    return new CodeBlockEditNode(serializedNode.code, serializedNode.language);
+  }
+  decorate(_editor, _config) {
+    return createElement(CodeBlockEditDecorator, {
+      nodeKey: this.__key,
+      code: this.__code,
+      language: this.__language
+    });
+  }
+}
+function FootnoteSectionEditRenderer({
+  definitions
+}) {
+  const [editor] = useLexicalComposerContext();
+  const { displayNumberMap } = useFootnoteDefinitions();
+  const sortedEntries = Object.entries(definitions).sort(
+    ([a], [b]) => (displayNumberMap[a] ?? 0) - (displayNumberMap[b] ?? 0)
+  );
+  const handleContentChange = useCallback(
+    (identifier, newContent) => {
+      editor.update(() => {
+        const sectionNodes = $nodesOfType(FootnoteSectionNode);
+        if (sectionNodes.length > 0) {
+          sectionNodes[0].setDefinition(identifier, newContent);
+        }
+      });
+    },
+    [editor]
+  );
+  const handleRemove = useCallback(
+    (identifier) => {
+      editor.update(() => {
+        const sectionNodes = $nodesOfType(FootnoteSectionNode);
+        if (sectionNodes.length > 0) {
+          sectionNodes[0].removeDefinition(identifier);
+        }
+      });
+    },
+    [editor]
+  );
+  if (sortedEntries.length === 0) return null;
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: "rich-footnote-section-content rich-footnote-section-edit",
+      role: "doc-endnotes",
+      children: [
+        /* @__PURE__ */ jsx("hr", { className: "rich-footnote-section-divider" }),
+        /* @__PURE__ */ jsx("ol", { className: "rich-footnote-section-list", children: sortedEntries.map(([identifier, content]) => {
+          const displayNum = displayNumberMap[identifier] ?? identifier;
+          return /* @__PURE__ */ jsxs(
+            "li",
+            {
+              id: `footnote-${identifier}`,
+              className: "rich-footnote-section-item rich-footnote-section-item-edit",
+              children: [
+                /* @__PURE__ */ jsxs("span", { className: "rich-footnote-section-item-num", children: [
+                  displayNum,
+                  "."
+                ] }),
+                /* @__PURE__ */ jsx(
+                  "input",
+                  {
+                    type: "text",
+                    className: "rich-footnote-section-item-input",
+                    value: content,
+                    onChange: (e) => handleContentChange(identifier, e.target.value),
+                    placeholder: `Footnote content for [^${identifier}]`
+                  }
+                ),
+                /* @__PURE__ */ jsx(
+                  "button",
+                  {
+                    type: "button",
+                    className: "rich-footnote-section-item-remove",
+                    onClick: () => handleRemove(identifier),
+                    "aria-label": `Remove footnote ${identifier}`,
+                    children: "×"
+                  }
+                )
+              ]
+            },
+            identifier
+          );
+        }) })
+      ]
+    }
+  );
+}
+class FootnoteSectionEditNode extends FootnoteSectionNode {
+  static getType() {
+    return "footnote-section";
+  }
+  static clone(node) {
+    return new FootnoteSectionEditNode({ ...node.__definitions }, node.__key);
+  }
+  static importJSON(serializedNode) {
+    return new FootnoteSectionEditNode(serializedNode.definitions);
+  }
+  decorate(_editor, _config) {
+    return createElement(FootnoteSectionEditRenderer, {
+      definitions: this.__definitions,
+      nodeKey: this.__key
+    });
+  }
+}
+const COL_OPTIONS = [1, 2, 3, 4];
+function GridEditDecorator({
+  nodeKey,
+  cols: initialCols,
+  gap,
+  cellEditors
+}) {
+  const [editor] = useLexicalComposerContext();
+  const [currentCols, setCurrentCols] = useState(initialCols);
+  useEffect(() => {
+    return editor.registerUpdateListener(({ editorState }) => {
+      editorState.read(() => {
+        const node = $getNodeByKey(nodeKey);
+        if ($isGridContainerNode(node)) {
+          setCurrentCols(node.getCols());
+        }
+      });
+    });
+  }, [editor, nodeKey]);
+  const handleSetCols = useCallback(
+    (cols) => {
+      editor.update(() => {
+        const node = $getNodeByKey(nodeKey);
+        if ($isGridContainerNode(node)) {
+          node.setCols(cols);
+        }
+      });
+    },
+    [editor, nodeKey]
+  );
+  const handleAddRow = useCallback(() => {
+    editor.update(() => {
+      const node = $getNodeByKey(nodeKey);
+      if ($isGridContainerNode(node)) {
+        node.addCells(node.getCols());
+      }
+    });
+  }, [editor, nodeKey]);
+  const handleRemoveRow = useCallback(() => {
+    editor.update(() => {
+      const node = $getNodeByKey(nodeKey);
+      if (!$isGridContainerNode(node)) return;
+      const cols = node.getCols();
+      const editors = node.getCellEditors();
+      if (editors.length <= cols) return;
+      const lastRow = editors.slice(-cols);
+      const allEmpty = lastRow.every(
+        (cellEditor) => cellEditor.getEditorState().read(() => $getRoot().getTextContentSize() === 0)
+      );
+      if (!allEmpty) return;
+      node.removeCells(cols);
+    });
+  }, [editor, nodeKey]);
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsxs(
+      "div",
+      {
+        className: "rich-grid-toolbar",
+        onMouseDown: (e) => e.preventDefault(),
+        children: [
+          /* @__PURE__ */ jsx("span", { className: "rich-grid-toolbar-icon", children: /* @__PURE__ */ jsx(LayoutGrid, { size: 14 }) }),
+          COL_OPTIONS.map((n) => /* @__PURE__ */ jsx(
+            "button",
+            {
+              type: "button",
+              className: `rich-grid-col-btn${n === currentCols ? " rich-grid-col-btn-active" : ""}`,
+              onClick: () => handleSetCols(n),
+              "aria-label": `${n} columns`,
+              children: n
+            },
+            n
+          )),
+          /* @__PURE__ */ jsx("div", { className: "rich-grid-toolbar-divider" }),
+          /* @__PURE__ */ jsx(
+            "button",
+            {
+              type: "button",
+              className: "rich-grid-action-btn",
+              onClick: handleAddRow,
+              "aria-label": "Add row",
+              children: /* @__PURE__ */ jsx(Plus, { size: 14 })
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            "button",
+            {
+              type: "button",
+              className: "rich-grid-action-btn",
+              onClick: handleRemoveRow,
+              "aria-label": "Remove row",
+              children: /* @__PURE__ */ jsx(Minus, { size: 14 })
+            }
+          )
+        ]
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      "div",
+      {
+        className: "rich-grid-inner",
+        style: {
+          gridTemplateColumns: `repeat(${currentCols}, 1fr)`,
+          gap
+        },
+        children: cellEditors.map((cellEditor, i) => /* @__PURE__ */ jsx("div", { className: "rich-grid-cell", children: /* @__PURE__ */ jsxs(LexicalNestedComposer, { initialEditor: cellEditor, children: [
+          /* @__PURE__ */ jsx(
+            RichTextPlugin,
+            {
+              contentEditable: /* @__PURE__ */ jsx(
+                ContentEditable$1,
+                {
+                  className: "rich-grid-cell-editable",
+                  "aria-placeholder": "",
+                  placeholder: /* @__PURE__ */ jsx("span", { style: { display: "none" } })
+                }
+              ),
+              ErrorBoundary: LexicalErrorBoundary
+            }
+          ),
+          /* @__PURE__ */ jsx(ListPlugin, {}),
+          /* @__PURE__ */ jsx(LinkPlugin, {})
+        ] }) }, i))
+      }
+    )
+  ] });
+}
+function createCellEditor() {
+  return createEditor({
+    namespace: "GridCell",
+    nodes: NESTED_EDITOR_NODES,
+    theme: editorTheme,
+    onError: (error) => {
+      console.error("[GridCell]", error);
+    }
+  });
+}
+class GridEditNode extends GridContainerNode {
+  static clone(node) {
+    return new GridEditNode(
+      node.__cols,
+      node.__gap,
+      [...node.__cellEditors],
+      node.__key
+    );
+  }
+  static importJSON(serializedNode) {
+    const legacy = serializedNode;
+    const cols = legacy.cols || 2;
+    const rawGap = legacy.gap;
+    const gap = typeof rawGap === "number" ? `${rawGap}px` : rawGap;
+    const node = new GridEditNode(cols, gap);
+    if (legacy.cells && legacy.cells.length > 0) {
+      const editors = legacy.cells.map((cellState) => {
+        const editor = createCellEditor();
+        const editorState = editor.parseEditorState(cellState);
+        editor.setEditorState(editorState);
+        return editor;
+      });
+      node.__cellEditors = editors;
+    } else if (legacy.children) {
+      const { children } = legacy;
+      const editors = children.map((child) => {
+        const editor = createCellEditor();
+        const content = {
+          root: {
+            children: [child],
+            direction: null,
+            format: "",
+            indent: 0,
+            type: "root",
+            version: 1
+          }
+        };
+        const editorState = editor.parseEditorState(content);
+        editor.setEditorState(editorState);
+        return editor;
+      });
+      node.__cellEditors = editors;
+    }
+    return node;
+  }
+  decorate(_editor, _config) {
+    return createElement(GridEditDecorator, {
+      nodeKey: this.__key,
+      cols: this.__cols,
+      gap: this.__gap,
+      cellEditors: this.__cellEditors
+    });
+  }
+}
+const customEditNodes = [
+  SpoilerNode,
+  MentionNode,
+  KaTeXInlineNode,
+  KaTeXBlockNode,
+  ImageNode,
+  AlertQuoteEditNode,
+  CodeBlockEditNode,
+  FootnoteNode,
+  FootnoteSectionEditNode,
+  TaskListItemNode,
+  VideoNode,
+  LinkCardNode,
+  DetailsNode,
+  GridEditNode,
+  BannerEditNode,
+  MermaidNode
+];
+const allEditNodes = [
+  ...builtinNodes,
+  ...customEditNodes
+];
+let _resolvedEditNodes = null;
+function setResolvedEditNodes(nodes) {
+  _resolvedEditNodes = nodes;
+}
+function getResolvedEditNodes() {
+  return _resolvedEditNodes ?? allEditNodes;
+}
+const INSERT_ALERT_COMMAND = createCommand("INSERT_ALERT");
+function AlertPlugin() {
+  const [editor] = useLexicalComposerContext();
+  useEffect(() => {
+    return editor.registerCommand(
+      INSERT_ALERT_COMMAND,
+      (alertType) => {
+        $insertNodes([$createAlertQuoteNode(alertType)]);
+        return true;
+      },
+      COMMAND_PRIORITY_EDITOR
+    );
+  }, [editor]);
+  return null;
+}
+function AutoFocusPlugin() {
+  const [editor] = useLexicalComposerContext();
+  useEffect(() => {
+    editor.focus();
+  }, [editor]);
+  return null;
+}
+const URL_REGEX = /https?:\/\/(?:www\.)?[-\w@:%.+~#=]{1,256}\.[a-zA-Z]{2}[-\w()@:%+.~#?&/=]*/;
+const EMAIL_REGEX = /(?:[\w.%+-]+@[a-z0-9.-]+\.[a-z]{2,})/i;
+const URL_MATCHER = createLinkMatcherWithRegExp(URL_REGEX);
+const EMAIL_MATCHER = createLinkMatcherWithRegExp(
+  EMAIL_REGEX,
+  (text) => `mailto:${text}`
+);
+const DEFAULT_MATCHERS = [URL_MATCHER, EMAIL_MATCHER];
+function AutoLinkPlugin({ matchers }) {
+  const [editor] = useLexicalComposerContext();
+  useEffect(() => {
+    return registerAutoLink(editor, {
+      matchers: matchers ?? DEFAULT_MATCHERS,
+      changeHandlers: []
+    });
+  }, [editor, matchers]);
+  return null;
+}
+function EditorRefPlugin({ onEditorReady }) {
+  const [editor] = useLexicalComposerContext();
+  const callbackRef = useRef(onEditorReady);
+  callbackRef.current = onEditorReady;
+  useEffect(() => {
+    callbackRef.current?.(editor);
+    return () => callbackRef.current?.(null);
+  }, [editor]);
+  return null;
+}
+const INSERT_IMAGE_COMMAND = createCommand(
+  "INSERT_IMAGE_COMMAND"
+);
+function ImagePlugin() {
+  const [editor] = useLexicalComposerContext();
+  useEffect(() => {
+    return editor.registerCommand(
+      INSERT_IMAGE_COMMAND,
+      (payload) => {
+        const imageNode = $createImageNode(payload);
+        $insertNodes([imageNode]);
+        return true;
+      },
+      COMMAND_PRIORITY_EDITOR
+    );
+  }, [editor]);
+  return null;
+}
+const INSERT_KATEX_INLINE_COMMAND = createCommand(
+  "INSERT_KATEX_INLINE"
+);
+const INSERT_KATEX_BLOCK_COMMAND = createCommand("INSERT_KATEX_BLOCK");
+function KaTeXPlugin() {
+  const [editor] = useLexicalComposerContext();
+  useEffect(() => {
+    const unregisterInline = editor.registerCommand(
+      INSERT_KATEX_INLINE_COMMAND,
+      (equation) => {
+        const node = $createKaTeXInlineNode(equation);
+        $insertNodes([node]);
+        return true;
+      },
+      COMMAND_PRIORITY_EDITOR
+    );
+    const unregisterBlock = editor.registerCommand(
+      INSERT_KATEX_BLOCK_COMMAND,
+      (equation) => {
+        const node = $createKaTeXBlockNode(equation);
+        $insertNodes([node]);
+        return true;
+      },
+      COMMAND_PRIORITY_EDITOR
+    );
+    return () => {
+      unregisterInline();
+      unregisterBlock();
+    };
+  }, [editor]);
+  return null;
+}
+const ALERT_TYPE_MAP = {
+  NOTE: "note",
+  TIP: "tip",
+  IMPORTANT: "important",
+  WARNING: "warning",
+  CAUTION: "caution"
+};
+const GIT_ALERT_TRANSFORMER = {
+  dependencies: [AlertQuoteNode],
+  export: (node) => {
+    if (!$isAlertQuoteNode(node)) {
+      if ($isQuoteNode(node)) {
+        const lines2 = node.getTextContent().split("\n");
+        return lines2.map((line) => `> ${line}`).join("\n");
+      }
+      return null;
+    }
+    const type = node.getAlertType();
+    const typeKey = Object.keys(ALERT_TYPE_MAP).find(
+      (key) => ALERT_TYPE_MAP[key] === type
+    );
+    const textContent = node.getTextContent();
+    const lines = textContent.split("\n");
+    const firstLine = `> [!${typeKey || "NOTE"}]`;
+    const restLines = lines.map((line) => `> ${line}`);
+    return [firstLine, ...restLines].join("\n");
+  },
+  regExp: /^>\s*\[!(NOTE|TIP|IMPORTANT|WARNING|CAUTION)\]\s*$/,
+  replace: (parentNode, children, match) => {
+    const typeKey = match[1];
+    const alertType = ALERT_TYPE_MAP[typeKey] || "note";
+    const alertNode = $createAlertQuoteNode(alertType);
+    const serializedChildren = children.map((child) => child.exportJSON());
+    const content = {
+      root: {
+        children: [
+          {
+            type: "paragraph",
+            children: serializedChildren,
+            direction: null,
+            format: "",
+            indent: 0,
+            textFormat: 0,
+            textStyle: "",
+            version: 1
+          }
+        ],
+        direction: null,
+        format: "",
+        indent: 0,
+        type: "root",
+        version: 1
+      }
+    };
+    const editorState = alertNode.getContentEditor().parseEditorState(content);
+    alertNode.getContentEditor().setEditorState(editorState);
+    parentNode.replace(alertNode);
+  },
+  type: "element"
+};
+const BANNER_TYPE_MAP = {
+  note: "note",
+  info: "note",
+  tip: "tip",
+  success: "tip",
+  important: "important",
+  warning: "warning",
+  warn: "warning",
+  error: "caution",
+  danger: "caution",
+  caution: "caution"
+};
+const CONTAINER_TRANSFORMER = {
+  dependencies: [BannerNode, DetailsNode],
+  export: (node) => {
+    if ($isBannerNode(node)) {
+      const type = node.getBannerType();
+      const content = node.getTextContent();
+      return `::: ${type}
+${content}
+:::`;
+    }
+    if ($isDetailsNode(node)) {
+      const summary = node.getSummary();
+      const content = node.getTextContent();
+      return `::: details{summary="${summary}"}
+${content}
+:::`;
+    }
+    return null;
+  },
+  regExp: /^:::\s*(\w+)(?:\{([^}]*)\})?\s*$/,
+  replace: (parentNode, children, match) => {
+    const type = match[1];
+    const params = match[2];
+    if (type in BANNER_TYPE_MAP) {
+      const bannerType = BANNER_TYPE_MAP[type];
+      const banner = $createBannerNode(bannerType);
+      const serializedChildren = children.map(
+        (child) => child.exportJSON()
+      );
+      const content = {
+        root: {
+          children: [
+            {
+              type: "paragraph",
+              children: serializedChildren,
+              direction: null,
+              format: "",
+              indent: 0,
+              textFormat: 0,
+              textStyle: "",
+              version: 1
+            }
+          ],
+          direction: null,
+          format: "",
+          indent: 0,
+          type: "root",
+          version: 1
+        }
+      };
+      const editorState = banner.getContentEditor().parseEditorState(content);
+      banner.getContentEditor().setEditorState(editorState);
+      parentNode.replace(banner);
+      return;
+    }
+    if (type === "details") {
+      const summaryMatch = params?.match(/summary="([^"]*)"/);
+      const summary = summaryMatch ? summaryMatch[1] : "Details";
+      const details = $createDetailsNode(summary);
+      children.forEach((child) => {
+        details.append(child);
+      });
+      parentNode.replace(details);
+      return;
+    }
+    const paragraph = $createParagraphNode();
+    paragraph.append($createTextNode(`::: ${type}`));
+    children.forEach((child) => {
+      paragraph.append(child);
+    });
+    parentNode.replace(paragraph);
+  },
+  type: "element"
+};
+const FOOTNOTE_TRANSFORMER = {
+  dependencies: [FootnoteNode],
+  export: (node) => {
+    if (!$isFootnoteNode(node)) return null;
+    return `[^${node.getIdentifier()}]`;
+  },
+  importRegExp: /\[\^(\w+)\]/,
+  regExp: /\[\^(\w+)\]$/,
+  replace: (textNode, match) => {
+    const footnoteNode = $createFootnoteNode(match[1]);
+    textNode.replace(footnoteNode);
+  },
+  trigger: "]",
+  type: "text-match"
+};
+const FOOTNOTE_SECTION_TRANSFORMER = {
+  dependencies: [FootnoteSectionNode],
+  export: (node) => {
+    if (!$isFootnoteSectionNode(node)) return null;
+    const definitions = node.getDefinitions();
+    return Object.entries(definitions).map(([id, content]) => `[^${id}]: ${content}`).join("\n");
+  },
+  regExp: /^\[\^(\w+)\]:\s+(.+)$/,
+  replace: (parentNode, _children, match) => {
+    const identifier = match[1];
+    const content = match[2];
+    const root = parentNode.getParent();
+    if (root) {
+      const children = root.getChildren();
+      for (const child of children) {
+        if ($isFootnoteSectionNode(child)) {
+          child.setDefinition(identifier, content);
+          parentNode.remove();
+          return;
+        }
+      }
+    }
+    const sectionNode = $createFootnoteSectionNode({ [identifier]: content });
+    parentNode.replace(sectionNode);
+  },
+  type: "element"
+};
+const INSERT_TRANSFORMER = {
+  format: ["underline"],
+  tag: "++",
+  type: "text-format"
+};
+const KATEX_INLINE_TRANSFORMER = {
+  dependencies: [KaTeXInlineNode],
+  export: (node) => {
+    if (!$isKaTeXInlineNode(node)) return null;
+    return `$${node.getEquation()}$`;
+  },
+  importRegExp: /\$([^$\n]+)\$/,
+  regExp: /\$([^$\n]+)\$$/,
+  replace: (textNode, match) => {
+    const katexNode = $createKaTeXInlineNode(match[1]);
+    textNode.replace(katexNode);
+  },
+  trigger: "$",
+  type: "text-match"
+};
+const KATEX_BLOCK_TRANSFORMER = {
+  dependencies: [KaTeXBlockNode],
+  export: (node) => {
+    if (!$isKaTeXBlockNode(node)) return null;
+    return `$$${node.getEquation()}$$`;
+  },
+  importRegExp: /\$\$([^$]+)\$\$/,
+  regExp: /\$\$([^$]+)\$\$$/,
+  replace: (textNode, match) => {
+    const katexNode = $createKaTeXBlockNode(match[1]);
+    textNode.replace(katexNode);
+  },
+  trigger: "$",
+  type: "text-match"
+};
+const MENTION_TRANSFORMER = {
+  dependencies: [MentionNode],
+  export: (node) => {
+    if (!$isMentionNode(node)) return null;
+    const displayName = node.getDisplayName();
+    const base = `{${node.getPlatform()}@${node.getHandle()}}`;
+    return displayName ? `[${displayName}]${base}` : base;
+  },
+  importRegExp: /(?:\[([^\]]+)\])?\{(\w+)@(\w[\w.-]*)\}/,
+  regExp: /(?:\[([^\]]+)\])?\{(\w+)@(\w[\w.-]*)\}$/,
+  replace: (textNode, match) => {
+    const displayName = match[1] || void 0;
+    const mentionNode = $createMentionNode(match[2], match[3], displayName);
+    textNode.replace(mentionNode);
+  },
+  trigger: "}",
+  type: "text-match"
+};
+const SPOILER_TRANSFORMER = {
+  dependencies: [SpoilerNode],
+  export: (node) => {
+    if (!$isSpoilerNode(node)) return null;
+    const textContent = node.getTextContent();
+    return `||${textContent}||`;
+  },
+  importRegExp: /\|\|(.+?)\|\|/,
+  regExp: /\|\|(.+?)\|\|$/,
+  replace: (textNode, match) => {
+    const spoilerNode = $createSpoilerNode();
+    spoilerNode.append($createTextNode(match[1]));
+    textNode.replace(spoilerNode);
+  },
+  trigger: "|",
+  type: "text-match"
+};
+const TASK_LIST_ITEM_TRANSFORMER = {
+  dependencies: [TaskListItemNode],
+  export: (node) => {
+    if (!$isTaskListItemNode(node)) return null;
+    const checked = node.getChecked();
+    const checkbox = checked ? "[x]" : "[ ]";
+    const textContent = node.getTextContent();
+    return `- ${checkbox} ${textContent}`;
+  },
+  regExp: /^(\s*)- \[([ x])\]\s/i,
+  replace: (parentNode, children, match) => {
+    const isChecked = match[2].toLowerCase() === "x";
+    const taskItem = $createTaskListItemNode(isChecked);
+    children.forEach((child) => {
+      taskItem.append(child);
+    });
+    parentNode.replace(taskItem);
+  },
+  type: "element"
+};
+const ALL_TRANSFORMERS = [
+  // Inline transformers
+  SPOILER_TRANSFORMER,
+  MENTION_TRANSFORMER,
+  FOOTNOTE_TRANSFORMER,
+  INSERT_TRANSFORMER,
+  KATEX_INLINE_TRANSFORMER,
+  // Block transformers (order matters - more specific first)
+  FOOTNOTE_SECTION_TRANSFORMER,
+  CONTAINER_TRANSFORMER,
+  GIT_ALERT_TRANSFORMER,
+  TASK_LIST_ITEM_TRANSFORMER,
+  KATEX_BLOCK_TRANSFORMER,
+  ...TRANSFORMERS
+];
+function MarkdownShortcutsPlugin() {
+  return /* @__PURE__ */ jsx(MarkdownShortcutPlugin, { transformers: ALL_TRANSFORMERS });
+}
+const INSERT_MERMAID_COMMAND = createCommand("INSERT_MERMAID");
+function MermaidPlugin() {
+  const [editor] = useLexicalComposerContext();
+  useEffect(() => {
+    return editor.registerCommand(
+      INSERT_MERMAID_COMMAND,
+      (diagram) => {
+        const node = $createMermaidNode(diagram);
+        $insertNodes([node]);
+        return true;
+      },
+      COMMAND_PRIORITY_EDITOR
+    );
+  }, [editor]);
+  return null;
+}
+function OnChangePlugin({ onChange, debounceMs }) {
+  const [editor] = useLexicalComposerContext();
+  const timerRef = useRef(void 0);
+  const onChangeRef = useRef(onChange);
+  onChangeRef.current = onChange;
+  useEffect(() => {
+    const unregister = editor.registerUpdateListener(({ editorState }) => {
+      const fn = onChangeRef.current;
+      if (!fn) return;
+      if (debounceMs && debounceMs > 0) {
+        clearTimeout(timerRef.current);
+        timerRef.current = setTimeout(() => {
+          fn(editorState.toJSON());
+        }, debounceMs);
+      } else {
+        fn(editorState.toJSON());
+      }
+    });
+    return () => {
+      clearTimeout(timerRef.current);
+      unregister();
+    };
+  }, [editor, debounceMs]);
+  return null;
+}
+function SubmitShortcutPlugin({ onSubmit }) {
+  const [editor] = useLexicalComposerContext();
+  useEffect(() => {
+    if (!onSubmit) return;
+    return editor.registerCommand(
+      KEY_ENTER_COMMAND,
+      (event) => {
+        if (event && (event.metaKey || event.ctrlKey)) {
+          event.preventDefault();
+          onSubmit();
+          return true;
+        }
+        return false;
+      },
+      COMMAND_PRIORITY_HIGH
+    );
+  }, [editor, onSubmit]);
+  return null;
+}
+function ContentEditable({
+  className,
+  placeholder
+}) {
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      className: "rich-editor__content-wrapper",
+      style: { position: "relative" },
+      children: /* @__PURE__ */ jsx(
+        ContentEditable$1,
+        {
+          className: clsx("rich-editor__content", className),
+          style: {
+            outline: "none",
+            minHeight: "100px",
+            padding: "12px 16px"
+          },
+          "aria-placeholder": placeholder ?? "",
+          placeholder: /* @__PURE__ */ jsx(
+            "div",
+            {
+              className: "rich-editor__placeholder",
+              style: {
+                position: "absolute",
+                top: "12px",
+                left: "16px",
+                color: "var(--rich-editor-text-secondary, #999)",
+                pointerEvents: "none",
+                userSelect: "none",
+                display: placeholder ? void 0 : "none"
+              },
+              children: placeholder
+            }
+          )
+        }
+      )
+    }
+  );
+}
+function RichEditor({
+  initialValue,
+  onChange,
+  variant = "article",
+  theme = "light",
+  placeholder = "Write something...",
+  onSubmit,
+  autoFocus = false,
+  className,
+  contentClassName,
+  actions,
+  onEditorReady,
+  extraNodes,
+  rendererConfig,
+  debounceMs,
+  children
+}) {
+  const nodes = extraNodes ? [...allEditNodes, ...extraNodes] : allEditNodes;
+  setResolvedEditNodes(nodes);
+  const initialConfig = {
+    namespace: "RichEditor",
+    theme: editorTheme,
+    nodes,
+    editable: true,
+    onError: (error) => {
+      console.error("[RichEditor]", error);
+    },
+    ...initialValue ? { editorState: JSON.stringify(initialValue) } : {}
+  };
+  const variantClass = getVariantClass(variant, theme);
+  return /* @__PURE__ */ jsx(PortalThemeProvider, { className: variantClass, children: /* @__PURE__ */ jsx(ColorSchemeProvider, { colorScheme: theme, children: /* @__PURE__ */ jsx(RendererConfigProvider, { config: rendererConfig, mode: "editor", children: /* @__PURE__ */ jsx(LexicalComposer, { initialConfig, children: /* @__PURE__ */ jsx(FootnotePlugin, { children: /* @__PURE__ */ jsxs("div", { className: clsx("rich-editor", variantClass, className), children: [
+    /* @__PURE__ */ jsx(
+      RichTextPlugin,
+      {
+        contentEditable: /* @__PURE__ */ jsx(
+          ContentEditable,
+          {
+            className: contentClassName,
+            placeholder
+          }
+        ),
+        ErrorBoundary: LexicalErrorBoundary
+      }
+    ),
+    /* @__PURE__ */ jsx(HistoryPlugin, {}),
+    /* @__PURE__ */ jsx(ListPlugin, {}),
+    /* @__PURE__ */ jsx(LinkPlugin, {}),
+    /* @__PURE__ */ jsx(TabIndentationPlugin, {}),
+    /* @__PURE__ */ jsx(TablePlugin, {}),
+    /* @__PURE__ */ jsx(MarkdownShortcutsPlugin, {}),
+    /* @__PURE__ */ jsx(OnChangePlugin, { onChange, debounceMs }),
+    /* @__PURE__ */ jsx(SubmitShortcutPlugin, { onSubmit }),
+    /* @__PURE__ */ jsx(ImagePlugin, {}),
+    /* @__PURE__ */ jsx(KaTeXPlugin, {}),
+    /* @__PURE__ */ jsx(AlertPlugin, {}),
+    /* @__PURE__ */ jsx(MermaidPlugin, {}),
+    /* @__PURE__ */ jsx(AutoLinkPlugin, {}),
+    /* @__PURE__ */ jsx(EditorRefPlugin, { onEditorReady }),
+    autoFocus && /* @__PURE__ */ jsx(AutoFocusPlugin, {}),
+    children,
+    actions && /* @__PURE__ */ jsx("div", { className: "rich-editor__actions", children: actions })
+  ] }) }) }) }) }) });
+}
+export {
+  FootnoteSectionEditNode as F,
+  INSERT_ALERT_COMMAND as I,
+  RichEditor as R,
+  allEditNodes as a,
+  INSERT_IMAGE_COMMAND as b,
+  customEditNodes as c,
+  INSERT_KATEX_BLOCK_COMMAND as d,
+  INSERT_KATEX_INLINE_COMMAND as e,
+  INSERT_MERMAID_COMMAND as f,
+  getResolvedEditNodes as g,
+  setResolvedEditNodes as s
+};