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 */}