Merge pull request #16452 from ckeditor/ck/6193

Fix (find-and-replace): Allow to pass `searchTerm` when using `findCallback` in `find` command.

packages/ckeditor5-find-and-replace/src/findandreplacestate.ts

@@ -166,4 +166,23 @@ export default class FindAndReplaceState extends /* #__PURE__ */ ObservableMixin
 /**
  * The callback function used to find matches in the document.
  */
-export type FindCallback = ( ( { item, text }: { item: Item; text: string } ) => Array<ResultType> );
+export type FindCallback = ( { item, text }: { item: Item; text: string } ) => FindCallbackResultObject | FindCallbackResult;
+
+/**
+ * Represents the result of a find callback.
+ *
+ * The `searchText` attribute in the result object is used to determine if the search text has changed.
+ * If returned `searchText` is different than the last search text, the search results will be invalidated
+ * while searching for next item and the search will start from the beginning of the document.
+ */
+export type FindCallbackResultObject = {
+	results: Array<ResultType>;
+	searchText: string;
+};
+
+/**
+ * Represents the result of a find callback.
+ *
+ * @deprecated Use `FindCallbackResultObject` instead.
+ */
+export type FindCallbackResult = Array<ResultType>;

packages/ckeditor5-find-and-replace/src/findandreplaceutils.ts

@@ -47,7 +47,7 @@ export default class FindAndReplaceUtils extends Plugin {
 	public updateFindResultFromRange(
 		range: Range,
 		model: Model,
-		findCallback: ( { item, text }: { item: Item; text: string } ) => Array<ResultType>,
+		findCallback: ( { item, text }: { item: Item; text: string } ) => Array<ResultType> | { results: Array<ResultType> },
 		startResults: Collection<ResultType> | null
 	): Collection<ResultType> {
 		const results = startResults || new Collection();
@@ -67,7 +67,7 @@ export default class FindAndReplaceUtils extends Plugin {
 			[ ...range ].forEach( ( { type, item } ) => {
 				if ( type === 'elementStart' ) {
 					if ( model.schema.checkChild( item, '$text' ) ) {
-						const foundItems = findCallback( {
+						let foundItems = findCallback( {
 							item,
 							text: this.rangeToText( model.createRangeIn( item as Element ) )
 						} );
@@ -76,6 +76,10 @@ export default class FindAndReplaceUtils extends Plugin {
 							return;
 						}
 
+						if ( 'results' in foundItems ) {
+							foundItems = foundItems.results;
+						}
+
 						foundItems.forEach( foundItem => {
 							const resultId = `findResult:${ uid() }`;
 							const marker = writer.addMarker( resultId, {

packages/ckeditor5-find-and-replace/src/findcommand.ts

@@ -60,16 +60,31 @@ export default class FindCommand extends Command {
 		const findAndReplaceUtils: FindAndReplaceUtils = editor.plugins.get( 'FindAndReplaceUtils' );
 
 		let findCallback: FindCallback | undefined;
+		let callbackSearchText: string = '';
 
 		// Allow to execute `find()` on a plugin with a keyword only.
 		if ( typeof callbackOrText === 'string' ) {
-			findCallback = findAndReplaceUtils.findByTextCallback( callbackOrText, { matchCase, wholeWords } );
-
-			this._state.searchText = callbackOrText;
+			findCallback = ( ...args ) => ( {
+				results: findAndReplaceUtils.findByTextCallback( callbackOrText, { matchCase, wholeWords } )( ...args ),
+				searchText: callbackOrText
+			} );
 		} else {
 			findCallback = callbackOrText;
 		}
 
+		// Wrap the callback to get the search text that will be assigned to the state.
+		const oldCallback = findCallback;
+
+		findCallback = ( ...args ) => {
+			const result = oldCallback( ...args );
+
+			if ( result && 'searchText' in result ) {
+				callbackSearchText = result.searchText;
+			}
+
+			return result;
+		};
+
 		// Initial search is done on all nodes in all roots inside the content.
 		const results = model.document.getRootNames()
 			.reduce( ( ( currentResults: Collection<ResultType> | null, rootName ) => findAndReplaceUtils.updateFindResultFromRange(
@@ -82,10 +97,7 @@ export default class FindCommand extends Command {
 		this._state.clear( model );
 		this._state.results.addMany( results );
 		this._state.highlightedResult = results.get( 0 );
-
-		if ( typeof callbackOrText === 'string' ) {
-			this._state.searchText = callbackOrText;
-		}
+		this._state.searchText = callbackSearchText;
 
 		if ( findCallback ) {
 			this._state.lastSearchCallback = findCallback;

packages/ckeditor5-find-and-replace/tests/findcommand.js

@@ -176,6 +176,15 @@ describe( 'FindCommand', () => {
 				);
 			} );
 
+			it( 'sets proper searchText state value', () => {
+				editor.setData( '<p>foo 🐛 bar</p>' );
+
+				const { results } = command.execute( '🐛' );
+
+				expect( results.length ).to.equal( 1 );
+				expect( command._state.searchText ).to.equal( '🐛' );
+			} );
+
 			describe( 'options.matchCase', () => {
 				it( 'set to true doesn\'t match differently cased string', () => {
 					editor.setData( '<p>foo bAr</p>' );
@@ -368,6 +377,35 @@ describe( 'FindCommand', () => {
 			} );
 		} );
 
+		describe( 'with callback passed', () => {
+			it( 'sets returned searchText attribute to the object result', () => {
+				const findAndReplaceUtils = editor.plugins.get( 'FindAndReplaceUtils' );
+
+				setData( model, '<paragraph>[]Foo bar baz. Bam bar bom.</paragraph>' );
+
+				const searchText = 'bar';
+				const { results } = command.execute( ( ...args ) => ( {
+					results: findAndReplaceUtils.findByTextCallback( searchText, {} )( ...args ),
+					searchText
+				} ) );
+
+				expect( results.length ).to.equal( 2 );
+				expect( command._state.searchText ).to.equal( searchText );
+			} );
+
+			it( 'sets empty searchText if array is returned', () => {
+				const findAndReplaceUtils = editor.plugins.get( 'FindAndReplaceUtils' );
+
+				setData( model, '<paragraph>[]Foo bar baz. Bam bar bom.</paragraph>' );
+
+				const searchText = 'bar';
+				const { results } = command.execute( findAndReplaceUtils.findByTextCallback( searchText, {} ) );
+
+				expect( results.length ).to.equal( 2 );
+				expect( command._state.searchText ).to.equal( '' );
+			} );
+		} );
+
 		it( 'adds marker synchronously', () => {
 			editor.setData( '<p>foo bar baz</p>' );