RichText: don't set selection during selectionchange (#13896)

* RichText: don't set selection during selectionchange * Add e2e test
WordPress · Feb 15, 2019 · 2ce6115 · 2ce6115
1 parent b58fed3
commit 2ce6115
Show file tree

Hide file tree

Showing 4 changed files with 32 additions and 3 deletions.
diff --git 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`] = `
 <!-- /wp:paragraph -->"
 `;
 
+exports[`RichText should not lose selection direction 1`] = `
+"<!-- wp:paragraph -->
+<p><strong>1</strong>2-3</p>
+<!-- /wp:paragraph -->"
+`;
+
 exports[`RichText should only mutate text data on input 1`] = `
 "<!-- wp:paragraph -->
 <p>1<strong>2</strong>34</p>

diff --git 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
@@ -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
@@ -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 );
 	}
 }