viewdoc 0.2.1 → 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);
@@ -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);
@@ -693,6 +731,18 @@ 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_react8.useState)(null);
@@ -712,7 +762,7 @@ function useDocxHtml(uri) {
       })
     ).then((result) => {
       if (cancelled) return;
-      setHtml(result.value);
+      setHtml(sanitizeUntrustedHtml(result.value));
       setLoading(false);
     }).catch((err) => {
       if (!cancelled) {
@@ -732,6 +782,7 @@ var init_useDocxHtml = __esm({
     "use strict";
     import_react8 = require("react");
     import_mammoth = __toESM(require("mammoth"), 1);
+    init_sanitizeHtml();
   }
 });
 
@@ -761,6 +812,7 @@ function DocxViewer({
   zoomStep,
   enableZoomControls = true,
   enableWheelZoom = true,
+  enablePinchZoom = true,
   enableFullscreen = true,
   enableDownload = true,
   onDownload,
@@ -775,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;
@@ -882,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,
@@ -896,18 +951,32 @@ function XlsxViewer({
     zoomStep,
     enablePan: false,
     enableDragScroll: true,
-    enableWheelZoom
+    enableWheelZoom,
+    enablePinchZoom
   });
   const { workbook, error, loading } = useXlsxWorkbook(uri);
   const [activeSheet, setActiveSheet] = (0, import_react10.useState)(0);
   const handleDownload = enableDownload ? onDownload ?? (() => defaultDownload4(uri, fileName)) : void 0;
-  const tableHtml = (0, import_react10.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,
@@ -941,6 +1010,13 @@ 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 } })
         ] })
       ]
@@ -954,6 +1030,7 @@ var init_XlsxViewer = __esm({
     import_react10 = require("react");
     XLSX2 = __toESM(require("xlsx"), 1);
     init_ViewerShell();
+    init_sanitizeHtml();
     init_useZoomPan();
     init_useXlsxWorkbook();
     import_jsx_runtime8 = require("react/jsx-runtime");
@@ -1003,6 +1080,7 @@ function ImageViewer({
   zoomStep,
   enableZoomControls = true,
   enableWheelZoom = true,
+  enablePinchZoom = true,
   enablePan = true,
   enableFullscreen = true,
   enableDownload = true,
@@ -1012,7 +1090,7 @@ 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;