Bear rich Markdown 선택 영역의 시각 표현 통일

[developer-1px]

문제

Bear의 rich Markdown 리스트에서 선택 배경이 원문 들여쓰기 공백·불릿 투영·본문 DOM 박스별로 끊기고 높이가 달라 보입니다. 사용자가 제시한 화면을 출발점으로 선택 영역의 시각 표현을 별도 아젠다로 다룹니다. 리스트 구조/불릿 작업 #793 및 PR #794와 분리합니다.

목표와 설계 방향

실제 텍스트 선택과 시각 하이라이트의 책임을 분리합니다. 기존 선택·복사·입력·IME 동작을 유지하면서 보이는 본문과 원자적 컨트롤을 일관된 선택 영역으로 표현하는 방식을 조사·검증합니다.

• 본문은 실제 선택 범위를 표시합니다.
• 불릿 등 원자적 투영은 하나의 컨트롤로 표시합니다.
• 숨겨진 Markdown 문법과 들여쓰기 공백은 보이는 선택 영역에서 제외합니다.
• 줄 높이와 인접 영역 연결을 정리하되, 서로 다른 줄이나 선택되지 않은 내용을 잘못 칠하지 않습니다.
• Bear 전용 구현 대신 기존 contenteditable 원문↔화면 투영 및 선택 정본의 확장 가능성을 먼저 확인합니다.

조사와 완료 기준

• DOM Range·선택 스타일·투영 박스의 실제 좌표로 현재 불일치 원인을 재현하고 기록
• CSS/native 선택 개선과 별도 하이라이트 렌더링을 비교하고 최소한의 방식을 결정
• 리스트·다중 줄·역방향 선택·불릿·task·인라인 서식에서 시각 결과 확인
• 드래그·Shift+방향키·복사·한글 조합·스크롤·확대 및 Undo/Redo에서 기존 편집 계약 보존
• 정본 소유권·공개 API 필요 여부를 결정하고, 계약 추가 시 소유 패키지 문서/Usage/Source 등록

커서·선택 전체를 가상 엔진으로 교체하거나 Tree 선택 어포던스와 통합하는 것은 전제로 두지 않습니다. 별도 하이라이트가 실제로 필요한지는 조사 결과로 결정합니다.

[developer-1px]

실행 계약 및 승인된 범위 확정

사용자가 기존 조사 대상의 혼동을 정정한 뒤 다음과 같이 실행 대상을 확정했습니다.

현재 /applications/bear에 적용하고 기존 입력 구조 유지
맞아 json-document에 있는 bear의 selection을 가상으로 그리는 모듈

Goal Anchor

• Outcome: json-document의 /applications/bear에서 실제 contenteditable 선택을 유지하며 선택 영역과 커서를 정본 모듈이 가상으로 표시합니다.
• Done: 본문·다중 줄·역방향 선택·불릿·task·인라인 서식·빈 줄에서 선택 및 커서 위치를 검증하고, 드래그·Shift+방향키·복사/붙여넣기·IME·스크롤·확대·Undo/Redo와 기존 입력 구조를 보존합니다. 공개 API, 소유 패키지 문서, Usage 및 Source 연결을 제공합니다. 실제 Bear 화면의 로컬 후보를 사용자가 확인할 수 있도록 준비합니다.
• Don't: 별도 ../bear textarea 앱을 변경하지 않습니다. 편집기나 선택 조작 엔진을 교체하지 않습니다. Tree 통합, 다중 커서 편집, 새 History/selection store는 추가하지 않습니다.

계약 변경 이력

• 이전: CSS/native 표시 개선과 별도 하이라이트를 비교해 방식을 결정하며 커서 가상화를 전제로 두지 않음.
• 이후: 사용자의 위 확정에 따라 선택 영역과 커서를 가상으로 그리는 모듈을 구현함. native selection·contenteditable 입력·IME 경로는 유지함.
• 이유: 사용자가 실제 제품 대상과 독립 표시 모듈이라는 결과를 명시함. 과거 textarea 조사 결과는 이 구현의 입력 전제로 사용하지 않음.

