npm - @contentstack/live-preview-utils - Versions diffs - 4.4.1 → 4.4.3 - Mend

@contentstack/live-preview-utils 4.4.1 → 4.4.3

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

Files changed (208) hide show

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

@@ -151,6 +151,7 @@ function useVariantFieldsPostMessageEvent({ isSSR }) {
   (_a = import_visualBuilderPostMessage.default) == null ? void 0 : _a.on(
     import_postMessage.VisualBuilderPostMessageEvents.GET_VARIANT_ID,
     (event) => {
+      var _a2, _b2;
       const selectedVariant = event.data.variant;
       setVariant(selectedVariant);
       import_fieldSchemaMap.FieldSchemaMap.clear();
@@ -158,8 +159,14 @@ function useVariantFieldsPostMessageEvent({ isSSR }) {
         if (selectedVariant) {
           addVariantFieldClass(selectedVariant);
         }
+        (_a2 = import_visualBuilderPostMessage.default) == null ? void 0 : _a2.send(
+          import_postMessage.VisualBuilderPostMessageEvents.REQUEST_DISCUSSION_HIGHLIGHTS
+        );
       } else {
         (0, import_useRecalculateVariantDataCSLPValues.updateVariantClasses)();
+        (_b2 = import_visualBuilderPostMessage.default) == null ? void 0 : _b2.send(
+          import_postMessage.VisualBuilderPostMessageEvents.REQUEST_DISCUSSION_HIGHLIGHTS
+        );
       }
     }
   );

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

	@@ -1 +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","_a"]}
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 // 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","_a","_b"]}

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

@@ -110,6 +110,7 @@ function useVariantFieldsPostMessageEvent({ isSSR }) {
   (_a = visualBuilderPostMessage) == null ? void 0 : _a.on(
     VisualBuilderPostMessageEvents.GET_VARIANT_ID,
     (event) => {
+      var _a2, _b2;
       const selectedVariant = event.data.variant;
       setVariant(selectedVariant);
       FieldSchemaMap.clear();
@@ -117,8 +118,14 @@ function useVariantFieldsPostMessageEvent({ isSSR }) {
         if (selectedVariant) {
           addVariantFieldClass(selectedVariant);
         }
+        (_a2 = visualBuilderPostMessage) == null ? void 0 : _a2.send(
+          VisualBuilderPostMessageEvents.REQUEST_DISCUSSION_HIGHLIGHTS
+        );
       } else {
         updateVariantClasses();
+        (_b2 = visualBuilderPostMessage) == null ? void 0 : _b2.send(
+          VisualBuilderPostMessageEvents.REQUEST_DISCUSSION_HIGHLIGHTS
+        );
       }
     }
   );

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

	@@ -1 +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,qCAAU,SAAS,cAAc;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;AAzI1G;AA0II,MAAI;AACA,UAAM,SAAS,QAAM,qDAA0B;AAAA,MAC3C,+BAA+B;AAAA;AAEnC,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;AAzJtF;AA0JI,wDAA0B;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;AAEJ,wDAA0B;AAAA,IACtB,+BAA+B;AAAA,IAC/B,CAAC,UAAuB;AACpB,gBAAU,MAAM,KAAK,MAAM;AAAA,IAC/B;AAAA;AAEJ,wDAA0B;AAAA,IACtB,+BAA+B;AAAA,IAC/B,CAAC,UAAyB;AACtB,sBAAgB,MAAM,KAAK,YAAY;AAAA,IAC3C;AAAA;AAEJ,wDAA0B;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;AAEJ,wDAA0B;AAAA,IACtB,+BAA+B;AAAA,IAC/B,CAAC,UAAoC;AAxM7C,UAAAA;AAyMY,gCAA0B,KAAK;AAC/B,+BAAwBA,MAAA,+BAAO,SAAP,gBAAAA,IAAa,eAAe;AAAA,IACxD;AAAA;AAER;","names":["_a"]}
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 // 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":["_a","_b"]}

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

@@ -99,6 +99,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/legacy/visualBuilder/generators/generateHighlightedComment.cjs.map CHANGED Viewed

	@@ -1 +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":"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","names":["import_preact","HighlightedCommentIcon"]}
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 } 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/legacy/visualBuilder/generators/generateHighlightedComment.js CHANGED Viewed

@@ -62,6 +62,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/legacy/visualBuilder/generators/generateHighlightedComment.js.map CHANGED Viewed

	@@ -1 +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;AAvB9B;AAwBQ,UAAM,aAAY,kCAAM,kBAAN,mBAAqB;AAGvC,QAAI,CAAC,YAAY,SAAS,KAAK,YAAY,SAAS,GAAG;AACnD;AAAA,IACJ;AAEA,gBAAY,SAAS,IAAI;AAEzB,UAAM,UAAU,SAAS,cAAc,eAAe,SAAS,IAAI;AACnE,QAAI,WAAW,mBAAmB,aAAa;AAC3C,YAAM,EAAE,KAAK,KAAK,IAAI,QAAQ,sBAAsB;AAEpD,YAAM,gBAAgB,SAAS,cAAc,KAAK;AAClD,oBAAc,aAAa,cAAc,SAAS;AAElD,oBAAc,MAAM,WAAW;AAC/B,oBAAc,MAAM,MAAM,GAAG,MAAM,qBAAqB;AACxD,oBAAc,MAAM,OAAO,GAAG,OAAO,qBAAqB;AAC1D,oBAAc,MAAM,SAAS;AAC7B,oBAAc,MAAM,SAAS;AAC7B,oBAAc,YAAY;AAG1B;AAAA,QACI,EAAE,wBAAwB,EAAE,KAAK,CAAC;AAAA;AAAA,QAClC;AAAA,MACJ;AAEA,YAAM,yBAAyB,SAAS;AAAA,QACpC;AAAA,MACJ;AACA,UAAI,wBAAwB;AACxB,YAAI,0BACA,uBAAuB;AAAA,UACnB;AAAA,QACJ;AACJ,YAAI,CAAC,yBAAyB;AAC1B,oCAA0B,SAAS,cAAc,KAAK;AACtD,kCAAwB,YACpB;AACJ,iCAAuB,YAAY,uBAAuB;AAAA,QAC9D;AACA,gCAAwB,YAAY,aAAa;AAAA,MACrD;AAAA,IACJ;AAAA,EACJ,CAAC;AACL;AAMO,SAAS,uCAAuC;AAEnD,QAAM,QAAQ,SAAS,iBAAiB,sBAAsB;AAE9D,QAAM,QAAQ,CAAC,SAAS;AACpB,QAAI,QAAQ,gBAAgB,aAAa;AAErC,YAAM,OAAO,KAAK,aAAa,YAAY;AAC3C,UAAI,MAAM;AAEN,cAAM,gBAAgB,SAAS;AAAA,UAC3B,eAAe,IAAI;AAAA,QACvB;AACA,YAAI,iBAAiB,yBAAyB,aAAa;AAEvD,gBAAM,EAAE,KAAK,KAAK,IAAI,cAAc,sBAAsB;AAG1D,eAAK,MAAM,MAAM,GAAG,MAAM,qBAAqB;AAC/C,eAAK,MAAM,OAAO,GAAG,OAAO,qBAAqB;AAAA,QACrD;AAAA,MACJ;AAAA,IACJ;AAAA,EACJ,CAAC;AACL;AAOO,SAAS,6BAA6B,cAA4B;AAErE,QAAM,eAAe,SAAS;AAAA,IAC1B,oCAAoC,YAAY;AAAA,EACpD;AACA,+CAAc,QAAQ,CAAC,SAAS,6BAAM;AAC1C;AAEO,SAAS,mCAAyC;AACrD,QAAM,QAAQ,SAAS,iBAAiB,sBAAsB;AAC9D,iCAAO,QAAQ,CAAC,SAAS,6BAAM;AACnC;AAGA,IAAM,cAAc;AAAA;AAAA;AAWb,SAAS,oCACZ,MACA,YACI;AACJ,QAAM,QAAQ,SAAS;AAAA,IACnB,oCAAoC,IAAI;AAAA,EAC5C;AAEA,QAAM,QAAQ,CAAC,SAAS;AACpB,QAAI,YAAY;AACZ,WAAK,UAAU,OAAO,WAAW;AAAA,IACrC,OAAO;AACH,WAAK,UAAU,IAAI,WAAW;AAAA,IAClC;AAAA,EACJ,CAAC;AACL;AAKO,SAAS,uCAA6C;AAEzD,QAAM,cAAc,SAAS;AAAA,IACzB,wBAAwB,WAAW;AAAA,EACvC;AAGA,cAAY,QAAQ,CAAC,SAAS;AAC1B,SAAK,UAAU,OAAO,WAAW;AAAA,EACrC,CAAC;AACL;","names":[]}
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 } 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":";;;AAAA,SAAS,SAAgB;AACzB,SAAS,cAAc;AACvB,OAAO,4BAA4B;AACnC,SAAS,WAAW;AAGpB,SAAS,mBAAmB;AAU5B,IAAM,wBAAwB;AAEvB,SAAS,6BACZ,SACI;AACJ,QAAM,cAA0C,CAAC;AAEjD,UAAQ,QAAQ,CAAC,SAAS;AAvB9B;AAwBQ,UAAM,aAAY,kCAAM,kBAAN,mBAAqB;AAGvC,QAAI,CAAC,YAAY,SAAS,KAAK,YAAY,SAAS,GAAG;AACnD;AAAA,IACJ;AAEA,gBAAY,SAAS,IAAI;AAEzB,UAAM,UAAU,SAAS,cAAc,eAAe,SAAS,IAAI;AACnE,QAAI,WAAW,mBAAmB,aAAa;AAC3C,YAAM,EAAE,KAAK,KAAK,IAAI,QAAQ,sBAAsB;AAEpD,YAAM,gBAAgB,SAAS,cAAc,KAAK;AAClD,oBAAc,aAAa,cAAc,SAAS;AAElD,oBAAc,MAAM,WAAW;AAC/B,oBAAc,MAAM,MAAM,GAAG,MAAM,qBAAqB;AACxD,oBAAc,MAAM,OAAO,GAAG,OAAO,qBAAqB;AAC1D,oBAAc,MAAM,SAAS;AAC7B,oBAAc,MAAM,SAAS;AAC7B,oBAAc,YAAY;AAG1B;AAAA,QACI,EAAE,wBAAwB,EAAE,KAAK,CAAC;AAAA;AAAA,QAClC;AAAA,MACJ;AAEA,YAAM,yBAAyB,SAAS;AAAA,QACpC;AAAA,MACJ;AACA,UAAI,wBAAwB;AACxB,YAAI,0BACA,uBAAuB;AAAA,UACnB;AAAA,QACJ;AACJ,YAAI,CAAC,yBAAyB;AAC1B,oCAA0B,SAAS,cAAc,KAAK;AACtD,kCAAwB,YACpB;AACJ,iCAAuB,YAAY,uBAAuB;AAAA,QAC9D;AACA,gCAAwB,YAAY,aAAa;AAAA,MACrD;AAAA,IACJ;AAAA,EACJ,CAAC;AACL;AAMO,SAAS,uCAAuC;AAEnD,QAAM,QAAQ,SAAS,iBAAiB,sBAAsB;AAE9D,QAAM,QAAQ,CAAC,SAAS;AACpB,QAAI,QAAQ,gBAAgB,aAAa;AAErC,YAAM,OAAO,KAAK,aAAa,YAAY;AAC3C,UAAI,MAAM;AAEN,cAAM,gBAAgB,SAAS;AAAA,UAC3B,eAAe,IAAI;AAAA,QACvB;AACA,YAAI,iBAAiB,yBAAyB,aAAa;AAEvD,gBAAM,EAAE,KAAK,KAAK,IAAI,cAAc,sBAAsB;AAG1D,eAAK,MAAM,MAAM,GAAG,MAAM,qBAAqB;AAC/C,eAAK,MAAM,OAAO,GAAG,OAAO,qBAAqB;AAAA,QACrD,OAAO;AAEH,eAAK,OAAO;AAAA,QAChB;AAAA,MACJ;AAAA,IACJ;AAAA,EACJ,CAAC;AACL;AAOO,SAAS,6BAA6B,cAA4B;AAErE,QAAM,eAAe,SAAS;AAAA,IAC1B,oCAAoC,YAAY;AAAA,EACpD;AACA,+CAAc,QAAQ,CAAC,SAAS,6BAAM;AAC1C;AAEO,SAAS,mCAAyC;AACrD,QAAM,QAAQ,SAAS,iBAAiB,sBAAsB;AAC9D,iCAAO,QAAQ,CAAC,SAAS,6BAAM;AACnC;AAGA,IAAM,cAAc;AAAA;AAAA;AAWb,SAAS,oCACZ,MACA,YACI;AACJ,QAAM,QAAQ,SAAS;AAAA,IACnB,oCAAoC,IAAI;AAAA,EAC5C;AAEA,QAAM,QAAQ,CAAC,SAAS;AACpB,QAAI,YAAY;AACZ,WAAK,UAAU,OAAO,WAAW;AAAA,IACrC,OAAO;AACH,WAAK,UAAU,IAAI,WAAW;AAAA,IAClC;AAAA,EACJ,CAAC;AACL;AAKO,SAAS,uCAA6C;AAEzD,QAAM,cAAc,SAAS;AAAA,IACzB,wBAAwB,WAAW;AAAA,EACvC;AAGA,cAAY,QAAQ,CAAC,SAAS;AAC1B,SAAK,UAAU,OAAO,WAAW;AAAA,EACrC,CAAC;AACL;","names":[]}

