Components: Extract Reusable Keyboard Shortcuts

editor/components/editor-global-keyboard-shortcuts/index.js

@@ -0,0 +1,80 @@
+/**
+ * External dependencies
+ */
+import { connect } from 'react-redux';
+import { first, last } from 'lodash';
+
+/**
+ * WordPress dependencies
+ */
+import { Component } from '@wordpress/element';
+import { KeyboardShortcuts } from '@wordpress/components';
+
+/**
+ * Internal dependencies
+ */
+import { getBlockUids, getMultiSelectedBlockUids } from '../../selectors';
+import { clearSelectedBlock, multiSelect, redo, undo, removeBlocks } from '../../actions';
+
+class EditorGlobalKeyboardShortcuts extends Component {
+	constructor() {
+		super( ...arguments );
+		this.selectAll = this.selectAll.bind( this );
+		this.undoOrRedo = this.undoOrRedo.bind( this );
+		this.deleteSelectedBlocks = this.deleteSelectedBlocks.bind( this );
+	}
+
+	selectAll( event ) {
+		const { uids, onMultiSelect } = this.props;
+		event.preventDefault();
+		onMultiSelect( first( uids ), last( uids ) );
+	}
+
+	undoOrRedo( event ) {
+		const { onRedo, onUndo } = this.props;
+		if ( event.shiftKey ) {
+			onRedo();
+		} else {
+			onUndo();
+		}
+
+		event.preventDefault();
+	}
+
+	deleteSelectedBlocks( event ) {
+		const { multiSelectedBlockUids, onRemove } = this.props;
+		if ( multiSelectedBlockUids.length ) {
+			event.preventDefault();
+			onRemove( multiSelectedBlockUids );
+		}
+	}
+
+	render() {
+		return (
+			<KeyboardShortcuts shortcuts={ {
+				'mod+a': this.selectAll,
+				'mod+z': this.undoOrRedo,
+				'mod+shift+z': this.undoOrRedo,
+				backspace: this.deleteSelectedBlocks,
+				del: this.deleteSelectedBlocks,
+				escape: this.props.clearSelectedBlock,
+			} } />
+		);
+	}
+}
+
+export default connect(
+	( state ) => {
+		return {
+			uids: getBlockUids( state ),
+			multiSelectedBlockUids: getMultiSelectedBlockUids( state ),
+		};
+	},
+	{
+		clearSelectedBlock,
+		onMultiSelect: multiSelect,
+		onRedo: redo,
+		onUndo: undo,
+		onRemove: removeBlocks,
+	}
+)( EditorGlobalKeyboardShortcuts );

editor/components/index.js

@@ -1,6 +1,7 @@
 // Post Related Components
 export { default as AutosaveMonitor } from './autosave-monitor';
 export { default as DocumentOutline } from './document-outline';
+export { default as EditorGlobalKeyboardShortcuts } from './editor-global-keyboard-shortcuts';
 export { default as EditorHistoryRedo } from './editor-history/redo';
 export { default as EditorHistoryUndo } from './editor-history/undo';
 export { default as MetaBoxes } from './meta-boxes';

editor/edit-post/modes/visual-editor/index.js

@@ -2,31 +2,26 @@
  * External dependencies
  */
 import { connect } from 'react-redux';
-import { first, last } from 'lodash';
 
 /**
  * WordPress dependencies
  */
 import { Component, findDOMNode } from '@wordpress/element';
-import { KeyboardShortcuts } from '@wordpress/components';
 
 /**
  * Internal dependencies
  */
 import './style.scss';
-import { BlockList, PostTitle, WritingFlow, DefaultBlockAppender } from '../../../components';
-import { getBlockUids, getMultiSelectedBlockUids, isFeatureActive } from '../../../selectors';
-import { clearSelectedBlock, multiSelect, redo, undo, removeBlocks } from '../../../actions';
+import { BlockList, PostTitle, WritingFlow, DefaultBlockAppender, EditorGlobalKeyboardShortcuts } from '../../../components';
+import { isFeatureActive } from '../../../selectors';
+import { clearSelectedBlock } from '../../../actions';
 
 class VisualEditor extends Component {
 	constructor() {
 		super( ...arguments );
 		this.bindContainer = this.bindContainer.bind( this );
 		this.bindBlocksContainer = this.bindBlocksContainer.bind( this );
 		this.onClick = this.onClick.bind( this );
-		this.selectAll = this.selectAll.bind( this );
-		this.undoOrRedo = this.undoOrRedo.bind( this );
-		this.deleteSelectedBlocks = this.deleteSelectedBlocks.bind( this );
 	}
 
 	bindContainer( ref ) {
@@ -47,31 +42,6 @@ class VisualEditor extends Component {
 		}
 	}
 
-	selectAll( event ) {
-		const { uids, onMultiSelect } = this.props;
-		event.preventDefault();
-		onMultiSelect( first( uids ), last( uids ) );
-	}
-
-	undoOrRedo( event ) {
-		const { onRedo, onUndo } = this.props;
-		if ( event.shiftKey ) {
-			onRedo();
-		} else {
-			onUndo();
-		}
-
-		event.preventDefault();
-	}
-
-	deleteSelectedBlocks( event ) {
-		const { multiSelectedBlockUids, onRemove } = this.props;
-		if ( multiSelectedBlockUids.length ) {
-			event.preventDefault();
-			onRemove( multiSelectedBlockUids );
-		}
-	}
-
 	render() {
 		// Disable reason: Clicking the canvas should clear the selection
 		/* eslint-disable jsx-a11y/no-static-element-interactions */
@@ -82,14 +52,7 @@ class VisualEditor extends Component {
 				onTouchStart={ this.onClick }
 				ref={ this.bindContainer }
 			>
-				<KeyboardShortcuts shortcuts={ {
-					'mod+a': this.selectAll,
-					'mod+z': this.undoOrRedo,
-					'mod+shift+z': this.undoOrRedo,
-					backspace: this.deleteSelectedBlocks,
-					del: this.deleteSelectedBlocks,
-					escape: this.props.clearSelectedBlock,
-				} } />
+				<EditorGlobalKeyboardShortcuts />
 				<WritingFlow>
 					<PostTitle />
 					<BlockList
@@ -107,16 +70,10 @@ class VisualEditor extends Component {
 export default connect(
 	( state ) => {
 		return {
-			uids: getBlockUids( state ),
-			multiSelectedBlockUids: getMultiSelectedBlockUids( state ),
 			hasFixedToolbar: isFeatureActive( state, 'fixedToolbar' ),
 		};
 	},
 	{
 		clearSelectedBlock,
-		onMultiSelect: multiSelect,
-		onRedo: redo,
-		onUndo: undo,
-		onRemove: removeBlocks,
 	}
 )( VisualEditor );