@teriusu/rich-editor 0.10.8 → 0.11.0

package/dist/extensions/TiptapMidibus.js

@@ -27,6 +27,9 @@
  * 자리표시자에는 플레이어 새 탭 링크를 둔다 — 비로그인 prod 가 쓰는 것과 같은 주소다.
  */
 import { Node, mergeAttributes } from "@tiptap/core";
+import { attachResize } from "../utils/resize";
+import { normalizeMediaHeight } from "../utils/media-size";
+import { getEditorTranslator } from "../i18n";
 /**
  * ⚠️ `on*` 만 걸러내고 나머지는 손대지 않는다. prod 가 `data-resize-*`·`data-bubble-menu`
  * 같은 것을 붙여 저장해도 여기서 살아남아야 왕복이 성립한다 — 아는 속성만 남기면
@@ -97,7 +100,8 @@ export const TiptapMidibus = Node.create({
         ];
     },
     addNodeView() {
-        return ({ node, editor }) => {
+        return ({ node, editor, getPos }) => {
+            const t = getEditorTranslator(editor);
             const dom = document.createElement("div");
             dom.setAttribute("data-type", "tiptapMidibus");
             dom.setAttribute("data-node-view-wrapper", "");
@@ -137,20 +141,60 @@ export const TiptapMidibus = Node.create({
             const videoId = String(node.attrs.id ?? "").trim();
             const startRaw = Number(node.attrs.start ?? 0);
             const start = Number.isFinite(startRaw) ? Math.max(0, Math.floor(startRaw)) : 0;
+            /*
+             * 자리표시자도 저장된 `height` 를 따른다(prod 기본 600). `padding-top` 대신
+             * `aspect-ratio` 를 쓰는 이유는 `VideoEmbed` 주석 참조 — 높이 드래그가 인라인
+             * `height` 하나로 먹게 하기 위해서다.
+             */
             const aspect = document.createElement("div");
             aspect.style.cssText =
-                "position:relative;width:100%;padding-top:56.25%;background:#0b1020;border-radius:8px;overflow:hidden;";
+                "position:relative;width:100%;aspect-ratio:16 / 9;background:#0b1020;border-radius:8px;overflow:hidden;";
+            const height = normalizeMediaHeight(node.attrs.height);
+            if (height != null) {
+                aspect.style.height = `${height}px`;
+                aspect.style.removeProperty("aspect-ratio");
+            }
             dom.appendChild(aspect);
+            /*
+             * 높이 드래그(main 은 `tiptap-midibus` 에 정확히 이것 하나만 준다 — 비율·정렬
+             * 칩 없음). ⚠️ 이 노드는 `renderHTML` 이 `rawAttrs` 를 그대로 되뱉으므로,
+             * `height` 만 바꾸면 저장본에는 **옛 높이가 남는다.** 커밋 때 `rawAttrs` 사본의
+             * `height` 도 함께 맞춘다 — 다른 속성·순서는 그대로라 바이트 보존이 유지된다.
+             */
+            let detachResize = null;
+            if (editor.isEditable) {
+                detachResize = attachResize({
+                    dom: aspect,
+                    handleParent: dom,
+                    editor,
+                    getPos: () => (typeof getPos === "function" ? getPos() : undefined),
+                    getNode: () => node,
+                    axis: "y",
+                    attr: "height",
+                    min: 160,
+                    max: 1600,
+                    label: t("lectureResizeHeight"),
+                    buildAttrs: (current, value) => {
+                        const nextHeight = String(Math.round(value));
+                        const raw = current.attrs.rawAttrs;
+                        return {
+                            ...current.attrs,
+                            height: nextHeight,
+                            rawAttrs: raw ? { ...raw, height: nextHeight } : raw
+                        };
+                    }
+                });
+            }
             const poster = document.createElement("div");
             poster.style.cssText =
                 "position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;padding:16px;text-align:center;color:#c7cbd4;";
             aspect.appendChild(poster);
             const label = document.createElement("span");
-            label.textContent = "강의 영상";
+            label.textContent = t("lectureVideo");
             label.style.cssText = "font-size:13px;font-weight:600;line-height:1.5;";
             poster.appendChild(label);
             const hint = document.createElement("span");
