Feat: FAQ export to PDF (#178)

* WIP on pdf

* wip

* Correct TOC and no empty pages

* Fix formatting of text in paragraph

* Fix heading style

* Fix TOC placement

* TOc minor fix

* Add image support

* Handle md list

* Finish up

* Increase heading size

* Fix build?

Author: HugoGresse

bun.lockb

@@ -40,7 +40,9 @@
         "firebase": "^10.5.2",
         "flag-icons": "^7.3.2",
         "image-blob-reduce": "^4.1.0",
+        "jspdf": "^3.0.1",
         "luxon": "^3.4.3",
+        "marked": "^15.0.8",
         "openai": "^4.24.7",
         "p-limit": "^5.0.0",
         "pica": "^9.0.1",

package.json

@@ -3,7 +3,7 @@ import { Event, Faq, FaqCategory } from '../../../types'
 import { useFaq } from '../../../services/hooks/useFaq'
 import { FirestoreQueryLoaderAndErrorDisplay } from '../../../components/FirestoreQueryLoaderAndErrorDisplay'
 import { Box, Button, IconButton, Typography } from '@mui/material'
-import { ExpandLessSharp, ExpandMore } from '@mui/icons-material'
+import { ExpandLessSharp, ExpandMore, PictureAsPdf } from '@mui/icons-material'
 import { LoadingButton } from '@mui/lab'
 import {
     useFirestoreCollectionMutation,
@@ -13,6 +13,7 @@ import { collections } from '../../../services/firebase'
 import { collection } from '@firebase/firestore'
 import { generateFirestoreId } from '../../../utils/generateFirestoreId'
 import { FaqCategoryItemContent } from './FaqCategoryItemContent'
+import { generateFaqPdf } from '../../../utils/faqPdfGenerator'
 
 export type FaqCategoryProps = {
     event: Event
@@ -30,6 +31,7 @@ export const FaqCategoryItem = (props: FaqCategoryProps) => {
     const deletionMutation = useFirestoreDocumentDeletion(
         collection(collections.faq(props.event.id), categoryId, 'items')
     )
+    const [isExporting, setIsExporting] = useState(false)
 
     useEffect(() => {
         if (queryResult.loaded) {
@@ -73,20 +75,38 @@ export const FaqCategoryItem = (props: FaqCategoryProps) => {
         setDidChange(false)
     }
 
+    const exportToPdf = async () => {
+        try {
+            setIsExporting(true)
+            await generateFaqPdf(props.event, props.category, data)
+        } catch (error) {
+            console.error('Failed to generate PDF:', error)
+        } finally {
+            setIsExporting(false)
+        }
+    }
+
     return (
         <Box width="100%" mb={4}>
-            <Box display="flex">
-                <Typography variant="h4" justifyContent="space-between" alignItems="center" marginBottom={1}>
+            <Box display="flex" justifyContent="space-between" alignItems="center">
+                <Typography variant="h4" marginBottom={1}>
                     {props.category.name} ({data.length})
+                </Typography>
+                <Box>
                     <IconButton onClick={() => setOpen(!isOpen)}>
                         {isOpen ? <ExpandLessSharp /> : <ExpandMore />}
                     </IconButton>
+                    {isOpen && (
+                        <IconButton onClick={exportToPdf} title="Export to PDF" disabled={isExporting}>
+                            <PictureAsPdf />
+                        </IconButton>
+                    )}
                     {didChange && (
                         <LoadingButton variant="contained" onClick={save} loading={mutation.isLoading}>
                             Save
                         </LoadingButton>
                     )}
-                </Typography>
+                </Box>
             </Box>
             {isOpen ? (
                 <>

src/events/page/faq/FaqCategoryItem.tsx

@@ -0,0 +1,27 @@
+declare module 'html2pdf.js' {
+    interface Html2PdfOptions {
+        margin?: number
+        filename?: string
+        image?: {
+            type?: string
+            quality?: number
+        }
+        html2canvas?: {
+            scale?: number
+        }
+        jsPDF?: {
+            unit?: string
+            format?: string
+            orientation?: string
+        }
+    }
+
+    interface Html2PdfInstance {
+        set(options: Html2PdfOptions): Html2PdfInstance
+        from(element: HTMLElement): Html2PdfInstance
+        save(): void
+    }
+
+    const html2pdf: () => Html2PdfInstance
+    export default html2pdf
+}

src/types/html2pdf.d.ts

@@ -0,0 +1,42 @@
+import { Event, Faq, FaqCategory } from '../types'
+import { markdownToPdf } from './markdownToPdf/markdownToPdf'
+
+type FaqWithoutTimestamps = Omit<Faq, 'updatedAt' | 'createdAt'>
+
+export const generateFaqPdf = async (event: Event, category: FaqCategory, faqs: FaqWithoutTimestamps[]) => {
+    // Generate markdown content
+    const markdownContent = generateMarkdownContent(event, category, faqs)
+
+    // Convert markdown to PDF
+    const pdfBlob = await markdownToPdf(markdownContent)
+
+    // Create download link and trigger download
+    const url = URL.createObjectURL(pdfBlob)
+    const a = document.createElement('a')
+    a.href = url
+    a.download = `${event.name}-${category.name}-FAQ.pdf`
+    document.body.appendChild(a)
+    a.click()
+    document.body.removeChild(a)
+    URL.revokeObjectURL(url)
+}
+
+const generateMarkdownContent = (event: Event, category: FaqCategory, faqs: FaqWithoutTimestamps[]): string => {
+    // Generate main content
+    const content = faqs
+        .map(
+            (faq, index) => `
+## ${faq.question}
+
+${faq.answer}
+`
+        )
+        .join('\n\n')
+
+    return `# ${event.name} - ${category.name} FAQ
+
+[TOC]
+
+${content}
+`
+}

src/utils/faqPdfGenerator.ts

@@ -0,0 +1,50 @@
+import { jsPDF } from 'jspdf'
+import type { Token } from 'marked'
+import { LinkAnnotation, Margins } from '../types'
+import { checkAddPage } from '../pageUtils'
+
+export const handleBlockquote = (
+    doc: jsPDF,
+    token: Token & { type: 'blockquote'; text: string },
+    margins: Margins,
+    currentY: number,
+    currentPage: number,
+    maxLineWidth: number
+): { newY: number; newPage: number; linkAnnotations: LinkAnnotation[] } => {
+    const lineHeight = 5
+    let pageCheck = checkAddPage(doc, currentY, lineHeight + 4, margins, currentPage)
+
+    doc.setDrawColor(200)
+    doc.setLineWidth(0.5)
+    doc.line(
+        margins.left,
+        pageCheck.newY - lineHeight / 2,
+        margins.left,
+        pageCheck.newY + lineHeight * doc.splitTextToSize(token.text, maxLineWidth - 5).length
+    )
+
+    doc.setFont('helvetica', 'italic')
+    doc.setFontSize(10)
+    const quoteLines = doc.splitTextToSize(token.text, maxLineWidth - 5)
+
+    let currentLineY = pageCheck.newY
+    let currentPageNum = pageCheck.newPage
+    const linkAnnotations: LinkAnnotation[] = []
+
+    quoteLines.forEach((line: string) => {
+        pageCheck = checkAddPage(doc, currentLineY, lineHeight, margins, currentPageNum)
+        currentLineY = pageCheck.newY
+        currentPageNum = pageCheck.newPage
+
+        doc.text(line, margins.left + 5, currentLineY)
+        currentLineY += lineHeight
+    })
+
+    doc.setFont('helvetica', 'normal')
+
+    return {
+        newY: currentLineY + 4,
+        newPage: currentPageNum,
+        linkAnnotations,
+    }
+}

src/utils/markdownToPdf/handlers/blockquoteHandler.ts

@@ -0,0 +1,48 @@
+import { jsPDF } from 'jspdf'
+import type { Token } from 'marked'
+import { LinkAnnotation, Margins } from '../types'
+import { checkAddPage } from '../pageUtils'
+
+export const handleCode = (
+    doc: jsPDF,
+    token: Token & { type: 'code'; text: string },
+    margins: Margins,
+    currentY: number,
+    currentPage: number,
+    maxLineWidth: number
+): { newY: number; newPage: number; linkAnnotations: LinkAnnotation[] } => {
+    const lineHeight = 4.5
+    const codeLines = token.text.split('\n')
+    const codeBlockHeight = codeLines.length * lineHeight + 2
+
+    let pageCheck = checkAddPage(doc, currentY, codeBlockHeight + 4, margins, currentPage)
+
+    doc.setFont('courier', 'normal')
+    doc.setFontSize(9)
+    doc.setFillColor(240, 240, 240)
+
+    doc.rect(margins.left, pageCheck.newY - lineHeight + 1, maxLineWidth, codeBlockHeight, 'F')
+
+    let currentLineY = pageCheck.newY
+    let currentPageNum = pageCheck.newPage
+    const linkAnnotations: LinkAnnotation[] = []
+
+    codeLines.forEach((line: string) => {
+        pageCheck = checkAddPage(doc, currentLineY, lineHeight, margins, currentPageNum)
+        currentLineY = pageCheck.newY
+        currentPageNum = pageCheck.newPage
+
+        const displayLine = doc.splitTextToSize(line, maxLineWidth - 4)[0] || ''
+        doc.text(displayLine, margins.left + 2, currentLineY)
+        currentLineY += lineHeight
+    })
+
+    doc.setFont('helvetica', 'normal')
+    doc.setFontSize(10)
+
+    return {
+        newY: currentLineY + 4,
+        newPage: currentPageNum,
+        linkAnnotations,
+    }
+}

src/utils/markdownToPdf/handlers/codeHandler.ts

@@ -0,0 +1,49 @@
+import { jsPDF } from 'jspdf'
+import type { Token } from 'marked'
+import { TocEntry, DestinationAnnotation, Margins } from '../types'
+import { checkAddPage } from '../pageUtils'
+import { parseInlineContent } from './inlineContentParser'
+
+export const handleHeading = (
+    doc: jsPDF,
+    token: Token & { type: 'heading'; depth: number; text: string; tokens?: Token[] },
+    margins: Margins,
+    currentY: number,
+    currentPage: number,
+    tocEntries: TocEntry[]
+): { newY: number; newPage: number; destinationAnnotation: DestinationAnnotation } => {
+    const fontSize = Math.max(12, 34 - token.depth * 6)
+    // Estimate line height based on font size for page check, actual height might vary with wrapping
+    const estimatedLineHeight = fontSize / 2
+    const pageCheck = checkAddPage(doc, currentY, estimatedLineHeight + 2, margins, currentPage)
+    let yPos = pageCheck.newY
+    const newPage = pageCheck.newPage
+
+    doc.setFont('helvetica', 'bold') // Default heading style
+    doc.setFontSize(fontSize)
+    // Use the plain text for TOC
+    tocEntries.push({ text: token.text, level: token.depth, page: newPage, y: yPos })
+
+    // Use the inline content parser to render styled text
+    const finalY = parseInlineContent(
+        doc,
+        token.tokens || [{ type: 'text', text: token.text, raw: token.text }],
+        margins.left,
+        yPos,
+        margins
+    )
+
+    doc.setFont('helvetica', 'normal') // Reset font style after heading
+    doc.setFontSize(10)
+
+    return {
+        newY: finalY + 7, // Add 7 points padding after the heading baseline
+        newPage: newPage,
+        destinationAnnotation: {
+            page: newPage,
+            y: yPos, // Use the initial y position for the link target
+            headingText: token.text,
+            headingLevel: token.depth,
+        },
+    }
+}

src/utils/markdownToPdf/handlers/headingHandler.ts

@@ -0,0 +1,23 @@
+import { jsPDF } from 'jspdf'
+import { LinkAnnotation, Margins } from '../types'
+import { checkAddPage } from '../pageUtils'
+
+export const handleHr = (
+    doc: jsPDF,
+    margins: Margins,
+    currentY: number,
+    currentPage: number,
+    maxLineWidth: number
+): { newY: number; newPage: number; linkAnnotations: LinkAnnotation[] } => {
+    const lineHeight = 5
+    const pageCheck = checkAddPage(doc, currentY, lineHeight, margins, currentPage)
+
+    doc.setLineWidth(0.5)
+    doc.line(margins.left, pageCheck.newY, margins.left + maxLineWidth, pageCheck.newY)
+
+    return {
+        newY: pageCheck.newY + lineHeight,
+        newPage: pageCheck.newPage,
+        linkAnnotations: [],
+    }
+}