@harbour-enterprises/superdoc 1.3.0-next.9 → 1.3.0

package/dist/chunks/{index-CqzJ4gdV.cjs → index-CL5NVKmk.cjs}

@@ -1,7 +1,7 @@
 "use strict";
 const jszip = require("./jszip-C8_CqJxM.cjs");
 const helpers$1 = require("./helpers-nOdwpmwb.cjs");
-const superEditor_converter = require("./SuperConverter-BuhT_Z5G.cjs");
+const superEditor_converter = require("./SuperConverter-BJ-tba6U.cjs");
 const vue = require("./vue-De9wkgLl.cjs");
 require("./jszip.min-BPh2MMAa.cjs");
 const eventemitter3 = require("./eventemitter3-BQuRcMPI.cjs");
@@ -10953,6 +10953,105 @@ const setSectionHeaderFooterAtSelection = ({ headerInches, footerInches } = {})
   tr.setNodeMarkup(pos, void 0, nextAttrs, node.marks);
   return true;
 };
+function findGoverningSectPrParagraph(doc2, selectionPos) {
+  const candidates = [];
+  doc2.descendants((node, nodePos) => {
+    if (node.type?.name === "paragraph" && node.attrs?.paragraphProperties?.sectPr) {
+      candidates.push({ node, pos: nodePos });
+    }
+  });
+  if (!candidates.length) return null;
+  const inside = candidates.find((c2) => selectionPos >= c2.pos && selectionPos < c2.pos + c2.node.nodeSize);
+  if (inside) return inside;
+  const atOrAfter = candidates.find((c2) => c2.pos >= selectionPos);
+  return atOrAfter ?? candidates[candidates.length - 1];
+}
+const setSectionPageMarginsAtSelection = ({ topInches, rightInches, bottomInches, leftInches } = {}) => ({ tr, state, editor }) => {
+  if (!state || !editor) {
+    console.warn("[setSectionPageMarginsAtSelection] Missing state or editor");
+    return false;
+  }
+  const hasTop = typeof topInches === "number";
+  const hasRight = typeof rightInches === "number";
+  const hasBottom = typeof bottomInches === "number";
+  const hasLeft = typeof leftInches === "number";
+  if (!hasTop && !hasRight && !hasBottom && !hasLeft) {
+    console.warn("[setSectionPageMarginsAtSelection] No margin values provided");
+    return false;
+  }
+  if (hasTop && topInches < 0 || hasRight && rightInches < 0 || hasBottom && bottomInches < 0 || hasLeft && leftInches < 0) {
+    console.warn("[setSectionPageMarginsAtSelection] Margin values must be >= 0");
+    return false;
+  }
+  const updates = {};
+  if (hasTop) updates.topInches = topInches;
+  if (hasRight) updates.rightInches = rightInches;
+  if (hasBottom) updates.bottomInches = bottomInches;
+  if (hasLeft) updates.leftInches = leftInches;
+  const { from: from3 } = state.selection;
+  const governing = findGoverningSectPrParagraph(state.doc, from3);
+  if (governing) {
+    const { node, pos } = governing;
+    const paraProps = node.attrs?.paragraphProperties || null;
+    const existingSectPr = paraProps?.sectPr || null;
+    if (!existingSectPr) {
+      console.warn("[setSectionPageMarginsAtSelection] Paragraph found but has no sectPr");
+      return false;
+    }
+    const sectPr2 = JSON.parse(JSON.stringify(existingSectPr));
+    try {
+      updateSectionMargins({ type: "sectPr", sectPr: sectPr2 }, updates);
+    } catch (err) {
+      console.error("[setSectionPageMarginsAtSelection] Failed to update sectPr:", err);
+      return false;
+    }
+    const resolved = getSectPrMargins(sectPr2);
+    const normalizedSectionMargins = {
+      top: resolved.top ?? null,
+      right: resolved.right ?? null,
+      bottom: resolved.bottom ?? null,
+      left: resolved.left ?? null,
+      header: resolved.header ?? null,
+      footer: resolved.footer ?? null
+    };
+    const newParagraphProperties = { ...paraProps || {}, sectPr: sectPr2 };
+    const nextAttrs = {
+      ...node.attrs,
+      paragraphProperties: newParagraphProperties,
+      sectionMargins: normalizedSectionMargins
+    };
+    tr.setNodeMarkup(pos, void 0, nextAttrs, node.marks);
+    tr.setMeta("forceUpdatePagination", true);
+    return true;
+  }
+  const docAttrs = state.doc.attrs ?? {};
+  const converter = editor.converter ?? null;
+  const baseBodySectPr = docAttrs.bodySectPr || converter?.bodySectPr || null;
+  const sectPr = baseBodySectPr != null ? JSON.parse(JSON.stringify(baseBodySectPr)) : { type: "element", name: "w:sectPr", elements: [] };
+  try {
+    updateSectionMargins({ type: "sectPr", sectPr }, updates);
+  } catch (err) {
+    console.error("[setSectionPageMarginsAtSelection] Failed to update sectPr:", err);
+    return false;
+  }
+  if (converter) {
+    converter.bodySectPr = sectPr;
+    if (!converter.pageStyles) converter.pageStyles = {};
+    if (!converter.pageStyles.pageMargins) converter.pageStyles.pageMargins = {};
+    const pageMargins = converter.pageStyles.pageMargins;
+    const resolved = getSectPrMargins(sectPr);
+    if (resolved.top != null) pageMargins.top = resolved.top;
+    if (resolved.right != null) pageMargins.right = resolved.right;
+    if (resolved.bottom != null) pageMargins.bottom = resolved.bottom;
+    if (resolved.left != null) pageMargins.left = resolved.left;
+    if (resolved.header != null) pageMargins.header = resolved.header;
+    if (resolved.footer != null) pageMargins.footer = resolved.footer;
+  }
+  const nextDocAttrs = { ...docAttrs, bodySectPr: sectPr };
+  tr.setNodeMarkup(0, void 0, nextDocAttrs);
+  tr.setMeta("forceUpdatePagination", true);
+  return true;
+};
 const insertSectionBreakAtSelection = ({ headerInches, footerInches } = {}) => ({ tr, state, editor }) => {
   if (!state || !editor) {
     console.warn("[insertSectionBreakAtSelection] Missing state or editor");
@@ -11484,6 +11583,7 @@ const commands$1 = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.definePr
   setMeta,
   setNode,
   setSectionHeaderFooterAtSelection,
+  setSectionPageMarginsAtSelection,
   setTextIndentation,
   setTextSelection,
   skipTab,
@@ -15351,7 +15451,7 @@ const canUseDOM = () => {
     return false;
   }
 };
-const summaryVersion = "1.3.0-next.9";
+const summaryVersion = "1.3.0";
 const nodeKeys = ["group", "content", "marks", "inline", "atom", "defining", "code", "tableRole", "summary"];
 const markKeys = ["group", "inclusive", "excludes", "spanning", "code"];
 function mapAttributes(attrs) {
@@ -17353,9 +17453,8 @@ class Editor extends EventEmitter {
     try {
       const jsonObj = json;
       const attrs = jsonObj.attrs;
-      const hasBody = attrs && "bodySectPr" in attrs;
       const converter = this.converter;
-      if (!hasBody && converter && converter.bodySectPr) {
+      if (converter && converter.bodySectPr) {
         jsonObj.attrs = attrs || {};
         jsonObj.attrs.bodySectPr = converter.bodySectPr;
       }
@@ -17984,7 +18083,7 @@ class Editor extends EventEmitter {
    * Process collaboration migrations
    */
   processCollaborationMigrations() {
-    console.debug("[checkVersionMigrations] Current editor version", "1.3.0-next.9");
+    console.debug("[checkVersionMigrations] Current editor version", "1.3.0");
     if (!this.options.ydoc) return;
     const metaMap = this.options.ydoc.getMap("meta");
     let docVersion = metaMap.get("version");
@@ -40283,6 +40382,13 @@ const applyTrackedChangesModeToRuns = (runs, config, hyperlinkConfig, applyMarks
         );
       }
     });
+    if ((config.mode === "original" || config.mode === "final") && config.enabled) {
+      filtered.forEach((run) => {
+        if (isTextRun$1(run) && run.trackedChange && (run.trackedChange.kind === "insert" || run.trackedChange.kind === "delete")) {
+          delete run.trackedChange;
+        }
+      });
+    }
   }
   return filtered;
 };
@@ -43348,7 +43454,16 @@ const computeParagraphAttrs = (para, styleContext, listCounterContext, converter
     if (!value || typeof value !== "object") return;
     return normalizePxIndent(value) ?? convertIndentTwipsToPx(value);
   };
-  const normalizedIndent = normalizeIndentObject(attrs.indent) ?? convertIndentTwipsToPx(paragraphProps.indent) ?? convertIndentTwipsToPx(hydrated?.indent) ?? normalizeParagraphIndent(attrs.textIndent);
+  const hydratedIndentPx = convertIndentTwipsToPx(hydrated?.indent);
+  const paragraphIndentPx = convertIndentTwipsToPx(paragraphProps.indent);
+  const textIndentPx = normalizeParagraphIndent(attrs.textIndent);
+  const attrsIndentPx = normalizeIndentObject(attrs.indent);
+  const indentChain = [];
+  if (hydratedIndentPx) indentChain.push({ indent: hydratedIndentPx });
+  if (paragraphIndentPx) indentChain.push({ indent: paragraphIndentPx });
+  if (textIndentPx) indentChain.push({ indent: textIndentPx });
+  if (attrsIndentPx) indentChain.push({ indent: attrsIndentPx });
+  const normalizedIndent = indentChain.length ? superEditor_converter.combineIndentProperties(indentChain).indent : void 0;
   const unwrapTabStops = (tabStops) => {
     if (!Array.isArray(tabStops)) {
       return void 0;
@@ -48627,10 +48742,13 @@ async function measureParagraphBlock(block, maxWidth) {
         };
       }
       const originX = currentLine.width;
-      const { target, nextIndex, stop } = getNextTabStopPx(currentLine.width, tabStops, tabStopCursor);
+      const effectiveIndent = lines.length === 0 ? indentLeft + rawFirstLineOffset : indentLeft;
+      const absCurrentX = currentLine.width + effectiveIndent;
+      const { target, nextIndex, stop } = getNextTabStopPx(absCurrentX, tabStops, tabStopCursor);
       tabStopCursor = nextIndex;
-      const clampedTarget = Math.min(target, currentLine.maxWidth);
-      const tabAdvance = Math.max(0, clampedTarget - currentLine.width);
+      const maxAbsWidth = currentLine.maxWidth + effectiveIndent;
+      const clampedTarget = Math.min(target, maxAbsWidth);
+      const tabAdvance = Math.max(0, clampedTarget - absCurrentX);
       currentLine.width = roundValue(currentLine.width + tabAdvance);
       run.width = tabAdvance;
       currentLine.maxFontSize = Math.max(currentLine.maxFontSize, 12);
@@ -48638,8 +48756,9 @@ async function measureParagraphBlock(block, maxWidth) {
       currentLine.toChar = 1;
       if (stop && stop.leader && stop.leader !== "none") {
         const leaderStyle = stop.leader;
-        const from3 = Math.min(originX, clampedTarget);
-        const to = Math.max(originX, clampedTarget);
+        const relativeTarget = clampedTarget - effectiveIndent;
+        const from3 = Math.min(originX, relativeTarget);
+        const to = Math.max(originX, relativeTarget);
         if (!currentLine.leaders) currentLine.leaders = [];
         currentLine.leaders.push({ from: from3, to, style: leaderStyle });
       }
@@ -48648,27 +48767,28 @@ async function measureParagraphBlock(block, maxWidth) {
         if (stop.val === "end" || stop.val === "center" || stop.val === "decimal") {
           const groupMeasure = measureTabAlignmentGroup(runIndex + 1, runsToProcess, ctx2, decimalSeparator);
           if (groupMeasure.totalWidth > 0) {
+            const relativeTarget = clampedTarget - effectiveIndent;
             let groupStartX;
             if (stop.val === "end") {
-              groupStartX = Math.max(0, clampedTarget - groupMeasure.totalWidth);
+              groupStartX = Math.max(0, relativeTarget - groupMeasure.totalWidth);
             } else if (stop.val === "center") {
-              groupStartX = Math.max(0, clampedTarget - groupMeasure.totalWidth / 2);
+              groupStartX = Math.max(0, relativeTarget - groupMeasure.totalWidth / 2);
             } else {
               const beforeDecimal = groupMeasure.beforeDecimalWidth ?? groupMeasure.totalWidth;
-              groupStartX = Math.max(0, clampedTarget - beforeDecimal);
+              groupStartX = Math.max(0, relativeTarget - beforeDecimal);
             }
             activeTabGroup = {
               measure: groupMeasure,
               startX: groupStartX,
               currentX: groupStartX,
-              target: clampedTarget,
+              target: relativeTarget,
               val: stop.val
             };
             currentLine.width = roundValue(groupStartX);
           }
           pendingTabAlignment = null;
         } else {
-          pendingTabAlignment = { target: clampedTarget, val: stop.val };
+          pendingTabAlignment = { target: clampedTarget - effectiveIndent, val: stop.val };
         }
       } else {
         pendingTabAlignment = null;
@@ -49309,10 +49429,13 @@ async function measureParagraphBlock(block, maxWidth) {
           };
         }
         const originX = currentLine.width;
-        const { target, nextIndex, stop } = getNextTabStopPx(currentLine.width, tabStops, tabStopCursor);
+        const effectiveIndent = lines.length === 0 ? indentLeft + rawFirstLineOffset : indentLeft;
+        const absCurrentX = currentLine.width + effectiveIndent;
+        const { target, nextIndex, stop } = getNextTabStopPx(absCurrentX, tabStops, tabStopCursor);
         tabStopCursor = nextIndex;
-        const clampedTarget = Math.min(target, currentLine.maxWidth);
-        const tabAdvance = Math.max(0, clampedTarget - currentLine.width);
+        const maxAbsWidth = currentLine.maxWidth + effectiveIndent;
+        const clampedTarget = Math.min(target, maxAbsWidth);
+        const tabAdvance = Math.max(0, clampedTarget - absCurrentX);
         currentLine.width = roundValue(currentLine.width + tabAdvance);
         currentLine.maxFontInfo = updateMaxFontInfo(currentLine.maxFontSize, currentLine.maxFontInfo, run);
         currentLine.maxFontSize = Math.max(currentLine.maxFontSize, run.fontSize);
@@ -49321,14 +49444,15 @@ async function measureParagraphBlock(block, maxWidth) {
         charPosInRun += 1;
         if (stop) {
           validateTabStopVal(stop);
-          pendingTabAlignment = { target: clampedTarget, val: stop.val };
+          pendingTabAlignment = { target: clampedTarget - effectiveIndent, val: stop.val };
         } else {
           pendingTabAlignment = null;
         }
         if (stop && stop.leader && stop.leader !== "none" && stop.leader !== "middleDot") {
           const leaderStyle = stop.leader;
-          const from3 = Math.min(originX, clampedTarget);
-          const to = Math.max(originX, clampedTarget);
+          const relativeTarget = clampedTarget - effectiveIndent;
+          const from3 = Math.min(originX, relativeTarget);
+          const to = Math.max(originX, relativeTarget);
           if (!currentLine.leaders) currentLine.leaders = [];
           currentLine.leaders.push({ from: from3, to, style: leaderStyle });
         }
@@ -49604,7 +49728,11 @@ async function measureTableBlock(block, constraints) {
 }
 async function measureImageBlock(block, constraints) {
   const intrinsic = getIntrinsicImageSize(block, constraints.maxWidth);
-  const maxWidth = constraints.maxWidth > 0 ? constraints.maxWidth : intrinsic.width;
+  const isBlockBehindDoc = block.anchor?.behindDoc;
+  const isBlockWrapBehindDoc = block.wrap?.type === "None" && block.wrap?.behindDoc;
+  const bypassWidthConstraint = isBlockBehindDoc || isBlockWrapBehindDoc;
+  const isWidthConstraintBypassed = bypassWidthConstraint || constraints.maxWidth <= 0;
+  const maxWidth = isWidthConstraintBypassed ? intrinsic.width : constraints.maxWidth;
   const hasNegativeVerticalPosition = block.anchor?.isAnchored && (typeof block.anchor?.offsetV === "number" && block.anchor.offsetV < 0 || typeof block.margin?.top === "number" && block.margin.top < 0);
   const maxHeight = hasNegativeVerticalPosition || !constraints.maxHeight || constraints.maxHeight <= 0 ? Infinity : constraints.maxHeight;
   const widthScale = maxWidth / intrinsic.width;
@@ -50771,9 +50899,10 @@ class PresentationEditor extends EventEmitter {
       throw new TypeError("[PresentationEditor] setTrackedChangesOverrides expects an object or undefined");
     }
     if (overrides !== void 0) {
-      if (overrides.mode !== void 0 && !["review", "simple", "original"].includes(overrides.mode)) {
+      const validModes = ["review", "original", "final", "off"];
+      if (overrides.mode !== void 0 && !validModes.includes(overrides.mode)) {
         throw new TypeError(
-          `[PresentationEditor] Invalid tracked changes mode "${overrides.mode}". Must be one of: review, simple, original`
+          `[PresentationEditor] Invalid tracked changes mode "${overrides.mode}". Must be one of: ${validModes.join(", ")}`
         );
       }
       if (overrides.enabled !== void 0 && typeof overrides.enabled !== "boolean") {
@@ -54724,7 +54853,7 @@ class PresentationEditor extends EventEmitter {
     const zoom = this.#layoutOptions.zoom ?? 1;
     const layoutMode = this.#layoutOptions.layoutMode ?? "vertical";
     const pages = this.#layoutState.layout?.pages;
-    const pageGap = this.#layoutState.layout?.pageGap ?? this.#getEffectivePageGap();
+    const pageGap = this.#getEffectivePageGap();
     const defaultWidth = this.#layoutOptions.pageSize?.w ?? DEFAULT_PAGE_SIZE.w;
     const defaultHeight = this.#layoutOptions.pageSize?.h ?? DEFAULT_PAGE_SIZE.h;
     let maxWidth = defaultWidth;
@@ -57835,7 +57964,11 @@ const Document = Node$1.create({
        */
       clearDocument: () => ({ commands: commands2 }) => {
         return commands2.setContent("<p></p>");
-      }
+      },
+      /**
+       * Set section page margins (top/right/bottom/left) for the section at the current selection.
+       */
+      setSectionPageMarginsAtSelection
     };
   }
 });
@@ -58489,12 +58622,18 @@ function findParagraphContext($pos, cache2, helpers2) {
   return null;
 }
 function extractParagraphContext(node, startPos, helpers2, depth = 0) {
-  const paragraphProperties = superEditor_converter.getResolvedParagraphProperties(node) ?? {};
+  const paragraphProperties = superEditor_converter.getResolvedParagraphProperties(node) ?? node.attrs?.paragraphProperties ?? {};
   const alignmentAliases = { left: "start", right: "end" };
   let tabStops = [];
   if (Array.isArray(paragraphProperties.tabStops)) {
     tabStops = paragraphProperties.tabStops.map((stop) => {
       const ref = stop?.tab;
+      if (!ref && stop?.pos != null) {
+        return {
+          ...stop,
+          pos: twipsToPixels(Number(stop.pos) || 0)
+        };
+      }
       if (!ref) return stop || null;
       const rawType = ref.tabType || "start";
       const mappedVal = alignmentAliases[rawType] || rawType;
@@ -59760,6 +59899,13 @@ function createLayoutRequest(doc2, paragraphPos, view, helpers2, revision, parag
         pos: entry.pos,
         nodeSize: node.nodeSize
       });
+    } else if (node.type.name === "lineBreak" || node.type.name === "hardBreak") {
+      spans.push({
+        type: node.type.name,
+        spanId,
+        pos: entry.pos,
+        nodeSize: node.nodeSize
+      });
     } else if (node.type.name === "text") {
       spans.push({
         type: "text",
@@ -59809,6 +59955,7 @@ function calculateTabLayout(request, measurement, view) {
     paragraphNode
   } = request;
   const tabs = {};
+  const leftIndentPx = request.indents?.left ?? 0;
   let currentX = indentWidth;
   const measureText2 = (span) => {
     if (view && typeof span.from === "number" && typeof span.to === "number") {
@@ -59821,6 +59968,8 @@ function calculateTabLayout(request, measurement, view) {
     const span = spans[i];
     if (span.type === "text") {
       currentX += measureText2(span);
+    } else if (span.type === "lineBreak" || span.type === "hardBreak") {
+      currentX = leftIndentPx;
     } else if (span.type === "tab") {
       const followingText = collectFollowingText(spans, i + 1);
       let measureTextCallback;
@@ -59916,7 +60065,7 @@ function collectFollowingText(spans, startIndex) {
   let text = "";
   for (let i = startIndex; i < spans.length; i++) {
     const span = spans[i];
-    if (span.type === "tab") break;
+    if (span.type === "tab" || span.type === "lineBreak" || span.type === "hardBreak") break;
     if (span.type === "text") text += span.text || "";
   }
   return text;
@@ -59926,7 +60075,7 @@ function getFollowingTextRange(spans, startIndex) {
   let to = null;
   for (let i = startIndex; i < spans.length; i++) {
     const span = spans[i];
-    if (span.type === "tab") break;
+    if (span.type === "tab" || span.type === "lineBreak" || span.type === "hardBreak") break;
     if (span.type === "text" && typeof span.from === "number" && typeof span.to === "number") {
       if (from3 === null) from3 = span.from;
       to = span.to;
@@ -64344,6 +64493,10 @@ const Image = Node$1.create({
     }
     const hasAnchorData = Boolean(anchorData);
     const hasMarginOffsets = marginOffset?.horizontal != null || marginOffset?.top != null;
+    const isWrapBehindDoc = wrap?.attrs?.behindDoc;
+    const isAnchorBehindDoc = anchorData?.behindDoc;
+    const isBehindDocAnchor = wrap?.type === "None" && (isWrapBehindDoc || isAnchorBehindDoc);
+    const isAbsolutelyPositioned = style2.includes("position: absolute;");
     if (hasAnchorData) {
       switch (anchorData.hRelativeFrom) {
         case "page":
@@ -64371,7 +64524,6 @@ const Image = Node$1.create({
               style2 += "float: left;";
             }
           } else if (!anchorData.alignH && marginOffset?.horizontal != null) {
-            const isAbsolutelyPositioned = style2.includes("position: absolute;");
             if (isAbsolutelyPositioned) {
               style2 += `left: ${baseHorizontal}px;`;
               style2 += "max-width: none;";
@@ -64385,7 +64537,8 @@ const Image = Node$1.create({
       const relativeFromPageV = anchorData?.vRelativeFrom === "page";
       const relativeFromMarginV = anchorData?.vRelativeFrom === "margin";
       const maxMarginV = 500;
-      const baseTop = Math.max(0, marginOffset?.top ?? 0);
+      const allowNegativeTopOffset = isBehindDocAnchor;
+      const baseTop = allowNegativeTopOffset ? marginOffset?.top ?? 0 : Math.max(0, marginOffset?.top ?? 0);
       let rotationHorizontal = 0;
       let rotationTop = 0;
       const { rotation: rotation2 } = transformData ?? {};
@@ -64404,7 +64557,10 @@ const Image = Node$1.create({
           margin.left += horizontal;
         }
       }
-      if (top2 && !relativeFromMarginV) {
+      const appliedTopViaStyle = isAbsolutelyPositioned && allowNegativeTopOffset && !relativeFromMarginV;
+      if (appliedTopViaStyle) {
+        style2 += `top: ${top2}px;`;
+      } else if (top2 && !relativeFromMarginV) {
         if (relativeFromPageV && top2 >= maxMarginV) margin.top += maxMarginV;
         else margin.top += top2;
       }
@@ -64417,6 +64573,9 @@ const Image = Node$1.create({
     }
     if (margin.top) style2 += `margin-top: ${margin.top}px;`;
     if (margin.bottom) style2 += `margin-bottom: ${margin.bottom}px;`;
+    if (isBehindDocAnchor) {
+      style2 += "max-width: none;";
+    }
     const finalAttributes = { ...htmlAttributes };
     if (style2) {
       const existingStyle = finalAttributes.style || "";
@@ -78870,7 +79029,7 @@ var ResizeObserverController = (function() {
   };
   return ResizeObserverController2;
 })();
-var ResizeObserver = (function() {
+var ResizeObserver$1 = (function() {
   function ResizeObserver2(callback) {
     if (arguments.length === 0) {
       throw new TypeError("Failed to construct 'ResizeObserver': 1 argument required, but only 0 present.");
@@ -78909,7 +79068,7 @@ var ResizeObserver = (function() {
 class ResizeObserverDelegate {
   constructor() {
     this.handleResize = this.handleResize.bind(this);
-    this.observer = new (typeof window !== "undefined" && window.ResizeObserver || ResizeObserver)(this.handleResize);
+    this.observer = new (typeof window !== "undefined" && window.ResizeObserver || ResizeObserver$1)(this.handleResize);
     this.elHandlersMap = /* @__PURE__ */ new Map();
   }
   handleResize(entries) {
@@ -89778,6 +89937,31 @@ const _sfc_main$1 = /* @__PURE__ */ vue.defineComponent({
       },
       { immediate: true, deep: true }
     );
+    vue.watch(
+      () => props.options?.rulerContainer,
+      () => {
+        vue.nextTick(() => {
+          syncRulerOffset();
+          setupRulerObservers();
+        });
+      },
+      { immediate: true }
+    );
+    vue.watch(
+      rulersVisible,
+      (visible) => {
+        vue.nextTick(() => {
+          if (visible) {
+            syncRulerOffset();
+            setupRulerObservers();
+          } else {
+            rulerHostStyle.value = {};
+            cleanupRulerObservers();
+          }
+        });
+      },
+      { immediate: true }
+    );
     const containerStyle = vue.computed(() => {
       let maxWidth = 8.5 * 96;
       const ed = editor.value;
@@ -89802,6 +89986,71 @@ const _sfc_main$1 = /* @__PURE__ */ vue.defineComponent({
         minWidth: `${scaledWidth}px`
       };
     });
+    const rulerHostStyle = vue.ref({});
+    const rulerContainerEl = vue.ref(null);
+    let editorResizeObserver = null;
+    let rulerContainerResizeObserver = null;
+    let layoutUpdatedHandler = null;
+    const resolveRulerContainer = () => {
+      const container = props.options?.rulerContainer;
+      if (!container) return null;
+      if (typeof container === "string") {
+        const doc2 = editorWrapper.value?.ownerDocument ?? document;
+        return doc2.querySelector(container);
+      }
+      return container instanceof HTMLElement ? container : null;
+    };
+    const getViewportRect2 = () => {
+      const host = editorWrapper.value;
+      if (!host) return null;
+      const viewport2 = host.querySelector(".presentation-editor__viewport");
+      const target = viewport2 ?? host;
+      return target.getBoundingClientRect();
+    };
+    const syncRulerOffset = () => {
+      if (!rulersVisible.value) {
+        rulerHostStyle.value = {};
+        return;
+      }
+      rulerContainerEl.value = resolveRulerContainer();
+      if (!rulerContainerEl.value) {
+        rulerHostStyle.value = {};
+        return;
+      }
+      const viewportRect = getViewportRect2();
+      if (!viewportRect) return;
+      const hostRect = rulerContainerEl.value.getBoundingClientRect();
+      const paddingLeft = Math.max(0, viewportRect.left - hostRect.left);
+      const paddingRight = Math.max(0, hostRect.right - viewportRect.right);
+      rulerHostStyle.value = {
+        paddingLeft: `${paddingLeft}px`,
+        paddingRight: `${paddingRight}px`
+      };
+    };
+    const cleanupRulerObservers = () => {
+      if (editorResizeObserver) {
+        editorResizeObserver.disconnect();
+        editorResizeObserver = null;
+      }
+      if (rulerContainerResizeObserver) {
+        rulerContainerResizeObserver.disconnect();
+        rulerContainerResizeObserver = null;
+      }
+    };
+    const setupRulerObservers = () => {
+      cleanupRulerObservers();
+      if (typeof ResizeObserver === "undefined") return;
+      const viewportHost = editorWrapper.value;
+      const rulerHost = resolveRulerContainer();
+      if (viewportHost) {
+        editorResizeObserver = new ResizeObserver(() => syncRulerOffset());
+        editorResizeObserver.observe(viewportHost);
+      }
+      if (rulerHost) {
+        rulerContainerResizeObserver = new ResizeObserver(() => syncRulerOffset());
+        rulerContainerResizeObserver.observe(rulerHost);
+      }
+    };
     const message = useMessage();
     const editorWrapper = vue.ref(null);
     const editorElem = vue.ref(null);
@@ -90113,7 +90362,7 @@ const _sfc_main$1 = /* @__PURE__ */ vue.defineComponent({
         presentationEditor.on("imageDeselected", () => {
           clearSelectedImage();
         });
-        presentationEditor.on("layoutUpdated", () => {
+        layoutUpdatedHandler = () => {
           if (imageResizeState.visible && imageResizeState.blockId) {
             const escapedBlockId = CSS.escape(imageResizeState.blockId);
             const newElement = editorElem.value?.querySelector(
@@ -90146,13 +90395,17 @@ const _sfc_main$1 = /* @__PURE__ */ vue.defineComponent({
               clearSelectedImage();
             }
           }
-        });
+          vue.nextTick(() => syncRulerOffset());
+        };
+        presentationEditor.on("layoutUpdated", layoutUpdatedHandler);
         zoomChangeHandler = ({ zoom }) => {
           currentZoom.value = zoom;
+          vue.nextTick(() => syncRulerOffset());
         };
         presentationEditor.on("zoomChange", zoomChangeHandler);
         if (typeof presentationEditor.zoom === "number") {
           currentZoom.value = presentationEditor.zoom;
+          vue.nextTick(() => syncRulerOffset());
         }
       }
       editor.value.on("paginationUpdate", () => {
@@ -90212,6 +90465,11 @@ const _sfc_main$1 = /* @__PURE__ */ vue.defineComponent({
     vue.onMounted(() => {
       initializeData();
       if (props.options?.suppressSkeletonLoader || !props.options?.collaborationProvider) editorReady.value = true;
+      window.addEventListener("resize", syncRulerOffset, { passive: true });
+      vue.nextTick(() => {
+        syncRulerOffset();
+        setupRulerObservers();
+      });
     });
     const handleMarginClick = (event) => {
       if (event.button !== 0) {
@@ -90226,10 +90484,14 @@ const _sfc_main$1 = /* @__PURE__ */ vue.defineComponent({
     const handleMarginChange = ({ side, value }) => {
       const base2 = activeEditor.value;
       if (!base2) return;
-      const pageStyles2 = base2.getPageStyles();
-      const { pageMargins } = pageStyles2;
-      const update = { ...pageMargins, [side]: value };
-      base2?.updatePageStyle({ pageMargins: update });
+      const payload = side === "left" ? { leftInches: value } : side === "right" ? { rightInches: value } : side === "top" ? { topInches: value } : side === "bottom" ? { bottomInches: value } : {};
+      const didUpdateSection = typeof base2.commands?.setSectionPageMarginsAtSelection === "function" ? base2.commands.setSectionPageMarginsAtSelection(payload) : false;
+      if (!didUpdateSection) {
+        const pageStyles2 = base2.getPageStyles();
+        const { pageMargins } = pageStyles2;
+        const update = { ...pageMargins, [side]: value };
+        base2?.updatePageStyle({ pageMargins: update });
+      }
     };
     vue.onBeforeUnmount(() => {
       stopPolling();
@@ -90238,6 +90500,12 @@ const _sfc_main$1 = /* @__PURE__ */ vue.defineComponent({
         editor.value.off("zoomChange", zoomChangeHandler);
         zoomChangeHandler = null;
       }
+      if (editor.value instanceof PresentationEditor && layoutUpdatedHandler) {
+        editor.value.off("layoutUpdated", layoutUpdatedHandler);
+        layoutUpdatedHandler = null;
+      }
+      cleanupRulerObservers();
+      window.removeEventListener("resize", syncRulerOffset);
       editor.value?.destroy();
       editor.value = null;
     });
@@ -90249,18 +90517,28 @@ const _sfc_main$1 = /* @__PURE__ */ vue.defineComponent({
         __props.options.rulerContainer && rulersVisible.value && !!activeEditor.value ? (vue.openBlock(), vue.createBlock(vue.Teleport, {
           key: 0,
           to: __props.options.rulerContainer
+        }, [
+          vue.createBaseVNode("div", {
+            class: "ruler-host",
+            style: vue.normalizeStyle(rulerHostStyle.value)
+          }, [
+            vue.createVNode(Ruler, {
+              class: "ruler superdoc-ruler",
+              editor: activeEditor.value,
+              onMarginChange: handleMarginChange
+            }, null, 8, ["editor"])
+          ], 4)
+        ], 8, ["to"])) : rulersVisible.value && !!activeEditor.value ? (vue.openBlock(), vue.createElementBlock("div", {
+          key: 1,
+          class: "ruler-host",
+          style: vue.normalizeStyle(rulerHostStyle.value)
         }, [
           vue.createVNode(Ruler, {
-            class: "ruler superdoc-ruler",
+            class: "ruler",
             editor: activeEditor.value,
             onMarginChange: handleMarginChange
           }, null, 8, ["editor"])
-        ], 8, ["to"])) : rulersVisible.value && !!activeEditor.value ? (vue.openBlock(), vue.createBlock(Ruler, {
-          key: 1,
-          class: "ruler",
-          editor: activeEditor.value,
-          onMarginChange: handleMarginChange
-        }, null, 8, ["editor"])) : vue.createCommentVNode("", true),
+        ], 4)) : vue.createCommentVNode("", true),
         vue.createBaseVNode("div", {
           class: "super-editor",
           ref_key: "editorWrapper",
@@ -90365,7 +90643,7 @@ const _sfc_main$1 = /* @__PURE__ */ vue.defineComponent({
     };
   }
 });
-const SuperEditor = /* @__PURE__ */ _export_sfc(_sfc_main$1, [["__scopeId", "data-v-8dd4cf59"]]);
+const SuperEditor = /* @__PURE__ */ _export_sfc(_sfc_main$1, [["__scopeId", "data-v-f5c4f915"]]);
 const _hoisted_1 = ["innerHTML"];
 const _sfc_main = {
   __name: "SuperInput",