@growgroup/visual-editor 0.4.1 → 0.7.0

package/src/editor/collab/store.ts

@@ -0,0 +1,192 @@
+/**
+ * 共同編集の表示用の状態(依存なし)。
+ *
+ * 接続の実体(runtime.ts: yjs / Hocuspocus / idiomorph)は io.collab があるときだけ動的に読む。
+ * ヘッダーのアバター・フレーム名の点・紙面の選択枠は、ここを購読するだけにして
+ * 重い依存を持たない(io.collab が無い利用側では何も読まれず、何も描かれない)。
+ */
+
+import { useCallback, useRef, useSyncExternalStore } from 'react';
+
+/** error = 部屋名がサーバーに保存されない形(room.ts の検査に外れた)ので繋いでいない */
+export type CollabStatus = 'offline' | 'syncing' | 'synced' | 'error';
+
+export type CollabUser = { id: string; name: string; color: string };
+
+/** 案件の部屋に居るエディタ(自分以外)。contentId / route はそのエディタが編集中のページ */
+export type CollabPeer = { clientId: number; user: CollabUser; contentId: string | null; route: string | null };
+
+/** いまのページの部屋に居るエディタ(自分以外)。selection / editing は anchorValueOf の値、cursor は紙面の px */
+export type CollabPagePeer = {
+  clientId: number;
+  user: CollabUser;
+  selection: string[];
+  cursor: { x: number; y: number } | null;
+  editing: string | null;
+};
+
+export type CollabSnapshot = {
+  /** io.collab があり、接続の実体が動いている */
+  enabled: boolean;
+  /** 案件の部屋と一度でも同期できた(書き戻し先の数が当てになる) */
+  ready: boolean;
+  self: CollabUser | null;
+  status: CollabStatus;
+  peers: CollabPeer[];
+  pagePeers: CollabPagePeer[];
+  /** 案件の部屋に居る書き戻し役の数 */
+  bridges: number;
+  requireBridge: boolean;
+  /** いま編集中のページの部屋に入っている(このあいだ onSave の自動保存は呼ばない) */
+  pageActive: boolean;
+  /** 打鍵中の要素に掛かる他人の変更を blur まで保留している */
+  pending: boolean;
+  /** 中継にまだ届いていない自分の変更の数 */
+  unsynced: number;
+  canUndo: boolean;
+  canRedo: boolean;
+  /** 部屋名が保存される形を外れている理由(null = 問題なし)。接続状態にエラーとして出す */
+  roomError: string | null;
+};
+
+export const COLLAB_DISABLED: CollabSnapshot = {
+  enabled: false,
+  ready: false,
+  self: null,
+  status: 'offline',
+  peers: [],
+  pagePeers: [],
+  bridges: 0,
+  requireBridge: false,
+  pageActive: false,
+  pending: false,
+  unsynced: 0,
+  canUndo: false,
+  canRedo: false,
+  roomError: null,
+};
+
+let snapshot: CollabSnapshot = COLLAB_DISABLED;
+const listeners = new Set<() => void>();
+
+function sameValue(a: unknown, b: unknown): boolean {
+  if (a === b) return true;
+  if (typeof a !== 'object' || typeof b !== 'object' || !a || !b) return false;
+  return JSON.stringify(a) === JSON.stringify(b);
+}
+
+export const collabStore = {
+  get: (): CollabSnapshot => snapshot,
+  /** 変わったキーがあるときだけ知らせる(カーソルの 50ms ごとの更新で関係ない部品を描き直さない) */
+  set(patch: Partial<CollabSnapshot>): void {
+    let changed = false;
+    for (const key of Object.keys(patch) as (keyof CollabSnapshot)[]) {
+      if (!sameValue(snapshot[key], patch[key])) {
+        changed = true;
+        break;
+      }
+    }
+    if (!changed) return;
+    snapshot = { ...snapshot, ...patch };
+    listeners.forEach((l) => l());
+  },
+  reset(): void {
+    if (snapshot === COLLAB_DISABLED) return;
+    snapshot = COLLAB_DISABLED;
+    listeners.forEach((l) => l());
+  },
+  subscribe(listener: () => void): () => void {
+    listeners.add(listener);
+    return () => {
+      listeners.delete(listener);
+    };
+  },
+};
+
+/**
+ * 状態の一部だけを購読する。select はモジュールの関数など、描画ごとに変わらないものを渡す。
+ * 値は JSON で比べ、同じなら前の参照を返す(描き直さない)
+ */
+export function useCollabSelector<T>(select: (s: CollabSnapshot) => T): T {
+  const cache = useRef<{ snap: CollabSnapshot; value: T; key: string } | null>(null);
+  const read = useCallback(() => {
+    const snap = collabStore.get();
+    const c = cache.current;
+    if (c && c.snap === snap) return c.value;
+    const value = select(snap);
+    const key = JSON.stringify(value);
+    if (c && c.key === key) {
+      c.snap = snap;
+      return c.value;
+    }
+    cache.current = { snap, value, key };
+    return value;
+  }, [select]);
+  return useSyncExternalStore(collabStore.subscribe, read, read);
+}
+
+/** いまのページの部屋に入っているか(このあいだ保存の状態の代わりに接続状態を出し、自動保存を止める) */
+export const selectCollabPageActive = (s: CollabSnapshot): boolean => s.enabled && s.pageActive;
+
+/** 中継へまだ送れていない変更があるか(離脱の警告に使う) */
+export const selectCollabUnsynced = (s: CollabSnapshot): boolean => s.enabled && (s.unsynced > 0 || s.status === 'offline');
+
+/** 共同編集中の取り消しの状態(Y.UndoManager) */
+export const selectCollabUndo = (s: CollabSnapshot) => ({ canUndo: s.canUndo, canRedo: s.canRedo });
+
+let flusher: (() => void) | null = null;
+
+/** 編集中の紙面の束縛が「まだ送っていない変更を今すぐ送る」関数を登録する(離れるときは null) */
+export function setCollabFlusher(flush: (() => void) | null): void {
+  flusher = flush;
+}
+
+/** まだ送っていない変更を今すぐ送る(手動保存・ページ切替の直前)。共同編集していなければ何もしない */
+export function flushCollab(): void {
+  flusher?.();
+}
+
+let sharedReader: ((contentId: string) => string | null) | null = null;
+
+/** 接続の実体が「そのページの部屋に本文があれば返す」関数を登録する(抜けるときは null) */
+export function setCollabSharedReader(reader: ((contentId: string) => string | null) | null): void {
+  sharedReader = reader;
+}
+
+/**
+ * そのページの部屋に既に同期済みの本文があれば、エディタに渡す HTML(decode 済み)を返す。
+ * 共同編集中のページ切替で、ファイル(まだ書き戻されていないことがある)より部屋の本文を優先するために使う
+ */
+export function readCollabSharedHtml(contentId: string): string | null {
+  if (!sharedReader) return null;
+  try {
+    return sharedReader(contentId);
+  } catch {
+    return null;
+  }
+}
+
+export type CollabPresence = {
+  enabled: boolean;
+  status: CollabStatus;
+  self: CollabUser | null;
+  /** 自分以外のエディタ(同じ人が複数のタブで開いていても 1 人) */
+  peers: CollabPeer[];
+  bridges: number;
+  /** 部屋名が保存される形を外れている理由(status === 'error' のとき) */
+  roomError: string | null;
+};
+
+const selectPresence = (s: CollabSnapshot): CollabPresence => ({
+  enabled: s.enabled,
+  status: s.status,
+  self: s.self,
+  peers: s.peers,
+  bridges: s.bridges,
+  roomError: s.roomError,
+});
+
+/** 誰がどのページに居るか。io.collab が無ければ enabled: false で peers は空 */
+export function useCollabPresence(): CollabPresence {
+  return useCollabSelector(selectPresence);
+}

