diff --git a/packages/dom/src/dom.js b/packages/dom/src/dom.js index 87be698a3be8d..8be06daaaa320 100644 --- 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,6 +112,10 @@ 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 @@ -119,8 +123,8 @@ function isEdge( container, isReverse, onlyVertical ) { 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 index 2a80f20633a95..0ea51c111b798 100644 --- 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`] = ` " `; +exports[`adding blocks should navigate contenteditable with padding 1`] = ` +" +

1

+ + + +

2

+" +`; + exports[`adding blocks should navigate empty paragraph 1`] = ` "

1

diff --git a/packages/e2e-tests/specs/writing-flow.test.js b/packages/e2e-tests/specs/writing-flow.test.js index c186507a7cdef..c3c4d477e1378 100644 --- 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(); + } ); } );