Native text file viewer

app/api/views/route.ts

@@ -640,6 +640,7 @@ export async function POST(request: NextRequest) {
         if (
           documentVersion.type === "pdf" ||
           documentVersion.type === "image" ||
+          documentVersion.type === "text" ||
           documentVersion.type === "video"
         ) {
           documentVersion.file = await getFile({
@@ -719,6 +720,7 @@ export async function POST(request: NextRequest) {
           (documentVersion &&
             (documentVersion.type === "pdf" ||
               documentVersion.type === "image" ||
+              documentVersion.type === "text" ||
               documentVersion.type === "zip" ||
               documentVersion.type === "video" ||
               documentVersion.type === "link")) ||

components/documents/preview-viewers/preview-text-viewer.tsx

@@ -0,0 +1,201 @@
+import { useCallback, useEffect, useRef, useState } from "react";
+
+import { ChevronLeftIcon, ChevronRightIcon } from "lucide-react";
+
+import { DocumentPreviewData } from "@/lib/types/document-preview";
+import { paginateText, TEXT_PAGE_DEFAULTS } from "@/lib/utils/text-pagination";
+
+import { Button } from "@/components/ui/button";
+
+const CANVAS_WIDTH = 816;
+const CANVAS_HEIGHT = 1056;
+const CANVAS_PADDING = 48;
+const FONT_SIZE = 14;
+const LINE_HEIGHT = Math.floor(
+  (CANVAS_HEIGHT - CANVAS_PADDING * 2) / TEXT_PAGE_DEFAULTS.linesPerPage,
+);
+const FONT_FAMILY = '"Courier New", Courier, monospace';
+
+function renderPageToCanvas(
+  canvas: HTMLCanvasElement,
+  lines: string[],
+  dpr: number,
+) {
+  const ctx = canvas.getContext("2d");
+  if (!ctx) return;
+
+  canvas.width = CANVAS_WIDTH * dpr;
+  canvas.height = CANVAS_HEIGHT * dpr;
+  canvas.style.width = `${CANVAS_WIDTH}px`;
+  canvas.style.height = `${CANVAS_HEIGHT}px`;
+  ctx.scale(dpr, dpr);
+
+  ctx.fillStyle = "#ffffff";
+  ctx.fillRect(0, 0, CANVAS_WIDTH, CANVAS_HEIGHT);
+
+  ctx.font = `${FONT_SIZE}px ${FONT_FAMILY}`;
+  ctx.fillStyle = "#1a1a1a";
+  ctx.textBaseline = "top";
+
+  for (let i = 0; i < lines.length; i++) {
+    ctx.fillText(lines[i], CANVAS_PADDING, CANVAS_PADDING + i * LINE_HEIGHT);
+  }
+}
+
+interface PreviewTextViewerProps {
+  documentData: DocumentPreviewData;
+  onClose: () => void;
+}
+
+export function PreviewTextViewer({
+  documentData,
+  onClose,
+}: PreviewTextViewerProps) {
+  const [currentPage, setCurrentPage] = useState(1);
+  const [pages, setPages] = useState<string[][] | null>(null);
+  const [loading, setLoading] = useState(true);
+  const [error, setError] = useState<string | null>(null);
+  const canvasRef = useRef<HTMLCanvasElement>(null);
+
+  const { file, documentName } = documentData;
+
+  const numPages = pages?.length ?? 0;
+
+  useEffect(() => {
+    if (!file) return;
+    let cancelled = false;
+    async function fetchText() {
+      try {
+        setLoading(true);
+        const response = await fetch(file!);
+        if (!response.ok) throw new Error("Failed to load text file");
+        const text = await response.text();
+        if (cancelled) return;
+        setPages(paginateText(text));
+      } catch (err) {
+        if (!cancelled) {
+          setError(err instanceof Error ? err.message : "Failed to load file");
+        }
+      } finally {
+        if (!cancelled) setLoading(false);
+      }
+    }
+    fetchText();
+    return () => {
+      cancelled = true;
+    };
+  }, [file]);
+
+  useEffect(() => {
+    if (!pages || !canvasRef.current) return;
+    const currentPageLines = pages[currentPage - 1];
+    if (!currentPageLines) return;
+    const dpr = window.devicePixelRatio || 1;
+    renderPageToCanvas(canvasRef.current, currentPageLines, dpr);
+  }, [pages, currentPage]);
+
+  const goToNextPage = useCallback(() => {
+    if (currentPage < numPages) {
+      setCurrentPage(currentPage + 1);
+    }
+  }, [currentPage, numPages]);
+
+  const goToPreviousPage = useCallback(() => {
+    if (currentPage > 1) {
+      setCurrentPage(currentPage - 1);
+    }
+  }, [currentPage]);
+
+  useEffect(() => {
+    const handleKeyDown = (e: KeyboardEvent) => {
+      switch (e.key) {
+        case "ArrowLeft":
+          goToPreviousPage();
+          break;
+        case "ArrowRight":
+          goToNextPage();
+          break;
+        case "Escape":
+          onClose();
+          break;
+      }
+    };
+
+    document.addEventListener("keydown", handleKeyDown);
+    return () => document.removeEventListener("keydown", handleKeyDown);
+  }, [goToPreviousPage, goToNextPage, onClose]);
+
+  if (!file) {
+    return (
+      <div className="flex h-full w-full items-center justify-center">
+        <p className="text-gray-400">Text file not available</p>
+      </div>
+    );
+  }
+
+  if (loading) {
+    return (
+      <div className="flex h-full w-full items-center justify-center">
+        <div className="h-8 w-8 animate-spin rounded-full border-2 border-white border-t-transparent" />
+      </div>
+    );
+  }
+
+  if (error || !pages) {
+    return (
+      <div className="flex h-full w-full items-center justify-center">
+        <p className="text-gray-400">{error ?? "Failed to load file"}</p>
+      </div>
+    );
+  }
+
+  return (
+    <div className="relative h-full w-full select-none overflow-hidden">
+      {/* Document Title & Page Counter */}
+      <div className="absolute left-1/2 top-4 z-50 -translate-x-1/2">
+        <div className="rounded-lg bg-black/20 px-3 py-2 text-white">
+          <span className="text-sm font-medium">
+            {documentName} - Page {currentPage} of {numPages}
+          </span>
+        </div>
+      </div>
+
+      {/* Canvas Content */}
+      <div className="flex h-full w-full items-center justify-center p-4">
+        <div className="relative max-h-full max-w-full">
+          <canvas
+            ref={canvasRef}
+            className="max-h-[calc(100vh-120px)] max-w-full rounded shadow-lg"
+            style={{ objectFit: "contain" }}
+            onContextMenu={(e) => e.preventDefault()}
+          />
+        </div>
+      </div>
+
+      {/* Navigation */}
+      {numPages > 1 && (
+        <>
+          <Button
+            variant="ghost"
+            size="icon"
+            className="absolute left-2 top-1/2 z-50 h-10 w-10 -translate-y-1/2 rounded-full bg-black/20 text-white hover:bg-black/40 hover:text-white disabled:opacity-30"
+            onClick={goToPreviousPage}
+            disabled={currentPage <= 1}
+          >
+            <ChevronLeftIcon className="h-6 w-6" />
+          </Button>
+
+          <Button
+            variant="ghost"
+            size="icon"
+            className="absolute right-2 top-1/2 z-50 h-10 w-10 -translate-y-1/2 rounded-full bg-black/20 text-white hover:bg-black/40 hover:text-white disabled:opacity-30"
+            onClick={goToNextPage}
+            disabled={currentPage >= numPages}
+          >
+            <ChevronRightIcon className="h-6 w-6" />
+          </Button>
+        </>
+      )}
+    </div>
+  );
+}

components/documents/preview-viewers/preview-viewer.tsx

@@ -2,6 +2,7 @@ import { DocumentPreviewData } from "@/lib/types/document-preview";
 
 import { PreviewImageViewer } from "./preview-image-viewer";
 import { PreviewPagesViewer } from "./preview-pages-viewer";
+import { PreviewTextViewer } from "./preview-text-viewer";
 
 interface PreviewViewerProps {
   documentData: DocumentPreviewData;
@@ -24,6 +25,13 @@ export function PreviewViewer({ documentData, onClose }: PreviewViewerProps) {
       );
     }
 
+    // Plain text files
+    if (documentData.fileType === "text" && documentData.file) {
+      return (
+        <PreviewTextViewer documentData={documentData} onClose={onClose} />
+      );
+    }
+
     // Excel/CSV files
     if (documentData.fileType === "sheet" && documentData.sheetData) {
       return (

components/view/view-data.tsx

@@ -34,6 +34,7 @@ import DownloadOnlyViewer from "./viewer/download-only-viewer";
 import ImageViewer from "./viewer/image-viewer";
 import PagesHorizontalViewer from "./viewer/pages-horizontal-viewer";
 import PagesVerticalViewer from "./viewer/pages-vertical-viewer";
+import TextViewer from "./viewer/text-viewer";
 import VideoViewer from "./viewer/video-viewer";
 
 const ExcelViewer = dynamic(
@@ -183,6 +184,22 @@ export default function ViewData({
             linkName={link.name ?? `Link #${link.id.slice(-5)}`}
             navData={navData}
           />
+        ) : viewData.fileType === "text" ? (
+          <TextViewer
+            file={viewData.file!}
+            screenshotProtectionEnabled={link.enableScreenshotProtection!}
+            versionNumber={document.versions[0].versionNumber}
+            showPoweredByBanner={showPoweredByBanner}
+            viewerEmail={viewerEmail}
+            watermarkConfig={
+              link.enableWatermark
+                ? (link.watermarkConfig as WatermarkConfig)
+                : null
+            }
+            ipAddress={viewData.ipAddress}
+            linkName={link.name ?? `Link #${link.id.slice(-5)}`}
+            navData={navData}
+          />
         ) : viewData.pages && !document.versions[0].isVertical ? (
           <PagesHorizontalViewer
             pages={viewData.pages}