Shortcuts Menu

[alschmiedt]

Category Either a plugin or a simple example showing one way to accomplish this.

Component New component

Is your feature request related to a problem? Please describe. We do not have a way to display keyboard shortcuts to users. Without this, the keyboard navigation becomes pretty difficult to use as users would have to keep all the shortcut key mappings in their head.

Describe the solution you'd like Create a menu that would allow users to see and edit their keyboard shortcuts. This should be accessible. I am assuming it would be some sort of modal, however I am open to different suggestions.

Some examples:

• Visual studio code shortcut editor.

Describe alternatives you've considered

Additional context

[MatoPlus]

@alschmiedt My group (for a university project) would like to work on this. Feel free to assign it to me!

[BeksOmega]

Assigned you @MatoPlus =) Feel free to split this project up amongst yourselves! If you have any questions we are happy to help :D

[d-projects]

Hey @BeksOmega and @cpcallen,

For the shortcut menu plugin, our current plan is to have a scrollable modal with all the shortcuts and a search bar. The modal will use a table internally.

The client will have two options to set up the plugin. The first one will be to set a variable called showShortcutMenu to true. Doing this, the shortcut will pop up when you click a default “help” button on the bottom-right of the page. A really rough Figma sketch of what the modal will look like in this scenario is shown below (note that the shortcuts displayed are just an example from the VS code shortcut menu).

The second option will be to expose a function called openMenu() that can be used within custom buttons to trigger the opening of the shortcut menu.

We may also consider adding a shortcut to open the shortcut menu.

One additional feature we may add is having the shortcut menu display as a drawer from different positions (see https://chakra-ui.com/docs/components/drawer). The client will have the option of using the default position (modal), or having the drawer open up from the left or right. We may also add the background color of the modal as a programmable option for the client.

All the shortcuts displayed in the menu will be taken from the ShortcutRegistry class.

Let us know if this sounds good and any changes you may want!

[cpcallen]

Hi @d-projects & colleagues,

We discussed your proposal at our weekly team meeting today and feedback was generally very positive. I / we did have a few comments, though:

The client will have two options to set up the plugin. The first one will be to set a variable called showShortcutMenu to true. Doing this, the shortcut will pop up when you click a default “help” button on the bottom-right of the page.

This broadly sounds good, but I'm not quite sure what you mean by "a variable called showShortcutMenu". Presumably not a global variable… Maybe it would be better for your module to export an installShortcutButton() function instead?

The second option will be to expose a function called openMenu() that can be used within custom buttons to trigger the opening of the shortcut menu.

Yes, great.

We may also consider adding a shortcut to open the shortcut menu.

One of my colleagues commented with much glee that you should be sure that the shortcut menu could edit the shortcut menu shortcut. 😃

One additional feature we may add is having the shortcut menu display as a drawer from different positions… The client will have the option of using the default position (modal), or having the drawer open up from the left or right.

That's a neat suggestion, but the general consensus amongst the team was that we thought the modal UI was preferable. This was in part because we typically prefer to avoid adding runtime dependencies where we can avoid it, but even more so because Blockly already has a drawer-like toolbox, and the chakra-ui drawers are rather different (e.g. edge-of-page rather than edge-of-workspace), and we'd prefer not to have another vaguely-similar-but-inconsistent UI.

Looking forward to seeing some code!

[d-projects]

Thanks for your feedback!

Here's a rough draft PR of our work-in-progress for the shortcut menu. It currently only displays the modal with the shortcuts (and is not properly styled yet): https://github.com/google/blockly-samples/pull/1383/files#diff-86287ee1944c1fd9d0278350e8c02f430bd73b1ade975d1909aaa07c8edd10ab

This broadly sounds good, but I'm not quite sure what you mean by "a variable called showShortcutMenu". Presumably not a global variable… Maybe it would be better for your module to export an installShortcutButton() function instead?

Yeah, it was an idea we just threw around as we were brainstorming, and the installShortcutButton() does sound like a better idea! I think we will work on this part as a follow-up after we have the modal fully ready.

One of my colleagues commented with much glee that you should be sure that the shortcut menu could edit the shortcut menu shortcut.

By this, do you mean that our shortcut menu should support editing all shortcuts within the UI (this would require the plugin to modify pre-existing shortcuts in the ShortcutRegistry class)? We understood the spec as just displaying the shortcut menu. We were thinking of just allowing a user to pass in a key-binding parameter into the shortcut plugin constructor that is responsible for opening the shortcut menu.

Let us know!