courrier clean 2
This commit is contained in:
parent
c0153a2aef
commit
8137b42c5f
@ -256,10 +256,51 @@ export default function ComposeEmail(props: ComposeEmailAllProps) {
|
||||
// Initialize the form when replying to or forwarding an email
|
||||
useEffect(() => {
|
||||
if (initialEmail && type !== 'new') {
|
||||
// For all types of emails, format with a consistent approach
|
||||
let formattedContent = '';
|
||||
|
||||
if (type === 'forward') {
|
||||
initializeForwardedEmail();
|
||||
// Format subject with Fwd: prefix if needed
|
||||
const subjectBase = initialEmail.subject || '(No subject)';
|
||||
const subjectRegex = /^(Fwd|FW|Forward):\s*/i;
|
||||
const subject = subjectRegex.test(subjectBase)
|
||||
? subjectBase
|
||||
: `Fwd: ${subjectBase}`;
|
||||
|
||||
setSubject(subject);
|
||||
|
||||
// Format forwarded content
|
||||
const fromString = initialEmail.from?.map(addr =>
|
||||
addr.name ? `${addr.name} <${addr.address}>` : addr.address
|
||||
).join(', ') || '';
|
||||
|
||||
const toString = initialEmail.to?.map(addr =>
|
||||
addr.name ? `${addr.name} <${addr.address}>` : addr.address
|
||||
).join(', ') || '';
|
||||
|
||||
const dateString = typeof initialEmail.date === 'string'
|
||||
? new Date(initialEmail.date).toLocaleString()
|
||||
: initialEmail.date.toLocaleString();
|
||||
|
||||
const originalContent = initialEmail.content || initialEmail.html || initialEmail.text || '';
|
||||
|
||||
formattedContent = `
|
||||
<br><br>
|
||||
<div style="border-top: 1px solid #ccc; margin-top: 20px; padding-top: 10px;">
|
||||
<div style="font-family: Arial, sans-serif; color: #333;">
|
||||
<div style="margin-bottom: 15px;">
|
||||
<div>---------- Forwarded message ---------</div>
|
||||
<div><b>From:</b> ${fromString}</div>
|
||||
<div><b>Date:</b> ${dateString}</div>
|
||||
<div><b>Subject:</b> ${initialEmail.subject || ''}</div>
|
||||
<div><b>To:</b> ${toString}</div>
|
||||
</div>
|
||||
<div>${originalContent}</div>
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
} else {
|
||||
// For reply/reply-all, continue using formatEmailForReplyOrForward
|
||||
// For reply/reply-all
|
||||
const formattedEmail = formatEmailForReplyOrForward(initialEmail, type as 'reply' | 'reply-all');
|
||||
|
||||
setTo(formattedEmail.to);
|
||||
@ -271,12 +312,14 @@ export default function ComposeEmail(props: ComposeEmailAllProps) {
|
||||
|
||||
setSubject(formattedEmail.subject);
|
||||
|
||||
// Make the entire content editable, just like with forwarded emails
|
||||
const bodyContent = formattedEmail.body;
|
||||
setUserMessage(bodyContent);
|
||||
setBody(bodyContent);
|
||||
// Set the reply content with proper formatting
|
||||
formattedContent = formattedEmail.body;
|
||||
}
|
||||
|
||||
// Set the entire content as one editable area
|
||||
setBody(formattedContent);
|
||||
setUserMessage(formattedContent);
|
||||
|
||||
// Focus editor after initializing
|
||||
setTimeout(() => {
|
||||
if (editorRef.current) {
|
||||
@ -460,7 +503,7 @@ export default function ComposeEmail(props: ComposeEmailAllProps) {
|
||||
}
|
||||
};
|
||||
|
||||
// Modified send handler to combine user message with forwarded content
|
||||
// Modified send handler to use the entire body content
|
||||
const handleSend = async () => {
|
||||
if (!to) {
|
||||
alert('Please specify at least one recipient');
|
||||
@ -470,50 +513,13 @@ export default function ComposeEmail(props: ComposeEmailAllProps) {
|
||||
try {
|
||||
setSending(true);
|
||||
|
||||
// Prepare the complete email body
|
||||
let finalBody = body;
|
||||
|
||||
if (type === 'forward' && originalContent) {
|
||||
// For forwarded emails, construct the email in a standard format
|
||||
const fromString = initialEmail?.from?.map(addr =>
|
||||
addr.name ? `${addr.name} <${addr.address}>` : addr.address
|
||||
).join(', ') || '';
|
||||
|
||||
const toString = initialEmail?.to?.map(addr =>
|
||||
addr.name ? `${addr.name} <${addr.address}>` : addr.address
|
||||
).join(', ') || '';
|
||||
|
||||
const dateString = initialEmail?.date
|
||||
? typeof initialEmail.date === 'string'
|
||||
? new Date(initialEmail.date).toLocaleString()
|
||||
: initialEmail.date.toLocaleString()
|
||||
: '';
|
||||
|
||||
// Combine user message with forwarded header and content
|
||||
finalBody = `
|
||||
${userMessage}
|
||||
<br><br>
|
||||
<div style="border-top: 1px solid #ccc; margin-top: 20px; padding-top: 10px;">
|
||||
<div style="font-family: Arial, sans-serif; color: #333;">
|
||||
<div style="margin-bottom: 15px;">
|
||||
<div>---------- Forwarded message ---------</div>
|
||||
<div><b>From:</b> ${fromString}</div>
|
||||
<div><b>Date:</b> ${dateString}</div>
|
||||
<div><b>Subject:</b> ${initialEmail?.subject || ''}</div>
|
||||
<div><b>To:</b> ${toString}</div>
|
||||
</div>
|
||||
<div>${originalContent}</div>
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
}
|
||||
|
||||
// Use the complete edited content as is
|
||||
await onSend({
|
||||
to,
|
||||
cc: cc || undefined,
|
||||
bcc: bcc || undefined,
|
||||
subject,
|
||||
body: finalBody,
|
||||
body: userMessage, // Use the full edited message
|
||||
attachments
|
||||
});
|
||||
|
||||
@ -526,7 +532,7 @@ export default function ComposeEmail(props: ComposeEmailAllProps) {
|
||||
}
|
||||
};
|
||||
|
||||
// Handle editor input
|
||||
// Handle editor input for the entire content
|
||||
const handleEditorInput = (e: React.FormEvent<HTMLDivElement>) => {
|
||||
if (editorRef.current) {
|
||||
const content = editorRef.current.innerHTML;
|
||||
@ -653,53 +659,19 @@ export default function ComposeEmail(props: ComposeEmailAllProps) {
|
||||
</Button>
|
||||
</div>
|
||||
|
||||
{/* Email editor with clear separation between user message and original content */}
|
||||
{/* Email editor with a single editable area for the entire message */}
|
||||
<div className="border rounded-md overflow-hidden">
|
||||
{/* User's editable message area */}
|
||||
<div
|
||||
ref={editorRef}
|
||||
contentEditable={!sending}
|
||||
className="w-full p-4 min-h-[100px] focus:outline-none"
|
||||
className="w-full p-4 min-h-[300px] focus:outline-none"
|
||||
onInput={handleEditorInput}
|
||||
dangerouslySetInnerHTML={{ __html: DOMPurify.sanitize(body) }}
|
||||
style={{
|
||||
direction: isRTL ? 'rtl' : 'ltr',
|
||||
textAlign: isRTL ? 'right' : 'left'
|
||||
}}
|
||||
/>
|
||||
|
||||
{/* Original content display with visual separation */}
|
||||
{type !== 'new' && originalContent && (
|
||||
<div className="border-t">
|
||||
<div className="px-4 py-2 bg-gray-50 text-xs font-medium text-gray-500 flex justify-between items-center">
|
||||
<span>{type === 'forward' ? 'Forwarded content (original)' : 'Original message'}</span>
|
||||
<Button
|
||||
variant="ghost"
|
||||
size="sm"
|
||||
onClick={toggleEditOriginalContent}
|
||||
className="h-6 px-2 text-xs"
|
||||
>
|
||||
{editingOriginalContent ? 'Done Editing' : 'Edit Content'}
|
||||
</Button>
|
||||
</div>
|
||||
<div className="p-4 bg-gray-50 border-t overflow-auto max-h-[400px]">
|
||||
{editingOriginalContent ? (
|
||||
<div
|
||||
ref={originalContentRef}
|
||||
contentEditable={true}
|
||||
className="forwarded-content text-sm outline-none"
|
||||
dangerouslySetInnerHTML={{ __html: DOMPurify.sanitize(originalContent) }}
|
||||
onInput={handleOriginalContentInput}
|
||||
/>
|
||||
) : (
|
||||
<div
|
||||
className="forwarded-content text-sm cursor-text"
|
||||
dangerouslySetInnerHTML={{ __html: DOMPurify.sanitize(originalContent) }}
|
||||
onClick={handleOriginalContentClick}
|
||||
/>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
Loading…
Reference in New Issue
Block a user