@growgroup/visual-editor 0.4.1 → 0.7.0

package/src/editor/constants.ts

@@ -154,6 +154,11 @@ export const EDITOR_IFRAME_STYLES = `
     opacity: 0.7;
     cursor: grabbing !important;
   }
+  /* ⌘ / Ctrl を押してリンクの上にいる間は指のカーソル(utils/link-navigation.ts が <html> に印を付け外しする) */
+  html[data-gg-link-nav],
+  html[data-gg-link-nav] * {
+    cursor: pointer !important;
+  }
   ::selection {
     background-color: rgba(13, 153, 255, 0.3);
   }
@@ -415,6 +420,25 @@ export const EDITOR_IFRAME_STYLES = `
     z-index: 40;
   }
   .selection-box.selection-in-part .part-badge { background: rgba(123, 97, 255, 0.85); }
+  /* 自由配置(gg-freelayout)の器の札。部品の札は左上なので、ぶつからないよう右上に置く */
+  .selection-box .freelayout-badge {
+    position: absolute;
+    top: calc(-44px * var(--ov));
+    right: 0;
+    padding: calc(2px * var(--ov)) calc(6px * var(--ov));
+    border-radius: calc(3px * var(--ov));
+    background: #f2994a;
+    color: #fff;
+    font-size: calc(10px * var(--ov));
+    line-height: 1.4;
+    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Hiragino Sans', 'Noto Sans JP', sans-serif;
+    white-space: nowrap;
+    pointer-events: none;
+    z-index: 40;
+  }
+  /* 自由配置の器は、選んでいなくても薄い枠で範囲が分かるようにする
+     (中の要素だけを触っているとき、どこまでが自由配置かを見失わないため) */
+  .gg-freelayout.selected { outline: calc(1px * var(--overlay-scale, 1)) dashed rgba(242, 153, 74, 0.8); outline-offset: calc(-1px * var(--overlay-scale, 1)); }
   /* 選んでいる部品のスロット(編集できる範囲)は点線。中を選んでいるときは部品の外周を薄い点線で示す */
   [data-part].selected [data-slot] { outline: calc(1px * var(--overlay-scale, 1)) dashed rgba(123, 97, 255, 0.75); outline-offset: calc(-1px * var(--overlay-scale, 1)); }
   [data-part]:not(.selected):has(.selected) { outline: calc(1px * var(--overlay-scale, 1)) dashed rgba(123, 97, 255, 0.55); outline-offset: calc(2px * var(--overlay-scale, 1)); }

package/src/editor/contexts/EditorAppearanceContext.tsx

@@ -2,15 +2,15 @@
 
 import { createContext, useContext, useEffect, useState } from 'react';
 import type { PptTheme } from '../components/ppt/PptChrome';
+import { readStorage, writeStorage } from '../utils/storage';
 
 const THEME_KEY = 'gg-editor:ppt-theme';
 export const EditorAppearanceContext = createContext<PptTheme | undefined>(undefined);
 
 export function initialEditorTheme(): PptTheme {
-  try {
-    const saved = localStorage.getItem(THEME_KEY);
-    if (saved === 'light' || saved === 'dark') return saved;
-  } catch { /* ストレージが使えなくてもOS設定で開く */ }
+  // ストレージが使えなくても(共有ドロップの opaque origin など)OS 設定で開く
+  const saved = readStorage(THEME_KEY);
+  if (saved === 'light' || saved === 'dark') return saved;
   return typeof matchMedia !== 'undefined' && matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light';
 }
 
@@ -28,7 +28,7 @@ export function useEditorTheme() {
   }, []);
   const toggleTheme = () => {
     const next = theme === 'dark' ? 'light' : 'dark';
-    try { localStorage.setItem(THEME_KEY, next); } catch { /* 今回の表示には適用する */ }
+    writeStorage(THEME_KEY, next);
     setTheme(next);
   };
   return { theme, toggleTheme };

package/src/editor/contexts/EditorHistoryContext.tsx

