Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

feat(ui): native-like tab behaviour, slash for toolbox #2569

Merged
merged 8 commits into from
Dec 22, 2023
Merged

Conversation

neSpecc
Copy link
Member

@neSpecc neSpecc commented Dec 21, 2023

Problem

  1. Tab is not working for native-like controls focusing.
  2. We can't step out of Editor using keyboard only

Cause

Historically, we were using Tab to open Toolbox/Block Tunes. In empty block in was opening the Toolbox, and in non-empty block — the Block Tunes.

Solution

Slash

  • Now the / char typed in empty block will open the Toolbox
  • CMD+/ could be used to open the Block Tunes

New Tab behaviour

  • By pressing Tab, we will navigate to the next input/Block
  • By pressing Shift+Tab, we will navigate to the previous input/Block
  • By pressing Tab at the last Block, the next control out of the Editor could be focused. And the Shift+Tab at the first Block will focus a previous one.
  • If the Block that is about to be focused does not contain inputs (like Delimiter), the whole Block will be highlighted as focused
Screen.Recording.2023-12-21.at.20.10.50.mov

Resolves #927

Arrow navigation

Arrow navigation now also allows to focus Block that does not contain inputs, like Delimiter

Other changes

  • "block.focused" state has been removed since it has not been used for a long time. We use block.selected for focused state, and the "focused" property just was misleading.

src/components/modules/blockEvents.ts Show resolved Hide resolved
src/components/modules/toolbar/index.ts Outdated Show resolved Hide resolved
test/cypress/tests/modules/BlockEvents/Tab.cy.ts Outdated Show resolved Hide resolved
@neSpecc neSpecc requested a review from gohabereg December 22, 2023 20:11
@neSpecc neSpecc merged commit cd29c52 into next Dec 22, 2023
6 checks passed
@neSpecc
Copy link
Member Author

neSpecc commented Dec 28, 2023

Great work here! When will this be pushed to npm?

it's already available under 2.29.0-rc.8. The main release of 2.29 will be published soon (in 2-3 days)

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

Tab lock
3 participants