Merge pull request #14753 from overleaf/ae-active-view

[visual] Hide toolbar items while editing a table

GitOrigin-RevId: b081782bcc491ed567636686c556d0731d722b4a

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

@@ -96,6 +96,15 @@ const Toolbar = memo(function Toolbar() {
     }
   }, [buildOverflow, languageName, resizeRef, visual])
 
+  const insideTable = document.activeElement?.closest(
+    '.table-generator-help-modal,.table-generator'
+  )
+  useEffect(() => {
+    if (resizeRef.current) {
+      buildOverflow(resizeRef.current.element)
+    }
+  }, [buildOverflow, insideTable, resizeRef])
+
   const toggleToolbar = useCallback(() => {
     setCollapsed(value => !value)
   }, [])
@@ -107,27 +116,31 @@ const Toolbar = memo(function Toolbar() {
   return (
     <div className="ol-cm-toolbar toolbar-editor" ref={elementRef}>
       {showSourceToolbar && <EditorSwitch />}
-      <ToolbarItems
-        state={state}
-        languageName={languageName}
-        visual={visual}
-        listDepth={listDepth}
-      />
+      {!insideTable && (
+        <ToolbarItems
+          state={state}
+          languageName={languageName}
+          visual={visual}
+          listDepth={listDepth}
+        />
+      )}
       <div className="ol-cm-toolbar-button-group ol-cm-toolbar-stretch">
-        <ToolbarOverflow
-          overflowed={overflowed}
-          overflowOpen={overflowOpen}
-          setOverflowOpen={setOverflowOpen}
-          overflowRef={overflowRef}
-        >
-          <ToolbarItems
-            state={state}
-            overflowed={overflowedItemsRef.current}
-            languageName={languageName}
-            visual={visual}
-            listDepth={listDepth}
-          />
-        </ToolbarOverflow>
+        {!insideTable && (
+          <ToolbarOverflow
+            overflowed={overflowed}
+            overflowOpen={overflowOpen}
+            setOverflowOpen={setOverflowOpen}
+            overflowRef={overflowRef}
+          >
+            <ToolbarItems
+              state={state}
+              overflowed={overflowedItemsRef.current}
+              languageName={languageName}
+              visual={visual}
+              listDepth={listDepth}
+            />
+          </ToolbarOverflow>
+        )}
         <div className="formatting-buttons-wrapper" />
       </div>
       <div className="ol-cm-toolbar-button-group ol-cm-toolbar-end">

services/web/frontend/js/features/source-editor/components/table-generator/tabular.tsx

@@ -16,7 +16,10 @@ import { EditorView } from '@codemirror/view'
 import { ErrorBoundary } from 'react-error-boundary'
 import { Alert, Button } from 'react-bootstrap'
 import { EditorSelection } from '@codemirror/state'
-import { CodeMirrorViewContextProvider } from '../codemirror-editor'
+import {
+  CodeMirrorViewContextProvider,
+  useCodeMirrorViewContext,
+} from '../codemirror-editor'
 import { TableProvider } from './contexts/table-context'
 import { TabularProvider, useTabularContext } from './contexts/tabular-context'
 import Icon from '../../../../shared/components/icon'
@@ -263,6 +266,7 @@ const TabularWrapper: FC = () => {
   const { setSelection, selection } = useSelectionContext()
   const { commitCellData, cellData } = useEditingContext()
   const { ref } = useTabularContext()
+  const view = useCodeMirrorViewContext()
   useEffect(() => {
     const listener: (event: MouseEvent) => void = event => {
       if (
@@ -275,6 +279,8 @@ const TabularWrapper: FC = () => {
         if (cellData) {
           commitCellData()
         }
+      } else {
+        view.dispatch() // trigger a state update when clicking inside the table
       }
     }
     window.addEventListener('mousedown', listener)
@@ -282,7 +288,7 @@ const TabularWrapper: FC = () => {
     return () => {
       window.removeEventListener('mousedown', listener)
     }
-  }, [cellData, commitCellData, selection, setSelection, ref])
+  }, [cellData, commitCellData, selection, setSelection, ref, view])
   return (
     <div className="table-generator" ref={ref}>
       <Toolbar />