@@ -91,6 +91,8 @@ const EDITOR_CHROME_SELECTOR = [
   '.flex-drop-indicator',
   '.nesting-drop-indicator',
   '.auto-layout-drop-indicator',
+  // 共同編集の他人の選択枠・カーソル(io.collab があるときだけ描かれる)
+  '.gg-collab-layer',
 ].join(',');
 
 /**

package/src/editor/contexts/MultiPageCanvasContext.tsx

@@ -29,6 +29,7 @@ import React, {
   useCallback,
   useContext,
   useEffect,
+  useLayoutEffect,
   useMemo,
   useRef,
   useState,
@@ -40,6 +41,7 @@ import { useEditorView } from './EditorViewContext';
 import { SLIDE_HEIGHT, SLIDE_WIDTH, WEBPAGE_WIDTH } from '../constants';
 import type { EditorMode } from './EditorToolContext';
 import { io, type PreviewStyle } from '../../io';
+import { readStorage, writeStorage } from '../utils/storage';
 
 // ============================================================
 // 定数
@@ -206,6 +208,11 @@ export interface MultiPageCanvasContextValue {
   /** 倍率・位置。描画に使うなら useCanvasViewState() で購読する。ハンドラから読むだけなら get() */
   viewStore: CanvasViewStore;
   setCanvasOffset: (offset: { x: number; y: number }) => void;
+  /**
+   * 位置を (dx, dy) だけずらす。動いている途中のアニメーションは止めず、行き先も同じだけずらす。
+   * 容器の左端が動いた(左のパネルを出し入れした)とき、紙面を画面上の同じ位置に留める補正に使う
+   */
+  shiftView: (dx: number, dy: number) => void;
   setCanvasZoom: (zoom: number) => void;
   /** 倍率と位置を同時に決める(アニメーションも可) */
   setView: (view: { zoom: number; offset: { x: number; y: number } }, options?: { animate?: boolean }) => void;
