@moda-editor/core 0.1.3 → 0.1.5

package/dist/conformance/editor-input.js

@@ -0,0 +1,676 @@
+import { expect, it } from "vitest";
+import { createEditor } from "../editor/editor.js";
+import { createDoc, createText } from "../model/node.js";
+import { parseHTML } from "../parse/html.js";
+import { starterExtensions } from "../presets/starter.js";
+import { leafPoint } from "../state/apply.js";
+import { point, pointEq, textSelection } from "../state/selection.js";
+import { specEditor } from "./fixtures.js";
+/**
+ * 입력 계약 — beforeinput 경로(붙여넣기/드롭/삭제/format系/입력 규칙)와
+ * 키다운 경로(Enter/Tab/Mod-a)가 모두 트랜잭션으로 수렴하는지 검증한다.
+ * 네이티브 DOM 우회를 막는 것이 목적 — doc과 DOM이 어긋나는 회귀 방지.
+ */
+export function editorInputSpec(mount) {
+    it("HTML 붙여넣기는 sanitize+파싱되어 인라인으로 삽입된다", async () => {
+        const editor = specEditor();
+        const { el, flush, destroy } = await mount({ editor });
+        const nodes = parseHTML(`<p><b>외부</b>텍스트<script>alert(1)</script><i>기울임</i></p>`, editor.state.schema);
+        editor.dispatch(editor.state
+            .tr()
+            .setSelection(textSelection(point([1, 0], 2)))
+            .insertSlice(point([1, 0], 2), nodes));
+        await flush?.();
+        const para = el.querySelector("[data-me-path='1']");
+        // 스크립트는 걸러지고 마크는 보존된다
+        expect(para.textContent).toBe("둘째외부텍스트기울임");
+        expect(para.querySelector("strong")?.textContent).toBe("외부");
+        expect(para.querySelector("em")?.textContent).toBe("기울임");
+        expect(para.querySelector("script")).toBeNull();
+        destroy();
+    });
+    it("마크다운 텍스트 붙여넣기는 doc 구조로 파싱되어 삽입된다", async () => {
+        // text/plain만 있고 마크다운 신호가 있으면 markdownFeature가
+        // 파싱해 insertSlice한다 — 5개 렌더러가 같은 구조를 렌더해야 한다
+        const editor = createEditor({
+            doc: createDoc([{ type: "paragraph", content: [createText("ab")] }]),
+            extensions: starterExtensions(),
+        });
+        const { el, flush, destroy } = await mount({ editor });
+        const doc = el.ownerDocument;
+        const editable = el.querySelector(".me-editor");
+        const holder = editable.querySelector("[data-me-path='0,0']");
+        const walker = doc.createTreeWalker(holder, 4);
+        let t = null;
+        for (let n = walker.nextNode(); n; n = walker.nextNode()) {
+            if (n.textContent)
+                t = n;
+        }
+        doc.getSelection().setBaseAndExtent(t, 2, t, 2);
+        const ev = new Event("beforeinput", {
+            bubbles: true,
+            cancelable: true,
+        });
+        Object.defineProperties(ev, {
+            inputType: { value: "insertFromPaste" },
+            dataTransfer: {
+                value: {
+                    getData: (fmt) => fmt === "text/plain" ? "## 제목\n\n- 첫째\n- 둘째" : "",
+                },
+            },
+        });
+        editable.dispatchEvent(ev);
+        await flush?.();
+        // 문단이 나뉘고 제목 + 리스트가 사이에 들어간다
+        expect(el.querySelector("h2")).toBeTruthy();
+        expect(el.querySelectorAll("ul > li").length).toBe(2);
+        destroy();
+    });
+    it("평문 붙여넣기는 마크다운 변환 없이 그대로 삽입된다", async () => {
+        // 미종결 구분자(`**`만)가 있는 텍스트도 평문으로 들어가야 한다
+        const editor = createEditor({
+            doc: createDoc([{ type: "paragraph", content: [createText("ab")] }]),
+            extensions: starterExtensions(),
+        });
+        const { el, flush, destroy } = await mount({ editor });
+        const doc = el.ownerDocument;
+        const editable = el.querySelector(".me-editor");
+        const holder = editable.querySelector("[data-me-path='0,0']");
+        const walker = doc.createTreeWalker(holder, 4);
+        let t = null;
+        for (let n = walker.nextNode(); n; n = walker.nextNode()) {
+            if (n.textContent)
+                t = n;
+        }
+        doc.getSelection().setBaseAndExtent(t, 2, t, 2);
+        const ev = new Event("beforeinput", {
+            bubbles: true,
+            cancelable: true,
+        });
+        Object.defineProperties(ev, {
+            inputType: { value: "insertFromPaste" },
+            dataTransfer: {
+                value: {
+                    getData: (fmt) => fmt === "text/plain" ? "그냥 **텍스트" : "",
+                },
+            },
+        });
+        editable.dispatchEvent(ev);
+        await flush?.();
+        expect(el.querySelector("p").textContent).toBe("ab그냥 **텍스트");
+        expect(el.querySelector("strong")).toBeNull();
+        destroy();
+    });
+    it("마크다운 입력 규칙 — `## `는 제목으로, `**x**`는 굵게로 변환된다", async () => {
+        // beforeinput → insertText → applyInputRules의 전체 배선을 검증한다.
+        // happy-dom에는 InputEvent가 없어 프로퍼티를 직접 박은 Event로 대신한다
+        const type = async (el, text, data) => {
+            const doc = el.ownerDocument;
+            const editable = el.querySelector(".me-editor");
+            const holder = editable.querySelector("[data-me-path='0,0']");
+            const walker = doc.createTreeWalker(holder, 4 /* SHOW_TEXT */);
+            let t = null;
+            for (let n = walker.nextNode(); n; n = walker.nextNode()) {
+                if (n.textContent === text)
+                    t = n;
+            }
+            doc.getSelection().setBaseAndExtent(t, text.length, t, text.length);
+            const ev = new Event("beforeinput", {
+                bubbles: true,
+                cancelable: true,
+            });
+            Object.defineProperties(ev, {
+                inputType: { value: "insertText" },
+                data: { value: data },
+            });
+            editable.dispatchEvent(ev);
+        };
+        const editor = createEditor({
+            doc: createDoc([{ type: "paragraph", content: [createText("##")] }]),
+            extensions: starterExtensions(),
+        });
+        const { el, flush, destroy } = await mount({ editor });
+        await type(el, "##", " ");
+        await flush?.();
+        const h2 = el.querySelector(".me-editor > [data-me-path='0']");
+        expect(h2.tagName.toLowerCase()).toBe("h2");
+        expect(h2.textContent).toBe("");
+        destroy();
+        const editor2 = createEditor({
+            doc: createDoc([{ type: "paragraph", content: [createText("**x*")] }]),
+            extensions: starterExtensions(),
+        });
+        const m2 = await mount({ editor: editor2 });
+        await type(m2.el, "**x*", "*");
+        await m2.flush?.();
+        const strong = m2.el.querySelector(".me-editor > [data-me-path='0'] strong");
+        expect(strong?.textContent).toBe("x");
+        m2.destroy();
+    });
+    it("래핑 입력 규칙 — `- `는 ul, `> `는 blockquote, ``` 는 pre", async () => {
+        // beforeinput 경로 — 마크 규칙 계약과 같은 시뮬레이션
+        const type = async (el, text, data) => {
+            const doc = el.ownerDocument;
+            const editable = el.querySelector(".me-editor");
+            const holder = editable.querySelector("[data-me-path='0,0']");
+            const walker = doc.createTreeWalker(holder, 4 /* SHOW_TEXT */);
+            let t = null;
+            for (let n = walker.nextNode(); n; n = walker.nextNode()) {
+                if (n.textContent === text)
+                    t = n;
+            }
+            doc.getSelection().setBaseAndExtent(t, text.length, t, text.length);
+            const ev = new Event("beforeinput", {
+                bubbles: true,
+                cancelable: true,
+            });
+            Object.defineProperties(ev, {
+                inputType: { value: "insertText" },
+                data: { value: data },
+            });
+            editable.dispatchEvent(ev);
+        };
+        const cases = [
+            ["-", "ul[data-me-path='0'] > li > p"],
+            [">", "blockquote[data-me-path='0'] > p"],
+        ];
+        for (const [typed, sel] of cases) {
+            const editor = createEditor({
+                doc: createDoc([{ type: "paragraph", content: [createText(typed)] }]),
+                extensions: starterExtensions(),
+            });
+            const { el, flush, destroy } = await mount({ editor });
+            await type(el, typed, " ");
+            await flush?.();
+            expect(el.querySelector(sel)).toBeTruthy();
+            destroy();
+        }
+        // ``` + 스페이스 → pre (Tiptap 관례 — 공백이 트리거)
+        const editor = createEditor({
+            doc: createDoc([{ type: "paragraph", content: [createText("```")] }]),
+            extensions: starterExtensions(),
+        });
+        const { el, flush, destroy } = await mount({ editor });
+        await type(el, "```", " ");
+        await flush?.();
+        expect(el.querySelector("pre[data-me-path='0']")).toBeTruthy();
+        destroy();
+    });
+    it("리스트 아이템 Enter — 새 항목, 빈 항목 Enter — 리스트 탈출", async () => {
+        const fireEnter = async (el, holderSel) => {
+            const doc = el.ownerDocument;
+            const editable = el.querySelector(".me-editor");
+            const holder = editable.querySelector(holderSel);
+            // 내용 있는 텍스트 노드가 있으면 그 끝, 없으면(빈 문단) 홀더 앞
+            const walker = doc.createTreeWalker(holder, 4);
+            let t = null;
+            for (let n = walker.nextNode(); n; n = walker.nextNode()) {
+                if (n.textContent)
+                    t = n;
+            }
+            const sel = doc.getSelection();
+            if (t)
+                sel.setBaseAndExtent(t, t.textContent.length, t, t.textContent.length);
+            else
+                sel.setBaseAndExtent(holder, 0, holder, 0);
+            const ev = new Event("beforeinput", {
+                bubbles: true,
+                cancelable: true,
+            });
+            Object.defineProperty(ev, "inputType", {
+                value: "insertParagraph",
+            });
+            editable.dispatchEvent(ev);
+        };
+        const mk = () => createEditor({
+            doc: createDoc([
+                {
+                    type: "bulletList",
+                    content: [
+                        {
+                            type: "listItem",
+                            content: [{ type: "paragraph", content: [createText("가")] }],
+                        },
+                    ],
+                },
+            ]),
+            extensions: starterExtensions(),
+        });
+        // 아이템 끝 Enter → 같은 리스트에 새 아이템
+        {
+            const editor = mk();
+            const { el, flush, destroy } = await mount({ editor });
+            await fireEnter(el, "[data-me-path='0,0,0,0']");
+            await flush?.();
+            expect(el.querySelectorAll("ul > li").length).toBe(2);
+            destroy();
+        }
+        // 빈 아이템 Enter → 아이템이 리스트 밖 문단으로 빠진다
+        {
+            const editor = createEditor({
+                doc: createDoc([
+                    {
+                        type: "bulletList",
+                        content: [
+                            {
+                                type: "listItem",
+                                content: [{ type: "paragraph", content: [createText("")] }],
+                            },
+                        ],
+                    },
+                ]),
+                extensions: starterExtensions(),
+            });
+            const { el, flush, destroy } = await mount({ editor });
+            await fireEnter(el, "[data-me-path='0,0,0,0']");
+            await flush?.();
+            expect(el.querySelector("ul")).toBeNull();
+            expect(el.querySelector(".me-editor > p[data-me-path='0']")).toBeTruthy();
+            destroy();
+        }
+    });
+    it("Shift-Enter는 하드 브레이크를 삽입한다", async () => {
+        const editor = createEditor({
+            doc: createDoc([{ type: "paragraph", content: [createText("ab")] }]),
+            extensions: starterExtensions(),
+        });
+        const { el, flush, destroy } = await mount({ editor });
+        const editable = el.querySelector(".me-editor");
+        const doc = el.ownerDocument;
+        const holder = editable.querySelector("[data-me-path='0,0']");
+        const walker = doc.createTreeWalker(holder, 4);
+        let t = null;
+        for (let n = walker.nextNode(); n; n = walker.nextNode()) {
+            if (n.textContent === "ab")
+                t = n;
+        }
+        doc.getSelection().setBaseAndExtent(t, 1, t, 1);
+        editable.dispatchEvent(new KeyboardEvent("keydown", {
+            key: "Enter",
+            shiftKey: true,
+            bubbles: true,
+            cancelable: true,
+        }));
+        await flush?.();
+        expect(el.querySelector("br[data-me-path='0,1']")).toBeTruthy();
+        const kids = editor.state.doc.content[0].content;
+        expect(kids.map((k) => k.type)).toEqual(["text", "hardBreak", "text"]);
+        destroy();
+    });
+    it("Mod-a는 doc 전체 선택을 만든다 — 중첩 editable이 있어도", async () => {
+        // Chromium은 ce=false 래퍼 안의 editable 아울렛(노드뷰)을 만나면
+        // 네이티브 select-all이 셀렉션을 collapse시킨다 — keydown에서
+        // 가로채 doc 전체 선택을 직접 디스패치한다
+        const editor = specEditor();
+        const { el, flush, destroy } = await mount({ editor });
+        const editable = el.querySelector(".me-editor");
+        const ev = new KeyboardEvent("keydown", {
+            key: "a",
+            metaKey: true,
+            bubbles: true,
+            cancelable: true,
+        });
+        editable.dispatchEvent(ev);
+        await flush?.();
+        expect(ev.defaultPrevented).toBe(true);
+        // DOM 복원 후 selectionchange가 리프 좌표로 재동기화한다 —
+        // happy-dom은 Selection 구현이 제한적이라 끝점 오프셋이
+        // 클램프될 수 있어, 앵커=문서 시작 + 비축소 범위를 본다.
+        // DOM 셀렉션 확장 자체는 e2e(감사 — Mod-A)가 검증한다
+        const sel = editor.state.selection;
+        expect(sel.type).toBe("text");
+        if (sel.type === "text") {
+            const start = leafPoint(editor.state.doc, {
+                path: [],
+                offset: 0,
+            });
+            expect(leafPoint(editor.state.doc, sel.anchor)).toEqual(start);
+            expect(pointEq(sel.anchor, sel.focus)).toBe(false);
+        }
+        destroy();
+    });
+    it("전체 선택 삭제 후 타이핑은 단일 문단이 된다", async () => {
+        // Cmd+A → 타이핑과 같은 경로 — doc 루트 경계 포인트에
+        // bare text가 들어가는 회귀 방지
+        const editor = specEditor();
+        const { el, flush, destroy } = await mount({ editor });
+        editor.dispatch(editor.state
+            .tr()
+            .delete({ anchor: point([], 0), focus: point([], 2) })
+            .insertText("Z", point([], 0)));
+        await flush?.();
+        const blocks = el.querySelectorAll(".me-editor > [data-me-path]");
+        expect(blocks.length).toBe(1);
+        expect(blocks[0].tagName.toLowerCase()).toBe("p");
+        expect(blocks[0].textContent).toBe("Z");
+        expect(editor.state.doc.content[0].type).toBe("paragraph");
+        destroy();
+    });
+    it("insertFromDrop — 텍스트 드롭은 트랜잭션으로 삽입된다", async () => {
+        const editor = createEditor({
+            doc: createDoc([{ type: "paragraph", content: [createText("ab")] }]),
+            extensions: starterExtensions(),
+        });
+        const { el, flush, destroy } = await mount({ editor });
+        const doc = el.ownerDocument;
+        const editable = el.querySelector(".me-editor");
+        const holder = editable.querySelector("[data-me-path='0,0']");
+        // 렌더러마다 텍스트 노드 분할이 다르다 — 마지막 텍스트 노드 끝에 캐럿
+        const walker = doc.createTreeWalker(holder, 4);
+        let t = null;
+        for (let n = walker.nextNode(); n; n = walker.nextNode()) {
+            if (n.textContent)
+                t = n;
+        }
+        doc
+            .getSelection()
+            .setBaseAndExtent(t, t.textContent.length, t, t.textContent.length);
+        const ev = new Event("beforeinput", {
+            bubbles: true,
+            cancelable: true,
+        });
+        Object.defineProperties(ev, {
+            inputType: { value: "insertFromDrop" },
+            data: { value: "XY" },
+        });
+        editable.dispatchEvent(ev);
+        await flush?.();
+        expect(el.querySelector("p").textContent).toBe("abXY");
+        destroy();
+    });
+    it("historyUndo/historyRedo beforeinput — 우리 히스토리로 돌린다", async () => {
+        const editor = createEditor({
+            doc: createDoc([{ type: "paragraph", content: [createText("a")] }]),
+            extensions: starterExtensions(),
+        });
+        const { el, flush, destroy } = await mount({ editor });
+        const doc = el.ownerDocument;
+        const editable = el.querySelector(".me-editor");
+        const holder = editable.querySelector("[data-me-path='0,0']");
+        // 렌더러마다 텍스트 노드 분할이 다르다 — 마지막 텍스트 노드 끝에 캐럿
+        const walker = doc.createTreeWalker(holder, 4);
+        let t = null;
+        for (let n = walker.nextNode(); n; n = walker.nextNode()) {
+            if (n.textContent)
+                t = n;
+        }
+        doc
+            .getSelection()
+            .setBaseAndExtent(t, t.textContent.length, t, t.textContent.length);
+        const fire = (inputType, data) => {
+            const ev = new Event("beforeinput", {
+                bubbles: true,
+                cancelable: true,
+            });
+            Object.defineProperties(ev, {
+                inputType: { value: inputType },
+                data: { value: data },
+            });
+            editable.dispatchEvent(ev);
+            return ev;
+        };
+        // 먼저 실제 편집 하나 — undo 스택에 쌓이게
+        fire("insertText", "b");
+        await flush?.();
+        expect(el.querySelector("p").textContent).toBe("ab");
+        // iOS/Android 실행취소 제스처 → preventDefault + undo
+        const u = fire("historyUndo");
+        expect(u.defaultPrevented).toBe(true);
+        await flush?.();
+        expect(el.querySelector("p").textContent).toBe("a");
+        fire("historyRedo");
+        await flush?.();
+        expect(el.querySelector("p").textContent).toBe("ab");
+        destroy();
+    });
+    it("deleteByCut — 잘라내기가 트랜잭션으로 선택을 지운다", async () => {
+        // Cmd-X: 방치하면 브라우저가 DOM만 지워 doc과 어긋난다
+        const editor = createEditor({
+            doc: createDoc([{ type: "paragraph", content: [createText("ab")] }]),
+            extensions: starterExtensions(),
+        });
+        const { el, flush, destroy } = await mount({ editor });
+        const doc = el.ownerDocument;
+        const editable = el.querySelector(".me-editor");
+        const holder = editable.querySelector("[data-me-path='0,0']");
+        const walker = doc.createTreeWalker(holder, 4);
+        let t = null;
+        for (let n = walker.nextNode(); n; n = walker.nextNode()) {
+            if (n.textContent === "ab")
+                t = n;
+        }
+        doc.getSelection().setBaseAndExtent(t, 0, t, 2);
+        const ev = new Event("beforeinput", {
+            bubbles: true,
+            cancelable: true,
+        });
+        Object.defineProperties(ev, {
+            inputType: { value: "deleteByCut" },
+        });
+        editable.dispatchEvent(ev);
+        await flush?.();
+        expect(ev.defaultPrevented).toBe(true);
+        expect(el.querySelector("p").textContent).toBe("");
+        destroy();
+    });
+    it("deleteWord* — getTargetRanges 범위를 트랜잭션으로 지운다", async () => {
+        // macOS Option-Delete: 방치하면 네이티브 단어 삭제가 doc을 우회
+        const editor = createEditor({
+            doc: createDoc([{ type: "paragraph", content: [createText("foo bar")] }]),
+            extensions: starterExtensions(),
+        });
+        const { el, flush, destroy } = await mount({ editor });
+        const doc = el.ownerDocument;
+        const editable = el.querySelector(".me-editor");
+        const holder = editable.querySelector("[data-me-path='0,0']");
+        const walker = doc.createTreeWalker(holder, 4);
+        let t = null;
+        for (let n = walker.nextNode(); n; n = walker.nextNode()) {
+            if (n.textContent === "foo bar")
+                t = n;
+        }
+        doc.getSelection().setBaseAndExtent(t, 7, t, 7);
+        const ev = new Event("beforeinput", {
+            bubbles: true,
+            cancelable: true,
+        });
+        Object.defineProperties(ev, {
+            inputType: { value: "deleteWordBackward" },
+            // happy-dom에는 getTargetRanges가 없으므로 오리타이핑으로
+            // 붙인다 — 코드는 startContainer/startOffset만 읽는다
+            getTargetRanges: {
+                value: () => [
+                    {
+                        startContainer: t,
+                        startOffset: 4,
+                        endContainer: t,
+                        endOffset: 7,
+                    },
+                ],
+            },
+        });
+        editable.dispatchEvent(ev);
+        await flush?.();
+        expect(ev.defaultPrevented).toBe(true);
+        expect(el.querySelector("p").textContent).toBe("foo ");
+        destroy();
+    });
+    it("이모지 Backspace — 서로게이트 페어가 통째로 지워진다", async () => {
+        // getTargetRanges가 없으면 코드 유닛 하나만 지워 절반 페어가
+        // 남는다 — 브라우저가 주는 그래피임 범위를 우선 쓴다
+        const editor = createEditor({
+            doc: createDoc([{ type: "paragraph", content: [createText("a😀b")] }]),
+            extensions: starterExtensions(),
+        });
+        const { el, flush, destroy } = await mount({ editor });
+        const doc = el.ownerDocument;
+        const editable = el.querySelector(".me-editor");
+        const holder = editable.querySelector("[data-me-path='0,0']");
+        const walker = doc.createTreeWalker(holder, 4);
+        let t = null;
+        for (let n = walker.nextNode(); n; n = walker.nextNode()) {
+            if (n.textContent === "a😀b")
+                t = n;
+        }
+        // 캐럿은 😀 뒤 (a=1 + 서로게이트 페어 2 = 오프셋 3)
+        doc.getSelection().setBaseAndExtent(t, 3, t, 3);
+        const ev = new Event("beforeinput", {
+            bubbles: true,
+            cancelable: true,
+        });
+        Object.defineProperties(ev, {
+            inputType: { value: "deleteContentBackward" },
+            getTargetRanges: {
+                value: () => [
+                    {
+                        startContainer: t,
+                        startOffset: 1,
+                        endContainer: t,
+                        endOffset: 3,
+                    },
+                ],
+            },
+        });
+        editable.dispatchEvent(ev);
+        await flush?.();
+        expect(el.querySelector("p").textContent).toBe("ab");
+        destroy();
+    });
+    it("format*/insertOrderedList — 컨텍스트 메뉴 서식이 우리 커맨드로 매핑된다", async () => {
+        const editor = createEditor({
+            doc: createDoc([{ type: "paragraph", content: [createText("ab")] }]),
+            extensions: starterExtensions(),
+        });
+        const { el, flush, destroy } = await mount({ editor });
+        const doc = el.ownerDocument;
+        const editable = el.querySelector(".me-editor");
+        const holder = editable.querySelector("[data-me-path='0,0']");
+        const walker = doc.createTreeWalker(holder, 4);
+        let t = null;
+        for (let n = walker.nextNode(); n; n = walker.nextNode()) {
+            if (n.textContent === "ab")
+                t = n;
+        }
+        const fire = (inputType) => {
+            const ev = new Event("beforeinput", {
+                bubbles: true,
+                cancelable: true,
+            });
+            Object.defineProperties(ev, {
+                inputType: { value: inputType },
+            });
+            editable.dispatchEvent(ev);
+            return ev;
+        };
+        // 선택 후 formatBold → bold 마크
+        doc.getSelection().setBaseAndExtent(t, 0, t, 2);
+        const b = fire("formatBold");
+        expect(b.defaultPrevented).toBe(true);
+        await flush?.();
+        expect(el.querySelector("strong")?.textContent).toBe("ab");
+        // 캐럿에서 insertOrderedList → orderedList 변환
+        doc.getSelection().setBaseAndExtent(t, 0, t, 0);
+        fire("insertOrderedList");
+        await flush?.();
+        expect(el.querySelector(".me-editor > ol")).toBeTruthy();
+        destroy();
+    });
+    it("미지원 inputType은 no-op — 네이티브 DOM 변경을 막는다", async () => {
+        // 처리하지 않는 타입도 preventDefault해야 브라우저가 DOM만
+        // 바꿔 doc과 어긋나는 일이 없다 (insertTranspose, formatFontColor…)
+        const editor = createEditor({
+            doc: createDoc([{ type: "paragraph", content: [createText("ab")] }]),
+            extensions: starterExtensions(),
+        });
+        const { el, destroy } = await mount({ editor });
+        const editable = el.querySelector(".me-editor");
+        const ev = new Event("beforeinput", {
+            bubbles: true,
+            cancelable: true,
+        });
+        Object.defineProperties(ev, {
+            inputType: { value: "formatFontColor" },
+        });
+        editable.dispatchEvent(ev);
+        expect(ev.defaultPrevented).toBe(true);
+        expect(el.querySelector("p").textContent).toBe("ab");
+        destroy();
+    });
+    it("'[ ] ' 입력 규칙은 할일 목록을 만든다", async () => {
+        const editor = createEditor({
+            doc: createDoc([{ type: "paragraph", content: [createText("[ ]")] }]),
+            extensions: starterExtensions(),
+        });
+        const { el, flush, destroy } = await mount({ editor });
+        const doc = el.ownerDocument;
+        const editable = el.querySelector(".me-editor");
+        const holder = editable.querySelector("[data-me-path='0,0']");
+        const walker = doc.createTreeWalker(holder, 4);
+        let t = null;
+        for (let n = walker.nextNode(); n; n = walker.nextNode()) {
+            if (n.textContent === "[ ]")
+                t = n;
+        }
+        doc.getSelection().setBaseAndExtent(t, 3, t, 3);
+        const ev = new Event("beforeinput", {
+            bubbles: true,
+            cancelable: true,
+        });
+        Object.defineProperties(ev, {
+            inputType: { value: "insertText" },
+            data: { value: " " },
+        });
+        editable.dispatchEvent(ev);
+        await flush?.();
+        expect(el.querySelector("ul.me-tasks > li.me-task > p")).toBeTruthy();
+        destroy();
+    });
+    it("표 셀 안 타이핑과 Tab 셀 이동이 동작한다", async () => {
+        const editor = createEditor({
+            doc: createDoc([
+                {
+                    type: "table",
+                    content: [
+                        {
+                            type: "tableRow",
+                            content: [
+                                {
+                                    type: "tableCell",
+                                    content: [{ type: "paragraph", content: [createText("a")] }],
+                                },
+                                {
+                                    type: "tableCell",
+                                    content: [{ type: "paragraph", content: [createText("b")] }],
+                                },
+                            ],
+                        },
+                    ],
+                },
+            ]),
+            extensions: starterExtensions(),
+        });
+        const { el, flush, destroy } = await mount({ editor });
+        const doc = el.ownerDocument;
+        const editable = el.querySelector(".me-editor");
+        // 첫 셀의 텍스트 끝에 캐럿 → Tab → 두 번째 셀로
+        const holder = editable.querySelector("[data-me-path='0,0,0,0,0']");
+        const walker = doc.createTreeWalker(holder, 4);
+        let t = null;
+        for (let n = walker.nextNode(); n; n = walker.nextNode()) {
+            if (n.textContent === "a")
+                t = n;
+        }
+        doc.getSelection().setBaseAndExtent(t, 1, t, 1);
+        editable.dispatchEvent(new KeyboardEvent("keydown", {
+            key: "Tab",
+            bubbles: true,
+            cancelable: true,
+        }));
+        await flush?.();
+        if (editor.state.selection.type === "text") {
+            expect(editor.state.selection.anchor.path.slice(0, 3)).toEqual([0, 0, 1]);
+        }
+        destroy();
+    });
+}
+//# sourceMappingURL=editor-input.js.map