@windoc/react 0.2.6 → 0.2.7

package/dist/index.mjs

@@ -1,5 +1,5 @@
 // src/Editor.tsx
-import { useEffect as useEffect4, useRef as useRef4, useState as useState21 } from "react";
+import { useEffect as useEffect4, useRef as useRef16, useState as useState11 } from "react";
 
 // src/EditorContext.tsx
 import { createContext, useContext, useEffect, useState } from "react";
@@ -100,11 +100,11 @@ function RedoTool() {
 }
 
 // src/toolbar/ColumnTool.tsx
-import { useState as useState3 } from "react";
+import { useRef, useState as useState3 } from "react";
 import { Fragment, jsx as jsx5, jsxs } from "react/jsx-runtime";
 function ColumnTool() {
   const { editorRef } = useEditor();
-  const [isOpen, setIsOpen] = useState3(false);
+  const optionsRef = useRef(null);
   const [currentColumns, setCurrentColumns] = useState3(1);
   const [gap, setGap] = useState3(20);
   const handleColumn = (col) => {
@@ -116,9 +116,9 @@ function ColumnTool() {
     setGap(clampedValue);
     editorRef.current?.command.executeColumnGap(clampedValue);
   };
-  return /* @__PURE__ */ jsxs("div", { className: "menu-item__column", onClick: () => setIsOpen(!isOpen), children: [
+  return /* @__PURE__ */ jsxs("div", { className: "menu-item__column", onClick: () => optionsRef.current?.classList.toggle("visible"), children: [
     /* @__PURE__ */ jsx5("span", { className: "select", title: "Column Layout", children: currentColumns === 1 ? "1 Column" : `${currentColumns} Columns` }),
-    /* @__PURE__ */ jsx5("div", { className: "options" + (isOpen ? " visible" : ""), children: /* @__PURE__ */ jsxs("div", { onClick: (e) => e.stopPropagation(), children: [
+    /* @__PURE__ */ jsx5("div", { className: "options", ref: optionsRef, children: /* @__PURE__ */ jsxs("div", { onClick: (e) => e.stopPropagation(), children: [
       /* @__PURE__ */ jsxs("ul", { children: [
         /* @__PURE__ */ jsx5("li", { onClick: () => handleColumn(1), children: "1 Column" }),
         /* @__PURE__ */ jsx5("li", { onClick: () => handleColumn(2), children: "2 Columns" })
@@ -145,7 +145,7 @@ function ColumnTool() {
 }
 
 // src/toolbar/TableTool.tsx
-import { useState as useState4, useEffect as useEffect2, useRef } from "react";
+import { useState as useState4, useEffect as useEffect2, useRef as useRef2 } from "react";
 import { Table } from "lucide-react";
 import { jsx as jsx6, jsxs as jsxs2 } from "react/jsx-runtime";
 function TableTool() {
@@ -153,7 +153,7 @@ function TableTool() {
   const [visible, setVisible] = useState4(false);
   const [hoverRow, setHoverRow] = useState4(0);
   const [hoverCol, setHoverCol] = useState4(0);
-  const containerRef = useRef(null);
+  const containerRef = useRef2(null);
   useEffect2(() => {
     if (!visible) return;
     const handleClickOutside = (e) => {
@@ -194,7 +194,7 @@ function TableTool() {
 }
 
 // src/toolbar/TitleTool.tsx
-import { useState as useState5 } from "react";
+import { useRef as useRef3 } from "react";
 import { jsx as jsx7, jsxs as jsxs3 } from "react/jsx-runtime";
 var LEVELS = [
   { level: null, label: "Body" },
@@ -207,15 +207,15 @@ var LEVELS = [
 ];
 function TitleTool() {
   const { editorRef, rangeStyle } = useEditor();
-  const [isOpen, setIsOpen] = useState5(false);
+  const optionsRef = useRef3(null);
   const activeLevel = rangeStyle?.level || null;
   const activeLabel = LEVELS.find((l) => l.level === activeLevel)?.label || "Body";
   const handleTitle = (level) => {
     editorRef.current?.command.executeTitle(level);
   };
-  return /* @__PURE__ */ jsxs3("div", { className: "menu-item__title", onClick: () => setIsOpen(!isOpen), children: [
+  return /* @__PURE__ */ jsxs3("div", { className: "menu-item__title", onClick: () => optionsRef.current?.classList.toggle("visible"), children: [
     /* @__PURE__ */ jsx7("span", { className: "select", title: "Toggle Heading", children: activeLabel }),
-    /* @__PURE__ */ jsx7("div", { className: "options" + (isOpen ? " visible" : ""), children: /* @__PURE__ */ jsx7("ul", { children: LEVELS.map(({ level, label }) => /* @__PURE__ */ jsx7(
+    /* @__PURE__ */ jsx7("div", { className: "options", ref: optionsRef, children: /* @__PURE__ */ jsx7("ul", { children: LEVELS.map(({ level, label }) => /* @__PURE__ */ jsx7(
       "li",
       {
         className: activeLevel === level ? "active" : "",
@@ -229,7 +229,7 @@ function TitleTool() {
 }
 
 // src/toolbar/FontTool.tsx
-import { useState as useState6 } from "react";
+import { useRef as useRef4 } from "react";
 import { jsx as jsx8, jsxs as jsxs4 } from "react/jsx-runtime";
 var FONTS = [
   { family: "Arial", label: "Sans Serif" },
@@ -237,15 +237,15 @@ var FONTS = [
 ];
 function FontTool() {
   const { editorRef, rangeStyle } = useEditor();
-  const [isOpen, setIsOpen] = useState6(false);
+  const optionsRef = useRef4(null);
   const activeFont = rangeStyle?.font || "Arial";
   const activeLabel = FONTS.find((f) => f.family === activeFont)?.label || activeFont;
   const handleFont = (family) => {
     editorRef.current?.command.executeFont(family);
   };
-  return /* @__PURE__ */ jsxs4("div", { className: "menu-item__font", onClick: () => setIsOpen(!isOpen), children: [
+  return /* @__PURE__ */ jsxs4("div", { className: "menu-item__font", onClick: () => optionsRef.current?.classList.toggle("visible"), children: [
     /* @__PURE__ */ jsx8("span", { className: "select", title: "Font", children: activeLabel }),
-    /* @__PURE__ */ jsx8("div", { className: "options" + (isOpen ? " visible" : ""), children: /* @__PURE__ */ jsx8("ul", { children: FONTS.map(({ family, label }) => /* @__PURE__ */ jsx8(
+    /* @__PURE__ */ jsx8("div", { className: "options", ref: optionsRef, children: /* @__PURE__ */ jsx8("ul", { children: FONTS.map(({ family, label }) => /* @__PURE__ */ jsx8(
       "li",
       {
         "data-family": family,
@@ -260,19 +260,19 @@ function FontTool() {
 }
 
 // src/toolbar/FontSizeTool.tsx
-import { useState as useState7 } from "react";
+import { useRef as useRef5 } from "react";
 import { jsx as jsx9, jsxs as jsxs5 } from "react/jsx-runtime";
 var SIZES = [56, 48, 34, 32, 29, 24, 21, 20, 18, 16, 14, 12, 10, 8];
 function FontSizeTool() {
   const { editorRef, rangeStyle } = useEditor();
-  const [isOpen, setIsOpen] = useState7(false);
+  const optionsRef = useRef5(null);
   const activeSize = rangeStyle?.size ?? 16;
   const handleSize = (size) => {
     editorRef.current?.command.executeSize(size);
   };
-  return /* @__PURE__ */ jsxs5("div", { className: "menu-item__size", onClick: () => setIsOpen(!isOpen), children: [
+  return /* @__PURE__ */ jsxs5("div", { className: "menu-item__size", onClick: () => optionsRef.current?.classList.toggle("visible"), children: [
     /* @__PURE__ */ jsx9("span", { className: "select", title: "Font Size", children: activeSize }),
-    /* @__PURE__ */ jsx9("div", { className: "options" + (isOpen ? " visible" : ""), children: /* @__PURE__ */ jsx9("ul", { children: SIZES.map((size) => /* @__PURE__ */ jsx9(
+    /* @__PURE__ */ jsx9("div", { className: "options", ref: optionsRef, children: /* @__PURE__ */ jsx9("ul", { children: SIZES.map((size) => /* @__PURE__ */ jsx9(
       "li",
       {
         className: activeSize === size ? "active" : "",
@@ -285,20 +285,20 @@ function FontSizeTool() {
 }
 
 // src/toolbar/LineHeightTool.tsx
-import { useState as useState8 } from "react";
+import { useRef as useRef6 } from "react";
 import { jsx as jsx10, jsxs as jsxs6 } from "react/jsx-runtime";
 var LINE_HEIGHTS = ["1.0", "1.15", "1.5", "2.0", "2.5"];
 function LineHeightTool() {
   const { editorRef, rangeStyle } = useEditor();
-  const [isOpen, setIsOpen] = useState8(false);
+  const optionsRef = useRef6(null);
   const activeMargin = rangeStyle?.rowMargin ?? 1;
   const activeLabel = Number.isInteger(activeMargin) ? `${activeMargin}.0` : String(activeMargin);
   const handleLineHeight = (value) => {
     editorRef.current?.command.executeRowMargin(Number(value));
   };
-  return /* @__PURE__ */ jsxs6("div", { className: "menu-item__line-height", onClick: () => setIsOpen(!isOpen), children: [
+  return /* @__PURE__ */ jsxs6("div", { className: "menu-item__line-height", onClick: () => optionsRef.current?.classList.toggle("visible"), children: [
     /* @__PURE__ */ jsx10("span", { className: "select", title: "Line Height", children: activeLabel }),
-    /* @__PURE__ */ jsx10("div", { className: "options" + (isOpen ? " visible" : ""), children: /* @__PURE__ */ jsx10("ul", { children: LINE_HEIGHTS.map((h) => /* @__PURE__ */ jsx10(
+    /* @__PURE__ */ jsx10("div", { className: "options", ref: optionsRef, children: /* @__PURE__ */ jsx10("ul", { children: LINE_HEIGHTS.map((h) => /* @__PURE__ */ jsx10(
       "li",
       {
         className: String(activeMargin) === h || activeLabel === h ? "active" : "",
@@ -311,7 +311,7 @@ function LineHeightTool() {
 }
 
 // src/toolbar/ColorTool.tsx
-import { useState as useState9 } from "react";
+import { useRef as useRef7 } from "react";
 import { Baseline, RotateCcw } from "lucide-react";
 import { jsx as jsx11, jsxs as jsxs7 } from "react/jsx-runtime";
 var COLOR_PALETTE = [
@@ -326,7 +326,7 @@ var COLOR_PALETTE = [
 ];
 function ColorTool() {
   const { editorRef, rangeStyle } = useEditor();
-  const [visible, setVisible] = useState9(false);
+  const dropdownRef = useRef7(null);
   const activeColor = rangeStyle?.color || "#000000";
   const handleColor = (color) => {
     editorRef.current?.command.executeColor(color);
@@ -334,11 +334,11 @@ function ColorTool() {
   const handleReset = () => {
     editorRef.current?.command.executeColor(null);
   };
-  return /* @__PURE__ */ jsxs7("div", { className: "menu-item__color", title: "Font Color", onClick: () => setVisible(!visible), children: [
+  return /* @__PURE__ */ jsxs7("div", { className: "menu-item__color", title: "Font Color", onClick: () => dropdownRef.current?.classList.toggle("visible"), children: [
     /* @__PURE__ */ jsx11(Baseline, { size: 16 }),
     /* @__PURE__ */ jsx11("span", { style: { backgroundColor: activeColor } }),
     /* @__PURE__ */ jsx11("input", { id: "color", type: "color", readOnly: true, tabIndex: -1 }),
-    /* @__PURE__ */ jsx11("div", { className: "color-palette-dropdown" + (visible ? " visible" : ""), children: /* @__PURE__ */ jsxs7("div", { onClick: (e) => e.stopPropagation(), children: [
+    /* @__PURE__ */ jsx11("div", { className: "color-palette-dropdown", ref: dropdownRef, children: /* @__PURE__ */ jsxs7("div", { onClick: (e) => e.stopPropagation(), children: [
       /* @__PURE__ */ jsxs7("button", { className: "color-palette-reset", onClick: handleReset, children: [
         /* @__PURE__ */ jsx11(RotateCcw, { size: 12 }),
         "Reset"
@@ -358,7 +358,7 @@ function ColorTool() {
 }
 
 // src/toolbar/HighlightTool.tsx
-import { useState as useState10 } from "react";
+import { useRef as useRef8 } from "react";
 import { Highlighter, RotateCcw as RotateCcw2 } from "lucide-react";
 import { jsx as jsx12, jsxs as jsxs8 } from "react/jsx-runtime";
 var HIGHLIGHT_PALETTE = [
@@ -373,7 +373,7 @@ var HIGHLIGHT_PALETTE = [
 ];
 function HighlightTool() {
   const { editorRef, rangeStyle } = useEditor();
-  const [visible, setVisible] = useState10(false);
+  const dropdownRef = useRef8(null);
   const activeColor = rangeStyle?.highlight || "";
   const handleColor = (color) => {
     editorRef.current?.command.executeHighlight(color);
@@ -381,11 +381,11 @@ function HighlightTool() {
   const handleReset = () => {
     editorRef.current?.command.executeHighlight(null);
   };
-  return /* @__PURE__ */ jsxs8("div", { className: "menu-item__highlight", title: "Highlight", onClick: () => setVisible(!visible), children: [
+  return /* @__PURE__ */ jsxs8("div", { className: "menu-item__highlight", title: "Highlight", onClick: () => dropdownRef.current?.classList.toggle("visible"), children: [
     /* @__PURE__ */ jsx12(Highlighter, { size: 16 }),
     /* @__PURE__ */ jsx12("span", { style: { backgroundColor: activeColor || "#ffff00" } }),
     /* @__PURE__ */ jsx12("input", { id: "highlight", type: "color", readOnly: true, tabIndex: -1 }),
-    /* @__PURE__ */ jsx12("div", { className: "color-palette-dropdown" + (visible ? " visible" : ""), children: /* @__PURE__ */ jsxs8("div", { onClick: (e) => e.stopPropagation(), children: [
+    /* @__PURE__ */ jsx12("div", { className: "color-palette-dropdown", ref: dropdownRef, children: /* @__PURE__ */ jsxs8("div", { onClick: (e) => e.stopPropagation(), children: [
       /* @__PURE__ */ jsxs8("button", { className: "color-palette-reset", onClick: handleReset, children: [
         /* @__PURE__ */ jsx12(RotateCcw2, { size: 12 }),
         "None"
@@ -423,18 +423,18 @@ function ItalicTool() {
 }
 
 // src/toolbar/UnderlineTool.tsx
-import { useState as useState11 } from "react";
+import { useRef as useRef9 } from "react";
 import { Underline as UnderlineIcon } from "lucide-react";
 import { jsx as jsx15, jsxs as jsxs9 } from "react/jsx-runtime";
 var STYLES = ["solid", "double", "dashed", "dotted", "wavy"];
 function UnderlineTool() {
   const { editorRef, isApple, rangeStyle } = useEditor();
-  const [isOpen, setIsOpen] = useState11(false);
+  const optionsRef = useRef9(null);
   const isActive = rangeStyle?.underline === true;
   return /* @__PURE__ */ jsxs9("div", { className: `menu-item__underline ${isActive ? "active" : ""}`, title: `Underline(${isApple ? "\u2318" : "Ctrl"}+U)`, children: [
     /* @__PURE__ */ jsx15(UnderlineIcon, { size: 16, onClick: () => editorRef.current?.command.executeUnderline(), style: { cursor: "pointer" } }),
-    /* @__PURE__ */ jsx15("span", { className: "select", onClick: () => setIsOpen(!isOpen) }),
-    /* @__PURE__ */ jsx15("div", { className: "options" + (isOpen ? " visible" : ""), children: /* @__PURE__ */ jsx15("ul", { children: STYLES.map((style) => /* @__PURE__ */ jsx15("li", { "data-decoration-style": style, onClick: () => {
+    /* @__PURE__ */ jsx15("span", { className: "select", onClick: () => optionsRef.current?.classList.toggle("visible") }),
+    /* @__PURE__ */ jsx15("div", { className: "options", ref: optionsRef, children: /* @__PURE__ */ jsx15("ul", { children: STYLES.map((style) => /* @__PURE__ */ jsx15("li", { "data-decoration-style": style, onClick: () => {
       editorRef.current?.command.executeUnderline({ style });
     }, children: /* @__PURE__ */ jsx15("i", {}) }, style)) }) })
   ] });
@@ -486,7 +486,7 @@ function JustifyTool() {
 }
 
 // src/toolbar/ListTool.tsx
-import { useState as useState12 } from "react";
+import { useRef as useRef10 } from "react";
 import { List, ListOrdered, Indent, Outdent } from "lucide-react";
 import { jsx as jsx21, jsxs as jsxs10 } from "react/jsx-runtime";
 var OL_PRESETS = [
@@ -521,7 +521,7 @@ function PresetCell({ option, onClick }) {
 }
 function ListTool() {
   const { editorRef, isApple, rangeStyle } = useEditor();
-  const [isOpen, setIsOpen] = useState12(false);
+  const optionsRef = useRef10(null);
   const isActive = !!rangeStyle?.listType;
   const handleList = (type, style) => {
     editorRef.current?.command.executeList(type, style);
@@ -539,8 +539,8 @@ function ListTool() {
     editorRef.current?.command.executeListOutdent();
   };
   return /* @__PURE__ */ jsxs10("div", { className: `menu-item__list ${isActive ? "active" : ""}`, title: `List(${isApple ? "\u2318" : "Ctrl"}+Shift+U)`, children: [
-    /* @__PURE__ */ jsx21(List, { size: 16, onClick: () => setIsOpen(!isOpen), style: { cursor: "pointer" } }),
-    /* @__PURE__ */ jsx21("div", { className: "options" + (isOpen ? " visible" : ""), children: /* @__PURE__ */ jsxs10("div", { style: { padding: "8px", width: "320px" }, children: [
+    /* @__PURE__ */ jsx21(List, { size: 16, onClick: () => optionsRef.current?.classList.toggle("visible"), style: { cursor: "pointer" } }),
+    /* @__PURE__ */ jsx21("div", { className: "options", ref: optionsRef, children: /* @__PURE__ */ jsxs10("div", { style: { padding: "8px", width: "320px" }, children: [
       /* @__PURE__ */ jsxs10("div", { style: { display: "flex", gap: "4px", marginBottom: "8px" }, children: [
         /* @__PURE__ */ jsx21(
           "button",
@@ -615,7 +615,7 @@ function ImageTool() {
 }
 
 // src/toolbar/SeparatorTool.tsx
-import { useState as useState13 } from "react";
+import { useRef as useRef11, useState as useState5 } from "react";
 import { Minus } from "lucide-react";
 import { jsx as jsx23, jsxs as jsxs12 } from "react/jsx-runtime";
 var DASH_STYLES = [
@@ -631,15 +631,15 @@ var LINE_WIDTHS = [
 ];
 function SeparatorTool() {
   const { editorRef } = useEditor();
-  const [isOpen, setIsOpen] = useState13(false);
-  const [selectedWidth, setSelectedWidth] = useState13(1);
+  const optionsRef = useRef11(null);
+  const [selectedWidth, setSelectedWidth] = useState5(1);
   const lineColor = "#344054";
   const handleSeparator = (dashArray) => {
     editorRef.current?.command.executeSeparator(dashArray, { lineWidth: selectedWidth });
   };
   return /* @__PURE__ */ jsxs12("div", { className: "menu-item__separator", title: "Separator", children: [
-    /* @__PURE__ */ jsx23(Minus, { size: 16, onClick: () => setIsOpen(!isOpen), style: { cursor: "pointer" } }),
-    /* @__PURE__ */ jsx23("div", { className: "options" + (isOpen ? " visible" : ""), children: /* @__PURE__ */ jsxs12("div", { style: { padding: "8px 10px 10px", width: "200px" }, children: [
+    /* @__PURE__ */ jsx23(Minus, { size: 16, onClick: () => optionsRef.current?.classList.toggle("visible"), style: { cursor: "pointer" } }),
+    /* @__PURE__ */ jsx23("div", { className: "options", ref: optionsRef, children: /* @__PURE__ */ jsxs12("div", { style: { padding: "8px 10px 10px", width: "200px" }, children: [
       /* @__PURE__ */ jsx23("ul", { style: { margin: 0, padding: 0, listStyle: "none" }, children: DASH_STYLES.map(({ label, dashArray }) => /* @__PURE__ */ jsxs12(
         "li",
         {
@@ -693,11 +693,11 @@ function SeparatorTool() {
 }
 
 // src/toolbar/WatermarkTool.tsx
-import { useState as useState14 } from "react";
+import { useRef as useRef12 } from "react";
 import { jsx as jsx24, jsxs as jsxs13 } from "react/jsx-runtime";
 function InsertElementTool() {
   const { editorRef } = useEditor();
-  const [isOpen, setIsOpen] = useState14(false);
+  const optionsRef = useRef12(null);
   const handleHeader = () => {
     if (!editorRef.current) return;
     const options = editorRef.current.command.getOptions();
@@ -707,18 +707,18 @@ function InsertElementTool() {
     }
     editorRef.current.command.executeSetZone("header");
   };
-  return /* @__PURE__ */ jsxs13("div", { className: "menu-item__insert-element", onClick: () => setIsOpen(!isOpen), children: [
+  return /* @__PURE__ */ jsxs13("div", { className: "menu-item__insert-element", onClick: () => optionsRef.current?.classList.toggle("visible"), children: [
     /* @__PURE__ */ jsx24("i", { title: "Insert Element" }),
-    /* @__PURE__ */ jsx24("div", { className: "options" + (isOpen ? " visible" : ""), children: /* @__PURE__ */ jsx24("ul", { children: /* @__PURE__ */ jsx24("li", { onClick: handleHeader, children: "Add Header" }) }) })
+    /* @__PURE__ */ jsx24("div", { className: "options", ref: optionsRef, children: /* @__PURE__ */ jsx24("ul", { children: /* @__PURE__ */ jsx24("li", { onClick: handleHeader, children: "Add Header" }) }) })
   ] });
 }
 
 // src/toolbar/PageBreakTool.tsx
-import { useState as useState15 } from "react";
+import { useRef as useRef13 } from "react";
 import { jsx as jsx25, jsxs as jsxs14 } from "react/jsx-runtime";
 function PageBreakTool() {
   const { editorRef } = useEditor();
-  const [isOpen, setIsOpen] = useState15(false);
+  const optionsRef = useRef13(null);
   const handlePageBreak = () => {
     editorRef.current?.command.executePageBreak();
   };
@@ -729,10 +729,10 @@ function PageBreakTool() {
     "div",
     {
       className: "menu-item__page-break",
-      onClick: () => setIsOpen(!isOpen),
+      onClick: () => optionsRef.current?.classList.toggle("visible"),
       children: [
         /* @__PURE__ */ jsx25("i", { title: "Break" }),
-        /* @__PURE__ */ jsx25("div", { className: "options" + (isOpen ? " visible" : ""), children: /* @__PURE__ */ jsxs14("ul", { children: [
+        /* @__PURE__ */ jsx25("div", { className: "options", ref: optionsRef, children: /* @__PURE__ */ jsxs14("ul", { children: [
           /* @__PURE__ */ jsx25("li", { onClick: handlePageBreak, children: "Page Break" }),
           /* @__PURE__ */ jsx25("li", { onClick: handleColumnBreak, children: "Column Break" })
         ] }) })
@@ -797,11 +797,11 @@ function CatalogToggleTool() {
 }
 
 // src/footer/PageModeTool.tsx
-import { useState as useState16 } from "react";
+import { useState as useState6 } from "react";
 import { jsx as jsx28, jsxs as jsxs16 } from "react/jsx-runtime";
 function PageModeTool() {
   const { editorRef } = useEditor();
-  const [visible, setVisible] = useState16(false);
+  const [visible, setVisible] = useState6(false);
   const handlePageMode = (mode) => {
     editorRef.current?.command.executePageMode(mode);
     setVisible(false);
@@ -850,7 +850,7 @@ function FooterStatus() {
 }
 
 // src/footer/EditorModeTool.tsx
-import { useState as useState17, useRef as useRef2 } from "react";
+import { useState as useState7, useRef as useRef14 } from "react";
 import { jsx as jsx30 } from "react/jsx-runtime";
 var MODE_LIST = [
   { mode: "edit", name: "Edit Mode" },
@@ -863,8 +863,8 @@ var MODE_LIST = [
 ];
 function EditorModeTool() {
   const { editorRef } = useEditor();
-  const [editorMode, setEditorMode] = useState17("Edit Mode");
-  const modeIndexRef = useRef2(0);
+  const [editorMode, setEditorMode] = useState7("Edit Mode");
+  const modeIndexRef = useRef14(0);
   const handleModeChange = () => {
     modeIndexRef.current = modeIndexRef.current === MODE_LIST.length - 1 ? 0 : modeIndexRef.current + 1;
     const { name, mode } = MODE_LIST[modeIndexRef.current];
@@ -910,7 +910,7 @@ function PageScaleAddTool() {
 }
 
 // src/footer/PaperSizeTool.tsx
-import { useState as useState18 } from "react";
+import { useState as useState8 } from "react";
 import { jsx as jsx33, jsxs as jsxs19 } from "react/jsx-runtime";
 var SIZES2 = [
   { label: "A4", width: 794, height: 1123, active: true },
@@ -920,7 +920,7 @@ var SIZES2 = [
 ];
 function PaperSizeTool() {
   const { editorRef } = useEditor();
-  const [visible, setVisible] = useState18(false);
+  const [visible, setVisible] = useState8(false);
   const handlePaperSize = (width, height) => {
     editorRef.current?.command.executePaperSize(width, height);
     setVisible(false);
@@ -932,11 +932,11 @@ function PaperSizeTool() {
 }
 
 // src/footer/PaperDirectionTool.tsx
-import { useState as useState19 } from "react";
+import { useState as useState9 } from "react";
 import { jsx as jsx34, jsxs as jsxs20 } from "react/jsx-runtime";
 function PaperDirectionTool() {
   const { editorRef } = useEditor();
-  const [visible, setVisible] = useState19(false);
+  const [visible, setVisible] = useState9(false);
   const handlePaperDirection = (direction) => {
     editorRef.current?.command.executePaperDirection(direction);
     setVisible(false);
@@ -1033,7 +1033,7 @@ function EditorOptionTool() {
 }
 
 // src/footer/WatermarkFooterTool.tsx
-import { useState as useState20, useRef as useRef3, useEffect as useEffect3, useCallback } from "react";
+import { useState as useState10, useRef as useRef15, useEffect as useEffect3, useCallback } from "react";
 import { Fragment as Fragment3, jsx as jsx38, jsxs as jsxs21 } from "react/jsx-runtime";
 var COLOR_PALETTE2 = [
   ["#000000", "#434343", "#666666", "#999999", "#b7b7b7", "#cccccc"],
@@ -1046,20 +1046,20 @@ var FONTS2 = [
 ];
 function WatermarkFooterTool() {
   const { editorRef } = useEditor();
-  const [visible, setVisible] = useState20(false);
-  const [tab, setTab] = useState20("text");
-  const containerRef = useRef3(null);
-  const panelRef = useRef3(null);
-  const fileInputRef = useRef3(null);
-  const [text, setText] = useState20("WATERMARK");
-  const [font, setFont] = useState20("Arial");
-  const [color, setColor] = useState20("#AEB5C0");
-  const [opacity, setOpacity] = useState20(30);
-  const [rotation, setRotation] = useState20(-45);
-  const [inFront, setInFront] = useState20(false);
-  const [imageData, setImageData] = useState20("");
-  const [imgWidth, setImgWidth] = useState20(200);
-  const [imgHeight, setImgHeight] = useState20(200);
+  const [visible, setVisible] = useState10(false);
+  const [tab, setTab] = useState10("text");
+  const containerRef = useRef15(null);
+  const panelRef = useRef15(null);
+  const fileInputRef = useRef15(null);
+  const [text, setText] = useState10("WATERMARK");
+  const [font, setFont] = useState10("Arial");
+  const [color, setColor] = useState10("#AEB5C0");
+  const [opacity, setOpacity] = useState10(30);
+  const [rotation, setRotation] = useState10(-45);
+  const [inFront, setInFront] = useState10(false);
+  const [imageData, setImageData] = useState10("");
+  const [imgWidth, setImgWidth] = useState10(200);
+  const [imgHeight, setImgHeight] = useState10(200);
   useEffect3(() => {
     if (!visible) return;
     const handler = (e) => {
@@ -1298,9 +1298,9 @@ function EditorInner({
   style,
   onDrop: userOnDrop
 }) {
-  const containerRef = useRef4(null);
-  const editorRef = useRef4(null);
-  const [rangeStyle, setRangeStyle] = useState21(null);
+  const containerRef = useRef16(null);
+  const editorRef = useRef16(null);
+  const [rangeStyle, setRangeStyle] = useState11(null);
   const {
     setPageNoList,
     setPageNo,