@teriusu/rich-editor 0.10.8 → 0.11.0

package/dist/utils/floating-helper.test.js

@@ -0,0 +1,141 @@
+import { describe, it, expect, afterEach } from "vitest";
+import { readFileSync } from "node:fs";
+import { join } from "node:path";
+import { Editor } from "@tiptap/core";
+import StarterKit from "@tiptap/starter-kit";
+import { MathInline, MathDisplay } from "../extensions/Math";
+import { isEmptyRootParagraph, floatingHelperVisible, helperInsertMath, helperInsertCodeBlock, FLOATING_HELPER_ON_CLASS, } from "./floating-helper";
+/*
+ * 헬퍼의 계약 넷을 문서 상태로 확인한다 — 뜨는 자리(포커스된 최상위 빈 문단)에서만
+ * 뜨고, 읽기 전용·비포커스·팝업 열림(suppressed)이면 안 뜨고, 슬래시·이모지 트리거
+ * 텍스트가 있으면 (블록이 비지 않았으므로) 안 뜨고, 두 버튼은 슬래시 메뉴 항목과
+ * 같은 결과를 만든다.
+ */
+describe("빈 줄 플로팅 헬퍼", () => {
+    let editor;
+    function createEditor(content = "<p></p>", opts = {}) {
+        editor = new Editor({
+            element: document.createElement("div"),
+            extensions: [
+                StarterKit,
+                opts.promptMath ? MathInline.configure({ promptMath: opts.promptMath }) : MathInline,
+                opts.promptMath ? MathDisplay.configure({ promptMath: opts.promptMath }) : MathDisplay,
+            ],
+            content,
+            editable: opts.editable ?? true,
+        });
+        return editor;
+    }
+    afterEach(() => {
+        editor?.destroy();
+    });
+    /** 포커스·비억제 기준의 최종 판정 — 개별 축은 아래에서 따로 끈다. */
+    const shown = () => floatingHelperVisible(editor, { focused: true, suppressed: false });
+    const flush = () => new Promise((resolve) => setTimeout(resolve, 0));
+    function findNode(node, type) {
+        if (node.type === type)
+            return node;
+        for (const child of node.content ?? []) {
+            const hit = findNode(child, type);
+            if (hit)
+                return hit;
+        }
+        return null;
+    }
+    const docJson = () => editor.getJSON();
+    describe("표시 조건", () => {
+        it("포커스된 최상위 빈 문단이면 뜬다", () => {
+            createEditor("<p></p>");
+            expect(shown()).toBe(true);
+        });
+        it("문서 끝의 빈 문단에서도 뜬다 (첫 줄 한정이 아니다)", () => {
+            createEditor("<p>내용</p><p></p>");
+            editor.commands.setTextSelection(editor.state.doc.content.size - 1);
+            expect(shown()).toBe(true);
+        });
+        it("글자가 있으면 안 뜬다", () => {
+            createEditor("<p>안녕</p>");
+            expect(shown()).toBe(false);
+        });
+        it("빈 제목에서는 안 뜬다 — '제목 N' placeholder 몫 (main 과 의도적 차이)", () => {
+            createEditor("<h1></h1>");
+            expect(shown()).toBe(false);
+        });
+        it("코드블록 안 빈 줄에서는 안 뜬다", () => {
+            createEditor("<pre><code></code></pre>");
+            expect(shown()).toBe(false);
+        });
+        it("중첩 블록(인용문) 안의 빈 문단에서는 안 뜬다 — 최상위 깊이 한정", () => {
+            createEditor("<blockquote><p></p></blockquote>");
+            expect(editor.state.selection.$anchor.depth).toBeGreaterThan(1);
+            expect(shown()).toBe(false);
+        });
+        it("노드 선택(커서가 접혀 있지 않음)이면 안 뜬다", () => {
+            createEditor("<p></p><hr>");
+            editor.commands.setNodeSelection(2);
+            expect(shown()).toBe(false);
+        });
+        it("isEmptyRootParagraph 는 텍스트만이 아니라 내용 유무를 본다", () => {
+            // hardBreak 는 textContent 가 "" 지만 빈 줄이 아니다 — tiptap 기본
+            // shouldShow(textContent 검사)와 달리 content.size 로 걸러진다.
+            createEditor("<p><br></p>");
+            expect(isEmptyRootParagraph(editor.state)).toBe(false);
+        });
+    });
+    describe("표시 게이트", () => {
+        it("읽기 전용이면 절대 안 뜬다", () => {
+            createEditor("<p></p>", { editable: false });
+            expect(floatingHelperVisible(editor, { focused: true, suppressed: false })).toBe(false);
+        });
+        it("포커스가 없으면 안 뜬다", () => {
+            createEditor("<p></p>");
+            expect(floatingHelperVisible(editor, { focused: false, suppressed: false })).toBe(false);
+        });
+        it("suppressed(슬래시·이모지 메뉴 열림)면 안 뜬다", () => {
+            createEditor("<p></p>");
+            expect(floatingHelperVisible(editor, { focused: true, suppressed: true })).toBe(false);
+        });
+        it("슬래시 트리거 텍스트(/)가 있으면 블록이 비지 않아 안 뜬다", () => {
+            createEditor("<p>/</p>");
+            editor.commands.setTextSelection(2);
+            expect(shown()).toBe(false);
+        });
+        it("이모지 트리거 텍스트(:sm)가 있으면 블록이 비지 않아 안 뜬다", () => {
+            createEditor("<p>:sm</p>");
+            editor.commands.setTextSelection(4);
+            expect(shown()).toBe(false);
+        });
+    });
+    describe("버튼 커맨드", () => {
+        it("수식 — 프롬프트가 돌려준 LaTeX 로 수식 블록을 넣는다 (슬래시 '수식' 과 동일)", async () => {
+            createEditor("<p></p>", { promptMath: async () => "a^2" });
+            expect(helperInsertMath(editor)).toBe(true);
+            await flush();
+            const math = findNode(docJson(), "math_display");
+            expect(math).not.toBeNull();
+            expect(math.content?.[0]?.text).toBe("a^2");
+        });
+        it("수식 — 프롬프트를 취소하면 아무것도 넣지 않는다", async () => {
+            createEditor("<p></p>", { promptMath: async () => null });
+            helperInsertMath(editor);
+            await flush();
+            expect(findNode(docJson(), "math_display")).toBeNull();
+            expect(findNode(docJson(), "math_inline")).toBeNull();
+        });
+        it("코드 — 현재 빈 문단을 코드블록으로 바꾼다 (슬래시 '코드' 와 동일)", () => {
+            createEditor("<p></p>");
+            expect(helperInsertCodeBlock(editor)).toBe(true);
+            expect(editor.state.doc.firstChild?.type.name).toBe("codeBlock");
+        });
+    });
+    describe("placeholder 겹침 계약", () => {
+        it("editor.css 에 숨김 규칙이 클래스 상수와 같은 이름으로 있다", () => {
+            // 컴포넌트는 이 클래스를 `.tiptap` 에 토글하고, CSS 가 그 동안 placeholder 를
+            // 숨긴다. 이름이 갈리면 문구가 겹쳐도 아무 테스트도 안 깨지므로 여기서 묶는다.
+            // happy-dom 에서는 `import.meta.url` 이 http 스킴이라 파일 경로로 못 쓴다 —
+            // vitest 는 패키지 루트에서 돌므로 cwd 기준으로 읽는다.
+            const css = readFileSync(join(process.cwd(), "src/styles/editor.css"), "utf8");
+            expect(css).toContain(`.tiptap.${FLOATING_HELPER_ON_CLASS} .is-empty::before`);
+        });
+    });
+});

