docxodus 9.1.0 → 9.1.1

package/dist/embed.bundle.js

@@ -3045,6 +3045,28 @@ function diffUnits(oldUnids, newUnits) {
   }
   while (i < n) removed.push(i++);
   while (j < m) added.push(j++);
+  const bareUnid = (token) => {
+    const bar = token.indexOf("|");
+    return bar < 0 ? token : token.slice(0, bar);
+  };
+  const substituted = [];
+  const usedRemoved = /* @__PURE__ */ new Set();
+  const removedByUnid = /* @__PURE__ */ new Map();
+  for (const oi of removed) {
+    const u = bareUnid(oldUnids[oi]);
+    (removedByUnid.get(u) ?? removedByUnid.set(u, []).get(u)).push(oi);
+  }
+  const unmatchedAdded = [];
+  for (const nj of added) {
+    const candidates = removedByUnid.get(bareUnid(newUnids[nj]));
+    const oi = candidates?.find((i2) => !usedRemoved.has(i2));
+    if (oi !== void 0) {
+      substituted.push({ oldIndex: oi, newIndex: nj });
+      usedRemoved.add(oi);
+    } else {
+      unmatchedAdded.push(nj);
+    }
+  }
   const keptBeforeOld = (oi) => {
     let c = 0;
     for (const v of keep.values()) if (v < oi) c++;
@@ -3055,9 +3077,7 @@ function diffUnits(oldUnids, newUnits) {
     for (const k of keep.keys()) if (k < nj) c++;
     return c;
   };
-  const substituted = [];
-  const usedRemoved = /* @__PURE__ */ new Set();
-  for (const nj of added) {
+  for (const nj of unmatchedAdded) {
     const target = keptBeforeNew(nj);
     for (const oi of removed) {
       if (usedRemoved.has(oi)) continue;
@@ -3261,6 +3281,33 @@ function contentPositionIn(el, offset) {
   if (lastText) return { node: lastText, offset: (lastText.textContent ?? "").length };
   return { node: el, offset: el.childNodes.length };
 }
+function caretPointFromClient(doc, clientX, clientY) {
+  const caretDoc = doc;
+  const position = caretDoc.caretPositionFromPoint?.(clientX, clientY);
+  if (position) return { node: position.offsetNode, offset: position.offset };
+  const range = caretDoc.caretRangeFromPoint?.(clientX, clientY);
+  return range ? { node: range.startContainer, offset: range.startOffset } : null;
+}
+function setSelectionBetween(anchor, focus) {
+  const sel = typeof window !== "undefined" ? window.getSelection() : null;
+  if (!sel || !anchor.node.isConnected || !focus.node.isConnected) return false;
+  try {
+    const probe = document.createRange();
+    probe.setStart(anchor.node, anchor.offset);
+    probe.collapse(true);
+    const focusIsBefore = probe.comparePoint(focus.node, focus.offset) < 0;
+    const range = document.createRange();
+    const start = focusIsBefore ? focus : anchor;
+    const end = focusIsBefore ? anchor : focus;
+    range.setStart(start.node, start.offset);
+    range.setEnd(end.node, end.offset);
+    sel.removeAllRanges();
+    sel.addRange(range);
+    return true;
+  } catch {
+    return false;
+  }
+}
 function placeCaretAtOffset(el, offset) {
   const sel = typeof window !== "undefined" ? window.getSelection() : null;
   if (!sel) return;
@@ -3426,6 +3473,15 @@ var DocxEditor = class _DocxEditor {
      * block, and cleared when a caret is collapsed inside a block (so it never goes stale).
      */
     this.lastSelection = null;
+    /**
+     * Stable bookmark for a selection spanning independent editable blocks. Native controls such as
+     * a font-size combobox can take focus and collapse the live DOM selection; block ids + content
+     * offsets let the command restore that same range before applying. This is the multi-block
+     * counterpart to lastSelection above.
+     */
+    this.lastCrossBlockSelection = null;
+    /** State for the mouse-selection bridge between independent contenteditable block hosts. */
+    this.dragSelection = null;
     /** The docked header/footer bands, when `options.headerFooter` is on. */
     this.region = null;
     /** Why the last reconcile() fell back to a full remount (null = it patched). For
@@ -3437,24 +3493,92 @@ var DocxEditor = class _DocxEditor {
       const sel = typeof window !== "undefined" ? window.getSelection() : null;
       if (!sel || sel.rangeCount === 0) return;
       const range = sel.getRangeAt(0);
-      const block = this.editableBlockOf(range.commonAncestorContainer);
+      const startBlock = this.editableBlockOf(range.startContainer);
+      const endBlock = this.editableBlockOf(range.endContainer);
+      const block = startBlock ?? endBlock;
       if (!block) return;
-      const unid = block.getAttribute("data-anchor");
-      if (!unid) return;
       if (range.collapsed) {
         this.lastSelection = null;
+        this.lastCrossBlockSelection = null;
+        return;
+      }
+      if (startBlock && endBlock && startBlock !== endBlock && this.ownerRoot(startBlock) === this.ownerRoot(endBlock)) {
+        const startUnid = startBlock.getAttribute("data-anchor");
+        const endUnid = endBlock.getAttribute("data-anchor");
+        if (startUnid && endUnid) {
+          this.lastSelection = null;
+          this.lastCrossBlockSelection = {
+            startUnid,
+            startOffset: contentOffsetOf(startBlock, range.startContainer, range.startOffset),
+            endUnid,
+            endOffset: contentOffsetOf(endBlock, range.endContainer, range.endOffset)
+          };
+        }
         return;
       }
+      const unid = block.getAttribute("data-anchor");
+      if (!unid) return;
+      this.lastCrossBlockSelection = null;
       const span = selectionSpanIn(block);
       if (span) this.lastSelection = { unid, span };
     };
+    /** Start tracking a normal primary-button text drag inside one editable block. */
+    this.onMouseDown = (event) => {
+      if (this.closed || !this.options.editable || event.button !== 0) return;
+      const target = event.target instanceof Node ? event.target : null;
+      const origin = this.editableBlockOf(target);
+      if (!origin || isInMarker(target)) return;
+      const anchor = caretPointFromClient(document, event.clientX, event.clientY);
+      if (!anchor || this.editableBlockOf(anchor.node) !== origin) return;
+      this.dragSelection = { anchor, origin, crossedBlockBoundary: false };
+    };
+    /**
+     * Browsers fence native mouse selection at a contenteditable host boundary. Once a drag reaches
+     * another block in the same OOXML story, take over just that gesture and create the cross-block
+     * Selection the editor's existing multi-block command path consumes. Intra-block selection stays
+     * entirely native, and separate hosts remain intact for safe per-anchor commits.
+     */
+    this.onMouseMove = (event) => {
+      const drag = this.dragSelection;
+      if (!drag) return;
+      if ((event.buttons & 1) === 0) {
+        this.dragSelection = null;
+        return;
+      }
+      const focus = caretPointFromClient(document, event.clientX, event.clientY);
+      if (!focus || isInMarker(focus.node)) return;
+      const focusBlock = this.editableBlockOf(focus.node);
+      if (!focusBlock || this.ownerRoot(focusBlock) !== this.ownerRoot(drag.origin)) return;
+      if (focusBlock !== drag.origin) drag.crossedBlockBoundary = true;
+      if (!drag.crossedBlockBoundary) return;
+      event.preventDefault();
+      setSelectionBetween(drag.anchor, focus);
+    };
+    /** Commit the final cross-block endpoint before releasing the gesture state. */
+    this.onMouseUp = (event) => {
+      const drag = this.dragSelection;
+      if (!drag) return;
+      if (drag.crossedBlockBoundary) {
+        const focus = caretPointFromClient(document, event.clientX, event.clientY);
+        const focusBlock = focus ? this.editableBlockOf(focus.node) : null;
+        if (focus && focusBlock && this.ownerRoot(focusBlock) === this.ownerRoot(drag.origin)) {
+          event.preventDefault();
+          setSelectionBetween(drag.anchor, focus);
+        }
+      }
+      this.dragSelection = null;
+    };
     this.container = container;
     this.exports = exports;
     this.handle = handle;
     this.options = options;
     this.editRoot = container;
-    if (typeof document !== "undefined")
+    if (typeof document !== "undefined") {
       document.addEventListener("selectionchange", this.onSelectionChange);
+      document.addEventListener("mousedown", this.onMouseDown, true);
+      document.addEventListener("mousemove", this.onMouseMove, true);
+      document.addEventListener("mouseup", this.onMouseUp, true);
+    }
   }
   /** The editable block (contenteditable [data-anchor]) containing `node`, if any, within this editor.
    *  Fenced by `container`, not `editRoot`, so header/footer band blocks — which live outside the
@@ -3534,8 +3658,13 @@ var DocxEditor = class _DocxEditor {
   close() {
     if (this.closed) return;
     this.closed = true;
-    if (typeof document !== "undefined")
+    if (typeof document !== "undefined") {
       document.removeEventListener("selectionchange", this.onSelectionChange);
+      document.removeEventListener("mousedown", this.onMouseDown, true);
+      document.removeEventListener("mousemove", this.onMouseMove, true);
+      document.removeEventListener("mouseup", this.onMouseUp, true);
+    }
+    this.dragSelection = null;
     this.exports.DocxSessionBridge.CloseSession(this.handle);
   }
   /**
@@ -3843,8 +3972,7 @@ var DocxEditor = class _DocxEditor {
       this.options.onEdit?.({ anchorId: second.id, unid: second.unid });
       return;
     }
-    const firstEl = this.renderInto(first.id);
-    const secondEl = this.renderInto(second.id);
+    const [firstEl, secondEl] = this.renderTwo(first.id, second.id);
     if (!firstEl || !secondEl) return;
     const inBand = this.isBandBlock(el);
     if (!this.replaceNode(el, firstEl, secondEl)) return;
@@ -3957,6 +4085,34 @@ var DocxEditor = class _DocxEditor {
     if (html.charCodeAt(0) === 123) return null;
     return new DOMParser().parseFromString(html, "text/html").body.firstElementChild;
   }
+  /** Render two blocks in ONE batched bridge call when the bundle carries RenderBlocksHtml —
+   *  the per-render shell/converter setup is paid once instead of twice, which matters on the
+   *  Enter path (split renders both halves synchronously under the keystroke). Falls back to
+   *  two per-block renders on older bundles. Output is renderInto-identical per block (both
+   *  routes share the same extraction). */
+  renderTwo(a, b) {
+    const bridge = this.exports.DocxSessionBridge;
+    if (typeof bridge.RenderBlocksHtml === "function") {
+      try {
+        const map = JSON.parse(
+          bridge.RenderBlocksHtml(
+            this.handle,
+            JSON.stringify([a, b]),
+            this.options.cssPrefix,
+            this.options.fabricateClasses
+          )
+        );
+        if (!map.error) {
+          const parse = (h) => h ? new DOMParser().parseFromString(h, "text/html").body.firstElementChild : null;
+          const fa = parse(map[a]);
+          const fb = parse(map[b]);
+          if (fa && fb) return [fa, fb];
+        }
+      } catch {
+      }
+    }
+    return [this.renderInto(a), this.renderInto(b)];
+  }
   /** The editable block immediately before `el` within its own root, or null. */
   previousEditable(el) {
     const all = Array.from(
@@ -3974,12 +4130,34 @@ var DocxEditor = class _DocxEditor {
   }
   // ─── M5: formatting commands (ribbon) ────────────────────────────────
   // ─── Multi-block selection helpers (format a whole stack of paragraphs at once) ──────
+  /**
+   * Restore a cross-block selection after a native toolbar control took focus. The bookmark uses
+   * stable anchor ids and content offsets, so it also survives incremental block swaps.
+   */
+  restoreCrossBlockSelection() {
+    const bookmark = this.lastCrossBlockSelection;
+    const active = this.activeBlock;
+    if (!bookmark || !active) return false;
+    const all = Array.from(
+      this.ownerRoot(active).querySelectorAll('[data-anchor][contenteditable="true"]')
+    );
+    const first = all.find((block) => block.getAttribute("data-anchor") === bookmark.startUnid);
+    const last = all.find((block) => block.getAttribute("data-anchor") === bookmark.endUnid);
+    if (!first || !last || first === last || all.indexOf(first) > all.indexOf(last)) return false;
+    const start = contentPositionIn(first, bookmark.startOffset);
+    const end = contentPositionIn(last, bookmark.endOffset);
+    return setSelectionBetween(start, end);
+  }
   /** Editable blocks the current selection covers, in document order. Uses Range.comparePoint
    *  (robust to a selection boundary that normalized onto a wrapper element rather than a block
    *  or text node — Range.intersectsNode misses the end block at a `(block, childCount)` boundary).
    *  A collapsed or single-block selection yields just the active block. */
   selectedBlocks() {
-    const sel = typeof window !== "undefined" ? window.getSelection() : null;
+    let sel = typeof window !== "undefined" ? window.getSelection() : null;
+    if ((!sel || sel.rangeCount === 0 || sel.isCollapsed) && this.lastCrossBlockSelection) {
+      this.restoreCrossBlockSelection();
+      sel = typeof window !== "undefined" ? window.getSelection() : null;
+    }
     const root = this.activeBlock ? this.ownerRoot(this.activeBlock) : this.editRoot;
     const all = Array.from(
       root.querySelectorAll('[data-anchor][contenteditable="true"]')
@@ -4758,7 +4936,8 @@ var DocxEditor = class _DocxEditor {
       );
       if (oldMarker !== newMarker) return this.bail("substituted li marker drift");
     }
-    if (!this.applyBodyDiff(oldNodes, plan.body, bodyDiff, freshBody)) return this.bail("applyBodyDiff bail");
+    const bodyApply = this.applyBodyDiff(oldNodes, plan.body, bodyDiff, freshBody);
+    if (bodyApply !== true) return this.bail(`applyBodyDiff bail: ${bodyApply}`);
     this.applyNotesDiff("footnotes", plan.footnotes, fnState, rendered);
     this.applyNotesDiff("endnotes", plan.endnotes, enState, rendered);
     const freshHasMarker = [...freshBody.values()].some(
@@ -4790,15 +4969,15 @@ var DocxEditor = class _DocxEditor {
   static anchorElOf(root) {
     return root.hasAttribute("data-anchor") ? root : root.querySelector("[data-anchor]");
   }
-  /** Insert/remove/swap body unit nodes per the diff. Returns false to bail (parent
-   *  ambiguity, order violation, wrapper semantics) — the session is already correct,
-   *  so bailing just means a full repaint. */
+  /** Insert/remove/swap body unit nodes per the diff. Returns `true` on success or a
+   *  bail-reason string (parent ambiguity, order violation, wrapper semantics) — the
+   *  session is already correct, so bailing just means a full repaint. */
   applyBodyDiff(oldNodes, units, diff, fresh) {
     let lastOld = -1;
     for (let j = 0; j < units.length; j++) {
       const oi = diff.keep.get(j);
       if (oi === void 0) continue;
-      if (oi < lastOld) return false;
+      if (oi < lastOld) return "kept order violation";
       lastOld = oi;
     }
     const subOldByNew = new Map(diff.substituted.map((s) => [s.newIndex, s.oldIndex]));
@@ -4809,8 +4988,10 @@ var DocxEditor = class _DocxEditor {
         oldWrapper.replaceWith(freshRoot);
       } else if (oldWrapper === oldNodes[oi]) {
         oldNodes[oi].replaceWith(freshRoot);
+      } else if (!oldNodes[oi].hasAttribute("data-render-sig") && unidOf(units[nj].id) === oldNodes[oi].getAttribute("data-anchor")) {
+        oldNodes[oi].replaceWith(freshRoot);
       } else {
-        return false;
+        return `leaf render into wrapped slot (unit ${units[nj].id.slice(0, 24)})`;
       }
       this.wireUnit(freshRoot, units[nj]);
     }
@@ -4837,10 +5018,11 @@ var DocxEditor = class _DocxEditor {
       }
       const prevW = prev ? this.unitWrapperOf(prev) : null;
       const nextW = next ? this.unitWrapperOf(next) : null;
-      if (prevW && nextW && prevW.parentElement !== nextW.parentElement) return false;
+      if (prevW && nextW && prevW.parentElement !== nextW.parentElement)
+        return "insert neighbors in different parents";
       if (prevW) prevW.after(el);
       else if (nextW) nextW.before(el);
-      else return false;
+      else return "insert with no anchored neighbor";
       this.wireUnit(el, units[j]);
     }
     for (const i of pureRemoved) {

package/dist/embed.d.ts

@@ -7,7 +7,7 @@
  * ```html
  * <div id="doc"></div>
  * <script type="module">
- *   import { createViewer } from "https://cdn.jsdelivr.net/npm/docxodus@9.1.0/dist/embed.bundle.js";
+ *   import { createViewer } from "https://cdn.jsdelivr.net/npm/docxodus@9.1.1/dist/embed.bundle.js";
  *   await createViewer("#doc", "./contract.docx");
  * </script>
  * ```