Fix PDF once and for all

web/package.json

@@ -41,7 +41,8 @@
     "react": "18.3.1",
     "react-colorful": "^5.6.1",
     "react-dom": "18.3.1",
-    "react-html-parser": "^2.0.2"
+    "react-html-parser": "^2.0.2",
+    "react-pdf": "^9.2.1"
   },
   "devDependencies": {
     "@redwoodjs/vite": "8.4.0",

web/src/components/PDF/PDF.tsx

@@ -1,7 +1,14 @@
+import { mdiOpenInNew } from '@mdi/js';
+import Icon from '@mdi/react';
 import { useState } from 'react'
+import { Document, Page as PdfPage, pdfjs } from "react-pdf";
+import "react-pdf/dist/Page/AnnotationLayer.css";
+import "react-pdf/dist/Page/TextLayer.css";
 
-import { mdiAlertOutline } from '@mdi/js'
-import Icon from '@mdi/react'
+pdfjs.GlobalWorkerOptions.workerSrc = new URL(
+  "pdfjs-dist/build/pdf.worker.min.mjs",
+  import.meta.url
+).toString();
 
 interface PDFProps {
   url: string
@@ -9,29 +16,33 @@ interface PDFProps {
 }
 
 const PDF = ({ url, form = false }: PDFProps) => {
-  const [error, setError] = useState<boolean>(false)
+  const [numPages, setNumPages] = useState<number>(0);
+  function onLoadSuccess({ numPages }: { numPages: number }) {
+    setNumPages(numPages);
+  }
 
-  return error ? (
-    <div role="alert" className="alert alert-warning">
-      <Icon path={mdiAlertOutline} className="size-7" />
-      <span>
-        Could not load PDF, this is common in in-app browsers, try opening this
-        page in a regular browser
-      </span>
-    </div>
-  ) : (
-    <iframe
-      src={url}
-      title="PDF"
-      content="application/pdf"
+  return (
+    <div
+      className="overflow-y-auto flex justify-center"
       style={{
         width: 'calc(100vw - 1rem)',
         height: `calc(100vh - ${form ? '8.5rem' : '6rem'})`,
       }}
-      className="rounded-xl"
-      onError={() => setError(true)}
-      onLoad={() => setError(false)}
-    />
+    >
+      <a
+        href={url}
+        target="_blank"
+        rel="noopener noreferrer"
+        className="fixed top-20 left-0 z-10 m-2 p-2 rounded-xl btn btn-square btn-ghost shadow-lg"
+      >
+        <Icon path={mdiOpenInNew} size={1} className="text-gray-600" />
+      </a>
+      <Document file={url} onLoadSuccess={onLoadSuccess}>
+        {Array.from({ length: numPages }, (_, i) => (
+          <PdfPage key={i} pageNumber={i + 1} width={800} />
+        ))}
+      </Document>
+    </div>
   )
 }