diff --git a/components/ComposeEmail.tsx b/components/ComposeEmail.tsx index 97f1b126..79d205dd 100644 --- a/components/ComposeEmail.tsx +++ b/components/ComposeEmail.tsx @@ -134,6 +134,15 @@ export default function ComposeEmail({ if (fullContent && fullContent.content) { console.log('[DEBUG] Successfully fetched content for reply/forward'); 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 { throw new Error('No content in fetched email'); } @@ -219,23 +228,32 @@ export default function ComposeEmail({ try { if (emailToProcess && emailToProcess.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 ? `
---------- Forwarded message ---------
- From: ${emailToProcess?.from || 'Unknown Sender'}
+ From: ${formatEmailAddresses(emailToProcess?.from) || 'Unknown Sender'}
Date: ${new Date(emailToProcess?.date || Date.now()).toLocaleString()}
Subject: ${emailToProcess?.subject || 'No Subject'}
- To: ${emailToProcess?.to || ''}
- ${emailToProcess?.cc ? `Cc: ${emailToProcess.cc}
` : ''} + To: ${formatEmailAddresses(emailToProcess?.to) || ''}
+ ${emailToProcess?.cc ? `Cc: ${formatEmailAddresses(emailToProcess.cc)}
` : ''}
-
+
${emailContent}
` : `
- 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:
-
+
${emailContent}
`; @@ -243,7 +261,7 @@ export default function ComposeEmail({ // Set the content in the compose area with proper structure formattedContent = `
-

+

${quotedContent}
`; @@ -266,17 +284,33 @@ export default function ComposeEmail({ // After setting the HTML content, add event listeners for scrolling const messageContents = composeBodyRef.current.querySelectorAll('.message-content'); messageContents.forEach(container => { - container.addEventListener('wheel', (e: Event) => { - const wheelEvent = e as WheelEvent; - const target = e.currentTarget as HTMLElement; - const isAtBottom = target.scrollHeight - target.scrollTop <= target.clientHeight + 1; - const isAtTop = target.scrollTop <= 0; + // Make sure the container is properly styled for scrolling + (container as HTMLElement).style.maxHeight = '300px'; + (container as HTMLElement).style.overflowY = 'auto'; + (container as HTMLElement).style.border = '1px solid #e5e7eb'; + (container as HTMLElement).style.borderRadius = '4px'; + (container as HTMLElement).style.padding = '10px'; + + // Ensure wheel events are properly handled + if (!(container as HTMLElement).hasAttribute('data-scroll-handler-attached')) { + 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 }); - // Let the container handle scrolling only if not at boundaries - if ((wheelEvent.deltaY > 0 && !isAtBottom) || (wheelEvent.deltaY < 0 && !isAtTop)) { - e.stopPropagation(); - } - }); + // Mark this element as having a scroll handler attached + (container as HTMLElement).setAttribute('data-scroll-handler-attached', 'true'); + } }); // Update compose state @@ -335,6 +369,30 @@ export default function ComposeEmail({ // Make sure the div remains scrollable after input events (div as HTMLElement).style.maxHeight = '300px'; (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', overflowY: 'auto', scrollbarWidth: 'thin', - scrollbarColor: '#cbd5e0 #f3f4f6' + scrollbarColor: '#cbd5e0 #f3f4f6', + cursor: 'text' }} dir="ltr" spellCheck="true"