@contentstack/live-preview-utils 4.2.0 → 4.3.0

package/dist/legacy/visualBuilder/eventManager/useVariantsPostMessageEvent.cjs.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/visualBuilder/eventManager/useVariantsPostMessageEvent.ts"],"sourcesContent":["import { VisualBuilder } from \"..\";\nimport { visualBuilderStyles } from \"../visualBuilder.style\";\nimport visualBuilderPostMessage from \"../utils/visualBuilderPostMessage\";\nimport { VisualBuilderPostMessageEvents } from \"../utils/types/postMessage.types\";\nimport { FieldSchemaMap } from \"../utils/fieldSchemaMap\";\nimport { extractDetailsFromCslp } from \"../../cslp/cslpdata\";\n\ninterface VariantFieldsEvent {\n    data: {\n        variant_data: {\n            variant: string;\n            highlightVariantFields: boolean;\n            variantOrder: string[];\n        };\n    };\n}\ninterface RemoveVariantFieldsEvent {\n    data: {\n        onlyHighlighted?: boolean;\n    };\n}\n\ninterface AudienceEvent {\n    data: {\n        audienceMode: boolean;\n    };\n}\ninterface VariantEvent {\n    data: {\n        variant: string | null;\n    };\n}\n\ninterface LocaleEvent {\n    data: {\n        locale: string;\n    };\n}\n\nfunction isLowerOrderVariant(variant_uid: string, dataCslp: string, variantOrder: string[]): boolean {\n    if(!variantOrder || variantOrder.length === 0) {\n        return false;\n    }\n    const {variant: cslpVariant} = extractDetailsFromCslp(dataCslp);\n    const indexOfCmsVariant = variantOrder.lastIndexOf(variant_uid);\n    const indexOfCslpVariant = variantOrder.lastIndexOf(cslpVariant || \"\");\n    if(indexOfCslpVariant < 0) {\n        return false;\n    }\n    return indexOfCslpVariant < indexOfCmsVariant;\n}\n\nexport function addVariantFieldClass(\n    variant_uid: string,\n    highlightVariantFields: boolean,\n    variantOrder: string[]\n): void {\n    const elements = document.querySelectorAll(`[data-cslp]`);\n    elements.forEach((element) => {\n        const dataCslp = element.getAttribute(\"data-cslp\");\n        if (!dataCslp) return;\n\n        if (dataCslp?.includes(variant_uid)) {\n            highlightVariantFields &&\n                element.classList.add(\n                    visualBuilderStyles()[\"visual-builder__variant-field\"]\n                );\n            element.classList.add(\"visual-builder__variant-field\");\n        } else if (!dataCslp.startsWith(\"v2:\")) {\n            element.classList.add(\"visual-builder__base-field\");\n        } \n        else if (isLowerOrderVariant(variant_uid, dataCslp, variantOrder)) {\n            element.classList.add(\"visual-builder__variant-field\", \"visual-builder__lower-order-variant-field\");\n        }\n        else {\n            element.classList.add(\"visual-builder__disabled-variant-field\");\n        }\n    });\n}\n\nexport function removeVariantFieldClass(\n    onlyHighlighted: boolean = false\n): void {\n    if (onlyHighlighted) {\n        const variantElements = document.querySelectorAll(\n            `.${visualBuilderStyles()[\"visual-builder__variant-field\"]}`\n        );\n        variantElements.forEach((element) => {\n            element.classList.remove(\n                visualBuilderStyles()[\"visual-builder__variant-field\"]\n            );\n        });\n    } else {\n        const variantAndBaseFieldElements = document.querySelectorAll(\n            \".visual-builder__disabled-variant-field, .visual-builder__variant-field, .visual-builder__base-field, .visual-builder__lower-order-variant-field\" \n        );\n        variantAndBaseFieldElements.forEach((element) => {\n            element.classList.remove(\n                \"visual-builder__disabled-variant-field\",\n                \"visual-builder__variant-field\",\n                visualBuilderStyles()[\"visual-builder__variant-field\"],\n                \"visual-builder__base-field\",\n                \"visual-builder__lower-order-variant-field\"\n            );\n        });\n    }\n}\n\nexport function setAudienceMode(mode: boolean): void {\n    VisualBuilder.VisualBuilderGlobalState.value.audienceMode = mode;\n}\nexport function setVariant(uid: string | null): void {\n    VisualBuilder.VisualBuilderGlobalState.value.variant = uid;\n}\nexport function setLocale(locale: string): void {\n    VisualBuilder.VisualBuilderGlobalState.value.locale = locale;\n}\n\nexport function useVariantFieldsPostMessageEvent(): void {\n    visualBuilderPostMessage?.on(\n        VisualBuilderPostMessageEvents.GET_VARIANT_ID,\n        (event: VariantEvent) => {\n            setVariant(event.data.variant);\n            // clear field schema when variant is changed.\n            // this is required as we cache field schema\n            // which contain a key isUnlinkedVariant.\n            // This key can change when variant is changed,\n            // so clear the field schema cache\n            FieldSchemaMap.clear();\n        }\n    );\n    visualBuilderPostMessage?.on(\n        VisualBuilderPostMessageEvents.GET_LOCALE,\n        (event: LocaleEvent) => {\n            setLocale(event.data.locale);\n        }\n    );\n    visualBuilderPostMessage?.on(\n        VisualBuilderPostMessageEvents.SET_AUDIENCE_MODE,\n        (event: AudienceEvent) => {\n            setAudienceMode(event.data.audienceMode);\n        }\n    );\n    visualBuilderPostMessage?.on(\n        VisualBuilderPostMessageEvents.SHOW_VARIANT_FIELDS,\n        (event: VariantFieldsEvent) => {\n            removeVariantFieldClass();\n            addVariantFieldClass(\n                event.data.variant_data.variant,\n                event.data.variant_data.highlightVariantFields,\n                event.data.variant_data.variantOrder\n            );\n        }\n    );\n    visualBuilderPostMessage?.on(\n        VisualBuilderPostMessageEvents.REMOVE_VARIANT_FIELDS,\n        (event: RemoveVariantFieldsEvent) => {\n            removeVariantFieldClass(event?.data?.onlyHighlighted);\n        }\n    );\n}\n"],"mappings":"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","names":["visualBuilderPostMessage","_a"]}
+{"version":3,"sources":["../../../../src/visualBuilder/eventManager/useVariantsPostMessageEvent.ts"],"sourcesContent":["import { VisualBuilder } from \"..\";\nimport { visualBuilderStyles } from \"../visualBuilder.style\";\nimport visualBuilderPostMessage from \"../utils/visualBuilderPostMessage\";\nimport { VisualBuilderPostMessageEvents } from \"../utils/types/postMessage.types\";\nimport { FieldSchemaMap } from \"../utils/fieldSchemaMap\";\nimport { updateVariantClasses } from \"./useRecalculateVariantDataCSLPValues\";\nimport { debounce } from \"lodash-es\";\nimport { extractDetailsFromCslp, isValidCslp } from \"../../cslp/cslpdata\";\n\ninterface VariantFieldsEvent {\n    data: {\n        variant_data: {\n            variant: string;\n            highlightVariantFields: boolean;\n            variantOrder: string[];\n        };\n    };\n}\ninterface RemoveVariantFieldsEvent {\n    data: {\n        onlyHighlighted?: boolean;\n    };\n}\n\ninterface AudienceEvent {\n    data: {\n        audienceMode: boolean;\n    };\n}\ninterface VariantEvent {\n    data: {\n        variant: string | null;\n    };\n}\n\ninterface LocaleEvent {\n    data: {\n        locale: string;\n    };\n}\n\nfunction isLowerOrderVariant(variant_uid: string, dataCslp: string, variantOrder: string[]): boolean {\n    if(!variantOrder || variantOrder.length === 0) {\n        return false;\n    }\n    const {variant: cslpVariant} = extractDetailsFromCslp(dataCslp);\n    const indexOfCmsVariant = variantOrder.lastIndexOf(variant_uid);\n    const indexOfCslpVariant = variantOrder.lastIndexOf(cslpVariant || \"\");\n    if(indexOfCslpVariant < 0) {\n        return false;\n    }\n    return indexOfCslpVariant < indexOfCmsVariant;\n}\n\n\nexport function addVariantFieldClass(\n    variant_uid: string\n): void {\n    const variantOrder = VisualBuilder.VisualBuilderGlobalState.value.variantOrder;\n    const highlightVariantFields = VisualBuilder.VisualBuilderGlobalState.value.highlightVariantFields;\n    const elements = document.querySelectorAll(`[data-cslp]`);\n    elements.forEach((element) => {\n        const dataCslp = element.getAttribute(\"data-cslp\");\n        if (!isValidCslp(dataCslp)) return;\n\n        if (dataCslp?.includes(variant_uid)) {\n            element.classList.add(\"visual-builder__variant-field\");\n            if (highlightVariantFields) {\n                element.classList.add(\n                    visualBuilderStyles()[\"visual-builder__variant-field-outline\"]\n                );\n            }\n        } else if (!dataCslp.startsWith(\"v2:\")) {\n            element.classList.add(\"visual-builder__base-field\");\n        } \n        else if (isLowerOrderVariant(variant_uid, dataCslp, variantOrder)) {\n            element.classList.add(\"visual-builder__variant-field\", \"visual-builder__lower-order-variant-field\");\n        }\n        else {\n            element.classList.add(\"visual-builder__disabled-variant-field\");\n        }\n    });\n}\n\nexport const debounceAddVariantFieldClass = debounce(\n    addVariantFieldClass,\n    1000,\n    { trailing: true }\n) as (variant_uid: string) => void;\n\nexport function removeVariantFieldClass(\n    onlyHighlighted: boolean = false\n): void {\n    if (onlyHighlighted) {\n        const variantElements = document.querySelectorAll(\n            `.${visualBuilderStyles()[\"visual-builder__variant-field-outline\"]}`\n        );\n        variantElements.forEach((element) => {\n            element.classList.remove(\n                visualBuilderStyles()[\"visual-builder__variant-field-outline\"]\n            );\n        });\n    } else {\n        const variantAndBaseFieldElements = document.querySelectorAll(\n            \".visual-builder__disabled-variant-field, .visual-builder__variant-field, .visual-builder__base-field, .visual-builder__lower-order-variant-field\" \n        );\n        variantAndBaseFieldElements.forEach((element) => {\n            element.classList.remove(\n                \"visual-builder__disabled-variant-field\",\n                \"visual-builder__variant-field\",\n                visualBuilderStyles()[\"visual-builder__variant-field-outline\"],\n                \"visual-builder__base-field\",\n                \"visual-builder__lower-order-variant-field\"\n            );\n        });\n    }\n}\n\nexport function setAudienceMode(mode: boolean): void {\n    VisualBuilder.VisualBuilderGlobalState.value.audienceMode = mode;\n}\nexport function setVariant(uid: string | null): void {\n    VisualBuilder.VisualBuilderGlobalState.value.variant = uid;\n}\nexport function setLocale(locale: string): void {\n    VisualBuilder.VisualBuilderGlobalState.value.locale = locale;\n}\nexport function setHighlightVariantFields(highlight: boolean): void {\n    VisualBuilder.VisualBuilderGlobalState.value.highlightVariantFields = highlight;\n}\nexport function setVariantOrder(variantOrder: string[]): void {\n    VisualBuilder.VisualBuilderGlobalState.value.variantOrder = variantOrder;\n}\n\ninterface GetHighlightVariantFieldsStatusResponse {\n    highlightVariantFields: boolean;\n}\nexport async function getHighlightVariantFieldsStatus(): Promise<GetHighlightVariantFieldsStatusResponse> {\n    try {\n        const result = await visualBuilderPostMessage?.send<GetHighlightVariantFieldsStatusResponse>(\n            VisualBuilderPostMessageEvents.GET_HIGHLIGHT_VARIANT_FIELDS_STATUS\n        );   \n        return result ?? {\n            highlightVariantFields: false,\n        };\n    } catch (error) {\n        console.error(\"Failed to get highlight variant fields status:\", error);\n        return {\n            highlightVariantFields: false,\n        };\n    }\n}\n\nexport function useVariantFieldsPostMessageEvent({ isSSR }: { isSSR: boolean }): void {\n    visualBuilderPostMessage?.on(\n        VisualBuilderPostMessageEvents.GET_VARIANT_ID,\n        (event: VariantEvent) => {\n            const selectedVariant = event.data.variant;\n            setVariant(selectedVariant);\n            // clear field schema when variant is changed.\n            // this is required as we cache field schema\n            // which contain a key isUnlinkedVariant.\n            // This key can change when variant is changed,\n            // so clear the field schema cache\n            FieldSchemaMap.clear();\n            if (isSSR) {\n                if (selectedVariant) {\n                    addVariantFieldClass(selectedVariant);\n                }\n            } else {\n                // recalculate and apply classes\n                updateVariantClasses();\n            }\n        }\n    );\n    visualBuilderPostMessage?.on(\n        VisualBuilderPostMessageEvents.GET_LOCALE,\n        (event: LocaleEvent) => {\n            setLocale(event.data.locale);\n        }\n    );\n    visualBuilderPostMessage?.on(\n        VisualBuilderPostMessageEvents.SET_AUDIENCE_MODE,\n        (event: AudienceEvent) => {\n            setAudienceMode(event.data.audienceMode);\n        }\n    );\n    visualBuilderPostMessage?.on(\n        VisualBuilderPostMessageEvents.SHOW_VARIANT_FIELDS,\n        (event: VariantFieldsEvent) => {\n            setHighlightVariantFields(event.data.variant_data.highlightVariantFields);\n            setVariantOrder(event.data.variant_data.variantOrder || []);\n            removeVariantFieldClass();\n            addVariantFieldClass(\n                event.data.variant_data.variant\n            );\n        }\n    );\n    visualBuilderPostMessage?.on(\n        VisualBuilderPostMessageEvents.REMOVE_VARIANT_FIELDS,\n        (event: RemoveVariantFieldsEvent) => {\n            setHighlightVariantFields(false);\n            removeVariantFieldClass(event?.data?.onlyHighlighted);\n        }\n    );\n}\n"],"mappings":"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","names":["visualBuilderPostMessage","_a"]}

