diff --git a/packages/dom/src/dom.js b/packages/dom/src/dom.js index 4ea9ad8c0ef78f..b3b0f7b6df89da 100644 --- a/packages/dom/src/dom.js +++ b/packages/dom/src/dom.js @@ -169,16 +169,6 @@ export function isVerticalEdge( container, isReverse ) { } const selection = window.getSelection(); - - // Only consider the selection at the edge if the direction is towards the - // edge. - if ( - ! selection.isCollapsed && - isSelectionForward( selection ) === isReverse - ) { - return false; - } - const range = selection.rangeCount ? selection.getRangeAt( 0 ) : null; if ( ! range ) { @@ -191,14 +181,25 @@ export function isVerticalEdge( container, isReverse ) { return false; } - const editableRect = container.getBoundingClientRect(); - // 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 // half the line height to the selection rectangle to ensure that it is well // over its line boundary. - const { lineHeight } = window.getComputedStyle( container ); - const buffer = parseInt( lineHeight, 10 ) / 2; + const computedStyle = window.getComputedStyle( container ); + const lineHeight = parseInt( computedStyle.lineHeight, 10 ); + + // Only consider the multiline selection at the edge if the direction is + // towards the edge. + if ( + ! selection.isCollapsed && + rangeRect.height > lineHeight && + isSelectionForward( selection ) === isReverse + ) { + return false; + } + + const editableRect = container.getBoundingClientRect(); + const buffer = lineHeight / 2; // Too low. if ( isReverse && rangeRect.top - buffer > editableRect.top ) { diff --git a/packages/e2e-tests/specs/__snapshots__/multi-block-selection.test.js.snap b/packages/e2e-tests/specs/__snapshots__/multi-block-selection.test.js.snap index 6986ffc94968bc..f68e40f606dc4c 100644 --- a/packages/e2e-tests/specs/__snapshots__/multi-block-selection.test.js.snap +++ b/packages/e2e-tests/specs/__snapshots__/multi-block-selection.test.js.snap @@ -6,6 +6,8 @@ exports[`Multi-block selection should allow selecting outer edge if there is no " `; +exports[`Multi-block selection should always expand single line selection 1`] = `""`; + exports[`Multi-block selection should only trigger multi-selection when at the end 1`] = ` "
1.
diff --git a/packages/e2e-tests/specs/multi-block-selection.test.js b/packages/e2e-tests/specs/multi-block-selection.test.js index 76ea211367660d..6bf7a62bf7789e 100644 --- a/packages/e2e-tests/specs/multi-block-selection.test.js +++ b/packages/e2e-tests/specs/multi-block-selection.test.js @@ -181,6 +181,19 @@ describe( 'Multi-block selection', () => { expect( await getEditedPostContent() ).toMatchSnapshot(); } ); + it( 'should always expand single line selection', async () => { + await clickBlockAppender(); + await page.keyboard.press( 'Enter' ); + await page.keyboard.type( '12' ); + await page.keyboard.press( 'ArrowLeft' ); + await pressKeyWithModifier( 'shift', 'ArrowRight' ); + await pressKeyWithModifier( 'shift', 'ArrowUp' ); + // This delete all blocks. + await page.keyboard.press( 'Backspace' ); + + expect( await getEditedPostContent() ).toMatchSnapshot(); + } ); + it( 'should allow selecting outer edge if there is no sibling block', async () => { await clickBlockAppender(); await page.keyboard.type( '1' );