@seqyuan/annodex 0.1.10 → 0.1.12

package/components/viewers/PdfViewer.tsx

@@ -0,0 +1,206 @@
+"use client";
+
+import { useEffect, useRef, useState, useCallback } from "react";
+import { DocumentToolbar } from "./DocumentToolbar";
+
+// Dynamic import for pdfjs-dist to avoid SSR issues with canvas.
+// Use the legacy bundle because the modern PDF.js worker requires newer
+// browser APIs such as Uint8Array.prototype.toHex().
+let pdfjsLib: typeof import("pdfjs-dist") | null = null;
+
+interface Props {
+  arrayBuffer: ArrayBuffer;
+  fileName?: string;
+}
+
+export function PdfViewer({ arrayBuffer, fileName }: Props) {
+  const containerRef = useRef<HTMLDivElement>(null);
+  const [loading, setLoading] = useState(true);
+  const [error, setError] = useState<string | null>(null);
+  const [pageCount, setPageCount] = useState(0);
+  const [currentPage, setCurrentPage] = useState(1);
+  const [zoom, setZoom] = useState(1.0);
+  const zoomRef = useRef(zoom);
+  zoomRef.current = zoom;
+  const docRef = useRef<unknown>(null);
+  const renderTaskRef = useRef<{ cancel: () => void } | null>(null);
+
+  const renderPage = useCallback(async (pageNum: number) => {
+    if (!pdfjsLib || !docRef.current) return;
+    const doc = docRef.current as { numPages: number; getPage: (n: number) => Promise<unknown> };
+    if (pageNum < 1 || pageNum > doc.numPages) return;
+
+    // Cancel previous render
+    if (renderTaskRef.current) {
+      renderTaskRef.current.cancel();
+      renderTaskRef.current = null;
+    }
+
+    try {
+      const page = await doc.getPage(pageNum) as {
+        getViewport: (opt: { scale: number }) => { width: number; height: number };
+        render: (opt: { canvas: HTMLCanvasElement; viewport: { width: number; height: number } }) => { promise: Promise<void> };
+      };
+      const viewport = page.getViewport({ scale: zoomRef.current * (window.devicePixelRatio || 1) });
+
+      const container = containerRef.current;
+      if (!container) return;
+
+      // Find or create canvas
+      let canvas = container.querySelector("canvas") as HTMLCanvasElement | null;
+      if (!canvas) {
+        canvas = document.createElement("canvas");
+        canvas.style.display = "block";
+        canvas.style.margin = "0 auto";
+        container.innerHTML = "";
+        container.appendChild(canvas);
+      }
+
+      canvas.width = viewport.width;
+      canvas.height = viewport.height;
+      canvas.style.width = `${viewport.width / (window.devicePixelRatio || 1)}px`;
+      canvas.style.height = `${viewport.height / (window.devicePixelRatio || 1)}px`;
+
+      const ctx = canvas.getContext("2d");
+      if (!ctx) return;
+
+      const renderTask = page.render({ canvas, viewport });
+      renderTaskRef.current = renderTask as unknown as { cancel: () => void };
+      await renderTask.promise;
+      renderTaskRef.current = null;
+    } catch (err: unknown) {
+      if ((err as { name?: string }).name !== "RenderingCancelledException") {
+        console.error("PDF render error:", err);
+      }
+    }
+  }, []);
+
+  // Load PDF document once when arrayBuffer changes
+  useEffect(() => {
+    let cancelled = false;
+
+    async function load() {
+      setLoading(true);
+      setError(null);
+
+      try {
+        if (!pdfjsLib) {
+          pdfjsLib = await import("pdfjs-dist/legacy/build/pdf.mjs") as typeof import("pdfjs-dist");
+          pdfjsLib.GlobalWorkerOptions.workerSrc = new URL(
+            "pdfjs-dist/legacy/build/pdf.worker.min.mjs",
+            import.meta.url
+          ).toString();
+        }
+
+        const doc = await pdfjsLib.getDocument({ data: arrayBuffer }).promise;
+        if (cancelled) return;
+        docRef.current = doc;
+        setPageCount(doc.numPages);
+        setCurrentPage(1);
+        setLoading(false);
+      } catch (err: unknown) {
+        if (!cancelled) {
+          setError(String(err));
+          setLoading(false);
+        }
+      }
+    }
+
+    load();
+    return () => {
+      cancelled = true;
+      if (renderTaskRef.current) {
+        renderTaskRef.current.cancel();
+        renderTaskRef.current = null;
+      }
+    };
+  }, [arrayBuffer]);
+
+  // Render first page after load + re-render on page change
+  useEffect(() => {
+    if (!loading && pageCount > 0) {
+      renderPage(currentPage);
+    }
+  }, [loading, currentPage, pageCount, renderPage]);
+
+  // Re-render on zoom change
+  useEffect(() => {
+    if (!loading && pageCount > 0) {
+      renderPage(currentPage);
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [zoom]);
+
+  return (
+    <div style={{ display: "flex", flexDirection: "column", height: "100%", overflow: "hidden" }}>
+      <DocumentToolbar
+        fileName={fileName}
+        pageInfo={pageCount > 0 ? `Page ${currentPage} / ${pageCount}` : undefined}
+        zoom={zoom}
+        onZoomIn={() => setZoom((z) => Math.min(z + 0.25, 3))}
+        onZoomOut={() => setZoom((z) => Math.max(z - 0.25, 0.25))}
+        extra={
+          pageCount > 1 && (
+            <div style={{ display: "flex", alignItems: "center", gap: 4 }}>
+              <button
+                onClick={() => setCurrentPage((p) => Math.max(p - 1, 1))}
+                disabled={currentPage <= 1}
+                style={{ ...toolbarBtnStyle, opacity: currentPage <= 1 ? 0.4 : 1 }}
+              >
+                <svg width="10" height="10" viewBox="0 0 10 10" fill="none" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round">
+                  <polyline points="6 2 3 5 6 8" />
+                </svg>
+              </button>
+              <span style={{ fontSize: 11, color: "var(--text-dim)", minWidth: 28, textAlign: "center" }}>
+                {currentPage}/{pageCount}
+              </span>
+              <button
+                onClick={() => setCurrentPage((p) => Math.min(p + 1, pageCount))}
+                disabled={currentPage >= pageCount}
+                style={{ ...toolbarBtnStyle, opacity: currentPage >= pageCount ? 0.4 : 1 }}
+              >
+                <svg width="10" height="10" viewBox="0 0 10 10" fill="none" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round">
+                  <polyline points="4 2 7 5 4 8" />
+                </svg>
+              </button>
+            </div>
+          )
+        }
+      />
+      <div
+        style={{
+          flex: 1,
+          overflow: "auto",
+          background: "#525659",
+          display: "flex",
+          justifyContent: "center",
+          padding: 16,
+        }}
+      >
+        {loading && (
+          <div style={{ color: "#ccc", fontSize: 13, display: "flex", alignItems: "center", gap: 6, alignSelf: "flex-start", marginTop: 40 }}>
+            Loading PDF...
+          </div>
+        )}
+        {error && (
+          <div style={{ color: "#f87171", fontSize: 13, alignSelf: "flex-start", marginTop: 40 }}>{error}</div>
+        )}
+        <div ref={containerRef} style={{ visibility: loading ? "hidden" : "visible" }} />
+      </div>
+    </div>
+  );
+}
+
+const toolbarBtnStyle: React.CSSProperties = {
+  display: "flex",
+  alignItems: "center",
+  justifyContent: "center",
+  width: 24,
+  height: 24,
+  padding: 0,
+  background: "none",
+  border: "1px solid var(--border)",
+  borderRadius: 4,
+  color: "var(--text-muted)",
+  cursor: "pointer",
+};

package/components/viewers/PptxViewer.tsx

@@ -0,0 +1,240 @@
+"use client";
+
+import { useEffect, useState } from "react";
+import { DocumentToolbar } from "./DocumentToolbar";
+
+interface Props {
+  arrayBuffer: ArrayBuffer;
+  fileName?: string;
+}
+
+interface SlideInfo {
+  index: number;
+  texts: string[];
+}
+
+export function PptxViewer({ arrayBuffer, fileName }: Props) {
+  const [loading, setLoading] = useState(true);
+  const [error, setError] = useState<string | null>(null);
+  const [slides, setSlides] = useState<SlideInfo[]>([]);
+  const [activeSlide, setActiveSlide] = useState(0);
+
+  useEffect(() => {
+    let cancelled = false;
+
+    async function parse() {
+      setLoading(true);
+      setError(null);
+
+      try {
+        const JSZip = (await import("jszip")).default;
+        const zip = await JSZip.loadAsync(arrayBuffer);
+
+        // Find slide files: ppt/slides/slideN.xml
+        const slideFiles: { name: string; index: number }[] = [];
+        zip.forEach((relativePath) => {
+          const match = /^ppt\/slides\/slide(\d+)\.xml$/i.exec(relativePath);
+          if (match) {
+            slideFiles.push({ name: relativePath, index: parseInt(match[1], 10) });
+          }
+        });
+        slideFiles.sort((a, b) => a.index - b.index);
+
+        const parsedSlides: SlideInfo[] = [];
+
+        for (const sf of slideFiles) {
+          if (cancelled) return;
+          const xmlStr = await zip.file(sf.name)!.async("string");
+
+          // Extract text from <a:t> elements
+          const textRegex = /<a:t[^>]*>([^<]*)<\/a:t>/g;
+          const texts: string[] = [];
+          let match: RegExpExecArray | null;
+          while ((match = textRegex.exec(xmlStr)) !== null) {
+            const t = match[1].trim();
+            if (t) texts.push(t);
+          }
+
+          // Extract image references for potential future use
+          // const imgRegex = /<a:blip[^>]*r:embed="([^"]+)"/g;
+
+          parsedSlides.push({ index: sf.index, texts });
+        }
+
+        if (!cancelled) {
+          setSlides(parsedSlides);
+          setLoading(false);
+        }
+      } catch (err: unknown) {
+        if (!cancelled) {
+          console.error("PPTX parse error:", err);
+          setError(String(err));
+          setLoading(false);
+        }
+      }
+    }
+
+    parse();
+    return () => { cancelled = true; };
+  }, [arrayBuffer]);
+
+  const currentSlide = slides[activeSlide];
+  const slideCount = slides.length;
+
+  return (
+    <div style={{ display: "flex", flexDirection: "column", height: "100%", overflow: "hidden" }}>
+      <DocumentToolbar
+        fileName={fileName}
+        pageInfo={slideCount > 0 ? `Slide ${activeSlide + 1} / ${slideCount}` : undefined}
+        extra={
+          slideCount > 1 && (
+            <div style={{ display: "flex", alignItems: "center", gap: 4 }}>
+              <button
+                onClick={() => setActiveSlide((s) => Math.max(s - 1, 0))}
+                disabled={activeSlide <= 0}
+                style={{ ...toolbarBtnStyle, opacity: activeSlide <= 0 ? 0.4 : 1 }}
+              >
+                <svg width="10" height="10" viewBox="0 0 10 10" fill="none" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round">
+                  <polyline points="6 2 3 5 6 8" />
+                </svg>
+              </button>
+              <span style={{ fontSize: 11, color: "var(--text-dim)", minWidth: 28, textAlign: "center" }}>
+                {activeSlide + 1}/{slideCount}
+              </span>
+              <button
+                onClick={() => setActiveSlide((s) => Math.min(s + 1, slideCount - 1))}
+                disabled={activeSlide >= slideCount - 1}
+                style={{ ...toolbarBtnStyle, opacity: activeSlide >= slideCount - 1 ? 0.4 : 1 }}
+              >
+                <svg width="10" height="10" viewBox="0 0 10 10" fill="none" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round">
+                  <polyline points="4 2 7 5 4 8" />
+                </svg>
+              </button>
+            </div>
+          )
+        }
+      />
+      <div style={{ flex: 1, overflow: "auto", background: "var(--bg-panel)", display: "flex", justifyContent: "center", alignItems: "flex-start", padding: 24 }}>
+        {loading && (
+          <div style={{ color: "var(--text-muted)", fontSize: 13, padding: "40px 16px", textAlign: "center" }}>
+            Loading presentation...
+          </div>
+        )}
+        {error && (
+          <div style={{ color: "#f87171", fontSize: 13, padding: "40px 16px", textAlign: "center" }}>{error}</div>
+        )}
+        {!loading && !error && currentSlide && (
+          <div
+            style={{
+              width: "100%",
+              maxWidth: 800,
+            }}
+          >
+            {/* Slide preview card */}
+            <div
+              style={{
+                background: "#fff",
+                border: "1px solid var(--border)",
+                borderRadius: 8,
+                boxShadow: "0 2px 8px rgba(0,0,0,0.08)",
+                overflow: "hidden",
+              }}
+            >
+              {/* Slide header mimicking title bar */}
+              <div
+                style={{
+                  padding: "8px 16px",
+                  background: "var(--bg)",
+                  borderBottom: "1px solid var(--border)",
+                  fontSize: 11,
+                  color: "var(--text-dim)",
+                  fontFamily: "var(--font-mono)",
+                }}
+              >
+                Slide {currentSlide.index}
+              </div>
+              {/* Slide content */}
+              <div style={{ padding: "24px 32px 40px", minHeight: 200 }}>
+                {currentSlide.texts.length === 0 ? (
+                  <div style={{ color: "var(--text-dim)", fontStyle: "italic", fontSize: 13 }}>(No text content)</div>
+                ) : (
+                  <ul style={{ margin: 0, padding: 0, listStyle: "none" }}>
+                    {currentSlide.texts.map((text, i) => (
+                      <li
+                        key={i}
+                        style={{
+                          padding: "4px 0",
+                          fontSize: 14,
+                          lineHeight: 1.6,
+                          color: "var(--text)",
+                          borderBottom: i < currentSlide.texts.length - 1 ? "1px solid var(--bg-panel)" : "none",
+                        }}
+                      >
+                        {text}
+                      </li>
+                    ))}
+                  </ul>
+                )}
+              </div>
+            </div>
+
+            {/* All slides list */}
+            {slideCount > 1 && (
+              <div style={{ marginTop: 24 }}>
+                <div style={{ fontSize: 12, color: "var(--text-dim)", marginBottom: 8 }}>All slides</div>
+                <div style={{ display: "grid", gridTemplateColumns: "repeat(auto-fill, minmax(140px, 1fr))", gap: 8 }}>
+                  {slides.map((slide, i) => (
+                    <button
+                      key={slide.index}
+                      onClick={() => setActiveSlide(i)}
+                      style={{
+                        padding: "10px 12px",
+                        background: i === activeSlide ? "var(--bg-selected)" : "var(--bg)",
+                        border: i === activeSlide ? "2px solid var(--accent)" : "1px solid var(--border)",
+                        borderRadius: 6,
+                        cursor: "pointer",
+                        textAlign: "left",
+                        fontSize: 11,
+                        color: "var(--text-muted)",
+                        transition: "border-color 0.12s, background 0.12s",
+                      }}
+                      onMouseEnter={(e) => {
+                        if (i !== activeSlide) e.currentTarget.style.background = "var(--bg-hover)";
+                      }}
+                      onMouseLeave={(e) => {
+                        if (i !== activeSlide) e.currentTarget.style.background = "var(--bg)";
+                      }}
+                    >
+                      <div style={{ fontWeight: 600, marginBottom: 2, color: "var(--text)" }}>Slide {slide.index}</div>
+                      <div style={{
+                        overflow: "hidden",
+                        textOverflow: "ellipsis",
+                        whiteSpace: "nowrap",
+                      }}>
+                        {slide.texts[0] || "(empty)"}
+                      </div>
+                    </button>
+                  ))}
+                </div>
+              </div>
+            )}
+          </div>
+        )}
+      </div>
+    </div>
+  );
+}
+
+const toolbarBtnStyle: React.CSSProperties = {
+  display: "flex",
+  alignItems: "center",
+  justifyContent: "center",
+  width: 24,
+  height: 24,
+  padding: 0,
+  background: "none",
+  border: "1px solid var(--border)",
+  borderRadius: 4,
+  color: "var(--text-muted)",
+  cursor: "pointer",
+};

package/components/viewers/XlsxViewer.tsx

@@ -0,0 +1,143 @@
+"use client";
+
+import { useEffect, useRef, useState } from "react";
+import { DocumentToolbar } from "./DocumentToolbar";
+
+interface Props {
+  arrayBuffer: ArrayBuffer;
+  fileName?: string;
+}
+
+interface SheetInfo {
+  name: string;
+  html: string;
+}
+
+export function XlsxViewer({ arrayBuffer, fileName }: Props) {
+  const [loading, setLoading] = useState(true);
+  const [error, setError] = useState<string | null>(null);
+  const [sheets, setSheets] = useState<SheetInfo[]>([]);
+  const [activeSheet, setActiveSheet] = useState(0);
+  const tableRef = useRef<HTMLDivElement>(null);
+  const [frozen, setFrozen] = useState(false);
+
+  useEffect(() => {
+    let cancelled = false;
+
+    async function parse() {
+      setLoading(true);
+      setError(null);
+
+      try {
+        const XLSX = await import("xlsx");
+        const workbook = XLSX.read(arrayBuffer, { type: "array" });
+
+        const sheetInfos: SheetInfo[] = workbook.SheetNames.map((name) => {
+          const sheet = workbook.Sheets[name];
+          const html = XLSX.utils.sheet_to_html(sheet, { editable: false });
+          return { name, html };
+        });
+
+        if (!cancelled) {
+          setSheets(sheetInfos);
+          setActiveSheet(0);
+          setLoading(false);
+        }
+      } catch (err: unknown) {
+        if (!cancelled) {
+          console.error("XLSX parse error:", err);
+          setError(String(err));
+          setLoading(false);
+        }
+      }
+    }
+
+    parse();
+    return () => { cancelled = true; };
+  }, [arrayBuffer]);
+
+  // Freeze detection for wide tables
+  useEffect(() => {
+    const el = tableRef.current;
+    if (!el) return;
+    const table = el.querySelector("table");
+    if (!table) return;
+
+    const check = () => {
+      const cols = table.querySelectorAll("colgroup col, thead tr:first-child th, tbody tr:first-child td").length;
+      setFrozen(cols > 8);
+    };
+
+    check();
+    const observer = new ResizeObserver(check);
+    observer.observe(el);
+    return () => observer.disconnect();
+  }, [activeSheet, sheets]);
+
+  return (
+    <div style={{ display: "flex", flexDirection: "column", height: "100%", overflow: "hidden" }}>
+      <DocumentToolbar
+        fileName={fileName}
+        extra={
+          sheets.length > 1 && (
+            <div style={{ display: "flex", alignItems: "center", gap: 2 }}>
+              {sheets.map((s, i) => (
+                <button
+                  key={i}
+                  onClick={() => setActiveSheet(i)}
+                  style={{
+                    padding: "2px 10px",
+                    fontSize: 11,
+                    border: "1px solid var(--border)",
+                    borderBottom: i === activeSheet ? "2px solid var(--accent)" : "1px solid var(--border)",
+                    borderRadius: "4px 4px 0 0",
+                    background: i === activeSheet ? "var(--bg-selected)" : "none",
+                    color: i === activeSheet ? "var(--text)" : "var(--text-muted)",
+                    cursor: "pointer",
+                    fontWeight: i === activeSheet ? 600 : 400,
+                    transition: "background 0.12s",
+                  }}
+                  onMouseEnter={(e) => {
+                    if (i !== activeSheet) e.currentTarget.style.background = "var(--bg-hover)";
+                  }}
+                  onMouseLeave={(e) => {
+                    if (i !== activeSheet) e.currentTarget.style.background = "none";
+                  }}
+                >
+                  {s.name}
+                </button>
+              ))}
+            </div>
+          )
+        }
+      />
+      <div
+        style={{
+          flex: 1,
+          overflow: "auto",
+          background: "var(--bg-panel)",
+        }}
+      >
+        {loading && (
+          <div style={{ color: "var(--text-muted)", fontSize: 13, padding: "40px 16px", textAlign: "center" }}>
+            Loading spreadsheet...
+          </div>
+        )}
+        {error && (
+          <div style={{ color: "#f87171", fontSize: 13, padding: "40px 16px", textAlign: "center" }}>{error}</div>
+        )}
+        {!loading && !error && sheets.length > 0 && (
+          <div
+            ref={tableRef}
+            style={{
+              padding: "0 16px 16px",
+              overflow: frozen ? "auto" : "visible",
+            }}
+            dangerouslySetInnerHTML={{ __html: sheets[activeSheet]?.html ?? "" }}
+            className="xlsx-preview"
+          />
+        )}
+      </div>
+    </div>
+  );
+}