From 47ec859fe2a8ec65258cb02e1dad418ea148fcfe Mon Sep 17 00:00:00 2001 From: alma Date: Mon, 21 Apr 2025 20:26:23 +0200 Subject: [PATCH] mail page fix design --- components/ComposeEmail.tsx | 7 ++-- lib/infomaniak-mime-decoder.ts | 76 +++++++++++++--------------------- 2 files changed, 32 insertions(+), 51 deletions(-) diff --git a/components/ComposeEmail.tsx b/components/ComposeEmail.tsx index a6f7c965..8d97f599 100644 --- a/components/ComposeEmail.tsx +++ b/components/ComposeEmail.tsx @@ -231,11 +231,10 @@ 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 prose max-w-none" style={{ minHeight: '200px', - direction: 'ltr', - textAlign: 'left', - unicodeBidi: 'bidi-override' + direction: 'inherit' as const, + textAlign: 'start', + unicodeBidi: 'plaintext' }} - dir="ltr" /> diff --git a/lib/infomaniak-mime-decoder.ts b/lib/infomaniak-mime-decoder.ts index 9117b766..86ee9401 100644 --- a/lib/infomaniak-mime-decoder.ts +++ b/lib/infomaniak-mime-decoder.ts @@ -86,6 +86,10 @@ export function convertCharset(text: string, charset: string): string { export function cleanHtml(html: string): string { if (!html) return ''; + // Detect text direction from the content + const hasRtlChars = /[\u0591-\u07FF\u200F\u202B\u202E\uFB1D-\uFDFD\uFE70-\uFEFC]/.test(html); + const defaultDir = hasRtlChars ? 'rtl' : 'ltr'; + // Remove or fix malformed URLs html = html.replace(/=3D"(http[^"]+)"/g, (match, url) => { try { @@ -100,7 +104,7 @@ export function cleanHtml(html: string): string { return String.fromCharCode(parseInt(p1, 16)); }); - // Clean up any remaining HTML issues + // Clean up any remaining HTML issues while preserving direction html = html // Remove style and script tags .replace(/]*>[\s\S]*?<\/style>/gi, '') @@ -110,7 +114,11 @@ export function cleanHtml(html: string): string { .replace(/]*>/gi, '') .replace(/]*>[\s\S]*?<\/title>/gi, '') .replace(/]*>[\s\S]*?<\/head>/gi, '') - .replace(/]*>/gi, '') + // Preserve body attributes + .replace(/]*>/gi, (match) => { + const dir = match.match(/dir=["'](rtl|ltr)["']/i)?.[1] || defaultDir; + return ``; + }) .replace(/<\/body>/gi, '') .replace(/]*>/gi, '') .replace(/<\/html>/gi, '') @@ -123,31 +131,25 @@ export function cleanHtml(html: string): string { .replace(/<\/td>/gi, ' ') .replace(/]*>/gi, ' ') .replace(/<\/th>/gi, ' ') - .replace(/]*>/gi, '') - .replace(/<\/tbody>/gi, '') - .replace(/]*>/gi, '') - .replace(/<\/thead>/gi, '') - .replace(/]*>/gi, '') - .replace(/<\/tfoot>/gi, '') - // Handle other structural elements - .replace(//gi, '\n') - .replace(/]*>/gi, '\n') - .replace(/<\/div>/gi, '\n') - .replace(/]*>/gi, '\n') - .replace(/<\/p>/gi, '\n') - .replace(/]*>/gi, '\n') - .replace(/<\/h[1-6]>/gi, '\n') + // Handle lists .replace(/]*>/gi, '\n') .replace(/<\/ul>/gi, '\n') .replace(/]*>/gi, '\n') .replace(/<\/ol>/gi, '\n') - .replace(/]*>/gi, '\n• ') + .replace(/]*>/gi, '• ') .replace(/<\/li>/gi, '\n') - .replace(/]*>/gi, '\n> ') - .replace(/<\/blockquote>/gi, '\n') + // Handle other block elements + .replace(/]*>/gi, '\n') + .replace(/<\/div>/gi, '\n') + .replace(/]*>/gi, '\n') + .replace(/<\/p>/gi, '\n') + .replace(/]*>/gi, '\n') + .replace(/]*>/gi, '\n') // Handle inline elements .replace(/]*>/gi, '') .replace(/<\/span>/gi, '') + .replace(/]*>/gi, '') + .replace(/<\/a>/gi, '') .replace(/]*>/gi, '**') .replace(/<\/strong>/gi, '**') .replace(/]*>/gi, '**') @@ -156,39 +158,19 @@ export function cleanHtml(html: string): string { .replace(/<\/em>/gi, '*') .replace(/]*>/gi, '*') .replace(/<\/i>/gi, '*') - // Handle HTML entities + // Handle special characters .replace(/ /g, ' ') - .replace(/‌/g, '') - .replace(/»/g, '»') - .replace(/«/g, '«') - .replace(/>/g, '>') - .replace(/</g, '<') .replace(/&/g, '&') + .replace(/</g, '<') + .replace(/>/g, '>') .replace(/"/g, '"') - .replace(/é/g, 'é') - .replace(/è/g, 'è') - .replace(/ê/g, 'ê') - .replace(/ë/g, 'ë') - .replace(/à/g, 'à') - .replace(/â/g, 'â') - .replace(/ä/g, 'ä') - .replace(/î/g, 'î') - .replace(/ï/g, 'ï') - .replace(/ô/g, 'ô') - .replace(/ö/g, 'ö') - .replace(/û/g, 'û') - .replace(/ü/g, 'ü') - .replace(/ç/g, 'ç') - .replace(/Œ/g, 'Œ') - .replace(/œ/g, 'œ') - .replace(/Æ/g, 'Æ') - .replace(/æ/g, 'æ') + .replace(/'/g, "'") // Clean up whitespace - .replace(/^\s+$/gm, '') - .replace(/\n{3,}/g, '\n\n') + .replace(/\s+/g, ' ') .trim(); - - return html; + + // Wrap in a div with the detected direction + return `
${html}
`; } export function parseEmailHeaders(headers: string): { contentType: string; encoding: string; charset: string } {