@contentstack/live-preview-utils 3.0.0 → 3.0.1

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

@@ -10,7 +10,7 @@ import {
   getDOMEditStack
 } from "../utils/getCsDataOfElement.js";
 import { appendFocusedToolbar } from "../generators/generateToolbar.js";
-import { addFocusOverlay } from "../generators/generateOverlay.js";
+import { addFocusOverlay, hideOverlay } from "../generators/generateOverlay.js";
 import visualBuilderPostMessage from "../utils/visualBuilderPostMessage.js";
 import { VisualBuilderPostMessageEvents } from "../utils/types/postMessage.types.js";
 import { VisualBuilder } from "../index.js";
@@ -29,7 +29,7 @@ function addOverlay(params) {
 function addFocusedToolbar(params) {
   const { editableElement } = params.eventDetails;
   if (!editableElement || !params.focusedToolbar) return;
-  appendFocusedToolbar(params.eventDetails, params.focusedToolbar);
+  appendFocusedToolbar(params.eventDetails, params.focusedToolbar, params.hideOverlay);
 }
 async function handleBuilderInteraction(params) {
   var _a, _b;
@@ -76,7 +76,15 @@ async function handleBuilderInteraction(params) {
   });
   addFocusedToolbar({
     eventDetails,
-    focusedToolbar: params.focusedToolbar
+    focusedToolbar: params.focusedToolbar,
+    hideOverlay: () => {
+      hideOverlay({
+        visualBuilderContainer: params.visualBuilderContainer,
+        visualBuilderOverlayWrapper: params.overlayWrapper,
+        focusedToolbar: params.focusedToolbar,
+        resizeObserver: params.resizeObserver
+      });
+    }
   });
   const { content_type_uid, fieldPath, cslpValue } = fieldMetadata;
   toggleHighlightedCommentIconDisplay(cslpValue, false);

package/dist/legacy/visualBuilder/listeners/mouseClick.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/visualBuilder/listeners/mouseClick.ts"],"sourcesContent":["import {\n    cleanIndividualFieldResidual,\n    handleIndividualFields,\n} from \"../utils/handleIndividualFields\";\n\nimport {\n    getCsDataOfElement,\n    getDOMEditStack,\n} from \"../utils/getCsDataOfElement\";\n\nimport { appendFocusedToolbar } from \"../generators/generateToolbar\";\n\nimport { addFocusOverlay, hideOverlay } from \"../generators/generateOverlay\";\n\nimport visualBuilderPostMessage from \"../utils/visualBuilderPostMessage\";\n\nimport { VisualBuilderPostMessageEvents } from \"../utils/types/postMessage.types\";\n\nimport { VisualBuilder } from \"..\";\nimport { FieldSchemaMap } from \"../utils/fieldSchemaMap\";\nimport { isFieldDisabled } from \"../utils/isFieldDisabled\";\nimport EventListenerHandlerParams from \"./types\";\nimport { toggleHighlightedCommentIconDisplay } from \"../generators/generateHighlightedComment\";\n\ntype HandleBuilderInteractionParams = Omit<\n    EventListenerHandlerParams,\n    \"eventDetails\" | \"customCursor\"\n>;\n\ntype AddFocusOverlayParams = Pick<\n    EventListenerHandlerParams,\n    \"overlayWrapper\" | \"resizeObserver\"\n> & { editableElement: Element; isFieldDisabled?: boolean };\n\ntype AddFocusedToolbarParams = Pick<\n    EventListenerHandlerParams,\n    \"eventDetails\" | \"focusedToolbar\"\n>;\n\nfunction addOverlay(params: AddFocusOverlayParams) {\n    if (!params.overlayWrapper || !params.editableElement) return;\n\n    addFocusOverlay(\n        params.editableElement,\n        params.overlayWrapper,\n        params.isFieldDisabled\n    );\n    params.resizeObserver.observe(params.editableElement);\n}\n\nexport function addFocusedToolbar(params: AddFocusedToolbarParams): void {\n    const { editableElement } = params.eventDetails;\n\n    if (!editableElement || !params.focusedToolbar) return;\n\n    appendFocusedToolbar(params.eventDetails, params.focusedToolbar);\n}\n\nasync function handleBuilderInteraction(\n    params: HandleBuilderInteractionParams\n): Promise<void> {\n    const eventTarget = params.event.target as HTMLElement | null;\n    const isAnchorElement = eventTarget instanceof HTMLAnchorElement;\n    const elementHasCslp =\n        eventTarget &&\n        (eventTarget.hasAttribute(\"data-cslp\") ||\n            eventTarget.closest(\"[data-cslp]\"));\n\n    // prevent default behavior for anchor elements and elements with cslp attribute\n    if (\n        isAnchorElement ||\n        (elementHasCslp && !eventTarget.closest(\".visual-builder__empty-block\"))\n    ) {\n        params.event.preventDefault();\n        params.event.stopPropagation();\n    }\n\n    const eventDetails = getCsDataOfElement(params.event);\n    visualBuilderPostMessage\n        ?.send(VisualBuilderPostMessageEvents.MOUSE_CLICK, {\n            cslpData: eventDetails?.cslpData,\n            fieldMetadata: eventDetails?.fieldMetadata,\n        })\n        .catch((err) => {\n            console.warn(\"Error while sending post message\", err);\n        });\n    if (\n        !eventDetails ||\n        !params.overlayWrapper ||\n        !params.visualBuilderContainer\n    ) {\n        return;\n    }\n    const { editableElement, fieldMetadata } = eventDetails;\n\n    if (\n        VisualBuilder.VisualBuilderGlobalState.value\n            .previousSelectedEditableDOM &&\n        VisualBuilder.VisualBuilderGlobalState.value\n            .previousSelectedEditableDOM !== editableElement\n    ) {\n        cleanIndividualFieldResidual({\n            overlayWrapper: params.overlayWrapper,\n            visualBuilderContainer: params.visualBuilderContainer,\n            focusedToolbar: params.focusedToolbar,\n            resizeObserver: params.resizeObserver,\n        });\n    }\n\n    // if the selected element is our empty block element, return\n    if (\n        editableElement.classList.contains(\n            \"visual-builder__empty-block-parent\"\n        ) ||\n        editableElement.classList.contains(\"visual-builder__empty-block\")\n    ) {\n        return;\n    }\n\n    // when previous and current selected element is same, return.\n    // this also avoids inserting psuedo-editable field (field data is\n    // not equal to text content in DOM) when performing mouse\n    // selections in the content editable\n    const previousSelectedElement =\n        VisualBuilder.VisualBuilderGlobalState.value\n            .previousSelectedEditableDOM;\n    if (\n        previousSelectedElement &&\n        previousSelectedElement === editableElement\n    ) {\n        return;\n    }\n\n    VisualBuilder.VisualBuilderGlobalState.value.previousSelectedEditableDOM =\n        editableElement;\n\n    addOverlay({\n        overlayWrapper: params.overlayWrapper,\n        resizeObserver: params.resizeObserver,\n        editableElement: editableElement,\n    });\n\n    addFocusedToolbar({\n        eventDetails: eventDetails,\n        focusedToolbar: params.focusedToolbar,\n    });\n\n    const { content_type_uid, fieldPath, cslpValue } = fieldMetadata;\n\n    toggleHighlightedCommentIconDisplay(cslpValue, false);\n\n    const fieldSchema = await FieldSchemaMap.getFieldSchema(\n        content_type_uid,\n        fieldPath\n    );\n\n    if (fieldSchema) {\n        // after field schema is available re-add disabled overlay\n        const { isDisabled } = isFieldDisabled(fieldSchema, eventDetails);\n        if (isDisabled) {\n            addOverlay({\n                overlayWrapper: params.overlayWrapper,\n                resizeObserver: params.resizeObserver,\n                editableElement: editableElement,\n                isFieldDisabled: true,\n            });\n        }\n    }\n\n    // This is most probably redundant code, as the handleIndividualFields function\n    // takes care of this\n    // TODO: Remove this\n    // if (\n    //     fieldSchema.data_type === \"block\" ||\n    //     fieldSchema.multiple ||\n    //     (fieldSchema.data_type === \"reference\" &&\n    //         // @ts-ignore\n    //         fieldSchema.field_metadata.ref_multiple)\n    // ) {\n    //     handleAddButtonsForMultiple(eventDetails, {\n    //         editableElement: editableElement,\n    //         visualBuilderContainer: params.visualBuilderContainer,\n    //         resizeObserver: params.resizeObserver,\n    //     });\n    // } else {\n    //     removeAddInstanceButtons({\n    //         eventTarget: params.event.target,\n    //         visualBuilderContainer: params.visualBuilderContainer,\n    //         overlayWrapper: params.overlayWrapper,\n    //     });\n    // }\n    visualBuilderPostMessage?.send(VisualBuilderPostMessageEvents.FOCUS_FIELD, {\n        DOMEditStack: getDOMEditStack(editableElement),\n    });\n\n    await handleIndividualFields(eventDetails, {\n        visualBuilderContainer: params.visualBuilderContainer,\n        resizeObserver: params.resizeObserver,\n        lastEditedField: previousSelectedElement,\n    });\n}\n\nexport default handleBuilderInteraction;\n"],"mappings":"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","names":[]}
+{"version":3,"sources":["../../../../src/visualBuilder/listeners/mouseClick.ts"],"sourcesContent":["import {\n    cleanIndividualFieldResidual,\n    handleIndividualFields,\n} from \"../utils/handleIndividualFields\";\n\nimport {\n    getCsDataOfElement,\n    getDOMEditStack,\n} from \"../utils/getCsDataOfElement\";\n\nimport { appendFocusedToolbar } from \"../generators/generateToolbar\";\n\nimport { addFocusOverlay, hideOverlay } from \"../generators/generateOverlay\";\n\nimport visualBuilderPostMessage from \"../utils/visualBuilderPostMessage\";\n\nimport { VisualBuilderPostMessageEvents } from \"../utils/types/postMessage.types\";\n\nimport { VisualBuilder } from \"..\";\nimport { FieldSchemaMap } from \"../utils/fieldSchemaMap\";\nimport { isFieldDisabled } from \"../utils/isFieldDisabled\";\nimport EventListenerHandlerParams from \"./types\";\nimport { toggleHighlightedCommentIconDisplay } from \"../generators/generateHighlightedComment\";\n\ntype HandleBuilderInteractionParams = Omit<\n    EventListenerHandlerParams,\n    \"eventDetails\" | \"customCursor\"\n>;\n\ntype AddFocusOverlayParams = Pick<\n    EventListenerHandlerParams,\n    \"overlayWrapper\" | \"resizeObserver\"\n> & { editableElement: Element; isFieldDisabled?: boolean };\n\ntype AddFocusedToolbarParams = Pick<\n    EventListenerHandlerParams,\n    \"eventDetails\" | \"focusedToolbar\"\n> & { hideOverlay: () => void };\n\nfunction addOverlay(params: AddFocusOverlayParams) {\n    if (!params.overlayWrapper || !params.editableElement) return;\n\n    addFocusOverlay(\n        params.editableElement,\n        params.overlayWrapper,\n        params.isFieldDisabled\n    );\n    params.resizeObserver.observe(params.editableElement);\n}\n\nexport function addFocusedToolbar(params: AddFocusedToolbarParams): void {\n    const { editableElement } = params.eventDetails;\n\n    if (!editableElement || !params.focusedToolbar) return;\n\n    appendFocusedToolbar(params.eventDetails, params.focusedToolbar, params.hideOverlay);\n}\n\nasync function handleBuilderInteraction(\n    params: HandleBuilderInteractionParams\n): Promise<void> {\n    const eventTarget = params.event.target as HTMLElement | null;\n    const isAnchorElement = eventTarget instanceof HTMLAnchorElement;\n    const elementHasCslp =\n        eventTarget &&\n        (eventTarget.hasAttribute(\"data-cslp\") ||\n            eventTarget.closest(\"[data-cslp]\"));\n\n    // prevent default behavior for anchor elements and elements with cslp attribute\n    if (\n        isAnchorElement ||\n        (elementHasCslp && !eventTarget.closest(\".visual-builder__empty-block\"))\n    ) {\n        params.event.preventDefault();\n        params.event.stopPropagation();\n    }\n\n    const eventDetails = getCsDataOfElement(params.event);\n    visualBuilderPostMessage\n        ?.send(VisualBuilderPostMessageEvents.MOUSE_CLICK, {\n            cslpData: eventDetails?.cslpData,\n            fieldMetadata: eventDetails?.fieldMetadata,\n        })\n        .catch((err) => {\n            console.warn(\"Error while sending post message\", err);\n        });\n    if (\n        !eventDetails ||\n        !params.overlayWrapper ||\n        !params.visualBuilderContainer\n    ) {\n        return;\n    }\n    const { editableElement, fieldMetadata } = eventDetails;\n\n    if (\n        VisualBuilder.VisualBuilderGlobalState.value\n            .previousSelectedEditableDOM &&\n        VisualBuilder.VisualBuilderGlobalState.value\n            .previousSelectedEditableDOM !== editableElement\n    ) {\n        cleanIndividualFieldResidual({\n            overlayWrapper: params.overlayWrapper,\n            visualBuilderContainer: params.visualBuilderContainer,\n            focusedToolbar: params.focusedToolbar,\n            resizeObserver: params.resizeObserver,\n        });\n    }\n\n    // if the selected element is our empty block element, return\n    if (\n        editableElement.classList.contains(\n            \"visual-builder__empty-block-parent\"\n        ) ||\n        editableElement.classList.contains(\"visual-builder__empty-block\")\n    ) {\n        return;\n    }\n\n    // when previous and current selected element is same, return.\n    // this also avoids inserting psuedo-editable field (field data is\n    // not equal to text content in DOM) when performing mouse\n    // selections in the content editable\n    const previousSelectedElement =\n        VisualBuilder.VisualBuilderGlobalState.value\n            .previousSelectedEditableDOM;\n    if (\n        previousSelectedElement &&\n        previousSelectedElement === editableElement\n    ) {\n        return;\n    }\n\n    VisualBuilder.VisualBuilderGlobalState.value.previousSelectedEditableDOM =\n        editableElement;\n\n    addOverlay({\n        overlayWrapper: params.overlayWrapper,\n        resizeObserver: params.resizeObserver,\n        editableElement: editableElement,\n    });\n\n    addFocusedToolbar({\n        eventDetails: eventDetails,\n        focusedToolbar: params.focusedToolbar,\n        hideOverlay: () => {\n            hideOverlay({\n                visualBuilderContainer: params.visualBuilderContainer,\n                visualBuilderOverlayWrapper: params.overlayWrapper,\n                focusedToolbar: params.focusedToolbar,\n                resizeObserver: params.resizeObserver,\n            });\n        }\n    });\n\n    const { content_type_uid, fieldPath, cslpValue } = fieldMetadata;\n\n    toggleHighlightedCommentIconDisplay(cslpValue, false);\n\n    const fieldSchema = await FieldSchemaMap.getFieldSchema(\n        content_type_uid,\n        fieldPath\n    );\n\n    if (fieldSchema) {\n        // after field schema is available re-add disabled overlay\n        const { isDisabled } = isFieldDisabled(fieldSchema, eventDetails);\n        if (isDisabled) {\n            addOverlay({\n                overlayWrapper: params.overlayWrapper,\n                resizeObserver: params.resizeObserver,\n                editableElement: editableElement,\n                isFieldDisabled: true,\n            });\n        }\n    }\n\n    // This is most probably redundant code, as the handleIndividualFields function\n    // takes care of this\n    // TODO: Remove this\n    // if (\n    //     fieldSchema.data_type === \"block\" ||\n    //     fieldSchema.multiple ||\n    //     (fieldSchema.data_type === \"reference\" &&\n    //         // @ts-ignore\n    //         fieldSchema.field_metadata.ref_multiple)\n    // ) {\n    //     handleAddButtonsForMultiple(eventDetails, {\n    //         editableElement: editableElement,\n    //         visualBuilderContainer: params.visualBuilderContainer,\n    //         resizeObserver: params.resizeObserver,\n    //     });\n    // } else {\n    //     removeAddInstanceButtons({\n    //         eventTarget: params.event.target,\n    //         visualBuilderContainer: params.visualBuilderContainer,\n    //         overlayWrapper: params.overlayWrapper,\n    //     });\n    // }\n    visualBuilderPostMessage?.send(VisualBuilderPostMessageEvents.FOCUS_FIELD, {\n        DOMEditStack: getDOMEditStack(editableElement),\n    });\n\n    await handleIndividualFields(eventDetails, {\n        visualBuilderContainer: params.visualBuilderContainer,\n        resizeObserver: params.resizeObserver,\n        lastEditedField: previousSelectedElement,\n    });\n}\n\nexport default handleBuilderInteraction;\n"],"mappings":"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","names":[]}