package/dist/utils/guard-vscode-paste.d.ts

@@ -0,0 +1,19 @@
+import { Plugin } from "@tiptap/pm/state";
+/**
+ * 업스트림 코드블록의 VS Code 붙여넣기 처리를 **메타데이터 검증으로 감싼다**.
+ *
+ * ⚠️ 왜 필요한가 — VS Code 계열 앱은 복사할 때 클립보드에 `vscode-editor-data`(JSON)를
+ * 싣는데, `@tiptap/extension-code-block` 의 `codeBlockVSCodeHandler` 는 이것을 **검증 없이
+ * `JSON.parse`** 한다(dist/index.js `const vscodeData = vscode ? JSON.parse(vscode) : ...`).
+ * 다른 앱이 같은 타입에 깨진 값을 실어 보내면 붙여넣기 한 번에 handlePaste 가 던지고,
+ * 그 뒤로 에디터가 멈춘다.
+ *
+ * 업스트림 플러그인을 갈아 끼우지 않고 **그대로 감싼다** — 붙여넣기 동작과 플러그인
+ * 정체(키·나머지 props)는 유지하고, 메타데이터가 멀쩡할 때만 원래 핸들러에 넘긴다.
+ * 메타데이터가 깨졌으면 false 를 돌려 **일반 텍스트 붙여넣기로** 내려보낸다.
+ *
+ * handlePaste 가 없는 플러그인은 손대지 않고 그대로 돌려주므로, 코드블록의 부모 플러그인
+ * 전부에 일괄로 씌워도 안전하다.
+ */
+export declare function guardVSCodePaste(plugin: Plugin): Plugin;
+//# sourceMappingURL=guard-vscode-paste.d.ts.map

