mime change

components/ComposeEmail.tsx

@@ -83,26 +83,45 @@ export default function ComposeEmail({
   
   useEffect(() => {
     if (composeBodyRef.current && !isInitialized) {
-      // Initialize the content structure with both new reply area and original content in a single contentEditable div
+      let content = '';
-      const content = replyTo || forwardFrom ? `
+      
-        <div class="compose-area" contenteditable="true"></div>
+      if (replyTo) {
-        <div class="quoted-content" contenteditable="false">
+        // For replies
-          ${forwardFrom ? `
+        content = `
-            ---------- Forwarded message ---------<br/>
+          <div class="compose-area" contenteditable="true" style="min-height: 100px; padding: 10px; border: 1px solid #e5e7eb; border-radius: 4px; margin-bottom: 20px;"></div>
-            From: ${forwardFrom.from}<br/>
+          <div class="quoted-content" contenteditable="false" style="color: #6b7280; font-size: 0.875rem;">
-            Date: ${new Date(forwardFrom.date).toLocaleString()}<br/>
+            <div style="margin-bottom: 10px;">
-            Subject: ${forwardFrom.subject}<br/>
+              On ${new Date(replyTo.date).toLocaleString()}, ${replyTo.from} wrote:
-            To: ${forwardFrom.to}<br/>
+            </div>
-            ${forwardFrom.cc ? `Cc: ${forwardFrom.cc}<br/>` : ''}
+            <blockquote style="margin: 0; padding-left: 1em; border-left: 2px solid #e5e7eb;">
-            <br/>
+              ${composeBody}
-          ` : `
+            </blockquote>
-            On ${new Date(replyTo?.date || '').toLocaleString()}, ${replyTo?.from} wrote:<br/>
+          </div>
-          `}
+        `;
-          <blockquote style="margin: 0 0 0 0.8ex; border-left: 1px solid rgb(204,204,204); padding-left: 1ex;">
+      } else if (forwardFrom) {
-            ${composeBody}
+        // For forwards
-          </blockquote>
+        content = `
-        </div>
+          <div class="compose-area" contenteditable="true" style="min-height: 100px; padding: 10px; border: 1px solid #e5e7eb; border-radius: 4px; margin-bottom: 20px;"></div>
-      ` : '';
+          <div class="quoted-content" contenteditable="false" style="color: #6b7280; font-size: 0.875rem;">
+            <div style="margin-bottom: 10px;">
+              ---------- Forwarded message ---------<br/>
+              From: ${forwardFrom.from}<br/>
+              Date: ${new Date(forwardFrom.date).toLocaleString()}<br/>
+              Subject: ${forwardFrom.subject}<br/>
+              To: ${forwardFrom.to}<br/>
+              ${forwardFrom.cc ? `Cc: ${forwardFrom.cc}<br/>` : ''}
+            </div>
+            <blockquote style="margin: 0; padding-left: 1em; border-left: 2px solid #e5e7eb;">
+              ${composeBody}
+            </blockquote>
+          </div>
+        `;
+      } else {
+        // For new messages
+        content = `
+          <div class="compose-area" contenteditable="true" style="min-height: 200px; padding: 10px; border: 1px solid #e5e7eb; border-radius: 4px;"></div>
+        `;
+      }
 
       composeBodyRef.current.innerHTML = content;
       setIsInitialized(true);
@@ -116,16 +135,20 @@ export default function ComposeEmail({
         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;
     const composeArea = composeBodyRef.current.querySelector('.compose-area');
     if (composeArea) {
-      setComposeBody(composeArea.innerHTML);
+      const newContent = composeArea.innerHTML;
+      setComposeBody(newContent);
+      if (onBodyChange) {
+        onBodyChange(newContent);
+      }
     }
   };
 
@@ -143,12 +166,11 @@ export default function ComposeEmail({
       }
 
       try {
-        // Read file as base64
         const base64Content = await new Promise<string>((resolve) => {
           const reader = new FileReader();
           reader.onloadend = () => {
             const base64 = reader.result as string;
-            resolve(base64.split(',')[1]); // Remove data URL prefix
+            resolve(base64.split(',')[1]);
           };
           reader.readAsDataURL(file);
         });
@@ -198,150 +220,147 @@ export default function ComposeEmail({
           <div className="h-full flex flex-col p-6 space-y-4 overflow-y-auto">
             {/* To Field */}
             <div className="flex-none">
-              <Label htmlFor="to" className="block text-sm font-medium text-gray-700">To</Label>
+              <Label htmlFor="to">To</Label>
               <Input
                 id="to"
                 value={composeTo}
                 onChange={(e) => setComposeTo(e.target.value)}
-                placeholder="recipient@example.com"
+                placeholder="Recipients"
-                className="w-full mt-1 bg-white border-gray-300 text-gray-900"
+                className="mt-1"
               />
             </div>
 
-            {/* CC/BCC Toggle Buttons */}
+            {/* Cc Field */}
-            <div className="flex-none flex items-center gap-4">
-              <button
-                type="button"
-                className="text-blue-600 hover:text-blue-700 text-sm font-medium"
-                onClick={() => setShowCc(!showCc)}
-              >
-                {showCc ? 'Hide Cc' : 'Add Cc'}
-              </button>
-              <button
-                type="button"
-                className="text-blue-600 hover:text-blue-700 text-sm font-medium"
-                onClick={() => setShowBcc(!showBcc)}
-              >
-                {showBcc ? 'Hide Bcc' : 'Add Bcc'}
-              </button>
-            </div>
-
-            {/* CC Field */}
             {showCc && (
               <div className="flex-none">
-                <Label htmlFor="cc" className="block text-sm font-medium text-gray-700">Cc</Label>
+                <Label htmlFor="cc">Cc</Label>
                 <Input
                   id="cc"
                   value={composeCc}
                   onChange={(e) => setComposeCc(e.target.value)}
-                  placeholder="cc@example.com"
+                  placeholder="Carbon copy"
-                  className="w-full mt-1 bg-white border-gray-300 text-gray-900"
+                  className="mt-1"
                 />
               </div>
             )}
 
-            {/* BCC Field */}
+            {/* Bcc Field */}
             {showBcc && (
               <div className="flex-none">
-                <Label htmlFor="bcc" className="block text-sm font-medium text-gray-700">Bcc</Label>
+                <Label htmlFor="bcc">Bcc</Label>
                 <Input
                   id="bcc"
                   value={composeBcc}
                   onChange={(e) => setComposeBcc(e.target.value)}
-                  placeholder="bcc@example.com"
+                  placeholder="Blind carbon copy"
-                  className="w-full mt-1 bg-white border-gray-300 text-gray-900"
+                  className="mt-1"
                 />
               </div>
             )}
 
             {/* Subject Field */}
             <div className="flex-none">
-              <Label htmlFor="subject" className="block text-sm font-medium text-gray-700">Subject</Label>
+              <Label htmlFor="subject">Subject</Label>
               <Input
                 id="subject"
                 value={composeSubject}
                 onChange={(e) => setComposeSubject(e.target.value)}
-                placeholder="Enter subject"
+                placeholder="Subject"
-                className="w-full mt-1 bg-white border-gray-300 text-gray-900"
+                className="mt-1"
               />
             </div>
 
-            {/* Message Body - Single contentEditable area with separated regions */}
+            {/* Message Body */}
-            <div className="flex-1 min-h-[200px] flex flex-col">
+            <div className="flex-1 min-h-0">
-              <Label htmlFor="message" className="flex-none block text-sm font-medium text-gray-700 mb-2">Message</Label>
               <div
                 ref={composeBodyRef}
-                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"
+                onInput={handleInput}
-                style={{ direction: 'ltr' }}
+                className="h-full"
-                dir="ltr"
+                style={{ overflowY: 'auto' }}
-                spellCheck="true"
+              />
-                role="textbox"
+            </div>
-                aria-multiline="true"
+
-                tabIndex={0}
+            {/* Attachments */}
-              >
+            {attachments.length > 0 && (
-                <style>{`
+              <div className="flex-none">
-                  .compose-area {
+                <div className="flex flex-wrap gap-2">
-                    min-height: 100px;
+                  {attachments.map((attachment, index) => (
-                    margin-bottom: 20px;
+                    <div
-                    outline: none;
+                      key={index}
-                  }
+                      className="flex items-center gap-2 bg-gray-100 px-3 py-1 rounded-full text-sm"
-                  .quoted-content {
+                    >
-                    color: #666;
+                      <Paperclip className="h-4 w-4 text-gray-500" />
-                    user-select: text;
+                      <span>{attachment.name}</span>
-                    -webkit-user-select: text;
+                      <button
-                  }
+                        onClick={() => {
-                  .quoted-content blockquote {
+                          const newAttachments = [...attachments];
-                    margin: 0.8ex;
+                          newAttachments.splice(index, 1);
-                    padding-left: 1ex;
+                          setAttachments(newAttachments);
-                    border-left: 1px solid #ccc;
+                        }}
-                  }
+                        className="text-gray-500 hover:text-gray-700"
-                `}</style>
+                      >
+                        <X className="h-4 w-4" />
+                      </button>
+                    </div>
+                  ))}
+                </div>
+              </div>
+            )}
+
+            {/* Action Buttons */}
+            <div className="flex-none flex items-center justify-between pt-4 border-t border-gray-200">
+              <div className="flex items-center gap-2">
+                <Button
+                  variant="ghost"
+                  size="sm"
+                  onClick={() => {
+                    const input = document.createElement('input');
+                    input.type = 'file';
+                    input.multiple = true;
+                    input.onchange = (e) => handleFileAttachment(e as any);
+                    input.click();
+                  }}
+                >
+                  <Paperclip className="h-4 w-4 mr-2" />
+                  Attach
+                </Button>
+                {!showCc && (
+                  <Button
+                    variant="ghost"
+                    size="sm"
+                    onClick={() => setShowCc(true)}
+                  >
+                    Cc
+                  </Button>
+                )}
+                {!showBcc && (
+                  <Button
+                    variant="ghost"
+                    size="sm"
+                    onClick={() => setShowBcc(true)}
+                  >
+                    Bcc
+                  </Button>
+                )}
+              </div>
+              <div className="flex items-center gap-2">
+                <Button
+                  variant="outline"
+                  size="sm"
+                  onClick={onCancel}
+                >
+                  Cancel
+                </Button>
+                <Button
+                  size="sm"
+                  onClick={handleSend}
+                >
+                  Send
+                </Button>
               </div>
             </div>
           </div>
         </div>
-
-        {/* Modal Footer */}
-        <div className="flex-none flex items-center justify-between px-6 py-3 border-t border-gray-200 bg-white">
-          <div className="flex items-center gap-2">
-            {/* File Input for Attachments */}
-            <input
-              type="file"
-              id="file-attachment"
-              className="hidden"
-              multiple
-              onChange={handleFileAttachment}
-            />
-            <label htmlFor="file-attachment">
-              <Button 
-                variant="outline" 
-                size="icon"
-                className="rounded-full bg-white hover:bg-gray-100 border-gray-300"
-                onClick={(e) => {
-                  e.preventDefault();
-                  document.getElementById('file-attachment')?.click();
-                }}
-              >
-                <Paperclip className="h-4 w-4 text-gray-600" />
-              </Button>
-            </label>
-          </div>
-          <div className="flex items-center gap-3">
-            <Button 
-              variant="ghost"
-              className="text-gray-600 hover:text-gray-700 hover:bg-gray-100"
-              onClick={onCancel}
-            >
-              Cancel
-            </Button>
-            <Button
-              className="bg-blue-600 text-white hover:bg-blue-700"
-              onClick={handleSend}
-            >
-              Send
-            </Button>
-          </div>
-        </div>
       </div>
     </div>
   );