package/dist/legacy/visualBuilder/generators/generateToolbar.cjs CHANGED Viewed

@@ -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/legacy/visualBuilder/generators/generateToolbar.cjs.map CHANGED Viewed

	@@ -1 +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"]}
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 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/legacy/visualBuilder/generators/generateToolbar.js CHANGED Viewed

@@ -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/legacy/visualBuilder/generators/generateToolbar.js.map CHANGED Viewed

	@@ -1 +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":[]}
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 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/legacy/visualBuilder/listeners/mouseClick.cjs CHANGED Viewed

@@ -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);

package/dist/legacy/visualBuilder/listeners/mouseClick.cjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"sources":["../../../../src/visualBuilder/listeners/mouseClick.ts"],"sourcesContent":["import {\n cleanIndividualFieldResidual,\n handleIndividualFields,\n} from \"../utils/handleIndividualFields\";\n\nimport {\n getCsDataOfElement,\n getDOMEditStack,\n} from \"../utils/getCsDataOfElement\";\nimport { isValidCslp } from \"../../cslp\";\n\nimport { appendFocusedToolbar } from \"../generators/generateToolbar\";\n\nimport { addFocusOverlay, hideOverlay } from \"../generators/generateOverlay\";\n\nimport visualBuilderPostMessage from \"../utils/visualBuilderPostMessage\";\n\nimport { VisualBuilderPostMessageEvents } from \"../utils/types/postMessage.types\";\n\nimport { VisualBuilder } from \"..\";\nimport { FieldSchemaMap } from \"../utils/fieldSchemaMap\";\nimport { isFieldDisabled } from \"../utils/isFieldDisabled\";\nimport EventListenerHandlerParams from \"./types\";\nimport { toggleHighlightedCommentIconDisplay } from \"../generators/generateHighlightedComment\";\nimport { VB_EmptyBlockParentClass } from \"../..\";\nimport { getFieldVariantStatus } from \"../components/FieldRevert/FieldRevertComponent\";\nimport getXPath from \"get-xpath\";\nimport Config from \"../../configManager/configManager\";\nimport { generateThread } from \"../generators/generateThread\";\nimport { isCollabThread } from \"../generators/generateThread\";\nimport { toggleCollabPopup } from \"../generators/generateThread\";\nimport { fixSvgXPath } from \"../utils/collabUtils\";\nimport { v4 as uuidV4 } from \"uuid\";\nimport { CslpData } from \"../../cslp/types/cslp.types\";\nimport { fetchEntryPermissionsAndStageDetails } from \"../utils/fetchEntryPermissionsAndStageDetails\";\n\nexport type HandleBuilderInteractionParams = Omit<\n EventListenerHandlerParams,\n \"eventDetails\" \| \"customCursor\"\n> & { reEvaluate?: boolean };\n\ntype AddFocusOverlayParams = Pick<\n EventListenerHandlerParams,\n \"overlayWrapper\" \| \"resizeObserver\"\n> & { editableElement: Element; isFieldDisabled?: boolean };\n\ntype AddFocusedToolbarParams = Pick<\n EventListenerHandlerParams,\n \"eventDetails\" \| \"focusedToolbar\"\n> & {\n hideOverlay: () => void;\n isVariant: boolean;\n options?: { isHover?: boolean };\n};\n\nfunction addOverlay(params: AddFocusOverlayParams) {\n if (!params.overlayWrapper \|\| !params.editableElement) return;\n\n addFocusOverlay(\n params.editableElement,\n params.overlayWrapper,\n params.isFieldDisabled\n );\n params.resizeObserver.observe(params.editableElement);\n}\n\nexport function addFocusedToolbar(params: AddFocusedToolbarParams): void {\n const { editableElement } = params.eventDetails;\n\n if (!editableElement \|\| !params.focusedToolbar) return;\n\n appendFocusedToolbar(\n params.eventDetails,\n params.focusedToolbar,\n params.hideOverlay,\n params.isVariant,\n params.options\n );\n}\n\nexport async function handleBuilderInteraction(\n params: HandleBuilderInteractionParams\n): Promise<void> {\n const eventTarget = params.event.target as HTMLElement \| null;\n const isAnchorElement = eventTarget instanceof HTMLAnchorElement;\n const elementHasCslp =\n eventTarget &&\n (eventTarget.hasAttribute(\"data-cslp\") \|\|\n eventTarget.closest(\"[data-cslp]\"));\n\n // if multiple elements with the same cslp element are found,\n // assign a unique ID to each element which we can use to identify\n // them in updateFocussedState and other places where we\n // would have queried the element by data-cslp\n const eventTargetCslp = eventTarget?.getAttribute(\"data-cslp\");\n if (isValidCslp(eventTargetCslp)) {\n const duplicates = document.querySelectorAll(\n `[data-cslp=\"${eventTargetCslp}\"]`\n );\n if (duplicates.length > 1) {\n duplicates.forEach((ele) => {\n if (!ele.hasAttribute(\"data-cslp-unique-id\")) {\n const uniqueId = `cslp-${uuidV4()}`;\n ele.setAttribute(\"data-cslp-unique-id\", uniqueId);\n }\n });\n }\n }\n\n // if the target element is a studio-ui element, return\n // this is currently used for the \"Edit in Studio\" button\n if (eventTarget?.getAttribute(\"data-studio-ui\") === \"true\") {\n return;\n }\n\n if (params.event.altKey) {\n if (isAnchorElement) {\n params.event.preventDefault();\n params.event.stopPropagation();\n }\n return;\n }\n // prevent default behavior for anchor elements and elements with cslp attribute\n if (\n isAnchorElement \|\|\n (elementHasCslp && !eventTarget.closest(\".visual-builder__empty-block\"))\n ) {\n params.event.preventDefault();\n params.event.stopPropagation();\n }\n\n const config = Config.get();\n\n if (config?.collab.enable === true) {\n if (config?.collab.pauseFeedback) return;\n const xpath = fixSvgXPath(getXPath(eventTarget));\n if (!eventTarget) return;\n\n const rect = eventTarget.getBoundingClientRect();\n const relativeX = (params.event.clientX - rect.left) / rect.width;\n const relativeY = (params.event.clientY - rect.top) / rect.height;\n\n if (!isCollabThread(eventTarget)) {\n params.event.preventDefault();\n params.event.stopPropagation();\n }\n\n if (isCollabThread(eventTarget)) {\n Config.set(\"collab.isFeedbackMode\", false);\n } else if (config?.collab.isFeedbackMode) {\n generateThread(\n { xpath, relativeX, relativeY },\n {\n isNewThread: true,\n updateConfig: true,\n }\n );\n } else {\n toggleCollabPopup({ threadUid: \"\", action: \"close\" });\n Config.set(\"collab.isFeedbackMode\", true);\n }\n return;\n }\n\n const eventDetails = getCsDataOfElement(params.event);\n\n // Send mouse click post message\n sendMouseClickPostMessage(eventDetails);\n\n if (\n !eventDetails \|\|\n !params.overlayWrapper \|\|\n !params.visualBuilderContainer\n ) {\n return;\n }\n\n const { editableElement, fieldMetadata } = eventDetails;\n const variantStatus = await getFieldVariantStatus(fieldMetadata);\n const isVariant = variantStatus\n ? Object.values(variantStatus).some((value) => value === true)\n : false;\n\n // Clean residuals if necessary\n cleanResidualsIfNeeded(params, editableElement);\n\n // Return if the selected element is an empty block\n if (isEmptyBlockElement(editableElement)) {\n return;\n }\n\n // when previous and current selected element is same, return.\n // this also avoids inserting psuedo-editable field (field data is\n // not equal to text content in DOM) when performing mouse\n // selections in the content editable\n const previousSelectedElement =\n VisualBuilder.VisualBuilderGlobalState.value\n .previousSelectedEditableDOM;\n if (\n isSameSelectedElement(previousSelectedElement, editableElement, params)\n ) {\n return;\n }\n\n VisualBuilder.VisualBuilderGlobalState.value.previousSelectedEditableDOM =\n editableElement;\n\n // Add overlay and focused toolbar\n addOverlayAndToolbar(params, eventDetails, editableElement, isVariant);\n\n const { cslpValue } = fieldMetadata;\n\n toggleHighlightedCommentIconDisplay(cslpValue, false);\n\n // Handle field schema and individual fields\n await handleFieldSchemaAndIndividualFields(\n params,\n eventDetails,\n fieldMetadata,\n editableElement,\n previousSelectedElement\n );\n\n // Observe changes to the editable element\n observeEditableElementChanges(params, editableElement);\n}\n\nfunction sendMouseClickPostMessage(eventDetails: any) {\n visualBuilderPostMessage\n ?.send(VisualBuilderPostMessageEvents.MOUSE_CLICK, {\n cslpData: eventDetails?.cslpData,\n fieldMetadata: eventDetails?.fieldMetadata,\n })\n .catch((err) => {\n console.warn(\"Error while sending post message\", err);\n });\n}\nfunction cleanResidualsIfNeeded(\n params: HandleBuilderInteractionParams,\n editableElement: Element\n) {\n const previousSelectedElement =\n VisualBuilder.VisualBuilderGlobalState.value\n .previousSelectedEditableDOM;\n if (\n (previousSelectedElement &&\n previousSelectedElement !== editableElement) \|\|\n params.reEvaluate\n ) {\n cleanIndividualFieldResidual({\n overlayWrapper: params.overlayWrapper!,\n visualBuilderContainer: params.visualBuilderContainer,\n focusedToolbar: params.focusedToolbar,\n resizeObserver: params.resizeObserver,\n });\n }\n}\nfunction isEmptyBlockElement(editableElement: Element): boolean {\n return (\n editableElement.classList.contains(VB_EmptyBlockParentClass) \|\|\n editableElement.classList.contains(\"visual-builder__empty-block\")\n );\n}\n\nfunction isSameSelectedElement(\n previousSelectedElement: Element \| null,\n editableElement: Element,\n params: HandleBuilderInteractionParams\n): boolean {\n return !!(\n previousSelectedElement &&\n previousSelectedElement === editableElement &&\n !params.reEvaluate\n );\n}\n\nfunction addOverlayAndToolbar(\n params: HandleBuilderInteractionParams,\n eventDetails: any,\n editableElement: Element,\n isVariant: boolean\n) {\n VisualBuilder.VisualBuilderGlobalState.value.isFocussed = true;\n addOverlay({\n overlayWrapper: params.overlayWrapper,\n resizeObserver: params.resizeObserver,\n editableElement: editableElement,\n });\n\n addFocusedToolbar({\n eventDetails: eventDetails,\n focusedToolbar: params.focusedToolbar,\n hideOverlay: () => {\n hideOverlay({\n visualBuilderContainer: params.visualBuilderContainer,\n visualBuilderOverlayWrapper: params.overlayWrapper,\n focusedToolbar: params.focusedToolbar,\n resizeObserver: params.resizeObserver,\n });\n },\n isVariant,\n });\n}\nasync function handleFieldSchemaAndIndividualFields(\n params: HandleBuilderInteractionParams,\n eventDetails: any,\n fieldMetadata: CslpData,\n editableElement: Element,\n previousSelectedElement: Element \| null\n) {\n const {\n content_type_uid,\n entry_uid,\n fieldPath,\n locale,\n variant: variantUid,\n fieldPathWithIndex,\n } = fieldMetadata;\n const fieldSchema = await FieldSchemaMap.getFieldSchema(\n content_type_uid,\n fieldPath\n );\n const { acl: entryAcl, workflowStage: entryWorkflowStageDetails, resolvedVariantPermissions } =\n await fetchEntryPermissionsAndStageDetails({\n entryUid: entry_uid,\n contentTypeUid: content_type_uid,\n locale,\n variantUid,\n fieldPathWithIndex,\n });\n\n if (fieldSchema) {\n const { isDisabled } = isFieldDisabled(\n fieldSchema,\n eventDetails,\n resolvedVariantPermissions,\n entryAcl,\n entryWorkflowStageDetails\n );\n if (isDisabled) {\n addOverlay({\n overlayWrapper: params.overlayWrapper,\n resizeObserver: params.resizeObserver,\n editableElement: editableElement,\n isFieldDisabled: true,\n });\n }\n }\n\n visualBuilderPostMessage?.send(VisualBuilderPostMessageEvents.FOCUS_FIELD, {\n DOMEditStack: getDOMEditStack(editableElement),\n });\n\n await handleIndividualFields(eventDetails, {\n visualBuilderContainer: params.visualBuilderContainer!,\n resizeObserver: params.resizeObserver,\n lastEditedField: previousSelectedElement,\n });\n}\nfunction observeEditableElementChanges(\n params: HandleBuilderInteractionParams,\n editableElement: Element\n) {\n const focusElementObserver = new MutationObserver((mutations) => {\n mutations.forEach((mutation) => {\n if (\n mutation.type === \"attributes\" &&\n mutation.attributeName === \"data-cslp\"\n ) {\n focusElementObserver?.disconnect();\n VisualBuilder.VisualBuilderGlobalState.value.focusElementObserver =\n null;\n handleBuilderInteraction({ ...params, reEvaluate: true });\n }\n });\n });\n\n VisualBuilder.VisualBuilderGlobalState.value.focusElementObserver =\n focusElementObserver;\n focusElementObserver.observe(editableElement, { attributes: true });\n}\n\nexport default handleBuilderInteraction;\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,oCAGO;AAEP,gCAGO;AACP,kBAA4B;AAE5B,6BAAqC;AAErC,6BAA6C;AAE7C,sCAAqC;AAErC,yBAA+C;AAE/C,eAA8B;AAC9B,4BAA+B;AAC/B,6BAAgC;AAEhC,wCAAoD;AACpD,IAAAA,YAAyC;AACzC,kCAAsC;AACtC,uBAAqB;AACrB,2BAAmB;AACnB,4BAA+B;AAC/B,IAAAC,yBAA+B;AAC/B,IAAAA,yBAAkC;AAClC,yBAA4B;AAC5B,kBAA6B;AAE7B,kDAAqD;AAqBrD,SAAS,WAAW,QAA+B;AAC/C,MAAI,CAAC,OAAO,kBAAkB,CAAC,OAAO,gBAAiB;AAEvD;AAAA,IACI,OAAO;AAAA,IACP,OAAO;AAAA,IACP,OAAO;AAAA,EACX;AACA,SAAO,eAAe,QAAQ,OAAO,eAAe;AACxD;AAEO,SAAS,kBAAkB,QAAuC;AACrE,QAAM,EAAE,gBAAgB,IAAI,OAAO;AAEnC,MAAI,CAAC,mBAAmB,CAAC,OAAO,eAAgB;AAEhD;AAAA,IACI,OAAO;AAAA,IACP,OAAO;AAAA,IACP,OAAO;AAAA,IACP,OAAO;AAAA,IACP,OAAO;AAAA,EACX;AACJ;AAEA,eAAsB,yBAClB,QACa;AACb,QAAM,cAAc,OAAO,MAAM;AACjC,QAAM,kBAAkB,uBAAuB;AAC/C,QAAM,iBACF,gBACC,YAAY,aAAa,WAAW,KACjC,YAAY,QAAQ,aAAa;AAMzC,QAAM,kBAAkB,2CAAa,aAAa;AAClD,UAAI,yBAAY,eAAe,GAAG;AAC9B,UAAM,aAAa,SAAS;AAAA,MACxB,eAAe,eAAe;AAAA,IAClC;AACA,QAAI,WAAW,SAAS,GAAG;AACvB,iBAAW,QAAQ,CAAC,QAAQ;AACxB,YAAI,CAAC,IAAI,aAAa,qBAAqB,GAAG;AAC1C,gBAAM,WAAW,YAAQ,YAAAC,IAAO,CAAC;AACjC,cAAI,aAAa,uBAAuB,QAAQ;AAAA,QACpD;AAAA,MACJ,CAAC;AAAA,IACL;AAAA,EACJ;AAIA,OAAI,2CAAa,aAAa,uBAAsB,QAAQ;AACxD;AAAA,EACJ;AAEA,MAAI,OAAO,MAAM,QAAQ;AACrB,QAAI,iBAAiB;AACjB,aAAO,MAAM,eAAe;AAC5B,aAAO,MAAM,gBAAgB;AAAA,IACjC;AACA;AAAA,EACJ;AAEA,MACI,mBACC,kBAAkB,CAAC,YAAY,QAAQ,8BAA8B,GACxE;AACE,WAAO,MAAM,eAAe;AAC5B,WAAO,MAAM,gBAAgB;AAAA,EACjC;AAEA,QAAM,SAAS,qBAAAC,QAAO,IAAI;AAE1B,OAAI,iCAAQ,OAAO,YAAW,MAAM;AAChC,QAAI,iCAAQ,OAAO,cAAe;AAClC,UAAM,YAAQ,oCAAY,iBAAAC,SAAS,WAAW,CAAC;AAC/C,QAAI,CAAC,YAAa;AAElB,UAAM,OAAO,YAAY,sBAAsB;AAC/C,UAAM,aAAa,OAAO,MAAM,UAAU,KAAK,QAAQ,KAAK;AAC5D,UAAM,aAAa,OAAO,MAAM,UAAU,KAAK,OAAO,KAAK;AAE3D,QAAI,KAAC,uCAAe,WAAW,GAAG;AAC9B,aAAO,MAAM,eAAe;AAC5B,aAAO,MAAM,gBAAgB;AAAA,IACjC;AAEA,YAAI,uCAAe,WAAW,GAAG;AAC7B,2BAAAD,QAAO,IAAI,yBAAyB,KAAK;AAAA,IAC7C,WAAW,iCAAQ,OAAO,gBAAgB;AACtC;AAAA,QACI,EAAE,OAAO,WAAW,UAAU;AAAA,QAC9B;AAAA,UACI,aAAa;AAAA,UACb,cAAc;AAAA,QAClB;AAAA,MACJ;AAAA,IACJ,OAAO;AACH,oDAAkB,EAAE,WAAW,IAAI,QAAQ,QAAQ,CAAC;AACpD,2BAAAA,QAAO,IAAI,yBAAyB,IAAI;AAAA,IAC5C;AACA;AAAA,EACJ;AAEA,QAAM,mBAAe,8CAAmB,OAAO,KAAK;AAGpD,4BAA0B,YAAY;AAEtC,MACI,CAAC,gBACD,CAAC,OAAO,kBACR,CAAC,OAAO,wBACV;AACE;AAAA,EACJ;AAEA,QAAM,EAAE,iBAAiB,cAAc,IAAI;AAC3C,QAAM,gBAAgB,UAAM,mDAAsB,aAAa;AAC/D,QAAM,YAAY,gBACZ,OAAO,OAAO,aAAa,EAAE,KAAK,CAAC,UAAU,UAAU,IAAI,IAC3D;AAGN,yBAAuB,QAAQ,eAAe;AAG9C,MAAI,oBAAoB,eAAe,GAAG;AACtC;AAAA,EACJ;AAMA,QAAM,0BACF,uBAAc,yBAAyB,MAClC;AACT,MACI,sBAAsB,yBAAyB,iBAAiB,MAAM,GACxE;AACE;AAAA,EACJ;AAEA,yBAAc,yBAAyB,MAAM,8BACzC;AAGJ,uBAAqB,QAAQ,cAAc,iBAAiB,SAAS;AAErE,QAAM,EAAE,UAAU,IAAI;AAEtB,6EAAoC,WAAW,KAAK;AAGpD,QAAM;AAAA,IACF;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACJ;AAGA,gCAA8B,QAAQ,eAAe;AACzD;AAEA,SAAS,0BAA0B,cAAmB;AAnOtD;AAoOI,wCAAAE,YAAA,mBACM,KAAK,kDAA+B,aAAa;AAAA,IAC/C,UAAU,6CAAc;AAAA,IACxB,eAAe,6CAAc;AAAA,EACjC,GACC,MAAM,CAAC,QAAQ;AACZ,YAAQ,KAAK,oCAAoC,GAAG;AAAA,EACxD;AACR;AACA,SAAS,uBACL,QACA,iBACF;AACE,QAAM,0BACF,uBAAc,yBAAyB,MAClC;AACT,MACK,2BACG,4BAA4B,mBAChC,OAAO,YACT;AACE,oEAA6B;AAAA,MACzB,gBAAgB,OAAO;AAAA,MACvB,wBAAwB,OAAO;AAAA,MAC/B,gBAAgB,OAAO;AAAA,MACvB,gBAAgB,OAAO;AAAA,IAC3B,CAAC;AAAA,EACL;AACJ;AACA,SAAS,oBAAoB,iBAAmC;AAC5D,SACI,gBAAgB,UAAU,SAAS,kCAAwB,KAC3D,gBAAgB,UAAU,SAAS,6BAA6B;AAExE;AAEA,SAAS,sBACL,yBACA,iBACA,QACO;AACP,SAAO,CAAC,EACJ,2BACA,4BAA4B,mBAC5B,CAAC,OAAO;AAEhB;AAEA,SAAS,qBACL,QACA,cACA,iBACA,WACF;AACE,yBAAc,yBAAyB,MAAM,aAAa;AAC1D,aAAW;AAAA,IACP,gBAAgB,OAAO;AAAA,IACvB,gBAAgB,OAAO;AAAA,IACvB;AAAA,EACJ,CAAC;AAED,oBAAkB;AAAA,IACd;AAAA,IACA,gBAAgB,OAAO;AAAA,IACvB,aAAa,MAAM;AACf,8CAAY;AAAA,QACR,wBAAwB,OAAO;AAAA,QAC/B,6BAA6B,OAAO;AAAA,QACpC,gBAAgB,OAAO;AAAA,QACvB,gBAAgB,OAAO;AAAA,MAC3B,CAAC;AAAA,IACL;AAAA,IACA;AAAA,EACJ,CAAC;AACL;AACA,eAAe,qCACX,QACA,cACA,eACA,iBACA,yBACF;AArTF;AAsTI,QAAM;AAAA,IACF;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,SAAS;AAAA,IACT;AAAA,EACJ,IAAI;AACJ,QAAM,cAAc,MAAM,qCAAe;AAAA,IACrC;AAAA,IACA;AAAA,EACJ;AACA,QAAM,EAAE,KAAK,UAAU,eAAe,2BAA2B,2BAA2B,IACxF,UAAM,kFAAqC;AAAA,IACvC,UAAU;AAAA,IACV,gBAAgB;AAAA,IAChB;AAAA,IACA;AAAA,IACA;AAAA,EACJ,CAAC;AAEL,MAAI,aAAa;AACb,UAAM,EAAE,WAAW,QAAI;AAAA,MACnB;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,IACJ;AACA,QAAI,YAAY;AACZ,iBAAW;AAAA,QACP,gBAAgB,OAAO;AAAA,QACvB,gBAAgB,OAAO;AAAA,QACvB;AAAA,QACA,iBAAiB;AAAA,MACrB,CAAC;AAAA,IACL;AAAA,EACJ;AAEA,wCAAAA,YAAA,mBAA0B,KAAK,kDAA+B,aAAa;AAAA,IACvE,kBAAc,2CAAgB,eAAe;AAAA,EACjD;AAEA,YAAM,sDAAuB,cAAc;AAAA,IACvC,wBAAwB,OAAO;AAAA,IAC/B,gBAAgB,OAAO;AAAA,IACvB,iBAAiB;AAAA,EACrB,CAAC;AACL;AACA,SAAS,8BACL,QACA,iBACF;AACE,QAAM,uBAAuB,IAAI,iBAAiB,CAAC,cAAc;AAC7D,cAAU,QAAQ,CAAC,aAAa;AAC5B,UACI,SAAS,SAAS,gBAClB,SAAS,kBAAkB,aAC7B;AACE,qEAAsB;AACtB,+BAAc,yBAAyB,MAAM,uBACzC;AACJ,iCAAyB,EAAE,GAAG,QAAQ,YAAY,KAAK,CAAC;AAAA,MAC5D;AAAA,IACJ,CAAC;AAAA,EACL,CAAC;AAED,yBAAc,yBAAyB,MAAM,uBACzC;AACJ,uBAAqB,QAAQ,iBAAiB,EAAE,YAAY,KAAK,CAAC;AACtE;AAEA,IAAO,qBAAQ;","names":["import__","import_generateThread","uuidV4","Config","getXPath","visualBuilderPostMessage"]}
1	+ {"version":3,"sources":["../../../../src/visualBuilder/listeners/mouseClick.ts"],"sourcesContent":["import {\n cleanIndividualFieldResidual,\n handleIndividualFields,\n} from \"../utils/handleIndividualFields\";\n\nimport {\n getCsDataOfElement,\n getDOMEditStack,\n} from \"../utils/getCsDataOfElement\";\nimport { isValidCslp } from \"../../cslp\";\n\nimport { appendFocusedToolbar } from \"../generators/generateToolbar\";\n\nimport { addFocusOverlay, hideOverlay } from \"../generators/generateOverlay\";\n\nimport visualBuilderPostMessage from \"../utils/visualBuilderPostMessage\";\n\nimport { VisualBuilderPostMessageEvents } from \"../utils/types/postMessage.types\";\n\nimport { VisualBuilder } from \"..\";\nimport { FieldSchemaMap } from \"../utils/fieldSchemaMap\";\nimport { isFieldDisabled } from \"../utils/isFieldDisabled\";\nimport EventListenerHandlerParams from \"./types\";\nimport { toggleHighlightedCommentIconDisplay } from \"../generators/generateHighlightedComment\";\nimport { VB_EmptyBlockParentClass } from \"../..\";\nimport { getFieldVariantStatus } from \"../components/FieldRevert/FieldRevertComponent\";\nimport getXPath from \"get-xpath\";\nimport Config from \"../../configManager/configManager\";\nimport { generateThread } from \"../generators/generateThread\";\nimport { isCollabThread } from \"../generators/generateThread\";\nimport { toggleCollabPopup } from \"../generators/generateThread\";\nimport { fixSvgXPath } from \"../utils/collabUtils\";\nimport { v4 as uuidV4 } from \"uuid\";\nimport { CslpData } from \"../../cslp/types/cslp.types\";\nimport { fetchEntryPermissionsAndStageDetails } from \"../utils/fetchEntryPermissionsAndStageDetails\";\nimport { isCustomFieldMultipleInstance } from \"../utils/isCustomFieldMultipleInstance\";\nimport { getParentCslp, getWholeFieldElement } from \"../utils/getWholeFieldElement\";\n\nexport type HandleBuilderInteractionParams = Omit<\n EventListenerHandlerParams,\n \"eventDetails\" \| \"customCursor\"\n> & { reEvaluate?: boolean };\n\ntype AddFocusOverlayParams = Pick<\n EventListenerHandlerParams,\n \"overlayWrapper\" \| \"resizeObserver\"\n> & { editableElement: Element; isFieldDisabled?: boolean };\n\ntype AddFocusedToolbarParams = Pick<\n EventListenerHandlerParams,\n \"eventDetails\" \| \"focusedToolbar\"\n> & {\n hideOverlay: () => void;\n isVariant: boolean;\n options?: { isHover?: boolean };\n};\n\nfunction addOverlay(params: AddFocusOverlayParams) {\n if (!params.overlayWrapper \|\| !params.editableElement) return;\n\n addFocusOverlay(\n params.editableElement,\n params.overlayWrapper,\n params.isFieldDisabled\n );\n params.resizeObserver.observe(params.editableElement);\n}\n\nexport function addFocusedToolbar(params: AddFocusedToolbarParams): void {\n const { editableElement } = params.eventDetails;\n\n if (!editableElement \|\| !params.focusedToolbar) return;\n\n appendFocusedToolbar(\n params.eventDetails,\n params.focusedToolbar,\n params.hideOverlay,\n params.isVariant,\n params.options\n );\n}\n\nexport async function handleBuilderInteraction(\n params: HandleBuilderInteractionParams\n): Promise<void> {\n const eventTarget = params.event.target as HTMLElement \| null;\n const isAnchorElement = eventTarget instanceof HTMLAnchorElement;\n const elementHasCslp =\n eventTarget &&\n (eventTarget.hasAttribute(\"data-cslp\") \|\|\n eventTarget.closest(\"[data-cslp]\"));\n\n // if multiple elements with the same cslp element are found,\n // assign a unique ID to each element which we can use to identify\n // them in updateFocussedState and other places where we\n // would have queried the element by data-cslp\n const eventTargetCslp = eventTarget?.getAttribute(\"data-cslp\");\n if (isValidCslp(eventTargetCslp)) {\n const duplicates = document.querySelectorAll(\n `[data-cslp=\"${eventTargetCslp}\"]`\n );\n if (duplicates.length > 1) {\n duplicates.forEach((ele) => {\n if (!ele.hasAttribute(\"data-cslp-unique-id\")) {\n const uniqueId = `cslp-${uuidV4()}`;\n ele.setAttribute(\"data-cslp-unique-id\", uniqueId);\n }\n });\n }\n }\n\n // if the target element is a studio-ui element, return\n // this is currently used for the \"Edit in Studio\" button\n if (eventTarget?.getAttribute(\"data-studio-ui\") === \"true\") {\n return;\n }\n\n if (params.event.altKey) {\n if (isAnchorElement) {\n params.event.preventDefault();\n params.event.stopPropagation();\n }\n return;\n }\n // prevent default behavior for anchor elements and elements with cslp attribute\n if (\n isAnchorElement \|\|\n (elementHasCslp && !eventTarget.closest(\".visual-builder__empty-block\"))\n ) {\n params.event.preventDefault();\n params.event.stopPropagation();\n }\n\n const config = Config.get();\n\n if (config?.collab.enable === true) {\n if (config?.collab.pauseFeedback) return;\n const xpath = fixSvgXPath(getXPath(eventTarget));\n if (!eventTarget) return;\n\n const rect = eventTarget.getBoundingClientRect();\n const relativeX = (params.event.clientX - rect.left) / rect.width;\n const relativeY = (params.event.clientY - rect.top) / rect.height;\n\n if (!isCollabThread(eventTarget)) {\n params.event.preventDefault();\n params.event.stopPropagation();\n }\n\n if (isCollabThread(eventTarget)) {\n Config.set(\"collab.isFeedbackMode\", false);\n } else if (config?.collab.isFeedbackMode) {\n generateThread(\n { xpath, relativeX, relativeY },\n {\n isNewThread: true,\n updateConfig: true,\n }\n );\n } else {\n toggleCollabPopup({ threadUid: \"\", action: \"close\" });\n Config.set(\"collab.isFeedbackMode\", true);\n }\n return;\n }\n\n const eventDetails = getCsDataOfElement(params.event);\n\n // Send mouse click post message\n sendMouseClickPostMessage(eventDetails);\n\n if (\n !eventDetails \|\|\n !params.overlayWrapper \|\|\n !params.visualBuilderContainer\n ) {\n return;\n }\n\n const { editableElement, fieldMetadata } = eventDetails;\n\n // Redirect click on multiple custom field instance to its whole-field parent (cached schema only)\n const { content_type_uid, fieldPath } = fieldMetadata;\n if (FieldSchemaMap.hasFieldSchema(content_type_uid, fieldPath)) {\n const fieldSchemaForCheck = await FieldSchemaMap.getFieldSchema(content_type_uid, fieldPath);\n if (fieldSchemaForCheck && isCustomFieldMultipleInstance(fieldSchemaForCheck, fieldMetadata)) {\n const parentCslp = getParentCslp(fieldMetadata.cslpValue);\n const wholeFieldElement = getWholeFieldElement(editableElement, parentCslp);\n if (wholeFieldElement) {\n wholeFieldElement.dispatchEvent(\n new MouseEvent(\"click\", {\n bubbles: true,\n cancelable: true,\n clientX: params.event.clientX,\n clientY: params.event.clientY,\n })\n );\n } else if (config.debug) {\n console.debug(\n \"[Visual Builder] Custom field multiple instance: whole-field parent not found in DOM for CSLP\",\n parentCslp\n );\n }\n return;\n }\n }\n\n const variantStatus = await getFieldVariantStatus(fieldMetadata);\n const isVariant = variantStatus\n ? Object.values(variantStatus).some((value) => value === true)\n : false;\n\n // Clean residuals if necessary\n cleanResidualsIfNeeded(params, editableElement);\n\n // Return if the selected element is an empty block\n if (isEmptyBlockElement(editableElement)) {\n return;\n }\n\n // when previous and current selected element is same, return.\n // this also avoids inserting psuedo-editable field (field data is\n // not equal to text content in DOM) when performing mouse\n // selections in the content editable\n const previousSelectedElement =\n VisualBuilder.VisualBuilderGlobalState.value\n .previousSelectedEditableDOM;\n if (\n isSameSelectedElement(previousSelectedElement, editableElement, params)\n ) {\n return;\n }\n\n VisualBuilder.VisualBuilderGlobalState.value.previousSelectedEditableDOM =\n editableElement;\n\n // Add overlay and focused toolbar\n addOverlayAndToolbar(params, eventDetails, editableElement, isVariant);\n\n const { cslpValue } = fieldMetadata;\n\n toggleHighlightedCommentIconDisplay(cslpValue, false);\n\n // Handle field schema and individual fields\n await handleFieldSchemaAndIndividualFields(\n params,\n eventDetails,\n fieldMetadata,\n editableElement,\n previousSelectedElement\n );\n\n // Observe changes to the editable element\n observeEditableElementChanges(params, editableElement);\n}\n\nfunction sendMouseClickPostMessage(eventDetails: any) {\n visualBuilderPostMessage\n ?.send(VisualBuilderPostMessageEvents.MOUSE_CLICK, {\n cslpData: eventDetails?.cslpData,\n fieldMetadata: eventDetails?.fieldMetadata,\n })\n .catch((err) => {\n console.warn(\"Error while sending post message\", err);\n });\n}\nfunction cleanResidualsIfNeeded(\n params: HandleBuilderInteractionParams,\n editableElement: Element\n) {\n const previousSelectedElement =\n VisualBuilder.VisualBuilderGlobalState.value\n .previousSelectedEditableDOM;\n if (\n (previousSelectedElement &&\n previousSelectedElement !== editableElement) \|\|\n params.reEvaluate\n ) {\n cleanIndividualFieldResidual({\n overlayWrapper: params.overlayWrapper!,\n visualBuilderContainer: params.visualBuilderContainer,\n focusedToolbar: params.focusedToolbar,\n resizeObserver: params.resizeObserver,\n });\n }\n}\nfunction isEmptyBlockElement(editableElement: Element): boolean {\n return (\n editableElement.classList.contains(VB_EmptyBlockParentClass) \|\|\n editableElement.classList.contains(\"visual-builder__empty-block\")\n );\n}\n\nfunction isSameSelectedElement(\n previousSelectedElement: Element \| null,\n editableElement: Element,\n params: HandleBuilderInteractionParams\n): boolean {\n return !!(\n previousSelectedElement &&\n previousSelectedElement === editableElement &&\n !params.reEvaluate\n );\n}\n\nfunction addOverlayAndToolbar(\n params: HandleBuilderInteractionParams,\n eventDetails: any,\n editableElement: Element,\n isVariant: boolean\n) {\n VisualBuilder.VisualBuilderGlobalState.value.isFocussed = true;\n addOverlay({\n overlayWrapper: params.overlayWrapper,\n resizeObserver: params.resizeObserver,\n editableElement: editableElement,\n });\n\n addFocusedToolbar({\n eventDetails: eventDetails,\n focusedToolbar: params.focusedToolbar,\n hideOverlay: () => {\n hideOverlay({\n visualBuilderContainer: params.visualBuilderContainer,\n visualBuilderOverlayWrapper: params.overlayWrapper,\n focusedToolbar: params.focusedToolbar,\n resizeObserver: params.resizeObserver,\n });\n },\n isVariant,\n });\n}\nasync function handleFieldSchemaAndIndividualFields(\n params: HandleBuilderInteractionParams,\n eventDetails: any,\n fieldMetadata: CslpData,\n editableElement: Element,\n previousSelectedElement: Element \| null\n) {\n const {\n content_type_uid,\n entry_uid,\n fieldPath,\n locale,\n variant: variantUid,\n fieldPathWithIndex,\n } = fieldMetadata;\n const fieldSchema = await FieldSchemaMap.getFieldSchema(\n content_type_uid,\n fieldPath\n );\n const { acl: entryAcl, workflowStage: entryWorkflowStageDetails, resolvedVariantPermissions } =\n await fetchEntryPermissionsAndStageDetails({\n entryUid: entry_uid,\n contentTypeUid: content_type_uid,\n locale,\n variantUid,\n fieldPathWithIndex,\n });\n\n if (fieldSchema) {\n const { isDisabled } = isFieldDisabled(\n fieldSchema,\n eventDetails,\n resolvedVariantPermissions,\n entryAcl,\n entryWorkflowStageDetails\n );\n if (isDisabled) {\n addOverlay({\n overlayWrapper: params.overlayWrapper,\n resizeObserver: params.resizeObserver,\n editableElement: editableElement,\n isFieldDisabled: true,\n });\n }\n }\n\n visualBuilderPostMessage?.send(VisualBuilderPostMessageEvents.FOCUS_FIELD, {\n DOMEditStack: getDOMEditStack(editableElement),\n });\n\n await handleIndividualFields(eventDetails, {\n visualBuilderContainer: params.visualBuilderContainer!,\n resizeObserver: params.resizeObserver,\n lastEditedField: previousSelectedElement,\n });\n}\nfunction observeEditableElementChanges(\n params: HandleBuilderInteractionParams,\n editableElement: Element\n) {\n const focusElementObserver = new MutationObserver((mutations) => {\n mutations.forEach((mutation) => {\n if (\n mutation.type === \"attributes\" &&\n mutation.attributeName === \"data-cslp\"\n ) {\n focusElementObserver?.disconnect();\n VisualBuilder.VisualBuilderGlobalState.value.focusElementObserver =\n null;\n handleBuilderInteraction({ ...params, reEvaluate: true });\n }\n });\n });\n\n VisualBuilder.VisualBuilderGlobalState.value.focusElementObserver =\n focusElementObserver;\n focusElementObserver.observe(editableElement, { attributes: true });\n}\n\nexport default handleBuilderInteraction;\n"],"mappings":"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","names":["import__","import_generateThread","uuidV4","Config","getXPath","visualBuilderPostMessage"]}

