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

package/dist/index.d.cts

@@ -20,13 +20,7 @@ interface InitOutput {
 }
 
 type WasmSource = InitInput;
-/**
- * Override where the `docx_wasm_bg.wasm` binary is loaded from (URL, Response,
- * bytes, or a compiled module). Must be called before the first operation that
- * touches WASM; by default the binary shipped alongside this package is used.
- */
-declare function setWasmSource(source: WasmSource): void;
-declare function initWasm(source?: WasmSource): Promise<InitOutput>;
+declare function initWasm$1(source?: WasmSource): Promise<InitOutput>;
 interface WasmOoxmlPart {
     name: string;
     content: string;
@@ -1690,6 +1684,9 @@ declare function modelToDocumentXml(model: DocModel, basePackage?: OoxmlPackage)
 declare function serializeDocModel(model: DocModel, basePackage?: OoxmlPackage): Promise<OoxmlPackage>;
 declare function serializeDocx(model: DocModel, basePackage?: OoxmlPackage): Promise<ArrayBuffer>;
 
+declare function setWasmSource(source: WasmSource): void;
+declare function initWasm(source?: WasmSource): ReturnType<typeof initWasm$1>;
+
 interface ReactDocxViewerProps {
     /**
      * Raw `.docx` file contents to parse and render.

package/dist/index.d.ts

@@ -20,13 +20,7 @@ interface InitOutput {
 }
 
 type WasmSource = InitInput;
-/**
- * Override where the `docx_wasm_bg.wasm` binary is loaded from (URL, Response,
- * bytes, or a compiled module). Must be called before the first operation that
- * touches WASM; by default the binary shipped alongside this package is used.
- */
-declare function setWasmSource(source: WasmSource): void;
-declare function initWasm(source?: WasmSource): Promise<InitOutput>;
+declare function initWasm$1(source?: WasmSource): Promise<InitOutput>;
 interface WasmOoxmlPart {
     name: string;
     content: string;
@@ -1690,6 +1684,9 @@ declare function modelToDocumentXml(model: DocModel, basePackage?: OoxmlPackage)
 declare function serializeDocModel(model: DocModel, basePackage?: OoxmlPackage): Promise<OoxmlPackage>;
 declare function serializeDocx(model: DocModel, basePackage?: OoxmlPackage): Promise<ArrayBuffer>;
 
+declare function setWasmSource(source: WasmSource): void;
+declare function initWasm(source?: WasmSource): ReturnType<typeof initWasm$1>;
+
 interface ReactDocxViewerProps {
     /**
      * Raw `.docx` file contents to parse and render.

package/dist/index.js

@@ -4,20 +4,20 @@ import {
   packageToArrayBuffer,
   parseDocx,
   withPart
-} from "./chunk-QOXSE6WY.js";
+} from "./chunk-XBI2PYTU.js";
 import {
   buildDocModel,
   buildDocModelFromBytes,
   cloneDocModel,
   normalizeDocModel
-} from "./chunk-P3B3Q7Y6.js";
+} from "./chunk-P3MKA55V.js";
 import {
   initWasm,
   mapsToWasmPackage,
   setWasmSource,
   wasmModelToDocumentXml,
   wasmSerializeDocx
-} from "./chunk-2SXGXGWO.js";
+} from "./chunk-WKBPLHUA.js";
 
 // src/index.tsx
 import * as React2 from "react";
@@ -244,6 +244,56 @@ function layoutDocument(model, options = {}) {
   return pages;
 }
 
+// src/wasm-source.ts
+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() {
@@ -263,7 +313,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", import.meta.url), {
@@ -277,8 +327,8 @@ async function importDocxOnMainThread(buffer, signal) {
   }
   const startedAt = performanceNow();
   const [{ parseDocx: parseDocx2 }, { buildDocModel: buildDocModel2 }] = await Promise.all([
-    import("./src-PJYTN6DB.js"),
-    import("./src-NDPFDRVM.js")
+    import("./src-2FP7IUE6.js"),
+    import("./src-VN4V5N3K.js")
   ]);
   const pkg = await parseDocx2(buffer);
   const parsedAt = performanceNow();
@@ -372,7 +422,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);
@@ -433,6 +484,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;
@@ -518,8 +581,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;
@@ -529,8 +597,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,
@@ -1747,7 +1815,7 @@ async function serializeDocModel(model, basePackage) {
     model,
     basePackage ? mapsToWasmPackage(basePackage) : void 0
   );
-  const { parseDocx: parseDocx2 } = await import("./src-PJYTN6DB.js");
+  const { parseDocx: parseDocx2 } = await import("./src-2FP7IUE6.js");
   return parseDocx2(bytes);
 }
 async function serializeDocx(model, basePackage) {
@@ -3231,6 +3299,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;
 }
@@ -3486,6 +3574,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);
@@ -3525,7 +3639,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.");
   }
@@ -3540,6 +3654,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));
@@ -3552,7 +3681,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);
@@ -3564,6 +3693,14 @@ function renderDocxThumbnailSnapshotSurface(params) {
           hairlineSourcePx
         );
         break;
+      case "image":
+        drawDirectThumbnailImage(
+          context,
+          element,
+          decodedImagesBySrc.get(element.src),
+          hairlineSourcePx
+        );
+        break;
       case "table":
         drawDirectThumbnailTable(context, element, hairlineSourcePx);
         break;
@@ -23020,7 +23157,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,
       {
@@ -23111,13 +23248,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;
@@ -23216,6 +23369,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,
@@ -23228,6 +23399,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 {
@@ -23674,7 +23848,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,
@@ -44857,7 +45031,7 @@ export {
   defaultStarterModel,
   duplicateParagraph,
   getPart,
-  initWasm,
+  initWasm2 as initWasm,
   insertParagraph,
   layoutDocument,
   modelToDocumentXml,
@@ -44899,7 +45073,7 @@ export {
   setParagraphHeading,
   setRunColor,
   setRunHighlight,
-  setWasmSource,
+  setWasmSource2 as setWasmSource,
   splitParagraphChildrenAtTextOffsets,
   toggleRunStyleFlag,
   updateParagraphText,