package/dist/utils/guard-vscode-paste.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"guard-vscode-paste.d.ts","sourceRoot":"","sources":["../../src/utils/guard-vscode-paste.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,MAAM,EAAE,MAAM,kBAAkB,CAAC;AAE1C;;;;;;;;;;;;;;;GAeG;AACH,wBAAgB,gBAAgB,CAAC,MAAM,EAAE,MAAM,GAAG,MAAM,CA8BvD"}

package/dist/utils/guard-vscode-paste.js

@@ -0,0 +1,46 @@
+import { Plugin } from "@tiptap/pm/state";
+/**
+ * 업스트림 코드블록의 VS Code 붙여넣기 처리를 **메타데이터 검증으로 감싼다**.
+ *
+ * ⚠️ 왜 필요한가 — VS Code 계열 앱은 복사할 때 클립보드에 `vscode-editor-data`(JSON)를
+ * 싣는데, `@tiptap/extension-code-block` 의 `codeBlockVSCodeHandler` 는 이것을 **검증 없이
+ * `JSON.parse`** 한다(dist/index.js `const vscodeData = vscode ? JSON.parse(vscode) : ...`).
+ * 다른 앱이 같은 타입에 깨진 값을 실어 보내면 붙여넣기 한 번에 handlePaste 가 던지고,
+ * 그 뒤로 에디터가 멈춘다.
+ *
+ * 업스트림 플러그인을 갈아 끼우지 않고 **그대로 감싼다** — 붙여넣기 동작과 플러그인
+ * 정체(키·나머지 props)는 유지하고, 메타데이터가 멀쩡할 때만 원래 핸들러에 넘긴다.
+ * 메타데이터가 깨졌으면 false 를 돌려 **일반 텍스트 붙여넣기로** 내려보낸다.
+ *
+ * handlePaste 가 없는 플러그인은 손대지 않고 그대로 돌려주므로, 코드블록의 부모 플러그인
+ * 전부에 일괄로 씌워도 안전하다.
+ */
+export function guardVSCodePaste(plugin) {
+    const handlePaste = plugin.spec.props?.handlePaste;
+    if (!handlePaste)
+        return plugin;
+    return new Plugin({
+        ...plugin.spec,
+        props: {
+            ...plugin.spec.props,
+            handlePaste(view, event, slice) {
+                const metadata = event.clipboardData?.getData("vscode-editor-data");
+                if (metadata) {
+                    try {
+                        const data = JSON.parse(metadata);
+                        if (!data ||
+                            typeof data !== "object" ||
+                            !("mode" in data) ||
+                            typeof data.mode !== "string") {
+                            return false;
+                        }
+                    }
+                    catch {
+                        return false;
+                    }
+                }
+                return handlePaste.call(this, view, event, slice);
+            }
+        }
+    });
+}

package/dist/utils/guard-vscode-paste.test.d.ts

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

package/dist/utils/guard-vscode-paste.test.d.ts.map

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

package/dist/utils/guard-vscode-paste.test.js

