compose mime

components/ComposeEmail.tsx

@@ -81,27 +81,36 @@ export default function ComposeEmail({
 }: ComposeEmailProps) {
   const composeBodyRef = useRef<HTMLDivElement>(null);
   const [localContent, setLocalContent] = useState('');
-  const [isInitialized, setIsInitialized] = useState(false);
+  const [isLoading, setIsLoading] = useState(false);
   
   useEffect(() => {
-    if (composeBodyRef.current && !isInitialized) {
+    const initializeContent = async () => {
+      if (!composeBodyRef.current) return;
+      
       let content = '';
       
       if (replyTo || forwardFrom) {
-        const originalContent = replyTo?.body || forwardFrom?.body || '';
-        
-        fetch('/api/parse-email', {
-          method: 'POST',
-          headers: {
-            'Content-Type': 'application/json',
-          },
-          body: JSON.stringify({ emailContent: originalContent }),
-        })
-        .then(response => response.json())
-        .then(parsed => {
+        setIsLoading(true);
+        try {
+          const originalContent = replyTo?.body || forwardFrom?.body || '';
+          
+          const response = await fetch('/api/parse-email', {
+            method: 'POST',
+            headers: {
+              'Content-Type': 'application/json',
+            },
+            body: JSON.stringify({ emailContent: originalContent }),
+          });
+          
+          if (!response.ok) {
+            throw new Error('Failed to parse email');
+          }
+          
+          const parsed = await response.json();
+          
           content = `
             <div class="compose-area" contenteditable="true" style="min-height: 100px; padding: 10px; color: #000000;">
-              <br/><br/><br/>
+              <br/>
               ${forwardFrom ? `
                 <div style="border-top: 1px solid #e5e7eb; padding-top: 20px; margin-top: 20px; color: #6b7280; font-size: 0.875rem;">
                   ---------- Forwarded message ---------<br/>
@@ -123,32 +132,21 @@ export default function ComposeEmail({
               `}
             </div>
           `;
-
-          if (composeBodyRef.current) {
-            composeBodyRef.current.innerHTML = content;
-            setIsInitialized(true);
-            
-            // Place cursor at the beginning of the compose area
-            const composeArea = composeBodyRef.current.querySelector('.compose-area');
-            if (composeArea) {
-              const range = document.createRange();
-              const sel = window.getSelection();
-              range.setStart(composeArea, 0);
-              range.collapse(true);
-              sel?.removeAllRanges();
-              sel?.addRange(range);
-              (composeArea as HTMLElement).focus();
-            }
-          }
-        })
-        .catch(error => {
+        } catch (error) {
           console.error('Error parsing email:', error);
-        });
+          content = `<div class="compose-area" contenteditable="true" style="min-height: 100px; padding: 10px; color: #000000;"></div>`;
+        } finally {
+          setIsLoading(false);
+        }
       } else {
         content = `<div class="compose-area" contenteditable="true" style="min-height: 100px; padding: 10px; color: #000000;"></div>`;
+      }
+      
+      if (composeBodyRef.current) {
         composeBodyRef.current.innerHTML = content;
-        setIsInitialized(true);
+        setLocalContent(content);
         
+        // Place cursor at the beginning of the compose area
         const composeArea = composeBodyRef.current.querySelector('.compose-area');
         if (composeArea) {
           const range = document.createRange();
@@ -160,40 +158,23 @@ export default function ComposeEmail({
           (composeArea as HTMLElement).focus();
         }
       }
-    }
-  }, [composeBody, replyTo, forwardFrom, isInitialized]);
+    };
+    
+    initializeContent();
+  }, [replyTo, forwardFrom]);
 
-  // Modified input handler to work with the single contentEditable area
   const handleInput = (e: React.FormEvent<HTMLDivElement>) => {
     if (!composeBodyRef.current) return;
     
-    // Get the compose area content
     const composeArea = composeBodyRef.current.querySelector('.compose-area');
     if (!composeArea) return;
     
     const content = composeArea.innerHTML;
-    
-    if (!content.trim()) {
-      console.warn('Email content is empty');
-      return;
-    }
-    
-    // Create MIME headers
-    const mimeHeaders = {
-      'MIME-Version': '1.0',
-      'Content-Type': 'text/html; charset="utf-8"',
-      'Content-Transfer-Encoding': 'quoted-printable'
-    };
-    
-    // Combine headers and content
-    const mimeContent = Object.entries(mimeHeaders)
-      .map(([key, value]) => `${key}: ${value}`)
-      .join('\n') + '\n\n' + content;
-    
-    setComposeBody(mimeContent);
+    setLocalContent(content);
+    setComposeBody(content);
     
     if (onBodyChange) {
-      onBodyChange(mimeContent);
+      onBodyChange(content);
     }
   };