courrier clean 2

components/email/ComposeEmail.tsx

@@ -269,15 +269,10 @@ export default function ComposeEmail(props: ComposeEmailAllProps) {
         
         setSubject(formattedEmail.subject);
         
-        // Split the formatted body to separate user's message area from quoted content
+        // Make the entire content editable, just like with forwarded emails
         const bodyContent = formattedEmail.body;
+        setUserMessage(bodyContent);
         setBody(bodyContent);
-        
-        // Set the original content for the quoted part
-        const quoteMatch = bodyContent.match(/<blockquote[^>]*>([\s\S]*?)<\/blockquote>/i);
-        if (quoteMatch && quoteMatch[0]) {
-          setOriginalContent(quoteMatch[0]);
-        }
       }
       
       // Focus editor after initializing
@@ -418,12 +413,12 @@ export default function ComposeEmail(props: ComposeEmailAllProps) {
         );
       }
       
-      // Store the complete forwarded content in state
+      // In forwarding, we'll make the entire content editable, not just the user message area
-      const forwardedContent = `${headerHtml}<div class="forwarded-content">${contentHtml}</div>`;
+      const completeContent = `<br/>${headerHtml}<div class="forwarded-content" style="color: #333;">${contentHtml}</div>`;
-      setOriginalContent(forwardedContent);
       
-      // Set the complete body
+      // Don't separate original content, allow editing the entire body
-      setBody(`<div class="user-message"></div>${forwardedContent}`);
+      setUserMessage(completeContent);
+      setBody(completeContent);
       
     } catch (error) {
       console.error('Error formatting forwarded email:', error);
@@ -510,12 +505,11 @@ export default function ComposeEmail(props: ComposeEmailAllProps) {
   const handleEditorInput = (e: React.FormEvent<HTMLDivElement>) => {
     if (editorRef.current) {
       const content = editorRef.current.innerHTML;
-      setUserMessage(content);
       
-      // Preserve the exact original content formatting by keeping it separate
+      // For forwarded messages, the entire content is now editable
-      // This ensures nested forwards maintain their structure
+      // No need to separate user message from original content
-      const combined = `<div class="user-message" style="direction: ${isRTL ? 'rtl' : 'ltr'}; text-align: ${isRTL ? 'right' : 'left'};">${content}</div>${originalContent}`;
+      setUserMessage(content);
-      setBody(combined);
+      setBody(content);
     }
   };
 
@@ -639,7 +633,7 @@ export default function ComposeEmail(props: ComposeEmailAllProps) {
           
           {/* Email editor with clear separation between user message and original content */}
           <div className="border rounded-md overflow-hidden">
-            {/* User's message input area */}
+            {/* Combined editable area that includes both user message and original content */}
             <div
               ref={editorRef}
               contentEditable={!sending}
@@ -649,21 +643,8 @@ export default function ComposeEmail(props: ComposeEmailAllProps) {
                 direction: isRTL ? 'rtl' : 'ltr', 
                 textAlign: isRTL ? 'right' : 'left'
               }}
+              dangerouslySetInnerHTML={type !== 'new' ? { __html: body } : undefined}
             />
-            
-            {/* Original content display with visual separation - only shown for replies/forwards */}
-            {type !== 'new' && originalContent && (
-              <div className="border-t pt-2">
-                <div className="px-4 py-2 bg-gray-50 text-xs font-medium text-gray-500">
-                  {type === 'forward' ? 'Forwarded content' : 'Original message'}
-                </div>
-                <div 
-                  className="p-4 bg-gray-50 text-sm original-content"
-                  dangerouslySetInnerHTML={{ __html: originalContent }}
-                  style={{ opacity: 1.0 }}
-                />
-              </div>
-            )}
           </div>
         </div>