@teriusu/rich-editor 0.10.4 → 0.10.6

package/dist/components/TipTapEditor.svelte

@@ -192,6 +192,8 @@
   import { MbusVideo } from "../extensions/MbusVideo";
   import { ResizableImage } from "../extensions/ResizableImage";
   import { VideoEmbed } from "../extensions/VideoEmbed";
+  import { TiptapMidibus } from "../extensions/TiptapMidibus";
+  import { LegacyBlock } from "../extensions/LegacyBlock";
   import { CardBlock } from "../extensions/CardBlock";
   import { MathInline, MathDisplay, type MathPrompt } from "../extensions/Math";
   import type { UploadHandler, PromptHandler, ToolbarMode, ToolbarFeature } from "../types";
@@ -673,6 +675,15 @@
         }),
         MbusVideo,
         VideoEmbed,
+        /*
+         * ⚠️ **정올 prod 저장 형식을 잃지 않기 위한 둘.** prod(`@seorii/tiptap`)와 lms 는
+         * 같은 Datastore 를 쓰는데, 여기 없으면 prod 글을 lms 에서 여는 것만으로 해당
+         * 블록이 통째로 증발한다(강의영상 글이 `<p>` 하나만 남은 적이 있다).
+         * `TiptapMidibus` 는 `<tiptap-midibus>` 를, `LegacyBlock` 은 `lite-youtube`·
+         * `div.iframe-wrapper`·`div.tiptap-columns` 를 **원본 그대로** 읽고 되쓴다.
+         */
+        TiptapMidibus,
+        LegacyBlock,
         CardBlock.configure({ promptBackground: onPromptCardBackground ?? null }),
         /*
          * ⚠️ **수학은 여기서 등록한다.** 예전엔 `MathInline`/`MathDisplay` 를 내보내기만 하고

package/dist/components/TipTapEditor.svelte.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"TipTapEditor.svelte.d.ts","sourceRoot":"","sources":["../../src/components/TipTapEditor.svelte.ts"],"names":[],"mappings":"AA6JA,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,QAAQ,CAAC;AA2BtC,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,cAAc,CAAC;AAYjD,OAAO,EAA2B,KAAK,UAAU,EAAE,MAAM,oBAAoB,CAAC;AAC9E,OAAO,KAAK,EAAE,aAAa,EAAE,aAAa,EAAE,WAAW,EAAE,cAAc,EAAE,MAAM,UAAU,CAAC;AAE1F,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,8BAA8B,CAAC;AAEhE,KAAK,gBAAgB,GAAI;IACtB,OAAO,EAAE,MAAM,CAAC;IAChB,QAAQ,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,IAAI,CAAC;IACjC,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,YAAY,CAAC,EAAE,aAAa,CAAC;IAC7B,aAAa,CAAC,EAAE,YAAY,CAAC;IAC7B,mBAAmB,CAAC,EAAE,MAAM,CAAC;IAC7B,YAAY,CAAC,EAAE,aAAa,CAAC;IAC7B,aAAa,CAAC,EAAE,aAAa,CAAC;IAC9B,YAAY,CAAC,EAAE,aAAa,CAAC;IAC7B,uDAAuD;IACvD,aAAa,CAAC,EAAE,aAAa,CAAC;IAC9B,wCAAwC;IACxC,sBAAsB,CAAC,EAAE,aAAa,CAAC;IACvC,mDAAmD;IACnD,YAAY,CAAC,EAAE,UAAU,CAAC;IAC1B,4BAA4B;IAC5B,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,UAAU,CAAC,EAAE,YAAY,EAAE,CAAC;IAC5B,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,OAAO,CAAC,EAAE,WAAW,CAAC;IACtB,QAAQ,CAAC,EAAE,cAAc,EAAE,CAAC;CAC7B,CAAC;AA0wBJ,QAAA,MAAM,YAAY,sDAAwC,CAAC;AAC3D,KAAK,YAAY,GAAG,UAAU,CAAC,OAAO,YAAY,CAAC,CAAC;AACpD,eAAe,YAAY,CAAC"}
+{"version":3,"file":"TipTapEditor.svelte.d.ts","sourceRoot":"","sources":["../../src/components/TipTapEditor.svelte.ts"],"names":[],"mappings":"AA6JA,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,QAAQ,CAAC;AA2BtC,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,cAAc,CAAC;AAcjD,OAAO,EAA2B,KAAK,UAAU,EAAE,MAAM,oBAAoB,CAAC;AAC9E,OAAO,KAAK,EAAE,aAAa,EAAE,aAAa,EAAE,WAAW,EAAE,cAAc,EAAE,MAAM,UAAU,CAAC;AAE1F,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,8BAA8B,CAAC;AAEhE,KAAK,gBAAgB,GAAI;IACtB,OAAO,EAAE,MAAM,CAAC;IAChB,QAAQ,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,IAAI,CAAC;IACjC,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,YAAY,CAAC,EAAE,aAAa,CAAC;IAC7B,aAAa,CAAC,EAAE,YAAY,CAAC;IAC7B,mBAAmB,CAAC,EAAE,MAAM,CAAC;IAC7B,YAAY,CAAC,EAAE,aAAa,CAAC;IAC7B,aAAa,CAAC,EAAE,aAAa,CAAC;IAC9B,YAAY,CAAC,EAAE,aAAa,CAAC;IAC7B,uDAAuD;IACvD,aAAa,CAAC,EAAE,aAAa,CAAC;IAC9B,wCAAwC;IACxC,sBAAsB,CAAC,EAAE,aAAa,CAAC;IACvC,mDAAmD;IACnD,YAAY,CAAC,EAAE,UAAU,CAAC;IAC1B,4BAA4B;IAC5B,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,UAAU,CAAC,EAAE,YAAY,EAAE,CAAC;IAC5B,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,OAAO,CAAC,EAAE,WAAW,CAAC;IACtB,QAAQ,CAAC,EAAE,cAAc,EAAE,CAAC;CAC7B,CAAC;AAqxBJ,QAAA,MAAM,YAAY,sDAAwC,CAAC;AAC3D,KAAK,YAAY,GAAG,UAAU,CAAC,OAAO,YAAY,CAAC,CAAC;AACpD,eAAe,YAAY,CAAC"}

package/dist/extensions/LegacyBlock.d.ts

@@ -0,0 +1,34 @@
+/**
+ * 정올 prod 에만 있는 옛 블록 셋을 **원본 마크업 그대로 품는** 보존용 노드.
+ *
+ * - `<lite-youtube videoid=…>` — 유튜브 파사드 커스텀 엘리먼트 (prod 1 건)
+ * - `<div class="iframe-wrapper"><iframe …></div>` — 옛 임베드 (prod 69 건, 사멸 추세)
+ * - `<div class="tiptap-columns"><div class="tiptap-column">…</div></div>` — 옛 단 (prod 1 건)
+ *
+ * ⚠️ **왜 편집 가능한 노드로 바꾸지 않는가.** 정올 prod 와 lms 는 같은 Datastore 를
+ * 공유한다. 옛 단을 `Columns`(`div[data-type="columns"]`) 로 바꿔 저장하면 lms 에서는
+ * 잘 보이지만 **이번엔 prod 에디터가 그 형식을 모른다** — 손해를 반대로 옮길 뿐이다.
+ * 그래서 이 노드는 읽은 그대로 되쓴다: `parseHTML` 이 DOM 을 그대로 옮긴 명세(spec)로
+ * 뜨고, `renderHTML` 이 그 명세를 되돌려준다. 편집은 못 하지만 **아무것도 잃지 않는다.**
+ *
+ * ⚠️ **셀렉터 우선순위.** `Columns`/`Column` 에 이미 `div.tiptap-columns`·`div.tiptap-column`
+ * 규칙이 있다(기본 우선순위 50). 여기 규칙에 100 을 줘서 먼저 잡히게 한다. 그리고
+ * `transformLegacyHtml` 이 `class="tiptap-columns"` 를 `data-type="columns"` 로 미리
+ * 바꿔 버리면 여기까지 오지도 못하므로, 그 치환은 함께 제거했다(`utils/sanitize.ts`).
+ *
+ * ⚠️ **바이트 보존의 한계 하나.** `editor.getHTML()` 은 결국 DOM 을 거쳐 직렬화되므로
+ * 값 없는 속성(`allowfullscreen`)은 `allowfullscreen=""` 로 정규화된다. prod 저장본도
+ * 같은 경로(`getHTML()`)로 만들어져 이미 `=""` 꼴이라 실사용에서는 어긋나지 않는다.
+ */
+import { Node } from "@tiptap/core";
+/** ProseMirror `DOMOutputSpec` 과 같은 모양이되 **JSON 으로 저장 가능한** 형태. */
+export type LegacySpec = string | LegacySpecElement;
+export type LegacySpecElement = [string, Record<string, string>, ...LegacySpec[]];
+export type LegacyBlockKind = "youtube" | "iframe" | "columns";
+/**
+ * DOM 요소를 저장 가능한 명세로 옮긴다. 속성은 **적힌 순서 그대로**, 자식은 텍스트까지
+ * 그대로 옮긴다. `on*` 만 떨어뜨린다 — 그것까지 되쓰면 보존이 아니라 XSS 통로가 된다.
+ */
+export declare function elementToSpec(el: Element): LegacySpecElement;
+export declare const LegacyBlock: Node<any, any>;
+//# sourceMappingURL=LegacyBlock.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"LegacyBlock.d.ts","sourceRoot":"","sources":["../../src/extensions/LegacyBlock.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;;GAqBG;AACH,OAAO,EAAE,IAAI,EAAE,MAAM,cAAc,CAAC;AAGpC,mEAAmE;AACnE,MAAM,MAAM,UAAU,GAAG,MAAM,GAAG,iBAAiB,CAAC;AACpD,MAAM,MAAM,iBAAiB,GAAG,CAAC,MAAM,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,EAAE,GAAG,UAAU,EAAE,CAAC,CAAC;AAElF,MAAM,MAAM,eAAe,GAAG,SAAS,GAAG,QAAQ,GAAG,SAAS,CAAC;AAW/D;;;GAGG;AACH,wBAAgB,aAAa,CAAC,EAAE,EAAE,OAAO,GAAG,iBAAiB,CAqB5D;AA6DD,eAAO,MAAM,WAAW,gBAiFtB,CAAC"}

