@teriusu/rich-editor 0.10.6 → 0.10.7

package/dist/components/TipTapEditor.svelte

@@ -192,8 +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 { TiptapMidibus, type MidibusRenderer } from "../extensions/TiptapMidibus";
+  import { LegacyBlock, type LegacyBlockRenderer } from "../extensions/LegacyBlock";
   import { CardBlock } from "../extensions/CardBlock";
   import { MathInline, MathDisplay, type MathPrompt } from "../extensions/Math";
   import type { UploadHandler, PromptHandler, ToolbarMode, ToolbarFeature } from "../types";
@@ -213,6 +213,8 @@
     onPromptVideo,
     onPromptCardBackground,
     onPromptMath,
+    onRenderMidibus,
+    onRenderLegacyBlock,
     toolbarEnd,
     extensions: extraExtensions = [],
     editable = true,
@@ -234,6 +236,19 @@
     onPromptCardBackground?: PromptHandler;
     /** LaTeX 수식 편집. 미제공 시 내장 MathModal(실시간 미리보기) 폴백 */
     onPromptMath?: MathPrompt;
+    /**
+     * 정올 prod 형식 `<tiptap-midibus>` 를 **실제로 재생**할 플레이어.
+     *
+     * 패키지는 노드와 마크업만 책임지고, 플레이어는 호스트가 준다 — prod 플레이어가
+     * 로그인 계정 id·`GET /midibus/start/{id}`·PIP 헬퍼를 쓰기 때문이다(`resolver` 와
+     * 같은 패턴). 미제공 시 읽기 전용 자리표시자로 폴백한다.
+     */
+    onRenderMidibus?: MidibusRenderer;
+    /**
+     * 옛 블록(`lite-youtube`·`div.iframe-wrapper`·`div.tiptap-columns`)을 실제로 그릴 렌더러.
+     * `kind` 를 보고 아는 것만 그리고 나머지는 `false` 로 사양하면 된다.
+     */
+    onRenderLegacyBlock?: LegacyBlockRenderer;
     /** 고정 툴바 오른쪽 끝에 끼워 넣을 조각 */
     toolbarEnd?: Snippet;
     extensions?: AnyExtension[];
@@ -307,6 +322,19 @@
     pending?.resolve(value);
   }
 
+  /*
+   * 플레이어 주입 다리 둘. `promptMath` 와 **같은 이유로 함수를 직접 넘기지 않는다** —
+   * 확장은 `onMount` 에서 한 번만 만들어지므로, prop 을 그대로 넘기면 호스트가 나중에
+   * 붙인 렌더러를 영영 못 본다. 여기서 호출 시점에 읽는다.
+   *
+   * 안 준 호스트(코드패스)에게는 `false` 를 돌려 확장이 자리표시자로 되돌아가게 한다.
+   */
+  const renderMidibus: MidibusRenderer = (context) =>
+    onRenderMidibus ? onRenderMidibus(context) : false;
+
+  const renderLegacyBlock: LegacyBlockRenderer = (context) =>
+    onRenderLegacyBlock ? onRenderLegacyBlock(context) : false;
+
   let uploading = $state(false);
   let pdfInputEl: HTMLInputElement | undefined = $state();
   let fileInputEl: HTMLInputElement | undefined = $state();
@@ -682,8 +710,8 @@
          * `TiptapMidibus` 는 `<tiptap-midibus>` 를, `LegacyBlock` 은 `lite-youtube`·
          * `div.iframe-wrapper`·`div.tiptap-columns` 를 **원본 그대로** 읽고 되쓴다.
          */
