npm - @contentstack/live-preview-utils - Versions diffs - 4.2.0 → 4.3.0 - Mend

@contentstack/live-preview-utils 4.2.0 → 4.3.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (226) hide show

package/dist/legacy/visualBuilder/eventManager/useRecalculateVariantDataCSLPValues.cjs CHANGED Viewed

@@ -30,6 +30,7 @@ var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: tru
 // src/visualBuilder/eventManager/useRecalculateVariantDataCSLPValues.ts
 var useRecalculateVariantDataCSLPValues_exports = {};
 __export(useRecalculateVariantDataCSLPValues_exports, {
+  updateVariantClasses: () => updateVariantClasses,
   useRecalculateVariantDataCSLPValues: () => useRecalculateVariantDataCSLPValues
 });
 module.exports = __toCommonJS(useRecalculateVariantDataCSLPValues_exports);
@@ -38,6 +39,8 @@ var import_livePreviewEventManager = __toESM(require("../../livePreview/eventMan
 var import_livePreviewEventManager2 = require("../../livePreview/eventManager/livePreviewEventManager.constant.cjs");
 var import_constants = require("../utils/constants.cjs");
 var import_visualBuilder = require("../visualBuilder.style.cjs");
+var import_cslpdata = require("../../cslp/cslpdata.cjs");
+var import_useVariantsPostMessageEvent = require("./useVariantsPostMessageEvent.cjs");
 var VARIANT_UPDATE_DELAY_MS = 8e3;
 function useRecalculateVariantDataCSLPValues() {
   var _a;
@@ -45,40 +48,36 @@ function useRecalculateVariantDataCSLPValues() {
     import_livePreviewEventManager2.LIVE_PREVIEW_POST_MESSAGE_EVENTS.VARIANT_PATCH,
     (event) => {
       if (import__.VisualBuilder.VisualBuilderGlobalState.value.audienceMode) {
-        updateVariantClasses(event.data);
+        (0, import_useVariantsPostMessageEvent.setHighlightVariantFields)(event.data.highlightVariantFields);
+        updateVariantClasses();
       }
     }
   );
 }
-function updateVariantClasses({
-  highlightVariantFields,
-  expectedCSLPValues
-}) {
+function updateVariantClasses() {
+  const highlightVariantFields = import__.VisualBuilder.VisualBuilderGlobalState.value.highlightVariantFields;
   const variant = import__.VisualBuilder.VisualBuilderGlobalState.value.variant;
   const observers = [];
   const updateElementClasses = (element, dataCslp, observer) => {
-    if (!dataCslp) return;
+    if (!(0, import_cslpdata.isValidCslp)(dataCslp)) 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");
       }
+      const variantFieldClasses = ["visual-builder__variant-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");
+        variantFieldClasses.push((0, import_visualBuilder.visualBuilderStyles)()["visual-builder__variant-field-outline"]);
       }
+      element.classList.add(...variantFieldClasses);
     } else if (!dataCslp.startsWith("v2:") && element.classList.contains("visual-builder__variant-field")) {
       element.classList.remove(
-        (0, import_visualBuilder.visualBuilderStyles)()["visual-builder__variant-field"],
+        (0, import_visualBuilder.visualBuilderStyles)()["visual-builder__variant-field-outline"],
         "visual-builder__variant-field"
       );
       element.classList.add("visual-builder__base-field");
     } else if (dataCslp.startsWith("v2:") && variant && !dataCslp.includes(variant) && element.classList.contains("visual-builder__variant-field")) {
       element.classList.remove(
-        (0, import_visualBuilder.visualBuilderStyles)()["visual-builder__variant-field"],
+        (0, import_visualBuilder.visualBuilderStyles)()["visual-builder__variant-field-outline"],
         "visual-builder__variant-field"
       );
       element.classList.add("visual-builder__disabled-variant-field");
@@ -92,7 +91,7 @@ function updateVariantClasses({
   };
   const addElementClasses = (element) => {
     const dataCslp = element.getAttribute(import_constants.DATA_CSLP_ATTR_SELECTOR);
-    if (!dataCslp) {
+    if (!(0, import_cslpdata.isValidCslp)(dataCslp)) {
       element.childNodes.forEach((child) => {
         if (child instanceof HTMLElement) {
           addElementClasses(child);
@@ -107,18 +106,15 @@ function updateVariantClasses({
       if (element.classList.contains("visual-builder__base-field")) {
         element.classList.remove("visual-builder__base-field");
       }
+      const variantFieldClasses = ["visual-builder__variant-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");
+        variantFieldClasses.push((0, import_visualBuilder.visualBuilderStyles)()["visual-builder__variant-field-outline"]);
       }
+      element.classList.add(...variantFieldClasses);
     } else if (!dataCslp.startsWith("v2:")) {
       if (element.classList.contains("visual-builder__variant-field")) {
         element.classList.remove(
-          (0, import_visualBuilder.visualBuilderStyles)()["visual-builder__variant-field"],
+          (0, import_visualBuilder.visualBuilderStyles)()["visual-builder__variant-field-outline"],
           "visual-builder__variant-field"
         );
       }
@@ -169,6 +165,7 @@ function updateVariantClasses({
 }
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
+  updateVariantClasses,
   useRecalculateVariantDataCSLPValues
 });
 //# sourceMappingURL=useRecalculateVariantDataCSLPValues.cjs.map

package/dist/legacy/visualBuilder/eventManager/useRecalculateVariantDataCSLPValues.cjs.map CHANGED Viewed

	@@ -1 +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__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"]}
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\";\nimport { isValidCslp } from \"../../cslp/cslpdata\";\nimport { setHighlightVariantFields } from \"./useVariantsPostMessageEvent\";\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 setHighlightVariantFields(event.data.highlightVariantFields);\n updateVariantClasses();\n }\n }\n );\n}\nexport function updateVariantClasses(): void {\n const highlightVariantFields = VisualBuilder.VisualBuilderGlobalState.value.highlightVariantFields;\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 (!isValidCslp(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 const variantFieldClasses = [\"visual-builder__variant-field\"];\n if (highlightVariantFields) {\n variantFieldClasses.push(visualBuilderStyles()[\"visual-builder__variant-field-outline\"]);\n }\n element.classList.add(...variantFieldClasses);\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-outline\"],\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-outline\"],\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 (!isValidCslp(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 const variantFieldClasses = [\"visual-builder__variant-field\"];\n if (highlightVariantFields) {\n variantFieldClasses.push(visualBuilderStyles()[\"visual-builder__variant-field-outline\"]);\n }\n element.classList.add(...variantFieldClasses);\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-outline\"],\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 // TODO: Check if we could add attributeFilter to the observer to only observe the attribute changes for the data-cslp attribute.\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/legacy/visualBuilder/eventManager/useRecalculateVariantDataCSLPValues.d.cts CHANGED Viewed

@@ -2,5 +2,6 @@
  * Registers a post message event listener for updating the variant / base classes in the live preview for audience mode.
  */
 declare function useRecalculateVariantDataCSLPValues(): void;
+declare function updateVariantClasses(): void;
-export { useRecalculateVariantDataCSLPValues };
+export { updateVariantClasses, useRecalculateVariantDataCSLPValues };

package/dist/legacy/visualBuilder/eventManager/useRecalculateVariantDataCSLPValues.d.ts CHANGED Viewed

@@ -2,5 +2,6 @@
  * Registers a post message event listener for updating the variant / base classes in the live preview for audience mode.
  */
 declare function useRecalculateVariantDataCSLPValues(): void;
+declare function updateVariantClasses(): void;
-export { useRecalculateVariantDataCSLPValues };
+export { updateVariantClasses, useRecalculateVariantDataCSLPValues };

package/dist/legacy/visualBuilder/eventManager/useRecalculateVariantDataCSLPValues.js CHANGED Viewed

@@ -6,6 +6,8 @@ import livePreviewPostMessage from "../../livePreview/eventManager/livePreviewEv
 import { LIVE_PREVIEW_POST_MESSAGE_EVENTS } from "../../livePreview/eventManager/livePreviewEventManager.constant.js";
 import { DATA_CSLP_ATTR_SELECTOR } from "../utils/constants.js";
 import { visualBuilderStyles } from "../visualBuilder.style.js";
+import { isValidCslp } from "../../cslp/cslpdata.js";
+import { setHighlightVariantFields } from "./useVariantsPostMessageEvent.js";
 var VARIANT_UPDATE_DELAY_MS = 8e3;
 function useRecalculateVariantDataCSLPValues() {
   var _a;
@@ -13,40 +15,36 @@ function useRecalculateVariantDataCSLPValues() {
     LIVE_PREVIEW_POST_MESSAGE_EVENTS.VARIANT_PATCH,
     (event) => {
       if (VisualBuilder.VisualBuilderGlobalState.value.audienceMode) {
-        updateVariantClasses(event.data);
+        setHighlightVariantFields(event.data.highlightVariantFields);
+        updateVariantClasses();
       }
     }
   );
 }
-function updateVariantClasses({
-  highlightVariantFields,
-  expectedCSLPValues
-}) {
+function updateVariantClasses() {
+  const highlightVariantFields = VisualBuilder.VisualBuilderGlobalState.value.highlightVariantFields;
   const variant = VisualBuilder.VisualBuilderGlobalState.value.variant;
   const observers = [];
   const updateElementClasses = (element, dataCslp, observer) => {
-    if (!dataCslp) return;
+    if (!isValidCslp(dataCslp)) 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");
       }
+      const variantFieldClasses = ["visual-builder__variant-field"];
       if (highlightVariantFields) {
-        element.classList.add(
-          visualBuilderStyles()["visual-builder__variant-field"],
-          "visual-builder__variant-field"
-        );
-      } else {
-        element.classList.add("visual-builder__variant-field");
+        variantFieldClasses.push(visualBuilderStyles()["visual-builder__variant-field-outline"]);
       }
+      element.classList.add(...variantFieldClasses);
     } else if (!dataCslp.startsWith("v2:") && element.classList.contains("visual-builder__variant-field")) {
       element.classList.remove(
-        visualBuilderStyles()["visual-builder__variant-field"],
+        visualBuilderStyles()["visual-builder__variant-field-outline"],
         "visual-builder__variant-field"
       );
       element.classList.add("visual-builder__base-field");
     } else if (dataCslp.startsWith("v2:") && variant && !dataCslp.includes(variant) && element.classList.contains("visual-builder__variant-field")) {
       element.classList.remove(
-        visualBuilderStyles()["visual-builder__variant-field"],
+        visualBuilderStyles()["visual-builder__variant-field-outline"],
         "visual-builder__variant-field"
       );
       element.classList.add("visual-builder__disabled-variant-field");
@@ -60,7 +58,7 @@ function updateVariantClasses({
   };
   const addElementClasses = (element) => {
     const dataCslp = element.getAttribute(DATA_CSLP_ATTR_SELECTOR);
-    if (!dataCslp) {
+    if (!isValidCslp(dataCslp)) {
       element.childNodes.forEach((child) => {
         if (child instanceof HTMLElement) {
           addElementClasses(child);
@@ -75,18 +73,15 @@ function updateVariantClasses({
       if (element.classList.contains("visual-builder__base-field")) {
         element.classList.remove("visual-builder__base-field");
       }
+      const variantFieldClasses = ["visual-builder__variant-field"];
       if (highlightVariantFields) {
-        element.classList.add(
-          visualBuilderStyles()["visual-builder__variant-field"],
-          "visual-builder__variant-field"
-        );
-      } else {
-        element.classList.add("visual-builder__variant-field");
+        variantFieldClasses.push(visualBuilderStyles()["visual-builder__variant-field-outline"]);
       }
+      element.classList.add(...variantFieldClasses);
     } else if (!dataCslp.startsWith("v2:")) {
       if (element.classList.contains("visual-builder__variant-field")) {
         element.classList.remove(
-          visualBuilderStyles()["visual-builder__variant-field"],
+          visualBuilderStyles()["visual-builder__variant-field-outline"],
           "visual-builder__variant-field"
         );
       }
@@ -136,6 +131,7 @@ function updateVariantClasses({
   }, VARIANT_UPDATE_DELAY_MS);
 }
 export {
+  updateVariantClasses,
   useRecalculateVariantDataCSLPValues
 };
 //# sourceMappingURL=useRecalculateVariantDataCSLPValues.js.map

package/dist/legacy/visualBuilder/eventManager/useRecalculateVariantDataCSLPValues.js.map CHANGED Viewed

	@@ -1 +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__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":[]}
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\";\nimport { isValidCslp } from \"../../cslp/cslpdata\";\nimport { setHighlightVariantFields } from \"./useVariantsPostMessageEvent\";\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 setHighlightVariantFields(event.data.highlightVariantFields);\n updateVariantClasses();\n }\n }\n );\n}\nexport function updateVariantClasses(): void {\n const highlightVariantFields = VisualBuilder.VisualBuilderGlobalState.value.highlightVariantFields;\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 (!isValidCslp(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 const variantFieldClasses = [\"visual-builder__variant-field\"];\n if (highlightVariantFields) {\n variantFieldClasses.push(visualBuilderStyles()[\"visual-builder__variant-field-outline\"]);\n }\n element.classList.add(...variantFieldClasses);\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-outline\"],\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-outline\"],\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 (!isValidCslp(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 const variantFieldClasses = [\"visual-builder__variant-field\"];\n if (highlightVariantFields) {\n variantFieldClasses.push(visualBuilderStyles()[\"visual-builder__variant-field-outline\"]);\n }\n element.classList.add(...variantFieldClasses);\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-outline\"],\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 // TODO: Check if we could add attributeFilter to the observer to only observe the attribute changes for the data-cslp attribute.\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/legacy/visualBuilder/eventManager/useRevalidateFieldDataPostMessageEvent.cjs CHANGED Viewed

@@ -41,7 +41,7 @@ async function handleRevalidateFieldData() {
     const targetElement = hoveredElement || focusedElement;
     if (targetElement) {
       const cslp = targetElement.getAttribute("data-cslp");
-      if (cslp) {
+      if ((0, import_cslp.isValidCslp)(cslp)) {
         const fieldMetadata = (0, import_cslp.extractDetailsFromCslp)(cslp);
         import_fieldSchemaMap.FieldSchemaMap.clearContentTypeSchema(
           fieldMetadata.content_type_uid
@@ -53,7 +53,7 @@ async function handleRevalidateFieldData() {
     console.error("Error handling revalidate field data:", error);
     window.location.reload();
   } finally {
-    if (shouldRefocus && elementCslp) {
+    if (shouldRefocus && (0, import_cslp.isValidCslp)(elementCslp)) {
       await refocusElement(elementCslp, elementCslpUniqueId);
     }
   }

package/dist/legacy/visualBuilder/eventManager/useRevalidateFieldDataPostMessageEvent.cjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"sources":["../../../../src/visualBuilder/eventManager/useRevalidateFieldDataPostMessageEvent.ts"],"sourcesContent":["import { VisualBuilder } from \"..\";\nimport { extractDetailsFromCslp } from \"../../cslp\";\nimport { FieldSchemaMap } from \"../utils/fieldSchemaMap\";\nimport { hideFocusOverlay } from \"../generators/generateOverlay\";\nimport { handleBuilderInteraction } from \"../listeners/mouseClick\";\n\n/*\n Revalidates field data and schema after variant linking operations.\n * Unfocuses the selected element, revalidates data, and then reselects it.\n /\nexport async function handleRevalidateFieldData(): Promise<void> {\n const focusedElement =\n VisualBuilder.VisualBuilderGlobalState.value\n .previousSelectedEditableDOM;\n const hoveredElement =\n VisualBuilder.VisualBuilderGlobalState.value.previousHoveredTargetDOM;\n\n // Store element identifiers for refocusing\n const elementCslp = focusedElement?.getAttribute(\"data-cslp\");\n const elementCslpUniqueId =\n focusedElement?.getAttribute(\"data-cslp-unique-id\") \|\| null;\n const shouldRefocus = !!focusedElement;\n\n try {\n // Step 1: Unfocus the current element\n if (shouldRefocus) {\n await unfocusElement();\n }\n\n // Step 2: Revalidate field data\n const targetElement = hoveredElement \|\| focusedElement;\n\n if (targetElement) {\n const cslp = targetElement.getAttribute(\"data-cslp\");\n if (cslp) {\n const fieldMetadata = extractDetailsFromCslp(cslp);\n\n // Try to revalidate specific field schema and data\n // Clear the entire content type schema from cache to force fresh fetch\n FieldSchemaMap.clearContentTypeSchema(\n fieldMetadata.content_type_uid\n );\n }\n }\n\n // Fallback 1: Clear all field schema cache\n FieldSchemaMap.clear();\n } catch (error) {\n console.error(\"Error handling revalidate field data:\", error);\n // Final fallback - refresh the page\n window.location.reload();\n } finally {\n // Step 3: Refocus the element if we had one focused before\n if (shouldRefocus && elementCslp) {\n await refocusElement(elementCslp, elementCslpUniqueId);\n }\n }\n}\n\n/\n Unfocuses the currently selected element and clears focus state\n /\nasync function unfocusElement(): Promise<void> {\n const { visualBuilderContainer, overlayWrapper, focusedToolbar } =\n getVisualBuilderElements();\n\n if (!visualBuilderContainer \|\| !overlayWrapper) return;\n\n const dummyResizeObserver = new ResizeObserver(() => {});\n\n // Hide focus overlay (cleanIndividualFieldResidual needs previousSelectedEditableDOM)\n hideFocusOverlay({\n visualBuilderContainer,\n visualBuilderOverlayWrapper: overlayWrapper,\n focusedToolbar,\n resizeObserver: dummyResizeObserver,\n noTrigger: true,\n });\n\n // Clear global state after cleanup\n VisualBuilder.VisualBuilderGlobalState.value.previousSelectedEditableDOM =\n null;\n VisualBuilder.VisualBuilderGlobalState.value.isFocussed = false;\n}\n\n/\n Refocuses an element by its CSLP identifier\n /\nasync function refocusElement(\n cslp: string,\n uniqueId: string \| null\n): Promise<void> {\n try {\n // Find the element (prefer unique ID, fallback to CSLP)\n const elementToRefocus =\n (uniqueId &&\n document.querySelector(\n `[data-cslp-unique-id=\"${uniqueId}\"]`\n )) \|\|\n document.querySelector(`[data-cslp=\"${cslp}\"]`);\n\n if (!elementToRefocus) return;\n\n const { visualBuilderContainer, overlayWrapper, focusedToolbar } =\n getVisualBuilderElements();\n\n if (!visualBuilderContainer \|\| !overlayWrapper) return;\n\n // Create synthetic click event\n const syntheticEvent = new MouseEvent(\"click\", {\n bubbles: true,\n cancelable: true,\n });\n Object.defineProperty(syntheticEvent, \"target\", {\n value: elementToRefocus,\n enumerable: true,\n });\n\n // Refocus using handleBuilderInteraction\n await handleBuilderInteraction({\n event: syntheticEvent,\n previousSelectedEditableDOM: null,\n visualBuilderContainer,\n overlayWrapper,\n focusedToolbar,\n resizeObserver: new ResizeObserver(() => {}),\n });\n } catch (error) {\n console.warn(\"Could not refocus element after revalidation:\", error);\n }\n}\n\n/\n Gets the main visual builder DOM elements\n */\nfunction getVisualBuilderElements() {\n return {\n visualBuilderContainer: document.querySelector(\n \".visual-builder__container\"\n ) as HTMLDivElement \| null,\n overlayWrapper: document.querySelector(\n \".visual-builder__overlay__wrapper\"\n ) as HTMLDivElement \| null,\n focusedToolbar: document.querySelector(\n \".visual-builder__focused-toolbar\"\n ) as HTMLDivElement \| null,\n };\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,eAA8B;AAC9B,~~kBAAuC~~;~~AACvC~~,4BAA+B;AAC/B,6BAAiC;AACjC,wBAAyC;AAMzC,eAAsB,4BAA2C;AAC7D,QAAM,iBACF,uBAAc,yBAAyB,MAClC;AACT,QAAM,iBACF,uBAAc,yBAAyB,MAAM;AAGjD,QAAM,cAAc,iDAAgB,aAAa;AACjD,QAAM,uBACF,iDAAgB,aAAa,2BAA0B;AAC3D,QAAM,gBAAgB,CAAC,CAAC;AAExB,MAAI;AAEA,QAAI,eAAe;AACf,YAAM,eAAe;AAAA,IACzB;AAGA,UAAM,gBAAgB,kBAAkB;AAExC,QAAI,eAAe;AACf,YAAM,OAAO,cAAc,aAAa,WAAW;AACnD,~~UAAI~~,~~MAAM~~;~~AACN~~,cAAM,oBAAgB,oCAAuB,IAAI;AAIjD,6CAAe;AAAA,UACX,cAAc;AAAA,QAClB;AAAA,MACJ;AAAA,IACJ;AAGA,yCAAe,MAAM;AAAA,EACzB,SAAS,OAAO;AACZ,YAAQ,MAAM,yCAAyC,KAAK;AAE5D,WAAO,SAAS,OAAO;AAAA,EAC3B,UAAE;AAEE,QAAI,~~iBAAiB~~,~~aAAa~~;~~AAC9B~~,YAAM,eAAe,aAAa,mBAAmB;AAAA,IACzD;AAAA,EACJ;AACJ;AAKA,eAAe,iBAAgC;AAC3C,QAAM,EAAE,wBAAwB,gBAAgB,eAAe,IAC3D,yBAAyB;AAE7B,MAAI,CAAC,0BAA0B,CAAC,eAAgB;AAEhD,QAAM,sBAAsB,IAAI,eAAe,MAAM;AAAA,EAAC,CAAC;AAGvD,+CAAiB;AAAA,IACb;AAAA,IACA,6BAA6B;AAAA,IAC7B;AAAA,IACA,gBAAgB;AAAA,IAChB,WAAW;AAAA,EACf,CAAC;AAGD,yBAAc,yBAAyB,MAAM,8BACzC;AACJ,yBAAc,yBAAyB,MAAM,aAAa;AAC9D;AAKA,eAAe,eACX,MACA,UACa;AACb,MAAI;AAEA,UAAM,mBACD,YACG,SAAS;AAAA,MACL,yBAAyB,QAAQ;AAAA,IACrC,KACJ,SAAS,cAAc,eAAe,IAAI,IAAI;AAElD,QAAI,CAAC,iBAAkB;AAEvB,UAAM,EAAE,wBAAwB,gBAAgB,eAAe,IAC3D,yBAAyB;AAE7B,QAAI,CAAC,0BAA0B,CAAC,eAAgB;AAGhD,UAAM,iBAAiB,IAAI,WAAW,SAAS;AAAA,MAC3C,SAAS;AAAA,MACT,YAAY;AAAA,IAChB,CAAC;AACD,WAAO,eAAe,gBAAgB,UAAU;AAAA,MAC5C,OAAO;AAAA,MACP,YAAY;AAAA,IAChB,CAAC;AAGD,cAAM,4CAAyB;AAAA,MAC3B,OAAO;AAAA,MACP,6BAA6B;AAAA,MAC7B;AAAA,MACA;AAAA,MACA;AAAA,MACA,gBAAgB,IAAI,eAAe,MAAM;AAAA,MAAC,CAAC;AAAA,IAC/C,CAAC;AAAA,EACL,SAAS,OAAO;AACZ,YAAQ,KAAK,iDAAiD,KAAK;AAAA,EACvE;AACJ;AAKA,SAAS,2BAA2B;AAChC,SAAO;AAAA,IACH,wBAAwB,SAAS;AAAA,MAC7B;AAAA,IACJ;AAAA,IACA,gBAAgB,SAAS;AAAA,MACrB;AAAA,IACJ;AAAA,IACA,gBAAgB,SAAS;AAAA,MACrB;AAAA,IACJ;AAAA,EACJ;AACJ;","names":[]}
1	+ {"version":3,"sources":["../../../../src/visualBuilder/eventManager/useRevalidateFieldDataPostMessageEvent.ts"],"sourcesContent":["import { VisualBuilder } from \"..\";\nimport { extractDetailsFromCslp, isValidCslp } from \"../../cslp\";\nimport { FieldSchemaMap } from \"../utils/fieldSchemaMap\";\nimport { hideFocusOverlay } from \"../generators/generateOverlay\";\nimport { handleBuilderInteraction } from \"../listeners/mouseClick\";\n\n/*\n Revalidates field data and schema after variant linking operations.\n * Unfocuses the selected element, revalidates data, and then reselects it.\n /\nexport async function handleRevalidateFieldData(): Promise<void> {\n const focusedElement =\n VisualBuilder.VisualBuilderGlobalState.value\n .previousSelectedEditableDOM;\n const hoveredElement =\n VisualBuilder.VisualBuilderGlobalState.value.previousHoveredTargetDOM;\n\n // Store element identifiers for refocusing\n const elementCslp = focusedElement?.getAttribute(\"data-cslp\");\n const elementCslpUniqueId =\n focusedElement?.getAttribute(\"data-cslp-unique-id\") \|\| null;\n const shouldRefocus = !!focusedElement;\n\n try {\n // Step 1: Unfocus the current element\n if (shouldRefocus) {\n await unfocusElement();\n }\n\n // Step 2: Revalidate field data\n const targetElement = hoveredElement \|\| focusedElement;\n\n if (targetElement) {\n const cslp = targetElement.getAttribute(\"data-cslp\");\n if (isValidCslp(cslp)) {\n const fieldMetadata = extractDetailsFromCslp(cslp);\n\n // Try to revalidate specific field schema and data\n // Clear the entire content type schema from cache to force fresh fetch\n FieldSchemaMap.clearContentTypeSchema(\n fieldMetadata.content_type_uid\n );\n }\n }\n\n // Fallback 1: Clear all field schema cache\n FieldSchemaMap.clear();\n } catch (error) {\n console.error(\"Error handling revalidate field data:\", error);\n // Final fallback - refresh the page\n window.location.reload();\n } finally {\n // Step 3: Refocus the element if we had one focused before\n if (shouldRefocus && isValidCslp(elementCslp)) {\n await refocusElement(elementCslp, elementCslpUniqueId);\n }\n }\n}\n\n/\n Unfocuses the currently selected element and clears focus state\n /\nasync function unfocusElement(): Promise<void> {\n const { visualBuilderContainer, overlayWrapper, focusedToolbar } =\n getVisualBuilderElements();\n\n if (!visualBuilderContainer \|\| !overlayWrapper) return;\n\n const dummyResizeObserver = new ResizeObserver(() => {});\n\n // Hide focus overlay (cleanIndividualFieldResidual needs previousSelectedEditableDOM)\n hideFocusOverlay({\n visualBuilderContainer,\n visualBuilderOverlayWrapper: overlayWrapper,\n focusedToolbar,\n resizeObserver: dummyResizeObserver,\n noTrigger: true,\n });\n\n // Clear global state after cleanup\n VisualBuilder.VisualBuilderGlobalState.value.previousSelectedEditableDOM =\n null;\n VisualBuilder.VisualBuilderGlobalState.value.isFocussed = false;\n}\n\n/\n Refocuses an element by its CSLP identifier\n /\nasync function refocusElement(\n cslp: string,\n uniqueId: string \| null\n): Promise<void> {\n try {\n // Find the element (prefer unique ID, fallback to CSLP)\n const elementToRefocus =\n (uniqueId &&\n document.querySelector(\n `[data-cslp-unique-id=\"${uniqueId}\"]`\n )) \|\|\n document.querySelector(`[data-cslp=\"${cslp}\"]`);\n\n if (!elementToRefocus) return;\n\n const { visualBuilderContainer, overlayWrapper, focusedToolbar } =\n getVisualBuilderElements();\n\n if (!visualBuilderContainer \|\| !overlayWrapper) return;\n\n // Create synthetic click event\n const syntheticEvent = new MouseEvent(\"click\", {\n bubbles: true,\n cancelable: true,\n });\n Object.defineProperty(syntheticEvent, \"target\", {\n value: elementToRefocus,\n enumerable: true,\n });\n\n // Refocus using handleBuilderInteraction\n await handleBuilderInteraction({\n event: syntheticEvent,\n previousSelectedEditableDOM: null,\n visualBuilderContainer,\n overlayWrapper,\n focusedToolbar,\n resizeObserver: new ResizeObserver(() => {}),\n });\n } catch (error) {\n console.warn(\"Could not refocus element after revalidation:\", error);\n }\n}\n\n/\n Gets the main visual builder DOM elements\n */\nfunction getVisualBuilderElements() {\n return {\n visualBuilderContainer: document.querySelector(\n \".visual-builder__container\"\n ) as HTMLDivElement \| null,\n overlayWrapper: document.querySelector(\n \".visual-builder__overlay__wrapper\"\n ) as HTMLDivElement \| null,\n focusedToolbar: document.querySelector(\n \".visual-builder__focused-toolbar\"\n ) as HTMLDivElement \| null,\n };\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,eAA8B;AAC9B,kBAAoD;AACpD,4BAA+B;AAC/B,6BAAiC;AACjC,wBAAyC;AAMzC,eAAsB,4BAA2C;AAC7D,QAAM,iBACF,uBAAc,yBAAyB,MAClC;AACT,QAAM,iBACF,uBAAc,yBAAyB,MAAM;AAGjD,QAAM,cAAc,iDAAgB,aAAa;AACjD,QAAM,uBACF,iDAAgB,aAAa,2BAA0B;AAC3D,QAAM,gBAAgB,CAAC,CAAC;AAExB,MAAI;AAEA,QAAI,eAAe;AACf,YAAM,eAAe;AAAA,IACzB;AAGA,UAAM,gBAAgB,kBAAkB;AAExC,QAAI,eAAe;AACf,YAAM,OAAO,cAAc,aAAa,WAAW;AACnD,cAAI,yBAAY,IAAI,GAAG;AACnB,cAAM,oBAAgB,oCAAuB,IAAI;AAIjD,6CAAe;AAAA,UACX,cAAc;AAAA,QAClB;AAAA,MACJ;AAAA,IACJ;AAGA,yCAAe,MAAM;AAAA,EACzB,SAAS,OAAO;AACZ,YAAQ,MAAM,yCAAyC,KAAK;AAE5D,WAAO,SAAS,OAAO;AAAA,EAC3B,UAAE;AAEE,QAAI,qBAAiB,yBAAY,WAAW,GAAG;AAC3C,YAAM,eAAe,aAAa,mBAAmB;AAAA,IACzD;AAAA,EACJ;AACJ;AAKA,eAAe,iBAAgC;AAC3C,QAAM,EAAE,wBAAwB,gBAAgB,eAAe,IAC3D,yBAAyB;AAE7B,MAAI,CAAC,0BAA0B,CAAC,eAAgB;AAEhD,QAAM,sBAAsB,IAAI,eAAe,MAAM;AAAA,EAAC,CAAC;AAGvD,+CAAiB;AAAA,IACb;AAAA,IACA,6BAA6B;AAAA,IAC7B;AAAA,IACA,gBAAgB;AAAA,IAChB,WAAW;AAAA,EACf,CAAC;AAGD,yBAAc,yBAAyB,MAAM,8BACzC;AACJ,yBAAc,yBAAyB,MAAM,aAAa;AAC9D;AAKA,eAAe,eACX,MACA,UACa;AACb,MAAI;AAEA,UAAM,mBACD,YACG,SAAS;AAAA,MACL,yBAAyB,QAAQ;AAAA,IACrC,KACJ,SAAS,cAAc,eAAe,IAAI,IAAI;AAElD,QAAI,CAAC,iBAAkB;AAEvB,UAAM,EAAE,wBAAwB,gBAAgB,eAAe,IAC3D,yBAAyB;AAE7B,QAAI,CAAC,0BAA0B,CAAC,eAAgB;AAGhD,UAAM,iBAAiB,IAAI,WAAW,SAAS;AAAA,MAC3C,SAAS;AAAA,MACT,YAAY;AAAA,IAChB,CAAC;AACD,WAAO,eAAe,gBAAgB,UAAU;AAAA,MAC5C,OAAO;AAAA,MACP,YAAY;AAAA,IAChB,CAAC;AAGD,cAAM,4CAAyB;AAAA,MAC3B,OAAO;AAAA,MACP,6BAA6B;AAAA,MAC7B;AAAA,MACA;AAAA,MACA;AAAA,MACA,gBAAgB,IAAI,eAAe,MAAM;AAAA,MAAC,CAAC;AAAA,IAC/C,CAAC;AAAA,EACL,SAAS,OAAO;AACZ,YAAQ,KAAK,iDAAiD,KAAK;AAAA,EACvE;AACJ;AAKA,SAAS,2BAA2B;AAChC,SAAO;AAAA,IACH,wBAAwB,SAAS;AAAA,MAC7B;AAAA,IACJ;AAAA,IACA,gBAAgB,SAAS;AAAA,MACrB;AAAA,IACJ;AAAA,IACA,gBAAgB,SAAS;AAAA,MACrB;AAAA,IACJ;AAAA,EACJ;AACJ;","names":[]}

package/dist/legacy/visualBuilder/eventManager/useRevalidateFieldDataPostMessageEvent.js CHANGED Viewed

@@ -2,7 +2,7 @@ import "../../chunk-5WRI5ZAA.js";
 // src/visualBuilder/eventManager/useRevalidateFieldDataPostMessageEvent.ts
 import { VisualBuilder } from "../index.js";
-import { extractDetailsFromCslp } from "../../cslp/index.js";
+import { extractDetailsFromCslp, isValidCslp } from "../../cslp/index.js";
 import { FieldSchemaMap } from "../utils/fieldSchemaMap.js";
 import { hideFocusOverlay } from "../generators/generateOverlay.js";
 import { handleBuilderInteraction } from "../listeners/mouseClick.js";
@@ -19,7 +19,7 @@ async function handleRevalidateFieldData() {
     const targetElement = hoveredElement || focusedElement;
     if (targetElement) {
       const cslp = targetElement.getAttribute("data-cslp");
-      if (cslp) {
+      if (isValidCslp(cslp)) {
         const fieldMetadata = extractDetailsFromCslp(cslp);
         FieldSchemaMap.clearContentTypeSchema(
           fieldMetadata.content_type_uid
@@ -31,7 +31,7 @@ async function handleRevalidateFieldData() {
     console.error("Error handling revalidate field data:", error);
     window.location.reload();
   } finally {
-    if (shouldRefocus && elementCslp) {
+    if (shouldRefocus && isValidCslp(elementCslp)) {
       await refocusElement(elementCslp, elementCslpUniqueId);
     }
   }

package/dist/legacy/visualBuilder/eventManager/useRevalidateFieldDataPostMessageEvent.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"sources":["../../../../src/visualBuilder/eventManager/useRevalidateFieldDataPostMessageEvent.ts"],"sourcesContent":["import { VisualBuilder } from \"..\";\nimport { extractDetailsFromCslp } from \"../../cslp\";\nimport { FieldSchemaMap } from \"../utils/fieldSchemaMap\";\nimport { hideFocusOverlay } from \"../generators/generateOverlay\";\nimport { handleBuilderInteraction } from \"../listeners/mouseClick\";\n\n/*\n Revalidates field data and schema after variant linking operations.\n * Unfocuses the selected element, revalidates data, and then reselects it.\n /\nexport async function handleRevalidateFieldData(): Promise<void> {\n const focusedElement =\n VisualBuilder.VisualBuilderGlobalState.value\n .previousSelectedEditableDOM;\n const hoveredElement =\n VisualBuilder.VisualBuilderGlobalState.value.previousHoveredTargetDOM;\n\n // Store element identifiers for refocusing\n const elementCslp = focusedElement?.getAttribute(\"data-cslp\");\n const elementCslpUniqueId =\n focusedElement?.getAttribute(\"data-cslp-unique-id\") \|\| null;\n const shouldRefocus = !!focusedElement;\n\n try {\n // Step 1: Unfocus the current element\n if (shouldRefocus) {\n await unfocusElement();\n }\n\n // Step 2: Revalidate field data\n const targetElement = hoveredElement \|\| focusedElement;\n\n if (targetElement) {\n const cslp = targetElement.getAttribute(\"data-cslp\");\n if (cslp) {\n const fieldMetadata = extractDetailsFromCslp(cslp);\n\n // Try to revalidate specific field schema and data\n // Clear the entire content type schema from cache to force fresh fetch\n FieldSchemaMap.clearContentTypeSchema(\n fieldMetadata.content_type_uid\n );\n }\n }\n\n // Fallback 1: Clear all field schema cache\n FieldSchemaMap.clear();\n } catch (error) {\n console.error(\"Error handling revalidate field data:\", error);\n // Final fallback - refresh the page\n window.location.reload();\n } finally {\n // Step 3: Refocus the element if we had one focused before\n if (shouldRefocus && elementCslp) {\n await refocusElement(elementCslp, elementCslpUniqueId);\n }\n }\n}\n\n/\n Unfocuses the currently selected element and clears focus state\n /\nasync function unfocusElement(): Promise<void> {\n const { visualBuilderContainer, overlayWrapper, focusedToolbar } =\n getVisualBuilderElements();\n\n if (!visualBuilderContainer \|\| !overlayWrapper) return;\n\n const dummyResizeObserver = new ResizeObserver(() => {});\n\n // Hide focus overlay (cleanIndividualFieldResidual needs previousSelectedEditableDOM)\n hideFocusOverlay({\n visualBuilderContainer,\n visualBuilderOverlayWrapper: overlayWrapper,\n focusedToolbar,\n resizeObserver: dummyResizeObserver,\n noTrigger: true,\n });\n\n // Clear global state after cleanup\n VisualBuilder.VisualBuilderGlobalState.value.previousSelectedEditableDOM =\n null;\n VisualBuilder.VisualBuilderGlobalState.value.isFocussed = false;\n}\n\n/\n Refocuses an element by its CSLP identifier\n /\nasync function refocusElement(\n cslp: string,\n uniqueId: string \| null\n): Promise<void> {\n try {\n // Find the element (prefer unique ID, fallback to CSLP)\n const elementToRefocus =\n (uniqueId &&\n document.querySelector(\n `[data-cslp-unique-id=\"${uniqueId}\"]`\n )) \|\|\n document.querySelector(`[data-cslp=\"${cslp}\"]`);\n\n if (!elementToRefocus) return;\n\n const { visualBuilderContainer, overlayWrapper, focusedToolbar } =\n getVisualBuilderElements();\n\n if (!visualBuilderContainer \|\| !overlayWrapper) return;\n\n // Create synthetic click event\n const syntheticEvent = new MouseEvent(\"click\", {\n bubbles: true,\n cancelable: true,\n });\n Object.defineProperty(syntheticEvent, \"target\", {\n value: elementToRefocus,\n enumerable: true,\n });\n\n // Refocus using handleBuilderInteraction\n await handleBuilderInteraction({\n event: syntheticEvent,\n previousSelectedEditableDOM: null,\n visualBuilderContainer,\n overlayWrapper,\n focusedToolbar,\n resizeObserver: new ResizeObserver(() => {}),\n });\n } catch (error) {\n console.warn(\"Could not refocus element after revalidation:\", error);\n }\n}\n\n/\n Gets the main visual builder DOM elements\n */\nfunction getVisualBuilderElements() {\n return {\n visualBuilderContainer: document.querySelector(\n \".visual-builder__container\"\n ) as HTMLDivElement \| null,\n overlayWrapper: document.querySelector(\n \".visual-builder__overlay__wrapper\"\n ) as HTMLDivElement \| null,\n focusedToolbar: document.querySelector(\n \".visual-builder__focused-toolbar\"\n ) as HTMLDivElement \| null,\n };\n}\n"],"mappings":";;;AAAA,SAAS,qBAAqB;AAC9B,SAAS,~~8BAA8B~~;~~AACvC~~,SAAS,sBAAsB;AAC/B,SAAS,wBAAwB;AACjC,SAAS,gCAAgC;AAMzC,eAAsB,4BAA2C;AAC7D,QAAM,iBACF,cAAc,yBAAyB,MAClC;AACT,QAAM,iBACF,cAAc,yBAAyB,MAAM;AAGjD,QAAM,cAAc,iDAAgB,aAAa;AACjD,QAAM,uBACF,iDAAgB,aAAa,2BAA0B;AAC3D,QAAM,gBAAgB,CAAC,CAAC;AAExB,MAAI;AAEA,QAAI,eAAe;AACf,YAAM,eAAe;AAAA,IACzB;AAGA,UAAM,gBAAgB,kBAAkB;AAExC,QAAI,eAAe;AACf,YAAM,OAAO,cAAc,aAAa,WAAW;AACnD,UAAI,~~MAAM~~;~~AACN~~,cAAM,gBAAgB,uBAAuB,IAAI;AAIjD,uBAAe;AAAA,UACX,cAAc;AAAA,QAClB;AAAA,MACJ;AAAA,IACJ;AAGA,mBAAe,MAAM;AAAA,EACzB,SAAS,OAAO;AACZ,YAAQ,MAAM,yCAAyC,KAAK;AAE5D,WAAO,SAAS,OAAO;AAAA,EAC3B,UAAE;AAEE,QAAI,iBAAiB,~~aAAa~~;~~AAC9B~~,YAAM,eAAe,aAAa,mBAAmB;AAAA,IACzD;AAAA,EACJ;AACJ;AAKA,eAAe,iBAAgC;AAC3C,QAAM,EAAE,wBAAwB,gBAAgB,eAAe,IAC3D,yBAAyB;AAE7B,MAAI,CAAC,0BAA0B,CAAC,eAAgB;AAEhD,QAAM,sBAAsB,IAAI,eAAe,MAAM;AAAA,EAAC,CAAC;AAGvD,mBAAiB;AAAA,IACb;AAAA,IACA,6BAA6B;AAAA,IAC7B;AAAA,IACA,gBAAgB;AAAA,IAChB,WAAW;AAAA,EACf,CAAC;AAGD,gBAAc,yBAAyB,MAAM,8BACzC;AACJ,gBAAc,yBAAyB,MAAM,aAAa;AAC9D;AAKA,eAAe,eACX,MACA,UACa;AACb,MAAI;AAEA,UAAM,mBACD,YACG,SAAS;AAAA,MACL,yBAAyB,QAAQ;AAAA,IACrC,KACJ,SAAS,cAAc,eAAe,IAAI,IAAI;AAElD,QAAI,CAAC,iBAAkB;AAEvB,UAAM,EAAE,wBAAwB,gBAAgB,eAAe,IAC3D,yBAAyB;AAE7B,QAAI,CAAC,0BAA0B,CAAC,eAAgB;AAGhD,UAAM,iBAAiB,IAAI,WAAW,SAAS;AAAA,MAC3C,SAAS;AAAA,MACT,YAAY;AAAA,IAChB,CAAC;AACD,WAAO,eAAe,gBAAgB,UAAU;AAAA,MAC5C,OAAO;AAAA,MACP,YAAY;AAAA,IAChB,CAAC;AAGD,UAAM,yBAAyB;AAAA,MAC3B,OAAO;AAAA,MACP,6BAA6B;AAAA,MAC7B;AAAA,MACA;AAAA,MACA;AAAA,MACA,gBAAgB,IAAI,eAAe,MAAM;AAAA,MAAC,CAAC;AAAA,IAC/C,CAAC;AAAA,EACL,SAAS,OAAO;AACZ,YAAQ,KAAK,iDAAiD,KAAK;AAAA,EACvE;AACJ;AAKA,SAAS,2BAA2B;AAChC,SAAO;AAAA,IACH,wBAAwB,SAAS;AAAA,MAC7B;AAAA,IACJ;AAAA,IACA,gBAAgB,SAAS;AAAA,MACrB;AAAA,IACJ;AAAA,IACA,gBAAgB,SAAS;AAAA,MACrB;AAAA,IACJ;AAAA,EACJ;AACJ;","names":[]}
1	+ {"version":3,"sources":["../../../../src/visualBuilder/eventManager/useRevalidateFieldDataPostMessageEvent.ts"],"sourcesContent":["import { VisualBuilder } from \"..\";\nimport { extractDetailsFromCslp, isValidCslp } from \"../../cslp\";\nimport { FieldSchemaMap } from \"../utils/fieldSchemaMap\";\nimport { hideFocusOverlay } from \"../generators/generateOverlay\";\nimport { handleBuilderInteraction } from \"../listeners/mouseClick\";\n\n/*\n Revalidates field data and schema after variant linking operations.\n * Unfocuses the selected element, revalidates data, and then reselects it.\n /\nexport async function handleRevalidateFieldData(): Promise<void> {\n const focusedElement =\n VisualBuilder.VisualBuilderGlobalState.value\n .previousSelectedEditableDOM;\n const hoveredElement =\n VisualBuilder.VisualBuilderGlobalState.value.previousHoveredTargetDOM;\n\n // Store element identifiers for refocusing\n const elementCslp = focusedElement?.getAttribute(\"data-cslp\");\n const elementCslpUniqueId =\n focusedElement?.getAttribute(\"data-cslp-unique-id\") \|\| null;\n const shouldRefocus = !!focusedElement;\n\n try {\n // Step 1: Unfocus the current element\n if (shouldRefocus) {\n await unfocusElement();\n }\n\n // Step 2: Revalidate field data\n const targetElement = hoveredElement \|\| focusedElement;\n\n if (targetElement) {\n const cslp = targetElement.getAttribute(\"data-cslp\");\n if (isValidCslp(cslp)) {\n const fieldMetadata = extractDetailsFromCslp(cslp);\n\n // Try to revalidate specific field schema and data\n // Clear the entire content type schema from cache to force fresh fetch\n FieldSchemaMap.clearContentTypeSchema(\n fieldMetadata.content_type_uid\n );\n }\n }\n\n // Fallback 1: Clear all field schema cache\n FieldSchemaMap.clear();\n } catch (error) {\n console.error(\"Error handling revalidate field data:\", error);\n // Final fallback - refresh the page\n window.location.reload();\n } finally {\n // Step 3: Refocus the element if we had one focused before\n if (shouldRefocus && isValidCslp(elementCslp)) {\n await refocusElement(elementCslp, elementCslpUniqueId);\n }\n }\n}\n\n/\n Unfocuses the currently selected element and clears focus state\n /\nasync function unfocusElement(): Promise<void> {\n const { visualBuilderContainer, overlayWrapper, focusedToolbar } =\n getVisualBuilderElements();\n\n if (!visualBuilderContainer \|\| !overlayWrapper) return;\n\n const dummyResizeObserver = new ResizeObserver(() => {});\n\n // Hide focus overlay (cleanIndividualFieldResidual needs previousSelectedEditableDOM)\n hideFocusOverlay({\n visualBuilderContainer,\n visualBuilderOverlayWrapper: overlayWrapper,\n focusedToolbar,\n resizeObserver: dummyResizeObserver,\n noTrigger: true,\n });\n\n // Clear global state after cleanup\n VisualBuilder.VisualBuilderGlobalState.value.previousSelectedEditableDOM =\n null;\n VisualBuilder.VisualBuilderGlobalState.value.isFocussed = false;\n}\n\n/\n Refocuses an element by its CSLP identifier\n /\nasync function refocusElement(\n cslp: string,\n uniqueId: string \| null\n): Promise<void> {\n try {\n // Find the element (prefer unique ID, fallback to CSLP)\n const elementToRefocus =\n (uniqueId &&\n document.querySelector(\n `[data-cslp-unique-id=\"${uniqueId}\"]`\n )) \|\|\n document.querySelector(`[data-cslp=\"${cslp}\"]`);\n\n if (!elementToRefocus) return;\n\n const { visualBuilderContainer, overlayWrapper, focusedToolbar } =\n getVisualBuilderElements();\n\n if (!visualBuilderContainer \|\| !overlayWrapper) return;\n\n // Create synthetic click event\n const syntheticEvent = new MouseEvent(\"click\", {\n bubbles: true,\n cancelable: true,\n });\n Object.defineProperty(syntheticEvent, \"target\", {\n value: elementToRefocus,\n enumerable: true,\n });\n\n // Refocus using handleBuilderInteraction\n await handleBuilderInteraction({\n event: syntheticEvent,\n previousSelectedEditableDOM: null,\n visualBuilderContainer,\n overlayWrapper,\n focusedToolbar,\n resizeObserver: new ResizeObserver(() => {}),\n });\n } catch (error) {\n console.warn(\"Could not refocus element after revalidation:\", error);\n }\n}\n\n/\n Gets the main visual builder DOM elements\n */\nfunction getVisualBuilderElements() {\n return {\n visualBuilderContainer: document.querySelector(\n \".visual-builder__container\"\n ) as HTMLDivElement \| null,\n overlayWrapper: document.querySelector(\n \".visual-builder__overlay__wrapper\"\n ) as HTMLDivElement \| null,\n focusedToolbar: document.querySelector(\n \".visual-builder__focused-toolbar\"\n ) as HTMLDivElement \| null,\n };\n}\n"],"mappings":";;;AAAA,SAAS,qBAAqB;AAC9B,SAAS,wBAAwB,mBAAmB;AACpD,SAAS,sBAAsB;AAC/B,SAAS,wBAAwB;AACjC,SAAS,gCAAgC;AAMzC,eAAsB,4BAA2C;AAC7D,QAAM,iBACF,cAAc,yBAAyB,MAClC;AACT,QAAM,iBACF,cAAc,yBAAyB,MAAM;AAGjD,QAAM,cAAc,iDAAgB,aAAa;AACjD,QAAM,uBACF,iDAAgB,aAAa,2BAA0B;AAC3D,QAAM,gBAAgB,CAAC,CAAC;AAExB,MAAI;AAEA,QAAI,eAAe;AACf,YAAM,eAAe;AAAA,IACzB;AAGA,UAAM,gBAAgB,kBAAkB;AAExC,QAAI,eAAe;AACf,YAAM,OAAO,cAAc,aAAa,WAAW;AACnD,UAAI,YAAY,IAAI,GAAG;AACnB,cAAM,gBAAgB,uBAAuB,IAAI;AAIjD,uBAAe;AAAA,UACX,cAAc;AAAA,QAClB;AAAA,MACJ;AAAA,IACJ;AAGA,mBAAe,MAAM;AAAA,EACzB,SAAS,OAAO;AACZ,YAAQ,MAAM,yCAAyC,KAAK;AAE5D,WAAO,SAAS,OAAO;AAAA,EAC3B,UAAE;AAEE,QAAI,iBAAiB,YAAY,WAAW,GAAG;AAC3C,YAAM,eAAe,aAAa,mBAAmB;AAAA,IACzD;AAAA,EACJ;AACJ;AAKA,eAAe,iBAAgC;AAC3C,QAAM,EAAE,wBAAwB,gBAAgB,eAAe,IAC3D,yBAAyB;AAE7B,MAAI,CAAC,0BAA0B,CAAC,eAAgB;AAEhD,QAAM,sBAAsB,IAAI,eAAe,MAAM;AAAA,EAAC,CAAC;AAGvD,mBAAiB;AAAA,IACb;AAAA,IACA,6BAA6B;AAAA,IAC7B;AAAA,IACA,gBAAgB;AAAA,IAChB,WAAW;AAAA,EACf,CAAC;AAGD,gBAAc,yBAAyB,MAAM,8BACzC;AACJ,gBAAc,yBAAyB,MAAM,aAAa;AAC9D;AAKA,eAAe,eACX,MACA,UACa;AACb,MAAI;AAEA,UAAM,mBACD,YACG,SAAS;AAAA,MACL,yBAAyB,QAAQ;AAAA,IACrC,KACJ,SAAS,cAAc,eAAe,IAAI,IAAI;AAElD,QAAI,CAAC,iBAAkB;AAEvB,UAAM,EAAE,wBAAwB,gBAAgB,eAAe,IAC3D,yBAAyB;AAE7B,QAAI,CAAC,0BAA0B,CAAC,eAAgB;AAGhD,UAAM,iBAAiB,IAAI,WAAW,SAAS;AAAA,MAC3C,SAAS;AAAA,MACT,YAAY;AAAA,IAChB,CAAC;AACD,WAAO,eAAe,gBAAgB,UAAU;AAAA,MAC5C,OAAO;AAAA,MACP,YAAY;AAAA,IAChB,CAAC;AAGD,UAAM,yBAAyB;AAAA,MAC3B,OAAO;AAAA,MACP,6BAA6B;AAAA,MAC7B;AAAA,MACA;AAAA,MACA;AAAA,MACA,gBAAgB,IAAI,eAAe,MAAM;AAAA,MAAC,CAAC;AAAA,IAC/C,CAAC;AAAA,EACL,SAAS,OAAO;AACZ,YAAQ,KAAK,iDAAiD,KAAK;AAAA,EACvE;AACJ;AAKA,SAAS,2BAA2B;AAChC,SAAO;AAAA,IACH,wBAAwB,SAAS;AAAA,MAC7B;AAAA,IACJ;AAAA,IACA,gBAAgB,SAAS;AAAA,MACrB;AAAA,IACJ;AAAA,IACA,gBAAgB,SAAS;AAAA,MACrB;AAAA,IACJ;AAAA,EACJ;AACJ;","names":[]}

package/dist/legacy/visualBuilder/eventManager/useVariantsPostMessageEvent.cjs CHANGED Viewed

@@ -31,10 +31,14 @@ var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: tru
 var useVariantsPostMessageEvent_exports = {};
 __export(useVariantsPostMessageEvent_exports, {
   addVariantFieldClass: () => addVariantFieldClass,
+  debounceAddVariantFieldClass: () => debounceAddVariantFieldClass,
+  getHighlightVariantFieldsStatus: () => getHighlightVariantFieldsStatus,
   removeVariantFieldClass: () => removeVariantFieldClass,
   setAudienceMode: () => setAudienceMode,
+  setHighlightVariantFields: () => setHighlightVariantFields,
   setLocale: () => setLocale,
   setVariant: () => setVariant,
+  setVariantOrder: () => setVariantOrder,
   useVariantFieldsPostMessageEvent: () => useVariantFieldsPostMessageEvent
 });
 module.exports = __toCommonJS(useVariantsPostMessageEvent_exports);
@@ -43,6 +47,8 @@ var import_visualBuilder = require("../visualBuilder.style.cjs");
 var import_visualBuilderPostMessage = __toESM(require("../utils/visualBuilderPostMessage.cjs"), 1);
 var import_postMessage = require("../utils/types/postMessage.types.cjs");
 var import_fieldSchemaMap = require("../utils/fieldSchemaMap.cjs");
+var import_useRecalculateVariantDataCSLPValues = require("./useRecalculateVariantDataCSLPValues.cjs");
+var import_lodash_es = require("lodash-es");
 var import_cslpdata = require("../../cslp/cslpdata.cjs");
 function isLowerOrderVariant(variant_uid, dataCslp, variantOrder) {
   if (!variantOrder || variantOrder.length === 0) {
@@ -56,16 +62,20 @@ function isLowerOrderVariant(variant_uid, dataCslp, variantOrder) {
   }
   return indexOfCslpVariant < indexOfCmsVariant;
 }
-function addVariantFieldClass(variant_uid, highlightVariantFields, variantOrder) {
+function addVariantFieldClass(variant_uid) {
+  const variantOrder = import__.VisualBuilder.VisualBuilderGlobalState.value.variantOrder;
+  const highlightVariantFields = import__.VisualBuilder.VisualBuilderGlobalState.value.highlightVariantFields;
   const elements = document.querySelectorAll(`[data-cslp]`);
   elements.forEach((element) => {
     const dataCslp = element.getAttribute("data-cslp");
-    if (!dataCslp) return;
+    if (!(0, import_cslpdata.isValidCslp)(dataCslp)) return;
     if (dataCslp == null ? void 0 : dataCslp.includes(variant_uid)) {
-      highlightVariantFields && element.classList.add(
-        (0, import_visualBuilder.visualBuilderStyles)()["visual-builder__variant-field"]
-      );
       element.classList.add("visual-builder__variant-field");
+      if (highlightVariantFields) {
+        element.classList.add(
+          (0, import_visualBuilder.visualBuilderStyles)()["visual-builder__variant-field-outline"]
+        );
+      }
     } else if (!dataCslp.startsWith("v2:")) {
       element.classList.add("visual-builder__base-field");
     } else if (isLowerOrderVariant(variant_uid, dataCslp, variantOrder)) {
@@ -75,14 +85,19 @@ function addVariantFieldClass(variant_uid, highlightVariantFields, variantOrder)
     }
   });
 }
+var debounceAddVariantFieldClass = (0, import_lodash_es.debounce)(
+  addVariantFieldClass,
+  1e3,
+  { trailing: true }
+);
 function removeVariantFieldClass(onlyHighlighted = false) {
   if (onlyHighlighted) {
     const variantElements = document.querySelectorAll(
-      `.${(0, import_visualBuilder.visualBuilderStyles)()["visual-builder__variant-field"]}`
+      `.${(0, import_visualBuilder.visualBuilderStyles)()["visual-builder__variant-field-outline"]}`
     );
     variantElements.forEach((element) => {
       element.classList.remove(
-        (0, import_visualBuilder.visualBuilderStyles)()["visual-builder__variant-field"]
+        (0, import_visualBuilder.visualBuilderStyles)()["visual-builder__variant-field-outline"]
       );
     });
   } else {
@@ -93,7 +108,7 @@ function removeVariantFieldClass(onlyHighlighted = false) {
       element.classList.remove(
         "visual-builder__disabled-variant-field",
         "visual-builder__variant-field",
-        (0, import_visualBuilder.visualBuilderStyles)()["visual-builder__variant-field"],
+        (0, import_visualBuilder.visualBuilderStyles)()["visual-builder__variant-field-outline"],
         "visual-builder__base-field",
         "visual-builder__lower-order-variant-field"
       );
@@ -109,13 +124,43 @@ function setVariant(uid) {
 function setLocale(locale) {
   import__.VisualBuilder.VisualBuilderGlobalState.value.locale = locale;
 }
-function useVariantFieldsPostMessageEvent() {
+function setHighlightVariantFields(highlight) {
+  import__.VisualBuilder.VisualBuilderGlobalState.value.highlightVariantFields = highlight;
+}
+function setVariantOrder(variantOrder) {
+  import__.VisualBuilder.VisualBuilderGlobalState.value.variantOrder = variantOrder;
+}
+async function getHighlightVariantFieldsStatus() {
+  var _a;
+  try {
+    const result = await ((_a = import_visualBuilderPostMessage.default) == null ? void 0 : _a.send(
+      import_postMessage.VisualBuilderPostMessageEvents.GET_HIGHLIGHT_VARIANT_FIELDS_STATUS
+    ));
+    return result ?? {
+      highlightVariantFields: false
+    };
+  } catch (error) {
+    console.error("Failed to get highlight variant fields status:", error);
+    return {
+      highlightVariantFields: false
+    };
+  }
+}
+function useVariantFieldsPostMessageEvent({ isSSR }) {
   var _a, _b, _c, _d, _e;
   (_a = import_visualBuilderPostMessage.default) == null ? void 0 : _a.on(
     import_postMessage.VisualBuilderPostMessageEvents.GET_VARIANT_ID,
     (event) => {
-      setVariant(event.data.variant);
+      const selectedVariant = event.data.variant;
+      setVariant(selectedVariant);
       import_fieldSchemaMap.FieldSchemaMap.clear();
+      if (isSSR) {
+        if (selectedVariant) {
+          addVariantFieldClass(selectedVariant);
+        }
+      } else {
+        (0, import_useRecalculateVariantDataCSLPValues.updateVariantClasses)();
+      }
     }
   );
   (_b = import_visualBuilderPostMessage.default) == null ? void 0 : _b.on(
@@ -133,11 +178,11 @@ function useVariantFieldsPostMessageEvent() {
   (_d = import_visualBuilderPostMessage.default) == null ? void 0 : _d.on(
     import_postMessage.VisualBuilderPostMessageEvents.SHOW_VARIANT_FIELDS,
     (event) => {
+      setHighlightVariantFields(event.data.variant_data.highlightVariantFields);
+      setVariantOrder(event.data.variant_data.variantOrder || []);
       removeVariantFieldClass();
       addVariantFieldClass(
-        event.data.variant_data.variant,
-        event.data.variant_data.highlightVariantFields,
-        event.data.variant_data.variantOrder
+        event.data.variant_data.variant
       );
     }
   );
@@ -145,6 +190,7 @@ function useVariantFieldsPostMessageEvent() {
     import_postMessage.VisualBuilderPostMessageEvents.REMOVE_VARIANT_FIELDS,
     (event) => {
       var _a2;
+      setHighlightVariantFields(false);
       removeVariantFieldClass((_a2 = event == null ? void 0 : event.data) == null ? void 0 : _a2.onlyHighlighted);
     }
   );
@@ -152,10 +198,14 @@ function useVariantFieldsPostMessageEvent() {
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
   addVariantFieldClass,
+  debounceAddVariantFieldClass,
+  getHighlightVariantFieldsStatus,
   removeVariantFieldClass,
   setAudienceMode,
+  setHighlightVariantFields,
   setLocale,
   setVariant,
+  setVariantOrder,
   useVariantFieldsPostMessageEvent
 });
 //# sourceMappingURL=useVariantsPostMessageEvent.cjs.map