package/src/editor/collab/useCollab.ts

@@ -0,0 +1,266 @@
+'use client';
+
+/**
+ * エディタ本体(FrontendVisualEditorInner)と共同編集の実体をつなぐ。
+ *
+ * io.collab が無ければ何もしない(実体を読み込まず、リスナーも張らない)。
+ * あれば runtime.ts を動的に読み、
+ * - 編集中のページが変わったら部屋を付け替える
+ * - 初期化を終えた紙面をページの部屋の本文につなぐ(binding.ts)。履歴の present が変わるたびに送る
+ * - 選択(anchorValueOf の値)・カーソル(紙面の px)・打鍵中の要素を awareness に載せる
+ * - 他の人が送ったページの見るだけの紙面を、部屋の本文で読み直す(キャンバスのとき)
+ * - 他人の選択枠とカーソルを紙面に描く(layer.ts)
+ */
+
+import { useEffect, useMemo, useRef, useState } from 'react';
+import { io, type EditorCollab } from '../../io';
+import { useEditorContext } from '../EditorContext';
+import { useMultiPageCanvasOptional } from '../contexts/MultiPageCanvasContext';
+import { anchorValueOf } from '../components/ppt/PptComments';
+import { getCleanHtml } from '../utils/html-utils';
+import type { CollabDocBinding, CollabRuntime } from './runtime';
+import { COLLAB_DOCUMENT_READY_ATTR, COLLAB_DOCUMENT_READY_EVENT, type CollabDocumentReadyDetail } from './signals';
+import { COLLAB_DISABLED, collabStore, setCollabFlusher } from './store';
+import { checkCollabRoom } from './room';
+import { colorFor } from './color';
+import { useCollabLayer } from './layer';
+
+/** 他の人の rev が続けて届いたとき、読み直しを 1 回にまとめる(ms) */
+const REV_DEBOUNCE_MS = 500;
+/** 部屋に本文が無いとき(書き戻し役の書いたファイルから読み直す)、書き戻しの 1.5 秒を待つ(ms) */
+const REV_FILE_DELAY_MS = 2000;
+/** 見るだけの紙面の本文を部屋から読む同時数 */
+const READ_PARALLEL = 2;
+
+export type CollabController = {
+  config: EditorCollab;
+  /** まだ送っていない変更を今すぐ送る */
+  flush: () => void;
+  undo: () => void;
+  redo: () => void;
+};
+
+type ReadyDocument = CollabDocumentReadyDetail & { initialShared: string };
+
+export function useCollab({ contentId, selectedIds }: { contentId: string | null; selectedIds: string[] }): CollabController | null {
+  // エディタを開いている間は io.collab を読み直さない(途中で渡し直されても部屋を作り直さない)
+  const [config] = useState<EditorCollab | null>(() => io().collab ?? null);
+  const { getIframeDoc, html, setHtml, contentList } = useEditorContext();
+  const multiPageCanvas = useMultiPageCanvasOptional();
+  const [runtime, setRuntime] = useState<CollabRuntime | null>(null);
+  const [ready, setReady] = useState<ReadyDocument | null>(null);
+  const bindingRef = useRef<CollabDocBinding | null>(null);
+  const setHtmlRef = useRef(setHtml);
+  setHtmlRef.current = setHtml;
+  const canvasRef = useRef(multiPageCanvas);
+  canvasRef.current = multiPageCanvas;
+  const contentListRef = useRef(contentList);
+  contentListRef.current = contentList;
+  const contentIdRef = useRef(contentId);
+  contentIdRef.current = contentId;
+
+  useEffect(() => {
+    if (!config) return;
+    // 中継が保存しない部屋名だと、繋がっているのに中身が消える。繋ぐ前に検査して、外れたら始めない
+    const room = checkCollabRoom(config.projectRoom);
+    if (!room.ok) {
+      console.warn(`[collab] 部屋名が中継に保存されない形なので共同編集を始めません: ${room.reason}`);
+      collabStore.set({
+        enabled: true,
+        self: { id: config.user.id, name: config.user.name || config.user.id, color: colorFor(config.user.id, config.user.color) },
+        requireBridge: !!config.requireBridge,
+        status: 'error',
+        roomError: room.reason,
+      });
+      return () => collabStore.set(COLLAB_DISABLED);
+    }
+    let alive = true;
+    let created: CollabRuntime | null = null;
+    import('./runtime').then(
+      (m) => {
+        if (!alive) return;
+        created = m.createCollabRuntime(config);
+        setRuntime(created);
+      },
+      (e) => console.warn('[collab] 共同編集を始められませんでした:', e),
+    );
+    return () => {
+      alive = false;
+      created?.destroy();
+    };
+  }, [config]);
+
+  // 初期化を終えた文書を受け取り、その時点の姿(種まきに使う)を控える。
+  // 先に済んでいた(実体の読み込みより前だった)ときは印から拾う
+  useEffect(() => {
+    if (!config) return;
+    const snapshot = (doc: Document) => {
+      try {
+        return config.encode ? config.encode(getCleanHtml(doc)) : getCleanHtml(doc);
+      } catch {
+        return '';
+      }
+    };
+    const onReady = (e: Event) => {
+      const detail = (e as CustomEvent<CollabDocumentReadyDetail>).detail;
+      if (detail?.doc) setReady({ doc: detail.doc, contentId: detail.contentId, initialShared: snapshot(detail.doc) });
+    };
+    window.addEventListener(COLLAB_DOCUMENT_READY_EVENT, onReady);
+    const doc = getIframeDoc();
+    if (doc?.documentElement?.hasAttribute(COLLAB_DOCUMENT_READY_ATTR)) {
+      const readyId = doc.documentElement.getAttribute(COLLAB_DOCUMENT_READY_ATTR) || null;
+      setReady((prev) => (prev?.doc === doc ? prev : { doc, contentId: readyId, initialShared: snapshot(doc) }));
+    }
+    return () => window.removeEventListener(COLLAB_DOCUMENT_READY_EVENT, onReady);
+  }, [config, getIframeDoc]);
+
+  useEffect(() => {
+    runtime?.setPage(contentId);
+  }, [runtime, contentId]);
+
+  // いま編集しているページの文書(ページ切替の途中は前の文書を使わない)
+  const doc = ready && ready.contentId === contentId ? ready.doc : null;
+
+  // 紙面 ⇄ ページの部屋の本文
+  useEffect(() => {
+    if (!runtime || !ready || !doc || !contentId) return;
+    const binding = runtime.bind({
+      doc,
+      contentId,
+      initialShared: ready.initialShared,
+      onApplied: (artboardHtml) => setHtmlRef.current(artboardHtml),
+    });
+    if (!binding) return;
+    bindingRef.current = binding;
+    setCollabFlusher(() => binding.flush());
+    return () => {
+      setCollabFlusher(null);
+      // 離れるページの見るだけの紙面を、部屋の本文の最新にしておく(共同編集中は保存しないので、保存後の追従が効かない)
+      const shared = binding.sharedHtml();
+      binding.destroy();
+      if (bindingRef.current === binding) bindingRef.current = null;
+      if (shared != null) canvasRef.current?.setPageHtml(contentId, shared);
+    };
+  }, [runtime, ready, doc, contentId]);
+
+  // 自分の変更: 履歴の present が変わるたび(notifyIframeChange / pushHistory / setHtml)。打鍵は binding が input で拾う
+  useEffect(() => {
+    bindingRef.current?.scheduleSend();
+  }, [html]);
+
+  // 他の人が本文を送ったページの、見るだけの紙面を読み直す(キャンバスのとき)
+  const hasCanvas = !!multiPageCanvas;
+  useEffect(() => {
+    if (!runtime || !config || !hasCanvas) return;
+    let alive = true;
+    const timers = new Map<string, ReturnType<typeof setTimeout>>();
+    const queue: string[] = [];
+    let running = 0;
+    const pump = () => {
+      while (alive && running < READ_PARALLEL && queue.length > 0) {
+        const id = queue.shift()!;
+        running += 1;
+        void runtime
+          .readShared(id)
+          .then((shared) => {
+            const canvas = canvasRef.current;
+            if (!alive || !canvas || id === contentIdRef.current) return;
+            if (shared != null) {
+              canvas.setPageHtml(id, shared);
+            } else if (io().loadContent) {
+              // 部屋に本文が無い = 書き戻し役がファイルに書いたものを読む。書き終わるのを待ってから
+              timers.set(`file:${id}`, setTimeout(() => canvasRef.current?.updatePageFrame(id, { html: null, stale: true }), REV_FILE_DELAY_MS));
+            }
+          })
+          .finally(() => {
+            running -= 1;
+            pump();
+          });
+      }
+    };
+    const off = runtime.onRemoteRev((route) => {
+      const id = contentListRef.current.find((c) => config.routeFor(c.id) === route)?.id;
+      if (!id || id === contentIdRef.current) return;
+      const prev = timers.get(id);
+      if (prev) clearTimeout(prev);
+      timers.set(
+        id,
+        setTimeout(() => {
+          timers.delete(id);
+          if (!queue.includes(id)) queue.push(id);
+          pump();
+        }, REV_DEBOUNCE_MS),
+      );
+    });
+    return () => {
+      alive = false;
+      off();
+      timers.forEach((timer) => clearTimeout(timer));
+    };
+  }, [runtime, config, hasCanvas]);
+
+  // 選択 → awareness
+  const selectionKey = selectedIds.join('\n');
+  useEffect(() => {
+    if (!runtime) return;
+    const artboard = doc?.getElementById('artboard');
+    if (!artboard) {
+      runtime.setSelection([]);
+      return;
+    }
+    const anchors: string[] = [];
+    for (const id of selectedIds) {
+      const el = artboard.querySelector<HTMLElement>(`[data-element-id="${CSS.escape(id)}"]`);
+      const anchor = el ? anchorValueOf(artboard, el) : null;
+      if (anchor && !anchors.includes(anchor)) anchors.push(anchor);
+    }
+    runtime.setSelection(anchors);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [runtime, doc, selectionKey]);
+
+  // カーソル(紙面の px)と打鍵中の要素 → awareness
+  useEffect(() => {
+    if (!runtime || !doc) return;
+    const artboard = doc.getElementById('artboard');
+    if (!artboard) return;
+    const onMove = (e: PointerEvent) => {
+      const r = artboard.getBoundingClientRect();
+      const scale = r.width / (artboard.offsetWidth || 1) || 1;
+      runtime.setCursor({ x: Math.round((e.clientX - r.left) / scale), y: Math.round((e.clientY - r.top) / scale) });
+    };
+    const onLeave = () => runtime.setCursor(null);
+    const updateEditing = () => {
+      const el = doc.querySelector<HTMLElement>('#artboard [contenteditable="true"]');
+      runtime.setEditing(el ? anchorValueOf(artboard, el) : null);
+    };
+    // focusout の時点ではまだ contenteditable が外れていないので、外れてから読む
+    const onFocusOut = () => setTimeout(updateEditing, 0);
+    doc.addEventListener('pointermove', onMove, { passive: true });
+    doc.documentElement.addEventListener('pointerleave', onLeave);
+    doc.addEventListener('focusin', updateEditing);
+    doc.addEventListener('focusout', onFocusOut);
+    return () => {
+      doc.removeEventListener('pointermove', onMove);
+      doc.documentElement.removeEventListener('pointerleave', onLeave);
+      doc.removeEventListener('focusin', updateEditing);
+      doc.removeEventListener('focusout', onFocusOut);
+      runtime.setCursor(null);
+      runtime.setEditing(null);
+    };
+  }, [runtime, doc]);
+
+  useCollabLayer(doc, !!runtime);
+
+  return useMemo<CollabController | null>(
+    () =>
+      config
+        ? {
+            config,
+            flush: () => bindingRef.current?.flush(),
+            undo: () => bindingRef.current?.undo(),
+            redo: () => bindingRef.current?.redo(),
+          }
+        : null,
+    [config],
+  );
+}

package/src/editor/components/AiPromptPopover.tsx

@@ -11,6 +11,7 @@ import { Sparkles, X, Loader2, Send, Paperclip, FileImage, FileText, Trash2 } fr
 import { Button } from '../../components/ui/button';
 import { Textarea } from '../../components/ui/textarea';
 import type { AttachedFile } from '../../lib/agent/slide-agent/types';
+import { readStorage, writeStorage } from '../utils/storage';
 
 // サポートするファイルタイプ
 const SUPPORTED_FILE_TYPES = {
@@ -44,7 +45,7 @@ export function AiPromptPopover({
   const [prompt, setPrompt] = useState('');
   // [移植時の追加] 生成に使うAIエンジン(ローカルCLI)を選択する
   const [engine, setEngine] = useState<'codex' | 'claude'>(() => {
-    const saved = typeof window !== 'undefined' ? localStorage.getItem('gg-ai-engine') : null;
+    const saved = readStorage('gg-ai-engine');
     return saved === 'claude' ? 'claude' : 'codex';
   });
   const [attachedFiles, setAttachedFiles] = useState<AttachedFile[]>([]);
@@ -333,7 +334,7 @@ export function AiPromptPopover({
                   type="button"
                   onClick={() => {
                     setEngine(e);
-                    localStorage.setItem('gg-ai-engine', e);
+                    writeStorage('gg-ai-engine', e);
                   }}
                   className={`rounded px-1.5 py-0.5 text-[10px] transition-colors ${
                     engine === e

package/src/editor/components/EditorCanvas.tsx

@@ -12,6 +12,7 @@ import { useDragResize } from "../hooks/useDragResize";
 import { useContextMenuHandler } from "../hooks/useContextMenuHandler";
 import { useIframeSetup } from "../hooks/useIframeSetup";
 import { useFocusManagement } from "../hooks/useFocusManagement";
+import { useKeepArtboardInPlace } from "../hooks/useKeepArtboardInPlace";
 import {
   SLIDE_WIDTH,
   SLIDE_HEIGHT,
@@ -27,13 +28,18 @@ import {
 } from "../utils/dom-utils";
 import { generateEditableHtml } from "../utils/html-utils";
 import { setupInlineFormatToolbar } from "../utils/inline-format";
+import { setupLineBreakOnEnter } from "../utils/text-line-break";
+import { setupInlineTextSelection } from "../utils/inline-text-style";
 import { recalculateViewportUnits } from "../utils/viewport-utils";
 import { useMultiPageCanvasOptional } from "../contexts/MultiPageCanvasContext";
 import { applyDocumentAttributes } from "./multi-page/PageFramePreview";
 import { setupEmbeddedCanvasBridge } from "../utils/embedded-canvas-bridge";
 import { endContentSwitch } from "../autosave";
+import { io } from "../../io";
+import { COLLAB_DOCUMENT_READY_ATTR, COLLAB_DOCUMENT_READY_EVENT } from "../collab/signals";
 import { showPartDropIndicator, clearPartDropIndicator, findFlowInsertion } from "../utils/drop-target";
 import { debugLog } from '../utils/debug';
+import { useLinkNavigation } from "../hooks/useLinkNavigation";
 import { useEditorComponents } from "../contexts/EditorComponentsContext";
 import type {
   DOMTreeNode,
@@ -127,6 +133,7 @@ export function EditorCanvas() {
     editorMode,
     setShowLayoutHint,
     viewportWidth,
+    iframeReady,
     setIframeReady,
     documentAttributes,
     currentContentId,
@@ -158,6 +165,8 @@ export function EditorCanvas() {
 
   // Figmaライクなキャンバス操作
   useCanvasControls();
+  // 左のパネルを出し入れしても紙面を画面上の同じ位置に留める(1 ページ表示。マルチフレームは MultiPageCanvasView)
+  useKeepArtboardInPlace(containerRef, getIframeDoc, !isInMultiPageMode, iframeReady);
 
   // グループ化/グループ解除/スタイルコピー&ペースト/Figmaエクスポート
   const { groupElements, ungroupElements, copyStyle, pasteStyle, copyToFigma } = useElementActions();
@@ -264,6 +273,9 @@ export function EditorCanvas() {
     marqueeGeomRef,
   });
 
+  // ⌘ / Ctrl + クリックでリンク先へ移る(選択の mousedown には手を出さず、クリックが確定してから移る)
+  const { setupLinkNavigation } = useLinkNavigation();
+
   // マーキー選択
   const {
     marqueeBoxRef: _marqueeBoxRef, // used internally by hook
@@ -529,8 +541,14 @@ export function EditorCanvas() {
 
     // 選択リスナー（mousedown, dblclick）
     cleanupFunctions.push(setupSelectionListeners(iframeDoc));
+    // ⌘ / Ctrl + クリックでリンク先へ(ページ・アンカー・外部サイト)
+    cleanupFunctions.push(setupLinkNavigation(iframeDoc));
     // テキスト編集中の範囲選択に、マーカー・太字のツールバーを出す
     cleanupFunctions.push(setupInlineFormatToolbar(iframeDoc));
+    // 範囲選択を覚えておき、パネルで変えた文字の大きさ・太さ・色・字間を選んだ所だけに当てる
+    cleanupFunctions.push(setupInlineTextSelection(iframeDoc));
+    // テキスト編集中の Enter は段落を分けず、同じ要素の中の改行(<br>)にする
+    cleanupFunctions.push(setupLineBreakOnEnter(iframeDoc));
 
     // コンテキストメニュー
     cleanupFunctions.push(setupContextMenuListener(iframeDoc));
@@ -937,6 +955,15 @@ export function EditorCanvas() {
           "[Canvas] Webpage mode: content height tracking initialized on artboard"
         );
       }
+      // 共同編集(io.collab)に「この文書は読み込みと初期化を終えた」と知らせる。
+      // 種まき・他人の変更の当て込みはここから(初期化の途中の姿で撒くと、人によって本文が食い違う)
+      if (io().collab) {
+        const readyContentId = currentContentIdRef.current ?? "";
+        iframeDoc.documentElement.setAttribute(COLLAB_DOCUMENT_READY_ATTR, readyContentId);
+        window.dispatchEvent(
+          new CustomEvent(COLLAB_DOCUMENT_READY_EVENT, { detail: { doc: iframeDoc, contentId: readyContentId || null } })
+        );
+      }
     });
 
     // 重要: クリーンアップ関数をrefに保存して、

package/src/editor/components/EditorContextMenu.tsx

@@ -40,6 +40,12 @@ import {
   BetweenVerticalEnd,
   Rows3,
   Columns3,
+  Move,
+  AlignVerticalJustifyStart,
+  LayoutGrid,
+  AlignJustify,
+  ListTree,
+  ListCollapse,
 } from 'lucide-react';
 
 export interface ContextMenuPosition {
@@ -104,6 +110,21 @@ export interface ContextMenuProps {
   // 部品操作
   onDetachPart?: () => void;
   onUpdatePart?: () => void;
+  // 自由配置(webpage のみ。渡されたものだけ出す)
+  /** 選んだ要素から下の箱を、入れ子まですべて絶対配置にする */
+  onFreeLayoutTreeOn?: () => void;
+  /** 選んだ要素から下の自由配置を、入れ子まですべて流し込みへ戻す */
+  onFreeLayoutTreeOff?: () => void;
+  /** 選んだ要素を器にして、直下の子だけを絶対配置にする */
+  onFreeLayoutOn?: () => void;
+  /** 1 段だけの器を流し込みへ戻す */
+  onFreeLayoutOff?: () => void;
+  /** ページの最上位セクションをまとめて自由配置にする */
+  onPageFreeLayoutOn?: () => void;
+  /** ページの自由配置をまとめて解除する */
+  onPageFreeLayoutOff?: () => void;
+  /** ページのどこかに自由配置の器があるか(解除項目の出し分け) */
+  pageHasFreeLayout?: boolean;
 }
 
 interface MenuItemProps {
@@ -191,6 +212,13 @@ export function EditorContextMenu({
   onDetachInstance,
   onResetOverrides,
   onPushOverridesToMain,
+  onFreeLayoutTreeOn,
+  onFreeLayoutTreeOff,
+  onFreeLayoutOn,
+  onFreeLayoutOff,
+  onPageFreeLayoutOn,
+  onPageFreeLayoutOff,
+  pageHasFreeLayout,
 }: ContextMenuProps) {
   const { restoreFocus } = useEditorContext();
   if (!position) return null;
@@ -380,6 +408,58 @@ export function EditorContextMenu({
         disabled={!hasSelection || selectionCount > 1}
       />
 
+      {/* 自由配置(webpage のみ渡される)。
+          広い範囲から順に「ツリーごと」→「直下の子だけ」→「ページ全体」と並べ、
+          戻す道は同じ粒度の項目と入れ替わりで出す(戻せないと怖くて使えない) */}
+      {(onFreeLayoutTreeOn || onFreeLayoutTreeOff || onFreeLayoutOn || onFreeLayoutOff || onPageFreeLayoutOn || onPageFreeLayoutOff) && (
+        <>
+          <MenuDivider />
+          <div className="px-3 pb-0.5 pt-1 text-[10px] text-gray-500">配置</div>
+          {onFreeLayoutTreeOn && (
+            <MenuItem
+              icon={<ListTree className="w-3.5 h-3.5" />}
+              label="このツリーをすべて絶対配置にする"
+              onClick={() => handleAction(onFreeLayoutTreeOn)}
+            />
+          )}
+          {onFreeLayoutTreeOff && (
+            <MenuItem
+              icon={<ListCollapse className="w-3.5 h-3.5" />}
+              label="このツリーの絶対配置を解除する"
+              onClick={() => handleAction(onFreeLayoutTreeOff)}
+            />
+          )}
+          {onFreeLayoutOn && (
+            <MenuItem
+              icon={<Move className="w-3.5 h-3.5" />}
+              label="直下の子だけ絶対配置にする"
+              onClick={() => handleAction(onFreeLayoutOn)}
+            />
+          )}
+          {onFreeLayoutOff && (
+            <MenuItem
+              icon={<AlignVerticalJustifyStart className="w-3.5 h-3.5" />}
+              label="流し込みに戻す"
+              onClick={() => handleAction(onFreeLayoutOff)}
+            />
+          )}
+          <MenuItem
+            icon={<LayoutGrid className="w-3.5 h-3.5" />}
+            label="このページを自由配置にする…"
+            onClick={() => handleAction(onPageFreeLayoutOn)}
+            disabled={!onPageFreeLayoutOn}
+          />
+          {pageHasFreeLayout && (
+            <MenuItem
+              icon={<AlignJustify className="w-3.5 h-3.5" />}
+              label="ページを流し込みに戻す…"
+              onClick={() => handleAction(onPageFreeLayoutOff)}
+              disabled={!onPageFreeLayoutOff}
+            />
+          )}
+        </>
+      )}
+
       <MenuDivider />
 
       {/* レイヤー操作 */}