Merge pull request #36105 from overleaf/mg-focus-floating-menu

Hide floating menu and comment context menu item in focus mode

GitOrigin-RevId: 4cc55f5cebae5e88ea1d1c03a9ac270e43c3073e

services/web/frontend/js/features/editor-floating-menu/editor-floating-menu.tsx

@@ -41,6 +41,7 @@ const editorFloatingMenuActions = importOverleafModules(
 const EditorFloatingMenu: FC = () => {
   const state = useCodeMirrorStateContext()
   const view = useCodeMirrorViewContext()
+  const { focusMode } = useLayoutContext()
   const [show, setShow] = useState(true)
   const tooltipState = state.field(reviewTooltipField, false)
   const previousTooltipState = usePreviousValue(tooltipState)
@@ -72,7 +73,7 @@ const EditorFloatingMenu: FC = () => {
     }
   }, [show, tooltipState, view])
 
-  if (!show || !tooltipState) {
+  if (focusMode || !show || !tooltipState) {
     return null
   }
 

services/web/frontend/js/features/source-editor/hooks/use-context-menu-items.tsx

@@ -50,6 +50,7 @@ export const useContextMenuItems = () => {
     changeLayout,
     pdfLayout,
     view: ideView,
+    focusMode,
   } = useLayoutContext()
   const visualPreviewEnabled = useFeatureFlag('visual-preview')
   const { t } = useTranslation()
@@ -306,7 +307,7 @@ export const useContextMenuItems = () => {
         label: t('comment'),
         handler: handleComment,
         disabled: isCursorOnEmptyLine(state),
-        show: permissions.comment,
+        show: permissions.comment && !focusMode,
         shortcut: getShortcut('insert-comment'),
       },
       {

services/web/test/frontend/features/editor-floating-menu/editor-floating-menu.spec.tsx

@@ -28,11 +28,13 @@ describe('<EditorFloatingMenu />', function () {
     trackChangesVisible = true,
     floatingMenu = true,
     withSettingsToggle = false,
+    focusMode = false,
   }: {
     migrationEnabled: boolean
     trackChangesVisible?: boolean
     floatingMenu?: boolean
     withSettingsToggle?: boolean
+    focusMode?: boolean
   }) {
     window.metaAttributesCache.set('ol-preventCompileOnLoad', true)
     window.metaAttributesCache.set('ol-splitTestVariants', {
@@ -49,6 +51,7 @@ describe('<EditorFloatingMenu />', function () {
           scope={scope}
           features={{ trackChangesVisible }}
           userSettings={{ floatingMenu }}
+          layoutContext={{ focusMode }}
         >
           <CodeMirrorEditor />
           {withSettingsToggle && <FloatingMenuToggle />}
@@ -150,6 +153,14 @@ describe('<EditorFloatingMenu />', function () {
     })
   })
 
+  describe('when in focus mode', function () {
+    it('does not show the floating menu', function () {
+      mountEditor({ migrationEnabled: true, focusMode: true })
+
+      cy.get('.editor-floating-menu').should('not.exist')
+    })
+  })
+
   describe('when the migration split test is disabled (control)', function () {
     it('keeps the legacy review tooltip and does not render the unified menu', function () {
       mountEditor({ migrationEnabled: false })

services/web/test/frontend/features/source-editor/components/codemirror-editor-context-menu.spec.tsx

@@ -365,6 +365,35 @@ describe('editor context menu', { scrollBehavior: false }, function () {
     })
   })
 
+  describe('when in focus mode', function () {
+    it('should hide the Add Comment item but keeps the other actions', function () {
+      const scope = mockScope()
+
+      cy.mount(
+        <TestContainer>
+          <EditorProviders
+            scope={scope}
+            features={{ trackChangesVisible: true }}
+            layoutContext={{ focusMode: true }}
+          >
+            <CodeMirrorEditor />
+          </EditorProviders>
+        </TestContainer>
+      )
+
+      cy.get('.cm-line').eq(10).rightclick()
+
+      cy.findByRole('menu').within(() => {
+        cy.findByRole('menuitem', { name: /cut/i }).should('be.enabled')
+        cy.findByRole('menuitem', { name: /copy/i }).should('be.enabled')
+        cy.findByRole('menuitem', { name: /suggest edits/i }).should(
+          'be.enabled'
+        )
+        cy.findByRole('menuitem', { name: /comment/i }).should('not.exist')
+      })
+    })
+  })
+
   describe('when text is selected', function () {
     it('should enable Cut, Copy, Paste, Delete, Suggest edits, and Comment', function () {
       const scope = mockScope()