From e2b10180739aa548c519a73a61d53074f300d7f5 Mon Sep 17 00:00:00 2001
From: alma <alma@governance-labs.org>
Date: Mon, 21 Apr 2025 20:40:29 +0200
Subject: [PATCH] mail page fix design

---
 app/courrier/page.tsx       | 26 +++++++++++++-------------
 components/ComposeEmail.tsx | 20 ++++++++++++++++++--
 lib/compose-mime-decoder.ts | 15 ++++-----------
 3 files changed, 35 insertions(+), 26 deletions(-)

diff --git a/app/courrier/page.tsx b/app/courrier/page.tsx
index f05d85d7..b68d6534 100644
--- a/app/courrier/page.tsx
+++ b/app/courrier/page.tsx
@@ -399,27 +399,27 @@ function getReplyBody(email: Email, type: 'reply' | 'reply-all' | 'forward' = 'r
   // Clean and sanitize HTML content
   content = cleanHtml(content);
 
-  // Format the reply/forward content
+  // Format the reply/forward content with proper direction
   let formattedContent = '';
   if (type === 'forward') {
     formattedContent = `
-      <div class="prose max-w-none" dir="ltr">
-        <div class="border-l-4 border-gray-300 pl-4 my-4">
-          <p class="text-sm text-gray-600 mb-2">Forwarded message from ${email.from}</p>
-          <p class="text-sm text-gray-600 mb-2">Date: ${new Date(email.date).toLocaleString()}</p>
-          <p class="text-sm text-gray-600 mb-2">Subject: ${email.subject}</p>
-          <p class="text-sm text-gray-600 mb-2">To: ${email.to}</p>
-          ${email.cc ? `<p class="text-sm text-gray-600 mb-2">Cc: ${email.cc}</p>` : ''}
-          <div class="mt-4 prose-sm">${content}</div>
+      <div class="prose max-w-none" dir="ltr" style="direction: ltr; text-align: left; unicode-bidi: bidi-override">
+        <div class="border-l-4 border-gray-300 pl-4 my-4" dir="ltr">
+          <p class="text-sm text-gray-600 mb-2" dir="ltr">Forwarded message from ${email.from}</p>
+          <p class="text-sm text-gray-600 mb-2" dir="ltr">Date: ${new Date(email.date).toLocaleString()}</p>
+          <p class="text-sm text-gray-600 mb-2" dir="ltr">Subject: ${email.subject}</p>
+          <p class="text-sm text-gray-600 mb-2" dir="ltr">To: ${email.to}</p>
+          ${email.cc ? `<p class="text-sm text-gray-600 mb-2" dir="ltr">Cc: ${email.cc}</p>` : ''}
+          <div class="mt-4 prose-sm" dir="ltr">${content}</div>
         </div>
       </div>
     `;
   } else {
     formattedContent = `
-      <div class="prose max-w-none" dir="ltr">
-        <div class="border-l-4 border-gray-300 pl-4 my-4">
-          <p class="text-sm text-gray-600 mb-2">On ${new Date(email.date).toLocaleString()}, ${email.from} wrote:</p>
-          <div class="mt-4 prose-sm">${content}</div>
+      <div class="prose max-w-none" dir="ltr" style="direction: ltr; text-align: left; unicode-bidi: bidi-override">
+        <div class="border-l-4 border-gray-300 pl-4 my-4" dir="ltr">
+          <p class="text-sm text-gray-600 mb-2" dir="ltr">On ${new Date(email.date).toLocaleString()}, ${email.from} wrote:</p>
+          <div class="mt-4 prose-sm" dir="ltr">${content}</div>
         </div>
       </div>
     `;
diff --git a/components/ComposeEmail.tsx b/components/ComposeEmail.tsx
index 418dfc0c..94a038bd 100644
--- a/components/ComposeEmail.tsx
+++ b/components/ComposeEmail.tsx
@@ -56,13 +56,26 @@ export default function ComposeEmail({
   useEffect(() => {
     if (composeBodyRef.current) {
       const decodedContent = decodeComposeContent(composeBody);
-      composeBodyRef.current.innerHTML = decodedContent;
+      composeBodyRef.current.innerHTML = decodedContent
+        .replace(/<div[^>]*>/g, '<div dir="ltr" style="direction: ltr; text-align: left; unicode-bidi: bidi-override">')
+        .replace(/<p[^>]*>/g, '<p dir="ltr" style="direction: ltr; text-align: left; unicode-bidi: bidi-override">');
     }
   }, [composeBody]);
 
   const handleInput = (e: React.FormEvent<HTMLDivElement>) => {
     if (composeBodyRef.current) {
-      const encodedContent = encodeComposeContent(composeBodyRef.current.innerHTML);
+      const content = composeBodyRef.current.innerHTML
+        .replace(/<br>/g, '<br>')
+        .replace(/<p>/g, '<p>')
+        .replace(/<\/p>/g, '</p>')
+        .replace(/<div>/g, '<div>')
+        .replace(/<\/div>/g, '</div>')
+        .replace(/<span>/g, '<span>')
+        .replace(/<\/span>/g, '</span>');
+      
+      const encodedContent = encodeComposeContent(
+        `<div dir="ltr" style="direction: ltr; text-align: left; unicode-bidi: bidi-override">${content}</div>`
+      );
       setComposeBody(encodedContent);
     }
   };
@@ -229,6 +242,9 @@ export default function ComposeEmail({
                   unicodeBidi: 'bidi-override'
                 }}
                 dir="ltr"
+                data-gramm="false"
+                data-gramm_editor="false"
+                data-enable-grammarly="false"
               />
             </div>
           </div>
diff --git a/lib/compose-mime-decoder.ts b/lib/compose-mime-decoder.ts
index 0185bbca..03f3b9d3 100644
--- a/lib/compose-mime-decoder.ts
+++ b/lib/compose-mime-decoder.ts
@@ -6,10 +6,6 @@
 export function decodeComposeContent(content: string): string {
   if (!content) return '';
 
-  // Simple text direction detection
-  const hasRtlChars = /[\u0591-\u07FF\u200F\u202B\u202E\uFB1D-\uFDFD\uFE70-\uFEFC]/.test(content);
-  const direction = hasRtlChars ? 'rtl' : 'ltr';
-
   // Basic HTML cleaning
   let cleaned = content
     // Remove script and style tags
@@ -20,11 +16,8 @@ export function decodeComposeContent(content: string): string {
     // Remove head and title
     .replace(/<head[^>]*>[\s\S]*?<\/head>/gi, '')
     .replace(/<title[^>]*>[\s\S]*?<\/title>/gi, '')
-    // Preserve body attributes
-    .replace(/<body[^>]*>/gi, (match) => {
-      const dir = match.match(/dir=["'](rtl|ltr)["']/i)?.[1] || direction;
-      return `<body dir="${dir}">`;
-    })
+    // Force LTR direction
+    .replace(/<body[^>]*>/gi, '<body dir="ltr">')
     .replace(/<\/body>/gi, '')
     // Remove html tags
     .replace(/<html[^>]*>/gi, '')
@@ -64,8 +57,8 @@ export function decodeComposeContent(content: string): string {
     .replace(/\s+/g, ' ')
     .trim();
 
-  // Wrap in a div with proper direction
-  return `<div dir="${direction}" style="direction: ${direction}; text-align: ${direction === 'rtl' ? 'right' : 'left'}">${cleaned}</div>`;
+  // Wrap in a div with forced LTR direction
+  return `<div dir="ltr" style="direction: ltr; text-align: left">${cleaned}</div>`;
 }
 
 export function encodeComposeContent(content: string): string {