@teriusu/rich-editor 0.4.1

package/dist/extensions/Indent.js

@@ -0,0 +1,87 @@
+import { Extension } from "@tiptap/core";
+const INDENT_STEP = 2; // em per level
+const MAX_INDENT = 8;
+export const Indent = Extension.create({
+    name: "indent",
+    addGlobalAttributes() {
+        return [
+            {
+                types: ["paragraph", "heading"],
+                attributes: {
+                    indent: {
+                        default: 0,
+                        parseHTML: (element) => {
+                            const ml = element.style.marginLeft;
+                            if (!ml)
+                                return 0;
+                            const value = parseFloat(ml);
+                            if (ml.endsWith("px"))
+                                return Math.round(value / 40) || 0;
+                            return Math.round(value / INDENT_STEP) || 0;
+                        },
+                        renderHTML: (attributes) => {
+                            if (!attributes.indent || attributes.indent <= 0)
+                                return {};
+                            return { style: `margin-left: ${attributes.indent * INDENT_STEP}em` };
+                        },
+                    },
+                },
+            },
+        ];
+    },
+    addCommands() {
+        return {
+            indent: () => ({ tr, state, dispatch }) => {
+                const { $from } = state.selection;
+                // listItem 내부에서는 기존 리스트 동작에 위임
+                for (let d = $from.depth; d > 0; d--) {
+                    if ($from.node(d).type.name === "listItem")
+                        return false;
+                }
+                const node = $from.parent;
+                if (node.type.name !== "paragraph" && node.type.name !== "heading")
+                    return false;
+                const pos = $from.before($from.depth);
+                const currentIndent = node.attrs.indent || 0;
+                if (currentIndent >= MAX_INDENT)
+                    return false;
+                if (dispatch) {
+                    tr.setNodeMarkup(pos, undefined, {
+                        ...node.attrs,
+                        indent: currentIndent + 1,
+                    });
+                    dispatch(tr);
+                }
+                return true;
+            },
+            outdent: () => ({ tr, state, dispatch }) => {
+                const { $from } = state.selection;
+                for (let d = $from.depth; d > 0; d--) {
+                    if ($from.node(d).type.name === "listItem")
+                        return false;
+                }
+                const node = $from.parent;
+                if (node.type.name !== "paragraph" && node.type.name !== "heading")
+                    return false;
+                const pos = $from.before($from.depth);
+                const currentIndent = node.attrs.indent || 0;
+                if (currentIndent <= 0)
+                    return false;
+                if (dispatch) {
+                    tr.setNodeMarkup(pos, undefined, {
+                        ...node.attrs,
+                        indent: currentIndent - 1,
+                    });
+                    dispatch(tr);
+                }
+                return true;
+            },
+        };
+    },
+    addKeyboardShortcuts() {
+        return {
+            Tab: () => this.editor.commands.indent(),
+            "Shift-Tab": () => this.editor.commands.outdent(),
+        };
+    },
+});

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

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

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

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

package/dist/extensions/Indent.test.js

