Merge pull request #461 from contentstack/VE-6600-Hover-Toolbar-Support

Fix: HoverToolbar to not render when focussed

Author: csAyushDubey

src/visualBuilder/generators/generateOverlay.tsx

@@ -216,6 +216,7 @@ interface HideOverlayParams
 }
 
 export function hideOverlay(params: HideOverlayParams): void {
+    VisualBuilder.VisualBuilderGlobalState.value.isFocussed = false;
     const focusElementObserver =
         VisualBuilder.VisualBuilderGlobalState.value.focusElementObserver;
     if (focusElementObserver) {

src/visualBuilder/index.ts

@@ -68,6 +68,7 @@ interface VisualBuilderGlobalStateImpl {
     variant: string | null;
     focusElementObserver: MutationObserver | null;
     referenceParentMap: Record<string, string>;
+    isFocussed: boolean;
 }
 
 let threadsPayload: IThreadDTO[] = [];
@@ -90,6 +91,7 @@ export class VisualBuilder {
             variant: null,
             focusElementObserver: null,
             referenceParentMap: {},
+            isFocussed: false,
         });
 
     private handlePositionChange(editableElement: HTMLElement) {
@@ -425,6 +427,7 @@ export class VisualBuilder {
             variant: null,
             focusElementObserver: null,
             referenceParentMap: {},
+            isFocussed: false,
         };
 
         // Remove DOM elements

src/visualBuilder/listeners/mouseClick.ts

@@ -271,6 +271,7 @@ function addOverlayAndToolbar(
     editableElement: Element,
     isVariant: boolean
 ) {
+    VisualBuilder.VisualBuilderGlobalState.value.isFocussed = true;
     addOverlay({
         overlayWrapper: params.overlayWrapper,
         resizeObserver: params.resizeObserver,

src/visualBuilder/listeners/mouseHover.ts

@@ -372,16 +372,19 @@ const throttledMouseHover = throttle(async (params: HandleMouseHoverParams) => {
             fieldPath,
             fieldMetadata,
         });
-        showHoverToolbar({
+        const isFocussed= VisualBuilder.VisualBuilderGlobalState.value.isFocussed;
+        if(!isFocussed) {
+            showHoverToolbar({
             event: params.event,
             overlayWrapper: params.overlayWrapper,
             visualBuilderContainer: params.visualBuilderContainer,
             previousSelectedEditableDOM:
                 VisualBuilder.VisualBuilderGlobalState.value
                     .previousSelectedEditableDOM,
-            focusedToolbar: params.focusedToolbar,
-            resizeObserver: params.resizeObserver,
-        });
+                focusedToolbar: params.focusedToolbar,
+                resizeObserver: params.resizeObserver,
+            });
+        }
     }
 
     if (