diff --git a/components/email/ComposeEmail.tsx b/components/email/ComposeEmail.tsx index 5eb9a5cb..da2919f7 100644 --- a/components/email/ComposeEmail.tsx +++ b/components/email/ComposeEmail.tsx @@ -220,6 +220,20 @@ function isLegacyProps(props: ComposeEmailAllProps): props is LegacyComposeEmail return 'showCompose' in props && 'setShowCompose' in props; } +// Create a utility function to preprocess email content +function preprocessEmailContent(content: string): string { + if (!content) return ''; + + // Sanitize HTML content + const sanitized = DOMPurify.sanitize(content); + + // Fix common RTL/LTR issues by ensuring consistent direction + // Wrap content in a div with explicit direction if needed + const processed = sanitized.replace(/

-
+
-
---------- Forwarded message ---------
-
From: ${fromString}
-
Date: ${dateString}
-
Subject: ${initialEmail.subject || ''}
-
To: ${toString}
+
---------- Forwarded message ---------
+
From: ${fromString}
+
Date: ${dateString}
+
Subject: ${initialEmail.subject || ''}
+
To: ${toString}
-
${originalContent}
+
${originalContent}
`; @@ -312,11 +329,12 @@ export default function ComposeEmail(props: ComposeEmailAllProps) { setSubject(formattedEmail.subject); - // Set the reply content with proper formatting - formattedContent = formattedEmail.body; + // Process content to fix direction issues + formattedContent = preprocessEmailContent(formattedEmail.body); } // Set the entire content as one editable area + // Force LTR direction for quoted content setBody(formattedContent); setUserMessage(formattedContent); @@ -324,20 +342,27 @@ export default function ComposeEmail(props: ComposeEmailAllProps) { setTimeout(() => { if (editorRef.current) { editorRef.current.focus(); + editorRef.current.dir = isRTL ? 'rtl' : 'ltr'; // Place cursor at the beginning of the content const selection = window.getSelection(); - const range = document.createRange(); - - range.setStart(editorRef.current, 0); - range.collapse(true); - - selection?.removeAllRanges(); - selection?.addRange(range); + if (selection) { + const range = document.createRange(); + + // Find the first text node or element node + let firstNode = editorRef.current.firstChild; + if (firstNode) { + range.setStart(firstNode, 0); + range.collapse(true); + + selection.removeAllRanges(); + selection.addRange(range); + } + } } }, 100); } - }, [initialEmail, type]); + }, [initialEmail, type, isRTL]); // Format date for the forwarded message header const formatDate = (date: Date | null): string => { @@ -649,13 +674,15 @@ export default function ComposeEmail(props: ComposeEmailAllProps) {
@@ -667,8 +694,8 @@ export default function ComposeEmail(props: ComposeEmailAllProps) { className="w-full p-4 min-h-[300px] focus:outline-none" onInput={handleEditorInput} dangerouslySetInnerHTML={{ __html: DOMPurify.sanitize(body) }} + dir={isRTL ? 'rtl' : 'ltr'} style={{ - direction: isRTL ? 'rtl' : 'ltr', textAlign: isRTL ? 'right' : 'left' }} />