Rich text: remove store change on focus (#48342)

WordPress · Feb 23, 2023 · 09df1a4 · 09df1a4 · github-actions · Feb 23, 2023
1 parent 1a93475
commit 09df1a4
Show file tree

Hide file tree

Showing 5 changed files with 34 additions and 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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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 );