@teriusu/rich-editor 0.11.4 → 0.11.6

package/dist/utils/embed.d.ts

@@ -15,8 +15,23 @@
  */
 export declare function canEmbedCrossOrigin(): boolean;
 /**
- * 격리된 문서에서 COEP 없는 영상을 싣는 유일한 통로. 크로미움이 아니면 이 속성 자체가
- * 무시되므로 조건 없이 붙여도 해가 없다.
+ * 제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

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

@@ -21,9 +21,25 @@ export function canEmbedCrossOrigin() {
     return "credentialless" in HTMLIFrameElement.prototype;
 }
 /**
- * 격리된 문서에서 COEP 없는 영상을 싣는 유일한 통로. 크로미움이 아니면 이 속성 자체가
- * 무시되므로 조건 없이 붙여도 해가 없다.
+ * 제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/dist/utils/resize.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"resize.d.ts","sourceRoot":"","sources":["../../src/utils/resize.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,MAAM,EAAE,MAAM,cAAc,CAAC;AAC3C,OAAO,KAAK,EAAE,IAAI,IAAI,eAAe,EAAE,MAAM,kBAAkB,CAAC;AAEhE;;;;;;;;;;;;;;;;;GAiBG;AAEH,MAAM,MAAM,UAAU,GAAG,GAAG,GAAG,GAAG,CAAC;AAEnC,MAAM,WAAW,mBAAmB;IACnC,uCAAuC;IACvC,GAAG,EAAE,WAAW,CAAC;IACjB,MAAM,EAAE,MAAM,CAAC;IACf,MAAM,EAAE,MAAM,MAAM,GAAG,SAAS,CAAC;IACjC,mDAAmD;IACnD,OAAO,EAAE,MAAM,eAAe,CAAC;IAC/B,qCAAqC;IACrC,IAAI,CAAC,EAAE,UAAU,CAAC;IAClB,sDAAsD;IACtD,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,kCAAkC;IAClC,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,sCAAsC;IACtC,MAAM,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,MAAM,CAAC;IACnC;;;;OAIG;IACH,YAAY,CAAC,EAAE,WAAW,CAAC;IAC3B;;;;OAIG;IACH,UAAU,CAAC,EAAE,CAAC,IAAI,EAAE,eAAe,EAAE,KAAK,EAAE,MAAM,KAAK,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAAC;CAC/E;AA4BD,wBAAgB,YAAY,CAAC,OAAO,EAAE,mBAAmB,GAAG,MAAM,IAAI,CA+HrE"}
+{"version":3,"file":"resize.d.ts","sourceRoot":"","sources":["../../src/utils/resize.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,MAAM,EAAE,MAAM,cAAc,CAAC;AAC3C,OAAO,KAAK,EAAE,IAAI,IAAI,eAAe,EAAE,MAAM,kBAAkB,CAAC;AAEhE;;;;;;;;;;;;;;;;;GAiBG;AAEH,MAAM,MAAM,UAAU,GAAG,GAAG,GAAG,GAAG,CAAC;AAEnC,MAAM,WAAW,mBAAmB;IACnC,uCAAuC;IACvC,GAAG,EAAE,WAAW,CAAC;IACjB,MAAM,EAAE,MAAM,CAAC;IACf,MAAM,EAAE,MAAM,MAAM,GAAG,SAAS,CAAC;IACjC,mDAAmD;IACnD,OAAO,EAAE,MAAM,eAAe,CAAC;IAC/B,qCAAqC;IACrC,IAAI,CAAC,EAAE,UAAU,CAAC;IAClB,sDAAsD;IACtD,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,kCAAkC;IAClC,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,sCAAsC;IACtC,MAAM,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,MAAM,CAAC;IACnC;;;;OAIG;IACH,YAAY,CAAC,EAAE,WAAW,CAAC;IAC3B;;;;OAIG;IACH,UAAU,CAAC,EAAE,CAAC,IAAI,EAAE,eAAe,EAAE,KAAK,EAAE,MAAM,KAAK,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAAC;CAC/E;AA4BD,wBAAgB,YAAY,CAAC,OAAO,EAAE,mBAAmB,GAAG,MAAM,IAAI,CA0LrE"}

package/dist/utils/resize.js

@@ -45,6 +45,52 @@ export function attachResize(options) {
     let resizing = false;
     let start = 0;
     let startSize = 0;
+    /*
+     * ── 왜 프레임에 한 번만 쓰는가 ────────────────────────────────────────────────
+     *
+     * `pointermove` 는 **화면 주사율과 무관하게** 들어온다 — 고폴링 마우스는 한 프레임에
+     * 여러 번 던진다. 예전엔 들어오는 족족 `dom.style.width` 를 썼는데, 이 상자는 안에
+     * `aspect-ratio` 박스와 **교차 출처 iframe**(영상)을 품고 있어서 한 번 쓸 때마다
+     * 레이아웃이 iframe 까지 내려간다. 즉 한 프레임에 같은 일을 여러 번 하고, 마지막 값만
+     * 화면에 남는다 — 앞의 것들은 전부 버려지는 계산이다.
+     *
+     * 값은 즉시 받아 두되 **적용은 프레임당 한 번**으로 접는다. 끄는 감각(지연)은 그대로고
+     * 버려지던 레이아웃만 사라진다.
+     */
+    let pendingSize = 0;
+    let frame = 0;
+    const applyPending = () => {
+        frame = 0;
+        if (axis === "x")
+            dom.style.width = `${pendingSize}px`;
+        else
+            dom.style.height = `${pendingSize}px`;
+    };
+    const flushPending = () => {
+        if (!frame)
+            return;
+        cancelAnimationFrame(frame);
+        applyPending();
+    };
+    /*
+     * ⚠️ **드래그하는 동안 iframe 이 포인터를 가로채지 못하게 막는다.**
+     *
+     * 손잡이는 상자 오른쪽 12px 밖에 있고, 끌면 커서는 곧바로 상자 **안**(영상 iframe 위)을
+     * 지난다. 교차 출처 iframe 위에서는 그 이벤트가 iframe 문서로 가고 부모 window 에는
+     * 오지 않는다 — 위 `attachWindow` 가 window 에 걸어 둔 리스너도 마찬가지다. 그러면
+     * 끌던 도중에 크기가 멈췄다 튀었다 한다.
+     *
+     * `setPointerCapture` 로도 막히지만 이 코드는 그걸 일부러 피한다(아래 주석) — 대신
+     * **드래그 동안만** 자식 임베드의 포인터를 끈다. 드래그가 끝나면 되돌린다.
+     * ⚠️ 빈 문자열로 되돌린다(`none` → `''`). `auto` 로 되돌리면 원래 CSS 가 갖고 있던
+     * 값을 덮어쓴다.
+     */
+    const EMBEDS = "iframe, embed, object, video";
+    const shieldEmbeds = (on) => {
+        for (const el of Array.from(dom.querySelectorAll(EMBEDS))) {
+            el.style.pointerEvents = on ? "none" : "";
+        }
+    };
     const paint = (active) => {
         bar.style.background = active ? ACTIVE : IDLE;
     };