@@ -0,0 +1,78 @@
+import { describe, it, expect, afterEach } from 'vitest';
+import { Editor } from '@tiptap/core';
+import StarterKit from '@tiptap/starter-kit';
+import { Indent } from './Indent';
+describe('Indent extension', () => {
+    let editor;
+    function createEditor(content = '<p>Hello</p>') {
+        editor = new Editor({
+            element: document.createElement('div'),
+            extensions: [StarterKit, Indent],
+            content
+        });
+        return editor;
+    }
+    afterEach(() => {
+        editor?.destroy();
+    });
+    it('registers with name "indent"', () => {
+        createEditor();
+        const ext = editor.extensionManager.extensions.find((e) => e.name === 'indent');
+        expect(ext).toBeDefined();
+    });
+    it('indent command increases indent level', () => {
+        createEditor('<p>Test</p>');
+        editor.commands.indent();
+        const doc = editor.getJSON();
+        const para = doc.content?.[0];
+        expect(para?.attrs?.indent).toBe(1);
+    });
+    it('outdent command decreases indent level', () => {
+        createEditor('<p>Test</p>');
+        editor.commands.indent();
+        editor.commands.indent();
+        editor.commands.outdent();
+        const doc = editor.getJSON();
+        const para = doc.content?.[0];
+        expect(para?.attrs?.indent).toBe(1);
+    });
+    it('does not outdent below 0', () => {
+        createEditor('<p>Test</p>');
+        const result = editor.commands.outdent();
+        expect(result).toBe(false);
+        const doc = editor.getJSON();
+        const para = doc.content?.[0];
+        expect(para?.attrs?.indent ?? 0).toBe(0);
+    });
+    it('does not indent above MAX_INDENT (8)', () => {
+        createEditor('<p>Test</p>');
+        for (let i = 0; i < 10; i++) {
+            editor.commands.indent();
+        }
+        const doc = editor.getJSON();
+        const para = doc.content?.[0];
+        expect(para?.attrs?.indent).toBe(8);
+    });
+    it('renders margin-left style in HTML', () => {
+        createEditor('<p>Test</p>');
+        editor.commands.indent();
+        editor.commands.indent();
+        const html = editor.getHTML();
+        // 2 levels * 2em = 4em
+        expect(html).toContain('margin-left: 4em');
+    });
+    it('parses margin-left from existing HTML (px)', () => {
+        // 40px = 1 indent level (Math.round(40/40) = 1)
+        createEditor('<p style="margin-left: 40px">Indented</p>');
+        const doc = editor.getJSON();
+        const para = doc.content?.[0];
+        expect(para?.attrs?.indent).toBe(1);
+    });
+    it('parses margin-left from existing HTML (em)', () => {
+        // 4em / 2em step = 2 indent levels
+        createEditor('<p style="margin-left: 4em">Indented</p>');
+        const doc = editor.getJSON();
+        const para = doc.content?.[0];
+        expect(para?.attrs?.indent).toBe(2);
+    });
+});

package/dist/extensions/PdfBlock.d.ts

@@ -0,0 +1,3 @@
+import { Node as TiptapNode } from "@tiptap/core";
+export declare const PdfBlock: TiptapNode<any, any>;
+//# sourceMappingURL=PdfBlock.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"PdfBlock.d.ts","sourceRoot":"","sources":["../../src/extensions/PdfBlock.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,IAAI,UAAU,EAAmB,MAAM,cAAc,CAAC;AAInE,eAAO,MAAM,QAAQ,sBAwTnB,CAAC"}

package/dist/extensions/PdfBlock.js

