변수 박스와 텍스트 커서의 위치 맞추기
문제
수식 입력창에는 일반 텍스트와 함께 변수명·유형·설정 버튼을 가진 박스가 들어가야 했습니다. 텍스트를 편집하는 위치와 박스를 그리는 위치가 달라지면 커서가 화면에서 보이는 변수와 어긋날 수 있었습니다.
변수를 클릭하거나 선택한 뒤 삭제하면 변수 전체가 지워져요.
구현
실제 입력은 textarea가 맡고, 변수 박스와 수식 색상은 별도 표시 레이어에서 그렸습니다. 입력 텍스트는 투명하게 두고 커서는 유지했으며, 두 레이어의 글자 크기·행간·패딩을 맞춰 같은 위치에 겹치도록 했습니다.
{_…_} 표시 문자열은 변수 박스가 차지할 공간을 확보하고 커서가 이동할 변수의 시작·끝 경계를 구분하는 데 사용했습니다. 표시 레이어에는 변수 박스를 겹쳐 그리고, 커서는 변수 내부에 머물지 않도록 경계로 이동시켰습니다.
변수 박스가 줄 경계에서 입력 텍스트와 어긋나지 않도록, _가 포함된 표시 문자열과 word-break: keep-all을 함께 사용해 줄바꿈을 조정했습니다.
표시 문자열의 시작·끝 위치와 textarea의 selectionStart·selectionEnd를 비교해 방향키 이동을 처리했습니다. 커서가 변수 내부에 있을 때는 setSelectionRange로 시작 또는 끝 경계로 옮기고, 변수 내부를 클릭했을 때도 끝 경계로 정렬했습니다.
Backspace로는 변수 하나가 함께 삭제되도록 입력 동작을 맞췄습니다. 변수 추가와 수식 오류 처리도 함께 구현했습니다.