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 20:40:29 +02:00
parent 0b4e0cd233
commit e2b1018073
3 changed files with 35 additions and 26 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

26
app/courrier/page.tsx
View File

@ -399,27 +399,27 @@ function getReplyBody(email: Email, type: 'reply' | 'reply-all' | 'forward' = 'r
// Clean and sanitize HTML content
content = cleanHtml(content);
// Format the reply/forward content
// Format the reply/forward content with proper direction
let formattedContent = '';
if (type === 'forward') {
formattedContent = `
<div class="prose max-w-none" 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">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">To: ${email.to}</p>
${email.cc ? `<p class="text-sm text-gray-600 mb-2">Cc: ${email.cc}</p>` : ''}
<div class="mt-4 prose-sm">${content}</div>
<div class="prose max-w-none" dir="ltr" style="direction: ltr; text-align: left; unicode-bidi: bidi-override">
<div class="border-l-4 border-gray-300 pl-4 my-4" dir="ltr">
<p class="text-sm text-gray-600 mb-2" dir="ltr">Forwarded message from ${email.from}</p>
<p class="text-sm text-gray-600 mb-2" dir="ltr">Date: ${new Date(email.date).toLocaleString()}</p>
<p class="text-sm text-gray-600 mb-2" dir="ltr">Subject: ${email.subject}</p>
<p class="text-sm text-gray-600 mb-2" dir="ltr">To: ${email.to}</p>
${email.cc ? `<p class="text-sm text-gray-600 mb-2" dir="ltr">Cc: ${email.cc}</p>` : ''}
<div class="mt-4 prose-sm" dir="ltr">${content}</div>
</div>
</div>
`;
} else {
formattedContent = `
<div class="prose max-w-none" 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>
<div class="mt-4 prose-sm">${content}</div>
<div class="prose max-w-none" dir="ltr" style="direction: ltr; text-align: left; unicode-bidi: bidi-override">
<div class="border-l-4 border-gray-300 pl-4 my-4" dir="ltr">
<p class="text-sm text-gray-600 mb-2" dir="ltr">On ${new Date(email.date).toLocaleString()}, ${email.from} wrote:</p>
<div class="mt-4 prose-sm" dir="ltr">${content}</div>
</div>
</div>
`;

20
components/ComposeEmail.tsx
View File

@ -56,13 +56,26 @@ export default function ComposeEmail({
useEffect(() => {
if (composeBodyRef.current) {
const decodedContent = decodeComposeContent(composeBody);
composeBodyRef.current.innerHTML = decodedContent;
composeBodyRef.current.innerHTML = decodedContent
.replace(/<div[^>]*>/g, '<div dir="ltr" style="direction: ltr; text-align: left; unicode-bidi: bidi-override">')
.replace(/<p[^>]*>/g, '<p dir="ltr" style="direction: ltr; text-align: left; unicode-bidi: bidi-override">');
}
}, [composeBody]);
const handleInput = (e: React.FormEvent<HTMLDivElement>) => {
if (composeBodyRef.current) {
const encodedContent = encodeComposeContent(composeBodyRef.current.innerHTML);
const content = composeBodyRef.current.innerHTML
.replace(/<br>/g, '<br>')
.replace(/<p>/g, '<p>')
.replace(/<\/p>/g, '</p>')
.replace(/<div>/g, '<div>')
.replace(/<\/div>/g, '</div>')
.replace(/<span>/g, '<span>')
.replace(/<\/span>/g, '</span>');
const encodedContent = encodeComposeContent(
`<div dir="ltr" style="direction: ltr; text-align: left; unicode-bidi: bidi-override">${content}</div>`
);
setComposeBody(encodedContent);
}
};
@ -229,6 +242,9 @@ export default function ComposeEmail({
unicodeBidi: 'bidi-override'
}}
dir="ltr"
data-gramm="false"
data-gramm_editor="false"
data-enable-grammarly="false"
/>
</div>
</div>

15
lib/compose-mime-decoder.ts
View File

@ -6,10 +6,6 @@
export function decodeComposeContent(content: string): string {
if (!content) return '';
// Simple text direction detection
const hasRtlChars = /[\u0591-\u07FF\u200F\u202B\u202E\uFB1D-\uFDFD\uFE70-\uFEFC]/.test(content);
const direction = hasRtlChars ? 'rtl' : 'ltr';
// Basic HTML cleaning
let cleaned = content
// Remove script and style tags
@ -20,11 +16,8 @@ export function decodeComposeContent(content: string): string {
// Remove head and title
.replace(/<head[^>]*>[\s\S]*?<\/head>/gi, '')
.replace(/<title[^>]*>[\s\S]*?<\/title>/gi, '')
// Preserve body attributes
.replace(/<body[^>]*>/gi, (match) => {
const dir = match.match(/dir=["'](rtl|ltr)["']/i)?.[1] || direction;
return `<body dir="${dir}">`;
})
// Force LTR direction
.replace(/<body[^>]*>/gi, '<body dir="ltr">')
.replace(/<\/body>/gi, '')
// Remove html tags
.replace(/<html[^>]*>/gi, '')
@ -64,8 +57,8 @@ export function decodeComposeContent(content: string): string {
.replace(/\s+/g, ' ')
.trim();
// Wrap in a div with proper direction
return `<div dir="${direction}" style="direction: ${direction}; text-align: ${direction === 'rtl' ? 'right' : 'left'}">${cleaned}</div>`;
// Wrap in a div with forced LTR direction
return `<div dir="ltr" style="direction: ltr; text-align: left">${cleaned}</div>`;
}
export function encodeComposeContent(content: string): string {