courrier clean 2

components/email/ComposeEmail.tsx

@@ -256,10 +256,51 @@ export default function ComposeEmail(props: ComposeEmailAllProps) {
   // Initialize the form when replying to or forwarding an email
   useEffect(() => {
     if (initialEmail && type !== 'new') {
+      // For all types of emails, format with a consistent approach
+      let formattedContent = '';
+      
       if (type === 'forward') {
-        initializeForwardedEmail();
+        // Format subject with Fwd: prefix if needed
+        const subjectBase = initialEmail.subject || '(No subject)';
+        const subjectRegex = /^(Fwd|FW|Forward):\s*/i;
+        const subject = subjectRegex.test(subjectBase) 
+          ? subjectBase 
+          : `Fwd: ${subjectBase}`;
+        
+        setSubject(subject);
+        
+        // Format forwarded content
+        const fromString = initialEmail.from?.map(addr => 
+          addr.name ? `${addr.name} <${addr.address}>` : addr.address
+        ).join(', ') || '';
+        
+        const toString = initialEmail.to?.map(addr => 
+          addr.name ? `${addr.name} <${addr.address}>` : addr.address
+        ).join(', ') || '';
+        
+        const dateString = typeof initialEmail.date === 'string'
+          ? new Date(initialEmail.date).toLocaleString()
+          : initialEmail.date.toLocaleString();
+        
+        const originalContent = initialEmail.content || initialEmail.html || initialEmail.text || '';
+        
+        formattedContent = `
+          <br><br>
+          <div style="border-top: 1px solid #ccc; margin-top: 20px; padding-top: 10px;">
+            <div style="font-family: Arial, sans-serif; color: #333;">
+              <div style="margin-bottom: 15px;">
+                <div>---------- Forwarded message ---------</div>
+                <div><b>From:</b> ${fromString}</div>
+                <div><b>Date:</b> ${dateString}</div>
+                <div><b>Subject:</b> ${initialEmail.subject || ''}</div>
+                <div><b>To:</b> ${toString}</div>
+              </div>
+              <div>${originalContent}</div>
+            </div>
+          </div>
+        `;
       } else {
-        // For reply/reply-all, continue using formatEmailForReplyOrForward
+        // For reply/reply-all
         const formattedEmail = formatEmailForReplyOrForward(initialEmail, type as 'reply' | 'reply-all');
         
         setTo(formattedEmail.to);
@@ -271,12 +312,14 @@ export default function ComposeEmail(props: ComposeEmailAllProps) {
         
         setSubject(formattedEmail.subject);
         
-        // Make the entire content editable, just like with forwarded emails
+        // Set the reply content with proper formatting
-        const bodyContent = formattedEmail.body;
+        formattedContent = formattedEmail.body;
-        setUserMessage(bodyContent);
-        setBody(bodyContent);
       }
       
+      // Set the entire content as one editable area
+      setBody(formattedContent);
+      setUserMessage(formattedContent);
+      
       // Focus editor after initializing
       setTimeout(() => {
         if (editorRef.current) {
@@ -460,7 +503,7 @@ export default function ComposeEmail(props: ComposeEmailAllProps) {
     }
   };
 
-  // Modified send handler to combine user message with forwarded content
+  // Modified send handler to use the entire body content
   const handleSend = async () => {
     if (!to) {
       alert('Please specify at least one recipient');
@@ -470,50 +513,13 @@ export default function ComposeEmail(props: ComposeEmailAllProps) {
     try {
       setSending(true);
       
-      // Prepare the complete email body
+      // Use the complete edited content as is
-      let finalBody = body;
-      
-      if (type === 'forward' && originalContent) {
-        // For forwarded emails, construct the email in a standard format
-        const fromString = initialEmail?.from?.map(addr => 
-          addr.name ? `${addr.name} <${addr.address}>` : addr.address
-        ).join(', ') || '';
-        
-        const toString = initialEmail?.to?.map(addr => 
-          addr.name ? `${addr.name} <${addr.address}>` : addr.address
-        ).join(', ') || '';
-        
-        const dateString = initialEmail?.date 
-          ? typeof initialEmail.date === 'string'
-            ? new Date(initialEmail.date).toLocaleString()
-            : initialEmail.date.toLocaleString()
-          : '';
-        
-        // Combine user message with forwarded header and content
-        finalBody = `
-          ${userMessage}
-          <br><br>
-          <div style="border-top: 1px solid #ccc; margin-top: 20px; padding-top: 10px;">
-            <div style="font-family: Arial, sans-serif; color: #333;">
-              <div style="margin-bottom: 15px;">
-                <div>---------- Forwarded message ---------</div>
-                <div><b>From:</b> ${fromString}</div>
-                <div><b>Date:</b> ${dateString}</div>
-                <div><b>Subject:</b> ${initialEmail?.subject || ''}</div>
-                <div><b>To:</b> ${toString}</div>
-              </div>
-              <div>${originalContent}</div>
-            </div>
-          </div>
-        `;
-      }
-      
       await onSend({
         to,
         cc: cc || undefined,
         bcc: bcc || undefined,
         subject,
-        body: finalBody,
+        body: userMessage, // Use the full edited message
         attachments
       });
       
@@ -526,7 +532,7 @@ export default function ComposeEmail(props: ComposeEmailAllProps) {
     }
   };
 
-  // Handle editor input
+  // Handle editor input for the entire content
   const handleEditorInput = (e: React.FormEvent<HTMLDivElement>) => {
     if (editorRef.current) {
       const content = editorRef.current.innerHTML;
@@ -653,53 +659,19 @@ export default function ComposeEmail(props: ComposeEmailAllProps) {
             </Button>
           </div>
           
-          {/* Email editor with clear separation between user message and original content */}
+          {/* Email editor with a single editable area for the entire message */}
           <div className="border rounded-md overflow-hidden">
-            {/* User's editable message area */}
             <div
               ref={editorRef}
               contentEditable={!sending}
-              className="w-full p-4 min-h-[100px] focus:outline-none"
+              className="w-full p-4 min-h-[300px] focus:outline-none"
               onInput={handleEditorInput}
+              dangerouslySetInnerHTML={{ __html: DOMPurify.sanitize(body) }}
               style={{ 
                 direction: isRTL ? 'rtl' : 'ltr', 
                 textAlign: isRTL ? 'right' : 'left'
               }}
             />
-            
-            {/* Original content display with visual separation */}
-            {type !== 'new' && originalContent && (
-              <div className="border-t">
-                <div className="px-4 py-2 bg-gray-50 text-xs font-medium text-gray-500 flex justify-between items-center">
-                  <span>{type === 'forward' ? 'Forwarded content (original)' : 'Original message'}</span>
-                  <Button 
-                    variant="ghost" 
-                    size="sm" 
-                    onClick={toggleEditOriginalContent} 
-                    className="h-6 px-2 text-xs"
-                  >
-                    {editingOriginalContent ? 'Done Editing' : 'Edit Content'}
-                  </Button>
-                </div>
-                <div className="p-4 bg-gray-50 border-t overflow-auto max-h-[400px]">
-                  {editingOriginalContent ? (
-                    <div 
-                      ref={originalContentRef}
-                      contentEditable={true}
-                      className="forwarded-content text-sm outline-none" 
-                      dangerouslySetInnerHTML={{ __html: DOMPurify.sanitize(originalContent) }}
-                      onInput={handleOriginalContentInput}
-                    />
-                  ) : (
-                    <div 
-                      className="forwarded-content text-sm cursor-text" 
-                      dangerouslySetInnerHTML={{ __html: DOMPurify.sanitize(originalContent) }}
-                      onClick={handleOriginalContentClick}
-                    />
-                  )}
-                </div>
-              </div>
-            )}
           </div>
         </div>