From 5c052cefd05ac05441a1b398c5534d7deddde053 Mon Sep 17 00:00:00 2001
From: Grzegorz Ziolkowski <grzegorz@gziolo.pl>
Date: Tue, 16 Oct 2018 10:13:36 +0200
Subject: [PATCH] Editor: Add keyboard shortcuts support for formatters

---
 .../src/components/rich-text/format-edit.js   | 33 +++++++++++--------
 1 file changed, 20 insertions(+), 13 deletions(-)

diff --git a/packages/editor/src/components/rich-text/format-edit.js b/packages/editor/src/components/rich-text/format-edit.js
index 99b2ef43602d5d..360f1ba424c5d3 100644
--- a/packages/editor/src/components/rich-text/format-edit.js
+++ b/packages/editor/src/components/rich-text/format-edit.js
@@ -1,13 +1,11 @@
 /**
  * WordPress dependencies
  */
-import { Fragment, Component } from '@wordpress/element';
+import { Component, Fragment } from '@wordpress/element';
 import { getActiveFormat, getFormatTypes } from '@wordpress/rich-text';
-import { Fill } from '@wordpress/components';
+import { Fill, KeyboardShortcuts } from '@wordpress/components';
 import { rawShortcut } from '@wordpress/keycodes';
 
-let currentEditor;
-
 function FillToolbarSlot( { name, children } ) {
 	return (
 		<Fill name={ `RichText.ToolbarControls.${ name }` }>
@@ -16,23 +14,32 @@ function FillToolbarSlot( { name, children } ) {
 	);
 }
 
-// To do: don't rely on editor instance.
 class Shortcut extends Component {
-	constructor( { type, character, onUse } ) {
+	constructor() {
 		super( ...arguments );
-		currentEditor.shortcuts.add( rawShortcut[ type ]( character ), '', () => {
-			onUse();
-		} );
+
+		this.onUse = this.onUse.bind( this );
+	}
+
+	onUse() {
+		this.props.onUse();
 	}
 
 	render() {
-		return null;
+		const { character, type } = this.props;
+
+		return (
+			<KeyboardShortcuts
+				bindGlobal
+				shortcuts={ {
+					[ rawShortcut[ type ]( character ) ]: this.onUse,
+				} }
+			/>
+		);
 	}
 }
 
-const FormatEdit = ( { value, onChange, editor } ) => {
-	currentEditor = editor;
-
+const FormatEdit = ( { onChange, value } ) => {
 	return (
 		<Fragment>
 			{ getFormatTypes().map( ( { name, edit: Edit }, i ) => {