@contentstack/live-preview-utils 3.0.0 → 3.0.2

package/dist/modern/visualBuilder/components/emptyBlock.cjs

@@ -85,6 +85,7 @@ function EmptyBlock(props) {
               (0, import_visualBuilder.visualBuilderStyles)()["visual-builder__empty-block-add-button"]
             ),
             onClick: () => sendAddInstanceEvent(),
+            type: "button",
             children: [
               /* @__PURE__ */ (0, import_jsx_runtime.jsx)("i", { className: "fas fa-plus" }),
               " \xA0",

package/dist/modern/visualBuilder/components/emptyBlock.cjs.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/visualBuilder/components/emptyBlock.tsx"],"sourcesContent":["import classNames from \"classnames\";\nimport { CslpData } from \"../../cslp/types/cslp.types\";\nimport { visualBuilderStyles } from \"../visualBuilder.style\";\nimport visualBuilderPostMessage from \"../utils/visualBuilderPostMessage\";\nimport { observeParentAndFocusNewInstance } from \"../utils/multipleElementAddButton\";\nimport { ISchemaFieldMap } from \"../utils/types/index.types\";\nimport { VisualBuilderPostMessageEvents } from \"../utils/types/postMessage.types\";\nimport React from \"preact/compat\";\n\ninterface EmptyBlockProps {\n    details: {\n        fieldMetadata: CslpData;\n        fieldSchema: ISchemaFieldMap;\n    };\n}\n\nexport function EmptyBlock(props: EmptyBlockProps): JSX.Element {\n    const { details } = props;\n\n    const blockParentName = details.fieldSchema.display_name;\n\n    async function sendAddInstanceEvent() {\n        await visualBuilderPostMessage?.send(\n            VisualBuilderPostMessageEvents.ADD_INSTANCE,\n            {\n                fieldMetadata: details.fieldMetadata,\n                index: 0,\n            }\n        );\n        observeParentAndFocusNewInstance({\n            parentCslp: details.fieldMetadata.cslpValue,\n            index: 0,\n        });\n    }\n\n    return (\n        <div\n            className={classNames(\n                \"visual-builder__empty-block\",\n                visualBuilderStyles()[\"visual-builder__empty-block\"]\n            )}\n        >\n            <div\n                className={classNames(\n                    \"visual-builder__empty-block-title\",\n                    visualBuilderStyles()[\"visual-builder__empty-block-title\"]\n                )}\n            >\n                There are no {blockParentName.toLowerCase()} on this page yet. Click the button below to add one.\n            </div>\n            <button\n                className={classNames(\n                    \"visual-builder__empty-block-add-button\",\n                    visualBuilderStyles()[\n                        \"visual-builder__empty-block-add-button\"\n                    ]\n                )}\n                onClick={() => sendAddInstanceEvent()}\n            >\n                <i className=\"fas fa-plus\"></i> &nbsp;\n                {blockParentName}\n            </button>\n        </div>\n    );\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,wBAAuB;AAEvB,2BAAoC;AACpC,sCAAqC;AACrC,sCAAiD;AAEjD,yBAA+C;AAoCnC;AA1BL,SAAS,WAAW,OAAqC;AAC5D,QAAM,EAAE,QAAQ,IAAI;AAEpB,QAAM,kBAAkB,QAAQ,YAAY;AAE5C,iBAAe,uBAAuB;AAClC,UAAM,gCAAAA,SAA0B;AAAA,MAC5B,kDAA+B;AAAA,MAC/B;AAAA,QACI,eAAe,QAAQ;AAAA,QACvB,OAAO;AAAA,MACX;AAAA,IACJ;AACA,0EAAiC;AAAA,MAC7B,YAAY,QAAQ,cAAc;AAAA,MAClC,OAAO;AAAA,IACX,CAAC;AAAA,EACL;AAEA,SACI;AAAA,IAAC;AAAA;AAAA,MACG,eAAW,kBAAAC;AAAA,QACP;AAAA,YACA,0CAAoB,EAAE,6BAA6B;AAAA,MACvD;AAAA,MAEA;AAAA;AAAA,UAAC;AAAA;AAAA,YACG,eAAW,kBAAAA;AAAA,cACP;AAAA,kBACA,0CAAoB,EAAE,mCAAmC;AAAA,YAC7D;AAAA,YACH;AAAA;AAAA,cACiB,gBAAgB,YAAY;AAAA,cAAE;AAAA;AAAA;AAAA,QAChD;AAAA,QACA;AAAA,UAAC;AAAA;AAAA,YACG,eAAW,kBAAAA;AAAA,cACP;AAAA,kBACA,0CAAoB,EAChB,wCACJ;AAAA,YACJ;AAAA,YACA,SAAS,MAAM,qBAAqB;AAAA,YAEpC;AAAA,0DAAC,OAAE,WAAU,eAAc;AAAA,cAAI;AAAA,cAC9B;AAAA;AAAA;AAAA,QACL;AAAA;AAAA;AAAA,EACJ;AAER;","names":["visualBuilderPostMessage","classNames"]}
+{"version":3,"sources":["../../../../src/visualBuilder/components/emptyBlock.tsx"],"sourcesContent":["import classNames from \"classnames\";\nimport { CslpData } from \"../../cslp/types/cslp.types\";\nimport { visualBuilderStyles } from \"../visualBuilder.style\";\nimport visualBuilderPostMessage from \"../utils/visualBuilderPostMessage\";\nimport { observeParentAndFocusNewInstance } from \"../utils/multipleElementAddButton\";\nimport { ISchemaFieldMap } from \"../utils/types/index.types\";\nimport { VisualBuilderPostMessageEvents } from \"../utils/types/postMessage.types\";\nimport React from \"preact/compat\";\n\ninterface EmptyBlockProps {\n    details: {\n        fieldMetadata: CslpData;\n        fieldSchema: ISchemaFieldMap;\n    };\n}\n\nexport function EmptyBlock(props: EmptyBlockProps): JSX.Element {\n    const { details } = props;\n\n    const blockParentName = details.fieldSchema.display_name;\n\n    async function sendAddInstanceEvent() {\n        await visualBuilderPostMessage?.send(\n            VisualBuilderPostMessageEvents.ADD_INSTANCE,\n            {\n                fieldMetadata: details.fieldMetadata,\n                index: 0,\n            }\n        );\n        observeParentAndFocusNewInstance({\n            parentCslp: details.fieldMetadata.cslpValue,\n            index: 0,\n        });\n    }\n\n    return (\n        <div\n            className={classNames(\n                \"visual-builder__empty-block\",\n                visualBuilderStyles()[\"visual-builder__empty-block\"]\n            )}\n        >\n            <div\n                className={classNames(\n                    \"visual-builder__empty-block-title\",\n                    visualBuilderStyles()[\"visual-builder__empty-block-title\"]\n                )}\n            >\n                There are no {blockParentName.toLowerCase()} on this page yet. Click the button below to add one.\n            </div>\n            <button\n                className={classNames(\n                    \"visual-builder__empty-block-add-button\",\n                    visualBuilderStyles()[\n                        \"visual-builder__empty-block-add-button\"\n                    ]\n                )}\n                onClick={() => sendAddInstanceEvent()}\n                type=\"button\"\n            >\n                <i className=\"fas fa-plus\"></i> &nbsp;\n                {blockParentName}\n            </button>\n        </div>\n    );\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,wBAAuB;AAEvB,2BAAoC;AACpC,sCAAqC;AACrC,sCAAiD;AAEjD,yBAA+C;AAoCnC;AA1BL,SAAS,WAAW,OAAqC;AAC5D,QAAM,EAAE,QAAQ,IAAI;AAEpB,QAAM,kBAAkB,QAAQ,YAAY;AAE5C,iBAAe,uBAAuB;AAClC,UAAM,gCAAAA,SAA0B;AAAA,MAC5B,kDAA+B;AAAA,MAC/B;AAAA,QACI,eAAe,QAAQ;AAAA,QACvB,OAAO;AAAA,MACX;AAAA,IACJ;AACA,0EAAiC;AAAA,MAC7B,YAAY,QAAQ,cAAc;AAAA,MAClC,OAAO;AAAA,IACX,CAAC;AAAA,EACL;AAEA,SACI;AAAA,IAAC;AAAA;AAAA,MACG,eAAW,kBAAAC;AAAA,QACP;AAAA,YACA,0CAAoB,EAAE,6BAA6B;AAAA,MACvD;AAAA,MAEA;AAAA;AAAA,UAAC;AAAA;AAAA,YACG,eAAW,kBAAAA;AAAA,cACP;AAAA,kBACA,0CAAoB,EAAE,mCAAmC;AAAA,YAC7D;AAAA,YACH;AAAA;AAAA,cACiB,gBAAgB,YAAY;AAAA,cAAE;AAAA;AAAA;AAAA,QAChD;AAAA,QACA;AAAA,UAAC;AAAA;AAAA,YACG,eAAW,kBAAAA;AAAA,cACP;AAAA,kBACA,0CAAoB,EAChB,wCACJ;AAAA,YACJ;AAAA,YACA,SAAS,MAAM,qBAAqB;AAAA,YACpC,MAAK;AAAA,YAEL;AAAA,0DAAC,OAAE,WAAU,eAAc;AAAA,cAAI;AAAA,cAC9B;AAAA;AAAA;AAAA,QACL;AAAA;AAAA;AAAA,EACJ;AAER;","names":["visualBuilderPostMessage","classNames"]}

package/dist/modern/visualBuilder/components/emptyBlock.js

@@ -53,6 +53,7 @@ function EmptyBlock(props) {
               visualBuilderStyles()["visual-builder__empty-block-add-button"]
             ),
             onClick: () => sendAddInstanceEvent(),
+            type: "button",
             children: [
               /* @__PURE__ */ jsx("i", { className: "fas fa-plus" }),
               " \xA0",

package/dist/modern/visualBuilder/components/emptyBlock.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/visualBuilder/components/emptyBlock.tsx"],"sourcesContent":["import classNames from \"classnames\";\nimport { CslpData } from \"../../cslp/types/cslp.types\";\nimport { visualBuilderStyles } from \"../visualBuilder.style\";\nimport visualBuilderPostMessage from \"../utils/visualBuilderPostMessage\";\nimport { observeParentAndFocusNewInstance } from \"../utils/multipleElementAddButton\";\nimport { ISchemaFieldMap } from \"../utils/types/index.types\";\nimport { VisualBuilderPostMessageEvents } from \"../utils/types/postMessage.types\";\nimport React from \"preact/compat\";\n\ninterface EmptyBlockProps {\n    details: {\n        fieldMetadata: CslpData;\n        fieldSchema: ISchemaFieldMap;\n    };\n}\n\nexport function EmptyBlock(props: EmptyBlockProps): JSX.Element {\n    const { details } = props;\n\n    const blockParentName = details.fieldSchema.display_name;\n\n    async function sendAddInstanceEvent() {\n        await visualBuilderPostMessage?.send(\n            VisualBuilderPostMessageEvents.ADD_INSTANCE,\n            {\n                fieldMetadata: details.fieldMetadata,\n                index: 0,\n            }\n        );\n        observeParentAndFocusNewInstance({\n            parentCslp: details.fieldMetadata.cslpValue,\n            index: 0,\n        });\n    }\n\n    return (\n        <div\n            className={classNames(\n                \"visual-builder__empty-block\",\n                visualBuilderStyles()[\"visual-builder__empty-block\"]\n            )}\n        >\n            <div\n                className={classNames(\n                    \"visual-builder__empty-block-title\",\n                    visualBuilderStyles()[\"visual-builder__empty-block-title\"]\n                )}\n            >\n                There are no {blockParentName.toLowerCase()} on this page yet. Click the button below to add one.\n            </div>\n            <button\n                className={classNames(\n                    \"visual-builder__empty-block-add-button\",\n                    visualBuilderStyles()[\n                        \"visual-builder__empty-block-add-button\"\n                    ]\n                )}\n                onClick={() => sendAddInstanceEvent()}\n            >\n                <i className=\"fas fa-plus\"></i> &nbsp;\n                {blockParentName}\n            </button>\n        </div>\n    );\n}\n"],"mappings":";;;AAAA,OAAO,gBAAgB;AAEvB,SAAS,2BAA2B;AACpC,OAAO,8BAA8B;AACrC,SAAS,wCAAwC;AAEjD,SAAS,sCAAsC;AAoCnC,SAiBI,KAjBJ;AA1BL,SAAS,WAAW,OAAqC;AAC5D,QAAM,EAAE,QAAQ,IAAI;AAEpB,QAAM,kBAAkB,QAAQ,YAAY;AAE5C,iBAAe,uBAAuB;AAClC,UAAM,0BAA0B;AAAA,MAC5B,+BAA+B;AAAA,MAC/B;AAAA,QACI,eAAe,QAAQ;AAAA,QACvB,OAAO;AAAA,MACX;AAAA,IACJ;AACA,qCAAiC;AAAA,MAC7B,YAAY,QAAQ,cAAc;AAAA,MAClC,OAAO;AAAA,IACX,CAAC;AAAA,EACL;AAEA,SACI;AAAA,IAAC;AAAA;AAAA,MACG,WAAW;AAAA,QACP;AAAA,QACA,oBAAoB,EAAE,6BAA6B;AAAA,MACvD;AAAA,MAEA;AAAA;AAAA,UAAC;AAAA;AAAA,YACG,WAAW;AAAA,cACP;AAAA,cACA,oBAAoB,EAAE,mCAAmC;AAAA,YAC7D;AAAA,YACH;AAAA;AAAA,cACiB,gBAAgB,YAAY;AAAA,cAAE;AAAA;AAAA;AAAA,QAChD;AAAA,QACA;AAAA,UAAC;AAAA;AAAA,YACG,WAAW;AAAA,cACP;AAAA,cACA,oBAAoB,EAChB,wCACJ;AAAA,YACJ;AAAA,YACA,SAAS,MAAM,qBAAqB;AAAA,YAEpC;AAAA,kCAAC,OAAE,WAAU,eAAc;AAAA,cAAI;AAAA,cAC9B;AAAA;AAAA;AAAA,QACL;AAAA;AAAA;AAAA,EACJ;AAER;","names":[]}
+{"version":3,"sources":["../../../../src/visualBuilder/components/emptyBlock.tsx"],"sourcesContent":["import classNames from \"classnames\";\nimport { CslpData } from \"../../cslp/types/cslp.types\";\nimport { visualBuilderStyles } from \"../visualBuilder.style\";\nimport visualBuilderPostMessage from \"../utils/visualBuilderPostMessage\";\nimport { observeParentAndFocusNewInstance } from \"../utils/multipleElementAddButton\";\nimport { ISchemaFieldMap } from \"../utils/types/index.types\";\nimport { VisualBuilderPostMessageEvents } from \"../utils/types/postMessage.types\";\nimport React from \"preact/compat\";\n\ninterface EmptyBlockProps {\n    details: {\n        fieldMetadata: CslpData;\n        fieldSchema: ISchemaFieldMap;\n    };\n}\n\nexport function EmptyBlock(props: EmptyBlockProps): JSX.Element {\n    const { details } = props;\n\n    const blockParentName = details.fieldSchema.display_name;\n\n    async function sendAddInstanceEvent() {\n        await visualBuilderPostMessage?.send(\n            VisualBuilderPostMessageEvents.ADD_INSTANCE,\n            {\n                fieldMetadata: details.fieldMetadata,\n                index: 0,\n            }\n        );\n        observeParentAndFocusNewInstance({\n            parentCslp: details.fieldMetadata.cslpValue,\n            index: 0,\n        });\n    }\n\n    return (\n        <div\n            className={classNames(\n                \"visual-builder__empty-block\",\n                visualBuilderStyles()[\"visual-builder__empty-block\"]\n            )}\n        >\n            <div\n                className={classNames(\n                    \"visual-builder__empty-block-title\",\n                    visualBuilderStyles()[\"visual-builder__empty-block-title\"]\n                )}\n            >\n                There are no {blockParentName.toLowerCase()} on this page yet. Click the button below to add one.\n            </div>\n            <button\n                className={classNames(\n                    \"visual-builder__empty-block-add-button\",\n                    visualBuilderStyles()[\n                        \"visual-builder__empty-block-add-button\"\n                    ]\n                )}\n                onClick={() => sendAddInstanceEvent()}\n                type=\"button\"\n            >\n                <i className=\"fas fa-plus\"></i> &nbsp;\n                {blockParentName}\n            </button>\n        </div>\n    );\n}\n"],"mappings":";;;AAAA,OAAO,gBAAgB;AAEvB,SAAS,2BAA2B;AACpC,OAAO,8BAA8B;AACrC,SAAS,wCAAwC;AAEjD,SAAS,sCAAsC;AAoCnC,SAkBI,KAlBJ;AA1BL,SAAS,WAAW,OAAqC;AAC5D,QAAM,EAAE,QAAQ,IAAI;AAEpB,QAAM,kBAAkB,QAAQ,YAAY;AAE5C,iBAAe,uBAAuB;AAClC,UAAM,0BAA0B;AAAA,MAC5B,+BAA+B;AAAA,MAC/B;AAAA,QACI,eAAe,QAAQ;AAAA,QACvB,OAAO;AAAA,MACX;AAAA,IACJ;AACA,qCAAiC;AAAA,MAC7B,YAAY,QAAQ,cAAc;AAAA,MAClC,OAAO;AAAA,IACX,CAAC;AAAA,EACL;AAEA,SACI;AAAA,IAAC;AAAA;AAAA,MACG,WAAW;AAAA,QACP;AAAA,QACA,oBAAoB,EAAE,6BAA6B;AAAA,MACvD;AAAA,MAEA;AAAA;AAAA,UAAC;AAAA;AAAA,YACG,WAAW;AAAA,cACP;AAAA,cACA,oBAAoB,EAAE,mCAAmC;AAAA,YAC7D;AAAA,YACH;AAAA;AAAA,cACiB,gBAAgB,YAAY;AAAA,cAAE;AAAA;AAAA;AAAA,QAChD;AAAA,QACA;AAAA,UAAC;AAAA;AAAA,YACG,WAAW;AAAA,cACP;AAAA,cACA,oBAAoB,EAChB,wCACJ;AAAA,YACJ;AAAA,YACA,SAAS,MAAM,qBAAqB;AAAA,YACpC,MAAK;AAAA,YAEL;AAAA,kCAAC,OAAE,WAAU,eAAc;AAAA,cAAI;AAAA,cAC9B;AAAA;AAAA;AAAA,QACL;AAAA;AAAA;AAAA,EACJ;AAER;","names":[]}

