npm - @contentstack/live-preview-utils - Versions diffs - 3.0.1 → 3.1.0 - Mend

@contentstack/live-preview-utils 3.0.1 → 3.1.0

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

Files changed (207) hide show

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

@@ -1,7 +1,9 @@
 "use strict";
+var __create = Object.create;
 var __defProp = Object.defineProperty;
 var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
 var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
 var __hasOwnProp = Object.prototype.hasOwnProperty;
 var __export = (target, all) => {
   for (var name in all)
@@ -15,6 +17,14 @@ var __copyProps = (to, from, except, desc) => {
   }
   return to;
 };
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
 var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
 // src/visualBuilder/utils/handleIndividualFields.ts
@@ -37,6 +47,8 @@ var import_multipleElementAddButton = require("./multipleElementAddButton.cjs");
 var import_updateFocussedState = require("./updateFocussedState.cjs");
 var import_types = require("./types/index.types.cjs");
 var import_getMultilinePlaintext = require("./getMultilinePlaintext.cjs");
+var import_postMessage = require("./types/postMessage.types.cjs");
+var import_visualBuilderPostMessage = __toESM(require("./visualBuilderPostMessage.cjs"), 1);
 async function handleIndividualFields(eventDetails, elements) {
   const { fieldMetadata, editableElement } = eventDetails;
   const { visualBuilderContainer, lastEditedField, resizeObserver } = elements;
@@ -54,15 +66,13 @@ async function handleIndividualFields(eventDetails, elements) {
       fieldPathWithIndex
     )
   ]);
-  const expectedFieldInstanceData = Array.isArray(expectedFieldData) ? expectedFieldData.at(fieldMetadata.multipleFieldMetadata.index) : void 0;
   const fieldType = (0, import_getFieldType.getFieldType)(fieldSchema);
   const { isDisabled: disabled } = (0, import_isFieldDisabled.isFieldDisabled)(fieldSchema, eventDetails);
   editableElement.setAttribute(
     import_constants.VISUAL_BUILDER_FIELD_TYPE_ATTRIBUTE_KEY,
     fieldType
   );
