diff --git a/packages/dom/src/dom.js b/packages/dom/src/dom.js index ba005d6d3c401..564dfb4a7fcfd 100644 --- 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 index 42f1ce81d3b6e..c6c4bf5e8528e 100644 --- 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`] = ` " `; +exports[`Writing Flow should navigate empty paragraphs 1`] = ` +" +

1

+ + + +

+ + + +

3

+" +`; + exports[`Writing Flow should not create extra line breaks in multiline value 1`] = ` "

diff --git a/packages/e2e-tests/specs/writing-flow.test.js b/packages/e2e-tests/specs/writing-flow.test.js index f96b1f1602e66..f0683ff51e0f0 100644 --- 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 index f104722850760..6e50be6a42cdd 100644 --- 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', }, } ); }