@xignature/docx-editor 1.0.0

package/dist/PageSetupDialog-VVADE54Z.mjs

@@ -0,0 +1,218 @@
+import {
+  TWIPS_PER_INCH
+} from "./chunk-K4JMXHBE.mjs";
+import {
+  useTranslation
+} from "./chunk-OG6X5JJA.mjs";
+
+// src/react/components/dialogs/PageSetupDialog.tsx
+import { useState, useCallback, useEffect } from "react";
+import {
+  Modal,
+  ModalContent,
+  ModalHeader,
+  ModalBody,
+  ModalFooter,
+  Button,
+  Select,
+  SelectItem,
+  Input
+} from "@heroui/react";
+import { jsx, jsxs } from "react/jsx-runtime";
+var PAGE_SIZES = [
+  { labelKey: "dialogs.pageSetup.pageSizes.letter", width: 12240, height: 15840 },
+  { labelKey: "dialogs.pageSetup.pageSizes.a4", width: 11906, height: 16838 },
+  { labelKey: "dialogs.pageSetup.pageSizes.legal", width: 12240, height: 20160 },
+  { labelKey: "dialogs.pageSetup.pageSizes.a3", width: 16838, height: 23811 },
+  { labelKey: "dialogs.pageSetup.pageSizes.a5", width: 8391, height: 11906 },
+  { labelKey: "dialogs.pageSetup.pageSizes.b5", width: 9979, height: 14175 },
+  { labelKey: "dialogs.pageSetup.pageSizes.executive", width: 10440, height: 15120 }
+];
+function twipsToInches(twips) {
+  return Math.round(twips / TWIPS_PER_INCH * 100) / 100;
+}
+function inchesToTwips(inches) {
+  return Math.round(inches * TWIPS_PER_INCH);
+}
+function findPageSizeIndex(w, h) {
+  const pw = Math.min(w, h);
+  const ph = Math.max(w, h);
+  return PAGE_SIZES.findIndex((s) => Math.abs(s.width - pw) < 20 && Math.abs(s.height - ph) < 20);
+}
+var sectionLabelStyle = {
+  fontSize: 12,
+  fontWeight: 600,
+  color: "var(--doc-text-muted)",
+  textTransform: "uppercase",
+  letterSpacing: "0.5px"
+};
+var DEFAULT_WIDTH = 12240;
+var DEFAULT_HEIGHT = 15840;
+var DEFAULT_MARGIN = 1440;
+function PageSetupDialog({
+  isOpen,
+  onClose,
+  onApply,
+  currentProps
+}) {
+  const { t } = useTranslation();
+  const [pageWidth, setPageWidth] = useState(DEFAULT_WIDTH);
+  const [pageHeight, setPageHeight] = useState(DEFAULT_HEIGHT);
+  const [orientation, setOrientation] = useState("portrait");
+  const [marginTop, setMarginTop] = useState(DEFAULT_MARGIN);
+  const [marginBottom, setMarginBottom] = useState(DEFAULT_MARGIN);
+  const [marginLeft, setMarginLeft] = useState(DEFAULT_MARGIN);
+  const [marginRight, setMarginRight] = useState(DEFAULT_MARGIN);
+  useEffect(() => {
+    if (!isOpen) return;
+    const w = currentProps?.pageWidth || DEFAULT_WIDTH;
+    const h = currentProps?.pageHeight || DEFAULT_HEIGHT;
+    const orient = currentProps?.orientation || (w > h ? "landscape" : "portrait");
+    setPageWidth(w);
+    setPageHeight(h);
+    setOrientation(orient);
+    setMarginTop(currentProps?.marginTop ?? DEFAULT_MARGIN);
+    setMarginBottom(currentProps?.marginBottom ?? DEFAULT_MARGIN);
+    setMarginLeft(currentProps?.marginLeft ?? DEFAULT_MARGIN);
+    setMarginRight(currentProps?.marginRight ?? DEFAULT_MARGIN);
+  }, [isOpen, currentProps]);
+  const handlePageSizeChange = useCallback(
+    (key) => {
+      const index = Number(key);
+      if (index < 0) return;
+      const size = PAGE_SIZES[index];
+      if (orientation === "landscape") {
+        setPageWidth(size.height);
+        setPageHeight(size.width);
+      } else {
+        setPageWidth(size.width);
+        setPageHeight(size.height);
+      }
+    },
+    [orientation]
+  );
+  const handleOrientationChange = useCallback(
+    (newOrientation) => {
+      if (newOrientation === orientation) return;
+      setOrientation(newOrientation);
+      setPageWidth(pageHeight);
+      setPageHeight(pageWidth);
+    },
+    [orientation, pageWidth, pageHeight]
+  );
+  const handleApply = useCallback(() => {
+    onApply({
+      pageWidth,
+      pageHeight,
+      orientation,
+      marginTop,
+      marginBottom,
+      marginLeft,
+      marginRight
+    });
+    onClose();
+  }, [
+    pageWidth,
+    pageHeight,
+    orientation,
+    marginTop,
+    marginBottom,
+    marginLeft,
+    marginRight,
+    onApply,
+    onClose
+  ]);
+  const sizeIndex = findPageSizeIndex(pageWidth, pageHeight);
+  return /* @__PURE__ */ jsx(Modal, { isOpen, onClose, size: "md", scrollBehavior: "inside", children: /* @__PURE__ */ jsxs(ModalContent, { children: [
+    /* @__PURE__ */ jsx(ModalHeader, { className: "flex flex-col gap-1", children: t("dialogs.pageSetup.title") }),
+    /* @__PURE__ */ jsx(ModalBody, { children: /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-6", children: [
+      /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-3", children: [
+        /* @__PURE__ */ jsx("div", { style: sectionLabelStyle, children: t("dialogs.pageSetup.pageSize") }),
+        /* @__PURE__ */ jsx(
+          Select,
+          {
+            label: t("dialogs.pageSetup.sizeLabel"),
+            selectedKeys: [sizeIndex.toString()],
+            onChange: (e) => handlePageSizeChange(e.target.value),
+            variant: "bordered",
+            children: [
+              ...PAGE_SIZES.map((size, i) => /* @__PURE__ */ jsx(SelectItem, { textValue: t(size.labelKey), children: t(size.labelKey) }, i.toString())),
+              ...sizeIndex < 0 ? [
+                /* @__PURE__ */ jsx(SelectItem, { textValue: t("dialogs.pageSetup.custom"), children: t("dialogs.pageSetup.custom") }, "-1")
+              ] : []
+            ]
+          }
+        ),
+        /* @__PURE__ */ jsxs(
+          Select,
+          {
+            label: t("dialogs.pageSetup.orientation"),
+            selectedKeys: [orientation],
+            onChange: (e) => handleOrientationChange(e.target.value),
+            variant: "bordered",
+            children: [
+              /* @__PURE__ */ jsx(SelectItem, { textValue: t("dialogs.pageSetup.portrait"), children: t("dialogs.pageSetup.portrait") }, "portrait"),
+              /* @__PURE__ */ jsx(SelectItem, { textValue: t("dialogs.pageSetup.landscape"), children: t("dialogs.pageSetup.landscape") }, "landscape")
+            ]
+          }
+        )
+      ] }),
+      /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-3", children: [
+        /* @__PURE__ */ jsx("div", { style: sectionLabelStyle, children: t("dialogs.pageSetup.margins") }),
+        /* @__PURE__ */ jsxs("div", { className: "grid grid-cols-2 gap-4", children: [
+          /* @__PURE__ */ jsx(
+            Input,
+            {
+              type: "number",
+              label: t("dialogs.pageSetup.top"),
+              endContent: /* @__PURE__ */ jsx("span", { className: "text-default-400 text-small", children: "in" }),
+              value: twipsToInches(marginTop).toString(),
+              onChange: (e) => setMarginTop(inchesToTwips(Number(e.target.value) || 0)),
+              variant: "bordered"
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            Input,
+            {
+              type: "number",
+              label: t("dialogs.pageSetup.bottom"),
+              endContent: /* @__PURE__ */ jsx("span", { className: "text-default-400 text-small", children: "in" }),
+              value: twipsToInches(marginBottom).toString(),
+              onChange: (e) => setMarginBottom(inchesToTwips(Number(e.target.value) || 0)),
+              variant: "bordered"
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            Input,
+            {
+              type: "number",
+              label: t("dialogs.pageSetup.left"),
+              endContent: /* @__PURE__ */ jsx("span", { className: "text-default-400 text-small", children: "in" }),
+              value: twipsToInches(marginLeft).toString(),
+              onChange: (e) => setMarginLeft(inchesToTwips(Number(e.target.value) || 0)),
+              variant: "bordered"
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            Input,
+            {
+              type: "number",
+              label: t("dialogs.pageSetup.right"),
+              endContent: /* @__PURE__ */ jsx("span", { className: "text-default-400 text-small", children: "in" }),
+              value: twipsToInches(marginRight).toString(),
+              onChange: (e) => setMarginRight(inchesToTwips(Number(e.target.value) || 0)),
+              variant: "bordered"
+            }
+          )
+        ] })
+      ] })
+    ] }) }),
+    /* @__PURE__ */ jsxs(ModalFooter, { children: [
+      /* @__PURE__ */ jsx(Button, { variant: "flat", onPress: onClose, children: t("common.cancel") }),
+      /* @__PURE__ */ jsx(Button, { color: "primary", onPress: handleApply, children: t("common.apply") })
+    ] })
+  ] }) });
+}
+export {
+  PageSetupDialog
+};

