@windoc/react 0.3.11 → 0.3.13

package/dist/index.js

@@ -65,6 +65,8 @@ __export(index_exports, {
   RightAlignTool: () => RightAlignTool,
   SeparatorTool: () => SeparatorTool,
   StrikeoutTool: () => StrikeoutTool,
+  TableCellBgColorTool: () => TableCellBgColorTool,
+  TableCellBorderColorTool: () => TableCellBorderColorTool,
   TableTool: () => TableTool,
   TitleTool: () => TitleTool,
   UnderlineTool: () => UnderlineTool,
@@ -77,7 +79,7 @@ __export(index_exports, {
 module.exports = __toCommonJS(index_exports);
 
 // src/Editor.tsx
-var import_react21 = require("react");
+var import_react23 = require("react");
 
 // src/EditorContext.tsx
 var import_react = require("react");
@@ -86,13 +88,14 @@ var EditorContext = (0, import_react.createContext)(null);
 function EditorProvider({
   editorRef,
   rangeStyle,
+  isInTable,
   children
 }) {
   const [isApple, setIsApple] = (0, import_react.useState)(false);
   (0, import_react.useEffect)(() => {
     setIsApple(/Mac OS X/.test(navigator.userAgent));
   }, []);
-  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(EditorContext.Provider, { value: { editorRef, isApple, rangeStyle }, children });
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(EditorContext.Provider, { value: { editorRef, isApple, rangeStyle, isInTable }, children });
 }
 function useEditor() {
   const ctx = (0, import_react.useContext)(EditorContext);
@@ -183,69 +186,359 @@ function RedoTool() {
   );
 }
 
-// src/toolbar/ColumnTool.tsx
+// src/toolbar/TableCellBgColorTool.tsx
 var import_react3 = require("react");
+var import_lucide_react3 = require("lucide-react");
 var import_jsx_runtime5 = require("react/jsx-runtime");
-function ColumnTool() {
+var COLOR_PALETTE = [
+  [
+    "#000000",
+    "#434343",
+    "#666666",
+    "#999999",
+    "#b7b7b7",
+    "#cccccc",
+    "#d9d9d9",
+    "#efefef",
+    "#f3f3f3",
+    "#ffffff"
+  ],
+  [
+    "#980000",
+    "#ff0000",
+    "#ff9900",
+    "#ffff00",
+    "#00ff00",
+    "#00ffff",
+    "#4a86e8",
+    "#0000ff",
+    "#9900ff",
+    "#ff00ff"
+  ],
+  [
+    "#e6b8af",
+    "#f4cccc",
+    "#fce5cd",
+    "#fff2cc",
+    "#d9ead3",
+    "#d0e0e3",
+    "#c9daf8",
+    "#cfe2f3",
+    "#d9d2e9",
+    "#ead1dc"
+  ],
+  [
+    "#dd7e6b",
+    "#ea9999",
+    "#f9cb9c",
+    "#ffe599",
+    "#b6d7a8",
+    "#a2c4c9",
+    "#a4c2f4",
+    "#9fc5e8",
+    "#b4a7d6",
+    "#d5a6bd"
+  ],
+  [
+    "#cc4125",
+    "#e06666",
+    "#f6b26b",
+    "#ffd966",
+    "#93c47d",
+    "#76a5af",
+    "#6d9eeb",
+    "#6fa8dc",
+    "#8e7cc3",
+    "#c27ba0"
+  ],
+  [
+    "#a61c00",
+    "#cc0000",
+    "#e69138",
+    "#f1c232",
+    "#6aa84f",
+    "#45818e",
+    "#3c78d8",
+    "#3d85c6",
+    "#674ea7",
+    "#a64d79"
+  ],
+  [
+    "#85200c",
+    "#990000",
+    "#b45f06",
+    "#bf9000",
+    "#38761d",
+    "#134f5c",
+    "#1155cc",
+    "#0b5394",
+    "#351c75",
+    "#741b47"
+  ],
+  [
+    "#5b0f00",
+    "#660000",
+    "#783f04",
+    "#7f6000",
+    "#274e13",
+    "#0c343d",
+    "#1c4587",
+    "#073763",
+    "#20124d",
+    "#4c1130"
+  ]
+];
+function TableCellBgColorTool() {
   const { editorRef } = useEditor();
-  const optionsRef = (0, import_react3.useRef)(null);
-  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);
+  const dropdownRef = (0, import_react3.useRef)(null);
+  const [activeColor, setActiveColor] = (0, import_react3.useState)("");
+  const handleColor = (color) => {
+    setActiveColor(color);
+    editorRef.current?.command.executeTableTdBackgroundColor(color);
+    dropdownRef.current?.classList.remove("visible");
   };
-  const handleGapChange = (value) => {
-    const clampedValue = Math.max(0, Math.min(100, value));
-    setGap(clampedValue);
-    editorRef.current?.command.executeColumnGap(clampedValue);
+  const handleNone = () => {
+    setActiveColor("");
+    editorRef.current?.command.executeTableTdBackgroundColor("");
+    dropdownRef.current?.classList.remove("visible");
   };
   return /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(
     "div",
     {
-      className: "menu-item__column",
-      onClick: () => optionsRef.current?.classList.toggle("visible"),
+      className: "menu-item__td-bg-color",
+      title: "Cell background color",
+      onClick: () => dropdownRef.current?.classList.toggle("visible"),
       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", ref: optionsRef, 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" })
+        /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(import_lucide_react3.PaintBucket, { size: 14 }),
+        /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("span", { style: { backgroundColor: activeColor || "transparent", border: activeColor ? "none" : "1px dashed #ccc" } }),
+        /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("div", { className: "color-palette-dropdown", ref: dropdownRef, children: /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { onClick: (e) => e.stopPropagation(), children: [
+          /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("button", { className: "color-palette-reset", onClick: handleNone, children: [
+            /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(import_lucide_react3.RotateCcw, { size: 12 }),
+            "No fill"
           ] }),
-          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",
-                  min: 0,
-                  max: 100,
-                  value: gap,
-                  onChange: (e) => handleGapChange(Number(e.target.value)),
-                  onClick: (e) => e.stopPropagation()
-                }
-              )
-            ] })
-          ] })
+          /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("div", { className: "color-palette-grid", children: COLOR_PALETTE.map((row, ri) => /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("div", { className: "color-palette-row", children: row.map((color) => /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+            "div",
+            {
+              className: `color-palette-swatch${activeColor.toLowerCase() === color.toLowerCase() ? " active" : ""}`,
+              style: { backgroundColor: color },
+              onClick: () => handleColor(color),
+              title: color
+            },
+            color
+          )) }, ri)) })
         ] }) })
       ]
     }
   );
 }
 
-// src/toolbar/TableTool.tsx
+// src/toolbar/TableCellBorderColorTool.tsx
 var import_react4 = require("react");
-var import_lucide_react3 = require("lucide-react");
+var import_lucide_react4 = require("lucide-react");
 var import_jsx_runtime6 = require("react/jsx-runtime");
