Add shortcut tooltips for main toolbar

blocks/rich-text/format-toolbar/index.js

@@ -16,36 +16,35 @@ import { prependHTTP } from '@wordpress/url';
 /**
  * Internal dependencies
  */
-import { accessShortcut, primaryShortcut } from 'utils/keycodes';
 import './style.scss';
 import UrlInput from '../../url-input';
 import { filterURLForDisplay } from '../../../editor/utils/url';
 
-const { ESCAPE, LEFT, RIGHT, UP, DOWN, BACKSPACE, ENTER } = keycodes;
+const { ESCAPE, LEFT, RIGHT, UP, DOWN, BACKSPACE, ENTER, displayShortcut } = keycodes;
 
 const FORMATTING_CONTROLS = [
 	{
 		icon: 'editor-bold',
 		title: __( 'Bold' ),
-		shortcut: primaryShortcut( 'B' ),
+		shortcut: displayShortcut.primary( 'b' ),
 		format: 'bold',
 	},
 	{
 		icon: 'editor-italic',
 		title: __( 'Italic' ),
-		shortcut: primaryShortcut( 'I' ),
+		shortcut: displayShortcut.primary( 'i' ),
 		format: 'italic',
 	},
 	{
 		icon: 'editor-strikethrough',
 		title: __( 'Strikethrough' ),
-		shortcut: accessShortcut( 'D' ),
+		shortcut: displayShortcut.access( 'd' ),
 		format: 'strikethrough',
 	},
 	{
 		icon: 'admin-links',
 		title: __( 'Link' ),
-		shortcut: primaryShortcut( 'K' ),
+		shortcut: displayShortcut.primary( 'k' ),
 		format: 'link',
 	},
 ];

blocks/rich-text/index.js

@@ -45,7 +45,7 @@ import { EVENTS } from './constants';
 import { withBlockEditContext } from '../block-edit/context';
 import { domToFormat, valueToString } from './format';
 
-const { BACKSPACE, DELETE, ENTER } = keycodes;
+const { BACKSPACE, DELETE, ENTER, rawShortcut } = keycodes;
 
 /**
  * Returns true if the node is the inline node boundary. This is used in node
@@ -194,11 +194,11 @@ export class RichText extends Component {
 			this.props.onSetup( editor );
 		}
 
-		editor.shortcuts.add( 'meta+k', '', () => this.changeFormats( { link: { isAdding: true } } ) );
-		editor.shortcuts.add( 'access+a', '', () => this.changeFormats( { link: { isAdding: true } } ) );
-		editor.shortcuts.add( 'access+s', '', () => this.changeFormats( { link: undefined } ) );
-		editor.shortcuts.add( 'access+d', '', () => this.changeFormats( { strikethrough: ! this.state.formats.strikethrough } ) );
-		editor.shortcuts.add( 'access+x', '', () => this.changeFormats( { code: ! this.state.formats.code } ) );
+		editor.shortcuts.add( rawShortcut.primary( 'k' ), '', () => this.changeFormats( { link: { isAdding: true } } ) );
+		editor.shortcuts.add( rawShortcut.access( 'a' ), '', () => this.changeFormats( { link: { isAdding: true } } ) );
+		editor.shortcuts.add( rawShortcut.access( 's' ), '', () => this.changeFormats( { link: undefined } ) );
+		editor.shortcuts.add( rawShortcut.access( 'd' ), '', () => this.changeFormats( { strikethrough: ! this.state.formats.strikethrough } ) );
+		editor.shortcuts.add( rawShortcut.access( 'x' ), '', () => this.changeFormats( { code: ! this.state.formats.code } ) );
 	}
 
 	/**

components/icon-button/index.js

@@ -25,14 +25,21 @@ class IconButton extends Component {
 		const classes = classnames( 'components-icon-button', className );
 		const tooltipText = tooltip || label;
 
-		// Should show the tooltip if an explicit tooltip is passed
-		// or if there's a label and the children are empty and the tooltip is not explicitely disabled
-		const showTooltip = !! tooltip ||
+		// Should show the tooltip...
+		const showTooltip = (
+			// if an explicit tooltip is passed or...
+			!! tooltip ||
+			// if there's a shortcut or...
+			!! shortcut ||
 			(
-				label &&
+				// if there's a label and...
+				!! label &&
+				// the children are empty and...
 				( ! children || ( isArray( children ) && ! children.length ) ) &&
+				// the tooltip is not explicitely disabled.
 				false !== tooltip
-			);
+			)
+		);
 
 		let element = (
 			<Button { ...additionalProps } aria-label={ label } className={ classes } focus={ focus }>

edit-post/keyboard-shortcuts.js

@@ -1,11 +1,13 @@
 /**
- * Internal dependencies
+ * WordPress dependencies
  */