package/dist/legacy/visualBuilder/utils/getPsuedoEditableStylesElement.cjs

@@ -0,0 +1,56 @@
+"use strict";
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/visualBuilder/utils/getPsuedoEditableStylesElement.ts
+var getPsuedoEditableStylesElement_exports = {};
+__export(getPsuedoEditableStylesElement_exports, {
+  getPsuedoEditableElementStyles: () => getPsuedoEditableElementStyles
+});
+module.exports = __toCommonJS(getPsuedoEditableStylesElement_exports);
+var import_getCamelCaseStyles = __toESM(require("./getCamelCaseStyles.cjs"), 1);
+var import_getStyleOfAnElement = __toESM(require("./getStyleOfAnElement.cjs"), 1);
+function getPsuedoEditableElementStyles(psuedoEditableElement, camelCase) {
+  let styles = (0, import_getStyleOfAnElement.default)(psuedoEditableElement);
+  if (camelCase) {
+    styles = (0, import_getCamelCaseStyles.default)(styles);
+  }
+  const rect = psuedoEditableElement.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";
+  return styles;
+}
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  getPsuedoEditableElementStyles
+});
+//# sourceMappingURL=getPsuedoEditableStylesElement.cjs.map

package/dist/legacy/visualBuilder/utils/getPsuedoEditableStylesElement.cjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../src/visualBuilder/utils/getPsuedoEditableStylesElement.ts"],"sourcesContent":["import getCamelCaseStyles from \"./getCamelCaseStyles\";\nimport getStyleOfAnElement from \"./getStyleOfAnElement\";\n\nexport function getPsuedoEditableElementStyles(\n    psuedoEditableElement: HTMLElement,\n    camelCase?: boolean\n): { [key: string]: string } {\n    let styles = getStyleOfAnElement(psuedoEditableElement);\n    if (camelCase) {\n        styles = getCamelCaseStyles(styles);\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 = psuedoEditableElement.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 styles;\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,gCAA+B;AAC/B,iCAAgC;AAEzB,SAAS,+BACZ,uBACA,WACyB;AACzB,MAAI,aAAS,2BAAAA,SAAoB,qBAAqB;AACtD,MAAI,WAAW;AACX,iBAAS,0BAAAC,SAAmB,MAAM;AAAA,EACtC;AAGA,QAAM,OAAO,sBAAsB,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,SAAO;AACX;","names":["getStyleOfAnElement","getCamelCaseStyles"]}

