diff --git a/components/ComposeEmail.tsx b/components/ComposeEmail.tsx index b588fb80..5e0fd904 100644 --- a/components/ComposeEmail.tsx +++ b/components/ComposeEmail.tsx @@ -90,10 +90,13 @@ export default function ComposeEmail({ // Get the original email content const originalContent = replyTo?.body || forwardFrom?.body || ''; + // Generate a unique boundary for MIME parts + const boundary = `----=_NextPart_${Date.now()}_${Math.random().toString(36).substr(2, 9)}`; + // Create MIME headers const mimeHeaders = { 'MIME-Version': '1.0', - 'Content-Type': 'multipart/alternative', + 'Content-Type': `multipart/alternative; boundary="${boundary}"`, 'From': forwardFrom?.from || replyTo?.from || '', 'Date': new Date(forwardFrom?.date || replyTo?.date || '').toUTCString(), 'Subject': forwardFrom?.subject || replyTo?.subject || '', @@ -101,27 +104,42 @@ export default function ComposeEmail({ 'Cc': forwardFrom?.cc || replyTo?.cc || '', }; - // Create the reply/forward structure + // Create the reply/forward structure with proper MIME formatting content = `
${forwardFrom ? `
---------- Forwarded message ---------
- From: ${forwardFrom.from}
- Date: ${new Date(forwardFrom.date).toLocaleString()}
- Subject: ${forwardFrom.subject}
- To: ${forwardFrom.to}
- ${forwardFrom.cc ? `Cc: ${forwardFrom.cc}
` : ''} + ${Object.entries(mimeHeaders) + .filter(([key, value]) => value) + .map(([key, value]) => `${key}: ${value}
`) + .join('')} +
+ This is a multi-part message in MIME format.
+
+ --${boundary}
+ Content-Type: text/plain; charset="utf-8"
+ Content-Transfer-Encoding: quoted-printable
+
+ ${originalContent.replace(/\n/g, '
')}
+
+ --${boundary}
+ Content-Type: text/html; charset="utf-8"
+ Content-Transfer-Encoding: quoted-printable
+
+ ${originalContent}
+
+ --${boundary}--
` : `
On ${new Date(replyTo?.date || '').toLocaleString()}, ${replyTo?.from} wrote:
+
+ ${originalContent} +
`} -
- ${originalContent} -
`; } else { @@ -151,17 +169,38 @@ export default function ComposeEmail({ if (!composeBodyRef.current) return; const content = composeBodyRef.current.innerHTML; + // Generate a unique boundary for MIME parts + const boundary = `----=_NextPart_${Date.now()}_${Math.random().toString(36).substr(2, 9)}`; + // Create MIME headers const mimeHeaders = { 'MIME-Version': '1.0', - 'Content-Type': 'text/html; charset="utf-8"', + 'Content-Type': `multipart/alternative; boundary="${boundary}"`, 'Content-Transfer-Encoding': 'quoted-printable' }; - // Combine headers and content - const mimeContent = Object.entries(mimeHeaders) - .map(([key, value]) => `${key}: ${value}`) - .join('\n') + '\n\n' + content; + // Create MIME message structure + const mimeContent = ` +${Object.entries(mimeHeaders) + .map(([key, value]) => `${key}: ${value}`) + .join('\n')} + +This is a multi-part message in MIME format. + +--${boundary} +Content-Type: text/plain; charset="utf-8" +Content-Transfer-Encoding: quoted-printable + +${content.replace(/<[^>]*>/g, '')} + +--${boundary} +Content-Type: text/html; charset="utf-8" +Content-Transfer-Encoding: quoted-printable + +${content} + +--${boundary}-- +`; setComposeBody(mimeContent);