@growgroup/visual-editor 0.1.4 → 0.1.6

package/src/editor/utils/flex-reorder.ts

@@ -1,5 +1,5 @@
 /**
- * フレックス内ドラッグ = 同一親の中での並べ替え。
+ * フロー内ドラッグ = 同一親の中での並べ替え。
  *
  * オートレイアウト(display:flex)の子を掴んだとき、従来は問答無用で絶対配置へ
  * 倒していたため、フレックスの設定が触った瞬間に無意味になっていた。
@@ -7,6 +7,14 @@
  * 以前あった「ゴースト並べ替え」は任意の親へ再挿入できたため、離した場所に
  * よっては要素が画面の外へ消えた。同一親に限ることでその事故を構造的に防ぐ。
  *
+ * 【slide と webpage で入口が違う】
+ * - slide  : `shouldReorder` = 明示的にオートレイアウトONにした flex の器だけ。
+ *            テンプレート由来の flex が山ほどあり、全部を器にすると既定の
+ *            ドラッグ(絶対配置化して自由移動)が勝手に変わってしまうため。
+ * - webpage: `resolveWebpageDrag` = フロー内の要素は**常に**並べ替え。
+ *            webpage は版面を流し込みのまま保つ約束なので、絶対配置へ倒すと
+ *            ページ高さが潰れて紙面が飛ぶ(これが「動かすと版面が崩れる」の正体)。
+ *
  * 座標はクライアント座標(getBoundingClientRect)のまま扱う。ここで必要なのは
  * 「カーソルが兄弟の前半か後半か」だけで、アートボード座標へ割り戻す必要がない。
  */
@@ -22,22 +30,69 @@ const OVERLAY_SELECTOR =
   '.size-label,.element-breadcrumb,.gg-comment-layer,.gg-crop-ui,' +
   '.flex-drop-indicator,#gg-measure-layer,#gg-smart-guides,#' + INDICATOR_ID;
 
+/**
+ * 並びの性格。挿入位置の決め方と、青い線の引き方がこれで変わる。
+ * - block : 縦一列の流し込み。前後は y の中点で決まる
+ * - flex  : 主軸が1本(row/column)。前後は主軸の中点で決まる
+ * - grid2d: grid と flex-wrap。1本の軸では決まらないので、
+ *           「カーソルに一番近い兄弟」を選んでから、ずれの大きい軸で前後を決める
+ */
+export type ReorderLayout = 'block' | 'flex' | 'grid2d';
+
+/** 親が並べ替えの器になり得る display か。webpage の入口で使う */
+function classifyDisplay(display: string): ReorderLayout | null {
+  if (display === 'flex' || display === 'inline-flex') return 'flex';
+  if (display === 'grid' || display === 'inline-grid') return 'grid2d';
+  if (display === 'block' || display === 'flow-root' || display === 'list-item') return 'block';
+  // inline / table 系 / contents などは並びの前後が素直に決まらないので触らない
+  return null;
+}
+
+/** ドラッグを並べ替えとして扱うための材料。これが作れたら並べ替えできる */
+export interface ReorderPlan {
+  /** 動かす要素(DOM順の連続した塊)。単一選択なら1個 */
+  elements: HTMLElement[];
+  parent: HTMLElement;
+  layout: ReorderLayout;
+}
+
+/** webpage モードでドラッグをどう扱うかの判定結果 */
+export type WebpageDragPlan =
+  /** 同一親の中で並べ替える */
+  | { kind: 'reorder'; plan: ReorderPlan }
+  /** 兄弟がいない(ひとりっ子)。動かす先がないので何もしない */
+  | { kind: 'no-siblings' }
+  /** 複数選択がバラバラ(親が違う/連続していない/フロー内と絶対配置の混在) */
+  | { kind: 'not-contiguous' }
+  /** 従来どおり座標で自由に動かす(すでに絶対配置の要素など) */
+  | { kind: 'free' };
+
 /** 並べ替え中の状態。ドラッグ開始時に1回だけ作る */
 export interface ReorderSession {
-  element: HTMLElement;
+  /** 動かしている要素(DOM順の連続した塊) */
+  elements: HTMLElement[];
   parent: HTMLElement;
   /** 動かしている要素を除いた兄弟(DOM順) */
   siblings: HTMLElement[];
-  /** 主軸が縦か */
+  layout: ReorderLayout;
+  /** 主軸が縦か(grid2d では使わない) */
   isColumn: boolean;
-  /** 開始時の位置(取り消し・変化判定用) */
+  /** flex-direction が *-reverse か(画面上の並びとDOM順が逆になる) */
+  isReverse: boolean;
+  /** 開始時の挿入位置。ここと同じなら「順番は変わっていない」 */
   originalIndex: number;
   /** 直前に描いた挿入位置。同じなら描き直さない */
   lastIndex: number;
+  /** grid2d で直近に使った軸。青い線をこの軸で引く */
+  lastAxis: 'x' | 'y';
+  /** grid2d で線を引く相手(カーソルに一番近い兄弟) */
+  lastNeighbor: HTMLElement | null;
+  /** lastNeighbor の手前に入れるのか(false なら後ろ) */
+  lastBefore: boolean;
 }
 
 /** 並べ替えの相手になる子だけを取り出す */
