@growgroup/visual-editor 0.3.0 → 0.4.0

package/src/editor/constants.ts

@@ -183,7 +183,22 @@ export const EDITOR_IFRAME_STYLES = `
   body.text-mode [data-editable="true"] {
     pointer-events: none;
   }
-  body:not(.draw-mode):not(.text-mode):not(.move-mode) [data-editable="true"] {
+  /* コメントの範囲指定中: 要素は反応せず、紙面のドラッグが範囲になる */
+  body.comment-mode {
+    cursor: crosshair !important;
+  }
+  body.comment-mode [data-editable="true"] {
+    pointer-events: none;
+  }
+  body.comment-mode .selection-box,
+  body.comment-mode .hover-preview {
+    display: none !important;
+  }
+  /* 範囲の枠の上からも新しい範囲を描けるように(ピンはクリックでスレッドを開く) */
+  body.comment-mode .gg-comment-layer [data-comment-rect] {
+    pointer-events: none !important;
+  }
+  body:not(.draw-mode):not(.text-mode):not(.move-mode):not(.comment-mode) [data-editable="true"] {
     pointer-events: auto !important;
     cursor: pointer;
   }
@@ -375,6 +390,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,7 +14,7 @@
  * - 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';
 
 /**
@@ -30,6 +30,56 @@ export interface ContentListItem {
   /** 表示順序（スライド番号、ページ番号等） */
   order: number;
   thumbnailHtml?: string;
+  /**
+   * 親ページの id(サイトマップの階層)。渡すと、マルチフレームのキャンバスが
+   * フレームを階層のツリー(親の下に子を並べる)で配置し、左パネルの一覧も段を付ける。
+   * 無ければ(全ページ null / undefined)従来どおり行で折り返す
+   */
+  parentId?: string | null;
+  /** 編集しない表示(ページそのもの・ビューア)の URL。渡すとフレーム名と一覧に「別タブで開く」が付く */
+  href?: string;
+  /**
+   * ページ全体を写した画像(PNG / JPEG)の URL。幅は 480px 以上、縦横比はページと同じ。
+   * マルチフレームのキャンバスが大きく縮小されている間(倍率 0.5 未満)は、見るだけの紙面を
+   * srcdoc の iframe ではなくこの画像で描く(26 枚の iframe をラスタライズし直さずに済む)。
+   * 内容が変わったら URL も変える(`&v=…`)。変わると紙面が読み直す。
+   * 渡さないページ・画像が読めなかったページは、今までどおり iframe で描く
+   */
+  thumbnail?: 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;
 }
 
 // アートボード（スライド/ページ）ごとの状態
@@ -55,6 +105,8 @@ export interface EditorArtboardContextValue {
   contentList: ContentListItem[];
   currentContentId: string | null;
   onContentChange: ContentChangeHandler | null;
+  /** 文書(`<html>`)に付ける属性。エディタと見るだけの紙面の両方に、読み直さずに反映する */
+  documentAttributes: DocumentAttributes;
 
   // Deprecated aliases
   /** @deprecated Use contentList instead */
@@ -79,6 +131,7 @@ interface EditorArtboardProviderProps {
   contentList?: ContentListItem[];
   currentContentId?: string;
   onContentChange?: ContentChangeHandler;
+  documentAttributes?: DocumentAttributes;
   // 状態同期用のコールバック（ファサードで設定）
   onArtboardSwitch?: (
     newId: string,
@@ -110,6 +163,7 @@ export function EditorArtboardProvider({
   contentList: contentListProp,
   currentContentId: currentContentIdProp,
   onContentChange: onContentChangeProp,
+  documentAttributes: documentAttributesProp,
   slides: slidesProp,
   currentSlideId: currentSlideIdProp,
   onSlideChange: onSlideChangeProp,
@@ -119,6 +173,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;
@@ -221,6 +279,7 @@ export function EditorArtboardProvider({
     contentList,
     currentContentId,
     onContentChange,
+    documentAttributes,
     // Deprecated
     slides,
     currentSlideId,

package/src/editor/contexts/EditorComponentsContext.tsx

@@ -45,6 +45,8 @@ import {
 } from '../../lib/firebase/editor-components';
 import { io } from '../../io';
 import type { EditorPartDef, EditorPartsLibrary } from '../../io';
+import { useMultiPageCanvasOptional } from './MultiPageCanvasContext';
+import { debugLog, isDebugEnabled } from '../utils/debug';
 import {
   materializePart,
   partDefFromElement,
@@ -210,7 +212,7 @@ export function htmlElementToComponentElement(element: HTMLElement, isRoot: bool
       if (key && value) {
         // Skip position-related styles for root element
         if (isRoot && POSITION_STYLES.has(key)) {
-          console.log(`[htmlElementToComponentElement] Skipping position style for root: ${key}`);
+          debugLog(`[htmlElementToComponentElement] Skipping position style for root: ${key}`);
           continue;
         }
         // Convert kebab-case to camelCase
@@ -237,7 +239,7 @@ export function htmlElementToComponentElement(element: HTMLElement, isRoot: bool
   if (hasMixedContent) {
     // Mixed content: use innerHTML to preserve all content
     innerHTML = element.innerHTML;
-    console.log('[htmlElementToComponentElement] Mixed content detected, using innerHTML');
+    debugLog('[htmlElementToComponentElement] Mixed content detected, using innerHTML');
   } else if (hasElementChildren) {
     // Only element children: recursively process (not root)
     for (const child of Array.from(element.children)) {
@@ -260,17 +262,20 @@ export function htmlElementToComponentElement(element: HTMLElement, isRoot: bool
     overridable: { ...defaultOverridable },
   };
 
-  // Debug logging
-  console.log('[htmlElementToComponentElement] Converted:', {
-    tagName: result.tagName,
-    className: result.className,
-    hasTextContent: !!result.textContent,
-    hasInnerHTML: !!result.innerHTML,
-    textContentPreview: result.textContent?.substring(0, 50),
-    innerHTMLPreview: result.innerHTML?.substring(0, 50),
-    childrenCount: result.children.length,
-    stylesCount: Object.keys(result.styles).length,
-  });
+  // 要素 1 つにつき 1 行出る。部品 89 個 + 26 ページで 2,000 件を超えるので、
+  // 出さないときは引数のオブジェクトを組み立てること自体をやめる
+  if (isDebugEnabled()) {
+    debugLog('[htmlElementToComponentElement] Converted:', {
+      tagName: result.tagName,
+      className: result.className,
+      hasTextContent: !!result.textContent,
+      hasInnerHTML: !!result.innerHTML,
+      textContentPreview: result.textContent?.substring(0, 50),
+      innerHTMLPreview: result.innerHTML?.substring(0, 50),
+      childrenCount: result.children.length,
+      stylesCount: Object.keys(result.styles).length,
+    });
+  }
 
   return result;
 }
@@ -474,6 +479,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>
@@ -578,7 +590,7 @@ export function EditorComponentsProvider({
     setIsLoadingComponents(true);
     setError(null);
     try {
-      console.log(
+      debugLog(
         `[EditorComponentsContext] Loading components for website: ${targetWebsiteId}`
       );
 
@@ -602,13 +614,13 @@ export function EditorComponentsProvider({
         setMasterComponents(componentsMap);
         setComponentLibrary(categoriesFromParts(lib, componentsMap));
         setComponentInstances(new Map());
-        console.log(`[EditorComponentsContext] Loaded ${defs.size} parts`);
+        debugLog(`[EditorComponentsContext] Loaded ${defs.size} parts`);
         return;
       }
 
       // Load master components from Firestore
       const components = await getAllMasterComponents(targetWebsiteId);
-      console.log(`[EditorComponentsContext] Loaded ${components.length} components`);
+      debugLog(`[EditorComponentsContext] Loaded ${components.length} components`);
 
       // Create Map from components
       const componentsMap = new Map<string, MasterComponent>();
@@ -681,9 +693,9 @@ export function EditorComponentsProvider({
 
     const loadInstances = async () => {
       try {
-        console.log(`[EditorComponentsContext] Loading instances for page: ${pageId}`);
+        debugLog(`[EditorComponentsContext] Loading instances for page: ${pageId}`);
         const instances = await getPageComponentInstances(websiteId, pageId);
-        console.log(`[EditorComponentsContext] Loaded ${instances.length} instances`);
+        debugLog(`[EditorComponentsContext] Loaded ${instances.length} instances`);
 
         // Create Map from instances (keyed by domElementId)
         const instancesMap = new Map<string, ComponentInstance>();
@@ -758,7 +770,7 @@ export function EditorComponentsProvider({
         });
       }
 
-      console.log(
+      debugLog(
         `[EditorComponentsContext] Created master component: ${name} (${id})`
       );
       return masterComponent;
@@ -870,6 +882,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 +945,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('部品の保存に失敗しました');
+            });
         }
       }
     },
@@ -983,7 +1000,7 @@ export function EditorComponentsProvider({
       });
     }
 
-    console.log(`[EditorComponentsContext] Deleted master component: ${id}`);
+    debugLog(`[EditorComponentsContext] Deleted master component: ${id}`);
   }, [websiteId, partsMode]);
 
   const getMasterComponent = useCallback(
@@ -1056,7 +1073,7 @@ export function EditorComponentsProvider({
         });
       }
 
-      console.log(
+      debugLog(
         `[EditorComponentsContext] Created instance: ${id} of master ${masterComponentId}`
       );
       return instance;
@@ -1144,7 +1161,7 @@ export function EditorComponentsProvider({
       return next;
     });
 
-    console.log(`[EditorComponentsContext] Deleted instance: ${instanceId}`);
+    debugLog(`[EditorComponentsContext] Deleted instance: ${instanceId}`);
   }, [websiteId, pageId]);
 
   const getInstanceByDomId = useCallback(
@@ -1206,7 +1223,7 @@ export function EditorComponentsProvider({
         return next;
       });
 
-      console.log(
+      debugLog(
         `[EditorComponentsContext] Added override to instance: ${instanceId}`
       );
     },
@@ -1256,7 +1273,7 @@ export function EditorComponentsProvider({
         return next;
       });
 
-      console.log(
+      debugLog(
         `[EditorComponentsContext] Removed override ${overrideId} from instance: ${instanceId}`
       );
     },
@@ -1308,7 +1325,7 @@ export function EditorComponentsProvider({
       return next;
     });
 
-    console.log(
+    debugLog(
       `[EditorComponentsContext] Reset all overrides for instance: ${instanceId}`
     );
   }, [websiteId, pageId]);
@@ -1381,7 +1398,7 @@ export function EditorComponentsProvider({
         return next;
       });
 
-      console.log(
+      debugLog(
         `[EditorComponentsContext] Changed variant for instance ${instanceId} to ${variantId}`
       );
     },
@@ -1445,7 +1462,7 @@ export function EditorComponentsProvider({
         });
       }
 
-      console.log(
+      debugLog(
         `[EditorComponentsContext] Detached instance: ${instanceId}`
       );
       return htmlElement;

package/src/editor/contexts/EditorUIStateContext.tsx

@@ -18,6 +18,7 @@
 import React, { createContext, useContext, useState, useCallback } from 'react';
 import type { DOMTreeNode, PanelSections, MarqueeState } from '../types';
 import { DEFAULT_PANEL_SECTIONS } from '../constants';
+import { debugLog } from '../utils/debug';
 
 export interface EditorUIStateContextValue {
   // DOMツリー
@@ -81,7 +82,7 @@ export function EditorUIStateProvider({
   const restoreFocus = useCallback(() => {
     const iframeDoc = getIframeDoc();
     if (!iframeDoc) {
-      console.log('[EditorUIStateContext] restoreFocus: iframe doc not available');
+      debugLog('[EditorUIStateContext] restoreFocus: iframe doc not available');
       return;
     }
 
@@ -89,14 +90,14 @@ export function EditorUIStateProvider({
     const editingElement = iframeDoc.querySelector('[contenteditable="true"]') as HTMLElement;
     if (editingElement) {
       editingElement.focus();
-      console.log('[EditorUIStateContext] restoreFocus: focused editing element');
+      debugLog('[EditorUIStateContext] restoreFocus: focused editing element');
       return;
     }
 
     // iframeのbodyにフォーカスを設定
     if (iframeDoc.body) {
       iframeDoc.body.focus();
-      console.log('[EditorUIStateContext] restoreFocus: focused iframe body');
+      debugLog('[EditorUIStateContext] restoreFocus: focused iframe body');
     }
   }, [getIframeDoc]);
 

package/src/editor/contexts/EditorVariablesContext.tsx

@@ -22,6 +22,7 @@
  */
 
 import React, { createContext, useContext, useState, useCallback, useMemo, useRef } from 'react';
+import { debugLog } from '../utils/debug';
 import type {
   CSSVariableDefinition,
   CSSVariableCategory,
@@ -264,7 +265,7 @@ export function EditorVariablesProvider({
       await onSave(variables);
       savedVariablesRef.current = [...variables];
       setHasChanges(false);
-      console.log('[EditorVariablesContext] Variables saved successfully');
+      debugLog('[EditorVariablesContext] Variables saved successfully');
     } catch (error) {
       console.error('[EditorVariablesContext] Failed to save variables:', error);
       throw error;
@@ -286,7 +287,7 @@ export function EditorVariablesProvider({
       setVariablesState(loaded);
       savedVariablesRef.current = [...loaded];
       setHasChanges(false);
-      console.log('[EditorVariablesContext] Variables loaded:', loaded.length);
+      debugLog('[EditorVariablesContext] Variables loaded:', loaded.length);
     } catch (error) {
       console.error('[EditorVariablesContext] Failed to load variables:', error);
       throw error;
@@ -299,7 +300,7 @@ export function EditorVariablesProvider({
   const syncFromTheme = useCallback((themeVariables: CSSVariableDefinition[]) => {
     setVariablesState(themeVariables);
     markAsChanged();
-    console.log('[EditorVariablesContext] Synced from theme:', themeVariables.length, 'variables');
+    debugLog('[EditorVariablesContext] Synced from theme:', themeVariables.length, 'variables');
   }, [markAsChanged]);
 
   // バルク設定
@@ -327,7 +328,7 @@ export function EditorVariablesProvider({
     }
 
     styleEl.textContent = cssString;
-    console.log('[EditorVariablesContext] Injected CSS variables to iframe');
+    debugLog('[EditorVariablesContext] Injected CSS variables to iframe');
   }, [cssString]);
 
   // Context値