@contentstack/live-preview-utils 4.4.1 → 4.4.3

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/visualBuilder/eventManager/useRecalculateVariantDataCSLPValues.ts"],"sourcesContent":["import { VisualBuilder } from \"..\";\nimport livePreviewPostMessage from \"../../livePreview/eventManager/livePreviewEventManager\";\nimport { LIVE_PREVIEW_POST_MESSAGE_EVENTS } from \"../../livePreview/eventManager/livePreviewEventManager.constant\";\nimport { DATA_CSLP_ATTR_SELECTOR } from \"../utils/constants\";\nimport { visualBuilderStyles } from \"../visualBuilder.style\";\nimport { isValidCslp } from \"../../cslp/cslpdata\";\nimport { setHighlightVariantFields } from \"./useVariantsPostMessageEvent\";\n\nconst VARIANT_UPDATE_DELAY_MS: Readonly<number> = 8000;\n\ntype OnAudienceModeVariantPatchUpdate = {\n    highlightVariantFields: boolean;\n    expectedCSLPValues: Record<\"variant\" | \"base\", string>;\n};\n\n/**\n * Registers a post message event listener for updating the variant / base classes in the live preview for audience mode.\n */\nexport function useRecalculateVariantDataCSLPValues(): void {\n    livePreviewPostMessage?.on<OnAudienceModeVariantPatchUpdate>(\n        LIVE_PREVIEW_POST_MESSAGE_EVENTS.VARIANT_PATCH,\n        (event) => {\n            if (VisualBuilder.VisualBuilderGlobalState.value.audienceMode) {\n                setHighlightVariantFields(event.data.highlightVariantFields);\n                updateVariantClasses();\n            }\n        }\n    );\n}\nexport function updateVariantClasses(): void {\n    const highlightVariantFields = VisualBuilder.VisualBuilderGlobalState.value.highlightVariantFields;\n    const variant = VisualBuilder.VisualBuilderGlobalState.value.variant;\n    const observers: MutationObserver[] = [];\n\n    // Helper function to update element classes\n    const updateElementClasses = (\n        element: HTMLElement,\n        dataCslp: string,\n        observer?: MutationObserver\n    ) => {\n        if (!isValidCslp(dataCslp)) return;\n\n        if (\n            dataCslp.startsWith(\"v2:\") &&\n            !element.classList.contains(\"visual-builder__variant-field\")\n        ) {\n            if (element.classList.contains(\"visual-builder__base-field\")) {\n                element.classList.remove(\"visual-builder__base-field\");\n            }\n            const variantFieldClasses = [\"visual-builder__variant-field\"];\n            if (highlightVariantFields) {\n                variantFieldClasses.push(visualBuilderStyles()[\"visual-builder__variant-field-outline\"]);\n            }\n            element.classList.add(...variantFieldClasses);\n        } else if (\n            !dataCslp.startsWith(\"v2:\") &&\n            element.classList.contains(\"visual-builder__variant-field\")\n        ) {\n            element.classList.remove(\n                visualBuilderStyles()[\"visual-builder__variant-field-outline\"],\n                \"visual-builder__variant-field\"\n            );\n            element.classList.add(\"visual-builder__base-field\");\n        } else if (\n            dataCslp.startsWith(\"v2:\") &&\n            variant &&\n            !dataCslp.includes(variant) &&\n            element.classList.contains(\"visual-builder__variant-field\")\n        ) {\n            element.classList.remove(\n                visualBuilderStyles()[\"visual-builder__variant-field-outline\"],\n                \"visual-builder__variant-field\"\n            );\n            element.classList.add(\"visual-builder__disabled-variant-field\");\n        }\n        if (!observer) return;\n        // Disconnect this observer after processing\n        observer.disconnect();\n        const index = observers.indexOf(observer);\n        if (index > -1) {\n            observers.splice(index, 1);\n        }\n    };\n\n    const addElementClasses = (element: HTMLElement) => {\n        const dataCslp = element.getAttribute(DATA_CSLP_ATTR_SELECTOR);\n\n        if (!isValidCslp(dataCslp)) {\n            //recursive call for child nodes\n            element.childNodes.forEach((child) => {\n                if (child instanceof HTMLElement) {\n                    addElementClasses(child);\n                }\n            });\n            return;\n        }\n        //if element might have been updated by another observer\n        if (\n            dataCslp.startsWith(\"v2:\") &&\n            element.classList.contains(\"visual-builder__variant-field\")\n        ) {\n            return;\n        }\n        // if element has not given variant/base class\n        if (\n            dataCslp.startsWith(\"v2:\") &&\n            !element.classList.contains(\"visual-builder__variant-field\")\n        ) {\n            if (element.classList.contains(\"visual-builder__base-field\")) {\n                element.classList.remove(\"visual-builder__base-field\");\n            }\n            const variantFieldClasses = [\"visual-builder__variant-field\"];\n            if (highlightVariantFields) {\n                variantFieldClasses.push(visualBuilderStyles()[\"visual-builder__variant-field-outline\"]);\n            }\n            element.classList.add(...variantFieldClasses);\n        } else if (!dataCslp.startsWith(\"v2:\")) {\n            if (element.classList.contains(\"visual-builder__variant-field\")) {\n                element.classList.remove(\n                    visualBuilderStyles()[\"visual-builder__variant-field-outline\"],\n                    \"visual-builder__variant-field\"\n                );\n            }\n            element.classList.add(\"visual-builder__base-field\");\n        }\n\n        //recursive call for child nodes\n        element.childNodes.forEach((child) => {\n            if (child instanceof HTMLElement) {\n                addElementClasses(child);\n            }\n        });\n    };\n\n    // Create a separate observer for each element\n    const elementsWithCslp = document.querySelectorAll(\n        `[${DATA_CSLP_ATTR_SELECTOR}]`\n    );\n    elementsWithCslp.forEach((elementNode) => {\n        const element = elementNode as HTMLElement;\n        const observer = new MutationObserver((mutations) => {\n            mutations.forEach((mutation) => {\n                if (\n                    (mutation.type === \"attributes\" &&\n                        mutation.attributeName === DATA_CSLP_ATTR_SELECTOR) ||\n                    mutation.type === \"childList\"\n                ) {\n                    if (mutation.addedNodes.length > 0) {\n                        mutation.addedNodes.forEach((node) => {\n                            if (node instanceof HTMLElement) {\n                                addElementClasses(node);\n                            }\n                        });\n                    }\n                    const dataCslp = element.getAttribute(\n                        DATA_CSLP_ATTR_SELECTOR\n                    );\n                    updateElementClasses(element, dataCslp || \"\", observer);\n                }\n            });\n        });\n\n        observers.push(observer);\n        // TODO: Check if we could add attributeFilter to the observer to only observe the attribute changes for the data-cslp attribute.\n        observer.observe(element, {\n            attributes: true,\n            childList: true, // Observe direct children\n            subtree: true,\n        });\n    });\n\n    setTimeout(() => {\n        if (observers.length > 0) {\n            observers.forEach((observer) => observer.disconnect());\n            observers.length = 0;\n        }\n    }, VARIANT_UPDATE_DELAY_MS);\n}\n"],"mappings":"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","names":["import_livePreviewEventManager","livePreviewPostMessage"]}
+{"version":3,"sources":["../../../../src/visualBuilder/eventManager/useRecalculateVariantDataCSLPValues.ts"],"sourcesContent":["import { VisualBuilder } from \"..\";\nimport livePreviewPostMessage from \"../../livePreview/eventManager/livePreviewEventManager\";\nimport { LIVE_PREVIEW_POST_MESSAGE_EVENTS } from \"../../livePreview/eventManager/livePreviewEventManager.constant\";\nimport { DATA_CSLP_ATTR_SELECTOR } from \"../utils/constants\";\nimport { visualBuilderStyles } from \"../visualBuilder.style\";\nimport { isValidCslp } from \"../../cslp/cslpdata\";\nimport { setHighlightVariantFields } from \"./useVariantsPostMessageEvent\";\nimport visualBuilderPostMessage from \"../utils/visualBuilderPostMessage\";\nimport { VisualBuilderPostMessageEvents } from \"../utils/types/postMessage.types\";\nimport { debounce } from \"lodash-es\";\n\nconst VARIANT_UPDATE_DELAY_MS: Readonly<number> = 8000;\n\n// Coalesce a burst of data-cslp mutations into a single request to the\n// visual editor.\nconst requestDiscussionHighlights = debounce(() => {\n    visualBuilderPostMessage?.send(\n        VisualBuilderPostMessageEvents.REQUEST_DISCUSSION_HIGHLIGHTS\n    );\n}, 200);\n\ntype OnAudienceModeVariantPatchUpdate = {\n    highlightVariantFields: boolean;\n    expectedCSLPValues: Record<\"variant\" | \"base\", string>;\n};\n\n/**\n * Registers a post message event listener for updating the variant / base classes in the live preview for audience mode.\n */\nexport function useRecalculateVariantDataCSLPValues(): void {\n    livePreviewPostMessage?.on<OnAudienceModeVariantPatchUpdate>(\n        LIVE_PREVIEW_POST_MESSAGE_EVENTS.VARIANT_PATCH,\n        (event) => {\n            if (VisualBuilder.VisualBuilderGlobalState.value.audienceMode) {\n                setHighlightVariantFields(event.data.highlightVariantFields);\n                updateVariantClasses();\n            }\n        }\n    );\n}\nexport function updateVariantClasses(): void {\n    const highlightVariantFields = VisualBuilder.VisualBuilderGlobalState.value.highlightVariantFields;\n    const variant = VisualBuilder.VisualBuilderGlobalState.value.variant;\n    const observers: MutationObserver[] = [];\n\n    // Helper function to update element classes\n    const updateElementClasses = (\n        element: HTMLElement,\n        dataCslp: string,\n        observer?: MutationObserver\n    ) => {\n        if (!isValidCslp(dataCslp)) return;\n\n        if (\n            dataCslp.startsWith(\"v2:\") &&\n            !element.classList.contains(\"visual-builder__variant-field\")\n        ) {\n            if (element.classList.contains(\"visual-builder__base-field\")) {\n                element.classList.remove(\"visual-builder__base-field\");\n            }\n            const variantFieldClasses = [\"visual-builder__variant-field\"];\n            if (highlightVariantFields) {\n                variantFieldClasses.push(visualBuilderStyles()[\"visual-builder__variant-field-outline\"]);\n            }\n            element.classList.add(...variantFieldClasses);\n        } else if (\n            !dataCslp.startsWith(\"v2:\") &&\n            element.classList.contains(\"visual-builder__variant-field\")\n        ) {\n            element.classList.remove(\n                visualBuilderStyles()[\"visual-builder__variant-field-outline\"],\n                \"visual-builder__variant-field\"\n            );\n            element.classList.add(\"visual-builder__base-field\");\n        } else if (\n            dataCslp.startsWith(\"v2:\") &&\n            variant &&\n            !dataCslp.includes(variant) &&\n            element.classList.contains(\"visual-builder__variant-field\")\n        ) {\n            element.classList.remove(\n                visualBuilderStyles()[\"visual-builder__variant-field-outline\"],\n                \"visual-builder__variant-field\"\n            );\n            element.classList.add(\"visual-builder__disabled-variant-field\");\n        }\n        if (!observer) return;\n        // Disconnect this observer after processing\n        observer.disconnect();\n        const index = observers.indexOf(observer);\n        if (index > -1) {\n            observers.splice(index, 1);\n        }\n    };\n\n    const addElementClasses = (element: HTMLElement) => {\n        const dataCslp = element.getAttribute(DATA_CSLP_ATTR_SELECTOR);\n\n        if (!isValidCslp(dataCslp)) {\n            //recursive call for child nodes\n            element.childNodes.forEach((child) => {\n                if (child instanceof HTMLElement) {\n                    addElementClasses(child);\n                }\n            });\n            return;\n        }\n        //if element might have been updated by another observer\n        if (\n            dataCslp.startsWith(\"v2:\") &&\n            element.classList.contains(\"visual-builder__variant-field\")\n        ) {\n            return;\n        }\n        // if element has not given variant/base class\n        if (\n            dataCslp.startsWith(\"v2:\") &&\n            !element.classList.contains(\"visual-builder__variant-field\")\n        ) {\n            if (element.classList.contains(\"visual-builder__base-field\")) {\n                element.classList.remove(\"visual-builder__base-field\");\n            }\n            const variantFieldClasses = [\"visual-builder__variant-field\"];\n            if (highlightVariantFields) {\n                variantFieldClasses.push(visualBuilderStyles()[\"visual-builder__variant-field-outline\"]);\n            }\n            element.classList.add(...variantFieldClasses);\n        } else if (!dataCslp.startsWith(\"v2:\")) {\n            if (element.classList.contains(\"visual-builder__variant-field\")) {\n                element.classList.remove(\n                    visualBuilderStyles()[\"visual-builder__variant-field-outline\"],\n                    \"visual-builder__variant-field\"\n                );\n            }\n            element.classList.add(\"visual-builder__base-field\");\n        }\n\n        //recursive call for child nodes\n        element.childNodes.forEach((child) => {\n            if (child instanceof HTMLElement) {\n                addElementClasses(child);\n            }\n        });\n    };\n\n    // Create a separate observer for each element\n    const elementsWithCslp = document.querySelectorAll(\n        `[${DATA_CSLP_ATTR_SELECTOR}]`\n    );\n    elementsWithCslp.forEach((elementNode) => {\n        const element = elementNode as HTMLElement;\n        const observer = new MutationObserver((mutations) => {\n            mutations.forEach((mutation) => {\n                if (\n                    (mutation.type === \"attributes\" &&\n                        mutation.attributeName === DATA_CSLP_ATTR_SELECTOR) ||\n                    mutation.type === \"childList\"\n                ) {\n                    if (mutation.addedNodes.length > 0) {\n                        mutation.addedNodes.forEach((node) => {\n                            if (node instanceof HTMLElement) {\n                                addElementClasses(node);\n                            }\n                        });\n                    }\n                    const dataCslp = element.getAttribute(\n                        DATA_CSLP_ATTR_SELECTOR\n                    );\n                    updateElementClasses(element, dataCslp || \"\", observer);\n                    requestDiscussionHighlights();\n                }\n            });\n        });\n\n        observers.push(observer);\n        // TODO: Check if we could add attributeFilter to the observer to only observe the attribute changes for the data-cslp attribute.\n        observer.observe(element, {\n            attributes: true,\n            childList: true, // Observe direct children\n            subtree: true,\n        });\n    });\n\n    setTimeout(() => {\n        if (observers.length > 0) {\n            observers.forEach((observer) => observer.disconnect());\n            observers.length = 0;\n        }\n    }, VARIANT_UPDATE_DELAY_MS);\n}\n"],"mappings":"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","names":["import_livePreviewEventManager","visualBuilderPostMessage","livePreviewPostMessage"]}

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

