Various merge tags related improvements and adjustments.

packages/ckeditor5-engine/src/view/domconverter.ts

@@ -182,7 +182,7 @@ export default class DomConverter {
 			'td', 'tfoot', 'th', 'thead', 'tr', 'ul'
 		];
 		this.inlineObjectElements = [
-			'object', 'iframe', 'input', 'button', 'textarea', 'select', 'option', 'video', 'embed', 'audio', 'img', 'canvas'
+			'object', 'iframe', 'input', 'button', 'textarea', 'select', 'option', 'video', 'embed', 'audio', 'img', 'canvas', 'mergeTag'
 		];
 		this.unsafeElements = [ 'script', 'style' ];
 

packages/ckeditor5-engine/tests/view/domconverter/whitespace-handling-integration.js

@@ -455,7 +455,7 @@ describe( 'DomConverter – whitespace handling – integration', () => {
 				];
 
 				// Singletons don't have $text children.
-				const singletons = [ 'input', 'embed' ];
+				const singletons = [ 'input', 'embed', 'mergeTag' ];
 
 				for ( const name of elements ) {
 					it( `should work for the <${ name }> element`, () => {

packages/ckeditor5-ui/src/highlightedtext/buttonlabelwithhighlightview.ts

@@ -0,0 +1,56 @@
+/**
+ * @license Copyright (c) 2003-2024, CKSource Holding sp. z o.o. All rights reserved.
+ * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license
+ */
+
+/**
+ * @module ui/highlightedtext/buttonlabelwithhighlightview
+ */
+
+import type ButtonLabel from '../button/buttonlabel.js';
+import HighlightedTextView from './highlightedtextview.js';
+
+/**
+ * A button label view that can highlight a text fragment.
+ */
+export default class ButtonLabelWithHighlightView extends HighlightedTextView implements ButtonLabel {
+	/**
+	 * @inheritDoc
+	 */
+	declare public style: string | undefined;
+
+	/**
+	 * @inheritDoc
+	 */
+	declare public text: string | undefined;
+
+	/**
+	 * @inheritDoc
+	 */
+	declare public id: string | undefined;
+
+	/**
+	 * @inheritDoc
+	 */
+	constructor() {
+		super();
+
+		this.set( {
+			style: undefined,
+			text: undefined,
+			id: undefined
+		} );
+
+		const bind = this.bindTemplate;
+
+		this.extendTemplate( {
+			attributes: {
+				class: [
+					'ck-button__label'
+				],
+				style: bind.to( 'style' ),
+				id: bind.to( 'id' )
+			}
+		} );
+	}
+}

packages/ckeditor5-ui/src/highlightedtext/labelwithhighlightview.ts

@@ -0,0 +1,51 @@
+/**
+ * @license Copyright (c) 2003-2024, CKSource Holding sp. z o.o. All rights reserved.
+ * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license
+ */
+
+/**
+ * @module ui/highlightedtext/labelwithhighlightview
+ */
+
+import HighlightedTextView from './highlightedtextview.js';
+import type LabelView from '../label/labelview.js';
+import { uid } from '@ckeditor/ckeditor5-utils';
+
+/**
+ * A label view that can highlight a text fragment.
+ */
+export default class LabelWithHighlightView extends HighlightedTextView implements LabelView {
+	/**
+	 * @inheritDoc
+	 */
+	public readonly id: string;
+
+	/**
+	 * @inheritDoc
+	 */
+	declare public for: string | undefined;
+
+	/**
+	 * @inheritDoc
+	 */
+	constructor() {
+		super();
+
+		this.set( 'for', undefined );
+
+		const bind = this.bindTemplate;
+
+		this.id = `ck-editor__label_${ uid() }`;
+
+		this.extendTemplate( {
+			attributes: {
+				class: [
+					'ck',
+					'ck-label'
+				],
+				id: this.id,
+				for: bind.to( 'for' )
+			}
+		} );
+	}
+}

packages/ckeditor5-ui/src/index.ts

@@ -87,6 +87,7 @@ export { default as ListItemGroupView } from './list/listitemgroupview.js';
 export { default as ListItemView } from './list/listitemview.js';
 export { default as ListSeparatorView } from './list/listseparatorview.js';
 export { default as ListView } from './list/listview.js';
+export { default as filterGroupAndItemNames } from './search/filtergroupanditemnames.js';
 
 export { default as Notification } from './notification/notification.js';
 
@@ -100,6 +101,8 @@ export { default as SearchTextView, type SearchTextViewSearchEvent, type SearchT
 export { default as SearchInfoView } from './search/searchinfoview.js';
 export type { default as FilteredView, FilteredViewExecuteEvent } from './search/filteredview.js';
 export { default as HighlightedTextView } from './highlightedtext/highlightedtextview.js';
+export { default as ButtonLabelWithHighlightView } from './highlightedtext/buttonlabelwithhighlightview.js';
+export { default as LabelWithHighlightView } from './highlightedtext/labelwithhighlightview.js';
 
 export { default as TooltipManager } from './tooltipmanager.js';
 export { default as Template, type TemplateDefinition } from './template.js';

packages/ckeditor5-ui/src/menubar/utils.ts

@@ -490,6 +490,12 @@ export const MenuBarMenuViewPanelPositioningFunctions: Record<string, Positionin
  * 				]
  * 			},
  * 			{
+ * 				groupId: 'previewMergeTags',
+ * 				items: [
+ * 					'menuBar:previewMergeTags'
+ * 				]
+ * 			},
+ * 			{
  * 				groupId: 'restrictedEditingException',
  * 				items: [
  * 					'menuBar:restrictedEditingException'
@@ -514,7 +520,8 @@ export const MenuBarMenuViewPanelPositioningFunctions: Record<string, Positionin
  * 				groupId: 'insertInline',
  * 				items: [
  * 					'menuBar:link',
- * 					'menuBar:comment'
+ * 					'menuBar:comment',
+ * 					'menuBar:insertMergeTag'
  * 				]
  * 			},
  * 			{
@@ -737,6 +744,12 @@ export const DefaultMenuBarItems: DeepReadonly<MenuBarConfigObject[ 'items' ]> =
 					'menuBar:showBlocks'
 				]
 			},
+			{
+				groupId: 'previewMergeTags',
+				items: [
+					'menuBar:previewMergeTags'
+				]
+			},
 			{
 				groupId: 'restrictedEditingException',
 				items: [
@@ -762,7 +775,8 @@ export const DefaultMenuBarItems: DeepReadonly<MenuBarConfigObject[ 'items' ]> =
 				groupId: 'insertInline',
 				items: [
 					'menuBar:link',
-					'menuBar:comment'
+					'menuBar:comment',
+					'menuBar:insertMergeTag'
 				]
 			},
 			{

packages/ckeditor5-ui/src/search/filtergroupanditemnames.ts

@@ -0,0 +1,65 @@
+/**
+ * @license Copyright (c) 2003-2024, CKSource Holding sp. z o.o. All rights reserved.
+ * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license
+ */
+
+/**
+ * @module ui/search/filtergroupanditemnames
+ */
+
+import type ButtonView from '../button/buttonview.js';
+import type ButtonLabelWithHighlightView from '../highlightedtext/buttonlabelwithhighlightview.js';
+import type LabelWithHighlightView from '../highlightedtext/labelwithhighlightview.js';
+import type ViewCollection from '../viewcollection.js';
+import type ListItemGroupView from '../list/listitemgroupview.js';
+import type ListItemView from '../list/listitemview.js';
+import type ListSeparatorView from '../list/listseparatorview.js';
+
+/**
+ * A filter function that returns matching item and group names in the list view.
+ */
+export default function filterGroupAndItemNames(
+	regExp: RegExp | null,
+	items: ViewCollection<ListItemGroupView | ListItemView | ListSeparatorView>
+): {
+	resultsCount: number;
+	totalItemsCount: number;
+} {
+	let totalItemsCount = 0;
+	let resultsCount = 0;
+
+	for ( const groupView of items ) {
+		const group = groupView as ListItemGroupView;
+		const groupItems = group.items as ViewCollection<ListItemView>;
+		const isGroupLabelMatching = regExp && !!group.label.match( regExp );
+
+		( group.labelView as LabelWithHighlightView ).highlightText( isGroupLabelMatching ? regExp : null );
+
+		for ( const listItemView of groupItems ) {
+			const buttonView = listItemView.children.first as ButtonView;
+			const labelView = buttonView.labelView as ButtonLabelWithHighlightView;
+
+			if ( !regExp ) {
+				listItemView.isVisible = true;
+				labelView.highlightText( null );
+			} else {
+				const isItemLabelMatching = !!buttonView.label!.match( regExp );
+
+				labelView.highlightText( isItemLabelMatching ? regExp : null );
+
+				listItemView.isVisible = isGroupLabelMatching || isItemLabelMatching;
+			}
+		}
+
+		const visibleInGroupCount = groupItems.filter( listItemView => listItemView.isVisible ).length;
+
+		totalItemsCount += group.items.length;
+		resultsCount += isGroupLabelMatching ? group.items.length : visibleInGroupCount;
+		group.isVisible = isGroupLabelMatching || !!visibleInGroupCount;
+	}
+
+	return {
+		resultsCount,
+		totalItemsCount
+	};
+}

packages/ckeditor5-ui/src/search/text/searchtextview.ts

@@ -244,6 +244,7 @@ export default class SearchTextView<
 	public reset(): void {
 		this.queryView.reset();
 		this.search( '' );
+		this.filteredView.element!.scrollTo( 0, 0 );
 	}
 
 	/**

packages/ckeditor5-ui/tests/highlightedtext/buttonlabelwithhighlightview.js

@@ -0,0 +1,94 @@
+/**
+ * @license Copyright (c) 2003-2024, CKSource Holding sp. z o.o. All rights reserved.
+ * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license
+ */
+
+import { global } from '@ckeditor/ckeditor5-utils';
+import HighlightedTextView from '../../src/highlightedtext/highlightedtextview.js';
+import ButtonLabelWithHighlightView from '../../src/highlightedtext/buttonlabelwithhighlightview.js';
+
+describe( 'ButtonLabelWithHighlightView', () => {
+	let view;
+
+	beforeEach( () => {
+		view = new ButtonLabelWithHighlightView( );
+		view.render();
+
+		global.document.body.appendChild( view.element );
+	} );
+
+	afterEach( () => {
+		view.element.remove();
+		view.destroy();
+	} );
+
+	describe( 'constructor()', () => {
+		it( 'should be HighlightedTextView instance', () => {
+			expect( view ).to.be.instanceof( HighlightedTextView );
+		} );
+
+		it( 'should set initial properties as undefined', () => {
+			expect( view.style ).to.equal( undefined );
+			expect( view.text ).to.equal( undefined );
+			expect( view.id ).to.equal( undefined );
+		} );
+	} );
+
+	describe( 'default template', () => {
+		it( 'should bind view#style to template style', () => {
+			view.style = 'color: red';
+
+			expect( view.element.getAttribute( 'style' ) ).to.equal( 'color: red' );
+
+			view.style = 'color: blue';
+
+			expect( view.element.getAttribute( 'style' ) ).to.equal( 'color: blue' );
+		} );
+
+		it( 'should bind view#text to template text', () => {
+			view.text = 'Test';
+
+			expect( view.element.textContent ).to.equal( 'Test' );
+
+			view.text = undefined;
+
+			expect( view.element.textContent ).to.equal( '' );
+		} );
+
+		it( 'should bind view#id to template id', () => {
+			view.id = 'test-id';
+
+			expect( view.element.getAttribute( 'id' ) ).to.equal( 'test-id' );
+
+			view.id = 'new-id';
+
+			expect( view.element.getAttribute( 'id' ) ).to.equal( 'new-id' );
+		} );
+	} );
+
+	describe( 'Highlighting template text', () => {
+		beforeEach( () => {
+			view.text = 'Example text';
+		} );
+
+		it( 'should not highlight anything when no query is specified', () => {
+			view.highlightText( null );
+
+			expect( view.element.innerHTML ).to.equal( 'Example text' );
+		} );
+
+		it( 'should highlight the query', () => {
+			view.highlightText( new RegExp( /text/, 'ig' ) );
+
+			expect( view.element.innerHTML ).to.equal( 'Example <mark>text</mark>' );
+		} );
+
+		it( 'should highlight multiple occurences of the query', () => {
+			view.highlightText( new RegExp( /e/, 'ig' ) );
+
+			expect( view.element.innerHTML ).to.equal(
+				'<mark>E</mark>xampl<mark>e</mark> t<mark>e</mark>xt'
+			);
+		} );
+	} );
+} );