diff --git a/components/email/ComposeEmail.tsx b/components/email/ComposeEmail.tsx index b351cc41..1c77745c 100644 --- a/components/email/ComposeEmail.tsx +++ b/components/email/ComposeEmail.tsx @@ -202,6 +202,8 @@ export default function ComposeEmail(props: ComposeEmailAllProps) { // Create reply content with quote const replyContent = ` +

+



On ${formattedDate}, ${sender} wrote:
@@ -245,6 +247,8 @@ export default function ComposeEmail(props: ComposeEmailAllProps) { // Create forwarded content const forwardContent = ` +

+



@@ -325,6 +329,36 @@ export default function ComposeEmail(props: ComposeEmailAllProps) { } }; + // Additional effect to ensure we scroll to the top and focus the editor + useEffect(() => { + // Focus the editor and ensure it's scrolled to the top + const editorContainer = document.querySelector('.ql-editor') as HTMLElement; + if (editorContainer) { + // Set timeout to ensure DOM is fully rendered + setTimeout(() => { + // Focus the editor + editorContainer.focus(); + + // Make sure all scroll containers are at the top + editorContainer.scrollTop = 0; + + // Find all possible scrollable parent containers + const scrollContainers = [ + document.querySelector('.ql-container') as HTMLElement, + document.querySelector('.rich-email-editor-container') as HTMLElement, + document.querySelector('.h-full.flex.flex-col.p-6') as HTMLElement + ]; + + // Scroll all containers to top + scrollContainers.forEach(container => { + if (container) { + container.scrollTop = 0; + } + }); + }, 100); + } + }, []); + return (
@@ -578,6 +612,8 @@ function LegacyAdapter({ }); const replyContent = ` +

+



On ${date}, ${sender} wrote:
@@ -605,6 +641,8 @@ function LegacyAdapter({ }); const forwardContent = ` +

+



diff --git a/components/email/RichEmailEditor.tsx b/components/email/RichEmailEditor.tsx index 8e47ac13..1e3d7d62 100644 --- a/components/email/RichEmailEditor.tsx +++ b/components/email/RichEmailEditor.tsx @@ -111,13 +111,37 @@ const RichEmailEditor: React.FC = ({ console.log('Using HTML fallback for tables'); quillRef.current.root.innerHTML = preservedContent; } + + // Ensure the cursor and scroll position is at the top of the editor + quillRef.current.setSelection(0, 0); + + // Also scroll the container to the top + if (editorRef.current) { + editorRef.current.scrollTop = 0; + + // Also find and scroll parent containers that might have scroll + const scrollContainer = editorRef.current.closest('.ql-container'); + if (scrollContainer) { + scrollContainer.scrollTop = 0; + } + + // One more check for nested scroll containers (like overflow divs) + const parentScrollContainer = editorRef.current.closest('.rich-email-editor-container'); + if (parentScrollContainer) { + parentScrollContainer.scrollTop = 0; + } + } }, 50); + } else { + // For simple content, just set the cursor at the top + quillRef.current.setSelection(0, 0); } } catch (err) { console.error('Error setting initial content:', err); // Fallback method if the above fails quillRef.current.setText(''); quillRef.current.clipboard.dangerouslyPasteHTML(sanitizeHtml(initialContent)); + quillRef.current.setSelection(0, 0); } } @@ -282,6 +306,21 @@ const RichEmailEditor: React.FC = ({ font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif; font-size: 14px; line-height: 1.5; + color: #333 !important; + } + + /* Ensure all text is visible */ + :global(.ql-editor p), + :global(.ql-editor div), + :global(.ql-editor span), + :global(.ql-editor li) { + color: #333 !important; + } + + /* Ensure placeholder text is visible but distinct */ + :global(.ql-editor.ql-blank::before) { + color: #aaa !important; + font-style: italic !important; } /* Force blockquote styling */