@ckeditor/ckeditor5-mention 35.4.0 → 36.0.0

package/src/ui/domwrapperview.js

@@ -1,78 +1,51 @@
 /**
- * @license Copyright (c) 2003-2022, CKSource Holding sp. z o.o. All rights reserved.
+ * @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.
- *
- * @extends {module:ui/view~View}
  */
 export default class DomWrapperView extends View {
-	/**
-	 * Creates an instance of {@link module:mention/ui/domwrapperview~DomWrapperView} class.
-	 *
-	 * Also see {@link #render}.
-	 *
-	 * @param {module:utils/locale~Locale} [locale] The localization services instance.
-	 * @param {Element} domElement
-	 */
-	constructor( locale, domElement ) {
-		super( locale );
-
-		// Disable template rendering on this view.
-		this.template = false;
-
-		/**
-		 * The DOM element for which wrapper was created.
-		 *
-		 * @type {Element}
-		 */
-		this.domElement = domElement;
-
-		// Render dom wrapper as a button.
-		this.domElement.classList.add( 'ck-button' );
-
-		/**
-		 * Controls whether the dom wrapper view is "on". This is in line with {@link module:ui/button/button~Button#isOn} property.
-		 *
-		 * @observable
-		 * @default true
-		 * @member {Boolean} #isOn
-		 */
-		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;
-	}
+    /**
+     * 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 = false;
+        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;
+    }
 }

package/src/ui/mentionlistitemview.js

@@ -1,24 +1,18 @@
 /**
- * @license Copyright (c) 2003-2022, CKSource Holding sp. z o.o. All rights reserved.
+ * @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;
-	}
+    highlight() {
+        const child = this.children.first;
+        child.isOn = true;
+    }
+    removeHighlight() {
+        const child = this.children.first;
+        child.isOn = false;
+    }
 }

package/src/ui/mentionsview.js

@@ -1,123 +1,104 @@
 /**
- * @license Copyright (c) 2003-2022, CKSource Holding sp. z o.o. All rights reserved.
+ * @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.
- *
- * @extends module:ui/list/listview~ListView
  */
 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 {Number} 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 ) );
-	}
+    /**
+     * @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));
+    }
 }

package/theme/mention.css

@@ -1,4 +1,4 @@
 /*
- * Copyright (c) 2003-2022, CKSource Holding sp. z o.o. All rights reserved.
+ * 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
  */

package/theme/mentionui.css

@@ -1,5 +1,5 @@
 /*
- * Copyright (c) 2003-2022, CKSource Holding sp. z o.o. All rights reserved.
+ * 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
  */