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

Enhance custom marker conversion example.

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

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

@@ -11,7 +11,10 @@ import Plugin from '@ckeditor/ckeditor5-core/src/plugin';
 import Command from '@ckeditor/ckeditor5-core/src/command';
 import Command from '@ckeditor/ckeditor5-core/src/command';
 
 
 export function createMentionMarkerId( someString ) {
 export function createMentionMarkerId( someString ) {
-	return 'mention:' + someString.toLowerCase().replace( ' ', '-' ) + parseInt( Math.random() * 10000 );
+	const randId = parseInt( Math.random() * 10000 );
+	const normalizedString = someString.toLowerCase().replace( ' ', '-' );
+
+	return `mention:${ normalizedString }:${ randId }`;
 }
 }
 
 
 class MentionCommand extends Command {
 class MentionCommand extends Command {

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

@@ -178,7 +178,7 @@ export default class MentionUI extends Plugin {
 	_getFeed( marker, feedText ) {
 	_getFeed( marker, feedText ) {
 		const { feedCallback } = this._mentionsConfigurations.get( marker );
 		const { feedCallback } = this._mentionsConfigurations.get( marker );
 
 
-		return feedCallback( feedText );
+		return Promise.resolve().then( () => feedCallback( feedText ) );
 	}
 	}
 
 
 	_addTextWatcher( marker ) {
 	_addTextWatcher( marker ) {

+ 19 - 7
packages/ckeditor5-mention/tests/manual/mention-custom-view.js

@@ -149,7 +149,8 @@ class CustomMentionMarkerView extends Plugin {
 
 
 		editor.conversion.for( 'downcast' ).add( dispatcher => {
 		editor.conversion.for( 'downcast' ).add( dispatcher => {
 			dispatcher.on( 'addMarker:mention', ( evt, data, conversionApi ) => {
 			dispatcher.on( 'addMarker:mention', ( evt, data, conversionApi ) => {
-				const { id } = data.markerName.split( ':' )[ 1 ];
+				const label = data.markerName.split( ':' )[ 1 ];
+				const id = data.markerName.split( ':' )[ 2 ];
 
 
 				if ( !conversionApi.consumable.consume( data.item, evt.name ) ) {
 				if ( !conversionApi.consumable.consume( data.item, evt.name ) ) {
 					return;
 					return;
@@ -157,11 +158,22 @@ class CustomMentionMarkerView extends Plugin {
 
 
 				const viewWriter = conversionApi.writer;
 				const viewWriter = conversionApi.writer;
 
 
-				// OMG I just wanted to change `<span>` to `<a>`...
-				const viewElement = viewWriter.createAttributeElement( 'a', {
+				const item = getFeed( label.replace( '-', ' ' ) )[ 0 ];
+
+				const attributes = {
 					class: [ 'mention' ],
 					class: [ 'mention' ],
-					'data-mention': id
-				} );
+					'data-mention': label,
+					id
+				};
+
+				if ( item ) {
+					attributes.href = item.link;
+					attributes.title = item.label;
+				}
+
+				// OMG I just wanted to change `<span>` to `<a>`...
+				const viewElement = viewWriter.createAttributeElement( 'a', attributes );
+
 				const viewSelection = viewWriter.document.selection;
 				const viewSelection = viewWriter.document.selection;
 
 
 				if ( data.item instanceof ModelSelection || data.item instanceof DocumentSelection ) {
 				if ( data.item instanceof ModelSelection || data.item instanceof DocumentSelection ) {
@@ -218,7 +230,7 @@ ClassicEditor
 	} );
 	} );
 
 
 function getFeed( feedText ) {
 function getFeed( feedText ) {
-	return Promise.resolve( [
+	return [
 		{ id: '1', label: 'Barney Stinson', link: 'https://www.imdb.com/title/tt0460649/characters/nm0000439' },
 		{ id: '1', label: 'Barney Stinson', link: 'https://www.imdb.com/title/tt0460649/characters/nm0000439' },
 		{ id: '2', label: 'Lily Aldrin', link: 'https://www.imdb.com/title/tt0460649/characters/nm0004989' },
 		{ id: '2', label: 'Lily Aldrin', link: 'https://www.imdb.com/title/tt0460649/characters/nm0004989' },
 		{ id: '3', label: 'Marshall Eriksen', link: 'https://www.imdb.com/title/tt0460649/characters/nm0781981' },
 		{ id: '3', label: 'Marshall Eriksen', link: 'https://www.imdb.com/title/tt0460649/characters/nm0781981' },
@@ -228,5 +240,5 @@ function getFeed( feedText ) {
 		const searchString = feedText.toLowerCase();
 		const searchString = feedText.toLowerCase();
 
 
 		return item.label.toLowerCase().includes( searchString );
 		return item.label.toLowerCase().includes( searchString );
-	} ) );
+	} );
 }
 }