Merge pull request #17528 from ckeditor/ck/11162

Fix (find-and-replace): It should be possible to search within content of inline widgets. Closes #11162

packages/ckeditor5-find-and-replace/package.json

@@ -36,6 +36,7 @@
     "@ckeditor/ckeditor5-source-editing": "43.3.1",
     "@ckeditor/ckeditor5-theme-lark": "43.3.1",
     "@ckeditor/ckeditor5-undo": "43.3.1",
+    "@ckeditor/ckeditor5-widget": "43.3.1",
     "typescript": "5.0.4",
     "webpack": "^5.94.0",
     "webpack-cli": "^5.1.4"

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

@@ -127,7 +127,7 @@ export default class FindAndReplaceUtils extends Plugin {
 	 * @returns The text content of the provided range.
 	 */
 	public rangeToText( range: Range ): string {
-		return Array.from( range.getItems() ).reduce( ( rangeText, node ) => {
+		return Array.from( range.getItems( { shallow: true } ) ).reduce( ( rangeText, node ) => {
 			// Trim text to a last occurrence of an inline element and update range start.
 			if ( !( node.is( '$text' ) || node.is( '$textProxy' ) ) ) {
 				// Editor has only one inline element defined in schema: `<softBreak>` which is treated as new line character in blocks.

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

@@ -10,6 +10,8 @@ import Paragraph from '@ckeditor/ckeditor5-paragraph/src/paragraph.js';
 import Essentials from '@ckeditor/ckeditor5-essentials/src/essentials.js';
 import BoldEditing from '@ckeditor/ckeditor5-basic-styles/src/bold/boldediting.js';
 import { getData as getViewData } from '@ckeditor/ckeditor5-engine/src/dev-utils/view.js';
+import { getData as getModelData } from '@ckeditor/ckeditor5-engine/src/dev-utils/model.js';
+import { toWidget, viewToModelPositionOutsideModelElement } from '@ckeditor/ckeditor5-widget/src/index.js';
 
 import FindAndReplace from '../src/findandreplace.js';
 
@@ -60,6 +62,61 @@ describe( 'FindAndReplaceEditing', () => {
 			);
 		} );
 
+		it( 'should properly highlight inline widgets with text content', () => {
+			registerInlinePlaceholderWidget( editor );
+
+			editor.setData(
+				'<p>' +
+					'<span class="placeholder">Foo Bar Foo foo</span>' +
+					'<span>some text #</span>' +
+				'</p>'
+			);
+
+			expect( getModelData( model ) ).to.equal(
+				'<paragraph>[]<placeholder>Foo Bar Foo foo</placeholder>some text #</paragraph>'
+			);
+
+			findAndReplaceEditing.find( 'Foo' );
+
+			expect( getSearchResultHTML() ).to.equal(
+				'<p>' +
+					'<span class="ck-widget placeholder" contenteditable="false">' +
+						'<span class="ck-find-result"><span class="ck-find-result_selected">Foo</span></span>' +
+						' Bar <span class="ck-find-result">Foo</span> <span class="ck-find-result">foo</span>' +
+					'</span>' +
+					'some text #' +
+				'</p>'
+			);
+		} );
+
+		it( 'should properly highlight text after an inline widgets with text content', () => {
+			registerInlinePlaceholderWidget( editor );
+
+			editor.setData(
+				'<p>' +
+					'text Foo text' +
+					'<span class="placeholder">Bar Foo baz</span>' +
+					'some Foo text' +
+				'</p>'
+			);
+
+			expect( getModelData( model ) ).to.equal(
+				'<paragraph>[]text Foo text<placeholder>Bar Foo baz</placeholder>some Foo text</paragraph>'
+			);
+
+			findAndReplaceEditing.find( 'Foo' );
+
+			expect( getSearchResultHTML() ).to.equal(
+				'<p>' +
+					'text <span class="ck-find-result"><span class="ck-find-result_selected">Foo</span></span> text' +
+					'<span class="ck-widget placeholder" contenteditable="false">' +
+						'Bar <span class="ck-find-result">Foo</span> baz' +
+					'</span>' +
+					'some <span class="ck-find-result">Foo</span> text' +
+				'</p>'
+			);
+		} );
+
 		it( 'highlight iterates over all found words', () => {
 			editor.setData( '<p>Chleb Chleb</p><p>Chleb</p>' );
 
@@ -223,4 +280,39 @@ describe( 'FindAndReplaceEditing', () => {
 
 		return marker;
 	}
+
+	function registerInlinePlaceholderWidget() {
+		model.schema.register( 'placeholder', {
+			inheritAllFrom: '$inlineObject',
+			allowAttributes: [ 'name' ]
+		} );
+
+		model.schema.extend( '$text', { allowIn: 'placeholder' } );
+
+		editor.editing.mapper.on(
+			'viewToModelPosition',
+			viewToModelPositionOutsideModelElement( model, viewElement => viewElement.hasClass( 'placeholder' ) )
+		);
+
+		editor.conversion.for( 'upcast' ).elementToElement( {
+			view: {
+				name: 'span',
+				classes: [ 'placeholder' ]
+			},
+			model: ( _, { writer } ) => writer.createElement( 'placeholder' )
+		} );
+
+		editor.conversion.for( 'editingDowncast' ).elementToElement( {
+			model: 'placeholder',
+			view: ( _, { writer } ) => toWidget(
+				writer.createContainerElement( 'span', { class: 'placeholder' } ),
+				writer
+			)
+		} );
+
+		editor.conversion.for( 'dataDowncast' ).elementToElement( {
+			model: 'placeholder',
+			view: ( _, { writer } ) => writer.createContainerElement( 'span', { class: 'placeholder' } )
+		} );
+	}
 } );