From 401d9497cf95ed8e7055e380ccc1a6b6a79f60f8 Mon Sep 17 00:00:00 2001 From: Ella van Durpe Date: Thu, 9 Jan 2020 18:35:57 +0100 Subject: [PATCH 1/8] Return focus to original element --- packages/rich-text/src/to-dom.js | 6 ++---- 1 file changed, 2 insertions(+), 4 deletions(-) diff --git a/packages/rich-text/src/to-dom.js b/packages/rich-text/src/to-dom.js index 730a38587114c4..318d99f472719e 100644 --- a/packages/rich-text/src/to-dom.js +++ b/packages/rich-text/src/to-dom.js @@ -278,10 +278,7 @@ export function applySelection( { startPath, endPath }, current ) { range.setStart( startContainer, startOffset ); range.setEnd( endContainer, endOffset ); - // Set back focus if focus is lost. - if ( ownerDocument.activeElement !== current ) { - current.focus(); - } + const { activeElement } = ownerDocument; if ( selection.rangeCount > 0 ) { // If the to be added range and the live range are the same, there's no @@ -294,4 +291,5 @@ export function applySelection( { startPath, endPath }, current ) { } selection.addRange( range ); + activeElement.focus(); } From 540051f4f264db8ada7d4df51f85011b74a71a75 Mon Sep 17 00:00:00 2001 From: iseulde Date: Thu, 26 Sep 2019 21:30:48 +0300 Subject: [PATCH 2/8] Fix list e2e tests --- packages/e2e-tests/specs/editor/blocks/list.test.js | 2 ++ 1 file changed, 2 insertions(+) diff --git a/packages/e2e-tests/specs/editor/blocks/list.test.js b/packages/e2e-tests/specs/editor/blocks/list.test.js index 54cbe86f2841ad..5b85f72e13b4e6 100644 --- a/packages/e2e-tests/specs/editor/blocks/list.test.js +++ b/packages/e2e-tests/specs/editor/blocks/list.test.js @@ -191,6 +191,7 @@ describe( 'List', () => { await page.keyboard.type( 'one' ); await page.keyboard.press( 'Enter' ); await clickBlockToolbarButton( 'Indent list item' ); + await pressKeyTimes( 'Tab', 6 ); await page.keyboard.type( 'two' ); await transformBlockTo( 'Paragraph' ); @@ -273,6 +274,7 @@ describe( 'List', () => { await page.keyboard.type( 'one' ); await page.keyboard.press( 'Enter' ); await clickBlockToolbarButton( 'Indent list item' ); + await pressKeyTimes( 'Tab', 6 ); await page.keyboard.type( 'two' ); await page.keyboard.press( 'Enter' ); await page.keyboard.type( 'three' ); From d2905e4fe3992d587c06615bdc5d184f1584e869 Mon Sep 17 00:00:00 2001 From: iseulde Date: Fri, 27 Sep 2019 10:57:33 +0300 Subject: [PATCH 3/8] Fix annotation e2e tests --- packages/e2e-tests/specs/editor/plugins/annotations.test.js | 2 ++ 1 file changed, 2 insertions(+) diff --git a/packages/e2e-tests/specs/editor/plugins/annotations.test.js b/packages/e2e-tests/specs/editor/plugins/annotations.test.js index 5bab673a41d806..4425e8c7e8f539 100644 --- a/packages/e2e-tests/specs/editor/plugins/annotations.test.js +++ b/packages/e2e-tests/specs/editor/plugins/annotations.test.js @@ -49,6 +49,7 @@ describe( 'Using Plugins API', () => { // Click add annotation button. const addAnnotationButton = ( await page.$x( "//button[contains(text(), 'Add annotation')]" ) )[ 0 ]; await addAnnotationButton.click(); + await page.evaluate( () => document.querySelector( '[contenteditable]' ).focus() ); } /** @@ -60,6 +61,7 @@ describe( 'Using Plugins API', () => { // Click remove annotations button. const addAnnotationButton = ( await page.$x( "//button[contains(text(), 'Remove annotations')]" ) )[ 0 ]; await addAnnotationButton.click(); + await page.evaluate( () => document.querySelector( '[contenteditable]' ).focus() ); } /** From 8a1b7823e7a93b93229316e79a95d33710654033 Mon Sep 17 00:00:00 2001 From: iseulde Date: Fri, 27 Sep 2019 10:36:09 +0300 Subject: [PATCH 4/8] Fix some rich text e2e tests --- packages/e2e-tests/specs/editor/various/rich-text.test.js | 3 +++ 1 file changed, 3 insertions(+) diff --git a/packages/e2e-tests/specs/editor/various/rich-text.test.js b/packages/e2e-tests/specs/editor/various/rich-text.test.js index 262f5c53cbb79f..2c5383e06a4ffc 100644 --- a/packages/e2e-tests/specs/editor/various/rich-text.test.js +++ b/packages/e2e-tests/specs/editor/various/rich-text.test.js @@ -7,6 +7,7 @@ import { insertBlock, clickBlockAppender, pressKeyWithModifier, + pressKeyTimes, } from '@wordpress/e2e-test-utils'; describe( 'RichText', () => { @@ -83,10 +84,12 @@ describe( 'RichText', () => { await page.mouse.move( 0, 0 ); await page.mouse.move( 10, 10 ); await page.click( '[aria-label="Bold"]' ); + await pressKeyTimes( 'Tab', 5 ); await page.keyboard.type( 'bold' ); await page.mouse.move( 0, 0 ); await page.mouse.move( 10, 10 ); await page.click( '[aria-label="Bold"]' ); + await pressKeyTimes( 'Tab', 5 ); await page.keyboard.type( '.' ); expect( await getEditedPostContent() ).toMatchSnapshot(); From c0871946a88fa58797354fdc90232198e308db45 Mon Sep 17 00:00:00 2001 From: iseulde Date: Fri, 27 Sep 2019 10:45:50 +0300 Subject: [PATCH 5/8] Fix tests --- .../specs/editor/blocks/list.test.js | 4 +-- .../specs/editor/various/rich-text.test.js | 4 +-- packages/rich-text/src/component/index.js | 36 ++++++++++++------- 3 files changed, 27 insertions(+), 17 deletions(-) diff --git a/packages/e2e-tests/specs/editor/blocks/list.test.js b/packages/e2e-tests/specs/editor/blocks/list.test.js index 5b85f72e13b4e6..695aaa14aa9ecb 100644 --- a/packages/e2e-tests/specs/editor/blocks/list.test.js +++ b/packages/e2e-tests/specs/editor/blocks/list.test.js @@ -191,7 +191,7 @@ describe( 'List', () => { await page.keyboard.type( 'one' ); await page.keyboard.press( 'Enter' ); await clickBlockToolbarButton( 'Indent list item' ); - await pressKeyTimes( 'Tab', 6 ); + await pressKeyTimes( 'Tab', 8 ); await page.keyboard.type( 'two' ); await transformBlockTo( 'Paragraph' ); @@ -274,7 +274,7 @@ describe( 'List', () => { await page.keyboard.type( 'one' ); await page.keyboard.press( 'Enter' ); await clickBlockToolbarButton( 'Indent list item' ); - await pressKeyTimes( 'Tab', 6 ); + await pressKeyTimes( 'Tab', 8 ); await page.keyboard.type( 'two' ); await page.keyboard.press( 'Enter' ); await page.keyboard.type( 'three' ); diff --git a/packages/e2e-tests/specs/editor/various/rich-text.test.js b/packages/e2e-tests/specs/editor/various/rich-text.test.js index 2c5383e06a4ffc..92c7ddc6e55006 100644 --- a/packages/e2e-tests/specs/editor/various/rich-text.test.js +++ b/packages/e2e-tests/specs/editor/various/rich-text.test.js @@ -84,12 +84,12 @@ describe( 'RichText', () => { await page.mouse.move( 0, 0 ); await page.mouse.move( 10, 10 ); await page.click( '[aria-label="Bold"]' ); - await pressKeyTimes( 'Tab', 5 ); + await pressKeyTimes( 'Tab', 7 ); await page.keyboard.type( 'bold' ); await page.mouse.move( 0, 0 ); await page.mouse.move( 10, 10 ); await page.click( '[aria-label="Bold"]' ); - await pressKeyTimes( 'Tab', 5 ); + await pressKeyTimes( 'Tab', 7 ); await page.keyboard.type( '.' ); expect( await getEditedPostContent() ).toMatchSnapshot(); diff --git a/packages/rich-text/src/component/index.js b/packages/rich-text/src/component/index.js index a94c95c247e3d7..e219a6447efc30 100644 --- a/packages/rich-text/src/component/index.js +++ b/packages/rich-text/src/component/index.js @@ -358,19 +358,29 @@ class RichText extends Component { unstableOnFocus(); } - // We know for certain that on focus, the old selection is invalid. It - // will be recalculated on the next mouseup, keyup, or touchend event. - const index = undefined; - const activeFormats = EMPTY_ACTIVE_FORMATS; - - this.record = { - ...this.record, - start: index, - end: index, - activeFormats, - }; - this.props.onSelectionChange( index, index ); - this.setState( { activeFormats } ); + if ( ! this.props.__unstableIsSelected ) { + // We know for certain that on focus, the old selection is invalid. It + // will be recalculated on the next mouseup, keyup, or touchend event. + const index = undefined; + const activeFormats = EMPTY_ACTIVE_FORMATS; + + this.record = { + ...this.record, + start: index, + end: index, + activeFormats, + }; + this.props.onSelectionChange( index, index ); + this.setState( { activeFormats } ); + } else { + this.props.onSelectionChange( this.record.start, this.record.end ); + this.setState( { + activeFormats: getActiveFormats( { + ...this.record, + activeFormats: undefined, + }, EMPTY_ACTIVE_FORMATS ), + } ); + } // Update selection as soon as possible, which is at the next animation // frame. The event listener for selection changes may be added too late From da86012d732337143c4328002d0bfa778e0614df Mon Sep 17 00:00:00 2001 From: Ella van Durpe Date: Thu, 9 Jan 2020 22:18:17 +0100 Subject: [PATCH 6/8] Focus after link --- packages/format-library/src/link/index.js | 3 ++- packages/format-library/src/link/inline.js | 4 +++- packages/rich-text/src/component/format-edit.js | 2 ++ packages/rich-text/src/component/index.js | 6 ++++++ 4 files changed, 13 insertions(+), 2 deletions(-) diff --git a/packages/format-library/src/link/index.js b/packages/format-library/src/link/index.js index 7455c75b558094..10dfd1863e972c 100644 --- a/packages/format-library/src/link/index.js +++ b/packages/format-library/src/link/index.js @@ -91,7 +91,7 @@ export const link = { } render() { - const { isActive, activeAttributes, value, onChange } = this.props; + const { isActive, activeAttributes, value, onChange, onFocus } = this.props; return ( <> @@ -131,6 +131,7 @@ export const link = { activeAttributes={ activeAttributes } value={ value } onChange={ onChange } + onFocus={ onFocus } /> ); diff --git a/packages/format-library/src/link/inline.js b/packages/format-library/src/link/inline.js index 34c05ad432c0cf..568ca1850ae0db 100644 --- a/packages/format-library/src/link/inline.js +++ b/packages/format-library/src/link/inline.js @@ -135,7 +135,7 @@ class InlineLinkUI extends Component { } submitLink( event ) { - const { isActive, value, onChange, speak } = this.props; + const { isActive, value, onChange, onFocus, speak } = this.props; const { inputValue, opensInNewWindow } = this.state; const url = prependHTTP( inputValue ); const selectedText = getTextContent( slice( value ) ); @@ -154,6 +154,8 @@ class InlineLinkUI extends Component { onChange( applyFormat( value, format ) ); } + onFocus(); + this.resetState(); if ( ! isValidHref( url ) ) { diff --git a/packages/rich-text/src/component/format-edit.js b/packages/rich-text/src/component/format-edit.js index 930cb52995b811..13aa91606ecc45 100644 --- a/packages/rich-text/src/component/format-edit.js +++ b/packages/rich-text/src/component/format-edit.js @@ -26,6 +26,7 @@ const interactiveContentTags = new Set( [ export default function FormatEdit( { formatTypes, onChange, + onFocus, value, allowedFormats, withoutInteractiveFormatting, @@ -68,6 +69,7 @@ export default function FormatEdit( { } value={ value } onChange={ onChange } + onFocus={ onFocus } /> ); } ); diff --git a/packages/rich-text/src/component/index.js b/packages/rich-text/src/component/index.js index e219a6447efc30..827d0a960d6221 100644 --- a/packages/rich-text/src/component/index.js +++ b/packages/rich-text/src/component/index.js @@ -1077,6 +1077,11 @@ class RichText extends Component { } = this.props; const { activeFormats } = this.state; + const onFocus = () => { + forwardedRef.current.focus(); + this.applyRecord( this.record ); + }; + return ( <> } { children && children( { From daa575e3423b2dde0969d635c918e93f5074c3d2 Mon Sep 17 00:00:00 2001 From: Ella van Durpe Date: Thu, 9 Jan 2020 22:39:47 +0100 Subject: [PATCH 7/8] Add onFocus --- packages/block-library/src/list/edit.js | 6 +++++- packages/e2e-tests/specs/editor/blocks/list.test.js | 2 -- .../specs/editor/various/rich-text.test.js | 3 --- packages/format-library/src/bold/index.js | 8 ++++++-- packages/format-library/src/code/index.js | 9 ++++++--- packages/format-library/src/italic/index.js | 13 ++++++++++--- packages/format-library/src/strikethrough/index.js | 9 ++++++--- packages/rich-text/src/component/index.js | 1 + 8 files changed, 34 insertions(+), 17 deletions(-) diff --git a/packages/block-library/src/list/edit.js b/packages/block-library/src/list/edit.js index 8b1694e011b2cf..02a029c5a7892e 100644 --- a/packages/block-library/src/list/edit.js +++ b/packages/block-library/src/list/edit.js @@ -38,7 +38,7 @@ export default function ListEdit( { const { ordered, values, type, reversed, start } = attributes; const tagName = ordered ? 'ol' : 'ul'; - const controls = ( { value, onChange } ) => ( + const controls = ( { value, onChange, onFocus } ) => ( <> { ( isSelected && <> { await page.keyboard.type( 'one' ); await page.keyboard.press( 'Enter' ); await clickBlockToolbarButton( 'Indent list item' ); - await pressKeyTimes( 'Tab', 8 ); await page.keyboard.type( 'two' ); await transformBlockTo( 'Paragraph' ); @@ -274,7 +273,6 @@ describe( 'List', () => { await page.keyboard.type( 'one' ); await page.keyboard.press( 'Enter' ); await clickBlockToolbarButton( 'Indent list item' ); - await pressKeyTimes( 'Tab', 8 ); await page.keyboard.type( 'two' ); await page.keyboard.press( 'Enter' ); await page.keyboard.type( 'three' ); diff --git a/packages/e2e-tests/specs/editor/various/rich-text.test.js b/packages/e2e-tests/specs/editor/various/rich-text.test.js index 92c7ddc6e55006..262f5c53cbb79f 100644 --- a/packages/e2e-tests/specs/editor/various/rich-text.test.js +++ b/packages/e2e-tests/specs/editor/various/rich-text.test.js @@ -7,7 +7,6 @@ import { insertBlock, clickBlockAppender, pressKeyWithModifier, - pressKeyTimes, } from '@wordpress/e2e-test-utils'; describe( 'RichText', () => { @@ -84,12 +83,10 @@ describe( 'RichText', () => { await page.mouse.move( 0, 0 ); await page.mouse.move( 10, 10 ); await page.click( '[aria-label="Bold"]' ); - await pressKeyTimes( 'Tab', 7 ); await page.keyboard.type( 'bold' ); await page.mouse.move( 0, 0 ); await page.mouse.move( 10, 10 ); await page.click( '[aria-label="Bold"]' ); - await pressKeyTimes( 'Tab', 7 ); await page.keyboard.type( '.' ); expect( await getEditedPostContent() ).toMatchSnapshot(); diff --git a/packages/format-library/src/bold/index.js b/packages/format-library/src/bold/index.js index a97cb170cca2c2..62254ab7aa6264 100644 --- a/packages/format-library/src/bold/index.js +++ b/packages/format-library/src/bold/index.js @@ -13,8 +13,12 @@ export const bold = { title, tagName: 'strong', className: null, - edit( { isActive, value, onChange } ) { + edit( { isActive, value, onChange, onFocus } ) { const onToggle = () => onChange( toggleFormat( value, { type: name } ) ); + const onClick = () => { + onToggle(); + onFocus(); + }; return ( <> @@ -27,7 +31,7 @@ export const bold = { name="bold" icon="editor-bold" title={ title } - onClick={ onToggle } + onClick={ onClick } isActive={ isActive } shortcutType="primary" shortcutCharacter="b" diff --git a/packages/format-library/src/code/index.js b/packages/format-library/src/code/index.js index 4d7f7522008396..9d4266af6679d4 100644 --- a/packages/format-library/src/code/index.js +++ b/packages/format-library/src/code/index.js @@ -43,14 +43,17 @@ export const code = { return value; }, - edit( { value, onChange, isActive } ) { - const onToggle = () => onChange( toggleFormat( value, { type: name } ) ); + edit( { value, onChange, onFocus, isActive } ) { + function onClick() { + onChange( toggleFormat( value, { type: name } ) ); + onFocus(); + } return ( ); diff --git a/packages/format-library/src/italic/index.js b/packages/format-library/src/italic/index.js index 25c586a58dbc5a..5d66a7d38520de 100644 --- a/packages/format-library/src/italic/index.js +++ b/packages/format-library/src/italic/index.js @@ -13,8 +13,15 @@ export const italic = { title, tagName: 'em', className: null, - edit( { isActive, value, onChange } ) { - const onToggle = () => onChange( toggleFormat( value, { type: name } ) ); + edit( { isActive, value, onChange, onFocus } ) { + function onToggle() { + onChange( toggleFormat( value, { type: name } ) ); + } + + function onClick() { + onToggle(); + onFocus(); + } return ( <> @@ -27,7 +34,7 @@ export const italic = { name="italic" icon="editor-italic" title={ title } - onClick={ onToggle } + onClick={ onClick } isActive={ isActive } shortcutType="primary" shortcutCharacter="i" diff --git a/packages/format-library/src/strikethrough/index.js b/packages/format-library/src/strikethrough/index.js index 23c17f1fea4a8d..6d2585331e3f11 100644 --- a/packages/format-library/src/strikethrough/index.js +++ b/packages/format-library/src/strikethrough/index.js @@ -13,14 +13,17 @@ export const strikethrough = { title, tagName: 's', className: null, - edit( { isActive, value, onChange } ) { - const onToggle = () => onChange( toggleFormat( value, { type: name } ) ); + edit( { isActive, value, onChange, onFocus } ) { + function onClick() { + onChange( toggleFormat( value, { type: name } ) ); + onFocus(); + } return ( ); diff --git a/packages/rich-text/src/component/index.js b/packages/rich-text/src/component/index.js index 827d0a960d6221..82f3f2ae328655 100644 --- a/packages/rich-text/src/component/index.js +++ b/packages/rich-text/src/component/index.js @@ -1100,6 +1100,7 @@ class RichText extends Component { isSelected, value: this.record, onChange: this.onChange, + onFocus, Editable: this.Editable, } ) } { ! children && } From e7eeda33f43d891cb34da5b8cfc139410d8998cb Mon Sep 17 00:00:00 2001 From: Ella van Durpe Date: Thu, 9 Jan 2020 22:45:34 +0100 Subject: [PATCH 8/8] Corrections --- packages/block-editor/src/components/rich-text/index.js | 4 ++-- packages/format-library/src/bold/index.js | 9 ++++++--- packages/format-library/src/image/index.js | 3 ++- 3 files changed, 10 insertions(+), 6 deletions(-) diff --git a/packages/block-editor/src/components/rich-text/index.js b/packages/block-editor/src/components/rich-text/index.js index f8febb38db130d..2c2f61611ae870 100644 --- a/packages/block-editor/src/components/rich-text/index.js +++ b/packages/block-editor/src/components/rich-text/index.js @@ -411,9 +411,9 @@ class RichTextWrapper extends Component { start={ start } reversed={ reversed } > - { ( { isSelected, value, onChange, Editable } ) => + { ( { isSelected, value, onChange, onFocus, Editable } ) => <> - { children && children( { value, onChange } ) } + { children && children( { value, onChange, onFocus } ) } { isSelected && hasFormats && ( ) } { isSelected && } onChange( toggleFormat( value, { type: name } ) ); - const onClick = () => { + function onToggle() { + onChange( toggleFormat( value, { type: name } ) ); + } + + function onClick() { onToggle(); onFocus(); - }; + } return ( <> diff --git a/packages/format-library/src/image/index.js b/packages/format-library/src/image/index.js index 5280f3294d379f..10128a2417aaf9 100644 --- a/packages/format-library/src/image/index.js +++ b/packages/format-library/src/image/index.js @@ -85,7 +85,7 @@ export const image = { } render() { - const { value, onChange, isObjectActive, activeObjectAttributes } = this.props; + const { value, onChange, onFocus, isObjectActive, activeObjectAttributes } = this.props; return ( @@ -108,6 +108,7 @@ export const image = { alt, }, } ) ); + onFocus(); } } onClose={ this.closeModal } render={ ( { open } ) => {