
안녕하세요. 이번 포스팅에서는 최근 회사에서 contenteditable로 구현한 웹 에디터에서 cursor 관련 상태와 로직을 개선한 경험에 대해 공유하려고 합니다. 조금이나마 도움이 되었으면 좋겠네요. 먼저 구현해야 하는 기능에 대해 짤막하게 설명드리겠습니다.구현 기능contenteditable로 구현된 에디터 블럭들이 여러 개가 있습니다. 하나의 에디터 블럭에서 입력을 하는 와중에 Enter, Delete 혹은 Backspace 키를 누르면 마치 하나의 문서를 작업하는 것처럼 커서 기준으로 하나의 에디터 블럭이 두개로 나눠지거나 두개의 블럭이 하나로 합쳐지는 기능입니다.Enter를 입력하면 커서 기준으로 오른쪽부터 끝까지의 text가 다음 에디터 블럭으로 나뉘어 집니다.(separate)에디터 블럭..