courrier refactor
This commit is contained in:
parent
7139d52100
commit
2beb44712c
@ -6,8 +6,10 @@ import {
|
|||||||
} from 'lucide-react';
|
} from 'lucide-react';
|
||||||
import { Button } from '@/components/ui/button';
|
import { Button } from '@/components/ui/button';
|
||||||
import { Input } from '@/components/ui/input';
|
import { Input } from '@/components/ui/input';
|
||||||
|
import { Textarea } from '@/components/ui/textarea';
|
||||||
import { Card, CardContent, CardHeader, CardTitle, CardFooter } from '@/components/ui/card';
|
import { Card, CardContent, CardHeader, CardTitle, CardFooter } from '@/components/ui/card';
|
||||||
import DOMPurify from 'isomorphic-dompurify';
|
import DOMPurify from 'isomorphic-dompurify';
|
||||||
|
import { Label } from '@/components/ui/label';
|
||||||
|
|
||||||
// Import ONLY from the centralized formatter
|
// Import ONLY from the centralized formatter
|
||||||
import {
|
import {
|
||||||
@ -186,12 +188,13 @@ export default function ComposeEmail(props: ComposeEmailAllProps) {
|
|||||||
setEmailContent(content);
|
setEmailContent(content);
|
||||||
}
|
}
|
||||||
|
|
||||||
// Create a local variable to avoid type comparison issues
|
// For type safety
|
||||||
const isNewEmail = type === 'new';
|
const isReplyType = (t: 'new' | 'reply' | 'reply-all' | 'forward'): t is 'reply' | 'reply-all' | 'forward' =>
|
||||||
|
t === 'reply' || t === 'reply-all' || t === 'forward';
|
||||||
|
|
||||||
// Focus editor after initializing content
|
// Focus editor after initializing content
|
||||||
setTimeout(() => {
|
setTimeout(() => {
|
||||||
if (!isNewEmail && editorRef.current) {
|
if (isReplyType(type) && editorRef.current) {
|
||||||
// For replies/forwards, focus contentEditable
|
// For replies/forwards, focus contentEditable
|
||||||
editorRef.current.focus();
|
editorRef.current.focus();
|
||||||
|
|
||||||
@ -555,83 +558,223 @@ function LegacyAdapter({
|
|||||||
replyTo,
|
replyTo,
|
||||||
forwardFrom
|
forwardFrom
|
||||||
}: LegacyComposeEmailProps) {
|
}: LegacyComposeEmailProps) {
|
||||||
// If not showing compose, return null
|
// Create a ref for the contentEditable div
|
||||||
if (!showCompose) {
|
const composeBodyRef = useRef<HTMLDivElement>(null);
|
||||||
return null;
|
|
||||||
}
|
|
||||||
|
|
||||||
// Determine email type
|
// Set the content of the contentEditable div on mount
|
||||||
const determineType = (): 'new' | 'reply' | 'reply-all' | 'forward' => {
|
useEffect(() => {
|
||||||
if (originalEmail) {
|
if (composeBodyRef.current && composeBody) {
|
||||||
return originalEmail.type;
|
composeBodyRef.current.innerHTML = composeBody;
|
||||||
}
|
}
|
||||||
|
}, [composeBody, showCompose]);
|
||||||
|
|
||||||
if (composeSubject.startsWith('Re:')) {
|
// Handle clicking the content editable area
|
||||||
return 'reply';
|
const handleComposeAreaClick = () => {
|
||||||
}
|
composeBodyRef.current?.focus();
|
||||||
|
|
||||||
if (composeSubject.startsWith('Fwd:')) {
|
|
||||||
return 'forward';
|
|
||||||
}
|
|
||||||
|
|
||||||
return 'new';
|
|
||||||
};
|
};
|
||||||
|
|
||||||
// Create email message object if needed for replies/forwards
|
// Handle input events on the contentEditable div
|
||||||
const emailForCompose = (() => {
|
const handleInput = () => {
|
||||||
const type = determineType();
|
if (composeBodyRef.current) {
|
||||||
|
setComposeBody(composeBodyRef.current.innerHTML);
|
||||||
// Only create an email object if we're replying or forwarding
|
|
||||||
if (type === 'new' || !composeBody) {
|
|
||||||
return null;
|
|
||||||
}
|
}
|
||||||
|
};
|
||||||
|
|
||||||
return {
|
// Handle file attachment
|
||||||
id: 'temp-id',
|
const handleFileAttachment = (e: React.ChangeEvent<HTMLInputElement>) => {
|
||||||
messageId: '',
|
if (!e.target.files || e.target.files.length === 0) return;
|
||||||
|
|
||||||
|
// Here you would normally process the files and add them to attachments
|
||||||
|
console.log('Files selected:', e.target.files);
|
||||||
|
|
||||||
|
// Just a placeholder - in a real implementation you'd convert files to the format needed
|
||||||
|
const newAttachments = Array.from(e.target.files).map(file => ({
|
||||||
|
name: file.name,
|
||||||
|
type: file.type,
|
||||||
|
size: file.size,
|
||||||
|
// In a real implementation you'd use FileReader to read the file content
|
||||||
|
}));
|
||||||
|
|
||||||
|
// Add to existing attachments
|
||||||
|
setAttachments([...attachments, ...newAttachments]);
|
||||||
|
};
|
||||||
|
|
||||||
|
// Handle send email action
|
||||||
|
const handleSendEmail = async () => {
|
||||||
|
// Call the provided onSend handler with the email data
|
||||||
|
await onSend({
|
||||||
|
to: composeTo,
|
||||||
|
cc: composeCc,
|
||||||
|
bcc: composeBcc,
|
||||||
subject: composeSubject,
|
subject: composeSubject,
|
||||||
from: [{ name: '', address: '' }],
|
body: composeBody,
|
||||||
to: [{ name: '', address: '' }],
|
attachments
|
||||||
date: new Date(),
|
});
|
||||||
content: composeBody,
|
};
|
||||||
html: composeBody,
|
|
||||||
hasAttachments: false
|
if (!showCompose) return null;
|
||||||
};
|
|
||||||
})();
|
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div className="fixed inset-0 bg-gray-600/30 backdrop-blur-sm z-50 flex items-center justify-center">
|
<div className="fixed inset-0 bg-gray-600/30 backdrop-blur-sm z-50 flex items-center justify-center">
|
||||||
<div className="w-full max-w-2xl max-h-[90vh] bg-white rounded-xl shadow-xl overflow-auto mx-4">
|
<div className="w-full max-w-2xl h-[90vh] bg-white rounded-xl shadow-xl flex flex-col mx-4">
|
||||||
<ComposeEmail
|
{/* Modal Header */}
|
||||||
initialEmail={emailForCompose}
|
<div className="flex-none flex items-center justify-between px-6 py-3 border-b border-gray-200">
|
||||||
type={determineType()}
|
<h3 className="text-lg font-semibold text-gray-900">
|
||||||
onClose={() => {
|
{replyTo ? 'Reply' : forwardFrom ? 'Forward' : 'New Message'}
|
||||||
onCancel?.();
|
</h3>
|
||||||
setShowCompose(false);
|
<Button
|
||||||
}}
|
variant="ghost"
|
||||||
onSend={async (emailData: {
|
size="icon"
|
||||||
to: string;
|
className="hover:bg-gray-100 rounded-full"
|
||||||
cc?: string;
|
onClick={onCancel}
|
||||||
bcc?: string;
|
>
|
||||||
subject: string;
|
<X className="h-5 w-5 text-gray-500" />
|
||||||
body: string;
|
</Button>
|
||||||
attachments?: Array<{
|
</div>
|
||||||
name: string;
|
|
||||||
content: string;
|
|
||||||
type: string;
|
|
||||||
}>;
|
|
||||||
}) => {
|
|
||||||
// Update legacy state before sending
|
|
||||||
setComposeTo(emailData.to);
|
|
||||||
if (emailData.cc) setComposeCc(emailData.cc);
|
|
||||||
if (emailData.bcc) setComposeBcc(emailData.bcc);
|
|
||||||
setComposeSubject(emailData.subject);
|
|
||||||
setComposeBody(emailData.body);
|
|
||||||
|
|
||||||
// Call the legacy onSend function
|
{/* Modal Body */}
|
||||||
await onSend(emailData);
|
<div className="flex-1 overflow-hidden">
|
||||||
}}
|
<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>
|
||||||
|
<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"
|
||||||
|
/>
|
||||||
|
</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 */}
|
||||||
|
{showCc && (
|
||||||
|
<div className="flex-none">
|
||||||
|
<Label htmlFor="cc" className="block text-sm font-medium text-gray-700">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"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
|
||||||
|
{/* BCC Field */}
|
||||||
|
{showBcc && (
|
||||||
|
<div className="flex-none">
|
||||||
|
<Label htmlFor="bcc" className="block text-sm font-medium text-gray-700">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"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
|
||||||
|
{/* Subject Field */}
|
||||||
|
<div className="flex-none">
|
||||||
|
<Label htmlFor="subject" className="block text-sm font-medium text-gray-700">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"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Message Body */}
|
||||||
|
<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>
|
||||||
|
<div
|
||||||
|
ref={composeBodyRef}
|
||||||
|
contentEditable="true"
|
||||||
|
onInput={handleInput}
|
||||||
|
onClick={handleComposeAreaClick}
|
||||||
|
className="flex-1 w-full bg-white border border-gray-300 rounded-md p-4 text-black overflow-y-auto focus:outline-none focus:ring-1 focus:ring-blue-500"
|
||||||
|
style={{
|
||||||
|
direction: 'ltr',
|
||||||
|
maxHeight: 'calc(100vh - 400px)',
|
||||||
|
minHeight: '200px',
|
||||||
|
overflowY: 'auto',
|
||||||
|
scrollbarWidth: 'thin',
|
||||||
|
scrollbarColor: '#cbd5e0 #f3f4f6',
|
||||||
|
cursor: 'text'
|
||||||
|
}}
|
||||||
|
dir="ltr"
|
||||||
|
spellCheck="true"
|
||||||
|
role="textbox"
|
||||||
|
aria-multiline="true"
|
||||||
|
tabIndex={0}
|
||||||
|
suppressContentEditableWarning={true}
|
||||||
|
/>
|
||||||
|
</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={handleSendEmail}
|
||||||
|
>
|
||||||
|
Send
|
||||||
|
</Button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
);
|
);
|
||||||
|
|||||||
Loading…
Reference in New Issue
Block a user