@ckeditor/ckeditor5-mention 30.0.0

package/src/ui/domwrapperview.js

@@ -0,0 +1,78 @@
+/**
+ * @license Copyright (c) 2003-2021, CKSource - Frederico Knabben. 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;
+	}
+}

package/src/ui/mentionlistitemview.js

@@ -0,0 +1,24 @@
+/**
+ * @license Copyright (c) 2003-2021, CKSource - Frederico Knabben. 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.js

@@ -0,0 +1,123 @@
+/**
+ * @license Copyright (c) 2003-2021, CKSource - Frederico Knabben. 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 ) );
+	}
+}

package/theme/mention.css

@@ -0,0 +1,4 @@
+/*
+ * Copyright (c) 2003-2021, CKSource - Frederico Knabben. All rights reserved.
+ * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license
+ */

package/theme/mentionui.css

@@ -0,0 +1,27 @@
+/*
+ * Copyright (c) 2003-2021, CKSource - Frederico Knabben. All rights reserved.
+ * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license
+ */
+
+:root {
+	--ck-mention-list-max-height: 300px;
+}
+
+.ck.ck-mentions {
+	max-height: var(--ck-mention-list-max-height);
+
+	overflow-y: auto;
+
+	/* Prevent unnecessary horizontal scrollbar in Safari
+	https://github.com/ckeditor/ckeditor5-mention/issues/41 */
+	overflow-x: hidden;
+
+	overscroll-behavior: contain;
+
+	/* Prevent unnecessary vertical scrollbar in Safari
+	https://github.com/ckeditor/ckeditor5-mention/issues/41 */
+	& > .ck-list__item {
+		overflow: hidden;
+		flex-shrink: 0;
+	}
+}