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

package/dist/chunks/{PdfViewer-DebfKi_n.es.js → PdfViewer-CMc0iPaz.es.js}

@@ -1,6 +1,6 @@
 import { d as defineComponent, h, T as Transition, p as process$1, w as watchEffect, c as computed, r as ref, f as onMounted, X as onUnmounted, E as createElementBlock, G as openBlock, K as createBaseVNode, M as createCommentVNode, I as createVNode, v as unref } from "./vue-BnBKJwCW.es.js";
-import { N as NBaseLoading, u as useSuperdocStore, s as storeToRefs, a as useSelection } from "./index-DOsTLvRQ.es.js";
-import { C as derived, r as c, q as cB, aF as fadeInTransition, y as cM, I as warnOnce, J as useConfig, N as useTheme, aG as pxfy, P as createKey, Q as useThemeClass, aH as useCompitable, ai as _export_sfc } from "./index-OlLDoLS-.es.js";
+import { N as NBaseLoading, u as useSuperdocStore, s as storeToRefs, a as useSelection } from "./index-DVRukmH6.es.js";
+import { C as derived, r as c, q as cB, aF as fadeInTransition, y as cM, I as warnOnce, J as useConfig, N as useTheme, aG as pxfy, P as createKey, Q as useThemeClass, aH as useCompitable, ai as _export_sfc } from "./index-B1GscRFR.es.js";
 function self(vars) {
   const {
     opacityDisabled,

package/dist/chunks/{PdfViewer-z2obaZHa.cjs → PdfViewer-DLGmNBgc.cjs}

@@ -1,8 +1,8 @@
 "use strict";
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const vue = require("./vue-De9wkgLl.cjs");
-const superdoc = require("./index-C7p34V06.cjs");
-const index = require("./index-DNdp0AxW.cjs");
+const superdoc = require("./index-DgWw6KLR.cjs");
+const index = require("./index-CyFX6QZq.cjs");
 function self(vars) {
   const {
     opacityDisabled,

package/dist/chunks/{SuperConverter-Dh27SFeK.es.js → SuperConverter-CD9khdbr.es.js}

@@ -31007,7 +31007,7 @@ class SuperConverter {
   static getStoredSuperdocVersion(docx) {
     return SuperConverter.getStoredCustomProperty(docx, "SuperdocVersion");
   }
-  static setStoredSuperdocVersion(docx = this.convertedXml, version = "1.3.0-next.13") {
+  static setStoredSuperdocVersion(docx = this.convertedXml, version = "1.3.0-next.14") {
     return SuperConverter.setStoredCustomProperty(docx, "SuperdocVersion", version, false);
   }
   /**

package/dist/chunks/{SuperConverter-Dxl1uYvz.cjs → SuperConverter-kUELrLda.cjs}

@@ -31008,7 +31008,7 @@ class SuperConverter {
   static getStoredSuperdocVersion(docx) {
     return SuperConverter.getStoredCustomProperty(docx, "SuperdocVersion");
   }
-  static setStoredSuperdocVersion(docx = this.convertedXml, version = "1.3.0-next.13") {
+  static setStoredSuperdocVersion(docx = this.convertedXml, version = "1.3.0-next.14") {
     return SuperConverter.setStoredCustomProperty(docx, "SuperdocVersion", version, false);
   }
   /**

package/dist/chunks/{index-OlLDoLS-.es.js → index-B1GscRFR.es.js}

@@ -1,6 +1,6 @@
 import { B as Buffer$2 } from "./jszip-B1fkPkPJ.es.js";
 import { t as twipsToInches, i as inchesToTwips, p as ptToTwips, l as linesToTwips, a as twipsToLines, b as pixelsToTwips, h as halfPointToPoints, c as twipsToPixels$2, d as convertSizeToCSS, e as inchesToPixels } from "./helpers-C8e9wR5l.es.js";
-import { g as generateDocxRandomId, T as TextSelection$1, o as objectIncludes, w as wrapTextsInRuns, D as DOMParser$1, c as createDocFromMarkdown, a as createDocFromHTML, b as chainableEditorState, d as convertMarkdownToHTML, f as findParentNode, e as findParentNodeClosestToPos, h as generateRandom32BitHex, i as generateRandomSigned32BitIntStrId, P as PluginKey, j as Plugin, M as Mapping, N as NodeSelection, k as Selection, l as Slice, m as DOMSerializer, F as Fragment, n as Mark$1, p as dropPoint, A as AllSelection, q as Schema$1, s as canSplit, t as resolveRunProperties, u as encodeMarksFromRPr, v as liftTarget, x as canJoin, y as joinPoint, z as replaceStep$1, R as ReplaceAroundStep$1, B as htmlHandler, C as ReplaceStep, E as getResolvedParagraphProperties, G as changeListLevel, H as isList$1, I as updateNumberingProperties, L as ListHelpers, J as inputRulesPlugin, K as TrackDeleteMarkName$1, O as TrackInsertMarkName$1, Q as TrackFormatMarkName$1, U as AddMarkStep, V as RemoveMarkStep, W as CommandService, S as SuperConverter, X as EditorState, Y as unflattenListsInHtml, Z as SelectionRange, _ as Transform, $ as createOoxmlResolver, a0 as translator, a1 as translator$1, a2 as resolveDocxFontFamily, a3 as combineIndentProperties, a4 as _getReferencedTableStyles, a5 as decodeRPrFromMarks, a6 as calculateResolvedParagraphProperties, a7 as encodeCSSFromPPr, a8 as encodeCSSFromRPr, a9 as generateOrderedListIndex, aa as docxNumberingHelpers, ab as InputRule, ac as insertNewRelationship, ad as kebabCase$1, ae as getUnderlineCssString } from "./SuperConverter-Dh27SFeK.es.js";
+import { g as generateDocxRandomId, T as TextSelection$1, o as objectIncludes, w as wrapTextsInRuns, D as DOMParser$1, c as createDocFromMarkdown, a as createDocFromHTML, b as chainableEditorState, d as convertMarkdownToHTML, f as findParentNode, e as findParentNodeClosestToPos, h as generateRandom32BitHex, i as generateRandomSigned32BitIntStrId, P as PluginKey, j as Plugin, M as Mapping, N as NodeSelection, k as Selection, l as Slice, m as DOMSerializer, F as Fragment, n as Mark$1, p as dropPoint, A as AllSelection, q as Schema$1, s as canSplit, t as resolveRunProperties, u as encodeMarksFromRPr, v as liftTarget, x as canJoin, y as joinPoint, z as replaceStep$1, R as ReplaceAroundStep$1, B as htmlHandler, C as ReplaceStep, E as getResolvedParagraphProperties, G as changeListLevel, H as isList$1, I as updateNumberingProperties, L as ListHelpers, J as inputRulesPlugin, K as TrackDeleteMarkName$1, O as TrackInsertMarkName$1, Q as TrackFormatMarkName$1, U as AddMarkStep, V as RemoveMarkStep, W as CommandService, S as SuperConverter, X as EditorState, Y as unflattenListsInHtml, Z as SelectionRange, _ as Transform, $ as createOoxmlResolver, a0 as translator, a1 as translator$1, a2 as resolveDocxFontFamily, a3 as combineIndentProperties, a4 as _getReferencedTableStyles, a5 as decodeRPrFromMarks, a6 as calculateResolvedParagraphProperties, a7 as encodeCSSFromPPr, a8 as encodeCSSFromRPr, a9 as generateOrderedListIndex, aa as docxNumberingHelpers, ab as InputRule, ac as insertNewRelationship, ad as kebabCase$1, ae as getUnderlineCssString } from "./SuperConverter-CD9khdbr.es.js";
 import { p as process$1, r as ref, C as global$1, c as computed, E as createElementBlock, F as Fragment$1, S as renderList, O as withModifiers, G as openBlock, P as normalizeClass, M as createCommentVNode, H as toDisplayString, K as createBaseVNode, U as createApp, f as onMounted, X as onUnmounted, R as withDirectives, v as unref, Y as vModelText, y as nextTick, L as normalizeStyle, u as watch, Z as withKeys, _ as createTextVNode, I as createVNode, h, $ as readonly, s as getCurrentInstance, o as onBeforeUnmount, j as reactive, b as onBeforeMount, i as inject, a0 as onActivated, a1 as onDeactivated, a2 as Comment, d as defineComponent, a as provide, g as Teleport, t as toRef, a3 as renderSlot, a4 as isVNode, D as shallowRef, w as watchEffect, T as Transition, a5 as mergeProps, a6 as vShow, a7 as cloneVNode, a8 as Text$2, m as markRaw, N as createBlock, J as withCtx, a9 as useCssVars, V as resolveDynamicComponent, aa as normalizeProps, ab as guardReactiveProps } from "./vue-BnBKJwCW.es.js";
 import "./jszip.min-DCl8qkFO.es.js";
 import { E as EventEmitter$1 } from "./eventemitter3-CwrdEv8r.es.js";
@@ -15434,7 +15434,7 @@ const canUseDOM = () => {
     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) {
@@ -18066,7 +18066,7 @@ class Editor extends EventEmitter {
    * 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");
@@ -48725,10 +48725,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);
@@ -48736,8 +48739,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 });
       }
@@ -48746,27 +48750,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;
@@ -49407,10 +49412,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);
@@ -49419,14 +49427,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 });
         }
@@ -58596,12 +58605,18 @@ function findParagraphContext($pos, cache2, helpers2) {
   return null;
 }
 function extractParagraphContext(node, startPos, helpers2, depth = 0) {
-  const paragraphProperties = getResolvedParagraphProperties(node) ?? {};
+  const paragraphProperties = getResolvedParagraphProperties(node) ?? node.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;
@@ -59867,6 +59882,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",
@@ -59916,6 +59938,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") {
@@ -59928,6 +59951,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;
@@ -60023,7 +60048,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;
@@ -60033,7 +60058,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;
@@ -78987,7 +79012,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.");
@@ -79026,7 +79051,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) {
@@ -89895,6 +89920,31 @@ const _sfc_main$1 = /* @__PURE__ */ defineComponent({
       },
       { 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;
@@ -89919,6 +89969,71 @@ const _sfc_main$1 = /* @__PURE__ */ defineComponent({
         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);
@@ -90230,7 +90345,7 @@ const _sfc_main$1 = /* @__PURE__ */ 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(
@@ -90263,13 +90378,17 @@ const _sfc_main$1 = /* @__PURE__ */ defineComponent({
               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", () => {
@@ -90329,6 +90448,11 @@ const _sfc_main$1 = /* @__PURE__ */ defineComponent({
     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) {
@@ -90359,6 +90483,12 @@ const _sfc_main$1 = /* @__PURE__ */ 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;
     });
@@ -90370,18 +90500,28 @@ const _sfc_main$1 = /* @__PURE__ */ defineComponent({
         __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",
@@ -90486,7 +90626,7 @@ const _sfc_main$1 = /* @__PURE__ */ defineComponent({
     };
   }
 });
-const SuperEditor = /* @__PURE__ */ _export_sfc(_sfc_main$1, [["__scopeId", "data-v-3e9da07c"]]);
+const SuperEditor = /* @__PURE__ */ _export_sfc(_sfc_main$1, [["__scopeId", "data-v-f5c4f915"]]);
 const _hoisted_1 = ["innerHTML"];
 const _sfc_main = {
   __name: "SuperInput",