@@ -0,0 +1,86 @@
+import { describe, it, expect, afterEach } from "vitest";
+import { Editor } from "@tiptap/core";
+import StarterKit from "@tiptap/starter-kit";
+import CodeBlockLowlight from "@tiptap/extension-code-block-lowlight";
+import { Plugin } from "@tiptap/pm/state";
+import { Slice } from "@tiptap/pm/model";
+import { lowlight } from "./lowlight";
+import { guardVSCodePaste } from "./guard-vscode-paste";
+/*
+ * 업스트림 `codeBlockVSCodeHandler` 는 클립보드의 `vscode-editor-data` 를 try/catch 없이
+ * `JSON.parse` 한다 — 깨진 메타데이터가 실리면 붙여넣기 한 번에 던진다. 이 가드는
+ * 메타데이터를 먼저 검증하고, 멀쩡할 때만 원래 핸들러에 넘긴다.
+ *
+ * `TipTapEditor.svelte` 의 `GuardedCodeBlockLowlight` 와 같은 조합으로 에디터를 세워,
+ * 실제 플러그인 사슬(someProp)로 붙여넣기를 흉내 낸다.
+ */
+const GuardedCodeBlockLowlight = CodeBlockLowlight.extend({
+    addProseMirrorPlugins() {
+        return (this.parent?.() ?? []).map((plugin) => guardVSCodePaste(plugin));
+    }
+});
+describe("guardVSCodePaste", () => {
+    let editor;
+    function createEditor(content = "<p></p>") {
+        editor = new Editor({
+            element: document.createElement("div"),
+            extensions: [
+                StarterKit.configure({ codeBlock: false }),
+                GuardedCodeBlockLowlight.configure({ lowlight, defaultLanguage: "cpp" })
+            ],
+            content
+        });
+        return editor;
+    }
+    afterEach(() => {
+        editor?.destroy();
+    });
+    /** 클립보드 타입 → 값 맵으로 붙여넣기를 흉내 낸다. 핸들러는 getData 만 쓴다. */
+    function paste(data) {
+        const event = {
+            clipboardData: { getData: (type) => data[type] ?? "" }
+        };
+        return (editor.view.someProp("handlePaste", (f) => f(editor.view, event, Slice.empty)) ?? false);
+    }
+    function hasCodeBlock() {
+        return (editor.getJSON().content ?? []).some((node) => node.type === "codeBlock");
+    }
+    it("깨진 JSON 메타데이터가 실려도 던지지 않는다", () => {
+        createEditor();
+        let handled = true;
+        expect(() => {
+            handled = paste({
+                "vscode-editor-data": "{broken json",
+                "text/plain": "print(1)"
+            });
+        }).not.toThrow();
+        expect(handled).toBe(false);
+        expect(hasCodeBlock()).toBe(false);
+    });
+    it("mode 가 문자열이 아니면 코드블록을 만들지 않는다", () => {
+        createEditor();
+        expect(paste({ "vscode-editor-data": '{"mode":42}', "text/plain": "x" })).toBe(false);
+        expect(paste({ "vscode-editor-data": "null", "text/plain": "x" })).toBe(false);
+        expect(paste({ "vscode-editor-data": '"python"', "text/plain": "x" })).toBe(false);
+        expect(hasCodeBlock()).toBe(false);
+    });
+    it("정상 메타데이터는 그대로 코드블록이 된다 — 가드가 동작을 바꾸지 않는다", () => {
+        createEditor();
+        const handled = paste({
+            "vscode-editor-data": '{"mode":"python"}',
+            "text/plain": "print(1)"
+        });
+        expect(handled).toBe(true);
+        const block = (editor.getJSON().content ?? []).find((node) => node.type === "codeBlock");
+        expect(block?.attrs?.language).toBe("python");
+    });
+    it("메타데이터가 없으면 업스트림 판단(언어 없음 → 미처리)에 맡긴다", () => {
+        createEditor();
+        expect(paste({ "text/plain": "plain text" })).toBe(false);
+        expect(hasCodeBlock()).toBe(false);
+    });
+    it("handlePaste 없는 플러그인은 정체 그대로 돌려준다", () => {
+        const plain = new Plugin({});
+        expect(guardVSCodePaste(plain)).toBe(plain);
+    });
+});

package/dist/utils/media-size.d.ts

@@ -0,0 +1,29 @@
+/**
+ * 미디어 블록(영상·이미지)의 크기·정렬 속성 정규화.
+ *
+ * main 정올 `plugin/resize/index.ts` 의 `normalize*` 무리를 필요한 만큼만 떼어 재작성했다.
+ * 원칙은 이미지 폭(`ResizableImage`)과 같다 — **파싱은 관대하게, 쓰기는 좁게.**
+ * 읽을 때는 `420`·`420px`·`16:9`·`16/9`·`1.78` 을 다 받고, 저장은 언제나 한 가지 꼴이다:
+ * 높이는 단위 없는 px 정수, 비율은 `W:H` 문자열, 정렬은 `left|center|right`.
+ *
+ * ⚠️ **인라인 `style` 로 저장하지 않는 이유**(사고 이력): 살균기가 `img` 의 `style` 을
+ * 지워서 정적 렌더와 에디터의 크기가 어긋난다. 크기·정렬은 전부 **속성**으로 간다.
+ */
+export type MediaAlign = "left" | "center" | "right";
+/** `left`·`center`·`right` 만 통과. 대소문자·여백은 눈감아 준다. */
+export declare function normalizeMediaAlign(value: unknown): MediaAlign | null;
+/**
+ * 어떤 꼴로 들어오든 단위 없는 px 정수 높이로 만든다. 못 읽으면 `null`.
+ * `%`·`auto` 는 버린다 — 높이를 %로 저장하면 기준이 없어 어디서나 다르게 풀린다.
+ */
+export declare function normalizeMediaHeight(value: unknown): number | null;
+/**
+ * 비율을 정준형 `W:H` 문자열로 만든다. `16:9`·`16/9`·`1.78` 을 받고, 숫자 하나면
+ * `W:1` 꼴로 세운다. 못 읽으면 `null`.
+ */
+export declare function normalizeMediaRatio(value: unknown): string | null;
+/** `W:H` → 숫자 비율(W/H). CSS `aspect-ratio` 계산·비교용. */
+export declare function mediaRatioValue(value: unknown): number | null;
+/** `16:9` → `16 / 9` — CSS `aspect-ratio` 값 꼴. */
+export declare function mediaRatioCss(value: unknown): string | null;
+//# sourceMappingURL=media-size.d.ts.map

