github/overleaf
1
0
Fork 0
mirror of https://github.com/overleaf/overleaf.git synced 2025-01-27 02:22:50 +00:00
Code Issues Projects Releases Packages Wiki Activity

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

Browse source 
[visual] Hide toolbar items while editing a table

GitOrigin-RevId: b081782bcc491ed567636686c556d0731d722b4a
This commit is contained in:
Mathias Jakobsen 2023-09-13 09:57:05 +01:00 committed by Copybot
parent a4de4dbd3e
commit 069e5ac320
2 changed files with 41 additions and 22 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

@ -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">

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

@ -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 />