浏览代码

Update the mention data API.

Maciej Gołaszewski 6 年之前
父节点
当前提交
4ee39c05b6

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

@@ -79,8 +79,8 @@ function MentionCustomization( editor ) {
 
 			return viewWriter.createAttributeElement( 'a', {
 				class: 'mention',
-				'data-mention': modelAttributeValue._marker + modelAttributeValue.name,
-				'data-user-id': modelAttributeValue.id,
+				'data-mention': modelAttributeValue.id,
+				'data-user-id': modelAttributeValue.userId,
 				'href': modelAttributeValue.link
 			} );
 		},
@@ -89,11 +89,11 @@ function MentionCustomization( editor ) {
 }
 
 const items = [
-	{ id: '1', name: 'Barney Stinson', username: 'swarley', link: 'https://www.imdb.com/title/tt0460649/characters/nm0000439' },
-	{ id: '2', name: 'Lily Aldrin', username: 'lilypad', link: 'https://www.imdb.com/title/tt0460649/characters/nm0004989' },
-	{ id: '3', name: 'Marshall Eriksen', username: 'marshmallow', link: 'https://www.imdb.com/title/tt0460649/characters/nm0781981' },
-	{ id: '4', name: 'Robin Scherbatsky', username: 'rsparkles', link: 'https://www.imdb.com/title/tt0460649/characters/nm1130627' },
-	{ id: '5', name: 'Ted Mosby', username: 'tdog', link: 'https://www.imdb.com/title/tt0460649/characters/nm1102140' }
+	{ userId: '1', name: 'Barney Stinson', id: 'swarley', link: 'https://www.imdb.com/title/tt0460649/characters/nm0000439' },
+	{ userId: '2', name: 'Lily Aldrin', id: 'lilypad', link: 'https://www.imdb.com/title/tt0460649/characters/nm0004989' },
+	{ userId: '3', name: 'Marshall Eriksen', id: 'marshmallow', link: 'https://www.imdb.com/title/tt0460649/characters/nm0781981' },
+	{ userId: '4', name: 'Robin Scherbatsky', id: 'rsparkles', link: 'https://www.imdb.com/title/tt0460649/characters/nm1130627' },
+	{ userId: '5', name: 'Ted Mosby', id: 'tdog', link: 'https://www.imdb.com/title/tt0460649/characters/nm1102140' }
 ];
 
 function getFeedItems( queryText ) {
@@ -114,7 +114,7 @@ function getFeedItems( queryText ) {
 		// Include an item in the search results if name or username includes the current user input.
 		return (
 			item.name.toLowerCase().includes( searchString ) ||
-			item.username.toLowerCase().includes( searchString )
+			item.id.toLowerCase().includes( searchString )
 		);
 	}
 }
