docxodus 12.0.1 → 12.1.0

package/dist/embed.bundle.js

@@ -9448,6 +9448,12 @@ function blockPreviewText(unit) {
   const text = (unit.textContent ?? "").trim().replace(/\s+/g, " ");
   return text.length > 48 ? `${text.slice(0, 48)}\u2026` : text;
 }
+var BLOCK_HANDLE_WIDTH = 26;
+var BLOCK_HANDLE_HEIGHT = 28;
+var BLOCK_HANDLE_GAP = 6;
+function clampToRange(value, low, high) {
+  return Math.max(low, Math.min(value, high));
+}
 function ensureBlockDragStyles(doc) {
   if (blockDragStyledDocuments.has(doc)) return;
   blockDragStyledDocuments.add(doc);
@@ -9910,6 +9916,10 @@ var DocxEditor = class _DocxEditor {
     this.blockMoveMenu = null;
     this.blockMoveLive = null;
     this.blockDragSource = null;
+    /** Whether hover or focus currently wants a handle for `blockDragSource`.
+     *  Tracked apart from the handle's `display`, which the viewport clip also drives: a handle
+     *  withdrawn because its block scrolled out of view has to come back when it scrolls in. */
+    this.blockHandleWanted = false;
     this.blockDragCleanup = [];
     /** Block boxes measured at drag start — see `BlockDropZone`. Empty when no drag is in flight. */
     this.dropZones = [];
@@ -10306,11 +10316,47 @@ var DocxEditor = class _DocxEditor {
     }
     return null;
   }
+  /**
+   * The rectangle the floating handle may occupy: the window, narrowed by every ancestor that
+   * clips its overflow.
+   *
+   * The handle is `position: fixed`, so it is placed in viewport coordinates and no ancestor's
+   * overflow clips it for us. But the editor is routinely mounted inside a bounded scroller —
+   * the ribbon puts its surface in one, inside a clipped card — and a block scrolled out of that
+   * scroller has to take its handle with it rather than leave it parked over the host's chrome.
+   *
+   * Gated on the computed `overflow` rather than on whether an element scrolls right now, so the
+   * answer does not depend on how much content happens to be loaded.
+   */
+  blockHandleClipRect() {
+    const view = this.container.ownerDocument.defaultView;
+    const clip = {
+      top: 0,
+      left: 0,
+      right: view?.innerWidth ?? Number.MAX_SAFE_INTEGER,
+      bottom: view?.innerHeight ?? Number.MAX_SAFE_INTEGER
+    };
+    for (let el = this.editRoot; el; el = el.parentElement) {
+      const style = view?.getComputedStyle(el);
+      if (!style || style.overflowX === "visible" && style.overflowY === "visible") continue;
+      const box = el.getBoundingClientRect();
+      if (style.overflowY !== "visible") {
+        clip.top = Math.max(clip.top, box.top);
+        clip.bottom = Math.min(clip.bottom, box.bottom);
+      }
+      if (style.overflowX !== "visible") {
+        clip.left = Math.max(clip.left, box.left);
+        clip.right = Math.min(clip.right, box.right);
+      }
+    }
+    return clip;
+  }
   showBlockHandle(unit) {
     const handle = this.blockDragHandle;
     if (!handle || !this.isMovableBlockUnit(unit)) return;
     const changed = unit !== this.blockDragSource;
     this.blockDragSource = unit;
+    this.blockHandleWanted = true;
     const known = this.blockMoveTargetsFor(unit, { cachedOnly: true });
     if (known?.size === 0) {
       handle.style.display = "none";
@@ -10318,19 +10364,31 @@ var DocxEditor = class _DocxEditor {
     }
     if (changed && known === void 0) this.prefetchBlockMoveTargets(unit);
     const rect = unit.getBoundingClientRect();
+    const clip = this.blockHandleClipRect();
+    if (rect.bottom <= clip.top || rect.top >= clip.bottom || rect.right <= clip.left || rect.left >= clip.right) {
+      if (!this.blockDragging && this.blockMoveMenu?.style.display !== "block")
+        handle.style.display = "none";
+      return;
+    }
     handle.style.display = "flex";
-    handle.style.left = `${Math.max(4, rect.left - 32)}px`;
-    handle.style.top = `${Math.max(4, rect.top + (unit.tagName === "TABLE" ? 6 : Math.max(0, (rect.height - 28) / 2)))}px`;
+    const top2 = rect.top + (unit.tagName === "TABLE" ? 6 : Math.max(0, (rect.height - BLOCK_HANDLE_HEIGHT) / 2));
+    handle.style.left = `${clampToRange(
+      rect.left - (BLOCK_HANDLE_WIDTH + BLOCK_HANDLE_GAP),
+      clip.left,
+      clip.right - BLOCK_HANDLE_WIDTH
+    )}px`;
+    handle.style.top = `${clampToRange(top2, clip.top, clip.bottom - BLOCK_HANDLE_HEIGHT)}px`;
     const preview = blockPreviewText(unit);
     handle.setAttribute("aria-label", preview ? `Move block: ${preview}` : "Move block");
   }
   hideBlockHandle() {
     if (this.blockDragging || this.blockMoveMenu?.style.display === "block") return;
+    this.blockHandleWanted = false;
     if (this.blockDragHandle) this.blockDragHandle.style.display = "none";
   }
   positionBlockHandle() {
     const source = this.currentBlockDragSource();
-    if (source && this.blockDragHandle?.style.display !== "none") this.showBlockHandle(source);
+    if (source && this.blockHandleWanted) this.showBlockHandle(source);
   }
   /** Draw the drop line on `zone`'s requested edge, or take it away when there is no target. */
   paintDropIndicator(data) {
@@ -10768,6 +10826,7 @@ var DocxEditor = class _DocxEditor {
     this.blockMoveMenu = null;
     this.blockMoveLive = null;
     this.blockDragSource = null;
+    this.blockHandleWanted = false;
     this.blockDragging = false;
     this.blockDragPointerDown = false;
   }

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@12.0.0/dist/embed.bundle.js";
+ *   import { createViewer } from "https://cdn.jsdelivr.net/npm/docxodus@12.0.1/dist/embed.bundle.js";
  *   await createViewer("#doc", "./contract.docx");
  * </script>
  * ```

package/dist/embed.iife.js

@@ -9571,6 +9571,12 @@ span.comment-highlight.docx-comment-active { background: hsl(var(--docx-comment-
     const text = (unit.textContent ?? "").trim().replace(/\s+/g, " ");
     return text.length > 48 ? `${text.slice(0, 48)}\u2026` : text;
   }
+  var BLOCK_HANDLE_WIDTH = 26;
+  var BLOCK_HANDLE_HEIGHT = 28;
+  var BLOCK_HANDLE_GAP = 6;
+  function clampToRange(value, low, high) {
+    return Math.max(low, Math.min(value, high));
+  }
   function ensureBlockDragStyles(doc) {
     if (blockDragStyledDocuments.has(doc)) return;
     blockDragStyledDocuments.add(doc);
@@ -10033,6 +10039,10 @@ span.comment-highlight.docx-comment-active { background: hsl(var(--docx-comment-
       this.blockMoveMenu = null;
       this.blockMoveLive = null;
       this.blockDragSource = null;
+      /** Whether hover or focus currently wants a handle for `blockDragSource`.
+       *  Tracked apart from the handle's `display`, which the viewport clip also drives: a handle
+       *  withdrawn because its block scrolled out of view has to come back when it scrolls in. */
+      this.blockHandleWanted = false;
       this.blockDragCleanup = [];
       /** Block boxes measured at drag start — see `BlockDropZone`. Empty when no drag is in flight. */
       this.dropZones = [];
@@ -10429,11 +10439,47 @@ span.comment-highlight.docx-comment-active { background: hsl(var(--docx-comment-
       }
       return null;
     }
+    /**
+     * The rectangle the floating handle may occupy: the window, narrowed by every ancestor that
+     * clips its overflow.
+     *
+     * The handle is `position: fixed`, so it is placed in viewport coordinates and no ancestor's
+     * overflow clips it for us. But the editor is routinely mounted inside a bounded scroller —
+     * the ribbon puts its surface in one, inside a clipped card — and a block scrolled out of that
+     * scroller has to take its handle with it rather than leave it parked over the host's chrome.
+     *
+     * Gated on the computed `overflow` rather than on whether an element scrolls right now, so the
+     * answer does not depend on how much content happens to be loaded.
+     */
+    blockHandleClipRect() {
+      const view = this.container.ownerDocument.defaultView;
+      const clip = {
+        top: 0,
+        left: 0,
+        right: view?.innerWidth ?? Number.MAX_SAFE_INTEGER,
+        bottom: view?.innerHeight ?? Number.MAX_SAFE_INTEGER
+      };
+      for (let el = this.editRoot; el; el = el.parentElement) {
+        const style = view?.getComputedStyle(el);
+        if (!style || style.overflowX === "visible" && style.overflowY === "visible") continue;
+        const box = el.getBoundingClientRect();
+        if (style.overflowY !== "visible") {
+          clip.top = Math.max(clip.top, box.top);
+          clip.bottom = Math.min(clip.bottom, box.bottom);
+        }
+        if (style.overflowX !== "visible") {
+          clip.left = Math.max(clip.left, box.left);
+          clip.right = Math.min(clip.right, box.right);
+        }
+      }
+      return clip;
+    }
     showBlockHandle(unit) {
       const handle = this.blockDragHandle;
       if (!handle || !this.isMovableBlockUnit(unit)) return;
       const changed = unit !== this.blockDragSource;
       this.blockDragSource = unit;
+      this.blockHandleWanted = true;
       const known = this.blockMoveTargetsFor(unit, { cachedOnly: true });
       if (known?.size === 0) {
         handle.style.display = "none";
@@ -10441,19 +10487,31 @@ span.comment-highlight.docx-comment-active { background: hsl(var(--docx-comment-
       }
       if (changed && known === void 0) this.prefetchBlockMoveTargets(unit);
       const rect = unit.getBoundingClientRect();
+      const clip = this.blockHandleClipRect();
+      if (rect.bottom <= clip.top || rect.top >= clip.bottom || rect.right <= clip.left || rect.left >= clip.right) {
+        if (!this.blockDragging && this.blockMoveMenu?.style.display !== "block")
+          handle.style.display = "none";
+        return;
+      }
       handle.style.display = "flex";
-      handle.style.left = `${Math.max(4, rect.left - 32)}px`;
-      handle.style.top = `${Math.max(4, rect.top + (unit.tagName === "TABLE" ? 6 : Math.max(0, (rect.height - 28) / 2)))}px`;
+      const top2 = rect.top + (unit.tagName === "TABLE" ? 6 : Math.max(0, (rect.height - BLOCK_HANDLE_HEIGHT) / 2));
+      handle.style.left = `${clampToRange(
+        rect.left - (BLOCK_HANDLE_WIDTH + BLOCK_HANDLE_GAP),
+        clip.left,
+        clip.right - BLOCK_HANDLE_WIDTH
+      )}px`;
+      handle.style.top = `${clampToRange(top2, clip.top, clip.bottom - BLOCK_HANDLE_HEIGHT)}px`;
       const preview = blockPreviewText(unit);
       handle.setAttribute("aria-label", preview ? `Move block: ${preview}` : "Move block");
     }
     hideBlockHandle() {
       if (this.blockDragging || this.blockMoveMenu?.style.display === "block") return;
+      this.blockHandleWanted = false;
       if (this.blockDragHandle) this.blockDragHandle.style.display = "none";
     }
     positionBlockHandle() {
       const source = this.currentBlockDragSource();
-      if (source && this.blockDragHandle?.style.display !== "none") this.showBlockHandle(source);
+      if (source && this.blockHandleWanted) this.showBlockHandle(source);
     }
     /** Draw the drop line on `zone`'s requested edge, or take it away when there is no target. */
     paintDropIndicator(data) {
@@ -10891,6 +10949,7 @@ span.comment-highlight.docx-comment-active { background: hsl(var(--docx-comment-
       this.blockMoveMenu = null;
       this.blockMoveLive = null;
       this.blockDragSource = null;
+      this.blockHandleWanted = false;
       this.blockDragging = false;
       this.blockDragPointerDown = false;
     }

package/dist/embed.js

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

package/dist/export-assets.json

@@ -1,7 +1,7 @@
 {
   "schema": "https://docxodus.dev/schemas/export/export-assets/v1",
   "schemaVersion": 1,
-  "packageVersion": "12.0.1",
+  "packageVersion": "12.1.0",
   "assets": [
     {
       "path": "./docxodus.worker.js",
@@ -49,13 +49,13 @@
       "path": "./wasm/_framework/Docxodus.wasm",
       "mediaType": "application/wasm",
       "byteLength": 3472665,
-      "sha256": "f21fe5783f9333d47240e217e5d7bc77e377095895879b84870dbd247aaf025a"
+      "sha256": "f42c48646d24cf09d621c575e476731eaff7117a82c20a495b9378b5512957d8"
     },
     {
       "path": "./wasm/_framework/DocxodusWasm.wasm",
       "mediaType": "application/wasm",
       "byteLength": 491285,
-      "sha256": "b3c5019fea33ee2454041f55be980f8957e7869a3c8f14aaed5a895609eef233"
+      "sha256": "9600c0ac776615f0fea0aff0831b6f32a040f23932c5df6dd8f26ffb69a7775e"
     },
     {
       "path": "./wasm/_framework/System.Collections.Concurrent.wasm",
@@ -247,7 +247,7 @@
       "path": "./wasm/_framework/dotnet.boot.js",
       "mediaType": "text/javascript",
       "byteLength": 9374,
-      "sha256": "d3c8159dd193bd5baca6f2874515fe940e1299366be6e2290885a332d96712c3"
+      "sha256": "1d12c4a0fd969902b3072fa4763028263ec239199b69057061bd98192f1d6d12"
     },
     {
       "path": "./wasm/_framework/dotnet.js",
@@ -265,7 +265,7 @@
       "path": "./wasm/_framework/dotnet.native.wasm",
       "mediaType": "application/wasm",
       "byteLength": 8276254,
-      "sha256": "6ce8e3d8295bfe9d3a5c0257aefe1db9db11264e605397337b6d21f43da08d85"
+      "sha256": "363202acedd18abc01a91f7e9e3feb94367e4938e1f07ad9ba30778d519c41df"
     },
     {
       "path": "./wasm/_framework/dotnet.runtime.js",

package/dist/index.js

@@ -74,7 +74,7 @@ async function yieldToMain() {
 function getDefaultWasmBasePath() {
     try {
         // import.meta.url gives us the URL of this module
-        // e.g., "https://cdn.jsdelivr.net/npm/docxodus@12.0.0/dist/index.js"
+        // e.g., "https://cdn.jsdelivr.net/npm/docxodus@12.0.1/dist/index.js"
         // or "file:///path/to/node_modules/docxodus/dist/index.js"
         const moduleUrl = import.meta.url;
         // Remove the filename to get the directory

package/dist/wasm/_framework/dotnet.boot.js

@@ -1,7 +1,7 @@
 export const config = /*json-start*/{
   "mainAssemblyName": "DocxodusWasm.dll",
   "resources": {
-    "hash": "sha256-E6vf07wAT55HCWvVtt9pVBwCH9gGv0gVuWk3877+ZH0=",
+    "hash": "sha256-JK1HM76GNNB6Utp8MnYXpYDCSgUmFQEXEqqu+jo+gQY=",
     "jsModuleNative": [
       {
         "name": "dotnet.native.js"
@@ -15,7 +15,7 @@ export const config = /*json-start*/{
     "wasmNative": [
       {
         "name": "dotnet.native.wasm",
-        "hash": "sha256-bOjj2Clb/p06XAJXrv4dudsRJk5gU5cze20h9D2gjYU="
+        "hash": "sha256-NjICrO3RirwBqR9+nj/rlDZ+STjh8HrZujB3jVGcQd8="
       }
     ],
     "coreAssembly": [
@@ -32,12 +32,12 @@ export const config = /*json-start*/{
       {
         "virtualPath": "Docxodus.wasm",
         "name": "Docxodus.wasm",
-        "hash": "sha256-8h/leD+TM9RyQOIX5de8d+N3CViVh5uEhw29JHqvAlo="
+        "hash": "sha256-9CxIZG0kzwnWIcV15HZzHq/3EXqCwgpJW5N4tVEpV9g="
       },
       {
         "virtualPath": "DocxodusWasm.wasm",
         "name": "DocxodusWasm.wasm",
-        "hash": "sha256-s8UBn+oz7iRUBB9VvpgPiVfnhpo8jxSq7VqJVgnu8jM="
+        "hash": "sha256-lgDArHdmFfD+oK/wgxtvMqBA8jkyxd9t2PJv+2mnd14="
       },
       {
         "virtualPath": "System.Collections.Concurrent.wasm",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "docxodus",
-  "version": "12.0.1",
+  "version": "12.1.0",
   "description": "Render, edit, diff and project Word .docx files in the browser — DOCX to HTML, a block editor, Word-grade redlines with tracked changes, and anchor-addressed markdown for LLM agents. WebAssembly, no server.",
   "type": "module",
   "main": "./dist/index.js",