compose mime

This commit is contained in:
alma 2025-04-24 20:15:07 +02:00
parent fa85613f31
commit 5bd57d731d

View File

@ -86,6 +86,8 @@ export default function ComposeEmail({
useEffect(() => {
if (replyTo || forwardFrom) {
const initializeContent = async () => {
if (!composeBodyRef.current) return;
try {
const emailToProcess = replyTo || forwardFrom;
if (!emailToProcess?.body) {
@ -93,6 +95,15 @@ export default function ComposeEmail({
return;
}
// Create initial content immediately
const initialContent = `
<div class="compose-area" contenteditable="true" style="min-height: 100px; padding: 10px; color: #000000;">
<br/>
<div id="reply-placeholder">Loading original message...</div>
</div>
`;
composeBodyRef.current.innerHTML = initialContent;
// Parse the original email using the API
const response = await fetch('/api/parse-email', {
method: 'POST',
@ -107,21 +118,38 @@ export default function ComposeEmail({
}
const parsedEmail = await response.json();
const originalContent = parsedEmail.html || parsedEmail.text || '';
// Format the reply/forward content
const prefix = replyTo ? '\n\n' : '\n\n---------- Forwarded message ----------\n\n';
const quoteStyle = 'border-left: 2px solid #ccc; margin-left: 1em; padding-left: 1em;';
const formattedContent = `
<div><br/>${prefix}</div>
<div style="${quoteStyle}">
${originalContent}
const quotedContent = forwardFrom ? `
<div style="border-top: 1px solid #e5e7eb; padding-top: 20px; margin-top: 20px; color: #6b7280; font-size: 0.875rem;">
---------- Forwarded message ---------<br/>
From: ${emailToProcess.from}<br/>
Date: ${new Date(emailToProcess.date).toLocaleString()}<br/>
Subject: ${emailToProcess.subject}<br/>
To: ${emailToProcess.to}<br/>
${emailToProcess.cc ? `Cc: ${emailToProcess.cc}<br/>` : ''}
<br/>
${parsedEmail.html || parsedEmail.text || 'No content available'}
</div>
` : `
<div style="border-top: 1px solid #e5e7eb; padding-top: 20px; margin-top: 20px; color: #6b7280; font-size: 0.875rem;">
On ${new Date(emailToProcess.date).toLocaleString()}, ${emailToProcess.from} wrote:
</div>
<blockquote style="margin: 0; padding-left: 1em; border-left: 2px solid #e5e7eb; color: #6b7280;">
${parsedEmail.html || parsedEmail.text || 'No content available'}
</blockquote>
`;
// Set the content in the compose area
if (composeBodyRef.current) {
const formattedContent = `
<div class="compose-area" contenteditable="true" style="min-height: 100px; padding: 10px; color: #000000;">
<br/>
${quotedContent}
</div>
`;
composeBodyRef.current.innerHTML = formattedContent;
// Place cursor at the beginning
const selection = window.getSelection();
const range = document.createRange();
@ -129,12 +157,21 @@ export default function ComposeEmail({
range.collapse(true);
selection?.removeAllRanges();
selection?.addRange(range);
}
// Update compose state
setComposeBody(formattedContent);
// Update compose state
setComposeBody(formattedContent);
}
} catch (error) {
console.error('Error initializing compose content:', error);
if (composeBodyRef.current) {
const errorContent = `
<div class="compose-area" contenteditable="true" style="min-height: 100px; padding: 10px; color: #000000;">
<br/>
<div style="color: #ef4444;">Error loading original message.</div>
</div>
`;
composeBodyRef.current.innerHTML = errorContent;
}
}
};