-
Notifications
You must be signed in to change notification settings - Fork 3.6k
/
mention-custom-renderer.js
79 lines (71 loc) · 2.46 KB
/
mention-custom-renderer.js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
/**
* @license Copyright (c) 2003-2023, CKSource Holding sp. z o.o. All rights reserved.
* For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license
*/
/* global console, window, document */
import ClassicEditor from '@ckeditor/ckeditor5-editor-classic/src/classiceditor';
import Mention from '../../src/mention';
import Underline from '@ckeditor/ckeditor5-basic-styles/src/underline';
import ArticlePluginSet from '@ckeditor/ckeditor5-core/tests/_utils/articlepluginset';
import Font from '@ckeditor/ckeditor5-font/src/font';
ClassicEditor
.create( document.querySelector( '#editor' ), {
image: { toolbar: [ 'toggleImageCaption', 'imageTextAlternative' ] },
plugins: [ ArticlePluginSet, Underline, Font, Mention ],
toolbar: [
'heading',
'|', 'bulletedList', 'numberedList', 'blockQuote',
'|', 'bold', 'italic', 'underline', 'link',
'|', 'fontFamily', 'fontSize', 'fontColor', 'fontBackgroundColor',
'|', 'insertTable',
'|', 'undo', 'redo'
],
table: {
contentToolbar: [ 'tableColumn', 'tableRow', 'mergeTableCells' ],
tableToolbar: [ 'bold', 'italic' ]
},
mention: {
feeds: [
{
marker: '@',
feed: getFeed,
itemRenderer: item => {
const span = document.createElement( 'span' );
span.classList.add( 'custom-item' );
span.id = `mention-list-item-id-${ item.itemId }`;
span.innerHTML = `${ item.name } <span class="custom-item-username">${ item.id }</span>`;
return span;
}
},
{
marker: '#',
feed: [
{ id: '#1002', text: 'Some bug in editor' },
{ id: '#1003', text: 'Introduce this feature' },
{ id: '#1004', text: 'Missing docs' },
{ id: '#1005', text: 'Another bug' },
{ id: '#1006', text: 'More bugs' }
],
itemRenderer: item => `Issue ${ item.id }: ${ item.text }`
}
]
}
} )
.then( editor => {
window.editor = editor;
} )
.catch( err => {
console.error( err.stack );
} );
function getFeed( feedText ) {
return Promise.resolve( [
{ itemId: '1', name: 'Barney Stinson', id: '@swarley' },
{ itemId: '2', name: 'Lily Aldrin', id: '@lilypad' },
{ itemId: '3', name: 'Marshall Eriksen', id: '@marshmallow' },
{ itemId: '4', name: 'Robin Scherbatsky', id: '@rsparkles' },
{ itemId: '5', name: 'Ted Mosby', id: '@tdog' }
].filter( item => {
const searchString = feedText.toLowerCase();
return item.name.toLowerCase().includes( searchString ) || item.id.toLowerCase().includes( searchString );
} ) );
}