@windoc/react 0.2.7 → 0.2.9

package/dist/index.mjs

@@ -232,8 +232,14 @@ function TitleTool() {
 import { useRef as useRef4 } 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" }
+  { family: "Arial", label: "Arial" },
+  { family: "Times New Roman", label: "Times New Roman" },
+  { family: "Georgia", label: "Georgia" },
+  { family: "Verdana", label: "Verdana" },
+  { family: "Trebuchet MS", label: "Trebuchet MS" },
+  { family: "Courier New", label: "Courier New" },
+  { family: "Comic Sans MS", label: "Comic Sans MS" },
+  { family: "Impact", label: "Impact" }
 ];
 function FontTool() {
   const { editorRef, rangeStyle } = useEditor();
@@ -262,11 +268,11 @@ function FontTool() {
 // src/toolbar/FontSizeTool.tsx
 import { useRef as useRef5 } 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];
+var SIZES = [72, 48, 36, 24, 20, 18, 16, 14, 12, 11, 10, 9, 8];
 function FontSizeTool() {
   const { editorRef, rangeStyle } = useEditor();
   const optionsRef = useRef5(null);
-  const activeSize = rangeStyle?.size ?? 16;
+  const activeSize = rangeStyle?.size ?? 11;
   const handleSize = (size) => {
     editorRef.current?.command.executeSize(size);
   };
@@ -951,6 +957,7 @@ function PaperDirectionTool() {
 }
 
 // src/footer/PaperMarginTool.tsx
+import { pxToCm, cmToPx } from "@windoc/core";
 import { jsx as jsx35 } from "react/jsx-runtime";
 function PaperMarginTool() {
   const { editorRef } = useEditor();
@@ -961,10 +968,10 @@ function PaperMarginTool() {
     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" }
+        { type: "text", label: "Top Margin (cm)", name: "top", required: true, value: `${pxToCm(topMargin)}`, placeholder: "e.g. 2.54" },
+        { type: "text", label: "Bottom Margin (cm)", name: "bottom", required: true, value: `${pxToCm(bottomMargin)}`, placeholder: "e.g. 2.54" },
+        { type: "text", label: "Left Margin (cm)", name: "left", required: true, value: `${pxToCm(leftMargin)}`, placeholder: "e.g. 2.54" },
+        { type: "text", label: "Right Margin (cm)", name: "right", required: true, value: `${pxToCm(rightMargin)}`, placeholder: "e.g. 2.54" }
       ],
       onConfirm: (payload) => {
         const top = payload.find((p) => p.name === "top")?.value;
@@ -976,10 +983,10 @@ function PaperMarginTool() {
         const right = payload.find((p) => p.name === "right")?.value;
         if (!right) return;
         editorRef.current?.command.executeSetPaperMargin([
-          Number(top),
-          Number(right),
-          Number(bottom),
-          Number(left)
+          cmToPx(Number(top)),
+          cmToPx(Number(right)),
+          cmToPx(Number(bottom)),
+          cmToPx(Number(left))
         ]);
       }
     });
@@ -1142,85 +1149,95 @@ function WatermarkFooterTool() {
   };
   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" })
+    visible && /* @__PURE__ */ jsxs21(Fragment3, { children: [
+      /* @__PURE__ */ jsx38("div", { className: "wm-panel-mask", onClick: (e) => {
+        e.stopPropagation();
+        setVisible(false);
+      } }),
+      /* @__PURE__ */ jsxs21("div", { className: "watermark-footer-panel", ref: panelRef, onClick: (e) => e.stopPropagation(), children: [
+        /* @__PURE__ */ jsxs21("div", { className: "wm-panel-title", children: [
+          /* @__PURE__ */ jsx38("span", { children: "Watermark" }),
+          /* @__PURE__ */ jsx38("i", { onClick: () => setVisible(false) })
+        ] }),
+        /* @__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__ */ 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("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__ */ 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("label", { children: [
+              "Rotation ",
+              /* @__PURE__ */ jsxs21("span", { className: "wm-panel-value", children: [
+                rotation,
+                "\xB0"
+              ] })
             ] }),
-            /* @__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: -90, max: 90, value: rotation, onChange: (e) => setRotation(Number(e.target.value)), className: "wm-panel-slider" })
           ] }),
-          /* @__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__ */ 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__ */ 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" })
         ] })
-      ] }),
-      /* @__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" })
       ] })
     ] })
   ] });
@@ -1257,6 +1274,7 @@ function Editor({
   options: userOptions,
   onChange,
   onReady,
+  onRangeStyleChange,
   toolbar = true,
   footer = true,
   renderToolbar,
@@ -1273,6 +1291,7 @@ function Editor({
       options: userOptions,
       onChange,
       onReady,
+      onRangeStyleChange,
       toolbar,
       footer,
       renderToolbar,
@@ -1289,6 +1308,7 @@ function EditorInner({
   options: userOptions,
   onChange,
   onReady,
+  onRangeStyleChange,
   toolbar = true,
   footer = true,
   renderToolbar,
@@ -1332,6 +1352,7 @@ function EditorInner({
       editorRef.current = instance;
       instance.listener.rangeStyleChange = (payload) => {
         setRangeStyle(payload);
+        onRangeStyleChange?.(payload);
         const rangeContext = instance?.command.getRangeContext();
         if (rangeContext) {
           setRowNo(rangeContext.startRowNo + 1);
@@ -1423,7 +1444,9 @@ function EditorInner({
       ]);
       const closeDropdowns = (evt) => {
         const visibleDom = document.querySelector(".visible");
-        if (!visibleDom || visibleDom.contains(evt.target)) return;
+        if (!visibleDom) return;
+        const parent = visibleDom.parentElement;
+        if (parent && parent.contains(evt.target)) return;
         visibleDom.classList.remove("visible");
       };
       window.addEventListener("click", closeDropdowns, { capture: true });