<aside> 📄 모헤윰의 에디터 만들기 시리즈 모아보기 에디터 만들기 - ContentEditable [1/3] 에디터 만들기 - getSelection [2/3] 에디터 만들기 - Markdown [3/3]
</aside>
아니???????? 두 번째 글이 파서가 아니였네요. 저는 사실 이 글이 2부작이길 간절히 바랬는데, 1편에서 만든 에디터에 너무 끔찍한 버그가 있어서 이에 대해 정리해 보고자 합니다. 이걸로 3시간을 씨름하고 있었지만 모헤윰의 TIL 문서가 풍성해지고 있으니 긍정적이게 생각해야겠죠?
<aside> 💡 이 글은 Window 10, Chrome 107.0.5304.107 버전을 기준으로 작성되었습니다. 일부 환경에 따라 다르게 작동하는 부분이 있을 수 있습니다.
</aside>
지금 만든 contenteditable div는 치명적 문제가 있습니다. contenteditable이 사진처럼 첫 줄의 텍스트를 div 태그로 감싸주지 않는다고 언급한 문제가 기억 나시나요? 사실 저는 처음 글에서 첫 줄 문제가 해결된 척 이야기한 바 있죠. 특정 상황에서는 여전히 contenteditable div에 직접 텍스트를 입력할 수 있었지만, 솔직하게 그 때는 어차피 syntax highlighting을 지원하지 않을 거라 생각해 쉬쉬하기로 했습니다. 그런데 아니나 다를까, 붙여넣기에서 문제가 발생했습니다.
아무 입력도 되어 있지 않은 contenteditable div에 붙여넣기를 하면 위와 같은 오류가 납니다. 이 상태에서 다시 붙여넣기를 하면 그 때부턴 정상적으로 작동하는데, 어차피 이런 에러 쯤이야 콘솔을 열어놓고 웹서핑을 하는 개발자가 아니고서야 무시할 수 있는 수준이니 넘어갈 수 있겠지만, 결정적으로 붙여넣기 후 커서가 붙여넣기 한 글귀의 끝으로 이동하지 않았습니다. 아니나 다를까 탭 키에 대해서 구현했던 코드도 같은 오류가 있네요.
오늘은 이 오류의 원인과 해결 과정에 대해 기록하는 글을 써 보겠습니다.
저번 글에서 공부했던 바와 같이, contenteditable div는 일반적인 입력 동작이 제대로 이루어지지 않습니다. 착한 사용자가 차분히 글을 입력한다고 해도 첫 줄만 div 태그로 감싸주지 않는다거나, 붙여넣기를 하면 대뜸 원본의 서식이 그대로 적용된 글귀가 입력되기도 합니다.
대충 이런 느낌이죠. 그 외에도 수정을 어떻게 하느냐에 따라 결과물이 묘하게 달라지기도 하는 등, 너무나 다양한 문제가 산재해 있습니다. 서론이 너무 길었네요. 그냥 con..어쩌구에 대해 처음 글을 쓸 때 이런 문제들이 있다고 설명할 걸 그랬어요.
아무튼 이런 불쾌한 동작들을 해결하기 위해, keydown, keyup, paste 등 다양한 이벤트 리스너를 바인딩해서 직접 이런 제스쳐를 구현해야만 했습니다. 그 과정에서 소개했던 것이 바로 windows.getSelection()이였죠.
