@teriusu/rich-editor 0.9.6 → 0.9.8

package/dist/extensions/NotionInputRules.d.ts

@@ -0,0 +1,59 @@
+/**
+ * 노션과 같은 입력 규칙(마크다운식 단축 입력).
+ *
+ * 기본값(TipTap StarterKit)은 `> ` 가 **인용문**이지만 노션은 `> ` 가 **토글**이고 인용문은
+ * `" ` 다. 두 편집기를 오가며 쓰는 사용자가 계속 헛손질을 하게 되므로 노션 쪽에 맞춘다
+ * (사용자 요청).
+ *
+ * | 치는 것 | 되는 것 |
+ * |---|---|
+ * | `" ` | 인용문 |
+ * | `> ` | 토글 |
+ * | `# > ` · `## > ` · `### > ` | 토글 제목 1·2·3 |
+ *
+ * `# > ` 는 **한 규칙이 아니다.** `# ` 에서 StarterKit 이 이미 제목으로 바꾸고, 이어지는
+ * `> ` 를 아래 토글 규칙이 받는다. 그래서 토글 규칙은 "지금 블록이 제목이면 그 단계를
+ * 토글 제목으로 물려준다" 만 하면 된다 — 제목 안에서 `> ` 를 쳐도 똑같이 동작한다.
+ */
+import { Extension } from "@tiptap/core";
+/**
+ * 인용문은 `" ` 로 만든다.
+ *
+ * ⚠️ **스마트 따옴표(`“`)도 받아야 한다.** `Typography` 확장이 켜져 있으면 `"` 를 치는 순간
+ * 여는 따옴표 `“` 로 먼저 바꿔 버려서, 곧은 따옴표만 찾는 정규식은 **영영 매치되지 않는다.**
+ * (편집 모드에서만 `Typography` 를 다는데, 하필 입력 규칙이 필요한 곳이 바로 거기다.)
+ */
+export declare const BLOCKQUOTE_INPUT_REGEX: RegExp;
+export declare const NotionBlockquote: import("@tiptap/core").Node<import("@tiptap/extension-blockquote").BlockquoteOptions, any>;
+/**
+ * 토글 제목을 위해 `detailsSummary` 에 **단계(`level`)** 를 붙인 판본.
+ *
+ * 제목을 `<summary>` 안에 **노드로** 넣지 않는다. `detailsSummary` 의 content 는 `text*`
+ * 라 블록인 제목이 아예 들어가지 못하고, 스키마를 열면 옛 문서와 호환이 깨진다.
+ * 대신 `data-level` 속성 하나로 표시하고 크기는 CSS 가 준다(`editor.css` 의
+ * `summary[data-level]`). 저장된 HTML 도 `<summary data-level="1">` 한 겹이라
+ * 에디터 밖에서 읽어도 안전하다.
+ *
+ * ⚠️ 기본값은 `0`(= 일반 토글)이고, 그때는 **속성을 아예 내보내지 않는다.** 지금까지 저장된
+ * 토글에 `data-level="0"` 이 새로 붙어 문서가 통째로 바뀐 것처럼 보이는 일을 막는다.
+ */
+export declare const LeveledDetailsSummary: import("@tiptap/core").Node<import("@tiptap/extension-details").DetailsSummaryOptions, any>;
+declare module "@tiptap/core" {
+    interface Commands<ReturnType> {
+        notionToggle: {
+            /**
+             * 토글을 만들고 제목 단계를 준다. `0` 이면 평범한 토글.
+             *
+             * 입력 규칙(`> `)과 메뉴(`토글 제목 1`)가 **같은 것을 쓴다** — 두 벌로 두면
+             * 한쪽만 고쳐져 "쳐서 만든 것과 메뉴로 만든 것이 다른" 상태가 된다.
+             */
+            setToggleHeading: (level: 0 | 1 | 2 | 3) => ReturnType;
+        };
+    }
+}
+export declare const TOGGLE_INPUT_REGEX: RegExp;
+/**
+ * `> ` → 토글. 제목 안에서 쳤으면 그 단계를 토글 제목으로 물려준다.
+ */
+export declare const NotionToggleInputRule: Extension<any, any>;
+//# sourceMappingURL=NotionInputRules.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"NotionInputRules.d.ts","sourceRoot":"","sources":["../../src/extensions/NotionInputRules.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;GAgBG;AACH,OAAO,EAAE,SAAS,EAAgC,MAAM,cAAc,CAAC;AAIvE;;;;;;GAMG;AACH,eAAO,MAAM,sBAAsB,QAAgB,CAAC;AAEpD,eAAO,MAAM,gBAAgB,4FAS3B,CAAC;AAEH;;;;;;;;;;;GAWG;AACH,eAAO,MAAM,qBAAqB,6FAehC,CAAC;AAEH,OAAO,QAAQ,cAAc,CAAC;IAC5B,UAAU,QAAQ,CAAC,UAAU;QAC3B,YAAY,EAAE;YACZ;;;;;eAKG;YACH,gBAAgB,EAAE,CAAC,KAAK,EAAE,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,KAAK,UAAU,CAAC;SACxD,CAAC;KACH;CACF;AAED,eAAO,MAAM,kBAAkB,QAAa,CAAC;AAE7C;;GAEG;AACH,eAAO,MAAM,qBAAqB,qBAuFhC,CAAC"}

