@growgroup/visual-editor 0.1.0

package/src/editor/utils/inline-format.ts

@@ -0,0 +1,236 @@
+/**
+ * インライン書式(マーカー・太字)のツールバー。
+ *
+ * 【設計方針】
+ * `<span class="px-[6px] bg-mark-green">改善サイクル</span>` のようなインライン要素は
+ * 「箱」ではなく**文字の属性**として扱う(Figmaのキャラクタースタイル相当)。
+ * - ドラッグ・リサイズの対象にしない(data-inline としてドラッグ対象外なのは現状どおり)
+ * - 新規作成・解除は、テキスト編集中(contenteditable)の**範囲選択**に対して行う
+ * - 語彙はデザインシステムの Mark に拘束する(緑=強調 / 赤=課題 / 太字)。
+ *   任意の色は出さない。マーカーの意味(赤は課題のみ・1スライド1箇所)を
+ *   エディタから崩せないようにするため
+ *
+ * テキストをダブルクリックして編集に入り、文字を選択するとツールバーが浮かぶ。
+ */
+
+const TOOLBAR_ID = 'gg-inline-format-toolbar';
+
+/** デザインシステムのインライン語彙。ここ以外の書式は出さない */
+const FORMATS = [
+  { key: 'mark-green', label: 'マーカー', cls: 'px-[6px] bg-mark-green', swatch: '#cfe6d6' },
+  { key: 'mark-red', label: 'マーカー(課題)', cls: 'px-[6px] bg-mark-red', swatch: '#ffd9d1' },
+  { key: 'bold', label: '太字', cls: 'font-bold', swatch: null },
+] as const;
+
+/** この属性を持つspanを「書式スパン」とみなす(解除の対象) */
+const FORMAT_CLASSES = ['bg-mark-green', 'bg-mark-red', 'font-bold'];
+
+const isFormatSpan = (el: Element | null): el is HTMLElement =>
+  !!el &&
+  el.tagName === 'SPAN' &&
+  FORMAT_CLASSES.some((c) => (el as HTMLElement).classList.contains(c));
+
+/** 選択がテキスト編集中の要素の中にあるときだけ、その要素を返す */
+function editingHost(doc: Document): HTMLElement | null {
+  const sel = doc.getSelection();
+  if (!sel || sel.rangeCount === 0 || sel.isCollapsed) return null;
+  const host = doc.querySelector('[contenteditable="true"]') as HTMLElement | null;
+  if (!host) return null;
+  const range = sel.getRangeAt(0);
+  if (!host.contains(range.commonAncestorContainer)) return null;
+  if (!range.toString().trim()) return null;
+  return host;
+}
+
+/** 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 clearFormats(doc: Document, range: Range): void {
+  // 範囲を包んでいるスパン
+  let node: Node | null = range.commonAncestorContainer;
+  while (node && node.nodeType === 3) node = node.parentNode;
+  let cur = node as Element | null;
+  while (cur && cur.getAttribute?.('contenteditable') !== 'true') {
+    if (isFormatSpan(cur)) {
+      unwrap(cur as HTMLElement);
+      return; // 包んでいたものを外したら終わり(選択は文字列として残る)
+    }
+    cur = cur.parentElement;
+  }
+  // 範囲の中にあるスパン
+  const host = doc.querySelector('[contenteditable="true"]');
+  if (!host) return;
+  [...host.querySelectorAll('span')].filter(isFormatSpan).forEach((s) => {
+    if (range.intersectsNode(s)) unwrap(s);
+  });
+}
+
+/** 選択範囲に書式スパンを適用する */
+function applyFormat(doc: Document, cls: string): void {
+  const sel = doc.getSelection();
+  if (!sel || sel.rangeCount === 0) return;
+  const range = sel.getRangeAt(0);
+  if (range.collapsed) return;
+
+  // 入れ子や部分交差を作らないよう、先に範囲に関わる書式を外す
+  clearFormats(doc, range);
+
+  const span = doc.createElement('span');
+  span.className = cls;
+  // 既存のインライン要素と同じ扱いにする(ドラッグ対象外・保存対象)
+  span.setAttribute('data-editable', 'true');
+  span.setAttribute('data-inline', 'true');
+  span.setAttribute(
+    'data-element-id',
+    `el-${Date.now()}-${Math.random().toString(36).slice(2, 7)}`,
+  );
+  try {
+    range.surroundContents(span);
+  } catch {
+    // 選択が要素境界をまたぐ場合は extract で包む
+    span.appendChild(range.extractContents());
+    range.insertNode(span);
+  }
+  // 適用後はスパンの中身を選択したままにする(続けて解除・変更ができる)
+  sel.removeAllRanges();
+  const r = doc.createRange();
+  r.selectNodeContents(span);
+  sel.addRange(r);
+}
+
+function notifyChange(doc: Document): void {
+  const artboard = doc.getElementById('artboard');
+  window.postMessage(
+    { type: 'SLIDE_CONTENT_CHANGED', html: artboard ? artboard.innerHTML : '' },
+    '*',
+  );
+}
+
+function buildToolbar(doc: Document): HTMLElement {
+  const bar = doc.createElement('div');
+  bar.id = TOOLBAR_ID;
+  bar.style.cssText = [
+    'position: fixed',
+    'z-index: 10000',
+    'display: none',
+    'align-items: center',
+    'gap: 2px',
+    'padding: 4px',
+    'border-radius: 8px',
+    'background: rgba(24,24,27,0.95)',
+    'box-shadow: 0 8px 24px rgba(0,0,0,0.45)',
+    'font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Hiragino Sans", sans-serif',
+  ].join(';');
+
+  const mkBtn = (label: string, swatch: string | null, onClick: () => void) => {
+    const b = doc.createElement('button');
+    b.type = 'button';
+    b.style.cssText = [
+      'display: inline-flex',
+      'align-items: center',
+      'gap: 6px',
+      'padding: 5px 10px',
+      'border: 0',
+      'border-radius: 6px',
+      'background: transparent',
+      'color: #e4e4e7',
+      'font-size: 12px',
+      'font-weight: 600',
+      'cursor: pointer',
+      'white-space: nowrap',
+    ].join(';');
+    if (swatch) {
+      const dot = doc.createElement('span');
+      dot.style.cssText = `width:10px;height:10px;border-radius:3px;background:${swatch};display:inline-block`;
+      b.appendChild(dot);
+    }
+    b.appendChild(doc.createTextNode(label));
+    b.addEventListener('mouseenter', () => (b.style.background = 'rgba(255,255,255,0.12)'));
+    b.addEventListener('mouseleave', () => (b.style.background = 'transparent'));
+    // mousedown でフォーカスと選択が失われないようにするのが肝
+    b.addEventListener('mousedown', (e) => {
+      e.preventDefault();
+      e.stopPropagation();
+    });
+    b.addEventListener('click', (e) => {
+      e.preventDefault();
+      e.stopPropagation();
+      onClick();
+    });
+    return b;
+  };
+
+  for (const f of FORMATS) {
+    bar.appendChild(
+      mkBtn(f.label, f.swatch, () => {
+        applyFormat(doc, f.cls);
+        notifyChange(doc);
+        position(doc, bar);
+      }),
+    );
+  }
+  const sep = doc.createElement('span');
+  sep.style.cssText = 'width:1px;height:16px;background:rgba(255,255,255,0.2);margin:0 2px';
+  bar.appendChild(sep);
+  bar.appendChild(
+    mkBtn('解除', null, () => {
+      const sel = doc.getSelection();
+      if (sel && sel.rangeCount > 0) {
+        clearFormats(doc, sel.getRangeAt(0));
+        notifyChange(doc);
+      }
+      position(doc, bar);
+    }),
+  );
+  doc.body.appendChild(bar);
+  return bar;
+}
+
+/** 選択範囲の上にツールバーを置く(画面上端に近いときは下) */
+function position(doc: Document, bar: HTMLElement): void {
+  const host = editingHost(doc);
+  if (!host) {
+    bar.style.display = 'none';
+    return;
+  }
+  const rect = doc.getSelection()!.getRangeAt(0).getBoundingClientRect();
+  if (!rect || (rect.width === 0 && rect.height === 0)) {
+    bar.style.display = 'none';
+    return;
+  }
+  bar.style.display = 'flex';
+  // 一度表示してから実寸で位置決め
+  const bw = bar.offsetWidth;
+  const bh = bar.offsetHeight;
+  const win = doc.defaultView!;
+  let x = rect.left + rect.width / 2 - bw / 2;
+  x = Math.max(8, Math.min(win.innerWidth - bw - 8, x));
+  let y = rect.top - bh - 8;
+  if (y < 8) y = rect.bottom + 8;
+  bar.style.left = `${x}px`;
+  bar.style.top = `${y}px`;
+}
+
+/**
+ * インライン書式ツールバーを iframe に取り付ける。
+ * @returns 後片付け関数
+ */
+export function setupInlineFormatToolbar(iframeDoc: Document): () => void {
+  const bar = buildToolbar(iframeDoc);
+  const onSelectionChange = () => position(iframeDoc, bar);
+  // 選択の変化・スクロールで追従。selectionchange は document にしか飛ばない
+  iframeDoc.addEventListener('selectionchange', onSelectionChange);
+  iframeDoc.addEventListener('scroll', onSelectionChange, true);
+  return () => {
+    iframeDoc.removeEventListener('selectionchange', onSelectionChange);
+    iframeDoc.removeEventListener('scroll', onSelectionChange, true);
+    bar.remove();
+  };
+}

