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

package/src/plugins/dropdown/hr.js

@@ -1,74 +1,125 @@
 import EditorInjector from '../../editorInjector';
-import { domUtils } from '../../helper';
-
-const HR = function (editor, pluginOptions) {
-	// plugin bisic properties
-	EditorInjector.call(this, editor);
-	this.title = this.lang.horizontalLine;
-	this.icon = 'horizontal_line';
-
-	// create HTML
-	const HRMenus = CreateHTML(editor, pluginOptions.items);
-
-	// members
-	this.list = HRMenus.querySelectorAll('button');
-
-	// init
-	this.menu.initDropdownTarget(HR, HRMenus);
-};
-
-HR.key = 'hr';
-HR.type = 'dropdown';
-HR.className = '';
-HR.component = function (node) {
-	return /^hr$/i.test(node?.nodeName) ? node : null;
-};
-HR.prototype = {
+import { dom } from '../../helper';
+
+/**
+ * @typedef {import('../../core/class/shortcuts').ShortcutInfo} ShortcutInfo
+ */
+
+/**
+ * @class
+ * @description HR Plugin
+ */
+class HR extends EditorInjector {
+	static key = 'hr';
+	static type = 'dropdown';
+	static className = '';
 	/**
-	 * @override component
-	 * @description Called when a container is selected.
-	 * @param {Element} element Target element
+	 * @this {HR}
+	 * @param {HTMLElement} node - The node to check.
+	 * @returns {HTMLElement|null} Returns a node if the node is a valid component.
 	 */
-	select(element) {
-		domUtils.addClass(element, 'on');
-	},
+	static component(node) {
+		return /^hr$/i.test(node?.nodeName) ? node : null;
+	}
+
+	/**
+	 * @constructor
+	 * @param {__se__EditorCore} editor - The root editor instance
+	 * @param {Object} pluginOptions
+	 * @param {Array<{name: string, class: string}>} pluginOptions.items - HR list
+	 */
+	constructor(editor, pluginOptions) {
+		// plugin bisic properties
+		super(editor);
+		this.title = this.lang.horizontalLine;
+		this.icon = 'horizontal_line';
+
+		// create HTML
+		const HRMenus = CreateHTML(editor, pluginOptions.items);
+
+		// members
+		this.list = HRMenus.querySelectorAll('button');
+
+		// init
+		this.menu.initDropdownTarget(HR, HRMenus);
+	}
 
 	/**
-	 * @override component
+	 * @editorMethod Editor.Component
+	 * @description Executes the method that is called when a component of a plugin is selected.
+	 * @param {HTMLElement} target Target component element
+	 */
+	select(target) {
+		dom.utils.addClass(target, 'on');
+	}
+
+	/**
+	 * @editorMethod Editor.Component
 	 * @description Called when a container is deselected.
-	 * @param {Element} element Target element
+	 * @param {HTMLElement} element Target element
 	 */
 	deselect(element) {
-		domUtils.removeClass(element, 'on');
-	},
+		dom.utils.removeClass(element, 'on');
+	}
 
-	destroy(element) {
-		if (!element) return;
+	/**
+	 * @editorMethod Editor.Component
+	 * @description Method to delete a component of a plugin, called by the "FileManager", "Controller" module.
+	 * @param {HTMLElement} target Target element
+	 */
+	destroy(target) {
+		if (!target) return;
 
-		const focusEl = element.previousElementSibling || element.nextElementSibling;
-		domUtils.removeItem(element);
+		const focusEl = target.previousElementSibling || target.nextElementSibling;
+		dom.utils.removeItem(target);
 
 		// focus
 		this.editor.focusEdge(focusEl);
 		this.history.push(false);
-	},
+	}
 
 	/**
-	 * @override core
-	 * @param {Element} 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 hr = target.firstElementChild.cloneNode(false);
-		this.editor.focus();
-		this.component.insert(hr, false, false);
-		this.menu.dropdownOff();
-
+		const hr = this.submit(target.firstElementChild.className);
 		const line = this.format.addLine(hr);
 		this.selection.setRange(line, 1, line, 1);
-	},
+		this.menu.dropdownOff();
+	}
 
-	constructor: HR
-};
+	/**
+	 * @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({ line, range }) {
+		const newLine = this.nodeTransform.split(range.endContainer, range.endOffset, 0);
+		this.submit('__se__solid');
+		dom.utils.removeItem(line);
+		this.selection.setRange(newLine, 0, newLine, 0);
+	}
+
+	/**
+	 * @description Add a hr element
+	 * @param {string} className HR class name
+	 */
+	submit(className) {
+		const hr = dom.utils.createElement('hr', { class: className });
+		this.editor.focus();
+		this.component.insert(hr, { skipCharCount: false, skipSelection: true, skipHistory: false });
+		return hr;
+	}
+}
 
 function CreateHTML({ lang }, HRItems) {
 	const items = HRItems || [
@@ -96,7 +147,7 @@ function CreateHTML({ lang }, HRItems) {
 		</li>`;
 	}
 
-	return domUtils.createElement(
+	return dom.utils.createElement(
 		'DIV',
 		{
 			class: 'se-dropdown se-list-layer se-list-line'

package/src/plugins/dropdown/layout.js

@@ -1,33 +1,46 @@
 import EditorInjector from '../../editorInjector';
-import { domUtils } from '../../helper';
+import { dom } from '../../helper';
 
-const Layout = function (editor, pluginOptions) {
-	// plugin bisic properties
-	EditorInjector.call(this, editor);
-	this.title = this.lang.layout;
-	this.icon = 'layout';
+/**
+ * @class
+ * @description Layout Plugin, Apply layout to the entire editor.
+ */
+class Layout extends EditorInjector {
+	static key = 'layout';
+	static type = 'dropdown';
+	static className = '';
 
-	// members
-	this.selectedIndex = -1;
-	this.items = pluginOptions.items;
+	/**
+	 * @constructor
+	 * @param {__se__EditorCore} editor - The root editor instance
+	 * @param {Object} pluginOptions
+	 * @param {Array<{name: string, html: string}>} pluginOptions.items - Layout list
+	 */
+	constructor(editor, pluginOptions) {
+		// plugin bisic properties
+		super(editor);
+		this.title = this.lang.layout;
+		this.icon = 'layout';
 
-	// create HTML
-	const menu = CreateHTML(this.items);
+		// members
+		this.selectedIndex = -1;
+		this.items = pluginOptions.items;
 
-	// init
-	this.menu.initDropdownTarget(Layout, menu);
-};
+		// create HTML
+		const menu = CreateHTML(this.items);
+
+		// init
+		this.menu.initDropdownTarget(Layout, menu);
+	}
 
-Layout.key = 'layout';
-Layout.type = 'dropdown';
-Layout.className = '';
-Layout.prototype = {
 	/**
-	 * @override core
-	 * @param {Element} 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 index = target.getAttribute('data-value') * 1;
+		const index = Number(target.getAttribute('data-value'));
 		const temp = this.items[(this.selectedIndex = index)];
 
 		if (temp.html) {
@@ -38,10 +51,8 @@ Layout.prototype = {
 		}
 
 		this.menu.dropdownOff();
-	},
-
-	constructor: Layout
-};
+	}
+}
 
 function CreateHTML(layoutList) {
 	if (!layoutList || layoutList.length === 0) {
@@ -66,7 +77,7 @@ function CreateHTML(layoutList) {
 		</ul>
 	</div>`;
 
-	return domUtils.createElement('DIV', { class: 'se-list-layer' }, list);
+	return dom.utils.createElement('DIV', { class: 'se-list-layer' }, list);
 }
 
 export default Layout;

package/src/plugins/dropdown/lineHeight.js

@@ -1,42 +1,58 @@
 import EditorInjector from '../../editorInjector';
-import { domUtils } from '../../helper';
+import { dom } from '../../helper';
 
-const LineHeight = function (editor, pluginOptions) {
-	// plugin bisic properties
-	EditorInjector.call(this, editor);
-	this.title = this.lang.lineHeight;
-	this.icon = 'line_height';
+/**
+ * @class
+ * @description Line height Plugin
+ */
+class LineHeight extends EditorInjector {
+	static key = 'lineHeight';
+	static type = 'dropdown';
+	static className = '';
 
-	// create HTML
-	const menu = CreateHTML(editor, pluginOptions.items);
+	/**
+	 * @constructor
+	 * @param {__se__EditorCore} editor - The root editor instance
+	 * @param {Object} pluginOptions
+	 * @param {Array<{text: string, value: number}>} pluginOptions.items - Line height list
+	 */
+	constructor(editor, pluginOptions) {
+		// plugin bisic properties
+		super(editor);
+		this.title = this.lang.lineHeight;
+		this.icon = 'line_height';
 
-	// members
-	this.sizeList = menu.querySelectorAll('li button');
-	this.currentSize = -1;
+		// create HTML
+		const menu = CreateHTML(editor, pluginOptions.items);
 
-	// init
-	this.menu.initDropdownTarget(LineHeight, menu);
-};
+		// members
+		this.sizeList = menu.querySelectorAll('li button');
+		this.currentSize = null;
+
+		// init
+		this.menu.initDropdownTarget(LineHeight, menu);
+	}
 
-LineHeight.key = 'lineHeight';
-LineHeight.type = 'dropdown';
-LineHeight.className = '';
-LineHeight.prototype = {
 	/**
-	 * @override core
+	 * @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 (element?.style?.lineHeight.length > 0) {
-			domUtils.addClass(target, 'active');
+			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 format = this.format.getLine(this.selection.getNode());
@@ -46,19 +62,21 @@ LineHeight.prototype = {
 			const sizeList = this.sizeList;
 			for (let i = 0, len = sizeList.length; i < len; i++) {
 				if (currentSize === sizeList[i].getAttribute('data-command')) {
-					domUtils.addClass(sizeList[i], 'active');
+					dom.utils.addClass(sizeList[i], 'active');
 				} else {
-					domUtils.removeClass(sizeList[i], 'active');
+					dom.utils.removeClass(sizeList[i], 'active');
 				}
 			}
 
 			this.currentSize = currentSize;
 		}
-	},
+	}
 
 	/**
-	 * @override core
-	 * @param {Element} 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 value = target.getAttribute('data-command') || '';
@@ -72,24 +90,22 @@ LineHeight.prototype = {
 
 		this.editor.effectNode = null;
 		this.history.push(false);
-	},
-
-	constructor: LineHeight
-};
+	}
+}
 
 function CreateHTML({ lang }, items) {
 	const sizeList = items || [
-		{ text: '1', value: 1 },
-		{ text: '1.15', value: 1.15 },
-		{ text: '1.5', value: 1.5 },
-		{ text: '2', value: 2 }
+		{ text: '1', value: '1em' },
+		{ text: '1.2', value: '1.2em' },
+		{ text: '1.7', value: '1.7em' },
+		{ text: '2', value: '2em' }
 	];
 
 	let list = /*html*/ `
 	<div class="se-list-inner">
 		<ul class="se-list-basic">
 			<li>
-				<button type="button" class="default_value se-btn-list" title="${lang.default}" aria-label="${lang.default}">
+				<button type="button" class="se-btn se-btn-list default_value" data-command="" title="${lang.default}" aria-label="${lang.default}">
 					(${lang.default})
 				</button>
 			</li>`;
@@ -108,7 +124,7 @@ function CreateHTML({ lang }, items) {
 		</ul>
 	</div>`;
 
-	return domUtils.createElement('DIV', { class: 'se-dropdown se-list-layer' }, list);
+	return dom.utils.createElement('DIV', { class: 'se-dropdown se-list-layer' }, list);
 }
 
 export default LineHeight;

package/src/plugins/dropdown/list.js

@@ -1,75 +1,92 @@
 import EditorInjector from '../../editorInjector';
-import { domUtils } from '../../helper';
-
-const List = function (editor) {
-	// plugin bisic properties
-	EditorInjector.call(this, editor);
-	this.title = this.lang.list;
-	this.icon = 'list_numbered';
-
-	// create HTML
-	const menu = CreateHTML(editor);
-
-	// members
-	this.listItems = menu.querySelectorAll('li button');
-	this.icons = {
-		bulleted: editor.icons.list_bulleted,
-		numbered: editor.icons.list_numbered
-	};
-
-	// init
-	this.menu.initDropdownTarget(List, menu);
-};
-
-List.key = 'list';
-List.type = 'dropdown';
-List.className = 'se-icon-flip-rtl';
-List.prototype = {
+import { dom } from '../../helper';
+
+/**
+ * @class
+ * @description List Plugin (OL, UL)
+ */
+class List extends EditorInjector {
+	static key = 'list';
+	static type = 'dropdown';
+	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.list;
+		this.icon = 'list_numbered';
+
+		// create HTML
+		const menu = CreateHTML(editor);
+
+		// members
+		this.listItems = menu.querySelectorAll('li button');
+		this.icons = {
+			bulleted: editor.icons.list_bulleted,
+			numbered: editor.icons.list_numbered
+		};
+
+		// init
+		this.menu.initDropdownTarget(List, 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) {
 		const icon = target.firstElementChild;
 
-		if (domUtils.isList(element)) {
+		if (dom.check.isList(element)) {
 			const nodeName = element.nodeName.toLowerCase();
 			target.setAttribute('data-focus', nodeName);
-			domUtils.addClass(target, 'active');
+			dom.utils.addClass(target, 'active');
 
 			if (/^ul$/.test(nodeName)) {
-				domUtils.changeElement(icon, this.icons.bulleted);
+				dom.utils.changeElement(icon, this.icons.bulleted);
 			} else {
-				domUtils.changeElement(icon, this.icons.numbered);
+				dom.utils.changeElement(icon, this.icons.numbered);
 			}
 
 			return true;
 		}
 
 		target.removeAttribute('data-focus');
-		domUtils.changeElement(icon, this.icons.number);
-		domUtils.removeClass(target, 'active');
+		dom.utils.changeElement(icon, this.icons.number);
+		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.
+	 * @param {HTMLElement} target Line element at the current cursor position
 	 */
 	on(target) {
 		const currentList = target.getAttribute('data-focus') || '';
 		const list = this.listItems;
 		for (let i = 0, len = list.length; i < len; i++) {
 			if (currentList === list[i].getAttribute('data-command')) {
-				domUtils.addClass(list[i], 'active');
+				dom.utils.addClass(list[i], 'active');
 			} else {
-				domUtils.removeClass(list[i], 'active');
+				dom.utils.removeClass(list[i], 'active');
 			}
 		}
-	},
+	}
 
 	/**
-	 * @override core
-	 * @param {Element} 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 command = target.getAttribute('data-command');
@@ -79,10 +96,8 @@ List.prototype = {
 
 		this.menu.dropdownOff();
 		this.history.push(false);
-	},
-
-	constructor: List
-};
+	}
+}
 
 function CreateHTML({ lang, icons }) {
 	const html = /*html*/ `
@@ -101,7 +116,7 @@ function CreateHTML({ lang, icons }) {
 		</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);
 }
 
 export default List;