Merge pull request #429 from contentstack/multiple-elements-cslp

fix: set unique ID on element click

Author: faraazb

src/visualBuilder/__test__/index.test.ts

@@ -35,6 +35,7 @@ vi.mock("../utils/visualBuilderPostMessage", async () => {
 Object.defineProperty(globalThis, "crypto", {
     value: {
         getRandomValues: (arr: Array<any>) => crypto.randomBytes(arr.length),
+        randomUUID: () => crypto.randomUUID()
     },
 });
 // Increase the timeout for the test

src/visualBuilder/index.ts

@@ -268,38 +268,6 @@ export class VisualBuilder {
         }, 1000)
     );
 
-    private dataCslpMutationObserver = new MutationObserver((mutations) => {
-        let shouldCheck = false;
-
-        mutations.forEach((mutation) => {
-            if (
-                mutation.type === "childList" &&
-                mutation.addedNodes.length > 0
-            ) {
-                for (const node of mutation.addedNodes) {
-                    if (node.nodeType === Node.ELEMENT_NODE) {
-                        if ((node as Element).hasAttribute("data-cslp")) {
-                            shouldCheck = true;
-                            break;
-                        }
-                    }
-                }
-            }
-        });
-
-        if (shouldCheck) {
-            const dataCslpElements = document.querySelectorAll("[data-cslp]");
-            if (dataCslpElements.length > 0) {
-                dataCslpElements.forEach((element) => {
-                    if (!element.hasAttribute("data-cslp-unique-id")) {
-                        const uniqueId = `cslp-${window.crypto.randomUUID()}`;
-                        element.setAttribute("data-cslp-unique-id", uniqueId);
-                    }
-                });
-            }
-        }
-    });
-
     constructor() {
         // Handles changes in element positions due to sidebar toggling or window resizing,
         // triggering a redraw of the visual builder
@@ -329,11 +297,6 @@ export class VisualBuilder {
             return;
         }
 
-        this.dataCslpMutationObserver.observe(document.body, {
-            childList: true,
-            subtree: true,
-        });
-
         visualBuilderPostMessage
             ?.send<IVisualBuilderInitEvent>("init", {
                 isSSR: config.ssr,
@@ -447,7 +410,6 @@ export class VisualBuilder {
         this.resizeObserver.disconnect();
         this.mutationObserver.disconnect();
         this.threadMutationObserver.disconnect();
-        this.dataCslpMutationObserver.disconnect()
 
         // Clear global state
         VisualBuilder.VisualBuilderGlobalState.value = {

src/visualBuilder/listeners/mouseClick.ts

@@ -79,6 +79,22 @@ async function handleBuilderInteraction(
         (eventTarget.hasAttribute("data-cslp") ||
             eventTarget.closest("[data-cslp]"));
 
+    // if multiple elements with the same cslp element are found,
+    // assign a unique ID to each element which we can use to identify
+    // them in updateFocussedState and other places where we
+    // would have queried the element by data-cslp
+    const duplicates = document.querySelectorAll(
+        `[data-cslp="${eventTarget?.getAttribute("data-cslp")}"]`
+    );
+    if (duplicates.length > 1) {
+        duplicates.forEach((ele) => {
+            if (!ele.hasAttribute("data-cslp-unique-id")) {
+                const uniqueId = `cslp-${window.crypto.randomUUID()}`;
+                ele.setAttribute("data-cslp-unique-id", uniqueId);
+            }
+        });
+    }
+
     // if the target element is a studio-ui element, return
     // this is currently used for the "Edit in Studio" button
     if (eventTarget?.getAttribute("data-studio-ui") === "true") {

src/visualBuilder/utils/updateFocussedState.ts

@@ -105,11 +105,16 @@ export function updateFocussedState({
         return;
     }
 
+    // prefer data-cslp-unique-id when available else use data-cslp.
+    // unique ID is added on click when multiple elements with same
+    // data-cslp are found.
+    const previousSelectedElementCslp = editableElement?.getAttribute("data-cslp") || "";
     const previousSelectedElementCslpUniqueId =
         previousSelectedEditableDOM?.getAttribute("data-cslp-unique-id");
-    const newPreviousSelectedElement = document.querySelector(
-        `[data-cslp-unique-id="${previousSelectedElementCslpUniqueId}"]`
-    );
+    const newPreviousSelectedElement =
+        document.querySelector(
+            `[data-cslp-unique-id="${previousSelectedElementCslpUniqueId}"]`
+        ) || document.querySelector(`[data-cslp="${previousSelectedElementCslp}"]`);
     if (!newPreviousSelectedElement && resizeObserver) {
         hideFocusOverlay({
             visualBuilderOverlayWrapper: overlayWrapper,
@@ -148,8 +153,7 @@ export function updateFocussedState({
         psuedoEditableElement.style.visibility = "visible";
     }
 
-    const cslp = editableElement?.getAttribute("data-cslp") || "";
-    const fieldMetadata = extractDetailsFromCslp(cslp);
+    const fieldMetadata = extractDetailsFromCslp(previousSelectedElementCslp);
 
     const targetElementDimension = editableElement.getBoundingClientRect();
     if (targetElementDimension.width && targetElementDimension.height) {
@@ -227,10 +231,14 @@ export function updateFocussedStateOnMutation(
             .previousSelectedEditableDOM;
     if (!selectedElement) return;
 
-    const selectedElementCslpUniqueId = selectedElement?.getAttribute("data-cslp-unique-id");
-    const newSelectedElement = document.querySelector(
-        `[data-cslp-unique-id="${selectedElementCslpUniqueId}"]`
+    const selectedElementCslp = selectedElement.getAttribute("data-cslp");
+    const selectedElementCslpUniqueId = selectedElement?.getAttribute(
+        "data-cslp-unique-id"
     );
+    const newSelectedElement =
+        document.querySelector(
+            `[data-cslp-unique-id="${selectedElementCslpUniqueId}"]`
+        ) || document.querySelector(`[data-cslp="${selectedElementCslp}"]`);
     if (!newSelectedElement && resizeObserver) {
         hideFocusOverlay({
             visualBuilderOverlayWrapper: focusOverlayWrapper,