@teriusu/rich-editor 0.11.2 → 0.11.4

package/dist/components/BubbleToolbar.svelte

@@ -24,6 +24,7 @@
     ListChecks,
     Quote,
     ChevronDown,
+    Check,
     Sigma,
   } from "lucide-svelte";
   import { cn } from "../utils/cn";
@@ -102,16 +103,6 @@
     return t("paragraph");
   }
 
-  function isParagraphActive(): boolean {
-    return (
-      !isActive("heading") &&
-      !isActive("bulletList") &&
-      !isActive("orderedList") &&
-      !isActive("taskList") &&
-      !isActive("blockquote")
-    );
-  }
-
   async function addLink() {
     const selection = editor.state.selection.getBookmark();
     const documentBeforePrompt = editor.state.doc;
@@ -175,7 +166,9 @@
     const themeTokens = [
       '--border', '--background', '--foreground', '--popover', '--muted',
       '--muted-foreground', '--primary', '--primary-foreground', '--accent',
-      '--accent-foreground', '--ring', '--hce-menu-z', '--hce-menu-surface'
+      '--accent-foreground', '--ring', '--hce-menu-z', '--hce-menu-surface',
+      '--wh-100', '--wh-500', '--gray-500', '--gray-700', '--gray-900',
+      '--primary-500', '--color-line', '--radius-8', '--radius-2xl', '--shadow-popup'
     ];
     const syncTheme = () => {
       const hostStyle = getComputedStyle(editor.view.dom);
@@ -192,7 +185,7 @@
       const left = viewport?.offsetLeft ?? 0;
       const top = viewport?.offsetTop ?? 0;
       anchor.style.left = `${left + width / 2}px`;
-      anchor.style.top = `${top + height}px`;
+      anchor.style.top = `calc(${top + height}px - env(safe-area-inset-bottom, 0px))`;
       element.style.maxWidth = mobile ? `${Math.max(0, width - 16)}px` : '';
       element.style.setProperty('--bubble-popup-height', `${Math.max(44, height - element.getBoundingClientRect().height - 24)}px`);
     };
@@ -329,125 +322,55 @@
   );
 </script>
 
