courrier clean 2

components/email/ComposeEmail.tsx

@@ -658,13 +658,46 @@ export default function ComposeEmail(props: ComposeEmailAllProps) {
                   className="p-4 bg-gray-50 text-sm original-content"
                   contentEditable={!sending}
                   dangerouslySetInnerHTML={{ __html: originalContent }}
-                  style={{ opacity: 1.0 }}
+                  style={{ 
+                    opacity: 1.0,
+                    overflow: 'auto',
+                    whiteSpace: 'pre-wrap',
+                    wordBreak: 'break-word',
+                    overflowWrap: 'break-word'
+                  }}
                   onInput={(e) => {
+                    // Prevent default behavior that might cause text flow issues
+                    e.preventDefault();
+                    
+                    // Get the current caret position to restore it later
+                    const selection = window.getSelection();
+                    const range = selection?.getRangeAt(0);
+                    const offset = range?.startOffset || 0;
+                    const node = range?.startContainer;
+                    
+                    // Update content
                     const target = e.target as HTMLDivElement;
                     setOriginalContent(target.innerHTML);
-                    // Update the complete body
+                    
+                    // Update the complete body without disturbing the text flow
                     const userPart = editorRef.current?.innerHTML || '';
                     setBody(`${userPart}<div class="quote-divider"></div>${target.innerHTML}`);
+                    
+                    // Try to restore cursor position after state update
+                    setTimeout(() => {
+                      try {
+                        if (selection && range && node && node.parentNode) {
+                          // Attempt to find the same node
+                          const newRange = document.createRange();
+                          newRange.setStart(node, Math.min(offset, node.textContent?.length || 0));
+                          newRange.collapse(true);
+                          selection.removeAllRanges();
+                          selection.addRange(newRange);
+                        }
+                      } catch (err) {
+                        console.error('Error restoring cursor position:', err);
+                      }
+                    }, 0);
                   }}
                 />
               </div>