courrier preview

This commit is contained in:
alma 2025-05-01 12:23:53 +02:00
parent 3c57a3ed65
commit a62ccf9c0c
2 changed files with 38 additions and 20 deletions

View File

@ -159,8 +159,10 @@ export default function ComposeEmail(props: ComposeEmailProps) {
// Provide a basic template if the content is empty // Provide a basic template if the content is empty
const { fromStr, dateStr } = getFormattedInfoForEmail(initialEmail); const { fromStr, dateStr } = getFormattedInfoForEmail(initialEmail);
const fallbackContent = ` const fallbackContent = `
<div style="margin-top: 20px; margin-bottom: 10px; color: #666;">On ${dateStr}, ${fromStr} wrote:</div> <div style="margin: 20px 0 10px 0; color: #666; border-bottom: 1px solid #ddd; padding-bottom: 5px;">
<blockquote style="margin: 10px 0; padding-left: 10px; border-left: 2px solid #ddd; color: #505050;"> On ${dateStr}, ${fromStr} wrote:
</div>
<blockquote style="margin: 0; padding-left: 10px; border-left: 3px solid #ddd; color: #505050; background-color: #f9f9f9; padding: 10px;">
[Original message content could not be loaded] [Original message content could not be loaded]
</blockquote> </blockquote>
`; `;
@ -198,17 +200,22 @@ export default function ComposeEmail(props: ComposeEmailProps) {
// Provide a basic template if the content is empty // Provide a basic template if the content is empty
const { fromStr, toStr, ccStr, dateStr, subject } = getFormattedInfoForEmail(initialEmail); const { fromStr, toStr, ccStr, dateStr, subject } = getFormattedInfoForEmail(initialEmail);
const fallbackContent = ` const fallbackContent = `
<div style="margin-top: 20px; color: #666;"> <div style="margin: 20px 0 10px 0; color: #666;">
<div>---------- Forwarded message ---------</div> <div style="border-bottom: 1px solid #ccc; margin-bottom: 10px; padding-bottom: 5px;">
<div>---------------------------- Forwarded Message ----------------------------</div>
</div>
<div><strong>From:</strong> ${fromStr}</div> <div><strong>From:</strong> ${fromStr}</div>
<div><strong>Date:</strong> ${dateStr}</div> <div><strong>Date:</strong> ${dateStr}</div>
<div><strong>Subject:</strong> ${subject || ''}</div> <div><strong>Subject:</strong> ${subject || ''}</div>
<div><strong>To:</strong> ${toStr}</div> <div><strong>To:</strong> ${toStr}</div>
${ccStr ? `<div><strong>Cc:</strong> ${ccStr}</div>` : ''} ${ccStr ? `<div><strong>Cc:</strong> ${ccStr}</div>` : ''}
<div style="border-bottom: 1px solid #ccc; margin-top: 10px; margin-bottom: 15px; padding-bottom: 5px;">
<div>----------------------------------------------------------------------</div>
</div>
</div> </div>
<blockquote style="margin-top: 10px; padding-left: 10px; border-left: 2px solid #ddd; color: #505050;"> <div class="forwarded-content" style="margin: 0; color: #333;">
[Original message content could not be loaded] [Original message content could not be loaded]
</blockquote> </div>
`; `;
setEmailContent(fallbackContent); setEmailContent(fallbackContent);
} else { } else {

View File

@ -279,21 +279,26 @@ export function formatReplyEmail(originalEmail: EmailMessage | LegacyEmailMessag
const { text, html } = extractEmailContent(originalEmail); const { text, html } = extractEmailContent(originalEmail);
emailText = text; emailText = text;
// Create simple reply with header // Create a clearer reply header with separator line
const cleanReplyHeader = `<div style="margin: 20px 0 10px 0; color: #666; border-bottom: 1px solid #eee; padding-bottom: 10px;">On ${dateStr}, ${fromStr} wrote:</div>`; const cleanReplyHeader = `
<div style="margin: 20px 0 10px 0; color: #666; border-bottom: 1px solid #ddd; padding-bottom: 5px;">
On ${dateStr}, ${fromStr} wrote:
</div>
`;
// No character limit - display the full email content // No character limit - display the full email content
const cleanHtml = ` const cleanHtml = `
${cleanReplyHeader} ${cleanReplyHeader}
<blockquote style="margin: 0; padding-left: 10px; border-left: 2px solid #ddd; color: #505050;"> <blockquote style="margin: 0; padding-left: 10px; border-left: 3px solid #ddd; color: #505050; background-color: #f9f9f9; padding: 10px;">
<p>${emailText.replace(/\n/g, '</p><p>')}</p> ${html || `<p>${emailText.replace(/\n/g, '</p><p>')}</p>`}
</blockquote> </blockquote>
`; `;
// Plain text version - no truncation // Plain text version - no truncation
const plainText = ` const plainText = `
On ${dateStr}, ${fromStr} wrote: On ${dateStr}, ${fromStr} wrote:
> ${emailText.split('\n').join('\n> ')} -------------------------------------------------------------------
${emailText.split('\n').join('\n> ')}
`; `;
return { return {
@ -336,34 +341,40 @@ export function formatForwardedEmail(originalEmail: EmailMessage | LegacyEmailMe
const { text, html } = extractEmailContent(originalEmail); const { text, html } = extractEmailContent(originalEmail);
emailText = text; emailText = text;
// Create simple forward with metadata header // Create a more traditional forward format with dashed separator
const cleanForwardHeader = ` const cleanForwardHeader = `
<div style="margin: 20px 0 10px 0; color: #666; border-bottom: 1px solid #eee; padding-bottom: 10px;"> <div style="margin: 20px 0 10px 0; color: #666;">
<div><strong>---------- Forwarded message ---------</strong></div> <div style="border-bottom: 1px solid #ccc; margin-bottom: 10px; padding-bottom: 5px;">
<div>---------------------------- Forwarded Message ----------------------------</div>
</div>
<div><strong>From:</strong> ${fromStr}</div> <div><strong>From:</strong> ${fromStr}</div>
<div><strong>Date:</strong> ${dateStr}</div> <div><strong>Date:</strong> ${dateStr}</div>
<div><strong>Subject:</strong> ${subject || ''}</div> <div><strong>Subject:</strong> ${subject || ''}</div>
<div><strong>To:</strong> ${toStr}</div> <div><strong>To:</strong> ${toStr}</div>
${ccStr ? `<div><strong>Cc:</strong> ${ccStr}</div>` : ''} ${ccStr ? `<div><strong>Cc:</strong> ${ccStr}</div>` : ''}
<div style="border-bottom: 1px solid #ccc; margin-top: 10px; margin-bottom: 15px; padding-bottom: 5px;">
<div>----------------------------------------------------------------------</div>
</div>
</div> </div>
`; `;
// No character limit - display the full email content // No character limit - display the full email content
const cleanHtml = ` const cleanHtml = `
${cleanForwardHeader} ${cleanForwardHeader}
<blockquote style="margin: 0; padding-left: 10px; border-left: 2px solid #ddd; color: #505050;"> <div class="forwarded-content" style="margin: 0; color: #333;">
<p>${emailText.replace(/\n/g, '</p><p>')}</p> ${html || `<p>${emailText.replace(/\n/g, '</p><p>')}</p>`}
</blockquote> </div>
`; `;
// Plain text version // Plain text version - no truncation
const plainText = ` const plainText = `
---------- Forwarded message --------- ---------------------------- Forwarded Message ----------------------------
From: ${fromStr} From: ${fromStr}
Date: ${dateStr} Date: ${dateStr}
Subject: ${subject || ''} Subject: ${subject || ''}
To: ${toStr} To: ${toStr}
${ccStr ? `Cc: ${ccStr}\n` : ''} ${ccStr ? `Cc: ${ccStr}` : ''}
----------------------------------------------------------------------
${emailText} ${emailText}
`; `;