@growgroup/visual-editor 0.4.1 → 0.7.0

package/src/editor/hooks/useInlineTextSelection.ts

@@ -0,0 +1,16 @@
+'use client';
+
+import { useSyncExternalStore } from 'react';
+import {
+  getInlineTextSummary,
+  subscribeInlineTextSelection,
+  type InlineTextSummary,
+} from '../utils/inline-text-style';
+
+/**
+ * テキストの一部を選んでいるときの、その範囲の文字の見た目。選んでいなければ null。
+ * パネルが「選んだ文字の値」と「混在」を出すのに使う
+ */
+export function useInlineTextSelection(): InlineTextSummary | null {
+  return useSyncExternalStore(subscribeInlineTextSelection, getInlineTextSummary, getInlineTextSummary);
+}

package/src/editor/hooks/useKeepArtboardInPlace.ts

@@ -0,0 +1,87 @@
+'use client';
+
+/**
+ * useKeepArtboardInPlace
+ *
+ * 1 ページ表示(マルチフレームでない EditorCanvas)で、キャンバスの容器の左端が動いても
+ * 紙面を画面上の同じ位置に留める(Figma と同じ。見える範囲が狭くなるだけで、中身は動かない)。
+ *
+ * 左のパネルを出し入れする(部品パネルに替わる・幅をドラッグする・利用側のレールが変わるも同じ)と、
+ * 容器(= iframe)の左端がパネルの幅だけ動く。紙面は iframe の中の #canvas-container のスクロールで
+ * 置かれていて、その基準は iframe の左端なので、そのままでは紙面も一緒に動く。
+ * 左端が動いた分だけ同じ向きへスクロールして打ち消す。
+ *
+ * 入口ごとには手当てせず、容器の位置の変化そのものを見る。左端は幅と一緒にしか動かないので
+ * ResizeObserver で拾える。呼ばれるのはレイアウトの後・描画の前なので、ずれた姿は描かれない。
+ *
+ * [容器が広がったときのスクロール位置]
+ * 広がるとスクロールできる上限が下がり、ブラウザはレイアウトの時点で(ResizeObserver より前に)
+ * 位置を上限へ詰める。詰められる前の位置はもう読めないので、スクロールのたびに覚えておく。
+ * 覚えるのは容器の幅が前回の ResizeObserver のときと同じ間だけ ── 幅が変わった後に届くスクロールは
+ * 詰められた結果で、それを覚えると戻す先を失う
+ *
+ * マルチフレームのキャンバス(埋め込み)では使わない。位置はキャンバスの転写が持ち(MultiPageCanvasView)、
+ * この容器は転写層の中でパンのたびに動く
+ */
+
+import { useEffect, useRef, type RefObject } from 'react';
+import { scrollCanvasLeftTo } from '../utils/dom-utils';
+
+interface Last {
+  /** 容器の左端(親の画面の座標) */
+  left: number;
+  /** iframe の中の表示幅(documentElement.clientWidth)。スクロールを覚えてよいかの判定に使う */
+  viewportWidth: number;
+  /** #canvas-container の横のスクロール位置 */
+  scrollLeft: number;
+}
+
+export function useKeepArtboardInPlace(
+  containerRef: RefObject<HTMLDivElement | null>,
+  getIframeDoc: () => Document | null,
+  enabled: boolean,
+  iframeReady: boolean,
+): void {
+  const lastRef = useRef<Last | null>(null);
+
+  // 容器の位置
+  useEffect(() => {
+    if (!enabled) return;
+    const el = containerRef.current;
+    if (!el || typeof ResizeObserver === 'undefined') return;
+    const observer = new ResizeObserver(() => {
+      const left = el.getBoundingClientRect().left;
+      const doc = getIframeDoc();
+      const scroller = doc?.getElementById('canvas-container') ?? null;
+      const last = lastRef.current;
+      if (doc && scroller && last && left !== last.left) {
+        // 上限へ詰められていれば、覚えておいた位置から(詰められていなければ今の位置が正しい)
+        const max = scroller.scrollWidth - scroller.clientWidth;
+        const from = scroller.scrollLeft >= max - 1 && last.scrollLeft > scroller.scrollLeft ? last.scrollLeft : scroller.scrollLeft;
+        scrollCanvasLeftTo(doc, from + (left - last.left));
+      }
+      lastRef.current = {
+        left,
+        viewportWidth: doc?.documentElement.clientWidth ?? 0,
+        scrollLeft: scroller?.scrollLeft ?? 0,
+      };
+    });
+    observer.observe(el);
+    return () => observer.disconnect();
+  }, [enabled, containerRef, getIframeDoc]);
+
+  // スクロール位置を覚える(文書ごと。ページを移ると iframe の文書が替わる)
+  useEffect(() => {
+    if (!enabled || !iframeReady) return;
+    const doc = getIframeDoc();
+    const scroller = doc?.getElementById('canvas-container');
+    if (!doc || !scroller) return;
+    const remember = () => {
+      const last = lastRef.current;
+      if (last && doc.documentElement.clientWidth === last.viewportWidth) last.scrollLeft = scroller.scrollLeft;
+    };
+    remember();
+    scroller.addEventListener('scroll', remember, { passive: true });
+    return () => scroller.removeEventListener('scroll', remember);
+  }, [enabled, iframeReady, getIframeDoc]);
+}

