@growgroup/visual-editor 0.1.0

package/src/editor/utils/text-highlight.ts

@@ -0,0 +1,216 @@
+/**
+ * 蛍光ペン(文字の背景色)と文字色を「箱」ではなく**文字**に効かせる。
+ *
+ * PowerPointの蛍光ペンは段落やプレースホルダー全体ではなく、文字の背後だけを塗る。
+ * 要素に background-color を直接置くと <p> や <div> の箱全体が塗られてしまうので、
+ *   - テキストを範囲選択している → その範囲だけを <span> で包む
+ *   - 選択が無い(要素選択だけ)  → 要素の中の**テキスト部分**を <span> で包む
+ * という2段構えにする。生成されるのはただのDOMなので、保存すると書き戻し
+ * エンジンがそのまま原本TSXへ運ぶ。
+ *
+ * 文字色は箱に置いても見た目が変わらない(継承されるだけ)ため、範囲選択が
+ * ある時だけ span 化し、それ以外は要素のスタイルに置く。
+ */
+
+const HL_ATTR = 'data-gg-hl';
+
+const isElement = (n: Node): n is HTMLElement => n.nodeType === 1;
+const isText = (n: Node): n is Text => n.nodeType === 3;
+
+/** 蛍光ペンで作った(あるいは同等の)スパンか */
+function isHighlightSpan(el: Element | null): el is HTMLElement {
+  if (!el || el.tagName !== 'SPAN') return false;
+  const he = el as HTMLElement;
+  if (he.hasAttribute(HL_ATTR)) return true;
+  // 保存→再読込後は data-gg-* が落ちるので、背景色だけを持つspanも対象にする
+  const bg = he.style.backgroundColor;
+  return !!bg && bg !== 'transparent' && he.style.length <= 2;
+}
+
+/** spanを外して中身だけ残す */
+function unwrap(el: HTMLElement): void {
+  const parent = el.parentNode;
+  if (!parent) return;
+  while (el.firstChild) parent.insertBefore(el.firstChild, el);
+  parent.removeChild(el);
+  parent.normalize();
+}
+
+/** 範囲に関わる蛍光スパンを外す(入れ子を作らないため適用前に必ず通す) */
+function clearHighlights(root: HTMLElement | Document, range?: Range): void {
+  const scope = 'querySelectorAll' in root ? root : (root as Document);
+  const spans = [...scope.querySelectorAll('span')].filter(isHighlightSpan);
+  for (const s of spans) {
+    if (!range || range.intersectsNode(s)) unwrap(s);
+  }
+  // 範囲を「包んでいる」スパン(範囲の内側には現れない)も外す
+  if (range) {
+    let node: Node | null = range.commonAncestorContainer;
+    while (node && isText(node)) node = node.parentNode;
+    let cur = node as Element | null;
+    while (cur) {
+      if (isHighlightSpan(cur)) {
+        unwrap(cur);
+        break;
+      }
+      cur = cur.parentElement;
+    }
+  }
+}
+
+/** テキスト編集中/アートボード内の有効な範囲選択を返す */
+function activeRange(doc: Document): Range | null {
+  const sel = doc.getSelection();
+  if (!sel || sel.rangeCount === 0 || sel.isCollapsed) return null;
+  const range = sel.getRangeAt(0);
+  if (!range.toString().trim()) return null;
+  const artboard = doc.getElementById('artboard');
+  if (!artboard || !artboard.contains(range.commonAncestorContainer)) return null;
+  return range;
+}
+
+function makeSpan(doc: Document, color: string): HTMLElement {
+  const span = doc.createElement('span');
+  span.setAttribute(HL_ATTR, '1');
+  span.style.backgroundColor = color;
+  return span;
+}
+
+/**
+ * 直前に蛍光ペンを当てたスパン。
+ * 適用後は選択を解除する(青い選択帯が蛍光色の上に残るのを避ける)ので、
+ * 「続けて別の色を選ぶ」操作のために対象を覚えておく。
+ */
+let lastSpan: HTMLElement | null = null;
+
+/** 範囲をspanで包む(要素境界をまたぐ選択にも耐える) */
+function wrapRange(doc: Document, range: Range, color: string): void {
+  const span = makeSpan(doc, color);
+  try {
+    range.surroundContents(span);
+  } catch {
+    span.appendChild(range.extractContents());
+    range.insertNode(span);
+  }
+  lastSpan = span;
+  // 選択は解除する。残すとリボンへフォーカスが移った後も選択帯が描かれ、
+  // 蛍光ペンの色が見えなくなる
+  doc.getSelection()?.removeAllRanges();
+}
+
+/**
+ * 要素の中の「文字が並んでいる部分」だけを span で包む。
+ * テキストノードとインライン要素の連続を1つの run とみなすので、
+ * 見出しの中の <span>強調</span> のようなインライン構造も一続きで塗れる。
+ */
+function wrapTextRuns(doc: Document, el: HTMLElement, color: string): boolean {
+  const win = doc.defaultView;
+  if (!win) return false;
+
+  // 直接テキストを持つ要素を集める(自分自身も含む)
+  const hosts: HTMLElement[] = [];
+  const visit = (node: HTMLElement) => {
+    if ([...node.childNodes].some((n) => isText(n) && n.textContent?.trim())) hosts.push(node);
+    for (const child of [...node.children]) visit(child as HTMLElement);
+  };
+  visit(el);
+  if (!hosts.length) return false;
+
+  let changed = false;
+  for (const host of hosts) {
+    // 連続する「テキスト or インライン要素」を run にまとめる
+    const runs: Node[][] = [];
+    let cur: Node[] = [];
+    for (const n of [...host.childNodes]) {
+      const inline =
+        isText(n) || (isElement(n) && win.getComputedStyle(n).display.startsWith('inline'));
+      if (inline) cur.push(n);
+      else if (cur.length) {
+        runs.push(cur);
+        cur = [];
+      }
+    }
+    if (cur.length) runs.push(cur);
+
+    for (const run of runs) {
+      if (!run.some((n) => n.textContent?.trim())) continue;
+      // すでに蛍光スパンだけの run なら色を差し替える
+      if (run.length === 1 && isElement(run[0]) && isHighlightSpan(run[0])) {
+        run[0].style.backgroundColor = color;
+        changed = true;
+        continue;
+      }
+      const span = makeSpan(doc, color);
+      host.insertBefore(span, run[0]);
+      for (const n of run) span.appendChild(n);
+      changed = true;
+    }
+  }
+  return changed;
+}
+
+/**
+ * 蛍光ペンを適用する。color=null で解除。
+ * @returns DOMを変更したか
+ */
+export function applyTextHighlight(
+  doc: Document,
+  els: HTMLElement[],
+  color: string | null,
+): boolean {
+  const range = activeRange(doc);
+
+  if (range) {
+    clearHighlights(doc, range);
+    if (color) wrapRange(doc, range, color);
+    else lastSpan = null;
+    return true;
+  }
+
+  // 直前に塗った範囲がまだ生きていれば、そこを塗り替える/消す
+  if (lastSpan?.isConnected && (!els.length || els.some((el) => el.contains(lastSpan!)))) {
+    if (color) lastSpan.style.backgroundColor = color;
+    else {
+      unwrap(lastSpan);
+      lastSpan = null;
+    }
+    return true;
+  }
+
+  if (!els.length) return false;
+  let changed = false;
+  for (const el of els) {
+    // 要素自身に付いていた箱の塗りは外す(旧仕様で塗られていた分の後始末)
+    if (el.style.backgroundColor) {
+      el.style.backgroundColor = '';
+      changed = true;
+    }
+    clearHighlights(el);
+    lastSpan = null;
+    if (color) changed = wrapTextRuns(doc, el, color) || changed;
+    else changed = true;
+  }
+  return changed;
+}
+
+/**
+ * 文字色。範囲選択があればその範囲だけ、無ければ要素のスタイルに置く。
+ */
+export function applyTextColor(doc: Document, els: HTMLElement[], color: string): boolean {
+  const range = activeRange(doc);
+  if (range) {
+    const span = doc.createElement('span');
+    span.style.color = color;
+    try {
+      range.surroundContents(span);
+    } catch {
+      span.appendChild(range.extractContents());
+      range.insertNode(span);
+    }
+    doc.getSelection()?.removeAllRanges();
+    return true;
+  }
+  if (!els.length) return false;
+  for (const el of els) el.style.color = color;
+  return true;
+}

