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/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
   };
-}
+}