@@ -8,7 +8,15 @@ import { DATA_CSLP_ATTR_SELECTOR } from "../utils/constants.js";
 import { visualBuilderStyles } from "../visualBuilder.style.js";
 import { isValidCslp } from "../../cslp/cslpdata.js";
 import { setHighlightVariantFields } from "./useVariantsPostMessageEvent.js";
+import visualBuilderPostMessage from "../utils/visualBuilderPostMessage.js";
+import { VisualBuilderPostMessageEvents } from "../utils/types/postMessage.types.js";
+import { debounce } from "lodash-es";
 var VARIANT_UPDATE_DELAY_MS = 8e3;
+var requestDiscussionHighlights = debounce(() => {
+  visualBuilderPostMessage?.send(
+    VisualBuilderPostMessageEvents.REQUEST_DISCUSSION_HIGHLIGHTS
+  );
+}, 200);
 function useRecalculateVariantDataCSLPValues() {
   livePreviewPostMessage?.on(
     LIVE_PREVIEW_POST_MESSAGE_EVENTS.VARIANT_PATCH,
@@ -111,6 +119,7 @@ function updateVariantClasses() {
             DATA_CSLP_ATTR_SELECTOR
           );
           updateElementClasses(element, dataCslp || "", observer);
+          requestDiscussionHighlights();
         }
       });
     });

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/visualBuilder/eventManager/useRecalculateVariantDataCSLPValues.ts"],"sourcesContent":["import { VisualBuilder } from \"..\";\nimport livePreviewPostMessage from \"../../livePreview/eventManager/livePreviewEventManager\";\nimport { LIVE_PREVIEW_POST_MESSAGE_EVENTS } from \"../../livePreview/eventManager/livePreviewEventManager.constant\";\nimport { DATA_CSLP_ATTR_SELECTOR } from \"../utils/constants\";\nimport { visualBuilderStyles } from \"../visualBuilder.style\";\nimport { isValidCslp } from \"../../cslp/cslpdata\";\nimport { setHighlightVariantFields } from \"./useVariantsPostMessageEvent\";\n\nconst VARIANT_UPDATE_DELAY_MS: Readonly<number> = 8000;\n\ntype OnAudienceModeVariantPatchUpdate = {\n    highlightVariantFields: boolean;\n    expectedCSLPValues: Record<\"variant\" | \"base\", string>;\n};\n\n/**\n * Registers a post message event listener for updating the variant / base classes in the live preview for audience mode.\n */\nexport function useRecalculateVariantDataCSLPValues(): void {\n    livePreviewPostMessage?.on<OnAudienceModeVariantPatchUpdate>(\n        LIVE_PREVIEW_POST_MESSAGE_EVENTS.VARIANT_PATCH,\n        (event) => {\n            if (VisualBuilder.VisualBuilderGlobalState.value.audienceMode) {\n                setHighlightVariantFields(event.data.highlightVariantFields);\n                updateVariantClasses();\n            }\n        }\n    );\n}\nexport function updateVariantClasses(): void {\n    const highlightVariantFields = VisualBuilder.VisualBuilderGlobalState.value.highlightVariantFields;\n    const variant = VisualBuilder.VisualBuilderGlobalState.value.variant;\n    const observers: MutationObserver[] = [];\n\n    // Helper function to update element classes\n    const updateElementClasses = (\n        element: HTMLElement,\n        dataCslp: string,\n        observer?: MutationObserver\n    ) => {\n        if (!isValidCslp(dataCslp)) return;\n\n        if (\n            dataCslp.startsWith(\"v2:\") &&\n            !element.classList.contains(\"visual-builder__variant-field\")\n        ) {\n            if (element.classList.contains(\"visual-builder__base-field\")) {\n                element.classList.remove(\"visual-builder__base-field\");\n            }\n            const variantFieldClasses = [\"visual-builder__variant-field\"];\n            if (highlightVariantFields) {\n                variantFieldClasses.push(visualBuilderStyles()[\"visual-builder__variant-field-outline\"]);\n            }\n            element.classList.add(...variantFieldClasses);\n        } else if (\n            !dataCslp.startsWith(\"v2:\") &&\n            element.classList.contains(\"visual-builder__variant-field\")\n        ) {\n            element.classList.remove(\n                visualBuilderStyles()[\"visual-builder__variant-field-outline\"],\n                \"visual-builder__variant-field\"\n            );\n            element.classList.add(\"visual-builder__base-field\");\n        } else if (\n            dataCslp.startsWith(\"v2:\") &&\n            variant &&\n            !dataCslp.includes(variant) &&\n            element.classList.contains(\"visual-builder__variant-field\")\n        ) {\n            element.classList.remove(\n                visualBuilderStyles()[\"visual-builder__variant-field-outline\"],\n                \"visual-builder__variant-field\"\n            );\n            element.classList.add(\"visual-builder__disabled-variant-field\");\n        }\n        if (!observer) return;\n        // Disconnect this observer after processing\n        observer.disconnect();\n        const index = observers.indexOf(observer);\n        if (index > -1) {\n            observers.splice(index, 1);\n        }\n    };\n\n    const addElementClasses = (element: HTMLElement) => {\n        const dataCslp = element.getAttribute(DATA_CSLP_ATTR_SELECTOR);\n\n        if (!isValidCslp(dataCslp)) {\n            //recursive call for child nodes\n            element.childNodes.forEach((child) => {\n                if (child instanceof HTMLElement) {\n                    addElementClasses(child);\n                }\n            });\n            return;\n        }\n        //if element might have been updated by another observer\n        if (\n            dataCslp.startsWith(\"v2:\") &&\n            element.classList.contains(\"visual-builder__variant-field\")\n        ) {\n            return;\n        }\n        // if element has not given variant/base class\n        if (\n            dataCslp.startsWith(\"v2:\") &&\n            !element.classList.contains(\"visual-builder__variant-field\")\n        ) {\n            if (element.classList.contains(\"visual-builder__base-field\")) {\n                element.classList.remove(\"visual-builder__base-field\");\n            }\n            const variantFieldClasses = [\"visual-builder__variant-field\"];\n            if (highlightVariantFields) {\n                variantFieldClasses.push(visualBuilderStyles()[\"visual-builder__variant-field-outline\"]);\n            }\n            element.classList.add(...variantFieldClasses);\n        } else if (!dataCslp.startsWith(\"v2:\")) {\n            if (element.classList.contains(\"visual-builder__variant-field\")) {\n                element.classList.remove(\n                    visualBuilderStyles()[\"visual-builder__variant-field-outline\"],\n                    \"visual-builder__variant-field\"\n                );\n            }\n            element.classList.add(\"visual-builder__base-field\");\n        }\n\n        //recursive call for child nodes\n        element.childNodes.forEach((child) => {\n            if (child instanceof HTMLElement) {\n                addElementClasses(child);\n            }\n        });\n    };\n\n    // Create a separate observer for each element\n    const elementsWithCslp = document.querySelectorAll(\n        `[${DATA_CSLP_ATTR_SELECTOR}]`\n    );\n    elementsWithCslp.forEach((elementNode) => {\n        const element = elementNode as HTMLElement;\n        const observer = new MutationObserver((mutations) => {\n            mutations.forEach((mutation) => {\n                if (\n                    (mutation.type === \"attributes\" &&\n                        mutation.attributeName === DATA_CSLP_ATTR_SELECTOR) ||\n                    mutation.type === \"childList\"\n                ) {\n                    if (mutation.addedNodes.length > 0) {\n                        mutation.addedNodes.forEach((node) => {\n                            if (node instanceof HTMLElement) {\n                                addElementClasses(node);\n                            }\n                        });\n                    }\n                    const dataCslp = element.getAttribute(\n                        DATA_CSLP_ATTR_SELECTOR\n                    );\n                    updateElementClasses(element, dataCslp || \"\", observer);\n                }\n            });\n        });\n\n        observers.push(observer);\n        // TODO: Check if we could add attributeFilter to the observer to only observe the attribute changes for the data-cslp attribute.\n        observer.observe(element, {\n            attributes: true,\n            childList: true, // Observe direct children\n            subtree: true,\n        });\n    });\n\n    setTimeout(() => {\n        if (observers.length > 0) {\n            observers.forEach((observer) => observer.disconnect());\n            observers.length = 0;\n        }\n    }, VARIANT_UPDATE_DELAY_MS);\n}\n"],"mappings":";;;AAAA,SAAS,qBAAqB;AAC9B,OAAO,4BAA4B;AACnC,SAAS,wCAAwC;AACjD,SAAS,+BAA+B;AACxC,SAAS,2BAA2B;AACpC,SAAS,mBAAmB;AAC5B,SAAS,iCAAiC;AAE1C,IAAM,0BAA4C;AAU3C,SAAS,sCAA4C;AACxD,0BAAwB;AAAA,IACpB,iCAAiC;AAAA,IACjC,CAAC,UAAU;AACP,UAAI,cAAc,yBAAyB,MAAM,cAAc;AAC3D,kCAA0B,MAAM,KAAK,sBAAsB;AAC3D,6BAAqB;AAAA,MACzB;AAAA,IACJ;AAAA,EACJ;AACJ;AACO,SAAS,uBAA6B;AACzC,QAAM,yBAAyB,cAAc,yBAAyB,MAAM;AAC5E,QAAM,UAAU,cAAc,yBAAyB,MAAM;AAC7D,QAAM,YAAgC,CAAC;AAGvC,QAAM,uBAAuB,CACzB,SACA,UACA,aACC;AACD,QAAI,CAAC,YAAY,QAAQ,EAAG;AAE5B,QACI,SAAS,WAAW,KAAK,KACzB,CAAC,QAAQ,UAAU,SAAS,+BAA+B,GAC7D;AACE,UAAI,QAAQ,UAAU,SAAS,4BAA4B,GAAG;AAC1D,gBAAQ,UAAU,OAAO,4BAA4B;AAAA,MACzD;AACA,YAAM,sBAAsB,CAAC,+BAA+B;AAC5D,UAAI,wBAAwB;AACxB,4BAAoB,KAAK,oBAAoB,EAAE,uCAAuC,CAAC;AAAA,MAC3F;AACA,cAAQ,UAAU,IAAI,GAAG,mBAAmB;AAAA,IAChD,WACI,CAAC,SAAS,WAAW,KAAK,KAC1B,QAAQ,UAAU,SAAS,+BAA+B,GAC5D;AACE,cAAQ,UAAU;AAAA,QACd,oBAAoB,EAAE,uCAAuC;AAAA,QAC7D;AAAA,MACJ;AACA,cAAQ,UAAU,IAAI,4BAA4B;AAAA,IACtD,WACI,SAAS,WAAW,KAAK,KACzB,WACA,CAAC,SAAS,SAAS,OAAO,KAC1B,QAAQ,UAAU,SAAS,+BAA+B,GAC5D;AACE,cAAQ,UAAU;AAAA,QACd,oBAAoB,EAAE,uCAAuC;AAAA,QAC7D;AAAA,MACJ;AACA,cAAQ,UAAU,IAAI,wCAAwC;AAAA,IAClE;AACA,QAAI,CAAC,SAAU;AAEf,aAAS,WAAW;AACpB,UAAM,QAAQ,UAAU,QAAQ,QAAQ;AACxC,QAAI,QAAQ,IAAI;AACZ,gBAAU,OAAO,OAAO,CAAC;AAAA,IAC7B;AAAA,EACJ;AAEA,QAAM,oBAAoB,CAAC,YAAyB;AAChD,UAAM,WAAW,QAAQ,aAAa,uBAAuB;AAE7D,QAAI,CAAC,YAAY,QAAQ,GAAG;AAExB,cAAQ,WAAW,QAAQ,CAAC,UAAU;AAClC,YAAI,iBAAiB,aAAa;AAC9B,4BAAkB,KAAK;AAAA,QAC3B;AAAA,MACJ,CAAC;AACD;AAAA,IACJ;AAEA,QACI,SAAS,WAAW,KAAK,KACzB,QAAQ,UAAU,SAAS,+BAA+B,GAC5D;AACE;AAAA,IACJ;AAEA,QACI,SAAS,WAAW,KAAK,KACzB,CAAC,QAAQ,UAAU,SAAS,+BAA+B,GAC7D;AACE,UAAI,QAAQ,UAAU,SAAS,4BAA4B,GAAG;AAC1D,gBAAQ,UAAU,OAAO,4BAA4B;AAAA,MACzD;AACA,YAAM,sBAAsB,CAAC,+BAA+B;AAC5D,UAAI,wBAAwB;AACxB,4BAAoB,KAAK,oBAAoB,EAAE,uCAAuC,CAAC;AAAA,MAC3F;AACA,cAAQ,UAAU,IAAI,GAAG,mBAAmB;AAAA,IAChD,WAAW,CAAC,SAAS,WAAW,KAAK,GAAG;AACpC,UAAI,QAAQ,UAAU,SAAS,+BAA+B,GAAG;AAC7D,gBAAQ,UAAU;AAAA,UACd,oBAAoB,EAAE,uCAAuC;AAAA,UAC7D;AAAA,QACJ;AAAA,MACJ;AACA,cAAQ,UAAU,IAAI,4BAA4B;AAAA,IACtD;AAGA,YAAQ,WAAW,QAAQ,CAAC,UAAU;AAClC,UAAI,iBAAiB,aAAa;AAC9B,0BAAkB,KAAK;AAAA,MAC3B;AAAA,IACJ,CAAC;AAAA,EACL;AAGA,QAAM,mBAAmB,SAAS;AAAA,IAC9B,IAAI,uBAAuB;AAAA,EAC/B;AACA,mBAAiB,QAAQ,CAAC,gBAAgB;AACtC,UAAM,UAAU;AAChB,UAAM,WAAW,IAAI,iBAAiB,CAAC,cAAc;AACjD,gBAAU,QAAQ,CAAC,aAAa;AAC5B,YACK,SAAS,SAAS,gBACf,SAAS,kBAAkB,2BAC/B,SAAS,SAAS,aACpB;AACE,cAAI,SAAS,WAAW,SAAS,GAAG;AAChC,qBAAS,WAAW,QAAQ,CAAC,SAAS;AAClC,kBAAI,gBAAgB,aAAa;AAC7B,kCAAkB,IAAI;AAAA,cAC1B;AAAA,YACJ,CAAC;AAAA,UACL;AACA,gBAAM,WAAW,QAAQ;AAAA,YACrB;AAAA,UACJ;AACA,+BAAqB,SAAS,YAAY,IAAI,QAAQ;AAAA,QAC1D;AAAA,MACJ,CAAC;AAAA,IACL,CAAC;AAED,cAAU,KAAK,QAAQ;AAEvB,aAAS,QAAQ,SAAS;AAAA,MACtB,YAAY;AAAA,MACZ,WAAW;AAAA;AAAA,MACX,SAAS;AAAA,IACb,CAAC;AAAA,EACL,CAAC;AAED,aAAW,MAAM;AACb,QAAI,UAAU,SAAS,GAAG;AACtB,gBAAU,QAAQ,CAAC,aAAa,SAAS,WAAW,CAAC;AACrD,gBAAU,SAAS;AAAA,IACvB;AAAA,EACJ,GAAG,uBAAuB;AAC9B;","names":[]}
+{"version":3,"sources":["../../../../src/visualBuilder/eventManager/useRecalculateVariantDataCSLPValues.ts"],"sourcesContent":["import { VisualBuilder } from \"..\";\nimport livePreviewPostMessage from \"../../livePreview/eventManager/livePreviewEventManager\";\nimport { LIVE_PREVIEW_POST_MESSAGE_EVENTS } from \"../../livePreview/eventManager/livePreviewEventManager.constant\";\nimport { DATA_CSLP_ATTR_SELECTOR } from \"../utils/constants\";\nimport { visualBuilderStyles } from \"../visualBuilder.style\";\nimport { isValidCslp } from \"../../cslp/cslpdata\";\nimport { setHighlightVariantFields } from \"./useVariantsPostMessageEvent\";\nimport visualBuilderPostMessage from \"../utils/visualBuilderPostMessage\";\nimport { VisualBuilderPostMessageEvents } from \"../utils/types/postMessage.types\";\nimport { debounce } from \"lodash-es\";\n\nconst VARIANT_UPDATE_DELAY_MS: Readonly<number> = 8000;\n\n// Coalesce a burst of data-cslp mutations into a single request to the\n// visual editor.\nconst requestDiscussionHighlights = debounce(() => {\n    visualBuilderPostMessage?.send(\n        VisualBuilderPostMessageEvents.REQUEST_DISCUSSION_HIGHLIGHTS\n    );\n}, 200);\n\ntype OnAudienceModeVariantPatchUpdate = {\n    highlightVariantFields: boolean;\n    expectedCSLPValues: Record<\"variant\" | \"base\", string>;\n};\n\n/**\n * Registers a post message event listener for updating the variant / base classes in the live preview for audience mode.\n */\nexport function useRecalculateVariantDataCSLPValues(): void {\n    livePreviewPostMessage?.on<OnAudienceModeVariantPatchUpdate>(\n        LIVE_PREVIEW_POST_MESSAGE_EVENTS.VARIANT_PATCH,\n        (event) => {\n            if (VisualBuilder.VisualBuilderGlobalState.value.audienceMode) {\n                setHighlightVariantFields(event.data.highlightVariantFields);\n                updateVariantClasses();\n            }\n        }\n    );\n}\nexport function updateVariantClasses(): void {\n    const highlightVariantFields = VisualBuilder.VisualBuilderGlobalState.value.highlightVariantFields;\n    const variant = VisualBuilder.VisualBuilderGlobalState.value.variant;\n    const observers: MutationObserver[] = [];\n\n    // Helper function to update element classes\n    const updateElementClasses = (\n        element: HTMLElement,\n        dataCslp: string,\n        observer?: MutationObserver\n    ) => {\n        if (!isValidCslp(dataCslp)) return;\n\n        if (\n            dataCslp.startsWith(\"v2:\") &&\n            !element.classList.contains(\"visual-builder__variant-field\")\n        ) {\n            if (element.classList.contains(\"visual-builder__base-field\")) {\n                element.classList.remove(\"visual-builder__base-field\");\n            }\n            const variantFieldClasses = [\"visual-builder__variant-field\"];\n            if (highlightVariantFields) {\n                variantFieldClasses.push(visualBuilderStyles()[\"visual-builder__variant-field-outline\"]);\n            }\n            element.classList.add(...variantFieldClasses);\n        } else if (\n            !dataCslp.startsWith(\"v2:\") &&\n            element.classList.contains(\"visual-builder__variant-field\")\n        ) {\n            element.classList.remove(\n                visualBuilderStyles()[\"visual-builder__variant-field-outline\"],\n                \"visual-builder__variant-field\"\n            );\n            element.classList.add(\"visual-builder__base-field\");\n        } else if (\n            dataCslp.startsWith(\"v2:\") &&\n            variant &&\n            !dataCslp.includes(variant) &&\n            element.classList.contains(\"visual-builder__variant-field\")\n        ) {\n            element.classList.remove(\n                visualBuilderStyles()[\"visual-builder__variant-field-outline\"],\n                \"visual-builder__variant-field\"\n            );\n            element.classList.add(\"visual-builder__disabled-variant-field\");\n        }\n        if (!observer) return;\n        // Disconnect this observer after processing\n        observer.disconnect();\n        const index = observers.indexOf(observer);\n        if (index > -1) {\n            observers.splice(index, 1);\n        }\n    };\n\n    const addElementClasses = (element: HTMLElement) => {\n        const dataCslp = element.getAttribute(DATA_CSLP_ATTR_SELECTOR);\n\n        if (!isValidCslp(dataCslp)) {\n            //recursive call for child nodes\n            element.childNodes.forEach((child) => {\n                if (child instanceof HTMLElement) {\n                    addElementClasses(child);\n                }\n            });\n            return;\n        }\n        //if element might have been updated by another observer\n        if (\n            dataCslp.startsWith(\"v2:\") &&\n            element.classList.contains(\"visual-builder__variant-field\")\n        ) {\n            return;\n        }\n        // if element has not given variant/base class\n        if (\n            dataCslp.startsWith(\"v2:\") &&\n            !element.classList.contains(\"visual-builder__variant-field\")\n        ) {\n            if (element.classList.contains(\"visual-builder__base-field\")) {\n                element.classList.remove(\"visual-builder__base-field\");\n            }\n            const variantFieldClasses = [\"visual-builder__variant-field\"];\n            if (highlightVariantFields) {\n                variantFieldClasses.push(visualBuilderStyles()[\"visual-builder__variant-field-outline\"]);\n            }\n            element.classList.add(...variantFieldClasses);\n        } else if (!dataCslp.startsWith(\"v2:\")) {\n            if (element.classList.contains(\"visual-builder__variant-field\")) {\n                element.classList.remove(\n                    visualBuilderStyles()[\"visual-builder__variant-field-outline\"],\n                    \"visual-builder__variant-field\"\n                );\n            }\n            element.classList.add(\"visual-builder__base-field\");\n        }\n\n        //recursive call for child nodes\n        element.childNodes.forEach((child) => {\n            if (child instanceof HTMLElement) {\n                addElementClasses(child);\n            }\n        });\n    };\n\n    // Create a separate observer for each element\n    const elementsWithCslp = document.querySelectorAll(\n        `[${DATA_CSLP_ATTR_SELECTOR}]`\n    );\n    elementsWithCslp.forEach((elementNode) => {\n        const element = elementNode as HTMLElement;\n        const observer = new MutationObserver((mutations) => {\n            mutations.forEach((mutation) => {\n                if (\n                    (mutation.type === \"attributes\" &&\n                        mutation.attributeName === DATA_CSLP_ATTR_SELECTOR) ||\n                    mutation.type === \"childList\"\n                ) {\n                    if (mutation.addedNodes.length > 0) {\n                        mutation.addedNodes.forEach((node) => {\n                            if (node instanceof HTMLElement) {\n                                addElementClasses(node);\n                            }\n                        });\n                    }\n                    const dataCslp = element.getAttribute(\n                        DATA_CSLP_ATTR_SELECTOR\n                    );\n                    updateElementClasses(element, dataCslp || \"\", observer);\n                    requestDiscussionHighlights();\n                }\n            });\n        });\n\n        observers.push(observer);\n        // TODO: Check if we could add attributeFilter to the observer to only observe the attribute changes for the data-cslp attribute.\n        observer.observe(element, {\n            attributes: true,\n            childList: true, // Observe direct children\n            subtree: true,\n        });\n    });\n\n    setTimeout(() => {\n        if (observers.length > 0) {\n            observers.forEach((observer) => observer.disconnect());\n            observers.length = 0;\n        }\n    }, VARIANT_UPDATE_DELAY_MS);\n}\n"],"mappings":"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","names":[]}

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

