mail page fix design

components/ComposeEmail.tsx

@@ -64,15 +64,15 @@ export default function ComposeEmail({
     if (composeBodyRef.current) {
       const decodedContent = decodeComposeContent(composeBody);
       
-      // Create a structure with clear separation
+      // Create the clear structure with proper content
       composeBodyRef.current.innerHTML = `
-        <div id="new-reply-area" dir="ltr" style="margin-bottom: 20px; min-height: 40px;"></div>
+        <div id="new-reply-area" dir="ltr" style="margin-bottom: 20px; min-height: 40px; direction: ltr; text-align: left; unicode-bidi: normal;"></div>
-        <div class="original-email" dir="ltr" style="border-top: 1px solid #e0e0e0; padding-top: 10px; color: #555;">
+        <div class="original-email" dir="ltr" style="border-top: 1px solid #e0e0e0; padding-top: 10px; color: #555; direction: ltr; text-align: left; unicode-bidi: normal;">
           ${decodedContent}
         </div>
       `;
       
-      // Place cursor at the beginning of new reply area
+      // Place cursor in the new reply area
       const newReplyArea = composeBodyRef.current.querySelector('#new-reply-area');
       if (newReplyArea) {
         const range = document.createRange();
@@ -85,10 +85,31 @@ export default function ComposeEmail({
     }
   }, [composeBody]);
 
+  // Enhanced input handler to prevent text reversal
   const handleInput = (e: React.FormEvent<HTMLDivElement>) => {
     if (composeBodyRef.current) {
-      const encodedContent = encodeComposeContent(composeBodyRef.current.innerHTML);
+      // Get the current HTML content
-      setComposeBody(encodedContent);
+      const fullContent = e.currentTarget.innerHTML;
+      
+      // Split at the divider to separate new reply from original content
+      const parts = fullContent.split('<div class="original-email"');
+      
+      // Only update the first part (user's input) and preserve original email
+      if (parts.length > 1) {
+        // Extract user-typed content (ensuring it's not reversed)
+        const userContent = parts[0];
+        
+        // Keep original content as is
+        const originalContent = '<div class="original-email"' + parts[1];
+        
+        // Update the compose body with encoded content
+        const encodedContent = encodeComposeContent(userContent + originalContent);
+        setComposeBody(encodedContent);
+      } else {
+        // If no original content yet, just encode the user's input
+        const encodedContent = encodeComposeContent(fullContent);
+        setComposeBody(encodedContent);
+      }
     }
   };
 
@@ -272,9 +293,12 @@ export default function ComposeEmail({
                 className="w-full h-full mt-1 bg-white border border-gray-300 rounded-md p-2 text-gray-900 overflow-y-auto"
                 style={{ 
                   minHeight: '200px',
-                  direction: 'ltr'  // Explicitly set direction
+                  direction: 'ltr',
+                  textAlign: 'left',
+                  unicodeBidi: 'normal'
                 }}
-                dir="ltr"  // Force left-to-right
+                dir="ltr"
+                spellCheck="true"
               />
             </div>
           </div>

lib/compose-mime-decoder.ts

@@ -6,7 +6,10 @@
 export function decodeComposeContent(content: string): string {
   if (!content) return '';
 
-  // Basic HTML cleaning
+  // Debug logging
+  console.log("Before decode:", content);
+
+  // Basic HTML cleaning without any string manipulation that could reverse text
   let cleaned = content
     // Remove script and style tags
     .replace(/<script[^>]*>[\s\S]*?<\/script>/gi, '')
@@ -57,20 +60,31 @@ export function decodeComposeContent(content: string): string {
     .replace(/\s+/g, ' ')
     .trim();
 
+  // Debug logging
+  console.log("After decode:", cleaned);
+
   // Ensure all content has proper direction
-  cleaned = `<div dir="ltr">${cleaned}</div>`;
+  cleaned = `<div dir="ltr" style="direction: ltr; text-align: left; unicode-bidi: normal;">${cleaned}</div>`;
   return cleaned;
 }
 
 export function encodeComposeContent(content: string): string {
   if (!content) return '';
 
-  // Basic HTML encoding
+  // Debug logging
-  return content
+  console.log("Before encode:", content);
+
+  // Basic HTML encoding without reversing
+  const encoded = content
     .replace(/&/g, '&amp;')
     .replace(/</g, '&lt;')
     .replace(/>/g, '&gt;')
     .replace(/"/g, '&quot;')
     .replace(/'/g, '&#39;')
     .replace(/\n/g, '<br>');
+
+  // Debug logging
+  console.log("After encode:", encoded);
+
+  return encoded;
 }