office-viewer-react 1.0.0

package/dist/server/assets/DocxViewer-Bm8UJY-7.js

@@ -0,0 +1,469 @@
+import { jsxs, jsx } from "react/jsx-runtime";
+import { useRef, useState, useEffect, useCallback } from "react";
+import { renderAsync } from "docx-preview";
+import { Loader2, ChevronLeft, ChevronRight } from "lucide-react";
+import JSZip from "jszip";
+import * as echarts from "echarts";
+const NS = {
+  c: "http://schemas.openxmlformats.org/drawingml/2006/chart",
+  a: "http://schemas.openxmlformats.org/drawingml/2006/main",
+  r: "http://schemas.openxmlformats.org/officeDocument/2006/relationships",
+  pic: "http://schemas.openxmlformats.org/drawingml/2006/picture",
+  rel: "http://schemas.openxmlformats.org/package/2006/relationships",
+  ct: "http://schemas.openxmlformats.org/package/2006/content-types"
+};
+const EMU_PER_PX = 9525;
+const PALETTE = ["#4472c4", "#ed7d31", "#a5a5a5", "#ffc000", "#5b9bd5", "#70ad47", "#264478", "#9e480e"];
+function localElements(parent, name) {
+  if (!parent) return [];
+  return Array.from(parent.children).filter((c) => c.localName === name);
+}
+function firstLocal(parent, name) {
+  if (!parent) return null;
+  return Array.from(parent.children).find((c) => c.localName === name) ?? null;
+}
+function deepFirst(parent, name) {
+  if (!parent) return null;
+  const list = parent.getElementsByTagNameNS(NS.c, name);
+  return list.length ? list[0] : null;
+}
+function readCache(ref) {
+  if (!ref) return [];
+  const cache = firstLocal(ref, "numCache") || firstLocal(ref, "strCache") || ref;
+  const pts = Array.from(cache.getElementsByTagNameNS(NS.c, "pt"));
+  const out = [];
+  for (const pt of pts) {
+    const idx = parseInt(pt.getAttribute("idx") || "0", 10);
+    const v = pt.getElementsByTagNameNS(NS.c, "v")[0];
+    out[idx] = v ? v.textContent || "" : "";
+  }
+  for (let i = 0; i < out.length; i++) if (out[i] === void 0) out[i] = "";
+  return out;
+}
+function parseSeries(ser) {
+  const tx = firstLocal(ser, "tx");
+  let name = "";
+  if (tx) {
+    const strRef = firstLocal(tx, "strRef");
+    if (strRef) name = readCache(strRef).find((x) => x) || "";
+    else {
+      const v = tx.getElementsByTagNameNS(NS.c, "v")[0];
+      name = v ? v.textContent || "" : "";
+    }
+  }
+  const catRef = firstLocal(firstLocal(ser, "cat"), "strRef") || firstLocal(firstLocal(ser, "cat"), "numRef");
+  const valRef = firstLocal(firstLocal(ser, "val"), "numRef");
+  const cats = readCache(catRef);
+  const vals = readCache(valRef).map((v) => {
+    const n = parseFloat(v);
+    return isNaN(n) ? 0 : n;
+  });
+  return { name, cats, vals };
+}
+function chartTitle(chartEl) {
+  const title = deepFirst(chartEl, "title");
+  if (!title) return "";
+  return Array.from(title.getElementsByTagNameNS(NS.a, "t")).map((t) => t.textContent || "").join("");
+}
+function buildOption(chartSpace) {
+  const chartEl = firstLocal(chartSpace, "chart");
+  const plotArea = firstLocal(chartEl, "plotArea");
+  if (!plotArea) return null;
+  const typeEl = Array.from(plotArea.children).find((c) => /Chart$/.test(c.localName));
+  if (!typeEl) return null;
+  const kind = typeEl.localName;
+  const seriesEls = localElements(typeEl, "ser");
+  if (!seriesEls.length) return null;
+  const series = seriesEls.map(parseSeries);
+  const categories = series[0]?.cats ?? [];
+  const title = chartTitle(chartEl);
+  const baseTitle = title ? { title: { text: title, left: "center", textStyle: { fontSize: 14 } } } : {};
+  const legend = series.length > 1 || /pie|doughnut/i.test(kind) ? { legend: { bottom: 0, type: "scroll" } } : {};
+  if (/pie|doughnut/i.test(kind)) {
+    const s = series[0];
+    const radius = /doughnut/i.test(kind) ? ["40%", "70%"] : "70%";
+    return {
+      color: PALETTE,
+      ...baseTitle,
+      tooltip: { trigger: "item" },
+      legend: { bottom: 0, type: "scroll" },
+      series: [{ type: "pie", radius, center: ["50%", "48%"], data: s.cats.map((c, i) => ({ name: c || `#${i + 1}`, value: s.vals[i] ?? 0 })), label: { fontSize: 11 } }]
+    };
+  }
+  if (/scatter/i.test(kind)) {
+    return {
+      color: PALETTE,
+      ...baseTitle,
+      ...legend,
+      tooltip: { trigger: "item" },
+      xAxis: { type: "value" },
+      yAxis: { type: "value" },
+      series: series.map((s) => ({ name: s.name, type: "scatter", data: s.vals.map((v, i) => [parseFloat(s.cats[i]) || i, v]) }))
+    };
+  }
+  const isBarHorizontal = /barChart/i.test(kind) && firstLocal(typeEl, "barDir")?.getAttribute("val") === "bar";
+  const isArea = /areaChart/i.test(kind);
+  const isLine = /lineChart/i.test(kind);
+  const catAxis = { type: "category", data: categories };
+  const valAxis = { type: "value" };
+  return {
+    color: PALETTE,
+    ...baseTitle,
+    ...legend,
+    grid: { left: 48, right: 24, top: title ? 48 : 24, bottom: series.length > 1 ? 48 : 32, containLabel: true },
+    tooltip: { trigger: "axis" },
+    xAxis: isBarHorizontal ? valAxis : catAxis,
+    yAxis: isBarHorizontal ? catAxis : valAxis,
+    series: series.map((s) => ({ name: s.name, type: isLine || isArea ? "line" : "bar", areaStyle: isArea ? {} : void 0, smooth: false, data: s.vals }))
+  };
+}
+async function renderChartPng(option, wPx, hPx) {
+  const w = Math.max(240, Math.min(1600, Math.round(wPx)));
+  const h = Math.max(160, Math.min(1200, Math.round(hPx)));
+  const div = document.createElement("div");
+  div.style.cssText = `position:absolute;left:-99999px;top:0;width:${w}px;height:${h}px;`;
+  document.body.appendChild(div);
+  const chart = echarts.init(div, void 0, { renderer: "canvas", width: w, height: h });
+  chart.setOption({ animation: false, ...option });
+  const url = chart.getDataURL({ type: "png", pixelRatio: 2, backgroundColor: "#ffffff" });
+  chart.dispose();
+  div.remove();
+  return url;
+}
+function dataUrlToBytes(dataUrl) {
+  const b64 = dataUrl.split(",")[1];
+  const bin = atob(b64);
+  const bytes = new Uint8Array(bin.length);
+  for (let i = 0; i < bin.length; i++) bytes[i] = bin.charCodeAt(i);
+  return bytes;
+}
+function resolvePath(baseDir, target) {
+  const parts = (baseDir + target).split("/");
+  const stack = [];
+  for (const p of parts) {
+    if (p === "..") stack.pop();
+    else if (p !== "." && p !== "") stack.push(p);
+  }
+  return stack.join("/");
+}
+function buildPicNode(doc, relId, cx, cy) {
+  const pic = doc.createElementNS(NS.pic, "pic:pic");
+  const nvPicPr = doc.createElementNS(NS.pic, "pic:nvPicPr");
+  const cNvPr = doc.createElementNS(NS.pic, "pic:cNvPr");
+  cNvPr.setAttribute("id", "0");
+  cNvPr.setAttribute("name", "chart");
+  const cNvPicPr = doc.createElementNS(NS.pic, "pic:cNvPicPr");
+  nvPicPr.append(cNvPr, cNvPicPr);
+  const blipFill = doc.createElementNS(NS.pic, "pic:blipFill");
+  const blip = doc.createElementNS(NS.a, "a:blip");
+  blip.setAttributeNS(NS.r, "r:embed", relId);
+  const stretch = doc.createElementNS(NS.a, "a:stretch");
+  stretch.appendChild(doc.createElementNS(NS.a, "a:fillRect"));
+  blipFill.append(blip, stretch);
+  const spPr = doc.createElementNS(NS.pic, "pic:spPr");
+  const xfrm = doc.createElementNS(NS.a, "a:xfrm");
+  const off = doc.createElementNS(NS.a, "a:off");
+  off.setAttribute("x", "0");
+  off.setAttribute("y", "0");
+  const ext = doc.createElementNS(NS.a, "a:ext");
+  ext.setAttribute("cx", cx);
+  ext.setAttribute("cy", cy);
+  xfrm.append(off, ext);
+  const prstGeom = doc.createElementNS(NS.a, "a:prstGeom");
+  prstGeom.setAttribute("prst", "rect");
+  prstGeom.appendChild(doc.createElementNS(NS.a, "a:avLst"));
+  spPr.append(xfrm, prstGeom);
+  pic.append(nvPicPr, blipFill, spPr);
+  return pic;
+}
+function getExtent(chartNode) {
+  let el = chartNode;
+  while (el && el.localName !== "inline" && el.localName !== "anchor") el = el.parentElement;
+  if (el) {
+    const ext = firstLocal(el, "extent");
+    if (ext) return { cx: ext.getAttribute("cx") || "5486400", cy: ext.getAttribute("cy") || "3200400" };
+  }
+  return { cx: "5486400", cy: "3200400" };
+}
+async function preprocessDocxCharts(data) {
+  let zip;
+  try {
+    zip = await JSZip.loadAsync(data);
+  } catch {
+    return data;
+  }
+  const partNames = Object.keys(zip.files).filter((n) => /^word\/(document|header\d*|footer\d*)\.xml$/.test(n));
+  let imgCounter = 0, touched = false;
+  const parser = new DOMParser(), serializer = new XMLSerializer();
+  for (const partName of partNames) {
+    const xmlText = await zip.file(partName).async("string");
+    if (!xmlText.includes("drawingml/2006/chart")) continue;
+    const doc = parser.parseFromString(xmlText, "application/xml");
+    const chartNodes = Array.from(doc.getElementsByTagNameNS(NS.c, "chart")).filter(
+      (n) => n.localName === "chart" && n.getAttributeNS(NS.r, "id")
+    );
+    if (!chartNodes.length) continue;
+    const dir = partName.substring(0, partName.lastIndexOf("/") + 1);
+    const relsPath = `${dir}_rels/${partName.substring(dir.length)}.rels`;
+    const relsFile = zip.file(relsPath);
+    if (!relsFile) continue;
+    const relsDoc = parser.parseFromString(await relsFile.async("string"), "application/xml");
+    const relsRoot = relsDoc.documentElement;
+    const relTarget = (id) => {
+      const rel = Array.from(relsRoot.children).find((r) => r.getAttribute("Id") === id);
+      return rel ? rel.getAttribute("Target") : null;
+    };
+    const existingIds = new Set(Array.from(relsRoot.children).map((r) => r.getAttribute("Id") || ""));
+    const newRelId = () => {
+      let i = 1, id = `rIdChart${i}`;
+      while (existingIds.has(id)) id = `rIdChart${++i}`;
+      existingIds.add(id);
+      return id;
+    };
+    for (const chartNode of chartNodes) {
+      const relId = chartNode.getAttributeNS(NS.r, "id");
+      const target = relTarget(relId);
+      if (!target) continue;
+      const chartPath = resolvePath(dir, target);
+      const chartFile = zip.file(chartPath);
+      if (!chartFile) continue;
+      let option = null;
+      try {
+        const chartDoc = parser.parseFromString(await chartFile.async("string"), "application/xml");
+        option = buildOption(chartDoc.documentElement);
+      } catch {
+        option = null;
+      }
+      if (!option) continue;
+      const { cx, cy } = getExtent(chartNode);
+      const wPx = parseInt(cx, 10) / EMU_PER_PX, hPx = parseInt(cy, 10) / EMU_PER_PX;
+      let png;
+      try {
+        const url = await renderChartPng(option, wPx, hPx);
+        png = dataUrlToBytes(url);
+      } catch {
+        continue;
+      }
+      imgCounter++;
+      const imgName = `media/chartimg${imgCounter}.png`;
+      zip.file(`word/${imgName}`, png);
+      const rId = newRelId();
+      const rel = relsDoc.createElementNS(NS.rel, "Relationship");
+      rel.setAttribute("Id", rId);
+      rel.setAttribute("Type", "http://schemas.openxmlformats.org/officeDocument/2006/relationships/image");
+      rel.setAttribute("Target", imgName);
+      relsRoot.appendChild(rel);
+      const graphicData = chartNode.parentElement;
+      if (!graphicData) continue;
+      graphicData.setAttribute("uri", NS.pic);
+      while (graphicData.firstChild) graphicData.removeChild(graphicData.firstChild);
+      graphicData.appendChild(buildPicNode(doc, rId, cx, cy));
+      touched = true;
+    }
+    zip.file(partName, serializer.serializeToString(doc));
+    zip.file(relsPath, serializer.serializeToString(relsDoc));
+  }
+  if (!touched) return data;
+  const ctFile = zip.file("[Content_Types].xml");
+  if (ctFile) {
+    const ctDoc = parser.parseFromString(await ctFile.async("string"), "application/xml");
+    const hasPng = Array.from(ctDoc.documentElement.children).some(
+      (e) => e.localName === "Default" && e.getAttribute("Extension")?.toLowerCase() === "png"
+    );
+    if (!hasPng) {
+      const def = ctDoc.createElementNS(NS.ct, "Default");
+      def.setAttribute("Extension", "png");
+      def.setAttribute("ContentType", "image/png");
+      ctDoc.documentElement.appendChild(def);
+      zip.file("[Content_Types].xml", serializer.serializeToString(ctDoc));
+    }
+  }
+  return zip.generateAsync({ type: "blob" });
+}
+function stampPageNumbers(container) {
+  const sections = Array.from(container.querySelectorAll("section"));
+  if (sections.length === 0) return { sections: [], labels: [] };
+  const total = sections.length;
+  const labels = [];
+  sections.forEach((section, i) => {
+    section.style.boxShadow = "0 1px 4px 0 rgba(15,23,42,0.08), 0 0 0 1px rgba(15,23,42,0.04)";
+    const label = document.createElement("div");
+    label.setAttribute("aria-hidden", "true");
+    label.style.display = "flex";
+    label.style.justifyContent = "center";
+    label.style.alignItems = "center";
+    label.style.padding = "10px 0 26px";
+    label.style.fontSize = "12px";
+    label.style.color = "#94a3b8";
+    label.style.userSelect = "none";
+    label.style.letterSpacing = "0.04em";
+    label.textContent = `Page ${i + 1} of ${total}`;
+    section.insertAdjacentElement("afterend", label);
+    labels.push(label);
+  });
+  return { sections, labels };
+}
+function stylePages(sections, labels, mode, activeIndex) {
+  sections.forEach((s, i) => {
+    s.style.display = mode === "navigation" && i !== activeIndex ? "none" : "";
+  });
+  labels.forEach((l) => {
+    l.style.display = mode === "navigation" ? "none" : "";
+  });
+}
+function DocxViewer({
+  data,
+  mode = "scroll",
+  className,
+  onError
+}) {
+  const containerRef = useRef(null);
+  const sectionsRef = useRef([]);
+  const labelsRef = useRef([]);
+  const currentPageRef = useRef(0);
+  const modeRef = useRef(mode);
+  const [loading, setLoading] = useState(true);
+  const [error, setError] = useState(null);
+  const [currentPage, setCurrentPage] = useState(0);
+  const [totalPages, setTotalPages] = useState(0);
+  useEffect(() => {
+    modeRef.current = mode;
+  }, [mode]);
+  const isNavMode = mode === "navigation";
+  const canPrev = currentPage > 0;
+  const canNext = currentPage < totalPages - 1;
+  const goToPage = useCallback((index) => {
+    const sections = sectionsRef.current;
+    if (!sections.length || index < 0 || index >= sections.length) return;
+    stylePages(sections, labelsRef.current, "navigation", index);
+    currentPageRef.current = index;
+    setCurrentPage(index);
+    containerRef.current?.scrollIntoView({ block: "start", behavior: "smooth" });
+  }, []);
+  const applyMode = useCallback((m) => {
+    const sections = sectionsRef.current;
+    if (!sections.length) return;
+    const idx = Math.min(currentPageRef.current, sections.length - 1);
+    stylePages(sections, labelsRef.current, m, idx);
+    if (m === "navigation") {
+      currentPageRef.current = idx;
+      setCurrentPage(idx);
+    }
+  }, []);
+  useEffect(() => {
+    applyMode(mode);
+  }, [mode, applyMode]);
+  useEffect(() => {
+    if (mode !== "navigation") return;
+    const handleKey = (e) => {
+      if (e.target instanceof HTMLSelectElement) return;
+      if (e.key === "ArrowRight" || e.key === "ArrowDown") {
+        e.preventDefault();
+        goToPage(currentPageRef.current + 1);
+      } else if (e.key === "ArrowLeft" || e.key === "ArrowUp") {
+        e.preventDefault();
+        goToPage(currentPageRef.current - 1);
+      }
+    };
+    window.addEventListener("keydown", handleKey);
+    return () => window.removeEventListener("keydown", handleKey);
+  }, [mode, goToPage]);
+  useEffect(() => {
+    let cancelled = false;
+    setLoading(true);
+    setError(null);
+    (async () => {
+      try {
+        const prepared = await preprocessDocxCharts(data.slice(0));
+        if (cancelled || !containerRef.current) return;
+        containerRef.current.innerHTML = "";
+        sectionsRef.current = [];
+        labelsRef.current = [];
+        await renderAsync(prepared, containerRef.current, void 0, {
+          className: "docx",
+          inWrapper: true,
+          ignoreWidth: false,
+          ignoreHeight: false,
+          breakPages: true,
+          experimental: true,
+          renderHeaders: true,
+          renderFooters: true,
+          renderFootnotes: true,
+          renderEndnotes: true,
+          useBase64URL: true
+        });
+        if (!cancelled && containerRef.current) {
+          const { sections, labels } = stampPageNumbers(containerRef.current);
+          sectionsRef.current = sections;
+          labelsRef.current = labels;
+          setTotalPages(sections.length);
+          const m = modeRef.current;
+          const idx = Math.min(currentPageRef.current, sections.length - 1);
+          stylePages(sections, labels, m, idx);
+          if (m === "navigation") {
+            currentPageRef.current = idx;
+            setCurrentPage(idx);
+          }
+        }
+      } catch (e) {
+        const err = e instanceof Error ? e : new Error("Failed to render document");
+        if (!cancelled) {
+          setError(err.message);
+          onError?.(err);
+        }
+      } finally {
+        if (!cancelled) setLoading(false);
+      }
+    })();
+    return () => {
+      cancelled = true;
+    };
+  }, [data, onError]);
+  return /* @__PURE__ */ jsxs("div", { className: `ov-docx${className ? ` ${className}` : ""}`, children: [
+    loading && /* @__PURE__ */ jsxs("div", { className: "ov-docx__loading", children: [
+      /* @__PURE__ */ jsx(Loader2, { className: "ov-docx__loading-icon" }),
+      /* @__PURE__ */ jsx("span", { className: "ov-docx__loading-text", children: "Rendering document…" })
+    ] }),
+    error && /* @__PURE__ */ jsx("div", { className: "ov-docx__error", children: error }),
+    /* @__PURE__ */ jsx(
+      "div",
+      {
+        className: "ov-docx__body",
+        style: { visibility: loading ? "hidden" : "visible" },
+        children: /* @__PURE__ */ jsx("div", { ref: containerRef, className: "ov-docx__render" })
+      }
+    ),
+    isNavMode && !loading && totalPages > 0 && /* @__PURE__ */ jsxs("div", { className: "ov-docx__nav", children: [
+      /* @__PURE__ */ jsx(
+        "button",
+        {
+          onClick: () => goToPage(currentPageRef.current - 1),
+          disabled: !canPrev,
+          "aria-label": "Previous page",
+          className: "ov-docx__nav-btn",
+          children: /* @__PURE__ */ jsx(ChevronLeft, { className: "ov-docx__nav-btn-icon", strokeWidth: 2 })
+        }
+      ),
+      /* @__PURE__ */ jsxs("div", { className: "ov-docx__nav-counter", children: [
+        /* @__PURE__ */ jsx("span", { className: "ov-docx__nav-current", children: currentPage + 1 }),
+        /* @__PURE__ */ jsxs("span", { className: "ov-docx__nav-total", children: [
+          " of ",
+          totalPages
+        ] })
+      ] }),
+      /* @__PURE__ */ jsx(
+        "button",
+        {
+          onClick: () => goToPage(currentPageRef.current + 1),
+          disabled: !canNext,
+          "aria-label": "Next page",
+          className: "ov-docx__nav-btn",
+          children: /* @__PURE__ */ jsx(ChevronRight, { className: "ov-docx__nav-btn-icon", strokeWidth: 2 })
+        }
+      )
+    ] })
+  ] });
+}
+export {
+  DocxViewer
+};