package/dist/legacy/visualBuilder/utils/getPsuedoEditableStylesElement.d.cts

@@ -0,0 +1,5 @@
+declare function getPsuedoEditableElementStyles(psuedoEditableElement: HTMLElement, camelCase?: boolean): {
+    [key: string]: string;
+};
+
+export { getPsuedoEditableElementStyles };

package/dist/legacy/visualBuilder/utils/getPsuedoEditableStylesElement.d.ts

@@ -0,0 +1,5 @@
+declare function getPsuedoEditableElementStyles(psuedoEditableElement: HTMLElement, camelCase?: boolean): {
+    [key: string]: string;
+};
+
+export { getPsuedoEditableElementStyles };

package/dist/legacy/visualBuilder/utils/getPsuedoEditableStylesElement.js

@@ -0,0 +1,23 @@
+import "../../chunk-5WRI5ZAA.js";
+
+// src/visualBuilder/utils/getPsuedoEditableStylesElement.ts
+import getCamelCaseStyles from "./getCamelCaseStyles.js";
+import getStyleOfAnElement from "./getStyleOfAnElement.js";
+function getPsuedoEditableElementStyles(psuedoEditableElement, camelCase) {
+  let styles = getStyleOfAnElement(psuedoEditableElement);
+  if (camelCase) {
+    styles = getCamelCaseStyles(styles);
+  }
+  const rect = psuedoEditableElement.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";
+  return styles;
+}
+export {
+  getPsuedoEditableElementStyles
+};
+//# sourceMappingURL=getPsuedoEditableStylesElement.js.map

package/dist/legacy/visualBuilder/utils/getPsuedoEditableStylesElement.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../src/visualBuilder/utils/getPsuedoEditableStylesElement.ts"],"sourcesContent":["import getCamelCaseStyles from \"./getCamelCaseStyles\";\nimport getStyleOfAnElement from \"./getStyleOfAnElement\";\n\nexport function getPsuedoEditableElementStyles(\n    psuedoEditableElement: HTMLElement,\n    camelCase?: boolean\n): { [key: string]: string } {\n    let styles = getStyleOfAnElement(psuedoEditableElement);\n    if (camelCase) {\n        styles = getCamelCaseStyles(styles);\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 = psuedoEditableElement.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 styles;\n}\n"],"mappings":";;;AAAA,OAAO,wBAAwB;AAC/B,OAAO,yBAAyB;AAEzB,SAAS,+BACZ,uBACA,WACyB;AACzB,MAAI,SAAS,oBAAoB,qBAAqB;AACtD,MAAI,WAAW;AACX,aAAS,mBAAmB,MAAM;AAAA,EACtC;AAGA,QAAM,OAAO,sBAAsB,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,SAAO;AACX;","names":[]}

package/dist/legacy/visualBuilder/utils/getStyleOfAnElement.cjs

