Hide "add comment" tooltip on mouse down (#21721)

* Hide "add comment" tooltip on mouse down

* using EditorView.domEventHandlers

GitOrigin-RevId: 48b7626d5c1be8a3fb0b1ee1fcc1bc7738f8dbc5

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

@@ -14,13 +14,16 @@ import {
 } from '@codemirror/state'
 import { isSplitTestEnabled } from '@/utils/splitTestUtils'
 import { v4 as uuid } from 'uuid'
-import { textSelected, textSelectedEffect } from './text-selected'
 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 removeReviewPanelTooltipEffect = StateEffect.define()
+
 export const buildAddNewCommentRangeEffect = (range: SelectionRange) => {
   return addNewCommentRangeEffect.of(
     Decoration.mark({
@@ -37,7 +40,34 @@ export const reviewTooltip = (): Extension => {
     return []
   }
 
-  return [reviewTooltipTheme, reviewTooltipStateField, textSelected]
+  return [
+    reviewTooltipTheme,
+    reviewTooltipStateField,
+    EditorView.domEventHandlers({
+      mouseup(event, view) {
+        if (!view.state.selection.main.empty) {
+          view.dispatch({
+            effects: textSelectedEffect.of(view),
+          })
+        }
+      },
+      keyup(event, view) {
+        if (
+          (event.shiftKey || event.key === 'Meta') &&
+          !view.state.selection.main.empty
+        ) {
+          view.dispatch({
+            effects: textSelectedEffect.of(view),
+          })
+        }
+      },
+      mousedown(event, view) {
+        view.dispatch({
+          effects: removeReviewPanelTooltipEffect.of(null),
+        })
+      },
+    }),
+  ]
 }
 
 export const reviewTooltipStateField = StateField.define<{
@@ -54,6 +84,10 @@ export const reviewTooltipStateField = StateField.define<{
     addCommentRanges = addCommentRanges.map(tr.changes)
 
     for (const effect of tr.effects) {
+      if (effect.is(removeReviewPanelTooltipEffect)) {
+        return { tooltip: null, addCommentRanges }
+      }
+
       if (effect.is(removeNewCommentRangeEffect)) {
         const rangeToRemove = effect.value
         addCommentRanges = addCommentRanges.update({

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

@@ -1,34 +0,0 @@
-import { StateEffect } from '@codemirror/state'
-import { EditorView, ViewPlugin } from '@codemirror/view'
-
-export const textSelectedEffect = StateEffect.define<EditorView>()
-
-export const textSelected = ViewPlugin.define(view => {
-  function mouseUpListener() {
-    if (!view.state.selection.main.empty) {
-      view.dispatch({
-        effects: textSelectedEffect.of(view),
-      })
-    }
-  }
-  function keyUpListener(event: KeyboardEvent) {
-    if (
-      (event.shiftKey || event.key === 'Meta') &&
-      !view.state.selection.main.empty
-    ) {
-      view.dispatch({
-        effects: textSelectedEffect.of(view),
-      })
-    }
-  }
-
-  view.dom.addEventListener('mouseup', mouseUpListener)
-  view.dom.addEventListener('keyup', keyUpListener)
-
-  return {
-    destroy() {
-      view.dom.removeEventListener('mouseup', mouseUpListener)
-      view.dom.removeEventListener('keyup', keyUpListener)
-    },
-  }
-})