@contentstack/live-preview-utils 4.0.0 → 4.0.2

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/visualBuilder/components/VisualBuilder.tsx"],"sourcesContent":["import classNames from \"classnames\";\nimport { hideOverlay } from \"../generators/generateOverlay\";\nimport {\n    visualBuilderStyles,\n    VisualBuilderGlobalStyles,\n} from \"../visualBuilder.style\";\nimport React from \"preact/compat\";\nimport { isOpenInBuilder } from \"../../utils\";\n\ninterface VisualBuilderProps {\n    visualBuilderContainer: HTMLDivElement | null;\n    resizeObserver: ResizeObserver;\n}\n\nfunction VisualBuilderComponent(props: VisualBuilderProps): JSX.Element | null {\n    if (!isOpenInBuilder()) {\n        return null;\n    }\n\n    return (\n        <>\n            {/* For some reason, goober's glob and createGlobalStyle were not working in this case. */}\n            {/* glob also does not work when called in visualBuilder's constructor */}\n            <style\n                dangerouslySetInnerHTML={{\n                    __html: VisualBuilderGlobalStyles,\n                }}\n            />\n            <div\n                className={classNames(\n                    visualBuilderStyles()[\"visual-builder__cursor\"],\n                    \"visual-builder__cursor\"\n                )}\n                data-testid=\"visual-builder__cursor\"\n            ></div>\n            <div\n                className={classNames(\n                    visualBuilderStyles()[\"visual-builder__overlay__wrapper\"],\n                    \"visual-builder__overlay__wrapper\"\n                )}\n                data-testid=\"visual-builder__overlay__wrapper\"\n                onClick={(event) => {\n                    const targetElement = event.currentTarget as HTMLDivElement;\n\n                    const focusedToolbar = document.querySelector(\n                        \".visual-builder__focused-toolbar\"\n                    ) as HTMLDivElement;\n\n                    hideOverlay({\n                        visualBuilderContainer: props.visualBuilderContainer,\n                        visualBuilderOverlayWrapper: targetElement,\n                        focusedToolbar: focusedToolbar,\n                        resizeObserver: props.resizeObserver,\n                    });\n                }}\n            >\n                <div\n                    className={classNames(\n                        \"visual-builder__overlay visual-builder__overlay--top\",\n                        visualBuilderStyles()[\"visual-builder__overlay\"]\n                    )}\n                    data-testid=\"visual-builder__overlay--top\"\n                ></div>\n                <div\n                    data-testid=\"visual-builder__overlay--left\"\n                    className={classNames(\n                        \"visual-builder__overlay visual-builder__overlay--left\",\n                        visualBuilderStyles()[\"visual-builder__overlay\"]\n                    )}\n                ></div>\n                <div\n                    data-testid=\"visual-builder__overlay--right\"\n                    className={classNames(\n                        \"visual-builder__overlay visual-builder__overlay--right\",\n                        visualBuilderStyles()[\"visual-builder__overlay\"]\n                    )}\n                ></div>\n                <div\n                    data-testid=\"visual-builder__overlay--bottom\"\n                    className={classNames(\n                        \"visual-builder__overlay visual-builder__overlay--bottom\",\n                        visualBuilderStyles()[\"visual-builder__overlay\"]\n                    )}\n                ></div>\n                <div\n                    data-testid=\"visual-builder__overlay--outline\"\n                    className={classNames(\n                        \"visual-builder__overlay--outline\",\n                        visualBuilderStyles()[\n                            \"visual-builder__overlay--outline\"\n                        ]\n                    )}\n                ></div>\n            </div>\n\n            <div\n                className={classNames(\n                    \"visual-builder__hover-outline visual-builder__hover-outline--unclickable\",\n                    visualBuilderStyles()[\"visual-builder__hover-outline\"],\n                    visualBuilderStyles()[\n                        \"visual-builder__hover-outline--unclickable\"\n                    ]\n                )}\n                data-testid=\"visual-builder__hover-outline\"\n            ></div>\n            <div\n                className={classNames(\n                    \"visual-builder__focused-toolbar\",\n                    visualBuilderStyles()[\"visual-builder__focused-toolbar\"]\n                )}\n                data-testid=\"visual-builder__focused-toolbar\"\n            ></div>\n        </>\n    );\n}\n\nexport default VisualBuilderComponent;\n"],"mappings":";;;AAAA,OAAO,gBAAgB;AACvB,SAAS,mBAAmB;AAC5B;AAAA,EACI;AAAA,EACA;AAAA,OACG;AAEP,SAAS,uBAAuB;AAaxB,mBAGI,KAYA,YAfJ;AANR,SAAS,uBAAuB,OAA+C;AAC3E,MAAI,CAAC,gBAAgB,GAAG;AACpB,WAAO;AAAA,EACX;AAEA,SACI,iCAGI;AAAA;AAAA,MAAC;AAAA;AAAA,QACG,yBAAyB;AAAA,UACrB,QAAQ;AAAA,QACZ;AAAA;AAAA,IACJ;AAAA,IACA;AAAA,MAAC;AAAA;AAAA,QACG,WAAW;AAAA,UACP,oBAAoB,EAAE,wBAAwB;AAAA,UAC9C;AAAA,QACJ;AAAA,QACA,eAAY;AAAA;AAAA,IACf;AAAA,IACD;AAAA,MAAC;AAAA;AAAA,QACG,WAAW;AAAA,UACP,oBAAoB,EAAE,kCAAkC;AAAA,UACxD;AAAA,QACJ;AAAA,QACA,eAAY;AAAA,QACZ,SAAS,CAAC,UAAU;AAChB,gBAAM,gBAAgB,MAAM;AAE5B,gBAAM,iBAAiB,SAAS;AAAA,YAC5B;AAAA,UACJ;AAEA,sBAAY;AAAA,YACR,wBAAwB,MAAM;AAAA,YAC9B,6BAA6B;AAAA,YAC7B;AAAA,YACA,gBAAgB,MAAM;AAAA,UAC1B,CAAC;AAAA,QACL;AAAA,QAEA;AAAA;AAAA,YAAC;AAAA;AAAA,cACG,WAAW;AAAA,gBACP;AAAA,gBACA,oBAAoB,EAAE,yBAAyB;AAAA,cACnD;AAAA,cACA,eAAY;AAAA;AAAA,UACf;AAAA,UACD;AAAA,YAAC;AAAA;AAAA,cACG,eAAY;AAAA,cACZ,WAAW;AAAA,gBACP;AAAA,gBACA,oBAAoB,EAAE,yBAAyB;AAAA,cACnD;AAAA;AAAA,UACH;AAAA,UACD;AAAA,YAAC;AAAA;AAAA,cACG,eAAY;AAAA,cACZ,WAAW;AAAA,gBACP;AAAA,gBACA,oBAAoB,EAAE,yBAAyB;AAAA,cACnD;AAAA;AAAA,UACH;AAAA,UACD;AAAA,YAAC;AAAA;AAAA,cACG,eAAY;AAAA,cACZ,WAAW;AAAA,gBACP;AAAA,gBACA,oBAAoB,EAAE,yBAAyB;AAAA,cACnD;AAAA;AAAA,UACH;AAAA,UACD;AAAA,YAAC;AAAA;AAAA,cACG,eAAY;AAAA,cACZ,WAAW;AAAA,gBACP;AAAA,gBACA,oBAAoB,EAChB,kCACJ;AAAA,cACJ;AAAA;AAAA,UACH;AAAA;AAAA;AAAA,IACL;AAAA,IAEA;AAAA,MAAC;AAAA;AAAA,QACG,WAAW;AAAA,UACP;AAAA,UACA,oBAAoB,EAAE,+BAA+B;AAAA,UACrD,oBAAoB,EAChB,4CACJ;AAAA,QACJ;AAAA,QACA,eAAY;AAAA;AAAA,IACf;AAAA,IACD;AAAA,MAAC;AAAA;AAAA,QACG,WAAW;AAAA,UACP;AAAA,UACA,oBAAoB,EAAE,iCAAiC;AAAA,QAC3D;AAAA,QACA,eAAY;AAAA;AAAA,IACf;AAAA,KACL;AAER;AAEA,IAAO,wBAAQ;","names":[]}
+{"version":3,"sources":["../../../../src/visualBuilder/components/VisualBuilder.tsx"],"sourcesContent":["import classNames from \"classnames\";\nimport { hideOverlay } from \"../generators/generateOverlay\";\nimport {\n    visualBuilderStyles,\n    VisualBuilderGlobalStyles,\n} from \"../visualBuilder.style\";\nimport React from \"preact/compat\";\nimport { isOpenInBuilder , isOpenInPreviewShare} from \"../../utils\";\n\ninterface VisualBuilderProps {\n    visualBuilderContainer: HTMLDivElement | null;\n    resizeObserver: ResizeObserver;\n}\n\nfunction VisualBuilderComponent(props: VisualBuilderProps): JSX.Element | null {\n    const isInBuilder = isOpenInBuilder();\n    const isInPreviewShare = isOpenInPreviewShare();\n\n    if (!isInBuilder && !isInPreviewShare) {\n        return null;\n    }\n\n    return (\n        <>\n            {/* For some reason, goober's glob and createGlobalStyle were not working in this case. */}\n            {/* glob also does not work when called in visualBuilder's constructor */}\n            <style\n                dangerouslySetInnerHTML={{\n                    __html: VisualBuilderGlobalStyles,\n                }}\n            />\n            <div\n                className={classNames(\n                    visualBuilderStyles()[\"visual-builder__cursor\"],\n                    \"visual-builder__cursor\"\n                )}\n                data-testid=\"visual-builder__cursor\"\n            ></div>\n            <div\n                className={classNames(\n                    visualBuilderStyles()[\"visual-builder__overlay__wrapper\"],\n                    \"visual-builder__overlay__wrapper\"\n                )}\n                data-testid=\"visual-builder__overlay__wrapper\"\n                onClick={(event) => {\n                    const targetElement = event.currentTarget as HTMLDivElement;\n\n                    const focusedToolbar = document.querySelector(\n                        \".visual-builder__focused-toolbar\"\n                    ) as HTMLDivElement;\n\n                    hideOverlay({\n                        visualBuilderContainer: props.visualBuilderContainer,\n                        visualBuilderOverlayWrapper: targetElement,\n                        focusedToolbar: focusedToolbar,\n                        resizeObserver: props.resizeObserver,\n                    });\n                }}\n            >\n                <div\n                    className={classNames(\n                        \"visual-builder__overlay visual-builder__overlay--top\",\n                        visualBuilderStyles()[\"visual-builder__overlay\"]\n                    )}\n                    data-testid=\"visual-builder__overlay--top\"\n                ></div>\n                <div\n                    data-testid=\"visual-builder__overlay--left\"\n                    className={classNames(\n                        \"visual-builder__overlay visual-builder__overlay--left\",\n                        visualBuilderStyles()[\"visual-builder__overlay\"]\n                    )}\n                ></div>\n                <div\n                    data-testid=\"visual-builder__overlay--right\"\n                    className={classNames(\n                        \"visual-builder__overlay visual-builder__overlay--right\",\n                        visualBuilderStyles()[\"visual-builder__overlay\"]\n                    )}\n                ></div>\n                <div\n                    data-testid=\"visual-builder__overlay--bottom\"\n                    className={classNames(\n                        \"visual-builder__overlay visual-builder__overlay--bottom\",\n                        visualBuilderStyles()[\"visual-builder__overlay\"]\n                    )}\n                ></div>\n                <div\n                    data-testid=\"visual-builder__overlay--outline\"\n                    className={classNames(\n                        \"visual-builder__overlay--outline\",\n                        visualBuilderStyles()[\n                            \"visual-builder__overlay--outline\"\n                        ]\n                    )}\n                ></div>\n            </div>\n\n            <div\n                className={classNames(\n                    \"visual-builder__hover-outline visual-builder__hover-outline--unclickable\",\n                    visualBuilderStyles()[\"visual-builder__hover-outline\"],\n                    visualBuilderStyles()[\n                        \"visual-builder__hover-outline--unclickable\"\n                    ]\n                )}\n                data-testid=\"visual-builder__hover-outline\"\n            ></div>\n            <div\n                className={classNames(\n                    \"visual-builder__focused-toolbar\",\n                    visualBuilderStyles()[\"visual-builder__focused-toolbar\"]\n                )}\n                data-testid=\"visual-builder__focused-toolbar\"\n            ></div>\n        </>\n    );\n}\n\nexport default VisualBuilderComponent;\n"],"mappings":";;;AAAA,OAAO,gBAAgB;AACvB,SAAS,mBAAmB;AAC5B;AAAA,EACI;AAAA,EACA;AAAA,OACG;AAEP,SAAS,iBAAkB,4BAA2B;AAgB9C,mBAGI,KAYA,YAfJ;AATR,SAAS,uBAAuB,OAA+C;AAC3E,QAAM,cAAc,gBAAgB;AACpC,QAAM,mBAAmB,qBAAqB;AAE9C,MAAI,CAAC,eAAe,CAAC,kBAAkB;AACnC,WAAO;AAAA,EACX;AAEA,SACI,iCAGI;AAAA;AAAA,MAAC;AAAA;AAAA,QACG,yBAAyB;AAAA,UACrB,QAAQ;AAAA,QACZ;AAAA;AAAA,IACJ;AAAA,IACA;AAAA,MAAC;AAAA;AAAA,QACG,WAAW;AAAA,UACP,oBAAoB,EAAE,wBAAwB;AAAA,UAC9C;AAAA,QACJ;AAAA,QACA,eAAY;AAAA;AAAA,IACf;AAAA,IACD;AAAA,MAAC;AAAA;AAAA,QACG,WAAW;AAAA,UACP,oBAAoB,EAAE,kCAAkC;AAAA,UACxD;AAAA,QACJ;AAAA,QACA,eAAY;AAAA,QACZ,SAAS,CAAC,UAAU;AAChB,gBAAM,gBAAgB,MAAM;AAE5B,gBAAM,iBAAiB,SAAS;AAAA,YAC5B;AAAA,UACJ;AAEA,sBAAY;AAAA,YACR,wBAAwB,MAAM;AAAA,YAC9B,6BAA6B;AAAA,YAC7B;AAAA,YACA,gBAAgB,MAAM;AAAA,UAC1B,CAAC;AAAA,QACL;AAAA,QAEA;AAAA;AAAA,YAAC;AAAA;AAAA,cACG,WAAW;AAAA,gBACP;AAAA,gBACA,oBAAoB,EAAE,yBAAyB;AAAA,cACnD;AAAA,cACA,eAAY;AAAA;AAAA,UACf;AAAA,UACD;AAAA,YAAC;AAAA;AAAA,cACG,eAAY;AAAA,cACZ,WAAW;AAAA,gBACP;AAAA,gBACA,oBAAoB,EAAE,yBAAyB;AAAA,cACnD;AAAA;AAAA,UACH;AAAA,UACD;AAAA,YAAC;AAAA;AAAA,cACG,eAAY;AAAA,cACZ,WAAW;AAAA,gBACP;AAAA,gBACA,oBAAoB,EAAE,yBAAyB;AAAA,cACnD;AAAA;AAAA,UACH;AAAA,UACD;AAAA,YAAC;AAAA;AAAA,cACG,eAAY;AAAA,cACZ,WAAW;AAAA,gBACP;AAAA,gBACA,oBAAoB,EAAE,yBAAyB;AAAA,cACnD;AAAA;AAAA,UACH;AAAA,UACD;AAAA,YAAC;AAAA;AAAA,cACG,eAAY;AAAA,cACZ,WAAW;AAAA,gBACP;AAAA,gBACA,oBAAoB,EAChB,kCACJ;AAAA,cACJ;AAAA;AAAA,UACH;AAAA;AAAA;AAAA,IACL;AAAA,IAEA;AAAA,MAAC;AAAA;AAAA,QACG,WAAW;AAAA,UACP;AAAA,UACA,oBAAoB,EAAE,+BAA+B;AAAA,UACrD,oBAAoB,EAChB,4CACJ;AAAA,QACJ;AAAA,QACA,eAAY;AAAA;AAAA,IACf;AAAA,IACD;AAAA,MAAC;AAAA;AAAA,QACG,WAAW;AAAA,UACP;AAAA,UACA,oBAAoB,EAAE,iCAAiC;AAAA,QAC3D;AAAA,QACA,eAAY;AAAA;AAAA,IACf;AAAA,KACL;AAER;AAEA,IAAO,wBAAQ;","names":[]}

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

