@teriusu/rich-editor 0.10.8 → 0.11.0

package/dist/extensions/MediaToolbar.test.js

@@ -0,0 +1,231 @@
+import { describe, it, expect, afterEach } from "vitest";
+import { Editor } from "@tiptap/core";
+import StarterKit from "@tiptap/starter-kit";
+import { MediaResizeToolbar, applyMediaToolbarAction } from "./MediaToolbar";
+import { VideoEmbed } from "./VideoEmbed";
+import { MbusVideo } from "./MbusVideo";
+import { ResizableImage } from "./ResizableImage";
+import { TiptapMidibus } from "./TiptapMidibus";
+import { sanitizeHtml } from "../utils/sanitize";
+import { normalizeMediaAlign, normalizeMediaHeight, normalizeMediaRatio, mediaRatioCss } from "../utils/media-size";
+/* ─────────────────────────── 정규화 — 파싱은 관대, 쓰기는 좁게 ─────────────────────────── */
+describe("media-size 정규화", () => {
+    it("높이 — px 정수만 남는다", () => {
+        expect(normalizeMediaHeight("420")).toBe(420);
+        expect(normalizeMediaHeight("420px")).toBe(420);
+        expect(normalizeMediaHeight(419.6)).toBe(420);
+        expect(normalizeMediaHeight("50%")).toBeNull();
+        expect(normalizeMediaHeight("auto")).toBeNull();
+        expect(normalizeMediaHeight(0)).toBeNull();
+    });
+    it("비율 — 어떤 꼴이든 `W:H` 정준형으로", () => {
+        expect(normalizeMediaRatio("16:9")).toBe("16:9");
+        expect(normalizeMediaRatio("16/9")).toBe("16:9");
+        expect(normalizeMediaRatio(" 4 : 3 ")).toBe("4:3");
+        expect(normalizeMediaRatio("1.78")).toBe("1.78:1");
+        expect(normalizeMediaRatio("0:9")).toBeNull();
+        expect(normalizeMediaRatio("가로세로")).toBeNull();
+    });
+    it("비율 → CSS aspect-ratio 값", () => {
+        expect(mediaRatioCss("4:3")).toBe("4 / 3");
+        expect(mediaRatioCss(null)).toBeNull();
+    });
+    it("정렬 — 세 값만, 대소문자·여백은 눈감는다", () => {
+        expect(normalizeMediaAlign(" CENTER ")).toBe("center");
+        expect(normalizeMediaAlign("left")).toBe("left");
+        expect(normalizeMediaAlign("middle")).toBeNull();
+    });
+});
+/* ─────────────────────────── 칩 한 번 = 속성 변경 한 벌 ─────────────────────────── */
+describe("applyMediaToolbarAction", () => {
+    const full = { ratio: true, align: true, widthPresets: true };
+    it("비율 선택은 고정 높이를 함께 푼다 — 높이가 남으면 비율이 안 먹는다", () => {
+        expect(applyMediaToolbarAction({ height: "400" }, "ratio", "4:3", full)).toEqual({
+            ratio: "4:3",
+            height: null
+        });
+    });
+    it("켜진 칩을 다시 누르면 해제된다", () => {
+        expect(applyMediaToolbarAction({ ratio: "16:9" }, "ratio", "16:9", full)).toEqual({
+            ratio: null,
+            height: null
+        });
+        expect(applyMediaToolbarAction({ align: "center" }, "align", "center", full)).toEqual({
+            align: null
+        });
+        expect(applyMediaToolbarAction({ width: "50%" }, "width", "50%", full)).toEqual({
+            width: null
+        });
+    });
+    it("정렬·폭은 저장값이 좁다 — 모르는 값은 거절", () => {
+        expect(applyMediaToolbarAction({}, "align", "middle", full)).toBeNull();
+        expect(applyMediaToolbarAction({}, "width", "30%", full)).toBeNull();
+    });
+    it("구성에 없는 칩은 아무것도 하지 않는다 — 이미지에 폭 프리셋이 없는 이유", () => {
+        expect(applyMediaToolbarAction({}, "ratio", "16:9", { align: true })).toBeNull();
+        expect(applyMediaToolbarAction({}, "width", "50%", { align: true })).toBeNull();
+    });
+});
+/* ─────────────────────────── 속성 왕복 — renderHTML/parseHTML ─────────────────────────── */
+describe("크기·정렬 속성 왕복", () => {
+    let editor;
+    function createEditor(extensions, content) {
+        editor = new Editor({
+            element: document.createElement("div"),
+            extensions: [StarterKit, ...extensions],
+            content
+        });
+        return editor;
+    }
+    afterEach(() => {
+        editor?.destroy();
+    });
+    function findNode(typeName) {
+        let found = null;
+        editor.state.doc.descendants((node, pos) => {
+            if (found)
+                return false;
+            if (node.type.name === typeName)
+                found = { pos, node };
+            return found === null;
+        });
+        return found;
+    }
+    it("VideoEmbed — 높이·정렬이 data-* 로 돌아온다", () => {
+        createEditor([VideoEmbed], '<div data-video-src="https://www.youtube.com/embed/abc" data-video-width="480px" data-video-height="360" data-video-align="center"></div>');
+        const html = editor.getHTML();
+        expect(html).toContain('data-video-height="360"');
+        expect(html).toContain('data-video-align="center"');
+        // style 은 거울일 뿐이지만 정렬이 정적 렌더에서도 서게 한다
+        expect(html).toContain("margin-left: auto");
+    });
+    it("VideoEmbed — 비율은 높이가 없을 때만 나간다(배타)", () => {
+        createEditor([VideoEmbed], '<div data-video-src="https://www.youtube.com/embed/abc" data-video-ratio="16:9"></div>');
+        expect(editor.getHTML()).toContain('data-video-ratio="16:9"');
+        editor.commands.setContent('<div data-video-src="https://www.youtube.com/embed/abc" data-video-height="360" data-video-ratio="16:9"></div>');
+        const html = editor.getHTML();
+        expect(html).toContain('data-video-height="360"');
+        expect(html).not.toContain("data-video-ratio");
+    });
+    it("MbusVideo — 같은 규칙, 이름만 data-mbus-*", () => {
+        createEditor([MbusVideo], '<div data-mbus-src="https://play.mbus.tv/v1/hls/x" data-mbus-height="500" data-mbus-align="right"></div>');
+        const html = editor.getHTML();
+        expect(html).toContain('data-mbus-height="500"');
+        expect(html).toContain('data-mbus-align="right"');
+    });
+    it("이미지 — 정렬은 style 이 아니라 data-align 속성으로", () => {
+        createEditor([ResizableImage.configure({ inline: false })], '<img src="/a.png" width="480" data-align="center">');
+        expect(editor.getHTML()).toContain('data-align="center"');
+    });
+    it("이미지 — 모르는 정렬 값은 버린다", () => {
+        createEditor([ResizableImage.configure({ inline: false })], '<img src="/a.png" data-align="middle">');
+        expect(editor.getHTML()).not.toContain("data-align");
+    });
+    it("살균기가 새 속성을 살려 보낸다 — 허용 목록 정합", () => {
+        const media = sanitizeHtml('<div data-video-src="https://www.youtube.com/embed/a" data-video-height="360" data-video-ratio="16:9" data-video-align="center" data-mbus-height="500" data-mbus-ratio="4:3" data-mbus-align="left"></div>');
+        for (const attr of [
+            'data-video-height="360"',
+            'data-video-ratio="16:9"',
+            'data-video-align="center"',
+            'data-mbus-height="500"',
+            'data-mbus-ratio="4:3"',
+            'data-mbus-align="left"'
+        ]) {
+            expect(media).toContain(attr);
+        }
+        expect(sanitizeHtml('<img src="/a.png" width="480" data-align="center">')).toContain('data-align="center"');
+    });
+    /*
+     * ⚠️ 강의영상(`tiptap-midibus`)은 `rawAttrs` 를 그대로 되뱉는 바이트 보존 노드라,
+     * 높이 드래그가 `height` 속성만 바꾸면 저장본에는 옛 높이가 남는다. 드래그 커밋이
+     * 하는 것과 같은 갱신(attrs + rawAttrs 동기)을 걸어 왕복을 확인한다.
+     */
+    it("TiptapMidibus — 높이 갱신이 rawAttrs 와 함께 가고 나머지는 바이트 보존", () => {
+        const source = '<tiptap-midibus id="abc" start="5" uuid="u-1" width="100%" height="600" data-bubble-menu="false"></tiptap-midibus>';
+        createEditor([TiptapMidibus], source);
+        expect(editor.getHTML()).toContain('id="abc" start="5" uuid="u-1" width="100%" height="600" data-bubble-menu="false"');
+        const found = findNode("tiptapMidibus");
+        const raw = found.node.attrs.rawAttrs;
+        // 높이 드래그 커밋과 같은 트랜잭션(`TiptapMidibus` 노드뷰의 `buildAttrs`)
+        editor.view.dispatch(editor.view.state.tr.setNodeMarkup(found.pos, undefined, {
+            ...found.node.attrs,
+            height: "420",
+            rawAttrs: { ...raw, height: "420" }
+        }));
+        expect(editor.getHTML()).toContain('id="abc" start="5" uuid="u-1" width="100%" height="420" data-bubble-menu="false"');
+    });
+});
+/* ─────────────────────────── 툴바 — 선택 시에만, 편집 모드에만 ─────────────────────────── */
+describe("MediaResizeToolbar 데코레이션", () => {
+    let editor;
+    const CONTENT = '<p>글</p><div data-video-src="https://player.vimeo.com/video/1"></div>';
+    function createEditor(editable = true) {
+        editor = new Editor({
+            element: document.createElement("div"),
+            extensions: [StarterKit, VideoEmbed, MediaResizeToolbar],
+            content: CONTENT,
+            editable
+        });
+        return editor;
+    }
+    afterEach(() => {
+        editor?.destroy();
+    });
+    function videoPos() {
+        let at = -1;
+        editor.state.doc.descendants((node, pos) => {
+            if (at >= 0)
+                return false;
+            if (node.type.name === "videoEmbed")
+                at = pos;
+            return at < 0;
+        });
+        return at;
+    }
+    it("미디어 노드를 선택하면 칩 줄이 서고, 선택을 풀면 사라진다", () => {
+        createEditor();
+        expect(editor.view.dom.querySelector(".hce-media-toolbar")).toBeNull();
+        editor.commands.setNodeSelection(videoPos());
+        const toolbar = editor.view.dom.querySelector(".hce-media-toolbar");
+        expect(toolbar).not.toBeNull();
+        // 비율 3 + 정렬 3 + 폭 2
+        expect(toolbar.querySelectorAll(".hce-media-toolbar-chip").length).toBe(8);
+        editor.commands.setTextSelection(1);
+        expect(editor.view.dom.querySelector(".hce-media-toolbar")).toBeNull();
+    });
+    it("읽기 전용에는 절대 뜨지 않는다", () => {
+        createEditor(false);
+        editor.commands.setNodeSelection(videoPos());
+        expect(editor.view.dom.querySelector(".hce-media-toolbar")).toBeNull();
+    });
+    it("칩 mousedown 이 속성을 바꾸고 저장본까지 간다", () => {
+        createEditor();
+        editor.commands.setNodeSelection(videoPos());
+        const chip = editor.view.dom.querySelector('.hce-media-toolbar-chip[data-action="align"][data-value="center"]');
+        expect(chip).not.toBeNull();
+        chip.dispatchEvent(new MouseEvent("mousedown", { bubbles: true, cancelable: true }));
+        const node = editor.state.doc.nodeAt(videoPos());
+        expect(node?.attrs.align).toBe("center");
+        expect(editor.getHTML()).toContain('data-video-align="center"');
+        // 툴바가 새 상태로 다시 그려져 칩이 켜져 있어야 한다
+        const pressed = editor.view.dom.querySelector('.hce-media-toolbar-chip[data-action="align"][data-value="center"]');
+        expect(pressed?.getAttribute("aria-pressed")).toBe("true");
+    });
+    it("비율 칩은 높이를 풀면서 들어간다", () => {
+        createEditor();
+        const pos = videoPos();
+        editor.view.dispatch(editor.view.state.tr.setNodeMarkup(pos, undefined, {
+            ...editor.state.doc.nodeAt(pos).attrs,
+            height: "360"
+        }));
+        editor.commands.setNodeSelection(pos);
+        const chip = editor.view.dom.querySelector('.hce-media-toolbar-chip[data-action="ratio"][data-value="4:3"]');
+        chip.dispatchEvent(new MouseEvent("mousedown", { bubbles: true, cancelable: true }));
+        const node = editor.state.doc.nodeAt(pos);
+        expect(node?.attrs.ratio).toBe("4:3");
+        expect(node?.attrs.height).toBeNull();
+        const html = editor.getHTML();
+        expect(html).toContain('data-video-ratio="4:3"');
+        expect(html).not.toContain("data-video-height");
+    });
+});