+var COLOR_PALETTE2 = [
+  [
+    "#000000",
+    "#434343",
+    "#666666",
+    "#999999",
+    "#b7b7b7",
+    "#cccccc",
+    "#d9d9d9",
+    "#efefef",
+    "#f3f3f3",
+    "#ffffff"
+  ],
+  [
+    "#980000",
+    "#ff0000",
+    "#ff9900",
+    "#ffff00",
+    "#00ff00",
+    "#00ffff",
+    "#4a86e8",
+    "#0000ff",
+    "#9900ff",
+    "#ff00ff"
+  ],
+  [
+    "#e6b8af",
+    "#f4cccc",
+    "#fce5cd",
+    "#fff2cc",
+    "#d9ead3",
+    "#d0e0e3",
+    "#c9daf8",
+    "#cfe2f3",
+    "#d9d2e9",
+    "#ead1dc"
+  ],
+  [
+    "#dd7e6b",
+    "#ea9999",
+    "#f9cb9c",
+    "#ffe599",
+    "#b6d7a8",
+    "#a2c4c9",
+    "#a4c2f4",
+    "#9fc5e8",
+    "#b4a7d6",
+    "#d5a6bd"
+  ],
+  [
+    "#cc4125",
+    "#e06666",
+    "#f6b26b",
+    "#ffd966",
+    "#93c47d",
+    "#76a5af",
+    "#6d9eeb",
+    "#6fa8dc",
+    "#8e7cc3",
+    "#c27ba0"
+  ],
+  [
+    "#a61c00",
+    "#cc0000",
+    "#e69138",
+    "#f1c232",
+    "#6aa84f",
+    "#45818e",
+    "#3c78d8",
+    "#3d85c6",
+    "#674ea7",
+    "#a64d79"
+  ],
+  [
+    "#85200c",
+    "#990000",
+    "#b45f06",
+    "#bf9000",
+    "#38761d",
+    "#134f5c",
+    "#1155cc",
+    "#0b5394",
+    "#351c75",
+    "#741b47"
+  ],
+  [
+    "#5b0f00",
+    "#660000",
+    "#783f04",
+    "#7f6000",
+    "#274e13",
+    "#0c343d",
+    "#1c4587",
+    "#073763",
+    "#20124d",
+    "#4c1130"
+  ]
+];
+function TableCellBorderColorTool() {
+  const { editorRef } = useEditor();
+  const dropdownRef = (0, import_react4.useRef)(null);
+  const [activeColor, setActiveColor] = (0, import_react4.useState)("#000000");
+  const handleColor = (color) => {
+    setActiveColor(color);
+    editorRef.current?.command.executeTableTdBorderColor(color);
+    dropdownRef.current?.classList.remove("visible");
+  };
+  const handleReset = () => {
+    setActiveColor("#000000");
+    editorRef.current?.command.executeTableTdBorderColor("");
+    dropdownRef.current?.classList.remove("visible");
+  };
+  return /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(
+    "div",
+    {
+      className: "menu-item__td-border-color",
+      title: "Cell border color",
+      onClick: () => dropdownRef.current?.classList.toggle("visible"),
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(import_lucide_react4.PenLine, { size: 14 }),
+        /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("span", { style: { backgroundColor: activeColor } }),
+        /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("div", { className: "color-palette-dropdown", ref: dropdownRef, children: /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("div", { onClick: (e) => e.stopPropagation(), children: [
+          /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("button", { className: "color-palette-reset", onClick: handleReset, children: [
+            /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(import_lucide_react4.RotateCcw, { size: 12 }),
+            "Reset"
+          ] }),
+          /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("div", { className: "color-palette-grid", children: COLOR_PALETTE2.map((row, ri) => /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("div", { className: "color-palette-row", children: row.map((color) => /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+            "div",
+            {
+              className: `color-palette-swatch${activeColor.toLowerCase() === color.toLowerCase() ? " active" : ""}`,
+              style: { backgroundColor: color },
+              onClick: () => handleColor(color),
+              title: color
+            },
+            color
+          )) }, ri)) })
+        ] }) })
+      ]
+    }
+  );
+}
+
+// src/toolbar/ColumnTool.tsx
+var import_react5 = require("react");
+var import_lucide_react5 = require("lucide-react");
+var import_jsx_runtime7 = require("react/jsx-runtime");
+function ColumnTool() {
+  const { editorRef } = useEditor();
+  const optionsRef = (0, import_react5.useRef)(null);
+  const [currentColumns, setCurrentColumns] = (0, import_react5.useState)(1);
+  const [gap, setGap] = (0, import_react5.useState)(20);
+  const toggle = () => optionsRef.current?.classList.toggle("visible");
+  const handleColumn = (col) => {
+    editorRef.current?.command.executeColumnCount(col);
+    setCurrentColumns(col);
+  };
+  const handleGapChange = (value) => {
+    const clampedValue = Math.max(0, Math.min(100, value));
+    setGap(clampedValue);
+    editorRef.current?.command.executeColumnGap(clampedValue);
+  };
+  return /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("div", { className: "menu-item__select-group", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("div", { className: "menu-item__select-text", title: "Column Layout", onClick: toggle, children: currentColumns === 1 ? "1 Column" : `${currentColumns} Columns` }),
+    /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("div", { className: "menu-item__select-arrow", onClick: toggle, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(import_lucide_react5.ChevronDown, { size: 10, strokeWidth: 2.5 }),
+      /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("div", { className: "options", ref: optionsRef, style: { width: "130px" }, children: /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("div", { onClick: (e) => e.stopPropagation(), children: [
+        /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("ul", { children: [
+          /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("li", { onClick: () => handleColumn(1), children: "1 Column" }),
+          /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("li", { onClick: () => handleColumn(2), children: "2 Columns" })
+        ] }),
+        currentColumns > 1 && /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(import_jsx_runtime7.Fragment, { children: [
+          /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("div", { className: "option-divider" }),
+          /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("div", { className: "option-row", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("label", { children: "Gap (px)" }),
+            /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+              "input",
+              {
+                type: "number",
+                min: 0,
+                max: 100,
+                value: gap,
+                onChange: (e) => handleGapChange(Number(e.target.value)),
+                onClick: (e) => e.stopPropagation()
+              }
+            )
+          ] })
+        ] })
+      ] }) })
+    ] })
+  ] });
+}
+
+// src/toolbar/TableTool.tsx
+var import_react6 = require("react");
+var import_lucide_react6 = require("lucide-react");
+var import_jsx_runtime8 = require("react/jsx-runtime");
 function TableTool() {
   const { editorRef } = useEditor();
-  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)(() => {
+  const [visible, setVisible] = (0, import_react6.useState)(false);
+  const [hoverRow, setHoverRow] = (0, import_react6.useState)(0);
+  const [hoverCol, setHoverCol] = (0, import_react6.useState)(0);
+  const containerRef = (0, import_react6.useRef)(null);
+  (0, import_react6.useEffect)(() => {
     if (!visible) return;
     const handleClickOutside = (e) => {
       if (containerRef.current && !containerRef.current.contains(e.target)) {
@@ -265,18 +558,18 @@ function TableTool() {
     setHoverRow(0);
     setHoverCol(0);
   };
-  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,
+  return /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("div", { ref: containerRef, className: "menu-item__table", title: "Table", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+      import_lucide_react6.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)(
+    visible && /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("div", { className: "table-dropdown", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("div", { className: "table-dropdown-header", children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("span", { children: hoverRow > 0 ? `${hoverRow} \xD7 ${hoverCol}` : "Insert Table" }) }),
+      /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("div", { className: "table-dropdown-grid", onClick: handleInsertTable, children: Array.from({ length: 8 }).map((_, rowIdx) => /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("div", { className: "table-dropdown-row", children: Array.from({ length: 8 }).map((_2, colIdx) => /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
         "div",
         {
           className: `table-dropdown-cell ${rowIdx < hoverRow && colIdx < hoverCol ? "active" : ""}`,
@@ -292,8 +585,9 @@ function TableTool() {
 }
 
 // src/toolbar/TitleTool.tsx
-var import_react5 = require("react");
-var import_jsx_runtime7 = require("react/jsx-runtime");
+var import_react7 = require("react");
+var import_lucide_react7 = require("lucide-react");
+var import_jsx_runtime9 = require("react/jsx-runtime");
 var LEVELS = [
   { level: null, label: "Body" },
   { level: "first", label: "Heading 1" },
@@ -305,37 +599,37 @@ var LEVELS = [
 ];
 function TitleTool() {
   const { editorRef, rangeStyle } = useEditor();
-  const optionsRef = (0, import_react5.useRef)(null);
+  const optionsRef = (0, import_react7.useRef)(null);
   const activeLevel = rangeStyle?.level || null;
   const activeLabel = LEVELS.find((l) => l.level === activeLevel)?.label || "Body";
-  const handleTitle = (level) => {
-    editorRef.current?.command.executeTitle(level);
-  };
-  return /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(
-    "div",
-    {
-      className: "menu-item__title",
-      onClick: () => optionsRef.current?.classList.toggle("visible"),
-      children: [
-        /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("span", { className: "select", title: "Toggle Heading", children: activeLabel }),
-        /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("div", { className: "options", ref: optionsRef, children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("ul", { children: LEVELS.map(({ level, label }) => /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
-          "li",
-          {
-            className: activeLevel === level ? "active" : "",
-            ...level ? { "data-level": level } : {},
-            onClick: () => handleTitle(level),
-            children: label
+  const toggle = () => optionsRef.current?.classList.toggle("visible");
+  const close = () => optionsRef.current?.classList.remove("visible");
+  return /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("div", { className: "menu-item__select-group", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("div", { className: "menu-item__select-text", title: "Toggle Heading", onClick: toggle, children: activeLabel }),
+    /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("div", { className: "menu-item__select-arrow", onClick: toggle, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(import_lucide_react7.ChevronDown, { size: 10, strokeWidth: 2.5 }),
+      /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("div", { className: "options", ref: optionsRef, style: { width: "100px" }, children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("ul", { children: LEVELS.map(({ level, label }) => /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+        "li",
+        {
+          className: activeLevel === level ? "active" : "",
+          ...level ? { "data-level": level } : {},
+          onClick: (e) => {
+            e.stopPropagation();
+            editorRef.current?.command.executeTitle(level);
+            close();
           },
-          label
-        )) }) })
-      ]
-    }
-  );
+          children: label
+        },
+        label
+      )) }) })
+    ] })
+  ] });
 }
 
 // src/toolbar/FontTool.tsx
-var import_react6 = require("react");
-var import_jsx_runtime8 = require("react/jsx-runtime");
+var import_react8 = require("react");
+var import_lucide_react8 = require("lucide-react");
+var import_jsx_runtime10 = require("react/jsx-runtime");
 var FONTS = [
   { family: "Arial", label: "Arial" },
   { family: "Times New Roman", label: "Times New Roman" },
@@ -348,105 +642,104 @@ var FONTS = [
 ];
 function FontTool() {
   const { editorRef, rangeStyle } = useEditor();
-  const optionsRef = (0, import_react6.useRef)(null);
+  const optionsRef = (0, import_react8.useRef)(null);
   const activeFont = rangeStyle?.font || "Arial";
   const activeLabel = FONTS.find((f) => f.family === activeFont)?.label || activeFont;
-  const handleFont = (family) => {
-    editorRef.current?.command.executeFont(family);
-  };
-  return /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(
-    "div",
-    {
-      className: "menu-item__font",
-      onClick: () => optionsRef.current?.classList.toggle("visible"),
-      children: [
-        /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("span", { className: "select", title: "Font", children: activeLabel }),
-        /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("div", { className: "options", ref: optionsRef, children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("ul", { children: FONTS.map(({ family, label }) => /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
-          "li",
-          {
-            "data-family": family,
-            className: activeFont === family ? "active" : "",
-            style: { fontFamily: family },
-            onClick: () => handleFont(family),
-            children: label
+  const toggle = () => optionsRef.current?.classList.toggle("visible");
+  const close = () => optionsRef.current?.classList.remove("visible");
+  return /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("div", { className: "menu-item__select-group", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("div", { className: "menu-item__select-text", title: "Font", onClick: toggle, children: activeLabel }),
+    /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("div", { className: "menu-item__select-arrow", onClick: toggle, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(import_lucide_react8.ChevronDown, { size: 10, strokeWidth: 2.5 }),
+      /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("div", { className: "options", ref: optionsRef, style: { width: "150px" }, children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("ul", { children: FONTS.map(({ family, label }) => /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+        "li",
+        {
+          "data-family": family,
+          className: activeFont === family ? "active" : "",
+          style: { fontFamily: family },
+          onClick: (e) => {
+            e.stopPropagation();
+            editorRef.current?.command.executeFont(family);
+            close();
           },
-          family
-        )) }) })
-      ]
-    }
-  );
+          children: label
+        },
+        family
+      )) }) })
+    ] })
+  ] });
 }
 
 // src/toolbar/FontSizeTool.tsx
-var import_react7 = require("react");
-var import_jsx_runtime9 = require("react/jsx-runtime");
+var import_react9 = require("react");
+var import_lucide_react9 = require("lucide-react");
+var import_jsx_runtime11 = require("react/jsx-runtime");
 var SIZES = [72, 48, 36, 24, 20, 18, 16, 14, 12, 11, 10, 9, 8, 7];
 function FontSizeTool() {
   const { editorRef, rangeStyle } = useEditor();
-  const optionsRef = (0, import_react7.useRef)(null);
+  const optionsRef = (0, import_react9.useRef)(null);
   const activeSize = rangeStyle?.size ?? 11;
-  const handleSize = (size) => {
-    editorRef.current?.command.executeSize(size);
-  };
-  return /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(
-    "div",
-    {
-      className: "menu-item__size",
-      onClick: () => optionsRef.current?.classList.toggle("visible"),
-      children: [
-        /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("span", { className: "select", title: "Font Size", children: activeSize }),
-        /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("div", { className: "options", ref: optionsRef, children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("ul", { children: SIZES.map((size) => /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
-          "li",
-          {
-            className: activeSize === size ? "active" : "",
-            onClick: () => handleSize(size),
-            children: size
+  const toggle = () => optionsRef.current?.classList.toggle("visible");
+  const close = () => optionsRef.current?.classList.remove("visible");
+  return /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)("div", { className: "menu-item__select-group", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("div", { className: "menu-item__select-text", title: "Font Size", onClick: toggle, children: activeSize }),
+    /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)("div", { className: "menu-item__select-arrow", onClick: toggle, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(import_lucide_react9.ChevronDown, { size: 10, strokeWidth: 2.5 }),
+      /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("div", { className: "options", ref: optionsRef, style: { width: "60px" }, children: /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("ul", { children: SIZES.map((size) => /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
+        "li",
+        {
+          className: activeSize === size ? "active" : "",
+          onClick: (e) => {
+            e.stopPropagation();
+            editorRef.current?.command.executeSize(size);
+            close();
           },
-          size
-        )) }) })
-      ]
-    }
-  );
+          children: size
+        },
+        size
+      )) }) })
+    ] })
+  ] });
 }
 
 // src/toolbar/LineHeightTool.tsx
-var import_react8 = require("react");
-var import_jsx_runtime10 = require("react/jsx-runtime");
+var import_react10 = require("react");
+var import_lucide_react10 = require("lucide-react");
+var import_jsx_runtime12 = require("react/jsx-runtime");
 var LINE_HEIGHTS = ["1.0", "1.15", "1.5", "2.0", "2.5"];
 function LineHeightTool() {
   const { editorRef, rangeStyle } = useEditor();
-  const optionsRef = (0, import_react8.useRef)(null);
+  const optionsRef = (0, import_react10.useRef)(null);
   const activeMargin = rangeStyle?.rowMargin ?? 1;
   const activeLabel = Number.isInteger(activeMargin) ? `${activeMargin}.0` : String(activeMargin);
-  const handleLineHeight = (value) => {
-    editorRef.current?.command.executeRowMargin(Number(value));
-  };
-  return /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(
-    "div",
-    {
-      className: "menu-item__line-height",
-      onClick: () => optionsRef.current?.classList.toggle("visible"),
-      children: [
-        /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("span", { className: "select", title: "Line Height", children: activeLabel }),
-        /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("div", { className: "options", ref: optionsRef, 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" : "",
-            onClick: () => handleLineHeight(h),
-            children: h
+  const toggle = () => optionsRef.current?.classList.toggle("visible");
+  const close = () => optionsRef.current?.classList.remove("visible");
+  return /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("div", { className: "menu-item__select-group", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("div", { className: "menu-item__select-text", title: "Line Height", onClick: toggle, children: activeLabel }),
+    /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("div", { className: "menu-item__select-arrow", onClick: toggle, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(import_lucide_react10.ChevronDown, { size: 10, strokeWidth: 2.5 }),
+      /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("div", { className: "options", ref: optionsRef, style: { width: "60px" }, children: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("ul", { children: LINE_HEIGHTS.map((h) => /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
+        "li",
+        {
+          className: String(activeMargin) === h || activeLabel === h ? "active" : "",
+          onClick: (e) => {
+            e.stopPropagation();
+            editorRef.current?.command.executeRowMargin(Number(h));
+            close();
           },
-          h
-        )) }) })
-      ]
-    }
-  );
+          children: h
+        },
+        h
+      )) }) })
+    ] })
+  ] });
 }
 
 // src/toolbar/ColorTool.tsx
-var import_react9 = require("react");
-var import_lucide_react4 = require("lucide-react");
-var import_jsx_runtime11 = require("react/jsx-runtime");
-var COLOR_PALETTE = [
+var import_react11 = require("react");
+var import_lucide_react11 = require("lucide-react");
+var import_jsx_runtime13 = require("react/jsx-runtime");
+var COLOR_PALETTE3 = [
   [
     "#000000",
     "#434343",
@@ -546,7 +839,7 @@ var COLOR_PALETTE = [
 ];
 function ColorTool() {
   const { editorRef, rangeStyle } = useEditor();
-  const dropdownRef = (0, import_react9.useRef)(null);
+  const dropdownRef = (0, import_react11.useRef)(null);
   const activeColor = rangeStyle?.color || "#000000";
   const handleColor = (color) => {
     editorRef.current?.command.executeColor(color);
@@ -554,22 +847,22 @@ function ColorTool() {
   const handleReset = () => {
     editorRef.current?.command.executeColor(null);
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(
     "div",
     {
       className: "menu-item__color",
       title: "Font Color",
       onClick: () => dropdownRef.current?.classList.toggle("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", ref: dropdownRef, 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 }),
+        /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(import_lucide_react11.Baseline, { size: 16 }),
+        /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("span", { style: { backgroundColor: activeColor } }),
+        /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("input", { id: "color", type: "color", readOnly: true, tabIndex: -1 }),
+        /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("div", { className: "color-palette-dropdown", ref: dropdownRef, 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_react11.RotateCcw, { size: 12 }),
             "Reset"
           ] }),
-          /* @__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)(
+          /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("div", { className: "color-palette-grid", children: COLOR_PALETTE3.map((row, ri) => /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("div", { className: "color-palette-row", children: row.map((color) => /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
             "div",
             {
               className: `color-palette-swatch${activeColor.toLowerCase() === color.toLowerCase() ? " active" : ""}`,
@@ -586,9 +879,9 @@ function ColorTool() {
 }
 
 // src/toolbar/HighlightTool.tsx
-var import_react10 = require("react");
-var import_lucide_react5 = require("lucide-react");
-var import_jsx_runtime12 = require("react/jsx-runtime");
+var import_react12 = require("react");
+var import_lucide_react12 = require("lucide-react");
+var import_jsx_runtime14 = require("react/jsx-runtime");
 var HIGHLIGHT_PALETTE = [
   [
     "#000000",
@@ -689,7 +982,7 @@ var HIGHLIGHT_PALETTE = [
 ];
 function HighlightTool() {
   const { editorRef, rangeStyle } = useEditor();
-  const dropdownRef = (0, import_react10.useRef)(null);
+  const dropdownRef = (0, import_react12.useRef)(null);
   const activeColor = rangeStyle?.highlight || "";
   const handleColor = (color) => {
     editorRef.current?.command.executeHighlight(color);
@@ -697,22 +990,22 @@ function HighlightTool() {
   const handleReset = () => {
     editorRef.current?.command.executeHighlight(null);
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)(
     "div",
     {
       className: "menu-item__highlight",
       title: "Highlight",
       onClick: () => dropdownRef.current?.classList.toggle("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", ref: dropdownRef, 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 }),
+        /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(import_lucide_react12.Highlighter, { size: 16 }),
+        /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("span", { style: { backgroundColor: activeColor || "#ffff00" } }),
+        /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("input", { id: "highlight", type: "color", readOnly: true, tabIndex: -1 }),
+        /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("div", { className: "color-palette-dropdown", ref: dropdownRef, children: /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)("div", { onClick: (e) => e.stopPropagation(), children: [
+          /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)("button", { className: "color-palette-reset", onClick: handleReset, children: [
+            /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(import_lucide_react12.RotateCcw, { size: 12 }),
             "None"
           ] }),
-          /* @__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)(
+          /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("div", { className: "color-palette-grid", children: HIGHLIGHT_PALETTE.map((row, ri) => /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("div", { className: "color-palette-row", children: row.map((color) => /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
             "div",
             {
               className: `color-palette-swatch${activeColor && activeColor.toLowerCase() === color.toLowerCase() ? " active" : ""}`,
@@ -729,174 +1022,173 @@ function HighlightTool() {
 }
 
 // src/toolbar/BoldTool.tsx
-var import_lucide_react6 = require("lucide-react");
-var import_jsx_runtime13 = require("react/jsx-runtime");
+var import_lucide_react13 = require("lucide-react");
+var import_jsx_runtime15 = require("react/jsx-runtime");
 function BoldTool() {
   const { editorRef, isApple, rangeStyle } = useEditor();
   const isActive = rangeStyle?.bold === true;
-  return /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime15.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 })
+      children: /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(import_lucide_react13.Bold, { size: 16 })
     }
   );
 }
 
 // src/toolbar/ItalicTool.tsx
-var import_lucide_react7 = require("lucide-react");
-var import_jsx_runtime14 = require("react/jsx-runtime");
+var import_lucide_react14 = require("lucide-react");
+var import_jsx_runtime16 = require("react/jsx-runtime");
 function ItalicTool() {
   const { editorRef, isApple, rangeStyle } = useEditor();
   const isActive = rangeStyle?.italic === true;
-  return /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime16.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 })
+      children: /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(import_lucide_react14.Italic, { size: 16 })
     }
   );
 }
 
 // src/toolbar/UnderlineTool.tsx
-var import_react11 = require("react");
-var import_lucide_react8 = require("lucide-react");
-var import_jsx_runtime15 = require("react/jsx-runtime");
+var import_react13 = require("react");
+var import_lucide_react15 = require("lucide-react");
+var import_jsx_runtime17 = require("react/jsx-runtime");
 var STYLES = ["solid", "double", "dashed", "dotted", "wavy"];
 function UnderlineTool() {
   const { editorRef, isApple, rangeStyle } = useEditor();
-  const optionsRef = (0, import_react11.useRef)(null);
+  const optionsRef = (0, import_react13.useRef)(null);
   const isActive = rangeStyle?.underline === true;
-  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: () => optionsRef.current?.classList.toggle("visible")
-          }
-        ),
-        /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("div", { className: "options", ref: optionsRef, 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 });
+  return /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)("div", { className: "menu-item__underline-group", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
+      "div",
+      {
+        className: `menu-item__underline-btn${isActive ? " active" : ""}`,
+        title: `Underline(${isApple ? "\u2318" : "Ctrl"}+U)`,
+        onClick: () => editorRef.current?.command.executeUnderline(),
+        children: /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(import_lucide_react15.Underline, { size: 16 })
+      }
+    ),
+    /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)(
+      "div",
+      {
+        className: "menu-item__underline-arrow",
+        onClick: () => optionsRef.current?.classList.toggle("visible"),
+        children: [
+          /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(import_lucide_react15.ChevronDown, { size: 10, strokeWidth: 2.5 }),
+          /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("div", { className: "options", ref: optionsRef, children: /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("ul", { children: STYLES.map((style) => /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
+            "li",
+            {
+              "data-decoration-style": style,
+              onClick: (e) => {
+                e.stopPropagation();
+                editorRef.current?.command.executeUnderline({ style });
+                optionsRef.current?.classList.remove("visible");
+              },
+              children: /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("i", {})
             },
-            children: /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("i", {})
-          },
-          style
-        )) }) })
-      ]
-    }
-  );
+            style
+          )) }) })
+        ]
+      }
+    )
+  ] });
 }
 
 // src/toolbar/StrikeoutTool.tsx
-var import_lucide_react9 = require("lucide-react");
-var import_jsx_runtime16 = require("react/jsx-runtime");
+var import_lucide_react16 = require("lucide-react");
+var import_jsx_runtime18 = require("react/jsx-runtime");
 function StrikeoutTool() {
   const { editorRef, rangeStyle } = useEditor();
   const isActive = rangeStyle?.strikeout === true;
-  return /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime18.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 })
+      children: /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(import_lucide_react16.Strikethrough, { size: 16 })
     }
   );
 }
 
 // src/toolbar/LeftAlignTool.tsx
-var import_lucide_react10 = require("lucide-react");
-var import_jsx_runtime17 = require("react/jsx-runtime");
+var import_lucide_react17 = require("lucide-react");
+var import_jsx_runtime19 = require("react/jsx-runtime");
 function LeftAlignTool() {
   const { editorRef, isApple, rangeStyle } = useEditor();
   const isActive = !rangeStyle?.rowFlex || rangeStyle.rowFlex === "left";
-  return /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime19.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 })
+      children: /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(import_lucide_react17.AlignLeft, { size: 16 })
     }
   );
 }
 
 // src/toolbar/CenterAlignTool.tsx
-var import_lucide_react11 = require("lucide-react");
-var import_jsx_runtime18 = require("react/jsx-runtime");
+var import_lucide_react18 = require("lucide-react");
+var import_jsx_runtime20 = require("react/jsx-runtime");
 function CenterAlignTool() {
   const { editorRef, isApple, rangeStyle } = useEditor();
   const isActive = rangeStyle?.rowFlex === "center";
-  return /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime20.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 })
+      children: /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(import_lucide_react18.AlignCenter, { size: 16 })
     }
   );
 }
 
 // src/toolbar/RightAlignTool.tsx
-var import_lucide_react12 = require("lucide-react");
-var import_jsx_runtime19 = require("react/jsx-runtime");
+var import_lucide_react19 = require("lucide-react");
+var import_jsx_runtime21 = require("react/jsx-runtime");
 function RightAlignTool() {
   const { editorRef, isApple, rangeStyle } = useEditor();
   const isActive = rangeStyle?.rowFlex === "right";
-  return /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime21.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 })
+      children: /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(import_lucide_react19.AlignRight, { size: 16 })
     }
   );
 }
 
 // src/toolbar/JustifyTool.tsx
-var import_lucide_react13 = require("lucide-react");
-var import_jsx_runtime20 = require("react/jsx-runtime");
+var import_lucide_react20 = require("lucide-react");
+var import_jsx_runtime22 = require("react/jsx-runtime");
 function JustifyTool() {
   const { editorRef, isApple, rangeStyle } = useEditor();
   const isActive = rangeStyle?.rowFlex === "justify" || rangeStyle?.rowFlex === "alignment";
-  return /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime22.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 })
+      children: /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(import_lucide_react20.AlignJustify, { size: 16 })
     }
   );
 }
 
 // src/toolbar/ListTool.tsx
-var import_react12 = require("react");
-var import_lucide_react14 = require("lucide-react");
-var import_jsx_runtime21 = require("react/jsx-runtime");
+var import_react14 = require("react");
+var import_lucide_react21 = require("lucide-react");
+var import_jsx_runtime23 = require("react/jsx-runtime");
 var OL_PRESETS = [
   { preset: "olDefault", label: "Default", preview: ["1.", "a.", "i."] },
   { preset: "olParen", label: "Parenthesis", preview: ["1)", "a)", "i)"] },
@@ -917,14 +1209,14 @@ function PresetCell({
   option,
   onClick
 }) {
-  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_runtime21.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("div", { onClick, className: "list-preset-cell", title: option.label, children: option.preview.map((item, i) => /* @__PURE__ */ (0, import_jsx_runtime23.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" })
+        /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("span", { className: "list-preset-marker", children: item }),
+        /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("span", { className: "list-preset-text" })
       ]
     },
     i
@@ -932,13 +1224,9 @@ function PresetCell({
 }
 function ListTool() {
   const { editorRef, isApple, rangeStyle } = useEditor();
-  const optionsRef = (0, import_react12.useRef)(null);
+  const optionsRef = (0, import_react14.useRef)(null);
   const isActive = !!rangeStyle?.listType;
   const close = () => optionsRef.current?.classList.remove("visible");
-  const handleList = (type, style) => {
-    editorRef.current?.command.executeList(type, style);
-    close();
-  };
   const handlePreset = (type, preset) => {
     const style = type === "ol" ? "decimal" : "disc";
     editorRef.current?.command.executeListWithPreset(type, style, preset);
@@ -954,114 +1242,122 @@ function ListTool() {
     editorRef.current?.command.executeListOutdent();
     close();
   };
-  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: () => optionsRef.current?.classList.toggle("visible"),
-            style: { cursor: "pointer" }
-          }
-        ),
-        /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("div", { className: "options", ref: optionsRef, style: { width: "320px" }, children: /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)("div", { style: { padding: "8px" }, 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"),
-                className: "list-quick-btn",
-                children: "Checkbox"
-              }
-            ),
-            /* @__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_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
+  return /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)("div", { className: "menu-item__list-group", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
+      "div",
+      {
+        className: `menu-item__list-btn${isActive ? " active" : ""}`,
+        title: `List(${isApple ? "\u2318" : "Ctrl"}+Shift+U)`,
+        onClick: () => handlePreset("ul", "ulDefault"),
+        children: /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(import_lucide_react21.List, { size: 16 })
+      }
+    ),
+    /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)(
+      "div",
+      {
+        className: "menu-item__list-arrow",
+        onClick: () => optionsRef.current?.classList.toggle("visible"),
+        children: [
+          /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(import_lucide_react21.ChevronDown, { size: 10, strokeWidth: 2.5 }),
+          /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("div", { className: "options", ref: optionsRef, style: { width: "320px" }, children: /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)("div", { style: { padding: "8px" }, children: [
+            /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)("div", { style: { display: "flex", gap: "4px", marginBottom: "8px" }, children: [
+              /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
+                "button",
+                {
+                  onClick: (e) => {
+                    e.stopPropagation();
+                    editorRef.current?.command.executeList("ul", "checkbox");
+                    close();
+                  },
+                  className: "list-quick-btn",
+                  children: "Checkbox"
+                }
+              ),
+              /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
+                "button",
+                {
+                  onClick: handleIndent,
+                  className: "list-quick-btn",
+                  title: "Indent (Tab)",
+                  children: /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(import_lucide_react21.Indent, { size: 14 })
+                }
+              ),
+              /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
+                "button",
+                {
+                  onClick: handleOutdent,
+                  className: "list-quick-btn",
+                  title: "Outdent (Shift+Tab)",
+                  children: /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(import_lucide_react21.Outdent, { size: 14 })
+                }
+              )
+            ] }),
+            /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)("div", { style: { marginBottom: "8px" }, children: [
+              /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)(
+                "div",
+                {
+                  style: {
+                    display: "flex",
+                    alignItems: "center",
+                    gap: "4px",
+                    fontSize: "11px",
+                    color: "#667085",
+                    marginBottom: "6px",
+                    fontWeight: 500
+                  },
+                  children: [
+                    /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(import_lucide_react21.ListOrdered, { size: 12 }),
+                    "Ordered List"
+                  ]
+                }
+              ),
+              /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("div", { className: "list-preset-grid", children: OL_PRESETS.map((option) => /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
+                PresetCell,
+                {
+                  option,
+                  onClick: () => handlePreset("ol", option.preset)
                 },
-                children: [
-                  /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(import_lucide_react14.ListOrdered, { size: 12 }),
-                  "Ordered List"
-                ]
-              }
-            ),
-            /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("div", { className: "list-preset-grid", children: OL_PRESETS.map((option) => /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
-              PresetCell,
-              {
-                option,
-                onClick: () => handlePreset("ol", option.preset)
-              },
-              option.preset
-            )) })
-          ] }),
-          /* @__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
+                option.preset
+              )) })
+            ] }),
+            /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)("div", { children: [
+              /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)(
+                "div",
+                {
+                  style: {
+                    display: "flex",
+                    alignItems: "center",
+                    gap: "4px",
+                    fontSize: "11px",
+                    color: "#667085",
+                    marginBottom: "6px",
+                    fontWeight: 500
+                  },
+                  children: [
+                    /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(import_lucide_react21.List, { size: 12 }),
+                    "Unordered List"
+                  ]
+                }
+              ),
+              /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("div", { className: "list-preset-grid", children: UL_PRESETS.map((option) => /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
+                PresetCell,
+                {
+                  option,
+                  onClick: () => handlePreset("ul", option.preset)
                 },
-                children: [
-                  /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(import_lucide_react14.List, { size: 12 }),
-                  "Unordered List"
-                ]
-              }
-            ),
-            /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("div", { className: "list-preset-grid", children: UL_PRESETS.map((option) => /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
-              PresetCell,
-              {
-                option,
-                onClick: () => handlePreset("ul", option.preset)
-              },
-              option.preset
-            )) })
-          ] })
-        ] }) })
-      ]
-    }
-  );
+                option.preset
+              )) })
+            ] })
+          ] }) })
+        ]
+      }
+    )
+  ] });
 }
 
 // src/toolbar/ImageTool.tsx
-var import_lucide_react15 = require("lucide-react");
-var import_jsx_runtime22 = require("react/jsx-runtime");
+var import_lucide_react22 = require("lucide-react");
+var import_jsx_runtime24 = require("react/jsx-runtime");
 function ImageTool() {
   const { editorRef } = useEditor();
   const handleImageUpload = (e) => {
@@ -1082,14 +1378,14 @@ function ImageTool() {
     };
     e.target.value = "";
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime24.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)(
+        /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(import_lucide_react22.Image, { size: 16 }),
+        /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
           "input",
           {
             type: "file",
@@ -1104,9 +1400,9 @@ function ImageTool() {
 }
 
 // src/toolbar/SeparatorTool.tsx
-var import_react13 = require("react");
-var import_lucide_react16 = require("lucide-react");
-var import_jsx_runtime23 = require("react/jsx-runtime");
+var import_react15 = require("react");
+var import_lucide_react23 = require("lucide-react");
+var import_jsx_runtime25 = require("react/jsx-runtime");
 var DASH_STYLES = [
   { label: "Solid", dashArray: [] },
   { label: "Dotted", dashArray: [1, 1] },
@@ -1120,8 +1416,8 @@ var LINE_WIDTHS = [
 ];
 function SeparatorTool() {
   const { editorRef } = useEditor();
-  const optionsRef = (0, import_react13.useRef)(null);
-  const [selectedWidth, setSelectedWidth] = (0, import_react13.useState)(1);
+  const optionsRef = (0, import_react15.useRef)(null);
+  const [selectedWidth, setSelectedWidth] = (0, import_react15.useState)(1);
   const lineColor = "#344054";
   const handleSeparator = (e, dashArray) => {
     e.stopPropagation();
@@ -1130,7 +1426,7 @@ function SeparatorTool() {
     });
     optionsRef.current?.classList.remove("visible");
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("div", { className: "menu-item", title: "Separator", children: /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("div", { className: "menu-item", title: "Separator", children: /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)(
     "span",
     {
       className: "menu-item__separator",
@@ -1149,15 +1445,15 @@ function SeparatorTool() {
         position: "relative"
       },
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(import_lucide_react16.Minus, { size: 16 }),
-        /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(import_lucide_react23.Minus, { size: 16 }),
+        /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
           "div",
           {
             className: "options",
             ref: optionsRef,
             style: { width: "220px", height: "auto" },
-            children: /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)("div", { style: { padding: "8px 10px 10px" }, 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)(
+            children: /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)("div", { style: { padding: "8px 10px 10px" }, children: [
+              /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("ul", { style: { margin: 0, padding: 0, listStyle: "none" }, children: DASH_STYLES.map(({ label, dashArray }) => /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)(
                 "li",
                 {
                   onClick: (e) => handleSeparator(e, dashArray),
@@ -1170,12 +1466,12 @@ function SeparatorTool() {
                     borderRadius: "4px"
                   },
                   children: [
-                    /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
+                    /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
                       "svg",
                       {
                         style: { flex: 1, minWidth: 0, overflow: "hidden" },
                         height: "8",
-                        children: /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
+                        children: /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
                           "line",
                           {
                             x1: "0",
@@ -1189,7 +1485,7 @@ function SeparatorTool() {
                         )
                       }
                     ),
-                    /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
+                    /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
                       "span",
                       {
                         style: {
@@ -1205,7 +1501,7 @@ function SeparatorTool() {
                 },
                 label
               )) }),
-              /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)(
+              /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)(
                 "div",
                 {
                   style: {
@@ -1214,7 +1510,7 @@ function SeparatorTool() {
                     paddingTop: "8px"
                   },
                   children: [
-                    /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
+                    /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
                       "div",
                       {
                         style: {
@@ -1226,7 +1522,7 @@ function SeparatorTool() {
                         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)(
+                    /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("div", { style: { display: "flex", gap: "4px" }, children: LINE_WIDTHS.map(({ label, value }) => /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
                       "button",
                       {
                         onClick: (e) => {
@@ -1260,11 +1556,11 @@ function SeparatorTool() {
 }
 
 // src/toolbar/WatermarkTool.tsx
-var import_react14 = require("react");
-var import_jsx_runtime24 = require("react/jsx-runtime");
+var import_react16 = require("react");
+var import_jsx_runtime26 = require("react/jsx-runtime");
 function InsertElementTool() {
   const { editorRef } = useEditor();
-  const optionsRef = (0, import_react14.useRef)(null);
+  const optionsRef = (0, import_react16.useRef)(null);
   const handleHeader = () => {
     if (!editorRef.current) return;
     const options = editorRef.current.command.getOptions();
@@ -1274,41 +1570,41 @@ function InsertElementTool() {
     }
     editorRef.current.command.executeSetZone("header");
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)(
     "div",
     {
       className: "menu-item__insert-element",
       onClick: () => optionsRef.current?.classList.toggle("visible"),
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("i", { title: "Insert Element" }),
-        /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("div", { className: "options", ref: optionsRef, children: /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("ul", { children: /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("li", { onClick: handleHeader, children: "Add Header" }) }) })
+        /* @__PURE__ */ (0, import_jsx_runtime26.jsx)("i", { title: "Insert Element" }),
+        /* @__PURE__ */ (0, import_jsx_runtime26.jsx)("div", { className: "options", ref: optionsRef, children: /* @__PURE__ */ (0, import_jsx_runtime26.jsx)("ul", { children: /* @__PURE__ */ (0, import_jsx_runtime26.jsx)("li", { onClick: handleHeader, children: "Add Header" }) }) })
       ]
     }
   );
 }
 
 // src/toolbar/PageBreakTool.tsx
-var import_react15 = require("react");
-var import_jsx_runtime25 = require("react/jsx-runtime");
+var import_react17 = require("react");
+var import_jsx_runtime27 = require("react/jsx-runtime");
 function PageBreakTool() {
   const { editorRef } = useEditor();
-  const optionsRef = (0, import_react15.useRef)(null);
+  const optionsRef = (0, import_react17.useRef)(null);
   const handlePageBreak = () => {
     editorRef.current?.command.executePageBreak();
   };
   const handleColumnBreak = () => {
     editorRef.current?.command.executeColumnBreak();
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime27.jsxs)(
     "div",
     {
       className: "menu-item__page-break",
       onClick: () => optionsRef.current?.classList.toggle("visible"),
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("i", { title: "Break" }),
-        /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("div", { className: "options", ref: optionsRef, 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" })
+        /* @__PURE__ */ (0, import_jsx_runtime27.jsx)("i", { title: "Break" }),
+        /* @__PURE__ */ (0, import_jsx_runtime27.jsx)("div", { className: "options", ref: optionsRef, children: /* @__PURE__ */ (0, import_jsx_runtime27.jsxs)("ul", { children: [
+          /* @__PURE__ */ (0, import_jsx_runtime27.jsx)("li", { onClick: handlePageBreak, children: "Page Break" }),
+          /* @__PURE__ */ (0, import_jsx_runtime27.jsx)("li", { onClick: handleColumnBreak, children: "Column Break" })
         ] }) })
       ]
     }
@@ -1316,124 +1612,132 @@ function PageBreakTool() {
 }
 
 // src/EditorToolbar.tsx
-var import_jsx_runtime26 = require("react/jsx-runtime");
+var import_jsx_runtime28 = require("react/jsx-runtime");
 function EditorToolbar() {
-  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, {})
+  const { isInTable } = useEditor();
+  return /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)("div", { className: "menu", "editor-component": "menu", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)("div", { className: "menu-item", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(UndoTool, {}),
+      /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(RedoTool, {})
+    ] }),
+    /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("div", { className: "menu-divider" }),
+    /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("div", { className: "menu-item", children: /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(ColumnTool, {}) }),
+    /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("div", { className: "menu-divider" }),
+    /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)("div", { className: "menu-item", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(PageBreakTool, {}),
+      /* @__PURE__ */ (0, import_jsx_runtime28.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_runtime28.jsx)("div", { className: "menu-divider" }),
+    /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("div", { className: "menu-item", children: /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(TableTool, {}) }),
+    /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("div", { className: "menu-divider" }),
+    isInTable && /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)(import_jsx_runtime28.Fragment, { children: [
+      /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)("div", { className: "menu-item", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(TableCellBgColorTool, {}),
+        /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(TableCellBorderColorTool, {})
+      ] }),
+      /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("div", { className: "menu-divider" })
     ] }),
-    /* @__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_runtime28.jsxs)("div", { className: "menu-item", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(TitleTool, {}),
+      /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(FontTool, {}),
+      /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(FontSizeTool, {}),
+      /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(LineHeightTool, {})
     ] }),
-    /* @__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_runtime28.jsx)("div", { className: "menu-divider" }),
+    /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)("div", { className: "menu-item", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(ColorTool, {}),
+      /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(HighlightTool, {}),
+      /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(BoldTool, {}),
+      /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(ItalicTool, {}),
+      /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(UnderlineTool, {}),
+      /* @__PURE__ */ (0, import_jsx_runtime28.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)(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_runtime28.jsx)("div", { className: "menu-divider" }),
+    /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)("div", { className: "menu-item", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(LeftAlignTool, {}),
+      /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(CenterAlignTool, {}),
+      /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(RightAlignTool, {}),
+      /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(JustifyTool, {})
     ] }),
-    /* @__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, {}) })
+    /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("div", { className: "menu-divider" }),
+    /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("div", { className: "menu-item", children: /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(ListTool, {}) }),
+    /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("div", { className: "menu-divider" }),
+    /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("div", { className: "menu-item", children: /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(ImageTool, {}) }),
+    /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("div", { className: "menu-item", children: /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(InsertElementTool, {}) })
   ] });
 }
 
 // src/footer/CatalogToggleTool.tsx
-var import_jsx_runtime27 = require("react/jsx-runtime");
+var import_jsx_runtime29 = require("react/jsx-runtime");
 function CatalogToggleTool() {
   const { handleToggleCatalogAction } = useFooter();
-  return /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(
     "div",
     {
       className: "catalog-mode",
       title: "Catalog",
       onClick: handleToggleCatalogAction,
-      children: /* @__PURE__ */ (0, import_jsx_runtime27.jsx)("i", {})
+      children: /* @__PURE__ */ (0, import_jsx_runtime29.jsx)("i", {})
     }
   );
 }
 
 // src/footer/PageModeTool.tsx
