alma/Neah
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

panel 2 courier api restore

Browse Source
This commit is contained in:
alma 2025-04-25 21:30:01 +02:00
parent 5da40aa3aa
commit 72207ee218
1 changed files with 77 additions and 18 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

95
components/ComposeEmail.tsx
View File

@ -134,6 +134,15 @@ export default function ComposeEmail({
if (fullContent && fullContent.content) { if (fullContent && fullContent.content) {
console.log('[DEBUG] Successfully fetched content for reply/forward'); console.log('[DEBUG] Successfully fetched content for reply/forward');
emailToProcess.content = fullContent.content; emailToProcess.content = fullContent.content;
} else if (fullContent && fullContent.body) {
console.log('[DEBUG] Successfully fetched body for reply/forward');
emailToProcess.content = fullContent.body;
} else if (fullContent && fullContent.html) {
console.log('[DEBUG] Successfully fetched HTML for reply/forward');
emailToProcess.content = fullContent.html;
} else if (fullContent && fullContent.text) {
console.log('[DEBUG] Successfully fetched TEXT for reply/forward');
emailToProcess.content = fullContent.text;
} else { } else {
throw new Error('No content in fetched email'); throw new Error('No content in fetched email');
} }
@ -219,23 +228,32 @@ export default function ComposeEmail({
try { try {
if (emailToProcess && emailToProcess.content) { if (emailToProcess && emailToProcess.content) {
// Process email content // Process email content
const formatEmailAddresses = (addresses: any) => {
if (!addresses) return 'Unknown';
if (typeof addresses === 'string') return addresses;
if (Array.isArray(addresses)) {
return addresses.map(addr => addr.name || addr.address).join(', ');
}
return String(addresses);
};
const quotedContent = forwardFrom ? ` const quotedContent = forwardFrom ? `
<div class="forwarded-message" style="border-top: 1px solid #e5e7eb; padding-top: 20px; margin-top: 20px; color: #6b7280; font-size: 0.875rem;"> <div class="forwarded-message" style="border-top: 1px solid #e5e7eb; padding-top: 20px; margin-top: 20px; color: #6b7280; font-size: 0.875rem;">
---------- Forwarded message ---------<br/> ---------- Forwarded message ---------<br/>
From: ${emailToProcess?.from || 'Unknown Sender'}<br/> From: ${formatEmailAddresses(emailToProcess?.from) || 'Unknown Sender'}<br/>
Date: ${new Date(emailToProcess?.date || Date.now()).toLocaleString()}<br/> Date: ${new Date(emailToProcess?.date || Date.now()).toLocaleString()}<br/>
Subject: ${emailToProcess?.subject || 'No Subject'}<br/> Subject: ${emailToProcess?.subject || 'No Subject'}<br/>
To: ${emailToProcess?.to || ''}<br/> To: ${formatEmailAddresses(emailToProcess?.to) || ''}<br/>
${emailToProcess?.cc ? `Cc: ${emailToProcess.cc}<br/>` : ''} ${emailToProcess?.cc ? `Cc: ${formatEmailAddresses(emailToProcess.cc)}<br/>` : ''}
</div> </div>
<div class="message-content" style="margin-top: 10px; color: #374151; max-height: 300px; overflow-y: auto; border: 1px solid #e5e7eb; padding: 10px; border-radius: 4px;"> <div class="message-content" style="margin-top: 10px; border: 1px solid #e5e7eb; padding: 10px; border-radius: 4px; max-height: 300px; overflow-y: auto; color: #374151;">
${emailContent} ${emailContent}
</div> </div>
` : ` ` : `
<div class="quoted-message" style="border-top: 1px solid #e5e7eb; padding-top: 20px; margin-top: 20px; color: #6b7280; font-size: 0.875rem;"> <div class="quoted-message" style="border-top: 1px solid #e5e7eb; padding-top: 20px; margin-top: 20px; color: #6b7280; font-size: 0.875rem;">
On ${new Date(emailToProcess?.date || Date.now()).toLocaleString()}, ${emailToProcess?.from || 'Unknown Sender'} wrote: On ${new Date(emailToProcess?.date || Date.now()).toLocaleString()}, ${formatEmailAddresses(emailToProcess?.from) || 'Unknown Sender'} wrote:
</div> </div>
<div class="message-content" style="margin: 10px 0 0 10px; padding-left: 1em; border-left: 2px solid #e5e7eb; color: #374151; max-height: 300px; overflow-y: auto;"> <div class="message-content" style="margin: 10px 0 0 10px; padding: 10px; border-left: 2px solid #e5e7eb; border: 1px solid #e5e7eb; border-radius: 4px; max-height: 300px; overflow-y: auto; color: #374151;">
${emailContent} ${emailContent}
</div> </div>
`; `;
@ -243,7 +261,7 @@ export default function ComposeEmail({
// Set the content in the compose area with proper structure // Set the content in the compose area with proper structure
formattedContent = ` formattedContent = `
<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;"><br/></div> <div class="cursor-position" style="min-height: 20px; cursor: text;"><br/></div>
${quotedContent} ${quotedContent}
</div> </div>
`; `;
@ -266,17 +284,33 @@ 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'); const messageContents = composeBodyRef.current.querySelectorAll('.message-content');
messageContents.forEach(container => { messageContents.forEach(container => {
container.addEventListener('wheel', (e: Event) => { // Make sure the container is properly styled for scrolling
const wheelEvent = e as WheelEvent; (container as HTMLElement).style.maxHeight = '300px';
const target = e.currentTarget as HTMLElement; (container as HTMLElement).style.overflowY = 'auto';
const isAtBottom = target.scrollHeight - target.scrollTop <= target.clientHeight + 1; (container as HTMLElement).style.border = '1px solid #e5e7eb';
const isAtTop = target.scrollTop <= 0; (container as HTMLElement).style.borderRadius = '4px';
(container as HTMLElement).style.padding = '10px';
// Let the container handle scrolling only if not at boundaries // Ensure wheel events are properly handled
if ((wheelEvent.deltaY > 0 && !isAtBottom) || (wheelEvent.deltaY < 0 && !isAtTop)) { if (!(container as HTMLElement).hasAttribute('data-scroll-handler-attached')) {
e.stopPropagation(); container.addEventListener('wheel', (e: Event) => {
} const wheelEvent = e as WheelEvent;
}); const target = e.currentTarget as HTMLElement;
// Check if we're at the boundary of the scrollable area
const isAtBottom = target.scrollHeight - target.scrollTop <= target.clientHeight + 1;
const isAtTop = target.scrollTop <= 0;
// Only prevent default if we're not at the boundaries in the direction of scrolling
if ((wheelEvent.deltaY > 0 && !isAtBottom) || (wheelEvent.deltaY < 0 && !isAtTop)) {
e.stopPropagation();
e.preventDefault(); // Prevent the parent container from scrolling
}
}, { passive: false });
// Mark this element as having a scroll handler attached
(container as HTMLElement).setAttribute('data-scroll-handler-attached', 'true');
}
}); });
// Update compose state // Update compose state
@ -335,6 +369,30 @@ export default function ComposeEmail({
// Make sure the div remains scrollable after input events // Make sure the div remains scrollable after input events
(div as HTMLElement).style.maxHeight = '300px'; (div as HTMLElement).style.maxHeight = '300px';
(div as HTMLElement).style.overflowY = 'auto'; (div as HTMLElement).style.overflowY = 'auto';
(div as HTMLElement).style.border = '1px solid #e5e7eb';
(div as HTMLElement).style.borderRadius = '4px';
(div as HTMLElement).style.padding = '10px';
// Ensure wheel events are properly handled
if (!(div as HTMLElement).hasAttribute('data-scroll-handler-attached')) {
div.addEventListener('wheel', (e: Event) => {
const wheelEvent = e as WheelEvent;
const target = e.currentTarget as HTMLElement;
// Check if we're at the boundary of the scrollable area
const isAtBottom = target.scrollHeight - target.scrollTop <= target.clientHeight + 1;
const isAtTop = target.scrollTop <= 0;
// Only prevent default if we're not at the boundaries in the direction of scrolling
if ((wheelEvent.deltaY > 0 && !isAtBottom) || (wheelEvent.deltaY < 0 && !isAtTop)) {
e.stopPropagation();
e.preventDefault(); // Prevent the parent container from scrolling
}
}, { passive: false });
// Mark this element as having a scroll handler attached
(div as HTMLElement).setAttribute('data-scroll-handler-attached', 'true');
}
}); });
}; };
@ -511,7 +569,8 @@ export default function ComposeEmail({
minHeight: '200px', minHeight: '200px',
overflowY: 'auto', overflowY: 'auto',
scrollbarWidth: 'thin', scrollbarWidth: 'thin',
scrollbarColor: '#cbd5e0 #f3f4f6' scrollbarColor: '#cbd5e0 #f3f4f6',
cursor: 'text'
}} }}
dir="ltr" dir="ltr"
spellCheck="true" spellCheck="true"