-        TiptapMidibus,
-        LegacyBlock,
+        TiptapMidibus.configure({ renderer: renderMidibus }),
+        LegacyBlock.configure({ renderer: renderLegacyBlock }),
         CardBlock.configure({ promptBackground: onPromptCardBackground ?? null }),
         /*
          * ⚠️ **수학은 여기서 등록한다.** 예전엔 `MathInline`/`MathDisplay` 를 내보내기만 하고

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

@@ -1,5 +1,7 @@
 import type { Snippet } from "svelte";
 import type { AnyExtension } from "@tiptap/core";
+import { type MidibusRenderer } from "../extensions/TiptapMidibus";
+import { type LegacyBlockRenderer } from "../extensions/LegacyBlock";
 import { type MathPrompt } from "../extensions/Math";
 import type { UploadHandler, PromptHandler, ToolbarMode, ToolbarFeature } from "../types";
 import type { FileResolver } from "../extensions/FileAttachment";
@@ -19,6 +21,19 @@ type $$ComponentProps = {
     onPromptCardBackground?: PromptHandler;
     /** LaTeX 수식 편집. 미제공 시 내장 MathModal(실시간 미리보기) 폴백 */
     onPromptMath?: MathPrompt;
+    /**
+     * 정올 prod 형식 `<tiptap-midibus>` 를 **실제로 재생**할 플레이어.
+     *
+     * 패키지는 노드와 마크업만 책임지고, 플레이어는 호스트가 준다 — prod 플레이어가
+     * 로그인 계정 id·`GET /midibus/start/{id}`·PIP 헬퍼를 쓰기 때문이다(`resolver` 와
+     * 같은 패턴). 미제공 시 읽기 전용 자리표시자로 폴백한다.
+     */
+    onRenderMidibus?: MidibusRenderer;
+    /**
+     * 옛 블록(`lite-youtube`·`div.iframe-wrapper`·`div.tiptap-columns`)을 실제로 그릴 렌더러.
+     * `kind` 를 보고 아는 것만 그리고 나머지는 `false` 로 사양하면 된다.
+     */
+    onRenderLegacyBlock?: LegacyBlockRenderer;
     /** 고정 툴바 오른쪽 끝에 끼워 넣을 조각 */
     toolbarEnd?: Snippet;
     extensions?: AnyExtension[];

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;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"}
+{"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;AAWjD,OAAO,EAAiB,KAAK,eAAe,EAAE,MAAM,6BAA6B,CAAC;AAClF,OAAO,EAAe,KAAK,mBAAmB,EAAE,MAAM,2BAA2B,CAAC;AAElF,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;;;;;;OAMG;IACH,eAAe,CAAC,EAAE,eAAe,CAAC;IAClC;;;OAGG;IACH,mBAAmB,CAAC,EAAE,mBAAmB,CAAC;IAC1C,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;AAoyBJ,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

@@ -20,15 +20,44 @@
  * 값 없는 속성(`allowfullscreen`)은 `allowfullscreen=""` 로 정규화된다. prod 저장본도
  * 같은 경로(`getHTML()`)로 만들어져 이미 `=""` 꼴이라 실사용에서는 어긋나지 않는다.
  */
-import { Node } from "@tiptap/core";
+import { Node, type Editor } from "@tiptap/core";
+import type { Node as ProseMirrorNode } from "@tiptap/pm/model";
 /** ProseMirror `DOMOutputSpec` 과 같은 모양이되 **JSON 으로 저장 가능한** 형태. */
 export type LegacySpec = string | LegacySpecElement;
 export type LegacySpecElement = [string, Record<string, string>, ...LegacySpec[]];
 export type LegacyBlockKind = "youtube" | "iframe" | "columns";
+/**
+ * 호스트가 이 옛 블록을 **살려서 그리고 싶을 때** 받는 것.
+ *
+ * ⚠️ 세 종류가 한 노드에 묶여 있으므로 `kind` 를 보고 **아는 것만 그리고 나머지는
+ * `false` 로 사양**하면 된다. 정올 lms 는 `youtube` 만 그리고 `iframe`·`columns` 는
+ * 사양해 자리표시자를 그대로 쓴다.
+ */
+export interface LegacyBlockRenderContext {
+    /** 그려 넣을 빈 칸. 노드뷰가 만들어 준다(자리표시자 테두리는 아직 안 붙었다). */
+    element: HTMLElement;
+    kind: LegacyBlockKind;
+    /** 저장된 원본 마크업. 여기서 `videoid`·`src` 를 꺼내 쓴다. */
+    spec: LegacySpecElement | null;
+    node: ProseMirrorNode;
+    editor: Editor;
+}
+/** 치울 함수를 돌려주거나, `false` 로 사양하면 자리표시자로 되돌아간다. */
+export type LegacyBlockRenderResult = (() => void) | void | false;
+export type LegacyBlockRenderer = (context: LegacyBlockRenderContext) => LegacyBlockRenderResult;
+export interface LegacyBlockOptions {
+    /**
+     * 호스트가 심어 주는 실물 렌더러. 없거나 `false` 를 돌려주면 자리표시자.
+     *
+     * ⚠️ **주입은 화면만 바꾼다.** `renderHTML` 은 이 옵션을 보지 않고 `spec` 을 그대로
+     * 되뱉으므로, 렌더러가 있어도 왕복 바이트는 같다. 테스트로 박아 뒀다.
+     */
+    renderer: LegacyBlockRenderer | null;
+}
 /**
  * DOM 요소를 저장 가능한 명세로 옮긴다. 속성은 **적힌 순서 그대로**, 자식은 텍스트까지
  * 그대로 옮긴다. `on*` 만 떨어뜨린다 — 그것까지 되쓰면 보존이 아니라 XSS 통로가 된다.
  */
 export declare function elementToSpec(el: Element): LegacySpecElement;
-export declare const LegacyBlock: Node<any, any>;
+export declare const LegacyBlock: Node<LegacyBlockOptions, any>;
 //# sourceMappingURL=LegacyBlock.d.ts.map

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

@@ -1 +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"}
+{"version":3,"file":"LegacyBlock.d.ts","sourceRoot":"","sources":["../../src/extensions/LegacyBlock.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;;GAqBG;AACH,OAAO,EAAE,IAAI,EAAE,KAAK,MAAM,EAAE,MAAM,cAAc,CAAC;AACjD,OAAO,KAAK,EAAiB,IAAI,IAAI,eAAe,EAAE,MAAM,kBAAkB,CAAC;AAE/E,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;AAE/D;;;;;;GAMG;AACH,MAAM,WAAW,wBAAwB;IACxC,mDAAmD;IACnD,OAAO,EAAE,WAAW,CAAC;IACrB,IAAI,EAAE,eAAe,CAAC;IACtB,+CAA+C;IAC/C,IAAI,EAAE,iBAAiB,GAAG,IAAI,CAAC;IAC/B,IAAI,EAAE,eAAe,CAAC;IACtB,MAAM,EAAE,MAAM,CAAC;CACf;AAED,iDAAiD;AACjD,MAAM,MAAM,uBAAuB,GAAG,CAAC,MAAM,IAAI,CAAC,GAAG,IAAI,GAAG,KAAK,CAAC;AAClE,MAAM,MAAM,mBAAmB,GAAG,CAAC,OAAO,EAAE,wBAAwB,KAAK,uBAAuB,CAAC;AAEjG,MAAM,WAAW,kBAAkB;IAClC;;;;;OAKG;IACH,QAAQ,EAAE,mBAAmB,GAAG,IAAI,CAAC;CACrC;AAWD;;;GAGG;AACH,wBAAgB,aAAa,CAAC,EAAE,EAAE,OAAO,GAAG,iBAAiB,CAqB5D;AA6DD,eAAO,MAAM,WAAW,+BA6GtB,CAAC"}

package/dist/extensions/LegacyBlock.js

@@ -122,6 +122,9 @@ export const LegacyBlock = Node.create({
     atom: true,
     selectable: true,
     draggable: false,
+    addOptions() {
+        return { renderer: null };
+    },
     addAttributes() {
         return {
             /* 원본 마크업. `rendered: false` — `renderHTML` 이 직접 되뱉는다. */
@@ -152,13 +155,37 @@ export const LegacyBlock = Node.create({
         return cloneSpec(spec);
     },
     addNodeView() {
-        return ({ node }) => {
+        return ({ node, editor }) => {
             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", "");
+            const renderer = this.options.renderer;
+            if (renderer) {
+                let cleanup = false;
+                try {
+                    cleanup = renderer({ element: dom, kind, spec, node, editor });
+                }
+                catch {
+                    /* 호스트 렌더러가 터져도 노드까지 잃지는 않는다. */
+                    cleanup = false;
+                }
+                if (cleanup !== false) {
+                    return {
+                        dom,
+                        /* `TiptapMidibus` 와 같은 이유. 주석은 그쪽에. */
+                        update: () => false,
+                        ignoreMutation: () => true,
+                        destroy: () => {
+                            if (typeof cleanup === "function")
+                                cleanup();
+                        }
+                    };
+                }
+                dom.replaceChildren();
+            }
             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");

package/dist/extensions/LegacyBlock.test.js

@@ -92,4 +92,54 @@ describe('LegacyBlock — 옛 정올 블록 보존', () => {
             expect(clean).not.toContain('evil.example');
         });
     });
+    /*
+     * 호스트 렌더러 주입(정올 lms 는 `youtube` 만 그리고 나머지는 사양한다).
+     * **화면만 바뀌고 저장 바이트는 그대로여야 한다.**
+     */
+    describe('renderer 주입', () => {
+        function createWithRenderer(content, renderer) {
+            editor = new Editor({
+                element: document.createElement('div'),
+                extensions: [StarterKit, LegacyBlock.configure({ renderer }), Columns, Column],
+                content
+            });
+            return editor;
+        }
+        /** lms 가 실제로 쓰는 모양 — 유튜브만 그리고 나머지는 자리표시자에 맡긴다. */
+        const youtubeOnly = ({ element, kind, spec }) => {
+            if (kind !== 'youtube')
+                return false;
+            const videoid = spec?.[1]?.videoid ?? '';
+            element.innerHTML = `<div class="yt" data-videoid="${videoid}"></div>`;
+        };
+        it('셋을 함께 넣어도 왕복 바이트가 그대로다', () => {
+            const html = YOUTUBE + IFRAME + COLUMNS;
+            createWithRenderer(html, youtubeOnly);
+            expect(editor.getHTML()).toBe(html);
+        });
+        it('유튜브만 실물이 서고 나머지는 자리표시자다', () => {
+            createWithRenderer(YOUTUBE + IFRAME + COLUMNS, youtubeOnly);
+            const blocks = Array.from(editor.view.dom.querySelectorAll('[data-type="legacyBlock"]'));
+            const byKind = (kind) => blocks.find((el) => el.getAttribute('data-legacy-kind') === kind);
+            expect(byKind('youtube')?.querySelector('.yt')?.getAttribute('data-videoid')).toBe('dQw4w9WgXcQ');
+            expect(byKind('youtube')?.textContent).not.toContain('편집 불가');
+            expect(byKind('iframe')?.textContent).toContain('임베드 (옛 형식 · 편집 불가)');
+            expect(byKind('columns')?.textContent).toContain('단 나누기 (옛 형식 · 편집 불가)');
+        });
+        it('렌더러가 던져도 자리표시자로 살아남고 바이트도 그대로다', () => {
+            createWithRenderer(YOUTUBE, () => {
+                throw new Error('host boom');
+            });
+            expect(editor.view.dom.textContent).toContain('유튜브 영상 (옛 형식 · 편집 불가)');
+            expect(editor.getHTML()).toBe(YOUTUBE);
+        });
+        it('노드가 사라지면 치울 함수가 불린다', () => {
+            let destroyed = 0;
+            createWithRenderer(YOUTUBE, () => () => {
+                destroyed += 1;
+            });
+            editor.commands.setContent('<p>비움</p>');
+            expect(destroyed).toBe(1);
+        });
+    });
 });

package/dist/extensions/TiptapMidibus.d.ts

@@ -13,20 +13,45 @@
  * 2. `renderHTML` 은 `rawAttrs` 가 있으면 그것을 그대로 되뱉는다 → 왕복에서 바이트 보존.
  * 3. 화면에는 **읽기 전용 자리표시자**만 세운다(아래 이유).
  *
- * ⚠️ **재생 UI 는 일부러 포팅하지 않았다.** prod 플레이어
+ * ⚠️ **재생 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 가 쓰는 것과 같은 주소다.
+ * 것이라 패키지 안으로 들어올 수 없다. 그래서 파일 첨부가 `resolver` 를 받는 것과 같은
+ * 방식으로 `renderer` 를 받는다: **노드와 마크업은 여기, 플레이어는 앱.**
+ * 주입이 없으면(코드패스 등) 지금까지처럼 자리표시자로 폴백한다.
+ *
+ * ⚠️ 정올은 전 문서에 `COEP: require-corp` 를 걸어 두어서, `credentialless` 를 모르는
+ * 파이어폭스·사파리에서는 **prod 에서도 이 영상이 이미 빈 회색 박스**다. 주입된
+ * 플레이어도 그 미해결 문제를 그대로 물려받는다 — 나빠지지는 않지만 낫지도 않다.
+ * 자리표시자에는 플레이어 새 탭 링크를 둔다 — 비로그인 prod 가 쓰는 것과 같은 주소다.
+ */
+import { Node, type Editor } from "@tiptap/core";
+import type { Node as ProseMirrorNode } from "@tiptap/pm/model";
+/** 호스트 플레이어가 받는 것. 속성은 `node.attrs`(`id`·`start`·`uuid`·`width`·`height`). */
+export interface MidibusRenderContext {
+    /** 플레이어를 그려 넣을 빈 칸. 노드뷰가 만들어 준다. */
+    element: HTMLElement;
+    node: ProseMirrorNode;
+    editor: Editor;
+}
+/**
+ * 치울 함수를 돌려주거나(노드가 사라질 때 불린다), `false` 로 **사양**한다.
+ * 사양하면 노드뷰가 자리표시자로 되돌아가므로, 호스트는 조건부로만 그릴 수 있다.
  */
-import { Node } from "@tiptap/core";
+export type MidibusRenderResult = (() => void) | void | false;
+export type MidibusRenderer = (context: MidibusRenderContext) => MidibusRenderResult;
 export interface TiptapMidibusOptions {
     HTMLAttributes: Record<string, unknown>;
     /** 자리표시자의 "새 탭에서 보기" 가 향할 플레이어 주소 앞부분. */
     playerBaseUrl: string;
+    /**
+     * 호스트가 심어 주는 진짜 플레이어. 없거나 `false` 를 돌려주면 자리표시자.
+     *
+     * ⚠️ **주입은 화면만 바꾼다.** `renderHTML`(=`getHTML()`)은 이 옵션을 보지 않으므로
+     * 왕복 바이트 보존은 렌더러가 있든 없든 같다. 테스트로 박아 뒀다.
+     */
+    renderer: MidibusRenderer | null;
 }
 declare module "@tiptap/core" {
     interface Commands<ReturnType> {

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

@@ -1 +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"}
+{"version":3,"file":"TiptapMidibus.d.ts","sourceRoot":"","sources":["../../src/extensions/TiptapMidibus.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;GA2BG;AACH,OAAO,EAAE,IAAI,EAAmB,KAAK,MAAM,EAAE,MAAM,cAAc,CAAC;AAClE,OAAO,KAAK,EAAE,IAAI,IAAI,eAAe,EAAE,MAAM,kBAAkB,CAAC;AAEhE,8EAA8E;AAC9E,MAAM,WAAW,oBAAoB;IACpC,oCAAoC;IACpC,OAAO,EAAE,WAAW,CAAC;IACrB,IAAI,EAAE,eAAe,CAAC;IACtB,MAAM,EAAE,MAAM,CAAC;CACf;AAED;;;GAGG;AACH,MAAM,MAAM,mBAAmB,GAAG,CAAC,MAAM,IAAI,CAAC,GAAG,IAAI,GAAG,KAAK,CAAC;AAC9D,MAAM,MAAM,eAAe,GAAG,CAAC,OAAO,EAAE,oBAAoB,KAAK,mBAAmB,CAAC;AAErF,MAAM,WAAW,oBAAoB;IACpC,cAAc,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAAC;IACxC,0CAA0C;IAC1C,aAAa,EAAE,MAAM,CAAC;IACtB;;;;;OAKG;IACH,QAAQ,EAAE,eAAe,GAAG,IAAI,CAAC;CACjC;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,iCAgJxB,CAAC"}

package/dist/extensions/TiptapMidibus.js

@@ -13,14 +13,18 @@
  * 2. `renderHTML` 은 `rawAttrs` 가 있으면 그것을 그대로 되뱉는다 → 왕복에서 바이트 보존.
  * 3. 화면에는 **읽기 전용 자리표시자**만 세운다(아래 이유).
  *
- * ⚠️ **재생 UI 는 일부러 포팅하지 않았다.** prod 플레이어
+ * ⚠️ **재생 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 가 쓰는 것과 같은 주소다.
+ * 것이라 패키지 안으로 들어올 수 없다. 그래서 파일 첨부가 `resolver` 를 받는 것과 같은
+ * 방식으로 `renderer` 를 받는다: **노드와 마크업은 여기, 플레이어는 앱.**
+ * 주입이 없으면(코드패스 등) 지금까지처럼 자리표시자로 폴백한다.
+ *
+ * ⚠️ 정올은 전 문서에 `COEP: require-corp` 를 걸어 두어서, `credentialless` 를 모르는
+ * 파이어폭스·사파리에서는 **prod 에서도 이 영상이 이미 빈 회색 박스**다. 주입된
+ * 플레이어도 그 미해결 문제를 그대로 물려받는다 — 나빠지지는 않지만 낫지도 않다.
+ * 자리표시자에는 플레이어 새 탭 링크를 둔다 — 비로그인 prod 가 쓰는 것과 같은 주소다.
  */
 import { Node, mergeAttributes } from "@tiptap/core";
 /**
@@ -47,7 +51,8 @@ export const TiptapMidibus = Node.create({
     addOptions() {
         return {
             HTMLAttributes: {},
-            playerBaseUrl: "https://play.mbus.tv/v1/hls"
+            playerBaseUrl: "https://play.mbus.tv/v1/hls",
+            renderer: null
         };
     },
     /*
@@ -92,14 +97,46 @@ export const TiptapMidibus = Node.create({
         ];
     },
     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;
+        return ({ node, editor }) => {
             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 renderer = this.options.renderer;
+            if (renderer) {
+                let cleanup = false;
+                try {
+                    cleanup = renderer({ element: dom, node, editor });
+                }
+                catch {
+                    /* 호스트 플레이어가 터져도 노드까지 잃지는 않는다 — 자리표시자로 되돌아간다. */
+                    cleanup = false;
+                }
+                if (cleanup !== false) {
+                    return {
+                        dom,
+                        /*
+                         * 속성이 바뀌면 노드뷰를 **새로 만들게 둔다**(`false`). 호스트가 어떤
+                         * 틀로 그렸는지 여기서는 모르므로 갈아 끼울 방법이 없다.
+                         */
+                        update: () => false,
+                        /*
+                         * 호스트가 그린 DOM 은 **문서가 아니다.** 재생 중 iframe·버튼이
+                         * 바뀌는 것을 파서가 되읽으면 노드 속성이 오염된다.
+                         */
+                        ignoreMutation: () => true,
+                        destroy: () => {
+                            if (typeof cleanup === "function")
+                                cleanup();
+                        }
+                    };
+                }
+                /* 사양했다. 호스트가 뭔가 그리다 말았을 수 있으니 비우고 자리표시자로 간다. */
+                dom.replaceChildren();
+            }
+            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 aspect = document.createElement("div");
             aspect.style.cssText =
                 "position:relative;width:100%;padding-top:56.25%;background:#0b1020;border-radius:8px;overflow:hidden;";

package/dist/extensions/TiptapMidibus.test.js

@@ -86,4 +86,78 @@ describe('TiptapMidibus — prod 저장 형식 왕복', () => {
         expect(clean).toContain('data-bubble-menu="false"');
         expect(clean).toContain('</tiptap-midibus>');
     });
+    /*
+     * 호스트 플레이어 주입. **화면만 바뀌고 저장 바이트는 그대로여야 한다** — 이게
+     * 깨지면 lms 에서 열었다 저장하는 것만으로 prod 쪽 렌더가 어긋난다.
+     */
+    describe('renderer 주입', () => {
+        function createWithRenderer(content, renderer) {
+            editor = new Editor({
+                element: document.createElement('div'),
+                extensions: [StarterKit, TiptapMidibus.configure({ renderer })],
+                content
+            });
+            return editor;
+        }
+        it('주입해도 왕복 바이트가 그대로다', () => {
+            createWithRenderer(PROD, ({ element }) => {
+                element.appendChild(document.createElement('iframe'));
+            });
+            expect(editor.getHTML()).toBe(PROD);
+        });
+        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>';
+            createWithRenderer(html, ({ element }) => {
+                element.innerHTML = '<div class="player">재생 중</div>';
+            });
+            expect(editor.getHTML()).toBe(html);
+        });
+        /*
+         * ⚠️ **`height`·`start` 는 숫자로 들어온다.** TipTap 이 숫자꼴 속성값을 알아서
+         * 바꾼다 — 호스트 플레이어는 문자열이라고 단정하면 안 된다(정올 `MidibusInner`
+         * 는 둘 다 받도록 `Number.parseFloat(String(...))` 로 읽는다).
+         */
+        it('렌더러가 노드 속성을 받는다', () => {
+            let seen = null;
+            createWithRenderer(PROD, ({ node }) => {
+                seen = { ...node.attrs };
+            });
+            expect(seen).toMatchObject({ id: 'abc123', uuid: 'abc123', height: 600 });
+        });
+        it('주입하면 자리표시자 대신 호스트 DOM 이 선다', () => {
+            createWithRenderer(PROD, ({ element }) => {
+                element.setAttribute('data-host-player', '1');
+            });
+            const dom = editor.view.dom.querySelector('[data-type="tiptapMidibus"]');
+            expect(dom?.getAttribute('data-host-player')).toBe('1');
+            expect(dom?.textContent).not.toContain('새 탭에서 보기');
+        });
+        it('false 로 사양하면 자리표시자로 되돌아간다', () => {
+            createWithRenderer(PROD, ({ element }) => {
+                /* 그리다 만 흔적을 남겨도 자리표시자가 깨끗해야 한다. */
+                element.appendChild(document.createElement('span'));
+                return false;
+            });
+            const dom = editor.view.dom.querySelector('[data-type="tiptapMidibus"]');
+            expect(dom?.textContent).toContain('새 탭에서 보기');
+            expect(editor.getHTML()).toBe(PROD);
+        });
+        /* 호스트가 터져도 노드까지 잃으면 안 된다 — 보존이 최우선 계약이다. */
+        it('렌더러가 던져도 자리표시자로 살아남고 바이트도 그대로다', () => {
+            createWithRenderer(PROD, () => {
+                throw new Error('host boom');
+            });
+            const dom = editor.view.dom.querySelector('[data-type="tiptapMidibus"]');
+            expect(dom?.textContent).toContain('강의 영상');
+            expect(editor.getHTML()).toBe(PROD);
+        });
+        it('노드가 사라지면 치울 함수가 불린다', () => {
+            let destroyed = 0;
+            createWithRenderer(PROD, () => () => {
+                destroyed += 1;
+            });
+            editor.commands.setContent('<p>비움</p>');
+            expect(destroyed).toBe(1);
+        });
+    });
 });

package/dist/index.d.ts

@@ -6,9 +6,9 @@ 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 type { TiptapMidibusOptions, MidibusRawAttrs, MidibusRenderContext, MidibusRenderResult, MidibusRenderer } from "./extensions/TiptapMidibus";
 export { LegacyBlock, elementToSpec } from "./extensions/LegacyBlock";
-export type { LegacySpec, LegacySpecElement, LegacyBlockKind } from "./extensions/LegacyBlock";
+export type { LegacySpec, LegacySpecElement, LegacyBlockKind, LegacyBlockOptions, LegacyBlockRenderContext, LegacyBlockRenderResult, LegacyBlockRenderer } 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;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"}
+{"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,EACV,oBAAoB,EACpB,eAAe,EACf,oBAAoB,EACpB,mBAAmB,EACnB,eAAe,EAChB,MAAM,4BAA4B,CAAC;AACpC,OAAO,EAAE,WAAW,EAAE,aAAa,EAAE,MAAM,0BAA0B,CAAC;AACtE,YAAY,EACV,UAAU,EACV,iBAAiB,EACjB,eAAe,EACf,kBAAkB,EAClB,wBAAwB,EACxB,uBAAuB,EACvB,mBAAmB,EACpB,MAAM,0BAA0B,CAAC;AAClC,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/package.json

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