@teriusu/rich-editor 0.11.3 → 0.11.5

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

@@ -1 +1 @@
-{"version":3,"file":"MbusVideo.d.ts","sourceRoot":"","sources":["../../src/extensions/MbusVideo.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAmB,MAAM,cAAc,CAAC;AAUrD,MAAM,WAAW,gBAAgB;IAChC,cAAc,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAAC;CACxC;AAED,OAAO,QAAQ,cAAc,CAAC;IAC7B,UAAU,QAAQ,CAAC,UAAU;QAC5B,SAAS,EAAE;YACV,YAAY,EAAE,CAAC,KAAK,EAAE;gBAAE,GAAG,EAAE,MAAM,CAAC;gBAAC,KAAK,CAAC,EAAE,MAAM,CAAA;aAAE,KAAK,UAAU,CAAC;SACrE,CAAC;KACF;CACD;AAED,eAAO,MAAM,SAAS,6BAmLpB,CAAC"}
+{"version":3,"file":"MbusVideo.d.ts","sourceRoot":"","sources":["../../src/extensions/MbusVideo.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAmB,MAAM,cAAc,CAAC;AAWrD,MAAM,WAAW,gBAAgB;IAChC,cAAc,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAAC;CACxC;AAED,OAAO,QAAQ,cAAc,CAAC;IAC7B,UAAU,QAAQ,CAAC,UAAU;QAC5B,SAAS,EAAE;YACV,YAAY,EAAE,CAAC,KAAK,EAAE;gBAAE,GAAG,EAAE,MAAM,CAAC;gBAAC,KAAK,CAAC,EAAE,MAAM,CAAA;aAAE,KAAK,UAAU,CAAC;SACrE,CAAC;KACF;CACD;AAED,eAAO,MAAM,SAAS,6BA0NpB,CAAC"}

package/dist/extensions/MbusVideo.js

@@ -1,5 +1,6 @@
 import { Node, mergeAttributes } from "@tiptap/core";
 import { attachResize } from "../utils/resize";
+import { applyCrossOriginEmbedAttrs, canEmbedCrossOrigin } from "../utils/embed";
 import { getEditorTranslator } from "../i18n";
 import { mediaRatioCss, normalizeMediaAlign, normalizeMediaHeight, normalizeMediaRatio } from "../utils/media-size";
 export const MbusVideo = Node.create({
@@ -99,16 +100,53 @@ export const MbusVideo = Node.create({
                 dom.style.marginRight = align === "center" ? "auto" : "";
             };
             applyLayout(node.attrs);
-            if (node.attrs.src) {
+            /*
+             * ⚠️ **`credentialless` 를 반드시 붙인다** — `VideoEmbed` 와 같은 이유·같은
+             * 레시피다(`utils/embed.ts`). 정올은 전 문서가 `COEP: require-corp` 라, 이
+             * 속성이 없으면 mbus iframe 이 **크롬에서도 통째로 막히고** 그 자리에 크롬의
+             * 오류 화면(`play.mbus.tv 에서 연결을 거부했습니다`)이 뜬다.
+             *
+             * 이 노드만 그 처리가 빠져 있었다. 저장한 뒤 읽는 화면은 호스트의 정적 렌더
+             * (`trinity …/tiptap/static-enhance.ts` 의 `buildVideoBox`)가 같은 상자를 다시
+             * 지으면서 속성을 붙이므로 **에디터에서만** 거부로 보였다 — "영상을 올리면
+             * 연결이 거부된다"는 신고의 실체가 이 비대칭이다.
+             * (브라우저 실측, 격리된 문서: 속성 없는 mbus iframe = COEP 위반 보고 1건,
+             *  속성 있는 쪽 = 0건.)
+             */
+            if (node.attrs.src && canEmbedCrossOrigin()) {
                 const iframe = document.createElement("iframe");
                 iframe.src = node.attrs.src;
                 iframe.allow = "autoplay; fullscreen; encrypted-media; picture-in-picture";
                 iframe.setAttribute("allowfullscreen", "");
                 iframe.setAttribute("loading", "lazy");
+                applyCrossOriginEmbedAttrs(iframe);
                 iframe.style.cssText =
                     "position:absolute;inset:0;width:100%;height:100%;border:0;display:block;";
                 aspect.appendChild(iframe);
             }
+            else if (node.attrs.src) {
+                /*
+                 * 실을 수 없는 브라우저(파폭·사파리 + 격리) — **빈 박스로 두지 않는다.**
+                 * 그러면 영상이 깨진 줄 알지 이유를 모른다. `VideoEmbed`·호스트 정적 렌더와
+                 * **같은 문구·같은 모양**의 포스터를 세운다.
+                 */
+                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 = t("videoCannotEmbed");
+                label.style.cssText = "font-size:13px;line-height:1.5;";
+                poster.appendChild(label);
+                const open = document.createElement("a");
+                open.href = node.attrs.src;
+                open.target = "_blank";
+                open.rel = "noopener noreferrer";
+                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);
+                aspect.appendChild(poster);
+            }
             if (editor.isEditable) {
                 const del = document.createElement("button");
                 del.type = "button";

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

@@ -1 +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;AAWrD,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;AAyBD;;;;;;GAMG;AACH,wBAAgB,eAAe,CAAC,GAAG,EAAE,MAAM,GAAG,MAAM,GAAG,IAAI,CAuC1D;AAED;;;;;;;;;;GAUG;AACH,wBAAgB,UAAU,CAAC,GAAG,EAAE,MAAM,GAAG,MAAM,CA2B9C;AAmBD,eAAO,MAAM,UAAU,8BAmSrB,CAAC"}
+{"version":3,"file":"VideoEmbed.d.ts","sourceRoot":"","sources":["../../src/extensions/VideoEmbed.ts"],"names":[],"mappings":"AAAA;;;;;;;GAOG;AACH,OAAO,EAAE,IAAI,EAAmB,MAAM,cAAc,CAAC;AAYrD,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;AAyBD;;;;;;GAMG;AACH,wBAAgB,eAAe,CAAC,GAAG,EAAE,MAAM,GAAG,MAAM,GAAG,IAAI,CAuC1D;AAED;;;;;;;;;;GAUG;AACH,wBAAgB,UAAU,CAAC,GAAG,EAAE,MAAM,GAAG,MAAM,CA2B9C;AAOD,eAAO,MAAM,UAAU,8BA+RrB,CAAC"}

package/dist/extensions/VideoEmbed.js

@@ -9,6 +9,7 @@
 import { Node, mergeAttributes } from "@tiptap/core";
 import { Plugin, PluginKey } from "@tiptap/pm/state";
 import { attachResize } from "../utils/resize";
+import { applyCrossOriginEmbedAttrs, canEmbedCrossOrigin } from "../utils/embed";
 import { getEditorTranslator } from "../i18n";
 import { mediaRatioCss, normalizeMediaAlign, normalizeMediaHeight, normalizeMediaRatio } from "../utils/media-size";
 /** `1m30s` · `90` 처럼 적히는 유튜브 타임스탬프를 초로 바꾼다. */
@@ -126,24 +127,10 @@ export function toEmbedUrl(raw) {
     }
     return trimmed;
 }
-/**
- * 이 브라우저에서 **COEP 없는 남의 iframe** 을 실을 수 있는지.
- *
- * ⚠️ 정올은 전 브라우저에 `COEP: require-corp`(교차 출처 격리)를 건다. 격리된 문서에
- * 자기 COEP 를 안 보내는 제3자 iframe(유튜브·Vimeo·mbus 전부 해당)을 넣는 방법은
- * `credentialless` 속성뿐인데 **크로미움 전용**이다(파이어폭스 미구현·사파리 거부).
- * 그래서 정올 파폭·사파리에서는 mbus 영상이 지금 **빈 회색 박스**로 남아 있다.
- *
- * 격리되지 않은 문서(코드패스의 비-크로미움 등)에서는 평범한 크로스오리진 iframe 이라
- * 아무 문제가 없다 — 그래서 격리 여부와 지원 여부를 **함께** 본다.
+/*
+ * 판정은 `utils/embed.ts` 로 옮겼다 — `MbusVideo` 가 같은 규칙을 써야 하는데 여기
+ * 모듈 안에만 있어서 그쪽이 통째로 빠뜨리고 있었다(그 노드 주석 참조).
  */
-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",
@@ -261,11 +248,7 @@ export const VideoEmbed = Node.create({
                 iframe.allow = "autoplay; fullscreen; encrypted-media; picture-in-picture";
                 iframe.setAttribute("allowfullscreen", "");
                 iframe.setAttribute("loading", "lazy");
-                /*
-                 * 격리된 문서에서 COEP 없는 영상을 싣는 유일한 통로. 크로미움이 아니면 이
-                 * 속성 자체가 무시되므로 조건 없이 붙여도 해가 없다.
-                 */
-                iframe.setAttribute("credentialless", "");
+                applyCrossOriginEmbedAttrs(iframe);
                 iframe.style.cssText =
                     "position:absolute;inset:0;width:100%;height:100%;border:0;display:block;";
                 aspect.appendChild(iframe);

package/dist/utils/embed.d.ts

@@ -0,0 +1,37 @@
+/**
+ * 「이 문서에서 **COEP 를 안 보내는 남의 iframe** 을 실을 수 있는가」.
+ *
+ * ⚠️ 정올은 전 문서에 `Cross-Origin-Embedder-Policy: require-corp`(교차 출처 격리)를
+ * 건다. 격리된 문서에 자기 COEP 를 안 보내는 제3자 iframe(유튜브·Vimeo·mbus 전부
+ * 해당)을 넣는 방법은 **`credentialless` 속성뿐**인데 크로미움 전용이다
+ * (파이어폭스 미구현·사파리 거부).
+ *
+ * 격리되지 않은 문서(코드패스의 비-크로미움 등)에서는 평범한 크로스오리진 iframe 이라
+ * 아무 문제가 없다 — 그래서 격리 여부와 지원 여부를 **함께** 본다.
+ *
+ * ⚠️ 이 판정과 `applyCrossOriginEmbedAttrs` 는 **항상 짝으로** 쓴다. 한쪽만 쓰면
+ * 격리된 문서에서 브라우저가 iframe 을 막고 크롬이 제 오류 화면
+ * (`…에서 연결을 거부했습니다`)을 그 자리에 그린다 — `MbusVideo` 가 실제로 그랬다.
+ */
+export declare function canEmbedCrossOrigin(): boolean;
+/**
+ * 제3자 임베드 iframe 이 **실제로 로드되게** 하는 속성 묶음. 둘은 막는 층이 다르므로
+ * 항상 같이 붙인다.
+ *
+ * 1. `credentialless` — 격리된 문서(COEP `require-corp`)에서 COEP 없는 남의 iframe 을
+ *    싣는 유일한 통로. 크로미움이 아니면 무시되므로 조건 없이 붙여도 해가 없다.
+ *
+ * 2. `referrerpolicy` — ⚠️ **호스트가 Referer 를 끄고 있을 수 있다.** 정올은
+ *    `app.html` 에 `<meta name="referrer" content="same-origin">` 을 두어 교차 출처로는
+ *    Referer 를 **아예 안 보낸다.** 그런데 mbus 채널 중에는 Referer 로 출처를 거르는
+ *    것이 있어서, 그런 영상은 CDN 청크가 403 으로 막히고 플레이어가
+ *    `인코딩에 실패했거나 접근 제한되어 재생할 수 없습니다` 를 띄운다 — 영상 자체는
+ *    멀쩡한데(최상위 playlist 는 200) 안 나오는, 설명이 안 되는 실패로 보인다.
+ *    실측(`ch_17827535`): Referer 없음 → 403 · `https://jungol.co.kr/` → 200 ·
+ *    엉뚱한 출처 → 403. 요소에 건 정책이 문서 메타를 이기므로 여기서 되돌린다.
+ *    ⚠️ 전체 URL 이 아니라 **출처만** 보낸다(`strict-origin-…`) — 어느 글에서 봤는지까지
+ *    남의 서버에 알릴 이유는 없다. 앱의 다른 mbus 자리(`MidibusInner`·`legacy-iframe`)가
+ *    쓰는 값과 같다.
+ */
+export declare function applyCrossOriginEmbedAttrs(iframe: HTMLIFrameElement): void;
+//# sourceMappingURL=embed.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"embed.d.ts","sourceRoot":"","sources":["../../src/utils/embed.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;GAcG;AACH,wBAAgB,mBAAmB,IAAI,OAAO,CAI7C;AAED;;;;;;;;;;;;;;;;;;GAkBG;AACH,wBAAgB,0BAA0B,CAAC,MAAM,EAAE,iBAAiB,GAAG,IAAI,CAG1E"}

package/dist/utils/embed.js

@@ -0,0 +1,45 @@
+/**
+ * 「이 문서에서 **COEP 를 안 보내는 남의 iframe** 을 실을 수 있는가」.
+ *
+ * ⚠️ 정올은 전 문서에 `Cross-Origin-Embedder-Policy: require-corp`(교차 출처 격리)를
+ * 건다. 격리된 문서에 자기 COEP 를 안 보내는 제3자 iframe(유튜브·Vimeo·mbus 전부
+ * 해당)을 넣는 방법은 **`credentialless` 속성뿐**인데 크로미움 전용이다
+ * (파이어폭스 미구현·사파리 거부).
+ *
+ * 격리되지 않은 문서(코드패스의 비-크로미움 등)에서는 평범한 크로스오리진 iframe 이라
+ * 아무 문제가 없다 — 그래서 격리 여부와 지원 여부를 **함께** 본다.
+ *
+ * ⚠️ 이 판정과 `applyCrossOriginEmbedAttrs` 는 **항상 짝으로** 쓴다. 한쪽만 쓰면
+ * 격리된 문서에서 브라우저가 iframe 을 막고 크롬이 제 오류 화면
+ * (`…에서 연결을 거부했습니다`)을 그 자리에 그린다 — `MbusVideo` 가 실제로 그랬다.
+ */
+export function canEmbedCrossOrigin() {
+    if (typeof window === "undefined")
+        return true;
+    if (!window.crossOriginIsolated)
+        return true;
+    return "credentialless" in HTMLIFrameElement.prototype;
+}
+/**
+ * 제3자 임베드 iframe 이 **실제로 로드되게** 하는 속성 묶음. 둘은 막는 층이 다르므로
+ * 항상 같이 붙인다.
+ *
+ * 1. `credentialless` — 격리된 문서(COEP `require-corp`)에서 COEP 없는 남의 iframe 을
+ *    싣는 유일한 통로. 크로미움이 아니면 무시되므로 조건 없이 붙여도 해가 없다.
+ *
+ * 2. `referrerpolicy` — ⚠️ **호스트가 Referer 를 끄고 있을 수 있다.** 정올은
+ *    `app.html` 에 `<meta name="referrer" content="same-origin">` 을 두어 교차 출처로는
+ *    Referer 를 **아예 안 보낸다.** 그런데 mbus 채널 중에는 Referer 로 출처를 거르는
+ *    것이 있어서, 그런 영상은 CDN 청크가 403 으로 막히고 플레이어가
+ *    `인코딩에 실패했거나 접근 제한되어 재생할 수 없습니다` 를 띄운다 — 영상 자체는
+ *    멀쩡한데(최상위 playlist 는 200) 안 나오는, 설명이 안 되는 실패로 보인다.
+ *    실측(`ch_17827535`): Referer 없음 → 403 · `https://jungol.co.kr/` → 200 ·
+ *    엉뚱한 출처 → 403. 요소에 건 정책이 문서 메타를 이기므로 여기서 되돌린다.
+ *    ⚠️ 전체 URL 이 아니라 **출처만** 보낸다(`strict-origin-…`) — 어느 글에서 봤는지까지
+ *    남의 서버에 알릴 이유는 없다. 앱의 다른 mbus 자리(`MidibusInner`·`legacy-iframe`)가
+ *    쓰는 값과 같다.
+ */
+export function applyCrossOriginEmbedAttrs(iframe) {
+    iframe.setAttribute("credentialless", "");
+    iframe.setAttribute("referrerpolicy", "strict-origin-when-cross-origin");
+}

package/package.json

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