@@ -156,8 +156,14 @@ function useVariantFieldsPostMessageEvent({ isSSR }) {
         if (selectedVariant) {
           addVariantFieldClass(selectedVariant);
         }
+        import_visualBuilderPostMessage.default?.send(
+          import_postMessage.VisualBuilderPostMessageEvents.REQUEST_DISCUSSION_HIGHLIGHTS
+        );
       } else {
         (0, import_useRecalculateVariantDataCSLPValues.updateVariantClasses)();
+        import_visualBuilderPostMessage.default?.send(
+          import_postMessage.VisualBuilderPostMessageEvents.REQUEST_DISCUSSION_HIGHLIGHTS
+        );
       }
     }
   );

package/dist/modern/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 { 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"]}
+{"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                // SSR DOM is final; observer never fires, request directly.\n                visualBuilderPostMessage?.send(\n                    VisualBuilderPostMessageEvents.REQUEST_DISCUSSION_HIGHLIGHTS\n                );\n            } else {\n                // CSR: observer in updateVariantClasses requests on settle.\n                updateVariantClasses();\n                visualBuilderPostMessage?.send(\n                    VisualBuilderPostMessageEvents.REQUEST_DISCUSSION_HIGHLIGHTS\n                );\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"]}

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

@@ -115,8 +115,14 @@ function useVariantFieldsPostMessageEvent({ isSSR }) {
         if (selectedVariant) {
           addVariantFieldClass(selectedVariant);
         }
+        visualBuilderPostMessage?.send(
+          VisualBuilderPostMessageEvents.REQUEST_DISCUSSION_HIGHLIGHTS
+        );
       } else {
         updateVariantClasses();
+        visualBuilderPostMessage?.send(
+          VisualBuilderPostMessageEvents.REQUEST_DISCUSSION_HIGHLIGHTS
+        );
       }
     }
   );

