Merge pull request #10457 from ckeditor/ck/10302

Fix (find-and-replace): Improved the performance of the find feature by reducing the number of `model.change()` calls. Closes #10302.
ckeditor · Aug 31, 2021 · 8d425ed · 8d425ed
2 parents ca33e93 + 58ccc5a
commit 8d425ed
Show file tree

Hide file tree

Showing 2 changed files with 26 additions and 15 deletions.
diff --git a/packages/ckeditor5-find-and-replace/src/utils.js b/packages/ckeditor5-find-and-replace/src/utils.js
@@ -33,20 +33,20 @@ import { escapeRegExp } from 'lodash-es';
 export function updateFindResultFromRange( range, model, findCallback, startResults ) {
 	const results = startResults || new Collection();
 
-	[ ...range ].forEach( ( { type, item } ) => {
-		if ( type === 'elementStart' ) {
-			if ( model.schema.checkChild( item, '$text' ) ) {
-				const foundItems = findCallback( {
-					item,
-					text: rangeToText( model.createRangeIn( item ) )
-				} );
-
-				if ( !foundItems ) {
-					return;
-				}
+	model.change( writer => {
+		[ ...range ].forEach( ( { type, item } ) => {
+			if ( type === 'elementStart' ) {
+				if ( model.schema.checkChild( item, '$text' ) ) {
+					const foundItems = findCallback( {
+						item,
+						text: rangeToText( model.createRangeIn( item ) )
+					} );
+
+					if ( !foundItems ) {
+						return;
+					}
 
-				foundItems.forEach( foundItem => {
-					model.change( writer => {
+					foundItems.forEach( foundItem => {
 						const resultId = `findResult:${ uid() }`;
 						const marker = writer.addMarker( resultId, {
 							usingOperation: false,
@@ -68,9 +68,9 @@ export function updateFindResultFromRange( range, model, findCallback, startResu
 							index
 						);
 					} );
-				} );
+				}
 			}
-		}
+		} );
 	} );
 
 	return results;

diff --git a/packages/ckeditor5-find-and-replace/tests/findcommand.js b/packages/ckeditor5-find-and-replace/tests/findcommand.js
@@ -65,6 +65,17 @@ describe( 'FindCommand', () => {
 				);
 			} );
 
+			it( 'calls model.change() only once', () => {
+				setData( model, '<paragraph>[]Foo bar baz. Bam bar bar bar bar bom.</paragraph>' );
+				const spy = sinon.spy( model, 'change' );
+
+				command.execute( 'bar' );
+
+				// It's called two additional times
+				// from 'change:highlightedResult' handler in FindAndReplaceEditing.
+				expect( spy.callCount ).to.equal( 3 );
+			} );
+
 			it( 'returns no result if nothing matched', () => {
 				setData( model, '<paragraph>[]Foo bar baz. Bam bar bom.</paragraph>' );