Merge pull request #1146 from WordPress/bug/778-abort-link

Add unlink button to escape out of adding link

blocks/editable/format-toolbar.js

@@ -2,6 +2,7 @@
  * WordPress dependencies
  */
 import { IconButton, Toolbar } from 'components';
+import { ESCAPE } from 'utils/keycodes';
 
 const FORMATTING_CONTROLS = [
 	{
@@ -36,6 +37,11 @@ class FormatToolbar extends wp.element.Component {
 		this.dropLink = this.dropLink.bind( this );
 		this.submitLink = this.submitLink.bind( this );
 		this.updateLinkValue = this.updateLinkValue.bind( this );
+		this.onKeyPress = this.onKeyPress.bind( this );
+	}
+
+	componentDidMount() {
+		document.addEventListener( 'keypress', this.onKeyPress );
 	}
 
 	componentWillUnmout() {
@@ -44,6 +50,15 @@ class FormatToolbar extends wp.element.Component {
 		}
 	}
 
+	onKeyPress( event ) {
+		if ( event.keyCode === ESCAPE ) {
+			if ( this.state.isEditingLink ) {
+				event.preventDefault();
+				this.dropLink();
+			}
+		}
+	}
+
 	componentWillReceiveProps( nextProps ) {
 		const newState = {
 			linkValue: nextProps.formats.link ? nextProps.formats.link.value : '',
@@ -143,6 +158,7 @@ class FormatToolbar extends wp.element.Component {
 							placeholder={ wp.i18n.__( 'Paste URL or type' ) }
 						/>
 						<IconButton icon="editor-break" type="submit" />
+						<IconButton icon="editor-unlink" onClick={ this.dropLink } />
 					</form>
 				}