superdoc 1.3.0-next.13 → 1.3.0-next.14

package/dist/superdoc.umd.js

@@ -36435,7 +36435,7 @@ Please report this to https://github.com/markedjs/marked.`, e) {
     static getStoredSuperdocVersion(docx) {
       return SuperConverter.getStoredCustomProperty(docx, "SuperdocVersion");
     }
-    static setStoredSuperdocVersion(docx = this.convertedXml, version2 = "1.3.0-next.13") {
+    static setStoredSuperdocVersion(docx = this.convertedXml, version2 = "1.3.0-next.14") {
       return SuperConverter.setStoredCustomProperty(docx, "SuperdocVersion", version2, false);
     }
     /**
@@ -62245,7 +62245,7 @@ Please report this to https://github.com/markedjs/marked.`, e) {
       return false;
     }
   };
-  const summaryVersion = "1.3.0-next.13";
+  const summaryVersion = "1.3.0-next.14";
   const nodeKeys = ["group", "content", "marks", "inline", "atom", "defining", "code", "tableRole", "summary"];
   const markKeys = ["group", "inclusive", "excludes", "spanning", "code"];
   function mapAttributes(attrs) {
@@ -64878,7 +64878,7 @@ Please report this to https://github.com/markedjs/marked.`, e) {
      * Process collaboration migrations
      */
     processCollaborationMigrations() {
-      console.debug("[checkVersionMigrations] Current editor version", "1.3.0-next.13");
+      console.debug("[checkVersionMigrations] Current editor version", "1.3.0-next.14");
       if (!this.options.ydoc) return;
       const metaMap = this.options.ydoc.getMap("meta");
       let docVersion = metaMap.get("version");
@@ -95485,10 +95485,13 @@ ${l}
           };
         }
         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);
         run2.width = tabAdvance;
         currentLine.maxFontSize = Math.max(currentLine.maxFontSize, 12);
@@ -95496,8 +95499,9 @@ ${l}
         currentLine.toChar = 1;
         if (stop && stop.leader && stop.leader !== "none") {
           const leaderStyle = stop.leader;
-          const from2 = Math.min(originX, clampedTarget);
-          const to = Math.max(originX, clampedTarget);
+          const relativeTarget = clampedTarget - effectiveIndent;
+          const from2 = Math.min(originX, relativeTarget);
+          const to = Math.max(originX, relativeTarget);
           if (!currentLine.leaders) currentLine.leaders = [];
           currentLine.leaders.push({ from: from2, to, style: leaderStyle });
         }
@@ -95506,27 +95510,28 @@ ${l}
           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;
@@ -96167,10 +96172,13 @@ ${l}
             };
           }
           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, run2);
           currentLine.maxFontSize = Math.max(currentLine.maxFontSize, run2.fontSize);
@@ -96179,14 +96187,15 @@ ${l}
           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 from2 = Math.min(originX, clampedTarget);
-            const to = Math.max(originX, clampedTarget);
+            const relativeTarget = clampedTarget - effectiveIndent;
+            const from2 = Math.min(originX, relativeTarget);
+            const to = Math.max(originX, relativeTarget);
             if (!currentLine.leaders) currentLine.leaders = [];
             currentLine.leaders.push({ from: from2, to, style: leaderStyle });
           }
@@ -105309,12 +105318,18 @@ ${l}
     return null;
   }
   function extractParagraphContext(node2, startPos, helpers2, depth = 0) {
-    const paragraphProperties = getResolvedParagraphProperties(node2) ?? {};
+    const paragraphProperties = getResolvedParagraphProperties(node2) ?? node2.attrs?.paragraphProperties ?? {};
     const alignmentAliases = { left: "start", right: "end" };
     let tabStops = [];
     if (Array.isArray(paragraphProperties.tabStops)) {
       tabStops = paragraphProperties.tabStops.map((stop) => {
         const ref2 = stop?.tab;
+        if (!ref2 && stop?.pos != null) {
+          return {
+            ...stop,
+            pos: twipsToPixels(Number(stop.pos) || 0)
+          };
+        }
         if (!ref2) return stop || null;
         const rawType = ref2.tabType || "start";
         const mappedVal = alignmentAliases[rawType] || rawType;
@@ -106580,6 +106595,13 @@ ${l}
           pos: entry.pos,
           nodeSize: node2.nodeSize
         });
+      } else if (node2.type.name === "lineBreak" || node2.type.name === "hardBreak") {
+        spans.push({
+          type: node2.type.name,
+          spanId,
+          pos: entry.pos,
+          nodeSize: node2.nodeSize
+        });
       } else if (node2.type.name === "text") {
         spans.push({
           type: "text",
@@ -106629,6 +106651,7 @@ ${l}
       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") {
@@ -106641,6 +106664,8 @@ ${l}
       const span = spans[i2];
       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, i2 + 1);
         let measureTextCallback;
@@ -106736,7 +106761,7 @@ ${l}
     let text2 = "";
     for (let i2 = startIndex; i2 < spans.length; i2++) {
       const span = spans[i2];
-      if (span.type === "tab") break;
+      if (span.type === "tab" || span.type === "lineBreak" || span.type === "hardBreak") break;
       if (span.type === "text") text2 += span.text || "";
     }
     return text2;
@@ -106746,7 +106771,7 @@ ${l}
     let to = null;
     for (let i2 = startIndex; i2 < spans.length; i2++) {
       const span = spans[i2];
-      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 (from2 === null) from2 = span.from;
         to = span.to;
@@ -125735,7 +125760,7 @@ ${style2}
     };
     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.");
@@ -125774,7 +125799,7 @@ ${style2}
   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) {
@@ -138687,6 +138712,31 @@ ${style2}
         },
         { immediate: true, deep: true }
       );
+      watch(
+        () => props.options?.rulerContainer,
+        () => {
+          nextTick(() => {
+            syncRulerOffset();
+            setupRulerObservers();
+          });
+        },
+        { immediate: true }
+      );
+      watch(
+        rulersVisible,
+        (visible) => {
+          nextTick(() => {
+            if (visible) {
+              syncRulerOffset();
+              setupRulerObservers();
+            } else {
+              rulerHostStyle.value = {};
+              cleanupRulerObservers();
+            }
+          });
+        },
+        { immediate: true }
+      );
       const containerStyle = computed(() => {
         let maxWidth = 8.5 * 96;
         const ed = editor.value;
@@ -138711,6 +138761,71 @@ ${style2}
           minWidth: `${scaledWidth}px`
         };
       });
