@windoc/react 0.2.4 → 0.2.6

package/dist/index.js

@@ -77,7 +77,7 @@ __export(index_exports, {
 module.exports = __toCommonJS(index_exports);
 
 // src/Editor.tsx
-var import_react12 = require("react");
+var import_react21 = require("react");
 
 // src/EditorContext.tsx
 var import_react = require("react");
@@ -178,60 +178,13 @@ function RedoTool() {
 }
 
 // src/toolbar/ColumnTool.tsx
-var import_react4 = require("react");
-
-// src/utils/useDropdown.ts
 var import_react3 = require("react");
-function useDropdown() {
-  const [isOpen, setIsOpen] = (0, import_react3.useState)(false);
-  const [position, setPosition] = (0, import_react3.useState)({ top: 0, left: 0 });
-  const triggerRef = (0, import_react3.useRef)(null);
-  const open = () => {
-    if (triggerRef.current) {
-      const rect = triggerRef.current.getBoundingClientRect();
-      setPosition({ top: rect.bottom + 2, left: rect.left });
-    }
-    setIsOpen(true);
-  };
-  const close = () => setIsOpen(false);
-  const toggle = () => isOpen ? close() : open();
-  const portalStyle = {
-    position: "fixed",
-    top: position.top,
-    left: position.left,
-    zIndex: 9999
-  };
-  (0, import_react3.useEffect)(() => {
-    if (!isOpen) return;
-    const handler = (e) => {
-      if (triggerRef.current && !triggerRef.current.contains(e.target)) {
-        close();
-      }
-    };
-    document.addEventListener("mousedown", handler);
-    return () => document.removeEventListener("mousedown", handler);
-  }, [isOpen]);
-  return { triggerRef, isOpen, toggle, open, close, portalStyle };
-}
-
-// src/utils/DropdownPortal.tsx
-var import_react_dom = require("react-dom");
 var import_jsx_runtime5 = require("react/jsx-runtime");
-function DropdownPortal({ isOpen, style, className, wrapperClassName, children }) {
-  if (!isOpen) return null;
-  return (0, import_react_dom.createPortal)(
-    /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("div", { className: `menu-item menu-item-portal${wrapperClassName ? ` ${wrapperClassName}` : ""}`, style, children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("div", { className, children }) }),
-    document.body
-  );
-}
-
-// src/toolbar/ColumnTool.tsx
-var import_jsx_runtime6 = require("react/jsx-runtime");
 function ColumnTool() {
   const { editorRef } = useEditor();
-  const { triggerRef, isOpen, toggle, portalStyle } = useDropdown();
-  const [currentColumns, setCurrentColumns] = (0, import_react4.useState)(1);
-  const [gap, setGap] = (0, import_react4.useState)(20);
+  const [isOpen, setIsOpen] = (0, import_react3.useState)(false);
+  const [currentColumns, setCurrentColumns] = (0, import_react3.useState)(1);
+  const [gap, setGap] = (0, import_react3.useState)(20);
   const handleColumn = (col) => {
     editorRef.current?.command.executeColumnCount(col);
     setCurrentColumns(col);
@@ -241,18 +194,18 @@ function ColumnTool() {
     setGap(clampedValue);
     editorRef.current?.command.executeColumnGap(clampedValue);
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("div", { className: "menu-item__column", ref: triggerRef, onClick: toggle, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("span", { className: "select", title: "Column Layout", children: currentColumns === 1 ? "1 Column" : `${currentColumns} Columns` }),
-    /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(DropdownPortal, { isOpen, style: portalStyle, className: "options visible", wrapperClassName: "menu-item__column", children: /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("div", { onClick: (e) => e.stopPropagation(), children: [
-      /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("ul", { children: [
-        /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("li", { onClick: () => handleColumn(1), children: "1 Column" }),
-        /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("li", { onClick: () => handleColumn(2), children: "2 Columns" })
+  return /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { className: "menu-item__column", onClick: () => setIsOpen(!isOpen), children: [
+    /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("span", { className: "select", title: "Column Layout", children: currentColumns === 1 ? "1 Column" : `${currentColumns} Columns` }),
+    /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("div", { className: "options" + (isOpen ? " visible" : ""), children: /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { onClick: (e) => e.stopPropagation(), children: [
+      /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("ul", { children: [
+        /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("li", { onClick: () => handleColumn(1), children: "1 Column" }),
+        /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("li", { onClick: () => handleColumn(2), children: "2 Columns" })
       ] }),
-      currentColumns > 1 && /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(import_jsx_runtime6.Fragment, { children: [
-        /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("div", { className: "option-divider" }),
-        /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("div", { className: "option-row", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("label", { children: "Gap (px)" }),
-          /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+      currentColumns > 1 && /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(import_jsx_runtime5.Fragment, { children: [
+        /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("div", { className: "option-divider" }),
+        /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { className: "option-row", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("label", { children: "Gap (px)" }),
+          /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
             "input",
             {
               type: "number",
@@ -270,16 +223,16 @@ function ColumnTool() {
 }
 
 // src/toolbar/TableTool.tsx
-var import_react5 = require("react");
+var import_react4 = require("react");
 var import_lucide_react3 = require("lucide-react");
-var import_jsx_runtime7 = require("react/jsx-runtime");
+var import_jsx_runtime6 = require("react/jsx-runtime");
 function TableTool() {
   const { editorRef } = useEditor();
-  const [visible, setVisible] = (0, import_react5.useState)(false);
-  const [hoverRow, setHoverRow] = (0, import_react5.useState)(0);
-  const [hoverCol, setHoverCol] = (0, import_react5.useState)(0);
-  const containerRef = (0, import_react5.useRef)(null);
-  (0, import_react5.useEffect)(() => {
+  const [visible, setVisible] = (0, import_react4.useState)(false);
+  const [hoverRow, setHoverRow] = (0, import_react4.useState)(0);
+  const [hoverCol, setHoverCol] = (0, import_react4.useState)(0);
+  const containerRef = (0, import_react4.useRef)(null);
+  (0, import_react4.useEffect)(() => {
     if (!visible) return;
     const handleClickOutside = (e) => {
       if (containerRef.current && !containerRef.current.contains(e.target)) {
@@ -299,11 +252,11 @@ function TableTool() {
     setHoverRow(0);
     setHoverCol(0);
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("div", { ref: containerRef, className: "menu-item__table", title: "Table", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(import_lucide_react3.Table, { size: 16, onClick: () => setVisible(!visible), style: { cursor: "pointer" } }),
-    visible && /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("div", { className: "table-dropdown", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("div", { className: "table-dropdown-header", children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("span", { children: hoverRow > 0 ? `${hoverRow} \xD7 ${hoverCol}` : "Insert Table" }) }),
-      /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("div", { className: "table-dropdown-grid", onClick: handleInsertTable, children: Array.from({ length: 8 }).map((_, rowIdx) => /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("div", { className: "table-dropdown-row", children: Array.from({ length: 8 }).map((_2, colIdx) => /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("div", { ref: containerRef, className: "menu-item__table", title: "Table", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(import_lucide_react3.Table, { size: 16, onClick: () => setVisible(!visible), style: { cursor: "pointer" } }),
+    visible && /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("div", { className: "table-dropdown", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("div", { className: "table-dropdown-header", children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("span", { children: hoverRow > 0 ? `${hoverRow} \xD7 ${hoverCol}` : "Insert Table" }) }),
+      /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("div", { className: "table-dropdown-grid", onClick: handleInsertTable, children: Array.from({ length: 8 }).map((_, rowIdx) => /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("div", { className: "table-dropdown-row", children: Array.from({ length: 8 }).map((_2, colIdx) => /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
         "div",
         {
           className: `table-dropdown-cell ${rowIdx < hoverRow && colIdx < hoverCol ? "active" : ""}`,
@@ -319,7 +272,8 @@ function TableTool() {
 }
 
 // src/toolbar/TitleTool.tsx
-var import_jsx_runtime8 = require("react/jsx-runtime");
+var import_react5 = require("react");
+var import_jsx_runtime7 = require("react/jsx-runtime");
 var LEVELS = [
   { level: null, label: "Body" },
   { level: "first", label: "Heading 1" },
@@ -331,15 +285,15 @@ var LEVELS = [
 ];
 function TitleTool() {
   const { editorRef, rangeStyle } = useEditor();
-  const { triggerRef, isOpen, toggle, portalStyle } = useDropdown();
+  const [isOpen, setIsOpen] = (0, import_react5.useState)(false);
   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__ */ (0, import_jsx_runtime8.jsxs)("div", { className: "menu-item__title", ref: triggerRef, onClick: toggle, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("span", { className: "select", title: "Toggle Heading", children: activeLabel }),
-    /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(DropdownPortal, { isOpen, style: portalStyle, className: "options visible", wrapperClassName: "menu-item__title", children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("ul", { children: LEVELS.map(({ level, label }) => /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("div", { className: "menu-item__title", onClick: () => setIsOpen(!isOpen), children: [
+    /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("span", { className: "select", title: "Toggle Heading", children: activeLabel }),
+    /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("div", { className: "options" + (isOpen ? " visible" : ""), children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("ul", { children: LEVELS.map(({ level, label }) => /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
       "li",
       {
         className: activeLevel === level ? "active" : "",
@@ -353,22 +307,23 @@ function TitleTool() {
 }
 
 // src/toolbar/FontTool.tsx
-var import_jsx_runtime9 = require("react/jsx-runtime");
+var import_react6 = require("react");
+var import_jsx_runtime8 = require("react/jsx-runtime");
 var FONTS = [
   { family: "Arial", label: "Sans Serif" },
   { family: "Times New Roman", label: "Serif" }
 ];
 function FontTool() {
   const { editorRef, rangeStyle } = useEditor();
-  const { triggerRef, isOpen, toggle, portalStyle } = useDropdown();
+  const [isOpen, setIsOpen] = (0, import_react6.useState)(false);
   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__ */ (0, import_jsx_runtime9.jsxs)("div", { className: "menu-item__font", ref: triggerRef, onClick: toggle, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("span", { className: "select", title: "Font", children: activeLabel }),
-    /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(DropdownPortal, { isOpen, style: portalStyle, className: "options visible", wrapperClassName: "menu-item__font", children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("ul", { children: FONTS.map(({ family, label }) => /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("div", { className: "menu-item__font", onClick: () => setIsOpen(!isOpen), children: [
+    /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("span", { className: "select", title: "Font", children: activeLabel }),
+    /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("div", { className: "options" + (isOpen ? " visible" : ""), children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("ul", { children: FONTS.map(({ family, label }) => /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
       "li",
       {
         "data-family": family,
@@ -383,18 +338,19 @@ function FontTool() {
 }
 
 // src/toolbar/FontSizeTool.tsx
-var import_jsx_runtime10 = require("react/jsx-runtime");
+var import_react7 = require("react");
+var import_jsx_runtime9 = require("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 { triggerRef, isOpen, toggle, portalStyle } = useDropdown();
+  const [isOpen, setIsOpen] = (0, import_react7.useState)(false);
   const activeSize = rangeStyle?.size ?? 16;
   const handleSize = (size) => {
     editorRef.current?.command.executeSize(size);
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("div", { className: "menu-item__size", ref: triggerRef, onClick: toggle, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("span", { className: "select", title: "Font Size", children: activeSize }),
-    /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(DropdownPortal, { isOpen, style: portalStyle, className: "options visible", wrapperClassName: "menu-item__size", children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("ul", { children: SIZES.map((size) => /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("div", { className: "menu-item__size", onClick: () => setIsOpen(!isOpen), children: [
+    /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("span", { className: "select", title: "Font Size", children: activeSize }),
+    /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("div", { className: "options" + (isOpen ? " visible" : ""), children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("ul", { children: SIZES.map((size) => /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
       "li",
       {
         className: activeSize === size ? "active" : "",
@@ -407,19 +363,20 @@ function FontSizeTool() {
 }
 
 // src/toolbar/LineHeightTool.tsx
-var import_jsx_runtime11 = require("react/jsx-runtime");
+var import_react8 = require("react");
+var import_jsx_runtime10 = require("react/jsx-runtime");
 var LINE_HEIGHTS = ["1.0", "1.15", "1.5", "2.0", "2.5"];
 function LineHeightTool() {
   const { editorRef, rangeStyle } = useEditor();
-  const { triggerRef, isOpen, toggle, portalStyle } = useDropdown();
+  const [isOpen, setIsOpen] = (0, import_react8.useState)(false);
   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__ */ (0, import_jsx_runtime11.jsxs)("div", { className: "menu-item__line-height", ref: triggerRef, onClick: toggle, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("span", { className: "select", title: "Line Height", children: activeLabel }),
-    /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(DropdownPortal, { isOpen, style: portalStyle, className: "options visible", wrapperClassName: "menu-item__line-height", children: /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("ul", { children: LINE_HEIGHTS.map((h) => /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("div", { className: "menu-item__line-height", onClick: () => setIsOpen(!isOpen), children: [
+    /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("span", { className: "select", title: "Line Height", children: activeLabel }),
+    /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("div", { className: "options" + (isOpen ? " visible" : ""), children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("ul", { children: LINE_HEIGHTS.map((h) => /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
       "li",
       {
         className: String(activeMargin) === h || activeLabel === h ? "active" : "",
@@ -432,8 +389,9 @@ function LineHeightTool() {
 }
 
 // src/toolbar/ColorTool.tsx
+var import_react9 = require("react");
 var import_lucide_react4 = require("lucide-react");
-var import_jsx_runtime12 = require("react/jsx-runtime");
+var import_jsx_runtime11 = require("react/jsx-runtime");
 var COLOR_PALETTE = [
   ["#000000", "#434343", "#666666", "#999999", "#b7b7b7", "#cccccc", "#d9d9d9", "#efefef", "#f3f3f3", "#ffffff"],
   ["#980000", "#ff0000", "#ff9900", "#ffff00", "#00ff00", "#00ffff", "#4a86e8", "#0000ff", "#9900ff", "#ff00ff"],
@@ -446,7 +404,7 @@ var COLOR_PALETTE = [
 ];
 function ColorTool() {
   const { editorRef, rangeStyle } = useEditor();
-  const { triggerRef, isOpen: visible, toggle, portalStyle } = useDropdown();
+  const [visible, setVisible] = (0, import_react9.useState)(false);
   const activeColor = rangeStyle?.color || "#000000";
   const handleColor = (color) => {
     editorRef.current?.command.executeColor(color);
@@ -454,16 +412,16 @@ function ColorTool() {
   const handleReset = () => {
     editorRef.current?.command.executeColor(null);
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("div", { className: "menu-item__color", ref: triggerRef, title: "Font Color", onClick: toggle, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(import_lucide_react4.Baseline, { size: 16 }),
-    /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("span", { style: { backgroundColor: activeColor } }),
-    /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("input", { id: "color", type: "color", readOnly: true, tabIndex: -1 }),
-    /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(DropdownPortal, { isOpen: visible, style: portalStyle, className: "color-palette-dropdown", wrapperClassName: "menu-item__color", children: /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("div", { onClick: (e) => e.stopPropagation(), children: [
-      /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("button", { className: "color-palette-reset", onClick: handleReset, children: [
-        /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(import_lucide_react4.RotateCcw, { size: 12 }),
+  return /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)("div", { className: "menu-item__color", title: "Font Color", onClick: () => setVisible(!visible), children: [
+    /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(import_lucide_react4.Baseline, { size: 16 }),
+    /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("span", { style: { backgroundColor: activeColor } }),
+    /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("input", { id: "color", type: "color", readOnly: true, tabIndex: -1 }),
+    /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("div", { className: "color-palette-dropdown" + (visible ? " visible" : ""), children: /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)("div", { onClick: (e) => e.stopPropagation(), children: [
+      /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)("button", { className: "color-palette-reset", onClick: handleReset, children: [
+        /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(import_lucide_react4.RotateCcw, { size: 12 }),
         "Reset"
       ] }),
-      /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("div", { className: "color-palette-grid", children: COLOR_PALETTE.map((row, ri) => /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("div", { className: "color-palette-row", children: row.map((color) => /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
+      /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("div", { className: "color-palette-grid", children: COLOR_PALETTE.map((row, ri) => /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("div", { className: "color-palette-row", children: row.map((color) => /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
         "div",
         {
           className: `color-palette-swatch${activeColor.toLowerCase() === color.toLowerCase() ? " active" : ""}`,
@@ -478,8 +436,9 @@ function ColorTool() {
 }
 
 // src/toolbar/HighlightTool.tsx
+var import_react10 = require("react");
 var import_lucide_react5 = require("lucide-react");
-var import_jsx_runtime13 = require("react/jsx-runtime");
+var import_jsx_runtime12 = require("react/jsx-runtime");
 var HIGHLIGHT_PALETTE = [
   ["#000000", "#434343", "#666666", "#999999", "#b7b7b7", "#cccccc", "#d9d9d9", "#efefef", "#f3f3f3", "#ffffff"],
   ["#980000", "#ff0000", "#ff9900", "#ffff00", "#00ff00", "#00ffff", "#4a86e8", "#0000ff", "#9900ff", "#ff00ff"],
@@ -492,7 +451,7 @@ var HIGHLIGHT_PALETTE = [
 ];
 function HighlightTool() {
   const { editorRef, rangeStyle } = useEditor();
-  const { triggerRef, isOpen: visible, toggle, portalStyle } = useDropdown();
+  const [visible, setVisible] = (0, import_react10.useState)(false);
   const activeColor = rangeStyle?.highlight || "";
   const handleColor = (color) => {
     editorRef.current?.command.executeHighlight(color);
@@ -500,16 +459,16 @@ function HighlightTool() {
   const handleReset = () => {
     editorRef.current?.command.executeHighlight(null);
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)("div", { className: "menu-item__highlight", ref: triggerRef, title: "Highlight", onClick: toggle, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(import_lucide_react5.Highlighter, { size: 16 }),
-    /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("span", { style: { backgroundColor: activeColor || "#ffff00" } }),
-    /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("input", { id: "highlight", type: "color", readOnly: true, tabIndex: -1 }),
-    /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(DropdownPortal, { isOpen: visible, style: portalStyle, className: "color-palette-dropdown", wrapperClassName: "menu-item__highlight", children: /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)("div", { onClick: (e) => e.stopPropagation(), children: [
-      /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)("button", { className: "color-palette-reset", onClick: handleReset, children: [
-        /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(import_lucide_react5.RotateCcw, { size: 12 }),
+  return /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("div", { className: "menu-item__highlight", title: "Highlight", onClick: () => setVisible(!visible), children: [
+    /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(import_lucide_react5.Highlighter, { size: 16 }),
+    /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("span", { style: { backgroundColor: activeColor || "#ffff00" } }),
+    /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("input", { id: "highlight", type: "color", readOnly: true, tabIndex: -1 }),
+    /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("div", { className: "color-palette-dropdown" + (visible ? " visible" : ""), children: /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("div", { onClick: (e) => e.stopPropagation(), children: [
+      /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("button", { className: "color-palette-reset", onClick: handleReset, children: [
+        /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(import_lucide_react5.RotateCcw, { size: 12 }),
         "None"
       ] }),
-      /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("div", { className: "color-palette-grid", children: HIGHLIGHT_PALETTE.map((row, ri) => /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("div", { className: "color-palette-row", children: row.map((color) => /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
+      /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("div", { className: "color-palette-grid", children: HIGHLIGHT_PALETTE.map((row, ri) => /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("div", { className: "color-palette-row", children: row.map((color) => /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
         "div",
         {
           className: `color-palette-swatch${activeColor && activeColor.toLowerCase() === color.toLowerCase() ? " active" : ""}`,
@@ -525,87 +484,89 @@ function HighlightTool() {
 
 // src/toolbar/BoldTool.tsx
 var import_lucide_react6 = require("lucide-react");
-var import_jsx_runtime14 = require("react/jsx-runtime");
+var import_jsx_runtime13 = require("react/jsx-runtime");
 function BoldTool() {
   const { editorRef, isApple, rangeStyle } = useEditor();
   const isActive = rangeStyle?.bold === true;
-  return /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("div", { className: `menu-item__bold ${isActive ? "active" : ""}`, title: `Bold(${isApple ? "\u2318" : "Ctrl"}+B)`, onClick: () => editorRef.current?.command.executeBold(), children: /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(import_lucide_react6.Bold, { size: 16 }) });
+  return /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("div", { className: `menu-item__bold ${isActive ? "active" : ""}`, title: `Bold(${isApple ? "\u2318" : "Ctrl"}+B)`, onClick: () => editorRef.current?.command.executeBold(), children: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(import_lucide_react6.Bold, { size: 16 }) });
 }
 
 // src/toolbar/ItalicTool.tsx
 var import_lucide_react7 = require("lucide-react");
-var import_jsx_runtime15 = require("react/jsx-runtime");
+var import_jsx_runtime14 = require("react/jsx-runtime");
 function ItalicTool() {
   const { editorRef, isApple, rangeStyle } = useEditor();
   const isActive = rangeStyle?.italic === true;
-  return /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("div", { className: `menu-item__italic ${isActive ? "active" : ""}`, title: `Italic(${isApple ? "\u2318" : "Ctrl"}+I)`, onClick: () => editorRef.current?.command.executeItalic(), children: /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(import_lucide_react7.Italic, { size: 16 }) });
+  return /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("div", { className: `menu-item__italic ${isActive ? "active" : ""}`, title: `Italic(${isApple ? "\u2318" : "Ctrl"}+I)`, onClick: () => editorRef.current?.command.executeItalic(), children: /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(import_lucide_react7.Italic, { size: 16 }) });
 }
 
 // src/toolbar/UnderlineTool.tsx
+var import_react11 = require("react");
 var import_lucide_react8 = require("lucide-react");
-var import_jsx_runtime16 = require("react/jsx-runtime");
+var import_jsx_runtime15 = require("react/jsx-runtime");
 var STYLES = ["solid", "double", "dashed", "dotted", "wavy"];
 function UnderlineTool() {
   const { editorRef, isApple, rangeStyle } = useEditor();
-  const { triggerRef, isOpen, toggle, portalStyle } = useDropdown();
+  const [isOpen, setIsOpen] = (0, import_react11.useState)(false);
   const isActive = rangeStyle?.underline === true;
-  return /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)("div", { className: `menu-item__underline ${isActive ? "active" : ""}`, ref: triggerRef, title: `Underline(${isApple ? "\u2318" : "Ctrl"}+U)`, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(import_lucide_react8.Underline, { size: 16, onClick: () => editorRef.current?.command.executeUnderline(), style: { cursor: "pointer" } }),
-    /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("span", { className: "select", onClick: toggle }),
-    /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(DropdownPortal, { isOpen, style: portalStyle, className: "options visible", wrapperClassName: "menu-item__underline", children: /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("ul", { children: STYLES.map((style) => /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("li", { "data-decoration-style": style, onClick: () => {
+  return /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)("div", { className: `menu-item__underline ${isActive ? "active" : ""}`, title: `Underline(${isApple ? "\u2318" : "Ctrl"}+U)`, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(import_lucide_react8.Underline, { size: 16, onClick: () => editorRef.current?.command.executeUnderline(), style: { cursor: "pointer" } }),
+    /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("span", { className: "select", onClick: () => setIsOpen(!isOpen) }),
+    /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("div", { className: "options" + (isOpen ? " visible" : ""), children: /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("ul", { children: STYLES.map((style) => /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("li", { "data-decoration-style": style, onClick: () => {
       editorRef.current?.command.executeUnderline({ style });
-    }, children: /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("i", {}) }, style)) }) })
+    }, children: /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("i", {}) }, style)) }) })
   ] });
 }
 
 // src/toolbar/StrikeoutTool.tsx
 var import_lucide_react9 = require("lucide-react");
-var import_jsx_runtime17 = require("react/jsx-runtime");
+var import_jsx_runtime16 = require("react/jsx-runtime");
 function StrikeoutTool() {
   const { editorRef, rangeStyle } = useEditor();
   const isActive = rangeStyle?.strikeout === true;
-  return /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("div", { className: `menu-item__strikeout ${isActive ? "active" : ""}`, title: "Strikethrough", onClick: () => editorRef.current?.command.executeStrikeout(), children: /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(import_lucide_react9.Strikethrough, { size: 16 }) });
+  return /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("div", { className: `menu-item__strikeout ${isActive ? "active" : ""}`, title: "Strikethrough", onClick: () => editorRef.current?.command.executeStrikeout(), children: /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(import_lucide_react9.Strikethrough, { size: 16 }) });
 }
 
 // src/toolbar/LeftAlignTool.tsx
 var import_lucide_react10 = require("lucide-react");
-var import_jsx_runtime18 = require("react/jsx-runtime");
+var import_jsx_runtime17 = require("react/jsx-runtime");
 function LeftAlignTool() {
   const { editorRef, isApple, rangeStyle } = useEditor();
   const isActive = !rangeStyle?.rowFlex || rangeStyle.rowFlex === "left";
-  return /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("div", { className: `menu-item__left ${isActive ? "active" : ""}`, title: `Left align(${isApple ? "\u2318" : "Ctrl"}+L)`, onClick: () => editorRef.current?.command.executeRowFlex("left"), children: /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(import_lucide_react10.AlignLeft, { size: 16 }) });
+  return /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("div", { className: `menu-item__left ${isActive ? "active" : ""}`, title: `Left align(${isApple ? "\u2318" : "Ctrl"}+L)`, onClick: () => editorRef.current?.command.executeRowFlex("left"), children: /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(import_lucide_react10.AlignLeft, { size: 16 }) });
 }
 
 // src/toolbar/CenterAlignTool.tsx
 var import_lucide_react11 = require("lucide-react");
-var import_jsx_runtime19 = require("react/jsx-runtime");
+var import_jsx_runtime18 = require("react/jsx-runtime");
 function CenterAlignTool() {
   const { editorRef, isApple, rangeStyle } = useEditor();
   const isActive = rangeStyle?.rowFlex === "center";
-  return /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("div", { className: `menu-item__center ${isActive ? "active" : ""}`, title: `Center align(${isApple ? "\u2318" : "Ctrl"}+E)`, onClick: () => editorRef.current?.command.executeRowFlex("center"), children: /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(import_lucide_react11.AlignCenter, { size: 16 }) });
+  return /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("div", { className: `menu-item__center ${isActive ? "active" : ""}`, title: `Center align(${isApple ? "\u2318" : "Ctrl"}+E)`, onClick: () => editorRef.current?.command.executeRowFlex("center"), children: /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(import_lucide_react11.AlignCenter, { size: 16 }) });
 }
 
 // src/toolbar/RightAlignTool.tsx
 var import_lucide_react12 = require("lucide-react");
-var import_jsx_runtime20 = require("react/jsx-runtime");
+var import_jsx_runtime19 = require("react/jsx-runtime");
 function RightAlignTool() {
   const { editorRef, isApple, rangeStyle } = useEditor();
   const isActive = rangeStyle?.rowFlex === "right";
-  return /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("div", { className: `menu-item__right ${isActive ? "active" : ""}`, title: `Right align(${isApple ? "\u2318" : "Ctrl"}+R)`, onClick: () => editorRef.current?.command.executeRowFlex("right"), children: /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(import_lucide_react12.AlignRight, { size: 16 }) });
+  return /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("div", { className: `menu-item__right ${isActive ? "active" : ""}`, title: `Right align(${isApple ? "\u2318" : "Ctrl"}+R)`, onClick: () => editorRef.current?.command.executeRowFlex("right"), children: /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(import_lucide_react12.AlignRight, { size: 16 }) });
 }
 
 // src/toolbar/JustifyTool.tsx
 var import_lucide_react13 = require("lucide-react");
-var import_jsx_runtime21 = require("react/jsx-runtime");
+var import_jsx_runtime20 = require("react/jsx-runtime");
 function JustifyTool() {
   const { editorRef, isApple, rangeStyle } = useEditor();
   const isActive = rangeStyle?.rowFlex === "justify" || rangeStyle?.rowFlex === "alignment";
-  return /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("div", { className: `menu-item__justify ${isActive ? "active" : ""}`, title: `Distribute(${isApple ? "\u2318" : "Ctrl"}+Shift+J)`, onClick: () => editorRef.current?.command.executeRowFlex("justify"), children: /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(import_lucide_react13.AlignJustify, { size: 16 }) });
+  return /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("div", { className: `menu-item__justify ${isActive ? "active" : ""}`, title: `Distribute(${isApple ? "\u2318" : "Ctrl"}+Shift+J)`, onClick: () => editorRef.current?.command.executeRowFlex("justify"), children: /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(import_lucide_react13.AlignJustify, { size: 16 }) });
 }
 
 // src/toolbar/ListTool.tsx
+var import_react12 = require("react");
 var import_lucide_react14 = require("lucide-react");
-var import_jsx_runtime22 = require("react/jsx-runtime");
+var import_jsx_runtime21 = require("react/jsx-runtime");
 var OL_PRESETS = [
   { preset: "olDefault", label: "Default", preview: ["1.", "a.", "i."] },
   { preset: "olParen", label: "Parenthesis", preview: ["1)", "a)", "i)"] },
@@ -623,22 +584,22 @@ var UL_PRESETS = [
   { preset: "ulCheckArr", label: "Check Arrow", preview: ["\u27A4", "\u25CB", "\u25A0"] }
 ];
 function PresetCell({ option, onClick }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
     "div",
     {
       onClick,
       className: "list-preset-cell",
       title: option.label,
-      children: option.preview.map((item, i) => /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)("div", { className: "list-preset-line", style: { paddingLeft: `${i * 10}px` }, children: [
-        /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("span", { className: "list-preset-marker", children: item }),
-        /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("span", { className: "list-preset-text" })
+      children: option.preview.map((item, i) => /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)("div", { className: "list-preset-line", style: { paddingLeft: `${i * 10}px` }, children: [
+        /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("span", { className: "list-preset-marker", children: item }),
+        /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("span", { className: "list-preset-text" })
       ] }, i))
     }
   );
 }
 function ListTool() {
   const { editorRef, isApple, rangeStyle } = useEditor();
-  const { triggerRef, isOpen, toggle, portalStyle } = useDropdown();
+  const [isOpen, setIsOpen] = (0, import_react12.useState)(false);
   const isActive = !!rangeStyle?.listType;
   const handleList = (type, style) => {
     editorRef.current?.command.executeList(type, style);
@@ -655,11 +616,11 @@ function ListTool() {
     e.stopPropagation();
     editorRef.current?.command.executeListOutdent();
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)("div", { ref: triggerRef, className: `menu-item__list ${isActive ? "active" : ""}`, title: `List(${isApple ? "\u2318" : "Ctrl"}+Shift+U)`, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(import_lucide_react14.List, { size: 16, onClick: toggle, style: { cursor: "pointer" } }),
-    /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(DropdownPortal, { isOpen, style: portalStyle, className: "options visible", wrapperClassName: "menu-item__list", children: /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)("div", { style: { padding: "8px", width: "320px" }, children: [
-      /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)("div", { style: { display: "flex", gap: "4px", marginBottom: "8px" }, children: [
-        /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)("div", { className: `menu-item__list ${isActive ? "active" : ""}`, title: `List(${isApple ? "\u2318" : "Ctrl"}+Shift+U)`, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(import_lucide_react14.List, { size: 16, onClick: () => setIsOpen(!isOpen), style: { cursor: "pointer" } }),
+    /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("div", { className: "options" + (isOpen ? " visible" : ""), children: /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)("div", { style: { padding: "8px", width: "320px" }, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)("div", { style: { display: "flex", gap: "4px", marginBottom: "8px" }, children: [
+        /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
           "button",
           {
             onClick: () => handleList("ul", "checkbox"),
@@ -667,15 +628,15 @@ function ListTool() {
             children: "Checkbox"
           }
         ),
-        /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("button", { onClick: handleIndent, className: "list-quick-btn", title: "Indent (Tab)", children: /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(import_lucide_react14.Indent, { size: 14 }) }),
-        /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("button", { onClick: handleOutdent, className: "list-quick-btn", title: "Outdent (Shift+Tab)", children: /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(import_lucide_react14.Outdent, { size: 14 }) })
+        /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("button", { onClick: handleIndent, className: "list-quick-btn", title: "Indent (Tab)", children: /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(import_lucide_react14.Indent, { size: 14 }) }),
+        /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("button", { onClick: handleOutdent, className: "list-quick-btn", title: "Outdent (Shift+Tab)", children: /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(import_lucide_react14.Outdent, { size: 14 }) })
       ] }),
-      /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)("div", { style: { marginBottom: "8px" }, children: [
-        /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)("div", { style: { display: "flex", alignItems: "center", gap: "4px", fontSize: "11px", color: "#667085", marginBottom: "6px", fontWeight: 500 }, children: [
-          /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(import_lucide_react14.ListOrdered, { size: 12 }),
+      /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)("div", { style: { marginBottom: "8px" }, children: [
+        /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)("div", { style: { display: "flex", alignItems: "center", gap: "4px", fontSize: "11px", color: "#667085", marginBottom: "6px", fontWeight: 500 }, children: [
+          /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(import_lucide_react14.ListOrdered, { size: 12 }),
           "Ordered List"
         ] }),
-        /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("div", { className: "list-preset-grid", children: OL_PRESETS.map((option) => /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("div", { className: "list-preset-grid", children: OL_PRESETS.map((option) => /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
           PresetCell,
           {
             option,
@@ -684,12 +645,12 @@ function ListTool() {
           option.preset
         )) })
       ] }),
-      /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)("div", { children: [
-        /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)("div", { style: { display: "flex", alignItems: "center", gap: "4px", fontSize: "11px", color: "#667085", marginBottom: "6px", fontWeight: 500 }, children: [
-          /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(import_lucide_react14.List, { size: 12 }),
+      /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)("div", { children: [
+        /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)("div", { style: { display: "flex", alignItems: "center", gap: "4px", fontSize: "11px", color: "#667085", marginBottom: "6px", fontWeight: 500 }, children: [
+          /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(import_lucide_react14.List, { size: 12 }),
           "Unordered List"
         ] }),
-        /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("div", { className: "list-preset-grid", children: UL_PRESETS.map((option) => /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("div", { className: "list-preset-grid", children: UL_PRESETS.map((option) => /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
           PresetCell,
           {
             option,
@@ -704,7 +665,7 @@ function ListTool() {
 
 // src/toolbar/ImageTool.tsx
 var import_lucide_react15 = require("lucide-react");
-var import_jsx_runtime23 = require("react/jsx-runtime");
+var import_jsx_runtime22 = require("react/jsx-runtime");
 function ImageTool() {
   const { editorRef } = useEditor();
   const handleImageUpload = (e) => {
@@ -725,16 +686,16 @@ function ImageTool() {
     };
     e.target.value = "";
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)("div", { className: "menu-item__image", onClick: () => document.getElementById("image")?.click(), children: [
-    /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(import_lucide_react15.Image, { size: 16 }),
-    /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("input", { type: "file", id: "image", accept: ".png, .jpg, .jpeg, .svg, .gif", onChange: handleImageUpload })
+  return /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)("div", { className: "menu-item__image", onClick: () => document.getElementById("image")?.click(), children: [
+    /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(import_lucide_react15.Image, { size: 16 }),
+    /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("input", { type: "file", id: "image", accept: ".png, .jpg, .jpeg, .svg, .gif", onChange: handleImageUpload })
   ] });
 }
 
 // src/toolbar/SeparatorTool.tsx
-var import_react6 = require("react");
+var import_react13 = require("react");
 var import_lucide_react16 = require("lucide-react");
-var import_jsx_runtime24 = require("react/jsx-runtime");
+var import_jsx_runtime23 = require("react/jsx-runtime");
 var DASH_STYLES = [
   { label: "Solid", dashArray: [] },
   { label: "Dotted", dashArray: [1, 1] },
@@ -748,22 +709,22 @@ var LINE_WIDTHS = [
 ];
 function SeparatorTool() {
   const { editorRef } = useEditor();
-  const { triggerRef, isOpen, toggle, portalStyle } = useDropdown();
-  const [selectedWidth, setSelectedWidth] = (0, import_react6.useState)(1);
+  const [isOpen, setIsOpen] = (0, import_react13.useState)(false);
+  const [selectedWidth, setSelectedWidth] = (0, import_react13.useState)(1);
   const lineColor = "#344054";
   const handleSeparator = (dashArray) => {
     editorRef.current?.command.executeSeparator(dashArray, { lineWidth: selectedWidth });
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)("div", { className: "menu-item__separator", ref: triggerRef, title: "Separator", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(import_lucide_react16.Minus, { size: 16, onClick: toggle, style: { cursor: "pointer" } }),
-    /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(DropdownPortal, { isOpen, style: portalStyle, className: "options visible", wrapperClassName: "menu-item__separator", children: /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)("div", { style: { padding: "8px 10px 10px", width: "200px" }, children: [
-      /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("ul", { style: { margin: 0, padding: 0, listStyle: "none" }, children: DASH_STYLES.map(({ label, dashArray }) => /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)("div", { className: "menu-item__separator", title: "Separator", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(import_lucide_react16.Minus, { size: 16, onClick: () => setIsOpen(!isOpen), style: { cursor: "pointer" } }),
+    /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("div", { className: "options" + (isOpen ? " visible" : ""), children: /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)("div", { style: { padding: "8px 10px 10px", width: "200px" }, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("ul", { style: { margin: 0, padding: 0, listStyle: "none" }, children: DASH_STYLES.map(({ label, dashArray }) => /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)(
         "li",
         {
           onClick: () => handleSeparator(dashArray),
           style: { display: "flex", alignItems: "center", gap: "10px", padding: "5px 6px", cursor: "pointer", borderRadius: "4px" },
           children: [
-            /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("svg", { style: { flex: 1, minWidth: 0, overflow: "hidden" }, height: "8", children: /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
+            /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("svg", { style: { flex: 1, minWidth: 0, overflow: "hidden" }, height: "8", children: /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
               "line",
               {
                 x1: "0",
@@ -775,14 +736,14 @@ function SeparatorTool() {
                 strokeDasharray: dashArray.length ? dashArray.join(",") : "none"
               }
             ) }),
-            /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("span", { style: { fontSize: "11px", color: "#475467", whiteSpace: "nowrap", flexShrink: 0 }, children: label })
+            /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("span", { style: { fontSize: "11px", color: "#475467", whiteSpace: "nowrap", flexShrink: 0 }, children: label })
           ]
         },
         label
       )) }),
-      /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)("div", { style: { borderTop: "1px solid #e4e7ec", marginTop: "8px", paddingTop: "8px" }, children: [
-        /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("div", { style: { fontSize: "11px", color: "#667085", marginBottom: "6px", fontWeight: 500 }, children: "Line Width" }),
-        /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("div", { style: { display: "flex", gap: "4px" }, children: LINE_WIDTHS.map(({ label, value }) => /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
+      /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)("div", { style: { borderTop: "1px solid #e4e7ec", marginTop: "8px", paddingTop: "8px" }, children: [
+        /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("div", { style: { fontSize: "11px", color: "#667085", marginBottom: "6px", fontWeight: 500 }, children: "Line Width" }),
+        /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("div", { style: { display: "flex", gap: "4px" }, children: LINE_WIDTHS.map(({ label, value }) => /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
           "button",
           {
             onClick: (e) => {
@@ -810,10 +771,11 @@ function SeparatorTool() {
 }
 
 // src/toolbar/WatermarkTool.tsx
-var import_jsx_runtime25 = require("react/jsx-runtime");
+var import_react14 = require("react");
+var import_jsx_runtime24 = require("react/jsx-runtime");
 function InsertElementTool() {
   const { editorRef } = useEditor();
-  const { triggerRef, isOpen, toggle, portalStyle } = useDropdown();
+  const [isOpen, setIsOpen] = (0, import_react14.useState)(false);
   const handleHeader = () => {
     if (!editorRef.current) return;
     const options = editorRef.current.command.getOptions();
@@ -823,34 +785,34 @@ function InsertElementTool() {
     }
     editorRef.current.command.executeSetZone("header");
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)("div", { className: "menu-item__insert-element", ref: triggerRef, onClick: toggle, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("i", { title: "Insert Element" }),
-    /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(DropdownPortal, { isOpen, style: portalStyle, className: "options visible", wrapperClassName: "menu-item__insert-element", children: /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("ul", { children: /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("li", { onClick: handleHeader, children: "Add Header" }) }) })
+  return /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)("div", { className: "menu-item__insert-element", onClick: () => setIsOpen(!isOpen), children: [
+    /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("i", { title: "Insert Element" }),
+    /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("div", { className: "options" + (isOpen ? " visible" : ""), children: /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("ul", { children: /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("li", { onClick: handleHeader, children: "Add Header" }) }) })
   ] });
 }
 
 // src/toolbar/PageBreakTool.tsx
-var import_jsx_runtime26 = require("react/jsx-runtime");
+var import_react15 = require("react");
+var import_jsx_runtime25 = require("react/jsx-runtime");
 function PageBreakTool() {
   const { editorRef } = useEditor();
-  const { triggerRef, isOpen, toggle, portalStyle } = useDropdown();
+  const [isOpen, setIsOpen] = (0, import_react15.useState)(false);
   const handlePageBreak = () => {
     editorRef.current?.command.executePageBreak();
   };
   const handleColumnBreak = () => {
     editorRef.current?.command.executeColumnBreak();
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)(
     "div",
     {
       className: "menu-item__page-break",
-      ref: triggerRef,
-      onClick: toggle,
+      onClick: () => setIsOpen(!isOpen),
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime26.jsx)("i", { title: "Break" }),
-        /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(DropdownPortal, { isOpen, style: portalStyle, className: "options visible", wrapperClassName: "menu-item__page-break", children: /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)("ul", { children: [
-          /* @__PURE__ */ (0, import_jsx_runtime26.jsx)("li", { onClick: handlePageBreak, children: "Page Break" }),
-          /* @__PURE__ */ (0, import_jsx_runtime26.jsx)("li", { onClick: handleColumnBreak, children: "Column Break" })
+        /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("i", { title: "Break" }),
+        /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("div", { className: "options" + (isOpen ? " visible" : ""), children: /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)("ul", { children: [
+          /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("li", { onClick: handlePageBreak, children: "Page Break" }),
+          /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("li", { onClick: handleColumnBreak, children: "Column Break" })
         ] }) })
       ]
     }
@@ -858,116 +820,116 @@ function PageBreakTool() {
 }
 
 // src/EditorToolbar.tsx
-var import_jsx_runtime27 = require("react/jsx-runtime");
+var import_jsx_runtime26 = require("react/jsx-runtime");
 function EditorToolbar() {
-  return /* @__PURE__ */ (0, import_jsx_runtime27.jsxs)("div", { className: "menu", "editor-component": "menu", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime27.jsxs)("div", { className: "menu-item", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(UndoTool, {}),
-      /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(RedoTool, {})
+  return /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)("div", { className: "menu", "editor-component": "menu", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)("div", { className: "menu-item", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(UndoTool, {}),
+      /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(RedoTool, {})
     ] }),
-    /* @__PURE__ */ (0, import_jsx_runtime27.jsx)("div", { className: "menu-divider" }),
-    /* @__PURE__ */ (0, import_jsx_runtime27.jsx)("div", { className: "menu-item", children: /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(ColumnTool, {}) }),
-    /* @__PURE__ */ (0, import_jsx_runtime27.jsx)("div", { className: "menu-divider" }),
-    /* @__PURE__ */ (0, import_jsx_runtime27.jsxs)("div", { className: "menu-item", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(PageBreakTool, {}),
-      /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(SeparatorTool, {})
+    /* @__PURE__ */ (0, import_jsx_runtime26.jsx)("div", { className: "menu-divider" }),
+    /* @__PURE__ */ (0, import_jsx_runtime26.jsx)("div", { className: "menu-item", children: /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(ColumnTool, {}) }),
+    /* @__PURE__ */ (0, import_jsx_runtime26.jsx)("div", { className: "menu-divider" }),
+    /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)("div", { className: "menu-item", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(PageBreakTool, {}),
+      /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(SeparatorTool, {})
     ] }),
-    /* @__PURE__ */ (0, import_jsx_runtime27.jsx)("div", { className: "menu-divider" }),
-    /* @__PURE__ */ (0, import_jsx_runtime27.jsx)("div", { className: "menu-item", children: /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(TableTool, {}) }),
-    /* @__PURE__ */ (0, import_jsx_runtime27.jsx)("div", { className: "menu-divider" }),
-    /* @__PURE__ */ (0, import_jsx_runtime27.jsxs)("div", { className: "menu-item", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(TitleTool, {}),
-      /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(FontTool, {}),
-      /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(FontSizeTool, {}),
-      /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(LineHeightTool, {})
+    /* @__PURE__ */ (0, import_jsx_runtime26.jsx)("div", { className: "menu-divider" }),
+    /* @__PURE__ */ (0, import_jsx_runtime26.jsx)("div", { className: "menu-item", children: /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(TableTool, {}) }),
+    /* @__PURE__ */ (0, import_jsx_runtime26.jsx)("div", { className: "menu-divider" }),
+    /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)("div", { className: "menu-item", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(TitleTool, {}),
+      /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(FontTool, {}),
+      /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(FontSizeTool, {}),
+      /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(LineHeightTool, {})
     ] }),
-    /* @__PURE__ */ (0, import_jsx_runtime27.jsx)("div", { className: "menu-divider" }),
-    /* @__PURE__ */ (0, import_jsx_runtime27.jsxs)("div", { className: "menu-item", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(ColorTool, {}),
-      /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(HighlightTool, {}),
-      /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(BoldTool, {}),
-      /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(ItalicTool, {}),
-      /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(UnderlineTool, {}),
-      /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(StrikeoutTool, {})
+    /* @__PURE__ */ (0, import_jsx_runtime26.jsx)("div", { className: "menu-divider" }),
+    /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)("div", { className: "menu-item", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(ColorTool, {}),
+      /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(HighlightTool, {}),
+      /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(BoldTool, {}),
+      /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(ItalicTool, {}),
+      /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(UnderlineTool, {}),
+      /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(StrikeoutTool, {})
     ] }),
-    /* @__PURE__ */ (0, import_jsx_runtime27.jsx)("div", { className: "menu-divider" }),
-    /* @__PURE__ */ (0, import_jsx_runtime27.jsxs)("div", { className: "menu-item", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(LeftAlignTool, {}),
-      /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(CenterAlignTool, {}),
-      /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(RightAlignTool, {}),
-      /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(JustifyTool, {})
+    /* @__PURE__ */ (0, import_jsx_runtime26.jsx)("div", { className: "menu-divider" }),
+    /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)("div", { className: "menu-item", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(LeftAlignTool, {}),
+      /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(CenterAlignTool, {}),
+      /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(RightAlignTool, {}),
+      /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(JustifyTool, {})
     ] }),
-    /* @__PURE__ */ (0, import_jsx_runtime27.jsx)("div", { className: "menu-divider" }),
-    /* @__PURE__ */ (0, import_jsx_runtime27.jsx)("div", { className: "menu-item", children: /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(ListTool, {}) }),
-    /* @__PURE__ */ (0, import_jsx_runtime27.jsx)("div", { className: "menu-divider" }),
-    /* @__PURE__ */ (0, import_jsx_runtime27.jsx)("div", { className: "menu-item", children: /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(ImageTool, {}) }),
-    /* @__PURE__ */ (0, import_jsx_runtime27.jsx)("div", { className: "menu-item", children: /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(InsertElementTool, {}) })
+    /* @__PURE__ */ (0, import_jsx_runtime26.jsx)("div", { className: "menu-divider" }),
+    /* @__PURE__ */ (0, import_jsx_runtime26.jsx)("div", { className: "menu-item", children: /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(ListTool, {}) }),
+    /* @__PURE__ */ (0, import_jsx_runtime26.jsx)("div", { className: "menu-divider" }),
+    /* @__PURE__ */ (0, import_jsx_runtime26.jsx)("div", { className: "menu-item", children: /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(ImageTool, {}) }),
+    /* @__PURE__ */ (0, import_jsx_runtime26.jsx)("div", { className: "menu-item", children: /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(InsertElementTool, {}) })
   ] });
 }
 
 // src/footer/CatalogToggleTool.tsx
-var import_jsx_runtime28 = require("react/jsx-runtime");
+var import_jsx_runtime27 = require("react/jsx-runtime");
 function CatalogToggleTool() {
   const { handleToggleCatalogAction } = useFooter();
-  return /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("div", { className: "catalog-mode", title: "Catalog", onClick: handleToggleCatalogAction, children: /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("i", {}) });
+  return /* @__PURE__ */ (0, import_jsx_runtime27.jsx)("div", { className: "catalog-mode", title: "Catalog", onClick: handleToggleCatalogAction, children: /* @__PURE__ */ (0, import_jsx_runtime27.jsx)("i", {}) });
 }
 
 // src/footer/PageModeTool.tsx
-var import_react7 = require("react");
-var import_jsx_runtime29 = require("react/jsx-runtime");
+var import_react16 = require("react");
+var import_jsx_runtime28 = require("react/jsx-runtime");
 function PageModeTool() {
   const { editorRef } = useEditor();
-  const [visible, setVisible] = (0, import_react7.useState)(false);
+  const [visible, setVisible] = (0, import_react16.useState)(false);
   const handlePageMode = (mode) => {
     editorRef.current?.command.executePageMode(mode);
     setVisible(false);
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime29.jsxs)("div", { className: "page-mode", onClick: () => setVisible(!visible), children: [
-    /* @__PURE__ */ (0, import_jsx_runtime29.jsx)("i", { title: "Page Mode" }),
-    /* @__PURE__ */ (0, import_jsx_runtime29.jsx)("div", { className: `options ${visible ? "visible" : ""}`, children: /* @__PURE__ */ (0, import_jsx_runtime29.jsxs)("ul", { children: [
-      /* @__PURE__ */ (0, import_jsx_runtime29.jsx)("li", { onClick: () => handlePageMode("paging"), className: "active", children: "Paging" }),
-      /* @__PURE__ */ (0, import_jsx_runtime29.jsx)("li", { onClick: () => handlePageMode("continuity"), children: "Continuity" })
+  return /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)("div", { className: "page-mode", onClick: () => setVisible(!visible), children: [
+    /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("i", { title: "Page Mode" }),
+    /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("div", { className: `options ${visible ? "visible" : ""}`, children: /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)("ul", { children: [
+      /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("li", { onClick: () => handlePageMode("paging"), className: "active", children: "Paging" }),
+      /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("li", { onClick: () => handlePageMode("continuity"), children: "Continuity" })
     ] }) })
   ] });
 }
 
 // src/footer/FooterStatus.tsx
-var import_jsx_runtime30 = require("react/jsx-runtime");
+var import_jsx_runtime29 = require("react/jsx-runtime");
 function FooterStatus() {
   const { pageNoList, pageNo, pageSize, wordCount, rowNo, colNo } = useFooter();
-  return /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)(import_jsx_runtime30.Fragment, { children: [
-    /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)("span", { children: [
+  return /* @__PURE__ */ (0, import_jsx_runtime29.jsxs)(import_jsx_runtime29.Fragment, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime29.jsxs)("span", { children: [
       "Visible Pages: ",
-      /* @__PURE__ */ (0, import_jsx_runtime30.jsx)("span", { className: "page-no-list", children: pageNoList })
+      /* @__PURE__ */ (0, import_jsx_runtime29.jsx)("span", { className: "page-no-list", children: pageNoList })
     ] }),
-    /* @__PURE__ */ (0, import_jsx_runtime30.jsx)("span", { className: "footer-divider" }),
-    /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)("span", { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime29.jsx)("span", { className: "footer-divider" }),
+    /* @__PURE__ */ (0, import_jsx_runtime29.jsxs)("span", { children: [
       "Pages: ",
-      /* @__PURE__ */ (0, import_jsx_runtime30.jsx)("span", { className: "page-no", children: pageNo }),
+      /* @__PURE__ */ (0, import_jsx_runtime29.jsx)("span", { className: "page-no", children: pageNo }),
       "/",
-      /* @__PURE__ */ (0, import_jsx_runtime30.jsx)("span", { className: "page-size", children: pageSize })
+      /* @__PURE__ */ (0, import_jsx_runtime29.jsx)("span", { className: "page-size", children: pageSize })
     ] }),
-    /* @__PURE__ */ (0, import_jsx_runtime30.jsx)("span", { className: "footer-divider" }),
-    /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)("span", { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime29.jsx)("span", { className: "footer-divider" }),
+    /* @__PURE__ */ (0, import_jsx_runtime29.jsxs)("span", { children: [
       "Words: ",
-      /* @__PURE__ */ (0, import_jsx_runtime30.jsx)("span", { className: "word-count", children: wordCount })
+      /* @__PURE__ */ (0, import_jsx_runtime29.jsx)("span", { className: "word-count", children: wordCount })
     ] }),
-    /* @__PURE__ */ (0, import_jsx_runtime30.jsx)("span", { className: "footer-divider" }),
-    /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)("span", { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime29.jsx)("span", { className: "footer-divider" }),
+    /* @__PURE__ */ (0, import_jsx_runtime29.jsxs)("span", { children: [
       "Row: ",
-      /* @__PURE__ */ (0, import_jsx_runtime30.jsx)("span", { className: "row-no", children: rowNo })
+      /* @__PURE__ */ (0, import_jsx_runtime29.jsx)("span", { className: "row-no", children: rowNo })
     ] }),
-    /* @__PURE__ */ (0, import_jsx_runtime30.jsx)("span", { className: "footer-divider" }),
-    /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)("span", { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime29.jsx)("span", { className: "footer-divider" }),
+    /* @__PURE__ */ (0, import_jsx_runtime29.jsxs)("span", { children: [
       "Column: ",
-      /* @__PURE__ */ (0, import_jsx_runtime30.jsx)("span", { className: "col-no", children: colNo })
+      /* @__PURE__ */ (0, import_jsx_runtime29.jsx)("span", { className: "col-no", children: colNo })
     ] })
   ] });
 }
 
 // src/footer/EditorModeTool.tsx
-var import_react8 = require("react");
-var import_jsx_runtime31 = require("react/jsx-runtime");
+var import_react17 = require("react");
+var import_jsx_runtime30 = require("react/jsx-runtime");
 var MODE_LIST = [
   { mode: "edit", name: "Edit Mode" },
   { mode: "clean", name: "Clean Mode" },
@@ -979,8 +941,8 @@ var MODE_LIST = [
 ];
 function EditorModeTool() {
   const { editorRef } = useEditor();
-  const [editorMode, setEditorMode] = (0, import_react8.useState)("Edit Mode");
-  const modeIndexRef = (0, import_react8.useRef)(0);
+  const [editorMode, setEditorMode] = (0, import_react17.useState)("Edit Mode");
+  const modeIndexRef = (0, import_react17.useRef)(0);
   const handleModeChange = () => {
     modeIndexRef.current = modeIndexRef.current === MODE_LIST.length - 1 ? 0 : modeIndexRef.current + 1;
     const { name, mode } = MODE_LIST[modeIndexRef.current];
@@ -997,37 +959,37 @@ function EditorModeTool() {
       }
     });
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime31.jsx)("div", { className: "editor-mode", title: "Click to change mode", onClick: handleModeChange, children: editorMode });
+  return /* @__PURE__ */ (0, import_jsx_runtime30.jsx)("div", { className: "editor-mode", title: "Click to change mode", onClick: handleModeChange, children: editorMode });
 }
 
 // src/footer/PageScaleMinusTool.tsx
-var import_jsx_runtime32 = require("react/jsx-runtime");
+var import_jsx_runtime31 = require("react/jsx-runtime");
 function PageScaleMinusTool() {
   const { editorRef } = useEditor();
-  return /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("div", { className: "page-scale-minus", title: "Zoom Out (Ctrl+-)", onClick: () => editorRef.current?.command.executePageScaleMinus(), children: /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("i", {}) });
+  return /* @__PURE__ */ (0, import_jsx_runtime31.jsx)("div", { className: "page-scale-minus", title: "Zoom Out (Ctrl+-)", onClick: () => editorRef.current?.command.executePageScaleMinus(), children: /* @__PURE__ */ (0, import_jsx_runtime31.jsx)("i", {}) });
 }
 
 // src/footer/PageScalePercentageTool.tsx
-var import_jsx_runtime33 = require("react/jsx-runtime");
+var import_jsx_runtime32 = require("react/jsx-runtime");
 function PageScalePercentageTool() {
   const { editorRef } = useEditor();
   const { pageScale } = useFooter();
-  return /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)("span", { className: "page-scale-percentage", title: "Zoom Level", onClick: () => editorRef.current?.command.executePageScaleRecovery(), children: [
+  return /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)("span", { className: "page-scale-percentage", title: "Zoom Level", onClick: () => editorRef.current?.command.executePageScaleRecovery(), children: [
     pageScale,
     "%"
   ] });
 }
 
 // src/footer/PageScaleAddTool.tsx
-var import_jsx_runtime34 = require("react/jsx-runtime");
+var import_jsx_runtime33 = require("react/jsx-runtime");
 function PageScaleAddTool() {
   const { editorRef } = useEditor();
-  return /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("div", { className: "page-scale-add", title: "Zoom In (Ctrl+=)", onClick: () => editorRef.current?.command.executePageScaleAdd(), children: /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("i", {}) });
+  return /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("div", { className: "page-scale-add", title: "Zoom In (Ctrl+=)", onClick: () => editorRef.current?.command.executePageScaleAdd(), children: /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("i", {}) });
 }
 
 // src/footer/PaperSizeTool.tsx
-var import_react9 = require("react");
-var import_jsx_runtime35 = require("react/jsx-runtime");
+var import_react18 = require("react");
+var import_jsx_runtime34 = require("react/jsx-runtime");
 var SIZES2 = [
   { label: "A4", width: 794, height: 1123, active: true },
   { label: "A2", width: 1593, height: 2251 },
@@ -1036,38 +998,38 @@ var SIZES2 = [
 ];
 function PaperSizeTool() {
   const { editorRef } = useEditor();
-  const [visible, setVisible] = (0, import_react9.useState)(false);
+  const [visible, setVisible] = (0, import_react18.useState)(false);
   const handlePaperSize = (width, height) => {
     editorRef.current?.command.executePaperSize(width, height);
     setVisible(false);
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime35.jsxs)("div", { className: "paper-size", onClick: () => setVisible(!visible), children: [
-    /* @__PURE__ */ (0, import_jsx_runtime35.jsx)("i", { title: "Paper Type" }),
-    /* @__PURE__ */ (0, import_jsx_runtime35.jsx)("div", { className: `options ${visible ? "visible" : ""}`, children: /* @__PURE__ */ (0, import_jsx_runtime35.jsx)("ul", { children: SIZES2.map(({ label, width, height, active }) => /* @__PURE__ */ (0, import_jsx_runtime35.jsx)("li", { onClick: () => handlePaperSize(width, height), className: active ? "active" : "", children: label }, label)) }) })
+  return /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)("div", { className: "paper-size", onClick: () => setVisible(!visible), children: [
+    /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("i", { title: "Paper Type" }),
+    /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("div", { className: `options ${visible ? "visible" : ""}`, children: /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("ul", { children: SIZES2.map(({ label, width, height, active }) => /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("li", { onClick: () => handlePaperSize(width, height), className: active ? "active" : "", children: label }, label)) }) })
   ] });
 }
 
 // src/footer/PaperDirectionTool.tsx
-var import_react10 = require("react");
-var import_jsx_runtime36 = require("react/jsx-runtime");
+var import_react19 = require("react");
+var import_jsx_runtime35 = require("react/jsx-runtime");
 function PaperDirectionTool() {
   const { editorRef } = useEditor();
-  const [visible, setVisible] = (0, import_react10.useState)(false);
+  const [visible, setVisible] = (0, import_react19.useState)(false);
   const handlePaperDirection = (direction) => {
     editorRef.current?.command.executePaperDirection(direction);
     setVisible(false);
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime36.jsxs)("div", { className: "paper-direction", onClick: () => setVisible(!visible), children: [
-    /* @__PURE__ */ (0, import_jsx_runtime36.jsx)("i", { title: "Paper Direction" }),
-    /* @__PURE__ */ (0, import_jsx_runtime36.jsx)("div", { className: `options ${visible ? "visible" : ""}`, children: /* @__PURE__ */ (0, import_jsx_runtime36.jsxs)("ul", { children: [
-      /* @__PURE__ */ (0, import_jsx_runtime36.jsx)("li", { onClick: () => handlePaperDirection("vertical"), className: "active", children: "Portrait" }),
-      /* @__PURE__ */ (0, import_jsx_runtime36.jsx)("li", { onClick: () => handlePaperDirection("horizontal"), children: "Landscape" })
+  return /* @__PURE__ */ (0, import_jsx_runtime35.jsxs)("div", { className: "paper-direction", onClick: () => setVisible(!visible), children: [
+    /* @__PURE__ */ (0, import_jsx_runtime35.jsx)("i", { title: "Paper Direction" }),
+    /* @__PURE__ */ (0, import_jsx_runtime35.jsx)("div", { className: `options ${visible ? "visible" : ""}`, children: /* @__PURE__ */ (0, import_jsx_runtime35.jsxs)("ul", { children: [
+      /* @__PURE__ */ (0, import_jsx_runtime35.jsx)("li", { onClick: () => handlePaperDirection("vertical"), className: "active", children: "Portrait" }),
+      /* @__PURE__ */ (0, import_jsx_runtime35.jsx)("li", { onClick: () => handlePaperDirection("horizontal"), children: "Landscape" })
     ] }) })
   ] });
 }
 
 // src/footer/PaperMarginTool.tsx
-var import_jsx_runtime37 = require("react/jsx-runtime");
+var import_jsx_runtime36 = require("react/jsx-runtime");
 function PaperMarginTool() {
   const { editorRef } = useEditor();
   const handlePaperMargin = async () => {
@@ -1100,11 +1062,11 @@ function PaperMarginTool() {
       }
     });
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime37.jsx)("div", { className: "paper-margin", title: "Page Margins", onClick: handlePaperMargin, children: /* @__PURE__ */ (0, import_jsx_runtime37.jsx)("i", {}) });
+  return /* @__PURE__ */ (0, import_jsx_runtime36.jsx)("div", { className: "paper-margin", title: "Page Margins", onClick: handlePaperMargin, children: /* @__PURE__ */ (0, import_jsx_runtime36.jsx)("i", {}) });
 }
 
 // src/footer/FullscreenTool.tsx
-var import_jsx_runtime38 = require("react/jsx-runtime");
+var import_jsx_runtime37 = require("react/jsx-runtime");
 function FullscreenTool() {
   const handleFullscreen = () => {
     if (!document.fullscreenElement) {
@@ -1113,11 +1075,11 @@ function FullscreenTool() {
       document.exitFullscreen();
     }
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime38.jsx)("div", { className: "fullscreen", title: "Fullscreen", onClick: handleFullscreen, children: /* @__PURE__ */ (0, import_jsx_runtime38.jsx)("i", {}) });
+  return /* @__PURE__ */ (0, import_jsx_runtime37.jsx)("div", { className: "fullscreen", title: "Fullscreen", onClick: handleFullscreen, children: /* @__PURE__ */ (0, import_jsx_runtime37.jsx)("i", {}) });
 }
 
 // src/footer/EditorOptionTool.tsx
-var import_jsx_runtime39 = require("react/jsx-runtime");
+var import_jsx_runtime38 = require("react/jsx-runtime");
 function EditorOptionTool() {
   const { editorRef } = useEditor();
   const handleEditorOption = async () => {
@@ -1145,12 +1107,12 @@ function EditorOptionTool() {
       }
     });
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime39.jsx)("div", { className: "editor-option", title: "Editor Settings", onClick: handleEditorOption, children: /* @__PURE__ */ (0, import_jsx_runtime39.jsx)("i", {}) });
+  return /* @__PURE__ */ (0, import_jsx_runtime38.jsx)("div", { className: "editor-option", title: "Editor Settings", onClick: handleEditorOption, children: /* @__PURE__ */ (0, import_jsx_runtime38.jsx)("i", {}) });
 }
 
 // src/footer/WatermarkFooterTool.tsx
-var import_react11 = require("react");
-var import_jsx_runtime40 = require("react/jsx-runtime");
+var import_react20 = require("react");
+var import_jsx_runtime39 = require("react/jsx-runtime");
 var COLOR_PALETTE2 = [
   ["#000000", "#434343", "#666666", "#999999", "#b7b7b7", "#cccccc"],
   ["#980000", "#ff0000", "#ff9900", "#ffff00", "#00ff00", "#00ffff"],
@@ -1162,21 +1124,21 @@ var FONTS2 = [
 ];
 function WatermarkFooterTool() {
   const { editorRef } = useEditor();
-  const [visible, setVisible] = (0, import_react11.useState)(false);
-  const [tab, setTab] = (0, import_react11.useState)("text");
-  const containerRef = (0, import_react11.useRef)(null);
-  const panelRef = (0, import_react11.useRef)(null);
-  const fileInputRef = (0, import_react11.useRef)(null);
-  const [text, setText] = (0, import_react11.useState)("WATERMARK");
-  const [font, setFont] = (0, import_react11.useState)("Arial");
-  const [color, setColor] = (0, import_react11.useState)("#AEB5C0");
-  const [opacity, setOpacity] = (0, import_react11.useState)(30);
-  const [rotation, setRotation] = (0, import_react11.useState)(-45);
-  const [inFront, setInFront] = (0, import_react11.useState)(false);
-  const [imageData, setImageData] = (0, import_react11.useState)("");
-  const [imgWidth, setImgWidth] = (0, import_react11.useState)(200);
-  const [imgHeight, setImgHeight] = (0, import_react11.useState)(200);
-  (0, import_react11.useEffect)(() => {
+  const [visible, setVisible] = (0, import_react20.useState)(false);
+  const [tab, setTab] = (0, import_react20.useState)("text");
+  const containerRef = (0, import_react20.useRef)(null);
+  const panelRef = (0, import_react20.useRef)(null);
+  const fileInputRef = (0, import_react20.useRef)(null);
+  const [text, setText] = (0, import_react20.useState)("WATERMARK");
+  const [font, setFont] = (0, import_react20.useState)("Arial");
+  const [color, setColor] = (0, import_react20.useState)("#AEB5C0");
+  const [opacity, setOpacity] = (0, import_react20.useState)(30);
+  const [rotation, setRotation] = (0, import_react20.useState)(-45);
+  const [inFront, setInFront] = (0, import_react20.useState)(false);
+  const [imageData, setImageData] = (0, import_react20.useState)("");
+  const [imgWidth, setImgWidth] = (0, import_react20.useState)(200);
+  const [imgHeight, setImgHeight] = (0, import_react20.useState)(200);
+  (0, import_react20.useEffect)(() => {
     if (!visible) return;
     const handler = (e) => {
       if (containerRef.current && !containerRef.current.contains(e.target)) {
@@ -1186,7 +1148,7 @@ function WatermarkFooterTool() {
     document.addEventListener("mousedown", handler);
     return () => document.removeEventListener("mousedown", handler);
   }, [visible]);
-  (0, import_react11.useEffect)(() => {
+  (0, import_react20.useEffect)(() => {
     if (!visible || !panelRef.current) return;
     const el = panelRef.current;
     el.style.right = "";
@@ -1200,7 +1162,7 @@ function WatermarkFooterTool() {
       el.style.left = `${-rect.left + 4}px`;
     }
   }, [visible]);
-  const handleFileUpload = (0, import_react11.useCallback)((e) => {
+  const handleFileUpload = (0, import_react20.useCallback)((e) => {
     const file = e.target.files?.[0];
     if (!file) return;
     const reader = new FileReader();
@@ -1256,26 +1218,26 @@ function WatermarkFooterTool() {
     editorRef.current?.command.executeDeleteWatermark();
     setVisible(false);
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime40.jsxs)("div", { className: "watermark-footer", ref: containerRef, onClick: () => setVisible(!visible), children: [
-    /* @__PURE__ */ (0, import_jsx_runtime40.jsx)("i", { title: "Watermark" }),
-    visible && /* @__PURE__ */ (0, import_jsx_runtime40.jsxs)("div", { className: "watermark-footer-panel", ref: panelRef, onClick: (e) => e.stopPropagation(), children: [
-      /* @__PURE__ */ (0, import_jsx_runtime40.jsxs)("div", { className: "wm-panel-tabs", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime40.jsx)("button", { className: `wm-panel-tab ${tab === "text" ? "active" : ""}`, onClick: () => setTab("text"), children: "Text" }),
-        /* @__PURE__ */ (0, import_jsx_runtime40.jsx)("button", { className: `wm-panel-tab ${tab === "image" ? "active" : ""}`, onClick: () => setTab("image"), children: "Image" })
+  return /* @__PURE__ */ (0, import_jsx_runtime39.jsxs)("div", { className: "watermark-footer", ref: containerRef, onClick: () => setVisible(!visible), children: [
+    /* @__PURE__ */ (0, import_jsx_runtime39.jsx)("i", { title: "Watermark" }),
+    visible && /* @__PURE__ */ (0, import_jsx_runtime39.jsxs)("div", { className: "watermark-footer-panel", ref: panelRef, onClick: (e) => e.stopPropagation(), children: [
+      /* @__PURE__ */ (0, import_jsx_runtime39.jsxs)("div", { className: "wm-panel-tabs", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime39.jsx)("button", { className: `wm-panel-tab ${tab === "text" ? "active" : ""}`, onClick: () => setTab("text"), children: "Text" }),
+        /* @__PURE__ */ (0, import_jsx_runtime39.jsx)("button", { className: `wm-panel-tab ${tab === "image" ? "active" : ""}`, onClick: () => setTab("image"), children: "Image" })
       ] }),
-      /* @__PURE__ */ (0, import_jsx_runtime40.jsxs)("div", { className: "wm-panel-body", children: [
-        tab === "text" ? /* @__PURE__ */ (0, import_jsx_runtime40.jsxs)(import_jsx_runtime40.Fragment, { children: [
-          /* @__PURE__ */ (0, import_jsx_runtime40.jsxs)("div", { className: "wm-panel-field", children: [
-            /* @__PURE__ */ (0, import_jsx_runtime40.jsx)("label", { children: "Text" }),
-            /* @__PURE__ */ (0, import_jsx_runtime40.jsx)("input", { type: "text", value: text, onChange: (e) => setText(e.target.value), placeholder: "Watermark text" })
+      /* @__PURE__ */ (0, import_jsx_runtime39.jsxs)("div", { className: "wm-panel-body", children: [
+        tab === "text" ? /* @__PURE__ */ (0, import_jsx_runtime39.jsxs)(import_jsx_runtime39.Fragment, { children: [
+          /* @__PURE__ */ (0, import_jsx_runtime39.jsxs)("div", { className: "wm-panel-field", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime39.jsx)("label", { children: "Text" }),
+            /* @__PURE__ */ (0, import_jsx_runtime39.jsx)("input", { type: "text", value: text, onChange: (e) => setText(e.target.value), placeholder: "Watermark text" })
           ] }),
-          /* @__PURE__ */ (0, import_jsx_runtime40.jsxs)("div", { className: "wm-panel-field", children: [
-            /* @__PURE__ */ (0, import_jsx_runtime40.jsx)("label", { children: "Font" }),
-            /* @__PURE__ */ (0, import_jsx_runtime40.jsx)("select", { value: font, onChange: (e) => setFont(e.target.value), children: FONTS2.map((f) => /* @__PURE__ */ (0, import_jsx_runtime40.jsx)("option", { value: f.family, children: f.label }, f.family)) })
+          /* @__PURE__ */ (0, import_jsx_runtime39.jsxs)("div", { className: "wm-panel-field", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime39.jsx)("label", { children: "Font" }),
+            /* @__PURE__ */ (0, import_jsx_runtime39.jsx)("select", { value: font, onChange: (e) => setFont(e.target.value), children: FONTS2.map((f) => /* @__PURE__ */ (0, import_jsx_runtime39.jsx)("option", { value: f.family, children: f.label }, f.family)) })
           ] }),
-          /* @__PURE__ */ (0, import_jsx_runtime40.jsxs)("div", { className: "wm-panel-field", children: [
-            /* @__PURE__ */ (0, import_jsx_runtime40.jsx)("label", { children: "Color" }),
-            /* @__PURE__ */ (0, import_jsx_runtime40.jsx)("div", { className: "wm-panel-colors", children: COLOR_PALETTE2.flat().map((c) => /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(
+          /* @__PURE__ */ (0, import_jsx_runtime39.jsxs)("div", { className: "wm-panel-field", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime39.jsx)("label", { children: "Color" }),
+            /* @__PURE__ */ (0, import_jsx_runtime39.jsx)("div", { className: "wm-panel-colors", children: COLOR_PALETTE2.flat().map((c) => /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(
               "div",
               {
                 className: `wm-panel-color ${color.toLowerCase() === c.toLowerCase() ? "active" : ""}`,
@@ -1285,89 +1247,89 @@ function WatermarkFooterTool() {
               c
             )) })
           ] })
-        ] }) : /* @__PURE__ */ (0, import_jsx_runtime40.jsxs)(import_jsx_runtime40.Fragment, { children: [
-          /* @__PURE__ */ (0, import_jsx_runtime40.jsxs)("div", { className: "wm-panel-field", children: [
-            /* @__PURE__ */ (0, import_jsx_runtime40.jsx)("label", { children: "Image" }),
-            /* @__PURE__ */ (0, import_jsx_runtime40.jsxs)("div", { style: { display: "flex", alignItems: "center", gap: "6px" }, children: [
-              /* @__PURE__ */ (0, import_jsx_runtime40.jsx)("button", { className: "wm-panel-upload", onClick: () => fileInputRef.current?.click(), children: "Choose File" }),
-              /* @__PURE__ */ (0, import_jsx_runtime40.jsx)("input", { ref: fileInputRef, type: "file", accept: "image/*", style: { display: "none" }, onChange: handleFileUpload }),
-              imageData && /* @__PURE__ */ (0, import_jsx_runtime40.jsx)("span", { style: { fontSize: "11px", color: "#667085" }, children: "Loaded" })
+        ] }) : /* @__PURE__ */ (0, import_jsx_runtime39.jsxs)(import_jsx_runtime39.Fragment, { children: [
+          /* @__PURE__ */ (0, import_jsx_runtime39.jsxs)("div", { className: "wm-panel-field", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime39.jsx)("label", { children: "Image" }),
+            /* @__PURE__ */ (0, import_jsx_runtime39.jsxs)("div", { style: { display: "flex", alignItems: "center", gap: "6px" }, children: [
+              /* @__PURE__ */ (0, import_jsx_runtime39.jsx)("button", { className: "wm-panel-upload", onClick: () => fileInputRef.current?.click(), children: "Choose File" }),
+              /* @__PURE__ */ (0, import_jsx_runtime39.jsx)("input", { ref: fileInputRef, type: "file", accept: "image/*", style: { display: "none" }, onChange: handleFileUpload }),
+              imageData && /* @__PURE__ */ (0, import_jsx_runtime39.jsx)("span", { style: { fontSize: "11px", color: "#667085" }, children: "Loaded" })
             ] })
           ] }),
-          imageData && /* @__PURE__ */ (0, import_jsx_runtime40.jsx)("div", { className: "wm-panel-field", children: /* @__PURE__ */ (0, import_jsx_runtime40.jsx)("div", { className: "wm-panel-preview", children: /* @__PURE__ */ (0, import_jsx_runtime40.jsx)("img", { src: imageData, alt: "preview", style: { maxWidth: "100%", maxHeight: "48px", objectFit: "contain" } }) }) }),
-          /* @__PURE__ */ (0, import_jsx_runtime40.jsxs)("div", { className: "wm-panel-field-row", children: [
-            /* @__PURE__ */ (0, import_jsx_runtime40.jsxs)("div", { className: "wm-panel-field wm-panel-field-half", children: [
-              /* @__PURE__ */ (0, import_jsx_runtime40.jsx)("label", { children: "W" }),
-              /* @__PURE__ */ (0, import_jsx_runtime40.jsx)("input", { type: "number", value: imgWidth, min: 10, onChange: (e) => setImgWidth(Number(e.target.value)) })
+          imageData && /* @__PURE__ */ (0, import_jsx_runtime39.jsx)("div", { className: "wm-panel-field", children: /* @__PURE__ */ (0, import_jsx_runtime39.jsx)("div", { className: "wm-panel-preview", children: /* @__PURE__ */ (0, import_jsx_runtime39.jsx)("img", { src: imageData, alt: "preview", style: { maxWidth: "100%", maxHeight: "48px", objectFit: "contain" } }) }) }),
+          /* @__PURE__ */ (0, import_jsx_runtime39.jsxs)("div", { className: "wm-panel-field-row", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime39.jsxs)("div", { className: "wm-panel-field wm-panel-field-half", children: [
+              /* @__PURE__ */ (0, import_jsx_runtime39.jsx)("label", { children: "W" }),
+              /* @__PURE__ */ (0, import_jsx_runtime39.jsx)("input", { type: "number", value: imgWidth, min: 10, onChange: (e) => setImgWidth(Number(e.target.value)) })
             ] }),
-            /* @__PURE__ */ (0, import_jsx_runtime40.jsxs)("div", { className: "wm-panel-field wm-panel-field-half", children: [
-              /* @__PURE__ */ (0, import_jsx_runtime40.jsx)("label", { children: "H" }),
-              /* @__PURE__ */ (0, import_jsx_runtime40.jsx)("input", { type: "number", value: imgHeight, min: 10, onChange: (e) => setImgHeight(Number(e.target.value)) })
+            /* @__PURE__ */ (0, import_jsx_runtime39.jsxs)("div", { className: "wm-panel-field wm-panel-field-half", children: [
+              /* @__PURE__ */ (0, import_jsx_runtime39.jsx)("label", { children: "H" }),
+              /* @__PURE__ */ (0, import_jsx_runtime39.jsx)("input", { type: "number", value: imgHeight, min: 10, onChange: (e) => setImgHeight(Number(e.target.value)) })
             ] })
           ] })
         ] }),
-        /* @__PURE__ */ (0, import_jsx_runtime40.jsxs)("div", { className: "wm-panel-field", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime40.jsxs)("label", { children: [
+        /* @__PURE__ */ (0, import_jsx_runtime39.jsxs)("div", { className: "wm-panel-field", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime39.jsxs)("label", { children: [
             "Opacity ",
-            /* @__PURE__ */ (0, import_jsx_runtime40.jsxs)("span", { className: "wm-panel-value", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime39.jsxs)("span", { className: "wm-panel-value", children: [
               opacity,
               "%"
             ] })
           ] }),
-          /* @__PURE__ */ (0, import_jsx_runtime40.jsx)("input", { type: "range", min: 0, max: 100, value: opacity, onChange: (e) => setOpacity(Number(e.target.value)), className: "wm-panel-slider" })
+          /* @__PURE__ */ (0, import_jsx_runtime39.jsx)("input", { type: "range", min: 0, max: 100, value: opacity, onChange: (e) => setOpacity(Number(e.target.value)), className: "wm-panel-slider" })
         ] }),
-        /* @__PURE__ */ (0, import_jsx_runtime40.jsxs)("div", { className: "wm-panel-field", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime40.jsxs)("label", { children: [
+        /* @__PURE__ */ (0, import_jsx_runtime39.jsxs)("div", { className: "wm-panel-field", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime39.jsxs)("label", { children: [
             "Rotation ",
-            /* @__PURE__ */ (0, import_jsx_runtime40.jsxs)("span", { className: "wm-panel-value", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime39.jsxs)("span", { className: "wm-panel-value", children: [
               rotation,
               "\xB0"
             ] })
           ] }),
-          /* @__PURE__ */ (0, import_jsx_runtime40.jsx)("input", { type: "range", min: -90, max: 90, value: rotation, onChange: (e) => setRotation(Number(e.target.value)), className: "wm-panel-slider" })
+          /* @__PURE__ */ (0, import_jsx_runtime39.jsx)("input", { type: "range", min: -90, max: 90, value: rotation, onChange: (e) => setRotation(Number(e.target.value)), className: "wm-panel-slider" })
         ] }),
-        /* @__PURE__ */ (0, import_jsx_runtime40.jsxs)("div", { className: "wm-panel-field", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime40.jsx)("label", { children: "Position" }),
-          /* @__PURE__ */ (0, import_jsx_runtime40.jsxs)("div", { className: "wm-panel-toggle", children: [
-            /* @__PURE__ */ (0, import_jsx_runtime40.jsx)("button", { className: !inFront ? "active" : "", onClick: () => setInFront(false), children: "Behind" }),
-            /* @__PURE__ */ (0, import_jsx_runtime40.jsx)("button", { className: inFront ? "active" : "", onClick: () => setInFront(true), children: "In Front" })
+        /* @__PURE__ */ (0, import_jsx_runtime39.jsxs)("div", { className: "wm-panel-field", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime39.jsx)("label", { children: "Position" }),
+          /* @__PURE__ */ (0, import_jsx_runtime39.jsxs)("div", { className: "wm-panel-toggle", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime39.jsx)("button", { className: !inFront ? "active" : "", onClick: () => setInFront(false), children: "Behind" }),
+            /* @__PURE__ */ (0, import_jsx_runtime39.jsx)("button", { className: inFront ? "active" : "", onClick: () => setInFront(true), children: "In Front" })
           ] })
         ] })
       ] }),
-      /* @__PURE__ */ (0, import_jsx_runtime40.jsxs)("div", { className: "wm-panel-actions", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime40.jsx)("button", { className: "wm-panel-btn-delete", onClick: handleDelete, children: "Remove" }),
-        /* @__PURE__ */ (0, import_jsx_runtime40.jsx)("button", { className: "wm-panel-btn-apply", onClick: handleApply, children: "Apply" })
+      /* @__PURE__ */ (0, import_jsx_runtime39.jsxs)("div", { className: "wm-panel-actions", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime39.jsx)("button", { className: "wm-panel-btn-delete", onClick: handleDelete, children: "Remove" }),
+        /* @__PURE__ */ (0, import_jsx_runtime39.jsx)("button", { className: "wm-panel-btn-apply", onClick: handleApply, children: "Apply" })
       ] })
     ] })
   ] });
 }
 
 // src/EditorFooter.tsx
-var import_jsx_runtime41 = require("react/jsx-runtime");
+var import_jsx_runtime40 = require("react/jsx-runtime");
 function EditorFooter() {
-  return /* @__PURE__ */ (0, import_jsx_runtime41.jsxs)("div", { className: "footer", "editor-component": "footer", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime41.jsxs)("div", { children: [
-      /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(CatalogToggleTool, {}),
-      /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(PageModeTool, {}),
-      /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(FooterStatus, {})
+  return /* @__PURE__ */ (0, import_jsx_runtime40.jsxs)("div", { className: "footer", "editor-component": "footer", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime40.jsxs)("div", { children: [
+      /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(CatalogToggleTool, {}),
+      /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(PageModeTool, {}),
+      /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(FooterStatus, {})
     ] }),
-    /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(EditorModeTool, {}),
-    /* @__PURE__ */ (0, import_jsx_runtime41.jsxs)("div", { children: [
-      /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(PageScaleMinusTool, {}),
-      /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(PageScalePercentageTool, {}),
-      /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(PageScaleAddTool, {}),
-      /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(PaperSizeTool, {}),
-      /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(PaperDirectionTool, {}),
-      /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(PaperMarginTool, {}),
-      /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(WatermarkFooterTool, {}),
-      /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(FullscreenTool, {}),
-      /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(EditorOptionTool, {})
+    /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(EditorModeTool, {}),
+    /* @__PURE__ */ (0, import_jsx_runtime40.jsxs)("div", { children: [
+      /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(PageScaleMinusTool, {}),
+      /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(PageScalePercentageTool, {}),
+      /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(PageScaleAddTool, {}),
+      /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(PaperSizeTool, {}),
+      /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(PaperDirectionTool, {}),
+      /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(PaperMarginTool, {}),
+      /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(WatermarkFooterTool, {}),
+      /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(FullscreenTool, {}),
+      /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(EditorOptionTool, {})
     ] })
   ] });
 }
 
 // src/Editor.tsx
-var import_jsx_runtime42 = require("react/jsx-runtime");
+var import_jsx_runtime41 = require("react/jsx-runtime");
 function Editor({
   defaultValue,
   options: userOptions,
@@ -1382,7 +1344,7 @@ function Editor({
   style,
   onDrop: userOnDrop
 }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(FooterProvider, { children: /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(FooterProvider, { children: /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(
     EditorInner,
     {
       defaultValue,
@@ -1414,9 +1376,9 @@ function EditorInner({
   style,
   onDrop: userOnDrop
 }) {
-  const containerRef = (0, import_react12.useRef)(null);
-  const editorRef = (0, import_react12.useRef)(null);
-  const [rangeStyle, setRangeStyle] = (0, import_react12.useState)(null);
+  const containerRef = (0, import_react21.useRef)(null);
+  const editorRef = (0, import_react21.useRef)(null);
+  const [rangeStyle, setRangeStyle] = (0, import_react21.useState)(null);
   const {
     setPageNoList,
     setPageNo,
@@ -1426,7 +1388,7 @@ function EditorInner({
     setColNo,
     setPageScale
   } = useFooter();
-  (0, import_react12.useEffect)(() => {
+  (0, import_react21.useEffect)(() => {
     let instance = null;
     const initEditor = async () => {
       if (!containerRef.current) return;
@@ -1562,11 +1524,11 @@ function EditorInner({
     e.preventDefault();
     e.dataTransfer.dropEffect = "copy";
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime42.jsxs)(EditorProvider, { editorRef, rangeStyle, children: [
-    toolbar && !renderToolbar && /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(EditorToolbar, {}),
+  return /* @__PURE__ */ (0, import_jsx_runtime41.jsxs)(EditorProvider, { editorRef, rangeStyle, children: [
+    toolbar && !renderToolbar && /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(EditorToolbar, {}),
     renderToolbar,
     children,
-    /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(
+    /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(
       "div",
       {
         className: className ?? "editor",
@@ -1576,7 +1538,7 @@ function EditorInner({
         onDragOver: handleDragOver
       }
     ),
-    footer && !renderFooter && /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(EditorFooter, {}),
+    footer && !renderFooter && /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(EditorFooter, {}),
     renderFooter
   ] });
 }