Update PDF.js integration and dependencies (#4360)

Co-authored-by: ConnorYoh <40631091+ConnorYoh@users.noreply.github.com>
Co-authored-by: Reece Browne <74901996+reecebrowne@users.noreply.github.com>

frontend/src/global.d.ts

@@ -17,6 +17,7 @@ declare module '../assets/material-symbols-icons.json' {
   export default value;
 }
 
+declare module 'pdfjs-dist/legacy/build/pdf.mjs'
 // TODO: Add proper EmbedPDF types for local submodule integration
 
 export {};

frontend/src/hooks/usePDFProcessor.ts

@@ -8,31 +8,31 @@ export function usePDFProcessor() {
   const [error, setError] = useState<string | null>(null);
 
   const generatePageThumbnail = useCallback(async (
-    file: File, 
-    pageNumber: number, 
+    file: File,
+    pageNumber: number,
     scale: number = 0.5
   ): Promise<string> => {
     try {
       const arrayBuffer = await file.arrayBuffer();
       const pdf = await pdfWorkerManager.createDocument(arrayBuffer);
       const page = await pdf.getPage(pageNumber);
-      
+
       const viewport = page.getViewport({ scale });
       const canvas = document.createElement('canvas');
       canvas.width = viewport.width;
       canvas.height = viewport.height;
-      
+
       const context = canvas.getContext('2d');
       if (!context) {
         throw new Error('Could not get canvas context');
       }
-      
-      await page.render({ canvasContext: context, viewport }).promise;
+
+      await page.render({ canvasContext: context, viewport, canvas }).promise;
       const thumbnail = canvas.toDataURL();
-      
+
       // Clean up using worker manager
       pdfWorkerManager.destroyDocument(pdf);
-      
+
       return thumbnail;
     } catch (error) {
       console.error('Failed to generate thumbnail:', error);
@@ -42,22 +42,22 @@ export function usePDFProcessor() {
 
   // Internal function to generate thumbnail from already-opened PDF
   const generateThumbnailFromPDF = useCallback(async (
-    pdf: any, 
-    pageNumber: number, 
+    pdf: any,
+    pageNumber: number,
     scale: number = 0.5
   ): Promise<string> => {
     const page = await pdf.getPage(pageNumber);
-    
+
     const viewport = page.getViewport({ scale });
     const canvas = document.createElement('canvas');
     canvas.width = viewport.width;
     canvas.height = viewport.height;
-    
+
     const context = canvas.getContext('2d');
     if (!context) {
       throw new Error('Could not get canvas context');
     }
-    
+
     await page.render({ canvasContext: context, viewport }).promise;
     return canvas.toDataURL();
   }, []);
@@ -65,14 +65,14 @@ export function usePDFProcessor() {
   const processPDFFile = useCallback(async (file: File): Promise<PDFDocument> => {
     setLoading(true);
     setError(null);
-    
+
     try {
       const arrayBuffer = await file.arrayBuffer();
       const pdf = await pdfWorkerManager.createDocument(arrayBuffer);
       const totalPages = pdf.numPages;
-      
+
       const pages: PDFPage[] = [];
-      
+
       // Create pages without thumbnails initially - load them lazily
       for (let i = 1; i <= totalPages; i++) {
         pages.push({
@@ -84,7 +84,7 @@ export function usePDFProcessor() {
           selected: false
         });
       }
-      
+
       // Generate thumbnails for first 10 pages immediately using the same PDF instance
       const priorityPages = Math.min(10, totalPages);
       for (let i = 1; i <= priorityPages; i++) {
@@ -95,10 +95,10 @@ export function usePDFProcessor() {
           console.warn(`Failed to generate thumbnail for page ${i}:`, error);
         }
       }
-      
+
       // Clean up using worker manager
       pdfWorkerManager.destroyDocument(pdf);
-      
+
       const document: PDFDocument = {
         id: `${Date.now()}-${Math.random().toString(36).substr(2, 9)}`,
         name: file.name,
@@ -106,7 +106,7 @@ export function usePDFProcessor() {
         pages,
         totalPages
       };
-      
+
       return document;
     } catch (error) {
       const errorMessage = error instanceof Error ? error.message : 'Failed to process PDF';
@@ -123,4 +123,4 @@ export function usePDFProcessor() {
     loading,
     error
   };
-}
+}

frontend/src/services/pdfProcessingService.ts

@@ -110,7 +110,7 @@ export class PDFProcessingService {
 
       const context = canvas.getContext('2d');
       if (context) {
-        await page.render({ canvasContext: context, viewport }).promise;
+        await page.render({ canvasContext: context, viewport, canvas }).promise;
         const thumbnail = canvas.toDataURL();
 
         pages.push({

frontend/src/services/pdfWorkerManager.ts

@@ -5,9 +5,7 @@
  * and ensuring proper cleanup when operations complete.
  */
 
-import * as pdfjsLib from 'pdfjs-dist';
-import { PDFDocumentProxy } from 'pdfjs-dist/types/src/display/api';
-const { getDocument, GlobalWorkerOptions } = pdfjsLib;
+import { GlobalWorkerOptions, getDocument, PDFDocumentProxy } from 'pdfjs-dist/legacy/build/pdf.mjs';
 
 class PDFWorkerManager {
   private static instance: PDFWorkerManager;
@@ -32,7 +30,10 @@ class PDFWorkerManager {
    */
   private initializeWorker(): void {
     if (!this.isInitialized) {
-      GlobalWorkerOptions.workerSrc = '/pdf.worker.js';
+      GlobalWorkerOptions.workerSrc = new URL(
+        'pdfjs-dist/legacy/build/pdf.worker.min.mjs',
+        import.meta.url
+      ).toString();
       this.isInitialized = true;
     }
   }

frontend/src/utils/thumbnailUtils.ts

@@ -410,7 +410,7 @@ export async function generateThumbnailWithMetadata(file: File): Promise<Thumbna
       throw new Error('Could not get canvas context');
     }
 
-    await page.render({ canvasContext: context, viewport }).promise;
+    await page.render({ canvasContext: context, viewport, canvas }).promise;
     const thumbnail = canvas.toDataURL();
 
     pdfWorkerManager.destroyDocument(pdf);