@@ -0,0 +1,301 @@
+import { Node as TiptapNode, mergeAttributes } from "@tiptap/core";
+import { getPdfJs } from "../utils/pdf";
+export const PdfBlock = TiptapNode.create({
+    name: "pdfBlock",
+    group: "block",
+    atom: true,
+    addAttributes() {
+        return {
+            src: { default: null },
+            fileId: { default: null },
+            name: { default: "PDF" },
+        };
+    },
+    parseHTML() {
+        return [
+            // 하이브리드: data-pdf-id + data-pdf-src
+            {
+                tag: "div[data-pdf-id]",
+                getAttrs: (dom) => ({
+                    fileId: dom.getAttribute("data-pdf-id"),
+                    src: dom.getAttribute("data-pdf-src") || null,
+                    name: dom.getAttribute("data-pdf-name") || "PDF",
+                }),
+            },
+            // URL 직접 방식
+            {
+                tag: "div[data-pdf-src]",
+                getAttrs: (dom) => ({
+                    src: dom.getAttribute("data-pdf-src"),
+                    fileId: null,
+                    name: dom.getAttribute("data-pdf-name") || "PDF",
+                }),
+            },
+            // 레거시: <embed type="application/pdf">
+            {
+                tag: 'embed[type="application/pdf"]',
+                getAttrs: (dom) => {
+                    const src = dom.getAttribute("src") || "";
+                    const name = src.split("/").pop()?.replace(/\?.*$/, "") || "PDF";
+                    return { src, fileId: null, name };
+                },
+            },
+        ];
+    },
+    renderHTML({ HTMLAttributes }) {
+        const attrs = {};
+        if (HTMLAttributes.fileId)
+            attrs["data-pdf-id"] = HTMLAttributes.fileId;
+        if (HTMLAttributes.src)
+            attrs["data-pdf-src"] = HTMLAttributes.src;
+        attrs["data-pdf-name"] = HTMLAttributes.name || "PDF";
+        return [
+            "div",
+            mergeAttributes(attrs),
+            [
+                "p",
+                {},
+                [
+                    "a",
+                    {
+                        href: HTMLAttributes.src || "#",
+                        target: "_blank",
+                        rel: "noopener noreferrer",
+                    },
+                    `\u{1F4C4} ${HTMLAttributes.name || "PDF"} (PDF)`,
+                ],
+            ],
+        ];
+    },
+    addNodeView() {
+        return ({ node, getPos, editor }) => {
+            let destroyed = false;
+            let resizeObserver = null;
+            let resizeTimeout;
+            const dom = document.createElement("div");
+            dom.classList.add("my-4");
+            dom.contentEditable = "false";
+            dom.setAttribute("data-drag-handle", "");
+            const wrapper = document.createElement("div");
+            wrapper.className =
+                "border rounded-lg overflow-hidden bg-muted/30 transition-shadow";
+            wrapper.style.borderColor = "var(--border)";
+            dom.appendChild(wrapper);
+            // Header
+            const header = document.createElement("div");
+            header.className =
+                "flex items-center justify-between px-4 py-2 border-b border-border bg-background";
+            wrapper.appendChild(header);
+            const nameSpan = document.createElement("span");
+            nameSpan.className = "text-xs text-muted-foreground truncate";
+            nameSpan.style.maxWidth = "200px";
+            nameSpan.textContent = node.attrs.name || "PDF";
+            header.appendChild(nameSpan);
+            const btnGroup = document.createElement("div");
+            btnGroup.className = "flex items-center gap-1";
+            header.appendChild(btnGroup);
+            const openLink = document.createElement("a");
+            openLink.target = "_blank";
+            openLink.rel = "noopener noreferrer";
+            openLink.className =
+                "p-1 rounded hover:bg-muted transition-colors text-muted-foreground";
+            openLink.title = "\uC0C8 \uD0ED\uC5D0\uC11C \uC5F4\uAE30";
+            openLink.innerHTML =
+                '<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M15 3h6v6"/><path d="M10 14 21 3"/><path d="M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6"/></svg>';
+            btnGroup.appendChild(openLink);
+            const deleteBtn = document.createElement("button");
+            deleteBtn.type = "button";
+            deleteBtn.className =
+                "p-1 rounded hover:bg-destructive/10 transition-colors text-muted-foreground hover:text-destructive";
+            deleteBtn.title = "\uC0AD\uC81C";
+            deleteBtn.innerHTML =
+                '<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M3 6h18"/><path d="M19 6v14c0 1-1 2-2 2H7c-1 0-2-1-2-2V6"/><path d="M8 6V4c0-1 1-2 2-2h4c1 0 2 1 2 2v2"/></svg>';
+            deleteBtn.addEventListener("click", () => {
+                const pos = getPos();
+                if (pos != null) {
+                    editor.commands.deleteRange({
+                        from: pos,
+                        to: pos + node.nodeSize,
+                    });
+                }
+            });
+            btnGroup.appendChild(deleteBtn);
+            // Content area
+            const contentArea = document.createElement("div");
+            contentArea.className =
+                "flex items-center justify-center p-4 bg-neutral-100 dark:bg-neutral-900";
+            wrapper.appendChild(contentArea);
+            const canvas = document.createElement("canvas");
+            canvas.className = "shadow-sm";
+            contentArea.appendChild(canvas);
+            const loadingDiv = document.createElement("div");
+            loadingDiv.className = "flex items-center justify-center p-8";
+            loadingDiv.innerHTML =
+                '<p class="text-sm text-muted-foreground animate-pulse">PDF \uB85C\uB529 \uC911...</p>';
+            contentArea.appendChild(loadingDiv);
+            canvas.style.display = "none";
+            let navDiv = null;
+            let currentPage = 1;
+            let totalPages = 0;
+            // eslint-disable-next-line @typescript-eslint/no-explicit-any
+            let pdfDoc = null;
+            let rendering = false;
+            async function renderPage() {
+                if (!pdfDoc || rendering || destroyed)
+                    return;
+                rendering = true;
+                try {
+                    const pageObj = await pdfDoc.getPage(currentPage);
+                    if (destroyed)
+                        return;
+                    const unscaledViewport = pageObj.getViewport({ scale: 1 });
+                    const availableWidth = contentArea.clientWidth - 32;
+                    if (availableWidth <= 0) {
+                        rendering = false;
+                        return;
+                    }
+                    const scale = availableWidth / unscaledViewport.width;
+                    const viewport = pageObj.getViewport({ scale });
+                    const dpr = window.devicePixelRatio || 1;
+                    canvas.width = viewport.width * dpr;
+                    canvas.height = viewport.height * dpr;
+                    canvas.style.width = `${viewport.width}px`;
+                    canvas.style.height = `${viewport.height}px`;
+                    const ctx = canvas.getContext("2d");
+                    if (!ctx) {
+                        rendering = false;
+                        return;
+                    }
+                    ctx.resetTransform();
+                    ctx.clearRect(0, 0, canvas.width, canvas.height);
+                    ctx.scale(dpr, dpr);
+                    await pageObj.render({ canvasContext: ctx, viewport }).promise;
+                }
+                finally {
+                    rendering = false;
+                }
+                if (navDiv) {
+                    const pageSpan = navDiv.querySelector(".page-counter");
+                    if (pageSpan)
+                        pageSpan.textContent = `${currentPage} / ${totalPages}`;
+                }
+            }
+            async function loadPdf(src) {
+                try {
+                    const pdfjsLib = await getPdfJs();
+                    if (destroyed)
+                        return;
+                    const loadingTask = pdfjsLib.getDocument(src);
+                    pdfDoc = await loadingTask.promise;
+                    if (destroyed)
+                        return;
+                    totalPages = pdfDoc.numPages;
+                    loadingDiv.style.display = "none";
+                    canvas.style.display = "";
+                    if (totalPages > 1) {
+                        navDiv = document.createElement("div");
+                        navDiv.className =
+                            "flex items-center justify-center gap-4 px-4 py-2 border-t border-border bg-background";
+                        const prevBtn = document.createElement("button");
+                        prevBtn.type = "button";
+                        prevBtn.className =
+                            "p-1.5 rounded hover:bg-muted transition-colors disabled:opacity-30";
+                        prevBtn.innerHTML =
+                            '<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="m15 18-6-6 6-6"/></svg>';
+                        prevBtn.addEventListener("click", () => {
+                            if (currentPage > 1) {
+                                currentPage--;
+                                prevBtn.disabled = currentPage <= 1;
+                                nextBtn.disabled = currentPage >= totalPages;
+                                renderPage();
+                            }
+                        });
+                        navDiv.appendChild(prevBtn);
+                        const pageSpan = document.createElement("span");
+                        pageSpan.className = "text-sm tabular-nums page-counter";
+                        pageSpan.textContent = `1 / ${totalPages}`;
+                        navDiv.appendChild(pageSpan);
+                        const nextBtn = document.createElement("button");
+                        nextBtn.type = "button";
+                        nextBtn.className =
+                            "p-1.5 rounded hover:bg-muted transition-colors disabled:opacity-30";
+                        nextBtn.innerHTML =
+                            '<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="m9 18 6-6-6-6"/></svg>';
+                        nextBtn.addEventListener("click", () => {
+                            if (currentPage < totalPages) {
+                                currentPage++;
+                                prevBtn.disabled = currentPage <= 1;
+                                nextBtn.disabled = currentPage >= totalPages;
+                                renderPage();
+                            }
+                        });
+                        navDiv.appendChild(nextBtn);
+                        wrapper.appendChild(navDiv);
+                    }
+                    renderPage();
+                    resizeObserver = new ResizeObserver(() => {
+                        clearTimeout(resizeTimeout);
+                        resizeTimeout = setTimeout(renderPage, 100);
+                    });
+                    resizeObserver.observe(contentArea);
+                }
+                catch {
+                    loadingDiv.innerHTML =
+                        '<p class="text-sm text-muted-foreground">PDF\uB97C \uBD88\uB7EC\uC62C \uC218 \uC5C6\uC2B5\uB2C8\uB2E4.</p>';
+                }
+            }
+            // URL 해결 후 PDF 로드
+            if (node.attrs.src) {
+                openLink.href = node.attrs.src;
+                loadPdf(node.attrs.src);
+            }
+            else if (node.attrs.fileId) {
+                // resolver로 URL 획득
+                openLink.href = "#";
+                const resolver = editor.storage.fileAttachment?.resolver;
+                if (resolver) {
+                    resolver(node.attrs.fileId)
+                        .then((result) => {
+                        openLink.href = result.src;
+                        if (result.name)
+                            nameSpan.textContent = result.name;
+                        loadPdf(result.src);
+                    })
+                        .catch(() => {
+                        loadingDiv.innerHTML =
+                            '<p class="text-sm text-muted-foreground">PDF URL\uC744 \uD655\uC778\uD560 \uC218 \uC5C6\uC2B5\uB2C8\uB2E4.</p>';
+                    });
+                }
+                else {
+                    loadingDiv.innerHTML =
+                        `<p class="text-sm text-muted-foreground">PDF ID: ${node.attrs.fileId}</p>`;
+                }
+            }
+            return {
+                dom,
+                update: (updatedNode) => {
+                    if (updatedNode.type.name !== "pdfBlock")
+                        return false;
+                    return true;
+                },
+                selectNode: () => {
+                    wrapper.style.borderColor = "var(--primary)";
+                    wrapper.style.boxShadow =
+                        "0 0 0 3px color-mix(in srgb, var(--primary) 25%, transparent)";
+                },
+                deselectNode: () => {
+                    wrapper.style.borderColor = "var(--border)";
+                    wrapper.style.boxShadow = "none";
+                },
+                destroy: () => {
+                    destroyed = true;
+                    clearTimeout(resizeTimeout);
+                    resizeObserver?.disconnect();
+                },
+            };
+        };
+    },
+    addStorage() {
+        return {};
+    },
+});

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

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

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

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

