@open-file-viewer/core 0.1.24 → 0.1.26

package/dist/index.js

@@ -6346,6 +6346,7 @@ function decodeXml(value) {
 // src/plugins/office.ts
 import JSZip3 from "jszip";
 import DOMPurify2 from "dompurify";
+import * as docxPreview from "docx-preview";
 
 // src/plugins/msdoc.ts
 var CFB_SIGNATURE = [208, 207, 17, 224, 161, 177, 26, 225];
@@ -7782,6 +7783,7 @@ var presentationExtensions = /* @__PURE__ */ new Set(["pptx", "pptm", "ppt", "pp
 var packagedOfficeCandidates = /* @__PURE__ */ new Set(["wps", "et", "dps", "numbers", "key"]);
 var SHEET_WINDOW_ROWS = 200;
 var SHEET_WINDOW_COLUMNS = 80;
+var DEFAULT_DOCX_RENDER_TIMEOUT_MS = 15e3;
 var DEFAULT_PPTX_RENDER_TIMEOUT_MS = 12e3;
 var PPTX_REL_NS = "http://schemas.openxmlformats.org/package/2006/relationships";
 var officeMimeTypes = /* @__PURE__ */ new Set([
@@ -8090,23 +8092,28 @@ async function renderDocx(panel, arrayBuffer, fit) {
   document.head.append(styleContainer);
   let disposeFit;
   try {
-    const docxPreview = await import("docx-preview");
-    await docxPreview.renderAsync(arrayBuffer, content, styleContainer, {
-      className: "ofv-docx",
-      inWrapper: true,
-      breakPages: true,
-      ignoreWidth: false,
-      ignoreHeight: false,
-      ignoreFonts: false,
-      renderHeaders: true,
-      renderFooters: true,
-      renderFootnotes: true,
-      renderEndnotes: true,
-      renderComments: true,
-      renderAltChunks: true,
-      experimental: true,
-      useBase64URL: true
-    });
+    await withTimeout(
+      (async () => {
+        await docxPreview.renderAsync(arrayBuffer, content, styleContainer, {
+          className: "ofv-docx",
+          inWrapper: true,
+          breakPages: true,
+          ignoreWidth: false,
+          ignoreHeight: false,
+          ignoreFonts: false,
+          renderHeaders: true,
+          renderFooters: true,
+          renderFootnotes: true,
+          renderEndnotes: true,
+          renderComments: true,
+          renderAltChunks: true,
+          experimental: true,
+          useBase64URL: true
+        });
+      })(),
+      docxRenderTimeoutMs(),
+      "DOCX rendering"
+    );
     await normalizeDocxLayout(content, arrayBuffer);
     const shouldUseTextboxFallback = await docxPreviewLooksBlank(content, arrayBuffer) || await docxPreviewMissesRichTextboxContent(content, arrayBuffer) || await docxShouldPreferTextboxLayoutFallback(arrayBuffer);
     if (shouldUseTextboxFallback) {
@@ -8129,13 +8136,18 @@ async function renderDocx(panel, arrayBuffer, fit) {
   } catch (error) {
     disposeFit?.();
     styleContainer.remove();
-    content.replaceChildren();
-    await renderDocxContentFallback(content, arrayBuffer);
-    panel.append(content);
+    const fallbackContent = document.createElement("div");
+    fallbackContent.className = "ofv-docx-document";
+    await renderDocxContentFallback(fallbackContent, arrayBuffer);
+    panel.append(fallbackContent);
     console.warn("DOCX layout preview failed, fell back to Mammoth:", error);
   }
   return () => void 0;
 }
+function docxRenderTimeoutMs() {
+  const override = globalThis.__OFV_DOCX_RENDER_TIMEOUT_MS__;
+  return typeof override === "number" && override > 0 ? override : DEFAULT_DOCX_RENDER_TIMEOUT_MS;
+}
 async function docxPreviewLooksBlank(container, arrayBuffer) {
   if (container.querySelector("img, svg, canvas, table")) {
     return false;
@@ -8228,12 +8240,13 @@ async function renderDocxContentFallback(container, arrayBuffer, options = {}) {
     return;
   }
   try {
-    await renderDocxWithMammoth(container, arrayBuffer);
-    const renderedText = normalizePreviewText(container.querySelector(".ofv-document")?.textContent || "");
+    const mammothContent = document.createElement("div");
+    await withTimeout(renderDocxWithMammoth(mammothContent, arrayBuffer), docxRenderTimeoutMs(), "DOCX fallback rendering");
+    const renderedText = normalizePreviewText(mammothContent.querySelector(".ofv-document")?.textContent || "");
     if (renderedText.length >= 24) {
+      container.append(...Array.from(mammothContent.childNodes));
       return;
     }
-    container.querySelector(".ofv-document")?.remove();
     await renderDocxTextFallback(container, arrayBuffer);
   } catch (fallbackError) {
     await renderDocxTextFallback(container, arrayBuffer);
@@ -10466,6 +10479,7 @@ async function renderPptx(panel, arrayBuffer) {
   container.className = "ofv-pptx-viewer";
   let insight;
   let zip;
+  let placeholderFontCorrections = [];
   try {
     zip = await JSZip3.loadAsync(arrayBuffer);
     insight = await inspectPptxPresentation(zip);
@@ -10473,11 +10487,18 @@ async function renderPptx(panel, arrayBuffer) {
   } catch (error) {
     console.warn("PPTX structure insight extraction failed:", error);
   }
+  if (zip) {
+    try {
+      placeholderFontCorrections = await inspectPptxPlaceholderFontCorrections(zip);
+    } catch (error) {
+      console.warn("PPTX placeholder font extraction failed:", error);
+    }
+  }
   panel.append(container);
   try {
     const { PptxViewer } = await import("@aiden0z/pptx-renderer");
     await withTimeout(PptxViewer.open(arrayBuffer, container), pptxRenderTimeoutMs());
-    normalizePptxLayout(container);
+    normalizePptxLayout(container, placeholderFontCorrections);
   } catch (error) {
     container.replaceChildren();
     if (insight) {
@@ -10510,13 +10531,13 @@ function renderPptxTextFallback(container, insight) {
     container.append(article);
   }
 }
-async function withTimeout(promise, timeoutMs) {
+async function withTimeout(promise, timeoutMs, label = "PPTX rendering") {
   let timeoutId;
   try {
     return await Promise.race([
       promise,
       new Promise((_resolve, reject) => {
-        timeoutId = window.setTimeout(() => reject(new Error(`PPTX rendering timed out after ${timeoutMs}ms.`)), timeoutMs);
+        timeoutId = window.setTimeout(() => reject(new Error(`${label} timed out after ${timeoutMs}ms.`)), timeoutMs);
       })
     ]);
   } finally {
@@ -10529,15 +10550,168 @@ function pptxRenderTimeoutMs() {
   const override = globalThis.__OFV_PPTX_RENDER_TIMEOUT_MS__;
   return typeof override === "number" && override > 0 ? override : DEFAULT_PPTX_RENDER_TIMEOUT_MS;
 }
-function normalizePptxLayout(container) {
+function normalizePptxLayout(container, placeholderFontCorrections) {
   const slideCanvases = findPptxSlideCanvases(container);
   for (const slide of slideCanvases) {
     if (!hasInlineBackground(slide)) {
       slide.style.backgroundColor = "#FFFFFF";
     }
   }
+  normalizePptxPlaceholderFonts(container, placeholderFontCorrections);
   normalizePptxMirroredText(container);
 }
+async function inspectPptxPlaceholderFontCorrections(zip) {
+  const presentationXml = await zip.file("ppt/presentation.xml")?.async("text");
+  const presentation = presentationXml ? parseOfficeXml(presentationXml) : void 0;
+  const slideSize = presentation ? Array.from(presentation.getElementsByTagName("*")).find((element) => element.localName === "sldSz") : void 0;
+  const slideWidth = Number(slideSize?.getAttribute("cx"));
+  const slideHeight = Number(slideSize?.getAttribute("cy"));
+  if (!(slideWidth > 0) || !(slideHeight > 0)) {
+    return [];
+  }
+  const slideEntries = Object.values(zip.files).filter((entry) => !entry.dir && /^ppt\/slides\/slide\d+\.xml$/i.test(entry.name)).sort((a, b) => slideNumberFromPath(a.name) - slideNumberFromPath(b.name));
+  const corrections = [];
+  for (const [slideIndex, entry] of slideEntries.entries()) {
+    const slideXml = await entry.async("text");
+    const slide = parseOfficeXml(slideXml);
+    if (!slide) {
+      continue;
+    }
+    const relationships = await readPptxRelationships(zip, entry.name);
+    const layoutTarget = resolvePptxRelationshipTarget(
+      entry.name,
+      relationships.find((relationship) => /\/slideLayout$/i.test(relationship.type))?.target
+    );
+    const layoutXml = layoutTarget ? await zip.file(layoutTarget)?.async("text") : void 0;
+    const layout = layoutXml ? parseOfficeXml(layoutXml) : void 0;
+    if (!layout) {
+      continue;
+    }
+    const layoutFontSizes = readPptxLayoutPlaceholderFontSizes(layout);
+    const shapes = Array.from(slide.getElementsByTagName("*")).filter((element) => element.localName === "sp");
+    for (const shape of shapes) {
+      const placeholder = findPptxDescendant(shape, "ph");
+      const placeholderIndex = placeholder?.getAttribute("idx");
+      const fontSizePt = placeholderIndex ? layoutFontSizes.get(placeholderIndex) : void 0;
+      const textBody = findPptxDescendant(shape, "txBody");
+      if (!textBody?.textContent?.trim() || !fontSizePt || hasExplicitPptxTextSize(textBody)) {
+        continue;
+      }
+      const transform = findPptxDescendant(shape, "xfrm");
+      const offset = transform ? findPptxChild(transform, "off") : void 0;
+      const extent = transform ? findPptxChild(transform, "ext") : void 0;
+      const left = Number(offset?.getAttribute("x"));
+      const top = Number(offset?.getAttribute("y"));
+      const width = Number(extent?.getAttribute("cx"));
+      const height = Number(extent?.getAttribute("cy"));
+      if (![left, top, width, height].every((value) => Number.isFinite(value)) || width <= 0 || height <= 0) {
+        continue;
+      }
+      corrections.push({
+        slideIndex,
+        leftRatio: left / slideWidth,
+        topRatio: top / slideHeight,
+        widthRatio: width / slideWidth,
+        heightRatio: height / slideHeight,
+        fontSizePt
+      });
+    }
+  }
+  return corrections;
+}
+function readPptxLayoutPlaceholderFontSizes(layout) {
+  const result = /* @__PURE__ */ new Map();
+  const shapes = Array.from(layout.getElementsByTagName("*")).filter((element) => element.localName === "sp");
+  for (const shape of shapes) {
+    const placeholderIndex = findPptxDescendant(shape, "ph")?.getAttribute("idx");
+    if (!placeholderIndex) {
+      continue;
+    }
+    const textBody = findPptxDescendant(shape, "txBody");
+    const defaultRunProperties = textBody ? Array.from(textBody.getElementsByTagName("*")).find(
+      (element) => element.localName === "defRPr" && Number(element.getAttribute("sz")) > 0
+    ) : void 0;
+    const size = Number(defaultRunProperties?.getAttribute("sz"));
+    if (size > 0) {
+      result.set(placeholderIndex, size / 100);
+    }
+  }
+  return result;
+}
+function hasExplicitPptxTextSize(textBody) {
+  return Array.from(textBody.getElementsByTagName("*")).some(
+    (element) => (element.localName === "rPr" || element.localName === "defRPr" || element.localName === "endParaRPr") && Number(element.getAttribute("sz")) > 0
+  );
+}
+function findPptxDescendant(element, localName) {
+  return Array.from(element.getElementsByTagName("*")).find((child) => child.localName === localName);
+}
+function findPptxChild(element, localName) {
+  return Array.from(element.children).find((child) => child.localName === localName);
+}
+function normalizePptxPlaceholderFonts(container, corrections) {
+  for (const correction of corrections) {
+    const wrapper = container.querySelector(`div[data-slide-index="${correction.slideIndex}"]`);
+    if (!wrapper) {
+      continue;
+    }
+    const match = findPptxPlaceholderElement(wrapper, correction);
+    if (!match) {
+      continue;
+    }
+    const styledText = Array.from(match.querySelectorAll("[style]")).filter(
+      (element) => parseFloat(element.style.fontSize) > 0
+    );
+    for (const element of styledText) {
+      element.style.fontSize = `${correction.fontSizePt}pt`;
+    }
+    if (styledText.length > 0) {
+      match.dataset.ofvPptxPlaceholderFont = String(correction.fontSizePt);
+    }
+  }
+}
+function findPptxPlaceholderElement(wrapper, correction) {
+  let best;
+  for (const canvas of findPptxSlideCanvases(wrapper)) {
+    const canvasWidth = parseCssPixelValue(canvas.style.width);
+    const canvasHeight = parseCssPixelValue(canvas.style.height);
+    if (!(canvasWidth > 0) || !(canvasHeight > 0)) {
+      continue;
+    }
+    const expected = {
+      left: correction.leftRatio * canvasWidth,
+      top: correction.topRatio * canvasHeight,
+      width: correction.widthRatio * canvasWidth,
+      height: correction.heightRatio * canvasHeight
+    };
+    const candidates = Array.from(canvas.querySelectorAll("div")).filter(
+      (element) => element.style.position === "absolute" && Boolean(element.textContent?.trim())
+    );
+    for (const element of candidates) {
+      const actual = {
+        left: parseCssPixelValue(element.style.left),
+        top: parseCssPixelValue(element.style.top),
+        width: parseCssPixelValue(element.style.width),
+        height: parseCssPixelValue(element.style.height)
+      };
+      const deltas = [
+        Math.abs(actual.left - expected.left),
+        Math.abs(actual.top - expected.top),
+        Math.abs(actual.width - expected.width),
+        Math.abs(actual.height - expected.height)
+      ];
+      const tolerance = Math.max(2, Math.min(canvasWidth, canvasHeight) * 5e-3);
+      if (deltas.some((delta) => delta > tolerance)) {
+        continue;
+      }
+      const score = deltas.reduce((sum, delta) => sum + delta, 0);
+      if (!best || score < best.score) {
+        best = { element, score };
+      }
+    }
+  }
+  return best?.element;
+}
 function hasInlineBackground(element) {
   return Boolean(element.style.background || element.style.backgroundColor || element.style.backgroundImage);
 }