@simmalugnt-se/payload-visual-editing 0.3.0 → 0.3.1

package/CHANGELOG.md

@@ -1,5 +1,11 @@
 # Changelog
 
+## 0.3.1
+
+- Preview clicks open collapsed Payload `collapsible` fields around the target, including nested
+  collapsibles and those inside tabs, groups and rows. The bridge finds each by the id Payload
+  gives it, so a collapsible hidden by a condition does not change which one opens.
+
 ## 0.3.0
 
 - Globals: `visualEditingPlugin({ globals: ["header", "footer"] })` supports click-to-edit in a

package/dist/admin/VisualEditingAdminBridge.js

@@ -230,8 +230,8 @@ function formRoot(anchor) {
     return view?.querySelector(".collection-edit__form") ?? document;
 }
 /**
- * Open the rows and tabs the plan needs, one level at a time, waiting for each to render.
- * Returns the innermost scope (row or tab content), where the target field renders.
+ * Open the rows, tabs and collapsibles the plan needs, one level at a time.
+ * Returns the innermost scope, where the target field renders.
  */
 async function openSteps(steps, root, current) {
     let scope = root;
@@ -247,6 +247,26 @@ async function openSteps(steps, root, current) {
             scope = row;
             continue;
         }
+        if (step.kind === "collapsible") {
+            const collapsibleScope = scope;
+            const field = await waitForRendered(() => collapsibleScope.querySelector(`[id="${collapsibleDomId(step.path)}"]`), collapsibleScope);
+            const element = field?.querySelector(":scope > .collapsible");
+            const button = element?.querySelector(":scope > .collapsible__toggle-wrap > .collapsible__toggle");
+            if (!element || !button) {
+                return null;
+            }
+            if (element.classList.contains("collapsible--collapsed")) {
+                button.click();
+            }
+            const content = await waitFor(() => element.classList.contains("collapsible--collapsed")
+                ? null
+                : element.querySelector(".collapsible__content"));
+            if (!content) {
+                return null;
+            }
+            scope = content;
+            continue;
+        }
         const tabsScope = scope;
         const tabs = await waitForRendered(() => tabsFieldsIn(tabsScope)[step.ordinal] ?? null, tabsScope);
         const button = tabs?.querySelectorAll(":scope > .tabs-field__tabs-wrap > .tabs-field__tabs > .tabs-field__tab-button")[step.index];
@@ -281,13 +301,17 @@ async function waitForRendered(find, scope, timeoutMs = WAIT_MS) {
     }
     return waitFor(find, timeoutMs);
 }
-/** Tabs fields at this level of the scope, in DOM order; nested tabs and rows are other scopes. */
+/** Tabs fields at this level of the scope, in DOM order; nested containers are other scopes. */
 function tabsFieldsIn(scope) {
     return Array.from(scope.querySelectorAll(".tabs-field")).filter((element) => {
-        const outer = element.parentElement?.closest(".tabs-field, .blocks-field, .array-field");
+        const outer = element.parentElement?.closest(".tabs-field, .collapsible-field, .blocks-field, .array-field");
         return !outer || !scope.contains(outer);
     });
 }
