@growgroup/visual-editor 0.8.0 → 0.9.0

package/src/editor/hooks/useLinkNavigation.ts

@@ -27,18 +27,21 @@ const PENDING_ANCHOR_DELAY_MS = 500;
 const prefersReducedMotion = () =>
   typeof window !== 'undefined' && !!window.matchMedia?.('(prefers-reduced-motion: reduce)').matches;
 
-export function useLinkNavigation() {
-  const { contentList, currentContentId, onContentChange } = useEditorContext();
+/**
+ * 紙面の中の要素が見える位置へ視点を移す。
+ *
+ * キャンバスでは紙面(iframe)は伸びきっていてスクロールしないので、`scrollIntoView` では
+ * 何も動かない。キャンバスの位置を動かすか、1 ページ表示なら紙面の中の器をスクロールさせる。
+ * リンク移動(アンカー)と「台帳から挿入」のあとの移動で、同じ計算を使う。
+ */
+export function useRevealElement() {
   const canvas = useMultiPageCanvasOptional();
-  const stateRef = useRef({ contentList, currentContentId, onContentChange, canvas });
-  stateRef.current = { contentList, currentContentId, onContentChange, canvas };
+  const canvasRef = useRef(canvas);
+  canvasRef.current = canvas;
 
-  /** 紙面の中の要素(`'top'` なら先頭)が見える位置へ紙面を移す。見つからなければ false */
-  const revealAnchor = useCallback((iframeDoc: Document, hash: string): boolean => {
-    const found = findAnchorTarget(iframeDoc, hash);
-    const el = found === 'top' ? iframeDoc.getElementById('artboard') : found;
+  return useCallback((iframeDoc: Document, el: Element | null): boolean => {
     if (!el) return false;
-    const c = stateRef.current.canvas;
+    const c = canvasRef.current;
 
     if (c?.isEnabled) {
       // キャンバス: 紙面(iframe)は伸びきっていてスクロールしない。キャンバスの位置を動かす
@@ -77,6 +80,23 @@ export function useLinkNavigation() {
     });
     return true;
   }, []);
+}
+
+export function useLinkNavigation() {
+  const { contentList, currentContentId, onContentChange } = useEditorContext();
+  const canvas = useMultiPageCanvasOptional();
+  const stateRef = useRef({ contentList, currentContentId, onContentChange, canvas });
+  stateRef.current = { contentList, currentContentId, onContentChange, canvas };
+  const revealElement = useRevealElement();
+
+  /** 紙面の中の要素(`'top'` なら先頭)が見える位置へ紙面を移す。見つからなければ false */
+  const revealAnchor = useCallback(
+    (iframeDoc: Document, hash: string): boolean => {
+      const found = findAnchorTarget(iframeDoc, hash);
+      return revealElement(iframeDoc, found === 'top' ? iframeDoc.getElementById('artboard') : found);
+    },
+    [revealElement],
+  );
 
   const navigate = useCallback(
     (target: LinkTarget, iframeDoc: Document): string | void => {

package/src/editor/utils/catalog-inserts.ts

@@ -0,0 +1,79 @@
+/**
+ * 「台帳から挿入」の DOM まわり。React に依存しない純粋なユーティリティ。
+ *
+ * 利用側(io.fetchInsert)は Tailwind のクラスが付いたままの静的 HTML を断片で返す。
+ * 色はトークン名なので、紙面の CSS が解決できるものだけが色になる(解決できなければ地の色)。
+ * エディタは中身を組み替えず、
+ *   1. `<script>` を落とす
+ *   2. 要素にする
+ *   3. どこに入れるかを決める
+ * の 3 つだけをやる。
+ */
+import { fallbackContainer, isContainer } from './drop-target';
+
+/**
+ * 紙面に `<script>` を持ち込まない。
+ *
+ * 【なぜ paste-sanitizer(DOMPurify)を通さないか】
+ * あちらは貼り付け用で、許可する属性を列挙する作り。`data-ds` / `data-ds-v` / `data-slot` の
+ * ような台帳側の目印が黙って消える。挿入元は利用側が自分で作った HTML(外部から来た文字列ではない)
+ * なので、ここでは「紙面で script を動かさない」という既存の方針だけを守る。
+ * 同じ理由で `on*` のイベント属性も落とす(紙面は sandbox で script を動かさないが、
+ * 保存 HTML に残ると公開物に混ざるため)。
+ */
+export function stripScripts(root: Element): void {
+  for (const el of Array.from(root.querySelectorAll('script'))) el.remove();
+  const all: Element[] = [root, ...Array.from(root.querySelectorAll('*'))];
+  for (const el of all) {
+    for (const attr of Array.from(el.attributes)) {
+      if (/^on/i.test(attr.name)) el.removeAttribute(attr.name);
+    }
+  }
+}
+
+/**
+ * HTML の断片を `doc` の要素にする。
+ * ルートが 2 つ以上あるときは `<div>` で束ねずに先頭だけを返す ── 利用側が
+ * `<section class="wf-ds">` で包む約束なので、束ねる器をエディタが勝手に足すと
+ * 保存 HTML に出どころ不明の `<div>` が増える。空なら null。
+ */
+export function insertHtmlToElement(doc: Document, html: string): HTMLElement | null {
+  const tpl = doc.createElement('template');
+  tpl.innerHTML = html.trim();
+  const root = tpl.content.firstElementChild;
+  if (!root) return null;
+  const el = doc.importNode(root, true) as HTMLElement;
+  stripScripts(el);
+  return el;
+}
+
+/** 挿入先。`before` が null なら `parent` の末尾 */
+export type InsertionPoint = { parent: Element; before: Element | null };
+
+/**
+ * 挿入位置の規則。
+ *
+ * - 選択中の要素があれば**その直後**。ただし選択が器(`<main>` など)の直下でなければ、
+ *   器の直下まで上がった祖先の直後に入れる(セクションの列に並ぶ)
+ * - 選択が無ければ器の末尾
+ * - 器 = `<main>` / `[data-wf-body]` / `#artboard` / body(drop-target.ts と同じ判定)
+ *
+ * ドラッグ&ドロップの `findFlowInsertion` と器の規則を共有しているので、
+ * 「ドロップしたときと挿入したときで入る場所が違う」が起きない。
+ */
+export function resolveInsertionPoint(doc: Document, selected: Element | null): InsertionPoint {
+  const container = fallbackContainer(doc);
+  if (!selected || !selected.isConnected) return { parent: container, before: null };
+
+  // 選択そのものが器なら、その中の末尾に入れる(器の「直後」に入れると紙面の外に出る)
+  if (isContainer(doc, selected)) return { parent: selected, before: null };
+
+  // 器の直下まで上がる
+  let node: Element = selected;
+  for (;;) {
+    const parent: Element | null = node.parentElement;
+    if (!parent) return { parent: container, before: null };
+    if (isContainer(doc, parent)) return { parent, before: node.nextElementSibling };
+    node = parent;
+  }
+}

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

@@ -731,6 +731,47 @@ export function convertToAbsolutePositioning(iframeDoc: Document): number {
     });
   });
 
+  // 1.5 編集対象でない、流れの中のブロックの兄弟も一緒に倒す。
+  // 部品(data-part)の中では data-slot だけが編集対象なので、スロットの間にある罫線(h-px の div)などは
+  // 流れに残る。兄弟が絶対配置で抜けると、その分だけ上へ詰まる(ヘッダーの罫線が 116px 上へ動いた実測)。
+  // 自己検証は編集対象しか見ていなかったので、崩れたまま確定していた。
+  // 位置を固定するだけで編集対象にはしない(data-editable は付けない)
+  const captured = new Set<HTMLElement>(captures.map((c) => c.element));
+  const parentsOfCaptured = new Set<HTMLElement>();
+  captures.forEach(({ parent }) => {
+    if (parent && parent !== iframeDoc.body && parent !== artboard) parentsOfCaptured.add(parent);
+  });
+  parentsOfCaptured.forEach((parent) => {
+    Array.from(parent.children).forEach((child) => {
+      const element = child as HTMLElement;
+      if (captured.has(element) || skippedInline.some((s) => s.element === element)) return;
+      if (element.classList.contains('selection-box') || element.classList.contains('gg-comment-layer')) return;
+      if (isNonEditableTag(element)) return;
+      const computedStyle = iframeDoc.defaultView!.getComputedStyle(element);
+      // 流れの外(absolute / fixed)・非表示は兄弟に影響されない
+      if (computedStyle.position === 'absolute' || computedStyle.position === 'fixed') return;
+      if (computedStyle.display === 'none') return;
+      const parentDisplay = iframeDoc.defaultView!.getComputedStyle(parent).display;
+      const isFlexOrGridItem = /(^|\s)(inline-)?(flex|grid)($|\s)/.test(parentDisplay);
+      if (!isFlexOrGridItem && isInlineElement(element, computedStyle)) {
+        skippedInline.push({ element, rect: element.getBoundingClientRect() });
+        return;
+      }
+      captured.add(element);
+      captures.push({
+        element,
+        rect: element.getBoundingClientRect(),
+        parent,
+        parentRect: parent.getBoundingClientRect(),
+        computedStyle,
+        parentComputedStyle: iframeDoc.defaultView!.getComputedStyle(parent),
+        originalTransform: computedStyle.transform,
+        scale,
+        prevStyle: element.getAttribute('style'),
+      });
+    });
+  });
+
   // 2. 親要素を処理（position: relative設定）
   //
   // [採寸より前にやる] offsetLeft/offsetTop は offsetParent 基準の値なので、
@@ -768,13 +809,18 @@ export function convertToAbsolutePositioning(iframeDoc: Document): number {
     if (element.offsetParent !== parent) return;
     // 寸法は offsetWidth(整数へ丸める)ではなく、rect の小数値を**切り上げ**て使う。
     // 例: 必要幅1227.4pxの文字列を1227pxで固定すると最後の1文字だけが折り返す
-    // (284pxの「テキスト」で実害)。位置は1px未満の誤差が折り返しを生まないので offset で良い
+    // (284pxの「テキスト」で実害)。位置は1px未満の誤差が折り返しを生まないので offset で良い。
+    // ただし rect は縮小した紙面の値で、ブラウザは 1/64px に丸めて返す(56px × 0.55 = 30.8 → 30.8125)。
+    // 倍率で割り戻すと 56.02 のように少しだけ大きくなり、そのまま切り上げると全部の要素が 1px 膨らむ
+    // (h-px の罫線が 2px、56px の帯が 57px になった実測)。丸めの分だけ引いてから切り上げる
     const s = capScale || 1;
+    const quantum = 1 / 64 / s + 0.005;
+    const ceilSize = (v: number) => Math.max(0, Math.ceil(v - quantum));
     offsets.set(element, {
       left: element.offsetLeft,
       top: element.offsetTop,
-      width: Math.ceil(rect.width / s),
-      height: Math.ceil(rect.height / s),
+      width: ceilSize(rect.width / s),
+      height: ceilSize(rect.height / s),
     });
   });
 

package/src/editor/utils/drop-target.ts

@@ -36,7 +36,7 @@ export interface FlowInsertion {
  * 「セクションの器」か。この直下に部品を並べる。
  * 器 = body / #artboard / [data-wf-body] / main
  */
-function isContainer(doc: Document, node: Element | null): node is Element {
+export function isContainer(doc: Document, node: Element | null): node is Element {
   return (
     !!node &&
     (node === doc.body ||
@@ -46,8 +46,12 @@ function isContainer(doc: Document, node: Element | null): node is Element {
   );
 }
 
-/** 器が見つからないときの落とし先 */
-function fallbackContainer(doc: Document): Element {
+/**
+ * 器が見つからないときの落とし先。
+ * 「台帳から挿入」(選択が無いとき・選択の祖先が器の直下に無いとき)も同じ器を使うので export する。
+ * 器の規則をここ 1 箇所に残さないと、ドロップと挿入で入る場所が変わる
+ */
+export function fallbackContainer(doc: Document): Element {
   return (
     doc.querySelector('main') ??
     doc.querySelector('[data-wf-body]') ??

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

@@ -627,8 +627,12 @@ export function applyTailwindStyles(
 /**
  * Tailwind Browserに再コンパイルをトリガー
  * iframe内のTailwind Browserインスタンスに変更を通知
+ *
+ * 紙面へ**新しいクラスを持つ要素を足した**ときにも呼ぶ(「台帳から挿入」)。
+ * 足しただけでは Tailwind ブラウザ版がその class を知らず、当たるまで地の姿で出る。
+ * 生成した CSS は紙面の `<head>` に入るので、#artboard の中身(= 保存 HTML・履歴)は変わらない。
  */
-function triggerTailwindRecompile(element: HTMLElement): void {
+export function triggerTailwindRecompile(element: HTMLElement): void {
   try {
     const doc = element.ownerDocument;
     const win = doc?.defaultView as Window & {

package/src/index.ts

@@ -60,6 +60,10 @@ export type {
   EditorPartDef,
   EditorPartCategory,
   EditorPartsLibrary,
+  EditorInsertCatalog,
+  EditorInsertGroup,
+  EditorInsertItem,
+  EditorInsertLevel,
   EditorCollab,
   EditorCollabUser,
 } from "./io";

package/src/io.ts

@@ -122,6 +122,53 @@ export type EditorPartsLibrary = {
   categories?: EditorPartCategory[];
 };
 
+/**
+ * 台帳から挿入(「台帳から挿入」パネル)。
+ *
+ * 【役割分担】
+ * - 利用側 … 何が挿せるかの目録(loadInserts)と、1 件の HTML(fetchInsert)を作る。
+ *            HTML は断片(`<section class="wf-ds" data-ds="…" data-ds-v="…">…</section>` の形で
+ *            利用側が包んでおく)。エディタは包み直さない
+ * - エディタ … 紙面のどこに入れるかを決め、編集の印を付け、履歴に 1 段で載せる
+ *
+ * 目録・HTML の中身(何が台帳にあるか・どう整形するか)はエディタの関心事ではない。
+ * `loadInserts` を渡さなければ「台帳から挿入」の入口ごと出さない。
+ */
+export type EditorInsertLevel =
+  /** セクション(紙面に 1 段として入る) */
+  | 'SEC'
+  /** パーツ(セクションより小さい部品) */
+  | 'MOL'
+  /** ページの雛形(挿入ではなく「新しいページを作る」) */
+  | 'TPL'
+  /** ページ(同上) */
+  | 'PAG'
+  // 利用側が独自の階層を足せるように文字列も受ける(補完は上の 4 つが出る)
+  | (string & {});
+
+export type EditorInsertItem = {
+  /** 一意な識別子。`fetchInsert` / `createContent` にそのまま渡す */
+  id: string;
+  /** 表示名 */
+  name: string;
+  /** 系統(絞り込みの単位。ヘッダー・ヒーロー・フォーム など) */
+  family?: string;
+  description?: string;
+  /**
+   * 階層。`TPL` / `PAG` は紙面に挿さず「ページを作る」に回る。
+   * 省略時は挿入(セクション扱い)
+   */
+  level?: EditorInsertLevel;
+  /** 見本の URL(あればカードと右の大きいプレビューに iframe で出す) */
+  previewUrl?: string;
+  /** 出どころ。表示の区別だけに使う */
+  source?: 'ledger' | 'local';
+};
+
+export type EditorInsertGroup = { id: string; label: string; items: EditorInsertItem[] };
+
+export type EditorInsertCatalog = { groups: EditorInsertGroup[] };
+
 export type EditorIO = {
   /** 一覧とコメントを取る。無ければ空の一覧として振る舞う */
   loadDeck?: () => Promise<EditorDeck>;
@@ -192,6 +239,30 @@ export type EditorIO = {
   /** 部品を消す。無ければ削除を出さない */
   deletePart?: (id: string) => Promise<void>;
 
+  /**
+   * 台帳の目録(利用側が束ねる)。無ければ「台帳から挿入」は出さない。
+   * パネルを開くたびに呼ぶ(利用側で束ねたものを返すだけでよい)
+   */
+  loadInserts?: () => Promise<EditorInsertCatalog>;
+  /**
+   * 1 件の HTML(断片)。`dummy` は見出し・リード文を赤字ダミーにする利用側の整形で、
+   * パネルのチェック(既定 ON)がそのまま渡る。整形しない利用側は無視してよい。
+   * `name` はいまのエディタでは使っていない(目録の name を出している)。
+   * 目録と実体が食い違いうる利用側のために受け口だけ空けてある
+   */
+  fetchInsert?: (id: string, opts: { dummy: boolean }) => Promise<{ html: string; name?: string }>;
+  /**
+   * 新しいページを作る(TPL / PAG の挿入)。戻り値の id で利用側が `contentList` を
+   * 読み直し、エディタはその id が一覧に現れたらそのページを編集中にする。
+   * 無ければページの雛形は挿入できない(グループを出しても「ページを作る」は押せない)
+   */
+  createContent?: (input: {
+    title: string;
+    path: string;
+    templateId?: string;
+    parentId?: string;
+  }) => Promise<{ id: string }>;
+
   /** CSS 変数(デザイントークン)の読み込み。無ければブラウザ内(localStorage)に持つ */
   loadVariables?: () => Promise<CSSVariableDefinition[]>;
   /** CSS 変数の保存。無ければブラウザ内(localStorage)に持つ */

package/src/version.ts

@@ -6,4 +6,4 @@
  * 利用側はこの値と node_modules の package.json を見比べて、食い違っていれば
  * 「再起動してください」と出せる(構成ラフのテンプレートが行っている)
  */
-export const EDITOR_VERSION = '0.8.0';
+export const EDITOR_VERSION = '0.9.0';