@@ -33,6 +33,8 @@ function getStyleOfAnElement(element) {
     "right",
     "bottom",
     "text-overflow",
+    // allows seeing the text from CMS field as-is
+    "text-transform",
     "margin",
     "margin-block-end",
     "margin-block-start",

package/dist/legacy/visualBuilder/utils/getStyleOfAnElement.cjs.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/visualBuilder/utils/getStyleOfAnElement.ts"],"sourcesContent":["/**\n * Retrieves the computed style of an HTML element.\n *\n * @param element - The HTML element to retrieve the style from.\n * @returns An object representing the computed style of the element.\n */\nexport default function getStyleOfAnElement(element: HTMLElement): {\n    [key: string]: string;\n} {\n    const styleSheetDeclaration = window.getComputedStyle(element);\n    const styleSheetArray = Array.from(styleSheetDeclaration);\n\n    const FILTER_STYLES = [\n        \"position\",\n        \"left\",\n        \"top\",\n        \"right\",\n        \"bottom\",\n        \"text-overflow\",\n        \"margin\",\n        \"margin-block-end\",\n        \"margin-block-start\",\n        \"margin-inline-end\",\n        \"margin-inline-start\",\n        \"margin-left\",\n        \"margin-right\",\n        \"margin-top\",\n        \"margin-bottom\",\n        \"-webkit-user-modify\",\n        \"cursor\",\n    ];\n\n    const styles: { [key: string]: string } = {};\n    styleSheetArray.forEach((style: string) => {\n        if (!FILTER_STYLES.includes(style)) {\n            const styleValue = styleSheetDeclaration.getPropertyValue(style);\n            styles[style] = styleValue;\n        }\n    });\n\n    return styles;\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAMe,SAAR,oBAAqC,SAE1C;AACE,QAAM,wBAAwB,OAAO,iBAAiB,OAAO;AAC7D,QAAM,kBAAkB,MAAM,KAAK,qBAAqB;AAExD,QAAM,gBAAgB;AAAA,IAClB;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACJ;AAEA,QAAM,SAAoC,CAAC;AAC3C,kBAAgB,QAAQ,CAAC,UAAkB;AACvC,QAAI,CAAC,cAAc,SAAS,KAAK,GAAG;AAChC,YAAM,aAAa,sBAAsB,iBAAiB,KAAK;AAC/D,aAAO,KAAK,IAAI;AAAA,IACpB;AAAA,EACJ,CAAC;AAED,SAAO;AACX;","names":[]}
+{"version":3,"sources":["../../../../src/visualBuilder/utils/getStyleOfAnElement.ts"],"sourcesContent":["/**\n * Retrieves the computed style of an HTML element.\n *\n * @param element - The HTML element to retrieve the style from.\n * @returns An object representing the computed style of the element.\n */\nexport default function getStyleOfAnElement(element: HTMLElement): {\n    [key: string]: string;\n} {\n    const styleSheetDeclaration = window.getComputedStyle(element);\n    const styleSheetArray = Array.from(styleSheetDeclaration);\n\n    const FILTER_STYLES = [\n        \"position\",\n        \"left\",\n        \"top\",\n        \"right\",\n        \"bottom\",\n        \"text-overflow\",\n        // allows seeing the text from CMS field as-is\n        \"text-transform\",\n        \"margin\",\n        \"margin-block-end\",\n        \"margin-block-start\",\n        \"margin-inline-end\",\n        \"margin-inline-start\",\n        \"margin-left\",\n        \"margin-right\",\n        \"margin-top\",\n        \"margin-bottom\",\n        \"-webkit-user-modify\",\n        \"cursor\",\n    ];\n\n    const styles: { [key: string]: string } = {};\n    styleSheetArray.forEach((style: string) => {\n        if (!FILTER_STYLES.includes(style)) {\n            const styleValue = styleSheetDeclaration.getPropertyValue(style);\n            styles[style] = styleValue;\n        }\n    });\n\n    return styles;\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAMe,SAAR,oBAAqC,SAE1C;AACE,QAAM,wBAAwB,OAAO,iBAAiB,OAAO;AAC7D,QAAM,kBAAkB,MAAM,KAAK,qBAAqB;AAExD,QAAM,gBAAgB;AAAA,IAClB;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA;AAAA,IAEA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACJ;AAEA,QAAM,SAAoC,CAAC;AAC3C,kBAAgB,QAAQ,CAAC,UAAkB;AACvC,QAAI,CAAC,cAAc,SAAS,KAAK,GAAG;AAChC,YAAM,aAAa,sBAAsB,iBAAiB,KAAK;AAC/D,aAAO,KAAK,IAAI;AAAA,IACpB;AAAA,EACJ,CAAC;AAED,SAAO;AACX;","names":[]}

package/dist/legacy/visualBuilder/utils/getStyleOfAnElement.js

@@ -11,6 +11,8 @@ function getStyleOfAnElement(element) {
     "right",
     "bottom",
     "text-overflow",
+    // allows seeing the text from CMS field as-is
+    "text-transform",
     "margin",
     "margin-block-end",
     "margin-block-start",

package/dist/legacy/visualBuilder/utils/getStyleOfAnElement.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/visualBuilder/utils/getStyleOfAnElement.ts"],"sourcesContent":["/**\n * Retrieves the computed style of an HTML element.\n *\n * @param element - The HTML element to retrieve the style from.\n * @returns An object representing the computed style of the element.\n */\nexport default function getStyleOfAnElement(element: HTMLElement): {\n    [key: string]: string;\n} {\n    const styleSheetDeclaration = window.getComputedStyle(element);\n    const styleSheetArray = Array.from(styleSheetDeclaration);\n\n    const FILTER_STYLES = [\n        \"position\",\n        \"left\",\n        \"top\",\n        \"right\",\n        \"bottom\",\n        \"text-overflow\",\n        \"margin\",\n        \"margin-block-end\",\n        \"margin-block-start\",\n        \"margin-inline-end\",\n        \"margin-inline-start\",\n        \"margin-left\",\n        \"margin-right\",\n        \"margin-top\",\n        \"margin-bottom\",\n        \"-webkit-user-modify\",\n        \"cursor\",\n    ];\n\n    const styles: { [key: string]: string } = {};\n    styleSheetArray.forEach((style: string) => {\n        if (!FILTER_STYLES.includes(style)) {\n            const styleValue = styleSheetDeclaration.getPropertyValue(style);\n            styles[style] = styleValue;\n        }\n    });\n\n    return styles;\n}\n"],"mappings":";;;AAMe,SAAR,oBAAqC,SAE1C;AACE,QAAM,wBAAwB,OAAO,iBAAiB,OAAO;AAC7D,QAAM,kBAAkB,MAAM,KAAK,qBAAqB;AAExD,QAAM,gBAAgB;AAAA,IAClB;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACJ;AAEA,QAAM,SAAoC,CAAC;AAC3C,kBAAgB,QAAQ,CAAC,UAAkB;AACvC,QAAI,CAAC,cAAc,SAAS,KAAK,GAAG;AAChC,YAAM,aAAa,sBAAsB,iBAAiB,KAAK;AAC/D,aAAO,KAAK,IAAI;AAAA,IACpB;AAAA,EACJ,CAAC;AAED,SAAO;AACX;","names":[]}
+{"version":3,"sources":["../../../../src/visualBuilder/utils/getStyleOfAnElement.ts"],"sourcesContent":["/**\n * Retrieves the computed style of an HTML element.\n *\n * @param element - The HTML element to retrieve the style from.\n * @returns An object representing the computed style of the element.\n */\nexport default function getStyleOfAnElement(element: HTMLElement): {\n    [key: string]: string;\n} {\n    const styleSheetDeclaration = window.getComputedStyle(element);\n    const styleSheetArray = Array.from(styleSheetDeclaration);\n\n    const FILTER_STYLES = [\n        \"position\",\n        \"left\",\n        \"top\",\n        \"right\",\n        \"bottom\",\n        \"text-overflow\",\n        // allows seeing the text from CMS field as-is\n        \"text-transform\",\n        \"margin\",\n        \"margin-block-end\",\n        \"margin-block-start\",\n        \"margin-inline-end\",\n        \"margin-inline-start\",\n        \"margin-left\",\n        \"margin-right\",\n        \"margin-top\",\n        \"margin-bottom\",\n        \"-webkit-user-modify\",\n        \"cursor\",\n    ];\n\n    const styles: { [key: string]: string } = {};\n    styleSheetArray.forEach((style: string) => {\n        if (!FILTER_STYLES.includes(style)) {\n            const styleValue = styleSheetDeclaration.getPropertyValue(style);\n            styles[style] = styleValue;\n        }\n    });\n\n    return styles;\n}\n"],"mappings":";;;AAMe,SAAR,oBAAqC,SAE1C;AACE,QAAM,wBAAwB,OAAO,iBAAiB,OAAO;AAC7D,QAAM,kBAAkB,MAAM,KAAK,qBAAqB;AAExD,QAAM,gBAAgB;AAAA,IAClB;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA;AAAA,IAEA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACJ;AAEA,QAAM,SAAoC,CAAC;AAC3C,kBAAgB,QAAQ,CAAC,UAAkB;AACvC,QAAI,CAAC,cAAc,SAAS,KAAK,GAAG;AAChC,YAAM,aAAa,sBAAsB,iBAAiB,KAAK;AAC/D,aAAO,KAAK,IAAI;AAAA,IACpB;AAAA,EACJ,CAAC;AAED,SAAO;AACX;","names":[]}

package/dist/legacy/visualBuilder/utils/handleIndividualFields.cjs

@@ -148,8 +148,8 @@ async function handleIndividualFields(eventDetails, elements) {
             editableElement: actualEditableField,
             visualBuilderContainer: visualBuilderContainer2,
             overlayWrapper,
-            resizeObserver,
-            focusedToolbar
+            focusedToolbar,
+            resizeObserver
           });
         }, 200);
         actualEditableField.addEventListener(

package/dist/legacy/visualBuilder/utils/handleIndividualFields.cjs.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/visualBuilder/utils/handleIndividualFields.ts"],"sourcesContent":["import { debounce, throttle } from \"lodash-es\";\nimport { VisualBuilder } from \"..\";\nimport {\n    generatePseudoEditableElement,\n    isEllipsisActive,\n} from \"../generators/generatePseudoEditableField\";\nimport { VisualBuilderCslpEventDetails } from \"../types/visualBuilder.types\";\nimport {\n    ALLOWED_INLINE_EDITABLE_FIELD,\n    VISUAL_BUILDER_FIELD_TYPE_ATTRIBUTE_KEY,\n} from \"./constants\";\nimport { FieldSchemaMap } from \"./fieldSchemaMap\";\nimport { getFieldData } from \"./getFieldData\";\nimport { getFieldType } from \"./getFieldType\";\nimport { handleFieldInput, handleFieldKeyDown } from \"./handleFieldMouseDown\";\nimport { isFieldDisabled } from \"./isFieldDisabled\";\nimport visualBuilderPostMessage from \"./visualBuilderPostMessage\";\nimport {\n    handleAddButtonsForMultiple,\n    removeAddInstanceButtons,\n} from \"./multipleElementAddButton\";\nimport { VisualBuilderPostMessageEvents } from \"./types/postMessage.types\";\nimport { updateFocussedState } from \"./updateFocussedState\";\nimport { FieldDataType } from \"./types/index.types\";\nimport { getMultilinePlaintext } from \"./getMultilinePlaintext\";\n\n/**\n * It handles all the fields based on their data type and its \"multiple\" property.\n * @param eventDetails The event details object that contain cslp and field metadata.\n * @param elements The elements object that contain the visual builder wrapper.\n */\nexport async function handleIndividualFields(\n    eventDetails: VisualBuilderCslpEventDetails,\n    elements: {\n        visualBuilderContainer: HTMLDivElement;\n        resizeObserver: ResizeObserver;\n        lastEditedField: Element | null;\n    }\n): Promise<void> {\n    const { fieldMetadata, editableElement } = eventDetails;\n    const { visualBuilderContainer, lastEditedField, resizeObserver } =\n        elements;\n    const {\n        content_type_uid,\n        entry_uid,\n        locale,\n        fieldPath,\n        fieldPathWithIndex,\n    } = fieldMetadata;\n\n    const [fieldSchema, expectedFieldData] = await Promise.all([\n        FieldSchemaMap.getFieldSchema(content_type_uid, fieldPath),\n        getFieldData(\n            { content_type_uid, entry_uid, locale },\n            fieldPathWithIndex\n        ),\n    ]);\n    // if value is an array, get the value for the instance\n    const expectedFieldInstanceData = Array.isArray(expectedFieldData)\n        ? expectedFieldData.at(fieldMetadata.multipleFieldMetadata.index)\n        : undefined;\n\n    const fieldType = getFieldType(fieldSchema);\n\n    const { isDisabled: disabled } = isFieldDisabled(fieldSchema, eventDetails);\n\n    editableElement.setAttribute(\n        VISUAL_BUILDER_FIELD_TYPE_ATTRIBUTE_KEY,\n        fieldType\n    );\n\n    if (\n        fieldSchema &&\n        (fieldSchema?.multiple ||\n            (fieldSchema?.data_type === \"reference\" &&\n                // @ts-ignore\n                fieldSchema?.field_metadata.ref_multiple))\n    ) {\n        if (lastEditedField !== editableElement) {\n            const addButtonLabel =\n                fieldSchema.data_type === \"blocks\"\n                    ? // ? `Add ${fieldSchema.display_name ?? \"Modular Block\"}`\n                      \"Add Section\"\n                    : undefined;\n\n            handleAddButtonsForMultiple(\n                eventDetails,\n                {\n                    editableElement: eventDetails.editableElement,\n                    visualBuilderContainer: visualBuilderContainer,\n                    resizeObserver: resizeObserver,\n                },\n                {\n                    fieldSchema,\n                    expectedFieldData,\n                    disabled,\n                    label: addButtonLabel,\n                }\n            );\n        }\n\n        // * fields could be handled as they are in a single instance\n        if (eventDetails.fieldMetadata.multipleFieldMetadata.index > -1) {\n            handleSingleField(\n                {\n                    editableElement,\n                    visualBuilderContainer,\n                    resizeObserver: elements.resizeObserver,\n                },\n                { expectedFieldData: expectedFieldInstanceData, disabled }\n            );\n        }\n    } else {\n        handleSingleField(\n            {\n                editableElement,\n                visualBuilderContainer,\n                resizeObserver: elements.resizeObserver,\n            },\n            { expectedFieldData, disabled }\n        );\n    }\n\n    /**\n     * Handles all the fields based on their data type.\n     */\n    function handleSingleField(\n        elements: {\n            editableElement: Element;\n            visualBuilderContainer: HTMLDivElement;\n            resizeObserver: ResizeObserver;\n        },\n        config: { expectedFieldData: string; disabled?: boolean }\n    ) {\n        const { editableElement, visualBuilderContainer } = elements;\n\n        if (config.disabled) {\n            return;\n        }\n\n        // * title, single single_line, single multi_line, single number\n        if (ALLOWED_INLINE_EDITABLE_FIELD.includes(fieldType)) {\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 = config.expectedFieldData;\n            if (\n                textContent !== expectedTextContent ||\n                isEllipsisActive(editableElement as HTMLElement)\n            ) {\n                // TODO: Testing will be don in the E2E.\n                const pseudoEditableField = generatePseudoEditableElement(\n                    { editableElement: editableElement as HTMLElement },\n                    { textContent: config.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(\n                        \"paste\",\n                        pasteAsPlainText\n                    );\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                        resizeObserver,\n                        focusedToolbar,\n                    });\n                }, 200);\n                actualEditableField.addEventListener(\n                    \"input\",\n                    onInlineElementInput\n                );\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    }\n}\n\nexport function cleanIndividualFieldResidual(elements: {\n    overlayWrapper: HTMLDivElement;\n    visualBuilderContainer: HTMLDivElement | null;\n    focusedToolbar: HTMLDivElement | null;\n    resizeObserver: ResizeObserver;\n}): void {\n    const { overlayWrapper, visualBuilderContainer, focusedToolbar } = elements;\n\n    removeAddInstanceButtons(\n        {\n            eventTarget: null,\n            visualBuilderContainer: visualBuilderContainer,\n            overlayWrapper: overlayWrapper,\n        },\n        true\n    );\n\n    const previousSelectedEditableDOM =\n        VisualBuilder.VisualBuilderGlobalState.value\n            .previousSelectedEditableDOM;\n    if (previousSelectedEditableDOM) {\n        previousSelectedEditableDOM.removeAttribute(\n            VISUAL_BUILDER_FIELD_TYPE_ATTRIBUTE_KEY\n        );\n        previousSelectedEditableDOM.removeAttribute(\"contenteditable\");\n        previousSelectedEditableDOM.removeEventListener(\n            \"input\",\n            handleFieldInput\n        );\n        previousSelectedEditableDOM.removeEventListener(\n            \"keydown\",\n            handleFieldKeyDown\n        );\n\n        previousSelectedEditableDOM.removeEventListener(\n            \"paste\",\n            pasteAsPlainText\n        );\n        // Note - this happens in two places, 1. hideOverlay and 2. here\n        // TODO maybe see all usages of both functions and try to do it in one place\n        elements.resizeObserver.unobserve(previousSelectedEditableDOM);\n    }\n\n    const pseudoEditableElement = visualBuilderContainer?.querySelector(\n        \".visual-builder__pseudo-editable-element\"\n    );\n    if (pseudoEditableElement) {\n        elements.resizeObserver.unobserve(pseudoEditableElement);\n        pseudoEditableElement.removeEventListener(\"paste\", pasteAsPlainText);\n        pseudoEditableElement.remove();\n        if (previousSelectedEditableDOM) {\n            (previousSelectedEditableDOM as HTMLElement).style.removeProperty(\n                \"visibility\"\n            );\n        }\n    }\n\n    if (focusedToolbar) {\n        focusedToolbar.innerHTML = \"\";\n    }\n}\n\nconst pasteAsPlainText = debounce(\n    (e: Event) => {\n        e.preventDefault();\n        const clipboardData = (e as ClipboardEvent).clipboardData;\n        document.execCommand(\n            \"inserttext\",\n            false,\n            clipboardData?.getData(\"text/plain\")\n        );\n    },\n    100,\n    { leading: true }\n);\n"],"mappings":"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","names":["elements","editableElement","visualBuilderContainer"]}
+{"version":3,"sources":["../../../../src/visualBuilder/utils/handleIndividualFields.ts"],"sourcesContent":["import { debounce, throttle } from \"lodash-es\";\nimport { VisualBuilder } from \"..\";\nimport {\n    generatePseudoEditableElement,\n    isEllipsisActive,\n} from \"../generators/generatePseudoEditableField\";\nimport { VisualBuilderCslpEventDetails } from \"../types/visualBuilder.types\";\nimport {\n    ALLOWED_INLINE_EDITABLE_FIELD,\n    VISUAL_BUILDER_FIELD_TYPE_ATTRIBUTE_KEY,\n} from \"./constants\";\nimport { FieldSchemaMap } from \"./fieldSchemaMap\";\nimport { getFieldData } from \"./getFieldData\";\nimport { getFieldType } from \"./getFieldType\";\nimport { handleFieldInput, handleFieldKeyDown } from \"./handleFieldMouseDown\";\nimport { isFieldDisabled } from \"./isFieldDisabled\";\nimport visualBuilderPostMessage from \"./visualBuilderPostMessage\";\nimport {\n    handleAddButtonsForMultiple,\n    removeAddInstanceButtons,\n} from \"./multipleElementAddButton\";\nimport { VisualBuilderPostMessageEvents } from \"./types/postMessage.types\";\nimport { updateFocussedState } from \"./updateFocussedState\";\nimport { FieldDataType } from \"./types/index.types\";\nimport { getMultilinePlaintext } from \"./getMultilinePlaintext\";\n\n/**\n * It handles all the fields based on their data type and its \"multiple\" property.\n * @param eventDetails The event details object that contain cslp and field metadata.\n * @param elements The elements object that contain the visual builder wrapper.\n */\nexport async function handleIndividualFields(\n    eventDetails: VisualBuilderCslpEventDetails,\n    elements: {\n        visualBuilderContainer: HTMLDivElement;\n        resizeObserver: ResizeObserver;\n        lastEditedField: Element | null;\n    }\n): Promise<void> {\n    const { fieldMetadata, editableElement } = eventDetails;\n    const { visualBuilderContainer, lastEditedField, resizeObserver } =\n        elements;\n    const {\n        content_type_uid,\n        entry_uid,\n        locale,\n        fieldPath,\n        fieldPathWithIndex,\n    } = fieldMetadata;\n\n    const [fieldSchema, expectedFieldData] = await Promise.all([\n        FieldSchemaMap.getFieldSchema(content_type_uid, fieldPath),\n        getFieldData(\n            { content_type_uid, entry_uid, locale },\n            fieldPathWithIndex\n        ),\n    ]);\n    // if value is an array, get the value for the instance\n    const expectedFieldInstanceData = Array.isArray(expectedFieldData)\n        ? expectedFieldData.at(fieldMetadata.multipleFieldMetadata.index)\n        : undefined;\n\n    const fieldType = getFieldType(fieldSchema);\n\n    const { isDisabled: disabled } = isFieldDisabled(fieldSchema, eventDetails);\n\n    editableElement.setAttribute(\n        VISUAL_BUILDER_FIELD_TYPE_ATTRIBUTE_KEY,\n        fieldType\n    );\n\n    if (\n        fieldSchema &&\n        (fieldSchema?.multiple ||\n            (fieldSchema?.data_type === \"reference\" &&\n                // @ts-ignore\n                fieldSchema?.field_metadata.ref_multiple))\n    ) {\n        if (lastEditedField !== editableElement) {\n            const addButtonLabel =\n                fieldSchema.data_type === \"blocks\"\n                    ? // ? `Add ${fieldSchema.display_name ?? \"Modular Block\"}`\n                      \"Add Section\"\n                    : undefined;\n\n            handleAddButtonsForMultiple(\n                eventDetails,\n                {\n                    editableElement: eventDetails.editableElement,\n                    visualBuilderContainer: visualBuilderContainer,\n                    resizeObserver: resizeObserver,\n                },\n                {\n                    fieldSchema,\n                    expectedFieldData,\n                    disabled,\n                    label: addButtonLabel,\n                }\n            );\n        }\n\n        // * fields could be handled as they are in a single instance\n        if (eventDetails.fieldMetadata.multipleFieldMetadata.index > -1) {\n            handleSingleField(\n                {\n                    editableElement,\n                    visualBuilderContainer,\n                    resizeObserver: elements.resizeObserver,\n                },\n                { expectedFieldData: expectedFieldInstanceData, disabled }\n            );\n        }\n    } else {\n        handleSingleField(\n            {\n                editableElement,\n                visualBuilderContainer,\n                resizeObserver: elements.resizeObserver,\n            },\n            { expectedFieldData, disabled }\n        );\n    }\n\n    /**\n     * Handles all the fields based on their data type.\n     */\n    function handleSingleField(\n        elements: {\n            editableElement: Element;\n            visualBuilderContainer: HTMLDivElement;\n            resizeObserver: ResizeObserver;\n        },\n        config: { expectedFieldData: string; disabled?: boolean }\n    ) {\n        const { editableElement, visualBuilderContainer } = elements;\n\n        if (config.disabled) {\n            return;\n        }\n\n        // * title, single single_line, single multi_line, single number\n        if (ALLOWED_INLINE_EDITABLE_FIELD.includes(fieldType)) {\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 = config.expectedFieldData;\n            if (\n                textContent !== expectedTextContent ||\n                isEllipsisActive(editableElement as HTMLElement)\n            ) {\n                // TODO: Testing will be don in the E2E.\n                const pseudoEditableField = generatePseudoEditableElement(\n                    { editableElement: editableElement as HTMLElement },\n                    { textContent: config.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(\n                        \"paste\",\n                        pasteAsPlainText\n                    );\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(\n                    \"input\",\n                    onInlineElementInput\n                );\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    }\n}\n\nexport function cleanIndividualFieldResidual(elements: {\n    overlayWrapper: HTMLDivElement;\n    visualBuilderContainer: HTMLDivElement | null;\n    focusedToolbar: HTMLDivElement | null;\n    resizeObserver: ResizeObserver;\n}): void {\n    const { overlayWrapper, visualBuilderContainer, focusedToolbar } = elements;\n\n    removeAddInstanceButtons(\n        {\n            eventTarget: null,\n            visualBuilderContainer: visualBuilderContainer,\n            overlayWrapper: overlayWrapper,\n        },\n        true\n    );\n\n    const previousSelectedEditableDOM =\n        VisualBuilder.VisualBuilderGlobalState.value\n            .previousSelectedEditableDOM;\n    if (previousSelectedEditableDOM) {\n        previousSelectedEditableDOM.removeAttribute(\n            VISUAL_BUILDER_FIELD_TYPE_ATTRIBUTE_KEY\n        );\n        previousSelectedEditableDOM.removeAttribute(\"contenteditable\");\n        previousSelectedEditableDOM.removeEventListener(\n            \"input\",\n            handleFieldInput\n        );\n        previousSelectedEditableDOM.removeEventListener(\n            \"keydown\",\n            handleFieldKeyDown\n        );\n\n        previousSelectedEditableDOM.removeEventListener(\n            \"paste\",\n            pasteAsPlainText\n        );\n        // Note - this happens in two places, 1. hideOverlay and 2. here\n        // TODO maybe see all usages of both functions and try to do it in one place\n        elements.resizeObserver.unobserve(previousSelectedEditableDOM);\n    }\n\n    const pseudoEditableElement = visualBuilderContainer?.querySelector(\n        \".visual-builder__pseudo-editable-element\"\n    );\n    if (pseudoEditableElement) {\n        elements.resizeObserver.unobserve(pseudoEditableElement);\n        pseudoEditableElement.removeEventListener(\"paste\", pasteAsPlainText);\n        pseudoEditableElement.remove();\n        if (previousSelectedEditableDOM) {\n            (previousSelectedEditableDOM as HTMLElement).style.removeProperty(\n                \"visibility\"\n            );\n        }\n    }\n\n    if (focusedToolbar) {\n        focusedToolbar.innerHTML = \"\";\n    }\n}\n\nconst pasteAsPlainText = debounce(\n    (e: Event) => {\n        e.preventDefault();\n        const clipboardData = (e as ClipboardEvent).clipboardData;\n        document.execCommand(\n            \"inserttext\",\n            false,\n            clipboardData?.getData(\"text/plain\")\n        );\n    },\n    100,\n    { leading: true }\n);\n"],"mappings":"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","names":["elements","editableElement","visualBuilderContainer"]}