package/dist/modern/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 { 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":";;;AAAA,SAAS,qBAAqB;AAC9B,SAAS,2BAA2B;AACpC,OAAO,8BAA8B;AACrC,SAAS,sCAAsC;AAC/C,SAAS,sBAAsB;AAC/B,SAAS,4BAA4B;AACrC,SAAS,gBAAgB;AACzB,SAAS,wBAAwB,mBAAmB;AAkCpD,SAAS,oBAAoB,aAAqB,UAAkB,cAAiC;AACjG,MAAG,CAAC,gBAAgB,aAAa,WAAW,GAAG;AAC3C,WAAO;AAAA,EACX;AACA,QAAM,EAAC,SAAS,YAAW,IAAI,uBAAuB,QAAQ;AAC9D,QAAM,oBAAoB,aAAa,YAAY,WAAW;AAC9D,QAAM,qBAAqB,aAAa,YAAY,eAAe,EAAE;AACrE,MAAG,qBAAqB,GAAG;AACvB,WAAO;AAAA,EACX;AACA,SAAO,qBAAqB;AAChC;AAGO,SAAS,qBACZ,aACI;AACJ,QAAM,eAAe,cAAc,yBAAyB,MAAM;AAClE,QAAM,yBAAyB,cAAc,yBAAyB,MAAM;AAC5E,QAAM,WAAW,SAAS,iBAAiB,aAAa;AACxD,WAAS,QAAQ,CAAC,YAAY;AAC1B,UAAM,WAAW,QAAQ,aAAa,WAAW;AACjD,QAAI,CAAC,YAAY,QAAQ,EAAG;AAE5B,QAAI,UAAU,SAAS,WAAW,GAAG;AACjC,cAAQ,UAAU,IAAI,+BAA+B;AACrD,UAAI,wBAAwB;AACxB,gBAAQ,UAAU;AAAA,UACd,oBAAoB,EAAE,uCAAuC;AAAA,QACjE;AAAA,MACJ;AAAA,IACJ,WAAW,CAAC,SAAS,WAAW,KAAK,GAAG;AACpC,cAAQ,UAAU,IAAI,4BAA4B;AAAA,IACtD,WACS,oBAAoB,aAAa,UAAU,YAAY,GAAG;AAC/D,cAAQ,UAAU,IAAI,iCAAiC,2CAA2C;AAAA,IACtG,OACK;AACD,cAAQ,UAAU,IAAI,wCAAwC;AAAA,IAClE;AAAA,EACJ,CAAC;AACL;AAEO,IAAM,+BAA+B;AAAA,EACxC;AAAA,EACA;AAAA,EACA,EAAE,UAAU,KAAK;AACrB;AAEO,SAAS,wBACZ,kBAA2B,OACvB;AACJ,MAAI,iBAAiB;AACjB,UAAM,kBAAkB,SAAS;AAAA,MAC7B,IAAI,oBAAoB,EAAE,uCAAuC,CAAC;AAAA,IACtE;AACA,oBAAgB,QAAQ,CAAC,YAAY;AACjC,cAAQ,UAAU;AAAA,QACd,oBAAoB,EAAE,uCAAuC;AAAA,MACjE;AAAA,IACJ,CAAC;AAAA,EACL,OAAO;AACH,UAAM,8BAA8B,SAAS;AAAA,MACzC;AAAA,IACJ;AACA,gCAA4B,QAAQ,CAAC,YAAY;AAC7C,cAAQ,UAAU;AAAA,QACd;AAAA,QACA;AAAA,QACA,oBAAoB,EAAE,uCAAuC;AAAA,QAC7D;AAAA,QACA;AAAA,MACJ;AAAA,IACJ,CAAC;AAAA,EACL;AACJ;AAEO,SAAS,gBAAgB,MAAqB;AACjD,gBAAc,yBAAyB,MAAM,eAAe;AAChE;AACO,SAAS,WAAW,KAA0B;AACjD,gBAAc,yBAAyB,MAAM,UAAU;AAC3D;AACO,SAAS,UAAU,QAAsB;AAC5C,gBAAc,yBAAyB,MAAM,SAAS;AAC1D;AACO,SAAS,0BAA0B,WAA0B;AAChE,gBAAc,yBAAyB,MAAM,yBAAyB;AAC1E;AACO,SAAS,gBAAgB,cAA8B;AAC1D,gBAAc,yBAAyB,MAAM,eAAe;AAChE;AAKA,eAAsB,kCAAoF;AACtG,MAAI;AACA,UAAM,SAAS,MAAM,0BAA0B;AAAA,MAC3C,+BAA+B;AAAA,IACnC;AACA,WAAO,UAAU;AAAA,MACb,wBAAwB;AAAA,IAC5B;AAAA,EACJ,SAAS,OAAO;AACZ,YAAQ,MAAM,kDAAkD,KAAK;AACrE,WAAO;AAAA,MACH,wBAAwB;AAAA,IAC5B;AAAA,EACJ;AACJ;AAEO,SAAS,iCAAiC,EAAE,MAAM,GAA6B;AAClF,4BAA0B;AAAA,IACtB,+BAA+B;AAAA,IAC/B,CAAC,UAAwB;AACrB,YAAM,kBAAkB,MAAM,KAAK;AACnC,iBAAW,eAAe;AAM1B,qBAAe,MAAM;AACrB,UAAI,OAAO;AACP,YAAI,iBAAiB;AACjB,+BAAqB,eAAe;AAAA,QACxC;AAAA,MACJ,OAAO;AAEH,6BAAqB;AAAA,MACzB;AAAA,IACJ;AAAA,EACJ;AACA,4BAA0B;AAAA,IACtB,+BAA+B;AAAA,IAC/B,CAAC,UAAuB;AACpB,gBAAU,MAAM,KAAK,MAAM;AAAA,IAC/B;AAAA,EACJ;AACA,4BAA0B;AAAA,IACtB,+BAA+B;AAAA,IAC/B,CAAC,UAAyB;AACtB,sBAAgB,MAAM,KAAK,YAAY;AAAA,IAC3C;AAAA,EACJ;AACA,4BAA0B;AAAA,IACtB,+BAA+B;AAAA,IAC/B,CAAC,UAA8B;AAC3B,gCAA0B,MAAM,KAAK,aAAa,sBAAsB;AACxE,sBAAgB,MAAM,KAAK,aAAa,gBAAgB,CAAC,CAAC;AAC1D,8BAAwB;AACxB;AAAA,QACI,MAAM,KAAK,aAAa;AAAA,MAC5B;AAAA,IACJ;AAAA,EACJ;AACA,4BAA0B;AAAA,IACtB,+BAA+B;AAAA,IAC/B,CAAC,UAAoC;AACjC,gCAA0B,KAAK;AAC/B,8BAAwB,OAAO,MAAM,eAAe;AAAA,IACxD;AAAA,EACJ;AACJ;","names":[]}
+{"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                // SSR DOM is final; observer never fires, request directly.\n                visualBuilderPostMessage?.send(\n                    VisualBuilderPostMessageEvents.REQUEST_DISCUSSION_HIGHLIGHTS\n                );\n            } else {\n                // CSR: observer in updateVariantClasses requests on settle.\n                updateVariantClasses();\n                visualBuilderPostMessage?.send(\n                    VisualBuilderPostMessageEvents.REQUEST_DISCUSSION_HIGHLIGHTS\n                );\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":[]}

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

@@ -98,6 +98,8 @@ function updateHighlightedCommentIconPosition() {
           const { top, left } = targetElement.getBoundingClientRect();
           icon.style.top = `${top - highlighCommentOffset}px`;
           icon.style.left = `${left - highlighCommentOffset}px`;
+        } else {
+          icon.remove();
         }
       }
     }