package/dist/extensions/LegacyBlock.js

@@ -0,0 +1,192 @@
+/**
+ * 정올 prod 에만 있는 옛 블록 셋을 **원본 마크업 그대로 품는** 보존용 노드.
+ *
+ * - `<lite-youtube videoid=…>` — 유튜브 파사드 커스텀 엘리먼트 (prod 1 건)
+ * - `<div class="iframe-wrapper"><iframe …></div>` — 옛 임베드 (prod 69 건, 사멸 추세)
+ * - `<div class="tiptap-columns"><div class="tiptap-column">…</div></div>` — 옛 단 (prod 1 건)
+ *
+ * ⚠️ **왜 편집 가능한 노드로 바꾸지 않는가.** 정올 prod 와 lms 는 같은 Datastore 를
+ * 공유한다. 옛 단을 `Columns`(`div[data-type="columns"]`) 로 바꿔 저장하면 lms 에서는
+ * 잘 보이지만 **이번엔 prod 에디터가 그 형식을 모른다** — 손해를 반대로 옮길 뿐이다.
+ * 그래서 이 노드는 읽은 그대로 되쓴다: `parseHTML` 이 DOM 을 그대로 옮긴 명세(spec)로
+ * 뜨고, `renderHTML` 이 그 명세를 되돌려준다. 편집은 못 하지만 **아무것도 잃지 않는다.**
+ *
+ * ⚠️ **셀렉터 우선순위.** `Columns`/`Column` 에 이미 `div.tiptap-columns`·`div.tiptap-column`
+ * 규칙이 있다(기본 우선순위 50). 여기 규칙에 100 을 줘서 먼저 잡히게 한다. 그리고
+ * `transformLegacyHtml` 이 `class="tiptap-columns"` 를 `data-type="columns"` 로 미리
+ * 바꿔 버리면 여기까지 오지도 못하므로, 그 치환은 함께 제거했다(`utils/sanitize.ts`).
+ *
+ * ⚠️ **바이트 보존의 한계 하나.** `editor.getHTML()` 은 결국 DOM 을 거쳐 직렬화되므로
+ * 값 없는 속성(`allowfullscreen`)은 `allowfullscreen=""` 로 정규화된다. prod 저장본도
+ * 같은 경로(`getHTML()`)로 만들어져 이미 `=""` 꼴이라 실사용에서는 어긋나지 않는다.
+ */
+import { Node } from "@tiptap/core";
+/** 되쓸 이유가 없는(그리고 되쓰면 위험한) 것들. prod 저장본에는 원래 들어 있지 않다. */
+const SKIP_TAGS = new Set(["script", "style", "noscript", "template"]);
+/** `Columns`/`Column` 의 같은 셀렉터보다 먼저 잡혀야 한다(기본 50). */
+const LEGACY_PARSE_PRIORITY = 100;
+const ELEMENT_NODE = 1;
+const TEXT_NODE = 3;
+/**
+ * DOM 요소를 저장 가능한 명세로 옮긴다. 속성은 **적힌 순서 그대로**, 자식은 텍스트까지
+ * 그대로 옮긴다. `on*` 만 떨어뜨린다 — 그것까지 되쓰면 보존이 아니라 XSS 통로가 된다.
+ */
+export function elementToSpec(el) {
+    const attrs = {};
+    for (const attr of Array.from(el.attributes)) {
+        const name = attr.name.toLowerCase();
+        if (name.startsWith("on"))
+            continue;
+        attrs[name] = attr.value;
+    }
+    const children = [];
+    for (const child of Array.from(el.childNodes)) {
+        if (child.nodeType === TEXT_NODE) {
+            const text = child.nodeValue ?? "";
+            if (text)
+                children.push(text);
+        }
+        else if (child.nodeType === ELEMENT_NODE) {
+            const childEl = child;
+            if (SKIP_TAGS.has(childEl.tagName.toLowerCase()))
+                continue;
+            children.push(elementToSpec(childEl));
+        }
+    }
+    return [el.tagName.toLowerCase(), attrs, ...children];
+}
+/**
+ * ⚠️ **깊은 복사가 필수다.** ProseMirror 1.25 는 `renderSpec` 에서 "노드 attrs 안에 있는
+ * 배열이 그대로 DOM 명세로 넘어왔는지" 를 검사해 XSS 로 보고 던진다
+ * (`Using an array from an attribute object as a DOM spec`). 검사는 attrs 를 훑어 **닿는
+ * 모든 배열**을 모으므로 얕은 복사로는 자식에서 그대로 걸린다.
+ */
+function cloneSpec(spec) {
+    if (typeof spec === "string")
+        return spec;
+    const [tag, attrs, ...children] = spec;
+    return [tag, { ...attrs }, ...children.map(cloneSpec)];
+}
+/** 자리표시자에 보여 줄 미리보기 글자. */
+function specText(spec) {
+    if (typeof spec === "string")
+        return spec;
+    const [, , ...children] = spec;
+    return children.map(specText).join("");
+}
+/** 명세 트리에서 첫 번째 `tag` 요소를 찾는다(임베드 주소를 꺼내려고). */
+function findSpec(spec, tag) {
+    if (typeof spec === "string")
+        return null;
+    if (spec[0] === tag)
+        return spec;
+    const [, , ...children] = spec;
+    for (const child of children) {
+        const found = findSpec(child, tag);
+        if (found)
+            return found;
+    }
+    return null;
+}
+function detectKind(el) {
+    const tag = el.tagName.toLowerCase();
+    if (tag === "lite-youtube")
+        return "youtube";
+    if (el.classList?.contains("tiptap-columns"))
+        return "columns";
+    return "iframe";
+}
+const KIND_LABEL = {
+    youtube: "유튜브 영상",
+    iframe: "임베드",
+    columns: "단 나누기"
+};
+/** 자리표시자의 "새 탭에서 보기" 주소. 없으면 링크를 안 만든다. */
+function outboundUrl(kind, spec) {
+    if (!spec)
+        return null;
+    if (kind === "youtube") {
+        const videoId = spec[1]?.videoid;
+        return videoId ? `https://www.youtube.com/watch?v=${encodeURIComponent(videoId)}` : null;
+    }
+    if (kind === "iframe") {
+        const frame = findSpec(spec, "iframe");
+        const src = frame?.[1]?.src ?? "";
+        return /^https?:\/\//i.test(src) ? src : null;
+    }
+    return null;
+}
+export const LegacyBlock = Node.create({
+    name: "legacyBlock",
+    group: "block",
+    atom: true,
+    selectable: true,
+    draggable: false,
+    addAttributes() {
+        return {
+            /* 원본 마크업. `rendered: false` — `renderHTML` 이 직접 되뱉는다. */
+            spec: {
+                default: null,
+                rendered: false,
+                parseHTML: (element) => elementToSpec(element)
+            },
+            kind: {
+                default: "iframe",
+                rendered: false,
+                parseHTML: (element) => detectKind(element)
+            }
+        };
+    },
+    parseHTML() {
+        return [
+            { tag: "lite-youtube", priority: LEGACY_PARSE_PRIORITY },
+            { tag: "div.iframe-wrapper", priority: LEGACY_PARSE_PRIORITY },
+            { tag: "div.tiptap-columns", priority: LEGACY_PARSE_PRIORITY }
+        ];
+    },
+    renderHTML({ node }) {
+        const spec = node.attrs.spec;
+        // 명세가 없는 노드는 만들 길이 없지만(삽입 명령이 없다), 스키마상 방어해 둔다.
+        if (!spec)
+            return ["div", {}];
+        return cloneSpec(spec);
+    },
+    addNodeView() {
+        return ({ node }) => {
+            const kind = (node.attrs.kind ?? "iframe");
+            const spec = node.attrs.spec;
+            const dom = document.createElement("div");
+            dom.setAttribute("data-type", "legacyBlock");
+            dom.setAttribute("data-legacy-kind", kind);
+            dom.setAttribute("data-node-view-wrapper", "");
+            dom.style.cssText =
+                "margin:8px 0;padding:16px;border:1px dashed rgba(120,130,150,0.5);border-radius:8px;background:rgba(120,130,150,0.06);box-sizing:border-box;max-width:100%;display:flex;flex-direction:column;gap:6px;align-items:flex-start;";
+            const label = document.createElement("span");
+            label.textContent = `${KIND_LABEL[kind]} (옛 형식 · 편집 불가)`;
+            label.style.cssText = "font-size:13px;font-weight:600;opacity:0.8;";
+            dom.appendChild(label);
+            /*
+             * 저장된 내용을 **글자로만** 보여 준다. 옛 단은 본문이 통째로 들어 있어서,
+             * 이걸 안 보여 주면 작성자는 무엇이 들었는지 모른 채 지우게 된다.
+             */
+            const preview = spec ? specText(spec).replace(/\s+/g, " ").trim() : "";
+            if (preview) {
+                const body = document.createElement("span");
+                body.textContent = preview.length > 200 ? `${preview.slice(0, 200)}…` : preview;
+                body.style.cssText = "font-size:13px;line-height:1.6;opacity:0.75;";
+                dom.appendChild(body);
+            }
+            const url = outboundUrl(kind, spec);
+            if (url) {
+                const open = document.createElement("a");
+                open.href = url;
+                open.target = "_blank";
+                open.rel = "noopener noreferrer";
+                open.textContent = "새 탭에서 보기";
+                open.style.cssText = "font-size:13px;font-weight:600;text-decoration:underline;";
+                dom.appendChild(open);
+            }
+            return { dom };
+        };
+    }
+});

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

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

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

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

