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:22:09 +02:00
parent 5d058428fd
commit 73c149069c
1 changed files with 81 additions and 8 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

89
components/ComposeEmail.tsx
View File

@ -154,7 +154,7 @@ export default function ComposeEmail({
// Format the reply/forward content
const quotedContent = forwardFrom ? `
<div 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/>
From: ${emailToProcess.from}<br/>
Date: ${new Date(emailToProcess.date).toLocaleString()}<br/>
@ -162,22 +162,22 @@ export default function ComposeEmail({
To: ${emailToProcess.to}<br/>
${emailToProcess.cc ? `Cc: ${emailToProcess.cc}<br/>` : ''}
</div>
<div style="margin-top: 10px; color: #374151;">
<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;">
${emailContent}
</div>
` : `
<div 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).toLocaleString()}, ${emailToProcess.from} wrote:
</div>
<blockquote style="margin: 10px 0 0 10px; padding-left: 1em; border-left: 2px solid #e5e7eb; color: #374151;">
<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;">
${emailContent}
</blockquote>
</div>
`;
// Set the content in the compose area with proper structure
const formattedContent = `
<div class="compose-area" contenteditable="true" style="min-height: 100px; padding: 10px;">
<div style="min-height: 20px;"><br/></div>
<div class="cursor-position" style="min-height: 20px;"><br/></div>
${quotedContent}
</div>
`;
@ -188,7 +188,7 @@ export default function ComposeEmail({
// Place cursor at the beginning before the quoted content
const selection = window.getSelection();
const range = document.createRange();
const firstDiv = composeBodyRef.current.querySelector('div[style*="min-height: 20px;"]');
const firstDiv = composeBodyRef.current.querySelector('.cursor-position');
if (firstDiv) {
range.setStart(firstDiv, 0);
range.collapse(true);
@ -197,10 +197,75 @@ export default function ComposeEmail({
(firstDiv as HTMLElement).focus();
}
// Add event listeners to handle scrolling within message-content zone
const messageContentDivs = composeBodyRef.current.querySelectorAll('.message-content');
messageContentDivs.forEach(div => {
// Change cursor to text when hovering over the message content
div.addEventListener('mouseenter', () => {
(div as HTMLElement).style.outline = '1px solid #d1d5db';
(div as HTMLElement).style.cursor = 'text';
});
div.addEventListener('mouseleave', () => {
(div as HTMLElement).style.outline = 'none';
});
// Make sure clicking inside positions cursor correctly
div.addEventListener('click', (e: Event) => {
const mouseEvent = e as MouseEvent;
mouseEvent.stopPropagation();
// Get precise click position for cursor placement
const selection = window.getSelection();
if (!selection) return;
try {
const range = document.caretRangeFromPoint(mouseEvent.clientX, mouseEvent.clientY);
if (range) {
selection.removeAllRanges();
selection.addRange(range);
} else {
// Fallback if caretRangeFromPoint is not available
const newRange = document.createRange();
if (e.target instanceof Node) {
// Try to place at exact position
if (e.target.nodeType === Node.TEXT_NODE) {
const offset = Math.floor((e.target as Text).length / 2);
newRange.setStart(e.target, offset);
} else {
newRange.selectNodeContents(e.target);
}
newRange.collapse(true);
selection.removeAllRanges();
selection.addRange(newRange);
}
}
} catch (err) {
console.error("Error positioning cursor:", err);
}
});
// Handle wheel events to scroll within the zone
div.addEventListener('wheel', (e: Event) => {
const wheelEvent = e as WheelEvent;
const target = wheelEvent.currentTarget as HTMLElement;
const scrollAmount = wheelEvent.deltaY;
// Adjust scroll position
target.scrollTop += scrollAmount;
// Prevent page scroll when scrolling inside the message content
if ((target.scrollTop > 0 && scrollAmount > 0) ||
(target.scrollTop < target.scrollHeight - target.clientHeight && scrollAmount < 0)) {
e.preventDefault();
}
});
});
// Update compose state
setComposeBody(formattedContent);
setLocalContent(formattedContent);
console.log('[DEBUG] Successfully set compose content');
console.log('[DEBUG] Successfully set compose content with scrollable message area');
}
} catch (error) {
console.error('[DEBUG] Error initializing compose content:', error);
@ -240,6 +305,14 @@ export default function ComposeEmail({
if (onBodyChange) {
onBodyChange(content);
}
// Ensure scrolling and cursor behavior works after edits
const messageContentDivs = composeBodyRef.current.querySelectorAll('.message-content');
messageContentDivs.forEach(div => {
// Make sure the div remains scrollable after input events
(div as HTMLElement).style.maxHeight = '300px';
(div as HTMLElement).style.overflowY = 'auto';
});
};
const handleSendEmail = async () => {