@simmalugnt-se/payload-visual-editing 0.3.2 → 0.3.3

package/CHANGELOG.md

@@ -1,5 +1,12 @@
 # Changelog
 
+## 0.3.3
+
+- Focusing a field in Admin outlines a copy the preview shows, when the page renders a row more
+  than once (a desktop and a mobile menu): rendered copies win over hidden ones, and a copy with the
+  field over one with only its row. The outline used to go to the first copy in the page, which a
+  narrow preview might hide.
+
 ## 0.3.2
 
 - npm links to simmalugnt.se instead of the private source repository.

package/dist/frontend/VisualEditingPreview.js

@@ -2,6 +2,7 @@
 import { useEffect } from "react";
 import { ATTR_BLOCK, ATTR_BLOCK_NAME, ATTR_BLOCK_TYPE, ATTR_FIELD, ATTR_GLOBAL, ATTR_RICHTEXT, inScope, isFocusMessage, isLabelsMessage, MESSAGE_TYPE, nodeSnippet, } from "../protocol.js";
 import { HIGHLIGHT_COLOR, HIGHLIGHT_TINT } from "../theme.js";
+import { preferredCandidate } from "./preferred.js";
 const SELECTOR = `[${ATTR_FIELD}], [${ATTR_BLOCK}]`;
 /**
  * Render only in draft mode. Inside the Live Preview window it outlines editable blocks
@@ -220,21 +221,31 @@ function hitForBlock(blockId, field, labels) {
     if (!blockId) {
         // A top-level field: marked outside any block of this document.
         const element = field
-            ? Array.from(document.querySelectorAll(`[${ATTR_FIELD}="${CSS.escape(field)}"]`)).find((candidate) => ownerOf(candidate, labels)?.block === null)
+            ? preferredCandidate(Array.from(document.querySelectorAll(`[${ATTR_FIELD}="${CSS.escape(field)}"]`))
+                .filter((candidate) => ownerOf(candidate, labels)?.block === null)
+                .map((candidate) => ({
+                item: candidate,
+                rendered: isRendered(candidate),
+                isField: true,
+            })))
             : undefined;
         return element && field ? { element, field, label: labelFor(null, field, labels) } : null;
     }
-    const block = document.querySelector(`[${ATTR_BLOCK}="${CSS.escape(blockId)}"]`);
-    if (!block || !ownerOf(block, labels)) {
-        return null;
-    }
-    const fieldElement = field
-        ? Array.from(block.querySelectorAll(`[${ATTR_FIELD}="${CSS.escape(field)}"]`)).find((element) => element.closest(`[${ATTR_BLOCK}]`) === block)
-        : undefined;
-    if (field && fieldElement) {
-        return { element: fieldElement, blockId, field, label: labelFor(block, field, labels) };
-    }
-    return { element: block, blockId, label: labelFor(block, undefined, labels) };
+    // The same row may be rendered more than once, e.g. in a desktop and a mobile menu.
+    const blocks = Array.from(document.querySelectorAll(`[${ATTR_BLOCK}="${CSS.escape(blockId)}"]`)).filter((block) => ownerOf(block, labels));
+    return (preferredCandidate(blocks.map((block) => {
+        const fieldElement = field
+            ? Array.from(block.querySelectorAll(`[${ATTR_FIELD}="${CSS.escape(field)}"]`)).find((element) => element.closest(`[${ATTR_BLOCK}]`) === block)
+            : undefined;
+        const hit = field && fieldElement
+            ? { element: fieldElement, blockId, field, label: labelFor(block, field, labels) }
+            : { element: block, blockId, label: labelFor(block, undefined, labels) };
+        return { item: hit, rendered: isRendered(hit.element), isField: hit.field !== undefined };
+    })) ?? null);
+}
+/** Laid out on the page: an element inside `display: none` has no boxes. */
+function isRendered(element) {
+    return element.getClientRects().length > 0;
 }
 /**
  * Same order as Admin's row header: the editor's block name, then the block's label, then its slug.

package/dist/frontend/preferred.d.ts

@@ -0,0 +1,13 @@
+/** One place a row or field is rendered. Pure, so the choice can be tested without a DOM. */
+export type Candidate<T> = {
+    item: T;
+    /** Laid out on the page; false inside `display: none`, e.g. a desktop menu on a phone. */
+    rendered: boolean;
+    /** The field itself, not only its row. */
+    isField: boolean;
+};
+/**
+ * Pages render some rows more than once (a desktop and a mobile menu, a list and its images).
+ * Prefer a rendered field, then a rendered row, then a hidden field; on a tie the first in the DOM.
+ */
+export declare function preferredCandidate<T>(candidates: Candidate<T>[]): T | undefined;

package/dist/frontend/preferred.js

@@ -0,0 +1,16 @@
+/**
+ * Pages render some rows more than once (a desktop and a mobile menu, a list and its images).
+ * Prefer a rendered field, then a rendered row, then a hidden field; on a tie the first in the DOM.
+ */
+export function preferredCandidate(candidates) {
+    let best;
+    for (const candidate of candidates) {
+        if (!best || rank(candidate) > rank(best)) {
+            best = candidate;
+        }
+    }
+    return best?.item;
+}
+function rank(candidate) {
+    return (candidate.rendered ? 2 : 0) + (candidate.isField ? 1 : 0);
+}

package/package.json

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