8
0

mention-asynchronous.js 2.4 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980818283848586878889909192
  1. /**
  2. * @license Copyright (c) 2003-2020, 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. table: {
  27. contentToolbar: [ 'tableColumn', 'tableRow', 'mergeTableCells' ],
  28. tableToolbar: [ 'bold', 'italic' ]
  29. },
  30. mention: {
  31. feeds: [
  32. {
  33. marker: '@',
  34. feed: getFeed,
  35. itemRenderer: ( { fullName, id, thumbnail } ) => {
  36. const div = document.createElement( 'div' );
  37. div.classList.add( 'custom' );
  38. div.classList.add( 'mention__item' );
  39. div.innerHTML =
  40. `<img class="mention__item__thumbnail" src="${ thumbnail }">` +
  41. '<div class="mention__item__body">' +
  42. `<span class="mention__item__full-name">${ fullName }</span>` +
  43. `<span class="mention__item__username">${ id }</span>` +
  44. '</div>';
  45. return div;
  46. }
  47. }
  48. ]
  49. }
  50. } )
  51. .then( editor => {
  52. window.editor = editor;
  53. } )
  54. .catch( err => {
  55. console.error( err.stack );
  56. } );
  57. // Simplest cache:
  58. const cache = new Map();
  59. function getFeed( text ) {
  60. const useCache = document.querySelector( '#cache-control' ).checked;
  61. if ( useCache && cache.has( text ) ) {
  62. console.log( `Loading from cache for: "${ text }".` );
  63. return cache.get( text );
  64. }
  65. const fetchOptions = {
  66. method: 'get',
  67. mode: 'cors'
  68. };
  69. return fetch( `http://localhost:3000?search=${ text }`, fetchOptions )
  70. .then( response => {
  71. const feedItems = response.json();
  72. if ( useCache ) {
  73. cache.set( text, feedItems );
  74. }
  75. return feedItems;
  76. } );
  77. }