@contentstack/live-preview-utils 3.0.1 → 3.0.2

package/dist/modern/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                        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"]}
+{"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 {\n    handleAddButtonsForMultiple,\n    removeAddInstanceButtons,\n} from \"./multipleElementAddButton\";\nimport { updateFocussedState } from \"./updateFocussedState\";\nimport { FieldDataType, ISchemaFieldMap } from \"./types/index.types\";\nimport { getMultilinePlaintext } from \"./getMultilinePlaintext\";\nimport { VisualBuilderPostMessageEvents } from \"./types/postMessage.types\";\nimport visualBuilderPostMessage from \"./visualBuilderPostMessage\";\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\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 (isFieldMultiple(fieldSchema)) {\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\n    !disabled && handleInlineEditing();\n\n    /**\n     * Handles inline editing for supported fields.\n     */\n    function handleInlineEditing() {\n\n        if (!ALLOWED_INLINE_EDITABLE_FIELD.includes(fieldType)) return;\n\n        // Instances of ALLOWED_INLINE_EDITABLE_FIELD will always have index at last\n        const index = Number(fieldMetadata.instance.fieldPathWithIndex.split('.').at(-1));\n        const isInstance = Number.isFinite(index);\n\n        // CASE 1: Handle inline editing for multiple field\n        if(isFieldMultiple(fieldSchema)) {\n            let expectedFieldInstanceData = null;\n            if(Array.isArray(expectedFieldData)) {\n                // CASE: Selected element is the multiple field itself.\n                // Inline Editing not allowed on field, only allowed on instance.\n                // (We recieve unreliable `multipleFieldMetadata` in this case)\n                if(!isInstance) {\n                    return;\n                }\n\n                // CASE: Value does not exist for the provided instance's index\n                if(index >= expectedFieldData.length) {\n                    // TODO: What should be the behavior here?\n                }\n                else {\n                    expectedFieldInstanceData = expectedFieldData.at(index);\n                }\n            }\n            // CASE: ContentType's Field changed from single to multiple, while Entry's Field still single.\n            else {\n                expectedFieldInstanceData = expectedFieldData;\n            }\n\n            enableInlineEditing(expectedFieldInstanceData);     \n        }\n        // CASE 2: Handle inline editing for a single field\n        else {\n            let expectedFieldInstanceData = null;\n            // CASE: ContentType's Field changed from multiple to single, while Entry's Field still multiple.\n            if(isInstance) {\n                if(index !== 0) {\n                    // TODO: Handle this with UX\n                    // Let user know, CSLP is invalid due to change in Content Type\n                    return;\n                }\n                expectedFieldInstanceData = Array.isArray(expectedFieldData) ? expectedFieldData.at(0) : expectedFieldData;\n            }\n            enableInlineEditing(expectedFieldInstanceData ?? expectedFieldData);\n        }\n\n        function enableInlineEditing(expectedFieldData: any) {\n\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                \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(\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\nfunction isFieldMultiple(fieldSchema: ISchemaFieldMap): boolean {\n    return fieldSchema &&\n    (fieldSchema.multiple ||\n        (fieldSchema.data_type === \"reference\" &&\n            // @ts-ignore\n            fieldSchema.field_metadata.ref_multiple));\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        const toolbarEvents = [VisualBuilderPostMessageEvents.DELETE_INSTANCE, VisualBuilderPostMessageEvents.UPDATE_DISCUSSION_ID]\n        toolbarEvents.forEach((event) => {\n            //@ts-expect-error - We are accessing private method here, but it is necessary to clean up the event listeners.\n            visualBuilderPostMessage?.unregisterEvent?.(event);\n        });\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":["expectedFieldData","visualBuilderPostMessage"]}

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

@@ -23,6 +23,8 @@ import {
 import { updateFocussedState } from "./updateFocussedState.js";
 import { FieldDataType } from "./types/index.types.js";
 import { getMultilinePlaintext } from "./getMultilinePlaintext.js";
+import { VisualBuilderPostMessageEvents } from "./types/postMessage.types.js";
+import visualBuilderPostMessage from "./visualBuilderPostMessage.js";
 async function handleIndividualFields(eventDetails, elements) {
   const { fieldMetadata, editableElement } = eventDetails;
   const { visualBuilderContainer, lastEditedField, resizeObserver } = elements;
@@ -40,15 +42,13 @@ async function handleIndividualFields(eventDetails, elements) {
       fieldPathWithIndex
     )
   ]);
-  const expectedFieldInstanceData = Array.isArray(expectedFieldData) ? expectedFieldData.at(fieldMetadata.multipleFieldMetadata.index) : void 0;
   const fieldType = getFieldType(fieldSchema);
   const { isDisabled: disabled } = isFieldDisabled(fieldSchema, eventDetails);
   editableElement.setAttribute(
     VISUAL_BUILDER_FIELD_TYPE_ATTRIBUTE_KEY,
     fieldType
   );
