diff --git a/components/email/ComposeEmail.tsx b/components/email/ComposeEmail.tsx index c946a2d7..1d43d8cc 100644 --- a/components/email/ComposeEmail.tsx +++ b/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}
${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); }} />