@growgroup/visual-editor 0.6.0 → 0.7.1

package/src/editor/contexts/MultiPageCanvasContext.tsx

@@ -29,6 +29,7 @@ import React, {
   useCallback,
   useContext,
   useEffect,
+  useLayoutEffect,
   useMemo,
   useRef,
   useState,
@@ -207,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;
@@ -247,6 +253,13 @@ export interface MultiPageCanvasContextValue {
   markInteracting: () => void;
   /** 見えている範囲を localStorage から復元できた(初回表示で全体表示を省く) */
   initialViewRestored: boolean;
+  /**
+   * 最初の視点を決める(1 回だけ。容器の大きさとフレームの並びが揃ってから MultiPageCanvasView が呼ぶ)。
+   * 保存した視点が編集中のページのものなら、そのフレームを保存したときと同じ画面上の位置・倍率に戻す。
+   * 別のページのもの・古い形式なら、編集中のフレームが画面に入っているときだけ位置のまま戻す。
+   * それ以外(保存が無い・入っていない)は編集中のページへ寄せる
+   */
+  applyInitialView: () => void;
   /** 定規 */
   rulersVisible: boolean;
   toggleRulers: () => void;
@@ -507,7 +520,16 @@ 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) return null;
@@ -516,6 +538,8 @@ function readPersistedView(key: string | null | undefined): PersistedView | null
     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;
@@ -659,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) => {
@@ -685,8 +711,13 @@ export function MultiPageCanvasProvider({ children, enabled, storageKey }: Multi
       if (timer) clearTimeout(timer);
       timer = setTimeout(() => {
         timer = null;
-        const { canvasZoom, canvasOffset } = viewStore.get();
+        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);
     };
@@ -711,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);
@@ -727,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);
@@ -749,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) }));
@@ -907,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 が「エディタ発かホスト発か」を見分けるのに使う。
@@ -1113,6 +1213,7 @@ export function MultiPageCanvasProvider({ children, enabled, storageKey }: Multi
       previewStyles,
       viewStore,
       setCanvasOffset,
+      shiftView,
       setCanvasZoom,
       setView,
       zoomAt,
@@ -1131,6 +1232,7 @@ export function MultiPageCanvasProvider({ children, enabled, storageKey }: Multi
       isInteracting,
       markInteracting,
       initialViewRestored: !!persisted,
+      applyInitialView,
       rulersVisible,
       toggleRulers,
       requestPreviewSlot,
@@ -1141,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,
+      setPageHeight, ensurePageHtml, previewStyles, viewStore, setCanvasOffset, shiftView, setCanvasZoom, setView, zoomAt, zoomTo, zoomIn, zoomOut, zoomToFit, zoomToPage,
       zoomToActual, revealPage, focusPage, activatePage, activatingPageId, registerContainer, isInteracting, markInteracting,
-      persisted, rulersVisible, toggleRulers, requestPreviewSlot, releasePreviewSlot,
+      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/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;

package/src/editor/hooks/useInlineTextSelection.ts

@@ -0,0 +1,16 @@
+'use client';
+
+import { useSyncExternalStore } from 'react';
+import {
+  getInlineTextSummary,
+  subscribeInlineTextSelection,
+  type InlineTextSummary,
+} from '../utils/inline-text-style';
+
+/**
+ * テキストの一部を選んでいるときの、その範囲の文字の見た目。選んでいなければ null。
+ * パネルが「選んだ文字の値」と「混在」を出すのに使う
+ */
+export function useInlineTextSelection(): InlineTextSummary | null {
+  return useSyncExternalStore(subscribeInlineTextSelection, getInlineTextSummary, getInlineTextSummary);
+}

package/src/editor/hooks/useKeepArtboardInPlace.ts

@@ -0,0 +1,88 @@
+'use client';
+
+/**
+ * useKeepArtboardInPlace
+ *
+ * 1 ページ表示(マルチフレームでない EditorCanvas)で、キャンバスの容器の左端が動いても
+ * 紙面を画面上の同じ位置に留める(Figma と同じ。見える範囲が狭くなるだけで、中身は動かない)。
+ *
+ * 左のパネルを出し入れする(部品パネルに替わる・幅をドラッグする・利用側のレールが変わるも同じ)と、
+ * 容器(= iframe)の左端がパネルの幅だけ動く。紙面は iframe の中の #canvas-container のスクロールで
+ * 置かれていて、その基準は iframe の左端なので、そのままでは紙面も一緒に動く。
+ * 左端が動いた分だけ同じ向きへスクロールして打ち消す。
+ *
+ * 入口ごとには手当てせず、容器の位置の変化そのものを見る。左端は幅と一緒にしか動かないので
+ * ResizeObserver で拾える。呼ばれるのはレイアウトの後・描画の前なので、ずれた姿は描かれない。
+ *
+ * [容器が広がったときのスクロール位置]
+ * 広がるとスクロールできる上限が下がり、ブラウザはレイアウトの時点で(ResizeObserver より前に)
+ * 位置を上限へ詰める。詰められる前の位置はもう読めないので、スクロールのたびに覚えておく。
+ * 覚えるのは容器の幅が前回の ResizeObserver のときと同じ間だけ ── 幅が変わった後に届くスクロールは
+ * 詰められた結果で、それを覚えると戻す先を失う
+ *
+ * マルチフレームのキャンバス(埋め込み)では使わない。位置はキャンバスの転写が持ち(MultiPageCanvasView)、
+ * この容器は転写層の中でパンのたびに動く
+ */
+
+import { useEffect, useRef, type RefObject } from 'react';
+import { scrollCanvasLeftTo } from '../utils/dom-utils';
+
+interface Last {
+  /** 容器の左端(親の画面の座標) */
+  left: number;
+  /** iframe の中の表示幅(documentElement.clientWidth)。スクロールを覚えてよいかの判定に使う */
+  viewportWidth: number;
+  /** #canvas-container の横のスクロール位置 */
+  scrollLeft: number;
+}
+
+export function useKeepArtboardInPlace(
+  containerRef: RefObject<HTMLDivElement | null>,
+  getIframeDoc: () => Document | null,
+  enabled: boolean,
+  iframeReady: boolean,
+): void {
+  const lastRef = useRef<Last | null>(null);
+
+  // 容器の位置
+  useEffect(() => {
+    if (!enabled) return;
+    const el = containerRef.current;
+    if (!el || typeof ResizeObserver === 'undefined') return;
+    const observer = new ResizeObserver(() => {
+      const left = el.getBoundingClientRect().left;
+      const doc = getIframeDoc();
+      const scroller = doc?.getElementById('canvas-container') ?? null;
+      const last = lastRef.current;
+      if (doc && scroller && last && left !== last.left) {
+        // 上限へ詰められていれば、覚えておいた位置から(詰められていなければ今の位置が正しい)
+        const max = scroller.scrollWidth - scroller.clientWidth;
+        const from = scroller.scrollLeft >= max - 1 && last.scrollLeft > scroller.scrollLeft ? last.scrollLeft : scroller.scrollLeft;
+        scrollCanvasLeftTo(doc, from + (left - last.left));
+      }
+      lastRef.current = {
+        left,
+        viewportWidth: doc?.documentElement?.clientWidth ?? 0,
+        scrollLeft: scroller?.scrollLeft ?? 0,
+      };
+    });
+    observer.observe(el);
+    return () => observer.disconnect();
+  }, [enabled, containerRef, getIframeDoc]);
+
+  // スクロール位置を覚える(文書ごと。ページを移ると iframe の文書が替わる)
+  useEffect(() => {
+    if (!enabled || !iframeReady) return;
+    const doc = getIframeDoc();
+    const scroller = doc?.getElementById('canvas-container');
+    if (!doc || !scroller) return;
+    const remember = () => {
+      const last = lastRef.current;
+      // ページを移る途中は文書が差し替わり、documentElement が無いことがある(⌘ クリックのリンク移動で実測)
+      if (last && doc.documentElement && doc.documentElement.clientWidth === last.viewportWidth) last.scrollLeft = scroller.scrollLeft;
+    };
+    remember();
+    scroller.addEventListener('scroll', remember, { passive: true });
+    return () => scroller.removeEventListener('scroll', remember);
+  }, [enabled, iframeReady, getIframeDoc]);
+}