From e567abe71a6e38f42994c98e284a7f67752fc3f7 Mon Sep 17 00:00:00 2001
From: Malik Glossop <glossopm@users.noreply.github.com>
Date: Mon, 10 Aug 2026 11:01:55 +0200
Subject: [PATCH] Merge pull request #36105 from
 overleaf/mg-focus-floating-menu

Hide floating menu and comment context menu item in focus mode

GitOrigin-RevId: 4cc55f5cebae5e88ea1d1c03a9ac270e43c3073e
---
 .../editor-floating-menu.tsx                  |  3 +-
 .../hooks/use-context-menu-items.tsx          |  3 +-
 .../editor-floating-menu.spec.tsx             | 11 +++++++
 .../codemirror-editor-context-menu.spec.tsx   | 29 +++++++++++++++++++
 4 files changed, 44 insertions(+), 2 deletions(-)

diff --git a/services/web/frontend/js/features/editor-floating-menu/editor-floating-menu.tsx b/services/web/frontend/js/features/editor-floating-menu/editor-floating-menu.tsx
index 5d6f4f48ef..0033954a06 100644
--- a/services/web/frontend/js/features/editor-floating-menu/editor-floating-menu.tsx
+++ b/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
   }
 
diff --git a/services/web/frontend/js/features/source-editor/hooks/use-context-menu-items.tsx b/services/web/frontend/js/features/source-editor/hooks/use-context-menu-items.tsx
index 12d6652aa7..09e5ee78de 100644
--- a/services/web/frontend/js/features/source-editor/hooks/use-context-menu-items.tsx
+++ b/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'),
       },
       {
diff --git a/services/web/test/frontend/features/editor-floating-menu/editor-floating-menu.spec.tsx b/services/web/test/frontend/features/editor-floating-menu/editor-floating-menu.spec.tsx
index 582b01c0a6..2b15146d73 100644
--- a/services/web/test/frontend/features/editor-floating-menu/editor-floating-menu.spec.tsx
+++ b/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 })
diff --git a/services/web/test/frontend/features/source-editor/components/codemirror-editor-context-menu.spec.tsx b/services/web/test/frontend/features/source-editor/components/codemirror-editor-context-menu.spec.tsx
index 9edb2d39ab..81cf77301c 100644
--- a/services/web/test/frontend/features/source-editor/components/codemirror-editor-context-menu.spec.tsx
+++ b/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()