package/dist/extensions/LegacyBlock.test.js

@@ -0,0 +1,95 @@
+import { describe, it, expect, afterEach } from 'vitest';
+import { Editor } from '@tiptap/core';
+import StarterKit from '@tiptap/starter-kit';
+import { LegacyBlock } from './LegacyBlock';
+import { Columns } from './Columns';
+import { Column } from './Column';
+import { sanitizeHtml, transformLegacyHtml } from '../utils/sanitize';
+/**
+ * 옛 블록 셋은 **편집하지 않고 보존한다.** 정올 prod 와 lms 가 같은 Datastore 를 쓰므로,
+ * 형식을 갈아 끼우면 lms 에서는 보이고 prod 에서는 사라진다 — 손해가 반대로 옮겨갈 뿐이다.
+ */
+describe('LegacyBlock — 옛 정올 블록 보존', () => {
+    let editor;
+    function createEditor(content) {
+        editor = new Editor({
+            element: document.createElement('div'),
+            // `Columns`/`Column` 도 함께 넣는다 — 셀렉터가 겹치므로 우선순위를 실제로 확인해야 한다.
+            extensions: [StarterKit, LegacyBlock, Columns, Column],
+            content
+        });
+        return editor;
+    }
+    afterEach(() => {
+        editor?.destroy();
+    });
+    const YOUTUBE = '<lite-youtube videoid="dQw4w9WgXcQ" params="rel=0"></lite-youtube>';
+    /*
+     * ⚠️ 값 없는 속성(`allowfullscreen`)은 `getHTML()` 이 DOM 을 거치며 `=""` 로 정규화된다.
+     * prod 저장본도 같은 경로(`getHTML()`)로 만들어져 이미 `=""` 꼴이라 실사용에서는 어긋나지
+     * 않는다 — 그래서 표본도 `=""` 로 적는다.
+     */
+    const IFRAME = '<div class="iframe-wrapper"><iframe src="https://jungol.co.kr/embed/1" width="640" height="360" frameborder="0" allowfullscreen=""></iframe></div>';
+    const COLUMNS = '<div class="tiptap-columns"><div class="tiptap-column"><p>왼쪽</p></div><div class="tiptap-column"><p>오른쪽</p></div></div>';
+    it('lite-youtube 를 왕복에서 바이트 보존한다', () => {
+        createEditor(YOUTUBE);
+        expect(editor.getJSON().content?.[0]?.type).toBe('legacyBlock');
+        expect(editor.getHTML()).toBe(YOUTUBE);
+    });
+    it('div.iframe-wrapper 를 왕복에서 바이트 보존한다', () => {
+        createEditor(IFRAME);
+        expect(editor.getHTML()).toBe(IFRAME);
+    });
+    /* ⚠️ `Columns` 의 같은 셀렉터(우선순위 50)보다 먼저 잡혀야 한다. */
+    it('div.tiptap-columns 를 Columns 보다 먼저 잡아 원본 그대로 되쓴다', () => {
+        createEditor(COLUMNS);
+        const node = editor.getJSON().content?.[0];
+        expect(node?.type).toBe('legacyBlock');
+        expect(node?.attrs?.kind).toBe('columns');
+        expect(editor.getHTML()).toBe(COLUMNS);
+    });
+    it('rich-editor 자신의 단(div[data-type="columns"])은 그대로 Columns 가 맡는다', () => {
+        createEditor('<div data-type="columns"><div data-type="column"><p>A</p></div><div data-type="column"><p>B</p></div></div>');
+        expect(editor.getJSON().content?.[0]?.type).toBe('columns');
+    });
+    it('앞뒤 본문이 섞여도 셋 다 그대로다', () => {
+        const html = `<p>앞</p>${YOUTUBE}${IFRAME}${COLUMNS}<p>뒤</p>`;
+        createEditor(html);
+        expect(editor.getHTML()).toBe(html);
+    });
+    /* ⚠️ 회귀 표적. 노드가 없으면 파서가 통째로 버린다. */
+    it('노드가 없으면 세 블록이 전부 사라진다는 것을 함께 박아 둔다', () => {
+        const bare = new Editor({
+            element: document.createElement('div'),
+            extensions: [StarterKit],
+            content: YOUTUBE + IFRAME
+        });
+        const html = bare.getHTML();
+        expect(html).not.toContain('lite-youtube');
+        expect(html).not.toContain('iframe');
+        bare.destroy();
+    });
+    it('on* 은 되쓰지 않는다', () => {
+        createEditor('<lite-youtube videoid="v" onerror="alert(1)"></lite-youtube>');
+        expect(editor.getHTML()).toBe('<lite-youtube videoid="v"></lite-youtube>');
+    });
+    it('transformLegacyHtml 이 옛 단을 더는 갈아 끼우지 않는다', () => {
+        // 갈아 끼우면 prod 가 모르는 형식으로 저장돼 이번엔 prod 쪽에서 단이 사라진다.
+        expect(transformLegacyHtml(COLUMNS)).toBe(COLUMNS);
+    });
+    describe('sanitizeHtml', () => {
+        it('세 블록을 정적 렌더에서도 살려 둔다', () => {
+            const clean = sanitizeHtml(YOUTUBE + IFRAME + COLUMNS);
+            expect(clean).toContain('<lite-youtube');
+            expect(clean).toContain('videoid="dQw4w9WgXcQ"');
+            expect(clean).toContain('<iframe');
+            expect(clean).toContain('src="https://jungol.co.kr/embed/1"');
+            expect(clean).toContain('class="tiptap-columns"');
+        });
+        it('허용하지 않은 호스트의 iframe 은 src 를 뗀다', () => {
+            const clean = sanitizeHtml('<iframe src="https://evil.example/x"></iframe>');
+            expect(clean).toContain('<iframe');
+            expect(clean).not.toContain('evil.example');
+        });
+    });
+});

