@ckeditor/ckeditor5-mention 39.0.1 → 40.0.0

package/src/ui/domwrapperview.d.ts

@@ -1,37 +1,41 @@
-/**
- * @license Copyright (c) 2003-2023, CKSource Holding sp. z o.o. All rights reserved.
- * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license
- */
-/**
- * @module mention/ui/domwrapperview
- */
-import { View } from 'ckeditor5/src/ui';
-import type { Locale } from 'ckeditor5/src/utils';
-/**
- * This class wraps DOM element as a CKEditor5 UI View.
- *
- * It allows to render any DOM element and use it in mentions list.
- */
-export default class DomWrapperView extends View {
-    /**
-     * The DOM element for which wrapper was created.
-     */
-    domElement: HTMLElement;
-    /**
-     * Controls whether the dom wrapper view is "on". This is in line with {@link module:ui/button/button~Button#isOn} property.
-     *
-     * @observable
-     * @default true
-     */
-    isOn: boolean;
-    /**
-     * Creates an instance of {@link module:mention/ui/domwrapperview~DomWrapperView} class.
-     *
-     * Also see {@link #render}.
-     */
-    constructor(locale: Locale, domElement: HTMLElement);
-    /**
-     * @inheritDoc
-     */
-    render(): void;
-}
+/**
+ * @license Copyright (c) 2003-2023, CKSource Holding sp. z o.o. All rights reserved.
+ * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license
+ */
+/**
+ * @module mention/ui/domwrapperview
+ */
+import { View } from 'ckeditor5/src/ui';
+import type { Locale } from 'ckeditor5/src/utils';
+/**
+ * This class wraps DOM element as a CKEditor5 UI View.
+ *
+ * It allows to render any DOM element and use it in mentions list.
+ */
+export default class DomWrapperView extends View {
+    /**
+     * The DOM element for which wrapper was created.
+     */
+    domElement: HTMLElement;
+    /**
+     * Controls whether the dom wrapper view is "on". This is in line with {@link module:ui/button/button~Button#isOn} property.
+     *
+     * @observable
+     * @default true
+     */
+    isOn: boolean;
+    /**
+     * Creates an instance of {@link module:mention/ui/domwrapperview~DomWrapperView} class.
+     *
+     * Also see {@link #render}.
+     */
+    constructor(locale: Locale, domElement: HTMLElement);
+    /**
+     * @inheritDoc
+     */
+    render(): void;
+    /**
+     * Focuses the DOM element.
+     */
+    focus(): void;
+}

package/src/ui/domwrapperview.js

@@ -1,51 +1,57 @@
-/**
- * @license Copyright (c) 2003-2023, CKSource Holding sp. z o.o. All rights reserved.
- * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license
- */
-/**
- * @module mention/ui/domwrapperview
- */
-import { View } from 'ckeditor5/src/ui';
-/**
- * This class wraps DOM element as a CKEditor5 UI View.
- *
- * It allows to render any DOM element and use it in mentions list.
- */
-export default class DomWrapperView extends View {
-    /**
-     * Creates an instance of {@link module:mention/ui/domwrapperview~DomWrapperView} class.
-     *
-     * Also see {@link #render}.
-     */
-    constructor(locale, domElement) {
-        super(locale);
-        // Disable template rendering on this view.
-        this.template = undefined;
-        this.domElement = domElement;
-        // Render dom wrapper as a button.
-        this.domElement.classList.add('ck-button');
-        this.set('isOn', false);
-        // Handle isOn state as in buttons.
-        this.on('change:isOn', (evt, name, isOn) => {
-            if (isOn) {
-                this.domElement.classList.add('ck-on');
-                this.domElement.classList.remove('ck-off');
-            }
-            else {
-                this.domElement.classList.add('ck-off');
-                this.domElement.classList.remove('ck-on');
-            }
-        });
-        // Pass click event as execute event.
-        this.listenTo(this.domElement, 'click', () => {
-            this.fire('execute');
-        });
-    }
-    /**
-     * @inheritDoc
-     */
-    render() {
-        super.render();
-        this.element = this.domElement;
-    }
-}
+/**
+ * @license Copyright (c) 2003-2023, CKSource Holding sp. z o.o. All rights reserved.
+ * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license
+ */
+/**
+ * @module mention/ui/domwrapperview
+ */
+import { View } from 'ckeditor5/src/ui';
+/**
+ * This class wraps DOM element as a CKEditor5 UI View.
+ *
+ * It allows to render any DOM element and use it in mentions list.
+ */
+export default class DomWrapperView extends View {
+    /**
+     * Creates an instance of {@link module:mention/ui/domwrapperview~DomWrapperView} class.
+     *
+     * Also see {@link #render}.
+     */
+    constructor(locale, domElement) {
+        super(locale);
+        // Disable template rendering on this view.
+        this.template = undefined;
+        this.domElement = domElement;
+        // Render dom wrapper as a button.
+        this.domElement.classList.add('ck-button');
+        this.set('isOn', false);
+        // Handle isOn state as in buttons.
+        this.on('change:isOn', (evt, name, isOn) => {
+            if (isOn) {
+                this.domElement.classList.add('ck-on');
+                this.domElement.classList.remove('ck-off');
+            }
+            else {
+                this.domElement.classList.add('ck-off');
+                this.domElement.classList.remove('ck-on');
+            }
+        });
+        // Pass click event as execute event.
+        this.listenTo(this.domElement, 'click', () => {
+            this.fire('execute');
+        });
+    }
+    /**
+     * @inheritDoc
+     */
+    render() {
+        super.render();
+        this.element = this.domElement;
+    }
+    /**
+     * Focuses the DOM element.
+     */
+    focus() {
+        this.domElement.focus();
+    }
+}

