courrier clean 2
This commit is contained in:
parent
f117d66626
commit
638a2ee895
@ -86,6 +86,7 @@ export default function ComposeEmail({
|
||||
const [sending, setSending] = useState(false);
|
||||
const editorRef = useRef<HTMLDivElement>(null);
|
||||
const fileInputRef = useRef<HTMLInputElement>(null);
|
||||
const composeBodyRef = useRef<HTMLDivElement>(null);
|
||||
|
||||
useEffect(() => {
|
||||
if (editorRef.current) {
|
||||
@ -101,7 +102,19 @@ export default function ComposeEmail({
|
||||
const formattedEmail = formatEmailForReply(replyTo as any, 'reply');
|
||||
setComposeTo(formattedEmail.to);
|
||||
setComposeSubject(formattedEmail.subject);
|
||||
setComposeBody(formattedEmail.body);
|
||||
|
||||
// Use the body but preserve the original UI styling
|
||||
// Extract just the content portion from the client formatter output
|
||||
// and apply the original styling
|
||||
let bodyContent = formattedEmail.body;
|
||||
|
||||
// Apply DOMPurify to the content for safety
|
||||
bodyContent = DOMPurify.sanitize(bodyContent, {
|
||||
ADD_TAGS: ['style'],
|
||||
FORBID_TAGS: ['script', 'iframe']
|
||||
});
|
||||
|
||||
setComposeBody(bodyContent);
|
||||
|
||||
// Show CC if needed for reply-all
|
||||
if (formattedEmail.cc) {
|
||||
@ -116,36 +129,49 @@ export default function ComposeEmail({
|
||||
|
||||
// Initialize forwarded email content
|
||||
const initializeForwardedEmail = async (email: any) => {
|
||||
console.log('Initializing forwarded email:', email);
|
||||
if (!email) return;
|
||||
|
||||
console.log('Initializing forwarded email:', email);
|
||||
|
||||
// Use our client-side formatter
|
||||
const formattedEmail = formatEmailForForward(email);
|
||||
|
||||
// Set the formatted subject with Fwd: prefix
|
||||
setComposeSubject(formattedEmail.subject);
|
||||
|
||||
// Get the email content and create a forward with proper formatting
|
||||
let finalContent = '';
|
||||
// Create header for forwarded email - use the original styling
|
||||
const headerHtml = formattedEmail.headerHtml;
|
||||
|
||||
// Add the email header with proper styling
|
||||
finalContent += formattedEmail.headerHtml;
|
||||
// Prepare content
|
||||
let contentHtml = '<div style="color: #666; font-style: italic; padding: 15px; border: 1px dashed #ccc; margin: 10px 0; text-align: center; background-color: #f9f9f9;">No content available</div>';
|
||||
|
||||
// Add the original content
|
||||
if (email.content) {
|
||||
finalContent += email.content;
|
||||
// Sanitize the content
|
||||
contentHtml = DOMPurify.sanitize(email.content, {
|
||||
ADD_TAGS: ['style'],
|
||||
FORBID_TAGS: ['script', 'iframe']
|
||||
});
|
||||
} else if (email.html) {
|
||||
finalContent += email.html;
|
||||
contentHtml = DOMPurify.sanitize(email.html, {
|
||||
ADD_TAGS: ['style'],
|
||||
FORBID_TAGS: ['script', 'iframe']
|
||||
});
|
||||
} else if (email.text) {
|
||||
finalContent += `<pre>${email.text}</pre>`;
|
||||
contentHtml = `<pre>${email.text}</pre>`;
|
||||
} else if (email.body) {
|
||||
finalContent += email.body;
|
||||
} else {
|
||||
finalContent += `<div style="border: 1px dashed #ccc; padding: 10px; margin: 10px 0; text-align: center; background-color: #f9f9f9;">
|
||||
No content available
|
||||
</div>`;
|
||||
contentHtml = DOMPurify.sanitize(email.body, {
|
||||
ADD_TAGS: ['style'],
|
||||
FORBID_TAGS: ['script', 'iframe']
|
||||
});
|
||||
}
|
||||
|
||||
setComposeBody(finalContent);
|
||||
// Set body with header and content, preserving the original UI layout
|
||||
setComposeBody(`
|
||||
${headerHtml}
|
||||
<div style="margin-top: 10px;">
|
||||
${contentHtml}
|
||||
</div>
|
||||
`);
|
||||
};
|
||||
|
||||
if (!showCompose) return null;
|
||||
@ -162,99 +188,106 @@ export default function ComposeEmail({
|
||||
}
|
||||
};
|
||||
|
||||
// Body input area
|
||||
const renderBodyInput = () => (
|
||||
<div
|
||||
className="min-h-[200px] max-h-[400px] overflow-y-auto p-3 bg-white border border-gray-300 rounded-md"
|
||||
contentEditable
|
||||
dangerouslySetInnerHTML={{ __html: composeBody || '' }}
|
||||
onInput={(e) => {
|
||||
const target = e.target as HTMLDivElement;
|
||||
setComposeBody(target.innerHTML);
|
||||
}}
|
||||
ref={composeBodyRef}
|
||||
style={{ direction: 'ltr' }}
|
||||
/>
|
||||
);
|
||||
|
||||
return (
|
||||
<div className="fixed inset-0 bg-black/60 flex items-center justify-center z-50 p-4">
|
||||
<Card className="w-full max-w-3xl">
|
||||
<CardHeader className="flex flex-row items-center border-b p-4">
|
||||
<CardTitle className="text-lg">
|
||||
{replyTo ? 'Reply' : forwardFrom ? 'Forward' : 'New Message'}
|
||||
</CardTitle>
|
||||
<Button
|
||||
variant="ghost"
|
||||
size="icon"
|
||||
className="ml-auto"
|
||||
onClick={onCancel}
|
||||
>
|
||||
<X className="h-4 w-4" />
|
||||
<Card className={`fixed inset-0 z-50 mx-auto my-8 max-w-3xl rounded-md bg-white shadow-lg flex flex-col ${showCompose ? 'block' : 'hidden'}`} style={{ maxHeight: 'calc(100vh - 4rem)' }}>
|
||||
<CardHeader className="bg-white p-4 border-b">
|
||||
<div className="flex justify-between items-center">
|
||||
<CardTitle className="text-xl font-semibold text-gray-800">{replyTo ? 'Reply' : forwardFrom ? 'Forward' : 'New Message'}</CardTitle>
|
||||
<Button variant="ghost" size="icon" onClick={onCancel}>
|
||||
<X className="h-5 w-5" />
|
||||
</Button>
|
||||
</CardHeader>
|
||||
<CardContent className="p-4 space-y-4">
|
||||
<div className="space-y-2">
|
||||
<div className="flex items-center border-b py-2">
|
||||
<span className="w-16 text-sm text-gray-500">To:</span>
|
||||
<Input
|
||||
value={composeTo}
|
||||
onChange={(e) => setComposeTo(e.target.value)}
|
||||
className="border-0 focus-visible:ring-0"
|
||||
placeholder="recipient@example.com"
|
||||
/>
|
||||
</div>
|
||||
|
||||
{showCc && (
|
||||
<div className="flex items-center border-b py-2">
|
||||
<span className="w-16 text-sm text-gray-500">Cc:</span>
|
||||
<Input
|
||||
value={composeCc}
|
||||
onChange={(e) => setComposeCc(e.target.value)}
|
||||
className="border-0 focus-visible:ring-0"
|
||||
placeholder="cc@example.com"
|
||||
/>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{showBcc && (
|
||||
<div className="flex items-center border-b py-2">
|
||||
<span className="w-16 text-sm text-gray-500">Bcc:</span>
|
||||
<Input
|
||||
value={composeBcc}
|
||||
onChange={(e) => setComposeBcc(e.target.value)}
|
||||
className="border-0 focus-visible:ring-0"
|
||||
placeholder="bcc@example.com"
|
||||
/>
|
||||
</div>
|
||||
)}
|
||||
|
||||
<div className="flex items-center border-b py-2">
|
||||
<span className="w-16 text-sm text-gray-500">Subject:</span>
|
||||
<Input
|
||||
value={composeSubject}
|
||||
onChange={(e) => setComposeSubject(e.target.value)}
|
||||
className="border-0 focus-visible:ring-0"
|
||||
placeholder="Subject"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="flex items-center text-xs text-blue-600 space-x-2 py-1">
|
||||
{!showCc && (
|
||||
<button onClick={() => setShowCc(true)} className="hover:underline">
|
||||
Add Cc
|
||||
</button>
|
||||
)}
|
||||
{!showBcc && (
|
||||
<button onClick={() => setShowBcc(true)} className="hover:underline">
|
||||
Add Bcc
|
||||
</button>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</CardHeader>
|
||||
<CardContent className="flex-grow overflow-auto p-4 bg-white">
|
||||
<div className="space-y-4">
|
||||
<div className="flex items-center">
|
||||
<span className="w-16 text-sm font-medium text-gray-600">To:</span>
|
||||
<Input
|
||||
className="flex-1 bg-white"
|
||||
value={composeTo}
|
||||
onChange={(e) => setComposeTo(e.target.value)}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div
|
||||
ref={editorRef}
|
||||
className="min-h-[300px] p-2 focus:outline-none overflow-auto"
|
||||
contentEditable
|
||||
dangerouslySetInnerHTML={{ __html: composeBody }}
|
||||
onInput={(e) => setComposeBody(e.currentTarget.innerHTML)}
|
||||
/>
|
||||
{showCc && (
|
||||
<div className="flex items-center">
|
||||
<span className="w-16 text-sm font-medium text-gray-600">Cc:</span>
|
||||
<Input
|
||||
className="flex-1 bg-white"
|
||||
value={composeCc}
|
||||
onChange={(e) => setComposeCc(e.target.value)}
|
||||
/>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{showBcc && (
|
||||
<div className="flex items-center">
|
||||
<span className="w-16 text-sm font-medium text-gray-600">Bcc:</span>
|
||||
<Input
|
||||
className="flex-1 bg-white"
|
||||
value={composeBcc}
|
||||
onChange={(e) => setComposeBcc(e.target.value)}
|
||||
/>
|
||||
</div>
|
||||
)}
|
||||
|
||||
<div className="flex">
|
||||
<Button variant="link" onClick={() => setShowCc(!showCc)} className="p-0 h-auto text-sm">
|
||||
{showCc ? (
|
||||
<ChevronUp className="h-4 w-4 mr-1" />
|
||||
) : (
|
||||
<ChevronDown className="h-4 w-4 mr-1" />
|
||||
)}
|
||||
Cc
|
||||
</Button>
|
||||
<Button variant="link" onClick={() => setShowBcc(!showBcc)} className="p-0 h-auto text-sm ml-4">
|
||||
{showBcc ? (
|
||||
<ChevronUp className="h-4 w-4 mr-1" />
|
||||
) : (
|
||||
<ChevronDown className="h-4 w-4 mr-1" />
|
||||
)}
|
||||
Bcc
|
||||
</Button>
|
||||
</div>
|
||||
|
||||
<div className="flex items-center">
|
||||
<span className="w-16 text-sm font-medium text-gray-600">Subject:</span>
|
||||
<Input
|
||||
className="flex-1 bg-white"
|
||||
value={composeSubject}
|
||||
onChange={(e) => setComposeSubject(e.target.value)}
|
||||
/>
|
||||
</div>
|
||||
|
||||
{renderBodyInput()}
|
||||
|
||||
{attachments.length > 0 && (
|
||||
<div className="border-t pt-3">
|
||||
<h4 className="text-sm font-medium mb-2">Attachments</h4>
|
||||
<div className="mt-4">
|
||||
<h4 className="text-sm font-medium text-gray-600 mb-2">Attachments:</h4>
|
||||
<div className="flex flex-wrap gap-2">
|
||||
{attachments.map((attachment, index) => (
|
||||
<div key={index} className="flex items-center bg-gray-100 rounded px-2 py-1">
|
||||
<span className="text-sm truncate max-w-[150px]">{attachment.name}</span>
|
||||
<button
|
||||
className="ml-1 text-gray-500 hover:text-gray-700"
|
||||
{attachments.map((file, index) => (
|
||||
<div key={index} className="flex items-center bg-gray-100 rounded-md p-2">
|
||||
<Paperclip className="h-4 w-4 mr-2 text-gray-500" />
|
||||
<span className="text-sm mr-2">{file.name}</span>
|
||||
<Button
|
||||
variant="ghost"
|
||||
size="icon"
|
||||
className="h-5 w-5 p-0 hover:bg-gray-200"
|
||||
onClick={() => {
|
||||
const newAttachments = [...attachments];
|
||||
newAttachments.splice(index, 1);
|
||||
@ -262,59 +295,55 @@ export default function ComposeEmail({
|
||||
}}
|
||||
>
|
||||
<X className="h-3 w-3" />
|
||||
</button>
|
||||
</Button>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</CardContent>
|
||||
<CardFooter className="border-t p-4 flex justify-between">
|
||||
<div className="flex items-center space-x-2">
|
||||
<input
|
||||
type="file"
|
||||
ref={fileInputRef}
|
||||
className="hidden"
|
||||
onChange={handleFileSelection}
|
||||
multiple
|
||||
/>
|
||||
<Button
|
||||
variant="outline"
|
||||
size="sm"
|
||||
onClick={() => fileInputRef.current?.click()}
|
||||
>
|
||||
<Paperclip className="h-4 w-4 mr-1" />
|
||||
Attach
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
</CardContent>
|
||||
<CardFooter className="flex justify-between p-4 border-t bg-white">
|
||||
<div className="flex gap-2">
|
||||
<Button
|
||||
onClick={async () => {
|
||||
setSending(true);
|
||||
try {
|
||||
await handleSend();
|
||||
onCancel();
|
||||
} catch (error) {
|
||||
console.error('Error sending email:', error);
|
||||
} finally {
|
||||
setSending(false);
|
||||
}
|
||||
}}
|
||||
disabled={sending || !composeTo.trim()}
|
||||
variant="outline"
|
||||
onClick={handleFileSelection}
|
||||
className="flex items-center gap-1 bg-white"
|
||||
>
|
||||
{sending ? (
|
||||
<>
|
||||
<Loader2 className="h-4 w-4 mr-1 animate-spin" />
|
||||
Sending...
|
||||
</>
|
||||
) : (
|
||||
<>
|
||||
<SendHorizontal className="h-4 w-4 mr-1" />
|
||||
Send
|
||||
</>
|
||||
)}
|
||||
<Paperclip className="h-4 w-4" />
|
||||
Attach
|
||||
</Button>
|
||||
</CardFooter>
|
||||
</Card>
|
||||
</div>
|
||||
<input
|
||||
type="file"
|
||||
ref={fileInputRef}
|
||||
className="hidden"
|
||||
onChange={handleFileSelection}
|
||||
multiple
|
||||
/>
|
||||
</div>
|
||||
<Button
|
||||
onClick={async () => {
|
||||
setSending(true);
|
||||
try {
|
||||
await handleSend();
|
||||
onCancel();
|
||||
} catch (error) {
|
||||
console.error('Error sending email:', error);
|
||||
} finally {
|
||||
setSending(false);
|
||||
}
|
||||
}}
|
||||
disabled={sending || !composeTo.trim()}
|
||||
className="flex items-center gap-2"
|
||||
>
|
||||
{sending ? (
|
||||
<Loader2 className="h-4 w-4 animate-spin" />
|
||||
) : (
|
||||
<SendHorizontal className="h-4 w-4" />
|
||||
)}
|
||||
Send
|
||||
</Button>
|
||||
</CardFooter>
|
||||
</Card>
|
||||
);
|
||||
}
|
||||
Loading…
Reference in New Issue
Block a user