작업 계획

1. 기존 DOM 투영·원문 위치·커서 표시 정본을 조사하고 실제 좌표로 기준 사례를 확보합니다.
2. contenteditable 소유 모듈에서 측정·표시 수명주기를 제공하고 Markdown 투영 및 Bear가 이를 소비하게 합니다.
3. 회귀 테스트, 관련 타입 검사·빌드, Bear 브라우저 시나리오와 문서/등록 검사를 수행합니다.
4. 로컬 체크포인트와 실제 화면을 제시하고 시각·상호작용 확인 후 PR로 게시합니다.

작업 경계와 검증 조건

• 선행 #793의 리스트 동작과 현재 Bear 입력/투영이 필요하므로 이를 포함한 열린 선행 PR #788의 정확한 원격 HEAD 928bbc4be756c549ce9e28a2c230b841b3226ee5에서 분기합니다. 기존 main의 미커밋 Core/문서 작업과 다른 워크트리를 변경하지 않습니다.
• createTextProjectionDOMAdapter, TextDOMAdapter, 기존 DOM 위치 매핑과 편집 binding을 재사용합니다. 기존 투영 커서·선택 표시의 중복 소유를 만들지 않습니다.
• 표시 전용 변경이므로 저장 형식/프로토콜 이행 및 외부 부작용 복구 절차는 해당하지 않습니다. IME·접근성은 회귀 검증 대상이며 실제 OS 입력/보조기술 검증이 불가능하면 자동 이벤트 검증과 구분해 보고합니다.
• 현재 연결된 Chrome은 Browser is not available: chrome으로 응답합니다. 저장소 E2E는 별도 실행하며 대화형 검증의 미확인을 통과로 보고하지 않습니다.

[developer-1px]

로컬 구현 및 검증 완료 · 사용자 시각 확인 대기

후보와 기준

• 브랜치: feat/795-virtual-text-selection
• 로컬 체크포인트: 23caea03a8917f88b4cce6ce4e07705b6096638e
• tree: 0cacbff09b5c4d1e21f8589210b3071f719181cd
• 직접 선행 Canvas 표 객체와 공통 표 편집 프로파일 연결 #788: 928bbc4be756c549ce9e28a2c230b841b3226ee5
• 원격 main: 28fd4e686a6725d5780861d9a80634641415534e
• 커밋 직전 원격을 갱신했으며 선행 HEAD와 열린 PR 구성이 유지됨을 확인했습니다. 선행 변경을 포함한 누적 트리에서 검사했습니다. 기존 main의 미커밋 작업과 다른 작업 트리는 변경하지 않았습니다.

변경

• contenteditable 정본의 bindTextSelectionOverlay(root, dom)와 text-selection.css를 공개했습니다. DOM 좌표 측정과 표시 수명을 분리하고, 기존 TextDOMAdapter의 동일 투영 구간 및 커서 가장자리 판정을 재사용합니다.
• binding/Markdown Web/React에 selectionRendering 옵션을 전달하고 Bear와 Markdown Usage에서 "virtual"을 사용합니다. Bear의 제품 변경은 이 옵션 연결뿐입니다.
• 선택한 본문과 원자적 투영을 줄 높이에 맞춰 그립니다. 숨겨진 문법·목록 들여쓰기는 제외하며, 겹치거나 맞닿은 가로 구간만 합칩니다. 역방향 선택의 원문 좌표와 live DOM caret affinity를 유지합니다.
• 편집 DOM 밖의 aria-hidden, pointer-events:none 레이어를 사용합니다. 입력·clipboard·History는 기존 binding에 남습니다. IME 조합, forced-colors, 수직 writing mode 및 측정 불가 시 기존 표시로 돌아갑니다.
• 소유 패키지 API/설명 문서, CSS export, architecture 책임 등록, Usage와 Source 연결을 갱신했습니다. API를 사이트 Source에서 찾을 수 있는지 단위 테스트로 확인했습니다.