package/src/editor/hooks/useLinkNavigation.ts

@@ -0,0 +1,160 @@
+/**
+ * ⌘ / Ctrl + クリックでリンク先へ移る(utils/link-navigation.ts)の、エディタ側の行き先。
+ *
+ * ページの切替は、ページ一覧で切り替えるときと同じ経路を通す
+ * (未保存の変更は FrontendVisualEditor.handleContentChange が保存してから移る):
+ * - キャンバス   … focusPage で視点を寄せ、activatePage で編集中のページにする
+ * - 1 ページ表示 … onContentChange(= handleContentChange。保存 → 読み込み → 利用側へ通知)
+ */
+import { useCallback, useRef } from 'react';
+import { useEditorContext } from '../EditorContext';
+import { RULER_SIZE, useMultiPageCanvasOptional } from '../contexts/MultiPageCanvasContext';
+import {
+  attachLinkNavigation,
+  clearPendingAnchor,
+  findAnchorTarget,
+  peekPendingAnchor,
+  resolveLinkTarget,
+  setPendingAnchor,
+  type LinkTarget,
+} from '../utils/link-navigation';
+
+/** アンカーの要素を、画面の上端からこれだけ下に置く(定規・フレーム名に隠れないように) */
+const ANCHOR_MARGIN = 48;
+/** 別のページのアンカーへ移ってきたとき、紙面の高さ・初期位置が落ち着くのを待つ */
+const PENDING_ANCHOR_DELAY_MS = 500;
+
+const prefersReducedMotion = () =>
+  typeof window !== 'undefined' && !!window.matchMedia?.('(prefers-reduced-motion: reduce)').matches;
+
+export function useLinkNavigation() {
+  const { contentList, currentContentId, onContentChange } = useEditorContext();
+  const canvas = useMultiPageCanvasOptional();
+  const stateRef = useRef({ contentList, currentContentId, onContentChange, canvas });
+  stateRef.current = { contentList, currentContentId, onContentChange, canvas };
+
+  /** 紙面の中の要素(`'top'` なら先頭)が見える位置へ紙面を移す。見つからなければ false */
+  const revealAnchor = useCallback((iframeDoc: Document, hash: string): boolean => {
+    const found = findAnchorTarget(iframeDoc, hash);
+    const el = found === 'top' ? iframeDoc.getElementById('artboard') : found;
+    if (!el) return false;
+    const c = stateRef.current.canvas;
+
+    if (c?.isEnabled) {
+      // キャンバス: 紙面(iframe)は伸びきっていてスクロールしない。キャンバスの位置を動かす
+      const frameEl = iframeDoc.defaultView?.frameElement as HTMLElement | null;
+      const container = c.containerRef.current;
+      if (!frameEl || !container) return false;
+      const fr = frameEl.getBoundingClientRect();
+      const scale = fr.width / (frameEl.clientWidth || fr.width) || 1;
+      const er = el.getBoundingClientRect();
+      const cr = container.getBoundingClientRect();
+      const inset = c.rulersVisible ? RULER_SIZE : 0;
+      const left = fr.left + er.left * scale;
+      const top = fr.top + er.top * scale;
+      const width = Math.min(er.width * scale, cr.width - inset);
+      const dy = cr.top + inset + ANCHOR_MARGIN - top;
+      const fitsX = left >= cr.left + inset && left + width <= cr.right;
+      const dx = fitsX ? 0 : cr.left + inset + ANCHOR_MARGIN - left;
+      const { canvasZoom, canvasOffset } = c.viewStore.get();
+      c.setView({ zoom: canvasZoom, offset: { x: canvasOffset.x + dx, y: canvasOffset.y + dy } }, { animate: true });
+      return true;
+    }
+
+    // 1 ページ表示: 紙面の中の #canvas-container がスクロールする
+    const container = iframeDoc.getElementById('canvas-container');
+    if (!container) {
+      el.scrollIntoView({ block: 'start' });
+      return true;
+    }
+    const cr = container.getBoundingClientRect();
+    const er = el.getBoundingClientRect();
+    const fitsX = er.left >= cr.left && er.left + Math.min(er.width, cr.width) <= cr.right;
+    container.scrollTo({
+      top: container.scrollTop + er.top - cr.top - ANCHOR_MARGIN,
+      left: fitsX ? container.scrollLeft : container.scrollLeft + er.left - cr.left - ANCHOR_MARGIN,
+      behavior: prefersReducedMotion() ? 'auto' : 'smooth',
+    });
+    return true;
+  }, []);
+
+  const navigate = useCallback(
+    (target: LinkTarget, iframeDoc: Document): string | void => {
+      const { currentContentId: currentId, onContentChange: change, canvas: c } = stateRef.current;
+      const missingAnchor = (hash: string) => `このページに #${hash} の場所がありません`;
+      switch (target.kind) {
+        case 'ignore':
+          return;
+        case 'unresolved':
+          return 'このリンク先はページ一覧にありません';
+        case 'external':
+          // 紙面の iframe は sandbox(allow-popups 無し)なので、親のウィンドウで開く
+          window.open(target.url, '_blank', 'noopener,noreferrer');
+          return;
+        case 'anchor':
+          return revealAnchor(iframeDoc, target.hash) ? undefined : missingAnchor(target.hash);
+        case 'page': {
+          if (target.id === currentId) {
+            if (target.hash) return revealAnchor(iframeDoc, target.hash) ? undefined : missingAnchor(target.hash);
+            if (c?.isEnabled) c.focusPage(target.id);
+            else revealAnchor(iframeDoc, '');
+            return;
+          }
+          setPendingAnchor(target.id, target.hash);
+          if (c?.isEnabled) {
+            c.focusPage(target.id);
+            void c.activatePage(target.id).then((ok) => {
+              if (!ok) clearPendingAnchor(target.id);
+            });
+            return;
+          }
+          if (!change) {
+            clearPendingAnchor(target.id);
+            return 'このエディタではページを移れません';
+          }
+          void Promise.resolve(change(target.id)).then((ok) => {
+            if (ok === false) clearPendingAnchor(target.id);
+          });
+          return;
+        }
+      }
+    },
+    [revealAnchor],
+  );
+
+  /** 紙面に ⌘ / Ctrl + クリックの移動を付ける。戻り値は後始末 */
+  const setupLinkNavigation = useCallback(
+    (iframeDoc: Document) => {
+      const detach = attachLinkNavigation(iframeDoc, {
+        resolve: (href) => {
+          const s = stateRef.current;
+          return resolveLinkTarget(href, {
+            pages: s.contentList,
+            currentId: s.currentContentId,
+            origin: window.location.origin,
+          });
+        },
+        navigate,
+      });
+      // 別のページのアンカー(`/company#access`)で移ってきた
+      let timer: ReturnType<typeof setTimeout> | null = null;
+      if (peekPendingAnchor(stateRef.current.currentContentId)) {
+        timer = setTimeout(() => {
+          timer = null;
+          const hash = peekPendingAnchor(stateRef.current.currentContentId);
+          // 作り直される途中のエディタ(1 ページ表示で利用側が読み直す前の 1 枚)なら次に任せる
+          if (!hash || !iframeDoc.defaultView?.frameElement?.isConnected) return;
+          clearPendingAnchor();
+          revealAnchor(iframeDoc, hash);
+        }, PENDING_ANCHOR_DELAY_MS);
+      }
+      return () => {
+        detach();
+        if (timer) clearTimeout(timer);
+      };
+    },
+    [navigate, revealAnchor],
+  );
+
+  return { setupLinkNavigation };
+}

