From bb97f9b3643b4435da7c0856c9fbbffc0248791c Mon Sep 17 00:00:00 2001
From: alma <alma@governance-labs.org>
Date: Sun, 27 Apr 2025 00:40:58 +0200
Subject: [PATCH] courrier refactor  rebuild preview

---
 app/globals.css                   | 37 +++++++++++++++++++++++++++++++
 components/email/EmailPreview.tsx | 19 +++++++++++-----
 2 files changed, 50 insertions(+), 6 deletions(-)

diff --git a/app/globals.css b/app/globals.css
index 7dbbcf1f..a8432fe1 100644
--- a/app/globals.css
+++ b/app/globals.css
@@ -187,3 +187,40 @@
   margin-bottom: 15px;
 }
 
+/* Special classes used in the email formatting functions */
+.email-content-display .reply-body {
+  width: 100%;
+  direction: rtl;
+  text-align: right;
+  font-family: Arial, sans-serif;
+}
+
+.email-content-display .quote-header {
+  color: #555;
+  font-size: 13px;
+  margin: 20px 0 10px 0;
+  font-weight: 500;
+}
+
+.email-content-display .quoted-content {
+  font-size: 13px;
+  direction: rtl;
+  text-align: right;
+}
+
+.email-content-display .email-original-content {
+  margin-top: 10px;
+  padding-top: 10px;
+  text-align: right;
+  direction: rtl;
+}
+
+/* Fix styles for the content in both preview and compose */
+.email-content-display[contenteditable="false"] {
+  /* Same styles as contentEditable=true to ensure consistency */
+  white-space: pre-wrap;
+  word-break: break-word;
+  direction: rtl;
+  text-align: right;
+}
+
diff --git a/components/email/EmailPreview.tsx b/components/email/EmailPreview.tsx
index 789e8c96..79c707ce 100644
--- a/components/email/EmailPreview.tsx
+++ b/components/email/EmailPreview.tsx
@@ -126,14 +126,21 @@ export default function EmailPreview({ email, loading = false, onReply }: EmailP
         // Get the raw content directly
         const rawContent = email.content || email.html || email.text || '';
         
-        // Now use the same content that would be shown in a reply
-        // This is exactly what ComposeEmail shows
-        const { content } = formatReplyEmail(formatterEmail, 'reply');
+        // First try to use the raw content, but apply the same styling
+        const formattedWithStyles = `
+          <div style="min-height: 20px;" dir="rtl">
+            <div class="reply-body">
+              <div class="email-original-content" dir="rtl">
+                ${rawContent}
+              </div>
+            </div>
+          </div>
+        `;
         
-        console.log("Formatted content for display:", content.substring(0, 200));
+        console.log("Formatted content for display");
         
-        // Use the formatted content that includes the proper structure
-        setFormattedContent(content);
+        // Use the formatted content with proper structure
+        setFormattedContent(formattedWithStyles);
       } catch (error) {
         console.error('Error formatting email content:', error);
         // Fallback to raw content if formatting fails