Input Interaction: always reset initial vertical position rect (#15624)

WordPress · May 15, 2019 · 4e45835 · 4e45835
1 parent 9ea31a7
commit 4e45835
Show file tree

Hide file tree

Showing 3 changed files with 59 additions and 6 deletions.
diff --git a/packages/block-editor/src/components/writing-flow/index.js b/packages/block-editor/src/components/writing-flow/index.js
@@ -241,6 +241,18 @@ class WritingFlow extends Component {
 		const hasModifier = isShift || event.ctrlKey || event.altKey || event.metaKey;
 		const isNavEdge = isVertical ? isVerticalEdge : isHorizontalEdge;
 
+		// When presing any key other than up or down, the initial vertical
+		// position must ALWAYS be reset. The vertical position is saved so it
+		// can be restored as well as possible on sebsequent vertical arrow key
+		// presses. It may not always be possible to restore the exact same
+		// position (such as at an empty line), so it wouldn't be good to
+		// compute the position right before any vertical arrow key press.
+		if ( ! isVertical ) {
+			this.verticalRect = null;
+		} else if ( ! this.verticalRect ) {
+			this.verticalRect = computeCaretRect();
+		}
+
 		// This logic inside this condition needs to be checked before
 		// the check for event.nativeEvent.defaultPrevented.
 		// The logic handles meta+a keypress and this event is default prevented
@@ -281,12 +293,6 @@ class WritingFlow extends Component {
 			return;
 		}
 
-		if ( ! isVertical ) {
-			this.verticalRect = null;
-		} else if ( ! this.verticalRect ) {
-			this.verticalRect = computeCaretRect( target );
-		}
-
 		// In the case of RTL scripts, right means previous and left means next,
 		// which is the exact reverse of LTR.
 		const { direction } = getComputedStyle( target );

diff --git a/packages/e2e-tests/specs/__snapshots__/writing-flow.test.js.snap b/packages/e2e-tests/specs/__snapshots__/writing-flow.test.js.snap
@@ -197,3 +197,23 @@ exports[`adding blocks should not prematurely multi-select 1`] = `
 <p>></p>
 <!-- /wp:paragraph -->"
 `;
+
+exports[`adding blocks should preserve horizontal position when navigating vertically between blocks 1`] = `
+"<!-- wp:paragraph -->
+<p>abc</p>
+<!-- /wp:paragraph -->
+
+<!-- wp:paragraph -->
+<p>123</p>
+<!-- /wp:paragraph -->"
+`;
+
+exports[`adding blocks should remember initial vertical position 1`] = `
+"<!-- wp:paragraph -->
+<p>1x</p>
+<!-- /wp:paragraph -->
+
+<!-- wp:paragraph -->
+<p><br>2</p>
+<!-- /wp:paragraph -->"
+`;
diff --git a/packages/e2e-tests/specs/writing-flow.test.js b/packages/e2e-tests/specs/writing-flow.test.js
@@ -342,4 +342,31 @@ describe( 'adding blocks', () => {
 
 		expect( await getEditedPostContent() ).toMatchSnapshot();
 	} );
+
+	it( 'should preserve horizontal position when navigating vertically between blocks', async () => {
+		await page.keyboard.press( 'Enter' );
+		await page.keyboard.type( 'abc' );
+		await page.keyboard.press( 'Enter' );
+		await page.keyboard.type( '23' );
+		await page.keyboard.press( 'ArrowUp' );
+		await page.keyboard.press( 'ArrowLeft' );
+		await page.keyboard.press( 'ArrowLeft' );
+		await page.keyboard.press( 'ArrowDown' );
+		await page.keyboard.type( '1' );
+
+		expect( await getEditedPostContent() ).toMatchSnapshot();
+	} );
+
+	it( 'should remember initial vertical position', async () => {
+		await page.keyboard.press( 'Enter' );
+		await page.keyboard.type( '1' );
+		await page.keyboard.press( 'Enter' );
+		await pressKeyWithModifier( 'shift', 'Enter' );
+		await page.keyboard.type( '2' );
+		await page.keyboard.press( 'ArrowUp' );
+		await page.keyboard.press( 'ArrowUp' );
+		await page.keyboard.type( 'x' ); // Should be right after "1".
+
+		expect( await getEditedPostContent() ).toMatchSnapshot();
+	} );
 } );