div contenteditable 커서 위치 지정

최근에 일을 하며 div인데 contenteditable이 true인 태그 내부에 span태그로 mention이 들어가고 그 뒤에 커서가 놓여야 하는 기획이 있었습니다.

https://jungpaeng.tistory.com/86
https://gdtbgl93.tistory.com/175
https://chairking-95.tistory.com/152
등의 사이트를 참고하였고, 대부분의 경우를 다 테스트 해보았고, 해당 text의 길이도 구해 set 해보았지만 적용되는 것이 없었습니다.

위의 내용들은 일반적인 input이나 textbox 등에서는 적용되는듯 했지만 div contenteditable=true 에서는 적용되지 않았고, 결론적으론 https://blog.naver.com/writer0713/220499119278 참고하여 아래와 같이 구현하였습니다.

커서가 위치해야 하는 곳에 <span id="cur"></span> 를 넣어주고 해당 부분이 보여야 할 때(커서가 이동해야 할 때) 아래와 같이 delete 하는 방식으로 진행하면 cursor 해당 위치로 이동하였습니다.

$temp.find('.comment-input').focus();
const range = document.createRange()
const selection = window.getSelection();

range.selectNode(document.getElementById('cur'));
selection.removeAllRanges();
selection.addRange(range);
range.deleteContents();