瀏覽代碼

Update mention ui display algorithm.

Maciej Gołaszewski 6 年之前
父節點
當前提交
8a930ddcca

+ 6 - 3
packages/ckeditor5-mention/dev-server/index.js

@@ -9,6 +9,7 @@ const http = require( 'http' );
 const fs = require( 'fs' );
 const querystring = require( 'querystring' );
 const url = require( 'url' );
+const { upperFirst } = require( 'lodash' );
 
 const hostname = '127.0.0.1';
 const port = 3000;
@@ -17,18 +18,20 @@ const server = http.createServer( function( req, res ) {
 	res.statusCode = 200;
 	res.setHeader( 'Content-Type', 'application/json' );
 
-	const { search } = querystring.parse( url.parse( req.url ).query );
+	const { search } = querystring.parse( url.parse( req.url ).query.toLowerCase() );
 
 	readEntries( getTimeout() )
 		.then( entries => entries
 			.map( ( { picture, name, login } ) => ( {
 				id: `@${ login.username }`,
 				username: login.username,
-				fullName: `${ name.first } ${ name.last }`,
+				fullName: `${ upperFirst( name.first ) } ${ upperFirst( name.last ) }`,
 				thumbnail: picture.thumbnail
 			} ) )
 			.sort( ( a, b ) => a.username.localeCompare( b.username ) )
-			.filter( entry => entry.fullName.includes( search ) || entry.username.includes( search ) ) )
+			.filter( entry => entry.fullName.toLowerCase().includes( search ) || entry.username.toLowerCase().includes( search ) )
+			.slice( 0, 10 )
+		)
 		.then( entries => {
 			res.setHeader( 'Access-Control-Allow-Origin', '*' );
 			res.setHeader( 'Access-Control-Allow-Headers', 'Origin, X-Requested-With, Content-Type, Accept' );

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

@@ -261,7 +261,25 @@ export default class MentionUI extends Plugin {
 	_getFeed( marker, feedText ) {
 		const { feedCallback } = this._mentionsConfigurations.get( marker );
 
-		return Promise.resolve().then( () => feedCallback( feedText ) );
+		this._lastRequested = feedText;
+
+		return new Promise( ( resolve, reject ) => {
+			const response = feedCallback( feedText );
+
+			const isAsynchronous = response instanceof Promise;
+
+			if ( !isAsynchronous ) {
+				resolve( response );
+			}
+
+			return response.then( response => {
+				if ( this._lastRequested == feedText ) {
+					resolve( response );
+				} else {
+					reject( `Feed discarded: ${ feedText }` );
+				}
+			} );
+		} );
 	}
 
 	/**
@@ -318,7 +336,19 @@ export default class MentionUI extends Plugin {
 			}
 
 			this._getFeed( marker, feedText )
+				.catch( () => {
+					// Discard error.
+				} )
 				.then( feed => {
+					if ( !feed ) {
+						return;
+					}
+
+					if ( !this.editor.model.markers.has( 'mention' ) ) {
+						// already hidden
+						return;
+					}
+
 					this._items.clear();
 
 					for ( const feedItem of feed ) {
@@ -326,7 +356,6 @@ export default class MentionUI extends Plugin {
 
 						this._items.add( { item, marker } );
 					}
-
 					if ( this._items.length ) {
 						this._showPanel( mentionMarker );
 					} else {
@@ -555,7 +584,7 @@ function createTextMatcher( marker ) {
 	};
 }
 
-// Default feed callback
+// Default feed callback.
 function createFeedCallback( feedItems ) {
 	return feedText => {
 		const filteredItems = feedItems
@@ -570,7 +599,7 @@ function createFeedCallback( feedItems ) {
 			// Do not return more than 10 items.
 			.slice( 0, 10 );
 
-		return Promise.resolve( filteredItems );
+		return filteredItems;
 	};
 }
 

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

@@ -268,7 +268,7 @@ describe( 'MentionUI', () => {
 		} );
 	} );
 
-	describe( 'typing integration', () => {
+	describe.only( 'typing integration', () => {
 		it( 'should show panel for matched marker after typing minimum characters', () => {
 			return createClassicTestEditor( { feeds: [ Object.assign( { minimumCharacters: 2 }, staticConfig.feeds[ 0 ] ) ] } )
 				.then( () => {