courrier preview

components/email/ComposeEmail.tsx

@@ -317,12 +317,39 @@ export default function ComposeEmail(props: ComposeEmailProps) {
     setSending(true);
     
     try {
+      // Generate the final email content
+      let finalContent = emailContent;
+      
+      // For reply or forward, combine the user's new content with the quoted content
+      if (type === 'reply' || type === 'reply-all' || type === 'forward') {
+        // Get the new content from the editor
+        const editorContent = document.querySelector('.ql-editor')?.innerHTML || '';
+        
+        // Get the original header (either reply or forward header)
+        const headerContent = type === 'forward' 
+          ? emailContent.split('<blockquote')[0] || '---------- Forwarded message ----------'
+          : emailContent.split('<blockquote')[0] || `On ${new Date().toLocaleString()}, Someone wrote:`;
+        
+        // Get the quoted content
+        const quotedMatch = emailContent.match(/<blockquote[^>]*>([\s\S]*?)<\/blockquote>/i);
+        const quotedContent = quotedMatch ? quotedMatch[0] : '';
+        
+        // Combine them
+        finalContent = `
+          <div>
+            ${editorContent}
+          </div>
+          ${headerContent}
+          ${quotedContent}
+        `;
+      }
+      
       await onSend({
         to,
         cc: cc || undefined,
         bcc: bcc || undefined,
         subject,
-        body: emailContent,
+        body: finalContent,
         fromAccount: selectedAccount?.id,
         attachments
       });
@@ -483,14 +510,75 @@ export default function ComposeEmail(props: ComposeEmailProps) {
           </div>
           
           {/* Message Body */}
-          <RichEmailEditor
-            initialContent={emailContent}
-            onChange={handleContentChange}
-            placeholder="Write your message here..."
-            preserveFormatting={type === 'forward' || type === 'reply' || type === 'reply-all'}
-            minHeight="200px"
-            maxHeight="calc(100vh - 400px)"
-          />
+          {(type === 'forward' || type === 'reply' || type === 'reply-all') ? (
+            <div className="flex flex-col w-full email-compose-container">
+              {/* Editable area for user's reply */}
+              <div className="border-b pb-2 mb-2">
+                <RichEmailEditor
+                  initialContent=""
+                  onChange={handleContentChange}
+                  placeholder="Write your message here..."
+                  minHeight="150px"
+                  maxHeight="250px"
+                />
+              </div>
+              
+              {/* Read-only display of original email with professional formatting */}
+              <div className="original-email-content">
+                {type === 'reply' || type === 'reply-all' ? (
+                  <div className="reply-header text-gray-600 text-sm border-b pb-1 mb-2">
+                    {/* Get the reply header from the email content */}
+                    {initialEmail && (
+                      <div dangerouslySetInnerHTML={{ 
+                        __html: DOMPurify.sanitize(
+                          emailContent.split('<blockquote')[0] || 
+                          `On ${new Date().toLocaleString()}, Someone wrote:`
+                        )
+                      }} />
+                    )}
+                  </div>
+                ) : type === 'forward' ? (
+                  <div className="forward-header text-gray-600 text-sm border-b pb-1 mb-2">
+                    {/* Get the forward header from the email content */}
+                    {initialEmail && (
+                      <div dangerouslySetInnerHTML={{ 
+                        __html: DOMPurify.sanitize(
+                          emailContent.split('<blockquote')[0] || 
+                          '---------- Forwarded message ----------'
+                        )
+                      }} />
+                    )}
+                  </div>
+                ) : null}
+                
+                {/* Display the original content with the same quality as Panel 3 */}
+                <div className="quoted-content bg-gray-50 rounded p-2">
+                  {initialEmail && initialEmail.content && (
+                    <EmailContentDisplay 
+                      content={initialEmail.content}
+                      className="overflow-auto max-h-[50vh]"
+                    />
+                  )}
+                </div>
+              </div>
+              
+              {/* Hidden field to store the complete content for sending */}
+              <input 
+                type="hidden" 
+                id="complete-email-content"
+                value={emailContent} 
+              />
+            </div>
+          ) : (
+            // Regular editor for new emails
+            <RichEmailEditor
+              initialContent={emailContent}
+              onChange={handleContentChange}
+              placeholder="Write your message here..."
+              minHeight="200px"
+              maxHeight="calc(100vh - 400px)"
+            />
+          )}
           
           {/* Attachments */}
           {attachments.length > 0 && (