Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Revert "Updated logic for inline editing considering CT changes" #305

Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 0 additions & 2 deletions src/cslp/cslpdata.ts
Original file line number Diff line number Diff line change
Expand Up @@ -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.
Expand Down
122 changes: 57 additions & 65 deletions src/visualBuilder/utils/handleIndividualFields.ts
Original file line number Diff line number Diff line change
Expand Up @@ -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";

/**
Expand Down Expand Up @@ -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);

Expand All @@ -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"
Expand All @@ -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;

Expand All @@ -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";
Expand Down Expand Up @@ -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;
Expand Down
Loading