From a9dc2da891c2077eff64ee01113fd0615a25e490 Mon Sep 17 00:00:00 2001
From: alma <alma@governance-labs.org>
Date: Sat, 26 Apr 2025 13:02:31 +0200
Subject: [PATCH] courrier clean 2

---
 components/ComposeEmail.tsx | 37 ++++++++++++++++++++++++++++++++++---
 lib/email-formatter.ts      | 20 ++++++++++----------
 2 files changed, 44 insertions(+), 13 deletions(-)

diff --git a/components/ComposeEmail.tsx b/components/ComposeEmail.tsx
index 24b8ab22..f943060c 100644
--- a/components/ComposeEmail.tsx
+++ b/components/ComposeEmail.tsx
@@ -90,6 +90,7 @@ export default function ComposeEmail({
   const [useRichEditor, setUseRichEditor] = useState(false);
   const [userMessage, setUserMessage] = useState('');
   const [quotedContent, setQuotedContent] = useState('');
+  const [hasStartedTyping, setHasStartedTyping] = useState(false);
 
   useEffect(() => {
     // When forwarding or replying, use rich editor
@@ -130,6 +131,7 @@ export default function ComposeEmail({
       const formattedEmail = formatEmailForForward(emailForFormatting);
       
       setComposeSubject(formattedEmail.subject);
+      // The email-formatter already adds proper direction, no need for extra wrappers
       setQuotedContent(formattedEmail.body);
       setComposeBody(''); // Clear user message when forwarding
     } catch (error) {
@@ -179,6 +181,7 @@ export default function ComposeEmail({
         setShowCc(true);
       }
       
+      // The email-formatter already adds proper direction, no need for extra wrappers
       setQuotedContent(formattedEmail.body);
       setComposeBody(''); // Clear user message when replying
     } catch (error) {
@@ -202,10 +205,17 @@ export default function ComposeEmail({
   // Handle contentEditable input changes
   const handleUserMessageChange = () => {
     if (contentEditableRef.current) {
-      setUserMessage(contentEditableRef.current.innerHTML);
+      const content = contentEditableRef.current.innerHTML;
+      
+      // Check if this is the initial state or if the user has actually typed something
+      if (content && content !== '<p>Write your message here...</p>') {
+        setHasStartedTyping(true);
+      }
+      
+      setUserMessage(content);
       
       // Combine user message with quoted content for the full email body
-      const combined = `${contentEditableRef.current.innerHTML}${quotedContent ? quotedContent : ''}`;
+      const combined = `${content}${quotedContent ? quotedContent : ''}`;
       setComposeBody(combined);
     }
   };
@@ -372,13 +382,27 @@ export default function ComposeEmail({
                         contentEditable="true"
                         className="w-full p-3 bg-white min-h-[100px] text-gray-900 email-editor"
                         onInput={handleUserMessageChange}
-                        dangerouslySetInnerHTML={userMessage ? { __html: userMessage } : { __html: '<p>Write your message here...</p>' }}
+                        onFocus={() => {
+                          // Clear placeholder text when user focuses if they haven't started typing
+                          if (!hasStartedTyping && contentEditableRef.current) {
+                            contentEditableRef.current.innerHTML = '';
+                          }
+                        }}
+                        onBlur={() => {
+                          // Restore placeholder if user hasn't typed anything
+                          if (!hasStartedTyping && contentEditableRef.current && !contentEditableRef.current.innerHTML.trim()) {
+                            contentEditableRef.current.innerHTML = '<p>Write your message here...</p>';
+                          }
+                        }}
+                        dangerouslySetInnerHTML={hasStartedTyping ? { __html: userMessage } : { __html: '<p>Write your message here...</p>' }}
+                        style={{ direction: 'ltr', textAlign: 'left' }}
                       />
                       
                       {/* Original email content - also editable */}
                       {quotedContent && (
                         <div 
                           className="w-full bg-gray-50 border-t border-gray-300 email-content-wrapper"
+                          style={{ direction: 'ltr' }}
                         >
                           <div 
                             className="p-3 opacity-90 text-sm email-content"
@@ -387,7 +411,13 @@ export default function ComposeEmail({
                             onInput={(e) => {
                               const target = e.currentTarget;
                               setQuotedContent(target.innerHTML);
+                              // Update the combined content
+                              if (contentEditableRef.current) {
+                                const combined = `${contentEditableRef.current.innerHTML}${target.innerHTML}`;
+                                setComposeBody(combined);
+                              }
                             }}
+                            style={{ direction: 'ltr', textAlign: 'left' }}
                           />
                         </div>
                       )}
@@ -399,6 +429,7 @@ export default function ComposeEmail({
                       onChange={(e) => setComposeBody(e.target.value)}
                       placeholder="Write your message..."
                       className="w-full mt-1 min-h-[200px] bg-white border-gray-300 text-gray-900 resize-none email-editor"
+                      style={{ direction: 'ltr', textAlign: 'left' }}
                     />
                   )}
                 </div>
diff --git a/lib/email-formatter.ts b/lib/email-formatter.ts
index 140d5adf..57ca9071 100644
--- a/lib/email-formatter.ts
+++ b/lib/email-formatter.ts
@@ -85,13 +85,13 @@ export function formatEmailForReply(
     originalContent = originalEmail.text.replace(/\n/g, '<br>');
   }
   
-  // Combine the header with the original content
+  // Combine the header with the original content, ensuring proper direction
   const body = `
-    <div>
+    <div dir="ltr" style="text-align: left;">
       <br>
       <blockquote style="margin: 0 0 0 0.8ex; border-left: 1px solid #ccc; padding-left: 1ex;">
         ${quoteHeader}
-        <div>${originalContent || 'No content available'}</div>
+        <div style="direction: ltr; text-align: left;">${originalContent || 'No content available'}</div>
       </blockquote>
     </div>
   `;
@@ -171,9 +171,9 @@ export function createQuoteHeader(email: EmailMessageForFormatting): string {
     }
   }
   
-  // Create the header HTML
+  // Create the header HTML with explicit LTR direction
   return `
-    <div style="margin-bottom: 10px; color: #555; font-size: 0.9em;">
+    <div style="margin-bottom: 10px; color: #555; font-size: 0.9em; direction: ltr; text-align: left;">
       <div><strong>From:</strong> ${fromName} &lt;${fromEmail}&gt;</div>
       ${dateFormatted ? `<div><strong>Date:</strong> ${dateFormatted}</div>` : ''}
       <div><strong>Subject:</strong> ${email.subject || 'No Subject'}</div>
@@ -206,14 +206,14 @@ export function formatEmailForForward(email: EmailMessageForFormatting): Formatt
     originalContent = email.text.replace(/\n/g, '<br>');
   }
   
-  // Combine the header with the original content
+  // Combine the header with the original content, ensuring proper direction
   const body = `
-    <div>
+    <div dir="ltr" style="text-align: left;">
       <br>
-      <div style="border-left: 1px solid #ccc; padding-left: 1ex; margin-left: 0.8ex;">
-        <div style="font-weight: bold; margin-bottom: 10px;">---------- Forwarded message ---------</div>
+      <div style="border-left: 1px solid #ccc; padding-left: 1ex; margin-left: 0.8ex; direction: ltr; text-align: left;">
+        <div style="font-weight: bold; margin-bottom: 10px; direction: ltr; text-align: left;">---------- Forwarded message ---------</div>
         ${forwardHeader}
-        <div>${originalContent || '<div style="padding: 10px; text-align: center; background-color: #f8f8f8; border: 1px dashed #ccc; margin: 10px 0;">No content available</div>'}</div>
+        <div style="direction: ltr; text-align: left;">${originalContent || '<div style="padding: 10px; text-align: center; background-color: #f8f8f8; border: 1px dashed #ccc; margin: 10px 0;">No content available</div>'}</div>
       </div>
     </div>
   `;