-  if (fieldSchema && (fieldSchema?.multiple || fieldSchema?.data_type === "reference" && // @ts-ignore
-  fieldSchema?.field_metadata.ref_multiple)) {
+  if (isFieldMultiple(fieldSchema)) {
     if (lastEditedField !== editableElement) {
       const addButtonLabel = fieldSchema.data_type === "blocks" ? (
         // ? `Add ${fieldSchema.display_name ?? "Modular Block"}`
@@ -69,70 +69,75 @@ async function handleIndividualFields(eventDetails, elements) {
         }
       );
     }
-    if (eventDetails.fieldMetadata.multipleFieldMetadata.index > -1) {
-      handleSingleField(
-        {
-          editableElement,
-          visualBuilderContainer,
-          resizeObserver: elements.resizeObserver
-        },
-        { expectedFieldData: expectedFieldInstanceData, disabled }
-      );
-    }
-  } else {
-    handleSingleField(
-      {
-        editableElement,
-        visualBuilderContainer,
-        resizeObserver: elements.resizeObserver
-      },
-      { expectedFieldData, disabled }
-    );
   }
-  function handleSingleField(elements2, config) {
-    const { editableElement: editableElement2, visualBuilderContainer: visualBuilderContainer2 } = elements2;
-    if (config.disabled) {
-      return;
+  !disabled && handleInlineEditing();
+  function handleInlineEditing() {
+    if (!ALLOWED_INLINE_EDITABLE_FIELD.includes(fieldType)) return;
+    const index = Number(fieldMetadata.instance.fieldPathWithIndex.split(".").at(-1));
+    const isInstance = Number.isFinite(index);
+    if (isFieldMultiple(fieldSchema)) {
+      let expectedFieldInstanceData = null;
+      if (Array.isArray(expectedFieldData)) {
+        if (!isInstance) {
+          return;
+        }
+        if (index >= expectedFieldData.length) {
+        } else {
+          expectedFieldInstanceData = expectedFieldData.at(index);
+        }
+      } else {
+        expectedFieldInstanceData = expectedFieldData;
+      }
+      enableInlineEditing(expectedFieldInstanceData);
+    } else {
+      let expectedFieldInstanceData = null;
+      if (isInstance) {
+        if (index !== 0) {
+          return;
+        }
+        expectedFieldInstanceData = Array.isArray(expectedFieldData) ? expectedFieldData.at(0) : expectedFieldData;
+      }
+      enableInlineEditing(expectedFieldInstanceData ?? expectedFieldData);
     }
-    if (ALLOWED_INLINE_EDITABLE_FIELD.includes(fieldType)) {
-      let actualEditableField = editableElement2;
+    function enableInlineEditing(expectedFieldData2) {
+      let actualEditableField = editableElement;
       VisualBuilder.VisualBuilderGlobalState.value.focusFieldValue = actualEditableField?.innerText;
       const elementComputedDisplay = window.getComputedStyle(actualEditableField).display;
-      let textContent = editableElement2.innerText || editableElement2.textContent || "";
+      let textContent = editableElement.innerText || editableElement.textContent || "";
       if (fieldType === FieldDataType.MULTILINE) {
         textContent = getMultilinePlaintext(actualEditableField);
         actualEditableField.addEventListener("paste", pasteAsPlainText);
       }
-      const expectedTextContent = config.expectedFieldData;
-      if (textContent !== expectedTextContent || isEllipsisActive(editableElement2)) {
+      const expectedTextContent = expectedFieldData2;
+      if (expectedTextContent && textContent !== expectedTextContent || isEllipsisActive(editableElement)) {
         const pseudoEditableField = generatePseudoEditableElement(
-          { editableElement: editableElement2 },
-          { textContent: config.expectedFieldData }
+          { editableElement },
+          { textContent: expectedFieldData2 }
         );
-        editableElement2.style.visibility = "hidden";
+        editableElement.style.visibility = "hidden";
         pseudoEditableField.setAttribute(
           VISUAL_BUILDER_FIELD_TYPE_ATTRIBUTE_KEY,
           fieldType
         );
-        visualBuilderContainer2.appendChild(pseudoEditableField);
+        visualBuilderContainer.appendChild(pseudoEditableField);
         actualEditableField = pseudoEditableField;
         if (fieldType === FieldDataType.MULTILINE)
           actualEditableField.addEventListener(
             "paste",
             pasteAsPlainText
           );
-        elements2.resizeObserver.observe(pseudoEditableField);
+        elements.resizeObserver.observe(pseudoEditableField);
       } else if (elementComputedDisplay === "inline") {
         const onInlineElementInput = throttle(() => {
-          const overlayWrapper = visualBuilderContainer2.querySelector(
+          const overlayWrapper = visualBuilderContainer.querySelector(
             ".visual-builder__overlay__wrapper"
           );
-          const focusedToolbar = visualBuilderContainer2.querySelector(
+          const focusedToolbar = visualBuilderContainer.querySelector(
             ".visual-builder__focused-toolbar"
           );
           updateFocussedState({
             editableElement: actualEditableField,
-            visualBuilderContainer: visualBuilderContainer2,
+            visualBuilderContainer,
             overlayWrapper,
             focusedToolbar,
             resizeObserver
@@ -151,6 +156,10 @@ async function handleIndividualFields(eventDetails, elements) {
     }
   }
 }
+function isFieldMultiple(fieldSchema) {
+  return fieldSchema && (fieldSchema.multiple || fieldSchema.data_type === "reference" && // @ts-ignore
+  fieldSchema.field_metadata.ref_multiple);
+}
 function cleanIndividualFieldResidual(elements) {
   const { overlayWrapper, visualBuilderContainer, focusedToolbar } = elements;
   removeAddInstanceButtons(
@@ -196,6 +205,10 @@ function cleanIndividualFieldResidual(elements) {
   }
   if (focusedToolbar) {
     focusedToolbar.innerHTML = "";
+    const toolbarEvents = [VisualBuilderPostMessageEvents.DELETE_INSTANCE, VisualBuilderPostMessageEvents.UPDATE_DISCUSSION_ID];
+    toolbarEvents.forEach((event) => {
+      visualBuilderPostMessage?.unregisterEvent?.(event);
+    });
   }
 }
 var pasteAsPlainText = debounce(

package/dist/modern/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                        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"]}
+{"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 {\n    handleAddButtonsForMultiple,\n    removeAddInstanceButtons,\n} from \"./multipleElementAddButton\";\nimport { updateFocussedState } from \"./updateFocussedState\";\nimport { FieldDataType, ISchemaFieldMap } from \"./types/index.types\";\nimport { getMultilinePlaintext } from \"./getMultilinePlaintext\";\nimport { VisualBuilderPostMessageEvents } from \"./types/postMessage.types\";\nimport visualBuilderPostMessage from \"./visualBuilderPostMessage\";\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\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 (isFieldMultiple(fieldSchema)) {\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\n    !disabled && handleInlineEditing();\n\n    /**\n     * Handles inline editing for supported fields.\n     */\n    function handleInlineEditing() {\n\n        if (!ALLOWED_INLINE_EDITABLE_FIELD.includes(fieldType)) return;\n\n        // Instances of ALLOWED_INLINE_EDITABLE_FIELD will always have index at last\n        const index = Number(fieldMetadata.instance.fieldPathWithIndex.split('.').at(-1));\n        const isInstance = Number.isFinite(index);\n\n        // CASE 1: Handle inline editing for multiple field\n        if(isFieldMultiple(fieldSchema)) {\n            let expectedFieldInstanceData = null;\n            if(Array.isArray(expectedFieldData)) {\n                // CASE: Selected element is the multiple field itself.\n                // Inline Editing not allowed on field, only allowed on instance.\n                // (We recieve unreliable `multipleFieldMetadata` in this case)\n                if(!isInstance) {\n                    return;\n                }\n\n                // CASE: Value does not exist for the provided instance's index\n                if(index >= expectedFieldData.length) {\n                    // TODO: What should be the behavior here?\n                }\n                else {\n                    expectedFieldInstanceData = expectedFieldData.at(index);\n                }\n            }\n            // CASE: ContentType's Field changed from single to multiple, while Entry's Field still single.\n            else {\n                expectedFieldInstanceData = expectedFieldData;\n            }\n\n            enableInlineEditing(expectedFieldInstanceData);     \n        }\n        // CASE 2: Handle inline editing for a single field\n        else {\n            let expectedFieldInstanceData = null;\n            // CASE: ContentType's Field changed from multiple to single, while Entry's Field still multiple.\n            if(isInstance) {\n                if(index !== 0) {\n                    // TODO: Handle this with UX\n                    // Let user know, CSLP is invalid due to change in Content Type\n                    return;\n                }\n                expectedFieldInstanceData = Array.isArray(expectedFieldData) ? expectedFieldData.at(0) : expectedFieldData;\n            }\n            enableInlineEditing(expectedFieldInstanceData ?? expectedFieldData);\n        }\n\n        function enableInlineEditing(expectedFieldData: any) {\n\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                \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(\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\nfunction isFieldMultiple(fieldSchema: ISchemaFieldMap): boolean {\n    return fieldSchema &&\n    (fieldSchema.multiple ||\n        (fieldSchema.data_type === \"reference\" &&\n            // @ts-ignore\n            fieldSchema.field_metadata.ref_multiple));\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        const toolbarEvents = [VisualBuilderPostMessageEvents.DELETE_INSTANCE, VisualBuilderPostMessageEvents.UPDATE_DISCUSSION_ID]\n        toolbarEvents.forEach((event) => {\n            //@ts-expect-error - We are accessing private method here, but it is necessary to clean up the event listeners.\n            visualBuilderPostMessage?.unregisterEvent?.(event);\n        });\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":["expectedFieldData"]}

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

@@ -0,0 +1,44 @@
+"use strict";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+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 __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/visualBuilder/utils/insertSpaceAtCursor.ts
+var insertSpaceAtCursor_exports = {};
+__export(insertSpaceAtCursor_exports, {
+  insertSpaceAtCursor: () => insertSpaceAtCursor
+});
+module.exports = __toCommonJS(insertSpaceAtCursor_exports);
+var import_constants = require("./constants.cjs");
+function insertSpaceAtCursor(element) {
+  const selection = window.getSelection();
+  if (selection && selection.rangeCount > 0) {
+    const range = selection.getRangeAt(0);
+    const spaceNode = document.createTextNode(import_constants.unicodeNonBreakingSpace);
+    range.deleteContents();
+    range.insertNode(spaceNode);
+    range.setStartAfter(spaceNode);
+    range.setEndAfter(spaceNode);
+    selection.removeAllRanges();
+    selection.addRange(range);
+  }
+}
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  insertSpaceAtCursor
+});
+//# sourceMappingURL=insertSpaceAtCursor.cjs.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../src/visualBuilder/utils/insertSpaceAtCursor.ts"],"sourcesContent":["import { unicodeNonBreakingSpace } from \"./constants\";\n\nexport function insertSpaceAtCursor(element: HTMLElement) {\n    // Check if the browser supports modern selection API\n    const selection = window.getSelection();\n\n    // Ensure there's a valid selection\n    if (selection && selection.rangeCount > 0) {\n        const range = selection.getRangeAt(0);\n\n        // Create a text node with a space\n        const spaceNode = document.createTextNode(unicodeNonBreakingSpace);\n\n        // Delete any selected content first\n        range.deleteContents();\n\n        // Insert the space node\n        range.insertNode(spaceNode);\n\n        // Move cursor after the inserted space\n        range.setStartAfter(spaceNode);\n        range.setEndAfter(spaceNode);\n\n        // Update the selection\n        selection.removeAllRanges();\n        selection.addRange(range);\n    }\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,uBAAwC;AAEjC,SAAS,oBAAoB,SAAsB;AAEtD,QAAM,YAAY,OAAO,aAAa;AAGtC,MAAI,aAAa,UAAU,aAAa,GAAG;AACvC,UAAM,QAAQ,UAAU,WAAW,CAAC;AAGpC,UAAM,YAAY,SAAS,eAAe,wCAAuB;AAGjE,UAAM,eAAe;AAGrB,UAAM,WAAW,SAAS;AAG1B,UAAM,cAAc,SAAS;AAC7B,UAAM,YAAY,SAAS;AAG3B,cAAU,gBAAgB;AAC1B,cAAU,SAAS,KAAK;AAAA,EAC5B;AACJ;","names":[]}

package/dist/modern/visualBuilder/utils/insertSpaceAtCursor.d.cts

@@ -0,0 +1,3 @@
+declare function insertSpaceAtCursor(element: HTMLElement): void;
+
+export { insertSpaceAtCursor };

package/dist/modern/visualBuilder/utils/insertSpaceAtCursor.d.ts

@@ -0,0 +1,3 @@
+declare function insertSpaceAtCursor(element: HTMLElement): void;
+
+export { insertSpaceAtCursor };

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

@@ -0,0 +1,21 @@
+import "../../chunk-5WRI5ZAA.js";
+
+// src/visualBuilder/utils/insertSpaceAtCursor.ts
+import { unicodeNonBreakingSpace } from "./constants.js";
+function insertSpaceAtCursor(element) {
+  const selection = window.getSelection();
+  if (selection && selection.rangeCount > 0) {
+    const range = selection.getRangeAt(0);
+    const spaceNode = document.createTextNode(unicodeNonBreakingSpace);
+    range.deleteContents();
+    range.insertNode(spaceNode);
+    range.setStartAfter(spaceNode);
+    range.setEndAfter(spaceNode);
+    selection.removeAllRanges();
+    selection.addRange(range);
+  }
+}
+export {
+  insertSpaceAtCursor
+};
+//# sourceMappingURL=insertSpaceAtCursor.js.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../src/visualBuilder/utils/insertSpaceAtCursor.ts"],"sourcesContent":["import { unicodeNonBreakingSpace } from \"./constants\";\n\nexport function insertSpaceAtCursor(element: HTMLElement) {\n    // Check if the browser supports modern selection API\n    const selection = window.getSelection();\n\n    // Ensure there's a valid selection\n    if (selection && selection.rangeCount > 0) {\n        const range = selection.getRangeAt(0);\n\n        // Create a text node with a space\n        const spaceNode = document.createTextNode(unicodeNonBreakingSpace);\n\n        // Delete any selected content first\n        range.deleteContents();\n\n        // Insert the space node\n        range.insertNode(spaceNode);\n\n        // Move cursor after the inserted space\n        range.setStartAfter(spaceNode);\n        range.setEndAfter(spaceNode);\n\n        // Update the selection\n        selection.removeAllRanges();\n        selection.addRange(range);\n    }\n}\n"],"mappings":";;;AAAA,SAAS,+BAA+B;AAEjC,SAAS,oBAAoB,SAAsB;AAEtD,QAAM,YAAY,OAAO,aAAa;AAGtC,MAAI,aAAa,UAAU,aAAa,GAAG;AACvC,UAAM,QAAQ,UAAU,WAAW,CAAC;AAGpC,UAAM,YAAY,SAAS,eAAe,uBAAuB;AAGjE,UAAM,eAAe;AAGrB,UAAM,WAAW,SAAS;AAG1B,UAAM,cAAc,SAAS;AAC7B,UAAM,YAAY,SAAS;AAG3B,cAAU,gBAAgB;AAC1B,cAAU,SAAS,KAAK;AAAA,EAC5B;AACJ;","names":[]}

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

@@ -176,7 +176,7 @@ function observeParentAndFocusNewInstance({
           `[data-cslp='${expectedCslp}']`
         );
         if (newInstance) {
-          setTimeout(() => newInstance.click(), 150);
+          setTimeout(() => newInstance.click(), 350);
           observer.disconnect();
           hasObserverDisconnected = true;
           return;

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/visualBuilder/utils/multipleElementAddButton.ts"],"sourcesContent":["import { VisualBuilderCslpEventDetails } from \"../types/visualBuilder.types\";\nimport {\n    generateAddInstanceButton,\n    getAddInstanceButtons,\n} from \"../generators/generateAddInstanceButtons\";\nimport visualBuilderPostMessage from \"./visualBuilderPostMessage\";\nimport { VisualBuilderPostMessageEvents } from \"./types/postMessage.types\";\nimport getChildrenDirection from \"./getChildrenDirection\";\nimport { hideOverlay } from \"../generators/generateOverlay\";\nimport { hideHoverOutline } from \"../listeners/mouseHover\";\nimport { ISchemaFieldMap } from \"./types/index.types\";\n\nconst WAIT_FOR_NEW_INSTANCE_TIMEOUT = 4000;\n\n/**\n * The function that handles the add instance buttons for multiple fields.\n * @param eventDetails The details containing the field metadata and cslp value.\n * @param elements The elements object that contain the editable element and visual builder wrapper.\n * @param config The configuration object that contains the expected field data and disabled state.\n * @returns void\n */\nexport function handleAddButtonsForMultiple(\n    eventDetails: VisualBuilderCslpEventDetails,\n    elements: {\n        editableElement: Element | null;\n        visualBuilderContainer: HTMLDivElement | null;\n        resizeObserver: ResizeObserver;\n    },\n    config: {\n        fieldSchema: ISchemaFieldMap;\n        /**\n         * expectedFieldData is the value of the whole multiple field (an array)\n         */\n        expectedFieldData: any;\n        disabled: boolean;\n        label: string | undefined;\n    }\n): void {\n    const { editableElement, visualBuilderContainer, resizeObserver } =\n        elements;\n    const { expectedFieldData, fieldSchema, disabled, label } = config;\n\n    const parentCslpValue =\n        eventDetails.fieldMetadata.multipleFieldMetadata?.parentDetails\n            ?.parentCslpValue;\n\n    if (!editableElement || !parentCslpValue) {\n        return;\n    }\n\n    const direction = getChildrenDirection(editableElement, parentCslpValue);\n    if (direction === \"none\" || !visualBuilderContainer) {\n        return;\n    }\n\n    const targetDOMDimension = editableElement.getBoundingClientRect();\n    removeAddInstanceButtons(\n        {\n            visualBuilderContainer: visualBuilderContainer,\n            eventTarget: null,\n            overlayWrapper: null,\n        },\n        true\n    );\n\n    const overlayWrapper = visualBuilderContainer.querySelector(\n        \".visual-builder__overlay__wrapper\"\n    );\n    const focusedToolbar = visualBuilderContainer.querySelector(\n        \".visual-builder__focused-toolbar\"\n    );\n\n    const hideOverlayAndHoverOutline = () => {\n        hideHoverOutline(visualBuilderContainer);\n        hideOverlay({\n            visualBuilderContainer: visualBuilderContainer,\n            visualBuilderOverlayWrapper: overlayWrapper as HTMLDivElement,\n            focusedToolbar: focusedToolbar as HTMLDivElement,\n            resizeObserver,\n        });\n    };\n\n    if (disabled) {\n        return;\n    }\n\n    // is whole field and not a single instance of the multiple field\n    const isField =\n        eventDetails.fieldMetadata.instance.fieldPathWithIndex ===\n        eventDetails.fieldMetadata.fieldPathWithIndex;\n\n    const prevIndex = isField\n        ? 0\n        : eventDetails.fieldMetadata.multipleFieldMetadata.index;\n    const nextIndex = isField\n        ? expectedFieldData.length\n        : eventDetails.fieldMetadata.multipleFieldMetadata.index + 1;\n\n    const parentCslp = isField ? eventDetails.cslpData : parentCslpValue;\n\n    const onMessageSent = (index: number) => {\n        hideOverlayAndHoverOutline();\n        observeParentAndFocusNewInstance({\n            parentCslp,\n            index,\n        });\n    };\n\n    const previousButton = generateAddInstanceButton({\n        onClick: () => {\n            visualBuilderPostMessage\n                ?.send(VisualBuilderPostMessageEvents.ADD_INSTANCE, {\n                    fieldMetadata: eventDetails.fieldMetadata,\n                    index: prevIndex,\n                })\n                .then(onMessageSent.bind(null, prevIndex));\n        },\n        label,\n        fieldSchema,\n        value: expectedFieldData,\n    });\n\n    const nextButton = generateAddInstanceButton({\n        onClick: () => {\n            visualBuilderPostMessage\n                ?.send(VisualBuilderPostMessageEvents.ADD_INSTANCE, {\n                    fieldMetadata: eventDetails.fieldMetadata,\n                    index: nextIndex,\n                })\n                .then(onMessageSent.bind(null, nextIndex));\n        },\n        label,\n        fieldSchema,\n        value: expectedFieldData,\n    });\n\n    if (!visualBuilderContainer.contains(previousButton)) {\n        visualBuilderContainer.appendChild(previousButton);\n    }\n\n    if (!visualBuilderContainer.contains(nextButton)) {\n        visualBuilderContainer.appendChild(nextButton);\n    }\n\n    if (direction === \"horizontal\") {\n        const middleHeight =\n            targetDOMDimension.top +\n            (targetDOMDimension.bottom - targetDOMDimension.top) / 2 +\n            window.scrollY;\n        previousButton.style.left = `${targetDOMDimension.left}px`;\n        previousButton.style.top = `${middleHeight}px`;\n\n        nextButton.style.left = `${targetDOMDimension.right}px`;\n        nextButton.style.top = `${middleHeight}px`;\n    } else {\n        const middleWidth =\n            targetDOMDimension.left +\n            (targetDOMDimension.right - targetDOMDimension.left) / 2;\n        previousButton.style.left = `${middleWidth}px`;\n        previousButton.style.top = `${\n            targetDOMDimension.top + window.scrollY\n        }px`;\n\n        nextButton.style.left = `${middleWidth}px`;\n        nextButton.style.top = `${\n            targetDOMDimension.bottom + window.scrollY\n        }px`;\n    }\n}\n\nexport function removeAddInstanceButtons(\n    elements: {\n        visualBuilderContainer: HTMLDivElement | null;\n        overlayWrapper: HTMLDivElement | null;\n        eventTarget: EventTarget | null;\n    },\n    forceRemoveAll = false\n): void {\n    const { visualBuilderContainer, overlayWrapper, eventTarget } = elements;\n\n    if (!visualBuilderContainer) {\n        return;\n    }\n\n    if (forceRemoveAll) {\n        const addInstanceButtons = getAddInstanceButtons(\n            visualBuilderContainer,\n            true\n        );\n\n        addInstanceButtons?.forEach((button) => button.remove());\n    }\n\n    const addInstanceButtons = getAddInstanceButtons(visualBuilderContainer);\n\n    if (!addInstanceButtons) {\n        return;\n    }\n\n    const [previousButton, nextButton] = addInstanceButtons;\n\n    if (overlayWrapper?.classList.contains(\"visible\")) {\n        return;\n    }\n\n    if (\n        eventTarget &&\n        (previousButton.contains(eventTarget as Node) ||\n            nextButton.contains(eventTarget as Node))\n    ) {\n        return;\n    }\n\n    nextButton.remove();\n    previousButton.remove();\n}\n\n/**\n * This function that observes the parent element and focuses the newly added instance.\n *\n * @param parentCslp The parent cslp value.\n * @param index The index of the new instance.\n * @returns void\n *\n * We can evolve the retry logic, as different use cases arise.\n * Currently, if the new element is not found after the first mutation, we until\n * WAIT_FOR_NEW_INSTANCE_TIMEOUT, expecting that the new instance/block will be\n * found in later mutations and we can focus + disconnect then.\n * We also ensure there is only one setTimeout scheduled.\n */\nexport function observeParentAndFocusNewInstance({\n    parentCslp,\n    index,\n}: {\n    parentCslp: string;\n    index: number;\n}): void {\n    const parent = document.querySelector(\n        `[data-cslp='${parentCslp}']`\n    ) as HTMLElement;\n\n    if (parent) {\n        const expectedCslp = [parentCslp, index].join(\".\");\n\n        let hasObserverDisconnected = false;\n        let timeoutId: ReturnType<typeof setTimeout> | null = null;\n\n        const mutationObserver = new MutationObserver(\n            (_mutations, observer) => {\n                const newInstance = parent.querySelector(\n                    `[data-cslp='${expectedCslp}']`\n                ) as HTMLElement | null;\n                if (newInstance) {\n                    // this is how we also navigate to parent elements, but parent elements\n                    // are never primitive fields, the instances can be and this steals\n                    // focus from the form and puts it on the canvas.\n                    // So currently for a singleline multiple field, the form opens but we\n                    // come back to the canvas.\n                    // TODO - maybe we should not focus the content-editable\n                    // TODO - temp fix. We remove our empty block div once the new block arrives\n                    // but we focus the element before that and then the block shifts.\n                    // For some reason, the window resize event also does not trigger\n                    setTimeout(() => newInstance.click(), 150);\n                    observer.disconnect();\n                    hasObserverDisconnected = true;\n                    return;\n                }\n                if (!hasObserverDisconnected && !timeoutId) {\n                    // disconnect the observer whether we found the new instance or not\n                    // after timeout\n                    timeoutId = setTimeout(() => {\n                        observer.disconnect();\n                        hasObserverDisconnected = false;\n                    }, WAIT_FOR_NEW_INSTANCE_TIMEOUT);\n                }\n            }\n        );\n        mutationObserver.observe(parent, {\n            childList: true,\n            // watch subtrees as there may be wrapper elements\n            subtree: true,\n            // we don't need to watch for attribute changes\n            attributes: false,\n        });\n    }\n}\n"],"mappings":"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","names":["getChildrenDirection","visualBuilderPostMessage","addInstanceButtons"]}
+{"version":3,"sources":["../../../../src/visualBuilder/utils/multipleElementAddButton.ts"],"sourcesContent":["import { VisualBuilderCslpEventDetails } from \"../types/visualBuilder.types\";\nimport {\n    generateAddInstanceButton,\n    getAddInstanceButtons,\n} from \"../generators/generateAddInstanceButtons\";\nimport visualBuilderPostMessage from \"./visualBuilderPostMessage\";\nimport { VisualBuilderPostMessageEvents } from \"./types/postMessage.types\";\nimport getChildrenDirection from \"./getChildrenDirection\";\nimport { hideOverlay } from \"../generators/generateOverlay\";\nimport { hideHoverOutline } from \"../listeners/mouseHover\";\nimport { ISchemaFieldMap } from \"./types/index.types\";\n\nconst WAIT_FOR_NEW_INSTANCE_TIMEOUT = 4000;\n\n/**\n * The function that handles the add instance buttons for multiple fields.\n * @param eventDetails The details containing the field metadata and cslp value.\n * @param elements The elements object that contain the editable element and visual builder wrapper.\n * @param config The configuration object that contains the expected field data and disabled state.\n * @returns void\n */\nexport function handleAddButtonsForMultiple(\n    eventDetails: VisualBuilderCslpEventDetails,\n    elements: {\n        editableElement: Element | null;\n        visualBuilderContainer: HTMLDivElement | null;\n        resizeObserver: ResizeObserver;\n    },\n    config: {\n        fieldSchema: ISchemaFieldMap;\n        /**\n         * expectedFieldData is the value of the whole multiple field (an array)\n         */\n        expectedFieldData: any;\n        disabled: boolean;\n        label: string | undefined;\n    }\n): void {\n    const { editableElement, visualBuilderContainer, resizeObserver } =\n        elements;\n    const { expectedFieldData, fieldSchema, disabled, label } = config;\n\n    const parentCslpValue =\n        eventDetails.fieldMetadata.multipleFieldMetadata?.parentDetails\n            ?.parentCslpValue;\n\n    if (!editableElement || !parentCslpValue) {\n        return;\n    }\n\n    const direction = getChildrenDirection(editableElement, parentCslpValue);\n    if (direction === \"none\" || !visualBuilderContainer) {\n        return;\n    }\n\n    const targetDOMDimension = editableElement.getBoundingClientRect();\n    removeAddInstanceButtons(\n        {\n            visualBuilderContainer: visualBuilderContainer,\n            eventTarget: null,\n            overlayWrapper: null,\n        },\n        true\n    );\n\n    const overlayWrapper = visualBuilderContainer.querySelector(\n        \".visual-builder__overlay__wrapper\"\n    );\n    const focusedToolbar = visualBuilderContainer.querySelector(\n        \".visual-builder__focused-toolbar\"\n    );\n\n    const hideOverlayAndHoverOutline = () => {\n        hideHoverOutline(visualBuilderContainer);\n        hideOverlay({\n            visualBuilderContainer: visualBuilderContainer,\n            visualBuilderOverlayWrapper: overlayWrapper as HTMLDivElement,\n            focusedToolbar: focusedToolbar as HTMLDivElement,\n            resizeObserver,\n        });\n    };\n\n    if (disabled) {\n        return;\n    }\n\n    // is whole field and not a single instance of the multiple field\n    const isField =\n        eventDetails.fieldMetadata.instance.fieldPathWithIndex ===\n        eventDetails.fieldMetadata.fieldPathWithIndex;\n\n    const prevIndex = isField\n        ? 0\n        : eventDetails.fieldMetadata.multipleFieldMetadata.index;\n    const nextIndex = isField\n        ? expectedFieldData.length\n        : eventDetails.fieldMetadata.multipleFieldMetadata.index + 1;\n\n    const parentCslp = isField ? eventDetails.cslpData : parentCslpValue;\n\n    const onMessageSent = (index: number) => {\n        hideOverlayAndHoverOutline();\n        observeParentAndFocusNewInstance({\n            parentCslp,\n            index,\n        });\n    };\n\n    const previousButton = generateAddInstanceButton({\n        onClick: () => {\n            visualBuilderPostMessage\n                ?.send(VisualBuilderPostMessageEvents.ADD_INSTANCE, {\n                    fieldMetadata: eventDetails.fieldMetadata,\n                    index: prevIndex,\n                })\n                .then(onMessageSent.bind(null, prevIndex));\n        },\n        label,\n        fieldSchema,\n        value: expectedFieldData,\n    });\n\n    const nextButton = generateAddInstanceButton({\n        onClick: () => {\n            visualBuilderPostMessage\n                ?.send(VisualBuilderPostMessageEvents.ADD_INSTANCE, {\n                    fieldMetadata: eventDetails.fieldMetadata,\n                    index: nextIndex,\n                })\n                .then(onMessageSent.bind(null, nextIndex));\n        },\n        label,\n        fieldSchema,\n        value: expectedFieldData,\n    });\n\n    if (!visualBuilderContainer.contains(previousButton)) {\n        visualBuilderContainer.appendChild(previousButton);\n    }\n\n    if (!visualBuilderContainer.contains(nextButton)) {\n        visualBuilderContainer.appendChild(nextButton);\n    }\n\n    if (direction === \"horizontal\") {\n        const middleHeight =\n            targetDOMDimension.top +\n            (targetDOMDimension.bottom - targetDOMDimension.top) / 2 +\n            window.scrollY;\n        previousButton.style.left = `${targetDOMDimension.left}px`;\n        previousButton.style.top = `${middleHeight}px`;\n\n        nextButton.style.left = `${targetDOMDimension.right}px`;\n        nextButton.style.top = `${middleHeight}px`;\n    } else {\n        const middleWidth =\n            targetDOMDimension.left +\n            (targetDOMDimension.right - targetDOMDimension.left) / 2;\n        previousButton.style.left = `${middleWidth}px`;\n        previousButton.style.top = `${\n            targetDOMDimension.top + window.scrollY\n        }px`;\n\n        nextButton.style.left = `${middleWidth}px`;\n        nextButton.style.top = `${\n            targetDOMDimension.bottom + window.scrollY\n        }px`;\n    }\n}\n\nexport function removeAddInstanceButtons(\n    elements: {\n        visualBuilderContainer: HTMLDivElement | null;\n        overlayWrapper: HTMLDivElement | null;\n        eventTarget: EventTarget | null;\n    },\n    forceRemoveAll = false\n): void {\n    const { visualBuilderContainer, overlayWrapper, eventTarget } = elements;\n\n    if (!visualBuilderContainer) {\n        return;\n    }\n\n    if (forceRemoveAll) {\n        const addInstanceButtons = getAddInstanceButtons(\n            visualBuilderContainer,\n            true\n        );\n\n        addInstanceButtons?.forEach((button) => button.remove());\n    }\n\n    const addInstanceButtons = getAddInstanceButtons(visualBuilderContainer);\n\n    if (!addInstanceButtons) {\n        return;\n    }\n\n    const [previousButton, nextButton] = addInstanceButtons;\n\n    if (overlayWrapper?.classList.contains(\"visible\")) {\n        return;\n    }\n\n    if (\n        eventTarget &&\n        (previousButton.contains(eventTarget as Node) ||\n            nextButton.contains(eventTarget as Node))\n    ) {\n        return;\n    }\n\n    nextButton.remove();\n    previousButton.remove();\n}\n\n/**\n * This function that observes the parent element and focuses the newly added instance.\n *\n * @param parentCslp The parent cslp value.\n * @param index The index of the new instance.\n * @returns void\n *\n * We can evolve the retry logic, as different use cases arise.\n * Currently, if the new element is not found after the first mutation, we until\n * WAIT_FOR_NEW_INSTANCE_TIMEOUT, expecting that the new instance/block will be\n * found in later mutations and we can focus + disconnect then.\n * We also ensure there is only one setTimeout scheduled.\n */\nexport function observeParentAndFocusNewInstance({\n    parentCslp,\n    index,\n}: {\n    parentCslp: string;\n    index: number;\n}): void {\n    const parent = document.querySelector(\n        `[data-cslp='${parentCslp}']`\n    ) as HTMLElement;\n\n    if (parent) {\n        const expectedCslp = [parentCslp, index].join(\".\");\n\n        let hasObserverDisconnected = false;\n        let timeoutId: ReturnType<typeof setTimeout> | null = null;\n\n        const mutationObserver = new MutationObserver(\n            (_mutations, observer) => {\n                const newInstance = parent.querySelector(\n                    `[data-cslp='${expectedCslp}']`\n                ) as HTMLElement | null;\n                if (newInstance) {\n                    // this is how we also navigate to parent elements, but parent elements\n                    // are never primitive fields, the instances can be and this steals\n                    // focus from the form and puts it on the canvas.\n                    // So currently for a singleline multiple field, the form opens but we\n                    // come back to the canvas.\n                    // TODO - maybe we should not focus the content-editable\n                    // TODO - temp fix. We remove our empty block div once the new block arrives\n                    // but we focus the element before that and then the block shifts.\n                    // For some reason, the window resize event also does not trigger\n                    setTimeout(() => newInstance.click(), 350);\n                    observer.disconnect();\n                    hasObserverDisconnected = true;\n                    return;\n                }\n                if (!hasObserverDisconnected && !timeoutId) {\n                    // disconnect the observer whether we found the new instance or not\n                    // after timeout\n                    timeoutId = setTimeout(() => {\n                        observer.disconnect();\n                        hasObserverDisconnected = false;\n                    }, WAIT_FOR_NEW_INSTANCE_TIMEOUT);\n                }\n            }\n        );\n        mutationObserver.observe(parent, {\n            childList: true,\n            // watch subtrees as there may be wrapper elements\n            subtree: true,\n            // we don't need to watch for attribute changes\n            attributes: false,\n        });\n    }\n}\n"],"mappings":"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","names":["getChildrenDirection","visualBuilderPostMessage","addInstanceButtons"]}

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

@@ -145,7 +145,7 @@ function observeParentAndFocusNewInstance({
           `[data-cslp='${expectedCslp}']`
         );
         if (newInstance) {
-          setTimeout(() => newInstance.click(), 150);
+          setTimeout(() => newInstance.click(), 350);
           observer.disconnect();
           hasObserverDisconnected = true;
           return;

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/visualBuilder/utils/multipleElementAddButton.ts"],"sourcesContent":["import { VisualBuilderCslpEventDetails } from \"../types/visualBuilder.types\";\nimport {\n    generateAddInstanceButton,\n    getAddInstanceButtons,\n} from \"../generators/generateAddInstanceButtons\";\nimport visualBuilderPostMessage from \"./visualBuilderPostMessage\";\nimport { VisualBuilderPostMessageEvents } from \"./types/postMessage.types\";\nimport getChildrenDirection from \"./getChildrenDirection\";\nimport { hideOverlay } from \"../generators/generateOverlay\";\nimport { hideHoverOutline } from \"../listeners/mouseHover\";\nimport { ISchemaFieldMap } from \"./types/index.types\";\n\nconst WAIT_FOR_NEW_INSTANCE_TIMEOUT = 4000;\n\n/**\n * The function that handles the add instance buttons for multiple fields.\n * @param eventDetails The details containing the field metadata and cslp value.\n * @param elements The elements object that contain the editable element and visual builder wrapper.\n * @param config The configuration object that contains the expected field data and disabled state.\n * @returns void\n */\nexport function handleAddButtonsForMultiple(\n    eventDetails: VisualBuilderCslpEventDetails,\n    elements: {\n        editableElement: Element | null;\n        visualBuilderContainer: HTMLDivElement | null;\n        resizeObserver: ResizeObserver;\n    },\n    config: {\n        fieldSchema: ISchemaFieldMap;\n        /**\n         * expectedFieldData is the value of the whole multiple field (an array)\n         */\n        expectedFieldData: any;\n        disabled: boolean;\n        label: string | undefined;\n    }\n): void {\n    const { editableElement, visualBuilderContainer, resizeObserver } =\n        elements;\n    const { expectedFieldData, fieldSchema, disabled, label } = config;\n\n    const parentCslpValue =\n        eventDetails.fieldMetadata.multipleFieldMetadata?.parentDetails\n            ?.parentCslpValue;\n\n    if (!editableElement || !parentCslpValue) {\n        return;\n    }\n\n    const direction = getChildrenDirection(editableElement, parentCslpValue);\n    if (direction === \"none\" || !visualBuilderContainer) {\n        return;\n    }\n\n    const targetDOMDimension = editableElement.getBoundingClientRect();\n    removeAddInstanceButtons(\n        {\n            visualBuilderContainer: visualBuilderContainer,\n            eventTarget: null,\n            overlayWrapper: null,\n        },\n        true\n    );\n\n    const overlayWrapper = visualBuilderContainer.querySelector(\n        \".visual-builder__overlay__wrapper\"\n    );\n    const focusedToolbar = visualBuilderContainer.querySelector(\n        \".visual-builder__focused-toolbar\"\n    );\n\n    const hideOverlayAndHoverOutline = () => {\n        hideHoverOutline(visualBuilderContainer);\n        hideOverlay({\n            visualBuilderContainer: visualBuilderContainer,\n            visualBuilderOverlayWrapper: overlayWrapper as HTMLDivElement,\n            focusedToolbar: focusedToolbar as HTMLDivElement,\n            resizeObserver,\n        });\n    };\n\n    if (disabled) {\n        return;\n    }\n\n    // is whole field and not a single instance of the multiple field\n    const isField =\n        eventDetails.fieldMetadata.instance.fieldPathWithIndex ===\n        eventDetails.fieldMetadata.fieldPathWithIndex;\n\n    const prevIndex = isField\n        ? 0\n        : eventDetails.fieldMetadata.multipleFieldMetadata.index;\n    const nextIndex = isField\n        ? expectedFieldData.length\n        : eventDetails.fieldMetadata.multipleFieldMetadata.index + 1;\n\n    const parentCslp = isField ? eventDetails.cslpData : parentCslpValue;\n\n    const onMessageSent = (index: number) => {\n        hideOverlayAndHoverOutline();\n        observeParentAndFocusNewInstance({\n            parentCslp,\n            index,\n        });\n    };\n\n    const previousButton = generateAddInstanceButton({\n        onClick: () => {\n            visualBuilderPostMessage\n                ?.send(VisualBuilderPostMessageEvents.ADD_INSTANCE, {\n                    fieldMetadata: eventDetails.fieldMetadata,\n                    index: prevIndex,\n                })\n                .then(onMessageSent.bind(null, prevIndex));\n        },\n        label,\n        fieldSchema,\n        value: expectedFieldData,\n    });\n\n    const nextButton = generateAddInstanceButton({\n        onClick: () => {\n            visualBuilderPostMessage\n                ?.send(VisualBuilderPostMessageEvents.ADD_INSTANCE, {\n                    fieldMetadata: eventDetails.fieldMetadata,\n                    index: nextIndex,\n                })\n                .then(onMessageSent.bind(null, nextIndex));\n        },\n        label,\n        fieldSchema,\n        value: expectedFieldData,\n    });\n\n    if (!visualBuilderContainer.contains(previousButton)) {\n        visualBuilderContainer.appendChild(previousButton);\n    }\n\n    if (!visualBuilderContainer.contains(nextButton)) {\n        visualBuilderContainer.appendChild(nextButton);\n    }\n\n    if (direction === \"horizontal\") {\n        const middleHeight =\n            targetDOMDimension.top +\n            (targetDOMDimension.bottom - targetDOMDimension.top) / 2 +\n            window.scrollY;\n        previousButton.style.left = `${targetDOMDimension.left}px`;\n        previousButton.style.top = `${middleHeight}px`;\n\n        nextButton.style.left = `${targetDOMDimension.right}px`;\n        nextButton.style.top = `${middleHeight}px`;\n    } else {\n        const middleWidth =\n            targetDOMDimension.left +\n            (targetDOMDimension.right - targetDOMDimension.left) / 2;\n        previousButton.style.left = `${middleWidth}px`;\n        previousButton.style.top = `${\n            targetDOMDimension.top + window.scrollY\n        }px`;\n\n        nextButton.style.left = `${middleWidth}px`;\n        nextButton.style.top = `${\n            targetDOMDimension.bottom + window.scrollY\n        }px`;\n    }\n}\n\nexport function removeAddInstanceButtons(\n    elements: {\n        visualBuilderContainer: HTMLDivElement | null;\n        overlayWrapper: HTMLDivElement | null;\n        eventTarget: EventTarget | null;\n    },\n    forceRemoveAll = false\n): void {\n    const { visualBuilderContainer, overlayWrapper, eventTarget } = elements;\n\n    if (!visualBuilderContainer) {\n        return;\n    }\n\n    if (forceRemoveAll) {\n        const addInstanceButtons = getAddInstanceButtons(\n            visualBuilderContainer,\n            true\n        );\n\n        addInstanceButtons?.forEach((button) => button.remove());\n    }\n\n    const addInstanceButtons = getAddInstanceButtons(visualBuilderContainer);\n\n    if (!addInstanceButtons) {\n        return;\n    }\n\n    const [previousButton, nextButton] = addInstanceButtons;\n\n    if (overlayWrapper?.classList.contains(\"visible\")) {\n        return;\n    }\n\n    if (\n        eventTarget &&\n        (previousButton.contains(eventTarget as Node) ||\n            nextButton.contains(eventTarget as Node))\n    ) {\n        return;\n    }\n\n    nextButton.remove();\n    previousButton.remove();\n}\n\n/**\n * This function that observes the parent element and focuses the newly added instance.\n *\n * @param parentCslp The parent cslp value.\n * @param index The index of the new instance.\n * @returns void\n *\n * We can evolve the retry logic, as different use cases arise.\n * Currently, if the new element is not found after the first mutation, we until\n * WAIT_FOR_NEW_INSTANCE_TIMEOUT, expecting that the new instance/block will be\n * found in later mutations and we can focus + disconnect then.\n * We also ensure there is only one setTimeout scheduled.\n */\nexport function observeParentAndFocusNewInstance({\n    parentCslp,\n    index,\n}: {\n    parentCslp: string;\n    index: number;\n}): void {\n    const parent = document.querySelector(\n        `[data-cslp='${parentCslp}']`\n    ) as HTMLElement;\n\n    if (parent) {\n        const expectedCslp = [parentCslp, index].join(\".\");\n\n        let hasObserverDisconnected = false;\n        let timeoutId: ReturnType<typeof setTimeout> | null = null;\n\n        const mutationObserver = new MutationObserver(\n            (_mutations, observer) => {\n                const newInstance = parent.querySelector(\n                    `[data-cslp='${expectedCslp}']`\n                ) as HTMLElement | null;\n                if (newInstance) {\n                    // this is how we also navigate to parent elements, but parent elements\n                    // are never primitive fields, the instances can be and this steals\n                    // focus from the form and puts it on the canvas.\n                    // So currently for a singleline multiple field, the form opens but we\n                    // come back to the canvas.\n                    // TODO - maybe we should not focus the content-editable\n                    // TODO - temp fix. We remove our empty block div once the new block arrives\n                    // but we focus the element before that and then the block shifts.\n                    // For some reason, the window resize event also does not trigger\n                    setTimeout(() => newInstance.click(), 150);\n                    observer.disconnect();\n                    hasObserverDisconnected = true;\n                    return;\n                }\n                if (!hasObserverDisconnected && !timeoutId) {\n                    // disconnect the observer whether we found the new instance or not\n                    // after timeout\n                    timeoutId = setTimeout(() => {\n                        observer.disconnect();\n                        hasObserverDisconnected = false;\n                    }, WAIT_FOR_NEW_INSTANCE_TIMEOUT);\n                }\n            }\n        );\n        mutationObserver.observe(parent, {\n            childList: true,\n            // watch subtrees as there may be wrapper elements\n            subtree: true,\n            // we don't need to watch for attribute changes\n            attributes: false,\n        });\n    }\n}\n"],"mappings":"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","names":["addInstanceButtons"]}
+{"version":3,"sources":["../../../../src/visualBuilder/utils/multipleElementAddButton.ts"],"sourcesContent":["import { VisualBuilderCslpEventDetails } from \"../types/visualBuilder.types\";\nimport {\n    generateAddInstanceButton,\n    getAddInstanceButtons,\n} from \"../generators/generateAddInstanceButtons\";\nimport visualBuilderPostMessage from \"./visualBuilderPostMessage\";\nimport { VisualBuilderPostMessageEvents } from \"./types/postMessage.types\";\nimport getChildrenDirection from \"./getChildrenDirection\";\nimport { hideOverlay } from \"../generators/generateOverlay\";\nimport { hideHoverOutline } from \"../listeners/mouseHover\";\nimport { ISchemaFieldMap } from \"./types/index.types\";\n\nconst WAIT_FOR_NEW_INSTANCE_TIMEOUT = 4000;\n\n/**\n * The function that handles the add instance buttons for multiple fields.\n * @param eventDetails The details containing the field metadata and cslp value.\n * @param elements The elements object that contain the editable element and visual builder wrapper.\n * @param config The configuration object that contains the expected field data and disabled state.\n * @returns void\n */\nexport function handleAddButtonsForMultiple(\n    eventDetails: VisualBuilderCslpEventDetails,\n    elements: {\n        editableElement: Element | null;\n        visualBuilderContainer: HTMLDivElement | null;\n        resizeObserver: ResizeObserver;\n    },\n    config: {\n        fieldSchema: ISchemaFieldMap;\n        /**\n         * expectedFieldData is the value of the whole multiple field (an array)\n         */\n        expectedFieldData: any;\n        disabled: boolean;\n        label: string | undefined;\n    }\n): void {\n    const { editableElement, visualBuilderContainer, resizeObserver } =\n        elements;\n    const { expectedFieldData, fieldSchema, disabled, label } = config;\n\n    const parentCslpValue =\n        eventDetails.fieldMetadata.multipleFieldMetadata?.parentDetails\n            ?.parentCslpValue;\n\n    if (!editableElement || !parentCslpValue) {\n        return;\n    }\n\n    const direction = getChildrenDirection(editableElement, parentCslpValue);\n    if (direction === \"none\" || !visualBuilderContainer) {\n        return;\n    }\n\n    const targetDOMDimension = editableElement.getBoundingClientRect();\n    removeAddInstanceButtons(\n        {\n            visualBuilderContainer: visualBuilderContainer,\n            eventTarget: null,\n            overlayWrapper: null,\n        },\n        true\n    );\n\n    const overlayWrapper = visualBuilderContainer.querySelector(\n        \".visual-builder__overlay__wrapper\"\n    );\n    const focusedToolbar = visualBuilderContainer.querySelector(\n        \".visual-builder__focused-toolbar\"\n    );\n\n    const hideOverlayAndHoverOutline = () => {\n        hideHoverOutline(visualBuilderContainer);\n        hideOverlay({\n            visualBuilderContainer: visualBuilderContainer,\n            visualBuilderOverlayWrapper: overlayWrapper as HTMLDivElement,\n            focusedToolbar: focusedToolbar as HTMLDivElement,\n            resizeObserver,\n        });\n    };\n\n    if (disabled) {\n        return;\n    }\n\n    // is whole field and not a single instance of the multiple field\n    const isField =\n        eventDetails.fieldMetadata.instance.fieldPathWithIndex ===\n        eventDetails.fieldMetadata.fieldPathWithIndex;\n\n    const prevIndex = isField\n        ? 0\n        : eventDetails.fieldMetadata.multipleFieldMetadata.index;\n    const nextIndex = isField\n        ? expectedFieldData.length\n        : eventDetails.fieldMetadata.multipleFieldMetadata.index + 1;\n\n    const parentCslp = isField ? eventDetails.cslpData : parentCslpValue;\n\n    const onMessageSent = (index: number) => {\n        hideOverlayAndHoverOutline();\n        observeParentAndFocusNewInstance({\n            parentCslp,\n            index,\n        });\n    };\n\n    const previousButton = generateAddInstanceButton({\n        onClick: () => {\n            visualBuilderPostMessage\n                ?.send(VisualBuilderPostMessageEvents.ADD_INSTANCE, {\n                    fieldMetadata: eventDetails.fieldMetadata,\n                    index: prevIndex,\n                })\n                .then(onMessageSent.bind(null, prevIndex));\n        },\n        label,\n        fieldSchema,\n        value: expectedFieldData,\n    });\n\n    const nextButton = generateAddInstanceButton({\n        onClick: () => {\n            visualBuilderPostMessage\n                ?.send(VisualBuilderPostMessageEvents.ADD_INSTANCE, {\n                    fieldMetadata: eventDetails.fieldMetadata,\n                    index: nextIndex,\n                })\n                .then(onMessageSent.bind(null, nextIndex));\n        },\n        label,\n        fieldSchema,\n        value: expectedFieldData,\n    });\n\n    if (!visualBuilderContainer.contains(previousButton)) {\n        visualBuilderContainer.appendChild(previousButton);\n    }\n\n    if (!visualBuilderContainer.contains(nextButton)) {\n        visualBuilderContainer.appendChild(nextButton);\n    }\n\n    if (direction === \"horizontal\") {\n        const middleHeight =\n            targetDOMDimension.top +\n            (targetDOMDimension.bottom - targetDOMDimension.top) / 2 +\n            window.scrollY;\n        previousButton.style.left = `${targetDOMDimension.left}px`;\n        previousButton.style.top = `${middleHeight}px`;\n\n        nextButton.style.left = `${targetDOMDimension.right}px`;\n        nextButton.style.top = `${middleHeight}px`;\n    } else {\n        const middleWidth =\n            targetDOMDimension.left +\n            (targetDOMDimension.right - targetDOMDimension.left) / 2;\n        previousButton.style.left = `${middleWidth}px`;\n        previousButton.style.top = `${\n            targetDOMDimension.top + window.scrollY\n        }px`;\n\n        nextButton.style.left = `${middleWidth}px`;\n        nextButton.style.top = `${\n            targetDOMDimension.bottom + window.scrollY\n        }px`;\n    }\n}\n\nexport function removeAddInstanceButtons(\n    elements: {\n        visualBuilderContainer: HTMLDivElement | null;\n        overlayWrapper: HTMLDivElement | null;\n        eventTarget: EventTarget | null;\n    },\n    forceRemoveAll = false\n): void {\n    const { visualBuilderContainer, overlayWrapper, eventTarget } = elements;\n\n    if (!visualBuilderContainer) {\n        return;\n    }\n\n    if (forceRemoveAll) {\n        const addInstanceButtons = getAddInstanceButtons(\n            visualBuilderContainer,\n            true\n        );\n\n        addInstanceButtons?.forEach((button) => button.remove());\n    }\n\n    const addInstanceButtons = getAddInstanceButtons(visualBuilderContainer);\n\n    if (!addInstanceButtons) {\n        return;\n    }\n\n    const [previousButton, nextButton] = addInstanceButtons;\n\n    if (overlayWrapper?.classList.contains(\"visible\")) {\n        return;\n    }\n\n    if (\n        eventTarget &&\n        (previousButton.contains(eventTarget as Node) ||\n            nextButton.contains(eventTarget as Node))\n    ) {\n        return;\n    }\n\n    nextButton.remove();\n    previousButton.remove();\n}\n\n/**\n * This function that observes the parent element and focuses the newly added instance.\n *\n * @param parentCslp The parent cslp value.\n * @param index The index of the new instance.\n * @returns void\n *\n * We can evolve the retry logic, as different use cases arise.\n * Currently, if the new element is not found after the first mutation, we until\n * WAIT_FOR_NEW_INSTANCE_TIMEOUT, expecting that the new instance/block will be\n * found in later mutations and we can focus + disconnect then.\n * We also ensure there is only one setTimeout scheduled.\n */\nexport function observeParentAndFocusNewInstance({\n    parentCslp,\n    index,\n}: {\n    parentCslp: string;\n    index: number;\n}): void {\n    const parent = document.querySelector(\n        `[data-cslp='${parentCslp}']`\n    ) as HTMLElement;\n\n    if (parent) {\n        const expectedCslp = [parentCslp, index].join(\".\");\n\n        let hasObserverDisconnected = false;\n        let timeoutId: ReturnType<typeof setTimeout> | null = null;\n\n        const mutationObserver = new MutationObserver(\n            (_mutations, observer) => {\n                const newInstance = parent.querySelector(\n                    `[data-cslp='${expectedCslp}']`\n                ) as HTMLElement | null;\n                if (newInstance) {\n                    // this is how we also navigate to parent elements, but parent elements\n                    // are never primitive fields, the instances can be and this steals\n                    // focus from the form and puts it on the canvas.\n                    // So currently for a singleline multiple field, the form opens but we\n                    // come back to the canvas.\n                    // TODO - maybe we should not focus the content-editable\n                    // TODO - temp fix. We remove our empty block div once the new block arrives\n                    // but we focus the element before that and then the block shifts.\n                    // For some reason, the window resize event also does not trigger\n                    setTimeout(() => newInstance.click(), 350);\n                    observer.disconnect();\n                    hasObserverDisconnected = true;\n                    return;\n                }\n                if (!hasObserverDisconnected && !timeoutId) {\n                    // disconnect the observer whether we found the new instance or not\n                    // after timeout\n                    timeoutId = setTimeout(() => {\n                        observer.disconnect();\n                        hasObserverDisconnected = false;\n                    }, WAIT_FOR_NEW_INSTANCE_TIMEOUT);\n                }\n            }\n        );\n        mutationObserver.observe(parent, {\n            childList: true,\n            // watch subtrees as there may be wrapper elements\n            subtree: true,\n            // we don't need to watch for attribute changes\n            attributes: false,\n        });\n    }\n}\n"],"mappings":"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","names":["addInstanceButtons"]}

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@contentstack/live-preview-utils",
-    "version": "3.0.1",
+    "version": "3.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",