Merge pull request #305 from contentstack/revert-304-VE-4048-content-…

…type-change-handling

Revert "Updated logic for inline editing considering CT changes"

src/cslp/cslpdata.ts

@@ -109,8 +109,6 @@ function getParentPathDetails(
 
 /**
  * Returns metadata for a multiple field in a content entry.
- * @summary ONLY USE THESE RETURNED VALUES WHEN FIELD IS MULTIPLE
- * @summary IT GIVES WRONG DATA IF FIELD IS NOT MULTIPLE
  * @param content_type_uid - The UID of the content type.
  * @param entry_uid - The UID of the content entry.
  * @param locale - The locale of the content entry.

src/visualBuilder/utils/handleIndividualFields.ts

@@ -14,12 +14,14 @@ import { getFieldData } from "./getFieldData";
 import { getFieldType } from "./getFieldType";
 import { handleFieldInput, handleFieldKeyDown } from "./handleFieldMouseDown";
 import { isFieldDisabled } from "./isFieldDisabled";
+import visualBuilderPostMessage from "./visualBuilderPostMessage";
 import {
     handleAddButtonsForMultiple,
     removeAddInstanceButtons,
 } from "./multipleElementAddButton";
+import { VisualBuilderPostMessageEvents } from "./types/postMessage.types";
 import { updateFocussedState } from "./updateFocussedState";
-import { FieldDataType, ISchemaFieldMap } from "./types/index.types";
+import { FieldDataType } from "./types/index.types";
 import { getMultilinePlaintext } from "./getMultilinePlaintext";
 
 /**
@@ -53,6 +55,10 @@ export async function handleIndividualFields(
             fieldPathWithIndex
         ),
     ]);
+    // if value is an array, get the value for the instance
+    const expectedFieldInstanceData = Array.isArray(expectedFieldData)
+        ? expectedFieldData.at(fieldMetadata.multipleFieldMetadata.index)
+        : undefined;
 
     const fieldType = getFieldType(fieldSchema);
 
@@ -63,7 +69,13 @@ export async function handleIndividualFields(
         fieldType
     );
 
-    if (isFieldMultiple(fieldSchema)) {
+    if (
+        fieldSchema &&
+        (fieldSchema?.multiple ||
+            (fieldSchema?.data_type === "reference" &&
+                // @ts-ignore
+                fieldSchema?.field_metadata.ref_multiple))
+    ) {
         if (lastEditedField !== editableElement) {
             const addButtonLabel =
                 fieldSchema.data_type === "blocks"
@@ -86,63 +98,52 @@ export async function handleIndividualFields(
                 }
             );
         }
-    } 
 
-    !disabled && handleInlineEditing();
+        // * fields could be handled as they are in a single instance
+        if (eventDetails.fieldMetadata.multipleFieldMetadata.index > -1) {
+            handleSingleField(
+                {
+                    editableElement,
+                    visualBuilderContainer,
+                    resizeObserver: elements.resizeObserver,
+                },
+                { expectedFieldData: expectedFieldInstanceData, disabled }
+            );
+        }
+    } else {
+        handleSingleField(
+            {
+                editableElement,
+                visualBuilderContainer,
+                resizeObserver: elements.resizeObserver,
+            },
+            { expectedFieldData, disabled }
+        );
+    }
 
     /**
-     * Handles inline editing for supported fields.
+     * Handles all the fields based on their data type.
      */
-    function handleInlineEditing() {
-
-        if (!ALLOWED_INLINE_EDITABLE_FIELD.includes(fieldType)) return;
-
-        // Instances of ALLOWED_INLINE_EDITABLE_FIELD will always have index at last
-        const index = Number(fieldMetadata.instance.fieldPathWithIndex.split('.').at(-1));
-        const isInstance = Number.isFinite(index);
-
-        // CASE 1: Handle inline editing for multiple field
-        if(isFieldMultiple(fieldSchema)) {
-            let expectedFieldInstanceData = null;
-            if(Array.isArray(expectedFieldData)) {
-                // CASE: Selected element is the multiple field itself.
-                // Inline Editing not allowed on field, only allowed on instance.
-                // (We recieve unreliable `multipleFieldMetadata` in this case)
-                if(!isInstance) {
-                    return;
-                }
-
-                // CASE: Value does not exist for the provided instance's index
-                if(index >= expectedFieldData.length) {
-                    // TODO: What should be the behavior here?
-                }
-                else {
-                    expectedFieldInstanceData = expectedFieldData.at(index);
-                }
-            }
-            // CASE: ContentType's Field changed from single to multiple, while Entry's Field still single.
-            else {
-                expectedFieldInstanceData = expectedFieldData;
-            }
+    function handleSingleField(
+        elements: {
+            editableElement: Element;
+            visualBuilderContainer: HTMLDivElement;
+            resizeObserver: ResizeObserver;
+        },
+        config: { expectedFieldData: string; disabled?: boolean }
+    ) {
+        const { editableElement, visualBuilderContainer } = elements;
 
-            enableInlineEditing(expectedFieldInstanceData);     
-        }
-        // CASE 2: Handle inline editing for a single field
-        else {
-            let expectedFieldInstanceData = null;
-            // CASE: ContentType's Field changed from multiple to single, while Entry's Field still multiple.
-            if(isInstance) {
-                if(index !== 0) {
-                    // TODO: Handle this with UX
-                    // Let user know, CSLP is invalid due to change in Content Type
-                    return;
-                }
-                expectedFieldInstanceData = Array.isArray(expectedFieldData) ? expectedFieldData.at(0) : expectedFieldData;
-            }
-            enableInlineEditing(expectedFieldInstanceData ?? expectedFieldData);
+        if (config.disabled) {
+            return;
         }
 
-        function enableInlineEditing(expectedFieldData: any) {
+        // * title, single single_line, single multi_line, single number
+        if (ALLOWED_INLINE_EDITABLE_FIELD.includes(fieldType)) {
+            if(fieldSchema.multiple){
+                const isFieldContainer = Number(fieldMetadata.instance.fieldPathWithIndex.split('.').at(-1))
+                if(Number.isNaN(isFieldContainer)) return;
+            }
 
             let actualEditableField = editableElement as HTMLElement;
 
@@ -161,16 +162,15 @@ export async function handleIndividualFields(
                 textContent = getMultilinePlaintext(actualEditableField);
                 actualEditableField.addEventListener("paste", pasteAsPlainText);
             }
-            const expectedTextContent = expectedFieldData;
+            const expectedTextContent = config.expectedFieldData;
             if (
-                (expectedTextContent && textContent !== expectedTextContent) ||
+                textContent !== expectedTextContent ||
                 isEllipsisActive(editableElement as HTMLElement)
             ) {
-
-                // TODO: Testing will be done in the E2E.
+                // TODO: Testing will be don in the E2E.
                 const pseudoEditableField = generatePseudoEditableElement(
                     { editableElement: editableElement as HTMLElement },
-                    { textContent: expectedFieldData }
+                    { textContent: config.expectedFieldData }
                 );
 
                 (editableElement as HTMLElement).style.visibility = "hidden";
@@ -226,14 +226,6 @@ export async function handleIndividualFields(
     }
 }
 
-function isFieldMultiple(fieldSchema: ISchemaFieldMap): boolean {
-    return fieldSchema &&
-    (fieldSchema.multiple ||
-        (fieldSchema.data_type === "reference" &&
-            // @ts-ignore
-            fieldSchema.field_metadata.ref_multiple));
-}
-
 export function cleanIndividualFieldResidual(elements: {
     overlayWrapper: HTMLDivElement;
     visualBuilderContainer: HTMLDivElement | null;