diff --git a/components/email/ComposeEmail.tsx b/components/email/ComposeEmail.tsx index 5eeca9bc..12fe16a0 100644 --- a/components/email/ComposeEmail.tsx +++ b/components/email/ComposeEmail.tsx @@ -266,29 +266,56 @@ export default function ComposeEmail(props: ComposeEmailAllProps) { // Handle editor input with improved support for direction const handleEditorInput = () => { if (editorRef.current) { - // Ensure text direction attributes are maintained + // Store the current selection/cursor position + const selection = window.getSelection(); + const range = selection?.getRangeAt(0); + const offset = range?.startOffset || 0; + const container = range?.startContainer; + + // Maintain consistent direction attributes editorRef.current.dir = isRTL ? 'rtl' : 'ltr'; editorRef.current.style.textAlign = isRTL ? 'right' : 'left'; editorRef.current.style.direction = isRTL ? 'rtl' : 'ltr'; - // Capture innerHTML + // Capture the content setEmailContent(editorRef.current.innerHTML); + + // Try to restore the cursor position after React updates + setTimeout(() => { + try { + if (selection && range && container && editorRef.current && editorRef.current.contains(container)) { + const newRange = document.createRange(); + newRange.setStart(container, offset); + newRange.collapse(true); + selection.removeAllRanges(); + selection.addRange(newRange); + } + } catch (e) { + console.error('Error restoring cursor position:', e); + } + }, 0); } }; // Toggle text direction for the entire editor const toggleTextDirection = () => { - // Toggle the RTL state - const newRTL = !isRTL; - setIsRTL(newRTL); + // Since we're only writing in English, we'll simplify this function to just use LTR + setIsRTL(false); - // Apply the direction to the editor content immediately if (editorRef.current) { - // 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'; - // Don't set unicodeBidi here which can cause text reversal problems + // Save current content + const content = editorRef.current.innerHTML; + + // Set to LTR mode only + editorRef.current.dir = 'ltr'; + editorRef.current.style.textAlign = 'left'; + editorRef.current.style.direction = 'ltr'; + + // Update state + setEmailContent(editorRef.current.innerHTML); + + // Focus the editor again + editorRef.current.focus(); } };