panel 2 courier api restore

This commit is contained in:
alma 2025-04-25 22:09:31 +02:00
parent e71289c911
commit 2cb180b7b0

View File

@ -169,38 +169,50 @@ export default function ComposeEmail({
subject: decoded.subject subject: decoded.subject
}); });
let formattedContent = ''; // Create the email container with header information
let emailHeader = '';
if (type === 'forward') { if (type === 'forward') {
// EXACTLY MATCH THE FORMAT USED IN PANEL 3 (from ReplyContent in app/courrier/page.tsx) emailHeader = `
formattedContent = ` <div style="border-top: 1px solid #e5e7eb; margin-top: 20px; padding-top: 20px; color: #6b7280; font-size: 14px;">
<div class="forwarded-message">
<p>---------- Forwarded message ---------</p> <p>---------- Forwarded message ---------</p>
<p>From: ${decoded.from || ''}</p> <p>From: ${decoded.from || ''}</p>
<p>Date: ${formatDate(decoded.date ? new Date(decoded.date) : null)}</p> <p>Date: ${formatDate(decoded.date ? new Date(decoded.date) : null)}</p>
<p>Subject: ${decoded.subject || ''}</p> <p>Subject: ${decoded.subject || ''}</p>
<p>To: ${decoded.to || ''}</p> <p>To: ${decoded.to || ''}</p>
<br>
${decoded.html || `<pre>${decoded.text || ''}</pre>`}
</div> </div>
`; `;
} else { } else {
formattedContent = ` emailHeader = `
<div class="quoted-message"> <div style="border-top: 1px solid #e5e7eb; margin-top: 20px; padding-top: 20px; color: #6b7280; font-size: 14px;">
<p>On ${formatDate(decoded.date ? new Date(decoded.date) : null)}, ${decoded.from || ''} wrote:</p> <p>On ${formatDate(decoded.date ? new Date(decoded.date) : null)}, ${decoded.from || ''} wrote:</p>
<blockquote>
${decoded.html || `<pre>${decoded.text || ''}</pre>`}
</blockquote>
</div> </div>
`; `;
} }
// Get the proper content with minimal sanitization to preserve structure
let emailContent = '';
if (decoded.html) {
// Preserve the HTML structure with minimal cleaning
emailContent = DOMPurify.sanitize(decoded.html, {
ADD_TAGS: ['style', 'meta'],
ADD_ATTR: ['class', 'id', 'style', 'align', 'border', 'cellpadding', 'cellspacing', 'width', 'height'],
KEEP_CONTENT: true,
WHOLE_DOCUMENT: false
});
} else if (decoded.text) {
emailContent = `<pre style="white-space: pre-wrap; font-family: inherit;">${decoded.text}</pre>`;
} else {
emailContent = '<div>No content available</div>';
}
// Set the content in the compose area with proper structure // Set the content in the compose area with proper structure
const sanitizedContent = DOMPurify.sanitize(formattedContent);
const wrappedContent = ` const wrappedContent = `
<div class="compose-area" contenteditable="true" style="min-height: 100px; padding: 10px;"> <div class="compose-area" contenteditable="true" style="min-height: 100px; padding: 10px;">
<div class="cursor-position" style="min-height: 20px; cursor: text;"><br/></div> <div class="cursor-position" style="min-height: 20px; cursor: text;"><br/></div>
${sanitizedContent} ${emailHeader}
<div class="email-content" style="margin-top: 10px; border: 1px solid #e5e7eb; padding: 15px; border-radius: 4px; max-height: 400px; overflow-y: auto;">
${emailContent}
</div>
</div> </div>
`; `;
@ -220,14 +232,14 @@ export default function ComposeEmail({
} }
// After setting the HTML content, add event listeners for scrolling // After setting the HTML content, add event listeners for scrolling
const messageContents = composeBodyRef.current.querySelectorAll('.message-content, .forwarded-message, .quoted-message'); const messageContents = composeBodyRef.current.querySelectorAll('.email-content');
messageContents.forEach(container => { messageContents.forEach(container => {
// Make sure the container is properly styled for scrolling // Make sure the container is properly styled for scrolling
(container as HTMLElement).style.maxHeight = '300px'; (container as HTMLElement).style.maxHeight = '400px';
(container as HTMLElement).style.overflowY = 'auto'; (container as HTMLElement).style.overflowY = 'auto';
(container as HTMLElement).style.border = '1px solid #e5e7eb'; (container as HTMLElement).style.border = '1px solid #e5e7eb';
(container as HTMLElement).style.borderRadius = '4px'; (container as HTMLElement).style.borderRadius = '4px';
(container as HTMLElement).style.padding = '10px'; (container as HTMLElement).style.padding = '15px';
// Ensure wheel events are properly handled // Ensure wheel events are properly handled
if (!(container as HTMLElement).hasAttribute('data-scroll-handler-attached')) { if (!(container as HTMLElement).hasAttribute('data-scroll-handler-attached')) {