@ckeditor/ckeditor5-mention 40.0.0 → 40.1.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
@@ -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;