@growgroup/visual-editor 0.2.2 → 0.3.1

package/src/editor/components/multi-page/PageFramePreview.tsx

@@ -0,0 +1,197 @@
+'use client';
+
+/**
+ * 見るだけの紙面(編集していないページ)。
+ *
+ * 生きているエディタは 1 つだけなので、他のページは srcdoc の iframe で描く。
+ * - 編集用の属性は付けない(触れない。クリックはフレーム側が受けて、そのページへ編集を移す)
+ * - 同一オリジンなので #artboard の高さを親から直接測る(ResizeObserver)。
+ *   フォントや画像の読み込みで高さが変わっても追従する
+ * - 画面から遠いものは描かない(IntersectionObserver)。webpage は高さの実測が
+ *   レイアウトに要るので、順番に少しずつ先読みする(eagerMountCount)
+ * - iframe に sandbox は付けない。script は本文から外してある(generatePreviewHtml)。
+ *   sandbox で script を禁じると、ページへ script を差し込むブラウザ拡張(React DevTools 等)が
+ *   1 枚ごとに「Blocked script execution in 'about:srcdoc'」をコンソールへ出す(実測 26 枚 = 26 件)
+ * - 本文が外から変わった(revision / invalidatePages)ときは、次の本文が来るまで前の姿を出したまま読み直す
+ * - 文書の属性(documentAttributes)は読み直さずに <html> へ付け替える
+ */
+
+import { memo, useEffect, useRef, useState } from 'react';
+import { useMultiPageCanvas, type PageFrameLayout } from '../../contexts/MultiPageCanvasContext';
+import type { DocumentAttributes } from '../../contexts/EditorArtboardContext';
+import { generatePreviewHtml } from '../../utils/html-utils';
+
+/** 文書の <html> に属性を付ける(null / undefined は外す)。エディタ本体(EditorCanvas)も同じ関数を使う */
+export function applyDocumentAttributes(doc: Document | null | undefined, attrs: DocumentAttributes): void {
+  const root = doc?.documentElement;
+  if (!root) return;
+  for (const [name, value] of Object.entries(attrs)) {
+    if (!/^[A-Za-z_:][\w:.-]*$/.test(name)) continue;
+    if (value == null) root.removeAttribute(name);
+    else if (root.getAttribute(name) !== value) root.setAttribute(name, value);
+  }
+}
+
+interface PageFramePreviewProps {
+  page: PageFrameLayout;
+  /** 画面上の判定に使う容器(IntersectionObserver の root) */
+  rootRef: React.RefObject<HTMLDivElement | null>;
+}
+
+export const PageFramePreview = memo(function PageFramePreview({ page, rootRef }: PageFramePreviewProps) {
+  const { editorMode, ensurePageHtml, setPageHeight, previewStyles, requestPreviewSlot, releasePreviewSlot, documentAttributes } = useMultiPageCanvas();
+  const documentAttributesRef = useRef(documentAttributes);
+  documentAttributesRef.current = documentAttributes;
+  const hostRef = useRef<HTMLDivElement>(null);
+  const iframeRef = useRef<HTMLIFrameElement>(null);
+  const [nearViewport, setNearViewport] = useState(false);
+  const [loaded, setLoaded] = useState(false);
+
+  // 画面に近づいたら描く(遠ざかっても消さない: 戻ったときに白く抜けないため)
+  useEffect(() => {
+    const host = hostRef.current;
+    const root = rootRef.current;
+    if (!host || !root) return;
+    const observer = new IntersectionObserver(
+      (entries) => {
+        if (entries.some((e) => e.isIntersecting)) setNearViewport(true);
+      },
+      { root, rootMargin: '150% 150%' },
+    );
+    observer.observe(host);
+    return () => observer.disconnect();
+  }, [rootRef]);
+
+  // webpage は高さの実測がレイアウトに要る(未測定だと仮の高さで並ぶ)ので、見えていなくても読む。
+  // slide は寸法が決まっているので見えたときだけ。どちらも同時に読む枚数は絞る(順番待ち)
+  const wantsMount = editorMode === 'webpage' || nearViewport;
+  const [granted, setGranted] = useState(false);
+  const grantedRef = useRef(false);
+  useEffect(() => {
+    if (!wantsMount || grantedRef.current) return;
+    requestPreviewSlot(page.id, () => {
+      grantedRef.current = true;
+      setGranted(true);
+    });
+    // 見えなくなった: 順番待ちから外す(読み始めていれば載せたまま)
+    return () => {
+      if (!grantedRef.current) releasePreviewSlot(page.id);
+    };
+  }, [wantsMount, page.id, requestPreviewSlot, releasePreviewSlot]);
+  useEffect(() => () => releasePreviewSlot(page.id), [page.id, releasePreviewSlot]);
+  const shouldMount = granted;
+
+  useEffect(() => {
+    if (shouldMount && page.html == null && !page.loading && !page.error) void ensurePageHtml(page.id);
+  }, [shouldMount, page.html, page.loading, page.error, page.id, ensurePageHtml]);
+
+  // 本文が変わったら描き直す
+  const [doc, setDoc] = useState<string | null>(null);
+  useEffect(() => {
+    if (!shouldMount || page.html == null) return;
+    setDoc(generatePreviewHtml(page.html, editorMode, page.size.width, previewStyles));
+  }, [shouldMount, page.html, editorMode, page.size.width, previewStyles]);
+
+  // 高さの実測(同一オリジンなので親から読む)
+  useEffect(() => {
+    const iframe = iframeRef.current;
+    if (!iframe || doc == null) return;
+    let observer: ResizeObserver | null = null;
+    let disposed = false;
+    const measure = () => {
+      try {
+        const body = iframe.contentDocument?.body;
+        const artboard = iframe.contentDocument?.getElementById('artboard');
+        const h = artboard?.getBoundingClientRect().height || body?.scrollHeight || 0;
+        if (h > 0) setPageHeight(page.id, h, 'preview');
+      } catch {
+        /* 読めなければ仮の高さのまま */
+      }
+    };
+    const onLoad = () => {
+      if (disposed) return;
+      setLoaded(true);
+      applyDocumentAttributes(iframe.contentDocument, documentAttributesRef.current);
+      measure();
+      try {
+        const artboard = iframe.contentDocument?.getElementById('artboard');
+        if (artboard && typeof ResizeObserver !== 'undefined') {
+          observer = new ResizeObserver(() => measure());
+          observer.observe(artboard);
+        }
+        // フォントの読み込みが終わってから測り直す(折り返しが変わる)
+        void iframe.contentDocument?.fonts?.ready.then(() => { if (!disposed) measure(); });
+      } catch {
+        /* cross-origin ではない想定 */
+      }
+    };
+    iframe.addEventListener('load', onLoad);
+    return () => {
+      disposed = true;
+      iframe.removeEventListener('load', onLoad);
+      observer?.disconnect();
+    };
+  }, [doc, page.id, setPageHeight]);
+
+  // 文書の属性が変わったら、読み直さずに <html> へ付け替える(読み込み前なら onLoad が付ける)
+  useEffect(() => {
+    if (!loaded) return;
+    try {
+      applyDocumentAttributes(iframeRef.current?.contentDocument, documentAttributes);
+    } catch {
+      /* 読めなければ次の読み込みで付く */
+    }
+  }, [documentAttributes, loaded]);
+
+  // 読み終わった(または読めない)ら枠を返して次へ。本文が来ない場合の安全弁つき
+  useEffect(() => {
+    if (!granted) return;
+    if (loaded || page.error) {
+      releasePreviewSlot(page.id);
+      return;
+    }
+    const timer = setTimeout(() => releasePreviewSlot(page.id), 8000);
+    return () => clearTimeout(timer);
+  }, [granted, loaded, page.error, page.id, releasePreviewSlot]);
+
+  return (
+    <div
+      ref={hostRef}
+      className="absolute inset-0 overflow-hidden"
+      data-page-preview={page.id}
+      style={{ background: '#fff' }}
+    >
+      {doc != null ? (
+        <iframe
+          ref={iframeRef}
+          title={page.title || page.id}
+          srcDoc={doc}
+          tabIndex={-1}
+          aria-hidden="true"
+          className="block border-0"
+          style={{
+            width: page.size.width,
+            height: page.size.height,
+            pointerEvents: 'none',
+            // ズームで重くならないように。iframe の中身は外側の transform で拡大縮小されるが、
+            // will-change が無いと倍率が変わるたびに 26 枚の紙面がラスタライズし直され、
+            // 縮小中に 100〜340ms のフレームが混じる(実測)。付けるとラスタが保たれ p95 117ms → 24ms
+            willChange: 'transform',
+          }}
+        />
+      ) : (
+        <div className="ed-frame-skeleton" aria-hidden="true">
+          {page.error ? (
+            <span className="ed-frame-skeleton-note">読み込めませんでした</span>
+          ) : (
+            <>
+              <span className="ed-frame-skeleton-bar" style={{ width: '38%' }} />
+              <span className="ed-frame-skeleton-bar" style={{ width: '72%' }} />
+              <span className="ed-frame-skeleton-bar" style={{ width: '56%' }} />
+            </>
+          )}
+        </div>
+      )}
+    </div>
+  );
+});

