diff --git a/packages/e2e-tests/specs/__snapshots__/rich-text.test.js.snap b/packages/e2e-tests/specs/__snapshots__/rich-text.test.js.snap index 0cace5805e698..b408c3acfc60d 100644 --- a/packages/e2e-tests/specs/__snapshots__/rich-text.test.js.snap +++ b/packages/e2e-tests/specs/__snapshots__/rich-text.test.js.snap @@ -30,6 +30,12 @@ exports[`RichText should not format text after code backtick 1`] = ` " `; +exports[`RichText should not lose selection direction 1`] = ` +" +

12-3

+" +`; + exports[`RichText should only mutate text data on input 1`] = ` "

1234

diff --git a/packages/e2e-tests/specs/rich-text.test.js b/packages/e2e-tests/specs/rich-text.test.js index e2af127f623e8..5153032953899 100644 --- a/packages/e2e-tests/specs/rich-text.test.js +++ b/packages/e2e-tests/specs/rich-text.test.js @@ -159,4 +159,25 @@ describe( 'RichText', () => { expect( await getEditedPostContent() ).toMatchSnapshot(); } ); + + it( 'should not lose selection direction', async () => { + await clickBlockAppender(); + await pressKeyWithModifier( 'primary', 'b' ); + await page.keyboard.type( '1' ); + await pressKeyWithModifier( 'primary', 'b' ); + await page.keyboard.type( '23' ); + await page.keyboard.press( 'ArrowLeft' ); + await page.keyboard.down( 'Shift' ); + await page.keyboard.press( 'ArrowLeft' ); + await page.keyboard.press( 'ArrowLeft' ); + await page.keyboard.press( 'ArrowRight' ); + await page.keyboard.press( 'ArrowRight' ); + await page.keyboard.up( 'Shift' ); + + // There should be no selection. The following should insert "-" without + // deleting the numbers. + await page.keyboard.type( '-' ); + + expect( await getEditedPostContent() ).toMatchSnapshot(); + } ); } ); diff --git a/packages/editor/src/components/rich-text/index.js b/packages/editor/src/components/rich-text/index.js index ca4a598acb275..58e9acbde686a 100644 --- a/packages/editor/src/components/rich-text/index.js +++ b/packages/editor/src/components/rich-text/index.js @@ -169,13 +169,14 @@ export class RichText extends Component { } ); } - applyRecord( record ) { + applyRecord( record, { domOnly } = {} ) { apply( { value: record, current: this.editableRef, multilineTag: this.multilineTag, multilineWrapperTags: this.multilineWrapperTags, prepareEditableTree: this.props.prepareEditableTree, + __unstableDomOnly: domOnly, } ); } @@ -421,7 +422,7 @@ export class RichText extends Component { } this.setState( { start, end, selectedFormat } ); - this.applyRecord( { ...value, selectedFormat } ); + this.applyRecord( { ...value, selectedFormat }, { domOnly: true } ); delete this.formatPlaceholder; } diff --git a/packages/rich-text/src/to-dom.js b/packages/rich-text/src/to-dom.js index 3d02aab725bd9..222d06ad80074 100644 --- a/packages/rich-text/src/to-dom.js +++ b/packages/rich-text/src/to-dom.js @@ -212,6 +212,7 @@ export function apply( { multilineTag, multilineWrapperTags, prepareEditableTree, + __unstableDomOnly, } ) { // Construct a new element tree in memory. const { body, selection } = toDom( { @@ -223,7 +224,7 @@ export function apply( { applyValue( body, current ); - if ( value.start !== undefined ) { + if ( value.start !== undefined && ! __unstableDomOnly ) { applySelection( selection, current ); } }