From fb0ab726758d66030a850dfaf2d95f8df1159da7 Mon Sep 17 00:00:00 2001
From: alma <alma@governance-labs.org>
Date: Sat, 26 Apr 2025 21:12:18 +0200
Subject: [PATCH] courrier clean 2$

---
 components/ComposeEmail.tsx | 136 ++++++++++++++----------------------
 1 file changed, 54 insertions(+), 82 deletions(-)

diff --git a/components/ComposeEmail.tsx b/components/ComposeEmail.tsx
index d207721d..d02800ad 100644
--- a/components/ComposeEmail.tsx
+++ b/components/ComposeEmail.tsx
@@ -6,33 +6,21 @@ import { Button } from '@/components/ui/button';
 import { Input } from '@/components/ui/input';
 import { Textarea } from '@/components/ui/textarea';
 import { Label } from '@/components/ui/label';
-import DOMPurify from 'isomorphic-dompurify';
+import { sanitizeHtml } from '@/lib/utils/email-formatter';
 
-// Add a CSS style block to handle the direction properly
-const forceLTRStyles = `
-.force-ltr {
-  direction: ltr !important;
-  text-align: left !important;
-  unicode-bidi: isolate !important;
-  writing-mode: horizontal-tb !important;
-}
-.force-ltr * {
-  direction: ltr !important;
-  text-align: left !important;
-  unicode-bidi: isolate !important;
-}
-[dir="rtl"] .force-ltr,
-[dir="rtl"] .force-ltr * {
-  direction: ltr !important;
-  text-align: left !important;
-}
+// Simple CSS for email styling - leverages our centralized sanitization for text direction
+const emailStyles = `
 .email-content {
-  direction: ltr !important;
-  text-align: left !important;
+  font-family: Arial, sans-serif;
 }
-.email-content * {
-  direction: ltr !important;
-  text-align: left !important;
+.quoted-content {
+  margin-top: 20px;
+  border-top: 1px solid #e2e2e2;
+  padding-top: 10px;
+  color: #555;
+}
+.user-message {
+  margin-bottom: 20px;
 }
 `;
 
@@ -164,17 +152,19 @@ export default function ComposeEmail({
   // Handle contentEditable input changes
   const handleUserMessageChange = () => {
     if (contentEditableRef.current) {
-      const content = contentEditableRef.current.innerHTML;
+      let 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);
       }
       
+      // Sanitize the user's message using our centralized sanitizer
+      content = sanitizeHtml(content);
       setUserMessage(content);
       
       // Combine user message with quoted content for the full email body
-      const combined = `${content}${quotedContent ? `<div class="original-content">${quotedContent}</div>` : ''}`;
+      const combined = `${content}${quotedContent ? `<div class="quoted-content">${quotedContent}</div>` : ''}`;
       setComposeBody(combined);
     }
   };
@@ -188,10 +178,12 @@ export default function ComposeEmail({
       
       // For rich editor, combine user message with quoted content
       if (useRichEditor) {
-        // Wrap the content with proper direction styles
-        const userContent = userMessage ? `<div class="force-ltr user-message">${userMessage}</div>` : '';
-        const quotedWithStyles = quotedContent ? `<div class="force-ltr quoted-content" style="margin-top: 20px; border-top: 1px solid #e2e2e2; padding-top: 10px;">${quotedContent}</div>` : '';
-        const combinedContent = `${userContent}${quotedWithStyles}`;
+        // Wrap the content with appropriate styling
+        const userContent = userMessage ? `<div class="user-message">${userMessage}</div>` : '';
+        const quotedWithStyles = quotedContent ? `<div class="quoted-content">${quotedContent}</div>` : '';
+        
+        // Use our centralized sanitizer to ensure proper direction
+        const combinedContent = sanitizeHtml(`${userContent}${quotedWithStyles}`);
         
         setComposeBody(combinedContent);
         
@@ -235,7 +227,7 @@ export default function ComposeEmail({
       {showCompose && (
     <div className="fixed inset-0 bg-gray-600/30 backdrop-blur-sm z-50 flex items-center justify-center">
           {/* Add global styles for email direction */}
-          <style dangerouslySetInnerHTML={{ __html: forceLTRStyles }} />
+          <style dangerouslySetInnerHTML={{ __html: emailStyles }} />
           
           <div className="w-full max-w-2xl h-[80vh] bg-white rounded-xl shadow-xl flex flex-col mx-4">
         {/* Modal Header */}
@@ -341,58 +333,39 @@ export default function ComposeEmail({
                   <Label htmlFor="message" className="block text-sm font-medium text-gray-700">Message</Label>
                   
                   {useRichEditor ? (
-                    <div className="mt-1 border border-gray-300 rounded-md overflow-hidden flex flex-col">
-                      {/* User input area - clearly separated from quoted content */}
-                      <div
-                        ref={contentEditableRef}
-                        contentEditable="true"
-                        className="w-full p-3 bg-white min-h-[150px] text-gray-900 email-editor"
-                        onInput={handleUserMessageChange}
-                        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 with clear visual separation */}
-                      {quotedContent && (
-                        <>
-                          <div className="px-3 py-2 bg-gray-100 border-t border-gray-300 text-xs text-gray-500 font-medium">
-                            {composeSubject.startsWith('Re:') ? 'Original message' : 'Forwarded message'}
-                          </div>
+                    <>
+                      <div className="border rounded-md mb-4 overflow-hidden">
+                        <div className="flex flex-col h-full">
                           <div 
-                            className="w-full bg-gray-50 border-t border-gray-200 email-content-wrapper"
-                            style={{ direction: 'ltr' }}
-                          >
-                            <div 
-                              className="p-3 text-sm email-content force-ltr"
-                              dangerouslySetInnerHTML={{ __html: quotedContent }}
-                              contentEditable="false" 
-                              style={{ 
-                                direction: 'ltr',
-                                textAlign: 'left',
-                                unicodeBidi: 'isolate',
-                                writingMode: 'horizontal-tb',
-                                color: '#555',
-                                borderLeft: '3px solid #ccc',
-                                paddingLeft: '10px',
-                                margin: '0 10px',
-                              }}
-                            />
-                          </div>
-                        </>
+                            className="p-3 prose max-w-none flex-grow min-h-[200px]"
+                            ref={contentEditableRef}
+                            contentEditable="true"
+                            onInput={handleUserMessageChange}
+                            onFocus={() => {
+                              // Clear 'Write your message here...' when user focuses on the editor
+                              if (!hasStartedTyping && contentEditableRef.current) {
+                                contentEditableRef.current.innerHTML = '';
+                              }
+                            }}
+                            onBlur={() => {
+                              // Restore 'Write your message here...' placeholder if empty
+                              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>' }}
+                          />
+                        </div>
+                      </div>
+                      {/* Original email content (quoted part) */}
+                      {quotedContent && (
+                        <div 
+                          className="p-3 text-sm email-content quoted-content"
+                          dangerouslySetInnerHTML={{ __html: quotedContent }}
+                          contentEditable="false"
+                        />
                       )}
-                    </div>
+                    </>
                   ) : (
                     <Textarea
                       id="message"
@@ -400,7 +373,6 @@ 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>