package/dist/server/assets/LogoIcon-Dx0LU3or.js

@@ -0,0 +1,26 @@
+import { jsxs, jsx } from "react/jsx-runtime";
+function LogoIcon({ size = 24 }) {
+  return /* @__PURE__ */ jsxs(
+    "svg",
+    {
+      width: size,
+      height: size,
+      viewBox: "0 0 24 24",
+      fill: "none",
+      "aria-hidden": "true",
+      children: [
+        /* @__PURE__ */ jsx("rect", { x: "2", y: "2", width: "20", height: "3", rx: "1.5", fill: "white" }),
+        /* @__PURE__ */ jsx("rect", { x: "2", y: "7", width: "14", height: "2", rx: "1", fill: "white", fillOpacity: "0.6" }),
+        /* @__PURE__ */ jsx("rect", { x: "2", y: "12", width: "6", height: "4", rx: "1", fill: "white" }),
+        /* @__PURE__ */ jsx("rect", { x: "9", y: "12", width: "6", height: "4", rx: "1", fill: "white" }),
+        /* @__PURE__ */ jsx("rect", { x: "16", y: "12", width: "6", height: "4", rx: "1", fill: "white" }),
+        /* @__PURE__ */ jsx("rect", { x: "2", y: "18", width: "6", height: "4", rx: "1", fill: "white", fillOpacity: "0.6" }),
+        /* @__PURE__ */ jsx("rect", { x: "9", y: "18", width: "6", height: "4", rx: "1", fill: "white", fillOpacity: "0.6" }),
+        /* @__PURE__ */ jsx("rect", { x: "16", y: "18", width: "6", height: "4", rx: "1", fill: "white", fillOpacity: "0.6" })
+      ]
+    }
+  );
+}
+export {
+  LogoIcon as L
+};