package/dist/extensions/PdfBlock.test.js

@@ -0,0 +1,51 @@
+import { describe, it, expect, afterEach } from 'vitest';
+import { Editor } from '@tiptap/core';
+import StarterKit from '@tiptap/starter-kit';
+import { PdfBlock } from './PdfBlock';
+describe('PdfBlock extension', () => {
+    let editor;
+    function createEditor(content = '<p></p>') {
+        editor = new Editor({
+            element: document.createElement('div'),
+            extensions: [StarterKit, PdfBlock],
+            content
+        });
+        return editor;
+    }
+    afterEach(() => {
+        editor?.destroy();
+    });
+    it('registers with name "pdfBlock"', () => {
+        createEditor();
+        const ext = editor.extensionManager.extensions.find((e) => e.name === 'pdfBlock');
+        expect(ext).toBeDefined();
+    });
+    it('parses <div data-pdf-src="url">', () => {
+        createEditor('<div data-pdf-src="https://example.com/doc.pdf" data-pdf-name="doc.pdf"></div>');
+        const doc = editor.getJSON();
+        const pdfNode = doc.content?.find((n) => n.type === 'pdfBlock');
+        expect(pdfNode).toBeDefined();
+        expect(pdfNode?.attrs?.src).toBe('https://example.com/doc.pdf');
+        expect(pdfNode?.attrs?.name).toBe('doc.pdf');
+    });
+    it('parses <div data-pdf-id="123">', () => {
+        createEditor('<div data-pdf-id="123" data-pdf-name="report.pdf"></div>');
+        const doc = editor.getJSON();
+        const pdfNode = doc.content?.find((n) => n.type === 'pdfBlock');
+        expect(pdfNode).toBeDefined();
+        expect(pdfNode?.attrs?.fileId).toBe('123');
+        expect(pdfNode?.attrs?.name).toBe('report.pdf');
+    });
+    it('renders correct HTML with src', () => {
+        createEditor('<div data-pdf-src="https://example.com/doc.pdf" data-pdf-name="doc.pdf"></div>');
+        const html = editor.getHTML();
+        expect(html).toContain('data-pdf-src="https://example.com/doc.pdf"');
+        expect(html).toContain('data-pdf-name="doc.pdf"');
+    });
+    it('uses default name "PDF" when name is missing', () => {
+        createEditor('<div data-pdf-src="https://example.com/x.pdf"></div>');
+        const doc = editor.getJSON();
+        const pdfNode = doc.content?.find((n) => n.type === 'pdfBlock');
+        expect(pdfNode?.attrs?.name).toBe('PDF');
+    });
+});

