8
0
Просмотр исходного кода

Use string result of mention feed itemRenderer() as label for mentions auto-complete list.

Maciej Gołaszewski 6 лет назад
Родитель
Сommit
6805a56b19

+ 12 - 4
packages/ckeditor5-mention/src/mentionui.js

@@ -209,6 +209,7 @@ export default class MentionUI extends Plugin {
 
 			editor.execute( 'mention', {
 				mention: item,
+				text: item.text,
 				marker,
 				range
 			} );
@@ -370,17 +371,24 @@ export default class MentionUI extends Plugin {
 		const editor = this.editor;
 
 		let view;
+		let label = item.id;
 
 		const renderer = this._getItemRenderer( marker );
 
 		if ( renderer ) {
-			const domNode = renderer( item );
+			const renderResult = renderer( item );
 
-			view = new DomWrapperView( editor.locale, domNode );
-		} else {
+			if ( typeof renderResult != 'string' ) {
+				view = new DomWrapperView( editor.locale, renderResult );
+			} else {
+				label = renderResult;
+			}
+		}
+
+		if ( !view ) {
 			const buttonView = new ButtonView( editor.locale );
 
-			buttonView.label = item.text || item.id;
+			buttonView.label = label;
 			buttonView.withText = true;
 
 			view = buttonView;

+ 2 - 2
packages/ckeditor5-mention/tests/manual/mention.html

@@ -1,4 +1,4 @@
 <div id="editor">
-	<p>Hello <span class="mention" data-mention="@Ted">@Ted</span>.</p>
-	<p>Hello <span class="mention" data-mention="@Ted">@Ted</span><span class="mention" data-mention="@Ted">@Ted</span>.</p>
+	<p>Hello <span class="mention" data-mention="@Ted">Ted</span>.</p>
+	<p>Hello <span class="mention" data-mention="@Ted">Ted</span><span class="mention" data-mention="@Ted">Ted</span>.</p>
 </div>

+ 7 - 1
packages/ckeditor5-mention/tests/manual/mention.js

@@ -26,7 +26,13 @@ ClassicEditor
 		],
 		mention: {
 			feeds: [
-				{ feed: [ 'Barney', 'Lily', 'Marshall', 'Robin', 'Ted' ] },
+				{
+					feed: [ 'Barney', 'Lily', 'Marshall', 'Robin', 'Ted' ],
+					itemRenderer: item => {
+						console.log( item );
+						return item.text;
+					}
+				},
 				{
 					marker: '#',
 					feed: [