@extend-ai/react-docx 0.7.0-alpha.8 → 0.7.1

package/dist/index.cjs

@@ -549,7 +549,13 @@ async function defaultWasmSource() {
     const fs = await nodeFsPromises();
     return fs.readFile(wasmUrl);
   }
-  return wasmUrl;
+  const response = await fetch(wasmUrl);
+  if (!response.ok) {
+    throw new Error(
+      `react-docx: failed to load the bundled WebAssembly binary from ${wasmUrl.href} (${response.status} ${response.statusText}). If your bundler did not emit this asset, import @extend-ai/react-docx/docx_wasm_bg.wasm?url and pass it to setWasmSource() before importing a document.`
+    );
+  }
+  return response;
 }
 async function initWasm(source) {
   if (!initPromise) {
@@ -1185,7 +1191,7 @@ __export(index_exports, {
   defaultStarterModel: () => defaultStarterModel,
   duplicateParagraph: () => duplicateParagraph,
   getPart: () => getPart,
-  initWasm: () => initWasm,
+  initWasm: () => initWasm2,
   insertParagraph: () => insertParagraph,
   layoutDocument: () => layoutDocument,
   modelToDocumentXml: () => modelToDocumentXml,
@@ -1227,7 +1233,7 @@ __export(index_exports, {
   setParagraphHeading: () => setParagraphHeading,
   setRunColor: () => setRunColor,
   setRunHighlight: () => setRunHighlight,
-  setWasmSource: () => setWasmSource,
+  setWasmSource: () => setWasmSource2,
   splitParagraphChildrenAtTextOffsets: () => splitParagraphChildrenAtTextOffsets,
   toggleRunStyleFlag: () => toggleRunStyleFlag,
   updateParagraphText: () => updateParagraphText,
@@ -1479,6 +1485,60 @@ function layoutDocument(model, options = {}) {
 
 // src/docx-import.ts
 init_cjs_shims();
+
+// src/wasm-source.ts
+init_cjs_shims();
+init_src();
+var hasConfiguredWasmSource = false;
+var configuredWorkerWasmSource;
+function bufferSourceToArrayBuffer(source) {
+  if (source instanceof ArrayBuffer) {
+    return source.slice(0);
+  }
+  const bytes = new Uint8Array(source.buffer, source.byteOffset, source.byteLength);
+  const copy = new Uint8Array(bytes);
+  return copy.buffer;
+}
+function sourceToWorkerSource(source) {
+  if (typeof source === "string") {
+    return source;
+  }
+  if (typeof URL !== "undefined" && source instanceof URL) {
+    return source.href;
+  }
+  if (source instanceof ArrayBuffer || ArrayBuffer.isView(source)) {
+    return bufferSourceToArrayBuffer(source);
+  }
+  if (typeof WebAssembly !== "undefined" && source instanceof WebAssembly.Module) {
+    return source;
+  }
+  if (typeof Request !== "undefined" && source instanceof Request) {
+    return source.url;
+  }
+  return void 0;
+}
+function rememberWorkerWasmSource(source) {
+  hasConfiguredWasmSource = true;
+  configuredWorkerWasmSource = sourceToWorkerSource(source);
+}
+function setWasmSource2(source) {
+  setWasmSource(source);
+  rememberWorkerWasmSource(source);
+}
+function initWasm2(source) {
+  if (source !== void 0) {
+    rememberWorkerWasmSource(source);
+  }
+  return initWasm(source);
+}
+function canUseConfiguredWasmSourceInWorker() {
+  return !hasConfiguredWasmSource || configuredWorkerWasmSource !== void 0;
+}
+function getConfiguredWorkerWasmSource() {
+  return configuredWorkerWasmSource;
+}
+
+// src/docx-import.ts
 var nextImportWorkerRequestId = 1;
 function createAbortError() {
   if (typeof DOMException !== "undefined") {
@@ -1497,7 +1557,7 @@ function errorFromWorkerResponse(response) {
   return error;
 }
 function canUseDocxImportWorker(options) {
-  return options.useWorker !== false && typeof Worker !== "undefined";
+  return options.useWorker !== false && typeof Worker !== "undefined" && canUseConfiguredWasmSourceInWorker();
 }
 function createDocxImportWorker() {
   return new Worker(new URL("./docx-import-worker.js", importMetaUrl), {
@@ -1606,7 +1666,8 @@ async function importDocxBuffer(buffer, options = {}) {
       const request = {
         id: requestId,
         type: "import-docx",
-        buffer
+        buffer,
+        wasmSource: getConfiguredWorkerWasmSource()
       };
       const transfer = options.transferBuffer ? [buffer] : [];
       worker.postMessage(request, transfer);
@@ -1668,6 +1729,18 @@ function readStringAttribute(tagXml, attribute) {
   }
   return tagXml.match(new RegExp(`${attribute}="([^"]+)"`, "i"))?.[1];
 }
+function resolvePageSizeForOrientation(params) {
+  const normalizedOrientation = params.orientation?.trim().toLowerCase();
+  const widthPx = Math.max(1, params.widthPx);
+  const heightPx = Math.max(1, params.heightPx);
+  if (normalizedOrientation === "landscape" && widthPx < heightPx) {
+    return { widthPx: heightPx, heightPx: widthPx };
+  }
+  if (normalizedOrientation === "portrait" && widthPx > heightPx) {
+    return { widthPx: heightPx, heightPx: widthPx };
+  }
+  return { widthPx, heightPx };
+}
 function normalizeHexColor(value) {
   if (!value) {
     return void 0;
@@ -1753,8 +1826,13 @@ function parseSectionLayout(sectionPropertiesXml) {
   const pageSizeTag = sectionPropertiesXml.match(/<w:pgSz\b[^>]*>/i)?.[0];
   const pageMarginTag = sectionPropertiesXml.match(/<w:pgMar\b[^>]*>/i)?.[0];
   const docGridTag = sectionPropertiesXml.match(/<w:docGrid\b[^>]*\/?>/i)?.[0];
-  const pageWidthPx = twipsToPixels(readTwipsAttribute(pageSizeTag, "w:w")) ?? DEFAULT_DOCUMENT_LAYOUT.pageWidthPx;
-  const pageHeightPx = twipsToPixels(readTwipsAttribute(pageSizeTag, "w:h")) ?? DEFAULT_DOCUMENT_LAYOUT.pageHeightPx;
+  const rawPageWidthPx = twipsToPixels(readTwipsAttribute(pageSizeTag, "w:w")) ?? DEFAULT_DOCUMENT_LAYOUT.pageWidthPx;
+  const rawPageHeightPx = twipsToPixels(readTwipsAttribute(pageSizeTag, "w:h")) ?? DEFAULT_DOCUMENT_LAYOUT.pageHeightPx;
+  const pageSize = resolvePageSizeForOrientation({
+    widthPx: rawPageWidthPx,
+    heightPx: rawPageHeightPx,
+    orientation: readStringAttribute(pageSizeTag, "w:orient")
+  });
   const topMarginPx = twipsToPixels(readTwipsAttribute(pageMarginTag, "w:top")) ?? DEFAULT_DOCUMENT_LAYOUT.marginsPx.top;
   const rightMarginPx = twipsToPixels(readTwipsAttribute(pageMarginTag, "w:right")) ?? DEFAULT_DOCUMENT_LAYOUT.marginsPx.right;
   const bottomMarginPx = twipsToPixels(readTwipsAttribute(pageMarginTag, "w:bottom")) ?? DEFAULT_DOCUMENT_LAYOUT.marginsPx.bottom;
@@ -1764,8 +1842,8 @@ function parseSectionLayout(sectionPropertiesXml) {
   const docGridType = readStringAttribute(docGridTag, "w:type")?.toLowerCase();
   const docGridLinePitchPx = docGridType === "lines" || docGridType === "linesandchars" || docGridType === "snaptochars" ? twipsToPixels(readTwipsAttribute(docGridTag, "w:linePitch")) ?? DEFAULT_DOCUMENT_LAYOUT.docGridLinePitchPx : DEFAULT_DOCUMENT_LAYOUT.docGridLinePitchPx;
   return {
-    pageWidthPx,
-    pageHeightPx,
+    pageWidthPx: pageSize.widthPx,
+    pageHeightPx: pageSize.heightPx,
     marginsPx: {
       top: topMarginPx,
       right: rightMarginPx,
@@ -4474,6 +4552,26 @@ function getDownscaledThumbnailImageDataUri(src) {
   downscaledThumbnailImageCache.set(src, pending);
   return pending;
 }
+var THUMBNAIL_DECODED_IMAGE_CACHE_MAX_ENTRIES = 48;
+var decodedThumbnailImageCache = /* @__PURE__ */ new Map();
+function getDecodedThumbnailImage(src) {
+  const cached = decodedThumbnailImageCache.get(src);
+  if (cached) {
+    decodedThumbnailImageCache.delete(src);
+    decodedThumbnailImageCache.set(src, cached);
+    return cached;
+  }
+  const pending = loadThumbnailImage(src).catch(() => void 0);
+  decodedThumbnailImageCache.set(src, pending);
+  while (decodedThumbnailImageCache.size > THUMBNAIL_DECODED_IMAGE_CACHE_MAX_ENTRIES) {
+    const oldestKey = decodedThumbnailImageCache.keys().next().value;
+    if (oldestKey === void 0) {
+      break;
+    }
+    decodedThumbnailImageCache.delete(oldestKey);
+  }
+  return pending;
+}
 function directThumbnailPositivePx(value, fallback = 1) {
   return Number.isFinite(value) && value > 0 ? Math.max(1, Number(value)) : fallback;
 }
@@ -4729,6 +4827,32 @@ function drawDirectThumbnailImagePlaceholder(context, image, hairlineSourcePx) {
   context.lineWidth = hairlineSourcePx;
   context.strokeRect(xPx, yPx, widthPx, heightPx);
 }
+function drawDirectThumbnailImage(context, image, decoded, hairlineSourcePx) {
+  const xPx = Math.round(image.xPx);
+  const yPx = Math.round(image.yPx);
+  const widthPx = Math.max(1, Math.round(image.widthPx));
+  const heightPx = Math.max(1, Math.round(image.heightPx));
+  if (decoded && decoded.naturalWidth > 0 && decoded.naturalHeight > 0) {
+    try {
+      context.drawImage(decoded, xPx, yPx, widthPx, heightPx);
+      return;
+    } catch {
+    }
+  }
+  setCanvasFillStyle(
+    context,
+    image.backgroundColor,
+    THUMBNAIL_DIRECT_IMAGE_BACKGROUND
+  );
+  context.fillRect(xPx, yPx, widthPx, heightPx);
+  setCanvasStrokeStyle(
+    context,
+    image.borderColor,
+    THUMBNAIL_DIRECT_TABLE_BORDER_COLOR
+  );
+  context.lineWidth = hairlineSourcePx;
+  context.strokeRect(xPx, yPx, widthPx, heightPx);
+}
 function drawDirectThumbnailTable(context, table, hairlineSourcePx) {
   const tableXPx = Math.round(table.xPx);
   const tableYPx = Math.round(table.yPx);
@@ -4768,7 +4892,7 @@ function drawDirectThumbnailTable(context, table, hairlineSourcePx) {
   });
   context.restore();
 }
-function renderDocxThumbnailSnapshotSurface(params) {
+async function renderDocxThumbnailSnapshotSurface(params) {
   if (typeof document === "undefined") {
     throw new Error("DOCX thumbnails require a browser environment.");
   }
@@ -4783,6 +4907,21 @@ function renderDocxThumbnailSnapshotSurface(params) {
   if (!context) {
     throw new Error("2D canvas context is unavailable for DOCX thumbnails.");
   }
+  const elements = params.snapshot.elements.slice(0, THUMBNAIL_DIRECT_MAX_ELEMENTS);
+  const decodedImagesBySrc = /* @__PURE__ */ new Map();
+  const imageSrcs = /* @__PURE__ */ new Set();
+  for (const element of elements) {
+    if (element.kind === "image" && element.src) {
+      imageSrcs.add(element.src);
+    }
+  }
+  if (imageSrcs.size > 0) {
+    await Promise.all(
+      Array.from(imageSrcs, async (src) => {
+        decodedImagesBySrc.set(src, await getDecodedThumbnailImage(src));
+      })
+    );
+  }
   const scaleX = pixelWidthPx / sourceWidthPx;
   const scaleY = pixelHeightPx / sourceHeightPx;
   const hairlineSourcePx = Math.max(0.75, 1 / Math.max(scaleX, scaleY));
@@ -4795,7 +4934,7 @@ function renderDocxThumbnailSnapshotSurface(params) {
     "#ffffff"
   );
   context.fillRect(0, 0, sourceWidthPx, sourceHeightPx);
-  params.snapshot.elements.slice(0, THUMBNAIL_DIRECT_MAX_ELEMENTS).forEach((element) => {
+  elements.forEach((element) => {
     switch (element.kind) {
       case "paragraph":
         drawDirectThumbnailParagraph(context, element);
@@ -4807,6 +4946,14 @@ function renderDocxThumbnailSnapshotSurface(params) {
           hairlineSourcePx
         );
         break;
+      case "image":
+        drawDirectThumbnailImage(
+          context,
+          element,
+          decodedImagesBySrc.get(element.src),
+          hairlineSourcePx
+        );
+        break;
       case "table":
         drawDirectThumbnailTable(context, element, hairlineSourcePx);
         break;
@@ -24263,7 +24410,7 @@ function docxThumbnailTextRunsFromParagraph(paragraph, documentTheme, maxChars =
       return;
     }
     const style = child.type === "text" || child.type === "form-field" ? child.style : void 0;
-    const text = child.type === "text" ? child.text : child.type === "form-field" ? formFieldDisplayValue2(child) : child.type === "image" ? child.alt || "[image]" : "";
+    const text = child.type === "text" ? child.text : child.type === "form-field" ? formFieldDisplayValue2(child) : "";
     appendDocxThumbnailTextRun(
       runs,
       {
@@ -24354,13 +24501,29 @@ function buildDocxThumbnailParagraphElements(params) {
         (widthPx - 4) / imageWidthPx,
         (bodyHeightPx - 4) / imageHeightPx
       );
-      elements.push({
-        kind: "image-placeholder",
-        xPx: xPx + 2,
-        yPx: bodyYPx + 2,
-        widthPx: Math.max(12, imageWidthPx * scale),
-        heightPx: Math.max(12, imageHeightPx * scale)
-      });
+      const elementXPx = xPx + 2;
+      const elementYPx = bodyYPx + 2;
+      const elementWidthPx = Math.max(12, imageWidthPx * scale);
+      const elementHeightPx = Math.max(12, imageHeightPx * scale);
+      const renderableSrc = resolveRenderableImageSource(imageRun);
+      if (renderableSrc) {
+        elements.push({
+          kind: "image",
+          xPx: elementXPx,
+          yPx: elementYPx,
+          widthPx: elementWidthPx,
+          heightPx: elementHeightPx,
+          src: renderableSrc
+        });
+      } else {
+        elements.push({
+          kind: "image-placeholder",
+          xPx: elementXPx,
+          yPx: elementYPx,
+          widthPx: elementWidthPx,
+          heightPx: elementHeightPx
+        });
+      }
     });
   }
   return elements;
@@ -24459,6 +24622,24 @@ function buildDocxThumbnailTableElement(params) {
     cells
   };
 }
+function docxThumbnailNodeRequiresDomRaster(node) {
+  if (!node) {
+    return false;
+  }
+  if (node.type === "paragraph") {
+    return node.children.some((child) => child.type === "image");
+  }
+  return node.rows.some(
+    (row) => row.cells.some(
+      (cell) => cell.nodes.some((cellNode) => docxThumbnailNodeRequiresDomRaster(cellNode))
+    )
+  );
+}
+function docxThumbnailPageRequiresDomRaster(model, pageSegments) {
+  return pageSegments.some(
+    (segment) => docxThumbnailNodeRequiresDomRaster(model.nodes[segment.nodeIndex])
+  );
+}
 function buildDocxPageThumbnailRenderSnapshotEntries(params) {
   const {
     model,
@@ -24471,6 +24652,9 @@ function buildDocxPageThumbnailRenderSnapshotEntries(params) {
     numberingDefinitions
   } = params;
   return pageNodeSegmentsByPage.map((pageSegments, pageIndex) => {
+    if (docxThumbnailPageRequiresDomRaster(model, pageSegments)) {
+      return void 0;
+    }
     const key = `${contentKeysByPage[pageIndex] ?? ""}|theme:${documentTheme}`;
     let cachedSnapshot;
     return {
@@ -24917,7 +25101,7 @@ function useDocxPageThumbnails(editor, options = {}) {
       if (!surface) {
         const thumbnailSnapshot = thumbnailSnapshotEntry?.getSnapshot();
         if (thumbnailSnapshot) {
-          surface = renderDocxThumbnailSnapshotSurface({
+          surface = await renderDocxThumbnailSnapshotSurface({
             snapshot: thumbnailSnapshot,
             widthPx: resolution.widthPx,
             heightPx: resolution.heightPx,
@@ -45732,7 +45916,6 @@ function buildLayoutSnapshot(model, options = {}) {
 }
 
 // src/index.tsx
-init_src();
 var import_jsx_runtime2 = require("react/jsx-runtime");
 var HIGHLIGHT_TO_CSS2 = {
   yellow: "#fff59d",