package/src/ui/mentionlistitemview.d.ts

@@ -1,15 +1,15 @@
-/**
- * @license Copyright (c) 2003-2023, CKSource Holding sp. z o.o. All rights reserved.
- * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license
- */
-/**
- * @module mention/ui/mentionlistitemview
- */
-import { ListItemView } from 'ckeditor5/src/ui';
-import type { MentionFeedItem } from '../mentionconfig';
-export default class MentionListItemView extends ListItemView {
-    item: MentionFeedItem;
-    marker: string;
-    highlight(): void;
-    removeHighlight(): void;
-}
+/**
+ * @license Copyright (c) 2003-2023, CKSource Holding sp. z o.o. All rights reserved.
+ * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license
+ */
+/**
+ * @module mention/ui/mentionlistitemview
+ */
+import { ListItemView } from 'ckeditor5/src/ui';
+import type { MentionFeedItem } from '../mentionconfig';
+export default class MentionListItemView extends ListItemView {
+    item: MentionFeedItem;
+    marker: string;
+    highlight(): void;
+    removeHighlight(): void;
+}

package/src/ui/mentionlistitemview.js

@@ -1,18 +1,18 @@
-/**
- * @license Copyright (c) 2003-2023, CKSource Holding sp. z o.o. All rights reserved.
- * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license
- */
-/**
- * @module mention/ui/mentionlistitemview
- */
-import { ListItemView } from 'ckeditor5/src/ui';
-export default class MentionListItemView extends ListItemView {
-    highlight() {
-        const child = this.children.first;
-        child.isOn = true;
-    }
-    removeHighlight() {
-        const child = this.children.first;
-        child.isOn = false;
-    }
-}
+/**
+ * @license Copyright (c) 2003-2023, CKSource Holding sp. z o.o. All rights reserved.
+ * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license
+ */
+/**
+ * @module mention/ui/mentionlistitemview
+ */
+import { ListItemView } from 'ckeditor5/src/ui';
+export default class MentionListItemView extends ListItemView {
+    highlight() {
+        const child = this.children.first;
+        child.isOn = true;
+    }
+    removeHighlight() {
+        const child = this.children.first;
+        child.isOn = false;
+    }
+}

package/src/ui/mentionsview.d.ts