-var import_react16 = require("react");
-var import_jsx_runtime28 = require("react/jsx-runtime");
+var import_react18 = require("react");
+var import_jsx_runtime30 = require("react/jsx-runtime");
 function PageModeTool() {
   const { editorRef } = useEditor();
-  const [visible, setVisible] = (0, import_react16.useState)(false);
+  const [visible, setVisible] = (0, import_react18.useState)(false);
   const handlePageMode = (mode) => {
     editorRef.current?.command.executePageMode(mode);
     setVisible(false);
   };
-  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" })
+  return /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)("div", { className: "page-mode", onClick: () => setVisible(!visible), children: [
+    /* @__PURE__ */ (0, import_jsx_runtime30.jsx)("i", { title: "Page Mode" }),
+    /* @__PURE__ */ (0, import_jsx_runtime30.jsx)("div", { className: `options ${visible ? "visible" : ""}`, children: /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)("ul", { children: [
+      /* @__PURE__ */ (0, import_jsx_runtime30.jsx)("li", { onClick: () => handlePageMode("paging"), className: "active", children: "Paging" }),
+      /* @__PURE__ */ (0, import_jsx_runtime30.jsx)("li", { onClick: () => handlePageMode("continuity"), children: "Continuity" })
     ] }) })
   ] });
 }
 
 // src/footer/FooterStatus.tsx
