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

package/dist/chunks/{super-editor.es-CzBIlSB8.cjs → super-editor.es-DxG6ckVG.cjs}

@@ -42326,7 +42326,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);
   }
   /**
@@ -59515,7 +59515,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) {
@@ -60304,7 +60304,7 @@ const _Editor = class _Editor2 extends EventEmitter$1 {
       { default: remarkStringify },
       { default: remarkGfm }
     ] = await Promise.all([
-      Promise.resolve().then(() => require("./index-DruHtc6s-CBCtA0Ud.cjs")),
+      Promise.resolve().then(() => require("./index-qXb-Hmel-BPsIpdLY.cjs")),
       Promise.resolve().then(() => require("./index-DRCvimau-H4Ck3S9a.cjs")),
       Promise.resolve().then(() => require("./index-C_x_N6Uh-Db3CUJMX.cjs")),
       Promise.resolve().then(() => require("./index-D_sWOSiG-BtDZzJ6I.cjs")),
@@ -60509,7 +60509,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");
@@ -85086,6 +85086,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).
    *
@@ -85551,6 +85654,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.
@@ -88445,9 +88616,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);
@@ -89865,6 +90053,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 = {}) {
@@ -123009,7 +123200,7 @@ const _sfc_main$8 = {
     vue.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;
@@ -123043,7 +123234,7 @@ const _sfc_main$8 = {
     });
     vue.onBeforeUnmount(() => {
       document.removeEventListener("keydown", handleGlobalKeyDown);
-      document.removeEventListener("mousedown", handleGlobalOutsideClick);
+      document.removeEventListener("pointerdown", handleGlobalOutsideClick);
       cleanupCustomItems();
       if (props.editor) {
         try {
@@ -123067,7 +123258,7 @@ const _sfc_main$8 = {
         ref: menuRef,
         class: "slash-menu",
         style: vue.normalizeStyle(menuPosition.value),
-        onMousedown: _cache[2] || (_cache[2] = vue.withModifiers(() => {
+        onPointerdown: _cache[2] || (_cache[2] = vue.withModifiers(() => {
         }, ["stop"]))
       }, [
         vue.withDirectives(vue.createBaseVNode("input", {
@@ -123179,6 +123370,7 @@ const _sfc_main$6 = {
     const rulerHandleActiveColor = vue.ref("#2563EB66");
     const pageSize = vue.ref(null);
     const pageMargins = vue.ref(null);
+    const currentSectionIndex = vue.ref(0);
     const isDragging = vue.ref(false);
     const currentHandle = vue.ref(null);
     const leftHandle = vue.reactive({ side: "left", x: 0 });
@@ -123186,9 +123378,29 @@ const _sfc_main$6 = {
     const showVerticalIndicator = vue.ref(false);
     const initialX = vue.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 definition = generateRulerDefinition({
@@ -123202,7 +123414,7 @@ const _sfc_main$6 = {
       });
       leftHandle.x = definition.leftMarginPx;
       rightHandle.x = definition.rightMarginPx;
-      return definition;
+      rulerDefinition.value = definition;
     };
     const getTickStyle = vue.computed(() => (tick) => {
       return {
@@ -123256,7 +123468,8 @@ const _sfc_main$6 = {
         const marginValue = getNewMarginValue();
         emit("margin-change", {
           side: currentHandle.value.side,
-          value: marginValue
+          value: marginValue,
+          sectionIndex: currentSectionIndex.value
         });
       }
     };
@@ -123280,12 +123493,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;
+    };
+    vue.watch(
+      () => props.editor,
+      (newEditor, oldEditor) => {
+        if (oldEditor && selectionUpdateHandler) {
+          oldEditor.off("selectionUpdate", selectionUpdateHandler);
+        }
+        if (newEditor) {
+          setupEditorListeners();
+          updateRulerForCurrentSection();
+        }
+      }
+    );
     vue.onMounted(() => {
-      rulerDefinition.value = initRuler();
+      updateRulerForCurrentSection();
+      setupEditorListeners();
       window.addEventListener("mousemove", handleMouseMove2);
       window.addEventListener("mouseup", handleMouseUp);
     });
     vue.onUnmounted(() => {
+      cleanupEditorListeners();
       window.removeEventListener("mousemove", handleMouseMove2);
       window.removeEventListener("mouseup", handleMouseUp);
     });
@@ -123326,7 +123567,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: {

package/dist/style.css

@@ -2189,7 +2189,7 @@ https://github.com/ProseMirror/prosemirror-tables/blob/master/demo/index.html
   margin: 4px 0;
 }
 .tippy-box[data-animation=fade][data-state=hidden]{opacity:0}[data-tippy-root]{max-width:calc(100vw - 10px)}.tippy-box{position:relative;background-color:#333;color:#fff;border-radius:4px;font-size:14px;line-height:1.4;white-space:normal;outline:0;transition-property:transform,visibility,opacity}.tippy-box[data-placement^=top]>.tippy-arrow{bottom:0}.tippy-box[data-placement^=top]>.tippy-arrow:before{bottom:-7px;left:0;border-width:8px 8px 0;border-top-color:initial;transform-origin:center top}.tippy-box[data-placement^=bottom]>.tippy-arrow{top:0}.tippy-box[data-placement^=bottom]>.tippy-arrow:before{top:-7px;left:0;border-width:0 8px 8px;border-bottom-color:initial;transform-origin:center bottom}.tippy-box[data-placement^=left]>.tippy-arrow{right:0}.tippy-box[data-placement^=left]>.tippy-arrow:before{border-width:8px 0 8px 8px;border-left-color:initial;right:-7px;transform-origin:center left}.tippy-box[data-placement^=right]>.tippy-arrow{left:0}.tippy-box[data-placement^=right]>.tippy-arrow:before{left:-7px;border-width:8px 8px 8px 0;border-right-color:initial;transform-origin:center right}.tippy-box[data-inertia][data-state=visible]{transition-timing-function:cubic-bezier(.54,1.5,.38,1.11)}.tippy-arrow{width:16px;height:16px;color:#333}.tippy-arrow:before{content:"";position:absolute;border-color:transparent;border-style:solid}.tippy-content{position:relative;padding:5px 9px;z-index:1}
-.vertical-indicator[data-v-b9f4f30a] {
+.vertical-indicator[data-v-0d1b9cd1] {
   position: absolute;
   height: 0px;
   min-width: 1px;
@@ -2197,7 +2197,7 @@ https://github.com/ProseMirror/prosemirror-tables/blob/master/demo/index.html
   top: 20px;
   z-index: 100;
 }
-.margin-handle[data-v-b9f4f30a] {
+.margin-handle[data-v-0d1b9cd1] {
   width: 56px;
   min-width: 5px;
   max-width: 5px;
@@ -2210,10 +2210,10 @@ https://github.com/ProseMirror/prosemirror-tables/blob/master/demo/index.html
   transition: background-color 250ms ease;
   z-index: 10;
 }
-.margin-handle[data-v-b9f4f30a]:hover {
+.margin-handle[data-v-0d1b9cd1]:hover {
   background-color: var(--ruler-handle-active-color);
 }
-.ruler[data-v-b9f4f30a] {
+.ruler[data-v-0d1b9cd1] {
   height: 25px;
   width: var(--ruler-width, 8.5in);
   margin: 0;
@@ -2221,14 +2221,13 @@ https://github.com/ProseMirror/prosemirror-tables/blob/master/demo/index.html
   box-sizing: border-box;
   position: relative;
   color: #666;
+  transition: width 150ms ease-out;
 }
-
-/* Tick marks - using absolute positioning from ruler-core */
-.ruler-tick[data-v-b9f4f30a] {
+.ruler-tick[data-v-0d1b9cd1] {
   pointer-events: none;
   user-select: none;
 }
-.numbering[data-v-b9f4f30a] {
+.numbering[data-v-0d1b9cd1] {
   position: absolute;
   top: -16px;
   left: -2px;

package/dist/super-editor/ai-writer.es.js

@@ -1,6 +1,6 @@
 import { ref, onMounted, onUnmounted, computed, createElementBlock, openBlock, withModifiers, createElementVNode, withDirectives, unref, vModelText, createCommentVNode, nextTick } from "vue";
-import { T as TextSelection } from "./chunks/converter-B4HiY8pI.js";
-import { _ as _export_sfc } from "./chunks/editor-C9smgNs-.js";
+import { T as TextSelection } from "./chunks/converter-JlOFMM88.js";
+import { _ as _export_sfc } from "./chunks/editor-CNzx36Ms.js";
 const DEFAULT_API_ENDPOINT = "https://sd-dev-express-gateway-i6xtm.ondigitalocean.app/insights";
 const SYSTEM_PROMPT = "You are an expert copywriter and you are immersed in a document editor. You are to provide document related text responses based on the user prompts. Only write what is asked for. Do not provide explanations. Try to keep placeholders as short as possible. Do not output your prompt. Your instructions are: ";
 async function baseInsightsFetch(payload, options = {}) {

package/dist/super-editor/chunks/{converter-B4HiY8pI.js → converter-JlOFMM88.js}

@@ -42626,7 +42626,7 @@ const _SuperConverter = class _SuperConverter {
   static getStoredSuperdocVersion(docx) {
     return _SuperConverter.getStoredCustomProperty(docx, "SuperdocVersion");
   }
-  static setStoredSuperdocVersion(docx = this.convertedXml, version = "1.0.0-beta.70") {
+  static setStoredSuperdocVersion(docx = this.convertedXml, version = "1.0.0-beta.72") {
     return _SuperConverter.setStoredCustomProperty(docx, "SuperdocVersion", version, false);
   }
   /**

package/dist/super-editor/chunks/{docx-zipper-D7YJSyKT.js → docx-zipper-BVmpz1K_.js}

@@ -1,4 +1,4 @@
-import { p as process$1, aJ as commonjsGlobal, B as Buffer, aK as getDefaultExportFromCjs, aL as getContentTypesFromXml, aM as xmljs } from "./converter-B4HiY8pI.js";
+import { p as process$1, aJ as commonjsGlobal, B as Buffer, aK as getDefaultExportFromCjs, aL as getContentTypesFromXml, aM as xmljs } from "./converter-JlOFMM88.js";
 function commonjsRequire(path) {
   throw new Error('Could not dynamically require "' + path + '". Please configure the dynamicRequireTargets or/and ignoreDynamicRequires option of @rollup/plugin-commonjs appropriately for this require call to work.');
 }