Add keycodes file (#940)

blocks/editable/index.js

@@ -11,6 +11,7 @@ import 'element-closest';
  * WordPress dependencies
  */
 import { Toolbar } from 'components';
+import { BACKSPACE, DELETE } from 'utils/keycodes';
 
 /**
  * Internal dependencies
@@ -19,9 +20,6 @@ import './style.scss';
 import FormatToolbar from './format-toolbar';
 import TinyMCE from './tinymce';
 
-const KEYCODE_BACKSPACE = 8;
-const KEYCODE_DELETE = 46;
-
 const alignmentMap = {
 	alignleft: 'left',
 	alignright: 'right',
@@ -221,11 +219,11 @@ export default class Editable extends wp.element.Component {
 	onKeyDown( event ) {
 		if (
 			this.props.onMerge && (
-				( event.keyCode === KEYCODE_BACKSPACE && this.isStartOfEditor() ) ||
-				( event.keyCode === KEYCODE_DELETE && this.isEndOfEditor() )
+				( event.keyCode === BACKSPACE && this.isStartOfEditor() ) ||
+				( event.keyCode === DELETE && this.isEndOfEditor() )
 			)
 		) {
-			const forward = event.keyCode === KEYCODE_DELETE;
+			const forward = event.keyCode === DELETE;
 			this.onChange();
 			this.props.onMerge( forward );
 			event.preventDefault();
@@ -234,7 +232,7 @@ export default class Editable extends wp.element.Component {
 	}
 
 	onKeyUp( { keyCode } ) {
-		if ( keyCode === KEYCODE_BACKSPACE ) {
+		if ( keyCode === BACKSPACE ) {
 			this.onSelectionChange();
 		}
 	}

editor/inserter/menu.js

@@ -9,6 +9,7 @@ import { connect } from 'react-redux';
  * WordPress dependencies
  */
 import { Dashicon, withFocusReturn } from 'components';
+import { TAB, ESCAPE, LEFT, UP, RIGHT, DOWN } from 'utils/keycodes';
 
 /**
  * Internal dependencies
@@ -177,7 +178,7 @@ class InserterMenu extends wp.element.Component {
 
 	onKeyDown( keydown ) {
 		switch ( keydown.keyCode ) {
-			case 9 : /* Tab */
+			case TAB:
 				if ( keydown.shiftKey ) {
 					// Previous.
 					keydown.preventDefault();
@@ -188,31 +189,31 @@ class InserterMenu extends wp.element.Component {
 				keydown.preventDefault();
 				this.focusNext( this );
 				break;
-			case 27 : /* Escape */
+			case ESCAPE:
 				keydown.preventDefault();
 				this.props.onSelect( null );
 
 				break;
-			case 37 : /* ArrowLeft */
+			case LEFT:
 				if ( this.state.currentFocus === 'search' ) {
 					return;
 				}
 				this.focusPrevious( this );
 
 				break;
-			case 38 : /* ArrowUp */
+			case UP:
 				keydown.preventDefault();
 				this.focusPrevious( this );
 
 				break;
-			case 39 : /* ArrowRight */
+			case RIGHT:
 				if ( this.state.currentFocus === 'search' ) {
 					return;
 				}
 				this.focusNext( this );
 
 				break;
-			case 40 : /* ArrowDown */
+			case DOWN:
 				keydown.preventDefault();
 				this.focusNext( this );
 

editor/modes/visual-editor/block.js

@@ -12,6 +12,7 @@ import CSSTransitionGroup from 'react-transition-group/CSSTransitionGroup';
  */
 import { Children } from 'element';
 import { Toolbar } from 'components';
+import { BACKSPACE, ESCAPE } from 'utils/keycodes';
 
 /**
  * Internal dependencies
@@ -112,7 +113,7 @@ class VisualEditorBlock extends wp.element.Component {
 		} = this.props;
 
 		// Remove block on backspace
-		if ( 8 /* Backspace */ === keyCode ) {
+		if ( BACKSPACE === keyCode ) {
 			if ( target === this.node ) {
 				onRemove( [ uid ] );
 
@@ -127,7 +128,7 @@ class VisualEditorBlock extends wp.element.Component {
 		}
 
 		// Deselect on escape
-		if ( 27 /* Escape */ === keyCode ) {
+		if ( ESCAPE === keyCode ) {
 			onDeselect();
 		}
 	}

editor/post-title/index.js

@@ -4,6 +4,11 @@
 import { connect } from 'react-redux';
 import Textarea from 'react-autosize-textarea';
 
+/**
+ * WordPress dependencies
+ */
+import { ENTER } from 'utils/keycodes';
+
 /**
  * Internal dependencies
  */
@@ -23,7 +28,7 @@ function PostTitle( { title, onUpdate } ) {
 	};
 
 	const onKeyDown = ( event ) => {
-		if ( event.keyCode === 13 ) {
+		if ( event.keyCode === ENTER ) {
 			event.preventDefault();
 		}
 	};

index.php

@@ -189,6 +189,12 @@ function gutenberg_register_scripts() {
 	);
 
 	// Editor Scripts.
+	wp_register_script(
+		'wp-utils',
+		plugins_url( 'utils/build/index.js', __FILE__ ),
+		array(),
+		filemtime( plugin_dir_path( __FILE__ ) . 'utils/build/index.js' )
+	);
 	wp_register_script(
 		'wp-date',
 		plugins_url( 'date/build/index.js', __FILE__ ),
@@ -242,7 +248,7 @@ function gutenberg_register_scripts() {
 	wp_register_script(
 		'wp-blocks',
 		plugins_url( 'blocks/build/index.js', __FILE__ ),
-		array( 'wp-element', 'wp-components', 'tinymce-nightly', 'tinymce-nightly-lists' ),
+		array( 'wp-element', 'wp-components', 'wp-utils', 'tinymce-nightly', 'tinymce-nightly-lists' ),
 		filemtime( plugin_dir_path( __FILE__ ) . 'blocks/build/index.js' )
 	);
 
@@ -485,7 +491,7 @@ function gutenberg_scripts_and_styles( $hook ) {
 	wp_enqueue_script(
 		'wp-editor',
 		plugins_url( 'editor/build/index.js', __FILE__ ),
-		array( 'wp-api', 'wp-date', 'wp-i18n', 'wp-blocks', 'wp-element', 'wp-components' ),
+		array( 'wp-api', 'wp-date', 'wp-i18n', 'wp-blocks', 'wp-element', 'wp-components', 'wp-utils' ),
 		filemtime( plugin_dir_path( __FILE__ ) . 'editor/build/index.js' ),
 		true // enqueue in the footer.
 	);

utils/index.js

@@ -0,0 +1,3 @@
+import * as keycodes from './keycodes';
+
+export { keycodes };

utils/keycodes.js

@@ -0,0 +1,9 @@
+export const BACKSPACE = 8;
+export const TAB = 9;
+export const ENTER = 12;
+export const ESCAPE = 27;
+export const LEFT = 37;
+export const UP = 38;
+export const RIGHT = 39;
+export const DOWN = 40;
+export const DELETE = 46;

webpack.config.js

@@ -8,10 +8,11 @@ const ExtractTextPlugin = require( 'extract-text-webpack-plugin' );
 
 const entryPointNames = [
 	'element',
-	'date',
 	'i18n',
 	'components',
+	'utils',
 	'blocks',
+	'date',
 	'editor',
 ];