8
0
Pārlūkot izejas kodu

Update the manual test visual appearance and add cache mechanism.

Maciej Gołaszewski 6 gadi atpakaļ
vecāks
revīzija
a345c6316a

+ 24 - 7
packages/ckeditor5-mention/tests/manual/mention-asynchronous.html

@@ -13,20 +13,37 @@
 </div>
 
 <style>
-	.custom-item {
-		display: block;
-		padding: 1em;
+	.ck-mentions .custom.mention__item {
+		display: flex;
+		flex-direction: row;
+		width: 220px;
 	}
 
-	.custom-item.ck-on {
-		color: white;
+	.mention__item .mention__item__thumbnail {
+		/* Prevent images re-draw */
+		width: 48px;
+		height: 48px;
+		border-radius: 100%;
+		border: 2px solid #fff;
 	}
 
-	.custom-item .custom-item-username {
+	.mention__item .mention__item__body {
+		flex: 1;
+		margin-left: 1em;
+		display: flex;
+		flex-direction: column;
+	}
+
+	.mention__item .mention__item__username {
+		float: left;
 		color: #666;
 	}
 
-	.custom-item.ck-on .custom-item-username{
+	.mention__item.ck-on .mention__item__username {
 		color: #ddd;
 	}
+
+	.mention__item.ck-on .mention__item__full-name {
+		float: left;
+	}
 </style>

+ 24 - 5
packages/ckeditor5-mention/tests/manual/mention-asynchronous.js

@@ -33,13 +33,19 @@ ClassicEditor
 					marker: '@',
 					feed: getFeed,
 					itemRenderer: ( { fullName, id, thumbnail } ) => {
-						const span = document.createElement( 'span' );
+						const div = document.createElement( 'div' );
 
-						span.classList.add( 'custom-item' );
+						div.classList.add( 'custom' );
+						div.classList.add( 'mention__item' );
 
-						span.innerHTML = `<img src="${ thumbnail }"> ${ fullName } <span class="custom-item-username">${ id }</span>`;
+						div.innerHTML =
+							`<img class="mention__item__thumbnail" src="${ thumbnail }">` +
+							'<div class="mention__item__body">' +
+								`<span class="mention__item__full-name">${ fullName }</span>` +
+								`<span class="mention__item__username">${ id }</span>` +
+							'</div>';
 
-						return span;
+						return div;
 					}
 				}
 			]
@@ -52,12 +58,25 @@ ClassicEditor
 		console.error( err.stack );
 	} );
 
+// Simplest cache:
+const cache = new Map();
+
 function getFeed( text ) {
+	if ( cache.has( text ) ) {
+		return cache.get( text );
+	}
+
 	const fetchOptions = {
 		method: 'get',
 		mode: 'cors'
 	};
 
 	return fetch( `http://localhost:3000?search=${ text }`, fetchOptions )
-		.then( response => response.json() );
+		.then( response => {
+			const feedItems = response.json();
+
+			cache.set( text, feedItems );
+
+			return feedItems;
+		} );
 }