+/** Payload's id for a collapsible field: `field-collapsible-` and its path with `__` for dots. */
+function collapsibleDomId(path) {
+    return `field-collapsible-${path.replace(/\./g, "__")}`;
+}
 function waitFor(find, timeoutMs = WAIT_MS) {
     const deadline = performance.now() + timeoutMs;
     return new Promise((resolve) => {

package/dist/reveal-plan.d.ts

@@ -1,6 +1,5 @@
 /**
- * Work out which tabs must be opened to show a form path. Payload only renders the active tab,
- * so a field in another tab has no DOM element until its tab button is clicked.
+ * Work out which tabs and collapsibles must be opened to show a form path.
  * Pure: takes client field config, returns steps for the Admin bridge to perform.
  */
 export type FieldLike = {
@@ -33,6 +32,15 @@ export type RevealStep =
     ordinal: number;
     index: number;
 }
+/**
+ * Open the collapsible field Payload renders at this path, then enter its content. The path is
+ * Payload's own for an unnamed field (`meta._index-0-1`) and gives its DOM id, so a collapsible
+ * hidden by a condition does not shift which one is opened.
+ */
+ | {
+    kind: "collapsible";
+    path: string;
+}
 /** Enter a block or array row. The row element becomes the scope. */
  | {
     kind: "row";

package/dist/reveal-plan.js

@@ -1,6 +1,5 @@
 /**
- * Work out which tabs must be opened to show a form path. Payload only renders the active tab,
- * so a field in another tab has no DOM element until its tab button is clicked.
+ * Work out which tabs and collapsibles must be opened to show a form path.
  * Pure: takes client field config, returns steps for the Admin bridge to perform.
  */
 export function planReveal(rootFields, path, lookup) {
@@ -14,22 +13,22 @@ function walkPath(rootFields, path, lookup) {
     const segments = path.split(".");
     const steps = [];
     let fields = rootFields;
-    let counter = { value: 0 };
+    let counter = { tabs: 0 };
     let walked = [];
     let last = null;
     for (let i = 0; i < segments.length;) {
         const segment = segments[i] ?? "";
-        const found = findIn(fields, segment, counter);
+        const found = findIn(fields, segment, counter, { dataPath: walked.join("."), indexPath: "" });
         if (!found) {
             return null;
         }
-        steps.push(...found.tabs);
+        steps.push(...found.steps);
         counter = found.counter;
         walked = [...walked, segment];
         i += 1;
         if (found.kind === "namedTab") {
             fields = found.fields;
-            counter = { value: 0 };
+            counter = { tabs: 0 };
             continue;
         }
         const field = found.field;
@@ -42,7 +41,7 @@ function walkPath(rootFields, path, lookup) {
             steps.push({ kind: "row", parentPath, index: Number(next) });
             walked = [...walked, next];
             i += 1;
-            counter = { value: 0 };
+            counter = { tabs: 0 };
             if (field.type === "array") {
                 fields = field.fields ?? [];
                 continue;
@@ -55,7 +54,7 @@ function walkPath(rootFields, path, lookup) {
             continue;
         }
         if (field.fields) {
-            // Named group: same DOM scope, keep counting tabs.
+            // Named group: same DOM scope, keep counting revealable fields.
             fields = field.fields;
             continue;
         }
@@ -64,51 +63,72 @@ function walkPath(rootFields, path, lookup) {
     }
     return { steps, field: last };
 }
-function findIn(fields, name, counter) {
-    for (const field of fields) {
+function findIn(fields, name, counter, place) {
+    for (const [position, field] of fields.entries()) {
         if (field.type === "tabs") {
-            const ordinal = counter.value;
-            counter.value += 1;
+            const ordinal = counter.tabs;
+            counter.tabs += 1;
+            const tabsPlace = unnamedChild(place, position);
             for (const [index, tab] of (field.tabs ?? []).entries()) {
                 const step = { kind: "tab", ordinal, index };
                 if (tab.name === name) {
                     return {
                         kind: "namedTab",
                         fields: tab.fields ?? [],
-                        tabs: [step],
-                        counter: { value: 0 },
+                        steps: [step],
+                        counter: { tabs: 0 },
                     };
                 }
                 if (!tab.name) {
-                    const inner = findIn(tab.fields ?? [], name, { value: 0 });
+                    const inner = findIn(tab.fields ?? [], name, { tabs: 0 }, unnamedChild(tabsPlace, index));
                     if (inner) {
-                        return { ...inner, tabs: [step, ...inner.tabs] };
+                        return { ...inner, steps: [step, ...inner.steps] };
                     }
                 }
             }
             continue;
         }
         if (field.name === name) {
-            return { kind: "field", field, tabs: [], counter };
+            return { kind: "field", field, steps: [], counter };
         }
         if (!field.name && field.fields) {
-            // Row, collapsible or unnamed group: transparent for paths.
-            const inner = findIn(field.fields, name, counter);
+            // Row, collapsible or unnamed group: no segment in the form path. A collapsible is its own
+            // DOM scope, found by the path Payload gives it.
+            const own = unnamedChild(place, position);
+            if (field.type === "collapsible") {
+                const inner = findIn(field.fields, name, { tabs: 0 }, own);
+                if (inner) {
+                    const path = [place.dataPath, `_index-${own.indexPath}`].filter(Boolean).join(".");
+                    return { ...inner, steps: [{ kind: "collapsible", path }, ...inner.steps] };
+                }
+                continue;
+            }
+            const inner = findIn(field.fields, name, counter, own);
             if (inner) {
                 return inner;
             }
             continue;
         }
-        counter.value += countTabs(field);
+        counter.tabs += countTabs(field);
     }
     return null;
 }
+/** The place of the unnamed field at `position`, whose own fields render there too. */
+function unnamedChild(place, position) {
+    return {
+        dataPath: place.dataPath,
+        indexPath: place.indexPath ? `${place.indexPath}-${position}` : String(position),
+    };
+}
 /** Tabs fields rendered inside a field that is skipped, so later ordinals stay aligned with the DOM. */
 function countTabs(field) {
     if (field.type === "tabs") {
         return 1;
     }
-    if (field.type === "blocks" || field.type === "array" || !field.fields) {
+    if (field.type === "blocks" ||
+        field.type === "array" ||
+        field.type === "collapsible" ||
+        !field.fields) {
         return 0;
     }
     return field.fields.reduce((sum, child) => sum + countTabs(child), 0);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@simmalugnt-se/payload-visual-editing",
-  "version": "0.3.0",
+  "version": "0.3.1",
   "description": "Click a block in Payload Live Preview to open its fields in the edit form",
   "keywords": [
     "payload",