검증

• npm run build: 전체 라이브러리 빌드 통과.
• contenteditable / Markdown Web / Markdown React 단위 테스트: 54 + 35 + 3 = 92개 통과. 해당 세 패키지의 tsconfig.test.json 타입 검사 통과.
• npm run typecheck -w @interactive-os/json-document-site, 사이트 production build, npm run workspace:check, npm run docs:api:check: 통과.
• npm test -w @interactive-os/json-document-site -- tests/unit/demo-workbench.test.tsx: 21개 통과.
• 새 text-selection-overlay.spec.ts: 7개 시나리오 × Chrome/Firefox/WebKit = 21개 통과. 순방향·역방향, 인라인 서식·불릿·task, 투영 및 일반 커서, 빈 줄·빈 화면, 드래그, Shift 선택, 스크롤·중첩 스크롤 clipping·모바일 reflow·CSS zoom, composition fallback·forced-colors·중첩 control focus·unmount를 검사했습니다. 실제 clipboard read/write 권한을 가진 Chrome에서 copy/paste와 Undo/Redo도 검사했습니다.
• Bear 및 관련 Markdown 편집 회귀를 넓혀 고유 시나리오 101개 통과, 아래 기존 표 테스트 6개 실패를 분리했습니다. 처음 실패한 Markdown caret 10개는 초기 fixture의 수동 offset 계산이 Sheet UI 텍스트까지 세던 문제였습니다. 제품의 Select All 명령으로 fixture를 준비하도록 고친 뒤 10개 모두 통과했습니다. 여기에는 원문 clipboard, 한글 조합 이벤트 순서, 50,000자 문서의 DOM 보존과 caret/Undo 검증이 포함됩니다.
• 연결된 사용자 Chrome에서도 /applications/bear에서 목록 선택, Shift+↓, 입력 후 Undo 복원을 실행하고 선택 배경을 시각 확인했습니다. 최종 후보에서 가상 선택 3개 조각, native 편집 root 유지, 편집 root 내부 overlay 0개를 확인했습니다.
• 실제 OS 한글 후보창·터치 핸들·스크린리더 사용은 자동 이벤트/CDP 검증과 구분하며, 이번 실행에서 수동 검증했다고 주장하지 않습니다.

기존 실패의 기준선 비교

변경 전 선행과 파일 차이가 없는 feat/793-bear-list-editing 트리에서 별도 저장소 dev server를 띄워 아래 6개를 재실행했고 같은 실패를 재현했습니다. 비교 서버는 종료했습니다.

1. markdown-grammar.spec.ts의 tableCell 직접 편집: 현재는 Sheet UI이므로 이전 data-markdown-kind="tableCell" selector가 없음.
2. 같은 파일의 Bear 버튼 0개 기대: 현재 문서 안의 Sheet에 버튼 12개가 있음.
3. markdown-markers.spec.ts의 table marker 기호 단위 편집: 현재는 표 전체의 원자적 투영.
4. 같은 파일의 tableRow 3개 기대: 현재 Sheet가 행을 표시함.
   5–6. markdown-navigation.spec.ts의 table caret/Shift 이동: 이전 표 텍스트 DOM과 UI를 포함하는 source offset 계산을 전제로 함.

이 6개는 이번 선택 표시 변경의 신규 회귀가 아닙니다. 전체 브라우저 검사를 전부 통과했다고 보고하지 않습니다. 새 모듈 회귀는 변경 전에는 가상 레이어/속성 자체가 없어 통과할 수 없으며, 추가로 빈 줄 geometry 실패를 재현한 뒤 수정했습니다.

다음 단계

현재 상태는 ready-for-user-check입니다. 선택 배경 높이·색과 커서 느낌을 사용자가 확인할 수 있도록 로컬 Bear 후보를 열어 두었습니다. 승인된 후보가 확정되면 같은 체크포인트를 기준으로 원격 게시와 PR을 진행합니다. 아직 push/PR/merge하지 않았습니다.