@growgroup/visual-editor 0.1.0

package/src/editor/hooks/useResizablePanel.ts

@@ -0,0 +1,163 @@
+'use client';
+
+import { useState, useCallback, useEffect, useRef } from 'react';
+
+export interface UseResizablePanelOptions {
+  /** 初期幅 */
+  initialWidth: number;
+  /** 最小幅 */
+  minWidth: number;
+  /** 最大幅 */
+  maxWidth: number;
+  /** リサイズ方向: 'left'=左端をドラッグ, 'right'=右端をドラッグ */
+  direction: 'left' | 'right';
+  /** ローカルストレージのキー（指定時は幅を永続化） */
+  storageKey?: string;
+}
+
+export interface UseResizablePanelReturn {
+  /** 現在の幅 */
+  width: number;
+  /** 幅を設定 */
+  setWidth: (width: number) => void;
+  /** ドラッグ中かどうか */
+  isDragging: boolean;
+  /** リサイズハンドルのprops */
+  resizeHandleProps: {
+    onMouseDown: (e: React.MouseEvent) => void;
+    onTouchStart: (e: React.TouchEvent) => void;
+    style: React.CSSProperties;
+    className: string;
+  };
+}
+
+/**
+ * リサイズ可能なパネル用フック
+ */
+export function useResizablePanel({
+  initialWidth,
+  minWidth,
+  maxWidth,
+  direction,
+  storageKey,
+}: UseResizablePanelOptions): UseResizablePanelReturn {
+  // ローカルストレージから初期値を読み込み
+  const getInitialWidth = () => {
+    if (storageKey && typeof window !== 'undefined') {
+      const stored = localStorage.getItem(storageKey);
+      if (stored) {
+        const parsed = parseInt(stored, 10);
+        if (!isNaN(parsed) && parsed >= minWidth && parsed <= maxWidth) {
+          return parsed;
+        }
+      }
+    }
+    return initialWidth;
+  };
+
+  const [width, setWidthState] = useState(getInitialWidth);
+  const [isDragging, setIsDragging] = useState(false);
+  const startXRef = useRef(0);
+  const startWidthRef = useRef(0);
+
+  // 幅を設定（範囲内に収める）
+  const setWidth = useCallback((newWidth: number) => {
+    const clampedWidth = Math.min(maxWidth, Math.max(minWidth, newWidth));
+    setWidthState(clampedWidth);
+
+    // ローカルストレージに保存
+    if (storageKey && typeof window !== 'undefined') {
+      localStorage.setItem(storageKey, String(clampedWidth));
+    }
+  }, [minWidth, maxWidth, storageKey]);
+
+  // マウスダウン
+  const handleMouseDown = useCallback((e: React.MouseEvent) => {
+    e.preventDefault();
+    e.stopPropagation();
+    setIsDragging(true);
+    startXRef.current = e.clientX;
+    startWidthRef.current = width;
+  }, [width]);
+
+  // タッチスタート
+  const handleTouchStart = useCallback((e: React.TouchEvent) => {
+    e.stopPropagation();
+    setIsDragging(true);
+    startXRef.current = e.touches[0].clientX;
+    startWidthRef.current = width;
+  }, [width]);
+
+  // マウス移動・アップイベント
+  useEffect(() => {
+    if (!isDragging) return;
+
+    const handleMouseMove = (e: MouseEvent) => {
+      const deltaX = e.clientX - startXRef.current;
+      // direction が 'right' なら右にドラッグすると幅が増える
+      // direction が 'left' なら左にドラッグすると幅が増える
+      const newWidth = direction === 'right'
+        ? startWidthRef.current + deltaX
+        : startWidthRef.current - deltaX;
+      setWidth(newWidth);
+    };
+
+    const handleTouchMove = (e: TouchEvent) => {
+      const deltaX = e.touches[0].clientX - startXRef.current;
+      const newWidth = direction === 'right'
+        ? startWidthRef.current + deltaX
+        : startWidthRef.current - deltaX;
+      setWidth(newWidth);
+    };
+
+    const handleMouseUp = () => {
+      setIsDragging(false);
+    };
+
+    const handleTouchEnd = () => {
+      setIsDragging(false);
+    };
+
+    // グローバルイベントリスナー
+    document.addEventListener('mousemove', handleMouseMove);
+    document.addEventListener('mouseup', handleMouseUp);
+    document.addEventListener('touchmove', handleTouchMove);
+    document.addEventListener('touchend', handleTouchEnd);
+
+    // カーソルスタイルを変更
+    document.body.style.cursor = 'col-resize';
+    document.body.style.userSelect = 'none';
+
+    return () => {
+      document.removeEventListener('mousemove', handleMouseMove);
+      document.removeEventListener('mouseup', handleMouseUp);
+      document.removeEventListener('touchmove', handleTouchMove);
+      document.removeEventListener('touchend', handleTouchEnd);
+      document.body.style.cursor = '';
+      document.body.style.userSelect = '';
+    };
+  }, [isDragging, direction, setWidth]);
+
+  // リサイズハンドルのprops
+  const resizeHandleProps = {
+    onMouseDown: handleMouseDown,
+    onTouchStart: handleTouchStart,
+    style: {
+      cursor: 'col-resize',
+    } as React.CSSProperties,
+    className: `
+      absolute top-0 ${direction === 'right' ? 'right-0' : 'left-0'}
+      w-1 h-full z-10
+      hover:bg-blue-500/50
+      ${isDragging ? 'bg-blue-500' : 'bg-transparent'}
+      transition-colors duration-150
+    `.trim().replace(/\s+/g, ' '),
+  };
+
+  return {
+    width,
+    setWidth,
+    isDragging,
+    resizeHandleProps,
+  };
+}

