@xignature/docx-editor 1.0.0

package/dist/ImagePositionDialog-GNWPNWDW.mjs

@@ -0,0 +1,384 @@
+import {
+  useTranslation
+} from "./chunk-OG6X5JJA.mjs";
+
+// src/react/components/dialogs/ImagePositionDialog.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: 400,
+  maxWidth: 480,
+  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: 16
+};
+var sectionStyle = {
+  display: "flex",
+  flexDirection: "column",
+  gap: 8
+};
+var sectionLabelStyle = {
+  fontSize: 13,
+  fontWeight: 600,
+  color: "var(--doc-text)"
+};
+var rowStyle = {
+  display: "flex",
+  alignItems: "center",
+  gap: 8
+};
+var labelStyle = {
+  width: 75,
+  fontSize: 12,
+  color: "var(--doc-text-muted)"
+};
+var inputStyle = {
+  flex: 1,
+  padding: "4px 6px",
+  border: "1px solid var(--doc-border)",
+  borderRadius: 4,
+  fontSize: 12
+};
+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 ImagePositionDialog({
+  isOpen,
+  onClose,
+  onApply,
+  currentData
+}) {
+  const { t } = useTranslation();
+  const [hMode, setHMode] = useState("align");
+  const [hAlign, setHAlign] = useState("center");
+  const [hRelativeTo, setHRelativeTo] = useState("column");
+  const [hOffset, setHOffset] = useState(0);
+  const [vMode, setVMode] = useState("align");
+  const [vAlign, setVAlign] = useState("top");
+  const [vRelativeTo, setVRelativeTo] = useState("paragraph");
+  const [vOffset, setVOffset] = useState(0);
+  const [distTop, setDistTop] = useState(0);
+  const [distBottom, setDistBottom] = useState(0);
+  const [distLeft, setDistLeft] = useState(0);
+  const [distRight, setDistRight] = useState(0);
+  useEffect(() => {
+    if (!isOpen) return;
+    const h = currentData?.horizontal;
+    const v = currentData?.vertical;
+    if (h?.align) {
+      setHMode("align");
+      setHAlign(h.align);
+    } else if (h?.posOffset != null) {
+      setHMode("offset");
+      setHOffset(h.posOffset);
+    }
+    if (h?.relativeTo) setHRelativeTo(h.relativeTo);
+    if (v?.align) {
+      setVMode("align");
+      setVAlign(v.align);
+    } else if (v?.posOffset != null) {
+      setVMode("offset");
+      setVOffset(v.posOffset);
+    }
+    if (v?.relativeTo) setVRelativeTo(v.relativeTo);
+    setDistTop(currentData?.distTop ?? 0);
+    setDistBottom(currentData?.distBottom ?? 0);
+    setDistLeft(currentData?.distLeft ?? 0);
+    setDistRight(currentData?.distRight ?? 0);
+  }, [isOpen, currentData]);
+  const handleApply = useCallback(() => {
+    const data = {};
+    data.horizontal = {
+      relativeTo: hRelativeTo,
+      ...hMode === "align" ? { align: hAlign } : { posOffset: hOffset }
+    };
+    data.vertical = {
+      relativeTo: vRelativeTo,
+      ...vMode === "align" ? { align: vAlign } : { posOffset: vOffset }
+    };
+    data.distTop = distTop;
+    data.distBottom = distBottom;
+    data.distLeft = distLeft;
+    data.distRight = distRight;
+    onApply(data);
+    onClose();
+  }, [
+    hMode,
+    hAlign,
+    hRelativeTo,
+    hOffset,
+    vMode,
+    vAlign,
+    vRelativeTo,
+    vOffset,
+    distTop,
+    distBottom,
+    distLeft,
+    distRight,
+    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.imagePosition.title"),
+      children: [
+        /* @__PURE__ */ jsx("div", { style: headerStyle, children: t("dialogs.imagePosition.title") }),
+        /* @__PURE__ */ jsxs("div", { style: bodyStyle, children: [
+          /* @__PURE__ */ jsxs("div", { style: sectionStyle, children: [
+            /* @__PURE__ */ jsx("div", { style: sectionLabelStyle, children: t("dialogs.imagePosition.horizontal") }),
+            /* @__PURE__ */ jsxs("div", { style: rowStyle, children: [
+              /* @__PURE__ */ jsx("label", { style: labelStyle, children: t("dialogs.imagePosition.position") }),
+              /* @__PURE__ */ jsxs(
+                "select",
+                {
+                  style: selectStyle,
+                  value: hMode,
+                  onChange: (e) => setHMode(e.target.value),
+                  children: [
+                    /* @__PURE__ */ jsx("option", { value: "align", children: t("dialogs.imagePosition.alignment") }),
+                    /* @__PURE__ */ jsx("option", { value: "offset", children: t("dialogs.imagePosition.offset") })
+                  ]
+                }
+              )
+            ] }),
+            hMode === "align" ? /* @__PURE__ */ jsxs("div", { style: rowStyle, children: [
+              /* @__PURE__ */ jsx("label", { style: labelStyle, children: t("dialogs.imagePosition.align") }),
+              /* @__PURE__ */ jsxs(
+                "select",
+                {
+                  style: selectStyle,
+                  value: hAlign,
+                  onChange: (e) => setHAlign(e.target.value),
+                  children: [
+                    /* @__PURE__ */ jsx("option", { value: "left", children: t("dialogs.imagePosition.alignOptions.left") }),
+                    /* @__PURE__ */ jsx("option", { value: "center", children: t("dialogs.imagePosition.alignOptions.center") }),
+                    /* @__PURE__ */ jsx("option", { value: "right", children: t("dialogs.imagePosition.alignOptions.right") })
+                  ]
+                }
+              )
+            ] }) : /* @__PURE__ */ jsxs("div", { style: rowStyle, children: [
+              /* @__PURE__ */ jsx("label", { style: labelStyle, children: t("dialogs.imagePosition.offsetPx") }),
+              /* @__PURE__ */ jsx(
+                "input",
+                {
+                  type: "number",
+                  style: inputStyle,
+                  value: hOffset,
+                  onChange: (e) => setHOffset(Number(e.target.value) || 0)
+                }
+              )
+            ] }),
+            /* @__PURE__ */ jsxs("div", { style: rowStyle, children: [
+              /* @__PURE__ */ jsx("label", { style: labelStyle, children: t("dialogs.imagePosition.relativeTo") }),
+              /* @__PURE__ */ jsxs(
+                "select",
+                {
+                  style: selectStyle,
+                  value: hRelativeTo,
+                  onChange: (e) => setHRelativeTo(e.target.value),
+                  children: [
+                    /* @__PURE__ */ jsx("option", { value: "page", children: t("dialogs.imagePosition.relativeOptions.page") }),
+                    /* @__PURE__ */ jsx("option", { value: "column", children: t("dialogs.imagePosition.relativeOptions.column") }),
+                    /* @__PURE__ */ jsx("option", { value: "margin", children: t("dialogs.imagePosition.relativeOptions.margin") }),
+                    /* @__PURE__ */ jsx("option", { value: "character", children: t("dialogs.imagePosition.relativeOptions.character") })
+                  ]
+                }
+              )
+            ] })
+          ] }),
+          /* @__PURE__ */ jsxs("div", { style: sectionStyle, children: [
+            /* @__PURE__ */ jsx("div", { style: sectionLabelStyle, children: t("dialogs.imagePosition.vertical") }),
+            /* @__PURE__ */ jsxs("div", { style: rowStyle, children: [
+              /* @__PURE__ */ jsx("label", { style: labelStyle, children: t("dialogs.imagePosition.position") }),
+              /* @__PURE__ */ jsxs(
+                "select",
+                {
+                  style: selectStyle,
+                  value: vMode,
+                  onChange: (e) => setVMode(e.target.value),
+                  children: [
+                    /* @__PURE__ */ jsx("option", { value: "align", children: t("dialogs.imagePosition.alignment") }),
+                    /* @__PURE__ */ jsx("option", { value: "offset", children: t("dialogs.imagePosition.offset") })
+                  ]
+                }
+              )
+            ] }),
+            vMode === "align" ? /* @__PURE__ */ jsxs("div", { style: rowStyle, children: [
+              /* @__PURE__ */ jsx("label", { style: labelStyle, children: t("dialogs.imagePosition.align") }),
+              /* @__PURE__ */ jsxs(
+                "select",
+                {
+                  style: selectStyle,
+                  value: vAlign,
+                  onChange: (e) => setVAlign(e.target.value),
+                  children: [
+                    /* @__PURE__ */ jsx("option", { value: "top", children: t("dialogs.imagePosition.alignOptions.top") }),
+                    /* @__PURE__ */ jsx("option", { value: "center", children: t("dialogs.imagePosition.alignOptions.center") }),
+                    /* @__PURE__ */ jsx("option", { value: "bottom", children: t("dialogs.imagePosition.alignOptions.bottom") })
+                  ]
+                }
+              )
+            ] }) : /* @__PURE__ */ jsxs("div", { style: rowStyle, children: [
+              /* @__PURE__ */ jsx("label", { style: labelStyle, children: t("dialogs.imagePosition.offsetPx") }),
+              /* @__PURE__ */ jsx(
+                "input",
+                {
+                  type: "number",
+                  style: inputStyle,
+                  value: vOffset,
+                  onChange: (e) => setVOffset(Number(e.target.value) || 0)
+                }
+              )
+            ] }),
+            /* @__PURE__ */ jsxs("div", { style: rowStyle, children: [
+              /* @__PURE__ */ jsx("label", { style: labelStyle, children: t("dialogs.imagePosition.relativeTo") }),
+              /* @__PURE__ */ jsxs(
+                "select",
+                {
+                  style: selectStyle,
+                  value: vRelativeTo,
+                  onChange: (e) => setVRelativeTo(e.target.value),
+                  children: [
+                    /* @__PURE__ */ jsx("option", { value: "page", children: t("dialogs.imagePosition.relativeOptions.page") }),
+                    /* @__PURE__ */ jsx("option", { value: "margin", children: t("dialogs.imagePosition.relativeOptions.margin") }),
+                    /* @__PURE__ */ jsx("option", { value: "paragraph", children: t("dialogs.imagePosition.relativeOptions.paragraph") }),
+                    /* @__PURE__ */ jsx("option", { value: "line", children: t("dialogs.imagePosition.relativeOptions.line") })
+                  ]
+                }
+              )
+            ] })
+          ] }),
+          /* @__PURE__ */ jsxs("div", { style: sectionStyle, children: [
+            /* @__PURE__ */ jsx("div", { style: sectionLabelStyle, children: "Distance from text (px)" }),
+            /* @__PURE__ */ jsxs("div", { style: { display: "grid", gridTemplateColumns: "1fr 1fr", gap: 8 }, children: [
+              /* @__PURE__ */ jsxs("div", { style: rowStyle, children: [
+                /* @__PURE__ */ jsx("label", { style: { ...labelStyle, width: 45 }, children: t("dialogs.imagePosition.alignOptions.top") }),
+                /* @__PURE__ */ jsx(
+                  "input",
+                  {
+                    type: "number",
+                    style: inputStyle,
+                    min: 0,
+                    value: distTop,
+                    onChange: (e) => setDistTop(Number(e.target.value) || 0)
+                  }
+                )
+              ] }),
+              /* @__PURE__ */ jsxs("div", { style: rowStyle, children: [
+                /* @__PURE__ */ jsx("label", { style: { ...labelStyle, width: 45 }, children: t("dialogs.imagePosition.alignOptions.bottom") }),
+                /* @__PURE__ */ jsx(
+                  "input",
+                  {
+                    type: "number",
+                    style: inputStyle,
+                    min: 0,
+                    value: distBottom,
+                    onChange: (e) => setDistBottom(Number(e.target.value) || 0)
+                  }
+                )
+              ] }),
+              /* @__PURE__ */ jsxs("div", { style: rowStyle, children: [
+                /* @__PURE__ */ jsx("label", { style: { ...labelStyle, width: 45 }, children: t("dialogs.imagePosition.alignOptions.left") }),
+                /* @__PURE__ */ jsx(
+                  "input",
+                  {
+                    type: "number",
+                    style: inputStyle,
+                    min: 0,
+                    value: distLeft,
+                    onChange: (e) => setDistLeft(Number(e.target.value) || 0)
+                  }
+                )
+              ] }),
+              /* @__PURE__ */ jsxs("div", { style: rowStyle, children: [
+                /* @__PURE__ */ jsx("label", { style: { ...labelStyle, width: 45 }, children: t("dialogs.imagePosition.alignOptions.right") }),
+                /* @__PURE__ */ jsx(
+                  "input",
+                  {
+                    type: "number",
+                    style: inputStyle,
+                    min: 0,
+                    value: distRight,
+                    onChange: (e) => setDistRight(Number(e.target.value) || 0)
+                  }
+                )
+              ] })
+            ] })
+          ] })
+        ] }),
+        /* @__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 {
+  ImagePositionDialog
+};

package/dist/ImagePropertiesDialog-X444B4VT.mjs

@@ -0,0 +1,255 @@
+import {
+  useTranslation
+} from "./chunk-OG6X5JJA.mjs";
+
+// src/react/components/dialogs/ImagePropertiesDialog.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: 380,
+  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: 16
+};
+var sectionStyle = {
+  display: "flex",
+  flexDirection: "column",
+  gap: 8
+};
+var sectionLabelStyle = {
+  fontSize: 13,
+  fontWeight: 600,
+  color: "var(--doc-text)"
+};
+var rowStyle = {
+  display: "flex",
+  alignItems: "center",
+  gap: 8
+};
+var labelStyle = {
+  width: 60,
+  fontSize: 12,
+  color: "var(--doc-text-muted)"
+};
+var inputStyle = {
+  flex: 1,
+  padding: "4px 6px",
+  border: "1px solid var(--doc-border)",
+  borderRadius: 4,
+  fontSize: 12
+};
+var selectStyle = {
+  ...inputStyle
+};
+var textareaStyle = {
+  ...inputStyle,
+  minHeight: 60,
+  resize: "vertical",
+  fontFamily: "inherit"
+};
+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 ImagePropertiesDialog({
+  isOpen,
+  onClose,
+  onApply,
+  currentData
+}) {
+  const { t } = useTranslation();
+  const [alt, setAlt] = useState("");
+  const [borderWidth, setBorderWidth] = useState(0);
+  const [borderColor, setBorderColor] = useState("#000000");
+  const [borderStyle, setBorderStyle] = useState("solid");
+  useEffect(() => {
+    if (!isOpen) return;
+    setAlt(currentData?.alt ?? "");
+    setBorderWidth(currentData?.borderWidth ?? 0);
+    setBorderColor(currentData?.borderColor ?? "#000000");
+    setBorderStyle(currentData?.borderStyle ?? "solid");
+  }, [isOpen, currentData]);
+  const handleApply = useCallback(() => {
+    onApply({
+      alt: alt || void 0,
+      borderWidth: borderWidth > 0 ? borderWidth : void 0,
+      borderColor: borderWidth > 0 ? borderColor : void 0,
+      borderStyle: borderWidth > 0 ? borderStyle : void 0
+    });
+    onClose();
+  }, [alt, borderWidth, borderColor, borderStyle, onApply, onClose]);
+  const handleKeyDown = useCallback(
+    (e) => {
+      if (e.key === "Escape") onClose();
+      if (e.key === "Enter" && !e.shiftKey) 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.imageProperties.title"),
+      children: [
+        /* @__PURE__ */ jsx("div", { style: headerStyle, children: t("dialogs.imageProperties.title") }),
+        /* @__PURE__ */ jsxs("div", { style: bodyStyle, children: [
+          /* @__PURE__ */ jsxs("div", { style: sectionStyle, children: [
+            /* @__PURE__ */ jsx("div", { style: sectionLabelStyle, children: t("dialogs.imageProperties.altText") }),
+            /* @__PURE__ */ jsx(
+              "textarea",
+              {
+                style: textareaStyle,
+                value: alt,
+                onChange: (e) => setAlt(e.target.value),
+                placeholder: t("dialogs.imageProperties.altTextPlaceholder")
+              }
+            )
+          ] }),
+          /* @__PURE__ */ jsxs("div", { style: sectionStyle, children: [
+            /* @__PURE__ */ jsx("div", { style: sectionLabelStyle, children: t("dialogs.imageProperties.border") }),
+            /* @__PURE__ */ jsxs("div", { style: rowStyle, children: [
+              /* @__PURE__ */ jsx("label", { style: labelStyle, children: t("dialogs.imageProperties.width") }),
+              /* @__PURE__ */ jsx(
+                "input",
+                {
+                  type: "number",
+                  style: { ...inputStyle, maxWidth: 80 },
+                  min: 0,
+                  max: 20,
+                  step: 0.5,
+                  value: borderWidth,
+                  onChange: (e) => setBorderWidth(Number(e.target.value) || 0)
+                }
+              ),
+              /* @__PURE__ */ jsx("span", { style: { fontSize: 12, color: "var(--doc-text-muted)" }, children: t("common.px") })
+            ] }),
+            /* @__PURE__ */ jsxs("div", { style: rowStyle, children: [
+              /* @__PURE__ */ jsx("label", { style: labelStyle, children: t("dialogs.imageProperties.style") }),
+              /* @__PURE__ */ jsxs(
+                "select",
+                {
+                  style: selectStyle,
+                  value: borderStyle,
+                  onChange: (e) => setBorderStyle(e.target.value),
+                  children: [
+                    /* @__PURE__ */ jsx("option", { value: "solid", children: t("dialogs.imageProperties.borderStyles.solid") }),
+                    /* @__PURE__ */ jsx("option", { value: "dashed", children: t("dialogs.imageProperties.borderStyles.dashed") }),
+                    /* @__PURE__ */ jsx("option", { value: "dotted", children: t("dialogs.imageProperties.borderStyles.dotted") }),
+                    /* @__PURE__ */ jsx("option", { value: "double", children: t("dialogs.imageProperties.borderStyles.double") }),
+                    /* @__PURE__ */ jsx("option", { value: "groove", children: t("dialogs.imageProperties.borderStyles.groove") }),
+                    /* @__PURE__ */ jsx("option", { value: "ridge", children: t("dialogs.imageProperties.borderStyles.ridge") }),
+                    /* @__PURE__ */ jsx("option", { value: "inset", children: t("dialogs.imageProperties.borderStyles.inset") }),
+                    /* @__PURE__ */ jsx("option", { value: "outset", children: t("dialogs.imageProperties.borderStyles.outset") })
+                  ]
+                }
+              )
+            ] }),
+            /* @__PURE__ */ jsxs("div", { style: rowStyle, children: [
+              /* @__PURE__ */ jsx("label", { style: labelStyle, children: t("dialogs.imageProperties.color") }),
+              /* @__PURE__ */ jsx(
+                "input",
+                {
+                  type: "color",
+                  value: borderColor,
+                  onChange: (e) => setBorderColor(e.target.value),
+                  style: {
+                    width: 32,
+                    height: 24,
+                    padding: 0,
+                    border: "1px solid var(--doc-border)",
+                    borderRadius: 4,
+                    cursor: "pointer"
+                  }
+                }
+              ),
+              /* @__PURE__ */ jsx(
+                "input",
+                {
+                  type: "text",
+                  style: { ...inputStyle, maxWidth: 90 },
+                  value: borderColor,
+                  onChange: (e) => setBorderColor(e.target.value)
+                }
+              )
+            ] }),
+            borderWidth > 0 && /* @__PURE__ */ jsx(
+              "div",
+              {
+                style: {
+                  marginTop: 4,
+                  padding: 8,
+                  border: `${borderWidth}px ${borderStyle} ${borderColor}`,
+                  borderRadius: 4,
+                  fontSize: 11,
+                  color: "var(--doc-text-muted)",
+                  textAlign: "center"
+                },
+                children: t("dialogs.imageProperties.preview")
+              }
+            )
+          ] })
+        ] }),
+        /* @__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 {
+  ImagePropertiesDialog
+};