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

Merge pull request #14761 from overleaf/mj-table-tab-navigation

Browse source 
[visual] Allow tab to escape editing cell

GitOrigin-RevId: 10762c5909f5c1a13a98ed1709b6609cf9ab79b8
This commit is contained in:
Mathias Jakobsen 2023-09-11 11:02:44 +01:00 committed by Copybot
parent 2961a93bb5
commit 004bdd593e
2 changed files with 45 additions and 28 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

@ -28,7 +28,11 @@ type NavigationKey =
type NavigationMap = { type NavigationMap = {
// eslint-disable-next-line no-unused-vars // eslint-disable-next-line no-unused-vars
[key in NavigationKey]: [() => TableSelection, () => TableSelection] [key in NavigationKey]: {
run: () => TableSelection
shift: () => TableSelection
canExitEditing?: boolean
}
} }
const isMac = /Mac/.test(window.navigator?.platform) const isMac = /Mac/.test(window.navigator?.platform)
@ -103,26 +107,27 @@ export const Table: FC = () => {
const navigation: NavigationMap = useMemo( const navigation: NavigationMap = useMemo(
() => ({ () => ({
ArrowRight: [ ArrowRight: {
() => selection!.moveRight(tableData), run: () => selection!.moveRight(tableData),
() => selection!.extendRight(tableData), shift: () => selection!.extendRight(tableData),
], },
ArrowLeft: [ ArrowLeft: {
() => selection!.moveLeft(tableData), run: () => selection!.moveLeft(tableData),
() => selection!.extendLeft(tableData), shift: () => selection!.extendLeft(tableData),
], },
ArrowUp: [ ArrowUp: {
() => selection!.moveUp(tableData), run: () => selection!.moveUp(tableData),
() => selection!.extendUp(tableData), shift: () => selection!.extendUp(tableData),
], },
ArrowDown: [ ArrowDown: {
() => selection!.moveDown(tableData), run: () => selection!.moveDown(tableData),
() => selection!.extendDown(tableData), shift: () => selection!.extendDown(tableData),
], },
Tab: [ Tab: {
() => selection!.moveNext(tableData), run: () => selection!.moveNext(tableData),
() => selection!.movePrevious(tableData), shift: () => selection!.movePrevious(tableData),
], canExitEditing: true,
},
}), }),
[selection, tableData] [selection, tableData]
) )
@ -190,10 +195,15 @@ export const Table: FC = () => {
} }
}, 0) }, 0)
} else if (Object.prototype.hasOwnProperty.call(navigation, event.code)) { } else if (Object.prototype.hasOwnProperty.call(navigation, event.code)) {
const [defaultNavigation, shiftNavigation] = const {
navigation[event.code as NavigationKey] run: defaultNavigation,
shift: shiftNavigation,
canExitEditing,
} = navigation[event.code as NavigationKey]
if (cellData) { if (cellData) {
return if (!canExitEditing) {
return
}
} }
event.preventDefault() event.preventDefault()
if (!selection) { if (!selection) {
@ -205,11 +215,13 @@ export const Table: FC = () => {
) )
return return
} }
if (event.shiftKey) { const newSelection = event.shiftKey
setSelection(shiftNavigation()) ? shiftNavigation()
} else { : defaultNavigation()
setSelection(defaultNavigation()) if (cellData && canExitEditing) {
commitCellData()
} }
setSelection(newSelection)
} else if (isCharacterInput(event) && !cellData) { } else if (isCharacterInput(event) && !cellData) {
event.preventDefault() event.preventDefault()
event.stopPropagation() event.stopPropagation()

5
services/web/test/frontend/features/source-editor/components/codemirror-editor-table-generator.spec.tsx
View file

@ -587,6 +587,11 @@ cell 3 & cell 4 \\\\
cy.get('@cell-2').should('have.focus').should('have.class', 'selected') cy.get('@cell-2').should('have.focus').should('have.class', 'selected')
cy.get('@cell-2').tab({ shift: true }) cy.get('@cell-2').tab({ shift: true })
cy.get('@cell-1').should('have.focus').should('have.class', 'selected') cy.get('@cell-1').should('have.focus').should('have.class', 'selected')
// Tabbing when editing a cell should commit change and move to next cell
cy.get('@cell-1').type('foo')
cy.get('@cell-1').tab()
cy.get('@cell-2').should('have.focus').should('have.class', 'selected')
cy.get('@cell-1').should('have.text', 'foo')
}) })
it('Can select rows and columns with selectors', function () { it('Can select rows and columns with selectors', function () {