package/dist/extensions/OrderedListMarker.d.ts

@@ -0,0 +1,2 @@
+export declare const OrderedListMarker: import("@tiptap/core").Node<import("@tiptap/extension-list").OrderedListOptions, any>;
+//# sourceMappingURL=OrderedListMarker.d.ts.map

package/dist/extensions/OrderedListMarker.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"OrderedListMarker.d.ts","sourceRoot":"","sources":["../../src/extensions/OrderedListMarker.ts"],"names":[],"mappings":"AAgDA,eAAO,MAAM,iBAAiB,uFAwE5B,CAAC"}

package/dist/extensions/OrderedListMarker.js

@@ -0,0 +1,114 @@
+/**
+ * 순서목록 마커 확장 — 정올 main(`packages/tiptap/plugin/orderedlist`, 커밋 9362eef6) 이식.
+ *
+ * `1. ` 만 받던 순서목록 입력 규칙을 여섯 마커로 넓힌다:
+ *
+ * | 치는 것 | type | 표시 |
+ * |---|---|---|
+ * | `1.` `2.` … | (없음) | decimal |
+ * | `a.` ~ `z.` | `a` | lower-alpha |
+ * | `A.` ~ `Z.` | `A` | upper-alpha |
+ * | `i.` | `i` | lower-roman |
+ * | `I.` | `I` | upper-roman |
+ * | `ㄱ.` ~ `ㅎ.` | `kors` | ㄱ. ㄴ. …(카운터 스타일) |
+ * | `가.` ~ `하.` | `korc` | 가. 나. …(카운터 스타일) |
+ *
+ * 중간 값으로 시작하면(`3.` `c.` `다.`) `start` 가 잡히고, **직전 목록의 다음 번호면 그
+ * 목록에 이어붙는다**(`canJoinSequentialList`). 마커 종류가 다르면 번호가 이어져도 안 붙는다.
+ *
+ * ⚠️ **main 과 다른 점 둘.**
+ * 1. 숫자 목록의 `type` 을 심지 않는다(main 은 default `'1'` 이라 모든 `<ol>` 에
+ *    `type="1"` 이 붙는다). 기존 저장본·왕복 결과를 그대로 두기 위해서다 — 판정은
+ *    `type ?? '1'` 로 동일하다.
+ * 2. `renderHTML` 이 `marker-<type>` 클래스를 함께 심는다. CSS 속성 선택자는 HTML `type`
+ *    값을 **대소문자 무시**로 매치해서(`[type='a']` 가 `A` 도 잡는다) 속성만으로는
+ *    lower/upper 를 가를 수 없다 — 클래스 선택자는 대소문자를 구분한다.
+ *    (main 은 앱 CSS 가 `ol` 의 list-style 을 안 덮어서 UA 의 type 속성 매핑으로 충분했다.
+ *    여기는 `editor.css` 가 `.tiptap ol { list-style: decimal }` 을 깔아 그 길이 막혀 있다.)
+ *
+ * 편집기 밖 표시: 정올 main 이 저장한 옛 본문(`<ol type="A">`, 클래스 없음)은 정적 렌더
+ * (`src/static/index.ts` 의 `annotateOrderedListMarkers`)가 같은 클래스를 표시 시점에 입힌다.
+ */
+import { mergeAttributes, wrappingInputRule } from '@tiptap/core';
+import { OrderedList } from '@tiptap/extension-list';
+const KOREAN_CONSONANTS = ['ㄱ', 'ㄴ', 'ㄷ', 'ㄹ', 'ㅁ', 'ㅂ', 'ㅅ', 'ㅇ', 'ㅈ', 'ㅊ', 'ㅋ', 'ㅌ', 'ㅍ', 'ㅎ'];
+const KOREAN_SYLLABLES = ['가', '나', '다', '라', '마', '바', '사', '아', '자', '차', '카', '타', '파', '하'];
+/**
+ * 직전 목록에 이어붙일 수 있나 — 마커 종류가 같고, 목록의 다음 번호(start + 항목 수)가
+ * 방금 친 번호와 같아야 한다. `type` 없는 목록은 숫자 목록(`'1'`)으로 본다.
+ */
+const canJoinSequentialList = (node, type, markerOrdinal) => {
+    const nodeType = node.attrs.type || '1';
+    const nodeStart = Number(node.attrs.start ?? 1);
+    return nodeType === type && nodeStart + node.childCount === markerOrdinal;
+};
+export const OrderedListMarker = OrderedList.extend({
+    renderHTML({ HTMLAttributes }) {
+        const { start, type, ...rest } = HTMLAttributes;
+        const attrs = { ...rest };
+        // 기본 확장과 같은 규칙 — start 1 은 안 적는다(적으나 안 적으나 같은 목록이다).
+        if (start !== undefined && start !== null && start !== 1)
+            attrs.start = start;
+        if (type) {
+            attrs.type = type;
+            attrs.class = `marker-${type}`;
+        }
+        return ['ol', mergeAttributes(this.options.HTMLAttributes, attrs), 0];
+    },
+    addInputRules() {
+        /*
+         * ⚠️ 규칙 순서가 곧 우선순위다. `i.`/`I.`(로마 숫자)는 `a-z`/`A-Z`(알파벳)에도
+         * 걸리므로 **로마 숫자 규칙이 먼저** 와야 한다 — main 과 같은 배치.
+         */
+        return [
+            wrappingInputRule({
+                find: /^(\d+)\.\s$/,
+                type: this.type,
+                getAttributes: (match) => ({ start: +match[1] }),
+                joinPredicate: (match, node) => canJoinSequentialList(node, '1', +match[1])
+            }),
+            wrappingInputRule({
+                find: /^i\.\s$/,
+                type: this.type,
+                getAttributes: () => ({ start: 1, type: 'i' }),
+                joinPredicate: (_match, node) => canJoinSequentialList(node, 'i', 1)
+            }),
+            wrappingInputRule({
+                find: /^I\.\s$/,
+                type: this.type,
+                getAttributes: () => ({ start: 1, type: 'I' }),
+                joinPredicate: (_match, node) => canJoinSequentialList(node, 'I', 1)
+            }),
+            wrappingInputRule({
+                find: /^([A-Z])\.\s$/,
+                type: this.type,
+                getAttributes: (match) => ({ start: match[1].charCodeAt(0) - 64, type: 'A' }),
+                joinPredicate: (match, node) => canJoinSequentialList(node, 'A', match[1].charCodeAt(0) - 64)
+            }),
+            wrappingInputRule({
+                find: /^([a-z])\.\s$/,
+                type: this.type,
+                getAttributes: (match) => ({ start: match[1].charCodeAt(0) - 96, type: 'a' }),
+                joinPredicate: (match, node) => canJoinSequentialList(node, 'a', match[1].charCodeAt(0) - 96)
+            }),
+            wrappingInputRule({
+                find: /^([ㄱㄴㄷㄹㅁㅂㅅㅇㅈㅊㅋㅌㅍㅎ])\.\s$/,
+                type: this.type,
+                getAttributes: (match) => ({
+                    start: 1 + KOREAN_CONSONANTS.indexOf(match[1]),
+                    type: 'kors'
+                }),
+                joinPredicate: (match, node) => canJoinSequentialList(node, 'kors', 1 + KOREAN_CONSONANTS.indexOf(match[1]))
+            }),
+            wrappingInputRule({
+                find: /^([가나다라마바사아자차카타파하])\.\s$/,
+                type: this.type,
+                getAttributes: (match) => ({
+                    start: 1 + KOREAN_SYLLABLES.indexOf(match[1]),
+                    type: 'korc'
+                }),
+                joinPredicate: (match, node) => canJoinSequentialList(node, 'korc', 1 + KOREAN_SYLLABLES.indexOf(match[1]))
+            })
+        ];
+    }
+});