package/dist/modern/visualBuilder/components/pseudoEditableField.cjs

@@ -34,25 +34,18 @@ __export(pseudoEditableField_exports, {
 });
 module.exports = __toCommonJS(pseudoEditableField_exports);
 var import_classnames = __toESM(require("classnames"), 1);
-var import_getCamelCaseStyles = __toESM(require("../utils/getCamelCaseStyles.cjs"), 1);
-var import_getStyleOfAnElement = __toESM(require("../utils/getStyleOfAnElement.cjs"), 1);
 var import_visualBuilder = require("../visualBuilder.style.cjs");
+var import_getPsuedoEditableStylesElement = require("../utils/getPsuedoEditableStylesElement.cjs");
 var import_jsx_runtime = require("preact/jsx-runtime");
 function PseudoEditableFieldComponent(props) {
-  const styles = (0, import_getCamelCaseStyles.default)(
-    (0, import_getStyleOfAnElement.default)(props.editableElement)
-  );
-  const rect = props.editableElement.getBoundingClientRect();
-  styles.position = "absolute";
-  styles.top = `${rect.top + window.scrollY}px`;
-  styles.left = `${rect.left + window.scrollX}px`;
-  styles.height = "auto";
-  styles.whiteSpace = "pre-line";
-  styles.textTransform = "none";
+  const styles = (0, import_getPsuedoEditableStylesElement.getPsuedoEditableElementStyles)(props.editableElement, true);
   return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
     "div",
     {
-      className: (0, import_classnames.default)("visual-builder__pseudo-editable-element", (0, import_visualBuilder.visualBuilderStyles)()["visual-builder__pseudo-editable-element"]),
+      className: (0, import_classnames.default)(
+        "visual-builder__pseudo-editable-element",
+        (0, import_visualBuilder.visualBuilderStyles)()["visual-builder__pseudo-editable-element"]
+      ),
       "data-testid": "visual-builder__pseudo-editable-element",
       style: styles,
       children: props.config.textContent

package/dist/modern/visualBuilder/components/pseudoEditableField.cjs.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/visualBuilder/components/pseudoEditableField.tsx"],"sourcesContent":["import classNames from \"classnames\";\nimport getCamelCaseStyles from \"../utils/getCamelCaseStyles\";\nimport getStyleOfAnElement from \"../utils/getStyleOfAnElement\";\nimport React from \"preact/compat\";\nimport { visualBuilderStyles } from \"../visualBuilder.style\";\n\ninterface PseudoEditableFieldProps {\n    editableElement: HTMLElement;\n    config: { textContent: string };\n}\n\nfunction PseudoEditableFieldComponent(\n    props: PseudoEditableFieldProps\n): JSX.Element {\n    const styles = getCamelCaseStyles(\n        getStyleOfAnElement(props.editableElement)\n    );\n    // Get the offsetTop and offsetLeft of the editable element and set the position of the pseudo editable element\n    // The pseudo editable element is positioned absolutely at the same location as the editable element\n    const rect = props.editableElement.getBoundingClientRect();\n\n    styles.position = \"absolute\";\n    styles.top = `${rect.top + window.scrollY}px`;\n    styles.left = `${rect.left + window.scrollX}px`;\n    // setting height to auto so that the element can grow based on the content\n    // and the resize observer can detect the change in height\n    styles.height = \"auto\";\n    styles.whiteSpace = \"pre-line\"\n    styles.textTransform = \"none\"\n\n    return (\n        <div\n            className={\n                classNames(\"visual-builder__pseudo-editable-element\", visualBuilderStyles()[\"visual-builder__pseudo-editable-element\"])\n            }\n            data-testid=\"visual-builder__pseudo-editable-element\"\n            style={styles}\n        >\n            {props.config.textContent}\n        </div>\n    );\n}\n\nexport default PseudoEditableFieldComponent;\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,wBAAuB;AACvB,gCAA+B;AAC/B,iCAAgC;AAEhC,2BAAoC;AA2B5B;AApBR,SAAS,6BACL,OACW;AACX,QAAM,aAAS,0BAAAA;AAAA,QACX,2BAAAC,SAAoB,MAAM,eAAe;AAAA,EAC7C;AAGA,QAAM,OAAO,MAAM,gBAAgB,sBAAsB;AAEzD,SAAO,WAAW;AAClB,SAAO,MAAM,GAAG,KAAK,MAAM,OAAO,OAAO;AACzC,SAAO,OAAO,GAAG,KAAK,OAAO,OAAO,OAAO;AAG3C,SAAO,SAAS;AAChB,SAAO,aAAa;AACpB,SAAO,gBAAgB;AAEvB,SACI;AAAA,IAAC;AAAA;AAAA,MACG,eACI,kBAAAC,SAAW,+CAA2C,0CAAoB,EAAE,yCAAyC,CAAC;AAAA,MAE1H,eAAY;AAAA,MACZ,OAAO;AAAA,MAEN,gBAAM,OAAO;AAAA;AAAA,EAClB;AAER;AAEA,IAAO,8BAAQ;","names":["getCamelCaseStyles","getStyleOfAnElement","classNames"]}
+{"version":3,"sources":["../../../../src/visualBuilder/components/pseudoEditableField.tsx"],"sourcesContent":["import classNames from \"classnames\";\nimport React from \"preact/compat\";\nimport { visualBuilderStyles } from \"../visualBuilder.style\";\nimport { getPsuedoEditableElementStyles } from \"../utils/getPsuedoEditableStylesElement\";\n\ninterface PseudoEditableFieldProps {\n    editableElement: HTMLElement;\n    config: { textContent: string };\n}\n\nfunction PseudoEditableFieldComponent(\n    props: PseudoEditableFieldProps\n): JSX.Element {\n    const styles = getPsuedoEditableElementStyles(props.editableElement, true);\n\n    return (\n        <div\n            className={classNames(\n                \"visual-builder__pseudo-editable-element\",\n                visualBuilderStyles()[\"visual-builder__pseudo-editable-element\"]\n            )}\n            data-testid=\"visual-builder__pseudo-editable-element\"\n            style={styles}\n        >\n            {props.config.textContent}\n        </div>\n    );\n}\n\nexport default PseudoEditableFieldComponent;\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,wBAAuB;AAEvB,2BAAoC;AACpC,4CAA+C;AAavC;AANR,SAAS,6BACL,OACW;AACX,QAAM,aAAS,sEAA+B,MAAM,iBAAiB,IAAI;AAEzE,SACI;AAAA,IAAC;AAAA;AAAA,MACG,eAAW,kBAAAA;AAAA,QACP;AAAA,YACA,0CAAoB,EAAE,yCAAyC;AAAA,MACnE;AAAA,MACA,eAAY;AAAA,MACZ,OAAO;AAAA,MAEN,gBAAM,OAAO;AAAA;AAAA,EAClB;AAER;AAEA,IAAO,8BAAQ;","names":["classNames"]}

package/dist/modern/visualBuilder/components/pseudoEditableField.js

@@ -2,25 +2,18 @@ import "../../chunk-5WRI5ZAA.js";
 
 // src/visualBuilder/components/pseudoEditableField.tsx
 import classNames from "classnames";
-import getCamelCaseStyles from "../utils/getCamelCaseStyles.js";
-import getStyleOfAnElement from "../utils/getStyleOfAnElement.js";
 import { visualBuilderStyles } from "../visualBuilder.style.js";
+import { getPsuedoEditableElementStyles } from "../utils/getPsuedoEditableStylesElement.js";
 import { jsx } from "preact/jsx-runtime";
 function PseudoEditableFieldComponent(props) {
-  const styles = getCamelCaseStyles(
-    getStyleOfAnElement(props.editableElement)
-  );
-  const rect = props.editableElement.getBoundingClientRect();
-  styles.position = "absolute";
-  styles.top = `${rect.top + window.scrollY}px`;
-  styles.left = `${rect.left + window.scrollX}px`;
-  styles.height = "auto";
-  styles.whiteSpace = "pre-line";
-  styles.textTransform = "none";
+  const styles = getPsuedoEditableElementStyles(props.editableElement, true);
   return /* @__PURE__ */ jsx(
     "div",
     {
-      className: classNames("visual-builder__pseudo-editable-element", visualBuilderStyles()["visual-builder__pseudo-editable-element"]),
+      className: classNames(
+        "visual-builder__pseudo-editable-element",
+        visualBuilderStyles()["visual-builder__pseudo-editable-element"]
+      ),
       "data-testid": "visual-builder__pseudo-editable-element",
       style: styles,
       children: props.config.textContent

package/dist/modern/visualBuilder/components/pseudoEditableField.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/visualBuilder/components/pseudoEditableField.tsx"],"sourcesContent":["import classNames from \"classnames\";\nimport getCamelCaseStyles from \"../utils/getCamelCaseStyles\";\nimport getStyleOfAnElement from \"../utils/getStyleOfAnElement\";\nimport React from \"preact/compat\";\nimport { visualBuilderStyles } from \"../visualBuilder.style\";\n\ninterface PseudoEditableFieldProps {\n    editableElement: HTMLElement;\n    config: { textContent: string };\n}\n\nfunction PseudoEditableFieldComponent(\n    props: PseudoEditableFieldProps\n): JSX.Element {\n    const styles = getCamelCaseStyles(\n        getStyleOfAnElement(props.editableElement)\n    );\n    // Get the offsetTop and offsetLeft of the editable element and set the position of the pseudo editable element\n    // The pseudo editable element is positioned absolutely at the same location as the editable element\n    const rect = props.editableElement.getBoundingClientRect();\n\n    styles.position = \"absolute\";\n    styles.top = `${rect.top + window.scrollY}px`;\n    styles.left = `${rect.left + window.scrollX}px`;\n    // setting height to auto so that the element can grow based on the content\n    // and the resize observer can detect the change in height\n    styles.height = \"auto\";\n    styles.whiteSpace = \"pre-line\"\n    styles.textTransform = \"none\"\n\n    return (\n        <div\n            className={\n                classNames(\"visual-builder__pseudo-editable-element\", visualBuilderStyles()[\"visual-builder__pseudo-editable-element\"])\n            }\n            data-testid=\"visual-builder__pseudo-editable-element\"\n            style={styles}\n        >\n            {props.config.textContent}\n        </div>\n    );\n}\n\nexport default PseudoEditableFieldComponent;\n"],"mappings":";;;AAAA,OAAO,gBAAgB;AACvB,OAAO,wBAAwB;AAC/B,OAAO,yBAAyB;AAEhC,SAAS,2BAA2B;AA2B5B;AApBR,SAAS,6BACL,OACW;AACX,QAAM,SAAS;AAAA,IACX,oBAAoB,MAAM,eAAe;AAAA,EAC7C;AAGA,QAAM,OAAO,MAAM,gBAAgB,sBAAsB;AAEzD,SAAO,WAAW;AAClB,SAAO,MAAM,GAAG,KAAK,MAAM,OAAO,OAAO;AACzC,SAAO,OAAO,GAAG,KAAK,OAAO,OAAO,OAAO;AAG3C,SAAO,SAAS;AAChB,SAAO,aAAa;AACpB,SAAO,gBAAgB;AAEvB,SACI;AAAA,IAAC;AAAA;AAAA,MACG,WACI,WAAW,2CAA2C,oBAAoB,EAAE,yCAAyC,CAAC;AAAA,MAE1H,eAAY;AAAA,MACZ,OAAO;AAAA,MAEN,gBAAM,OAAO;AAAA;AAAA,EAClB;AAER;AAEA,IAAO,8BAAQ;","names":[]}
+{"version":3,"sources":["../../../../src/visualBuilder/components/pseudoEditableField.tsx"],"sourcesContent":["import classNames from \"classnames\";\nimport React from \"preact/compat\";\nimport { visualBuilderStyles } from \"../visualBuilder.style\";\nimport { getPsuedoEditableElementStyles } from \"../utils/getPsuedoEditableStylesElement\";\n\ninterface PseudoEditableFieldProps {\n    editableElement: HTMLElement;\n    config: { textContent: string };\n}\n\nfunction PseudoEditableFieldComponent(\n    props: PseudoEditableFieldProps\n): JSX.Element {\n    const styles = getPsuedoEditableElementStyles(props.editableElement, true);\n\n    return (\n        <div\n            className={classNames(\n                \"visual-builder__pseudo-editable-element\",\n                visualBuilderStyles()[\"visual-builder__pseudo-editable-element\"]\n            )}\n            data-testid=\"visual-builder__pseudo-editable-element\"\n            style={styles}\n        >\n            {props.config.textContent}\n        </div>\n    );\n}\n\nexport default PseudoEditableFieldComponent;\n"],"mappings":";;;AAAA,OAAO,gBAAgB;AAEvB,SAAS,2BAA2B;AACpC,SAAS,sCAAsC;AAavC;AANR,SAAS,6BACL,OACW;AACX,QAAM,SAAS,+BAA+B,MAAM,iBAAiB,IAAI;AAEzE,SACI;AAAA,IAAC;AAAA;AAAA,MACG,WAAW;AAAA,QACP;AAAA,QACA,oBAAoB,EAAE,yCAAyC;AAAA,MACnE;AAAA,MACA,eAAY;AAAA,MACZ,OAAO;AAAA,MAEN,gBAAM,OAAO;AAAA;AAAA,EAClB;AAER;AAEA,IAAO,8BAAQ;","names":[]}

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

@@ -54,18 +54,29 @@ function addVariantFieldClass(variant_uid, highlightVariantFields) {
     }
   });
 }
