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) {
+        setIsLoading(true);
+        try {
           const originalContent = replyTo?.body || forwardFrom?.body || '';
           
-        fetch('/api/parse-email', {
+          const response = await fetch('/api/parse-email', {
             method: 'POST',
             headers: {
               'Content-Type': 'application/json',
             },
             body: JSON.stringify({ emailContent: originalContent }),
-        })
+          });
-        .then(response => response.json())
+          
-        .then(parsed => {
+          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,10 +132,19 @@ export default function ComposeEmail({
               `}
             </div>
           `;
+        } 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');
@@ -140,60 +158,23 @@ export default function ComposeEmail({
           (composeArea as HTMLElement).focus();
         }
       }
-        })
+    };
-        .catch(error => {
-          console.error('Error parsing email:', error);
-        });
-      } else {
-        content = `<div class="compose-area" contenteditable="true" style="min-height: 100px; padding: 10px; color: #000000;"></div>`;
-        composeBodyRef.current.innerHTML = content;
-        setIsInitialized(true);
     
-        const composeArea = composeBodyRef.current.querySelector('.compose-area');
+    initializeContent();
-        if (composeArea) {
+  }, [replyTo, forwardFrom]);
-          const range = document.createRange();
-          const sel = window.getSelection();
-          range.setStart(composeArea, 0);
-          range.collapse(true);
-          sel?.removeAllRanges();
-          sel?.addRange(range);
-          (composeArea as HTMLElement).focus();
-        }
-      }
-    }
-  }, [composeBody, replyTo, forwardFrom, isInitialized]);
 
-  // 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;
-    
+    setLocalContent(content);
-    if (!content.trim()) {
+    setComposeBody(content);
-      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);
     
     if (onBodyChange) {
-      onBodyChange(mimeContent);
+      onBodyChange(content);
     }
   };