suneditor 3.0.0-alpha.2 → 3.0.0-alpha.20

package/src/plugins/command/list_bulleted.js

@@ -1,48 +1,66 @@
 import EditorInjector from '../../editorInjector';
-import { domUtils } from '../../helper';
+import { dom } from '../../helper';
 
 const DEFAULT_TYPE = 'disc';
 
-const List_bulleted = function (editor) {
-	// plugin bisic properties
-	EditorInjector.call(this, editor);
-	this.title = this.lang.bulletedList;
-	this.icon = 'list_bulleted';
-	this.afterButton = domUtils.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>`
-	);
-
-	// create HTML
-	const menu = CreateHTML();
-
-	// members
-	this.listItems = menu.querySelectorAll('li button ul');
-
-	// init
-	this.menu.initDropdownTarget({ key: List_bulleted.key, type: 'dropdown' }, menu);
-};
-
-List_bulleted.key = 'list_bulleted';
-List_bulleted.type = 'command';
-List_bulleted.className = 'se-icon-flip-rtl';
-List_bulleted.prototype = {
+/**
+ * @typedef {import('../../core/class/shortcuts').ShortcutInfo} ShortcutInfo
+ */
+
+/**
+ * @class
+ * @description List bulleted plugin, Several types of lists are provided.
+ */
+class List_bulleted extends EditorInjector {
+	static key = 'list_bulleted';
+	static type = 'command';
+	static className = 'se-icon-flip-rtl';
+
 	/**
-	 * @override core
+	 * @constructor
+	 * @param {__se__EditorCore} editor - The root editor instance
+	 */
+	constructor(editor) {
+		// plugin bisic properties
+		super(editor);
+		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>`
+		);
+
+		// create HTML
+		const menu = CreateHTML();
+
+		// members
+		this.listItems = menu.querySelectorAll('li button ul');
+
+		// init
+		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
 	 */
 	active(element, target) {
-		if (domUtils.isListCell(element) && /^UL$/i.test(element.parentElement.nodeName)) {
-			domUtils.addClass(target, 'active');
+		if (dom.check.isListCell(element) && /^UL$/i.test(element.parentElement.nodeName)) {
+			dom.utils.addClass(target, 'active');
 			return true;
 		}
 
-		domUtils.removeClass(target, 'active');
+		dom.utils.removeClass(target, 'active');
 		return false;
-	},
+	}
 
 	/**
-	 * @override dropdown
+	 * @editorMethod Modules.Dropdown
+	 * @description Executes the method that is called when a plugin's dropdown menu is opened.
 	 */
 	on() {
 		const list = this.listItems;
@@ -50,37 +68,65 @@ List_bulleted.prototype = {
 		const type = el?.style ? el.style.listStyleType || DEFAULT_TYPE : '';
 
 		for (let i = 0, len = list.length, l; i < len; i++) {
-			l = list[i];
+			l = /** @type {HTMLElement} */ (list[i]);
 			if (type === l.style.listStyleType) {
-				domUtils.addClass(l.parentElement, 'active');
+				dom.utils.addClass(l.parentElement, 'active');
 			} else {
-				domUtils.removeClass(l.parentElement, 'active');
+				dom.utils.removeClass(l.parentElement, 'active');
 			}
 		}
-	},
+	}
 
 	/**
-	 * @override core
-	 * @param {Element|null} target Target command button
+	 * @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 || '';
+		const type = target?.querySelector('ul')?.style.listStyleType;
 
-		if (domUtils.isList(el) && type) {
+		if (dom.check.isList(el) && type) {
 			el.style.listStyleType = type;
 		} else {
-			const range = this.format.applyList(`ul:${type}`, null, false);
-			if (range) this.selection.setRange(range.sc, range.so, range.ec, range.eo);
+			this.submit(type);
 		}
 
 		this.menu.dropdownOff();
+	}
+
+	/**
+	 * @editorMethod Editor.core
+	 * @description Executes methods called by shortcut keys.
+	 * @param {Object} params - Information of the "shortcut" plugin
+	 * @param {Range} params.range - Range object
+	 * @param {HTMLElement} params.line - The line element of the current range
+	 * @param {ShortcutInfo} params.info - Information of the shortcut
+	 * @param {KeyboardEvent} params.event - Key event object
+	 * @param {string} params.keyCode - KeyBoardEvent.code
+	 * @param {__se__EditorCore} params.editor - The root editor instance
+	 */
+	shortcut({ range, info }) {
+		const { startContainer } = range;
+		if (dom.check.isText(startContainer)) {
+			const newText = startContainer.substringData(info.key.length, startContainer.textContent.length - 1);
+			startContainer.textContent = newText;
+		}
+		this.submit();
+	}
+
+	/**
+	 * @description Add a bulleted list
+	 * @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);
-	},
-
-	constructor: List_bulleted
-};
+	}
+}
 
 function CreateHTML() {
 	const html = /*html*/ `
@@ -90,7 +136,7 @@ function CreateHTML() {
 		</ul>
 	</div>`;
 
