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
@@ -193,12 +193,6 @@ export class RichText extends Component {
 		if ( this.props.onSetup ) {
 			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 } ) );
 	}
 
 	/**
@@ -226,6 +220,18 @@ export class RichText extends Component {
 
 	onInit() {
 		this.registerCustomFormatters();
+
+		this.editor.shortcuts.add( rawShortcut.primary( 'k' ), '', () => this.changeFormats( { link: { isAdding: true } } ) );
+		this.editor.shortcuts.add( rawShortcut.access( 'a' ), '', () => this.changeFormats( { link: { isAdding: true } } ) );
+		this.editor.shortcuts.add( rawShortcut.access( 's' ), '', () => this.changeFormats( { link: undefined } ) );
+		this.editor.shortcuts.add( rawShortcut.access( 'd' ), '', () => this.changeFormats( { strikethrough: ! this.state.formats.strikethrough } ) );
+		this.editor.shortcuts.add( rawShortcut.access( 'x' ), '', () => this.changeFormats( { code: ! this.state.formats.code } ) );
+		this.editor.shortcuts.add( rawShortcut.primary( 'z' ), '', 'Undo' );
+		this.editor.shortcuts.add( rawShortcut.primaryShift( 'z' ), '', 'Redo' );
+
+		// Remove TinyMCE Core shortcut for consistency with global editor
+		// shortcuts. Also clashes with Mac browsers.
+		this.editor.shortcuts.remove( 'meta+y', '', 'Redo' );
 	}
 
 	adaptFormatter( options ) {

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 if...
+		const showTooltip = (
+			// an explicit tooltip is passed or...
+			tooltip ||
+			// there's a shortcut or...
+			shortcut ||
 			(
-				label &&
+				// there's a label and...
+				!! label &&
+				// the children are empty and...
 				( ! children || ( isArray( children ) && ! children.length ) ) &&
+				// the tooltip is not explicitly 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-global-keyboard-shortcuts/index.js

@@ -10,6 +10,9 @@ import { Component, Fragment, compose } from '@wordpress/element';
 import { KeyboardShortcuts } from '@wordpress/components';
 import { withSelect, withDispatch } from '@wordpress/data';
 import { withEditorSettings } from '@wordpress/blocks';
+import { keycodes } from '@wordpress/utils';
+
+const { rawShortcut } = keycodes;
 
 class EditorGlobalKeyboardShortcuts extends Component {
 	constructor() {
@@ -30,6 +33,7 @@ class EditorGlobalKeyboardShortcuts extends Component {
 
 	undoOrRedo( event ) {
 		const { onRedo, onUndo } = this.props;
+
 		if ( event.shiftKey ) {
 			onRedo();
 		} else {
@@ -69,9 +73,9 @@ class EditorGlobalKeyboardShortcuts extends Component {
 			<Fragment>
 				<KeyboardShortcuts
 					shortcuts={ {
-						'mod+a': this.selectAll,
-						'mod+z': this.undoOrRedo,
-						'mod+shift+z': this.undoOrRedo,
+						[ rawShortcut.primary( 'a' ) ]: this.selectAll,
+						[ rawShortcut.primary( 'z' ) ]: this.undoOrRedo,
+						[ rawShortcut.primaryShift( 'z' ) ]: this.undoOrRedo,
 						backspace: this.deleteSelectedBlocks,
 						del: this.deleteSelectedBlocks,
 						escape: this.clearMultiSelection,
@@ -80,7 +84,7 @@ class EditorGlobalKeyboardShortcuts extends Component {
 				<KeyboardShortcuts
 					bindGlobal
 					shortcuts={ {
-						'mod+s': this.save,
+						[ rawShortcut.primary( 's' ) ]: this.save,
 					} }
 				/>
 			</Fragment>

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/index.js

@@ -1,11 +1,8 @@
-import { omit } from 'lodash';
-
 import * as focus from './focus';
-import * as keycodesAll from './keycodes';
+import * as keycodes from './keycodes';
 import * as viewPort from './viewport';
 import { decodeEntities } from './entities';
 
-const keycodes = omit( keycodesAll, [ 'keyboardShortcut' ] );
 export { focus };
 export { keycodes };
 export { decodeEntities };