@teriusu/rich-editor 0.11.3 → 0.11.4

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,22 @@
+/**
+ * 「이 문서에서 **COEP 를 안 보내는 남의 iframe** 을 실을 수 있는가」.
+ *
+ * ⚠️ 정올은 전 문서에 `Cross-Origin-Embedder-Policy: require-corp`(교차 출처 격리)를
+ * 건다. 격리된 문서에 자기 COEP 를 안 보내는 제3자 iframe(유튜브·Vimeo·mbus 전부
+ * 해당)을 넣는 방법은 **`credentialless` 속성뿐**인데 크로미움 전용이다
+ * (파이어폭스 미구현·사파리 거부).
+ *
+ * 격리되지 않은 문서(코드패스의 비-크로미움 등)에서는 평범한 크로스오리진 iframe 이라
+ * 아무 문제가 없다 — 그래서 격리 여부와 지원 여부를 **함께** 본다.
+ *
+ * ⚠️ 이 판정과 `applyCrossOriginEmbedAttrs` 는 **항상 짝으로** 쓴다. 한쪽만 쓰면
+ * 격리된 문서에서 브라우저가 iframe 을 막고 크롬이 제 오류 화면
+ * (`…에서 연결을 거부했습니다`)을 그 자리에 그린다 — `MbusVideo` 가 실제로 그랬다.
+ */
+export declare function canEmbedCrossOrigin(): boolean;
+/**
+ * 격리된 문서에서 COEP 없는 영상을 싣는 유일한 통로. 크로미움이 아니면 이 속성 자체가
+ * 무시되므로 조건 없이 붙여도 해가 없다.
+ */
+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;;;GAGG;AACH,wBAAgB,0BAA0B,CAAC,MAAM,EAAE,iBAAiB,GAAG,IAAI,CAE1E"}

package/dist/utils/embed.js

@@ -0,0 +1,29 @@
+/**
+ * 「이 문서에서 **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;
+}
+/**
+ * 격리된 문서에서 COEP 없는 영상을 싣는 유일한 통로. 크로미움이 아니면 이 속성 자체가
+ * 무시되므로 조건 없이 붙여도 해가 없다.
+ */
+export function applyCrossOriginEmbedAttrs(iframe) {
+    iframe.setAttribute("credentialless", "");
+}

package/package.json

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