@growgroup/visual-editor 0.3.1 → 0.4.1

package/src/editor/hooks/useComponentEditMode.ts

@@ -7,6 +7,7 @@ import { buildDomTree } from '../utils/dom-utils';
 import { applyLockInside, detachPart, partInfoOf, unlockPartDescendants } from '../parts';
 import { toast } from 'sonner';
 import type { MasterComponent, ComponentInstance } from '../../types/editor-components';
+import { debugLog } from '../utils/debug';
 
 interface UseComponentEditModeProps {
   contentId?: string;
@@ -201,7 +202,7 @@ export function useComponentEditMode({
 
     try {
       // Debug: Log the original element
-      console.log('[handleConfirmCreateComponent] Original element:', {
+      debugLog('[handleConfirmCreateComponent] Original element:', {
         tagName: element.tagName,
         className: element.className,
         innerHTML: element.innerHTML.substring(0, 200),
@@ -212,7 +213,7 @@ export function useComponentEditMode({
 
       // Create the master component
       const component = createMasterComponent(element, newComponentName.trim(), newComponentCategory || 'content');
-      console.log('[handleConfirmCreateComponent] Created component:', {
+      debugLog('[handleConfirmCreateComponent] Created component:', {
         id: component.id,
         name: component.name,
         variantsCount: component.variants.length,
@@ -248,7 +249,7 @@ export function useComponentEditMode({
         { x: positionX, y: positionY }  // initialPosition
       );
       if (instance) {
-        console.log('[handleConfirmCreateComponent] Created instance:', {
+        debugLog('[handleConfirmCreateComponent] Created instance:', {
           id: instance.id,
           domElementId: instance.domElementId,
           variantId: instance.variantId,
@@ -259,7 +260,7 @@ export function useComponentEditMode({
         const { renderInstance } = await import('../utils/component-renderer');
         const instanceElement = renderInstance(component, instance, iframeDoc);
 
-        console.log('[handleConfirmCreateComponent] Rendered instance element:', {
+        debugLog('[handleConfirmCreateComponent] Rendered instance element:', {
           tagName: instanceElement.tagName,
           className: instanceElement.className,
           innerHTML: instanceElement.innerHTML.substring(0, 200),
@@ -281,7 +282,7 @@ export function useComponentEditMode({
         // Update history
         notifyIframeChange(true);
 
-        console.log('[handleConfirmCreateComponent] Replaced element with instance:', instance.id);
+        debugLog('[handleConfirmCreateComponent] Replaced element with instance:', instance.id);
       }
 
       setCreateComponentDialogOpen(false);
@@ -349,11 +350,11 @@ export function useComponentEditMode({
       originalPageHtmlRef.current = artboard.innerHTML;
 
       // DEBUG: Log what instances are being saved
-      console.log('[enterComponentEditMode] ========== SAVING PAGE HTML ==========');
+      debugLog('[enterComponentEditMode] ========== SAVING PAGE HTML ==========');
       const instancesToSave = artboard.querySelectorAll('[data-component-instance]');
-      console.log('[enterComponentEditMode] Saving', instancesToSave.length, 'instances');
+      debugLog('[enterComponentEditMode] Saving', instancesToSave.length, 'instances');
       instancesToSave.forEach((inst, idx) => {
-        console.log(`[enterComponentEditMode] Instance ${idx} text being saved:`, inst.textContent?.substring(0, 100));
+        debugLog(`[enterComponentEditMode] Instance ${idx} text being saved:`, inst.textContent?.substring(0, 100));
       });
     }
 
@@ -458,16 +459,16 @@ export function useComponentEditMode({
     const artboard = iframeDoc.getElementById('artboard');
 
     // DEBUG: Log what we're about to restore
-    console.log('[exitComponentEditMode] ========== HTML RESTORE DEBUG ==========');
-    console.log('[exitComponentEditMode] originalPageHtmlRef exists:', originalPageHtmlRef.current !== null);
+    debugLog('[exitComponentEditMode] ========== HTML RESTORE DEBUG ==========');
+    debugLog('[exitComponentEditMode] originalPageHtmlRef exists:', originalPageHtmlRef.current !== null);
     if (originalPageHtmlRef.current) {
       // Extract instance text from saved HTML for debugging
       const tempDiv = document.createElement('div');
       tempDiv.innerHTML = originalPageHtmlRef.current;
       const savedInstances = tempDiv.querySelectorAll('[data-component-instance]');
-      console.log('[exitComponentEditMode] Saved HTML has', savedInstances.length, 'instances');
+      debugLog('[exitComponentEditMode] Saved HTML has', savedInstances.length, 'instances');
       savedInstances.forEach((inst, idx) => {
-        console.log(`[exitComponentEditMode] Saved instance ${idx} text:`, inst.textContent?.substring(0, 100));
+        debugLog(`[exitComponentEditMode] Saved instance ${idx} text:`, inst.textContent?.substring(0, 100));
       });
     }
 
@@ -477,9 +478,9 @@ export function useComponentEditMode({
 
       // DEBUG: Log what's in the DOM after restore
       const restoredInstances = artboard.querySelectorAll('[data-component-instance]');
-      console.log('[exitComponentEditMode] After restore, DOM has', restoredInstances.length, 'instances');
+      debugLog('[exitComponentEditMode] After restore, DOM has', restoredInstances.length, 'instances');
       restoredInstances.forEach((inst, idx) => {
-        console.log(`[exitComponentEditMode] Restored instance ${idx} text:`, inst.textContent?.substring(0, 100));
+        debugLog(`[exitComponentEditMode] Restored instance ${idx} text:`, inst.textContent?.substring(0, 100));
       });
     }
 
@@ -489,8 +490,8 @@ export function useComponentEditMode({
       const instancesArray = Array.from(componentInstances.values());
 
       // Debug: Log the updated master and instances
-      console.log('[exitComponentEditMode] ========== SYNC DEBUG ==========');
-      console.log('[exitComponentEditMode] Updated master:', {
+      debugLog('[exitComponentEditMode] ========== SYNC DEBUG ==========');
+      debugLog('[exitComponentEditMode] Updated master:', {
         id: updatedMaster.id,
         name: updatedMaster.name,
         variantsCount: updatedMaster.variants.length,
@@ -499,7 +500,7 @@ export function useComponentEditMode({
       // Log master's text content
       const defaultVariant = updatedMaster.variants.find(v => v.id === updatedMaster.defaultVariantId);
       if (defaultVariant) {
-        console.log('[exitComponentEditMode] Master rootElement:', {
+        debugLog('[exitComponentEditMode] Master rootElement:', {
           tagName: defaultVariant.rootElement.tagName,
           textContent: defaultVariant.rootElement.textContent?.substring(0, 100),
           innerHTML: defaultVariant.rootElement.innerHTML?.substring(0, 100),
@@ -507,7 +508,7 @@ export function useComponentEditMode({
         });
       }
 
-      console.log('[exitComponentEditMode] Instances to sync:', instancesArray.map(i => ({
+      debugLog('[exitComponentEditMode] Instances to sync:', instancesArray.map(i => ({
         id: i.id,
         masterComponentId: i.masterComponentId,
         domElementId: i.domElementId,
@@ -519,9 +520,9 @@ export function useComponentEditMode({
       const artboardForSync = iframeDoc.getElementById('artboard');
       if (artboardForSync) {
         const instanceElements = artboardForSync.querySelectorAll(`[data-component-master="${updatedMaster.id}"]`);
-        console.log('[exitComponentEditMode] Instance elements in DOM:', instanceElements.length);
+        debugLog('[exitComponentEditMode] Instance elements in DOM:', instanceElements.length);
         instanceElements.forEach((el, i) => {
-          console.log(`[exitComponentEditMode] DOM instance ${i}:`, {
+          debugLog(`[exitComponentEditMode] DOM instance ${i}:`, {
             instanceId: el.getAttribute('data-component-instance'),
             masterId: el.getAttribute('data-component-master'),
             elementId: el.getAttribute('data-element-id'),
@@ -532,11 +533,11 @@ export function useComponentEditMode({
 
       // Propagate master changes to all instances in the DOM
       const syncResult = propagateMasterChanges(updatedMaster, instancesArray, iframeDoc);
-      console.log('[exitComponentEditMode] Synced instances:', syncResult);
+      debugLog('[exitComponentEditMode] Synced instances:', syncResult);
 
       // Persist updated instances with their newly detected overrides
       if (syncResult.updatedInstances.length > 0) {
-        console.log('[exitComponentEditMode] Persisting updated instances with overrides:',
+        debugLog('[exitComponentEditMode] Persisting updated instances with overrides:',
           syncResult.updatedInstances.map(i => ({
             id: i.id,
             overridesCount: i.overrides.length,
@@ -576,7 +577,7 @@ export function useComponentEditMode({
   // Go to main component - enters component edit mode to directly edit the master in canvas
   const handleGoToMainComponent = useCallback(() => {
     if (!selectedElementInstance) return;
-    console.log('Go to main component:', selectedElementInstance.masterComponentId);
+    debugLog('Go to main component:', selectedElementInstance.masterComponentId);
     enterComponentEditMode(selectedElementInstance.masterComponentId);
   }, [selectedElementInstance, enterComponentEditMode]);
 
@@ -610,7 +611,7 @@ export function useComponentEditMode({
         }
       }
 
-      console.log('Detached instance:', selectedElementInstance.id);
+      debugLog('Detached instance:', selectedElementInstance.id);
       closeContextMenu();
       toast.success('インスタンスを解除しました');
     } catch (error) {
@@ -650,7 +651,7 @@ export function useComponentEditMode({
         }
       }
 
-      console.log('Reset overrides for instance:', selectedElementInstance.id);
+      debugLog('Reset overrides for instance:', selectedElementInstance.id);
       closeContextMenu();
       toast.success('オーバーライドをリセットしました');
     } catch (error) {
@@ -662,7 +663,7 @@ export function useComponentEditMode({
   // Push overrides to main (placeholder - requires more complex implementation)
   const handlePushOverridesToMain = useCallback(() => {
     if (!selectedElementInstance) return;
-    console.log('Push overrides to main - not yet implemented');
+    debugLog('Push overrides to main - not yet implemented');
     closeContextMenu();
     toast.info('この機能は現在開発中です');
   }, [selectedElementInstance, closeContextMenu]);

package/src/editor/hooks/useEditorMessages.ts

@@ -9,6 +9,7 @@ import { useEditorContext } from '../EditorContext';
 import { buildDomTree, updateSelectionBox } from '../utils/dom-utils';
 import { extractElementInfo } from '../utils/style-utils';
 import type { DOMTreeNode } from '../types';
+import { debugLog } from '../utils/debug';
 
 /**
  * postMessageの受信と処理を行うHook
@@ -55,7 +56,7 @@ export function useEditorMessages() {
 
       // DOMツリー更新
       if (event.data?.type === 'DOM_TREE_UPDATED') {
-        console.log('[EditorMessages] DOM_TREE_UPDATED received:', event.data.tree?.length, 'nodes');
+        debugLog('[EditorMessages] DOM_TREE_UPDATED received:', event.data.tree?.length, 'nodes');
         if (event.data.tree && Array.isArray(event.data.tree)) {
           setDomTree(event.data.tree);
           // 初期状態で最初のレベルを展開
@@ -71,7 +72,7 @@ export function useEditorMessages() {
         const iframeDoc = getIframeDoc();
         if (iframeDoc) {
           const tree = buildDomTree(iframeDoc);
-          console.log('[EditorMessages] Rebuilt DOM tree:', tree.length, 'nodes');
+          debugLog('[EditorMessages] Rebuilt DOM tree:', tree.length, 'nodes');
           setDomTree(tree);
         }
       }

package/src/editor/hooks/useElementActions.ts

@@ -30,6 +30,7 @@ import {
 } from '../utils/viewport-utils';
 import type { SerializedElement, BoundingBox, StyleClipboard, ClipboardData } from '../types';
 import type { globalLastUsedStylesRef } from '../contexts/EditorRefsContext';
+import { debugLog } from '../utils/debug';
 
 /**
  * 要素の種類を判定（shape / text / line）
@@ -202,7 +203,7 @@ function captureLastUsedStyles(
   lastUsedStylesRef: typeof globalLastUsedStylesRef
 ) {
   const category = getElementCategory(el);
-  console.log('[captureLastUsedStyles] Category:', category, 'Styles:', styles);
+  debugLog('[captureLastUsedStyles] Category:', category, 'Styles:', styles);
 
   if (category === 'shape') {
     const shapeStyles: Partial<typeof lastUsedStylesRef.current.shape> = {};
@@ -214,7 +215,7 @@ function captureLastUsedStyles(
     if (styles.opacity) shapeStyles.opacity = styles.opacity;
     if (Object.keys(shapeStyles).length > 0) {
       lastUsedStylesRef.updateShape(shapeStyles);
-      console.log('[captureLastUsedStyles] Updated shape styles:', shapeStyles);
+      debugLog('[captureLastUsedStyles] Updated shape styles:', shapeStyles);
     }
   } else if (category === 'text') {
     const textStyles: Partial<typeof lastUsedStylesRef.current.text> = {};
@@ -227,7 +228,7 @@ function captureLastUsedStyles(
     if (styles.textAlign) textStyles.textAlign = styles.textAlign;
     if (Object.keys(textStyles).length > 0) {
       lastUsedStylesRef.updateText(textStyles);
-      console.log('[captureLastUsedStyles] Updated text styles:', textStyles);
+      debugLog('[captureLastUsedStyles] Updated text styles:', textStyles);
     }
   } else if (category === 'line') {
     const lineStyles: Partial<typeof lastUsedStylesRef.current.line> = {};
@@ -235,7 +236,7 @@ function captureLastUsedStyles(
     if (styles.strokeWidth) lineStyles.strokeWidth = styles.strokeWidth;
     if (Object.keys(lineStyles).length > 0) {
       lastUsedStylesRef.updateLine(lineStyles);
-      console.log('[captureLastUsedStyles] Updated line styles:', lineStyles);
+      debugLog('[captureLastUsedStyles] Updated line styles:', lineStyles);
     }
   }
 }
@@ -533,11 +534,11 @@ export function useElementActions() {
 
     // 複数選択されている場合は全て更新
     if (selectedElementIds.length > 0) {
-      console.log('[DEBUG useElementActions] Applying styles to', selectedElementIds.length, 'elements');
+      debugLog('[DEBUG useElementActions] Applying styles to', selectedElementIds.length, 'elements');
       selectedElementIds.forEach(id => {
         const el = getIframeElement(iframeDoc, id);
         if (el) {
-          console.log('[DEBUG useElementActions] Applying to element:', id);
+          debugLog('[DEBUG useElementActions] Applying to element:', id);
           applyStylesWithViewportHandling(el, styles);
         }
       });
@@ -699,7 +700,7 @@ export function useElementActions() {
             if (newInstance) {
               // 新しいインスタンスIDで属性を更新
               clone.setAttribute('data-component-instance', newInstance.id);
-              console.log('[duplicateElement] Created new component instance:', newInstance.id, 'from:', instanceId);
+              debugLog('[duplicateElement] Created new component instance:', newInstance.id, 'from:', instanceId);
             }
           } catch (error) {
             // インスタンス作成に失敗した場合、コンポーネント属性を削除（通常要素として複製）
@@ -1159,7 +1160,7 @@ export function useElementActions() {
     const convertChildrenToAbsolute = async () => {
       // オートレイアウトモードの場合は変換をスキップ
       if (layoutMode === 'auto') {
-        console.log('[groupElements] Auto layout mode - skipping absolute positioning conversion');
+        debugLog('[groupElements] Auto layout mode - skipping absolute positioning conversion');
         return;
       }
 
@@ -1175,7 +1176,7 @@ export function useElementActions() {
           convertSingleElementToAbsolute(iframeDoc, el);
         });
 
-        console.log('[groupElements] Converted', elements.length, 'child elements to absolute positioning');
+        debugLog('[groupElements] Converted', elements.length, 'child elements to absolute positioning');
         notifyIframeChange();
       } catch (err) {
         console.error('[groupElements] Error converting children:', err);
@@ -1206,7 +1207,7 @@ export function useElementActions() {
 
     // グループ解除可能かどうかを判定（詳細な条件をチェック）
     if (!canUngroup(parent)) {
-      console.log('[ungroupElements] Element cannot be ungrouped:', parent.tagName);
+      debugLog('[ungroupElements] Element cannot be ungrouped:', parent.tagName);
       return;
     }
 
@@ -1226,7 +1227,7 @@ export function useElementActions() {
     });
 
     if (children.length === 0) {
-      console.log('[ungroupElements] No editable children to ungroup');
+      debugLog('[ungroupElements] No editable children to ungroup');
       return;
     }
 
@@ -1307,7 +1308,7 @@ export function useElementActions() {
     const finalizePositioning = async () => {
       // オートレイアウトモードの場合は変換をスキップ
       if (layoutMode === 'auto') {
-        console.log('[ungroupElements] Auto layout mode - skipping absolute positioning conversion');
+        debugLog('[ungroupElements] Auto layout mode - skipping absolute positioning conversion');
         return;
       }
 
@@ -1322,7 +1323,7 @@ export function useElementActions() {
           convertSingleElementToAbsolute(iframeDoc, el);
         });
 
-        console.log('[ungroupElements] Converted', childElements.length, 'elements to absolute positioning');
+        debugLog('[ungroupElements] Converted', childElements.length, 'elements to absolute positioning');
         notifyIframeChange();
       } catch (err) {
         console.error('[ungroupElements] Error finalizing positions:', err);
@@ -1335,7 +1336,7 @@ export function useElementActions() {
     setSelectedElement(null);
     notifyIframeChange();
 
-    console.log('[ungroupElements] Ungrouped', childIds.length, 'elements from', selectedElement.id);
+    debugLog('[ungroupElements] Ungrouped', childIds.length, 'elements from', selectedElement.id);
   }, [selectedElement, getIframeDoc, setSelectedElementIds, setSelectedElement, notifyIframeChange]);
 
   /**
@@ -1525,10 +1526,10 @@ export function useElementActions() {
    * Ctrl/Cmd + Alt + C
    */
   const copyStyle = useCallback(() => {
-    console.log('[copyStyle] Called, selectedElement:', selectedElement?.id);
+    debugLog('[copyStyle] Called, selectedElement:', selectedElement?.id);
     const iframeDoc = getIframeDoc();
     if (!iframeDoc || !selectedElement) {
-      console.log('[copyStyle] No element selected or no iframeDoc');
+      debugLog('[copyStyle] No element selected or no iframeDoc');
       return false;
     }
 
@@ -1600,8 +1601,8 @@ export function useElementActions() {
     ) as StyleClipboard;
 
     styleClipboardRef.current = cleanedStyle;
-    console.log('[copyStyle] Style copied:', cleanedStyle);
-    console.log('[copyStyle] Clipboard after setting:', styleClipboardRef.current);
+    debugLog('[copyStyle] Style copied:', cleanedStyle);
+    debugLog('[copyStyle] Clipboard after setting:', styleClipboardRef.current);
     return true;
   }, [selectedElement, getIframeDoc, styleClipboardRef]);
 
@@ -1610,17 +1611,17 @@ export function useElementActions() {
    * Ctrl/Cmd + Alt + V
    */
   const pasteStyle = useCallback(() => {
-    console.log('[pasteStyle] Called');
-    console.log('[pasteStyle] styleClipboardRef.current:', styleClipboardRef.current);
+    debugLog('[pasteStyle] Called');
+    debugLog('[pasteStyle] styleClipboardRef.current:', styleClipboardRef.current);
     const iframeDoc = getIframeDoc();
     if (!iframeDoc) {
-      console.log('[pasteStyle] No iframeDoc');
+      debugLog('[pasteStyle] No iframeDoc');
       return false;
     }
 
     const copiedStyle = styleClipboardRef.current;
     if (!copiedStyle || Object.keys(copiedStyle).length === 0) {
-      console.log('[pasteStyle] No style in clipboard');
+      debugLog('[pasteStyle] No style in clipboard');
       return false;
     }
 
@@ -1630,7 +1631,7 @@ export function useElementActions() {
       : selectedElement ? [selectedElement.id] : [];
 
     if (targetIds.length === 0) {
-      console.log('[pasteStyle] No element selected');
+      debugLog('[pasteStyle] No element selected');
       return false;
     }
 
@@ -1707,7 +1708,7 @@ export function useElementActions() {
       }
     }
 
-    console.log('[pasteStyle] Style pasted to', targetIds.length, 'element(s)');
+    debugLog('[pasteStyle] Style pasted to', targetIds.length, 'element(s)');
     return true;
   }, [selectedElement, selectedElementIds, getIframeDoc, styleClipboardRef, notifyIframeChange, setSelectedElement]);
 
@@ -1754,13 +1755,13 @@ export function useElementActions() {
       return { success: false, error: 'Selected elements not found in document' };
     }
 
-    console.log('[copyToFigma] Copying', elements.length, 'element(s) to Figma format');
+    debugLog('[copyToFigma] Copying', elements.length, 'element(s) to Figma format');
 
     try {
       const result = await copyElementsToFigma(elements);
 
       if (result.success) {
-        console.log('[copyToFigma] Successfully copied', result.nodeCount, 'nodes to clipboard');
+        debugLog('[copyToFigma] Successfully copied', result.nodeCount, 'nodes to clipboard');
         return { success: true, nodeCount: result.nodeCount };
       } else {
         console.error('[copyToFigma] Failed:', result.error);

package/src/editor/hooks/useElementSelection.ts

@@ -24,6 +24,7 @@ import {
 import { extractElementInfo } from "../utils/style-utils";
 import { MARQUEE_DRAG_THRESHOLD } from "../constants";
 import type { DragState, ResizeState, MarqueeState } from "../types";
+import { debugLog } from '../utils/debug';
 
 /**
  * mousedown で保留し、mouseup で意味を確定するクリック情報
@@ -453,7 +454,7 @@ export function useElementSelection(
 
       // 真のインライン要素（テキストフロー内）はドラッグしない
       if (isTrueInlineInTextFlow(element, iframeDoc)) {
-        console.log(
+        debugLog(
           "[startElementDrag] Skipping true inline element:",
           element.tagName,
           element.getAttribute("data-element-id"),
@@ -918,14 +919,15 @@ export function useElementSelection(
           if (editingElement.classList.contains("selected")) {
             updateSelectionBox(iframeDoc, editingElement);
           }
-          console.log("[Canvas] Text editing exited via click elsewhere");
+          debugLog("[Canvas] Text editing exited via click elsewhere");
         }
 
         // 描画モード・テキストモードでは選択しない
         const bodyClasses = iframeDoc.body.classList;
         if (
           bodyClasses.contains("draw-mode") ||
-          bodyClasses.contains("text-mode")
+          bodyClasses.contains("text-mode") ||
+          bodyClasses.contains("comment-mode")
         )
           return;
 
@@ -1030,7 +1032,7 @@ export function useElementSelection(
                 centerY,
               };
               iframeDoc.body.classList.add("rotating");
-              console.log("[Canvas] Rotation started:", handleType);
+              debugLog("[Canvas] Rotation started:", handleType);
             } else if (handleType === "radius") {
               // 角丸ハンドル
               const borderRadius =
@@ -1057,7 +1059,7 @@ export function useElementSelection(
                 centerX: 0,
                 centerY: 0,
               };
-              console.log("[Canvas] Border radius resize started");
+              debugLog("[Canvas] Border radius resize started");
             } else {
               // 通常のリサイズハンドル
               resizeStateRef.current = {
@@ -1082,7 +1084,7 @@ export function useElementSelection(
                 centerX: 0,
                 centerY: 0,
               };
-              console.log("[Canvas] Resize started:", handleType);
+              debugLog("[Canvas] Resize started:", handleType);
             }
           }
           return;
@@ -1129,7 +1131,7 @@ export function useElementSelection(
                     e,
                     iframeDoc,
                   );
-                  console.log(
+                  debugLog(
                     "[Canvas] Multi-element drag via selection-box:",
                     existingIds,
                     started ? "started" : "blocked",
@@ -1138,7 +1140,7 @@ export function useElementSelection(
               } else {
                 // 単一選択時：対象要素をドラッグ
                 startElementDrag(targetEl, e, iframeDoc);
-                console.log(
+                debugLog(
                   "[Canvas] Drag via selection-box for:",
                   forElementId,
                 );
@@ -1212,7 +1214,7 @@ export function useElementSelection(
           if (marqueeGeomRef) marqueeGeomRef.current = { ...geom };
           setMarqueeStateRef.current(geom);
           marqueeStartPendingRef.current = true;
-          console.log(
+          debugLog(
             "[Canvas] Marquee pending (blank) at",
             e.clientX,
             e.clientY,
@@ -1251,7 +1253,7 @@ export function useElementSelection(
         }
 
         if (target.getAttribute("contenteditable") === "true") {
-          console.log("[Canvas] Skip - contenteditable active");
+          debugLog("[Canvas] Skip - contenteditable active");
           return;
         }
 
@@ -1287,7 +1289,7 @@ export function useElementSelection(
               .filter((el) => el !== null);
             if (selectedElements.length > 0) {
               const started = startGroupDrag(selectedElements, e, iframeDoc);
-              console.log(
+              debugLog(
                 "[Canvas] Group drag:",
                 existingIds.length,
                 started ? "started" : "blocked",
@@ -1295,21 +1297,21 @@ export function useElementSelection(
             }
           } else {
             startElementDrag(target, e, iframeDoc);
-            console.log("[Canvas] Single drag start:", elementId);
+            debugLog("[Canvas] Single drag start:", elementId);
           }
           return;
         }
 
         if (e.shiftKey) {
           // 未選択 + Shift → 追加するかは mouseup で確定（ここでは動かさない）
-          console.log("[Canvas] Shift add pending:", elementId);
+          debugLog("[Canvas] Shift add pending:", elementId);
           return;
         }
 
         // 未選択 + 素クリック → その場で単独選択してドラッグ開始（モード非依存）
         selectSingle(iframeDoc, target);
         startElementDrag(target, e, iframeDoc);
-        console.log("[Canvas] Select + drag start:", elementId);
+        debugLog("[Canvas] Select + drag start:", elementId);
       };
 
       /**
@@ -1421,7 +1423,8 @@ export function useElementSelection(
         if (bodyClasses.contains("gg-cropping")) return;
         if (
           bodyClasses.contains("draw-mode") ||
-          bodyClasses.contains("text-mode")
+          bodyClasses.contains("text-mode") ||
+          bodyClasses.contains("comment-mode")
         )
           return;
 
@@ -1452,7 +1455,7 @@ export function useElementSelection(
           deepElement.classList.add("selected");
           setSelectedElementIdsRef.current([elementId]);
           enableTextEditing(deepElement);
-          console.log(
+          debugLog(
             "[Canvas] Text editing started via double-click:",
             elementId,
           );

package/src/editor/hooks/useFocusManagement.ts

@@ -7,6 +7,7 @@
 
 import { useCallback, useRef, useEffect } from 'react';
 import { useEditorContext } from '../EditorContext';
+import { debugLog } from '../utils/debug';
 
 interface UseFocusManagementReturn {
   /**
@@ -49,7 +50,7 @@ export function useFocusManagement(): UseFocusManagementReturn {
     const iframe = iframeRef.current;
     const iframeDoc = getIframeDoc();
     if (!iframeDoc) {
-      console.log('[FocusManagement] Cannot restore focus: iframe doc not available');
+      debugLog('[FocusManagement] Cannot restore focus: iframe doc not available');
       return;
     }
 
@@ -59,7 +60,7 @@ export function useFocusManagement(): UseFocusManagementReturn {
       // まずiframe要素自体にフォーカス（親ドキュメントの観点から）
       if (iframe) iframe.focus();
       editingElement.focus();
-      console.log('[FocusManagement] Restored focus to editing element');
+      debugLog('[FocusManagement] Restored focus to editing element');
       return;
     }
 
@@ -70,7 +71,7 @@ export function useFocusManagement(): UseFocusManagementReturn {
     }
     if (iframeDoc.body) {
       iframeDoc.body.focus();
-      console.log('[FocusManagement] Restored focus to iframe and body');
+      debugLog('[FocusManagement] Restored focus to iframe and body');
     }
   }, [iframeRef, getIframeDoc]);
 
@@ -139,7 +140,7 @@ export function useFocusManagement(): UseFocusManagementReturn {
           relatedTarget.closest('[data-dropdown-menu]');
 
         if (isDialogOrPopover) {
-          console.log('[FocusManagement] Focus moved to dialog/popover, allowing');
+          debugLog('[FocusManagement] Focus moved to dialog/popover, allowing');
           return;
         }
 
@@ -151,7 +152,7 @@ export function useFocusManagement(): UseFocusManagementReturn {
           relatedTarget.getAttribute('contenteditable') === 'true';
 
         if (isInputField) {
-          console.log('[FocusManagement] Focus moved to input field, allowing');
+          debugLog('[FocusManagement] Focus moved to input field, allowing');
           return;
         }
 
@@ -170,7 +171,7 @@ export function useFocusManagement(): UseFocusManagementReturn {
       focusRecoveryTimerRef.current = setTimeout(() => {
         // まだフォーカスがエディタ外にあれば復元
         if (!isEditorFocused()) {
-          console.log('[FocusManagement] Focus lost, attempting recovery');
+          debugLog('[FocusManagement] Focus lost, attempting recovery');
           restoreFocus();
         }
       }, 30); // 30msに短縮してフォーカス復元を高速化

package/src/editor/hooks/useGoogleFonts.ts

@@ -1,6 +1,7 @@
 'use client';
 
 import { useState, useEffect, useCallback, useMemo } from 'react';
+import { debugLog } from '../utils/debug';
 
 /**
  * Google Fontの情報
@@ -183,7 +184,7 @@ export function useGoogleFonts() {
 
       // APIエラーまたは空の場合はフォールバック
       if (data.error || !data.items || data.items.length === 0) {
-        console.log('[useGoogleFonts] API returned empty, using popular fonts');
+        debugLog('[useGoogleFonts] API returned empty, using popular fonts');
         setFonts([...SYSTEM_FONTS, ...POPULAR_GOOGLE_FONTS]);
         return;
       }
@@ -254,7 +255,7 @@ export function useGoogleFonts() {
     // ロード済みセットに追加
     setLoadedFonts(prev => new Set(prev).add(fontKey));
 
-    console.log(`[useGoogleFonts] Loaded font: ${fontFamily}`);
+    debugLog(`[useGoogleFonts] Loaded font: ${fontFamily}`);
   }, [loadedFonts]);
 
   /**