-import { secondaryKeyCode, secondaryShortcut } from 'utils/keycodes';
+import { keycodes } from '@wordpress/utils';
+
+const { rawShortcut, displayShortcut } = keycodes;
 
 export default {
 	toggleEditorMode: {
-		value: secondaryKeyCode( 'm' ),
-		label: secondaryShortcut( 'M' ),
+		value: rawShortcut.secondary( 'm' ),
+		label: displayShortcut.secondary( 'm' ),
 	},
 };

editor/components/editor-history/redo.js

@@ -5,12 +5,16 @@ import { __ } from '@wordpress/i18n';
 import { IconButton } from '@wordpress/components';
 import { withSelect, withDispatch } from '@wordpress/data';
 import { compose } from '@wordpress/element';
+import { keycodes } from '@wordpress/utils';
+
+const { displayShortcut } = keycodes;
 
 function EditorHistoryRedo( { hasRedo, redo } ) {
 	return (
 		<IconButton
 			icon="redo"
 			label={ __( 'Redo' ) }
+			shortcut={ displayShortcut.primaryShift( 'z' ) }
 			disabled={ ! hasRedo }
 			onClick={ redo }
 			className="editor-history__undo"

editor/components/editor-history/undo.js

@@ -5,12 +5,16 @@ import { __ } from '@wordpress/i18n';
 import { IconButton } from '@wordpress/components';
 import { withSelect, withDispatch } from '@wordpress/data';
 import { compose } from '@wordpress/element';
+import { keycodes } from '@wordpress/utils';
+
+const { displayShortcut } = keycodes;
 
 function EditorHistoryUndo( { hasUndo, undo } ) {
 	return (
 		<IconButton
 			icon="undo"
 			label={ __( 'Undo' ) }
+			shortcut={ displayShortcut.primary( 'z' ) }
 			disabled={ ! hasUndo }
 			onClick={ undo }
 			className="editor-history__undo"

editor/components/post-saved-state/index.js

@@ -5,13 +5,16 @@ import { __ } from '@wordpress/i18n';
 import { Dashicon, IconButton, withSafeTimeout } from '@wordpress/components';
 import { Component, compose } from '@wordpress/element';
 import { withSelect, withDispatch } from '@wordpress/data';
+import { keycodes } from '@wordpress/utils';
 
 /**
  * Internal dependencies
  */
 import './style.scss';
 import PostSwitchToDraftButton from '../post-switch-to-draft-button';
 
+const { displayShortcut } = keycodes;
+
 /**
  * Component showing whether the post is saved or not and displaying save links.
  *
@@ -68,6 +71,7 @@ export class PostSavedState extends Component {
 				className="editor-post-save-draft"
 				onClick={ onSave }
 				icon="cloud-upload"
+				shortcut={ displayShortcut.primary( 's' ) }
 			>
 				{ __( 'Save Draft' ) }
 			</IconButton>

utils/keycodes.js

@@ -8,6 +8,12 @@
  * on Windows Control will usually come first. So don't provide your own
  * shortcut combos directly to keyboardShortcut().
  */
+
+/**
+ * External dependencies
+ */
+import { get, mapValues } from 'lodash';
+
 export const BACKSPACE = 8;
 export const TAB = 9;
 export const ENTER = 13;
@@ -23,8 +29,8 @@ export const F10 = 121;
 
 export const ALT = 'alt';
 export const CTRL = 'ctrl';
-export const PRIMARY = 'mod';
-export const META = 'meta';
+// Understood in both Mousetrap and TinyMCE.
+export const COMMAND = 'meta';
 export const SHIFT = 'shift';
 
 /**
@@ -38,99 +44,49 @@ export function isMacOS( _window = window ) {
 	return _window.navigator.platform.indexOf( 'Mac' ) !== -1;
 }
 
-/**
- * Create a keyboard shortcut based on a string of modifiers + key(s).
- *
- * This function is not intended to be used directly by developers.
- * Instead, use primaryShortcut(), accessShortcut(), etc.
- *
- * @param {string} keys          Modifier and keyboard keys, seperated by "+".
- * @param {Object} _isMacOS      isMacOS function by default; used for DI testing.
- *
- * @return {string}          The keyboard shortcut.
- */
-export function keyboardShortcut( keys, _isMacOS = isMacOS ) {
-	const isMac = _isMacOS();
-
-	const alt = isMac ? '⌥option' : 'Alt';
-	const meta = isMac ? '⌃control' : '⊞';
-	const primary = isMac ? '⌘' : 'Ctrl';
-	const shift = isMac ? '⇧shift' : 'Shift';
-
-	const replacementKeyMap = {
-		[ ALT ]: alt,
-		[ META ]: meta,
-		[ PRIMARY ]: primary,
-		[ SHIFT ]: shift,
-	};
-
-	return keys
-		.replace( /\s/g, '' )
-		.split( '+' )
-		.map( ( key ) => {
-			return replacementKeyMap.hasOwnProperty( key ) ?
-				replacementKeyMap[ key ] : key;
-		} )
-		.join( '+' )
-		// Because we use just the clover symbol for MacOS's "command" key, remove
-		// the key join character ("+") between it and the final character if that
-		// final character is alphanumeric. ⌘S looks nicer than ⌘+S.
-		.replace( /⌘\+([a-zA-Z0-9])$/g, '⌘$1' );
-}
-
-/**
- * Create an access key shortcut based on a single character.
- *
- * Access key combo is:
- *  - Control+Alt on MacOS.
- *  - Shift+Alt on Windows/everywhere else.
- *
- * @param {string} character The character for the access combination.
- * @param {Object} _isMacOS  isMacOS function by default; used for DI testing.
- *
- * @return {string}          The keyboard shortcut.
- */
-export function accessShortcut( character, _isMacOS = isMacOS ) {
-	return keyboardShortcut( accessKeyCode( character.toUpperCase(), _isMacOS ), _isMacOS );
-}
-
-export function accessKeyCode( character, _isMacOS = isMacOS ) {
-	const keyCombo = _isMacOS() ? `${ META }+${ ALT }` : `${ SHIFT }+${ ALT }`;
-	return `${ keyCombo }+${ character }`;
-}
+const modifiers = {
+	primary: ( _isMac ) => _isMac() ? [ COMMAND ] : [ CTRL ],
+	primaryShift: ( _isMac ) => _isMac() ? [ SHIFT, COMMAND ] : [ CTRL, SHIFT ],
+	secondary: ( _isMac ) => _isMac() ? [ SHIFT, ALT, COMMAND ] : [ CTRL, SHIFT, ALT ],
+	access: ( _isMac ) => _isMac() ? [ CTRL, ALT ] : [ SHIFT, ALT ],
+};
 
 /**
- * Create a modifier shortcut based on a single character.
- *
- * This will output Ctrl+G on Windows when "G" is supplied as an argument.
- * This will output Command+G on MacOS when "G" is supplied as an argument.
+ * An object that contains functions to get raw shortcuts.
+ * E.g. rawShortcut.primary( 'm' ) will return 'meta+m' on Mac.
+ * These are intended for user with the KeyboardShortcuts component or TinyMCE.
  *
- * @param {string} character The character for the key command.
- * @param {Object} _isMacOS  isMacOS function by default; used for DI testing.
- *
- * @return {string}          The keyboard shortcut.
+ * @type {Object} Keyed map of functions to raw shortcuts.
  */
-export function primaryShortcut( character, _isMacOS = isMacOS ) {
-	return keyboardShortcut( `${ PRIMARY }+${ character.toUpperCase() }`, _isMacOS );
-}
+export const rawShortcut = mapValues( modifiers, ( modifier ) => {
+	return ( character, _isMac = isMacOS ) => {
+		return [ ...modifier( _isMac ), character.toLowerCase() ].join( '+' );
+	};
+} );
 
 /**
- * Create an access key + primary key shortcut based on a single character.
- *
- * Access key combo is:
- *  - Control+Alt+Command on MacOS.
- *  - Control+Shift+Alt on Windows/everywhere else.
- *
- * @param {string} character The character for the access combination.
- * @param {Object} _isMacOS  isMacOS function by default; used for DI testing.
+ * An object that contains functions to display shortcuts.
+ * E.g. displayShortcut.primary( 'm' ) will return '⌘M' on Mac.
  *
- * @return {string}          The keyboard shortcut.
+ * @type {Object} Keyed map of functions to display shortcuts.
  */
-export function secondaryShortcut( character, _isMacOS = isMacOS ) {
-	return keyboardShortcut( secondaryKeyCode( character.toUpperCase(), _isMacOS ), _isMacOS );
-}
+export const displayShortcut = mapValues( modifiers, ( modifier ) => {
+	return ( character, _isMac = isMacOS ) => {
+		const isMac = _isMac();
+		const replacementKeyMap = {
+			[ ALT ]: isMac ? '⌥option' : 'Alt',
+			[ CTRL ]: isMac ? '⌃control' : 'Ctrl',
+			[ COMMAND ]: '⌘',
+			[ SHIFT ]: isMac ? '⇧shift' : 'Shift',
+		};
+		const shortcut = [
+			...modifier( _isMac ).map( ( key ) => get( replacementKeyMap, key, key ) ),
+			character.toUpperCase(),
+		].join( '+' );
 
-export function secondaryKeyCode( character, _isMacOS = isMacOS ) {
-	const keyCombo = _isMacOS() ? `${ SHIFT }+${ ALT }+${ PRIMARY }` : `${ PRIMARY }+${ SHIFT }+${ ALT }`;
-	return `${ keyCombo }+${ character }`;
-}
+		// Because we use just the clover symbol for MacOS's "command" key, remove
+		// the key join character ("+") between it and the final character if that
+		// final character is alphanumeric. ⌘S looks nicer than ⌘+S.
+		return shortcut.replace( /⌘\+([A-Z0-9])$/g, '⌘$1' );
+	};
+} );