package/dist/legacy/visualBuilder/eventManager/useVariantsPostMessageEvent.d.cts

@@ -1,8 +1,17 @@
-declare function addVariantFieldClass(variant_uid: string, highlightVariantFields: boolean, variantOrder: string[]): void;
+declare function addVariantFieldClass(variant_uid: string): void;
+declare const debounceAddVariantFieldClass: (variant_uid: string) => void;
 declare function removeVariantFieldClass(onlyHighlighted?: boolean): void;
 declare function setAudienceMode(mode: boolean): void;
 declare function setVariant(uid: string | null): void;
 declare function setLocale(locale: string): void;
-declare function useVariantFieldsPostMessageEvent(): void;
+declare function setHighlightVariantFields(highlight: boolean): void;
+declare function setVariantOrder(variantOrder: string[]): void;
+interface GetHighlightVariantFieldsStatusResponse {
+    highlightVariantFields: boolean;
+}
+declare function getHighlightVariantFieldsStatus(): Promise<GetHighlightVariantFieldsStatusResponse>;
+declare function useVariantFieldsPostMessageEvent({ isSSR }: {
+    isSSR: boolean;
+}): void;
 
-export { addVariantFieldClass, removeVariantFieldClass, setAudienceMode, setLocale, setVariant, useVariantFieldsPostMessageEvent };
+export { addVariantFieldClass, debounceAddVariantFieldClass, getHighlightVariantFieldsStatus, removeVariantFieldClass, setAudienceMode, setHighlightVariantFields, setLocale, setVariant, setVariantOrder, useVariantFieldsPostMessageEvent };

package/dist/legacy/visualBuilder/eventManager/useVariantsPostMessageEvent.d.ts

@@ -1,8 +1,17 @@
-declare function addVariantFieldClass(variant_uid: string, highlightVariantFields: boolean, variantOrder: string[]): void;
+declare function addVariantFieldClass(variant_uid: string): void;
+declare const debounceAddVariantFieldClass: (variant_uid: string) => void;
 declare function removeVariantFieldClass(onlyHighlighted?: boolean): void;
 declare function setAudienceMode(mode: boolean): void;
 declare function setVariant(uid: string | null): void;
 declare function setLocale(locale: string): void;
-declare function useVariantFieldsPostMessageEvent(): void;
+declare function setHighlightVariantFields(highlight: boolean): void;
+declare function setVariantOrder(variantOrder: string[]): void;
+interface GetHighlightVariantFieldsStatusResponse {
+    highlightVariantFields: boolean;
+}
+declare function getHighlightVariantFieldsStatus(): Promise<GetHighlightVariantFieldsStatusResponse>;
+declare function useVariantFieldsPostMessageEvent({ isSSR }: {
+    isSSR: boolean;
+}): void;
 
-export { addVariantFieldClass, removeVariantFieldClass, setAudienceMode, setLocale, setVariant, useVariantFieldsPostMessageEvent };
+export { addVariantFieldClass, debounceAddVariantFieldClass, getHighlightVariantFieldsStatus, removeVariantFieldClass, setAudienceMode, setHighlightVariantFields, setLocale, setVariant, setVariantOrder, useVariantFieldsPostMessageEvent };

package/dist/legacy/visualBuilder/eventManager/useVariantsPostMessageEvent.js

@@ -6,7 +6,9 @@ import { visualBuilderStyles } from "../visualBuilder.style.js";
 import visualBuilderPostMessage from "../utils/visualBuilderPostMessage.js";
 import { VisualBuilderPostMessageEvents } from "../utils/types/postMessage.types.js";
 import { FieldSchemaMap } from "../utils/fieldSchemaMap.js";
