Merge pull request #123 from contentstack/EB-1884-element-hover-outline

Added outline to hovered elements

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"

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`;
+  }
+}

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

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;
+}