Writing flow: fix caret movement for multiple lines

packages/dom/README.md

@@ -130,7 +130,7 @@ _Parameters_
 
 _Returns_
 
--   `DOMRect`: The rectangle.
+-   `DOMRect?`: The rectangle.
 
 ### getScrollContainer
 

packages/dom/src/dom/get-rectangle-from-range.js

@@ -8,7 +8,7 @@ import { assertIsDefined } from '../utils/assert-is-defined';
  *
  * @param {Range} range The range.
  *
- * @return {DOMRect} The rectangle.
+ * @return {DOMRect?} The rectangle.
  */
 export default function getRectangleFromRange( range ) {
 	// For uncollapsed ranges, get the rectangle that bounds the contents of the
@@ -73,7 +73,15 @@ export default function getRectangleFromRange( range ) {
 		range.setEnd( parentNode, index );
 	}
 
-	let rect = range.getClientRects()[ 0 ];
+	const rects = range.getClientRects();
+
+	// If we have multiple rectangles for a collapsed range, there's no way to
+	// know which it is, so don't return anything.
+	if ( rects.length > 1 ) {
+		return null;
+	}
+
+	let rect = rects[ 0 ];
 
 	// If the collapsed range starts (and therefore ends) at an element node,
 	// `getClientRects` can be empty in some browsers. This can be resolved

packages/e2e-tests/specs/editor/various/__snapshots__/writing-flow.test.js.snap

@@ -122,6 +122,12 @@ exports[`Writing Flow should merge paragraphs 1`] = `
 <!-- /wp:paragraph -->"
 `;
 
+exports[`Writing Flow should move to the start of the first line on ArrowUp 1`] = `
+"<!-- wp:paragraph -->
+<p>.aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</p>
+<!-- /wp:paragraph -->"
+`;
+
 exports[`Writing Flow should navigate around inline boundaries 1`] = `
 "<!-- wp:paragraph -->
 <p>FirstAfter</p>

packages/e2e-tests/specs/editor/various/writing-flow.test.js

@@ -753,4 +753,32 @@ describe( 'Writing Flow', () => {
 		);
 		expect( paragraphs ).toEqual( [ 'first', 'second' ] );
 	} );
+
+	it( 'should move to the start of the first line on ArrowUp', async () => {
+		await page.keyboard.press( 'Enter' );
+		await page.keyboard.type( 'a' );
+
+		async function getHeight() {
+			return await page.evaluate(
+				() => document.activeElement.offsetHeight
+			);
+		}
+
+		const height = await getHeight();
+
+		// Keep typing until the height of the element increases. We need two
+		// lines.
+		while ( height === ( await getHeight() ) ) {
+			await page.keyboard.type( 'a' );
+		}
+
+		// Move to the start of the second line.
+		await page.keyboard.press( 'ArrowLeft' );
+		// Move to the start of the first line.
+		await page.keyboard.press( 'ArrowUp' );
+		// Insert a "." for testing.
+		await page.keyboard.type( '.' );
+		// Expect the "." to be at the start of the paragraph.
+		expect( await getEditedPostContent() ).toMatchSnapshot();
+	} );
 } );