From 85c766a3321818b59da9b3a6224d5f002f36bdbe Mon Sep 17 00:00:00 2001
From: Venkat <venkat@MacBook-Pro.local>
Date: Tue, 17 Sep 2024 16:46:42 +0530
Subject: [PATCH 1/2] fix: Handling unneccessary rerendering on Focus Toolbar

---
 .../utils/handleIndividualFields.ts           | 25 +++++++++++++++++--
 1 file changed, 23 insertions(+), 2 deletions(-)

diff --git a/src/visualBuilder/utils/handleIndividualFields.ts b/src/visualBuilder/utils/handleIndividualFields.ts
index 06da97d1..94e5dbd1 100644
--- a/src/visualBuilder/utils/handleIndividualFields.ts
+++ b/src/visualBuilder/utils/handleIndividualFields.ts
@@ -23,6 +23,7 @@ import { VisualBuilderPostMessageEvents } from "./types/postMessage.types";
 import { updateFocussedState } from "./updateFocussedState";
 import { FieldDataType } from "./types/index.types";
 import { getMultilinePlaintext } from "./getMultilinePlaintext";
+import { addFocusOverlay } from "../generators/generateOverlay";
 
 /**
  * It handles all the fields based on their data type and its "multiple" property.
@@ -184,6 +185,26 @@ export async function handleIndividualFields(
             } else if (elementComputedDisplay === "inline") {
                 // if the editable field is inline
                 const onInlineElementInput = throttle(() => {
+                    const overlayWrapper = visualBuilderContainer.querySelector(
+                        ".visual-builder__overlay__wrapper"
+                    ) as HTMLDivElement;
+                    const focusedToolbar = visualBuilderContainer.querySelector(
+                        ".visual-builder__focused-toolbar"
+                    ) as HTMLDivElement;
+                    const previousSelectedEditableDOM =
+                    VisualBuilder.VisualBuilderGlobalState.value
+                        .previousSelectedEditableDOM;
+                    if(!previousSelectedEditableDOM){
+                        return
+                    }
+                    addFocusOverlay(previousSelectedEditableDOM, overlayWrapper);
+                }, 200);
+                actualEditableField.addEventListener(
+                    "input",
+                    onInlineElementInput
+                );
+
+                const updateFocussedStateOnInput = debounce(() => {
                     const overlayWrapper = visualBuilderContainer.querySelector(
                         ".visual-builder__overlay__wrapper"
                     ) as HTMLDivElement;
@@ -197,10 +218,10 @@ export async function handleIndividualFields(
                         resizeObserver,
                         focusedToolbar,
                     });
-                }, 200);
+                }, 800);
                 actualEditableField.addEventListener(
                     "input",
-                    onInlineElementInput
+                    updateFocussedStateOnInput
                 );
             }
 

From 32f231d3942676ea9bc3fcfba01ffd31d4d6b31a Mon Sep 17 00:00:00 2001
From: Venkat <venkat@MacBook-Pro.local>
Date: Wed, 18 Sep 2024 00:09:31 +0530
Subject: [PATCH 2/2] fix: code cleaing

---
 src/visualBuilder/utils/handleIndividualFields.ts | 3 ---
 1 file changed, 3 deletions(-)

diff --git a/src/visualBuilder/utils/handleIndividualFields.ts b/src/visualBuilder/utils/handleIndividualFields.ts
index 94e5dbd1..74dee2bd 100644
--- a/src/visualBuilder/utils/handleIndividualFields.ts
+++ b/src/visualBuilder/utils/handleIndividualFields.ts
@@ -188,9 +188,6 @@ export async function handleIndividualFields(
                     const overlayWrapper = visualBuilderContainer.querySelector(
                         ".visual-builder__overlay__wrapper"
                     ) as HTMLDivElement;
-                    const focusedToolbar = visualBuilderContainer.querySelector(
-                        ".visual-builder__focused-toolbar"
-                    ) as HTMLDivElement;
                     const previousSelectedEditableDOM =
                     VisualBuilder.VisualBuilderGlobalState.value
                         .previousSelectedEditableDOM;