Input Interaction: take into account container padding (#14804)

* Input Interaction: take into account container padding * Add e2e test
WordPress · Apr 16, 2019 · 887d8a4 · 887d8a4
1 parent e2777f1
commit 887d8a4
Show file tree

Hide file tree

Showing 3 changed files with 34 additions and 3 deletions.
diff --git a/packages/dom/src/dom.js b/packages/dom/src/dom.js
@@ -100,7 +100,7 @@ function isEdge( container, isReverse, onlyVertical ) {
 	}
 
 	const computedStyle = window.getComputedStyle( container );
-	const lineHeight = parseInt( computedStyle.lineHeight, 10 );
+	const lineHeight = parseInt( computedStyle.lineHeight, 10 ) || 0;
 
 	// Only consider the multiline selection at the edge if the direction is
 	// towards the edge.
@@ -112,15 +112,19 @@ function isEdge( container, isReverse, onlyVertical ) {
 		return false;
 	}
 
+	const padding = parseInt( computedStyle[
+		`padding${ isReverse ? 'Top' : 'Bottom' }`
+	], 10 ) || 0;
+
 	// 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
 	// 3/4 the line height to the selection rectangle to ensure that it is well
 	// over its line boundary.
 	const buffer = 3 * parseInt( lineHeight, 10 ) / 4;
 	const containerRect = container.getBoundingClientRect();
 	const verticalEdge = isReverse ?
-		containerRect.top > rangeRect.top - buffer :
-		containerRect.bottom < rangeRect.bottom + buffer;
+		containerRect.top + padding > rangeRect.top - buffer :
+		containerRect.bottom - padding < rangeRect.bottom + buffer;
 
 	if ( ! verticalEdge ) {
 		return false;

diff --git a/packages/e2e-tests/specs/__snapshots__/writing-flow.test.js.snap b/packages/e2e-tests/specs/__snapshots__/writing-flow.test.js.snap
@@ -126,6 +126,16 @@ exports[`adding blocks should navigate around nested inline boundaries 2`] = `
 <!-- /wp:paragraph -->"
 `;
 
+exports[`adding blocks should navigate contenteditable with padding 1`] = `
+"<!-- wp:paragraph -->
+<p>1</p>
+<!-- /wp:paragraph -->
+
+<!-- wp:paragraph -->
+<p>2</p>
+<!-- /wp:paragraph -->"
+`;
+
 exports[`adding blocks should navigate empty paragraph 1`] = `
 "<!-- wp:paragraph -->
 <p>1</p>

diff --git a/packages/e2e-tests/specs/writing-flow.test.js b/packages/e2e-tests/specs/writing-flow.test.js
@@ -310,4 +310,21 @@ describe( 'adding blocks', () => {
 
 		expect( await getEditedPostContent() ).toMatchSnapshot();
 	} );
+
+	it( 'should navigate contenteditable with padding', async () => {
+		await clickBlockAppender();
+		await page.keyboard.press( 'Enter' );
+		await page.evaluate( () => {
+			document.activeElement.style.paddingTop = '100px';
+		} );
+		await page.keyboard.press( 'ArrowUp' );
+		await page.keyboard.type( '1' );
+		await page.evaluate( () => {
+			document.activeElement.style.paddingBottom = '100px';
+		} );
+		await page.keyboard.press( 'ArrowDown' );
+		await page.keyboard.type( '2' );
+
+		expect( await getEditedPostContent() ).toMatchSnapshot();
+	} );
 } );