From 5be0ff4e89cee4e6a1e13e1e3c073bf13d7b8c9b Mon Sep 17 00:00:00 2001
From: iseulde <wp@iseulde.com>
Date: Sat, 5 May 2018 14:52:35 +0200
Subject: [PATCH 1/6] Add shortcut tooltips for main toolbar

---
 components/icon-button/index.js             | 17 ++++++++++++-----
 editor/components/editor-history/redo.js    |  6 ++++++
 editor/components/editor-history/undo.js    |  6 ++++++
 editor/components/post-saved-state/index.js |  2 ++
 4 files changed, 26 insertions(+), 5 deletions(-)

diff --git a/components/icon-button/index.js b/components/icon-button/index.js
index 34a9a820b89f1..ad7c0ab268f79 100644
--- a/components/icon-button/index.js
+++ b/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 }>
diff --git a/editor/components/editor-history/redo.js b/editor/components/editor-history/redo.js
index 6636d78a94f67..099017204ec94 100644
--- a/editor/components/editor-history/redo.js
+++ b/editor/components/editor-history/redo.js
@@ -6,11 +6,17 @@ import { IconButton } from '@wordpress/components';
 import { withSelect, withDispatch } from '@wordpress/data';
 import { compose } from '@wordpress/element';
 
+/**
+ * Internal dependencies
+ */
+import { primaryShortcut } from 'utils/keycodes';
+
 function EditorHistoryRedo( { hasRedo, redo } ) {
 	return (
 		<IconButton
 			icon="redo"
 			label={ __( 'Redo' ) }
+			shortcut={ primaryShortcut( 'Y' ) }
 			disabled={ ! hasRedo }
 			onClick={ redo }
 			className="editor-history__undo"
diff --git a/editor/components/editor-history/undo.js b/editor/components/editor-history/undo.js
index 3a3f060fa173e..257eebb03e3f9 100644
--- a/editor/components/editor-history/undo.js
+++ b/editor/components/editor-history/undo.js
@@ -6,11 +6,17 @@ import { IconButton } from '@wordpress/components';
 import { withSelect, withDispatch } from '@wordpress/data';
 import { compose } from '@wordpress/element';
 
+/**
+ * Internal dependencies
+ */
+import { primaryShortcut } from 'utils/keycodes';
+
 function EditorHistoryUndo( { hasUndo, undo } ) {
 	return (
 		<IconButton
 			icon="undo"
 			label={ __( 'Undo' ) }
+			shortcut={ primaryShortcut( 'Z' ) }
 			disabled={ ! hasUndo }
 			onClick={ undo }
 			className="editor-history__undo"
diff --git a/editor/components/post-saved-state/index.js b/editor/components/post-saved-state/index.js
index 2a49c7146b433..c1d269cbfac57 100644
--- a/editor/components/post-saved-state/index.js
+++ b/editor/components/post-saved-state/index.js
@@ -11,6 +11,7 @@ import { withSelect, withDispatch } from '@wordpress/data';
  */
 import './style.scss';
 import PostSwitchToDraftButton from '../post-switch-to-draft-button';
+import { primaryShortcut } from 'utils/keycodes';
 
 /**
  * Component showing whether the post is saved or not and displaying save links.
@@ -68,6 +69,7 @@ export class PostSavedState extends Component {
 				className="editor-post-save-draft"
 				onClick={ onSave }
 				icon="cloud-upload"
+				shortcut={ primaryShortcut( 'S' ) }
 			>
 				{ __( 'Save Draft' ) }
 			</IconButton>

From 3fca8d04e0a7429f278e75d5151aac1f9b463d4f Mon Sep 17 00:00:00 2001
From: iseulde <wp@iseulde.com>
Date: Sun, 6 May 2018 14:03:30 +0200
Subject: [PATCH 2/6] Reorganise keycode file

---
 blocks/rich-text/format-toolbar/index.js    |  11 +-
 blocks/rich-text/index.js                   |  12 +-
 edit-post/keyboard-shortcuts.js             |  10 +-
 editor/components/editor-history/redo.js    |   8 +-
 editor/components/editor-history/undo.js    |   8 +-
 editor/components/post-saved-state/index.js |   6 +-
 utils/keycodes.js                           | 134 ++++++---------
 utils/test/keycodes.js                      | 171 ++++----------------
 8 files changed, 104 insertions(+), 256 deletions(-)

diff --git a/blocks/rich-text/format-toolbar/index.js b/blocks/rich-text/format-toolbar/index.js
index a175906e5171b..a987d203606f4 100644
--- a/blocks/rich-text/format-toolbar/index.js
+++ b/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',
 	},
 ];
diff --git a/blocks/rich-text/index.js b/blocks/rich-text/index.js
index b3baabd779295..3c80e7a3d621a 100644
--- a/blocks/rich-text/index.js
+++ b/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 } ) );
 	}
 
 	/**
diff --git a/edit-post/keyboard-shortcuts.js b/edit-post/keyboard-shortcuts.js
index f6b58c16a7847..6ef7d09a38c85 100644
--- a/edit-post/keyboard-shortcuts.js
+++ b/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' ),
 	},
 };
diff --git a/editor/components/editor-history/redo.js b/editor/components/editor-history/redo.js
index 099017204ec94..edf2af589fa8c 100644
--- a/editor/components/editor-history/redo.js
+++ b/editor/components/editor-history/redo.js
@@ -5,18 +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';
 
-/**
- * Internal dependencies
- */
-import { primaryShortcut } from 'utils/keycodes';
+const { displayShortcut } = keycodes;
 
 function EditorHistoryRedo( { hasRedo, redo } ) {
 	return (
 		<IconButton
 			icon="redo"
 			label={ __( 'Redo' ) }
-			shortcut={ primaryShortcut( 'Y' ) }
+			shortcut={ displayShortcut.primaryShift( 'z' ) }
 			disabled={ ! hasRedo }
 			onClick={ redo }
 			className="editor-history__undo"
diff --git a/editor/components/editor-history/undo.js b/editor/components/editor-history/undo.js
index 257eebb03e3f9..35c08f87697ce 100644
--- a/editor/components/editor-history/undo.js
+++ b/editor/components/editor-history/undo.js
@@ -5,18 +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';
 
-/**
- * Internal dependencies
- */
-import { primaryShortcut } from 'utils/keycodes';
+const { displayShortcut } = keycodes;
 
 function EditorHistoryUndo( { hasUndo, undo } ) {
 	return (
 		<IconButton
 			icon="undo"
 			label={ __( 'Undo' ) }
-			shortcut={ primaryShortcut( 'Z' ) }
+			shortcut={ displayShortcut.primary( 'z' ) }
 			disabled={ ! hasUndo }
 			onClick={ undo }
 			className="editor-history__undo"
diff --git a/editor/components/post-saved-state/index.js b/editor/components/post-saved-state/index.js
index c1d269cbfac57..f535562269038 100644
--- a/editor/components/post-saved-state/index.js
+++ b/editor/components/post-saved-state/index.js
@@ -5,13 +5,15 @@ 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';
-import { primaryShortcut } from 'utils/keycodes';
+
+const { displayShortcut } = keycodes;
 
 /**
  * Component showing whether the post is saved or not and displaying save links.
@@ -69,7 +71,7 @@ export class PostSavedState extends Component {
 				className="editor-post-save-draft"
 				onClick={ onSave }
 				icon="cloud-upload"
-				shortcut={ primaryShortcut( 'S' ) }
+				shortcut={ displayShortcut.primary( 's' ) }
 			>
 				{ __( 'Save Draft' ) }
 			</IconButton>
diff --git a/utils/keycodes.js b/utils/keycodes.js
index 41f0fd9ddf659..40274e25bfa6c 100644
--- a/utils/keycodes.js
+++ b/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' );
+	};
+} );
diff --git a/utils/test/keycodes.js b/utils/test/keycodes.js
index 4dcfae26326d9..dded1d8cce9bc 100644
--- a/utils/test/keycodes.js
+++ b/utils/test/keycodes.js
@@ -2,170 +2,63 @@
  * Internal dependencies
  */
 import {
-	ALT,
-	PRIMARY,
-	META,
-	SHIFT,
-	accessKeyCode,
-	accessShortcut,
 	isMacOS,
-	keyboardShortcut,
-	primaryShortcut,
-	secondaryKeyCode,
-	secondaryShortcut,
+	displayShortcut,
 } from '../keycodes';
 
 const isMacOSFalse = () => false;
 const isMacOSTrue = () => true;
 
-describe( 'keyboardShortcut', () => {
-	const macShortcut = ( keyString ) => keyboardShortcut( keyString, isMacOSTrue );
-	const windowsShortcut = ( keyString ) => keyboardShortcut( keyString, isMacOSFalse );
-
-	it( 'should split string by "+" character', () => {
-		expect( windowsShortcut( `${ PRIMARY }+S` ) ).toEqual( 'Ctrl+S' );
-	} );
-
-	it( 'should remove whitespace from string', () => {
-		expect( windowsShortcut( `${ PRIMARY }+ S` ) ).toEqual( 'Ctrl+S' );
-	} );
-
-	// TODO: Make a generic version outside of Windows as a fallback so we
-	// don't, for instance, show the Windows logo to Ubuntu users, etc.
-	describe( 'Windows/Other Platforms', () => {
-		it( 'should output Ctrl for PRIMARY key', () => {
-			const shortcut = windowsShortcut( PRIMARY );
-			expect( shortcut ).toEqual( 'Ctrl' );
-		} );
-
-		it( 'should output Alt for ALT key', () => {
-			const shortcut = windowsShortcut( ALT );
-			expect( shortcut ).toEqual( 'Alt' );
-		} );
-
-		it( 'should output Windows Unicode for META key', () => {
-			const shortcut = windowsShortcut( META );
-			expect( shortcut ).toEqual( '⊞' );
+describe( 'displayShortcut', () => {
+	describe( 'primary', () => {
+		it( 'should output Control text on Windows', () => {
+			const shortcut = displayShortcut.primary( 'M', isMacOSFalse );
+			expect( shortcut ).toEqual( 'Ctrl+M' );
 		} );
 
-		it( 'should output Shift for SHIFT key', () => {
-			const shortcut = windowsShortcut( SHIFT );
-			expect( shortcut ).toEqual( 'Shift' );
-		} );
-
-		it( 'should combine keys with "+" character', () => {
-			const shortcut = windowsShortcut( `${ PRIMARY }+${ ALT }+B` );
-			expect( shortcut ).toEqual( 'Ctrl+Alt+B' );
+		it( 'should output command symbol on MacOS', () => {
+			const shortcut = displayShortcut.primary( 'M', isMacOSTrue );
+			expect( shortcut ).toEqual( '⌘M' );
 		} );
 	} );
 
-	describe( 'MacOS', () => {
-		it( 'should output MacOS Clover for PRIMARY key', () => {
-			const shortcut = macShortcut( PRIMARY );
-			expect( shortcut ).toEqual( '⌘' );
+	describe( 'primaryShift', () => {
+		it( 'should output Ctrl+Shift text on Windows', () => {
+			const shortcut = displayShortcut.primaryShift( 'M', isMacOSFalse );
+			expect( shortcut ).toEqual( 'Ctrl+Shift+M' );
 		} );
 
-		it( 'should output option symbol for ALT key', () => {
-			const shortcut = macShortcut( ALT );
-			expect( shortcut ).toEqual( '⌥option' );
+		it( 'should output shift+command symbols on MacOS', () => {
+			const shortcut = displayShortcut.primaryShift( 'M', isMacOSTrue );
+			expect( shortcut ).toEqual( '⇧shift+⌘M' );
 		} );
+	} );
 
-		it( 'should output control caret for META key', () => {
-			const shortcut = macShortcut( META );
-			expect( shortcut ).toEqual( '⌃control' );
+	describe( 'secondary', () => {
+		it( 'should output Ctrl+Shift+Alt text on Windows', () => {
+			const shortcut = displayShortcut.secondary( 'M', isMacOSFalse );
+			expect( shortcut ).toEqual( 'Ctrl+Shift+Alt+M' );
 		} );
 
-		it( 'should output Shift unicode for SHIFT key', () => {
-			const shortcut = macShortcut( SHIFT );
-			expect( shortcut ).toEqual( '⇧shift' );
+		it( 'should output shift+option+command symbols on MacOS', () => {
+			const shortcut = displayShortcut.secondary( 'M', isMacOSTrue );
+			expect( shortcut ).toEqual( '⇧shift+⌥option+⌘M' );
 		} );
+	} );
 
-		it( 'should strip + between command and single ending character', () => {
-			const simpleShortcut = macShortcut( `${ PRIMARY }+B` );
-			expect( simpleShortcut ).toEqual( '⌘B' );
-
-			const modifiedShortcut = macShortcut( `${ ALT }+${ PRIMARY }+B` );
-			expect( modifiedShortcut ).toEqual( '⌥option+⌘B' );
+	describe( 'access', () => {
+		it( 'should output Shift+Alt text on Windows', () => {
+			const shortcut = displayShortcut.access( 'm', isMacOSFalse );
+			expect( shortcut ).toEqual( 'Shift+Alt+M' );
 		} );
 
-		it( 'should not strip + between command and other character', () => {
-			const shortcut = macShortcut( `${ PRIMARY }+Space` );
-			expect( shortcut ).toEqual( '⌘+Space' );
+		it( 'should output control+option symbols on MacOS', () => {
+			const shortcut = displayShortcut.access( 'M', isMacOSTrue );
+			expect( shortcut ).toEqual( '⌃control+⌥option+M' );
 		} );
 	} );
 } );
 
-describe( 'accessShortcut', () => {
-	it( 'should uppercase character', () => {
-		const shortcut = accessShortcut( 'm', isMacOSFalse );
-		expect( shortcut ).toEqual( 'Shift+Alt+M' );
-	} );
-
-	it( 'should output Shift+Alt text on Windows', () => {
-		const shortcut = accessShortcut( 'M', isMacOSFalse );
-		expect( shortcut ).toEqual( 'Shift+Alt+M' );
-	} );
-
-	it( 'should output control+option symbols on MacOS', () => {
-		const shortcut = accessShortcut( 'M', isMacOSTrue );
-		expect( shortcut ).toEqual( '⌃control+⌥option+M' );
-	} );
-} );
-
-describe( 'accessKeyCode', () => {
-	it( 'outputs the correct keycode on MacOS', () => {
-		expect( accessKeyCode( 'm', isMacOSTrue ) ).toEqual( 'meta+alt+m' );
-	} );
-
-	it( 'outputs the correct keycode on Windows', () => {
-		expect( accessKeyCode( 'm', isMacOSFalse ) ).toEqual( 'shift+alt+m' );
-	} );
-} );
-
-describe( 'primaryShortcut', () => {
-	it( 'should uppercase character', () => {
-		const shortcut = primaryShortcut( 'm', isMacOSFalse );
-		expect( shortcut ).toEqual( 'Ctrl+M' );
-	} );
-
-	it( 'should output Control text on Windows', () => {
-		const shortcut = primaryShortcut( 'M', isMacOSFalse );
-		expect( shortcut ).toEqual( 'Ctrl+M' );
-	} );
-
-	it( 'should output control symbol on MacOS', () => {
-		const shortcut = primaryShortcut( 'M', isMacOSTrue );
-		expect( shortcut ).toEqual( '⌘M' );
-	} );
-} );
-
-describe( 'secondaryShortcut', () => {
-	it( 'should uppercase character', () => {
-		const shortcut = secondaryShortcut( 'm', isMacOSFalse );
-		expect( shortcut ).toEqual( 'Ctrl+Shift+Alt+M' );
-	} );
-
-	it( 'should output Shift+Alt text on Windows', () => {
-		const shortcut = secondaryShortcut( 'M', isMacOSFalse );
-		expect( shortcut ).toEqual( 'Ctrl+Shift+Alt+M' );
-	} );
-
-	it( 'should output control+option symbols on MacOS', () => {
-		const shortcut = secondaryShortcut( 'M', isMacOSTrue );
-		expect( shortcut ).toEqual( '⇧shift+⌥option+⌘M' );
-	} );
-} );
-
-describe( 'secondaryKeyCode', () => {
-	it( 'outputs the correct keycode on MacOS', () => {
-		expect( secondaryKeyCode( 'm', isMacOSTrue ) ).toEqual( 'shift+alt+mod+m' );
-	} );
-
-	it( 'outputs the correct keycode on Windows', () => {
-		expect( secondaryKeyCode( 'm', isMacOSFalse ) ).toEqual( 'mod+shift+alt+m' );
-	} );
-} );
-
 describe( 'isMacOS helper', () => {
 	it( 'should identify anything with "Mac" in it as MacOS', () => {
 		expect( isMacOS( { navigator: { platform: 'Mac' } } ) ).toEqual( true );

From 56389d609aed7376488b54404f64f72a84f41c88 Mon Sep 17 00:00:00 2001
From: iseulde <wp@iseulde.com>
Date: Sun, 6 May 2018 15:51:18 +0200
Subject: [PATCH 3/6] Add rawShortcut tests

---
 utils/test/keycodes.js | 65 +++++++++++++++++++++++++++++++++++++-----
 1 file changed, 58 insertions(+), 7 deletions(-)

diff --git a/utils/test/keycodes.js b/utils/test/keycodes.js
index dded1d8cce9bc..5b7adf10debec 100644
--- a/utils/test/keycodes.js
+++ b/utils/test/keycodes.js
@@ -4,6 +4,7 @@
 import {
 	isMacOS,
 	displayShortcut,
+	rawShortcut,
 } from '../keycodes';
 
 const isMacOSFalse = () => false;
@@ -12,36 +13,36 @@ const isMacOSTrue = () => true;
 describe( 'displayShortcut', () => {
 	describe( 'primary', () => {
 		it( 'should output Control text on Windows', () => {
-			const shortcut = displayShortcut.primary( 'M', isMacOSFalse );
+			const shortcut = displayShortcut.primary( 'm', isMacOSFalse );
 			expect( shortcut ).toEqual( 'Ctrl+M' );
 		} );
 
 		it( 'should output command symbol on MacOS', () => {
-			const shortcut = displayShortcut.primary( 'M', isMacOSTrue );
+			const shortcut = displayShortcut.primary( 'm', isMacOSTrue );
 			expect( shortcut ).toEqual( '⌘M' );
 		} );
 	} );
 
 	describe( 'primaryShift', () => {
 		it( 'should output Ctrl+Shift text on Windows', () => {
-			const shortcut = displayShortcut.primaryShift( 'M', isMacOSFalse );
+			const shortcut = displayShortcut.primaryShift( 'm', isMacOSFalse );
 			expect( shortcut ).toEqual( 'Ctrl+Shift+M' );
 		} );
 
 		it( 'should output shift+command symbols on MacOS', () => {
-			const shortcut = displayShortcut.primaryShift( 'M', isMacOSTrue );
+			const shortcut = displayShortcut.primaryShift( 'm', isMacOSTrue );
 			expect( shortcut ).toEqual( '⇧shift+⌘M' );
 		} );
 	} );
 
 	describe( 'secondary', () => {
 		it( 'should output Ctrl+Shift+Alt text on Windows', () => {
-			const shortcut = displayShortcut.secondary( 'M', isMacOSFalse );
+			const shortcut = displayShortcut.secondary( 'm', isMacOSFalse );
 			expect( shortcut ).toEqual( 'Ctrl+Shift+Alt+M' );
 		} );
 
 		it( 'should output shift+option+command symbols on MacOS', () => {
-			const shortcut = displayShortcut.secondary( 'M', isMacOSTrue );
+			const shortcut = displayShortcut.secondary( 'm', isMacOSTrue );
 			expect( shortcut ).toEqual( '⇧shift+⌥option+⌘M' );
 		} );
 	} );
@@ -53,12 +54,62 @@ describe( 'displayShortcut', () => {
 		} );
 
 		it( 'should output control+option symbols on MacOS', () => {
-			const shortcut = displayShortcut.access( 'M', isMacOSTrue );
+			const shortcut = displayShortcut.access( 'm', isMacOSTrue );
 			expect( shortcut ).toEqual( '⌃control+⌥option+M' );
 		} );
 	} );
 } );
 
+describe( 'rawShortcut', () => {
+	describe( 'primary', () => {
+		it( 'should output ctrl on Windows', () => {
+			const shortcut = rawShortcut.primary( 'm', isMacOSFalse );
+			expect( shortcut ).toEqual( 'ctrl+m' );
+		} );
+
+		it( 'should output meta on MacOS', () => {
+			const shortcut = rawShortcut.primary( 'm', isMacOSTrue );
+			expect( shortcut ).toEqual( 'meta+m' );
+		} );
+	} );
+
+	describe( 'primaryShift', () => {
+		it( 'should output ctrl+shift on Windows', () => {
+			const shortcut = rawShortcut.primaryShift( 'm', isMacOSFalse );
+			expect( shortcut ).toEqual( 'ctrl+shift+m' );
+		} );
+
+		it( 'should output shift+meta on MacOS', () => {
+			const shortcut = rawShortcut.primaryShift( 'm', isMacOSTrue );
+			expect( shortcut ).toEqual( 'shift+meta+m' );
+		} );
+	} );
+
+	describe( 'secondary', () => {
+		it( 'should output ctrl+shift+alt on Windows', () => {
+			const shortcut = rawShortcut.secondary( 'm', isMacOSFalse );
+			expect( shortcut ).toEqual( 'ctrl+shift+alt+m' );
+		} );
+
+		it( 'should output shift+alt+meta on MacOS', () => {
+			const shortcut = rawShortcut.secondary( 'm', isMacOSTrue );
+			expect( shortcut ).toEqual( 'shift+alt+meta+m' );
+		} );
+	} );
+
+	describe( 'access', () => {
+		it( 'should output shift+alt on Windows', () => {
+			const shortcut = rawShortcut.access( 'm', isMacOSFalse );
+			expect( shortcut ).toEqual( 'shift+alt+m' );
+		} );
+
+		it( 'should output ctrl+alt on MacOS', () => {
+			const shortcut = rawShortcut.access( 'm', isMacOSTrue );
+			expect( shortcut ).toEqual( 'ctrl+alt+m' );
+		} );
+	} );
+} );
+
 describe( 'isMacOS helper', () => {
 	it( 'should identify anything with "Mac" in it as MacOS', () => {
 		expect( isMacOS( { navigator: { platform: 'Mac' } } ) ).toEqual( true );

From a161ebcdc7d03200e7f29a11ef6057cbfadf8b5c Mon Sep 17 00:00:00 2001
From: iseulde <wp@iseulde.com>
Date: Sun, 6 May 2018 15:55:16 +0200
Subject: [PATCH 4/6] Polish

---
 components/icon-button/index.js | 14 +++++++-------
 1 file changed, 7 insertions(+), 7 deletions(-)

diff --git a/components/icon-button/index.js b/components/icon-button/index.js
index ad7c0ab268f79..c6c35863bab98 100644
--- a/components/icon-button/index.js
+++ b/components/icon-button/index.js
@@ -25,18 +25,18 @@ class IconButton extends Component {
 		const classes = classnames( 'components-icon-button', className );
 		const tooltipText = tooltip || label;
 
-		// Should show the tooltip...
+		// Should show the tooltip if...
 		const showTooltip = (
-			// if an explicit tooltip is passed or...
-			!! tooltip ||
-			// if there's a shortcut or...
-			!! shortcut ||
+			// an explicit tooltip is passed or...
+			tooltip ||
+			// there's a shortcut or...
+			shortcut ||
 			(
-				// if there's a label and...
+				// there's a label and...
 				!! label &&
 				// the children are empty and...
 				( ! children || ( isArray( children ) && ! children.length ) ) &&
-				// the tooltip is not explicitely disabled.
+				// the tooltip is not explicitly disabled.
 				false !== tooltip
 			)
 		);

From 90c3e90519f8156a7b983b94d97b101bd1f2b358 Mon Sep 17 00:00:00 2001
From: iseulde <wp@iseulde.com>
Date: Sun, 6 May 2018 16:01:08 +0200
Subject: [PATCH 5/6] No longer needed to omit keyboardShortcut

---
 utils/index.js | 5 +----
 1 file changed, 1 insertion(+), 4 deletions(-)

diff --git a/utils/index.js b/utils/index.js
index 181bbc75eaab6..ea860814df14d 100644
--- a/utils/index.js
+++ b/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 };

From f042a7083f47e488e67b81f9d83dd7e76583924b Mon Sep 17 00:00:00 2001
From: iseulde <wp@iseulde.com>
Date: Sun, 6 May 2018 16:26:53 +0200
Subject: [PATCH 6/6] Use rawShortcut everywhere

---
 blocks/rich-text/index.js                      | 18 ++++++++++++------
 .../editor-global-keyboard-shortcuts/index.js  | 12 ++++++++----
 2 files changed, 20 insertions(+), 10 deletions(-)

diff --git a/blocks/rich-text/index.js b/blocks/rich-text/index.js
index 3c80e7a3d621a..56931e4029aa1 100644
--- a/blocks/rich-text/index.js
+++ b/blocks/rich-text/index.js
@@ -193,12 +193,6 @@ export class RichText extends Component {
 		if ( this.props.onSetup ) {
 			this.props.onSetup( editor );
 		}
-
-		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 } ) );
 	}
 
 	/**
@@ -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 ) {
diff --git a/editor/components/editor-global-keyboard-shortcuts/index.js b/editor/components/editor-global-keyboard-shortcuts/index.js
index 74e6df91e970a..9c4e8c00ee003 100644
--- a/editor/components/editor-global-keyboard-shortcuts/index.js
+++ b/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>