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.

Sign up for GitHub

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

Jump to bottom

RichText: Removing/merging richtext should only trigger if the selection is collapsed #8651

Merged
merged 3 commits into from
Aug 7, 2018
Merged

RichText: Removing/merging richtext should only trigger if the selection is collapsed #8651

Show file tree
Hide file tree
Changes from 2 commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
d5671a1
RichText: Removing/merging richtext should only trigger if the select…
youknowriad Aug 7, 2018
06baca2
Add e2e test to avoid uncollapsed selection to be mergedwq
youknowriad Aug 7, 2018
3cb8714
Code Style improvements per review
youknowriad Aug 7, 2018
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
6 changes: 4 additions & 2 deletions packages/editor/src/components/rich-text/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -437,8 +437,10 @@ export class RichText extends Component {
const { keyCode } = event;

if (
( keyCode === BACKSPACE && isHorizontalEdge( rootNode, true ) ) ||
( keyCode === DELETE && isHorizontalEdge( rootNode, false ) )
window.getSelection().isCollapsed && (
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Should we continue with setting it at the top as browser dependencies? const { getSelection } = window;

( keyCode === BACKSPACE && isHorizontalEdge( rootNode, true ) ) ||
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

For some reason I would have thought that isHorizontalEdge also does the check, as navigating also requires it.

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Yes, I noticed it was also checked in the WritingFlow. I didn't want to change isHorizontalEdge behavior as I wasn't sure about the implications

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Maybe. As it reads, I see no reason why isHorizontalEdge should have any concern about whether the selection is collapsed or not. This assumes there's a use case for wanting to know if there's an uncollapsed selection at the horizontal edge. We don't have this need in our project, which might bias our opinion on it. Or maybe "is horizontal edge" is meant to mean that pressing ArrowLeft/ArrowRight would have no effect (in a traditional input).

( keyCode === DELETE && isHorizontalEdge( rootNode, false ) )
)
) {
if ( ! this.props.onMerge && ! this.props.onRemove ) {
return;
Expand Down
10 changes: 10 additions & 0 deletions test/e2e/specs/__snapshots__/splitting-merging.test.js.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -12,6 +12,16 @@ exports[`splitting and merging blocks Should merge into inline boundary position
<!-- /wp:paragraph -->"
`;

exports[`splitting and merging blocks Should not merge paragraphs if the selection is not collapsed 1`] = `
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

As mentioned, it does make these specs read weirdly though.

"<!-- wp:paragraph -->
<p>Foo</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p></p>
<!-- /wp:paragraph -->"
`;

exports[`splitting and merging blocks Should split and merge paragraph blocks using Enter and Backspace 1`] = `
"<!-- wp:paragraph -->
<p>First</p>
Expand Down
14 changes: 14 additions & 0 deletions test/e2e/specs/splitting-merging.test.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -87,4 +87,18 @@ describe( 'splitting and merging blocks', () => {

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

it( 'Should not merge paragraphs if the selection is not collapsed', async () => {
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

We should have a rule but I think in general these should be lowercase. It's inconsistent now in the code though so whatever 😆

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Starting today (if I remember :P)

await insertBlock( 'Paragraph' );
await page.keyboard.type( 'Foo' );
await insertBlock( 'Paragraph' );
await page.keyboard.type( 'Bar' );

await page.keyboard.down( 'Shift' );
await pressTimes( 'ArrowLeft', 3 );
await page.keyboard.up( 'Shift' );
await page.keyboard.press( 'Backspace' );

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