같은 수식을 4가지 방식으로 편집하며 UX/구현 비용을 비교합니다.
| 에디터 | 번들 | 의존성 | 칩 UX | 자동완성 | 구현 난이도 |
|---|---|---|---|---|---|
| A. ContentEditable | ~5KB | 없음 (순수 DOM) | 직접 구현 | 직접 구현 필요 | 높음 (커서/selection 세부) |
| B. CodeMirror 6 | ~150KB | @codemirror/* | Decoration mark (텍스트 위) | Autocomplete 확장 | 중간 |
| C. Monaco | ~3MB | monaco-editor | Decoration mark (텍스트 위) | CompletionItemProvider 기본 제공 | 중간, 번들 무거움 |
| D. TipTap (vanilla) | ~200KB | @tiptap/core, ProseMirror | Atomic inline Node (진짜 칩) | Suggestion plugin | 중간 (노드 스키마 정의) |
특징: 번들 0, 토큰화 우리 regex 그대로, 칩은 contentEditable=false span, 엔터·붙여넣기·drag 등 edge case 는 모두 직접 처리.