@windoc/react 0.2.6 → 0.2.8

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,23 +229,29 @@ 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" },
-  { family: "Times New Roman", label: "Serif" }
+  { family: "Arial", label: "Arial" },
+  { family: "Times New Roman", label: "Times New Roman" },
+  { family: "Georgia", label: "Georgia" },
+  { family: "Verdana", label: "Verdana" },
+  { family: "Trebuchet MS", label: "Trebuchet MS" },
+  { family: "Courier New", label: "Courier New" },
+  { family: "Comic Sans MS", label: "Comic Sans MS" },
+  { family: "Impact", label: "Impact" }
 ];
 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 +266,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 +291,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 +317,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 +332,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 +340,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 +364,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 +379,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 +387,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 +429,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 +492,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 +527,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 +545,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 +621,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 +637,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 +699,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 +713,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 +735,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 +803,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 +856,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 +869,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 +916,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 +926,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 +938,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);
@@ -951,6 +957,7 @@ function PaperDirectionTool() {
 }
 
 // src/footer/PaperMarginTool.tsx
+import { pxToCm, cmToPx } from "@windoc/core";
 import { jsx as jsx35 } from "react/jsx-runtime";
 function PaperMarginTool() {
   const { editorRef } = useEditor();
@@ -961,10 +968,10 @@ function PaperMarginTool() {
     new Dialog({
       title: "Page Margins",
       data: [
-        { type: "text", label: "Top Margin", name: "top", required: true, value: `${topMargin}`, placeholder: "Please enter top margin" },
-        { type: "text", label: "Bottom Margin", name: "bottom", required: true, value: `${bottomMargin}`, placeholder: "Please enter bottom margin" },
-        { type: "text", label: "Left Margin", name: "left", required: true, value: `${leftMargin}`, placeholder: "Please enter left margin" },
-        { type: "text", label: "Right Margin", name: "right", required: true, value: `${rightMargin}`, placeholder: "Please enter right margin" }
+        { type: "text", label: "Top Margin (cm)", name: "top", required: true, value: `${pxToCm(topMargin)}`, placeholder: "e.g. 2.54" },
+        { type: "text", label: "Bottom Margin (cm)", name: "bottom", required: true, value: `${pxToCm(bottomMargin)}`, placeholder: "e.g. 2.54" },
+        { type: "text", label: "Left Margin (cm)", name: "left", required: true, value: `${pxToCm(leftMargin)}`, placeholder: "e.g. 2.54" },
+        { type: "text", label: "Right Margin (cm)", name: "right", required: true, value: `${pxToCm(rightMargin)}`, placeholder: "e.g. 2.54" }
       ],
       onConfirm: (payload) => {
         const top = payload.find((p) => p.name === "top")?.value;
@@ -976,10 +983,10 @@ function PaperMarginTool() {
         const right = payload.find((p) => p.name === "right")?.value;
         if (!right) return;
         editorRef.current?.command.executeSetPaperMargin([
-          Number(top),
-          Number(right),
-          Number(bottom),
-          Number(left)
+          cmToPx(Number(top)),
+          cmToPx(Number(right)),
+          cmToPx(Number(bottom)),
+          cmToPx(Number(left))
         ]);
       }
     });
@@ -1033,7 +1040,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 +1053,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) => {
@@ -1142,85 +1149,95 @@ function WatermarkFooterTool() {
   };
   return /* @__PURE__ */ jsxs21("div", { className: "watermark-footer", ref: containerRef, onClick: () => setVisible(!visible), children: [
     /* @__PURE__ */ jsx38("i", { title: "Watermark" }),
-    visible && /* @__PURE__ */ jsxs21("div", { className: "watermark-footer-panel", ref: panelRef, onClick: (e) => e.stopPropagation(), children: [
-      /* @__PURE__ */ jsxs21("div", { className: "wm-panel-tabs", children: [
-        /* @__PURE__ */ jsx38("button", { className: `wm-panel-tab ${tab === "text" ? "active" : ""}`, onClick: () => setTab("text"), children: "Text" }),
-        /* @__PURE__ */ jsx38("button", { className: `wm-panel-tab ${tab === "image" ? "active" : ""}`, onClick: () => setTab("image"), children: "Image" })
-      ] }),
-      /* @__PURE__ */ jsxs21("div", { className: "wm-panel-body", children: [
-        tab === "text" ? /* @__PURE__ */ jsxs21(Fragment3, { children: [
-          /* @__PURE__ */ jsxs21("div", { className: "wm-panel-field", children: [
-            /* @__PURE__ */ jsx38("label", { children: "Text" }),
-            /* @__PURE__ */ jsx38("input", { type: "text", value: text, onChange: (e) => setText(e.target.value), placeholder: "Watermark text" })
+    visible && /* @__PURE__ */ jsxs21(Fragment3, { children: [
+      /* @__PURE__ */ jsx38("div", { className: "wm-panel-mask", onClick: (e) => {
+        e.stopPropagation();
+        setVisible(false);
+      } }),
+      /* @__PURE__ */ jsxs21("div", { className: "watermark-footer-panel", ref: panelRef, onClick: (e) => e.stopPropagation(), children: [
+        /* @__PURE__ */ jsxs21("div", { className: "wm-panel-title", children: [
+          /* @__PURE__ */ jsx38("span", { children: "Watermark" }),
+          /* @__PURE__ */ jsx38("i", { onClick: () => setVisible(false) })
+        ] }),
+        /* @__PURE__ */ jsxs21("div", { className: "wm-panel-tabs", children: [
+          /* @__PURE__ */ jsx38("button", { className: `wm-panel-tab ${tab === "text" ? "active" : ""}`, onClick: () => setTab("text"), children: "Text" }),
+          /* @__PURE__ */ jsx38("button", { className: `wm-panel-tab ${tab === "image" ? "active" : ""}`, onClick: () => setTab("image"), children: "Image" })
+        ] }),
+        /* @__PURE__ */ jsxs21("div", { className: "wm-panel-body", children: [
+          tab === "text" ? /* @__PURE__ */ jsxs21(Fragment3, { children: [
+            /* @__PURE__ */ jsxs21("div", { className: "wm-panel-field", children: [
+              /* @__PURE__ */ jsx38("label", { children: "Text" }),
+              /* @__PURE__ */ jsx38("input", { type: "text", value: text, onChange: (e) => setText(e.target.value), placeholder: "Watermark text" })
+            ] }),
+            /* @__PURE__ */ jsxs21("div", { className: "wm-panel-field", children: [
+              /* @__PURE__ */ jsx38("label", { children: "Font" }),
+              /* @__PURE__ */ jsx38("select", { value: font, onChange: (e) => setFont(e.target.value), children: FONTS2.map((f) => /* @__PURE__ */ jsx38("option", { value: f.family, children: f.label }, f.family)) })
+            ] }),
+            /* @__PURE__ */ jsxs21("div", { className: "wm-panel-field", children: [
+              /* @__PURE__ */ jsx38("label", { children: "Color" }),
+              /* @__PURE__ */ jsx38("div", { className: "wm-panel-colors", children: COLOR_PALETTE2.flat().map((c) => /* @__PURE__ */ jsx38(
+                "div",
+                {
+                  className: `wm-panel-color ${color.toLowerCase() === c.toLowerCase() ? "active" : ""}`,
+                  style: { backgroundColor: c },
+                  onClick: () => setColor(c)
+                },
+                c
+              )) })
+            ] })
+          ] }) : /* @__PURE__ */ jsxs21(Fragment3, { children: [
+            /* @__PURE__ */ jsxs21("div", { className: "wm-panel-field", children: [
+              /* @__PURE__ */ jsx38("label", { children: "Image" }),
+              /* @__PURE__ */ jsxs21("div", { style: { display: "flex", alignItems: "center", gap: "6px" }, children: [
+                /* @__PURE__ */ jsx38("button", { className: "wm-panel-upload", onClick: () => fileInputRef.current?.click(), children: "Choose File" }),
+                /* @__PURE__ */ jsx38("input", { ref: fileInputRef, type: "file", accept: "image/*", style: { display: "none" }, onChange: handleFileUpload }),
+                imageData && /* @__PURE__ */ jsx38("span", { style: { fontSize: "11px", color: "#667085" }, children: "Loaded" })
+              ] })
+            ] }),
+            imageData && /* @__PURE__ */ jsx38("div", { className: "wm-panel-field", children: /* @__PURE__ */ jsx38("div", { className: "wm-panel-preview", children: /* @__PURE__ */ jsx38("img", { src: imageData, alt: "preview", style: { maxWidth: "100%", maxHeight: "48px", objectFit: "contain" } }) }) }),
+            /* @__PURE__ */ jsxs21("div", { className: "wm-panel-field-row", children: [
+              /* @__PURE__ */ jsxs21("div", { className: "wm-panel-field wm-panel-field-half", children: [
+                /* @__PURE__ */ jsx38("label", { children: "W" }),
+                /* @__PURE__ */ jsx38("input", { type: "number", value: imgWidth, min: 10, onChange: (e) => setImgWidth(Number(e.target.value)) })
+              ] }),
+              /* @__PURE__ */ jsxs21("div", { className: "wm-panel-field wm-panel-field-half", children: [
+                /* @__PURE__ */ jsx38("label", { children: "H" }),
+                /* @__PURE__ */ jsx38("input", { type: "number", value: imgHeight, min: 10, onChange: (e) => setImgHeight(Number(e.target.value)) })
+              ] })
+            ] })
           ] }),
           /* @__PURE__ */ jsxs21("div", { className: "wm-panel-field", children: [
-            /* @__PURE__ */ jsx38("label", { children: "Font" }),
-            /* @__PURE__ */ jsx38("select", { value: font, onChange: (e) => setFont(e.target.value), children: FONTS2.map((f) => /* @__PURE__ */ jsx38("option", { value: f.family, children: f.label }, f.family)) })
+            /* @__PURE__ */ jsxs21("label", { children: [
+              "Opacity ",
+              /* @__PURE__ */ jsxs21("span", { className: "wm-panel-value", children: [
+                opacity,
+                "%"
+              ] })
+            ] }),
+            /* @__PURE__ */ jsx38("input", { type: "range", min: 0, max: 100, value: opacity, onChange: (e) => setOpacity(Number(e.target.value)), className: "wm-panel-slider" })
           ] }),
           /* @__PURE__ */ jsxs21("div", { className: "wm-panel-field", children: [
-            /* @__PURE__ */ jsx38("label", { children: "Color" }),
-            /* @__PURE__ */ jsx38("div", { className: "wm-panel-colors", children: COLOR_PALETTE2.flat().map((c) => /* @__PURE__ */ jsx38(
-              "div",
-              {
-                className: `wm-panel-color ${color.toLowerCase() === c.toLowerCase() ? "active" : ""}`,
-                style: { backgroundColor: c },
-                onClick: () => setColor(c)
-              },
-              c
-            )) })
-          ] })
-        ] }) : /* @__PURE__ */ jsxs21(Fragment3, { children: [
-          /* @__PURE__ */ jsxs21("div", { className: "wm-panel-field", children: [
-            /* @__PURE__ */ jsx38("label", { children: "Image" }),
-            /* @__PURE__ */ jsxs21("div", { style: { display: "flex", alignItems: "center", gap: "6px" }, children: [
-              /* @__PURE__ */ jsx38("button", { className: "wm-panel-upload", onClick: () => fileInputRef.current?.click(), children: "Choose File" }),
-              /* @__PURE__ */ jsx38("input", { ref: fileInputRef, type: "file", accept: "image/*", style: { display: "none" }, onChange: handleFileUpload }),
-              imageData && /* @__PURE__ */ jsx38("span", { style: { fontSize: "11px", color: "#667085" }, children: "Loaded" })
-            ] })
-          ] }),
-          imageData && /* @__PURE__ */ jsx38("div", { className: "wm-panel-field", children: /* @__PURE__ */ jsx38("div", { className: "wm-panel-preview", children: /* @__PURE__ */ jsx38("img", { src: imageData, alt: "preview", style: { maxWidth: "100%", maxHeight: "48px", objectFit: "contain" } }) }) }),
-          /* @__PURE__ */ jsxs21("div", { className: "wm-panel-field-row", children: [
-            /* @__PURE__ */ jsxs21("div", { className: "wm-panel-field wm-panel-field-half", children: [
-              /* @__PURE__ */ jsx38("label", { children: "W" }),
-              /* @__PURE__ */ jsx38("input", { type: "number", value: imgWidth, min: 10, onChange: (e) => setImgWidth(Number(e.target.value)) })
+            /* @__PURE__ */ jsxs21("label", { children: [
+              "Rotation ",
+              /* @__PURE__ */ jsxs21("span", { className: "wm-panel-value", children: [
+                rotation,
+                "\xB0"
+              ] })
             ] }),
-            /* @__PURE__ */ jsxs21("div", { className: "wm-panel-field wm-panel-field-half", children: [
-              /* @__PURE__ */ jsx38("label", { children: "H" }),
-              /* @__PURE__ */ jsx38("input", { type: "number", value: imgHeight, min: 10, onChange: (e) => setImgHeight(Number(e.target.value)) })
-            ] })
-          ] })
-        ] }),
-        /* @__PURE__ */ jsxs21("div", { className: "wm-panel-field", children: [
-          /* @__PURE__ */ jsxs21("label", { children: [
-            "Opacity ",
-            /* @__PURE__ */ jsxs21("span", { className: "wm-panel-value", children: [
-              opacity,
-              "%"
-            ] })
+            /* @__PURE__ */ jsx38("input", { type: "range", min: -90, max: 90, value: rotation, onChange: (e) => setRotation(Number(e.target.value)), className: "wm-panel-slider" })
           ] }),
-          /* @__PURE__ */ jsx38("input", { type: "range", min: 0, max: 100, value: opacity, onChange: (e) => setOpacity(Number(e.target.value)), className: "wm-panel-slider" })
-        ] }),
-        /* @__PURE__ */ jsxs21("div", { className: "wm-panel-field", children: [
-          /* @__PURE__ */ jsxs21("label", { children: [
-            "Rotation ",
-            /* @__PURE__ */ jsxs21("span", { className: "wm-panel-value", children: [
-              rotation,
-              "\xB0"
+          /* @__PURE__ */ jsxs21("div", { className: "wm-panel-field", children: [
+            /* @__PURE__ */ jsx38("label", { children: "Position" }),
+            /* @__PURE__ */ jsxs21("div", { className: "wm-panel-toggle", children: [
+              /* @__PURE__ */ jsx38("button", { className: !inFront ? "active" : "", onClick: () => setInFront(false), children: "Behind" }),
+              /* @__PURE__ */ jsx38("button", { className: inFront ? "active" : "", onClick: () => setInFront(true), children: "In Front" })
             ] })
-          ] }),
-          /* @__PURE__ */ jsx38("input", { type: "range", min: -90, max: 90, value: rotation, onChange: (e) => setRotation(Number(e.target.value)), className: "wm-panel-slider" })
-        ] }),
-        /* @__PURE__ */ jsxs21("div", { className: "wm-panel-field", children: [
-          /* @__PURE__ */ jsx38("label", { children: "Position" }),
-          /* @__PURE__ */ jsxs21("div", { className: "wm-panel-toggle", children: [
-            /* @__PURE__ */ jsx38("button", { className: !inFront ? "active" : "", onClick: () => setInFront(false), children: "Behind" }),
-            /* @__PURE__ */ jsx38("button", { className: inFront ? "active" : "", onClick: () => setInFront(true), children: "In Front" })
           ] })
+        ] }),
+        /* @__PURE__ */ jsxs21("div", { className: "wm-panel-actions", children: [
+          /* @__PURE__ */ jsx38("button", { className: "wm-panel-btn-delete", onClick: handleDelete, children: "Remove" }),
+          /* @__PURE__ */ jsx38("button", { className: "wm-panel-btn-apply", onClick: handleApply, children: "Apply" })
         ] })
-      ] }),
-      /* @__PURE__ */ jsxs21("div", { className: "wm-panel-actions", children: [
-        /* @__PURE__ */ jsx38("button", { className: "wm-panel-btn-delete", onClick: handleDelete, children: "Remove" }),
-        /* @__PURE__ */ jsx38("button", { className: "wm-panel-btn-apply", onClick: handleApply, children: "Apply" })
       ] })
     ] })
   ] });
@@ -1298,9 +1315,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,
@@ -1423,7 +1440,9 @@ function EditorInner({
       ]);
       const closeDropdowns = (evt) => {
         const visibleDom = document.querySelector(".visible");
-        if (!visibleDom || visibleDom.contains(evt.target)) return;
+        if (!visibleDom) return;
+        const parent = visibleDom.parentElement;
+        if (parent && parent.contains(evt.target)) return;
         visibleDom.classList.remove("visible");
       };
       window.addEventListener("click", closeDropdowns, { capture: true });