@windoc/react 0.3.14 → 0.3.16

package/dist/index.js

@@ -79,7 +79,7 @@ __export(index_exports, {
 module.exports = __toCommonJS(index_exports);
 
 // src/Editor.tsx
-var import_react23 = require("react");
+var import_react24 = require("react");
 
 // src/EditorContext.tsx
 var import_react = require("react");
@@ -148,6 +148,9 @@ function useFooter() {
   return ctx;
 }
 
+// src/EditorToolbar.tsx
+var import_react18 = require("react");
+
 // src/toolbar/UndoTool.tsx
 var import_lucide_react = require("lucide-react");
 var import_jsx_runtime3 = require("react/jsx-runtime");
@@ -498,7 +501,7 @@ function ColumnTool() {
     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.jsx)("div", { className: "menu-item__select-text", title: "Column Layout", 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: [
@@ -605,7 +608,7 @@ function TitleTool() {
   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.jsx)("div", { className: "menu-item__select-text", title: "Toggle Heading", 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)(
@@ -648,7 +651,7 @@ function FontTool() {
   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.jsx)("div", { className: "menu-item__select-text", title: "Font", 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)(
@@ -682,7 +685,7 @@ function FontSizeTool() {
   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.jsx)("div", { className: "menu-item__select-text", title: "Font Size", 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)(
@@ -715,7 +718,7 @@ function LineHeightTool() {
   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.jsx)("div", { className: "menu-item__select-text", title: "Line Height", 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)(
@@ -1615,7 +1618,32 @@ function PageBreakTool() {
 var import_jsx_runtime28 = require("react/jsx-runtime");
 function EditorToolbar() {
   const { isInTable } = useEditor();
-  return /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)("div", { className: "menu", "editor-component": "menu", children: [
+  const menuRef = (0, import_react18.useRef)(null);
+  (0, import_react18.useEffect)(() => {
+    const menu = menuRef.current;
+    if (!menu) return;
+    const observer = new MutationObserver((mutations) => {
+      mutations.forEach((mutation) => {
+        const target = mutation.target;
+        if (!target.classList.contains("options")) return;
+        if (!target.classList.contains("visible")) {
+          target.style.left = "";
+          target.style.right = "";
+          return;
+        }
+        target.style.left = "0";
+        target.style.right = "";
+        const rect = target.getBoundingClientRect();
+        if (rect.right > window.innerWidth) {
+          target.style.left = "auto";
+          target.style.right = "0";
+        }
+      });
+    });
+    observer.observe(menu, { subtree: true, attributeFilter: ["class"] });
+    return () => observer.disconnect();
+  }, []);
+  return /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)("div", { className: "menu", "editor-component": "menu", ref: menuRef, 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, {})
@@ -1683,11 +1711,11 @@ function CatalogToggleTool() {
 }
 
 // src/footer/PageModeTool.tsx
-var import_react18 = require("react");
+var import_react19 = require("react");
 var import_jsx_runtime30 = require("react/jsx-runtime");
 function PageModeTool() {
   const { editorRef } = useEditor();
-  const [visible, setVisible] = (0, import_react18.useState)(false);
+  const [visible, setVisible] = (0, import_react19.useState)(false);
   const handlePageMode = (mode) => {
     editorRef.current?.command.executePageMode(mode);
     setVisible(false);
@@ -1736,7 +1764,7 @@ function FooterStatus() {
 }
 
 // src/footer/EditorModeTool.tsx
-var import_react19 = require("react");
+var import_react20 = require("react");
 var import_jsx_runtime32 = require("react/jsx-runtime");
 var MODE_LIST = [
   { mode: "edit", name: "Edit Mode" },
@@ -1749,8 +1777,8 @@ var MODE_LIST = [
 ];
 function EditorModeTool() {
   const { editorRef } = useEditor();
-  const [editorMode, setEditorMode] = (0, import_react19.useState)("Edit Mode");
-  const modeIndexRef = (0, import_react19.useRef)(0);
+  const [editorMode, setEditorMode] = (0, import_react20.useState)("Edit Mode");
+  const modeIndexRef = (0, import_react20.useRef)(0);
   const handleModeChange = () => {
     modeIndexRef.current = modeIndexRef.current === MODE_LIST.length - 1 ? 0 : modeIndexRef.current + 1;
     const { name, mode } = MODE_LIST[modeIndexRef.current];
@@ -1828,7 +1856,7 @@ function PageScaleAddTool() {
 }
 
 // src/footer/PaperSizeTool.tsx
-var import_react20 = require("react");
+var import_react21 = require("react");
 var import_jsx_runtime36 = require("react/jsx-runtime");
 var SIZES2 = [
   { label: "A4", width: 794, height: 1123, active: true },
@@ -1838,7 +1866,7 @@ var SIZES2 = [
 ];
 function PaperSizeTool() {
   const { editorRef } = useEditor();
-  const [visible, setVisible] = (0, import_react20.useState)(false);
+  const [visible, setVisible] = (0, import_react21.useState)(false);
   const handlePaperSize = (width, height) => {
     editorRef.current?.command.executePaperSize(width, height);
     setVisible(false);
@@ -1858,11 +1886,11 @@ function PaperSizeTool() {
 }
 
 // src/footer/PaperDirectionTool.tsx
-var import_react21 = require("react");
+var import_react22 = require("react");
 var import_jsx_runtime37 = require("react/jsx-runtime");
 function PaperDirectionTool() {
   const { editorRef } = useEditor();
-  const [visible, setVisible] = (0, import_react21.useState)(false);
+  const [visible, setVisible] = (0, import_react22.useState)(false);
   const handlePaperDirection = (direction) => {
     editorRef.current?.command.executePaperDirection(direction);
     setVisible(false);
@@ -2011,7 +2039,7 @@ function EditorOptionTool() {
 }
 
 // src/footer/WatermarkFooterTool.tsx
-var import_react22 = require("react");
+var import_react23 = require("react");
 var import_jsx_runtime41 = require("react/jsx-runtime");
 var COLOR_PALETTE4 = [
   ["#000000", "#434343", "#666666", "#999999", "#b7b7b7", "#cccccc"],
@@ -2024,21 +2052,21 @@ var FONTS2 = [
 ];
 function WatermarkFooterTool() {
   const { editorRef } = useEditor();
-  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)(() => {
+  const [visible, setVisible] = (0, import_react23.useState)(false);
+  const [tab, setTab] = (0, import_react23.useState)("text");
+  const containerRef = (0, import_react23.useRef)(null);
+  const panelRef = (0, import_react23.useRef)(null);
+  const fileInputRef = (0, import_react23.useRef)(null);
+  const [text, setText] = (0, import_react23.useState)("WATERMARK");
+  const [font, setFont] = (0, import_react23.useState)("Arial");
+  const [color, setColor] = (0, import_react23.useState)("#AEB5C0");
+  const [opacity, setOpacity] = (0, import_react23.useState)(30);
+  const [rotation, setRotation] = (0, import_react23.useState)(-45);
+  const [inFront, setInFront] = (0, import_react23.useState)(false);
+  const [imageData, setImageData] = (0, import_react23.useState)("");
+  const [imgWidth, setImgWidth] = (0, import_react23.useState)(200);
+  const [imgHeight, setImgHeight] = (0, import_react23.useState)(200);
+  (0, import_react23.useEffect)(() => {
     if (!visible) return;
     const handler = (e) => {
       if (containerRef.current && !containerRef.current.contains(e.target)) {
@@ -2048,7 +2076,7 @@ function WatermarkFooterTool() {
     document.addEventListener("mousedown", handler);
     return () => document.removeEventListener("mousedown", handler);
   }, [visible]);
-  (0, import_react22.useEffect)(() => {
+  (0, import_react23.useEffect)(() => {
     if (!visible || !panelRef.current) return;
     const el = panelRef.current;
     el.style.right = "";
@@ -2062,7 +2090,7 @@ function WatermarkFooterTool() {
       el.style.left = `${-rect.left + 4}px`;
     }
   }, [visible]);
-  const handleFileUpload = (0, import_react22.useCallback)(
+  const handleFileUpload = (0, import_react23.useCallback)(
     (e) => {
       const file = e.target.files?.[0];
       if (!file) return;
@@ -2430,10 +2458,10 @@ function EditorInner({
   style,
   onDrop: userOnDrop
 }) {
-  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 containerRef = (0, import_react24.useRef)(null);
+  const editorRef = (0, import_react24.useRef)(null);
+  const [rangeStyle, setRangeStyle] = (0, import_react24.useState)(null);
+  const [isInTable, setIsInTable] = (0, import_react24.useState)(false);
   const {
     setPageNoList,
     setPageNo,
@@ -2443,7 +2471,7 @@ function EditorInner({
     setColNo,
     setPageScale
   } = useFooter();
-  (0, import_react23.useEffect)(() => {
+  (0, import_react24.useEffect)(() => {
     let instance = null;
     let cancelled = false;
     let closeDropdowns = null;
@@ -2463,7 +2491,7 @@ function EditorInner({
       instance = new EditorClass(
         containerRef.current,
         data,
-        userOptions ?? {}
+        { maskMargin: [24, 0, 24, 0], ...userOptions }
       );
       editorRef.current = instance;
       instance.listener.rangeStyleChange = (payload) => {