mail page fix design

components/ComposeEmail.tsx

@@ -53,19 +53,10 @@ export default function ComposeEmail({
 
   const handleInput = (e: React.FormEvent<HTMLDivElement>) => {
     if (composeBodyRef.current) {
-      const content = composeBodyRef.current.textContent || '';
-      setComposeBody(content);
+      setComposeBody(composeBodyRef.current.innerHTML);
     }
   };
 
-  useEffect(() => {
-    if (composeBodyRef.current) {
-      composeBodyRef.current.innerHTML = '';
-      const textNode = document.createTextNode(composeBody);
-      composeBodyRef.current.appendChild(textNode);
-    }
-  }, [composeBody]);
-
   const handleFileAttachment = async (e: React.ChangeEvent<HTMLInputElement>) => {
     if (!e.target.files) return;
     
@@ -215,24 +206,21 @@ export default function ComposeEmail({
 
             {/* Message Body */}
             <div className="flex-1 min-h-[200px] overflow-auto">
-              <Label htmlFor="message" className="block text-sm font-medium text-gray-700">Message</Label>
               <div
                 ref={composeBodyRef}
                 contentEditable
-                id="message"
-                className="w-full mt-1 min-h-[200px] p-4 border border-gray-300 rounded-md bg-white text-gray-900"
+                className="prose max-w-none min-h-[200px] p-4 border border-gray-300 rounded-lg bg-white"
                 style={{
+                  color: '#000000',
                   cursor: 'text',
                   whiteSpace: 'pre-wrap',
                   wordBreak: 'break-word',
                   fontFamily: 'inherit',
                   fontSize: 'inherit',
                   lineHeight: 'inherit',
-                  unicodeBidi: 'normal',
-                  direction: 'ltr'
                 }}
+                dangerouslySetInnerHTML={{ __html: composeBody }}
                 onInput={handleInput}
-                suppressContentEditableWarning
               />
             </div>
           </div>