Writing Flow: fix empty horizontal arrow nav (#16846)

* Writing Flow: fix horizontal arrow nav * Add e2e test * Add inline comment
WordPress · Aug 9, 2019 · c7faf14 · c7faf14
1 parent 4af9221
commit c7faf14
Show file tree

Hide file tree

Showing 4 changed files with 41 additions and 2 deletions.
diff --git a/packages/dom/src/dom.js b/packages/dom/src/dom.js
@@ -163,7 +163,8 @@ function isEdge( container, isReverse, onlyVertical ) {
 	const side = isReverseDir ? 'left' : 'right';
 	const testRect = getRectangleFromRange( testRange );
 
-	return Math.round( testRect[ side ] ) === Math.round( rangeRect[ side ] );
+	// Allow the position to be 1px off.
+	return Math.abs( testRect[ side ] - rangeRect[ side ] ) <= 1;
 }
 
 /**
@@ -352,11 +353,17 @@ function caretRangeFromPoint( doc, x, y ) {
  * @return {?Range} The best range for the given point.
  */
 function hiddenCaretRangeFromPoint( doc, x, y, container ) {
+	const originalZIndex = container.style.zIndex;
+	const originalPosition = container.style.position;
+
+	// A z-index only works if the element position is not static.
 	container.style.zIndex = '10000';
+	container.style.position = 'relative';
 
 	const range = caretRangeFromPoint( doc, x, y );
 
-	container.style.zIndex = null;
+	container.style.zIndex = originalZIndex;
+	container.style.position = originalPosition;
 
 	return range;
 }

diff --git a/packages/e2e-tests/specs/__snapshots__/writing-flow.test.js.snap b/packages/e2e-tests/specs/__snapshots__/writing-flow.test.js.snap
@@ -166,6 +166,20 @@ exports[`Writing Flow should navigate empty paragraph 1`] = `
 <!-- /wp:paragraph -->"
 `;
 
+exports[`Writing Flow should navigate empty paragraphs 1`] = `
+"<!-- wp:paragraph -->
+<p>1</p>
+<!-- /wp:paragraph -->
+
+<!-- wp:paragraph -->
+<p></p>
+<!-- /wp:paragraph -->
+
+<!-- wp:paragraph -->
+<p>3</p>
+<!-- /wp:paragraph -->"
+`;
+
 exports[`Writing Flow should not create extra line breaks in multiline value 1`] = `
 "<!-- wp:quote -->
 <blockquote class=\\"wp-block-quote\\"><p></p></blockquote>

diff --git a/packages/e2e-tests/specs/writing-flow.test.js b/packages/e2e-tests/specs/writing-flow.test.js
@@ -408,4 +408,18 @@ describe( 'Writing Flow', () => {
 
 		expect( await getEditedPostContent() ).toMatchSnapshot();
 	} );
+
+	it( 'should navigate empty paragraphs', async () => {
+		await page.keyboard.press( 'Enter' );
+		await page.keyboard.press( 'Enter' );
+		await page.keyboard.press( 'Enter' );
+		await page.keyboard.press( 'ArrowLeft' );
+		await page.keyboard.press( 'ArrowLeft' );
+		await page.keyboard.type( '1' );
+		await page.keyboard.press( 'ArrowRight' );
+		await page.keyboard.press( 'ArrowRight' );
+		await page.keyboard.type( '3' );
+
+		expect( await getEditedPostContent() ).toMatchSnapshot();
+	} );
 } );
diff --git a/packages/rich-text/src/to-tree.js b/packages/rich-text/src/to-tree.js
@@ -255,6 +255,10 @@ export function toTree( {
 					type: 'span',
 					attributes: {
 						'data-rich-text-placeholder': placeholder,
+						// Necessary to prevent the placeholder from catching
+						// selection. The placeholder is also not editable after
+						// all.
+						contenteditable: 'false',
 					},
 				} );
 			}