package/dist/utils/media-size.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"media-size.d.ts","sourceRoot":"","sources":["../../src/utils/media-size.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;GAUG;AAEH,MAAM,MAAM,UAAU,GAAG,MAAM,GAAG,QAAQ,GAAG,OAAO,CAAC;AAIrD,qDAAqD;AACrD,wBAAgB,mBAAmB,CAAC,KAAK,EAAE,OAAO,GAAG,UAAU,GAAG,IAAI,CAMrE;AAED;;;GAGG;AACH,wBAAgB,oBAAoB,CAAC,KAAK,EAAE,OAAO,GAAG,MAAM,GAAG,IAAI,CAYlE;AAED;;;GAGG;AACH,wBAAgB,mBAAmB,CAAC,KAAK,EAAE,OAAO,GAAG,MAAM,GAAG,IAAI,CAkBjE;AAED,qDAAqD;AACrD,wBAAgB,eAAe,CAAC,KAAK,EAAE,OAAO,GAAG,MAAM,GAAG,IAAI,CAM7D;AAED,kDAAkD;AAClD,wBAAgB,aAAa,CAAC,KAAK,EAAE,OAAO,GAAG,MAAM,GAAG,IAAI,CAI3D"}

package/dist/utils/media-size.js

@@ -0,0 +1,90 @@
+/**
+ * 미디어 블록(영상·이미지)의 크기·정렬 속성 정규화.
+ *
+ * main 정올 `plugin/resize/index.ts` 의 `normalize*` 무리를 필요한 만큼만 떼어 재작성했다.
+ * 원칙은 이미지 폭(`ResizableImage`)과 같다 — **파싱은 관대하게, 쓰기는 좁게.**
+ * 읽을 때는 `420`·`420px`·`16:9`·`16/9`·`1.78` 을 다 받고, 저장은 언제나 한 가지 꼴이다:
+ * 높이는 단위 없는 px 정수, 비율은 `W:H` 문자열, 정렬은 `left|center|right`.
+ *
+ * ⚠️ **인라인 `style` 로 저장하지 않는 이유**(사고 이력): 살균기가 `img` 의 `style` 을
+ * 지워서 정적 렌더와 에디터의 크기가 어긋난다. 크기·정렬은 전부 **속성**으로 간다.
+ */
+const ALIGN_VALUES = ["left", "center", "right"];
+/** `left`·`center`·`right` 만 통과. 대소문자·여백은 눈감아 준다. */
+export function normalizeMediaAlign(value) {
+    if (typeof value !== "string")
+        return null;
+    const normalized = value.trim().toLowerCase();
+    return ALIGN_VALUES.includes(normalized)
+        ? normalized
+        : null;
+}
+/**
+ * 어떤 꼴로 들어오든 단위 없는 px 정수 높이로 만든다. 못 읽으면 `null`.
+ * `%`·`auto` 는 버린다 — 높이를 %로 저장하면 기준이 없어 어디서나 다르게 풀린다.
+ */
+export function normalizeMediaHeight(value) {
+    if (value == null)
+        return null;
+    if (typeof value === "number") {
+        return Number.isFinite(value) && value > 0 ? Math.round(value) : null;
+    }
+    const raw = String(value).trim();
+    if (!raw)
+        return null;
+    const m = /^(\d+(?:\.\d+)?)(px)?$/i.exec(raw);
+    if (!m)
+        return null;
+    const n = Number.parseFloat(m[1]);
+    if (!Number.isFinite(n) || n <= 0)
+        return null;
+    return Math.round(n);
+}
+/**
+ * 비율을 정준형 `W:H` 문자열로 만든다. `16:9`·`16/9`·`1.78` 을 받고, 숫자 하나면
+ * `W:1` 꼴로 세운다. 못 읽으면 `null`.
+ */
+export function normalizeMediaRatio(value) {
+    if (typeof value === "number") {
+        if (!Number.isFinite(value) || value <= 0)
+            return null;
+        return `${trimDecimal(value)}:1`;
+    }
+    if (typeof value !== "string")
+        return null;
+    const trimmed = value.trim();
+    if (!trimmed)
+        return null;
+    const pair = /^([0-9]+(?:\.[0-9]+)?)\s*[:/]\s*([0-9]+(?:\.[0-9]+)?)$/.exec(trimmed);
+    if (pair) {
+        const w = Number.parseFloat(pair[1]);
+        const h = Number.parseFloat(pair[2]);
+        if (!Number.isFinite(w) || !Number.isFinite(h) || w <= 0 || h <= 0)
+            return null;
+        return `${trimDecimal(w)}:${trimDecimal(h)}`;
+    }
+    const single = Number.parseFloat(trimmed);
+    if (!Number.isFinite(single) || single <= 0)
+        return null;
+    return `${trimDecimal(single)}:1`;
+}
+/** `W:H` → 숫자 비율(W/H). CSS `aspect-ratio` 계산·비교용. */
+export function mediaRatioValue(value) {
+    const canonical = normalizeMediaRatio(value);
+    if (!canonical)
+        return null;
+    const [w, h] = canonical.split(":").map(Number.parseFloat);
+    if (!Number.isFinite(w) || !Number.isFinite(h) || h <= 0)
+        return null;
+    return w / h;
+}
+/** `16:9` → `16 / 9` — CSS `aspect-ratio` 값 꼴. */
+export function mediaRatioCss(value) {
+    const canonical = normalizeMediaRatio(value);
+    if (!canonical)
+        return null;
+    return canonical.replace(":", " / ");
+}
+function trimDecimal(value) {
+    return String(Number(value.toFixed(4)));
+}

