WYSIWYG 편집기 역할을 하는 div가 있습니다. 텍스트 상자 역할을 하지만 그 안에 Markdown 구문을 렌더링하여 실시간 변경 사항을 표시합니다.

문제: 문자를 입력할 때 캐럿 위치가 div의 시작 부분으로 재설정됩니다.

Codepen: https://codepen.io/ADAMJR/pen/MWvPebK

QuillJS와 같은 마크다운 편집기는 상위 요소를 편집하지 않고도 하위 요소를 편집할 수 있는 것 같습니다. 이렇게 하면 문제가 방지되지만 이제 이 설정을 사용하여 해당 논리를 재현하는 방법을 확신하게 되었습니다.

Question: 입력하는 동안 캐럿 위치가 재설정되는 것을 방지하는 방법은 무엇입니까?

업데이트: 각 입력의 div 끝 부분에 캐럿 위치를 보냈습니다. 그러나 이는 여전히 본질적으로 위치를 재설정합니다. https://codepen.io/ADAMJR/pen/KKvGNbY