package/src/editor/utils/theme-to-variables.ts

@@ -0,0 +1,341 @@
+/**
+ * WebsiteTheme → CSS変数への変換ユーティリティ
+ * テーマ設定からエディタ用のCSS変数を生成
+ */
+
+import type { WebsiteTheme, WebsiteThemeColors, WebsiteTypography } from '../../types/website-theme';
+import type { CSSVariableDefinition, CSSVariableCategory } from '../../types/css-variables';
+import { generateVariableId } from '../../types/css-variables';
+
+// ============================================
+// 変数生成ヘルパー
+// ============================================
+
+/**
+ * 単一のCSS変数定義を生成
+ */
+function createVariable(
+  name: string,
+  cssName: string,
+  value: string,
+  category: CSSVariableCategory,
+  description?: string
+): CSSVariableDefinition {
+  const now = new Date();
+  return {
+    id: generateVariableId(),
+    name,
+    cssName,
+    value,
+    category,
+    description,
+    createdAt: now,
+    updatedAt: now,
+  };
+}
+
+// ============================================
+// カラー変数の変換
+// ============================================
+
+/**
+ * テーマカラーからCSS変数を生成
+ */
+export function colorsToVariables(colors: WebsiteThemeColors): CSSVariableDefinition[] {
+  const variables: CSSVariableDefinition[] = [];
+
+  // メインカラー
+  variables.push(createVariable('background', '--color-background', colors.background, 'color', '背景色'));
+  variables.push(createVariable('text', '--color-text', colors.text, 'color', 'テキスト色'));
+  variables.push(createVariable('primary', '--color-primary', colors.primary, 'color', 'プライマリカラー'));
+
+  // オプショナルカラー
+  if (colors.textMuted) {
+    variables.push(createVariable('text-muted', '--color-text-muted', colors.textMuted, 'color', '薄いテキスト色'));
+  }
+  if (colors.secondary) {
+    variables.push(createVariable('secondary', '--color-secondary', colors.secondary, 'color', 'セカンダリカラー'));
+  }
+  if (colors.accent) {
+    variables.push(createVariable('accent', '--color-accent', colors.accent, 'color', 'アクセントカラー'));
+  }
+  if (colors.surface) {
+    variables.push(createVariable('surface', '--color-surface', colors.surface, 'color', 'サーフェス色'));
+  }
+  if (colors.surfaceAlt) {
+    variables.push(createVariable('surface-alt', '--color-surface-alt', colors.surfaceAlt, 'color', '代替サーフェス色'));
+  }
+  if (colors.border) {
+    variables.push(createVariable('border', '--color-border', colors.border, 'color', 'ボーダー色'));
+  }
+  if (colors.borderStrong) {
+    variables.push(createVariable('border-strong', '--color-border-strong', colors.borderStrong, 'color', '強調ボーダー色'));
+  }
+
+  // ステータスカラー
+  if (colors.success) {
+    variables.push(createVariable('success', '--color-success', colors.success, 'color', '成功色'));
+  }
+  if (colors.warning) {
+    variables.push(createVariable('warning', '--color-warning', colors.warning, 'color', '警告色'));
+  }
+  if (colors.error) {
+    variables.push(createVariable('error', '--color-error', colors.error, 'color', 'エラー色'));
+  }
+  if (colors.info) {
+    variables.push(createVariable('info', '--color-info', colors.info, 'color', '情報色'));
+  }
+
+  return variables;
+}
+
+// ============================================
+// タイポグラフィ変数の変換
+// ============================================
+
+/**
+ * タイポグラフィ設定からCSS変数を生成
+ */
+export function typographyToVariables(typography: WebsiteTypography): CSSVariableDefinition[] {
+  const variables: CSSVariableDefinition[] = [];
+
+  // フォントファミリー
+  variables.push(createVariable('family', '--font-family', typography.fontFamily, 'typography', '本文フォント'));
+
+  if (typography.headingFontFamily) {
+    variables.push(createVariable('family-heading', '--font-family-heading', typography.headingFontFamily, 'typography', '見出しフォント'));
+  }
+  if (typography.monoFontFamily) {
+    variables.push(createVariable('family-mono', '--font-family-mono', typography.monoFontFamily, 'typography', '等幅フォント'));
+  }
+
+  // 基準フォントサイズ
+  if (typography.baseFontSize) {
+    variables.push(createVariable('size-base', '--font-size-base', typography.baseFontSize, 'typography', '基準フォントサイズ'));
+  }
+
+  // 見出しスタイル
+  if (typography.headings) {
+    const headings = typography.headings;
+
+    // H1
+    if (headings.h1) {
+      variables.push(createVariable('size-h1', '--font-size-h1', headings.h1.fontSize, 'typography', 'H1フォントサイズ'));
+    }
+    // H2
+    if (headings.h2) {
+      variables.push(createVariable('size-h2', '--font-size-h2', headings.h2.fontSize, 'typography', 'H2フォントサイズ'));
+    }
+    // H3
+    if (headings.h3) {
+      variables.push(createVariable('size-h3', '--font-size-h3', headings.h3.fontSize, 'typography', 'H3フォントサイズ'));
+    }
+    // H4
+    if (headings.h4) {
+      variables.push(createVariable('size-h4', '--font-size-h4', headings.h4.fontSize, 'typography', 'H4フォントサイズ'));
+    }
+    // H5
+    if (headings.h5) {
+      variables.push(createVariable('size-h5', '--font-size-h5', headings.h5.fontSize, 'typography', 'H5フォントサイズ'));
+    }
+    // H6
+    if (headings.h6) {
+      variables.push(createVariable('size-h6', '--font-size-h6', headings.h6.fontSize, 'typography', 'H6フォントサイズ'));
+    }
+  }
+
+  // 本文スタイル
+  if (typography.body) {
+    const body = typography.body;
+
+    if (body.base) {
+      variables.push(createVariable('size-body', '--font-size-body', body.base.fontSize, 'typography', '本文フォントサイズ'));
+      variables.push(createVariable('line-height-body', '--line-height-body', body.base.lineHeight, 'typography', '本文行間'));
+    }
+    if (body.large) {
+      variables.push(createVariable('size-body-lg', '--font-size-body-lg', body.large.fontSize, 'typography', '大本文フォントサイズ'));
+    }
+    if (body.small) {
+      variables.push(createVariable('size-body-sm', '--font-size-body-sm', body.small.fontSize, 'typography', '小本文フォントサイズ'));
+    }
+  }
+
+  return variables;
+}
+
+// ============================================
+// スペーシング変数の生成
+// ============================================
+
+/**
+ * スタイルオプションからスペーシング変数を生成
+ */
+export function generateSpacingVariables(spacing: 'compact' | 'normal' | 'relaxed' | 'spacious' = 'normal'): CSSVariableDefinition[] {
+  const multipliers: Record<string, number> = {
+    compact: 0.75,
+    normal: 1,
+    relaxed: 1.25,
+    spacious: 1.5,
+  };
+  const multiplier = multipliers[spacing] ?? 1;
+
+  const baseValues = [4, 8, 16, 24, 32, 48, 64];
+  const names = ['xs', 'sm', 'md', 'lg', 'xl', '2xl', '3xl'];
+
+  return baseValues.map((value, index) => {
+    const adjustedValue = Math.round(value * multiplier);
+    return createVariable(
+      names[index],
+      `--spacing-${names[index]}`,
+      `${adjustedValue}px`,
+      'spacing',
+      `${names[index].toUpperCase()}スペース`
+    );
+  });
+}
+
+// ============================================
+// ボーダー変数の生成
+// ============================================
+
+/**
+ * ボーダースタイルからCSS変数を生成
+ */
+export function generateBorderVariables(borderRadius: 'none' | 'small' | 'medium' | 'large' | 'full' = 'medium'): CSSVariableDefinition[] {
+  const radiusMap: Record<string, { sm: string; md: string; lg: string; full: string }> = {
+    none: { sm: '0', md: '0', lg: '0', full: '0' },
+    small: { sm: '2px', md: '4px', lg: '6px', full: '9999px' },
+    medium: { sm: '4px', md: '8px', lg: '12px', full: '9999px' },
+    large: { sm: '8px', md: '16px', lg: '24px', full: '9999px' },
+    full: { sm: '9999px', md: '9999px', lg: '9999px', full: '9999px' },
+  };
+
+  const values = radiusMap[borderRadius] ?? radiusMap.medium;
+
+  return [
+    createVariable('radius-sm', '--border-radius-sm', values.sm, 'border', '小角丸'),
+    createVariable('radius-md', '--border-radius-md', values.md, 'border', '中角丸'),
+    createVariable('radius-lg', '--border-radius-lg', values.lg, 'border', '大角丸'),
+    createVariable('radius-full', '--border-radius-full', values.full, 'border', '完全丸'),
+  ];
+}
+
+// ============================================
+// シャドウ変数の生成
+// ============================================
+
+/**
+ * シャドウスタイルからCSS変数を生成
+ */
+export function generateShadowVariables(shadow: 'none' | 'subtle' | 'medium' | 'strong' = 'medium'): CSSVariableDefinition[] {
+  const shadowMap: Record<string, { sm: string; md: string; lg: string }> = {
+    none: {
+      sm: 'none',
+      md: 'none',
+      lg: 'none',
+    },
+    subtle: {
+      sm: '0 1px 2px rgba(0,0,0,0.03)',
+      md: '0 2px 4px rgba(0,0,0,0.05)',
+      lg: '0 4px 6px rgba(0,0,0,0.07)',
+    },
+    medium: {
+      sm: '0 1px 2px rgba(0,0,0,0.05)',
+      md: '0 4px 6px rgba(0,0,0,0.1)',
+      lg: '0 10px 15px rgba(0,0,0,0.15)',
+    },
+    strong: {
+      sm: '0 2px 4px rgba(0,0,0,0.1)',
+      md: '0 8px 12px rgba(0,0,0,0.15)',
+      lg: '0 15px 25px rgba(0,0,0,0.2)',
+    },
+  };
+
+  const values = shadowMap[shadow] ?? shadowMap.medium;
+
+  return [
+    createVariable('sm', '--shadow-sm', values.sm, 'shadow', '小シャドウ'),
+    createVariable('md', '--shadow-md', values.md, 'shadow', '中シャドウ'),
+    createVariable('lg', '--shadow-lg', values.lg, 'shadow', '大シャドウ'),
+  ];
+}
+
+// ============================================
+// テーマ全体の変換
+// ============================================
+
+/**
+ * WebsiteTheme全体からCSS変数を生成
+ */
+export function themeToVariables(theme: WebsiteTheme): CSSVariableDefinition[] {
+  const variables: CSSVariableDefinition[] = [];
+
+  // カラー
+  variables.push(...colorsToVariables(theme.colors));
+
+  // タイポグラフィ
+  if (theme.typography) {
+    variables.push(...typographyToVariables(theme.typography));
+  }
+
+  // スペーシング
+  if (theme.styles?.spacing) {
+    variables.push(...generateSpacingVariables(theme.styles.spacing));
+  } else {
+    variables.push(...generateSpacingVariables('normal'));
+  }
+
+  // ボーダー
+  if (theme.styles?.borderRadius) {
+    variables.push(...generateBorderVariables(theme.styles.borderRadius));
+  } else {
+    variables.push(...generateBorderVariables('medium'));
+  }
+
+  // シャドウ
+  if (theme.styles?.shadow) {
+    variables.push(...generateShadowVariables(theme.styles.shadow));
+  } else {
+    variables.push(...generateShadowVariables('medium'));
+  }
+
+  return variables;
+}
+
+// ============================================
+// 差分検出
+// ============================================
+
+/**
+ * 現在の変数とテーマから生成した変数の差分を検出
+ */
+export function detectVariableDifferences(
+  current: CSSVariableDefinition[],
+  fromTheme: CSSVariableDefinition[]
+): {
+  added: CSSVariableDefinition[];
+  updated: CSSVariableDefinition[];
+  unchanged: CSSVariableDefinition[];
+} {
+  const currentMap = new Map(current.map(v => [v.cssName, v]));
+  const added: CSSVariableDefinition[] = [];
+  const updated: CSSVariableDefinition[] = [];
+  const unchanged: CSSVariableDefinition[] = [];
+
+  for (const themeVar of fromTheme) {
+    const existing = currentMap.get(themeVar.cssName);
+    if (!existing) {
+      added.push(themeVar);
+    } else if (existing.value !== themeVar.value) {
+      updated.push({
+        ...existing,
+        value: themeVar.value,
+        updatedAt: new Date(),
+      });
+    } else {
+      unchanged.push(existing);
+    }
+  }
+
+  return { added, updated, unchanged };
+}