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

package/src/plugins/dropdown/backgroundColor.js

@@ -1,73 +1,104 @@
 import EditorInjector from '../../editorInjector';
 import ColorPicker from '../../modules/ColorPicker';
-import { domUtils } from '../../helper';
+import { dom } from '../../helper';
 
-const BackgroundColor = function (editor, pluginOptions) {
-	EditorInjector.call(this, editor);
-	// plugin basic properties
-	this.title = this.lang.backgroundColor;
-	this.icon = 'background_color';
+/**
+ * @class
+ * @description Text background color plugin
+ */
+class BackgroundColor extends EditorInjector {
+	static key = 'backgroundColor';
+	static type = 'dropdown-free';
+	static className = '';
 
-	// create HTML
-	const menu = CreateHTML();
+	/**
+	 * @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
+	 */
+	constructor(editor, pluginOptions) {
+		super(editor);
+		// plugin basic properties
+		this.title = this.lang.backgroundColor;
+		this.icon = 'background_color';
+
+		// create HTML
+		const menu = CreateHTML();
+
+		// members
+		this.colorPicker = new ColorPicker(this, 'backgroundColor', {
+			colorList: pluginOptions.items,
+			splitNum: pluginOptions.splitNum,
+			disableHEXInput: pluginOptions.disableHEXInput,
+			hueSliderOptions: { controllerOptions: { parents: [menu], isOutsideForm: true } }
+		});
+
+		// itit
+		menu.appendChild(this.colorPicker.target);
+		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
+	 */
+	active(element, target) {
+		const colorHelper = /** @type {SVGPathElement} */ (target.querySelector('path.se-svg-color-helper'));
+		if (!colorHelper) return false;
 
-	// members
-	this.colorPicker = new ColorPicker(this, 'backgroundColor', {
-		colorList: pluginOptions.items,
-		splitNum: pluginOptions.splitNum,
-		disableHEXInput: pluginOptions.disableHEXInput,
-		hueSliderOptions: { controllerOptions: { parents: [menu], isOutsideForm: true } }
-	});
+		if (!element) {
+			colorHelper.style.color = '';
+		} else if (element.style.backgroundColor.length > 0) {
+			colorHelper.style.color = element.style.backgroundColor;
+			return true;
+		}
 
-	// itit
-	menu.appendChild(this.colorPicker.target);
-	this.menu.initDropdownTarget(BackgroundColor, menu);
-};
+		return false;
+	}
 
-BackgroundColor.key = 'backgroundColor';
-BackgroundColor.type = 'dropdown-free';
-BackgroundColor.className = '';
-BackgroundColor.prototype = {
 	/**
-	 * @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) {
 		this.colorPicker.init(this.selection.getNode(), target);
-	},
+	}
 
 	/**
-	 * @Override dropdown
+	 * @editorMethod Modules.Dropdown
+	 * @description Executes the method that is called when a plugin's "dropdown" menu is closed.
 	 */
 	off() {
 		this.colorPicker.hueSliderClose();
-	},
+	}
 
 	/**
-	 *  @override ColorPicker
+	 * @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)
 	 */
-	colorPickerAction(value) {
-		this.action(value);
-	},
-
-	/**
-	 * @override core
-	 */
-	action(value) {
-		if (value) {
-			const newNode = domUtils.createElement('SPAN', { style: 'background-color: ' + value + ';' });
-			this.format.applyTextStyle(newNode, ['background-color'], null, null);
+	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 });
 		} else {
-			this.format.applyTextStyle(null, ['background-color'], ['span'], true);
+			this.format.applyInlineElement(null, { stylesToModify: ['background-color'], nodesToRemove: ['span'], strictRemove: true });
 		}
 
 		this.menu.dropdownOff();
-	},
-
-	constructor: BackgroundColor
-};
+	}
+}
 
 function CreateHTML() {
-	return domUtils.createElement('DIV', { class: 'se-dropdown se-list-layer' }, null);
+	return dom.utils.createElement('DIV', { class: 'se-dropdown se-list-layer' }, null);
 }
 
 export default BackgroundColor;