package/dist/extensions/OrderedListMarker.test.d.ts

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=OrderedListMarker.test.d.ts.map

package/dist/extensions/OrderedListMarker.test.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"OrderedListMarker.test.d.ts","sourceRoot":"","sources":["../../src/extensions/OrderedListMarker.test.ts"],"names":[],"mappings":""}

package/dist/extensions/OrderedListMarker.test.js

@@ -0,0 +1,176 @@
+import { describe, it, expect, afterEach } from 'vitest';
+import { Editor } from '@tiptap/core';
+import StarterKit from '@tiptap/starter-kit';
+import { OrderedListMarker } from './OrderedListMarker';
+import { sanitizeHtml } from '../utils/sanitize';
+import { renderStaticHtml } from '../static';
+/*
+ * 순서목록 마커는 **입력 규칙이 전부다** — 명령으로는 못 만들고 쳐야만 나온다.
+ * 그래서 `handleTextInput` 을 한 글자씩 두드려 실제 타이핑을 재현한다
+ * (`insertContent` 는 입력 규칙을 태우지 않는다).
+ */
+describe('순서목록 마커 (OrderedListMarker)', () => {
+    let editor;
+    function createEditor(content = '<p></p>') {
+        editor = new Editor({
+            element: document.createElement('div'),
+            extensions: [StarterKit.configure({ orderedList: false }), OrderedListMarker],
+            content
+        });
+        return editor;
+    }
+    function type(text) {
+        for (const char of text) {
+            const { from, to } = editor.state.selection;
+            const handled = editor.view.someProp('handleTextInput', (f) => f(editor.view, from, to, char, () => editor.state.tr.insertText(char, from, to)));
+            if (!handled)
+                editor.commands.insertContent(char);
+        }
+    }
+    const json = () => editor.getJSON();
+    const blocks = () => json().content ?? [];
+    const firstBlock = () => blocks()[0];
+    /*
+     * StarterKit v3 의 `TrailingNode` 가 문서 끝에 빈 문단을 항상 하나 붙여 두므로,
+     * "목록이 몇 개가 됐나"는 전체 블록 수가 아니라 orderedList 만 세야 한다.
+     */
+    const lists = () => blocks().filter((block) => block.type === 'orderedList');
+    /** 마지막 빈 문단 안(입력 규칙을 칠 자리)으로 커서를 옮긴다. */
+    function moveToTrailingParagraph() {
+        editor.commands.setTextSelection(editor.state.doc.content.size - 1);
+    }
+    afterEach(() => {
+        editor?.destroy();
+    });
+    describe('마커별 입력 규칙', () => {
+        it('`1. ` — 숫자 목록. type 을 심지 않아 저장본이 예전과 같다', () => {
+            createEditor();
+            type('1. ');
+            expect(firstBlock()?.type).toBe('orderedList');
+            expect(firstBlock()?.attrs?.start).toBe(1);
+            expect(firstBlock()?.attrs?.type ?? null).toBeNull();
+            expect(editor.getHTML()).toContain('<ol>');
+        });
+        it('`3. ` — 중간 번호로 시작하면 start 가 잡힌다', () => {
+            createEditor();
+            type('3. ');
+            expect(firstBlock()?.attrs?.start).toBe(3);
+            expect(editor.getHTML()).toContain('<ol start="3">');
+        });
+        it('`a. ` — lower-alpha. type 속성과 marker 클래스가 같이 남는다', () => {
+            createEditor();
+            type('a. ');
+            expect(firstBlock()?.attrs).toMatchObject({ start: 1, type: 'a' });
+            expect(editor.getHTML()).toContain('<ol type="a" class="marker-a">');
+        });
+        it('`c. ` — 알파벳 중간 시작은 서수로 환산된다 (c → 3)', () => {
+            createEditor();
+            type('c. ');
+            expect(firstBlock()?.attrs).toMatchObject({ start: 3, type: 'a' });
+            expect(editor.getHTML()).toContain('<ol start="3" type="a" class="marker-a">');
+        });
+        it('`B. ` — upper-alpha (B → 2)', () => {
+            createEditor();
+            type('B. ');
+            expect(firstBlock()?.attrs).toMatchObject({ start: 2, type: 'A' });
+        });
+        it('`i. `/`I. ` — 로마 숫자가 알파벳 규칙보다 먼저 잡는다', () => {
+            createEditor();
+            type('i. ');
+            expect(firstBlock()?.attrs).toMatchObject({ start: 1, type: 'i' });
+            editor.destroy();
+            createEditor();
+            type('I. ');
+            expect(firstBlock()?.attrs).toMatchObject({ start: 1, type: 'I' });
+        });
+        it('`ㄱ. ` — 한글 자음(kors)', () => {
+            createEditor();
+            type('ㄱ. ');
+            expect(firstBlock()?.attrs).toMatchObject({ start: 1, type: 'kors' });
+            expect(editor.getHTML()).toContain('<ol type="kors" class="marker-kors">');
+        });
+        it('`다. ` — 한글 음절(korc) 중간 시작 (다 → 3)', () => {
+            createEditor();
+            type('다. ');
+            expect(firstBlock()?.attrs).toMatchObject({ start: 3, type: 'korc' });
+        });
+        it('마커 뒤에 친 글자는 목록 항목 안으로 들어간다', () => {
+            createEditor();
+            type('a. 첫째');
+            const item = firstBlock()?.content?.[0];
+            expect(item?.type).toBe('listItem');
+            expect(item?.content?.[0].content?.[0].text).toBe('첫째');
+        });
+    });
+    describe('직전 목록에 이어붙기', () => {
+        it('숫자 — 다음 번호(3.)를 치면 두 항목짜리 목록에 붙는다', () => {
+            createEditor('<ol><li><p>하나</p></li><li><p>둘</p></li></ol><p></p>');
+            moveToTrailingParagraph();
+            type('3. ');
+            expect(lists()).toHaveLength(1);
+            expect(firstBlock()?.content).toHaveLength(3);
+            expect(firstBlock()?.attrs?.start).toBe(1);
+        });
+        it('알파벳 — `b. ` 가 type="a" 목록에 붙는다', () => {
+            createEditor('<ol type="a"><li><p>ㄱ</p></li></ol><p></p>');
+            moveToTrailingParagraph();
+            type('b. ');
+            expect(lists()).toHaveLength(1);
+            expect(firstBlock()?.content).toHaveLength(2);
+            expect(firstBlock()?.attrs?.type).toBe('a');
+        });
+        it('start 가 1 이 아닌 목록도 다음 번호부터 센다 (start=3 + 1항목 → D.)', () => {
+            createEditor('<ol type="A" start="3"><li><p>셋</p></li></ol><p></p>');
+            moveToTrailingParagraph();
+            type('D. ');
+            expect(lists()).toHaveLength(1);
+            expect(firstBlock()?.content).toHaveLength(2);
+        });
+        it('번호가 이어져도 마커 종류가 다르면 안 붙는다 (숫자 목록 뒤 `b. `)', () => {
+            createEditor('<ol><li><p>하나</p></li></ol><p></p>');
+            moveToTrailingParagraph();
+            type('b. ');
+            expect(lists()).toHaveLength(2);
+            expect(lists()[1]?.attrs).toMatchObject({ start: 2, type: 'a' });
+        });
+        it('번호가 안 이어지면 start 를 안고 새 목록이 선다 (1항목 뒤 `5. `)', () => {
+            createEditor('<ol><li><p>하나</p></li></ol><p></p>');
+            moveToTrailingParagraph();
+            type('5. ');
+            expect(lists()).toHaveLength(2);
+            expect(lists()[1]?.attrs?.start).toBe(5);
+        });
+    });
+    describe('sanitize 왕복', () => {
+        it('type·start·marker 클래스가 살균을 그대로 통과하고, 되읽어도 속성이 남는다', () => {
+            createEditor();
+            type('C. ');
+            const html = editor.getHTML();
+            expect(html).toContain('start="3"');
+            expect(html).toContain('type="A"');
+            expect(html).toContain('class="marker-A"');
+            const sanitized = sanitizeHtml(html);
+            expect(sanitized).toContain('start="3"');
+            expect(sanitized).toContain('type="A"');
+            expect(sanitized).toContain('class="marker-A"');
+            editor.commands.setContent(sanitized);
+            expect(firstBlock()?.attrs).toMatchObject({ start: 3, type: 'A' });
+        });
+    });
+    describe('정적 렌더 (renderStaticHtml)', () => {
+        it('정올 main 이 저장한 클래스 없는 ol[type] 에 marker 클래스를 입힌다', () => {
+            const out = renderStaticHtml('<ol type="A" start="3"><li><p>셋</p></li></ol>');
+            expect(out).toContain('type="A"');
+            expect(out).toContain('start="3"');
+            expect(out).toContain('class="marker-A"');
+        });
+        it('이미 marker 클래스가 있으면 원본을 그대로 돌려준다', () => {
+            const html = '<ol type="korc" class="marker-korc"><li><p>가</p></li></ol>';
+            expect(renderStaticHtml(html)).toBe(html);
+        });
+        it('type 없는 목록은 건드리지 않는다', () => {
+            const html = '<ol start="3"><li><p>x</p></li></ol>';
+            expect(renderStaticHtml(html)).toBe(html);
+        });
+    });
+});

package/dist/extensions/PdfBlock.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"PdfBlock.d.ts","sourceRoot":"","sources":["../../src/extensions/PdfBlock.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,IAAI,UAAU,EAAmB,MAAM,cAAc,CAAC;AAYnE,eAAO,MAAM,QAAQ,sBAs1BnB,CAAC"}
+{"version":3,"file":"PdfBlock.d.ts","sourceRoot":"","sources":["../../src/extensions/PdfBlock.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,IAAI,UAAU,EAAmB,MAAM,cAAc,CAAC;AAanE,eAAO,MAAM,QAAQ,sBAu1BnB,CAAC"}