From a3d3ed54776331c790fb77942f2248590d1f5293 Mon Sep 17 00:00:00 2001 From: ntsekouras Date: Mon, 23 May 2022 09:41:47 +0300 Subject: [PATCH 1/2] [Writing Flow]: Fix browser formatting with shortcuts on mulitple selection --- .../src/components/writing-flow/use-input.js | 12 ++++++++++++ .../specs/editor/various/writing-flow.test.js | 19 +++++++++++++++++++ 2 files changed, 31 insertions(+) diff --git a/packages/block-editor/src/components/writing-flow/use-input.js b/packages/block-editor/src/components/writing-flow/use-input.js index 8b9b977a993e2..8827136f2e8de 100644 --- a/packages/block-editor/src/components/writing-flow/use-input.js +++ b/packages/block-editor/src/components/writing-flow/use-input.js @@ -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; @@ -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 ); }; diff --git a/packages/e2e-tests/specs/editor/various/writing-flow.test.js b/packages/e2e-tests/specs/editor/various/writing-flow.test.js index 4e2afd159ed99..aa4d8ad8d8f31 100644 --- a/packages/e2e-tests/specs/editor/various/writing-flow.test.js +++ b/packages/e2e-tests/specs/editor/various/writing-flow.test.js @@ -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' ] ); + } ); } ); From 4f9103104ce94a2915be4fa12afe511bc7b3bf08 Mon Sep 17 00:00:00 2001 From: ntsekouras Date: Tue, 24 May 2022 18:50:11 +0300 Subject: [PATCH 2/2] address feedback --- packages/block-editor/src/components/writing-flow/use-input.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/block-editor/src/components/writing-flow/use-input.js b/packages/block-editor/src/components/writing-flow/use-input.js index 8827136f2e8de..de68fa1ded943 100644 --- a/packages/block-editor/src/components/writing-flow/use-input.js +++ b/packages/block-editor/src/components/writing-flow/use-input.js @@ -35,7 +35,7 @@ export default function useInput() { return; } // Prevent the browser to format something when we have multiselection. - if ( event?.inputType?.startsWith( 'format' ) ) { + if ( event.inputType?.startsWith( 'format' ) ) { event.preventDefault(); } }