@harbour-enterprises/superdoc 1.0.0-beta.70 → 1.0.0-beta.72

package/dist/superdoc.umd.js

@@ -42327,7 +42327,7 @@ Please report this to https://github.com/markedjs/marked.`, e) {
     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);
     }
     /**
@@ -67373,7 +67373,7 @@ Please report this to https://github.com/markedjs/marked.`, e) {
   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) {
@@ -68162,7 +68162,7 @@ Please report this to https://github.com/markedjs/marked.`, e) {
         { default: remarkStringify2 },
         { default: remarkGfm2 }
       ] = await Promise.all([
-        Promise.resolve().then(() => indexDruHtc6s),
+        Promise.resolve().then(() => indexQXbHmel),
         Promise.resolve().then(() => indexDRCvimau),
         Promise.resolve().then(() => indexC_x_N6Uh),
         Promise.resolve().then(() => indexD_sWOSiG),
@@ -68367,7 +68367,7 @@ Please report this to https://github.com/markedjs/marked.`, e) {
      * 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");
@@ -92944,6 +92944,109 @@ ${l}
       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).
      *
@@ -93409,6 +93512,74 @@ ${l}
     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.
@@ -96303,9 +96474,26 @@ ${l}
     }
     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 map2 = kind === "header" ? __privateGet$1(this, _headerRegions) : __privateGet$1(this, _footerRegions);
@@ -97723,6 +97911,9 @@ ${l}
   };
   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 = {}) {
@@ -130867,7 +131058,7 @@ ${style2}
       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;
@@ -130901,7 +131092,7 @@ ${style2}
       });
       onBeforeUnmount(() => {
         document.removeEventListener("keydown", handleGlobalKeyDown);
-        document.removeEventListener("mousedown", handleGlobalOutsideClick);
+        document.removeEventListener("pointerdown", handleGlobalOutsideClick);
         cleanupCustomItems();
         if (props.editor) {
           try {
@@ -130925,7 +131116,7 @@ ${style2}
           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", {
@@ -131010,6 +131201,7 @@ ${style2}
       const rulerHandleActiveColor = ref("#2563EB66");
       const pageSize = ref(null);
       const pageMargins = ref(null);
+      const currentSectionIndex = ref(0);
       const isDragging = ref(false);
       const currentHandle = ref(null);
       const leftHandle = reactive({ side: "left", x: 0 });
@@ -131017,9 +131209,29 @@ ${style2}
       const showVerticalIndicator = ref(false);
       const initialX = ref(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 definition2 = generateRulerDefinition({
@@ -131033,7 +131245,7 @@ ${style2}
         });
         leftHandle.x = definition2.leftMarginPx;
         rightHandle.x = definition2.rightMarginPx;
-        return definition2;
+        rulerDefinition.value = definition2;
       };
       const getTickStyle = computed(() => (tick) => {
         return {
@@ -131087,7 +131299,8 @@ ${style2}
           const marginValue = getNewMarginValue();
           emit2("margin-change", {
             side: currentHandle.value.side,
-            value: marginValue
+            value: marginValue,
+            sectionIndex: currentSectionIndex.value
           });
         }
       };
@@ -131111,12 +131324,40 @@ ${style2}
           "--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);
       });
@@ -131157,7 +131398,7 @@ ${style2}
       };
     }
   };
-  const Ruler = /* @__PURE__ */ _export_sfc$1(_sfc_main$6$1, [["__scopeId", "data-v-b9f4f30a"]]);
+  const Ruler = /* @__PURE__ */ _export_sfc$1(_sfc_main$6$1, [["__scopeId", "data-v-0d1b9cd1"]]);
   const _sfc_main$5$1 = {
     __name: "GenericPopover",
     props: {
@@ -150147,7 +150388,7 @@ ${style2}
       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 = config2.superdocId || v4();
       this.colors = this.config.colors;
@@ -152619,7 +152860,7 @@ ${style2}
       value && typeof value === "object" && "byteLength" in value && "byteOffset" in value
     );
   }
-  const indexDruHtc6s = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
+  const indexQXbHmel = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
     __proto__: null,
     unified
   }, Symbol.toStringTag, { value: "Module" }));