From 7823d8411c2583e3251125722295849462ea78b3 Mon Sep 17 00:00:00 2001
From: kudlajz <kudlajzzz@gmail.com>
Date: Mon, 26 Feb 2024 15:29:12 +0100
Subject: [PATCH] Control hover state via React

---
 .../Gallery/GalleryTile.module.scss           |  2 +-
 .../components/Gallery/GalleryTile.tsx        | 20 +++++++++++++++++--
 2 files changed, 19 insertions(+), 3 deletions(-)

diff --git a/packages/slate-editor/src/extensions/galleries/components/Gallery/GalleryTile.module.scss b/packages/slate-editor/src/extensions/galleries/components/Gallery/GalleryTile.module.scss
index 9917fe4b0..51b0fb3b1 100644
--- a/packages/slate-editor/src/extensions/galleries/components/Gallery/GalleryTile.module.scss
+++ b/packages/slate-editor/src/extensions/galleries/components/Gallery/GalleryTile.module.scss
@@ -86,7 +86,7 @@
     height: 100%;
     z-index: 2;
 
-    &:hover {
+    &.isHovering {
         background: linear-gradient(0deg, rgba(0, 0, 0, 0.3) 0%, rgba(0, 0, 0, 0.3) 100%);
 
         .Actions {
diff --git a/packages/slate-editor/src/extensions/galleries/components/Gallery/GalleryTile.tsx b/packages/slate-editor/src/extensions/galleries/components/Gallery/GalleryTile.tsx
index f8c387b85..605365b36 100644
--- a/packages/slate-editor/src/extensions/galleries/components/Gallery/GalleryTile.tsx
+++ b/packages/slate-editor/src/extensions/galleries/components/Gallery/GalleryTile.tsx
@@ -1,7 +1,7 @@
 import { GalleryPadding } from '@prezly/slate-types';
 import classNames from 'classnames';
 import type { CSSProperties } from 'react';
-import React, { forwardRef } from 'react';
+import React, { forwardRef, useState } from 'react';
 
 import { Button, ImageSizeWarning, ImageWithLoadingPlaceholder } from '#components';
 import { Crop, Delete } from '#icons';
@@ -51,6 +51,16 @@ export const GalleryTile = forwardRef<HTMLDivElement, Props>(function GalleryTil
     },
     ref,
 ) {
+    const [isHovering, setHovering] = useState(false);
+
+    function handleShowOverlay() {
+        setTimeout(() => setHovering(true), 0);
+    }
+
+    function handleHideOverlay() {
+        setHovering(false);
+    }
+
     return (
         <div
             className={classNames(styles.GalleryTile, className, {
@@ -67,7 +77,13 @@ export const GalleryTile = forwardRef<HTMLDivElement, Props>(function GalleryTil
         >
             {clone && <div className={styles.Clone} />}
             {!dragging && (
-                <div className={styles.Overlay}>
+                <div
+                    className={classNames(styles.Overlay, {
+                        [styles.isHovering]: isHovering,
+                    })}
+                    onMouseEnter={handleShowOverlay}
+                    onMouseLeave={handleHideOverlay}
+                >
                     <div className={styles.Actions}>
                         <CropButton isSmall={withSmallButtons} onCrop={onCrop} />
                         <DeleteButton isSmall={withSmallButtons} onDelete={onDelete} />