@@ -1,60 +1,60 @@
-/**
- * @license Copyright (c) 2003-2023, CKSource Holding sp. z o.o. All rights reserved.
- * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license
- */
-/**
- * @module mention/ui/mentionsview
- */
-import { ListView } from 'ckeditor5/src/ui';
-import { type Locale } from 'ckeditor5/src/utils';
-import type MentionListItemView from './mentionlistitemview';
-import '../../theme/mentionui.css';
-/**
- * The mention ui view.
- */
-export default class MentionsView extends ListView {
-    selected: MentionListItemView | undefined;
-    position: string | undefined;
-    /**
-     * @inheritDoc
-     */
-    constructor(locale: Locale);
-    /**
-     * {@link #select Selects} the first item.
-     */
-    selectFirst(): void;
-    /**
-     * Selects next item to the currently {@link #select selected}.
-     *
-     * If the last item is already selected, it will select the first item.
-     */
-    selectNext(): void;
-    /**
-     * Selects previous item to the currently {@link #select selected}.
-     *
-     * If the first item is already selected, it will select the last item.
-     */
-    selectPrevious(): void;
-    /**
-     * Marks item at a given index as selected.
-     *
-     * Handles selection cycling when passed index is out of bounds:
-     * - if the index is lower than 0, it will select the last item,
-     * - if the index is higher than the last item index, it will select the first item.
-     *
-     * @param index Index of an item to be marked as selected.
-     */
-    select(index: number): void;
-    /**
-     * Triggers the `execute` event on the {@link #select selected} item.
-     */
-    executeSelected(): void;
-    /**
-     * Checks if an item is visible in the scrollable area.
-     *
-     * The item is considered visible when:
-     * - its top boundary is inside the scrollable rect
-     * - its bottom boundary is inside the scrollable rect (the whole item must be visible)
-     */
-    private _isItemVisibleInScrolledArea;
-}
+/**
+ * @license Copyright (c) 2003-2023, CKSource Holding sp. z o.o. All rights reserved.
+ * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license
+ */
+/**
+ * @module mention/ui/mentionsview
+ */
+import { ListView } from 'ckeditor5/src/ui';
+import { type Locale } from 'ckeditor5/src/utils';
+import type MentionListItemView from './mentionlistitemview';
+import '../../theme/mentionui.css';
+/**
+ * The mention ui view.
+ */
+export default class MentionsView extends ListView {
+    selected: MentionListItemView | undefined;
+    position: string | undefined;
+    /**
+     * @inheritDoc
+     */
+    constructor(locale: Locale);
+    /**
+     * {@link #select Selects} the first item.
+     */
+    selectFirst(): void;
+    /**
+     * Selects next item to the currently {@link #select selected}.
+     *
+     * If the last item is already selected, it will select the first item.
+     */
+    selectNext(): void;
+    /**
+     * Selects previous item to the currently {@link #select selected}.
+     *
+     * If the first item is already selected, it will select the last item.
+     */
+    selectPrevious(): void;
+    /**
+     * Marks item at a given index as selected.
+     *
+     * Handles selection cycling when passed index is out of bounds:
+     * - if the index is lower than 0, it will select the last item,
+     * - if the index is higher than the last item index, it will select the first item.
+     *
+     * @param index Index of an item to be marked as selected.
+     */
+    select(index: number): void;
+    /**
+     * Triggers the `execute` event on the {@link #select selected} item.
+     */
+    executeSelected(): void;
+    /**
+     * Checks if an item is visible in the scrollable area.
+     *
+     * The item is considered visible when:
+     * - its top boundary is inside the scrollable rect
+     * - its bottom boundary is inside the scrollable rect (the whole item must be visible)
+     */
+    private _isItemVisibleInScrolledArea;
+}

package/src/ui/mentionsview.js