@@ -123,13 +123,13 @@ function customItemRenderer( item ) {
 	const itemElement = document.createElement( 'span' );
 
 	itemElement.classList.add( 'custom-item' );
-	itemElement.id = `mention-list-item-id-${ item.id }`;
+	itemElement.id = `mention-list-item-id-${ item.userid }`;
 	itemElement.textContent = `${ item.name } `;
 
 	const usernameElement = document.createElement( 'span' );
 
 	usernameElement.classList.add( 'custom-item-username' );
-	usernameElement.textContent = `@${ item.username }`;
+	usernameElement.textContent = `@${ item.id }`;
 
 	itemElement.appendChild( usernameElement );
 

+ 11 - 0
packages/ckeditor5-mention/src/mention.js

@@ -33,6 +33,7 @@ export default class Mention extends Plugin {
 	 *
 	 * @param {module:engine/view/element~Element} viewElement
 	 * @param {String|Object} [data] Mention data to be extended.
+	 * @returns {module:mention/mention~MentionAttribute}
 	 */
 	toMentionAttribute( viewElement, data ) {
 		return _toMentionAttribute( viewElement, data );
@@ -216,3 +217,13 @@ export default class Mention extends Plugin {
  * @typedef {Object|String} module:mention/mention~MentionFeedItem
  * @property {String} name Name of the mention.
  */
+
+/**
+ * Represents mention in the model.
+ *
+ * @interface module:mention/mention~MentionAttribute
+ * @property {String} id Id of a mention - identifies the mention item in mention feed.
+ * @property {String} _uid Internal mention view item id. Should be passed as an `option.id` when using
+ * {@link module:engine/model/writer~Writer#createAttributeElement writer.createAttributeElement()}.
+ * @property {String} _text Helper property that holds text of inserted mention. Used for detecting broken mention in the editing area.
+ */

+ 8 - 12
packages/ckeditor5-mention/src/mentioncommand.js

@@ -9,8 +9,7 @@
 
 import Command from '@ckeditor/ckeditor5-core/src/command';
 import toMap from '@ckeditor/ckeditor5-utils/src/tomap';
-import uid from '@ckeditor/ckeditor5-utils/src/uid';
-import { _getText } from './textwatcher';
+import { _addMentionAttributes } from './mentionediting';
 
 /**
  * The mention command.
@@ -50,7 +49,7 @@ export default class MentionCommand extends Command {
 	 * @param {Object} [options] Options for the executed command.
 	 * @param {Object|String} options.mention Mention object to insert. If passed a string it will be used to create a plain object with
 	 * name attribute equal to passed string.
-	 * @param {String} [options.marker='@'] The mention marker to insert.
+	 * @param {String} [options.text'] The text of inserted mention. Defaults to `mention` string or `mention.id` if object is passed.
 	 * @param {String} [options.range] Range to replace. Note that replace range might be shorter then inserted text with mention attribute.
 	 * @fires execute
 	 */
@@ -59,23 +58,20 @@ export default class MentionCommand extends Command {
 		const document = model.document;
 		const selection = document.selection;
 
-		const marker = options.marker || '@';
-
-		const mention = typeof options.mention == 'string' ? { name: options.mention } : options.mention;
+		const mentionData = typeof options.mention == 'string' ? { id: options.mention } : options.mention;
+		const mentionID = mentionData.id;
 
 		const range = options.range || selection.getFirstRange();
 
-		// Set internal attributes on mention object.
-		mention._id = uid();
-		mention._marker = marker;
-		mention._text = _getText( range );
+		const mentionText = options.text || mentionID;
+
+		const mention = _addMentionAttributes( { _text: mentionText, id: mentionID }, mentionData );
 
 		model.change( writer => {
 			const currentAttributes = toMap( selection.getAttributes() );
 			const attributesWithMention = new Map( currentAttributes.entries() );
-			attributesWithMention.set( 'mention', mention );
 
-			const mentionText = `${ marker }${ mention.name }`;
+			attributesWithMention.set( 'mention', mention );
 
 			// Replace range with a text with mention.
 			writer.remove( range );

+ 17 - 22
packages/ckeditor5-mention/src/mentionediting.js

@@ -65,6 +65,10 @@ export default class MentionEditing extends Plugin {
 	}
 }
 
+export function _addMentionAttributes( baseMentionData, data ) {
+	return Object.assign( { _uid: uid() }, baseMentionData, data || {} );
+}
+
 /**
  * Creates mention attribute value from provided view element and optional data.
  *
@@ -72,27 +76,26 @@ export default class MentionEditing extends Plugin {
  * {@link module:mention/mention~Mention#toWidgetAttribute `editor.plugins.get( 'Mention' ).toWidgetAttribute()`}.
  *
  * @protected
- * @param {module:engine/view/element~Element} viewElement
+ * @param {module:engine/view/element~Element} viewElementOrMention
  * @param {String|Object} [data] Mention data to be extended.
+ * @return {module:mention/mention~MentionAttribute}
  */
-export function _toMentionAttribute( viewElement, data ) {
-	const dataMention = viewElement.getAttribute( 'data-mention' );
+export function _toMentionAttribute( viewElementOrMention, data ) {
+	const dataMention = viewElementOrMention.getAttribute( 'data-mention' );
 
-	const { marker, id } = extractMarkerAndId( dataMention );
-
-	const textNode = viewElement.getChild( 0 );
+	const textNode = viewElementOrMention.getChild( 0 );
 
 	// Do not convert empty mentions.
 	if ( !textNode ) {
 		return;
 	}
 
-	return Object.assign( {
-		name: marker + id,
-		_text: textNode.data,
-		_marker: marker,
-		_id: uid()
-	}, data || {} );
+	const baseMentionData = {
+		id: dataMention,
+		_text: textNode.data
+	};
+
+	return _addMentionAttributes( baseMentionData, data );
 }
 
 // Creates mention element from mention data.
@@ -107,11 +110,11 @@ function createViewMentionElement( mention, viewWriter ) {
 
 	const attributes = {
 		class: 'mention',
-		'data-mention': mention.name
+		'data-mention': mention.id
 	};
 
 	const options = {
-		id: mention._id,
+		id: mention._uid,
 		priority: 20
 	};
 
@@ -247,11 +250,3 @@ function checkAndFix( textNode, writer ) {
 
 	return false;
 }
-
-function extractMarkerAndId( data ) {
-	const string = String( data );
-	const marker = string[ 0 ];
-	const id = string.slice( 1 );
-
-	return { id, marker };
-}

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

@@ -297,8 +297,8 @@ export default class MentionUI extends Plugin {
 				.then( feed => {
 					this._items.clear();
 
-					for ( const name of feed ) {
-						const item = typeof name != 'object' ? { name } : name;
+					for ( const feedItem of feed ) {
+						const item = typeof feedItem != 'object' ? { id: marker + feedItem, text: feedItem } : feedItem;
 
 						this._items.add( { item, marker } );
 					}
@@ -380,7 +380,7 @@ export default class MentionUI extends Plugin {
 		} else {
 			const buttonView = new ButtonView( editor.locale );
 
-			buttonView.label = item.name;
+			buttonView.label = item.text || item.id;
 			buttonView.withText = true;
 
 			view = buttonView;

+ 8 - 8
packages/ckeditor5-mention/tests/manual/mention-custom-renderer.js

@@ -32,9 +32,9 @@ ClassicEditor
 						const span = global.document.createElementNS( 'http://www.w3.org/1999/xhtml', 'span' );
 
 						span.classList.add( 'custom-item' );
-						span.id = `mention-list-item-id-${ item.id }`;
+						span.id = `mention-list-item-id-${ item.itemId }`;
 
-						span.innerHTML = `${ item.name } <span class="custom-item-username">@${ item.username }</span>`;
+						span.innerHTML = `${ item.name } <span class="custom-item-username">${ item.id }</span>`;
 
 						return span;
 					}
@@ -51,14 +51,14 @@ ClassicEditor
 
 function getFeed( feedText ) {
 	return Promise.resolve( [
-		{ id: '1', name: 'Barney Stinson', username: 'swarley' },
-		{ id: '2', name: 'Lily Aldrin', username: 'lilypad' },
-		{ id: '3', name: 'Marshall Eriksen', username: 'marshmallow' },
-		{ id: '4', name: 'Robin Scherbatsky', username: 'rsparkles' },
-		{ id: '5', name: 'Ted Mosby', username: 'tdog' }
+		{ itemId: '1', name: 'Barney Stinson', id: '@swarley' },
+		{ itemId: '2', name: 'Lily Aldrin', id: '@lilypad' },
+		{ itemId: '3', name: 'Marshall Eriksen', id: '@marshmallow' },
+		{ itemId: '4', name: 'Robin Scherbatsky', id: '@rsparkles' },
+		{ itemId: '5', name: 'Ted Mosby', id: '@tdog' }
 	].filter( item => {
 		const searchString = feedText.toLowerCase();
 
-		return item.name.toLowerCase().includes( searchString ) || item.username.toLowerCase().includes( searchString );
+		return item.name.toLowerCase().includes( searchString ) || item.id.toLowerCase().includes( searchString );
 	} ) );
 }

+ 18 - 8
packages/ckeditor5-mention/tests/manual/mention-custom-view.js

@@ -46,9 +46,9 @@ class CustomMentionAttributeView extends Plugin {
 
 				return viewWriter.createAttributeElement( 'a', {
 					class: 'mention',
-					'data-mention': modelAttributeValue.name,
+					'data-mention': modelAttributeValue.id,
 					'href': modelAttributeValue.link
-				}, { id: modelAttributeValue._id } );
+				}, { id: modelAttributeValue._uid } );
 			},
 			converterPriority: 'high'
 		} );
@@ -81,14 +81,24 @@ ClassicEditor
 
 function getFeed( feedText ) {
 	return [
-		{ id: '1', name: 'Barney Stinson', link: 'https://www.imdb.com/title/tt0460649/characters/nm0000439' },
-		{ id: '2', name: 'Lily Aldrin', link: 'https://www.imdb.com/title/tt0460649/characters/nm0004989' },
-		{ id: '3', name: 'Marshall Eriksen', link: 'https://www.imdb.com/title/tt0460649/characters/nm0781981' },
-		{ id: '4', name: 'Robin Scherbatsky', link: 'https://www.imdb.com/title/tt0460649/characters/nm1130627' },
-		{ id: '5', name: 'Ted Mosby', link: 'https://www.imdb.com/title/tt0460649/characters/nm1102140' }
+		{ itemId: '1', id: '@Barney Stinson', text: 'Barney Stinson', link: 'https://www.imdb.com/title/tt0460649/characters/nm0000439' },
+		{ itemId: '2', id: '@Lily Aldrin', text: 'Lily Aldrin', link: 'https://www.imdb.com/title/tt0460649/characters/nm0004989' },
+		{
+			itemId: '3',
+			id: '@Marshall Eriksen',
+			text: 'Marshall Eriksen',
+			link: 'https://www.imdb.com/title/tt0460649/characters/nm0781981'
+		},
+		{
+			itemId: '4',
+			id: '@Robin Scherbatsky',
+			text: 'Robin Scherbatsky',
+			link: 'https://www.imdb.com/title/tt0460649/characters/nm1130627'
+		},
+		{ itemId: '5', id: '@Ted Mosby', text: 'Ted Mosby', link: 'https://www.imdb.com/title/tt0460649/characters/nm1102140' }
 	].filter( item => {
 		const searchString = feedText.toLowerCase();
 
-		return item.name.toLowerCase().includes( searchString );
+		return item.id.toLowerCase().includes( searchString );
 	} );
 }

+ 6 - 6
packages/ckeditor5-mention/tests/mention.js

@@ -60,9 +60,9 @@ describe( 'Mention', () => {
 
 			const mentionAttribute = editor.plugins.get( 'Mention' ).toMentionAttribute( viewElement );
 
-			expect( mentionAttribute ).to.have.property( '_id' );
+			expect( mentionAttribute ).to.have.property( 'id', '@John' );
+			expect( mentionAttribute ).to.have.property( '_uid' );
 			expect( mentionAttribute ).to.have.property( '_text', 'John Doe' );
-			expect( mentionAttribute ).to.have.property( 'name', '@John' );
 		} );
 
 		it( 'should create mention attribute with provided attributes', () => {
@@ -74,10 +74,10 @@ describe( 'Mention', () => {
 
 			const mentionAttribute = editor.plugins.get( 'Mention' ).toMentionAttribute( viewElement, { foo: 'bar' } );
 
-			expect( mentionAttribute ).to.have.property( '_id' );
-			expect( mentionAttribute ).to.have.property( '_text', 'John Doe' );
-			expect( mentionAttribute ).to.have.property( 'name', '@John' );
+			expect( mentionAttribute ).to.have.property( 'id', '@John' );
 			expect( mentionAttribute ).to.have.property( 'foo', 'bar' );
+			expect( mentionAttribute ).to.have.property( '_uid' );
+			expect( mentionAttribute ).to.have.property( '_text', 'John Doe' );
 		} );
 
 		it( 'should return undefined if Element has no text node', () => {
@@ -85,7 +85,7 @@ describe( 'Mention', () => {
 				'data-mention': '@John'
 			} );
 
-			const mentionAttribute = editor.plugins.get( 'Mention' ).toMentionAttribute( viewElement, { foo: 'bar' } );
+			const mentionAttribute = editor.plugins.get( 'Mention' ).toMentionAttribute( viewElement );
 
 			expect( mentionAttribute ).to.be.undefined;
 		} );

+ 30 - 17
packages/ckeditor5-mention/tests/mentioncommand.js

@@ -54,26 +54,40 @@ describe( 'MentionCommand', () => {
 	} );
 
 	describe( 'execute()', () => {
-		it( 'inserts mention attribute for given range', () => {
+		it( 'inserts mention object if mention was passed as string', () => {
 			setData( model, '<paragraph>foo @Jo[]bar</paragraph>' );
 
 			command.execute( {
-				mention: { name: 'John' },
+				mention: '@John',
 				range: model.createRange( selection.focus.getShiftedBy( -3 ), selection.focus )
 			} );
 
-			assertMention( doc.getRoot().getChild( 0 ).getChild( 1 ), '@', 'John' );
+			assertMention( doc.getRoot().getChild( 0 ).getChild( 1 ), '@John' );
 		} );
 
-		it( 'inserts mention object if mention was passed as string', () => {
+		it( 'inserts mention object with data if mention was passed as object', () => {
+			setData( model, '<paragraph>foo @Jo[]bar</paragraph>' );
+
+			command.execute( {
+				mention: { id: '@John', userId: '123456' },
+				range: model.createRange( selection.focus.getShiftedBy( -3 ), selection.focus )
+			} );
+
+			const mentionNode = doc.getRoot().getChild( 0 ).getChild( 1 );
+			assertMention( mentionNode, '@John' );
+			expect( mentionNode.getAttribute( 'mention' ) ).to.have.property( 'userId', '123456' );
+		} );
+
+		it( 'inserts options.text as mention text', () => {
 			setData( model, '<paragraph>foo @Jo[]bar</paragraph>' );
 
 			command.execute( {
-				mention: 'John',
+				mention: '@John',
+				text: '@John Doe',
 				range: model.createRange( selection.focus.getShiftedBy( -3 ), selection.focus )
 			} );
 
-			assertMention( doc.getRoot().getChild( 0 ).getChild( 1 ), '@', 'John' );
+			assertMention( doc.getRoot().getChild( 0 ).getChild( 1 ), '@John' );
 		} );
 
 		it( 'inserts mention attribute with passed marker for given range', () => {
@@ -83,22 +97,21 @@ describe( 'MentionCommand', () => {
 			const start = end.getShiftedBy( -3 );
 
 			command.execute( {
-				mention: { name: 'John' },
+				mention: '#John',
 				range: model.createRange( start, end ),
-				marker: '#'
 			} );
 
-			assertMention( doc.getRoot().getChild( 0 ).getChild( 1 ), '#', 'John' );
+			assertMention( doc.getRoot().getChild( 0 ).getChild( 1 ), '#John' );
 		} );
 
 		it( 'inserts mention attribute at current selection if no range was passed', () => {
 			setData( model, '<paragraph>foo []bar</paragraph>' );
 
 			command.execute( {
-				mention: { name: 'John' }
+				mention: '@John'
 			} );
 
-			assertMention( doc.getRoot().getChild( 0 ).getChild( 1 ), '@', 'John' );
+			assertMention( doc.getRoot().getChild( 0 ).getChild( 1 ), '@John' );
 		} );
 
 		it( 'should set also other styles in inserted text', () => {
@@ -107,20 +120,20 @@ describe( 'MentionCommand', () => {
 			setData( model, '<paragraph><$text bold="true">foo@John[]bar</$text></paragraph>' );
 
 			command.execute( {
-				mention: { name: 'John' },
+				mention: '@John',
 				range: model.createRange( selection.focus.getShiftedBy( -5 ), selection.focus )
 			} );
 
 			const textNode = doc.getRoot().getChild( 0 ).getChild( 1 );
-			assertMention( textNode, '@', 'John' );
+			assertMention( textNode, '@John' );
 			expect( textNode.hasAttribute( 'bold' ) ).to.be.true;
 		} );
 	} );
 
-	function assertMention( textNode, marker, name ) {
+	function assertMention( textNode, id ) {
 		expect( textNode.hasAttribute( 'mention' ) ).to.be.true;
-		expect( textNode.getAttribute( 'mention' ) ).to.have.property( '_id' );
-		expect( textNode.getAttribute( 'mention' ) ).to.have.property( '_marker', marker );
-		expect( textNode.getAttribute( 'mention' ) ).to.have.property( 'name', name );
+		expect( textNode.getAttribute( 'mention' ) ).to.have.property( '_uid' );
+		expect( textNode.getAttribute( 'mention' ) ).to.have.property( '_text', textNode.data );
+		expect( textNode.getAttribute( 'mention' ) ).to.have.property( 'id', id );
 	}
 } );

+ 11 - 14
packages/ckeditor5-mention/tests/mentionediting.js

@@ -74,9 +74,9 @@ describe( 'MentionEditing', () => {
 
 			expect( textNode ).to.not.be.null;
 			expect( textNode.hasAttribute( 'mention' ) ).to.be.true;
-			expect( textNode.getAttribute( 'mention' ) ).to.have.property( '_id' );
-			expect( textNode.getAttribute( 'mention' ) ).to.have.property( '_marker', '@' );
-			expect( textNode.getAttribute( 'mention' ) ).to.have.property( 'name', '@John' );
+			expect( textNode.getAttribute( 'mention' ) ).to.have.property( 'id', '@John' );
+			expect( textNode.getAttribute( 'mention' ) ).to.have.property( '_text', '@John' );
+			expect( textNode.getAttribute( 'mention' ) ).to.have.property( '_uid' );
 
 			const expectedView = '<p>foo <span class="mention" data-mention="@John">@John</span> bar</p>';
 
@@ -102,8 +102,8 @@ describe( 'MentionEditing', () => {
 			assertTextNode( paragraph.getChild( 0 ) );
 			assertTextNode( paragraph.getChild( 1 ) );
 
-			const firstMentionId = paragraph.getChild( 0 ).getAttribute( 'mention' )._id;
-			const secondMentionId = paragraph.getChild( 1 ).getAttribute( 'mention' )._id;
+			const firstMentionId = paragraph.getChild( 0 ).getAttribute( 'mention' )._uid;
+			const secondMentionId = paragraph.getChild( 1 ).getAttribute( 'mention' )._uid;
 
 			expect( firstMentionId ).to.not.equal( secondMentionId );
 
@@ -116,10 +116,9 @@ describe( 'MentionEditing', () => {
 			function assertTextNode( textNode ) {
 				expect( textNode ).to.not.be.null;
 				expect( textNode.hasAttribute( 'mention' ) ).to.be.true;
-				expect( textNode.getAttribute( 'mention' ) ).to.have.property( '_id' );
-				expect( textNode.getAttribute( 'mention' ) ).to.have.property( '_marker', '@' );
-				expect( textNode.getAttribute( 'mention' ) ).to.have.property( 'name', '@John' );
+				expect( textNode.getAttribute( 'mention' ) ).to.have.property( 'id', '@John' );
 				expect( textNode.getAttribute( 'mention' ) ).to.have.property( '_text', '@John' );
+				expect( textNode.getAttribute( 'mention' ) ).to.have.property( '_uid' );
 			}
 		} );
 
@@ -130,10 +129,9 @@ describe( 'MentionEditing', () => {
 
 			expect( textNode ).to.not.be.null;
 			expect( textNode.hasAttribute( 'mention' ) ).to.be.true;
-			expect( textNode.getAttribute( 'mention' ) ).to.have.property( '_id' );
-			expect( textNode.getAttribute( 'mention' ) ).to.have.property( '_marker', '@' );
+			expect( textNode.getAttribute( 'mention' ) ).to.have.property( 'id', '@John' );
 			expect( textNode.getAttribute( 'mention' ) ).to.have.property( '_text', '@Jo' );
-			expect( textNode.getAttribute( 'mention' ) ).to.have.property( 'name', '@John' );
+			expect( textNode.getAttribute( 'mention' ) ).to.have.property( '_uid' );
 
 			const expectedView = '<p><span class="mention" data-mention="@John">@Jo</span></p>';
 
@@ -207,10 +205,9 @@ describe( 'MentionEditing', () => {
 
 			expect( textNode ).to.not.be.null;
 			expect( textNode.hasAttribute( 'mention' ) ).to.be.true;
-			expect( textNode.getAttribute( 'mention' ) ).to.have.property( '_id' );
-			expect( textNode.getAttribute( 'mention' ) ).to.have.property( '_marker', '@' );
-			expect( textNode.getAttribute( 'mention' ) ).to.have.property( 'name', '@John' );
+			expect( textNode.getAttribute( 'mention' ) ).to.have.property( 'id', '@John' );
 			expect( textNode.getAttribute( 'mention' ) ).to.have.property( '_text', '@John' );
+			expect( textNode.getAttribute( 'mention' ) ).to.have.property( '_uid' );
 
 			model.change( writer => {
 				const paragraph = doc.getRoot().getChild( 0 );

+ 41 - 5
packages/ckeditor5-mention/tests/mentionui.js

@@ -405,7 +405,7 @@ describe( 'MentionUI', () => {
 			it( 'should not show panel when selection is inside a mention', () => {
 				setData( model, '<paragraph>foo [@John] bar</paragraph>' );
 				model.change( writer => {
-					writer.setAttribute( 'mention', { name: 'John', _marker: '@', _id: 1234 }, doc.selection.getFirstRange() );
+					writer.setAttribute( 'mention', { id: '@John', _uid: 1234 }, doc.selection.getFirstRange() );
 				} );
 
 				model.change( writer => {
@@ -422,7 +422,7 @@ describe( 'MentionUI', () => {
 			it( 'should not show panel when selection is at the end of a mention', () => {
 				setData( model, '<paragraph>foo [@John] bar</paragraph>' );
 				model.change( writer => {
-					writer.setAttribute( 'mention', { name: 'John', _marker: '@', _id: 1234 }, doc.selection.getFirstRange() );
+					writer.setAttribute( 'mention', { id: '@John', _uid: 1234 }, doc.selection.getFirstRange() );
 				} );
 
 				model.change( writer => {
@@ -462,7 +462,7 @@ describe( 'MentionUI', () => {
 			it( 'should not show panel when selection is after existing mention', () => {
 				setData( model, '<paragraph>foo [@John] bar[]</paragraph>' );
 				model.change( writer => {
-					writer.setAttribute( 'mention', { name: 'John', _marker: '@', _id: 1234 }, doc.selection.getFirstRange() );
+					writer.setAttribute( 'mention', { id: '@John', _uid: 1234 }, doc.selection.getFirstRange() );
 				} );
 
 				return waitForDebounce()
@@ -760,7 +760,7 @@ describe( 'MentionUI', () => {
 		} );
 
 		describe( 'default list item', () => {
-			const feedItems = staticConfig.feeds[ 0 ].feed.map( name => ( { name } ) );
+			const feedItems = staticConfig.feeds[ 0 ].feed.map( text => ( { text, id: `@${ text }` } ) );
 
 			beforeEach( () => {
 				return createClassicTestEditor( staticConfig );
@@ -845,6 +845,42 @@ describe( 'MentionUI', () => {
 			} );
 		} );
 
+		describe( 'default list item with custom feed', () => {
+			const issues = [
+				{ id: '@Ted' },
+				{ id: '@Barney' },
+				{ id: '@Robin' },
+				{ id: '@Lily' },
+				{ id: '@Marhsal' }
+			];
+
+			beforeEach( () => {
+				return createClassicTestEditor( {
+					feeds: [
+						{
+							marker: '@',
+							feed: feedText => issues.filter( issue => issue.id.includes( feedText ) )
+						}
+					]
+				} );
+			} );
+
+			it( 'should show panel for matched marker', () => {
+				setData( model, '<paragraph>foo []</paragraph>' );
+
+				model.change( writer => {
+					writer.insertText( '@', doc.selection.getFirstPosition() );
+				} );
+
+				return waitForDebounce()
+					.then( () => {
+						expect( panelView.isVisible ).to.be.true;
+						expect( editor.model.markers.has( 'mention' ) ).to.be.true;
+						expect( listView.items ).to.have.length( 5 );
+					} );
+			} );
+		} );
+
 		describe( 'custom list item', () => {
 			const issues = [
 				{ id: '1002', title: 'Some bug in editor.' },
@@ -1106,7 +1142,7 @@ describe( 'MentionUI', () => {
 
 					const commandOptions = spy.getCall( 0 ).args[ 0 ];
 
-					assertCommandOptions( commandOptions, '@', { name: 'Barney' } );
+					assertCommandOptions( commandOptions, '@', { id: '@Barney', text: 'Barney' } );
 
 					const start = model.createPositionAt( doc.getRoot().getChild( 0 ), 4 );
 					const expectedRange = model.createRange( start, start.getShiftedBy( 1 ) );