alma/Neah
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

compose mime

Browse Source
This commit is contained in:
alma 2025-04-24 20:56:33 +02:00
parent 87a0879166
commit 48403d2e67
1 changed files with 30 additions and 26 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

44
components/ComposeEmail.tsx
View File

@ -95,14 +95,13 @@ export default function ComposeEmail({
return; return;
} }
// Create initial content immediately // Set initial loading state
const initialContent = ` composeBodyRef.current.innerHTML = `
<div class="compose-area" contenteditable="true" style="min-height: 100px; padding: 10px; color: #000000;"> <div class="compose-area" contenteditable="true">
<br/> <br/>
<div id="reply-placeholder">Loading original message...</div> <div class="text-gray-500">Loading original message...</div>
</div> </div>
`; `;
composeBodyRef.current.innerHTML = initialContent;
// Parse the original email using the API // Parse the original email using the API
const response = await fetch('/api/parse-email', { const response = await fetch('/api/parse-email', {
@ -118,6 +117,8 @@ export default function ComposeEmail({
throw new Error(data.error || 'Failed to parse email'); throw new Error(data.error || 'Failed to parse email');
} }
const emailContent = data.html || data.text || '';
// Format the reply/forward content // Format the reply/forward content
const quotedContent = forwardFrom ? ` const quotedContent = forwardFrom ? `
<div style="border-top: 1px solid #e5e7eb; padding-top: 20px; margin-top: 20px; color: #6b7280; font-size: 0.875rem;"> <div style="border-top: 1px solid #e5e7eb; padding-top: 20px; margin-top: 20px; color: #6b7280; font-size: 0.875rem;">
@ -127,35 +128,41 @@ export default function ComposeEmail({
Subject: ${emailToProcess.subject}<br/> Subject: ${emailToProcess.subject}<br/>
To: ${emailToProcess.to}<br/> To: ${emailToProcess.to}<br/>
${emailToProcess.cc ? `Cc: ${emailToProcess.cc}<br/>` : ''} ${emailToProcess.cc ? `Cc: ${emailToProcess.cc}<br/>` : ''}
<br/> </div>
${data.html || data.text || 'No content available'} <div style="margin-top: 10px; color: #374151;">
${emailContent}
</div> </div>
` : ` ` : `
<div style="border-top: 1px solid #e5e7eb; padding-top: 20px; margin-top: 20px; color: #6b7280; font-size: 0.875rem;"> <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: On ${new Date(emailToProcess.date).toLocaleString()}, ${emailToProcess.from} wrote:
</div> </div>
<blockquote style="margin: 0; padding-left: 1em; border-left: 2px solid #e5e7eb; color: #6b7280;"> <blockquote style="margin: 10px 0 0 10px; padding-left: 1em; border-left: 2px solid #e5e7eb; color: #374151;">
${data.html || data.text || 'No content available'} ${emailContent}
</blockquote> </blockquote>
`; `;
// Set the content in the compose area // Set the content in the compose area with proper structure
if (composeBodyRef.current) {
const formattedContent = ` const formattedContent = `
<div class="compose-area" contenteditable="true" style="min-height: 100px; padding: 10px; color: #000000;"> <div class="compose-area" contenteditable="true" style="min-height: 100px; padding: 10px;">
<br/> <div style="min-height: 20px;"><br/></div>
${quotedContent} ${quotedContent}
</div> </div>
`; `;
if (composeBodyRef.current) {
composeBodyRef.current.innerHTML = formattedContent; composeBodyRef.current.innerHTML = formattedContent;
// Place cursor at the beginning // Place cursor at the beginning before the quoted content
const selection = window.getSelection(); const selection = window.getSelection();
const range = document.createRange(); const range = document.createRange();
range.setStart(composeBodyRef.current.firstChild || composeBodyRef.current, 0); const firstDiv = composeBodyRef.current.querySelector('div[style*="min-height: 20px;"]');
if (firstDiv) {
range.setStart(firstDiv, 0);
range.collapse(true); range.collapse(true);
selection?.removeAllRanges(); selection?.removeAllRanges();
selection?.addRange(range); selection?.addRange(range);
(firstDiv as HTMLElement).focus();
}
// Update compose state // Update compose state
setComposeBody(formattedContent); setComposeBody(formattedContent);
@ -165,7 +172,7 @@ export default function ComposeEmail({
console.error('Error initializing compose content:', error); console.error('Error initializing compose content:', error);
if (composeBodyRef.current) { if (composeBodyRef.current) {
const errorContent = ` const errorContent = `
<div class="compose-area" contenteditable="true" style="min-height: 100px; padding: 10px; color: #000000;"> <div class="compose-area" contenteditable="true">
<br/> <br/>
<div style="color: #ef4444;">Error loading original message.</div> <div style="color: #ef4444;">Error loading original message.</div>
</div> </div>
@ -184,10 +191,7 @@ export default function ComposeEmail({
const handleInput = (e: React.FormEvent<HTMLDivElement>) => { const handleInput = (e: React.FormEvent<HTMLDivElement>) => {
if (!composeBodyRef.current) return; if (!composeBodyRef.current) return;
const composeArea = composeBodyRef.current.querySelector('.compose-area'); const content = composeBodyRef.current.innerHTML;
if (!composeArea) return;
const content = composeArea.innerHTML;
if (!content.trim()) { if (!content.trim()) {
setLocalContent(''); setLocalContent('');
setComposeBody(''); setComposeBody('');