package/src/plugins/dropdown/font.js

@@ -1,31 +1,48 @@
 import EditorInjector from '../../editorInjector';
-import { domUtils } from '../../helper';
-
-const Font = function (editor, pluginOptions) {
-	EditorInjector.call(this, editor);
-	// plugin basic properties
-	this.title = this.lang.font;
-	this.inner = '<span class="se-txt">' + this.lang.font + '</span>' + this.icons.arrow_down;
-
-	// create HTML
-	const fontList = pluginOptions.items || ['Arial', 'Comic Sans MS', 'Courier New', 'Impact', 'Georgia', 'tahoma', 'Trebuchet MS', 'Verdana'];
-	const menu = CreateHTML(editor, fontList);
-
-	// members
-	this.currentFont = '';
-	this.fontList = menu.querySelectorAll('ul li button');
-	this.fontArray = fontList;
-
-	// init
-	this.menu.initDropdownTarget(Font, menu);
-};
-
-Font.key = 'font';
-Font.type = 'dropdown';
-Font.className = 'se-btn-select se-btn-tool-font';
-Font.prototype = {
+import { dom } from '../../helper';
+
+/**
+ * @class
+ * @description Text font plugin
+ */
+class Font extends EditorInjector {
+	static key = 'font';
+	static type = 'dropdown';
+	static className = 'se-btn-select se-btn-tool-font';
+
 	/**
-	 * @override core
+	 * @constructor
+	 * @param {__se__EditorCore} editor - The root editor instance
+	 * @param {Object} pluginOptions
+	 * @param {Array<string>} pluginOptions.items - Font list
+	 * @param {number} pluginOptions.splitNum - Number of colors per line
+	 * @param {boolean} pluginOptions.disableHEXInput - Disable HEX input
+	 */
+	constructor(editor, pluginOptions) {
+		super(editor);
+		// plugin basic properties
+		this.title = this.lang.font;
+		this.inner = '<span class="se-txt">' + this.lang.font + '</span>' + this.icons.arrow_down;
+
+		// create HTML
+		const fontList = pluginOptions.items || ['Arial', 'Comic Sans MS', 'Courier New', 'Impact', 'Georgia', 'tahoma', 'Trebuchet MS', 'Verdana'];
+		const menu = CreateHTML(editor, fontList);
+
+		// members
+		this.currentFont = '';
+		this.fontList = menu.querySelectorAll('ul li button');
+		this.fontArray = fontList;
+
+		// init
+		this.menu.initDropdownTarget(Font, 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 targetText = target.querySelector('.se-txt');
@@ -33,20 +50,22 @@ Font.prototype = {
 
 		if (!element) {
 			const font = this.status.hasFocus ? this.editor.frameContext.get('wwComputedStyle').fontFamily : this.lang.font;
-			domUtils.changeTxt(targetText, font);
-			domUtils.changeTxt(tooltip, this.status.hasFocus ? this.lang.font + (font ? ' (' + font + ')' : '') : font);
+			dom.utils.changeTxt(targetText, font);
+			dom.utils.changeTxt(tooltip, this.status.hasFocus ? this.lang.font + (font ? ' (' + font + ')' : '') : font);
 		} else if (element?.style.fontFamily.length > 0) {
 			const selectFont = element.style.fontFamily.replace(/["']/g, '');
-			domUtils.changeTxt(targetText, selectFont);
-			domUtils.changeTxt(tooltip, this.lang.font + ' (' + selectFont + ')');
+			dom.utils.changeTxt(targetText, selectFont);
+			dom.utils.changeTxt(tooltip, this.lang.font + ' (' + selectFont + ')');
 			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 fontList = this.fontList;
@@ -55,44 +74,49 @@ Font.prototype = {
 		if (currentFont !== this.currentFont) {
 			for (let i = 0, len = fontList.length; i < len; i++) {
 				if (currentFont === (fontList[i].getAttribute('data-command') || '').replace(/'|"/g, '')) {
-					domUtils.addClass(fontList[i], 'active');
+					dom.utils.addClass(fontList[i], 'active');
 				} else {
-					domUtils.removeClass(fontList[i], 'active');
+					dom.utils.removeClass(fontList[i], 'active');
 				}
 			}
 
 			this.currentFont = currentFont;
 		}
-	},
+	}
 
 	/**
-	 * @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
+	 * @returns {Promise<void>}
 	 */
-	action(target) {
+	async action(target) {
 		let value = target.getAttribute('data-command');
 		if (value) {
 			if (/[\s\d\W]/.test(value) && !/^['"].*['"]$/.test(value)) {
 				value = `"${value}"`;
 			}
-			const newNode = domUtils.createElement('SPAN', { style: 'font-family: ' + value + ';' });
-			this.format.applyTextStyle(newNode, ['font-family'], null, null);
+
+			// before event
+			if ((await this.triggerEvent('onFontActionBefore', { value })) === false) return;
+
+			const newNode = dom.utils.createElement('SPAN', { style: 'font-family: ' + value + ';' });
+			this.format.applyInlineElement(newNode, { stylesToModify: ['font-family'], nodesToRemove: null, strictRemove: null });
 		} else {
-			this.format.applyTextStyle(null, ['font-family'], ['span'], true);
+			this.format.applyInlineElement(null, { stylesToModify: ['font-family'], nodesToRemove: ['span'], strictRemove: true });
 		}
 
 		this.menu.dropdownOff();
-	},
-
-	constructor: Font
-};
+	}
+}
 
 function CreateHTML({ lang }, fontList) {
 	let list = /*html*/ `
 	<div class="se-list-inner">
 		<ul class="se-list-basic">
 			<li>
-				<button type="button" class="se-btn se-btn-list default_value" title="${lang.default}" aria-label="${lang.default}">(${lang.default})</button>
+				<button type="button" class="se-btn se-btn-list default_value" data-command="" title="${lang.default}" aria-label="${lang.default}">(${lang.default})</button>
 			</li>`;
 
 	for (let i = 0, len = fontList.length, font, text; i < len; i++) {
@@ -107,7 +131,7 @@ function CreateHTML({ lang }, fontList) {
 		</ul>
 	</div>`;
 
-	return domUtils.createElement('DIV', { class: 'se-dropdown se-list-layer se-list-font-family' }, list);
+	return dom.utils.createElement('DIV', { class: 'se-dropdown se-list-layer se-list-font-family' }, list);
 }
 
 export default Font;

package/src/plugins/dropdown/fontColor.js

@@ -1,73 +1,105 @@
 import EditorInjector from '../../editorInjector';
 import ColorPicker from '../../modules/ColorPicker';
-import { domUtils } from '../../helper';
+import { dom } from '../../helper';
 
-const FontColor = function (editor, pluginOptions) {
-	EditorInjector.call(this, editor);
-	// plugin basic properties
-	this.title = this.lang.fontColor;
-	this.icon = 'font_color';
+/**
+ * @class
+ * @description Font color plugin
+ */
+class FontColor extends EditorInjector {
+	static key = 'fontColor';
+	static type = 'dropdown-free';
+	static className = '';
 
-	// create HTML
-	const menu = CreateHTML();
+	/**
+	 * @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
+	 */
+	constructor(editor, pluginOptions) {
+		super(editor);
+		// plugin basic properties
+		this.title = this.lang.fontColor;
+		this.icon = 'font_color';
 
-	// members
-	this.colorPicker = new ColorPicker(this, 'color', {
-		colorList: pluginOptions.items,
-		splitNum: pluginOptions.splitNum,
-		disableHEXInput: pluginOptions.disableHEXInput,
-		hueSliderOptions: { controllerOptions: { parents: [menu], isOutsideForm: true } }
-	});
+		// create HTML
+		const menu = CreateHTML();
 
-	// itit
-	menu.appendChild(this.colorPicker.target);
-	this.menu.initDropdownTarget(FontColor, menu);
-};
+		// members
+		this.colorPicker = new ColorPicker(this, 'color', {
+			colorList: pluginOptions.items,
+			splitNum: pluginOptions.splitNum,
+			disableHEXInput: pluginOptions.disableHEXInput,
+			hueSliderOptions: { controllerOptions: { parents: [menu], isOutsideForm: true } }
+		});
+
+		// itit
+		menu.appendChild(this.colorPicker.target);
+		this.menu.initDropdownTarget(FontColor, menu);
+	}
 
-FontColor.key = 'fontColor';
-FontColor.type = 'dropdown-free';
-FontColor.className = '';
-FontColor.prototype = {
 	/**
-	 * @override dropdown
+	 * @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
 	 */
-	on(target) {
-		this.colorPicker.init(this.selection.getNode(), target);
-	},
+	active(element, target) {
+		/** @type {HTMLElement} */
+		const colorHelper = target.querySelector('.se-svg-color-helper');
+		if (!colorHelper) return false;
+
+		if (!element) {
+			colorHelper.style.color = '';
+		} else if (element?.style.color.length > 0) {
+			colorHelper.style.color = element.style.color;
+			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
 	 */
-	onDropdownClose() {
-		this.colorPicker.hueSliderClose();
-	},
+	on(target) {
+		this.colorPicker.init(this.selection.getNode(), target);
+	}
 
 	/**
-	 *  @override ColorPicker
+	 * @editorMethod Modules.Dropdown
+	 * @Override Executes the method that is called when a plugin's dropdown menu is closed.
 	 */
-	colorPickerAction(value) {
-		this.action(value);
-	},
+	off() {
+		this.colorPicker.hueSliderClose();
+	}
 
 	/**
-	 * @override core
+	 * @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)
 	 */
-	action(value) {
-		if (value) {
-			const newNode = domUtils.createElement('SPAN', { style: 'color: ' + value + ';' });
-			this.format.applyTextStyle(newNode, ['color'], null, null);
+	colorPickerAction(color) {
+		if (color) {
+			const newNode = dom.utils.createElement('SPAN', { style: 'color: ' + color + ';' });
+			this.format.applyInlineElement(newNode, { stylesToModify: ['color'], nodesToRemove: null, strictRemove: null });
 		} else {
-			this.format.applyTextStyle(null, ['color'], ['span'], true);
+			this.format.applyInlineElement(null, { stylesToModify: ['color'], nodesToRemove: ['span'], strictRemove: true });
 		}
 
 		this.menu.dropdownOff();
-	},
-
-	constructor: FontColor
-};
+	}
+}
 
 function CreateHTML() {
-	return domUtils.createElement('DIV', { class: 'se-dropdown se-list-layer' }, null);
+	return dom.utils.createElement('DIV', { class: 'se-dropdown se-list-layer' }, null);
 }
 
 export default FontColor;

package/src/plugins/dropdown/formatBlock.js

@@ -1,50 +1,78 @@
 import EditorInjector from '../../editorInjector';
-import { domUtils } from '../../helper';
+import { dom } from '../../helper';
+
+const HEADER_KEYCODE = new Map([
+	['Digit1', 'h1'],
+	['Digit2', 'h2'],
+	['Digit3', 'h3'],
+	['Digit4', 'h4'],
+	['Digit5', 'h5'],
+	['Digit6', 'h6']
+]);
+
+/**
+ * @typedef {import('../../core/class/shortcuts').ShortcutInfo} ShortcutInfo
+ */
+
+/**
+ * @class
+ * @description FormatBlock Plugin (P, BLOCKQUOTE, PRE, H1, H2...)
+ */
+class FormatBlock extends EditorInjector {
+	static key = 'formatBlock';
+	static type = 'dropdown';
+	static className = 'se-btn-select se-btn-tool-format';
 
-const FormatBlock = function (editor, pluginOptions) {
-	EditorInjector.call(this, editor);
-	// plugin basic properties
-	this.title = this.lang.formats;
-	this.inner = '<span class="se-txt">' + this.lang.formats + '</span>' + this.icons.arrow_down;
+	/**
+	 * @constructor
+	 * @param {__se__EditorCore} editor - The root editor instance
+	 * @param {Object} pluginOptions
+	 * @param {Array<string>} pluginOptions.items - Format list
+	 */
+	constructor(editor, pluginOptions) {
+		super(editor);
+		// plugin basic properties
+		this.title = this.lang.formats;
+		this.inner = '<span class="se-txt">' + this.lang.formats + '</span>' + this.icons.arrow_down;
 
-	// create HTML
-	const menu = CreateHTML(editor, pluginOptions.items);
+		// create HTML
+		const menu = CreateHTML(editor, pluginOptions.items);
 
-	// members
-	this.formatList = menu.querySelectorAll('li button');
-	this.currentFormat = '';
+		// members
+		this.formatList = menu.querySelectorAll('li button');
+		this.currentFormat = '';
 
-	// init
-	this.menu.initDropdownTarget(FormatBlock, menu);
-};
+		// init
+		this.menu.initDropdownTarget(FormatBlock, menu);
+	}
 
-FormatBlock.key = 'formatBlock';
-FormatBlock.type = 'dropdown';
-FormatBlock.className = 'se-btn-select se-btn-tool-format';
-FormatBlock.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) {
 		let formatTitle = this.lang.formats;
 		const targetText = target.querySelector('.se-txt');
 
 		if (!element) {
-			domUtils.changeTxt(targetText, formatTitle);
+			dom.utils.changeTxt(targetText, formatTitle);
 		} else if (this.format.isLine(element)) {
 			const formatList = this.formatList;
 			const nodeName = element.nodeName.toLowerCase();
 			const className = (element.className.match(/(\s|^)__se__format__[^\s]+/) || [''])[0].trim();
 
 			for (let i = 0, len = formatList.length, f; i < len; i++) {
-				f = formatList[i];
+				f = /** @type {HTMLButtonElement} */ (formatList[i]);
 				if (nodeName === f.getAttribute('data-value') && className === f.getAttribute('data-class')) {
 					formatTitle = f.title;
 					break;
 				}
 			}
 
-			domUtils.changeTxt(targetText, formatTitle);
+			dom.utils.changeTxt(targetText, formatTitle);
 			targetText.setAttribute('data-value', nodeName);
 			targetText.setAttribute('data-class', className);
 
@@ -52,10 +80,12 @@ FormatBlock.prototype = {
 		}
 
 		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 formatList = this.formatList;
@@ -66,19 +96,21 @@ FormatBlock.prototype = {
 			for (let i = 0, len = formatList.length, f; i < len; i++) {
 				f = formatList[i];
 				if (currentFormat === f.getAttribute('data-value') + f.getAttribute('data-class')) {
-					domUtils.addClass(f, 'active');
+					dom.utils.addClass(f, 'active');
 				} else {
-					domUtils.removeClass(f, 'active');
+					dom.utils.removeClass(f, 'active');
 				}
 			}
 
 			this.currentFormat = currentFormat;
 		}
-	},
+	}
 
 	/**
-	 * @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) {
 		// "line"|"br-line"|"block"
@@ -93,10 +125,19 @@ FormatBlock.prototype = {
 		}
 
 		this.menu.dropdownOff();
-	},
+	}
 
-	constructor: FormatBlock
-};
+	/**
+	 * @description Create a header tag, call by "shortcut" class
+	 * - (e.g. shortcuts._h1: ['c+s+49+p~formatBlock.createHeader', ''])
+	 * @param {ShortcutInfo} params - Information of the shortcut
+	 */
+	createHeader({ keyCode }) {
+		const headerName = HEADER_KEYCODE.get(keyCode);
+		const tag = dom.utils.createElement(headerName);
+		this.format.setLine(tag);
+	}
+}
 
 function CreateHTML({ lang }, items) {
 	const defaultFormats = ['p', 'blockquote', 'pre', 'h1', 'h2', 'h3', 'h4', 'h5', 'h6'];
@@ -135,7 +176,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 FormatBlock;