@@ -1,104 +1,104 @@
-/**
- * @license Copyright (c) 2003-2023, CKSource Holding sp. z o.o. All rights reserved.
- * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license
- */
-/**
- * @module mention/ui/mentionsview
- */
-import { ListView } from 'ckeditor5/src/ui';
-import { Rect } from 'ckeditor5/src/utils';
-import '../../theme/mentionui.css';
-/**
- * The mention ui view.
- */
-export default class MentionsView extends ListView {
-    /**
-     * @inheritDoc
-     */
-    constructor(locale) {
-        super(locale);
-        this.extendTemplate({
-            attributes: {
-                class: [
-                    'ck-mentions'
-                ],
-                tabindex: '-1'
-            }
-        });
-    }
-    /**
-     * {@link #select Selects} the first item.
-     */
-    selectFirst() {
-        this.select(0);
-    }
-    /**
-     * Selects next item to the currently {@link #select selected}.
-     *
-     * If the last item is already selected, it will select the first item.
-     */
-    selectNext() {
-        const item = this.selected;
-        const index = this.items.getIndex(item);
-        this.select(index + 1);
-    }
-    /**
-     * Selects previous item to the currently {@link #select selected}.
-     *
-     * If the first item is already selected, it will select the last item.
-     */
-    selectPrevious() {
-        const item = this.selected;
-        const index = this.items.getIndex(item);
-        this.select(index - 1);
-    }
-    /**
-     * Marks item at a given index as selected.
-     *
-     * Handles selection cycling when passed index is out of bounds:
-     * - if the index is lower than 0, it will select the last item,
-     * - if the index is higher than the last item index, it will select the first item.
-     *
-     * @param index Index of an item to be marked as selected.
-     */
-    select(index) {
-        let indexToGet = 0;
-        if (index > 0 && index < this.items.length) {
-            indexToGet = index;
-        }
-        else if (index < 0) {
-            indexToGet = this.items.length - 1;
-        }
-        const item = this.items.get(indexToGet);
-        // Return early if item is already selected.
-        if (this.selected === item) {
-            return;
-        }
-        // Remove highlight of previously selected item.
-        if (this.selected) {
-            this.selected.removeHighlight();
-        }
-        item.highlight();
-        this.selected = item;
-        // Scroll the mentions view to the selected element.
-        if (!this._isItemVisibleInScrolledArea(item)) {
-            this.element.scrollTop = item.element.offsetTop;
-        }
-    }
-    /**
-     * Triggers the `execute` event on the {@link #select selected} item.
-     */
-    executeSelected() {
-        this.selected.fire('execute');
-    }
-    /**
-     * Checks if an item is visible in the scrollable area.
-     *
-     * The item is considered visible when:
-     * - its top boundary is inside the scrollable rect
-     * - its bottom boundary is inside the scrollable rect (the whole item must be visible)
-     */
-    _isItemVisibleInScrolledArea(item) {
-        return new Rect(this.element).contains(new Rect(item.element));
-    }
-}
+/**
+ * @license Copyright (c) 2003-2023, CKSource Holding sp. z o.o. All rights reserved.
+ * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license
+ */
+/**
+ * @module mention/ui/mentionsview
+ */
+import { ListView } from 'ckeditor5/src/ui';
+import { Rect } from 'ckeditor5/src/utils';
+import '../../theme/mentionui.css';
+/**
+ * The mention ui view.
+ */
+export default class MentionsView extends ListView {
+    /**
+     * @inheritDoc
+     */
+    constructor(locale) {
+        super(locale);
+        this.extendTemplate({
+            attributes: {
+                class: [
+                    'ck-mentions'
+                ],
+                tabindex: '-1'
+            }
+        });
+    }
+    /**
+     * {@link #select Selects} the first item.
+     */
+    selectFirst() {
+        this.select(0);
+    }
+    /**
+     * Selects next item to the currently {@link #select selected}.
+     *
+     * If the last item is already selected, it will select the first item.
+     */
+    selectNext() {
+        const item = this.selected;
+        const index = this.items.getIndex(item);
+        this.select(index + 1);
+    }
+    /**
+     * Selects previous item to the currently {@link #select selected}.
+     *
+     * If the first item is already selected, it will select the last item.
+     */
+    selectPrevious() {
+        const item = this.selected;
+        const index = this.items.getIndex(item);
+        this.select(index - 1);
+    }
+    /**
+     * Marks item at a given index as selected.
+     *
+     * Handles selection cycling when passed index is out of bounds:
+     * - if the index is lower than 0, it will select the last item,
+     * - if the index is higher than the last item index, it will select the first item.
+     *
+     * @param index Index of an item to be marked as selected.
+     */
+    select(index) {
+        let indexToGet = 0;
+        if (index > 0 && index < this.items.length) {
+            indexToGet = index;
+        }
+        else if (index < 0) {
+            indexToGet = this.items.length - 1;
+        }
+        const item = this.items.get(indexToGet);
+        // Return early if item is already selected.
+        if (this.selected === item) {
+            return;
+        }
+        // Remove highlight of previously selected item.
+        if (this.selected) {
+            this.selected.removeHighlight();
+        }
+        item.highlight();
+        this.selected = item;
+        // Scroll the mentions view to the selected element.
+        if (!this._isItemVisibleInScrolledArea(item)) {
+            this.element.scrollTop = item.element.offsetTop;
+        }
+    }
+    /**
+     * Triggers the `execute` event on the {@link #select selected} item.
+     */
+    executeSelected() {
+        this.selected.fire('execute');
+    }
+    /**
+     * Checks if an item is visible in the scrollable area.
+     *
+     * The item is considered visible when:
+     * - its top boundary is inside the scrollable rect
+     * - its bottom boundary is inside the scrollable rect (the whole item must be visible)
+     */
+    _isItemVisibleInScrolledArea(item) {
+        return new Rect(this.element).contains(new Rect(item.element));
+    }
+}