@growgroup/visual-editor 0.2.0 → 0.2.2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@growgroup/visual-editor",
-  "version": "0.2.0",
+  "version": "0.2.2",
   "description": "HTMLをブラウザ上で直接編集するビジュアルエディタ。スライド(固定サイズ)とWebページ(可変高さ)の両方に使え、保存先はアダプタで差し替えられます。",
   "keywords": [
     "visual-editor",

package/src/editor/components/EditorPropertyPanel.tsx

@@ -1293,7 +1293,7 @@ export const EditorPropertyPanel = memo(function EditorPropertyPanel() {
                 <span className="truncate font-medium">部品: {selectedPartLabel}</span>
               </div>
               <p className="text-[10px] leading-snug text-gray-500">
-                スロット(data-slot)の中だけ編集できます。定義を変えたあとの他ページへの反映は parts:sync。
+                スロット(data-slot)の中だけ編集できます。「この姿で部品を更新」で定義が変わり、他ページへの反映は利用側(savePart)が行います。
               </p>
               <div className="flex gap-1">
                 <Button

package/src/editor/hooks/useComponentEditMode.ts

@@ -683,11 +683,11 @@ export function useComponentEditMode({
     });
     closeContextMenu();
     toast.success('部品から切り離しました', {
-      description: 'この要素は普通の HTML になり、parts:sync の対象から外れます',
+      description: 'この要素は普通の HTML になり、部品の更新の対象から外れます',
     });
   }, [selectedElement?.id, getIframeDoc, notifyIframeChange, setSelectedElement, closeContextMenu]);
 
-  // インスタンスの今の姿で定義を更新する(版 +1)。他ページへは利用側の parts:sync で反映する
+  // インスタンスの今の姿で定義を更新する(版 +1)。他ページへの反映は利用側(io.savePart の実装)が行う
   const handleUpdatePart = useCallback(async () => {
     if (!selectedElement?.id) return;
     const doc = getIframeDoc();
@@ -698,9 +698,7 @@ export function useComponentEditMode({
       if (!def) return;
       notifyIframeChange(true);
       closeContextMenu();
-      toast.success(`部品「${def.name ?? def.id}」を v${def.version} に更新しました`, {
-        description: '他のページのインスタンスへは parts:sync で反映します',
-      });
+      toast.success(`部品「${def.name ?? def.id}」を v${def.version} に更新しました`);
     } catch (error) {
       console.error('Failed to update part:', error);
       toast.error('部品の更新に失敗しました');

package/src/editor/parts.ts

@@ -148,15 +148,21 @@ export function stripEditorAttrs(root: Element): void {
 /** スロットを推定して付ける対象(文字や画像を持ちうる要素) */
 const SLOT_TAGS: Record<string, string> = {
   h1: 'heading', h2: 'heading', h3: 'heading', h4: 'heading', h5: 'heading', h6: 'heading',
-  p: 'body', li: 'item', a: 'link', button: 'button', img: 'image',
-  figcaption: 'caption', blockquote: 'quote', dt: 'term', dd: 'desc',
-  td: 'cell', th: 'cell', label: 'label', span: 'text', time: 'time', small: 'note',
+  p: 'body', a: 'link', button: 'button', img: 'image',
+  figcaption: 'caption', blockquote: 'quote', label: 'label', span: 'text', time: 'time', small: 'note',
 };
 
+/** タグだけの骨格(「同じ形の兄弟」の判定用。文字と属性は見ない) */
+const tagSkeleton = (el: Element): string =>
+  `${el.tagName.toLowerCase()}${el.children.length ? `(${Array.from(el.children).map(tagSkeleton).join(',')})` : ''}`;
+
 /**
- * スロットの推定。既に `data-slot` があるものはそのまま。
- * 文書順に見て、祖先が既にスロットなら付けない(入れ子のスロットを作らない)。
- * span は文字だけを直接持つときだけ。svg の中は見ない。
+ * スロットの推定。既に `data-slot` があるものはそのまま。祖先が既にスロットなら付けない(入れ子のスロットを作らない)。
+ *
+ * 1. 繰り返し(ul/ol・dl・table、同じ形の子が 2 つ以上並ぶ器)は**器ごと 1 つのスロット**(list / items)。
+ *    カードが 3 枚か 4 枚かはページの内容であって部品の構造ではないので、項目ごとにスロットを切らない
+ *    (切ると、定義より多い項目が sync で捨てられる)。ルート自身が繰り返しの器ならルートがスロットになる
+ * 2. 残りはタグで(見出し→heading、段落→body、リンク→link …)。span は文字だけを直接持つときだけ。svg の中は見ない
  * 戻り値は付けた数。
  */
 export function inferSlots(root: Element): number {
@@ -172,12 +178,32 @@ export function inferSlots(root: Element): number {
     const base = v.replace(/-\d+$/, '');
     if (base) used.set(base, Math.max(used.get(base) ?? 0, 1));
   }
-  const candidates = Array.from(root.querySelectorAll('*'));
-  for (const el of candidates) {
-    if (el.closest('svg')) continue;
-    if (el.hasAttribute(SLOT_ATTR)) continue;
-    const ancestorSlot = el.parentElement?.closest(`[${SLOT_ATTR}]`);
-    if (ancestorSlot && root.contains(ancestorSlot)) continue;
+  const inSlot = (el: Element) => {
+    const a = el.parentElement?.closest(`[${SLOT_ATTR}]`);
+    return !!(a && root.contains(a));
+  };
+  const skip = (el: Element) => !!el.closest('svg') || el.hasAttribute(SLOT_ATTR) || inSlot(el);
+  const isRepeatContainer = (el: Element) => {
+    const kids = Array.from(el.children);
+    const tag = el.tagName.toLowerCase();
+    if ((tag === 'ul' || tag === 'ol') && kids.some((k) => k.tagName.toLowerCase() === 'li')) return 'list';
+    if (tag === 'dl' || tag === 'table') return 'list';
+    if (kids.length >= 2 && kids.every((k) => tagSkeleton(k) === tagSkeleton(kids[0]))) return 'items';
+    return null;
+  };
+  // 1. 繰り返しの器(ルート自身も含む。文書順なので外側が先に決まり、中の器は祖先がスロットになって飛ばされる)
+  for (const el of [root, ...Array.from(root.querySelectorAll('*'))]) {
+    if (el !== root && skip(el)) continue;
+    if (el === root && el.hasAttribute(SLOT_ATTR)) continue;
+    const kind = isRepeatContainer(el);
+    if (!kind) continue;
+    el.setAttribute(SLOT_ATTR, nameFor(kind));
+    count++;
+  }
+  if (root.hasAttribute(SLOT_ATTR)) return count;
+  // 2. 残りはタグで
+  for (const el of Array.from(root.querySelectorAll('*'))) {
+    if (skip(el)) continue;
     const tag = el.tagName.toLowerCase();
     const base = SLOT_TAGS[tag];
     if (!base) continue;

package/src/io.ts

@@ -77,7 +77,7 @@ export type UploadResult = { url: string; width?: number; height?: number };
  *
  * ページに挿すときは**実体化**する: 定義を複製してルートに `data-part` `data-part-v` を付けた
  * 完全な HTML がページに残る。エディタは `data-slot` の中だけを編集対象にし、
- * 定義を変えたあとの一括反映は利用側のスクリプト(parts:sync)が行う。
+ * 定義を変えたあとの他ページへの反映は利用側(savePart の実装)が行う。
  */
 export type EditorPartDef = {
   /** 識別子。`data-part` の値になる(ファイル名にも使うので英数字と - _ だけ) */