-            hint.textContent = videoId ? videoId : "영상 주소가 비어 있습니다";
+            hint.textContent = videoId ? videoId : t("lectureEmptySrc");
             hint.style.cssText = "font-size:12px;line-height:1.5;opacity:0.7;word-break:break-all;";
             poster.appendChild(hint);
             if (videoId) {
@@ -158,12 +202,22 @@ export const TiptapMidibus = Node.create({
                 open.href = `${this.options.playerBaseUrl}/${videoId}?start=${start}&volume=50`;
                 open.target = "_blank";
                 open.rel = "noopener noreferrer";
-                open.textContent = "새 탭에서 보기";
+                open.textContent = t("openInNewTab");
                 open.style.cssText =
                     "font-size:13px;font-weight:600;color:#fff;background:rgba(255,255,255,0.16);border-radius:6px;padding:6px 14px;text-decoration:none;";
                 poster.appendChild(open);
             }
-            return { dom };
+            /*
+             * `update` 는 두지 않는다 — 속성이 바뀌면 노드뷰를 새로 세운다(렌더러 주입
+             * 경로와 같은 이유). 그래서 위 `getNode` 가 클로저의 `node` 를 그대로 써도
+             * 낡을 새가 없다: 낡아지는 순간 이 뷰 자체가 버려진다.
+             */
+            return {
+                dom,
+                destroy: () => {
+                    detachResize?.();
+                }
+            };
         };
     },
     addCommands() {

package/dist/extensions/UploadSkeleton.d.ts

@@ -0,0 +1,61 @@
+/**
+ * 업로드 자리표시자 — 업로드가 도는 동안 **삽입 지점에** 서는 회색 스켈레톤 블록.
+ * (main 정올 `plugin/upload/skeleton` 참조 — Svelte NodeView 를 vanilla 로 재작성.)
+ *
+ * 전체 화면 오버레이(`업로드 중...`)와 달리 문서 안 제자리에 서므로, 업로드가 도는
+ * 동안에도 커서를 옮기고 다른 곳을 편집할 수 있다. 흐름은 세 동작이 전부다:
+ *
+ *   1. `insertUploadSkeleton(editor, { kind })` → 스켈레톤이 서고 핸들을 돌려받는다
+ *   2. 성공: `handle.replaceWith({ type: "image", attrs: { src } })` — 그 자리가 실제 노드로
+ *   3. 실패: `handle.remove()` — 흔적 없이 사라진다
+ *
+ * 핸들은 위치가 아니라 **`uploadId` 로 노드를 다시 찾는다.** 업로드가 도는 몇 초 사이
+ * 사용자가 위쪽에 글을 쓰면 위치가 밀리는데, id 로 찾으면 어디로 밀렸든 맞는 자리를
+ * 바꾼다. 그 사이 사용자가 스켈레톤을 지웠으면 조용히 `false` 를 돌려준다.
+ *
+ * ⚠️ **저장 HTML 에 남으면 안 된다.** 스켈레톤은 "업로드 중" 이라는 화면 상태지 내용이
+ * 아니다. 세 겹으로 막는다 — ① `TipTapEditor` 가 `onChange` 로 내보내기 전에
+ * `stripUploadSkeletonHtml` 로 걷어내고, ② 문서를 열 때 `transformLegacyHtml` 이 같은
+ * 태그를 지우며(과거에 새어 나간 것 정리), ③ 정적 렌더의 `sanitizeHtml` 허용 목록에
+ * 이 태그가 없다. 셋 다 `utils/sanitize.ts` 와 태그 이름(`tiptap-upload-skeleton`)으로
+ * 정합을 맞춘다 — 이름을 바꾸면 그쪽 규칙도 함께 바꿔야 한다.
+ */
+import { Node, type Editor, type JSONContent } from "@tiptap/core";
+/** 노드 이름이자 직렬화 태그 이름. `utils/sanitize.ts` 의 제거 규칙과 짝이다. */
+export declare const UPLOAD_SKELETON_NODE = "tiptap-upload-skeleton";
+/** 실제 노드가 설 때의 대략적 높이 — 교체 순간 문서가 덜 출렁이게 한다. */
+declare const DEFAULT_HEIGHT: {
+    readonly image: 220;
+    readonly file: 56;
+    readonly pdf: 420;
+    readonly embed: 420;
+    readonly block: 180;
+};
+export type UploadSkeletonKind = keyof typeof DEFAULT_HEIGHT;
+export interface InsertUploadSkeletonOptions {
+    kind?: UploadSkeletonKind;
+    height?: number;
+    /** 삽입 위치. 생략하면 현재 선택 위치. */
+    at?: number;
+    select?: boolean;
+    /** 스켈레톤 뒤에 빈 문단을 하나 심는다 — 커서가 이어서 쓸 자리. 기본 켬. */
+    insertParagraph?: boolean;
+}
+interface ReplaceOptions {
+    select?: boolean;
+}
+type EditorLike = Pick<Editor, "view">;
+export interface UploadSkeletonHandle {
+    id: string;
+    exists: () => boolean;
+    replaceWith: (content: JSONContent, options?: ReplaceOptions) => boolean;
+    remove: () => boolean;
+}
+/**
+ * 스켈레톤을 세우고 교체/제거 핸들을 돌려준다. 스키마에 노드가 없으면(확장 미등록)
+ * `null` — 호출부는 그때만 다른 진행 표시로 물러난다.
+ */
+export declare function insertUploadSkeleton(editor: EditorLike, { kind, height, at, select, insertParagraph }?: InsertUploadSkeletonOptions): UploadSkeletonHandle | null;
+export declare const UploadSkeleton: Node<any, any>;
+export {};
+//# sourceMappingURL=UploadSkeleton.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"UploadSkeleton.d.ts","sourceRoot":"","sources":["../../src/extensions/UploadSkeleton.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;;GAqBG;AACH,OAAO,EAAE,IAAI,EAAmB,KAAK,MAAM,EAAE,KAAK,WAAW,EAAE,MAAM,cAAc,CAAC;AAIpF,2DAA2D;AAC3D,eAAO,MAAM,oBAAoB,2BAA2B,CAAC;AAE7D,gDAAgD;AAChD,QAAA,MAAM,cAAc;;;;;;CAMV,CAAC;AAKX,MAAM,MAAM,kBAAkB,GAAG,MAAM,OAAO,cAAc,CAAC;AAE7D,MAAM,WAAW,2BAA2B;IAC3C,IAAI,CAAC,EAAE,kBAAkB,CAAC;IAC1B,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,4BAA4B;IAC5B,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,iDAAiD;IACjD,eAAe,CAAC,EAAE,OAAO,CAAC;CAC1B;AAED,UAAU,cAAc;IACvB,MAAM,CAAC,EAAE,OAAO,CAAC;CACjB;AAED,KAAK,UAAU,GAAG,IAAI,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;AAEvC,MAAM,WAAW,oBAAoB;IACpC,EAAE,EAAE,MAAM,CAAC;IACX,MAAM,EAAE,MAAM,OAAO,CAAC;IACtB,WAAW,EAAE,CAAC,OAAO,EAAE,WAAW,EAAE,OAAO,CAAC,EAAE,cAAc,KAAK,OAAO,CAAC;IACzE,MAAM,EAAE,MAAM,OAAO,CAAC;CACtB;AAiCD;;;GAGG;AACH,wBAAgB,oBAAoB,CACnC,MAAM,EAAE,UAAU,EAClB,EACC,IAAc,EACd,MAA6B,EAC7B,EAAE,EACF,MAAa,EACb,eAAsB,EACtB,GAAE,2BAAgC,GACjC,oBAAoB,GAAG,IAAI,CA+F7B;AAED,eAAO,MAAM,cAAc,gBA2FzB,CAAC"}

package/dist/extensions/UploadSkeleton.js

@@ -0,0 +1,233 @@
+/**
+ * 업로드 자리표시자 — 업로드가 도는 동안 **삽입 지점에** 서는 회색 스켈레톤 블록.
+ * (main 정올 `plugin/upload/skeleton` 참조 — Svelte NodeView 를 vanilla 로 재작성.)
+ *
+ * 전체 화면 오버레이(`업로드 중...`)와 달리 문서 안 제자리에 서므로, 업로드가 도는
+ * 동안에도 커서를 옮기고 다른 곳을 편집할 수 있다. 흐름은 세 동작이 전부다:
+ *
+ *   1. `insertUploadSkeleton(editor, { kind })` → 스켈레톤이 서고 핸들을 돌려받는다
+ *   2. 성공: `handle.replaceWith({ type: "image", attrs: { src } })` — 그 자리가 실제 노드로
+ *   3. 실패: `handle.remove()` — 흔적 없이 사라진다
+ *
+ * 핸들은 위치가 아니라 **`uploadId` 로 노드를 다시 찾는다.** 업로드가 도는 몇 초 사이
+ * 사용자가 위쪽에 글을 쓰면 위치가 밀리는데, id 로 찾으면 어디로 밀렸든 맞는 자리를
+ * 바꾼다. 그 사이 사용자가 스켈레톤을 지웠으면 조용히 `false` 를 돌려준다.
+ *
+ * ⚠️ **저장 HTML 에 남으면 안 된다.** 스켈레톤은 "업로드 중" 이라는 화면 상태지 내용이
+ * 아니다. 세 겹으로 막는다 — ① `TipTapEditor` 가 `onChange` 로 내보내기 전에
+ * `stripUploadSkeletonHtml` 로 걷어내고, ② 문서를 열 때 `transformLegacyHtml` 이 같은
+ * 태그를 지우며(과거에 새어 나간 것 정리), ③ 정적 렌더의 `sanitizeHtml` 허용 목록에
+ * 이 태그가 없다. 셋 다 `utils/sanitize.ts` 와 태그 이름(`tiptap-upload-skeleton`)으로
+ * 정합을 맞춘다 — 이름을 바꾸면 그쪽 규칙도 함께 바꿔야 한다.
+ */
+import { Node, mergeAttributes } from "@tiptap/core";
+import { NodeSelection } from "@tiptap/pm/state";
+/** 노드 이름이자 직렬화 태그 이름. `utils/sanitize.ts` 의 제거 규칙과 짝이다. */
+export const UPLOAD_SKELETON_NODE = "tiptap-upload-skeleton";
+/** 실제 노드가 설 때의 대략적 높이 — 교체 순간 문서가 덜 출렁이게 한다. */
+const DEFAULT_HEIGHT = {
+    image: 220,
+    file: 56,
+    pdf: 420,
+    embed: 420,
+    block: 180
+};
+const MIN_HEIGHT = 44;
+const MAX_HEIGHT = 1200;
+function clampHeight(value) {
+    return Math.max(MIN_HEIGHT, Math.min(MAX_HEIGHT, Math.round(value)));
+}
+function findUploadSkeleton(doc, id) {
+    let target = null;
+    doc.descendants((node, pos) => {
+        if (node.type.name !== UPLOAD_SKELETON_NODE)
+            return;
+        if (node.attrs.uploadId !== id)
+            return;
+        target = { pos, node };
+        return false;
+    });
+    return target;
+}
+function tryCreateNodeSelection(doc, pos) {
+    if (pos < 0 || pos > doc.content.size)
+        return null;
+    const node = doc.nodeAt(pos);
+    if (!node || node.type.spec.selectable === false)
+        return null;
+    try {
+        return NodeSelection.create(doc, pos);
+    }
+    catch {
+        return null;
+    }
+}
+/**
+ * 스켈레톤을 세우고 교체/제거 핸들을 돌려준다. 스키마에 노드가 없으면(확장 미등록)
+ * `null` — 호출부는 그때만 다른 진행 표시로 물러난다.
+ */
+export function insertUploadSkeleton(editor, { kind = "block", height = DEFAULT_HEIGHT[kind], at, select = true, insertParagraph = true } = {}) {
+    const getState = () => editor.view.state;
+    const skeletonType = getState().schema.nodes[UPLOAD_SKELETON_NODE];
+    if (!skeletonType)
+        return null;
+    const uploadId = `upload-${Date.now()}-${Math.random().toString(36).slice(2, 10)}`;
+    const node = skeletonType.create({ uploadId, kind, height: clampHeight(height) });
+    const paragraph = getState().schema.nodes.paragraph?.create();
+    const state = getState();
+    const rawPos = Math.max(0, Math.min(at ?? state.selection.from, state.doc.content.size));
+    /*
+     * ⚠️ 문단 한가운데 그대로 꽂으면 replace 맞춤이 문단을 **쪼개서** 빈 문단 부스러기를
+     * 남긴다(`<p></p>` 가 앞에 하나 더 선다 — 제거해도 안 사라지는 흔적). 텍스트블록
+     * 안이면 그 블록의 경계로 옮긴다: 빈 블록이면 앞(그 자리를 차지), 아니면 뒤(쓰던
+     * 문단 다음).
+     */
+    let safePos = rawPos;
+    const $pos = state.doc.resolve(rawPos);
+    if ($pos.depth > 0 && $pos.parent.isTextblock) {
+        safePos = $pos.parent.content.size === 0 ? $pos.before() : $pos.after();
+    }
+    let tr;
+    try {
+        tr = state.tr.insert(safePos, node);
+    }
+    catch {
+        /* 스키마가 이 자리를 거부하면(중첩 구조 등) 세우지 않는다 — 호출부가 물러난다. */
+        return null;
+    }
+    /*
+     * ⚠️ `safePos` 를 그대로 믿으면 안 된다. 커서가 문단 **안**이면 ProseMirror 의 replace
+     * 맞춤이 블록을 문단 밖(앞)으로 밀어 넣어 실제 자리가 어긋난다 — 그 상태로 `safePos`
+     * 기준으로 문단을 심으면 엉뚱한 문단이 쪼개지고, 선택도 스켈레톤을 못 잡는다.
+     * 방금 넣은 노드를 id 로 되찾아 **실제 자리**를 기준으로 삼는다.
+     */
+    const inserted = findUploadSkeleton(tr.doc, uploadId);
+    if (insertParagraph && paragraph && inserted) {
+        tr.insert(inserted.pos + inserted.node.nodeSize, paragraph);
+    }
+    if (select && inserted) {
+        const nodeSelection = tryCreateNodeSelection(tr.doc, inserted.pos);
+        if (nodeSelection)
+            tr.setSelection(nodeSelection);
+    }
+    editor.view.dispatch(tr);
+    return {
+        id: uploadId,
+        exists: () => Boolean(findUploadSkeleton(getState().doc, uploadId)),
+        replaceWith: (content, options = {}) => {
+            const state = getState();
+            const target = findUploadSkeleton(state.doc, uploadId);
+            if (!target)
+                return false;
+            if (!content?.type)
+                return false;
+            let nextNode;
+            try {
+                nextNode = state.schema.nodeFromJSON(content);
+            }
+            catch {
+                return false;
+            }
+            const tr = state.tr.replaceWith(target.pos, target.pos + target.node.nodeSize, nextNode);
+            if (options.select ?? true) {
+                const nodeSelection = tryCreateNodeSelection(tr.doc, target.pos);
+                if (nodeSelection)
+                    tr.setSelection(nodeSelection);
+            }
+            editor.view.dispatch(tr);
+            return true;
+        },
+        remove: () => {
+            const state = getState();
+            const target = findUploadSkeleton(state.doc, uploadId);
+            if (!target)
+                return false;
+            const removeFrom = target.pos;
+            let removeTo = target.pos + target.node.nodeSize;
+            /* 함께 심었던 빈 문단도 걷는다 — 실패했는데 빈 줄만 남으면 티가 난다. */
+            const nextNode = state.doc.nodeAt(removeTo);
+            if (nextNode?.type.name === "paragraph" && nextNode.content.size === 0) {
+                removeTo += nextNode.nodeSize;
+            }
+            editor.view.dispatch(state.tr.deleteRange(removeFrom, removeTo));
+            return true;
+        }
+    };
+}
+export const UploadSkeleton = Node.create({
+    name: UPLOAD_SKELETON_NODE,
+    group: "block",
+    atom: true,
+    draggable: false,
+    selectable: true,
+    addAttributes() {
+        return {
+            uploadId: {
+                default: null,
+                parseHTML: (element) => element.getAttribute("data-upload-id"),
+                renderHTML: (attributes) => attributes.uploadId ? { "data-upload-id": attributes.uploadId } : {}
+            },
+            kind: {
+                default: "block",
+                parseHTML: (element) => element.getAttribute("data-upload-kind") || "block",
+                renderHTML: (attributes) => attributes.kind ? { "data-upload-kind": attributes.kind } : {}
+            },
+            height: {
+                default: DEFAULT_HEIGHT.block,
+                parseHTML: (element) => {
+                    const value = Number.parseInt(element.getAttribute("data-upload-height") || "", 10);
+                    return Number.isFinite(value) ? value : DEFAULT_HEIGHT.block;
+                },
+                renderHTML: (attributes) => {
+                    const raw = Number.parseFloat(String(attributes.height ?? DEFAULT_HEIGHT.block));
+                    const height = Number.isFinite(raw) ? clampHeight(raw) : DEFAULT_HEIGHT.block;
+                    return { "data-upload-height": String(height) };
+                }
+            }
+        };
+    },
+    parseHTML() {
+        return [{ tag: UPLOAD_SKELETON_NODE }];
+    },
+    /*
+     * ⚠️ `renderHTML` 은 빈 커스텀 태그 하나만 내보낸다 — 내용이 없으니 새어 나가도
+     * 화면에 아무것도 못 그리고, `stripUploadSkeletonHtml`(내보내기)·`transformLegacyHtml`
+     * (읽기)·`sanitizeHtml`(정적 렌더) 세 군데가 이 태그를 지운다.
+     */
+    renderHTML({ HTMLAttributes }) {
+        return [UPLOAD_SKELETON_NODE, mergeAttributes(HTMLAttributes)];
+    },
+    addNodeView() {
+        return ({ node }) => {
+            const dom = document.createElement("div");
+            dom.className = "hce-upload-skeleton";
+            dom.setAttribute("data-node-view-wrapper", "");
+            dom.contentEditable = "false";
+            const shine = document.createElement("div");
+            shine.className = "hce-upload-skeleton-shine";
+            dom.appendChild(shine);
+            for (const row of ["top", "mid", "low"]) {
+                const bar = document.createElement("div");
+                bar.className = `hce-upload-skeleton-bar is-${row}`;
+                dom.appendChild(bar);
+            }
+            const apply = (current) => {
+                const rawKind = current.attrs.kind;
+                const kind = typeof rawKind === "string" && rawKind.trim().length ? rawKind : "block";
+                dom.setAttribute("data-kind", kind);
+                const raw = Number.parseFloat(String(current.attrs.height ?? ""));
+                dom.style.height = `${clampHeight(Number.isFinite(raw) ? raw : DEFAULT_HEIGHT.block)}px`;
+            };
+            apply(node);
+            return {
+                dom,
+                update: (updated) => {
+                    if (updated.type.name !== UPLOAD_SKELETON_NODE)
+                        return false;
+                    apply(updated);
+                    return true;
+                }
+            };
+        };
+    }
+});

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

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

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

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

package/dist/extensions/UploadSkeleton.test.js

@@ -0,0 +1,128 @@
+import { describe, it, expect, afterEach } from "vitest";
+import { Editor } from "@tiptap/core";
+import StarterKit from "@tiptap/starter-kit";
+import { NodeSelection } from "@tiptap/pm/state";
+import { UploadSkeleton, insertUploadSkeleton, UPLOAD_SKELETON_NODE } from "./UploadSkeleton";
+import { ResizableImage } from "./ResizableImage";
+import { sanitizeHtml, stripUploadSkeletonHtml, transformLegacyHtml } from "../utils/sanitize";
+/*
+ * 스켈레톤의 계약은 세 가지다 — 서고(insert), 그 자리가 실제 노드로 바뀌고(replaceWith),
+ * 실패하면 흔적 없이 사라진다(remove). 그리고 무슨 일이 있어도 **저장 HTML 에 남지
+ * 않는다.** 여기서는 그 네 가지를 전부 문서 상태로 확인한다.
+ */
+describe("UploadSkeleton", () => {
+    let editor;
+    function createEditor(content = "<p></p>") {
+        editor = new Editor({
+            element: document.createElement("div"),
+            extensions: [StarterKit, UploadSkeleton, ResizableImage.configure({ inline: false })],
+            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("삽입 — 타입별 높이의 스켈레톤이 서고 뒤에 빈 문단이 온다", () => {
+        createEditor("<p>본문</p>");
+        const handle = insertUploadSkeleton(editor, { kind: "image" });
+        expect(handle).not.toBeNull();
+        expect(handle.exists()).toBe(true);
+        const found = findNode(UPLOAD_SKELETON_NODE);
+        expect(found).not.toBeNull();
+        expect(found.node.attrs.kind).toBe("image");
+        expect(found.node.attrs.height).toBe(220);
+        expect(found.node.attrs.uploadId).toBe(handle.id);
+        // 커서가 이어서 쓸 빈 문단이 바로 뒤에 있어야 한다
+        const after = editor.state.doc.nodeAt(found.pos + found.node.nodeSize);
+        expect(after?.type.name).toBe("paragraph");
+        // 스켈레톤이 선택되어 있어야 한다 — 업로드 흐름이 여기서 이어진다
+        expect(editor.state.selection).toBeInstanceOf(NodeSelection);
+    });
+    it("높이는 44–1200 으로 죈다", () => {
+        createEditor();
+        insertUploadSkeleton(editor, { kind: "block", height: 5000 });
+        expect(findNode(UPLOAD_SKELETON_NODE).node.attrs.height).toBe(1200);
+        editor.commands.clearContent();
+        insertUploadSkeleton(editor, { kind: "file", height: 1 });
+        expect(findNode(UPLOAD_SKELETON_NODE).node.attrs.height).toBe(44);
+    });
+    it("replaceWith — 그 자리가 실제 노드로 바뀐다", () => {
+        createEditor("<p>본문</p>");
+        const handle = insertUploadSkeleton(editor, { kind: "image" });
+        expect(handle.replaceWith({ type: "image", attrs: { src: "/a.png" } })).toBe(true);
+        expect(findNode(UPLOAD_SKELETON_NODE)).toBeNull();
+        expect(handle.exists()).toBe(false);
+        const image = findNode("image");
+        expect(image).not.toBeNull();
+        expect(image.node.attrs.src).toBe("/a.png");
+    });
+    it("위쪽을 편집해 자리가 밀려도 id 로 찾아 바꾼다", () => {
+        createEditor("<p>본문</p>");
+        const handle = insertUploadSkeleton(editor, { kind: "image", at: editor.state.doc.content.size });
+        // 업로드가 도는 사이 문서 맨 앞에 글이 들어온다 — 위치가 전부 밀린다
+        editor.commands.insertContentAt(1, "새로 쓴 글");
+        expect(handle.replaceWith({ type: "image", attrs: { src: "/b.png" } })).toBe(true);
+        expect(findNode("image").node.attrs.src).toBe("/b.png");
+        expect(findNode(UPLOAD_SKELETON_NODE)).toBeNull();
+    });
+    it("remove — 함께 심은 빈 문단까지 걷어 원래 문서로 돌아간다", () => {
+        createEditor("<p>본문</p>");
+        const before = editor.getHTML();
+        const handle = insertUploadSkeleton(editor, { kind: "pdf" });
+        expect(handle.remove()).toBe(true);
+        expect(editor.getHTML()).toBe(before);
+    });
+    it("사용자가 스켈레톤을 지웠으면 조용히 실패한다", () => {
+        createEditor("<p>본문</p>");
+        const handle = insertUploadSkeleton(editor, { kind: "file" });
+        editor.commands.clearContent();
+        expect(handle.exists()).toBe(false);
+        expect(handle.replaceWith({ type: "image", attrs: { src: "/c.png" } })).toBe(false);
+        expect(handle.remove()).toBe(false);
+    });
+    it("스키마에 노드가 없으면 null — 호출부가 다른 진행 표시로 물러날 신호", () => {
+        const bare = new Editor({
+            element: document.createElement("div"),
+            extensions: [StarterKit],
+            content: "<p></p>"
+        });
+        expect(insertUploadSkeleton(bare)).toBeNull();
+        bare.destroy();
+    });
+    /*
+     * 영속 금지 — 스켈레톤이 서 있는 채로 저장이 돌더라도, 내보내기(`strip…`)·읽기
+     * (`transformLegacyHtml`)·정적 렌더(`sanitizeHtml`) 어느 길로도 살아남지 못한다.
+     */
+    it("직렬화엔 나오지만 세 관문이 전부 걷어낸다", () => {
+        createEditor("<p>본문</p>");
+        insertUploadSkeleton(editor, { kind: "image" });
+        const html = editor.getHTML();
+        expect(html).toContain("<tiptap-upload-skeleton");
+        for (const cleaned of [
+            stripUploadSkeletonHtml(html),
+            transformLegacyHtml(html),
+            sanitizeHtml(html)
+        ]) {
+            expect(cleaned).not.toContain("tiptap-upload-skeleton");
+            expect(cleaned).toContain("본문");
+        }
+    });
+    it("stripUploadSkeletonHtml 은 닫는 태그 유무를 가리지 않고, 없으면 원본 그대로", () => {
+        expect(stripUploadSkeletonHtml('<tiptap-upload-skeleton data-upload-id="x"></tiptap-upload-skeleton><p>a</p>')).toBe("<p>a</p>");
+        expect(stripUploadSkeletonHtml('<tiptap-upload-skeleton data-upload-id="x"><p>a</p>')).toBe("<p>a</p>");
+        const clean = "<p>스켈레톤 없음</p>";
+        expect(stripUploadSkeletonHtml(clean)).toBe(clean);
+    });
+});

package/dist/extensions/VideoEmbed.d.ts

@@ -20,6 +20,14 @@ declare module "@tiptap/core" {
         };
     }
 }
+/**
+ * 유튜브 주소면 임베드 주소를, 아니면 null 을 돌려준다.
+ *
+ * `toEmbedUrl` 의 유튜브 갈래를 떼어 낸 것 — 붙여넣기 자동 임베드(아래
+ * `addProseMirrorPlugins`)가 **유튜브 판별기로도** 써야 해서다. "변환 결과가 달라졌는가"
+ * 로 어림하면 이미 임베드 꼴인 주소(`youtube.com/embed/ID`)를 놓친다.
+ */
+export declare function youTubeEmbedUrl(raw: string): string | null;
 /**
  * 붙여넣은 주소를 **iframe 에 넣을 수 있는 주소**로 바꾼다.
  *

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

@@ -1 +1 @@
-{"version":3,"file":"VideoEmbed.d.ts","sourceRoot":"","sources":["../../src/extensions/VideoEmbed.ts"],"names":[],"mappings":"AAAA;;;;;;;GAOG;AACH,OAAO,EAAE,IAAI,EAAmB,MAAM,cAAc,CAAC;AAGrD,MAAM,WAAW,iBAAiB;IACjC,cAAc,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAAC;CACxC;AAED,OAAO,QAAQ,cAAc,CAAC;IAC7B,UAAU,QAAQ,CAAC,UAAU;QAC5B,UAAU,EAAE;YACX,aAAa,EAAE,CAAC,KAAK,EAAE;gBAAE,GAAG,EAAE,MAAM,CAAC;gBAAC,KAAK,CAAC,EAAE,MAAM,CAAA;aAAE,KAAK,UAAU,CAAC;SACtE,CAAC;KACF;CACD;AAWD;;;;;;;;;;GAUG;AACH,wBAAgB,UAAU,CAAC,GAAG,EAAE,MAAM,GAAG,MAAM,CAqD9C;AAmBD,eAAO,MAAM,UAAU,8BA0JrB,CAAC"}
+{"version":3,"file":"VideoEmbed.d.ts","sourceRoot":"","sources":["../../src/extensions/VideoEmbed.ts"],"names":[],"mappings":"AAAA;;;;;;;GAOG;AACH,OAAO,EAAE,IAAI,EAAmB,MAAM,cAAc,CAAC;AAWrD,MAAM,WAAW,iBAAiB;IACjC,cAAc,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAAC;CACxC;AAED,OAAO,QAAQ,cAAc,CAAC;IAC7B,UAAU,QAAQ,CAAC,UAAU;QAC5B,UAAU,EAAE;YACX,aAAa,EAAE,CAAC,KAAK,EAAE;gBAAE,GAAG,EAAE,MAAM,CAAC;gBAAC,KAAK,CAAC,EAAE,MAAM,CAAA;aAAE,KAAK,UAAU,CAAC;SACtE,CAAC;KACF;CACD;AAyBD;;;;;;GAMG;AACH,wBAAgB,eAAe,CAAC,GAAG,EAAE,MAAM,GAAG,MAAM,GAAG,IAAI,CAuC1D;AAED;;;;;;;;;;GAUG;AACH,wBAAgB,UAAU,CAAC,GAAG,EAAE,MAAM,GAAG,MAAM,CA2B9C;AAmBD,eAAO,MAAM,UAAU,8BAmSrB,CAAC"}