-  if (fieldSchema && ((fieldSchema == null ? void 0 : fieldSchema.multiple) || (fieldSchema == null ? void 0 : fieldSchema.data_type) === "reference" && // @ts-ignore
-  (fieldSchema == null ? void 0 : fieldSchema.field_metadata.ref_multiple))) {
+  if (isFieldMultiple(fieldSchema)) {
     if (lastEditedField !== editableElement) {
       const addButtonLabel = fieldSchema.data_type === "blocks" ? (
         // ? `Add ${fieldSchema.display_name ?? "Modular Block"}`
@@ -83,70 +93,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 (!import_constants.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 (import_constants.ALLOWED_INLINE_EDITABLE_FIELD.includes(fieldType)) {
-      let actualEditableField = editableElement2;
+    function enableInlineEditing(expectedFieldData2) {
+      let actualEditableField = editableElement;
       import__.VisualBuilder.VisualBuilderGlobalState.value.focusFieldValue = actualEditableField == null ? void 0 : actualEditableField.innerText;
       const elementComputedDisplay = window.getComputedStyle(actualEditableField).display;
-      let textContent = editableElement2.innerText || editableElement2.textContent || "";
+      let textContent = editableElement.innerText || editableElement.textContent || "";
       if (fieldType === import_types.FieldDataType.MULTILINE) {
         textContent = (0, import_getMultilinePlaintext.getMultilinePlaintext)(actualEditableField);
         actualEditableField.addEventListener("paste", pasteAsPlainText);
       }
-      const expectedTextContent = config.expectedFieldData;
-      if (textContent !== expectedTextContent || (0, import_generatePseudoEditableField.isEllipsisActive)(editableElement2)) {
+      const expectedTextContent = expectedFieldData2;
+      if (expectedTextContent && textContent !== expectedTextContent || (0, import_generatePseudoEditableField.isEllipsisActive)(editableElement)) {
         const pseudoEditableField = (0, import_generatePseudoEditableField.generatePseudoEditableElement)(
-          { editableElement: editableElement2 },
-          { textContent: config.expectedFieldData }
+          { editableElement },
+          { textContent: expectedFieldData2 }
         );
-        editableElement2.style.visibility = "hidden";
+        editableElement.style.visibility = "hidden";
         pseudoEditableField.setAttribute(
           import_constants.VISUAL_BUILDER_FIELD_TYPE_ATTRIBUTE_KEY,
           fieldType
         );
-        visualBuilderContainer2.appendChild(pseudoEditableField);
+        visualBuilderContainer.appendChild(pseudoEditableField);
         actualEditableField = pseudoEditableField;
         if (fieldType === import_types.FieldDataType.MULTILINE)
           actualEditableField.addEventListener(
             "paste",
             pasteAsPlainText
           );
-        elements2.resizeObserver.observe(pseudoEditableField);
+        elements.resizeObserver.observe(pseudoEditableField);
       } else if (elementComputedDisplay === "inline") {
         const onInlineElementInput = (0, import_lodash_es.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"
           );
           (0, import_updateFocussedState.updateFocussedState)({
             editableElement: actualEditableField,
-            visualBuilderContainer: visualBuilderContainer2,
+            visualBuilderContainer,
             overlayWrapper,
             focusedToolbar,
             resizeObserver
@@ -165,6 +180,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;
   (0, import_multipleElementAddButton.removeAddInstanceButtons)(
@@ -210,6 +229,11 @@ function cleanIndividualFieldResidual(elements) {
   }
   if (focusedToolbar) {
     focusedToolbar.innerHTML = "";
+    const toolbarEvents = [import_postMessage.VisualBuilderPostMessageEvents.DELETE_INSTANCE, import_postMessage.VisualBuilderPostMessageEvents.UPDATE_DISCUSSION_ID];
+    toolbarEvents.forEach((event) => {
+      var _a, _b;
+      (_b = (_a = import_visualBuilderPostMessage.default) == null ? void 0 : _a.unregisterEvent) == null ? void 0 : _b.call(_a, event);
+    });
   }
 }
 var pasteAsPlainText = (0, import_lodash_es.debounce)(

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

	@@ -1 +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"]}
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 {\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/legacy/visualBuilder/utils/handleIndividualFields.js CHANGED Viewed

@@ -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 == null ? void 0 : fieldSchema.multiple) || (fieldSchema == null ? void 0 : fieldSchema.data_type) === "reference" && // @ts-ignore
-  (fieldSchema == null ? void 0 : 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 == null ? void 0 : 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,11 @@ function cleanIndividualFieldResidual(elements) {
   }
   if (focusedToolbar) {
     focusedToolbar.innerHTML = "";
+    const toolbarEvents = [VisualBuilderPostMessageEvents.DELETE_INSTANCE, VisualBuilderPostMessageEvents.UPDATE_DISCUSSION_ID];
+    toolbarEvents.forEach((event) => {
+      var _a, _b;
+      (_b = (_a = visualBuilderPostMessage) == null ? void 0 : _a.unregisterEvent) == null ? void 0 : _b.call(_a, event);
+    });
   }
 }
 var pasteAsPlainText = debounce(

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

	@@ -1 +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"]}
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 {\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/legacy/visualBuilder/utils/insertSpaceAtCursor.cjs ADDED Viewed

@@ -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/legacy/visualBuilder/utils/insertSpaceAtCursor.cjs.map ADDED Viewed

@@ -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/legacy/visualBuilder/utils/insertSpaceAtCursor.d.cts ADDED Viewed

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

package/dist/legacy/visualBuilder/utils/insertSpaceAtCursor.d.ts ADDED Viewed

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

package/dist/legacy/visualBuilder/utils/insertSpaceAtCursor.js ADDED Viewed

@@ -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/legacy/visualBuilder/utils/insertSpaceAtCursor.js.map ADDED Viewed

@@ -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/legacy/visualBuilder/utils/multipleElementAddButton.cjs CHANGED Viewed

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