-import { extractDetailsFromCslp } from "../../cslp/cslpdata.js";
+import { updateVariantClasses } from "./useRecalculateVariantDataCSLPValues.js";
+import { debounce } from "lodash-es";
+import { extractDetailsFromCslp, isValidCslp } from "../../cslp/cslpdata.js";
 function isLowerOrderVariant(variant_uid, dataCslp, variantOrder) {
   if (!variantOrder || variantOrder.length === 0) {
     return false;
@@ -19,16 +21,20 @@ function isLowerOrderVariant(variant_uid, dataCslp, variantOrder) {
   }
   return indexOfCslpVariant < indexOfCmsVariant;
 }
-function addVariantFieldClass(variant_uid, highlightVariantFields, variantOrder) {
+function addVariantFieldClass(variant_uid) {
+  const variantOrder = VisualBuilder.VisualBuilderGlobalState.value.variantOrder;
+  const highlightVariantFields = VisualBuilder.VisualBuilderGlobalState.value.highlightVariantFields;
   const elements = document.querySelectorAll(`[data-cslp]`);
   elements.forEach((element) => {
     const dataCslp = element.getAttribute("data-cslp");
-    if (!dataCslp) return;
+    if (!isValidCslp(dataCslp)) return;
     if (dataCslp == null ? void 0 : dataCslp.includes(variant_uid)) {
-      highlightVariantFields && element.classList.add(
-        visualBuilderStyles()["visual-builder__variant-field"]
-      );
       element.classList.add("visual-builder__variant-field");
+      if (highlightVariantFields) {
+        element.classList.add(
+          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)) {
@@ -38,14 +44,19 @@ function addVariantFieldClass(variant_uid, highlightVariantFields, variantOrder)
     }
   });
 }
+var debounceAddVariantFieldClass = debounce(
+  addVariantFieldClass,
+  1e3,
+  { trailing: true }
+);
 function removeVariantFieldClass(onlyHighlighted = false) {
   if (onlyHighlighted) {
     const variantElements = document.querySelectorAll(
-      `.${visualBuilderStyles()["visual-builder__variant-field"]}`
+      `.${visualBuilderStyles()["visual-builder__variant-field-outline"]}`
     );
     variantElements.forEach((element) => {
       element.classList.remove(
-        visualBuilderStyles()["visual-builder__variant-field"]
+        visualBuilderStyles()["visual-builder__variant-field-outline"]
       );
     });
   } else {
@@ -56,7 +67,7 @@ function removeVariantFieldClass(onlyHighlighted = false) {
       element.classList.remove(
         "visual-builder__disabled-variant-field",
         "visual-builder__variant-field",
-        visualBuilderStyles()["visual-builder__variant-field"],
+        visualBuilderStyles()["visual-builder__variant-field-outline"],
         "visual-builder__base-field",
         "visual-builder__lower-order-variant-field"
       );
@@ -72,13 +83,43 @@ function setVariant(uid) {
 function setLocale(locale) {
   VisualBuilder.VisualBuilderGlobalState.value.locale = locale;
 }
-function useVariantFieldsPostMessageEvent() {
+function setHighlightVariantFields(highlight) {
+  VisualBuilder.VisualBuilderGlobalState.value.highlightVariantFields = highlight;
+}
+function setVariantOrder(variantOrder) {
+  VisualBuilder.VisualBuilderGlobalState.value.variantOrder = variantOrder;
+}
+async function getHighlightVariantFieldsStatus() {
+  var _a;
+  try {
+    const result = await ((_a = visualBuilderPostMessage) == null ? void 0 : _a.send(
+      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 = visualBuilderPostMessage) == null ? void 0 : _a.on(
     VisualBuilderPostMessageEvents.GET_VARIANT_ID,
     (event) => {
-      setVariant(event.data.variant);
+      const selectedVariant = event.data.variant;
+      setVariant(selectedVariant);
       FieldSchemaMap.clear();
+      if (isSSR) {
+        if (selectedVariant) {
+          addVariantFieldClass(selectedVariant);
+        }
+      } else {
+        updateVariantClasses();
+      }
     }
   );
   (_b = visualBuilderPostMessage) == null ? void 0 : _b.on(
@@ -96,11 +137,11 @@ function useVariantFieldsPostMessageEvent() {
   (_d = visualBuilderPostMessage) == null ? void 0 : _d.on(
     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
       );
     }
   );
@@ -108,16 +149,21 @@ function useVariantFieldsPostMessageEvent() {
     VisualBuilderPostMessageEvents.REMOVE_VARIANT_FIELDS,
     (event) => {
       var _a2;
+      setHighlightVariantFields(false);
       removeVariantFieldClass((_a2 = event == null ? void 0 : event.data) == null ? void 0 : _a2.onlyHighlighted);
     }
   );
 }
 export {
   addVariantFieldClass,
+  debounceAddVariantFieldClass,
+  getHighlightVariantFieldsStatus,
   removeVariantFieldClass,
   setAudienceMode,
+  setHighlightVariantFields,
   setLocale,
   setVariant,
+  setVariantOrder,
   useVariantFieldsPostMessageEvent
 };
 //# sourceMappingURL=useVariantsPostMessageEvent.js.map

package/dist/legacy/visualBuilder/eventManager/useVariantsPostMessageEvent.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/visualBuilder/eventManager/useVariantsPostMessageEvent.ts"],"sourcesContent":["import { VisualBuilder } from \"..\";\nimport { visualBuilderStyles } from \"../visualBuilder.style\";\nimport visualBuilderPostMessage from \"../utils/visualBuilderPostMessage\";\nimport { VisualBuilderPostMessageEvents } from \"../utils/types/postMessage.types\";\nimport { FieldSchemaMap } from \"../utils/fieldSchemaMap\";\nimport { extractDetailsFromCslp } from \"../../cslp/cslpdata\";\n\ninterface VariantFieldsEvent {\n    data: {\n        variant_data: {\n            variant: string;\n            highlightVariantFields: boolean;\n            variantOrder: string[];\n        };\n    };\n}\ninterface RemoveVariantFieldsEvent {\n    data: {\n        onlyHighlighted?: boolean;\n    };\n}\n\ninterface AudienceEvent {\n    data: {\n        audienceMode: boolean;\n    };\n}\ninterface VariantEvent {\n    data: {\n        variant: string | null;\n    };\n}\n\ninterface LocaleEvent {\n    data: {\n        locale: string;\n    };\n}\n\nfunction isLowerOrderVariant(variant_uid: string, dataCslp: string, variantOrder: string[]): boolean {\n    if(!variantOrder || variantOrder.length === 0) {\n        return false;\n    }\n    const {variant: cslpVariant} = extractDetailsFromCslp(dataCslp);\n    const indexOfCmsVariant = variantOrder.lastIndexOf(variant_uid);\n    const indexOfCslpVariant = variantOrder.lastIndexOf(cslpVariant || \"\");\n    if(indexOfCslpVariant < 0) {\n        return false;\n    }\n    return indexOfCslpVariant < indexOfCmsVariant;\n}\n\nexport function addVariantFieldClass(\n    variant_uid: string,\n    highlightVariantFields: boolean,\n    variantOrder: string[]\n): void {\n    const elements = document.querySelectorAll(`[data-cslp]`);\n    elements.forEach((element) => {\n        const dataCslp = element.getAttribute(\"data-cslp\");\n        if (!dataCslp) return;\n\n        if (dataCslp?.includes(variant_uid)) {\n            highlightVariantFields &&\n                element.classList.add(\n                    visualBuilderStyles()[\"visual-builder__variant-field\"]\n                );\n            element.classList.add(\"visual-builder__variant-field\");\n        } else if (!dataCslp.startsWith(\"v2:\")) {\n            element.classList.add(\"visual-builder__base-field\");\n        } \n        else if (isLowerOrderVariant(variant_uid, dataCslp, variantOrder)) {\n            element.classList.add(\"visual-builder__variant-field\", \"visual-builder__lower-order-variant-field\");\n        }\n        else {\n            element.classList.add(\"visual-builder__disabled-variant-field\");\n        }\n    });\n}\n\nexport function removeVariantFieldClass(\n    onlyHighlighted: boolean = false\n): void {\n    if (onlyHighlighted) {\n        const variantElements = document.querySelectorAll(\n            `.${visualBuilderStyles()[\"visual-builder__variant-field\"]}`\n        );\n        variantElements.forEach((element) => {\n            element.classList.remove(\n                visualBuilderStyles()[\"visual-builder__variant-field\"]\n            );\n        });\n    } else {\n        const variantAndBaseFieldElements = document.querySelectorAll(\n            \".visual-builder__disabled-variant-field, .visual-builder__variant-field, .visual-builder__base-field, .visual-builder__lower-order-variant-field\" \n        );\n        variantAndBaseFieldElements.forEach((element) => {\n            element.classList.remove(\n                \"visual-builder__disabled-variant-field\",\n                \"visual-builder__variant-field\",\n                visualBuilderStyles()[\"visual-builder__variant-field\"],\n                \"visual-builder__base-field\",\n                \"visual-builder__lower-order-variant-field\"\n            );\n        });\n    }\n}\n\nexport function setAudienceMode(mode: boolean): void {\n    VisualBuilder.VisualBuilderGlobalState.value.audienceMode = mode;\n}\nexport function setVariant(uid: string | null): void {\n    VisualBuilder.VisualBuilderGlobalState.value.variant = uid;\n}\nexport function setLocale(locale: string): void {\n    VisualBuilder.VisualBuilderGlobalState.value.locale = locale;\n}\n\nexport function useVariantFieldsPostMessageEvent(): void {\n    visualBuilderPostMessage?.on(\n        VisualBuilderPostMessageEvents.GET_VARIANT_ID,\n        (event: VariantEvent) => {\n            setVariant(event.data.variant);\n            // clear field schema when variant is changed.\n            // this is required as we cache field schema\n            // which contain a key isUnlinkedVariant.\n            // This key can change when variant is changed,\n            // so clear the field schema cache\n            FieldSchemaMap.clear();\n        }\n    );\n    visualBuilderPostMessage?.on(\n        VisualBuilderPostMessageEvents.GET_LOCALE,\n        (event: LocaleEvent) => {\n            setLocale(event.data.locale);\n        }\n    );\n    visualBuilderPostMessage?.on(\n        VisualBuilderPostMessageEvents.SET_AUDIENCE_MODE,\n        (event: AudienceEvent) => {\n            setAudienceMode(event.data.audienceMode);\n        }\n    );\n    visualBuilderPostMessage?.on(\n        VisualBuilderPostMessageEvents.SHOW_VARIANT_FIELDS,\n        (event: VariantFieldsEvent) => {\n            removeVariantFieldClass();\n            addVariantFieldClass(\n                event.data.variant_data.variant,\n                event.data.variant_data.highlightVariantFields,\n                event.data.variant_data.variantOrder\n            );\n        }\n    );\n    visualBuilderPostMessage?.on(\n        VisualBuilderPostMessageEvents.REMOVE_VARIANT_FIELDS,\n        (event: RemoveVariantFieldsEvent) => {\n            removeVariantFieldClass(event?.data?.onlyHighlighted);\n        }\n    );\n}\n"],"mappings":"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","names":["_a"]}
+{"version":3,"sources":["../../../../src/visualBuilder/eventManager/useVariantsPostMessageEvent.ts"],"sourcesContent":["import { VisualBuilder } from \"..\";\nimport { visualBuilderStyles } from \"../visualBuilder.style\";\nimport visualBuilderPostMessage from \"../utils/visualBuilderPostMessage\";\nimport { VisualBuilderPostMessageEvents } from \"../utils/types/postMessage.types\";\nimport { FieldSchemaMap } from \"../utils/fieldSchemaMap\";\nimport { updateVariantClasses } from \"./useRecalculateVariantDataCSLPValues\";\nimport { debounce } from \"lodash-es\";\nimport { extractDetailsFromCslp, isValidCslp } from \"../../cslp/cslpdata\";\n\ninterface VariantFieldsEvent {\n    data: {\n        variant_data: {\n            variant: string;\n            highlightVariantFields: boolean;\n            variantOrder: string[];\n        };\n    };\n}\ninterface RemoveVariantFieldsEvent {\n    data: {\n        onlyHighlighted?: boolean;\n    };\n}\n\ninterface AudienceEvent {\n    data: {\n        audienceMode: boolean;\n    };\n}\ninterface VariantEvent {\n    data: {\n        variant: string | null;\n    };\n}\n\ninterface LocaleEvent {\n    data: {\n        locale: string;\n    };\n}\n\nfunction isLowerOrderVariant(variant_uid: string, dataCslp: string, variantOrder: string[]): boolean {\n    if(!variantOrder || variantOrder.length === 0) {\n        return false;\n    }\n    const {variant: cslpVariant} = extractDetailsFromCslp(dataCslp);\n    const indexOfCmsVariant = variantOrder.lastIndexOf(variant_uid);\n    const indexOfCslpVariant = variantOrder.lastIndexOf(cslpVariant || \"\");\n    if(indexOfCslpVariant < 0) {\n        return false;\n    }\n    return indexOfCslpVariant < indexOfCmsVariant;\n}\n\n\nexport function addVariantFieldClass(\n    variant_uid: string\n): void {\n    const variantOrder = VisualBuilder.VisualBuilderGlobalState.value.variantOrder;\n    const highlightVariantFields = VisualBuilder.VisualBuilderGlobalState.value.highlightVariantFields;\n    const elements = document.querySelectorAll(`[data-cslp]`);\n    elements.forEach((element) => {\n        const dataCslp = element.getAttribute(\"data-cslp\");\n        if (!isValidCslp(dataCslp)) return;\n\n        if (dataCslp?.includes(variant_uid)) {\n            element.classList.add(\"visual-builder__variant-field\");\n            if (highlightVariantFields) {\n                element.classList.add(\n                    visualBuilderStyles()[\"visual-builder__variant-field-outline\"]\n                );\n            }\n        } else if (!dataCslp.startsWith(\"v2:\")) {\n            element.classList.add(\"visual-builder__base-field\");\n        } \n        else if (isLowerOrderVariant(variant_uid, dataCslp, variantOrder)) {\n            element.classList.add(\"visual-builder__variant-field\", \"visual-builder__lower-order-variant-field\");\n        }\n        else {\n            element.classList.add(\"visual-builder__disabled-variant-field\");\n        }\n    });\n}\n\nexport const debounceAddVariantFieldClass = debounce(\n    addVariantFieldClass,\n    1000,\n    { trailing: true }\n) as (variant_uid: string) => void;\n\nexport function removeVariantFieldClass(\n    onlyHighlighted: boolean = false\n): void {\n    if (onlyHighlighted) {\n        const variantElements = document.querySelectorAll(\n            `.${visualBuilderStyles()[\"visual-builder__variant-field-outline\"]}`\n        );\n        variantElements.forEach((element) => {\n            element.classList.remove(\n                visualBuilderStyles()[\"visual-builder__variant-field-outline\"]\n            );\n        });\n    } else {\n        const variantAndBaseFieldElements = document.querySelectorAll(\n            \".visual-builder__disabled-variant-field, .visual-builder__variant-field, .visual-builder__base-field, .visual-builder__lower-order-variant-field\" \n        );\n        variantAndBaseFieldElements.forEach((element) => {\n            element.classList.remove(\n                \"visual-builder__disabled-variant-field\",\n                \"visual-builder__variant-field\",\n                visualBuilderStyles()[\"visual-builder__variant-field-outline\"],\n                \"visual-builder__base-field\",\n                \"visual-builder__lower-order-variant-field\"\n            );\n        });\n    }\n}\n\nexport function setAudienceMode(mode: boolean): void {\n    VisualBuilder.VisualBuilderGlobalState.value.audienceMode = mode;\n}\nexport function setVariant(uid: string | null): void {\n    VisualBuilder.VisualBuilderGlobalState.value.variant = uid;\n}\nexport function setLocale(locale: string): void {\n    VisualBuilder.VisualBuilderGlobalState.value.locale = locale;\n}\nexport function setHighlightVariantFields(highlight: boolean): void {\n    VisualBuilder.VisualBuilderGlobalState.value.highlightVariantFields = highlight;\n}\nexport function setVariantOrder(variantOrder: string[]): void {\n    VisualBuilder.VisualBuilderGlobalState.value.variantOrder = variantOrder;\n}\n\ninterface GetHighlightVariantFieldsStatusResponse {\n    highlightVariantFields: boolean;\n}\nexport async function getHighlightVariantFieldsStatus(): Promise<GetHighlightVariantFieldsStatusResponse> {\n    try {\n        const result = await visualBuilderPostMessage?.send<GetHighlightVariantFieldsStatusResponse>(\n            VisualBuilderPostMessageEvents.GET_HIGHLIGHT_VARIANT_FIELDS_STATUS\n        );   \n        return result ?? {\n            highlightVariantFields: false,\n        };\n    } catch (error) {\n        console.error(\"Failed to get highlight variant fields status:\", error);\n        return {\n            highlightVariantFields: false,\n        };\n    }\n}\n\nexport function useVariantFieldsPostMessageEvent({ isSSR }: { isSSR: boolean }): void {\n    visualBuilderPostMessage?.on(\n        VisualBuilderPostMessageEvents.GET_VARIANT_ID,\n        (event: VariantEvent) => {\n            const selectedVariant = event.data.variant;\n            setVariant(selectedVariant);\n            // clear field schema when variant is changed.\n            // this is required as we cache field schema\n            // which contain a key isUnlinkedVariant.\n            // This key can change when variant is changed,\n            // so clear the field schema cache\n            FieldSchemaMap.clear();\n            if (isSSR) {\n                if (selectedVariant) {\n                    addVariantFieldClass(selectedVariant);\n                }\n            } else {\n                // recalculate and apply classes\n                updateVariantClasses();\n            }\n        }\n    );\n    visualBuilderPostMessage?.on(\n        VisualBuilderPostMessageEvents.GET_LOCALE,\n        (event: LocaleEvent) => {\n            setLocale(event.data.locale);\n        }\n    );\n    visualBuilderPostMessage?.on(\n        VisualBuilderPostMessageEvents.SET_AUDIENCE_MODE,\n        (event: AudienceEvent) => {\n            setAudienceMode(event.data.audienceMode);\n        }\n    );\n    visualBuilderPostMessage?.on(\n        VisualBuilderPostMessageEvents.SHOW_VARIANT_FIELDS,\n        (event: VariantFieldsEvent) => {\n            setHighlightVariantFields(event.data.variant_data.highlightVariantFields);\n            setVariantOrder(event.data.variant_data.variantOrder || []);\n            removeVariantFieldClass();\n            addVariantFieldClass(\n                event.data.variant_data.variant\n            );\n        }\n    );\n    visualBuilderPostMessage?.on(\n        VisualBuilderPostMessageEvents.REMOVE_VARIANT_FIELDS,\n        (event: RemoveVariantFieldsEvent) => {\n            setHighlightVariantFields(false);\n            removeVariantFieldClass(event?.data?.onlyHighlighted);\n        }\n    );\n}\n"],"mappings":"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","names":["_a"]}

package/dist/legacy/visualBuilder/generators/generateEmptyBlock.cjs

@@ -32,7 +32,7 @@ var import_jsx_runtime = require("preact/jsx-runtime");
 async function generateEmptyBlocks(emptyBlockParents) {
   for (const emptyBlockParent of emptyBlockParents) {
     const cslpData = emptyBlockParent.getAttribute("data-cslp");
-    if (!cslpData) {
+    if (!(0, import_cslp.isValidCslp)(cslpData)) {
       return;
     }
     const fieldMetadata = (0, import_cslp.extractDetailsFromCslp)(cslpData);

package/dist/legacy/visualBuilder/generators/generateEmptyBlock.cjs.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/visualBuilder/generators/generateEmptyBlock.tsx"],"sourcesContent":["import { hydrate } from \"preact\";\nimport { EmptyBlock } from \"../components/emptyBlock\";\nimport { extractDetailsFromCslp } from \"../../cslp\";\nimport { FieldSchemaMap } from \"../utils/fieldSchemaMap\";\n\nexport async function generateEmptyBlocks(\n    emptyBlockParents: Element[] | []\n): Promise<void> {\n    for (const emptyBlockParent of emptyBlockParents) {\n        const cslpData = emptyBlockParent.getAttribute(\"data-cslp\");\n        if (!cslpData) {\n            return;\n        }\n        const fieldMetadata = extractDetailsFromCslp(cslpData);\n\n        const fieldSchema = await FieldSchemaMap.getFieldSchema(\n            fieldMetadata.content_type_uid,\n            fieldMetadata.fieldPath\n        );\n        \n        if(!fieldSchema){\n            return;\n        }\n\n        hydrate(\n            <EmptyBlock\n                details={{\n                    fieldSchema,\n                    fieldMetadata,\n                }}\n            />,\n            emptyBlockParent\n        );\n    }\n}\n\nexport function removeEmptyBlocks(emptyBlockParents: Element[] | []): void {\n    emptyBlockParents?.forEach((emptyBlockParent) => {\n        const emptyBlock = emptyBlockParent.querySelector(\n            \".visual-builder__empty-block\"\n        );\n\n        if (emptyBlock) {\n            emptyBlock.remove();\n        }\n    });\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,oBAAwB;AACxB,wBAA2B;AAC3B,kBAAuC;AACvC,4BAA+B;AAsBnB;AApBZ,eAAsB,oBAClB,mBACa;AACb,aAAW,oBAAoB,mBAAmB;AAC9C,UAAM,WAAW,iBAAiB,aAAa,WAAW;AAC1D,QAAI,CAAC,UAAU;AACX;AAAA,IACJ;AACA,UAAM,oBAAgB,oCAAuB,QAAQ;AAErD,UAAM,cAAc,MAAM,qCAAe;AAAA,MACrC,cAAc;AAAA,MACd,cAAc;AAAA,IAClB;AAEA,QAAG,CAAC,aAAY;AACZ;AAAA,IACJ;AAEA;AAAA,MACI;AAAA,QAAC;AAAA;AAAA,UACG,SAAS;AAAA,YACL;AAAA,YACA;AAAA,UACJ;AAAA;AAAA,MACJ;AAAA,MACA;AAAA,IACJ;AAAA,EACJ;AACJ;AAEO,SAAS,kBAAkB,mBAAyC;AACvE,yDAAmB,QAAQ,CAAC,qBAAqB;AAC7C,UAAM,aAAa,iBAAiB;AAAA,MAChC;AAAA,IACJ;AAEA,QAAI,YAAY;AACZ,iBAAW,OAAO;AAAA,IACtB;AAAA,EACJ;AACJ;","names":[]}
+{"version":3,"sources":["../../../../src/visualBuilder/generators/generateEmptyBlock.tsx"],"sourcesContent":["import { hydrate } from \"preact\";\nimport React from \"preact/compat\";\nimport { EmptyBlock } from \"../components/emptyBlock\";\nimport { extractDetailsFromCslp, isValidCslp } from \"../../cslp\";\nimport { FieldSchemaMap } from \"../utils/fieldSchemaMap\";\n\nexport async function generateEmptyBlocks(\n    emptyBlockParents: Element[] | []\n): Promise<void> {\n    for (const emptyBlockParent of emptyBlockParents) {\n        const cslpData = emptyBlockParent.getAttribute(\"data-cslp\");\n        if (!isValidCslp(cslpData)) {\n            return;\n        }\n        const fieldMetadata = extractDetailsFromCslp(cslpData);\n\n        const fieldSchema = await FieldSchemaMap.getFieldSchema(\n            fieldMetadata.content_type_uid,\n            fieldMetadata.fieldPath\n        );\n        \n        if(!fieldSchema){\n            return;\n        }\n\n        hydrate(\n            <EmptyBlock\n                details={{\n                    fieldSchema,\n                    fieldMetadata,\n                }}\n            />,\n            emptyBlockParent\n        );\n    }\n}\n\nexport function removeEmptyBlocks(emptyBlockParents: Element[] | []): void {\n    emptyBlockParents?.forEach((emptyBlockParent) => {\n        const emptyBlock = emptyBlockParent.querySelector(\n            \".visual-builder__empty-block\"\n        );\n\n        if (emptyBlock) {\n            emptyBlock.remove();\n        }\n    });\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,oBAAwB;AAExB,wBAA2B;AAC3B,kBAAoD;AACpD,4BAA+B;AAsBnB;AApBZ,eAAsB,oBAClB,mBACa;AACb,aAAW,oBAAoB,mBAAmB;AAC9C,UAAM,WAAW,iBAAiB,aAAa,WAAW;AAC1D,QAAI,KAAC,yBAAY,QAAQ,GAAG;AACxB;AAAA,IACJ;AACA,UAAM,oBAAgB,oCAAuB,QAAQ;AAErD,UAAM,cAAc,MAAM,qCAAe;AAAA,MACrC,cAAc;AAAA,MACd,cAAc;AAAA,IAClB;AAEA,QAAG,CAAC,aAAY;AACZ;AAAA,IACJ;AAEA;AAAA,MACI;AAAA,QAAC;AAAA;AAAA,UACG,SAAS;AAAA,YACL;AAAA,YACA;AAAA,UACJ;AAAA;AAAA,MACJ;AAAA,MACA;AAAA,IACJ;AAAA,EACJ;AACJ;AAEO,SAAS,kBAAkB,mBAAyC;AACvE,yDAAmB,QAAQ,CAAC,qBAAqB;AAC7C,UAAM,aAAa,iBAAiB;AAAA,MAChC;AAAA,IACJ;AAEA,QAAI,YAAY;AACZ,iBAAW,OAAO;AAAA,IACtB;AAAA,EACJ;AACJ;","names":[]}

package/dist/legacy/visualBuilder/generators/generateEmptyBlock.js

@@ -3,13 +3,13 @@ import "../../chunk-5WRI5ZAA.js";
 // src/visualBuilder/generators/generateEmptyBlock.tsx
 import { hydrate } from "preact";
 import { EmptyBlock } from "../components/emptyBlock.js";
-import { extractDetailsFromCslp } from "../../cslp/index.js";
+import { extractDetailsFromCslp, isValidCslp } from "../../cslp/index.js";
 import { FieldSchemaMap } from "../utils/fieldSchemaMap.js";
 import { jsx } from "preact/jsx-runtime";
 async function generateEmptyBlocks(emptyBlockParents) {
   for (const emptyBlockParent of emptyBlockParents) {
     const cslpData = emptyBlockParent.getAttribute("data-cslp");
-    if (!cslpData) {
+    if (!isValidCslp(cslpData)) {
       return;
     }
     const fieldMetadata = extractDetailsFromCslp(cslpData);

package/dist/legacy/visualBuilder/generators/generateEmptyBlock.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/visualBuilder/generators/generateEmptyBlock.tsx"],"sourcesContent":["import { hydrate } from \"preact\";\nimport { EmptyBlock } from \"../components/emptyBlock\";\nimport { extractDetailsFromCslp } from \"../../cslp\";\nimport { FieldSchemaMap } from \"../utils/fieldSchemaMap\";\n\nexport async function generateEmptyBlocks(\n    emptyBlockParents: Element[] | []\n): Promise<void> {\n    for (const emptyBlockParent of emptyBlockParents) {\n        const cslpData = emptyBlockParent.getAttribute(\"data-cslp\");\n        if (!cslpData) {\n            return;\n        }\n        const fieldMetadata = extractDetailsFromCslp(cslpData);\n\n        const fieldSchema = await FieldSchemaMap.getFieldSchema(\n            fieldMetadata.content_type_uid,\n            fieldMetadata.fieldPath\n        );\n        \n        if(!fieldSchema){\n            return;\n        }\n\n        hydrate(\n            <EmptyBlock\n                details={{\n                    fieldSchema,\n                    fieldMetadata,\n                }}\n            />,\n            emptyBlockParent\n        );\n    }\n}\n\nexport function removeEmptyBlocks(emptyBlockParents: Element[] | []): void {\n    emptyBlockParents?.forEach((emptyBlockParent) => {\n        const emptyBlock = emptyBlockParent.querySelector(\n            \".visual-builder__empty-block\"\n        );\n\n        if (emptyBlock) {\n            emptyBlock.remove();\n        }\n    });\n}\n"],"mappings":";;;AAAA,SAAS,eAAe;AACxB,SAAS,kBAAkB;AAC3B,SAAS,8BAA8B;AACvC,SAAS,sBAAsB;AAsBnB;AApBZ,eAAsB,oBAClB,mBACa;AACb,aAAW,oBAAoB,mBAAmB;AAC9C,UAAM,WAAW,iBAAiB,aAAa,WAAW;AAC1D,QAAI,CAAC,UAAU;AACX;AAAA,IACJ;AACA,UAAM,gBAAgB,uBAAuB,QAAQ;AAErD,UAAM,cAAc,MAAM,eAAe;AAAA,MACrC,cAAc;AAAA,MACd,cAAc;AAAA,IAClB;AAEA,QAAG,CAAC,aAAY;AACZ;AAAA,IACJ;AAEA;AAAA,MACI;AAAA,QAAC;AAAA;AAAA,UACG,SAAS;AAAA,YACL;AAAA,YACA;AAAA,UACJ;AAAA;AAAA,MACJ;AAAA,MACA;AAAA,IACJ;AAAA,EACJ;AACJ;AAEO,SAAS,kBAAkB,mBAAyC;AACvE,yDAAmB,QAAQ,CAAC,qBAAqB;AAC7C,UAAM,aAAa,iBAAiB;AAAA,MAChC;AAAA,IACJ;AAEA,QAAI,YAAY;AACZ,iBAAW,OAAO;AAAA,IACtB;AAAA,EACJ;AACJ;","names":[]}
+{"version":3,"sources":["../../../../src/visualBuilder/generators/generateEmptyBlock.tsx"],"sourcesContent":["import { hydrate } from \"preact\";\nimport React from \"preact/compat\";\nimport { EmptyBlock } from \"../components/emptyBlock\";\nimport { extractDetailsFromCslp, isValidCslp } from \"../../cslp\";\nimport { FieldSchemaMap } from \"../utils/fieldSchemaMap\";\n\nexport async function generateEmptyBlocks(\n    emptyBlockParents: Element[] | []\n): Promise<void> {\n    for (const emptyBlockParent of emptyBlockParents) {\n        const cslpData = emptyBlockParent.getAttribute(\"data-cslp\");\n        if (!isValidCslp(cslpData)) {\n            return;\n        }\n        const fieldMetadata = extractDetailsFromCslp(cslpData);\n\n        const fieldSchema = await FieldSchemaMap.getFieldSchema(\n            fieldMetadata.content_type_uid,\n            fieldMetadata.fieldPath\n        );\n        \n        if(!fieldSchema){\n            return;\n        }\n\n        hydrate(\n            <EmptyBlock\n                details={{\n                    fieldSchema,\n                    fieldMetadata,\n                }}\n            />,\n            emptyBlockParent\n        );\n    }\n}\n\nexport function removeEmptyBlocks(emptyBlockParents: Element[] | []): void {\n    emptyBlockParents?.forEach((emptyBlockParent) => {\n        const emptyBlock = emptyBlockParent.querySelector(\n            \".visual-builder__empty-block\"\n        );\n\n        if (emptyBlock) {\n            emptyBlock.remove();\n        }\n    });\n}\n"],"mappings":";;;AAAA,SAAS,eAAe;AAExB,SAAS,kBAAkB;AAC3B,SAAS,wBAAwB,mBAAmB;AACpD,SAAS,sBAAsB;AAsBnB;AApBZ,eAAsB,oBAClB,mBACa;AACb,aAAW,oBAAoB,mBAAmB;AAC9C,UAAM,WAAW,iBAAiB,aAAa,WAAW;AAC1D,QAAI,CAAC,YAAY,QAAQ,GAAG;AACxB;AAAA,IACJ;AACA,UAAM,gBAAgB,uBAAuB,QAAQ;AAErD,UAAM,cAAc,MAAM,eAAe;AAAA,MACrC,cAAc;AAAA,MACd,cAAc;AAAA,IAClB;AAEA,QAAG,CAAC,aAAY;AACZ;AAAA,IACJ;AAEA;AAAA,MACI;AAAA,QAAC;AAAA;AAAA,UACG,SAAS;AAAA,YACL;AAAA,YACA;AAAA,UACJ;AAAA;AAAA,MACJ;AAAA,MACA;AAAA,IACJ;AAAA,EACJ;AACJ;AAEO,SAAS,kBAAkB,mBAAyC;AACvE,yDAAmB,QAAQ,CAAC,qBAAqB;AAC7C,UAAM,aAAa,iBAAiB;AAAA,MAChC;AAAA,IACJ;AAEA,QAAI,YAAY;AACZ,iBAAW,OAAO;AAAA,IACtB;AAAA,EACJ;AACJ;","names":[]}

package/dist/legacy/visualBuilder/generators/generateHighlightedComment.cjs

@@ -42,13 +42,14 @@ var import_preact = require("preact");
 var import_preact2 = require("preact");
 var import_HighlightedCommentIcon = __toESM(require("../components/HighlightedCommentIcon.cjs"), 1);
 var import_goober = require("goober");
+var import_cslp = require("../../cslp/index.cjs");
 var highlighCommentOffset = 25;
 function highlightCommentIconOnCanvas(payload) {
   const uniquePaths = {};
   payload.forEach((data) => {
     var _a;
     const cslpValue = (_a = data == null ? void 0 : data.fieldMetadata) == null ? void 0 : _a.cslpValue;
-    if (!cslpValue || uniquePaths[cslpValue]) {
+    if (!(0, import_cslp.isValidCslp)(cslpValue) || uniquePaths[cslpValue]) {
       return;
     }
     uniquePaths[cslpValue] = true;

package/dist/legacy/visualBuilder/generators/generateHighlightedComment.cjs.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/visualBuilder/generators/generateHighlightedComment.tsx"],"sourcesContent":["import { h, VNode } from \"preact\"; // Explicitly import VNode from Preact\nimport { render } from \"preact\";\nimport HighlightedCommentIcon from \"../components/HighlightedCommentIcon\";\nimport { css } from \"goober\";\nimport React from \"preact/compat\";\nimport { IHighlightCommentData } from \"../eventManager/useHighlightCommentIcon\";\n\n/**\n * Inserts highlighted comment icons based on an array of paths.\n *\n * This function locates elements in the DOM based on the `fieldMetadata.cslpValue`,\n * and appends a comment icon near each matching element.\n *\n * @param payload - Array of comment data with field metadata, schema, absolutePath and discussion ID.\n */\nconst highlighCommentOffset = 25;\n\nexport function highlightCommentIconOnCanvas(\n    payload: IHighlightCommentData[]\n): void {\n    const uniquePaths: { [key: string]: boolean } = {}; // Using object for uniqueness\n\n    payload.forEach((data) => {\n        const cslpValue = data?.fieldMetadata?.cslpValue;\n\n        // Check if the cslpValue is already in the Object\n        if (!cslpValue || uniquePaths[cslpValue]) {\n            return; // Skip if the value is not unique\n        }\n\n        uniquePaths[cslpValue] = true; // Mark it as processed\n\n        const element = document.querySelector(`[data-cslp=\"${cslpValue}\"]`);\n        if (element && element instanceof HTMLElement) {\n            const { top, left } = element.getBoundingClientRect();\n\n            const iconContainer = document.createElement(\"div\");\n            iconContainer.setAttribute(\"field-path\", cslpValue);\n\n            iconContainer.style.position = \"fixed\";\n            iconContainer.style.top = `${top - highlighCommentOffset}px`;\n            iconContainer.style.left = `${left - highlighCommentOffset}px`;\n            iconContainer.style.zIndex = \"900\";\n            iconContainer.style.cursor = \"pointer\";\n            iconContainer.className = \"highlighted-comment collab-icon\";\n\n            // Render the HighlightedCommentIcon using Preact's render method\n            render(\n                h(HighlightedCommentIcon, { data }), // Use h directly with Preact\n                iconContainer\n            );\n\n            const visualBuilderContainer = document.querySelector(\n                \".visual-builder__container\"\n            );\n            if (visualBuilderContainer) {\n                let highlightCommentWrapper =\n                    visualBuilderContainer.querySelector(\n                        \".visual-builder__highlighted-comment-wrapper\"\n                    );\n                if (!highlightCommentWrapper) {\n                    highlightCommentWrapper = document.createElement(\"div\");\n                    highlightCommentWrapper.className =\n                        \"visual-builder__highlighted-comment-wrapper\";\n                    visualBuilderContainer.appendChild(highlightCommentWrapper);\n                }\n                highlightCommentWrapper.appendChild(iconContainer);\n            }\n        }\n    });\n}\n\n/**\n * Update Highlighted comment position , whenever scroll or resize happen.\n */\n\nexport function updateHighlightedCommentIconPosition() {\n    // Query all elements with the .highlighted-comment class\n    const icons = document.querySelectorAll(\".highlighted-comment\");\n\n    icons.forEach((icon) => {\n        if (icon && icon instanceof HTMLElement) {\n            // Get the field-path attribute from the icon container\n            const path = icon.getAttribute(\"field-path\");\n            if (path) {\n                // Query the target element using the path\n                const targetElement = document.querySelector(\n                    `[data-cslp=\"${path}\"]`\n                );\n                if (targetElement && targetElement instanceof HTMLElement) {\n                    // Get the target element's position relative to the viewport\n                    const { top, left } = targetElement.getBoundingClientRect();\n\n                    // Update the position of the icon container\n                    icon.style.top = `${top - highlighCommentOffset}px`; // Adjust based on the target element's top\n                    icon.style.left = `${left - highlighCommentOffset}px`; // Adjust based on the target element's left\n                }\n            }\n        }\n    });\n}\n\n/**\n * Removes the first highlighted comment icon based on an array of paths.\n *\n * @param pathsToRemove - Array of field-paths to remove.\n */\nexport function removeHighlightedCommentIcon(pathToRemove: string): void {\n    // Loop through each path in the array\n    const iconToRemove = document.querySelectorAll(\n        `.highlighted-comment[field-path=\"${pathToRemove}\"]`\n    );\n    iconToRemove?.forEach((icon) => icon?.remove());\n}\n\nexport function removeAllHighlightedCommentIcons(): void {\n    const icons = document.querySelectorAll(\".highlighted-comment\");\n    icons?.forEach((icon) => icon?.remove());\n}\n\n// Define a hidden class in goober\nconst hiddenClass = css`\n    display: none;\n`;\n\n/**\n * Toggle display style of a specific highlighted comment icon.\n *\n * @param path - The data-cslp attribute of the element whose corresponding highlighted comment icon should be toggled.\n * @param shouldShow - Boolean value to determine whether to show or hide the icon.\n * If true, the icon will be displayed. If false, the icon will be hidden.\n */\nexport function toggleHighlightedCommentIconDisplay(\n    path: string,\n    shouldShow: boolean\n): void {\n    const icons = document.querySelectorAll<HTMLElement>(\n        `.highlighted-comment[field-path=\"${path}\"]`\n    );\n\n    icons.forEach((icon) => {\n        if (shouldShow) {\n            icon.classList.remove(hiddenClass); // Show the element\n        } else {\n            icon.classList.add(hiddenClass); // Hide the element using goober's hidden class\n        }\n    });\n}\n\n/**\n * Show all .highlighted-comment icons that have the hiddenClass applied.\n */\nexport function showAllHiddenHighlightedCommentIcons(): void {\n    // Query all elements that have both .highlighted-comment and hiddenClass\n    const hiddenIcons = document.querySelectorAll<HTMLElement>(\n        `.highlighted-comment.${hiddenClass}`\n    );\n\n    // Loop through each hidden icon and remove the hiddenClass\n    hiddenIcons.forEach((icon) => {\n        icon.classList.remove(hiddenClass); // Remove the hiddenClass to show the icon\n    });\n}\n"],"mappings":"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","names":["import_preact","HighlightedCommentIcon"]}
+{"version":3,"sources":["../../../../src/visualBuilder/generators/generateHighlightedComment.tsx"],"sourcesContent":["import { h, VNode } from \"preact\"; // Explicitly import VNode from Preact\nimport { render } from \"preact\";\nimport HighlightedCommentIcon from \"../components/HighlightedCommentIcon\";\nimport { css } from \"goober\";\nimport React from \"preact/compat\";\nimport { IHighlightCommentData } from \"../eventManager/useHighlightCommentIcon\";\nimport { isValidCslp } from \"../../cslp\";\n\n/**\n * Inserts highlighted comment icons based on an array of paths.\n *\n * This function locates elements in the DOM based on the `fieldMetadata.cslpValue`,\n * and appends a comment icon near each matching element.\n *\n * @param payload - Array of comment data with field metadata, schema, absolutePath and discussion ID.\n */\nconst highlighCommentOffset = 25;\n\nexport function highlightCommentIconOnCanvas(\n    payload: IHighlightCommentData[]\n): void {\n    const uniquePaths: { [key: string]: boolean } = {}; // Using object for uniqueness\n\n    payload.forEach((data) => {\n        const cslpValue = data?.fieldMetadata?.cslpValue;\n\n        // Check if the cslpValue is already in the Object\n        if (!isValidCslp(cslpValue) || uniquePaths[cslpValue]) {\n            return; // Skip if the value is not unique\n        }\n\n        uniquePaths[cslpValue] = true; // Mark it as processed\n\n        const element = document.querySelector(`[data-cslp=\"${cslpValue}\"]`);\n        if (element && element instanceof HTMLElement) {\n            const { top, left } = element.getBoundingClientRect();\n\n            const iconContainer = document.createElement(\"div\");\n            iconContainer.setAttribute(\"field-path\", cslpValue);\n\n            iconContainer.style.position = \"fixed\";\n            iconContainer.style.top = `${top - highlighCommentOffset}px`;\n            iconContainer.style.left = `${left - highlighCommentOffset}px`;\n            iconContainer.style.zIndex = \"900\";\n            iconContainer.style.cursor = \"pointer\";\n            iconContainer.className = \"highlighted-comment collab-icon\";\n\n            // Render the HighlightedCommentIcon using Preact's render method\n            render(\n                h(HighlightedCommentIcon, { data }), // Use h directly with Preact\n                iconContainer\n            );\n\n            const visualBuilderContainer = document.querySelector(\n                \".visual-builder__container\"\n            );\n            if (visualBuilderContainer) {\n                let highlightCommentWrapper =\n                    visualBuilderContainer.querySelector(\n                        \".visual-builder__highlighted-comment-wrapper\"\n                    );\n                if (!highlightCommentWrapper) {\n                    highlightCommentWrapper = document.createElement(\"div\");\n                    highlightCommentWrapper.className =\n                        \"visual-builder__highlighted-comment-wrapper\";\n                    visualBuilderContainer.appendChild(highlightCommentWrapper);\n                }\n                highlightCommentWrapper.appendChild(iconContainer);\n            }\n        }\n    });\n}\n\n/**\n * Update Highlighted comment position , whenever scroll or resize happen.\n */\n\nexport function updateHighlightedCommentIconPosition() {\n    // Query all elements with the .highlighted-comment class\n    const icons = document.querySelectorAll(\".highlighted-comment\");\n\n    icons.forEach((icon) => {\n        if (icon && icon instanceof HTMLElement) {\n            // Get the field-path attribute from the icon container\n            const path = icon.getAttribute(\"field-path\");\n            if (path) {\n                // Query the target element using the path\n                const targetElement = document.querySelector(\n                    `[data-cslp=\"${path}\"]`\n                );\n                if (targetElement && targetElement instanceof HTMLElement) {\n                    // Get the target element's position relative to the viewport\n                    const { top, left } = targetElement.getBoundingClientRect();\n\n                    // Update the position of the icon container\n                    icon.style.top = `${top - highlighCommentOffset}px`; // Adjust based on the target element's top\n                    icon.style.left = `${left - highlighCommentOffset}px`; // Adjust based on the target element's left\n                }\n            }\n        }\n    });\n}\n\n/**\n * Removes the first highlighted comment icon based on an array of paths.\n *\n * @param pathsToRemove - Array of field-paths to remove.\n */\nexport function removeHighlightedCommentIcon(pathToRemove: string): void {\n    // Loop through each path in the array\n    const iconToRemove = document.querySelectorAll(\n        `.highlighted-comment[field-path=\"${pathToRemove}\"]`\n    );\n    iconToRemove?.forEach((icon) => icon?.remove());\n}\n\nexport function removeAllHighlightedCommentIcons(): void {\n    const icons = document.querySelectorAll(\".highlighted-comment\");\n    icons?.forEach((icon) => icon?.remove());\n}\n\n// Define a hidden class in goober\nconst hiddenClass = css`\n    display: none;\n`;\n\n/**\n * Toggle display style of a specific highlighted comment icon.\n *\n * @param path - The data-cslp attribute of the element whose corresponding highlighted comment icon should be toggled.\n * @param shouldShow - Boolean value to determine whether to show or hide the icon.\n * If true, the icon will be displayed. If false, the icon will be hidden.\n */\nexport function toggleHighlightedCommentIconDisplay(\n    path: string,\n    shouldShow: boolean\n): void {\n    const icons = document.querySelectorAll<HTMLElement>(\n        `.highlighted-comment[field-path=\"${path}\"]`\n    );\n\n    icons.forEach((icon) => {\n        if (shouldShow) {\n            icon.classList.remove(hiddenClass); // Show the element\n        } else {\n            icon.classList.add(hiddenClass); // Hide the element using goober's hidden class\n        }\n    });\n}\n\n/**\n * Show all .highlighted-comment icons that have the hiddenClass applied.\n */\nexport function showAllHiddenHighlightedCommentIcons(): void {\n    // Query all elements that have both .highlighted-comment and hiddenClass\n    const hiddenIcons = document.querySelectorAll<HTMLElement>(\n        `.highlighted-comment.${hiddenClass}`\n    );\n\n    // Loop through each hidden icon and remove the hiddenClass\n    hiddenIcons.forEach((icon) => {\n        icon.classList.remove(hiddenClass); // Remove the hiddenClass to show the icon\n    });\n}\n"],"mappings":"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","names":["import_preact","HighlightedCommentIcon"]}

package/dist/legacy/visualBuilder/generators/generateHighlightedComment.js

@@ -5,13 +5,14 @@ import { h } from "preact";
 import { render } from "preact";
 import HighlightedCommentIcon from "../components/HighlightedCommentIcon.js";
 import { css } from "goober";
+import { isValidCslp } from "../../cslp/index.js";
 var highlighCommentOffset = 25;
 function highlightCommentIconOnCanvas(payload) {
   const uniquePaths = {};
   payload.forEach((data) => {
     var _a;
     const cslpValue = (_a = data == null ? void 0 : data.fieldMetadata) == null ? void 0 : _a.cslpValue;
-    if (!cslpValue || uniquePaths[cslpValue]) {
+    if (!isValidCslp(cslpValue) || uniquePaths[cslpValue]) {
       return;
     }
     uniquePaths[cslpValue] = true;

package/dist/legacy/visualBuilder/generators/generateHighlightedComment.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/visualBuilder/generators/generateHighlightedComment.tsx"],"sourcesContent":["import { h, VNode } from \"preact\"; // Explicitly import VNode from Preact\nimport { render } from \"preact\";\nimport HighlightedCommentIcon from \"../components/HighlightedCommentIcon\";\nimport { css } from \"goober\";\nimport React from \"preact/compat\";\nimport { IHighlightCommentData } from \"../eventManager/useHighlightCommentIcon\";\n\n/**\n * Inserts highlighted comment icons based on an array of paths.\n *\n * This function locates elements in the DOM based on the `fieldMetadata.cslpValue`,\n * and appends a comment icon near each matching element.\n *\n * @param payload - Array of comment data with field metadata, schema, absolutePath and discussion ID.\n */\nconst highlighCommentOffset = 25;\n\nexport function highlightCommentIconOnCanvas(\n    payload: IHighlightCommentData[]\n): void {\n    const uniquePaths: { [key: string]: boolean } = {}; // Using object for uniqueness\n\n    payload.forEach((data) => {\n        const cslpValue = data?.fieldMetadata?.cslpValue;\n\n        // Check if the cslpValue is already in the Object\n        if (!cslpValue || uniquePaths[cslpValue]) {\n            return; // Skip if the value is not unique\n        }\n\n        uniquePaths[cslpValue] = true; // Mark it as processed\n\n        const element = document.querySelector(`[data-cslp=\"${cslpValue}\"]`);\n        if (element && element instanceof HTMLElement) {\n            const { top, left } = element.getBoundingClientRect();\n\n            const iconContainer = document.createElement(\"div\");\n            iconContainer.setAttribute(\"field-path\", cslpValue);\n\n            iconContainer.style.position = \"fixed\";\n            iconContainer.style.top = `${top - highlighCommentOffset}px`;\n            iconContainer.style.left = `${left - highlighCommentOffset}px`;\n            iconContainer.style.zIndex = \"900\";\n            iconContainer.style.cursor = \"pointer\";\n            iconContainer.className = \"highlighted-comment collab-icon\";\n\n            // Render the HighlightedCommentIcon using Preact's render method\n            render(\n                h(HighlightedCommentIcon, { data }), // Use h directly with Preact\n                iconContainer\n            );\n\n            const visualBuilderContainer = document.querySelector(\n                \".visual-builder__container\"\n            );\n            if (visualBuilderContainer) {\n                let highlightCommentWrapper =\n                    visualBuilderContainer.querySelector(\n                        \".visual-builder__highlighted-comment-wrapper\"\n                    );\n                if (!highlightCommentWrapper) {\n                    highlightCommentWrapper = document.createElement(\"div\");\n                    highlightCommentWrapper.className =\n                        \"visual-builder__highlighted-comment-wrapper\";\n                    visualBuilderContainer.appendChild(highlightCommentWrapper);\n                }\n                highlightCommentWrapper.appendChild(iconContainer);\n            }\n        }\n    });\n}\n\n/**\n * Update Highlighted comment position , whenever scroll or resize happen.\n */\n\nexport function updateHighlightedCommentIconPosition() {\n    // Query all elements with the .highlighted-comment class\n    const icons = document.querySelectorAll(\".highlighted-comment\");\n\n    icons.forEach((icon) => {\n        if (icon && icon instanceof HTMLElement) {\n            // Get the field-path attribute from the icon container\n            const path = icon.getAttribute(\"field-path\");\n            if (path) {\n                // Query the target element using the path\n                const targetElement = document.querySelector(\n                    `[data-cslp=\"${path}\"]`\n                );\n                if (targetElement && targetElement instanceof HTMLElement) {\n                    // Get the target element's position relative to the viewport\n                    const { top, left } = targetElement.getBoundingClientRect();\n\n                    // Update the position of the icon container\n                    icon.style.top = `${top - highlighCommentOffset}px`; // Adjust based on the target element's top\n                    icon.style.left = `${left - highlighCommentOffset}px`; // Adjust based on the target element's left\n                }\n            }\n        }\n    });\n}\n\n/**\n * Removes the first highlighted comment icon based on an array of paths.\n *\n * @param pathsToRemove - Array of field-paths to remove.\n */\nexport function removeHighlightedCommentIcon(pathToRemove: string): void {\n    // Loop through each path in the array\n    const iconToRemove = document.querySelectorAll(\n        `.highlighted-comment[field-path=\"${pathToRemove}\"]`\n    );\n    iconToRemove?.forEach((icon) => icon?.remove());\n}\n\nexport function removeAllHighlightedCommentIcons(): void {\n    const icons = document.querySelectorAll(\".highlighted-comment\");\n    icons?.forEach((icon) => icon?.remove());\n}\n\n// Define a hidden class in goober\nconst hiddenClass = css`\n    display: none;\n`;\n\n/**\n * Toggle display style of a specific highlighted comment icon.\n *\n * @param path - The data-cslp attribute of the element whose corresponding highlighted comment icon should be toggled.\n * @param shouldShow - Boolean value to determine whether to show or hide the icon.\n * If true, the icon will be displayed. If false, the icon will be hidden.\n */\nexport function toggleHighlightedCommentIconDisplay(\n    path: string,\n    shouldShow: boolean\n): void {\n    const icons = document.querySelectorAll<HTMLElement>(\n        `.highlighted-comment[field-path=\"${path}\"]`\n    );\n\n    icons.forEach((icon) => {\n        if (shouldShow) {\n            icon.classList.remove(hiddenClass); // Show the element\n        } else {\n            icon.classList.add(hiddenClass); // Hide the element using goober's hidden class\n        }\n    });\n}\n\n/**\n * Show all .highlighted-comment icons that have the hiddenClass applied.\n */\nexport function showAllHiddenHighlightedCommentIcons(): void {\n    // Query all elements that have both .highlighted-comment and hiddenClass\n    const hiddenIcons = document.querySelectorAll<HTMLElement>(\n        `.highlighted-comment.${hiddenClass}`\n    );\n\n    // Loop through each hidden icon and remove the hiddenClass\n    hiddenIcons.forEach((icon) => {\n        icon.classList.remove(hiddenClass); // Remove the hiddenClass to show the icon\n    });\n}\n"],"mappings":";;;AAAA,SAAS,SAAgB;AACzB,SAAS,cAAc;AACvB,OAAO,4BAA4B;AACnC,SAAS,WAAW;AAYpB,IAAM,wBAAwB;AAEvB,SAAS,6BACZ,SACI;AACJ,QAAM,cAA0C,CAAC;AAEjD,UAAQ,QAAQ,CAAC,SAAS;AAtB9B;AAuBQ,UAAM,aAAY,kCAAM,kBAAN,mBAAqB;AAGvC,QAAI,CAAC,aAAa,YAAY,SAAS,GAAG;AACtC;AAAA,IACJ;AAEA,gBAAY,SAAS,IAAI;AAEzB,UAAM,UAAU,SAAS,cAAc,eAAe,SAAS,IAAI;AACnE,QAAI,WAAW,mBAAmB,aAAa;AAC3C,YAAM,EAAE,KAAK,KAAK,IAAI,QAAQ,sBAAsB;AAEpD,YAAM,gBAAgB,SAAS,cAAc,KAAK;AAClD,oBAAc,aAAa,cAAc,SAAS;AAElD,oBAAc,MAAM,WAAW;AAC/B,oBAAc,MAAM,MAAM,GAAG,MAAM,qBAAqB;AACxD,oBAAc,MAAM,OAAO,GAAG,OAAO,qBAAqB;AAC1D,oBAAc,MAAM,SAAS;AAC7B,oBAAc,MAAM,SAAS;AAC7B,oBAAc,YAAY;AAG1B;AAAA,QACI,EAAE,wBAAwB,EAAE,KAAK,CAAC;AAAA;AAAA,QAClC;AAAA,MACJ;AAEA,YAAM,yBAAyB,SAAS;AAAA,QACpC;AAAA,MACJ;AACA,UAAI,wBAAwB;AACxB,YAAI,0BACA,uBAAuB;AAAA,UACnB;AAAA,QACJ;AACJ,YAAI,CAAC,yBAAyB;AAC1B,oCAA0B,SAAS,cAAc,KAAK;AACtD,kCAAwB,YACpB;AACJ,iCAAuB,YAAY,uBAAuB;AAAA,QAC9D;AACA,gCAAwB,YAAY,aAAa;AAAA,MACrD;AAAA,IACJ;AAAA,EACJ,CAAC;AACL;AAMO,SAAS,uCAAuC;AAEnD,QAAM,QAAQ,SAAS,iBAAiB,sBAAsB;AAE9D,QAAM,QAAQ,CAAC,SAAS;AACpB,QAAI,QAAQ,gBAAgB,aAAa;AAErC,YAAM,OAAO,KAAK,aAAa,YAAY;AAC3C,UAAI,MAAM;AAEN,cAAM,gBAAgB,SAAS;AAAA,UAC3B,eAAe,IAAI;AAAA,QACvB;AACA,YAAI,iBAAiB,yBAAyB,aAAa;AAEvD,gBAAM,EAAE,KAAK,KAAK,IAAI,cAAc,sBAAsB;AAG1D,eAAK,MAAM,MAAM,GAAG,MAAM,qBAAqB;AAC/C,eAAK,MAAM,OAAO,GAAG,OAAO,qBAAqB;AAAA,QACrD;AAAA,MACJ;AAAA,IACJ;AAAA,EACJ,CAAC;AACL;AAOO,SAAS,6BAA6B,cAA4B;AAErE,QAAM,eAAe,SAAS;AAAA,IAC1B,oCAAoC,YAAY;AAAA,EACpD;AACA,+CAAc,QAAQ,CAAC,SAAS,6BAAM;AAC1C;AAEO,SAAS,mCAAyC;AACrD,QAAM,QAAQ,SAAS,iBAAiB,sBAAsB;AAC9D,iCAAO,QAAQ,CAAC,SAAS,6BAAM;AACnC;AAGA,IAAM,cAAc;AAAA;AAAA;AAWb,SAAS,oCACZ,MACA,YACI;AACJ,QAAM,QAAQ,SAAS;AAAA,IACnB,oCAAoC,IAAI;AAAA,EAC5C;AAEA,QAAM,QAAQ,CAAC,SAAS;AACpB,QAAI,YAAY;AACZ,WAAK,UAAU,OAAO,WAAW;AAAA,IACrC,OAAO;AACH,WAAK,UAAU,IAAI,WAAW;AAAA,IAClC;AAAA,EACJ,CAAC;AACL;AAKO,SAAS,uCAA6C;AAEzD,QAAM,cAAc,SAAS;AAAA,IACzB,wBAAwB,WAAW;AAAA,EACvC;AAGA,cAAY,QAAQ,CAAC,SAAS;AAC1B,SAAK,UAAU,OAAO,WAAW;AAAA,EACrC,CAAC;AACL;","names":[]}
+{"version":3,"sources":["../../../../src/visualBuilder/generators/generateHighlightedComment.tsx"],"sourcesContent":["import { h, VNode } from \"preact\"; // Explicitly import VNode from Preact\nimport { render } from \"preact\";\nimport HighlightedCommentIcon from \"../components/HighlightedCommentIcon\";\nimport { css } from \"goober\";\nimport React from \"preact/compat\";\nimport { IHighlightCommentData } from \"../eventManager/useHighlightCommentIcon\";\nimport { isValidCslp } from \"../../cslp\";\n\n/**\n * Inserts highlighted comment icons based on an array of paths.\n *\n * This function locates elements in the DOM based on the `fieldMetadata.cslpValue`,\n * and appends a comment icon near each matching element.\n *\n * @param payload - Array of comment data with field metadata, schema, absolutePath and discussion ID.\n */\nconst highlighCommentOffset = 25;\n\nexport function highlightCommentIconOnCanvas(\n    payload: IHighlightCommentData[]\n): void {\n    const uniquePaths: { [key: string]: boolean } = {}; // Using object for uniqueness\n\n    payload.forEach((data) => {\n        const cslpValue = data?.fieldMetadata?.cslpValue;\n\n        // Check if the cslpValue is already in the Object\n        if (!isValidCslp(cslpValue) || uniquePaths[cslpValue]) {\n            return; // Skip if the value is not unique\n        }\n\n        uniquePaths[cslpValue] = true; // Mark it as processed\n\n        const element = document.querySelector(`[data-cslp=\"${cslpValue}\"]`);\n        if (element && element instanceof HTMLElement) {\n            const { top, left } = element.getBoundingClientRect();\n\n            const iconContainer = document.createElement(\"div\");\n            iconContainer.setAttribute(\"field-path\", cslpValue);\n\n            iconContainer.style.position = \"fixed\";\n            iconContainer.style.top = `${top - highlighCommentOffset}px`;\n            iconContainer.style.left = `${left - highlighCommentOffset}px`;\n            iconContainer.style.zIndex = \"900\";\n            iconContainer.style.cursor = \"pointer\";\n            iconContainer.className = \"highlighted-comment collab-icon\";\n\n            // Render the HighlightedCommentIcon using Preact's render method\n            render(\n                h(HighlightedCommentIcon, { data }), // Use h directly with Preact\n                iconContainer\n            );\n\n            const visualBuilderContainer = document.querySelector(\n                \".visual-builder__container\"\n            );\n            if (visualBuilderContainer) {\n                let highlightCommentWrapper =\n                    visualBuilderContainer.querySelector(\n                        \".visual-builder__highlighted-comment-wrapper\"\n                    );\n                if (!highlightCommentWrapper) {\n                    highlightCommentWrapper = document.createElement(\"div\");\n                    highlightCommentWrapper.className =\n                        \"visual-builder__highlighted-comment-wrapper\";\n                    visualBuilderContainer.appendChild(highlightCommentWrapper);\n                }\n                highlightCommentWrapper.appendChild(iconContainer);\n            }\n        }\n    });\n}\n\n/**\n * Update Highlighted comment position , whenever scroll or resize happen.\n */\n\nexport function updateHighlightedCommentIconPosition() {\n    // Query all elements with the .highlighted-comment class\n    const icons = document.querySelectorAll(\".highlighted-comment\");\n\n    icons.forEach((icon) => {\n        if (icon && icon instanceof HTMLElement) {\n            // Get the field-path attribute from the icon container\n            const path = icon.getAttribute(\"field-path\");\n            if (path) {\n                // Query the target element using the path\n                const targetElement = document.querySelector(\n                    `[data-cslp=\"${path}\"]`\n                );\n                if (targetElement && targetElement instanceof HTMLElement) {\n                    // Get the target element's position relative to the viewport\n                    const { top, left } = targetElement.getBoundingClientRect();\n\n                    // Update the position of the icon container\n                    icon.style.top = `${top - highlighCommentOffset}px`; // Adjust based on the target element's top\n                    icon.style.left = `${left - highlighCommentOffset}px`; // Adjust based on the target element's left\n                }\n            }\n        }\n    });\n}\n\n/**\n * Removes the first highlighted comment icon based on an array of paths.\n *\n * @param pathsToRemove - Array of field-paths to remove.\n */\nexport function removeHighlightedCommentIcon(pathToRemove: string): void {\n    // Loop through each path in the array\n    const iconToRemove = document.querySelectorAll(\n        `.highlighted-comment[field-path=\"${pathToRemove}\"]`\n    );\n    iconToRemove?.forEach((icon) => icon?.remove());\n}\n\nexport function removeAllHighlightedCommentIcons(): void {\n    const icons = document.querySelectorAll(\".highlighted-comment\");\n    icons?.forEach((icon) => icon?.remove());\n}\n\n// Define a hidden class in goober\nconst hiddenClass = css`\n    display: none;\n`;\n\n/**\n * Toggle display style of a specific highlighted comment icon.\n *\n * @param path - The data-cslp attribute of the element whose corresponding highlighted comment icon should be toggled.\n * @param shouldShow - Boolean value to determine whether to show or hide the icon.\n * If true, the icon will be displayed. If false, the icon will be hidden.\n */\nexport function toggleHighlightedCommentIconDisplay(\n    path: string,\n    shouldShow: boolean\n): void {\n    const icons = document.querySelectorAll<HTMLElement>(\n        `.highlighted-comment[field-path=\"${path}\"]`\n    );\n\n    icons.forEach((icon) => {\n        if (shouldShow) {\n            icon.classList.remove(hiddenClass); // Show the element\n        } else {\n            icon.classList.add(hiddenClass); // Hide the element using goober's hidden class\n        }\n    });\n}\n\n/**\n * Show all .highlighted-comment icons that have the hiddenClass applied.\n */\nexport function showAllHiddenHighlightedCommentIcons(): void {\n    // Query all elements that have both .highlighted-comment and hiddenClass\n    const hiddenIcons = document.querySelectorAll<HTMLElement>(\n        `.highlighted-comment.${hiddenClass}`\n    );\n\n    // Loop through each hidden icon and remove the hiddenClass\n    hiddenIcons.forEach((icon) => {\n        icon.classList.remove(hiddenClass); // Remove the hiddenClass to show the icon\n    });\n}\n"],"mappings":";;;AAAA,SAAS,SAAgB;AACzB,SAAS,cAAc;AACvB,OAAO,4BAA4B;AACnC,SAAS,WAAW;AAGpB,SAAS,mBAAmB;AAU5B,IAAM,wBAAwB;AAEvB,SAAS,6BACZ,SACI;AACJ,QAAM,cAA0C,CAAC;AAEjD,UAAQ,QAAQ,CAAC,SAAS;AAvB9B;AAwBQ,UAAM,aAAY,kCAAM,kBAAN,mBAAqB;AAGvC,QAAI,CAAC,YAAY,SAAS,KAAK,YAAY,SAAS,GAAG;AACnD;AAAA,IACJ;AAEA,gBAAY,SAAS,IAAI;AAEzB,UAAM,UAAU,SAAS,cAAc,eAAe,SAAS,IAAI;AACnE,QAAI,WAAW,mBAAmB,aAAa;AAC3C,YAAM,EAAE,KAAK,KAAK,IAAI,QAAQ,sBAAsB;AAEpD,YAAM,gBAAgB,SAAS,cAAc,KAAK;AAClD,oBAAc,aAAa,cAAc,SAAS;AAElD,oBAAc,MAAM,WAAW;AAC/B,oBAAc,MAAM,MAAM,GAAG,MAAM,qBAAqB;AACxD,oBAAc,MAAM,OAAO,GAAG,OAAO,qBAAqB;AAC1D,oBAAc,MAAM,SAAS;AAC7B,oBAAc,MAAM,SAAS;AAC7B,oBAAc,YAAY;AAG1B;AAAA,QACI,EAAE,wBAAwB,EAAE,KAAK,CAAC;AAAA;AAAA,QAClC;AAAA,MACJ;AAEA,YAAM,yBAAyB,SAAS;AAAA,QACpC;AAAA,MACJ;AACA,UAAI,wBAAwB;AACxB,YAAI,0BACA,uBAAuB;AAAA,UACnB;AAAA,QACJ;AACJ,YAAI,CAAC,yBAAyB;AAC1B,oCAA0B,SAAS,cAAc,KAAK;AACtD,kCAAwB,YACpB;AACJ,iCAAuB,YAAY,uBAAuB;AAAA,QAC9D;AACA,gCAAwB,YAAY,aAAa;AAAA,MACrD;AAAA,IACJ;AAAA,EACJ,CAAC;AACL;AAMO,SAAS,uCAAuC;AAEnD,QAAM,QAAQ,SAAS,iBAAiB,sBAAsB;AAE9D,QAAM,QAAQ,CAAC,SAAS;AACpB,QAAI,QAAQ,gBAAgB,aAAa;AAErC,YAAM,OAAO,KAAK,aAAa,YAAY;AAC3C,UAAI,MAAM;AAEN,cAAM,gBAAgB,SAAS;AAAA,UAC3B,eAAe,IAAI;AAAA,QACvB;AACA,YAAI,iBAAiB,yBAAyB,aAAa;AAEvD,gBAAM,EAAE,KAAK,KAAK,IAAI,cAAc,sBAAsB;AAG1D,eAAK,MAAM,MAAM,GAAG,MAAM,qBAAqB;AAC/C,eAAK,MAAM,OAAO,GAAG,OAAO,qBAAqB;AAAA,QACrD;AAAA,MACJ;AAAA,IACJ;AAAA,EACJ,CAAC;AACL;AAOO,SAAS,6BAA6B,cAA4B;AAErE,QAAM,eAAe,SAAS;AAAA,IAC1B,oCAAoC,YAAY;AAAA,EACpD;AACA,+CAAc,QAAQ,CAAC,SAAS,6BAAM;AAC1C;AAEO,SAAS,mCAAyC;AACrD,QAAM,QAAQ,SAAS,iBAAiB,sBAAsB;AAC9D,iCAAO,QAAQ,CAAC,SAAS,6BAAM;AACnC;AAGA,IAAM,cAAc;AAAA;AAAA;AAWb,SAAS,oCACZ,MACA,YACI;AACJ,QAAM,QAAQ,SAAS;AAAA,IACnB,oCAAoC,IAAI;AAAA,EAC5C;AAEA,QAAM,QAAQ,CAAC,SAAS;AACpB,QAAI,YAAY;AACZ,WAAK,UAAU,OAAO,WAAW;AAAA,IACrC,OAAO;AACH,WAAK,UAAU,IAAI,WAAW;AAAA,IAClC;AAAA,EACJ,CAAC;AACL;AAKO,SAAS,uCAA6C;AAEzD,QAAM,cAAc,SAAS;AAAA,IACzB,wBAAwB,WAAW;AAAA,EACvC;AAGA,cAAY,QAAQ,CAAC,SAAS;AAC1B,SAAK,UAAU,OAAO,WAAW;AAAA,EACrC,CAAC;AACL;","names":[]}

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

@@ -146,7 +146,7 @@ function sendFieldEvent(options) {
     const actualEditedElement = pseudoEditableElement || previousSelectedEditableDOM;
     let data = "innerText" in actualEditedElement ? actualEditedElement.innerText : actualEditedElement.textContent;
     const cslpData = previousSelectedEditableDOM.getAttribute("data-cslp");
-    if (!cslpData) {
+    if (!(0, import_cslpdata.isValidCslp)(cslpData)) {
       return;
     }
     const fieldMetadata = (0, import_cslpdata.extractDetailsFromCslp)(cslpData);

package/dist/legacy/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 { 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 (\n            !noTrigger &&\n            // send update when focussed field has received input\n            VisualBuilder.VisualBuilderGlobalState.value.focusFieldReceivedInput\n        ) {\n            sendFieldEvent({\n                visualBuilderContainer,\n                eventType: VisualBuilderPostMessageEvents.UPDATE_FIELD,\n            });\n        } else if (noTrigger) {\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        VisualBuilder.VisualBuilderGlobalState.value.focusFieldReceivedInput =\n            false;\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 cslpData = previousSelectedEditableDOM.getAttribute(\"data-cslp\");\n        if (!cslpData) {\n            return;\n        }\n\n        const fieldMetadata = extractDetailsFromCslp(cslpData);\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    VisualBuilder.VisualBuilderGlobalState.value.isFocussed = false;\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"]}
+{"version":3,"sources":["../../../../src/visualBuilder/generators/generateOverlay.tsx"],"sourcesContent":["import { extractDetailsFromCslp, isValidCslp } 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 { 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 (\n            !noTrigger &&\n            // send update when focussed field has received input\n            VisualBuilder.VisualBuilderGlobalState.value.focusFieldReceivedInput\n        ) {\n            sendFieldEvent({\n                visualBuilderContainer,\n                eventType: VisualBuilderPostMessageEvents.UPDATE_FIELD,\n            });\n        } else if (noTrigger) {\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        VisualBuilder.VisualBuilderGlobalState.value.focusFieldReceivedInput =\n            false;\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 cslpData = previousSelectedEditableDOM.getAttribute(\"data-cslp\");\n        if (!isValidCslp(cslpData)) {\n            return;\n        }\n\n        const fieldMetadata = extractDetailsFromCslp(cslpData);\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    VisualBuilder.VisualBuilderGlobalState.value.isFocussed = false;\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/legacy/visualBuilder/generators/generateOverlay.js

@@ -1,7 +1,7 @@
 import "../../chunk-5WRI5ZAA.js";
 
 // src/visualBuilder/generators/generateOverlay.tsx
-import { extractDetailsFromCslp } from "../../cslp/cslpdata.js";
+import { extractDetailsFromCslp, isValidCslp } from "../../cslp/cslpdata.js";
 import { cleanIndividualFieldResidual } from "../utils/handleIndividualFields.js";
 import visualBuilderPostMessage from "../utils/visualBuilderPostMessage.js";
 import { VisualBuilderPostMessageEvents } from "../utils/types/postMessage.types.js";
@@ -111,7 +111,7 @@ function sendFieldEvent(options) {
     const actualEditedElement = pseudoEditableElement || previousSelectedEditableDOM;
     let data = "innerText" in actualEditedElement ? actualEditedElement.innerText : actualEditedElement.textContent;
     const cslpData = previousSelectedEditableDOM.getAttribute("data-cslp");
-    if (!cslpData) {
+    if (!isValidCslp(cslpData)) {
       return;
     }
     const fieldMetadata = extractDetailsFromCslp(cslpData);