@@ -68,17 +114,21 @@ export function attachResize(options) {
         if (!resizing)
             return;
         const delta = (axis === "x" ? e.clientX : e.clientY) - start;
-        const next = Math.max(min, Math.min(max, startSize + delta));
-        if (axis === "x")
-            dom.style.width = `${next}px`;
-        else
-            dom.style.height = `${next}px`;
+        pendingSize = Math.max(min, Math.min(max, startSize + delta));
+        if (!frame)
+            frame = requestAnimationFrame(applyPending);
     };
     const endResize = () => {
         if (!resizing)
             return;
         resizing = false;
+        /*
+         * ⚠️ **밀린 프레임을 먼저 적용한다.** 아래에서 커밋할 값을 `dom.style` 에서 읽는데,
+         * 예약만 된 채 아직 안 쓴 값이 있으면 **직전 프레임의 크기로 저장**된다.
+         */
+        flushPending();
         paint(false);
+        shieldEmbeds(false);
         detachWindow();
         document.body.style.removeProperty("user-select");
         document.body.style.removeProperty("cursor");
@@ -117,6 +167,8 @@ export function attachResize(options) {
         start = axis === "x" ? e.clientX : e.clientY;
         startSize = axis === "x" ? rect.width : rect.height;
         paint(true);
+        pendingSize = startSize;
+        shieldEmbeds(true);
         // 드래그 중 텍스트가 선택되며 파랗게 물드는 것을 막는다.
         document.body.style.userSelect = "none";
         document.body.style.cursor = preset.cursor;
@@ -130,6 +182,13 @@ export function attachResize(options) {
         handle.removeEventListener("mouseenter", onEnter);
         handle.removeEventListener("mouseleave", onLeave);
         handle.removeEventListener("pointerdown", onPointerDown);
+        /* 드래그 도중에 노드가 사라질 수 있다 — 예약 프레임과 가림막을 반드시 걷는다. */
+        if (frame) {
+            cancelAnimationFrame(frame);
+            frame = 0;
+        }
+        if (resizing)
+            shieldEmbeds(false);
         detachWindow();
         handle.remove();
     };

package/package.json

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