From 051bcb08a4a9f32fb7f02bbe9c1a808789620bda Mon Sep 17 00:00:00 2001 From: alma Date: Sat, 26 Apr 2025 14:52:19 +0200 Subject: [PATCH] courrier clean 2 --- components/email/ComposeEmail.tsx | 148 ++++++++++-------------------- 1 file changed, 50 insertions(+), 98 deletions(-) diff --git a/components/email/ComposeEmail.tsx b/components/email/ComposeEmail.tsx index 1d43d8cc..85556051 100644 --- a/components/email/ComposeEmail.tsx +++ b/components/email/ComposeEmail.tsx @@ -340,20 +340,6 @@ export default function ComposeEmail(props: ComposeEmailAllProps) { return; } - // Debug the email object structure - console.log('Forwarding email object:', { - id: initialEmail.id, - subject: initialEmail.subject, - fromLength: initialEmail.from?.length, - from: initialEmail.from, - to: initialEmail.to, - date: initialEmail.date, - hasContent: Boolean(initialEmail.content), - contentLength: initialEmail.content?.length, - hasHtml: Boolean(initialEmail.html), - htmlLength: initialEmail.html?.length - }); - try { // Format subject with Fwd: prefix if needed const subjectBase = initialEmail.subject || '(No subject)'; @@ -364,62 +350,58 @@ export default function ComposeEmail(props: ComposeEmailAllProps) { setSubject(subject); - // Format the forwarded message with a well-structured header + // Format the forwarded message as a simple text representation with clean formatting + let forwardedText = ''; + + // Format the "From" field const fromString = Array.isArray(initialEmail.from) && initialEmail.from.length > 0 ? initialEmail.from.map(addr => addr.name ? `${addr.name} <${addr.address}>` : addr.address).join(', ') : 'Unknown'; + // Format the "To" field const toString = Array.isArray(initialEmail.to) && initialEmail.to.length > 0 ? initialEmail.to.map(addr => addr.name ? `${addr.name} <${addr.address}>` : addr.address).join(', ') : ''; + // Format the date const dateString = initialEmail.date ? typeof initialEmail.date === 'string' ? new Date(initialEmail.date).toLocaleString() : initialEmail.date.toLocaleString() : new Date().toLocaleString(); - // Create a clean header with inline styles only - no external CSS - const headerHtml = ` -
-
-
---------- Forwarded message ---------
-
From: ${fromString}
-
Date: ${dateString}
-
Subject: ${subjectBase}
-
To: ${toString}
-
-
- `; + // Create a simple text representation of the forwarded header + forwardedText += '---------- Forwarded message ---------\n'; + forwardedText += `From: ${fromString}\n`; + forwardedText += `Date: ${dateString}\n`; + forwardedText += `Subject: ${subjectBase}\n`; + forwardedText += `To: ${toString}\n\n`; - // Default content is a clear "no content" message - let contentHtml = '
No content available in original email
'; - - // Check if we have content to forward + // Add the content - clean and sanitize the HTML to prevent formatting issues if (initialEmail.content || initialEmail.html || initialEmail.text) { - // Use the most complete version of content available - contentHtml = DOMPurify.sanitize( - initialEmail.content || initialEmail.html || - `
${initialEmail.text || ''}
`, - { - ADD_ATTR: ['style', 'class'], - ALLOW_DATA_ATTR: true, - USE_PROFILES: { html: true } - } - ); + // Try to extract text from HTML content + const tempDiv = document.createElement('div'); + tempDiv.innerHTML = initialEmail.content || initialEmail.html || initialEmail.text || ''; + + // Get the text content, preserving line breaks + let cleanContent = tempDiv.textContent || tempDiv.innerText || ''; + + // Add the clean content + forwardedText += cleanContent; + } else { + forwardedText += 'No content available in original email'; } - // Set the original content for display - setOriginalContent(`${headerHtml}
${contentHtml}
`); + // Set the forwarded text as the original content (plain text preserves formatting better) + setOriginalContent(forwardedText); - // Leave the editorRef empty to allow user to type their message + // Keep user message separate setUserMessage(''); setBody(''); - } catch (error) { console.error('Error formatting forwarded email:', error); setBody('
Error formatting forwarded email content
'); @@ -483,12 +465,23 @@ export default function ComposeEmail(props: ComposeEmailAllProps) { try { setSending(true); + // Combine user message with original content for forwarded emails + let finalBody = ''; + + if (type === 'forward' && originalContent) { + // Format the user message + forwarded content properly + finalBody = `${userMessage}\n\n${originalContent}`; + } else { + // For other cases, use the current body + finalBody = editorRef.current?.innerHTML || body; + } + await onSend({ to, cc: cc || undefined, bcc: bcc || undefined, subject, - body: editorRef.current?.innerHTML || body, + body: finalBody, attachments }); @@ -507,12 +500,8 @@ export default function ComposeEmail(props: ComposeEmailAllProps) { const content = editorRef.current.innerHTML; setUserMessage(content); - // Combine user message with original content - if (originalContent) { - setBody(`${content}
${originalContent}`); - } else { - setBody(content); - } + // Simply update body with user message - we'll combine with original content when sending + setBody(content); } }; @@ -648,58 +637,21 @@ export default function ComposeEmail(props: ComposeEmailAllProps) { }} /> - {/* Original content display with visual separation - editable for replies/forwards */} + {/* Original content display with visual separation - now as plain text for better reliability */} {type !== 'new' && originalContent && (
- {type === 'forward' ? 'Forwarded content (editable)' : 'Original message (editable)'} + {type === 'forward' ? 'Forwarded content' : 'Original message'}
-
{ - // Prevent default behavior that might cause text flow issues - e.preventDefault(); - - // Get the current caret position to restore it later - const selection = window.getSelection(); - const range = selection?.getRangeAt(0); - const offset = range?.startOffset || 0; - const node = range?.startContainer; - - // Update content - const target = e.target as HTMLDivElement; - setOriginalContent(target.innerHTML); - - // Update the complete body without disturbing the text flow - const userPart = editorRef.current?.innerHTML || ''; - setBody(`${userPart}
${target.innerHTML}`); - - // Try to restore cursor position after state update - setTimeout(() => { - try { - if (selection && range && node && node.parentNode) { - // Attempt to find the same node - const newRange = document.createRange(); - newRange.setStart(node, Math.min(offset, node.textContent?.length || 0)); - newRange.collapse(true); - selection.removeAllRanges(); - selection.addRange(newRange); - } - } catch (err) { - console.error('Error restoring cursor position:', err); - } - }, 0); - }} - /> + > + {originalContent} +
)}