diff --git a/src/components/NoteEditor.tsx b/src/components/NoteEditor.tsx index b3c560c..bd4d010 100644 --- a/src/components/NoteEditor.tsx +++ b/src/components/NoteEditor.tsx @@ -27,6 +27,7 @@ export function NoteEditor({ note, onUpdateNote, fontSize, onUnsavedChanges }: N const [isSaving, setIsSaving] = useState(false); const [hasUnsavedChanges, setHasUnsavedChanges] = useState(false); const [titleManuallyEdited, setTitleManuallyEdited] = useState(false); + const [isExportingPDF, setIsExportingPDF] = useState(false); const previousNoteIdRef = useRef(null); // Notify parent component when unsaved changes state changes @@ -141,10 +142,15 @@ export function NoteEditor({ note, onUpdateNote, fontSize, onUnsavedChanges }: N const handleExportPDF = async () => { if (!note || !editor) return; + setIsExportingPDF(true); + try { // Get the editor content element const editorElement = document.querySelector('.ProseMirror'); - if (!editorElement) return; + if (!editorElement) { + setIsExportingPDF(false); + return; + } // Create a temporary container with better styling for PDF const container = document.createElement('div'); @@ -167,6 +173,7 @@ export function NoteEditor({ note, onUpdateNote, fontSize, onUnsavedChanges }: N const contentClone = editorElement.cloneNode(true) as HTMLElement; contentClone.style.fontSize = '12px'; contentClone.style.lineHeight = '1.6'; + contentClone.style.color = '#000000'; container.appendChild(contentClone); document.body.appendChild(container); @@ -181,25 +188,46 @@ export function NoteEditor({ note, onUpdateNote, fontSize, onUnsavedChanges }: N // Remove temporary container document.body.removeChild(container); - // Create PDF - const imgData = canvas.toDataURL('image/png'); + // Create PDF with multi-page support const pdf = new jsPDF({ orientation: 'portrait', unit: 'mm', format: 'a4', }); - const imgWidth = 210; // A4 width in mm + const pageWidth = 210; // A4 width in mm + const pageHeight = 297; // A4 height in mm + const imgWidth = pageWidth; const imgHeight = (canvas.height * imgWidth) / canvas.width; - pdf.addImage(imgData, 'PNG', 0, 0, imgWidth, imgHeight); + let heightLeft = imgHeight; + let position = 0; + + // Add first page + pdf.addImage(canvas.toDataURL('image/png'), 'PNG', 0, position, imgWidth, imgHeight); + heightLeft -= pageHeight; + + // Add additional pages if needed + while (heightLeft > 0) { + position = heightLeft - imgHeight; + pdf.addPage(); + pdf.addImage(canvas.toDataURL('image/png'), 'PNG', 0, position, imgWidth, imgHeight); + heightLeft -= pageHeight; + } // Save the PDF const fileName = `${localTitle || 'note'}.pdf`; pdf.save(fileName); + + // Show success message + setTimeout(() => { + alert(`PDF exported successfully!\n\nFile: ${fileName}\nLocation: Downloads folder`); + setIsExportingPDF(false); + }, 500); } catch (error) { console.error('PDF export failed:', error); alert('Failed to export PDF. Please try again.'); + setIsExportingPDF(false); } }; @@ -285,12 +313,26 @@ export function NoteEditor({ note, onUpdateNote, fontSize, onUnsavedChanges }: N