-	return domUtils.createElement('DIV', { class: 'se-dropdown se-list-layer' }, html);
+	return dom.utils.createElement('DIV', { class: 'se-dropdown se-list-layer' }, html);
 }
 
 function _CreateLI(types) {

package/src/plugins/command/list_numbered.js

@@ -1,48 +1,66 @@
 import EditorInjector from '../../editorInjector';
-import { domUtils } from '../../helper';
+import { dom } from '../../helper';
 
 const DEFAULT_TYPE = 'decimal';
 
-const List_numbered = function (editor) {
-	// plugin bisic properties
-	EditorInjector.call(this, editor);
-	this.title = this.lang.numberedList;
-	this.icon = 'list_numbered';
-	this.afterButton = domUtils.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>`
-	);
-
-	// create HTML
-	const menu = CreateHTML();
-
-	// members
-	this.listItems = menu.querySelectorAll('li button ol');
-
-	// init
-	this.menu.initDropdownTarget({ key: List_numbered.key, type: 'dropdown' }, menu);
-};
-
-List_numbered.key = 'list_numbered';
-List_numbered.type = 'command';
-List_numbered.className = 'se-icon-flip-rtl';
-List_numbered.prototype = {
+/**
+ * @typedef {import('../../core/class/shortcuts').ShortcutInfo} ShortcutInfo
+ */
+
+/**
+ * @class
+ * @description List numbered plugin, Several types of lists are provided.
+ */
+class List_numbered extends EditorInjector {
+	static key = 'list_numbered';
+	static type = 'command';
+	static className = 'se-icon-flip-rtl';
+
 	/**
-	 * @override core
+	 * @constructor
+	 * @param {__se__EditorCore} editor - The root editor instance
+	 */
+	constructor(editor) {
+		// plugin bisic properties
+		super(editor);
+		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>`
+		);
+
+		// create HTML
+		const menu = CreateHTML();
+
+		// members
+		this.listItems = menu.querySelectorAll('li button ol');
+
+		// init
+		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
 	 */
 	active(element, target) {
-		if (domUtils.isListCell(element) && /^OL$/i.test(element.parentElement.nodeName)) {
-			domUtils.addClass(target, 'active');
+		if (dom.check.isListCell(element) && /^OL$/i.test(element.parentElement.nodeName)) {
+			dom.utils.addClass(target, 'active');
 			return true;
 		}
 
-		domUtils.removeClass(target, 'active');
+		dom.utils.removeClass(target, 'active');
 		return false;
-	},
+	}
 
 	/**
-	 * @override dropdown
+	 * @editorMethod Modules.Dropdown
+	 * @description Executes the method that is called when a plugin's dropdown menu is opened.
 	 */
 	on() {
 		const list = this.listItems;
@@ -50,37 +68,65 @@ List_numbered.prototype = {
 		const type = el?.style ? el.style.listStyleType || DEFAULT_TYPE : '';
 
 		for (let i = 0, len = list.length, l; i < len; i++) {
-			l = list[i];
+			l = /** @type {HTMLElement} */ (list[i]);
 			if (type === l.style.listStyleType) {
-				domUtils.addClass(l.parentElement, 'active');
+				dom.utils.addClass(l.parentElement, 'active');
 			} else {
-				domUtils.removeClass(l.parentElement, 'active');
+				dom.utils.removeClass(l.parentElement, 'active');
 			}
 		}
-	},
+	}
 
 	/**
-	 * @override core
-	 * @param {Element|null} target Target command button
+	 * @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 || '';
+		const type = target?.querySelector('ol')?.style.listStyleType;
 
-		if (domUtils.isList(el) && type) {
+		if (dom.check.isList(el) && type) {
 			el.style.listStyleType = type;
 		} else {
-			const range = this.format.applyList(`ol:${type}`, null, false);
-			if (range) this.selection.setRange(range.sc, range.so, range.ec, range.eo);
+			this.submit(type);
 		}
 
 		this.menu.dropdownOff();
+	}
+
+	/**
+	 * @editorMethod Editor.core
+	 * @description Executes methods called by shortcut keys.
+	 * @param {Object} params - Information of the "shortcut" plugin
+	 * @param {Range} params.range - Range object
+	 * @param {HTMLElement} params.line - The line element of the current range
+	 * @param {ShortcutInfo} params.info - Information of the shortcut
+	 * @param {KeyboardEvent} params.event - Key event object
+	 * @param {string} params.keyCode - KeyBoardEvent.code
+	 * @param {Object} params.editor - The root editor instance
+	 */
+	shortcut({ range, info }) {
+		const { startContainer } = range;
+		if (dom.check.isText(startContainer)) {
+			const newText = startContainer.substringData(info.key.length, startContainer.textContent.length - 1);
+			startContainer.textContent = newText;
+		}
+		this.submit();
+	}
+
+	/**
+	 * @description Add a numbered list
+	 * @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);
-	},
-
-	constructor: List_numbered
-};
+	}
+}
 
 function CreateHTML() {
 	const html = /*html*/ `
@@ -93,7 +139,7 @@ function CreateHTML() {
 		</ul>
 	</div>`;
 
-	return domUtils.createElement('DIV', { class: 'se-dropdown se-list-layer' }, html);
+	return dom.utils.createElement('DIV', { class: 'se-dropdown se-list-layer' }, html);
 }
 
 function _CreateLI(types) {

package/src/plugins/dropdown/align.js

@@ -1,60 +1,72 @@
 import EditorInjector from '../../editorInjector';
-import { domUtils } from '../../helper';
-
-const Align = function (editor, pluginOptions) {
-	// plugin bisic properties
-	EditorInjector.call(this, editor);
-	this.title = this.lang.align;
-	this.icon = this.options.get('_rtl') ? 'align_right' : 'align_left';
-
-	// create HTML
-	const menu = CreateHTML(editor, pluginOptions.items);
-	const commandArea = (this._itemMenu = menu.querySelector('ul'));
-
-	// members
-	this.defaultDir = editor.options.get('_rtl') ? 'right' : 'left';
-	this.alignIcons = {
-		justify: editor.icons.align_justify,
-		left: editor.icons.align_left,
-		right: editor.icons.align_right,
-		center: editor.icons.align_center
-	};
-	this.alignList = commandArea.querySelectorAll('li button');
-
-	// init
-	this.menu.initDropdownTarget(Align, menu);
-};
-
-Align.key = 'align';
-Align.type = 'dropdown';
-Align.className = '';
-Align.prototype = {
+import { dom } from '../../helper';
+
+/**
+ * @class
+ * @description Align plugin
+ */
+class Align extends EditorInjector {
+	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
+	 */
+	constructor(editor, pluginOptions) {
+		super(editor);
+		this.title = this.lang.align;
+		this.icon = this.options.get('_rtl') ? 'align_right' : 'align_left';
+
+		// create HTML
+		const menu = CreateHTML(editor, pluginOptions.items);
+		const commandArea = (this._itemMenu = menu.querySelector('ul'));
+
+		// members
+		this.defaultDir = editor.options.get('_rtl') ? 'right' : 'left';
+		this.alignIcons = {
+			justify: editor.icons.align_justify,
+			left: editor.icons.align_left,
+			right: editor.icons.align_right,
+			center: editor.icons.align_center
+		};
+		this.alignList = commandArea.querySelectorAll('li button');
+
+		// init
+		this.menu.initDropdownTarget(Align, menu);
+	}
+
 	/**
-	 * @override core
-	 * @param {Node} element Selection node.
-	 * @param {Element} target Target button.
-	 * @returns {boolean}
+	 * @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
 	 */
 	active(element, target) {
 		const targetChild = target.firstElementChild;
 
 		if (!element) {
-			domUtils.changeElement(targetChild, this.alignIcons[this.defaultDir]);
+			dom.utils.changeElement(targetChild, this.alignIcons[this.defaultDir]);
 			target.removeAttribute('data-focus');
 		} else if (this.format.isLine(element)) {
-			const textAlign = element.style.textAlign;
+			const textAlign = /** @type {HTMLElement} */ (element).style.textAlign;
 			if (textAlign) {
-				domUtils.changeElement(targetChild, this.alignIcons[textAlign] || this.alignIcons[this.defaultDir]);
+				dom.utils.changeElement(targetChild, this.alignIcons[textAlign] || this.alignIcons[this.defaultDir]);
 				target.setAttribute('data-focus', textAlign);
 				return true;
 			}
 		}
 
 		return false;
-	},
+	}
 
 	/**
-	 * @override dropdown
+	 * @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
 	 */
 	on(target) {
 		const currentAlign = target.getAttribute('data-focus') || this.defaultDir;
@@ -63,16 +75,17 @@ Align.prototype = {
 		const alignList = this.alignList;
 		for (let i = 0, len = alignList.length; i < len; i++) {
 			if (currentAlign === alignList[i].getAttribute('data-command')) {
-				domUtils.addClass(alignList[i], 'active');
+				dom.utils.addClass(alignList[i], 'active');
 			} else {
-				domUtils.removeClass(alignList[i], 'active');
+				dom.utils.removeClass(alignList[i], 'active');
 			}
 		}
-	},
+	}
 
 	/**
-	 * @override core
-	 * @param {"rtl"|"ltr"} dir Direction
+	 * @editorMethod Editor.core
+	 * @description Executes the method called when the rtl, ltr mode changes. ("editor.setDir")
+	 * @param {string} dir Direction ("rtl" or "ltr")
 	 */
 	setDir(dir) {
 		const _dir = dir === 'rtl' ? 'right' : 'left';
@@ -87,12 +100,13 @@ Align.prototype = {
 			lp.appendChild(rightBtn);
 			rp.appendChild(leftBtn);
 		}
-	},
+	}
 
 	/**
-	 * @override core
-	 * @param {Element} target Target command button
-	 * @returns
+	 * @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 value = target.getAttribute('data-command');
@@ -101,17 +115,15 @@ Align.prototype = {
 		const defaultDir = this.defaultDir;
 		const selectedFormsts = this.format.getLines();
 		for (let i = 0, len = selectedFormsts.length; i < len; i++) {
-			domUtils.setStyle(selectedFormsts[i], 'textAlign', value === defaultDir ? '' : value);
+			dom.utils.setStyle(selectedFormsts[i], 'textAlign', value === defaultDir ? '' : value);
 		}
 
 		this.editor.effectNode = null;
 		this.menu.dropdownOff();
 		this.editor.focus();
 		this.history.push(false);
-	},
-
-	constructor: Align
-};
+	}
+}
 
 function CreateHTML({ lang, icons, options }, items) {
 	const alignItems = Array.isArray(items) ? items : options.get('_rtl') ? ['right', 'center', 'left', 'justify'] : ['left', 'center', 'right', 'justify'];
@@ -128,7 +140,7 @@ function CreateHTML({ lang, icons, options }, items) {
 		</li>`;
 	}
 
-	return domUtils.createElement(
+	return dom.utils.createElement(
 		'div',
 		{
 			class: 'se-dropdown se-list-layer se-list-align'