Revert "Allow position of review tooltip to be calculated automatically (#21803)" (#22022)

This reverts commit 7d285a9c76032a3238422e15a73ae4b819612b31.

GitOrigin-RevId: 792391619bd6f2a9483428088c31ece09a441b33

services/web/frontend/js/features/source-editor/extensions/index.ts

@@ -95,16 +95,6 @@ export const createExtensions = (options: Record<string, any>): Extension[] => [
   // to avoid cutting off tooltips which overflow the editor.
   tooltips({
     parent: document.body,
-    tooltipSpace(view) {
-      const { top, bottom } = view.scrollDOM.getBoundingClientRect()
-
-      return {
-        top,
-        left: 0,
-        bottom,
-        right: window.innerWidth,
-      }
-    },
   }),
   keymaps,
   goToLinePanel(),

services/web/frontend/js/features/source-editor/extensions/review-tooltip.ts

@@ -4,7 +4,6 @@ import {
   EditorView,
   showTooltip,
   Tooltip,
-  TooltipView,
 } from '@codemirror/view'
 import {
   Extension,
@@ -12,16 +11,16 @@ import {
   StateEffect,
   Range,
   SelectionRange,
-  EditorState,
 } from '@codemirror/state'
 import { isSplitTestEnabled } from '@/utils/splitTestUtils'
 import { v4 as uuid } from 'uuid'
+import { isCursorNearViewportTop } from '../utils/is-cursor-near-edge'
 
 export const addNewCommentRangeEffect = StateEffect.define<Range<Decoration>>()
 
 export const removeNewCommentRangeEffect = StateEffect.define<Decoration>()
 
-export const textSelectedEffect = StateEffect.define<null>()
+export const textSelectedEffect = StateEffect.define<EditorView>()
 
 export const removeReviewPanelTooltipEffect = StateEffect.define()
 
@@ -47,7 +46,7 @@ export const reviewTooltip = (): Extension => {
     EditorView.updateListener.of(update => {
       if (update.selectionSet && !update.state.selection.main.empty) {
         update.view.dispatch({
-          effects: textSelectedEffect.of(null),
+          effects: textSelectedEffect.of(update.view),
         })
       } else if (
         !update.startState.selection.main.empty &&
@@ -104,7 +103,7 @@ export const reviewTooltipStateField = StateField.define<{
       }
 
       if (effect.is(textSelectedEffect)) {
-        tooltip = buildTooltip(tr.state)
+        tooltip = buildTooltip(effect.value)
       }
 
       if (tooltip && tr.state.selection.main.empty) {
@@ -121,25 +120,22 @@ export const reviewTooltipStateField = StateField.define<{
   ],
 })
 
-function buildTooltip(state: EditorState): Tooltip | null {
-  if (state.selection.main.empty) {
+function buildTooltip(view: EditorView): Tooltip | null {
+  if (view.state.selection.main.empty) {
     return null
   }
 
+  const pos = view.state.selection.main.head
   return {
-    pos: state.selection.main.head,
-    above: true,
-    create: createReviewTooltipView,
-  }
-}
-
-const createReviewTooltipView = (): TooltipView => {
-  const dom = document.createElement('div')
-  dom.className = 'review-tooltip-menu-container'
-  return {
-    dom,
-    overlap: true,
-    offset: { x: 0, y: 8 },
+    pos,
+    above: !isCursorNearViewportTop(view, pos, 50),
+    strictSide: true,
+    arrow: false,
+    create() {
+      const dom = document.createElement('div')
+      dom.className = 'review-tooltip-menu-container'
+      return { dom, overlap: true, offset: { x: 0, y: 8 } }
+    },
   }
 }
 

services/web/package.json

@@ -185,7 +185,7 @@
     "@codemirror/lint": "^6.8.2",
     "@codemirror/search": "github:overleaf/codemirror-search#94f33f7fa6db95dadd3d7aed05c30cdde550835a",
     "@codemirror/state": "^6.4.1",
-    "@codemirror/view": "^6.34.3",
+    "@codemirror/view": "^6.34.0",
     "@juggle/resize-observer": "^3.3.1",
     "@lezer/common": "^1.2.3",
     "@lezer/generator": "^1.7.1",