From c65d6a01aa66c8287236337f9b80f7dd282e34b0 Mon Sep 17 00:00:00 2001
From: devAyushDubey <dubeyayush02@gmail.com>
Date: Wed, 15 May 2024 18:01:18 +0530
Subject: [PATCH] Added outline to hovered elements

---
 src/liveEditor/components/visualEditor.tsx    |  6 ++++-
 .../generators/generateHoverOutline.tsx       | 21 ++++++++++++++++
 src/liveEditor/listeners/mouseHover.ts        | 25 ++++++++++++++-----
 src/styles.css                                |  7 ++++++
 4 files changed, 52 insertions(+), 7 deletions(-)
 create mode 100644 src/liveEditor/generators/generateHoverOutline.tsx

diff --git a/src/liveEditor/components/visualEditor.tsx b/src/liveEditor/components/visualEditor.tsx
index 756eaa5..d8b2424 100644
--- a/src/liveEditor/components/visualEditor.tsx
+++ b/src/liveEditor/components/visualEditor.tsx
@@ -51,7 +51,11 @@ function VisualEditorComponent(props: VisualEditorProps): JSX.Element {
                     className="visual-editor__overlay--outline"
                 ></div>
             </div>
-
+            
+            <div
+                className="visual-editor__hover-outline"
+                data-testid="visual-editor__hover-outline">
+            </div>
             <div
                 className="visual-editor__focused-toolbar"
                 data-testid="visual-editor__focused-toolbar"
diff --git a/src/liveEditor/generators/generateHoverOutline.tsx b/src/liveEditor/generators/generateHoverOutline.tsx
new file mode 100644
index 0000000..a011971
--- /dev/null
+++ b/src/liveEditor/generators/generateHoverOutline.tsx
@@ -0,0 +1,21 @@
+
+/**
+ * Adds a hover outline to the target element.
+ * @param targetElement - The element to add the hover outline to.
+ * @returns void
+ */
+export function addHoverOutline(
+  targetElement: Element
+): void {
+
+  const targetElementDimension = targetElement.getBoundingClientRect();
+
+  const hoverOutline = document.querySelector<HTMLDivElement>(".visual-editor__hover-outline");
+
+  if (hoverOutline) {
+    hoverOutline.style.top = `${targetElementDimension.top + window.scrollY}px`;
+    hoverOutline.style.left = `${targetElementDimension.left}px`;
+    hoverOutline.style.width = `${targetElementDimension.width}px`;
+    hoverOutline.style.height = `${targetElementDimension.height}px`;
+  }
+}
\ No newline at end of file
diff --git a/src/liveEditor/listeners/mouseHover.ts b/src/liveEditor/listeners/mouseHover.ts
index b6355e3..c29b07e 100644
--- a/src/liveEditor/listeners/mouseHover.ts
+++ b/src/liveEditor/listeners/mouseHover.ts
@@ -11,6 +11,16 @@ import { getFieldType } from "../utils/getFieldType";
 
 import EventListenerHandlerParams from "./types";
 import { VisualEditor } from "..";
+import { addHoverOutline } from "../generators/generateHoverOutline";
+
+export interface HandleMouseHoverParams
+    extends Pick<
+        EventListenerHandlerParams,
+        "event" | "overlayWrapper" | "visualEditorContainer"
+    > {
+    customCursor: HTMLDivElement | null;
+}
+
 
 function resetCustomCursor(customCursor: HTMLDivElement | null): void {
     if (customCursor) {
@@ -34,12 +44,10 @@ function handleCursorPosition(
     }
 }
 
-export interface HandleMouseHoverParams
-    extends Pick<
-        EventListenerHandlerParams,
-        "event" | "overlayWrapper" | "visualEditorContainer"
-    > {
-    customCursor: HTMLDivElement | null;
+function addOutline(params: any): void {
+    if(!params.event || !params.event.target) return;
+
+    addHoverOutline(params.event.target);
 }
 
 async function handleMouseHover(params: HandleMouseHoverParams): Promise<void> {
@@ -105,6 +113,11 @@ async function handleMouseHover(params: HandleMouseHoverParams): Promise<void> {
             handleCursorPosition(params.event, params.customCursor);
         }
 
+        if(!editableElement.classList.contains('visual-editor__empty-block-parent') 
+            && !editableElement.classList.contains('visual-editor__empty-block')){
+            addOutline(params);
+        }
+
         if (
             VisualEditor.VisualEditorGlobalState.value
                 .previousHoveredTargetDOM === editableElement
diff --git a/src/styles.css b/src/styles.css
index a090071..b620a87 100644
--- a/src/styles.css
+++ b/src/styles.css
@@ -450,3 +450,10 @@ div.multiple div.cslp-tooltip-child:hover:before {
     padding-block: 0px;
     letter-spacing: 0.01rem;
   }
+
+.visual-editor__hover-outline {
+    position: absolute;
+    pointer-events: none;
+    outline: 2px dashed #6C5CE7;
+    transition: all 0.2s ease-in;
+}