package/dist/extensions/TiptapMidibus.d.ts

@@ -0,0 +1,47 @@
+/**
+ * 정올 prod 저장 형식인 `<tiptap-midibus …>` 를 **그대로 읽고 그대로 되쓰는** 노드.
+ *
+ * ⚠️ **`MbusVideo` 와 다른 노드다.** 둘 다 mbus 영상이지만 저장 형식이 다르다 —
+ * `MbusVideo` 는 lms(rich-editor) 가 만든 `div[data-mbus-src]` 이고, 이쪽은 정올 prod
+ * 에디터(`@seorii/tiptap`)가 만든 커스텀 태그다. 정올 prod 와 lms 는 **같은 Datastore 를
+ * 공유**하므로, 한쪽이 모르는 형식을 만나면 그 블록이 통째로 사라진다. 실제로 lms 에서
+ * 강의영상 글을 열면 본문이 `<p>` 하나만 남고 비었다(prod 게시글·댓글 15,479 건 중
+ * 181 건이 이 형식이고, 2026 년에도 51 건이 새로 쌓였다 — 사멸한 형식이 아니다).
+ *
+ * 그래서 이 노드의 계약은 **재생이 아니라 보존**이다:
+ * 1. `parseHTML` 이 여는 태그의 속성을 **순서까지 그대로** `rawAttrs` 에 담는다.
+ * 2. `renderHTML` 은 `rawAttrs` 가 있으면 그것을 그대로 되뱉는다 → 왕복에서 바이트 보존.
+ * 3. 화면에는 **읽기 전용 자리표시자**만 세운다(아래 이유).
+ *
+ * ⚠️ **재생 UI 는 일부러 포팅하지 않았다.** prod 플레이어
+ * (`trinity/apps/jungol/src/components/ui/tiptap/midibus/MidibusInner.svelte`)는
+ * ① 로그인 계정 id 로 `uuid` 를 조립하고 ② `GET /midibus/start/{id}` 로 이어보기 지점을
+ * 받아오며 ③ PIP 헬퍼를 쓴다 — 셋 다 **호스트 앱의 API 클라이언트·세션**이 있어야 하는
+ * 것이라 패키지 안으로 들어올 수 없다. 게다가 정올은 전 문서에 `COEP: require-corp` 를
+ * 걸어 두어서, `credentialless` 를 모르는 파이어폭스·사파리에서는 prod 에서도 이 영상이
+ * 이미 **빈 회색 박스**다. 재생을 어설프게 옮기면 그 미해결 문제를 그대로 물려받는다.
+ * 대신 자리표시자에 플레이어 새 탭 링크를 둔다 — 비로그인 prod 가 쓰는 것과 같은 주소다.
+ */
+import { Node } from "@tiptap/core";
+export interface TiptapMidibusOptions {
+    HTMLAttributes: Record<string, unknown>;
+    /** 자리표시자의 "새 탭에서 보기" 가 향할 플레이어 주소 앞부분. */
+    playerBaseUrl: string;
+}
+declare module "@tiptap/core" {
+    interface Commands<ReturnType> {
+        tiptapMidibus: {
+            setTiptapMidibus: (attrs: {
+                id: string;
+                start?: number | string;
+                uuid?: string;
+                width?: string;
+                height?: string;
+            }) => ReturnType;
+        };
+    }
+}
+/** 여는 태그에 실제로 적혀 있던 속성을 **적힌 순서 그대로** 담는다. */
+export type MidibusRawAttrs = Record<string, string>;
+export declare const TiptapMidibus: Node<TiptapMidibusOptions, any>;
+//# sourceMappingURL=TiptapMidibus.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"TiptapMidibus.d.ts","sourceRoot":"","sources":["../../src/extensions/TiptapMidibus.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;;;;GAuBG;AACH,OAAO,EAAE,IAAI,EAAmB,MAAM,cAAc,CAAC;AAErD,MAAM,WAAW,oBAAoB;IACpC,cAAc,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAAC;IACxC,0CAA0C;IAC1C,aAAa,EAAE,MAAM,CAAC;CACtB;AAED,OAAO,QAAQ,cAAc,CAAC;IAC7B,UAAU,QAAQ,CAAC,UAAU;QAC5B,aAAa,EAAE;YACd,gBAAgB,EAAE,CAAC,KAAK,EAAE;gBACzB,EAAE,EAAE,MAAM,CAAC;gBACX,KAAK,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;gBACxB,IAAI,CAAC,EAAE,MAAM,CAAC;gBACd,KAAK,CAAC,EAAE,MAAM,CAAC;gBACf,MAAM,CAAC,EAAE,MAAM,CAAC;aAChB,KAAK,UAAU,CAAC;SACjB,CAAC;KACF;CACD;AAED,8CAA8C;AAC9C,MAAM,MAAM,eAAe,GAAG,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;AAiBrD,eAAO,MAAM,aAAa,iCAgHxB,CAAC"}