package/dist/utils/resize.d.ts

@@ -36,6 +36,18 @@ export interface AttachResizeOptions {
     label?: string;
     /** 저장 형식. 기본은 `'240px'` 같은 px 문자열. */
     format?: (value: number) => string;
+    /**
+     * 손잡이를 붙일 부모. 기본은 `dom` 자신. **크기를 먹는 요소와 손잡이가 사는 요소를
+     * 갈라야 할 때** 쓴다 — 영상의 비율 박스는 `overflow:hidden` 이라 밖 12px 을 침범하는
+     * 손잡이가 잘리므로, 크기는 박스에 먹이고 손잡이는 래퍼에 둔다.
+     */
+    handleParent?: HTMLElement;
+    /**
+     * 드래그 커밋 때 저장할 속성 일습. 기본은 `{ ...attrs, [attr]: format(v) }`.
+     * 한 번의 커밋으로 **여러 속성을 함께** 바꿔야 할 때 쓴다 — 높이 드래그가 비율
+     * 프리셋을 풀거나(`ratio: null`), `TiptapMidibus` 가 `rawAttrs` 사본을 맞추는 자리.
+     */
+    buildAttrs?: (node: ProseMirrorNode, value: number) => Record<string, unknown>;
 }
 export declare function attachResize(options: AttachResizeOptions): () => void;
 //# sourceMappingURL=resize.d.ts.map

