@growgroup/visual-editor 0.2.2 → 0.3.0

package/src/editor/FrontendVisualEditor.tsx

@@ -30,7 +30,7 @@ import { PptFormatPane } from './components/ppt/PptFormatPane';
 import { createAuthApi } from '../lib/api/auth-fetch';
 import { useAuth } from '../components/auth/AuthProvider';
 import { findSlideRoot, findInsertionParent } from './utils/slide-root';
-import { registerAutoSaveFlush } from './autosave';
+import { registerAutoSaveFlush, flushAutoSave, beginContentSwitch, endContentSwitch, isContentSwitching } from './autosave';
 import { getCleanHtml } from './utils/html-utils';
 import { EditorAppearanceContext, useEditorTheme } from './contexts/EditorAppearanceContext';
 import { CanvasAppearance } from './components/shell/CanvasAppearance';
@@ -69,6 +69,7 @@ import { BreakpointGuides } from './components/BreakpointGuides';
 import type { ContextMenuPosition } from './components';
 import { EditorToolbar } from './EditorToolbar';
 import { MultiPageCanvasView } from './components/multi-page';
+import { useMultiPageCanvasOptional } from './contexts/MultiPageCanvasContext';
 import { convertToAbsolutePositioning, buildDomTree, getArtboardContent, canUngroup, updateSelectionBox } from './utils/dom-utils';
 import { extractElementInfo } from './utils/style-utils';
 import { findTableCell, insertRow, insertColumn, deleteRow, deleteColumn } from './utils/table-edit';
