From 4bf9fcc165e0c0a37f54340be8d8a7962aeab4c3 Mon Sep 17 00:00:00 2001 From: alma Date: Sat, 26 Apr 2025 20:47:03 +0200 Subject: [PATCH] courrier clean 2$ --- README.md | 3 ++ components/email/ComposeEmail.tsx | 49 +++++++++++++++++++++++-------- 2 files changed, 39 insertions(+), 13 deletions(-) diff --git a/README.md b/README.md index 1f9a6e27..ff3141ae 100644 --- a/README.md +++ b/README.md @@ -68,6 +68,7 @@ All email formatting is now handled by a centralized formatter in `lib/utils/ema - Text direction (RTL/LTR) - HTML sanitization - Content formatting for forwards and replies +- MIME encoding and decoding for email composition ### Key Functions @@ -75,5 +76,7 @@ All email formatting is now handled by a centralized formatter in `lib/utils/ema - `formatReplyEmail`: Format emails for replying - `sanitizeHtml`: Sanitize HTML while preserving direction attributes - `formatEmailForReplyOrForward`: Compatibility function for both +- `decodeComposeContent`: Parse MIME content for email composition +- `encodeComposeContent`: Create MIME-formatted content for sending emails This centralized approach prevents formatting inconsistencies and direction problems when dealing with emails in different languages. \ No newline at end of file diff --git a/components/email/ComposeEmail.tsx b/components/email/ComposeEmail.tsx index 68d90eae..5eeca9bc 100644 --- a/components/email/ComposeEmail.tsx +++ b/components/email/ComposeEmail.tsx @@ -187,6 +187,12 @@ export default function ComposeEmail(props: ComposeEmailAllProps) { // Focus editor after initializing setTimeout(() => { if (editorRef.current) { + // First set the direction correctly on the editor + editorRef.current.dir = isRTL ? 'rtl' : 'ltr'; + editorRef.current.style.textAlign = isRTL ? 'right' : 'left'; + editorRef.current.style.direction = isRTL ? 'rtl' : 'ltr'; + + // Then focus and position cursor editorRef.current.focus(); try { @@ -196,6 +202,8 @@ export default function ComposeEmail(props: ComposeEmailAllProps) { const range = document.createRange(); if (editorRef.current.firstChild) { + // For RTL, place cursor at the right side (beginning for RTL) + // For LTR, place cursor at the left side (beginning for LTR) range.setStart(editorRef.current.firstChild, 0); range.collapse(true); @@ -212,7 +220,7 @@ export default function ComposeEmail(props: ComposeEmailAllProps) { console.error('Error formatting email:', error); } } - }, [initialEmail, type]); + }, [initialEmail, type, isRTL]); // Handle attachment selection const handleAttachmentClick = () => { @@ -255,10 +263,15 @@ export default function ComposeEmail(props: ComposeEmailAllProps) { setAttachments(current => current.filter((_, i) => i !== index)); }; - // Handle editor input without re-sanitizing content + // Handle editor input with improved support for direction const handleEditorInput = () => { if (editorRef.current) { - // Capture innerHTML directly without reapplying sanitization + // Ensure text direction attributes are maintained + editorRef.current.dir = isRTL ? 'rtl' : 'ltr'; + editorRef.current.style.textAlign = isRTL ? 'right' : 'left'; + editorRef.current.style.direction = isRTL ? 'rtl' : 'ltr'; + + // Capture innerHTML setEmailContent(editorRef.current.innerHTML); } }; @@ -271,12 +284,11 @@ export default function ComposeEmail(props: ComposeEmailAllProps) { // Apply the direction to the editor content immediately if (editorRef.current) { - // Preserve the content but update the direction attributes + // Update the direction attributes correctly - this ensures proper text behavior editorRef.current.dir = newRTL ? 'rtl' : 'ltr'; editorRef.current.style.textAlign = newRTL ? 'right' : 'left'; editorRef.current.style.direction = newRTL ? 'rtl' : 'ltr'; - - // No need to modify the content, just let the user edit with proper directionality + // Don't set unicodeBidi here which can cause text reversal problems } }; @@ -420,7 +432,7 @@ export default function ComposeEmail(props: ComposeEmailAllProps) { - {/* Email editor with a single editable area */} + {/* Email editor with correct text direction settings */}
@@ -532,19 +544,30 @@ function LegacyAdapter({ // Check if the user has RTL preference const [preferRTL, setPreferRTL] = useState(false); - // Detect RTL content in body on initialization + // Detect RTL content in body on initialization - improve detection logic useEffect(() => { if (!composeBody) return; + // Only detect RTL if we're creating a new message, not for replies/forwards + if (originalEmail) return; + // Better RTL detection based on common RTL languages (Arabic, Hebrew, Persian, Urdu, etc.) + // Look for substantial presence of RTL characters, not just any single RTL character const rtlRegex = /[\u0591-\u07FF\uFB1D-\uFDFD\uFE70-\uFEFC]/; - // If there are RTL characters, set preferRTL to true - if (rtlRegex.test(composeBody)) { + // Count RTL characters + const rtlCount = (composeBody.match(rtlRegex) || []).length; + + // Only set RTL mode if there's a significant number of RTL characters + // This prevents accidentally enabling RTL mode for text that just has a few RTL characters + if (rtlCount > 5) { + console.log('Significant RTL text detected - setting editor to RTL mode'); setPreferRTL(true); - console.log('RTL text detected - setting editor to RTL mode'); + } else { + // Keep the default LTR mode for Latin/English text + setPreferRTL(false); } - }, [composeBody]); + }, [composeBody, originalEmail]); // Determine the type from the original email or subject const determineType = (): 'new' | 'reply' | 'reply-all' | 'forward' => {