From 0e0183965548bce4575d80ec6be953dedbd57502 Mon Sep 17 00:00:00 2001
From: Marcus Kazmierczak <marcus@mkaz.com>
Date: Mon, 12 Jun 2017 12:47:53 -0700
Subject: [PATCH] Add ability to cancel adding link using Escape

Add a keydown listener on component, which if you hit Escape while you
are editing the link will stop without canceling out of the block. If
you hit escape again, it will cancel the block.
---
 blocks/editable/format-toolbar.js | 19 +++++++++++++++++++
 1 file changed, 19 insertions(+)

diff --git a/blocks/editable/format-toolbar.js b/blocks/editable/format-toolbar.js
index b52be620e7f24f..a718b68e0e185e 100644
--- a/blocks/editable/format-toolbar.js
+++ b/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.onKeyDown = this.onKeyDown.bind( this );
+	}
+
+	componentDidMount() {
+		document.addEventListener( 'keydown', this.onKeyDown );
 	}
 
 	componentWillUnmout() {
@@ -44,6 +50,19 @@ class FormatToolbar extends wp.element.Component {
 		}
 	}
 
+	onKeyDown( keydown ) {
+		switch ( keydown.keyCode ) {
+			case ESCAPE:
+				if ( this.state.isEditingLink ) {
+					keydown.preventDefault();
+					this.dropLink();
+				}
+				break;
+			default :
+				break;
+		}
+	}
+
 	componentWillReceiveProps( nextProps ) {
 		const newState = {
 			linkValue: nextProps.formats.link ? nextProps.formats.link.value : '',