Skip to content

Commit

Permalink
[Writing Flow]: Fix browser formatting with shortcuts on multiple sel…
Browse files Browse the repository at this point in the history
…ection (#41207)

* [Writing Flow]: Fix browser formatting with shortcuts on mulitple selection

* address feedback
  • Loading branch information
ntsekouras authored May 24, 2022
1 parent db5a574 commit 142d7c9
Show file tree
Hide file tree
Showing 2 changed files with 31 additions and 0 deletions.
12 changes: 12 additions & 0 deletions packages/block-editor/src/components/writing-flow/use-input.js
Original file line number Diff line number Diff line change
Expand Up @@ -30,6 +30,16 @@ export default function useInput() {
} = useDispatch( blockEditorStore );

return useRefEffect( ( node ) => {
function onBeforeInput( event ) {
if ( ! hasMultiSelection() ) {
return;
}
// Prevent the browser to format something when we have multiselection.
if ( event.inputType?.startsWith( 'format' ) ) {
event.preventDefault();
}
}

function onKeyDown( event ) {
if ( event.defaultPrevented ) {
return;
Expand Down Expand Up @@ -102,9 +112,11 @@ export default function useInput() {
}
}

node.addEventListener( 'beforeinput', onBeforeInput );
node.addEventListener( 'keydown', onKeyDown );
node.addEventListener( 'compositionstart', onCompositionStart );
return () => {
node.removeEventListener( 'beforeinput', onBeforeInput );
node.removeEventListener( 'keydown', onKeyDown );
node.removeEventListener( 'compositionstart', onCompositionStart );
};
Expand Down
19 changes: 19 additions & 0 deletions packages/e2e-tests/specs/editor/various/writing-flow.test.js
Original file line number Diff line number Diff line change
Expand Up @@ -734,4 +734,23 @@ describe( 'Writing Flow', () => {
);
expect( selectedParagraph ).toBeDefined();
} );
it( 'should prevent browser default formatting on multi selection', async () => {
await page.keyboard.press( 'Enter' );
await page.keyboard.type( 'first' );
await page.keyboard.press( 'Enter' );
await page.keyboard.type( 'second' );

// Multi select both paragraphs.
await pressKeyTimes( 'ArrowLeft', 2 );
await page.keyboard.down( 'Shift' );
await pressKeyTimes( 'ArrowLeft', 2 );
await page.keyboard.press( 'ArrowUp' );
await page.keyboard.up( 'Shift' );
await pressKeyWithModifier( 'primary', 'b' );
const paragraphs = await page.$$eval(
'[data-type="core/paragraph"]',
( nodes ) => Array.from( nodes ).map( ( node ) => node.innerHTML )
);
expect( paragraphs ).toEqual( [ 'first', 'second' ] );
} );
} );

0 comments on commit 142d7c9

Please sign in to comment.