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

package/src/plugins/dropdown/layout.js

@@ -1,25 +1,28 @@
-import EditorInjector from '../../editorInjector';
+import { PluginDropdown } from '../../interfaces';
 import { dom } from '../../helper';
 
+/**
+ * @typedef {Object} LayoutPluginOptions
+ * @property {Array<{name: string, html: string}>} [items] - Layout list
+ */
+
 /**
  * @class
  * @description Layout Plugin, Apply layout to the entire editor.
  */
-class Layout extends EditorInjector {
+class Layout extends PluginDropdown {
 	static key = 'layout';
-	static type = 'dropdown';
 	static className = '';
 
 	/**
 	 * @constructor
-	 * @param {__se__EditorCore} editor - The root editor instance
-	 * @param {Object} pluginOptions
-	 * @param {Array<{name: string, html: string}>} pluginOptions.items - Layout list
+	 * @param {SunEditor.Kernel} editor - The core kernel
+	 * @param {LayoutPluginOptions} pluginOptions - Plugin options
 	 */
 	constructor(editor, pluginOptions) {
 		// plugin bisic properties
 		super(editor);
-		this.title = this.lang.layout;
+		this.title = this.$.lang.layout;
 		this.icon = 'layout';
 
 		// members
@@ -30,30 +33,32 @@ class Layout extends EditorInjector {
 		const menu = CreateHTML(this.items);
 
 		// init
-		this.menu.initDropdownTarget(Layout, menu);
+		this.$.menu.initDropdownTarget(Layout, menu);
 	}
 
 	/**
-	 * @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
+	 * @override
+	 * @type {PluginDropdown['action']}
 	 */
 	action(target) {
 		const index = Number(target.getAttribute('data-value'));
 		const temp = this.items[(this.selectedIndex = index)];
 
 		if (temp.html) {
-			this.html.set(temp.html);
+			this.$.html.set(temp.html);
 		} else {
-			this.menu.dropdownOff();
+			this.$.menu.dropdownOff();
 			throw Error('[SUNEDITOR.layout.fail] cause : "layouts[i].html not found"');
 		}
 
-		this.menu.dropdownOff();
+		this.$.menu.dropdownOff();
 	}
 }
 
+/**
+ * @param {Array<{name: string, html: string}>} layoutList - Layout items
+ * @returns {HTMLElement}
+ */
 function CreateHTML(layoutList) {
 	if (!layoutList || layoutList.length === 0) {
 		console.warn('[SUNEDITOR.plugins.layout.warn] To use the "layout" plugin, please define the "layouts" option.');

package/src/plugins/dropdown/lineHeight.js

@@ -1,48 +1,51 @@
-import EditorInjector from '../../editorInjector';
+import { PluginDropdown } from '../../interfaces';
 import { dom } from '../../helper';
 
+/**
+ * @typedef {Object} LineHeightPluginOptions
+ * @property {Array<{text: string, value: string}>} [items] - Line height list
+ */
+
 /**
  * @class
  * @description Line height Plugin
  */
-class LineHeight extends EditorInjector {
+class LineHeight extends PluginDropdown {
 	static key = 'lineHeight';
-	static type = 'dropdown';
 	static className = '';
 
+	#defaultValue;
+
 	/**
 	 * @constructor
-	 * @param {__se__EditorCore} editor - The root editor instance
-	 * @param {Object} pluginOptions
-	 * @param {Array<{text: string, value: number}>} pluginOptions.items - Line height list
+	 * @param {SunEditor.Kernel} editor - The core kernel
+	 * @param {LineHeightPluginOptions} pluginOptions - Plugin options
 	 */
 	constructor(editor, pluginOptions) {
 		// plugin bisic properties
 		super(editor);
-		this.title = this.lang.lineHeight;
+		this.title = this.$.lang.lineHeight;
 		this.icon = 'line_height';
 
 		// create HTML
-		const menu = CreateHTML(editor, pluginOptions.items);
+		const menu = CreateHTML(this.$, pluginOptions.items);
 
 		// members
 		this.sizeList = menu.querySelectorAll('li button');
 		this.currentSize = null;
 
+		this.#defaultValue = /** @type {HTMLSpanElement} */ (menu.querySelector('.se-sub-list span'));
+
 		// init
-		this.menu.initDropdownTarget(LineHeight, menu);
+		this.$.menu.initDropdownTarget(LineHeight, 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 (this.format.isLine(element) && element.style.lineHeight.length > 0) {
+		if (this.$.format.isLine(element) && element.style.lineHeight.length > 0) {
 			dom.utils.addClass(target, 'active');
 			return true;
 		}
@@ -52,54 +55,66 @@ class LineHeight extends EditorInjector {
 	}
 
 	/**
-	 * @editorMethod Modules.Dropdown
-	 * @description Executes the method that is called when a plugin's dropdown menu is opened.
+	 * @override
+	 * @type {PluginDropdown['on']}
 	 */
 	on() {
-		const format = this.format.getLine(this.selection.getNode());
+		const format = this.$.format.getLine(this.$.selection.getNode());
 		const currentSize = !format ? '' : format.style.lineHeight + '';
 
 		if (currentSize !== this.currentSize) {
+			let found = false;
 			const sizeList = this.sizeList;
 			for (let i = 0, len = sizeList.length; i < len; i++) {
 				if (currentSize === sizeList[i].getAttribute('data-command')) {
 					dom.utils.addClass(sizeList[i], 'active');
+					found = true;
 				} else {
 					dom.utils.removeClass(sizeList[i], 'active');
 				}
 			}
 
 			this.currentSize = currentSize;
+
+			if (!found) {
+				this.#defaultValue.textContent = currentSize;
+				this.#defaultValue.style.display = 'block';
+			} else {
+				this.#defaultValue.style.display = 'none';
+			}
 		}
 	}
 
 	/**
-	 * @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
+	 * @override
+	 * @type {PluginDropdown['action']}
 	 */
 	action(target) {
 		const value = target.getAttribute('data-command') || '';
-		const formats = this.format.getLines();
+		const formats = this.$.format.getLines();
 
 		for (let i = 0, len = formats.length; i < len; i++) {
 			formats[i].style.lineHeight = value;
 		}
 
-		this.menu.dropdownOff();
+		this.$.menu.dropdownOff();
 
-		this.editor.effectNode = null;
-		this.history.push(false);
+		this.$.store.set('_lastSelectionNode', null);
+		this.$.history.push(false);
 	}
 }
 
+/**
+ * @param {SunEditor.Deps} $ - Kernel dependencies
+ * @param {Array<{text: string, value: string}>} [items] - Line height items
+ * @returns {HTMLElement}
+ */
 function CreateHTML({ lang }, items) {
 	const sizeList = items || [
 		{ text: '1', value: '1em' },
 		{ text: '1.2', value: '1.2em' },
 		{ text: '1.7', value: '1.7em' },
-		{ text: '2', value: '2em' }
+		{ text: '2', value: '2em' },
 	];
 
 	let list = /*html*/ `
@@ -107,9 +122,10 @@ function CreateHTML({ lang }, items) {
 		<ul class="se-list-basic">
 			<li>
 				<button type="button" class="se-btn se-btn-list default_value" data-command="" title="${lang.default}" aria-label="${lang.default}">
-					(${lang.default})
+					${lang.default}
 				</button>
-			</li>`;
+			</li>
+			<li class="se-btn-list se-sub-list"><span></span></li>`;
 
 	for (let i = 0, len = sizeList.length, size; i < len; i++) {
 		size = sizeList[i];

package/src/plugins/dropdown/list.js

@@ -1,46 +1,44 @@
-import EditorInjector from '../../editorInjector';
+import { PluginDropdown } from '../../interfaces';
 import { dom } from '../../helper';
 
 /**
  * @class
- * @description List Plugin (OL, UL)
+ * @description List Plugin (`OL`, `UL`)
  */
-class List extends EditorInjector {
+class List extends PluginDropdown {
 	static key = 'list';
-	static type = 'dropdown';
 	static className = 'se-icon-flip-rtl';
 
+	#listItems;
+	#listIcons;
+
 	/**
 	 * @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.list;
+		this.title = this.$.lang.list;
 		this.icon = 'list_numbered';
 
 		// create HTML
-		const menu = CreateHTML(editor);
+		const menu = CreateHTML(this.$);
 
 		// members
-		this.listItems = menu.querySelectorAll('li button');
-		this.icons = {
-			bulleted: editor.icons.list_bulleted,
-			numbered: editor.icons.list_numbered
+		this.#listItems = menu.querySelectorAll('li button');
+		this.#listIcons = {
+			bulleted: this.$.icons.list_bulleted,
+			numbered: this.$.icons.list_numbered,
 		};
 
 		// init
-		this.menu.initDropdownTarget(List, menu);
+		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
-	 * - 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 icon = target.firstElementChild;
@@ -51,29 +49,28 @@ class List extends EditorInjector {
 			dom.utils.addClass(target, 'active');
 
 			if (/^ul$/.test(nodeName)) {
-				dom.utils.changeElement(icon, this.icons.bulleted);
+				dom.utils.changeElement(icon, this.#listIcons.bulleted);
 			} else {
-				dom.utils.changeElement(icon, this.icons.numbered);
+				dom.utils.changeElement(icon, this.#listIcons.numbered);
 			}
 
 			return true;
 		}
 
 		target.removeAttribute('data-focus');
-		dom.utils.changeElement(icon, this.icons.number);
+		dom.utils.changeElement(icon, this.#listIcons.numbered);
 		dom.utils.removeClass(target, 'active');
 
 		return false;
 	}
 
 	/**
-	 * @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 currentList = target.getAttribute('data-focus') || '';
-		const list = this.listItems;
+		const list = this.#listItems;
 		for (let i = 0, len = list.length; i < len; i++) {
 			if (currentList === list[i].getAttribute('data-command')) {
 				dom.utils.addClass(list[i], 'active');
@@ -84,22 +81,24 @@ class List 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
+	 * @override
+	 * @type {PluginDropdown['action']}
 	 */
 	action(target) {
 		const command = target.getAttribute('data-command');
 		const type = target.getAttribute('data-value') || '';
-		const range = this.format.applyList(`${command}:${type}`, null, false);
-		if (range) this.selection.setRange(range.sc, range.so, range.ec, range.eo);
+		const range = this.$.listFormat.apply(`${command}:${type}`, null, false);
+		if (range) this.$.selection.setRange(range.sc, range.so, range.ec, range.eo);
 
-		this.menu.dropdownOff();
-		this.history.push(false);
+		this.$.menu.dropdownOff();
+		this.$.history.push(false);
 	}
 }
 
+/**
+ * @param {SunEditor.Deps} $ - Kernel dependencies
+ * @returns {HTMLElement}
+ */
 function CreateHTML({ lang, icons }) {
 	const html = /*html*/ `
 	<div class="se-list-inner">

package/src/plugins/dropdown/paragraphStyle.js

@@ -1,53 +1,56 @@
-import EditorInjector from '../../editorInjector';
+import { PluginDropdown } from '../../interfaces';
 import { dom } from '../../helper';
 
+/**
+ * @typedef {Object} ParagraphStylePluginOptions
+ * @property {Array<string|{name: string, class: string, _class: string}>} [items] - Paragraph item list
+ * @example
+ * use default paragraph styles
+ * ['spaced', 'bordered', 'neon']
+ * custom paragraph styles
+ * [
+ *   { name: 'spaced', class: '__se__p-spaced', _class: '' },
+ *   { name: 'bordered', class: '__se__p-bordered', _class: '' },
+ *   { name: 'neon', class: '__se__p-neon', _class: '' }
+ * ]
+ */
+
 /**
  * @class
  * @description A plugin to style lines using classes.
  */
-class ParagraphStyle extends EditorInjector {
+class ParagraphStyle extends PluginDropdown {
 	static key = 'paragraphStyle';
-	static type = 'dropdown';
 	static className = '';
 
 	/**
 	 * @constructor
-	 * @param {__se__EditorCore} editor - The root editor instance
-	 * @param {Object} pluginOptions
-	 * @param {Array<string|{name: string, class: string, _class: string}>} pluginOptions.items - Paragraph item list
-	 * @example
-	 * use default paragraph styles
-	 * ['spaced', 'bordered', 'neon']
-	 * custom paragraph styles
-		[
-			{ name: 'spaced', class: '__se__p-spaced', _class: '' },
-			{ name: 'bordered', class: '__se__p-bordered', _class: '' },
-			{ name: 'neon', class: '__se__p-neon', _class: ''}
-		]
+	 * @param {SunEditor.Kernel} editor - The core kernel
+	 * @param {ParagraphStylePluginOptions} pluginOptions - Plugin options
 	 */
 	constructor(editor, pluginOptions) {
 		// plugin bisic properties
 		super(editor);
-		this.title = this.lang.paragraphStyle;
+		this.title = this.$.lang.paragraphStyle;
 		this.icon = 'paragraph_style';
 
 		// create HTML
-		const menu = CreateHTML(editor, pluginOptions.items);
+		const menu = CreateHTML(this.$, pluginOptions.items);
 
 		// members
 		this.classList = menu.querySelectorAll('li button');
 
 		// init
-		this.menu.initDropdownTarget(ParagraphStyle, menu);
+		this.$.menu.initDropdownTarget(ParagraphStyle, menu);
 	}
 
 	/**
-	 * @editorMethod Modules.Dropdown
-	 * @description Executes the method that is called when a plugin's dropdown menu is opened.
+	 * @override
+	 * @type {PluginDropdown['on']}
 	 */
 	on() {
 		const paragraphList = this.classList;
-		const currentFormat = this.format.getLine(this.selection.getNode());
+		const currentFormat = this.$.format.getLine(this.$.selection.getNode());
 
 		for (let i = 0, len = paragraphList.length; i < len; i++) {
 			if (dom.utils.hasClass(currentFormat, paragraphList[i].getAttribute('data-command'))) {
@@ -59,17 +62,15 @@ class ParagraphStyle 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
+	 * @override
+	 * @type {PluginDropdown['action']}
 	 */
 	action(target) {
 		const value = target.getAttribute('data-command');
-		let selectedFormsts = this.format.getLines();
+		let selectedFormsts = this.$.format.getLines();
 		if (selectedFormsts.length === 0) {
-			this.selection.getRangeAndAddLine(this.selection.getRange(), null);
-			selectedFormsts = this.format.getLines();
+			this.$.selection.getRangeAndAddLine(this.$.selection.getRange(), null);
+			selectedFormsts = this.$.format.getLines();
 			if (selectedFormsts.length === 0) return;
 		}
 
@@ -79,28 +80,33 @@ class ParagraphStyle extends EditorInjector {
 			toggleClass(selectedFormsts[i], value);
 		}
 
-		this.menu.dropdownOff();
-		this.history.push(false);
+		this.$.menu.dropdownOff();
+		this.$.history.push(false);
 	}
 }
 
+/**
+ * @param {SunEditor.Deps} $ - Kernel dependencies
+ * @param {Array<string|{name: string, class: string, _class?: string}>} [items] - Paragraph style items
+ * @returns {HTMLElement}
+ */
 function CreateHTML({ lang }, items) {
 	const defaultList = {
 		spaced: {
 			name: lang.menu_spaced,
 			class: '__se__p-spaced',
-			_class: ''
+			_class: '',
 		},
 		bordered: {
 			name: lang.menu_bordered,
 			class: '__se__p-bordered',
-			_class: ''
+			_class: '',
 		},
 		neon: {
 			name: lang.menu_neon,
 			class: '__se__p-neon',
-			_class: ''
-		}
+			_class: '',
+		},
 	};
 	const paragraphStyles = !items || items.length === 0 ? ['spaced', 'bordered', 'neon'] : items;