Merge pull request #279 from contentstack/VE-3825

feat: add support to live sync form on inline editing

Author: hiteshshetty-dev

src/visualBuilder/generators/generateOverlay.tsx

@@ -117,76 +117,83 @@ export function hideFocusOverlay(elements: HideOverlayParams): void {
                 childNode.removeAttribute("style");
             }
         });
+        sendFieldEvent({
+            visualBuilderContainer,
+            eventType: VisualBuilderPostMessageEvents.UPDATE_FIELD,
+        });
 
-        if (
-            VisualBuilder.VisualBuilderGlobalState.value
-                .previousSelectedEditableDOM
-        ) {
-            const pseudoEditableElement = visualBuilderContainer?.querySelector(
-                "div.visual-builder__pseudo-editable-element"
-            );
-
-            if (
-                VisualBuilder.VisualBuilderGlobalState.value.previousSelectedEditableDOM.hasAttribute(
-                    "contenteditable"
-                ) ||
-                pseudoEditableElement
-            ) {
-                const actualEditedElement =
-                    pseudoEditableElement ||
-                    (VisualBuilder.VisualBuilderGlobalState.value
-                        .previousSelectedEditableDOM as HTMLElement);
-
-                let data =
-                    "innerText" in actualEditedElement
-                        ? actualEditedElement.innerText
-                        : actualEditedElement.textContent;
-
-                const fieldMetadata = extractDetailsFromCslp(
-                    VisualBuilder.VisualBuilderGlobalState.value.previousSelectedEditableDOM.getAttribute(
-                        "data-cslp"
-                    ) as string
+        cleanIndividualFieldResidual({
+            overlayWrapper: visualBuilderOverlayWrapper,
+            visualBuilderContainer: visualBuilderContainer,
+            focusedToolbar: focusedToolbar,
+            resizeObserver: resizeObserver,
+        });
+    }
+}
+interface ISendFieldEventParams {
+    visualBuilderContainer: HTMLElement | null;
+    eventType: VisualBuilderPostMessageEvents.UPDATE_FIELD | VisualBuilderPostMessageEvents.SYNC_FIELD
+}
+export function sendFieldEvent(options: ISendFieldEventParams): void {
+    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
+        )
+    ) {
+        const actualEditedElement =
+            pseudoEditableElement ||
+            (previousSelectedEditableDOM as HTMLElement);
+
+        let data =
+            "innerText" in actualEditedElement
+                ? actualEditedElement.innerText
+                : actualEditedElement.textContent;
+
+        const fieldMetadata = extractDetailsFromCslp(
+            previousSelectedEditableDOM.getAttribute(
+                "data-cslp"
+            ) as string
+        );
+
+        FieldSchemaMap.getFieldSchema(
+            fieldMetadata.content_type_uid,
+            fieldMetadata.fieldPath
+        )
+            .then((fieldSchema) => {
+                if (fieldSchema && eventType === VisualBuilderPostMessageEvents.UPDATE_FIELD) {
+                    const fieldType = getFieldType(fieldSchema);
+                    if (
+                        fieldType &&
+                        fieldType === FieldDataType.MULTILINE
+                    ) {
+                        data =
+                            getMultilinePlaintext(actualEditedElement);
+                        (actualEditedElement as HTMLElement).innerText =
+                            data as string;
+                    }
+                }
+            })
+            .finally(() => {
+                visualBuilderPostMessage?.send(
+                    eventType,
+                    {
+                        data,
+                        fieldMetadata,
+                    }
                 );
-
-                FieldSchemaMap.getFieldSchema(
-                    fieldMetadata.content_type_uid,
-                    fieldMetadata.fieldPath
-                )
-                    .then((fieldSchema) => {
-                        if (fieldSchema) {
-                            const fieldType = getFieldType(fieldSchema);
-                            if (
-                                fieldType &&
-                                fieldType === FieldDataType.MULTILINE
-                            ) {
-                                data =
-                                    getMultilinePlaintext(actualEditedElement);
-                                (actualEditedElement as HTMLElement).innerText =
-                                    data as string;
-                            }
-                        }
-                    })
-                    .finally(() => {
-                        visualBuilderPostMessage?.send(
-                            VisualBuilderPostMessageEvents.UPDATE_FIELD,
-                            {
-                                data,
-                                fieldMetadata,
-                            }
-                        );
-                    });
-            }
-
-            cleanIndividualFieldResidual({
-                overlayWrapper: visualBuilderOverlayWrapper,
-                visualBuilderContainer: visualBuilderContainer,
-                focusedToolbar: focusedToolbar,
-                resizeObserver: resizeObserver,
             });
-        }
     }
 }
-
 interface HideOverlayParams
     extends Pick<
         EventListenerHandlerParams,

src/visualBuilder/utils/handleFieldMouseDown.ts

@@ -1,16 +1,37 @@
+import { throttle } from "lodash-es";
+import { sendFieldEvent } from "../generators/generateOverlay";
 import {
+    ALLOWED_INLINE_EDITABLE_FIELD,
     VISUAL_BUILDER_FIELD_TYPE_ATTRIBUTE_KEY,
     numericInputRegex,
 } from "./constants";
 import { FieldDataType } from "./types/index.types";
+import { VisualBuilderPostMessageEvents } from "./types/postMessage.types";
 
 export function handleFieldInput(e: Event): void {
     const event = e as InputEvent;
-
-    if (event.type === "input") {
-        // do something
+    const targetElement = event.target as HTMLElement;
+    const fieldType = targetElement.getAttribute(
+        VISUAL_BUILDER_FIELD_TYPE_ATTRIBUTE_KEY
+    ) as FieldDataType | null;
+    if (event.type === "input" && ALLOWED_INLINE_EDITABLE_FIELD.includes(fieldType as FieldDataType)) {
+        throttledFieldSync();
     }
 }
+const throttledFieldSync = throttle(() => {
+    try {
+        const visualBuilderContainer = document.querySelector(
+            ".visual-builder__container"
+        ) as HTMLElement;
+        if(!visualBuilderContainer) return;
+        sendFieldEvent({
+            visualBuilderContainer,
+            eventType: VisualBuilderPostMessageEvents.SYNC_FIELD,
+        })  
+    } catch (error) {
+        console.error("Error in throttledFieldSync", error)
+    }
+}, 300);
 
 export function handleFieldKeyDown(e: Event): void {
     const event = e as KeyboardEvent;

src/visualBuilder/utils/types/postMessage.types.ts

@@ -2,6 +2,7 @@ export enum VisualBuilderPostMessageEvents {
     INIT = "init",
     ADD_INSTANCE = "add-instance",
     UPDATE_FIELD = "update-field",
+    SYNC_FIELD = 'sync-field',
     OPEN_ASSET_MODAL = "open-asset-modal",
     OPEN_REFERENCE_MODAL = "open-reference-modal",
     OPEN_QUICK_FORM = "open-quick-form",