From ab6ce285acb85db7c5c66a001d3abc94eecbf5c6 Mon Sep 17 00:00:00 2001
From: Tim Down <158919+timdown@users.noreply.github.com>
Date: Thu, 27 Jul 2023 10:53:40 +0100
Subject: [PATCH] Merge pull request #14025 from
 overleaf/td-review-panel-hover-scroll

Review panel migration: end entry indicator hover on editor scroll

GitOrigin-RevId: fb895d9e4960b1c038c48fefd187f8af415db1da
---
 .../entries/aggregate-change-entry.tsx         |  4 ++--
 .../review-panel/entries/change-entry.tsx      |  4 ++--
 .../review-panel/entries/comment-entry.tsx     |  4 ++--
 .../review-panel/hooks/use-indicator-hover.ts  | 18 ++++++++++++++----
 4 files changed, 20 insertions(+), 10 deletions(-)

diff --git a/services/web/frontend/js/features/source-editor/components/review-panel/entries/aggregate-change-entry.tsx b/services/web/frontend/js/features/source-editor/components/review-panel/entries/aggregate-change-entry.tsx
index cc5bd89a9f..be186dd2af 100644
--- a/services/web/frontend/js/features/source-editor/components/review-panel/entries/aggregate-change-entry.tsx
+++ b/services/web/frontend/js/features/source-editor/components/review-panel/entries/aggregate-change-entry.tsx
@@ -37,7 +37,7 @@ function AggregateChangeEntry({
   const {
     hoverCoords,
     indicatorRef,
-    handleEntryMouseLeave,
+    endHover,
     handleIndicatorMouseEnter,
     handleIndicatorClick,
   } = useIndicatorHover()
@@ -84,7 +84,7 @@ function AggregateChangeEntry({
       id={entryId}
       hoverCoords={hoverCoords}
       onClick={handleEntryClick}
-      onMouseLeave={handleEntryMouseLeave}
+      onMouseLeave={endHover}
     >
       <EntryCallout className="rp-entry-callout-aggregate" />
       <EntryIndicator
diff --git a/services/web/frontend/js/features/source-editor/components/review-panel/entries/change-entry.tsx b/services/web/frontend/js/features/source-editor/components/review-panel/entries/change-entry.tsx
index c71720b734..dac1eb1727 100644
--- a/services/web/frontend/js/features/source-editor/components/review-panel/entries/change-entry.tsx
+++ b/services/web/frontend/js/features/source-editor/components/review-panel/entries/change-entry.tsx
@@ -37,7 +37,7 @@ function ChangeEntry({
   const {
     hoverCoords,
     indicatorRef,
-    handleEntryMouseLeave,
+    endHover,
     handleIndicatorMouseEnter,
     handleIndicatorClick,
   } = useIndicatorHover()
@@ -75,7 +75,7 @@ function ChangeEntry({
       id={entryId}
       hoverCoords={hoverCoords}
       onClick={handleEntryClick}
-      onMouseLeave={handleEntryMouseLeave}
+      onMouseLeave={endHover}
     >
       <EntryCallout className={`rp-entry-callout-${type}`} />
       <EntryIndicator
diff --git a/services/web/frontend/js/features/source-editor/components/review-panel/entries/comment-entry.tsx b/services/web/frontend/js/features/source-editor/components/review-panel/entries/comment-entry.tsx
index 1ed32a4044..50e2f178a6 100644
--- a/services/web/frontend/js/features/source-editor/components/review-panel/entries/comment-entry.tsx
+++ b/services/web/frontend/js/features/source-editor/components/review-panel/entries/comment-entry.tsx
@@ -47,7 +47,7 @@ function CommentEntry({
   const {
     hoverCoords,
     indicatorRef,
-    handleEntryMouseLeave,
+    endHover,
     handleIndicatorMouseEnter,
     handleIndicatorClick,
   } = useIndicatorHover()
@@ -125,7 +125,7 @@ function CommentEntry({
       id={entryId}
       hoverCoords={hoverCoords}
       onClick={handleEntryClick}
-      onMouseLeave={handleEntryMouseLeave}
+      onMouseLeave={endHover}
     >
       {/* eslint-disable-next-line jsx-a11y/click-events-have-key-events, jsx-a11y/no-static-element-interactions */}
       <div
diff --git a/services/web/frontend/js/features/source-editor/components/review-panel/hooks/use-indicator-hover.ts b/services/web/frontend/js/features/source-editor/components/review-panel/hooks/use-indicator-hover.ts
index c1517ee706..ee8128761b 100644
--- a/services/web/frontend/js/features/source-editor/components/review-panel/hooks/use-indicator-hover.ts
+++ b/services/web/frontend/js/features/source-editor/components/review-panel/hooks/use-indicator-hover.ts
@@ -1,4 +1,4 @@
-import { useRef, useState } from 'react'
+import { useCallback, useEffect, useRef, useState } from 'react'
 import { flushSync } from 'react-dom'
 import { useReviewPanelUpdaterFnsContext } from '../../../context/review-panel/review-panel-context'
 import { useLayoutContext } from '../../../../../shared/context/layout-context'
@@ -18,7 +18,7 @@ function useIndicatorHover() {
     useReviewPanelUpdaterFnsContext()
   const indicatorRef = useRef<HTMLDivElement | null>(null)
 
-  const handleEntryMouseLeave = () => {
+  const endHover = useCallback(() => {
     if (!reviewPanelOpen && !layoutToLeft) {
       // Use flushSync to ensure that React renders immediately. This is
       // necessary to ensure that the subsequent layout update acts on the
@@ -29,7 +29,7 @@ function useIndicatorHover() {
       })
       handleLayoutChange(true)
     }
-  }
+  }, [handleLayoutChange, layoutToLeft, reviewPanelOpen, setLayoutSuspended])
 
   const handleIndicatorMouseEnter = () => {
     if (!layoutToLeft) {
@@ -48,10 +48,20 @@ function useIndicatorHover() {
     toggleReviewPanel()
   }
 
+  useEffect(() => {
+    if (hoverCoords) {
+      window.addEventListener('editor:scroll', endHover)
+
+      return () => {
+        window.removeEventListener('editor:scroll', endHover)
+      }
+    }
+  }, [hoverCoords, endHover])
+
   return {
     hoverCoords,
     indicatorRef,
-    handleEntryMouseLeave,
+    endHover,
     handleIndicatorMouseEnter,
     handleIndicatorClick,
   }