package/dist/legacy/visualBuilder/listeners/mouseClick.js CHANGED Viewed

@@ -28,6 +28,8 @@ import { toggleCollabPopup } from "../generators/generateThread.js";
 import { fixSvgXPath } from "../utils/collabUtils.js";
 import { v4 as uuidV4 } from "uuid";
 import { fetchEntryPermissionsAndStageDetails } from "../utils/fetchEntryPermissionsAndStageDetails.js";
+import { isCustomFieldMultipleInstance } from "../utils/isCustomFieldMultipleInstance.js";
+import { getParentCslp, getWholeFieldElement } from "../utils/getWholeFieldElement.js";
 function addOverlay(params) {
   if (!params.overlayWrapper || !params.editableElement) return;
   addFocusOverlay(
@@ -114,6 +116,30 @@ async function handleBuilderInteraction(params) {
     return;
   }
   const { editableElement, fieldMetadata } = eventDetails;
+  const { content_type_uid, fieldPath } = fieldMetadata;
+  if (FieldSchemaMap.hasFieldSchema(content_type_uid, fieldPath)) {
+    const fieldSchemaForCheck = await FieldSchemaMap.getFieldSchema(content_type_uid, fieldPath);
+    if (fieldSchemaForCheck && isCustomFieldMultipleInstance(fieldSchemaForCheck, fieldMetadata)) {
+      const parentCslp = getParentCslp(fieldMetadata.cslpValue);
+      const wholeFieldElement = 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 getFieldVariantStatus(fieldMetadata);
   const isVariant = variantStatus ? Object.values(variantStatus).some((value) => value === true) : false;
   cleanResidualsIfNeeded(params, editableElement);