feat: add PDF export with annotations and clean up unused props

Author: henrypzheng

package-lock.json

@@ -18,6 +18,7 @@
   "dependencies": {
     "@supabase/supabase-js": "^2.74.0",
     "@tailwindcss/postcss": "^4.1.16",
+    "jspdf": "^3.0.4",
     "lucide-react": "^0.552.0",
     "next": "15.5.3",
     "pdfjs-dist": "^5.4.296",

package.json

@@ -90,7 +90,6 @@ describe('AnnotationSidebar', () => {
   ];
 
   const defaultProps = {
-    documentId: 'doc-1',
     annotations: [],
     selectedAnnotationId: null,
     canCreate: true,

src/components/documents/AnnotationSidebar.test.tsx

@@ -5,7 +5,6 @@ import { AnnotationWithUser, AnnotationThread } from '@/lib/types/annotation';
 import CommentThread from './CommentThread';
 
 interface AnnotationSidebarProps {
-  documentId: string;
   annotations: AnnotationWithUser[];
   selectedAnnotationId: string | null;
   canCreate: boolean;
@@ -16,7 +15,6 @@ interface AnnotationSidebarProps {
 }
 
 export default function AnnotationSidebar({
-  documentId,
   annotations,
   selectedAnnotationId,
   canCreate,
@@ -85,7 +83,6 @@ export default function AnnotationSidebar({
                 key={thread.highlight.id}
                 highlight={thread.highlight}
                 comments={thread.comments}
-                documentId={documentId}
                 isSelected={selectedAnnotationId === thread.highlight.id}
                 canCreate={canCreate}
                 canDelete={canDelete}

src/components/documents/AnnotationSidebar.tsx

@@ -46,7 +46,6 @@ describe('CommentThread', () => {
   const defaultProps = {
     highlight: mockHighlight,
     comments: [],
-    documentId: 'doc-1',
     isSelected: false,
     canCreate: true,
     canDelete: jest.fn(() => true),

src/components/documents/CommentThread.test.tsx

@@ -6,7 +6,6 @@ import { AnnotationWithUser } from '@/lib/types/annotation';
 interface CommentThreadProps {
   highlight: AnnotationWithUser;
   comments: AnnotationWithUser[];
-  documentId: string;
   isSelected: boolean;
   canCreate: boolean;
   canDelete: (annotation: AnnotationWithUser) => boolean;
@@ -18,7 +17,6 @@ interface CommentThreadProps {
 export default function CommentThread({
   highlight,
   comments,
-  documentId,
   isSelected,
   canCreate,
   canDelete,

src/components/documents/CommentThread.tsx

@@ -8,12 +8,6 @@ import { supabase } from '@/lib/supabaseClient';
 import type { Document } from '@/lib/types/document';
 import type { AnnotationWithUser } from '@/lib/types/annotation';
 
-type Selection = {
-  removeAllRanges: () => void;
-  rangeCount: number;
-  toString: () => string;
-  getRangeAt: (index: number) => Range;
-};
 
 jest.mock('@/services/documentService');
 jest.mock('@/services/annotationService');

src/components/documents/DocumentViewer.test.tsx

@@ -12,6 +12,7 @@ import { supabase } from '@/lib/supabaseClient';
 import HighlightedText from './HighlightedText';
 import AnnotationSidebar from './AnnotationSidebar';
 import AnnotationToolbar from './AnnotationToolbar';
+import { generateAnnotatedPDF } from '@/services/pdfExportService';
 interface DocumentViewerProps {
   documentId: string;
 }
@@ -229,6 +230,17 @@ export default function DocumentViewer({ documentId }: DocumentViewerProps) {
     }
   };
 
+  const handleExportPDF = async () => {
+    if (!document) {
+      return;
+    }
+
+    try {
+      await generateAnnotatedPDF(document, annotations);
+    } catch (err) {
+      console.error('Failed to export PDF:', err);
+    }
+  };
 
   if (loading) {
     return (
@@ -303,6 +315,16 @@ export default function DocumentViewer({ documentId }: DocumentViewerProps) {
                   <span>{formatDate(document.created_at)}</span>
                 </div>
               </div>
+              <button
+                onClick={handleExportPDF}
+                disabled={!document.raw_text}
+                className="px-4 py-2 bg-blue-600 text-white rounded-md hover:bg-blue-700 disabled:bg-gray-300 disabled:cursor-not-allowed flex items-center space-x-2 transition-colors"
+              >
+                <svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                  <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M12 10v6m0 0l-3-3m3 3l3-3m2 8H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z" />
+                </svg>
+                <span>Export PDF</span>
+              </button>
             </div>
           </div>
         </div>
@@ -382,7 +404,6 @@ export default function DocumentViewer({ documentId }: DocumentViewerProps) {
 
       {permissions.canView && (
         <AnnotationSidebar
-          documentId={documentId}
           annotations={annotations}
           selectedAnnotationId={selectedAnnotationId}
           canCreate={permissions.canCreate}

src/components/documents/DocumentViewer.tsx

@@ -0,0 +1,64 @@
+import jsPDF from 'jspdf';
+
+export function wrapText(pdf: jsPDF, text: string, maxWidth: number): string[] {
+  const lines: string[] = [];
+  const words = text.split(' ');
+  let selectedLine = '';
+
+  for (const word of words) {
+    // try adding this word to the current line
+    let proposedLine;
+    if (selectedLine) {
+      proposedLine = `${selectedLine} ${word}`;
+    } else {
+      proposedLine = word;
+    }
+
+    const textWidth = pdf.getTextWidth(proposedLine);
+
+    // if it doesn't fit start new line
+    if (textWidth > maxWidth && selectedLine) {
+      lines.push(selectedLine);
+      selectedLine = word;
+    } else {
+      selectedLine = proposedLine;
+    }
+  }
+
+  if (selectedLine) {
+    lines.push(selectedLine);
+  }
+
+  return lines;
+}
+
+export function addPageIfNeeded(
+  pdf: jsPDF,
+  currentY: number,
+  requiredSpace: number,
+  margin: number,
+  pageHeight: number
+): number {
+  if (currentY + requiredSpace > pageHeight - margin) {
+    pdf.addPage();
+    return margin;
+  }
+  return currentY;
+}
+
+export function cleanFilename(title: string | null): string {
+  if (!title) {
+    return 'Document_annotated.pdf';
+  }
+
+  const cleaned = title
+    .replace(/[^a-zA-Z0-9_\-\s]/g, '')
+    .replace(/\s+/g, '_')
+    .substring(0, 100);
+
+  if (cleaned) {
+    return `${cleaned}_annotated.pdf`;
+  } else {
+    return 'Document_annotated.pdf';
+  }
+}