Add keyboard shortcuts to action buttons

Just run and stop button have keys assigned for now.

src/components/ActionButton.tsx

@@ -1,7 +1,9 @@
 // SPDX-License-Identifier: MIT
 // Copyright (c) 2020 The Pybricks Authors
 
-import { Button, Intent, Position, Tooltip } from '@blueprintjs/core';
+import { Button, Hotkey, Hotkeys, Intent, Position, Tooltip } from '@blueprintjs/core';
+// importing this way due to https://github.com/palantir/blueprint/issues/3604
+import { HotkeysTarget } from '@blueprintjs/core/lib/esnext/components/hotkeys/hotkeysTarget';
 import { WithI18nProps, withI18n } from '@shopify/react-i18n';
 import React from 'react';
 import { TooltipId } from './button-i18n';
@@ -10,6 +12,8 @@ import en from './button-i18n.en.json';
 export interface ActionButtonProps {
     /** A unique id for each instance. */
     readonly id: string;
+    /** Keyboard shortcut. */
+    readonly keyboardShortcut?: string;
     /** Tooltip text that appears when hovering over the button. */
     readonly tooltip: TooltipId;
     /** Icon shown on the button. */
@@ -22,14 +26,19 @@ export interface ActionButtonProps {
 
 type Props = ActionButtonProps & WithI18nProps;
 
+@HotkeysTarget
 class ActionButton extends React.Component<Props> {
+    private buttonRef: React.RefObject<Button> = React.createRef();
+
     render(): JSX.Element {
+        let tooltipText = this.props.i18n.translate(this.props.tooltip);
+        if (this.props.keyboardShortcut) {
+            tooltipText += ` (${this.props.keyboardShortcut})`;
+        }
         return (
-            <Tooltip
-                content={this.props.i18n.translate(this.props.tooltip)}
-                position={Position.BOTTOM}
-            >
+            <Tooltip content={tooltipText} position={Position.BOTTOM}>
                 <Button
+                    ref={this.buttonRef}
                     intent={Intent.PRIMARY}
                     onClick={(): void => this.props.onAction()}
                     disabled={this.props.enabled === false}
@@ -45,6 +54,29 @@ class ActionButton extends React.Component<Props> {
             </Tooltip>
         );
     }
+
+    renderHotkeys(): React.ReactElement {
+        if (!this.props.keyboardShortcut) {
+            return <Hotkeys />;
+        }
+
+        return (
+            <Hotkeys>
+                <Hotkey
+                    global={true}
+                    allowInInput={true}
+                    preventDefault={true}
+                    combo={this.props.keyboardShortcut.replaceAll('-', '+')}
+                    label={this.props.i18n.translate(this.props.tooltip)}
+                    onKeyDown={(): void => {
+                        if (this.props.enabled) {
+                            this.props.onAction();
+                        }
+                    }}
+                />
+            </Hotkeys>
+        );
+    }
 }
 
 export default withI18n({ id: 'actionButton', fallback: en, translations: { en } })(

src/components/DocsButton.tsx

@@ -12,7 +12,8 @@ import docsIcon from './images/pybricks.svg';
 
 type StateProps = undefined;
 type DispatchProps = Pick<ActionButtonProps, 'onAction'>;
-type OwnProps = Pick<ActionButtonProps, 'id'>;
+type OwnProps = Pick<ActionButtonProps, 'id'> &
+    Pick<ActionButtonProps, 'keyboardShortcut'>;
 
 const mapDispatchToProps = (dispatch: Dispatch): DispatchProps => ({
     onAction: (): Action => dispatch(toggleDocs()),

src/components/ReplButton.tsx

@@ -12,7 +12,8 @@ import replIcon from './images/repl.svg';
 
 type StateProps = Pick<ActionButtonProps, 'enabled'>;
 type DispatchProps = Pick<ActionButtonProps, 'onAction'>;
-type OwnProps = Pick<ActionButtonProps, 'id'>;
+type OwnProps = Pick<ActionButtonProps, 'id'> &
+    Pick<ActionButtonProps, 'keyboardShortcut'>;
 
 const mapStateToProps = (state: RootState): StateProps => ({
     enabled:

src/components/RunButton.tsx

@@ -12,7 +12,8 @@ import runIcon from './images/run.svg';
 
 type StateProps = Pick<ActionButtonProps, 'enabled'>;
 type DispatchProps = Pick<ActionButtonProps, 'onAction'>;
-type OwnProps = Pick<ActionButtonProps, 'id'>;
+type OwnProps = Pick<ActionButtonProps, 'id'> &
+    Pick<ActionButtonProps, 'keyboardShortcut'>;
 
 const mapStateToProps = (state: RootState): StateProps => ({
     enabled:

src/components/SaveAsButton.tsx

@@ -11,7 +11,8 @@ import downloadIcon from './images/download.svg';
 
 type StateProps = Pick<ActionButtonProps, 'enabled'>;
 type DispatchProps = Pick<ActionButtonProps, 'onAction'>;
-type OwnProps = Pick<ActionButtonProps, 'id'>;
+type OwnProps = Pick<ActionButtonProps, 'id'> &
+    Pick<ActionButtonProps, 'keyboardShortcut'>;
 
 const mapStateToProps = (state: RootState): StateProps => ({
     enabled: state.editor.current !== null,

src/components/StopButton.tsx

@@ -12,7 +12,8 @@ import stopIcon from './images/stop.svg';
 
 type StateProps = Pick<ActionButtonProps, 'enabled'>;
 type DispatchProps = Pick<ActionButtonProps, 'onAction'>;
-type OwnProps = Pick<ActionButtonProps, 'id'>;
+type OwnProps = Pick<ActionButtonProps, 'id'> &
+    Pick<ActionButtonProps, 'keyboardShortcut'>;
 
 const mapStateToProps = (state: RootState): StateProps => ({
     enabled: state.hub.runtime === HubRuntimeState.Running,

src/components/Terminal.tsx

@@ -62,6 +62,10 @@ class Terminal extends React.Component<TerminalProps> {
             // a control character to the terminal.
             return false;
         }
+        if (e.key === 'F5' || e.key === 'F6') {
+            // allow global handler for these keys
+            return false;
+        }
         return true;
     };
 

src/components/Toolbar.tsx

@@ -29,8 +29,8 @@ class Toolbar extends React.Component {
                     <Navbar.Divider />
                     <ButtonGroup>
                         <BluetoothButton id="bluetooth" />
-                        <RunButton id="run" />
-                        <StopButton id="stop" />
+                        <RunButton id="run" keyboardShortcut="F5" />
+                        <StopButton id="stop" keyboardShortcut="F6" />
                     </ButtonGroup>
                     <Navbar.Divider />
                     <ButtonGroup>

tsconfig.json

@@ -16,6 +16,7 @@
         "jsx": "react",
         "downlevelIteration": true,
         "experimentalDecorators": true,
+        "emitDecoratorMetadata": true,
         "noFallthroughCasesInSwitch": true
     },
     "include": ["src", "test"]