courrier refactor rebuild 2

components/email/ComposeEmail.tsx

@@ -202,6 +202,8 @@ export default function ComposeEmail(props: ComposeEmailAllProps) {
           
           // Create reply content with quote
           const replyContent = `
+            <div><br></div>
+            <div><br></div>
             <div><br></div>
             <div><br></div>
             <div style="font-weight: 400; color: #555; margin: 20px 0 8px 0; font-size: 13px;">On ${formattedDate}, ${sender} wrote:</div>
@@ -245,6 +247,8 @@ export default function ComposeEmail(props: ComposeEmailAllProps) {
           
           // Create forwarded content
           const forwardContent = `
+            <div><br></div>
+            <div><br></div>
             <div><br></div>
             <div><br></div>
             <div style="border-top: 1px solid #ccc; margin-top: 10px; padding-top: 10px;">
@@ -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 (
     <div className="fixed inset-0 bg-gray-600/30 backdrop-blur-sm z-50 flex items-center justify-center">
       <div className="w-full max-w-2xl h-[90vh] bg-white rounded-xl shadow-xl flex flex-col mx-4">
@@ -578,6 +612,8 @@ function LegacyAdapter({
         });
         
         const replyContent = `
+          <div><br></div>
+          <div><br></div>
           <div><br></div>
           <div><br></div>
           <div style="font-weight: 400; color: #555; margin: 20px 0 8px 0; font-size: 13px;">On ${date}, ${sender} wrote:</div>
@@ -605,6 +641,8 @@ function LegacyAdapter({
         });
         
         const forwardContent = `
+          <div><br></div>
+          <div><br></div>
           <div><br></div>
           <div><br></div>
           <div style="border-top: 1px solid #ccc; margin-top: 10px; padding-top: 10px;">

components/email/RichEmailEditor.tsx

@@ -111,13 +111,37 @@ const RichEmailEditor: React.FC<RichEmailEditorProps> = ({
                 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<RichEmailEditorProps> = ({
           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 */