package/dist/extensions/NotionInputRules.js

@@ -0,0 +1,141 @@
+/**
+ * 노션과 같은 입력 규칙(마크다운식 단축 입력).
+ *
+ * 기본값(TipTap StarterKit)은 `> ` 가 **인용문**이지만 노션은 `> ` 가 **토글**이고 인용문은
+ * `" ` 다. 두 편집기를 오가며 쓰는 사용자가 계속 헛손질을 하게 되므로 노션 쪽에 맞춘다
+ * (사용자 요청).
+ *
+ * | 치는 것 | 되는 것 |
+ * |---|---|
+ * | `" ` | 인용문 |
+ * | `> ` | 토글 |
+ * | `# > ` · `## > ` · `### > ` | 토글 제목 1·2·3 |
+ *
+ * `# > ` 는 **한 규칙이 아니다.** `# ` 에서 StarterKit 이 이미 제목으로 바꾸고, 이어지는
+ * `> ` 를 아래 토글 규칙이 받는다. 그래서 토글 규칙은 "지금 블록이 제목이면 그 단계를
+ * 토글 제목으로 물려준다" 만 하면 된다 — 제목 안에서 `> ` 를 쳐도 똑같이 동작한다.
+ */
+import { Extension, InputRule, wrappingInputRule } from "@tiptap/core";
+import { Blockquote } from "@tiptap/extension-blockquote";
+import { DetailsSummary } from "@tiptap/extension-details";
+/**
+ * 인용문은 `" ` 로 만든다.
+ *
+ * ⚠️ **스마트 따옴표(`“`)도 받아야 한다.** `Typography` 확장이 켜져 있으면 `"` 를 치는 순간
+ * 여는 따옴표 `“` 로 먼저 바꿔 버려서, 곧은 따옴표만 찾는 정규식은 **영영 매치되지 않는다.**
+ * (편집 모드에서만 `Typography` 를 다는데, 하필 입력 규칙이 필요한 곳이 바로 거기다.)
+ */
+export const BLOCKQUOTE_INPUT_REGEX = /^\s*["“]\s$/;
+export const NotionBlockquote = Blockquote.extend({
+    addInputRules() {
+        return [
+            wrappingInputRule({
+                find: BLOCKQUOTE_INPUT_REGEX,
+                type: this.type,
+            }),
+        ];
+    },
+});
+/**
+ * 토글 제목을 위해 `detailsSummary` 에 **단계(`level`)** 를 붙인 판본.
+ *
+ * 제목을 `<summary>` 안에 **노드로** 넣지 않는다. `detailsSummary` 의 content 는 `text*`
+ * 라 블록인 제목이 아예 들어가지 못하고, 스키마를 열면 옛 문서와 호환이 깨진다.
+ * 대신 `data-level` 속성 하나로 표시하고 크기는 CSS 가 준다(`editor.css` 의
+ * `summary[data-level]`). 저장된 HTML 도 `<summary data-level="1">` 한 겹이라
+ * 에디터 밖에서 읽어도 안전하다.
+ *
+ * ⚠️ 기본값은 `0`(= 일반 토글)이고, 그때는 **속성을 아예 내보내지 않는다.** 지금까지 저장된
+ * 토글에 `data-level="0"` 이 새로 붙어 문서가 통째로 바뀐 것처럼 보이는 일을 막는다.
+ */
+export const LeveledDetailsSummary = DetailsSummary.extend({
+    addAttributes() {
+        return {
+            ...this.parent?.(),
+            level: {
+                default: 0,
+                parseHTML: (element) => {
+                    const raw = Number(element.getAttribute("data-level"));
+                    return raw === 1 || raw === 2 || raw === 3 ? raw : 0;
+                },
+                renderHTML: (attributes) => attributes.level ? { "data-level": String(attributes.level) } : {},
+            },
+        };
+    },
+});
+export const TOGGLE_INPUT_REGEX = /^\s*>\s$/;
+/**
+ * `> ` → 토글. 제목 안에서 쳤으면 그 단계를 토글 제목으로 물려준다.
+ */
+export const NotionToggleInputRule = Extension.create({
+    name: "notionToggleInputRule",
+    addCommands() {
+        return {
+            setToggleHeading: (level) => ({ chain, state }) => {
+                const { schema, selection } = state;
+                if (!schema.nodes.details || !schema.nodes.detailsContent)
+                    return false;
+                const range = selection.$from.blockRange(selection.$to);
+                if (!range)
+                    return false;
+                const slice = state.doc.slice(range.start, range.end);
+                if (!schema.nodes.detailsContent.contentMatch.matchFragment(slice.content)) {
+                    return false;
+                }
+                /*
+                 * 안으로 들어갈 내용. **제목은 문단으로 눕혀서** 넣는다 — 제목인 채로 두면
+                 * 접힌 안쪽에 큰 글자가 숨고, 정작 토글 머리는 빈 줄이 된다.
+                 * (단계는 아래 `detailsSummary` 의 `level` 로 옮겨 간다.)
+                 */
+                const content = (slice.toJSON()?.content || []).map((node) => node?.type === "heading"
+                    ? { ...node, type: "paragraph", attrs: undefined }
+                    : node);
+                /*
+                 * ⚠️ **한 번에 만든다.** 예전엔 `setDetails()` 로 만든 뒤 `updateAttributes` 로
+                 * 단계를 덧붙였는데, 그 사이 `setNodeMarkup` 이 selection 을 다시 매핑하면서
+                 * **빈 제목 칸에 있던 커서가 토글 바깥으로 밀렸다** — 메뉴로 토글을 만들면
+                 * 이어 친 글자가 토글 아래 새 문단에 들어갔다(실측).
+                 * 노드를 처음부터 옳게 만들면 커서를 한 번만 놓으면 된다.
+                 */
+                return chain()
+                    .insertContentAt({ from: range.start, to: range.end }, {
+                    type: "details",
+                    content: [
+                        { type: "detailsSummary", attrs: { level } },
+                        { type: "detailsContent", content },
+                    ],
+                })
+                    /* details(1) + detailsSummary(1) = 제목 칸 안쪽. */
+                    .setTextSelection(range.start + 2)
+                    .run();
+            },
+        };
+    },
+    addInputRules() {
+        return [
+            new InputRule({
+                find: TOGGLE_INPUT_REGEX,
+                handler: ({ state, range, chain }) => {
+                    /*
+                     * 토글 확장이 없는 조합(호스트가 details 를 빼고 쓰는 경우)에서는 아무 일도
+                     * 하지 않는다. `null` 을 돌려주면 규칙이 적용되지 않고 친 글자가 그대로 남는다.
+                     */
+                    if (!state.schema.nodes.details)
+                        return null;
+                    const $start = state.doc.resolve(range.from);
+                    const parent = $start.parent;
+                    /*
+                     * ⚠️ **토글 제목 줄에서는 걸지 않는다.** `detailsSummary` 의 content 는 `text*`
+                     * 라 그 안에 토글을 넣을 수 없어 `setDetails()` 가 실패하는데, 그러면 친 `> ` 만
+                     * 사라지고 아무것도 안 생긴 것처럼 보인다.
+                     */
+                    if (parent.type.name === "detailsSummary")
+                        return null;
+                    const level = (parent.type.name === "heading" ? Number(parent.attrs.level) || 0 : 0);
+                    /* 친 `> ` 를 지우고, 나머지는 메뉴와 **같은 커맨드**에 맡긴다. */
+                    chain().deleteRange(range).setToggleHeading(level).run();
+                },
+            }),
+        ];
+    },
+});

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

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

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

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

package/dist/extensions/NotionInputRules.test.js

@@ -0,0 +1,117 @@
+import { describe, it, expect, afterEach } from 'vitest';
+import { Editor } from '@tiptap/core';
+import StarterKit from '@tiptap/starter-kit';
+import { DetailsContent } from '@tiptap/extension-details';
+import { FixedDetails } from './FixedDetails';
+import { NotionBlockquote, LeveledDetailsSummary, NotionToggleInputRule, BLOCKQUOTE_INPUT_REGEX, TOGGLE_INPUT_REGEX } from './NotionInputRules';
+/*
+ * 토글·토글 제목은 **커서가 어디 남는지**가 곧 사용성이다. 만들어졌는지만 보면
+ * "토글은 생겼는데 이어 친 글자가 엉뚱한 데 들어가는" 상태를 놓친다 — 실제로 그랬다.
+ * 그래서 노드 구조와 selection 을 **함께** 단언한다.
+ */
+describe('노션식 입력 규칙 · 토글 제목', () => {
+    let editor;
+    function createEditor(content = '<p></p>') {
+        editor = new Editor({
+            element: document.createElement('div'),
+            extensions: [
+                StarterKit.configure({ blockquote: false }),
+                NotionBlockquote,
+                FixedDetails,
+                DetailsContent,
+                LeveledDetailsSummary,
+                NotionToggleInputRule
+            ],
+            content
+        });
+        return editor;
+    }
+    const json = () => editor.getJSON();
+    const firstBlock = () => json().content?.[0];
+    afterEach(() => {
+        editor?.destroy();
+    });
+    describe('setToggleHeading', () => {
+        it('빈 문단에서 토글을 만들고 커서를 제목 칸에 둔다', () => {
+            createEditor();
+            editor.commands.setToggleHeading(0);
+            const details = firstBlock();
+            expect(details?.type).toBe('details');
+            expect(details?.content?.[0].type).toBe('detailsSummary');
+            /*
+             * ⚠️ 핵심 단언. 커서가 제목 칸(`detailsSummary`) 안에 있어야 이어서 친 글자가
+             * 토글 제목이 된다. 예전 구현(`setDetails` → `updateAttributes`)에서는 여기서
+             * 커서가 토글 **바깥**으로 밀려 글자가 아래 문단에 들어갔다.
+             */
+            const { $from } = editor.state.selection;
+            expect($from.parent.type.name).toBe('detailsSummary');
+        });
+        it('이어서 친 글자가 제목 칸에 들어간다', () => {
+            createEditor();
+            editor.commands.setToggleHeading(1);
+            editor.commands.insertContent('접히는 제목');
+            const summary = firstBlock()?.content?.[0];
+            expect(summary?.type).toBe('detailsSummary');
+            expect(summary?.content?.[0].text).toBe('접히는 제목');
+        });
+        it('단계를 detailsSummary 의 level 로 남긴다', () => {
+            createEditor();
+            editor.commands.setToggleHeading(2);
+            expect(firstBlock()?.content?.[0].attrs?.level).toBe(2);
+        });
+        it('level 0 이면 data-level 을 아예 내보내지 않는다(옛 문서와 같은 모양)', () => {
+            createEditor();
+            editor.commands.setToggleHeading(0);
+            expect(editor.getHTML()).not.toContain('data-level');
+        });
+        it('level 1 은 data-level="1" 로 저장된다', () => {
+            createEditor();
+            editor.commands.setToggleHeading(1);
+            expect(editor.getHTML()).toContain('data-level="1"');
+        });
+        /*
+         * ⚠️ 제목 위에서 부르면 제목이 **본문으로 눕혀져** 안에 들어가야 한다.
+         * 제목인 채로 들어가면 큰 글자가 접힌 안쪽에 숨고 토글 머리는 빈 줄이 된다.
+         */
+        it('제목 위에서 부르면 제목을 문단으로 눕혀 안에 넣는다', () => {
+            createEditor('<h1>원래 제목</h1>');
+            editor.commands.selectAll();
+            editor.commands.setToggleHeading(1);
+            const details = firstBlock();
+            const inner = details?.content?.[1];
+            expect(inner?.type).toBe('detailsContent');
+            expect(inner?.content?.[0].type).toBe('paragraph');
+            expect(inner?.content?.[0].content?.[0].text).toBe('원래 제목');
+        });
+        it('옛 문서의 토글(data-level 없음)은 level 0 으로 읽힌다', () => {
+            createEditor('<details><summary>옛 토글</summary><div>본문</div></details>');
+            expect(firstBlock()?.content?.[0].attrs?.level).toBe(0);
+        });
+    });
+    describe('인용문 입력 규칙', () => {
+        it('StarterKit 의 `> ` 대신 `" ` 가 인용문을 만든다', () => {
+            createEditor();
+            // 입력 규칙은 실제 타이핑에만 걸리므로 명령으로 대신 확인한다.
+            editor.commands.toggleBlockquote();
+            expect(firstBlock()?.type).toBe('blockquote');
+        });
+        /*
+         * ⚠️ **두 규칙이 같은 키를 노리면 안 된다.** `> ` 가 인용문에도 남아 있으면 어느
+         * 쪽이 이길지 확장 등록 순서에 달리게 되어, 같은 키를 쳤는데 결과가 갈린다.
+         * 그래서 겹치지 않는지를 정규식 수준에서 못박는다.
+         */
+        it('`>` 는 토글만, `"` 는 인용문만 받는다 (서로 겹치지 않는다)', () => {
+            expect(TOGGLE_INPUT_REGEX.test('> ')).toBe(true);
+            expect(BLOCKQUOTE_INPUT_REGEX.test('> ')).toBe(false);
+            expect(BLOCKQUOTE_INPUT_REGEX.test('" ')).toBe(true);
+            expect(TOGGLE_INPUT_REGEX.test('" ')).toBe(false);
+        });
+        /*
+         * `Typography` 가 `"` 를 여는 따옴표로 먼저 바꾸므로, 곧은 따옴표만 찾으면
+         * 규칙이 영영 안 걸린다.
+         */
+        it('스마트 따옴표(“)도 인용문으로 받는다', () => {
+            expect(BLOCKQUOTE_INPUT_REGEX.test('“ ')).toBe(true);
+        });
+    });
+});

package/dist/extensions/VideoEmbed.d.ts

@@ -0,0 +1,36 @@
+/**
+ * 범용 영상 임베드 — 유튜브·Vimeo, 그리고 그대로 넣을 수 있는 임베드 주소.
+ *
+ * ⚠️ **`MbusVideo` 와 따로 둔다.** 틀(16:9 iframe)은 똑같지만, mbus 노드는 앱 쪽
+ * `MidibusInner.svelte` 가 `play.mbus.tv` 전용 파라미터(`label`·`start`·`volume`)를 붙여
+ * 처리한다. 유튜브 주소를 `data-mbus-src` 로 저장하면 그 경로로 흘러 들어가 엉뚱하게
+ * 다뤄진다. 저장 형식이 곧 계약이라, 담기는 것이 달라지면 이름도 달라야 한다.
+ */
+import { Node } from "@tiptap/core";
+export interface VideoEmbedOptions {
+    HTMLAttributes: Record<string, unknown>;
+}
+declare module "@tiptap/core" {
+    interface Commands<ReturnType> {
+        videoEmbed: {
+            setVideoEmbed: (attrs: {
+                src: string;
+                width?: string;
+            }) => ReturnType;
+        };
+    }
+}
+/**
+ * 붙여넣은 주소를 **iframe 에 넣을 수 있는 주소**로 바꾼다.
+ *
+ * ⚠️ 이 변환이 이 확장의 핵심이다. 사람들이 붙여넣는 `youtube.com/watch?v=…` 를 그대로
+ * iframe 에 넣으면 유튜브가 `X-Frame-Options` 로 **거부**한다(화면엔 빈 칸만 남는다).
+ * `embed/<id>` 로 바꿔야 비로소 실린다. mbus 주소는 그 자체가 플레이어 페이지라 이런
+ * 손질이 필요 없었고, 그래서 `MbusVideo` 에는 이런 코드가 아예 없다.
+ *
+ * 아는 서비스가 아니면 **손대지 않고 그대로 돌려준다** — 이미 임베드 주소를 들고 온
+ * 경우(사내 플레이어 등)를 막지 않기 위해서다.
+ */
+export declare function toEmbedUrl(raw: string): string;
+export declare const VideoEmbed: Node<VideoEmbedOptions, any>;
+//# sourceMappingURL=VideoEmbed.d.ts.map

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

@@ -0,0 +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"}

package/dist/extensions/VideoEmbed.js

@@ -0,0 +1,246 @@
+/**
+ * 범용 영상 임베드 — 유튜브·Vimeo, 그리고 그대로 넣을 수 있는 임베드 주소.
+ *
+ * ⚠️ **`MbusVideo` 와 따로 둔다.** 틀(16:9 iframe)은 똑같지만, mbus 노드는 앱 쪽
+ * `MidibusInner.svelte` 가 `play.mbus.tv` 전용 파라미터(`label`·`start`·`volume`)를 붙여
+ * 처리한다. 유튜브 주소를 `data-mbus-src` 로 저장하면 그 경로로 흘러 들어가 엉뚱하게
+ * 다뤄진다. 저장 형식이 곧 계약이라, 담기는 것이 달라지면 이름도 달라야 한다.
+ */
+import { Node, mergeAttributes } from "@tiptap/core";
+import { attachResize } from "../utils/resize";
+/** `1m30s` · `90` 처럼 적히는 유튜브 타임스탬프를 초로 바꾼다. */
+function parseTimestamp(raw) {
+    if (!raw)
+        return null;
+    if (/^\d+$/.test(raw))
+        return Number(raw);
+    const m = raw.match(/^(?:(\d+)h)?(?:(\d+)m)?(?:(\d+)s)?$/);
+    if (!m || (!m[1] && !m[2] && !m[3]))
+        return null;
+    return Number(m[1] || 0) * 3600 + Number(m[2] || 0) * 60 + Number(m[3] || 0);
+}
+/**
+ * 붙여넣은 주소를 **iframe 에 넣을 수 있는 주소**로 바꾼다.
+ *
+ * ⚠️ 이 변환이 이 확장의 핵심이다. 사람들이 붙여넣는 `youtube.com/watch?v=…` 를 그대로
+ * iframe 에 넣으면 유튜브가 `X-Frame-Options` 로 **거부**한다(화면엔 빈 칸만 남는다).
+ * `embed/<id>` 로 바꿔야 비로소 실린다. mbus 주소는 그 자체가 플레이어 페이지라 이런
+ * 손질이 필요 없었고, 그래서 `MbusVideo` 에는 이런 코드가 아예 없다.
+ *
+ * 아는 서비스가 아니면 **손대지 않고 그대로 돌려준다** — 이미 임베드 주소를 들고 온
+ * 경우(사내 플레이어 등)를 막지 않기 위해서다.
+ */
+export function toEmbedUrl(raw) {
+    const trimmed = raw.trim();
+    if (!trimmed)
+        return trimmed;
+    let u;
+    try {
+        u = new URL(trimmed);
+    }
+    catch {
+        return trimmed;
+    }
+    const host = u.hostname.replace(/^www\./, "");
+    // ── 유튜브 ──
+    const isYouTube = host === "youtube.com" ||
+        host === "m.youtube.com" ||
+        host === "music.youtube.com" ||
+        host === "youtube-nocookie.com" ||
+        host === "youtu.be";
+    if (isYouTube) {
+        let id = "";
+        if (host === "youtu.be") {
+            id = u.pathname.split("/").filter(Boolean)[0] || "";
+        }
+        else if (u.pathname === "/watch") {
+            id = u.searchParams.get("v") || "";
+        }
+        else {
+            // /embed/ID · /shorts/ID · /live/ID · /v/ID
+            const parts = u.pathname.split("/").filter(Boolean);
+            if (["embed", "shorts", "live", "v"].includes(parts[0]))
+                id = parts[1] || "";
+        }
+        if (!id)
+            return trimmed;
+        const embed = new URL(`https://www.youtube.com/embed/${id}`);
+        const start = parseTimestamp(u.searchParams.get("t") || u.searchParams.get("start"));
+        if (start)
+            embed.searchParams.set("start", String(start));
+        // 재생목록 안의 영상이면 목록을 유지한다.
+        const list = u.searchParams.get("list");
+        if (list)
+            embed.searchParams.set("list", list);
+        return embed.toString();
+    }
+    // ── Vimeo ──
+    if (host === "vimeo.com" || host === "player.vimeo.com") {
+        if (host === "player.vimeo.com")
+            return trimmed; // 이미 플레이어 주소
+        // /123456 · /channels/xxx/123456 · /groups/xxx/videos/123456
+        const id = u.pathname.split("/").filter(Boolean).filter((p) => /^\d+$/.test(p)).pop();
+        if (!id)
+            return trimmed;
+        return `https://player.vimeo.com/video/${id}`;
+    }
+    return trimmed;
+}
+/**
+ * 이 브라우저에서 **COEP 없는 남의 iframe** 을 실을 수 있는지.
+ *
+ * ⚠️ 정올은 전 브라우저에 `COEP: require-corp`(교차 출처 격리)를 건다. 격리된 문서에
+ * 자기 COEP 를 안 보내는 제3자 iframe(유튜브·Vimeo·mbus 전부 해당)을 넣는 방법은
+ * `credentialless` 속성뿐인데 **크로미움 전용**이다(파이어폭스 미구현·사파리 거부).
+ * 그래서 정올 파폭·사파리에서는 mbus 영상이 지금 **빈 회색 박스**로 남아 있다.
+ *
+ * 격리되지 않은 문서(코드패스의 비-크로미움 등)에서는 평범한 크로스오리진 iframe 이라
+ * 아무 문제가 없다 — 그래서 격리 여부와 지원 여부를 **함께** 본다.
+ */
+function canEmbedCrossOrigin() {
+    if (typeof window === "undefined")
+        return true;
+    if (!window.crossOriginIsolated)
+        return true;
+    return "credentialless" in HTMLIFrameElement.prototype;
+}
+export const VideoEmbed = Node.create({
+    name: "videoEmbed",
+    group: "block",
+    atom: true,
+    draggable: true,
+    addOptions() {
+        return { HTMLAttributes: {} };
+    },
+    addAttributes() {
+        return {
+            src: { default: null },
+            width: { default: null }
+        };
+    },
+    parseHTML() {
+        return [
+            {
+                tag: "div[data-video-src]",
+                getAttrs: (dom) => {
+                    const el = dom;
+                    return {
+                        src: el.getAttribute("data-video-src"),
+                        width: el.getAttribute("data-video-width") || el.style?.width || null
+                    };
+                }
+            }
+        ];
+    },
+    renderHTML({ HTMLAttributes }) {
+        const attrs = {
+            "data-video-src": HTMLAttributes.src
+        };
+        if (HTMLAttributes.width) {
+            attrs["data-video-width"] = HTMLAttributes.width;
+            attrs["style"] = `width: ${HTMLAttributes.width}`;
+        }
+        return ["div", mergeAttributes(this.options.HTMLAttributes, attrs)];
+    },
+    addNodeView() {
+        return ({ node, editor, getPos }) => {
+            // 리사이즈가 attrs 를 되쓰므로 **항상 최신 노드**여야 한다(mbus 의 stale 버그와 같은 자리).
+            let currentNode = node;
+            let detachResize = null;
+            const dom = document.createElement("div");
+            dom.setAttribute("data-type", "videoEmbed");
+            dom.setAttribute("data-node-view-wrapper", "");
+            dom.style.cssText = "margin:8px 0;position:relative;box-sizing:border-box;max-width:100%;";
+            if (node.attrs.width)
+                dom.style.width = node.attrs.width;
+            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 src = node.attrs.src;
+            if (src && canEmbedCrossOrigin()) {
+                const iframe = document.createElement("iframe");
+                iframe.src = src;
+                iframe.allow = "autoplay; fullscreen; encrypted-media; picture-in-picture";
+                iframe.setAttribute("allowfullscreen", "");
+                iframe.setAttribute("loading", "lazy");
+                /*
+                 * 격리된 문서에서 COEP 없는 영상을 싣는 유일한 통로. 크로미움이 아니면 이
+                 * 속성 자체가 무시되므로 조건 없이 붙여도 해가 없다.
+                 */
+                iframe.setAttribute("credentialless", "");
+                iframe.style.cssText =
+                    "position:absolute;inset:0;width:100%;height:100%;border:0;display:block;";
+                aspect.appendChild(iframe);
+            }
+            else if (src) {
+                /*
+                 * 실을 수 없는 브라우저 — **빈 박스로 두지 않는다.** 그러면 사용자는 영상이
+                 * 깨진 줄 알지 이유를 모른다. 무엇이 있었는지와 나가는 길을 보여 준다.
+                 */
+                const poster = document.createElement("div");
+                poster.style.cssText =
+                    "position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;padding:16px;text-align:center;color:#c7cbd4;";
+                const label = document.createElement("span");
+                label.textContent = "이 브라우저에서는 영상을 여기 띄울 수 없습니다";
+                label.style.cssText = "font-size:13px;line-height:1.5;";
+                poster.appendChild(label);
+                const open = document.createElement("a");
+                open.href = src;
+                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);
+                aspect.appendChild(poster);
+            }
+            if (editor.isEditable) {
+                const del = document.createElement("button");
+                del.type = "button";
+                del.textContent = "×";
+                del.style.cssText =
+                    "position:absolute;top:8px;right:8px;width:28px;height:28px;border:none;background:rgba(0,0,0,0.6);color:#fff;font-size:18px;cursor:pointer;border-radius:50%;display:flex;align-items:center;justify-content:center;z-index:2;";
+                del.addEventListener("click", () => {
+                    const pos = typeof getPos === "function" ? getPos() : null;
+                    if (pos != null) {
+                        editor.commands.deleteRange({ from: pos, to: pos + node.nodeSize });
+                    }
+                });
+                dom.appendChild(del);
+                detachResize = attachResize({
+                    dom,
+                    editor,
+                    getPos: () => (typeof getPos === "function" ? getPos() : undefined),
+                    getNode: () => currentNode,
+                    axis: "x",
+                    label: "영상 너비 조절"
+                });
+            }
+            return {
+                dom,
+                update: (updated) => {
+                    if (updated.type !== currentNode.type)
+                        return false;
+                    const w = updated.attrs.width;
+                    dom.style.width = w || "";
+                    currentNode = updated;
+                    return true;
+                },
+                destroy: () => {
+                    detachResize?.();
+                }
+            };
+        };
+    },
+    addCommands() {
+        return {
+            setVideoEmbed: (attrs) => ({ chain }) => {
+                // 넣는 길이 여럿이라(툴바·슬래시·붙여넣기) **여기서 한 번에** 정규화한다.
+                return chain()
+                    .insertContent({ type: this.name, attrs: { ...attrs, src: toEmbedUrl(attrs.src) } })
+                    .run();
+            }
+        };
+    }
+});

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

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

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

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