@ckeditor/ckeditor5-mention 40.0.0 → 40.2.0

Sign up to get free protection for your applications and to get access to all the features.
@@ -1,265 +1,265 @@
1
- /**
2
- * @license Copyright (c) 2003-2023, CKSource Holding sp. z o.o. All rights reserved.
3
- * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license
4
- */
5
- /**
6
- * @module mention/mentionconfig
7
- */
8
- /**
9
- * The configuration of the mention feature.
10
- *
11
- * Read more about {@glink features/mentions#configuration configuring the mention feature}.
12
- *
13
- * ```ts
14
- * ClassicEditor
15
- * .create( editorElement, {
16
- * mention: ... // Mention feature options.
17
- * } )
18
- * .then( ... )
19
- * .catch( ... );
20
- * ```
21
- *
22
- * See {@link module:core/editor/editorconfig~EditorConfig all editor options}.
23
- */
24
- export interface MentionConfig {
25
- /**
26
- * The list of mention feeds supported by the editor.
27
- *
28
- * ```ts
29
- * ClassicEditor
30
- * .create( editorElement, {
31
- * plugins: [ Mention, ... ],
32
- * mention: {
33
- * feeds: [
34
- * {
35
- * marker: '@',
36
- * feed: [ '@Barney', '@Lily', '@Marshall', '@Robin', '@Ted' ]
37
- * },
38
- * ...
39
- * ]
40
- * }
41
- * } )
42
- * .then( ... )
43
- * .catch( ... );
44
- * ```
45
- *
46
- * You can provide many mention feeds but they must use different `marker`s.
47
- * For example, you can use `'@'` to autocomplete people and `'#'` to autocomplete tags.
48
- */
49
- feeds: Array<MentionFeed>;
50
- /**
51
- * The configuration of the custom commit keys supported by the editor.
52
- *
53
- * ```ts
54
- * ClassicEditor
55
- * .create( editorElement, {
56
- * plugins: [ Mention, ... ],
57
- * mention: {
58
- * // [ Enter, Space ]
59
- * commitKeys: [ 13, 32 ]
60
- * feeds: [
61
- * { ... }
62
- * ...
63
- * ]
64
- * }
65
- * } )
66
- * .then( ... )
67
- * .catch( ... );
68
- * ```
69
- *
70
- * Custom commit keys configuration allows you to customize how users will confirm the selection of mentions from the dropdown list.
71
- * You can add as many mention commit keys as you need. For instance, in the snippet above new mentions will be committed by pressing
72
- * either <kbd>Enter</kbd> or <kbd>Space</kbd> (13 and 32 key codes respectively).
73
- *
74
- * @default [ 13, 9 ] // [ Enter, Tab ]
75
- */
76
- commitKeys?: Array<number>;
77
- /**
78
- * The configuration of the custom number of visible mentions.
79
- *
80
- * Customizing the number of visible mentions allows you to specify how many available elements will the users be able to see
81
- * in the dropdown list. You can specify any number you see fit. For example, in the snippets below you will find the
82
- * dropdownLimit set to `20` and `Infinity` (the latter will result in showing all available mentions).
83
- *
84
- * ```ts
85
- * ClassicEditor
86
- * .create( editorElement, {
87
- * plugins: [ Mention, ... ],
88
- * mention: {
89
- * dropdownLimit: 20,
90
- * feeds: [
91
- * { ... }
92
- * ...
93
- * ]
94
- * }
95
- * } )
96
- * .then( ... )
97
- * .catch( ... );
98
- *
99
- * ClassicEditor
100
- * .create( editorElement, {
101
- * plugins: [ Mention, ... ],
102
- * mention: {
103
- * dropdownLimit: Infinity,
104
- * feeds: [
105
- * { ... }
106
- * ...
107
- * ]
108
- * }
109
- * } )
110
- * .then( ... )
111
- * .catch( ... );
112
- * ```
113
- *
114
- * @default 10
115
- */
116
- dropdownLimit?: number;
117
- }
118
- /**
119
- * The mention feed descriptor. Used in {@link module:mention/mentionconfig~MentionConfig `config.mention`}.
120
- *
121
- * See {@link module:mention/mentionconfig~MentionConfig} to learn more.
122
- *
123
- * ```ts
124
- * // Static configuration.
125
- * const mentionFeedPeople = {
126
- * marker: '@',
127
- * feed: [ '@Alice', '@Bob', ... ],
128
- * minimumCharacters: 2
129
- * };
130
- *
131
- * // Simple synchronous callback.
132
- * const mentionFeedTags = {
133
- * marker: '#',
134
- * feed: ( searchString: string ) => {
135
- * return tags
136
- * // Filter the tags list.
137
- * .filter( tag => {
138
- * return tag.toLowerCase().includes( queryText.toLowerCase() );
139
- * } )
140
- * }
141
- * };
142
- *
143
- * const tags = [ 'wysiwyg', 'rte', 'rich-text-edior', 'collaboration', 'real-time', ... ];
144
- *
145
- * // Asynchronous callback.
146
- * const mentionFeedPlaceholders = {
147
- * marker: '$',
148
- * feed: ( searchString: string ) => {
149
- * return getMatchingPlaceholders( searchString );
150
- * }
151
- * };
152
- *
153
- * function getMatchingPlaceholders( searchString: string ) {
154
- * return new Promise<Array<MentionFeedItem>>( resolve => {
155
- * doSomeXHRQuery( result => {
156
- * // console.log( result );
157
- * // -> [ '$name', '$surname', '$postal', ... ]
158
- *
159
- * resolve( result );
160
- * } );
161
- * } );
162
- * }
163
- * ```
164
- */
165
- export interface MentionFeed {
166
- /**
167
- * The character which triggers autocompletion for mention. It must be a single character.
168
- */
169
- marker: string;
170
- /**
171
- * Autocomplete items. Provide an array for
172
- * a static configuration (the mention feature will show matching items automatically) or a function which returns an array of
173
- * matching items (directly, or via a promise). If a function is passed, it is executed in the context of the editor instance.
174
- */
175
- feed: Array<MentionFeedItem> | FeedCallback;
176
- /**
177
- * Specifies after how many characters the autocomplete panel should be shown.
178
- *
179
- * @default 0
180
- */
181
- minimumCharacters?: number;
182
- /**
183
- * A function that renders a {@link module:mention/mentionconfig~MentionFeedItem}
184
- * to the autocomplete panel.
185
- */
186
- itemRenderer?: ItemRenderer;
187
- /**
188
- * Specify how many available elements per feeds will the users be able to see in the dropdown list.
189
- * If it not set, limit is inherited from {@link module:mention/mentionconfig~MentionConfig#dropdownLimit MentionConfig}.
190
- */
191
- dropdownLimit?: number;
192
- }
193
- /**
194
- * Function that renders an array of {@link module:mention/mentionconfig~MentionFeedItem} based on string input.
195
- */
196
- export type FeedCallback = (searchString: string) => Array<MentionFeedItem> | Promise<Array<MentionFeedItem>>;
197
- /**
198
- * Function that takes renders a {@link module:mention/mentionconfig~MentionFeedObjectItem} as HTMLElement.
199
- */
200
- export type ItemRenderer = (item: MentionFeedObjectItem) => HTMLElement | string;
201
- /**
202
- * The mention feed item. It may be defined as a string or a plain object.
203
- *
204
- * When defining a feed item as a plain object, the `id` property is obligatory. Additional properties
205
- * can be used when customizing the mention feature bahavior
206
- * (see {@glink features/mentions#customizing-the-autocomplete-list "Customizing the autocomplete list"}
207
- * and {@glink features/mentions#customizing-the-output "Customizing the output"} sections).
208
- *
209
- * ```ts
210
- * ClassicEditor
211
- * .create( editorElement, {
212
- * plugins: [ Mention, ... ],
213
- * mention: {
214
- * feeds: [
215
- * // Feed items as objects.
216
- * {
217
- * marker: '@',
218
- * feed: [
219
- * {
220
- * id: '@Barney',
221
- * fullName: 'Barney Bloom'
222
- * },
223
- * {
224
- * id: '@Lily',
225
- * fullName: 'Lily Smith'
226
- * },
227
- * {
228
- * id: '@Marshall',
229
- * fullName: 'Marshall McDonald'
230
- * },
231
- * {
232
- * id: '@Robin',
233
- * fullName: 'Robin Hood'
234
- * },
235
- * {
236
- * id: '@Ted',
237
- * fullName: 'Ted Cruze'
238
- * },
239
- * // ...
240
- * ]
241
- * },
242
- *
243
- * // Feed items as plain strings.
244
- * {
245
- * marker: '#',
246
- * feed: [ 'wysiwyg', 'rte', 'rich-text-edior', 'collaboration', 'real-time', ... ]
247
- * },
248
- * ]
249
- * }
250
- * } )
251
- * .then( ... )
252
- * .catch( ... );
253
- * ```
254
- */
255
- export type MentionFeedItem = string | MentionFeedObjectItem;
256
- export type MentionFeedObjectItem = {
257
- /**
258
- * A unique ID of the mention. It must start with the marker character.
259
- */
260
- id: string;
261
- /**
262
- * Text inserted into the editor when creating a mention.
263
- */
264
- text?: string;
265
- };
1
+ /**
2
+ * @license Copyright (c) 2003-2023, CKSource Holding sp. z o.o. All rights reserved.
3
+ * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license
4
+ */
5
+ /**
6
+ * @module mention/mentionconfig
7
+ */
8
+ /**
9
+ * The configuration of the mention feature.
10
+ *
11
+ * Read more about {@glink features/mentions#configuration configuring the mention feature}.
12
+ *
13
+ * ```ts
14
+ * ClassicEditor
15
+ * .create( editorElement, {
16
+ * mention: ... // Mention feature options.
17
+ * } )
18
+ * .then( ... )
19
+ * .catch( ... );
20
+ * ```
21
+ *
22
+ * See {@link module:core/editor/editorconfig~EditorConfig all editor options}.
23
+ */
24
+ export interface MentionConfig {
25
+ /**
26
+ * The list of mention feeds supported by the editor.
27
+ *
28
+ * ```ts
29
+ * ClassicEditor
30
+ * .create( editorElement, {
31
+ * plugins: [ Mention, ... ],
32
+ * mention: {
33
+ * feeds: [
34
+ * {
35
+ * marker: '@',
36
+ * feed: [ '@Barney', '@Lily', '@Marshall', '@Robin', '@Ted' ]
37
+ * },
38
+ * ...
39
+ * ]
40
+ * }
41
+ * } )
42
+ * .then( ... )
43
+ * .catch( ... );
44
+ * ```
45
+ *
46
+ * You can provide many mention feeds but they must use different `marker`s.
47
+ * For example, you can use `'@'` to autocomplete people and `'#'` to autocomplete tags.
48
+ */
49
+ feeds: Array<MentionFeed>;
50
+ /**
51
+ * The configuration of the custom commit keys supported by the editor.
52
+ *
53
+ * ```ts
54
+ * ClassicEditor
55
+ * .create( editorElement, {
56
+ * plugins: [ Mention, ... ],
57
+ * mention: {
58
+ * // [ Enter, Space ]
59
+ * commitKeys: [ 13, 32 ]
60
+ * feeds: [
61
+ * { ... }
62
+ * ...
63
+ * ]
64
+ * }
65
+ * } )
66
+ * .then( ... )
67
+ * .catch( ... );
68
+ * ```
69
+ *
70
+ * Custom commit keys configuration allows you to customize how users will confirm the selection of mentions from the dropdown list.
71
+ * You can add as many mention commit keys as you need. For instance, in the snippet above new mentions will be committed by pressing
72
+ * either <kbd>Enter</kbd> or <kbd>Space</kbd> (13 and 32 key codes respectively).
73
+ *
74
+ * @default [ 13, 9 ] // [ Enter, Tab ]
75
+ */
76
+ commitKeys?: Array<number>;
77
+ /**
78
+ * The configuration of the custom number of visible mentions.
79
+ *
80
+ * Customizing the number of visible mentions allows you to specify how many available elements will the users be able to see
81
+ * in the dropdown list. You can specify any number you see fit. For example, in the snippets below you will find the
82
+ * dropdownLimit set to `20` and `Infinity` (the latter will result in showing all available mentions).
83
+ *
84
+ * ```ts
85
+ * ClassicEditor
86
+ * .create( editorElement, {
87
+ * plugins: [ Mention, ... ],
88
+ * mention: {
89
+ * dropdownLimit: 20,
90
+ * feeds: [
91
+ * { ... }
92
+ * ...
93
+ * ]
94
+ * }
95
+ * } )
96
+ * .then( ... )
97
+ * .catch( ... );
98
+ *
99
+ * ClassicEditor
100
+ * .create( editorElement, {
101
+ * plugins: [ Mention, ... ],
102
+ * mention: {
103
+ * dropdownLimit: Infinity,
104
+ * feeds: [
105
+ * { ... }
106
+ * ...
107
+ * ]
108
+ * }
109
+ * } )
110
+ * .then( ... )
111
+ * .catch( ... );
112
+ * ```
113
+ *
114
+ * @default 10
115
+ */
116
+ dropdownLimit?: number;
117
+ }
118
+ /**
119
+ * The mention feed descriptor. Used in {@link module:mention/mentionconfig~MentionConfig `config.mention`}.
120
+ *
121
+ * See {@link module:mention/mentionconfig~MentionConfig} to learn more.
122
+ *
123
+ * ```ts
124
+ * // Static configuration.
125
+ * const mentionFeedPeople = {
126
+ * marker: '@',
127
+ * feed: [ '@Alice', '@Bob', ... ],
128
+ * minimumCharacters: 2
129
+ * };
130
+ *
131
+ * // Simple synchronous callback.
132
+ * const mentionFeedTags = {
133
+ * marker: '#',
134
+ * feed: ( searchString: string ) => {
135
+ * return tags
136
+ * // Filter the tags list.
137
+ * .filter( tag => {
138
+ * return tag.toLowerCase().includes( queryText.toLowerCase() );
139
+ * } )
140
+ * }
141
+ * };
142
+ *
143
+ * const tags = [ 'wysiwyg', 'rte', 'rich-text-edior', 'collaboration', 'real-time', ... ];
144
+ *
145
+ * // Asynchronous callback.
146
+ * const mentionFeedPlaceholders = {
147
+ * marker: '$',
148
+ * feed: ( searchString: string ) => {
149
+ * return getMatchingPlaceholders( searchString );
150
+ * }
151
+ * };
152
+ *
153
+ * function getMatchingPlaceholders( searchString: string ) {
154
+ * return new Promise<Array<MentionFeedItem>>( resolve => {
155
+ * doSomeXHRQuery( result => {
156
+ * // console.log( result );
157
+ * // -> [ '$name', '$surname', '$postal', ... ]
158
+ *
159
+ * resolve( result );
160
+ * } );
161
+ * } );
162
+ * }
163
+ * ```
164
+ */
165
+ export interface MentionFeed {
166
+ /**
167
+ * The character which triggers autocompletion for mention. It must be a single character.
168
+ */
169
+ marker: string;
170
+ /**
171
+ * Autocomplete items. Provide an array for
172
+ * a static configuration (the mention feature will show matching items automatically) or a function which returns an array of
173
+ * matching items (directly, or via a promise). If a function is passed, it is executed in the context of the editor instance.
174
+ */
175
+ feed: Array<MentionFeedItem> | FeedCallback;
176
+ /**
177
+ * Specifies after how many characters the autocomplete panel should be shown.
178
+ *
179
+ * @default 0
180
+ */
181
+ minimumCharacters?: number;
182
+ /**
183
+ * A function that renders a {@link module:mention/mentionconfig~MentionFeedItem}
184
+ * to the autocomplete panel.
185
+ */
186
+ itemRenderer?: ItemRenderer;
187
+ /**
188
+ * Specify how many available elements per feeds will the users be able to see in the dropdown list.
189
+ * If it not set, limit is inherited from {@link module:mention/mentionconfig~MentionConfig#dropdownLimit MentionConfig}.
190
+ */
191
+ dropdownLimit?: number;
192
+ }
193
+ /**
194
+ * Function that renders an array of {@link module:mention/mentionconfig~MentionFeedItem} based on string input.
195
+ */
196
+ export type FeedCallback = (searchString: string) => Array<MentionFeedItem> | Promise<Array<MentionFeedItem>>;
197
+ /**
198
+ * Function that takes renders a {@link module:mention/mentionconfig~MentionFeedObjectItem} as HTMLElement.
199
+ */
200
+ export type ItemRenderer = (item: MentionFeedObjectItem) => HTMLElement | string;
201
+ /**
202
+ * The mention feed item. It may be defined as a string or a plain object.
203
+ *
204
+ * When defining a feed item as a plain object, the `id` property is obligatory. Additional properties
205
+ * can be used when customizing the mention feature bahavior
206
+ * (see {@glink features/mentions#customizing-the-autocomplete-list "Customizing the autocomplete list"}
207
+ * and {@glink features/mentions#customizing-the-output "Customizing the output"} sections).
208
+ *
209
+ * ```ts
210
+ * ClassicEditor
211
+ * .create( editorElement, {
212
+ * plugins: [ Mention, ... ],
213
+ * mention: {
214
+ * feeds: [
215
+ * // Feed items as objects.
216
+ * {
217
+ * marker: '@',
218
+ * feed: [
219
+ * {
220
+ * id: '@Barney',
221
+ * fullName: 'Barney Bloom'
222
+ * },
223
+ * {
224
+ * id: '@Lily',
225
+ * fullName: 'Lily Smith'
226
+ * },
227
+ * {
228
+ * id: '@Marshall',
229
+ * fullName: 'Marshall McDonald'
230
+ * },
231
+ * {
232
+ * id: '@Robin',
233
+ * fullName: 'Robin Hood'
234
+ * },
235
+ * {
236
+ * id: '@Ted',
237
+ * fullName: 'Ted Cruze'
238
+ * },
239
+ * // ...
240
+ * ]
241
+ * },
242
+ *
243
+ * // Feed items as plain strings.
244
+ * {
245
+ * marker: '#',
246
+ * feed: [ 'wysiwyg', 'rte', 'rich-text-edior', 'collaboration', 'real-time', ... ]
247
+ * },
248
+ * ]
249
+ * }
250
+ * } )
251
+ * .then( ... )
252
+ * .catch( ... );
253
+ * ```
254
+ */
255
+ export type MentionFeedItem = string | MentionFeedObjectItem;
256
+ export type MentionFeedObjectItem = {
257
+ /**
258
+ * A unique ID of the mention. It must start with the marker character.
259
+ */
260
+ id: string;
261
+ /**
262
+ * Text inserted into the editor when creating a mention.
263
+ */
264
+ text?: string;
265
+ };
@@ -1,5 +1,5 @@
1
- /**
2
- * @license Copyright (c) 2003-2023, CKSource Holding sp. z o.o. All rights reserved.
3
- * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license
4
- */
5
- export {};
1
+ /**
2
+ * @license Copyright (c) 2003-2023, CKSource Holding sp. z o.o. All rights reserved.
3
+ * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license
4
+ */
5
+ export {};
@@ -1,43 +1,43 @@
1
- /**
2
- * @license Copyright (c) 2003-2023, CKSource Holding sp. z o.o. All rights reserved.
3
- * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license
4
- */
5
- /**
6
- * @module mention/mentionediting
7
- */
8
- import { Plugin } from 'ckeditor5/src/core';
9
- import type { Element } from 'ckeditor5/src/engine';
10
- import type { MentionAttribute } from './mention';
11
- /**
12
- * The mention editing feature.
13
- *
14
- * It introduces the {@link module:mention/mentioncommand~MentionCommand command} and the `mention`
15
- * attribute in the {@link module:engine/model/model~Model model} which renders in the {@link module:engine/view/view view}
16
- * as a `<span class="mention" data-mention="@mention">`.
17
- */
18
- export default class MentionEditing extends Plugin {
19
- /**
20
- * @inheritDoc
21
- */
22
- static get pluginName(): "MentionEditing";
23
- /**
24
- * @inheritDoc
25
- */
26
- init(): void;
27
- }
28
- /**
29
- * @internal
30
- */
31
- export declare function _addMentionAttributes(baseMentionData: {
32
- id: string;
33
- _text: string;
34
- }, data?: Record<string, unknown>): MentionAttribute;
35
- /**
36
- * Creates a mention attribute value from the provided view element and optional data.
37
- *
38
- * This function is exposed as
39
- * {@link module:mention/mention~Mention#toMentionAttribute `editor.plugins.get( 'Mention' ).toMentionAttribute()`}.
40
- *
41
- * @internal
42
- */
43
- export declare function _toMentionAttribute(viewElementOrMention: Element, data?: Record<string, unknown>): MentionAttribute | undefined;
1
+ /**
2
+ * @license Copyright (c) 2003-2023, CKSource Holding sp. z o.o. All rights reserved.
3
+ * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license
4
+ */
5
+ /**
6
+ * @module mention/mentionediting
7
+ */
8
+ import { Plugin } from 'ckeditor5/src/core';
9
+ import type { Element } from 'ckeditor5/src/engine';
10
+ import type { MentionAttribute } from './mention';
11
+ /**
12
+ * The mention editing feature.
13
+ *
14
+ * It introduces the {@link module:mention/mentioncommand~MentionCommand command} and the `mention`
15
+ * attribute in the {@link module:engine/model/model~Model model} which renders in the {@link module:engine/view/view view}
16
+ * as a `<span class="mention" data-mention="@mention">`.
17
+ */
18
+ export default class MentionEditing extends Plugin {
19
+ /**
20
+ * @inheritDoc
21
+ */
22
+ static get pluginName(): "MentionEditing";
23
+ /**
24
+ * @inheritDoc
25
+ */
26
+ init(): void;
27
+ }
28
+ /**
29
+ * @internal
30
+ */
31
+ export declare function _addMentionAttributes(baseMentionData: {
32
+ id: string;
33
+ _text: string;
34
+ }, data?: Record<string, unknown>): MentionAttribute;
35
+ /**
36
+ * Creates a mention attribute value from the provided view element and optional data.
37
+ *
38
+ * This function is exposed as
39
+ * {@link module:mention/mention~Mention#toMentionAttribute `editor.plugins.get( 'Mention' ).toMentionAttribute()`}.
40
+ *
41
+ * @internal
42
+ */
43
+ export declare function _toMentionAttribute(viewElementOrMention: Element, data?: Record<string, unknown>): MentionAttribute | undefined;