@growgroup/visual-editor 0.7.0 → 0.7.2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@growgroup/visual-editor",
-  "version": "0.7.0",
+  "version": "0.7.2",
   "description": "HTMLをブラウザ上で直接編集するビジュアルエディタ。スライド(固定サイズ)とWebページ(可変高さ)の両方に使え、保存先はアダプタで差し替えられます。",
   "keywords": [
     "visual-editor",

package/src/editor/FrontendVisualEditor.tsx

@@ -726,7 +726,7 @@ function FrontendVisualEditorInner({
     async (item: MediaItem) => {
       setIsMediaLibraryOpen(false);
 
-      // blob: iframe では相対パスが解決できないため絶対URLへ（保存時に相対へ戻る）
+      // 埋め込みiframeでも同じ素材を参照できるよう絶対URLへ（保存時に相対へ戻る）
       const src = toEditorMediaUrl(item.url);
 
       if (isImageSelected) {

package/src/editor/components/EditorCanvas.tsx

@@ -978,7 +978,7 @@ export function EditorCanvas() {
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, []);
 
-  // iframeのsrcを設定。
+  // 本文をsrcdocで渡す。Blob URLを解決できない埋め込みブラウザでも読み込める。
   // 依存に iframeHtml(=originalHtml由来)を含めることで、ページ切替(サムネイル/URL)で
   // コンテンツが差し替わったときに**iframeだけ**を作り直す。殻(ヘッダー・パネル・
   // サムネイル)は残るので、切替のたびに画面全体がリロードされたようには見えない
@@ -993,14 +993,10 @@ export function EditorCanvas() {
     // マルチフレームのキャンバスはこれを見て、前のページの姿が新しい枠に
     // 見えないようエディタを隠す(読み込みが済むまで見るだけの紙面が透ける)
     setIframeReady(false);
-    const blob = new Blob([iframeHtml], { type: "text/html" });
-    iframe.src = URL.createObjectURL(blob);
+    iframe.srcdoc = iframeHtml;
 
     return () => {
       iframe.removeEventListener("load", handleIframeLoad);
-      if (iframe.src.startsWith("blob:")) {
-        URL.revokeObjectURL(iframe.src);
-      }
 
       // 重要: アンマウント時にすべてのイベントリスナーをクリーンアップ
       // これにより、メモリリークとゴーストリスナーを防ぐ

package/src/editor/components/EditorHeader.tsx

@@ -138,10 +138,7 @@ export function EditorHeader({
   const handleReset = () => {
     const iframe = iframeRef.current;
     if (iframe) {
-      const blob = new Blob([generateEditableHtml(originalHtml, editorMode)], {
-        type: "text/html",
-      });
-      iframe.src = URL.createObjectURL(blob);
+      iframe.srcdoc = generateEditableHtml(originalHtml, editorMode);
     }
     setHtml(originalHtml);
     setSelectedElement(null);

package/src/editor/hooks/useIframeInitializer.ts

@@ -525,14 +525,10 @@ export function useIframeInitializer() {
 
     iframe.addEventListener('load', handleLoad);
 
-    const blob = new Blob([generateEditableHtml(html, editorMode)], { type: 'text/html' });
-    iframe.src = URL.createObjectURL(blob);
+    iframe.srcdoc = generateEditableHtml(html, editorMode);
 
     return () => {
       iframe.removeEventListener('load', handleLoad);
-      if (iframe.src.startsWith('blob:')) {
-        URL.revokeObjectURL(iframe.src);
-      }
     };
   }, []);
 

package/src/editor/hooks/useKeepArtboardInPlace.ts

@@ -62,7 +62,7 @@ export function useKeepArtboardInPlace(
       }
       lastRef.current = {
         left,
-        viewportWidth: doc?.documentElement.clientWidth ?? 0,
+        viewportWidth: doc?.documentElement?.clientWidth ?? 0,
         scrollLeft: scroller?.scrollLeft ?? 0,
       };
     });
@@ -78,7 +78,8 @@ export function useKeepArtboardInPlace(
     if (!doc || !scroller) return;
     const remember = () => {
       const last = lastRef.current;
-      if (last && doc.documentElement.clientWidth === last.viewportWidth) last.scrollLeft = scroller.scrollLeft;
+      // ページを移る途中は文書が差し替わり、documentElement が無いことがある(⌘ クリックのリンク移動で実測)
+      if (last && doc.documentElement && doc.documentElement.clientWidth === last.viewportWidth) last.scrollLeft = scroller.scrollLeft;
     };
     remember();
     scroller.addEventListener('scroll', remember, { passive: true });

package/src/editor/hooks/useMediaLibrary.ts

@@ -59,7 +59,7 @@ async function fetchMediaItems(): Promise<MediaItem[]> {
 /**
  * カタログのURL(`/media/...`)をエディタのiframeで解決できる形へ変換する。
  *
- * エディタのキャンバスは blob: URL の iframe なのでルート相対パスが解決できない。
+ * エディタのキャンバスは埋め込みiframe。実行時のbaseに依存させず、元のページと同じ素材を参照する。
  * `src/lib/slide-html.ts` の toEditorUrls / fromEditorUrls と同じ規約に合わせ、
  * 挿入時は絶対URLにしておく（保存時に fromEditorUrls が相対へ戻す）。
  */

package/src/version.ts

@@ -6,4 +6,4 @@
  * 利用側はこの値と node_modules の package.json を見比べて、食い違っていれば
  * 「再起動してください」と出せる(構成ラフのテンプレートが行っている)
  */
-export const EDITOR_VERSION = '0.7.0';
+export const EDITOR_VERSION = '0.7.2';