증상: 줄 끝에 커서를 두고 엔터를 치면 커서보다 앞쪽에서 줄이 나뉘었다.
원인은 두 층의 크기를 맞추는 방식이었다. 색칠된 <pre> 가 상자 크기를 정하고
textarea 가 그 위를 덮게 했는데, flex 자식에서 `width: max-content` 가 기대대로
적용되지 않아 화면보다 긴 줄이 있으면 textarea 만 내부 스크롤이 가능한 상태가 됐다
(실측 scrollWidth 706 vs clientWidth 686). 캐럿을 따라 textarea 가 내부적으로
스크롤되면 색칠 층은 제자리에 남아, 보이는 글자와 실제 문자 오프셋이 어긋난다.
그래서 커서를 둔 곳과 다른 위치에 개행이 들어갔다.
크기를 맞추려는 시도를 버리고 스크롤 주체를 textarea 로 두고 색칠 층과 줄 번호를
transform 으로 같은 양만큼 이동시킨다. 크기 계산이 아예 없으므로 어긋날 여지가
없다. 줄 번호 칸도 코드 영역 왼쪽의 독립 박스로 바꿔(sticky 제거) 가로 스크롤과
무관해졌다.
검증(브라우저 실측): 가로 스크롤 33px·세로 200px 에서 색칠 층과 줄 번호가 정확히
같은 양만큼 이동, 스크롤 0 에서 두 층의 텍스트 원점 일치, 줄 번호 개수가 줄 수와
일치(10/10, 70/70). 유닛테스트 45개 통과.
Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
king
b60690d3e1