package/src/editor/hooks/useResizablePanel.ts

@@ -1,6 +1,7 @@
 'use client';
 
 import { useState, useCallback, useEffect, useRef } from 'react';
+import { readStorage, writeStorage } from '../utils/storage';
 
 export interface UseResizablePanelOptions {
   /** 初期幅 */
@@ -54,7 +55,7 @@ export function useResizablePanel({
   const getInitialWidth = () => {
     if (storageKey && typeof window !== 'undefined') {
       let stored: string | null = null;
-      try { stored = localStorage.getItem(storageKey); } catch { /* 既定幅を使う */ }
+      stored = readStorage(storageKey);
       if (stored) {
         const parsed = parseInt(stored, 10);
         if (!isNaN(parsed) && parsed >= minWidth && parsed <= maxWidth) {
@@ -80,7 +81,7 @@ export function useResizablePanel({
   // ドラッグ中の同期ストレージ書込みを避け、確定時だけ幅を記憶する。
   useEffect(() => {
     if (isDragging || !storageKey) return;
-    try { localStorage.setItem(storageKey, String(width)); } catch { /* 表示は継続 */ }
+    writeStorage(storageKey, String(width));
   }, [width, isDragging, storageKey]);
 
   // マウスダウン

package/src/editor/parts.ts

@@ -16,6 +16,7 @@
  */
 import type { EditorPartDef } from '../io';
 import { findFlowInsertion } from './utils/drop-target';
+import { isNonEditableTag } from './utils/dom-utils';
 
 export const PART_ATTR = 'data-part';
 export const PART_VERSION_ATTR = 'data-part-v';
@@ -318,6 +319,7 @@ export function unlockPartDescendants(root: HTMLElement): number {
   for (const el of Array.from(root.querySelectorAll('*'))) {
     if (el.closest('script, style, svg path, svg g')) continue;
     if (el.tagName === 'SCRIPT' || el.tagName === 'STYLE') continue;
+    if (isNonEditableTag(el)) continue;
     if (!el.getAttribute('data-element-id')) {
       el.setAttribute('data-editable', 'true');
       el.setAttribute('data-element-id', `el-${stamp}-u${i++}`);

package/src/editor/types.ts

@@ -159,6 +159,10 @@ export interface SelectedElementInfo {
   // CSS Variable references (raw inline style values if they contain var())
   rawWidth?: string;          // width (e.g., "var(--spacing-lg)")
   rawHeight?: string;         // height
+  rawMinWidth?: string;       // min-width(サイズ欄の最小・最大。指定が無ければ undefined)
+  rawMaxWidth?: string;       // max-width
+  rawMinHeight?: string;      // min-height
+  rawMaxHeight?: string;      // max-height
   rawPaddingTop?: string;     // padding-top
   rawPaddingRight?: string;   // padding-right
   rawPaddingBottom?: string;  // padding-bottom

package/src/editor/utils/debug.ts

@@ -16,6 +16,7 @@
  */
 
 const DEBUG_KEY = 'gg-editor:debug';
+import { readStorage } from './storage';
 
 /**
  * デバッグログを出す設定か。
@@ -23,11 +24,7 @@ const DEBUG_KEY = 'gg-editor:debug';
  * 参照そのものが例外を投げるので、必ず握りつぶして false に倒す。
  */
 export function isDebugEnabled(): boolean {
-  try {
-    return typeof localStorage !== 'undefined' && localStorage.getItem(DEBUG_KEY) === '1';
-  } catch {
-    return false;
-  }
+  return readStorage(DEBUG_KEY) === '1';
 }
 
 /** 内部の様子を見るためのログ。既定では出ない */

package/src/editor/utils/dom-utils.ts

@@ -8,6 +8,9 @@
 import type { ElementCapture, DOMTreeNode, MarqueeState } from '../types';
 import { removeConflictingClasses } from './tailwind-utils';
 import { debugLog } from './debug';
+// 目印クラスの定義は free-layout.ts 側が正本。ここでは選択枠の札を出すためだけに読む
+// (循環importになるが、使うのは関数の中だけなので評価順の問題は起きない)
+import { FREELAYOUT_CLASS } from './free-layout';
 
 // ========================================
 // buildDomTree キャッシュ（Phase 2 最適化）
@@ -295,6 +298,29 @@ export function applyCanvasZoomDom(iframeDoc: Document, zoomPct: number): void {
   if (!topAnchored && h * scale <= ch) container.scrollTop = Math.max(0, (scrollArea.offsetHeight - ch) / 2);
 }
 
+/**
+ * 1 ページ表示のキャンバスを、横のスクロール位置 scrollLeft へ動かす。
+ * スクロールできる範囲の外なら #canvas-scroll-area を左右へ e ずつ広げて届かせる
+ * (紙面は中央寄せなので、広げると紙面が e だけ右へ動く。行き先も e だけ先へ足す)。
+ * 広げた幅は、次に倍率が変わったとき applyCanvasZoomDom が測り直す
+ */
+export function scrollCanvasLeftTo(iframeDoc: Document, scrollLeft: number): void {
+  if (iframeDoc.body?.dataset.embedded === '1') return;
+  const scrollArea = iframeDoc.getElementById('canvas-scroll-area');
+  const container = iframeDoc.getElementById('canvas-container');
+  if (!scrollArea || !container) return;
+  const areaWidth = scrollArea.getBoundingClientRect().width;
+  // 負になりうる(スクロール領域が容器より狭い)。そのときスクロールできるのは 0 だけ
+  const maxRaw = areaWidth - container.clientWidth;
+  let target = scrollLeft;
+  if (target < 0 || target > Math.max(0, maxRaw)) {
+    const e = Math.max(-target, target - maxRaw);
+    scrollArea.style.width = `${areaWidth + e * 2}px`;
+    target += e;
+  }
+  container.scrollLeft = target;
+}
+
 /* ============================ 原本への書き戻し支援 ============================
  *
  * エディタは開いた時点で全要素を絶対配置へ変換する。この変換はエディタ内の
@@ -925,6 +951,15 @@ export function restoreArtboardAutoHeight(iframeDoc: Document): void {
   }
 }
 
+/**
+ * 編集対象(選択・レイヤー)にしない要素か。
+ * 改行(<br>)と改行の候補位置(<wbr>)は文字の一部で、箱として掴むものではない。
+ * 印を付けるとレイヤー一覧に中身の無い「シェイプ」として並び、紙面でも幅 0 の要素として選べてしまう
+ */
+export function isNonEditableTag(el: Element): boolean {
+  return el.tagName === 'BR' || el.tagName === 'WBR';
+}
+
 /**
  * DOMツリー構築の内部実装
  * キャッシュを使用しない純粋な構築処理
@@ -940,6 +975,8 @@ function buildDomTreeInternal(iframeDoc: Document, rootElement?: Element): DOMTr
 
       // スキップする要素
       if (htmlChild.tagName === 'SCRIPT' || htmlChild.tagName === 'STYLE') return;
+      // 改行はレイヤーにしない(印が残っていても出さない)
+      if (isNonEditableTag(htmlChild)) return;
       if (htmlChild.classList?.contains('selection-box')) return;
       if (htmlChild.classList?.contains('resize-handle')) return;
       if (htmlChild.classList?.contains('drawing-preview')) return;
@@ -1349,6 +1386,14 @@ function drawSelectionBox(
       selectionBox.appendChild(badge);
     }
   }
+  // 自由配置の器は、選んだときに「ここは流し込みではない」と分かる札を出す。
+  // 部品の札(左上)とぶつからないよう右上に置く
+  if (mode !== 'member' && element.classList.contains(FREELAYOUT_CLASS)) {
+    const badge = iframeDoc.createElement('div');
+    badge.className = 'freelayout-badge';
+    badge.textContent = '自由配置';
+    selectionBox.appendChild(badge);
+  }
   selectionBox.style.cssText = `
     left: ${relativeLeft}px;
     top: ${relativeTop}px;

package/src/editor/utils/drop-target.ts

@@ -22,7 +22,7 @@ const INDICATOR_CLASS = `selection-box ${PART_DROP_INDICATOR_CLASS}`;
 
 /** 紙面の中身ではなく、エディタが差し込んでいる表示専用のノード */
 const EDITOR_CHROME =
-  '.selection-box,.marquee-selection-box,.gg-comment-layer,.gg-crop-ui,' +
+  '.selection-box,.marquee-selection-box,.gg-comment-layer,.gg-collab-layer,.gg-crop-ui,' +
   '#gg-measure-layer,#gg-smart-guides,.flex-drop-indicator,.nesting-drop-indicator,' +
   '.auto-layout-drop-indicator,.drag-ghost';
 

package/src/editor/utils/flex-reorder.ts

@@ -27,7 +27,7 @@ const BLUE = '#0d99ff';
 /** 並べ替えの対象にしない、エディタが描いている飾り */
 const OVERLAY_SELECTOR =
   '.selection-box,.marquee-selection-box,.resize-handle,.rotation-handle,' +
-  '.size-label,.element-breadcrumb,.gg-comment-layer,.gg-crop-ui,' +
+  '.size-label,.element-breadcrumb,.gg-comment-layer,.gg-collab-layer,.gg-crop-ui,' +
   '.flex-drop-indicator,#gg-measure-layer,#gg-smart-guides,#' + INDICATOR_ID;
 
 /**