Merge pull request #30822 from overleaf/mfb-editor-not-focused-while-bibtex-editor

Hide the Codemirror editor when the bibtex editor is shown

GitOrigin-RevId: 431b2a93a673b604a0caff31528b9068cc780559

services/web/frontend/js/features/source-editor/components/codemirror-editor.tsx

@@ -40,6 +40,13 @@ function CodeMirrorEditor() {
 
   const isMounted = useIsMounted()
   const editContextEnabled = useFeatureFlag('edit-context')
+  const { openDocName } = useEditorOpenDocContext()
+  const { showVisual } = useEditorPropertiesContext()
+
+  const VisualEditor =
+    showVisual && openDocName != null
+      ? getVisualEditorComponent(openDocName)
+      : null
 
   // create the view using the initial state and intercept transactions
   const viewRef = useRef<EditorView | null>(null)
@@ -64,27 +71,26 @@ function CodeMirrorEditor() {
   return (
     <CodeMirrorStateContext.Provider value={state}>
       <CodeMirrorViewContext.Provider value={viewRef.current}>
-        <CodeMirrorEditorComponents />
+        <CodeMirrorEditorComponents hidden={VisualEditor != null} />
+        {VisualEditor && <VisualEditor />}
       </CodeMirrorViewContext.Provider>
     </CodeMirrorStateContext.Provider>
   )
 }
 
-function CodeMirrorEditorComponents() {
+type CodeMirrorEditorComponentsProps = {
+  hidden: boolean
+}
+
+function CodeMirrorEditorComponents({
+  hidden = false,
+}: CodeMirrorEditorComponentsProps) {
   useToolbarMenuBarEditorCommands()
   const { features } = useProjectContext()
-  const { openDocName } = useEditorOpenDocContext()
-  const { showVisual } = useEditorPropertiesContext()
-
-  const VisualEditor =
-    showVisual && openDocName != null
-      ? getVisualEditorComponent(openDocName)
-      : null
-
   return (
     <ReviewPanelProviders>
       <CodemirrorOutline />
-      <CodeMirrorView />
+      <CodeMirrorView hidden={hidden} />
       <FigureModal />
       <CodeMirrorSearch />
       <CodeMirrorToolbar />
@@ -100,8 +106,6 @@ function CodeMirrorEditorComponents() {
           <Component key={path} />
         )
       )}
-
-      {VisualEditor && <VisualEditor />}
     </ReviewPanelProviders>
   )
 }

services/web/frontend/js/features/source-editor/components/codemirror-view.tsx

@@ -3,7 +3,11 @@ import { useCodeMirrorViewContext } from './codemirror-context'
 import useCodeMirrorScope from '../hooks/use-codemirror-scope'
 import { useEditorViewContext } from '@/features/ide-react/context/editor-view-context'
 
-function CodeMirrorView() {
+type CodeMirrorViewProps = {
+  hidden: boolean
+}
+
+function CodeMirrorView({ hidden = false }: CodeMirrorViewProps) {
   const view = useCodeMirrorViewContext()
 
   const { setView } = useEditorViewContext()
@@ -33,7 +37,7 @@ function CodeMirrorView() {
 
   useCodeMirrorScope(view)
 
-  return <div ref={containerRef} style={{ height: '100%' }} />
+  return <div ref={containerRef} style={{ height: '100%' }} hidden={hidden} />
 }
 
 export default memo(CodeMirrorView)