+      const rulerHostStyle = ref({});
+      const rulerContainerEl = 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 = ref(null);
       const editorElem = ref(null);
@@ -139022,7 +139137,7 @@ ${style2}
           presentationEditor.on("imageDeselected", () => {
             clearSelectedImage();
           });
-          presentationEditor.on("layoutUpdated", () => {
+          layoutUpdatedHandler = () => {
             if (imageResizeState.visible && imageResizeState.blockId) {
               const escapedBlockId = CSS.escape(imageResizeState.blockId);
               const newElement = editorElem.value?.querySelector(
@@ -139055,13 +139170,17 @@ ${style2}
                 clearSelectedImage();
               }
             }
-          });
+            nextTick(() => syncRulerOffset());
+          };
+          presentationEditor.on("layoutUpdated", layoutUpdatedHandler);
           zoomChangeHandler = ({ zoom }) => {
             currentZoom.value = zoom;
+            nextTick(() => syncRulerOffset());
           };
           presentationEditor.on("zoomChange", zoomChangeHandler);
           if (typeof presentationEditor.zoom === "number") {
             currentZoom.value = presentationEditor.zoom;
+            nextTick(() => syncRulerOffset());
           }
         }
         editor.value.on("paginationUpdate", () => {
@@ -139121,6 +139240,11 @@ ${style2}
       onMounted(() => {
         initializeData();
         if (props.options?.suppressSkeletonLoader || !props.options?.collaborationProvider) editorReady.value = true;
+        window.addEventListener("resize", syncRulerOffset, { passive: true });
+        nextTick(() => {
+          syncRulerOffset();
+          setupRulerObservers();
+        });
       });
       const handleMarginClick = (event) => {
         if (event.button !== 0) {
@@ -139151,6 +139275,12 @@ ${style2}
           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;
       });
@@ -139162,18 +139292,28 @@ ${style2}
           __props.options.rulerContainer && rulersVisible.value && !!activeEditor.value ? (openBlock(), createBlock(Teleport, {
             key: 0,
             to: __props.options.rulerContainer
+          }, [
+            createBaseVNode("div", {
+              class: "ruler-host",
+              style: normalizeStyle(rulerHostStyle.value)
+            }, [
+              createVNode(Ruler, {
+                class: "ruler superdoc-ruler",
+                editor: activeEditor.value,
+                onMarginChange: handleMarginChange
+              }, null, 8, ["editor"])
+            ], 4)
+          ], 8, ["to"])) : rulersVisible.value && !!activeEditor.value ? (openBlock(), createElementBlock("div", {
+            key: 1,
+            class: "ruler-host",
+            style: normalizeStyle(rulerHostStyle.value)
           }, [
             createVNode(Ruler, {
-              class: "ruler superdoc-ruler",
+              class: "ruler",
               editor: activeEditor.value,
               onMarginChange: handleMarginChange
             }, null, 8, ["editor"])
-          ], 8, ["to"])) : rulersVisible.value && !!activeEditor.value ? (openBlock(), createBlock(Ruler, {
-            key: 1,
-            class: "ruler",
-            editor: activeEditor.value,
-            onMarginChange: handleMarginChange
-          }, null, 8, ["editor"])) : createCommentVNode("", true),
+          ], 4)) : createCommentVNode("", true),
           createBaseVNode("div", {
             class: "super-editor",
             ref_key: "editorWrapper",
@@ -139278,7 +139418,7 @@ ${style2}
       };
     }
   });
-  const SuperEditor = /* @__PURE__ */ _export_sfc(_sfc_main$j, [["__scopeId", "data-v-3e9da07c"]]);
+  const SuperEditor = /* @__PURE__ */ _export_sfc(_sfc_main$j, [["__scopeId", "data-v-f5c4f915"]]);
   const _hoisted_1$h = ["innerHTML"];
   const _sfc_main$i = {
     __name: "SuperInput",
@@ -144339,7 +144479,7 @@ ${reason}`);
       this.config.colors = shuffleArray(this.config.colors);
       this.userColorMap = /* @__PURE__ */ new Map();
       this.colorIndex = 0;
-      this.version = "1.3.0-next.13";
+      this.version = "1.3.0-next.14";
       this.#log("🦋 [superdoc] Using SuperDoc version:", this.version);
       this.superdocId = config2.superdocId || v4();
       this.colors = this.config.colors;