From f2525adba1fad096b4f4c069a4f55f9e31f4f364 Mon Sep 17 00:00:00 2001 From: James Johnson Date: Fri, 27 Oct 2017 09:58:10 +1000 Subject: [PATCH 1/4] This fixes the end of the textarea that is selected by arrow key nav --- editor/utils/dom.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/editor/utils/dom.js b/editor/utils/dom.js index 2dc6719c95dab..39a7eba583fb1 100644 --- a/editor/utils/dom.js +++ b/editor/utils/dom.js @@ -150,7 +150,7 @@ export function placeCaretAtHorizontalEdge( container, isReverse ) { if ( includes( [ 'INPUT', 'TEXTAREA' ], container.tagName ) ) { container.focus(); - if ( isReverse ) { + if ( ! isReverse ) { container.selectionStart = 0; container.selectionEnd = 0; } else { From 3dc7f1e333a3e9ad0b67342f511d42229754f668 Mon Sep 17 00:00:00 2001 From: James Johnson Date: Fri, 27 Oct 2017 11:27:35 +1000 Subject: [PATCH 2/4] Fixed the tests which were treating "isReverse" to mean the same thing in two different contexts Esentially when placing the caret into a new section while moving through the document in reverse we expect to put it at the end of the section. However when detecting if we are at the edge of the section going in reverse we expect the caret to be at the start of the section. The test was erronously expecting the two to be the same thing because they both used the flag "isReverse". --- editor/utils/test/dom.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/editor/utils/test/dom.js b/editor/utils/test/dom.js index dabba4b5513e6..9ddd979e0d4d2 100644 --- a/editor/utils/test/dom.js +++ b/editor/utils/test/dom.js @@ -81,14 +81,14 @@ describe( 'DOM', () => { const input = document.createElement( 'input' ); input.value = 'value'; placeCaretAtHorizontalEdge( input, true ); - expect( isHorizontalEdge( input, true ) ).toBe( true ); + expect( isHorizontalEdge( input, false ) ).toBe( true ); } ); it( 'should place caret at the end of the input', () => { const input = document.createElement( 'input' ); input.value = 'value'; placeCaretAtHorizontalEdge( input, false ); - expect( isHorizontalEdge( input, false ) ).toBe( true ); + expect( isHorizontalEdge( input, true ) ).toBe( true ); } ); } ); } ); From fd5a4ab446fd0c687068f67252ec41f2fe8fe49d Mon Sep 17 00:00:00 2001 From: James Johnson Date: Mon, 30 Oct 2017 10:02:10 +1000 Subject: [PATCH 3/4] fix/arrow-key-into-textarea: Reversed the if-stmt instead of negating the test --- editor/utils/dom.js | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/editor/utils/dom.js b/editor/utils/dom.js index 39a7eba583fb1..0468952df9e19 100644 --- a/editor/utils/dom.js +++ b/editor/utils/dom.js @@ -150,12 +150,12 @@ export function placeCaretAtHorizontalEdge( container, isReverse ) { if ( includes( [ 'INPUT', 'TEXTAREA' ], container.tagName ) ) { container.focus(); - if ( ! isReverse ) { - container.selectionStart = 0; - container.selectionEnd = 0; - } else { + if ( isReverse ) { container.selectionStart = container.value.length; container.selectionEnd = container.value.length; + } else { + container.selectionStart = 0; + container.selectionEnd = 0; } return; } From 39c17b6156e03be877f7f07ea8eed8ecf1ef9906 Mon Sep 17 00:00:00 2001 From: James Johnson Date: Mon, 30 Oct 2017 10:26:00 +1000 Subject: [PATCH 4/4] Fixed linter issue. --- blocks/editable/tinymce.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/blocks/editable/tinymce.js b/blocks/editable/tinymce.js index 424c14c630e66..26e762cd72ecb 100644 --- a/blocks/editable/tinymce.js +++ b/blocks/editable/tinymce.js @@ -47,9 +47,9 @@ export default class TinyMCE extends Component { const { removedKeys, updatedKeys } = diffAriaProps( this.props, nextProps ); removedKeys.forEach( ( key ) => - this.editorNode.removeAttribute( key ) ); + this.editorNode.removeAttribute( key ) ); updatedKeys.forEach( ( key ) => - this.editorNode.setAttribute( key, nextProps[ key ] ) ); + this.editorNode.setAttribute( key, nextProps[ key ] ) ); } componentWillUnmount() {