@@ -220,6 +227,11 @@ export interface MultiPageCanvasContextValue {
   zoomToActual: () => void;
   /** 指定のフレームが画面に入っていなければ、見える位置まで寄せる(倍率は変えない) */
   revealPage: (id: string) => void;
+  /**
+   * そのページへ視点を寄せる。見えていなければ寄せ、点にしか見えない倍率ならページに合わせる
+   * (ホスト発のページ切替・共同編集のアバターのクリックで使う)
+   */
+  focusPage: (id: string) => void;
 
   // ---- ページ切替
   /**
@@ -241,6 +253,13 @@ export interface MultiPageCanvasContextValue {
   markInteracting: () => void;
   /** 見えている範囲を localStorage から復元できた(初回表示で全体表示を省く) */
   initialViewRestored: boolean;
+  /**
+   * 最初の視点を決める(1 回だけ。容器の大きさとフレームの並びが揃ってから MultiPageCanvasView が呼ぶ)。
+   * 保存した視点が編集中のページのものなら、そのフレームを保存したときと同じ画面上の位置・倍率に戻す。
+   * 別のページのもの・古い形式なら、編集中のフレームが画面に入っているときだけ位置のまま戻す。
+   * それ以外(保存が無い・入っていない)は編集中のページへ寄せる
+   */
+  applyInitialView: () => void;
   /** 定規 */
   rulersVisible: boolean;
   toggleRulers: () => void;
@@ -501,15 +520,26 @@ interface MultiPageCanvasProviderProps {
   storageKey?: string | null;
 }
 
-type PersistedView = { zoom: number; offset: { x: number; y: number }; rulers?: boolean };
+type PersistedView = {
+  zoom: number;
+  offset: { x: number; y: number };
+  rulers?: boolean;
+  /**
+   * 保存したときに編集していたページと、そのフレームの左上の画面上の位置(容器の座標)。
+   * 開き直した直後はフレームの高さを測る前で並びが保存したときと違うので、offset ではなくこれでフレームに合わせて戻す
+   */
+  anchor?: { pageId: string; x: number; y: number };
+};
 
 function readPersistedView(key: string | null | undefined): PersistedView | null {
-  if (!key || typeof localStorage === 'undefined') return null;
+  if (!key) return null;
   try {
-    const raw = localStorage.getItem(`gg-editor:canvas-view:${key}`);
+    const raw = readStorage(`gg-editor:canvas-view:${key}`);
     if (!raw) return null;
     const v = JSON.parse(raw) as PersistedView;
     if (!Number.isFinite(v.zoom) || !v.offset || !Number.isFinite(v.offset.x) || !Number.isFinite(v.offset.y)) return null;
+    const a = v.anchor;
+    if (a && (typeof a.pageId !== 'string' || !Number.isFinite(a.x) || !Number.isFinite(a.y))) delete v.anchor;
     return v;
   } catch {
     return null;
@@ -653,6 +683,8 @@ export function MultiPageCanvasProvider({ children, enabled, storageKey }: Multi
   const [rulersVisible, setRulersVisible] = useState<boolean>(persisted?.rulers ?? true);
   const rulersRef = useRef(rulersVisible);
   rulersRef.current = rulersVisible;
+  /** 最初の視点を決めたか(applyInitialView)。決める前は保存しない(戻す前の仮の視点で記憶を上書きしない) */
+  const initialViewAppliedRef = useRef(false);
 
   const setPageHeight = useCallback<MultiPageCanvasContextValue['setPageHeight']>(
     (id, height, source) => {
@@ -673,19 +705,20 @@ export function MultiPageCanvasProvider({ children, enabled, storageKey }: Multi
 
   // 見えている範囲の保存(変化が止まってから)
   useEffect(() => {
-    if (!storageKey || typeof localStorage === 'undefined') return;
+    if (!storageKey) return;
     let timer: ReturnType<typeof setTimeout> | null = null;
     const persist = () => {
       if (timer) clearTimeout(timer);
       timer = setTimeout(() => {
         timer = null;
-        try {
-          const { canvasZoom, canvasOffset } = viewStore.get();
-          const v: PersistedView = { zoom: canvasZoom, offset: canvasOffset, rulers: rulersRef.current };
-          localStorage.setItem(`gg-editor:canvas-view:${storageKey}`, JSON.stringify(v));
-        } catch {
-          /* 保存できなくても表示には影響しない */
+        if (!initialViewAppliedRef.current) return;
+        const { canvasZoom, canvasOffset, activePageId } = viewStore.get();
+        const v: PersistedView = { zoom: canvasZoom, offset: canvasOffset, rulers: rulersRef.current };
+        const page = activePageId ? pagesRef.current.find((p) => p.id === activePageId) : undefined;
+        if (page) {
+          v.anchor = { pageId: page.id, x: canvasOffset.x + page.position.x * canvasZoom, y: canvasOffset.y + page.position.y * canvasZoom };
         }
+        writeStorage(`gg-editor:canvas-view:${storageKey}`, JSON.stringify(v));
       }, 250);
     };
     const unsubscribe = viewStore.subscribe(persist);
@@ -709,6 +742,8 @@ export function MultiPageCanvasProvider({ children, enabled, storageKey }: Multi
 
   // ---- アニメーション
   const animationRef = useRef<number | null>(null);
+  /** アニメーションの途中で shiftView された量。補間した位置に足す */
+  const animationShiftRef = useRef({ x: 0, y: 0 });
   const cancelAnimation = () => {
     if (animationRef.current != null) {
       cancelAnimationFrame(animationRef.current);
@@ -725,14 +760,16 @@ export function MultiPageCanvasProvider({ children, enabled, storageKey }: Multi
     }
     const from = { zoom: viewStore.get().canvasZoom, offset: viewStore.get().canvasOffset };
     const start = performance.now();
+    animationShiftRef.current = { x: 0, y: 0 };
     const tick = (now: number) => {
       const t = Math.min(1, (now - start) / VIEW_ANIMATION_MS);
       const k = easeOutCubic(t);
       // 倍率は対数で補間する(拡大と縮小で速さが揃う)
       const zoom = Math.exp(Math.log(from.zoom) + (Math.log(target.zoom) - Math.log(from.zoom)) * k);
+      const shift = animationShiftRef.current;
       const offset = {
-        x: from.offset.x + (target.offset.x - from.offset.x) * k,
-        y: from.offset.y + (target.offset.y - from.offset.y) * k,
+        x: from.offset.x + (target.offset.x - from.offset.x) * k + shift.x,
+        y: from.offset.y + (target.offset.y - from.offset.y) * k + shift.y,
       };
       viewStore.set((prev) => ({ ...prev, canvasZoom: zoom, canvasOffset: offset }));
       if (t < 1) animationRef.current = requestAnimationFrame(tick);
@@ -747,6 +784,42 @@ export function MultiPageCanvasProvider({ children, enabled, storageKey }: Multi
     viewStore.set((prev) => ({ ...prev, canvasOffset: offset }));
   }, [viewStore]);
 
+  const shiftView = useCallback((dx: number, dy: number) => {
+    if (!dx && !dy) return;
+    const shift = animationShiftRef.current;
+    animationShiftRef.current = { x: shift.x + dx, y: shift.y + dy };
+    viewStore.set((prev) => ({ ...prev, canvasOffset: { x: prev.canvasOffset.x + dx, y: prev.canvasOffset.y + dy } }));
+  }, [viewStore]);
+
+  // 編集中のフレームは、並びが変わっても画面上で動かさない。
+  // フレームの高さは紙面(または遠景の画像)を読んで測るまで仮の値で、測れるたびにツリーの行の高さが変わり、
+  // 深い段のフレームほど大きくずれる(トップが 5800px なら、2 段目の子は数千 px 下へ)。視点はそのページに
+  // 合わせて決めたもの(開いた直後の寄せ・前回の視点の復元・ページ切替の寄せ)なので、フレームが動いた分だけ視点も動かす。
+  // useLayoutEffect なのは、フレームの位置が変わった描画と同じフレームで転写層を書き換えるため
+  const activeAnchorRef = useRef<{ id: string; x: number; y: number } | null>(null);
+  useLayoutEffect(() => {
+    if (!enabled) return;
+    const id = viewStore.get().activePageId;
+    const page = id ? pages.find((p) => p.id === id) : undefined;
+    const last = activeAnchorRef.current;
+    if (page && last && last.id === page.id && (last.x !== page.position.x || last.y !== page.position.y)) {
+      const z = viewStore.get().canvasZoom;
+      shiftView((last.x - page.position.x) * z, (last.y - page.position.y) * z);
+    }
+    activeAnchorRef.current = page ? { id: page.id, x: page.position.x, y: page.position.y } : null;
+  }, [enabled, pages, viewStore, shiftView]);
+  // 編集するページが替わったら、そのページの今の位置から追い始める
+  useEffect(
+    () =>
+      viewStore.subscribe(() => {
+        const id = viewStore.get().activePageId;
+        if ((activeAnchorRef.current?.id ?? null) === id) return;
+        const page = id ? pagesRef.current.find((p) => p.id === id) : undefined;
+        activeAnchorRef.current = page ? { id: page.id, x: page.position.x, y: page.position.y } : null;
+      }),
+    [viewStore],
+  );
+
   const setCanvasZoom = useCallback((zoom: number) => {
     cancelAnimation();
     viewStore.set((prev) => ({ ...prev, canvasZoom: clampZoom(zoom) }));
@@ -905,6 +978,35 @@ export function MultiPageCanvasProvider({ children, enabled, storageKey }: Multi
     [frameScreenRect, revealPage, zoomToPage],
   );
 
+  const applyInitialView = useCallback(() => {
+    if (initialViewAppliedRef.current) return;
+    initialViewAppliedRef.current = true;
+    const id = viewStore.get().activePageId;
+    const page = id ? pagesRef.current.find((p) => p.id === id) : undefined;
+    if (!page) {
+      // 編集中のページが無い: 保存した視点が何かを映していればそのまま、でなければ全体
+      if (persisted) {
+        const { canvasOffset: o, canvasZoom: z } = viewStore.get();
+        const b = boundsRef.current;
+        const { width, height } = containerSize();
+        if (o.x + b.maxX * z > 0 && o.x + b.minX * z < width && o.y + b.maxY * z > 0 && o.y + b.minY * z < height) return;
+      }
+      zoomToFit();
+      return;
+    }
+    if (persisted) {
+      // 同じページの視点なら、フレームを保存したときと同じ画面上の位置・倍率に置く(並びは後から動くが、上の追従が保つ)
+      if (persisted.anchor?.pageId === page.id) {
+        const zoom = clampZoom(persisted.zoom);
+        setView({ zoom, offset: { x: persisted.anchor.x - page.position.x * zoom, y: persisted.anchor.y - page.position.y * zoom } });
+      }
+      // 別のページの視点・古い形式(anchor 無し)は位置のまま。どちらも編集中のフレームが画面に入っていれば戻す
+      if (frameScreenRect(page.id)?.visible) return;
+    }
+    zoomToPage(page.id);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [persisted, viewStore, setView, zoomToFit, zoomToPage, frameScreenRect]);
+
   /**
    * 直前の activatePage(フレームのクリック・左パネル)の宛先。
    * 下の同期 effect が「エディタ発かホスト発か」を見分けるのに使う。
@@ -1111,6 +1213,7 @@ export function MultiPageCanvasProvider({ children, enabled, storageKey }: Multi
       previewStyles,
       viewStore,
       setCanvasOffset,
+      shiftView,
       setCanvasZoom,
       setView,
       zoomAt,
@@ -1121,6 +1224,7 @@ export function MultiPageCanvasProvider({ children, enabled, storageKey }: Multi
       zoomToPage,
       zoomToActual,
       revealPage,
+      focusPage,
       activatePage,
       activatingPageId,
       registerContainer,
@@ -1128,6 +1232,7 @@ export function MultiPageCanvasProvider({ children, enabled, storageKey }: Multi
       isInteracting,
       markInteracting,
       initialViewRestored: !!persisted,
+      applyInitialView,
       rulersVisible,
       toggleRulers,
       requestPreviewSlot,
@@ -1138,9 +1243,9 @@ export function MultiPageCanvasProvider({ children, enabled, storageKey }: Multi
     }),
     [
       enabled, editorMode, pages, bounds, layout, getPage, updatePageFrame, setPageHtml, invalidatePages, artboard.documentAttributes,
-      setPageHeight, ensurePageHtml, previewStyles, viewStore, setCanvasOffset, setCanvasZoom, setView, zoomAt, zoomTo, zoomIn, zoomOut, zoomToFit, zoomToPage,
-      zoomToActual, revealPage, activatePage, activatingPageId, registerContainer, isInteracting, markInteracting,
-      persisted, rulersVisible, toggleRulers, requestPreviewSlot, releasePreviewSlot,
+      setPageHeight, ensurePageHtml, previewStyles, viewStore, setCanvasOffset, shiftView, setCanvasZoom, setView, zoomAt, zoomTo, zoomIn, zoomOut, zoomToFit, zoomToPage,
+      zoomToActual, revealPage, focusPage, activatePage, activatingPageId, registerContainer, isInteracting, markInteracting,
+      persisted, applyInitialView, rulersVisible, toggleRulers, requestPreviewSlot, releasePreviewSlot,
       getPreviewImageZoomCap, reportThumbnailWidth, previewImageCapVersion,
     ],
   );

package/src/editor/hooks/index.ts

@@ -24,6 +24,9 @@ export { useDragResize } from './useDragResize';
 export { useContextMenuHandler } from './useContextMenuHandler';
 export { useIframeSetup } from './useIframeSetup';
 export { useFocusManagement } from './useFocusManagement';
+export { useInlineTextSelection } from './useInlineTextSelection';
+export { useLinkNavigation } from './useLinkNavigation';
+export { useKeepArtboardInPlace } from './useKeepArtboardInPlace';
 export { useResizablePanel } from './useResizablePanel';
 
 // Component system hooks

package/src/editor/hooks/useDragResize.ts

@@ -28,6 +28,8 @@ import {
   isOutOfFlowPosition,
   measureStyleSize,
   roundPx,
+  readSizeLimits,
+  type SizeLimits,
 } from '../utils/geometry';
 import {
   shouldReorder,
@@ -49,6 +51,7 @@ import {
   type GuideCandidates,
   type MovingRect,
 } from '../utils/smart-guides';
+import { computeFreeBounds, keepsInlineGeometry } from '../utils/free-layout';
 import { extractElementInfo } from '../utils/style-utils';
 import { convertInlineStylesToTailwind } from '../utils/tailwind-utils';
 import { isAspectRatioLocked } from '../utils/aspect-lock';
@@ -219,6 +222,8 @@ interface ResizeSnapshot {
    */
   wroteWidth: boolean;
   wroteHeight: boolean;
+  /** 要素の min / max-width・height。ハンドルでもここで止める(開始時に読む) */
+  limits: SizeLimits;
 }
 
 /**
@@ -335,6 +340,13 @@ export function useDragResize(
   // 案内はセッション中1回だけ。ドラッグのたびに帯が出ると操作の邪魔になる
   const reorderHintShownRef = useRef(false);
 
+  // 自由配置(gg-freelayout)の器の中で動かせる範囲。ドラッグ開始時に1回だけ採る。
+  // 「器の外には出さない」という約束をここで守る。器の外へ出た要素は、器の高さが
+  // 固定されているぶん見えなくなる(overflow)ことがあり、消えたように見えるため。
+  // 群で掴んだときは各要素の許容範囲の**共通部分**を使う。個別に丸めると
+  // 群の相対位置が崩れる(端に着いた要素だけ止まり、隊列がばらける)
+  const freeBoundsRef = useRef<{ dxMin: number; dxMax: number; dyMin: number; dyMax: number } | null>(null);
+
   // editorMode も zoom と同じ理由で ref に写す。
   // iframe に張ったリスナーのクロージャは古い値を掴んだままになるため
   const editorModeRef = useRef(editorMode);
@@ -378,6 +390,7 @@ export function useDragResize(
     reorderRef.current = null;
     reorderIndexRef.current = -1;
     dragBlockedRef.current = false;
+    freeBoundsRef.current = null;
   }, [dragStateRef]);
 
   /**
@@ -641,6 +654,7 @@ export function useDragResize(
         heightInert: false,
         wroteWidth: false,
         wroteHeight: false,
+        limits: readSizeLimits(element, iframeDoc),
       };
     },
     [layoutModeRef]
@@ -794,7 +808,7 @@ export function useDragResize(
         handle,
         deltaX,
         deltaY,
-        { shiftKey: mods.shiftKey, altKey: mods.altKey }
+        { shiftKey: mods.shiftKey, altKey: mods.altKey, limits: snapshot.limits }
       );
 
       // 掴んだハンドルが実際に動かす軸だけを書く。
@@ -988,6 +1002,8 @@ export function useDragResize(
           // 以後のフレームは基準に delta を足すだけなので、要素数に関係なく軽い
           dragBaseRectRef.current = unionOverlayRect(iframeDoc, movingElements);
           guideCandidatesRef.current = collectGuideCandidates(iframeDoc, movingElements);
+          // 自由配置の器の中なら、器からはみ出さない範囲を先に決めておく
+          freeBoundsRef.current = isWebpage ? computeFreeBounds(targets, iframeDoc) : null;
         }
       }
 
@@ -1059,6 +1075,14 @@ export function useDragResize(
         clearSmartGuides(iframeDoc);
       }
 
+      // 自由配置の器の中では、器の外へ出さない。
+      // スナップのあとに丸めるのは、吸着で器の外へ引っ張られるのを防ぐため
+      const bounds = freeBoundsRef.current;
+      if (bounds) {
+        snappedDx = Math.min(Math.max(snappedDx, bounds.dxMin), Math.max(bounds.dxMin, bounds.dxMax));
+        snappedDy = Math.min(Math.max(snappedDy, bounds.dyMin), Math.max(bounds.dyMin, bounds.dyMax));
+      }
+
       // 単一選択も複数選択も、全要素に「同一の delta」を加算する（群ごと移動）。
       // origin は mousedown 時に offsetLeft/offsetTop で採ってあり、
       // 書き込む直前に Math.round を通すので、要素ごとに移動量がズレない。
@@ -1242,9 +1266,9 @@ export function useDragResize(
         const resizeProperties = ['width', 'height', 'left', 'top', 'borderRadius'];
         if (resizeState.elements && resizeState.elements.length > 0) {
           resizeState.elements.forEach((el) => {
-            convertInlineStylesToTailwind(el, resizeProperties);
+            if (!keepsInlineGeometry(el)) convertInlineStylesToTailwind(el, resizeProperties);
           });
-        } else {
+        } else if (!keepsInlineGeometry(resizeState.element)) {
           convertInlineStylesToTailwind(resizeState.element, resizeProperties);
         }
 
@@ -1345,13 +1369,14 @@ export function useDragResize(
         // インラインスタイルをTailwindクラスに変換
         // ドラッグ中はパフォーマンスのためインラインスタイルを使用し、
         // 終了時にTailwindクラスに変換する
+        // 自由配置で倒した要素(gg-freelayout-item)はインラインのまま残す(解除で外すため)
         if (dragState.hasMoved) {
           const dragProperties = ['left', 'top'];
           if (dragState.elements.length > 1) {
             dragState.elements.forEach((el) => {
-              convertInlineStylesToTailwind(el, dragProperties);
+              if (!keepsInlineGeometry(el)) convertInlineStylesToTailwind(el, dragProperties);
             });
-          } else {
+          } else if (!keepsInlineGeometry(dragState.element)) {
             convertInlineStylesToTailwind(dragState.element, dragProperties);
           }
 

package/src/editor/hooks/useElementActions.ts

@@ -14,6 +14,7 @@ import {
   canUngroup,
   hasEditableChildren,
   prepareElementDragOrigin,
+  isNonEditableTag,
 } from '../utils/dom-utils';
 import {
   resolveWebpageDrag,
@@ -22,6 +23,8 @@ import {
 } from '../utils/flex-reorder';
 import { extractElementInfo } from '../utils/style-utils';
 import { applyTailwindStyles, convertInlineStylesToTailwind } from '../utils/tailwind-utils';
+import { keepsInlineGeometry } from '../utils/free-layout';
+import { INLINE_TEXT_PROPERTIES, applyInlineTextStyle, getInlineTextRange } from '../utils/inline-text-style';
 import { copyElementsToFigma, isFigmaExportAvailable } from '../utils/figma-export';
 import {
   hasViewportUnit,
@@ -473,7 +476,7 @@ export function useElementActions() {
     // インラインスタイルをTailwindクラスに変換
     const positionProperties = ['left', 'top'];
     elements.forEach(el => {
-      convertInlineStylesToTailwind(el, positionProperties);
+      if (!keepsInlineGeometry(el)) convertInlineStylesToTailwind(el, positionProperties);
     });
 
     notifyIframeChange();
@@ -588,6 +591,34 @@ export function useElementActions() {
     }
   }, [selectedElement, selectedElementIds, getIframeDoc, notifyIframeChange, setSelectedElement, lastUsedStylesRef, getCanvasDimensions, editorMode]);
 
+  /**
+   * 文字の属性(大きさ・太さ・色・字間など)を変える。テキストの一部を選んでいれば、その範囲だけに当てる。
+   * 範囲が無い・要素の文字を全部選んでいる・文字の属性以外を含む・複数選択のときは
+   * updateElementStyle と同じ(要素全体)
+   */
+  const updateTextStyle = useCallback((styles: Record<string, string>) => {
+    const iframeDoc = getIframeDoc();
+    const single =
+      !!selectedElement &&
+      (selectedElementIds.length === 0 ||
+        (selectedElementIds.length === 1 && selectedElementIds[0] === selectedElement.id));
+    const target =
+      iframeDoc && selectedElement && single && Object.keys(styles).every((k) => INLINE_TEXT_PROPERTIES.has(k))
+        ? getInlineTextRange(iframeDoc, selectedElement.id)
+        : null;
+    if (!iframeDoc || !target) {
+      updateElementStyle(styles);
+      return;
+    }
+    applyInlineTextStyle(target, styles);
+    notifyIframeChange();
+    const info = extractElementInfo(target.host, iframeDoc);
+    if (info) setSelectedElement(info);
+    requestAnimationFrame(() => {
+      refreshSelectionOverlay(iframeDoc);
+    });
+  }, [selectedElement, selectedElementIds, getIframeDoc, notifyIframeChange, setSelectedElement, updateElementStyle]);
+
   // 要素削除（複数選択対応）
   const deleteElement = useCallback(() => {
     const iframeDoc = getIframeDoc();
@@ -1248,14 +1279,14 @@ export function useElementActions() {
     children.forEach(child => {
       const el = child as HTMLElement;
       
-      // data-element-idがない場合は付与
-      if (!el.getAttribute('data-element-id')) {
-        el.setAttribute('data-element-id', generateElementId('ungrouped'));
-      }
-      
-      // data-editableを付与
-      if (!el.getAttribute('data-editable')) {
-        el.setAttribute('data-editable', 'true');
+      // data-element-id / data-editable を付与(改行 <br> / <wbr> には付けない)
+      if (!isNonEditableTag(el)) {
+        if (!el.getAttribute('data-element-id')) {
+          el.setAttribute('data-element-id', generateElementId('ungrouped'));
+        }
+        if (!el.getAttribute('data-editable')) {
+          el.setAttribute('data-editable', 'true');
+        }
       }
 
       // 子要素の現在の位置を取得
@@ -1783,6 +1814,7 @@ export function useElementActions() {
 
   return {
     updateElementStyle,
+    updateTextStyle,
     updateLinkAttribute,
     updateElementAttribute,
     deleteElement,

package/src/editor/hooks/useElementSelection.ts

@@ -20,6 +20,7 @@ import {
   refreshSelectionOverlay,
   syncSelectionOverlayRects,
   lockCaretScroll,
+  isNonEditableTag,
 } from "../utils/dom-utils";
 import { extractElementInfo } from "../utils/style-utils";
 import { MARQUEE_DRAG_THRESHOLD } from "../constants";
@@ -303,8 +304,8 @@ export function useElementSelection(
         return null;
       }
 
-      // 直接data-editableを持っているか
-      if (el.getAttribute("data-editable") === "true") {
+      // 直接data-editableを持っているか(改行 <br> / <wbr> は持っていても親の文字要素を選ぶ)
+      if (el.getAttribute("data-editable") === "true" && !isNonEditableTag(el)) {
         // 真のインライン要素（テキストフロー内）の場合は親のブロック要素を探す
         if (isTrueInlineInTextFlow(el, iframeDoc)) {
           let parent = el.parentElement;
@@ -328,6 +329,7 @@ export function useElementSelection(
         while (current && current !== iframeDoc.body) {
           if (
             current.getAttribute("data-editable") === "true" &&
+            !isNonEditableTag(current) &&
             !isTrueInlineInTextFlow(current, iframeDoc)
           ) {
             return current;

package/src/editor/hooks/useGoogleFonts.ts

@@ -2,6 +2,7 @@
 
 import { useState, useEffect, useCallback, useMemo } from 'react';
 import { debugLog } from '../utils/debug';
+import { readStorage, writeStorage } from '../utils/storage';
 
 /**
  * Google Fontの情報
@@ -140,8 +141,8 @@ export function useGoogleFonts() {
   const fetchGoogleFonts = useCallback(async () => {
     // キャッシュをチェック
     try {
-      const cachedFonts = localStorage.getItem(FONTS_CACHE_KEY);
-      const cacheExpiry = localStorage.getItem(FONTS_CACHE_EXPIRY_KEY);
+      const cachedFonts = readStorage(FONTS_CACHE_KEY);
+      const cacheExpiry = readStorage(FONTS_CACHE_EXPIRY_KEY);
 
       if (cachedFonts && cacheExpiry && Date.now() < parseInt(cacheExpiry, 10)) {
         const parsed = JSON.parse(cachedFonts) as GoogleFont[];
@@ -197,12 +198,9 @@ export function useGoogleFonts() {
       }));
 
       // キャッシュに保存
-      try {
-        localStorage.setItem(FONTS_CACHE_KEY, JSON.stringify(googleFonts));
-        localStorage.setItem(FONTS_CACHE_EXPIRY_KEY, String(Date.now() + CACHE_DURATION));
-      } catch {
-        // ストレージが一杯の場合は無視
-      }
+      // ストレージが一杯・使えない場合は黙って諦める
+      writeStorage(FONTS_CACHE_KEY, JSON.stringify(googleFonts));
+      writeStorage(FONTS_CACHE_EXPIRY_KEY, String(Date.now() + CACHE_DURATION));
 
       setFonts([...SYSTEM_FONTS, ...googleFonts]);
     } catch (err) {

package/src/editor/hooks/useIframeSetup.ts

@@ -8,7 +8,7 @@
 
 import { useCallback, useRef, useEffect } from 'react';
 import { useEditorContext } from '../EditorContext';
-import { buildDomTree, isInlineElement } from '../utils/dom-utils';
+import { buildDomTree, isInlineElement, isNonEditableTag } from '../utils/dom-utils';
 import { EDITOR_IFRAME_STYLES } from '../constants';
 import { isLockedInsidePart } from '../parts';
 import { debugLog } from '../utils/debug';
@@ -100,6 +100,13 @@ export function useIframeSetup(): UseIframeSetupReturn {
         element.tagName === 'HEAD'
       )
         return;
+      // 改行(<br> / <wbr>)は文字の一部。印も ID も付けない(前に付いていたら外す)
+      if (isNonEditableTag(element)) {
+        element.removeAttribute('data-editable');
+        element.removeAttribute('data-element-id');
+        element.removeAttribute('data-inline');
+        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;
@@ -112,6 +119,8 @@ export function useIframeSetup(): UseIframeSetupReturn {
       if (element.classList.contains('rotation-handle')) return;
       // selection-boxの子孫要素をすべてスキップ（念のため）
       if (element.closest('.selection-box')) return;
+      // 共同編集の他人の選択枠・カーソル(表示専用の層)
+      if (element.closest('.gg-collab-layer')) return;
 
       // 部品のインスタンス(data-part)の中で、スロット(data-slot)の外にある要素は編集対象にしない。
       // ルート自身とスロットの中は通常どおり(src/editor/parts.ts)。