-var import_jsx_runtime29 = require("react/jsx-runtime");
+var import_jsx_runtime31 = require("react/jsx-runtime");
 function FooterStatus() {
   const { pageNoList, pageNo, pageSize, wordCount, rowNo, colNo } = useFooter();
-  return /* @__PURE__ */ (0, import_jsx_runtime29.jsxs)(import_jsx_runtime29.Fragment, { children: [
-    /* @__PURE__ */ (0, import_jsx_runtime29.jsxs)("span", { children: [
+  return /* @__PURE__ */ (0, import_jsx_runtime31.jsxs)(import_jsx_runtime31.Fragment, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime31.jsxs)("span", { children: [
       "Visible Pages: ",
-      /* @__PURE__ */ (0, import_jsx_runtime29.jsx)("span", { className: "page-no-list", children: pageNoList })
+      /* @__PURE__ */ (0, import_jsx_runtime31.jsx)("span", { className: "page-no-list", children: pageNoList })
     ] }),
-    /* @__PURE__ */ (0, import_jsx_runtime29.jsx)("span", { className: "footer-divider" }),
-    /* @__PURE__ */ (0, import_jsx_runtime29.jsxs)("span", { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime31.jsx)("span", { className: "footer-divider" }),
+    /* @__PURE__ */ (0, import_jsx_runtime31.jsxs)("span", { children: [
       "Pages: ",
-      /* @__PURE__ */ (0, import_jsx_runtime29.jsx)("span", { className: "page-no", children: pageNo }),
+      /* @__PURE__ */ (0, import_jsx_runtime31.jsx)("span", { className: "page-no", children: pageNo }),
       "/",
-      /* @__PURE__ */ (0, import_jsx_runtime29.jsx)("span", { className: "page-size", children: pageSize })
+      /* @__PURE__ */ (0, import_jsx_runtime31.jsx)("span", { className: "page-size", children: pageSize })
     ] }),
-    /* @__PURE__ */ (0, import_jsx_runtime29.jsx)("span", { className: "footer-divider" }),
-    /* @__PURE__ */ (0, import_jsx_runtime29.jsxs)("span", { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime31.jsx)("span", { className: "footer-divider" }),
+    /* @__PURE__ */ (0, import_jsx_runtime31.jsxs)("span", { children: [
       "Words: ",
-      /* @__PURE__ */ (0, import_jsx_runtime29.jsx)("span", { className: "word-count", children: wordCount })
+      /* @__PURE__ */ (0, import_jsx_runtime31.jsx)("span", { className: "word-count", children: wordCount })
     ] }),
-    /* @__PURE__ */ (0, import_jsx_runtime29.jsx)("span", { className: "footer-divider" }),
-    /* @__PURE__ */ (0, import_jsx_runtime29.jsxs)("span", { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime31.jsx)("span", { className: "footer-divider" }),
+    /* @__PURE__ */ (0, import_jsx_runtime31.jsxs)("span", { children: [
       "Row: ",
-      /* @__PURE__ */ (0, import_jsx_runtime29.jsx)("span", { className: "row-no", children: rowNo })
+      /* @__PURE__ */ (0, import_jsx_runtime31.jsx)("span", { className: "row-no", children: rowNo })
     ] }),
-    /* @__PURE__ */ (0, import_jsx_runtime29.jsx)("span", { className: "footer-divider" }),
-    /* @__PURE__ */ (0, import_jsx_runtime29.jsxs)("span", { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime31.jsx)("span", { className: "footer-divider" }),
+    /* @__PURE__ */ (0, import_jsx_runtime31.jsxs)("span", { children: [
       "Column: ",
-      /* @__PURE__ */ (0, import_jsx_runtime29.jsx)("span", { className: "col-no", children: colNo })
+      /* @__PURE__ */ (0, import_jsx_runtime31.jsx)("span", { className: "col-no", children: colNo })
     ] })
   ] });
 }
 
 // src/footer/EditorModeTool.tsx
-var import_react17 = require("react");
-var import_jsx_runtime30 = require("react/jsx-runtime");
+var import_react19 = require("react");
+var import_jsx_runtime32 = require("react/jsx-runtime");
 var MODE_LIST = [
   { mode: "edit", name: "Edit Mode" },
   { mode: "clean", name: "Clean Mode" },
@@ -1445,8 +1749,8 @@ var MODE_LIST = [
 ];
 function EditorModeTool() {
   const { editorRef } = useEditor();
-  const [editorMode, setEditorMode] = (0, import_react17.useState)("Edit Mode");
-  const modeIndexRef = (0, import_react17.useRef)(0);
+  const [editorMode, setEditorMode] = (0, import_react19.useState)("Edit Mode");
+  const modeIndexRef = (0, import_react19.useRef)(0);
   const handleModeChange = () => {
     modeIndexRef.current = modeIndexRef.current === MODE_LIST.length - 1 ? 0 : modeIndexRef.current + 1;
     const { name, mode } = MODE_LIST[modeIndexRef.current];
@@ -1463,7 +1767,7 @@ function EditorModeTool() {
       }
     });
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(
     "div",
     {
       className: "editor-mode",
@@ -1475,26 +1779,26 @@ function EditorModeTool() {
 }
 
 // src/footer/PageScaleMinusTool.tsx
-var import_jsx_runtime31 = require("react/jsx-runtime");
+var import_jsx_runtime33 = require("react/jsx-runtime");
 function PageScaleMinusTool() {
   const { editorRef } = useEditor();
-  return /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(
     "div",
     {
       className: "page-scale-minus",
       title: "Zoom Out (Ctrl+-)",
       onClick: () => editorRef.current?.command.executePageScaleMinus(),
-      children: /* @__PURE__ */ (0, import_jsx_runtime31.jsx)("i", {})
+      children: /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("i", {})
     }
   );
 }
 
 // src/footer/PageScalePercentageTool.tsx
-var import_jsx_runtime32 = require("react/jsx-runtime");
+var import_jsx_runtime34 = require("react/jsx-runtime");
 function PageScalePercentageTool() {
   const { editorRef } = useEditor();
   const { pageScale } = useFooter();
-  return /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)(
     "span",
     {
       className: "page-scale-percentage",
@@ -1509,23 +1813,23 @@ function PageScalePercentageTool() {
 }
 
 // src/footer/PageScaleAddTool.tsx
-var import_jsx_runtime33 = require("react/jsx-runtime");
+var import_jsx_runtime35 = require("react/jsx-runtime");
 function PageScaleAddTool() {
   const { editorRef } = useEditor();
-  return /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(
     "div",
     {
       className: "page-scale-add",
       title: "Zoom In (Ctrl+=)",
       onClick: () => editorRef.current?.command.executePageScaleAdd(),
-      children: /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("i", {})
+      children: /* @__PURE__ */ (0, import_jsx_runtime35.jsx)("i", {})
     }
   );
 }
 
 // src/footer/PaperSizeTool.tsx
-var import_react18 = require("react");
-var import_jsx_runtime34 = require("react/jsx-runtime");
+var import_react20 = require("react");
+var import_jsx_runtime36 = require("react/jsx-runtime");
 var SIZES2 = [
   { label: "A4", width: 794, height: 1123, active: true },
   { label: "A2", width: 1593, height: 2251 },
@@ -1534,14 +1838,14 @@ var SIZES2 = [
 ];
 function PaperSizeTool() {
   const { editorRef } = useEditor();
-  const [visible, setVisible] = (0, import_react18.useState)(false);
+  const [visible, setVisible] = (0, import_react20.useState)(false);
   const handlePaperSize = (width, height) => {
     editorRef.current?.command.executePaperSize(width, height);
     setVisible(false);
   };
-  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)(
+  return /* @__PURE__ */ (0, import_jsx_runtime36.jsxs)("div", { className: "paper-size", onClick: () => setVisible(!visible), children: [
+    /* @__PURE__ */ (0, import_jsx_runtime36.jsx)("i", { title: "Paper Type" }),
+    /* @__PURE__ */ (0, import_jsx_runtime36.jsx)("div", { className: `options ${visible ? "visible" : ""}`, children: /* @__PURE__ */ (0, import_jsx_runtime36.jsx)("ul", { children: SIZES2.map(({ label, width, height, active }) => /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(
       "li",
       {
         onClick: () => handlePaperSize(width, height),
@@ -1554,19 +1858,19 @@ function PaperSizeTool() {
 }
 
 // src/footer/PaperDirectionTool.tsx
-var import_react19 = require("react");
-var import_jsx_runtime35 = require("react/jsx-runtime");
+var import_react21 = require("react");
+var import_jsx_runtime37 = require("react/jsx-runtime");
 function PaperDirectionTool() {
   const { editorRef } = useEditor();
-  const [visible, setVisible] = (0, import_react19.useState)(false);
+  const [visible, setVisible] = (0, import_react21.useState)(false);
   const handlePaperDirection = (direction) => {
     editorRef.current?.command.executePaperDirection(direction);
     setVisible(false);
   };
-  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)(
+  return /* @__PURE__ */ (0, import_jsx_runtime37.jsxs)("div", { className: "paper-direction", onClick: () => setVisible(!visible), children: [
+    /* @__PURE__ */ (0, import_jsx_runtime37.jsx)("i", { title: "Paper Direction" }),
+    /* @__PURE__ */ (0, import_jsx_runtime37.jsx)("div", { className: `options ${visible ? "visible" : ""}`, children: /* @__PURE__ */ (0, import_jsx_runtime37.jsxs)("ul", { children: [
+      /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(
         "li",
         {
           onClick: () => handlePaperDirection("vertical"),
@@ -1574,14 +1878,14 @@ function PaperDirectionTool() {
           children: "Portrait"
         }
       ),
-      /* @__PURE__ */ (0, import_jsx_runtime35.jsx)("li", { onClick: () => handlePaperDirection("horizontal"), children: "Landscape" })
+      /* @__PURE__ */ (0, import_jsx_runtime37.jsx)("li", { onClick: () => handlePaperDirection("horizontal"), children: "Landscape" })
     ] }) })
   ] });
 }
 
 // src/footer/PaperMarginTool.tsx
 var import_core = require("@windoc/core");
-var import_jsx_runtime36 = require("react/jsx-runtime");
+var import_jsx_runtime38 = require("react/jsx-runtime");
 function PaperMarginTool() {
   const { editorRef } = useEditor();
   const handlePaperMargin = async () => {
@@ -1642,19 +1946,19 @@ function PaperMarginTool() {
       }
     });
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(
     "div",
     {
       className: "paper-margin",
       title: "Page Margins",
       onClick: handlePaperMargin,
-      children: /* @__PURE__ */ (0, import_jsx_runtime36.jsx)("i", {})
+      children: /* @__PURE__ */ (0, import_jsx_runtime38.jsx)("i", {})
     }
   );
 }
 
 // src/footer/FullscreenTool.tsx
-var import_jsx_runtime37 = require("react/jsx-runtime");
+var import_jsx_runtime39 = require("react/jsx-runtime");
 function FullscreenTool() {
   const handleFullscreen = () => {
     if (!document.fullscreenElement) {
@@ -1663,11 +1967,11 @@ function FullscreenTool() {
       document.exitFullscreen();
     }
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime37.jsx)("div", { className: "fullscreen", title: "Fullscreen", onClick: handleFullscreen, children: /* @__PURE__ */ (0, import_jsx_runtime37.jsx)("i", {}) });
+  return /* @__PURE__ */ (0, import_jsx_runtime39.jsx)("div", { className: "fullscreen", title: "Fullscreen", onClick: handleFullscreen, children: /* @__PURE__ */ (0, import_jsx_runtime39.jsx)("i", {}) });
 }
 
 // src/footer/EditorOptionTool.tsx
-var import_jsx_runtime38 = require("react/jsx-runtime");
+var import_jsx_runtime40 = require("react/jsx-runtime");
 function EditorOptionTool() {
   const { editorRef } = useEditor();
   const handleEditorOption = async () => {
@@ -1695,21 +1999,21 @@ function EditorOptionTool() {
       }
     });
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(
     "div",
     {
       className: "editor-option",
       title: "Editor Settings",
       onClick: handleEditorOption,
-      children: /* @__PURE__ */ (0, import_jsx_runtime38.jsx)("i", {})
+      children: /* @__PURE__ */ (0, import_jsx_runtime40.jsx)("i", {})
     }
   );
 }
 
 // src/footer/WatermarkFooterTool.tsx
-var import_react20 = require("react");
-var import_jsx_runtime39 = require("react/jsx-runtime");
-var COLOR_PALETTE2 = [
+var import_react22 = require("react");
+var import_jsx_runtime41 = require("react/jsx-runtime");
+var COLOR_PALETTE4 = [
   ["#000000", "#434343", "#666666", "#999999", "#b7b7b7", "#cccccc"],
   ["#980000", "#ff0000", "#ff9900", "#ffff00", "#00ff00", "#00ffff"],
   ["#4a86e8", "#0000ff", "#9900ff", "#ff00ff", "#e6b8af", "#f4cccc"]
@@ -1720,21 +2024,21 @@ var FONTS2 = [
 ];
 function WatermarkFooterTool() {
   const { editorRef } = useEditor();
-  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)(() => {
+  const [visible, setVisible] = (0, import_react22.useState)(false);
+  const [tab, setTab] = (0, import_react22.useState)("text");
+  const containerRef = (0, import_react22.useRef)(null);
+  const panelRef = (0, import_react22.useRef)(null);
+  const fileInputRef = (0, import_react22.useRef)(null);
+  const [text, setText] = (0, import_react22.useState)("WATERMARK");
+  const [font, setFont] = (0, import_react22.useState)("Arial");
+  const [color, setColor] = (0, import_react22.useState)("#AEB5C0");
+  const [opacity, setOpacity] = (0, import_react22.useState)(30);
+  const [rotation, setRotation] = (0, import_react22.useState)(-45);
+  const [inFront, setInFront] = (0, import_react22.useState)(false);
+  const [imageData, setImageData] = (0, import_react22.useState)("");
+  const [imgWidth, setImgWidth] = (0, import_react22.useState)(200);
+  const [imgHeight, setImgHeight] = (0, import_react22.useState)(200);
+  (0, import_react22.useEffect)(() => {
     if (!visible) return;
     const handler = (e) => {
       if (containerRef.current && !containerRef.current.contains(e.target)) {
@@ -1744,7 +2048,7 @@ function WatermarkFooterTool() {
     document.addEventListener("mousedown", handler);
     return () => document.removeEventListener("mousedown", handler);
   }, [visible]);
-  (0, import_react20.useEffect)(() => {
+  (0, import_react22.useEffect)(() => {
     if (!visible || !panelRef.current) return;
     const el = panelRef.current;
     el.style.right = "";
@@ -1758,7 +2062,7 @@ function WatermarkFooterTool() {
       el.style.left = `${-rect.left + 4}px`;
     }
   }, [visible]);
-  const handleFileUpload = (0, import_react20.useCallback)(
+  const handleFileUpload = (0, import_react22.useCallback)(
     (e) => {
       const file = e.target.files?.[0];
       if (!file) return;
@@ -1817,16 +2121,16 @@ function WatermarkFooterTool() {
     editorRef.current?.command.executeDeleteWatermark();
     setVisible(false);
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime39.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime41.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)(import_jsx_runtime39.Fragment, { children: [
-          /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime41.jsx)("i", { title: "Watermark" }),
+        visible && /* @__PURE__ */ (0, import_jsx_runtime41.jsxs)(import_jsx_runtime41.Fragment, { children: [
+          /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(
             "div",
             {
               className: "wm-panel-mask",
@@ -1836,19 +2140,19 @@ function WatermarkFooterTool() {
               }
             }
           ),
-          /* @__PURE__ */ (0, import_jsx_runtime39.jsxs)(
+          /* @__PURE__ */ (0, import_jsx_runtime41.jsxs)(
             "div",
             {
               className: "watermark-footer-panel",
               ref: panelRef,
               onClick: (e) => e.stopPropagation(),
               children: [
-                /* @__PURE__ */ (0, import_jsx_runtime39.jsxs)("div", { className: "wm-panel-title", children: [
-                  /* @__PURE__ */ (0, import_jsx_runtime39.jsx)("span", { children: "Watermark" }),
-                  /* @__PURE__ */ (0, import_jsx_runtime39.jsx)("i", { onClick: () => setVisible(false) })
+                /* @__PURE__ */ (0, import_jsx_runtime41.jsxs)("div", { className: "wm-panel-title", children: [
+                  /* @__PURE__ */ (0, import_jsx_runtime41.jsx)("span", { children: "Watermark" }),
+                  /* @__PURE__ */ (0, import_jsx_runtime41.jsx)("i", { onClick: () => setVisible(false) })
                 ] }),
-                /* @__PURE__ */ (0, import_jsx_runtime39.jsxs)("div", { className: "wm-panel-tabs", children: [
-                  /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(
+                /* @__PURE__ */ (0, import_jsx_runtime41.jsxs)("div", { className: "wm-panel-tabs", children: [
+                  /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(
                     "button",
                     {
                       className: `wm-panel-tab ${tab === "text" ? "active" : ""}`,
@@ -1856,7 +2160,7 @@ function WatermarkFooterTool() {
                       children: "Text"
                     }
                   ),
-                  /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(
+                  /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(
                     "button",
                     {
                       className: `wm-panel-tab ${tab === "image" ? "active" : ""}`,
@@ -1865,11 +2169,11 @@ function WatermarkFooterTool() {
                     }
                   )
                 ] }),
-                /* @__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)(
+                /* @__PURE__ */ (0, import_jsx_runtime41.jsxs)("div", { className: "wm-panel-body", children: [
+                  tab === "text" ? /* @__PURE__ */ (0, import_jsx_runtime41.jsxs)(import_jsx_runtime41.Fragment, { children: [
+                    /* @__PURE__ */ (0, import_jsx_runtime41.jsxs)("div", { className: "wm-panel-field", children: [
+                      /* @__PURE__ */ (0, import_jsx_runtime41.jsx)("label", { children: "Text" }),
+                      /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(
                         "input",
                         {
                           type: "text",
@@ -1879,20 +2183,20 @@ function WatermarkFooterTool() {
                         }
                       )
                     ] }),
-                    /* @__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)(
+                    /* @__PURE__ */ (0, import_jsx_runtime41.jsxs)("div", { className: "wm-panel-field", children: [
+                      /* @__PURE__ */ (0, import_jsx_runtime41.jsx)("label", { children: "Font" }),
+                      /* @__PURE__ */ (0, import_jsx_runtime41.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))
+                          children: FONTS2.map((f) => /* @__PURE__ */ (0, import_jsx_runtime41.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: "Color" }),
-                      /* @__PURE__ */ (0, import_jsx_runtime39.jsx)("div", { className: "wm-panel-colors", children: COLOR_PALETTE2.flat().map((c) => /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(
+                    /* @__PURE__ */ (0, import_jsx_runtime41.jsxs)("div", { className: "wm-panel-field", children: [
+                      /* @__PURE__ */ (0, import_jsx_runtime41.jsx)("label", { children: "Color" }),
+                      /* @__PURE__ */ (0, import_jsx_runtime41.jsx)("div", { className: "wm-panel-colors", children: COLOR_PALETTE4.flat().map((c) => /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(
                         "div",
                         {
                           className: `wm-panel-color ${color.toLowerCase() === c.toLowerCase() ? "active" : ""}`,
@@ -1902,10 +2206,10 @@ function WatermarkFooterTool() {
                         c
                       )) })
                     ] })
-                  ] }) : /* @__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)(
+                  ] }) : /* @__PURE__ */ (0, import_jsx_runtime41.jsxs)(import_jsx_runtime41.Fragment, { children: [
+                    /* @__PURE__ */ (0, import_jsx_runtime41.jsxs)("div", { className: "wm-panel-field", children: [
+                      /* @__PURE__ */ (0, import_jsx_runtime41.jsx)("label", { children: "Image" }),
+                      /* @__PURE__ */ (0, import_jsx_runtime41.jsxs)(
                         "div",
                         {
                           style: {
@@ -1914,7 +2218,7 @@ function WatermarkFooterTool() {
                             gap: "6px"
                           },
                           children: [
-                            /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(
+                            /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(
                               "button",
                               {
                                 className: "wm-panel-upload",
@@ -1922,7 +2226,7 @@ function WatermarkFooterTool() {
                                 children: "Choose File"
                               }
                             ),
-                            /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(
+                            /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(
                               "input",
                               {
                                 ref: fileInputRef,
@@ -1932,12 +2236,12 @@ function WatermarkFooterTool() {
                                 onChange: handleFileUpload
                               }
                             ),
-                            imageData && /* @__PURE__ */ (0, import_jsx_runtime39.jsx)("span", { style: { fontSize: "11px", color: "#667085" }, children: "Loaded" })
+                            imageData && /* @__PURE__ */ (0, import_jsx_runtime41.jsx)("span", { style: { fontSize: "11px", color: "#667085" }, children: "Loaded" })
                           ]
                         }
                       )
                     ] }),
-                    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)(
+                    imageData && /* @__PURE__ */ (0, import_jsx_runtime41.jsx)("div", { className: "wm-panel-field", children: /* @__PURE__ */ (0, import_jsx_runtime41.jsx)("div", { className: "wm-panel-preview", children: /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(
                       "img",
                       {
                         src: imageData,
@@ -1949,10 +2253,10 @@ function WatermarkFooterTool() {
                         }
                       }
                     ) }) }),
-                    /* @__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)(
+                    /* @__PURE__ */ (0, import_jsx_runtime41.jsxs)("div", { className: "wm-panel-field-row", children: [
+                      /* @__PURE__ */ (0, import_jsx_runtime41.jsxs)("div", { className: "wm-panel-field wm-panel-field-half", children: [
+                        /* @__PURE__ */ (0, import_jsx_runtime41.jsx)("label", { children: "W" }),
+                        /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(
                           "input",
                           {
                             type: "number",
@@ -1962,9 +2266,9 @@ function WatermarkFooterTool() {
                           }
                         )
                       ] }),
-                      /* @__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)(
+                      /* @__PURE__ */ (0, import_jsx_runtime41.jsxs)("div", { className: "wm-panel-field wm-panel-field-half", children: [
+                        /* @__PURE__ */ (0, import_jsx_runtime41.jsx)("label", { children: "H" }),
+                        /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(
                           "input",
                           {
                             type: "number",
@@ -1976,15 +2280,15 @@ function WatermarkFooterTool() {
                       ] })
                     ] })
                   ] }),
-                  /* @__PURE__ */ (0, import_jsx_runtime39.jsxs)("div", { className: "wm-panel-field", children: [
-                    /* @__PURE__ */ (0, import_jsx_runtime39.jsxs)("label", { children: [
+                  /* @__PURE__ */ (0, import_jsx_runtime41.jsxs)("div", { className: "wm-panel-field", children: [
+                    /* @__PURE__ */ (0, import_jsx_runtime41.jsxs)("label", { children: [
                       "Opacity ",
-                      /* @__PURE__ */ (0, import_jsx_runtime39.jsxs)("span", { className: "wm-panel-value", children: [
+                      /* @__PURE__ */ (0, import_jsx_runtime41.jsxs)("span", { className: "wm-panel-value", children: [
                         opacity,
                         "%"
                       ] })
                     ] }),
-                    /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(
+                    /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(
                       "input",
                       {
                         type: "range",
@@ -1996,15 +2300,15 @@ function WatermarkFooterTool() {
                       }
                     )
                   ] }),
-                  /* @__PURE__ */ (0, import_jsx_runtime39.jsxs)("div", { className: "wm-panel-field", children: [
-                    /* @__PURE__ */ (0, import_jsx_runtime39.jsxs)("label", { children: [
+                  /* @__PURE__ */ (0, import_jsx_runtime41.jsxs)("div", { className: "wm-panel-field", children: [
+                    /* @__PURE__ */ (0, import_jsx_runtime41.jsxs)("label", { children: [
                       "Rotation ",
-                      /* @__PURE__ */ (0, import_jsx_runtime39.jsxs)("span", { className: "wm-panel-value", children: [
+                      /* @__PURE__ */ (0, import_jsx_runtime41.jsxs)("span", { className: "wm-panel-value", children: [
                         rotation,
                         "\xB0"
                       ] })
                     ] }),
-                    /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(
+                    /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(
                       "input",
                       {
                         type: "range",
@@ -2016,10 +2320,10 @@ function WatermarkFooterTool() {
                       }
                     )
                   ] }),
-                  /* @__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)(
+                  /* @__PURE__ */ (0, import_jsx_runtime41.jsxs)("div", { className: "wm-panel-field", children: [
+                    /* @__PURE__ */ (0, import_jsx_runtime41.jsx)("label", { children: "Position" }),
+                    /* @__PURE__ */ (0, import_jsx_runtime41.jsxs)("div", { className: "wm-panel-toggle", children: [
+                      /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(
                         "button",
                         {
                           className: !inFront ? "active" : "",
@@ -2027,7 +2331,7 @@ function WatermarkFooterTool() {
                           children: "Behind"
                         }
                       ),
-                      /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(
+                      /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(
                         "button",
                         {
                           className: inFront ? "active" : "",
@@ -2038,9 +2342,9 @@ function WatermarkFooterTool() {
                     ] })
                   ] })
                 ] }),
-                /* @__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" })
+                /* @__PURE__ */ (0, import_jsx_runtime41.jsxs)("div", { className: "wm-panel-actions", children: [
+                  /* @__PURE__ */ (0, import_jsx_runtime41.jsx)("button", { className: "wm-panel-btn-delete", onClick: handleDelete, children: "Remove" }),
+                  /* @__PURE__ */ (0, import_jsx_runtime41.jsx)("button", { className: "wm-panel-btn-apply", onClick: handleApply, children: "Apply" })
                 ] })
               ]
             }
@@ -2052,31 +2356,31 @@ function WatermarkFooterTool() {
 }
 
 // src/EditorFooter.tsx
-var import_jsx_runtime40 = require("react/jsx-runtime");
+var import_jsx_runtime42 = require("react/jsx-runtime");
 function EditorFooter() {
-  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, {})
+  return /* @__PURE__ */ (0, import_jsx_runtime42.jsxs)("div", { className: "footer", "editor-component": "footer", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime42.jsxs)("div", { children: [
+      /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(CatalogToggleTool, {}),
+      /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(PageModeTool, {}),
+      /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(FooterStatus, {})
     ] }),
-    /* @__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, {})
+    /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(EditorModeTool, {}),
+    /* @__PURE__ */ (0, import_jsx_runtime42.jsxs)("div", { children: [
+      /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(PageScaleMinusTool, {}),
+      /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(PageScalePercentageTool, {}),
+      /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(PageScaleAddTool, {}),
+      /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(PaperSizeTool, {}),
+      /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(PaperDirectionTool, {}),
+      /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(PaperMarginTool, {}),
+      /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(WatermarkFooterTool, {}),
+      /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(FullscreenTool, {}),
+      /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(EditorOptionTool, {})
     ] })
   ] });
 }
 
 // src/Editor.tsx
-var import_jsx_runtime41 = require("react/jsx-runtime");
+var import_jsx_runtime43 = require("react/jsx-runtime");
 function Editor({
   defaultValue,
   options: userOptions,
@@ -2092,7 +2396,7 @@ function Editor({
   style,
   onDrop: userOnDrop
 }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(FooterProvider, { children: /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(FooterProvider, { children: /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(
     EditorInner,
     {
       defaultValue,
@@ -2126,9 +2430,10 @@ function EditorInner({
   style,
   onDrop: userOnDrop
 }) {
-  const containerRef = (0, import_react21.useRef)(null);
-  const editorRef = (0, import_react21.useRef)(null);
-  const [rangeStyle, setRangeStyle] = (0, import_react21.useState)(null);
+  const containerRef = (0, import_react23.useRef)(null);
+  const editorRef = (0, import_react23.useRef)(null);
+  const [rangeStyle, setRangeStyle] = (0, import_react23.useState)(null);
+  const [isInTable, setIsInTable] = (0, import_react23.useState)(false);
   const {
     setPageNoList,
     setPageNo,
@@ -2138,7 +2443,7 @@ function EditorInner({
     setColNo,
     setPageScale
   } = useFooter();
-  (0, import_react21.useEffect)(() => {
+  (0, import_react23.useEffect)(() => {
     let instance = null;
     let cancelled = false;
     let closeDropdowns = null;
@@ -2165,6 +2470,7 @@ function EditorInner({
         setRangeStyle(payload);
         onRangeStyleChange?.(payload);
         const rangeContext = instance?.command.getRangeContext();
+        setIsInTable(rangeContext?.isTable === true);
         if (rangeContext) {
           setRowNo(rangeContext.startRowNo + 1);
           setColNo(rangeContext.startColNo + 1);
@@ -2286,11 +2592,11 @@ function EditorInner({
     e.preventDefault();
     e.dataTransfer.dropEffect = "copy";
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime41.jsxs)(EditorProvider, { editorRef, rangeStyle, children: [
-    toolbar && !renderToolbar && /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(EditorToolbar, {}),
+  return /* @__PURE__ */ (0, import_jsx_runtime43.jsxs)(EditorProvider, { editorRef, rangeStyle, isInTable, children: [
+    toolbar && !renderToolbar && /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(EditorToolbar, {}),
     renderToolbar,
     children,
-    /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(
+    /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(
       "div",
       {
         className: className ?? "editor",
@@ -2300,7 +2606,7 @@ function EditorInner({
         onDragOver: handleDragOver
       }
     ),
-    footer && !renderFooter && /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(EditorFooter, {}),
+    footer && !renderFooter && /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(EditorFooter, {}),
     renderFooter
   ] });
 }
@@ -2341,6 +2647,8 @@ function EditorInner({
   RightAlignTool,
   SeparatorTool,
   StrikeoutTool,
+  TableCellBgColorTool,
+  TableCellBorderColorTool,
   TableTool,
   TitleTool,
   UnderlineTool,