From 00d043cc722184909c048bcdbdb475b7c51e6971 Mon Sep 17 00:00:00 2001
From: Alf Eaton <alf.eaton@overleaf.com>
Date: Thu, 15 Feb 2024 09:42:47 +0000
Subject: [PATCH] Ensure that the selection layer updates when the review panel
 is toggled (#17021)

GitOrigin-RevId: e5418ae642e0c46f12c633fc71323bb86018c42a
---
 .../extensions/changes/change-manager.ts       | 18 +++++++++++++++++-
 .../source-editor/extensions/draw-selection.ts |  4 +++-
 .../hooks/use-codemirror-scope.ts              |  8 ++++++++
 3 files changed, 28 insertions(+), 2 deletions(-)

diff --git a/services/web/frontend/js/features/source-editor/extensions/changes/change-manager.ts b/services/web/frontend/js/features/source-editor/extensions/changes/change-manager.ts
index ea39cf2a82..b26a818e9d 100644
--- a/services/web/frontend/js/features/source-editor/extensions/changes/change-manager.ts
+++ b/services/web/frontend/js/features/source-editor/extensions/changes/change-manager.ts
@@ -6,7 +6,12 @@ import {
   updateChangesTopPadding,
   updateSetsVerticalOverflow,
 } from '../vertical-overflow'
-import { EditorSelection, EditorState } from '@codemirror/state'
+import {
+  EditorSelection,
+  EditorState,
+  StateEffect,
+  TransactionSpec,
+} from '@codemirror/state'
 import { EditorView, ViewUpdate } from '@codemirror/view'
 import { fullHeightCoordsAtPos } from '../../utils/layer'
 import { debounce } from 'lodash'
@@ -14,6 +19,7 @@ import { Change, EditOperation } from '../../../../../../types/change'
 import { ThreadId } from '../../../../../../types/review-panel/review-panel'
 import { isDeleteOperation, isInsertOperation } from '@/utils/operations'
 import { DocumentContainer } from '@/features/ide-react/editor/document-container'
+import { updateHasEffect } from '@/features/source-editor/utils/effects'
 
 // With less than this number of entries, don't bother culling to avoid
 // little UI jumps when scrolling.
@@ -597,3 +603,13 @@ export const createChangeManager = (
     },
   }
 }
+
+const reviewPanelToggledEffect = StateEffect.define()
+
+export const updateHasReviewPanelToggledEffect = updateHasEffect(
+  reviewPanelToggledEffect
+)
+
+export const reviewPanelToggled = (): TransactionSpec => ({
+  effects: reviewPanelToggledEffect.of(null),
+})
diff --git a/services/web/frontend/js/features/source-editor/extensions/draw-selection.ts b/services/web/frontend/js/features/source-editor/extensions/draw-selection.ts
index 01278316ce..0c7df441e7 100644
--- a/services/web/frontend/js/features/source-editor/extensions/draw-selection.ts
+++ b/services/web/frontend/js/features/source-editor/extensions/draw-selection.ts
@@ -3,6 +3,7 @@ import { EditorView, layer } from '@codemirror/view'
 import { rectangleMarkerForRange } from '../utils/layer'
 import { updateHasMouseDownEffect } from './visual/selection'
 import browser from './browser'
+import { updateHasReviewPanelToggledEffect } from './changes/change-manager'
 
 /**
  * The built-in extension which draws the cursor and selection(s) in layers,
@@ -97,7 +98,8 @@ const selectionLayer = layer({
       update.docChanged ||
       update.selectionSet ||
       update.viewportChanged ||
-      updateHasMouseDownEffect(update)
+      updateHasMouseDownEffect(update) ||
+      updateHasReviewPanelToggledEffect(update)
     )
   },
   class: 'cm-selectionLayer',
diff --git a/services/web/frontend/js/features/source-editor/hooks/use-codemirror-scope.ts b/services/web/frontend/js/features/source-editor/hooks/use-codemirror-scope.ts
index 28622cdc01..d9f2bafc85 100644
--- a/services/web/frontend/js/features/source-editor/hooks/use-codemirror-scope.ts
+++ b/services/web/frontend/js/features/source-editor/hooks/use-codemirror-scope.ts
@@ -43,6 +43,7 @@ import {
 import {
   createChangeManager,
   dispatchEditorEvent,
+  reviewPanelToggled,
 } from '../extensions/changes/change-manager'
 import { setKeybindings } from '../extensions/keybindings'
 import { Highlight } from '../../../../../types/highlight'
@@ -56,6 +57,7 @@ import isValidTexFile from '@/main/is-valid-tex-file'
 import { captureException } from '@/infrastructure/error-reporter'
 import grammarlyExtensionPresent from '@/shared/utils/grammarly'
 import { DocumentContainer } from '@/features/ide-react/editor/document-container'
+import { useLayoutContext } from '@/shared/context/layout-context'
 
 function useCodeMirrorScope(view: EditorView) {
   const ide = useIdeContext()
@@ -69,6 +71,8 @@ function useCodeMirrorScope(view: EditorView) {
   const { logEntryAnnotations, editedSinceCompileStarted, compiling } =
     useCompileContext()
 
+  const { reviewPanelOpen, miniReviewPanelVisible } = useLayoutContext()
+
   const [loadingThreads] = useScopeValue<boolean>('loadingThreads')
 
   const [currentDoc] = useScopeValue<DocumentContainer | null>(
@@ -515,6 +519,10 @@ function useCodeMirrorScope(view: EditorView) {
   }, [view])
 
   useEventListener('learnedWords:reset', handleResetLearnedWords)
+
+  useEffect(() => {
+    view.dispatch(reviewPanelToggled())
+  }, [reviewPanelOpen, miniReviewPanelVisible, view])
 }
 
 export default useCodeMirrorScope