@moda-editor/core 0.1.3 → 0.2.0

package/dist/view/input.js

@@ -1,132 +1,21 @@
 import { nodeAt } from "../model/traverse.js";
 import { parseHTML } from "../parse/html.js";
 import { pointBefore, pointAfter } from "../state/navigate.js";
-import { nodeSelection, 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, 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 { 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;
-    // 실제 IME는 compositionend 뒤 같은 텍스트의 최종 커밋 beforeinput을
-    // 한 번 더 보낸다(Safari 확정, Chromium도 비동기 커밋 경로가 있다) —
-    // 타이머보다 늦게 오면 에코를 구별하기 위해 종료 시각을 기록한다
-    let compEndedAt = 0;
     const dirtyPaths = new Set();
-    /** p가 속한 최상위 블록 경로 — 프레임워크 리마운트 대상 */
-    const topBlockKey = (p) => p?.path[0] == null ? null : String(p.path[0]);
-    /**
-     * DOM 캐럿 바로 앞 텍스트가 data로 끝나는가 — IME 커밋 에코 감지.
-     * 조합 중 브라우저가 쓴 글자가 DOM에 남아있으면 뒤에 도착하는
-     * 커밋 beforeinput은 중복이다.
-     */
-    const domEndsWith = (focus, data) => {
-        const holder = focus.path.length
-            ? el.querySelector(`[${PATH_ATTR}="${focus.path.join(",")}"]`)
-            : null;
-        if (!holder || holder.querySelector(`[${PATH_ATTR}]`))
-            return false;
-        return (holder.textContent ?? "").slice(0, focus.offset).endsWith(data);
-    };
     const readDomSel = () => domSelection(el);
+    // IME 조합 세션 — composing/compStart/타이머/에코 판별은 전부 세션
+    // 내부다. 이 파일은 DOM 이벤트를 세션 메서드로 변환하고 판정
+    // 결과(ImeGate)에 따라 preventDefault/무시만 수행한다
+    const ime = createImeSession({ editor, el, dirtyPaths, readDomSel });
     /**
      * 기능 DOM 오버레이 갱신 — 활성 줄 표시·괄호 하이라이트처럼
      * 렌더 트리가 아니라 DOM을 직접 마킹하는 것들. 각 기능이
@@ -142,8 +31,10 @@ export function bindEditorInput(editor, el) {
         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");
+            // 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");
         }
     };
     /**
@@ -157,10 +48,42 @@ export function bindEditorInput(editor, el) {
         applyDomSelection(el, anchor, focus);
         lastApplied = { anchor, focus };
     };
+    // 포커스가 에디터 밖에 있는 동안 건너뛴 DOM 셀렉션 반영 —
+    // focusin에서 한 번에 동기화한다
+    let pendingSel = false;
     const restoreSelection = () => {
         const sel = editor.state.selection;
-        // 노드 셀렉션은 DOM 캐럿이 없다 — 오버레이만 갱신하고 끝낸다
+        // 포커스가 에디터 밖의 다른 요소(찾기 바·팝오버 입력)에 잡혀
+        // 있으면 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;
         }
@@ -180,20 +103,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;
         }
@@ -204,17 +123,19 @@ export function bindEditorInput(editor, el) {
         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)) {
             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)
@@ -223,29 +144,14 @@ 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) {
-                // 커밋 에코 — DOM에 이미 같은 텍스트가 쓰여 있으면(조합 중 브라우저가
-                // 넣은 상태) 통과시키면 브라우저가 한 번 더 써서 "세세"가 된다.
-                // DOM에 없으면(Safari 최종 커밋) 살려둬야 글자가 사라지지 않는다
-                if ((e.inputType === "insertText" ||
-                    e.inputType === "insertCompositionText") &&
-                    e.data &&
-                    domSel &&
-                    domEndsWith(domSel.focus, e.data)) {
-                    e.preventDefault();
-                }
-                return;
-            }
-            flushComposition();
+        // 조합 세션 게이트 — swallow(조합 중 무시)/prevent(커밋 에코 차단)/
+        // proceed(정상 처리 — 흡수 대기 중의 구조 입력은 플러시 후 통과)
+        const gated = ime.gate(e, domSel);
+        if (gated === "swallow")
+            return;
+        if (gated === "prevent") {
+            e.preventDefault();
+            return;
         }
         const ds = editor.state.selection;
         // 노드 셀렉션 — DOM 캐럿은 클릭 전 위치에 멈춰 있어 신뢰 불가.
@@ -253,28 +159,7 @@ export function bindEditorInput(editor, el) {
         // 경계에서 일어나는 것으로 처리한다 (노드는 유지)
         if (ds.type === "node") {
             e.preventDefault();
-            const parent = ds.path.slice(0, -1);
-            const idx = ds.path[ds.path.length - 1] ?? 0;
-            const tr = editor.state.tr();
-            if (e.inputType.startsWith("delete")) {
-                tr.delete({
-                    anchor: point(parent, idx),
-                    focus: point(parent, idx + 1),
-                });
-            }
-            else if (e.inputType === "insertParagraph" ||
-                e.inputType === "insertLineBreak") {
-                tr.split(point(parent, idx + 1));
-            }
-            else if ((e.inputType === "insertText" ||
-                e.inputType === "insertCompositionText") &&
-                e.data) {
-                tr.insertText(e.data, point(parent, idx + 1));
-            }
-            else {
-                return;
-            }
-            editor.dispatch(tr);
+            nodeSelectionBeforeInput(editor, e);
             return;
         }
         // DOM 셀렉션이 무효하면(리렌더로 분리된 노드 위 등) doc 셀렉션으로
@@ -290,12 +175,8 @@ export function bindEditorInput(editor, el) {
                     return;
                 // 커밋 에코가 흡수 타이머보다 늦게 도착한 경우 — DOM과 doc에
                 // 이미 같은 글자가 있으므로 다시 넣으면 "세세"가 된다
-                if (compEndedAt > 0 &&
-                    performance.now() - compEndedAt < 300 &&
-                    domSel &&
-                    domEndsWith(domSel.focus, data)) {
+                if (ime.isLateEcho(data, domSel))
                     return;
-                }
                 // 범위 삭제 뒤엔 삭제 전 좌표가 무효 — 정규화한 앞점 기준으로 삽입
                 const r = normalizeRange(sel);
                 // 입력 훅 — 기능이 글자 가로채기(코드블록 자동 쌍·타입오버 등)를
@@ -417,8 +298,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);
@@ -444,13 +329,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) {
@@ -487,8 +366,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 });
@@ -501,14 +379,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가 브라우저가 계산한 정확한 범위를 주므로
@@ -533,12 +403,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
@@ -550,59 +419,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)·인용 붙여넣기 — 있으면 순수
@@ -618,10 +435,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;
         }
@@ -631,7 +453,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 안의
@@ -639,49 +461,25 @@ 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;
         }
+        // 클릭 직후 키 입력처럼 selectionchange가 아직 도착하지 않은 창에는
+        // doc 셀렉션이 stale하다 — PM domObserver.flush 관례로 키 처리 전에
+        // DOM 셀렉션을 먼저 흡수한다. 노드 셀렉션 중엔 DOM 캐럿이 무의미한
+        // stale 위치라 덮어쓰지 않는다
+        if (editor.state.selection.type !== "node")
+            syncDocSelection();
         // 노드 셀렉션(이미지 클릭 등) — DOM 캐럿이 없으므로 네이티브
         // 키 동작은 모두 무시하고 모델에서 처리한다. Backspace/Delete는
         // 노드 삭제, Enter는 노드 뒤에 새 블록, 화살표/Escape는 텍스트
         // 셀렉션으로 붕괴, 인쇄 문자는 노드 뒤에 삽입(노드는 유지).
         // Mod/Alt 조합(undo·키맵 등)은 아래 키맵 루프에 넘긴다
-        const ds = editor.state.selection;
-        if (ds.type === "node") {
-            const parent = ds.path.slice(0, -1);
-            const idx = ds.path[ds.path.length - 1] ?? 0;
-            const before = point(parent, idx);
-            const after = point(parent, idx + 1);
-            const tr = editor.state.tr();
-            if (key === "Backspace" || key === "Delete") {
-                e.preventDefault();
-                tr.delete({ anchor: before, focus: after });
-                editor.dispatch(tr);
-            }
-            else if (key === "Enter") {
-                e.preventDefault();
-                tr.split(after);
-                editor.dispatch(tr);
-            }
-            else if (key === "Escape" ||
-                key === "ArrowLeft" ||
-                key === "ArrowUp") {
-                e.preventDefault();
-                editor.dispatch(tr.setSelection(textSelection(before)));
-            }
-            else if (key === "ArrowRight" || key === "ArrowDown") {
-                e.preventDefault();
-                editor.dispatch(tr.setSelection(textSelection(after)));
-            }
-            else if (e.key.length === 1 &&
-                !e.ctrlKey &&
-                !e.metaKey &&
-                !e.altKey) {
-                e.preventDefault();
-                tr.insertText(e.key, after);
-                editor.dispatch(tr);
-            }
+        if (editor.state.selection.type === "node" &&
+            nodeSelectionKeydown(editor, e, key)) {
+            e.preventDefault();
             return;
         }
         for (const km of editor.keymaps) {
@@ -706,202 +504,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 = () => {
-        // 이전 세션의 흡수 타이머가 남아있으면 취소한다 — 그대로 두면 새
-        // 조합 도중에 flushComposition이 composing을 해제하고 디스패치·
-        // 리렌더를 일으켜 브라우저가 살아있는 세션을 리셋한다
-        // ("안녕하세요"→"안ㄴ영ㅎ하세세요" 회귀). 커밋된 텍스트는 DOM에
-        // 남아 있으므로 다음 flush가 같은 홀더를 diff할 때 함께 흡수된다
-        if (compTimer !== null) {
-            clearTimeout(compTimer);
-            compTimer = null;
-        }
-        pendingAbsorb = false;
-        composing = true;
-        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;
-        compEndedAt = performance.now();
-        compTimer = setTimeout(flushComposition, 0);
-    };
     /**
      * 체크박스 아이템(taskItem)의 마커 영역 클릭 — ::before 마커는
      * 의사요소라 이벤트 타겟이 li 자신이 되고, 클릭이 li의 패딩
@@ -928,35 +534,14 @@ export function bindEditorInput(editor, el) {
                 .setNodeAttr(path, "checked", !node?.attrs?.["checked"]));
             return;
         }
-        /**
-         * atom 노드(img/hr 등) 클릭 → NodeSelection — DOM 캐럿 이동을
-         * 막고(preventDefault) 모델 셀렉션만 둔다. 오버레이 표시는
-         * paintOverlays의 is-selected 마킹 + 각 기능의 paintOverlay가 담당.
-         * 같은 노드를 다시 누르면 트랜잭션을 생략한다
-         */
-        if (spec?.atom) {
+        // atom 노드(img/hr 등) 클릭 → NodeSelection — DOM 캐럿 이동을
+        // 막고(preventDefault) 모델 셀렉션만 둔다. 오버레이 표시는
+        // paintOverlays의 is-selected 마킹 + 각 기능의 paintOverlay가 담당.
+        // 같은 노드를 다시 누르면 트랜잭션을 생략한다
+        if (trySelectAtom(editor, t)) {
             e.preventDefault();
-            const cur = editor.state.selection;
-            if (cur.type === "node" &&
-                cur.path.length === path.length &&
-                cur.path.every((v, i) => v === path[i])) {
-                return;
-            }
-            editor.dispatch(editor.state.tr().setSelection(nodeSelection(path)));
         }
     };
-    /**
-     * 파일 수신 — 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));
-    };
     /**
      * 붙여넣기 — 클립보드의 파일을 기능 훅으로 위임한다 (이미지 업로드는
      * imageFeature 소유 — Summernote onImageUpload / Quill 관례).
@@ -964,11 +549,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으로 트랜잭션 처리 */
@@ -981,20 +567,39 @@ 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();
         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();
@@ -1005,8 +610,14 @@ 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));
+    };
+    // 포커스가 에디터로 돌아오면 건너뛴 DOM 셀렉션을 동기화한다 —
+    // 찾기 바에서 내비게이션한 뒤 닫히면 마지막 매치에 캐럿이 선다
+    const onFocusIn = () => {
+        if (pendingSel)
+            restoreSelection();
     };
     el.addEventListener("beforeinput", onBeforeInput);
     el.addEventListener("keydown", onKeydown);
@@ -1014,26 +625,36 @@ 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.addEventListener("focusin", onFocusIn);
     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.removeEventListener("focusin", onFocusIn);
             el.ownerDocument.removeEventListener("selectionchange", onSelectionChange);
         },
         restoreSelection,
         syncDocSelection,
     };
 }
+// DirtyKeyMap은 dirty-keys.ts로 이동했다 — 공개 API 경로 유지를 위해 재수출
+export { DirtyKeyMap } from "./dirty-keys.js";
 //# sourceMappingURL=input.js.map