@ckeditor/ckeditor5-mention 38.0.1 → 38.1.1

Sign up to get free protection for your applications and to get access to all the features.
@@ -1,37 +1,37 @@
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/ui/domwrapperview
7
- */
8
- import { View } from 'ckeditor5/src/ui';
9
- import type { Locale } from 'ckeditor5/src/utils';
10
- /**
11
- * This class wraps DOM element as a CKEditor5 UI View.
12
- *
13
- * It allows to render any DOM element and use it in mentions list.
14
- */
15
- export default class DomWrapperView extends View {
16
- /**
17
- * The DOM element for which wrapper was created.
18
- */
19
- domElement: HTMLElement;
20
- /**
21
- * Controls whether the dom wrapper view is "on". This is in line with {@link module:ui/button/button~Button#isOn} property.
22
- *
23
- * @observable
24
- * @default true
25
- */
26
- isOn: boolean;
27
- /**
28
- * Creates an instance of {@link module:mention/ui/domwrapperview~DomWrapperView} class.
29
- *
30
- * Also see {@link #render}.
31
- */
32
- constructor(locale: Locale, domElement: HTMLElement);
33
- /**
34
- * @inheritDoc
35
- */
36
- render(): void;
37
- }
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/ui/domwrapperview
7
+ */
8
+ import { View } from 'ckeditor5/src/ui';
9
+ import type { Locale } from 'ckeditor5/src/utils';
10
+ /**
11
+ * This class wraps DOM element as a CKEditor5 UI View.
12
+ *
13
+ * It allows to render any DOM element and use it in mentions list.
14
+ */
15
+ export default class DomWrapperView extends View {
16
+ /**
17
+ * The DOM element for which wrapper was created.
18
+ */
19
+ domElement: HTMLElement;
20
+ /**
21
+ * Controls whether the dom wrapper view is "on". This is in line with {@link module:ui/button/button~Button#isOn} property.
22
+ *
23
+ * @observable
24
+ * @default true
25
+ */
26
+ isOn: boolean;
27
+ /**
28
+ * Creates an instance of {@link module:mention/ui/domwrapperview~DomWrapperView} class.
29
+ *
30
+ * Also see {@link #render}.
31
+ */
32
+ constructor(locale: Locale, domElement: HTMLElement);
33
+ /**
34
+ * @inheritDoc
35
+ */
36
+ render(): void;
37
+ }
@@ -1,51 +1,51 @@
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/ui/domwrapperview
7
- */
8
- import { View } from 'ckeditor5/src/ui';
9
- /**
10
- * This class wraps DOM element as a CKEditor5 UI View.
11
- *
12
- * It allows to render any DOM element and use it in mentions list.
13
- */
14
- export default class DomWrapperView extends View {
15
- /**
16
- * Creates an instance of {@link module:mention/ui/domwrapperview~DomWrapperView} class.
17
- *
18
- * Also see {@link #render}.
19
- */
20
- constructor(locale, domElement) {
21
- super(locale);
22
- // Disable template rendering on this view.
23
- this.template = undefined;
24
- this.domElement = domElement;
25
- // Render dom wrapper as a button.
26
- this.domElement.classList.add('ck-button');
27
- this.set('isOn', false);
28
- // Handle isOn state as in buttons.
29
- this.on('change:isOn', (evt, name, isOn) => {
30
- if (isOn) {
31
- this.domElement.classList.add('ck-on');
32
- this.domElement.classList.remove('ck-off');
33
- }
34
- else {
35
- this.domElement.classList.add('ck-off');
36
- this.domElement.classList.remove('ck-on');
37
- }
38
- });
39
- // Pass click event as execute event.
40
- this.listenTo(this.domElement, 'click', () => {
41
- this.fire('execute');
42
- });
43
- }
44
- /**
45
- * @inheritDoc
46
- */
47
- render() {
48
- super.render();
49
- this.element = this.domElement;
50
- }
51
- }
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/ui/domwrapperview
7
+ */
8
+ import { View } from 'ckeditor5/src/ui';
9
+ /**
10
+ * This class wraps DOM element as a CKEditor5 UI View.
11
+ *
12
+ * It allows to render any DOM element and use it in mentions list.
13
+ */
14
+ export default class DomWrapperView extends View {
15
+ /**
16
+ * Creates an instance of {@link module:mention/ui/domwrapperview~DomWrapperView} class.
17
+ *
18
+ * Also see {@link #render}.
19
+ */
20
+ constructor(locale, domElement) {
21
+ super(locale);
22
+ // Disable template rendering on this view.
23
+ this.template = undefined;
24
+ this.domElement = domElement;
25
+ // Render dom wrapper as a button.
26
+ this.domElement.classList.add('ck-button');
27
+ this.set('isOn', false);
28
+ // Handle isOn state as in buttons.
29
+ this.on('change:isOn', (evt, name, isOn) => {
30
+ if (isOn) {
31
+ this.domElement.classList.add('ck-on');
32
+ this.domElement.classList.remove('ck-off');
33
+ }
34
+ else {
35
+ this.domElement.classList.add('ck-off');
36
+ this.domElement.classList.remove('ck-on');
37
+ }
38
+ });
39
+ // Pass click event as execute event.
40
+ this.listenTo(this.domElement, 'click', () => {
41
+ this.fire('execute');
42
+ });
43
+ }
44
+ /**
45
+ * @inheritDoc
46
+ */
47
+ render() {
48
+ super.render();
49
+ this.element = this.domElement;
50
+ }
51
+ }
@@ -1,15 +1,15 @@
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/ui/mentionlistitemview
7
- */
8
- import { ListItemView } from 'ckeditor5/src/ui';
9
- import type { MentionFeedItem } from '../mentionconfig';
10
- export default class MentionListItemView extends ListItemView {
11
- item: MentionFeedItem;
12
- marker: string;
13
- highlight(): void;
14
- removeHighlight(): void;
15
- }
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/ui/mentionlistitemview
7
+ */
8
+ import { ListItemView } from 'ckeditor5/src/ui';
9
+ import type { MentionFeedItem } from '../mentionconfig';
10
+ export default class MentionListItemView extends ListItemView {
11
+ item: MentionFeedItem;
12
+ marker: string;
13
+ highlight(): void;
14
+ removeHighlight(): void;
15
+ }
@@ -1,18 +1,18 @@
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/ui/mentionlistitemview
7
- */
8
- import { ListItemView } from 'ckeditor5/src/ui';
9
- export default class MentionListItemView extends ListItemView {
10
- highlight() {
11
- const child = this.children.first;
12
- child.isOn = true;
13
- }
14
- removeHighlight() {
15
- const child = this.children.first;
16
- child.isOn = false;
17
- }
18
- }
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/ui/mentionlistitemview
7
+ */
8
+ import { ListItemView } from 'ckeditor5/src/ui';
9
+ export default class MentionListItemView extends ListItemView {
10
+ highlight() {
11
+ const child = this.children.first;
12
+ child.isOn = true;
13
+ }
14
+ removeHighlight() {
15
+ const child = this.children.first;
16
+ child.isOn = false;
17
+ }
18
+ }
@@ -1,60 +1,60 @@
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/ui/mentionsview
7
- */
8
- import { ListView } from 'ckeditor5/src/ui';
9
- import { type Locale } from 'ckeditor5/src/utils';
10
- import type MentionListItemView from './mentionlistitemview';
11
- import '../../theme/mentionui.css';
12
- /**
13
- * The mention ui view.
14
- */
15
- export default class MentionsView extends ListView {
16
- selected: MentionListItemView | undefined;
17
- position: string | undefined;
18
- /**
19
- * @inheritDoc
20
- */
21
- constructor(locale: Locale);
22
- /**
23
- * {@link #select Selects} the first item.
24
- */
25
- selectFirst(): void;
26
- /**
27
- * Selects next item to the currently {@link #select selected}.
28
- *
29
- * If the last item is already selected, it will select the first item.
30
- */
31
- selectNext(): void;
32
- /**
33
- * Selects previous item to the currently {@link #select selected}.
34
- *
35
- * If the first item is already selected, it will select the last item.
36
- */
37
- selectPrevious(): void;
38
- /**
39
- * Marks item at a given index as selected.
40
- *
41
- * Handles selection cycling when passed index is out of bounds:
42
- * - if the index is lower than 0, it will select the last item,
43
- * - if the index is higher than the last item index, it will select the first item.
44
- *
45
- * @param index Index of an item to be marked as selected.
46
- */
47
- select(index: number): void;
48
- /**
49
- * Triggers the `execute` event on the {@link #select selected} item.
50
- */
51
- executeSelected(): void;
52
- /**
53
- * Checks if an item is visible in the scrollable area.
54
- *
55
- * The item is considered visible when:
56
- * - its top boundary is inside the scrollable rect
57
- * - its bottom boundary is inside the scrollable rect (the whole item must be visible)
58
- */
59
- private _isItemVisibleInScrolledArea;
60
- }
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/ui/mentionsview
7
+ */
8
+ import { ListView } from 'ckeditor5/src/ui';
9
+ import { type Locale } from 'ckeditor5/src/utils';
10
+ import type MentionListItemView from './mentionlistitemview';
11
+ import '../../theme/mentionui.css';
12
+ /**
13
+ * The mention ui view.
14
+ */
15
+ export default class MentionsView extends ListView {
16
+ selected: MentionListItemView | undefined;
17
+ position: string | undefined;
18
+ /**
19
+ * @inheritDoc
20
+ */
21
+ constructor(locale: Locale);
22
+ /**
23
+ * {@link #select Selects} the first item.
24
+ */
25
+ selectFirst(): void;
26
+ /**
27
+ * Selects next item to the currently {@link #select selected}.
28
+ *
29
+ * If the last item is already selected, it will select the first item.
30
+ */
31
+ selectNext(): void;
32
+ /**
33
+ * Selects previous item to the currently {@link #select selected}.
34
+ *
35
+ * If the first item is already selected, it will select the last item.
36
+ */
37
+ selectPrevious(): void;
38
+ /**
39
+ * Marks item at a given index as selected.
40
+ *
41
+ * Handles selection cycling when passed index is out of bounds:
42
+ * - if the index is lower than 0, it will select the last item,
43
+ * - if the index is higher than the last item index, it will select the first item.
44
+ *
45
+ * @param index Index of an item to be marked as selected.
46
+ */
47
+ select(index: number): void;
48
+ /**
49
+ * Triggers the `execute` event on the {@link #select selected} item.
50
+ */
51
+ executeSelected(): void;
52
+ /**
53
+ * Checks if an item is visible in the scrollable area.
54
+ *
55
+ * The item is considered visible when:
56
+ * - its top boundary is inside the scrollable rect
57
+ * - its bottom boundary is inside the scrollable rect (the whole item must be visible)
58
+ */
59
+ private _isItemVisibleInScrolledArea;
60
+ }
@@ -1,104 +1,104 @@
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/ui/mentionsview
7
- */
8
- import { ListView } from 'ckeditor5/src/ui';
9
- import { Rect } from 'ckeditor5/src/utils';
10
- import '../../theme/mentionui.css';
11
- /**
12
- * The mention ui view.
13
- */
14
- export default class MentionsView extends ListView {
15
- /**
16
- * @inheritDoc
17
- */
18
- constructor(locale) {
19
- super(locale);
20
- this.extendTemplate({
21
- attributes: {
22
- class: [
23
- 'ck-mentions'
24
- ],
25
- tabindex: '-1'
26
- }
27
- });
28
- }
29
- /**
30
- * {@link #select Selects} the first item.
31
- */
32
- selectFirst() {
33
- this.select(0);
34
- }
35
- /**
36
- * Selects next item to the currently {@link #select selected}.
37
- *
38
- * If the last item is already selected, it will select the first item.
39
- */
40
- selectNext() {
41
- const item = this.selected;
42
- const index = this.items.getIndex(item);
43
- this.select(index + 1);
44
- }
45
- /**
46
- * Selects previous item to the currently {@link #select selected}.
47
- *
48
- * If the first item is already selected, it will select the last item.
49
- */
50
- selectPrevious() {
51
- const item = this.selected;
52
- const index = this.items.getIndex(item);
53
- this.select(index - 1);
54
- }
55
- /**
56
- * Marks item at a given index as selected.
57
- *
58
- * Handles selection cycling when passed index is out of bounds:
59
- * - if the index is lower than 0, it will select the last item,
60
- * - if the index is higher than the last item index, it will select the first item.
61
- *
62
- * @param index Index of an item to be marked as selected.
63
- */
64
- select(index) {
65
- let indexToGet = 0;
66
- if (index > 0 && index < this.items.length) {
67
- indexToGet = index;
68
- }
69
- else if (index < 0) {
70
- indexToGet = this.items.length - 1;
71
- }
72
- const item = this.items.get(indexToGet);
73
- // Return early if item is already selected.
74
- if (this.selected === item) {
75
- return;
76
- }
77
- // Remove highlight of previously selected item.
78
- if (this.selected) {
79
- this.selected.removeHighlight();
80
- }
81
- item.highlight();
82
- this.selected = item;
83
- // Scroll the mentions view to the selected element.
84
- if (!this._isItemVisibleInScrolledArea(item)) {
85
- this.element.scrollTop = item.element.offsetTop;
86
- }
87
- }
88
- /**
89
- * Triggers the `execute` event on the {@link #select selected} item.
90
- */
91
- executeSelected() {
92
- this.selected.fire('execute');
93
- }
94
- /**
95
- * Checks if an item is visible in the scrollable area.
96
- *
97
- * The item is considered visible when:
98
- * - its top boundary is inside the scrollable rect
99
- * - its bottom boundary is inside the scrollable rect (the whole item must be visible)
100
- */
101
- _isItemVisibleInScrolledArea(item) {
102
- return new Rect(this.element).contains(new Rect(item.element));
103
- }
104
- }
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/ui/mentionsview
7
+ */
8
+ import { ListView } from 'ckeditor5/src/ui';
9
+ import { Rect } from 'ckeditor5/src/utils';
10
+ import '../../theme/mentionui.css';
11
+ /**
12
+ * The mention ui view.
13
+ */
14
+ export default class MentionsView extends ListView {
15
+ /**
16
+ * @inheritDoc
17
+ */
18
+ constructor(locale) {
19
+ super(locale);
20
+ this.extendTemplate({
21
+ attributes: {
22
+ class: [
23
+ 'ck-mentions'
24
+ ],
25
+ tabindex: '-1'
26
+ }
27
+ });
28
+ }
29
+ /**
30
+ * {@link #select Selects} the first item.
31
+ */
32
+ selectFirst() {
33
+ this.select(0);
34
+ }
35
+ /**
36
+ * Selects next item to the currently {@link #select selected}.
37
+ *
38
+ * If the last item is already selected, it will select the first item.
39
+ */
40
+ selectNext() {
41
+ const item = this.selected;
42
+ const index = this.items.getIndex(item);
43
+ this.select(index + 1);
44
+ }
45
+ /**
46
+ * Selects previous item to the currently {@link #select selected}.
47
+ *
48
+ * If the first item is already selected, it will select the last item.
49
+ */
50
+ selectPrevious() {
51
+ const item = this.selected;
52
+ const index = this.items.getIndex(item);
53
+ this.select(index - 1);
54
+ }
55
+ /**
56
+ * Marks item at a given index as selected.
57
+ *
58
+ * Handles selection cycling when passed index is out of bounds:
59
+ * - if the index is lower than 0, it will select the last item,
60
+ * - if the index is higher than the last item index, it will select the first item.
61
+ *
62
+ * @param index Index of an item to be marked as selected.
63
+ */
64
+ select(index) {
65
+ let indexToGet = 0;
66
+ if (index > 0 && index < this.items.length) {
67
+ indexToGet = index;
68
+ }
69
+ else if (index < 0) {
70
+ indexToGet = this.items.length - 1;
71
+ }
72
+ const item = this.items.get(indexToGet);
73
+ // Return early if item is already selected.
74
+ if (this.selected === item) {
75
+ return;
76
+ }
77
+ // Remove highlight of previously selected item.
78
+ if (this.selected) {
79
+ this.selected.removeHighlight();
80
+ }
81
+ item.highlight();
82
+ this.selected = item;
83
+ // Scroll the mentions view to the selected element.
84
+ if (!this._isItemVisibleInScrolledArea(item)) {
85
+ this.element.scrollTop = item.element.offsetTop;
86
+ }
87
+ }
88
+ /**
89
+ * Triggers the `execute` event on the {@link #select selected} item.
90
+ */
91
+ executeSelected() {
92
+ this.selected.fire('execute');
93
+ }
94
+ /**
95
+ * Checks if an item is visible in the scrollable area.
96
+ *
97
+ * The item is considered visible when:
98
+ * - its top boundary is inside the scrollable rect
99
+ * - its bottom boundary is inside the scrollable rect (the whole item must be visible)
100
+ */
101
+ _isItemVisibleInScrolledArea(item) {
102
+ return new Rect(this.element).contains(new Rect(item.element));
103
+ }
104
+ }