package/dist/legacy/visualBuilder/utils/handleIndividualFields.js

@@ -134,8 +134,8 @@ async function handleIndividualFields(eventDetails, elements) {
             editableElement: actualEditableField,
             visualBuilderContainer: visualBuilderContainer2,
             overlayWrapper,
-            resizeObserver,
-            focusedToolbar
+            focusedToolbar,
+            resizeObserver
           });
         }, 200);
         actualEditableField.addEventListener(

package/dist/legacy/visualBuilder/utils/handleIndividualFields.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/visualBuilder/utils/handleIndividualFields.ts"],"sourcesContent":["import { debounce, throttle } from \"lodash-es\";\nimport { VisualBuilder } from \"..\";\nimport {\n    generatePseudoEditableElement,\n    isEllipsisActive,\n} from \"../generators/generatePseudoEditableField\";\nimport { VisualBuilderCslpEventDetails } from \"../types/visualBuilder.types\";\nimport {\n    ALLOWED_INLINE_EDITABLE_FIELD,\n    VISUAL_BUILDER_FIELD_TYPE_ATTRIBUTE_KEY,\n} from \"./constants\";\nimport { FieldSchemaMap } from \"./fieldSchemaMap\";\nimport { getFieldData } from \"./getFieldData\";\nimport { getFieldType } from \"./getFieldType\";\nimport { handleFieldInput, handleFieldKeyDown } from \"./handleFieldMouseDown\";\nimport { isFieldDisabled } from \"./isFieldDisabled\";\nimport visualBuilderPostMessage from \"./visualBuilderPostMessage\";\nimport {\n    handleAddButtonsForMultiple,\n    removeAddInstanceButtons,\n} from \"./multipleElementAddButton\";\nimport { VisualBuilderPostMessageEvents } from \"./types/postMessage.types\";\nimport { updateFocussedState } from \"./updateFocussedState\";\nimport { FieldDataType } from \"./types/index.types\";\nimport { getMultilinePlaintext } from \"./getMultilinePlaintext\";\n\n/**\n * It handles all the fields based on their data type and its \"multiple\" property.\n * @param eventDetails The event details object that contain cslp and field metadata.\n * @param elements The elements object that contain the visual builder wrapper.\n */\nexport async function handleIndividualFields(\n    eventDetails: VisualBuilderCslpEventDetails,\n    elements: {\n        visualBuilderContainer: HTMLDivElement;\n        resizeObserver: ResizeObserver;\n        lastEditedField: Element | null;\n    }\n): Promise<void> {\n    const { fieldMetadata, editableElement } = eventDetails;\n    const { visualBuilderContainer, lastEditedField, resizeObserver } =\n        elements;\n    const {\n        content_type_uid,\n        entry_uid,\n        locale,\n        fieldPath,\n        fieldPathWithIndex,\n    } = fieldMetadata;\n\n    const [fieldSchema, expectedFieldData] = await Promise.all([\n        FieldSchemaMap.getFieldSchema(content_type_uid, fieldPath),\n        getFieldData(\n            { content_type_uid, entry_uid, locale },\n            fieldPathWithIndex\n        ),\n    ]);\n    // if value is an array, get the value for the instance\n    const expectedFieldInstanceData = Array.isArray(expectedFieldData)\n        ? expectedFieldData.at(fieldMetadata.multipleFieldMetadata.index)\n        : undefined;\n\n    const fieldType = getFieldType(fieldSchema);\n\n    const { isDisabled: disabled } = isFieldDisabled(fieldSchema, eventDetails);\n\n    editableElement.setAttribute(\n        VISUAL_BUILDER_FIELD_TYPE_ATTRIBUTE_KEY,\n        fieldType\n    );\n\n    if (\n        fieldSchema &&\n        (fieldSchema?.multiple ||\n            (fieldSchema?.data_type === \"reference\" &&\n                // @ts-ignore\n                fieldSchema?.field_metadata.ref_multiple))\n    ) {\n        if (lastEditedField !== editableElement) {\n            const addButtonLabel =\n                fieldSchema.data_type === \"blocks\"\n                    ? // ? `Add ${fieldSchema.display_name ?? \"Modular Block\"}`\n                      \"Add Section\"\n                    : undefined;\n\n            handleAddButtonsForMultiple(\n                eventDetails,\n                {\n                    editableElement: eventDetails.editableElement,\n                    visualBuilderContainer: visualBuilderContainer,\n                    resizeObserver: resizeObserver,\n                },\n                {\n                    fieldSchema,\n                    expectedFieldData,\n                    disabled,\n                    label: addButtonLabel,\n                }\n            );\n        }\n\n        // * fields could be handled as they are in a single instance\n        if (eventDetails.fieldMetadata.multipleFieldMetadata.index > -1) {\n            handleSingleField(\n                {\n                    editableElement,\n                    visualBuilderContainer,\n                    resizeObserver: elements.resizeObserver,\n                },\n                { expectedFieldData: expectedFieldInstanceData, disabled }\n            );\n        }\n    } else {\n        handleSingleField(\n            {\n                editableElement,\n                visualBuilderContainer,\n                resizeObserver: elements.resizeObserver,\n            },\n            { expectedFieldData, disabled }\n        );\n    }\n\n    /**\n     * Handles all the fields based on their data type.\n     */\n    function handleSingleField(\n        elements: {\n            editableElement: Element;\n            visualBuilderContainer: HTMLDivElement;\n            resizeObserver: ResizeObserver;\n        },\n        config: { expectedFieldData: string; disabled?: boolean }\n    ) {\n        const { editableElement, visualBuilderContainer } = elements;\n\n        if (config.disabled) {\n            return;\n        }\n\n        // * title, single single_line, single multi_line, single number\n        if (ALLOWED_INLINE_EDITABLE_FIELD.includes(fieldType)) {\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 = config.expectedFieldData;\n            if (\n                textContent !== expectedTextContent ||\n                isEllipsisActive(editableElement as HTMLElement)\n            ) {\n                // TODO: Testing will be don in the E2E.\n                const pseudoEditableField = generatePseudoEditableElement(\n                    { editableElement: editableElement as HTMLElement },\n                    { textContent: config.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(\n                        \"paste\",\n                        pasteAsPlainText\n                    );\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                        resizeObserver,\n                        focusedToolbar,\n                    });\n                }, 200);\n                actualEditableField.addEventListener(\n                    \"input\",\n                    onInlineElementInput\n                );\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    }\n}\n\nexport function cleanIndividualFieldResidual(elements: {\n    overlayWrapper: HTMLDivElement;\n    visualBuilderContainer: HTMLDivElement | null;\n    focusedToolbar: HTMLDivElement | null;\n    resizeObserver: ResizeObserver;\n}): void {\n    const { overlayWrapper, visualBuilderContainer, focusedToolbar } = elements;\n\n    removeAddInstanceButtons(\n        {\n            eventTarget: null,\n            visualBuilderContainer: visualBuilderContainer,\n            overlayWrapper: overlayWrapper,\n        },\n        true\n    );\n\n    const previousSelectedEditableDOM =\n        VisualBuilder.VisualBuilderGlobalState.value\n            .previousSelectedEditableDOM;\n    if (previousSelectedEditableDOM) {\n        previousSelectedEditableDOM.removeAttribute(\n            VISUAL_BUILDER_FIELD_TYPE_ATTRIBUTE_KEY\n        );\n        previousSelectedEditableDOM.removeAttribute(\"contenteditable\");\n        previousSelectedEditableDOM.removeEventListener(\n            \"input\",\n            handleFieldInput\n        );\n        previousSelectedEditableDOM.removeEventListener(\n            \"keydown\",\n            handleFieldKeyDown\n        );\n\n        previousSelectedEditableDOM.removeEventListener(\n            \"paste\",\n            pasteAsPlainText\n        );\n        // Note - this happens in two places, 1. hideOverlay and 2. here\n        // TODO maybe see all usages of both functions and try to do it in one place\n        elements.resizeObserver.unobserve(previousSelectedEditableDOM);\n    }\n\n    const pseudoEditableElement = visualBuilderContainer?.querySelector(\n        \".visual-builder__pseudo-editable-element\"\n    );\n    if (pseudoEditableElement) {\n        elements.resizeObserver.unobserve(pseudoEditableElement);\n        pseudoEditableElement.removeEventListener(\"paste\", pasteAsPlainText);\n        pseudoEditableElement.remove();\n        if (previousSelectedEditableDOM) {\n            (previousSelectedEditableDOM as HTMLElement).style.removeProperty(\n                \"visibility\"\n            );\n        }\n    }\n\n    if (focusedToolbar) {\n        focusedToolbar.innerHTML = \"\";\n    }\n}\n\nconst pasteAsPlainText = debounce(\n    (e: Event) => {\n        e.preventDefault();\n        const clipboardData = (e as ClipboardEvent).clipboardData;\n        document.execCommand(\n            \"inserttext\",\n            false,\n            clipboardData?.getData(\"text/plain\")\n        );\n    },\n    100,\n    { leading: true }\n);\n"],"mappings":"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","names":["elements","editableElement","visualBuilderContainer"]}
+{"version":3,"sources":["../../../../src/visualBuilder/utils/handleIndividualFields.ts"],"sourcesContent":["import { debounce, throttle } from \"lodash-es\";\nimport { VisualBuilder } from \"..\";\nimport {\n    generatePseudoEditableElement,\n    isEllipsisActive,\n} from \"../generators/generatePseudoEditableField\";\nimport { VisualBuilderCslpEventDetails } from \"../types/visualBuilder.types\";\nimport {\n    ALLOWED_INLINE_EDITABLE_FIELD,\n    VISUAL_BUILDER_FIELD_TYPE_ATTRIBUTE_KEY,\n} from \"./constants\";\nimport { FieldSchemaMap } from \"./fieldSchemaMap\";\nimport { getFieldData } from \"./getFieldData\";\nimport { getFieldType } from \"./getFieldType\";\nimport { handleFieldInput, handleFieldKeyDown } from \"./handleFieldMouseDown\";\nimport { isFieldDisabled } from \"./isFieldDisabled\";\nimport visualBuilderPostMessage from \"./visualBuilderPostMessage\";\nimport {\n    handleAddButtonsForMultiple,\n    removeAddInstanceButtons,\n} from \"./multipleElementAddButton\";\nimport { VisualBuilderPostMessageEvents } from \"./types/postMessage.types\";\nimport { updateFocussedState } from \"./updateFocussedState\";\nimport { FieldDataType } from \"./types/index.types\";\nimport { getMultilinePlaintext } from \"./getMultilinePlaintext\";\n\n/**\n * It handles all the fields based on their data type and its \"multiple\" property.\n * @param eventDetails The event details object that contain cslp and field metadata.\n * @param elements The elements object that contain the visual builder wrapper.\n */\nexport async function handleIndividualFields(\n    eventDetails: VisualBuilderCslpEventDetails,\n    elements: {\n        visualBuilderContainer: HTMLDivElement;\n        resizeObserver: ResizeObserver;\n        lastEditedField: Element | null;\n    }\n): Promise<void> {\n    const { fieldMetadata, editableElement } = eventDetails;\n    const { visualBuilderContainer, lastEditedField, resizeObserver } =\n        elements;\n    const {\n        content_type_uid,\n        entry_uid,\n        locale,\n        fieldPath,\n        fieldPathWithIndex,\n    } = fieldMetadata;\n\n    const [fieldSchema, expectedFieldData] = await Promise.all([\n        FieldSchemaMap.getFieldSchema(content_type_uid, fieldPath),\n        getFieldData(\n            { content_type_uid, entry_uid, locale },\n            fieldPathWithIndex\n        ),\n    ]);\n    // if value is an array, get the value for the instance\n    const expectedFieldInstanceData = Array.isArray(expectedFieldData)\n        ? expectedFieldData.at(fieldMetadata.multipleFieldMetadata.index)\n        : undefined;\n\n    const fieldType = getFieldType(fieldSchema);\n\n    const { isDisabled: disabled } = isFieldDisabled(fieldSchema, eventDetails);\n\n    editableElement.setAttribute(\n        VISUAL_BUILDER_FIELD_TYPE_ATTRIBUTE_KEY,\n        fieldType\n    );\n\n    if (\n        fieldSchema &&\n        (fieldSchema?.multiple ||\n            (fieldSchema?.data_type === \"reference\" &&\n                // @ts-ignore\n                fieldSchema?.field_metadata.ref_multiple))\n    ) {\n        if (lastEditedField !== editableElement) {\n            const addButtonLabel =\n                fieldSchema.data_type === \"blocks\"\n                    ? // ? `Add ${fieldSchema.display_name ?? \"Modular Block\"}`\n                      \"Add Section\"\n                    : undefined;\n\n            handleAddButtonsForMultiple(\n                eventDetails,\n                {\n                    editableElement: eventDetails.editableElement,\n                    visualBuilderContainer: visualBuilderContainer,\n                    resizeObserver: resizeObserver,\n                },\n                {\n                    fieldSchema,\n                    expectedFieldData,\n                    disabled,\n                    label: addButtonLabel,\n                }\n            );\n        }\n\n        // * fields could be handled as they are in a single instance\n        if (eventDetails.fieldMetadata.multipleFieldMetadata.index > -1) {\n            handleSingleField(\n                {\n                    editableElement,\n                    visualBuilderContainer,\n                    resizeObserver: elements.resizeObserver,\n                },\n                { expectedFieldData: expectedFieldInstanceData, disabled }\n            );\n        }\n    } else {\n        handleSingleField(\n            {\n                editableElement,\n                visualBuilderContainer,\n                resizeObserver: elements.resizeObserver,\n            },\n            { expectedFieldData, disabled }\n        );\n    }\n\n    /**\n     * Handles all the fields based on their data type.\n     */\n    function handleSingleField(\n        elements: {\n            editableElement: Element;\n            visualBuilderContainer: HTMLDivElement;\n            resizeObserver: ResizeObserver;\n        },\n        config: { expectedFieldData: string; disabled?: boolean }\n    ) {\n        const { editableElement, visualBuilderContainer } = elements;\n\n        if (config.disabled) {\n            return;\n        }\n\n        // * title, single single_line, single multi_line, single number\n        if (ALLOWED_INLINE_EDITABLE_FIELD.includes(fieldType)) {\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 = config.expectedFieldData;\n            if (\n                textContent !== expectedTextContent ||\n                isEllipsisActive(editableElement as HTMLElement)\n            ) {\n                // TODO: Testing will be don in the E2E.\n                const pseudoEditableField = generatePseudoEditableElement(\n                    { editableElement: editableElement as HTMLElement },\n                    { textContent: config.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(\n                        \"paste\",\n                        pasteAsPlainText\n                    );\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(\n                    \"input\",\n                    onInlineElementInput\n                );\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    }\n}\n\nexport function cleanIndividualFieldResidual(elements: {\n    overlayWrapper: HTMLDivElement;\n    visualBuilderContainer: HTMLDivElement | null;\n    focusedToolbar: HTMLDivElement | null;\n    resizeObserver: ResizeObserver;\n}): void {\n    const { overlayWrapper, visualBuilderContainer, focusedToolbar } = elements;\n\n    removeAddInstanceButtons(\n        {\n            eventTarget: null,\n            visualBuilderContainer: visualBuilderContainer,\n            overlayWrapper: overlayWrapper,\n        },\n        true\n    );\n\n    const previousSelectedEditableDOM =\n        VisualBuilder.VisualBuilderGlobalState.value\n            .previousSelectedEditableDOM;\n    if (previousSelectedEditableDOM) {\n        previousSelectedEditableDOM.removeAttribute(\n            VISUAL_BUILDER_FIELD_TYPE_ATTRIBUTE_KEY\n        );\n        previousSelectedEditableDOM.removeAttribute(\"contenteditable\");\n        previousSelectedEditableDOM.removeEventListener(\n            \"input\",\n            handleFieldInput\n        );\n        previousSelectedEditableDOM.removeEventListener(\n            \"keydown\",\n            handleFieldKeyDown\n        );\n\n        previousSelectedEditableDOM.removeEventListener(\n            \"paste\",\n            pasteAsPlainText\n        );\n        // Note - this happens in two places, 1. hideOverlay and 2. here\n        // TODO maybe see all usages of both functions and try to do it in one place\n        elements.resizeObserver.unobserve(previousSelectedEditableDOM);\n    }\n\n    const pseudoEditableElement = visualBuilderContainer?.querySelector(\n        \".visual-builder__pseudo-editable-element\"\n    );\n    if (pseudoEditableElement) {\n        elements.resizeObserver.unobserve(pseudoEditableElement);\n        pseudoEditableElement.removeEventListener(\"paste\", pasteAsPlainText);\n        pseudoEditableElement.remove();\n        if (previousSelectedEditableDOM) {\n            (previousSelectedEditableDOM as HTMLElement).style.removeProperty(\n                \"visibility\"\n            );\n        }\n    }\n\n    if (focusedToolbar) {\n        focusedToolbar.innerHTML = \"\";\n    }\n}\n\nconst pasteAsPlainText = debounce(\n    (e: Event) => {\n        e.preventDefault();\n        const clipboardData = (e as ClipboardEvent).clipboardData;\n        document.execCommand(\n            \"inserttext\",\n            false,\n            clipboardData?.getData(\"text/plain\")\n        );\n    },\n    100,\n    { leading: true }\n);\n"],"mappings":"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","names":["elements","editableElement","visualBuilderContainer"]}

