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

mail page fix design

Browse Source
This commit is contained in:
alma 2025-04-21 21:02:31 +02:00
parent 9db7762e38
commit 384a6da21e
2 changed files with 23 additions and 58 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

58
app/courrier/page.tsx
View File

@ -370,20 +370,11 @@ function getReplyBody(email: Email, type: 'reply' | 'reply-all' | 'forward' = 'r
decodedContent = convertCharset(partBody, partHeaderInfo.charset); decodedContent = convertCharset(partBody, partHeaderInfo.charset);
} }
// Preserve the original MIME structure
if (partHeaderInfo.contentType.includes('text/html')) { if (partHeaderInfo.contentType.includes('text/html')) {
content = ` content = decodedContent;
<div class="email-part" data-mime-type="text/html" data-charset="${partHeaderInfo.charset}">
${decodedContent}
</div>
`;
break; break;
} else if (partHeaderInfo.contentType.includes('text/plain') && !content) { } else if (partHeaderInfo.contentType.includes('text/plain') && !content) {
content = ` content = decodedContent;
<div class="email-part" data-mime-type="text/plain" data-charset="${partHeaderInfo.charset}">
<pre style="white-space: pre-wrap; font-family: inherit;">${decodedContent}</pre>
</div>
`;
} }
} catch (error) { } catch (error) {
console.error('Error decoding email part:', error); console.error('Error decoding email part:', error);
@ -392,54 +383,43 @@ function getReplyBody(email: Email, type: 'reply' | 'reply-all' | 'forward' = 'r
} else { } else {
// Handle simple email // Handle simple email
try { try {
let decodedBody = '';
if (headerInfo.encoding === 'base64') { if (headerInfo.encoding === 'base64') {
decodedBody = decodeBase64(body, headerInfo.charset); content = decodeBase64(body, headerInfo.charset);
} else if (headerInfo.encoding === 'quoted-printable') { } else if (headerInfo.encoding === 'quoted-printable') {
decodedBody = decodeQuotedPrintable(body, headerInfo.charset); content = decodeQuotedPrintable(body, headerInfo.charset);
} else { } else {
decodedBody = convertCharset(body, headerInfo.charset); content = convertCharset(body, headerInfo.charset);
} }
content = `
<div class="email-part" data-mime-type="${headerInfo.contentType}" data-charset="${headerInfo.charset}">
${headerInfo.contentType.includes('text/html') ? decodedBody : `<pre style="white-space: pre-wrap; font-family: inherit;">${decodedBody}</pre>`}
</div>
`;
} catch (error) { } catch (error) {
console.error('Error decoding email body:', error); console.error('Error decoding email body:', error);
content = body; content = body;
} }
} }
// Clean and sanitize HTML content while preserving structure // Clean and sanitize HTML content
content = cleanHtml(content); content = cleanHtml(content);
// Format the reply/forward content with proper structure and direction // Format the reply/forward content
let formattedContent = ''; let formattedContent = '';
if (type === 'forward') { if (type === 'forward') {
formattedContent = ` formattedContent = `
<div class="email-container" dir="ltr"> <div class="prose max-w-none" dir="ltr">
<div class="email-header" dir="ltr"> <div class="border-l-4 border-gray-300 pl-4 my-4">
<p class="text-sm text-gray-600 mb-2">Forwarded message from ${email.from}</p> <p class="text-sm text-gray-600 mb-2">Forwarded message from ${email.from}</p>
<p class="text-sm text-gray-600 mb-2">Date: ${new Date(email.date).toLocaleString()}</p> <p class="text-sm text-gray-600 mb-2">Date: ${new Date(email.date).toLocaleString()}</p>
<p class="text-sm text-gray-600 mb-2">Subject: ${email.subject}</p> <p class="text-sm text-gray-600 mb-2">Subject: ${email.subject}</p>
<p class="text-sm text-gray-600 mb-2">To: ${email.to}</p> <p class="text-sm text-gray-600 mb-2">To: ${email.to}</p>
${email.cc ? `<p class="text-sm text-gray-600 mb-2">Cc: ${email.cc}</p>` : ''} ${email.cc ? `<p class="text-sm text-gray-600 mb-2">Cc: ${email.cc}</p>` : ''}
</div> <div class="mt-4 prose-sm">${content}</div>
<div class="email-content" dir="auto">
${content}
</div> </div>
</div> </div>
`; `;
} else { } else {
formattedContent = ` formattedContent = `
<div class="email-container" dir="ltr"> <div class="prose max-w-none" dir="ltr">
<div class="email-header" dir="ltr"> <div class="border-l-4 border-gray-300 pl-4 my-4">
<p class="text-sm text-gray-600 mb-2">On ${new Date(email.date).toLocaleString()}, ${email.from} wrote:</p> <p class="text-sm text-gray-600 mb-2">On ${new Date(email.date).toLocaleString()}, ${email.from} wrote:</p>
</div> <div class="mt-4 prose-sm">${content}</div>
<div class="email-content" dir="auto">
${content}
</div> </div>
</div> </div>
`; `;
@ -1413,10 +1393,6 @@ export default function CourrierPage() {
const handleReply = (type: 'reply' | 'reply-all' | 'forward') => { const handleReply = (type: 'reply' | 'reply-all' | 'forward') => {
if (!selectedEmail) return; if (!selectedEmail) return;
// Phase 1: Format the original email content
const originalContent = getReplyBody(selectedEmail, type);
// Phase 2: Set up the composition interface
const getReplyTo = () => { const getReplyTo = () => {
if (type === 'forward') return ''; if (type === 'forward') return '';
return selectedEmail.from; return selectedEmail.from;
@ -1435,11 +1411,14 @@ export default function CourrierPage() {
return subject.startsWith('Re:') ? subject : `Re: ${subject}`; return subject.startsWith('Re:') ? subject : `Re: ${subject}`;
}; };
// Get the formatted original email content
const originalContent = getReplyBody(selectedEmail, type);
// Update the compose form with the reply content // Update the compose form with the reply content
setComposeTo(getReplyTo()); setComposeTo(getReplyTo());
setComposeCc(getReplyCc()); setComposeCc(getReplyCc());
setComposeSubject(getReplySubject()); setComposeSubject(getReplySubject());
setComposeBody(''); // Start with empty body for new content setComposeBody('');
setComposeBcc(''); setComposeBcc('');
// Show the compose form and CC field for Reply All // Show the compose form and CC field for Reply All
@ -1448,11 +1427,10 @@ export default function CourrierPage() {
setShowBcc(false); setShowBcc(false);
setAttachments([]); setAttachments([]);
// Pass the formatted original email content to the compose modal // Pass the original email content to the compose modal
setOriginalEmail({ setOriginalEmail({
content: originalContent, content: originalContent,
type type
});
}; };
// Add the confirmation dialog component // Add the confirmation dialog component

19
components/ComposeEmail.tsx
View File

@ -68,21 +68,7 @@ export default function ComposeEmail({
const handleInput = (e: React.FormEvent<HTMLDivElement>) => { const handleInput = (e: React.FormEvent<HTMLDivElement>) => {
if (composeBodyRef.current) { if (composeBodyRef.current) {
// Get the current content const encodedContent = encodeComposeContent(composeBodyRef.current.innerHTML);
const content = composeBodyRef.current.innerHTML;
// Create a temporary div to parse the content
const tempDiv = document.createElement('div');
tempDiv.innerHTML = content;
// Check if the content contains RTL text
const hasRTL = /[\u0591-\u07FF\u200F\u202B\u202E\uFB1D-\uFDFD\uFE70-\uFEFC]/.test(content);
// Set the appropriate direction
composeBodyRef.current.dir = hasRTL ? 'rtl' : 'ltr';
// Encode the content
const encodedContent = encodeComposeContent(content);
setComposeBody(encodedContent); setComposeBody(encodedContent);
} }
}; };
@ -267,10 +253,11 @@ export default function ComposeEmail({
className="w-full h-full mt-1 bg-white border border-gray-300 rounded-md p-2 text-gray-900 overflow-y-auto" className="w-full h-full mt-1 bg-white border border-gray-300 rounded-md p-2 text-gray-900 overflow-y-auto"
style={{ style={{
minHeight: '200px', minHeight: '200px',
direction: 'ltr',
textAlign: 'left', textAlign: 'left',
unicodeBidi: 'bidi-override' unicodeBidi: 'bidi-override'
}} }}
dir="auto" dir="ltr"
/> />
</div> </div>
</div> </div>