Merge pull request #14025 from overleaf/td-review-panel-hover-scroll

Review panel migration: end entry indicator hover on editor scroll

GitOrigin-RevId: fb895d9e4960b1c038c48fefd187f8af415db1da

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

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

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

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,
   }