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

56
components/ComposeEmail.tsx
View File

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