package/src/editor/hooks/useRichPaste.ts

@@ -0,0 +1,255 @@
+'use client';
+
+/**
+ * useRichPaste.ts
+ *
+ * Hook for handling rich clipboard paste operations (Excel, Word, Browser HTML, SVG).
+ * Integrates with the editor's element system for proper insertion and selection.
+ */
+
+import { useCallback } from 'react';
+import { useEditorContext } from '../EditorContext';
+import { getIframeElement, updateSelectionBox } from '../utils/dom-utils';
+import { extractElementInfo } from '../utils/style-utils';
+import {
+  detectContentType,
+  processClipboardContent,
+  ClipboardContentType,
+  PasteProcessResult,
+} from '../utils/paste-processors';
+import { fetchAndApplyFigmaImages } from '../utils/figma-paste';
+
+/**
+ * Result of a rich paste operation
+ */
+export interface RichPasteResult {
+  success: boolean;
+  elementIds: string[];
+  contentType: ClipboardContentType;
+  error?: string;
+  /** When true, caller should fallback to image paste handling */
+  shouldFallbackToImage?: boolean;
+  /** Number of Figma images successfully fetched and applied */
+  figmaImagesApplied?: number;
+  /** Errors from Figma image fetching */
+  figmaImageErrors?: string[];
+}
+
+/**
+ * Hook for handling rich clipboard paste operations.
+ *
+ * Features:
+ * - Detects clipboard content type (Excel, Word, Browser HTML, SVG, plain text)
+ * - Processes and sanitizes content while preserving styles
+ * - Inserts elements at the correct position (after selected element or at end)
+ * - Updates selection to newly pasted elements
+ *
+ * @returns Object containing paste utilities and handlers
+ */
+export function useRichPaste() {
+  const {
+    selectedElement,
+    setSelectedElement,
+    setSelectedElementIds,
+    notifyIframeChange,
+    getIframeDoc,
+  } = useEditorContext();
+
+  /**
+   * Check if clipboard contains rich content that we can handle.
+   * Images are excluded as they're handled by useImageUpload.
+   */
+  const canHandleRichPaste = useCallback((clipboardData: DataTransfer): boolean => {
+    const contentType = detectContentType(clipboardData);
+    // We handle everything except images (handled by useImageUpload) and unknown
+    return contentType !== 'image' && contentType !== 'unknown';
+  }, []);
+
+  /**
+   * Get the content type without processing
+   */
+  const getContentType = useCallback((clipboardData: DataTransfer): ClipboardContentType => {
+    return detectContentType(clipboardData);
+  }, []);
+
+  /**
+   * Paste rich content from clipboard into the editor.
+   *
+   * @param clipboardData - DataTransfer from paste event
+   * @param forceContentType - Optional content type to force (overrides detection)
+   * @returns Result of the paste operation
+   */
+  const pasteRichContent = useCallback(async (
+    clipboardData: DataTransfer,
+    forceContentType?: ClipboardContentType
+  ): Promise<RichPasteResult> => {
+    const iframeDoc = getIframeDoc();
+    if (!iframeDoc) {
+      return {
+        success: false,
+        elementIds: [],
+        contentType: 'unknown',
+        error: 'No iframe document available',
+      };
+    }
+
+    // Detect content type (or use forced type)
+    const contentType = forceContentType || detectContentType(clipboardData);
+    console.log('[useRichPaste] Detected content type:', contentType, forceContentType ? '(forced)' : '');
+
+    // Skip images (handled by useImageUpload)
+    if (contentType === 'image') {
+      return {
+        success: false,
+        elementIds: [],
+        contentType,
+        error: 'Images should be handled by useImageUpload',
+      };
+    }
+
+    // Process clipboard content
+    const result: PasteProcessResult = processClipboardContent(clipboardData, iframeDoc, contentType);
+
+    if (!result.success || result.elements.length === 0) {
+      console.warn('[useRichPaste] Failed to process content:', result.error);
+      return {
+        success: false,
+        elementIds: [],
+        contentType: result.contentType,
+        error: result.error || 'Failed to process clipboard content',
+        shouldFallbackToImage: result.shouldFallbackToImage,
+      };
+    }
+
+    // Clear existing selection boxes
+    iframeDoc.querySelectorAll('.selection-box').forEach(box => box.remove());
+    iframeDoc.querySelectorAll('.selected').forEach(el => el.classList.remove('selected'));
+
+    // Determine insertion point
+    let insertAfterElement: HTMLElement | null = null;
+    if (selectedElement) {
+      insertAfterElement = getIframeElement(iframeDoc, selectedElement.id);
+    }
+
+    // Insert elements
+    const pastedIds: string[] = [];
+    const pastedElements: HTMLElement[] = [];
+
+    result.elements.forEach((el) => {
+      const elementId = el.getAttribute('data-element-id');
+      if (!elementId) {
+        console.warn('[useRichPaste] Element missing data-element-id, skipping');
+        return;
+      }
+
+      // Insert at appropriate position
+      if (insertAfterElement && insertAfterElement.parentNode) {
+        insertAfterElement.parentNode.insertBefore(el, insertAfterElement.nextSibling);
+        insertAfterElement = el; // Update for next element
+      } else {
+        // Find artboard or use body
+        const artboard = iframeDoc.querySelector('[data-element-id="artboard"]') || iframeDoc.body;
+        artboard.appendChild(el);
+      }
+
+      pastedIds.push(elementId);
+      pastedElements.push(el);
+    });
+
+    // Notify change
+    notifyIframeChange();
+
+    // Update selection to pasted elements
+    if (pastedIds.length > 0) {
+      setSelectedElementIds(pastedIds);
+      pastedElements.forEach((el) => {
+        el.classList.add('selected');
+        updateSelectionBox(iframeDoc, el, true);
+      });
+
+      // Set primary selected element
+      if (pastedElements.length > 0) {
+        const info = extractElementInfo(pastedElements[0], iframeDoc);
+        if (info) {
+          setSelectedElement(info);
+        }
+      }
+    }
+
+    console.log('[useRichPaste] Successfully pasted', pastedIds.length, 'elements');
+
+    // For Figma content, fetch and apply images asynchronously
+    let figmaImagesApplied: number | undefined;
+    let figmaImageErrors: string[] | undefined;
+
+    const hasImageHashes = result.figmaImageHashes && result.figmaImageHashes.length > 0;
+    const hasImageNodeIds = result.figmaImageNodeIds && result.figmaImageNodeIds.length > 0;
+
+    if (
+      result.contentType === 'html-figma' &&
+      result.figmaFileKey &&
+      (hasImageHashes || hasImageNodeIds)
+    ) {
+      console.log('[useRichPaste] Fetching Figma images...',
+        hasImageHashes ? `${result.figmaImageHashes!.length} hashes` : 'no hashes',
+        hasImageNodeIds ? `${result.figmaImageNodeIds!.length} nodeIds` : 'no nodeIds',
+      );
+
+      // Find the root element to search within
+      const rootElement = pastedElements[0]?.parentElement || iframeDoc.body;
+
+      const imageResult = await fetchAndApplyFigmaImages(
+        result.figmaFileKey,
+        result.figmaImageHashes || [],
+        rootElement,
+        result.figmaImageNodeIds
+      );
+
+      figmaImagesApplied = imageResult.applied;
+      figmaImageErrors = imageResult.errors.length > 0 ? imageResult.errors : undefined;
+
+      if (imageResult.applied > 0) {
+        // Notify change again since images were applied
+        notifyIframeChange();
+        console.log(`[useRichPaste] Applied ${imageResult.applied} Figma images`);
+      }
+    }
+
+    return {
+      success: true,
+      elementIds: pastedIds,
+      contentType: result.contentType,
+      figmaImagesApplied,
+      figmaImageErrors,
+    };
+  }, [getIframeDoc, selectedElement, setSelectedElement, setSelectedElementIds, notifyIframeChange]);
+
+  /**
+   * Debug helper: Log clipboard contents
+   */
+  const debugClipboard = useCallback((clipboardData: DataTransfer): void => {
+    console.log('[useRichPaste] === Clipboard Debug ===');
+    console.log('Available types:', Array.from(clipboardData.types));
+
+    clipboardData.types.forEach((type) => {
+      const data = clipboardData.getData(type);
+      console.log(`[${type}]:`, data.substring(0, 500) + (data.length > 500 ? '...' : ''));
+    });
+
+    console.log('Items:', Array.from(clipboardData.items).map(item => ({
+      kind: item.kind,
+      type: item.type,
+    })));
+
+    console.log('Detected type:', detectContentType(clipboardData));
+    console.log('[useRichPaste] === End Debug ===');
+  }, []);
+
+  return {
+    canHandleRichPaste,
+    getContentType,
+    pasteRichContent,
+    debugClipboard,
+    detectContentType,
+  };
+}

