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

package/src/plugins/dropdown/paragraphStyle.js

@@ -1,45 +1,68 @@
 import EditorInjector from '../../editorInjector';
-import { domUtils } from '../../helper';
+import { dom } from '../../helper';
 
-const ParagraphStyle = function (editor, pluginOptions) {
-	// plugin bisic properties
-	EditorInjector.call(this, editor);
-	this.title = this.lang.paragraphStyle;
-	this.icon = 'paragraph_style';
+/**
+ * @class
+ * @description A plugin to style lines using classes.
+ */
+class ParagraphStyle extends EditorInjector {
+	static key = 'paragraphStyle';
+	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<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: ''}
+		]
+	 */
+	constructor(editor, pluginOptions) {
+		// plugin bisic properties
+		super(editor);
+		this.title = this.lang.paragraphStyle;
+		this.icon = 'paragraph_style';
 
-	// members
-	this.classList = menu.querySelectorAll('li button');
+		// create HTML
+		const menu = CreateHTML(editor, pluginOptions.items);
 
-	// init
-	this.menu.initDropdownTarget(ParagraphStyle, menu);
-};
+		// members
+		this.classList = menu.querySelectorAll('li button');
+
+		// init
+		this.menu.initDropdownTarget(ParagraphStyle, menu);
+	}
 
-ParagraphStyle.key = 'paragraphStyle';
-ParagraphStyle.type = 'dropdown';
-ParagraphStyle.className = '';
-ParagraphStyle.prototype = {
 	/**
-	 * @override dropdown
+	 * @editorMethod Modules.Dropdown
+	 * @description Executes the method that is called when a plugin's dropdown menu is opened.
 	 */
 	on() {
 		const paragraphList = this.classList;
 		const currentFormat = this.format.getLine(this.selection.getNode());
 
 		for (let i = 0, len = paragraphList.length; i < len; i++) {
-			if (domUtils.hasClass(currentFormat, paragraphList[i].getAttribute('data-command'))) {
-				domUtils.addClass(paragraphList[i], 'active');
+			if (dom.utils.hasClass(currentFormat, paragraphList[i].getAttribute('data-command'))) {
+				dom.utils.addClass(paragraphList[i], 'active');
 			} else {
-				domUtils.removeClass(paragraphList[i], 'active');
+				dom.utils.removeClass(paragraphList[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 value = target.getAttribute('data-command');
@@ -51,17 +74,15 @@ ParagraphStyle.prototype = {
 		}
 
 		// change format class
-		const toggleClass = domUtils.hasClass(target, 'active') ? domUtils.removeClass : domUtils.addClass;
+		const toggleClass = dom.utils.hasClass(target, 'active') ? dom.utils.removeClass : dom.utils.addClass;
 		for (let i = 0, len = selectedFormsts.length; i < len; i++) {
 			toggleClass(selectedFormsts[i], value);
 		}
 
 		this.menu.dropdownOff();
 		this.history.push(false);
-	},
-
-	constructor: ParagraphStyle
-};
+	}
+}
 
 function CreateHTML({ lang }, items) {
 	const defaultList = {
@@ -111,7 +132,7 @@ function CreateHTML({ lang }, items) {
 		</ul>
 	</div>`;
 
-	return domUtils.createElement('DIV', { class: 'se-dropdown se-list-layer se-list-format' }, list);
+	return dom.utils.createElement('DIV', { class: 'se-dropdown se-list-layer se-list-format' }, list);
 }
 
 export default ParagraphStyle;