-function removeVariantFieldClass() {
-  const variantAndBaseFieldElements = document.querySelectorAll(
-    ".visual-builder__disabled-variant-field, .visual-builder__variant-field, .visual-builder__base-field"
-  );
-  variantAndBaseFieldElements.forEach((element) => {
-    element.classList.remove(
-      "visual-builder__disabled-variant-field",
-      "visual-builder__variant-field",
-      (0, import_visualBuilder.visualBuilderStyles)()["visual-builder__variant-field"],
-      "visual-builder__base-field"
+function removeVariantFieldClass(onlyHighlighted = false) {
+  if (onlyHighlighted) {
+    const variantElements = document.querySelectorAll(
+      `.${(0, import_visualBuilder.visualBuilderStyles)()["visual-builder__variant-field"]}`
     );
-  });
+    variantElements.forEach((element) => {
+      element.classList.remove(
+        (0, import_visualBuilder.visualBuilderStyles)()["visual-builder__variant-field"]
+      );
+    });
+  } else {
+    const variantAndBaseFieldElements = document.querySelectorAll(
+      ".visual-builder__disabled-variant-field, .visual-builder__variant-field, .visual-builder__base-field"
+    );
+    variantAndBaseFieldElements.forEach((element) => {
+      element.classList.remove(
+        "visual-builder__disabled-variant-field",
+        "visual-builder__variant-field",
+        (0, import_visualBuilder.visualBuilderStyles)()["visual-builder__variant-field"],
+        "visual-builder__base-field"
+      );
+    });
+  }
 }
 function setAudienceMode(mode) {
   import__.VisualBuilder.VisualBuilderGlobalState.value.audienceMode = mode;
@@ -107,8 +118,8 @@ function useVariantFieldsPostMessageEvent() {
   );
   import_visualBuilderPostMessage.default?.on(
     import_postMessage.VisualBuilderPostMessageEvents.REMOVE_VARIANT_FIELDS,
-    () => {
-      removeVariantFieldClass();
+    (event) => {
+      removeVariantFieldClass(event?.data?.onlyHighlighted);
     }
   );
 }

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/visualBuilder/eventManager/useVariantsPostMessageEvent.ts"],"sourcesContent":["import { VisualBuilder } from \"..\";\nimport { visualBuilderStyles } from \"../visualBuilder.style\";\nimport visualBuilderPostMessage from \"../utils/visualBuilderPostMessage\";\nimport { VisualBuilderPostMessageEvents } from \"../utils/types/postMessage.types\";\n\ninterface VariantFieldsEvent {\n    data: {\n        variant_data: {\n            variant: string;\n            highlightVariantFields: boolean;\n        };\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}\nfunction addVariantFieldClass(\n    variant_uid: string,\n    highlightVariantFields: boolean\n): void {\n    const elements = document.querySelectorAll(`[data-cslp]`);\n    elements.forEach((element) => {\n        const dataCslp = element.getAttribute(\"data-cslp\");\n        if (!dataCslp) return;\n\n        if (dataCslp?.includes(variant_uid)) {\n            highlightVariantFields &&\n                element.classList.add(\n                    visualBuilderStyles()[\"visual-builder__variant-field\"]\n                );\n            element.classList.add(\"visual-builder__variant-field\");\n        } else if (!dataCslp.startsWith(\"v2:\")) {\n            element.classList.add(\"visual-builder__base-field\");\n        } else {\n            element.classList.add(\"visual-builder__disabled-variant-field\");\n        }\n    });\n}\n\nfunction removeVariantFieldClass(): void {\n    const variantAndBaseFieldElements = document.querySelectorAll(\n        \".visual-builder__disabled-variant-field, .visual-builder__variant-field, .visual-builder__base-field\"\n    );\n    variantAndBaseFieldElements.forEach((element) => {\n        element.classList.remove(\n            \"visual-builder__disabled-variant-field\",\n            \"visual-builder__variant-field\",\n            visualBuilderStyles()[\"visual-builder__variant-field\"],\n            \"visual-builder__base-field\"\n        );\n    });\n}\n\nfunction setAudienceMode(mode: boolean): void {\n    VisualBuilder.VisualBuilderGlobalState.value.audienceMode = mode;\n}\nfunction setVariant(uid: string | null): void {\n    VisualBuilder.VisualBuilderGlobalState.value.variant = uid;\n}\nfunction setLocale(locale: string): void {\n    VisualBuilder.VisualBuilderGlobalState.value.locale = locale;\n}\n\nexport function useVariantFieldsPostMessageEvent(): void {\n    visualBuilderPostMessage?.on(\n        VisualBuilderPostMessageEvents.GET_VARIANT_ID,\n        (event: VariantEvent) => {\n            setVariant(event.data.variant);\n        }\n    );\n    visualBuilderPostMessage?.on(\n        VisualBuilderPostMessageEvents.GET_LOCALE,\n        (event: LocaleEvent) => {\n            setLocale(event.data.locale);\n        }\n    );\n    visualBuilderPostMessage?.on(\n        VisualBuilderPostMessageEvents.SET_AUDIENCE_MODE,\n        (event: AudienceEvent) => {\n            setAudienceMode(event.data.audienceMode);\n        }\n    );\n    visualBuilderPostMessage?.on(\n        VisualBuilderPostMessageEvents.SHOW_VARIANT_FIELDS,\n        (event: VariantFieldsEvent) => {\n            removeVariantFieldClass();\n            addVariantFieldClass(\n                event.data.variant_data.variant,\n                event.data.variant_data.highlightVariantFields\n            );\n        }\n    );\n    visualBuilderPostMessage?.on(\n        VisualBuilderPostMessageEvents.REMOVE_VARIANT_FIELDS,\n        () => {\n            removeVariantFieldClass();\n        }\n    );\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,eAA8B;AAC9B,2BAAoC;AACpC,sCAAqC;AACrC,yBAA+C;AA2B/C,SAAS,qBACL,aACA,wBACI;AACJ,QAAM,WAAW,SAAS,iBAAiB,aAAa;AACxD,WAAS,QAAQ,CAAC,YAAY;AAC1B,UAAM,WAAW,QAAQ,aAAa,WAAW;AACjD,QAAI,CAAC,SAAU;AAEf,QAAI,UAAU,SAAS,WAAW,GAAG;AACjC,gCACI,QAAQ,UAAU;AAAA,YACd,0CAAoB,EAAE,+BAA+B;AAAA,MACzD;AACJ,cAAQ,UAAU,IAAI,+BAA+B;AAAA,IACzD,WAAW,CAAC,SAAS,WAAW,KAAK,GAAG;AACpC,cAAQ,UAAU,IAAI,4BAA4B;AAAA,IACtD,OAAO;AACH,cAAQ,UAAU,IAAI,wCAAwC;AAAA,IAClE;AAAA,EACJ,CAAC;AACL;AAEA,SAAS,0BAAgC;AACrC,QAAM,8BAA8B,SAAS;AAAA,IACzC;AAAA,EACJ;AACA,8BAA4B,QAAQ,CAAC,YAAY;AAC7C,YAAQ,UAAU;AAAA,MACd;AAAA,MACA;AAAA,UACA,0CAAoB,EAAE,+BAA+B;AAAA,MACrD;AAAA,IACJ;AAAA,EACJ,CAAC;AACL;AAEA,SAAS,gBAAgB,MAAqB;AAC1C,yBAAc,yBAAyB,MAAM,eAAe;AAChE;AACA,SAAS,WAAW,KAA0B;AAC1C,yBAAc,yBAAyB,MAAM,UAAU;AAC3D;AACA,SAAS,UAAU,QAAsB;AACrC,yBAAc,yBAAyB,MAAM,SAAS;AAC1D;AAEO,SAAS,mCAAyC;AACrD,kCAAAA,SAA0B;AAAA,IACtB,kDAA+B;AAAA,IAC/B,CAAC,UAAwB;AACrB,iBAAW,MAAM,KAAK,OAAO;AAAA,IACjC;AAAA,EACJ;AACA,kCAAAA,SAA0B;AAAA,IACtB,kDAA+B;AAAA,IAC/B,CAAC,UAAuB;AACpB,gBAAU,MAAM,KAAK,MAAM;AAAA,IAC/B;AAAA,EACJ;AACA,kCAAAA,SAA0B;AAAA,IACtB,kDAA+B;AAAA,IAC/B,CAAC,UAAyB;AACtB,sBAAgB,MAAM,KAAK,YAAY;AAAA,IAC3C;AAAA,EACJ;AACA,kCAAAA,SAA0B;AAAA,IACtB,kDAA+B;AAAA,IAC/B,CAAC,UAA8B;AAC3B,8BAAwB;AACxB;AAAA,QACI,MAAM,KAAK,aAAa;AAAA,QACxB,MAAM,KAAK,aAAa;AAAA,MAC5B;AAAA,IACJ;AAAA,EACJ;AACA,kCAAAA,SAA0B;AAAA,IACtB,kDAA+B;AAAA,IAC/B,MAAM;AACF,8BAAwB;AAAA,IAC5B;AAAA,EACJ;AACJ;","names":["visualBuilderPostMessage"]}
+{"version":3,"sources":["../../../../src/visualBuilder/eventManager/useVariantsPostMessageEvent.ts"],"sourcesContent":["import { VisualBuilder } from \"..\";\nimport { visualBuilderStyles } from \"../visualBuilder.style\";\nimport visualBuilderPostMessage from \"../utils/visualBuilderPostMessage\";\nimport { VisualBuilderPostMessageEvents } from \"../utils/types/postMessage.types\";\n\ninterface VariantFieldsEvent {\n    data: {\n        variant_data: {\n            variant: string;\n            highlightVariantFields: boolean;\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}\nfunction addVariantFieldClass(\n    variant_uid: string,\n    highlightVariantFields: boolean\n): void {\n    const elements = document.querySelectorAll(`[data-cslp]`);\n    elements.forEach((element) => {\n        const dataCslp = element.getAttribute(\"data-cslp\");\n        if (!dataCslp) return;\n\n        if (dataCslp?.includes(variant_uid)) {\n            highlightVariantFields &&\n                element.classList.add(\n                    visualBuilderStyles()[\"visual-builder__variant-field\"]\n                );\n            element.classList.add(\"visual-builder__variant-field\");\n        } else if (!dataCslp.startsWith(\"v2:\")) {\n            element.classList.add(\"visual-builder__base-field\");\n        } else {\n            element.classList.add(\"visual-builder__disabled-variant-field\");\n        }\n    });\n}\n\nfunction removeVariantFieldClass(onlyHighlighted: boolean = false): void {\n    if (onlyHighlighted) {\n        const variantElements = document.querySelectorAll(\n            `.${visualBuilderStyles()[\"visual-builder__variant-field\"]}`\n        );\n        variantElements.forEach((element) => {\n            element.classList.remove(\n                visualBuilderStyles()[\"visual-builder__variant-field\"]\n            );\n        });\n    } else {\n        const variantAndBaseFieldElements = document.querySelectorAll(\n            \".visual-builder__disabled-variant-field, .visual-builder__variant-field, .visual-builder__base-field\"\n        );\n        variantAndBaseFieldElements.forEach((element) => {\n            element.classList.remove(\n                \"visual-builder__disabled-variant-field\",\n                \"visual-builder__variant-field\",\n                visualBuilderStyles()[\"visual-builder__variant-field\"],\n                \"visual-builder__base-field\"\n            );\n        });\n    }\n}\n\nfunction setAudienceMode(mode: boolean): void {\n    VisualBuilder.VisualBuilderGlobalState.value.audienceMode = mode;\n}\nfunction setVariant(uid: string | null): void {\n    VisualBuilder.VisualBuilderGlobalState.value.variant = uid;\n}\nfunction setLocale(locale: string): void {\n    VisualBuilder.VisualBuilderGlobalState.value.locale = locale;\n}\n\nexport function useVariantFieldsPostMessageEvent(): void {\n    visualBuilderPostMessage?.on(\n        VisualBuilderPostMessageEvents.GET_VARIANT_ID,\n        (event: VariantEvent) => {\n            setVariant(event.data.variant);\n        }\n    );\n    visualBuilderPostMessage?.on(\n        VisualBuilderPostMessageEvents.GET_LOCALE,\n        (event: LocaleEvent) => {\n            setLocale(event.data.locale);\n        }\n    );\n    visualBuilderPostMessage?.on(\n        VisualBuilderPostMessageEvents.SET_AUDIENCE_MODE,\n        (event: AudienceEvent) => {\n            setAudienceMode(event.data.audienceMode);\n        }\n    );\n    visualBuilderPostMessage?.on(\n        VisualBuilderPostMessageEvents.SHOW_VARIANT_FIELDS,\n        (event: VariantFieldsEvent) => {\n            removeVariantFieldClass();\n            addVariantFieldClass(\n                event.data.variant_data.variant,\n                event.data.variant_data.highlightVariantFields\n            );\n        }\n    );\n    visualBuilderPostMessage?.on(\n        VisualBuilderPostMessageEvents.REMOVE_VARIANT_FIELDS,\n        (event: RemoveVariantFieldsEvent) => {\n            removeVariantFieldClass(event?.data?.onlyHighlighted);\n        }\n    );\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,eAA8B;AAC9B,2BAAoC;AACpC,sCAAqC;AACrC,yBAA+C;AAgC/C,SAAS,qBACL,aACA,wBACI;AACJ,QAAM,WAAW,SAAS,iBAAiB,aAAa;AACxD,WAAS,QAAQ,CAAC,YAAY;AAC1B,UAAM,WAAW,QAAQ,aAAa,WAAW;AACjD,QAAI,CAAC,SAAU;AAEf,QAAI,UAAU,SAAS,WAAW,GAAG;AACjC,gCACI,QAAQ,UAAU;AAAA,YACd,0CAAoB,EAAE,+BAA+B;AAAA,MACzD;AACJ,cAAQ,UAAU,IAAI,+BAA+B;AAAA,IACzD,WAAW,CAAC,SAAS,WAAW,KAAK,GAAG;AACpC,cAAQ,UAAU,IAAI,4BAA4B;AAAA,IACtD,OAAO;AACH,cAAQ,UAAU,IAAI,wCAAwC;AAAA,IAClE;AAAA,EACJ,CAAC;AACL;AAEA,SAAS,wBAAwB,kBAA2B,OAAa;AACrE,MAAI,iBAAiB;AACjB,UAAM,kBAAkB,SAAS;AAAA,MAC7B,QAAI,0CAAoB,EAAE,+BAA+B,CAAC;AAAA,IAC9D;AACA,oBAAgB,QAAQ,CAAC,YAAY;AACjC,cAAQ,UAAU;AAAA,YACd,0CAAoB,EAAE,+BAA+B;AAAA,MACzD;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,YACA,0CAAoB,EAAE,+BAA+B;AAAA,QACrD;AAAA,MACJ;AAAA,IACJ,CAAC;AAAA,EACL;AACJ;AAEA,SAAS,gBAAgB,MAAqB;AAC1C,yBAAc,yBAAyB,MAAM,eAAe;AAChE;AACA,SAAS,WAAW,KAA0B;AAC1C,yBAAc,yBAAyB,MAAM,UAAU;AAC3D;AACA,SAAS,UAAU,QAAsB;AACrC,yBAAc,yBAAyB,MAAM,SAAS;AAC1D;AAEO,SAAS,mCAAyC;AACrD,kCAAAA,SAA0B;AAAA,IACtB,kDAA+B;AAAA,IAC/B,CAAC,UAAwB;AACrB,iBAAW,MAAM,KAAK,OAAO;AAAA,IACjC;AAAA,EACJ;AACA,kCAAAA,SAA0B;AAAA,IACtB,kDAA+B;AAAA,IAC/B,CAAC,UAAuB;AACpB,gBAAU,MAAM,KAAK,MAAM;AAAA,IAC/B;AAAA,EACJ;AACA,kCAAAA,SAA0B;AAAA,IACtB,kDAA+B;AAAA,IAC/B,CAAC,UAAyB;AACtB,sBAAgB,MAAM,KAAK,YAAY;AAAA,IAC3C;AAAA,EACJ;AACA,kCAAAA,SAA0B;AAAA,IACtB,kDAA+B;AAAA,IAC/B,CAAC,UAA8B;AAC3B,8BAAwB;AACxB;AAAA,QACI,MAAM,KAAK,aAAa;AAAA,QACxB,MAAM,KAAK,aAAa;AAAA,MAC5B;AAAA,IACJ;AAAA,EACJ;AACA,kCAAAA,SAA0B;AAAA,IACtB,kDAA+B;AAAA,IAC/B,CAAC,UAAoC;AACjC,8BAAwB,OAAO,MAAM,eAAe;AAAA,IACxD;AAAA,EACJ;AACJ;","names":["visualBuilderPostMessage"]}

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

@@ -22,18 +22,29 @@ function addVariantFieldClass(variant_uid, highlightVariantFields) {
     }
   });
 }
