diff --git a/app/courrier/page.tsx b/app/courrier/page.tsx index 17bc562c..873aeb12 100644 --- a/app/courrier/page.tsx +++ b/app/courrier/page.tsx @@ -1602,34 +1602,107 @@ export default function CourrierPage() { setSelectedEmail(updatedEmail); - // For forwarding, we need to set the isForwarding flag to true - if (type === 'forward') { - console.log('[DEBUG] Setting isForwarding flag for forwarding'); - setIsForwarding(true); - } else { - // For replying, we need to set isReplying to true - console.log('[DEBUG] Setting isReplying to true for replying'); - setIsReplying(true); - // Store the reply type in the component state if needed - setReplyToEmail(updatedEmail); - } + // Format content directly here + formatEmailAndShowCompose(updatedEmail, type); } } else { - // Content already loaded, just set the flags - if (type === 'forward') { - console.log('[DEBUG] Setting isForwarding flag for forwarding (content already loaded)'); - setIsForwarding(true); - } else { - console.log('[DEBUG] Setting isReplying to true (content already loaded)'); - setIsReplying(true); - setReplyToEmail(selectedEmail); + // Content already loaded, format directly + formatEmailAndShowCompose(selectedEmail, type); + } + } catch (error) { + console.error('[DEBUG] Error preparing email for reply/forward:', error); + } + }; + + // New helper function to directly format email content + const formatEmailAndShowCompose = (email: Email, type: 'reply' | 'reply-all' | 'forward') => { + try { + console.log('[DEBUG] Formatting email for', type); + + // Get email sender name and address + const senderName = email.fromName || email.from.split('@')[0]; + const senderEmail = email.from; + + // Format date properly + const formattedDate = formatDate(new Date(email.date)); + + // Set flag for component rendering + if (type === 'forward') { + setIsForwarding(true); + } else { + setIsReplying(true); + } + + // Set recipients based on reply type + if (type === 'reply') { + setComposeTo(senderName ? `${senderName} <${senderEmail}>` : senderEmail); + } else if (type === 'reply-all') { + // To: original sender + setComposeTo(senderName ? `${senderName} <${senderEmail}>` : senderEmail); + + // CC: all other recipients (simplified) + if (email.cc) { + setComposeCc(email.cc); + setShowCc(true); } } + // Format subject + let subject = email.subject || 'No Subject'; + // Remove existing prefixes to avoid duplication + subject = subject.replace(/^(Re|Fwd):\s*/gi, ''); + + // Add appropriate prefix + if (type === 'forward') { + subject = `Fwd: ${subject}`; + } else { + subject = `Re: ${subject}`; + } + setComposeSubject(subject); + + // Format content + let formattedContent = ''; + + if (type === 'forward') { + formattedContent = ` +
+
+
+
---------- Forwarded message ---------
+
+
From: ${senderName} <${senderEmail}>
+
Date: ${formattedDate}
+
Subject: ${email.subject || 'No Subject'}
+
To: ${email.to || 'No Recipients'}
+ ${email.cc ? `
Cc: ${email.cc}
` : ''} +
+
+
${email.html || email.content || '
No content available
'}
+
+
+ `; + } else { + formattedContent = ` +
+
+
+
+
On ${formattedDate}, ${senderName} <${senderEmail}> wrote:
+
+
${email.html || email.content || 'No content available'}
+
+
+ `; + } + + // Set the formatted content directly + setComposeBody(formattedContent); + // Show the compose dialog setShowCompose(true); + } catch (error) { - console.error('[DEBUG] Error preparing email for reply/forward:', error); + console.error('[DEBUG] Error formatting email:', error); } }; @@ -2308,8 +2381,6 @@ export default function CourrierPage() { attachments={attachments} setAttachments={setAttachments} handleSend={handleSend} - replyTo={isReplying ? selectedEmail : null} - forwardFrom={isForwarding ? selectedEmail : null} onSend={async (emailData) => { console.log('Email sent:', emailData); setShowCompose(false); diff --git a/components/ComposeEmail.tsx b/components/ComposeEmail.tsx index 917e5b70..252ceb88 100644 --- a/components/ComposeEmail.tsx +++ b/components/ComposeEmail.tsx @@ -7,8 +7,36 @@ import { Input } from '@/components/ui/input'; import { Textarea } from '@/components/ui/textarea'; import { Label } from '@/components/ui/label'; import DOMPurify from 'isomorphic-dompurify'; -import { formatEmailForReply, formatEmailForForward, EmailMessageForFormatting } from '@/lib/email-formatter'; +// Add a CSS style block to handle the direction properly +const forceLTRStyles = ` +.force-ltr { + direction: ltr !important; + text-align: left !important; + unicode-bidi: isolate !important; + writing-mode: horizontal-tb !important; +} +.force-ltr * { + direction: ltr !important; + text-align: left !important; + unicode-bidi: isolate !important; +} +[dir="rtl"] .force-ltr, +[dir="rtl"] .force-ltr * { + direction: ltr !important; + text-align: left !important; +} +.email-content { + direction: ltr !important; + text-align: left !important; +} +.email-content * { + direction: ltr !important; + text-align: left !important; +} +`; + +// Nous simplifions l'interface car nous n'utilisons plus ces props interface EmailObject { id?: string; from?: string; @@ -54,6 +82,7 @@ interface ComposeEmailProps { }; onSend: (email: any) => Promise; onCancel: () => void; + // Nous laissons ces props pour la rétrocompatibilité mais nous ne les utilisons plus replyTo?: EmailObject | null; forwardFrom?: EmailObject | null; } @@ -79,6 +108,7 @@ export default function ComposeEmail({ setAttachments, handleSend, originalEmail, + // replyTo et forwardFrom ne sont plus utilisés replyTo, forwardFrom, onSend, @@ -87,112 +117,41 @@ export default function ComposeEmail({ const [isSending, setIsSending] = useState(false); const fileInputRef = useRef(null); const contentEditableRef = useRef(null); - const [useRichEditor, setUseRichEditor] = useState(false); + // Si nous avons un contenu préformaté, nous utilisons toujours l'éditeur riche + const [useRichEditor, setUseRichEditor] = useState(!!composeBody); const [userMessage, setUserMessage] = useState(''); + // Nous extrarons la partie de contenu citée du corps de l'email préformaté const [quotedContent, setQuotedContent] = useState(''); const [hasStartedTyping, setHasStartedTyping] = useState(false); useEffect(() => { - // When forwarding or replying, use rich editor - setUseRichEditor(!!replyTo || !!forwardFrom); - }, [replyTo, forwardFrom]); - - useEffect(() => { - // Initialize reply if replyTo is provided - if (replyTo) { - initializeReplyEmail(replyTo); + // Utiliser l'éditeur riche si nous avons du contenu HTML + if (composeBody && composeBody.includes('<')) { + setUseRichEditor(true); + + // Séparer le contenu de l'utilisateur (vide) et le contenu cité (préformaté) + setUserMessage(''); + setQuotedContent(composeBody); } - }, [replyTo, setComposeTo, setComposeSubject, setComposeBody]); - - useEffect(() => { - // Initialize forward email if forwardFrom is provided - if (forwardFrom) { - initializeForwardedEmail(forwardFrom); - } - }, [forwardFrom]); + }, [composeBody]); - // Initialize forwarded email content - const initializeForwardedEmail = async (email: any) => { - console.log("Initializing forwarded email", email); - try { - // Convert the email to the format expected by our formatter - const emailForFormatting: EmailMessageForFormatting = { - subject: email.subject, - from: email.from, - to: email.to, - date: email.date, - html: email.html || email.content, - text: email.text, - cc: email.cc, - bcc: email.bcc - }; + // Nous n'avons plus besoin de ces effets qui initialisaient replyTo et forwardFrom + // useEffect(() => { + // if (replyTo) { + // initializeReplyEmail(replyTo); + // } + // }, [replyTo, setComposeTo, setComposeSubject, setComposeBody]); + // + // useEffect(() => { + // if (forwardFrom) { + // initializeForwardedEmail(forwardFrom); + // } + // }, [forwardFrom]); - // Use the client-side formatter - const formattedEmail = formatEmailForForward(emailForFormatting); - - setComposeSubject(formattedEmail.subject); - // The email-formatter already adds proper direction, no need for extra wrappers - setQuotedContent(formattedEmail.body); - setComposeBody(''); // Clear user message when forwarding - } catch (error) { - console.error("Error initializing forwarded email:", error); - setQuotedContent(` -
- Error loading original message content -
- `); - } - }; - - // Initialize reply email content - const initializeReplyEmail = async (email: any, replyType: 'reply' | 'replyAll' = 'reply') => { - console.log("Initializing reply email", email, replyType); - try { - // Convert the email to the format expected by our formatter - const emailForFormatting: EmailMessageForFormatting = { - subject: email.subject, - from: email.from, - to: email.to, - date: email.date, - html: email.html || email.content, - text: email.text, - cc: email.cc, - bcc: email.bcc - }; - - // Use the client-side formatter - const formattedEmail = formatEmailForReply(emailForFormatting, replyType); - - setComposeSubject(formattedEmail.subject); - - // Set recipients - if (formattedEmail.to) { - const toAddresses = formattedEmail.to.map(recipient => - recipient.name ? `${recipient.name} <${recipient.address}>` : recipient.address - ).join(', '); - setComposeTo(toAddresses); - } - - if (formattedEmail.cc && formattedEmail.cc.length > 0) { - const ccAddresses = formattedEmail.cc.map(recipient => - recipient.name ? `${recipient.name} <${recipient.address}>` : recipient.address - ).join(', '); - setComposeCc(ccAddresses); - setShowCc(true); - } - - // The email-formatter already adds proper direction, no need for extra wrappers - setQuotedContent(formattedEmail.body); - setComposeBody(''); // Clear user message when replying - } catch (error) { - console.error("Error initializing reply email:", error); - setQuotedContent(` -
- Error loading original message content -
- `); - } - }; + // Nous n'avons plus besoin de ces fonctions qui initialisaient le contenu + // via formatEmailForReply et formatEmailForForward + // const initializeForwardedEmail = async (email: any) => {...}; + // const initializeReplyEmail = async (email: any, replyType: 'reply' | 'replyAll' = 'reply') => {...}; // Handle file attachment selection const handleFileAttachment = (e: React.ChangeEvent) => { @@ -276,32 +235,7 @@ export default function ComposeEmail({ {showCompose && (
{/* Add global styles for email direction */} -