package/src/editor/components/multi-page/index.ts

@@ -1,7 +1,3 @@
-export { InfiniteCanvas } from './InfiniteCanvas';
 export { MultiPageCanvasView } from './MultiPageCanvasView';
-export { PageFrameOverlay } from './PageFrameOverlay';
-export { PageThumbnail } from './PageThumbnail';
-export { PageLivePreview } from './PageLivePreview';
-export { PageLabel } from './PageLabel';
-export { CanvasZoomControls } from './CanvasZoomControls';
+export { PageFramePreview } from './PageFramePreview';
+export { CanvasRulers } from './CanvasRulers';

package/src/editor/components/ppt/PptComments.tsx

@@ -15,6 +15,7 @@
 import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
 import { Check, CornerUpLeft, Loader2, MapPin, RotateCcw, Send, MessageSquare, Sparkles, Trash2, X } from 'lucide-react';
 import { useEditorContext } from '../../EditorContext';
+import { useCanvasViewStateOptional } from '../../contexts/MultiPageCanvasContext';
 import { useDeck, applyDeck } from '../../../components/viewer/useDeck';
 import { commentAction, type SlideComment } from '../../../lib/deck';
 import { can, io, type EditorDeck } from '../../../io';
@@ -159,6 +160,8 @@ export function useCommentMarkers({
   const comments = deck.slides[page - 1]?.comments ?? [];
   const onOpenRef = useRef(onOpenThread);
   onOpenRef.current = onOpenThread;
+  // マルチフレームのキャンバスでは iframe の外側にも倍率が掛かる。ピンは画面上で同じ大きさに保つ
+  const outerZoom = useCanvasViewStateOptional()?.canvasZoom ?? 1;
 
   useEffect(() => {
     if (!active) return;
@@ -183,7 +186,8 @@ export function useCommentMarkers({
         if (!wanted.has(button.dataset.commentId!)) button.remove();
       });
       const rootRect = artboard.getBoundingClientRect();
-      const scale = rootRect.width / artboard.offsetWidth || 1;
+      const innerScale = rootRect.width / artboard.offsetWidth || 1;
+      const scale = innerScale * outerZoom;
       const size = 32 / scale;
       const stacks = new Map<string, number>();
       for (const c of anchored) {
@@ -214,8 +218,8 @@ export function useCommentMarkers({
         const rect = target.getBoundingClientRect();
         const stack = stacks.get(c.anchorSrc!) ?? 0;
         stacks.set(c.anchorSrc!, stack + 1);
-        const x = Math.max(0, Math.min(artboard.offsetWidth - size, (rect.right - rootRect.left) / scale - size / 2));
-        const y = Math.max(0, (rect.top - rootRect.top) / scale - size / 2) + stack * (size + 4 / scale);
+        const x = Math.max(0, Math.min(artboard.offsetWidth - size, (rect.right - rootRect.left) / innerScale - size / 2));
+        const y = Math.max(0, (rect.top - rootRect.top) / innerScale - size / 2) + stack * (size + 4 / scale);
         const styles: Partial<CSSStyleDeclaration> = {
           position: 'absolute', left: `${x}px`, top: `${y}px`, width: `${size}px`, height: `${size}px`,
           borderRadius: '50% 50% 50% 4px', background: '#2459c4', color: '#fff', fontSize: `${13 / scale}px`,
@@ -240,7 +244,7 @@ export function useCommentMarkers({
       const layer = getIframeDoc()?.querySelector('.gg-comment-layer');
       layer?.remove();
     };
-  }, [active, page, getIframeDoc, JSON.stringify(comments.map((c) => [c.id, c.anchorSrc, c.resolved, c.author, c.text]))]);
+  }, [active, page, getIframeDoc, outerZoom, JSON.stringify(comments.map((c) => [c.id, c.anchorSrc, c.resolved, c.author, c.text]))]);
 }
 
 /* ============================ 右パネル ============================ */

package/src/editor/components/shell/CanvasAppearance.tsx

@@ -8,8 +8,10 @@ import type { PptTheme } from '../ppt/PptChrome';
 export function CanvasAppearance({ theme }: { theme: PptTheme }) {
   const { iframeReady, getIframeDoc } = useEditorContext();
   useEffect(() => {
+    // 読み込み中(iframeReady=false)は body がまだ無いことがある。準備できてから塗る
+    if (!iframeReady) return;
     const doc = getIframeDoc();
-    if (!doc) return;
+    if (!doc?.body) return;
     const color = theme === 'dark' ? '#191d24' : '#eef1f5';
     doc.body.style.backgroundColor = color;
     const container = doc.getElementById('canvas-container');

package/src/editor/components/shell/PagesPanel.tsx

@@ -16,6 +16,7 @@ import { memo, useEffect, useLayoutEffect, useRef, useState } from 'react';
 import { useDeck } from '../../../components/viewer/useDeck';
 import { DeckSlideRender } from '../../../components/DeckSlideRender';
 import { flushAutoSave } from '../../autosave';
+import { useMultiPageCanvasOptional } from '../../contexts/MultiPageCanvasContext';
 
 /**
  * スライド描画はメモ化する。パネル幅の変更や他ページの選択で親が再レンダーしても、
@@ -28,6 +29,7 @@ const ROW_CHROME_PX = 8 + 8 + 16 + 6;
 
 export function PagesPanel({ page, height = '33vh' }: { page: number; height?: string }) {
   const deck = useDeck();
+  const canvas = useMultiPageCanvasOptional();
   const rootRef = useRef<HTMLDivElement>(null);
   const currentRef = useRef<HTMLButtonElement>(null);
   /**
@@ -55,6 +57,12 @@ export function PagesPanel({ page, height = '33vh' }: { page: number; height?: s
   /** ページ切替。未保存があれば黙って保存してから移る(失敗したときだけ確認する) */
   const goto = async (n: number) => {
     if (n === page) return;
+    // マルチフレームのキャンバスでは画面を移らず、そのフレームへ編集を移して画面に寄せる
+    if (canvas) {
+      const id = canvas.pages[n - 1]?.id ?? String(n);
+      if (await canvas.activatePage(id, { reveal: true })) canvas.zoomToPage(id, { animate: true });
+      return;
+    }
     if (!(await flushAutoSave())) {
       if (!window.confirm('保存に失敗しました。変更を破棄して移動しますか?')) return;
     }

package/src/editor/constants.ts

@@ -375,6 +375,34 @@ export const EDITOR_IFRAME_STYLES = `
   .selection-box.selection-member .selection-outline {
     box-shadow: 0 0 0 calc(1px * var(--ov)) rgba(13, 153, 255, 0.75);
   }
+  /*
+   * 部品(data-part)のインスタンスは紫(Figma のコンポーネントと同じ色)。
+   * ルートを選んだら枠・ハンドル・サイズラベルが紫、中のスロットを選んだら枠は青のまま
+   * 「部品の中」の札だけ出す。札はパンくず(上 -22px)の左上に重ならないよう、その上に置く
+   */
+  .selection-box.selection-part .selection-outline { box-shadow: 0 0 0 var(--outline-w) #7b61ff; }
+  .selection-box.selection-part .resize-handle::after { border-color: #7b61ff; }
+  .selection-box.selection-part .size-label { background: #7b61ff; }
+  .selection-box.selection-member.selection-part .selection-outline { box-shadow: 0 0 0 calc(1px * var(--ov)) rgba(123, 97, 255, 0.8); }
+  .selection-box .part-badge {
+    position: absolute;
+    top: calc(-44px * var(--ov));
+    left: 0;
+    padding: calc(2px * var(--ov)) calc(6px * var(--ov));
+    border-radius: calc(3px * var(--ov));
+    background: #7b61ff;
+    color: #fff;
+    font-size: calc(10px * var(--ov));
+    line-height: 1.4;
+    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Hiragino Sans', 'Noto Sans JP', sans-serif;
+    white-space: nowrap;
+    pointer-events: none;
+    z-index: 40;
+  }
+  .selection-box.selection-in-part .part-badge { background: rgba(123, 97, 255, 0.85); }
+  /* 選んでいる部品のスロット(編集できる範囲)は点線。中を選んでいるときは部品の外周を薄い点線で示す */
+  [data-part].selected [data-slot] { outline: calc(1px * var(--overlay-scale, 1)) dashed rgba(123, 97, 255, 0.75); outline-offset: calc(-1px * var(--overlay-scale, 1)); }
+  [data-part]:not(.selected):has(.selected) { outline: calc(1px * var(--overlay-scale, 1)) dashed rgba(123, 97, 255, 0.55); outline-offset: calc(2px * var(--overlay-scale, 1)); }
   .size-label {
     position: absolute;
     bottom: calc(-22px * var(--ov));

package/src/editor/contexts/EditorArtboardContext.tsx

@@ -14,9 +14,15 @@
  * - contentList: コンテンツリスト（スライド、ページ等）
  */
 
-import React, { createContext, useContext, useState, useCallback, useEffect } from 'react';
+import React, { createContext, useContext, useState, useCallback, useEffect, useMemo } from 'react';
 import type { DOMTreeNode } from '../types';
 
+/**
+ * ページ切替の通知。戻り値に false(または false に解決する Promise)を返すと
+ * 「移れなかった」として扱う(マルチフレームのキャンバスが activatePage の結果に使う)
+ */
+export type ContentChangeHandler = (contentId: string) => void | boolean | Promise<boolean | void>;
+
 // コンテンツリスト用の軽量型（スライド、ページ、コンポーネント等で共用）
 export interface ContentListItem {
   id: string;
@@ -24,6 +30,48 @@ export interface ContentListItem {
   /** 表示順序（スライド番号、ページ番号等） */
   order: number;
   thumbnailHtml?: string;
+  /**
+   * 親ページの id(サイトマップの階層)。渡すと、マルチフレームのキャンバスが
+   * フレームを階層のツリー(親の下に子を並べる)で配置し、左パネルの一覧も段を付ける。
+   * 無ければ(全ページ null / undefined)従来どおり行で折り返す
+   */
+  parentId?: string | null;
+  /** 編集しない表示(ページそのもの・ビューア)の URL。渡すとフレーム名と一覧に「別タブで開く」が付く */
+  href?: string;
+  /**
+   * 本文の版。利用側でファイルが外から変わったとき(部品の一括反映・CLI・他の人の編集)に
+   * 数を進めると、キャンバスの見るだけの紙面がそのページを読み直す。編集中のページには効かない
+   * (編集中の本文は上書きしない)
+   */
+  revision?: number;
+}
+
+/**
+ * 文書に付ける属性(`<html>` の属性)。生きているエディタと見るだけの紙面の両方の文書に、
+ * 読み直さずに反映する。利用側の CSS が `html[data-…]` で切り替える表示(構成ラフの
+ * 注釈カラムの表示・非表示など)に使う。値が null / undefined の属性は外す
+ */
+export type DocumentAttributes = Record<string, string | null | undefined>;
+
+/** contentList の parentId から各ページの深さ(ルート = 0)を求める。親が一覧に無い・循環しているものはルート扱い */
+export function computeContentDepths(list: readonly ContentListItem[]): Map<string, number> {
+  const byId = new Map(list.map((c) => [c.id, c] as const));
+  const depths = new Map<string, number>();
+  const depthOf = (id: string, seen: Set<string>): number => {
+    const cached = depths.get(id);
+    if (cached != null) return cached;
+    const item = byId.get(id);
+    const parent = item?.parentId;
+    let d = 0;
+    if (parent && parent !== id && byId.has(parent) && !seen.has(parent)) {
+      seen.add(id);
+      d = depthOf(parent, seen) + 1;
+    }
+    depths.set(id, d);
+    return d;
+  };
+  list.forEach((c) => depthOf(c.id, new Set()));
+  return depths;
 }
 
 // アートボード（スライド/ページ）ごとの状態
@@ -48,7 +96,9 @@ export interface EditorArtboardContextValue {
   // コンテンツリスト
   contentList: ContentListItem[];
   currentContentId: string | null;
-  onContentChange: ((contentId: string) => void) | null;
+  onContentChange: ContentChangeHandler | null;
+  /** 文書(`<html>`)に付ける属性。エディタと見るだけの紙面の両方に、読み直さずに反映する */
+  documentAttributes: DocumentAttributes;
 
   // Deprecated aliases
   /** @deprecated Use contentList instead */
@@ -72,7 +122,8 @@ export function useEditorArtboard(): EditorArtboardContextValue {
 interface EditorArtboardProviderProps {
   contentList?: ContentListItem[];
   currentContentId?: string;
-  onContentChange?: (contentId: string) => void;
+  onContentChange?: ContentChangeHandler;
+  documentAttributes?: DocumentAttributes;
   // 状態同期用のコールバック（ファサードで設定）
   onArtboardSwitch?: (
     newId: string,
@@ -104,6 +155,7 @@ export function EditorArtboardProvider({
   contentList: contentListProp,
   currentContentId: currentContentIdProp,
   onContentChange: onContentChangeProp,
+  documentAttributes: documentAttributesProp,
   slides: slidesProp,
   currentSlideId: currentSlideIdProp,
   onSlideChange: onSlideChangeProp,
@@ -113,6 +165,10 @@ export function EditorArtboardProvider({
   const contentList = contentListProp ?? slidesProp ?? [];
   const currentContentId = currentContentIdProp ?? currentSlideIdProp ?? null;
   const onContentChange = onContentChangeProp ?? onSlideChangeProp ?? null;
+  // 属性は中身で比べる(利用側が毎描画で新しいオブジェクトを渡しても、購読側を描き直さない)
+  const documentAttributesKey = JSON.stringify(documentAttributesProp ?? {});
+  // eslint-disable-next-line react-hooks/exhaustive-deps
+  const documentAttributes = useMemo<DocumentAttributes>(() => ({ ...(documentAttributesProp ?? {}) }), [documentAttributesKey]);
 
   // Deprecated aliases
   const slides = contentList;
@@ -215,6 +271,7 @@ export function EditorArtboardProvider({
     contentList,
     currentContentId,
     onContentChange,
+    documentAttributes,
     // Deprecated
     slides,
     currentSlideId,

package/src/editor/contexts/EditorComponentsContext.tsx

@@ -45,6 +45,7 @@ import {
 } from '../../lib/firebase/editor-components';
 import { io } from '../../io';
 import type { EditorPartDef, EditorPartsLibrary } from '../../io';
+import { useMultiPageCanvasOptional } from './MultiPageCanvasContext';
 import {
   materializePart,
   partDefFromElement,
@@ -474,6 +475,13 @@ export function EditorComponentsProvider({
   websiteId,
   pageId,
 }: EditorComponentsProviderProps) {
+  // マルチフレームのキャンバス(あれば)。部品の定義を更新したあと、他ページの紙面を読み直させる。
+  // ref で持つ: キャンバスの値は高さの実測のたびに変わるので、コールバックの依存に入れない
+  const canvas = useMultiPageCanvasOptional();
+  const canvasRef = useRef(canvas);
+  canvasRef.current = canvas;
+  const pageIdRef = useRef(pageId);
+  pageIdRef.current = pageId;
   // State
   const [masterComponents, setMasterComponents] = useState<
     Map<string, MasterComponent>
@@ -870,6 +878,9 @@ export function EditorComponentsProvider({
       const saved = (save ? await save(next) : undefined) ?? next;
       upsertPartDef(saved);
       el.setAttribute('data-part-v', String(saved.version));
+      // 他ページのインスタンスは利用側(savePart)が書き換えている。キャンバスの見るだけの紙面にもその場で反映する
+      // (以前は読み直すまで前の姿のままだった)。編集中のページは今の DOM が正なので触らない
+      canvasRef.current?.invalidatePages({ except: [pageIdRef.current] });
       return saved;
     },
     [partDefs, upsertPartDef]
@@ -930,10 +941,12 @@ export function EditorComponentsProvider({
             m.set(id, next);
             return m;
           });
-          io().savePart?.(next).catch((err) => {
-            console.error('[EditorComponentsContext] 部品の保存に失敗:', err);
-            setError('部品の保存に失敗しました');
-          });
+          io().savePart?.(next)
+            .then(() => canvasRef.current?.invalidatePages({ except: [pageIdRef.current] }))
+            .catch((err) => {
+              console.error('[EditorComponentsContext] 部品の保存に失敗:', err);
+              setError('部品の保存に失敗しました');
+            });
         }
       }
     },