Ensure that the selection layer updates when the review panel is toggled (#17021)

GitOrigin-RevId: e5418ae642e0c46f12c633fc71323bb86018c42a

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

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

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