panel 2 courier api restore
This commit is contained in:
parent
73c149069c
commit
5da40aa3aa
@ -100,20 +100,6 @@ export default function ComposeEmail({
|
||||
} : 'null'
|
||||
);
|
||||
|
||||
if (!emailToProcess?.content) {
|
||||
console.error('[DEBUG] No email content found to process');
|
||||
composeBodyRef.current.innerHTML = `
|
||||
<div class="compose-area" contenteditable="true">
|
||||
<br/>
|
||||
<div style="color: #ef4444;">Error: No original message content available.</div>
|
||||
<div style="color: #64748b; font-size: 0.875rem; margin-top: 0.5rem;">
|
||||
Please select the email again or try refreshing the page.
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
return;
|
||||
}
|
||||
|
||||
// Set initial loading state
|
||||
composeBodyRef.current.innerHTML = `
|
||||
<div class="compose-area" contenteditable="true">
|
||||
@ -121,151 +107,187 @@ export default function ComposeEmail({
|
||||
<div class="text-gray-500">Loading original message...</div>
|
||||
</div>
|
||||
`;
|
||||
|
||||
setIsLoading(true);
|
||||
|
||||
console.log('[DEBUG] Sending content to parse-email API, length:', emailToProcess.content.length);
|
||||
|
||||
// Parse the original email using the API
|
||||
const response = await fetch('/api/parse-email', {
|
||||
method: 'POST',
|
||||
headers: {
|
||||
'Content-Type': 'application/json',
|
||||
},
|
||||
body: JSON.stringify({ email: emailToProcess.content }),
|
||||
});
|
||||
|
||||
console.log('[DEBUG] Parse-email API response status:', response.status);
|
||||
|
||||
const data = await response.json();
|
||||
console.log('[DEBUG] Parse-email API response:', {
|
||||
hasHtml: !!data.html,
|
||||
hasText: !!data.text,
|
||||
subject: data.subject,
|
||||
error: data.error
|
||||
});
|
||||
|
||||
if (!response.ok) {
|
||||
throw new Error(data.error || 'Failed to parse email');
|
||||
// Check if we have content
|
||||
if (!emailToProcess?.content) {
|
||||
console.error('[DEBUG] No email content found to process');
|
||||
|
||||
// Try to use body property if content is not available (for backward compatibility)
|
||||
if (emailToProcess && 'body' in emailToProcess && emailToProcess.body) {
|
||||
console.log('[DEBUG] Using body property as fallback for content');
|
||||
emailToProcess.content = emailToProcess.body;
|
||||
} else if (emailToProcess) {
|
||||
console.log('[DEBUG] Attempting to fetch email content directly');
|
||||
try {
|
||||
// Fetch the email content if not available
|
||||
const response = await fetch(`/api/courrier/${emailToProcess.id}?folder=${encodeURIComponent(emailToProcess.folder || 'INBOX')}`);
|
||||
|
||||
if (!response.ok) {
|
||||
throw new Error(`Failed to fetch email content: ${response.status}`);
|
||||
}
|
||||
|
||||
const fullContent = await response.json();
|
||||
|
||||
// Update the email content with the fetched full content
|
||||
if (fullContent && fullContent.content) {
|
||||
console.log('[DEBUG] Successfully fetched content for reply/forward');
|
||||
emailToProcess.content = fullContent.content;
|
||||
} else {
|
||||
throw new Error('No content in fetched email');
|
||||
}
|
||||
} catch (fetchError) {
|
||||
console.error('[DEBUG] Error fetching email content:', fetchError);
|
||||
composeBodyRef.current.innerHTML = `
|
||||
<div class="compose-area" contenteditable="true">
|
||||
<br/>
|
||||
<div style="color: #ef4444;">Error: No original message content available.</div>
|
||||
<div style="color: #64748b; font-size: 0.875rem; margin-top: 0.5rem;">
|
||||
Please select the email again or try refreshing the page.
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
setIsLoading(false);
|
||||
return;
|
||||
}
|
||||
} else {
|
||||
// No emailToProcess available
|
||||
composeBodyRef.current.innerHTML = `
|
||||
<div class="compose-area" contenteditable="true">
|
||||
<br/>
|
||||
<div style="color: #ef4444;">Error: No email selected for reply/forward.</div>
|
||||
</div>
|
||||
`;
|
||||
setIsLoading(false);
|
||||
return;
|
||||
}
|
||||
}
|
||||
|
||||
const emailContent = data.html || data.text || '';
|
||||
console.log('[DEBUG] Sending content to parse-email API, length:', emailToProcess!.content.length);
|
||||
|
||||
let emailContent;
|
||||
let parseSuccess = false;
|
||||
|
||||
try {
|
||||
// Parse the original email using the API
|
||||
const response = await fetch('/api/parse-email', {
|
||||
method: 'POST',
|
||||
headers: {
|
||||
'Content-Type': 'application/json',
|
||||
},
|
||||
body: JSON.stringify({ email: emailToProcess.content }),
|
||||
});
|
||||
|
||||
console.log('[DEBUG] Parse-email API response status:', response.status);
|
||||
|
||||
const data = await response.json();
|
||||
console.log('[DEBUG] Parse-email API response:', {
|
||||
hasHtml: !!data.html,
|
||||
hasText: !!data.text,
|
||||
subject: data.subject,
|
||||
error: data.error
|
||||
});
|
||||
|
||||
if (!response.ok) {
|
||||
throw new Error(data.error || 'Failed to parse email');
|
||||
}
|
||||
|
||||
emailContent = data.html || data.text || '';
|
||||
parseSuccess = true;
|
||||
} catch (error) {
|
||||
console.error('[DEBUG] API parse error:', error);
|
||||
// Try to use the content directly if API fails
|
||||
emailContent = emailToProcess.content;
|
||||
|
||||
// If content looks like HTML, use it directly, otherwise wrap in pre tags
|
||||
if (!emailContent.startsWith('<') || !emailContent.endsWith('>')) {
|
||||
emailContent = `<pre>${emailContent}</pre>`;
|
||||
}
|
||||
}
|
||||
|
||||
if (!emailContent) {
|
||||
console.warn('[DEBUG] No HTML or text content returned from parser');
|
||||
console.warn('[DEBUG] No content available after parsing');
|
||||
emailContent = '<div>No content available</div>';
|
||||
}
|
||||
|
||||
// Format the reply/forward content
|
||||
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;">
|
||||
---------- Forwarded message ---------<br/>
|
||||
From: ${emailToProcess.from}<br/>
|
||||
Date: ${new Date(emailToProcess.date).toLocaleString()}<br/>
|
||||
Subject: ${emailToProcess.subject}<br/>
|
||||
To: ${emailToProcess.to}<br/>
|
||||
${emailToProcess.cc ? `Cc: ${emailToProcess.cc}<br/>` : ''}
|
||||
</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;">
|
||||
${emailContent}
|
||||
</div>
|
||||
` : `
|
||||
<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>
|
||||
<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}
|
||||
</div>
|
||||
`;
|
||||
const contentLength = emailToProcess && emailToProcess.content ? emailToProcess.content.length : 0;
|
||||
console.log('[DEBUG] Sending content to parse-email API, length:', contentLength);
|
||||
|
||||
let formattedContent;
|
||||
try {
|
||||
if (emailToProcess && emailToProcess.content) {
|
||||
// Process email content
|
||||
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;">
|
||||
---------- Forwarded message ---------<br/>
|
||||
From: ${emailToProcess?.from || 'Unknown Sender'}<br/>
|
||||
Date: ${new Date(emailToProcess?.date || Date.now()).toLocaleString()}<br/>
|
||||
Subject: ${emailToProcess?.subject || 'No Subject'}<br/>
|
||||
To: ${emailToProcess?.to || ''}<br/>
|
||||
${emailToProcess?.cc ? `Cc: ${emailToProcess.cc}<br/>` : ''}
|
||||
</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;">
|
||||
${emailContent}
|
||||
</div>
|
||||
` : `
|
||||
<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:
|
||||
</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;">
|
||||
${emailContent}
|
||||
</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 class="cursor-position" style="min-height: 20px;"><br/></div>
|
||||
${quotedContent}
|
||||
</div>
|
||||
`;
|
||||
// Set the content in the compose area with proper structure
|
||||
formattedContent = `
|
||||
<div class="compose-area" contenteditable="true" style="min-height: 100px; padding: 10px;">
|
||||
<div class="cursor-position" style="min-height: 20px;"><br/></div>
|
||||
${quotedContent}
|
||||
</div>
|
||||
`;
|
||||
|
||||
if (composeBodyRef.current) {
|
||||
composeBodyRef.current.innerHTML = formattedContent;
|
||||
if (composeBodyRef.current) {
|
||||
composeBodyRef.current.innerHTML = formattedContent;
|
||||
|
||||
// Place cursor at the beginning before the quoted content
|
||||
const selection = window.getSelection();
|
||||
const range = document.createRange();
|
||||
const firstDiv = composeBodyRef.current.querySelector('.cursor-position');
|
||||
if (firstDiv) {
|
||||
range.setStart(firstDiv, 0);
|
||||
range.collapse(true);
|
||||
selection?.removeAllRanges();
|
||||
selection?.addRange(range);
|
||||
(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
|
||||
// Place cursor at the beginning before the quoted content
|
||||
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);
|
||||
const range = document.createRange();
|
||||
const firstDiv = composeBodyRef.current.querySelector('.cursor-position');
|
||||
if (firstDiv) {
|
||||
range.setStart(firstDiv, 0);
|
||||
range.collapse(true);
|
||||
selection?.removeAllRanges();
|
||||
selection?.addRange(range);
|
||||
(firstDiv as HTMLElement).focus();
|
||||
}
|
||||
});
|
||||
|
||||
// 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 with scrollable message area');
|
||||
// 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;
|
||||
|
||||
// Let the container handle scrolling only if not at boundaries
|
||||
if ((wheelEvent.deltaY > 0 && !isAtBottom) || (wheelEvent.deltaY < 0 && !isAtTop)) {
|
||||
e.stopPropagation();
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
// Update compose state
|
||||
setComposeBody(formattedContent);
|
||||
setLocalContent(formattedContent);
|
||||
console.log('[DEBUG] Successfully set compose content with scrollable message area');
|
||||
}
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('[DEBUG] Error formatting email content:', error);
|
||||
emailContent = '<div style="color: #ef4444;">Error parsing original message content.</div>';
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('[DEBUG] Error initializing compose content:', error);
|
||||
@ -283,17 +305,18 @@ export default function ComposeEmail({
|
||||
setComposeBody(errorContent);
|
||||
setLocalContent(errorContent);
|
||||
}
|
||||
} finally {
|
||||
setIsLoading(false);
|
||||
}
|
||||
};
|
||||
|
||||
initializeContent();
|
||||
}
|
||||
}, [replyTo, forwardFrom]);
|
||||
}, [replyTo, forwardFrom, setComposeBody]);
|
||||
|
||||
const handleInput = (e: React.FormEvent<HTMLDivElement>) => {
|
||||
if (!composeBodyRef.current) return;
|
||||
|
||||
const content = composeBodyRef.current.innerHTML;
|
||||
if (!e.currentTarget) return;
|
||||
const content = e.currentTarget.innerHTML;
|
||||
if (!content.trim()) {
|
||||
setLocalContent('');
|
||||
setComposeBody('');
|
||||
@ -307,7 +330,7 @@ export default function ComposeEmail({
|
||||
}
|
||||
|
||||
// Ensure scrolling and cursor behavior works after edits
|
||||
const messageContentDivs = composeBodyRef.current.querySelectorAll('.message-content');
|
||||
const messageContentDivs = e.currentTarget.querySelectorAll('.message-content');
|
||||
messageContentDivs.forEach(div => {
|
||||
// Make sure the div remains scrollable after input events
|
||||
(div as HTMLElement).style.maxHeight = '300px';
|
||||
|
||||
Loading…
Reference in New Issue
Block a user