package/dist/SplitCellDialog-7LP6IJIJ.mjs

@@ -0,0 +1,199 @@
+import {
+  useTranslation
+} from "./chunk-OG6X5JJA.mjs";
+
+// src/react/components/dialogs/SplitCellDialog.tsx
+import { useCallback, useEffect, useMemo, useState } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+var overlayStyle = {
+  position: "fixed",
+  top: 0,
+  left: 0,
+  right: 0,
+  bottom: 0,
+  backgroundColor: "rgba(0, 0, 0, 0.5)",
+  display: "flex",
+  alignItems: "center",
+  justifyContent: "center",
+  zIndex: 1e4
+};
+var dialogStyle = {
+  backgroundColor: "white",
+  borderRadius: 8,
+  boxShadow: "0 4px 20px rgba(0, 0, 0, 0.15)",
+  minWidth: 360,
+  maxWidth: 440,
+  width: "100%",
+  margin: 20
+};
+var headerStyle = {
+  padding: "16px 20px 12px",
+  borderBottom: "1px solid var(--doc-border)",
+  fontSize: 16,
+  fontWeight: 600
+};
+var bodyStyle = {
+  padding: "16px 20px",
+  display: "flex",
+  flexDirection: "column",
+  gap: 12
+};
+var rowStyle = {
+  display: "flex",
+  alignItems: "center",
+  gap: 12
+};
+var labelStyle = {
+  width: 88,
+  fontSize: 13,
+  color: "var(--doc-text-muted)"
+};
+var inputStyle = {
+  flex: 1,
+  padding: "6px 8px",
+  border: "1px solid var(--doc-border)",
+  borderRadius: 4,
+  fontSize: 13
+};
+var helperStyle = {
+  fontSize: 12,
+  color: "var(--doc-text-muted)",
+  lineHeight: 1.5
+};
+var errorStyle = {
+  ...helperStyle,
+  color: "var(--doc-error)"
+};
+var footerStyle = {
+  padding: "12px 20px 16px",
+  borderTop: "1px solid var(--doc-border)",
+  display: "flex",
+  justifyContent: "flex-end",
+  gap: 8
+};
+var btnStyle = {
+  padding: "6px 16px",
+  fontSize: 13,
+  border: "1px solid var(--doc-border)",
+  borderRadius: 4,
+  cursor: "pointer"
+};
+function SplitCellDialog({
+  isOpen,
+  onClose,
+  onApply,
+  initialRows = 1,
+  initialCols = 1,
+  minRows = 1,
+  minCols = 1
+}) {
+  const { t } = useTranslation();
+  const [rows, setRows] = useState(initialRows);
+  const [cols, setCols] = useState(initialCols);
+  useEffect(() => {
+    if (isOpen) {
+      setRows(initialRows);
+      setCols(initialCols);
+    }
+  }, [initialCols, initialRows, isOpen]);
+  const validationError = useMemo(() => {
+    if (rows < minRows || cols < minCols) {
+      return t("dialogs.splitCell.minValue", { rows: minRows, cols: minCols });
+    }
+    if (rows === 1 && cols === 1) {
+      return t("dialogs.splitCell.notOneByOne");
+    }
+    return null;
+  }, [cols, minCols, minRows, rows, t]);
+  const handleApply = useCallback(() => {
+    if (validationError) return;
+    onApply(rows, cols);
+    onClose();
+  }, [cols, onApply, onClose, rows, validationError]);
+  const handleKeyDown = useCallback(
+    (event) => {
+      if (event.key === "Escape") onClose();
+      if (event.key === "Enter") handleApply();
+    },
+    [handleApply, onClose]
+  );
+  if (!isOpen) return null;
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      style: overlayStyle,
+      onClick: onClose,
+      onKeyDown: handleKeyDown,
+      onMouseDown: (event) => event.stopPropagation(),
+      children: /* @__PURE__ */ jsxs(
+        "div",
+        {
+          style: dialogStyle,
+          onClick: (event) => event.stopPropagation(),
+          role: "dialog",
+          "aria-label": t("dialogs.splitCell.title"),
+          children: [
+            /* @__PURE__ */ jsx("div", { style: headerStyle, children: t("dialogs.splitCell.title") }),
+            /* @__PURE__ */ jsxs("div", { style: bodyStyle, children: [
+              /* @__PURE__ */ jsx("div", { style: helperStyle, children: t("dialogs.splitCell.description") }),
+              /* @__PURE__ */ jsxs("div", { style: rowStyle, children: [
+                /* @__PURE__ */ jsx("label", { style: labelStyle, children: t("dialogs.splitCell.rowsLabel") }),
+                /* @__PURE__ */ jsx(
+                  "input",
+                  {
+                    type: "number",
+                    style: inputStyle,
+                    min: minRows,
+                    step: 1,
+                    value: rows,
+                    onChange: (event) => setRows(Math.max(0, Number(event.target.value) || 0))
+                  }
+                )
+              ] }),
+              /* @__PURE__ */ jsxs("div", { style: rowStyle, children: [
+                /* @__PURE__ */ jsx("label", { style: labelStyle, children: t("dialogs.splitCell.columnsLabel") }),
+                /* @__PURE__ */ jsx(
+                  "input",
+                  {
+                    type: "number",
+                    style: inputStyle,
+                    min: minCols,
+                    step: 1,
+                    value: cols,
+                    onChange: (event) => setCols(Math.max(0, Number(event.target.value) || 0))
+                  }
+                )
+              ] }),
+              /* @__PURE__ */ jsx("div", { style: validationError ? errorStyle : helperStyle, children: validationError ?? t("dialogs.splitCell.currentMinimum", { rows: minRows, cols: minCols }) })
+            ] }),
+            /* @__PURE__ */ jsxs("div", { style: footerStyle, children: [
+              /* @__PURE__ */ jsx("button", { type: "button", style: btnStyle, onClick: onClose, children: t("common.cancel") }),
+              /* @__PURE__ */ jsx(
+                "button",
+                {
+                  type: "button",
+                  style: {
+                    ...btnStyle,
+                    backgroundColor: "var(--doc-primary)",
+                    color: "white",
+                    borderColor: "var(--doc-primary)",
+                    opacity: validationError ? 0.6 : 1,
+                    cursor: validationError ? "not-allowed" : "pointer"
+                  },
+                  disabled: !!validationError,
+                  onClick: handleApply,
+                  children: t("common.apply")
+                }
+              )
+            ] })
+          ]
+        }
+      )
+    }
+  );
+}
+var SplitCellDialog_default = SplitCellDialog;
+export {
+  SplitCellDialog,
+  SplitCellDialog_default as default
+};

