mention-asynchronous.js 2.1 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576777879808182
  1. /**
  2. * @license Copyright (c) 2003-2019, CKSource - Frederico Knabben. All rights reserved.
  3. * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license
  4. */
  5. /* global console, window, fetch, document */
  6. import global from '@ckeditor/ckeditor5-utils/src/dom/global';
  7. import ClassicEditor from '@ckeditor/ckeditor5-editor-classic/src/classiceditor';
  8. import Mention from '../../src/mention';
  9. import Underline from '@ckeditor/ckeditor5-basic-styles/src/underline';
  10. import ArticlePluginSet from '@ckeditor/ckeditor5-core/tests/_utils/articlepluginset';
  11. import Font from '@ckeditor/ckeditor5-font/src/font';
  12. ClassicEditor
  13. .create( global.document.querySelector( '#editor' ), {
  14. plugins: [ ArticlePluginSet, Underline, Font, Mention ],
  15. toolbar: [
  16. 'heading',
  17. '|', 'bulletedList', 'numberedList', 'blockQuote',
  18. '|', 'bold', 'italic', 'underline', 'link',
  19. '|', 'fontFamily', 'fontSize', 'fontColor', 'fontBackgroundColor',
  20. '|', 'insertTable',
  21. '|', 'undo', 'redo'
  22. ],
  23. image: {
  24. toolbar: [ 'imageStyle:full', 'imageStyle:side', '|', 'imageTextAlternative' ]
  25. },
  26. mention: {
  27. feeds: [
  28. {
  29. marker: '@',
  30. feed: getFeed,
  31. itemRenderer: ( { fullName, id, thumbnail } ) => {
  32. const div = document.createElement( 'div' );
  33. div.classList.add( 'custom' );
  34. div.classList.add( 'mention__item' );
  35. div.innerHTML =
  36. `<img class="mention__item__thumbnail" src="${ thumbnail }">` +
  37. '<div class="mention__item__body">' +
  38. `<span class="mention__item__full-name">${ fullName }</span>` +
  39. `<span class="mention__item__username">${ id }</span>` +
  40. '</div>';
  41. return div;
  42. }
  43. }
  44. ]
  45. }
  46. } )
  47. .then( editor => {
  48. window.editor = editor;
  49. } )
  50. .catch( err => {
  51. console.error( err.stack );
  52. } );
  53. // Simplest cache:
  54. const cache = new Map();
  55. function getFeed( text ) {
  56. if ( cache.has( text ) ) {
  57. return cache.get( text );
  58. }
  59. const fetchOptions = {
  60. method: 'get',
  61. mode: 'cors'
  62. };
  63. return fetch( `http://localhost:3000?search=${ text }`, fetchOptions )
  64. .then( response => {
  65. const feedItems = response.json();
  66. cache.set( text, feedItems );
  67. return feedItems;
  68. } );
  69. }