@teriusu/rich-editor 0.10.8 → 0.11.0

package/dist/extensions/VideoEmbed.js

@@ -7,7 +7,10 @@
  * 다뤄진다. 저장 형식이 곧 계약이라, 담기는 것이 달라지면 이름도 달라야 한다.
  */
 import { Node, mergeAttributes } from "@tiptap/core";
+import { Plugin, PluginKey } from "@tiptap/pm/state";
 import { attachResize } from "../utils/resize";
+import { getEditorTranslator } from "../i18n";
+import { mediaRatioCss, normalizeMediaAlign, normalizeMediaHeight, normalizeMediaRatio } from "../utils/media-size";
 /** `1m30s` · `90` 처럼 적히는 유튜브 타임스탬프를 초로 바꾼다. */
 function parseTimestamp(raw) {
     if (!raw)
@@ -19,6 +22,71 @@ function parseTimestamp(raw) {
         return null;
     return Number(m[1] || 0) * 3600 + Number(m[2] || 0) * 60 + Number(m[3] || 0);
 }
+/**
+ * 저장된 `data-video-src` 를 iframe `src` 로 쓰기 전의 마지막 관문 — http(s) 만 통과한다.
+ *
+ * 살균기(`sanitize.ts`)의 URL 검사는 `href`·`src` 속성만 보므로 `data-video-src` 에
+ * `javascript:` 가 실려 있으면 그대로 통과해 편집 모드 iframe 까지 닿는다. 새로 만드는
+ * 경로(붙여넣기·명령)는 전부 임베드 변환기를 거쳐 안전하지만, **저장본은 출처를 믿을 수
+ * 없다** — 읽는 쪽에서 거른다.
+ */
+function safeVideoSrc(raw) {
+    if (typeof raw !== "string")
+        return null;
+    const trimmed = raw.trim();
+    return /^https?:\/\//i.test(trimmed) ? trimmed : null;
+}
+/**
+ * 유튜브 주소면 임베드 주소를, 아니면 null 을 돌려준다.
+ *
+ * `toEmbedUrl` 의 유튜브 갈래를 떼어 낸 것 — 붙여넣기 자동 임베드(아래
+ * `addProseMirrorPlugins`)가 **유튜브 판별기로도** 써야 해서다. "변환 결과가 달라졌는가"
+ * 로 어림하면 이미 임베드 꼴인 주소(`youtube.com/embed/ID`)를 놓친다.
+ */
+export function youTubeEmbedUrl(raw) {
+    const trimmed = raw.trim();
+    if (!trimmed)
+        return null;
+    let u;
+    try {
+        u = new URL(trimmed);
+    }
+    catch {
+        return null;
+    }
+    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)
+        return null;
+    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 null;
+    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();
+}
 /**
  * 붙여넣은 주소를 **iframe 에 넣을 수 있는 주소**로 바꾼다.
  *
@@ -34,6 +102,10 @@ export function toEmbedUrl(raw) {
     const trimmed = raw.trim();
     if (!trimmed)
         return trimmed;
+    // ── 유튜브 ──
+    const youtube = youTubeEmbedUrl(trimmed);
+    if (youtube)
+        return youtube;
     let u;
     try {
         u = new URL(trimmed);
@@ -42,38 +114,6 @@ export function toEmbedUrl(raw) {
         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")
@@ -112,10 +152,20 @@ export const VideoEmbed = Node.create({
     addOptions() {
         return { HTMLAttributes: {} };
     },
+    /*
+     * 크기·정렬은 전부 **`data-*` 속성**으로 저장한다(사고 이력: `style` 로 저장하면
+     * 살균·정적 렌더에서 지워져 크기가 튄다). `style` 은 폭·정렬을 **거울처럼 한 벌 더**
+     * 적을 뿐이고, 읽을 때의 정본은 언제나 `data-*` 쪽이다.
+     * 높이·비율은 배타다 — 높이가 있으면 고정 px, 없고 비율이 있으면 비율 박스,
+     * 둘 다 없으면 기본 16:9. (main `buildResizeAttrs` 의 규칙 재작성.)
+     */
     addAttributes() {
         return {
             src: { default: null },
-            width: { default: null }
+            width: { default: null },
+            height: { default: null },
+            ratio: { default: null },
+            align: { default: null }
         };
     },
     parseHTML() {
@@ -124,9 +174,16 @@ export const VideoEmbed = Node.create({
                 tag: "div[data-video-src]",
                 getAttrs: (dom) => {
                     const el = dom;
+                    const src = safeVideoSrc(el.getAttribute("data-video-src"));
+                    // 스킴이 수상한 저장본은 영상 노드로 받지 않는다 — 빈 껍데기를 남기느니 버린다.
+                    if (!src)
+                        return false;
                     return {
-                        src: el.getAttribute("data-video-src"),
-                        width: el.getAttribute("data-video-width") || el.style?.width || null
+                        src,
+                        width: el.getAttribute("data-video-width") || el.style?.width || null,
+                        height: normalizeMediaHeight(el.getAttribute("data-video-height")),
+                        ratio: normalizeMediaRatio(el.getAttribute("data-video-ratio")),
+                        align: normalizeMediaAlign(el.getAttribute("data-video-align"))
                     };
                 }
             }
@@ -136,28 +193,68 @@ export const VideoEmbed = Node.create({
         const attrs = {
             "data-video-src": HTMLAttributes.src
         };
+        const styles = [];
         if (HTMLAttributes.width) {
             attrs["data-video-width"] = HTMLAttributes.width;
-            attrs["style"] = `width: ${HTMLAttributes.width}`;
+            styles.push(`width: ${HTMLAttributes.width}`);
         }
+        const height = normalizeMediaHeight(HTMLAttributes.height);
+        if (height != null)
+            attrs["data-video-height"] = String(height);
+        const ratio = normalizeMediaRatio(HTMLAttributes.ratio);
+        if (height == null && ratio)
+            attrs["data-video-ratio"] = ratio;
+        const align = normalizeMediaAlign(HTMLAttributes.align);
+        if (align) {
+            attrs["data-video-align"] = align;
+            if (align === "center")
+                styles.push("margin-left: auto", "margin-right: auto");
+            else if (align === "right")
+                styles.push("margin-left: auto");
+        }
+        if (styles.length)
+            attrs["style"] = styles.join("; ");
         return ["div", mergeAttributes(this.options.HTMLAttributes, attrs)];
     },
     addNodeView() {
         return ({ node, editor, getPos }) => {
+            const t = getEditorTranslator(editor);
             // 리사이즈가 attrs 를 되쓰므로 **항상 최신 노드**여야 한다(mbus 의 stale 버그와 같은 자리).
             let currentNode = node;
             let detachResize = null;
+            let detachHeightResize = 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;
+            /*
+             * 비율 박스. 예전의 `padding-top:56.25%` 대신 CSS `aspect-ratio` 를 쓴다 —
+             * `height` 가 지정되면 `aspect-ratio` 는 저절로 비켜서므로(auto 축이 없어진다)
+             * 높이 드래그가 인라인 `height` 하나로 그대로 먹는다. padding 방식은 높이를
+             * 얹으면 패딩 위에 **더해져** 박스가 두 배로 자란다.
+             */
             const aspect = document.createElement("div");
             aspect.style.cssText =
-                "position:relative;width:100%;padding-top:56.25%;background:#0b1020;border-radius:8px;overflow:hidden;";
+                "position:relative;width:100%;aspect-ratio:16 / 9;background:#0b1020;border-radius:8px;overflow:hidden;";
             dom.appendChild(aspect);
-            const src = node.attrs.src;
+            const applyLayout = (attrs) => {
+                dom.style.width = typeof attrs.width === "string" && attrs.width ? attrs.width : "";
+                const height = normalizeMediaHeight(attrs.height);
+                if (height != null) {
+                    aspect.style.height = `${height}px`;
+                    aspect.style.removeProperty("aspect-ratio");
+                }
+                else {
+                    aspect.style.removeProperty("height");
+                    aspect.style.aspectRatio = mediaRatioCss(attrs.ratio) ?? "16 / 9";
+                }
+                const align = normalizeMediaAlign(attrs.align);
+                dom.style.marginLeft = align === "center" || align === "right" ? "auto" : "";
+                dom.style.marginRight = align === "center" ? "auto" : "";
+            };
+            applyLayout(node.attrs);
+            // parseHTML 을 안 거친 경로(JSON 삽입·명령 오용)까지 막는 이중 관문.
+            const src = safeVideoSrc(node.attrs.src);
             if (src && canEmbedCrossOrigin()) {
                 const iframe = document.createElement("iframe");
                 iframe.src = src;
@@ -182,14 +279,14 @@ export const VideoEmbed = Node.create({
                 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.textContent = t("videoCannotEmbed");
                 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.textContent = t("openInNewTab");
                 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);
@@ -214,7 +311,29 @@ export const VideoEmbed = Node.create({
                     getPos: () => (typeof getPos === "function" ? getPos() : undefined),
                     getNode: () => currentNode,
                     axis: "x",
-                    label: "영상 너비 조절"
+                    label: t("videoResizeWidth")
+                });
+                /*
+                 * 높이 드래그. 크기는 비율 박스가 먹고(고정 px 저장), 손잡이는 래퍼에
+                 * 산다 — 박스가 `overflow:hidden` 이라 밖 12px 손잡이가 잘리기 때문.
+                 * 수동 드래그는 비율 프리셋을 푼다(main 과 같은 규칙).
+                 */
+                detachHeightResize = attachResize({
+                    dom: aspect,
+                    handleParent: dom,
+                    editor,
+                    getPos: () => (typeof getPos === "function" ? getPos() : undefined),
+                    getNode: () => currentNode,
+                    axis: "y",
+                    attr: "height",
+                    min: 120,
+                    max: 1600,
+                    label: t("videoResizeHeight"),
+                    buildAttrs: (current, value) => ({
+                        ...current.attrs,
+                        height: String(Math.round(value)),
+                        ratio: null
+                    })
                 });
             }
             return {
@@ -222,17 +341,79 @@ export const VideoEmbed = Node.create({
                 update: (updated) => {
                     if (updated.type !== currentNode.type)
                         return false;
-                    const w = updated.attrs.width;
-                    dom.style.width = w || "";
+                    applyLayout(updated.attrs);
                     currentNode = updated;
                     return true;
                 },
                 destroy: () => {
                     detachResize?.();
+                    detachHeightResize?.();
                 }
             };
         };
     },
+    addProseMirrorPlugins() {
+        return [
+            /*
+             * 빈 문단에 유튜브 주소를 붙여넣으면 **즉시 임베드로** 바꾼다. 플레인 텍스트와
+             * 링크 마크(href) 둘 다 받는다. (main 정올 `plugin/youtube.ts` 의
+             * `handlePasteVideoURL` 참조 — 로직 재작성.)
+             *
+             * ⚠️ **유튜브만** 자동 변환한다. 아무 주소나 임베드로 바꾸면 일반 링크
+             * 붙여넣기가 전부 잡아먹히고, 모르는 주소는 iframe 에서 빈 칸이 된다
+             * (`toEmbedUrl` 주석). 다른 서비스는 지금처럼 툴바·슬래시로 넣는다.
+             */
+            new Plugin({
+                key: new PluginKey("videoEmbedPaste"),
+                props: {
+                    handlePaste: (view, _event, slice) => {
+                        if (!this.editor.isEditable)
+                            return false;
+                        if (slice.content.childCount !== 1)
+                            return false;
+                        const { selection } = view.state;
+                        if (!selection.empty)
+                            return false;
+                        /* 빈 문단에서만 — 글 쓰던 자리·코드블록에는 끼어들지 않는다. */
+                        const $head = selection.$head;
+                        const parent = $head.node();
+                        if (parent.type.name !== "paragraph" || parent.content.size > 0)
+                            return false;
+                        let embed = youTubeEmbedUrl(slice.content.child(0).textContent);
+                        /* 플레인 텍스트가 아니면 링크 마크의 href 도 본다. */
+                        if (!embed) {
+                            slice.content.descendants((node) => {
+                                if (embed)
+                                    return false;
+                                for (const mark of node.marks) {
+                                    const href = mark.attrs.href;
+                                    if (!href)
+                                        continue;
+                                    const fromHref = youTubeEmbedUrl(href);
+                                    if (fromHref) {
+                                        embed = fromHref;
+                                        return false;
+                                    }
+                                }
+                                return true;
+                            });
+                        }
+                        if (!embed)
+                            return false;
+                        /* 빈 문단은 그대로 두고 그 앞에 심는다 — 커서가 이어서 쓸 자리로 남는다. */
+                        this.editor
+                            .chain()
+                            .insertContentAt($head.before(), {
+                            type: this.name,
+                            attrs: { src: embed }
+                        })
+                            .run();
+                        return true;
+                    }
+                }
+            })
+        ];
+    },
     addCommands() {
         return {
             setVideoEmbed: (attrs) => ({ chain }) => {

package/dist/extensions/VideoEmbed.test.js

@@ -1,5 +1,8 @@
-import { describe, it, expect } from "vitest";
-import { toEmbedUrl } from "./VideoEmbed";
+import { describe, it, expect, afterEach } from "vitest";
+import { Editor } from "@tiptap/core";
+import StarterKit from "@tiptap/starter-kit";
+import { Slice, Fragment } from "@tiptap/pm/model";
+import { toEmbedUrl, youTubeEmbedUrl, VideoEmbed } from "./VideoEmbed";
 /*
  * 이 변환이 이 확장의 전부다. 틀리면 유튜브가 `X-Frame-Options` 로 거부해 **빈 칸**만
  * 남고, 화면에는 아무 단서도 안 나온다. 그래서 사람들이 실제로 붙여넣는 꼴을 모아 둔다.
@@ -55,3 +58,129 @@ describe("toEmbedUrl", () => {
         expect(toEmbedUrl(weird)).toBe(weird);
     });
 });
+describe("youTubeEmbedUrl", () => {
+    it("유튜브 주소는 임베드 주소를 돌려준다", () => {
+        expect(youTubeEmbedUrl("https://youtu.be/dQw4w9WgXcQ")).toBe("https://www.youtube.com/embed/dQw4w9WgXcQ");
+        // 이미 임베드 꼴이어도 유튜브로 알아본다 — "변환됐는가" 어림이 안 되는 이유
+        expect(youTubeEmbedUrl("https://www.youtube.com/embed/abc12345678")).toBe("https://www.youtube.com/embed/abc12345678");
+    });
+    it("유튜브가 아니면 null — vimeo·일반 링크는 자동 임베드 대상이 아니다", () => {
+        expect(youTubeEmbedUrl("https://vimeo.com/123456789")).toBeNull();
+        expect(youTubeEmbedUrl("https://example.com/watch?v=abc12345678")).toBeNull();
+        expect(youTubeEmbedUrl("그냥 텍스트")).toBeNull();
+        expect(youTubeEmbedUrl("")).toBeNull();
+    });
+});
+describe("유튜브 주소 붙여넣기 → 즉시 임베드", () => {
+    let editor;
+    function createEditor(content = "<p></p>") {
+        editor = new Editor({
+            element: document.createElement("div"),
+            extensions: [StarterKit, VideoEmbed],
+            content
+        });
+        return editor;
+    }
+    afterEach(() => {
+        editor?.destroy();
+    });
+    /** 슬라이스 하나를 실제 플러그인 사슬(someProp)로 붙여넣는다. */
+    function paste(fragment) {
+        const slice = new Slice(fragment, 0, 0);
+        return (editor.view.someProp("handlePaste", (f) => f(editor.view, new Event("paste"), slice)) ?? false);
+    }
+    function pasteText(text) {
+        return paste(Fragment.from(editor.state.schema.text(text)));
+    }
+    function embeddedSrc() {
+        let src = null;
+        editor.state.doc.descendants((node) => {
+            if (node.type.name === "videoEmbed")
+                src = node.attrs.src;
+            return src === null;
+        });
+        return src;
+    }
+    it("빈 문단에 유튜브 주소를 붙여넣으면 임베드가 된다", () => {
+        createEditor();
+        expect(pasteText("https://www.youtube.com/watch?v=dQw4w9WgXcQ")).toBe(true);
+        expect(embeddedSrc()).toBe("https://www.youtube.com/embed/dQw4w9WgXcQ");
+    });
+    it("유튜브가 아닌 주소는 건드리지 않는다", () => {
+        createEditor();
+        expect(pasteText("https://example.com/page")).toBe(false);
+        expect(pasteText("https://vimeo.com/123456789")).toBe(false);
+        expect(embeddedSrc()).toBeNull();
+    });
+    it("내용이 있는 문단에서는 끼어들지 않는다", () => {
+        createEditor("<p>메모 </p>");
+        // 초기 커서는 문단 안 — 내용이 있으므로 자동 임베드가 아니라 일반 붙여넣기로 가야 한다
+        expect(pasteText("https://youtu.be/dQw4w9WgXcQ")).toBe(false);
+        expect(embeddedSrc()).toBeNull();
+    });
+    it("링크 마크의 href 에서도 유튜브를 찾는다", () => {
+        createEditor();
+        const { schema } = editor.state;
+        const linked = schema.text("영상 보기", [
+            schema.marks.link.create({ href: "https://youtu.be/dQw4w9WgXcQ" })
+        ]);
+        expect(paste(Fragment.from(linked))).toBe(true);
+        expect(embeddedSrc()).toBe("https://www.youtube.com/embed/dQw4w9WgXcQ");
+    });
+    it("여러 블록이 담긴 붙여넣기는 대상이 아니다", () => {
+        createEditor();
+        const { schema } = editor.state;
+        const frag = Fragment.fromArray([
+            schema.nodes.paragraph.create(null, schema.text("설명")),
+            schema.nodes.paragraph.create(null, schema.text("https://youtu.be/dQw4w9WgXcQ"))
+        ]);
+        expect(paste(frag)).toBe(false);
+        expect(embeddedSrc()).toBeNull();
+    });
+});
+/*
+ * 살균기의 URL 검사는 `href`·`src` 만 보므로, `data-video-src` 의 스킴은 여기(확장)가
+ * 마지막 관문이다. 새로 만드는 경로는 전부 임베드 변환기를 거쳐 안전하지만 저장본은
+ * 출처를 믿을 수 없다.
+ */
+describe("data-video-src 스킴 관문", () => {
+    let editor;
+    function createEditor(content) {
+        editor = new Editor({
+            element: document.createElement("div"),
+            extensions: [StarterKit, VideoEmbed],
+            content
+        });
+        return editor;
+    }
+    afterEach(() => {
+        editor?.destroy();
+    });
+    function embeddedCount() {
+        let n = 0;
+        editor.state.doc.descendants((node) => {
+            if (node.type.name === "videoEmbed")
+                n += 1;
+            return true;
+        });
+        return n;
+    }
+    it("javascript: 스킴 저장본은 영상 노드로 받지 않는다", () => {
+        createEditor('<div data-video-src="javascript:alert(1)"></div>');
+        expect(embeddedCount()).toBe(0);
+        expect(editor.view.dom.querySelector("iframe")).toBeNull();
+    });
+    it("https 저장본은 그대로 통과한다", () => {
+        createEditor('<div data-video-src="https://www.youtube.com/embed/dQw4w9WgXcQ"></div>');
+        expect(embeddedCount()).toBe(1);
+    });
+    it("parseHTML 을 안 거친 노드(JSON 삽입)도 iframe 을 만들지 않는다", () => {
+        createEditor("<p></p>");
+        editor.commands.insertContent({
+            type: "videoEmbed",
+            attrs: { src: "javascript:alert(1)" }
+        });
+        // 노드는 서 있어도 노드뷰의 이중 관문이 iframe 을 막는다
+        expect(editor.view.dom.querySelector("iframe")).toBeNull();
+    });
+});

package/dist/i18n/en.d.ts

@@ -0,0 +1,3 @@
+import type { EditorMessages } from './ko';
+export declare const en: EditorMessages;
+//# sourceMappingURL=en.d.ts.map

package/dist/i18n/en.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"en.d.ts","sourceRoot":"","sources":["../../src/i18n/en.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,MAAM,CAAC;AAE3C,eAAO,MAAM,EAAE,EAAE,cA+MhB,CAAC"}