package/dist/TablePropertiesDialog-OKWY22PF.mjs

@@ -0,0 +1,194 @@
+import {
+  useTranslation
+} from "./chunk-OG6X5JJA.mjs";
+
+// src/react/components/dialogs/TablePropertiesDialog.tsx
+import { useState, useCallback, useEffect } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+var overlayStyle = {
+  position: "fixed",
+  top: 0,
+  left: 0,
+  right: 0,
+  bottom: 0,
+  backgroundColor: "rgba(0, 0, 0, 0.5)",
+  display: "flex",
+  alignItems: "center",
+  justifyContent: "center",
+  zIndex: 1e4
+};
+var dialogStyle = {
+  backgroundColor: "white",
+  borderRadius: 8,
+  boxShadow: "0 4px 20px rgba(0, 0, 0, 0.15)",
+  minWidth: 360,
+  maxWidth: 440,
+  width: "100%",
+  margin: 20
+};
+var headerStyle = {
+  padding: "16px 20px 12px",
+  borderBottom: "1px solid var(--doc-border)",
+  fontSize: 16,
+  fontWeight: 600
+};
+var bodyStyle = {
+  padding: "16px 20px",
+  display: "flex",
+  flexDirection: "column",
+  gap: 12
+};
+var rowStyle = {
+  display: "flex",
+  alignItems: "center",
+  gap: 12
+};
+var labelStyle = {
+  width: 80,
+  fontSize: 13,
+  color: "var(--doc-text-muted)"
+};
+var inputStyle = {
+  flex: 1,
+  padding: "6px 8px",
+  border: "1px solid var(--doc-border)",
+  borderRadius: 4,
+  fontSize: 13
+};
+var selectStyle = {
+  ...inputStyle
+};
+var footerStyle = {
+  padding: "12px 20px 16px",
+  borderTop: "1px solid var(--doc-border)",
+  display: "flex",
+  justifyContent: "flex-end",
+  gap: 8
+};
+var btnStyle = {
+  padding: "6px 16px",
+  fontSize: 13,
+  border: "1px solid var(--doc-border)",
+  borderRadius: 4,
+  cursor: "pointer"
+};
+function TablePropertiesDialog({
+  isOpen,
+  onClose,
+  onApply,
+  currentProps
+}) {
+  const { t } = useTranslation();
+  const [width, setWidth] = useState(currentProps?.width || 0);
+  const [widthType, setWidthType] = useState(currentProps?.widthType || "auto");
+  const [justification, setJustification] = useState(currentProps?.justification || "left");
+  useEffect(() => {
+    if (isOpen) {
+      setWidth(currentProps?.width || 0);
+      setWidthType(currentProps?.widthType || "auto");
+      setJustification(currentProps?.justification || "left");
+    }
+  }, [isOpen, currentProps]);
+  const handleApply = useCallback(() => {
+    const props = {};
+    if (widthType === "auto") {
+      props.width = null;
+      props.widthType = "auto";
+    } else {
+      props.width = width;
+      props.widthType = widthType;
+    }
+    props.justification = justification;
+    onApply(props);
+    onClose();
+  }, [width, widthType, justification, onApply, onClose]);
+  const handleKeyDown = useCallback(
+    (e) => {
+      if (e.key === "Escape") onClose();
+      if (e.key === "Enter") handleApply();
+    },
+    [onClose, handleApply]
+  );
+  if (!isOpen) return null;
+  return /* @__PURE__ */ jsx("div", { style: overlayStyle, onClick: onClose, onKeyDown: handleKeyDown, children: /* @__PURE__ */ jsxs(
+    "div",
+    {
+      style: dialogStyle,
+      onClick: (e) => e.stopPropagation(),
+      role: "dialog",
+      "aria-label": t("dialogs.tableProperties.title"),
+      children: [
+        /* @__PURE__ */ jsx("div", { style: headerStyle, children: t("dialogs.tableProperties.title") }),
+        /* @__PURE__ */ jsxs("div", { style: bodyStyle, children: [
+          /* @__PURE__ */ jsxs("div", { style: rowStyle, children: [
+            /* @__PURE__ */ jsx("label", { style: labelStyle, children: t("dialogs.tableProperties.widthType") }),
+            /* @__PURE__ */ jsxs(
+              "select",
+              {
+                style: selectStyle,
+                value: widthType,
+                onChange: (e) => setWidthType(e.target.value),
+                children: [
+                  /* @__PURE__ */ jsx("option", { value: "auto", children: t("dialogs.tableProperties.widthTypes.auto") }),
+                  /* @__PURE__ */ jsx("option", { value: "dxa", children: t("dialogs.tableProperties.widthTypes.fixed") }),
+                  /* @__PURE__ */ jsx("option", { value: "pct", children: t("dialogs.tableProperties.widthTypes.percentage") })
+                ]
+              }
+            )
+          ] }),
+          widthType !== "auto" && /* @__PURE__ */ jsxs("div", { style: rowStyle, children: [
+            /* @__PURE__ */ jsx("label", { style: labelStyle, children: t("dialogs.tableProperties.widthLabel") }),
+            /* @__PURE__ */ jsx(
+              "input",
+              {
+                type: "number",
+                style: inputStyle,
+                min: 0,
+                step: widthType === "pct" ? 5 : 100,
+                value: width,
+                onChange: (e) => setWidth(Number(e.target.value) || 0)
+              }
+            ),
+            /* @__PURE__ */ jsx("span", { style: { fontSize: 11, color: "var(--doc-text-muted)" }, children: widthType === "pct" ? t("dialogs.tableProperties.units.fiftiethsPercent") : t("dialogs.tableProperties.units.twips") })
+          ] }),
+          /* @__PURE__ */ jsxs("div", { style: rowStyle, children: [
+            /* @__PURE__ */ jsx("label", { style: labelStyle, children: t("dialogs.tableProperties.alignmentLabel") }),
+            /* @__PURE__ */ jsxs(
+              "select",
+              {
+                style: selectStyle,
+                value: justification,
+                onChange: (e) => setJustification(e.target.value),
+                children: [
+                  /* @__PURE__ */ jsx("option", { value: "left", children: t("dialogs.tableProperties.alignOptions.left") }),
+                  /* @__PURE__ */ jsx("option", { value: "center", children: t("dialogs.tableProperties.alignOptions.center") }),
+                  /* @__PURE__ */ jsx("option", { value: "right", children: t("dialogs.tableProperties.alignOptions.right") })
+                ]
+              }
+            )
+          ] })
+        ] }),
+        /* @__PURE__ */ jsxs("div", { style: footerStyle, children: [
+          /* @__PURE__ */ jsx("button", { type: "button", style: btnStyle, onClick: onClose, children: t("common.cancel") }),
+          /* @__PURE__ */ jsx(
+            "button",
+            {
+              type: "button",
+              style: {
+                ...btnStyle,
+                backgroundColor: "var(--doc-primary)",
+                color: "white",
+                borderColor: "var(--doc-primary)"
+              },
+              onClick: handleApply,
+              children: t("common.apply")
+            }
+          )
+        ] })
+      ]
+    }
+  ) });
+}
+export {
+  TablePropertiesDialog
+};