Merge pull request #35514 from overleaf/worktree-mg-comment-fix

Split add-comment to own extension and always register command

GitOrigin-RevId: 2e25643b7fe4ff30693479975945d94cc586bd61

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

@@ -0,0 +1,55 @@
+import { Decoration, DecorationSet, EditorView } from '@codemirror/view'
+import {
+  StateField,
+  StateEffect,
+  Range,
+  SelectionRange,
+} from '@codemirror/state'
+import { v4 as uuid } from 'uuid'
+
+export const addNewCommentRangeEffect = StateEffect.define<Range<Decoration>>()
+
+export const removeNewCommentRangeEffect = StateEffect.define<string>()
+
+export const buildAddNewCommentRangeEffect = (range: SelectionRange) => {
+  return addNewCommentRangeEffect.of(
+    Decoration.mark({
+      tagName: 'span',
+      class: `ol-cm-change ol-cm-change-c`,
+      opType: 'c',
+      id: uuid(),
+    }).range(range.from, range.to)
+  )
+}
+
+export const addCommentRangesField = StateField.define<DecorationSet>({
+  create() {
+    return Decoration.none
+  },
+
+  update(addCommentRanges, tr) {
+    addCommentRanges = addCommentRanges.map(tr.changes)
+
+    for (const effect of tr.effects) {
+      if (effect.is(removeNewCommentRangeEffect)) {
+        const threadId = effect.value
+        addCommentRanges = addCommentRanges.update({
+          filter: (_from, _to, value) => {
+            return value.spec.id !== threadId
+          },
+        })
+      }
+
+      if (effect.is(addNewCommentRangeEffect)) {
+        const rangeToAdd = effect.value
+        addCommentRanges = addCommentRanges.update({
+          add: [rangeToAdd],
+        })
+      }
+    }
+
+    return addCommentRanges
+  },
+
+  provide: field => EditorView.decorations.from(field),
+})

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

@@ -1,28 +1,15 @@
-import {
-  Decoration,
-  DecorationSet,
-  EditorView,
-  showTooltip,
-  Tooltip,
-  TooltipView,
-} from '@codemirror/view'
+import { EditorView, showTooltip, Tooltip, TooltipView } from '@codemirror/view'
 import {
   Extension,
   StateField,
   StateEffect,
-  Range,
-  SelectionRange,
   EditorState,
   Transaction,
   Compartment,
   TransactionSpec,
 } from '@codemirror/state'
-import { v4 as uuid } from 'uuid'
 import { isContextMenuMouseEvent } from '../utils/context-menu-mouse-event'
-
-export const addNewCommentRangeEffect = StateEffect.define<Range<Decoration>>()
-
-export const removeNewCommentRangeEffect = StateEffect.define<string>()
+import { addCommentRangesField } from './add-comment'
 
 const mouseDownEffect = StateEffect.define()
 const mouseUpEffect = StateEffect.define()
@@ -43,26 +30,18 @@ const mouseDownStateField = StateField.define<boolean>({
   },
 })
 
-export const buildAddNewCommentRangeEffect = (range: SelectionRange) => {
-  return addNewCommentRangeEffect.of(
-    Decoration.mark({
-      tagName: 'span',
-      class: `ol-cm-change ol-cm-change-c`,
-      opType: 'c',
-      id: uuid(),
-    }).range(range.from, range.to)
-  )
-}
-
 const reviewTooltipCompartment = new Compartment()
 
 export const reviewTooltip = (
   enabled: boolean,
   editorContextMenuEnabled: boolean = false
 ): Extension => {
-  return reviewTooltipCompartment.of(
-    enabled ? reviewTooltipEnabled(editorContextMenuEnabled) : []
-  )
+  return [
+    addCommentRangesField,
+    reviewTooltipCompartment.of(
+      enabled ? reviewTooltipMenu(editorContextMenuEnabled) : []
+    ),
+  ]
 }
 
 export const setReviewTooltip = (
@@ -70,13 +49,11 @@ export const setReviewTooltip = (
   editorContextMenuEnabled: boolean
 ): TransactionSpec => ({
   effects: reviewTooltipCompartment.reconfigure(
-    enabled ? reviewTooltipEnabled(editorContextMenuEnabled) : []
+    enabled ? reviewTooltipMenu(editorContextMenuEnabled) : []
   ),
 })
 
-export const reviewTooltipEnabled = (
-  editorContextMenuEnabled = false
-): Extension => {
+const reviewTooltipMenu = (editorContextMenuEnabled: boolean): Extension => {
   let mouseUpListener: null | (() => void) = null
   const disableMouseUpListener = () => {
     if (mouseUpListener) {
@@ -86,7 +63,7 @@ export const reviewTooltipEnabled = (
 
   return [
     reviewTooltipTheme,
-    reviewTooltipStateField,
+    reviewTooltipField,
     mouseDownStateField,
     EditorView.domEventHandlers({
       mousedown: (event, view) => {
@@ -110,39 +87,14 @@ export const reviewTooltipEnabled = (
   ]
 }
 
-export const reviewTooltipStateField = StateField.define<{
-  tooltip: Tooltip | null
-  addCommentRanges: DecorationSet
-}>({
+export const reviewTooltipField = StateField.define<Tooltip | null>({
   create() {
-    return { tooltip: null, addCommentRanges: Decoration.none }
+    return null
   },
 
-  update(field, tr) {
-    let { tooltip, addCommentRanges } = field
-
-    addCommentRanges = addCommentRanges.map(tr.changes)
-
-    for (const effect of tr.effects) {
-      if (effect.is(removeNewCommentRangeEffect)) {
-        const threadId = effect.value
-        addCommentRanges = addCommentRanges.update({
-          filter: (_from, _to, value) => {
-            return value.spec.id !== threadId
-          },
-        })
-      }
-
-      if (effect.is(addNewCommentRangeEffect)) {
-        const rangeToAdd = effect.value
-        addCommentRanges = addCommentRanges.update({
-          add: [rangeToAdd],
-        })
-      }
-    }
-
+  update(tooltip, tr) {
     if (tr.state.selection.main.empty) {
-      return { tooltip: null, addCommentRanges }
+      return null
     }
 
     if (
@@ -152,24 +104,21 @@ export const reviewTooltipStateField = StateField.define<{
     ) {
       if (tr.selection) {
         // selection was changed, remove the tooltip
-        return { tooltip: null, addCommentRanges }
+        return null
       }
       // for any other update, we keep the tooltip because it could be created in previous transaction
       // and we are still waiting for "mouse up" event to show it
-      return { tooltip, addCommentRanges }
+      return tooltip
     }
 
     const isMouseDown = tr.state.field(mouseDownStateField)
     // if "isMouseDown" is true, tooltip will be created but still hidden
     // the reason why we cant just create the tooltip on mouse up is because transaction.userEvent is empty at that point
 
-    return { tooltip: buildTooltip(tr.state, isMouseDown), addCommentRanges }
+    return buildTooltip(tr.state, isMouseDown)
   },
 
-  provide: field => [
-    EditorView.decorations.from(field, field => field.addCommentRanges),
-    showTooltip.compute([field], state => state.field(field).tooltip),
-  ],
+  provide: field => showTooltip.from(field),
 })
 
 function buildTooltip(state: EditorState, hidden: boolean): Tooltip | null {