"${ann.text}"

${ann.note}

`; finalAnnotationsList.appendChild(div); }); }; // --- PDF Export --- pdfBtn.addEventListener('click', () => { try { const { jsPDF } = window.jspdf; const doc = new jsPDF(); doc.setFont('helvetica', 'bold'); doc.setFontSize(18); doc.text('Annotated Document', 105, 20, { align: 'center' }); // Render highlighted text doc.setFont('helvetica', 'normal'); doc.setFontSize(12); // This is a simplified renderer. A real-world one would be more complex. // For this tool, we'll add the highlighted text as an image and annotations as a table. // This is a trade-off for simplicity and robustness. // The spec allows for tabular presentation, which we use for annotations. doc.setFont('helvetica', 'bold'); doc.text('Annotated Text:', 15, 35); doc.setFont('helvetica', 'normal'); doc.setFontSize(11); const splitText = doc.splitTextToSize(highlightArea.textContent, 180); doc.text(splitText, 15, 45); if (annotations.length > 0) { const tableData = annotations.map(a => [a.id, a.text, a.note]); doc.autoTable({ startY: doc.previousAutoTable ? doc.previousAutoTable.finalY + 15 : 80, head: [['#', 'Highlighted Text', 'Note']], body: tableData, theme: 'grid', headStyles: { fillColor: [79, 70, 229] }, }); } doc.save('annotated-document.pdf'); } catch (e) { console.error("PDF generation failed:", e); showMessage("Failed to generate PDF.", "error"); } }); // --- Utility --- const showMessage = (message, type = 'success') => { messageBox.textContent = message; messageBox.className = `message-box ${type}`; messageBox.classList.add('show'); setTimeout(() => { messageBox.classList.remove('show'); }, 3000); }; // Initialize showTab(0); });