diff --git a/components/ComposeEmail.tsx b/components/ComposeEmail.tsx index 447a4fbc..ab5942df 100644 --- a/components/ComposeEmail.tsx +++ b/components/ComposeEmail.tsx @@ -10,7 +10,7 @@ import { decodeComposeContent, encodeComposeContent } from '@/lib/compose-mime-d import { Email } from '@/app/courrier/page'; import mime from 'mime'; import { simpleParser } from 'mailparser'; -import { decodeEmail, cleanHtml } from '@/lib/mail-parser-wrapper'; +import { decodeEmail } from '@/lib/mail-parser-wrapper'; import DOMPurify from 'dompurify'; interface ComposeEmailProps { @@ -156,78 +156,87 @@ export default function ComposeEmail({ } } - // Parse the original email using the API - const response = await fetch('/api/parse-email', { - method: 'POST', - headers: { - 'Content-Type': 'application/json', - }, - body: JSON.stringify({ email: emailToProcess.content }), - }); - - if (!response.ok) { - throw new Error(`Failed to parse email: ${response.status}`); - } - - const data = await response.json(); - console.log('[DEBUG] Parsed email data:', { - hasHtml: !!data.html, - hasText: !!data.text, - from: data.from, - subject: data.subject - }); - - const emailContent = data.html || data.text || ''; - - // Format the reply/forward content - const quotedContent = forwardFrom ? ` -
- ---------- Forwarded message ---------
- From: ${emailToProcess.from}
- Date: ${new Date(emailToProcess.date).toLocaleString()}
- Subject: ${emailToProcess.subject}
- To: ${emailToProcess.to}
- ${emailToProcess.cc ? `Cc: ${emailToProcess.cc}
` : ''} -
-
- ${emailContent} -
- ` : ` -
- On ${new Date(emailToProcess.date).toLocaleString()}, ${emailToProcess.from} wrote: -
-
- ${emailContent} -
- `; - - // Set the content in the compose area with proper structure - const formattedContent = ` -
-

- ${quotedContent} -
- `; - - if (composeBodyRef.current) { - composeBodyRef.current.innerHTML = formattedContent; - - // Place cursor at the beginning before the quoted content - const selection = window.getSelection(); - const range = document.createRange(); - const firstDiv = composeBodyRef.current.querySelector('div[style*="min-height: 20px;"]'); - if (firstDiv) { - range.setStart(firstDiv, 0); - range.collapse(true); - selection?.removeAllRanges(); - selection?.addRange(range); - (firstDiv as HTMLElement).focus(); + // Use the exact same implementation as Panel 3's ReplyContent + try { + const decoded = await decodeEmail(emailToProcess.content); + + let formattedContent = ''; + + if (forwardFrom) { + formattedContent = ` +
+

---------- Forwarded message ---------

+

From: ${decoded.from || ''}

+

Date: ${formatDate(decoded.date)}

+

Subject: ${decoded.subject || ''}

+

To: ${decoded.to || ''}

+
+ ${decoded.html || `
${decoded.text || ''}
`} +
+ `; + } else { + formattedContent = ` +
+

On ${formatDate(decoded.date)}, ${decoded.from || ''} wrote:

+
+ ${decoded.html || `
${decoded.text || ''}
`} +
+
+ `; } - // Update compose state - setComposeBody(formattedContent); - setLocalContent(formattedContent); - console.log('[DEBUG] Successfully set compose content'); + // Set the content in the compose area with proper structure + const wrappedContent = ` +
+

+ ${formattedContent} +
+ `; + + if (composeBodyRef.current) { + composeBodyRef.current.innerHTML = wrappedContent; + + // Place cursor at the beginning before the quoted content + const selection = window.getSelection(); + const range = document.createRange(); + const firstDiv = composeBodyRef.current.querySelector('div[style*="min-height: 20px;"]'); + if (firstDiv) { + range.setStart(firstDiv, 0); + range.collapse(true); + selection?.removeAllRanges(); + selection?.addRange(range); + (firstDiv as HTMLElement).focus(); + } + + // Update compose state + setComposeBody(wrappedContent); + setLocalContent(wrappedContent); + console.log('[DEBUG] Successfully set compose content'); + } + } catch (error) { + console.error('[DEBUG] Error parsing email for compose:', error); + + // Fallback to basic content display + const errorContent = ` +
+
+
+ ---------- Original Message ---------
+ ${emailToProcess.subject ? `Subject: ${emailToProcess.subject}
` : ''} + ${emailToProcess.from ? `From: ${emailToProcess.from}
` : ''} + ${emailToProcess.date ? `Date: ${new Date(emailToProcess.date).toLocaleString()}
` : ''} +
+
+ ${emailToProcess.preview || 'No content available'} +
+
+ `; + + if (composeBodyRef.current) { + composeBodyRef.current.innerHTML = errorContent; + setComposeBody(errorContent); + setLocalContent(errorContent); + } } } catch (error) { console.error('[DEBUG] Error initializing compose content:', error); @@ -389,7 +398,7 @@ export default function ComposeEmail({ } }; - // Add formatDate function to match Panel 3 exactly + // Add formatDate function to match Panel 3 implementation function formatDate(date: Date | null): string { if (!date) return ''; return new Intl.DateTimeFormat('fr-FR', {