@windoc/react 0.3.14 → 0.3.16

package/dist/index.mjs

@@ -1,5 +1,5 @@
 // src/Editor.tsx
-import { useEffect as useEffect4, useRef as useRef18, useState as useState13 } from "react";
+import { useEffect as useEffect5, useRef as useRef19, useState as useState13 } from "react";
 
 // src/EditorContext.tsx
 import { createContext, useContext, useEffect, useState } from "react";
@@ -68,6 +68,9 @@ function useFooter() {
   return ctx;
 }
 
+// src/EditorToolbar.tsx
+import { useEffect as useEffect3, useRef as useRef16 } from "react";
+
 // src/toolbar/UndoTool.tsx
 import { Undo } from "lucide-react";
 import { jsx as jsx3 } from "react/jsx-runtime";
@@ -418,7 +421,7 @@ function ColumnTool() {
     editorRef.current?.command.executeColumnGap(clampedValue);
   };
   return /* @__PURE__ */ jsxs3("div", { className: "menu-item__select-group", children: [
-    /* @__PURE__ */ jsx7("div", { className: "menu-item__select-text", title: "Column Layout", onClick: toggle, children: currentColumns === 1 ? "1 Column" : `${currentColumns} Columns` }),
+    /* @__PURE__ */ jsx7("div", { className: "menu-item__select-text", title: "Column Layout", children: currentColumns === 1 ? "1 Column" : `${currentColumns} Columns` }),
     /* @__PURE__ */ jsxs3("div", { className: "menu-item__select-arrow", onClick: toggle, children: [
       /* @__PURE__ */ jsx7(ChevronDown, { size: 10, strokeWidth: 2.5 }),
       /* @__PURE__ */ jsx7("div", { className: "options", ref: optionsRef, style: { width: "130px" }, children: /* @__PURE__ */ jsxs3("div", { onClick: (e) => e.stopPropagation(), children: [
@@ -525,7 +528,7 @@ function TitleTool() {
   const toggle = () => optionsRef.current?.classList.toggle("visible");
   const close = () => optionsRef.current?.classList.remove("visible");
   return /* @__PURE__ */ jsxs5("div", { className: "menu-item__select-group", children: [
-    /* @__PURE__ */ jsx9("div", { className: "menu-item__select-text", title: "Toggle Heading", onClick: toggle, children: activeLabel }),
+    /* @__PURE__ */ jsx9("div", { className: "menu-item__select-text", title: "Toggle Heading", children: activeLabel }),
     /* @__PURE__ */ jsxs5("div", { className: "menu-item__select-arrow", onClick: toggle, children: [
       /* @__PURE__ */ jsx9(ChevronDown2, { size: 10, strokeWidth: 2.5 }),
       /* @__PURE__ */ jsx9("div", { className: "options", ref: optionsRef, style: { width: "100px" }, children: /* @__PURE__ */ jsx9("ul", { children: LEVELS.map(({ level, label }) => /* @__PURE__ */ jsx9(
@@ -568,7 +571,7 @@ function FontTool() {
   const toggle = () => optionsRef.current?.classList.toggle("visible");
   const close = () => optionsRef.current?.classList.remove("visible");
   return /* @__PURE__ */ jsxs6("div", { className: "menu-item__select-group", children: [
-    /* @__PURE__ */ jsx10("div", { className: "menu-item__select-text", title: "Font", onClick: toggle, children: activeLabel }),
+    /* @__PURE__ */ jsx10("div", { className: "menu-item__select-text", title: "Font", children: activeLabel }),
     /* @__PURE__ */ jsxs6("div", { className: "menu-item__select-arrow", onClick: toggle, children: [
       /* @__PURE__ */ jsx10(ChevronDown3, { size: 10, strokeWidth: 2.5 }),
       /* @__PURE__ */ jsx10("div", { className: "options", ref: optionsRef, style: { width: "150px" }, children: /* @__PURE__ */ jsx10("ul", { children: FONTS.map(({ family, label }) => /* @__PURE__ */ jsx10(
@@ -602,7 +605,7 @@ function FontSizeTool() {
   const toggle = () => optionsRef.current?.classList.toggle("visible");
   const close = () => optionsRef.current?.classList.remove("visible");
   return /* @__PURE__ */ jsxs7("div", { className: "menu-item__select-group", children: [
-    /* @__PURE__ */ jsx11("div", { className: "menu-item__select-text", title: "Font Size", onClick: toggle, children: activeSize }),
+    /* @__PURE__ */ jsx11("div", { className: "menu-item__select-text", title: "Font Size", children: activeSize }),
     /* @__PURE__ */ jsxs7("div", { className: "menu-item__select-arrow", onClick: toggle, children: [
       /* @__PURE__ */ jsx11(ChevronDown4, { size: 10, strokeWidth: 2.5 }),
       /* @__PURE__ */ jsx11("div", { className: "options", ref: optionsRef, style: { width: "60px" }, children: /* @__PURE__ */ jsx11("ul", { children: SIZES.map((size) => /* @__PURE__ */ jsx11(
@@ -635,7 +638,7 @@ function LineHeightTool() {
   const toggle = () => optionsRef.current?.classList.toggle("visible");
   const close = () => optionsRef.current?.classList.remove("visible");
   return /* @__PURE__ */ jsxs8("div", { className: "menu-item__select-group", children: [
-    /* @__PURE__ */ jsx12("div", { className: "menu-item__select-text", title: "Line Height", onClick: toggle, children: activeLabel }),
+    /* @__PURE__ */ jsx12("div", { className: "menu-item__select-text", title: "Line Height", children: activeLabel }),
     /* @__PURE__ */ jsxs8("div", { className: "menu-item__select-arrow", onClick: toggle, children: [
       /* @__PURE__ */ jsx12(ChevronDown5, { size: 10, strokeWidth: 2.5 }),
       /* @__PURE__ */ jsx12("div", { className: "options", ref: optionsRef, style: { width: "60px" }, children: /* @__PURE__ */ jsx12("ul", { children: LINE_HEIGHTS.map((h) => /* @__PURE__ */ jsx12(
@@ -1535,7 +1538,32 @@ function PageBreakTool() {
 import { Fragment as Fragment2, jsx as jsx28, jsxs as jsxs17 } from "react/jsx-runtime";
 function EditorToolbar() {
   const { isInTable } = useEditor();
-  return /* @__PURE__ */ jsxs17("div", { className: "menu", "editor-component": "menu", children: [
+  const menuRef = useRef16(null);
+  useEffect3(() => {
+    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__ */ jsxs17("div", { className: "menu", "editor-component": "menu", ref: menuRef, children: [
     /* @__PURE__ */ jsxs17("div", { className: "menu-item", children: [
       /* @__PURE__ */ jsx28(UndoTool, {}),
       /* @__PURE__ */ jsx28(RedoTool, {})
@@ -1656,7 +1684,7 @@ function FooterStatus() {
 }
 
 // src/footer/EditorModeTool.tsx
-import { useState as useState9, useRef as useRef16 } from "react";
+import { useState as useState9, useRef as useRef17 } from "react";
 import { jsx as jsx32 } from "react/jsx-runtime";
 var MODE_LIST = [
   { mode: "edit", name: "Edit Mode" },
@@ -1670,7 +1698,7 @@ var MODE_LIST = [
 function EditorModeTool() {
   const { editorRef } = useEditor();
   const [editorMode, setEditorMode] = useState9("Edit Mode");
-  const modeIndexRef = useRef16(0);
+  const modeIndexRef = useRef17(0);
   const handleModeChange = () => {
     modeIndexRef.current = modeIndexRef.current === MODE_LIST.length - 1 ? 0 : modeIndexRef.current + 1;
     const { name, mode } = MODE_LIST[modeIndexRef.current];
@@ -1931,7 +1959,7 @@ function EditorOptionTool() {
 }
 
 // src/footer/WatermarkFooterTool.tsx
-import { useState as useState12, useRef as useRef17, useEffect as useEffect3, useCallback } from "react";
+import { useState as useState12, useRef as useRef18, useEffect as useEffect4, useCallback } from "react";
 import { Fragment as Fragment4, jsx as jsx40, jsxs as jsxs23 } from "react/jsx-runtime";
 var COLOR_PALETTE4 = [
   ["#000000", "#434343", "#666666", "#999999", "#b7b7b7", "#cccccc"],
@@ -1946,9 +1974,9 @@ function WatermarkFooterTool() {
   const { editorRef } = useEditor();
   const [visible, setVisible] = useState12(false);
   const [tab, setTab] = useState12("text");
-  const containerRef = useRef17(null);
-  const panelRef = useRef17(null);
-  const fileInputRef = useRef17(null);
+  const containerRef = useRef18(null);
+  const panelRef = useRef18(null);
+  const fileInputRef = useRef18(null);
   const [text, setText] = useState12("WATERMARK");
   const [font, setFont] = useState12("Arial");
   const [color, setColor] = useState12("#AEB5C0");
@@ -1958,7 +1986,7 @@ function WatermarkFooterTool() {
   const [imageData, setImageData] = useState12("");
   const [imgWidth, setImgWidth] = useState12(200);
   const [imgHeight, setImgHeight] = useState12(200);
-  useEffect3(() => {
+  useEffect4(() => {
     if (!visible) return;
     const handler = (e) => {
       if (containerRef.current && !containerRef.current.contains(e.target)) {
@@ -1968,7 +1996,7 @@ function WatermarkFooterTool() {
     document.addEventListener("mousedown", handler);
     return () => document.removeEventListener("mousedown", handler);
   }, [visible]);
-  useEffect3(() => {
+  useEffect4(() => {
     if (!visible || !panelRef.current) return;
     const el = panelRef.current;
     el.style.right = "";
@@ -2350,8 +2378,8 @@ function EditorInner({
   style,
   onDrop: userOnDrop
 }) {
-  const containerRef = useRef18(null);
-  const editorRef = useRef18(null);
+  const containerRef = useRef19(null);
+  const editorRef = useRef19(null);
   const [rangeStyle, setRangeStyle] = useState13(null);
   const [isInTable, setIsInTable] = useState13(false);
   const {
@@ -2363,7 +2391,7 @@ function EditorInner({
     setColNo,
     setPageScale
   } = useFooter();
-  useEffect4(() => {
+  useEffect5(() => {
     let instance = null;
     let cancelled = false;
     let closeDropdowns = null;
@@ -2383,7 +2411,7 @@ function EditorInner({
       instance = new EditorClass(
         containerRef.current,
         data,
-        userOptions ?? {}
+        { maskMargin: [24, 0, 24, 0], ...userOptions }
       );
       editorRef.current = instance;
       instance.listener.rangeStyleChange = (payload) => {