@teriusu/rich-editor 0.7.0 → 0.7.2

package/dist/types.js

@@ -4,27 +4,28 @@ export const TOOLBAR_PRESETS = {
         'bold', 'italic', 'underline', 'strike', 'highlight',
         'superscript', 'subscript', 'code', 'text-color',
         'align-left', 'align-center', 'align-right',
-        'h1', 'h2', 'h3',
+        'paragraph', 'h1', 'h2', 'h3',
         'bullet-list', 'ordered-list', 'checklist',
         'blockquote', 'horizontal-rule', 'toggle',
-        'link', 'image', 'pdf', 'youtube', 'video', 'file', 'mbus',
+        'link', 'image', 'pdf', 'file', 'mbus',
         'columns-2', 'columns-3', 'table', 'code-block',
         'undo', 'redo',
         'fixed-toolbar', 'slash-menu',
         'table-menu', 'character-count', 'upload-overlay'
     ],
     standard: [
-        'bold', 'italic', 'strike', 'code', 'text-color',
-        'h1', 'h2', 'h3',
+        'bold', 'italic', 'underline', 'strike', 'code', 'text-color',
+        'align-left', 'align-center', 'align-right',
+        'paragraph', 'h1', 'h2', 'h3',
         'bullet-list', 'ordered-list', 'checklist',
         'blockquote', 'horizontal-rule', 'toggle',
-        'link', 'image', 'pdf', 'youtube', 'video', 'file', 'mbus',
+        'link', 'image', 'pdf', 'file', 'mbus',
         'columns-2', 'columns-3', 'table', 'code-block',
         'fixed-toolbar', 'slash-menu', 'table-menu'
     ],
     minimal: [
-        'bold', 'italic', 'strike', 'code',
-        'h2', 'h3',
+        'bold', 'italic', 'underline', 'strike', 'code',
+        'paragraph', 'h2', 'h3',
         'bullet-list', 'ordered-list', 'checklist',
         'blockquote', 'code-block',
         'link', 'image', 'file', 'pdf',

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

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

package/dist/utils/sanitize.js

@@ -70,9 +70,6 @@ export function transformLegacyHtml(html) {
         // <tiptap-collapsable title="X">content</tiptap-collapsable>
         // → <details><summary>X</summary><div>content</div></details>
         .replace(/<tiptap-collapsable\s+title="([^"]*)">([\s\S]*?)<\/tiptap-collapsable>/gi, '<details><summary>$1</summary><div>$2</div></details>')
-        // <lite-youtube videoid="X" ...></lite-youtube>
-        // → <div data-youtube-video><iframe src="https://www.youtube.com/embed/X" allowfullscreen></iframe></div>
-        .replace(/<lite-youtube\s+videoid="([^"]*)"[^>]*>(?:<\/lite-youtube>)?/gi, '<div data-youtube-video=""><iframe src="https://www.youtube.com/embed/$1" allowfullscreen></iframe></div>')
         // <embed src="X" type="application/pdf" ...>
         // → <div data-pdf-src="X" data-pdf-name="filename">
         .replace(/<embed\s+[^>]*src="([^"]*)"[^>]*type="application\/pdf"[^>]*\/?>/gi, (_match, src) => {

package/dist/utils/sanitize.test.js

@@ -36,13 +36,6 @@ describe('transformLegacyHtml', () => {
         expect(result).toContain('Hidden content');
         expect(result).not.toContain('tiptap-collapsable');
     });
-    it('converts <lite-youtube videoid="X"> to YouTube iframe', () => {
-        const input = '<lite-youtube videoid="dQw4w9WgXcQ" params=""></lite-youtube>';
-        const result = transformLegacyHtml(input);
-        expect(result).toContain('https://www.youtube.com/embed/dQw4w9WgXcQ');
-        expect(result).toContain('data-youtube-video');
-        expect(result).not.toContain('lite-youtube');
-    });
     it('converts <embed type="application/pdf"> (src before type)', () => {
         const input = '<embed src="https://example.com/file.pdf" type="application/pdf" />';
         const result = transformLegacyHtml(input);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@teriusu/rich-editor",
-  "version": "0.7.0",
+  "version": "0.7.2",
   "description": "TipTap 기반 Notion-style 리치 텍스트 에디터 (Svelte)",
   "type": "module",
   "svelte": "./dist/index.js",
@@ -55,7 +55,6 @@
     "@tiptap/extension-text-style": "^3.20.4",
     "@tiptap/extension-typography": "^3.21.0",
     "@tiptap/extension-underline": "^3.20.4",
-    "@tiptap/extension-youtube": "^3.21.0",
     "@tiptap/pm": "^3.20.4",
     "@tiptap/starter-kit": "^3.22.0",
     "clsx": "^2.1.1",

package/dist/extensions/VideoBlock.d.ts

@@ -1,16 +0,0 @@
-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

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

@@ -1,87 +0,0 @@
-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

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

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

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

package/dist/extensions/VideoBlock.test.js

@@ -1,54 +0,0 @@
-import { describe, it, expect, afterEach } from 'vitest';
-import { Editor } from '@tiptap/core';
-import StarterKit from '@tiptap/starter-kit';
-import { VideoBlock } from './VideoBlock';
-describe('VideoBlock extension', () => {
-    let editor;
-    function createEditor(content = '<p></p>') {
-        editor = new Editor({
-            element: document.createElement('div'),
-            extensions: [StarterKit, VideoBlock],
-            content
-        });
-        return editor;
-    }
-    afterEach(() => {
-        editor?.destroy();
-    });
-    it('registers with name "videoBlock"', () => {
-        createEditor();
-        const ext = editor.extensionManager.extensions.find((e) => e.name === 'videoBlock');
-        expect(ext).toBeDefined();
-    });
-    it('parses <div data-video-src="url">', () => {
-        createEditor('<div data-video-src="https://example.com/video.mp4" data-video-name="demo"></div>');
-        const doc = editor.getJSON();
-        const videoNode = doc.content?.find((n) => n.type === 'videoBlock');
-        expect(videoNode).toBeDefined();
-        expect(videoNode?.attrs?.src).toBe('https://example.com/video.mp4');
-        expect(videoNode?.attrs?.name).toBe('demo');
-    });
-    it('renders correct HTML', () => {
-        createEditor('<div data-video-src="https://example.com/video.mp4" data-video-name="demo"></div>');
-        const html = editor.getHTML();
-        expect(html).toContain('data-video-src="https://example.com/video.mp4"');
-        expect(html).toContain('data-video-name="demo"');
-    });
-    it('defaults name to empty string', () => {
-        createEditor('<div data-video-src="https://example.com/video.mp4"></div>');
-        const doc = editor.getJSON();
-        const videoNode = doc.content?.find((n) => n.type === 'videoBlock');
-        expect(videoNode?.attrs?.name).toBe('');
-    });
-    it('inserts via setVideoBlock command', () => {
-        createEditor();
-        editor.commands.setVideoBlock({
-            src: 'https://example.com/v.mp4',
-            name: 'My Video'
-        });
-        const doc = editor.getJSON();
-        const videoNode = doc.content?.find((n) => n.type === 'videoBlock');
-        expect(videoNode).toBeDefined();
-        expect(videoNode?.attrs?.src).toBe('https://example.com/v.mp4');
-    });
-});