Merge pull request #290 from contentstack/handle-remove-focus-event

Handle remove focus event

Author: srinad007

src/visualBuilder/generators/generateOverlay.tsx

@@ -106,7 +106,7 @@ export function hideFocusOverlay(elements: HideOverlayParams): void {
         visualBuilderOverlayWrapper,
         focusedToolbar,
         resizeObserver,
-        noTrigger
+        noTrigger,
     } = elements;
 
     if (visualBuilderOverlayWrapper) {
@@ -119,13 +119,23 @@ export function hideFocusOverlay(elements: HideOverlayParams): void {
             }
         });
 
-        if(!noTrigger){
+        if (!noTrigger) {
             sendFieldEvent({
                 visualBuilderContainer,
                 eventType: VisualBuilderPostMessageEvents.UPDATE_FIELD,
             });
+        } else {
+            const { previousSelectedEditableDOM, focusFieldValue } =
+                VisualBuilder.VisualBuilderGlobalState.value || {};
+            if (
+                previousSelectedEditableDOM &&
+                "innerText" in previousSelectedEditableDOM &&
+                focusFieldValue != null
+            ) {
+                previousSelectedEditableDOM.innerText = focusFieldValue;
+            }
         }
-
+        VisualBuilder.VisualBuilderGlobalState.value.focusFieldValue = null;
         cleanIndividualFieldResidual({
             overlayWrapper: visualBuilderOverlayWrapper,
             visualBuilderContainer: visualBuilderContainer,
@@ -136,23 +146,22 @@ export function hideFocusOverlay(elements: HideOverlayParams): void {
 }
 interface ISendFieldEventParams {
     visualBuilderContainer: HTMLElement | null;
-    eventType: VisualBuilderPostMessageEvents.UPDATE_FIELD | VisualBuilderPostMessageEvents.SYNC_FIELD
+    eventType:
+        | VisualBuilderPostMessageEvents.UPDATE_FIELD
+        | VisualBuilderPostMessageEvents.SYNC_FIELD;
 }
 export function sendFieldEvent(options: ISendFieldEventParams): void {
-    const {
-        visualBuilderContainer,
-        eventType
-    } = options;
-    const previousSelectedEditableDOM = VisualBuilder.VisualBuilderGlobalState.value.previousSelectedEditableDOM;
+    const { visualBuilderContainer, eventType } = options;
+    const previousSelectedEditableDOM =
+        VisualBuilder.VisualBuilderGlobalState.value
+            .previousSelectedEditableDOM;
     const pseudoEditableElement = visualBuilderContainer?.querySelector(
         "div.visual-builder__pseudo-editable-element"
     );
     if (
         previousSelectedEditableDOM &&
-        (
-            previousSelectedEditableDOM.hasAttribute("contenteditable") ||
-            pseudoEditableElement
-        )
+        (previousSelectedEditableDOM.hasAttribute("contenteditable") ||
+            pseudoEditableElement)
     ) {
         const actualEditedElement =
             pseudoEditableElement ||
@@ -164,37 +173,31 @@ export function sendFieldEvent(options: ISendFieldEventParams): void {
                 : actualEditedElement.textContent;
 
         const fieldMetadata = extractDetailsFromCslp(
-            previousSelectedEditableDOM.getAttribute(
-                "data-cslp"
-            ) as string
+            previousSelectedEditableDOM.getAttribute("data-cslp") as string
         );
 
         FieldSchemaMap.getFieldSchema(
             fieldMetadata.content_type_uid,
             fieldMetadata.fieldPath
         )
             .then((fieldSchema) => {
-                if (fieldSchema && eventType === VisualBuilderPostMessageEvents.UPDATE_FIELD) {
+                if (
+                    fieldSchema &&
+                    eventType === VisualBuilderPostMessageEvents.UPDATE_FIELD
+                ) {
                     const fieldType = getFieldType(fieldSchema);
-                    if (
-                        fieldType &&
-                        fieldType === FieldDataType.MULTILINE
-                    ) {
-                        data =
-                            getMultilinePlaintext(actualEditedElement);
+                    if (fieldType && fieldType === FieldDataType.MULTILINE) {
+                        data = getMultilinePlaintext(actualEditedElement);
                         (actualEditedElement as HTMLElement).innerText =
                             data as string;
                     }
                 }
             })
             .finally(() => {
-                visualBuilderPostMessage?.send(
-                    eventType,
-                    {
-                        data,
-                        fieldMetadata,
-                    }
-                );
+                visualBuilderPostMessage?.send(eventType, {
+                    data,
+                    fieldMetadata,
+                });
             });
     }
 }

src/visualBuilder/index.ts

@@ -47,6 +47,7 @@ interface VisualBuilderGlobalStateImpl {
     previousSelectedEditableDOM: HTMLElement | Element | null;
     previousHoveredTargetDOM: Element | null;
     previousEmptyBlockParents: Element[] | [];
+    focusFieldValue: string | null;
     audienceMode: boolean;
     locale: string;
     variant: string | null;
@@ -63,6 +64,7 @@ export class VisualBuilder {
             previousSelectedEditableDOM: null,
             previousHoveredTargetDOM: null,
             previousEmptyBlockParents: [],
+            focusFieldValue: null,
             audienceMode: false,
             locale: Config.get().stackDetails.masterLocale || "en-us",
             variant: null,
@@ -336,6 +338,7 @@ export class VisualBuilder {
             previousSelectedEditableDOM: null,
             previousHoveredTargetDOM: null,
             previousEmptyBlockParents: [],
+            focusFieldValue: null,
             audienceMode: false,
             locale: "en-us",
             variant: null,

src/visualBuilder/utils/handleIndividualFields.ts

@@ -141,6 +141,10 @@ export async function handleIndividualFields(
         // * title, single single_line, single multi_line, single number
         if (ALLOWED_INLINE_EDITABLE_FIELD.includes(fieldType)) {
             let actualEditableField = editableElement as HTMLElement;
+
+            VisualBuilder.VisualBuilderGlobalState.value.focusFieldValue =
+                actualEditableField?.innerText;
+
             const elementComputedDisplay =
                 window.getComputedStyle(actualEditableField).display;