package/dist/modern/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\";\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;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,oBAAyB;AACzB,IAAAA,iBAAuB;AACvB,oCAAmC;AACnC,oBAAoB;AAGpB,kBAA4B;AAU5B,IAAM,wBAAwB;AAEvB,SAAS,6BACZ,SACI;AACJ,QAAM,cAA0C,CAAC;AAEjD,UAAQ,QAAQ,CAAC,SAAS;AACtB,UAAM,YAAY,MAAM,eAAe;AAGvC,QAAI,KAAC,yBAAY,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,YACI,iBAAE,8BAAAC,SAAwB,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,gBAAc,QAAQ,CAAC,SAAS,MAAM,OAAO,CAAC;AAClD;AAEO,SAAS,mCAAyC;AACrD,QAAM,QAAQ,SAAS,iBAAiB,sBAAsB;AAC9D,SAAO,QAAQ,CAAC,SAAS,MAAM,OAAO,CAAC;AAC3C;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":["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                } else {\n                    // Target gone — drop the orphan icon.\n                    icon.remove();\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/modern/visualBuilder/generators/generateHighlightedComment.js

@@ -61,6 +61,8 @@ function updateHighlightedCommentIconPosition() {
           const { top, left } = targetElement.getBoundingClientRect();
           icon.style.top = `${top - highlighCommentOffset}px`;
           icon.style.left = `${left - highlighCommentOffset}px`;
+        } else {
+          icon.remove();
         }
       }
     }

package/dist/modern/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\";\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;AACtB,UAAM,YAAY,MAAM,eAAe;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,gBAAc,QAAQ,CAAC,SAAS,MAAM,OAAO,CAAC;AAClD;AAEO,SAAS,mCAAyC;AACrD,QAAM,QAAQ,SAAS,iBAAiB,sBAAsB;AAC9D,SAAO,QAAQ,CAAC,SAAS,MAAM,OAAO,CAAC;AAC3C;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                } else {\n                    // Target gone — drop the orphan icon.\n                    icon.remove();\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":[]}

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

