Merge pull request #13512 from ckeditor/ck/13504-add-dropdownlimit-at…

…-a-level-of-singular-feed

Feature (mention): Limiting the dropdown on the singular feed level should be possible. Closes #13504.

packages/ckeditor5-mention/_src/mention.js

@@ -223,6 +223,9 @@ export default class Mention extends Plugin {
  * @property {Number} [minimumCharacters=0] Specifies after how many characters the autocomplete panel should be shown.
  * @property {Function} [itemRenderer] A function that renders a {@link module:mention/mention~MentionFeedItem}
  * to the autocomplete panel.
+ * @property {Number} [dropdownLimit] An optional number to specify how many available elements per feeds
+ * will the users be able to see in the dropdown list. If this property is not provided, the default value is
+ * reflected by the general option of {@link module:mention/mention~MentionConfig#dropdownLimit dropdownLimit}.
  */
 
 /**

packages/ckeditor5-mention/src/mentionconfig.ts

@@ -194,6 +194,12 @@ export interface MentionFeed {
 	 * to the autocomplete panel.
 	 */
 	itemRenderer?: ItemRenderer;
+
+	/**
+	 * Specify how many available elements per feeds will the users be able to see in the dropdown list.
+	 * If it not set, limit is inherited from {@link module:mention/mentionconfig~MentionConfig#dropdownLimit MentionConfig}.
+	 */
+	dropdownLimit?: number;
 }
 
 /**

packages/ckeditor5-mention/src/mentionui.ts

@@ -167,9 +167,7 @@ export default class MentionUI extends Plugin {
 		const feeds = editor.config.get( 'mention.feeds' )!;
 
 		for ( const mentionDescription of feeds ) {
-			const feed = mentionDescription.feed;
-
-			const marker = mentionDescription.marker;
+			const { feed, marker, dropdownLimit } = mentionDescription;
 
 			if ( !isValidMentionMarker( marker ) ) {
 				/**
@@ -189,7 +187,7 @@ export default class MentionUI extends Plugin {
 
 			const feedCallback = typeof feed == 'function' ? feed.bind( this.editor ) : createFeedCallback( feed );
 			const itemRenderer = mentionDescription.itemRenderer;
-			const definition = { marker, feedCallback, itemRenderer };
+			const definition = { marker, feedCallback, itemRenderer, dropdownLimit };
 
 			this._mentionsConfigurations.set( marker, definition );
 		}
@@ -238,8 +236,10 @@ export default class MentionUI extends Plugin {
 		mentionsView.items.bindTo( this._items ).using( data => {
 			const { item, marker } = data;
 
+			const { dropdownLimit: markerDropdownLimit } = this._mentionsConfigurations.get( marker )!;
+
 			// Set to 10 by default for backwards compatibility. See: #10479
-			const dropdownLimit = this.editor.config.get( 'mention.dropdownLimit' ) || 10;
+			const dropdownLimit = markerDropdownLimit || this.editor.config.get( 'mention.dropdownLimit' ) || 10;
 
 			if ( mentionsView.items.length >= dropdownLimit ) {
 				return null;
@@ -879,6 +879,7 @@ type Definition = {
 	marker: string;
 	feedCallback: FeedCallback;
 	itemRenderer?: ItemRenderer;
+	dropdownLimit?: number;
 };
 
 type MarkerDefinition = {

packages/ckeditor5-mention/tests/manual/mention-custom-dropdownlimit.js

@@ -42,7 +42,8 @@ ClassicEditor
 					marker: '#',
 					feed: [
 						'#a01', '#a02', '#a03', '#a04', '#a05', '#a06', '#a07'
-					]
+					],
+					dropdownLimit: 3
 				}
 			]
 		}

packages/ckeditor5-mention/tests/manual/mention-custom-dropdownlimit.md

@@ -1,10 +1,19 @@
 ## Mention
 
-The mention configuration with a custom `config.mention.dropdownLimit` configuration and a static list of autocomplete feed.
+The mention configuration with a custom `config.mention.dropdownLimit` configuration and a static list of autocomplete feed. You can also limit the dropdown per feeds object:
+```json
+{
+	marker: '#',
+	feed: [
+		...
+	],
+	dropdownLimit: 3
+}
+```
 
 ### Configuration
 
-Type "@" to display the list of 20 mentions out of 21 available or type "#" to see shorter list.
+Type "@" to display the list of 20 mentions out of 21 available or type "#" to see shorter list limited to 3.
 
 ### Interaction
 

packages/ckeditor5-mention/tests/mentionui.js

@@ -2391,6 +2391,12 @@ describe( 'MentionUI', () => {
 				feed: longFeed
 			};
 
+			const limitedArrayFeed = {
+				marker: '@',
+				feed: longFeed,
+				dropdownLimit: 5
+			};
+
 			const customFunctionFeed = {
 				marker: '@',
 				feed: () => {
@@ -2453,6 +2459,24 @@ describe( 'MentionUI', () => {
 						expect( mentionsView.items ).to.have.length( simpleArrayFeed.feed.length );
 					} );
 			} );
+
+			it( 'dropdown list length should be equal to the feeds dropdownLimit value', () => {
+				return createClassicTestEditor( {
+					dropdownLimit: 25,
+					feeds: [ limitedArrayFeed ] } )
+					.then( () => {
+						setData( model, '<paragraph>foo []</paragraph>' );
+
+						model.change( writer => {
+							writer.insertText( '@', doc.selection.getFirstPosition() );
+						} );
+					} )
+					.then( waitForDebounce )
+					.then( () => {
+						expect( panelView.isVisible ).to.be.true;
+						expect( mentionsView.items ).to.have.length( 5 );
+					} );
+			} );
 		} );
 	} );