@znuny/ckeditor5-autocomplete-plugin
Version:
A plugin for CKEditor 5 that provides an extendable autocomplete functionality with predefined mention and HTML replacement logic.
69 lines (68 loc) • 2.09 kB
JavaScript
/**
* @copyright Copyright (c) 2024, Znuny GmbH.
* @copyright Copyright (c) 2003-2024, CKSource Holding sp. z o.o.
*
* @license GNU GPL version 3
*
* This software comes with ABSOLUTELY NO WARRANTY. For details, see
* the enclosed file COPYING for license information (GPL). If you
* did not receive this file, see https://www.gnu.org/licenses/gpl-3.0.txt.
*/
/**
* @module mention/ui/domwrapperview
*/
import { View } from 'ckeditor5/src/ui.js';
/**
* This class wraps DOM element as a CKEditor5 UI View.
*
* It allows to render any DOM element and use it in mentions list.
*
* It is used for Autocomplete items, which uses a custom item.completionElementRenderer.
*/
export 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');
});
this.listenTo(this.domElement, 'mouseover', () => {
this.fire('mouseover');
});
}
/**
* @inheritDoc
*/
render() {
super.render();
this.element = this.domElement;
}
/**
* Focuses the DOM element.
*/
focus() {
this.domElement.focus();
}
}