@files-preview-app/preview-file 1.3.0 → 1.3.1

package/dist/react.js

@@ -2,6 +2,7 @@ import { memo, forwardRef, useRef, useImperativeHandle, useEffect } from 'react'
 import DOMPurify6 from 'dompurify';
 import * as pdfjsLib from 'pdfjs-dist';
 import * as docx from 'docx-preview';
+import * as fflate from 'fflate';
 import { unzipSync, strFromU8, unzip } from 'fflate';
 import * as XLSX from 'xlsx';
 import hljs from 'highlight.js';
@@ -667,9 +668,11 @@ var ToolbarController = class {
       type: "button",
       "data-action-id": id
     });
-    const svg = ICON_MAP[iconHtml] || ICON_MAP[id] || (iconHtml && iconHtml.startsWith("<svg") ? iconHtml : null);
-    if (svg) {
-      btn.innerHTML = sanitizeSVG(svg);
+    const internalSvg = ICON_MAP[iconHtml] || ICON_MAP[id];
+    if (internalSvg) {
+      btn.innerHTML = internalSvg;
+    } else if (iconHtml && iconHtml.startsWith("<svg")) {
+      btn.innerHTML = sanitizeSVG(iconHtml);
     } else {
       btn.textContent = title || id;
     }
@@ -5669,8 +5672,17 @@ var DocPlugin = class {
     let scale = 1;
     let extractedRawText = "";
     let isFallback = false;
+    let chartSvg = "";
     try {
       const cfbf = new CfbfReader(ctx.buffer);
+      try {
+        const pkg = cfbf.readStream("package_stream");
+        if (pkg && pkg.length > 100) {
+          chartSvg = this.parseOdfChartToSvg(pkg);
+        }
+      } catch (chartErr) {
+        console.warn("[DocPlugin] Chart stream parsing info:", chartErr);
+      }
       const wordDocStream = cfbf.readStream("WordDocument");
       if (!wordDocStream || wordDocStream.length < 512) {
         throw new Error("WordDocument stream not found or invalid in CFBF archive");
@@ -5688,7 +5700,7 @@ var DocPlugin = class {
       extractedRawText = fallback;
       isFallback = true;
     }
-    const rawPages = this.splitIntoPages(extractedRawText);
+    const rawPages = this.splitIntoPages(extractedRawText, chartSvg);
     const totalPages = Math.max(1, rawPages.length);
     let currentPage = 1;
     const pageCards = [];
@@ -5930,7 +5942,7 @@ var DocPlugin = class {
     for (const run of [...ansiRuns, ...utf16Runs]) {
       const trimmed = run.trim();
       if (trimmed.length >= 4 && /[a-zA-Z]/.test(trimmed) && !seen.has(trimmed)) {
-        if (!trimmed.includes("Normal.dot") && !trimmed.includes("Microsoft Word") && !trimmed.includes("Times New Roman") && !trimmed.startsWith("\xD0\xCF\xE0\xA1\xB1\xE1") && !/^[\W_0-9]+$/.test(trimmed)) {
+        if (!trimmed.includes("Normal.dot") && !trimmed.includes("Microsoft Word") && !trimmed.includes("Times New Roman") && !trimmed.startsWith("\xD0\xCF\xE0\xA1\xB1\xE1") && !/^EMBED\b/i.test(trimmed) && !trimmed.includes("ChartDocument") && !/^[\W_0-9]+$/.test(trimmed)) {
           seen.add(trimmed);
           candidateLines.push(trimmed);
         }
@@ -5941,9 +5953,114 @@ var DocPlugin = class {
   heuristicTextExtraction(buffer) {
     return this.extractStringsFromBytes(new Uint8Array(buffer));
   }
-  cleanWordDocFields(text) {
+  /**
+   * Parses an embedded OpenDocument Chart package into a vector SVG bar/column chart
+   */
+  parseOdfChartToSvg(zipBytes) {
+    try {
+      const unzipped = fflate.unzipSync(zipBytes);
+      const contentXml = unzipped["content.xml"] ? new TextDecoder("utf-8").decode(unzipped["content.xml"]) : "";
+      if (!contentXml) return "";
+      const rowsMatch = contentXml.match(/<table:table-row[\s\S]*?<\/table:table-row>/g) || [];
+      if (rowsMatch.length < 2) return "";
+      const headers = [];
+      const firstRow = rowsMatch[0];
+      const headerCells = firstRow ? firstRow.match(/<text:p>([^<]+)<\/text:p>/g) || [] : [];
+      for (const h of headerCells) {
+        headers.push(h.replace(/<\/?text:p>/g, "").trim());
+      }
+      const categories = [];
+      const seriesValues = headers.map(() => []);
+      for (let r = 1; r < rowsMatch.length; r++) {
+        const rowStr = rowsMatch[r];
+        if (!rowStr) continue;
+        const cells = rowStr.match(/<table:table-cell[\s\S]*?<\/table:table-cell>/g) || [];
+        if (cells.length > 0 && cells[0]) {
+          const catMatch = cells[0].match(/<text:p>([^<]+)<\/text:p>/);
+          categories.push(catMatch ? catMatch[1] : "Row " + r);
+          for (let c = 1; c < cells.length && c - 1 < headers.length; c++) {
+            const cellStr = cells[c];
+            if (!cellStr) continue;
+            const valMatch = cellStr.match(/office:value="([0-9.]+)"/) || cellStr.match(/<text:p>([0-9.]+)<\/text:p>/);
+            const series = seriesValues[c - 1];
+            if (series) {
+              series.push(valMatch ? parseFloat(valMatch[1]) : 0);
+            }
+          }
+        }
+      }
+      const colors = ["#004586", "#ff420e", "#ffd320", "#579d1c", "#7e0021"];
+      const colorMatches = contentXml.matchAll(/draw:fill-color="(#[0-9a-fA-F]{6})"/g);
+      let cIdx = 0;
+      for (const cm of colorMatches) {
+        if (cIdx < colors.length) colors[cIdx] = cm[1];
+        cIdx++;
+      }
+      let maxVal = 10;
+      for (const s of seriesValues) {
+        for (const v of s) {
+          if (v > maxVal) maxVal = v;
+        }
+      }
+      maxVal = Math.ceil(maxVal * 1.15);
+      const width = 560;
+      const height = 280;
+      const padLeft = 45;
+      const padRight = 100;
+      const padTop = 20;
+      const padBottom = 40;
+      const chartW = width - padLeft - padRight;
+      const chartH = height - padTop - padBottom;
+      let svg = `<svg viewBox="0 0 ${width} ${height}" width="100%" height="auto" style="max-width: 560px; height: 280px; margin: 16px auto; display: block; font-family: Calibri, sans-serif; background: #ffffff; border: 1px solid #e2e8f0; border-radius: 6px; box-shadow: 0 1px 4px rgba(0,0,0,0.05);">`;
+      for (let step = 0; step <= 4; step++) {
+        const yVal = (maxVal / 4 * step).toFixed(1);
+        const yPos = padTop + chartH - step / 4 * chartH;
+        svg += `<line x1="${padLeft}" y1="${yPos}" x2="${padLeft + chartW}" y2="${yPos}" stroke="#e2e8f0" stroke-dasharray="2,2" />`;
+        svg += `<text x="${padLeft - 8}" y="${yPos + 4}" font-size="11" fill="#64748b" text-anchor="end">${yVal}</text>`;
+      }
+      const numCats = categories.length;
+      const numSeries = headers.length;
+      const groupW = chartW / numCats;
+      const barW = Math.max(8, groupW * 0.7 / numSeries);
+      const groupPad = (groupW - barW * numSeries) / 2;
+      for (let catIdx = 0; catIdx < numCats; catIdx++) {
+        const groupX = padLeft + catIdx * groupW + groupPad;
+        for (let sIdx = 0; sIdx < numSeries; sIdx++) {
+          const val = seriesValues[sIdx][catIdx] || 0;
+          const barH = val / maxVal * chartH;
+          const barX = groupX + sIdx * barW;
+          const barY = padTop + chartH - barH;
+          const col = colors[sIdx % colors.length];
+          svg += `<rect x="${barX}" y="${barY}" width="${barW - 2}" height="${barH}" fill="${col}" rx="2"><title>${headers[sIdx]}: ${val}</title></rect>`;
+        }
+        const catX = padLeft + catIdx * groupW + groupW / 2;
+        svg += `<text x="${catX}" y="${padTop + chartH + 18}" font-size="11" fill="#475569" text-anchor="middle">${categories[catIdx]}</text>`;
+      }
+      let legendY = padTop + 20;
+      for (let sIdx = 0; sIdx < numSeries; sIdx++) {
+        const col = colors[sIdx % colors.length];
+        svg += `<rect x="${padLeft + chartW + 15}" y="${legendY}" width="12" height="12" fill="${col}" rx="2" />`;
+        svg += `<text x="${padLeft + chartW + 32}" y="${legendY + 10}" font-size="11" fill="#334155">${headers[sIdx]}</text>`;
+        legendY += 20;
+      }
+      svg += "</svg>";
+      return svg;
+    } catch (e) {
+      console.warn("[DocPlugin] Error generating chart SVG:", e);
+      return "";
+    }
+  }
+  cleanWordDocFields(text, chartSvg = "") {
     if (!text) return "";
     let cleaned = text.replace(
+      /\x13\s*EMBED\b[\s\S]*?\x15/gi,
+      () => chartSvg ? `
+
+${chartSvg}
+
+` : ""
+    );
+    cleaned = cleaned.replace(
       /\x13\s*HYPERLINK\s*"?([^"\x14]+)"?\s*\x14([\s\S]*?)\x15/gi,
       (_match, url, label) => {
         const cleanUrl = url.trim();
@@ -5951,18 +6068,23 @@ var DocPlugin = class {
         return `<a href="${cleanUrl}" target="_blank" rel="noopener noreferrer" style="color: #2563eb; text-decoration: underline;">${cleanLabel}</a>`;
       }
     );
-    cleaned = cleaned.replace(/\x13[^\x14\x15]*\x14([^\x15]*)\x15/g, "$1");
+    cleaned = cleaned.replace(/\x13[^\x14\x15]*\x14([^\x15]*)\x15/g, (_m, res) => {
+      if (/[\x00-\x1F]/.test(res)) return "";
+      return res.trim();
+    });
     cleaned = cleaned.replace(/\x13[^\x15]*\x15/g, "");
     cleaned = cleaned.replace(/[\x13\x14\x15]/g, "");
+    cleaned = cleaned.replace(/[\x00-\x08\x0B-\x0C\x0E-\x1F\x7F]/g, "");
+    cleaned = cleaned.replace(/EMBED\s+LibreOffice\.ChartDocument\.[0-9]+/gi, chartSvg || "");
     return cleaned;
   }
-  splitIntoPages(text) {
+  splitIntoPages(text, chartSvg = "") {
     if (!text) return [""];
-    const cleanedText = this.cleanWordDocFields(text);
+    const cleanedText = this.cleanWordDocFields(text, chartSvg);
     const normalized = cleanedText.replace(/\r\n/g, "\n").replace(/\r/g, "\n").replace(/\x0B/g, "\n").replace(/\x07\n/g, "\n").replace(/\x07/g, "	");
     const explicitParts = normalized.split(/[\x0C\f]|\n\s*[-=_]{3,}\s*(?:PAGE|Page|page break)[\s\d\w-]*[-=_]{3,}\s*\n/i).map((p) => p.trim()).filter((p) => p.length > 0);
     if (explicitParts.length === 0) explicitParts.push(normalized);
-    const maxLinesPerPage = 32;
+    const maxLinesPerPage = 34;
     const charsPerLine = 80;
     const finalPages = [];
     for (const part of explicitParts) {
@@ -5970,8 +6092,8 @@ var DocPlugin = class {
       let currentLines = [];
       let count = 0;
       for (const line of lines) {
-        const plainLine = line.replace(/<[^>]+>/g, "");
-        const vLines = Math.max(1, Math.ceil((plainLine.length || 1) / charsPerLine));
+        const isSvg = line.includes("<svg");
+        const vLines = isSvg ? 12 : Math.max(1, Math.ceil((line.replace(/<[^>]+>/g, "").length || 1) / charsPerLine));
         if (count + vLines > maxLinesPerPage && currentLines.length > 0) {
           finalPages.push(currentLines.join("\n"));
           currentLines = [];
@@ -6011,9 +6133,44 @@ var DocPlugin = class {
         tableLines = [];
       }
     };
+    const sanitizeOptions = {
+      ADD_TAGS: ["a", "svg", "g", "path", "line", "rect", "circle", "text", "title"],
+      ADD_ATTR: [
+        "href",
+        "target",
+        "rel",
+        "style",
+        "viewBox",
+        "width",
+        "height",
+        "x",
+        "y",
+        "x1",
+        "y1",
+        "x2",
+        "y2",
+        "fill",
+        "stroke",
+        "stroke-width",
+        "stroke-dasharray",
+        "rx",
+        "font-size",
+        "text-anchor"
+      ]
+    };
     let i = 0;
     while (i < lines.length) {
       let line = lines[i];
+      if (line.includes("<svg")) {
+        if (inList) {
+          html += "</ul>";
+          inList = false;
+        }
+        flushTable();
+        html += line;
+        i++;
+        continue;
+      }
       let tabCount = (line.match(/\t/g) || []).length;
       if (tabCount > 0) {
         let j = i;
@@ -6047,7 +6204,6 @@ var DocPlugin = class {
         i++;
         continue;
       }
-      const sanitizeOptions = { ADD_TAGS: ["a"], ADD_ATTR: ["href", "target", "rel", "style"] };
       if (line.length < 60 && !line.endsWith(".") && (/^[A-Z0-9\s:_-]+$/.test(line) || line.startsWith("#"))) {
         if (inList) {
           html += "</ul>";