courrier clean 2$

components/email/ComposeEmail.tsx

@@ -186,9 +186,15 @@ export default function ComposeEmail(props: ComposeEmailAllProps) {
           setEmailContent(content);
         }
         
-        // Focus editor after initializing
+        // Focus editor after initializing content
         setTimeout(() => {
-          if (editorRef.current) {
+          // For new messages, focus the textarea
+          if (!type || type === 'new') {
+            const textarea = document.querySelector('textarea');
+            textarea?.focus();
+          } 
+          // For replies/forwards, focus the contentEditable div
+          else if (['reply', 'reply-all', 'forward'].includes(type) && editorRef.current) {
             editorRef.current.focus();
             
             try {
@@ -288,6 +294,11 @@ export default function ComposeEmail(props: ComposeEmailAllProps) {
     }, 0);
   };
 
+  // Add a handler for textarea changes
+  const handleTextareaChange = (e: React.ChangeEvent<HTMLTextAreaElement>) => {
+    setEmailContent(e.target.value);
+  };
+
   // Send email
   const handleSend = async () => {
     if (!to) {
@@ -298,12 +309,18 @@ export default function ComposeEmail(props: ComposeEmailAllProps) {
     try {
       setSending(true);
       
+      // For new emails, emailContent is already set via onChange
+      // For replies/forwards, we need to get content from editorRef
+      const finalContent = type === 'new' 
+        ? emailContent 
+        : editorRef.current?.innerHTML || emailContent;
+      
       await onSend({
         to,
         cc: cc || undefined,
         bcc: bcc || undefined,
         subject,
-        body: emailContent,
+        body: finalContent,
         attachments
       });
       
@@ -411,21 +428,39 @@ export default function ComposeEmail(props: ComposeEmailAllProps) {
           </div>
         </div>
         
-        {/* Email Body Editor - using same approach as Input components */}
+        {/* Email Body Editor - different approach based on type */}
         <div className="space-y-2">
           <div className="flex items-center justify-between">
             <label htmlFor="body" className="text-sm font-medium">Message</label>
           </div>
           
-          <div className="border rounded-md overflow-hidden">
-            <textarea
-              value={emailContent}
-              onChange={(e) => setEmailContent(e.target.value)}
-              className="w-full p-4 min-h-[300px] focus:outline-none resize-none"
-              placeholder="Write your message here..."
-              disabled={sending}
-            />
-          </div>
+          {/* For new emails, use textarea for better text direction */}
+          {type === 'new' ? (
+            <div className="border rounded-md overflow-hidden">
+              <textarea
+                value={emailContent}
+                onChange={handleTextareaChange}
+                className="w-full p-4 min-h-[300px] focus:outline-none resize-none"
+                placeholder="Write your message here..."
+                disabled={sending}
+              />
+            </div>
+          ) : (
+            /* For replies and forwards, use contentEditable to preserve formatting */
+            <div className="border rounded-md overflow-hidden">
+              <div
+                ref={editorRef}
+                contentEditable={!sending}
+                className="w-full p-4 min-h-[300px] focus:outline-none"
+                onInput={handleEditorInput}
+                dangerouslySetInnerHTML={{ __html: emailContent }}
+                dir="auto"
+                style={{ 
+                  textAlign: 'initial',
+                }}
+              />
+            </div>
+          )}
         </div>
         
         {/* Attachments section */}