superdoc 1.0.0-beta.70 → 1.0.0-beta.72

package/dist/chunks/{PdfViewer-Li0IVylM.cjs → PdfViewer-BxCLl7Q6.cjs}

@@ -1,7 +1,7 @@
 "use strict";
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const vue = require("./vue-jWLMl8Ts.cjs");
-const superdoc = require("./index-CJCOemVA.cjs");
+const superdoc = require("./index-CAQDtLex.cjs");
 function self(vars) {
   const {
     opacityDisabled,

package/dist/chunks/{PdfViewer-DSqV0wBl.es.js → PdfViewer-Dg-qiC1A.es.js}

@@ -1,5 +1,5 @@
 import { y as defineComponent, z as h, O as Transition, a0 as process$1, J as watchEffect, a as computed, r as ref, j as onMounted, W as onUnmounted, b as createElementBlock, o as openBlock, f as createBaseVNode, e as createCommentVNode, u as createVNode, v as unref } from "./vue-Dysv_7z5.es.js";
-import { d as derived, c, a as cB, f as fadeInTransition, b as cM, N as NBaseLoading, w as warnOnce, u as useConfig, e as useTheme, p as pxfy, g as createKey, h as useThemeClass, i as useCompitable, _ as _export_sfc, j as useSuperdocStore, s as storeToRefs, k as useSelection } from "./index-atbbnwyB.es.js";
+import { d as derived, c, a as cB, f as fadeInTransition, b as cM, N as NBaseLoading, w as warnOnce, u as useConfig, e as useTheme, p as pxfy, g as createKey, h as useThemeClass, i as useCompitable, _ as _export_sfc, j as useSuperdocStore, s as storeToRefs, k as useSelection } from "./index-B1AqHbuy.es.js";
 function self(vars) {
   const {
     opacityDisabled,

package/dist/chunks/{index-atbbnwyB.es.js → index-B1AqHbuy.es.js}

@@ -1,4 +1,4 @@
-import { q as index, C as CommentsPluginKey, h as TrackChangesBasePluginKey, E as Editor, n as getRichTextExtensions, f as SuperInput, P as PresentationEditor, e as SuperEditor, A as AIWriter, g as SuperToolbar, i as createZip } from "./super-editor.es-4JNmJF9G.es.js";
+import { q as index, C as CommentsPluginKey, h as TrackChangesBasePluginKey, E as Editor, n as getRichTextExtensions, f as SuperInput, P as PresentationEditor, e as SuperEditor, A as AIWriter, g as SuperToolbar, i as createZip } from "./super-editor.es-DPl3-zTR.es.js";
 import { B as BlankDOCX } from "./blank-docx-ABm6XYAA.es.js";
 import { E as EventEmitter } from "./eventemitter3-CcXAdeql.es.js";
 import { HocuspocusProvider, HocuspocusProviderWebsocket } from "@hocuspocus/provider";
@@ -17251,7 +17251,7 @@ const _sfc_main = {
   __name: "SuperDoc",
   emits: ["selection-update"],
   setup(__props, { emit: __emit }) {
-    const PdfViewer = defineAsyncComponent(() => import("./PdfViewer-DSqV0wBl.es.js"));
+    const PdfViewer = defineAsyncComponent(() => import("./PdfViewer-Dg-qiC1A.es.js"));
     const superdocStore = useSuperdocStore();
     const commentsStore = useCommentsStore();
     const {
@@ -18140,7 +18140,7 @@ class SuperDoc extends EventEmitter {
     this.config.colors = shuffleArray(this.config.colors);
     this.userColorMap = /* @__PURE__ */ new Map();
     this.colorIndex = 0;
-    this.version = "1.0.0-beta.70";
+    this.version = "1.0.0-beta.72";
     this.#log("🦋 [superdoc] Using SuperDoc version:", this.version);
     this.superdocId = config.superdocId || v4();
     this.colors = this.config.colors;

package/dist/chunks/{index-CJCOemVA.cjs → index-CAQDtLex.cjs}

@@ -1,5 +1,5 @@
 "use strict";
-const superEditor_es = require("./super-editor.es-CzBIlSB8.cjs");
+const superEditor_es = require("./super-editor.es-DxG6ckVG.cjs");
 const blankDocx = require("./blank-docx-DfW3Eeh2.cjs");
 const eventemitter3 = require("./eventemitter3-DQmQUge-.cjs");
 const provider = require("@hocuspocus/provider");
@@ -17268,7 +17268,7 @@ const _sfc_main = {
   __name: "SuperDoc",
   emits: ["selection-update"],
   setup(__props, { emit: __emit }) {
-    const PdfViewer = vue.defineAsyncComponent(() => Promise.resolve().then(() => require("./PdfViewer-Li0IVylM.cjs")));
+    const PdfViewer = vue.defineAsyncComponent(() => Promise.resolve().then(() => require("./PdfViewer-BxCLl7Q6.cjs")));
     const superdocStore = useSuperdocStore();
     const commentsStore = useCommentsStore();
     const {
@@ -18157,7 +18157,7 @@ class SuperDoc extends eventemitter3.EventEmitter {
     this.config.colors = shuffleArray(this.config.colors);
     this.userColorMap = /* @__PURE__ */ new Map();
     this.colorIndex = 0;
-    this.version = "1.0.0-beta.70";
+    this.version = "1.0.0-beta.72";
     this.#log("🦋 [superdoc] Using SuperDoc version:", this.version);
     this.superdocId = config.superdocId || uuid.v4();
     this.colors = this.config.colors;

package/dist/chunks/{index-DruHtc6s-CBCtA0Ud.cjs → index-qXb-Hmel-BPsIpdLY.cjs}

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-const superEditor_es = require("./super-editor.es-CzBIlSB8.cjs");
+const superEditor_es = require("./super-editor.es-DxG6ckVG.cjs");
 const indexCvBqQJbG = require("./index-CvBqQJbG-Dwm0THD7.cjs");
 function bail(error) {
   if (error) {

package/dist/chunks/{index-DruHtc6s-CPc5HSle.es.js → index-qXb-Hmel-DwJhkxdW.es.js}

@@ -1,4 +1,4 @@
-import { s as getDefaultExportFromCjs$2 } from "./super-editor.es-4JNmJF9G.es.js";
+import { s as getDefaultExportFromCjs$2 } from "./super-editor.es-DPl3-zTR.es.js";
 import { V as VFile } from "./index-CvBqQJbG-CvBqQJbG.es.js";
 function bail(error) {
   if (error) {

package/dist/chunks/{super-editor.es-4JNmJF9G.es.js → super-editor.es-DPl3-zTR.es.js}

@@ -42309,7 +42309,7 @@ const _SuperConverter = class _SuperConverter2 {
   static getStoredSuperdocVersion(docx) {
     return _SuperConverter2.getStoredCustomProperty(docx, "SuperdocVersion");
   }
-  static setStoredSuperdocVersion(docx = this.convertedXml, version2 = "1.0.0-beta.70") {
+  static setStoredSuperdocVersion(docx = this.convertedXml, version2 = "1.0.0-beta.72") {
     return _SuperConverter2.setStoredCustomProperty(docx, "SuperdocVersion", version2, false);
   }
   /**
@@ -59498,7 +59498,7 @@ const isHeadless = (editor) => {
 const shouldSkipNodeView = (editor) => {
   return isHeadless(editor);
 };
-const summaryVersion = "1.0.0-beta.70";
+const summaryVersion = "1.0.0-beta.72";
 const nodeKeys = ["group", "content", "marks", "inline", "atom", "defining", "code", "tableRole", "summary"];
 const markKeys = ["group", "inclusive", "excludes", "spanning", "code"];
 function mapAttributes(attrs) {
@@ -60287,7 +60287,7 @@ const _Editor = class _Editor2 extends EventEmitter$1 {
       { default: remarkStringify },
       { default: remarkGfm }
     ] = await Promise.all([
-      import("./index-DruHtc6s-CPc5HSle.es.js"),
+      import("./index-qXb-Hmel-DwJhkxdW.es.js"),
       import("./index-DRCvimau-Cw339678.es.js"),
       import("./index-C_x_N6Uh-DJn8hIEt.es.js"),
       import("./index-D_sWOSiG-DE96TaT5.es.js"),
@@ -60492,7 +60492,7 @@ const _Editor = class _Editor2 extends EventEmitter$1 {
    * Process collaboration migrations
    */
   processCollaborationMigrations() {
-    console.debug("[checkVersionMigrations] Current editor version", "1.0.0-beta.70");
+    console.debug("[checkVersionMigrations] Current editor version", "1.0.0-beta.72");
     if (!this.options.ydoc) return;
     const metaMap = this.options.ydoc.getMap("meta");
     let docVersion = metaMap.get("version");
@@ -85069,6 +85069,109 @@ const _PresentationEditor = class _PresentationEditor2 extends EventEmitter$1 {
     const activeEditor = this.getActiveEditor();
     return activeEditor.commands;
   }
+  /**
+   * Get the ProseMirror editor state for the currently active editor (header/footer-aware).
+   *
+   * This property dynamically returns the state from the appropriate editor instance:
+   * - In body mode, returns the main editor's state
+   * - In header/footer mode, returns the active header/footer editor's state
+   *
+   * This enables components like SlashMenu and context menus to access document
+   * state, selection, and schema information in the correct editing context.
+   *
+   * @returns The EditorState for the active editor
+   *
+   * @example
+   * ```typescript
+   * const { selection, doc } = presentationEditor.state;
+   * const selectedText = doc.textBetween(selection.from, selection.to);
+   * ```
+   */
+  get state() {
+    return this.getActiveEditor().state;
+  }
+  /**
+   * Check if the editor is currently editable (header/footer-aware).
+   *
+   * This property checks the editable state of the currently active editor:
+   * - In body mode, returns whether the main editor is editable
+   * - In header/footer mode, returns whether the header/footer editor is editable
+   *
+   * The editor may be non-editable due to:
+   * - Document mode set to 'viewing'
+   * - Explicit `editable: false` option
+   * - Editor not fully initialized
+   *
+   * @returns true if the active editor accepts input, false otherwise
+   *
+   * @example
+   * ```typescript
+   * if (presentationEditor.isEditable) {
+   *   presentationEditor.commands.insertText('Hello');
+   * }
+   * ```
+   */
+  get isEditable() {
+    return this.getActiveEditor().isEditable;
+  }
+  /**
+   * Get the editor options for the currently active editor (header/footer-aware).
+   *
+   * This property returns the options object from the appropriate editor instance,
+   * providing access to configuration like document mode, AI settings, and custom
+   * slash menu configuration.
+   *
+   * @returns The options object for the active editor
+   *
+   * @example
+   * ```typescript
+   * const { documentMode, isAiEnabled } = presentationEditor.options;
+   * ```
+   */
+  get options() {
+    return this.getActiveEditor().options;
+  }
+  /**
+   * Dispatch a ProseMirror transaction to the currently active editor (header/footer-aware).
+   *
+   * This method routes transactions to the appropriate editor instance:
+   * - In body mode, dispatches to the main editor
+   * - In header/footer mode, dispatches to the active header/footer editor
+   *
+   * Use this for direct state manipulation when commands are insufficient.
+   * For most use cases, prefer using `commands` or `dispatchInActiveEditor`.
+   *
+   * @param tr - The ProseMirror transaction to dispatch
+   *
+   * @example
+   * ```typescript
+   * const { state } = presentationEditor;
+   * const tr = state.tr.insertText('Hello', state.selection.from);
+   * presentationEditor.dispatch(tr);
+   * ```
+   */
+  dispatch(tr) {
+    const activeEditor = this.getActiveEditor();
+    activeEditor.view?.dispatch(tr);
+  }
+  /**
+   * Focus the editor, routing focus to the appropriate editing surface.
+   *
+   * In PresentationEditor, the actual ProseMirror EditorView is hidden and input
+   * is bridged from the visible layout surface. This method focuses the hidden
+   * editor view to enable keyboard input while the visual focus remains on the
+   * rendered presentation.
+   *
+   * @example
+   * ```typescript
+   * // After closing a modal, restore focus to the editor
+   * presentationEditor.focus();
+   * ```
+   */
+  focus() {
+    const activeEditor = this.getActiveEditor();
+    activeEditor.view?.focus();
+  }
   /**
    * Returns the currently active editor (body or header/footer session).
    *
@@ -85534,6 +85637,74 @@ const _PresentationEditor = class _PresentationEditor2 extends EventEmitter$1 {
   getLayoutOptions() {
     return { ...__privateGet$1(this, _layoutOptions) };
   }
+  /**
+   * Get the page styles for the section containing the current caret position.
+   *
+   * In multi-section documents, different sections can have different page sizes,
+   * margins, and orientations. This method returns the styles for the section
+   * where the caret is currently located, enabling section-aware UI components
+   * like rulers to display accurate information.
+   *
+   * @returns Object containing:
+   *   - pageSize: { width, height } in inches
+   *   - pageMargins: { left, right, top, bottom } in inches
+   *   - sectionIndex: The current section index (0-based)
+   *   - orientation: 'portrait' or 'landscape'
+   *
+   * Falls back to document-level defaults if section info is unavailable.
+   *
+   * @example
+   * ```typescript
+   * const sectionStyles = presentation.getCurrentSectionPageStyles();
+   * console.log(`Section ${sectionStyles.sectionIndex}: ${sectionStyles.pageSize.width}" x ${sectionStyles.pageSize.height}"`);
+   * ```
+   */
+  getCurrentSectionPageStyles() {
+    const PPI2 = 96;
+    const layout = __privateGet$1(this, _layoutState).layout;
+    const pageIndex = __privateMethod$1(this, _PresentationEditor_instances, getCurrentPageIndex_fn).call(this);
+    const page = layout?.pages?.[pageIndex];
+    const converterStyles = __privateGet$1(this, _editor3).converter?.pageStyles ?? {};
+    const defaultMargins = converterStyles.pageMargins ?? { left: 1, right: 1, top: 1, bottom: 1 };
+    const safeMargins = {
+      left: typeof defaultMargins.left === "number" ? defaultMargins.left : 1,
+      right: typeof defaultMargins.right === "number" ? defaultMargins.right : 1,
+      top: typeof defaultMargins.top === "number" ? defaultMargins.top : 1,
+      bottom: typeof defaultMargins.bottom === "number" ? defaultMargins.bottom : 1
+    };
+    if (!page) {
+      return {
+        pageSize: { width: 8.5, height: 11 },
+        pageMargins: safeMargins,
+        sectionIndex: 0,
+        orientation: "portrait"
+      };
+    }
+    const pageOrientation = page.orientation === "landscape" || page.orientation === "portrait" ? page.orientation : "portrait";
+    const standardPortrait = { w: 8.5 * PPI2, h: 11 * PPI2 };
+    const standardLandscape = { w: 11 * PPI2, h: 8.5 * PPI2 };
+    const orientationDefault = pageOrientation === "landscape" ? standardLandscape : standardPortrait;
+    const pageWidthPx = page.size?.w ?? orientationDefault.w;
+    const pageHeightPx = page.size?.h ?? orientationDefault.h;
+    const marginLeftPx = page.margins?.left ?? safeMargins.left * PPI2;
+    const marginRightPx = page.margins?.right ?? safeMargins.right * PPI2;
+    const marginTopPx = page.margins?.top ?? safeMargins.top * PPI2;
+    const marginBottomPx = page.margins?.bottom ?? safeMargins.bottom * PPI2;
+    return {
+      pageSize: {
+        width: pageWidthPx / PPI2,
+        height: pageHeightPx / PPI2
+      },
+      pageMargins: {
+        left: marginLeftPx / PPI2,
+        right: marginRightPx / PPI2,
+        top: marginTopPx / PPI2,
+        bottom: marginBottomPx / PPI2
+      },
+      sectionIndex: page.sectionIndex ?? 0,
+      orientation: pageOrientation
+    };
+  }
   /**
    * Get current remote cursor states (normalized to absolute PM positions).
    * Returns an array of cursor states for all remote collaborators, excluding the local user.
@@ -88428,9 +88599,26 @@ getCurrentPageIndex_fn = function() {
   }
   const layout = __privateGet$1(this, _layoutState).layout;
   const selection = __privateGet$1(this, _editor3).state?.selection;
-  if (!layout || !selection) return 0;
+  if (!layout || !selection) {
+    return 0;
+  }
   const rects = selectionToRects(layout, __privateGet$1(this, _layoutState).blocks, __privateGet$1(this, _layoutState).measures, selection.from, selection.to) ?? [];
-  return rects[0]?.pageIndex ?? 0;
+  if (rects.length > 0) {
+    return rects[0]?.pageIndex ?? 0;
+  }
+  const pos = selection.from;
+  for (let pageIdx = 0; pageIdx < layout.pages.length; pageIdx++) {
+    const page = layout.pages[pageIdx];
+    for (const fragment of page.fragments) {
+      const frag = fragment;
+      if (frag.pmStart != null && frag.pmEnd != null) {
+        if (pos >= frag.pmStart && pos <= frag.pmEnd) {
+          return pageIdx;
+        }
+      }
+    }
+  }
+  return 0;
 };
 findRegionForPage_fn = function(kind, pageIndex) {
   const map22 = kind === "header" ? __privateGet$1(this, _headerRegions) : __privateGet$1(this, _footerRegions);
@@ -89848,6 +90036,9 @@ const processAiHighlights = (editor, doc2, highlightColor, customClass = null) =
 };
 function getEditorSurfaceElement(editor) {
   if (!editor) return null;
+  if (typeof editor.hitTest === "function" && editor.element instanceof HTMLElement) {
+    return editor.element;
+  }
   return editor.presentationEditor?.element ?? editor.view?.dom ?? editor.options?.element ?? null;
 }
 function getSurfaceRelativePoint(editor, eventLocation = {}) {
@@ -122992,7 +123183,7 @@ const _sfc_main$8 = {
     onMounted(() => {
       if (!props.editor) return;
       document.addEventListener("keydown", handleGlobalKeyDown);
-      document.addEventListener("mousedown", handleGlobalOutsideClick);
+      document.addEventListener("pointerdown", handleGlobalOutsideClick);
       props.editor.on("update", handleEditorUpdate);
       slashMenuOpenHandler = async (event) => {
         const readOnly = !props.editor?.isEditable;
@@ -123026,7 +123217,7 @@ const _sfc_main$8 = {
     });
     onBeforeUnmount(() => {
       document.removeEventListener("keydown", handleGlobalKeyDown);
-      document.removeEventListener("mousedown", handleGlobalOutsideClick);
+      document.removeEventListener("pointerdown", handleGlobalOutsideClick);
       cleanupCustomItems();
       if (props.editor) {
         try {
@@ -123050,7 +123241,7 @@ const _sfc_main$8 = {
         ref: menuRef,
         class: "slash-menu",
         style: normalizeStyle(menuPosition.value),
-        onMousedown: _cache[2] || (_cache[2] = withModifiers(() => {
+        onPointerdown: _cache[2] || (_cache[2] = withModifiers(() => {
         }, ["stop"]))
       }, [
         withDirectives(createBaseVNode("input", {
@@ -123162,6 +123353,7 @@ const _sfc_main$6 = {
     const rulerHandleActiveColor = ref$1("#2563EB66");
     const pageSize = ref$1(null);
     const pageMargins = ref$1(null);
+    const currentSectionIndex = ref$1(0);
     const isDragging = ref$1(false);
     const currentHandle = ref$1(null);
     const leftHandle = reactive({ side: "left", x: 0 });
@@ -123169,9 +123361,29 @@ const _sfc_main$6 = {
     const showVerticalIndicator = ref$1(false);
     const initialX = ref$1(0);
     let offsetX = 0;
-    const initRuler = () => {
-      if (props.editor.options.mode !== "docx") return null;
-      const { pageMargins: docMargins, pageSize: docSize } = props.editor.getPageStyles();
+    let selectionUpdateHandler = null;
+    const getPresentationEditor = () => {
+      return props.editor?.presentationEditor ?? null;
+    };
+    const updateRulerForCurrentSection = () => {
+      if (!props.editor || props.editor.options?.mode !== "docx") return;
+      const presentationEditor = getPresentationEditor();
+      let docSize, docMargins, sectionIndex;
+      if (presentationEditor && typeof presentationEditor.getCurrentSectionPageStyles === "function") {
+        const sectionStyles = presentationEditor.getCurrentSectionPageStyles();
+        docSize = sectionStyles.pageSize;
+        docMargins = sectionStyles.pageMargins;
+        sectionIndex = sectionStyles.sectionIndex;
+      } else {
+        const styles = props.editor.getPageStyles();
+        docSize = styles.pageSize ?? { width: 8.5, height: 11 };
+        docMargins = styles.pageMargins ?? { left: 1, right: 1, top: 1, bottom: 1 };
+        sectionIndex = 0;
+      }
+      if (pageSize.value && currentSectionIndex.value === sectionIndex) {
+        return;
+      }
+      currentSectionIndex.value = sectionIndex;
       pageSize.value = docSize;
       pageMargins.value = docMargins;
       const definition = generateRulerDefinition({
@@ -123185,7 +123397,7 @@ const _sfc_main$6 = {
       });
       leftHandle.x = definition.leftMarginPx;
       rightHandle.x = definition.rightMarginPx;
-      return definition;
+      rulerDefinition.value = definition;
     };
     const getTickStyle = computed(() => (tick) => {
       return {
@@ -123239,7 +123451,8 @@ const _sfc_main$6 = {
         const marginValue = getNewMarginValue();
         emit("margin-change", {
           side: currentHandle.value.side,
-          value: marginValue
+          value: marginValue,
+          sectionIndex: currentSectionIndex.value
         });
       }
     };
@@ -123263,12 +123476,40 @@ const _sfc_main$6 = {
         "--ruler-width": `${width}px`
       };
     });
+    const handleSelectionUpdate = () => {
+      if (isDragging.value) return;
+      updateRulerForCurrentSection();
+    };
+    const setupEditorListeners = () => {
+      if (!props.editor) return;
+      selectionUpdateHandler = handleSelectionUpdate;
+      props.editor.on("selectionUpdate", selectionUpdateHandler);
+    };
+    const cleanupEditorListeners = () => {
+      if (!props.editor || !selectionUpdateHandler) return;
+      props.editor.off("selectionUpdate", selectionUpdateHandler);
+      selectionUpdateHandler = null;
+    };
+    watch(
+      () => props.editor,
+      (newEditor, oldEditor) => {
+        if (oldEditor && selectionUpdateHandler) {
+          oldEditor.off("selectionUpdate", selectionUpdateHandler);
+        }
+        if (newEditor) {
+          setupEditorListeners();
+          updateRulerForCurrentSection();
+        }
+      }
+    );
     onMounted(() => {
-      rulerDefinition.value = initRuler();
+      updateRulerForCurrentSection();
+      setupEditorListeners();
       window.addEventListener("mousemove", handleMouseMove2);
       window.addEventListener("mouseup", handleMouseUp);
     });
     onUnmounted(() => {
+      cleanupEditorListeners();
       window.removeEventListener("mousemove", handleMouseMove2);
       window.removeEventListener("mouseup", handleMouseUp);
     });
@@ -123309,7 +123550,7 @@ const _sfc_main$6 = {
     };
   }
 };
-const Ruler = /* @__PURE__ */ _export_sfc(_sfc_main$6, [["__scopeId", "data-v-b9f4f30a"]]);
+const Ruler = /* @__PURE__ */ _export_sfc(_sfc_main$6, [["__scopeId", "data-v-0d1b9cd1"]]);
 const _sfc_main$5 = {
   __name: "GenericPopover",
   props: {