@windoc/react 0.1.0

package/dist/index.mjs

@@ -0,0 +1,1582 @@
+// src/Editor.tsx
+import { useEffect as useEffect7, useRef as useRef7, useState as useState21 } from "react";
+
+// src/EditorContext.tsx
+import { createContext, useContext, useEffect, useState } from "react";
+import { jsx } from "react/jsx-runtime";
+var EditorContext = createContext(null);
+function EditorProvider({
+  editorRef,
+  rangeStyle,
+  children
+}) {
+  const [isApple, setIsApple] = useState(false);
+  useEffect(() => {
+    setIsApple(/Mac OS X/.test(navigator.userAgent));
+  }, []);
+  return /* @__PURE__ */ jsx(EditorContext.Provider, { value: { editorRef, isApple, rangeStyle }, children });
+}
+function useEditor() {
+  const ctx = useContext(EditorContext);
+  if (!ctx) throw new Error("useEditor must be used within EditorProvider");
+  return ctx;
+}
+
+// src/FooterContext.tsx
+import { createContext as createContext2, useContext as useContext2, useState as useState2 } from "react";
+import { jsx as jsx2 } from "react/jsx-runtime";
+var FooterContext = createContext2(null);
+function FooterProvider({
+  handleToggleCatalogAction,
+  children
+}) {
+  const [pageNoList, setPageNoList] = useState2("1");
+  const [pageNo, setPageNo] = useState2(1);
+  const [pageSize, setPageSize] = useState2(1);
+  const [wordCount, setWordCount] = useState2(0);
+  const [rowNo, setRowNo] = useState2(0);
+  const [colNo, setColNo] = useState2(0);
+  const [pageScale, setPageScale] = useState2(100);
+  return /* @__PURE__ */ jsx2(FooterContext.Provider, { value: {
+    pageNoList,
+    pageNo,
+    pageSize,
+    wordCount,
+    rowNo,
+    colNo,
+    pageScale,
+    setPageNoList,
+    setPageNo,
+    setPageSize,
+    setWordCount,
+    setRowNo,
+    setColNo,
+    setPageScale,
+    handleToggleCatalogAction
+  }, children });
+}
+function useFooter() {
+  const ctx = useContext2(FooterContext);
+  if (!ctx) throw new Error("useFooter must be used within FooterProvider");
+  return ctx;
+}
+
+// src/toolbar/UndoTool.tsx
+import { Undo } from "lucide-react";
+import { jsx as jsx3 } from "react/jsx-runtime";
+function UndoTool() {
+  const { editorRef, isApple, rangeStyle } = useEditor();
+  const isDisabled = rangeStyle ? !rangeStyle.undo : true;
+  return /* @__PURE__ */ jsx3(
+    "div",
+    {
+      className: `menu-item__undo${isDisabled ? " disabled" : ""}`,
+      title: `Undo(${isApple ? "\u2318" : "Ctrl"}+Z)`,
+      onClick: () => {
+        if (!isDisabled) editorRef.current?.command.executeUndo();
+      },
+      children: /* @__PURE__ */ jsx3(Undo, { size: 16 })
+    }
+  );
+}
+
+// src/toolbar/RedoTool.tsx
+import { Redo } from "lucide-react";
+import { jsx as jsx4 } from "react/jsx-runtime";
+function RedoTool() {
+  const { editorRef, isApple, rangeStyle } = useEditor();
+  const isDisabled = rangeStyle ? !rangeStyle.redo : true;
+  return /* @__PURE__ */ jsx4(
+    "div",
+    {
+      className: `menu-item__redo${isDisabled ? " disabled" : ""}`,
+      title: `Redo(${isApple ? "\u2318" : "Ctrl"}+Y)`,
+      onClick: () => {
+        if (!isDisabled) editorRef.current?.command.executeRedo();
+      },
+      children: /* @__PURE__ */ jsx4(Redo, { size: 16 })
+    }
+  );
+}
+
+// src/toolbar/ColumnTool.tsx
+import { useState as useState3 } from "react";
+import { Fragment, jsx as jsx5, jsxs } from "react/jsx-runtime";
+function ColumnTool() {
+  const { editorRef } = useEditor();
+  const [visible, setVisible] = useState3(false);
+  const [currentColumns, setCurrentColumns] = useState3(1);
+  const [gap, setGap] = useState3(20);
+  const handleColumn = (col) => {
+    editorRef.current?.command.executeColumnCount(col);
+    setCurrentColumns(col);
+    setVisible(false);
+  };
+  const handleGapChange = (value) => {
+    const clampedValue = Math.max(0, Math.min(100, value));
+    setGap(clampedValue);
+    editorRef.current?.command.executeColumnGap(clampedValue);
+  };
+  return /* @__PURE__ */ jsxs("div", { className: "menu-item__column", onClick: () => setVisible(!visible), children: [
+    /* @__PURE__ */ jsx5("span", { className: "select", title: "Column Layout", children: currentColumns === 1 ? "1 Column" : `${currentColumns} Columns` }),
+    /* @__PURE__ */ jsxs(
+      "div",
+      {
+        className: `options ${visible ? "visible" : ""}`,
+        onClick: (e) => e.stopPropagation(),
+        children: [
+          /* @__PURE__ */ jsxs("ul", { children: [
+            /* @__PURE__ */ jsx5("li", { onClick: () => handleColumn(1), children: "1 Column" }),
+            /* @__PURE__ */ jsx5("li", { onClick: () => handleColumn(2), children: "2 Columns" })
+          ] }),
+          currentColumns > 1 && /* @__PURE__ */ jsxs(Fragment, { children: [
+            /* @__PURE__ */ jsx5("div", { className: "option-divider" }),
+            /* @__PURE__ */ jsxs("div", { className: "option-row", children: [
+              /* @__PURE__ */ jsx5("label", { children: "Gap (px)" }),
+              /* @__PURE__ */ jsx5(
+                "input",
+                {
+                  type: "number",
+                  min: 0,
+                  max: 100,
+                  value: gap,
+                  onChange: (e) => handleGapChange(Number(e.target.value)),
+                  onClick: (e) => e.stopPropagation()
+                }
+              )
+            ] })
+          ] })
+        ]
+      }
+    )
+  ] });
+}
+
+// src/toolbar/TableTool.tsx
+import { useState as useState4, useEffect as useEffect2, useRef } from "react";
+import { Table } from "lucide-react";
+import { jsx as jsx6, jsxs as jsxs2 } from "react/jsx-runtime";
+function TableTool() {
+  const { editorRef } = useEditor();
+  const [visible, setVisible] = useState4(false);
+  const [hoverRow, setHoverRow] = useState4(0);
+  const [hoverCol, setHoverCol] = useState4(0);
+  const containerRef = useRef(null);
+  useEffect2(() => {
+    if (!visible) return;
+    const handleClickOutside = (e) => {
+      if (containerRef.current && !containerRef.current.contains(e.target)) {
+        setVisible(false);
+        setHoverRow(0);
+        setHoverCol(0);
+      }
+    };
+    document.addEventListener("mousedown", handleClickOutside);
+    return () => document.removeEventListener("mousedown", handleClickOutside);
+  }, [visible]);
+  const handleInsertTable = () => {
+    if (hoverRow > 0 && hoverCol > 0) {
+      editorRef.current?.command.executeInsertTable(hoverRow, hoverCol);
+    }
+    setVisible(false);
+    setHoverRow(0);
+    setHoverCol(0);
+  };
+  return /* @__PURE__ */ jsxs2("div", { ref: containerRef, className: "menu-item__table", title: "Table", children: [
+    /* @__PURE__ */ jsx6(Table, { size: 16, onClick: () => setVisible(!visible), style: { cursor: "pointer" } }),
+    visible && /* @__PURE__ */ jsxs2("div", { className: "table-dropdown", children: [
+      /* @__PURE__ */ jsx6("div", { className: "table-dropdown-header", children: /* @__PURE__ */ jsx6("span", { children: hoverRow > 0 ? `${hoverRow} \xD7 ${hoverCol}` : "Insert Table" }) }),
+      /* @__PURE__ */ jsx6("div", { className: "table-dropdown-grid", onClick: handleInsertTable, children: Array.from({ length: 8 }).map((_, rowIdx) => /* @__PURE__ */ jsx6("div", { className: "table-dropdown-row", children: Array.from({ length: 8 }).map((_2, colIdx) => /* @__PURE__ */ jsx6(
+        "div",
+        {
+          className: `table-dropdown-cell ${rowIdx < hoverRow && colIdx < hoverCol ? "active" : ""}`,
+          onMouseEnter: () => {
+            setHoverRow(rowIdx + 1);
+            setHoverCol(colIdx + 1);
+          }
+        },
+        colIdx
+      )) }, rowIdx)) })
+    ] })
+  ] });
+}
+
+// src/toolbar/TitleTool.tsx
+import { useState as useState5 } from "react";
+import { jsx as jsx7, jsxs as jsxs3 } from "react/jsx-runtime";
+var LEVELS = [
+  { level: null, label: "Body" },
+  { level: "first", label: "Heading 1" },
+  { level: "second", label: "Heading 2" },
+  { level: "third", label: "Heading 3" },
+  { level: "fourth", label: "Heading 4" },
+  { level: "fifth", label: "Heading 5" },
+  { level: "sixth", label: "Heading 6" }
+];
+function TitleTool() {
+  const { editorRef, rangeStyle } = useEditor();
+  const [visible, setVisible] = useState5(false);
+  const activeLevel = rangeStyle?.level || null;
+  const activeLabel = LEVELS.find((l) => l.level === activeLevel)?.label || "Body";
+  const handleTitle = (level) => {
+    editorRef.current?.command.executeTitle(level);
+    setVisible(false);
+  };
+  return /* @__PURE__ */ jsxs3("div", { className: "menu-item__title", onClick: () => setVisible(!visible), children: [
+    /* @__PURE__ */ jsx7("span", { className: "select", title: "Toggle Heading", children: activeLabel }),
+    /* @__PURE__ */ jsx7("div", { className: `options ${visible ? "visible" : ""}`, children: /* @__PURE__ */ jsx7("ul", { children: LEVELS.map(({ level, label }) => /* @__PURE__ */ jsx7(
+      "li",
+      {
+        className: activeLevel === level ? "active" : "",
+        ...level ? { "data-level": level } : {},
+        onClick: () => handleTitle(level),
+        children: label
+      },
+      label
+    )) }) })
+  ] });
+}
+
+// src/toolbar/FontTool.tsx
+import { useState as useState6 } from "react";
+import { jsx as jsx8, jsxs as jsxs4 } from "react/jsx-runtime";
+var FONTS = [
+  { family: "Arial", label: "Sans Serif" },
+  { family: "Times New Roman", label: "Serif" }
+];
+function FontTool() {
+  const { editorRef, rangeStyle } = useEditor();
+  const [visible, setVisible] = useState6(false);
+  const activeFont = rangeStyle?.font || "Arial";
+  const activeLabel = FONTS.find((f) => f.family === activeFont)?.label || activeFont;
+  const handleFont = (family) => {
+    editorRef.current?.command.executeFont(family);
+    setVisible(false);
+  };
+  return /* @__PURE__ */ jsxs4("div", { className: "menu-item__font", onClick: () => setVisible(!visible), children: [
+    /* @__PURE__ */ jsx8("span", { className: "select", title: "Font", children: activeLabel }),
+    /* @__PURE__ */ jsx8("div", { className: `options ${visible ? "visible" : ""}`, children: /* @__PURE__ */ jsx8("ul", { children: FONTS.map(({ family, label }) => /* @__PURE__ */ jsx8(
+      "li",
+      {
+        "data-family": family,
+        className: activeFont === family ? "active" : "",
+        style: { fontFamily: family },
+        onClick: () => handleFont(family),
+        children: label
+      },
+      family
+    )) }) })
+  ] });
+}
+
+// src/toolbar/FontSizeTool.tsx
+import { useState as useState7 } from "react";
+import { jsx as jsx9, jsxs as jsxs5 } from "react/jsx-runtime";
+var SIZES = [56, 48, 34, 32, 29, 24, 21, 20, 18, 16, 14, 12, 10, 8];
+function FontSizeTool() {
+  const { editorRef, rangeStyle } = useEditor();
+  const [visible, setVisible] = useState7(false);
+  const activeSize = rangeStyle?.size ?? 16;
+  const handleSize = (size) => {
+    editorRef.current?.command.executeSize(size);
+    setVisible(false);
+  };
+  return /* @__PURE__ */ jsxs5("div", { className: "menu-item__size", onClick: () => setVisible(!visible), children: [
+    /* @__PURE__ */ jsx9("span", { className: "select", title: "Font Size", children: activeSize }),
+    /* @__PURE__ */ jsx9("div", { className: `options ${visible ? "visible" : ""}`, children: /* @__PURE__ */ jsx9("ul", { children: SIZES.map((size) => /* @__PURE__ */ jsx9(
+      "li",
+      {
+        className: activeSize === size ? "active" : "",
+        onClick: () => handleSize(size),
+        children: size
+      },
+      size
+    )) }) })
+  ] });
+}
+
+// src/toolbar/LineHeightTool.tsx
+import { useState as useState8 } from "react";
+import { jsx as jsx10, jsxs as jsxs6 } from "react/jsx-runtime";
+var LINE_HEIGHTS = ["1.0", "1.15", "1.5", "2.0", "2.5"];
+function LineHeightTool() {
+  const { editorRef, rangeStyle } = useEditor();
+  const [visible, setVisible] = useState8(false);
+  const activeMargin = rangeStyle?.rowMargin ?? 1;
+  const activeLabel = Number.isInteger(activeMargin) ? `${activeMargin}.0` : String(activeMargin);
+  const handleLineHeight = (value) => {
+    editorRef.current?.command.executeRowMargin(Number(value));
+    setVisible(false);
+  };
+  return /* @__PURE__ */ jsxs6("div", { className: "menu-item__line-height", onClick: () => setVisible(!visible), children: [
+    /* @__PURE__ */ jsx10("span", { className: "select", title: "Line Height", children: activeLabel }),
+    /* @__PURE__ */ jsx10("div", { className: `options ${visible ? "visible" : ""}`, children: /* @__PURE__ */ jsx10("ul", { children: LINE_HEIGHTS.map((h) => /* @__PURE__ */ jsx10(
+      "li",
+      {
+        className: String(activeMargin) === h || activeLabel === h ? "active" : "",
+        onClick: () => handleLineHeight(h),
+        children: h
+      },
+      h
+    )) }) })
+  ] });
+}
+
+// src/toolbar/ColorTool.tsx
+import { useState as useState9, useRef as useRef2, useEffect as useEffect3 } from "react";
+import { Baseline, RotateCcw } from "lucide-react";
+import { jsx as jsx11, jsxs as jsxs7 } from "react/jsx-runtime";
+var COLOR_PALETTE = [
+  ["#000000", "#434343", "#666666", "#999999", "#b7b7b7", "#cccccc", "#d9d9d9", "#efefef", "#f3f3f3", "#ffffff"],
+  ["#980000", "#ff0000", "#ff9900", "#ffff00", "#00ff00", "#00ffff", "#4a86e8", "#0000ff", "#9900ff", "#ff00ff"],
+  ["#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 ColorTool() {
+  const { editorRef, rangeStyle } = useEditor();
+  const [visible, setVisible] = useState9(false);
+  const containerRef = useRef2(null);
+  const activeColor = rangeStyle?.color || "#000000";
+  useEffect3(() => {
+    if (!visible) return;
+    const handler = (e) => {
+      if (containerRef.current && !containerRef.current.contains(e.target)) {
+        setVisible(false);
+      }
+    };
+    document.addEventListener("mousedown", handler);
+    return () => document.removeEventListener("mousedown", handler);
+  }, [visible]);
+  const handleColor = (color) => {
+    editorRef.current?.command.executeColor(color);
+    setVisible(false);
+  };
+  const handleReset = () => {
+    editorRef.current?.command.executeColor(null);
+    setVisible(false);
+  };
+  return /* @__PURE__ */ jsxs7("div", { className: "menu-item__color", ref: containerRef, title: "Font Color", onClick: () => setVisible(!visible), children: [
+    /* @__PURE__ */ jsx11(Baseline, { size: 16 }),
+    /* @__PURE__ */ jsx11("span", { style: { backgroundColor: activeColor } }),
+    /* @__PURE__ */ jsx11("input", { id: "color", type: "color", readOnly: true, tabIndex: -1 }),
+    visible && /* @__PURE__ */ jsxs7("div", { className: "color-palette-dropdown", onClick: (e) => e.stopPropagation(), children: [
+      /* @__PURE__ */ jsxs7("button", { className: "color-palette-reset", onClick: handleReset, children: [
+        /* @__PURE__ */ jsx11(RotateCcw, { size: 12 }),
+        "Reset"
+      ] }),
+      /* @__PURE__ */ jsx11("div", { className: "color-palette-grid", children: COLOR_PALETTE.map((row, ri) => /* @__PURE__ */ jsx11("div", { className: "color-palette-row", children: row.map((color) => /* @__PURE__ */ jsx11(
+        "div",
+        {
+          className: `color-palette-swatch${activeColor.toLowerCase() === color.toLowerCase() ? " active" : ""}`,
+          style: { backgroundColor: color },
+          onClick: () => handleColor(color),
+          title: color
+        },
+        color
+      )) }, ri)) })
+    ] })
+  ] });
+}
+
+// src/toolbar/HighlightTool.tsx
+import { useState as useState10, useRef as useRef3, useEffect as useEffect4 } from "react";
+import { Highlighter, RotateCcw as RotateCcw2 } from "lucide-react";
+import { jsx as jsx12, jsxs as jsxs8 } from "react/jsx-runtime";
+var HIGHLIGHT_PALETTE = [
+  ["#000000", "#434343", "#666666", "#999999", "#b7b7b7", "#cccccc", "#d9d9d9", "#efefef", "#f3f3f3", "#ffffff"],
+  ["#980000", "#ff0000", "#ff9900", "#ffff00", "#00ff00", "#00ffff", "#4a86e8", "#0000ff", "#9900ff", "#ff00ff"],
+  ["#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 HighlightTool() {
+  const { editorRef, rangeStyle } = useEditor();
+  const [visible, setVisible] = useState10(false);
+  const containerRef = useRef3(null);
+  const activeColor = rangeStyle?.highlight || "";
+  useEffect4(() => {
+    if (!visible) return;
+    const handler = (e) => {
+      if (containerRef.current && !containerRef.current.contains(e.target)) {
+        setVisible(false);
+      }
+    };
+    document.addEventListener("mousedown", handler);
+    return () => document.removeEventListener("mousedown", handler);
+  }, [visible]);
+  const handleColor = (color) => {
+    editorRef.current?.command.executeHighlight(color);
+    setVisible(false);
+  };
+  const handleReset = () => {
+    editorRef.current?.command.executeHighlight(null);
+    setVisible(false);
+  };
+  return /* @__PURE__ */ jsxs8("div", { className: "menu-item__highlight", ref: containerRef, title: "Highlight", onClick: () => setVisible(!visible), children: [
+    /* @__PURE__ */ jsx12(Highlighter, { size: 16 }),
+    /* @__PURE__ */ jsx12("span", { style: { backgroundColor: activeColor || "#ffff00" } }),
+    /* @__PURE__ */ jsx12("input", { id: "highlight", type: "color", readOnly: true, tabIndex: -1 }),
+    visible && /* @__PURE__ */ jsxs8("div", { className: "color-palette-dropdown", onClick: (e) => e.stopPropagation(), children: [
+      /* @__PURE__ */ jsxs8("button", { className: "color-palette-reset", onClick: handleReset, children: [
+        /* @__PURE__ */ jsx12(RotateCcw2, { size: 12 }),
+        "None"
+      ] }),
+      /* @__PURE__ */ jsx12("div", { className: "color-palette-grid", children: HIGHLIGHT_PALETTE.map((row, ri) => /* @__PURE__ */ jsx12("div", { className: "color-palette-row", children: row.map((color) => /* @__PURE__ */ jsx12(
+        "div",
+        {
+          className: `color-palette-swatch${activeColor && activeColor.toLowerCase() === color.toLowerCase() ? " active" : ""}`,
+          style: { backgroundColor: color },
+          onClick: () => handleColor(color),
+          title: color
+        },
+        color
+      )) }, ri)) })
+    ] })
+  ] });
+}
+
+// src/toolbar/BoldTool.tsx
+import { Bold } from "lucide-react";
+import { jsx as jsx13 } from "react/jsx-runtime";
+function BoldTool() {
+  const { editorRef, isApple, rangeStyle } = useEditor();
+  const isActive = rangeStyle?.bold === true;
+  return /* @__PURE__ */ jsx13("div", { className: `menu-item__bold ${isActive ? "active" : ""}`, title: `Bold(${isApple ? "\u2318" : "Ctrl"}+B)`, onClick: () => editorRef.current?.command.executeBold(), children: /* @__PURE__ */ jsx13(Bold, { size: 16 }) });
+}
+
+// src/toolbar/ItalicTool.tsx
+import { Italic } from "lucide-react";
+import { jsx as jsx14 } from "react/jsx-runtime";
+function ItalicTool() {
+  const { editorRef, isApple, rangeStyle } = useEditor();
+  const isActive = rangeStyle?.italic === true;
+  return /* @__PURE__ */ jsx14("div", { className: `menu-item__italic ${isActive ? "active" : ""}`, title: `Italic(${isApple ? "\u2318" : "Ctrl"}+I)`, onClick: () => editorRef.current?.command.executeItalic(), children: /* @__PURE__ */ jsx14(Italic, { size: 16 }) });
+}
+
+// src/toolbar/UnderlineTool.tsx
+import { useState as useState11 } from "react";
+import { Underline as UnderlineIcon } from "lucide-react";
+import { jsx as jsx15, jsxs as jsxs9 } from "react/jsx-runtime";
+var STYLES = ["solid", "double", "dashed", "dotted", "wavy"];
+function UnderlineTool() {
+  const { editorRef, isApple, rangeStyle } = useEditor();
+  const [visible, setVisible] = useState11(false);
+  const isActive = rangeStyle?.underline === true;
+  return /* @__PURE__ */ jsxs9("div", { className: `menu-item__underline ${isActive ? "active" : ""}`, title: `Underline(${isApple ? "\u2318" : "Ctrl"}+U)`, children: [
+    /* @__PURE__ */ jsx15(UnderlineIcon, { size: 16, onClick: () => editorRef.current?.command.executeUnderline(), style: { cursor: "pointer" } }),
+    /* @__PURE__ */ jsx15("span", { className: "select", onClick: () => setVisible(!visible) }),
+    /* @__PURE__ */ jsx15("div", { className: `options ${visible ? "visible" : ""}`, children: /* @__PURE__ */ jsx15("ul", { children: STYLES.map((style) => /* @__PURE__ */ jsx15("li", { "data-decoration-style": style, onClick: () => {
+      editorRef.current?.command.executeUnderline({ style });
+      setVisible(false);
+    }, children: /* @__PURE__ */ jsx15("i", {}) }, style)) }) })
+  ] });
+}
+
+// src/toolbar/StrikeoutTool.tsx
+import { Strikethrough } from "lucide-react";
+import { jsx as jsx16 } from "react/jsx-runtime";
+function StrikeoutTool() {
+  const { editorRef, rangeStyle } = useEditor();
+  const isActive = rangeStyle?.strikeout === true;
+  return /* @__PURE__ */ jsx16("div", { className: `menu-item__strikeout ${isActive ? "active" : ""}`, title: "Strikethrough", onClick: () => editorRef.current?.command.executeStrikeout(), children: /* @__PURE__ */ jsx16(Strikethrough, { size: 16 }) });
+}
+
+// src/toolbar/LeftAlignTool.tsx
+import { AlignLeft } from "lucide-react";
+import { jsx as jsx17 } from "react/jsx-runtime";
+function LeftAlignTool() {
+  const { editorRef, isApple, rangeStyle } = useEditor();
+  const isActive = !rangeStyle?.rowFlex || rangeStyle.rowFlex === "left";
+  return /* @__PURE__ */ jsx17("div", { className: `menu-item__left ${isActive ? "active" : ""}`, title: `Left align(${isApple ? "\u2318" : "Ctrl"}+L)`, onClick: () => editorRef.current?.command.executeRowFlex("left"), children: /* @__PURE__ */ jsx17(AlignLeft, { size: 16 }) });
+}
+
+// src/toolbar/CenterAlignTool.tsx
+import { AlignCenter } from "lucide-react";
+import { jsx as jsx18 } from "react/jsx-runtime";
+function CenterAlignTool() {
+  const { editorRef, isApple, rangeStyle } = useEditor();
+  const isActive = rangeStyle?.rowFlex === "center";
+  return /* @__PURE__ */ jsx18("div", { className: `menu-item__center ${isActive ? "active" : ""}`, title: `Center align(${isApple ? "\u2318" : "Ctrl"}+E)`, onClick: () => editorRef.current?.command.executeRowFlex("center"), children: /* @__PURE__ */ jsx18(AlignCenter, { size: 16 }) });
+}
+
+// src/toolbar/RightAlignTool.tsx
+import { AlignRight } from "lucide-react";
+import { jsx as jsx19 } from "react/jsx-runtime";
+function RightAlignTool() {
+  const { editorRef, isApple, rangeStyle } = useEditor();
+  const isActive = rangeStyle?.rowFlex === "right";
+  return /* @__PURE__ */ jsx19("div", { className: `menu-item__right ${isActive ? "active" : ""}`, title: `Right align(${isApple ? "\u2318" : "Ctrl"}+R)`, onClick: () => editorRef.current?.command.executeRowFlex("right"), children: /* @__PURE__ */ jsx19(AlignRight, { size: 16 }) });
+}
+
+// src/toolbar/JustifyTool.tsx
+import { AlignJustify } from "lucide-react";
+import { jsx as jsx20 } from "react/jsx-runtime";
+function JustifyTool() {
+  const { editorRef, isApple, rangeStyle } = useEditor();
+  const isActive = rangeStyle?.rowFlex === "justify" || rangeStyle?.rowFlex === "alignment";
+  return /* @__PURE__ */ jsx20("div", { className: `menu-item__justify ${isActive ? "active" : ""}`, title: `Distribute(${isApple ? "\u2318" : "Ctrl"}+Shift+J)`, onClick: () => editorRef.current?.command.executeRowFlex("justify"), children: /* @__PURE__ */ jsx20(AlignJustify, { size: 16 }) });
+}
+
+// src/toolbar/ListTool.tsx
+import { useState as useState12, useRef as useRef4, useEffect as useEffect5 } from "react";
+import { List, ListOrdered, Indent, Outdent } from "lucide-react";
+import { jsx as jsx21, jsxs as jsxs10 } from "react/jsx-runtime";
+var OL_PRESETS = [
+  { preset: "olDefault", label: "Default", preview: ["1.", "a.", "i."] },
+  { preset: "olParen", label: "Parenthesis", preview: ["1)", "a)", "i)"] },
+  { preset: "olOutline", label: "Outline", preview: ["1.", "1.1.", "1.1.1."] },
+  { preset: "olUpperA", label: "Upper Alpha", preview: ["A.", "a.", "i."] },
+  { preset: "olRoman", label: "Roman", preview: ["I.", "A.", "1."] },
+  { preset: "olZeroPad", label: "Zero Pad", preview: ["01.", "a.", "i."] }
+];
+var UL_PRESETS = [
+  { preset: "ulDefault", label: "Default", preview: ["\u25CF", "\u25CB", "\u25A0"] },
+  { preset: "ulDiamond", label: "Diamond", preview: ["\u25C6", "\u27A4", "\u25A0"] },
+  { preset: "ulHollowSq", label: "Hollow Square", preview: ["\u25A1", "\u25A1", "\u25A1"] },
+  { preset: "ulArrow", label: "Arrow", preview: ["\u2192", "\u25C6", "\u25CF"] },
+  { preset: "ulStar", label: "Star", preview: ["\u2605", "\u25CB", "\u25A0"] },
+  { preset: "ulCheckArr", label: "Check Arrow", preview: ["\u27A4", "\u25CB", "\u25A0"] }
+];
+function PresetCell({ option, onClick }) {
+  return /* @__PURE__ */ jsx21(
+    "div",
+    {
+      onClick,
+      className: "list-preset-cell",
+      title: option.label,
+      children: option.preview.map((item, i) => /* @__PURE__ */ jsxs10("div", { className: "list-preset-line", style: { paddingLeft: `${i * 10}px` }, children: [
+        /* @__PURE__ */ jsx21("span", { className: "list-preset-marker", children: item }),
+        /* @__PURE__ */ jsx21("span", { className: "list-preset-text" })
+      ] }, i))
+    }
+  );
+}
+function ListTool() {
+  const { editorRef, isApple, rangeStyle } = useEditor();
+  const [visible, setVisible] = useState12(false);
+  const containerRef = useRef4(null);
+  const optionsRef = useRef4(null);
+  const isActive = !!rangeStyle?.listType;
+  useEffect5(() => {
+    if (!visible) return;
+    const handler = (e) => {
+      if (containerRef.current && !containerRef.current.contains(e.target)) {
+        setVisible(false);
+      }
+    };
+    document.addEventListener("mousedown", handler);
+    return () => document.removeEventListener("mousedown", handler);
+  }, [visible]);
+  useEffect5(() => {
+    if (!visible || !optionsRef.current) return;
+    const el = optionsRef.current;
+    el.style.left = "";
+    el.style.right = "";
+    const rect = el.getBoundingClientRect();
+    if (rect.right > window.innerWidth) {
+      const overflow = rect.right - window.innerWidth + 8;
+      el.style.left = `-${overflow}px`;
+    } else if (rect.left < 0) {
+      el.style.left = `${-rect.left + 8}px`;
+    }
+  }, [visible]);
+  const handleList = (type, style) => {
+    editorRef.current?.command.executeList(type, style);
+    setVisible(false);
+  };
+  const handlePreset = (type, preset) => {
+    const style = type === "ol" ? "decimal" : "disc";
+    editorRef.current?.command.executeListWithPreset(type, style, preset);
+    setVisible(false);
+  };
+  const handleIndent = (e) => {
+    e.stopPropagation();
+    editorRef.current?.command.executeListIndent();
+  };
+  const handleOutdent = (e) => {
+    e.stopPropagation();
+    editorRef.current?.command.executeListOutdent();
+  };
+  return /* @__PURE__ */ jsxs10("div", { ref: containerRef, className: `menu-item__list ${isActive ? "active" : ""}`, title: `List(${isApple ? "\u2318" : "Ctrl"}+Shift+U)`, children: [
+    /* @__PURE__ */ jsx21(List, { size: 16, onClick: () => setVisible(!visible), style: { cursor: "pointer" } }),
+    /* @__PURE__ */ jsxs10("div", { ref: optionsRef, className: `options ${visible ? "visible" : ""}`, style: { padding: "8px", width: "320px" }, children: [
+      /* @__PURE__ */ jsxs10("div", { style: { display: "flex", gap: "4px", marginBottom: "8px" }, children: [
+        /* @__PURE__ */ jsx21(
+          "button",
+          {
+            onClick: () => handleList("ul", "checkbox"),
+            className: "list-quick-btn",
+            children: "Checkbox"
+          }
+        ),
+        /* @__PURE__ */ jsx21("button", { onClick: handleIndent, className: "list-quick-btn", title: "Indent (Tab)", children: /* @__PURE__ */ jsx21(Indent, { size: 14 }) }),
+        /* @__PURE__ */ jsx21("button", { onClick: handleOutdent, className: "list-quick-btn", title: "Outdent (Shift+Tab)", children: /* @__PURE__ */ jsx21(Outdent, { size: 14 }) })
+      ] }),
+      /* @__PURE__ */ jsxs10("div", { style: { marginBottom: "8px" }, children: [
+        /* @__PURE__ */ jsxs10("div", { style: { display: "flex", alignItems: "center", gap: "4px", fontSize: "11px", color: "#667085", marginBottom: "6px", fontWeight: 500 }, children: [
+          /* @__PURE__ */ jsx21(ListOrdered, { size: 12 }),
+          "Ordered List"
+        ] }),
+        /* @__PURE__ */ jsx21("div", { className: "list-preset-grid", children: OL_PRESETS.map((option) => /* @__PURE__ */ jsx21(
+          PresetCell,
+          {
+            option,
+            onClick: () => handlePreset("ol", option.preset)
+          },
+          option.preset
+        )) })
+      ] }),
+      /* @__PURE__ */ jsxs10("div", { children: [
+        /* @__PURE__ */ jsxs10("div", { style: { display: "flex", alignItems: "center", gap: "4px", fontSize: "11px", color: "#667085", marginBottom: "6px", fontWeight: 500 }, children: [
+          /* @__PURE__ */ jsx21(List, { size: 12 }),
+          "Unordered List"
+        ] }),
+        /* @__PURE__ */ jsx21("div", { className: "list-preset-grid", children: UL_PRESETS.map((option) => /* @__PURE__ */ jsx21(
+          PresetCell,
+          {
+            option,
+            onClick: () => handlePreset("ul", option.preset)
+          },
+          option.preset
+        )) })
+      ] })
+    ] })
+  ] });
+}
+
+// src/toolbar/ImageTool.tsx
+import { Image as ImageIcon } from "lucide-react";
+import { jsx as jsx22, jsxs as jsxs11 } from "react/jsx-runtime";
+function ImageTool() {
+  const { editorRef } = useEditor();
+  const handleImageUpload = (e) => {
+    const file = e.target.files?.[0];
+    if (!file) return;
+    const reader = new FileReader();
+    reader.readAsDataURL(file);
+    reader.onload = () => {
+      const img = new Image();
+      img.src = reader.result;
+      img.onload = () => {
+        editorRef.current?.command.executeImage({
+          value: reader.result,
+          width: img.width,
+          height: img.height
+        });
+      };
+    };
+    e.target.value = "";
+  };
+  return /* @__PURE__ */ jsxs11("div", { className: "menu-item__image", onClick: () => document.getElementById("image")?.click(), children: [
+    /* @__PURE__ */ jsx22(ImageIcon, { size: 16 }),
+    /* @__PURE__ */ jsx22("input", { type: "file", id: "image", accept: ".png, .jpg, .jpeg, .svg, .gif", onChange: handleImageUpload })
+  ] });
+}
+
+// src/toolbar/SeparatorTool.tsx
+import { useState as useState13 } from "react";
+import { Minus } from "lucide-react";
+import { jsx as jsx23, jsxs as jsxs12 } from "react/jsx-runtime";
+var DASH_STYLES = [
+  { label: "Solid", dashArray: [] },
+  { label: "Dotted", dashArray: [1, 1] },
+  { label: "Dashed", dashArray: [3, 1] },
+  { label: "Long Dash", dashArray: [4, 4] }
+];
+var LINE_WIDTHS = [
+  { label: "Thin", value: 1 },
+  { label: "Medium", value: 2 },
+  { label: "Thick", value: 4 }
+];
+function SeparatorTool() {
+  const { editorRef } = useEditor();
+  const [visible, setVisible] = useState13(false);
+  const [selectedWidth, setSelectedWidth] = useState13(1);
+  const lineColor = "#344054";
+  const handleSeparator = (dashArray) => {
+    editorRef.current?.command.executeSeparator(dashArray, { lineWidth: selectedWidth });
+    setVisible(false);
+  };
+  return /* @__PURE__ */ jsxs12("div", { className: "menu-item__separator", title: "Separator", children: [
+    /* @__PURE__ */ jsx23(Minus, { size: 16, onClick: () => setVisible(!visible), style: { cursor: "pointer" } }),
+    /* @__PURE__ */ jsxs12("div", { className: `options ${visible ? "visible" : ""}`, style: { padding: "8px 10px 10px", width: "200px" }, children: [
+      /* @__PURE__ */ jsx23("ul", { style: { margin: 0, padding: 0, listStyle: "none" }, children: DASH_STYLES.map(({ label, dashArray }) => /* @__PURE__ */ jsxs12(
+        "li",
+        {
+          onClick: () => handleSeparator(dashArray),
+          style: { display: "flex", alignItems: "center", gap: "10px", padding: "5px 6px", cursor: "pointer", borderRadius: "4px" },
+          children: [
+            /* @__PURE__ */ jsx23("svg", { style: { flex: 1, minWidth: 0, overflow: "hidden" }, height: "8", children: /* @__PURE__ */ jsx23(
+              "line",
+              {
+                x1: "0",
+                y1: "4",
+                x2: "100%",
+                y2: "4",
+                stroke: lineColor,
+                strokeWidth: selectedWidth,
+                strokeDasharray: dashArray.length ? dashArray.join(",") : "none"
+              }
+            ) }),
+            /* @__PURE__ */ jsx23("span", { style: { fontSize: "11px", color: "#475467", whiteSpace: "nowrap", flexShrink: 0 }, children: label })
+          ]
+        },
+        label
+      )) }),
+      /* @__PURE__ */ jsxs12("div", { style: { borderTop: "1px solid #e4e7ec", marginTop: "8px", paddingTop: "8px" }, children: [
+        /* @__PURE__ */ jsx23("div", { style: { fontSize: "11px", color: "#667085", marginBottom: "6px", fontWeight: 500 }, children: "Line Width" }),
+        /* @__PURE__ */ jsx23("div", { style: { display: "flex", gap: "4px" }, children: LINE_WIDTHS.map(({ label, value }) => /* @__PURE__ */ jsx23(
+          "button",
+          {
+            onClick: (e) => {
+              e.stopPropagation();
+              setSelectedWidth(value);
+            },
+            style: {
+              flex: 1,
+              padding: "3px 6px",
+              fontSize: "11px",
+              border: `1px solid ${selectedWidth === value ? "#3b82f6" : "#d0d5dd"}`,
+              borderRadius: "4px",
+              background: selectedWidth === value ? "#eff6ff" : "#fff",
+              color: selectedWidth === value ? "#3b82f6" : "#475467",
+              cursor: "pointer",
+              fontWeight: selectedWidth === value ? 600 : 400
+            },
+            children: label
+          },
+          value
+        )) })
+      ] })
+    ] })
+  ] });
+}
+
+// src/toolbar/WatermarkTool.tsx
+import { useState as useState14 } from "react";
+import { jsx as jsx24, jsxs as jsxs13 } from "react/jsx-runtime";
+function InsertElementTool() {
+  const { editorRef } = useEditor();
+  const [visible, setVisible] = useState14(false);
+  const handleHeader = () => {
+    if (!editorRef.current) return;
+    const options = editorRef.current.command.getOptions();
+    if (options.header.disabled) {
+      options.header.disabled = false;
+      editorRef.current.command.executeForceUpdate();
+    }
+    editorRef.current.command.executeSetZone("header");
+    setVisible(false);
+  };
+  return /* @__PURE__ */ jsxs13("div", { className: "menu-item__insert-element", onClick: () => setVisible(!visible), children: [
+    /* @__PURE__ */ jsx24("i", { title: "Insert Element" }),
+    /* @__PURE__ */ jsx24("div", { className: `options ${visible ? "visible" : ""}`, children: /* @__PURE__ */ jsx24("ul", { children: /* @__PURE__ */ jsx24("li", { onClick: handleHeader, children: "Add Header" }) }) })
+  ] });
+}
+
+// src/toolbar/PageBreakTool.tsx
+import { useState as useState15 } from "react";
+import { jsx as jsx25, jsxs as jsxs14 } from "react/jsx-runtime";
+function PageBreakTool() {
+  const { editorRef } = useEditor();
+  const [visible, setVisible] = useState15(false);
+  const handlePageBreak = () => {
+    editorRef.current?.command.executePageBreak();
+    setVisible(false);
+  };
+  const handleColumnBreak = () => {
+    editorRef.current?.command.executeColumnBreak();
+    setVisible(false);
+  };
+  return /* @__PURE__ */ jsxs14(
+    "div",
+    {
+      className: "menu-item__page-break",
+      onClick: () => setVisible(!visible),
+      children: [
+        /* @__PURE__ */ jsx25("i", { title: "Break" }),
+        /* @__PURE__ */ jsx25("div", { className: `options ${visible ? "visible" : ""}`, children: /* @__PURE__ */ jsxs14("ul", { children: [
+          /* @__PURE__ */ jsx25("li", { onClick: handlePageBreak, children: "Page Break" }),
+          /* @__PURE__ */ jsx25("li", { onClick: handleColumnBreak, children: "Column Break" })
+        ] }) })
+      ]
+    }
+  );
+}
+
+// src/EditorToolbar.tsx
+import { jsx as jsx26, jsxs as jsxs15 } from "react/jsx-runtime";
+function EditorToolbar() {
+  return /* @__PURE__ */ jsxs15("div", { className: "menu", "editor-component": "menu", children: [
+    /* @__PURE__ */ jsxs15("div", { className: "menu-item", children: [
+      /* @__PURE__ */ jsx26(UndoTool, {}),
+      /* @__PURE__ */ jsx26(RedoTool, {})
+    ] }),
+    /* @__PURE__ */ jsx26("div", { className: "menu-divider" }),
+    /* @__PURE__ */ jsx26("div", { className: "menu-item", children: /* @__PURE__ */ jsx26(ColumnTool, {}) }),
+    /* @__PURE__ */ jsx26("div", { className: "menu-divider" }),
+    /* @__PURE__ */ jsxs15("div", { className: "menu-item", children: [
+      /* @__PURE__ */ jsx26(PageBreakTool, {}),
+      /* @__PURE__ */ jsx26(SeparatorTool, {})
+    ] }),
+    /* @__PURE__ */ jsx26("div", { className: "menu-divider" }),
+    /* @__PURE__ */ jsx26("div", { className: "menu-item", children: /* @__PURE__ */ jsx26(TableTool, {}) }),
+    /* @__PURE__ */ jsx26("div", { className: "menu-divider" }),
+    /* @__PURE__ */ jsxs15("div", { className: "menu-item", children: [
+      /* @__PURE__ */ jsx26(TitleTool, {}),
+      /* @__PURE__ */ jsx26(FontTool, {}),
+      /* @__PURE__ */ jsx26(FontSizeTool, {}),
+      /* @__PURE__ */ jsx26(LineHeightTool, {})
+    ] }),
+    /* @__PURE__ */ jsx26("div", { className: "menu-divider" }),
+    /* @__PURE__ */ jsxs15("div", { className: "menu-item", children: [
+      /* @__PURE__ */ jsx26(ColorTool, {}),
+      /* @__PURE__ */ jsx26(HighlightTool, {}),
+      /* @__PURE__ */ jsx26(BoldTool, {}),
+      /* @__PURE__ */ jsx26(ItalicTool, {}),
+      /* @__PURE__ */ jsx26(UnderlineTool, {}),
+      /* @__PURE__ */ jsx26(StrikeoutTool, {})
+    ] }),
+    /* @__PURE__ */ jsx26("div", { className: "menu-divider" }),
+    /* @__PURE__ */ jsxs15("div", { className: "menu-item", children: [
+      /* @__PURE__ */ jsx26(LeftAlignTool, {}),
+      /* @__PURE__ */ jsx26(CenterAlignTool, {}),
+      /* @__PURE__ */ jsx26(RightAlignTool, {}),
+      /* @__PURE__ */ jsx26(JustifyTool, {})
+    ] }),
+    /* @__PURE__ */ jsx26("div", { className: "menu-divider" }),
+    /* @__PURE__ */ jsx26("div", { className: "menu-item", children: /* @__PURE__ */ jsx26(ListTool, {}) }),
+    /* @__PURE__ */ jsx26("div", { className: "menu-divider" }),
+    /* @__PURE__ */ jsx26("div", { className: "menu-item", children: /* @__PURE__ */ jsx26(ImageTool, {}) }),
+    /* @__PURE__ */ jsx26("div", { className: "menu-item", children: /* @__PURE__ */ jsx26(InsertElementTool, {}) })
+  ] });
+}
+
+// src/footer/CatalogToggleTool.tsx
+import { jsx as jsx27 } from "react/jsx-runtime";
+function CatalogToggleTool() {
+  const { handleToggleCatalogAction } = useFooter();
+  return /* @__PURE__ */ jsx27("div", { className: "catalog-mode", title: "Catalog", onClick: handleToggleCatalogAction, children: /* @__PURE__ */ jsx27("i", {}) });
+}
+
+// src/footer/PageModeTool.tsx
+import { useState as useState16 } from "react";
+import { jsx as jsx28, jsxs as jsxs16 } from "react/jsx-runtime";
+function PageModeTool() {
+  const { editorRef } = useEditor();
+  const [visible, setVisible] = useState16(false);
+  const handlePageMode = (mode) => {
+    editorRef.current?.command.executePageMode(mode);
+    setVisible(false);
+  };
+  return /* @__PURE__ */ jsxs16("div", { className: "page-mode", onClick: () => setVisible(!visible), children: [
+    /* @__PURE__ */ jsx28("i", { title: "Page Mode" }),
+    /* @__PURE__ */ jsx28("div", { className: `options ${visible ? "visible" : ""}`, children: /* @__PURE__ */ jsxs16("ul", { children: [
+      /* @__PURE__ */ jsx28("li", { onClick: () => handlePageMode("paging"), className: "active", children: "Paging" }),
+      /* @__PURE__ */ jsx28("li", { onClick: () => handlePageMode("continuity"), children: "Continuity" })
+    ] }) })
+  ] });
+}
+
+// src/footer/FooterStatus.tsx
+import { Fragment as Fragment2, jsx as jsx29, jsxs as jsxs17 } from "react/jsx-runtime";
+function FooterStatus() {
+  const { pageNoList, pageNo, pageSize, wordCount, rowNo, colNo } = useFooter();
+  return /* @__PURE__ */ jsxs17(Fragment2, { children: [
+    /* @__PURE__ */ jsxs17("span", { children: [
+      "Visible Pages: ",
+      /* @__PURE__ */ jsx29("span", { className: "page-no-list", children: pageNoList })
+    ] }),
+    /* @__PURE__ */ jsx29("span", { className: "footer-divider" }),
+    /* @__PURE__ */ jsxs17("span", { children: [
+      "Pages: ",
+      /* @__PURE__ */ jsx29("span", { className: "page-no", children: pageNo }),
+      "/",
+      /* @__PURE__ */ jsx29("span", { className: "page-size", children: pageSize })
+    ] }),
+    /* @__PURE__ */ jsx29("span", { className: "footer-divider" }),
+    /* @__PURE__ */ jsxs17("span", { children: [
+      "Words: ",
+      /* @__PURE__ */ jsx29("span", { className: "word-count", children: wordCount })
+    ] }),
+    /* @__PURE__ */ jsx29("span", { className: "footer-divider" }),
+    /* @__PURE__ */ jsxs17("span", { children: [
+      "Row: ",
+      /* @__PURE__ */ jsx29("span", { className: "row-no", children: rowNo })
+    ] }),
+    /* @__PURE__ */ jsx29("span", { className: "footer-divider" }),
+    /* @__PURE__ */ jsxs17("span", { children: [
+      "Column: ",
+      /* @__PURE__ */ jsx29("span", { className: "col-no", children: colNo })
+    ] })
+  ] });
+}
+
+// src/footer/EditorModeTool.tsx
+import { useState as useState17, useRef as useRef5 } from "react";
+import { jsx as jsx30 } from "react/jsx-runtime";
+var MODE_LIST = [
+  { mode: "edit", name: "Edit Mode" },
+  { mode: "clean", name: "Clean Mode" },
+  { mode: "readonly", name: "Read-only Mode" },
+  { mode: "form", name: "Form Mode" },
+  { mode: "print", name: "Print Mode" },
+  { mode: "design", name: "Design Mode" },
+  { mode: "graffiti", name: "Graffiti Mode" }
+];
+function EditorModeTool() {
+  const { editorRef } = useEditor();
+  const [editorMode, setEditorMode] = useState17("Edit Mode");
+  const modeIndexRef = useRef5(0);
+  const handleModeChange = () => {
+    modeIndexRef.current = modeIndexRef.current === MODE_LIST.length - 1 ? 0 : modeIndexRef.current + 1;
+    const { name, mode } = MODE_LIST[modeIndexRef.current];
+    setEditorMode(name);
+    editorRef.current?.command.executeMode(mode);
+    const isReadonly = mode === "readonly";
+    const enableMenuList = ["search", "print"];
+    document.querySelectorAll(".menu-item>div").forEach((dom) => {
+      const menu = dom.dataset.menu;
+      if (isReadonly && (!menu || !enableMenuList.includes(menu))) {
+        dom.classList.add("disable");
+      } else {
+        dom.classList.remove("disable");
+      }
+    });
+  };
+  return /* @__PURE__ */ jsx30("div", { className: "editor-mode", title: "Click to change mode", onClick: handleModeChange, children: editorMode });
+}
+
+// src/footer/PageScaleMinusTool.tsx
+import { jsx as jsx31 } from "react/jsx-runtime";
+function PageScaleMinusTool() {
+  const { editorRef } = useEditor();
+  return /* @__PURE__ */ jsx31("div", { className: "page-scale-minus", title: "Zoom Out (Ctrl+-)", onClick: () => editorRef.current?.command.executePageScaleMinus(), children: /* @__PURE__ */ jsx31("i", {}) });
+}
+
+// src/footer/PageScalePercentageTool.tsx
+import { jsxs as jsxs18 } from "react/jsx-runtime";
+function PageScalePercentageTool() {
+  const { editorRef } = useEditor();
+  const { pageScale } = useFooter();
+  return /* @__PURE__ */ jsxs18("span", { className: "page-scale-percentage", title: "Zoom Level", onClick: () => editorRef.current?.command.executePageScaleRecovery(), children: [
+    pageScale,
+    "%"
+  ] });
+}
+
+// src/footer/PageScaleAddTool.tsx
+import { jsx as jsx32 } from "react/jsx-runtime";
+function PageScaleAddTool() {
+  const { editorRef } = useEditor();
+  return /* @__PURE__ */ jsx32("div", { className: "page-scale-add", title: "Zoom In (Ctrl+=)", onClick: () => editorRef.current?.command.executePageScaleAdd(), children: /* @__PURE__ */ jsx32("i", {}) });
+}
+
+// src/footer/PaperSizeTool.tsx
+import { useState as useState18 } from "react";
+import { jsx as jsx33, jsxs as jsxs19 } from "react/jsx-runtime";
+var SIZES2 = [
+  { label: "A4", width: 794, height: 1123, active: true },
+  { label: "A2", width: 1593, height: 2251 },
+  { label: "A3", width: 1125, height: 1593 },
+  { label: "A5", width: 565, height: 796 }
+];
+function PaperSizeTool() {
+  const { editorRef } = useEditor();
+  const [visible, setVisible] = useState18(false);
+  const handlePaperSize = (width, height) => {
+    editorRef.current?.command.executePaperSize(width, height);
+    setVisible(false);
+  };
+  return /* @__PURE__ */ jsxs19("div", { className: "paper-size", onClick: () => setVisible(!visible), children: [
+    /* @__PURE__ */ jsx33("i", { title: "Paper Type" }),
+    /* @__PURE__ */ jsx33("div", { className: `options ${visible ? "visible" : ""}`, children: /* @__PURE__ */ jsx33("ul", { children: SIZES2.map(({ label, width, height, active }) => /* @__PURE__ */ jsx33("li", { onClick: () => handlePaperSize(width, height), className: active ? "active" : "", children: label }, label)) }) })
+  ] });
+}
+
+// src/footer/PaperDirectionTool.tsx
+import { useState as useState19 } from "react";
+import { jsx as jsx34, jsxs as jsxs20 } from "react/jsx-runtime";
+function PaperDirectionTool() {
+  const { editorRef } = useEditor();
+  const [visible, setVisible] = useState19(false);
+  const handlePaperDirection = (direction) => {
+    editorRef.current?.command.executePaperDirection(direction);
+    setVisible(false);
+  };
+  return /* @__PURE__ */ jsxs20("div", { className: "paper-direction", onClick: () => setVisible(!visible), children: [
+    /* @__PURE__ */ jsx34("i", { title: "Paper Direction" }),
+    /* @__PURE__ */ jsx34("div", { className: `options ${visible ? "visible" : ""}`, children: /* @__PURE__ */ jsxs20("ul", { children: [
+      /* @__PURE__ */ jsx34("li", { onClick: () => handlePaperDirection("vertical"), className: "active", children: "Portrait" }),
+      /* @__PURE__ */ jsx34("li", { onClick: () => handlePaperDirection("horizontal"), children: "Landscape" })
+    ] }) })
+  ] });
+}
+
+// src/footer/PaperMarginTool.tsx
+import { jsx as jsx35 } from "react/jsx-runtime";
+function PaperMarginTool() {
+  const { editorRef } = useEditor();
+  const handlePaperMargin = async () => {
+    if (!editorRef.current) return;
+    const { Dialog } = await import("@windoc/core");
+    const [topMargin, rightMargin, bottomMargin, leftMargin] = editorRef.current.command.getPaperMargin();
+    new Dialog({
+      title: "Page Margins",
+      data: [
+        { type: "text", label: "Top Margin", name: "top", required: true, value: `${topMargin}`, placeholder: "Please enter top margin" },
+        { type: "text", label: "Bottom Margin", name: "bottom", required: true, value: `${bottomMargin}`, placeholder: "Please enter bottom margin" },
+        { type: "text", label: "Left Margin", name: "left", required: true, value: `${leftMargin}`, placeholder: "Please enter left margin" },
+        { type: "text", label: "Right Margin", name: "right", required: true, value: `${rightMargin}`, placeholder: "Please enter right margin" }
+      ],
+      onConfirm: (payload) => {
+        const top = payload.find((p) => p.name === "top")?.value;
+        if (!top) return;
+        const bottom = payload.find((p) => p.name === "bottom")?.value;
+        if (!bottom) return;
+        const left = payload.find((p) => p.name === "left")?.value;
+        if (!left) return;
+        const right = payload.find((p) => p.name === "right")?.value;
+        if (!right) return;
+        editorRef.current?.command.executeSetPaperMargin([
+          Number(top),
+          Number(right),
+          Number(bottom),
+          Number(left)
+        ]);
+      }
+    });
+  };
+  return /* @__PURE__ */ jsx35("div", { className: "paper-margin", title: "Page Margins", onClick: handlePaperMargin, children: /* @__PURE__ */ jsx35("i", {}) });
+}
+
+// src/footer/FullscreenTool.tsx
+import { jsx as jsx36 } from "react/jsx-runtime";
+function FullscreenTool() {
+  const handleFullscreen = () => {
+    if (!document.fullscreenElement) {
+      document.documentElement.requestFullscreen();
+    } else {
+      document.exitFullscreen();
+    }
+  };
+  return /* @__PURE__ */ jsx36("div", { className: "fullscreen", title: "Fullscreen", onClick: handleFullscreen, children: /* @__PURE__ */ jsx36("i", {}) });
+}
+
+// src/footer/EditorOptionTool.tsx
+import { jsx as jsx37 } from "react/jsx-runtime";
+function EditorOptionTool() {
+  const { editorRef } = useEditor();
+  const handleEditorOption = async () => {
+    if (!editorRef.current) return;
+    const { Dialog } = await import("@windoc/core");
+    const options = editorRef.current.command.getOptions();
+    new Dialog({
+      title: "Editor Configuration",
+      data: [
+        {
+          type: "textarea",
+          name: "option",
+          width: 350,
+          height: 300,
+          required: true,
+          value: JSON.stringify(options, null, 2),
+          placeholder: "Please enter editor configuration"
+        }
+      ],
+      onConfirm: (payload) => {
+        const newOptionValue = payload.find((p) => p.name === "option")?.value;
+        if (!newOptionValue) return;
+        const newOption = JSON.parse(newOptionValue);
+        editorRef.current?.command.executeUpdateOptions(newOption);
+      }
+    });
+  };
+  return /* @__PURE__ */ jsx37("div", { className: "editor-option", title: "Editor Settings", onClick: handleEditorOption, children: /* @__PURE__ */ jsx37("i", {}) });
+}
+
+// src/footer/WatermarkFooterTool.tsx
+import { useState as useState20, useRef as useRef6, useEffect as useEffect6, useCallback } from "react";
+import { Fragment as Fragment3, jsx as jsx38, jsxs as jsxs21 } from "react/jsx-runtime";
+var COLOR_PALETTE2 = [
+  ["#000000", "#434343", "#666666", "#999999", "#b7b7b7", "#cccccc"],
+  ["#980000", "#ff0000", "#ff9900", "#ffff00", "#00ff00", "#00ffff"],
+  ["#4a86e8", "#0000ff", "#9900ff", "#ff00ff", "#e6b8af", "#f4cccc"]
+];
+var FONTS2 = [
+  { family: "Arial", label: "Sans Serif" },
+  { family: "Times New Roman", label: "Serif" }
+];
+function WatermarkFooterTool() {
+  const { editorRef } = useEditor();
+  const [visible, setVisible] = useState20(false);
+  const [tab, setTab] = useState20("text");
+  const containerRef = useRef6(null);
+  const panelRef = useRef6(null);
+  const fileInputRef = useRef6(null);
+  const [text, setText] = useState20("WATERMARK");
+  const [font, setFont] = useState20("Arial");
+  const [color, setColor] = useState20("#AEB5C0");
+  const [opacity, setOpacity] = useState20(30);
+  const [rotation, setRotation] = useState20(-45);
+  const [inFront, setInFront] = useState20(false);
+  const [imageData, setImageData] = useState20("");
+  const [imgWidth, setImgWidth] = useState20(200);
+  const [imgHeight, setImgHeight] = useState20(200);
+  useEffect6(() => {
+    if (!visible) return;
+    const handler = (e) => {
+      if (containerRef.current && !containerRef.current.contains(e.target)) {
+        setVisible(false);
+      }
+    };
+    document.addEventListener("mousedown", handler);
+    return () => document.removeEventListener("mousedown", handler);
+  }, [visible]);
+  useEffect6(() => {
+    if (!visible || !panelRef.current) return;
+    const el = panelRef.current;
+    el.style.right = "";
+    el.style.left = "";
+    const rect = el.getBoundingClientRect();
+    if (rect.right > window.innerWidth) {
+      el.style.left = "unset";
+      el.style.right = "0";
+    }
+    if (rect.left < 0) {
+      el.style.left = `${-rect.left + 4}px`;
+    }
+  }, [visible]);
+  const handleFileUpload = useCallback((e) => {
+    const file = e.target.files?.[0];
+    if (!file) return;
+    const reader = new FileReader();
+    reader.onload = () => {
+      const result = reader.result;
+      setImageData(result);
+      const img = new Image();
+      img.onload = () => {
+        const maxDim = 300;
+        let w = img.naturalWidth;
+        let h = img.naturalHeight;
+        if (w > maxDim || h > maxDim) {
+          const ratio = Math.min(maxDim / w, maxDim / h);
+          w = Math.round(w * ratio);
+          h = Math.round(h * ratio);
+        }
+        setImgWidth(w);
+        setImgHeight(h);
+      };
+      img.src = result;
+    };
+    reader.readAsDataURL(file);
+  }, []);
+  const handleApply = () => {
+    if (!editorRef.current) return;
+    if (tab === "text") {
+      if (!text.trim()) return;
+      editorRef.current.command.executeAddWatermark({
+        data: text,
+        type: "text",
+        color,
+        opacity: opacity / 100,
+        size: 120,
+        font,
+        rotation,
+        inFront
+      });
+    } else {
+      if (!imageData) return;
+      editorRef.current.command.executeAddWatermark({
+        data: imageData,
+        type: "image",
+        opacity: opacity / 100,
+        rotation,
+        inFront,
+        width: imgWidth,
+        height: imgHeight
+      });
+    }
+    setVisible(false);
+  };
+  const handleDelete = () => {
+    editorRef.current?.command.executeDeleteWatermark();
+    setVisible(false);
+  };
+  return /* @__PURE__ */ jsxs21("div", { className: "watermark-footer", ref: containerRef, onClick: () => setVisible(!visible), children: [
+    /* @__PURE__ */ jsx38("i", { title: "Watermark" }),
+    visible && /* @__PURE__ */ jsxs21("div", { className: "watermark-footer-panel", ref: panelRef, onClick: (e) => e.stopPropagation(), children: [
+      /* @__PURE__ */ jsxs21("div", { className: "wm-panel-tabs", children: [
+        /* @__PURE__ */ jsx38("button", { className: `wm-panel-tab ${tab === "text" ? "active" : ""}`, onClick: () => setTab("text"), children: "Text" }),
+        /* @__PURE__ */ jsx38("button", { className: `wm-panel-tab ${tab === "image" ? "active" : ""}`, onClick: () => setTab("image"), children: "Image" })
+      ] }),
+      /* @__PURE__ */ jsxs21("div", { className: "wm-panel-body", children: [
+        tab === "text" ? /* @__PURE__ */ jsxs21(Fragment3, { children: [
+          /* @__PURE__ */ jsxs21("div", { className: "wm-panel-field", children: [
+            /* @__PURE__ */ jsx38("label", { children: "Text" }),
+            /* @__PURE__ */ jsx38("input", { type: "text", value: text, onChange: (e) => setText(e.target.value), placeholder: "Watermark text" })
+          ] }),
+          /* @__PURE__ */ jsxs21("div", { className: "wm-panel-field", children: [
+            /* @__PURE__ */ jsx38("label", { children: "Font" }),
+            /* @__PURE__ */ jsx38("select", { value: font, onChange: (e) => setFont(e.target.value), children: FONTS2.map((f) => /* @__PURE__ */ jsx38("option", { value: f.family, children: f.label }, f.family)) })
+          ] }),
+          /* @__PURE__ */ jsxs21("div", { className: "wm-panel-field", children: [
+            /* @__PURE__ */ jsx38("label", { children: "Color" }),
+            /* @__PURE__ */ jsx38("div", { className: "wm-panel-colors", children: COLOR_PALETTE2.flat().map((c) => /* @__PURE__ */ jsx38(
+              "div",
+              {
+                className: `wm-panel-color ${color.toLowerCase() === c.toLowerCase() ? "active" : ""}`,
+                style: { backgroundColor: c },
+                onClick: () => setColor(c)
+              },
+              c
+            )) })
+          ] })
+        ] }) : /* @__PURE__ */ jsxs21(Fragment3, { children: [
+          /* @__PURE__ */ jsxs21("div", { className: "wm-panel-field", children: [
+            /* @__PURE__ */ jsx38("label", { children: "Image" }),
+            /* @__PURE__ */ jsxs21("div", { style: { display: "flex", alignItems: "center", gap: "6px" }, children: [
+              /* @__PURE__ */ jsx38("button", { className: "wm-panel-upload", onClick: () => fileInputRef.current?.click(), children: "Choose File" }),
+              /* @__PURE__ */ jsx38("input", { ref: fileInputRef, type: "file", accept: "image/*", style: { display: "none" }, onChange: handleFileUpload }),
+              imageData && /* @__PURE__ */ jsx38("span", { style: { fontSize: "11px", color: "#667085" }, children: "Loaded" })
+            ] })
+          ] }),
+          imageData && /* @__PURE__ */ jsx38("div", { className: "wm-panel-field", children: /* @__PURE__ */ jsx38("div", { className: "wm-panel-preview", children: /* @__PURE__ */ jsx38("img", { src: imageData, alt: "preview", style: { maxWidth: "100%", maxHeight: "48px", objectFit: "contain" } }) }) }),
+          /* @__PURE__ */ jsxs21("div", { className: "wm-panel-field-row", children: [
+            /* @__PURE__ */ jsxs21("div", { className: "wm-panel-field wm-panel-field-half", children: [
+              /* @__PURE__ */ jsx38("label", { children: "W" }),
+              /* @__PURE__ */ jsx38("input", { type: "number", value: imgWidth, min: 10, onChange: (e) => setImgWidth(Number(e.target.value)) })
+            ] }),
+            /* @__PURE__ */ jsxs21("div", { className: "wm-panel-field wm-panel-field-half", children: [
+              /* @__PURE__ */ jsx38("label", { children: "H" }),
+              /* @__PURE__ */ jsx38("input", { type: "number", value: imgHeight, min: 10, onChange: (e) => setImgHeight(Number(e.target.value)) })
+            ] })
+          ] })
+        ] }),
+        /* @__PURE__ */ jsxs21("div", { className: "wm-panel-field", children: [
+          /* @__PURE__ */ jsxs21("label", { children: [
+            "Opacity ",
+            /* @__PURE__ */ jsxs21("span", { className: "wm-panel-value", children: [
+              opacity,
+              "%"
+            ] })
+          ] }),
+          /* @__PURE__ */ jsx38("input", { type: "range", min: 0, max: 100, value: opacity, onChange: (e) => setOpacity(Number(e.target.value)), className: "wm-panel-slider" })
+        ] }),
+        /* @__PURE__ */ jsxs21("div", { className: "wm-panel-field", children: [
+          /* @__PURE__ */ jsxs21("label", { children: [
+            "Rotation ",
+            /* @__PURE__ */ jsxs21("span", { className: "wm-panel-value", children: [
+              rotation,
+              "\xB0"
+            ] })
+          ] }),
+          /* @__PURE__ */ jsx38("input", { type: "range", min: -90, max: 90, value: rotation, onChange: (e) => setRotation(Number(e.target.value)), className: "wm-panel-slider" })
+        ] }),
+        /* @__PURE__ */ jsxs21("div", { className: "wm-panel-field", children: [
+          /* @__PURE__ */ jsx38("label", { children: "Position" }),
+          /* @__PURE__ */ jsxs21("div", { className: "wm-panel-toggle", children: [
+            /* @__PURE__ */ jsx38("button", { className: !inFront ? "active" : "", onClick: () => setInFront(false), children: "Behind" }),
+            /* @__PURE__ */ jsx38("button", { className: inFront ? "active" : "", onClick: () => setInFront(true), children: "In Front" })
+          ] })
+        ] })
+      ] }),
+      /* @__PURE__ */ jsxs21("div", { className: "wm-panel-actions", children: [
+        /* @__PURE__ */ jsx38("button", { className: "wm-panel-btn-delete", onClick: handleDelete, children: "Remove" }),
+        /* @__PURE__ */ jsx38("button", { className: "wm-panel-btn-apply", onClick: handleApply, children: "Apply" })
+      ] })
+    ] })
+  ] });
+}
+
+// src/EditorFooter.tsx
+import { jsx as jsx39, jsxs as jsxs22 } from "react/jsx-runtime";
+function EditorFooter() {
+  return /* @__PURE__ */ jsxs22("div", { className: "footer", "editor-component": "footer", children: [
+    /* @__PURE__ */ jsxs22("div", { children: [
+      /* @__PURE__ */ jsx39(CatalogToggleTool, {}),
+      /* @__PURE__ */ jsx39(PageModeTool, {}),
+      /* @__PURE__ */ jsx39(FooterStatus, {})
+    ] }),
+    /* @__PURE__ */ jsx39(EditorModeTool, {}),
+    /* @__PURE__ */ jsxs22("div", { children: [
+      /* @__PURE__ */ jsx39(PageScaleMinusTool, {}),
+      /* @__PURE__ */ jsx39(PageScalePercentageTool, {}),
+      /* @__PURE__ */ jsx39(PageScaleAddTool, {}),
+      /* @__PURE__ */ jsx39(PaperSizeTool, {}),
+      /* @__PURE__ */ jsx39(PaperDirectionTool, {}),
+      /* @__PURE__ */ jsx39(PaperMarginTool, {}),
+      /* @__PURE__ */ jsx39(WatermarkFooterTool, {}),
+      /* @__PURE__ */ jsx39(FullscreenTool, {}),
+      /* @__PURE__ */ jsx39(EditorOptionTool, {})
+    ] })
+  ] });
+}
+
+// src/Editor.tsx
+import { jsx as jsx40, jsxs as jsxs23 } from "react/jsx-runtime";
+function Editor({
+  defaultValue,
+  options: userOptions,
+  onChange,
+  onReady,
+  toolbar = true,
+  footer = true,
+  renderToolbar,
+  renderFooter,
+  children,
+  className,
+  style,
+  onDrop: userOnDrop
+}) {
+  return /* @__PURE__ */ jsx40(FooterProvider, { children: /* @__PURE__ */ jsx40(
+    EditorInner,
+    {
+      defaultValue,
+      options: userOptions,
+      onChange,
+      onReady,
+      toolbar,
+      footer,
+      renderToolbar,
+      renderFooter,
+      className,
+      style,
+      onDrop: userOnDrop,
+      children
+    }
+  ) });
+}
+function EditorInner({
+  defaultValue,
+  options: userOptions,
+  onChange,
+  onReady,
+  toolbar = true,
+  footer = true,
+  renderToolbar,
+  renderFooter,
+  children,
+  className,
+  style,
+  onDrop: userOnDrop
+}) {
+  const containerRef = useRef7(null);
+  const editorRef = useRef7(null);
+  const [rangeStyle, setRangeStyle] = useState21(null);
+  const {
+    setPageNoList,
+    setPageNo,
+    setPageSize,
+    setWordCount,
+    setRowNo,
+    setColNo,
+    setPageScale
+  } = useFooter();
+  useEffect7(() => {
+    let instance = null;
+    const initEditor = async () => {
+      if (!containerRef.current) return;
+      const {
+        default: EditorClass,
+        KeyMap,
+        EditorMode,
+        EditorZone,
+        ElementType,
+        Dialog,
+        Signature
+      } = await import("@windoc/core");
+      const data = defaultValue ?? { main: [] };
+      instance = new EditorClass(
+        containerRef.current,
+        data,
+        userOptions ?? {}
+      );
+      editorRef.current = instance;
+      instance.listener.rangeStyleChange = (payload) => {
+        setRangeStyle(payload);
+        const rangeContext = instance?.command.getRangeContext();
+        if (rangeContext) {
+          setRowNo(rangeContext.startRowNo + 1);
+          setColNo(rangeContext.startColNo + 1);
+        }
+      };
+      instance.listener.visiblePageNoListChange = (payload) => {
+        setPageNoList(payload.map((i) => i + 1).join(", "));
+      };
+      instance.listener.pageSizeChange = (payload) => {
+        setPageSize(payload);
+      };
+      instance.listener.intersectionPageNoChange = (payload) => {
+        setPageNo(payload + 1);
+      };
+      instance.listener.pageScaleChange = (payload) => {
+        setPageScale(Math.floor(payload * 10 * 10));
+      };
+      instance.listener.contentChange = async () => {
+        const count2 = await instance?.command.getWordCount();
+        setWordCount(count2 || 0);
+        if (onChange) {
+          const value = instance?.command.getValue();
+          if (value) onChange(value);
+        }
+      };
+      instance.register.shortcutList([
+        {
+          key: KeyMap.P,
+          mod: true,
+          isGlobal: true,
+          callback: (command) => {
+            command.executePrint();
+          }
+        },
+        {
+          key: KeyMap.MINUS,
+          ctrl: true,
+          isGlobal: true,
+          callback: (command) => {
+            command.executePageScaleMinus();
+          }
+        },
+        {
+          key: KeyMap.EQUAL,
+          ctrl: true,
+          isGlobal: true,
+          callback: (command) => {
+            command.executePageScaleAdd();
+          }
+        },
+        {
+          key: KeyMap.ZERO,
+          ctrl: true,
+          isGlobal: true,
+          callback: (command) => {
+            command.executePageScaleRecovery();
+          }
+        }
+      ]);
+      instance.register.contextMenuList([
+        {
+          name: "Signature",
+          icon: "signature",
+          when: (payload) => {
+            return !payload.isReadonly && payload.editorTextFocus;
+          },
+          callback: (command) => {
+            new Signature({
+              onConfirm(payload) {
+                if (!payload) return;
+                const { value, width, height } = payload;
+                if (!value || !width || !height) return;
+                command.executeInsertElementList([
+                  { value, width, height, type: ElementType.IMAGE }
+                ]);
+              }
+            });
+          }
+        },
+        {
+          name: "Format Cleanup",
+          icon: "word-tool",
+          when: (payload) => !payload.isReadonly,
+          callback: (command) => {
+            command.executeWordTool();
+          }
+        }
+      ]);
+      const closeDropdowns = (evt) => {
+        const visibleDom = document.querySelector(".visible");
+        if (!visibleDom || visibleDom.contains(evt.target)) return;
+        visibleDom.classList.remove("visible");
+      };
+      window.addEventListener("click", closeDropdowns, { capture: true });
+      const count = await instance.command.getWordCount();
+      setWordCount(count || 0);
+      onReady?.(instance);
+    };
+    initEditor();
+    return () => {
+      instance?.destroy();
+    };
+  }, []);
+  const handleDrop = (e) => {
+    e.preventDefault();
+    if (userOnDrop && editorRef.current) {
+      userOnDrop(e, editorRef.current);
+    }
+  };
+  const handleDragOver = (e) => {
+    e.preventDefault();
+    e.dataTransfer.dropEffect = "copy";
+  };
+  return /* @__PURE__ */ jsxs23(EditorProvider, { editorRef, rangeStyle, children: [
+    toolbar && !renderToolbar && /* @__PURE__ */ jsx40(EditorToolbar, {}),
+    renderToolbar,
+    children,
+    /* @__PURE__ */ jsx40(
+      "div",
+      {
+        className: className ?? "editor",
+        style: style ?? { flex: 1, minHeight: 0, overflow: "auto" },
+        ref: containerRef,
+        onDrop: handleDrop,
+        onDragOver: handleDragOver
+      }
+    ),
+    footer && !renderFooter && /* @__PURE__ */ jsx40(EditorFooter, {}),
+    renderFooter
+  ] });
+}
+export {
+  BoldTool,
+  CatalogToggleTool,
+  CenterAlignTool,
+  ColorTool,
+  ColumnTool,
+  Editor,
+  EditorFooter,
+  EditorModeTool,
+  EditorOptionTool,
+  EditorProvider,
+  EditorToolbar,
+  FontSizeTool,
+  FontTool,
+  FooterProvider,
+  FooterStatus,
+  FullscreenTool,
+  HighlightTool,
+  ImageTool,
+  ItalicTool,
+  JustifyTool,
+  LeftAlignTool,
+  LineHeightTool,
+  ListTool,
+  PageBreakTool,
+  PageModeTool,
+  PageScaleAddTool,
+  PageScaleMinusTool,
+  PageScalePercentageTool,
+  PaperDirectionTool,
+  PaperMarginTool,
+  PaperSizeTool,
+  RedoTool,
+  RightAlignTool,
+  SeparatorTool,
+  StrikeoutTool,
+  TableTool,
+  TitleTool,
+  UnderlineTool,
+  UndoTool,
+  WatermarkFooterTool,
+  InsertElementTool as WatermarkTool,
+  useEditor,
+  useFooter
+};
+//# sourceMappingURL=index.mjs.map