package/src/editor/hooks/useTouchGestures.ts

@@ -0,0 +1,197 @@
+/**
+ * キャンバス(iframe)側のホイール/タッチジェスチャー処理フック
+ * - Ctrl/Cmd + ホイール → 親の useCanvasControls にズームを依頼
+ * - Shift + ホイール → 横スクロール（パン）
+ * - ピンチズーム（2本指）→ 親の useCanvasControls にズームを依頼
+ * - Safari の gesture イベントの抑止
+ *
+ * [移植時の修正]
+ * 以前はここで iframe ビューポート座標を親ウィンドウ座標に変換してから
+ * postMessage し、受け手の useCanvasControls が再び iframe 座標へ戻していた。
+ * 往復で2回とも iframeRef の実測に依存するうえ、どちらの座標系の値なのかが
+ * 名前から読み取れず、ズーム中心のずれの温床になっていた。
+ * 現在は **iframe ビューポート座標のまま** 送る（受け手もその前提）。
+ */
+
+import { useCallback, useRef } from 'react';
+import { useEditorContext } from '../EditorContext';
+
+/**
+ * 2点間の距離を計算
+ */
+function getTouchDistance(touches: TouchList): number {
+  if (touches.length < 2) return 0;
+  const dx = touches[0].clientX - touches[1].clientX;
+  const dy = touches[0].clientY - touches[1].clientY;
+  return Math.sqrt(dx * dx + dy * dy);
+}
+
+/**
+ * 2点の中心座標を計算
+ */
+function getTouchCenter(touches: TouchList): { x: number; y: number } {
+  if (touches.length < 2) {
+    return { x: touches[0].clientX, y: touches[0].clientY };
+  }
+  return {
+    x: (touches[0].clientX + touches[1].clientX) / 2,
+    y: (touches[0].clientY + touches[1].clientY) / 2,
+  };
+}
+
+/**
+ * ホイールの delta を CSS ピクセル相当に正規化する。
+ * deltaMode は 0=px / 1=行 / 2=ページ。デバイスによって単位が違うので揃える。
+ */
+function normalizeDelta(value: number, deltaMode: number): number {
+  if (deltaMode === 1) return value * 16;
+  if (deltaMode === 2) return value * 100;
+  return value;
+}
+
+interface UseTouchGesturesReturn {
+  /**
+   * iframe ドキュメントにホイール/タッチジェスチャーリスナーをセットアップ
+   * @returns クリーンアップ関数
+   */
+  setupTouchGestureListeners: (iframeDoc: Document) => () => void;
+}
+
+/**
+ * ホイール/タッチジェスチャー処理フック
+ *
+ * iframe内のイベントを処理し、ズームは親ウィンドウの useCanvasControls に
+ * postMessage で転送する（ズーム倍率の一元管理は親側の state が持つため）。
+ */
+export function useTouchGestures(): UseTouchGesturesReturn {
+  useEditorContext();
+
+  // ピンチズーム用の状態（クロージャ問題を避けるためrefを使用）
+  const lastTouchDistanceRef = useRef<number | null>(null);
+
+  const setupTouchGestureListeners = useCallback((iframeDoc: Document) => {
+    // タッチアクションを無効化（ブラウザのデフォルトズームを防止）
+    iframeDoc.documentElement.style.touchAction = 'none';
+    iframeDoc.body.style.touchAction = 'none';
+
+    /**
+     * ホイール処理
+     * - Ctrl/Cmd + ホイール: ズーム（親に転送）
+     * - Shift + ホイール: 横スクロール
+     * - それ以外: #canvas-container のネイティブスクロールに任せる
+     */
+    const handleWheel = (e: WheelEvent) => {
+      if (e.ctrlKey || e.metaKey) {
+        e.preventDefault();
+        e.stopPropagation();
+        e.stopImmediatePropagation();
+
+        // 座標は iframe ビューポート基準のまま送る
+        window.postMessage(
+          {
+            type: 'IFRAME_WHEEL_EVENT',
+            deltaY: normalizeDelta(e.deltaY, e.deltaMode),
+            clientX: e.clientX,
+            clientY: e.clientY,
+            ctrlKey: e.ctrlKey,
+            metaKey: e.metaKey,
+          },
+          '*'
+        );
+        return;
+      }
+
+      // Shift + ホイールで横スクロール。
+      // 合成イベントや一部デバイスではブラウザが縦→横の読み替えをしてくれないので、
+      // deltaX が来ていないときだけ自前で横に流す（「無反応」を作らないため）。
+      if (e.shiftKey && e.deltaX === 0 && e.deltaY !== 0) {
+        const container = iframeDoc.getElementById('canvas-container');
+        if (container) {
+          e.preventDefault();
+          container.scrollLeft += normalizeDelta(e.deltaY, e.deltaMode);
+        }
+      }
+    };
+
+    /**
+     * Safari gestureイベントを防止
+     */
+    const handleGesture = (e: Event) => {
+      e.preventDefault();
+      e.stopPropagation();
+    };
+
+    /**
+     * 2本指タッチ開始時の処理
+     */
+    const handleTouchStart = (e: TouchEvent) => {
+      if (e.touches.length >= 2) {
+        e.preventDefault();
+        lastTouchDistanceRef.current = getTouchDistance(e.touches);
+      }
+    };
+
+    /**
+     * 2本指タッチ移動時の処理（ピンチズーム）
+     */
+    const handleTouchMove = (e: TouchEvent) => {
+      if (e.touches.length >= 2) {
+        e.preventDefault();
+        if (lastTouchDistanceRef.current !== null) {
+          const currentDistance = getTouchDistance(e.touches);
+          const center = getTouchCenter(e.touches);
+
+          // 座標は iframe ビューポート基準のまま送る
+          window.postMessage(
+            {
+              type: 'IFRAME_PINCH_EVENT',
+              previousDistance: lastTouchDistanceRef.current,
+              currentDistance,
+              centerX: center.x,
+              centerY: center.y,
+            },
+            '*'
+          );
+
+          lastTouchDistanceRef.current = currentDistance;
+        }
+      }
+    };
+
+    /**
+     * タッチ終了時の処理
+     */
+    const handleTouchEnd = (e: TouchEvent) => {
+      if (e.touches.length < 2) {
+        lastTouchDistanceRef.current = null;
+      }
+    };
+
+    // イベントリスナーを登録
+    const options = { passive: false, capture: true };
+    iframeDoc.addEventListener('wheel', handleWheel, options);
+    iframeDoc.addEventListener('gesturestart', handleGesture, options);
+    iframeDoc.addEventListener('gesturechange', handleGesture, options);
+    iframeDoc.addEventListener('gestureend', handleGesture, options);
+    iframeDoc.addEventListener('touchstart', handleTouchStart, options);
+    iframeDoc.addEventListener('touchmove', handleTouchMove, options);
+    iframeDoc.addEventListener('touchend', handleTouchEnd, options);
+    iframeDoc.addEventListener('touchcancel', handleTouchEnd, options);
+
+    // クリーンアップ関数を返す
+    return () => {
+      iframeDoc.removeEventListener('wheel', handleWheel, options);
+      iframeDoc.removeEventListener('gesturestart', handleGesture, options);
+      iframeDoc.removeEventListener('gesturechange', handleGesture, options);
+      iframeDoc.removeEventListener('gestureend', handleGesture, options);
+      iframeDoc.removeEventListener('touchstart', handleTouchStart, options);
+      iframeDoc.removeEventListener('touchmove', handleTouchMove, options);
+      iframeDoc.removeEventListener('touchend', handleTouchEnd, options);
+      iframeDoc.removeEventListener('touchcancel', handleTouchEnd, options);
+    };
+  }, []);
+
+  return {
+    setupTouchGestureListeners,
+  };
+}

package/src/editor/index.ts

@@ -0,0 +1,27 @@
+/**
+ * FrontendVisualEditor - 汎用フロントエンドビジュアルエディタ
+ * スライド、ページ、コンポーネントなど様々なコンテンツの編集に使用可能
+ */
+
+// メインエディタコンポーネント
+export { FrontendVisualEditor, FrontendVisualEditor as SlideVisualEditor } from './FrontendVisualEditor';
+export type { FrontendVisualEditorProps } from './FrontendVisualEditor';
+
+// コンテキスト
+export { EditorProvider, useEditorContext } from './EditorContext';
+export type { ContentListItem, ContentListItem as SlideListItem } from './EditorContext';
+
+// コンポーネント
+export * from './components';
+
+// フック
+export * from './hooks';
+
+// ユーティリティ
+export * from './utils';
+
+// 型定義
+export * from './types';
+
+// 定数
+export * from './constants';