아래는 직접 마크다운 위지윅 편집기를 만드는 과정에서 기록한 글이다. 현재는 TipTap 에디터 활용하였다. (굴복...)

keydown 이벤트와 input 이벤트 분리

기존에는 keydown 이벤트에 setTimeout을 주어 텍스트가 입력되거나 입력이 변경된 후에 대한 처리를 해주었었다. 그런데 이게 좀 불안정했다.

아직도 좀 불안정한 것 같다..

이렇게 하면 어찌 저찌 되는 것 같다...

다시 한 번 진짜로 해결한 것 같다!!!

원래는 커서가 문장의 맨 처음 가있을 때 백스페이스를 누르면 커서가 이전 문장 맨 뒤에 붙는 게 아니라 맨 앞에 붙는 문제가 있었고,

커서가 어디에 있든지 그 위치에서 엔터를 눌러 줄바꿈 하면 그때도 커서가 다음 문장의 맨 앞에 가는 문제가 있었다. 아니 그정도가 아니라 맨 마지막 문장 위치로 갔던 것 같다.

여러가지 처리해서 해결하긴 했는데 그 방법은...

키다운 이벤트와 인풋 이벤트를 분리

원래는 키다운 이벤트에 setTimeout을 걸어 입력 후의 상태를 변수에 넣었었다. 그런데 그렇게 하니까 여러모로 제어가 되지 않는 기분이었다.

1. 키다운 이벤트에서는 문자 입력 및 줄 삭제에 대한 부분은 처리하지 않거나 최소화한다.
2. 줄 추가의 경우 상태 변화를 위해 어쩔 수 없이 기존의 contenteditable의 기능을 죽이고 직접 추가하였다.
3. 커서의 위치를 상태로 저장하여 줄 바꿈(축소)이 발생할 때 해당 위치로 이동할 수 있도록 한다.
4. 줄이 추가되었을 때에는 이전 문장의 맨 끝이 아닌 새 문장의 시작으로 가야하므로, 의도적으로 선택되지 않은 상태로 만들고, 어태치 함수 실행 시 마지막 줄로 이동될 수 있도록 한다.
5. 현재 편집중인 줄이 아닌 경우, 커서 이동을 return 하여 막는다.

조금 추상적으로 설명했지만 이렇게 하니까 진짜 다 된 것 같다.

너무 기쁘다.

지금은 오후 10시 43분. 나는 아직 회사에 있다.