@@ -58,9 +58,8 @@ function appendFocusedToolbar(eventDetails, focusedToolbarElement, hideOverlay,
 }
 async function appendFieldToolbar(eventDetails, focusedToolbarElement, hideOverlay, isVariant = false, options) {
   const { isHover } = options || {};
-  if (focusedToolbarElement.querySelector(
-    ".visual-builder__focused-toolbar__multiple-field-toolbar"
-  ) && !isHover)
+  const toolbarSelector = ".visual-builder__focused-toolbar__multiple-field-toolbar";
+  if (focusedToolbarElement.querySelector(toolbarSelector) && !isHover)
     return;
   const { acl: entryPermissions, workflowStage: entryWorkflowStageDetails, resolvedVariantPermissions } = await (0, import_fetchEntryPermissionsAndStageDetails.fetchEntryPermissionsAndStageDetails)({
     entryUid: eventDetails.fieldMetadata.entry_uid,
@@ -69,6 +68,8 @@ async function appendFieldToolbar(eventDetails, focusedToolbarElement, hideOverl
     variantUid: eventDetails.fieldMetadata.variant,
     fieldPathWithIndex: eventDetails.fieldMetadata.fieldPathWithIndex
   });
+  if (focusedToolbarElement.querySelector(toolbarSelector) && !isHover)
+    return;
   const wrapper = document.createDocumentFragment();
   (0, import_preact.render)(
     /* @__PURE__ */ (0, import_jsx_runtime.jsx)(

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/visualBuilder/generators/generateToolbar.tsx"],"sourcesContent":["import React from \"preact/compat\";\nimport { VisualBuilderCslpEventDetails } from \"../types/visualBuilder.types\";\nimport {\n    DATA_CSLP_ATTR_SELECTOR,\n    LIVE_PREVIEW_OUTLINE_WIDTH_IN_PX,\n    RIGHT_EDGE_BUFFER,\n    TOOLBAR_EDGE_BUFFER,\n    TOP_EDGE_BUFFER,\n} from \"../utils/constants\";\nimport FieldToolbarComponent from \"../components/FieldToolbar\";\nimport { render } from \"preact\";\nimport FieldLabelWrapperComponent from \"../components/fieldLabelWrapper\";\nimport { VisualBuilderPostMessageEvents } from \"../utils/types/postMessage.types\";\nimport visualBuilderPostMessage from \"../utils/visualBuilderPostMessage\";\nimport { fetchEntryPermissionsAndStageDetails } from \"../utils/fetchEntryPermissionsAndStageDetails\";\n\nexport function appendFocusedToolbar(\n    eventDetails: VisualBuilderCslpEventDetails,\n    focusedToolbarElement: HTMLDivElement,\n    hideOverlay: () => void,\n    isVariant: boolean = false,\n    options?: {\n        isHover?: boolean;\n    }\n): void {\n    appendFieldPathDropdown(eventDetails, focusedToolbarElement, options);\n    if(options?.isHover) {\n        return;\n    }\n    appendFieldToolbar(\n        eventDetails,\n        focusedToolbarElement,\n        hideOverlay,\n        isVariant\n    );\n}\n\nexport async function appendFieldToolbar(\n    eventDetails: VisualBuilderCslpEventDetails,\n    focusedToolbarElement: HTMLDivElement,\n    hideOverlay: () => void,\n    isVariant: boolean = false,\n    options?: {\n        isHover?: boolean;\n    }\n): Promise<void> {\n    const { isHover } = options || {};\n    if (\n        focusedToolbarElement.querySelector(\n            \".visual-builder__focused-toolbar__multiple-field-toolbar\"\n        ) && !isHover\n    )\n        return;\n    const { acl: entryPermissions, workflowStage: entryWorkflowStageDetails, resolvedVariantPermissions } =\n        await fetchEntryPermissionsAndStageDetails({\n            entryUid: eventDetails.fieldMetadata.entry_uid,\n            contentTypeUid: eventDetails.fieldMetadata.content_type_uid,\n            locale: eventDetails.fieldMetadata.locale,\n            variantUid: eventDetails.fieldMetadata.variant,\n            fieldPathWithIndex: eventDetails.fieldMetadata.fieldPathWithIndex,\n        });\n    const wrapper = document.createDocumentFragment();\n    render(\n        <FieldToolbarComponent\n            eventDetails={eventDetails}\n            hideOverlay={hideOverlay}\n            isVariant={isVariant}\n            entryPermissions={entryPermissions}\n            entryWorkflowStageDetails={entryWorkflowStageDetails}\n            resolvedVariantPermissions={resolvedVariantPermissions}\n        />,\n        wrapper\n    );\n    focusedToolbarElement.append(wrapper);\n}\n\nexport function appendFieldPathDropdown(\n    eventDetails: VisualBuilderCslpEventDetails,\n    focusedToolbarElement: HTMLDivElement,\n    options?: {\n        isHover?: boolean;\n    }\n): void {\n    const { isHover } = options || {};\n    const fieldLabelWrapper = document.querySelector(\n        \".visual-builder__focused-toolbar__field-label-wrapper\"\n    ) as HTMLDivElement | null;\n    const { editableElement: targetElement, fieldMetadata } = eventDetails;\n\n    if (fieldLabelWrapper) {\n        if(isHover) {\n            const fieldCslp = fieldLabelWrapper.getAttribute(\"data-hovered-cslp\");\n            if(fieldCslp === fieldMetadata.cslpValue) {\n                return;\n            } else {\n                removeFieldToolbar(focusedToolbarElement);\n            }\n        } else {\n            return;\n        }\n    }\n    \n    const targetElementDimension = targetElement.getBoundingClientRect();\n\n    const distanceFromTop =\n        targetElementDimension.top + window.scrollY - TOOLBAR_EDGE_BUFFER;\n    // Position the toolbar at the top unless there's insufficient space or scrolling up is not possible (topmost element targetted).\n    const adjustedDistanceFromTop =\n        targetElementDimension.top + window.scrollY < TOP_EDGE_BUFFER\n            ? distanceFromTop + targetElementDimension.height + TOP_EDGE_BUFFER\n            : distanceFromTop;\n\n    const distanceFromLeft =\n        targetElementDimension.left - LIVE_PREVIEW_OUTLINE_WIDTH_IN_PX;\n    const adjustedDistanceFromLeft = Math.max(\n        distanceFromLeft,\n        TOOLBAR_EDGE_BUFFER\n    );\n\n    const targetElementRightEdgeOffset =\n        window.scrollX + window.innerWidth - targetElementDimension.left;\n\n    if (targetElementRightEdgeOffset < RIGHT_EDGE_BUFFER) {\n        // Overflow / Cutoff on right edge\n        focusedToolbarElement.style.justifyContent = \"flex-end\";\n        focusedToolbarElement.style.left = `${\n            targetElementDimension.right + LIVE_PREVIEW_OUTLINE_WIDTH_IN_PX\n        }px`;\n    } else {\n        focusedToolbarElement.style.justifyContent = \"flex-start\"; // default\n        focusedToolbarElement.style.left = `${adjustedDistanceFromLeft}px`;\n    }\n\n    focusedToolbarElement.style.top = `${adjustedDistanceFromTop}px`;\n\n    const parentPaths = collectParentCSLPPaths(targetElement, 2);\n\n    const wrapper = document.createDocumentFragment();\n    render(\n        <FieldLabelWrapperComponent\n            fieldMetadata={fieldMetadata}\n            eventDetails={eventDetails}\n            parentPaths={parentPaths}\n            getParentEditableElement={(cslp: string) => {\n                const parentElement = targetElement.closest(\n                    `[${DATA_CSLP_ATTR_SELECTOR}=\"${cslp}\"]`\n                ) as HTMLElement | null;\n                return parentElement;\n            }}\n        />,\n        wrapper\n    );\n\n    focusedToolbarElement.appendChild(wrapper);\n}\n\nfunction collectParentCSLPPaths(\n    targetElement: Element,\n    count: number\n): Array<string> {\n    const cslpPaths: Array<string> = [];\n    let currentElement = targetElement.parentElement;\n\n    while (count > 0 || currentElement === window.document.body) {\n        if (!currentElement) {\n            return cslpPaths;\n        }\n\n        if (currentElement.hasAttribute(DATA_CSLP_ATTR_SELECTOR)) {\n            cslpPaths.push(\n                currentElement.getAttribute(DATA_CSLP_ATTR_SELECTOR) as string\n            );\n            count--;\n        }\n        currentElement = currentElement.parentElement;\n    }\n\n    return cslpPaths;\n}\n\nexport function removeFieldToolbar(toolbar: Element) {\n    toolbar.innerHTML = \"\";\n    const toolbarEvents = [\n        VisualBuilderPostMessageEvents.DELETE_INSTANCE,\n        VisualBuilderPostMessageEvents.UPDATE_DISCUSSION_ID,\n        VisualBuilderPostMessageEvents.FIELD_LOCATION_DATA\n    ];\n    toolbarEvents.forEach((event) => {\n        //@ts-expect-error - We are accessing private method here, but it is necessary to clean up the event listeners.\n        if (visualBuilderPostMessage?.requestMessageHandlers?.has(event)) {\n            //@ts-expect-error - We are accessing private method here, but it is necessary to clean up the event listeners.\n            visualBuilderPostMessage?.unregisterEvent?.(event);\n        }\n    });\n}\n"],"mappings":"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","names":["FieldToolbarComponent","FieldLabelWrapperComponent","visualBuilderPostMessage"]}
+{"version":3,"sources":["../../../../src/visualBuilder/generators/generateToolbar.tsx"],"sourcesContent":["import React from \"preact/compat\";\nimport { VisualBuilderCslpEventDetails } from \"../types/visualBuilder.types\";\nimport {\n    DATA_CSLP_ATTR_SELECTOR,\n    LIVE_PREVIEW_OUTLINE_WIDTH_IN_PX,\n    RIGHT_EDGE_BUFFER,\n    TOOLBAR_EDGE_BUFFER,\n    TOP_EDGE_BUFFER,\n} from \"../utils/constants\";\nimport FieldToolbarComponent from \"../components/FieldToolbar\";\nimport { render } from \"preact\";\nimport FieldLabelWrapperComponent from \"../components/fieldLabelWrapper\";\nimport { VisualBuilderPostMessageEvents } from \"../utils/types/postMessage.types\";\nimport visualBuilderPostMessage from \"../utils/visualBuilderPostMessage\";\nimport { fetchEntryPermissionsAndStageDetails } from \"../utils/fetchEntryPermissionsAndStageDetails\";\n\nexport function appendFocusedToolbar(\n    eventDetails: VisualBuilderCslpEventDetails,\n    focusedToolbarElement: HTMLDivElement,\n    hideOverlay: () => void,\n    isVariant: boolean = false,\n    options?: {\n        isHover?: boolean;\n    }\n): void {\n    appendFieldPathDropdown(eventDetails, focusedToolbarElement, options);\n    if(options?.isHover) {\n        return;\n    }\n    appendFieldToolbar(\n        eventDetails,\n        focusedToolbarElement,\n        hideOverlay,\n        isVariant\n    );\n}\n\nexport async function appendFieldToolbar(\n    eventDetails: VisualBuilderCslpEventDetails,\n    focusedToolbarElement: HTMLDivElement,\n    hideOverlay: () => void,\n    isVariant: boolean = false,\n    options?: {\n        isHover?: boolean;\n    }\n): Promise<void> {\n    const { isHover } = options || {};\n    const toolbarSelector = \".visual-builder__focused-toolbar__multiple-field-toolbar\";\n    if (focusedToolbarElement.querySelector(toolbarSelector) && !isHover)\n        return;\n    const { acl: entryPermissions, workflowStage: entryWorkflowStageDetails, resolvedVariantPermissions } =\n        await fetchEntryPermissionsAndStageDetails({\n            entryUid: eventDetails.fieldMetadata.entry_uid,\n            contentTypeUid: eventDetails.fieldMetadata.content_type_uid,\n            locale: eventDetails.fieldMetadata.locale,\n            variantUid: eventDetails.fieldMetadata.variant,\n            fieldPathWithIndex: eventDetails.fieldMetadata.fieldPathWithIndex,\n        });\n    // Re-check after the async gap: a concurrent call (e.g. reEvaluate) may have\n    // already appended while fetchEntryPermissionsAndStageDetails was in-flight.\n    if (focusedToolbarElement.querySelector(toolbarSelector) && !isHover)\n        return;\n    const wrapper = document.createDocumentFragment();\n    render(\n        <FieldToolbarComponent\n            eventDetails={eventDetails}\n            hideOverlay={hideOverlay}\n            isVariant={isVariant}\n            entryPermissions={entryPermissions}\n            entryWorkflowStageDetails={entryWorkflowStageDetails}\n            resolvedVariantPermissions={resolvedVariantPermissions}\n        />,\n        wrapper\n    );\n    focusedToolbarElement.append(wrapper);\n}\n\nexport function appendFieldPathDropdown(\n    eventDetails: VisualBuilderCslpEventDetails,\n    focusedToolbarElement: HTMLDivElement,\n    options?: {\n        isHover?: boolean;\n    }\n): void {\n    const { isHover } = options || {};\n    const fieldLabelWrapper = document.querySelector(\n        \".visual-builder__focused-toolbar__field-label-wrapper\"\n    ) as HTMLDivElement | null;\n    const { editableElement: targetElement, fieldMetadata } = eventDetails;\n\n    if (fieldLabelWrapper) {\n        if(isHover) {\n            const fieldCslp = fieldLabelWrapper.getAttribute(\"data-hovered-cslp\");\n            if(fieldCslp === fieldMetadata.cslpValue) {\n                return;\n            } else {\n                removeFieldToolbar(focusedToolbarElement);\n            }\n        } else {\n            return;\n        }\n    }\n    \n    const targetElementDimension = targetElement.getBoundingClientRect();\n\n    const distanceFromTop =\n        targetElementDimension.top + window.scrollY - TOOLBAR_EDGE_BUFFER;\n    // Position the toolbar at the top unless there's insufficient space or scrolling up is not possible (topmost element targetted).\n    const adjustedDistanceFromTop =\n        targetElementDimension.top + window.scrollY < TOP_EDGE_BUFFER\n            ? distanceFromTop + targetElementDimension.height + TOP_EDGE_BUFFER\n            : distanceFromTop;\n\n    const distanceFromLeft =\n        targetElementDimension.left - LIVE_PREVIEW_OUTLINE_WIDTH_IN_PX;\n    const adjustedDistanceFromLeft = Math.max(\n        distanceFromLeft,\n        TOOLBAR_EDGE_BUFFER\n    );\n\n    const targetElementRightEdgeOffset =\n        window.scrollX + window.innerWidth - targetElementDimension.left;\n\n    if (targetElementRightEdgeOffset < RIGHT_EDGE_BUFFER) {\n        // Overflow / Cutoff on right edge\n        focusedToolbarElement.style.justifyContent = \"flex-end\";\n        focusedToolbarElement.style.left = `${\n            targetElementDimension.right + LIVE_PREVIEW_OUTLINE_WIDTH_IN_PX\n        }px`;\n    } else {\n        focusedToolbarElement.style.justifyContent = \"flex-start\"; // default\n        focusedToolbarElement.style.left = `${adjustedDistanceFromLeft}px`;\n    }\n\n    focusedToolbarElement.style.top = `${adjustedDistanceFromTop}px`;\n\n    const parentPaths = collectParentCSLPPaths(targetElement, 2);\n\n    const wrapper = document.createDocumentFragment();\n    render(\n        <FieldLabelWrapperComponent\n            fieldMetadata={fieldMetadata}\n            eventDetails={eventDetails}\n            parentPaths={parentPaths}\n            getParentEditableElement={(cslp: string) => {\n                const parentElement = targetElement.closest(\n                    `[${DATA_CSLP_ATTR_SELECTOR}=\"${cslp}\"]`\n                ) as HTMLElement | null;\n                return parentElement;\n            }}\n        />,\n        wrapper\n    );\n\n    focusedToolbarElement.appendChild(wrapper);\n}\n\nfunction collectParentCSLPPaths(\n    targetElement: Element,\n    count: number\n): Array<string> {\n    const cslpPaths: Array<string> = [];\n    let currentElement = targetElement.parentElement;\n\n    while (count > 0 || currentElement === window.document.body) {\n        if (!currentElement) {\n            return cslpPaths;\n        }\n\n        if (currentElement.hasAttribute(DATA_CSLP_ATTR_SELECTOR)) {\n            cslpPaths.push(\n                currentElement.getAttribute(DATA_CSLP_ATTR_SELECTOR) as string\n            );\n            count--;\n        }\n        currentElement = currentElement.parentElement;\n    }\n\n    return cslpPaths;\n}\n\nexport function removeFieldToolbar(toolbar: Element) {\n    toolbar.innerHTML = \"\";\n    const toolbarEvents = [\n        VisualBuilderPostMessageEvents.DELETE_INSTANCE,\n        VisualBuilderPostMessageEvents.UPDATE_DISCUSSION_ID,\n        VisualBuilderPostMessageEvents.FIELD_LOCATION_DATA\n    ];\n    toolbarEvents.forEach((event) => {\n        //@ts-expect-error - We are accessing private method here, but it is necessary to clean up the event listeners.\n        if (visualBuilderPostMessage?.requestMessageHandlers?.has(event)) {\n            //@ts-expect-error - We are accessing private method here, but it is necessary to clean up the event listeners.\n            visualBuilderPostMessage?.unregisterEvent?.(event);\n        }\n    });\n}\n"],"mappings":"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","names":["FieldToolbarComponent","FieldLabelWrapperComponent","visualBuilderPostMessage"]}

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

@@ -29,9 +29,8 @@ function appendFocusedToolbar(eventDetails, focusedToolbarElement, hideOverlay,
 }
 async function appendFieldToolbar(eventDetails, focusedToolbarElement, hideOverlay, isVariant = false, options) {
   const { isHover } = options || {};
-  if (focusedToolbarElement.querySelector(
-    ".visual-builder__focused-toolbar__multiple-field-toolbar"
-  ) && !isHover)
+  const toolbarSelector = ".visual-builder__focused-toolbar__multiple-field-toolbar";
+  if (focusedToolbarElement.querySelector(toolbarSelector) && !isHover)
     return;
   const { acl: entryPermissions, workflowStage: entryWorkflowStageDetails, resolvedVariantPermissions } = await fetchEntryPermissionsAndStageDetails({
     entryUid: eventDetails.fieldMetadata.entry_uid,
@@ -40,6 +39,8 @@ async function appendFieldToolbar(eventDetails, focusedToolbarElement, hideOverl
     variantUid: eventDetails.fieldMetadata.variant,
     fieldPathWithIndex: eventDetails.fieldMetadata.fieldPathWithIndex
   });
+  if (focusedToolbarElement.querySelector(toolbarSelector) && !isHover)
+    return;
   const wrapper = document.createDocumentFragment();
   render(
     /* @__PURE__ */ jsx(

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/visualBuilder/generators/generateToolbar.tsx"],"sourcesContent":["import React from \"preact/compat\";\nimport { VisualBuilderCslpEventDetails } from \"../types/visualBuilder.types\";\nimport {\n    DATA_CSLP_ATTR_SELECTOR,\n    LIVE_PREVIEW_OUTLINE_WIDTH_IN_PX,\n    RIGHT_EDGE_BUFFER,\n    TOOLBAR_EDGE_BUFFER,\n    TOP_EDGE_BUFFER,\n} from \"../utils/constants\";\nimport FieldToolbarComponent from \"../components/FieldToolbar\";\nimport { render } from \"preact\";\nimport FieldLabelWrapperComponent from \"../components/fieldLabelWrapper\";\nimport { VisualBuilderPostMessageEvents } from \"../utils/types/postMessage.types\";\nimport visualBuilderPostMessage from \"../utils/visualBuilderPostMessage\";\nimport { fetchEntryPermissionsAndStageDetails } from \"../utils/fetchEntryPermissionsAndStageDetails\";\n\nexport function appendFocusedToolbar(\n    eventDetails: VisualBuilderCslpEventDetails,\n    focusedToolbarElement: HTMLDivElement,\n    hideOverlay: () => void,\n    isVariant: boolean = false,\n    options?: {\n        isHover?: boolean;\n    }\n): void {\n    appendFieldPathDropdown(eventDetails, focusedToolbarElement, options);\n    if(options?.isHover) {\n        return;\n    }\n    appendFieldToolbar(\n        eventDetails,\n        focusedToolbarElement,\n        hideOverlay,\n        isVariant\n    );\n}\n\nexport async function appendFieldToolbar(\n    eventDetails: VisualBuilderCslpEventDetails,\n    focusedToolbarElement: HTMLDivElement,\n    hideOverlay: () => void,\n    isVariant: boolean = false,\n    options?: {\n        isHover?: boolean;\n    }\n): Promise<void> {\n    const { isHover } = options || {};\n    if (\n        focusedToolbarElement.querySelector(\n            \".visual-builder__focused-toolbar__multiple-field-toolbar\"\n        ) && !isHover\n    )\n        return;\n    const { acl: entryPermissions, workflowStage: entryWorkflowStageDetails, resolvedVariantPermissions } =\n        await fetchEntryPermissionsAndStageDetails({\n            entryUid: eventDetails.fieldMetadata.entry_uid,\n            contentTypeUid: eventDetails.fieldMetadata.content_type_uid,\n            locale: eventDetails.fieldMetadata.locale,\n            variantUid: eventDetails.fieldMetadata.variant,\n            fieldPathWithIndex: eventDetails.fieldMetadata.fieldPathWithIndex,\n        });\n    const wrapper = document.createDocumentFragment();\n    render(\n        <FieldToolbarComponent\n            eventDetails={eventDetails}\n            hideOverlay={hideOverlay}\n            isVariant={isVariant}\n            entryPermissions={entryPermissions}\n            entryWorkflowStageDetails={entryWorkflowStageDetails}\n            resolvedVariantPermissions={resolvedVariantPermissions}\n        />,\n        wrapper\n    );\n    focusedToolbarElement.append(wrapper);\n}\n\nexport function appendFieldPathDropdown(\n    eventDetails: VisualBuilderCslpEventDetails,\n    focusedToolbarElement: HTMLDivElement,\n    options?: {\n        isHover?: boolean;\n    }\n): void {\n    const { isHover } = options || {};\n    const fieldLabelWrapper = document.querySelector(\n        \".visual-builder__focused-toolbar__field-label-wrapper\"\n    ) as HTMLDivElement | null;\n    const { editableElement: targetElement, fieldMetadata } = eventDetails;\n\n    if (fieldLabelWrapper) {\n        if(isHover) {\n            const fieldCslp = fieldLabelWrapper.getAttribute(\"data-hovered-cslp\");\n            if(fieldCslp === fieldMetadata.cslpValue) {\n                return;\n            } else {\n                removeFieldToolbar(focusedToolbarElement);\n            }\n        } else {\n            return;\n        }\n    }\n    \n    const targetElementDimension = targetElement.getBoundingClientRect();\n\n    const distanceFromTop =\n        targetElementDimension.top + window.scrollY - TOOLBAR_EDGE_BUFFER;\n    // Position the toolbar at the top unless there's insufficient space or scrolling up is not possible (topmost element targetted).\n    const adjustedDistanceFromTop =\n        targetElementDimension.top + window.scrollY < TOP_EDGE_BUFFER\n            ? distanceFromTop + targetElementDimension.height + TOP_EDGE_BUFFER\n            : distanceFromTop;\n\n    const distanceFromLeft =\n        targetElementDimension.left - LIVE_PREVIEW_OUTLINE_WIDTH_IN_PX;\n    const adjustedDistanceFromLeft = Math.max(\n        distanceFromLeft,\n        TOOLBAR_EDGE_BUFFER\n    );\n\n    const targetElementRightEdgeOffset =\n        window.scrollX + window.innerWidth - targetElementDimension.left;\n\n    if (targetElementRightEdgeOffset < RIGHT_EDGE_BUFFER) {\n        // Overflow / Cutoff on right edge\n        focusedToolbarElement.style.justifyContent = \"flex-end\";\n        focusedToolbarElement.style.left = `${\n            targetElementDimension.right + LIVE_PREVIEW_OUTLINE_WIDTH_IN_PX\n        }px`;\n    } else {\n        focusedToolbarElement.style.justifyContent = \"flex-start\"; // default\n        focusedToolbarElement.style.left = `${adjustedDistanceFromLeft}px`;\n    }\n\n    focusedToolbarElement.style.top = `${adjustedDistanceFromTop}px`;\n\n    const parentPaths = collectParentCSLPPaths(targetElement, 2);\n\n    const wrapper = document.createDocumentFragment();\n    render(\n        <FieldLabelWrapperComponent\n            fieldMetadata={fieldMetadata}\n            eventDetails={eventDetails}\n            parentPaths={parentPaths}\n            getParentEditableElement={(cslp: string) => {\n                const parentElement = targetElement.closest(\n                    `[${DATA_CSLP_ATTR_SELECTOR}=\"${cslp}\"]`\n                ) as HTMLElement | null;\n                return parentElement;\n            }}\n        />,\n        wrapper\n    );\n\n    focusedToolbarElement.appendChild(wrapper);\n}\n\nfunction collectParentCSLPPaths(\n    targetElement: Element,\n    count: number\n): Array<string> {\n    const cslpPaths: Array<string> = [];\n    let currentElement = targetElement.parentElement;\n\n    while (count > 0 || currentElement === window.document.body) {\n        if (!currentElement) {\n            return cslpPaths;\n        }\n\n        if (currentElement.hasAttribute(DATA_CSLP_ATTR_SELECTOR)) {\n            cslpPaths.push(\n                currentElement.getAttribute(DATA_CSLP_ATTR_SELECTOR) as string\n            );\n            count--;\n        }\n        currentElement = currentElement.parentElement;\n    }\n\n    return cslpPaths;\n}\n\nexport function removeFieldToolbar(toolbar: Element) {\n    toolbar.innerHTML = \"\";\n    const toolbarEvents = [\n        VisualBuilderPostMessageEvents.DELETE_INSTANCE,\n        VisualBuilderPostMessageEvents.UPDATE_DISCUSSION_ID,\n        VisualBuilderPostMessageEvents.FIELD_LOCATION_DATA\n    ];\n    toolbarEvents.forEach((event) => {\n        //@ts-expect-error - We are accessing private method here, but it is necessary to clean up the event listeners.\n        if (visualBuilderPostMessage?.requestMessageHandlers?.has(event)) {\n            //@ts-expect-error - We are accessing private method here, but it is necessary to clean up the event listeners.\n            visualBuilderPostMessage?.unregisterEvent?.(event);\n        }\n    });\n}\n"],"mappings":"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","names":[]}
+{"version":3,"sources":["../../../../src/visualBuilder/generators/generateToolbar.tsx"],"sourcesContent":["import React from \"preact/compat\";\nimport { VisualBuilderCslpEventDetails } from \"../types/visualBuilder.types\";\nimport {\n    DATA_CSLP_ATTR_SELECTOR,\n    LIVE_PREVIEW_OUTLINE_WIDTH_IN_PX,\n    RIGHT_EDGE_BUFFER,\n    TOOLBAR_EDGE_BUFFER,\n    TOP_EDGE_BUFFER,\n} from \"../utils/constants\";\nimport FieldToolbarComponent from \"../components/FieldToolbar\";\nimport { render } from \"preact\";\nimport FieldLabelWrapperComponent from \"../components/fieldLabelWrapper\";\nimport { VisualBuilderPostMessageEvents } from \"../utils/types/postMessage.types\";\nimport visualBuilderPostMessage from \"../utils/visualBuilderPostMessage\";\nimport { fetchEntryPermissionsAndStageDetails } from \"../utils/fetchEntryPermissionsAndStageDetails\";\n\nexport function appendFocusedToolbar(\n    eventDetails: VisualBuilderCslpEventDetails,\n    focusedToolbarElement: HTMLDivElement,\n    hideOverlay: () => void,\n    isVariant: boolean = false,\n    options?: {\n        isHover?: boolean;\n    }\n): void {\n    appendFieldPathDropdown(eventDetails, focusedToolbarElement, options);\n    if(options?.isHover) {\n        return;\n    }\n    appendFieldToolbar(\n        eventDetails,\n        focusedToolbarElement,\n        hideOverlay,\n        isVariant\n    );\n}\n\nexport async function appendFieldToolbar(\n    eventDetails: VisualBuilderCslpEventDetails,\n    focusedToolbarElement: HTMLDivElement,\n    hideOverlay: () => void,\n    isVariant: boolean = false,\n    options?: {\n        isHover?: boolean;\n    }\n): Promise<void> {\n    const { isHover } = options || {};\n    const toolbarSelector = \".visual-builder__focused-toolbar__multiple-field-toolbar\";\n    if (focusedToolbarElement.querySelector(toolbarSelector) && !isHover)\n        return;\n    const { acl: entryPermissions, workflowStage: entryWorkflowStageDetails, resolvedVariantPermissions } =\n        await fetchEntryPermissionsAndStageDetails({\n            entryUid: eventDetails.fieldMetadata.entry_uid,\n            contentTypeUid: eventDetails.fieldMetadata.content_type_uid,\n            locale: eventDetails.fieldMetadata.locale,\n            variantUid: eventDetails.fieldMetadata.variant,\n            fieldPathWithIndex: eventDetails.fieldMetadata.fieldPathWithIndex,\n        });\n    // Re-check after the async gap: a concurrent call (e.g. reEvaluate) may have\n    // already appended while fetchEntryPermissionsAndStageDetails was in-flight.\n    if (focusedToolbarElement.querySelector(toolbarSelector) && !isHover)\n        return;\n    const wrapper = document.createDocumentFragment();\n    render(\n        <FieldToolbarComponent\n            eventDetails={eventDetails}\n            hideOverlay={hideOverlay}\n            isVariant={isVariant}\n            entryPermissions={entryPermissions}\n            entryWorkflowStageDetails={entryWorkflowStageDetails}\n            resolvedVariantPermissions={resolvedVariantPermissions}\n        />,\n        wrapper\n    );\n    focusedToolbarElement.append(wrapper);\n}\n\nexport function appendFieldPathDropdown(\n    eventDetails: VisualBuilderCslpEventDetails,\n    focusedToolbarElement: HTMLDivElement,\n    options?: {\n        isHover?: boolean;\n    }\n): void {\n    const { isHover } = options || {};\n    const fieldLabelWrapper = document.querySelector(\n        \".visual-builder__focused-toolbar__field-label-wrapper\"\n    ) as HTMLDivElement | null;\n    const { editableElement: targetElement, fieldMetadata } = eventDetails;\n\n    if (fieldLabelWrapper) {\n        if(isHover) {\n            const fieldCslp = fieldLabelWrapper.getAttribute(\"data-hovered-cslp\");\n            if(fieldCslp === fieldMetadata.cslpValue) {\n                return;\n            } else {\n                removeFieldToolbar(focusedToolbarElement);\n            }\n        } else {\n            return;\n        }\n    }\n    \n    const targetElementDimension = targetElement.getBoundingClientRect();\n\n    const distanceFromTop =\n        targetElementDimension.top + window.scrollY - TOOLBAR_EDGE_BUFFER;\n    // Position the toolbar at the top unless there's insufficient space or scrolling up is not possible (topmost element targetted).\n    const adjustedDistanceFromTop =\n        targetElementDimension.top + window.scrollY < TOP_EDGE_BUFFER\n            ? distanceFromTop + targetElementDimension.height + TOP_EDGE_BUFFER\n            : distanceFromTop;\n\n    const distanceFromLeft =\n        targetElementDimension.left - LIVE_PREVIEW_OUTLINE_WIDTH_IN_PX;\n    const adjustedDistanceFromLeft = Math.max(\n        distanceFromLeft,\n        TOOLBAR_EDGE_BUFFER\n    );\n\n    const targetElementRightEdgeOffset =\n        window.scrollX + window.innerWidth - targetElementDimension.left;\n\n    if (targetElementRightEdgeOffset < RIGHT_EDGE_BUFFER) {\n        // Overflow / Cutoff on right edge\n        focusedToolbarElement.style.justifyContent = \"flex-end\";\n        focusedToolbarElement.style.left = `${\n            targetElementDimension.right + LIVE_PREVIEW_OUTLINE_WIDTH_IN_PX\n        }px`;\n    } else {\n        focusedToolbarElement.style.justifyContent = \"flex-start\"; // default\n        focusedToolbarElement.style.left = `${adjustedDistanceFromLeft}px`;\n    }\n\n    focusedToolbarElement.style.top = `${adjustedDistanceFromTop}px`;\n\n    const parentPaths = collectParentCSLPPaths(targetElement, 2);\n\n    const wrapper = document.createDocumentFragment();\n    render(\n        <FieldLabelWrapperComponent\n            fieldMetadata={fieldMetadata}\n            eventDetails={eventDetails}\n            parentPaths={parentPaths}\n            getParentEditableElement={(cslp: string) => {\n                const parentElement = targetElement.closest(\n                    `[${DATA_CSLP_ATTR_SELECTOR}=\"${cslp}\"]`\n                ) as HTMLElement | null;\n                return parentElement;\n            }}\n        />,\n        wrapper\n    );\n\n    focusedToolbarElement.appendChild(wrapper);\n}\n\nfunction collectParentCSLPPaths(\n    targetElement: Element,\n    count: number\n): Array<string> {\n    const cslpPaths: Array<string> = [];\n    let currentElement = targetElement.parentElement;\n\n    while (count > 0 || currentElement === window.document.body) {\n        if (!currentElement) {\n            return cslpPaths;\n        }\n\n        if (currentElement.hasAttribute(DATA_CSLP_ATTR_SELECTOR)) {\n            cslpPaths.push(\n                currentElement.getAttribute(DATA_CSLP_ATTR_SELECTOR) as string\n            );\n            count--;\n        }\n        currentElement = currentElement.parentElement;\n    }\n\n    return cslpPaths;\n}\n\nexport function removeFieldToolbar(toolbar: Element) {\n    toolbar.innerHTML = \"\";\n    const toolbarEvents = [\n        VisualBuilderPostMessageEvents.DELETE_INSTANCE,\n        VisualBuilderPostMessageEvents.UPDATE_DISCUSSION_ID,\n        VisualBuilderPostMessageEvents.FIELD_LOCATION_DATA\n    ];\n    toolbarEvents.forEach((event) => {\n        //@ts-expect-error - We are accessing private method here, but it is necessary to clean up the event listeners.\n        if (visualBuilderPostMessage?.requestMessageHandlers?.has(event)) {\n            //@ts-expect-error - We are accessing private method here, but it is necessary to clean up the event listeners.\n            visualBuilderPostMessage?.unregisterEvent?.(event);\n        }\n    });\n}\n"],"mappings":"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","names":[]}

package/dist/modern/visualBuilder/listeners/mouseClick.cjs

@@ -56,6 +56,8 @@ var import_generateThread3 = require("../generators/generateThread.cjs");
 var import_collabUtils = require("../utils/collabUtils.cjs");
 var import_uuid = require("uuid");
 var import_fetchEntryPermissionsAndStageDetails = require("../utils/fetchEntryPermissionsAndStageDetails.cjs");
+var import_isCustomFieldMultipleInstance = require("../utils/isCustomFieldMultipleInstance.cjs");
+var import_getWholeFieldElement = require("../utils/getWholeFieldElement.cjs");
 function addOverlay(params) {
   if (!params.overlayWrapper || !params.editableElement) return;
   (0, import_generateOverlay.addFocusOverlay)(
@@ -142,6 +144,30 @@ async function handleBuilderInteraction(params) {
     return;
   }
   const { editableElement, fieldMetadata } = eventDetails;
+  const { content_type_uid, fieldPath } = fieldMetadata;
+  if (import_fieldSchemaMap.FieldSchemaMap.hasFieldSchema(content_type_uid, fieldPath)) {
+    const fieldSchemaForCheck = await import_fieldSchemaMap.FieldSchemaMap.getFieldSchema(content_type_uid, fieldPath);
+    if (fieldSchemaForCheck && (0, import_isCustomFieldMultipleInstance.isCustomFieldMultipleInstance)(fieldSchemaForCheck, fieldMetadata)) {
+      const parentCslp = (0, import_getWholeFieldElement.getParentCslp)(fieldMetadata.cslpValue);
+      const wholeFieldElement = (0, import_getWholeFieldElement.getWholeFieldElement)(editableElement, parentCslp);
+      if (wholeFieldElement) {
+        wholeFieldElement.dispatchEvent(
+          new MouseEvent("click", {
+            bubbles: true,
+            cancelable: true,
+            clientX: params.event.clientX,
+            clientY: params.event.clientY
+          })
+        );
+      } else if (config.debug) {
+        console.debug(
+          "[Visual Builder] Custom field multiple instance: whole-field parent not found in DOM for CSLP",
+          parentCslp
+        );
+      }
+      return;
+    }
+  }
   const variantStatus = await (0, import_FieldRevertComponent.getFieldVariantStatus)(fieldMetadata);
   const isVariant = variantStatus ? Object.values(variantStatus).some((value) => value === true) : false;
   cleanResidualsIfNeeded(params, editableElement);