@zuilib/text-editor 0.1.0 → 0.2.0

package/dist/index.js

@@ -1,5 +1,5 @@
 // src/MarkdownEditor.tsx
-import { useCallback as useCallback3, useEffect as useEffect7, useMemo, useRef as useRef3, useState as useState3 } from "react";
+import { useCallback as useCallback5, useEffect as useEffect9, useMemo, useRef as useRef4, useState as useState5 } from "react";
 import { LexicalComposer } from "@lexical/react/LexicalComposer";
 import { RichTextPlugin } from "@lexical/react/LexicalRichTextPlugin";
 import { ContentEditable } from "@lexical/react/LexicalContentEditable";
@@ -12,7 +12,7 @@ import { MarkdownShortcutPlugin } from "@lexical/react/LexicalMarkdownShortcutPl
 import { AutoFocusPlugin } from "@lexical/react/LexicalAutoFocusPlugin";
 import { TablePlugin } from "@lexical/react/LexicalTablePlugin";
 import { CHECK_LIST, CODE, TRANSFORMERS as TRANSFORMERS2 } from "@lexical/markdown";
-import { useLexicalComposerContext as useLexicalComposerContext7 } from "@lexical/react/LexicalComposerContext";
+import { useLexicalComposerContext as useLexicalComposerContext9 } from "@lexical/react/LexicalComposerContext";
 import { HeadingNode, QuoteNode } from "@lexical/rich-text";
 import { ListItemNode, ListNode as ListNode2 } from "@lexical/list";
 import { CodeHighlightNode, CodeNode } from "@lexical/code";
@@ -166,9 +166,146 @@ function CodeHighlightPlugin() {
   return null;
 }
 
-// src/plugins/MarkdownSyncPlugin.tsx
-import { useEffect as useEffect4, useRef } from "react";
+// src/plugins/FoldingPlugin.tsx
+import {
+  useCallback,
+  useEffect as useEffect4,
+  useRef,
+  useState
+} from "react";
+import { $getRoot, $getSelection as $getSelection2, $isRangeSelection as $isRangeSelection2 } from "lexical";
 import { useLexicalComposerContext as useLexicalComposerContext4 } from "@lexical/react/LexicalComposerContext";
