@growgroup/visual-editor 0.1.0

package/src/editor/hooks/useIframeSetup.ts

@@ -0,0 +1,360 @@
+/**
+ * iframe初期化処理フック
+ * - スタイル注入
+ * - data-editable属性の付与
+ * - インライン要素の検出
+ * - MutationObserverのセットアップ
+ */
+
+import { useCallback, useRef, useEffect } from 'react';
+import { useEditorContext } from '../EditorContext';
+import { buildDomTree, isInlineElement } from '../utils/dom-utils';
+import { EDITOR_IFRAME_STYLES } from '../constants';
+
+interface UseIframeSetupReturn {
+  /**
+   * iframe ドキュメントの初期化処理
+   * - スタイル注入
+   * - data-editable属性の付与
+   * - DOMツリーの構築
+   */
+  initializeIframeDocument: (iframeDoc: Document) => void;
+
+  /**
+   * MutationObserverをセットアップ
+   * @returns クリーンアップ関数
+   */
+  setupMutationObserver: (iframeDoc: Document) => () => void;
+
+  /**
+   * テキスト要素ホバーリスナーをセットアップ
+   *
+   * @param resolveHoverTarget
+   *   「いまクリックしたら選択されるであろう要素」を返す関数。
+   *   選択側（useElementSelection）と同じ判別器を渡すことで、
+   *   ホバー輪郭が必ずクリック結果の予告になる。
+   *   省略可（未指定なら輪郭は出さず、従来のテキスト下線だけ動く）。
+   * @returns クリーンアップ関数
+   */
+  setupTextHoverListener: (
+    iframeDoc: Document,
+    resolveHoverTarget?: HoverTargetResolver,
+  ) => () => void;
+}
+
+/** ホバー予告の対象を決める関数の型（選択側の判別器と同じもの） */
+export type HoverTargetResolver = (
+  target: EventTarget | null,
+  iframeDoc: Document,
+  options: { meta: boolean },
+) => HTMLElement | null;
+
+/**
+ * iframe初期化処理フック
+ */
+export function useIframeSetup(): UseIframeSetupReturn {
+  const { setDomTree } = useEditorContext();
+
+  // クロージャ問題回避のためのref
+  const setDomTreeRef = useRef(setDomTree);
+
+  // refを最新値に同期
+  useEffect(() => {
+    setDomTreeRef.current = setDomTree;
+  }, [setDomTree]);
+
+  /**
+   * 全要素にdata-editable属性とdata-element-idを付与
+   */
+  const initializeEditableElements = useCallback((iframeDoc: Document) => {
+    const artboard = iframeDoc.getElementById('artboard');
+    if (!artboard) {
+      console.warn('[IframeSetup] #artboard not found');
+      return 0;
+    }
+
+    let elementIndex = 0;
+    const elements = artboard.querySelectorAll('*');
+
+    elements.forEach((el) => {
+      const element = el as HTMLElement;
+
+      // スキップする要素
+      if (element === artboard) return;
+      if (element === iframeDoc.documentElement) return;
+      // [移植時の修正] スライドのキャンバス本体(#artboard 直下で紙面と同じ大きさの器)は
+      // 編集対象にしない。ここを掴めるとスライドごと動いてしまい、中身が版面の外
+      // (overflow:hidden)へ出るため、要素が消えたように見える
+      if (
+        element.parentElement === artboard &&
+        element.offsetWidth >= artboard.clientWidth - 2 &&
+        element.offsetHeight >= artboard.clientHeight - 2
+      ) {
+        return;
+      }
+      if (
+        element.tagName === 'SCRIPT' ||
+        element.tagName === 'STYLE' ||
+        element.tagName === 'HEAD'
+      )
+        return;
+      if (element.closest('script, style, svg path, svg g')) return;
+      if (element.classList.contains('material-icons')) return;
+      if (element.classList.contains('material-icons-outlined')) return;
+      // selection-box およびその子要素はスキップ
+      if (element.classList.contains('selection-box')) return;
+      if (element.classList.contains('resize-handle')) return;
+      if (element.classList.contains('selection-outline')) return;
+      if (element.classList.contains('size-label')) return;
+      if (element.classList.contains('border-radius-handle')) return;
+      if (element.classList.contains('rotation-handle')) return;
+      // selection-boxの子孫要素をすべてスキップ（念のため）
+      if (element.closest('.selection-box')) return;
+
+      // 既にIDがある場合はスキップ
+      if (!element.getAttribute('data-element-id')) {
+        const elementId = `el-${Date.now()}-${elementIndex++}`;
+        element.setAttribute('data-editable', 'true');
+        element.setAttribute('data-element-id', elementId);
+
+        // インライン要素にはフラグを付与（絶対配置に変換しない）
+        const computedStyle = iframeDoc.defaultView?.getComputedStyle(element);
+        if (computedStyle && isInlineElement(element, computedStyle)) {
+          element.setAttribute('data-inline', 'true');
+        }
+      } else if (!element.getAttribute('data-editable')) {
+        element.setAttribute('data-editable', 'true');
+      }
+    });
+
+    return elementIndex;
+  }, []);
+
+  /**
+   * iframe ドキュメントの初期化
+   */
+  const initializeIframeDocument = useCallback(
+    (iframeDoc: Document) => {
+      console.log('[IframeSetup] Initializing iframe document...');
+
+      // スタイルを注入
+      const style = iframeDoc.createElement('style');
+      style.textContent = EDITOR_IFRAME_STYLES;
+      iframeDoc.head.appendChild(style);
+
+      // タッチアクションを無効化
+      iframeDoc.documentElement.style.touchAction = 'none';
+      iframeDoc.body.style.touchAction = 'none';
+
+      // 全要素にdata-editableとdata-element-idを付与
+      const elementCount = initializeEditableElements(iframeDoc);
+      console.log('[IframeSetup] Initialized', elementCount, 'editable elements');
+
+      // DOMツリーを構築
+      const newTree = buildDomTree(iframeDoc);
+      setDomTreeRef.current(newTree);
+    },
+    [initializeEditableElements]
+  );
+
+  /**
+   * MutationObserverをセットアップ
+   */
+  const setupMutationObserver = useCallback(
+    (iframeDoc: Document) => {
+      const artboard = iframeDoc.getElementById('artboard');
+      if (!artboard) {
+        console.warn('[IframeSetup] #artboard not found for MutationObserver');
+        return () => {};
+      }
+
+      let mutationTimeout: ReturnType<typeof setTimeout> | null = null;
+
+      const observer = new MutationObserver(() => {
+        // デバウンス: 連続した変更を一度にまとめる
+        if (mutationTimeout) {
+          clearTimeout(mutationTimeout);
+        }
+        mutationTimeout = setTimeout(() => {
+          // 新しい要素にdata-editableを付与
+          initializeEditableElements(iframeDoc);
+          // DOMツリーを再構築
+          const newTree = buildDomTree(iframeDoc);
+          setDomTreeRef.current(newTree);
+        }, 100);
+      });
+
+      observer.observe(artboard, {
+        childList: true,
+        subtree: true,
+        attributes: false,
+        characterData: false,
+      });
+
+      // クリーンアップ関数
+      return () => {
+        if (mutationTimeout) {
+          clearTimeout(mutationTimeout);
+        }
+        observer.disconnect();
+      };
+    },
+    [initializeEditableElements]
+  );
+
+  /**
+   * 要素が直下にテキストを含むかチェック
+   */
+  const hasDirectTextContent = useCallback((element: HTMLElement): boolean => {
+    // 画像やSVGは除外
+    const tagName = element.tagName.toUpperCase();
+    if (['IMG', 'SVG', 'VIDEO', 'IFRAME', 'CANVAS'].includes(tagName)) return false;
+
+    // 直接テキストノードを含むかチェック
+    for (const child of element.childNodes) {
+      if (child.nodeType === Node.TEXT_NODE && child.textContent?.trim()) {
+        return true;
+      }
+    }
+
+    // テキスト系タグで、テキストコンテンツがある場合
+    const textTags = ['P', 'H1', 'H2', 'H3', 'H4', 'H5', 'H6', 'SPAN', 'A', 'LABEL', 'LI', 'TD', 'TH', 'BUTTON'];
+    if (textTags.includes(tagName) && element.textContent?.trim()) {
+      return true;
+    }
+
+    return false;
+  }, []);
+
+  /**
+   * テキスト要素ホバーリスナーをセットアップ
+   */
+  const setupTextHoverListener = useCallback(
+    (iframeDoc: Document, resolveHoverTarget?: HoverTargetResolver) => {
+      let currentHoveredTextElement: HTMLElement | null = null;
+      // [選択セマンティクスの一本化] クリック結果を予告する輪郭は1要素だけに付ける。
+      // CSS の :hover は祖先チェーン全体に当たってしまうため、ここで付け替える。
+      let currentPreviewElement: HTMLElement | null = null;
+
+      const clearPreview = () => {
+        if (currentPreviewElement) {
+          currentPreviewElement.classList.remove('hover-preview');
+          currentPreviewElement = null;
+        }
+      };
+
+      /** 予告輪郭を1要素だけに付け替える */
+      const updatePreview = (e: MouseEvent) => {
+        if (!resolveHoverTarget) return;
+        // ドラッグ／マーキー中は予告を出さない（掴んでいる最中に輪郭が踊るのを防ぐ）
+        if (
+          iframeDoc.body.classList.contains('marquee-active') ||
+          iframeDoc.querySelector('.dragging')
+        ) {
+          clearPreview();
+          return;
+        }
+        const next = resolveHoverTarget(e.target, iframeDoc, {
+          meta: e.metaKey || e.ctrlKey,
+        });
+        if (next === currentPreviewElement) return;
+        clearPreview();
+        if (next) {
+          next.classList.add('hover-preview');
+          currentPreviewElement = next;
+        }
+      };
+
+      const handleMouseMove = (e: MouseEvent) => {
+        // 描画モードやテキストモードでは無効
+        const bodyClasses = iframeDoc.body.classList;
+        if (bodyClasses.contains('draw-mode') || bodyClasses.contains('text-mode') || bodyClasses.contains('move-mode')) {
+          if (currentHoveredTextElement) {
+            currentHoveredTextElement.classList.remove('text-editable-hover');
+            currentHoveredTextElement = null;
+          }
+          clearPreview();
+          return;
+        }
+
+        updatePreview(e);
+
+        // マウス下の要素を取得
+        const target = e.target as HTMLElement;
+
+        // 編集可能要素を探す
+        let editableElement: HTMLElement | null = target;
+        while (editableElement && editableElement !== iframeDoc.body) {
+          if (editableElement.getAttribute('data-editable') === 'true') {
+            break;
+          }
+          editableElement = editableElement.parentElement;
+        }
+
+        if (!editableElement || editableElement === iframeDoc.body) {
+          // 編集可能要素がない場合、既存のホバーをクリア
+          if (currentHoveredTextElement) {
+            currentHoveredTextElement.classList.remove('text-editable-hover');
+            currentHoveredTextElement = null;
+          }
+          return;
+        }
+
+        // テキスト編集可能かチェック
+        const isTextElement = hasDirectTextContent(editableElement);
+
+        if (isTextElement && editableElement !== currentHoveredTextElement) {
+          // 前のホバーをクリア
+          if (currentHoveredTextElement) {
+            currentHoveredTextElement.classList.remove('text-editable-hover');
+          }
+          // 新しいホバーを設定
+          editableElement.classList.add('text-editable-hover');
+          currentHoveredTextElement = editableElement;
+        } else if (!isTextElement && currentHoveredTextElement) {
+          // テキスト要素でない場合、ホバーをクリア
+          currentHoveredTextElement.classList.remove('text-editable-hover');
+          currentHoveredTextElement = null;
+        }
+      };
+
+      const handleMouseLeave = () => {
+        if (currentHoveredTextElement) {
+          currentHoveredTextElement.classList.remove('text-editable-hover');
+          currentHoveredTextElement = null;
+        }
+        clearPreview();
+      };
+
+      // Cmd/Ctrl の押し下げ・解放でも予告先が変わる（Cmdは最深要素を選ぶため）
+      const handleModifierChange = (e: KeyboardEvent) => {
+        if (e.key !== 'Meta' && e.key !== 'Control') return;
+        clearPreview();
+      };
+
+      iframeDoc.addEventListener('mousemove', handleMouseMove);
+      iframeDoc.addEventListener('mouseleave', handleMouseLeave);
+      iframeDoc.addEventListener('keydown', handleModifierChange);
+      iframeDoc.addEventListener('keyup', handleModifierChange);
+
+      // クリーンアップ関数
+      return () => {
+        iframeDoc.removeEventListener('mousemove', handleMouseMove);
+        iframeDoc.removeEventListener('mouseleave', handleMouseLeave);
+        iframeDoc.removeEventListener('keydown', handleModifierChange);
+        iframeDoc.removeEventListener('keyup', handleModifierChange);
+        if (currentHoveredTextElement) {
+          currentHoveredTextElement.classList.remove('text-editable-hover');
+        }
+        clearPreview();
+      };
+    },
+    [hasDirectTextContent]
+  );
+
+  return {
+    initializeIframeDocument,
+    setupMutationObserver,
+    setupTextHoverListener,
+  };
+}

