MentionFeed (mention)

@ckeditor/ckeditor5-mention/src/mentionconfig

// Static configuration.
const mentionFeedPeople = {
	marker: '@',
	feed: [ '@Alice', '@Bob', ... ],
	minimumCharacters: 2
};

// Simple synchronous callback.
const mentionFeedTags = {
	marker: '#',
	feed: ( searchString: string ) => {
		return tags
			// Filter the tags list.
			.filter( tag => {
				return tag.toLowerCase().includes( queryText.toLowerCase() );
			} )
	}
};

const tags = [ 'wysiwyg', 'rte', 'rich-text-edior', 'collaboration', 'real-time', ... ];

// Asynchronous callback.
const mentionFeedPlaceholders = {
	marker: '$',
	feed: ( searchString: string ) => {
		return getMatchingPlaceholders( searchString );
	}
};

function getMatchingPlaceholders( searchString: string ) {
	return new Promise<Array<MentionFeedItem>>( resolve => {
		doSomeXHRQuery( result => {
			// console.log( result );
			// -> [ '$name', '$surname', '$postal', ... ]

			resolve( result );
		} );
	} );
}

Properties

• dropdownLimit : number | undefinedmodule:mention/mentionconfig~MentionFeed#dropdownLimit

  See source

  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 MentionConfig.

• feed : Array<MentionFeedItem> | FeedCallbackmodule:mention/mentionconfig~MentionFeed#feed

  See source

  Autocomplete items. Provide an array for a static configuration (the mention feature will show matching items automatically) or a function which returns an array of matching items (directly, or via a promise). If a function is passed, it is executed in the context of the editor instance.

• itemRenderer : ItemRenderer | undefinedmodule:mention/mentionconfig~MentionFeed#itemRenderer

  See source

  A function that renders a MentionFeedItem to the autocomplete panel.

• marker : stringmodule:mention/mentionconfig~MentionFeed#marker

  See source

  The character which triggers autocompletion for mention. It must be a single character.

• minimumCharacters : number | undefinedmodule:mention/mentionconfig~MentionFeed#minimumCharacters

  See source

  Specifies after how many characters the autocomplete panel should be shown.

  Defaults to 0