-function realChildren(parent: HTMLElement): HTMLElement[] {
+export function realChildren(parent: HTMLElement): HTMLElement[] {
   const out: HTMLElement[] = [];
   for (const node of Array.from(parent.children)) {
     // [注意] `node instanceof HTMLElement` は使えない。この関数は親ウィンドウで
@@ -51,8 +106,14 @@ function realChildren(parent: HTMLElement): HTMLElement[] {
   return out;
 }
 
+/** フロー(static/relative)の中にいるか */
+function isInFlow(element: HTMLElement, win: Window): boolean {
+  const position = win.getComputedStyle(element).position;
+  return position !== 'absolute' && position !== 'fixed';
+}
+
 /**
- * この要素を「同一親の並べ替え」で動かすべきか判定する。
+ * この要素を「同一親の並べ替え」で動かすべきか判定する。【slide 専用・変更禁止】
  *
  * 【既定は現状維持】computed が flex というだけでは並べ替えにしない。
  * テンプレート由来の flex はスライド中に山ほどあり、それを全部器として扱うと
@@ -88,35 +149,132 @@ export function shouldReorder(
   return realChildren(parent).length >= 2;
 }
 
-/** 並べ替えの下ごしらえ(ドラッグが動き出した最初の1回だけ呼ぶ) */
-export function startReorder(element: HTMLElement, doc: Document): ReorderSession | null {
-  const win = doc.defaultView;
+/** slide の並べ替え(shouldReorder が true のとき)の材料を作る */
+export function planSlideReorder(
+  element: HTMLElement,
+  doc: Document,
+): ReorderPlan | null {
   const parent = element.parentElement;
-  if (!win || !parent) return null;
+  if (!parent) return null;
+  // shouldReorder が display:flex/inline-flex を保証しているので layout は 'flex' 固定。
+  // ここで flex-wrap を見て grid2d へ振ると slide の既存挙動が変わるので、あえて見ない
+  return { elements: [element], parent, layout: 'flex' };
+}
+
+/**
+ * webpage モードでこのドラッグをどう扱うか決める。
+ *
+ * webpage は「絶対配置へ倒さない」が設計原則(README)。倒すと版面が固定pxに固まり、
+ * さらにカラムが流れから抜けてページ高さが潰れ、紙面が中央寄せで飛ぶ。
+ * そこでフロー内の要素は必ず並べ替えに回し、倒すのは Cmd/Ctrl の逃げ道だけにする。
+ *
+ * 判定の順番:
+ *   1. すでに絶対配置(全部) → free。倒す必要がないので従来どおり座標移動
+ *   2. フロー内と絶対配置の混ざった複数選択 → not-contiguous(何もしない)。
+ *      片方を倒すと版面が崩れ、倒さないと群がバラけるため、どちらも選ばない
+ *   3. 親が並べ替えの器になり得ない display → free
+ *   4. 複数選択が別の親 / 連続していない → not-contiguous
+ *   5. 兄弟がいない → no-siblings
+ *   6. それ以外 → reorder
+ */
+export function resolveWebpageDrag(
+  elements: HTMLElement[],
+  doc: Document,
+): WebpageDragPlan {
+  const win = doc.defaultView;
+  if (!win || elements.length === 0) return { kind: 'free' };
+
+  const inFlow = elements.filter((el) => isInFlow(el, win));
+  // 1. 全部フロー外 → 触っても版面は動かない。従来どおりの自由移動
+  if (inFlow.length === 0) return { kind: 'free' };
+  // 2. 混在 → 群としてまとまった扱いができない
+  if (inFlow.length !== elements.length) return { kind: 'not-contiguous' };
+
+  const parent = elements[0].parentElement;
+  if (!parent) return { kind: 'free' };
+  if (elements.some((el) => el.parentElement !== parent)) {
+    return { kind: 'not-contiguous' };
+  }
+
+  // 3. 器になり得る display か
+  const layout = classifyDisplay(win.getComputedStyle(parent).display);
+  if (!layout) return { kind: 'free' };
+
+  const children = realChildren(parent);
+  const indices = elements
+    .map((el) => children.indexOf(el))
+    .filter((i) => i >= 0)
+    .sort((a, b) => a - b);
+  if (indices.length !== elements.length) return { kind: 'free' };
+
+  // 4. 連続した塊か(飛び飛びの選択を1か所へ寄せると、選んでいない要素の順番まで変わる)
+  const contiguous = indices.every((v, i) => i === 0 || v === indices[i - 1] + 1);
+  if (!contiguous) return { kind: 'not-contiguous' };
+
+  // 5. 並べ替える相手がいない
+  if (children.length - elements.length < 1) return { kind: 'no-siblings' };
+
+  // DOM順に揃えてから渡す(選択の順番ではなく並びの順番で動かす)
+  const ordered = indices.map((i) => children[i]);
+  return { kind: 'reorder', plan: { elements: ordered, parent, layout } };
+}
+
+/**
+ * 並べ替えの下ごしらえ(ドラッグが動き出した最初の1回だけ呼ぶ)
+ *
+ * @param options.restoreFlow
+ *   子の絶対配置を解いてフローへ戻すか。
+ *   slide の明示ONの器では true(ONにした後に別経路で絶対配置が焼き込まれた子を直す)。
+ *   **webpage では必ず false**。webpage の普通の親には「Cmd+ドラッグで自由配置にした子」が
+ *   混ざり得て、隣の要素を普通にドラッグしただけでそれが勝手にフローへ戻ってしまうため。
+ */
+export function startReorder(
+  plan: ReorderPlan,
+  doc: Document,
+  options: { restoreFlow: boolean },
+): ReorderSession | null {
+  const win = doc.defaultView;
+  const { parent, elements, layout } = plan;
+  if (!win || elements.length === 0) return null;
 
-  // 子はONにした時点でフロー化済み。ただし後から追加された子や、
-  // 別経路で絶対配置が焼き込まれた子が混じると並びが崩れるので保険で通す
-  restoreChildrenToFlow(parent);
+  if (options.restoreFlow) {
+    // 子はONにした時点でフロー化済み。ただし後から追加された子や、
+    // 別経路で絶対配置が焼き込まれた子が混じると並びが崩れるので保険で通す
+    restoreChildrenToFlow(parent);
+  }
 
   const children = realChildren(parent);
-  const originalIndex = children.indexOf(element);
-  if (originalIndex < 0) return null;
+  const moving = new Set(elements);
+  const siblings = children.filter((c) => !moving.has(c));
+  const firstIndex = children.indexOf(elements[0]);
+  if (firstIndex < 0) return null;
+
+  // 連続した塊が children の firstIndex から始まるなら、
+  // 塊を抜いた siblings の中では firstIndex 番目の手前が「元の位置」になる
+  const originalIndex = firstIndex;
 
-  const dir = win.getComputedStyle(parent).flexDirection || 'row';
+  const parentStyle = win.getComputedStyle(parent);
+  const dir = parentStyle.flexDirection || 'row';
 
   // 掴んでいる要素は「持ち上がっている」ことを見せる。
   // 既存の .dragging(opacity .7 + grabbing)をそのまま使う。インラインstyleで
   // 当てると保存HTMLに漏れうるが、このクラスは getCleanHtml が必ず剥がす
-
-  element.classList.add('dragging');
+  for (const el of elements) el.classList.add('dragging');
 
   return {
-    element,
+    elements,
     parent,
-    siblings: children.filter((c) => c !== element),
-    isColumn: dir.startsWith('column'),
+    siblings,
+    layout,
+    // block は縦一列。flex の computed は block でも 'row' を返すので、
+    // flexDirection をそのまま信じると横軸で判定してしまう
+    isColumn: layout === 'block' ? true : dir.startsWith('column'),
+    isReverse: layout === 'flex' && dir.endsWith('-reverse'),
     originalIndex,
     lastIndex: -1,
+    lastAxis: 'y',
+    lastNeighbor: null,
+    lastBefore: true,
   };
 }
 
@@ -124,8 +282,14 @@ export function startReorder(element: HTMLElement, doc: Document): ReorderSessio
  * カーソル位置から「兄弟の何番目の前に入るか」を決める
  *
  * 返すのは siblings(動かしている要素を除いた配列)に対する挿入位置。
- * 各兄弟の中点と比べるだけなので、要素が可変幅でも破綻しない。
- * flex-direction:*-reverse は画面上の並びとDOM順が逆なので、最後に反転する。
+ *
+ * block / flex は1本の軸しかないので、各兄弟の中点と比べるだけでよい。
+ * 要素が可変幅でも破綻しない。flex-direction:*-reverse は画面上の並びと
+ * DOM順が逆なので、最後に反転する。
+ *
+ * grid / flex-wrap は1本の軸では決まらない(右隣も下隣もいる)。
+ * カーソルに一番近い兄弟を選び、その中心からのずれを要素の幅・高さで正規化して、
+ * **ずれが支配的なほうの軸**で前後を決める。これ以上凝らない。
  */
 export function computeInsertIndex(
   session: ReorderSession,
@@ -133,9 +297,40 @@ export function computeInsertIndex(
   clientY: number,
   doc: Document,
 ): number {
-  const { siblings, isColumn } = session;
-  const dir = doc.defaultView?.getComputedStyle(session.parent).flexDirection || 'row';
-  const isReverse = dir.endsWith('-reverse');
+  const { siblings, isColumn, isReverse, layout } = session;
+  if (siblings.length === 0) return 0;
+
+  if (layout === 'grid2d') {
+    let nearest = 0;
+    let best = Infinity;
+    let bestRect: DOMRect | null = null;
+    for (let i = 0; i < siblings.length; i++) {
+      const r = siblings[i].getBoundingClientRect();
+      const cx = r.left + r.width / 2;
+      const cy = r.top + r.height / 2;
+      const d = (clientX - cx) ** 2 + (clientY - cy) ** 2;
+      if (d < best) {
+        best = d;
+        nearest = i;
+        bestRect = r;
+      }
+    }
+    if (!bestRect) return siblings.length;
+
+    const cx = bestRect.left + bestRect.width / 2;
+    const cy = bestRect.top + bestRect.height / 2;
+    // 幅・高さで割ってから比べる。割らないと、横長のカードで
+    // 少し上下にずれただけで「縦の入れ替え」に化ける
+    const nx = bestRect.width > 0 ? (clientX - cx) / bestRect.width : 0;
+    const ny = bestRect.height > 0 ? (clientY - cy) / bestRect.height : 0;
+    const useY = Math.abs(ny) > Math.abs(nx);
+    const before = useY ? clientY < cy : clientX < cx;
+
+    session.lastAxis = useY ? 'y' : 'x';
+    session.lastNeighbor = siblings[nearest];
+    session.lastBefore = before;
+    return before ? nearest : nearest + 1;
+  }
 
   let index = siblings.length;
   for (let i = 0; i < siblings.length; i++) {
@@ -148,6 +343,8 @@ export function computeInsertIndex(
       break;
     }
   }
+  session.lastAxis = isColumn ? 'y' : 'x';
+  session.lastNeighbor = null;
   return index;
 }
 
@@ -158,6 +355,9 @@ export function computeInsertIndex(
  * position が無いと座標の基準にできない。親の style を書き換えると版面が動くので、
  * body直下に fixed で置く(画面座標そのまま)。ドラッグ中しか出ないので
  * スクロール追従は不要。
+ *
+ * grid2d だけは親いっぱいに引くと意味が伝わらない(どの行に入るか分からない)ので、
+ * 「入る先の隣人」の辺に、その隣人の幅・高さで引く。
  */
 export function drawInsertIndicator(
   session: ReorderSession,
@@ -166,10 +366,26 @@ export function drawInsertIndicator(
 ): void {
   clearInsertIndicator(doc);
 
-  const { siblings, isColumn, parent } = session;
+  const { siblings, isColumn, isReverse, parent, layout } = session;
+  const base = 'position:fixed;z-index:10001;pointer-events:none;' +
+    `background:${BLUE};border-radius:1.5px;box-shadow:0 0 6px rgba(13,153,255,0.5);`;
+  const line = doc.createElement('div');
+  line.id = INDICATOR_ID;
+
+  if (layout === 'grid2d' && session.lastNeighbor) {
+    const r = session.lastNeighbor.getBoundingClientRect();
+    if (session.lastAxis === 'y') {
+      const y = session.lastBefore ? r.top : r.bottom;
+      line.style.cssText = base + `left:${r.left}px;width:${r.width}px;top:${y - 1.5}px;height:3px;`;
+    } else {
+      const x = session.lastBefore ? r.left : r.right;
+      line.style.cssText = base + `top:${r.top}px;height:${r.height}px;left:${x - 1.5}px;width:3px;`;
+    }
+    doc.body.appendChild(line);
+    return;
+  }
+
   const parentRect = parent.getBoundingClientRect();
-  const dir = doc.defaultView?.getComputedStyle(parent).flexDirection || 'row';
-  const isReverse = dir.endsWith('-reverse');
 
   // 挿入位置の座標。末尾なら最後の兄弟の後ろ、それ以外は index 番目の手前
   let pos: number;
@@ -183,10 +399,6 @@ export function drawInsertIndicator(
     pos = isColumn ? (isReverse ? r.bottom : r.top) : isReverse ? r.right : r.left;
   }
 
-  const line = doc.createElement('div');
-  line.id = INDICATOR_ID;
-  const base = 'position:fixed;z-index:10001;pointer-events:none;' +
-    `background:${BLUE};border-radius:1.5px;box-shadow:0 0 6px rgba(13,153,255,0.5);`;
   line.style.cssText = isColumn
     ? base + `left:${parentRect.left}px;width:${parentRect.width}px;top:${pos - 1.5}px;height:3px;`
     : base + `top:${parentRect.top}px;height:${parentRect.height}px;left:${pos - 1.5}px;width:3px;`;
@@ -200,32 +412,45 @@ export function clearInsertIndicator(doc: Document): void {
 }
 
 /**
- * 並べ替えを確定する。順番が変わったら true
+ * 塊を siblings の index 番目の手前へ入れる。順番が変わったら true
  *
  * insertBefore しか使わないので、要素は必ず同じ親の中に留まる。
  */
+export function applyReorder(
+  parent: HTMLElement,
+  elements: HTMLElement[],
+  siblings: HTMLElement[],
+  originalIndex: number,
+  index: number,
+): boolean {
+  // すでにその位置にいるなら DOM を触らない(履歴を無駄に汚さない)
+  if (index === originalIndex) return false;
+
+  const target = index >= siblings.length ? null : siblings[index];
+  // 塊はDOM順のまま順に差し込む。同じ参照点の前に入れれば元の順番が保たれる
+  for (const el of elements) parent.insertBefore(el, target);
+  return true;
+}
+
+/**
+ * 並べ替えを確定する。順番が変わったら true
+ */
 export function commitReorder(
   session: ReorderSession,
   index: number,
   doc: Document,
 ): boolean {
-  const { element, parent, siblings } = session;
+  const { elements, parent, siblings, originalIndex } = session;
 
   // 見た目の持ち上げを戻してから並べ替える(保存HTMLに opacity を残さない)
   endReorder(session, doc);
 
-  const target = index >= siblings.length ? null : siblings[index];
-  // すでにその位置にいるなら DOM を触らない(履歴を無駄に汚さない)
-  if (target === element.nextElementSibling) return false;
-  if (target === null && element === parent.lastElementChild) return false;
-
-  parent.insertBefore(element, target);
-  return true;
+  return applyReorder(parent, elements, siblings, originalIndex, index);
 }
 
 /** 見た目の持ち上げと線を片付ける(取り消し・中断からも呼ぶ) */
 export function endReorder(session: ReorderSession | null, doc: Document): void {
   clearInsertIndicator(doc);
   if (!session) return;
-  session.element.classList.remove('dragging');
+  for (const el of session.elements) el.classList.remove('dragging');
 }

package/src/editor/utils/geometry.ts

@@ -191,10 +191,11 @@ export function measureStyleSize(
   doc: Document
 ): { width: number; height: number } {
   const cs = doc.defaultView?.getComputedStyle(element);
-  let width = element.offsetWidth;
-  let height = element.offsetHeight;
+  // SVG は offsetWidth を持たない(undefined)。0 扱いにして下の矩形フォールバックへ流す
+  let width = typeof element.offsetWidth === 'number' ? element.offsetWidth : 0;
+  let height = typeof element.offsetHeight === 'number' ? element.offsetHeight : 0;
 
-  // インライン要素などで offsetWidth が 0 のときは矩形から拾う（保険）
+  // インライン要素や SVG で offsetWidth が取れないときは矩形から拾う（保険）
   if (width === 0 && height === 0) {
     const rect = element.getBoundingClientRect();
     const scale = getArtboardRenderScale(doc);

package/src/editor/utils/html-utils.ts

@@ -179,18 +179,23 @@ export function generateEditableHtml(content: string, editorMode: EditorMode = '
       background-color: ${CANVAS_BG_COLOR};
     }
 
-    /* パディング用ラッパー（スクロール領域確保） */
+    /* パディング用ラッパー（スクロール領域確保）
+       webpage は上端固定にする。中央寄せだと、テキスト入力や並べ替えでページの
+       高さが変わるたびに紙面が上下へ動き、見ていた場所が飛ぶ(実測 84〜729px)。
+       ブラウザのページと同じで、高さが変わっても上端は動かないのが正しい */
     #canvas-scroll-area {
       display: flex;
-      align-items: center;
+      align-items: ${editorMode === 'webpage' ? 'flex-start' : 'center'};
       justify-content: center;
       /* サイズはJSで動的に設定 */
     }
 
-    /* ズーム/パン適用対象 */
+    /* ズーム/パン適用対象。
+       webpage は上端固定なので、縮小も上端を基準にする(center だと縮んだ分だけ
+       紙面が下へずれ、上端固定の意味が無くなる) */
     #artboard-wrapper {
       flex-shrink: 0;
-      transform-origin: center center;
+      transform-origin: ${editorMode === 'webpage' ? 'top center' : 'center center'};
       /* transform は JS で設定 */
       /* 読み込み直後は非表示。倍率適用前の等倍(巨大)な一瞬を見せない。
          EditorCanvas がロード時に倍率を当ててから可視化する */
@@ -230,7 +235,7 @@ export function generateEditableHtml(content: string, editorMode: EditorMode = '
     }
   </style>
 </head>
-<body tabindex="-1">
+<body tabindex="-1" data-editor-mode="${editorMode}">
   <div id="canvas-container">
     <div id="canvas-scroll-area">
       <div id="artboard-wrapper">

package/src/hooks/useEditorShortcuts.ts

@@ -99,14 +99,46 @@ function isEditableTarget(target: EventTarget | null): boolean {
  *
  * [移植時の修正] 以前は copy / cut / paste / selectAll もここに入っていたため、
  * テキスト編集中の Cmd+C が「要素のコピー」に化け、Cmd+A が兄弟要素の全選択になっていた。
- * 編集中は Undo/Redo と Escape（編集終了）以外はブラウザ既定に通す。
+ *
+ * [修正] Undo/Redo もここから外した。
+ * 編集中の Cmd+Z を横取りすると、ブラウザ既定の「文字入力の取り消し」が止まる一方で、
+ * エディタの履歴には打鍵ごとの段が無い（テキスト編集は確定時に1件積まれる）ため、
+ * **押しても何も起きない**状態だった（実測: 文字を打ってCmd+Z→入力は戻らない）。
+ * 選択したテキストを打ち間違えて上書きすると、確定するまで取り戻せなかった。
+ * 編集中の取り消しは文字単位＝ブラウザ既定に任せ、
+ * 要素単位の取り消し（エディタの履歴）は編集を抜けてから効かせる。
+ * PowerPoint / Figma も編集中の Cmd+Z は文字単位で動く。
  */
-const ALLOWED_IN_EDITABLE: ShortcutAction[] = ['undo', 'redo', 'deselect'];
+const ALLOWED_IN_EDITABLE: ShortcutAction[] = ['deselect'];
 
 function isAllowedInEditableContext(action: ShortcutAction | undefined): boolean {
   return action ? ALLOWED_IN_EDITABLE.includes(action) : false;
 }
 
+/**
+ * キャンバスにフォーカスがあるときだけ横取りするアクション。
+ *
+ * Tab はブラウザ既定の「次のUIへフォーカス移動」でもある。無条件に奪うと
+ * ヘッダーやパネルのボタンをキーボードだけで辿れなくなるため、
+ * 紙面を触っている間だけ「兄弟要素の巡回」に使う。
+ */
+const CANVAS_ONLY: ShortcutAction[] = ['selectNextSibling', 'selectPrevSibling'];
+
+/**
+ * このイベントがキャンバス(iframe)側の操作か。
+ * - iframe の document から来たイベント → キャンバス
+ * - 親側から来た場合は、body か iframe 自身にフォーカスがあるときだけキャンバス扱い
+ *   （ボタンや入力にフォーカスがあるなら、それはUIの操作中）
+ */
+function isCanvasEvent(event: KeyboardEvent): boolean {
+  const doc = (event.target as HTMLElement | null)?.ownerDocument ?? null;
+  if (doc && typeof document !== 'undefined' && doc !== document) return true;
+  const active = typeof document !== 'undefined' ? document.activeElement : null;
+  if (!active) return true;
+  const tag = active.tagName?.toUpperCase();
+  return tag === 'BODY' || tag === 'IFRAME';
+}
+
 /**
  * エディタのキーボードショートカット・ディスパッチャ（唯一の経路）
  *
@@ -153,6 +185,11 @@ export function useEditorShortcuts(
         return;
       }
 
+      // キャンバス限定のキー(Tab)は、UI側にフォーカスがあるときは既定動作に通す
+      if (CANVAS_ONLY.includes(action) && !isCanvasEvent(keyboardEvent)) {
+        return;
+      }
+
       const callback = callbacksRef.current[action];
       if (!callback) return;
 

package/src/styles/editor.css

@@ -20,6 +20,14 @@
 /* エディタUIが参照するトークン（shadcn/ui 由来）。
    利用側の設定に依存しないよう、ここで閉じる */
 @theme {
+  /* Tailwind既定テーマの --font-sans / --font-serif を出力から外す。
+     dist/editor.css が :root へこれらを吐くと、利用側アプリが @theme で定義した
+     フォント(例: 游ゴシック)を読み込み順で上書きしてしまい、エディタを開いた
+     画面だけスライドの書体が変わる(編集キャンバスのiframeはホストの :root から
+     --font-* を収集するため、汚染がそのまま持ち込まれる)。
+     --font-mono はエディタUIの kbd 表示で使うため残す。 */
+  --font-sans: initial;
+  --font-serif: initial;
   --color-background: #ffffff;
   --color-foreground: #0a0a0a;
   --color-card: #ffffff;