Merge pull request #421 from contentstack/VE-4232

fix(VE-4232): implement data-cslp mutation observer to manage unique IDs for elements

Author: sairaj-cs

src/visualBuilder/index.ts

@@ -268,6 +268,38 @@ 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
@@ -296,6 +328,12 @@ export class VisualBuilder {
         if (!config.enable || config.mode < ILivePreviewModeConfig.BUILDER) {
             return;
         }
+
+        this.dataCslpMutationObserver.observe(document.body, {
+            childList: true,
+            subtree: true,
+        });
+
         visualBuilderPostMessage
             ?.send<IVisualBuilderInitEvent>("init", {
                 isSSR: config.ssr,
@@ -409,6 +447,7 @@ export class VisualBuilder {
         this.resizeObserver.disconnect();
         this.mutationObserver.disconnect();
         this.threadMutationObserver.disconnect();
+        this.dataCslpMutationObserver.disconnect()
 
         // Clear global state
         VisualBuilder.VisualBuilderGlobalState.value = {

src/visualBuilder/utils/updateFocussedState.ts

@@ -105,10 +105,10 @@ export function updateFocussedState({
         return;
     }
 
-    const previousSelectedElementCslp =
-        previousSelectedEditableDOM?.getAttribute("data-cslp");
+    const previousSelectedElementCslpUniqueId =
+        previousSelectedEditableDOM?.getAttribute("data-cslp-unique-id");
     const newPreviousSelectedElement = document.querySelector(
-        `[data-cslp="${previousSelectedElementCslp}"]`
+        `[data-cslp-unique-id="${previousSelectedElementCslpUniqueId}"]`
     );
     if (!newPreviousSelectedElement && resizeObserver) {
         hideFocusOverlay({
@@ -227,9 +227,9 @@ export function updateFocussedStateOnMutation(
             .previousSelectedEditableDOM;
     if (!selectedElement) return;
 
-    const selectedElementCslp = selectedElement?.getAttribute("data-cslp");
+    const selectedElementCslpUniqueId = selectedElement?.getAttribute("data-cslp-unique-id");
     const newSelectedElement = document.querySelector(
-        `[data-cslp="${selectedElementCslp}"]`
+        `[data-cslp-unique-id="${selectedElementCslpUniqueId}"]`
     );
     if (!newSelectedElement && resizeObserver) {
         hideFocusOverlay({