package/dist/extensions/TiptapMidibus.js

@@ -0,0 +1,139 @@
+/**
+ * 정올 prod 저장 형식인 `<tiptap-midibus …>` 를 **그대로 읽고 그대로 되쓰는** 노드.
+ *
+ * ⚠️ **`MbusVideo` 와 다른 노드다.** 둘 다 mbus 영상이지만 저장 형식이 다르다 —
+ * `MbusVideo` 는 lms(rich-editor) 가 만든 `div[data-mbus-src]` 이고, 이쪽은 정올 prod
+ * 에디터(`@seorii/tiptap`)가 만든 커스텀 태그다. 정올 prod 와 lms 는 **같은 Datastore 를
+ * 공유**하므로, 한쪽이 모르는 형식을 만나면 그 블록이 통째로 사라진다. 실제로 lms 에서
+ * 강의영상 글을 열면 본문이 `<p>` 하나만 남고 비었다(prod 게시글·댓글 15,479 건 중
+ * 181 건이 이 형식이고, 2026 년에도 51 건이 새로 쌓였다 — 사멸한 형식이 아니다).
+ *
+ * 그래서 이 노드의 계약은 **재생이 아니라 보존**이다:
+ * 1. `parseHTML` 이 여는 태그의 속성을 **순서까지 그대로** `rawAttrs` 에 담는다.
+ * 2. `renderHTML` 은 `rawAttrs` 가 있으면 그것을 그대로 되뱉는다 → 왕복에서 바이트 보존.
+ * 3. 화면에는 **읽기 전용 자리표시자**만 세운다(아래 이유).
+ *
+ * ⚠️ **재생 UI 는 일부러 포팅하지 않았다.** prod 플레이어
+ * (`trinity/apps/jungol/src/components/ui/tiptap/midibus/MidibusInner.svelte`)는
+ * ① 로그인 계정 id 로 `uuid` 를 조립하고 ② `GET /midibus/start/{id}` 로 이어보기 지점을
+ * 받아오며 ③ PIP 헬퍼를 쓴다 — 셋 다 **호스트 앱의 API 클라이언트·세션**이 있어야 하는
+ * 것이라 패키지 안으로 들어올 수 없다. 게다가 정올은 전 문서에 `COEP: require-corp` 를
+ * 걸어 두어서, `credentialless` 를 모르는 파이어폭스·사파리에서는 prod 에서도 이 영상이
+ * 이미 **빈 회색 박스**다. 재생을 어설프게 옮기면 그 미해결 문제를 그대로 물려받는다.
+ * 대신 자리표시자에 플레이어 새 탭 링크를 둔다 — 비로그인 prod 가 쓰는 것과 같은 주소다.
+ */
+import { Node, mergeAttributes } from "@tiptap/core";
+/**
+ * ⚠️ `on*` 만 걸러내고 나머지는 손대지 않는다. prod 가 `data-resize-*`·`data-bubble-menu`
+ * 같은 것을 붙여 저장해도 여기서 살아남아야 왕복이 성립한다 — 아는 속성만 남기면
+ * 모르는 속성이 조용히 증발한다.
+ */
+function readRawAttrs(el) {
+    const out = {};
+    for (const attr of Array.from(el.attributes)) {
+        const name = attr.name.toLowerCase();
+        if (name.startsWith("on"))
+            continue;
+        out[name] = attr.value;
+    }
+    return out;
+}
+export const TiptapMidibus = Node.create({
+    name: "tiptapMidibus",
+    group: "block",
+    atom: true,
+    draggable: true,
+    inline: false,
+    addOptions() {
+        return {
+            HTMLAttributes: {},
+            playerBaseUrl: "https://play.mbus.tv/v1/hls"
+        };
+    },
+    /*
+     * 기본값은 **prod 와 한 글자도 다르면 안 된다**(prod `midibus/index.ts`).
+     * 여기서 새로 넣은 영상이 prod 에디터로 넘어가도 같은 꼴로 보여야 하기 때문이다.
+     */
+    addAttributes() {
+        return {
+            id: { default: "" },
+            start: { default: 0 },
+            uuid: { default: "" },
+            width: { default: "100%" },
+            height: { default: "600" },
+            /*
+             * 저장본을 되쓸 때 쓰는 원본 속성. `rendered: false` 라 위 다섯 개와 겹쳐
+             * 두 번 나가지 않는다.
+             */
+            rawAttrs: {
+                default: null,
+                rendered: false,
+                parseHTML: (element) => readRawAttrs(element)
+            }
+        };
+    },
+    parseHTML() {
+        return [{ tag: "tiptap-midibus" }];
+    },
+    renderHTML({ node, HTMLAttributes }) {
+        const raw = node.attrs.rawAttrs;
+        /*
+         * 읽어 들인 글이면 **원본 그대로**. 속성을 다시 조립하면 순서가 바뀌거나
+         * 모르는 속성이 빠져 prod 저장본과 달라진다.
+         */
+        if (raw)
+            return ["tiptap-midibus", { ...raw }];
+        // 여기서 새로 넣은 영상. prod `renderHTML` 과 같은 꼴로 만든다.
+        return [
+            "tiptap-midibus",
+            mergeAttributes(this.options.HTMLAttributes, HTMLAttributes, {
+                "data-bubble-menu": "false"
+            })
+        ];
+    },
+    addNodeView() {
+        return ({ node }) => {
+            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;
+            const dom = document.createElement("div");
+            dom.setAttribute("data-type", "tiptapMidibus");
+            dom.setAttribute("data-node-view-wrapper", "");
+            dom.style.cssText = "margin:8px 0;position:relative;box-sizing:border-box;max-width:100%;";
+            const aspect = document.createElement("div");
+            aspect.style.cssText =
+                "position:relative;width:100%;padding-top:56.25%;background:#0b1020;border-radius:8px;overflow:hidden;";
+            dom.appendChild(aspect);
+            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.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.style.cssText = "font-size:12px;line-height:1.5;opacity:0.7;word-break:break-all;";
+            poster.appendChild(hint);
+            if (videoId) {
+                const open = document.createElement("a");
+                open.href = `${this.options.playerBaseUrl}/${videoId}?start=${start}&volume=50`;
+                open.target = "_blank";
+                open.rel = "noopener noreferrer";
+                open.textContent = "새 탭에서 보기";
+                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 };
+        };
+    },
+    addCommands() {
+        return {
+            setTiptapMidibus: (attrs) => ({ chain }) => {
+                return chain().insertContent({ type: this.name, attrs }).run();
+            }
+        };
+    }
+});

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

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

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

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

package/dist/extensions/TiptapMidibus.test.js

