mime change

components/ComposeEmail.tsx

@@ -85,7 +85,7 @@ export default function ComposeEmail({
     if (composeBodyRef.current && !isInitialized) {
       // Initialize the content structure with both new reply area and original content in a single contentEditable div
       const content = replyTo || forwardFrom ? `
-        <div class="compose-area" contenteditable="true"></div>
+        <div class="compose-area" contenteditable="true">${initialBody || ''}</div>
         <div class="quoted-content" contenteditable="false">
           ${forwardFrom ? `
             ---------- Forwarded message ---------<br/>
@@ -102,7 +102,7 @@ export default function ComposeEmail({
             ${composeBody}
           </blockquote>
         </div>
-      ` : '';
+      ` : `<div class="compose-area" contenteditable="true">${initialBody || ''}</div>`;
 
       composeBodyRef.current.innerHTML = content;
       setIsInitialized(true);
@@ -116,16 +116,18 @@ export default function ComposeEmail({
         range.collapse(true);
         sel?.removeAllRanges();
         sel?.addRange(range);
+        (composeArea as HTMLElement).focus();
       }
     }
-  }, [composeBody, replyTo, forwardFrom, isInitialized]);
+  }, [composeBody, replyTo, forwardFrom, isInitialized, initialBody]);
 
   // Modified input handler to work with the single contentEditable area
   const handleInput = (e: React.FormEvent<HTMLDivElement>) => {
     if (!composeBodyRef.current) return;
-    const composeArea = composeBodyRef.current.querySelector('.compose-area');
-    if (composeArea) {
-      setComposeBody(composeArea.innerHTML);
+    const content = composeBodyRef.current.innerHTML;
+    setComposeBody(content);
+    if (onBodyChange) {
+      onBodyChange(content);
     }
   };
 
@@ -271,6 +273,8 @@ export default function ComposeEmail({
               <Label htmlFor="message" className="flex-none block text-sm font-medium text-gray-700 mb-2">Message</Label>
               <div
                 ref={composeBodyRef}
+                contentEditable="true"
+                onInput={handleInput}
                 className="flex-1 w-full bg-white border border-gray-300 rounded-md p-4 text-gray-900 overflow-y-auto focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent"
                 style={{ direction: 'ltr' }}
                 dir="ltr"
@@ -278,6 +282,7 @@ export default function ComposeEmail({
                 role="textbox"
                 aria-multiline="true"
                 tabIndex={0}
+                suppressContentEditableWarning={true}
               >
                 <style>{`
                   .compose-area {
@@ -295,6 +300,12 @@ export default function ComposeEmail({
                     padding-left: 1ex;
                     border-left: 1px solid #ccc;
                   }
+                  [contenteditable="true"] {
+                    outline: none;
+                  }
+                  [contenteditable="true"]:focus {
+                    outline: none;
+                  }
                 `}</style>
               </div>
             </div>