+import { $isHeadingNode } from "@lexical/rich-text";
+import { jsx } from "react/jsx-runtime";
+var HEADING_LEVELS = {
+  h1: 1,
+  h2: 2,
+  h3: 3,
+  h4: 4,
+  h5: 5,
+  h6: 6
+};
+function FoldingPlugin() {
+  const [editor] = useLexicalComposerContext4();
+  const [foldedKeys, setFoldedKeys] = useState(/* @__PURE__ */ new Set());
+  const [buttons, setButtons] = useState([]);
+  const foldedRef = useRef(foldedKeys);
+  foldedRef.current = foldedKeys;
+  const sync = useCallback(() => {
+    editor.getEditorState().read(() => {
+      const children = $getRoot().getChildren();
+      const folded = foldedRef.current;
+      const hidden = /* @__PURE__ */ new Set();
+      const headings = [];
+      for (let i = 0; i < children.length; i++) {
+        const node = children[i];
+        if (!$isHeadingNode(node)) continue;
+        const level = HEADING_LEVELS[node.getTag()] ?? 6;
+        const isFolded = folded.has(node.getKey());
+        headings.push({ key: node.getKey(), folded: isFolded });
+        if (!isFolded) continue;
+        for (let j = i + 1; j < children.length; j++) {
+          const sibling = children[j];
+          if ($isHeadingNode(sibling) && (HEADING_LEVELS[sibling.getTag()] ?? 6) <= level) {
+            break;
+          }
+          hidden.add(sibling.getKey());
+        }
+      }
+      const selection = $getSelection2();
+      if ($isRangeSelection2(selection)) {
+        const topLevel = selection.anchor.getNode().getTopLevelElement();
+        if (topLevel && hidden.has(topLevel.getKey())) {
+          let node = topLevel.getPreviousSibling();
+          while (node) {
+            if ($isHeadingNode(node) && folded.has(node.getKey())) {
+              const unfoldKey = node.getKey();
+              setFoldedKeys((prev) => {
+                const next = new Set(prev);
+                next.delete(unfoldKey);
+                return next;
+              });
+              return;
+            }
+            node = node.getPreviousSibling();
+          }
+        }
+      }
+      for (const child of children) {
+        const element = editor.getElementByKey(child.getKey());
+        if (!element) continue;
+        const shouldHide = hidden.has(child.getKey());
+        if (shouldHide) {
+          element.style.display = "none";
+        } else if (element.style.display === "none") {
+          element.style.display = "";
+        }
+      }
+      setButtons(
+        headings.map(({ key, folded: isFolded }) => {
+          const element = editor.getElementByKey(key);
+          element?.classList.toggle("zui-heading-folded", isFolded);
+          return {
+            key,
+            folded: isFolded,
+            top: element?.offsetTop ?? 0,
+            height: element?.offsetHeight ?? 0
+          };
+        })
+      );
+    });
+  }, [editor]);
+  useEffect4(() => {
+    sync();
+    const unregister = editor.registerUpdateListener(sync);
+    const rootElement = editor.getRootElement();
+    const observer = typeof ResizeObserver !== "undefined" ? new ResizeObserver(sync) : null;
+    if (rootElement && observer) observer.observe(rootElement);
+    return () => {
+      unregister();
+      observer?.disconnect();
+    };
+  }, [editor, sync, foldedKeys]);
+  const toggle = useCallback((key) => {
+    setFoldedKeys((prev) => {
+      const next = new Set(prev);
+      if (next.has(key)) next.delete(key);
+      else next.add(key);
+      return next;
+    });
+  }, []);
+  return /* @__PURE__ */ jsx("div", { className: "zui-text-editor-fold-gutter", children: buttons.map(({ key, folded, top, height }) => /* @__PURE__ */ jsx(
+    "button",
+    {
+      type: "button",
+      className: `zui-text-editor-fold ${folded ? "is-folded" : ""}`,
+      style: { top: top + Math.max(0, (Math.min(height, 44) - 18) / 2) },
+      title: folded ? "Expand section" : "Collapse section",
+      "aria-label": folded ? "Expand section" : "Collapse section",
+      "aria-expanded": !folded,
+      onClick: () => toggle(key),
+      children: /* @__PURE__ */ jsx(
+        "svg",
+        {
+          viewBox: "0 0 20 20",
+          width: "12",
+          height: "12",
+          fill: "none",
+          stroke: "currentColor",
+          strokeWidth: "2",
+          strokeLinecap: "round",
+          strokeLinejoin: "round",
+          children: /* @__PURE__ */ jsx("path", { d: "M6 8l4 4 4-4" })
+        }
+      )
+    },
+    key
+  )) });
+}
+
+// src/plugins/MarkdownSyncPlugin.tsx
+import { useEffect as useEffect5, useRef as useRef2 } from "react";
+import { useLexicalComposerContext as useLexicalComposerContext5 } from "@lexical/react/LexicalComposerContext";
 import {
   $convertFromMarkdownString,
   $convertToMarkdownString
@@ -178,11 +315,11 @@ function MarkdownSyncPlugin({
   onChange,
   transformers
 }) {
-  const [editor] = useLexicalComposerContext4();
-  const lastMarkdownRef = useRef("");
-  const onChangeRef = useRef(onChange);
+  const [editor] = useLexicalComposerContext5();
+  const lastMarkdownRef = useRef2("");
+  const onChangeRef = useRef2(onChange);
   onChangeRef.current = onChange;
-  useEffect4(() => {
+  useEffect5(() => {
     if (initialMarkdown && initialMarkdown !== lastMarkdownRef.current) {
       lastMarkdownRef.current = initialMarkdown;
       editor.update(() => {
@@ -190,7 +327,7 @@ function MarkdownSyncPlugin({
       }, { tag: "initial-load" });
     }
   }, [editor, initialMarkdown]);
-  useEffect4(() => {
+  useEffect5(() => {
     return editor.registerUpdateListener(
       ({ editorState, dirtyElements, dirtyLeaves, tags }) => {
         if (dirtyElements.size === 0 && dirtyLeaves.size === 0) return;
@@ -205,14 +342,127 @@ function MarkdownSyncPlugin({
   return null;
 }
 
-// src/plugins/ToolbarPlugin.tsx
+// src/plugins/OutlinePlugin.tsx
 import { useCallback as useCallback2, useEffect as useEffect6, useState as useState2 } from "react";
+import { useLexicalComposerContext as useLexicalComposerContext6 } from "@lexical/react/LexicalComposerContext";
+import {
+  TableOfContentsPlugin
+} from "@lexical/react/LexicalTableOfContentsPlugin";
+import { jsx as jsx2, jsxs } from "react/jsx-runtime";
+var INDENT_PER_LEVEL = {
+  h1: 0,
+  h2: 1,
+  h3: 2,
+  h4: 3,
+  h5: 4,
+  h6: 5
+};
+function OutlinePlugin() {
+  const [editor] = useLexicalComposerContext6();
+  const [collapsed, setCollapsed] = useState2(false);
+  const [activeKey, setActiveKey] = useState2(null);
+  useEffect6(() => {
+    const rootElement = editor.getRootElement();
+    const scroller = rootElement?.closest(".zui-text-editor");
+    if (!rootElement || !(scroller instanceof HTMLElement)) return;
+    let frame = 0;
+    const updateActive = () => {
+      cancelAnimationFrame(frame);
+      frame = requestAnimationFrame(() => {
+        const headings = rootElement.querySelectorAll(
+          "h1, h2, h3, h4, h5, h6"
+        );
+        const threshold = scroller.scrollTop + 80;
+        let current = null;
+        for (const el of headings) {
+          if (el.offsetTop <= threshold) {
+            current = el.getAttribute("data-outline-key");
+          }
+        }
+        setActiveKey(current);
+      });
+    };
+    updateActive();
+    scroller.addEventListener("scroll", updateActive, { passive: true });
+    const unregister = editor.registerUpdateListener(updateActive);
+    return () => {
+      cancelAnimationFrame(frame);
+      scroller.removeEventListener("scroll", updateActive);
+      unregister();
+    };
+  }, [editor]);
+  const scrollTo = useCallback2(
+    (key) => {
+      editor.getEditorState().read(() => {
+        const element = editor.getElementByKey(key);
+        element?.scrollIntoView({ behavior: "smooth", block: "start" });
+      });
+    },
+    [editor]
+  );
+  return /* @__PURE__ */ jsx2(TableOfContentsPlugin, { children: (entries) => {
+    for (const [key] of entries) {
+      editor.getElementByKey(key)?.setAttribute("data-outline-key", key);
+    }
+    return /* @__PURE__ */ jsxs(
+      "div",
+      {
+        className: `zui-text-editor-outline ${collapsed ? "is-collapsed" : ""}`,
+        children: [
+          /* @__PURE__ */ jsx2(
+            "button",
+            {
+              type: "button",
+              className: "zui-text-editor-outline-toggle",
+              title: collapsed ? "Show outline" : "Hide outline",
+              "aria-label": collapsed ? "Show outline" : "Hide outline",
+              "aria-expanded": !collapsed,
+              onClick: () => setCollapsed((c) => !c),
+              children: /* @__PURE__ */ jsx2(
+                "svg",
+                {
+                  viewBox: "0 0 20 20",
+                  width: "14",
+                  height: "14",
+                  fill: "none",
+                  stroke: "currentColor",
+                  strokeWidth: "1.8",
+                  strokeLinecap: "round",
+                  children: /* @__PURE__ */ jsx2("path", { d: "M4 5h12M4 10h8M4 15h10" })
+                }
+              )
+            }
+          ),
+          !collapsed && /* @__PURE__ */ jsxs("nav", { className: "zui-text-editor-outline-list", "aria-label": "Table of contents", children: [
+            entries.length === 0 && /* @__PURE__ */ jsx2("div", { className: "zui-text-editor-outline-empty", children: "No headings" }),
+            entries.map(([key, text, tag]) => /* @__PURE__ */ jsx2(
+              "button",
+              {
+                type: "button",
+                className: `zui-text-editor-outline-item ${key === activeKey ? "is-active" : ""}`,
+                style: {
+                  paddingLeft: `${0.5 + INDENT_PER_LEVEL[tag] * 0.75}rem`
+                },
+                onClick: () => scrollTo(key),
+                children: text || "Untitled"
+              },
+              key
+            ))
+          ] })
+        ]
+      }
+    );
+  } });
+}
+
+// src/plugins/ToolbarPlugin.tsx
+import { useCallback as useCallback4, useEffect as useEffect8, useState as useState4 } from "react";
 import {
-  $getSelection as $getSelection2,
-  $isRangeSelection as $isRangeSelection2,
+  $getSelection as $getSelection3,
+  $isRangeSelection as $isRangeSelection3,
   FORMAT_TEXT_COMMAND
 } from "lexical";
-import { useLexicalComposerContext as useLexicalComposerContext6 } from "@lexical/react/LexicalComposerContext";
+import { useLexicalComposerContext as useLexicalComposerContext8 } from "@lexical/react/LexicalComposerContext";
 import { INSERT_TABLE_COMMAND } from "@lexical/table";
 import { $insertNodeToNearestRoot } from "@lexical/utils";
 
@@ -224,13 +474,13 @@ import {
 
 // src/components/DrawingCanvas.tsx
 import {
-  useCallback,
-  useEffect as useEffect5,
-  useRef as useRef2,
-  useState
+  useCallback as useCallback3,
+  useEffect as useEffect7,
+  useRef as useRef3,
+  useState as useState3
 } from "react";
 import { $getNodeByKey as $getNodeByKey2 } from "lexical";
-import { useLexicalComposerContext as useLexicalComposerContext5 } from "@lexical/react/LexicalComposerContext";
+import { useLexicalComposerContext as useLexicalComposerContext7 } from "@lexical/react/LexicalComposerContext";
 import { useLexicalEditable } from "@lexical/react/useLexicalEditable";
 
 // src/components/drawingTypes.ts
@@ -541,7 +791,7 @@ function resolveBindings(shapes) {
 }
 
 // src/components/DrawingCanvas.tsx
-import { jsx, jsxs } from "react/jsx-runtime";
+import { jsx as jsx3, jsxs as jsxs2 } from "react/jsx-runtime";
 import { createElement } from "react";
 var MIN_HEIGHT = 120;
 var MAX_HEIGHT = 900;
@@ -575,7 +825,7 @@ function BoxTexts({
     opacity: 0.35,
     style: { userSelect: "none", pointerEvents: "none" }
   };
-  return /* @__PURE__ */ jsxs("g", { children: [
+  return /* @__PURE__ */ jsxs2("g", { children: [
     hideField !== "label" && (shape.label ? labelLines.map((line, i) => /* @__PURE__ */ createElement(
       "text",
       {
@@ -588,7 +838,7 @@ function BoxTexts({
         opacity: 0.85
       },
       line
-    )) : showHints && /* @__PURE__ */ jsx("text", { ...hint, x: cx, y: b.y + SMALL_FONT_SIZE + 7, fontSize: SMALL_FONT_SIZE, children: "Label" })),
+    )) : showHints && /* @__PURE__ */ jsx3("text", { ...hint, x: cx, y: b.y + SMALL_FONT_SIZE + 7, fontSize: SMALL_FONT_SIZE, children: "Label" })),
     hideField !== "text" && (shape.text ? mainLines.map((line, i) => /* @__PURE__ */ createElement(
       "text",
       {
@@ -599,7 +849,7 @@ function BoxTexts({
         fontSize: FONT_SIZE
       },
       line
-    )) : showHints && /* @__PURE__ */ jsx("text", { ...hint, x: cx, y: mainStart, fontSize: FONT_SIZE, children: "Text" })),
+    )) : showHints && /* @__PURE__ */ jsx3("text", { ...hint, x: cx, y: mainStart, fontSize: FONT_SIZE, children: "Text" })),
     hideField !== "footer" && (shape.footer ? footerLines.map((line, i) => /* @__PURE__ */ createElement(
       "text",
       {
@@ -611,7 +861,7 @@ function BoxTexts({
         opacity: 0.65
       },
       line
-    )) : showHints && /* @__PURE__ */ jsx("text", { ...hint, x: cx, y: b.y + b.h - 9, fontSize: SMALL_FONT_SIZE, children: "Footer" }))
+    )) : showHints && /* @__PURE__ */ jsx3("text", { ...hint, x: cx, y: b.y + b.h - 9, fontSize: SMALL_FONT_SIZE, children: "Footer" }))
   ] });
 }
 function ShapeView({
@@ -628,8 +878,8 @@ function ShapeView({
   switch (shape.type) {
     case "rect": {
       const b = bbox(shape);
-      return /* @__PURE__ */ jsxs("g", { children: [
-        /* @__PURE__ */ jsx(
+      return /* @__PURE__ */ jsxs2("g", { children: [
+        /* @__PURE__ */ jsx3(
           "rect",
           {
             ...common,
@@ -641,13 +891,13 @@ function ShapeView({
             fill: shape.fill
           }
         ),
-        /* @__PURE__ */ jsx(BoxTexts, { shape, hideField, showHints })
+        /* @__PURE__ */ jsx3(BoxTexts, { shape, hideField, showHints })
       ] });
     }
     case "ellipse": {
       const b = bbox(shape);
-      return /* @__PURE__ */ jsxs("g", { children: [
-        /* @__PURE__ */ jsx(
+      return /* @__PURE__ */ jsxs2("g", { children: [
+        /* @__PURE__ */ jsx3(
           "ellipse",
           {
             ...common,
@@ -658,13 +908,13 @@ function ShapeView({
             fill: shape.fill
           }
         ),
-        /* @__PURE__ */ jsx(BoxTexts, { shape, hideField, showHints })
+        /* @__PURE__ */ jsx3(BoxTexts, { shape, hideField, showHints })
       ] });
     }
     case "triangle":
     case "pentagon":
-      return /* @__PURE__ */ jsxs("g", { children: [
-        /* @__PURE__ */ jsx(
+      return /* @__PURE__ */ jsxs2("g", { children: [
+        /* @__PURE__ */ jsx3(
           "polygon",
           {
             ...common,
@@ -672,12 +922,12 @@ function ShapeView({
             fill: shape.fill
           }
         ),
-        /* @__PURE__ */ jsx(BoxTexts, { shape, hideField, showHints })
+        /* @__PURE__ */ jsx3(BoxTexts, { shape, hideField, showHints })
       ] });
     case "line":
     case "arrow":
-      return /* @__PURE__ */ jsxs("g", { children: [
-        /* @__PURE__ */ jsx(
+      return /* @__PURE__ */ jsxs2("g", { children: [
+        /* @__PURE__ */ jsx3(
           "path",
           {
             ...common,
@@ -685,10 +935,10 @@ function ShapeView({
             fill: "none"
           }
         ),
-        shape.text && hideField !== "text" && /* @__PURE__ */ jsx(ConnectorLabel, { shape })
+        shape.text && hideField !== "text" && /* @__PURE__ */ jsx3(ConnectorLabel, { shape })
       ] });
     case "text":
-      return /* @__PURE__ */ jsx(
+      return /* @__PURE__ */ jsx3(
         "text",
         {
           x: shape.x,
@@ -697,7 +947,7 @@ function ShapeView({
           fontSize: FONT_SIZE,
           fontFamily: "ui-sans-serif, system-ui, sans-serif",
           style: { userSelect: "none", whiteSpace: "pre" },
-          children: (shape.text ?? "").split("\n").map((line, i) => /* @__PURE__ */ jsx("tspan", { x: shape.x, dy: i === 0 ? 0 : FONT_SIZE * 1.35, children: line }, i))
+          children: (shape.text ?? "").split("\n").map((line, i) => /* @__PURE__ */ jsx3("tspan", { x: shape.x, dy: i === 0 ? 0 : FONT_SIZE * 1.35, children: line }, i))
         }
       );
   }
@@ -709,8 +959,8 @@ function ConnectorLabel({ shape }) {
   const { x: midX, y: midY } = connectorMidpoint(shape);
   const lineH = CONNECTOR_FONT_SIZE * LINE_HEIGHT;
   const startY = midY - (lines.length - 1) * lineH / 2 + CONNECTOR_FONT_SIZE * 0.35;
-  return /* @__PURE__ */ jsxs("g", { children: [
-    /* @__PURE__ */ jsx(
+  return /* @__PURE__ */ jsxs2("g", { children: [
+    /* @__PURE__ */ jsx3(
       "rect",
       {
         x: midX - size.w / 2 - 5,
@@ -722,7 +972,7 @@ function ConnectorLabel({ shape }) {
         opacity: 0.92
       }
     ),
-    lines.map((line, i) => /* @__PURE__ */ jsx(
+    lines.map((line, i) => /* @__PURE__ */ jsx3(
       "text",
       {
         x: midX,
@@ -739,20 +989,20 @@ function ConnectorLabel({ shape }) {
   ] });
 }
 var TOOL_ICONS = {
-  select: /* @__PURE__ */ jsx("path", { d: "M4 2l12 6.5-5.2 1.6L8 16z", fill: "currentColor", stroke: "none" }),
-  rect: /* @__PURE__ */ jsx("rect", { x: "3", y: "4.5", width: "14", height: "11", rx: "2" }),
-  ellipse: /* @__PURE__ */ jsx("ellipse", { cx: "10", cy: "10", rx: "7", ry: "5.5" }),
-  triangle: /* @__PURE__ */ jsx("path", { d: "M10 3.5L17 16.5H3z", strokeLinejoin: "round" }),
-  pentagon: /* @__PURE__ */ jsx("path", { d: "M10 3L16.8 8.1L14.2 16.2H5.8L3.2 8.1z", strokeLinejoin: "round" }),
-  arrow: /* @__PURE__ */ jsxs("g", { children: [
-    /* @__PURE__ */ jsx("path", { d: "M4 16L16 4" }),
-    /* @__PURE__ */ jsx("path", { d: "M9 4h7v7" })
+  select: /* @__PURE__ */ jsx3("path", { d: "M4 2l12 6.5-5.2 1.6L8 16z", fill: "currentColor", stroke: "none" }),
+  rect: /* @__PURE__ */ jsx3("rect", { x: "3", y: "4.5", width: "14", height: "11", rx: "2" }),
+  ellipse: /* @__PURE__ */ jsx3("ellipse", { cx: "10", cy: "10", rx: "7", ry: "5.5" }),
+  triangle: /* @__PURE__ */ jsx3("path", { d: "M10 3.5L17 16.5H3z", strokeLinejoin: "round" }),
+  pentagon: /* @__PURE__ */ jsx3("path", { d: "M10 3L16.8 8.1L14.2 16.2H5.8L3.2 8.1z", strokeLinejoin: "round" }),
+  arrow: /* @__PURE__ */ jsxs2("g", { children: [
+    /* @__PURE__ */ jsx3("path", { d: "M4 16L16 4" }),
+    /* @__PURE__ */ jsx3("path", { d: "M9 4h7v7" })
   ] }),
-  line: /* @__PURE__ */ jsx("path", { d: "M4 16L16 4" }),
-  text: /* @__PURE__ */ jsxs("g", { children: [
-    /* @__PURE__ */ jsx("path", { d: "M4 5V3.5h12V5" }),
-    /* @__PURE__ */ jsx("path", { d: "M10 3.5V16.5" }),
-    /* @__PURE__ */ jsx("path", { d: "M7 16.5h6" })
+  line: /* @__PURE__ */ jsx3("path", { d: "M4 16L16 4" }),
+  text: /* @__PURE__ */ jsxs2("g", { children: [
+    /* @__PURE__ */ jsx3("path", { d: "M4 5V3.5h12V5" }),
+    /* @__PURE__ */ jsx3("path", { d: "M10 3.5V16.5" }),
+    /* @__PURE__ */ jsx3("path", { d: "M7 16.5h6" })
   ] })
 };
 function bindEndpoints(shape, shapes) {
@@ -776,23 +1026,23 @@ var TOOLS = [
   { tool: "text", label: "Text" }
 ];
 function DrawingCanvas({ nodeKey, data }) {
-  const [editor] = useLexicalComposerContext5();
+  const [editor] = useLexicalComposerContext7();
   const isEditable = useLexicalEditable();
-  const [shapes, setShapes] = useState(data.shapes);
-  const [height, setHeight] = useState(data.height);
-  const [tool, setTool] = useState("select");
-  const [selectedId, setSelectedId] = useState(null);
-  const [editingText, setEditingText] = useState(null);
-  const [stroke, setStroke] = useState(STROKE_COLORS[0]);
-  const [fill, setFill] = useState(FILL_COLORS[0]);
-  const svgRef = useRef2(null);
-  const dragRef = useRef2(null);
-  const lastCommittedRef = useRef2(serializeDrawingData(data));
-  const shapesRef = useRef2(shapes);
+  const [shapes, setShapes] = useState3(data.shapes);
+  const [height, setHeight] = useState3(data.height);
+  const [tool, setTool] = useState3("select");
+  const [selectedId, setSelectedId] = useState3(null);
+  const [editingText, setEditingText] = useState3(null);
+  const [stroke, setStroke] = useState3(STROKE_COLORS[0]);
+  const [fill, setFill] = useState3(FILL_COLORS[0]);
+  const svgRef = useRef3(null);
+  const dragRef = useRef3(null);
+  const lastCommittedRef = useRef3(serializeDrawingData(data));
+  const shapesRef = useRef3(shapes);
   shapesRef.current = shapes;
-  const heightRef = useRef2(height);
+  const heightRef = useRef3(height);
   heightRef.current = height;
-  useEffect5(() => {
+  useEffect7(() => {
     const incoming = serializeDrawingData(data);
     if (incoming !== lastCommittedRef.current) {
       lastCommittedRef.current = incoming;
@@ -802,7 +1052,7 @@ function DrawingCanvas({ nodeKey, data }) {
       setEditingText(null);
     }
   }, [data]);
-  const commit = useCallback(
+  const commit = useCallback3(
     (nextShapes, nextHeight) => {
       const payload = {
         version: 1,
@@ -821,7 +1071,7 @@ function DrawingCanvas({ nodeKey, data }) {
     },
     [editor, nodeKey]
   );
-  const updateShapes = useCallback(
+  const updateShapes = useCallback3(
     (updater, options) => {
       setShapes((prev) => {
         const next = resolveBindings(updater(prev));
@@ -831,17 +1081,17 @@ function DrawingCanvas({ nodeKey, data }) {
     },
     [commit]
   );
-  const getPoint = useCallback((e) => {
+  const getPoint = useCallback3((e) => {
     const rect = svgRef.current?.getBoundingClientRect();
     if (!rect) return { x: 0, y: 0 };
     return { x: e.clientX - rect.left, y: e.clientY - rect.top };
   }, []);
   const selectedShape = shapes.find((s) => s.id === selectedId) ?? null;
-  const startTextEditing = useCallback((id, field) => {
+  const startTextEditing = useCallback3((id, field) => {
     setEditingText({ id, field });
     setSelectedId(id);
   }, []);
-  const handleBackgroundPointerDown = useCallback(
+  const handleBackgroundPointerDown = useCallback3(
     (e) => {
       if (!isEditable || editingText) return;
       if (e.button !== 0) return;
@@ -901,7 +1151,7 @@ function DrawingCanvas({ nodeKey, data }) {
       startTextEditing
     ]
   );
-  const handleShapePointerDown = useCallback(
+  const handleShapePointerDown = useCallback3(
     (e, shape) => {
       if (!isEditable || tool !== "select" || editingText) return;
       if (e.button !== 0) return;
@@ -920,7 +1170,7 @@ function DrawingCanvas({ nodeKey, data }) {
     },
     [isEditable, tool, editingText, getPoint, selectedId]
   );
-  const handleHandlePointerDown = useCallback(
+  const handleHandlePointerDown = useCallback3(
     (e, drag) => {
       if (!isEditable) return;
       if (e.button !== 0) return;
@@ -936,7 +1186,7 @@ function DrawingCanvas({ nodeKey, data }) {
     },
     [isEditable, updateShapes]
   );
-  const handlePointerMove = useCallback(
+  const handlePointerMove = useCallback3(
     (e) => {
       const drag = dragRef.current;
       if (!drag) return;
@@ -1027,7 +1277,7 @@ function DrawingCanvas({ nodeKey, data }) {
     },
     [getPoint, updateShapes]
   );
-  const handlePointerUp = useCallback(() => {
+  const handlePointerUp = useCallback3(() => {
     const drag = dragRef.current;
     dragRef.current = null;
     if (!drag) return;
@@ -1080,7 +1330,7 @@ function DrawingCanvas({ nodeKey, data }) {
     }
     updateShapes((prev) => prev.map(normalize), { commit: true });
   }, [commit, updateShapes, startTextEditing]);
-  const deleteSelected = useCallback(() => {
+  const deleteSelected = useCallback3(() => {
     if (!selectedId) return;
     setEditingText(null);
     setSelectedId(null);
@@ -1088,7 +1338,7 @@ function DrawingCanvas({ nodeKey, data }) {
       commit: true
     });
   }, [selectedId, updateShapes]);
-  const handleKeyDown = useCallback(
+  const handleKeyDown = useCallback3(
     (e) => {
       if (!isEditable || editingText) return;
       if ((e.key === "Delete" || e.key === "Backspace") && selectedId) {
@@ -1116,7 +1366,7 @@ function DrawingCanvas({ nodeKey, data }) {
       startTextEditing
     ]
   );
-  const applyStroke = useCallback(
+  const applyStroke = useCallback3(
     (color) => {
       setStroke(color);
       if (selectedId) {
@@ -1128,7 +1378,7 @@ function DrawingCanvas({ nodeKey, data }) {
     },
     [selectedId, updateShapes]
   );
-  const applyFill = useCallback(
+  const applyFill = useCallback3(
     (color) => {
       setFill(color);
       if (selectedId) {
@@ -1140,7 +1390,7 @@ function DrawingCanvas({ nodeKey, data }) {
     },
     [selectedId, updateShapes]
   );
-  const applyRouting = useCallback(
+  const applyRouting = useCallback3(
     (elbow) => {
       if (!selectedId) return;
       updateShapes(
@@ -1157,7 +1407,7 @@ function DrawingCanvas({ nodeKey, data }) {
     },
     [selectedId, updateShapes]
   );
-  const addWaypoint = useCallback(
+  const addWaypoint = useCallback3(
     (e, shapeId, segmentIndex, point) => {
       if (!isEditable) return;
       if (e.button !== 0) return;
@@ -1179,7 +1429,7 @@ function DrawingCanvas({ nodeKey, data }) {
     },
     [isEditable, updateShapes]
   );
-  const removeWaypoint = useCallback(
+  const removeWaypoint = useCallback3(
     (shapeId, index) => {
       updateShapes(
         (prev) => prev.map((s) => {
@@ -1192,7 +1442,7 @@ function DrawingCanvas({ nodeKey, data }) {
     },
     [updateShapes]
   );
-  const applyDirection = useCallback(
+  const applyDirection = useCallback3(
     (bidirectional) => {
       if (!selectedId) return;
       updateShapes(
@@ -1204,7 +1454,7 @@ function DrawingCanvas({ nodeKey, data }) {
     },
     [selectedId, updateShapes]
   );
-  const commitText = useCallback(
+  const commitText = useCallback3(
     (id, field, value) => {
       setEditingText(null);
       updateShapes(
@@ -1225,15 +1475,15 @@ function DrawingCanvas({ nodeKey, data }) {
   const editingShape = shapes.find((s) => s.id === editingText?.id) ?? null;
   const showFill = selectedShape != null ? isBoxType(selectedShape.type) : tool !== "select" && isBoxType(tool);
   const canvasCursor = tool === "select" ? "default" : tool === "text" ? "text" : "crosshair";
-  return /* @__PURE__ */ jsxs(
+  return /* @__PURE__ */ jsxs2(
     "div",
     {
       className: "zui-drawing-canvas",
       tabIndex: isEditable ? 0 : void 0,
       onKeyDown: handleKeyDown,
       children: [
-        isEditable && /* @__PURE__ */ jsxs("div", { className: "zui-drawing-toolbar", onPointerDown: (e) => e.stopPropagation(), children: [
-          /* @__PURE__ */ jsx("div", { className: "zui-drawing-toolbar-group", children: TOOLS.map(({ tool: t, label }) => /* @__PURE__ */ jsx(
+        isEditable && /* @__PURE__ */ jsxs2("div", { className: "zui-drawing-toolbar", onPointerDown: (e) => e.stopPropagation(), children: [
+          /* @__PURE__ */ jsx3("div", { className: "zui-drawing-toolbar-group", children: TOOLS.map(({ tool: t, label }) => /* @__PURE__ */ jsx3(
             "button",
             {
               type: "button",
@@ -1244,7 +1494,7 @@ function DrawingCanvas({ nodeKey, data }) {
                 setTool(t);
                 if (t !== "select") setSelectedId(null);
               },
-              children: /* @__PURE__ */ jsx(
+              children: /* @__PURE__ */ jsx3(
                 "svg",
                 {
                   viewBox: "0 0 20 20",
@@ -1261,9 +1511,9 @@ function DrawingCanvas({ nodeKey, data }) {
             },
             t
           )) }),
-          /* @__PURE__ */ jsxs("div", { className: "zui-drawing-toolbar-group", children: [
-            /* @__PURE__ */ jsx("span", { className: "zui-drawing-swatch-label", children: "Stroke" }),
-            STROKE_COLORS.map((color) => /* @__PURE__ */ jsx(
+          /* @__PURE__ */ jsxs2("div", { className: "zui-drawing-toolbar-group", children: [
+            /* @__PURE__ */ jsx3("span", { className: "zui-drawing-swatch-label", children: "Stroke" }),
+            STROKE_COLORS.map((color) => /* @__PURE__ */ jsx3(
               "button",
               {
                 type: "button",
@@ -1276,9 +1526,9 @@ function DrawingCanvas({ nodeKey, data }) {
               color
             ))
           ] }),
-          showFill && /* @__PURE__ */ jsxs("div", { className: "zui-drawing-toolbar-group", children: [
-            /* @__PURE__ */ jsx("span", { className: "zui-drawing-swatch-label", children: "Fill" }),
-            FILL_COLORS.map((color) => /* @__PURE__ */ jsx(
+          showFill && /* @__PURE__ */ jsxs2("div", { className: "zui-drawing-toolbar-group", children: [
+            /* @__PURE__ */ jsx3("span", { className: "zui-drawing-swatch-label", children: "Fill" }),
+            FILL_COLORS.map((color) => /* @__PURE__ */ jsx3(
               "button",
               {
                 type: "button",
@@ -1291,8 +1541,8 @@ function DrawingCanvas({ nodeKey, data }) {
               color
             ))
           ] }),
-          selectedShape && isConnectorType(selectedShape.type) && /* @__PURE__ */ jsxs("div", { className: "zui-drawing-toolbar-group", children: [
-            /* @__PURE__ */ jsx(
+          selectedShape && isConnectorType(selectedShape.type) && /* @__PURE__ */ jsxs2("div", { className: "zui-drawing-toolbar-group", children: [
+            /* @__PURE__ */ jsx3(
               "button",
               {
                 type: "button",
@@ -1300,7 +1550,7 @@ function DrawingCanvas({ nodeKey, data }) {
                 "aria-label": "Straight connector",
                 className: `zui-drawing-tool ${selectedShape.routing !== "elbow" ? "is-active" : ""}`,
                 onClick: () => applyRouting(false),
-                children: /* @__PURE__ */ jsx(
+                children: /* @__PURE__ */ jsx3(
                   "svg",
                   {
                     viewBox: "0 0 20 20",
@@ -1310,12 +1560,12 @@ function DrawingCanvas({ nodeKey, data }) {
                     stroke: "currentColor",
                     strokeWidth: "1.6",
                     strokeLinecap: "round",
-                    children: /* @__PURE__ */ jsx("path", { d: "M4 16L16 4" })
+                    children: /* @__PURE__ */ jsx3("path", { d: "M4 16L16 4" })
                   }
                 )
               }
             ),
-            /* @__PURE__ */ jsx(
+            /* @__PURE__ */ jsx3(
               "button",
               {
                 type: "button",
@@ -1323,7 +1573,7 @@ function DrawingCanvas({ nodeKey, data }) {
                 "aria-label": "Elbow connector",
                 className: `zui-drawing-tool ${selectedShape.routing === "elbow" ? "is-active" : ""}`,
                 onClick: () => applyRouting(true),
-                children: /* @__PURE__ */ jsx(
+                children: /* @__PURE__ */ jsx3(
                   "svg",
                   {
                     viewBox: "0 0 20 20",
@@ -1334,14 +1584,14 @@ function DrawingCanvas({ nodeKey, data }) {
                     strokeWidth: "1.6",
                     strokeLinecap: "round",
                     strokeLinejoin: "round",
-                    children: /* @__PURE__ */ jsx("path", { d: "M4 16v-6h12V4" })
+                    children: /* @__PURE__ */ jsx3("path", { d: "M4 16v-6h12V4" })
                   }
                 )
               }
             )
           ] }),
-          selectedShape?.type === "arrow" && /* @__PURE__ */ jsxs("div", { className: "zui-drawing-toolbar-group", children: [
-            /* @__PURE__ */ jsx(
+          selectedShape?.type === "arrow" && /* @__PURE__ */ jsxs2("div", { className: "zui-drawing-toolbar-group", children: [
+            /* @__PURE__ */ jsx3(
               "button",
               {
                 type: "button",
@@ -1349,7 +1599,7 @@ function DrawingCanvas({ nodeKey, data }) {
                 "aria-label": "One-way arrow",
                 className: `zui-drawing-tool ${!selectedShape.bidirectional ? "is-active" : ""}`,
                 onClick: () => applyDirection(false),
-                children: /* @__PURE__ */ jsx(
+                children: /* @__PURE__ */ jsx3(
                   "svg",
                   {
                     viewBox: "0 0 20 20",
@@ -1360,12 +1610,12 @@ function DrawingCanvas({ nodeKey, data }) {
                     strokeWidth: "1.6",
                     strokeLinecap: "round",
                     strokeLinejoin: "round",
-                    children: /* @__PURE__ */ jsx("path", { d: "M3 10h13M12 5.5L16.5 10L12 14.5" })
+                    children: /* @__PURE__ */ jsx3("path", { d: "M3 10h13M12 5.5L16.5 10L12 14.5" })
                   }
                 )
               }
             ),
-            /* @__PURE__ */ jsx(
+            /* @__PURE__ */ jsx3(
               "button",
               {
                 type: "button",
@@ -1373,7 +1623,7 @@ function DrawingCanvas({ nodeKey, data }) {
                 "aria-label": "Two-way arrow",
                 className: `zui-drawing-tool ${selectedShape.bidirectional ? "is-active" : ""}`,
                 onClick: () => applyDirection(true),
-                children: /* @__PURE__ */ jsx(
+                children: /* @__PURE__ */ jsx3(
                   "svg",
                   {
                     viewBox: "0 0 20 20",
@@ -1384,13 +1634,13 @@ function DrawingCanvas({ nodeKey, data }) {
                     strokeWidth: "1.6",
                     strokeLinecap: "round",
                     strokeLinejoin: "round",
-                    children: /* @__PURE__ */ jsx("path", { d: "M3.5 10h13M8 5.5L3.5 10L8 14.5M12 5.5L16.5 10L12 14.5" })
+                    children: /* @__PURE__ */ jsx3("path", { d: "M3.5 10h13M8 5.5L3.5 10L8 14.5M12 5.5L16.5 10L12 14.5" })
                   }
                 )
               }
             )
           ] }),
-          selectedShape && /* @__PURE__ */ jsx("div", { className: "zui-drawing-toolbar-group", children: /* @__PURE__ */ jsx(
+          selectedShape && /* @__PURE__ */ jsx3("div", { className: "zui-drawing-toolbar-group", children: /* @__PURE__ */ jsx3(
             "button",
             {
               type: "button",
@@ -1398,7 +1648,7 @@ function DrawingCanvas({ nodeKey, data }) {
               "aria-label": "Delete shape",
               className: "zui-drawing-tool zui-drawing-tool-danger",
               onClick: deleteSelected,
-              children: /* @__PURE__ */ jsx(
+              children: /* @__PURE__ */ jsx3(
                 "svg",
                 {
                   viewBox: "0 0 20 20",
@@ -1408,13 +1658,13 @@ function DrawingCanvas({ nodeKey, data }) {
                   stroke: "currentColor",
                   strokeWidth: "1.6",
                   strokeLinecap: "round",
-                  children: /* @__PURE__ */ jsx("path", { d: "M4 6h12M8 6V4h4v2M6 6l1 10h6l1-10M8.5 9v4M11.5 9v4" })
+                  children: /* @__PURE__ */ jsx3("path", { d: "M4 6h12M8 6V4h4v2M6 6l1 10h6l1-10M8.5 9v4M11.5 9v4" })
                 }
               )
             }
           ) })
         ] }),
-        /* @__PURE__ */ jsxs(
+        /* @__PURE__ */ jsxs2(
           "svg",
           {
             ref: svgRef,
@@ -1441,7 +1691,7 @@ function DrawingCanvas({ nodeKey, data }) {
               }
             },
             children: [
-              shapes.map((shape) => /* @__PURE__ */ jsxs(
+              shapes.map((shape) => /* @__PURE__ */ jsxs2(
                 "g",
                 {
                   "data-shape-id": shape.id,
@@ -1450,7 +1700,7 @@ function DrawingCanvas({ nodeKey, data }) {
                   },
                   onPointerDown: (e) => handleShapePointerDown(e, shape),
                   children: [
-                    isConnectorType(shape.type) && /* @__PURE__ */ jsx(
+                    isConnectorType(shape.type) && /* @__PURE__ */ jsx3(
                       "path",
                       {
                         d: connectorPath(shape),
@@ -1459,8 +1709,8 @@ function DrawingCanvas({ nodeKey, data }) {
                         strokeWidth: 14
                       }
                     ),
-                    (isBoxType(shape.type) || shape.type === "text") && /* @__PURE__ */ jsx(HitArea, { shape }),
-                    shape.id === editingText?.id && shape.type === "text" ? null : /* @__PURE__ */ jsx(
+                    (isBoxType(shape.type) || shape.type === "text") && /* @__PURE__ */ jsx3(HitArea, { shape }),
+                    shape.id === editingText?.id && shape.type === "text" ? null : /* @__PURE__ */ jsx3(
                       ShapeView,
                       {
                         shape,
@@ -1472,7 +1722,7 @@ function DrawingCanvas({ nodeKey, data }) {
                 },
                 shape.id
               )),
-              selectedShape && isEditable && !editingText && /* @__PURE__ */ jsx(
+              selectedShape && isEditable && !editingText && /* @__PURE__ */ jsx3(
                 SelectionOverlay,
                 {
                   shape: selectedShape,
@@ -1484,7 +1734,7 @@ function DrawingCanvas({ nodeKey, data }) {
             ]
           }
         ),
-        editingShape && editingText && /* @__PURE__ */ jsx(
+        editingShape && editingText && /* @__PURE__ */ jsx3(
           TextEditOverlay,
           {
             shape: editingShape,
@@ -1493,7 +1743,7 @@ function DrawingCanvas({ nodeKey, data }) {
           },
           `${editingShape.id}:${editingText.field}`
         ),
-        isEditable && /* @__PURE__ */ jsx(
+        isEditable && /* @__PURE__ */ jsx3(
           "div",
           {
             className: "zui-drawing-resize",
@@ -1532,7 +1782,7 @@ function DrawingCanvas({ nodeKey, data }) {
 }
 function HitArea({ shape }) {
   const b = bbox(shape);
-  return /* @__PURE__ */ jsx(
+  return /* @__PURE__ */ jsx3(
     "rect",
     {
       x: b.x,
@@ -1566,8 +1816,8 @@ function SelectionOverlay({
       if (hasElbowHandle && i === 1) return [];
       return [{ index: i, x: (p.x + q.x) / 2, y: (p.y + q.y) / 2 }];
     });
-    return /* @__PURE__ */ jsxs("g", { children: [
-      ghosts.map(({ index, x, y }) => /* @__PURE__ */ jsx(
+    return /* @__PURE__ */ jsxs2("g", { children: [
+      ghosts.map(({ index, x, y }) => /* @__PURE__ */ jsx3(
         "circle",
         {
           cx: x,
@@ -1580,11 +1830,11 @@ function SelectionOverlay({
           opacity: 0.6,
           style: { cursor: "copy" },
           onPointerDown: (e) => onWaypointAdd(e, shape.id, index, { x, y }),
-          children: /* @__PURE__ */ jsx("title", { children: "Drag to add a point" })
+          children: /* @__PURE__ */ jsx3("title", { children: "Drag to add a point" })
         },
         `ghost-${index}`
       )),
-      waypoints.map((p, i) => /* @__PURE__ */ jsx(
+      waypoints.map((p, i) => /* @__PURE__ */ jsx3(
         "rect",
         {
           x: p.x - 4,
@@ -1605,11 +1855,11 @@ function SelectionOverlay({
             e.stopPropagation();
             onWaypointRemove(shape.id, i);
           },
-          children: /* @__PURE__ */ jsx("title", { children: "Drag to move, double-click to remove" })
+          children: /* @__PURE__ */ jsx3("title", { children: "Drag to move, double-click to remove" })
         },
         `wp-${i}`
       )),
-      ends.map(({ end, x, y }) => /* @__PURE__ */ jsx(
+      ends.map(({ end, x, y }) => /* @__PURE__ */ jsx3(
         "circle",
         {
           cx: x,
@@ -1628,7 +1878,7 @@ function SelectionOverlay({
         },
         end
       )),
-      elbowMid && /* @__PURE__ */ jsx(
+      elbowMid && /* @__PURE__ */ jsx3(
         "rect",
         {
           x: elbowMid.x - 4,
@@ -1658,8 +1908,8 @@ function SelectionOverlay({
     { corner: "se", x: b.x + b.w + pad, y: b.y + b.h + pad }
   ];
   const resizable = shape.type !== "text";
-  return /* @__PURE__ */ jsxs("g", { children: [
-    /* @__PURE__ */ jsx(
+  return /* @__PURE__ */ jsxs2("g", { children: [
+    /* @__PURE__ */ jsx3(
       "rect",
       {
         x: b.x - pad,
@@ -1673,7 +1923,7 @@ function SelectionOverlay({
         pointerEvents: "none"
       }
     ),
-    resizable && corners.map(({ corner, x, y }) => /* @__PURE__ */ jsx(
+    resizable && corners.map(({ corner, x, y }) => /* @__PURE__ */ jsx3(
       "rect",
       {
         x: x - 4,
@@ -1699,9 +1949,9 @@ function TextEditOverlay({
   onCommit
 }) {
   const original = shape[field] ?? "";
-  const [value, setValue] = useState(original);
-  const ref = useRef2(null);
-  useEffect5(() => {
+  const [value, setValue] = useState3(original);
+  const ref = useRef3(null);
+  useEffect7(() => {
     ref.current?.focus();
     ref.current?.select();
   }, []);
@@ -1749,7 +1999,7 @@ function TextEditOverlay({
     });
   }
   const placeholder = field === "label" ? "Label" : field === "footer" ? "Footer" : "Text";
-  return /* @__PURE__ */ jsx(
+  return /* @__PURE__ */ jsx3(
     "textarea",
     {
       ref,
@@ -1775,7 +2025,7 @@ function TextEditOverlay({
 }
 
 // src/nodes/DrawingNode.tsx
-import { jsx as jsx2 } from "react/jsx-runtime";
+import { jsx as jsx4 } from "react/jsx-runtime";
 var DrawingNode = class _DrawingNode extends DecoratorNode {
   static getType() {
     return "drawing";
@@ -1839,7 +2089,7 @@ var DrawingNode = class _DrawingNode extends DecoratorNode {
     return false;
   }
   decorate(_editor, _config) {
-    return /* @__PURE__ */ jsx2(DrawingCanvas, { nodeKey: this.getKey(), data: this.getData() });
+    return /* @__PURE__ */ jsx4(DrawingCanvas, { nodeKey: this.getKey(), data: this.getData() });
   }
 };
 function $createDrawingNode(data = serializeDrawingData(EMPTY_DRAWING)) {
@@ -1870,12 +2120,12 @@ ${node.getLatest().__data}
 };
 
 // src/plugins/ToolbarPlugin.tsx
-import { jsx as jsx3, jsxs as jsxs2 } from "react/jsx-runtime";
+import { jsx as jsx5, jsxs as jsxs3 } from "react/jsx-runtime";
 var FORMAT_BUTTONS = [
   {
     format: "bold",
     label: "Bold",
-    icon: /* @__PURE__ */ jsx3(
+    icon: /* @__PURE__ */ jsx5(
       "path",
       {
         d: "M6 3.5h5a3 3 0 0 1 0 6H6zm0 6h6a3 3 0 0 1 0 6H6z",
@@ -1886,12 +2136,12 @@ var FORMAT_BUTTONS = [
   {
     format: "italic",
     label: "Italic",
-    icon: /* @__PURE__ */ jsx3("path", { d: "M8.5 3.5h6M5.5 16.5h6M11.5 3.5l-3 13", strokeWidth: "1.6" })
+    icon: /* @__PURE__ */ jsx5("path", { d: "M8.5 3.5h6M5.5 16.5h6M11.5 3.5l-3 13", strokeWidth: "1.6" })
   },
   {
     format: "strikethrough",
     label: "Strikethrough",
-    icon: /* @__PURE__ */ jsx3(
+    icon: /* @__PURE__ */ jsx5(
       "path",
       {
         d: "M4 10h12M13.5 5.5c-.6-1.2-2-2-3.5-2-2 0-3.5 1.2-3.5 2.8 0 .5.1.9.4 1.3m-.4 5c.5 1.6 2 2.9 3.9 2.9 2 0 3.6-1.2 3.6-2.9 0-.4-.1-.8-.2-1.1",
@@ -1902,19 +2152,19 @@ var FORMAT_BUTTONS = [
   {
     format: "code",
     label: "Inline code",
-    icon: /* @__PURE__ */ jsx3("path", { d: "M7.5 6L4 10l3.5 4M12.5 6L16 10l-3.5 4", strokeWidth: "1.6" })
+    icon: /* @__PURE__ */ jsx5("path", { d: "M7.5 6L4 10l3.5 4M12.5 6L16 10l-3.5 4", strokeWidth: "1.6" })
   }
 ];
 function ToolbarPlugin() {
-  const [editor] = useLexicalComposerContext6();
-  const [activeFormats, setActiveFormats] = useState2(
+  const [editor] = useLexicalComposerContext8();
+  const [activeFormats, setActiveFormats] = useState4(
     /* @__PURE__ */ new Set()
   );
-  useEffect6(() => {
+  useEffect8(() => {
     return editor.registerUpdateListener(({ editorState }) => {
       editorState.read(() => {
-        const selection = $getSelection2();
-        if (!$isRangeSelection2(selection)) {
+        const selection = $getSelection3();
+        if (!$isRangeSelection3(selection)) {
           setActiveFormats(/* @__PURE__ */ new Set());
           return;
         }
@@ -1926,21 +2176,21 @@ function ToolbarPlugin() {
       });
     });
   }, [editor]);
-  const insertTable = useCallback2(() => {
+  const insertTable = useCallback4(() => {
     editor.dispatchCommand(INSERT_TABLE_COMMAND, {
       columns: "3",
       rows: "3",
       includeHeaders: { rows: true, columns: false }
     });
   }, [editor]);
-  const insertDrawing = useCallback2(() => {
+  const insertDrawing = useCallback4(() => {
     editor.update(() => {
       const drawing = $createDrawingNode();
       $insertNodeToNearestRoot(drawing);
     });
   }, [editor]);
-  return /* @__PURE__ */ jsxs2("div", { className: "zui-text-editor-toolbar", children: [
-    FORMAT_BUTTONS.map(({ format, label, icon }) => /* @__PURE__ */ jsx3(
+  return /* @__PURE__ */ jsxs3("div", { className: "zui-text-editor-toolbar", children: [
+    FORMAT_BUTTONS.map(({ format, label, icon }) => /* @__PURE__ */ jsx5(
       "button",
       {
         type: "button",
@@ -1950,7 +2200,7 @@ function ToolbarPlugin() {
         className: `zui-text-editor-toolbar-button ${activeFormats.has(format) ? "is-active" : ""}`,
         onMouseDown: (e) => e.preventDefault(),
         onClick: () => editor.dispatchCommand(FORMAT_TEXT_COMMAND, format),
-        children: /* @__PURE__ */ jsx3(
+        children: /* @__PURE__ */ jsx5(
           "svg",
           {
             viewBox: "0 0 20 20",
@@ -1966,8 +2216,8 @@ function ToolbarPlugin() {
       },
       format
     )),
-    /* @__PURE__ */ jsx3("div", { className: "zui-text-editor-toolbar-divider" }),
-    /* @__PURE__ */ jsx3(
+    /* @__PURE__ */ jsx5("div", { className: "zui-text-editor-toolbar-divider" }),
+    /* @__PURE__ */ jsx5(
       "button",
       {
         type: "button",
@@ -1976,7 +2226,7 @@ function ToolbarPlugin() {
         className: "zui-text-editor-toolbar-button",
         onMouseDown: (e) => e.preventDefault(),
         onClick: insertTable,
-        children: /* @__PURE__ */ jsxs2(
+        children: /* @__PURE__ */ jsxs3(
           "svg",
           {
             viewBox: "0 0 20 20",
@@ -1987,14 +2237,14 @@ function ToolbarPlugin() {
             strokeWidth: "1.5",
             strokeLinecap: "round",
             children: [
-              /* @__PURE__ */ jsx3("rect", { x: "3", y: "3.5", width: "14", height: "13", rx: "1.5" }),
-              /* @__PURE__ */ jsx3("path", { d: "M3 8h14M8 8v8.5M13 8v8.5" })
+              /* @__PURE__ */ jsx5("rect", { x: "3", y: "3.5", width: "14", height: "13", rx: "1.5" }),
+              /* @__PURE__ */ jsx5("path", { d: "M3 8h14M8 8v8.5M13 8v8.5" })
             ]
           }
         )
       }
     ),
-    /* @__PURE__ */ jsx3(
+    /* @__PURE__ */ jsx5(
       "button",
       {
         type: "button",
@@ -2003,7 +2253,7 @@ function ToolbarPlugin() {
         className: "zui-text-editor-toolbar-button",
         onMouseDown: (e) => e.preventDefault(),
         onClick: insertDrawing,
-        children: /* @__PURE__ */ jsxs2(
+        children: /* @__PURE__ */ jsxs3(
           "svg",
           {
             viewBox: "0 0 20 20",
@@ -2015,9 +2265,9 @@ function ToolbarPlugin() {
             strokeLinecap: "round",
             strokeLinejoin: "round",
             children: [
-              /* @__PURE__ */ jsx3("rect", { x: "3", y: "5", width: "8", height: "6", rx: "1.5" }),
-              /* @__PURE__ */ jsx3("path", { d: "M13.5 8h3M14.5 6.5L17.5 8l-3 1.5" }),
-              /* @__PURE__ */ jsx3("ellipse", { cx: "13", cy: "14.5", rx: "4", ry: "2.8" })
+              /* @__PURE__ */ jsx5("rect", { x: "3", y: "5", width: "8", height: "6", rx: "1.5" }),
+              /* @__PURE__ */ jsx5("path", { d: "M13.5 8h3M14.5 6.5L17.5 8l-3 1.5" }),
+              /* @__PURE__ */ jsx5("ellipse", { cx: "13", cy: "14.5", rx: "4", ry: "2.8" })
             ]
           }
         )
@@ -2302,7 +2552,7 @@ var editorTheme = {
 };
 
 // src/MarkdownEditor.tsx
-import { jsx as jsx4, jsxs as jsxs3 } from "react/jsx-runtime";
+import { jsx as jsx6, jsxs as jsxs4 } from "react/jsx-runtime";
 var SYNC_TRANSFORMERS = [FRONTMATTER, DRAWING, CHECK_LIST, TABLE, ...TRANSFORMERS2];
 var SHORTCUT_TRANSFORMERS = [TABLE, ...TRANSFORMERS2.filter((t) => t !== CODE)];
 function onError(error) {
@@ -2324,8 +2574,8 @@ var editorNodes = [
   DrawingNode
 ];
 function ReadOnlyPlugin({ readOnly }) {
-  const [editor] = useLexicalComposerContext7();
-  useEffect7(() => {
+  const [editor] = useLexicalComposerContext9();
+  useEffect9(() => {
     editor.setEditable(!readOnly);
   }, [editor, readOnly]);
   return null;
@@ -2338,17 +2588,19 @@ function MarkdownEditor({
   className,
   mode = "edit-md",
   autoFocus = false,
-  toolbar = true
+  toolbar = true,
+  outline = false,
+  foldable = true
 }) {
-  const latestValueRef = useRef3(value ?? "");
-  const [mountKey, setMountKey] = useState3(0);
-  const [capturedMarkdown, setCapturedMarkdown] = useState3(value ?? "");
-  useEffect7(() => {
+  const latestValueRef = useRef4(value ?? "");
+  const [mountKey, setMountKey] = useState5(0);
+  const [capturedMarkdown, setCapturedMarkdown] = useState5(value ?? "");
+  useEffect9(() => {
     if (value !== void 0) {
       latestValueRef.current = value;
     }
   }, [value]);
-  const handleTextChange = useCallback3(
+  const handleTextChange = useCallback5(
     (e) => {
       const newValue = e.target.value;
       latestValueRef.current = newValue;
@@ -2356,15 +2608,15 @@ function MarkdownEditor({
     },
     [onChange]
   );
-  const handleLexicalChange = useCallback3(
+  const handleLexicalChange = useCallback5(
     (newValue) => {
       latestValueRef.current = newValue;
       onChange?.(newValue);
     },
     [onChange]
   );
-  const prevModeRef = useRef3(mode);
-  useEffect7(() => {
+  const prevModeRef = useRef4(mode);
+  useEffect9(() => {
     if (prevModeRef.current === "edit-raw" && mode !== "edit-raw") {
       setCapturedMarkdown(latestValueRef.current);
       setMountKey((k) => k + 1);
@@ -2381,7 +2633,7 @@ function MarkdownEditor({
     []
   );
   if (mode === "edit-raw") {
-    return /* @__PURE__ */ jsx4("div", { className: `zui-text-editor ${className ?? ""}`, children: /* @__PURE__ */ jsx4(
+    return /* @__PURE__ */ jsx6("div", { className: `zui-text-editor ${className ?? ""}`, children: /* @__PURE__ */ jsx6(
       "textarea",
       {
         className: "zui-text-editor-textarea",
@@ -2394,23 +2646,29 @@ function MarkdownEditor({
       }
     ) });
   }
-  return /* @__PURE__ */ jsx4(LexicalComposer, { initialConfig, children: /* @__PURE__ */ jsxs3("div", { className: `zui-text-editor ${className ?? ""}`, children: [
-    toolbar && mode === "edit-md" && !readOnly && /* @__PURE__ */ jsx4(ToolbarPlugin, {}),
-    /* @__PURE__ */ jsx4(
-      RichTextPlugin,
-      {
-        contentEditable: /* @__PURE__ */ jsx4(
-          ContentEditable,
+  return /* @__PURE__ */ jsx6(LexicalComposer, { initialConfig, children: /* @__PURE__ */ jsxs4("div", { className: `zui-text-editor ${className ?? ""}`, children: [
+    toolbar && mode === "edit-md" && !readOnly && /* @__PURE__ */ jsx6(ToolbarPlugin, {}),
+    /* @__PURE__ */ jsxs4("div", { className: "zui-text-editor-body", children: [
+      /* @__PURE__ */ jsxs4("div", { className: "zui-text-editor-main", children: [
+        /* @__PURE__ */ jsx6(
+          RichTextPlugin,
           {
-            className: "zui-text-editor-content",
-            "aria-placeholder": placeholder,
-            placeholder: /* @__PURE__ */ jsx4("div", { className: "zui-text-editor-placeholder", children: placeholder })
+            contentEditable: /* @__PURE__ */ jsx6(
+              ContentEditable,
+              {
+                className: "zui-text-editor-content",
+                "aria-placeholder": placeholder,
+                placeholder: /* @__PURE__ */ jsx6("div", { className: "zui-text-editor-placeholder", children: placeholder })
+              }
+            ),
+            ErrorBoundary: LexicalErrorBoundary
           }
         ),
-        ErrorBoundary: LexicalErrorBoundary
-      }
-    ),
-    /* @__PURE__ */ jsx4(
+        foldable && /* @__PURE__ */ jsx6(FoldingPlugin, {})
+      ] }),
+      outline && /* @__PURE__ */ jsx6(OutlinePlugin, {})
+    ] }),
+    /* @__PURE__ */ jsx6(
       MarkdownSyncPlugin,
       {
         initialMarkdown: mode === "view" ? value ?? "" : capturedMarkdown,
@@ -2418,17 +2676,17 @@ function MarkdownEditor({
         transformers: SYNC_TRANSFORMERS
       }
     ),
-    /* @__PURE__ */ jsx4(HistoryPlugin, {}),
-    /* @__PURE__ */ jsx4(ListPlugin, {}),
-    /* @__PURE__ */ jsx4(CheckListPlugin, {}),
-    /* @__PURE__ */ jsx4(ChecklistShortcutPlugin, {}),
-    /* @__PURE__ */ jsx4(CodeBlockShortcutPlugin, {}),
-    /* @__PURE__ */ jsx4(CodeHighlightPlugin, {}),
-    /* @__PURE__ */ jsx4(TablePlugin, {}),
-    /* @__PURE__ */ jsx4(LinkPlugin, {}),
-    /* @__PURE__ */ jsx4(MarkdownShortcutPlugin, { transformers: SHORTCUT_TRANSFORMERS }),
-    /* @__PURE__ */ jsx4(ReadOnlyPlugin, { readOnly: readOnly || mode === "view" }),
-    autoFocus && /* @__PURE__ */ jsx4(AutoFocusPlugin, {})
+    /* @__PURE__ */ jsx6(HistoryPlugin, {}),
+    /* @__PURE__ */ jsx6(ListPlugin, {}),
+    /* @__PURE__ */ jsx6(CheckListPlugin, {}),
+    /* @__PURE__ */ jsx6(ChecklistShortcutPlugin, {}),
+    /* @__PURE__ */ jsx6(CodeBlockShortcutPlugin, {}),
+    /* @__PURE__ */ jsx6(CodeHighlightPlugin, {}),
+    /* @__PURE__ */ jsx6(TablePlugin, {}),
+    /* @__PURE__ */ jsx6(LinkPlugin, {}),
+    /* @__PURE__ */ jsx6(MarkdownShortcutPlugin, { transformers: SHORTCUT_TRANSFORMERS }),
+    /* @__PURE__ */ jsx6(ReadOnlyPlugin, { readOnly: readOnly || mode === "view" }),
+    autoFocus && /* @__PURE__ */ jsx6(AutoFocusPlugin, {})
   ] }) }, mountKey);
 }
 export {