courrier clean 2
This commit is contained in:
parent
b0387982bf
commit
e3791fa583
@ -1602,34 +1602,107 @@ export default function CourrierPage() {
|
||||
|
||||
setSelectedEmail(updatedEmail);
|
||||
|
||||
// For forwarding, we need to set the isForwarding flag to true
|
||||
if (type === 'forward') {
|
||||
console.log('[DEBUG] Setting isForwarding flag for forwarding');
|
||||
setIsForwarding(true);
|
||||
} else {
|
||||
// For replying, we need to set isReplying to true
|
||||
console.log('[DEBUG] Setting isReplying to true for replying');
|
||||
setIsReplying(true);
|
||||
// Store the reply type in the component state if needed
|
||||
setReplyToEmail(updatedEmail);
|
||||
}
|
||||
// Format content directly here
|
||||
formatEmailAndShowCompose(updatedEmail, type);
|
||||
}
|
||||
} else {
|
||||
// Content already loaded, just set the flags
|
||||
if (type === 'forward') {
|
||||
console.log('[DEBUG] Setting isForwarding flag for forwarding (content already loaded)');
|
||||
setIsForwarding(true);
|
||||
} else {
|
||||
console.log('[DEBUG] Setting isReplying to true (content already loaded)');
|
||||
setIsReplying(true);
|
||||
setReplyToEmail(selectedEmail);
|
||||
// Content already loaded, format directly
|
||||
formatEmailAndShowCompose(selectedEmail, type);
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('[DEBUG] Error preparing email for reply/forward:', error);
|
||||
}
|
||||
};
|
||||
|
||||
// New helper function to directly format email content
|
||||
const formatEmailAndShowCompose = (email: Email, type: 'reply' | 'reply-all' | 'forward') => {
|
||||
try {
|
||||
console.log('[DEBUG] Formatting email for', type);
|
||||
|
||||
// Get email sender name and address
|
||||
const senderName = email.fromName || email.from.split('@')[0];
|
||||
const senderEmail = email.from;
|
||||
|
||||
// Format date properly
|
||||
const formattedDate = formatDate(new Date(email.date));
|
||||
|
||||
// Set flag for component rendering
|
||||
if (type === 'forward') {
|
||||
setIsForwarding(true);
|
||||
} else {
|
||||
setIsReplying(true);
|
||||
}
|
||||
|
||||
// Set recipients based on reply type
|
||||
if (type === 'reply') {
|
||||
setComposeTo(senderName ? `${senderName} <${senderEmail}>` : senderEmail);
|
||||
} else if (type === 'reply-all') {
|
||||
// To: original sender
|
||||
setComposeTo(senderName ? `${senderName} <${senderEmail}>` : senderEmail);
|
||||
|
||||
// CC: all other recipients (simplified)
|
||||
if (email.cc) {
|
||||
setComposeCc(email.cc);
|
||||
setShowCc(true);
|
||||
}
|
||||
}
|
||||
|
||||
// Format subject
|
||||
let subject = email.subject || 'No Subject';
|
||||
// Remove existing prefixes to avoid duplication
|
||||
subject = subject.replace(/^(Re|Fwd):\s*/gi, '');
|
||||
|
||||
// Add appropriate prefix
|
||||
if (type === 'forward') {
|
||||
subject = `Fwd: ${subject}`;
|
||||
} else {
|
||||
subject = `Re: ${subject}`;
|
||||
}
|
||||
setComposeSubject(subject);
|
||||
|
||||
// Format content
|
||||
let formattedContent = '';
|
||||
|
||||
if (type === 'forward') {
|
||||
formattedContent = `
|
||||
<div dir="ltr" style="text-align: left;">
|
||||
<br>
|
||||
<div style="border-left: 1px solid #ccc; padding-left: 1ex; margin-left: 0.8ex; direction: ltr; text-align: left;">
|
||||
<div style="font-weight: bold; margin-bottom: 10px; direction: ltr; text-align: left;">---------- Forwarded message ---------</div>
|
||||
<div style="margin-bottom: 10px; color: #555; font-size: 0.9em; direction: ltr; text-align: left;">
|
||||
<div><strong>From:</strong> ${senderName} <${senderEmail}></div>
|
||||
<div><strong>Date:</strong> ${formattedDate}</div>
|
||||
<div><strong>Subject:</strong> ${email.subject || 'No Subject'}</div>
|
||||
<div><strong>To:</strong> ${email.to || 'No Recipients'}</div>
|
||||
${email.cc ? `<div><strong>Cc:</strong> ${email.cc}</div>` : ''}
|
||||
</div>
|
||||
<hr style="border: none; border-top: 1px solid #ddd; margin: 10px 0;">
|
||||
<div style="direction: ltr; text-align: left;">${email.html || email.content || '<div style="padding: 10px; text-align: center; background-color: #f8f8f8; border: 1px dashed #ccc; margin: 10px 0;">No content available</div>'}</div>
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
} else {
|
||||
formattedContent = `
|
||||
<div dir="ltr" style="text-align: left;">
|
||||
<br>
|
||||
<blockquote style="margin: 0 0 0 0.8ex; border-left: 1px solid #ccc; padding-left: 1ex;">
|
||||
<div style="margin-bottom: 10px; color: #555; font-size: 0.9em; direction: ltr; text-align: left;">
|
||||
<div>On ${formattedDate}, ${senderName} <${senderEmail}> wrote:</div>
|
||||
</div>
|
||||
<div style="direction: ltr; text-align: left;">${email.html || email.content || 'No content available'}</div>
|
||||
</blockquote>
|
||||
</div>
|
||||
`;
|
||||
}
|
||||
|
||||
// Set the formatted content directly
|
||||
setComposeBody(formattedContent);
|
||||
|
||||
// Show the compose dialog
|
||||
setShowCompose(true);
|
||||
|
||||
} catch (error) {
|
||||
console.error('[DEBUG] Error preparing email for reply/forward:', error);
|
||||
console.error('[DEBUG] Error formatting email:', error);
|
||||
}
|
||||
};
|
||||
|
||||
@ -2308,8 +2381,6 @@ export default function CourrierPage() {
|
||||
attachments={attachments}
|
||||
setAttachments={setAttachments}
|
||||
handleSend={handleSend}
|
||||
replyTo={isReplying ? selectedEmail : null}
|
||||
forwardFrom={isForwarding ? selectedEmail : null}
|
||||
onSend={async (emailData) => {
|
||||
console.log('Email sent:', emailData);
|
||||
setShowCompose(false);
|
||||
|
||||
@ -7,8 +7,36 @@ import { Input } from '@/components/ui/input';
|
||||
import { Textarea } from '@/components/ui/textarea';
|
||||
import { Label } from '@/components/ui/label';
|
||||
import DOMPurify from 'isomorphic-dompurify';
|
||||
import { formatEmailForReply, formatEmailForForward, EmailMessageForFormatting } from '@/lib/email-formatter';
|
||||
|
||||
// Add a CSS style block to handle the direction properly
|
||||
const forceLTRStyles = `
|
||||
.force-ltr {
|
||||
direction: ltr !important;
|
||||
text-align: left !important;
|
||||
unicode-bidi: isolate !important;
|
||||
writing-mode: horizontal-tb !important;
|
||||
}
|
||||
.force-ltr * {
|
||||
direction: ltr !important;
|
||||
text-align: left !important;
|
||||
unicode-bidi: isolate !important;
|
||||
}
|
||||
[dir="rtl"] .force-ltr,
|
||||
[dir="rtl"] .force-ltr * {
|
||||
direction: ltr !important;
|
||||
text-align: left !important;
|
||||
}
|
||||
.email-content {
|
||||
direction: ltr !important;
|
||||
text-align: left !important;
|
||||
}
|
||||
.email-content * {
|
||||
direction: ltr !important;
|
||||
text-align: left !important;
|
||||
}
|
||||
`;
|
||||
|
||||
// Nous simplifions l'interface car nous n'utilisons plus ces props
|
||||
interface EmailObject {
|
||||
id?: string;
|
||||
from?: string;
|
||||
@ -54,6 +82,7 @@ interface ComposeEmailProps {
|
||||
};
|
||||
onSend: (email: any) => Promise<void>;
|
||||
onCancel: () => void;
|
||||
// Nous laissons ces props pour la rétrocompatibilité mais nous ne les utilisons plus
|
||||
replyTo?: EmailObject | null;
|
||||
forwardFrom?: EmailObject | null;
|
||||
}
|
||||
@ -79,6 +108,7 @@ export default function ComposeEmail({
|
||||
setAttachments,
|
||||
handleSend,
|
||||
originalEmail,
|
||||
// replyTo et forwardFrom ne sont plus utilisés
|
||||
replyTo,
|
||||
forwardFrom,
|
||||
onSend,
|
||||
@ -87,112 +117,41 @@ export default function ComposeEmail({
|
||||
const [isSending, setIsSending] = useState(false);
|
||||
const fileInputRef = useRef<HTMLInputElement>(null);
|
||||
const contentEditableRef = useRef<HTMLDivElement>(null);
|
||||
const [useRichEditor, setUseRichEditor] = useState(false);
|
||||
// Si nous avons un contenu préformaté, nous utilisons toujours l'éditeur riche
|
||||
const [useRichEditor, setUseRichEditor] = useState(!!composeBody);
|
||||
const [userMessage, setUserMessage] = useState('');
|
||||
// Nous extrarons la partie de contenu citée du corps de l'email préformaté
|
||||
const [quotedContent, setQuotedContent] = useState('');
|
||||
const [hasStartedTyping, setHasStartedTyping] = useState(false);
|
||||
|
||||
useEffect(() => {
|
||||
// When forwarding or replying, use rich editor
|
||||
setUseRichEditor(!!replyTo || !!forwardFrom);
|
||||
}, [replyTo, forwardFrom]);
|
||||
|
||||
useEffect(() => {
|
||||
// Initialize reply if replyTo is provided
|
||||
if (replyTo) {
|
||||
initializeReplyEmail(replyTo);
|
||||
// Utiliser l'éditeur riche si nous avons du contenu HTML
|
||||
if (composeBody && composeBody.includes('<')) {
|
||||
setUseRichEditor(true);
|
||||
|
||||
// Séparer le contenu de l'utilisateur (vide) et le contenu cité (préformaté)
|
||||
setUserMessage('');
|
||||
setQuotedContent(composeBody);
|
||||
}
|
||||
}, [replyTo, setComposeTo, setComposeSubject, setComposeBody]);
|
||||
|
||||
useEffect(() => {
|
||||
// Initialize forward email if forwardFrom is provided
|
||||
if (forwardFrom) {
|
||||
initializeForwardedEmail(forwardFrom);
|
||||
}
|
||||
}, [forwardFrom]);
|
||||
}, [composeBody]);
|
||||
|
||||
// Initialize forwarded email content
|
||||
const initializeForwardedEmail = async (email: any) => {
|
||||
console.log("Initializing forwarded email", email);
|
||||
try {
|
||||
// Convert the email to the format expected by our formatter
|
||||
const emailForFormatting: EmailMessageForFormatting = {
|
||||
subject: email.subject,
|
||||
from: email.from,
|
||||
to: email.to,
|
||||
date: email.date,
|
||||
html: email.html || email.content,
|
||||
text: email.text,
|
||||
cc: email.cc,
|
||||
bcc: email.bcc
|
||||
};
|
||||
// Nous n'avons plus besoin de ces effets qui initialisaient replyTo et forwardFrom
|
||||
// useEffect(() => {
|
||||
// if (replyTo) {
|
||||
// initializeReplyEmail(replyTo);
|
||||
// }
|
||||
// }, [replyTo, setComposeTo, setComposeSubject, setComposeBody]);
|
||||
//
|
||||
// useEffect(() => {
|
||||
// if (forwardFrom) {
|
||||
// initializeForwardedEmail(forwardFrom);
|
||||
// }
|
||||
// }, [forwardFrom]);
|
||||
|
||||
// Use the client-side formatter
|
||||
const formattedEmail = formatEmailForForward(emailForFormatting);
|
||||
|
||||
setComposeSubject(formattedEmail.subject);
|
||||
// The email-formatter already adds proper direction, no need for extra wrappers
|
||||
setQuotedContent(formattedEmail.body);
|
||||
setComposeBody(''); // Clear user message when forwarding
|
||||
} catch (error) {
|
||||
console.error("Error initializing forwarded email:", error);
|
||||
setQuotedContent(`
|
||||
<div style="padding: 10px; text-align: center; background-color: #f8f8f8; border: 1px dashed #ccc; margin: 10px 0;">
|
||||
Error loading original message content
|
||||
</div>
|
||||
`);
|
||||
}
|
||||
};
|
||||
|
||||
// Initialize reply email content
|
||||
const initializeReplyEmail = async (email: any, replyType: 'reply' | 'replyAll' = 'reply') => {
|
||||
console.log("Initializing reply email", email, replyType);
|
||||
try {
|
||||
// Convert the email to the format expected by our formatter
|
||||
const emailForFormatting: EmailMessageForFormatting = {
|
||||
subject: email.subject,
|
||||
from: email.from,
|
||||
to: email.to,
|
||||
date: email.date,
|
||||
html: email.html || email.content,
|
||||
text: email.text,
|
||||
cc: email.cc,
|
||||
bcc: email.bcc
|
||||
};
|
||||
|
||||
// Use the client-side formatter
|
||||
const formattedEmail = formatEmailForReply(emailForFormatting, replyType);
|
||||
|
||||
setComposeSubject(formattedEmail.subject);
|
||||
|
||||
// Set recipients
|
||||
if (formattedEmail.to) {
|
||||
const toAddresses = formattedEmail.to.map(recipient =>
|
||||
recipient.name ? `${recipient.name} <${recipient.address}>` : recipient.address
|
||||
).join(', ');
|
||||
setComposeTo(toAddresses);
|
||||
}
|
||||
|
||||
if (formattedEmail.cc && formattedEmail.cc.length > 0) {
|
||||
const ccAddresses = formattedEmail.cc.map(recipient =>
|
||||
recipient.name ? `${recipient.name} <${recipient.address}>` : recipient.address
|
||||
).join(', ');
|
||||
setComposeCc(ccAddresses);
|
||||
setShowCc(true);
|
||||
}
|
||||
|
||||
// The email-formatter already adds proper direction, no need for extra wrappers
|
||||
setQuotedContent(formattedEmail.body);
|
||||
setComposeBody(''); // Clear user message when replying
|
||||
} catch (error) {
|
||||
console.error("Error initializing reply email:", error);
|
||||
setQuotedContent(`
|
||||
<div style="padding: 10px; text-align: center; background-color: #f8f8f8; border: 1px dashed #ccc; margin: 10px 0;">
|
||||
Error loading original message content
|
||||
</div>
|
||||
`);
|
||||
}
|
||||
};
|
||||
// Nous n'avons plus besoin de ces fonctions qui initialisaient le contenu
|
||||
// via formatEmailForReply et formatEmailForForward
|
||||
// const initializeForwardedEmail = async (email: any) => {...};
|
||||
// const initializeReplyEmail = async (email: any, replyType: 'reply' | 'replyAll' = 'reply') => {...};
|
||||
|
||||
// Handle file attachment selection
|
||||
const handleFileAttachment = (e: React.ChangeEvent<HTMLInputElement>) => {
|
||||
@ -276,32 +235,7 @@ export default function ComposeEmail({
|
||||
{showCompose && (
|
||||
<div className="fixed inset-0 bg-gray-600/30 backdrop-blur-sm z-50 flex items-center justify-center">
|
||||
{/* Add global styles for email direction */}
|
||||
<style dangerouslySetInnerHTML={{ __html: `
|
||||
.force-ltr {
|
||||
direction: ltr !important;
|
||||
text-align: left !important;
|
||||
unicode-bidi: isolate !important;
|
||||
writing-mode: horizontal-tb !important;
|
||||
}
|
||||
.force-ltr * {
|
||||
direction: ltr !important;
|
||||
text-align: left !important;
|
||||
unicode-bidi: isolate !important;
|
||||
}
|
||||
[dir="rtl"] .force-ltr,
|
||||
[dir="rtl"] .force-ltr * {
|
||||
direction: ltr !important;
|
||||
text-align: left !important;
|
||||
}
|
||||
.email-content {
|
||||
direction: ltr !important;
|
||||
text-align: left !important;
|
||||
}
|
||||
.email-content * {
|
||||
direction: ltr !important;
|
||||
text-align: left !important;
|
||||
}
|
||||
`}} />
|
||||
<style dangerouslySetInnerHTML={{ __html: forceLTRStyles }} />
|
||||
|
||||
<div className="w-full max-w-2xl h-[80vh] bg-white rounded-xl shadow-xl flex flex-col mx-4">
|
||||
{/* Modal Header */}
|
||||
|
||||
Loading…
Reference in New Issue
Block a user