Input Interaction: restore collapsing selection before edge calc (#14906

) * Input Interaction: restore collapsing selection before edge calc * Add e2e test * Fix other e2e test * Clean up * Do not modify live range in getRectangleFromRange
WordPress · Apr 17, 2019 · 72f3ebc · 72f3ebc
1 parent c54f73f
commit 72f3ebc
Show file tree

Hide file tree

Showing 4 changed files with 39 additions and 4 deletions.
diff --git a/packages/dom/src/dom.js b/packages/dom/src/dom.js
@@ -93,7 +93,16 @@ function isEdge( container, isReverse, onlyVertical ) {
 		return false;
 	}
 
-	const rangeRect = getRectangleFromRange( selection.getRangeAt( 0 ) );
+	const range = selection.getRangeAt( 0 ).cloneRange();
+	const isForward = isSelectionForward( selection );
+	const isCollapsed = selection.isCollapsed;
+
+	// Collapse in direction of selection.
+	if ( ! isCollapsed ) {
+		range.collapse( ! isForward );
+	}
+
+	const rangeRect = getRectangleFromRange( range );
 
 	if ( ! rangeRect ) {
 		return false;
@@ -105,9 +114,9 @@ function isEdge( container, isReverse, onlyVertical ) {
 	// Only consider the multiline selection at the edge if the direction is
 	// towards the edge.
 	if (
-		! selection.isCollapsed &&
+		! isCollapsed &&
 		rangeRect.height > lineHeight &&
-		isSelectionForward( selection ) === isReverse
+		isForward === isReverse
 	) {
 		return false;
 	}
@@ -213,6 +222,8 @@ export function getRectangleFromRange( range ) {
 	// See: https://stackoverflow.com/a/6847328/995445
 	if ( ! rect ) {
 		const padNode = document.createTextNode( '\u200b' );
+		// Do not modify the live range.
+		range = range.cloneRange();
 		range.insertNode( padNode );
 		rect = range.getClientRects()[ 0 ];
 		padNode.parentNode.removeChild( padNode );

diff --git a/packages/e2e-tests/specs/__snapshots__/writing-flow.test.js.snap b/packages/e2e-tests/specs/__snapshots__/writing-flow.test.js.snap
@@ -187,3 +187,13 @@ exports[`adding blocks should not delete surrounding space when deleting a word
 <p>1 2 3</p>
 <!-- /wp:paragraph -->"
 `;
+
+exports[`adding blocks should not prematurely multi-select 1`] = `
+"<!-- wp:paragraph -->
+<p>1</p>
+<!-- /wp:paragraph -->
+
+<!-- wp:paragraph -->
+<p>></p>
+<!-- /wp:paragraph -->"
+`;
diff --git a/packages/e2e-tests/specs/adding-blocks.test.js b/packages/e2e-tests/specs/adding-blocks.test.js
@@ -66,7 +66,6 @@ describe( 'adding blocks', () => {
 		await page.keyboard.type( 'Foo' );
 		await page.keyboard.press( 'ArrowUp' );
 		await page.keyboard.press( 'ArrowUp' );
-		await pressKeyTimes( 'ArrowRight', 3 );
 		await pressKeyTimes( 'Delete', 6 );
 		await page.keyboard.type( ' text' );
 

diff --git a/packages/e2e-tests/specs/writing-flow.test.js b/packages/e2e-tests/specs/writing-flow.test.js
@@ -327,4 +327,19 @@ describe( 'adding blocks', () => {
 
 		expect( await getEditedPostContent() ).toMatchSnapshot();
 	} );
+
+	it( 'should not prematurely multi-select', async () => {
+		await clickBlockAppender();
+		await page.keyboard.type( '1' );
+		await page.keyboard.press( 'Enter' );
+		await page.keyboard.type( '><<' );
+		await pressKeyWithModifier( 'shift', 'Enter' );
+		await page.keyboard.type( '<<<' );
+		await page.keyboard.down( 'Shift' );
+		await pressKeyTimes( 'ArrowLeft', '<<\n<<<'.length );
+		await page.keyboard.up( 'Shift' );
+		await page.keyboard.press( 'Backspace' );
+
+		expect( await getEditedPostContent() ).toMatchSnapshot();
+	} );
 } );