@moda-editor/core 0.1.1

package/dist/view/input.js

@@ -0,0 +1,901 @@
+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("-");
+}
+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);
+    /**
+     * 기능 DOM 오버레이 갱신 — 활성 줄 표시·괄호 하이라이트처럼
+     * 렌더 트리가 아니라 DOM을 직접 마킹하는 것들. 각 기능이
+     * Extension.input.paintOverlay로 구현하고 여기서 일괄 호출한다 —
+     * 어댑터 5개가 restoreSelection만 호출하면 동일 동작한다.
+     */
+    const paintOverlays = () => {
+        for (const h of editor.inputHooks) {
+            h.paintOverlay?.(el, editor.state);
+        }
+    };
+    /**
+     * 우리가 DOM에 마지막으로 반영했거나 selectionchange로 확인한 셀렉션.
+     * 이후 DOM이 이 값과 다르면 아직 동기화되지 않은 사용자 이동이다 —
+     * 비동기 렌더 커밋이 stale doc 셀렉션으로 캐럿을 되돌리는 레이스를
+     * 막기 위해 restoreSelection이 doc 대신 DOM을 진실로 택한다.
+     */
+    let lastApplied = null;
+    const applySel = (anchor, focus) => {
+        applyDomSelection(el, anchor, focus);
+        lastApplied = { anchor, focus };
+    };
+    const restoreSelection = () => {
+        const sel = editor.state.selection;
+        if (sel.type !== "text")
+            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이 캐럿을 요소
+        //    경계로 재앵커하는데 그건 사용자 이동이 아니라 폐기 대상이다
+        const isLeaf = (p) => nodeAt(editor.state.doc, p.path)?.type === "text";
+        if (cur &&
+            lastApplied &&
+            isLeaf(cur.anchor) &&
+            isLeaf(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([]));
+            paintOverlays();
+            return;
+        }
+        applySel(sel.anchor, sel.focus);
+        paintOverlays();
+    };
+    const syncDocSelection = () => {
+        const s = readDomSel();
+        if (!s)
+            return;
+        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([]));
+    };
+    const onBeforeInput = (e) => {
+        if (!editor.editable || e.isComposing)
+            return;
+        // DOM 셀렉션을 흡수 플러시 전에 읽어둔다 — 커밋 끝점 좌표라
+        // 흡수된 텍스트를 포함해 정확하고, 플러시의 리렌더가 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();
+        }
+        // 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) {
+            e.preventDefault();
+            return;
+        }
+        const tr = editor.state.tr();
+        switch (e.inputType) {
+            case "insertText":
+            case "insertCompositionText": {
+                e.preventDefault();
+                const data = e.data ?? "";
+                if (!data)
+                    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);
+                // 분기 판단은 삭제 전 문서의 캐럿 블록 기준
+                const blockPath = r.anchor.path.slice(0, -1);
+                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 (pspec?.listItem) {
+                            // 리스트 아이템 — 빈 아이템이면 리스트 탈출, 아니면 아이템 분할
+                            const kids = parent.content ?? [];
+                            const empty = kids.length === 1 &&
+                                !(kids[0].content ?? []).some((c) => c.text?.length);
+                            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 폴백으로 돌린다
+                    const leaf = (p) => !!p && nodeAt(editor.state.doc, p.path)?.type === "text";
+                    if (ta && tf && !pointEq(ta, tf) && onCaret && leaf(ta) && leaf(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 = {
+                    state: editor.state,
+                    tr,
+                    dispatch: () => editor.dispatch(tr),
+                    anchor: r.anchor,
+                    focus: r.focus,
+                };
+                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;
+            }
+            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가 브라우저가 계산한 정확한 범위를 주므로
+            // 그것을 쓰고, 없으면 현재 선택을 지운다. 잘라내기의 클립보드
+            // 쓰기는 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 leafP = (p) => !!p && nodeAt(editor.state.doc, p.path)?.type === "text";
+                const trusted = a &&
+                    f &&
+                    !pointEq(a, f) &&
+                    leafP(a) &&
+                    leafP(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을 직접 바꾸면 어긋나므로 우리 커맨드로 매핑한다
+            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;
+            }
+            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;
+            }
+            // 나머지 타입(insertTranspose, formatFontColor 등)은 우리가
+            // 처리하지 않는다 — 그대로 두면 브라우저가 DOM만 바꿔 doc과
+            // 영구히 어긋나므로 기본 동작을 막아 no-op으로 둔다
+            default:
+                e.preventDefault();
+                break;
+        }
+    };
+    /**
+     * 키맵 — 확장의 keymap을 순서대로 매칭해 첫 true 커맨드가 이긴다.
+     * false 반환은 다음 바인딩으로 폴스루 (PM keymap 관례).
+     */
+    const onKeydown = (e) => {
+        if (composing || 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;
+        }
+        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(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의 패딩
+     * 영역(마커 존 ~28px)에 떨어진다. 자식 블록 위 클릭은 p가
+     * 타겟이므로 li가 data-me-path를 가지면서 타겟이 li인 경우만
+     * 마커 클릭으로 해석한다.
+     */
+    const onMouseDown = (e) => {
+        if (!editor.editable)
+            return;
+        const t = e.target;
+        if (!(t instanceof Element) || !t.hasAttribute(PATH_ATTR))
+            return;
+        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)
+            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));
+    };
+    /**
+     * 붙여넣기 — 클립보드의 파일을 기능 훅으로 위임한다 (이미지 업로드는
+     * imageFeature 소유 — Summernote onImageUpload / Quill 관례).
+     * 파일이 없거나 소비되지 않으면 폴스루 → beforeinput이 텍스트/HTML을
+     * 처리한다.
+     */
+    const onPaste = (e) => {
+        if (composing || !editor.editable)
+            return;
+        // preventDefault하면 beforeinput이 오지 않는다
+        if (dispatchFiles(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 (composing || !editor.editable)
+            return;
+        const at = caretPointFromXY(el.ownerDocument, el, e.clientX, e.clientY);
+        // 소비되지 않으면 기본 동작(파일을 새 탭으로 여는 것)이 살아있다
+        if (dispatchFiles(e.dataTransfer, "drop", at))
+            e.preventDefault();
+    };
+    const onSelectionChange = () => {
+        if (composing)
+            return;
+        // 에디터 안의 셀렉션만 동기화 — 바깥 클릭은 무시
+        const sel = readDomSel();
+        if (!sel)
+            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를 지운다 (PM 관례 — []가 클리어)
+        editor.dispatch(editor.state.tr().setSelection(next).setStoredMarks([]));
+    };
+    el.addEventListener("beforeinput", onBeforeInput);
+    el.addEventListener("keydown", onKeydown);
+    el.addEventListener("mousedown", onMouseDown);
+    el.addEventListener("paste", onPaste);
+    el.addEventListener("dragover", onDragOver);
+    el.addEventListener("drop", onDrop);
+    el.addEventListener("compositionstart", onCompositionStart);
+    el.addEventListener("compositionend", onCompositionEnd);
+    el.ownerDocument.addEventListener("selectionchange", onSelectionChange);
+    return {
+        dirtyPaths,
+        unbind() {
+            if (compTimer !== null)
+                clearTimeout(compTimer);
+            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.ownerDocument.removeEventListener("selectionchange", onSelectionChange);
+        },
+        restoreSelection,
+        syncDocSelection,
+    };
+}
+//# sourceMappingURL=input.js.map