package/dist/extensions/VideoBlock.d.ts

@@ -0,0 +1,16 @@
+import { Node } from "@tiptap/core";
+export interface VideoBlockOptions {
+    HTMLAttributes: Record<string, unknown>;
+}
+declare module "@tiptap/core" {
+    interface Commands<ReturnType> {
+        videoBlock: {
+            setVideoBlock: (attrs: {
+                src: string;
+                name?: string;
+            }) => ReturnType;
+        };
+    }
+}
+export declare const VideoBlock: Node<VideoBlockOptions, any>;
+//# sourceMappingURL=VideoBlock.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"VideoBlock.d.ts","sourceRoot":"","sources":["../../src/extensions/VideoBlock.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAmB,MAAM,cAAc,CAAC;AAErD,MAAM,WAAW,iBAAiB;IAChC,cAAc,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAAC;CACzC;AAED,OAAO,QAAQ,cAAc,CAAC;IAC5B,UAAU,QAAQ,CAAC,UAAU;QAC3B,UAAU,EAAE;YACV,aAAa,EAAE,CAAC,KAAK,EAAE;gBAAE,GAAG,EAAE,MAAM,CAAC;gBAAC,IAAI,CAAC,EAAE,MAAM,CAAA;aAAE,KAAK,UAAU,CAAC;SACtE,CAAC;KACH;CACF;AAED,eAAO,MAAM,UAAU,8BAkGrB,CAAC"}

