From 09df1a44d176d7f4adff99c789f22de67ba653fe Mon Sep 17 00:00:00 2001 From: Ella <4710635+ellatrix@users.noreply.github.com> Date: Thu, 23 Feb 2023 19:10:11 +0200 Subject: [PATCH] Rich text: remove store change on focus (#48342) --- .../components/rich-text/use-input-rules.js | 10 ++++--- .../dom/src/dom/get-rectangle-from-range.js | 2 +- .../specs/performance/post-editor.test.js | 26 ++++++++++--------- packages/e2e-tests/specs/performance/utils.js | 13 +++++++++- .../src/component/use-input-and-selection.js | 1 - 5 files changed, 34 insertions(+), 18 deletions(-) diff --git a/packages/block-editor/src/components/rich-text/use-input-rules.js b/packages/block-editor/src/components/rich-text/use-input-rules.js index cf6a6f8d21776..58432c01f9683 100644 --- a/packages/block-editor/src/components/rich-text/use-input-rules.js +++ b/packages/block-editor/src/components/rich-text/use-input-rules.js @@ -29,7 +29,7 @@ function findSelection( blocks ) { blocks[ i ].attributes[ attributeKey ] = blocks[ i ].attributes[ attributeKey ].replace( START_OF_SELECTED_AREA, '' ); - return blocks[ i ].clientId; + return [ blocks[ i ].clientId, attributeKey, 0, 0 ]; } const nestedSelection = findSelection( blocks[ i ].innerBlocks ); @@ -38,6 +38,8 @@ function findSelection( blocks ) { return nestedSelection; } } + + return []; } export function useInputRules( props ) { @@ -86,9 +88,11 @@ export function useInputRules( props ) { } ); const block = transformation.transform( content ); - selectionChange( findSelection( [ block ] ) ); + selectionChange( ...findSelection( [ block ] ) ); onReplace( [ block ] ); __unstableMarkAutomaticChange(); + + return true; } function onInput( event ) { @@ -106,7 +110,7 @@ export function useInputRules( props ) { } if ( __unstableAllowPrefixTransformations && inputRule ) { - inputRule(); + if ( inputRule() ) return; } const value = getValue(); diff --git a/packages/dom/src/dom/get-rectangle-from-range.js b/packages/dom/src/dom/get-rectangle-from-range.js index 7674b4b27c600..1874a331a641f 100644 --- a/packages/dom/src/dom/get-rectangle-from-range.js +++ b/packages/dom/src/dom/get-rectangle-from-range.js @@ -89,7 +89,7 @@ export default function getRectangleFromRange( range ) { // by adding a temporary text node with zero-width space to the range. // // See: https://stackoverflow.com/a/6847328/995445 - if ( ! rect ) { + if ( ! rect || rect.height === 0 ) { assertIsDefined( ownerDocument, 'ownerDocument' ); const padNode = ownerDocument.createTextNode( '\u200b' ); // Do not modify the live range. diff --git a/packages/e2e-tests/specs/performance/post-editor.test.js b/packages/e2e-tests/specs/performance/post-editor.test.js index 597f4f36cd9a3..0a6409495ed70 100644 --- a/packages/e2e-tests/specs/performance/post-editor.test.js +++ b/packages/e2e-tests/specs/performance/post-editor.test.js @@ -29,6 +29,7 @@ import { getHoverEventDurations, getSelectionEventDurations, getLoadingDurations, + sum, } from './utils'; jest.setTimeout( 1000000 ); @@ -235,22 +236,26 @@ describe( 'Post Editor Performance', () => { it( 'Selecting blocks', async () => { await load1000Paragraphs(); const paragraphs = await canvas().$$( '.wp-block' ); - await page.tracing.start( { - path: traceFile, - screenshots: false, - categories: [ 'devtools.timeline' ], - } ); await paragraphs[ 0 ].click(); for ( let j = 1; j <= 10; j++ ) { // Wait for the browser to be idle before starting the monitoring. // eslint-disable-next-line no-restricted-syntax await page.waitForTimeout( 1000 ); + await page.tracing.start( { + path: traceFile, + screenshots: false, + categories: [ 'devtools.timeline' ], + } ); await paragraphs[ j ].click(); + await page.tracing.stop(); + traceResults = JSON.parse( readFile( traceFile ) ); + const allDurations = getSelectionEventDurations( traceResults ); + results.focus.push( + allDurations.reduce( ( acc, eventDurations ) => { + return acc + sum( eventDurations ); + }, 0 ) + ); } - await page.tracing.stop(); - traceResults = JSON.parse( readFile( traceFile ) ); - const [ focusEvents ] = getSelectionEventDurations( traceResults ); - results.focus = focusEvents; } ); it( 'Opening persistent list view', async () => { @@ -292,9 +297,6 @@ describe( 'Post Editor Performance', () => { } ); it( 'Searching the inserter', async () => { - function sum( arr ) { - return arr.reduce( ( a, b ) => a + b, 0 ); - } await load1000Paragraphs(); await openGlobalBlockInserter(); for ( let j = 0; j < 10; j++ ) { diff --git a/packages/e2e-tests/specs/performance/utils.js b/packages/e2e-tests/specs/performance/utils.js index 1ffee009827ac..a5829bbc8feda 100644 --- a/packages/e2e-tests/specs/performance/utils.js +++ b/packages/e2e-tests/specs/performance/utils.js @@ -41,6 +41,10 @@ function isFocusEvent( item ) { return isEvent( item ) && item.args.data.type === 'focus'; } +function isFocusInEvent( item ) { + return isEvent( item ) && item.args.data.type === 'focusin'; +} + function isClickEvent( item ) { return isEvent( item ) && item.args.data.type === 'click'; } @@ -68,7 +72,10 @@ export function getTypingEventDurations( trace ) { } export function getSelectionEventDurations( trace ) { - return [ getEventDurationsForType( trace, isFocusEvent ) ]; + return [ + getEventDurationsForType( trace, isFocusEvent ), + getEventDurationsForType( trace, isFocusInEvent ), + ]; } export function getClickEventDurations( trace ) { @@ -113,3 +120,7 @@ export async function getLoadingDurations() { }; } ); } + +export function sum( arr ) { + return arr.reduce( ( a, b ) => a + b, 0 ); +} diff --git a/packages/rich-text/src/component/use-input-and-selection.js b/packages/rich-text/src/component/use-input-and-selection.js index b8c5c0915903a..b39d0a011a4fa 100644 --- a/packages/rich-text/src/component/use-input-and-selection.js +++ b/packages/rich-text/src/component/use-input-and-selection.js @@ -287,7 +287,6 @@ export function useInputAndSelection( props ) { end: index, activeFormats: EMPTY_ACTIVE_FORMATS, }; - onSelectionChange( index, index ); } else { applyRecord( record.current ); onSelectionChange( record.current.start, record.current.end );