Hidden Mirror Element 기반의 Textarea Soft Wrap 정밀 감지 구현

Context

Textarea의 Soft Wrap은 Rendering Layer의 영역으로 DOM Value에 반영되지 않는 제약 존재. 기존 scrollHeight 기반 계산 방식은 Padding, Box-sizing, Window Resize 등 CSS 환경 변화에 따라 Line Count 오차가 발생하는 한계점 노출.

Technical Solution

• Textarea와 동일한 Font Metrics 및 Box Model을 가진 Hidden Mirror Div를 생성하여 레이아웃 동기화
• window.getComputedStyle을 통해 Width, Line-height, Padding 등 렌더링 결정 요소를 실시간 복제
• CSS white-space: pre-wrap 속성을 적용하여 브라우저의 기본 Wrapping 알고리즘을 그대로 활용
• Mirror Element의 scrollHeight를 Line-height로 나누어 정밀한 Visual Line Count 산출
• Canvas API의 measureText 방식 대비 Unicode segmentation 및 CJK 규칙 등 복잡한 Wrapping 로직 직접 구현 비용 제거
• getClientRects의 Shadow Tree 접근 불가 제약을 병렬 DOM 구조 설계를 통해 극복