-function removeVariantFieldClass() {
-  const variantAndBaseFieldElements = document.querySelectorAll(
-    ".visual-builder__disabled-variant-field, .visual-builder__variant-field, .visual-builder__base-field"
-  );
-  variantAndBaseFieldElements.forEach((element) => {
-    element.classList.remove(
-      "visual-builder__disabled-variant-field",
-      "visual-builder__variant-field",
-      visualBuilderStyles()["visual-builder__variant-field"],
-      "visual-builder__base-field"
+function removeVariantFieldClass(onlyHighlighted = false) {
+  if (onlyHighlighted) {
+    const variantElements = document.querySelectorAll(
+      `.${visualBuilderStyles()["visual-builder__variant-field"]}`
     );
-  });
+    variantElements.forEach((element) => {
+      element.classList.remove(
+        visualBuilderStyles()["visual-builder__variant-field"]
+      );
+    });
+  } else {
+    const variantAndBaseFieldElements = document.querySelectorAll(
+      ".visual-builder__disabled-variant-field, .visual-builder__variant-field, .visual-builder__base-field"
+    );
+    variantAndBaseFieldElements.forEach((element) => {
+      element.classList.remove(
+        "visual-builder__disabled-variant-field",
+        "visual-builder__variant-field",
+        visualBuilderStyles()["visual-builder__variant-field"],
+        "visual-builder__base-field"
+      );
+    });
+  }
 }
 function setAudienceMode(mode) {
   VisualBuilder.VisualBuilderGlobalState.value.audienceMode = mode;
@@ -75,8 +86,8 @@ function useVariantFieldsPostMessageEvent() {
   );
   visualBuilderPostMessage?.on(
     VisualBuilderPostMessageEvents.REMOVE_VARIANT_FIELDS,
-    () => {
-      removeVariantFieldClass();
+    (event) => {
+      removeVariantFieldClass(event?.data?.onlyHighlighted);
     }
   );
 }

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/visualBuilder/eventManager/useVariantsPostMessageEvent.ts"],"sourcesContent":["import { VisualBuilder } from \"..\";\nimport { visualBuilderStyles } from \"../visualBuilder.style\";\nimport visualBuilderPostMessage from \"../utils/visualBuilderPostMessage\";\nimport { VisualBuilderPostMessageEvents } from \"../utils/types/postMessage.types\";\n\ninterface VariantFieldsEvent {\n    data: {\n        variant_data: {\n            variant: string;\n            highlightVariantFields: boolean;\n        };\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}\nfunction addVariantFieldClass(\n    variant_uid: string,\n    highlightVariantFields: boolean\n): void {\n    const elements = document.querySelectorAll(`[data-cslp]`);\n    elements.forEach((element) => {\n        const dataCslp = element.getAttribute(\"data-cslp\");\n        if (!dataCslp) return;\n\n        if (dataCslp?.includes(variant_uid)) {\n            highlightVariantFields &&\n                element.classList.add(\n                    visualBuilderStyles()[\"visual-builder__variant-field\"]\n                );\n            element.classList.add(\"visual-builder__variant-field\");\n        } else if (!dataCslp.startsWith(\"v2:\")) {\n            element.classList.add(\"visual-builder__base-field\");\n        } else {\n            element.classList.add(\"visual-builder__disabled-variant-field\");\n        }\n    });\n}\n\nfunction removeVariantFieldClass(): void {\n    const variantAndBaseFieldElements = document.querySelectorAll(\n        \".visual-builder__disabled-variant-field, .visual-builder__variant-field, .visual-builder__base-field\"\n    );\n    variantAndBaseFieldElements.forEach((element) => {\n        element.classList.remove(\n            \"visual-builder__disabled-variant-field\",\n            \"visual-builder__variant-field\",\n            visualBuilderStyles()[\"visual-builder__variant-field\"],\n            \"visual-builder__base-field\"\n        );\n    });\n}\n\nfunction setAudienceMode(mode: boolean): void {\n    VisualBuilder.VisualBuilderGlobalState.value.audienceMode = mode;\n}\nfunction setVariant(uid: string | null): void {\n    VisualBuilder.VisualBuilderGlobalState.value.variant = uid;\n}\nfunction setLocale(locale: string): void {\n    VisualBuilder.VisualBuilderGlobalState.value.locale = locale;\n}\n\nexport function useVariantFieldsPostMessageEvent(): void {\n    visualBuilderPostMessage?.on(\n        VisualBuilderPostMessageEvents.GET_VARIANT_ID,\n        (event: VariantEvent) => {\n            setVariant(event.data.variant);\n        }\n    );\n    visualBuilderPostMessage?.on(\n        VisualBuilderPostMessageEvents.GET_LOCALE,\n        (event: LocaleEvent) => {\n            setLocale(event.data.locale);\n        }\n    );\n    visualBuilderPostMessage?.on(\n        VisualBuilderPostMessageEvents.SET_AUDIENCE_MODE,\n        (event: AudienceEvent) => {\n            setAudienceMode(event.data.audienceMode);\n        }\n    );\n    visualBuilderPostMessage?.on(\n        VisualBuilderPostMessageEvents.SHOW_VARIANT_FIELDS,\n        (event: VariantFieldsEvent) => {\n            removeVariantFieldClass();\n            addVariantFieldClass(\n                event.data.variant_data.variant,\n                event.data.variant_data.highlightVariantFields\n            );\n        }\n    );\n    visualBuilderPostMessage?.on(\n        VisualBuilderPostMessageEvents.REMOVE_VARIANT_FIELDS,\n        () => {\n            removeVariantFieldClass();\n        }\n    );\n}\n"],"mappings":";;;AAAA,SAAS,qBAAqB;AAC9B,SAAS,2BAA2B;AACpC,OAAO,8BAA8B;AACrC,SAAS,sCAAsC;AA2B/C,SAAS,qBACL,aACA,wBACI;AACJ,QAAM,WAAW,SAAS,iBAAiB,aAAa;AACxD,WAAS,QAAQ,CAAC,YAAY;AAC1B,UAAM,WAAW,QAAQ,aAAa,WAAW;AACjD,QAAI,CAAC,SAAU;AAEf,QAAI,UAAU,SAAS,WAAW,GAAG;AACjC,gCACI,QAAQ,UAAU;AAAA,QACd,oBAAoB,EAAE,+BAA+B;AAAA,MACzD;AACJ,cAAQ,UAAU,IAAI,+BAA+B;AAAA,IACzD,WAAW,CAAC,SAAS,WAAW,KAAK,GAAG;AACpC,cAAQ,UAAU,IAAI,4BAA4B;AAAA,IACtD,OAAO;AACH,cAAQ,UAAU,IAAI,wCAAwC;AAAA,IAClE;AAAA,EACJ,CAAC;AACL;AAEA,SAAS,0BAAgC;AACrC,QAAM,8BAA8B,SAAS;AAAA,IACzC;AAAA,EACJ;AACA,8BAA4B,QAAQ,CAAC,YAAY;AAC7C,YAAQ,UAAU;AAAA,MACd;AAAA,MACA;AAAA,MACA,oBAAoB,EAAE,+BAA+B;AAAA,MACrD;AAAA,IACJ;AAAA,EACJ,CAAC;AACL;AAEA,SAAS,gBAAgB,MAAqB;AAC1C,gBAAc,yBAAyB,MAAM,eAAe;AAChE;AACA,SAAS,WAAW,KAA0B;AAC1C,gBAAc,yBAAyB,MAAM,UAAU;AAC3D;AACA,SAAS,UAAU,QAAsB;AACrC,gBAAc,yBAAyB,MAAM,SAAS;AAC1D;AAEO,SAAS,mCAAyC;AACrD,4BAA0B;AAAA,IACtB,+BAA+B;AAAA,IAC/B,CAAC,UAAwB;AACrB,iBAAW,MAAM,KAAK,OAAO;AAAA,IACjC;AAAA,EACJ;AACA,4BAA0B;AAAA,IACtB,+BAA+B;AAAA,IAC/B,CAAC,UAAuB;AACpB,gBAAU,MAAM,KAAK,MAAM;AAAA,IAC/B;AAAA,EACJ;AACA,4BAA0B;AAAA,IACtB,+BAA+B;AAAA,IAC/B,CAAC,UAAyB;AACtB,sBAAgB,MAAM,KAAK,YAAY;AAAA,IAC3C;AAAA,EACJ;AACA,4BAA0B;AAAA,IACtB,+BAA+B;AAAA,IAC/B,CAAC,UAA8B;AAC3B,8BAAwB;AACxB;AAAA,QACI,MAAM,KAAK,aAAa;AAAA,QACxB,MAAM,KAAK,aAAa;AAAA,MAC5B;AAAA,IACJ;AAAA,EACJ;AACA,4BAA0B;AAAA,IACtB,+BAA+B;AAAA,IAC/B,MAAM;AACF,8BAAwB;AAAA,IAC5B;AAAA,EACJ;AACJ;","names":[]}
+{"version":3,"sources":["../../../../src/visualBuilder/eventManager/useVariantsPostMessageEvent.ts"],"sourcesContent":["import { VisualBuilder } from \"..\";\nimport { visualBuilderStyles } from \"../visualBuilder.style\";\nimport visualBuilderPostMessage from \"../utils/visualBuilderPostMessage\";\nimport { VisualBuilderPostMessageEvents } from \"../utils/types/postMessage.types\";\n\ninterface VariantFieldsEvent {\n    data: {\n        variant_data: {\n            variant: string;\n            highlightVariantFields: boolean;\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}\nfunction addVariantFieldClass(\n    variant_uid: string,\n    highlightVariantFields: boolean\n): void {\n    const elements = document.querySelectorAll(`[data-cslp]`);\n    elements.forEach((element) => {\n        const dataCslp = element.getAttribute(\"data-cslp\");\n        if (!dataCslp) return;\n\n        if (dataCslp?.includes(variant_uid)) {\n            highlightVariantFields &&\n                element.classList.add(\n                    visualBuilderStyles()[\"visual-builder__variant-field\"]\n                );\n            element.classList.add(\"visual-builder__variant-field\");\n        } else if (!dataCslp.startsWith(\"v2:\")) {\n            element.classList.add(\"visual-builder__base-field\");\n        } else {\n            element.classList.add(\"visual-builder__disabled-variant-field\");\n        }\n    });\n}\n\nfunction removeVariantFieldClass(onlyHighlighted: boolean = false): void {\n    if (onlyHighlighted) {\n        const variantElements = document.querySelectorAll(\n            `.${visualBuilderStyles()[\"visual-builder__variant-field\"]}`\n        );\n        variantElements.forEach((element) => {\n            element.classList.remove(\n                visualBuilderStyles()[\"visual-builder__variant-field\"]\n            );\n        });\n    } else {\n        const variantAndBaseFieldElements = document.querySelectorAll(\n            \".visual-builder__disabled-variant-field, .visual-builder__variant-field, .visual-builder__base-field\"\n        );\n        variantAndBaseFieldElements.forEach((element) => {\n            element.classList.remove(\n                \"visual-builder__disabled-variant-field\",\n                \"visual-builder__variant-field\",\n                visualBuilderStyles()[\"visual-builder__variant-field\"],\n                \"visual-builder__base-field\"\n            );\n        });\n    }\n}\n\nfunction setAudienceMode(mode: boolean): void {\n    VisualBuilder.VisualBuilderGlobalState.value.audienceMode = mode;\n}\nfunction setVariant(uid: string | null): void {\n    VisualBuilder.VisualBuilderGlobalState.value.variant = uid;\n}\nfunction setLocale(locale: string): void {\n    VisualBuilder.VisualBuilderGlobalState.value.locale = locale;\n}\n\nexport function useVariantFieldsPostMessageEvent(): void {\n    visualBuilderPostMessage?.on(\n        VisualBuilderPostMessageEvents.GET_VARIANT_ID,\n        (event: VariantEvent) => {\n            setVariant(event.data.variant);\n        }\n    );\n    visualBuilderPostMessage?.on(\n        VisualBuilderPostMessageEvents.GET_LOCALE,\n        (event: LocaleEvent) => {\n            setLocale(event.data.locale);\n        }\n    );\n    visualBuilderPostMessage?.on(\n        VisualBuilderPostMessageEvents.SET_AUDIENCE_MODE,\n        (event: AudienceEvent) => {\n            setAudienceMode(event.data.audienceMode);\n        }\n    );\n    visualBuilderPostMessage?.on(\n        VisualBuilderPostMessageEvents.SHOW_VARIANT_FIELDS,\n        (event: VariantFieldsEvent) => {\n            removeVariantFieldClass();\n            addVariantFieldClass(\n                event.data.variant_data.variant,\n                event.data.variant_data.highlightVariantFields\n            );\n        }\n    );\n    visualBuilderPostMessage?.on(\n        VisualBuilderPostMessageEvents.REMOVE_VARIANT_FIELDS,\n        (event: RemoveVariantFieldsEvent) => {\n            removeVariantFieldClass(event?.data?.onlyHighlighted);\n        }\n    );\n}\n"],"mappings":";;;AAAA,SAAS,qBAAqB;AAC9B,SAAS,2BAA2B;AACpC,OAAO,8BAA8B;AACrC,SAAS,sCAAsC;AAgC/C,SAAS,qBACL,aACA,wBACI;AACJ,QAAM,WAAW,SAAS,iBAAiB,aAAa;AACxD,WAAS,QAAQ,CAAC,YAAY;AAC1B,UAAM,WAAW,QAAQ,aAAa,WAAW;AACjD,QAAI,CAAC,SAAU;AAEf,QAAI,UAAU,SAAS,WAAW,GAAG;AACjC,gCACI,QAAQ,UAAU;AAAA,QACd,oBAAoB,EAAE,+BAA+B;AAAA,MACzD;AACJ,cAAQ,UAAU,IAAI,+BAA+B;AAAA,IACzD,WAAW,CAAC,SAAS,WAAW,KAAK,GAAG;AACpC,cAAQ,UAAU,IAAI,4BAA4B;AAAA,IACtD,OAAO;AACH,cAAQ,UAAU,IAAI,wCAAwC;AAAA,IAClE;AAAA,EACJ,CAAC;AACL;AAEA,SAAS,wBAAwB,kBAA2B,OAAa;AACrE,MAAI,iBAAiB;AACjB,UAAM,kBAAkB,SAAS;AAAA,MAC7B,IAAI,oBAAoB,EAAE,+BAA+B,CAAC;AAAA,IAC9D;AACA,oBAAgB,QAAQ,CAAC,YAAY;AACjC,cAAQ,UAAU;AAAA,QACd,oBAAoB,EAAE,+BAA+B;AAAA,MACzD;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,+BAA+B;AAAA,QACrD;AAAA,MACJ;AAAA,IACJ,CAAC;AAAA,EACL;AACJ;AAEA,SAAS,gBAAgB,MAAqB;AAC1C,gBAAc,yBAAyB,MAAM,eAAe;AAChE;AACA,SAAS,WAAW,KAA0B;AAC1C,gBAAc,yBAAyB,MAAM,UAAU;AAC3D;AACA,SAAS,UAAU,QAAsB;AACrC,gBAAc,yBAAyB,MAAM,SAAS;AAC1D;AAEO,SAAS,mCAAyC;AACrD,4BAA0B;AAAA,IACtB,+BAA+B;AAAA,IAC/B,CAAC,UAAwB;AACrB,iBAAW,MAAM,KAAK,OAAO;AAAA,IACjC;AAAA,EACJ;AACA,4BAA0B;AAAA,IACtB,+BAA+B;AAAA,IAC/B,CAAC,UAAuB;AACpB,gBAAU,MAAM,KAAK,MAAM;AAAA,IAC/B;AAAA,EACJ;AACA,4BAA0B;AAAA,IACtB,+BAA+B;AAAA,IAC/B,CAAC,UAAyB;AACtB,sBAAgB,MAAM,KAAK,YAAY;AAAA,IAC3C;AAAA,EACJ;AACA,4BAA0B;AAAA,IACtB,+BAA+B;AAAA,IAC/B,CAAC,UAA8B;AAC3B,8BAAwB;AACxB;AAAA,QACI,MAAM,KAAK,aAAa;AAAA,QACxB,MAAM,KAAK,aAAa;AAAA,MAC5B;AAAA,IACJ;AAAA,EACJ;AACA,4BAA0B;AAAA,IACtB,+BAA+B;AAAA,IAC/B,CAAC,UAAoC;AACjC,8BAAwB,OAAO,MAAM,eAAe;AAAA,IACxD;AAAA,EACJ;AACJ;","names":[]}

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

@@ -40,11 +40,11 @@ var import_FieldToolbar = __toESM(require("../components/FieldToolbar.cjs"), 1);
 var import_preact = require("preact");
 var import_fieldLabelWrapper = __toESM(require("../components/fieldLabelWrapper.cjs"), 1);
 var import_jsx_runtime = require("preact/jsx-runtime");
-function appendFocusedToolbar(eventDetails, focusedToolbarElement) {
+function appendFocusedToolbar(eventDetails, focusedToolbarElement, hideOverlay) {
   appendFieldPathDropdown(eventDetails, focusedToolbarElement);
-  appendFieldToolbar(eventDetails, focusedToolbarElement);
+  appendFieldToolbar(eventDetails, focusedToolbarElement, hideOverlay);
 }
-function appendFieldToolbar(eventDetails, focusedToolbarElement) {
+function appendFieldToolbar(eventDetails, focusedToolbarElement, hideOverlay) {
   if (focusedToolbarElement.querySelector(
     ".visual-builder__focused-toolbar__multiple-field-toolbar"
   ))
@@ -54,7 +54,8 @@ function appendFieldToolbar(eventDetails, focusedToolbarElement) {
     /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
       import_FieldToolbar.default,
       {
-        eventDetails
+        eventDetails,
+        hideOverlay
       }
     ),
     wrapper
@@ -62,7 +63,7 @@ function appendFieldToolbar(eventDetails, focusedToolbarElement) {
   focusedToolbarElement.append(wrapper);
 }
 function appendFieldPathDropdown(eventDetails, focusedToolbarElement) {
-  if (document.querySelector("visual-builder__focused-toolbar__field-label-wrapper"))
+  if (document.querySelector(".visual-builder__focused-toolbar__field-label-wrapper"))
     return;
   const { editableElement: targetElement, fieldMetadata } = eventDetails;
   const targetElementDimension = targetElement.getBoundingClientRect();

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/visualBuilder/generators/generateToolbar.tsx"],"sourcesContent":["import { 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 { FieldSchemaMap } from \"../utils/fieldSchemaMap\";\nimport { isFieldDisabled } from \"../utils/isFieldDisabled\";\n\nimport FieldToolbarComponent from \"../components/FieldToolbar\";\nimport { render } from \"preact\";\nimport FieldLabelWrapperComponent from \"../components/fieldLabelWrapper\";\n\nexport function appendFocusedToolbar(\n    eventDetails: VisualBuilderCslpEventDetails,\n    focusedToolbarElement: HTMLDivElement\n): void {\n    appendFieldPathDropdown(eventDetails, focusedToolbarElement);\n    appendFieldToolbar(eventDetails, focusedToolbarElement);\n}\n\nexport function appendFieldToolbar(\n    eventDetails: VisualBuilderCslpEventDetails,\n    focusedToolbarElement: HTMLDivElement\n): void {\n    if (\n        focusedToolbarElement.querySelector(\n            \".visual-builder__focused-toolbar__multiple-field-toolbar\"\n        )\n    )\n        return;\n    const wrapper = document.createDocumentFragment();\n    render(\n        <FieldToolbarComponent\n            eventDetails={eventDetails}\n        />,\n        wrapper\n    );\n\n    focusedToolbarElement.append(wrapper);\n}\n\nexport function appendFieldPathDropdown(\n    eventDetails: VisualBuilderCslpEventDetails,\n    focusedToolbarElement: HTMLDivElement\n): void {\n    if(document.querySelector(\"visual-builder__focused-toolbar__field-label-wrapper\"))\n        return;\n    const { editableElement: targetElement, fieldMetadata } = eventDetails;\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"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AACA,uBAMO;AAIP,0BAAkC;AAClC,oBAAuB;AACvB,+BAAuC;AAsB/B;AApBD,SAAS,qBACZ,cACA,uBACI;AACJ,0BAAwB,cAAc,qBAAqB;AAC3D,qBAAmB,cAAc,qBAAqB;AAC1D;AAEO,SAAS,mBACZ,cACA,uBACI;AACJ,MACI,sBAAsB;AAAA,IAClB;AAAA,EACJ;AAEA;AACJ,QAAM,UAAU,SAAS,uBAAuB;AAChD;AAAA,IACI;AAAA,MAAC,oBAAAA;AAAA,MAAA;AAAA,QACG;AAAA;AAAA,IACJ;AAAA,IACA;AAAA,EACJ;AAEA,wBAAsB,OAAO,OAAO;AACxC;AAEO,SAAS,wBACZ,cACA,uBACI;AACJ,MAAG,SAAS,cAAc,sDAAsD;AAC5E;AACJ,QAAM,EAAE,iBAAiB,eAAe,cAAc,IAAI;AAC1D,QAAM,yBAAyB,cAAc,sBAAsB;AAEnE,QAAM,kBACF,uBAAuB,MAAM,OAAO,UAAU;AAElD,QAAM,0BACF,uBAAuB,MAAM,OAAO,UAAU,mCACxC,kBAAkB,uBAAuB,SAAS,mCAClD;AAEV,QAAM,mBACF,uBAAuB,OAAO;AAClC,QAAM,2BAA2B,KAAK;AAAA,IAClC;AAAA,IACA;AAAA,EACJ;AAEA,QAAM,+BACF,OAAO,UAAU,OAAO,aAAa,uBAAuB;AAEhE,MAAI,+BAA+B,oCAAmB;AAElD,0BAAsB,MAAM,iBAAiB;AAC7C,0BAAsB,MAAM,OAAO,GAC/B,uBAAuB,QAAQ,iDACnC;AAAA,EACJ,OAAO;AACH,0BAAsB,MAAM,iBAAiB;AAC7C,0BAAsB,MAAM,OAAO,GAAG,wBAAwB;AAAA,EAClE;AAEA,wBAAsB,MAAM,MAAM,GAAG,uBAAuB;AAE5D,QAAM,cAAc,uBAAuB,eAAe,CAAC;AAE3D,QAAM,UAAU,SAAS,uBAAuB;AAChD;AAAA,IACI;AAAA,MAAC,yBAAAC;AAAA,MAAA;AAAA,QACG;AAAA,QACA;AAAA,QACA;AAAA,QACA,0BAA0B,CAAC,SAAiB;AACxC,gBAAM,gBAAgB,cAAc;AAAA,YAChC,IAAI,wCAAuB,KAAK,IAAI;AAAA,UACxC;AACA,iBAAO;AAAA,QACX;AAAA;AAAA,IACJ;AAAA,IACA;AAAA,EACJ;AAEA,wBAAsB,YAAY,OAAO;AAC7C;AAEA,SAAS,uBACL,eACA,OACa;AACb,QAAM,YAA2B,CAAC;AAClC,MAAI,iBAAiB,cAAc;AAEnC,SAAO,QAAQ,KAAK,mBAAmB,OAAO,SAAS,MAAM;AACzD,QAAI,CAAC,gBAAgB;AACjB,aAAO;AAAA,IACX;AAEA,QAAI,eAAe,aAAa,wCAAuB,GAAG;AACtD,gBAAU;AAAA,QACN,eAAe,aAAa,wCAAuB;AAAA,MACvD;AACA;AAAA,IACJ;AACA,qBAAiB,eAAe;AAAA,EACpC;AAEA,SAAO;AACX;","names":["FieldToolbarComponent","FieldLabelWrapperComponent"]}
+{"version":3,"sources":["../../../../src/visualBuilder/generators/generateToolbar.tsx"],"sourcesContent":["import { 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 { FieldSchemaMap } from \"../utils/fieldSchemaMap\";\nimport { isFieldDisabled } from \"../utils/isFieldDisabled\";\n\nimport FieldToolbarComponent from \"../components/FieldToolbar\";\nimport { render } from \"preact\";\nimport FieldLabelWrapperComponent from \"../components/fieldLabelWrapper\";\n\nexport function appendFocusedToolbar(\n    eventDetails: VisualBuilderCslpEventDetails,\n    focusedToolbarElement: HTMLDivElement,\n    hideOverlay: () => void\n): void {\n    appendFieldPathDropdown(eventDetails, focusedToolbarElement);\n    appendFieldToolbar(eventDetails, focusedToolbarElement, hideOverlay);\n}\n\nexport function appendFieldToolbar(\n    eventDetails: VisualBuilderCslpEventDetails,\n    focusedToolbarElement: HTMLDivElement,\n    hideOverlay: () => void\n): void {\n    if (\n        focusedToolbarElement.querySelector(\n            \".visual-builder__focused-toolbar__multiple-field-toolbar\"\n        )\n    )\n        return;\n    const wrapper = document.createDocumentFragment();\n    render(\n        <FieldToolbarComponent\n            eventDetails={eventDetails}\n            hideOverlay={hideOverlay}\n        />,\n        wrapper\n    );\n\n    focusedToolbarElement.append(wrapper);\n}\n\nexport function appendFieldPathDropdown(\n    eventDetails: VisualBuilderCslpEventDetails,\n    focusedToolbarElement: HTMLDivElement\n): void {\n    if(document.querySelector(\".visual-builder__focused-toolbar__field-label-wrapper\"))\n        return;\n    const { editableElement: targetElement, fieldMetadata } = eventDetails;\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"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AACA,uBAMO;AAIP,0BAAkC;AAClC,oBAAuB;AACvB,+BAAuC;AAwB/B;AAtBD,SAAS,qBACZ,cACA,uBACA,aACI;AACJ,0BAAwB,cAAc,qBAAqB;AAC3D,qBAAmB,cAAc,uBAAuB,WAAW;AACvE;AAEO,SAAS,mBACZ,cACA,uBACA,aACI;AACJ,MACI,sBAAsB;AAAA,IAClB;AAAA,EACJ;AAEA;AACJ,QAAM,UAAU,SAAS,uBAAuB;AAChD;AAAA,IACI;AAAA,MAAC,oBAAAA;AAAA,MAAA;AAAA,QACG;AAAA,QACA;AAAA;AAAA,IACJ;AAAA,IACA;AAAA,EACJ;AAEA,wBAAsB,OAAO,OAAO;AACxC;AAEO,SAAS,wBACZ,cACA,uBACI;AACJ,MAAG,SAAS,cAAc,uDAAuD;AAC7E;AACJ,QAAM,EAAE,iBAAiB,eAAe,cAAc,IAAI;AAC1D,QAAM,yBAAyB,cAAc,sBAAsB;AAEnE,QAAM,kBACF,uBAAuB,MAAM,OAAO,UAAU;AAElD,QAAM,0BACF,uBAAuB,MAAM,OAAO,UAAU,mCACxC,kBAAkB,uBAAuB,SAAS,mCAClD;AAEV,QAAM,mBACF,uBAAuB,OAAO;AAClC,QAAM,2BAA2B,KAAK;AAAA,IAClC;AAAA,IACA;AAAA,EACJ;AAEA,QAAM,+BACF,OAAO,UAAU,OAAO,aAAa,uBAAuB;AAEhE,MAAI,+BAA+B,oCAAmB;AAElD,0BAAsB,MAAM,iBAAiB;AAC7C,0BAAsB,MAAM,OAAO,GAC/B,uBAAuB,QAAQ,iDACnC;AAAA,EACJ,OAAO;AACH,0BAAsB,MAAM,iBAAiB;AAC7C,0BAAsB,MAAM,OAAO,GAAG,wBAAwB;AAAA,EAClE;AAEA,wBAAsB,MAAM,MAAM,GAAG,uBAAuB;AAE5D,QAAM,cAAc,uBAAuB,eAAe,CAAC;AAE3D,QAAM,UAAU,SAAS,uBAAuB;AAChD;AAAA,IACI;AAAA,MAAC,yBAAAC;AAAA,MAAA;AAAA,QACG;AAAA,QACA;AAAA,QACA;AAAA,QACA,0BAA0B,CAAC,SAAiB;AACxC,gBAAM,gBAAgB,cAAc;AAAA,YAChC,IAAI,wCAAuB,KAAK,IAAI;AAAA,UACxC;AACA,iBAAO;AAAA,QACX;AAAA;AAAA,IACJ;AAAA,IACA;AAAA,EACJ;AAEA,wBAAsB,YAAY,OAAO;AAC7C;AAEA,SAAS,uBACL,eACA,OACa;AACb,QAAM,YAA2B,CAAC;AAClC,MAAI,iBAAiB,cAAc;AAEnC,SAAO,QAAQ,KAAK,mBAAmB,OAAO,SAAS,MAAM;AACzD,QAAI,CAAC,gBAAgB;AACjB,aAAO;AAAA,IACX;AAEA,QAAI,eAAe,aAAa,wCAAuB,GAAG;AACtD,gBAAU;AAAA,QACN,eAAe,aAAa,wCAAuB;AAAA,MACvD;AACA;AAAA,IACJ;AACA,qBAAiB,eAAe;AAAA,EACpC;AAEA,SAAO;AACX;","names":["FieldToolbarComponent","FieldLabelWrapperComponent"]}

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

@@ -1,8 +1,8 @@
 import { VisualBuilderCslpEventDetails } from '../types/visualBuilder.types.cjs';
 import '../../cslp/types/cslp.types.cjs';
 
-declare function appendFocusedToolbar(eventDetails: VisualBuilderCslpEventDetails, focusedToolbarElement: HTMLDivElement): void;
-declare function appendFieldToolbar(eventDetails: VisualBuilderCslpEventDetails, focusedToolbarElement: HTMLDivElement): void;
+declare function appendFocusedToolbar(eventDetails: VisualBuilderCslpEventDetails, focusedToolbarElement: HTMLDivElement, hideOverlay: () => void): void;
+declare function appendFieldToolbar(eventDetails: VisualBuilderCslpEventDetails, focusedToolbarElement: HTMLDivElement, hideOverlay: () => void): void;
 declare function appendFieldPathDropdown(eventDetails: VisualBuilderCslpEventDetails, focusedToolbarElement: HTMLDivElement): void;
 
 export { appendFieldPathDropdown, appendFieldToolbar, appendFocusedToolbar };

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

@@ -1,8 +1,8 @@
 import { VisualBuilderCslpEventDetails } from '../types/visualBuilder.types.js';
 import '../../cslp/types/cslp.types.js';
 
-declare function appendFocusedToolbar(eventDetails: VisualBuilderCslpEventDetails, focusedToolbarElement: HTMLDivElement): void;
-declare function appendFieldToolbar(eventDetails: VisualBuilderCslpEventDetails, focusedToolbarElement: HTMLDivElement): void;
+declare function appendFocusedToolbar(eventDetails: VisualBuilderCslpEventDetails, focusedToolbarElement: HTMLDivElement, hideOverlay: () => void): void;
+declare function appendFieldToolbar(eventDetails: VisualBuilderCslpEventDetails, focusedToolbarElement: HTMLDivElement, hideOverlay: () => void): void;
 declare function appendFieldPathDropdown(eventDetails: VisualBuilderCslpEventDetails, focusedToolbarElement: HTMLDivElement): void;
 
 export { appendFieldPathDropdown, appendFieldToolbar, appendFocusedToolbar };

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

@@ -12,11 +12,11 @@ import FieldToolbarComponent from "../components/FieldToolbar.js";
 import { render } from "preact";
 import FieldLabelWrapperComponent from "../components/fieldLabelWrapper.js";
 import { jsx } from "preact/jsx-runtime";
-function appendFocusedToolbar(eventDetails, focusedToolbarElement) {
+function appendFocusedToolbar(eventDetails, focusedToolbarElement, hideOverlay) {
   appendFieldPathDropdown(eventDetails, focusedToolbarElement);
-  appendFieldToolbar(eventDetails, focusedToolbarElement);
+  appendFieldToolbar(eventDetails, focusedToolbarElement, hideOverlay);
 }
-function appendFieldToolbar(eventDetails, focusedToolbarElement) {
+function appendFieldToolbar(eventDetails, focusedToolbarElement, hideOverlay) {
   if (focusedToolbarElement.querySelector(
     ".visual-builder__focused-toolbar__multiple-field-toolbar"
   ))
@@ -26,7 +26,8 @@ function appendFieldToolbar(eventDetails, focusedToolbarElement) {
     /* @__PURE__ */ jsx(
       FieldToolbarComponent,
       {
-        eventDetails
+        eventDetails,
+        hideOverlay
       }
     ),
     wrapper
@@ -34,7 +35,7 @@ function appendFieldToolbar(eventDetails, focusedToolbarElement) {
   focusedToolbarElement.append(wrapper);
 }
 function appendFieldPathDropdown(eventDetails, focusedToolbarElement) {
-  if (document.querySelector("visual-builder__focused-toolbar__field-label-wrapper"))
+  if (document.querySelector(".visual-builder__focused-toolbar__field-label-wrapper"))
     return;
   const { editableElement: targetElement, fieldMetadata } = eventDetails;
   const targetElementDimension = targetElement.getBoundingClientRect();

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/visualBuilder/generators/generateToolbar.tsx"],"sourcesContent":["import { 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 { FieldSchemaMap } from \"../utils/fieldSchemaMap\";\nimport { isFieldDisabled } from \"../utils/isFieldDisabled\";\n\nimport FieldToolbarComponent from \"../components/FieldToolbar\";\nimport { render } from \"preact\";\nimport FieldLabelWrapperComponent from \"../components/fieldLabelWrapper\";\n\nexport function appendFocusedToolbar(\n    eventDetails: VisualBuilderCslpEventDetails,\n    focusedToolbarElement: HTMLDivElement\n): void {\n    appendFieldPathDropdown(eventDetails, focusedToolbarElement);\n    appendFieldToolbar(eventDetails, focusedToolbarElement);\n}\n\nexport function appendFieldToolbar(\n    eventDetails: VisualBuilderCslpEventDetails,\n    focusedToolbarElement: HTMLDivElement\n): void {\n    if (\n        focusedToolbarElement.querySelector(\n            \".visual-builder__focused-toolbar__multiple-field-toolbar\"\n        )\n    )\n        return;\n    const wrapper = document.createDocumentFragment();\n    render(\n        <FieldToolbarComponent\n            eventDetails={eventDetails}\n        />,\n        wrapper\n    );\n\n    focusedToolbarElement.append(wrapper);\n}\n\nexport function appendFieldPathDropdown(\n    eventDetails: VisualBuilderCslpEventDetails,\n    focusedToolbarElement: HTMLDivElement\n): void {\n    if(document.querySelector(\"visual-builder__focused-toolbar__field-label-wrapper\"))\n        return;\n    const { editableElement: targetElement, fieldMetadata } = eventDetails;\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"],"mappings":";;;AACA;AAAA,EACI;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OACG;AAIP,OAAO,2BAA2B;AAClC,SAAS,cAAc;AACvB,OAAO,gCAAgC;AAsB/B;AApBD,SAAS,qBACZ,cACA,uBACI;AACJ,0BAAwB,cAAc,qBAAqB;AAC3D,qBAAmB,cAAc,qBAAqB;AAC1D;AAEO,SAAS,mBACZ,cACA,uBACI;AACJ,MACI,sBAAsB;AAAA,IAClB;AAAA,EACJ;AAEA;AACJ,QAAM,UAAU,SAAS,uBAAuB;AAChD;AAAA,IACI;AAAA,MAAC;AAAA;AAAA,QACG;AAAA;AAAA,IACJ;AAAA,IACA;AAAA,EACJ;AAEA,wBAAsB,OAAO,OAAO;AACxC;AAEO,SAAS,wBACZ,cACA,uBACI;AACJ,MAAG,SAAS,cAAc,sDAAsD;AAC5E;AACJ,QAAM,EAAE,iBAAiB,eAAe,cAAc,IAAI;AAC1D,QAAM,yBAAyB,cAAc,sBAAsB;AAEnE,QAAM,kBACF,uBAAuB,MAAM,OAAO,UAAU;AAElD,QAAM,0BACF,uBAAuB,MAAM,OAAO,UAAU,kBACxC,kBAAkB,uBAAuB,SAAS,kBAClD;AAEV,QAAM,mBACF,uBAAuB,OAAO;AAClC,QAAM,2BAA2B,KAAK;AAAA,IAClC;AAAA,IACA;AAAA,EACJ;AAEA,QAAM,+BACF,OAAO,UAAU,OAAO,aAAa,uBAAuB;AAEhE,MAAI,+BAA+B,mBAAmB;AAElD,0BAAsB,MAAM,iBAAiB;AAC7C,0BAAsB,MAAM,OAAO,GAC/B,uBAAuB,QAAQ,gCACnC;AAAA,EACJ,OAAO;AACH,0BAAsB,MAAM,iBAAiB;AAC7C,0BAAsB,MAAM,OAAO,GAAG,wBAAwB;AAAA,EAClE;AAEA,wBAAsB,MAAM,MAAM,GAAG,uBAAuB;AAE5D,QAAM,cAAc,uBAAuB,eAAe,CAAC;AAE3D,QAAM,UAAU,SAAS,uBAAuB;AAChD;AAAA,IACI;AAAA,MAAC;AAAA;AAAA,QACG;AAAA,QACA;AAAA,QACA;AAAA,QACA,0BAA0B,CAAC,SAAiB;AACxC,gBAAM,gBAAgB,cAAc;AAAA,YAChC,IAAI,uBAAuB,KAAK,IAAI;AAAA,UACxC;AACA,iBAAO;AAAA,QACX;AAAA;AAAA,IACJ;AAAA,IACA;AAAA,EACJ;AAEA,wBAAsB,YAAY,OAAO;AAC7C;AAEA,SAAS,uBACL,eACA,OACa;AACb,QAAM,YAA2B,CAAC;AAClC,MAAI,iBAAiB,cAAc;AAEnC,SAAO,QAAQ,KAAK,mBAAmB,OAAO,SAAS,MAAM;AACzD,QAAI,CAAC,gBAAgB;AACjB,aAAO;AAAA,IACX;AAEA,QAAI,eAAe,aAAa,uBAAuB,GAAG;AACtD,gBAAU;AAAA,QACN,eAAe,aAAa,uBAAuB;AAAA,MACvD;AACA;AAAA,IACJ;AACA,qBAAiB,eAAe;AAAA,EACpC;AAEA,SAAO;AACX;","names":[]}
+{"version":3,"sources":["../../../../src/visualBuilder/generators/generateToolbar.tsx"],"sourcesContent":["import { 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 { FieldSchemaMap } from \"../utils/fieldSchemaMap\";\nimport { isFieldDisabled } from \"../utils/isFieldDisabled\";\n\nimport FieldToolbarComponent from \"../components/FieldToolbar\";\nimport { render } from \"preact\";\nimport FieldLabelWrapperComponent from \"../components/fieldLabelWrapper\";\n\nexport function appendFocusedToolbar(\n    eventDetails: VisualBuilderCslpEventDetails,\n    focusedToolbarElement: HTMLDivElement,\n    hideOverlay: () => void\n): void {\n    appendFieldPathDropdown(eventDetails, focusedToolbarElement);\n    appendFieldToolbar(eventDetails, focusedToolbarElement, hideOverlay);\n}\n\nexport function appendFieldToolbar(\n    eventDetails: VisualBuilderCslpEventDetails,\n    focusedToolbarElement: HTMLDivElement,\n    hideOverlay: () => void\n): void {\n    if (\n        focusedToolbarElement.querySelector(\n            \".visual-builder__focused-toolbar__multiple-field-toolbar\"\n        )\n    )\n        return;\n    const wrapper = document.createDocumentFragment();\n    render(\n        <FieldToolbarComponent\n            eventDetails={eventDetails}\n            hideOverlay={hideOverlay}\n        />,\n        wrapper\n    );\n\n    focusedToolbarElement.append(wrapper);\n}\n\nexport function appendFieldPathDropdown(\n    eventDetails: VisualBuilderCslpEventDetails,\n    focusedToolbarElement: HTMLDivElement\n): void {\n    if(document.querySelector(\".visual-builder__focused-toolbar__field-label-wrapper\"))\n        return;\n    const { editableElement: targetElement, fieldMetadata } = eventDetails;\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"],"mappings":";;;AACA;AAAA,EACI;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OACG;AAIP,OAAO,2BAA2B;AAClC,SAAS,cAAc;AACvB,OAAO,gCAAgC;AAwB/B;AAtBD,SAAS,qBACZ,cACA,uBACA,aACI;AACJ,0BAAwB,cAAc,qBAAqB;AAC3D,qBAAmB,cAAc,uBAAuB,WAAW;AACvE;AAEO,SAAS,mBACZ,cACA,uBACA,aACI;AACJ,MACI,sBAAsB;AAAA,IAClB;AAAA,EACJ;AAEA;AACJ,QAAM,UAAU,SAAS,uBAAuB;AAChD;AAAA,IACI;AAAA,MAAC;AAAA;AAAA,QACG;AAAA,QACA;AAAA;AAAA,IACJ;AAAA,IACA;AAAA,EACJ;AAEA,wBAAsB,OAAO,OAAO;AACxC;AAEO,SAAS,wBACZ,cACA,uBACI;AACJ,MAAG,SAAS,cAAc,uDAAuD;AAC7E;AACJ,QAAM,EAAE,iBAAiB,eAAe,cAAc,IAAI;AAC1D,QAAM,yBAAyB,cAAc,sBAAsB;AAEnE,QAAM,kBACF,uBAAuB,MAAM,OAAO,UAAU;AAElD,QAAM,0BACF,uBAAuB,MAAM,OAAO,UAAU,kBACxC,kBAAkB,uBAAuB,SAAS,kBAClD;AAEV,QAAM,mBACF,uBAAuB,OAAO;AAClC,QAAM,2BAA2B,KAAK;AAAA,IAClC;AAAA,IACA;AAAA,EACJ;AAEA,QAAM,+BACF,OAAO,UAAU,OAAO,aAAa,uBAAuB;AAEhE,MAAI,+BAA+B,mBAAmB;AAElD,0BAAsB,MAAM,iBAAiB;AAC7C,0BAAsB,MAAM,OAAO,GAC/B,uBAAuB,QAAQ,gCACnC;AAAA,EACJ,OAAO;AACH,0BAAsB,MAAM,iBAAiB;AAC7C,0BAAsB,MAAM,OAAO,GAAG,wBAAwB;AAAA,EAClE;AAEA,wBAAsB,MAAM,MAAM,GAAG,uBAAuB;AAE5D,QAAM,cAAc,uBAAuB,eAAe,CAAC;AAE3D,QAAM,UAAU,SAAS,uBAAuB;AAChD;AAAA,IACI;AAAA,MAAC;AAAA;AAAA,QACG;AAAA,QACA;AAAA,QACA;AAAA,QACA,0BAA0B,CAAC,SAAiB;AACxC,gBAAM,gBAAgB,cAAc;AAAA,YAChC,IAAI,uBAAuB,KAAK,IAAI;AAAA,UACxC;AACA,iBAAO;AAAA,QACX;AAAA;AAAA,IACJ;AAAA,IACA;AAAA,EACJ;AAEA,wBAAsB,YAAY,OAAO;AAC7C;AAEA,SAAS,uBACL,eACA,OACa;AACb,QAAM,YAA2B,CAAC;AAClC,MAAI,iBAAiB,cAAc;AAEnC,SAAO,QAAQ,KAAK,mBAAmB,OAAO,SAAS,MAAM;AACzD,QAAI,CAAC,gBAAgB;AACjB,aAAO;AAAA,IACX;AAEA,QAAI,eAAe,aAAa,uBAAuB,GAAG;AACtD,gBAAU;AAAA,QACN,eAAe,aAAa,uBAAuB;AAAA,MACvD;AACA;AAAA,IACJ;AACA,qBAAiB,eAAe;AAAA,EACpC;AAEA,SAAO;AACX;","names":[]}

package/dist/modern/visualBuilder/index.cjs

@@ -129,7 +129,8 @@ var _VisualBuilder = class _VisualBuilder {
           (0, import_updateFocussedState.updateFocussedStateOnMutation)(
             this.overlayWrapper,
             this.focusedToolbar,
-            this.visualBuilderContainer
+            this.visualBuilderContainer,
+            this.resizeObserver
           );
           const emptyBlockParents = Array.from(
             document.querySelectorAll(

package/dist/modern/visualBuilder/index.cjs.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/visualBuilder/index.ts"],"sourcesContent":["import { Signal, signal } from \"@preact/signals\";\n\nimport { inIframe } from \"../common/inIframe\";\nimport Config from \"../configManager/configManager\";\nimport {\n    useHistoryPostMessageEvent,\n    useOnEntryUpdatePostMessageEvent,\n} from \"../livePreview/eventManager/postMessageEvent.hooks\";\nimport {\n    ILivePreviewModeConfig,\n    ILivePreviewWindowType,\n    IVisualBuilderInitEvent,\n} from \"../types/types\";\nimport { generateStartEditingButton } from \"./generators/generateStartEditingButton\";\n\nimport { addFocusOverlay } from \"./generators/generateOverlay\";\nimport { getEntryIdentifiersInCurrentPage } from \"./utils/getEntryIdentifiersInCurrentPage\";\nimport visualBuilderPostMessage from \"./utils/visualBuilderPostMessage\";\nimport { VisualBuilderPostMessageEvents } from \"./utils/types/postMessage.types\";\n\nimport { setup } from \"goober\";\nimport { debounce, isEqual } from \"lodash-es\";\nimport { h } from \"preact\";\nimport { extractDetailsFromCslp } from \"../cslp\";\nimport initUI from \"./components\";\nimport { useDraftFieldsPostMessageEvent } from \"./eventManager/useDraftFieldsPostMessageEvent\";\nimport { useHideFocusOverlayPostMessageEvent } from \"./eventManager/useHideFocusOverlayPostMessageEvent\";\nimport { useScrollToField } from \"./eventManager/useScrollToField\";\nimport { useVariantFieldsPostMessageEvent } from \"./eventManager/useVariantsPostMessageEvent\";\nimport {\n    generateEmptyBlocks,\n    removeEmptyBlocks,\n} from \"./generators/generateEmptyBlock\";\nimport { addEventListeners, removeEventListeners } from \"./listeners\";\nimport { addKeyboardShortcuts } from \"./listeners/keyboardShortcuts\";\nimport { FieldSchemaMap } from \"./utils/fieldSchemaMap\";\nimport { isFieldDisabled } from \"./utils/isFieldDisabled\";\nimport {\n    updateFocussedState,\n    updateFocussedStateOnMutation,\n} from \"./utils/updateFocussedState\";\nimport { useHighlightCommentIcon } from \"./eventManager/useHighlightCommentIcon\";\nimport { updateHighlightedCommentIconPosition } from \"./generators/generateHighlightedComment\";\nimport { useRecalculateVariantDataCSLPValues } from \"./eventManager/useRecalculateVariantDataCSLPValues\";\n\ninterface VisualBuilderGlobalStateImpl {\n    previousSelectedEditableDOM: HTMLElement | Element | null;\n    previousHoveredTargetDOM: Element | null;\n    previousEmptyBlockParents: Element[] | [];\n    focusFieldValue: string | null;\n    audienceMode: boolean;\n    locale: string;\n    variant: string | null;\n}\n\nexport class VisualBuilder {\n    private customCursor: HTMLDivElement | null = null;\n    private overlayWrapper: HTMLDivElement | null = null;\n    private visualBuilderContainer: HTMLDivElement | null = null;\n    private focusedToolbar: HTMLDivElement | null = null;\n\n    static VisualBuilderGlobalState: Signal<VisualBuilderGlobalStateImpl> =\n        signal({\n            previousSelectedEditableDOM: null,\n            previousHoveredTargetDOM: null,\n            previousEmptyBlockParents: [],\n            focusFieldValue: null,\n            audienceMode: false,\n            locale: Config.get().stackDetails.masterLocale || \"en-us\",\n            variant: null,\n        });\n\n    private handlePositionChange(editableElement: HTMLElement) {\n        updateFocussedState({\n            editableElement,\n            visualBuilderContainer: this.visualBuilderContainer,\n            overlayWrapper: this.overlayWrapper,\n            focusedToolbar: this.focusedToolbar,\n            resizeObserver: this.resizeObserver,\n        });\n    }\n\n    private scrollEventHandler = () => {\n        updateHighlightedCommentIconPosition(); // Update icons position\n    };\n\n    private resizeEventHandler = () => {\n        const previousSelectedEditableDOM =\n            VisualBuilder.VisualBuilderGlobalState.value\n                .previousSelectedEditableDOM;\n        updateHighlightedCommentIconPosition();\n        if (previousSelectedEditableDOM) {\n            this.handlePositionChange(\n                previousSelectedEditableDOM as HTMLElement\n            );\n        }\n    };\n\n    private resizeObserver = new ResizeObserver(([entry]) => {\n        const previousSelectedEditableDOM =\n            VisualBuilder.VisualBuilderGlobalState.value\n                .previousSelectedEditableDOM;\n\n        if (!this.overlayWrapper || !previousSelectedEditableDOM) {\n            return;\n        }\n\n        // if previous selected editable element is not same as the current\n        // target and the target is also not psuedo-editable then return\n        if (\n            !entry.target.isSameNode(previousSelectedEditableDOM) &&\n            !entry.target.classList.contains(\n                \"visual-builder__pseudo-editable-element\"\n            )\n        ) {\n            return;\n        }\n\n        const isPsuedoEditableElement = entry.target.classList.contains(\n            \"visual-builder__pseudo-editable-element\"\n        );\n\n        // the \"actual\" editable element when the current target is psuedo-editable\n        // is the previous selected editable element instead of the closest data-cslp element\n        // (cant use closest because the psuedo editable is absolute positioned)\n        // (Note - why do we even need the closest? we do an early exit if entry.target\n        // is not the previous selected editable element, needs more investigation)\n        const editableElement = (\n            isPsuedoEditableElement\n                ? previousSelectedEditableDOM\n                : entry.target.closest(\"[data-cslp]\")\n        ) as HTMLElement | null;\n\n        if (isPsuedoEditableElement) {\n            // if the current target is psuedo-editable, then the resizing occurred by typing\n            // into the psuedo editable, simply update the focus overlay\n            addFocusOverlay(entry.target, this.overlayWrapper);\n\n            // TODO check if we can now resize the actual editable element\n            // when psuedo editable element is resized, avoid infinite loops\n        } else if (editableElement) {\n            this.handlePositionChange(editableElement);\n        }\n\n        // update the overlay if field is disabled\n        const cslpData =\n            editableElement && editableElement.getAttribute(\"data-cslp\");\n\n        if (!editableElement || !cslpData) {\n            return;\n        }\n\n        const fieldMetadata = extractDetailsFromCslp(cslpData);\n\n        FieldSchemaMap.getFieldSchema(\n            fieldMetadata.content_type_uid,\n            fieldMetadata.fieldPath\n        ).then((fieldSchema) => {\n            if (!fieldSchema) {\n                return;\n            }\n            const { isDisabled } = isFieldDisabled(fieldSchema, {\n                editableElement,\n                fieldMetadata,\n            });\n            if (isDisabled) {\n                addFocusOverlay(\n                    editableElement,\n                    this.overlayWrapper as HTMLDivElement,\n                    isDisabled\n                );\n            }\n        });\n    });\n\n    private mutationObserver = new MutationObserver(\n        debounce(\n            async () => {\n                updateFocussedStateOnMutation(\n                    this.overlayWrapper,\n                    this.focusedToolbar,\n                    this.visualBuilderContainer\n                );\n                const emptyBlockParents = Array.from(\n                    document.querySelectorAll(\n                        \".visual-builder__empty-block-parent\"\n                    )\n                );\n\n                const previousEmptyBlockParents = VisualBuilder\n                    .VisualBuilderGlobalState.value\n                    .previousEmptyBlockParents as Element[];\n\n                if (!isEqual(emptyBlockParents, previousEmptyBlockParents)) {\n                    const noMoreEmptyBlockParent =\n                        previousEmptyBlockParents.filter(\n                            (x) => !emptyBlockParents.includes(x)\n                        );\n                    const newEmptyBlockParent = emptyBlockParents.filter(\n                        (x) => !previousEmptyBlockParents.includes(x)\n                    );\n\n                    removeEmptyBlocks(noMoreEmptyBlockParent);\n                    await generateEmptyBlocks(newEmptyBlockParent);\n\n                    VisualBuilder.VisualBuilderGlobalState.value = {\n                        ...VisualBuilder.VisualBuilderGlobalState.value,\n                        previousEmptyBlockParents: emptyBlockParents,\n                    };\n                }\n            },\n            100,\n            { trailing: true }\n        )\n    );\n\n    constructor() {\n        // Handles changes in element positions due to sidebar toggling or window resizing,\n        // triggering a redraw of the visual builder\n        window.addEventListener(\"resize\", this.resizeEventHandler);\n        window.addEventListener(\"scroll\", this.scrollEventHandler);\n        initUI({\n            resizeObserver: this.resizeObserver,\n        });\n\n        // Initializing goober for css-in-js\n        setup(h);\n\n        this.visualBuilderContainer = document.querySelector(\n            \".visual-builder__container\"\n        );\n        this.overlayWrapper = document.querySelector(\n            \".visual-builder__overlay__wrapper\"\n        );\n        this.customCursor = document.querySelector(\".visual-builder__cursor\");\n        this.focusedToolbar = document.querySelector(\n            \".visual-builder__focused-toolbar\"\n        );\n\n        const config = Config.get();\n\n        if (!config.enable || config.mode < ILivePreviewModeConfig.BUILDER) {\n            return;\n        }\n        visualBuilderPostMessage\n            ?.send<IVisualBuilderInitEvent>(\"init\", {\n                isSSR: config.ssr,\n                href: window.location.href,\n            })\n            .then((data) => {\n                const {\n                    windowType = ILivePreviewWindowType.BUILDER,\n                    stackDetails,\n                } = data || {};\n                Config.set(\"windowType\", windowType);\n                Config.set(\n                    \"stackDetails.masterLocale\",\n                    stackDetails?.masterLocale || \"en-us\"\n                );\n\n                addEventListeners({\n                    overlayWrapper: this.overlayWrapper,\n                    visualBuilderContainer: this.visualBuilderContainer,\n                    previousSelectedEditableDOM:\n                        VisualBuilder.VisualBuilderGlobalState.value\n                            .previousSelectedEditableDOM,\n                    focusedToolbar: this.focusedToolbar,\n                    resizeObserver: this.resizeObserver,\n                    customCursor: this.customCursor,\n                });\n\n                addKeyboardShortcuts({\n                    overlayWrapper: this.overlayWrapper,\n                    visualBuilderContainer: this.visualBuilderContainer,\n                    focusedToolbar: this.focusedToolbar,\n                    resizeObserver: this.resizeObserver,\n                });\n                useScrollToField();\n                useHighlightCommentIcon();\n                this.mutationObserver.observe(document.body, {\n                    childList: true,\n                    subtree: true,\n                });\n\n                visualBuilderPostMessage?.on(\n                    VisualBuilderPostMessageEvents.GET_ALL_ENTRIES_IN_CURRENT_PAGE,\n                    getEntryIdentifiersInCurrentPage\n                );\n                visualBuilderPostMessage?.send(\n                    VisualBuilderPostMessageEvents.SEND_VARIANT_AND_LOCALE\n                );\n\n                useHideFocusOverlayPostMessageEvent({\n                    overlayWrapper: this.overlayWrapper,\n                    visualBuilderContainer: this.visualBuilderContainer,\n                    focusedToolbar: this.focusedToolbar,\n                    resizeObserver: this.resizeObserver,\n                });\n\n                // These events are used to sync the data when we made some changes in the entry without invoking live preview module.\n                useHistoryPostMessageEvent();\n                useOnEntryUpdatePostMessageEvent();\n                useRecalculateVariantDataCSLPValues();\n                useDraftFieldsPostMessageEvent();\n                useVariantFieldsPostMessageEvent();\n            })\n            .catch(() => {\n                if (!inIframe()) {\n                    generateStartEditingButton(this.visualBuilderContainer);\n                }\n            });\n    }\n\n    // TODO: write test cases\n    destroy = (): void => {\n        // Remove event listeners\n        window.removeEventListener(\"resize\", this.resizeEventHandler);\n        window.removeEventListener(\"scroll\", this.scrollEventHandler);\n\n        // Remove custom event listeners\n        removeEventListeners({\n            overlayWrapper: this.overlayWrapper,\n            visualBuilderContainer: this.visualBuilderContainer,\n            previousSelectedEditableDOM:\n                VisualBuilder.VisualBuilderGlobalState.value\n                    .previousSelectedEditableDOM,\n            focusedToolbar: this.focusedToolbar,\n            resizeObserver: this.resizeObserver,\n            customCursor: this.customCursor,\n        });\n\n        // Disconnect observers\n        this.resizeObserver.disconnect();\n        this.mutationObserver.disconnect();\n\n        // Clear global state\n        VisualBuilder.VisualBuilderGlobalState.value = {\n            previousSelectedEditableDOM: null,\n            previousHoveredTargetDOM: null,\n            previousEmptyBlockParents: [],\n            focusFieldValue: null,\n            audienceMode: false,\n            locale: \"en-us\",\n            variant: null,\n        };\n\n        // Remove DOM elements\n        if (this.visualBuilderContainer) {\n            window.document.body.removeChild(this.visualBuilderContainer);\n        }\n        if (this.customCursor) {\n            this.customCursor.remove();\n        }\n        if (this.overlayWrapper) {\n            this.overlayWrapper.remove();\n        }\n        if (this.focusedToolbar) {\n            this.focusedToolbar.remove();\n        }\n\n        // Nullify references\n        this.customCursor = null;\n        this.overlayWrapper = null;\n        this.visualBuilderContainer = null;\n        this.focusedToolbar = null;\n    };\n}\n"],"mappings":"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","names":["initUI","Config","visualBuilderPostMessage"]}
+{"version":3,"sources":["../../../src/visualBuilder/index.ts"],"sourcesContent":["import { Signal, signal } from \"@preact/signals\";\n\nimport { inIframe } from \"../common/inIframe\";\nimport Config from \"../configManager/configManager\";\nimport {\n    useHistoryPostMessageEvent,\n    useOnEntryUpdatePostMessageEvent,\n} from \"../livePreview/eventManager/postMessageEvent.hooks\";\nimport {\n    ILivePreviewModeConfig,\n    ILivePreviewWindowType,\n    IVisualBuilderInitEvent,\n} from \"../types/types\";\nimport { generateStartEditingButton } from \"./generators/generateStartEditingButton\";\n\nimport { addFocusOverlay } from \"./generators/generateOverlay\";\nimport { getEntryIdentifiersInCurrentPage } from \"./utils/getEntryIdentifiersInCurrentPage\";\nimport visualBuilderPostMessage from \"./utils/visualBuilderPostMessage\";\nimport { VisualBuilderPostMessageEvents } from \"./utils/types/postMessage.types\";\n\nimport { setup } from \"goober\";\nimport { debounce, isEqual } from \"lodash-es\";\nimport { h } from \"preact\";\nimport { extractDetailsFromCslp } from \"../cslp\";\nimport initUI from \"./components\";\nimport { useDraftFieldsPostMessageEvent } from \"./eventManager/useDraftFieldsPostMessageEvent\";\nimport { useHideFocusOverlayPostMessageEvent } from \"./eventManager/useHideFocusOverlayPostMessageEvent\";\nimport { useScrollToField } from \"./eventManager/useScrollToField\";\nimport { useVariantFieldsPostMessageEvent } from \"./eventManager/useVariantsPostMessageEvent\";\nimport {\n    generateEmptyBlocks,\n    removeEmptyBlocks,\n} from \"./generators/generateEmptyBlock\";\nimport { addEventListeners, removeEventListeners } from \"./listeners\";\nimport { addKeyboardShortcuts } from \"./listeners/keyboardShortcuts\";\nimport { FieldSchemaMap } from \"./utils/fieldSchemaMap\";\nimport { isFieldDisabled } from \"./utils/isFieldDisabled\";\nimport {\n    updateFocussedState,\n    updateFocussedStateOnMutation,\n} from \"./utils/updateFocussedState\";\nimport { useHighlightCommentIcon } from \"./eventManager/useHighlightCommentIcon\";\nimport { updateHighlightedCommentIconPosition } from \"./generators/generateHighlightedComment\";\nimport { useRecalculateVariantDataCSLPValues } from \"./eventManager/useRecalculateVariantDataCSLPValues\";\n\ninterface VisualBuilderGlobalStateImpl {\n    previousSelectedEditableDOM: HTMLElement | Element | null;\n    previousHoveredTargetDOM: Element | null;\n    previousEmptyBlockParents: Element[] | [];\n    focusFieldValue: string | null;\n    audienceMode: boolean;\n    locale: string;\n    variant: string | null;\n}\n\nexport class VisualBuilder {\n    private customCursor: HTMLDivElement | null = null;\n    private overlayWrapper: HTMLDivElement | null = null;\n    private visualBuilderContainer: HTMLDivElement | null = null;\n    private focusedToolbar: HTMLDivElement | null = null;\n\n    static VisualBuilderGlobalState: Signal<VisualBuilderGlobalStateImpl> =\n        signal({\n            previousSelectedEditableDOM: null,\n            previousHoveredTargetDOM: null,\n            previousEmptyBlockParents: [],\n            focusFieldValue: null,\n            audienceMode: false,\n            locale: Config.get().stackDetails.masterLocale || \"en-us\",\n            variant: null,\n        });\n\n    private handlePositionChange(editableElement: HTMLElement) {\n        updateFocussedState({\n            editableElement,\n            visualBuilderContainer: this.visualBuilderContainer,\n            overlayWrapper: this.overlayWrapper,\n            focusedToolbar: this.focusedToolbar,\n            resizeObserver: this.resizeObserver,\n        });\n    }\n\n    private scrollEventHandler = () => {\n        updateHighlightedCommentIconPosition(); // Update icons position\n    };\n\n    private resizeEventHandler = () => {\n        const previousSelectedEditableDOM =\n            VisualBuilder.VisualBuilderGlobalState.value\n                .previousSelectedEditableDOM;\n        updateHighlightedCommentIconPosition();\n        if (previousSelectedEditableDOM) {\n            this.handlePositionChange(\n                previousSelectedEditableDOM as HTMLElement\n            );\n        }\n    };\n\n    private resizeObserver = new ResizeObserver(([entry]) => {\n        const previousSelectedEditableDOM =\n            VisualBuilder.VisualBuilderGlobalState.value\n                .previousSelectedEditableDOM;\n\n        if (!this.overlayWrapper || !previousSelectedEditableDOM) {\n            return;\n        }\n\n        // if previous selected editable element is not same as the current\n        // target and the target is also not psuedo-editable then return\n        if (\n            !entry.target.isSameNode(previousSelectedEditableDOM) &&\n            !entry.target.classList.contains(\n                \"visual-builder__pseudo-editable-element\"\n            )\n        ) {\n            return;\n        }\n\n        const isPsuedoEditableElement = entry.target.classList.contains(\n            \"visual-builder__pseudo-editable-element\"\n        );\n\n        // the \"actual\" editable element when the current target is psuedo-editable\n        // is the previous selected editable element instead of the closest data-cslp element\n        // (cant use closest because the psuedo editable is absolute positioned)\n        // (Note - why do we even need the closest? we do an early exit if entry.target\n        // is not the previous selected editable element, needs more investigation)\n        const editableElement = (\n            isPsuedoEditableElement\n                ? previousSelectedEditableDOM\n                : entry.target.closest(\"[data-cslp]\")\n        ) as HTMLElement | null;\n\n        if (isPsuedoEditableElement) {\n            // if the current target is psuedo-editable, then the resizing occurred by typing\n            // into the psuedo editable, simply update the focus overlay\n            addFocusOverlay(entry.target, this.overlayWrapper);\n\n            // TODO check if we can now resize the actual editable element\n            // when psuedo editable element is resized, avoid infinite loops\n        } else if (editableElement) {\n            this.handlePositionChange(editableElement);\n        }\n\n        // update the overlay if field is disabled\n        const cslpData =\n            editableElement && editableElement.getAttribute(\"data-cslp\");\n\n        if (!editableElement || !cslpData) {\n            return;\n        }\n\n        const fieldMetadata = extractDetailsFromCslp(cslpData);\n\n        FieldSchemaMap.getFieldSchema(\n            fieldMetadata.content_type_uid,\n            fieldMetadata.fieldPath\n        ).then((fieldSchema) => {\n            if (!fieldSchema) {\n                return;\n            }\n            const { isDisabled } = isFieldDisabled(fieldSchema, {\n                editableElement,\n                fieldMetadata,\n            });\n            if (isDisabled) {\n                addFocusOverlay(\n                    editableElement,\n                    this.overlayWrapper as HTMLDivElement,\n                    isDisabled\n                );\n            }\n        });\n    });\n\n    private mutationObserver = new MutationObserver(\n        debounce(\n            async () => {\n                updateFocussedStateOnMutation(\n                    this.overlayWrapper,\n                    this.focusedToolbar,\n                    this.visualBuilderContainer,\n                    this.resizeObserver\n                );\n                const emptyBlockParents = Array.from(\n                    document.querySelectorAll(\n                        \".visual-builder__empty-block-parent\"\n                    )\n                );\n\n                const previousEmptyBlockParents = VisualBuilder\n                    .VisualBuilderGlobalState.value\n                    .previousEmptyBlockParents as Element[];\n\n                if (!isEqual(emptyBlockParents, previousEmptyBlockParents)) {\n                    const noMoreEmptyBlockParent =\n                        previousEmptyBlockParents.filter(\n                            (x) => !emptyBlockParents.includes(x)\n                        );\n                    const newEmptyBlockParent = emptyBlockParents.filter(\n                        (x) => !previousEmptyBlockParents.includes(x)\n                    );\n\n                    removeEmptyBlocks(noMoreEmptyBlockParent);\n                    await generateEmptyBlocks(newEmptyBlockParent);\n\n                    VisualBuilder.VisualBuilderGlobalState.value = {\n                        ...VisualBuilder.VisualBuilderGlobalState.value,\n                        previousEmptyBlockParents: emptyBlockParents,\n                    };\n                }\n            },\n            100,\n            { trailing: true }\n        )\n    );\n\n    constructor() {\n        // Handles changes in element positions due to sidebar toggling or window resizing,\n        // triggering a redraw of the visual builder\n        window.addEventListener(\"resize\", this.resizeEventHandler);\n        window.addEventListener(\"scroll\", this.scrollEventHandler);\n        initUI({\n            resizeObserver: this.resizeObserver,\n        });\n\n        // Initializing goober for css-in-js\n        setup(h);\n\n        this.visualBuilderContainer = document.querySelector(\n            \".visual-builder__container\"\n        );\n        this.overlayWrapper = document.querySelector(\n            \".visual-builder__overlay__wrapper\"\n        );\n        this.customCursor = document.querySelector(\".visual-builder__cursor\");\n        this.focusedToolbar = document.querySelector(\n            \".visual-builder__focused-toolbar\"\n        );\n\n        const config = Config.get();\n\n        if (!config.enable || config.mode < ILivePreviewModeConfig.BUILDER) {\n            return;\n        }\n        visualBuilderPostMessage\n            ?.send<IVisualBuilderInitEvent>(\"init\", {\n                isSSR: config.ssr,\n                href: window.location.href,\n            })\n            .then((data) => {\n                const {\n                    windowType = ILivePreviewWindowType.BUILDER,\n                    stackDetails,\n                } = data || {};\n                Config.set(\"windowType\", windowType);\n                Config.set(\n                    \"stackDetails.masterLocale\",\n                    stackDetails?.masterLocale || \"en-us\"\n                );\n\n                addEventListeners({\n                    overlayWrapper: this.overlayWrapper,\n                    visualBuilderContainer: this.visualBuilderContainer,\n                    previousSelectedEditableDOM:\n                        VisualBuilder.VisualBuilderGlobalState.value\n                            .previousSelectedEditableDOM,\n                    focusedToolbar: this.focusedToolbar,\n                    resizeObserver: this.resizeObserver,\n                    customCursor: this.customCursor,\n                });\n\n                addKeyboardShortcuts({\n                    overlayWrapper: this.overlayWrapper,\n                    visualBuilderContainer: this.visualBuilderContainer,\n                    focusedToolbar: this.focusedToolbar,\n                    resizeObserver: this.resizeObserver,\n                });\n                useScrollToField();\n                useHighlightCommentIcon();\n                this.mutationObserver.observe(document.body, {\n                    childList: true,\n                    subtree: true,\n                });\n\n                visualBuilderPostMessage?.on(\n                    VisualBuilderPostMessageEvents.GET_ALL_ENTRIES_IN_CURRENT_PAGE,\n                    getEntryIdentifiersInCurrentPage\n                );\n                visualBuilderPostMessage?.send(\n                    VisualBuilderPostMessageEvents.SEND_VARIANT_AND_LOCALE\n                );\n\n                useHideFocusOverlayPostMessageEvent({\n                    overlayWrapper: this.overlayWrapper,\n                    visualBuilderContainer: this.visualBuilderContainer,\n                    focusedToolbar: this.focusedToolbar,\n                    resizeObserver: this.resizeObserver,\n                });\n\n                // These events are used to sync the data when we made some changes in the entry without invoking live preview module.\n                useHistoryPostMessageEvent();\n                useOnEntryUpdatePostMessageEvent();\n                useRecalculateVariantDataCSLPValues();\n                useDraftFieldsPostMessageEvent();\n                useVariantFieldsPostMessageEvent();\n            })\n            .catch(() => {\n                if (!inIframe()) {\n                    generateStartEditingButton(this.visualBuilderContainer);\n                }\n            });\n    }\n\n    // TODO: write test cases\n    destroy = (): void => {\n        // Remove event listeners\n        window.removeEventListener(\"resize\", this.resizeEventHandler);\n        window.removeEventListener(\"scroll\", this.scrollEventHandler);\n\n        // Remove custom event listeners\n        removeEventListeners({\n            overlayWrapper: this.overlayWrapper,\n            visualBuilderContainer: this.visualBuilderContainer,\n            previousSelectedEditableDOM:\n                VisualBuilder.VisualBuilderGlobalState.value\n                    .previousSelectedEditableDOM,\n            focusedToolbar: this.focusedToolbar,\n            resizeObserver: this.resizeObserver,\n            customCursor: this.customCursor,\n        });\n\n        // Disconnect observers\n        this.resizeObserver.disconnect();\n        this.mutationObserver.disconnect();\n\n        // Clear global state\n        VisualBuilder.VisualBuilderGlobalState.value = {\n            previousSelectedEditableDOM: null,\n            previousHoveredTargetDOM: null,\n            previousEmptyBlockParents: [],\n            focusFieldValue: null,\n            audienceMode: false,\n            locale: \"en-us\",\n            variant: null,\n        };\n\n        // Remove DOM elements\n        if (this.visualBuilderContainer) {\n            window.document.body.removeChild(this.visualBuilderContainer);\n        }\n        if (this.customCursor) {\n            this.customCursor.remove();\n        }\n        if (this.overlayWrapper) {\n            this.overlayWrapper.remove();\n        }\n        if (this.focusedToolbar) {\n            this.focusedToolbar.remove();\n        }\n\n        // Nullify references\n        this.customCursor = null;\n        this.overlayWrapper = null;\n        this.visualBuilderContainer = null;\n        this.focusedToolbar = null;\n    };\n}\n"],"mappings":"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","names":["initUI","Config","visualBuilderPostMessage"]}

package/dist/modern/visualBuilder/index.js

@@ -109,7 +109,8 @@ var _VisualBuilder = class _VisualBuilder {
           updateFocussedStateOnMutation(
             this.overlayWrapper,
             this.focusedToolbar,
-            this.visualBuilderContainer
+            this.visualBuilderContainer,
+            this.resizeObserver
           );
           const emptyBlockParents = Array.from(
             document.querySelectorAll(