npm - mgcode-docx-editor - Versions diffs - 0.1.0 - Mend

mgcode-docx-editor 0.1.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (9) hide show

package/dist/index.mjs ADDED Viewed

@@ -0,0 +1,1463 @@
+// src/DocxEditor.tsx
+import {
+  forwardRef,
+  useCallback as useCallback2,
+  useEffect,
+  useImperativeHandle,
+  useRef as useRef3,
+  useState as useState2
+} from "react";
+import { Box as Box3, Chip, CircularProgress } from "@mui/material";
+// src/docx/generate.ts
+import HTMLtoDOCX from "@turbodocx/html-to-docx";
+import JSZip from "jszip";
+import { Buffer as BufferPolyfill } from "buffer";
+// src/docx/pageFields.ts
+var PAGE_NUMBER_TOKEN = "[[PAGINA]]";
+var TOTAL_PAGES_TOKEN = "[[TOTAL_PAGINAS]]";
+var FIELD_BY_TOKEN = [
+  { token: PAGE_NUMBER_TOKEN, instr: "PAGE" },
+  { token: TOTAL_PAGES_TOKEN, instr: "NUMPAGES" }
+];
+function hasPageFieldTokens(html) {
+  if (!html) return false;
+  return FIELD_BY_TOKEN.some(({ token }) => html.includes(token));
+}
+var W_NAMESPACE = "http://schemas.openxmlformats.org/wordprocessingml/2006/main";
+var RUN_PATTERN = /<(w:)?r(?:\s[^>]*)?>[\s\S]*?<\/(?:w:)?r>/g;
+function splitTextByTokens(text) {
+  const parts = [];
+  let rest = text;
+  while (rest.length > 0) {
+    let earliest = -1;
+    let found = null;
+    for (const candidate of FIELD_BY_TOKEN) {
+      const i = rest.indexOf(candidate.token);
+      if (i !== -1 && (earliest === -1 || i < earliest)) {
+        earliest = i;
+        found = candidate;
+      }
+    }
+    if (!found) {
+      parts.push({ kind: "text", value: rest });
+      break;
+    }
+    if (earliest > 0) parts.push({ kind: "text", value: rest.slice(0, earliest) });
+    parts.push({ kind: "field", instr: found.instr });
+    rest = rest.slice(earliest + found.token.length);
+  }
+  return parts;
+}
+function rebuildRun(runXml, prefix) {
+  const tMatch = runXml.match(/<(?:w:)?t([^>]*)>([\s\S]*?)<\/(?:w:)?t>/);
+  if (!tMatch) return runXml;
+  const [, tAttrs, text] = tMatch;
+  if (!FIELD_BY_TOKEN.some(({ token }) => text.includes(token))) return runXml;
+  const rPrMatch = runXml.match(/<(?:w:)?rPr(?:\/>|>[\s\S]*?<\/(?:w:)?rPr>)/);
+  const props = rPrMatch ? rPrMatch[0] : "";
+  const p = prefix;
+  const tOpen = `<${p}t${tAttrs}>`;
+  const tClose = `</${p}t>`;
+  const nsDecl = p ? "" : ` xmlns:w="${W_NAMESPACE}"`;
+  return splitTextByTokens(text).map(
+    (part) => part.kind === "text" ? `<${p}r>${props}${tOpen}${part.value}${tClose}</${p}r>` : (
+      // "1" é o valor em cache exibido até o Word/LibreOffice atualizar o campo.
+      `<${p}fldSimple${nsDecl} w:instr=" ${part.instr} "><${p}r>${props}${tOpen}1${tClose}</${p}r></${p}fldSimple>`
+    )
+  ).join("");
+}
+function injectPageFields(xml) {
+  return xml.replace(
+    RUN_PATTERN,
+    (runXml, prefix) => rebuildRun(runXml, prefix ?? "")
+  );
+}
+// src/docx/generate.ts
+var DEFAULT_MARGINS = {
+  top: 1440,
+  right: 1440,
+  bottom: 1440,
+  left: 1440
+};
+var PAGE_SIZE_A4_TWIPS = { width: 11906, height: 16838 };
+function ensureBufferGlobal() {
+  const g = globalThis;
+  if (typeof g.Buffer === "undefined") g.Buffer = BufferPolyfill;
+}
+async function toArrayBuffer(out) {
+  if (out instanceof ArrayBuffer) return out;
+  if (typeof Blob !== "undefined" && out instanceof Blob) {
+    return out.arrayBuffer();
+  }
+  const u8 = out;
+  return u8.buffer.slice(u8.byteOffset, u8.byteOffset + u8.byteLength);
+}
+function wrapBody(bodyHtml) {
+  return `<!DOCTYPE html><html><head><meta charset="utf-8"></head><body>${bodyHtml}</body></html>`;
+}
+async function modelToDocx(model, options = {}) {
+  ensureBufferGlobal();
+  const margins = options.margins ?? DEFAULT_MARGINS;
+  const hasHeader = !!model.header && model.header.trim().length > 0;
+  const hasFooter = !!model.footer && model.footer.trim().length > 0;
+  const out = await HTMLtoDOCX(
+    wrapBody(model.body),
+    hasHeader ? model.header : null,
+    {
+      header: hasHeader,
+      footer: hasFooter,
+      margins,
+      pageSize: PAGE_SIZE_A4_TWIPS,
+      font: options.font ?? "Arial"
+    },
+    hasFooter ? model.footer : null
+  );
+  const buffer = await toArrayBuffer(out);
+  if (!hasPageFieldTokens(model.header) && !hasPageFieldTokens(model.footer)) {
+    return buffer;
+  }
+  const zip = await JSZip.loadAsync(buffer);
+  const partNames = Object.keys(zip.files).filter(
+    (name) => /^word\/(header|footer)\d*\.xml$/.test(name)
+  );
+  for (const name of partNames) {
+    const xml = await zip.file(name).async("string");
+    zip.file(name, injectPageFields(xml));
+  }
+  return zip.generateAsync({ type: "arraybuffer" });
+}
+// src/docx/importDocx.ts
+import mammoth from "mammoth";
+async function bufferToModel(buffer) {
+  const input = typeof Buffer !== "undefined" ? { buffer: Buffer.from(buffer) } : { arrayBuffer: buffer };
+  const { value: bodyHtml } = await mammoth.convertToHtml(input);
+  return {
+    body: bodyHtml
+  };
+}
+// src/docx/pagination.ts
+function computePageLayout(blocks, metrics) {
+  const { usableHeightPx, interPageGapPx } = metrics;
+  const stride = usableHeightPx + interPageGapPx;
+  const spacers = [];
+  let added = 0;
+  let maxEnd = 0;
+  blocks.forEach((block, index) => {
+    let start = block.top + added;
+    const page = Math.floor(start / stride);
+    const regionStart = page * stride;
+    const regionEnd = regionStart + usableHeightPx;
+    const fitsInAPage = block.height <= usableHeightPx;
+    const crossesBottom = start + block.height > regionEnd;
+    if (start >= regionEnd || crossesBottom && fitsInAPage && start > regionStart) {
+      const nextStart = (page + 1) * stride;
+      const height = nextStart - start;
+      spacers.push({ beforeBlockIndex: index, heightPx: height });
+      added += height;
+      start = nextStart;
+    }
+    maxEnd = Math.max(maxEnd, start + block.height);
+  });
+  const pageCount = Math.max(1, Math.floor(Math.max(0, maxEnd - 1) / stride) + 1);
+  return { spacers, pageCount };
+}
+var PAGE_SPACER_ATTR = "data-page-spacer";
+function createSpacerElement(heightPx) {
+  const el = document.createElement("div");
+  el.setAttribute(PAGE_SPACER_ATTR, "true");
+  el.setAttribute("contenteditable", "false");
+  el.setAttribute("aria-hidden", "true");
+  el.style.height = `${heightPx}px`;
+  el.style.userSelect = "none";
+  el.style.pointerEvents = "none";
+  return el;
+}
+function stripPageSpacers(html) {
+  const tmp = document.createElement("div");
+  tmp.innerHTML = html;
+  tmp.querySelectorAll(`[${PAGE_SPACER_ATTR}]`).forEach((n) => n.remove());
+  return tmp.innerHTML;
+}
+// src/editorCommands.ts
+function execFormat(command, value) {
+  document.execCommand("styleWithCSS", false, "true");
+  document.execCommand(command, false, value);
+}
+function setFontSize(region, pt) {
+  document.execCommand("styleWithCSS", false, "false");
+  document.execCommand("fontSize", false, "7");
+  const marked = region.querySelectorAll('font[size="7"]');
+  marked.forEach((el) => {
+    el.removeAttribute("size");
+    el.style.fontSize = `${pt}pt`;
+  });
+}
+function setFontFamily(family) {
+  document.execCommand("styleWithCSS", false, "true");
+  document.execCommand("fontName", false, family);
+}
+function insertTextIntoRegion(region, text) {
+  region.focus();
+  const selection = window.getSelection();
+  const node = document.createTextNode(text);
+  if (selection && selection.rangeCount > 0 && selection.anchorNode && region.contains(selection.anchorNode)) {
+    const range = selection.getRangeAt(0);
+    range.deleteContents();
+    range.insertNode(node);
+    range.setStartAfter(node);
+    range.setEndAfter(node);
+    selection.removeAllRanges();
+    selection.addRange(range);
+  } else {
+    region.appendChild(node);
+  }
+}
+// src/docx/units.ts
+var TWIPS_PER_INCH = 1440;
+var PX_PER_INCH = 96;
+function pxToTwips(px) {
+  return Math.round(px / PX_PER_INCH * TWIPS_PER_INCH);
+}
+function twipsToPx(twips) {
+  return twips / TWIPS_PER_INCH * PX_PER_INCH;
+}
+// src/Toolbar.tsx
+import { useRef, useState } from "react";
+import {
+  Box,
+  Divider,
+  IconButton,
+  Menu,
+  MenuItem,
+  Select,
+  Tooltip,
+  Button,
+  Typography
+} from "@mui/material";
+import UndoIcon from "@mui/icons-material/Undo";
+import RedoIcon from "@mui/icons-material/Redo";
+import FormatBoldIcon from "@mui/icons-material/FormatBold";
+import FormatItalicIcon from "@mui/icons-material/FormatItalic";
+import FormatUnderlinedIcon from "@mui/icons-material/FormatUnderlined";
+import StrikethroughSIcon from "@mui/icons-material/StrikethroughS";
+import FormatColorTextIcon from "@mui/icons-material/FormatColorText";
+import BorderColorIcon from "@mui/icons-material/BorderColor";
+import LinkIcon from "@mui/icons-material/Link";
+import SuperscriptIcon from "@mui/icons-material/Superscript";
+import SubscriptIcon from "@mui/icons-material/Subscript";
+import FormatAlignLeftIcon from "@mui/icons-material/FormatAlignLeft";
+import FormatAlignCenterIcon from "@mui/icons-material/FormatAlignCenter";
+import FormatAlignRightIcon from "@mui/icons-material/FormatAlignRight";
+import FormatAlignJustifyIcon from "@mui/icons-material/FormatAlignJustify";
+import FormatListBulletedIcon from "@mui/icons-material/FormatListBulleted";
+import FormatListNumberedIcon from "@mui/icons-material/FormatListNumbered";
+import FormatIndentDecreaseIcon from "@mui/icons-material/FormatIndentDecrease";
+import FormatIndentIncreaseIcon from "@mui/icons-material/FormatIndentIncrease";
+import FormatClearIcon from "@mui/icons-material/FormatClear";
+import ImageIcon from "@mui/icons-material/Image";
+import DataObjectIcon from "@mui/icons-material/DataObject";
+import AddIcon from "@mui/icons-material/Add";
+import RemoveIcon from "@mui/icons-material/Remove";
+import { jsx, jsxs } from "react/jsx-runtime";
+var FONT_FAMILIES = [
+  "Arial",
+  "Times New Roman",
+  "Calibri",
+  "Courier New",
+  "Georgia",
+  "Verdana"
+];
+var BLOCK_FORMATS = [
+  { label: "Texto normal", tag: "P" },
+  { label: "T\xEDtulo 1", tag: "H1" },
+  { label: "T\xEDtulo 2", tag: "H2" },
+  { label: "T\xEDtulo 3", tag: "H3" }
+];
+function Toolbar(props) {
+  const [fontFamily, setFontFamilyState] = useState("Arial");
+  const [fontSize, setFontSizeState] = useState(11);
+  const [blockTag, setBlockTag] = useState("P");
+  const [varAnchor, setVarAnchor] = useState(null);
+  const colorInputRef = useRef(null);
+  const highlightInputRef = useRef(null);
+  const changeFontSize = (next) => {
+    const clamped = Math.min(96, Math.max(1, next));
+    setFontSizeState(clamped);
+    props.onFontSize(clamped);
+  };
+  return /* @__PURE__ */ jsxs(
+    Box,
+    {
+      sx: {
+        display: "flex",
+        alignItems: "center",
+        flexWrap: "wrap",
+        gap: 0.5,
+        px: 1,
+        py: 0.5,
+        borderBottom: 1,
+        borderColor: "divider",
+        bgcolor: "background.paper"
+      },
+      onMouseDown: (e) => e.preventDefault(),
+      children: [
+        /* @__PURE__ */ jsx(Tooltip, { title: "Desfazer", children: /* @__PURE__ */ jsx(IconButton, { size: "small", onClick: () => props.onCommand("undo"), children: /* @__PURE__ */ jsx(UndoIcon, { fontSize: "small" }) }) }),
+        /* @__PURE__ */ jsx(Tooltip, { title: "Refazer", children: /* @__PURE__ */ jsx(IconButton, { size: "small", onClick: () => props.onCommand("redo"), children: /* @__PURE__ */ jsx(RedoIcon, { fontSize: "small" }) }) }),
+        /* @__PURE__ */ jsx(Divider, { orientation: "vertical", flexItem: true, sx: { mx: 0.5 } }),
+        /* @__PURE__ */ jsx(
+          Select,
+          {
+            size: "small",
+            value: blockTag,
+            onChange: (e) => {
+              setBlockTag(e.target.value);
+              props.onFormatBlock(e.target.value);
+            },
+            sx: { minWidth: 130, height: 32 },
+            children: BLOCK_FORMATS.map((b) => /* @__PURE__ */ jsx(MenuItem, { value: b.tag, children: b.label }, b.tag))
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          Select,
+          {
+            size: "small",
+            value: fontFamily,
+            onChange: (e) => {
+              setFontFamilyState(e.target.value);
+              props.onFontFamily(e.target.value);
+            },
+            sx: { minWidth: 130, height: 32 },
+            children: FONT_FAMILIES.map((f) => /* @__PURE__ */ jsx(MenuItem, { value: f, style: { fontFamily: f }, children: f }, f))
+          }
+        ),
+        /* @__PURE__ */ jsxs(Box, { sx: { display: "flex", alignItems: "center" }, children: [
+          /* @__PURE__ */ jsx(Tooltip, { title: "Diminuir fonte", children: /* @__PURE__ */ jsx(IconButton, { size: "small", onClick: () => changeFontSize(fontSize - 1), children: /* @__PURE__ */ jsx(RemoveIcon, { fontSize: "small" }) }) }),
+          /* @__PURE__ */ jsx(
+            Typography,
+            {
+              component: "span",
+              sx: {
+                minWidth: 24,
+                textAlign: "center",
+                fontVariantNumeric: "tabular-nums"
+              },
+              children: fontSize
+            }
+          ),
+          /* @__PURE__ */ jsx(Tooltip, { title: "Aumentar fonte", children: /* @__PURE__ */ jsx(IconButton, { size: "small", onClick: () => changeFontSize(fontSize + 1), children: /* @__PURE__ */ jsx(AddIcon, { fontSize: "small" }) }) })
+        ] }),
+        /* @__PURE__ */ jsx(Divider, { orientation: "vertical", flexItem: true, sx: { mx: 0.5 } }),
+        /* @__PURE__ */ jsx(Tooltip, { title: "Negrito", children: /* @__PURE__ */ jsx(IconButton, { size: "small", onClick: () => props.onCommand("bold"), children: /* @__PURE__ */ jsx(FormatBoldIcon, { fontSize: "small" }) }) }),
+        /* @__PURE__ */ jsx(Tooltip, { title: "It\xE1lico", children: /* @__PURE__ */ jsx(IconButton, { size: "small", onClick: () => props.onCommand("italic"), children: /* @__PURE__ */ jsx(FormatItalicIcon, { fontSize: "small" }) }) }),
+        /* @__PURE__ */ jsx(Tooltip, { title: "Sublinhado", children: /* @__PURE__ */ jsx(IconButton, { size: "small", onClick: () => props.onCommand("underline"), children: /* @__PURE__ */ jsx(FormatUnderlinedIcon, { fontSize: "small" }) }) }),
+        /* @__PURE__ */ jsx(Tooltip, { title: "Tachado", children: /* @__PURE__ */ jsx(
+          IconButton,
+          {
+            size: "small",
+            onClick: () => props.onCommand("strikeThrough"),
+            children: /* @__PURE__ */ jsx(StrikethroughSIcon, { fontSize: "small" })
+          }
+        ) }),
+        /* @__PURE__ */ jsx(Tooltip, { title: "Cor do texto", children: /* @__PURE__ */ jsx(IconButton, { size: "small", onClick: () => colorInputRef.current?.click(), children: /* @__PURE__ */ jsx(FormatColorTextIcon, { fontSize: "small" }) }) }),
+        /* @__PURE__ */ jsx(
+          "input",
+          {
+            ref: colorInputRef,
+            type: "color",
+            "aria-label": "Cor do texto",
+            style: { display: "none" },
+            onChange: (e) => props.onColor(e.target.value)
+          }
+        ),
+        /* @__PURE__ */ jsx(Tooltip, { title: "Realce", children: /* @__PURE__ */ jsx(
+          IconButton,
+          {
+            size: "small",
+            onClick: () => highlightInputRef.current?.click(),
+            children: /* @__PURE__ */ jsx(BorderColorIcon, { fontSize: "small" })
+          }
+        ) }),
+        /* @__PURE__ */ jsx(
+          "input",
+          {
+            ref: highlightInputRef,
+            type: "color",
+            "aria-label": "Cor de realce",
+            style: { display: "none" },
+            onChange: (e) => props.onHighlight(e.target.value)
+          }
+        ),
+        /* @__PURE__ */ jsx(Tooltip, { title: "Inserir link", children: /* @__PURE__ */ jsx(IconButton, { size: "small", onClick: props.onLink, children: /* @__PURE__ */ jsx(LinkIcon, { fontSize: "small" }) }) }),
+        /* @__PURE__ */ jsx(Tooltip, { title: "Sobrescrito", children: /* @__PURE__ */ jsx(IconButton, { size: "small", onClick: () => props.onCommand("superscript"), children: /* @__PURE__ */ jsx(SuperscriptIcon, { fontSize: "small" }) }) }),
+        /* @__PURE__ */ jsx(Tooltip, { title: "Subscrito", children: /* @__PURE__ */ jsx(IconButton, { size: "small", onClick: () => props.onCommand("subscript"), children: /* @__PURE__ */ jsx(SubscriptIcon, { fontSize: "small" }) }) }),
+        /* @__PURE__ */ jsx(Divider, { orientation: "vertical", flexItem: true, sx: { mx: 0.5 } }),
+        /* @__PURE__ */ jsx(Tooltip, { title: "Alinhar \xE0 esquerda", children: /* @__PURE__ */ jsx(IconButton, { size: "small", onClick: () => props.onCommand("justifyLeft"), children: /* @__PURE__ */ jsx(FormatAlignLeftIcon, { fontSize: "small" }) }) }),
+        /* @__PURE__ */ jsx(Tooltip, { title: "Centralizar", children: /* @__PURE__ */ jsx(
+          IconButton,
+          {
+            size: "small",
+            onClick: () => props.onCommand("justifyCenter"),
+            children: /* @__PURE__ */ jsx(FormatAlignCenterIcon, { fontSize: "small" })
+          }
+        ) }),
+        /* @__PURE__ */ jsx(Tooltip, { title: "Alinhar \xE0 direita", children: /* @__PURE__ */ jsx(
+          IconButton,
+          {
+            size: "small",
+            onClick: () => props.onCommand("justifyRight"),
+            children: /* @__PURE__ */ jsx(FormatAlignRightIcon, { fontSize: "small" })
+          }
+        ) }),
+        /* @__PURE__ */ jsx(Tooltip, { title: "Justificar", children: /* @__PURE__ */ jsx(IconButton, { size: "small", onClick: () => props.onCommand("justifyFull"), children: /* @__PURE__ */ jsx(FormatAlignJustifyIcon, { fontSize: "small" }) }) }),
+        /* @__PURE__ */ jsx(Tooltip, { title: "Lista com marcadores", children: /* @__PURE__ */ jsx(
+          IconButton,
+          {
+            size: "small",
+            onClick: () => props.onCommand("insertUnorderedList"),
+            children: /* @__PURE__ */ jsx(FormatListBulletedIcon, { fontSize: "small" })
+          }
+        ) }),
+        /* @__PURE__ */ jsx(Tooltip, { title: "Lista numerada", children: /* @__PURE__ */ jsx(
+          IconButton,
+          {
+            size: "small",
+            onClick: () => props.onCommand("insertOrderedList"),
+            children: /* @__PURE__ */ jsx(FormatListNumberedIcon, { fontSize: "small" })
+          }
+        ) }),
+        /* @__PURE__ */ jsx(Tooltip, { title: "Diminuir recuo", children: /* @__PURE__ */ jsx(IconButton, { size: "small", onClick: () => props.onCommand("outdent"), children: /* @__PURE__ */ jsx(FormatIndentDecreaseIcon, { fontSize: "small" }) }) }),
+        /* @__PURE__ */ jsx(Tooltip, { title: "Aumentar recuo", children: /* @__PURE__ */ jsx(IconButton, { size: "small", onClick: () => props.onCommand("indent"), children: /* @__PURE__ */ jsx(FormatIndentIncreaseIcon, { fontSize: "small" }) }) }),
+        /* @__PURE__ */ jsx(Divider, { orientation: "vertical", flexItem: true, sx: { mx: 0.5 } }),
+        /* @__PURE__ */ jsx(Tooltip, { title: "Inserir imagem", children: /* @__PURE__ */ jsx(IconButton, { size: "small", onClick: props.onInsertImage, children: /* @__PURE__ */ jsx(ImageIcon, { fontSize: "small" }) }) }),
+        /* @__PURE__ */ jsx(Tooltip, { title: "Limpar formata\xE7\xE3o", children: /* @__PURE__ */ jsx(
+          IconButton,
+          {
+            size: "small",
+            onClick: () => props.onCommand("removeFormat"),
+            children: /* @__PURE__ */ jsx(FormatClearIcon, { fontSize: "small" })
+          }
+        ) }),
+        /* @__PURE__ */ jsx(
+          Button,
+          {
+            size: "small",
+            variant: "outlined",
+            startIcon: /* @__PURE__ */ jsx(DataObjectIcon, {}),
+            onClick: (e) => setVarAnchor(e.currentTarget),
+            sx: { ml: 0.5, textTransform: "none" },
+            children: "Vari\xE1vel"
+          }
+        ),
+        /* @__PURE__ */ jsxs(
+          Menu,
+          {
+            anchorEl: varAnchor,
+            open: Boolean(varAnchor),
+            onClose: () => setVarAnchor(null),
+            children: [
+              props.variables.map((name) => /* @__PURE__ */ jsx(
+                MenuItem,
+                {
+                  onClick: () => {
+                    props.onInsertVariable(name);
+                    setVarAnchor(null);
+                  },
+                  children: name
+                },
+                name
+              )),
+              props.variables.length > 0 && /* @__PURE__ */ jsx(Divider, {}),
+              /* @__PURE__ */ jsx(
+                MenuItem,
+                {
+                  onClick: () => {
+                    props.onInsertPageField("pageNumber");
+                    setVarAnchor(null);
+                  },
+                  children: "N\xBA da p\xE1gina"
+                }
+              ),
+              /* @__PURE__ */ jsx(
+                MenuItem,
+                {
+                  onClick: () => {
+                    props.onInsertPageField("totalPages");
+                    setVarAnchor(null);
+                  },
+                  children: "Total de p\xE1ginas"
+                }
+              )
+            ]
+          }
+        )
+      ]
+    }
+  );
+}
+var Toolbar_default = Toolbar;
+// src/ZoomControl.tsx
+import { Select as Select2, MenuItem as MenuItem2 } from "@mui/material";
+import { jsx as jsx2, jsxs as jsxs2 } from "react/jsx-runtime";
+var ZOOM_LEVELS = [0.5, 0.75, 0.9, 1, 1.25, 1.5, 2];
+function ZoomControl(props) {
+  return /* @__PURE__ */ jsx2(
+    Select2,
+    {
+      size: "small",
+      value: props.zoom,
+      onChange: (e) => props.onChange(Number(e.target.value)),
+      "aria-label": "Zoom",
+      sx: { height: 32, minWidth: 88 },
+      children: ZOOM_LEVELS.map((z) => /* @__PURE__ */ jsxs2(MenuItem2, { value: z, children: [
+        Math.round(z * 100),
+        "%"
+      ] }, z))
+    }
+  );
+}
+var ZoomControl_default = ZoomControl;
+// src/Ruler.tsx
+import { useCallback, useRef as useRef2 } from "react";
+import { Box as Box2 } from "@mui/material";
+import { jsx as jsx3, jsxs as jsxs3 } from "react/jsx-runtime";
+var RULER_HEIGHT = 24;
+function Ruler(props) {
+  const { pageWidthPx, zoom, margins, indent } = props;
+  const barRef = useRef2(null);
+  const scaledWidth = pageWidthPx * zoom;
+  const screenPxToTwips = useCallback(
+    (px) => pxToTwips(px / zoom),
+    [zoom]
+  );
+  const leftMarginPx = twipsToPx(margins.left) * zoom;
+  const rightMarginFromLeftPx = (pageWidthPx - twipsToPx(margins.right)) * zoom;
+  const firstLinePx = (twipsToPx(margins.left) + twipsToPx(indent.firstLine)) * zoom;
+  const leftIndentPx = (twipsToPx(margins.left) + twipsToPx(indent.left)) * zoom;
+  const rightIndentPx = (pageWidthPx - twipsToPx(margins.right) - twipsToPx(indent.right)) * zoom;
+  const startDrag = (kind) => (e) => {
+    e.preventDefault();
+    const bar = barRef.current;
+    if (!bar) return;
+    const onMove = (ev) => {
+      const rect = bar.getBoundingClientRect();
+      const x = Math.min(Math.max(ev.clientX - rect.left, 0), scaledWidth);
+      const twipsFromLeft = screenPxToTwips(x);
+      const pageWidthTwips = pxToTwips(pageWidthPx);
+      switch (kind) {
+        case "leftMargin": {
+          const left = Math.min(twipsFromLeft, pageWidthTwips - margins.right - 720);
+          props.onMarginsChange({ ...margins, left: Math.max(0, left) });
+          break;
+        }
+        case "rightMargin": {
+          const right = Math.min(
+            pageWidthTwips - twipsFromLeft,
+            pageWidthTwips - margins.left - 720
+          );
+          props.onMarginsChange({ ...margins, right: Math.max(0, right) });
+          break;
+        }
+        case "firstLineIndent": {
+          props.onIndentChange({
+            ...indent,
+            firstLine: Math.max(0, twipsFromLeft - margins.left)
+          });
+          break;
+        }
+        case "leftIndent": {
+          props.onIndentChange({
+            ...indent,
+            left: Math.max(0, twipsFromLeft - margins.left)
+          });
+          break;
+        }
+        case "rightIndent": {
+          props.onIndentChange({
+            ...indent,
+            right: Math.max(0, pageWidthTwips - margins.right - twipsFromLeft)
+          });
+          break;
+        }
+      }
+    };
+    const onUp = () => {
+      window.removeEventListener("mousemove", onMove);
+      window.removeEventListener("mouseup", onUp);
+    };
+    window.addEventListener("mousemove", onMove);
+    window.addEventListener("mouseup", onUp);
+  };
+  const ticks = [];
+  const inches = Math.floor(pageWidthPx / PX_PER_INCH);
+  for (let i = 0; i <= inches; i++) {
+    ticks.push(
+      /* @__PURE__ */ jsx3(
+        Box2,
+        {
+          sx: {
+            position: "absolute",
+            left: i * PX_PER_INCH * zoom,
+            top: 0,
+            bottom: 0,
+            borderLeft: "1px solid",
+            borderColor: "text.disabled",
+            fontSize: 9,
+            color: "text.secondary",
+            pl: "2px"
+          },
+          children: i
+        },
+        i
+      )
+    );
+  }
+  const marginHandleSx = {
+    position: "absolute",
+    top: 0,
+    width: 8,
+    height: RULER_HEIGHT,
+    cursor: "ew-resize",
+    bgcolor: "primary.main",
+    opacity: 0.6,
+    transform: "translateX(-50%)",
+    "&:hover": { opacity: 1 }
+  };
+  const indentHandleSx = {
+    position: "absolute",
+    width: 0,
+    height: 0,
+    cursor: "ew-resize",
+    borderLeft: "6px solid transparent",
+    borderRight: "6px solid transparent",
+    transform: "translateX(-50%)"
+  };
+  return /* @__PURE__ */ jsxs3(
+    Box2,
+    {
+      ref: barRef,
+      sx: {
+        position: "relative",
+        height: RULER_HEIGHT,
+        width: scaledWidth,
+        bgcolor: "grey.100",
+        borderBottom: 1,
+        borderColor: "divider",
+        userSelect: "none",
+        mx: "auto"
+      },
+      role: "presentation",
+      "aria-label": "R\xE9gua",
+      children: [
+        ticks,
+        /* @__PURE__ */ jsx3(
+          Box2,
+          {
+            sx: {
+              position: "absolute",
+              left: 0,
+              top: 0,
+              bottom: 0,
+              width: leftMarginPx,
+              bgcolor: "grey.300",
+              opacity: 0.5
+            }
+          }
+        ),
+        /* @__PURE__ */ jsx3(
+          Box2,
+          {
+            sx: {
+              position: "absolute",
+              left: rightMarginFromLeftPx,
+              right: 0,
+              top: 0,
+              bottom: 0,
+              bgcolor: "grey.300",
+              opacity: 0.5
+            }
+          }
+        ),
+        /* @__PURE__ */ jsx3(
+          Box2,
+          {
+            sx: { ...marginHandleSx, left: leftMarginPx },
+            onMouseDown: startDrag("leftMargin"),
+            "aria-label": "Margem esquerda"
+          }
+        ),
+        /* @__PURE__ */ jsx3(
+          Box2,
+          {
+            sx: { ...marginHandleSx, left: rightMarginFromLeftPx },
+            onMouseDown: startDrag("rightMargin"),
+            "aria-label": "Margem direita"
+          }
+        ),
+        /* @__PURE__ */ jsx3(
+          Box2,
+          {
+            sx: {
+              ...indentHandleSx,
+              left: firstLinePx,
+              top: 0,
+              borderTop: "7px solid",
+              borderTopColor: "primary.dark"
+            },
+            onMouseDown: startDrag("firstLineIndent"),
+            "aria-label": "Recuo da primeira linha"
+          }
+        ),
+        /* @__PURE__ */ jsx3(
+          Box2,
+          {
+            sx: {
+              ...indentHandleSx,
+              left: leftIndentPx,
+              bottom: 0,
+              borderBottom: "7px solid",
+              borderBottomColor: "primary.dark"
+            },
+            onMouseDown: startDrag("leftIndent"),
+            "aria-label": "Recuo \xE0 esquerda"
+          }
+        ),
+        /* @__PURE__ */ jsx3(
+          Box2,
+          {
+            sx: {
+              ...indentHandleSx,
+              left: rightIndentPx,
+              bottom: 0,
+              borderBottom: "7px solid",
+              borderBottomColor: "primary.dark"
+            },
+            onMouseDown: startDrag("rightIndent"),
+            "aria-label": "Recuo \xE0 direita"
+          }
+        )
+      ]
+    }
+  );
+}
+var Ruler_default = Ruler;
+// src/DocxEditor.tsx
+import { Fragment, jsx as jsx4, jsxs as jsxs4 } from "react/jsx-runtime";
+var PAGE_WIDTH_PX = 794;
+var PAGE_HEIGHT_PX = 1123;
+var PAGE_GAP_PX = 24;
+var HEADER_FOOTER_DISTANCE_PX = 48;
+var EMPTY_INDENT = { firstLine: 0, left: 0, right: 0 };
+function EditableRegion(props) {
+  const setRef = (el) => {
+    if (el && el.dataset.initialized !== "1") {
+      el.innerHTML = props.html;
+      el.dataset.initialized = "1";
+    }
+    props.onRegister(el);
+  };
+  return /* @__PURE__ */ jsx4(
+    Box3,
+    {
+      component: "div",
+      ref: setRef,
+      contentEditable: props.editable,
+      suppressContentEditableWarning: true,
+      onFocus: (e) => props.onFocus(e.currentTarget),
+      onBlur: props.onBlur,
+      onInput: props.onInput,
+      "aria-label": props.ariaLabel,
+      "data-placeholder": props.placeholder,
+      sx: [
+        {
+          outline: "none",
+          position: "relative",
+          minHeight: 24,
+          "& p": { m: 0, mb: 1 },
+          "&:empty::before": {
+            content: "attr(data-placeholder)",
+            color: "text.disabled"
+          }
+        },
+        ...Array.isArray(props.sx) ? props.sx : props.sx ? [props.sx] : []
+      ]
+    }
+  );
+}
+function currentBlock(region) {
+  if (!region) return null;
+  const selection = window.getSelection();
+  let node = selection && selection.anchorNode ? selection.anchorNode : null;
+  if (!node || !region.contains(node)) {
+    return region.firstElementChild ?? region;
+  }
+  let el = node.nodeType === Node.ELEMENT_NODE ? node : node.parentElement;
+  while (el && el !== region) {
+    if (/^(P|H1|H2|H3|H4|LI|DIV)$/.test(el.tagName) && el.parentElement === region) {
+      return el;
+    }
+    if (el.parentElement === region) return el;
+    el = el.parentElement;
+  }
+  return region.firstElementChild ?? region;
+}
+var mirrorSx = {
+  pointerEvents: "none",
+  "& p": { m: 0, mb: 1 }
+};
+function withPagePreview(html, pageNumber, totalPages) {
+  return html.split(PAGE_NUMBER_TOKEN).join(String(pageNumber)).split(TOTAL_PAGES_TOKEN).join(String(totalPages));
+}
+var RESIZE_CORNERS = ["nw", "ne", "sw", "se"];
+var DocxEditor = forwardRef(
+  function DocxEditor2(props, ref) {
+    const {
+      documentBuffer,
+      document: documentModel,
+      mode,
+      showToolbar = false,
+      showRuler = false,
+      showZoomControl = false
+    } = props;
+    const editable = mode === "editing";
+    const [model, setModel] = useState2(
+      () => documentModel ?? { body: "" }
+    );
+    const [docVersion, setDocVersion] = useState2(0);
+    const [loading, setLoading] = useState2(false);
+    const [zoom, setZoom] = useState2(1);
+    const [margins, setMargins] = useState2(DEFAULT_MARGINS);
+    const [indent, setIndent] = useState2(EMPTY_INDENT);
+    const [pageCount, setPageCount] = useState2(1);
+    const [mirror, setMirror] = useState2(() => ({
+      header: documentModel?.header ?? "",
+      footer: documentModel?.footer ?? ""
+    }));
+    const [chromeHeights, setChromeHeights] = useState2({ header: 0, footer: 0 });
+    const [focusedRegion, setFocusedRegion] = useState2(null);
+    const [selectedImg, setSelectedImg] = useState2(null);
+    const [frame, setFrame] = useState2(null);
+    const regionEls = useRef3({});
+    const activeRegion = useRef3(null);
+    const imageInputRef = useRef3(null);
+    const rafId = useRef3(null);
+    const pagesColumnRef = useRef3(null);
+    const padTop = twipsToPx(margins.top);
+    const padRight = twipsToPx(margins.right);
+    const padBottom = twipsToPx(margins.bottom);
+    const padLeft = twipsToPx(margins.left);
+    const bodyTopPx = Math.max(
+      padTop,
+      HEADER_FOOTER_DISTANCE_PX + chromeHeights.header
+    );
+    const bodyBottomPx = Math.max(
+      padBottom,
+      HEADER_FOOTER_DISTANCE_PX + chromeHeights.footer
+    );
+    const recomputePagination = useCallback2(() => {
+      const body = regionEls.current.body;
+      if (!body) return;
+      const headerH = regionEls.current.header?.offsetHeight ?? 0;
+      const footerH = regionEls.current.footer?.offsetHeight ?? 0;
+      setChromeHeights(
+        (prev) => prev.header === headerH && prev.footer === footerH ? prev : { header: headerH, footer: footerH }
+      );
+      const top = Math.max(
+        twipsToPx(margins.top),
+        HEADER_FOOTER_DISTANCE_PX + headerH
+      );
+      const bottom = Math.max(
+        twipsToPx(margins.bottom),
+        HEADER_FOOTER_DISTANCE_PX + footerH
+      );
+      const usableHeightPx = Math.max(PAGE_HEIGHT_PX - top - bottom, 1);
+      const interPageGapPx = bottom + PAGE_GAP_PX + top;
+      let spacerAccum = 0;
+      const blocks = [];
+      const blockEls = [];
+      Array.from(body.children).forEach((child) => {
+        const el = child;
+        if (el.hasAttribute(PAGE_SPACER_ATTR)) {
+          spacerAccum += el.offsetHeight;
+          return;
+        }
+        blocks.push({ top: el.offsetTop - spacerAccum, height: el.offsetHeight });
+        blockEls.push(el);
+      });
+      const layout = computePageLayout(blocks, { usableHeightPx, interPageGapPx });
+      body.querySelectorAll(`[${PAGE_SPACER_ATTR}]`).forEach((node) => node.remove());
+      for (const spacer of layout.spacers) {
+        const target = blockEls[spacer.beforeBlockIndex];
+        if (target) body.insertBefore(createSpacerElement(spacer.heightPx), target);
+      }
+      setPageCount(layout.pageCount);
+    }, [margins]);
+    const schedulePagination = useCallback2(() => {
+      if (rafId.current !== null) cancelAnimationFrame(rafId.current);
+      rafId.current = requestAnimationFrame(() => {
+        rafId.current = null;
+        recomputePagination();
+      });
+    }, [recomputePagination]);
+    const handleContentChanged = useCallback2(() => {
+      const header = regionEls.current.header?.innerHTML ?? "";
+      const footer = regionEls.current.footer?.innerHTML ?? "";
+      setMirror(
+        (prev) => prev.header === header && prev.footer === footer ? prev : { header, footer }
+      );
+      schedulePagination();
+    }, [schedulePagination]);
+    useEffect(() => {
+      if (!documentBuffer) return;
+      let cancelled = false;
+      setLoading(true);
+      bufferToModel(documentBuffer).then((imported) => {
+        if (cancelled) return;
+        setModel((prev) => ({ ...imported, variables: prev.variables }));
+        setMirror({
+          header: imported.header ?? "",
+          footer: imported.footer ?? ""
+        });
+        setDocVersion((v) => v + 1);
+      }).finally(() => {
+        if (!cancelled) setLoading(false);
+      });
+      return () => {
+        cancelled = true;
+      };
+    }, [documentBuffer]);
+    useEffect(() => {
+      recomputePagination();
+    }, [recomputePagination, docVersion, mirror]);
+    useEffect(() => {
+      const body = regionEls.current.body;
+      if (!body) return;
+      const onLoad = () => schedulePagination();
+      body.addEventListener("load", onLoad, true);
+      return () => body.removeEventListener("load", onLoad, true);
+    }, [schedulePagination, docVersion]);
+    useEffect(
+      () => () => {
+        if (rafId.current !== null) cancelAnimationFrame(rafId.current);
+      },
+      []
+    );
+    const buildModel = useCallback2(() => {
+      const els = regionEls.current;
+      return {
+        header: els.header ? els.header.innerHTML : model.header,
+        body: els.body ? stripPageSpacers(els.body.innerHTML) : model.body,
+        footer: els.footer ? els.footer.innerHTML : model.footer,
+        variables: model.variables
+      };
+    }, [model]);
+    useImperativeHandle(
+      ref,
+      () => ({
+        save: () => modelToDocx(buildModel(), { margins }),
+        getModel: () => buildModel()
+      }),
+      [buildModel, margins]
+    );
+    const focusActive = () => {
+      const el = activeRegion.current ?? regionEls.current.body ?? null;
+      el?.focus();
+      return el;
+    };
+    const handleCommand = (command, value) => {
+      focusActive();
+      execFormat(command, value);
+      handleContentChanged();
+    };
+    const handleLink = () => {
+      const url = window.prompt("URL do link:");
+      if (!url) return;
+      focusActive();
+      execFormat("createLink", url);
+      handleContentChanged();
+    };
+    const handleInsertImage = () => imageInputRef.current?.click();
+    const onImagePicked = (e) => {
+      const file = e.target.files?.[0];
+      if (!file) return;
+      const reader = new FileReader();
+      reader.onload = () => {
+        focusActive();
+        execFormat("insertImage", String(reader.result));
+        handleContentChanged();
+      };
+      reader.readAsDataURL(file);
+      e.target.value = "";
+    };
+    const handleInsertVariable = (name) => {
+      const el = activeRegion.current ?? regionEls.current.body ?? null;
+      if (el) {
+        insertTextIntoRegion(el, `{{${name}}}`);
+        handleContentChanged();
+      }
+    };
+    const handleInsertPageField = (field) => {
+      const el = activeRegion.current ?? regionEls.current.footer ?? null;
+      if (el) {
+        insertTextIntoRegion(
+          el,
+          field === "pageNumber" ? PAGE_NUMBER_TOKEN : TOTAL_PAGES_TOKEN
+        );
+        handleContentChanged();
+      }
+    };
+    const applyIndent = (next) => {
+      setIndent(next);
+      const block = currentBlock(activeRegion.current ?? regionEls.current.body ?? null);
+      if (block) {
+        block.style.textIndent = `${twipsToPx(next.firstLine)}px`;
+        block.style.marginLeft = `${twipsToPx(next.left)}px`;
+        block.style.marginRight = `${twipsToPx(next.right)}px`;
+      }
+      schedulePagination();
+    };
+    const registerRegion = (key) => (el) => {
+      regionEls.current[key] = el;
+    };
+    const onRegionFocus = (el) => {
+      activeRegion.current = el;
+      const els = regionEls.current;
+      setFocusedRegion(
+        el === els.header ? "header" : el === els.footer ? "footer" : "body"
+      );
+    };
+    const onRegionBlur = () => setFocusedRegion(null);
+    const editingChrome = focusedRegion === "header" || focusedRegion === "footer";
+    const updateFrame = useCallback2(() => {
+      const img = selectedImg;
+      const column = pagesColumnRef.current;
+      if (!img || !img.isConnected || !column) {
+        setFrame(null);
+        return;
+      }
+      const imgRect = img.getBoundingClientRect();
+      const colRect = column.getBoundingClientRect();
+      setFrame({
+        top: (imgRect.top - colRect.top) / zoom,
+        left: (imgRect.left - colRect.left) / zoom,
+        width: imgRect.width / zoom,
+        height: imgRect.height / zoom
+      });
+    }, [selectedImg, zoom]);
+    const updateFrameRef = useRef3(updateFrame);
+    useEffect(() => {
+      updateFrameRef.current = updateFrame;
+    });
+    useEffect(() => {
+      updateFrame();
+    }, [updateFrame, pageCount, margins, mirror]);
+    useEffect(() => {
+      setSelectedImg(null);
+    }, [docVersion]);
+    const handleColumnClick = (e) => {
+      if (!editable) return;
+      const target = e.target;
+      if (target instanceof HTMLImageElement && target.closest("[contenteditable]")) {
+        setSelectedImg(target);
+      } else {
+        setSelectedImg(null);
+      }
+    };
+    const startResize = (corner) => (e) => {
+      const img = selectedImg;
+      if (!img) return;
+      e.preventDefault();
+      e.stopPropagation();
+      const startX = e.clientX;
+      const startWidth = img.offsetWidth;
+      const region = img.closest("[contenteditable]");
+      const maxWidth = region ? region.clientWidth : PAGE_WIDTH_PX;
+      const sign = corner === "ne" || corner === "se" ? 1 : -1;
+      const onMove = (ev) => {
+        const dx = (ev.clientX - startX) / zoom * sign;
+        const next = Math.round(Math.min(maxWidth, Math.max(20, startWidth + dx)));
+        img.style.width = `${next}px`;
+        img.style.height = "auto";
+        updateFrameRef.current();
+      };
+      const onUp = () => {
+        document.removeEventListener("mousemove", onMove);
+        document.removeEventListener("mouseup", onUp);
+        img.style.height = `${img.offsetHeight}px`;
+        handleContentChanged();
+        updateFrameRef.current();
+      };
+      document.addEventListener("mousemove", onMove);
+      document.addEventListener("mouseup", onUp);
+    };
+    const columnHeight = pageCount * PAGE_HEIGHT_PX + (pageCount - 1) * PAGE_GAP_PX;
+    const usableFirstPagePx = Math.max(
+      PAGE_HEIGHT_PX - bodyTopPx - bodyBottomPx,
+      24
+    );
+    return /* @__PURE__ */ jsxs4(
+      Box3,
+      {
+        sx: {
+          display: "flex",
+          flexDirection: "column",
+          height: "100%",
+          bgcolor: "grey.200"
+        },
+        children: [
+          showToolbar && /* @__PURE__ */ jsxs4(
+            Box3,
+            {
+              sx: {
+                display: "flex",
+                alignItems: "center",
+                gap: 1,
+                flexWrap: "wrap",
+                position: "sticky",
+                top: 0,
+                zIndex: 4
+              },
+              children: [
+                /* @__PURE__ */ jsx4(Box3, { sx: { flex: 1, minWidth: 0 }, children: /* @__PURE__ */ jsx4(
+                  Toolbar_default,
+                  {
+                    variables: model.variables ?? [],
+                    onCommand: handleCommand,
+                    onFontFamily: (f) => {
+                      focusActive();
+                      setFontFamily(f);
+                      handleContentChanged();
+                    },
+                    onFontSize: (pt) => {
+                      const el = focusActive();
+                      if (el) setFontSize(el, pt);
+                      handleContentChanged();
+                    },
+                    onFormatBlock: (tag) => handleCommand("formatBlock", tag),
+                    onColor: (c) => handleCommand("foreColor", c),
+                    onHighlight: (c) => handleCommand("hiliteColor", c),
+                    onLink: handleLink,
+                    onInsertImage: handleInsertImage,
+                    onInsertVariable: handleInsertVariable,
+                    onInsertPageField: handleInsertPageField
+                  }
+                ) }),
+                showZoomControl && /* @__PURE__ */ jsx4(Box3, { sx: { px: 1 }, children: /* @__PURE__ */ jsx4(ZoomControl_default, { zoom, onChange: setZoom }) })
+              ]
+            }
+          ),
+          /* @__PURE__ */ jsx4(
+            "input",
+            {
+              ref: imageInputRef,
+              type: "file",
+              accept: "image/*",
+              style: { display: "none" },
+              onChange: onImagePicked
+            }
+          ),
+          /* @__PURE__ */ jsxs4(Box3, { sx: { flex: 1, overflow: "auto", py: 3 }, children: [
+            showRuler && /* @__PURE__ */ jsx4(Box3, { sx: { display: "flex", justifyContent: "center", mb: 1 }, children: /* @__PURE__ */ jsx4(
+              Ruler_default,
+              {
+                pageWidthPx: PAGE_WIDTH_PX,
+                zoom,
+                margins,
+                indent,
+                onMarginsChange: setMargins,
+                onIndentChange: applyIndent
+              }
+            ) }),
+            /* @__PURE__ */ jsxs4(
+              Box3,
+              {
+                ref: pagesColumnRef,
+                onClick: handleColumnClick,
+                sx: {
+                  width: PAGE_WIDTH_PX,
+                  height: columnHeight,
+                  transform: `scale(${zoom})`,
+                  transformOrigin: "top center",
+                  mx: "auto",
+                  position: "relative"
+                },
+                children: [
+                  Array.from({ length: pageCount }, (_, page) => /* @__PURE__ */ jsx4(
+                    Box3,
+                    {
+                      "data-page-index": page,
+                      sx: {
+                        position: "absolute",
+                        top: page * (PAGE_HEIGHT_PX + PAGE_GAP_PX),
+                        left: 0,
+                        width: "100%",
+                        height: PAGE_HEIGHT_PX,
+                        bgcolor: "background.paper",
+                        boxShadow: 3,
+                        zIndex: 0
+                      },
+                      children: page > 0 && /* @__PURE__ */ jsxs4(Fragment, { children: [
+                        /* @__PURE__ */ jsx4(
+                          Box3,
+                          {
+                            "aria-hidden": true,
+                            sx: {
+                              ...mirrorSx,
+                              position: "absolute",
+                              top: HEADER_FOOTER_DISTANCE_PX,
+                              left: padLeft,
+                              right: padRight,
+                              zIndex: 2,
+                              opacity: focusedRegion === "body" ? 0.55 : 1,
+                              transition: "opacity 120ms"
+                            },
+                            dangerouslySetInnerHTML: {
+                              __html: withPagePreview(mirror.header, page + 1, pageCount)
+                            }
+                          }
+                        ),
+                        /* @__PURE__ */ jsx4(
+                          Box3,
+                          {
+                            "aria-hidden": true,
+                            sx: {
+                              ...mirrorSx,
+                              position: "absolute",
+                              bottom: HEADER_FOOTER_DISTANCE_PX,
+                              left: padLeft,
+                              right: padRight,
+                              zIndex: 2,
+                              opacity: focusedRegion === "body" ? 0.55 : 1,
+                              transition: "opacity 120ms"
+                            },
+                            dangerouslySetInnerHTML: {
+                              __html: withPagePreview(mirror.footer, page + 1, pageCount)
+                            }
+                          }
+                        )
+                      ] })
+                    },
+                    page
+                  )),
+                  /* @__PURE__ */ jsxs4(
+                    Box3,
+                    {
+                      sx: {
+                        position: "absolute",
+                        top: 0,
+                        left: 0,
+                        width: "100%",
+                        height: PAGE_HEIGHT_PX,
+                        zIndex: 2,
+                        pointerEvents: "none"
+                      },
+                      children: [
+                        /* @__PURE__ */ jsxs4(
+                          Box3,
+                          {
+                            sx: {
+                              position: "absolute",
+                              top: HEADER_FOOTER_DISTANCE_PX,
+                              left: padLeft,
+                              right: padRight,
+                              pointerEvents: "auto",
+                              opacity: focusedRegion === "body" ? 0.55 : 1,
+                              transition: "opacity 120ms",
+                              ...focusedRegion === "header" && {
+                                outline: "1px dashed",
+                                outlineColor: "primary.main",
+                                outlineOffset: "4px"
+                              }
+                            },
+                            children: [
+                              focusedRegion === "header" && /* @__PURE__ */ jsx4(
+                                Chip,
+                                {
+                                  label: "Cabe\xE7alho",
+                                  size: "small",
+                                  color: "primary",
+                                  sx: {
+                                    position: "absolute",
+                                    top: -32,
+                                    left: -4,
+                                    borderRadius: 0.5,
+                                    pointerEvents: "none"
+                                  }
+                                }
+                              ),
+                              /* @__PURE__ */ jsx4(
+                                EditableRegion,
+                                {
+                                  html: model.header ?? "",
+                                  editable,
+                                  ariaLabel: "Cabe\xE7alho",
+                                  placeholder: "Cabe\xE7alho (opcional)",
+                                  onRegister: registerRegion("header"),
+                                  onFocus: onRegionFocus,
+                                  onBlur: onRegionBlur,
+                                  onInput: handleContentChanged
+                                },
+                                `header-${docVersion}`
+                              )
+                            ]
+                          }
+                        ),
+                        /* @__PURE__ */ jsxs4(
+                          Box3,
+                          {
+                            sx: {
+                              position: "absolute",
+                              bottom: HEADER_FOOTER_DISTANCE_PX,
+                              left: padLeft,
+                              right: padRight,
+                              pointerEvents: "auto",
+                              opacity: focusedRegion === "body" ? 0.55 : 1,
+                              transition: "opacity 120ms",
+                              ...focusedRegion === "footer" && {
+                                outline: "1px dashed",
+                                outlineColor: "primary.main",
+                                outlineOffset: "4px"
+                              }
+                            },
+                            children: [
+                              focusedRegion === "footer" && /* @__PURE__ */ jsx4(
+                                Chip,
+                                {
+                                  label: "Rodap\xE9",
+                                  size: "small",
+                                  color: "primary",
+                                  sx: {
+                                    position: "absolute",
+                                    bottom: -32,
+                                    left: -4,
+                                    borderRadius: 0.5,
+                                    pointerEvents: "none"
+                                  }
+                                }
+                              ),
+                              /* @__PURE__ */ jsx4(
+                                EditableRegion,
+                                {
+                                  html: model.footer ?? "",
+                                  editable,
+                                  ariaLabel: "Rodap\xE9",
+                                  placeholder: "Rodap\xE9 (opcional)",
+                                  onRegister: registerRegion("footer"),
+                                  onFocus: onRegionFocus,
+                                  onBlur: onRegionBlur,
+                                  onInput: handleContentChanged
+                                },
+                                `footer-${docVersion}`
+                              )
+                            ]
+                          }
+                        )
+                      ]
+                    }
+                  ),
+                  /* @__PURE__ */ jsx4(
+                    Box3,
+                    {
+                      sx: {
+                        position: "absolute",
+                        top: bodyTopPx,
+                        left: padLeft,
+                        width: PAGE_WIDTH_PX - padLeft - padRight,
+                        zIndex: 1,
+                        opacity: editingChrome ? 0.45 : 1,
+                        transition: "opacity 120ms"
+                      },
+                      children: /* @__PURE__ */ jsx4(
+                        EditableRegion,
+                        {
+                          html: model.body,
+                          editable,
+                          ariaLabel: "Corpo do documento",
+                          placeholder: "Digite o conte\xFAdo do template\u2026",
+                          sx: { minHeight: usableFirstPagePx },
+                          onRegister: registerRegion("body"),
+                          onFocus: onRegionFocus,
+                          onBlur: onRegionBlur,
+                          onInput: handleContentChanged
+                        },
+                        `body-${docVersion}`
+                      )
+                    }
+                  ),
+                  editable && selectedImg && frame && /* @__PURE__ */ jsx4(
+                    Box3,
+                    {
+                      "data-testid": "image-resize-frame",
+                      sx: {
+                        position: "absolute",
+                        top: frame.top,
+                        left: frame.left,
+                        width: frame.width,
+                        height: frame.height,
+                        border: "1px solid",
+                        borderColor: "primary.main",
+                        zIndex: 3,
+                        pointerEvents: "none"
+                      },
+                      children: RESIZE_CORNERS.map((corner) => /* @__PURE__ */ jsx4(
+                        Box3,
+                        {
+                          "data-testid": "image-resize-handle",
+                          onMouseDown: startResize(corner),
+                          sx: {
+                            position: "absolute",
+                            width: 10,
+                            height: 10,
+                            bgcolor: "primary.main",
+                            border: "1px solid #fff",
+                            pointerEvents: "auto",
+                            cursor: corner === "nw" || corner === "se" ? "nwse-resize" : "nesw-resize",
+                            top: corner.startsWith("n") ? -5 : "auto",
+                            bottom: corner.startsWith("s") ? -5 : "auto",
+                            left: corner.endsWith("w") ? -5 : "auto",
+                            right: corner.endsWith("e") ? -5 : "auto"
+                          }
+                        },
+                        corner
+                      ))
+                    }
+                  ),
+                  loading && /* @__PURE__ */ jsx4(
+                    Box3,
+                    {
+                      sx: {
+                        position: "absolute",
+                        inset: 0,
+                        display: "flex",
+                        alignItems: "center",
+                        justifyContent: "center",
+                        bgcolor: "rgba(255,255,255,0.6)",
+                        zIndex: 3
+                      },
+                      children: /* @__PURE__ */ jsx4(CircularProgress, {})
+                    }
+                  )
+                ]
+              }
+            )
+          ] })
+        ]
+      }
+    );
+  }
+);
+var DocxEditor_default = DocxEditor;
+export {
+  DocxEditor_default as DocxEditor
+};
+//# sourceMappingURL=index.mjs.map