suneditor 3.0.0-beta.9 → 3.0.0-rc.2

package/src/plugins/command/list_bulleted.js

@@ -1,49 +1,49 @@
-import EditorInjector from '../../editorInjector';
+import { PluginCommand, PluginDropdown } from '../../interfaces';
 import { dom } from '../../helper';
 
+void PluginDropdown;
+
 const DEFAULT_TYPE = 'disc';
 
 /**
  * @class
+ * @implements {PluginDropdown}
  * @description List bulleted plugin, Several types of lists are provided.
  */
-class List_bulleted extends EditorInjector {
+class List_bulleted extends PluginCommand {
 	static key = 'list_bulleted';
-	static type = 'command';
 	static className = 'se-icon-flip-rtl';
 
+	#listItems;
+
 	/**
 	 * @constructor
-	 * @param {__se__EditorCore} editor - The root editor instance
+	 * @param {SunEditor.Kernel} editor - The core kernel
 	 */
 	constructor(editor) {
 		// plugin bisic properties
 		super(editor);
-		this.title = this.lang.bulletedList;
+		this.title = this.$.lang.bulletedList;
 		this.icon = 'list_bulleted';
 		this.afterItem = dom.utils.createElement(
 			'button',
 			{ class: 'se-btn se-tooltip se-sub-arrow-btn', 'data-command': List_bulleted.key, 'data-type': 'dropdown' },
-			`${this.icons.arrow_down}<span class="se-tooltip-inner"><span class="se-tooltip-text">${this.lang.bulletedList}</span></span>`
+			`${this.$.icons.arrow_down}<span class="se-tooltip-inner"><span class="se-tooltip-text">${this.$.lang.bulletedList}</span></span>`,
 		);
 
 		// create HTML
 		const menu = CreateHTML();
 
 		// members
-		this.listItems = menu.querySelectorAll('li button ul');
+		this.#listItems = menu.querySelectorAll('li button ul');
 
 		// init
-		this.menu.initDropdownTarget({ key: List_bulleted.key, type: 'dropdown' }, menu);
+		this.$.menu.initDropdownTarget({ key: List_bulleted.key, type: 'dropdown' }, menu);
 	}
 
 	/**
-	 * @editorMethod Editor.EventManager
-	 * @description Executes the method that is called whenever the cursor position changes.
-	 * @param {?HTMLElement=} element - Node element where the cursor is currently located
-	 * @param {?HTMLElement=} target - The plugin's toolbar button element
-	 * @returns {boolean} - Whether the plugin is active
-	 * - If it returns "undefined", it will no longer be called in this scope.
+	 * @hook Editor.EventManager
+	 * @type {SunEditor.Hook.Event.Active}
 	 */
 	active(element, target) {
 		if (dom.check.isListCell(element) && /^UL$/i.test(element.parentElement.nodeName)) {
@@ -56,12 +56,29 @@ class List_bulleted extends EditorInjector {
 	}
 
 	/**
-	 * @editorMethod Modules.Dropdown
-	 * @description Executes the method that is called when a plugin's dropdown menu is opened.
+	 * @override
+	 * @type {PluginCommand['action']}
+	 */
+	action(target) {
+		const el = this.$.format.getBlock(this.$.selection.getNode());
+		const type = target?.querySelector('ul')?.style.listStyleType;
+
+		if (dom.check.isList(el) && type) {
+			el.style.listStyleType = type;
+		} else {
+			this.submit(type);
+		}
+
+		this.$.menu.dropdownOff();
+	}
+
+	/**
+	 * @impl Dropdown
+	 * @type {PluginDropdown['on']}
 	 */
 	on() {
-		const list = this.listItems;
-		const el = this.format.getBlock(this.selection.getNode());
+		const list = this.#listItems;
+		const el = this.$.format.getBlock(this.$.selection.getNode());
 		const type = el?.style ? el.style.listStyleType || DEFAULT_TYPE : '';
 
 		for (let i = 0, len = list.length, l; i < len; i++) {
@@ -75,28 +92,8 @@ class List_bulleted extends EditorInjector {
 	}
 
 	/**
-	 * @editorMethod Editor.core
-	 * @description Executes the main execution method of the plugin.
-	 * - Called when an item in the "dropdown" menu is clicked.
-	 * @param {HTMLElement} target - The plugin's toolbar button element
-	 */
-	action(target) {
-		const el = this.format.getBlock(this.selection.getNode());
-		const type = target?.querySelector('ul')?.style.listStyleType;
-
-		if (dom.check.isList(el) && type) {
-			el.style.listStyleType = type;
-		} else {
-			this.submit(type);
-		}
-
-		this.menu.dropdownOff();
-	}
-
-	/**
-	 * @editorMethod Editor.core
-	 * @description Executes methods called by shortcut keys.
-	 * @param {__se__PluginShortcutInfo} params - Information of the "shortcut" plugin
+	 * @hook Editor.Core
+	 * @type {SunEditor.Hook.Core.Shortcut}
 	 */
 	shortcut({ range, info }) {
 		const { startContainer } = range;
@@ -112,13 +109,16 @@ class List_bulleted extends EditorInjector {
 	 * @param {string} [type=""] List type
 	 */
 	submit(type) {
-		const range = this.format.applyList(`ul:${type || ''}`, null, false);
-		if (range) this.selection.setRange(range.sc, range.so, range.ec, range.eo);
-		this.editor.focus();
-		this.history.push(false);
+		const range = this.$.listFormat.apply(`ul:${type || ''}`, null, false);
+		if (range) this.$.selection.setRange(range.sc, range.so, range.ec, range.eo);
+		this.$.focusManager.focus();
+		this.$.history.push(false);
 	}
 }
 
+/**
+ * @returns {HTMLElement}
+ */
 function CreateHTML() {
 	const html = /*html*/ `
 	<div class="se-list-inner">
@@ -130,6 +130,10 @@ function CreateHTML() {
 	return dom.utils.createElement('DIV', { class: 'se-dropdown se-list-layer' }, html);
 }
 
+/**
+ * @param {string[]} types - List style types
+ * @returns {string} HTML string
+ */
 function _CreateLI(types) {
 	return types
 		.map((v) => {

package/src/plugins/command/list_numbered.js

@@ -1,49 +1,49 @@
-import EditorInjector from '../../editorInjector';
+import { PluginCommand, PluginDropdown } from '../../interfaces';
 import { dom } from '../../helper';
 
+void PluginDropdown;
+
 const DEFAULT_TYPE = 'decimal';
 
 /**
  * @class
+ * @implements {PluginDropdown}
  * @description List numbered plugin, Several types of lists are provided.
  */
-class List_numbered extends EditorInjector {
+class List_numbered extends PluginCommand {
 	static key = 'list_numbered';
-	static type = 'command';
 	static className = 'se-icon-flip-rtl';
 
+	#listItems;
+
 	/**
 	 * @constructor
-	 * @param {__se__EditorCore} editor - The root editor instance
+	 * @param {SunEditor.Kernel} editor - The core kernel
 	 */
 	constructor(editor) {
 		// plugin bisic properties
 		super(editor);
-		this.title = this.lang.numberedList;
+		this.title = this.$.lang.numberedList;
 		this.icon = 'list_numbered';
 		this.afterItem = dom.utils.createElement(
 			'button',
 			{ class: 'se-btn se-tooltip se-sub-arrow-btn', 'data-command': List_numbered.key, 'data-type': 'dropdown' },
-			`${this.icons.arrow_down}<span class="se-tooltip-inner"><span class="se-tooltip-text">${this.lang.numberedList}</span></span>`
+			`${this.$.icons.arrow_down}<span class="se-tooltip-inner"><span class="se-tooltip-text">${this.$.lang.numberedList}</span></span>`,
 		);
 
 		// create HTML
 		const menu = CreateHTML();
 
 		// members
-		this.listItems = menu.querySelectorAll('li button ol');
+		this.#listItems = menu.querySelectorAll('li button ol');
 
 		// init
-		this.menu.initDropdownTarget({ key: List_numbered.key, type: 'dropdown' }, menu);
+		this.$.menu.initDropdownTarget({ key: List_numbered.key, type: 'dropdown' }, menu);
 	}
 
 	/**
-	 * @editorMethod Editor.EventManager
-	 * @description Executes the method that is called whenever the cursor position changes.
-	 * @param {?HTMLElement=} element - Node element where the cursor is currently located
-	 * @param {?HTMLElement=} target - The plugin's toolbar button element
-	 * @returns {boolean} - Whether the plugin is active
-	 * - If it returns "undefined", it will no longer be called in this scope.
+	 * @hook Editor.EventManager
+	 * @type {SunEditor.Hook.Event.Active}
 	 */
 	active(element, target) {
 		if (dom.check.isListCell(element) && /^OL$/i.test(element.parentElement.nodeName)) {
@@ -56,12 +56,29 @@ class List_numbered extends EditorInjector {
 	}
 
 	/**
-	 * @editorMethod Modules.Dropdown
-	 * @description Executes the method that is called when a plugin's dropdown menu is opened.
+	 * @override
+	 * @type {PluginCommand['action']}
+	 */
+	action(target) {
+		const el = this.$.format.getBlock(this.$.selection.getNode());
+		const type = target?.querySelector('ol')?.style.listStyleType;
+
+		if (dom.check.isList(el) && type) {
+			el.style.listStyleType = type;
+		} else {
+			this.submit(type);
+		}
+
+		this.$.menu.dropdownOff();
+	}
+
+	/**
+	 * @hook Dropdown
+	 * @type {PluginDropdown['on']}
 	 */
 	on() {
-		const list = this.listItems;
-		const el = this.format.getBlock(this.selection.getNode());
+		const list = this.#listItems;
+		const el = this.$.format.getBlock(this.$.selection.getNode());
 		const type = el?.style ? el.style.listStyleType || DEFAULT_TYPE : '';
 
 		for (let i = 0, len = list.length, l; i < len; i++) {
@@ -75,28 +92,8 @@ class List_numbered extends EditorInjector {
 	}
 
 	/**
-	 * @editorMethod Editor.core
-	 * @description Executes the main execution method of the plugin.
-	 * - Called when an item in the "dropdown" menu is clicked.
-	 * @param {HTMLElement} target - The plugin's toolbar button element
-	 */
-	action(target) {
-		const el = this.format.getBlock(this.selection.getNode());
-		const type = target?.querySelector('ol')?.style.listStyleType;
-
-		if (dom.check.isList(el) && type) {
-			el.style.listStyleType = type;
-		} else {
-			this.submit(type);
-		}
-
-		this.menu.dropdownOff();
-	}
-
-	/**
-	 * @editorMethod Editor.core
-	 * @description Executes methods called by shortcut keys.
-	 * @param {__se__PluginShortcutInfo} params - Information of the "shortcut" plugin
+	 * @hook Editor.Core
+	 * @type {SunEditor.Hook.Core.Shortcut}
 	 */
 	shortcut({ range, info }) {
 		const { startContainer } = range;
@@ -112,13 +109,16 @@ class List_numbered extends EditorInjector {
 	 * @param {string} [type=""] List type
 	 */
 	submit(type) {
-		const range = this.format.applyList(`ol:${type || ''}`, null, false);
-		if (range) this.selection.setRange(range.sc, range.so, range.ec, range.eo);
-		this.editor.focus();
-		this.history.push(false);
+		const range = this.$.listFormat.apply(`ol:${type || ''}`, null, false);
+		if (range) this.$.selection.setRange(range.sc, range.so, range.ec, range.eo);
+		this.$.focusManager.focus();
+		this.$.history.push(false);
 	}
 }
 
+/**
+ * @returns {HTMLElement}
+ */
 function CreateHTML() {
 	const html = /*html*/ `
 	<div class="se-list-inner">
@@ -133,6 +133,10 @@ function CreateHTML() {
 	return dom.utils.createElement('DIV', { class: 'se-dropdown se-list-layer' }, html);
 }
 
+/**
+ * @param {string[]} types - List style types
+ * @returns {string} HTML string
+ */
 function _CreateLI(types) {
 	return types
 		.map((v) => {

package/src/plugins/dropdown/align.js

@@ -1,50 +1,49 @@
-import EditorInjector from '../../editorInjector';
+import { PluginDropdown } from '../../interfaces';
 import { dom } from '../../helper';
 
+/**
+ * @typedef {Object} AlignPluginOptions
+ * @property {Array.<"right"|"center"|"left"|"justify">} [items] - Align items
+ */
+
 /**
  * @class
  * @description Align plugin
  */
-class Align extends EditorInjector {
+class Align extends PluginDropdown {
 	static key = 'align';
-	static type = 'dropdown';
 	static className = '';
 
 	/**
-	 * @param {__se__EditorCore} editor - The root editor instance
-	 * @param {Object} pluginOptions
-	 * @param {Array.<"right"|"center"|"left"|"justify">} pluginOptions.items - Align items
+	 * @param {SunEditor.Kernel} editor - The core kernel
+	 * @param {AlignPluginOptions} pluginOptions - Plugin options
 	 */
 	constructor(editor, pluginOptions) {
 		super(editor);
-		this.title = this.lang.align;
-		this.icon = this.options.get('_rtl') ? 'align_right' : 'align_left';
+		this.title = this.$.lang.align;
+		this.icon = this.$.options.get('_rtl') ? 'align_right' : 'align_left';
 
 		// create HTML
-		const menu = CreateHTML(editor, pluginOptions.items);
+		const menu = CreateHTML(this.$, pluginOptions.items);
 		const commandArea = (this._itemMenu = menu.querySelector('ul'));
 
 		// members
-		this.defaultDir = editor.options.get('_rtl') ? 'right' : 'left';
+		this.defaultDir = '';
 		this.alignIcons = {
-			justify: editor.icons.align_justify,
-			left: editor.icons.align_left,
-			right: editor.icons.align_right,
-			center: editor.icons.align_center
+			justify: this.$.icons.align_justify,
+			left: this.$.icons.align_left,
+			right: this.$.icons.align_right,
+			center: this.$.icons.align_center,
 		};
 		this.alignList = commandArea.querySelectorAll('li button');
 
 		// init
-		this.menu.initDropdownTarget(Align, menu);
+		this.$.menu.initDropdownTarget(Align, menu);
 	}
 
 	/**
-	 * @editorMethod Editor.EventManager
-	 * @description Executes the method that is called whenever the cursor position changes.
-	 * @param {?HTMLElement=} element - Node element where the cursor is currently located
-	 * @param {?HTMLElement=} target - The plugin's toolbar button element
-	 * @returns {boolean} - Whether the plugin is active
-	 * - If it returns "undefined", it will no longer be called in this scope.
+	 * @hook Editor.EventManager
+	 * @type {SunEditor.Hook.Event.Active}
 	 */
 	active(element, target) {
 		const targetChild = target.firstElementChild;
@@ -52,8 +51,8 @@ class Align extends EditorInjector {
 		if (!element) {
 			dom.utils.changeElement(targetChild, this.alignIcons[this.defaultDir]);
 			target.removeAttribute('data-focus');
-		} else if (this.format.isLine(element)) {
-			const textAlign = /** @type {HTMLElement} */ (element).style.textAlign;
+		} else if (this.$.format.isLine(element)) {
+			const textAlign = element.style.textAlign;
 			if (textAlign) {
 				dom.utils.changeElement(targetChild, this.alignIcons[textAlign] || this.alignIcons[this.defaultDir]);
 				target.setAttribute('data-focus', textAlign);
@@ -66,9 +65,8 @@ class Align extends EditorInjector {
 	}
 
 	/**
-	 * @editorMethod Modules.Dropdown
-	 * @description Executes the method that is called when a plugin's dropdown menu is opened.
-	 * @param {HTMLElement} target Line element at the current cursor position
+	 * @override
+	 * @type {PluginDropdown['on']}
 	 */
 	on(target) {
 		const currentAlign = target.getAttribute('data-focus') || this.defaultDir;
@@ -85,12 +83,31 @@ class Align extends EditorInjector {
 	}
 
 	/**
-	 * @editorMethod Editor.core
-	 * @description Executes the method called when the rtl, ltr mode changes. ("editor.setDir")
-	 * @param {string} dir Direction ("rtl" or "ltr")
+	 * @override
+	 * @type {PluginDropdown['action']}
 	 */
-	setDir(dir) {
-		const _dir = dir === 'rtl' ? 'right' : 'left';
+	action(target) {
+		const value = target.getAttribute('data-command');
+		if (!value) return;
+
+		const defaultDir = this.defaultDir;
+		const selectedFormsts = this.$.format.getLines();
+		for (let i = 0, len = selectedFormsts.length; i < len; i++) {
+			dom.utils.setStyle(selectedFormsts[i], 'textAlign', value === defaultDir ? '' : value);
+		}
+
+		this.$.store.set('_lastSelectionNode', null);
+		this.$.menu.dropdownOff();
+		this.$.focusManager.focus();
+		this.$.history.push(false);
+	}
+
+	/**
+	 * @hook Editor.Core
+	 * @type {SunEditor.Hook.Core.SetDir}
+	 */
+	setDir() {
+		const _dir = this.#findDefaultDir();
 		if (this.defaultDir === _dir) return;
 
 		this.defaultDir = _dir;
@@ -105,28 +122,25 @@ class Align extends EditorInjector {
 	}
 
 	/**
-	 * @editorMethod Editor.core
-	 * @description Executes the main execution method of the plugin.
-	 * - Called when an item in the "dropdown" menu is clicked.
-	 * @param {HTMLElement} target - The plugin's toolbar button element
+	 * @hook Editor.Core
+	 * @type {SunEditor.Hook.Core.Init}
 	 */
-	action(target) {
-		const value = target.getAttribute('data-command');
-		if (!value) return;
-
-		const defaultDir = this.defaultDir;
-		const selectedFormsts = this.format.getLines();
-		for (let i = 0, len = selectedFormsts.length; i < len; i++) {
-			dom.utils.setStyle(selectedFormsts[i], 'textAlign', value === defaultDir ? '' : value);
-		}
+	init() {
+		this.defaultDir = this.#findDefaultDir();
+	}
 
-		this.editor.effectNode = null;
-		this.menu.dropdownOff();
-		this.editor.focus();
-		this.history.push(false);
+	#findDefaultDir() {
+		const align = this.$.frameContext.get('wwComputedStyle').getPropertyValue('text-align');
+		const valid = ['left', 'center', 'right', 'justify'];
+		return valid.includes(align) ? align : this.$.options.get('_rtl') ? 'right' : 'left';
 	}
 }
 
+/**
+ * @param {SunEditor.Deps} $ - Kernel dependencies
+ * @param {string[]} [items] - Align items list
+ * @returns {HTMLElement}
+ */
 function CreateHTML({ lang, icons, options }, items) {
 	const alignItems = Array.isArray(items) ? items : options.get('_rtl') ? ['right', 'center', 'left', 'justify'] : ['left', 'center', 'right', 'justify'];
 
@@ -145,12 +159,12 @@ function CreateHTML({ lang, icons, options }, items) {
 	return dom.utils.createElement(
 		'div',
 		{
-			class: 'se-dropdown se-list-layer se-list-align'
+			class: 'se-dropdown se-list-layer se-list-align',
 		},
 		/*html*/ `
 		<div class="se-list-inner">
 			<ul class="se-list-basic">${html}</ul>
-		</div>`
+		</div>`,
 	);
 }
 

package/src/plugins/dropdown/backgroundColor.js

@@ -1,53 +1,52 @@
-import EditorInjector from '../../editorInjector';
-import ColorPicker from '../../modules/ColorPicker';
+import { PluginDropdownFree } from '../../interfaces';
+import { ColorPicker } from '../../modules/contract';
 import { dom } from '../../helper';
 
+/**
+ * @typedef {Object} BackgroundColorPluginOptions
+ * @property {Array<string|{value: string, name: string}>} [items] - Color list
+ * @property {number} [splitNum] - Number of colors per line
+ * @property {boolean} [disableHEXInput] - Disable HEX input
+ */
+
 /**
  * @class
  * @description Text background color plugin
  */
-class BackgroundColor extends EditorInjector {
+class BackgroundColor extends PluginDropdownFree {
 	static key = 'backgroundColor';
-	static type = 'dropdown-free';
 	static className = '';
 
 	/**
 	 * @constructor
-	 * @param {__se__EditorCore} editor - The root editor instance
-	 * @param {Object} pluginOptions
-	 * @param {Array<string|{value: string, name: string}>} pluginOptions.items - Color list
-	 * @param {number} pluginOptions.splitNum - Number of colors per line
-	 * @param {boolean} pluginOptions.disableHEXInput - Disable HEX input
+	 * @param {SunEditor.Kernel} editor - The core kernel
+	 * @param {BackgroundColorPluginOptions} pluginOptions - Plugin options
 	 */
 	constructor(editor, pluginOptions) {
 		super(editor);
 		// plugin basic properties
-		this.title = this.lang.backgroundColor;
+		this.title = this.$.lang.backgroundColor;
 		this.icon = 'background_color';
 
 		// create HTML
 		const menu = CreateHTML();
 
 		// members
-		this.colorPicker = new ColorPicker(this, 'backgroundColor', {
+		this.colorPicker = new ColorPicker(this, this.$, 'backgroundColor', {
+			form: menu,
 			colorList: pluginOptions.items,
 			splitNum: pluginOptions.splitNum,
 			disableHEXInput: pluginOptions.disableHEXInput,
-			hueSliderOptions: { controllerOptions: { parents: [menu], isOutsideForm: true } }
+			hueSliderOptions: { controllerOptions: { isOutsideForm: true } },
 		});
 
-		// itit
-		menu.appendChild(this.colorPicker.target);
-		this.menu.initDropdownTarget(BackgroundColor, menu);
+		// init
+		this.$.menu.initDropdownTarget(BackgroundColor, menu);
 	}
 
 	/**
-	 * @editorMethod Editor.EventManager
-	 * @description Executes the method that is called whenever the cursor position changes.
-	 * @param {?HTMLElement=} element - Node element where the cursor is currently located
-	 * @param {?HTMLElement=} target - The plugin's toolbar button element
-	 * @returns {boolean} - Whether the plugin is active
-	 * - If it returns "undefined", it will no longer be called in this scope.
+	 * @hook Editor.EventManager
+	 * @type {SunEditor.Hook.Event.Active}
 	 */
 	active(element, target) {
 		const colorHelper = /** @type {SVGPathElement} */ (target.querySelector('path.se-svg-color-helper'));
@@ -56,7 +55,7 @@ class BackgroundColor extends EditorInjector {
 		let color = '';
 		if (!element) {
 			colorHelper.style.color = color;
-		} else if (this.format.isLine(element)) {
+		} else if (this.$.format.isLine(element)) {
 			return undefined;
 		} else if ((color = dom.utils.getStyle(element, 'backgroundColor'))) {
 			colorHelper.style.color = color;
@@ -67,40 +66,40 @@ class BackgroundColor extends EditorInjector {
 	}
 
 	/**
-	 * @editorMethod Modules.Dropdown
-	 * @description Executes the method that is called when a plugin's "dropdown" menu is opened.
-	 * @param {HTMLElement} target Line element at the current cursor position
+	 * @override
+	 * @type {PluginDropdownFree['on']}
 	 */
 	on(target) {
-		this.colorPicker.init(this.selection.getNode(), target, (current) => this.format.isLine(current));
+		this.colorPicker.init(this.$.selection.getNode(), target, (current) => this.$.format.isLine(current));
 	}
 
 	/**
-	 * @editorMethod Modules.Dropdown
-	 * @description Executes the method that is called when a plugin's "dropdown" menu is closed.
+	 * @override
+	 * @type {PluginDropdownFree['off']}
 	 */
 	off() {
 		this.colorPicker.hueSliderClose();
 	}
 
 	/**
-	 * @editorMethod Modules.ColorPicker
-	 * @description Executes the method called when a button of "ColorPicker" module is clicked.
-	 * - This plugin is by applying the "ColorPicker" module globally to the "dropdown" menu, the default "action" method is not called.
-	 * @param {string} color - Color code (hex)
+	 * @hook Modules.ColorPicker
+	 * @type {SunEditor.Hook.ColorPicker.Action}
 	 */
 	colorPickerAction(color) {
 		if (color) {
 			const newNode = dom.utils.createElement('SPAN', { style: 'background-color: ' + color + ';' });
-			this.format.applyInlineElement(newNode, { stylesToModify: ['background-color'], nodesToRemove: null, strictRemove: null });
+			this.$.inline.apply(newNode, { stylesToModify: ['background-color'], nodesToRemove: null, strictRemove: null });
 		} else {
-			this.format.applyInlineElement(null, { stylesToModify: ['background-color'], nodesToRemove: ['span'], strictRemove: true });
+			this.$.inline.apply(null, { stylesToModify: ['background-color'], nodesToRemove: ['span'], strictRemove: true });
 		}
 
-		this.menu.dropdownOff();
+		this.$.menu.dropdownOff();
 	}
 }
 
+/**
+ * @returns {HTMLElement}
+ */
 function CreateHTML() {
 	return dom.utils.createElement('DIV', { class: 'se-dropdown se-list-layer' }, null);
 }