+{#snippet blockItem(labelKey: EditorMessageKey, Icon: typeof Type, select: () => void)}
+  {@const selected = getCurrentBlockLabel() === t(labelKey)}
+  <button
+    type="button"
+    class="block-menu-item"
+    role="menuitemradio"
+    aria-checked={selected}
+    onclick={() => { select(); showBlockMenu = false; }}
+  >
+    <span class="block-menu-icon"><Icon size={16} /></span>
+    <span class="block-menu-label">{t(labelKey)}</span>
+    {#if selected}<span class="block-menu-check"><Check size={16} /></span>{/if}
+  </button>
+{/snippet}
+
 {#snippet blockPopover()}
-        {#if showBlockMenu}
-          <div
-            bind:this={blockPopupEl}
-            class="bubble-popover absolute bottom-full left-0 mb-1 bg-popover border border-border rounded-lg shadow-xl py-1"
-            style="min-width: 140px"
-            onmousedown={(e) => e.preventDefault()}
-            role="menu"
-            tabindex="-1"
-          >
-            <button
-              type="button"
-              class={cn(
-                "w-full flex items-center gap-2 px-3 py-1.5 text-xs transition-colors",
-                isParagraphActive()
-                  ? "hce-active"
-                  : "text-muted-foreground hover:text-foreground hover:bg-muted",
-              )}
-              onclick={() => {
-                editor.chain().focus().setParagraph().run();
-                showBlockMenu = false;
-              }}
-            >
-              <Type size={12} /> {t('paragraph')}
-            </button>
-            {#each [1, 2, 3] as level (level)}
-              {#if has(level === 1 ? 'h1' : level === 2 ? 'h2' : 'h3')}
-                {@const Icon = level === 1 ? Heading1 : level === 2 ? Heading2 : Heading3}
-                <button
-                  type="button"
-                  class={cn(
-                    "w-full flex items-center gap-2 px-3 py-1.5 text-xs transition-colors",
-                    isActive("heading", { level })
-                      ? "hce-active"
-                      : "text-muted-foreground hover:text-foreground hover:bg-muted",
-                  )}
-                  onclick={() => {
-                    editor
-                      .chain()
-                      .focus()
-                      .toggleHeading({ level: level as 1 | 2 | 3 })
-                      .run();
-                    showBlockMenu = false;
-                  }}
-                >
-                  <Icon size={12} /> {t(level === 1 ? 'heading1' : level === 2 ? 'heading2' : 'heading3')}
-                </button>
-              {/if}
-            {/each}
-            {#if has('bullet-list')}
-              <button
-                type="button"
-                class={cn(
-                  "w-full flex items-center gap-2 px-3 py-1.5 text-xs transition-colors",
-                  isActive("bulletList")
-                    ? "hce-active"
-                    : "text-muted-foreground hover:text-foreground hover:bg-muted",
-                )}
-                onclick={() => {
-                  editor.chain().focus().toggleBulletList().run();
-                  showBlockMenu = false;
-                }}
-              >
-                <List size={12} /> {t('bulletList')}
-              </button>
-            {/if}
-            {#if has('ordered-list')}
-              <button
-                type="button"
-                class={cn(
-                  "w-full flex items-center gap-2 px-3 py-1.5 text-xs transition-colors",
-                  isActive("orderedList")
-                    ? "hce-active"
-                    : "text-muted-foreground hover:text-foreground hover:bg-muted",
-                )}
-                onclick={() => {
-                  editor.chain().focus().toggleOrderedList().run();
-                  showBlockMenu = false;
-                }}
-              >
-                <ListOrdered size={12} /> {t('orderedList')}
-              </button>
-            {/if}
-            {#if has('checklist')}
-              <button
-                type="button"
-                class={cn(
-                  "w-full flex items-center gap-2 px-3 py-1.5 text-xs transition-colors",
-                  isActive("taskList")
-                    ? "hce-active"
-                    : "text-muted-foreground hover:text-foreground hover:bg-muted",
-                )}
-                onclick={() => {
-                  editor.chain().focus().toggleTaskList().run();
-                  showBlockMenu = false;
-                }}
-              >
-                <ListChecks size={12} /> {t('taskList')}
-              </button>
-            {/if}
-            {#if has('blockquote')}
-              <button
-                type="button"
-                class={cn(
-                  "w-full flex items-center gap-2 px-3 py-1.5 text-xs transition-colors",
-                  isActive("blockquote")
-                    ? "hce-active"
-                    : "text-muted-foreground hover:text-foreground hover:bg-muted",
-                )}
-                onclick={() => {
-                  editor.chain().focus().toggleBlockquote().run();
-                  showBlockMenu = false;
-                }}
-              >
-                <Quote size={12} /> {t('blockquote')}
-              </button>
-            {/if}
-          </div>
+  {#if showBlockMenu}
+    <div
+      bind:this={blockPopupEl}
+      class="bubble-popover bubble-block-menu absolute bottom-full left-0 mb-1"
+      onmousedown={(e) => e.preventDefault()}
+      role="menu"
+      aria-orientation="vertical"
+      tabindex="-1"
+    >
+      {@render blockItem('paragraph', Type, () => { editor.chain().focus().setParagraph().run(); })}
+      {#each [1, 2, 3] as level (level)}
+        {#if has(level === 1 ? 'h1' : level === 2 ? 'h2' : 'h3')}
+          {@const Icon = level === 1 ? Heading1 : level === 2 ? Heading2 : Heading3}
+          {@render blockItem(
+            level === 1 ? 'heading1' : level === 2 ? 'heading2' : 'heading3', Icon,
+            () => { editor.chain().focus().toggleHeading({ level: level as 1 | 2 | 3 }).run(); }
+          )}
         {/if}
+      {/each}
+      {#if has('bullet-list')}
+        {@render blockItem('bulletList', List, () => { editor.chain().focus().toggleBulletList().run(); })}
+      {/if}
+      {#if has('ordered-list')}
+        {@render blockItem('orderedList', ListOrdered, () => { editor.chain().focus().toggleOrderedList().run(); })}
+      {/if}
+      {#if has('checklist')}
+        {@render blockItem('taskList', ListChecks, () => { editor.chain().focus().toggleTaskList().run(); })}
+      {/if}
+      {#if has('blockquote')}
+        {@render blockItem('blockquote', Quote, () => { editor.chain().focus().toggleBlockquote().run(); })}
+      {/if}
+    </div>
+  {/if}
 {/snippet}
 
 {#snippet colorPopover()}
@@ -509,12 +432,13 @@
           type="button"
           onclick={() => (showBlockMenu = !showBlockMenu)}
           aria-haspopup="menu"
+          aria-label={getCurrentBlockLabel()}
           aria-expanded={showBlockMenu}
-          class="flex items-center gap-1 px-2.5 py-1.5 rounded-full text-xs font-medium text-muted-foreground hover:text-foreground hover:bg-muted transition-colors"
+          class="bubble-block-trigger flex items-center gap-1 px-2.5 py-1.5 rounded-full text-xs font-medium text-muted-foreground hover:text-foreground hover:bg-muted transition-colors"
         >
-          <Type size={12} />
-          {getCurrentBlockLabel()}
-          <ChevronDown size={12} />
+          <Type size={mobile ? 14 : 12} />
+          {#if !mobile}{getCurrentBlockLabel()}{/if}
+          <ChevronDown size={mobile ? 8 : 12} />
         </button>
         {#if !mobile}{@render blockPopover()}{/if}
       </div>
@@ -688,28 +612,30 @@
 
 <style>
   .mobile .hce-floating-panel {
-    border-radius: 12px;
-    padding: 4px;
-    padding-bottom: max(4px, env(safe-area-inset-bottom));
+    border-radius: 8px;
+    padding: 1px 3px;
   }
   .mobile .bubble-toolbar-rail {
     display: flex;
     flex-wrap: nowrap;
     max-width: 100%;
-    overflow-x: auto;
+    gap: 1px;
     padding: 0;
-    scrollbar-width: none;
-    touch-action: pan-x;
   }
-  .mobile .bubble-toolbar-rail::-webkit-scrollbar { display: none; }
   .mobile .bubble-toolbar-rail > * { flex-shrink: 0; }
-  .mobile button {
-    min-width: 44px;
-    min-height: 44px;
+  .mobile .bubble-toolbar-rail button {
+    width: 28px;
+    height: 28px;
+    padding: 0;
     display: inline-flex;
     align-items: center;
     justify-content: center;
   }
+  .mobile .bubble-toolbar-rail .bubble-block-trigger {
+    width: 32px;
+    gap: 1px;
+  }
+  .mobile .bubble-popover:not(.bubble-block-menu) button { min-width: 44px; min-height: 44px; }
   .mobile input[type="color"] { min-width: 44px; min-height: 44px; }
   .mobile .bubble-divider { display: none; }
   .mobile .bubble-popover-anchor { position: static; }
@@ -719,4 +645,39 @@
     max-height: min(var(--bubble-popup-height, 50dvh), 300px);
     overflow-y: auto;
   }
+  .bubble-block-menu {
+    width: 200px;
+    box-sizing: border-box;
+    padding: 4px;
+    background: var(--wh-100, var(--popover, var(--background, #fff)));
+    border: 1px solid var(--color-line, var(--border));
+    border-radius: var(--radius-2xl, 12px);
+    box-shadow: var(--shadow-popup, 0 8px 24px rgb(0 0 0 / 12%));
+  }
+  .mobile .bubble-block-menu { right: auto; max-width: 100%; }
+  .block-menu-item {
+    display: flex;
+    align-items: center;
+    width: 100%;
+    min-height: 32px;
+    gap: 8px;
+    padding: 6px 8px;
+    border-radius: var(--radius-8, 8px);
+    color: var(--gray-700, var(--foreground));
+    font: inherit;
+    font-size: 13px;
+    line-height: 20px;
+    text-align: left;
+    white-space: nowrap;
+  }
+  .block-menu-item:hover, .block-menu-item:focus-visible {
+    background: var(--wh-500, var(--muted));
+  }
+  .block-menu-item[aria-checked='true'] {
+    color: var(--gray-900, var(--foreground));
+    font-weight: 600;
+  }
+  .block-menu-label { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
+  .block-menu-icon { display: inline-flex; flex: none; color: var(--gray-500, var(--muted-foreground)); }
+  .block-menu-check { display: inline-flex; flex: none; color: var(--primary-500, var(--primary)); }
 </style>

package/dist/components/BubbleToolbar.svelte.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"BubbleToolbar.svelte.d.ts","sourceRoot":"","sources":["../../src/components/BubbleToolbar.svelte.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,MAAM,EAAE,MAAM,cAAc,CAAC;AA0B3C,OAAO,KAAK,EAAE,cAAc,EAAE,aAAa,EAAE,MAAM,UAAU,CAAC;AAC9D,OAAO,EAA4C,KAAK,gBAAgB,EAAE,MAAM,SAAS,CAAC;AAEzF,KAAK,gBAAgB,GAAI;IACtB,MAAM,EAAE,MAAM,CAAC;IACf,QAAQ,EAAE,GAAG,CAAC,cAAc,CAAC,CAAC;IAC9B,YAAY,CAAC,EAAE,aAAa,CAAC;IAC7B,8BAA8B;IAC9B,CAAC,CAAC,EAAE,gBAAgB,CAAC;CACtB,CAAC;AA+iBJ,QAAA,MAAM,aAAa,sDAAwC,CAAC;AAC5D,KAAK,aAAa,GAAG,UAAU,CAAC,OAAO,aAAa,CAAC,CAAC;AACtD,eAAe,aAAa,CAAC"}
+{"version":3,"file":"BubbleToolbar.svelte.d.ts","sourceRoot":"","sources":["../../src/components/BubbleToolbar.svelte.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,MAAM,EAAE,MAAM,cAAc,CAAC;AA2B3C,OAAO,KAAK,EAAE,cAAc,EAAE,aAAa,EAAE,MAAM,UAAU,CAAC;AAC9D,OAAO,EAA4C,KAAK,gBAAgB,EAAE,MAAM,SAAS,CAAC;AAEzF,KAAK,gBAAgB,GAAI;IACtB,MAAM,EAAE,MAAM,CAAC;IACf,QAAQ,EAAE,GAAG,CAAC,cAAc,CAAC,CAAC;IAC9B,YAAY,CAAC,EAAE,aAAa,CAAC;IAC7B,8BAA8B;IAC9B,CAAC,CAAC,EAAE,gBAAgB,CAAC;CACtB,CAAC;AAmfJ,QAAA,MAAM,aAAa,sDAAwC,CAAC;AAC5D,KAAK,aAAa,GAAG,UAAU,CAAC,OAAO,aAAa,CAAC,CAAC;AACtD,eAAe,aAAa,CAAC"}

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.2",
+  "version": "0.11.4",
   "description": "TipTap 기반 Notion-style 리치 텍스트 에디터 (Svelte)",
   "type": "module",
   "svelte": "./dist/index.js",