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

* Remove view from textSelectedEffect
* Upgrade @codemirror/view to 6.34.3

GitOrigin-RevId: 7d285a9c76032a3238422e15a73ae4b819612b31

package-lock.json

@@ -3432,10 +3432,11 @@
       "dev": true
     },
     "node_modules/@codemirror/view": {
-      "version": "6.34.0",
+      "version": "6.34.3",
-      "resolved": "https://registry.npmjs.org/@codemirror/view/-/view-6.34.0.tgz",
+      "resolved": "https://registry.npmjs.org/@codemirror/view/-/view-6.34.3.tgz",
-      "integrity": "sha512-2vKJ79tOcVfgPYVJM2XjcL1BH5Bsl7/tgn9ilBj3XWeCS5kTRy/NE4FHEj4aMylOl/D3IPNsmZH0WPlB+DyIdA==",
+      "integrity": "sha512-Ph5d+u8DxIeSgssXEakaakImkzBV4+slwIbcxl9oc9evexJhImeu/G8TK7+zp+IFK9KuJ0BdSn6kTBJeH2CHvA==",
       "dev": true,
+      "license": "MIT",
       "dependencies": {
         "@codemirror/state": "^6.4.0",
         "style-mod": "^4.1.0",
@@ -41474,7 +41475,7 @@
         "@codemirror/lint": "^6.8.2",
         "@codemirror/search": "github:overleaf/codemirror-search#94f33f7fa6db95dadd3d7aed05c30cdde550835a",
         "@codemirror/state": "^6.4.1",
-        "@codemirror/view": "^6.34.0",
+        "@codemirror/view": "^6.34.3",
         "@juggle/resize-observer": "^3.3.1",
         "@lezer/common": "^1.2.1",
         "@lezer/generator": "^1.7.1",
@@ -46493,9 +46494,9 @@
       "dev": true
     },
     "@codemirror/view": {
-      "version": "6.34.0",
+      "version": "6.34.3",
-      "resolved": "https://registry.npmjs.org/@codemirror/view/-/view-6.34.0.tgz",
+      "resolved": "https://registry.npmjs.org/@codemirror/view/-/view-6.34.3.tgz",
-      "integrity": "sha512-2vKJ79tOcVfgPYVJM2XjcL1BH5Bsl7/tgn9ilBj3XWeCS5kTRy/NE4FHEj4aMylOl/D3IPNsmZH0WPlB+DyIdA==",
+      "integrity": "sha512-Ph5d+u8DxIeSgssXEakaakImkzBV4+slwIbcxl9oc9evexJhImeu/G8TK7+zp+IFK9KuJ0BdSn6kTBJeH2CHvA==",
       "dev": true,
       "requires": {
         "@codemirror/state": "^6.4.0",
@@ -50969,7 +50970,7 @@
         "@codemirror/lint": "^6.8.2",
         "@codemirror/search": "github:overleaf/codemirror-search#94f33f7fa6db95dadd3d7aed05c30cdde550835a",
         "@codemirror/state": "^6.4.1",
-        "@codemirror/view": "^6.34.0",
+        "@codemirror/view": "^6.34.3",
         "@contentful/rich-text-html-renderer": "^16.0.2",
         "@contentful/rich-text-types": "^16.0.2",
         "@google-cloud/bigquery": "^6.0.1",

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

@@ -95,6 +95,16 @@ 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,6 +4,7 @@ import {
   EditorView,
   showTooltip,
   Tooltip,
+  TooltipView,
 } from '@codemirror/view'
 import {
   Extension,
@@ -11,16 +12,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<EditorView>()
+export const textSelectedEffect = StateEffect.define<null>()
 
 export const removeReviewPanelTooltipEffect = StateEffect.define()
 
@@ -46,7 +47,7 @@ export const reviewTooltip = (): Extension => {
     EditorView.updateListener.of(update => {
       if (update.selectionSet && !update.state.selection.main.empty) {
         update.view.dispatch({
-          effects: textSelectedEffect.of(update.view),
+          effects: textSelectedEffect.of(null),
         })
       } else if (
         !update.startState.selection.main.empty &&
@@ -103,7 +104,7 @@ export const reviewTooltipStateField = StateField.define<{
       }
 
       if (effect.is(textSelectedEffect)) {
-        tooltip = buildTooltip(effect.value)
+        tooltip = buildTooltip(tr.state)
       }
 
       if (tooltip && tr.state.selection.main.empty) {
@@ -120,22 +121,25 @@ export const reviewTooltipStateField = StateField.define<{
   ],
 })
 
-function buildTooltip(view: EditorView): Tooltip | null {
+function buildTooltip(state: EditorState): Tooltip | null {
-  if (view.state.selection.main.empty) {
+  if (state.selection.main.empty) {
     return null
   }
 
-  const pos = view.state.selection.main.head
   return {
-    pos,
+    pos: state.selection.main.head,
-    above: !isCursorNearViewportTop(view, pos, 50),
+    above: true,
-    strictSide: true,
+    create: createReviewTooltipView,
-    arrow: false,
+  }
-    create() {
+}
-      const dom = document.createElement('div')
+
-      dom.className = 'review-tooltip-menu-container'
+const createReviewTooltipView = (): TooltipView => {
-      return { dom, overlap: true, offset: { x: 0, y: 8 } }
+  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.0",
+    "@codemirror/view": "^6.34.3",
     "@juggle/resize-observer": "^3.3.1",
     "@lezer/common": "^1.2.1",
     "@lezer/generator": "^1.7.1",