Piotrek Koszuliński 6 年 前
コミット
877963c2e4

+ 3 - 3
packages/ckeditor5-mention/docs/_snippets/features/mention-customization.js

@@ -35,8 +35,8 @@ ClassicEditor
 	} );
 
 function MentionCustomization( editor ) {
-	// The upcast converter will convert <a class="mention" href="" data-user-id="">
-	// elements to the model 'mention' attribute.
+	// The upcast converter will convert view <a class="mention" href="" data-user-id="">
+	// elements to the model 'mention' text attribute.
 	editor.conversion.for( 'upcast' ).elementToAttribute( {
 		view: {
 			name: 'a',
@@ -65,7 +65,7 @@ function MentionCustomization( editor ) {
 		converterPriority: 'high'
 	} );
 
-	// Do not forget to define a downcast converter as well:
+	// Downcast the model 'mention' text attribute to a view <a> element.
 	editor.conversion.for( 'downcast' ).attributeToElement( {
 		model: 'mention',
 		view: ( modelAttributeValue, viewWriter ) => {

+ 17 - 13
packages/ckeditor5-mention/docs/features/mention.md

@@ -212,17 +212,15 @@ function MentionCustomization( editor ) {
 			key: 'mention',
 			value: viewItem => {
 				// The mention feature expects that the mention attribute value
-				// in the model is a plain object:
-				const mentionValue = {
-					// The name attribute is required.
-					name: viewItem.getAttribute( 'data-mention' ),
-
+				// in the model is a plain object with a set of additional attributes.
+				// In order to create a proper object use the toMentionAttribute() helper method:
+				const mentionAttribute = editor.plugins.get( 'Mention' ).toMentionAttribute( viewItem, {
 					// Add any other properties that you need.
 					link: viewItem.getAttribute( 'href' ),
-					id: viewItem.getAttribute( 'data-user-id' )
-				};
+					userId: viewItem.getAttribute( 'data-user-id' )
+				} );
 
-				return mentionValue;
+				return mentionAttribute;
 			}
 		},
 		converterPriority: 'high'
@@ -239,8 +237,8 @@ function MentionCustomization( editor ) {
 
 			return viewWriter.createAttributeElement( 'a', {
 				class: 'mention',
-				'data-mention': modelAttributeValue.name,
-				'data-user-id': modelAttributeValue.id,
+				'data-mention': modelAttributeValue.id,
+				'data-user-id': modelAttributeValue.userId,
 				'href': modelAttributeValue.link
 			} );
 		},
@@ -346,10 +344,16 @@ const items = [
 function getFeedItems( queryText ) {
 	// As an example of an asynchronous action, let's return a promise
 	// that resolves after a 100ms timeout.
-	// This can be a server request, or any sort of delayed action.
+	// This can be a server request or any sort of delayed action.
 	return new Promise( resolve => {
 		setTimeout( () => {
-			resolve( items.filter( isItemMatching ) );
+			const itemsToDisplay = items
+				// Filter out the full list of all items to only those matching queryText.
+				.filter( isItemMatching )
+				// Return 10 items max - needed for generic queries when the list may contain hundreds of elements.
+				.slice( 0, 10 );
+
+			resolve( itemsToDisplay );
 		}, 100 );
 	} );
 
@@ -370,7 +374,7 @@ function customItemRenderer( item ) {
 	const itemElement = document.createElement( 'span' );
 
 	itemElement.classList.add( 'custom-item' );
-	itemElement.id = `mention-list-item-id-${ item.userid }`;
+	itemElement.id = `mention-list-item-id-${ item.userId }`;
 	itemElement.textContent = `${ item.name } `;
 
 	const usernameElement = document.createElement( 'span' );

+ 1 - 1
packages/ckeditor5-mention/src/mention.js

@@ -153,7 +153,7 @@ export default class Mention extends Plugin {
  *		}
  *
  * @typedef {Object} module:mention/mention~MentionFeed
- * @property {String} [marker='@'] The character which triggers autocompletion for mention.
+ * @property {String} [marker] The character which triggers autocompletion for mention. It must be a single character.
  * @property {Array.<module:mention/mention~MentionFeedItem>|Function} feed The 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).

+ 2 - 2
packages/ckeditor5-mention/src/mentioncommand.js

@@ -87,7 +87,7 @@ export default class MentionCommand extends Command {
 
 		if ( options.marker.length != 1 ) {
 			/**
-			 * The marker must be one character.
+			 * The marker must be a single character.
 			 *
 			 * Correct markers: `'@'`, `'#'`.
 			 *
@@ -97,7 +97,7 @@ export default class MentionCommand extends Command {
 			 *
 			 * @error markercommand-incorrect-marker
 			 */
-			throw new CKEditorError( 'markercommand-incorrect-marker: The marker must be one character.' );
+			throw new CKEditorError( 'markercommand-incorrect-marker: The marker must be a single character.' );
 		}
 
 		if ( mentionID.charAt( 0 ) != options.marker ) {

+ 1 - 1
packages/ckeditor5-mention/src/mentionui.js

@@ -109,7 +109,7 @@ export default class MentionUI extends Plugin {
 		for ( const mentionDescription of feeds ) {
 			const feed = mentionDescription.feed;
 
-			const marker = mentionDescription.marker || '@';
+			const marker = mentionDescription.marker;
 			const minimumCharacters = mentionDescription.minimumCharacters || 0;
 			const feedCallback = typeof feed == 'function' ? feed : createFeedCallback( feed );
 			const watcher = this._setupTextWatcherForFeed( marker, minimumCharacters );