@@ -0,0 +1,89 @@
+import { describe, it, expect, afterEach } from 'vitest';
+import { Editor } from '@tiptap/core';
+import StarterKit from '@tiptap/starter-kit';
+import { TiptapMidibus } from './TiptapMidibus';
+import { sanitizeHtml, transformLegacyHtml } from '../utils/sanitize';
+/**
+ * 이 노드의 계약은 **재생이 아니라 보존**이다. 정올 prod 와 lms 는 같은 Datastore 를
+ * 쓰므로, lms 에서 열었다 저장하는 것만으로 바이트가 달라지면 prod 쪽 렌더가 깨진다.
+ * 그래서 여기 테스트는 전부 "넣은 것이 그대로 나오는가" 를 본다.
+ */
+describe('TiptapMidibus — prod 저장 형식 왕복', () => {
+    let editor;
+    function createEditor(content) {
+        editor = new Editor({
+            element: document.createElement('div'),
+            extensions: [StarterKit, TiptapMidibus],
+            content
+        });
+        return editor;
+    }
+    afterEach(() => {
+        editor?.destroy();
+    });
+    /* prod `midibus/index.ts` 의 `renderHTML` 이 실제로 뱉는 꼴. 속성 순서까지 그대로다. */
+    const PROD = '<tiptap-midibus id="abc123" start="0" uuid="abc123" width="100%" height="600" data-bubble-menu="false"></tiptap-midibus>';
+    it('prod 저장본을 노드로 읽는다', () => {
+        createEditor(PROD);
+        const doc = editor.getJSON();
+        const node = doc.content?.[0];
+        expect(node?.type).toBe('tiptapMidibus');
+        expect(node?.attrs?.id).toBe('abc123');
+        expect(node?.attrs?.uuid).toBe('abc123');
+    });
+    it('왕복에서 바이트가 그대로다', () => {
+        createEditor(PROD);
+        expect(editor.getHTML()).toBe(PROD);
+    });
+    it('앞뒤 본문이 있어도 그대로다', () => {
+        const html = `<p>앞</p>${PROD}<p>뒤</p>`;
+        createEditor(html);
+        expect(editor.getHTML()).toBe(html);
+    });
+    /*
+     * ⚠️ 회귀 표적. 예전엔 이 태그를 아는 노드가 없어 파서가 통째로 버렸고, 실제로
+     * 강의영상 글이 lms 에서 `<p>` 하나만 남고 비었다.
+     */
+    it('노드가 없으면 사라진다는 것을 함께 박아 둔다', () => {
+        const bare = new Editor({
+            element: document.createElement('div'),
+            extensions: [StarterKit],
+            content: PROD
+        });
+        expect(bare.getHTML()).not.toContain('tiptap-midibus');
+        bare.destroy();
+    });
+    it('모르는 속성도 잃지 않는다', () => {
+        const html = '<tiptap-midibus id="v" start="12" uuid="u" width="100%" height="600" data-bubble-menu="false" data-resize-aspect-ratio="1.777"></tiptap-midibus>';
+        createEditor(html);
+        expect(editor.getHTML()).toBe(html);
+    });
+    it('속성 순서가 prod 와 달라도 그 순서 그대로 되쓴다', () => {
+        const html = '<tiptap-midibus height="400" id="v" uuid="u"></tiptap-midibus>';
+        createEditor(html);
+        expect(editor.getHTML()).toBe(html);
+    });
+    it('on* 은 되쓰지 않는다', () => {
+        createEditor('<tiptap-midibus id="v" onload="alert(1)"></tiptap-midibus>');
+        expect(editor.getHTML()).toBe('<tiptap-midibus id="v"></tiptap-midibus>');
+    });
+    it('새로 넣으면 prod 와 같은 꼴로 저장된다', () => {
+        createEditor('<p></p>');
+        editor.commands.setTiptapMidibus({ id: 'new1', start: 30, uuid: 'new1' });
+        expect(editor.getHTML()).toContain('<tiptap-midibus id="new1" start="30" uuid="new1" width="100%" height="600" data-bubble-menu="false">');
+    });
+    it('transformLegacyHtml 은 이 태그를 건드리지 않는다', () => {
+        expect(transformLegacyHtml(PROD)).toBe(PROD);
+    });
+    /*
+     * ⚠️ 정적 렌더(`{@html}` + 살균) 경로. 살균의 태그 이름 패턴에 하이픈이 없어서
+     * 허용 목록에 `tiptap-midibus` 가 적혀 있는데도 통째로 지워지고 있었다.
+     */
+    it('sanitizeHtml 을 통과한다', () => {
+        const clean = sanitizeHtml(PROD);
+        expect(clean).toContain('<tiptap-midibus');
+        expect(clean).toContain('id="abc123"');
+        expect(clean).toContain('data-bubble-menu="false"');
+        expect(clean).toContain('</tiptap-midibus>');
+    });
+});

package/dist/index.d.ts

@@ -5,6 +5,10 @@ export { FixedDetails } from "./extensions/FixedDetails";
 export { FileAttachment } from "./extensions/FileAttachment";
 export type { FileResolver, FileResolveResult } from "./extensions/FileAttachment";
 export { MbusVideo } from "./extensions/MbusVideo";
+export { TiptapMidibus } from "./extensions/TiptapMidibus";
+export type { TiptapMidibusOptions, MidibusRawAttrs } from "./extensions/TiptapMidibus";
+export { LegacyBlock, elementToSpec } from "./extensions/LegacyBlock";
+export type { LegacySpec, LegacySpecElement, LegacyBlockKind } from "./extensions/LegacyBlock";
 export { ResizableImage, normalizeImageWidth } from "./extensions/ResizableImage";
 export { CardBlock } from "./extensions/CardBlock";
 export type { CardBackgroundPrompt, CardBlockOptions } from "./extensions/CardBlock";

