코어를 손수 짜지 마

"에디터가 어려운 이유 절반이 텍스트 원시 레이어를 제대로 하는 거야. 그러니 짓지 말고 — 빌려."

공짜처럼 보이는데 아닌 레이어

브라우저가 contenteditable 을 건네주면 선물 같아. <div> 에 딱 붙이면 텍스트가 편집돼. 그게 함정이야. 진짜 동작이 필요해지는 순간 — 예상한 자리에 앉는 커서, 스타일된 span 을 가로지르는 선택, 편집을 온전하게 묶는 undo/redo, 쓰레기 HTML 을 안 넣는 복붙, 그리고 무엇보다 IME 조합 — 바닥 없는 구덩이를 소유하게 됐다는 걸 알게 돼. 모든 브라우저가 조금씩 다르게 굴고, 하나같이 너랑 싸워.

이게 텍스트 원시 레이어 고, 이걸 제대로 하는 게 에디터를 어렵게 만드는 절반이야. 화려한 일이 아니라 몇 달치 엣지 케이스야. Rekindle 은 그 몇 달을 안 써. CodeMirror 6 위에 서고 raw contenteditable 을 절대 안 짜.

상품화된 어려운 부분을 빌려

편집 코어 전체 — 커서 수학, 선택 모델, 히스토리, IME 라이프사이클 — 는 빌리면 몇 줄에 도착해. 1년을 피 흘릴 것이 import 한 줄이야:

import { EditorView, basicSetup } from "codemirror";
import { markdown } from "@codemirror/lang-markdown";

new EditorView({
  doc: "# Hello\n\nStart writing...",
  extensions: [basicSetup, markdown()],
  parent: document.querySelector("#editor")!,
});

커서, 선택, undo, IME — 풀렸고, 맞고, 크로스플랫폼 — 이 공짜야. 네 일은 그걸 다시 짓는 게 아냐. 누군가 이미 방탄으로 만든 코어 위에 네 가치 (Live Preview, voice underline, CMD+K) 를 얹는 거야.

Cinder 가 따르는 바로 그 규칙

이건 Rekindle 만의 별난 게 아니라 가족 법이야. Cinder 판은 UXP-thin: 플러그인 안에 mini-Photoshop 을 다시 짓지 마, Photoshop 이 손이 되게 둬. Loomis 판은 결정론적 기하 먼저, ML 은 landmark fitting 에만. 모든 형제가 상품화된 어려운 부분을 이름 붙이고 다시 짓길 거부해. Rekindle 의 상품화된 어려운 부분은 텍스트 편집이고, CodeMirror 6 이 그게 풀리러 가는 곳이야.

Code

편집 코어 전체를, 몇 줄로 빌려·typescript

import { EditorView, basicSetup } from "codemirror";
import { markdown } from "@codemirror/lang-markdown";

// 커서, 선택, undo/redo, IME 조합, 크로스플랫폼 —
// 전부 여기 도착해. 짓는 게 아니라 빌리는 거야.
const view = new EditorView({
  doc: "# Hello\n\nStart writing...",
  extensions: [basicSetup, markdown()],
  parent: document.querySelector("#editor")!,
});

// 네 일은 이 줄 위에서 시작해: 이미 방탄인 코어 위에
// Live Preview, voice underline, CMD+K 를 얹어.

Exercise

일반 HTML 파일을 열고, contenteditable div 를 넣고, '간단한' 기능 하나를 구현해봐. 마지막 낱말을 한 글자가 아니라 한 단계로 되돌리는 Ctrl+Z. 라이브러리에 손 뻗기까지 얼마나 버티는지 재봐. 부딪힌 그 벽이 바로 CodeMirror 6 이 이미 너 대신 오른 벽이야.

Hint

빨리 부딪힐 거야. contenteditable 의 브라우저 기본 undo 는 입력 이벤트 단위라 묶을 수가 없어. 편집을 온전한 undo 단계로 묶는 건 그 자체가 서브시스템 — CM6 이 공짜로 건네는 여러 손 중 하나야.