mail page fix

components/ComposeEmail.tsx

@@ -1,6 +1,6 @@
 'use client';
 
-import { useRef } from 'react';
+import { useRef, useEffect } from 'react';
 import { Button } from '@/components/ui/button';
 import { Input } from '@/components/ui/input';
 import { Label } from '@/components/ui/label';
@@ -51,6 +51,19 @@ export default function ComposeEmail({
 }: ComposeEmailProps) {
   const composeBodyRef = useRef<HTMLDivElement>(null);
 
+  // Update the contentEditable div when composeBody changes
+  useEffect(() => {
+    if (composeBodyRef.current && composeBody) {
+      composeBodyRef.current.innerHTML = composeBody;
+    }
+  }, [composeBody]);
+
+  const handleInput = (e: React.FormEvent<HTMLDivElement>) => {
+    if (composeBodyRef.current) {
+      setComposeBody(composeBodyRef.current.innerHTML);
+    }
+  };
+
   const handleFileAttachment = async (e: React.ChangeEvent<HTMLInputElement>) => {
     if (!e.target.files) return;
     
@@ -203,35 +216,9 @@ export default function ComposeEmail({
               <div
                 ref={composeBodyRef}
                 contentEditable
-                className="prose max-w-none min-h-[200px] p-4 focus:outline-none border rounded-md bg-white text-gray-900"
-                suppressContentEditableWarning
-                onInput={(e: React.FormEvent<HTMLDivElement>) => {
-                  const content = (e.target as HTMLDivElement).innerHTML;
-                  setComposeBody(content);
-                }}
-                onKeyDown={(e: React.KeyboardEvent<HTMLDivElement>) => {
-                  if (e.key === 'Enter') {
-                    e.preventDefault();
-                    document.execCommand('insertLineBreak');
-                  }
-                }}
-                onFocus={() => {
-                  const current = composeBodyRef.current;
-                  if (current && !current.innerHTML) {
-                    current.innerHTML = '';
-                  }
-                }}
-                style={{ 
-                  outline: 'none',
-                  cursor: 'text',
-                  whiteSpace: 'pre-wrap',
-                  wordBreak: 'break-word',
-                  minHeight: '200px',
-                  padding: '1rem',
-                  border: '1px solid #e5e7eb',
-                  borderRadius: '0.375rem',
-                  color: '#111827' // text-gray-900
-                }}
+                className="flex-1 p-4 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500 prose max-w-none"
+                onInput={handleInput}
+                dangerouslySetInnerHTML={{ __html: composeBody }}
               />
             </div>
           </div>