Input Interaction: always expand single line selection vertically (#1…

…4487) * Input Interaction: always expand single line selection vertically * Add e2e test
WordPress · Apr 3, 2019 · 3a8af4c · 3a8af4c
1 parent afc5b0f
commit 3a8af4c
Show file tree

Hide file tree

Showing 3 changed files with 30 additions and 14 deletions.
diff --git a/packages/dom/src/dom.js b/packages/dom/src/dom.js
@@ -169,16 +169,6 @@ export function isVerticalEdge( container, isReverse ) {
 	}
 
 	const selection = window.getSelection();
-
-	// Only consider the selection at the edge if the direction is towards the
-	// edge.
-	if (
-		! selection.isCollapsed &&
-		isSelectionForward( selection ) === isReverse
-	) {
-		return false;
-	}
-
 	const range = selection.rangeCount ? selection.getRangeAt( 0 ) : null;
 
 	if ( ! range ) {
@@ -191,14 +181,25 @@ export function isVerticalEdge( container, isReverse ) {
 		return false;
 	}
 
-	const editableRect = container.getBoundingClientRect();
-
 	// Calculate a buffer that is half the line height. In some browsers, the
 	// selection rectangle may not fill the entire height of the line, so we add
 	// half the line height to the selection rectangle to ensure that it is well
 	// over its line boundary.
-	const { lineHeight } = window.getComputedStyle( container );
-	const buffer = parseInt( lineHeight, 10 ) / 2;
+	const computedStyle = window.getComputedStyle( container );
+	const lineHeight = parseInt( computedStyle.lineHeight, 10 );
+
+	// Only consider the multiline selection at the edge if the direction is
+	// towards the edge.
+	if (
+		! selection.isCollapsed &&
+		rangeRect.height > lineHeight &&
+		isSelectionForward( selection ) === isReverse
+	) {
+		return false;
+	}
+
+	const editableRect = container.getBoundingClientRect();
+	const buffer = lineHeight / 2;
 
 	// Too low.
 	if ( isReverse && rangeRect.top - buffer > editableRect.top ) {

diff --git a/packages/e2e-tests/specs/__snapshots__/multi-block-selection.test.js.snap b/packages/e2e-tests/specs/__snapshots__/multi-block-selection.test.js.snap
@@ -6,6 +6,8 @@ exports[`Multi-block selection should allow selecting outer edge if there is no
 <!-- /wp:paragraph -->"
 `;
 
+exports[`Multi-block selection should always expand single line selection 1`] = `""`;
+
 exports[`Multi-block selection should only trigger multi-selection when at the end 1`] = `
 "<!-- wp:paragraph -->
 <p>1.</p>

diff --git a/packages/e2e-tests/specs/multi-block-selection.test.js b/packages/e2e-tests/specs/multi-block-selection.test.js
@@ -181,6 +181,19 @@ describe( 'Multi-block selection', () => {
 		expect( await getEditedPostContent() ).toMatchSnapshot();
 	} );
 
+	it( 'should always expand single line selection', async () => {
+		await clickBlockAppender();
+		await page.keyboard.press( 'Enter' );
+		await page.keyboard.type( '12' );
+		await page.keyboard.press( 'ArrowLeft' );
+		await pressKeyWithModifier( 'shift', 'ArrowRight' );
+		await pressKeyWithModifier( 'shift', 'ArrowUp' );
+		// This delete all blocks.
+		await page.keyboard.press( 'Backspace' );
+
+		expect( await getEditedPostContent() ).toMatchSnapshot();
+	} );
+
 	it( 'should allow selecting outer edge if there is no sibling block', async () => {
 		await clickBlockAppender();
 		await page.keyboard.type( '1' );