viewdoc 0.2.0 → 0.3.0

package/dist/index.cjs

@@ -1,3 +1,4 @@
+'use client'
 "use strict";
 var __create = Object.create;
 var __defProp = Object.defineProperty;
@@ -297,9 +298,10 @@ function ViewerShell({
     document.addEventListener("fullscreenchange", onChange);
     return () => document.removeEventListener("fullscreenchange", onChange);
   }, []);
+  const fullscreenSupported = typeof document !== "undefined" && typeof document.fullscreenEnabled === "boolean" ? document.fullscreenEnabled : false;
   const onFullscreen = (0, import_react2.useCallback)(() => {
     const el = rootRef.current;
-    if (!el) return;
+    if (!el || typeof el.requestFullscreen !== "function") return;
     if (document.fullscreenElement) {
       document.exitFullscreen();
     } else {
@@ -325,7 +327,7 @@ function ViewerShell({
             onZoomIn: zoomPan.zoomIn,
             onZoomOut: zoomPan.zoomOut,
             onReset: zoomPan.resetZoom,
-            onFullscreen: enableFullscreen ? onFullscreen : void 0,
+            onFullscreen: enableFullscreen && fullscreenSupported ? onFullscreen : void 0,
             onDownload,
             isFullscreen,
             showZoomControls: enableZoomControls,
@@ -374,6 +376,9 @@ var init_ViewerShell = __esm({
 });
 
 // src/core/useZoomPan.ts
+function pointerDistance(a, b) {
+  return Math.hypot(a.x - b.x, a.y - b.y);
+}
 function useZoomPan(options = {}) {
   const {
     minScale = DEFAULT_MIN,
@@ -381,7 +386,8 @@ function useZoomPan(options = {}) {
     zoomStep = DEFAULT_STEP,
     enablePan = true,
     enableWheelZoom = true,
-    enableDragScroll = false
+    enableDragScroll = false,
+    enablePinchZoom = true
   } = options;
   const [state, setState] = (0, import_react3.useState)({ scale: 1, translateX: 0, translateY: 0 });
   const containerRef = (0, import_react3.useRef)(null);
@@ -395,6 +401,12 @@ function useZoomPan(options = {}) {
   const scrollDragState = (0, import_react3.useRef)(
     { dragging: false, startX: 0, startY: 0, originLeft: 0, originTop: 0 }
   );
+  const activePointers = (0, import_react3.useRef)(/* @__PURE__ */ new Map());
+  const pinchState = (0, import_react3.useRef)({
+    pinching: false,
+    startDistance: 0,
+    startScale: 1
+  });
   const clamp = (0, import_react3.useCallback)(
     (value) => Math.min(maxScale, Math.max(minScale, value)),
     [minScale, maxScale]
@@ -418,6 +430,16 @@ function useZoomPan(options = {}) {
   );
   const onPointerDown = (0, import_react3.useCallback)(
     (e) => {
+      if (enablePinchZoom) {
+        activePointers.current.set(e.pointerId, { x: e.clientX, y: e.clientY });
+        if (activePointers.current.size === 2) {
+          const [a, b] = Array.from(activePointers.current.values());
+          pinchState.current = { pinching: true, startDistance: pointerDistance(a, b), startScale: state.scale };
+          dragState.current.dragging = false;
+          scrollDragState.current.dragging = false;
+          return;
+        }
+      }
       if (enablePan) {
         dragState.current = {
           dragging: true,
@@ -438,10 +460,20 @@ function useZoomPan(options = {}) {
         e.target.setPointerCapture(e.pointerId);
       }
     },
-    [enablePan, enableDragScroll, state.translateX, state.translateY]
+    [enablePan, enableDragScroll, enablePinchZoom, state.translateX, state.translateY, state.scale]
   );
   const onPointerMove = (0, import_react3.useCallback)(
     (e) => {
+      if (enablePinchZoom && activePointers.current.has(e.pointerId)) {
+        activePointers.current.set(e.pointerId, { x: e.clientX, y: e.clientY });
+      }
+      if (pinchState.current.pinching && activePointers.current.size === 2) {
+        const [a, b] = Array.from(activePointers.current.values());
+        const distance = pointerDistance(a, b);
+        const ratio = distance / (pinchState.current.startDistance || distance);
+        setScale(pinchState.current.startScale * ratio);
+        return;
+      }
       if (enablePan) {
         if (!dragState.current.dragging) return;
         const dx = e.clientX - dragState.current.startX;
@@ -459,10 +491,14 @@ function useZoomPan(options = {}) {
         containerRef.current.scrollTop = scrollDragState.current.originTop - dy;
       }
     },
-    [enablePan, enableDragScroll]
+    [enablePan, enableDragScroll, enablePinchZoom, setScale]
   );
   const onPointerUp = (0, import_react3.useCallback)(
     (e) => {
+      activePointers.current.delete(e.pointerId);
+      if (activePointers.current.size < 2) {
+        pinchState.current.pinching = false;
+      }
       if (enablePan) {
         dragState.current.dragging = false;
         e.target.releasePointerCapture(e.pointerId);
@@ -496,9 +532,9 @@ var init_useZoomPan = __esm({
 
 // src/viewers/PdfPage.tsx
 function PdfPage({ doc, pageNumber, renderScale = 1.5 }) {
-  const canvasRef = (0, import_react4.useRef)(null);
-  const renderTaskRef = (0, import_react4.useRef)(null);
-  (0, import_react4.useEffect)(() => {
+  const canvasRef = (0, import_react5.useRef)(null);
+  const renderTaskRef = (0, import_react5.useRef)(null);
+  (0, import_react5.useEffect)(() => {
     let cancelled = false;
     doc.getPage(pageNumber).then((page) => {
       if (cancelled) return;
@@ -523,21 +559,21 @@ function PdfPage({ doc, pageNumber, renderScale = 1.5 }) {
   }, [doc, pageNumber, renderScale]);
   return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("canvas", { ref: canvasRef, className: "vd-pdf-page", "data-page-number": pageNumber });
 }
-var import_react4, import_jsx_runtime5;
+var import_react5, import_jsx_runtime5;
 var init_PdfPage = __esm({
   "src/viewers/PdfPage.tsx"() {
     "use strict";
-    import_react4 = require("react");
+    import_react5 = require("react");
     import_jsx_runtime5 = require("react/jsx-runtime");
   }
 });
 
 // src/viewers/usePdfDocument.ts
 function usePdfDocument(uri) {
-  const [doc, setDoc] = (0, import_react5.useState)(null);
-  const [error, setError] = (0, import_react5.useState)(null);
-  const [loading, setLoading] = (0, import_react5.useState)(true);
-  (0, import_react5.useEffect)(() => {
+  const [doc, setDoc] = (0, import_react6.useState)(null);
+  const [error, setError] = (0, import_react6.useState)(null);
+  const [loading, setLoading] = (0, import_react6.useState)(true);
+  (0, import_react6.useEffect)(() => {
     let cancelled = false;
     setLoading(true);
     setError(null);
@@ -560,11 +596,11 @@ function usePdfDocument(uri) {
   }, [uri]);
   return { doc, numPages: doc?.numPages ?? 0, error, loading };
 }
-var import_react5, pdfjsLib, import_meta;
+var import_react6, pdfjsLib, import_meta;
 var init_usePdfDocument = __esm({
   "src/viewers/usePdfDocument.ts"() {
     "use strict";
-    import_react5 = require("react");
+    import_react6 = require("react");
     pdfjsLib = __toESM(require("pdfjs-dist"), 1);
     import_meta = {};
     pdfjsLib.GlobalWorkerOptions.workerSrc = new URL("pdfjs-dist/build/pdf.worker.min.mjs", import_meta.url).toString();
@@ -573,8 +609,8 @@ var init_usePdfDocument = __esm({
 
 // src/viewers/useVisiblePage.ts
 function useVisiblePage(containerRef, numPages) {
-  const [currentPage, setCurrentPage] = (0, import_react6.useState)(1);
-  (0, import_react6.useEffect)(() => {
+  const [currentPage, setCurrentPage] = (0, import_react7.useState)(1);
+  (0, import_react7.useEffect)(() => {
     const root = containerRef.current;
     if (!root || numPages === 0) return;
     const observer = new IntersectionObserver(
@@ -593,11 +629,11 @@ function useVisiblePage(containerRef, numPages) {
   }, [containerRef, numPages]);
   return currentPage;
 }
-var import_react6;
+var import_react7;
 var init_useVisiblePage = __esm({
   "src/viewers/useVisiblePage.ts"() {
     "use strict";
-    import_react6 = require("react");
+    import_react7 = require("react");
   }
 });
 
@@ -628,6 +664,7 @@ function PdfViewer({
   renderScale,
   enableZoomControls = true,
   enableWheelZoom = true,
+  enablePinchZoom = true,
   enableFullscreen = true,
   enableDownload = true,
   onDownload,
@@ -642,7 +679,8 @@ function PdfViewer({
     zoomStep,
     enablePan: false,
     enableDragScroll: true,
-    enableWheelZoom
+    enableWheelZoom,
+    enablePinchZoom
   });
   const { doc, numPages, error, loading } = usePdfDocument(uri);
   const currentPage = useVisiblePage(zoomPan.containerRef, numPages);
@@ -670,8 +708,8 @@ function PdfViewer({
         numPages
       ] }) : void 0,
       children: [
-        loading && /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("span", { className: "vd-pdf-page-indicator", children: "Loading PDF\u2026" }),
-        error && /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("span", { className: "vd-pdf-page-indicator", children: [
+        loading && /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("span", { className: "vd-doc-status", children: "Loading PDF\u2026" }),
+        error && /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("span", { className: "vd-doc-status", children: [
           "Failed to load PDF: ",
           error.message
         ] }),
@@ -693,12 +731,24 @@ var init_PdfViewer = __esm({
   }
 });
 
+// src/core/sanitizeHtml.ts
+function sanitizeUntrustedHtml(html) {
+  return import_dompurify.default.sanitize(html);
+}
+var import_dompurify;
+var init_sanitizeHtml = __esm({
+  "src/core/sanitizeHtml.ts"() {
+    "use strict";
+    import_dompurify = __toESM(require("dompurify"), 1);
+  }
+});
+
 // src/viewers/useDocxHtml.ts
 function useDocxHtml(uri) {
-  const [html, setHtml] = (0, import_react7.useState)(null);
-  const [error, setError] = (0, import_react7.useState)(null);
-  const [loading, setLoading] = (0, import_react7.useState)(true);
-  (0, import_react7.useEffect)(() => {
+  const [html, setHtml] = (0, import_react8.useState)(null);
+  const [error, setError] = (0, import_react8.useState)(null);
+  const [loading, setLoading] = (0, import_react8.useState)(true);
+  (0, import_react8.useEffect)(() => {
     let cancelled = false;
     setLoading(true);
     setError(null);
@@ -706,9 +756,13 @@ function useDocxHtml(uri) {
     fetch(uri).then((res) => {
       if (!res.ok) throw new Error(`Failed to fetch document: ${res.status} ${res.statusText}`);
       return res.arrayBuffer();
-    }).then((arrayBuffer) => import_mammoth.default.convertToHtml({ arrayBuffer })).then((result) => {
+    }).then(
+      (arrayBuffer) => import_mammoth.default.convertToHtml({ arrayBuffer }).catch(() => {
+        throw new Error("This file could not be read as a Word document (.docx).");
+      })
+    ).then((result) => {
       if (cancelled) return;
-      setHtml(result.value);
+      setHtml(sanitizeUntrustedHtml(result.value));
       setLoading(false);
     }).catch((err) => {
       if (!cancelled) {
@@ -722,12 +776,13 @@ function useDocxHtml(uri) {
   }, [uri]);
   return { html, error, loading };
 }
-var import_react7, import_mammoth;
+var import_react8, import_mammoth;
 var init_useDocxHtml = __esm({
   "src/viewers/useDocxHtml.ts"() {
     "use strict";
-    import_react7 = require("react");
+    import_react8 = require("react");
     import_mammoth = __toESM(require("mammoth"), 1);
+    init_sanitizeHtml();
   }
 });
 
@@ -757,6 +812,7 @@ function DocxViewer({
   zoomStep,
   enableZoomControls = true,
   enableWheelZoom = true,
+  enablePinchZoom = true,
   enableFullscreen = true,
   enableDownload = true,
   onDownload,
@@ -771,7 +827,8 @@ function DocxViewer({
     zoomStep,
     enablePan: false,
     enableDragScroll: true,
-    enableWheelZoom
+    enableWheelZoom,
+    enablePinchZoom
   });
   const { html, error, loading } = useDocxHtml(uri);
   const handleDownload = enableDownload ? onDownload ?? (() => defaultDownload3(uri, fileName)) : void 0;
@@ -815,10 +872,10 @@ var init_DocxViewer = __esm({
 
 // src/viewers/useXlsxWorkbook.ts
 function useXlsxWorkbook(uri) {
-  const [workbook, setWorkbook] = (0, import_react8.useState)(null);
-  const [error, setError] = (0, import_react8.useState)(null);
-  const [loading, setLoading] = (0, import_react8.useState)(true);
-  (0, import_react8.useEffect)(() => {
+  const [workbook, setWorkbook] = (0, import_react9.useState)(null);
+  const [error, setError] = (0, import_react9.useState)(null);
+  const [loading, setLoading] = (0, import_react9.useState)(true);
+  (0, import_react9.useEffect)(() => {
     let cancelled = false;
     setLoading(true);
     setError(null);
@@ -843,11 +900,11 @@ function useXlsxWorkbook(uri) {
   }, [uri]);
   return { workbook, error, loading };
 }
-var import_react8, XLSX;
+var import_react9, XLSX;
 var init_useXlsxWorkbook = __esm({
   "src/viewers/useXlsxWorkbook.ts"() {
     "use strict";
-    import_react8 = require("react");
+    import_react9 = require("react");
     XLSX = __toESM(require("xlsx"), 1);
   }
 });
@@ -878,13 +935,15 @@ function XlsxViewer({
   zoomStep,
   enableZoomControls = true,
   enableWheelZoom = true,
+  enablePinchZoom = true,
   enableFullscreen = true,
   enableDownload = true,
   onDownload,
   theme,
   floating = true,
   windowDraggable = true,
-  defaultPosition
+  defaultPosition,
+  maxRows = 2e3
 }) {
   const zoomPan = useZoomPan({
     minScale,
@@ -892,18 +951,32 @@ function XlsxViewer({
     zoomStep,
     enablePan: false,
     enableDragScroll: true,
-    enableWheelZoom
+    enableWheelZoom,
+    enablePinchZoom
   });
   const { workbook, error, loading } = useXlsxWorkbook(uri);
-  const [activeSheet, setActiveSheet] = (0, import_react9.useState)(0);
+  const [activeSheet, setActiveSheet] = (0, import_react10.useState)(0);
   const handleDownload = enableDownload ? onDownload ?? (() => defaultDownload4(uri, fileName)) : void 0;
-  const tableHtml = (0, import_react9.useMemo)(() => {
-    if (!workbook) return null;
+  const { tableHtml, truncatedRowCount, totalRowCount } = (0, import_react10.useMemo)(() => {
+    if (!workbook) return { tableHtml: null, truncatedRowCount: null, totalRowCount: 0 };
     const sheetName = workbook.SheetNames[activeSheet];
     const sheet = workbook.Sheets[sheetName];
-    if (!sheet) return null;
-    return XLSX2.utils.sheet_to_html(sheet, { editable: false });
-  }, [workbook, activeSheet]);
+    if (!sheet || !sheet["!ref"]) return { tableHtml: null, truncatedRowCount: null, totalRowCount: 0 };
+    const range = XLSX2.utils.decode_range(sheet["!ref"]);
+    const totalRows = range.e.r - range.s.r + 1;
+    let sheetToRender = sheet;
+    let truncated = null;
+    if (totalRows > maxRows) {
+      truncated = maxRows;
+      const clampedRange = { s: range.s, e: { r: range.s.r + maxRows - 1, c: range.e.c } };
+      sheetToRender = { ...sheet, "!ref": XLSX2.utils.encode_range(clampedRange) };
+    }
+    return {
+      tableHtml: sanitizeUntrustedHtml(XLSX2.utils.sheet_to_html(sheetToRender, { editable: false })),
+      truncatedRowCount: truncated,
+      totalRowCount: totalRows
+    };
+  }, [workbook, activeSheet, maxRows]);
   const wrapperStyle = floating ? { ...style } : { display: "flex", alignItems: "center", justifyContent: "center", width: "100%", height: "100%", ...style };
   return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("div", { className, style: wrapperStyle, children: /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(
     ViewerShell,
@@ -937,19 +1010,27 @@ function XlsxViewer({
             },
             name
           )) }),
+          truncatedRowCount != null && /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("div", { className: "vd-xlsx-truncated-notice", children: [
+            "Showing the first ",
+            truncatedRowCount.toLocaleString(),
+            " of ",
+            totalRowCount.toLocaleString(),
+            " rows. Download the file to see the rest."
+          ] }),
           tableHtml && /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("div", { className: "vd-xlsx-table", dangerouslySetInnerHTML: { __html: tableHtml } })
         ] })
       ]
     }
   ) });
 }
-var import_react9, XLSX2, import_jsx_runtime8;
+var import_react10, XLSX2, import_jsx_runtime8;
 var init_XlsxViewer = __esm({
   "src/viewers/XlsxViewer.tsx"() {
     "use strict";
-    import_react9 = require("react");
+    import_react10 = require("react");
     XLSX2 = __toESM(require("xlsx"), 1);
     init_ViewerShell();
+    init_sanitizeHtml();
     init_useZoomPan();
     init_useXlsxWorkbook();
     import_jsx_runtime8 = require("react/jsx-runtime");
@@ -971,9 +1052,10 @@ __export(src_exports, {
 module.exports = __toCommonJS(src_exports);
 
 // src/DocViewer.tsx
-var import_react10 = require("react");
+var import_react11 = require("react");
 
 // src/viewers/ImageViewer.tsx
+var import_react4 = require("react");
 init_ViewerShell();
 init_useZoomPan();
 var import_jsx_runtime4 = require("react/jsx-runtime");
@@ -998,6 +1080,7 @@ function ImageViewer({
   zoomStep,
   enableZoomControls = true,
   enableWheelZoom = true,
+  enablePinchZoom = true,
   enablePan = true,
   enableFullscreen = true,
   enableDownload = true,
@@ -1007,7 +1090,9 @@ function ImageViewer({
   windowDraggable = true,
   defaultPosition
 }) {
-  const zoomPan = useZoomPan({ minScale, maxScale, zoomStep, enablePan, enableWheelZoom });
+  const zoomPan = useZoomPan({ minScale, maxScale, zoomStep, enablePan, enableWheelZoom, enablePinchZoom });
+  const [failed, setFailed] = (0, import_react4.useState)(false);
+  (0, import_react4.useEffect)(() => setFailed(false), [uri]);
   const handleDownload = enableDownload ? onDownload ?? (() => defaultDownload(uri, fileName)) : void 0;
   const wrapperStyle = floating ? { ...style } : { display: "flex", alignItems: "center", justifyContent: "center", width: "100%", height: "100%", ...style };
   return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("div", { className, style: wrapperStyle, children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
@@ -1024,7 +1109,20 @@ function ImageViewer({
       floating,
       draggable: windowDraggable,
       defaultPosition,
-      children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("img", { className: "vd-image", src: uri, alt: fileName ?? "document image", draggable: false })
+      children: failed ? /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("span", { className: "vd-doc-status", children: [
+        'Failed to load image "',
+        fileName ?? uri,
+        '".'
+      ] }) : /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+        "img",
+        {
+          className: "vd-image",
+          src: uri,
+          alt: fileName ?? "document image",
+          draggable: false,
+          onError: () => setFailed(true)
+        }
+      )
     }
   ) });
 }
@@ -1071,20 +1169,20 @@ function detectFileType(uri, hint) {
 
 // src/DocViewer.tsx
 var import_jsx_runtime9 = require("react/jsx-runtime");
-var PdfViewer2 = (0, import_react10.lazy)(() => Promise.resolve().then(() => (init_PdfViewer(), PdfViewer_exports)).then((m) => ({ default: m.PdfViewer })));
-var DocxViewer2 = (0, import_react10.lazy)(() => Promise.resolve().then(() => (init_DocxViewer(), DocxViewer_exports)).then((m) => ({ default: m.DocxViewer })));
-var XlsxViewer2 = (0, import_react10.lazy)(() => Promise.resolve().then(() => (init_XlsxViewer(), XlsxViewer_exports)).then((m) => ({ default: m.XlsxViewer })));
+var PdfViewer2 = (0, import_react11.lazy)(() => Promise.resolve().then(() => (init_PdfViewer(), PdfViewer_exports)).then((m) => ({ default: m.PdfViewer })));
+var DocxViewer2 = (0, import_react11.lazy)(() => Promise.resolve().then(() => (init_DocxViewer(), DocxViewer_exports)).then((m) => ({ default: m.DocxViewer })));
+var XlsxViewer2 = (0, import_react11.lazy)(() => Promise.resolve().then(() => (init_XlsxViewer(), XlsxViewer_exports)).then((m) => ({ default: m.XlsxViewer })));
 function DocViewer({ uri, fileName, type, fallback, loadingFallback, ...rest }) {
   const detected = detectFileType(uri, type ?? fileName?.split(".").pop());
   switch (detected) {
     case "image":
       return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(ImageViewer, { uri, fileName, ...rest });
     case "pdf":
-      return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(import_react10.Suspense, { fallback: loadingFallback ?? null, children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(PdfViewer2, { uri, fileName, ...rest }) });
+      return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(import_react11.Suspense, { fallback: loadingFallback ?? null, children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(PdfViewer2, { uri, fileName, ...rest }) });
     case "docx":
-      return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(import_react10.Suspense, { fallback: loadingFallback ?? null, children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(DocxViewer2, { uri, fileName, ...rest }) });
+      return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(import_react11.Suspense, { fallback: loadingFallback ?? null, children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(DocxViewer2, { uri, fileName, ...rest }) });
     case "xlsx":
-      return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(import_react10.Suspense, { fallback: loadingFallback ?? null, children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(XlsxViewer2, { uri, fileName, ...rest }) });
+      return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(import_react11.Suspense, { fallback: loadingFallback ?? null, children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(XlsxViewer2, { uri, fileName, ...rest }) });
     default:
       return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(import_jsx_runtime9.Fragment, { children: fallback ?? /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("div", { className: "vd-doc-status", children: [
         'Unable to detect file type for "',