package/dist/utils/resize.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"resize.d.ts","sourceRoot":"","sources":["../../src/utils/resize.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,MAAM,EAAE,MAAM,cAAc,CAAC;AAC3C,OAAO,KAAK,EAAE,IAAI,IAAI,eAAe,EAAE,MAAM,kBAAkB,CAAC;AAEhE;;;;;;;;;;;;;;;;;GAiBG;AAEH,MAAM,MAAM,UAAU,GAAG,GAAG,GAAG,GAAG,CAAC;AAEnC,MAAM,WAAW,mBAAmB;IACnC,uCAAuC;IACvC,GAAG,EAAE,WAAW,CAAC;IACjB,MAAM,EAAE,MAAM,CAAC;IACf,MAAM,EAAE,MAAM,MAAM,GAAG,SAAS,CAAC;IACjC,mDAAmD;IACnD,OAAO,EAAE,MAAM,eAAe,CAAC;IAC/B,qCAAqC;IACrC,IAAI,CAAC,EAAE,UAAU,CAAC;IAClB,sDAAsD;IACtD,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,kCAAkC;IAClC,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,sCAAsC;IACtC,MAAM,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,MAAM,CAAC;CACnC;AA4BD,wBAAgB,YAAY,CAAC,OAAO,EAAE,mBAAmB,GAAG,MAAM,IAAI,CAiIrE"}
+{"version":3,"file":"resize.d.ts","sourceRoot":"","sources":["../../src/utils/resize.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,MAAM,EAAE,MAAM,cAAc,CAAC;AAC3C,OAAO,KAAK,EAAE,IAAI,IAAI,eAAe,EAAE,MAAM,kBAAkB,CAAC;AAEhE;;;;;;;;;;;;;;;;;GAiBG;AAEH,MAAM,MAAM,UAAU,GAAG,GAAG,GAAG,GAAG,CAAC;AAEnC,MAAM,WAAW,mBAAmB;IACnC,uCAAuC;IACvC,GAAG,EAAE,WAAW,CAAC;IACjB,MAAM,EAAE,MAAM,CAAC;IACf,MAAM,EAAE,MAAM,MAAM,GAAG,SAAS,CAAC;IACjC,mDAAmD;IACnD,OAAO,EAAE,MAAM,eAAe,CAAC;IAC/B,qCAAqC;IACrC,IAAI,CAAC,EAAE,UAAU,CAAC;IAClB,sDAAsD;IACtD,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,kCAAkC;IAClC,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,sCAAsC;IACtC,MAAM,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,MAAM,CAAC;IACnC;;;;OAIG;IACH,YAAY,CAAC,EAAE,WAAW,CAAC;IAC3B;;;;OAIG;IACH,UAAU,CAAC,EAAE,CAAC,IAAI,EAAE,eAAe,EAAE,KAAK,EAAE,MAAM,KAAK,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAAC;CAC/E;AA4BD,wBAAgB,YAAY,CAAC,OAAO,EAAE,mBAAmB,GAAG,MAAM,IAAI,CA+HrE"}

package/dist/utils/resize.js

@@ -94,10 +94,10 @@ export function attachResize(options) {
         // ⚠️ `getNode()` — 클로저가 잡아 둔 낡은 노드를 쓰면 리사이즈가 그 사이의 다른
         //    속성 변경을 되돌린다(복붙 시절의 버그).
         const node = getNode();
-        editor.view.dispatch(editor.view.state.tr.setNodeMarkup(pos, undefined, {
-            ...node.attrs,
-            [attr]: format(parsed)
-        }));
+        const nextAttrs = options.buildAttrs
+            ? options.buildAttrs(node, parsed)
+            : { ...node.attrs, [attr]: format(parsed) };
+        editor.view.dispatch(editor.view.state.tr.setNodeMarkup(pos, undefined, nextAttrs));
     };
     const attachWindow = () => {
         window.addEventListener("pointermove", onPointerMove);
@@ -125,7 +125,7 @@ export function attachResize(options) {
     handle.addEventListener("mouseenter", onEnter);
     handle.addEventListener("mouseleave", onLeave);
     handle.addEventListener("pointerdown", onPointerDown);
-    dom.appendChild(handle);
+    (options.handleParent ?? dom).appendChild(handle);
     return () => {
         handle.removeEventListener("mouseenter", onEnter);
         handle.removeEventListener("mouseleave", onLeave);

package/dist/utils/sanitize.d.ts

@@ -1,4 +1,6 @@
 export declare function sanitizeHtml(html: string): string;
+/** 저장 직전 HTML 에서 업로드 스켈레톤을 걷어낸다. 없으면 원본 그대로. */
+export declare function stripUploadSkeletonHtml(html: string): string;
 /**
  * 레거시 TipTap v2 커스텀 태그를 현재 형식으로 변환.
  * 에디터 content 로드 전, 또는 게시물 렌더링 전에 호출.

package/dist/utils/sanitize.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"sanitize.d.ts","sourceRoot":"","sources":["../../src/utils/sanitize.ts"],"names":[],"mappings":"AAyIA,wBAAgB,YAAY,CAAC,IAAI,EAAE,MAAM,GAAG,MAAM,CAoBjD;AA6BD;;;;GAIG;AACH,wBAAgB,mBAAmB,CAAC,IAAI,EAAE,MAAM,GAAG,MAAM,CA2ExD;AAED,wBAAgB,kBAAkB,CAAC,IAAI,EAAE,MAAM,EAAE,MAAM,SAAM,GAAG,MAAM,CAWrE"}
+{"version":3,"file":"sanitize.d.ts","sourceRoot":"","sources":["../../src/utils/sanitize.ts"],"names":[],"mappings":"AAqJA,wBAAgB,YAAY,CAAC,IAAI,EAAE,MAAM,GAAG,MAAM,CAoBjD;AAqCD,gDAAgD;AAChD,wBAAgB,uBAAuB,CAAC,IAAI,EAAE,MAAM,GAAG,MAAM,CAG5D;AAED;;;;GAIG;AACH,wBAAgB,mBAAmB,CAAC,IAAI,EAAE,MAAM,GAAG,MAAM,CAwExD;AAED,wBAAgB,kBAAkB,CAAC,IAAI,EAAE,MAAM,EAAE,MAAM,SAAM,GAAG,MAAM,CAWrE"}

package/dist/utils/sanitize.js

@@ -57,7 +57,12 @@ function isAllowedIframeSrc(value) {
 }
 const ALLOWED_ATTRS = {
     a: new Set(["href", "title", "target", "rel"]),
-    img: new Set(["src", "alt", "width", "height"]),
+    // `data-align` 은 미디어 툴바의 좌/중/우 정렬(`ResizableImage`). `style` 로 저장하면
+    // 여기서 지워져 왕복이 어긋나므로 속성으로 저장하고, 그 이름을 여기 허용한다.
+    img: new Set(["src", "alt", "width", "height", "data-align"]),
+    // 순서목록 마커(`OrderedListMarker`). `type` 은 마커 종류(1·a·A·i·I·kors·korc),
+    // `start` 는 시작 번호 — 지워지면 `c.` 로 시작한 목록이 `a.` 부터 다시 세는 것처럼 보인다.
+    ol: new Set(["start", "type"]),
     table: new Set(["style"]),
     col: new Set(["style", "width"]),
     td: new Set(["colspan", "rowspan", "colwidth", "style"]),
@@ -78,9 +83,16 @@ const ALLOWED_ATTRS = {
         "data-file-size",
         "data-mbus-src",
         "data-mbus-width",
+        // 미디어 툴바·높이 드래그가 저장하는 크기·정렬(`MbusVideo`).
+        "data-mbus-height",
+        "data-mbus-ratio",
+        "data-mbus-align",
         // 유튜브·Vimeo 등 바깥 영상(`VideoEmbed`). mbus 와 **다른 이름**을 쓴다.
         "data-video-src",
         "data-video-width",
+        "data-video-height",
+        "data-video-ratio",
+        "data-video-align",
         "data-card-title",
         "data-card-background",
         "data-card-height",
@@ -176,6 +188,19 @@ function sanitizeAttributes(tag, attrString) {
     }
     return result.join("");
 }
+/*
+ * 업로드 스켈레톤(`extensions/UploadSkeleton`)의 직렬화 태그. 스켈레톤은 "업로드 중"
+ * 이라는 화면 상태지 내용이 아니라서 **저장 HTML 에 남으면 안 된다** — 이 패턴 하나를
+ * 내보내기(`stripUploadSkeletonHtml`)와 읽기(`transformLegacyHtml`)가 같이 쓴다.
+ * 태그 이름은 그쪽 `UPLOAD_SKELETON_NODE` 와 짝이다.
+ */
+const UPLOAD_SKELETON_PATTERN = /<tiptap-upload-skeleton[^>]*>(?:<\/tiptap-upload-skeleton>)?/gi;
+/** 저장 직전 HTML 에서 업로드 스켈레톤을 걷어낸다. 없으면 원본 그대로. */
+export function stripUploadSkeletonHtml(html) {
+    if (!html || !html.includes("<tiptap-upload-skeleton"))
+        return html;
+    return html.replace(UPLOAD_SKELETON_PATTERN, "");
+}
 /**
  * 레거시 TipTap v2 커스텀 태그를 현재 형식으로 변환.
  * 에디터 content 로드 전, 또는 게시물 렌더링 전에 호출.
@@ -233,8 +258,8 @@ export function transformLegacyHtml(html) {
          * prod 에디터가 그 형식을 몰라 단이 통째로 사라진다. 손해를 반대로 옮길 뿐이다.
          * 지금은 `LegacyBlock` 이 원본 마크업 그대로 품고 되쓴다(우선순위 100).
          */
-        // <tiptap-upload-skeleton ...> 제거
-        .replace(/<tiptap-upload-skeleton[^>]*>(?:<\/tiptap-upload-skeleton>)?/gi, ""));
+        // <tiptap-upload-skeleton ...> 제거 — 위 `UPLOAD_SKELETON_PATTERN` 하나로 관리
+        .replace(UPLOAD_SKELETON_PATTERN, ""));
 }
 export function stripHtmlToExcerpt(html, maxLen = 200) {
     const text = String(html || "")

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@teriusu/rich-editor",
-  "version": "0.10.8",
+  "version": "0.11.0",
   "description": "TipTap 기반 Notion-style 리치 텍스트 에디터 (Svelte)",
   "type": "module",
   "svelte": "./dist/index.js",
@@ -16,6 +16,10 @@
       "svelte": "./dist/toolbars.js",
       "default": "./dist/toolbars.js"
     },
+    "./static": {
+      "types": "./dist/static/index.d.ts",
+      "default": "./dist/static/index.js"
+    },
     "./lowlight": {
       "types": "./dist/utils/lowlight.d.ts",
       "default": "./dist/utils/lowlight.js"
@@ -52,6 +56,7 @@
     "@tiptap/extension-highlight": "^3.20.4",
     "@tiptap/extension-image": "^3.20.4",
     "@tiptap/extension-link": "^3.20.4",
+    "@tiptap/extension-list": "3.22.2",
     "@tiptap/extension-placeholder": "^3.20.4",
     "@tiptap/extension-subscript": "^3.21.0",
     "@tiptap/extension-superscript": "^3.21.0",
@@ -68,6 +73,8 @@
     "@tiptap/pm": "^3.20.4",
     "@tiptap/starter-kit": "^3.22.0",
     "clsx": "^2.1.1",
+    "emojis-keywords": "2.0.0",
+    "emojis-list": "3.0.0",
     "highlight.js": "^11.11.1",
     "hls.js": "^1.6.16",
     "katex": "^0.16.45",