From 18f0a0602f567cba0e1e2cdbaba1efdcba32f495 Mon Sep 17 00:00:00 2001 From: Marcus Kazmierczak Date: Mon, 12 Jun 2017 12:23:26 -0700 Subject: [PATCH 1/5] Add unlink button to escape out of adding link --- blocks/editable/format-toolbar.js | 1 + 1 file changed, 1 insertion(+) diff --git a/blocks/editable/format-toolbar.js b/blocks/editable/format-toolbar.js index 265067163818d3..b52be620e7f24f 100644 --- a/blocks/editable/format-toolbar.js +++ b/blocks/editable/format-toolbar.js @@ -143,6 +143,7 @@ class FormatToolbar extends wp.element.Component { placeholder={ wp.i18n.__( 'Paste URL or type' ) } /> + } From fd737a811a9effcf56197338b3a123660a8fa4e7 Mon Sep 17 00:00:00 2001 From: Marcus Kazmierczak Date: Mon, 12 Jun 2017 12:47:53 -0700 Subject: [PATCH 2/5] 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 : '', From 67916011208b2f5cb3a3243c4a1bba26685afa8d Mon Sep 17 00:00:00 2001 From: Marcus Kazmierczak Date: Fri, 16 Jun 2017 07:08:37 -0700 Subject: [PATCH 3/5] Rename keydown to event for event handling variable consistency --- blocks/editable/format-toolbar.js | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/blocks/editable/format-toolbar.js b/blocks/editable/format-toolbar.js index a718b68e0e185e..6ba3299a43643e 100644 --- a/blocks/editable/format-toolbar.js +++ b/blocks/editable/format-toolbar.js @@ -50,11 +50,11 @@ class FormatToolbar extends wp.element.Component { } } - onKeyDown( keydown ) { - switch ( keydown.keyCode ) { + onKeyDown( event ) { + switch ( event.keyCode ) { case ESCAPE: if ( this.state.isEditingLink ) { - keydown.preventDefault(); + event.preventDefault(); this.dropLink(); } break; From 6bb412b5cf6350699a3bbd0b4e3e3673517ec891 Mon Sep 17 00:00:00 2001 From: Marcus Kazmierczak Date: Fri, 16 Jun 2017 07:10:04 -0700 Subject: [PATCH 4/5] Switch to keypress event, not keydown --- blocks/editable/format-toolbar.js | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/blocks/editable/format-toolbar.js b/blocks/editable/format-toolbar.js index 6ba3299a43643e..7f14b5d8c5aec7 100644 --- a/blocks/editable/format-toolbar.js +++ b/blocks/editable/format-toolbar.js @@ -37,11 +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 ); + this.onKeyPress = this.onKeyPress.bind( this ); } componentDidMount() { - document.addEventListener( 'keydown', this.onKeyDown ); + document.addEventListener( 'keypress', this.onKeyPress ); } componentWillUnmout() { @@ -50,7 +50,7 @@ class FormatToolbar extends wp.element.Component { } } - onKeyDown( event ) { + onKeyPress( event ) { switch ( event.keyCode ) { case ESCAPE: if ( this.state.isEditingLink ) { From 1882f0584634ba571202aa1471a87c3e57debd7c Mon Sep 17 00:00:00 2001 From: Marcus Kazmierczak Date: Fri, 16 Jun 2017 07:11:19 -0700 Subject: [PATCH 5/5] Change to simple if instead of switch --- blocks/editable/format-toolbar.js | 14 +++++--------- 1 file changed, 5 insertions(+), 9 deletions(-) diff --git a/blocks/editable/format-toolbar.js b/blocks/editable/format-toolbar.js index 7f14b5d8c5aec7..f5290e524a3ec5 100644 --- a/blocks/editable/format-toolbar.js +++ b/blocks/editable/format-toolbar.js @@ -51,15 +51,11 @@ class FormatToolbar extends wp.element.Component { } onKeyPress( event ) { - switch ( event.keyCode ) { - case ESCAPE: - if ( this.state.isEditingLink ) { - event.preventDefault(); - this.dropLink(); - } - break; - default : - break; + if ( event.keyCode === ESCAPE ) { + if ( this.state.isEditingLink ) { + event.preventDefault(); + this.dropLink(); + } } }