@growgroup/visual-editor 0.1.0

package/src/editor/utils/paste-sanitizer.ts

@@ -0,0 +1,244 @@
+/**
+ * paste-sanitizer.ts
+ *
+ * DOMPurify configuration for sanitizing pasted HTML content.
+ * Key design: Preserve inline styles (Chrome automatically converts computed styles to inline)
+ * while removing dangerous content like scripts and event handlers.
+ */
+
+import DOMPurify, { type Config as DOMPurifyConfig } from 'dompurify';
+
+/**
+ * DOMPurify configuration optimized for rich paste operations.
+ * - Allows broad range of HTML tags for content preservation
+ * - Preserves style and class attributes (critical for Chrome's inline style preservation)
+ * - Blocks scripts, iframes, forms, and event handlers for security
+ */
+const PASTE_SANITIZE_CONFIG: DOMPurifyConfig = {
+  // Allowed tags - comprehensive list for content preservation
+  ALLOWED_TAGS: [
+    // Structure
+    'div', 'span', 'section', 'article', 'header', 'footer', 'nav', 'aside', 'main',
+    // Text
+    'p', 'h1', 'h2', 'h3', 'h4', 'h5', 'h6', 'br', 'hr',
+    // Formatting
+    'strong', 'b', 'em', 'i', 'u', 's', 'strike', 'del', 'ins', 'sub', 'sup',
+    'mark', 'small', 'abbr', 'cite', 'code', 'pre', 'kbd', 'samp', 'var',
+    // Lists
+    'ul', 'ol', 'li', 'dl', 'dt', 'dd',
+    // Tables
+    'table', 'thead', 'tbody', 'tfoot', 'tr', 'th', 'td', 'colgroup', 'col', 'caption',
+    // Media
+    'img', 'figure', 'figcaption', 'picture', 'source',
+    // Links
+    'a',
+    // Quotes
+    'blockquote', 'q',
+    // SVG (for SVG paste support)
+    'svg', 'path', 'circle', 'rect', 'ellipse', 'line', 'polyline', 'polygon',
+    'text', 'tspan', 'g', 'defs', 'use', 'symbol', 'clipPath', 'mask',
+    'linearGradient', 'radialGradient', 'stop', 'pattern', 'image',
+    'foreignObject', 'title', 'desc',
+  ],
+
+  // Allowed attributes - preserve styling and structure
+  ALLOWED_ATTR: [
+    // Core
+    'id', 'class', 'style', 'title', 'lang', 'dir',
+    // Links
+    'href', 'target', 'rel',
+    // Media
+    'src', 'alt', 'width', 'height', 'loading',
+    // Tables
+    'colspan', 'rowspan', 'scope', 'headers',
+    // Data attributes (for our editor)
+    'data-editable', 'data-element-id',
+    // SVG attributes
+    'viewBox', 'xmlns', 'fill', 'stroke', 'stroke-width', 'stroke-linecap',
+    'stroke-linejoin', 'stroke-dasharray', 'stroke-dashoffset', 'opacity',
+    'd', 'cx', 'cy', 'r', 'rx', 'ry', 'x', 'y', 'x1', 'y1', 'x2', 'y2',
+    'points', 'transform', 'preserveAspectRatio', 'xlink:href',
+    'font-family', 'font-size', 'font-weight', 'text-anchor', 'dominant-baseline',
+    'clip-path', 'mask', 'filter', 'marker-start', 'marker-mid', 'marker-end',
+    'gradientUnits', 'gradientTransform', 'spreadMethod', 'offset', 'stop-color', 'stop-opacity',
+    'patternUnits', 'patternContentUnits', 'patternTransform',
+  ],
+
+  // Forbidden tags - security critical
+  FORBID_TAGS: [
+    'script', 'iframe', 'object', 'embed', 'applet',
+    'form', 'input', 'button', 'select', 'textarea', 'label',
+    'meta', 'link', 'base', 'style', 'noscript',
+  ],
+
+  // Forbidden attributes - prevent XSS
+  FORBID_ATTR: [
+    // Event handlers
+    'onclick', 'ondblclick', 'onmousedown', 'onmouseup', 'onmouseover', 'onmousemove',
+    'onmouseout', 'onmouseenter', 'onmouseleave', 'onkeydown', 'onkeypress', 'onkeyup',
+    'onfocus', 'onblur', 'onchange', 'oninput', 'onsubmit', 'onreset',
+    'onload', 'onerror', 'onabort', 'onscroll', 'onresize',
+    'oncontextmenu', 'ondrag', 'ondragend', 'ondragenter', 'ondragleave',
+    'ondragover', 'ondragstart', 'ondrop', 'oncopy', 'oncut', 'onpaste',
+    'onanimationstart', 'onanimationend', 'onanimationiteration',
+    'ontransitionend', 'onwheel', 'ontouchstart', 'ontouchend', 'ontouchmove',
+    // Form related
+    'action', 'method', 'formaction', 'formmethod',
+    // Dangerous
+    'srcdoc', 'sandbox', 'allow',
+  ],
+
+  // Allow data attributes
+  ALLOW_DATA_ATTR: true,
+
+  // Allow external protocol links (but not javascript:)
+  ALLOW_UNKNOWN_PROTOCOLS: false,
+
+  // Keep document structure
+  WHOLE_DOCUMENT: false,
+
+  // Return DOM instead of string for better manipulation
+  RETURN_DOM: false,
+  RETURN_DOM_FRAGMENT: false,
+
+  // Sanitize shadow DOM
+  SANITIZE_DOM: true,
+
+  // Keep aria attributes for accessibility
+  KEEP_CONTENT: true,
+
+  // Force all URLs to be safe
+  SAFE_FOR_TEMPLATES: false,
+};
+
+/**
+ * Sanitize pasted HTML content while preserving inline styles.
+ *
+ * @param html - Raw HTML string from clipboard
+ * @returns Sanitized HTML string with styles preserved
+ */
+export function sanitizePastedHtml(html: string): string {
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  return DOMPurify.sanitize(html, PASTE_SANITIZE_CONFIG as any) as unknown as string;
+}
+
+/**
+ * Check if HTML contains potentially dangerous content before sanitization.
+ * Useful for logging/debugging suspicious paste operations.
+ *
+ * @param html - Raw HTML string to check
+ * @returns Object indicating what dangerous content was found
+ */
+export function detectDangerousContent(html: string): {
+  hasScript: boolean;
+  hasEventHandlers: boolean;
+  hasIframe: boolean;
+  hasForm: boolean;
+  dangerousPatterns: string[];
+} {
+  const dangerousPatterns: string[] = [];
+
+  const hasScript = /<script\b/i.test(html);
+  if (hasScript) dangerousPatterns.push('script tag');
+
+  const hasEventHandlers = /\bon\w+\s*=/i.test(html);
+  if (hasEventHandlers) dangerousPatterns.push('event handlers');
+
+  const hasIframe = /<iframe\b/i.test(html);
+  if (hasIframe) dangerousPatterns.push('iframe');
+
+  const hasForm = /<form\b/i.test(html);
+  if (hasForm) dangerousPatterns.push('form');
+
+  // Check for javascript: protocol
+  if (/javascript:/i.test(html)) {
+    dangerousPatterns.push('javascript: protocol');
+  }
+
+  // Check for data: URIs in src (can be dangerous)
+  if (/src\s*=\s*["']?\s*data:/i.test(html)) {
+    dangerousPatterns.push('data: URI in src');
+  }
+
+  return {
+    hasScript,
+    hasEventHandlers,
+    hasIframe,
+    hasForm,
+    dangerousPatterns,
+  };
+}
+
+/**
+ * Clean Microsoft Office specific markup while preserving visual styles.
+ * Office applications add proprietary tags and namespaces that should be removed
+ * while keeping the visual formatting.
+ *
+ * @param html - HTML string potentially containing Office markup
+ * @returns Cleaned HTML string
+ */
+export function cleanOfficeMarkup(html: string): string {
+  let cleaned = html;
+
+  // Remove Word-specific tags
+  cleaned = cleaned.replace(/<o:p[^>]*>[\s\S]*?<\/o:p>/gi, '');
+  cleaned = cleaned.replace(/<w:[^>]*>[\s\S]*?<\/w:[^>]*>/gi, '');
+  cleaned = cleaned.replace(/<m:[^>]*>[\s\S]*?<\/m:[^>]*>/gi, '');
+
+  // Remove XML namespaces from tags but keep the tags
+  cleaned = cleaned.replace(/<(\/?)\w+:/gi, '<$1');
+
+  // Remove conditional comments (IE-specific)
+  cleaned = cleaned.replace(/<!--\[if[^\]]*\]>[\s\S]*?<!\[endif\]-->/gi, '');
+  cleaned = cleaned.replace(/<!--\[if[^\]]*\]>[\s\S]*?-->/gi, '');
+
+  // Remove XML declarations
+  cleaned = cleaned.replace(/<\?xml[^>]*\?>/gi, '');
+
+  // Remove meta tags that might have been included
+  cleaned = cleaned.replace(/<meta[^>]*>/gi, '');
+
+  // Remove style tags (we rely on inline styles)
+  cleaned = cleaned.replace(/<style[^>]*>[\s\S]*?<\/style>/gi, '');
+
+  // Clean up mso-* styles (Microsoft Office specific) that cause issues
+  // but preserve other inline styles
+  cleaned = cleaned.replace(/mso-[^;:"']+:[^;:"']+;?/gi, '');
+
+  // Remove class attributes that reference Office stylesheets
+  cleaned = cleaned.replace(/class="?Mso[^"'\s>]+"?/gi, '');
+
+  // Clean up empty style attributes
+  cleaned = cleaned.replace(/style=["']\s*["']/gi, '');
+
+  // Clean up multiple spaces
+  cleaned = cleaned.replace(/\s+/g, ' ');
+
+  return cleaned;
+}
+
+/**
+ * Clean Excel-specific markup while preserving table structure and styles.
+ *
+ * @param html - HTML string from Excel clipboard
+ * @returns Cleaned HTML string with table structure preserved
+ */
+export function cleanExcelMarkup(html: string): string {
+  let cleaned = html;
+
+  // Apply general Office cleanup
+  cleaned = cleanOfficeMarkup(cleaned);
+
+  // Remove Excel-specific attributes
+  cleaned = cleaned.replace(/x:num="[^"]*"/gi, '');
+  cleaned = cleaned.replace(/x:str="[^"]*"/gi, '');
+
+  // Clean up Excel's width/height inline styles (often too specific)
+  // But preserve background colors, fonts, etc.
+  cleaned = cleaned.replace(/width:\s*[\d.]+pt;?/gi, '');
+  cleaned = cleaned.replace(/height:\s*[\d.]+pt;?/gi, '');
+
+  return cleaned;
+}
+
+export { PASTE_SANITIZE_CONFIG };

package/src/editor/utils/restore-flow.ts

@@ -0,0 +1,188 @@
+/**
+ * オートレイアウトの「明示的なON」と、そのための子のフロー化。
+ *
+ * 【なぜ明示的なONにするか】
+ * テンプレート由来の display:flex はスライド中に山ほどあり、それを全部
+ * 「並べ替えの器」として扱うと、既定のドラッグ(絶対配置化して自由移動)が
+ * 勝手に変わってしまう。そこで **右パネルでレイアウトをONにしたコンテナだけ** を
+ * 目印クラス gg-autolayout で区別し、挙動を変えるのはその中だけに閉じる。
+ *
+ * 目印を class にしているのは、書き戻しエンジンを触らずに原本TSXへ乗せるため。
+ * data-gg-* は保存時のサニタイズで落ちるので使えない。
+ *
+ * 【ONにした瞬間に何をするか】(Figmaの「オートレイアウトを追加」と同じ)
+ * エディタは開いた時点で全要素を絶対配置へ倒す(EditorCanvas の一括変換)。
+ * 絶対配置の子はフレックスの並びから外れるため、そのままでは gap も方向も
+ * 効かない(実測: gap 6→60px で子の位置は 278/285/292 のまま不動。
+ * position を static に戻した瞬間 278/312/347 になった)。
+ * そこでONの瞬間に、**今見えている位置の順**で子を並べ直し、
+ * position/left/top を外して流し込みへ戻す。サイズは維持する。
+ */
+
+/** オートレイアウトを明示的にONにした印。class なので原本TSXまで届く */
+export const AUTOLAYOUT_CLASS = 'gg-autolayout';
+
+/** この要素は明示的にオートレイアウトONか */
+export function isAutoLayoutContainer(element: HTMLElement): boolean {
+  return element.classList.contains(AUTOLAYOUT_CLASS);
+}
+
+/** 一括変換が書き込む幾何プロパティ。これらだけを取り除く */
+const CONVERTED_PROPS = [
+  'position',
+  'left',
+  'top',
+  'right',
+  'bottom',
+  'width',
+  'height',
+  'margin',
+  'flex',
+] as const;
+
+/** 退避された変換前スタイルの中で、その要素が元々持っていた値を引く */
+function prestyleValue(pres: string, prop: string): string | null {
+  // data-gg-prestyle は素の style 文字列。'__none__' は「元は style 属性なし」
+  if (!pres || pres === '__none__') return null;
+  const re = new RegExp(`(?:^|;)\\s*${prop.replace(/[A-Z]/g, (c) => '-' + c.toLowerCase())}\\s*:\\s*([^;]+)`, 'i');
+  const m = pres.match(re);
+  return m ? m[1].trim() : null;
+}
+
+/**
+ * 要素を流し込みへ戻す。戻したら true
+ *
+ * 変換が書いた幾何プロパティを消し、元の style に同じ指定があればそれを書き戻す。
+ * 「元から絶対配置だった要素」(退避値に position:absolute がある)は
+ * ユーザーの意図なので触らない。
+ */
+export function restoreElementToFlow(element: HTMLElement): boolean {
+  const pres = element.getAttribute('data-gg-prestyle');
+
+  // 退避が無い = 一括変換を経ていない。勝手に位置指定を剥がすと
+  // ユーザーが自分で置いた要素を動かしてしまうので何もしない
+  if (pres === null) return false;
+
+  const originalPosition = prestyleValue(pres, 'position');
+  if (originalPosition === 'absolute' || originalPosition === 'fixed') return false;
+
+  for (const prop of CONVERTED_PROPS) {
+    const original = prestyleValue(pres, prop);
+    if (original) {
+      element.style.setProperty(
+        prop.replace(/[A-Z]/g, (c) => '-' + c.toLowerCase()),
+        original,
+      );
+    } else {
+      element.style.removeProperty(prop.replace(/[A-Z]/g, (c) => '-' + c.toLowerCase()));
+    }
+  }
+  return true;
+}
+
+/**
+ * コンテナの直接の子を流し込みへ戻す。戻した数を返す
+ *
+ * 対象は**直接の子だけ**。孫まで戻すと、子の内側で絶対配置に頼っている
+ * 作り込み(重ね置きの図など)まで崩れる。フレックスの並びに要るのは
+ * 直接の子が流れに乗っていることだけ。
+ */
+export function restoreChildrenToFlow(container: HTMLElement): number {
+  let n = 0;
+  for (const node of Array.from(container.children)) {
+    // [注意] `node instanceof HTMLElement` は使えない(iframeとは別realmのため常にfalse)
+    const el = node as HTMLElement;
+    if (typeof el.matches !== 'function') continue;
+    if (el.matches('.selection-box,.marquee-selection-box,.resize-handle,.rotation-handle,.size-label,.element-breadcrumb')) {
+      continue;
+    }
+    if (el.tagName === 'SCRIPT' || el.tagName === 'STYLE') continue;
+    if (restoreElementToFlow(el)) n++;
+  }
+  return n;
+}
+
+/**
+ * コンテナ自身の「サイズの固定」を解く
+ *
+ * 一括変換は width/height も焼き込む。縦積みに変えたのに高さが固定のままだと
+ * 中身がはみ出す(overflow)ため、元々サイズ指定が無かったなら外す。
+ * 位置(left/top)は動かさない — コンテナの居場所はユーザーが決めたものなので。
+ */
+export function relaxContainerSize(container: HTMLElement): void {
+  const pres = container.getAttribute('data-gg-prestyle');
+  if (pres === null) return;
+  for (const prop of ['width', 'height'] as const) {
+    const original = prestyleValue(pres, prop);
+    if (original) container.style.setProperty(prop, original);
+    else container.style.removeProperty(prop);
+  }
+}
+
+/** 並べ替え・整列の対象にしない、エディタが描いている飾り */
+const OVERLAY_SELECTOR =
+  '.selection-box,.marquee-selection-box,.resize-handle,.rotation-handle,' +
+  '.size-label,.element-breadcrumb,.gg-comment-layer,.gg-crop-ui,' +
+  '#gg-measure-layer,#gg-smart-guides,#gg-reorder-indicator';
+
+/** 実体のある直接の子だけを取り出す */
+function layoutChildren(container: HTMLElement): HTMLElement[] {
+  const out: HTMLElement[] = [];
+  for (const node of Array.from(container.children)) {
+    // [注意] `node instanceof HTMLElement` は使えない(iframeとは別realmのため常にfalse)
+    const el = node as HTMLElement;
+    if (typeof el.matches !== 'function') continue;
+    if (el.matches(OVERLAY_SELECTOR)) continue;
+    if (el.tagName === 'SCRIPT' || el.tagName === 'STYLE') continue;
+    out.push(el);
+  }
+  return out;
+}
+
+/**
+ * オートレイアウトをONにする。
+ *
+ * 1. 目印クラスを付ける
+ * 2. 今見えている位置の順に子を並べ替える(row=左→右 / column=上→下)
+ * 3. 子の絶対配置を解いて流し込みへ戻す。**サイズは維持する**
+ *
+ * 並べ替えを先に決めてから position を外すのが肝。先に外すと要素が動いてしまい、
+ * 「見えていた順」が分からなくなる。
+ */
+export function enableAutoLayout(
+  container: HTMLElement,
+  direction: 'row' | 'column',
+): number {
+  container.classList.add(AUTOLAYOUT_CLASS);
+
+  const children = layoutChildren(container);
+  if (children.length === 0) return 0;
+
+  // ① 動かす前に「見えている位置」と実寸を控える
+  const measured = children.map((el) => {
+    const r = el.getBoundingClientRect();
+    return { el, x: r.left, y: r.top, width: el.offsetWidth, height: el.offsetHeight };
+  });
+
+  // ② 視覚順に並べ替える。同じ座標なら元のDOM順を保つ(安定ソート)
+  const ordered = [...measured].sort((a, b) => (direction === 'column' ? a.y - b.y : a.x - b.x));
+
+  // ③ 絶対配置を解く。サイズは実寸で固定して、戻した瞬間に縮まないようにする
+  for (const m of ordered) {
+    for (const prop of ['position', 'left', 'top', 'right', 'bottom'] as const) {
+      m.el.style.removeProperty(prop);
+    }
+    if (!m.el.style.width && m.width > 0) m.el.style.width = `${m.width}px`;
+    if (!m.el.style.height && m.height > 0) m.el.style.height = `${m.height}px`;
+  }
+
+  // ④ DOM順を視覚順に合わせる(appendChild は既存ノードの移動として働く)
+  for (const m of ordered) container.appendChild(m.el);
+
+  return ordered.length;
+}
+
+/** オートレイアウトをOFFにする。印を外すだけで、子の位置は今の見た目のまま残す */
+export function disableAutoLayout(container: HTMLElement): void {
+  container.classList.remove(AUTOLAYOUT_CLASS);
+}

package/src/editor/utils/shape-library.ts

@@ -0,0 +1,171 @@
+/**
+ * 図形カタログ(PowerPointの「図形」ギャラリー相当)。
+ *
+ * 図形は div + clip-path / border-radius で表現する。SVGにしないのは、
+ *   - 「図形の書式」の塗り・枠線・影・透明度がそのまま効く
+ *   - ダブルクリックで中に文字を入れられる(実機と同じ)
+ *   - 書き戻しエンジンが普通のDOMとして原本TSXへ運べる
+ * ため。線・矢印だけは既存の描画ツール(SVG)に任せる。
+ *
+ * ギャラリーで図形を選ぶと `pendingShape` に入り、キャンバスを
+ * ドラッグすればその大きさで、クリックだけなら既定サイズで作られる。
+ */
+
+export type ShapeDef = {
+  id: string;
+  label: string;
+  /** 塗りを切り抜く形。無指定は矩形 */
+  clip?: string;
+  /** 角丸(border-radius) */
+  radius?: string;
+  /** 追加のスタイル(円環の枠など) */
+  extra?: Record<string, string>;
+  /** クリックだけで置いたときの既定サイズ */
+  w: number;
+  h: number;
+};
+
+/** 正多角形(星形)のpolygonを作る */
+function starPolygon(points: number, inner = 0.42): string {
+  const pts: string[] = [];
+  const step = Math.PI / points;
+  for (let i = 0; i < points * 2; i++) {
+    const r = i % 2 === 0 ? 0.5 : inner;
+    const a = -Math.PI / 2 + i * step;
+    const x = (0.5 + r * Math.cos(a)) * 100;
+    const y = (0.5 + r * Math.sin(a)) * 100;
+    pts.push(`${Math.round(x * 10) / 10}% ${Math.round(y * 10) / 10}%`);
+  }
+  return `polygon(${pts.join(', ')})`;
+}
+
+/** 正多角形(頂点が上) */
+function regularPolygon(n: number): string {
+  const pts: string[] = [];
+  for (let i = 0; i < n; i++) {
+    const a = -Math.PI / 2 + (i * 2 * Math.PI) / n;
+    const x = (0.5 + 0.5 * Math.cos(a)) * 100;
+    const y = (0.5 + 0.5 * Math.sin(a)) * 100;
+    pts.push(`${Math.round(x * 10) / 10}% ${Math.round(y * 10) / 10}%`);
+  }
+  return `polygon(${pts.join(', ')})`;
+}
+
+export const SHAPE_GROUPS: { group: string; shapes: ShapeDef[] }[] = [
+  {
+    group: '四角形',
+    shapes: [
+      { id: 'rect', label: '長方形', w: 260, h: 160 },
+      { id: 'square', label: '正方形', w: 200, h: 200 },
+      { id: 'round-rect', label: '角丸四角形', radius: '20px', w: 260, h: 160 },
+      { id: 'round-rect-lg', label: '角丸(大)', radius: '48px', w: 260, h: 160 },
+      { id: 'pill', label: '角丸(全周)', radius: '9999px', w: 280, h: 110 },
+      { id: 'round-top', label: '上だけ角丸', radius: '28px 28px 0 0', w: 260, h: 160 },
+      { id: 'round-diag', label: '対角を角丸', radius: '32px 0 32px 0', w: 260, h: 160 },
+      { id: 'round-one', label: '1つだけ角丸', radius: '48px 0 0 0', w: 260, h: 160 },
+      { id: 'cut-corner', label: '角を切り取り', clip: 'polygon(0 0, 82% 0, 100% 26%, 100% 100%, 0 100%)', w: 260, h: 170 },
+      { id: 'frame', label: '額縁', extra: { backgroundColor: 'transparent', border: '18px solid var(--color-gg-green)' }, w: 260, h: 180 },
+    ],
+  },
+  {
+    group: '基本図形',
+    shapes: [
+      { id: 'ellipse', label: '楕円', radius: '50%', w: 220, h: 220 },
+      { id: 'triangle', label: '三角形', clip: 'polygon(50% 0%, 100% 100%, 0% 100%)', w: 220, h: 190 },
+      { id: 'right-triangle', label: '直角三角形', clip: 'polygon(0% 0%, 0% 100%, 100% 100%)', w: 220, h: 190 },
+      { id: 'parallelogram', label: '平行四辺形', clip: 'polygon(18% 0%, 100% 0%, 82% 100%, 0% 100%)', w: 280, h: 160 },
+      { id: 'trapezoid', label: '台形', clip: 'polygon(20% 0%, 80% 0%, 100% 100%, 0% 100%)', w: 260, h: 160 },
+      { id: 'diamond', label: 'ひし形', clip: 'polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%)', w: 220, h: 220 },
+      { id: 'pentagon', label: '五角形', clip: regularPolygon(5), w: 220, h: 210 },
+      { id: 'hexagon', label: '六角形', clip: 'polygon(25% 0%, 75% 0%, 100% 50%, 75% 100%, 25% 100%, 0% 50%)', w: 240, h: 208 },
+      { id: 'heptagon', label: '七角形', clip: regularPolygon(7), w: 220, h: 220 },
+      { id: 'octagon', label: '八角形', clip: regularPolygon(8), w: 220, h: 220 },
+      { id: 'decagon', label: '十角形', clip: regularPolygon(10), w: 220, h: 220 },
+      { id: 'dodecagon', label: '十二角形', clip: regularPolygon(12), w: 220, h: 220 },
+      { id: 'cross', label: '十字', clip: 'polygon(35% 0, 65% 0, 65% 35%, 100% 35%, 100% 65%, 65% 65%, 65% 100%, 35% 100%, 35% 65%, 0 65%, 0 35%, 35% 35%)', w: 200, h: 200 },
+      { id: 'l-shape', label: 'L字', clip: 'polygon(0 0, 38% 0, 38% 62%, 100% 62%, 100% 100%, 0 100%)', w: 220, h: 200 },
+      { id: 'chord', label: '半円', clip: 'polygon(0 100%, 0 50%, 3% 34%, 12% 19%, 25% 8%, 40% 1%, 50% 0, 60% 1%, 75% 8%, 88% 19%, 97% 34%, 100% 50%, 100% 100%)', w: 240, h: 130 },
+      { id: 'quarter', label: '四分円', clip: 'polygon(0 0, 100% 0, 100% 100%, 92% 66%, 74% 38%, 48% 16%, 0 0)', w: 220, h: 200 },
+      { id: 'donut', label: '円環', radius: '50%', extra: { backgroundColor: 'transparent', border: '32px solid var(--color-gg-green)' }, w: 220, h: 220 },
+      { id: 'ban', label: '禁止', radius: '50%', extra: { backgroundColor: 'transparent', border: '20px solid var(--color-gg-red)' }, w: 200, h: 200 },
+      { id: 'heart', label: 'ハート', clip: 'polygon(50% 100%, 12% 66%, 0 38%, 6% 17%, 24% 6%, 42% 10%, 50% 22%, 58% 10%, 76% 6%, 94% 17%, 100% 38%, 88% 66%)', w: 220, h: 200 },
+      { id: 'bolt', label: '稲妻', clip: 'polygon(58% 0, 22% 54%, 46% 54%, 34% 100%, 82% 40%, 54% 40%, 74% 0)', w: 150, h: 220 },
+      { id: 'moon', label: '月', clip: 'polygon(62% 0, 40% 8%, 24% 26%, 18% 50%, 24% 74%, 40% 92%, 62% 100%, 44% 84%, 36% 60%, 38% 36%, 48% 14%)', w: 170, h: 220 },
+      { id: 'sun', label: '太陽', clip: starPolygon(12, 0.34), w: 220, h: 220 },
+      { id: 'cloud', label: '雲', clip: 'polygon(22% 100%, 8% 92%, 2% 76%, 10% 60%, 8% 44%, 22% 32%, 38% 32%, 48% 18%, 66% 14%, 80% 26%, 84% 42%, 96% 52%, 98% 72%, 88% 88%, 72% 100%)', w: 260, h: 180 },
+    ],
+  },
+  {
+    group: 'ブロック矢印',
+    shapes: [
+      { id: 'arrow-right', label: '右矢印', clip: 'polygon(0% 30%, 62% 30%, 62% 6%, 100% 50%, 62% 94%, 62% 70%, 0% 70%)', w: 280, h: 140 },
+      { id: 'arrow-left', label: '左矢印', clip: 'polygon(100% 30%, 38% 30%, 38% 6%, 0% 50%, 38% 94%, 38% 70%, 100% 70%)', w: 280, h: 140 },
+      { id: 'arrow-up', label: '上矢印', clip: 'polygon(30% 100%, 30% 38%, 6% 38%, 50% 0%, 94% 38%, 70% 38%, 70% 100%)', w: 140, h: 280 },
+      { id: 'arrow-down', label: '下矢印', clip: 'polygon(30% 0%, 30% 62%, 6% 62%, 50% 100%, 94% 62%, 70% 62%, 70% 0%)', w: 140, h: 280 },
+      { id: 'arrow-lr', label: '左右矢印', clip: 'polygon(0 50%, 20% 12%, 20% 32%, 80% 32%, 80% 12%, 100% 50%, 80% 88%, 80% 68%, 20% 68%, 20% 88%)', w: 300, h: 140 },
+      { id: 'arrow-ud', label: '上下矢印', clip: 'polygon(50% 0, 88% 20%, 68% 20%, 68% 80%, 88% 80%, 50% 100%, 12% 80%, 32% 80%, 32% 20%, 12% 20%)', w: 140, h: 300 },
+      { id: 'arrow-quad', label: '十字矢印', clip: 'polygon(50% 0, 68% 18%, 58% 18%, 58% 42%, 82% 42%, 82% 32%, 100% 50%, 82% 68%, 82% 58%, 58% 58%, 58% 82%, 68% 82%, 50% 100%, 32% 82%, 42% 82%, 42% 58%, 18% 58%, 18% 68%, 0 50%, 18% 32%, 18% 42%, 42% 42%, 42% 18%, 32% 18%)', w: 220, h: 220 },
+      { id: 'chevron', label: 'シェブロン', clip: 'polygon(0% 0%, 78% 0%, 100% 50%, 78% 100%, 0% 100%, 22% 50%)', w: 260, h: 120 },
+      { id: 'pentagon-arrow', label: 'ホームプレート', clip: 'polygon(0% 0%, 78% 0%, 100% 50%, 78% 100%, 0% 100%)', w: 260, h: 120 },
+      { id: 'bent-arrow', label: '曲がり矢印', clip: 'polygon(0 62%, 0 90%, 62% 90%, 62% 100%, 100% 76%, 62% 52%, 62% 62%)', w: 260, h: 180 },
+    ],
+  },
+  {
+    group: 'フローチャート',
+    shapes: [
+      { id: 'fc-process', label: '処理', w: 260, h: 130 },
+      { id: 'fc-alt', label: '代替処理', radius: '18px', w: 260, h: 130 },
+      { id: 'fc-decision', label: '判断', clip: 'polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%)', w: 240, h: 170 },
+      { id: 'fc-terminator', label: '端子', radius: '9999px', w: 260, h: 110 },
+      { id: 'fc-data', label: 'データ', clip: 'polygon(18% 0%, 100% 0%, 82% 100%, 0% 100%)', w: 280, h: 130 },
+      { id: 'fc-prep', label: '準備', clip: 'polygon(18% 0, 82% 0, 100% 50%, 82% 100%, 18% 100%, 0 50%)', w: 280, h: 130 },
+      { id: 'fc-doc', label: '書類', clip: 'polygon(0 0, 100% 0, 100% 82%, 74% 96%, 50% 84%, 24% 96%, 0 84%)', w: 260, h: 150 },
+      { id: 'fc-manual', label: '手操作入力', clip: 'polygon(0 22%, 100% 0, 100% 100%, 0 100%)', w: 260, h: 140 },
+      { id: 'fc-db', label: 'データベース', clip: 'polygon(0 12%, 12% 3%, 50% 0, 88% 3%, 100% 12%, 100% 88%, 88% 97%, 50% 100%, 12% 97%, 0 88%)', w: 220, h: 200 },
+    ],
+  },
+  {
+    group: '星とリボン',
+    shapes: [
+      { id: 'star4', label: '4芒星', clip: starPolygon(4, 0.2), w: 200, h: 200 },
+      { id: 'star5', label: '5芒星', clip: starPolygon(5, 0.38), w: 220, h: 210 },
+      { id: 'star6', label: '6芒星', clip: starPolygon(6, 0.42), w: 220, h: 220 },
+      { id: 'star8', label: '8芒星', clip: starPolygon(8, 0.44), w: 220, h: 220 },
+      { id: 'star12', label: '12芒星', clip: starPolygon(12, 0.46), w: 220, h: 220 },
+      { id: 'burst', label: '爆発', clip: starPolygon(16, 0.5), w: 240, h: 240 },
+      { id: 'ribbon', label: 'リボン', clip: 'polygon(0 0, 100% 0, 100% 74%, 88% 62%, 76% 74%, 76% 100%, 50% 84%, 24% 100%, 24% 74%, 12% 62%, 0 74%)', w: 260, h: 180 },
+      { id: 'banner', label: '横断幕', clip: 'polygon(0 0, 100% 0, 88% 50%, 100% 100%, 0 100%, 12% 50%)', w: 300, h: 120 },
+    ],
+  },
+  {
+    group: '吹き出し',
+    shapes: [
+      { id: 'callout-rect', label: '四角の吹き出し', clip: 'polygon(0% 0%, 100% 0%, 100% 74%, 32% 74%, 14% 100%, 17% 74%, 0% 74%)', w: 280, h: 200 },
+      { id: 'callout-round', label: '角丸の吹き出し', radius: '24px', clip: 'polygon(0% 0%, 100% 0%, 100% 76%, 34% 76%, 16% 100%, 19% 76%, 0% 76%)', w: 280, h: 200 },
+      { id: 'callout-right', label: '右向き吹き出し', clip: 'polygon(0 0, 100% 0, 100% 100%, 22% 100%, 22% 76%, 0 76%)', w: 280, h: 190 },
+      { id: 'callout-oval', label: '楕円の吹き出し', radius: '50% 50% 50% 50% / 60% 60% 40% 40%', w: 280, h: 190 },
+    ],
+  },
+];
+
+export const ALL_SHAPES: ShapeDef[] = SHAPE_GROUPS.flatMap((g) => g.shapes);
+
+/**
+ * ギャラリーで選ばれた図形。キャンバスのドラッグ/クリックで使われる。
+ * 描画エンジン(useDrawingMode)とリボンの両方から読むためモジュール変数にしている。
+ */
+export let pendingShape: ShapeDef = ALL_SHAPES[0];
+
+export function setPendingShape(def: ShapeDef): void {
+  pendingShape = def;
+}
+
+/** 図形定義からCSSを組み立てる(サイズは呼び出し側で指定) */
+export function shapeStyles(def: ShapeDef): Record<string, string> {
+  return {
+    backgroundColor: 'var(--color-gg-green)',
+    ...(def.clip ? { clipPath: def.clip } : {}),
+    ...(def.radius ? { borderRadius: def.radius } : {}),
+    ...(def.extra ?? {}),
+  };
+}

package/src/editor/utils/slide-root.ts

@@ -0,0 +1,29 @@
+/**
+ * [移植時の追加] iframe内の「スライド本体」を特定するユーティリティ。
+ *
+ * このプロジェクトのスライドは 1920×1080 のルート要素で、ズーム倍率のtransformが
+ * かかった状態でiframe内に置かれている。要素を追加するときに、その外側
+ * (body や #artboard ラッパー)へ入れてしまうと座標系がスケールの分だけずれ、
+ *  - スライドの外に表示される
+ *  - ドラッグすると 1/zoom 倍(例: 41%なら約2.4倍)動いて飛んでいく
+ * という不具合になる。挿入先は必ずこのルート要素に揃える。
+ */
+
+/**
+ * スライドの内容が入るルート要素。
+ * エディタは `#artboard-wrapper`(ズームのtransformがかかる) > `#artboard`(内容) の
+ * 入れ子でキャンバスを作るので、内容側の `#artboard` を基準にする。
+ * 通常のWebページ編集などで見つからない場合は null。
+ */
+export function findSlideRoot(doc: Document): HTMLElement | null {
+  const artboard = doc.getElementById('artboard');
+  if (artboard) return artboard;
+  const marked = doc.querySelector('[data-slide-root]');
+  if (marked instanceof HTMLElement) return marked;
+  return null;
+}
+
+/** 新しい要素の追加先 */
+export function findInsertionParent(doc: Document): HTMLElement {
+  return findSlideRoot(doc) ?? doc.getElementById('slide-artboard') ?? doc.body;
+}