@growgroup/visual-editor 0.1.0

package/src/editor/hooks/useFocusManagement.ts

@@ -0,0 +1,249 @@
+/**
+ * フォーカス管理フック
+ *
+ * ショートカットが効かなくなる問題を解決するため、
+ * エディタ全体のフォーカス状態を管理する
+ */
+
+import { useCallback, useRef, useEffect } from 'react';
+import { useEditorContext } from '../EditorContext';
+
+interface UseFocusManagementReturn {
+  /**
+   * iframeにフォーカスを復元する
+   * ダイアログを閉じた後などに呼び出す
+   */
+  restoreFocus: () => void;
+
+  /**
+   * フォーカスがエディタ内にあるかチェック
+   */
+  isEditorFocused: () => boolean;
+
+  /**
+   * フォーカス喪失時の自動復元を設定
+   * @returns クリーンアップ関数
+   */
+  setupFocusRecovery: () => () => void;
+}
+
+/**
+ * フォーカス管理フック
+ *
+ * エディタのフォーカス状態を管理し、ショートカットが
+ * 確実に機能するようにする
+ */
+export function useFocusManagement(): UseFocusManagementReturn {
+  const { iframeRef, getIframeDoc } = useEditorContext();
+
+  // フォーカス復元のタイマー（デバウンス用）
+  const focusRecoveryTimerRef = useRef<ReturnType<typeof setTimeout> | null>(null);
+
+  // 最後にフォーカスがあった場所を記録
+  const lastFocusedElementRef = useRef<'iframe' | 'parent' | null>(null);
+
+  /**
+   * iframeにフォーカスを復元する
+   */
+  const restoreFocus = useCallback(() => {
+    const iframe = iframeRef.current;
+    const iframeDoc = getIframeDoc();
+    if (!iframeDoc) {
+      console.log('[FocusManagement] Cannot restore focus: iframe doc not available');
+      return;
+    }
+
+    // テキスト編集中の要素があればそこにフォーカス
+    const editingElement = iframeDoc.querySelector('[contenteditable="true"]') as HTMLElement;
+    if (editingElement) {
+      // まずiframe要素自体にフォーカス（親ドキュメントの観点から）
+      if (iframe) iframe.focus();
+      editingElement.focus();
+      console.log('[FocusManagement] Restored focus to editing element');
+      return;
+    }
+
+    // iframeとbodyにフォーカス
+    // 重要: iframe要素自体にもフォーカスを当てないとキーボードイベントが届かない
+    if (iframe) {
+      iframe.focus();
+    }
+    if (iframeDoc.body) {
+      iframeDoc.body.focus();
+      console.log('[FocusManagement] Restored focus to iframe and body');
+    }
+  }, [iframeRef, getIframeDoc]);
+
+  /**
+   * フォーカスがエディタ内にあるかチェック
+   */
+  const isEditorFocused = useCallback(() => {
+    const iframe = iframeRef.current;
+    const iframeDoc = getIframeDoc();
+
+    // 親ドキュメントのアクティブ要素をチェック
+    const activeElement = document.activeElement;
+
+    // iframeにフォーカスがあるか（iframe内の要素にフォーカスがあるとiframeがactiveElementになる）
+    if (activeElement === iframe) {
+      return true;
+    }
+
+    // エディタ関連の要素にフォーカスがあるか
+    const editorContainer = document.querySelector('[data-frontend-visual-editor="true"]');
+    if (editorContainer?.contains(activeElement)) {
+      return true;
+    }
+
+    // iframe内にフォーカスがあるか（bodyを含む）
+    // 重要: bodyにフォーカスがある場合もキーボードイベントは受け取れるのでtrueを返す
+    if (iframeDoc && iframeDoc.activeElement) {
+      return true;
+    }
+
+    return false;
+  }, [iframeRef, getIframeDoc]);
+
+  /**
+   * フォーカス喪失時の自動復元を設定
+   */
+  const setupFocusRecovery = useCallback(() => {
+    const iframe = iframeRef.current;
+    const iframeDoc = getIframeDoc();
+
+    /**
+     * フォーカスアウト時のハンドラ
+     * フォーカスがエディタ外に出た場合、一定時間後に復元を試みる
+     */
+    const handleFocusOut = (e: FocusEvent) => {
+      // 次にフォーカスが移動する先を確認
+      const relatedTarget = e.relatedTarget as HTMLElement | null;
+
+      // ダイアログやポップオーバー内への移動は許可
+      if (relatedTarget) {
+        const isDialogOrPopover =
+          relatedTarget.closest('[role="dialog"]') ||
+          relatedTarget.closest('[role="menu"]') ||
+          relatedTarget.closest('[role="listbox"]') ||
+          relatedTarget.closest('[role="combobox"]') ||
+          relatedTarget.closest('[role="slider"]') ||              // Radix Slider（カラーピッカーの透明度等）
+          relatedTarget.closest('[data-radix-slider-thumb]') ||    // Radix Sliderのつまみ
+          relatedTarget.closest('[data-radix-slider-track]') ||    // Radix Sliderのトラック
+          relatedTarget.closest('[data-radix-popper-content-wrapper]') ||
+          relatedTarget.closest('[data-radix-select-content]') ||
+          relatedTarget.closest('[data-radix-dropdown-menu-content]') ||
+          relatedTarget.closest('[data-radix-popover-content]') ||
+          relatedTarget.closest('.ai-prompt-popover') ||
+          relatedTarget.closest('[data-state="open"]') ||
+          relatedTarget.closest('[data-color-picker]') ||
+          relatedTarget.closest('[data-dropdown-menu]');
+
+        if (isDialogOrPopover) {
+          console.log('[FocusManagement] Focus moved to dialog/popover, allowing');
+          return;
+        }
+
+        // 入力フィールドへの移動は許可（ただし後でフォーカス復元のためにトラッキング）
+        const isInputField =
+          relatedTarget instanceof HTMLInputElement ||
+          relatedTarget instanceof HTMLTextAreaElement ||
+          relatedTarget instanceof HTMLSelectElement ||
+          relatedTarget.getAttribute('contenteditable') === 'true';
+
+        if (isInputField) {
+          console.log('[FocusManagement] Focus moved to input field, allowing');
+          return;
+        }
+
+        // エディタ内の他の要素への移動は許可
+        const editorContainer = document.querySelector('[data-frontend-visual-editor="true"]');
+        if (editorContainer?.contains(relatedTarget)) {
+          return;
+        }
+      }
+
+      // フォーカスが完全に外に出た場合、遅延して復元
+      if (focusRecoveryTimerRef.current) {
+        clearTimeout(focusRecoveryTimerRef.current);
+      }
+
+      focusRecoveryTimerRef.current = setTimeout(() => {
+        // まだフォーカスがエディタ外にあれば復元
+        if (!isEditorFocused()) {
+          console.log('[FocusManagement] Focus lost, attempting recovery');
+          restoreFocus();
+        }
+      }, 30); // 30msに短縮してフォーカス復元を高速化
+    };
+
+    /**
+     * クリック時のフォーカス確認
+     * エディタ内をクリックした場合、フォーカスを確保
+     */
+    const handleClick = (e: MouseEvent) => {
+      const target = e.target as HTMLElement;
+      const editorContainer = document.querySelector('[data-frontend-visual-editor="true"]');
+
+      // エディタ内のクリックでフォーカスが失われていれば復元
+      if (editorContainer?.contains(target)) {
+        // 入力要素でなければiframeにフォーカス
+        if (
+          !(target instanceof HTMLInputElement) &&
+          !(target instanceof HTMLTextAreaElement) &&
+          !target.isContentEditable &&
+          target.getAttribute('contenteditable') !== 'true'
+        ) {
+          // 少し遅延してフォーカス状態を確認
+          setTimeout(() => {
+            if (!isEditorFocused()) {
+              restoreFocus();
+            }
+          }, 50);
+        }
+      }
+    };
+
+    // iframe内のフォーカス管理
+    const handleIframeFocusIn = () => {
+      lastFocusedElementRef.current = 'iframe';
+    };
+
+    const handleParentFocusIn = () => {
+      const editorContainer = document.querySelector('[data-frontend-visual-editor="true"]');
+      if (editorContainer?.contains(document.activeElement)) {
+        lastFocusedElementRef.current = 'parent';
+      }
+    };
+
+    // イベントリスナーを登録
+    document.addEventListener('focusout', handleFocusOut, true);
+    document.addEventListener('click', handleClick, true);
+    document.addEventListener('focusin', handleParentFocusIn, true);
+
+    if (iframeDoc) {
+      iframeDoc.addEventListener('focusin', handleIframeFocusIn, true);
+    }
+
+    // クリーンアップ
+    return () => {
+      if (focusRecoveryTimerRef.current) {
+        clearTimeout(focusRecoveryTimerRef.current);
+      }
+      document.removeEventListener('focusout', handleFocusOut, true);
+      document.removeEventListener('click', handleClick, true);
+      document.removeEventListener('focusin', handleParentFocusIn, true);
+
+      if (iframeDoc) {
+        iframeDoc.removeEventListener('focusin', handleIframeFocusIn, true);
+      }
+    };
+  }, [iframeRef, getIframeDoc, isEditorFocused, restoreFocus]);
+
+  return {
+    restoreFocus,
+    isEditorFocused,
+    setupFocusRecovery,
+  };
+}
+
+export default useFocusManagement;

