@files-preview-app/preview-file 1.2.2 → 1.2.3

package/dist/react.js

@@ -1,5 +1,5 @@
 import { memo, forwardRef, useRef, useImperativeHandle, useEffect } from 'react';
-import DOMPurify6 from 'dompurify';
+import DOMPurify2 from 'dompurify';
 import * as docx from 'docx-preview';
 import { unzipSync, strFromU8, unzip } from 'fflate';
 import * as XLSX from 'xlsx';
@@ -341,7 +341,7 @@ async function sourceToArrayBuffer(source, signal) {
   return { buffer, metadata };
 }
 function sanitizeSVG(svg) {
-  return DOMPurify6.sanitize(svg, {
+  return DOMPurify2.sanitize(svg, {
     USE_PROFILES: { svg: true, svgFilters: true }
   });
 }
@@ -401,6 +401,9 @@ var ICON_THUMBNAILS = `<svg width="24" height="24" viewBox="0 0 24 24" fill="non
 var ICON_CLOSE = `<svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><line x1="18" y1="6" x2="6" y2="18"></line><line x1="6" y1="6" x2="18" y2="18"></line></svg>`;
 var ICON_FULLSCREEN = `<svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M8 3H5a2 2 0 0 0-2 2v3m18 0V5a2 2 0 0 0-2-2h-3m0 18h3a2 2 0 0 0 2-2v-3M3 16v3a2 2 0 0 0 2 2h3"></path></svg>`;
 var ICON_COPY = `<svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="9" y="9" width="13" height="13" rx="2" ry="2"></rect><path d="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1"></path></svg>`;
+var ICON_FAST_FORWARD = `<svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polygon points="13 19 22 12 13 5 13 19"></polygon><polygon points="2 19 11 12 2 5 2 19"></polygon></svg>`;
+var ICON_REWIND = `<svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polygon points="11 19 2 12 11 5 11 19"></polygon><polygon points="22 19 13 12 22 5 22 19"></polygon></svg>`;
+var ICON_SPEED = `<svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"></circle><polyline points="12 6 12 12 16 14"></polyline></svg>`;
 var ICON_MAP = {
   "zoom-in": ICON_ZOOM_IN,
   "zoom-out": ICON_ZOOM_OUT,
@@ -421,7 +424,12 @@ var ICON_MAP = {
   "page-prev": ICON_PAGE_PREV,
   "page-next": ICON_PAGE_NEXT,
   "chevron-left": ICON_PAGE_PREV,
-  "chevron-right": ICON_PAGE_NEXT
+  "chevron-right": ICON_PAGE_NEXT,
+  "fast-forward": ICON_FAST_FORWARD,
+  "forward-10": ICON_FAST_FORWARD,
+  "rewind": ICON_REWIND,
+  "replay-10": ICON_REWIND,
+  "speed": ICON_SPEED
 };
 var ToolbarController = class {
   el;
@@ -1389,6 +1397,16 @@ var MediaPlugin = class {
     }
     if (instance.play) {
       actions.push(
+        {
+          id: "replay-10",
+          icon: "replay-10",
+          label: "Rewind 10s",
+          type: "button",
+          group: "actions",
+          execute: () => {
+            instance.rewind?.(10);
+          }
+        },
         {
           id: "play",
           icon: "play",
@@ -1408,6 +1426,26 @@ var MediaPlugin = class {
           execute: () => {
             instance.pause?.();
           }
+        },
+        {
+          id: "forward-10",
+          icon: "forward-10",
+          label: "Fast Forward 10s",
+          type: "button",
+          group: "actions",
+          execute: () => {
+            instance.fastForward?.(10);
+          }
+        },
+        {
+          id: "speed",
+          icon: "speed",
+          label: "Playback Speed",
+          type: "button",
+          group: "actions",
+          execute: () => {
+            instance.cycleSpeed?.();
+          }
         }
       );
     }
@@ -1530,6 +1568,28 @@ var MediaPlugin = class {
       play: mediaElement ? () => mediaElement?.play() : void 0,
       pause: mediaElement ? () => mediaElement?.pause() : void 0,
       isPlaying: mediaElement ? () => !mediaElement?.paused : void 0,
+      fastForward: mediaElement ? (seconds = 10) => {
+        if (mediaElement) {
+          mediaElement.currentTime = Math.min(mediaElement.duration || Infinity, mediaElement.currentTime + seconds);
+        }
+      } : void 0,
+      rewind: mediaElement ? (seconds = 10) => {
+        if (mediaElement) {
+          mediaElement.currentTime = Math.max(0, mediaElement.currentTime - seconds);
+        }
+      } : void 0,
+      cycleSpeed: mediaElement ? () => {
+        if (mediaElement) {
+          const speeds = [1, 1.25, 1.5, 2, 0.5];
+          const curIndex = speeds.indexOf(mediaElement.playbackRate);
+          const nextIndex = curIndex === -1 ? 0 : (curIndex + 1) % speeds.length;
+          mediaElement.playbackRate = speeds[nextIndex];
+        }
+      } : void 0,
+      setPlaybackRate: mediaElement ? (rate) => {
+        if (mediaElement) mediaElement.playbackRate = rate;
+      } : void 0,
+      getPlaybackRate: mediaElement ? () => mediaElement?.playbackRate ?? 1 : void 0,
       download: () => {
         const a = document.createElement("a");
         a.href = url;
@@ -1611,16 +1671,35 @@ var DocxPlugin = class {
     wrapper.style.transformOrigin = "top center";
     wrapper.style.transition = "transform 0.2s ease";
     wrapper.style.padding = "24px 16px";
-    wrapper.style.maxWidth = "900px";
+    wrapper.style.maxWidth = "950px";
     wrapper.style.margin = "0 auto";
     wrapper.style.boxSizing = "border-box";
     ctx.container.style.overflow = "auto";
     ctx.container.style.backgroundColor = "#f1f5f9";
     ctx.container.appendChild(wrapper);
+    const styleOverride = document.createElement("style");
+    styleOverride.textContent = `
+      .fp-docx-wrapper .docx-wrapper {
+        background: transparent !important;
+        padding: 0 !important;
+        display: flex !important;
+        flex-direction: column !important;
+        align-items: center !important;
+        box-sizing: border-box !important;
+      }
+      .fp-docx-wrapper section.docx {
+        box-shadow: 0 4px 24px rgba(0, 0, 0, 0.08) !important;
+        border-radius: 4px !important;
+        margin-bottom: 24px !important;
+        background-color: #ffffff !important;
+      }
+    `;
+    ctx.container.appendChild(styleOverride);
     let scale = 1;
     let renderedSuccessfully = false;
+    const createdBlobUrls = [];
     try {
-      await docx.renderAsync(ctx.buffer, wrapper, ctx.container, {
+      await docx.renderAsync(ctx.buffer, wrapper, wrapper, {
         inWrapper: true,
         ignoreWidth: false,
         ignoreHeight: false,
@@ -1629,19 +1708,25 @@ var DocxPlugin = class {
         breakPages: true,
         experimental: true
       });
+      if (!ctx.container.contains(wrapper)) {
+        ctx.container.appendChild(wrapper);
+      }
       if (wrapper.children.length > 0 && (wrapper.textContent?.trim().length ?? 0) > 0) {
         renderedSuccessfully = true;
       }
     } catch (err) {
-      console.warn("[DocxPlugin] docx-preview failed, triggering native XML fallback:", err);
+      console.warn("[DocxPlugin] docx-preview failed, triggering native fallback:", err);
     }
     if (!renderedSuccessfully) {
       try {
         wrapper.innerHTML = "";
-        this.renderXmlFallback(ctx, wrapper);
+        this.renderXmlFallback(ctx, wrapper, createdBlobUrls);
+        if (!ctx.container.contains(wrapper)) {
+          ctx.container.appendChild(wrapper);
+        }
         renderedSuccessfully = true;
       } catch (fallbackErr) {
-        console.error("[DocxPlugin] XML fallback failed:", fallbackErr);
+        console.error("[DocxPlugin] Native fallback failed:", fallbackErr);
         wrapper.innerHTML = `
           <div style="text-align:center; padding: 48px; background: #fff; border-radius: 8px; box-shadow: 0 4px 20px rgba(0,0,0,0.06);">
             <div style="font-size:48px; margin-bottom: 16px;">\u{1F4C4}</div>
@@ -1649,10 +1734,17 @@ var DocxPlugin = class {
             <p style="color: #64748b; margin: 0;">Could not parse document content</p>
           </div>
         `;
+        if (!ctx.container.contains(wrapper)) {
+          ctx.container.appendChild(wrapper);
+        }
       }
     }
     const cleanup = () => {
+      for (const url of createdBlobUrls) {
+        URL.revokeObjectURL(url);
+      }
       wrapper.remove();
+      styleOverride.remove();
       ctx.container.innerHTML = "";
     };
     ctx.signal.addEventListener("abort", cleanup);
@@ -1689,13 +1781,50 @@ var DocxPlugin = class {
       }
     };
   }
-  renderXmlFallback(ctx, wrapper) {
+  renderXmlFallback(ctx, wrapper, createdBlobUrls) {
+    const magic = new Uint8Array(ctx.buffer.slice(0, 8));
+    if (magic[0] === 208 && magic[1] === 207 && magic[2] === 17 && magic[3] === 224) {
+      this.renderBinaryDocFallback(ctx, wrapper);
+      return;
+    }
     const unzipped = unzipSync(new Uint8Array(ctx.buffer));
-    const docXmlEntry = unzipped["word/document.xml"];
+    const docKey = Object.keys(unzipped).find((k) => k.replace(/^[./\\]+/, "").toLowerCase() === "word/document.xml");
+    const docXmlEntry = docKey ? unzipped[docKey] : void 0;
     if (!docXmlEntry) throw new Error("Missing word/document.xml in DOCX package");
     const xmlStr = strFromU8(docXmlEntry);
     const parser = new DOMParser();
     const doc = parser.parseFromString(xmlStr, "application/xml");
+    const imageMap = {};
+    const relsKey = Object.keys(unzipped).find((k) => k.replace(/^[./\\]+/, "").toLowerCase() === "word/_rels/document.xml.rels");
+    if (relsKey && unzipped[relsKey]) {
+      try {
+        const relsXml = strFromU8(unzipped[relsKey]);
+        const relsDoc = parser.parseFromString(relsXml, "application/xml");
+        const relEls = Array.from(relsDoc.getElementsByTagName("Relationship"));
+        for (const rel of relEls) {
+          const rId = rel.getAttribute("Id");
+          const target = rel.getAttribute("Target");
+          if (rId && target) {
+            const cleanTarget = target.replace(/^\.\.\//, "").replace(/^\//, "");
+            const fullTargetKey = Object.keys(unzipped).find((k) => {
+              const norm = k.replace(/^[./\\]+/, "").toLowerCase();
+              return norm === ("word/" + cleanTarget).toLowerCase() || norm === cleanTarget.toLowerCase();
+            });
+            if (fullTargetKey && unzipped[fullTargetKey]) {
+              const bytes = unzipped[fullTargetKey];
+              const ext = cleanTarget.split(".").pop()?.toLowerCase() || "png";
+              const mime = ext === "jpg" || ext === "jpeg" ? "image/jpeg" : ext === "gif" ? "image/gif" : ext === "svg" ? "image/svg+xml" : "image/png";
+              const blob = new Blob([bytes], { type: mime });
+              const blobUrl = URL.createObjectURL(blob);
+              imageMap[rId] = blobUrl;
+              createdBlobUrls.push(blobUrl);
+            }
+          }
+        }
+      } catch (relsErr) {
+        console.warn("[DocxPlugin] Error parsing relationships:", relsErr);
+      }
+    }
     const card = document.createElement("div");
     card.className = "fp-docx-page-card";
     card.style.backgroundColor = "#ffffff";
@@ -1713,7 +1842,7 @@ var DocxPlugin = class {
         const pStyle = child.getElementsByTagNameNS("*", "pStyle")[0];
         const styleVal = pStyle?.getAttribute("w:val") || pStyle?.getAttribute("val") || "";
         const numPr = child.getElementsByTagNameNS("*", "numPr")[0];
-        const textContent = this.extractParagraphHtml(child);
+        const textContent = this.extractParagraphHtml(child, imageMap);
         if (!textContent.trim()) {
           html += '<div style="height: 10px;"></div>';
           continue;
@@ -1739,7 +1868,7 @@ var DocxPlugin = class {
           html += `<tr style="${rIdx === 0 ? "background-color: #f8fafc; font-weight: 600;" : ""}">`;
           const cells = Array.from(tr.getElementsByTagNameNS("*", "tc"));
           cells.forEach((tc) => {
-            const cellText = this.extractParagraphHtml(tc);
+            const cellText = this.extractParagraphHtml(tc, imageMap);
             html += `<td style="border: 1px solid #cbd5e1; padding: 8px 12px; font-size: 13px;">${cellText || "&nbsp;"}</td>`;
           });
           html += "</tr>";
@@ -1747,34 +1876,63 @@ var DocxPlugin = class {
         html += "</table>";
       }
     }
-    card.innerHTML = DOMPurify6.sanitize(html, {
-      ADD_TAGS: ["h1", "h2", "h3", "h4", "p", "table", "tr", "td", "span", "b", "i", "u", "img", "div"],
+    card.innerHTML = DOMPurify2.sanitize(html, {
+      ADD_TAGS: ["h1", "h2", "h3", "h4", "p", "table", "tr", "td", "span", "b", "i", "u", "s", "strike", "img", "div", "br"],
       ADD_ATTR: ["style", "src", "alt", "colspan", "rowspan"]
     });
     wrapper.appendChild(card);
   }
-  extractParagraphHtml(pElement) {
+  extractParagraphHtml(pElement, imageMap = {}) {
     let result = "";
+    const drawings = Array.from(pElement.getElementsByTagNameNS("*", "drawing"));
+    for (const drawing of drawings) {
+      const blip = drawing.getElementsByTagNameNS("*", "blip")[0];
+      const rId = blip?.getAttribute("r:embed") || blip?.getAttribute("r:id");
+      if (rId && imageMap[rId]) {
+        result += `<div style="text-align:center; margin: 12px 0;"><img src="${imageMap[rId]}" style="max-width: 100%; height: auto; border-radius: 4px;" /></div>`;
+      }
+    }
     const runs = Array.from(pElement.getElementsByTagNameNS("*", "r"));
-    if (runs.length === 0) {
-      return DOMPurify6.sanitize(pElement.textContent || "");
+    if (runs.length === 0 && !result) {
+      return DOMPurify2.sanitize(pElement.textContent || "");
     }
     for (const r of runs) {
+      const blip = r.getElementsByTagNameNS("*", "blip")[0] || r.getElementsByTagNameNS("*", "imagedata")[0];
+      const rId = blip?.getAttribute("r:embed") || blip?.getAttribute("r:id");
+      if (rId && imageMap[rId]) {
+        result += `<img src="${imageMap[rId]}" style="max-width: 100%; height: auto; display: inline-block; margin: 4px;" />`;
+      }
+      const brs = r.getElementsByTagNameNS("*", "br");
+      for (let i = 0; i < brs.length; i++) {
+        result += "<br/>";
+      }
+      const tabs = r.getElementsByTagNameNS("*", "tab");
+      if (tabs.length > 0) {
+        result += "&emsp;";
+      }
       const rPr = r.getElementsByTagNameNS("*", "rPr")[0];
       const isBold = !!rPr?.getElementsByTagNameNS("*", "b")[0];
       const isItalic = !!rPr?.getElementsByTagNameNS("*", "i")[0];
       const isUnderline = !!rPr?.getElementsByTagNameNS("*", "u")[0];
+      const isStrike = !!rPr?.getElementsByTagNameNS("*", "strike")[0];
       const colorNode = rPr?.getElementsByTagNameNS("*", "color")[0];
       const colorVal = colorNode?.getAttribute("w:val") || colorNode?.getAttribute("val");
+      const szNode = rPr?.getElementsByTagNameNS("*", "sz")[0];
+      const szVal = szNode?.getAttribute("w:val") || szNode?.getAttribute("val");
       const texts = Array.from(r.getElementsByTagNameNS("*", "t"));
       let text = texts.map((t) => t.textContent || "").join("");
       if (!text) continue;
-      text = DOMPurify6.sanitize(text);
+      text = DOMPurify2.sanitize(text);
       let styles = "";
       if (isBold) styles += "font-weight: bold; ";
       if (isItalic) styles += "font-style: italic; ";
       if (isUnderline) styles += "text-decoration: underline; ";
+      if (isStrike) styles += "text-decoration: line-through; ";
       if (colorVal && colorVal !== "auto") styles += `color: #${colorVal}; `;
+      if (szVal) {
+        const pt = parseInt(szVal, 10) / 2;
+        if (!isNaN(pt) && pt > 0) styles += `font-size: ${pt}pt; `;
+      }
       if (styles) {
         result += `<span style="${styles}">${text}</span>`;
       } else {
@@ -1783,6 +1941,52 @@ var DocxPlugin = class {
     }
     return result;
   }
+  renderBinaryDocFallback(ctx, wrapper) {
+    const card = document.createElement("div");
+    card.className = "fp-docx-page-card";
+    card.style.backgroundColor = "#ffffff";
+    card.style.borderRadius = "6px";
+    card.style.boxShadow = "0 4px 24px rgba(0,0,0,0.08)";
+    card.style.padding = "48px 56px";
+    card.style.fontFamily = 'Calibri, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif';
+    card.style.color = "#1e293b";
+    card.style.lineHeight = "1.6";
+    try {
+      const cfbf = new CfbfReader(ctx.buffer);
+      const wordDocStream = cfbf.readStream("WordDocument");
+      if (wordDocStream && wordDocStream.length >= 512) {
+        const text2 = this.extractReadableStrings(wordDocStream);
+        card.innerHTML = `<div style="white-space: pre-wrap;">${DOMPurify2.sanitize(text2)}</div>`;
+        wrapper.appendChild(card);
+        return;
+      }
+    } catch {
+    }
+    const text = this.extractReadableStrings(new Uint8Array(ctx.buffer));
+    card.innerHTML = `<div style="white-space: pre-wrap;">${DOMPurify2.sanitize(text)}</div>`;
+    wrapper.appendChild(card);
+  }
+  extractReadableStrings(bytes) {
+    let result = "";
+    let current = "";
+    for (let i = 0; i < bytes.length; i++) {
+      const b = bytes[i];
+      if (b >= 32 && b <= 126 || b === 10 || b === 13 || b === 9) {
+        current += String.fromCharCode(b);
+      } else if (b === 0 && i + 1 < bytes.length && bytes[i + 1] >= 32 && bytes[i + 1] <= 126) {
+        continue;
+      } else {
+        if (current.trim().length > 3) {
+          result += current.trim() + "\n\n";
+        }
+        current = "";
+      }
+    }
+    if (current.trim().length > 3) {
+      result += current.trim();
+    }
+    return result;
+  }
 };
 function docxPlugin() {
   return new DocxPlugin();
@@ -2594,7 +2798,7 @@ var MarkdownPlugin = class {
       gfm: true,
       breaks: true
     });
-    const cleanHtml = DOMPurify6.sanitize(rawHtml, {
+    const cleanHtml = DOMPurify2.sanitize(rawHtml, {
       USE_PROFILES: { html: true }
     });
     const wrapper = document.createElement("div");
@@ -3309,7 +3513,7 @@ var HtmlPreviewPlugin = class {
   }
   async render(ctx) {
     const rawHtml = new TextDecoder("utf-8").decode(ctx.buffer);
-    const sanitized = DOMPurify6.sanitize(rawHtml, {
+    const sanitized = DOMPurify2.sanitize(rawHtml, {
       WHOLE_DOCUMENT: true,
       ADD_TAGS: ["style", "link"],
       ADD_ATTR: ["target", "rel"]
@@ -3552,7 +3756,7 @@ var OpenDocumentPlugin = class {
       wrapper.style.padding = "48px";
       wrapper.style.minHeight = "100%";
       const bodyHtml = this.renderOdfBody(contentDoc, styleMap, imageUrls);
-      wrapper.innerHTML = DOMPurify6.sanitize(bodyHtml, {
+      wrapper.innerHTML = DOMPurify2.sanitize(bodyHtml, {
         ADD_TAGS: ["math", "semantics", "mrow", "mi", "mo", "mn", "msup", "msub"],
         ADD_ATTR: ["style", "colspan", "rowspan"]
       });
@@ -4072,24 +4276,24 @@ var DocPlugin = class {
           html += "</ul>";
           inList = false;
         }
-        html += `<h2 style="font-size: 18px; font-weight: 700; color: #1e3a8a; margin: 20px 0 8px; border-bottom: 1px solid #e2e8f0; padding-bottom: 4px;">${DOMPurify6.sanitize(line)}</h2>`;
+        html += `<h2 style="font-size: 18px; font-weight: 700; color: #1e3a8a; margin: 20px 0 8px; border-bottom: 1px solid #e2e8f0; padding-bottom: 4px;">${DOMPurify2.sanitize(line)}</h2>`;
       } else if (line.startsWith("\u2022") || line.startsWith("-") || line.startsWith("*")) {
         if (!inList) {
           html += '<ul style="margin: 8px 0; padding-left: 24px;">';
           inList = true;
         }
         const bulletText = line.replace(/^[•\-\*]\s*/, "");
-        html += `<li style="margin: 4px 0; line-height: 1.6;">${DOMPurify6.sanitize(bulletText)}</li>`;
+        html += `<li style="margin: 4px 0; line-height: 1.6;">${DOMPurify2.sanitize(bulletText)}</li>`;
       } else {
         if (inList) {
           html += "</ul>";
           inList = false;
         }
-        html += `<p style="line-height: 1.7; margin: 10px 0; font-size: 14px; text-align: justify;">${DOMPurify6.sanitize(line)}</p>`;
+        html += `<p style="line-height: 1.7; margin: 10px 0; font-size: 14px; text-align: justify;">${DOMPurify2.sanitize(line)}</p>`;
       }
     }
     if (inList) html += "</ul>";
-    return html || `<p style="color: #64748b; font-style: italic;">(No readable text found in ${DOMPurify6.sanitize(filename)})</p>`;
+    return html || `<p style="color: #64748b; font-style: italic;">(No readable text found in ${DOMPurify2.sanitize(filename)})</p>`;
   }
 };
 function docPlugin() {
@@ -4244,10 +4448,10 @@ var PptPlugin = class {
         </div>
         <div style="text-align: center; width: 100%;">
           <h1 style="font-size: ${idx === 1 ? "36px" : "28px"}; color: #1e3a8a; margin: 0 0 24px; font-family: -apple-system, BlinkMacSystemFont, sans-serif; font-weight: 700;">
-            ${DOMPurify6.sanitize(s.title || `Slide ${idx}`)}
+            ${DOMPurify2.sanitize(s.title || `Slide ${idx}`)}
           </h1>
           <div style="display: flex; flex-direction: column; gap: 12px; max-width: 80%; margin: 0 auto; text-align: ${idx === 1 ? "center" : "left"};">
-            ${s.texts.map((t) => `<div style="font-size: 18px; color: #334155; line-height: 1.5; font-family: -apple-system, BlinkMacSystemFont, sans-serif;">${DOMPurify6.sanitize(t)}</div>`).join("")}
+            ${s.texts.map((t) => `<div style="font-size: 18px; color: #334155; line-height: 1.5; font-family: -apple-system, BlinkMacSystemFont, sans-serif;">${DOMPurify2.sanitize(t)}</div>`).join("")}
           </div>
         </div>
       `;