package/dist/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,OAAO,IAAI,YAAY,EAAE,MAAM,kCAAkC,CAAC;AAW3E,OAAO,EAAE,QAAQ,EAAE,MAAM,uBAAuB,CAAC;AACjD,OAAO,EAAE,MAAM,EAAE,MAAM,qBAAqB,CAAC;AAC7C,OAAO,EAAE,YAAY,EAAE,MAAM,2BAA2B,CAAC;AACzD,OAAO,EAAE,cAAc,EAAE,MAAM,6BAA6B,CAAC;AAC7D,YAAY,EAAE,YAAY,EAAE,iBAAiB,EAAE,MAAM,6BAA6B,CAAC;AACnF,OAAO,EAAE,SAAS,EAAE,MAAM,wBAAwB,CAAC;AACnD,OAAO,EAAE,cAAc,EAAE,mBAAmB,EAAE,MAAM,6BAA6B,CAAC;AAClF,OAAO,EAAE,SAAS,EAAE,MAAM,wBAAwB,CAAC;AACnD,YAAY,EAAE,oBAAoB,EAAE,gBAAgB,EAAE,MAAM,wBAAwB,CAAC;AACrF,OAAO,EAAE,OAAO,EAAE,MAAM,sBAAsB,CAAC;AAC/C,OAAO,EAAE,MAAM,EAAE,MAAM,qBAAqB,CAAC;AAC7C,OAAO,EAAE,SAAS,EAAE,GAAG,EAAE,MAAM,wBAAwB,CAAC;AACxD,OAAO,EAAE,UAAU,EAAE,WAAW,EAAE,MAAM,mBAAmB,CAAC;AAC5D,YAAY,EAAE,UAAU,EAAE,WAAW,EAAE,MAAM,mBAAmB,CAAC;AAGjE,OAAO,EAAE,YAAY,EAAE,kBAAkB,EAAE,mBAAmB,EAAE,MAAM,kBAAkB,CAAC;AACzF,OAAO,EAAE,cAAc,EAAE,QAAQ,EAAE,MAAM,aAAa,CAAC;AACvD,OAAO,EAAE,YAAY,EAAE,MAAM,gBAAgB,CAAC;AAC9C,YAAY,EAAE,mBAAmB,EAAE,UAAU,EAAE,MAAM,gBAAgB,CAAC;AACtE,OAAO,EAAE,EAAE,EAAE,MAAM,YAAY,CAAC;AAahC,OAAO,EAAE,QAAQ,EAAE,cAAc,EAAE,MAAM,kBAAkB,CAAC;AAG5D,YAAY,EACV,iBAAiB,EACjB,aAAa,EACb,WAAW,EACX,cAAc,EACd,iBAAiB,EACjB,gBAAgB,EAChB,qBAAqB,EACrB,aAAa,GACd,MAAM,SAAS,CAAC;AACjB,OAAO,EAAE,eAAe,EAAE,eAAe,EAAE,MAAM,SAAS,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,OAAO,IAAI,YAAY,EAAE,MAAM,kCAAkC,CAAC;AAW3E,OAAO,EAAE,QAAQ,EAAE,MAAM,uBAAuB,CAAC;AACjD,OAAO,EAAE,MAAM,EAAE,MAAM,qBAAqB,CAAC;AAC7C,OAAO,EAAE,YAAY,EAAE,MAAM,2BAA2B,CAAC;AACzD,OAAO,EAAE,cAAc,EAAE,MAAM,6BAA6B,CAAC;AAC7D,YAAY,EAAE,YAAY,EAAE,iBAAiB,EAAE,MAAM,6BAA6B,CAAC;AACnF,OAAO,EAAE,SAAS,EAAE,MAAM,wBAAwB,CAAC;AAKnD,OAAO,EAAE,aAAa,EAAE,MAAM,4BAA4B,CAAC;AAC3D,YAAY,EAAE,oBAAoB,EAAE,eAAe,EAAE,MAAM,4BAA4B,CAAC;AACxF,OAAO,EAAE,WAAW,EAAE,aAAa,EAAE,MAAM,0BAA0B,CAAC;AACtE,YAAY,EAAE,UAAU,EAAE,iBAAiB,EAAE,eAAe,EAAE,MAAM,0BAA0B,CAAC;AAC/F,OAAO,EAAE,cAAc,EAAE,mBAAmB,EAAE,MAAM,6BAA6B,CAAC;AAClF,OAAO,EAAE,SAAS,EAAE,MAAM,wBAAwB,CAAC;AACnD,YAAY,EAAE,oBAAoB,EAAE,gBAAgB,EAAE,MAAM,wBAAwB,CAAC;AACrF,OAAO,EAAE,OAAO,EAAE,MAAM,sBAAsB,CAAC;AAC/C,OAAO,EAAE,MAAM,EAAE,MAAM,qBAAqB,CAAC;AAC7C,OAAO,EAAE,SAAS,EAAE,GAAG,EAAE,MAAM,wBAAwB,CAAC;AACxD,OAAO,EAAE,UAAU,EAAE,WAAW,EAAE,MAAM,mBAAmB,CAAC;AAC5D,YAAY,EAAE,UAAU,EAAE,WAAW,EAAE,MAAM,mBAAmB,CAAC;AAGjE,OAAO,EAAE,YAAY,EAAE,kBAAkB,EAAE,mBAAmB,EAAE,MAAM,kBAAkB,CAAC;AACzF,OAAO,EAAE,cAAc,EAAE,QAAQ,EAAE,MAAM,aAAa,CAAC;AACvD,OAAO,EAAE,YAAY,EAAE,MAAM,gBAAgB,CAAC;AAC9C,YAAY,EAAE,mBAAmB,EAAE,UAAU,EAAE,MAAM,gBAAgB,CAAC;AACtE,OAAO,EAAE,EAAE,EAAE,MAAM,YAAY,CAAC;AAahC,OAAO,EAAE,QAAQ,EAAE,cAAc,EAAE,MAAM,kBAAkB,CAAC;AAG5D,YAAY,EACV,iBAAiB,EACjB,aAAa,EACb,WAAW,EACX,cAAc,EACd,iBAAiB,EACjB,gBAAgB,EAChB,qBAAqB,EACrB,aAAa,GACd,MAAM,SAAS,CAAC;AACjB,OAAO,EAAE,eAAe,EAAE,eAAe,EAAE,MAAM,SAAS,CAAC"}

package/dist/index.js

@@ -14,6 +14,12 @@ export { Indent } from "./extensions/Indent";
 export { FixedDetails } from "./extensions/FixedDetails";
 export { FileAttachment } from "./extensions/FileAttachment";
 export { MbusVideo } from "./extensions/MbusVideo";
+/*
+ * 정올 prod 저장 형식 보존용. `MbusVideo`(lms 형식 `div[data-mbus-src]`) 와 **다른 노드**다 —
+ * 이쪽은 prod 커스텀 태그 `<tiptap-midibus>` 를 그대로 읽고 그대로 되쓴다.
+ */
+export { TiptapMidibus } from "./extensions/TiptapMidibus";
+export { LegacyBlock, elementToSpec } from "./extensions/LegacyBlock";
 export { ResizableImage, normalizeImageWidth } from "./extensions/ResizableImage";
 export { CardBlock } from "./extensions/CardBlock";
 export { Columns } from "./extensions/Columns";

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

@@ -1 +1 @@
-{"version":3,"file":"sanitize.d.ts","sourceRoot":"","sources":["../../src/utils/sanitize.ts"],"names":[],"mappings":"AAgEA,wBAAgB,YAAY,CAAC,IAAI,EAAE,MAAM,GAAG,MAAM,CAcjD;AA0BD;;;;GAIG;AACH,wBAAgB,mBAAmB,CAAC,IAAI,EAAE,MAAM,GAAG,MAAM,CA8ExD;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":"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"}

package/dist/utils/sanitize.js

@@ -15,7 +15,46 @@ const ALLOWED_TAGS = new Set([
     "details", "summary",
     "tiptap-midibus",
     "math-inline", "math-display",
+    /*
+     * ⚠️ **정올 prod 전용 옛 블록**(`LegacyBlock` 이 원본 그대로 품는 것들). 에디터는
+     * 저장 형식을 보존하는데 살균이 태그를 지워 버리면 정적 렌더(`{@html}` + 살균)에서만
+     * 조용히 사라져 "에디터엔 보이는데 목록엔 없다" 가 된다.
+     * 감싸는 `div.iframe-wrapper`·`div.tiptap-columns` 는 `div` 라 이미 통과한다
+     * (`class` 는 `*` 로 전역 허용).
+     */
+    "iframe",
+    "lite-youtube",
+]);
+/**
+ * `iframe` 을 허용하는 이상 **아무 곳이나 실리게 두지 않는다.** 정올 prod 도 같은 자리에
+ * `allowedIframeHostnames: ['jungol.co.kr']` 를 두고 있다(그쪽 `TipTap.svelte`).
+ * 여기 없는 호스트는 `src` 만 떨어져 빈 프레임이 된다 — 태그째 지우면 본문 구조가
+ * 어긋나므로 값만 뺀다.
+ */
+const ALLOWED_IFRAME_HOSTS = new Set([
+    "jungol.co.kr",
+    "www.jungol.co.kr",
+    "codepass.co.kr",
+    "www.codepass.co.kr",
+    "play.mbus.tv",
+    "youtube.com",
+    "www.youtube.com",
+    "youtube-nocookie.com",
+    "www.youtube-nocookie.com",
+    "player.vimeo.com",
 ]);