package/src/editor/utils/measure-distance.ts

@@ -0,0 +1,120 @@
+/**
+ * Alt(Option)ホバーの距離メジャー(Figmaの赤い計測線)。
+ *
+ * 要素を選択した状態でAltを押しながら別の要素にカーソルを載せると、
+ * 選択要素とホバー要素の間の距離を赤い線とバッジで示す。
+ *
+ * 座標はすべてアートボード座標(1920×1080の素のpx)で計算し、レイヤーを
+ * アートボード直下に置く。ズームはアートボードごと transform されるので
+ * 線もバッジも自動で追従する。レイヤーは表示専用(pointer-events:none)で、
+ * 保存対象にもならない(getCleanHtml が #gg-measure-layer を除去する)。
+ */
+
+const LAYER_ID = 'gg-measure-layer';
+const RED = '#f24822'; // Figmaの計測色
+
+type Rect = { left: number; top: number; right: number; bottom: number; width: number; height: number };
+
+/** クライアント座標の矩形をアートボード座標へ */
+function toArtboardRect(el: HTMLElement, artboard: HTMLElement): Rect {
+  const r = el.getBoundingClientRect();
+  const a = artboard.getBoundingClientRect();
+  const scale = a.width / artboard.offsetWidth || 1;
+  const left = (r.left - a.left) / scale;
+  const top = (r.top - a.top) / scale;
+  return { left, top, right: left + r.width / scale, bottom: top + r.height / scale, width: r.width / scale, height: r.height / scale };
+}
+
+type Seg = { x1: number; y1: number; x2: number; y2: number };
+
+/** 2矩形間の計測線。軸ごとに「離れていれば近い辺の間」「重なっていれば辺のずれ」 */
+function computeSegs(a: Rect, b: Rect): Seg[] {
+  const out: Seg[] = [];
+
+  // 垂直方向の重なり範囲の中心(無ければAの中心)。水平線のy位置に使う
+  const oy1 = Math.max(a.top, b.top);
+  const oy2 = Math.min(a.bottom, b.bottom);
+  const cy = oy1 < oy2 ? (oy1 + oy2) / 2 : a.top + a.height / 2;
+  // 水平方向の重なり範囲の中心。垂直線のx位置に使う
+  const ox1 = Math.max(a.left, b.left);
+  const ox2 = Math.min(a.right, b.right);
+  const cx = ox1 < ox2 ? (ox1 + ox2) / 2 : a.left + a.width / 2;
+
+  // ── X軸 ──
+  if (a.right <= b.left) {
+    out.push({ x1: a.right, y1: cy, x2: b.left, y2: cy });
+  } else if (b.right <= a.left) {
+    out.push({ x1: b.right, y1: cy, x2: a.left, y2: cy });
+  } else {
+    // 重なっている(内包・交差): 左辺どうし・右辺どうしのずれを出す
+    if (Math.abs(a.left - b.left) >= 0.5)
+      out.push({ x1: Math.min(a.left, b.left), y1: cy, x2: Math.max(a.left, b.left), y2: cy });
+    if (Math.abs(a.right - b.right) >= 0.5)
+      out.push({ x1: Math.min(a.right, b.right), y1: cy, x2: Math.max(a.right, b.right), y2: cy });
+  }
+
+  // ── Y軸 ──
+  if (a.bottom <= b.top) {
+    out.push({ x1: cx, y1: a.bottom, x2: cx, y2: b.top });
+  } else if (b.bottom <= a.top) {
+    out.push({ x1: cx, y1: b.bottom, x2: cx, y2: a.top });
+  } else {
+    if (Math.abs(a.top - b.top) >= 0.5)
+      out.push({ x1: cx, y1: Math.min(a.top, b.top), x2: cx, y2: Math.max(a.top, b.top) });
+    if (Math.abs(a.bottom - b.bottom) >= 0.5)
+      out.push({ x1: cx, y1: Math.min(a.bottom, b.bottom), x2: cx, y2: Math.max(a.bottom, b.bottom) });
+  }
+
+  return out;
+}
+
+export function clearMeasure(doc: Document): void {
+  doc.getElementById(LAYER_ID)?.remove();
+}
+
+/** 選択要素(sel)とホバー要素(target)の距離を描く */
+export function drawMeasure(doc: Document, sel: HTMLElement, target: HTMLElement): void {
+  const artboard = doc.getElementById('artboard');
+  if (!artboard) return;
+
+  clearMeasure(doc);
+  const layer = doc.createElement('div');
+  layer.id = LAYER_ID;
+  layer.style.cssText = 'position:absolute;inset:0;z-index:9400;pointer-events:none;';
+
+  const a = toArtboardRect(sel, artboard);
+  const b = toArtboardRect(target, artboard);
+
+  // ホバー先を薄い赤枠で示す(どこと測っているかが分かるように)
+  const outline = doc.createElement('div');
+  outline.style.cssText =
+    `position:absolute;left:${b.left}px;top:${b.top}px;width:${b.width}px;height:${b.height}px;` +
+    `outline:1px dashed ${RED};outline-offset:-1px;`;
+  layer.appendChild(outline);
+
+  for (const s of computeSegs(a, b)) {
+    const len = Math.hypot(s.x2 - s.x1, s.y2 - s.y1);
+    if (len < 0.5) continue;
+    const horizontal = Math.abs(s.y2 - s.y1) < Math.abs(s.x2 - s.x1);
+
+    const line = doc.createElement('div');
+    line.style.cssText = horizontal
+      ? `position:absolute;left:${Math.min(s.x1, s.x2)}px;top:${s.y1 - 0.75}px;width:${len}px;height:1.5px;background:${RED};`
+      : `position:absolute;left:${s.x1 - 0.75}px;top:${Math.min(s.y1, s.y2)}px;width:1.5px;height:${len}px;background:${RED};`;
+    layer.appendChild(line);
+
+    const badge = doc.createElement('div');
+    badge.textContent = String(Math.round(len));
+    badge.style.cssText =
+      `position:absolute;left:${(s.x1 + s.x2) / 2}px;top:${(s.y1 + s.y2) / 2}px;` +
+      `transform:translate(-50%,-50%);background:${RED};color:#fff;` +
+      'font:600 12px/1.5 -apple-system,BlinkMacSystemFont,"Hiragino Sans",sans-serif;' +
+      'padding:0 5px;border-radius:3px;white-space:nowrap;';
+    // 横線のバッジは線の少し下、縦線のバッジは線の少し右に逃がす(線と重ねない)
+    if (horizontal) badge.style.marginTop = '12px';
+    else badge.style.marginLeft = '18px';
+    layer.appendChild(badge);
+  }
+
+  artboard.appendChild(layer);
+}