package/dist/extensions/VideoBlock.js

@@ -0,0 +1,87 @@
+import { Node, mergeAttributes } from "@tiptap/core";
+export const VideoBlock = Node.create({
+    name: "videoBlock",
+    group: "block",
+    atom: true,
+    draggable: true,
+    addOptions() {
+        return { HTMLAttributes: {} };
+    },
+    addAttributes() {
+        return {
+            src: { default: null },
+            name: { default: "" },
+        };
+    },
+    parseHTML() {
+        return [
+            {
+                tag: 'div[data-video-src]',
+                getAttrs: (dom) => {
+                    const el = dom;
+                    return {
+                        src: el.getAttribute("data-video-src"),
+                        name: el.getAttribute("data-video-name") || "",
+                    };
+                },
+            },
+        ];
+    },
+    renderHTML({ HTMLAttributes }) {
+        return [
+            "div",
+            mergeAttributes(this.options.HTMLAttributes, {
+                "data-video-src": HTMLAttributes.src,
+                "data-video-name": HTMLAttributes.name || "",
+            }),
+        ];
+    },
+    addNodeView() {
+        return ({ node, editor }) => {
+            const dom = document.createElement("div");
+            dom.style.cssText = "margin:8px 0;position:relative;";
+            const video = document.createElement("video");
+            video.src = node.attrs.src;
+            video.controls = true;
+            video.preload = "metadata";
+            video.style.cssText =
+                "width:100%;max-height:480px;border-radius:8px;background:#0b1020;";
+            video.setAttribute("controlslist", "nodownload");
+            video.setAttribute("playsinline", "");
+            dom.appendChild(video);
+            if (node.attrs.name) {
+                const label = document.createElement("p");
+                label.textContent = node.attrs.name;
+                label.style.cssText =
+                    "margin:4px 0 0;font-size:12px;color:var(--muted-foreground, #718096);";
+                dom.appendChild(label);
+            }
+            if (editor.isEditable) {
+                const del = document.createElement("button");
+                del.type = "button";
+                del.textContent = "\u00D7";
+                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("mouseenter", () => {
+                    del.style.background = "var(--destructive, #FF6B6B)";
+                });
+                del.addEventListener("mouseleave", () => {
+                    del.style.background = "rgba(0,0,0,0.6)";
+                });
+                del.addEventListener("click", () => {
+                    const pos = editor.view.posAtDOM(dom, 0);
+                    editor.chain().focus().deleteRange({ from: pos, to: pos + 1 }).run();
+                });
+                dom.appendChild(del);
+            }
+            return { dom };
+        };
+    },
+    addCommands() {
+        return {
+            setVideoBlock: (attrs) => ({ chain }) => {
+                return chain().insertContent({ type: this.name, attrs }).run();
+            },
+        };
+    },
+});

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

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

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

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