+function isAllowedIframeSrc(value) {
+    try {
+        // 상대 경로(`/foo`)는 정올 자신을 가리키므로 통과시킨다.
+        const url = new URL(value, "https://jungol.co.kr");
+        if (url.protocol !== "https:" && url.protocol !== "http:")
+            return false;
+        return ALLOWED_IFRAME_HOSTS.has(url.hostname.toLowerCase());
+    }
+    catch {
+        return false;
+    }
+}
 const ALLOWED_ATTRS = {
     a: new Set(["href", "title", "target", "rel"]),
     img: new Set(["src", "alt", "width", "height"]),
@@ -54,7 +93,41 @@ const ALLOWED_ATTRS = {
     summary: new Set(["data-level"]),
     pre: new Set(["class"]),
     code: new Set(["class"]),
-    "tiptap-midibus": new Set(["id", "start", "uuid", "width", "height"]),
+    /*
+     * 정올 prod 강의영상. 다섯 값 뒤에 붙는 것들은 prod `renderHTML` 이 실제로 쓰거나
+     * (`data-bubble-menu`) prod 살균이 명시적으로 허용하는 목록 그대로다 — 여기서 빠지면
+     * 저장본을 정적으로 그릴 때만 속성이 달아나 왕복이 어긋나 보인다.
+     */
+    "tiptap-midibus": new Set([
+        "id",
+        "start",
+        "uuid",
+        "width",
+        "height",
+        "data-bubble-menu",
+        "data-hide-bubble-menu",
+        "data-resize-handler",
+        "data-resize-target",
+        "data-resize-min-height",
+        "data-resize-max-height",
+        "data-resize-aspect-ratio",
+        "data-resize-horizontal-align",
+    ]),
+    // 옛 임베드(`div.iframe-wrapper > iframe`). `src` 는 아래 호스트 허용 목록도 함께 탄다.
+    iframe: new Set([
+        "src",
+        "width",
+        "height",
+        "frameborder",
+        "allow",
+        "allowfullscreen",
+        "loading",
+        "title",
+        "credentialless",
+        "style",
+    ]),
+    // 옛 유튜브 파사드. prod 살균이 허용하는 다섯 개와 같다.
+    "lite-youtube": new Set(["videoid", "params", "nocookie", "title", "provider"]),
     "*": new Set(["class", "id"]),
 };
 const SAFE_URL_PATTERN = /^(?:https?:\/\/|\/[\w])/i;
@@ -62,7 +135,13 @@ export function sanitizeHtml(html) {
     return String(html || "")
         .replace(/<script[\s\S]*?<\/script>/gi, "")
         .replace(/<style[\s\S]*?<\/style>/gi, "")
-        .replace(/<\/?([a-zA-Z][a-zA-Z0-9]*)\b([^>]*)>/g, (match, tag, attrs) => {
+        /*
+         * ⚠️ 태그 이름에 **하이픈이 들어간다**(`[a-zA-Z0-9-]`). 예전 패턴은 `[a-zA-Z0-9]*` 라
+         * `<tiptap-midibus>` 에서 `tiptap` 까지만 집어 허용 목록에 걸리지 못했다 —
+         * 즉 `tiptap-midibus`·`math-inline`·`math-display` 세 줄이 **적혀 있는데도 전부
+         * 지워지고 있었다.** 커스텀 엘리먼트를 쓰는 이상 이름 규칙이 먼저 맞아야 한다.
+         */
+        .replace(/<\/?([a-zA-Z][a-zA-Z0-9-]*)\b([^>]*)>/g, (match, tag, attrs) => {
         const lower = tag.toLowerCase();
         if (!ALLOWED_TAGS.has(lower))
             return "";
@@ -90,6 +169,9 @@ function sanitizeAttributes(tag, attrString) {
         if ((name === "href" || name === "src") && !SAFE_URL_PATTERN.test(value)) {
             continue;
         }
+        if (tag === "iframe" && name === "src" && !isAllowedIframeSrc(value)) {
+            continue;
+        }
         result.push(` ${name}="${escapeHtml(value)}"`);
     }
     return result.join("");
@@ -144,10 +226,13 @@ export function transformLegacyHtml(html) {
         const name = text.trim() || "\uD30C\uC77C";
         return `<div data-file-id="${id}" data-file-name="${name}"></div>`;
     })
-        // <div class="tiptap-columns"> → <div data-type="columns">
-        .replace(/<div\s+class="tiptap-columns">/gi, '<div data-type="columns">')
-        // <div class="tiptap-column"> → <div data-type="column">
-        .replace(/<div\s+class="tiptap-column">/gi, '<div data-type="column">')
+        /*
+         * ⚠️ **옛 단(`div.tiptap-columns`)은 여기서 바꾸지 않는다.** 예전엔
+         * `data-type="columns"` 로 갈아 끼워 `Columns` 가 편집할 수 있게 했는데,
+         * 정올 prod 와 lms 는 **같은 Datastore 를 공유**한다 — 그렇게 저장하면 이번엔
+         * prod 에디터가 그 형식을 몰라 단이 통째로 사라진다. 손해를 반대로 옮길 뿐이다.
+         * 지금은 `LegacyBlock` 이 원본 마크업 그대로 품고 되쓴다(우선순위 100).
+         */
         // <tiptap-upload-skeleton ...> 제거
         .replace(/<tiptap-upload-skeleton[^>]*>(?:<\/tiptap-upload-skeleton>)?/gi, ""));
 }

package/dist/utils/sanitize.test.js

@@ -49,13 +49,16 @@ describe('transformLegacyHtml', () => {
         expect(result).toContain('data-pdf-src="https://example.com/doc.pdf"');
         expect(result).toContain('data-pdf-name="doc.pdf"');
     });
-    it('converts <div class="tiptap-columns"> to <div data-type="columns">', () => {
+    /*
+     * ⚠️ **예전엔 여기서 `data-type="columns"` 로 갈아 끼웠다.** 그러면 lms 에서는 단이
+     * 편집 가능해지지만, 정올 prod 와 lms 는 **같은 Datastore 를 공유**하므로 그렇게 저장한
+     * 순간 이번엔 prod 에디터가 그 형식을 몰라 단이 통째로 사라진다 — 손해를 반대편으로
+     * 옮길 뿐이었다. 지금은 `LegacyBlock` 이 원본 마크업 그대로 품고 되쓴다.
+     */
+    it('leaves <div class="tiptap-columns"> untouched for LegacyBlock', () => {
         const input = '<div class="tiptap-columns"><div class="tiptap-column">A</div></div>';
         const result = transformLegacyHtml(input);
-        expect(result).toContain('data-type="columns"');
-        expect(result).toContain('data-type="column"');
-        expect(result).not.toContain('tiptap-columns');
-        expect(result).not.toContain('tiptap-column');
+        expect(result).toBe(input);
     });
     it('removes <tiptap-upload-skeleton>', () => {
         const input = '<p>Before</p><tiptap-upload-skeleton data-id="x"></tiptap-upload-skeleton><p>After</p>';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@teriusu/rich-editor",
-  "version": "0.10.4",
+  "version": "0.10.6",
   "description": "TipTap 기반 Notion-style 리치 텍스트 에디터 (Svelte)",
   "type": "module",
   "svelte": "./dist/index.js",