개요
에디터 → 위치·선택과 JS ↔ WASM 경계와 함께 읽으세요. 여기서는 숫자 오프셋과 Range 끝점에 초점을 둡니다.
UTF-16 vs UTF-8
JS 문자열은 UTF-16 코드 유닛 인덱스이고, Rust String은
UTF-8 바이트입니다. 이모지·다국어·IME 구간에서 JS의 “문자” 인덱스와
Rust char 경계가 다를 수 있습니다.
- API마다 UTF-16 오프셋·스칼라 인덱스·Rust 바이트 오프셋 중 무엇을 쓰는지 문서화.
range.startOffset을 Rust 문자 인덱스와 동일하다고 가정하지 않기.
JS Selection·Range
WASM에서 히트 테스트를 다시 구현하기보다, JS에서 정규화한 위치(경로·노드 id·플랫 버퍼 오프셋)를 넘기는 편이 일반적입니다.
getTargetRanges
beforeinput과 함께 쓸 때 브라우저가 바꾸려는 범위를
알려줄 수 있습니다. 지원·동작은 환경별로 다릅니다. 시나리오를 참고하세요.
조합 중에는 Range가 잠정적일 수 있어 compositionend 이후 정합이 안전한 경우가 많습니다.
Rust 모델 매핑
블록/인라인 안정 id, 선택만 얇게 직렬화, Rust에 단일 캐논 커서를 두고 DOM에 투영 등 패턴이 있습니다.
모바일·터치
터치 핸들·선택 지연은 데스크톱과 다릅니다. 가능하면 실기기·터치 자동화로 검증하세요.
Wasm 가이드
에디팅 방식
contenteditable + WASM: 진실 원천, 이벤트 순서, DOM↔모델 루프, 정규화, Rust 호출 시점.
IME·조합 입력
조합 이벤트, Rust 문서 모델 동기화, IME는 여전히 브라우저 영역인 이유.
JS ↔ WASM 경계
문자열·복사·배치 연산, 비동기와 입력 이벤트, 핫 패스 비용 줄이기.
클립보드·입력 라우팅
beforeinput, 붙여넣기, JS에서 라우팅할지 WASM에서 정제할지.
툴링·번들·워커
wasm-pack, wasm-opt, 코드 스플릿, Web Worker, COOP/COEP·스레드.
협업·CRDT (WASM)
Yrs·y-crdt, Yjs 연동, 스냅샷 vs 업데이트 스트림.
실행 취소·다시 실행 모델
브라우저 undo 스택 vs 모델 히스토리, 프로그래밍 DOM, WASM 트랜잭션.
접근성 (WASM 호스트)
편집 표면이 브라우저일 때 역할·포커스·스크린 리더.
테스트·디버깅
E2E, JS↔WASM 경계 프로파일링, IME·붙여넣기 CI 재현.
보안·배포
CSP, SRI, 모듈 무결성, contenteditable 옆 WASM 호스팅.