@avocadostudio-ai/preview-adapter 0.5.1 → 0.6.0

package/dist/bridge-functions.d.ts

@@ -52,6 +52,29 @@ export declare function scrollBlockIntoView(el: HTMLElement, options?: {
     behavior?: ScrollBehavior;
     block?: ScrollLogicalPosition;
 }): void;
+/**
+ * The full path a marked node stands for, composing any enclosing scopes.
+ *
+ * `data-editable-target` is scoped from the block down — `items[3].question` —
+ * which a renderer can only write if it knows where it sits. That is fine
+ * while one component draws the whole block, and false the moment a list row
+ * is rendered by a component of its own: the child knows it has a `question`
+ * and cannot know it is `items[3]`. So every renderer that can appear inside a
+ * list needed a prefix threaded in from its parent, and every parent needed to
+ * remember to pass it.
+ *
+ * Forgetting is silent and *wrong* rather than silent and absent. The child
+ * marks a bare `question`, the overlay resolves it against the enclosing
+ * block, and an edit to a headline inside a column patches a prop the section
+ * does not have.
+ *
+ * `data-editable-scope="items[3]"` on any ancestor removes the threading:
+ * children emit bare field names and composition happens here, at the one
+ * place that knows the whole ancestry. Scopes nest, outermost first.
+ */
+export declare function editablePathOf(node: HTMLElement): string;
+/** `items[3]` + `question` → `items[3].question`; `cards` + `[0].title` → `cards[0].title`. */
+export declare function joinEditablePath(scope: string, path: string): string;
 export declare function findEditableNode(parent: HTMLElement, editablePath: string): HTMLElement | null;
 /**
  * The node to point at for a field, which is not always the field's own node.

package/dist/bridge-functions.js

@@ -243,10 +243,59 @@ export function scrollBlockIntoView(el, options) {
             lastY = window.scrollY;
     }, SCROLL_SETTLE_INTERVAL_MS);
 }
+/**
+ * The full path a marked node stands for, composing any enclosing scopes.
+ *
+ * `data-editable-target` is scoped from the block down — `items[3].question` —
+ * which a renderer can only write if it knows where it sits. That is fine
+ * while one component draws the whole block, and false the moment a list row
+ * is rendered by a component of its own: the child knows it has a `question`
+ * and cannot know it is `items[3]`. So every renderer that can appear inside a
+ * list needed a prefix threaded in from its parent, and every parent needed to
+ * remember to pass it.
+ *
+ * Forgetting is silent and *wrong* rather than silent and absent. The child
+ * marks a bare `question`, the overlay resolves it against the enclosing
+ * block, and an edit to a headline inside a column patches a prop the section
+ * does not have.
+ *
+ * `data-editable-scope="items[3]"` on any ancestor removes the threading:
+ * children emit bare field names and composition happens here, at the one
+ * place that knows the whole ancestry. Scopes nest, outermost first.
+ */
+export function editablePathOf(node) {
+    const own = node.getAttribute("data-editable-target") ?? "";
+    const scopes = [];
+    // The node's own scope does not apply to itself — a component that both
+    // scopes its children and marks a field of its own would otherwise prefix
+    // its own path with the scope it sets for them.
+    let current = node.parentElement;
+    while (current) {
+        const scope = current.getAttribute("data-editable-scope");
+        if (scope)
+            scopes.unshift(scope);
+        // A block boundary ends the search: a path is scoped from the block down,
+        // and a stray scope outside one must not reach into it.
+        if (current.hasAttribute("data-block-id"))
+            break;
+        current = current.parentElement;
+    }
+    if (scopes.length === 0)
+        return own;
+    return joinEditablePath(scopes.join("."), own);
+}
+/** `items[3]` + `question` → `items[3].question`; `cards` + `[0].title` → `cards[0].title`. */
+export function joinEditablePath(scope, path) {
+    if (scope === "")
+        return path;
+    if (path === "")
+        return scope;
+    return path.startsWith("[") ? `${scope}${path}` : `${scope}.${path}`;
+}
 export function findEditableNode(parent, editablePath) {
     const nodes = parent.querySelectorAll("[data-editable-target]");
     for (const node of nodes) {
-        if ((node.getAttribute("data-editable-target") ?? "") === editablePath)
+        if (editablePathOf(node) === editablePath)
             return node;
     }
     return null;
@@ -475,7 +524,7 @@ export function computeInsertBefore(blockId, preferredNode) {
 export function groupListItemNodes(block) {
     const groups = new Map();
     block.querySelectorAll("[data-editable-target]").forEach((node) => {
-        const path = String(node.getAttribute("data-editable-target") ?? "");
+        const path = editablePathOf(node);
         const match = /^([A-Za-z_][A-Za-z0-9_]*)\[([0-9]+)\](?:\.|$)/.exec(path);
         if (!match)
             return;
@@ -839,7 +888,7 @@ export function createBridgeFunctions(state, callbacks, config) {
     const applyLiveDraftFields = (block, fields) => {
         const nextPaths = new Set(Object.keys(fields));
         for (const [node, html] of [...state.liveDraftOriginals.entries()]) {
-            const path = node.getAttribute("data-editable-target") ?? "";
+            const path = editablePathOf(node);
             if (!nextPaths.has(path)) {
                 node.innerHTML = html;
                 node.classList.remove("editor-live-typing");
@@ -1350,7 +1399,7 @@ export function createBridgeFunctions(state, callbacks, config) {
             return;
         }
         document.querySelectorAll(".editor-selectable [data-editable-target]").forEach((el) => {
-            const path = el.getAttribute("data-editable-target") ?? "";
+            const path = editablePathOf(el);
             if (!isImageEditable(el, path))
                 return;
             const block = el.closest("[data-block-id]");
@@ -1741,12 +1790,12 @@ export function createBridgeFunctions(state, callbacks, config) {
         const blockType = node.getAttribute("data-block-type");
         if (!blockId || !blockType)
             return;
-        let editablePath = childNode && node.contains(childNode) ? String(childNode.getAttribute("data-editable-target") ?? "") || undefined : undefined;
+        let editablePath = childNode && node.contains(childNode) ? editablePathOf(childNode) || undefined : undefined;
         if (!editablePath) {
             const itemRoot = target?.closest(".editor-item-has-delete");
             if (itemRoot && node.contains(itemRoot)) {
                 const firstEditable = itemRoot.querySelector("[data-editable-target]");
-                editablePath = String(firstEditable?.getAttribute("data-editable-target") ?? "") || undefined;
+                editablePath = (firstEditable ? editablePathOf(firstEditable) : "") || undefined;
             }
         }
         if (state.selectedBlockId === blockId) {
@@ -1806,7 +1855,7 @@ export function createBridgeFunctions(state, callbacks, config) {
             return;
         const blockId = node.getAttribute("data-block-id");
         const blockType = node.getAttribute("data-block-type");
-        const editablePath = String(childNode.getAttribute("data-editable-target") ?? "");
+        const editablePath = editablePathOf(childNode);
         if (!blockId || !blockType || !editablePath)
             return;
         if (!supportsInlineEditablePath(editablePath))

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@avocadostudio-ai/preview-adapter",
-  "version": "0.5.1",
+  "version": "0.6.0",
   "type": "module",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
@@ -32,7 +32,7 @@
     "src/styles.css"
   ],
   "dependencies": {
-    "@avocadostudio-ai/shared": "^0.5.1"
+    "@avocadostudio-ai/shared": "^0.6.0"
   },
   "peerDependencies": {
     "next": ">=15.0.0",