courrier clean 2

components/ComposeEmail.tsx

@@ -86,6 +86,13 @@ export default function ComposeEmail({
 }: ComposeEmailProps) {
   const [isSending, setIsSending] = useState(false);
   const fileInputRef = useRef<HTMLInputElement>(null);
+  const contentEditableRef = useRef<HTMLDivElement>(null);
+  const [useRichEditor, setUseRichEditor] = useState(false);
+
+  useEffect(() => {
+    // When forwarding or replying, use rich editor
+    setUseRichEditor(!!replyTo || !!forwardFrom);
+  }, [replyTo, forwardFrom]);
 
   useEffect(() => {
     // Initialize reply if replyTo is provided
@@ -172,6 +179,13 @@ export default function ComposeEmail({
     }
   };
 
+  // Handle contentEditable input changes
+  const handleContentEditableChange = () => {
+    if (contentEditableRef.current) {
+      setComposeBody(contentEditableRef.current.innerHTML);
+    }
+  };
+
   return (
     <>
       {/* Compose Email Modal */}
@@ -276,16 +290,28 @@ export default function ComposeEmail({
                   />
                 </div>
 
-                {/* Message Body */}
+                {/* Message Body - conditionally render either rich editor or textarea */}
                 <div>
                   <Label htmlFor="message" className="block text-sm font-medium text-gray-700">Message</Label>
-                  <Textarea
-                    id="message"
-                    value={composeBody}
-                    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"
-                  />
+                  
+                  {useRichEditor ? (
+                    <div
+                      ref={contentEditableRef}
+                      contentEditable
+                      className="w-full mt-1 min-h-[200px] p-3 bg-white border border-gray-300 rounded-md overflow-auto text-gray-900"
+                      style={{ direction: 'ltr' }}
+                      dangerouslySetInnerHTML={{ __html: composeBody }}
+                      onInput={handleContentEditableChange}
+                    />
+                  ) : (
+                    <Textarea
+                      id="message"
+                      value={composeBody}
+                      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"
+                    />
+                  )}
                 </div>
               </div>
             </div>