@contentstack/live-preview-utils 3.2.0-alpha.1 → 3.2.1

package/dist/modern/visualBuilder/eventManager/useHideFocusOverlayPostMessageEvent.js

@@ -4,6 +4,7 @@ import "../../chunk-5WRI5ZAA.js";
 import { hideOverlay } from "../generators/generateOverlay.js";
 import visualBuilderPostMessage from "../utils/visualBuilderPostMessage.js";
 import { VisualBuilderPostMessageEvents } from "../utils/types/postMessage.types.js";
+import Config from "../../configManager/configManager.js";
 function useHideFocusOverlayPostMessageEvent({
   visualBuilderContainer,
   overlayWrapper,
@@ -13,6 +14,10 @@ function useHideFocusOverlayPostMessageEvent({
   visualBuilderPostMessage?.on(
     VisualBuilderPostMessageEvents.HIDE_FOCUS_OVERLAY,
     (args) => {
+      if (Boolean(args?.data?.fromCollab)) {
+        Config.set("collab.enable", true);
+        Config.set("collab.pauseFeedback", true);
+      }
       hideOverlay({
         visualBuilderOverlayWrapper: overlayWrapper,
         visualBuilderContainer,

package/dist/modern/visualBuilder/eventManager/useHideFocusOverlayPostMessageEvent.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/visualBuilder/eventManager/useHideFocusOverlayPostMessageEvent.ts"],"sourcesContent":["import { hideOverlay } from \"../generators/generateOverlay\";\nimport EventListenerHandlerParams from \"../listeners/types\";\nimport visualBuilderPostMessage from \"../utils/visualBuilderPostMessage\";\nimport { VisualBuilderPostMessageEvents } from \"../utils/types/postMessage.types\";\n\ntype HideFocusOverlayEventHandlerParams = Omit<\n    EventListenerHandlerParams,\n    \"event\" | \"eventDetails\" | \"customCursor\" | \"previousSelectedEditableDOM\"\n>;\n\nexport function useHideFocusOverlayPostMessageEvent({\n    visualBuilderContainer,\n    overlayWrapper,\n    focusedToolbar,\n    resizeObserver,\n}: HideFocusOverlayEventHandlerParams): void {\n    visualBuilderPostMessage?.on(\n        VisualBuilderPostMessageEvents.HIDE_FOCUS_OVERLAY,\n        (args: { data: { noTrigger: boolean } }) => {\n            hideOverlay({\n                visualBuilderOverlayWrapper: overlayWrapper,\n                visualBuilderContainer,\n                focusedToolbar,\n                resizeObserver,\n                noTrigger: Boolean(args?.data?.noTrigger)\n            });\n        }\n    );\n}\n"],"mappings":";;;AAAA,SAAS,mBAAmB;AAE5B,OAAO,8BAA8B;AACrC,SAAS,sCAAsC;AAOxC,SAAS,oCAAoC;AAAA,EAChD;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACJ,GAA6C;AACzC,4BAA0B;AAAA,IACtB,+BAA+B;AAAA,IAC/B,CAAC,SAA2C;AACxC,kBAAY;AAAA,QACR,6BAA6B;AAAA,QAC7B;AAAA,QACA;AAAA,QACA;AAAA,QACA,WAAW,QAAQ,MAAM,MAAM,SAAS;AAAA,MAC5C,CAAC;AAAA,IACL;AAAA,EACJ;AACJ;","names":[]}
+{"version":3,"sources":["../../../../src/visualBuilder/eventManager/useHideFocusOverlayPostMessageEvent.ts"],"sourcesContent":["import { hideOverlay } from \"../generators/generateOverlay\";\nimport EventListenerHandlerParams from \"../listeners/types\";\nimport visualBuilderPostMessage from \"../utils/visualBuilderPostMessage\";\nimport { VisualBuilderPostMessageEvents } from \"../utils/types/postMessage.types\";\nimport Config from \"../../configManager/configManager\";\n\ntype HideFocusOverlayEventHandlerParams = Omit<\n    EventListenerHandlerParams,\n    \"event\" | \"eventDetails\" | \"customCursor\" | \"previousSelectedEditableDOM\"\n>;\n\nexport function useHideFocusOverlayPostMessageEvent({\n    visualBuilderContainer,\n    overlayWrapper,\n    focusedToolbar,\n    resizeObserver,\n}: HideFocusOverlayEventHandlerParams): void {\n    visualBuilderPostMessage?.on(\n        VisualBuilderPostMessageEvents.HIDE_FOCUS_OVERLAY,\n        (args: { data: { noTrigger: boolean; fromCollab: boolean } }) => {\n            if (Boolean(args?.data?.fromCollab)) {\n                Config.set(\"collab.enable\", true);\n                Config.set(\"collab.pauseFeedback\", true);\n            }\n\n            hideOverlay({\n                visualBuilderOverlayWrapper: overlayWrapper,\n                visualBuilderContainer,\n                focusedToolbar,\n                resizeObserver,\n                noTrigger: Boolean(args?.data?.noTrigger),\n            });\n        }\n    );\n}\n"],"mappings":";;;AAAA,SAAS,mBAAmB;AAE5B,OAAO,8BAA8B;AACrC,SAAS,sCAAsC;AAC/C,OAAO,YAAY;AAOZ,SAAS,oCAAoC;AAAA,EAChD;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACJ,GAA6C;AACzC,4BAA0B;AAAA,IACtB,+BAA+B;AAAA,IAC/B,CAAC,SAAgE;AAC7D,UAAI,QAAQ,MAAM,MAAM,UAAU,GAAG;AACjC,eAAO,IAAI,iBAAiB,IAAI;AAChC,eAAO,IAAI,wBAAwB,IAAI;AAAA,MAC3C;AAEA,kBAAY;AAAA,QACR,6BAA6B;AAAA,QAC7B;AAAA,QACA;AAAA,QACA;AAAA,QACA,WAAW,QAAQ,MAAM,MAAM,SAAS;AAAA,MAC5C,CAAC;AAAA,IACL;AAAA,EACJ;AACJ;","names":[]}

package/dist/modern/visualBuilder/eventManager/useRecalculateVariantDataCSLPValues.cjs

@@ -57,8 +57,10 @@ function updateVariantClasses({
   const observers = [];
   const updateElementClasses = (element, dataCslp, observer) => {
     if (!dataCslp) return;
-    if (dataCslp.startsWith("v2:") && element.classList.contains("visual-builder__base-field")) {
-      element.classList.remove("visual-builder__base-field");
+    if (dataCslp.startsWith("v2:") && !element.classList.contains("visual-builder__variant-field")) {
+      if (element.classList.contains("visual-builder__base-field")) {
+        element.classList.remove("visual-builder__base-field");
+      }
       if (highlightVariantFields) {
         element.classList.add(
           (0, import_visualBuilder.visualBuilderStyles)()["visual-builder__variant-field"],
@@ -80,12 +82,53 @@ function updateVariantClasses({
       );
       element.classList.add("visual-builder__disabled-variant-field");
     }
+    if (!observer) return;
     observer.disconnect();
     const index = observers.indexOf(observer);
     if (index > -1) {
       observers.splice(index, 1);
     }
   };
+  const addElementClasses = (element) => {
+    const dataCslp = element.getAttribute(import_constants.DATA_CSLP_ATTR_SELECTOR);
+    if (!dataCslp) {
+      element.childNodes.forEach((child) => {
+        if (child instanceof HTMLElement) {
+          addElementClasses(child);
+        }
+      });
+      return;
+    }
+    if (dataCslp.startsWith("v2:") && element.classList.contains("visual-builder__variant-field")) {
+      return;
+    }
+    if (dataCslp.startsWith("v2:") && !element.classList.contains("visual-builder__variant-field")) {
+      if (element.classList.contains("visual-builder__base-field")) {
+        element.classList.remove("visual-builder__base-field");
+      }
+      if (highlightVariantFields) {
+        element.classList.add(
+          (0, import_visualBuilder.visualBuilderStyles)()["visual-builder__variant-field"],
+          "visual-builder__variant-field"
+        );
+      } else {
+        element.classList.add("visual-builder__variant-field");
+      }
+    } else if (!dataCslp.startsWith("v2:")) {
+      if (element.classList.contains("visual-builder__variant-field")) {
+        element.classList.remove(
+          (0, import_visualBuilder.visualBuilderStyles)()["visual-builder__variant-field"],
+          "visual-builder__variant-field"
+        );
+      }
+      element.classList.add("visual-builder__base-field");
+    }
+    element.childNodes.forEach((child) => {
+      if (child instanceof HTMLElement) {
+        addElementClasses(child);
+      }
+    });
+  };
   const elementsWithCslp = document.querySelectorAll(
     `[${import_constants.DATA_CSLP_ATTR_SELECTOR}]`
   );
@@ -93,7 +136,14 @@ function updateVariantClasses({
     const element = elementNode;
     const observer = new MutationObserver((mutations) => {
       mutations.forEach((mutation) => {
-        if (mutation.type === "attributes" && mutation.attributeName === import_constants.DATA_CSLP_ATTR_SELECTOR) {
+        if (mutation.type === "attributes" && mutation.attributeName === import_constants.DATA_CSLP_ATTR_SELECTOR || mutation.type === "childList") {
+          if (mutation.addedNodes.length > 0) {
+            mutation.addedNodes.forEach((node) => {
+              if (node instanceof HTMLElement) {
+                addElementClasses(node);
+              }
+            });
+          }
           const dataCslp = element.getAttribute(
             import_constants.DATA_CSLP_ATTR_SELECTOR
           );
@@ -102,7 +152,12 @@ function updateVariantClasses({
       });
     });
     observers.push(observer);
-    observer.observe(element, { attributes: true });
+    observer.observe(element, {
+      attributes: true,
+      childList: true,
+      // Observe direct children
+      subtree: true
+    });
   });
   setTimeout(() => {
     if (observers.length > 0) {

package/dist/modern/visualBuilder/eventManager/useRecalculateVariantDataCSLPValues.cjs.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/visualBuilder/eventManager/useRecalculateVariantDataCSLPValues.ts"],"sourcesContent":["import { VisualBuilder } from \"..\";\nimport livePreviewPostMessage from \"../../livePreview/eventManager/livePreviewEventManager\";\nimport { LIVE_PREVIEW_POST_MESSAGE_EVENTS } from \"../../livePreview/eventManager/livePreviewEventManager.constant\";\nimport { DATA_CSLP_ATTR_SELECTOR } from \"../utils/constants\";\nimport { visualBuilderStyles } from \"../visualBuilder.style\";\n\nconst VARIANT_UPDATE_DELAY_MS: Readonly<number> = 8000;\n\ntype OnAudienceModeVariantPatchUpdate = {\n    highlightVariantFields: boolean;\n    expectedCSLPValues: Record<\"variant\" | \"base\", string>;\n};\n\n/**\n * Registers a post message event listener for updating the variant / base classes in the live preview for audience mode.\n */\nexport function useRecalculateVariantDataCSLPValues(): void {\n    livePreviewPostMessage?.on<OnAudienceModeVariantPatchUpdate>(\n        LIVE_PREVIEW_POST_MESSAGE_EVENTS.VARIANT_PATCH,\n        (event) => {\n            if (VisualBuilder.VisualBuilderGlobalState.value.audienceMode) {\n                updateVariantClasses(event.data);\n            }\n        }\n    );\n}\nfunction updateVariantClasses({\n    highlightVariantFields,\n    expectedCSLPValues,\n}: OnAudienceModeVariantPatchUpdate): void {\n    const variant = VisualBuilder.VisualBuilderGlobalState.value.variant;\n    const observers: MutationObserver[] = [];\n\n    // Helper function to update element classes\n    const updateElementClasses = (\n        element: HTMLElement,\n        dataCslp: string,\n        observer: MutationObserver\n    ) => {\n        if (!dataCslp) return;\n\n        if (\n            dataCslp.startsWith(\"v2:\") &&\n            element.classList.contains(\"visual-builder__base-field\")\n        ) {\n            element.classList.remove(\"visual-builder__base-field\");\n            if (highlightVariantFields) {\n                element.classList.add(\n                    visualBuilderStyles()[\"visual-builder__variant-field\"],\n                    \"visual-builder__variant-field\"\n                );\n            } else {\n                element.classList.add(\"visual-builder__variant-field\");\n            }\n        } else if (\n            !dataCslp.startsWith(\"v2:\") &&\n            element.classList.contains(\"visual-builder__variant-field\")\n        ) {\n            element.classList.remove(\n                visualBuilderStyles()[\"visual-builder__variant-field\"],\n                \"visual-builder__variant-field\"\n            );\n            element.classList.add(\"visual-builder__base-field\");\n        } else if (\n            dataCslp.startsWith(\"v2:\") &&\n            variant &&\n            !dataCslp.includes(variant) &&\n            element.classList.contains(\"visual-builder__variant-field\")\n        ) {\n            element.classList.remove(\n                visualBuilderStyles()[\"visual-builder__variant-field\"],\n                \"visual-builder__variant-field\"\n            );\n            element.classList.add(\"visual-builder__disabled-variant-field\");\n        }\n\n        // Disconnect this observer after processing\n        observer.disconnect();\n        const index = observers.indexOf(observer);\n        if (index > -1) {\n            observers.splice(index, 1);\n        }\n    };\n\n    // Create a separate observer for each element\n    const elementsWithCslp = document.querySelectorAll(\n        `[${DATA_CSLP_ATTR_SELECTOR}]`\n    );\n\n    elementsWithCslp.forEach((elementNode) => {\n        const element = elementNode as HTMLElement;\n\n        const observer = new MutationObserver((mutations) => {\n            mutations.forEach((mutation) => {\n                if (\n                    mutation.type === \"attributes\" &&\n                    mutation.attributeName === DATA_CSLP_ATTR_SELECTOR\n                ) {\n                    const dataCslp = element.getAttribute(\n                        DATA_CSLP_ATTR_SELECTOR\n                    );\n                    updateElementClasses(element, dataCslp || \"\", observer);\n                }\n            });\n        });\n\n        observers.push(observer);\n        observer.observe(element, { attributes: true });\n    });\n\n    setTimeout(() => {\n        if (observers.length > 0) {\n            observers.forEach((observer) => observer.disconnect());\n            observers.length = 0;\n        }\n    }, VARIANT_UPDATE_DELAY_MS);\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,eAA8B;AAC9B,qCAAmC;AACnC,IAAAA,kCAAiD;AACjD,uBAAwC;AACxC,2BAAoC;AAEpC,IAAM,0BAA4C;AAU3C,SAAS,sCAA4C;AACxD,iCAAAC,SAAwB;AAAA,IACpB,iEAAiC;AAAA,IACjC,CAAC,UAAU;AACP,UAAI,uBAAc,yBAAyB,MAAM,cAAc;AAC3D,6BAAqB,MAAM,IAAI;AAAA,MACnC;AAAA,IACJ;AAAA,EACJ;AACJ;AACA,SAAS,qBAAqB;AAAA,EAC1B;AAAA,EACA;AACJ,GAA2C;AACvC,QAAM,UAAU,uBAAc,yBAAyB,MAAM;AAC7D,QAAM,YAAgC,CAAC;AAGvC,QAAM,uBAAuB,CACzB,SACA,UACA,aACC;AACD,QAAI,CAAC,SAAU;AAEf,QACI,SAAS,WAAW,KAAK,KACzB,QAAQ,UAAU,SAAS,4BAA4B,GACzD;AACE,cAAQ,UAAU,OAAO,4BAA4B;AACrD,UAAI,wBAAwB;AACxB,gBAAQ,UAAU;AAAA,cACd,0CAAoB,EAAE,+BAA+B;AAAA,UACrD;AAAA,QACJ;AAAA,MACJ,OAAO;AACH,gBAAQ,UAAU,IAAI,+BAA+B;AAAA,MACzD;AAAA,IACJ,WACI,CAAC,SAAS,WAAW,KAAK,KAC1B,QAAQ,UAAU,SAAS,+BAA+B,GAC5D;AACE,cAAQ,UAAU;AAAA,YACd,0CAAoB,EAAE,+BAA+B;AAAA,QACrD;AAAA,MACJ;AACA,cAAQ,UAAU,IAAI,4BAA4B;AAAA,IACtD,WACI,SAAS,WAAW,KAAK,KACzB,WACA,CAAC,SAAS,SAAS,OAAO,KAC1B,QAAQ,UAAU,SAAS,+BAA+B,GAC5D;AACE,cAAQ,UAAU;AAAA,YACd,0CAAoB,EAAE,+BAA+B;AAAA,QACrD;AAAA,MACJ;AACA,cAAQ,UAAU,IAAI,wCAAwC;AAAA,IAClE;AAGA,aAAS,WAAW;AACpB,UAAM,QAAQ,UAAU,QAAQ,QAAQ;AACxC,QAAI,QAAQ,IAAI;AACZ,gBAAU,OAAO,OAAO,CAAC;AAAA,IAC7B;AAAA,EACJ;AAGA,QAAM,mBAAmB,SAAS;AAAA,IAC9B,IAAI,wCAAuB;AAAA,EAC/B;AAEA,mBAAiB,QAAQ,CAAC,gBAAgB;AACtC,UAAM,UAAU;AAEhB,UAAM,WAAW,IAAI,iBAAiB,CAAC,cAAc;AACjD,gBAAU,QAAQ,CAAC,aAAa;AAC5B,YACI,SAAS,SAAS,gBAClB,SAAS,kBAAkB,0CAC7B;AACE,gBAAM,WAAW,QAAQ;AAAA,YACrB;AAAA,UACJ;AACA,+BAAqB,SAAS,YAAY,IAAI,QAAQ;AAAA,QAC1D;AAAA,MACJ,CAAC;AAAA,IACL,CAAC;AAED,cAAU,KAAK,QAAQ;AACvB,aAAS,QAAQ,SAAS,EAAE,YAAY,KAAK,CAAC;AAAA,EAClD,CAAC;AAED,aAAW,MAAM;AACb,QAAI,UAAU,SAAS,GAAG;AACtB,gBAAU,QAAQ,CAAC,aAAa,SAAS,WAAW,CAAC;AACrD,gBAAU,SAAS;AAAA,IACvB;AAAA,EACJ,GAAG,uBAAuB;AAC9B;","names":["import_livePreviewEventManager","livePreviewPostMessage"]}
+{"version":3,"sources":["../../../../src/visualBuilder/eventManager/useRecalculateVariantDataCSLPValues.ts"],"sourcesContent":["import { VisualBuilder } from \"..\";\nimport livePreviewPostMessage from \"../../livePreview/eventManager/livePreviewEventManager\";\nimport { LIVE_PREVIEW_POST_MESSAGE_EVENTS } from \"../../livePreview/eventManager/livePreviewEventManager.constant\";\nimport { DATA_CSLP_ATTR_SELECTOR } from \"../utils/constants\";\nimport { visualBuilderStyles } from \"../visualBuilder.style\";\n\nconst VARIANT_UPDATE_DELAY_MS: Readonly<number> = 8000;\n\ntype OnAudienceModeVariantPatchUpdate = {\n    highlightVariantFields: boolean;\n    expectedCSLPValues: Record<\"variant\" | \"base\", string>;\n};\n\n/**\n * Registers a post message event listener for updating the variant / base classes in the live preview for audience mode.\n */\nexport function useRecalculateVariantDataCSLPValues(): void {\n    livePreviewPostMessage?.on<OnAudienceModeVariantPatchUpdate>(\n        LIVE_PREVIEW_POST_MESSAGE_EVENTS.VARIANT_PATCH,\n        (event) => {\n            if (VisualBuilder.VisualBuilderGlobalState.value.audienceMode) {\n                updateVariantClasses(event.data);\n            }\n        }\n    );\n}\nfunction updateVariantClasses({\n    highlightVariantFields,\n    expectedCSLPValues,\n}: OnAudienceModeVariantPatchUpdate): void {\n    const variant = VisualBuilder.VisualBuilderGlobalState.value.variant;\n    const observers: MutationObserver[] = [];\n\n    // Helper function to update element classes\n    const updateElementClasses = (\n        element: HTMLElement,\n        dataCslp: string,\n        observer?: MutationObserver\n    ) => {\n        if (!dataCslp) return;\n\n        if (\n            dataCslp.startsWith(\"v2:\") &&\n            !element.classList.contains(\"visual-builder__variant-field\")\n        ) {\n            if (element.classList.contains(\"visual-builder__base-field\")) {\n                element.classList.remove(\"visual-builder__base-field\");\n            }\n            if (highlightVariantFields) {\n                element.classList.add(\n                    visualBuilderStyles()[\"visual-builder__variant-field\"],\n                    \"visual-builder__variant-field\"\n                );\n            } else {\n                element.classList.add(\"visual-builder__variant-field\");\n            }\n        } else if (\n            !dataCslp.startsWith(\"v2:\") &&\n            element.classList.contains(\"visual-builder__variant-field\")\n        ) {\n            element.classList.remove(\n                visualBuilderStyles()[\"visual-builder__variant-field\"],\n                \"visual-builder__variant-field\"\n            );\n            element.classList.add(\"visual-builder__base-field\");\n        } else if (\n            dataCslp.startsWith(\"v2:\") &&\n            variant &&\n            !dataCslp.includes(variant) &&\n            element.classList.contains(\"visual-builder__variant-field\")\n        ) {\n            element.classList.remove(\n                visualBuilderStyles()[\"visual-builder__variant-field\"],\n                \"visual-builder__variant-field\"\n            );\n            element.classList.add(\"visual-builder__disabled-variant-field\");\n        }\n        if (!observer) return;\n        // Disconnect this observer after processing\n        observer.disconnect();\n        const index = observers.indexOf(observer);\n        if (index > -1) {\n            observers.splice(index, 1);\n        }\n    };\n\n    const addElementClasses = (element: HTMLElement) => {\n        const dataCslp = element.getAttribute(DATA_CSLP_ATTR_SELECTOR);\n\n        if (!dataCslp) {\n            //recursive call for child nodes\n            element.childNodes.forEach((child) => {\n                if (child instanceof HTMLElement) {\n                    addElementClasses(child);\n                }\n            });\n            return;\n        }\n        //if element might have been updated by another observer\n        if (\n            dataCslp.startsWith(\"v2:\") &&\n            element.classList.contains(\"visual-builder__variant-field\")\n        ) {\n            return;\n        }\n        // if element has not given variant/base class\n        if (\n            dataCslp.startsWith(\"v2:\") &&\n            !element.classList.contains(\"visual-builder__variant-field\")\n        ) {\n            if (element.classList.contains(\"visual-builder__base-field\")) {\n                element.classList.remove(\"visual-builder__base-field\");\n            }\n            if (highlightVariantFields) {\n                element.classList.add(\n                    visualBuilderStyles()[\"visual-builder__variant-field\"],\n                    \"visual-builder__variant-field\"\n                );\n            } else {\n                element.classList.add(\"visual-builder__variant-field\");\n            }\n        } else if (!dataCslp.startsWith(\"v2:\")) {\n            if (element.classList.contains(\"visual-builder__variant-field\")) {\n                element.classList.remove(\n                    visualBuilderStyles()[\"visual-builder__variant-field\"],\n                    \"visual-builder__variant-field\"\n                );\n            }\n            element.classList.add(\"visual-builder__base-field\");\n        }\n\n        //recursive call for child nodes\n        element.childNodes.forEach((child) => {\n            if (child instanceof HTMLElement) {\n                addElementClasses(child);\n            }\n        });\n    };\n\n    // Create a separate observer for each element\n    const elementsWithCslp = document.querySelectorAll(\n        `[${DATA_CSLP_ATTR_SELECTOR}]`\n    );\n    elementsWithCslp.forEach((elementNode) => {\n        const element = elementNode as HTMLElement;\n        const observer = new MutationObserver((mutations) => {\n            mutations.forEach((mutation) => {\n                if (\n                    (mutation.type === \"attributes\" &&\n                        mutation.attributeName === DATA_CSLP_ATTR_SELECTOR) ||\n                    mutation.type === \"childList\"\n                ) {\n                    if (mutation.addedNodes.length > 0) {\n                        mutation.addedNodes.forEach((node) => {\n                            if (node instanceof HTMLElement) {\n                                addElementClasses(node);\n                            }\n                        });\n                    }\n                    const dataCslp = element.getAttribute(\n                        DATA_CSLP_ATTR_SELECTOR\n                    );\n                    updateElementClasses(element, dataCslp || \"\", observer);\n                }\n            });\n        });\n\n        observers.push(observer);\n        observer.observe(element, {\n            attributes: true,\n            childList: true, // Observe direct children\n            subtree: true,\n        });\n    });\n\n    setTimeout(() => {\n        if (observers.length > 0) {\n            observers.forEach((observer) => observer.disconnect());\n            observers.length = 0;\n        }\n    }, VARIANT_UPDATE_DELAY_MS);\n}\n"],"mappings":"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","names":["import_livePreviewEventManager","livePreviewPostMessage"]}

package/dist/modern/visualBuilder/eventManager/useRecalculateVariantDataCSLPValues.js

@@ -25,8 +25,10 @@ function updateVariantClasses({
   const observers = [];
   const updateElementClasses = (element, dataCslp, observer) => {
     if (!dataCslp) return;
-    if (dataCslp.startsWith("v2:") && element.classList.contains("visual-builder__base-field")) {
-      element.classList.remove("visual-builder__base-field");
+    if (dataCslp.startsWith("v2:") && !element.classList.contains("visual-builder__variant-field")) {
+      if (element.classList.contains("visual-builder__base-field")) {
+        element.classList.remove("visual-builder__base-field");
+      }
       if (highlightVariantFields) {
         element.classList.add(
           visualBuilderStyles()["visual-builder__variant-field"],
@@ -48,12 +50,53 @@ function updateVariantClasses({
       );
       element.classList.add("visual-builder__disabled-variant-field");
     }
+    if (!observer) return;
     observer.disconnect();
     const index = observers.indexOf(observer);
     if (index > -1) {
       observers.splice(index, 1);
     }
   };
+  const addElementClasses = (element) => {
+    const dataCslp = element.getAttribute(DATA_CSLP_ATTR_SELECTOR);
+    if (!dataCslp) {
+      element.childNodes.forEach((child) => {
+        if (child instanceof HTMLElement) {
+          addElementClasses(child);
+        }
+      });
+      return;
+    }
+    if (dataCslp.startsWith("v2:") && element.classList.contains("visual-builder__variant-field")) {
+      return;
+    }
+    if (dataCslp.startsWith("v2:") && !element.classList.contains("visual-builder__variant-field")) {
+      if (element.classList.contains("visual-builder__base-field")) {
+        element.classList.remove("visual-builder__base-field");
+      }
+      if (highlightVariantFields) {
+        element.classList.add(
+          visualBuilderStyles()["visual-builder__variant-field"],
+          "visual-builder__variant-field"
+        );
+      } else {
+        element.classList.add("visual-builder__variant-field");
+      }
+    } else if (!dataCslp.startsWith("v2:")) {
+      if (element.classList.contains("visual-builder__variant-field")) {
+        element.classList.remove(
+          visualBuilderStyles()["visual-builder__variant-field"],
+          "visual-builder__variant-field"
+        );
+      }
+      element.classList.add("visual-builder__base-field");
+    }
+    element.childNodes.forEach((child) => {
+      if (child instanceof HTMLElement) {
+        addElementClasses(child);
+      }
+    });
+  };
   const elementsWithCslp = document.querySelectorAll(
     `[${DATA_CSLP_ATTR_SELECTOR}]`
   );
@@ -61,7 +104,14 @@ function updateVariantClasses({
     const element = elementNode;
     const observer = new MutationObserver((mutations) => {
       mutations.forEach((mutation) => {
-        if (mutation.type === "attributes" && mutation.attributeName === DATA_CSLP_ATTR_SELECTOR) {
+        if (mutation.type === "attributes" && mutation.attributeName === DATA_CSLP_ATTR_SELECTOR || mutation.type === "childList") {
+          if (mutation.addedNodes.length > 0) {
+            mutation.addedNodes.forEach((node) => {
+              if (node instanceof HTMLElement) {
+                addElementClasses(node);
+              }
+            });
+          }
           const dataCslp = element.getAttribute(
             DATA_CSLP_ATTR_SELECTOR
           );
@@ -70,7 +120,12 @@ function updateVariantClasses({
       });
     });
     observers.push(observer);
-    observer.observe(element, { attributes: true });
+    observer.observe(element, {
+      attributes: true,
+      childList: true,
+      // Observe direct children
+      subtree: true
+    });
   });
   setTimeout(() => {
     if (observers.length > 0) {

package/dist/modern/visualBuilder/eventManager/useRecalculateVariantDataCSLPValues.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/visualBuilder/eventManager/useRecalculateVariantDataCSLPValues.ts"],"sourcesContent":["import { VisualBuilder } from \"..\";\nimport livePreviewPostMessage from \"../../livePreview/eventManager/livePreviewEventManager\";\nimport { LIVE_PREVIEW_POST_MESSAGE_EVENTS } from \"../../livePreview/eventManager/livePreviewEventManager.constant\";\nimport { DATA_CSLP_ATTR_SELECTOR } from \"../utils/constants\";\nimport { visualBuilderStyles } from \"../visualBuilder.style\";\n\nconst VARIANT_UPDATE_DELAY_MS: Readonly<number> = 8000;\n\ntype OnAudienceModeVariantPatchUpdate = {\n    highlightVariantFields: boolean;\n    expectedCSLPValues: Record<\"variant\" | \"base\", string>;\n};\n\n/**\n * Registers a post message event listener for updating the variant / base classes in the live preview for audience mode.\n */\nexport function useRecalculateVariantDataCSLPValues(): void {\n    livePreviewPostMessage?.on<OnAudienceModeVariantPatchUpdate>(\n        LIVE_PREVIEW_POST_MESSAGE_EVENTS.VARIANT_PATCH,\n        (event) => {\n            if (VisualBuilder.VisualBuilderGlobalState.value.audienceMode) {\n                updateVariantClasses(event.data);\n            }\n        }\n    );\n}\nfunction updateVariantClasses({\n    highlightVariantFields,\n    expectedCSLPValues,\n}: OnAudienceModeVariantPatchUpdate): void {\n    const variant = VisualBuilder.VisualBuilderGlobalState.value.variant;\n    const observers: MutationObserver[] = [];\n\n    // Helper function to update element classes\n    const updateElementClasses = (\n        element: HTMLElement,\n        dataCslp: string,\n        observer: MutationObserver\n    ) => {\n        if (!dataCslp) return;\n\n        if (\n            dataCslp.startsWith(\"v2:\") &&\n            element.classList.contains(\"visual-builder__base-field\")\n        ) {\n            element.classList.remove(\"visual-builder__base-field\");\n            if (highlightVariantFields) {\n                element.classList.add(\n                    visualBuilderStyles()[\"visual-builder__variant-field\"],\n                    \"visual-builder__variant-field\"\n                );\n            } else {\n                element.classList.add(\"visual-builder__variant-field\");\n            }\n        } else if (\n            !dataCslp.startsWith(\"v2:\") &&\n            element.classList.contains(\"visual-builder__variant-field\")\n        ) {\n            element.classList.remove(\n                visualBuilderStyles()[\"visual-builder__variant-field\"],\n                \"visual-builder__variant-field\"\n            );\n            element.classList.add(\"visual-builder__base-field\");\n        } else if (\n            dataCslp.startsWith(\"v2:\") &&\n            variant &&\n            !dataCslp.includes(variant) &&\n            element.classList.contains(\"visual-builder__variant-field\")\n        ) {\n            element.classList.remove(\n                visualBuilderStyles()[\"visual-builder__variant-field\"],\n                \"visual-builder__variant-field\"\n            );\n            element.classList.add(\"visual-builder__disabled-variant-field\");\n        }\n\n        // Disconnect this observer after processing\n        observer.disconnect();\n        const index = observers.indexOf(observer);\n        if (index > -1) {\n            observers.splice(index, 1);\n        }\n    };\n\n    // Create a separate observer for each element\n    const elementsWithCslp = document.querySelectorAll(\n        `[${DATA_CSLP_ATTR_SELECTOR}]`\n    );\n\n    elementsWithCslp.forEach((elementNode) => {\n        const element = elementNode as HTMLElement;\n\n        const observer = new MutationObserver((mutations) => {\n            mutations.forEach((mutation) => {\n                if (\n                    mutation.type === \"attributes\" &&\n                    mutation.attributeName === DATA_CSLP_ATTR_SELECTOR\n                ) {\n                    const dataCslp = element.getAttribute(\n                        DATA_CSLP_ATTR_SELECTOR\n                    );\n                    updateElementClasses(element, dataCslp || \"\", observer);\n                }\n            });\n        });\n\n        observers.push(observer);\n        observer.observe(element, { attributes: true });\n    });\n\n    setTimeout(() => {\n        if (observers.length > 0) {\n            observers.forEach((observer) => observer.disconnect());\n            observers.length = 0;\n        }\n    }, VARIANT_UPDATE_DELAY_MS);\n}\n"],"mappings":";;;AAAA,SAAS,qBAAqB;AAC9B,OAAO,4BAA4B;AACnC,SAAS,wCAAwC;AACjD,SAAS,+BAA+B;AACxC,SAAS,2BAA2B;AAEpC,IAAM,0BAA4C;AAU3C,SAAS,sCAA4C;AACxD,0BAAwB;AAAA,IACpB,iCAAiC;AAAA,IACjC,CAAC,UAAU;AACP,UAAI,cAAc,yBAAyB,MAAM,cAAc;AAC3D,6BAAqB,MAAM,IAAI;AAAA,MACnC;AAAA,IACJ;AAAA,EACJ;AACJ;AACA,SAAS,qBAAqB;AAAA,EAC1B;AAAA,EACA;AACJ,GAA2C;AACvC,QAAM,UAAU,cAAc,yBAAyB,MAAM;AAC7D,QAAM,YAAgC,CAAC;AAGvC,QAAM,uBAAuB,CACzB,SACA,UACA,aACC;AACD,QAAI,CAAC,SAAU;AAEf,QACI,SAAS,WAAW,KAAK,KACzB,QAAQ,UAAU,SAAS,4BAA4B,GACzD;AACE,cAAQ,UAAU,OAAO,4BAA4B;AACrD,UAAI,wBAAwB;AACxB,gBAAQ,UAAU;AAAA,UACd,oBAAoB,EAAE,+BAA+B;AAAA,UACrD;AAAA,QACJ;AAAA,MACJ,OAAO;AACH,gBAAQ,UAAU,IAAI,+BAA+B;AAAA,MACzD;AAAA,IACJ,WACI,CAAC,SAAS,WAAW,KAAK,KAC1B,QAAQ,UAAU,SAAS,+BAA+B,GAC5D;AACE,cAAQ,UAAU;AAAA,QACd,oBAAoB,EAAE,+BAA+B;AAAA,QACrD;AAAA,MACJ;AACA,cAAQ,UAAU,IAAI,4BAA4B;AAAA,IACtD,WACI,SAAS,WAAW,KAAK,KACzB,WACA,CAAC,SAAS,SAAS,OAAO,KAC1B,QAAQ,UAAU,SAAS,+BAA+B,GAC5D;AACE,cAAQ,UAAU;AAAA,QACd,oBAAoB,EAAE,+BAA+B;AAAA,QACrD;AAAA,MACJ;AACA,cAAQ,UAAU,IAAI,wCAAwC;AAAA,IAClE;AAGA,aAAS,WAAW;AACpB,UAAM,QAAQ,UAAU,QAAQ,QAAQ;AACxC,QAAI,QAAQ,IAAI;AACZ,gBAAU,OAAO,OAAO,CAAC;AAAA,IAC7B;AAAA,EACJ;AAGA,QAAM,mBAAmB,SAAS;AAAA,IAC9B,IAAI,uBAAuB;AAAA,EAC/B;AAEA,mBAAiB,QAAQ,CAAC,gBAAgB;AACtC,UAAM,UAAU;AAEhB,UAAM,WAAW,IAAI,iBAAiB,CAAC,cAAc;AACjD,gBAAU,QAAQ,CAAC,aAAa;AAC5B,YACI,SAAS,SAAS,gBAClB,SAAS,kBAAkB,yBAC7B;AACE,gBAAM,WAAW,QAAQ;AAAA,YACrB;AAAA,UACJ;AACA,+BAAqB,SAAS,YAAY,IAAI,QAAQ;AAAA,QAC1D;AAAA,MACJ,CAAC;AAAA,IACL,CAAC;AAED,cAAU,KAAK,QAAQ;AACvB,aAAS,QAAQ,SAAS,EAAE,YAAY,KAAK,CAAC;AAAA,EAClD,CAAC;AAED,aAAW,MAAM;AACb,QAAI,UAAU,SAAS,GAAG;AACtB,gBAAU,QAAQ,CAAC,aAAa,SAAS,WAAW,CAAC;AACrD,gBAAU,SAAS;AAAA,IACvB;AAAA,EACJ,GAAG,uBAAuB;AAC9B;","names":[]}
+{"version":3,"sources":["../../../../src/visualBuilder/eventManager/useRecalculateVariantDataCSLPValues.ts"],"sourcesContent":["import { VisualBuilder } from \"..\";\nimport livePreviewPostMessage from \"../../livePreview/eventManager/livePreviewEventManager\";\nimport { LIVE_PREVIEW_POST_MESSAGE_EVENTS } from \"../../livePreview/eventManager/livePreviewEventManager.constant\";\nimport { DATA_CSLP_ATTR_SELECTOR } from \"../utils/constants\";\nimport { visualBuilderStyles } from \"../visualBuilder.style\";\n\nconst VARIANT_UPDATE_DELAY_MS: Readonly<number> = 8000;\n\ntype OnAudienceModeVariantPatchUpdate = {\n    highlightVariantFields: boolean;\n    expectedCSLPValues: Record<\"variant\" | \"base\", string>;\n};\n\n/**\n * Registers a post message event listener for updating the variant / base classes in the live preview for audience mode.\n */\nexport function useRecalculateVariantDataCSLPValues(): void {\n    livePreviewPostMessage?.on<OnAudienceModeVariantPatchUpdate>(\n        LIVE_PREVIEW_POST_MESSAGE_EVENTS.VARIANT_PATCH,\n        (event) => {\n            if (VisualBuilder.VisualBuilderGlobalState.value.audienceMode) {\n                updateVariantClasses(event.data);\n            }\n        }\n    );\n}\nfunction updateVariantClasses({\n    highlightVariantFields,\n    expectedCSLPValues,\n}: OnAudienceModeVariantPatchUpdate): void {\n    const variant = VisualBuilder.VisualBuilderGlobalState.value.variant;\n    const observers: MutationObserver[] = [];\n\n    // Helper function to update element classes\n    const updateElementClasses = (\n        element: HTMLElement,\n        dataCslp: string,\n        observer?: MutationObserver\n    ) => {\n        if (!dataCslp) return;\n\n        if (\n            dataCslp.startsWith(\"v2:\") &&\n            !element.classList.contains(\"visual-builder__variant-field\")\n        ) {\n            if (element.classList.contains(\"visual-builder__base-field\")) {\n                element.classList.remove(\"visual-builder__base-field\");\n            }\n            if (highlightVariantFields) {\n                element.classList.add(\n                    visualBuilderStyles()[\"visual-builder__variant-field\"],\n                    \"visual-builder__variant-field\"\n                );\n            } else {\n                element.classList.add(\"visual-builder__variant-field\");\n            }\n        } else if (\n            !dataCslp.startsWith(\"v2:\") &&\n            element.classList.contains(\"visual-builder__variant-field\")\n        ) {\n            element.classList.remove(\n                visualBuilderStyles()[\"visual-builder__variant-field\"],\n                \"visual-builder__variant-field\"\n            );\n            element.classList.add(\"visual-builder__base-field\");\n        } else if (\n            dataCslp.startsWith(\"v2:\") &&\n            variant &&\n            !dataCslp.includes(variant) &&\n            element.classList.contains(\"visual-builder__variant-field\")\n        ) {\n            element.classList.remove(\n                visualBuilderStyles()[\"visual-builder__variant-field\"],\n                \"visual-builder__variant-field\"\n            );\n            element.classList.add(\"visual-builder__disabled-variant-field\");\n        }\n        if (!observer) return;\n        // Disconnect this observer after processing\n        observer.disconnect();\n        const index = observers.indexOf(observer);\n        if (index > -1) {\n            observers.splice(index, 1);\n        }\n    };\n\n    const addElementClasses = (element: HTMLElement) => {\n        const dataCslp = element.getAttribute(DATA_CSLP_ATTR_SELECTOR);\n\n        if (!dataCslp) {\n            //recursive call for child nodes\n            element.childNodes.forEach((child) => {\n                if (child instanceof HTMLElement) {\n                    addElementClasses(child);\n                }\n            });\n            return;\n        }\n        //if element might have been updated by another observer\n        if (\n            dataCslp.startsWith(\"v2:\") &&\n            element.classList.contains(\"visual-builder__variant-field\")\n        ) {\n            return;\n        }\n        // if element has not given variant/base class\n        if (\n            dataCslp.startsWith(\"v2:\") &&\n            !element.classList.contains(\"visual-builder__variant-field\")\n        ) {\n            if (element.classList.contains(\"visual-builder__base-field\")) {\n                element.classList.remove(\"visual-builder__base-field\");\n            }\n            if (highlightVariantFields) {\n                element.classList.add(\n                    visualBuilderStyles()[\"visual-builder__variant-field\"],\n                    \"visual-builder__variant-field\"\n                );\n            } else {\n                element.classList.add(\"visual-builder__variant-field\");\n            }\n        } else if (!dataCslp.startsWith(\"v2:\")) {\n            if (element.classList.contains(\"visual-builder__variant-field\")) {\n                element.classList.remove(\n                    visualBuilderStyles()[\"visual-builder__variant-field\"],\n                    \"visual-builder__variant-field\"\n                );\n            }\n            element.classList.add(\"visual-builder__base-field\");\n        }\n\n        //recursive call for child nodes\n        element.childNodes.forEach((child) => {\n            if (child instanceof HTMLElement) {\n                addElementClasses(child);\n            }\n        });\n    };\n\n    // Create a separate observer for each element\n    const elementsWithCslp = document.querySelectorAll(\n        `[${DATA_CSLP_ATTR_SELECTOR}]`\n    );\n    elementsWithCslp.forEach((elementNode) => {\n        const element = elementNode as HTMLElement;\n        const observer = new MutationObserver((mutations) => {\n            mutations.forEach((mutation) => {\n                if (\n                    (mutation.type === \"attributes\" &&\n                        mutation.attributeName === DATA_CSLP_ATTR_SELECTOR) ||\n                    mutation.type === \"childList\"\n                ) {\n                    if (mutation.addedNodes.length > 0) {\n                        mutation.addedNodes.forEach((node) => {\n                            if (node instanceof HTMLElement) {\n                                addElementClasses(node);\n                            }\n                        });\n                    }\n                    const dataCslp = element.getAttribute(\n                        DATA_CSLP_ATTR_SELECTOR\n                    );\n                    updateElementClasses(element, dataCslp || \"\", observer);\n                }\n            });\n        });\n\n        observers.push(observer);\n        observer.observe(element, {\n            attributes: true,\n            childList: true, // Observe direct children\n            subtree: true,\n        });\n    });\n\n    setTimeout(() => {\n        if (observers.length > 0) {\n            observers.forEach((observer) => observer.disconnect());\n            observers.length = 0;\n        }\n    }, VARIANT_UPDATE_DELAY_MS);\n}\n"],"mappings":"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","names":[]}

package/dist/modern/visualBuilder/generators/generateAddInstanceButtons.cjs

@@ -38,8 +38,11 @@ var import_preact = require("preact");
 var import_addInstanceButton = __toESM(require("../components/addInstanceButton.cjs"), 1);
 var import_jsx_runtime = require("preact/jsx-runtime");
 function generateAddInstanceButton({
-  fieldSchema,
   value,
+  fieldSchema,
+  fieldMetadata,
+  index,
+  loading,
   onClick,
   label
 }) {
@@ -48,10 +51,13 @@ function generateAddInstanceButton({
     /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
       import_addInstanceButton.default,
       {
+        loading,
+        index,
         value,
         label,
         onClick,
-        fieldSchema
+        fieldSchema,
+        fieldMetadata
       }
     ),
     wrapper

package/dist/modern/visualBuilder/generators/generateAddInstanceButtons.cjs.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/visualBuilder/generators/generateAddInstanceButtons.tsx"],"sourcesContent":["import { render } from \"preact\";\nimport AddInstanceButtonComponent from \"../components/addInstanceButton\";\nimport { ISchemaFieldMap } from \"../utils/types/index.types\";\n\n/**\n * Generates a button element, when clicked, triggers the provided callback function.\n * @param onClickCallback - The function to be called when the button is clicked.\n * @returns The generated button element.\n */\nexport function generateAddInstanceButton({\n    fieldSchema,\n    value,\n    onClick,\n    label,\n}: {\n    value: any;\n    onClick: (event: MouseEvent) => void;\n    label?: string | undefined;\n    fieldSchema: ISchemaFieldMap | undefined;\n}): HTMLButtonElement {\n    const wrapper = document.createDocumentFragment();\n\n    render(\n        <AddInstanceButtonComponent\n            value={value}\n            label={label}\n            onClick={onClick}\n            fieldSchema={fieldSchema}\n        />,\n        wrapper\n    );\n\n    const button = wrapper.children[0] as HTMLButtonElement;\n    return button;\n}\n\n/**\n * Returns an array of HTMLButtonElement instances that can be used to add new instances to the visual builder.\n * @param visualBuilderContainer - The HTMLDivElement that contains the visual builder.\n * @param getAllButtons - If true, returns all add instance buttons. If false, returns only the previous and next buttons.\n * @returns An array of HTMLButtonElement instances or null if there are less than 2 buttons.\n */\nexport function getAddInstanceButtons(\n    visualBuilderContainer: HTMLDivElement,\n    getAllButtons = false\n): HTMLButtonElement[] | [HTMLButtonElement, HTMLButtonElement] | null {\n    const buttons = visualBuilderContainer.getElementsByClassName(\n        \"visual-builder__add-button\"\n    );\n\n    if (getAllButtons) {\n        return Array.from(buttons) as HTMLButtonElement[];\n    }\n\n    if (buttons.length < 2) {\n        return null;\n    }\n\n    const previousButton = buttons[0] as HTMLButtonElement;\n    const nextButton = buttons[1] as HTMLButtonElement;\n\n    return [previousButton, nextButton];\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,oBAAuB;AACvB,+BAAuC;AAsB/B;AAdD,SAAS,0BAA0B;AAAA,EACtC;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACJ,GAKsB;AAClB,QAAM,UAAU,SAAS,uBAAuB;AAEhD;AAAA,IACI;AAAA,MAAC,yBAAAA;AAAA,MAAA;AAAA,QACG;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA;AAAA,IACJ;AAAA,IACA;AAAA,EACJ;AAEA,QAAM,SAAS,QAAQ,SAAS,CAAC;AACjC,SAAO;AACX;AAQO,SAAS,sBACZ,wBACA,gBAAgB,OACmD;AACnE,QAAM,UAAU,uBAAuB;AAAA,IACnC;AAAA,EACJ;AAEA,MAAI,eAAe;AACf,WAAO,MAAM,KAAK,OAAO;AAAA,EAC7B;AAEA,MAAI,QAAQ,SAAS,GAAG;AACpB,WAAO;AAAA,EACX;AAEA,QAAM,iBAAiB,QAAQ,CAAC;AAChC,QAAM,aAAa,QAAQ,CAAC;AAE5B,SAAO,CAAC,gBAAgB,UAAU;AACtC;","names":["AddInstanceButtonComponent"]}
+{"version":3,"sources":["../../../../src/visualBuilder/generators/generateAddInstanceButtons.tsx"],"sourcesContent":["import React from \"preact/compat\";\nimport { render } from \"preact\";\nimport AddInstanceButtonComponent from \"../components/addInstanceButton\";\nimport { ISchemaFieldMap } from \"../utils/types/index.types\";\nimport { CslpData } from \"../../cslp/types/cslp.types\";\nimport { Signal } from \"@preact/signals\";\n\n/**\n * Generates a button element, when clicked, sends the add instance message and\n * then calls the provided callback function.\n * @param onClickCallback - The function to be called when the button is clicked.\n * @returns The generated button element.\n */\nexport function generateAddInstanceButton({\n    value,\n    fieldSchema,\n    fieldMetadata,\n    index,\n    loading,\n    onClick,\n    label,\n}: {\n    fieldSchema: ISchemaFieldMap | undefined;\n    value: any;\n    fieldMetadata: CslpData;\n    index: number;\n    loading: Signal<boolean>;\n    onClick: (event: MouseEvent) => void;\n    label?: string | undefined;\n}): HTMLButtonElement {\n    const wrapper = document.createDocumentFragment();\n\n    render(\n        <AddInstanceButtonComponent\n            loading={loading}\n            index={index}\n            value={value}\n            label={label}\n            onClick={onClick}\n            fieldSchema={fieldSchema}\n            fieldMetadata={fieldMetadata}\n        />,\n        wrapper\n    );\n\n    const button = wrapper.children[0] as HTMLButtonElement;\n    return button;\n}\n\n/**\n * Returns an array of HTMLButtonElement instances that can be used to add new instances to the visual builder.\n * @param visualBuilderContainer - The HTMLDivElement that contains the visual builder.\n * @param getAllButtons - If true, returns all add instance buttons. If false, returns only the previous and next buttons.\n * @returns An array of HTMLButtonElement instances or null if there are less than 2 buttons.\n */\nexport function getAddInstanceButtons(\n    visualBuilderContainer: HTMLDivElement,\n    getAllButtons = false\n): HTMLButtonElement[] | [HTMLButtonElement, HTMLButtonElement] | null {\n    const buttons = visualBuilderContainer.getElementsByClassName(\n        \"visual-builder__add-button\"\n    );\n\n    if (getAllButtons) {\n        return Array.from(buttons) as HTMLButtonElement[];\n    }\n\n    if (buttons.length < 2) {\n        return null;\n    }\n\n    const previousButton = buttons[0] as HTMLButtonElement;\n    const nextButton = buttons[1] as HTMLButtonElement;\n\n    return [previousButton, nextButton];\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AACA,oBAAuB;AACvB,+BAAuC;AA+B/B;AApBD,SAAS,0BAA0B;AAAA,EACtC;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACJ,GAQsB;AAClB,QAAM,UAAU,SAAS,uBAAuB;AAEhD;AAAA,IACI;AAAA,MAAC,yBAAAA;AAAA,MAAA;AAAA,QACG;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA;AAAA,IACJ;AAAA,IACA;AAAA,EACJ;AAEA,QAAM,SAAS,QAAQ,SAAS,CAAC;AACjC,SAAO;AACX;AAQO,SAAS,sBACZ,wBACA,gBAAgB,OACmD;AACnE,QAAM,UAAU,uBAAuB;AAAA,IACnC;AAAA,EACJ;AAEA,MAAI,eAAe;AACf,WAAO,MAAM,KAAK,OAAO;AAAA,EAC7B;AAEA,MAAI,QAAQ,SAAS,GAAG;AACpB,WAAO;AAAA,EACX;AAEA,QAAM,iBAAiB,QAAQ,CAAC;AAChC,QAAM,aAAa,QAAQ,CAAC;AAE5B,SAAO,CAAC,gBAAgB,UAAU;AACtC;","names":["AddInstanceButtonComponent"]}

package/dist/modern/visualBuilder/generators/generateAddInstanceButtons.d.cts

@@ -1,16 +1,22 @@
 import { ISchemaFieldMap } from '../utils/types/index.types.cjs';
+import { CslpData } from '../../cslp/types/cslp.types.cjs';
+import { Signal } from '@preact/signals';
 import '../../cms/types/contentTypeSchema.types.cjs';
 
 /**
- * Generates a button element, when clicked, triggers the provided callback function.
+ * Generates a button element, when clicked, sends the add instance message and
+ * then calls the provided callback function.
  * @param onClickCallback - The function to be called when the button is clicked.
  * @returns The generated button element.
  */
-declare function generateAddInstanceButton({ fieldSchema, value, onClick, label, }: {
+declare function generateAddInstanceButton({ value, fieldSchema, fieldMetadata, index, loading, onClick, label, }: {
+    fieldSchema: ISchemaFieldMap | undefined;
     value: any;
+    fieldMetadata: CslpData;
+    index: number;
+    loading: Signal<boolean>;
     onClick: (event: MouseEvent) => void;
     label?: string | undefined;
-    fieldSchema: ISchemaFieldMap | undefined;
 }): HTMLButtonElement;
 /**
  * Returns an array of HTMLButtonElement instances that can be used to add new instances to the visual builder.

package/dist/modern/visualBuilder/generators/generateAddInstanceButtons.d.ts

@@ -1,16 +1,22 @@
 import { ISchemaFieldMap } from '../utils/types/index.types.js';
+import { CslpData } from '../../cslp/types/cslp.types.js';
+import { Signal } from '@preact/signals';
 import '../../cms/types/contentTypeSchema.types.js';
 
 /**
- * Generates a button element, when clicked, triggers the provided callback function.
+ * Generates a button element, when clicked, sends the add instance message and
+ * then calls the provided callback function.
  * @param onClickCallback - The function to be called when the button is clicked.
  * @returns The generated button element.
  */
-declare function generateAddInstanceButton({ fieldSchema, value, onClick, label, }: {
+declare function generateAddInstanceButton({ value, fieldSchema, fieldMetadata, index, loading, onClick, label, }: {
+    fieldSchema: ISchemaFieldMap | undefined;
     value: any;
+    fieldMetadata: CslpData;
+    index: number;
+    loading: Signal<boolean>;
     onClick: (event: MouseEvent) => void;
     label?: string | undefined;
-    fieldSchema: ISchemaFieldMap | undefined;
 }): HTMLButtonElement;
 /**
  * Returns an array of HTMLButtonElement instances that can be used to add new instances to the visual builder.

package/dist/modern/visualBuilder/generators/generateAddInstanceButtons.js

@@ -5,8 +5,11 @@ import { render } from "preact";
 import AddInstanceButtonComponent from "../components/addInstanceButton.js";
 import { jsx } from "preact/jsx-runtime";
 function generateAddInstanceButton({
-  fieldSchema,
   value,
+  fieldSchema,
+  fieldMetadata,
+  index,
+  loading,
   onClick,
   label
 }) {
@@ -15,10 +18,13 @@ function generateAddInstanceButton({
     /* @__PURE__ */ jsx(
       AddInstanceButtonComponent,
       {
+        loading,
+        index,
         value,
         label,
         onClick,
-        fieldSchema
+        fieldSchema,
+        fieldMetadata
       }
     ),
     wrapper

package/dist/modern/visualBuilder/generators/generateAddInstanceButtons.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/visualBuilder/generators/generateAddInstanceButtons.tsx"],"sourcesContent":["import { render } from \"preact\";\nimport AddInstanceButtonComponent from \"../components/addInstanceButton\";\nimport { ISchemaFieldMap } from \"../utils/types/index.types\";\n\n/**\n * Generates a button element, when clicked, triggers the provided callback function.\n * @param onClickCallback - The function to be called when the button is clicked.\n * @returns The generated button element.\n */\nexport function generateAddInstanceButton({\n    fieldSchema,\n    value,\n    onClick,\n    label,\n}: {\n    value: any;\n    onClick: (event: MouseEvent) => void;\n    label?: string | undefined;\n    fieldSchema: ISchemaFieldMap | undefined;\n}): HTMLButtonElement {\n    const wrapper = document.createDocumentFragment();\n\n    render(\n        <AddInstanceButtonComponent\n            value={value}\n            label={label}\n            onClick={onClick}\n            fieldSchema={fieldSchema}\n        />,\n        wrapper\n    );\n\n    const button = wrapper.children[0] as HTMLButtonElement;\n    return button;\n}\n\n/**\n * Returns an array of HTMLButtonElement instances that can be used to add new instances to the visual builder.\n * @param visualBuilderContainer - The HTMLDivElement that contains the visual builder.\n * @param getAllButtons - If true, returns all add instance buttons. If false, returns only the previous and next buttons.\n * @returns An array of HTMLButtonElement instances or null if there are less than 2 buttons.\n */\nexport function getAddInstanceButtons(\n    visualBuilderContainer: HTMLDivElement,\n    getAllButtons = false\n): HTMLButtonElement[] | [HTMLButtonElement, HTMLButtonElement] | null {\n    const buttons = visualBuilderContainer.getElementsByClassName(\n        \"visual-builder__add-button\"\n    );\n\n    if (getAllButtons) {\n        return Array.from(buttons) as HTMLButtonElement[];\n    }\n\n    if (buttons.length < 2) {\n        return null;\n    }\n\n    const previousButton = buttons[0] as HTMLButtonElement;\n    const nextButton = buttons[1] as HTMLButtonElement;\n\n    return [previousButton, nextButton];\n}\n"],"mappings":";;;AAAA,SAAS,cAAc;AACvB,OAAO,gCAAgC;AAsB/B;AAdD,SAAS,0BAA0B;AAAA,EACtC;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACJ,GAKsB;AAClB,QAAM,UAAU,SAAS,uBAAuB;AAEhD;AAAA,IACI;AAAA,MAAC;AAAA;AAAA,QACG;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA;AAAA,IACJ;AAAA,IACA;AAAA,EACJ;AAEA,QAAM,SAAS,QAAQ,SAAS,CAAC;AACjC,SAAO;AACX;AAQO,SAAS,sBACZ,wBACA,gBAAgB,OACmD;AACnE,QAAM,UAAU,uBAAuB;AAAA,IACnC;AAAA,EACJ;AAEA,MAAI,eAAe;AACf,WAAO,MAAM,KAAK,OAAO;AAAA,EAC7B;AAEA,MAAI,QAAQ,SAAS,GAAG;AACpB,WAAO;AAAA,EACX;AAEA,QAAM,iBAAiB,QAAQ,CAAC;AAChC,QAAM,aAAa,QAAQ,CAAC;AAE5B,SAAO,CAAC,gBAAgB,UAAU;AACtC;","names":[]}
+{"version":3,"sources":["../../../../src/visualBuilder/generators/generateAddInstanceButtons.tsx"],"sourcesContent":["import React from \"preact/compat\";\nimport { render } from \"preact\";\nimport AddInstanceButtonComponent from \"../components/addInstanceButton\";\nimport { ISchemaFieldMap } from \"../utils/types/index.types\";\nimport { CslpData } from \"../../cslp/types/cslp.types\";\nimport { Signal } from \"@preact/signals\";\n\n/**\n * Generates a button element, when clicked, sends the add instance message and\n * then calls the provided callback function.\n * @param onClickCallback - The function to be called when the button is clicked.\n * @returns The generated button element.\n */\nexport function generateAddInstanceButton({\n    value,\n    fieldSchema,\n    fieldMetadata,\n    index,\n    loading,\n    onClick,\n    label,\n}: {\n    fieldSchema: ISchemaFieldMap | undefined;\n    value: any;\n    fieldMetadata: CslpData;\n    index: number;\n    loading: Signal<boolean>;\n    onClick: (event: MouseEvent) => void;\n    label?: string | undefined;\n}): HTMLButtonElement {\n    const wrapper = document.createDocumentFragment();\n\n    render(\n        <AddInstanceButtonComponent\n            loading={loading}\n            index={index}\n            value={value}\n            label={label}\n            onClick={onClick}\n            fieldSchema={fieldSchema}\n            fieldMetadata={fieldMetadata}\n        />,\n        wrapper\n    );\n\n    const button = wrapper.children[0] as HTMLButtonElement;\n    return button;\n}\n\n/**\n * Returns an array of HTMLButtonElement instances that can be used to add new instances to the visual builder.\n * @param visualBuilderContainer - The HTMLDivElement that contains the visual builder.\n * @param getAllButtons - If true, returns all add instance buttons. If false, returns only the previous and next buttons.\n * @returns An array of HTMLButtonElement instances or null if there are less than 2 buttons.\n */\nexport function getAddInstanceButtons(\n    visualBuilderContainer: HTMLDivElement,\n    getAllButtons = false\n): HTMLButtonElement[] | [HTMLButtonElement, HTMLButtonElement] | null {\n    const buttons = visualBuilderContainer.getElementsByClassName(\n        \"visual-builder__add-button\"\n    );\n\n    if (getAllButtons) {\n        return Array.from(buttons) as HTMLButtonElement[];\n    }\n\n    if (buttons.length < 2) {\n        return null;\n    }\n\n    const previousButton = buttons[0] as HTMLButtonElement;\n    const nextButton = buttons[1] as HTMLButtonElement;\n\n    return [previousButton, nextButton];\n}\n"],"mappings":";;;AACA,SAAS,cAAc;AACvB,OAAO,gCAAgC;AA+B/B;AApBD,SAAS,0BAA0B;AAAA,EACtC;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACJ,GAQsB;AAClB,QAAM,UAAU,SAAS,uBAAuB;AAEhD;AAAA,IACI;AAAA,MAAC;AAAA;AAAA,QACG;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA;AAAA,IACJ;AAAA,IACA;AAAA,EACJ;AAEA,QAAM,SAAS,QAAQ,SAAS,CAAC;AACjC,SAAO;AACX;AAQO,SAAS,sBACZ,wBACA,gBAAgB,OACmD;AACnE,QAAM,UAAU,uBAAuB;AAAA,IACnC;AAAA,EACJ;AAEA,MAAI,eAAe;AACf,WAAO,MAAM,KAAK,OAAO;AAAA,EAC7B;AAEA,MAAI,QAAQ,SAAS,GAAG;AACpB,WAAO;AAAA,EACX;AAEA,QAAM,iBAAiB,QAAQ,CAAC;AAChC,QAAM,aAAa,QAAQ,CAAC;AAE5B,SAAO,CAAC,gBAAgB,UAAU;AACtC;","names":[]}

package/dist/modern/visualBuilder/generators/generateOverlay.cjs

@@ -166,6 +166,11 @@ function sendFieldEvent(options) {
   }
 }
 function hideOverlay(params) {
+  const focusElementObserver = import__.VisualBuilder.VisualBuilderGlobalState.value.focusElementObserver;
+  if (focusElementObserver) {
+    focusElementObserver.disconnect();
+    import__.VisualBuilder.VisualBuilderGlobalState.value.focusElementObserver = null;
+  }
   hideFocusOverlay({
     visualBuilderContainer: params.visualBuilderContainer,
     visualBuilderOverlayWrapper: params.visualBuilderOverlayWrapper,

package/dist/modern/visualBuilder/generators/generateOverlay.cjs.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/visualBuilder/generators/generateOverlay.tsx"],"sourcesContent":["import { extractDetailsFromCslp } from \"../../cslp/cslpdata\";\nimport { cleanIndividualFieldResidual } from \"../utils/handleIndividualFields\";\nimport visualBuilderPostMessage from \"../utils/visualBuilderPostMessage\";\nimport { VisualBuilderPostMessageEvents } from \"../utils/types/postMessage.types\";\n\nimport { VisualBuilder } from \"..\";\nimport EventListenerHandlerParams from \"../listeners/types\";\nimport { FieldSchemaMap } from \"../utils/fieldSchemaMap\";\nimport { FieldDataType } from \"../utils/types/index.types\";\nimport { getFieldType } from \"../utils/getFieldType\";\nimport { CslpData } from \"../../cslp/types/cslp.types\";\nimport { getMultilinePlaintext } from \"../utils/getMultilinePlaintext\";\nimport { showAllHiddenHighlightedCommentIcons } from \"./generateHighlightedComment\";\n\n/**\n * Adds a focus overlay to the target element.\n * @param targetElement - The element to add the focus overlay to.\n * @param focusOverlayWrapper - The HTMLDivElement that contains the focus overlay.\n * @returns void\n */\nexport function addFocusOverlay(\n    targetElement: Element,\n    focusOverlayWrapper: HTMLDivElement,\n    disabled?: boolean\n): void {\n    const targetElementDimension = targetElement.getBoundingClientRect();\n    if (\n        targetElementDimension.width === 0 ||\n        targetElementDimension.height === 0\n    )\n        return;\n    focusOverlayWrapper.classList.add(\"visible\");\n\n    const distanceFromTop = targetElementDimension.top + window.scrollY;\n    const topOverlayDOM = focusOverlayWrapper.querySelector<HTMLDivElement>(\n        \".visual-builder__overlay--top\"\n    );\n\n    if (topOverlayDOM) {\n        topOverlayDOM.style.top = \"0\";\n        topOverlayDOM.style.left = \"0\";\n        topOverlayDOM.style.width = \"100%\";\n        topOverlayDOM.style.height = `calc(${distanceFromTop}px)`;\n    }\n\n    const bottomOverlayDOM = focusOverlayWrapper.querySelector<HTMLDivElement>(\n        \".visual-builder__overlay--bottom\"\n    );\n    if (bottomOverlayDOM) {\n        bottomOverlayDOM.style.top = `${\n            targetElementDimension.bottom + window.scrollY\n        }px`;\n        bottomOverlayDOM.style.height = `${\n            window.document.body.scrollHeight -\n            targetElementDimension.bottom -\n            window.scrollY\n        }px`;\n        bottomOverlayDOM.style.left = \"0\";\n        bottomOverlayDOM.style.width = \"100%\";\n    }\n\n    const leftOverlayDOM = focusOverlayWrapper.querySelector<HTMLDivElement>(\n        \".visual-builder__overlay--left\"\n    );\n    if (leftOverlayDOM) {\n        leftOverlayDOM.style.left = \"0\";\n        leftOverlayDOM.style.top = `${distanceFromTop}px`;\n        leftOverlayDOM.style.height = `${targetElementDimension.height}px`;\n        leftOverlayDOM.style.width = `${targetElementDimension.left}px`;\n    }\n\n    const rightOverlayDOM = focusOverlayWrapper.querySelector<HTMLDivElement>(\n        \".visual-builder__overlay--right\"\n    );\n    if (rightOverlayDOM) {\n        rightOverlayDOM.style.left = `${targetElementDimension.right}px`;\n        rightOverlayDOM.style.top = `${distanceFromTop}px`;\n        rightOverlayDOM.style.height = `${targetElementDimension.height}px`;\n        rightOverlayDOM.style.width = `${\n            document.documentElement.clientWidth - targetElementDimension.right\n        }px`;\n    }\n\n    const outlineDOM = focusOverlayWrapper.querySelector<HTMLDivElement>(\n        \".visual-builder__overlay--outline\"\n    );\n    if (outlineDOM) {\n        outlineDOM.style.top = `${\n            targetElementDimension.top + window.scrollY\n        }px`;\n        outlineDOM.style.height = `${targetElementDimension.height}px`;\n        outlineDOM.style.width = `${targetElementDimension.width}px`;\n        outlineDOM.style.left = `${targetElementDimension.left}px`;\n        outlineDOM.style.outlineColor = disabled ? \"#909090\" : \"#715cdd\";\n    }\n}\n\n/**\n * Hides the focus overlay and performs necessary cleanup actions when the user clicks outside of the focused element.\n * @param event - The mouse event that triggered the function.\n * @param elements - An object containing references to the focus overlay wrapper, the previously selected editable DOM element, and the visual builder wrapper.\n */\nexport function hideFocusOverlay(elements: HideOverlayParams): void {\n    const {\n        visualBuilderContainer,\n        visualBuilderOverlayWrapper,\n        focusedToolbar,\n        resizeObserver,\n        noTrigger,\n    } = elements;\n\n    if (visualBuilderOverlayWrapper) {\n        visualBuilderOverlayWrapper.classList.remove(\"visible\");\n\n        // Cleanup overlay styles: Top, Right, Bottom, Left & Outline\n        visualBuilderOverlayWrapper.childNodes.forEach((childNode) => {\n            if (childNode instanceof Element) {\n                childNode.removeAttribute(\"style\");\n            }\n        });\n\n        if (!noTrigger) {\n            sendFieldEvent({\n                visualBuilderContainer,\n                eventType: VisualBuilderPostMessageEvents.UPDATE_FIELD,\n            });\n        } else {\n            const { previousSelectedEditableDOM, focusFieldValue } =\n                VisualBuilder.VisualBuilderGlobalState.value || {};\n            if (\n                previousSelectedEditableDOM &&\n                \"innerText\" in previousSelectedEditableDOM &&\n                focusFieldValue != null\n            ) {\n                previousSelectedEditableDOM.innerText = focusFieldValue;\n            }\n        }\n        VisualBuilder.VisualBuilderGlobalState.value.focusFieldValue = null;\n        cleanIndividualFieldResidual({\n            overlayWrapper: visualBuilderOverlayWrapper,\n            visualBuilderContainer: visualBuilderContainer,\n            focusedToolbar: focusedToolbar,\n            resizeObserver: resizeObserver,\n        });\n    }\n}\ninterface ISendFieldEventParams {\n    visualBuilderContainer: HTMLElement | null;\n    eventType:\n        | VisualBuilderPostMessageEvents.UPDATE_FIELD\n        | VisualBuilderPostMessageEvents.SYNC_FIELD;\n}\nexport function sendFieldEvent(options: ISendFieldEventParams): void {\n    const { visualBuilderContainer, eventType } = options;\n    const previousSelectedEditableDOM =\n        VisualBuilder.VisualBuilderGlobalState.value\n            .previousSelectedEditableDOM;\n    const pseudoEditableElement = visualBuilderContainer?.querySelector(\n        \"div.visual-builder__pseudo-editable-element\"\n    );\n    if (\n        previousSelectedEditableDOM &&\n        (previousSelectedEditableDOM.hasAttribute(\"contenteditable\") ||\n            pseudoEditableElement)\n    ) {\n        const actualEditedElement =\n            pseudoEditableElement ||\n            (previousSelectedEditableDOM as HTMLElement);\n\n        let data =\n            \"innerText\" in actualEditedElement\n                ? actualEditedElement.innerText\n                : actualEditedElement.textContent;\n\n        const fieldMetadata = extractDetailsFromCslp(\n            previousSelectedEditableDOM.getAttribute(\"data-cslp\") as string\n        );\n\n        FieldSchemaMap.getFieldSchema(\n            fieldMetadata.content_type_uid,\n            fieldMetadata.fieldPath\n        )\n            .then((fieldSchema) => {\n                if (\n                    fieldSchema &&\n                    eventType === VisualBuilderPostMessageEvents.UPDATE_FIELD\n                ) {\n                    const fieldType = getFieldType(fieldSchema);\n                    if (fieldType && fieldType === FieldDataType.MULTILINE) {\n                        data = getMultilinePlaintext(actualEditedElement);\n                        (actualEditedElement as HTMLElement).innerText =\n                            data as string;\n                    }\n                }\n            })\n            .finally(() => {\n                visualBuilderPostMessage?.send(eventType, {\n                    data,\n                    fieldMetadata,\n                });\n            });\n    }\n}\ninterface HideOverlayParams\n    extends Pick<\n        EventListenerHandlerParams,\n        \"visualBuilderContainer\" | \"focusedToolbar\" | \"resizeObserver\"\n    > {\n    visualBuilderOverlayWrapper: HTMLDivElement | null;\n    noTrigger?: boolean;\n}\n\nexport function hideOverlay(params: HideOverlayParams): void {\n    hideFocusOverlay({\n        visualBuilderContainer: params.visualBuilderContainer,\n        visualBuilderOverlayWrapper: params.visualBuilderOverlayWrapper,\n        focusedToolbar: params.focusedToolbar,\n        resizeObserver: params.resizeObserver,\n        noTrigger: Boolean(params.noTrigger),\n    });\n    showAllHiddenHighlightedCommentIcons();\n    if (\n        !VisualBuilder.VisualBuilderGlobalState.value\n            .previousSelectedEditableDOM\n    )\n        return;\n    params.resizeObserver.unobserve(\n        VisualBuilder.VisualBuilderGlobalState.value.previousSelectedEditableDOM\n    );\n    VisualBuilder.VisualBuilderGlobalState.value.previousSelectedEditableDOM =\n        null;\n}\n"],"mappings":"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","names":["visualBuilderPostMessage"]}
+{"version":3,"sources":["../../../../src/visualBuilder/generators/generateOverlay.tsx"],"sourcesContent":["import { extractDetailsFromCslp } from \"../../cslp/cslpdata\";\nimport { cleanIndividualFieldResidual } from \"../utils/handleIndividualFields\";\nimport visualBuilderPostMessage from \"../utils/visualBuilderPostMessage\";\nimport { VisualBuilderPostMessageEvents } from \"../utils/types/postMessage.types\";\n\nimport { VisualBuilder } from \"..\";\nimport EventListenerHandlerParams from \"../listeners/types\";\nimport { FieldSchemaMap } from \"../utils/fieldSchemaMap\";\nimport { FieldDataType } from \"../utils/types/index.types\";\nimport { getFieldType } from \"../utils/getFieldType\";\nimport { CslpData } from \"../../cslp/types/cslp.types\";\nimport { getMultilinePlaintext } from \"../utils/getMultilinePlaintext\";\nimport { showAllHiddenHighlightedCommentIcons } from \"./generateHighlightedComment\";\n\n/**\n * Adds a focus overlay to the target element.\n * @param targetElement - The element to add the focus overlay to.\n * @param focusOverlayWrapper - The HTMLDivElement that contains the focus overlay.\n * @returns void\n */\nexport function addFocusOverlay(\n    targetElement: Element,\n    focusOverlayWrapper: HTMLDivElement,\n    disabled?: boolean\n): void {\n    const targetElementDimension = targetElement.getBoundingClientRect();\n    if (\n        targetElementDimension.width === 0 ||\n        targetElementDimension.height === 0\n    )\n        return;\n    focusOverlayWrapper.classList.add(\"visible\");\n\n    const distanceFromTop = targetElementDimension.top + window.scrollY;\n    const topOverlayDOM = focusOverlayWrapper.querySelector<HTMLDivElement>(\n        \".visual-builder__overlay--top\"\n    );\n\n    if (topOverlayDOM) {\n        topOverlayDOM.style.top = \"0\";\n        topOverlayDOM.style.left = \"0\";\n        topOverlayDOM.style.width = \"100%\";\n        topOverlayDOM.style.height = `calc(${distanceFromTop}px)`;\n    }\n\n    const bottomOverlayDOM = focusOverlayWrapper.querySelector<HTMLDivElement>(\n        \".visual-builder__overlay--bottom\"\n    );\n    if (bottomOverlayDOM) {\n        bottomOverlayDOM.style.top = `${\n            targetElementDimension.bottom + window.scrollY\n        }px`;\n        bottomOverlayDOM.style.height = `${\n            window.document.body.scrollHeight -\n            targetElementDimension.bottom -\n            window.scrollY\n        }px`;\n        bottomOverlayDOM.style.left = \"0\";\n        bottomOverlayDOM.style.width = \"100%\";\n    }\n\n    const leftOverlayDOM = focusOverlayWrapper.querySelector<HTMLDivElement>(\n        \".visual-builder__overlay--left\"\n    );\n    if (leftOverlayDOM) {\n        leftOverlayDOM.style.left = \"0\";\n        leftOverlayDOM.style.top = `${distanceFromTop}px`;\n        leftOverlayDOM.style.height = `${targetElementDimension.height}px`;\n        leftOverlayDOM.style.width = `${targetElementDimension.left}px`;\n    }\n\n    const rightOverlayDOM = focusOverlayWrapper.querySelector<HTMLDivElement>(\n        \".visual-builder__overlay--right\"\n    );\n    if (rightOverlayDOM) {\n        rightOverlayDOM.style.left = `${targetElementDimension.right}px`;\n        rightOverlayDOM.style.top = `${distanceFromTop}px`;\n        rightOverlayDOM.style.height = `${targetElementDimension.height}px`;\n        rightOverlayDOM.style.width = `${\n            document.documentElement.clientWidth - targetElementDimension.right\n        }px`;\n    }\n\n    const outlineDOM = focusOverlayWrapper.querySelector<HTMLDivElement>(\n        \".visual-builder__overlay--outline\"\n    );\n    if (outlineDOM) {\n        outlineDOM.style.top = `${\n            targetElementDimension.top + window.scrollY\n        }px`;\n        outlineDOM.style.height = `${targetElementDimension.height}px`;\n        outlineDOM.style.width = `${targetElementDimension.width}px`;\n        outlineDOM.style.left = `${targetElementDimension.left}px`;\n        outlineDOM.style.outlineColor = disabled ? \"#909090\" : \"#715cdd\";\n    }\n}\n\n/**\n * Hides the focus overlay and performs necessary cleanup actions when the user clicks outside of the focused element.\n * @param event - The mouse event that triggered the function.\n * @param elements - An object containing references to the focus overlay wrapper, the previously selected editable DOM element, and the visual builder wrapper.\n */\nexport function hideFocusOverlay(elements: HideOverlayParams): void {\n    const {\n        visualBuilderContainer,\n        visualBuilderOverlayWrapper,\n        focusedToolbar,\n        resizeObserver,\n        noTrigger,\n    } = elements;\n\n    if (visualBuilderOverlayWrapper) {\n        visualBuilderOverlayWrapper.classList.remove(\"visible\");\n\n        // Cleanup overlay styles: Top, Right, Bottom, Left & Outline\n        visualBuilderOverlayWrapper.childNodes.forEach((childNode) => {\n            if (childNode instanceof Element) {\n                childNode.removeAttribute(\"style\");\n            }\n        });\n\n        if (!noTrigger) {\n            sendFieldEvent({\n                visualBuilderContainer,\n                eventType: VisualBuilderPostMessageEvents.UPDATE_FIELD,\n            });\n        } else {\n            const { previousSelectedEditableDOM, focusFieldValue } =\n                VisualBuilder.VisualBuilderGlobalState.value || {};\n            if (\n                previousSelectedEditableDOM &&\n                \"innerText\" in previousSelectedEditableDOM &&\n                focusFieldValue != null\n            ) {\n                previousSelectedEditableDOM.innerText = focusFieldValue;\n            }\n        }\n        VisualBuilder.VisualBuilderGlobalState.value.focusFieldValue = null;\n        cleanIndividualFieldResidual({\n            overlayWrapper: visualBuilderOverlayWrapper,\n            visualBuilderContainer: visualBuilderContainer,\n            focusedToolbar: focusedToolbar,\n            resizeObserver: resizeObserver,\n        });\n    }\n}\ninterface ISendFieldEventParams {\n    visualBuilderContainer: HTMLElement | null;\n    eventType:\n        | VisualBuilderPostMessageEvents.UPDATE_FIELD\n        | VisualBuilderPostMessageEvents.SYNC_FIELD;\n}\nexport function sendFieldEvent(options: ISendFieldEventParams): void {\n    const { visualBuilderContainer, eventType } = options;\n    const previousSelectedEditableDOM =\n        VisualBuilder.VisualBuilderGlobalState.value\n            .previousSelectedEditableDOM;\n    const pseudoEditableElement = visualBuilderContainer?.querySelector(\n        \"div.visual-builder__pseudo-editable-element\"\n    );\n    if (\n        previousSelectedEditableDOM &&\n        (previousSelectedEditableDOM.hasAttribute(\"contenteditable\") ||\n            pseudoEditableElement)\n    ) {\n        const actualEditedElement =\n            pseudoEditableElement ||\n            (previousSelectedEditableDOM as HTMLElement);\n\n        let data =\n            \"innerText\" in actualEditedElement\n                ? actualEditedElement.innerText\n                : actualEditedElement.textContent;\n\n        const fieldMetadata = extractDetailsFromCslp(\n            previousSelectedEditableDOM.getAttribute(\"data-cslp\") as string\n        );\n\n        FieldSchemaMap.getFieldSchema(\n            fieldMetadata.content_type_uid,\n            fieldMetadata.fieldPath\n        )\n            .then((fieldSchema) => {\n                if (\n                    fieldSchema &&\n                    eventType === VisualBuilderPostMessageEvents.UPDATE_FIELD\n                ) {\n                    const fieldType = getFieldType(fieldSchema);\n                    if (fieldType && fieldType === FieldDataType.MULTILINE) {\n                        data = getMultilinePlaintext(actualEditedElement);\n                        (actualEditedElement as HTMLElement).innerText =\n                            data as string;\n                    }\n                }\n            })\n            .finally(() => {\n                visualBuilderPostMessage?.send(eventType, {\n                    data,\n                    fieldMetadata,\n                });\n            });\n    }\n}\ninterface HideOverlayParams\n    extends Pick<\n        EventListenerHandlerParams,\n        \"visualBuilderContainer\" | \"focusedToolbar\" | \"resizeObserver\"\n    > {\n    visualBuilderOverlayWrapper: HTMLDivElement | null;\n    noTrigger?: boolean;\n}\n\nexport function hideOverlay(params: HideOverlayParams): void {\n    const focusElementObserver =\n        VisualBuilder.VisualBuilderGlobalState.value.focusElementObserver;\n    if (focusElementObserver) {\n        focusElementObserver.disconnect();\n        VisualBuilder.VisualBuilderGlobalState.value.focusElementObserver =\n            null;\n    }\n    hideFocusOverlay({\n        visualBuilderContainer: params.visualBuilderContainer,\n        visualBuilderOverlayWrapper: params.visualBuilderOverlayWrapper,\n        focusedToolbar: params.focusedToolbar,\n        resizeObserver: params.resizeObserver,\n        noTrigger: Boolean(params.noTrigger),\n    });\n    showAllHiddenHighlightedCommentIcons();\n    if (\n        !VisualBuilder.VisualBuilderGlobalState.value\n            .previousSelectedEditableDOM\n    )\n        return;\n    params.resizeObserver.unobserve(\n        VisualBuilder.VisualBuilderGlobalState.value.previousSelectedEditableDOM\n    );\n    VisualBuilder.VisualBuilderGlobalState.value.previousSelectedEditableDOM =\n        null;\n}\n"],"mappings":"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","names":["visualBuilderPostMessage"]}

package/dist/modern/visualBuilder/generators/generateOverlay.js

@@ -131,6 +131,11 @@ function sendFieldEvent(options) {
   }
 }
 function hideOverlay(params) {
+  const focusElementObserver = VisualBuilder.VisualBuilderGlobalState.value.focusElementObserver;
+  if (focusElementObserver) {
+    focusElementObserver.disconnect();
+    VisualBuilder.VisualBuilderGlobalState.value.focusElementObserver = null;
+  }
   hideFocusOverlay({
     visualBuilderContainer: params.visualBuilderContainer,
     visualBuilderOverlayWrapper: params.visualBuilderOverlayWrapper,

package/dist/modern/visualBuilder/generators/generateOverlay.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/visualBuilder/generators/generateOverlay.tsx"],"sourcesContent":["import { extractDetailsFromCslp } from \"../../cslp/cslpdata\";\nimport { cleanIndividualFieldResidual } from \"../utils/handleIndividualFields\";\nimport visualBuilderPostMessage from \"../utils/visualBuilderPostMessage\";\nimport { VisualBuilderPostMessageEvents } from \"../utils/types/postMessage.types\";\n\nimport { VisualBuilder } from \"..\";\nimport EventListenerHandlerParams from \"../listeners/types\";\nimport { FieldSchemaMap } from \"../utils/fieldSchemaMap\";\nimport { FieldDataType } from \"../utils/types/index.types\";\nimport { getFieldType } from \"../utils/getFieldType\";\nimport { CslpData } from \"../../cslp/types/cslp.types\";\nimport { getMultilinePlaintext } from \"../utils/getMultilinePlaintext\";\nimport { showAllHiddenHighlightedCommentIcons } from \"./generateHighlightedComment\";\n\n/**\n * Adds a focus overlay to the target element.\n * @param targetElement - The element to add the focus overlay to.\n * @param focusOverlayWrapper - The HTMLDivElement that contains the focus overlay.\n * @returns void\n */\nexport function addFocusOverlay(\n    targetElement: Element,\n    focusOverlayWrapper: HTMLDivElement,\n    disabled?: boolean\n): void {\n    const targetElementDimension = targetElement.getBoundingClientRect();\n    if (\n        targetElementDimension.width === 0 ||\n        targetElementDimension.height === 0\n    )\n        return;\n    focusOverlayWrapper.classList.add(\"visible\");\n\n    const distanceFromTop = targetElementDimension.top + window.scrollY;\n    const topOverlayDOM = focusOverlayWrapper.querySelector<HTMLDivElement>(\n        \".visual-builder__overlay--top\"\n    );\n\n    if (topOverlayDOM) {\n        topOverlayDOM.style.top = \"0\";\n        topOverlayDOM.style.left = \"0\";\n        topOverlayDOM.style.width = \"100%\";\n        topOverlayDOM.style.height = `calc(${distanceFromTop}px)`;\n    }\n\n    const bottomOverlayDOM = focusOverlayWrapper.querySelector<HTMLDivElement>(\n        \".visual-builder__overlay--bottom\"\n    );\n    if (bottomOverlayDOM) {\n        bottomOverlayDOM.style.top = `${\n            targetElementDimension.bottom + window.scrollY\n        }px`;\n        bottomOverlayDOM.style.height = `${\n            window.document.body.scrollHeight -\n            targetElementDimension.bottom -\n            window.scrollY\n        }px`;\n        bottomOverlayDOM.style.left = \"0\";\n        bottomOverlayDOM.style.width = \"100%\";\n    }\n\n    const leftOverlayDOM = focusOverlayWrapper.querySelector<HTMLDivElement>(\n        \".visual-builder__overlay--left\"\n    );\n    if (leftOverlayDOM) {\n        leftOverlayDOM.style.left = \"0\";\n        leftOverlayDOM.style.top = `${distanceFromTop}px`;\n        leftOverlayDOM.style.height = `${targetElementDimension.height}px`;\n        leftOverlayDOM.style.width = `${targetElementDimension.left}px`;\n    }\n\n    const rightOverlayDOM = focusOverlayWrapper.querySelector<HTMLDivElement>(\n        \".visual-builder__overlay--right\"\n    );\n    if (rightOverlayDOM) {\n        rightOverlayDOM.style.left = `${targetElementDimension.right}px`;\n        rightOverlayDOM.style.top = `${distanceFromTop}px`;\n        rightOverlayDOM.style.height = `${targetElementDimension.height}px`;\n        rightOverlayDOM.style.width = `${\n            document.documentElement.clientWidth - targetElementDimension.right\n        }px`;\n    }\n\n    const outlineDOM = focusOverlayWrapper.querySelector<HTMLDivElement>(\n        \".visual-builder__overlay--outline\"\n    );\n    if (outlineDOM) {\n        outlineDOM.style.top = `${\n            targetElementDimension.top + window.scrollY\n        }px`;\n        outlineDOM.style.height = `${targetElementDimension.height}px`;\n        outlineDOM.style.width = `${targetElementDimension.width}px`;\n        outlineDOM.style.left = `${targetElementDimension.left}px`;\n        outlineDOM.style.outlineColor = disabled ? \"#909090\" : \"#715cdd\";\n    }\n}\n\n/**\n * Hides the focus overlay and performs necessary cleanup actions when the user clicks outside of the focused element.\n * @param event - The mouse event that triggered the function.\n * @param elements - An object containing references to the focus overlay wrapper, the previously selected editable DOM element, and the visual builder wrapper.\n */\nexport function hideFocusOverlay(elements: HideOverlayParams): void {\n    const {\n        visualBuilderContainer,\n        visualBuilderOverlayWrapper,\n        focusedToolbar,\n        resizeObserver,\n        noTrigger,\n    } = elements;\n\n    if (visualBuilderOverlayWrapper) {\n        visualBuilderOverlayWrapper.classList.remove(\"visible\");\n\n        // Cleanup overlay styles: Top, Right, Bottom, Left & Outline\n        visualBuilderOverlayWrapper.childNodes.forEach((childNode) => {\n            if (childNode instanceof Element) {\n                childNode.removeAttribute(\"style\");\n            }\n        });\n\n        if (!noTrigger) {\n            sendFieldEvent({\n                visualBuilderContainer,\n                eventType: VisualBuilderPostMessageEvents.UPDATE_FIELD,\n            });\n        } else {\n            const { previousSelectedEditableDOM, focusFieldValue } =\n                VisualBuilder.VisualBuilderGlobalState.value || {};\n            if (\n                previousSelectedEditableDOM &&\n                \"innerText\" in previousSelectedEditableDOM &&\n                focusFieldValue != null\n            ) {\n                previousSelectedEditableDOM.innerText = focusFieldValue;\n            }\n        }\n        VisualBuilder.VisualBuilderGlobalState.value.focusFieldValue = null;\n        cleanIndividualFieldResidual({\n            overlayWrapper: visualBuilderOverlayWrapper,\n            visualBuilderContainer: visualBuilderContainer,\n            focusedToolbar: focusedToolbar,\n            resizeObserver: resizeObserver,\n        });\n    }\n}\ninterface ISendFieldEventParams {\n    visualBuilderContainer: HTMLElement | null;\n    eventType:\n        | VisualBuilderPostMessageEvents.UPDATE_FIELD\n        | VisualBuilderPostMessageEvents.SYNC_FIELD;\n}\nexport function sendFieldEvent(options: ISendFieldEventParams): void {\n    const { visualBuilderContainer, eventType } = options;\n    const previousSelectedEditableDOM =\n        VisualBuilder.VisualBuilderGlobalState.value\n            .previousSelectedEditableDOM;\n    const pseudoEditableElement = visualBuilderContainer?.querySelector(\n        \"div.visual-builder__pseudo-editable-element\"\n    );\n    if (\n        previousSelectedEditableDOM &&\n        (previousSelectedEditableDOM.hasAttribute(\"contenteditable\") ||\n            pseudoEditableElement)\n    ) {\n        const actualEditedElement =\n            pseudoEditableElement ||\n            (previousSelectedEditableDOM as HTMLElement);\n\n        let data =\n            \"innerText\" in actualEditedElement\n                ? actualEditedElement.innerText\n                : actualEditedElement.textContent;\n\n        const fieldMetadata = extractDetailsFromCslp(\n            previousSelectedEditableDOM.getAttribute(\"data-cslp\") as string\n        );\n\n        FieldSchemaMap.getFieldSchema(\n            fieldMetadata.content_type_uid,\n            fieldMetadata.fieldPath\n        )\n            .then((fieldSchema) => {\n                if (\n                    fieldSchema &&\n                    eventType === VisualBuilderPostMessageEvents.UPDATE_FIELD\n                ) {\n                    const fieldType = getFieldType(fieldSchema);\n                    if (fieldType && fieldType === FieldDataType.MULTILINE) {\n                        data = getMultilinePlaintext(actualEditedElement);\n                        (actualEditedElement as HTMLElement).innerText =\n                            data as string;\n                    }\n                }\n            })\n            .finally(() => {\n                visualBuilderPostMessage?.send(eventType, {\n                    data,\n                    fieldMetadata,\n                });\n            });\n    }\n}\ninterface HideOverlayParams\n    extends Pick<\n        EventListenerHandlerParams,\n        \"visualBuilderContainer\" | \"focusedToolbar\" | \"resizeObserver\"\n    > {\n    visualBuilderOverlayWrapper: HTMLDivElement | null;\n    noTrigger?: boolean;\n}\n\nexport function hideOverlay(params: HideOverlayParams): void {\n    hideFocusOverlay({\n        visualBuilderContainer: params.visualBuilderContainer,\n        visualBuilderOverlayWrapper: params.visualBuilderOverlayWrapper,\n        focusedToolbar: params.focusedToolbar,\n        resizeObserver: params.resizeObserver,\n        noTrigger: Boolean(params.noTrigger),\n    });\n    showAllHiddenHighlightedCommentIcons();\n    if (\n        !VisualBuilder.VisualBuilderGlobalState.value\n            .previousSelectedEditableDOM\n    )\n        return;\n    params.resizeObserver.unobserve(\n        VisualBuilder.VisualBuilderGlobalState.value.previousSelectedEditableDOM\n    );\n    VisualBuilder.VisualBuilderGlobalState.value.previousSelectedEditableDOM =\n        null;\n}\n"],"mappings":"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","names":[]}
+{"version":3,"sources":["../../../../src/visualBuilder/generators/generateOverlay.tsx"],"sourcesContent":["import { extractDetailsFromCslp } from \"../../cslp/cslpdata\";\nimport { cleanIndividualFieldResidual } from \"../utils/handleIndividualFields\";\nimport visualBuilderPostMessage from \"../utils/visualBuilderPostMessage\";\nimport { VisualBuilderPostMessageEvents } from \"../utils/types/postMessage.types\";\n\nimport { VisualBuilder } from \"..\";\nimport EventListenerHandlerParams from \"../listeners/types\";\nimport { FieldSchemaMap } from \"../utils/fieldSchemaMap\";\nimport { FieldDataType } from \"../utils/types/index.types\";\nimport { getFieldType } from \"../utils/getFieldType\";\nimport { CslpData } from \"../../cslp/types/cslp.types\";\nimport { getMultilinePlaintext } from \"../utils/getMultilinePlaintext\";\nimport { showAllHiddenHighlightedCommentIcons } from \"./generateHighlightedComment\";\n\n/**\n * Adds a focus overlay to the target element.\n * @param targetElement - The element to add the focus overlay to.\n * @param focusOverlayWrapper - The HTMLDivElement that contains the focus overlay.\n * @returns void\n */\nexport function addFocusOverlay(\n    targetElement: Element,\n    focusOverlayWrapper: HTMLDivElement,\n    disabled?: boolean\n): void {\n    const targetElementDimension = targetElement.getBoundingClientRect();\n    if (\n        targetElementDimension.width === 0 ||\n        targetElementDimension.height === 0\n    )\n        return;\n    focusOverlayWrapper.classList.add(\"visible\");\n\n    const distanceFromTop = targetElementDimension.top + window.scrollY;\n    const topOverlayDOM = focusOverlayWrapper.querySelector<HTMLDivElement>(\n        \".visual-builder__overlay--top\"\n    );\n\n    if (topOverlayDOM) {\n        topOverlayDOM.style.top = \"0\";\n        topOverlayDOM.style.left = \"0\";\n        topOverlayDOM.style.width = \"100%\";\n        topOverlayDOM.style.height = `calc(${distanceFromTop}px)`;\n    }\n\n    const bottomOverlayDOM = focusOverlayWrapper.querySelector<HTMLDivElement>(\n        \".visual-builder__overlay--bottom\"\n    );\n    if (bottomOverlayDOM) {\n        bottomOverlayDOM.style.top = `${\n            targetElementDimension.bottom + window.scrollY\n        }px`;\n        bottomOverlayDOM.style.height = `${\n            window.document.body.scrollHeight -\n            targetElementDimension.bottom -\n            window.scrollY\n        }px`;\n        bottomOverlayDOM.style.left = \"0\";\n        bottomOverlayDOM.style.width = \"100%\";\n    }\n\n    const leftOverlayDOM = focusOverlayWrapper.querySelector<HTMLDivElement>(\n        \".visual-builder__overlay--left\"\n    );\n    if (leftOverlayDOM) {\n        leftOverlayDOM.style.left = \"0\";\n        leftOverlayDOM.style.top = `${distanceFromTop}px`;\n        leftOverlayDOM.style.height = `${targetElementDimension.height}px`;\n        leftOverlayDOM.style.width = `${targetElementDimension.left}px`;\n    }\n\n    const rightOverlayDOM = focusOverlayWrapper.querySelector<HTMLDivElement>(\n        \".visual-builder__overlay--right\"\n    );\n    if (rightOverlayDOM) {\n        rightOverlayDOM.style.left = `${targetElementDimension.right}px`;\n        rightOverlayDOM.style.top = `${distanceFromTop}px`;\n        rightOverlayDOM.style.height = `${targetElementDimension.height}px`;\n        rightOverlayDOM.style.width = `${\n            document.documentElement.clientWidth - targetElementDimension.right\n        }px`;\n    }\n\n    const outlineDOM = focusOverlayWrapper.querySelector<HTMLDivElement>(\n        \".visual-builder__overlay--outline\"\n    );\n    if (outlineDOM) {\n        outlineDOM.style.top = `${\n            targetElementDimension.top + window.scrollY\n        }px`;\n        outlineDOM.style.height = `${targetElementDimension.height}px`;\n        outlineDOM.style.width = `${targetElementDimension.width}px`;\n        outlineDOM.style.left = `${targetElementDimension.left}px`;\n        outlineDOM.style.outlineColor = disabled ? \"#909090\" : \"#715cdd\";\n    }\n}\n\n/**\n * Hides the focus overlay and performs necessary cleanup actions when the user clicks outside of the focused element.\n * @param event - The mouse event that triggered the function.\n * @param elements - An object containing references to the focus overlay wrapper, the previously selected editable DOM element, and the visual builder wrapper.\n */\nexport function hideFocusOverlay(elements: HideOverlayParams): void {\n    const {\n        visualBuilderContainer,\n        visualBuilderOverlayWrapper,\n        focusedToolbar,\n        resizeObserver,\n        noTrigger,\n    } = elements;\n\n    if (visualBuilderOverlayWrapper) {\n        visualBuilderOverlayWrapper.classList.remove(\"visible\");\n\n        // Cleanup overlay styles: Top, Right, Bottom, Left & Outline\n        visualBuilderOverlayWrapper.childNodes.forEach((childNode) => {\n            if (childNode instanceof Element) {\n                childNode.removeAttribute(\"style\");\n            }\n        });\n\n        if (!noTrigger) {\n            sendFieldEvent({\n                visualBuilderContainer,\n                eventType: VisualBuilderPostMessageEvents.UPDATE_FIELD,\n            });\n        } else {\n            const { previousSelectedEditableDOM, focusFieldValue } =\n                VisualBuilder.VisualBuilderGlobalState.value || {};\n            if (\n                previousSelectedEditableDOM &&\n                \"innerText\" in previousSelectedEditableDOM &&\n                focusFieldValue != null\n            ) {\n                previousSelectedEditableDOM.innerText = focusFieldValue;\n            }\n        }\n        VisualBuilder.VisualBuilderGlobalState.value.focusFieldValue = null;\n        cleanIndividualFieldResidual({\n            overlayWrapper: visualBuilderOverlayWrapper,\n            visualBuilderContainer: visualBuilderContainer,\n            focusedToolbar: focusedToolbar,\n            resizeObserver: resizeObserver,\n        });\n    }\n}\ninterface ISendFieldEventParams {\n    visualBuilderContainer: HTMLElement | null;\n    eventType:\n        | VisualBuilderPostMessageEvents.UPDATE_FIELD\n        | VisualBuilderPostMessageEvents.SYNC_FIELD;\n}\nexport function sendFieldEvent(options: ISendFieldEventParams): void {\n    const { visualBuilderContainer, eventType } = options;\n    const previousSelectedEditableDOM =\n        VisualBuilder.VisualBuilderGlobalState.value\n            .previousSelectedEditableDOM;\n    const pseudoEditableElement = visualBuilderContainer?.querySelector(\n        \"div.visual-builder__pseudo-editable-element\"\n    );\n    if (\n        previousSelectedEditableDOM &&\n        (previousSelectedEditableDOM.hasAttribute(\"contenteditable\") ||\n            pseudoEditableElement)\n    ) {\n        const actualEditedElement =\n            pseudoEditableElement ||\n            (previousSelectedEditableDOM as HTMLElement);\n\n        let data =\n            \"innerText\" in actualEditedElement\n                ? actualEditedElement.innerText\n                : actualEditedElement.textContent;\n\n        const fieldMetadata = extractDetailsFromCslp(\n            previousSelectedEditableDOM.getAttribute(\"data-cslp\") as string\n        );\n\n        FieldSchemaMap.getFieldSchema(\n            fieldMetadata.content_type_uid,\n            fieldMetadata.fieldPath\n        )\n            .then((fieldSchema) => {\n                if (\n                    fieldSchema &&\n                    eventType === VisualBuilderPostMessageEvents.UPDATE_FIELD\n                ) {\n                    const fieldType = getFieldType(fieldSchema);\n                    if (fieldType && fieldType === FieldDataType.MULTILINE) {\n                        data = getMultilinePlaintext(actualEditedElement);\n                        (actualEditedElement as HTMLElement).innerText =\n                            data as string;\n                    }\n                }\n            })\n            .finally(() => {\n                visualBuilderPostMessage?.send(eventType, {\n                    data,\n                    fieldMetadata,\n                });\n            });\n    }\n}\ninterface HideOverlayParams\n    extends Pick<\n        EventListenerHandlerParams,\n        \"visualBuilderContainer\" | \"focusedToolbar\" | \"resizeObserver\"\n    > {\n    visualBuilderOverlayWrapper: HTMLDivElement | null;\n    noTrigger?: boolean;\n}\n\nexport function hideOverlay(params: HideOverlayParams): void {\n    const focusElementObserver =\n        VisualBuilder.VisualBuilderGlobalState.value.focusElementObserver;\n    if (focusElementObserver) {\n        focusElementObserver.disconnect();\n        VisualBuilder.VisualBuilderGlobalState.value.focusElementObserver =\n            null;\n    }\n    hideFocusOverlay({\n        visualBuilderContainer: params.visualBuilderContainer,\n        visualBuilderOverlayWrapper: params.visualBuilderOverlayWrapper,\n        focusedToolbar: params.focusedToolbar,\n        resizeObserver: params.resizeObserver,\n        noTrigger: Boolean(params.noTrigger),\n    });\n    showAllHiddenHighlightedCommentIcons();\n    if (\n        !VisualBuilder.VisualBuilderGlobalState.value\n            .previousSelectedEditableDOM\n    )\n        return;\n    params.resizeObserver.unobserve(\n        VisualBuilder.VisualBuilderGlobalState.value.previousSelectedEditableDOM\n    );\n    VisualBuilder.VisualBuilderGlobalState.value.previousSelectedEditableDOM =\n        null;\n}\n"],"mappings":";;;AAAA,SAAS,8BAA8B;AACvC,SAAS,oCAAoC;AAC7C,OAAO,8BAA8B;AACrC,SAAS,sCAAsC;AAE/C,SAAS,qBAAqB;AAE9B,SAAS,sBAAsB;AAC/B,SAAS,qBAAqB;AAC9B,SAAS,oBAAoB;AAE7B,SAAS,6BAA6B;AACtC,SAAS,4CAA4C;AAQ9C,SAAS,gBACZ,eACA,qBACA,UACI;AACJ,QAAM,yBAAyB,cAAc,sBAAsB;AACnE,MACI,uBAAuB,UAAU,KACjC,uBAAuB,WAAW;AAElC;AACJ,sBAAoB,UAAU,IAAI,SAAS;AAE3C,QAAM,kBAAkB,uBAAuB,MAAM,OAAO;AAC5D,QAAM,gBAAgB,oBAAoB;AAAA,IACtC;AAAA,EACJ;AAEA,MAAI,eAAe;AACf,kBAAc,MAAM,MAAM;AAC1B,kBAAc,MAAM,OAAO;AAC3B,kBAAc,MAAM,QAAQ;AAC5B,kBAAc,MAAM,SAAS,QAAQ,eAAe;AAAA,EACxD;AAEA,QAAM,mBAAmB,oBAAoB;AAAA,IACzC;AAAA,EACJ;AACA,MAAI,kBAAkB;AAClB,qBAAiB,MAAM,MAAM,GACzB,uBAAuB,SAAS,OAAO,OAC3C;AACA,qBAAiB,MAAM,SAAS,GAC5B,OAAO,SAAS,KAAK,eACrB,uBAAuB,SACvB,OAAO,OACX;AACA,qBAAiB,MAAM,OAAO;AAC9B,qBAAiB,MAAM,QAAQ;AAAA,EACnC;AAEA,QAAM,iBAAiB,oBAAoB;AAAA,IACvC;AAAA,EACJ;AACA,MAAI,gBAAgB;AAChB,mBAAe,MAAM,OAAO;AAC5B,mBAAe,MAAM,MAAM,GAAG,eAAe;AAC7C,mBAAe,MAAM,SAAS,GAAG,uBAAuB,MAAM;AAC9D,mBAAe,MAAM,QAAQ,GAAG,uBAAuB,IAAI;AAAA,EAC/D;AAEA,QAAM,kBAAkB,oBAAoB;AAAA,IACxC;AAAA,EACJ;AACA,MAAI,iBAAiB;AACjB,oBAAgB,MAAM,OAAO,GAAG,uBAAuB,KAAK;AAC5D,oBAAgB,MAAM,MAAM,GAAG,eAAe;AAC9C,oBAAgB,MAAM,SAAS,GAAG,uBAAuB,MAAM;AAC/D,oBAAgB,MAAM,QAAQ,GAC1B,SAAS,gBAAgB,cAAc,uBAAuB,KAClE;AAAA,EACJ;AAEA,QAAM,aAAa,oBAAoB;AAAA,IACnC;AAAA,EACJ;AACA,MAAI,YAAY;AACZ,eAAW,MAAM,MAAM,GACnB,uBAAuB,MAAM,OAAO,OACxC;AACA,eAAW,MAAM,SAAS,GAAG,uBAAuB,MAAM;AAC1D,eAAW,MAAM,QAAQ,GAAG,uBAAuB,KAAK;AACxD,eAAW,MAAM,OAAO,GAAG,uBAAuB,IAAI;AACtD,eAAW,MAAM,eAAe,WAAW,YAAY;AAAA,EAC3D;AACJ;AAOO,SAAS,iBAAiB,UAAmC;AAChE,QAAM;AAAA,IACF;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACJ,IAAI;AAEJ,MAAI,6BAA6B;AAC7B,gCAA4B,UAAU,OAAO,SAAS;AAGtD,gCAA4B,WAAW,QAAQ,CAAC,cAAc;AAC1D,UAAI,qBAAqB,SAAS;AAC9B,kBAAU,gBAAgB,OAAO;AAAA,MACrC;AAAA,IACJ,CAAC;AAED,QAAI,CAAC,WAAW;AACZ,qBAAe;AAAA,QACX;AAAA,QACA,WAAW,+BAA+B;AAAA,MAC9C,CAAC;AAAA,IACL,OAAO;AACH,YAAM,EAAE,6BAA6B,gBAAgB,IACjD,cAAc,yBAAyB,SAAS,CAAC;AACrD,UACI,+BACA,eAAe,+BACf,mBAAmB,MACrB;AACE,oCAA4B,YAAY;AAAA,MAC5C;AAAA,IACJ;AACA,kBAAc,yBAAyB,MAAM,kBAAkB;AAC/D,iCAA6B;AAAA,MACzB,gBAAgB;AAAA,MAChB;AAAA,MACA;AAAA,MACA;AAAA,IACJ,CAAC;AAAA,EACL;AACJ;AAOO,SAAS,eAAe,SAAsC;AACjE,QAAM,EAAE,wBAAwB,UAAU,IAAI;AAC9C,QAAM,8BACF,cAAc,yBAAyB,MAClC;AACT,QAAM,wBAAwB,wBAAwB;AAAA,IAClD;AAAA,EACJ;AACA,MACI,gCACC,4BAA4B,aAAa,iBAAiB,KACvD,wBACN;AACE,UAAM,sBACF,yBACC;AAEL,QAAI,OACA,eAAe,sBACT,oBAAoB,YACpB,oBAAoB;AAE9B,UAAM,gBAAgB;AAAA,MAClB,4BAA4B,aAAa,WAAW;AAAA,IACxD;AAEA,mBAAe;AAAA,MACX,cAAc;AAAA,MACd,cAAc;AAAA,IAClB,EACK,KAAK,CAAC,gBAAgB;AACnB,UACI,eACA,cAAc,+BAA+B,cAC/C;AACE,cAAM,YAAY,aAAa,WAAW;AAC1C,YAAI,aAAa,cAAc,cAAc,WAAW;AACpD,iBAAO,sBAAsB,mBAAmB;AAChD,UAAC,oBAAoC,YACjC;AAAA,QACR;AAAA,MACJ;AAAA,IACJ,CAAC,EACA,QAAQ,MAAM;AACX,gCAA0B,KAAK,WAAW;AAAA,QACtC;AAAA,QACA;AAAA,MACJ,CAAC;AAAA,IACL,CAAC;AAAA,EACT;AACJ;AAUO,SAAS,YAAY,QAAiC;AACzD,QAAM,uBACF,cAAc,yBAAyB,MAAM;AACjD,MAAI,sBAAsB;AACtB,yBAAqB,WAAW;AAChC,kBAAc,yBAAyB,MAAM,uBACzC;AAAA,EACR;AACA,mBAAiB;AAAA,IACb,wBAAwB,OAAO;AAAA,IAC/B,6BAA6B,OAAO;AAAA,IACpC,gBAAgB,OAAO;AAAA,IACvB,gBAAgB,OAAO;AAAA,IACvB,WAAW,QAAQ,OAAO,SAAS;AAAA,EACvC,CAAC;AACD,uCAAqC;AACrC,MACI,CAAC,cAAc,yBAAyB,MACnC;AAEL;AACJ,SAAO,eAAe;AAAA,IAClB,cAAc,yBAAyB,MAAM;AAAA,EACjD;AACA,gBAAc,yBAAyB,MAAM,8BACzC;AACR;","names":[]}