Merge pull request #21164 from overleaf/dp-add-comment-keyboard-shortcut

Add keyboard shortcut (cmd+shift+c) for adding a new comment

GitOrigin-RevId: 20359426f45e90b09cbc887bac3096adf1b3141a

services/web/frontend/js/features/review-panel-new/components/review-tooltip-menu.tsx

@@ -1,4 +1,11 @@
-import { Dispatch, FC, SetStateAction, useEffect, useState } from 'react'
+import {
+  Dispatch,
+  FC,
+  SetStateAction,
+  useCallback,
+  useEffect,
+  useState,
+} from 'react'
 import ReactDOM from 'react-dom'
 import MaterialIcon from '@/shared/components/material-icon'
 import { useTranslation } from 'react-i18next'
@@ -56,7 +63,7 @@ const ReviewTooltipMenuContent: FC<{
   const { setReviewPanelOpen } = useLayoutContext()
   const { setView } = useReviewPanelViewActionsContext()
 
-  const handleClick = () => {
+  const addComment = useCallback(() => {
     setReviewPanelOpen(true)
     setView('cur_file')
 
@@ -64,13 +71,20 @@ const ReviewTooltipMenuContent: FC<{
       effects: buildAddNewCommentRangeEffect(state.selection.main),
     })
     setShow(false)
-  }
+  }, [setReviewPanelOpen, setView, setShow, view, state.selection.main])
+
+  useEffect(() => {
+    window.addEventListener('add-new-review-comment', addComment)
+    return () => {
+      window.removeEventListener('add-new-review-comment', addComment)
+    }
+  }, [addComment])
 
   return (
     <div className="review-tooltip-menu">
       <button
         className="review-tooltip-menu-button review-tooltip-add-comment-button"
-        onClick={handleClick}
+        onClick={addComment}
       >
         <MaterialIcon type="chat" />
         {t('add_comment')}

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

@@ -1,4 +1,4 @@
-import { keymap } from '@codemirror/view'
+import { EditorView, keymap } from '@codemirror/view'
 import { Prec } from '@codemirror/state'
 import { indentMore } from '../commands/indent'
 import {
@@ -23,14 +23,19 @@ import {
   deleteToVisualLineEnd,
   deleteToVisualLineStart,
 } from './visual-line-selection'
+import { isSplitTestEnabled } from '@/utils/splitTestUtils'
 
 const toggleReviewPanel = () => {
   dispatchEditorEvent('toggle-review-panel')
   return true
 }
 
-const addNewCommentFromKbdShortcut = () => {
-  dispatchEditorEvent('add-new-comment')
+const addNewCommentFromKbdShortcut = (view: EditorView) => {
+  if (isSplitTestEnabled('review-panel-redesign')) {
+    window.dispatchEvent(new Event('add-new-review-comment'))
+  } else {
+    dispatchEditorEvent('add-new-comment')
+  }
   return true
 }