package/src/editor/hooks/useGoogleFonts.ts

@@ -0,0 +1,305 @@
+'use client';
+
+import { useState, useEffect, useCallback, useMemo } from 'react';
+
+/**
+ * Google Fontの情報
+ */
+export interface GoogleFont {
+  family: string;
+  variants: string[];
+  subsets: string[];
+  category: 'sans-serif' | 'serif' | 'display' | 'handwriting' | 'monospace';
+  /**
+   * 適用時に書き込む実際の font-family 値(デバイスフォント用)。
+   * 游ゴシックは macOS と Windows で family 名が違うため、単一名で書くと
+   * 片方のOSで外れる。スタックごと書き込んで両対応にする。
+   */
+  stack?: string;
+}
+
+/**
+ * フォントカテゴリ
+ */
+export const FONT_CATEGORIES = [
+  { value: 'all', label: 'すべて' },
+  { value: 'sans-serif', label: 'Sans Serif' },
+  { value: 'serif', label: 'Serif' },
+  { value: 'display', label: 'Display' },
+  { value: 'handwriting', label: '手書き' },
+  { value: 'monospace', label: 'Monospace' },
+] as const;
+
+export type FontCategory = typeof FONT_CATEGORIES[number]['value'];
+
+/**
+ * 人気のGoogle Fontsリスト（APIなしでも使えるフォールバック）
+ */
+const POPULAR_GOOGLE_FONTS: GoogleFont[] = [
+  { family: 'Noto Sans JP', variants: ['100', '300', '400', '500', '700', '900'], subsets: ['japanese', 'latin'], category: 'sans-serif' },
+  { family: 'Noto Serif JP', variants: ['200', '300', '400', '500', '600', '700', '900'], subsets: ['japanese', 'latin'], category: 'serif' },
+  { family: 'M PLUS 1p', variants: ['100', '300', '400', '500', '700', '800', '900'], subsets: ['japanese', 'latin'], category: 'sans-serif' },
+  { family: 'M PLUS Rounded 1c', variants: ['100', '300', '400', '500', '700', '800', '900'], subsets: ['japanese', 'latin'], category: 'sans-serif' },
+  { family: 'Kosugi Maru', variants: ['400'], subsets: ['japanese', 'latin'], category: 'sans-serif' },
+  { family: 'Kosugi', variants: ['400'], subsets: ['japanese', 'latin'], category: 'sans-serif' },
+  { family: 'Sawarabi Gothic', variants: ['400'], subsets: ['japanese', 'latin'], category: 'sans-serif' },
+  { family: 'Sawarabi Mincho', variants: ['400'], subsets: ['japanese', 'latin'], category: 'serif' },
+  { family: 'Zen Kaku Gothic New', variants: ['300', '400', '500', '700', '900'], subsets: ['japanese', 'latin'], category: 'sans-serif' },
+  { family: 'Zen Maru Gothic', variants: ['300', '400', '500', '700', '900'], subsets: ['japanese', 'latin'], category: 'sans-serif' },
+  { family: 'Shippori Mincho', variants: ['400', '500', '600', '700', '800'], subsets: ['japanese', 'latin'], category: 'serif' },
+  { family: 'BIZ UDGothic', variants: ['400', '700'], subsets: ['japanese', 'latin'], category: 'sans-serif' },
+  { family: 'BIZ UDMincho', variants: ['400', '700'], subsets: ['japanese', 'latin'], category: 'serif' },
+  { family: 'Roboto', variants: ['100', '300', '400', '500', '700', '900'], subsets: ['latin'], category: 'sans-serif' },
+  { family: 'Open Sans', variants: ['300', '400', '500', '600', '700', '800'], subsets: ['latin'], category: 'sans-serif' },
+  { family: 'Lato', variants: ['100', '300', '400', '700', '900'], subsets: ['latin'], category: 'sans-serif' },
+  { family: 'Montserrat', variants: ['100', '200', '300', '400', '500', '600', '700', '800', '900'], subsets: ['latin'], category: 'sans-serif' },
+  { family: 'Poppins', variants: ['100', '200', '300', '400', '500', '600', '700', '800', '900'], subsets: ['latin'], category: 'sans-serif' },
+  { family: 'Inter', variants: ['100', '200', '300', '400', '500', '600', '700', '800', '900'], subsets: ['latin'], category: 'sans-serif' },
+  { family: 'Oswald', variants: ['200', '300', '400', '500', '600', '700'], subsets: ['latin'], category: 'sans-serif' },
+  { family: 'Raleway', variants: ['100', '200', '300', '400', '500', '600', '700', '800', '900'], subsets: ['latin'], category: 'sans-serif' },
+  { family: 'Playfair Display', variants: ['400', '500', '600', '700', '800', '900'], subsets: ['latin'], category: 'serif' },
+  { family: 'Merriweather', variants: ['300', '400', '700', '900'], subsets: ['latin'], category: 'serif' },
+  { family: 'Lora', variants: ['400', '500', '600', '700'], subsets: ['latin'], category: 'serif' },
+  { family: 'PT Serif', variants: ['400', '700'], subsets: ['latin'], category: 'serif' },
+  { family: 'Source Code Pro', variants: ['200', '300', '400', '500', '600', '700', '800', '900'], subsets: ['latin'], category: 'monospace' },
+  { family: 'Fira Code', variants: ['300', '400', '500', '600', '700'], subsets: ['latin'], category: 'monospace' },
+  { family: 'JetBrains Mono', variants: ['100', '200', '300', '400', '500', '600', '700', '800'], subsets: ['latin'], category: 'monospace' },
+  { family: 'Dancing Script', variants: ['400', '500', '600', '700'], subsets: ['latin'], category: 'handwriting' },
+  { family: 'Pacifico', variants: ['400'], subsets: ['latin'], category: 'handwriting' },
+  { family: 'Caveat', variants: ['400', '500', '600', '700'], subsets: ['latin'], category: 'handwriting' },
+  { family: 'Bebas Neue', variants: ['400'], subsets: ['latin'], category: 'display' },
+  { family: 'Anton', variants: ['400'], subsets: ['latin'], category: 'sans-serif' },
+  { family: 'Abril Fatface', variants: ['400'], subsets: ['latin'], category: 'display' },
+];
+
+/**
+ * システムフォント
+ */
+const SYSTEM_FONTS: GoogleFont[] = [
+  // 日本語のデバイスフォント。読み込み不要で即座に効き、書き出したPPTX(游ゴシック)とも揃う
+  {
+    family: '游ゴシック',
+    variants: ['400', '500', '700'],
+    subsets: ['japanese'],
+    category: 'sans-serif',
+    stack: '"Yu Gothic Medium", "游ゴシック Medium", YuGothic, "游ゴシック体", "Yu Gothic", "游ゴシック", sans-serif',
+  },
+  {
+    family: '游明朝',
+    variants: ['400', '500', '700'],
+    subsets: ['japanese'],
+    category: 'serif',
+    stack: '"Yu Mincho", "游明朝", YuMincho, "游明朝体", serif',
+  },
+  {
+    family: 'ヒラギノ角ゴシック',
+    variants: ['400', '600'],
+    subsets: ['japanese'],
+    category: 'sans-serif',
+    stack: '"Hiragino Kaku Gothic ProN", "Hiragino Sans", sans-serif',
+  },
+  {
+    family: 'ヒラギノ明朝',
+    variants: ['400', '600'],
+    subsets: ['japanese'],
+    category: 'serif',
+    stack: '"Hiragino Mincho ProN", serif',
+  },
+  {
+    family: 'メイリオ',
+    variants: ['400', '700'],
+    subsets: ['japanese'],
+    category: 'sans-serif',
+    stack: 'Meiryo, sans-serif',
+  },
+  { family: 'Arial', variants: ['400', '700'], subsets: ['latin'], category: 'sans-serif' },
+  { family: 'Helvetica', variants: ['400', '700'], subsets: ['latin'], category: 'sans-serif' },
+  { family: 'Georgia', variants: ['400', '700'], subsets: ['latin'], category: 'serif' },
+  { family: 'Times New Roman', variants: ['400', '700'], subsets: ['latin'], category: 'serif' },
+  { family: 'Verdana', variants: ['400', '700'], subsets: ['latin'], category: 'sans-serif' },
+  { family: 'Courier New', variants: ['400', '700'], subsets: ['latin'], category: 'monospace' },
+  { family: 'system-ui', variants: ['400', '700'], subsets: ['latin'], category: 'sans-serif' },
+];
+
+// ローカルストレージのキー
+const FONTS_CACHE_KEY = 'google-fonts-cache';
+const FONTS_CACHE_EXPIRY_KEY = 'google-fonts-cache-expiry';
+const CACHE_DURATION = 7 * 24 * 60 * 60 * 1000; // 7日間
+
+/**
+ * Google Fontsを取得・管理するhook
+ */
+export function useGoogleFonts() {
+  const [fonts, setFonts] = useState<GoogleFont[]>([...SYSTEM_FONTS, ...POPULAR_GOOGLE_FONTS]);
+  const [isLoading, setIsLoading] = useState(false);
+  const [error, setError] = useState<string | null>(null);
+  const [loadedFonts, setLoadedFonts] = useState<Set<string>>(new Set());
+
+  // Google Fonts APIからフォントリストを取得
+  const fetchGoogleFonts = useCallback(async () => {
+    // キャッシュをチェック
+    try {
+      const cachedFonts = localStorage.getItem(FONTS_CACHE_KEY);
+      const cacheExpiry = localStorage.getItem(FONTS_CACHE_EXPIRY_KEY);
+
+      if (cachedFonts && cacheExpiry && Date.now() < parseInt(cacheExpiry, 10)) {
+        const parsed = JSON.parse(cachedFonts) as GoogleFont[];
+        setFonts([...SYSTEM_FONTS, ...parsed]);
+        return;
+      }
+    } catch {
+      // キャッシュ読み込みエラーは無視
+    }
+
+    setIsLoading(true);
+    setError(null);
+
+    try {
+      // Google Fonts APIキーを環境変数から取得（オプション）
+      // [移植時の修正] Vite には process.env が無い。
+      // 未設定なら取得をスキップする(以前は毎回 ReferenceError を投げていた)
+      // [パッケージ化での変更] Next/Vite どちらでも読める形にする
+      const apiKey =
+        (typeof process !== 'undefined' ? process.env?.NEXT_PUBLIC_GOOGLE_FONTS_API_KEY : undefined) ??
+        undefined;
+
+      // APIキーがある場合は直接Google Fonts APIを使用
+      // ない場合は内部APIエンドポイント経由で取得
+      const apiUrl = apiKey
+        ? `https://www.googleapis.com/webfonts/v1/webfonts?key=${apiKey}&sort=popularity`
+        : '/api/google-fonts';
+
+      const response = await fetch(apiUrl);
+
+      if (!response.ok) {
+        throw new Error('Failed to fetch Google Fonts');
+      }
+
+      const data = await response.json();
+
+      // APIエラーまたは空の場合はフォールバック
+      if (data.error || !data.items || data.items.length === 0) {
+        console.log('[useGoogleFonts] API returned empty, using popular fonts');
+        setFonts([...SYSTEM_FONTS, ...POPULAR_GOOGLE_FONTS]);
+        return;
+      }
+
+      const googleFonts: GoogleFont[] = data.items.map((item: any) => ({
+        family: item.family,
+        variants: item.variants,
+        subsets: item.subsets,
+        category: item.category,
+      }));
+
+      // キャッシュに保存
+      try {
+        localStorage.setItem(FONTS_CACHE_KEY, JSON.stringify(googleFonts));
+        localStorage.setItem(FONTS_CACHE_EXPIRY_KEY, String(Date.now() + CACHE_DURATION));
+      } catch {
+        // ストレージが一杯の場合は無視
+      }
+
+      setFonts([...SYSTEM_FONTS, ...googleFonts]);
+    } catch (err) {
+      console.error('[useGoogleFonts] Error fetching fonts:', err);
+      setError(err instanceof Error ? err.message : 'Unknown error');
+      // エラー時は人気フォントを使用
+      setFonts([...SYSTEM_FONTS, ...POPULAR_GOOGLE_FONTS]);
+    } finally {
+      setIsLoading(false);
+    }
+  }, []);
+
+  // 初回ロード
+  useEffect(() => {
+    fetchGoogleFonts();
+  }, [fetchGoogleFonts]);
+
+  /**
+   * フォントをiframe内にロードする
+   */
+  const loadFontInIframe = useCallback((
+    fontFamily: string,
+    iframeDoc: Document,
+    weights: string[] = ['400', '700']
+  ) => {
+    // システムフォントはロード不要
+    const isSystemFont = SYSTEM_FONTS.some(f => f.family === fontFamily);
+    if (isSystemFont) return;
+
+    // 既にロード済みの場合はスキップ
+    const fontKey = `${fontFamily}-${weights.join(',')}`;
+    if (loadedFonts.has(fontKey)) return;
+
+    // linkタグが既に存在するかチェック
+    const existingLink = iframeDoc.querySelector(`link[data-font-family="${fontFamily}"]`);
+    if (existingLink) return;
+
+    // Google Fonts URLを生成
+    const encodedFamily = encodeURIComponent(fontFamily);
+    const weightsParam = weights.join(';');
+    const url = `https://fonts.googleapis.com/css2?family=${encodedFamily}:wght@${weightsParam}&display=swap`;
+
+    // linkタグを作成してheadに追加
+    const link = iframeDoc.createElement('link');
+    link.rel = 'stylesheet';
+    link.href = url;
+    link.dataset.fontFamily = fontFamily;
+    iframeDoc.head.appendChild(link);
+
+    // ロード済みセットに追加
+    setLoadedFonts(prev => new Set(prev).add(fontKey));
+
+    console.log(`[useGoogleFonts] Loaded font: ${fontFamily}`);
+  }, [loadedFonts]);
+
+  /**
+   * フォントのプレビュー用CSSを取得
+   */
+  const getFontPreviewStyle = useCallback((fontFamily: string): React.CSSProperties => {
+    // スタック(カンマ入り)やデバイスフォントの表示名はそのまま/変換して使う。
+    // 二重に引用すると `""Yu Gothic", sans-serif"` のような壊れた値になる
+    if (fontFamily.includes(',')) return { fontFamily };
+    const sys = SYSTEM_FONTS.find((f) => f.family === fontFamily);
+    if (sys?.stack) return { fontFamily: sys.stack };
+    return { fontFamily: `"${fontFamily}", sans-serif` };
+  }, []);
+
+  return {
+    fonts,
+    isLoading,
+    error,
+    loadFontInIframe,
+    getFontPreviewStyle,
+    systemFonts: SYSTEM_FONTS,
+    popularFonts: POPULAR_GOOGLE_FONTS,
+  };
+}
+
+/**
+ * フォントをフィルタリングするhook
+ */
+export function useFilteredFonts(
+  fonts: GoogleFont[],
+  searchQuery: string,
+  category: FontCategory
+) {
+  return useMemo(() => {
+    let filtered = fonts;
+
+    // カテゴリフィルター
+    if (category !== 'all') {
+      filtered = filtered.filter(f => f.category === category);
+    }
+
+    // 検索フィルター
+    if (searchQuery.trim()) {
+      const query = searchQuery.toLowerCase();
+      filtered = filtered.filter(f =>
+        f.family.toLowerCase().includes(query)
+      );
+    }
+
+    return filtered;
+  }, [fonts, searchQuery, category]);
+}