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 18:00:37 +02:00
parent ba829f4b6c
commit 8307ecdee3
1 changed files with 71 additions and 40 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

111
components/ComposeEmail.tsx
View File

@ -9,6 +9,7 @@ import { Textarea } from '@/components/ui/textarea';
import { decodeComposeContent, encodeComposeContent } from '@/lib/compose-mime-decoder'; import { decodeComposeContent, encodeComposeContent } from '@/lib/compose-mime-decoder';
import { Email } from '@/app/courrier/page'; import { Email } from '@/app/courrier/page';
import mime from 'mime'; import mime from 'mime';
import { simpleParser } from 'mailparser';
interface ComposeEmailProps { interface ComposeEmailProps {
showCompose: boolean; showCompose: boolean;
@ -90,49 +91,79 @@ export default function ComposeEmail({
// Get the original email content // Get the original email content
const originalContent = replyTo?.body || forwardFrom?.body || ''; const originalContent = replyTo?.body || forwardFrom?.body || '';
// Create the reply/forward structure // Parse the original email content using the API
content = ` fetch('/api/parse-email', {
<div class="compose-area" contenteditable="true" style="min-height: 100px; padding: 10px; border: 1px solid #e5e7eb; border-radius: 4px; margin-bottom: 20px;"></div> method: 'POST',
<div class="quoted-content" contenteditable="false" style="color: #6b7280; font-size: 0.875rem;"> headers: {
${forwardFrom ? ` 'Content-Type': 'application/json',
<div style="margin-bottom: 10px;"> },
---------- Forwarded message ---------<br/> body: JSON.stringify({ emailContent: originalContent }),
From: ${forwardFrom.from}<br/> })
Date: ${new Date(forwardFrom.date).toLocaleString()}<br/> .then(response => response.json())
Subject: ${forwardFrom.subject}<br/> .then(parsed => {
To: ${forwardFrom.to}<br/> // Create the reply/forward structure
${forwardFrom.cc ? `Cc: ${forwardFrom.cc}<br/>` : ''} content = `
<br/> <div class="compose-area" contenteditable="true" style="min-height: 100px; padding: 10px; border: 1px solid #e5e7eb; border-radius: 4px; margin-bottom: 20px;"></div>
${originalContent} <div class="quoted-content" contenteditable="false" style="color: #6b7280; font-size: 0.875rem;">
</div> ${forwardFrom ? `
` : ` <div style="margin-bottom: 10px;">
<div style="margin-bottom: 10px;"> ---------- Forwarded message ---------<br/>
On ${new Date(replyTo?.date || '').toLocaleString()}, ${replyTo?.from} wrote: From: ${forwardFrom.from}<br/>
</div> Date: ${new Date(forwardFrom.date).toLocaleString()}<br/>
<blockquote style="margin: 0; padding-left: 1em; border-left: 2px solid #e5e7eb;"> Subject: ${forwardFrom.subject}<br/>
${originalContent} To: ${forwardFrom.to}<br/>
</blockquote> ${forwardFrom.cc ? `Cc: ${forwardFrom.cc}<br/>` : ''}
`} <br/>
</div> ${parsed.html || parsed.text}
`; </div>
` : `
<div style="margin-bottom: 10px;">
On ${new Date(replyTo?.date || '').toLocaleString()}, ${replyTo?.from} wrote:
</div>
<blockquote style="margin: 0; padding-left: 1em; border-left: 2px solid #e5e7eb;">
${parsed.html || parsed.text}
</blockquote>
`}
</div>
`;
if (composeBodyRef.current) {
composeBodyRef.current.innerHTML = content;
setIsInitialized(true);
// Place cursor at the beginning of the compose area
const composeArea = composeBodyRef.current.querySelector('.compose-area');
if (composeArea) {
const range = document.createRange();
const sel = window.getSelection();
range.setStart(composeArea, 0);
range.collapse(true);
sel?.removeAllRanges();
sel?.addRange(range);
(composeArea as HTMLElement).focus();
}
}
})
.catch(error => {
console.error('Error parsing email:', error);
});
} else { } else {
// For new messages // For new messages
content = `<div class="compose-area" contenteditable="true" style="min-height: 100px; padding: 10px; border: 1px solid #e5e7eb; border-radius: 4px;"></div>`; content = `<div class="compose-area" contenteditable="true" style="min-height: 100px; padding: 10px; border: 1px solid #e5e7eb; border-radius: 4px;"></div>`;
} composeBodyRef.current.innerHTML = content;
setIsInitialized(true);
composeBodyRef.current.innerHTML = content;
setIsInitialized(true); // Place cursor at the beginning of the compose area
const composeArea = composeBodyRef.current.querySelector('.compose-area');
// Place cursor at the beginning of the compose area if (composeArea) {
const composeArea = composeBodyRef.current.querySelector('.compose-area'); const range = document.createRange();
if (composeArea) { const sel = window.getSelection();
const range = document.createRange(); range.setStart(composeArea, 0);
const sel = window.getSelection(); range.collapse(true);
range.setStart(composeArea, 0); sel?.removeAllRanges();
range.collapse(true); sel?.addRange(range);
sel?.removeAllRanges(); (composeArea as HTMLElement).focus();
sel?.addRange(range); }
(composeArea as HTMLElement).focus();
} }
} }
}, [composeBody, replyTo, forwardFrom, isInitialized]); }, [composeBody, replyTo, forwardFrom, isInitialized]);