@@ -138,10 +139,22 @@ export interface FrontendVisualEditorProps {
    * 保存。options.auto は自動保存(ユーザーが押したのではない)を示す。
    * 保存結果のトーストは手動保存のときだけ出したいので、呼び出し側で見分けられるようにする
    */
-  onSave: (html: string, options?: { auto?: boolean }) => Promise<void>;
+  onSave: (html: string, options?: { auto?: boolean; contentId?: string }) => Promise<void>;
   onClose: () => void;
-  /** マルチページ無限キャンバスモードを有効にする (default: false) */
+  /**
+   * Figma 風のマルチフレームキャンバス(全ページを 1 枚のキャンバスに並べ、クリックしたページを編集する)。
+   * ページの本文は contentList[].thumbnailHtml か io.loadContent(id) から読む。
+   * 保存は onSave(html, { contentId }) で「どのページか」が付いて呼ばれる (default: false)
+   */
   enableMultiPageCanvas?: boolean;
+  /**
+   * 編集するページが変わったときの通知(キャンバスのクリック・左パネルのページ一覧)。
+   * 利用側が URL や「いま編集中のページ」を追うために使う。逆に contentId プロップを
+   * 変えると、エディタ側がそのページへ移る
+   */
+  onContentChange?: (contentId: string) => void;
+  /** キャンバスの表示位置(倍率・スクロール)を記憶するキー。省略時は parentId */
+  canvasStorageKey?: string;
   /** 外部から渡すコンテンツリスト（指定時はAPI取得をスキップ） */
   contentList?: ContentListItem[];
   /**
@@ -186,6 +199,7 @@ function FrontendVisualEditorInner({
     activeTool,
     setActiveTool,
     originalHtml,
+    sourceHtml,
     // [自動保存] 変更検知と、保存できた分の基準の付け替えに使う
     html,
     hasChanges,
@@ -716,6 +730,9 @@ function FrontendVisualEditorInner({
    * 特に onSave はページ番号を閉じ込めているため、保存の開始時点の値で
    * 内容とページ番号を揃える必要がある(古い内容を新しいページへ書かないため)
    */
+  const multiPageCanvas = useMultiPageCanvasOptional();
+  const multiPageCanvasRef = useRef(multiPageCanvas);
+  multiPageCanvasRef.current = multiPageCanvas;
   const saveStateRef = useRef({ html, hasChanges, canUndo, contentId });
   useEffect(() => {
     saveStateRef.current = { html, hasChanges, canUndo, contentId };
@@ -731,17 +748,10 @@ function FrontendVisualEditorInner({
     const baseline = saveStateRef.current.html;
     const savingContentId = saveStateRef.current.contentId;
 
+    // 保存先は常に利用側の onSave。マルチフレームのキャンバスでは
+    // 「どのページの本文か」を contentId で付けて渡す(利用側が保存先を選べる)
     const task = (async () => {
-      if (isMultiPageCanvas && parentId && contentId) {
-        const api = await createAuthApi(getIdToken);
-        await api.patch(`/api/websites/${parentId}/pages/${contentId}`, {
-          html: htmlToSave,
-          layoutMode,
-        });
-        toast.success('ページを保存しました');
-        return;
-      }
-      await onSave(htmlToSave, options);
+      await onSave(htmlToSave, { ...options, contentId: savingContentId ?? undefined });
     })();
     saveInFlightRef.current = task.then(
       () => undefined,
@@ -755,6 +765,8 @@ function FrontendVisualEditorInner({
         savedPayloadRef.current = htmlToSave;
         setOriginalHtml(baseline);
       }
+      // キャンバスの「見るだけの紙面」も保存後の姿にする(離れたあとも最新が見える)
+      if (savingContentId) multiPageCanvasRef.current?.setPageHtml(savingContentId, htmlToSave);
       setAutoSaveFailed(false);
     } catch (e) {
       setAutoSaveFailed(true);
@@ -763,7 +775,7 @@ function FrontendVisualEditorInner({
       saveInFlightRef.current = null;
       setSaving(false);
     }
-  }, [isMultiPageCanvas, parentId, contentId, getIdToken, layoutMode, onSave, setOriginalHtml, setSaving]);
+  }, [onSave, setOriginalHtml, setSaving]);
 
   /**
    * 未保存の変更があれば保存する。戻り値は「保存できたか」。
@@ -775,6 +787,9 @@ function FrontendVisualEditorInner({
    */
   const saveIfDirty = useCallback(async (): Promise<boolean> => {
     const state = saveStateRef.current;
+    // ページ切替の途中(履歴の本文がまだ前のページ)は保存しない。
+    // ここで送ると前のページの本文を次のページへ書いてしまう
+    if (isContentSwitching()) return true;
     if (!state.hasChanges || !state.canUndo) return true;
     const iframeDoc = getIframeDoc();
     const payload = iframeDoc ? getCleanHtml(iframeDoc) : state.html;
@@ -841,6 +856,18 @@ function FrontendVisualEditorInner({
     savedPayloadRef.current = null;
   }, [contentId]);
 
+  // マルチフレームのキャンバス: フレーム名の「未保存」印と、見るだけの紙面の本文を同期する
+  const isDirtyForCanvas = hasChanges && canUndo;
+  useEffect(() => {
+    if (!multiPageCanvas || !contentId) return;
+    multiPageCanvas.updatePageFrame(contentId, { isDirty: isDirtyForCanvas });
+  }, [multiPageCanvas, contentId, isDirtyForCanvas]);
+  useEffect(() => {
+    if (!multiPageCanvas || !contentId) return;
+    multiPageCanvas.setPageHtml(contentId, sourceHtml);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [sourceHtml]);
+
   /** 保存しきれていない状態でタブを閉じられたときだけ、ブラウザ既定の離脱警告を出す */
   useEffect(() => {
     if (!hasChanges) return;
@@ -915,11 +942,13 @@ function FrontendVisualEditorInner({
         if (element) {
           const rect = element.getBoundingClientRect();
           const iframeRect = iframe.getBoundingClientRect();
-          
+          // iframe が外側の transform で縮んでいる(マルチフレーム)ときは実測の倍率で掛ける
+          const outerScale = iframeRect.width / (iframe.clientWidth || iframeRect.width) || 1;
+
           // ポップオーバーを要素の右側に表示
           setAiPromptPosition({
-            x: iframeRect.left + rect.right + 10,
-            y: iframeRect.top + rect.top,
+            x: iframeRect.left + rect.right * outerScale + 10,
+            y: iframeRect.top + rect.top * outerScale,
           });
           return;
         }
@@ -1243,18 +1272,23 @@ function FrontendVisualEditorInner({
             // 縮小表示されている。画面座標をそのまま使うとスライド左上を原点にできないので、
             // スライドのルート要素の実測矩形を基準に、スライド内座標へ換算する。
             const iframeRect = iframeRef.current.getBoundingClientRect();
+            // 親の座標 → iframe の座標。iframe が外側の transform で縮んでいる
+            // (マルチフレーム)ときは実測の倍率で割る。単独表示では 1
+            const outerScale = iframeRect.width / (iframeRef.current.clientWidth || iframeRect.width) || 1;
+            const frameX = (e.clientX - iframeRect.left) / outerScale;
+            const frameY = (e.clientY - iframeRect.top) / outerScale;
             const slideRoot = findSlideRoot(iframeDoc);
             let x: number;
             let y: number;
             if (slideRoot) {
               const rootRect = slideRoot.getBoundingClientRect();
               const rootScale = rootRect.width / (slideRoot.offsetWidth || rootRect.width) || 1;
-              x = (e.clientX - iframeRect.left - rootRect.left) / rootScale;
-              y = (e.clientY - iframeRect.top - rootRect.top) / rootScale;
+              x = (frameX - rootRect.left) / rootScale;
+              y = (frameY - rootRect.top) / rootScale;
             } else {
-              const dropScale = zoom || 1;
-              x = (e.clientX - iframeRect.left) / dropScale;
-              y = (e.clientY - iframeRect.top) / dropScale;
+              const dropScale = (zoom || 100) / 100;
+              x = frameX / dropScale;
+              y = frameY / dropScale;
             }
 
             // 部品モード: 定義を実体化してそのまま置く(JSON のインスタンスは作らない)。
@@ -1266,7 +1300,7 @@ function FrontendVisualEditorInner({
                 return;
               }
               if (editorMode === 'webpage') {
-                insertIntoFlow(iframeDoc, element, e.clientX - iframeRect.left, e.clientY - iframeRect.top);
+                insertIntoFlow(iframeDoc, element, frameX, frameY);
               } else {
                 element.style.position = 'absolute';
                 element.style.left = `${x}px`;
@@ -2000,7 +2034,8 @@ function FrontendVisualEditorInner({
             }),
           page: Number(currentContentId ?? contentId) || 1,
         }}
-        onSwitchUi={() => switchUi('ppt')}
+        /* マルチフレームのキャンバスは Figma 風の殻だけ(PowerPoint 風には切り替えない) */
+        onSwitchUi={isMultiPageCanvas ? undefined : () => switchUi('ppt')}
         onSave={effectiveSave}
         onSaveSettings={handleSaveCurrentSettings}
         onClose={handleClose}
@@ -2026,8 +2061,6 @@ function FrontendVisualEditorInner({
             上下2段=ページ切替+レイヤー(Figma風。キャンバス編集中はページの並びがキャンバス側にあるので出さない) */}
         {isPpt ? (
           <PptThumbnails page={Number(currentContentId ?? contentId) || 1} theme={pptTheme} search={pptSearch} />
-        ) : isMultiPageCanvas ? (
-          <EditorLayerPanel />
         ) : (
           <div className={layersOpen && !isComponentPanelOpen ? "flex min-h-0" : "hidden"}>
             <LeftPanel page={Number(currentContentId ?? contentId) || 1} pagesSlot={pagesPanel} />
@@ -2170,7 +2203,7 @@ function FrontendVisualEditorInner({
             コメントを開いている間はプロパティ(詳細編集)を引っ込め、閉じると戻る。
             2つ並ぶと「いまどちらを操作しているのか」が分からなくなるため */}
         {!isPpt && !pptCommentsOpen && (editorMode === 'slide' || selectedElement || selectedElementIds.length > 0 || activeTool === 'scale') && <EditorPropertyPanel />}
-        {!isMultiPageCanvas && can('commentAction') && (
+        {can('commentAction') && (
           <PptCommentMarkers
             page={Number(currentContentId ?? contentId) || 1}
             onOpenThread={(id) => {
@@ -2182,7 +2215,7 @@ function FrontendVisualEditorInner({
         {isPpt && pptFormatPaneOpen && (
           <PptFormatPane theme={pptTheme} onClose={() => setPptFormatPaneOpen(false)} />
         )}
-        {!isMultiPageCanvas && can('commentAction') && (pptCommentsOpen || commentsMounted) && (
+        {can('commentAction') && (pptCommentsOpen || commentsMounted) && (
           <div className={pptCommentsOpen ? 'flex min-h-0' : 'hidden'}>
           <PptCommentsPanel
             page={Number(currentContentId ?? contentId) || 1}
@@ -2199,7 +2232,7 @@ function FrontendVisualEditorInner({
       {/* ノート欄(トークスクリプト)。PowerPoint風・Figma風の両方に出す。
           Figma風はダーク配色で固定(スキンと馴染む) */}
       {/* ノート欄は発表原稿。Webページには無い概念なので出さない */}
-      {!isMultiPageCanvas && editorMode !== 'webpage' && can('apiFetch') && (
+      {editorMode !== 'webpage' && can('apiFetch') && (
         <PptNotes page={Number(currentContentId ?? contentId) || 1} theme={pptTheme} />
       )}
 
@@ -2542,6 +2575,8 @@ export function FrontendVisualEditor({
   contentList: externalContentList,
   pagesPanel,
   headerExtra,
+  onContentChange: onContentChangeProp,
+  canvasStorageKey,
 }: FrontendVisualEditorProps) {
   const { getIdToken } = useAuth();
   const [contentList, setContentList] = useState<ContentListItem[]>(externalContentList || []);
@@ -2680,45 +2715,109 @@ export function FrontendVisualEditor({
     fetchContentList();
   }, [effectiveParentId, effectiveContentId, getIdToken, editorMode]);
 
-  // コンテンツ変更ハンドラ（editorModeに応じてAPIを切り替え）
-  const handleContentChange = useCallback(async (newContentId: string) => {
-    if (!effectiveParentId || newContentId === currentContentId) return;
+  // 利用側への通知は最新の閉包で(切替の非同期処理の途中で props が変わっても取り違えない)
+  const onContentChangeRef = useRef(onContentChangeProp);
+  onContentChangeRef.current = onContentChangeProp;
+  const currentContentIdRef = useRef(currentContentId);
+  currentContentIdRef.current = currentContentId;
+
+  /**
+   * 編集するページを移す。本文の取り方は順に:
+   *   1. io.loadContent(id)            … 利用側が持つ読み込み(最新が取れる)
+   *   2. contentList[].thumbnailHtml    … 一覧に本文を同梱している場合
+   *   3. parentId の API(gg-manager)    … 従来の経路
+   * どれも無ければ移れない(黙って何もしない)。
+   *
+   * 入口はフレームのクリック(activatePage)と、利用側の contentId プロップの変更の 2 つ。
+   * どちらから来ても **ここで** 未保存の変更を保存してから移る(入口ごとに保存を
+   * 書くと、片方に漏れて 2 秒以内の編集が消える)。
+   * マルチフレームのキャンバスでは isLoading にしない(EditorProvider を外すと
+   * 生きているエディタが消えて、キャンバスごと作り直しになる)。
+   * 戻り値は移れたか(キャンバスの activatePage がリングの戻しに使う)
+   */
+  const switchSeqRef = useRef(0);
+  const handleContentChange = useCallback(async (newContentId: string): Promise<boolean> => {
+    if (newContentId === currentContentIdRef.current) return true;
+    const listItem = contentList.find((c) => c.id === newContentId);
+    const loader = io().loadContent;
+    const canUseApi = !!effectiveParentId && !loader && listItem?.thumbnailHtml == null;
+    if (!loader && listItem?.thumbnailHtml == null && !effectiveParentId) {
+      console.warn('[FrontendVisualEditor] ページを移れません: io.loadContent か contentList[].thumbnailHtml か parentId が必要です');
+      return false;
+    }
+    // 連続して呼ばれたら最後の 1 つだけを通す(前の読み込み結果で上書きしない)
+    const seq = ++switchSeqRef.current;
+    const superseded = () => seq !== switchSeqRef.current;
+
+    // 未保存の変更は黙って保存してから移る(失敗したときだけ確認する)。
+    // 保存の可否を見るのは切替を印す前(印した後は保存が見送られる)
+    if (!(await flushAutoSave())) {
+      if (superseded()) return false;
+      if (!window.confirm('保存に失敗しました。変更を破棄して移動しますか?')) {
+        // 利用側の「編集中のページ」を今のページへ戻す(プロップ経由で来たとき用)
+        const stay = currentContentIdRef.current;
+        if (stay) onContentChangeRef.current?.(stay);
+        return false;
+      }
+    }
+    if (superseded()) return false;
 
-    // キャンバスモード時はisLoadingをスキップ（EditorProviderのアンマウントを防止）
     if (!enableMultiPageCanvas) {
       setIsLoading(true);
     }
+    // ここから iframe の初期化が終わるまで自動保存を止める(前ページの本文を次ページへ書かない)
+    beginContentSwitch();
+    let handedOver = false;
     try {
-      // 新しいコンテンツのHTMLを取得
-      const api = await createAuthApi(getIdToken);
-
-      if (editorMode === 'webpage') {
-        // Webページモード
-        const data = await api.get(`/api/websites/${effectiveParentId}/pages/${newContentId}`);
-        const newHtml = data.page?.content?.html || '';
-        const newLayoutMode = data.page?.layoutMode || 'auto';
-
-        setCurrentHtml(newHtml);
-        setCurrentLayoutMode(newLayoutMode);
-        setCurrentContentId(newContentId);
+      let newHtml = '';
+      let newLayoutMode: 'absolute' | 'auto' = 'auto';
+      if (loader) {
+        newHtml = (await loader(newContentId)) ?? '';
+      } else if (!canUseApi) {
+        newHtml = listItem?.thumbnailHtml ?? '';
       } else {
-        // スライドモード（デフォルト）
-        const data = await api.get(`/api/presentations/${effectiveParentId}/slides/${newContentId}`);
-        const newHtml = data.slide?.generatedHtml || data.slide?.content?.html || '';
-        const newLayoutMode = data.slide?.layoutMode || 'auto';
-
-        setCurrentHtml(newHtml);
-        setCurrentLayoutMode(newLayoutMode);
-        setCurrentContentId(newContentId);
+        const api = await createAuthApi(getIdToken);
+        if (editorMode === 'webpage') {
+          const data = await api.get(`/api/websites/${effectiveParentId}/pages/${newContentId}`);
+          newHtml = data.page?.content?.html || '';
+          newLayoutMode = data.page?.layoutMode || 'auto';
+        } else {
+          const data = await api.get(`/api/presentations/${effectiveParentId}/slides/${newContentId}`);
+          newHtml = data.slide?.generatedHtml || data.slide?.content?.html || '';
+          newLayoutMode = data.slide?.layoutMode || 'auto';
+        }
       }
+      if (superseded()) return false;
+
+      setCurrentHtml(newHtml);
+      setCurrentLayoutMode(newLayoutMode);
+      setCurrentContentId(newContentId);
+      currentContentIdRef.current = newContentId;
+      // 以後の endContentSwitch は EditorCanvas(iframe の初期化後)が呼ぶ
+      handedOver = true;
+      onContentChangeRef.current?.(newContentId);
+      return true;
     } catch (error) {
       console.error('Failed to fetch content:', error);
+      toast.error('ページを読み込めませんでした');
+      return false;
     } finally {
+      // 本文を差し替えなかった(失敗・追い越された)なら、自分で印を外す
+      if (!handedOver) endContentSwitch();
       if (!enableMultiPageCanvas) {
         setIsLoading(false);
       }
     }
-  }, [effectiveParentId, currentContentId, getIdToken, editorMode, enableMultiPageCanvas]);
+  }, [effectiveParentId, getIdToken, editorMode, enableMultiPageCanvas, contentList]);
+
+  // 利用側が contentId プロップを変えたら、そのページへ移る(キャンバスのときだけ。
+  // 単独表示は従来どおり利用側が key で作り直す)
+  useEffect(() => {
+    if (!enableMultiPageCanvas || !effectiveContentId) return;
+    if (effectiveContentId === currentContentIdRef.current) return;
+    void handleContentChange(effectiveContentId);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [enableMultiPageCanvas, effectiveContentId]);
 
   useEffect(() => {
     if (html) {
@@ -2763,6 +2862,7 @@ export function FrontendVisualEditor({
       onLoadVariables={handleLoadVariables}
       websiteId={effectiveParentId}
       enableMultiPageCanvas={enableMultiPageCanvas}
+      canvasStorageKey={canvasStorageKey ?? effectiveParentId ?? null}
     >
       <FrontendVisualEditorInner
         onSave={onSave}

package/src/editor/autosave.ts

@@ -32,3 +32,35 @@ export async function flushAutoSave(): Promise<boolean> {
     return false
   }
 }
+
+/**
+ * ページ切替の途中(次の本文を読み込んで iframe を組み直している間)は、
+ * 履歴の本文がまだ前のページのものなので、自動保存が走ると
+ * **前のページの内容を次のページへ書いてしまう**。切替の始まりと終わりを
+ * ここで印し、その間の自動保存を見送る(手動保存も同じ窓口を通る)。
+ */
+let switching = 0
+let switchTimer: ReturnType<typeof setTimeout> | null = null
+
+/** 切替の開始。読み込みが失敗しても永久に止まらないよう 5 秒で自動解除 */
+export function beginContentSwitch(): void {
+  switching++
+  if (switchTimer) clearTimeout(switchTimer)
+  switchTimer = setTimeout(() => {
+    switching = 0
+    switchTimer = null
+  }, 5000)
+}
+
+/** 切替の終了(iframe の初期化が済んだ時点で EditorCanvas が呼ぶ) */
+export function endContentSwitch(): void {
+  if (switching > 0) switching--
+  if (switching === 0 && switchTimer) {
+    clearTimeout(switchTimer)
+    switchTimer = null
+  }
+}
+
+export function isContentSwitching(): boolean {
+  return switching > 0
+}

package/src/editor/components/EditorCanvas.tsx

@@ -1,6 +1,6 @@
 "use client";
 
-import { useEffect, useCallback, useMemo, useRef, useState } from "react";
+import { useEffect, useCallback, useMemo, useRef, useState, useLayoutEffect } from "react";
 import { useEditorContext } from "../EditorContext";
 import { useCanvasControls } from "../hooks/useCanvasControls";
 import { useElementActions } from "../hooks/useElementActions";
@@ -29,6 +29,8 @@ import { generateEditableHtml } from "../utils/html-utils";
 import { setupInlineFormatToolbar } from "../utils/inline-format";
 import { recalculateViewportUnits } from "../utils/viewport-utils";
 import { useMultiPageCanvasOptional } from "../contexts/MultiPageCanvasContext";
+import { setupEmbeddedCanvasBridge } from "../utils/embedded-canvas-bridge";
+import { endContentSwitch } from "../autosave";
 import type {
   DOMTreeNode,
   DragState,
@@ -122,11 +124,21 @@ export function EditorCanvas() {
     setShowLayoutHint,
     viewportWidth,
     setIframeReady,
+    currentContentId,
   } = useEditorContext();
+  // 高さの報告先は「本文が載っているページ」(利用側の currentContentId)。
+  // クリックしただけでまだ本文が来ていないページへ、前のページの高さを書かない
+  const currentContentIdRef = useRef(currentContentId);
+  currentContentIdRef.current = currentContentId;
 
   // マルチページモード判定
   const multiPageCanvas = useMultiPageCanvasOptional();
   const isInMultiPageMode = !!multiPageCanvas?.isEnabled;
+  // ロードハンドラ(deps=[])から最新の値を読むための ref
+  const multiPageCanvasRef = useRef(multiPageCanvas);
+  multiPageCanvasRef.current = multiPageCanvas;
+  const isInMultiPageModeRef = useRef(isInMultiPageMode);
+  isInMultiPageModeRef.current = isInMultiPageMode;
 
   // Figmaライクなキャンバス操作
   useCanvasControls();
@@ -301,6 +313,17 @@ export function EditorCanvas() {
 
     const scrollHeight = targetElement.scrollHeight;
     const computedHeight = Math.max(scrollHeight, maxBottom);
+    // 埋め込み(マルチフレーム)ではフレーム = 紙面そのもの。下の余白は付けず、
+    // 実測をキャンバス側へ渡してフレームの高さにする
+    if (isInMultiPageModeRef.current) {
+      const frameHeight = Math.max(200, Math.ceil(computedHeight));
+      setContentHeight(frameHeight);
+      contentHeightRef.current = frameHeight;
+      const mpc = multiPageCanvasRef.current;
+      const activeId = currentContentIdRef.current;
+      if (mpc && activeId) mpc.setPageHeight(activeId, frameHeight, "editor");
+      return;
+    }
     const newHeight = Math.max(WEBPAGE_MIN_HEIGHT, computedHeight + 100);
 
     setContentHeight(newHeight);
@@ -409,11 +432,19 @@ export function EditorCanvas() {
     zoomRef.current = zoom;
   }, [zoom]);
 
+  // 埋め込みでは版面の幅を最初から入れて組む(後から書き換えると一瞬 1440px で描かれる)。
+  // 単独表示では幅は effect が書くので、ここでは依存に入れない(幅変更で iframe を作り直さない)
+  const embeddedWidth = isInMultiPageMode ? viewportWidth : 0;
   const iframeHtml = useMemo(
     // sourceHtml(ページ切替でのみ変わる)から組む。originalHtml は
     // initLayout が変更判定の基準として書き換えるため、ここに使うとループする
-    () => generateEditableHtml(sourceHtml, editorMode),
-    [sourceHtml, editorMode]
+    () =>
+      generateEditableHtml(
+        sourceHtml,
+        editorMode,
+        embeddedWidth ? { embedded: true, artboardWidth: embeddedWidth } : undefined,
+      ),
+    [sourceHtml, editorMode, embeddedWidth]
   );
 
   // ========== iframe Load Handler ==========
@@ -460,8 +491,13 @@ export function EditorCanvas() {
     // 3. イベントリスナーのセットアップ（ローカル配列に収集後、refに保存）
     const cleanupFunctions: (() => void)[] = [];
 
-    // タッチジェスチャー
-    cleanupFunctions.push(setupTouchGestureListeners(iframeDoc));
+    // タッチジェスチャー。埋め込み(マルチフレーム)では倍率も位置も外側が持つので、
+    // ホイール・ピンチ・Space・中ボタンをそのまま親へ転送する
+    if (isInMultiPageModeRef.current) {
+      cleanupFunctions.push(setupEmbeddedCanvasBridge(iframeDoc, iframe));
+    } else {
+      cleanupFunctions.push(setupTouchGestureListeners(iframeDoc));
+    }
 
     // キーボードショートカット
     cleanupFunctions.push(setupKeyboardShortcuts(iframeDoc));
@@ -521,13 +557,16 @@ export function EditorCanvas() {
     // 「iframe ビューポート基準」なので、iframe の矩形分だけ平行移動して渡す。
     // iframe 自体は等倍（scale は iframe 内の #artboard-wrapper に掛かる）なので
     // 平行移動だけで正しく一致する。
+    // 埋め込み(マルチフレーム)では iframe 要素自体が外側の transform で縮んでいるので、
+    // 実測の矩形と iframe の内寸の比(= 外側の倍率)で割ってから渡す。単独表示では比は 1
     const toIframeCoords = (e: MouseEvent): MouseEvent => {
       const frameEl = iframeRef.current;
       if (!frameEl) return e;
       const r = frameEl.getBoundingClientRect();
+      const outerScale = r.width / (frameEl.clientWidth || r.width) || 1;
       return new MouseEvent(e.type, {
-        clientX: e.clientX - r.left,
-        clientY: e.clientY - r.top,
+        clientX: (e.clientX - r.left) / outerScale,
+        clientY: (e.clientY - r.top) / outerScale,
         screenX: e.screenX,
         screenY: e.screenY,
         button: e.button,
@@ -805,6 +844,14 @@ export function EditorCanvas() {
     initLayout().then(() => {
       // ページ切替直後の文書へ現在の倍率を適用(上記 zoomRef のコメント参照)
       applyCanvasZoomDom(iframeDoc, zoomRef.current);
+      // 履歴の本文がこの文書の姿になった = ページ切替が終わった(自動保存を再開してよい)
+      endContentSwitch();
+      if (isInMultiPageModeRef.current) {
+        const mpc = multiPageCanvasRef.current;
+        if (mpc) {
+          iframeDoc.documentElement.dataset.outerZoom = String(mpc.viewStore.get().canvasZoom);
+        }
+      }
       const artboardEl = iframeDoc.getElementById("artboard");
       if (editorModeRef.current === "webpage" && artboardEl) {
         updateContentHeightRef.current();
@@ -840,11 +887,17 @@ export function EditorCanvas() {
   // 依存に iframeHtml(=originalHtml由来)を含めることで、ページ切替(サムネイル/URL)で
   // コンテンツが差し替わったときに**iframeだけ**を作り直す。殻(ヘッダー・パネル・
   // サムネイル)は残るので、切替のたびに画面全体がリロードされたようには見えない
-  useEffect(() => {
+  // useLayoutEffect なのは、setIframeReady(false)(エディタを隠す)を、枠が新しいページへ移る
+  // 描画と同じフレームに載せるため。useEffect だと 1 フレームだけ前のページの姿が新しい枠に見える
+  useLayoutEffect(() => {
     const iframe = iframeRef.current;
     if (!iframe) return;
 
     iframe.addEventListener("load", handleIframeLoad);
+    // 新しい本文を読み込む間は「準備できていない」に戻す。
+    // マルチフレームのキャンバスはこれを見て、前のページの姿が新しい枠に
+    // 見えないようエディタを隠す(読み込みが済むまで見るだけの紙面が透ける)
+    setIframeReady(false);
     const blob = new Blob([iframeHtml], { type: "text/html" });
     iframe.src = URL.createObjectURL(blob);
 
@@ -939,6 +992,36 @@ export function EditorCanvas() {
     );
   }, [zoom, editorMode, contentHeight, viewportWidth, getIframeDoc]);
 
+  // 埋め込み(マルチフレーム): 外側の倍率を iframe に知らせ、選択枠・ハンドルの太さを
+  // 画面上で一定に保つ(applyOverlayScale が data-outer-zoom を読む)
+  // ズーム・パンは毎目盛り起きるので、ここでは描き直さず(再レンダーせず)ストアを購読して
+  // 直接 DOM に書く。選択枠の描き直しは 1 フレームに 1 回にまとめる
+  const viewStore = multiPageCanvas?.viewStore ?? null;
+  useEffect(() => {
+    if (!isInMultiPageMode || !viewStore) return;
+    let raf: number | null = null;
+    let lastZoom: number | null = null;
+    const apply = () => {
+      const zoom = viewStore.get().canvasZoom;
+      if (zoom === lastZoom) return;
+      lastZoom = zoom;
+      const iframeDoc = getIframeDoc();
+      if (!iframeDoc?.documentElement) return;
+      iframeDoc.documentElement.dataset.outerZoom = String(zoom);
+      if (raf != null) cancelAnimationFrame(raf);
+      raf = requestAnimationFrame(() => {
+        raf = null;
+        refreshSelectionOverlay(iframeDoc);
+      });
+    };
+    apply();
+    const unsubscribe = viewStore.subscribe(apply);
+    return () => {
+      unsubscribe();
+      if (raf != null) cancelAnimationFrame(raf);
+    };
+  }, [isInMultiPageMode, viewStore, getIframeDoc]);
+
   // ビューポート幅変更時にiframe内のartboard幅を更新
   useEffect(() => {
     if (editorMode !== "webpage") return;
@@ -977,6 +1060,7 @@ export function EditorCanvas() {
     <div
       ref={containerRef}
       className="h-full w-full"
+      data-editor-canvas={isInMultiPageMode ? "embedded" : "single"}
       style={{
         backgroundColor: isInMultiPageMode ? "transparent" : "var(--ed-bg)",
       }}
@@ -986,6 +1070,7 @@ export function EditorCanvas() {
         className="w-full h-full border-0"
         title={editorMode === "webpage" ? "Webpage Editor" : "Slide Editor"}
         sandbox="allow-same-origin allow-scripts"
+        style={isInMultiPageMode ? { display: "block", background: "#fff" } : undefined}
       />
     </div>
   );