@ckeditor/ckeditor5-mention 41.3.0-alpha.4 → 41.3.0
Sign up to get free protection for your applications and to get access to all the features.
- package/package.json +2 -3
- package/dist/content-index.css +0 -4
- package/dist/editor-index.css +0 -17
- package/dist/index.css +0 -34
- package/dist/index.css.map +0 -1
- package/dist/types/augmentation.d.ts +0 -27
- package/dist/types/index.d.ts +0 -20
- package/dist/types/mention.d.ts +0 -81
- package/dist/types/mentioncommand.d.ts +0 -81
- package/dist/types/mentionconfig.d.ts +0 -269
- package/dist/types/mentionediting.d.ts +0 -47
- package/dist/types/mentionui.d.ts +0 -106
- package/dist/types/ui/domwrapperview.d.ts +0 -45
- package/dist/types/ui/mentionlistitemview.d.ts +0 -19
- package/dist/types/ui/mentionsview.d.ts +0 -64
package/package.json
CHANGED
@@ -1,6 +1,6 @@
|
|
1
1
|
{
|
2
2
|
"name": "@ckeditor/ckeditor5-mention",
|
3
|
-
"version": "41.3.0
|
3
|
+
"version": "41.3.0",
|
4
4
|
"description": "Mention feature for CKEditor 5.",
|
5
5
|
"keywords": [
|
6
6
|
"ckeditor",
|
@@ -13,7 +13,7 @@
|
|
13
13
|
"type": "module",
|
14
14
|
"main": "src/index.js",
|
15
15
|
"dependencies": {
|
16
|
-
"ckeditor5": "41.3.0
|
16
|
+
"ckeditor5": "41.3.0",
|
17
17
|
"lodash-es": "4.17.21"
|
18
18
|
},
|
19
19
|
"author": "CKSource (http://cksource.com/)",
|
@@ -26,7 +26,6 @@
|
|
26
26
|
"directory": "packages/ckeditor5-mention"
|
27
27
|
},
|
28
28
|
"files": [
|
29
|
-
"dist",
|
30
29
|
"lang",
|
31
30
|
"src/**/*.js",
|
32
31
|
"src/**/*.d.ts",
|
package/dist/content-index.css
DELETED
package/dist/editor-index.css
DELETED
@@ -1,17 +0,0 @@
|
|
1
|
-
/**
|
2
|
-
* @license Copyright (c) 2003-2024, 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
|
-
:root {
|
6
|
-
--ck-mention-list-max-height: 300px;
|
7
|
-
}
|
8
|
-
.ck.ck-mentions {
|
9
|
-
max-height: var(--ck-mention-list-max-height);
|
10
|
-
overflow-y: auto;
|
11
|
-
overflow-x: hidden;
|
12
|
-
overscroll-behavior: contain;
|
13
|
-
}
|
14
|
-
.ck.ck-mentions > .ck-list__item {
|
15
|
-
overflow: hidden;
|
16
|
-
flex-shrink: 0;
|
17
|
-
}
|
package/dist/index.css
DELETED
@@ -1,34 +0,0 @@
|
|
1
|
-
/**
|
2
|
-
* @license Copyright (c) 2003-2024, 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
|
-
* Copyright (c) 2003-2024, CKSource Holding sp. z o.o. All rights reserved.
|
7
|
-
* For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license
|
8
|
-
*/
|
9
|
-
|
10
|
-
:root {
|
11
|
-
--ck-mention-list-max-height: 300px;
|
12
|
-
}
|
13
|
-
|
14
|
-
.ck.ck-mentions {
|
15
|
-
max-height: var(--ck-mention-list-max-height);
|
16
|
-
|
17
|
-
overflow-y: auto;
|
18
|
-
|
19
|
-
/* Prevent unnecessary horizontal scrollbar in Safari
|
20
|
-
https://github.com/ckeditor/ckeditor5-mention/issues/41 */
|
21
|
-
overflow-x: hidden;
|
22
|
-
|
23
|
-
overscroll-behavior: contain;
|
24
|
-
|
25
|
-
/* Prevent unnecessary vertical scrollbar in Safari
|
26
|
-
https://github.com/ckeditor/ckeditor5-mention/issues/41 */
|
27
|
-
}
|
28
|
-
|
29
|
-
.ck.ck-mentions > .ck-list__item {
|
30
|
-
overflow: hidden;
|
31
|
-
flex-shrink: 0;
|
32
|
-
}
|
33
|
-
|
34
|
-
/*# sourceMappingURL=index.css.map */
|
package/dist/index.css.map
DELETED
@@ -1 +0,0 @@
|
|
1
|
-
{"version":3,"sources":["../theme/mentionui.css","index.css"],"names":[],"mappings":";;;;AAAA,CAAA,CAAA;ACCA,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,CAAC,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,QAAQ,CAAC,OAAO,CAAC,EAAE,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,GAAG,CAAC,MAAM,CAAC,QAAQ,CAAC;AAC5E,CAAC,CAAC,CAAC,GAAG,CAAC,SAAS,CAAC,CAAC,GAAG,CAAC,OAAO,CAAC,EAAE,CAAC,EAAE,CAAC,KAAK,CAAC,CAAC,CAAC,QAAQ,CAAC,GAAG,CAAC,KAAK,CAAC,QAAQ,CAAC,GAAG,CAAC,OAAO;AACnF,CAAC,CDAC,CAAA;ACCF;ADCA,CAAA,IAAA,CAAA,CAAA;ACCA,CDAC,CAAA,CAAA,EAAA,CAAA,OAAA,CAAA,IAAA,CAAA,GAAA,CAAA,MAAA,CAAA,CAAA,KAAmC,CAAA;AACpC,CAAA;ACCA;ADCA,CAAA,EAAA,CAAA,EAAA,CAAA,QAAA,CAAA,CAAA;ACCA,CDAC,GAAA,CAAA,MAAA,CAAA,CAAA,GAAA,CAAA,CAAA,CAAA,EAAA,CAAA,OAAA,CAAA,IAAA,CAAA,GAAA,CAAA,MAAA,CAA6C,CAAA;ACC9C;AACA,CDAC,QAAA,CAAA,CAAA,CAAA,CAAA,IAAgB,CAAA;ACCjB;AACA,CDAC,CAAA,CAAA,CAAA,OAAA,CAAA,WAAA,CAAA,UAAA,CAAA,SAAA,CAAA,EAAA,CAAA,MAAA;ACCD,CAAC,KAAK,CAAC,CAAC,CAAC,MAAM,CAAC,GAAG,CAAC,QAAQ,CAAC,SAAS,CAAC,OAAO,CAAC,MAAM,CAAC,EAAE,CAAC,CDAC,CAAA;ACC1D,CDAC,QAAA,CAAA,CAAA,CAAA,CAAA,MAAkB,CAAA;ACCnB;AACA,CDAC,UAAA,CAAA,QAAA,CAAA,CAAA,OAA4B,CAAA;ACC7B;AACA,CDAC,CAAA,CAAA,CAAA,OAAA,CAAA,WAAA,CAAA,QAAA,CAAA,SAAA,CAAA,EAAA,CAAA,MAAA;ACCD,CAAC,KAAK,CAAC,CAAC,CAAC,MAAM,CAAC,GAAG,CAAC,QAAQ,CAAC,SAAS,CAAC,OAAO,CAAC,MAAM,CAAC,EAAE,CAAC,CDAC,CAAA;AAK1D,CAAA;ACHA;ADDC,CAAA,EAAA,CAAA,EAAA,CAAA,QAAA,CAAA,CAAA,CAAA,CAAA,EAAA,CAAA,UAAA,CAAA,CAAA;ACGD,CAAC,CDFC,QAAA,CAAA,CAAA,MAAgB,CAAA;ACGlB,CAAC,CDFC,IAAA,CAAA,MAAA,CAAA,CAAA,CAAc,CAAA;ACGhB,CDFC,CAAA;ACGD;AACA,CAAC,CAAC,CAAC,CAAC,gBAAgB,CAAC,KAAK,CAAC,GAAG,CAAC,GAAG,CAAC,CAAC","file":"index.css.map","sourcesContent":["/*\n * Copyright (c) 2003-2024, CKSource Holding sp. z o.o. All rights reserved.\n * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license\n */\n\n:root {\n\t--ck-mention-list-max-height: 300px;\n}\n\n.ck.ck-mentions {\n\tmax-height: var(--ck-mention-list-max-height);\n\n\toverflow-y: auto;\n\n\t/* Prevent unnecessary horizontal scrollbar in Safari\n\thttps://github.com/ckeditor/ckeditor5-mention/issues/41 */\n\toverflow-x: hidden;\n\n\toverscroll-behavior: contain;\n\n\t/* Prevent unnecessary vertical scrollbar in Safari\n\thttps://github.com/ckeditor/ckeditor5-mention/issues/41 */\n\t& > .ck-list__item {\n\t\toverflow: hidden;\n\t\tflex-shrink: 0;\n\t}\n}\n","/*\n * Copyright (c) 2003-2024, CKSource Holding sp. z o.o. All rights reserved.\n * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license\n */\n\n:root {\n\t--ck-mention-list-max-height: 300px;\n}\n\n.ck.ck-mentions {\n\tmax-height: var(--ck-mention-list-max-height);\n\n\toverflow-y: auto;\n\n\t/* Prevent unnecessary horizontal scrollbar in Safari\n\thttps://github.com/ckeditor/ckeditor5-mention/issues/41 */\n\toverflow-x: hidden;\n\n\toverscroll-behavior: contain;\n\n\t/* Prevent unnecessary vertical scrollbar in Safari\n\thttps://github.com/ckeditor/ckeditor5-mention/issues/41 */\n}\n\n.ck.ck-mentions > .ck-list__item {\n\t\toverflow: hidden;\n\t\tflex-shrink: 0;\n\t}\n\n/*# sourceMappingURL=index.css.map */"]}
|
@@ -1,27 +0,0 @@
|
|
1
|
-
/**
|
2
|
-
* @license Copyright (c) 2003-2024, 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
|
-
* @license Copyright (c) 2003-2024, CKSource Holding sp. z o.o. All rights reserved.
|
7
|
-
* For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license
|
8
|
-
*/
|
9
|
-
import type { MentionConfig, Mention, MentionEditing, MentionUI, MentionCommand } from './index.js';
|
10
|
-
declare module '@ckeditor/ckeditor5-core' {
|
11
|
-
interface EditorConfig {
|
12
|
-
/**
|
13
|
-
* The configuration of the {@link module:mention/mention~Mention} feature.
|
14
|
-
*
|
15
|
-
* Read more in {@link module:mention/mentionconfig~MentionConfig}.
|
16
|
-
*/
|
17
|
-
mention?: MentionConfig;
|
18
|
-
}
|
19
|
-
interface PluginsMap {
|
20
|
-
[Mention.pluginName]: Mention;
|
21
|
-
[MentionEditing.pluginName]: MentionEditing;
|
22
|
-
[MentionUI.pluginName]: MentionUI;
|
23
|
-
}
|
24
|
-
interface CommandsMap {
|
25
|
-
mention: MentionCommand;
|
26
|
-
}
|
27
|
-
}
|
package/dist/types/index.d.ts
DELETED
@@ -1,20 +0,0 @@
|
|
1
|
-
/**
|
2
|
-
* @license Copyright (c) 2003-2024, 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
|
-
* @license Copyright (c) 2003-2024, CKSource Holding sp. z o.o. All rights reserved.
|
7
|
-
* For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license
|
8
|
-
*/
|
9
|
-
/**
|
10
|
-
* @module mention
|
11
|
-
*/
|
12
|
-
export { default as Mention } from './mention.js';
|
13
|
-
export { default as MentionEditing } from './mentionediting.js';
|
14
|
-
export { default as MentionUI } from './mentionui.js';
|
15
|
-
export { default as MentionsView } from './ui/mentionsview.js';
|
16
|
-
export { default as MentionListItemView } from './ui/mentionlistitemview.js';
|
17
|
-
export { default as DomWrapperView } from './ui/domwrapperview.js';
|
18
|
-
export type { MentionConfig, MentionFeed, ItemRenderer, MentionFeedObjectItem } from './mentionconfig.js';
|
19
|
-
export type { default as MentionCommand } from './mentioncommand.js';
|
20
|
-
import './augmentation.js';
|
package/dist/types/mention.d.ts
DELETED
@@ -1,81 +0,0 @@
|
|
1
|
-
/**
|
2
|
-
* @license Copyright (c) 2003-2024, 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
|
-
* @license Copyright (c) 2003-2024, CKSource Holding sp. z o.o. All rights reserved.
|
7
|
-
* For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license
|
8
|
-
*/
|
9
|
-
/**
|
10
|
-
* @module mention/mention
|
11
|
-
*/
|
12
|
-
import { Plugin } from 'ckeditor5/src/core.js';
|
13
|
-
import type { Element } from 'ckeditor5/src/engine.js';
|
14
|
-
import MentionEditing from './mentionediting.js';
|
15
|
-
import MentionUI from './mentionui.js';
|
16
|
-
import '../theme/mention.css';
|
17
|
-
/**
|
18
|
-
* The mention plugin.
|
19
|
-
*
|
20
|
-
* For a detailed overview, check the {@glink features/mentions Mention feature} guide.
|
21
|
-
*/
|
22
|
-
export default class Mention extends Plugin {
|
23
|
-
/**
|
24
|
-
* Creates a mention attribute value from the provided view element and additional data.
|
25
|
-
*
|
26
|
-
* ```ts
|
27
|
-
* editor.plugins.get( 'Mention' ).toMentionAttribute( viewElement, { userId: '1234' } );
|
28
|
-
*
|
29
|
-
* // For a view element: <span data-mention="@joe">@John Doe</span>
|
30
|
-
* // it will return:
|
31
|
-
* // { id: '@joe', userId: '1234', uid: '7a7bc7...', _text: '@John Doe' }
|
32
|
-
* ```
|
33
|
-
*
|
34
|
-
* @param data Additional data to be stored in the mention attribute.
|
35
|
-
*/
|
36
|
-
toMentionAttribute<MentionData extends Record<string, unknown>>(viewElement: Element, data: MentionData): (MentionAttribute & MentionData) | undefined;
|
37
|
-
/**
|
38
|
-
* Creates a mention attribute value from the provided view element.
|
39
|
-
*
|
40
|
-
* ```ts
|
41
|
-
* editor.plugins.get( 'Mention' ).toMentionAttribute( viewElement );
|
42
|
-
*
|
43
|
-
* // For a view element: <span data-mention="@joe">@John Doe</span>
|
44
|
-
* // it will return:
|
45
|
-
* // { id: '@joe', uid: '7a7bc7...', _text: '@John Doe' }
|
46
|
-
* ```
|
47
|
-
*/
|
48
|
-
toMentionAttribute(viewElement: Element): MentionAttribute | undefined;
|
49
|
-
/**
|
50
|
-
* @inheritDoc
|
51
|
-
*/
|
52
|
-
static get pluginName(): "Mention";
|
53
|
-
/**
|
54
|
-
* @inheritDoc
|
55
|
-
*/
|
56
|
-
static get requires(): readonly [typeof MentionEditing, typeof MentionUI];
|
57
|
-
}
|
58
|
-
/**
|
59
|
-
* Represents a mention in the model.
|
60
|
-
*
|
61
|
-
* See {@link module:mention/mention~Mention#toMentionAttribute `Mention#toMentionAttribute()`}.
|
62
|
-
*/
|
63
|
-
export type MentionAttribute = {
|
64
|
-
/**
|
65
|
-
* The ID of a mention. It identifies the mention item in the mention feed. There can be multiple mentions
|
66
|
-
* in the document with the same ID (e.g. the same hashtag being mentioned).
|
67
|
-
*/
|
68
|
-
id: string;
|
69
|
-
/**
|
70
|
-
* A unique ID of this mention instance. Should be passed as an `option.id` when using
|
71
|
-
* {@link module:engine/view/downcastwriter~DowncastWriter#createAttributeElement writer.createAttributeElement()}.
|
72
|
-
*/
|
73
|
-
uid: string;
|
74
|
-
/**
|
75
|
-
* Helper property that stores the text of the inserted mention. Used for detecting a broken mention
|
76
|
-
* in the editing area.
|
77
|
-
*
|
78
|
-
* @internal
|
79
|
-
*/
|
80
|
-
_text: string;
|
81
|
-
};
|
@@ -1,81 +0,0 @@
|
|
1
|
-
/**
|
2
|
-
* @license Copyright (c) 2003-2024, 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
|
-
* @license Copyright (c) 2003-2024, CKSource Holding sp. z o.o. All rights reserved.
|
7
|
-
* For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license
|
8
|
-
*/
|
9
|
-
/**
|
10
|
-
* @module mention/mentioncommand
|
11
|
-
*/
|
12
|
-
import { Command, type Editor } from 'ckeditor5/src/core.js';
|
13
|
-
import type { Range } from 'ckeditor5/src/engine.js';
|
14
|
-
/**
|
15
|
-
* The mention command.
|
16
|
-
*
|
17
|
-
* The command is registered by {@link module:mention/mentionediting~MentionEditing} as `'mention'`.
|
18
|
-
*
|
19
|
-
* To insert a mention into a range, execute the command and specify a mention object with a range to replace:
|
20
|
-
*
|
21
|
-
* ```ts
|
22
|
-
* const focus = editor.model.document.selection.focus;
|
23
|
-
*
|
24
|
-
* // It will replace one character before the selection focus with the '#1234' text
|
25
|
-
* // with the mention attribute filled with passed attributes.
|
26
|
-
* editor.execute( 'mention', {
|
27
|
-
* marker: '#',
|
28
|
-
* mention: {
|
29
|
-
* id: '#1234',
|
30
|
-
* name: 'Foo',
|
31
|
-
* title: 'Big Foo'
|
32
|
-
* },
|
33
|
-
* range: editor.model.createRange( focus.getShiftedBy( -1 ), focus )
|
34
|
-
* } );
|
35
|
-
*
|
36
|
-
* // It will replace one character before the selection focus with the 'The "Big Foo"' text
|
37
|
-
* // with the mention attribute filled with passed attributes.
|
38
|
-
* editor.execute( 'mention', {
|
39
|
-
* marker: '#',
|
40
|
-
* mention: {
|
41
|
-
* id: '#1234',
|
42
|
-
* name: 'Foo',
|
43
|
-
* title: 'Big Foo'
|
44
|
-
* },
|
45
|
-
* text: 'The "Big Foo"',
|
46
|
-
* range: editor.model.createRange( focus.getShiftedBy( -1 ), focus )
|
47
|
-
* } );
|
48
|
-
* ```
|
49
|
-
*/
|
50
|
-
export default class MentionCommand extends Command {
|
51
|
-
/**
|
52
|
-
* @inheritDoc
|
53
|
-
*/
|
54
|
-
constructor(editor: Editor);
|
55
|
-
/**
|
56
|
-
* @inheritDoc
|
57
|
-
*/
|
58
|
-
refresh(): void;
|
59
|
-
/**
|
60
|
-
* Executes the command.
|
61
|
-
*
|
62
|
-
* @param options Options for the executed command.
|
63
|
-
* @param options.mention The mention object to insert. When a string is passed, it will be used to create a plain
|
64
|
-
* object with the name attribute that equals the passed string.
|
65
|
-
* @param options.marker The marker character (e.g. `'@'`).
|
66
|
-
* @param options.text The text of the inserted mention. Defaults to the full mention string composed from `marker` and
|
67
|
-
* `mention` string or `mention.id` if an object is passed.
|
68
|
-
* @param options.range The range to replace.
|
69
|
-
* Note that the replaced range might be shorter than the inserted text with the mention attribute.
|
70
|
-
* @fires execute
|
71
|
-
*/
|
72
|
-
execute(options: {
|
73
|
-
mention: string | {
|
74
|
-
id: string;
|
75
|
-
[key: string]: unknown;
|
76
|
-
};
|
77
|
-
marker: string;
|
78
|
-
text?: string;
|
79
|
-
range?: Range;
|
80
|
-
}): void;
|
81
|
-
}
|
@@ -1,269 +0,0 @@
|
|
1
|
-
/**
|
2
|
-
* @license Copyright (c) 2003-2024, 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
|
-
* @license Copyright (c) 2003-2024, CKSource Holding sp. z o.o. All rights reserved.
|
7
|
-
* For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license
|
8
|
-
*/
|
9
|
-
/**
|
10
|
-
* @module mention/mentionconfig
|
11
|
-
*/
|
12
|
-
/**
|
13
|
-
* The configuration of the mention feature.
|
14
|
-
*
|
15
|
-
* Read more about {@glink features/mentions#configuration configuring the mention feature}.
|
16
|
-
*
|
17
|
-
* ```ts
|
18
|
-
* ClassicEditor
|
19
|
-
* .create( editorElement, {
|
20
|
-
* mention: ... // Mention feature options.
|
21
|
-
* } )
|
22
|
-
* .then( ... )
|
23
|
-
* .catch( ... );
|
24
|
-
* ```
|
25
|
-
*
|
26
|
-
* See {@link module:core/editor/editorconfig~EditorConfig all editor options}.
|
27
|
-
*/
|
28
|
-
export interface MentionConfig {
|
29
|
-
/**
|
30
|
-
* The list of mention feeds supported by the editor.
|
31
|
-
*
|
32
|
-
* ```ts
|
33
|
-
* ClassicEditor
|
34
|
-
* .create( editorElement, {
|
35
|
-
* plugins: [ Mention, ... ],
|
36
|
-
* mention: {
|
37
|
-
* feeds: [
|
38
|
-
* {
|
39
|
-
* marker: '@',
|
40
|
-
* feed: [ '@Barney', '@Lily', '@Marshall', '@Robin', '@Ted' ]
|
41
|
-
* },
|
42
|
-
* ...
|
43
|
-
* ]
|
44
|
-
* }
|
45
|
-
* } )
|
46
|
-
* .then( ... )
|
47
|
-
* .catch( ... );
|
48
|
-
* ```
|
49
|
-
*
|
50
|
-
* You can provide many mention feeds but they must use different `marker`s.
|
51
|
-
* For example, you can use `'@'` to autocomplete people and `'#'` to autocomplete tags.
|
52
|
-
*/
|
53
|
-
feeds: Array<MentionFeed>;
|
54
|
-
/**
|
55
|
-
* The configuration of the custom commit keys supported by the editor.
|
56
|
-
*
|
57
|
-
* ```ts
|
58
|
-
* ClassicEditor
|
59
|
-
* .create( editorElement, {
|
60
|
-
* plugins: [ Mention, ... ],
|
61
|
-
* mention: {
|
62
|
-
* // [ Enter, Space ]
|
63
|
-
* commitKeys: [ 13, 32 ]
|
64
|
-
* feeds: [
|
65
|
-
* { ... }
|
66
|
-
* ...
|
67
|
-
* ]
|
68
|
-
* }
|
69
|
-
* } )
|
70
|
-
* .then( ... )
|
71
|
-
* .catch( ... );
|
72
|
-
* ```
|
73
|
-
*
|
74
|
-
* Custom commit keys configuration allows you to customize how users will confirm the selection of mentions from the dropdown list.
|
75
|
-
* You can add as many mention commit keys as you need. For instance, in the snippet above new mentions will be committed by pressing
|
76
|
-
* either <kbd>Enter</kbd> or <kbd>Space</kbd> (13 and 32 key codes respectively).
|
77
|
-
*
|
78
|
-
* @default [ 13, 9 ] // [ Enter, Tab ]
|
79
|
-
*/
|
80
|
-
commitKeys?: Array<number>;
|
81
|
-
/**
|
82
|
-
* The configuration of the custom number of visible mentions.
|
83
|
-
*
|
84
|
-
* Customizing the number of visible mentions allows you to specify how many available elements will the users be able to see
|
85
|
-
* in the dropdown list. You can specify any number you see fit. For example, in the snippets below you will find the
|
86
|
-
* dropdownLimit set to `20` and `Infinity` (the latter will result in showing all available mentions).
|
87
|
-
*
|
88
|
-
* ```ts
|
89
|
-
* ClassicEditor
|
90
|
-
* .create( editorElement, {
|
91
|
-
* plugins: [ Mention, ... ],
|
92
|
-
* mention: {
|
93
|
-
* dropdownLimit: 20,
|
94
|
-
* feeds: [
|
95
|
-
* { ... }
|
96
|
-
* ...
|
97
|
-
* ]
|
98
|
-
* }
|
99
|
-
* } )
|
100
|
-
* .then( ... )
|
101
|
-
* .catch( ... );
|
102
|
-
*
|
103
|
-
* ClassicEditor
|
104
|
-
* .create( editorElement, {
|
105
|
-
* plugins: [ Mention, ... ],
|
106
|
-
* mention: {
|
107
|
-
* dropdownLimit: Infinity,
|
108
|
-
* feeds: [
|
109
|
-
* { ... }
|
110
|
-
* ...
|
111
|
-
* ]
|
112
|
-
* }
|
113
|
-
* } )
|
114
|
-
* .then( ... )
|
115
|
-
* .catch( ... );
|
116
|
-
* ```
|
117
|
-
*
|
118
|
-
* @default 10
|
119
|
-
*/
|
120
|
-
dropdownLimit?: number;
|
121
|
-
}
|
122
|
-
/**
|
123
|
-
* The mention feed descriptor. Used in {@link module:mention/mentionconfig~MentionConfig `config.mention`}.
|
124
|
-
*
|
125
|
-
* See {@link module:mention/mentionconfig~MentionConfig} to learn more.
|
126
|
-
*
|
127
|
-
* ```ts
|
128
|
-
* // Static configuration.
|
129
|
-
* const mentionFeedPeople = {
|
130
|
-
* marker: '@',
|
131
|
-
* feed: [ '@Alice', '@Bob', ... ],
|
132
|
-
* minimumCharacters: 2
|
133
|
-
* };
|
134
|
-
*
|
135
|
-
* // Simple synchronous callback.
|
136
|
-
* const mentionFeedTags = {
|
137
|
-
* marker: '#',
|
138
|
-
* feed: ( searchString: string ) => {
|
139
|
-
* return tags
|
140
|
-
* // Filter the tags list.
|
141
|
-
* .filter( tag => {
|
142
|
-
* return tag.toLowerCase().includes( queryText.toLowerCase() );
|
143
|
-
* } )
|
144
|
-
* }
|
145
|
-
* };
|
146
|
-
*
|
147
|
-
* const tags = [ 'wysiwyg', 'rte', 'rich-text-edior', 'collaboration', 'real-time', ... ];
|
148
|
-
*
|
149
|
-
* // Asynchronous callback.
|
150
|
-
* const mentionFeedPlaceholders = {
|
151
|
-
* marker: '$',
|
152
|
-
* feed: ( searchString: string ) => {
|
153
|
-
* return getMatchingPlaceholders( searchString );
|
154
|
-
* }
|
155
|
-
* };
|
156
|
-
*
|
157
|
-
* function getMatchingPlaceholders( searchString: string ) {
|
158
|
-
* return new Promise<Array<MentionFeedItem>>( resolve => {
|
159
|
-
* doSomeXHRQuery( result => {
|
160
|
-
* // console.log( result );
|
161
|
-
* // -> [ '$name', '$surname', '$postal', ... ]
|
162
|
-
*
|
163
|
-
* resolve( result );
|
164
|
-
* } );
|
165
|
-
* } );
|
166
|
-
* }
|
167
|
-
* ```
|
168
|
-
*/
|
169
|
-
export interface MentionFeed {
|
170
|
-
/**
|
171
|
-
* The character which triggers autocompletion for mention. It must be a single character.
|
172
|
-
*/
|
173
|
-
marker: string;
|
174
|
-
/**
|
175
|
-
* Autocomplete items. Provide an array for
|
176
|
-
* a static configuration (the mention feature will show matching items automatically) or a function which returns an array of
|
177
|
-
* matching items (directly, or via a promise). If a function is passed, it is executed in the context of the editor instance.
|
178
|
-
*/
|
179
|
-
feed: Array<MentionFeedItem> | FeedCallback;
|
180
|
-
/**
|
181
|
-
* Specifies after how many characters the autocomplete panel should be shown.
|
182
|
-
*
|
183
|
-
* @default 0
|
184
|
-
*/
|
185
|
-
minimumCharacters?: number;
|
186
|
-
/**
|
187
|
-
* A function that renders a {@link module:mention/mentionconfig~MentionFeedItem}
|
188
|
-
* to the autocomplete panel.
|
189
|
-
*/
|
190
|
-
itemRenderer?: ItemRenderer;
|
191
|
-
/**
|
192
|
-
* Specify how many available elements per feeds will the users be able to see in the dropdown list.
|
193
|
-
* If it not set, limit is inherited from {@link module:mention/mentionconfig~MentionConfig#dropdownLimit MentionConfig}.
|
194
|
-
*/
|
195
|
-
dropdownLimit?: number;
|
196
|
-
}
|
197
|
-
/**
|
198
|
-
* Function that renders an array of {@link module:mention/mentionconfig~MentionFeedItem} based on string input.
|
199
|
-
*/
|
200
|
-
export type FeedCallback = (searchString: string) => Array<MentionFeedItem> | Promise<Array<MentionFeedItem>>;
|
201
|
-
/**
|
202
|
-
* Function that takes renders a {@link module:mention/mentionconfig~MentionFeedObjectItem} as HTMLElement.
|
203
|
-
*/
|
204
|
-
export type ItemRenderer = (item: MentionFeedObjectItem) => HTMLElement | string;
|
205
|
-
/**
|
206
|
-
* The mention feed item. It may be defined as a string or a plain object.
|
207
|
-
*
|
208
|
-
* When defining a feed item as a plain object, the `id` property is obligatory. Additional properties
|
209
|
-
* can be used when customizing the mention feature bahavior
|
210
|
-
* (see {@glink features/mentions#customizing-the-autocomplete-list "Customizing the autocomplete list"}
|
211
|
-
* and {@glink features/mentions#customizing-the-output "Customizing the output"} sections).
|
212
|
-
*
|
213
|
-
* ```ts
|
214
|
-
* ClassicEditor
|
215
|
-
* .create( editorElement, {
|
216
|
-
* plugins: [ Mention, ... ],
|
217
|
-
* mention: {
|
218
|
-
* feeds: [
|
219
|
-
* // Feed items as objects.
|
220
|
-
* {
|
221
|
-
* marker: '@',
|
222
|
-
* feed: [
|
223
|
-
* {
|
224
|
-
* id: '@Barney',
|
225
|
-
* fullName: 'Barney Bloom'
|
226
|
-
* },
|
227
|
-
* {
|
228
|
-
* id: '@Lily',
|
229
|
-
* fullName: 'Lily Smith'
|
230
|
-
* },
|
231
|
-
* {
|
232
|
-
* id: '@Marshall',
|
233
|
-
* fullName: 'Marshall McDonald'
|
234
|
-
* },
|
235
|
-
* {
|
236
|
-
* id: '@Robin',
|
237
|
-
* fullName: 'Robin Hood'
|
238
|
-
* },
|
239
|
-
* {
|
240
|
-
* id: '@Ted',
|
241
|
-
* fullName: 'Ted Cruze'
|
242
|
-
* },
|
243
|
-
* // ...
|
244
|
-
* ]
|
245
|
-
* },
|
246
|
-
*
|
247
|
-
* // Feed items as plain strings.
|
248
|
-
* {
|
249
|
-
* marker: '#',
|
250
|
-
* feed: [ 'wysiwyg', 'rte', 'rich-text-edior', 'collaboration', 'real-time', ... ]
|
251
|
-
* },
|
252
|
-
* ]
|
253
|
-
* }
|
254
|
-
* } )
|
255
|
-
* .then( ... )
|
256
|
-
* .catch( ... );
|
257
|
-
* ```
|
258
|
-
*/
|
259
|
-
export type MentionFeedItem = string | MentionFeedObjectItem;
|
260
|
-
export type MentionFeedObjectItem = {
|
261
|
-
/**
|
262
|
-
* A unique ID of the mention. It must start with the marker character.
|
263
|
-
*/
|
264
|
-
id: string;
|
265
|
-
/**
|
266
|
-
* Text inserted into the editor when creating a mention.
|
267
|
-
*/
|
268
|
-
text?: string;
|
269
|
-
};
|
@@ -1,47 +0,0 @@
|
|
1
|
-
/**
|
2
|
-
* @license Copyright (c) 2003-2024, 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
|
-
* @license Copyright (c) 2003-2024, CKSource Holding sp. z o.o. All rights reserved.
|
7
|
-
* For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license
|
8
|
-
*/
|
9
|
-
/**
|
10
|
-
* @module mention/mentionediting
|
11
|
-
*/
|
12
|
-
import { Plugin } from 'ckeditor5/src/core.js';
|
13
|
-
import type { Element } from 'ckeditor5/src/engine.js';
|
14
|
-
import type { MentionAttribute } from './mention.js';
|
15
|
-
/**
|
16
|
-
* The mention editing feature.
|
17
|
-
*
|
18
|
-
* It introduces the {@link module:mention/mentioncommand~MentionCommand command} and the `mention`
|
19
|
-
* attribute in the {@link module:engine/model/model~Model model} which renders in the {@link module:engine/view/view view}
|
20
|
-
* as a `<span class="mention" data-mention="@mention">`.
|
21
|
-
*/
|
22
|
-
export default class MentionEditing extends Plugin {
|
23
|
-
/**
|
24
|
-
* @inheritDoc
|
25
|
-
*/
|
26
|
-
static get pluginName(): "MentionEditing";
|
27
|
-
/**
|
28
|
-
* @inheritDoc
|
29
|
-
*/
|
30
|
-
init(): void;
|
31
|
-
}
|
32
|
-
/**
|
33
|
-
* @internal
|
34
|
-
*/
|
35
|
-
export declare function _addMentionAttributes(baseMentionData: {
|
36
|
-
id: string;
|
37
|
-
_text: string;
|
38
|
-
}, data?: Record<string, unknown>): MentionAttribute;
|
39
|
-
/**
|
40
|
-
* Creates a mention attribute value from the provided view element and optional data.
|
41
|
-
*
|
42
|
-
* This function is exposed as
|
43
|
-
* {@link module:mention/mention~Mention#toMentionAttribute `editor.plugins.get( 'Mention' ).toMentionAttribute()`}.
|
44
|
-
*
|
45
|
-
* @internal
|
46
|
-
*/
|
47
|
-
export declare function _toMentionAttribute(viewElementOrMention: Element, data?: Record<string, unknown>): MentionAttribute | undefined;
|
@@ -1,106 +0,0 @@
|
|
1
|
-
/**
|
2
|
-
* @license Copyright (c) 2003-2024, 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
|
-
* @license Copyright (c) 2003-2024, CKSource Holding sp. z o.o. All rights reserved.
|
7
|
-
* For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license
|
8
|
-
*/
|
9
|
-
/**
|
10
|
-
* @module mention/mentionui
|
11
|
-
*/
|
12
|
-
import { Plugin, type Editor } from 'ckeditor5/src/core.js';
|
13
|
-
import { ContextualBalloon } from 'ckeditor5/src/ui.js';
|
14
|
-
/**
|
15
|
-
* The mention UI feature.
|
16
|
-
*/
|
17
|
-
export default class MentionUI extends Plugin {
|
18
|
-
/**
|
19
|
-
* The mention view.
|
20
|
-
*/
|
21
|
-
private readonly _mentionsView;
|
22
|
-
/**
|
23
|
-
* Stores mention feeds configurations.
|
24
|
-
*/
|
25
|
-
private _mentionsConfigurations;
|
26
|
-
/**
|
27
|
-
* The contextual balloon plugin instance.
|
28
|
-
*/
|
29
|
-
private _balloon;
|
30
|
-
private _items;
|
31
|
-
private _lastRequested?;
|
32
|
-
/**
|
33
|
-
* Debounced feed requester. It uses `lodash#debounce` method to delay function call.
|
34
|
-
*/
|
35
|
-
private _requestFeedDebounced;
|
36
|
-
/**
|
37
|
-
* @inheritDoc
|
38
|
-
*/
|
39
|
-
static get pluginName(): "MentionUI";
|
40
|
-
/**
|
41
|
-
* @inheritDoc
|
42
|
-
*/
|
43
|
-
static get requires(): readonly [typeof ContextualBalloon];
|
44
|
-
/**
|
45
|
-
* @inheritDoc
|
46
|
-
*/
|
47
|
-
constructor(editor: Editor);
|
48
|
-
/**
|
49
|
-
* @inheritDoc
|
50
|
-
*/
|
51
|
-
init(): void;
|
52
|
-
/**
|
53
|
-
* @inheritDoc
|
54
|
-
*/
|
55
|
-
destroy(): void;
|
56
|
-
/**
|
57
|
-
* Returns true when {@link #_mentionsView} is in the {@link module:ui/panel/balloon/contextualballoon~ContextualBalloon} and it is
|
58
|
-
* currently visible.
|
59
|
-
*/
|
60
|
-
private get _isUIVisible();
|
61
|
-
/**
|
62
|
-
* Creates the {@link #_mentionsView}.
|
63
|
-
*/
|
64
|
-
private _createMentionView;
|
65
|
-
/**
|
66
|
-
* Returns item renderer for the marker.
|
67
|
-
*/
|
68
|
-
private _getItemRenderer;
|
69
|
-
/**
|
70
|
-
* Requests a feed from a configured callbacks.
|
71
|
-
*/
|
72
|
-
private _requestFeed;
|
73
|
-
/**
|
74
|
-
* Registers a text watcher for the marker.
|
75
|
-
*/
|
76
|
-
private _setupTextWatcher;
|
77
|
-
/**
|
78
|
-
* Handles the feed response event data.
|
79
|
-
*/
|
80
|
-
private _handleFeedResponse;
|
81
|
-
/**
|
82
|
-
* Shows the mentions balloon. If the panel is already visible, it will reposition it.
|
83
|
-
*/
|
84
|
-
private _showOrUpdateUI;
|
85
|
-
/**
|
86
|
-
* Hides the mentions balloon and removes the 'mention' marker from the markers collection.
|
87
|
-
*/
|
88
|
-
private _hideUIAndRemoveMarker;
|
89
|
-
/**
|
90
|
-
* Renders a single item in the autocomplete list.
|
91
|
-
*/
|
92
|
-
private _renderItem;
|
93
|
-
/**
|
94
|
-
* Creates a position options object used to position the balloon panel.
|
95
|
-
*
|
96
|
-
* @param mentionMarker
|
97
|
-
* @param preferredPosition The name of the last matched position name.
|
98
|
-
*/
|
99
|
-
private _getBalloonPanelPositionData;
|
100
|
-
}
|
101
|
-
/**
|
102
|
-
* Creates a RegExp pattern for the marker.
|
103
|
-
*
|
104
|
-
* Function has to be exported to achieve 100% code coverage.
|
105
|
-
*/
|
106
|
-
export declare function createRegExp(marker: string, minimumCharacters: number): RegExp;
|
@@ -1,45 +0,0 @@
|
|
1
|
-
/**
|
2
|
-
* @license Copyright (c) 2003-2024, 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
|
-
* @license Copyright (c) 2003-2024, CKSource Holding sp. z o.o. All rights reserved.
|
7
|
-
* For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license
|
8
|
-
*/
|
9
|
-
/**
|
10
|
-
* @module mention/ui/domwrapperview
|
11
|
-
*/
|
12
|
-
import { View } from 'ckeditor5/src/ui.js';
|
13
|
-
import type { Locale } from 'ckeditor5/src/utils.js';
|
14
|
-
/**
|
15
|
-
* This class wraps DOM element as a CKEditor5 UI View.
|
16
|
-
*
|
17
|
-
* It allows to render any DOM element and use it in mentions list.
|
18
|
-
*/
|
19
|
-
export default class DomWrapperView extends View {
|
20
|
-
/**
|
21
|
-
* The DOM element for which wrapper was created.
|
22
|
-
*/
|
23
|
-
domElement: HTMLElement;
|
24
|
-
/**
|
25
|
-
* Controls whether the dom wrapper view is "on". This is in line with {@link module:ui/button/button~Button#isOn} property.
|
26
|
-
*
|
27
|
-
* @observable
|
28
|
-
* @default true
|
29
|
-
*/
|
30
|
-
isOn: boolean;
|
31
|
-
/**
|
32
|
-
* Creates an instance of {@link module:mention/ui/domwrapperview~DomWrapperView} class.
|
33
|
-
*
|
34
|
-
* Also see {@link #render}.
|
35
|
-
*/
|
36
|
-
constructor(locale: Locale, domElement: HTMLElement);
|
37
|
-
/**
|
38
|
-
* @inheritDoc
|
39
|
-
*/
|
40
|
-
render(): void;
|
41
|
-
/**
|
42
|
-
* Focuses the DOM element.
|
43
|
-
*/
|
44
|
-
focus(): void;
|
45
|
-
}
|
@@ -1,19 +0,0 @@
|
|
1
|
-
/**
|
2
|
-
* @license Copyright (c) 2003-2024, 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
|
-
* @license Copyright (c) 2003-2024, CKSource Holding sp. z o.o. All rights reserved.
|
7
|
-
* For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license
|
8
|
-
*/
|
9
|
-
/**
|
10
|
-
* @module mention/ui/mentionlistitemview
|
11
|
-
*/
|
12
|
-
import { ListItemView } from 'ckeditor5/src/ui.js';
|
13
|
-
import type { MentionFeedItem } from '../mentionconfig.js';
|
14
|
-
export default class MentionListItemView extends ListItemView {
|
15
|
-
item: MentionFeedItem;
|
16
|
-
marker: string;
|
17
|
-
highlight(): void;
|
18
|
-
removeHighlight(): void;
|
19
|
-
}
|
@@ -1,64 +0,0 @@
|
|
1
|
-
/**
|
2
|
-
* @license Copyright (c) 2003-2024, 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
|
-
* @license Copyright (c) 2003-2024, CKSource Holding sp. z o.o. All rights reserved.
|
7
|
-
* For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license
|
8
|
-
*/
|
9
|
-
/**
|
10
|
-
* @module mention/ui/mentionsview
|
11
|
-
*/
|
12
|
-
import { ListView } from 'ckeditor5/src/ui.js';
|
13
|
-
import { type Locale } from 'ckeditor5/src/utils.js';
|
14
|
-
import type MentionListItemView from './mentionlistitemview.js';
|
15
|
-
import '../../theme/mentionui.css';
|
16
|
-
/**
|
17
|
-
* The mention ui view.
|
18
|
-
*/
|
19
|
-
export default class MentionsView extends ListView {
|
20
|
-
selected: MentionListItemView | undefined;
|
21
|
-
position: string | undefined;
|
22
|
-
/**
|
23
|
-
* @inheritDoc
|
24
|
-
*/
|
25
|
-
constructor(locale: Locale);
|
26
|
-
/**
|
27
|
-
* {@link #select Selects} the first item.
|
28
|
-
*/
|
29
|
-
selectFirst(): void;
|
30
|
-
/**
|
31
|
-
* Selects next item to the currently {@link #select selected}.
|
32
|
-
*
|
33
|
-
* If the last item is already selected, it will select the first item.
|
34
|
-
*/
|
35
|
-
selectNext(): void;
|
36
|
-
/**
|
37
|
-
* Selects previous item to the currently {@link #select selected}.
|
38
|
-
*
|
39
|
-
* If the first item is already selected, it will select the last item.
|
40
|
-
*/
|
41
|
-
selectPrevious(): void;
|
42
|
-
/**
|
43
|
-
* Marks item at a given index as selected.
|
44
|
-
*
|
45
|
-
* Handles selection cycling when passed index is out of bounds:
|
46
|
-
* - if the index is lower than 0, it will select the last item,
|
47
|
-
* - if the index is higher than the last item index, it will select the first item.
|
48
|
-
*
|
49
|
-
* @param index Index of an item to be marked as selected.
|
50
|
-
*/
|
51
|
-
select(index: number): void;
|
52
|
-
/**
|
53
|
-
* Triggers the `execute` event on the {@link #select selected} item.
|
54
|
-
*/
|
55
|
-
executeSelected(): void;
|
56
|
-
/**
|
57
|
-
* Checks if an item is visible in the scrollable area.
|
58
|
-
*
|
59
|
-
* The item is considered visible when:
|
60
|
-
* - its top boundary is inside the scrollable rect
|
61
|
-
* - its bottom boundary is inside the scrollable rect (the whole item must be visible)
|
62
|
-
*/
|
63
|
-
private _isItemVisibleInScrolledArea;
|
64
|
-
}
|