@moda-editor/core 0.1.2 → 0.1.5

package/dist/view/input.js

@@ -1,115 +1,21 @@
 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 { applyDomSelection, domSelection, domToPoint, PATH_ATTR, pointToDOM, } from "./dom.js";
-import { blockText, blockTextOffset, blockTextPoint, toggleMark, } from "../commands.js";
-/** format* inputType → 마크 타입 (스펙의 inputType 이름 ↔ 스키마 마크) */
-const FORMAT_MARKS = {
-    formatBold: "bold",
-    formatItalic: "italic",
-    formatUnderline: "underline",
-    formatStrikeThrough: "strike",
-    formatSuperscript: "superscript",
-    formatSubscript: "subscript",
-};
-/** drop 좌표 → doc Point — caretPositionFromPoint / Range 폴백 */
-function caretPointFromXY(doc, root, x, y) {
-    const d = doc;
-    const pos = doc.caretPositionFromPoint?.(x, y);
-    if (pos)
-        return domToPoint(root, pos.offsetNode, pos.offset);
-    const r = d.caretRangeFromPoint?.(x, y);
-    return r ? domToPoint(root, r.startContainer, r.startOffset) : null;
-}
-/**
- * 텍스트 범위가 한 블록 안에 있으면 입력 훅용 컨텍스트 — 블록을
- * 걸치는 범위는 훅이 받지 않는다 (BlockTextCtx 계약).
- */
-function blockCtx(editor, r, tr) {
-    const blockPath = r.anchor.path.slice(0, -1);
-    if (r.focus.path.length !== blockPath.length + 1 ||
-        !r.focus.path.slice(0, -1).every((v, i) => v === blockPath[i])) {
-        return null;
-    }
-    const block = nodeAt(editor.state.doc, blockPath);
-    if (!block)
-        return null;
-    return {
-        state: editor.state,
-        tr,
-        dispatch: () => editor.dispatch(tr),
-        block,
-        blockPath,
-        text: blockText(block),
-        anchor: r.anchor,
-        focus: r.focus,
-        charPoint: (off) => blockTextPoint(block, blockPath, off),
-        offsetOf: (p) => blockTextOffset(block, p),
-    };
-}
-/**
- * 어댑터 공용 dirty-key 헬퍼 — binding.dirtyPaths를 소비해 블록
- * 렌더 키를 안정적으로 버전업한다. 일반 블록은 path 그대로,
- * 외부 DOM 변경이 있었던 블록은 path@N으로 키가 바뀌어
- * 프레임워크가 내부 diff 대신 리마운트를 택한다.
- */
-export class DirtyKeyMap {
-    constructor() {
-        Object.defineProperty(this, "versions", {
-            enumerable: true,
-            configurable: true,
-            writable: true,
-            value: new Map()
-        });
-    }
-    /** rn.path.join(",")와 binding.dirtyPaths를 넣으면 렌더 키를 반환 */
-    key(pathKey, dirty) {
-        if (dirty?.delete(pathKey)) {
-            this.versions.set(pathKey, (this.versions.get(pathKey) ?? 0) + 1);
-        }
-        const v = this.versions.get(pathKey);
-        return v ? `${pathKey}@${v}` : pathKey;
-    }
-}
-/** KeyboardEvent → "Mod-b"/"Shift-Enter" 형태 키 문자열 (PM 관례) */
-const LINE_NAV_KEYS = new Set([
-    "Home",
-    "End",
-    "Shift-Home",
-    "Shift-End",
-    "Mod-ArrowLeft",
-    "Mod-ArrowRight",
-    "Mod-Shift-ArrowLeft",
-    "Mod-Shift-ArrowRight",
-    "Mod-Home",
-    "Mod-End",
-    "Mod-Shift-Home",
-    "Mod-Shift-End",
-]);
-function normalizeKey(e) {
-    const mods = [];
-    if (e.ctrlKey || e.metaKey)
-        mods.push("Mod");
-    if (e.altKey)
-        mods.push("Alt");
-    if (e.shiftKey)
-        mods.push("Shift");
-    const name = e.key.length === 1 ? e.key.toLowerCase() : e.key;
-    return [...mods, name].join("-");
-}
+import { normalizeRange, 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 { dispatchFormatInput, LINE_NAV_KEYS, normalizeKey } from "./keys.js";
 export function bindEditorInput(editor, el) {
-    let composing = false;
-    let compStart = null;
-    let compTimer = null;
-    // compositionend가 왔고 흡수만 남은 상태 — 이 창에 도착하는 구조
-    // 입력(Enter/Backspace)은 커밋이 끝난 뒤의 것이라 브라우저에 맡기면
-    // 네이티브 split/delete가 doc 밖 DOM을 만든다
-    let pendingAbsorb = false;
     const dirtyPaths = new Set();
-    /** p가 속한 최상위 블록 경로 — 프레임워크 리마운트 대상 */
-    const topBlockKey = (p) => p?.path[0] == null ? null : String(p.path[0]);
     const readDomSel = () => domSelection(el);
+    // IME 조합 세션 — composing/compStart/타이머/에코 판별은 전부 세션
+    // 내부다. 이 파일은 DOM 이벤트를 세션 메서드로 변환하고 판정
+    // 결과(ImeGate)에 따라 preventDefault/무시만 수행한다
+    const ime = createImeSession({ editor, el, dirtyPaths, readDomSel });
     /**
      * 기능 DOM 오버레이 갱신 — 활성 줄 표시·괄호 하이라이트처럼
      * 렌더 트리가 아니라 DOM을 직접 마킹하는 것들. 각 기능이
@@ -118,7 +24,14 @@ export function bindEditorInput(editor, el) {
      */
     const paintOverlays = () => {
         for (const h of editor.inputHooks) {
-            h.paintOverlay?.(el, editor.state);
+            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") {
+            el.querySelector(`[${PATH_ATTR}="${sel.path.join(",")}"]`)?.classList.add("is-selected");
         }
     };
     /**
@@ -134,8 +47,11 @@ export function bindEditorInput(editor, el) {
     };
     const restoreSelection = () => {
         const sel = editor.state.selection;
-        if (sel.type !== "text")
+        // 노드 셀렉션은 DOM 캐럿이 없다 — 오버레이만 갱신하고 끝낸다
+        if (sel.type !== "text") {
+            paintOverlays();
             return;
+        }
         // 이미 DOM 셀렉션이 doc과 같으면 건드리지 않는다 (깜빡임/역순 방지)
         const cur = readDomSel();
         if (cur &&
@@ -152,20 +68,16 @@ export function bindEditorInput(editor, el) {
         //    setSel이 먹지 않는 역효과 방지)
         //  - 리프 포인트 — 렌더가 노드를 교체하면 Chrome이 캐럿을 요소
         //    경계로 재앵커하는데 그건 사용자 이동이 아니라 폐기 대상이다
-        const isLeaf = (p) => nodeAt(editor.state.doc, p.path)?.type === "text";
         if (cur &&
             lastApplied &&
-            isLeaf(cur.anchor) &&
-            isLeaf(cur.focus) &&
+            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 })
-                .setStoredMarks([]));
+            editor.dispatch(editor.state.tr().setSelection({ type: "text", ...cur }));
             paintOverlays();
             return;
         }
@@ -182,11 +94,9 @@ export function bindEditorInput(editor, el) {
             pointEq(cur.focus, s.focus)) {
             return;
         }
-        // 커서 이동은 대기 중인 storedMarks를 지운다 (PM 관례 — []가 클리어)
-        editor.dispatch(editor.state
-            .tr()
-            .setSelection({ type: "text", ...s })
-            .setStoredMarks([]));
+        // 대기 서식(storedMarks)은 커서 이동에도 유지한다 — GDocs/Word
+        // 관례: 토글로 끌 때까지 다음 타이핑에 계속 적용된다
+        editor.dispatch(editor.state.tr().setSelection({ type: "text", ...s }));
     };
     const onBeforeInput = (e) => {
         if (!editor.editable || e.isComposing)
@@ -195,30 +105,27 @@ export function bindEditorInput(editor, el) {
         // 흡수된 텍스트를 포함해 정확하고, 플러시의 리렌더가 DOM
         // 셀렉션을 doc(조합 시작점)으로 되돌리기 전의 값이다
         const domSel = readDomSel();
-        if (composing) {
-            // 조합 종료 직후(흡수 대기) 도착한 구조 입력만 통과 — 커밋-Enter의
-            // insertParagraph가 대표적이다. 텍스트 계열은 계속 브라우저에
-            // 맡겨 DOM이 바뀌게 두고 타이머의 흡수가 잡는다
-            const structural = e.inputType === "insertParagraph" ||
-                e.inputType === "insertLineBreak" ||
-                e.inputType === "insertFromPaste" ||
-                e.inputType === "insertFromDrop" ||
-                e.inputType.startsWith("delete");
-            if (!pendingAbsorb || !structural)
-                return;
-            flushComposition();
+        // 조합 세션 게이트 — swallow(조합 중 무시)/prevent(커밋 에코 차단)/
+        // proceed(정상 처리 — 흡수 대기 중의 구조 입력은 플러시 후 통과)
+        const gated = ime.gate(e, domSel);
+        if (gated === "swallow")
+            return;
+        if (gated === "prevent") {
+            e.preventDefault();
+            return;
         }
-        // DOM 셀렉션이 무효하면(리렌더로 분리된 노드 위 등) doc 셀렉션으로
-        // 폴백 — sel 없이 리턴하면 preventDefault도 안 걸려 브라우저가
-        // 직접 DOM을 바꾸고 doc과 영구히 어긋난다. doc 셀렉션이 텍스트가
-        // 아닌 경우(노드 선택 등)도 마찬가지라 막아둔다
         const ds = editor.state.selection;
-        const sel = domSel ??
-            (ds.type === "text" ? { anchor: ds.anchor, focus: ds.focus } : null);
-        if (!sel) {
+        // 노드 셀렉션 — 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":
@@ -227,6 +134,10 @@ export function bindEditorInput(editor, el) {
                 const data = e.data ?? "";
                 if (!data)
                     return;
+                // 커밋 에코가 흡수 타이머보다 늦게 도착한 경우 — DOM과 doc에
+                // 이미 같은 글자가 있으므로 다시 넣으면 "세세"가 된다
+                if (ime.isLateEcho(data, domSel))
+                    return;
                 // 범위 삭제 뒤엔 삭제 전 좌표가 무효 — 정규화한 앞점 기준으로 삽입
                 const r = normalizeRange(sel);
                 // 입력 훅 — 기능이 글자 가로채기(코드블록 자동 쌍·타입오버 등)를
@@ -348,8 +259,12 @@ export function bindEditorInput(editor, el) {
                     // 끝점이 요소 레벨 포인트(컨테이너 자식 경계, 블록 머지 시 Chrome이
                     // (P,0) 같은 위치를 줌)면 tr.delete가 해석하지 못한다 — 리프
                     // 포인트를 주는 pointBefore/After 폴백으로 돌린다
-                    const leaf = (p) => !!p && nodeAt(editor.state.doc, p.path)?.type === "text";
-                    if (ta && tf && !pointEq(ta, tf) && onCaret && leaf(ta) && leaf(tf)) {
+                    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);
@@ -375,13 +290,7 @@ export function bindEditorInput(editor, el) {
                 const r = normalizeRange(sel);
                 // 기능 훅 — 링크 URL 감싸기·코드블록 순수 텍스트 등.
                 // 하나라도 소비하면 기본 경로를 건너뛴다
-                const ctx = {
-                    state: editor.state,
-                    tr,
-                    dispatch: () => editor.dispatch(tr),
-                    anchor: r.anchor,
-                    focus: r.focus,
-                };
+                const ctx = rangeCtx(editor, r, tr);
                 const data = { html, text };
                 let consumed = false;
                 for (const h of editor.inputHooks) {
@@ -418,8 +327,7 @@ export function bindEditorInput(editor, el) {
                 let r = normalizeRange(sel);
                 if (e.inputType === "insertReplacementText") {
                     const tr0 = e.getTargetRanges?.()[0];
-                    const a = tr0 &&
-                        domToPoint(el, tr0.startContainer, tr0.startOffset);
+                    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 });
@@ -432,14 +340,6 @@ export function bindEditorInput(editor, el) {
                 editor.dispatch(tr);
                 break;
             }
-            case "historyUndo":
-            case "historyRedo": {
-                // iOS/Android의 OS 실행취소·재실행 제스처 — 네이티브가 DOM을
-                // 되돌리면 doc과 어긋나니 우리 히스토리로 돌린다
-                e.preventDefault();
-                editor.commands[e.inputType === "historyUndo" ? "undo" : "redo"]?.();
-                break;
-            }
             // 단어/줄 단위·드래그·잘라내기 삭제 — macOS Option-Delete는
             // deleteWord*, Ctrl-K는 deleteSoftLine*, Cmd-X는 deleteByCut으로
             // 온다. getTargetRanges가 브라우저가 계산한 정확한 범위를 주므로
@@ -464,12 +364,11 @@ export function bindEditorInput(editor, el) {
                 // 레벨 포인트면 tr.delete가 해석 못하므로 리프만 받는다
                 const delBack = e.inputType.endsWith("Backward");
                 const delFwd = e.inputType.endsWith("Forward");
-                const leafP = (p) => !!p && nodeAt(editor.state.doc, p.path)?.type === "text";
                 const trusted = a &&
                     f &&
                     !pointEq(a, f) &&
-                    leafP(a) &&
-                    leafP(f) &&
+                    isLeafPoint(editor.state.doc, a) &&
+                    isLeafPoint(editor.state.doc, f) &&
                     (!delBack || pointEq(f, sel.focus)) &&
                     (!delFwd || pointEq(a, sel.focus));
                 const r = trusted
@@ -481,59 +380,7 @@ export function bindEditorInput(editor, el) {
             }
             // 모바일·컨텍스트 메뉴·리더의 서식 명령 — 네이티브 execCommand가
             // DOM을 직접 바꾸면 어긋나므로 우리 커맨드로 매핑한다
-            case "formatBold":
-            case "formatItalic":
-            case "formatUnderline":
-            case "formatStrikeThrough":
-            case "formatSuperscript":
-            case "formatSubscript": {
-                e.preventDefault();
-                const mark = FORMAT_MARKS[e.inputType];
-                if (editor.state.schema.markSpec(mark)) {
-                    toggleMark(mark)({
-                        state: editor.state,
-                        tr,
-                        dispatch: () => editor.dispatch(tr),
-                    });
-                }
-                break;
-            }
-            case "formatRemove": {
-                e.preventDefault();
-                editor.commands.clearFormat?.();
-                break;
-            }
-            case "formatJustifyLeft":
-            case "formatJustifyCenter":
-            case "formatJustifyRight": {
-                e.preventDefault();
-                const align = {
-                    formatJustifyLeft: "left",
-                    formatJustifyCenter: "center",
-                    formatJustifyRight: "right",
-                }[e.inputType];
-                editor.commands.setAlign?.(align);
-                break;
-            }
-            case "formatIndent":
-            case "formatOutdent": {
-                e.preventDefault();
-                editor.commands[e.inputType === "formatIndent" ? "sinkListItem" : "liftListItem"]?.();
-                break;
-            }
-            case "insertUnorderedList":
-            case "insertOrderedList": {
-                e.preventDefault();
-                editor.commands[e.inputType === "insertOrderedList"
-                    ? "toggleOrderedList"
-                    : "toggleBulletList"]?.();
-                break;
-            }
-            case "insertHorizontalRule": {
-                e.preventDefault();
-                editor.commands.insertHorizontalRule?.();
-                break;
-            }
+            // (매핑 테이블은 keys.ts의 dispatchFormatInput)
             case "insertFromYank":
             case "insertFromPasteAsQuotation": {
                 // macOS 킬링 붙여넣기(Ctrl-Y)·인용 붙여넣기 — 있으면 순수
@@ -549,10 +396,15 @@ export function bindEditorInput(editor, el) {
                 editor.dispatch(tr);
                 break;
             }
-            // 나머지 타입(insertTranspose, formatFontColor 등)은 우리가
-            // 처리하지 않는다 — 그대로 두면 브라우저가 DOM만 바꿔 doc과
-            // 영구히 어긋나므로 기본 동작을 막아 no-op으로 둔다
             default:
+                // format*/history*/insert*List 등 — 커맨드 디스패치 테이블에 위임
+                if (dispatchFormatInput(editor, e.inputType)) {
+                    e.preventDefault();
+                    break;
+                }
+                // 나머지 타입(insertTranspose, formatFontColor 등)은 우리가
+                // 처리하지 않는다 — 그대로 두면 브라우저가 DOM만 바꿔 doc과
+                // 영구히 어긋나므로 기본 동작을 막아 no-op으로 둔다
                 e.preventDefault();
                 break;
         }
@@ -562,7 +414,7 @@ export function bindEditorInput(editor, el) {
      * false 반환은 다음 바인딩으로 폴스루 (PM keymap 관례).
      */
     const onKeydown = (e) => {
-        if (composing || e.isComposing || !editor.editable)
+        if (ime.active || e.isComposing || !editor.editable)
             return;
         const key = normalizeKey(e);
         // Mod-A 전체 선택은 직접 처리 — 중첩 편집 호스트(.me-node-view 안의
@@ -570,7 +422,19 @@ export function bindEditorInput(editor, el) {
         // 셀렉션을 펼치지 못하고 문서 시작으로 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 })));
+            editor.dispatch(editor.state
+                .tr()
+                .setSelection(textSelection({ path: [], offset: 0 }, { path: [], offset: editor.state.doc.content?.length ?? 0 })));
+            return;
+        }
+        // 노드 셀렉션(이미지 클릭 등) — 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) {
@@ -595,192 +459,10 @@ export function bindEditorInput(editor, el) {
         // Ctrl+←/→는 비-Mac에서 단어 이동이라 metaKey(Cmd)일 때만 가로챈다
         if (LINE_NAV_KEYS.has(key) &&
             (!key.includes("Arrow") || e.metaKey) &&
-            lineNav(key)) {
+            lineNav(editor, el, key)) {
             e.preventDefault();
         }
     };
-    /**
-     * caretRangeFromPoint로 시각적 줄 끝/시작의 doc 위치를 계산해 캐럿을 옮긴다.
-     * 클릭 배치와 같은 Blink 엔진이라 네이티브 줄 경계 계산보다 신뢰할 수 있다.
-     * Mod-Home/End는 doc 모델 기준 문서 가장자리로 간다. 실패 시 false → 네이티브 폴백.
-     */
-    const lineNav = (key) => {
-        const doc = el.ownerDocument;
-        // DOM 셀렉션 우선 — 클릭 직후엔 doc 셀렉션이 아직 동기화 전이라
-        // stale할 수 있다. DOM이 분리 노드 위거나(리렌더 직후) 렌더
-        // 재앵커로 요소 레벨 포인트에 있으면 doc 포커스로 폴백한다
-        const domNow = readDomSel();
-        const ds = editor.state.selection;
-        const docFocus = ds.type === "text" ? ds.focus : null;
-        const leaf = (p) => !!p && nodeAt(editor.state.doc, p.path)?.type === "text";
-        const focus = leaf(domNow?.focus) ? domNow.focus : docFocus;
-        if (!focus)
-            return false;
-        const extend = key.startsWith("Shift-") || key.startsWith("Mod-Shift-");
-        const anchor = () => extend
-            ? leaf(domNow?.anchor)
-                ? domNow.anchor
-                : ds.type === "text"
-                    ? ds.anchor
-                    : null
-            : null;
-        // 문서 가장자리 계열(Mod-Home/End) — doc 모델로 바로 적용.
-        // applySel이 아니라 dispatch로 간다 — doc이 동기 갱신돼야 뒤따르는
-        // 비동기 렌더 커밋이 DOM을 파괴해도 restore가 같은 위치를 다시
-        // 적용한다(DOM 직접 쓰기는 pending selchg 사이 커밋에 되돌아간다)
-        if (key.startsWith("Mod") &&
-            !key.endsWith("ArrowLeft") &&
-            !key.endsWith("ArrowRight")) {
-            const t = key.endsWith("Home")
-                ? point([], 0)
-                : point([], editor.state.doc.content?.length ?? 0);
-            editor.dispatch(editor.state
-                .tr()
-                .setSelection({ type: "text", anchor: anchor() ?? t, focus: t }));
-            return true;
-        }
-        // 캐럿의 화면 y — 포커스의 DOM 위치에서 collapsed range rect을 잰다.
-        // pointToDOM이 현재 DOM으로 재해석하므로 리렌더로 분리된
-        // 노드 위의 브라우저 셀렉션에 흔들리지 않는다
-        const domPos = pointToDOM(el, focus);
-        if (!domPos || !el.contains(domPos.node))
-            return false;
-        const range = doc.createRange();
-        try {
-            range.setStart(domPos.node, domPos.offset);
-            range.collapse(true);
-        }
-        catch {
-            return false;
-        }
-        let rect = range.getClientRects()[0] ?? range.getBoundingClientRect();
-        // 줄 시작의 빈/경계 위치 캐럿이나 빈 텍스트 노드(Vue 앵커)에선
-        // collapsed range가 빈 rect을 준다 — 인접 한 글자 → 부모 요소 순으로
-        // 근사한다
-        if ((!rect || rect.height === 0) && domPos.node.nodeType === 3) {
-            const len = domPos.node.nodeValue?.length ?? 0;
-            if (domPos.offset < len) {
-                range.setEnd(domPos.node, domPos.offset + 1);
-            }
-            else if (domPos.offset > 0) {
-                range.setStart(domPos.node, domPos.offset - 1);
-            }
-            if (domPos.offset < len || domPos.offset > 0) {
-                rect = range.getClientRects()[0] ?? range.getBoundingClientRect();
-            }
-        }
-        if (!rect || rect.height === 0) {
-            const parent = domPos.node.nodeType === 3
-                ? domPos.node.parentElement
-                : domPos.node;
-            rect = parent?.getBoundingClientRect();
-        }
-        if (!rect || rect.height === 0)
-            return false;
-        // 캐럿이 속한 블록 요소 — 시각적 줄이 갇힌 박스 (인라인 맥락 루트)
-        let block = domPos.node.nodeType === 3
-            ? domPos.node.parentElement
-            : domPos.node;
-        while (block && block !== el) {
-            if (getComputedStyle(block).display !== "inline")
-                break;
-            block = block.parentElement;
-        }
-        const br = (block && block !== el ? block : el).getBoundingClientRect();
-        const y = rect.top + rect.height / 2;
-        const t = caretPointFromXY(doc, el, key.endsWith("End") || key.endsWith("ArrowRight")
-            ? br.right - 1
-            : br.left + 1, y);
-        if (!t)
-            return false;
-        // 다른 블록의 위치가 잡히면 신뢰 불가 — 네이티브에 맡긴다
-        const sameBlock = t.path.length === focus.path.length &&
-            t.path.slice(0, -1).every((v, i) => v === focus.path[i]);
-        if (!sameBlock)
-            return false;
-        editor.dispatch(editor.state
-            .tr()
-            .setSelection({ type: "text", anchor: anchor() ?? t, focus: t }));
-        return true;
-    };
-    /**
-     * composition 중 브라우저가 직접 바꾼 DOM을 doc에 흡수한다.
-     * 캐럿이 위치한 텍스트 홀더의 DOM 텍스트와 doc 텍스트를 공통
-     * 접두/접미로 diff해 차이만큼만 트랜잭션으로 반영한다.
-     * (제약: 조합이 하나의 텍스트 홀더 안에 머문다고 가정 —
-     *  크로스-블록 조합 삭제는 미지원)
-     */
-    const absorbComposition = () => {
-        const focus = readDomSel()?.focus ?? compStart;
-        if (!focus || focus.path.length === 0)
-            return;
-        const holder = el.querySelector(`[${PATH_ATTR}="${focus.path.join(",")}"]`);
-        // 텍스트 홀더가 아니면(안에 me-path 자식이 있으면) 흡수 불가
-        if (!holder || holder.querySelector(`[${PATH_ATTR}]`))
-            return;
-        const domText = holder.textContent ?? "";
-        const target = nodeAt(editor.state.doc, focus.path);
-        const docText = target?.type === "text" ? target.text ?? "" : "";
-        if (domText === docText)
-            return;
-        let lo = 0;
-        const max = Math.min(domText.length, docText.length);
-        while (lo < max && domText[lo] === docText[lo])
-            lo++;
-        let hiDom = domText.length;
-        let hiDoc = docText.length;
-        while (hiDom > lo && hiDoc > lo && domText[hiDom - 1] === docText[hiDoc - 1]) {
-            hiDom--;
-            hiDoc--;
-        }
-        const tr = editor.state.tr();
-        if (hiDoc > lo) {
-            tr.delete({
-                anchor: point(focus.path, lo),
-                focus: point(focus.path, hiDoc),
-            });
-        }
-        const inserted = domText.slice(lo, hiDom);
-        if (inserted)
-            tr.insertText(inserted, point(focus.path, lo));
-        if (!tr.docChanged)
-            return;
-        tr.setMeta("history.group", "type").setMeta("ime", true);
-        // 브라우저가 이 블록의 DOM을 직접 바꿨다 — 리렌더 시 프레임워크
-        // 리컨실이 깨지지 않게 블록 리마운트 대상으로 표시한다
-        const dk = topBlockKey(focus) ?? topBlockKey(compStart);
-        if (dk != null)
-            dirtyPaths.add(dk);
-        editor.dispatch(tr);
-    };
-    const onCompositionStart = () => {
-        composing = true;
-        pendingAbsorb = false;
-        compStart = readDomSel()?.focus ?? null;
-    };
-    /**
-     * 대기 중인 흡수를 즉시 실행 — 커밋 직후의 구조 입력(Enter 등)이
-     * 최신 doc 기준으로 처리되게 하기 위해 beforeinput에서 호출한다.
-     */
-    const flushComposition = () => {
-        if (compTimer !== null) {
-            clearTimeout(compTimer);
-            compTimer = null;
-        }
-        composing = false;
-        pendingAbsorb = false;
-        if (editor.editable)
-            absorbComposition();
-        compStart = null;
-    };
-    const onCompositionEnd = () => {
-        // composing 해제와 흡수를 다음 태스크로 미룬다 — 같은 태스크의
-        // 후속 beforeinput/keydown(Safari 최종 커밋, IME Enter 오커밋)을
-        // composing 가드가 계속 걸러내게 하기 위해서다. 단 그 창에 도착한
-        // 구조 입력은 flushComposition이 흡수를 앞당겨 정상 처리한다.
-        pendingAbsorb = true;
-        compTimer = setTimeout(flushComposition, 0);
-    };
     /**
      * 체크박스 아이템(taskItem)의 마커 영역 클릭 — ::before 마커는
      * 의사요소라 이벤트 타겟이 li 자신이 되고, 클릭이 li의 패딩
@@ -797,27 +479,23 @@ export function bindEditorInput(editor, el) {
         const path = t.getAttribute(PATH_ATTR).split(",").map(Number);
         const node = nodeAt(editor.state.doc, path);
         const spec = node && editor.state.schema.nodeSpec(node.type);
-        if (!spec?.checkbox)
-            return;
-        // offsetX는 패딩 가장자리 기준 — 마커 존 밖이면 무시
-        if (e.offsetX > 28)
+        if (spec?.checkbox) {
+            // offsetX는 패딩 가장자리 기준 — 마커 존 밖이면 무시
+            if (e.offsetX > 28)
+                return;
+            e.preventDefault();
+            editor.dispatch(editor.state
+                .tr()
+                .setNodeAttr(path, "checked", !node?.attrs?.["checked"]));
             return;
-        e.preventDefault();
-        editor.dispatch(editor.state
-            .tr()
-            .setNodeAttr(path, "checked", !node?.attrs?.["checked"]));
-    };
-    /**
-     * 파일 수신 — paste/drop의 File 목록을 기능 훅(files)에 넘긴다.
-     * 어느 기능도 소비하지 않으면 폴스루: paste는 beforeinput이
-     * 텍스트/HTML을 처리하고, drop은 브라우저 기본 동작을 따른다.
-     */
-    const dispatchFiles = (dt, source, at) => {
-        const files = Array.from(dt?.files ?? []);
-        if (!files.length)
-            return false;
-        const ctx = { editor, files, at, source };
-        return editor.inputHooks.some((h) => h.files?.(ctx));
+        }
+        // atom 노드(img/hr 등) 클릭 → NodeSelection — DOM 캐럿 이동을
+        // 막고(preventDefault) 모델 셀렉션만 둔다. 오버레이 표시는
+        // paintOverlays의 is-selected 마킹 + 각 기능의 paintOverlay가 담당.
+        // 같은 노드를 다시 누르면 트랜잭션을 생략한다
+        if (trySelectAtom(editor, t)) {
+            e.preventDefault();
+        }
     };
     /**
      * 붙여넣기 — 클립보드의 파일을 기능 훅으로 위임한다 (이미지 업로드는
@@ -826,11 +504,12 @@ export function bindEditorInput(editor, el) {
      * 처리한다.
      */
     const onPaste = (e) => {
-        if (composing || !editor.editable)
+        if (ime.active || !editor.editable)
             return;
         // preventDefault하면 beforeinput이 오지 않는다
-        if (dispatchFiles(e.clipboardData, "paste", null))
+        if (dispatchFiles(editor, e.clipboardData, "paste", null)) {
             e.preventDefault();
+        }
     };
     /** 드롭을 받으려면 dragover를 먼저 막아야 한다 — 파일(업로드 훅)
      *  외에 텍스트 드래그도 beforeinput insertFromDrop으로 트랜잭션 처리 */
@@ -843,15 +522,15 @@ export function bindEditorInput(editor, el) {
         }
     };
     const onDrop = (e) => {
-        if (composing || !editor.editable)
+        if (ime.active || !editor.editable)
             return;
         const at = caretPointFromXY(el.ownerDocument, el, e.clientX, e.clientY);
         // 소비되지 않으면 기본 동작(파일을 새 탭으로 여는 것)이 살아있다
-        if (dispatchFiles(e.dataTransfer, "drop", at))
+        if (dispatchFiles(editor, e.dataTransfer, "drop", at))
             e.preventDefault();
     };
     const onSelectionChange = () => {
-        if (composing)
+        if (ime.active)
             return;
         // 에디터 안의 셀렉션만 동기화 — 바깥 클릭은 무시
         const sel = readDomSel();
@@ -867,8 +546,8 @@ export function bindEditorInput(editor, el) {
             pointEq(cur.focus, next.focus)) {
             return;
         }
-        // 커서 이동은 대기 중인 storedMarks를 지운다 (PM 관례 — []가 클리어)
-        editor.dispatch(editor.state.tr().setSelection(next).setStoredMarks([]));
+        // 대기 서식(storedMarks)은 커서 이동에도 유지한다 — GDocs/Word 관례
+        editor.dispatch(editor.state.tr().setSelection(next));
     };
     el.addEventListener("beforeinput", onBeforeInput);
     el.addEventListener("keydown", onKeydown);
@@ -876,26 +555,34 @@ export function bindEditorInput(editor, el) {
     el.addEventListener("paste", onPaste);
     el.addEventListener("dragover", onDragOver);
     el.addEventListener("drop", onDrop);
-    el.addEventListener("compositionstart", onCompositionStart);
-    el.addEventListener("compositionend", onCompositionEnd);
+    el.addEventListener("compositionstart", ime.start);
+    el.addEventListener("compositionend", ime.end);
     el.ownerDocument.addEventListener("selectionchange", onSelectionChange);
+    // 오버레이 초기 페인트 — React/Vue2처럼 마운트 layoutEffect가
+    // 바인딩보다 먼저 도는 렌더러에서도 첫 커밋 전에 오버레이가
+    // 존재하도록 바인딩 시점에 한 번 그린다
+    paintOverlays();
     return {
         dirtyPaths,
         unbind() {
-            if (compTimer !== null)
-                clearTimeout(compTimer);
+            ime.destroy();
+            // 기능 오버레이 정리 — 거터/크롬 바 DOM + ResizeObserver 해제
+            for (const h of editor.inputHooks)
+                h.destroyOverlay?.(el);
             el.removeEventListener("beforeinput", onBeforeInput);
             el.removeEventListener("keydown", onKeydown);
             el.removeEventListener("mousedown", onMouseDown);
             el.removeEventListener("paste", onPaste);
             el.removeEventListener("dragover", onDragOver);
             el.removeEventListener("drop", onDrop);
-            el.removeEventListener("compositionstart", onCompositionStart);
-            el.removeEventListener("compositionend", onCompositionEnd);
+            el.removeEventListener("compositionstart", ime.start);
+            el.removeEventListener("compositionend", ime.end);
             el.ownerDocument.removeEventListener("selectionchange", onSelectionChange);
         },
         restoreSelection,
         syncDocSelection,
     };
 }
+// DirtyKeyMap은 dirty-keys.ts로 이동했다 — 공개 API 경로 유지를 위해 재수출
+export { DirtyKeyMap } from "./dirty-keys.js";
 //# sourceMappingURL=input.js.map