@@ -43,7 +43,8 @@ function initUI(props) {
     `.visual-builder__container`
   );
   const isInBuilder = (0, import_utils.isOpenInBuilder)();
-  if (!visualBuilderDOM && isInBuilder) {
+  const isInPreviewShare = (0, import_utils.isOpenInPreviewShare)();
+  if (!visualBuilderDOM && (isInBuilder || isInPreviewShare)) {
     const visualBuilderContainer = document.createElement("div");
     visualBuilderContainer.classList.add(
       (0, import_visualBuilder.visualBuilderStyles)()["visual-builder__container"],

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/visualBuilder/components/index.tsx"],"sourcesContent":["import { render } from \"preact\";\nimport VisualBuilderComponent from \"./VisualBuilder\";\nimport { visualBuilderStyles } from \"../visualBuilder.style\";\nimport React from \"preact/compat\";\nimport { isOpenInBuilder } from \"../../utils\";\n\ninterface InitUIParams {\n    resizeObserver: ResizeObserver;\n}\n\nfunction initUI(props: InitUIParams): void {\n    const visualBuilderDOM = document.querySelector(\n        `.visual-builder__container`\n    );\n\n    const isInBuilder = isOpenInBuilder();\n\n    if (!visualBuilderDOM && isInBuilder) {\n        const visualBuilderContainer = document.createElement(\"div\");\n        visualBuilderContainer.classList.add(\n            visualBuilderStyles()[\"visual-builder__container\"],\n            \"visual-builder__container\"\n        );\n        visualBuilderContainer.setAttribute(\n            \"data-testid\",\n            \"visual-builder__container\"\n        );\n\n        document.body.appendChild(visualBuilderContainer);\n\n        render(\n            <VisualBuilderComponent\n                visualBuilderContainer={visualBuilderContainer}\n                resizeObserver={props.resizeObserver}\n            />,\n            visualBuilderContainer\n        );\n    }\n\n    return;\n}\n\nexport default initUI;\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,oBAAuB;AACvB,2BAAmC;AACnC,2BAAoC;AAEpC,mBAAgC;AA2BpB;AArBZ,SAAS,OAAO,OAA2B;AACvC,QAAM,mBAAmB,SAAS;AAAA,IAC9B;AAAA,EACJ;AAEA,QAAM,kBAAc,8BAAgB;AAEpC,MAAI,CAAC,oBAAoB,aAAa;AAClC,UAAM,yBAAyB,SAAS,cAAc,KAAK;AAC3D,2BAAuB,UAAU;AAAA,UAC7B,0CAAoB,EAAE,2BAA2B;AAAA,MACjD;AAAA,IACJ;AACA,2BAAuB;AAAA,MACnB;AAAA,MACA;AAAA,IACJ;AAEA,aAAS,KAAK,YAAY,sBAAsB;AAEhD;AAAA,MACI;AAAA,QAAC,qBAAAA;AAAA,QAAA;AAAA,UACG;AAAA,UACA,gBAAgB,MAAM;AAAA;AAAA,MAC1B;AAAA,MACA;AAAA,IACJ;AAAA,EACJ;AAEA;AACJ;AAEA,IAAO,qBAAQ;","names":["VisualBuilderComponent"]}
+{"version":3,"sources":["../../../../src/visualBuilder/components/index.tsx"],"sourcesContent":["import { render } from \"preact\";\nimport VisualBuilderComponent from \"./VisualBuilder\";\nimport { visualBuilderStyles } from \"../visualBuilder.style\";\nimport React from \"preact/compat\";\nimport { isOpenInBuilder , isOpenInPreviewShare} from \"../../utils\";\n\ninterface InitUIParams {\n    resizeObserver: ResizeObserver;\n}\n\nfunction initUI(props: InitUIParams): void {\n    const visualBuilderDOM = document.querySelector(\n        `.visual-builder__container`\n    );\n\n    const isInBuilder = isOpenInBuilder();\n    const isInPreviewShare = isOpenInPreviewShare();\n\n    if (!visualBuilderDOM && (isInBuilder || isInPreviewShare)) {\n        const visualBuilderContainer = document.createElement(\"div\");\n        visualBuilderContainer.classList.add(\n            visualBuilderStyles()[\"visual-builder__container\"],\n            \"visual-builder__container\"\n        );\n        visualBuilderContainer.setAttribute(\n            \"data-testid\",\n            \"visual-builder__container\"\n        );\n\n        document.body.appendChild(visualBuilderContainer);\n\n        render(\n            <VisualBuilderComponent\n                visualBuilderContainer={visualBuilderContainer}\n                resizeObserver={props.resizeObserver}\n            />,\n            visualBuilderContainer\n        );\n    }\n\n    return;\n}\n\nexport default initUI;\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,oBAAuB;AACvB,2BAAmC;AACnC,2BAAoC;AAEpC,mBAAsD;AA4B1C;AAtBZ,SAAS,OAAO,OAA2B;AACvC,QAAM,mBAAmB,SAAS;AAAA,IAC9B;AAAA,EACJ;AAEA,QAAM,kBAAc,8BAAgB;AACpC,QAAM,uBAAmB,mCAAqB;AAE9C,MAAI,CAAC,qBAAqB,eAAe,mBAAmB;AACxD,UAAM,yBAAyB,SAAS,cAAc,KAAK;AAC3D,2BAAuB,UAAU;AAAA,UAC7B,0CAAoB,EAAE,2BAA2B;AAAA,MACjD;AAAA,IACJ;AACA,2BAAuB;AAAA,MACnB;AAAA,MACA;AAAA,IACJ;AAEA,aAAS,KAAK,YAAY,sBAAsB;AAEhD;AAAA,MACI;AAAA,QAAC,qBAAAA;AAAA,QAAA;AAAA,UACG;AAAA,UACA,gBAAgB,MAAM;AAAA;AAAA,MAC1B;AAAA,MACA;AAAA,IACJ;AAAA,EACJ;AAEA;AACJ;AAEA,IAAO,qBAAQ;","names":["VisualBuilderComponent"]}

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

@@ -4,14 +4,15 @@ import "../../chunk-5WRI5ZAA.js";
 import { render } from "preact";
 import VisualBuilderComponent from "./VisualBuilder.js";
 import { visualBuilderStyles } from "../visualBuilder.style.js";
-import { isOpenInBuilder } from "../../utils/index.js";
+import { isOpenInBuilder, isOpenInPreviewShare } from "../../utils/index.js";
 import { jsx } from "preact/jsx-runtime";
 function initUI(props) {
   const visualBuilderDOM = document.querySelector(
     `.visual-builder__container`
   );
   const isInBuilder = isOpenInBuilder();
-  if (!visualBuilderDOM && isInBuilder) {
+  const isInPreviewShare = isOpenInPreviewShare();
+  if (!visualBuilderDOM && (isInBuilder || isInPreviewShare)) {
     const visualBuilderContainer = document.createElement("div");
     visualBuilderContainer.classList.add(
       visualBuilderStyles()["visual-builder__container"],

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/visualBuilder/components/index.tsx"],"sourcesContent":["import { render } from \"preact\";\nimport VisualBuilderComponent from \"./VisualBuilder\";\nimport { visualBuilderStyles } from \"../visualBuilder.style\";\nimport React from \"preact/compat\";\nimport { isOpenInBuilder } from \"../../utils\";\n\ninterface InitUIParams {\n    resizeObserver: ResizeObserver;\n}\n\nfunction initUI(props: InitUIParams): void {\n    const visualBuilderDOM = document.querySelector(\n        `.visual-builder__container`\n    );\n\n    const isInBuilder = isOpenInBuilder();\n\n    if (!visualBuilderDOM && isInBuilder) {\n        const visualBuilderContainer = document.createElement(\"div\");\n        visualBuilderContainer.classList.add(\n            visualBuilderStyles()[\"visual-builder__container\"],\n            \"visual-builder__container\"\n        );\n        visualBuilderContainer.setAttribute(\n            \"data-testid\",\n            \"visual-builder__container\"\n        );\n\n        document.body.appendChild(visualBuilderContainer);\n\n        render(\n            <VisualBuilderComponent\n                visualBuilderContainer={visualBuilderContainer}\n                resizeObserver={props.resizeObserver}\n            />,\n            visualBuilderContainer\n        );\n    }\n\n    return;\n}\n\nexport default initUI;\n"],"mappings":";;;AAAA,SAAS,cAAc;AACvB,OAAO,4BAA4B;AACnC,SAAS,2BAA2B;AAEpC,SAAS,uBAAuB;AA2BpB;AArBZ,SAAS,OAAO,OAA2B;AACvC,QAAM,mBAAmB,SAAS;AAAA,IAC9B;AAAA,EACJ;AAEA,QAAM,cAAc,gBAAgB;AAEpC,MAAI,CAAC,oBAAoB,aAAa;AAClC,UAAM,yBAAyB,SAAS,cAAc,KAAK;AAC3D,2BAAuB,UAAU;AAAA,MAC7B,oBAAoB,EAAE,2BAA2B;AAAA,MACjD;AAAA,IACJ;AACA,2BAAuB;AAAA,MACnB;AAAA,MACA;AAAA,IACJ;AAEA,aAAS,KAAK,YAAY,sBAAsB;AAEhD;AAAA,MACI;AAAA,QAAC;AAAA;AAAA,UACG;AAAA,UACA,gBAAgB,MAAM;AAAA;AAAA,MAC1B;AAAA,MACA;AAAA,IACJ;AAAA,EACJ;AAEA;AACJ;AAEA,IAAO,qBAAQ;","names":[]}
+{"version":3,"sources":["../../../../src/visualBuilder/components/index.tsx"],"sourcesContent":["import { render } from \"preact\";\nimport VisualBuilderComponent from \"./VisualBuilder\";\nimport { visualBuilderStyles } from \"../visualBuilder.style\";\nimport React from \"preact/compat\";\nimport { isOpenInBuilder , isOpenInPreviewShare} from \"../../utils\";\n\ninterface InitUIParams {\n    resizeObserver: ResizeObserver;\n}\n\nfunction initUI(props: InitUIParams): void {\n    const visualBuilderDOM = document.querySelector(\n        `.visual-builder__container`\n    );\n\n    const isInBuilder = isOpenInBuilder();\n    const isInPreviewShare = isOpenInPreviewShare();\n\n    if (!visualBuilderDOM && (isInBuilder || isInPreviewShare)) {\n        const visualBuilderContainer = document.createElement(\"div\");\n        visualBuilderContainer.classList.add(\n            visualBuilderStyles()[\"visual-builder__container\"],\n            \"visual-builder__container\"\n        );\n        visualBuilderContainer.setAttribute(\n            \"data-testid\",\n            \"visual-builder__container\"\n        );\n\n        document.body.appendChild(visualBuilderContainer);\n\n        render(\n            <VisualBuilderComponent\n                visualBuilderContainer={visualBuilderContainer}\n                resizeObserver={props.resizeObserver}\n            />,\n            visualBuilderContainer\n        );\n    }\n\n    return;\n}\n\nexport default initUI;\n"],"mappings":";;;AAAA,SAAS,cAAc;AACvB,OAAO,4BAA4B;AACnC,SAAS,2BAA2B;AAEpC,SAAS,iBAAkB,4BAA2B;AA4B1C;AAtBZ,SAAS,OAAO,OAA2B;AACvC,QAAM,mBAAmB,SAAS;AAAA,IAC9B;AAAA,EACJ;AAEA,QAAM,cAAc,gBAAgB;AACpC,QAAM,mBAAmB,qBAAqB;AAE9C,MAAI,CAAC,qBAAqB,eAAe,mBAAmB;AACxD,UAAM,yBAAyB,SAAS,cAAc,KAAK;AAC3D,2BAAuB,UAAU;AAAA,MAC7B,oBAAoB,EAAE,2BAA2B;AAAA,MACjD;AAAA,IACJ;AACA,2BAAuB;AAAA,MACnB;AAAA,MACA;AAAA,IACJ;AAEA,aAAS,KAAK,YAAY,sBAAsB;AAEhD;AAAA,MACI;AAAA,QAAC;AAAA;AAAA,UACG;AAAA,UACA,gBAAgB,MAAM;AAAA;AAAA,MAC1B;AAAA,MACA;AAAA,IACJ;AAAA,EACJ;AAEA;AACJ;AAEA,IAAO,qBAAQ;","names":[]}

package/dist/modern/visualBuilder/utils/enableInlineEditing.cjs

@@ -48,7 +48,8 @@ function enableInlineEditing({
     actualEditableField.addEventListener("paste", import_pasteAsPlainText.pasteAsPlainText);
   }
   const expectedTextContent = expectedFieldData;
-  if (expectedTextContent && textContent !== expectedTextContent || (0, import_generatePseudoEditableField.isEllipsisActive)(editableElement)) {
+  const isFieldLastEdited = document.querySelector("[data-cs-last-edited]") === editableElement;
+  if (expectedTextContent && textContent !== expectedTextContent || (0, import_generatePseudoEditableField.isEllipsisActive)(editableElement) || isFieldLastEdited) {
     const pseudoEditableField = (0, import_generatePseudoEditableField.generatePseudoEditableElement)(
       { editableElement },
       { textContent: expectedFieldData }
@@ -84,6 +85,7 @@ function enableInlineEditing({
   actualEditableField.setAttribute("contenteditable", "true");
   actualEditableField.addEventListener("input", import_handleFieldMouseDown.handleFieldInput);
   actualEditableField.addEventListener("keydown", import_handleFieldMouseDown.handleFieldKeyDown);
+  editableElement.setAttribute("data-cs-last-edited", "true");
   actualEditableField.focus();
   return;
 }

package/dist/modern/visualBuilder/utils/enableInlineEditing.cjs.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/visualBuilder/utils/enableInlineEditing.ts"],"sourcesContent":["import { throttle } from \"lodash-es\";\nimport { VisualBuilder } from \"../index\";\nimport {\n    isEllipsisActive,\n    generatePseudoEditableElement,\n} from \"../generators/generatePseudoEditableField\";\nimport { VISUAL_BUILDER_FIELD_TYPE_ATTRIBUTE_KEY } from \"./constants\";\nimport { getMultilinePlaintext } from \"./getMultilinePlaintext\";\nimport { handleFieldInput, handleFieldKeyDown } from \"./handleFieldMouseDown\";\nimport { FieldDataType, VisualBuilderEditContext } from \"./types/index.types\";\nimport { updateFocussedState } from \"./updateFocussedState\";\nimport { pasteAsPlainText } from \"./pasteAsPlainText\";\n\nexport function enableInlineEditing({\n    expectedFieldData,\n    editableElement,\n    fieldType,\n    elements,\n}: {\n    expectedFieldData: any;\n    editableElement: HTMLElement;\n    fieldType: FieldDataType;\n    elements: VisualBuilderEditContext;\n}) {\n    const { visualBuilderContainer, resizeObserver } = elements;\n    let actualEditableField = editableElement as HTMLElement;\n\n    VisualBuilder.VisualBuilderGlobalState.value.focusFieldValue =\n        actualEditableField?.innerText;\n\n    const elementComputedDisplay =\n        window.getComputedStyle(actualEditableField).display;\n\n    let textContent =\n        (editableElement as HTMLElement).innerText ||\n        editableElement.textContent ||\n        \"\";\n\n    if (fieldType === FieldDataType.MULTILINE) {\n        textContent = getMultilinePlaintext(actualEditableField);\n        actualEditableField.addEventListener(\"paste\", pasteAsPlainText);\n    }\n    const expectedTextContent = expectedFieldData;\n    if (\n        (expectedTextContent && textContent !== expectedTextContent) ||\n        isEllipsisActive(editableElement as HTMLElement)\n    ) {\n        // TODO: Testing will be done in the E2E.\n        const pseudoEditableField = generatePseudoEditableElement(\n            { editableElement: editableElement as HTMLElement },\n            { textContent: expectedFieldData }\n        );\n\n        (editableElement as HTMLElement).style.visibility = \"hidden\";\n\n        // set field type attribute to the pseudo editable field\n        // ensures proper keydown handling similar to the actual editable field\n        pseudoEditableField.setAttribute(\n            VISUAL_BUILDER_FIELD_TYPE_ATTRIBUTE_KEY,\n            fieldType\n        );\n        visualBuilderContainer.appendChild(pseudoEditableField);\n        actualEditableField = pseudoEditableField;\n\n        if (fieldType === FieldDataType.MULTILINE)\n            actualEditableField.addEventListener(\"paste\", pasteAsPlainText);\n\n        // we will unobserve this in hideOverlay\n        elements.resizeObserver.observe(pseudoEditableField);\n    } else if (elementComputedDisplay === \"inline\") {\n        // if the editable field is inline\n        const onInlineElementInput = throttle(() => {\n            const overlayWrapper = visualBuilderContainer.querySelector(\n                \".visual-builder__overlay__wrapper\"\n            ) as HTMLDivElement;\n            const focusedToolbar = visualBuilderContainer.querySelector(\n                \".visual-builder__focused-toolbar\"\n            ) as HTMLDivElement;\n            updateFocussedState({\n                editableElement: actualEditableField,\n                visualBuilderContainer,\n                overlayWrapper,\n                focusedToolbar,\n                resizeObserver,\n            });\n        }, 200);\n        actualEditableField.addEventListener(\"input\", onInlineElementInput);\n    }\n\n    actualEditableField.setAttribute(\"contenteditable\", \"true\");\n    actualEditableField.addEventListener(\"input\", handleFieldInput);\n    actualEditableField.addEventListener(\"keydown\", handleFieldKeyDown);\n    // focus on the contenteditable element to start accepting input\n    actualEditableField.focus();\n\n    return;\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,uBAAyB;AACzB,eAA8B;AAC9B,yCAGO;AACP,uBAAwD;AACxD,mCAAsC;AACtC,kCAAqD;AACrD,mBAAwD;AACxD,iCAAoC;AACpC,8BAAiC;AAE1B,SAAS,oBAAoB;AAAA,EAChC;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACJ,GAKG;AACC,QAAM,EAAE,wBAAwB,eAAe,IAAI;AACnD,MAAI,sBAAsB;AAE1B,yBAAc,yBAAyB,MAAM,kBACzC,qBAAqB;AAEzB,QAAM,yBACF,OAAO,iBAAiB,mBAAmB,EAAE;AAEjD,MAAI,cACC,gBAAgC,aACjC,gBAAgB,eAChB;AAEJ,MAAI,cAAc,2BAAc,WAAW;AACvC,sBAAc,oDAAsB,mBAAmB;AACvD,wBAAoB,iBAAiB,SAAS,wCAAgB;AAAA,EAClE;AACA,QAAM,sBAAsB;AAC5B,MACK,uBAAuB,gBAAgB,2BACxC,qDAAiB,eAA8B,GACjD;AAEE,UAAM,0BAAsB;AAAA,MACxB,EAAE,gBAAgD;AAAA,MAClD,EAAE,aAAa,kBAAkB;AAAA,IACrC;AAEA,IAAC,gBAAgC,MAAM,aAAa;AAIpD,wBAAoB;AAAA,MAChB;AAAA,MACA;AAAA,IACJ;AACA,2BAAuB,YAAY,mBAAmB;AACtD,0BAAsB;AAEtB,QAAI,cAAc,2BAAc;AAC5B,0BAAoB,iBAAiB,SAAS,wCAAgB;AAGlE,aAAS,eAAe,QAAQ,mBAAmB;AAAA,EACvD,WAAW,2BAA2B,UAAU;AAE5C,UAAM,2BAAuB,2BAAS,MAAM;AACxC,YAAM,iBAAiB,uBAAuB;AAAA,QAC1C;AAAA,MACJ;AACA,YAAM,iBAAiB,uBAAuB;AAAA,QAC1C;AAAA,MACJ;AACA,0DAAoB;AAAA,QAChB,iBAAiB;AAAA,QACjB;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,MACJ,CAAC;AAAA,IACL,GAAG,GAAG;AACN,wBAAoB,iBAAiB,SAAS,oBAAoB;AAAA,EACtE;AAEA,sBAAoB,aAAa,mBAAmB,MAAM;AAC1D,sBAAoB,iBAAiB,SAAS,4CAAgB;AAC9D,sBAAoB,iBAAiB,WAAW,8CAAkB;AAElE,sBAAoB,MAAM;AAE1B;AACJ;","names":[]}
+{"version":3,"sources":["../../../../src/visualBuilder/utils/enableInlineEditing.ts"],"sourcesContent":["import { throttle } from \"lodash-es\";\nimport { VisualBuilder } from \"../index\";\nimport {\n    isEllipsisActive,\n    generatePseudoEditableElement,\n} from \"../generators/generatePseudoEditableField\";\nimport { VISUAL_BUILDER_FIELD_TYPE_ATTRIBUTE_KEY } from \"./constants\";\nimport { getMultilinePlaintext } from \"./getMultilinePlaintext\";\nimport { handleFieldInput, handleFieldKeyDown } from \"./handleFieldMouseDown\";\nimport { FieldDataType, VisualBuilderEditContext } from \"./types/index.types\";\nimport { updateFocussedState } from \"./updateFocussedState\";\nimport { pasteAsPlainText } from \"./pasteAsPlainText\";\n\nexport function enableInlineEditing({\n    expectedFieldData,\n    editableElement,\n    fieldType,\n    elements,\n}: {\n    expectedFieldData: any;\n    editableElement: HTMLElement;\n    fieldType: FieldDataType;\n    elements: VisualBuilderEditContext;\n}) {\n    const { visualBuilderContainer, resizeObserver } = elements;\n    let actualEditableField = editableElement as HTMLElement;\n\n    VisualBuilder.VisualBuilderGlobalState.value.focusFieldValue =\n        actualEditableField?.innerText;\n\n    const elementComputedDisplay =\n        window.getComputedStyle(actualEditableField).display;\n\n    \n    let textContent =\n        (editableElement as HTMLElement).innerText ||\n        editableElement.textContent ||\n        \"\";\n\n    if (fieldType === FieldDataType.MULTILINE) {\n        textContent = getMultilinePlaintext(actualEditableField);\n        actualEditableField.addEventListener(\"paste\", pasteAsPlainText);\n    }\n    const expectedTextContent = expectedFieldData;\n    \n    const isFieldLastEdited = document.querySelector(\"[data-cs-last-edited]\") === editableElement;\n    if (\n        (expectedTextContent && textContent !== expectedTextContent) ||\n        isEllipsisActive(editableElement as HTMLElement) ||\n        isFieldLastEdited\n    ) {\n        // TODO: Testing will be done in the E2E.\n        const pseudoEditableField = generatePseudoEditableElement(\n            { editableElement: editableElement as HTMLElement },\n            { textContent: expectedFieldData } \n        );\n\n        (editableElement as HTMLElement).style.visibility = \"hidden\";\n\n        // set field type attribute to the pseudo editable field\n        // ensures proper keydown handling similar to the actual editable field\n        pseudoEditableField.setAttribute(\n            VISUAL_BUILDER_FIELD_TYPE_ATTRIBUTE_KEY,\n            fieldType\n        );\n        visualBuilderContainer.appendChild(pseudoEditableField);\n        actualEditableField = pseudoEditableField;\n\n        if (fieldType === FieldDataType.MULTILINE)\n            actualEditableField.addEventListener(\"paste\", pasteAsPlainText);\n\n        // we will unobserve this in hideOverlay\n        elements.resizeObserver.observe(pseudoEditableField);\n    } else if (elementComputedDisplay === \"inline\") {\n        // if the editable field is inline\n        const onInlineElementInput = throttle(() => {\n            const overlayWrapper = visualBuilderContainer.querySelector(\n                \".visual-builder__overlay__wrapper\"\n            ) as HTMLDivElement;\n            const focusedToolbar = visualBuilderContainer.querySelector(\n                \".visual-builder__focused-toolbar\"\n            ) as HTMLDivElement;\n            updateFocussedState({\n                editableElement: actualEditableField,\n                visualBuilderContainer,\n                overlayWrapper,\n                focusedToolbar,\n                resizeObserver,\n            });\n        }, 200);\n        actualEditableField.addEventListener(\"input\", onInlineElementInput);\n    }\n\n    actualEditableField.setAttribute(\"contenteditable\", \"true\");\n    actualEditableField.addEventListener(\"input\", handleFieldInput);\n    actualEditableField.addEventListener(\"keydown\", handleFieldKeyDown);\n\n    editableElement.setAttribute(\"data-cs-last-edited\", \"true\");\n\n    // focus on the contenteditable element to start accepting input\n    actualEditableField.focus();\n\n    return;\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,uBAAyB;AACzB,eAA8B;AAC9B,yCAGO;AACP,uBAAwD;AACxD,mCAAsC;AACtC,kCAAqD;AACrD,mBAAwD;AACxD,iCAAoC;AACpC,8BAAiC;AAE1B,SAAS,oBAAoB;AAAA,EAChC;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACJ,GAKG;AACC,QAAM,EAAE,wBAAwB,eAAe,IAAI;AACnD,MAAI,sBAAsB;AAE1B,yBAAc,yBAAyB,MAAM,kBACzC,qBAAqB;AAEzB,QAAM,yBACF,OAAO,iBAAiB,mBAAmB,EAAE;AAGjD,MAAI,cACC,gBAAgC,aACjC,gBAAgB,eAChB;AAEJ,MAAI,cAAc,2BAAc,WAAW;AACvC,sBAAc,oDAAsB,mBAAmB;AACvD,wBAAoB,iBAAiB,SAAS,wCAAgB;AAAA,EAClE;AACA,QAAM,sBAAsB;AAE5B,QAAM,oBAAoB,SAAS,cAAc,uBAAuB,MAAM;AAC9E,MACK,uBAAuB,gBAAgB,2BACxC,qDAAiB,eAA8B,KAC/C,mBACF;AAEE,UAAM,0BAAsB;AAAA,MACxB,EAAE,gBAAgD;AAAA,MAClD,EAAE,aAAa,kBAAkB;AAAA,IACrC;AAEA,IAAC,gBAAgC,MAAM,aAAa;AAIpD,wBAAoB;AAAA,MAChB;AAAA,MACA;AAAA,IACJ;AACA,2BAAuB,YAAY,mBAAmB;AACtD,0BAAsB;AAEtB,QAAI,cAAc,2BAAc;AAC5B,0BAAoB,iBAAiB,SAAS,wCAAgB;AAGlE,aAAS,eAAe,QAAQ,mBAAmB;AAAA,EACvD,WAAW,2BAA2B,UAAU;AAE5C,UAAM,2BAAuB,2BAAS,MAAM;AACxC,YAAM,iBAAiB,uBAAuB;AAAA,QAC1C;AAAA,MACJ;AACA,YAAM,iBAAiB,uBAAuB;AAAA,QAC1C;AAAA,MACJ;AACA,0DAAoB;AAAA,QAChB,iBAAiB;AAAA,QACjB;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,MACJ,CAAC;AAAA,IACL,GAAG,GAAG;AACN,wBAAoB,iBAAiB,SAAS,oBAAoB;AAAA,EACtE;AAEA,sBAAoB,aAAa,mBAAmB,MAAM;AAC1D,sBAAoB,iBAAiB,SAAS,4CAAgB;AAC9D,sBAAoB,iBAAiB,WAAW,8CAAkB;AAElE,kBAAgB,aAAa,uBAAuB,MAAM;AAG1D,sBAAoB,MAAM;AAE1B;AACJ;","names":[]}

package/dist/modern/visualBuilder/utils/enableInlineEditing.js

@@ -29,7 +29,8 @@ function enableInlineEditing({
     actualEditableField.addEventListener("paste", pasteAsPlainText);
   }
   const expectedTextContent = expectedFieldData;
-  if (expectedTextContent && textContent !== expectedTextContent || isEllipsisActive(editableElement)) {
+  const isFieldLastEdited = document.querySelector("[data-cs-last-edited]") === editableElement;
+  if (expectedTextContent && textContent !== expectedTextContent || isEllipsisActive(editableElement) || isFieldLastEdited) {
     const pseudoEditableField = generatePseudoEditableElement(
       { editableElement },
       { textContent: expectedFieldData }
@@ -65,6 +66,7 @@ function enableInlineEditing({
   actualEditableField.setAttribute("contenteditable", "true");
   actualEditableField.addEventListener("input", handleFieldInput);
   actualEditableField.addEventListener("keydown", handleFieldKeyDown);
+  editableElement.setAttribute("data-cs-last-edited", "true");
   actualEditableField.focus();
   return;
 }

package/dist/modern/visualBuilder/utils/enableInlineEditing.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/visualBuilder/utils/enableInlineEditing.ts"],"sourcesContent":["import { throttle } from \"lodash-es\";\nimport { VisualBuilder } from \"../index\";\nimport {\n    isEllipsisActive,\n    generatePseudoEditableElement,\n} from \"../generators/generatePseudoEditableField\";\nimport { VISUAL_BUILDER_FIELD_TYPE_ATTRIBUTE_KEY } from \"./constants\";\nimport { getMultilinePlaintext } from \"./getMultilinePlaintext\";\nimport { handleFieldInput, handleFieldKeyDown } from \"./handleFieldMouseDown\";\nimport { FieldDataType, VisualBuilderEditContext } from \"./types/index.types\";\nimport { updateFocussedState } from \"./updateFocussedState\";\nimport { pasteAsPlainText } from \"./pasteAsPlainText\";\n\nexport function enableInlineEditing({\n    expectedFieldData,\n    editableElement,\n    fieldType,\n    elements,\n}: {\n    expectedFieldData: any;\n    editableElement: HTMLElement;\n    fieldType: FieldDataType;\n    elements: VisualBuilderEditContext;\n}) {\n    const { visualBuilderContainer, resizeObserver } = elements;\n    let actualEditableField = editableElement as HTMLElement;\n\n    VisualBuilder.VisualBuilderGlobalState.value.focusFieldValue =\n        actualEditableField?.innerText;\n\n    const elementComputedDisplay =\n        window.getComputedStyle(actualEditableField).display;\n\n    let textContent =\n        (editableElement as HTMLElement).innerText ||\n        editableElement.textContent ||\n        \"\";\n\n    if (fieldType === FieldDataType.MULTILINE) {\n        textContent = getMultilinePlaintext(actualEditableField);\n        actualEditableField.addEventListener(\"paste\", pasteAsPlainText);\n    }\n    const expectedTextContent = expectedFieldData;\n    if (\n        (expectedTextContent && textContent !== expectedTextContent) ||\n        isEllipsisActive(editableElement as HTMLElement)\n    ) {\n        // TODO: Testing will be done in the E2E.\n        const pseudoEditableField = generatePseudoEditableElement(\n            { editableElement: editableElement as HTMLElement },\n            { textContent: expectedFieldData }\n        );\n\n        (editableElement as HTMLElement).style.visibility = \"hidden\";\n\n        // set field type attribute to the pseudo editable field\n        // ensures proper keydown handling similar to the actual editable field\n        pseudoEditableField.setAttribute(\n            VISUAL_BUILDER_FIELD_TYPE_ATTRIBUTE_KEY,\n            fieldType\n        );\n        visualBuilderContainer.appendChild(pseudoEditableField);\n        actualEditableField = pseudoEditableField;\n\n        if (fieldType === FieldDataType.MULTILINE)\n            actualEditableField.addEventListener(\"paste\", pasteAsPlainText);\n\n        // we will unobserve this in hideOverlay\n        elements.resizeObserver.observe(pseudoEditableField);\n    } else if (elementComputedDisplay === \"inline\") {\n        // if the editable field is inline\n        const onInlineElementInput = throttle(() => {\n            const overlayWrapper = visualBuilderContainer.querySelector(\n                \".visual-builder__overlay__wrapper\"\n            ) as HTMLDivElement;\n            const focusedToolbar = visualBuilderContainer.querySelector(\n                \".visual-builder__focused-toolbar\"\n            ) as HTMLDivElement;\n            updateFocussedState({\n                editableElement: actualEditableField,\n                visualBuilderContainer,\n                overlayWrapper,\n                focusedToolbar,\n                resizeObserver,\n            });\n        }, 200);\n        actualEditableField.addEventListener(\"input\", onInlineElementInput);\n    }\n\n    actualEditableField.setAttribute(\"contenteditable\", \"true\");\n    actualEditableField.addEventListener(\"input\", handleFieldInput);\n    actualEditableField.addEventListener(\"keydown\", handleFieldKeyDown);\n    // focus on the contenteditable element to start accepting input\n    actualEditableField.focus();\n\n    return;\n}\n"],"mappings":";;;AAAA,SAAS,gBAAgB;AACzB,SAAS,qBAAqB;AAC9B;AAAA,EACI;AAAA,EACA;AAAA,OACG;AACP,SAAS,+CAA+C;AACxD,SAAS,6BAA6B;AACtC,SAAS,kBAAkB,0BAA0B;AACrD,SAAS,qBAA+C;AACxD,SAAS,2BAA2B;AACpC,SAAS,wBAAwB;AAE1B,SAAS,oBAAoB;AAAA,EAChC;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACJ,GAKG;AACC,QAAM,EAAE,wBAAwB,eAAe,IAAI;AACnD,MAAI,sBAAsB;AAE1B,gBAAc,yBAAyB,MAAM,kBACzC,qBAAqB;AAEzB,QAAM,yBACF,OAAO,iBAAiB,mBAAmB,EAAE;AAEjD,MAAI,cACC,gBAAgC,aACjC,gBAAgB,eAChB;AAEJ,MAAI,cAAc,cAAc,WAAW;AACvC,kBAAc,sBAAsB,mBAAmB;AACvD,wBAAoB,iBAAiB,SAAS,gBAAgB;AAAA,EAClE;AACA,QAAM,sBAAsB;AAC5B,MACK,uBAAuB,gBAAgB,uBACxC,iBAAiB,eAA8B,GACjD;AAEE,UAAM,sBAAsB;AAAA,MACxB,EAAE,gBAAgD;AAAA,MAClD,EAAE,aAAa,kBAAkB;AAAA,IACrC;AAEA,IAAC,gBAAgC,MAAM,aAAa;AAIpD,wBAAoB;AAAA,MAChB;AAAA,MACA;AAAA,IACJ;AACA,2BAAuB,YAAY,mBAAmB;AACtD,0BAAsB;AAEtB,QAAI,cAAc,cAAc;AAC5B,0BAAoB,iBAAiB,SAAS,gBAAgB;AAGlE,aAAS,eAAe,QAAQ,mBAAmB;AAAA,EACvD,WAAW,2BAA2B,UAAU;AAE5C,UAAM,uBAAuB,SAAS,MAAM;AACxC,YAAM,iBAAiB,uBAAuB;AAAA,QAC1C;AAAA,MACJ;AACA,YAAM,iBAAiB,uBAAuB;AAAA,QAC1C;AAAA,MACJ;AACA,0BAAoB;AAAA,QAChB,iBAAiB;AAAA,QACjB;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,MACJ,CAAC;AAAA,IACL,GAAG,GAAG;AACN,wBAAoB,iBAAiB,SAAS,oBAAoB;AAAA,EACtE;AAEA,sBAAoB,aAAa,mBAAmB,MAAM;AAC1D,sBAAoB,iBAAiB,SAAS,gBAAgB;AAC9D,sBAAoB,iBAAiB,WAAW,kBAAkB;AAElE,sBAAoB,MAAM;AAE1B;AACJ;","names":[]}
+{"version":3,"sources":["../../../../src/visualBuilder/utils/enableInlineEditing.ts"],"sourcesContent":["import { throttle } from \"lodash-es\";\nimport { VisualBuilder } from \"../index\";\nimport {\n    isEllipsisActive,\n    generatePseudoEditableElement,\n} from \"../generators/generatePseudoEditableField\";\nimport { VISUAL_BUILDER_FIELD_TYPE_ATTRIBUTE_KEY } from \"./constants\";\nimport { getMultilinePlaintext } from \"./getMultilinePlaintext\";\nimport { handleFieldInput, handleFieldKeyDown } from \"./handleFieldMouseDown\";\nimport { FieldDataType, VisualBuilderEditContext } from \"./types/index.types\";\nimport { updateFocussedState } from \"./updateFocussedState\";\nimport { pasteAsPlainText } from \"./pasteAsPlainText\";\n\nexport function enableInlineEditing({\n    expectedFieldData,\n    editableElement,\n    fieldType,\n    elements,\n}: {\n    expectedFieldData: any;\n    editableElement: HTMLElement;\n    fieldType: FieldDataType;\n    elements: VisualBuilderEditContext;\n}) {\n    const { visualBuilderContainer, resizeObserver } = elements;\n    let actualEditableField = editableElement as HTMLElement;\n\n    VisualBuilder.VisualBuilderGlobalState.value.focusFieldValue =\n        actualEditableField?.innerText;\n\n    const elementComputedDisplay =\n        window.getComputedStyle(actualEditableField).display;\n\n    \n    let textContent =\n        (editableElement as HTMLElement).innerText ||\n        editableElement.textContent ||\n        \"\";\n\n    if (fieldType === FieldDataType.MULTILINE) {\n        textContent = getMultilinePlaintext(actualEditableField);\n        actualEditableField.addEventListener(\"paste\", pasteAsPlainText);\n    }\n    const expectedTextContent = expectedFieldData;\n    \n    const isFieldLastEdited = document.querySelector(\"[data-cs-last-edited]\") === editableElement;\n    if (\n        (expectedTextContent && textContent !== expectedTextContent) ||\n        isEllipsisActive(editableElement as HTMLElement) ||\n        isFieldLastEdited\n    ) {\n        // TODO: Testing will be done in the E2E.\n        const pseudoEditableField = generatePseudoEditableElement(\n            { editableElement: editableElement as HTMLElement },\n            { textContent: expectedFieldData } \n        );\n\n        (editableElement as HTMLElement).style.visibility = \"hidden\";\n\n        // set field type attribute to the pseudo editable field\n        // ensures proper keydown handling similar to the actual editable field\n        pseudoEditableField.setAttribute(\n            VISUAL_BUILDER_FIELD_TYPE_ATTRIBUTE_KEY,\n            fieldType\n        );\n        visualBuilderContainer.appendChild(pseudoEditableField);\n        actualEditableField = pseudoEditableField;\n\n        if (fieldType === FieldDataType.MULTILINE)\n            actualEditableField.addEventListener(\"paste\", pasteAsPlainText);\n\n        // we will unobserve this in hideOverlay\n        elements.resizeObserver.observe(pseudoEditableField);\n    } else if (elementComputedDisplay === \"inline\") {\n        // if the editable field is inline\n        const onInlineElementInput = throttle(() => {\n            const overlayWrapper = visualBuilderContainer.querySelector(\n                \".visual-builder__overlay__wrapper\"\n            ) as HTMLDivElement;\n            const focusedToolbar = visualBuilderContainer.querySelector(\n                \".visual-builder__focused-toolbar\"\n            ) as HTMLDivElement;\n            updateFocussedState({\n                editableElement: actualEditableField,\n                visualBuilderContainer,\n                overlayWrapper,\n                focusedToolbar,\n                resizeObserver,\n            });\n        }, 200);\n        actualEditableField.addEventListener(\"input\", onInlineElementInput);\n    }\n\n    actualEditableField.setAttribute(\"contenteditable\", \"true\");\n    actualEditableField.addEventListener(\"input\", handleFieldInput);\n    actualEditableField.addEventListener(\"keydown\", handleFieldKeyDown);\n\n    editableElement.setAttribute(\"data-cs-last-edited\", \"true\");\n\n    // focus on the contenteditable element to start accepting input\n    actualEditableField.focus();\n\n    return;\n}\n"],"mappings":";;;AAAA,SAAS,gBAAgB;AACzB,SAAS,qBAAqB;AAC9B;AAAA,EACI;AAAA,EACA;AAAA,OACG;AACP,SAAS,+CAA+C;AACxD,SAAS,6BAA6B;AACtC,SAAS,kBAAkB,0BAA0B;AACrD,SAAS,qBAA+C;AACxD,SAAS,2BAA2B;AACpC,SAAS,wBAAwB;AAE1B,SAAS,oBAAoB;AAAA,EAChC;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACJ,GAKG;AACC,QAAM,EAAE,wBAAwB,eAAe,IAAI;AACnD,MAAI,sBAAsB;AAE1B,gBAAc,yBAAyB,MAAM,kBACzC,qBAAqB;AAEzB,QAAM,yBACF,OAAO,iBAAiB,mBAAmB,EAAE;AAGjD,MAAI,cACC,gBAAgC,aACjC,gBAAgB,eAChB;AAEJ,MAAI,cAAc,cAAc,WAAW;AACvC,kBAAc,sBAAsB,mBAAmB;AACvD,wBAAoB,iBAAiB,SAAS,gBAAgB;AAAA,EAClE;AACA,QAAM,sBAAsB;AAE5B,QAAM,oBAAoB,SAAS,cAAc,uBAAuB,MAAM;AAC9E,MACK,uBAAuB,gBAAgB,uBACxC,iBAAiB,eAA8B,KAC/C,mBACF;AAEE,UAAM,sBAAsB;AAAA,MACxB,EAAE,gBAAgD;AAAA,MAClD,EAAE,aAAa,kBAAkB;AAAA,IACrC;AAEA,IAAC,gBAAgC,MAAM,aAAa;AAIpD,wBAAoB;AAAA,MAChB;AAAA,MACA;AAAA,IACJ;AACA,2BAAuB,YAAY,mBAAmB;AACtD,0BAAsB;AAEtB,QAAI,cAAc,cAAc;AAC5B,0BAAoB,iBAAiB,SAAS,gBAAgB;AAGlE,aAAS,eAAe,QAAQ,mBAAmB;AAAA,EACvD,WAAW,2BAA2B,UAAU;AAE5C,UAAM,uBAAuB,SAAS,MAAM;AACxC,YAAM,iBAAiB,uBAAuB;AAAA,QAC1C;AAAA,MACJ;AACA,YAAM,iBAAiB,uBAAuB;AAAA,QAC1C;AAAA,MACJ;AACA,0BAAoB;AAAA,QAChB,iBAAiB;AAAA,QACjB;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,MACJ,CAAC;AAAA,IACL,GAAG,GAAG;AACN,wBAAoB,iBAAiB,SAAS,oBAAoB;AAAA,EACtE;AAEA,sBAAoB,aAAa,mBAAmB,MAAM;AAC1D,sBAAoB,iBAAiB,SAAS,gBAAgB;AAC9D,sBAAoB,iBAAiB,WAAW,kBAAkB;AAElE,kBAAgB,aAAa,uBAAuB,MAAM;AAG1D,sBAAoB,MAAM;AAE1B;AACJ;","names":[]}

package/dist/modern/visualBuilder/utils/handleFieldMouseDown.cjs

@@ -37,6 +37,11 @@ function handleFieldInput(e) {
   const fieldType = targetElement.getAttribute(
     import_constants.VISUAL_BUILDER_FIELD_TYPE_ATTRIBUTE_KEY
   );
+  const previousLastEditedElement = document.querySelector("[data-cs-last-edited]");
+  if (previousLastEditedElement !== targetElement) {
+    previousLastEditedElement?.removeAttribute("data-cs-last-edited");
+    targetElement.setAttribute("data-cs-last-edited", "true");
+  }
   if (event.type === "input" && import_constants.ALLOWED_INLINE_EDITABLE_FIELD.includes(fieldType)) {
     if (!import__.VisualBuilder.VisualBuilderGlobalState.value.focusFieldReceivedInput) {
       import__.VisualBuilder.VisualBuilderGlobalState.value.focusFieldReceivedInput = true;

package/dist/modern/visualBuilder/utils/handleFieldMouseDown.cjs.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/visualBuilder/utils/handleFieldMouseDown.ts"],"sourcesContent":["import { throttle } from \"lodash-es\";\nimport { sendFieldEvent } from \"../generators/generateOverlay\";\nimport {\n    ALLOWED_INLINE_EDITABLE_FIELD,\n    VISUAL_BUILDER_FIELD_TYPE_ATTRIBUTE_KEY,\n    numericInputRegex,\n} from \"./constants\";\nimport { FieldDataType } from \"./types/index.types\";\nimport { VisualBuilderPostMessageEvents } from \"./types/postMessage.types\";\nimport { insertSpaceAtCursor } from \"./insertSpaceAtCursor\";\nimport { VisualBuilder } from \"..\";\n\nexport function handleFieldInput(e: Event): void {\n    const event = e as InputEvent;\n    const targetElement = event.target as HTMLElement;\n    const fieldType = targetElement.getAttribute(\n        VISUAL_BUILDER_FIELD_TYPE_ATTRIBUTE_KEY\n    ) as FieldDataType | null;\n    if (\n        event.type === \"input\" &&\n        ALLOWED_INLINE_EDITABLE_FIELD.includes(fieldType as FieldDataType)\n    ) {\n        if (\n            !VisualBuilder.VisualBuilderGlobalState.value\n                .focusFieldReceivedInput\n        ) {\n            VisualBuilder.VisualBuilderGlobalState.value.focusFieldReceivedInput =\n                true;\n        }\n        throttledFieldSync();\n    }\n}\nconst throttledFieldSync = throttle(() => {\n    try {\n        const visualBuilderContainer = document.querySelector(\n            \".visual-builder__container\"\n        ) as HTMLElement;\n        if (!visualBuilderContainer) return;\n        sendFieldEvent({\n            visualBuilderContainer,\n            eventType: VisualBuilderPostMessageEvents.SYNC_FIELD,\n        });\n    } catch (error) {\n        console.error(\"Error in throttledFieldSync\", error);\n    }\n}, 300);\n\nexport function handleFieldKeyDown(e: Event): void {\n    const event = e as KeyboardEvent;\n    const targetElement = event.target as HTMLElement;\n    const fieldType = targetElement.getAttribute(\n        VISUAL_BUILDER_FIELD_TYPE_ATTRIBUTE_KEY\n    ) as FieldDataType | null;\n\n    if (\n        event\n            .composedPath()\n            .some(\n                (element) =>\n                    element instanceof Element && element.tagName === \"BUTTON\"\n            )\n    ) {\n        // custom space handling when a button is involved\n        handleKeyDownOnButton(event);\n    }\n    if (fieldType === FieldDataType.NUMBER) {\n        handleNumericFieldKeyDown(event);\n    } else if (fieldType === FieldDataType.SINGLELINE) {\n        handleSingleLineFieldKeyDown(event);\n    }\n}\n\n// spaces do not work inside a button content-editable\n// this adds a space and moves the cursor ahead, the\n// button press event is also prevented, finally syncs the field\nfunction handleKeyDownOnButton(e: KeyboardEvent) {\n    if (e.code === \"Space\" && e.target) {\n        e.preventDefault();\n        insertSpaceAtCursor(e.target as HTMLElement);\n        throttledFieldSync();\n    }\n}\n\nfunction handleSingleLineFieldKeyDown(e: KeyboardEvent) {\n    if (e.code === \"Enter\") {\n        e.preventDefault();\n    }\n}\n\nfunction handleNumericFieldKeyDown(event: KeyboardEvent): void {\n    const targetElement = event.target as HTMLElement;\n\n    const allowedKeys = [\n        \"Backspace\",\n        \"Tab\",\n        \"Enter\",\n        \"End\",\n        \"Home\",\n        \"ArrowLeft\",\n        \"ArrowRight\",\n        \"Delete\",\n    ];\n\n    if (\n        event.ctrlKey ||\n        event.metaKey ||\n        event.altKey ||\n        allowedKeys.includes(event.code)\n    ) {\n        // Allow Ctrl, Cmd, Alt, and special keys\n        return;\n    }\n\n    if (event.code.includes(\"Digit\")) {\n        return;\n    }\n\n    const nonNumericAllowedCharacters = [\"-\", \".\", \"e\", \"E\"];\n\n    if (!nonNumericAllowedCharacters.includes(event.key)) {\n        event.preventDefault();\n        return;\n    }\n\n    const selection = {\n        startOffset: window.getSelection()?.getRangeAt(0).startOffset || 0,\n        endOffset: window.getSelection()?.getRangeAt(0).endOffset || 0,\n    };\n\n    const existingInput = targetElement.textContent || \"\";\n    const currentOutputArr = existingInput.split(\"\");\n    currentOutputArr.splice(\n        selection.startOffset,\n        selection.endOffset - selection.startOffset,\n        event.key\n    );\n    const currentInput = currentOutputArr.join(\"\");\n\n    if (!numericInputRegex.test(currentInput)) {\n        event.preventDefault();\n    }\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,uBAAyB;AACzB,6BAA+B;AAC/B,uBAIO;AACP,mBAA8B;AAC9B,yBAA+C;AAC/C,iCAAoC;AACpC,eAA8B;AAEvB,SAAS,iBAAiB,GAAgB;AAC7C,QAAM,QAAQ;AACd,QAAM,gBAAgB,MAAM;AAC5B,QAAM,YAAY,cAAc;AAAA,IAC5B;AAAA,EACJ;AACA,MACI,MAAM,SAAS,WACf,+CAA8B,SAAS,SAA0B,GACnE;AACE,QACI,CAAC,uBAAc,yBAAyB,MACnC,yBACP;AACE,6BAAc,yBAAyB,MAAM,0BACzC;AAAA,IACR;AACA,uBAAmB;AAAA,EACvB;AACJ;AACA,IAAM,yBAAqB,2BAAS,MAAM;AACtC,MAAI;AACA,UAAM,yBAAyB,SAAS;AAAA,MACpC;AAAA,IACJ;AACA,QAAI,CAAC,uBAAwB;AAC7B,+CAAe;AAAA,MACX;AAAA,MACA,WAAW,kDAA+B;AAAA,IAC9C,CAAC;AAAA,EACL,SAAS,OAAO;AACZ,YAAQ,MAAM,+BAA+B,KAAK;AAAA,EACtD;AACJ,GAAG,GAAG;AAEC,SAAS,mBAAmB,GAAgB;AAC/C,QAAM,QAAQ;AACd,QAAM,gBAAgB,MAAM;AAC5B,QAAM,YAAY,cAAc;AAAA,IAC5B;AAAA,EACJ;AAEA,MACI,MACK,aAAa,EACb;AAAA,IACG,CAAC,YACG,mBAAmB,WAAW,QAAQ,YAAY;AAAA,EAC1D,GACN;AAEE,0BAAsB,KAAK;AAAA,EAC/B;AACA,MAAI,cAAc,2BAAc,QAAQ;AACpC,8BAA0B,KAAK;AAAA,EACnC,WAAW,cAAc,2BAAc,YAAY;AAC/C,iCAA6B,KAAK;AAAA,EACtC;AACJ;AAKA,SAAS,sBAAsB,GAAkB;AAC7C,MAAI,EAAE,SAAS,WAAW,EAAE,QAAQ;AAChC,MAAE,eAAe;AACjB,wDAAoB,EAAE,MAAqB;AAC3C,uBAAmB;AAAA,EACvB;AACJ;AAEA,SAAS,6BAA6B,GAAkB;AACpD,MAAI,EAAE,SAAS,SAAS;AACpB,MAAE,eAAe;AAAA,EACrB;AACJ;AAEA,SAAS,0BAA0B,OAA4B;AAC3D,QAAM,gBAAgB,MAAM;AAE5B,QAAM,cAAc;AAAA,IAChB;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACJ;AAEA,MACI,MAAM,WACN,MAAM,WACN,MAAM,UACN,YAAY,SAAS,MAAM,IAAI,GACjC;AAEE;AAAA,EACJ;AAEA,MAAI,MAAM,KAAK,SAAS,OAAO,GAAG;AAC9B;AAAA,EACJ;AAEA,QAAM,8BAA8B,CAAC,KAAK,KAAK,KAAK,GAAG;AAEvD,MAAI,CAAC,4BAA4B,SAAS,MAAM,GAAG,GAAG;AAClD,UAAM,eAAe;AACrB;AAAA,EACJ;AAEA,QAAM,YAAY;AAAA,IACd,aAAa,OAAO,aAAa,GAAG,WAAW,CAAC,EAAE,eAAe;AAAA,IACjE,WAAW,OAAO,aAAa,GAAG,WAAW,CAAC,EAAE,aAAa;AAAA,EACjE;AAEA,QAAM,gBAAgB,cAAc,eAAe;AACnD,QAAM,mBAAmB,cAAc,MAAM,EAAE;AAC/C,mBAAiB;AAAA,IACb,UAAU;AAAA,IACV,UAAU,YAAY,UAAU;AAAA,IAChC,MAAM;AAAA,EACV;AACA,QAAM,eAAe,iBAAiB,KAAK,EAAE;AAE7C,MAAI,CAAC,mCAAkB,KAAK,YAAY,GAAG;AACvC,UAAM,eAAe;AAAA,EACzB;AACJ;","names":[]}
+{"version":3,"sources":["../../../../src/visualBuilder/utils/handleFieldMouseDown.ts"],"sourcesContent":["import { throttle } from \"lodash-es\";\nimport { sendFieldEvent } from \"../generators/generateOverlay\";\nimport {\n    ALLOWED_INLINE_EDITABLE_FIELD,\n    VISUAL_BUILDER_FIELD_TYPE_ATTRIBUTE_KEY,\n    numericInputRegex,\n} from \"./constants\";\nimport { FieldDataType } from \"./types/index.types\";\nimport { VisualBuilderPostMessageEvents } from \"./types/postMessage.types\";\nimport { insertSpaceAtCursor } from \"./insertSpaceAtCursor\";\nimport { VisualBuilder } from \"..\";\n\nexport function handleFieldInput(e: Event): void {\n    const event = e as InputEvent;\n    const targetElement = event.target as HTMLElement;\n    const fieldType = targetElement.getAttribute(\n        VISUAL_BUILDER_FIELD_TYPE_ATTRIBUTE_KEY\n    ) as FieldDataType | null;\n\n    const previousLastEditedElement = document.querySelector(\"[data-cs-last-edited]\");\n    if (previousLastEditedElement !== targetElement) {\n        previousLastEditedElement?.removeAttribute(\"data-cs-last-edited\");\n        targetElement.setAttribute(\"data-cs-last-edited\", \"true\");\n    }\n    if (\n        event.type === \"input\" &&\n        ALLOWED_INLINE_EDITABLE_FIELD.includes(fieldType as FieldDataType)\n    ) {\n        if (\n            !VisualBuilder.VisualBuilderGlobalState.value\n                .focusFieldReceivedInput\n        ) {\n            VisualBuilder.VisualBuilderGlobalState.value.focusFieldReceivedInput =\n                true;\n        }\n        throttledFieldSync();\n    }\n}\nconst throttledFieldSync = throttle(() => {\n    try {\n        const visualBuilderContainer = document.querySelector(\n            \".visual-builder__container\"\n        ) as HTMLElement;\n        if (!visualBuilderContainer) return;\n        sendFieldEvent({\n            visualBuilderContainer,\n            eventType: VisualBuilderPostMessageEvents.SYNC_FIELD,\n        });\n    } catch (error) {\n        console.error(\"Error in throttledFieldSync\", error);\n    }\n}, 300);\n\nexport function handleFieldKeyDown(e: Event): void {\n    const event = e as KeyboardEvent;\n    const targetElement = event.target as HTMLElement;\n    const fieldType = targetElement.getAttribute(\n        VISUAL_BUILDER_FIELD_TYPE_ATTRIBUTE_KEY\n    ) as FieldDataType | null;\n\n    if (\n        event\n            .composedPath()\n            .some(\n                (element) =>\n                    element instanceof Element && element.tagName === \"BUTTON\"\n            )\n    ) {\n        // custom space handling when a button is involved\n        handleKeyDownOnButton(event);\n    }\n    if (fieldType === FieldDataType.NUMBER) {\n        handleNumericFieldKeyDown(event);\n    } else if (fieldType === FieldDataType.SINGLELINE) {\n        handleSingleLineFieldKeyDown(event);\n    }\n}\n\n// spaces do not work inside a button content-editable\n// this adds a space and moves the cursor ahead, the\n// button press event is also prevented, finally syncs the field\nfunction handleKeyDownOnButton(e: KeyboardEvent) {\n    if (e.code === \"Space\" && e.target) {\n        e.preventDefault();\n        insertSpaceAtCursor(e.target as HTMLElement);\n        throttledFieldSync();\n    }\n}\n\nfunction handleSingleLineFieldKeyDown(e: KeyboardEvent) {\n    if (e.code === \"Enter\") {\n        e.preventDefault();\n    }\n}\n\nfunction handleNumericFieldKeyDown(event: KeyboardEvent): void {\n    const targetElement = event.target as HTMLElement;\n\n    const allowedKeys = [\n        \"Backspace\",\n        \"Tab\",\n        \"Enter\",\n        \"End\",\n        \"Home\",\n        \"ArrowLeft\",\n        \"ArrowRight\",\n        \"Delete\",\n    ];\n\n    if (\n        event.ctrlKey ||\n        event.metaKey ||\n        event.altKey ||\n        allowedKeys.includes(event.code)\n    ) {\n        // Allow Ctrl, Cmd, Alt, and special keys\n        return;\n    }\n\n    if (event.code.includes(\"Digit\")) {\n        return;\n    }\n\n    const nonNumericAllowedCharacters = [\"-\", \".\", \"e\", \"E\"];\n\n    if (!nonNumericAllowedCharacters.includes(event.key)) {\n        event.preventDefault();\n        return;\n    }\n\n    const selection = {\n        startOffset: window.getSelection()?.getRangeAt(0).startOffset || 0,\n        endOffset: window.getSelection()?.getRangeAt(0).endOffset || 0,\n    };\n\n    const existingInput = targetElement.textContent || \"\";\n    const currentOutputArr = existingInput.split(\"\");\n    currentOutputArr.splice(\n        selection.startOffset,\n        selection.endOffset - selection.startOffset,\n        event.key\n    );\n    const currentInput = currentOutputArr.join(\"\");\n\n    if (!numericInputRegex.test(currentInput)) {\n        event.preventDefault();\n    }\n}\n"],"mappings":"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","names":[]}

package/dist/modern/visualBuilder/utils/handleFieldMouseDown.js

@@ -18,6 +18,11 @@ function handleFieldInput(e) {
   const fieldType = targetElement.getAttribute(
     VISUAL_BUILDER_FIELD_TYPE_ATTRIBUTE_KEY
   );
+  const previousLastEditedElement = document.querySelector("[data-cs-last-edited]");
+  if (previousLastEditedElement !== targetElement) {
+    previousLastEditedElement?.removeAttribute("data-cs-last-edited");
+    targetElement.setAttribute("data-cs-last-edited", "true");
+  }
   if (event.type === "input" && ALLOWED_INLINE_EDITABLE_FIELD.includes(fieldType)) {
     if (!VisualBuilder.VisualBuilderGlobalState.value.focusFieldReceivedInput) {
       VisualBuilder.VisualBuilderGlobalState.value.focusFieldReceivedInput = true;

package/dist/modern/visualBuilder/utils/handleFieldMouseDown.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/visualBuilder/utils/handleFieldMouseDown.ts"],"sourcesContent":["import { throttle } from \"lodash-es\";\nimport { sendFieldEvent } from \"../generators/generateOverlay\";\nimport {\n    ALLOWED_INLINE_EDITABLE_FIELD,\n    VISUAL_BUILDER_FIELD_TYPE_ATTRIBUTE_KEY,\n    numericInputRegex,\n} from \"./constants\";\nimport { FieldDataType } from \"./types/index.types\";\nimport { VisualBuilderPostMessageEvents } from \"./types/postMessage.types\";\nimport { insertSpaceAtCursor } from \"./insertSpaceAtCursor\";\nimport { VisualBuilder } from \"..\";\n\nexport function handleFieldInput(e: Event): void {\n    const event = e as InputEvent;\n    const targetElement = event.target as HTMLElement;\n    const fieldType = targetElement.getAttribute(\n        VISUAL_BUILDER_FIELD_TYPE_ATTRIBUTE_KEY\n    ) as FieldDataType | null;\n    if (\n        event.type === \"input\" &&\n        ALLOWED_INLINE_EDITABLE_FIELD.includes(fieldType as FieldDataType)\n    ) {\n        if (\n            !VisualBuilder.VisualBuilderGlobalState.value\n                .focusFieldReceivedInput\n        ) {\n            VisualBuilder.VisualBuilderGlobalState.value.focusFieldReceivedInput =\n                true;\n        }\n        throttledFieldSync();\n    }\n}\nconst throttledFieldSync = throttle(() => {\n    try {\n        const visualBuilderContainer = document.querySelector(\n            \".visual-builder__container\"\n        ) as HTMLElement;\n        if (!visualBuilderContainer) return;\n        sendFieldEvent({\n            visualBuilderContainer,\n            eventType: VisualBuilderPostMessageEvents.SYNC_FIELD,\n        });\n    } catch (error) {\n        console.error(\"Error in throttledFieldSync\", error);\n    }\n}, 300);\n\nexport function handleFieldKeyDown(e: Event): void {\n    const event = e as KeyboardEvent;\n    const targetElement = event.target as HTMLElement;\n    const fieldType = targetElement.getAttribute(\n        VISUAL_BUILDER_FIELD_TYPE_ATTRIBUTE_KEY\n    ) as FieldDataType | null;\n\n    if (\n        event\n            .composedPath()\n            .some(\n                (element) =>\n                    element instanceof Element && element.tagName === \"BUTTON\"\n            )\n    ) {\n        // custom space handling when a button is involved\n        handleKeyDownOnButton(event);\n    }\n    if (fieldType === FieldDataType.NUMBER) {\n        handleNumericFieldKeyDown(event);\n    } else if (fieldType === FieldDataType.SINGLELINE) {\n        handleSingleLineFieldKeyDown(event);\n    }\n}\n\n// spaces do not work inside a button content-editable\n// this adds a space and moves the cursor ahead, the\n// button press event is also prevented, finally syncs the field\nfunction handleKeyDownOnButton(e: KeyboardEvent) {\n    if (e.code === \"Space\" && e.target) {\n        e.preventDefault();\n        insertSpaceAtCursor(e.target as HTMLElement);\n        throttledFieldSync();\n    }\n}\n\nfunction handleSingleLineFieldKeyDown(e: KeyboardEvent) {\n    if (e.code === \"Enter\") {\n        e.preventDefault();\n    }\n}\n\nfunction handleNumericFieldKeyDown(event: KeyboardEvent): void {\n    const targetElement = event.target as HTMLElement;\n\n    const allowedKeys = [\n        \"Backspace\",\n        \"Tab\",\n        \"Enter\",\n        \"End\",\n        \"Home\",\n        \"ArrowLeft\",\n        \"ArrowRight\",\n        \"Delete\",\n    ];\n\n    if (\n        event.ctrlKey ||\n        event.metaKey ||\n        event.altKey ||\n        allowedKeys.includes(event.code)\n    ) {\n        // Allow Ctrl, Cmd, Alt, and special keys\n        return;\n    }\n\n    if (event.code.includes(\"Digit\")) {\n        return;\n    }\n\n    const nonNumericAllowedCharacters = [\"-\", \".\", \"e\", \"E\"];\n\n    if (!nonNumericAllowedCharacters.includes(event.key)) {\n        event.preventDefault();\n        return;\n    }\n\n    const selection = {\n        startOffset: window.getSelection()?.getRangeAt(0).startOffset || 0,\n        endOffset: window.getSelection()?.getRangeAt(0).endOffset || 0,\n    };\n\n    const existingInput = targetElement.textContent || \"\";\n    const currentOutputArr = existingInput.split(\"\");\n    currentOutputArr.splice(\n        selection.startOffset,\n        selection.endOffset - selection.startOffset,\n        event.key\n    );\n    const currentInput = currentOutputArr.join(\"\");\n\n    if (!numericInputRegex.test(currentInput)) {\n        event.preventDefault();\n    }\n}\n"],"mappings":";;;AAAA,SAAS,gBAAgB;AACzB,SAAS,sBAAsB;AAC/B;AAAA,EACI;AAAA,EACA;AAAA,EACA;AAAA,OACG;AACP,SAAS,qBAAqB;AAC9B,SAAS,sCAAsC;AAC/C,SAAS,2BAA2B;AACpC,SAAS,qBAAqB;AAEvB,SAAS,iBAAiB,GAAgB;AAC7C,QAAM,QAAQ;AACd,QAAM,gBAAgB,MAAM;AAC5B,QAAM,YAAY,cAAc;AAAA,IAC5B;AAAA,EACJ;AACA,MACI,MAAM,SAAS,WACf,8BAA8B,SAAS,SAA0B,GACnE;AACE,QACI,CAAC,cAAc,yBAAyB,MACnC,yBACP;AACE,oBAAc,yBAAyB,MAAM,0BACzC;AAAA,IACR;AACA,uBAAmB;AAAA,EACvB;AACJ;AACA,IAAM,qBAAqB,SAAS,MAAM;AACtC,MAAI;AACA,UAAM,yBAAyB,SAAS;AAAA,MACpC;AAAA,IACJ;AACA,QAAI,CAAC,uBAAwB;AAC7B,mBAAe;AAAA,MACX;AAAA,MACA,WAAW,+BAA+B;AAAA,IAC9C,CAAC;AAAA,EACL,SAAS,OAAO;AACZ,YAAQ,MAAM,+BAA+B,KAAK;AAAA,EACtD;AACJ,GAAG,GAAG;AAEC,SAAS,mBAAmB,GAAgB;AAC/C,QAAM,QAAQ;AACd,QAAM,gBAAgB,MAAM;AAC5B,QAAM,YAAY,cAAc;AAAA,IAC5B;AAAA,EACJ;AAEA,MACI,MACK,aAAa,EACb;AAAA,IACG,CAAC,YACG,mBAAmB,WAAW,QAAQ,YAAY;AAAA,EAC1D,GACN;AAEE,0BAAsB,KAAK;AAAA,EAC/B;AACA,MAAI,cAAc,cAAc,QAAQ;AACpC,8BAA0B,KAAK;AAAA,EACnC,WAAW,cAAc,cAAc,YAAY;AAC/C,iCAA6B,KAAK;AAAA,EACtC;AACJ;AAKA,SAAS,sBAAsB,GAAkB;AAC7C,MAAI,EAAE,SAAS,WAAW,EAAE,QAAQ;AAChC,MAAE,eAAe;AACjB,wBAAoB,EAAE,MAAqB;AAC3C,uBAAmB;AAAA,EACvB;AACJ;AAEA,SAAS,6BAA6B,GAAkB;AACpD,MAAI,EAAE,SAAS,SAAS;AACpB,MAAE,eAAe;AAAA,EACrB;AACJ;AAEA,SAAS,0BAA0B,OAA4B;AAC3D,QAAM,gBAAgB,MAAM;AAE5B,QAAM,cAAc;AAAA,IAChB;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACJ;AAEA,MACI,MAAM,WACN,MAAM,WACN,MAAM,UACN,YAAY,SAAS,MAAM,IAAI,GACjC;AAEE;AAAA,EACJ;AAEA,MAAI,MAAM,KAAK,SAAS,OAAO,GAAG;AAC9B;AAAA,EACJ;AAEA,QAAM,8BAA8B,CAAC,KAAK,KAAK,KAAK,GAAG;AAEvD,MAAI,CAAC,4BAA4B,SAAS,MAAM,GAAG,GAAG;AAClD,UAAM,eAAe;AACrB;AAAA,EACJ;AAEA,QAAM,YAAY;AAAA,IACd,aAAa,OAAO,aAAa,GAAG,WAAW,CAAC,EAAE,eAAe;AAAA,IACjE,WAAW,OAAO,aAAa,GAAG,WAAW,CAAC,EAAE,aAAa;AAAA,EACjE;AAEA,QAAM,gBAAgB,cAAc,eAAe;AACnD,QAAM,mBAAmB,cAAc,MAAM,EAAE;AAC/C,mBAAiB;AAAA,IACb,UAAU;AAAA,IACV,UAAU,YAAY,UAAU;AAAA,IAChC,MAAM;AAAA,EACV;AACA,QAAM,eAAe,iBAAiB,KAAK,EAAE;AAE7C,MAAI,CAAC,kBAAkB,KAAK,YAAY,GAAG;AACvC,UAAM,eAAe;AAAA,EACzB;AACJ;","names":[]}
+{"version":3,"sources":["../../../../src/visualBuilder/utils/handleFieldMouseDown.ts"],"sourcesContent":["import { throttle } from \"lodash-es\";\nimport { sendFieldEvent } from \"../generators/generateOverlay\";\nimport {\n    ALLOWED_INLINE_EDITABLE_FIELD,\n    VISUAL_BUILDER_FIELD_TYPE_ATTRIBUTE_KEY,\n    numericInputRegex,\n} from \"./constants\";\nimport { FieldDataType } from \"./types/index.types\";\nimport { VisualBuilderPostMessageEvents } from \"./types/postMessage.types\";\nimport { insertSpaceAtCursor } from \"./insertSpaceAtCursor\";\nimport { VisualBuilder } from \"..\";\n\nexport function handleFieldInput(e: Event): void {\n    const event = e as InputEvent;\n    const targetElement = event.target as HTMLElement;\n    const fieldType = targetElement.getAttribute(\n        VISUAL_BUILDER_FIELD_TYPE_ATTRIBUTE_KEY\n    ) as FieldDataType | null;\n\n    const previousLastEditedElement = document.querySelector(\"[data-cs-last-edited]\");\n    if (previousLastEditedElement !== targetElement) {\n        previousLastEditedElement?.removeAttribute(\"data-cs-last-edited\");\n        targetElement.setAttribute(\"data-cs-last-edited\", \"true\");\n    }\n    if (\n        event.type === \"input\" &&\n        ALLOWED_INLINE_EDITABLE_FIELD.includes(fieldType as FieldDataType)\n    ) {\n        if (\n            !VisualBuilder.VisualBuilderGlobalState.value\n                .focusFieldReceivedInput\n        ) {\n            VisualBuilder.VisualBuilderGlobalState.value.focusFieldReceivedInput =\n                true;\n        }\n        throttledFieldSync();\n    }\n}\nconst throttledFieldSync = throttle(() => {\n    try {\n        const visualBuilderContainer = document.querySelector(\n            \".visual-builder__container\"\n        ) as HTMLElement;\n        if (!visualBuilderContainer) return;\n        sendFieldEvent({\n            visualBuilderContainer,\n            eventType: VisualBuilderPostMessageEvents.SYNC_FIELD,\n        });\n    } catch (error) {\n        console.error(\"Error in throttledFieldSync\", error);\n    }\n}, 300);\n\nexport function handleFieldKeyDown(e: Event): void {\n    const event = e as KeyboardEvent;\n    const targetElement = event.target as HTMLElement;\n    const fieldType = targetElement.getAttribute(\n        VISUAL_BUILDER_FIELD_TYPE_ATTRIBUTE_KEY\n    ) as FieldDataType | null;\n\n    if (\n        event\n            .composedPath()\n            .some(\n                (element) =>\n                    element instanceof Element && element.tagName === \"BUTTON\"\n            )\n    ) {\n        // custom space handling when a button is involved\n        handleKeyDownOnButton(event);\n    }\n    if (fieldType === FieldDataType.NUMBER) {\n        handleNumericFieldKeyDown(event);\n    } else if (fieldType === FieldDataType.SINGLELINE) {\n        handleSingleLineFieldKeyDown(event);\n    }\n}\n\n// spaces do not work inside a button content-editable\n// this adds a space and moves the cursor ahead, the\n// button press event is also prevented, finally syncs the field\nfunction handleKeyDownOnButton(e: KeyboardEvent) {\n    if (e.code === \"Space\" && e.target) {\n        e.preventDefault();\n        insertSpaceAtCursor(e.target as HTMLElement);\n        throttledFieldSync();\n    }\n}\n\nfunction handleSingleLineFieldKeyDown(e: KeyboardEvent) {\n    if (e.code === \"Enter\") {\n        e.preventDefault();\n    }\n}\n\nfunction handleNumericFieldKeyDown(event: KeyboardEvent): void {\n    const targetElement = event.target as HTMLElement;\n\n    const allowedKeys = [\n        \"Backspace\",\n        \"Tab\",\n        \"Enter\",\n        \"End\",\n        \"Home\",\n        \"ArrowLeft\",\n        \"ArrowRight\",\n        \"Delete\",\n    ];\n\n    if (\n        event.ctrlKey ||\n        event.metaKey ||\n        event.altKey ||\n        allowedKeys.includes(event.code)\n    ) {\n        // Allow Ctrl, Cmd, Alt, and special keys\n        return;\n    }\n\n    if (event.code.includes(\"Digit\")) {\n        return;\n    }\n\n    const nonNumericAllowedCharacters = [\"-\", \".\", \"e\", \"E\"];\n\n    if (!nonNumericAllowedCharacters.includes(event.key)) {\n        event.preventDefault();\n        return;\n    }\n\n    const selection = {\n        startOffset: window.getSelection()?.getRangeAt(0).startOffset || 0,\n        endOffset: window.getSelection()?.getRangeAt(0).endOffset || 0,\n    };\n\n    const existingInput = targetElement.textContent || \"\";\n    const currentOutputArr = existingInput.split(\"\");\n    currentOutputArr.splice(\n        selection.startOffset,\n        selection.endOffset - selection.startOffset,\n        event.key\n    );\n    const currentInput = currentOutputArr.join(\"\");\n\n    if (!numericInputRegex.test(currentInput)) {\n        event.preventDefault();\n    }\n}\n"],"mappings":"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","names":[]}

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@contentstack/live-preview-utils",
-    "version": "4.0.0",
+    "version": "4.0.2",
     "description": "Contentstack provides the Live Preview SDK to establish a communication channel between the various Contentstack SDKs and your website, transmitting  live changes to the preview pane.",
     "type": "module",
     "types": "dist/legacy/index.d.ts",
@@ -56,7 +56,6 @@
         "@types/mustache": "^4.2.2",
         "@types/react": "^18.2.57",
         "@types/react-dom": "^18.2.19",
-        "@types/ssri": "^7.1.5",
         "@types/uuid": "^8.3.1",
         "@vitest/coverage-v8": "^2.1.2",
         "@vitest/ui": "^2.1.2",
@@ -71,7 +70,6 @@
         "jsdom": "^25.0.0",
         "prettier": "^3.3.3",
         "prettier-eslint": "^15.0.1",
-        "ssri": "^11.0.0",
         "ts-node": "^10.9.2",
         "tsc": "^2.0.4",
         "tsup": "^8.0.1",