@moda-editor/core 0.3.1 → 0.3.3

package/dist/view/input.js

@@ -1,685 +1,83 @@
-import { nodeAt } from "../model/traverse.js";
-import { parseHTML } from "../parse/html.js";
-import { pointBefore, pointAfter } from "../state/navigate.js";
-import { normalizeRange, point, pointEq, textSelection, } from "../state/selection.js";
-import { caretPointFromXY, isLeafPoint } from "./caret.js";
-import { applyDomSelection, domSelection, domToPoint, PATH_ATTR, } from "./dom.js";
-import { blockCtx, dispatchFiles, rangeCtx } from "./hook-ctx.js";
-import { createImeSession } from "./ime.js";
-import { lineNav } from "./line-nav.js";
-import { nodeSelectionBeforeInput, nodeSelectionKeydown, trySelectAtom, } from "./node-selection.js";
-import { blockHasContent, pointBlockPath } from "../commands.js";
-import { dispatchFormatInput, LINE_NAV_KEYS, normalizeKey } from "./keys.js";
+import { domSelection } from "./dom.js";
+import { absorbDomText, createImeSession } from "./ime.js";
+import { topBlockKey } from "./caret.js";
+import { createSelectionSync } from "./input-selection.js";
+import { createBeforeInputHandler } from "./input-beforeinput.js";
+import { createKeydownHandler } from "./input-keys.js";
+import { createPointerHandlers } from "./input-pointer.js";
 export function bindEditorInput(editor, el) {
     const dirtyPaths = new Set();
     const readDomSel = () => domSelection(el);
-    // IME 조합 세션 — composing/compStart/타이머/에코 판별은 전부 세션
-    // 내부다. 이 파일은 DOM 이벤트를 세션 메서드로 변환하고 판정
-    // 결과(ImeGate)에 따라 preventDefault/무시만 수행한다
-    const ime = createImeSession({ editor, el, dirtyPaths, readDomSel });
-    /**
-     * 기능 DOM 오버레이 갱신 — 활성 줄 표시·괄호 하이라이트처럼
-     * 렌더 트리가 아니라 DOM을 직접 마킹하는 것들. 각 기능이
-     * Extension.input.paintOverlay로 구현하고 여기서 일괄 호출한다 —
-     * 어댑터 5개가 restoreSelection만 호출하면 동일 동작한다.
-     */
-    const paintOverlays = () => {
-        for (const h of editor.inputHooks) {
-            h.paintOverlay?.(el, editor.state, editor);
-        }
-        // atom 노드 셀렉션 시각화 — 선택 경로의 최외곽 요소에 is-selected를
-        // 단다. 각 기능의 오버레이(이미지 편집 바 등)와 별개로 공용으로 칠한다
-        el.querySelectorAll(".is-selected").forEach((n) => n.classList.remove("is-selected"));
-        const sel = editor.state.selection;
-        if (sel.type === "node") {
-            // data-me-path가 안쪽 아울렛(.me-node-content)에 달린 노드 뷰는
-            // 래퍼(.me-node-view)까지 올라가 컴포넌트 전체에 링을 둘러야 한다
-            const hit = el.querySelector(`[${PATH_ATTR}="${sel.path.join(",")}"]`);
-            (hit?.closest(".me-node-view") ?? hit)?.classList.add("is-selected");
-        }
-    };
+    /** 흡수 flush 직후 콜백 — 조합 창에 미뤄둔 DOM 쓰기를 커밋하는 지점 */
+    const idleCbs = new Set();
+    // selSync는 ime가 먼저 만들어져야 하므로 늦은 바인딩 — onIdle은
+    // 바인딩 완료 뒤의 조합 flush에서만 발화해 null 경로는 도달하지 않는다
+    let selSync = null;
+    /** IME 세션 — 한 바인딩당 하나. 상태 기계는 ime.ts에 갇혀 있다 */
+    const ime = createImeSession({
+        editor,
+        el,
+        dirtyPaths,
+        readDomSel,
+        onIdle: () => {
+            for (const cb of idleCbs)
+                cb();
+            // 조합 창에 스킵된 셀렉션 복원을 재생한다 — restoreSelection은
+            // 조합 중 no-op이라, 흡수가 tr을 만들지 않은(통지 없는) 경로나
+            // 셀렉션만 실은 외부 tr에서는 이것이 캐럿을 doc으로 수렴시키는
+            // 유일한 복원 지점이다. 어댑터의 post-commit 복원은 이미 DOM과
+            // 일치하면 no-op이라 이중 호출 비용이 없다
+            selSync?.restoreSelection();
+        },
+    });
+    /** 셀렉션·포커스·오버레이 동기화 — 내부에 lastApplied/pendingSel/
+     *  focused 상태를 캡슐화한다 */
+    const sel = createSelectionSync({ editor, el, dirtyPaths, readDomSel, ime });
+    selSync = sel;
+    /** DOM 이벤트 핸들러 묶음 — 각 모듈의 팩토리가 의존성을 주입받는다 */
+    const onBeforeInput = createBeforeInputHandler({
+        editor,
+        el,
+        readDomSel,
+        ime,
+    });
+    const onKeydown = createKeydownHandler({
+        editor,
+        el,
+        ime,
+        syncDocSelection: sel.syncDocSelection,
+    });
+    const { onMouseDown, onPaste, onDragOver, onDrop } = createPointerHandlers({
+        editor,
+        el,
+        ime,
+    });
     /**
-     * 우리가 DOM에 마지막으로 반영했거나 selectionchange로 확인한 셀렉션.
-     * 이후 DOM이 이 값과 다르면 아직 동기화되지 않은 사용자 이동이다 —
-     * 비동기 렌더 커밋이 stale doc 셀렉션으로 캐럿을 되돌리는 레이스를
-     * 막기 위해 restoreSelection이 doc 대신 DOM을 진실로 택한다.
+     * 네이티브 DOM 변경 폴백 — beforeinput을 preventDefault한 편집은
+     * DOM이 안 바뀌어 input을 발생시키지 않으므로, 여기 도달한 input은
+     * 우리가 모르는 DOM 변경이다 (iOS 자동고침·받아쓰기처럼 beforeinput이
+     * 생략되는 경로). 그대로 두면 doc↔DOM이 영구히 어긋나므로 캐럿
+     * 홀더의 텍스트 차이를 트랜잭션으로 흡수하고, 텍스트 diff로 못 잡는
+     * 구조 변경은 포커스 블록을 더티 표시해 다음 렌더가 리마운트로
+     * 복구하게 한다 (PM DOMObserver의 축소판)
      */
-    let lastApplied = null;
-    const applySel = (anchor, focus) => {
-        applyDomSelection(el, anchor, focus);
-        lastApplied = { anchor, focus };
-    };
-    // 포커스가 에디터 밖에 있는 동안 건너뛴 DOM 셀렉션 반영 —
-    // focusin에서 한 번에 동기화한다
-    let pendingSel = false;
-    const restoreSelection = () => {
-        // 더러운 블록이 같은 tr에서 지워져 어댑터가 소비하지 못한 엔트리는
-        // 버린다 — 인덱스가 재사용되면 엉뚱한 블록이 리마운트된다
-        const topLen = editor.state.doc.content?.length ?? 0;
-        for (const k of dirtyPaths) {
-            const i = Number(k);
-            if (!Number.isInteger(i) || i < 0 || i >= topLen) {
-                dirtyPaths.delete(k);
-            }
-        }
-        // compositionend~흡수 사이 창에는 DOM이 브라우저가 쓴 조합
-        // 텍스트를 품고 있다 — 지연된(비동기) 복원이 이 창에 떨어지면
-        // 캐럿을 되돌려 흡수가 목표 홀더를 놓친다. 흡수 뒤의 디스패치가
-        // 다시 복원을 트리거하므로 이 창만 건너뛴다 — 조합 중(composing)엔
-        // 우리 트랜잭션(크로스-블록 선택 선삭제 등)이 DOM을 바꾸므로
-        // 복원이 필요하다
-        if (ime.absorbing)
-            return;
-        const sel = editor.state.selection;
-        // 포커스가 에디터 밖의 다른 요소(찾기 바·팝오버 입력)에 잡혀
-        // 있으면 DOM 셀렉션을 건드리지 않는다 — Blink는 contenteditable
-        // 안에 셀렉션을 쓰면 그 요소를 focus하므로, 매 커밋마다 입력
-        // 포커스를 빼앗긴다 (PM의 hasFocus 관례). 아무것도 포커스하지
-        // 않은 상태(body)는 기존처럼 반영한다 — 어차피 뺏을 포커스가
-        // 없고, DOM 셀렉션을 읽는 오버레이(ace 활성 라인)가 동작해야 한다
-        const ae = el.ownerDocument.activeElement;
-        if (ae && ae !== el.ownerDocument.body && !el.contains(ae)) {
-            pendingSel = true;
-            paintOverlays();
-            return;
-        }
-        pendingSel = false;
-        if (sel.type !== "text") {
-            // 노드 셀렉션 — DOM 캐럿을 노드 요소의 경계로 고정한다 (PM 관례).
-            // 고정하지 않으면 팝 닫힘·포커스 복귀 등으로 브라우저가 캐럿을
-            // 옮길 때 selectionchange가 그 위치를 읽어 노드 셀렉션을
-            // 되감는다 — 경계에 고정하면 이후 이벤트는 같은 위치를 읽는다
-            const hit = el.querySelector(`[${PATH_ATTR}="${sel.path.join(",")}"]`);
-            const host = hit?.closest(".me-node-view") ?? hit;
-            const pi = sel.path[sel.path.length - 1];
-            if (host?.parentNode && pi != null) {
-                const idx = Array.prototype.indexOf.call(host.parentNode.childNodes, host);
-                const ds = el.ownerDocument.getSelection();
-                ds?.setBaseAndExtent(host.parentNode, idx, host.parentNode, idx);
-                // 실제로 읽히는 Point를 기록 — childNodes 인덱스와 domToPoint의
-                // 요소 인덱스가 어긋나도 이후 selectionchange는 같은 값을 읽는다
-                const back = readDomSel();
-                const bp = point(sel.path.slice(0, -1), pi);
-                lastApplied = back ?? { anchor: bp, focus: bp };
-            }
-            paintOverlays();
-            return;
-        }
-        // 이미 DOM 셀렉션이 doc과 같으면 건드리지 않는다 (깜빡임/역순 방지)
-        const cur = readDomSel();
-        if (cur &&
-            pointEq(cur.anchor, sel.anchor) &&
-            pointEq(cur.focus, sel.focus)) {
-            paintOverlays();
-            return;
-        }
-        // DOM이 마지막 반영값과 다르다 = 사용자가 움직였지만 selectionchange가
-        // 아직 처리되지 않았다 — 비동기 렌더 커밋이 stale doc으로 캐럿을
-        // 되돌리는 레이스를 막는다. 단 두 조건이 모두 필요하다:
-        //  - doc이 마지막 반영값 그대로 — 트랜잭션이 doc을 바꿨다면 그게
-        //    최신 의도라 DOM의 이전 위치는 버려야 한다(방금 dispatch된
-        //    setSel이 먹지 않는 역효과 방지)
-        //  - 리프 포인트 — 렌더가 노드를 교체하면 Chrome이 캐럿을 요소
-        //    경계로 재앵커하는데 그건 사용자 이동이 아니라 폐기 대상이다
-        if (cur &&
-            lastApplied &&
-            isLeafPoint(editor.state.doc, cur.anchor) &&
-            isLeafPoint(editor.state.doc, cur.focus) &&
-            pointEq(sel.anchor, lastApplied.anchor) &&
-            pointEq(sel.focus, lastApplied.focus) &&
-            (!pointEq(cur.anchor, lastApplied.anchor) ||
-                !pointEq(cur.focus, lastApplied.focus))) {
-            lastApplied = cur;
-            editor.dispatch(editor.state.tr().setSelection({ type: "text", ...cur }));
-            paintOverlays();
-            return;
-        }
-        applySel(sel.anchor, sel.focus);
-        paintOverlays();
-    };
-    const syncDocSelection = () => {
-        const s = readDomSel();
-        if (!s)
-            return;
-        // 흡수한 DOM 위치를 확인된 값으로 기록 — 이 위치에 대한 지연
-        // selectionchange(클릭 직후 키 입력 등)가 도착해도 "사용자가
-        // 새로 움직인 셀렉션"으로 오인하지 않게 한다 (노드 셀렉션 붕괴 방지)
-        lastApplied = s;
-        const cur = editor.state.selection;
-        if (cur.type === "text" &&
-            pointEq(cur.anchor, s.anchor) &&
-            pointEq(cur.focus, s.focus)) {
+    const onInput = (e) => {
+        // 조합 경로는 흡수가 담당한다 — 조합 중/흡수 대기 창의 input과
+        // isComposing input은 건드리지 않는다
+        if (ime.active || e.isComposing || !editor.editable) {
             return;
         }
-        // 대기 서식(storedMarks)은 커서 이동에도 유지한다 — GDocs/Word
-        // 관례: 토글로 끌 때까지 다음 타이핑에 계속 적용된다
-        editor.dispatch(editor.state.tr().setSelection({ type: "text", ...s }));
-    };
-    const onBeforeInput = (e) => {
-        if (!editor.editable || e.isComposing)
-            return;
-        // DOM 셀렉션을 흡수 플러시 전에 읽어둔다 — 커밋 끝점 좌표라
-        // 흡수된 텍스트를 포함해 정확하고, 플러시의 리렌더가 DOM
-        // 셀렉션을 doc(조합 시작점)으로 되돌리기 전의 값이다
         const domSel = readDomSel();
-        // 조합 세션 게이트 — swallow(조합 중 무시)/prevent(커밋 에코 차단)/
-        // proceed(정상 처리 — 흡수 대기 중의 구조 입력은 플러시 후 통과)
-        const gated = ime.gate(e, domSel);
-        if (gated === "swallow")
+        if (!domSel)
             return;
-        if (gated === "prevent") {
-            e.preventDefault();
-            return;
-        }
-        const ds = editor.state.selection;
-        // 노드 셀렉션 — DOM 캐럿은 클릭 전 위치에 멈춰 있어 신뢰 불가.
-        // 삭제는 노드를 통째로 지우고, 텍스트/개행 입력은 노드 뒤 블록
-        // 경계에서 일어나는 것으로 처리한다 (노드는 유지)
-        if (ds.type === "node") {
-            e.preventDefault();
-            nodeSelectionBeforeInput(editor, e);
-            return;
-        }
-        // DOM 셀렉션이 무효하면(리렌더로 분리된 노드 위 등) doc 셀렉션으로
-        // 폴백 — 여기까지 왔으면 doc 셀렉션은 항상 텍스트다
-        const sel = domSel ?? { anchor: ds.anchor, focus: ds.focus };
-        const tr = editor.state.tr();
-        switch (e.inputType) {
-            case "insertText":
-            case "insertCompositionText": {
-                e.preventDefault();
-                const data = e.data ?? "";
-                if (!data)
-                    return;
-                // 커밋 에코가 흡수 타이머보다 늦게 도착한 경우 — DOM과 doc에
-                // 이미 같은 글자가 있으므로 다시 넣으면 "세세"가 된다
-                if (ime.isLateEcho(data, domSel))
-                    return;
-                // 범위 삭제 뒤엔 삭제 전 좌표가 무효 — 정규화한 앞점 기준으로 삽입
-                const r = normalizeRange(sel);
-                // 입력 훅 — 기능이 글자 가로채기(코드블록 자동 쌍·타입오버 등)를
-                // 구현한다. true 반환 = 소비 → 기본 삽입/입력 규칙을 건너뛴다
-                let consumed = false;
-                if (editor.inputHooks.length) {
-                    const ctx = blockCtx(editor, r, tr);
-                    if (ctx) {
-                        for (const h of editor.inputHooks) {
-                            if (h.insertText?.(ctx, data, e.inputType)) {
-                                consumed = true;
-                                break;
-                            }
-                        }
-                    }
-                }
-                if (!consumed) {
-                    if (!pointEq(r.anchor, r.focus))
-                        tr.delete(r);
-                    tr.insertText(data, r.anchor).setMeta("history.group", "type");
-                    // 마크다운 입력 규칙 — 삽입+변환이 같은 tr이라 하나의 undo 단위
-                    tr.applyInputRules(editor.inputRules);
-                    editor.dispatch(tr);
-                }
-                break;
-            }
-            case "insertParagraph":
-            case "insertLineBreak": {
-                e.preventDefault();
-                const r = normalizeRange(sel);
-                // 분기 판단은 삭제 전 문서의 캐럿 블록 기준 — 경계 포인트
-                // (빈 블록의 {path:블록,offset:0} 관례)도 안쪽 블록으로 내려
-                // 해석해야 빈 리스트 아이템의 Enter가 lift로 잡힌다
-                const blockPath = pointBlockPath(editor.state.doc, editor.state.schema, r.anchor);
-                const parentPath = blockPath?.slice(0, -1);
-                const parent = parentPath?.length
-                    ? nodeAt(editor.state.doc, parentPath)
-                    : undefined;
-                const pspec = parent
-                    ? editor.state.schema.nodeSpec(parent.type)
-                    : undefined;
-                if (!pointEq(r.anchor, r.focus)) {
-                    tr.delete(r);
-                    // 삭제 후에는 tr.selection(삭제 붕괴점) 기준 — 삭제 전 좌표는 무효
-                    tr.split();
-                    editor.dispatch(tr);
-                }
-                else {
-                    // 입력 훅 — 기능이 개행 가로채기(코드블록 자동 들여쓰기·
-                    // 블록 탈출 등)를 구현한다. true 반환 = 소비
-                    let consumed = false;
-                    if (editor.inputHooks.length) {
-                        const ctx = blockCtx(editor, r, tr);
-                        if (ctx) {
-                            for (const h of editor.inputHooks) {
-                                if (h.insertParagraph?.(ctx)) {
-                                    consumed = true;
-                                    break;
-                                }
-                            }
-                        }
-                    }
-                    if (!consumed) {
-                        if (parentPath && pspec?.listItem) {
-                            // 리스트 아이템 — 빈 아이템이면 리스트 탈출, 아니면 아이템 분할.
-                            // 텍스트 길이만 보면 멘션·hardBreak만 담은 아이템이
-                            // "비었다"로 오판돼 Enter에 내용이 통째로 리프트된다
-                            const kids = parent.content ?? [];
-                            const empty = kids.length === 1 &&
-                                !blockHasContent(editor.state.schema, kids[0]);
-                            if (empty) {
-                                tr.liftItem(parentPath);
-                            }
-                            else {
-                                tr.splitItem(parentPath, r.anchor);
-                            }
-                        }
-                        else {
-                            tr.split(r.anchor);
-                        }
-                        editor.dispatch(tr);
-                    }
-                }
-                break;
-            }
-            case "deleteContentBackward":
-            case "deleteContentForward": {
-                e.preventDefault();
-                if (!pointEq(sel.anchor, sel.focus)) {
-                    tr.delete(sel);
-                }
-                else {
-                    // 입력 훅 — collapsed Backspace 가로채기 (코드블록 쌍 삭제 등).
-                    // true 반환 = 소비 → 아래 기본 삭제 경로를 건너뛴다
-                    let consumed = false;
-                    if (e.inputType === "deleteContentBackward" &&
-                        editor.inputHooks.length) {
-                        const ctx = blockCtx(editor, { anchor: sel.anchor, focus: sel.focus }, tr);
-                        if (ctx) {
-                            for (const h of editor.inputHooks) {
-                                if (h.deleteBackward?.(ctx)) {
-                                    consumed = true;
-                                    break;
-                                }
-                            }
-                        }
-                    }
-                    if (consumed)
-                        break;
-                    // 브라우저가 계산한 실제 삭제 범위 — 이모지(서로게이트
-                    // 페어)·결합문자·ZWJ 클러스터는 코드 유닛 하나만 지우면
-                    // 깨지므로 targetRange를 우선 쓴다. 단, 방향에 맞는 끝점이
-                    // 캐럿이어야 신뢰한다 — Chrome은 블록 경계 Backspace에
-                    // 캐럿 "뒤" 글자 범위를 반환하는 버그가 있어 그대로 지우면
-                    // 머지 대신 다음 글자가 날아간다
-                    const tr0 = e.getTargetRanges?.()[0];
-                    const ta = tr0 && domToPoint(el, tr0.startContainer, tr0.startOffset);
-                    const tf = tr0 && domToPoint(el, tr0.endContainer, tr0.endOffset);
-                    const backward = e.inputType === "deleteContentBackward";
-                    const onCaret = backward
-                        ? tf && pointEq(tf, sel.focus)
-                        : ta && pointEq(ta, sel.focus);
-                    // 끝점이 요소 레벨 포인트(컨테이너 자식 경계, 블록 머지 시 Chrome이
-                    // (P,0) 같은 위치를 줌)면 tr.delete가 해석하지 못한다 — 리프
-                    // 포인트를 주는 pointBefore/After 폴백으로 돌린다
-                    if (ta &&
-                        tf &&
-                        !pointEq(ta, tf) &&
-                        onCaret &&
-                        isLeafPoint(editor.state.doc, ta) &&
-                        isLeafPoint(editor.state.doc, tf)) {
-                        tr.delete(normalizeRange({ anchor: ta, focus: tf }));
-                        tr.setMeta("history.group", "delete");
-                        editor.dispatch(tr);
-                        break;
-                    }
-                    const boundary = e.inputType === "deleteContentBackward"
-                        ? pointBefore(editor.state.doc, sel.focus)
-                        : pointAfter(editor.state.doc, sel.focus);
-                    if (!boundary)
-                        return;
-                    tr.delete(e.inputType === "deleteContentBackward"
-                        ? { anchor: boundary, focus: sel.focus }
-                        : { anchor: sel.focus, focus: boundary });
-                }
-                tr.setMeta("history.group", "delete");
-                editor.dispatch(tr);
-                break;
-            }
-            case "insertFromPaste": {
-                e.preventDefault();
-                const html = e.dataTransfer?.getData("text/html");
-                const text = e.dataTransfer?.getData("text/plain") ?? "";
-                const r = normalizeRange(sel);
-                // 기능 훅 — 링크 URL 감싸기·코드블록 순수 텍스트 등.
-                // 하나라도 소비하면 기본 경로를 건너뛴다
-                const ctx = rangeCtx(editor, r, tr);
-                const data = { html, text };
-                let consumed = false;
-                for (const h of editor.inputHooks) {
-                    if (h.insertFromPaste?.(ctx, data)) {
-                        consumed = true;
-                        break;
-                    }
-                }
-                if (consumed)
-                    break;
-                if (!pointEq(r.anchor, r.focus))
-                    tr.delete(r);
-                if (html) {
-                    const nodes = parseHTML(html, editor.state.schema);
-                    if (nodes.length) {
-                        tr.insertSlice(r.anchor, nodes).setMeta("paste", true);
-                        editor.dispatch(tr);
-                        break;
-                    }
-                }
-                if (!text)
-                    return;
-                tr.insertText(text, r.anchor).setMeta("paste", true);
-                editor.dispatch(tr);
-                break;
-            }
-            case "insertFromDrop":
-            case "insertReplacementText": {
-                // 텍스트 드롭·자동고침 — 핸들러가 없으면 브라우저가 DOM을 직접
-                // 바꿔 doc과 어긋난다. 이미지 파일 드롭은 onDrop이 먼저 잡는다
-                e.preventDefault();
-                const data = e.data ?? e.dataTransfer?.getData("text/plain") ?? "";
-                // insertReplacementText는 교체 대상 범위를 준다 (자동고침)
-                let r = normalizeRange(sel);
-                if (e.inputType === "insertReplacementText") {
-                    const tr0 = e.getTargetRanges?.()[0];
-                    const a = tr0 && domToPoint(el, tr0.startContainer, tr0.startOffset);
-                    const f = tr0 && domToPoint(el, tr0.endContainer, tr0.endOffset);
-                    if (a && f)
-                        r = normalizeRange({ anchor: a, focus: f });
-                }
-                if (!pointEq(r.anchor, r.focus))
-                    tr.delete(r);
-                if (data) {
-                    tr.insertText(data, r.anchor).setMeta("history.group", "type");
-                }
-                editor.dispatch(tr);
-                break;
-            }
-            // 단어/줄 단위·드래그·잘라내기 삭제 — macOS Option-Delete는
-            // deleteWord*, Ctrl-K는 deleteSoftLine*, Cmd-X는 deleteByCut으로
-            // 온다. getTargetRanges가 브라우저가 계산한 정확한 범위를 주므로
-            // 그것을 쓰고, 없으면 현재 선택을 지운다. 잘라내기의 클립보드
-            // 쓰기는 cut 이벤트의 디폴트라 beforeinput을 막아도 채워진다
-            case "deleteWordBackward":
-            case "deleteWordForward":
-            case "deleteSoftLineBackward":
-            case "deleteSoftLineForward":
-            case "deleteEntireSoftLine":
-            case "deleteHardLineBackward":
-            case "deleteHardLineForward":
-            case "deleteByDrag":
-            case "deleteByCut": {
-                e.preventDefault();
-                const tr0 = e.getTargetRanges?.()[0];
-                const a = tr0 && domToPoint(el, tr0.startContainer, tr0.startOffset);
-                const f = tr0 && domToPoint(el, tr0.endContainer, tr0.endOffset);
-                // 캐럿 끝점이 삭제 방향과 맞을 때만 목표 범위를 신뢰한다 —
-                // 블록 경계에서 Chrome이 반대 방향 범위를 주는 버그가 있다.
-                // 방향 없는 타입(drag/cut/entire)은 항상 신뢰한다. 끝점이 요소
-                // 레벨 포인트면 tr.delete가 해석 못하므로 리프만 받는다
-                const delBack = e.inputType.endsWith("Backward");
-                const delFwd = e.inputType.endsWith("Forward");
-                const trusted = a &&
-                    f &&
-                    !pointEq(a, f) &&
-                    isLeafPoint(editor.state.doc, a) &&
-                    isLeafPoint(editor.state.doc, f) &&
-                    (!delBack || pointEq(f, sel.focus)) &&
-                    (!delFwd || pointEq(a, sel.focus));
-                const r = trusted
-                    ? normalizeRange({ anchor: a, focus: f })
-                    : normalizeRange(sel);
-                tr.delete(r).setMeta("history.group", "delete");
-                editor.dispatch(tr);
-                break;
-            }
-            // 모바일·컨텍스트 메뉴·리더의 서식 명령 — 네이티브 execCommand가
-            // DOM을 직접 바꾸면 어긋나므로 우리 커맨드로 매핑한다
-            // (매핑 테이블은 keys.ts의 dispatchFormatInput)
-            case "insertFromYank":
-            case "insertFromPasteAsQuotation": {
-                // macOS 킬링 붙여넣기(Ctrl-Y)·인용 붙여넣기 — 있으면 순수
-                // 텍스트로 삽입한다
-                e.preventDefault();
-                const data = e.data ?? e.dataTransfer?.getData("text/plain") ?? "";
-                if (!data)
-                    return;
-                const r = normalizeRange(sel);
-                if (!pointEq(r.anchor, r.focus))
-                    tr.delete(r);
-                tr.insertText(data, r.anchor).setMeta("history.group", "type");
-                editor.dispatch(tr);
-                break;
-            }
-            default:
-                // format*/history*/insert*List 등 — 커맨드 디스패치 테이블에 위임
-                if (dispatchFormatInput(editor, e.inputType)) {
-                    e.preventDefault();
-                    break;
-                }
-                // 나머지 타입(insertTranspose, formatFontColor 등)은 우리가
-                // 처리하지 않는다 — 그대로 두면 브라우저가 DOM만 바꿔 doc과
-                // 영구히 어긋나므로 기본 동작을 막아 no-op으로 둔다
-                e.preventDefault();
-                break;
+        if (!absorbDomText({ editor, el, dirtyPaths }, domSel.focus)) {
+            const k = topBlockKey(domSel.focus) ?? topBlockKey(domSel.anchor);
+            if (k != null)
+                dirtyPaths.add(k);
         }
     };
-    /**
-     * 키맵 — 확장의 keymap을 순서대로 매칭해 첫 true 커맨드가 이긴다.
-     * false 반환은 다음 바인딩으로 폴스루 (PM keymap 관례).
-     */
-    const onKeydown = (e) => {
-        if (ime.active || e.isComposing || !editor.editable)
-            return;
-        const key = normalizeKey(e);
-        // Mod-A 전체 선택은 직접 처리 — 중첩 편집 호스트(.me-node-view 안의
-        // contenteditable 아울렛)가 있으면 Chromium의 네이티브 selectAll이
-        // 셀렉션을 펼치지 못하고 문서 시작으로 collapse한다
-        if (key === "Mod-a") {
-            e.preventDefault();
-            editor.dispatch(editor.state
-                .tr()
-                .setSelection(textSelection({ path: [], offset: 0 }, { path: [], offset: editor.state.doc.content?.length ?? 0 })));
-            return;
-        }
-        // 클릭 직후 키 입력처럼 selectionchange가 아직 도착하지 않은 창에는
-        // doc 셀렉션이 stale하다 — PM domObserver.flush 관례로 키 처리 전에
-        // DOM 셀렉션을 먼저 흡수한다. 노드 셀렉션 중엔 DOM 캐럿이 무의미한
-        // stale 위치라 덮어쓰지 않는다
-        if (editor.state.selection.type !== "node")
-            syncDocSelection();
-        // 노드 셀렉션(이미지 클릭 등) — DOM 캐럿이 없으므로 네이티브
-        // 키 동작은 모두 무시하고 모델에서 처리한다. Backspace/Delete는
-        // 노드 삭제, Enter는 노드 뒤에 새 블록, 화살표/Escape는 텍스트
-        // 셀렉션으로 붕괴, 인쇄 문자는 노드 뒤에 삽입(노드는 유지).
-        // Mod/Alt 조합(undo·키맵 등)은 아래 키맵 루프에 넘긴다
-        if (editor.state.selection.type === "node" &&
-            nodeSelectionKeydown(editor, e, key)) {
-            e.preventDefault();
-            return;
-        }
-        for (const km of editor.keymaps) {
-            const cmd = km[key];
-            if (!cmd)
-                continue;
-            const tr = editor.state.tr();
-            const handled = cmd({
-                state: editor.state,
-                tr,
-                dispatch: () => editor.dispatch(tr),
-            });
-            if (handled) {
-                e.preventDefault();
-                return;
-            }
-        }
-        // Blink은 중첩 인라인(mark용 span+strong 등)이 있는 contenteditable에서
-        // Home/End·Cmd+←/→의 줄 경계 계산을 확률적으로 놓쳐 캐럿이 안 움직인다
-        // (실사용의 "두 번 눌러야 함" 원인). 좌표 히트테스트로 시각적 줄 경계를
-        // 직접 계산해 네이티브 동작을 대체한다 — 실패하면 기본 동작에 맡긴다.
-        // Ctrl+←/→는 비-Mac에서 단어 이동이라 metaKey(Cmd)일 때만 가로챈다
-        if (LINE_NAV_KEYS.has(key) &&
-            (!key.includes("Arrow") || e.metaKey) &&
-            lineNav(editor, el, key)) {
-            e.preventDefault();
-        }
-    };
-    /**
-     * 체크박스 아이템(taskItem)의 마커 영역 클릭 — ::before 마커는
-     * 의사요소라 이벤트 타겟이 li 자신이 되고, 클릭이 li의 패딩
-     * 영역(마커 존 ~28px)에 떨어진다. 자식 블록 위 클릭은 p가
-     * 타겟이므로 li가 data-me-path를 가지면서 타겟이 li인 경우만
-     * 마커 클릭으로 해석한다.
-     */
-    const onMouseDown = (e) => {
-        if (!editor.editable)
-            return;
-        const t = e.target;
-        if (!(t instanceof Element))
-            return;
-        // 노드 뷰 내부 크롬에는 data-me-path가 없다 — 가장 가까운 경로
-        // 조상으로 해석한다 (trySelectAtom이 atom 노드를 잡는다)
-        const pathEl = t.hasAttribute(PATH_ATTR)
-            ? t
-            : t.closest(`[${PATH_ATTR}]`);
-        if (!pathEl)
-            return;
-        // .me-editor 자신은 data-me-path=""다 — "".split(",") → [NaN]이
-        // 아니라 [0]으로 매핑돼 배경 클릭이 첫 블록으로 오인된다
-        const raw = pathEl.getAttribute(PATH_ATTR) ?? "";
-        const path = raw === "" ? [] : raw.split(",").map(Number);
-        if (!path.length)
-            return;
-        const node = nodeAt(editor.state.doc, path);
-        const spec = node && editor.state.schema.nodeSpec(node.type);
-        // 체크박스 마커 판정은 타겟 자신이 li일 때만 — 안쪽 자식 클릭은
-        // 경로가 자식 것이라 마커 존으로 오인하면 안 된다
-        if (pathEl === t && spec?.checkbox) {
-            // offsetX는 패딩 가장자리 기준 — 마커 존 밖이면 무시
-            if (e.offsetX > 28)
-                return;
-            e.preventDefault();
-            editor.dispatch(editor.state
-                .tr()
-                .setNodeAttr(path, "checked", !node?.attrs?.["checked"]));
-            return;
-        }
-        // atom 노드(img/hr 등) 클릭 → NodeSelection — DOM 캐럿 이동을
-        // 막고(preventDefault) 모델 셀렉션만 둔다. 오버레이 표시는
-        // paintOverlays의 is-selected 마킹 + 각 기능의 paintOverlay가 담당.
-        // 같은 노드를 다시 누르면 트랜잭션을 생략한다
-        if (trySelectAtom(editor, t)) {
-            e.preventDefault();
-        }
-    };
-    /**
-     * 붙여넣기 — 클립보드의 파일을 기능 훅으로 위임한다 (이미지 업로드는
-     * imageFeature 소유 — Summernote onImageUpload / Quill 관례).
-     * 파일이 없거나 소비되지 않으면 폴스루 → beforeinput이 텍스트/HTML을
-     * 처리한다.
-     */
-    const onPaste = (e) => {
-        if (ime.active || !editor.editable)
-            return;
-        // paste 이벤트는 sanitizer·훅 소비 전 원본 페이로드로 발행한다 —
-        // 리스너(로깅·커스텀 변환)가 실제 입력을 관측할 수 있는 유일한 지점
-        editor.emit("paste", {
-            html: e.clipboardData?.getData("text/html") ?? "",
-            text: e.clipboardData?.getData("text/plain") ?? "",
-            event: e,
-        });
-        // preventDefault하면 beforeinput이 오지 않는다
-        if (dispatchFiles(editor, e.clipboardData, "paste", null)) {
-            e.preventDefault();
-        }
-    };
-    /** 드롭을 받으려면 dragover를 먼저 막아야 한다 — 파일(업로드 훅)
-     *  외에 텍스트 드래그도 beforeinput insertFromDrop으로 트랜잭션 처리 */
-    const onDragOver = (e) => {
-        if (!editor.editable)
-            return;
-        const t = e.dataTransfer?.types;
-        if (t?.includes("Files") || t?.includes("text/plain")) {
-            e.preventDefault();
-        }
-    };
-    const onDrop = (e) => {
-        if (ime.active || !editor.editable)
-            return;
-        const at = caretPointFromXY(el.ownerDocument, el, e.clientX, e.clientY);
-        // 소비되지 않으면 기본 동작(파일을 새 탭으로 여는 것)이 살아있다
-        if (dispatchFiles(editor, e.dataTransfer, "drop", at))
-            e.preventDefault();
-    };
-    const onSelectionChange = () => {
-        if (ime.active)
-            return;
-        // 에디터 안의 셀렉션만 동기화 — 바깥 클릭은 무시
-        const sel = readDomSel();
-        if (!sel)
-            return;
-        // 노드 셀렉션 중 도착한 selectionchange — DOM 캐럿은 우리가 노드
-        // 경계에 고정한 앵커이거나 선택 전 stale 위치다. 노드 자체의
-        // 경계 포인트(앞/뒤)나 마지막 확인 위치와 같으면 사용자가 실제로
-        // 움직인 게 아니므로 노드 셀렉션을 유지한다.
-        // (DOM 위치가 바뀌었다면 진짜 클릭/이동 — 텍스트 셀렉션으로 붕괴)
-        if (editor.state.selection.type === "node") {
-            const np = editor.state.selection.path;
-            const ni = np[np.length - 1] ?? 0;
-            const nparent = np.slice(0, -1);
-            const atNodeBoundary = pointEq(sel.anchor, point(nparent, ni)) ||
-                pointEq(sel.anchor, point(nparent, ni + 1));
-            const unchanged = lastApplied &&
-                pointEq(lastApplied.anchor, sel.anchor) &&
-                pointEq(lastApplied.focus, sel.focus);
-            if (atNodeBoundary || unchanged) {
-                paintOverlays();
-                return;
-            }
-        }
-        // 확인한 DOM 위치를 기록 — 이후 변경분만 "사용자 이동"으로 본다
-        lastApplied = sel;
-        paintOverlays();
-        const cur = editor.state.selection;
-        const next = { type: "text", ...sel };
-        if (cur.type === "text" &&
-            pointEq(cur.anchor, next.anchor) &&
-            pointEq(cur.focus, next.focus)) {
-            return;
-        }
-        // 대기 서식(storedMarks)은 커서 이동에도 유지한다 — GDocs/Word 관례
-        editor.dispatch(editor.state.tr().setSelection(next));
-    };
-    // 포커스가 에디터로 돌아오면 건너뛴 DOM 셀렉션을 동기화한다 —
-    // 찾기 바에서 내비게이션한 뒤 닫히면 마지막 매치에 캐럿이 선다
-    const onFocusIn = (e) => {
-        if (pendingSel)
-            restoreSelection();
-        // focus는 "밖→안" 진입에서만 한 번 — 자식 간 이동(노드 뷰 내부
-        // 입력 등)은 focusin이 다시 떠도 focus 이벤트를 중복 발행하지 않는다
-        if (!focused) {
-            focused = true;
-            editor.emit("focus", { event: e });
-        }
-    };
-    // 포커스가 에디터 밖으로 나갈 때 blur — relatedTarget이 안쪽이면
-    // 자식 간 이동이라 무시한다. 협업 캐럿 표시 같은 외부 리스너가
-    // 이 이벤트로 리모트 커서를 지운다
-    const onFocusOut = (e) => {
-        const next = e.relatedTarget;
-        if (next && el.contains(next))
-            return;
-        focused = false;
-        editor.emit("blur", { event: e });
-    };
-    let focused = false;
     el.addEventListener("beforeinput", onBeforeInput);
+    el.addEventListener("input", onInput);
     el.addEventListener("keydown", onKeydown);
     el.addEventListener("mousedown", onMouseDown);
     el.addEventListener("paste", onPaste);
@@ -687,21 +85,28 @@ export function bindEditorInput(editor, el) {
     el.addEventListener("drop", onDrop);
     el.addEventListener("compositionstart", ime.start);
     el.addEventListener("compositionend", ime.end);
-    el.addEventListener("focusin", onFocusIn);
-    el.addEventListener("focusout", onFocusOut);
-    el.ownerDocument.addEventListener("selectionchange", onSelectionChange);
+    el.addEventListener("focusin", sel.onFocusIn);
+    el.addEventListener("focusout", sel.onFocusOut);
+    el.ownerDocument.addEventListener("selectionchange", sel.onSelectionChange);
     // 오버레이 초기 페인트 — React/Vue2처럼 마운트 layoutEffect가
     // 바인딩보다 먼저 도는 렌더러에서도 첫 커밋 전에 오버레이가
     // 존재하도록 바인딩 시점에 한 번 그린다
-    paintOverlays();
+    sel.paintOverlays();
     return {
         dirtyPaths,
+        ime,
+        afterComposition(cb) {
+            idleCbs.add(cb);
+            return () => idleCbs.delete(cb);
+        },
         unbind() {
             ime.destroy();
+            idleCbs.clear();
             // 기능 오버레이 정리 — 거터/크롬 바 DOM + ResizeObserver 해제
             for (const h of editor.inputHooks)
                 h.destroyOverlay?.(el);
             el.removeEventListener("beforeinput", onBeforeInput);
+            el.removeEventListener("input", onInput);
             el.removeEventListener("keydown", onKeydown);
             el.removeEventListener("mousedown", onMouseDown);
             el.removeEventListener("paste", onPaste);
@@ -709,12 +114,12 @@ export function bindEditorInput(editor, el) {
             el.removeEventListener("drop", onDrop);
             el.removeEventListener("compositionstart", ime.start);
             el.removeEventListener("compositionend", ime.end);
-            el.removeEventListener("focusin", onFocusIn);
-            el.removeEventListener("focusout", onFocusOut);
-            el.ownerDocument.removeEventListener("selectionchange", onSelectionChange);
+            el.removeEventListener("focusin", sel.onFocusIn);
+            el.removeEventListener("focusout", sel.onFocusOut);
+            el.ownerDocument.removeEventListener("selectionchange", sel.onSelectionChange);
         },
-        restoreSelection,
-        syncDocSelection,
+        restoreSelection: sel.restoreSelection,
+        syncDocSelection: sel.syncDocSelection,
     };
 }
 // DirtyKeyMap은 dirty-keys.ts로 이동했다 — 공개 API 경로 유지를 위해 재수출