mime change
This commit is contained in:
parent
7dcd0c92f8
commit
3c81473239
@ -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
|
||||
const content = replyTo || forwardFrom ? `
|
||||
<div class="compose-area" contenteditable="true"></div>
|
||||
<div class="quoted-content" contenteditable="false">
|
||||
${forwardFrom ? `
|
||||
---------- 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/>` : ''}
|
||||
<br/>
|
||||
` : `
|
||||
On ${new Date(replyTo?.date || '').toLocaleString()}, ${replyTo?.from} wrote:<br/>
|
||||
`}
|
||||
<blockquote style="margin: 0 0 0 0.8ex; border-left: 1px solid rgb(204,204,204); padding-left: 1ex;">
|
||||
${composeBody}
|
||||
</blockquote>
|
||||
</div>
|
||||
` : '';
|
||||
let content = '';
|
||||
|
||||
if (replyTo) {
|
||||
// For replies
|
||||
content = `
|
||||
<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;">
|
||||
On ${new Date(replyTo.date).toLocaleString()}, ${replyTo.from} wrote:
|
||||
</div>
|
||||
<blockquote style="margin: 0; padding-left: 1em; border-left: 2px solid #e5e7eb;">
|
||||
${composeBody}
|
||||
</blockquote>
|
||||
</div>
|
||||
`;
|
||||
} else if (forwardFrom) {
|
||||
// For forwards
|
||||
content = `
|
||||
<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"
|
||||
className="w-full mt-1 bg-white border-gray-300 text-gray-900"
|
||||
placeholder="Recipients"
|
||||
className="mt-1"
|
||||
/>
|
||||
</div>
|
||||
|
||||
{/* CC/BCC Toggle Buttons */}
|
||||
<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 */}
|
||||
{/* 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"
|
||||
className="w-full mt-1 bg-white border-gray-300 text-gray-900"
|
||||
placeholder="Carbon copy"
|
||||
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"
|
||||
className="w-full mt-1 bg-white border-gray-300 text-gray-900"
|
||||
placeholder="Blind carbon copy"
|
||||
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"
|
||||
className="w-full mt-1 bg-white border-gray-300 text-gray-900"
|
||||
placeholder="Subject"
|
||||
className="mt-1"
|
||||
/>
|
||||
</div>
|
||||
|
||||
{/* Message Body - Single contentEditable area with separated regions */}
|
||||
<div className="flex-1 min-h-[200px] flex flex-col">
|
||||
<Label htmlFor="message" className="flex-none block text-sm font-medium text-gray-700 mb-2">Message</Label>
|
||||
{/* Message Body */}
|
||||
<div className="flex-1 min-h-0">
|
||||
<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"
|
||||
style={{ direction: 'ltr' }}
|
||||
dir="ltr"
|
||||
spellCheck="true"
|
||||
role="textbox"
|
||||
aria-multiline="true"
|
||||
tabIndex={0}
|
||||
>
|
||||
<style>{`
|
||||
.compose-area {
|
||||
min-height: 100px;
|
||||
margin-bottom: 20px;
|
||||
outline: none;
|
||||
}
|
||||
.quoted-content {
|
||||
color: #666;
|
||||
user-select: text;
|
||||
-webkit-user-select: text;
|
||||
}
|
||||
.quoted-content blockquote {
|
||||
margin: 0.8ex;
|
||||
padding-left: 1ex;
|
||||
border-left: 1px solid #ccc;
|
||||
}
|
||||
`}</style>
|
||||
onInput={handleInput}
|
||||
className="h-full"
|
||||
style={{ overflowY: 'auto' }}
|
||||
/>
|
||||
</div>
|
||||
|
||||
{/* Attachments */}
|
||||
{attachments.length > 0 && (
|
||||
<div className="flex-none">
|
||||
<div className="flex flex-wrap gap-2">
|
||||
{attachments.map((attachment, index) => (
|
||||
<div
|
||||
key={index}
|
||||
className="flex items-center gap-2 bg-gray-100 px-3 py-1 rounded-full text-sm"
|
||||
>
|
||||
<Paperclip className="h-4 w-4 text-gray-500" />
|
||||
<span>{attachment.name}</span>
|
||||
<button
|
||||
onClick={() => {
|
||||
const newAttachments = [...attachments];
|
||||
newAttachments.splice(index, 1);
|
||||
setAttachments(newAttachments);
|
||||
}}
|
||||
className="text-gray-500 hover:text-gray-700"
|
||||
>
|
||||
<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>
|
||||
);
|
||||
|
||||
Loading…
Reference in New Issue
Block a user