package/dist/legacy/visualBuilder/utils/updateFocussedState.cjs

@@ -41,7 +41,7 @@ var import_generateOverlay = require("../generators/generateOverlay.cjs");
 var import_mouseHover = require("../listeners/mouseHover.cjs");
 var import_constants = require("./constants.cjs");
 var import_getChildrenDirection = __toESM(require("./getChildrenDirection.cjs"), 1);
-var import_getStyleOfAnElement = __toESM(require("./getStyleOfAnElement.cjs"), 1);
+var import_getPsuedoEditableStylesElement = require("./getPsuedoEditableStylesElement.cjs");
 function positionToolbar({
   focusedToolbar,
   selectedElementDimension
@@ -51,7 +51,10 @@ function positionToolbar({
     const distanceFromTop = selectedElementDimension.top + window.scrollY - import_constants.TOOLBAR_EDGE_BUFFER;
     const adjustedDistanceFromTop = selectedElementDimension.top + window.scrollY < import_constants.TOP_EDGE_BUFFER ? distanceFromTop + selectedElementDimension.height + import_constants.TOP_EDGE_BUFFER : distanceFromTop;
     const distanceFromLeft = selectedElementDimension.left - import_constants.LIVE_PREVIEW_OUTLINE_WIDTH_IN_PX;
-    const adjustedDistanceFromLeft = Math.max(distanceFromLeft, import_constants.TOOLBAR_EDGE_BUFFER);
+    const adjustedDistanceFromLeft = Math.max(
+      distanceFromLeft,
+      import_constants.TOOLBAR_EDGE_BUFFER
+    );
     if (targetElementRightEdgeOffset < import_constants.RIGHT_EDGE_BUFFER && (focusedToolbar.style.justifyContent !== "flex-end" || focusedToolbar.style.left !== `${selectedElementDimension.right + import_constants.LIVE_PREVIEW_OUTLINE_WIDTH_IN_PX}px`)) {
       focusedToolbar.style.justifyContent = "flex-end";
       focusedToolbar.style.left = `${selectedElementDimension.right + import_constants.LIVE_PREVIEW_OUTLINE_WIDTH_IN_PX}px`;
@@ -72,17 +75,35 @@ function updateFocussedState({
   resizeObserver
 }) {
   var _a, _b;
-  const previousSelectedEditableDOM = import__.VisualBuilder.VisualBuilderGlobalState.value.previousSelectedEditableDOM;
+  let previousSelectedEditableDOM = import__.VisualBuilder.VisualBuilderGlobalState.value.previousSelectedEditableDOM;
   if (!visualBuilderContainer || !editableElement || !previousSelectedEditableDOM || !overlayWrapper) {
     return;
   }
+  const previousSelectedElementCslp = previousSelectedEditableDOM == null ? void 0 : previousSelectedEditableDOM.getAttribute("data-cslp");
+  const newPreviousSelectedElement = document.querySelector(
+    `[data-cslp="${previousSelectedElementCslp}"]`
+  );
+  if (!newPreviousSelectedElement && resizeObserver) {
+    (0, import_generateOverlay.hideFocusOverlay)({
+      visualBuilderOverlayWrapper: overlayWrapper,
+      focusedToolbar,
+      visualBuilderContainer,
+      resizeObserver,
+      noTrigger: true
+    });
+    return;
+  }
+  if (newPreviousSelectedElement !== previousSelectedEditableDOM) {
+    previousSelectedEditableDOM = newPreviousSelectedElement;
+    import__.VisualBuilder.VisualBuilderGlobalState.value.previousSelectedEditableDOM = previousSelectedEditableDOM;
+  }
   (0, import_mouseHover.hideHoverOutline)(visualBuilderContainer);
   (0, import_generateOverlay.addFocusOverlay)(previousSelectedEditableDOM, overlayWrapper);
   const psuedoEditableElement = visualBuilderContainer.querySelector(
     ".visual-builder__pseudo-editable-element"
   );
   if (psuedoEditableElement) {
-    const styles = (0, import_getStyleOfAnElement.default)(editableElement);
+    const styles = (0, import_getPsuedoEditableStylesElement.getPsuedoEditableElementStyles)(editableElement);
     const styleString = Object.entries(styles).reduce(
       (acc, [key, value]) => {
         return `${acc}${key}:${value};`;
@@ -91,17 +112,13 @@ function updateFocussedState({
     );
     psuedoEditableElement.style.cssText = styleString;
     psuedoEditableElement.style.visibility = "visible";
-    psuedoEditableElement.style.position = "absolute";
-    psuedoEditableElement.style.top = `${editableElement.offsetTop}px`;
-    psuedoEditableElement.style.left = `${editableElement.offsetLeft}px`;
   }
   const cslp = (editableElement == null ? void 0 : editableElement.getAttribute("data-cslp")) || "";
   const fieldMetadata = (0, import_cslp.extractDetailsFromCslp)(cslp);
   const targetElementDimension = editableElement.getBoundingClientRect();
   if (targetElementDimension.width && targetElementDimension.height) {
     const selectedElement = import__.VisualBuilder.VisualBuilderGlobalState.value.previousSelectedEditableDOM;
-    if (!selectedElement)
-      return;
+    if (!selectedElement) return;
     positionToolbar({
       focusedToolbar,
       selectedElementDimension: selectedElement.getBoundingClientRect()
@@ -131,11 +148,28 @@ function updateFocussedState({
     }
   }
 }
-function updateFocussedStateOnMutation(focusOverlayWrapper, focusedToolbar, visualBuilderContainer) {
+function updateFocussedStateOnMutation(focusOverlayWrapper, focusedToolbar, visualBuilderContainer, resizeObserver) {
   if (!focusOverlayWrapper) return;
-  const selectedElement = import__.VisualBuilder.VisualBuilderGlobalState.value.previousSelectedEditableDOM;
-  if (!selectedElement)
+  let selectedElement = import__.VisualBuilder.VisualBuilderGlobalState.value.previousSelectedEditableDOM;
+  if (!selectedElement) return;
+  const selectedElementCslp = selectedElement == null ? void 0 : selectedElement.getAttribute("data-cslp");
+  const newSelectedElement = document.querySelector(
+    `[data-cslp="${selectedElementCslp}"]`
+  );
+  if (!newSelectedElement && resizeObserver) {
+    (0, import_generateOverlay.hideFocusOverlay)({
+      visualBuilderOverlayWrapper: focusOverlayWrapper,
+      focusedToolbar,
+      visualBuilderContainer,
+      resizeObserver,
+      noTrigger: true
+    });
     return;
+  }
+  if (newSelectedElement !== selectedElement) {
+    selectedElement = newSelectedElement;
+    import__.VisualBuilder.VisualBuilderGlobalState.value.previousSelectedEditableDOM = selectedElement;
+  }
   const selectedElementDimension = selectedElement.getBoundingClientRect();
   const focusOutline = focusOverlayWrapper.querySelector(
     ".visual-builder__overlay--outline"
@@ -217,19 +251,16 @@ function updateFocussedStateOnMutation(focusOverlayWrapper, focusedToolbar, visu
       ".visual-builder__pseudo-editable-element"
     );
     const editableElement = selectedElement;
-    const styles = (0, import_getStyleOfAnElement.default)(editableElement);
+    const styles = (0, import_getPsuedoEditableStylesElement.getPsuedoEditableElementStyles)(editableElement);
     const styleString = Object.entries(styles).reduce(
       (acc, [key, value]) => {
         return `${acc}${key}:${value};`;
       },
       ""
     );
-    if (psuedoEditableElement && (psuedoEditableElement.style.cssText !== styleString || psuedoEditableElement.style.visibility !== "visible" || psuedoEditableElement.style.position !== "absolute" || psuedoEditableElement.style.top !== `${editableElement.offsetTop}px` || psuedoEditableElement.style.left !== `${editableElement.offsetLeft}px`)) {
+    if (psuedoEditableElement && (psuedoEditableElement.style.cssText !== styleString || psuedoEditableElement.style.visibility !== "visible")) {
       psuedoEditableElement.style.cssText = styleString;
       psuedoEditableElement.style.visibility = "visible";
-      psuedoEditableElement.style.position = "absolute";
-      psuedoEditableElement.style.top = `${editableElement.offsetTop}px`;
-      psuedoEditableElement.style.left = `${editableElement.offsetLeft}px`;
     }
   }
 }