Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Input Interaction: allow outer vertical edge to be selected #14453

Merged
merged 2 commits into from
Mar 15, 2019
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
33 changes: 25 additions & 8 deletions packages/block-editor/src/components/writing-flow/index.js
Original file line number Diff line number Diff line change
Expand Up @@ -220,7 +220,13 @@ class WritingFlow extends Component {
}

onKeyDown( event ) {
const { hasMultiSelection, onMultiSelect, blocks } = this.props;
const {
hasMultiSelection,
onMultiSelect,
blocks,
selectionBeforeEndClientId,
selectionAfterEndClientId,
} = this.props;

const { keyCode, target } = event;
const isUp = keyCode === UP;
Expand Down Expand Up @@ -281,13 +287,24 @@ class WritingFlow extends Component {
this.verticalRect = computeCaretRect( target );
}

if ( isShift && ( hasMultiSelection || (
this.isTabbableEdge( target, isReverse ) &&
isNavEdge( target, isReverse )
) ) ) {
// Shift key is down, and there is multi selection or we're at the end of the current block.
this.expandSelection( isReverse );
event.preventDefault();
if ( isShift ) {
if (
(
// Ensure that there is a target block.
( isReverse && selectionBeforeEndClientId ) ||
( ! isReverse && selectionAfterEndClientId )
) && (
hasMultiSelection || (
this.isTabbableEdge( target, isReverse ) &&
isNavEdge( target, isReverse )
)
)
) {
// Shift key is down, and there is multi selection or we're at
// the end of the current block.
this.expandSelection( isReverse );
event.preventDefault();
}
} else if ( hasMultiSelection ) {
// Moving from block multi-selection to single block selection
this.moveSelection( isReverse );
Expand Down
Original file line number Diff line number Diff line change
@@ -1,5 +1,11 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP

exports[`Multi-block selection should allow selecting outer edge if there is no sibling block 1`] = `
"<!-- wp:paragraph -->
<p>2</p>
<!-- /wp:paragraph -->"
`;

exports[`Multi-block selection should only trigger multi-selection when at the end 1`] = `
"<!-- wp:paragraph -->
<p>1.</p>
Expand Down
10 changes: 10 additions & 0 deletions packages/e2e-tests/specs/multi-block-selection.test.js
Original file line number Diff line number Diff line change
Expand Up @@ -180,4 +180,14 @@ describe( 'Multi-block selection', () => {

expect( await getEditedPostContent() ).toMatchSnapshot();
} );

it( 'should allow selecting outer edge if there is no sibling block', async () => {
await clickBlockAppender();
await page.keyboard.type( '1' );
await pressKeyWithModifier( 'shift', 'ArrowUp' );
// This should replace the content.
await page.keyboard.type( '2' );

expect( await getEditedPostContent() ).toMatchSnapshot();
} );
} );