courrier refactor rebuild 2
This commit is contained in:
parent
021df6b169
commit
c3284982b5
@ -181,40 +181,8 @@ export default function ComposeEmail(props: ComposeEmailAllProps) {
|
||||
const subject = subjectBase.match(/^Re:/i) ? subjectBase : `Re: ${subjectBase}`;
|
||||
setSubject(subject);
|
||||
|
||||
// Format the reply content with the quoted message included directly
|
||||
const content = initialEmail.content || initialEmail.html || initialEmail.text || '';
|
||||
const sender = initialEmail.from && initialEmail.from.length > 0
|
||||
? initialEmail.from[0].name || initialEmail.from[0].address
|
||||
: 'Unknown sender';
|
||||
const date = initialEmail.date ?
|
||||
(typeof initialEmail.date === 'string' ? new Date(initialEmail.date) : initialEmail.date) :
|
||||
new Date();
|
||||
|
||||
// Format date for display
|
||||
const formattedDate = date.toLocaleString('en-US', {
|
||||
weekday: 'short',
|
||||
year: 'numeric',
|
||||
month: 'short',
|
||||
day: 'numeric',
|
||||
hour: '2-digit',
|
||||
minute: '2-digit'
|
||||
});
|
||||
|
||||
// Create reply content with quote
|
||||
const replyContent = `
|
||||
<div><br></div>
|
||||
<div><br></div>
|
||||
<div><br></div>
|
||||
<div><br></div>
|
||||
<div style="font-weight: 400; color: #555; margin: 20px 0 8px 0; font-size: 13px;">On ${formattedDate}, ${sender} wrote:</div>
|
||||
<blockquote style="margin: 0; padding: 10px 0 10px 15px; border-left: 2px solid #ddd; color: #505050; background-color: #f9f9f9; border-radius: 4px;">
|
||||
<div style="font-size: 13px;">
|
||||
${content}
|
||||
</div>
|
||||
</blockquote>
|
||||
`;
|
||||
|
||||
setEmailContent(replyContent);
|
||||
// Initialize with empty content - the QuotedEmailContent component will handle displaying the quoted message
|
||||
setEmailContent('<div><br></div>');
|
||||
|
||||
// Show CC field if there are CC recipients
|
||||
if (initialEmail.cc && initialEmail.cc.length > 0) {
|
||||
@ -227,47 +195,8 @@ export default function ComposeEmail(props: ComposeEmailAllProps) {
|
||||
const subject = subjectBase.match(/^(Fwd|FW|Forward):/i) ? subjectBase : `Fwd: ${subjectBase}`;
|
||||
setSubject(subject);
|
||||
|
||||
// Format the forward content with the original email included directly
|
||||
const content = initialEmail.content || initialEmail.html || initialEmail.text || '';
|
||||
const fromString = formatEmailAddresses(initialEmail.from || []);
|
||||
const toString = formatEmailAddresses(initialEmail.to || []);
|
||||
const date = initialEmail.date ?
|
||||
(typeof initialEmail.date === 'string' ? new Date(initialEmail.date) : initialEmail.date) :
|
||||
new Date();
|
||||
|
||||
// Format date for display
|
||||
const formattedDate = date.toLocaleString('en-US', {
|
||||
weekday: 'short',
|
||||
year: 'numeric',
|
||||
month: 'short',
|
||||
day: 'numeric',
|
||||
hour: '2-digit',
|
||||
minute: '2-digit'
|
||||
});
|
||||
|
||||
// Create forwarded content
|
||||
const forwardContent = `
|
||||
<div><br></div>
|
||||
<div><br></div>
|
||||
<div><br></div>
|
||||
<div><br></div>
|
||||
<div style="border-top: 1px solid #ccc; margin-top: 10px; 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> ${formattedDate}</div>
|
||||
<div><b>Subject:</b> ${initialEmail.subject || ''}</div>
|
||||
<div><b>To:</b> ${toString}</div>
|
||||
</div>
|
||||
<div class="email-original-content">
|
||||
${content}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
|
||||
setEmailContent(forwardContent);
|
||||
// Initialize with empty content - the QuotedEmailContent component will handle displaying the forwarded message
|
||||
setEmailContent('<div><br></div>');
|
||||
|
||||
// If the original email has attachments, we should include them
|
||||
if (initialEmail.attachments && initialEmail.attachments.length > 0) {
|
||||
@ -461,6 +390,14 @@ export default function ComposeEmail(props: ComposeEmailAllProps) {
|
||||
maxHeight="none"
|
||||
preserveFormatting={true}
|
||||
/>
|
||||
|
||||
{/* Render quoted content for replies and forwards */}
|
||||
{initialEmail && type !== 'new' && (
|
||||
<EmailMessageToQuotedContentAdapter
|
||||
email={initialEmail}
|
||||
type={type as 'reply' | 'reply-all' | 'forward'}
|
||||
/>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -599,72 +536,15 @@ function LegacyAdapter({
|
||||
const type = determineType();
|
||||
|
||||
if (type === 'reply' || type === 'reply-all') {
|
||||
// For reply, format with sender info and original content
|
||||
const content = originalEmail?.content || '';
|
||||
const sender = replyTo?.name || replyTo?.email || 'Unknown sender';
|
||||
const date = new Date().toLocaleString('en-US', {
|
||||
weekday: 'short',
|
||||
year: 'numeric',
|
||||
month: 'short',
|
||||
day: 'numeric',
|
||||
hour: '2-digit',
|
||||
minute: '2-digit'
|
||||
});
|
||||
|
||||
const replyContent = `
|
||||
<div><br></div>
|
||||
<div><br></div>
|
||||
<div><br></div>
|
||||
<div><br></div>
|
||||
<div style="font-weight: 400; color: #555; margin: 20px 0 8px 0; font-size: 13px;">On ${date}, ${sender} wrote:</div>
|
||||
<blockquote style="margin: 0; padding: 10px 0 10px 15px; border-left: 2px solid #ddd; color: #505050; background-color: #f9f9f9; border-radius: 4px;">
|
||||
<div style="font-size: 13px;">
|
||||
${content}
|
||||
</div>
|
||||
</blockquote>
|
||||
`;
|
||||
|
||||
setComposeBody(replyContent);
|
||||
// For reply, just set an empty div
|
||||
setComposeBody('<div><br></div>');
|
||||
}
|
||||
else if (type === 'forward') {
|
||||
// For forward, format with original message details
|
||||
const content = originalEmail?.content || '';
|
||||
const fromString = forwardFrom?.name || forwardFrom?.email || 'Unknown';
|
||||
const toString = 'Recipients';
|
||||
const date = new Date().toLocaleString('en-US', {
|
||||
weekday: 'short',
|
||||
year: 'numeric',
|
||||
month: 'short',
|
||||
day: 'numeric',
|
||||
hour: '2-digit',
|
||||
minute: '2-digit'
|
||||
});
|
||||
|
||||
const forwardContent = `
|
||||
<div><br></div>
|
||||
<div><br></div>
|
||||
<div><br></div>
|
||||
<div><br></div>
|
||||
<div style="border-top: 1px solid #ccc; margin-top: 10px; 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> ${date}</div>
|
||||
<div><b>Subject:</b> ${composeSubject || ''}</div>
|
||||
<div><b>To:</b> ${toString}</div>
|
||||
</div>
|
||||
<div class="email-original-content">
|
||||
${content}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
|
||||
setComposeBody(forwardContent);
|
||||
// For forward, just set an empty div
|
||||
setComposeBody('<div><br></div>');
|
||||
}
|
||||
}
|
||||
}, [originalEmail, replyTo, forwardFrom, composeBody, determineType, composeSubject]);
|
||||
}, [originalEmail, replyTo, forwardFrom, composeBody, determineType, setComposeBody]);
|
||||
|
||||
// Converts attachments to the expected format
|
||||
const convertAttachments = () => {
|
||||
@ -824,6 +704,33 @@ function LegacyAdapter({
|
||||
maxHeight="none"
|
||||
preserveFormatting={true}
|
||||
/>
|
||||
|
||||
{/* Render original message for replies and forwards */}
|
||||
{(originalEmail || replyTo || forwardFrom) && (
|
||||
<div className="mt-4">
|
||||
{replyTo ? (
|
||||
<QuotedEmailContent
|
||||
content={originalEmail?.content || ''}
|
||||
sender={{
|
||||
name: replyTo.name,
|
||||
email: replyTo.email
|
||||
}}
|
||||
date={new Date()}
|
||||
type="reply"
|
||||
/>
|
||||
) : forwardFrom ? (
|
||||
<QuotedEmailContent
|
||||
content={originalEmail?.content || ''}
|
||||
sender={{
|
||||
name: forwardFrom.name,
|
||||
email: forwardFrom.email
|
||||
}}
|
||||
date={new Date()}
|
||||
type="forward"
|
||||
/>
|
||||
) : null}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
6
node_modules/.package-lock.json
generated
vendored
6
node_modules/.package-lock.json
generated
vendored
@ -5622,12 +5622,6 @@
|
||||
"npm": ">=8.2.3"
|
||||
}
|
||||
},
|
||||
"node_modules/quill-better-table": {
|
||||
"version": "1.2.10",
|
||||
"resolved": "https://registry.npmjs.org/quill-better-table/-/quill-better-table-1.2.10.tgz",
|
||||
"integrity": "sha512-CFwxAQzt4EPCQuynQ65R/FU7Yu//kcDBb/rmBBOsFfO758+q50zvG/PDt4Lenv9DcrSgwnyNkfo4yeA5fzzVYQ==",
|
||||
"license": "MIT"
|
||||
},
|
||||
"node_modules/quill-delta": {
|
||||
"version": "5.1.0",
|
||||
"resolved": "https://registry.npmjs.org/quill-delta/-/quill-delta-5.1.0.tgz",
|
||||
|
||||
7
package-lock.json
generated
7
package-lock.json
generated
@ -71,7 +71,6 @@
|
||||
"nodemailer": "^6.10.1",
|
||||
"pg": "^8.14.1",
|
||||
"quill": "^2.0.3",
|
||||
"quill-better-table": "^1.2.10",
|
||||
"react": "^18",
|
||||
"react-datepicker": "^8.3.0",
|
||||
"react-day-picker": "8.10.1",
|
||||
@ -6593,12 +6592,6 @@
|
||||
"npm": ">=8.2.3"
|
||||
}
|
||||
},
|
||||
"node_modules/quill-better-table": {
|
||||
"version": "1.2.10",
|
||||
"resolved": "https://registry.npmjs.org/quill-better-table/-/quill-better-table-1.2.10.tgz",
|
||||
"integrity": "sha512-CFwxAQzt4EPCQuynQ65R/FU7Yu//kcDBb/rmBBOsFfO758+q50zvG/PDt4Lenv9DcrSgwnyNkfo4yeA5fzzVYQ==",
|
||||
"license": "MIT"
|
||||
},
|
||||
"node_modules/quill-delta": {
|
||||
"version": "5.1.0",
|
||||
"resolved": "https://registry.npmjs.org/quill-delta/-/quill-delta-5.1.0.tgz",
|
||||
|
||||
@ -3031,11 +3031,6 @@ quick-format-unescaped@^4.0.3:
|
||||
resolved "https://registry.npmjs.org/quick-format-unescaped/-/quick-format-unescaped-4.0.4.tgz"
|
||||
integrity sha512-tYC1Q1hgyRuHgloV/YXs2w15unPVh8qfu/qCTfhTYamaw7fyhumKa2yGpdSo87vY32rIclj+4fWYQXUMs9EHvg==
|
||||
|
||||
quill-better-table@^1.2.10:
|
||||
version "1.2.10"
|
||||
resolved "https://registry.npmjs.org/quill-better-table/-/quill-better-table-1.2.10.tgz"
|
||||
integrity sha512-CFwxAQzt4EPCQuynQ65R/FU7Yu//kcDBb/rmBBOsFfO758+q50zvG/PDt4Lenv9DcrSgwnyNkfo4yeA5fzzVYQ==
|
||||
|
||||
quill-delta@^5.1.0:
|
||||
version "5.1.0"
|
||||
resolved "https://registry.npmjs.org/quill-delta/-/quill-delta-5.1.0.tgz"
|
||||
|
||||
Loading…
Reference in New Issue
Block a user