package/src/editor/hooks/useImageUpload.ts

@@ -0,0 +1,270 @@
+'use client';
+
+/**
+ * エディタの画像アップロード機能を管理するHook
+ * - ファイル選択からのアップロード
+ * - ドラッグ&ドロップ
+ * - クリップボードからのペースト
+ */
+
+import { useState, useCallback } from 'react';
+import { useEditorContext } from '../EditorContext';
+import { 
+  uploadEditorImage, 
+  uploadEditorImageFromDataUrl,
+  SUPPORTED_IMAGE_TYPES,
+  MAX_IMAGE_SIZE,
+} from '../../lib/firebase/storage';
+import { buildDomTree } from '../utils/dom-utils';
+import { findInsertionParent, findSlideRoot } from '../utils/slide-root';
+
+interface UploadResult {
+  storageUrl: string;
+  storagePath: string;
+  width?: number;
+  height?: number;
+}
+
+interface UseImageUploadOptions {
+  presentationId?: string;
+  slideId?: string;
+}
+
+export function useImageUpload(options: UseImageUploadOptions = {}) {
+  const { getIframeDoc, setDomTree, notifyIframeChange, layoutMode } = useEditorContext();
+  const [isUploading, setIsUploading] = useState(false);
+  const [uploadError, setUploadError] = useState<string | null>(null);
+
+  /**
+   * 画像要素をiframeに挿入
+   */
+  const insertImageElement = useCallback((
+    url: string,
+    options: { width?: number; height?: number; x?: number; y?: number } = {}
+  ) => {
+    const iframeDoc = getIframeDoc();
+    if (!iframeDoc) return;
+
+    // 画像要素を作成
+    const img = iframeDoc.createElement('img');
+    img.src = url;
+    img.alt = 'Uploaded image';
+    
+    // サイズを設定（デフォルトは元のサイズ、最大幅500px）
+    const maxWidth = 500;
+    let width = options.width || 300;
+    let height = options.height || 200;
+    
+    if (width > maxWidth) {
+      const ratio = maxWidth / width;
+      width = maxWidth;
+      height = Math.round(height * ratio);
+    }
+    
+    img.style.width = `${width}px`;
+    img.style.height = `${height}px`;
+    
+    // 位置を設定
+    // [移植時の修正] スライド編集中はオートレイアウトでも絶対配置にする。
+    // スライドは1920×1080の固定枠(overflow:hidden)で、中身も絶対配置で組まれているため、
+    // フロー配置にすると画像がスライドの下(1080pxの外)に積まれて見えなくなり、
+    // その状態でドラッグすると画面外へ飛んでいったように見えてしまう。
+    const insideSlide = !!findSlideRoot(iframeDoc);
+    if (layoutMode === 'absolute' || insideSlide) {
+      const x = options.x ?? 100;
+      const y = options.y ?? 100;
+      img.style.position = 'absolute';
+      img.style.left = `${x}px`;
+      img.style.top = `${y}px`;
+    } else {
+      // オートレイアウトモード: 通常のレイアウトフローに従う
+      img.style.display = 'block';
+      img.style.margin = '10px auto';
+    }
+    
+    // 編集可能属性を追加
+    const elementId = `el-${Date.now()}-img`;
+    img.setAttribute('data-editable', 'true');
+    img.setAttribute('data-element-id', elementId);
+
+    // [移植時の修正] スライドがある場合はスライドの中に追加する。
+    // 外側(#artboard/body)に入れると、ズーム倍率の分だけ座標系がずれて
+    // スライド外に表示されたり、ドラッグで飛んでいったりする。
+    findInsertionParent(iframeDoc).appendChild(img);
+    
+    // DOMツリーを更新
+    const newTree = buildDomTree(iframeDoc);
+    setDomTree(newTree);
+    
+    // 変更を通知
+    notifyIframeChange();
+    
+    return elementId;
+  }, [getIframeDoc, setDomTree, notifyIframeChange]);
+
+  /**
+   * ファイルからアップロード
+   */
+  const uploadFromFile = useCallback(async (
+    file: File,
+    insertOptions?: { x?: number; y?: number }
+  ): Promise<UploadResult | null> => {
+    setIsUploading(true);
+    setUploadError(null);
+
+    try {
+      // ファイルタイプチェック
+      if (!SUPPORTED_IMAGE_TYPES.includes(file.type)) {
+        throw new Error('サポートされていない画像形式です。JPEG、PNG、GIF、WebP、SVGがサポートされています。');
+      }
+
+      // ファイルサイズチェック
+      if (file.size > MAX_IMAGE_SIZE) {
+        throw new Error(`画像サイズが大きすぎます。${MAX_IMAGE_SIZE / (1024 * 1024)}MB以下にしてください。`);
+      }
+
+      const result = await uploadEditorImage(file, {
+        presentationId: options.presentationId,
+        slideId: options.slideId,
+        fileName: file.name,
+      });
+
+      // 画像をiframeに挿入
+      insertImageElement(result.storageUrl, {
+        width: result.width,
+        height: result.height,
+        x: insertOptions?.x,
+        y: insertOptions?.y,
+      });
+
+      return result;
+    } catch (error) {
+      const message = error instanceof Error ? error.message : '画像のアップロードに失敗しました。';
+      setUploadError(message);
+      console.error('Image upload error:', error);
+      return null;
+    } finally {
+      setIsUploading(false);
+    }
+  }, [options.presentationId, options.slideId, insertImageElement]);
+
+  /**
+   * 複数ファイルからアップロード
+   */
+  const uploadFromFiles = useCallback(async (
+    files: FileList | File[],
+    insertOptions?: { x?: number; y?: number }
+  ): Promise<UploadResult[]> => {
+    const results: UploadResult[] = [];
+    let currentX = insertOptions?.x ?? 100;
+    const startY = insertOptions?.y ?? 100;
+
+    for (const file of Array.from(files)) {
+      const result = await uploadFromFile(file, { x: currentX, y: startY });
+      if (result) {
+        results.push(result);
+        currentX += (result.width || 300) + 20; // 次の画像の位置
+      }
+    }
+
+    return results;
+  }, [uploadFromFile]);
+
+  /**
+   * クリップボードからアップロード
+   */
+  const uploadFromClipboard = useCallback(async (
+    clipboardData: DataTransfer,
+    insertOptions?: { x?: number; y?: number }
+  ): Promise<UploadResult | null> => {
+    console.log('[useImageUpload] uploadFromClipboard called');
+    // クリップボードから画像を探す
+    const items = Array.from(clipboardData.items);
+    console.log('[useImageUpload] Clipboard items:', items.map(i => ({ type: i.type, kind: i.kind })));
+
+    for (const item of items) {
+      if (item.type.startsWith('image/')) {
+        const file = item.getAsFile();
+        console.log('[useImageUpload] Got file from clipboard item:', file);
+        if (file) {
+          return uploadFromFile(file, insertOptions);
+        }
+      }
+    }
+
+    // DataURLとして取得を試みる
+    const htmlData = clipboardData.getData('text/html');
+    if (htmlData) {
+      const imgMatch = htmlData.match(/<img[^>]+src="(data:image\/[^"]+)"/);
+      if (imgMatch) {
+        setIsUploading(true);
+        setUploadError(null);
+        
+        try {
+          const result = await uploadEditorImageFromDataUrl(imgMatch[1], {
+            presentationId: options.presentationId,
+            slideId: options.slideId,
+          });
+
+          insertImageElement(result.storageUrl, {
+            width: result.width,
+            height: result.height,
+            x: insertOptions?.x,
+            y: insertOptions?.y,
+          });
+
+          return result;
+        } catch (error) {
+          const message = error instanceof Error ? error.message : '画像のアップロードに失敗しました。';
+          setUploadError(message);
+          console.error('Image upload error:', error);
+          return null;
+        } finally {
+          setIsUploading(false);
+        }
+      }
+    }
+
+    return null;
+  }, [options.presentationId, options.slideId, uploadFromFile, insertImageElement]);
+
+  /**
+   * URLから画像を挿入（アップロードなし、外部URL）
+   */
+  const insertImageFromUrl = useCallback((
+    url: string,
+    insertOptions?: { width?: number; height?: number; x?: number; y?: number }
+  ) => {
+    return insertImageElement(url, insertOptions);
+  }, [insertImageElement]);
+
+  /**
+   * ファイル選択ダイアログを開く
+   */
+  const openFilePicker = useCallback((insertOptions?: { x?: number; y?: number }) => {
+    const input = document.createElement('input');
+    input.type = 'file';
+    input.accept = SUPPORTED_IMAGE_TYPES.join(',');
+    input.multiple = true;
+    
+    input.onchange = async (e) => {
+      const files = (e.target as HTMLInputElement).files;
+      if (files && files.length > 0) {
+        await uploadFromFiles(files, insertOptions);
+      }
+    };
+    
+    input.click();
+  }, [uploadFromFiles]);
+
+  return {
+    isUploading,
+    uploadError,
+    uploadFromFile,
+    uploadFromFiles,
+    uploadFromClipboard,
+    insertImageFromUrl,
+    openFilePicker,
+    insertImageElement,
+  };
+}