suneditor 3.0.0-beta.2 → 3.0.0-beta.20

package/src/plugins/dropdown/align.js

@@ -1,155 +1,157 @@
-import EditorInjector from '../../editorInjector';
-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);
-	}
-
-	/**
-	 * @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) {
-			dom.utils.changeElement(targetChild, this.alignIcons[this.defaultDir]);
-			target.removeAttribute('data-focus');
-		} else if (this.format.isLine(element)) {
-			const textAlign = /** @type {HTMLElement} */ (element).style.textAlign;
-			if (textAlign) {
-				dom.utils.changeElement(targetChild, this.alignIcons[textAlign] || this.alignIcons[this.defaultDir]);
-				target.setAttribute('data-focus', textAlign);
-				return true;
-			}
-		}
-
-		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
-	 */
-	on(target) {
-		const currentAlign = target.getAttribute('data-focus') || this.defaultDir;
-		if (!currentAlign) return;
-
-		const alignList = this.alignList;
-		for (let i = 0, len = alignList.length; i < len; i++) {
-			if (currentAlign === alignList[i].getAttribute('data-command')) {
-				dom.utils.addClass(alignList[i], 'active');
-			} else {
-				dom.utils.removeClass(alignList[i], 'active');
-			}
-		}
-	}
-
-	/**
-	 * @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';
-		if (this.defaultDir === _dir) return;
-
-		this.defaultDir = _dir;
-		const leftBtn = this._itemMenu.querySelector('[data-command="left"]');
-		const rightBtn = this._itemMenu.querySelector('[data-command="right"]');
-		if (leftBtn && rightBtn) {
-			const lp = leftBtn.parentElement;
-			const rp = rightBtn.parentElement;
-			lp.appendChild(rightBtn);
-			rp.appendChild(leftBtn);
-		}
-	}
-
-	/**
-	 * @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');
-		if (!value) return;
-
-		const defaultDir = this.defaultDir;
-		const selectedFormsts = this.format.getLines();
-		for (let i = 0, len = selectedFormsts.length; i < len; i++) {
-			dom.utils.setStyle(selectedFormsts[i], 'textAlign', value === defaultDir ? '' : value);
-		}
-
-		this.editor.effectNode = null;
-		this.menu.dropdownOff();
-		this.editor.focus();
-		this.history.push(false);
-	}
-}
-
-function CreateHTML({ lang, icons, options }, items) {
-	const alignItems = Array.isArray(items) ? items : options.get('_rtl') ? ['right', 'center', 'left', 'justify'] : ['left', 'center', 'right', 'justify'];
-
-	let html = '';
-	for (let i = 0, item, text; i < alignItems.length; i++) {
-		item = alignItems[i];
-		text = lang['align' + item.charAt(0).toUpperCase() + item.slice(1)];
-		html += /*html*/ `
-		<li>
-			<button type="button" class="se-btn se-btn-list" data-command="${item}" title="${text}" aria-label="${text}">
-				<span class="se-list-icon">${icons['align_' + item]}</span>${text}
-			</button>
-		</li>`;
-	}
-
-	return dom.utils.createElement(
-		'div',
-		{
-			class: 'se-dropdown se-list-layer se-list-align'
-		},
-		/*html*/ `
-		<div class="se-list-inner">
-			<ul class="se-list-basic">${html}</ul>
-		</div>`
-	);
-}
-
-export default Align;
+import EditorInjector from '../../editorInjector';
+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);
+	}
+
+	/**
+	 * @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.
+	 */
+	active(element, target) {
+		const targetChild = target.firstElementChild;
+
+		if (!element) {
+			dom.utils.changeElement(targetChild, this.alignIcons[this.defaultDir]);
+			target.removeAttribute('data-focus');
+		} else if (this.format.isLine(element)) {
+			const textAlign = /** @type {HTMLElement} */ (element).style.textAlign;
+			if (textAlign) {
+				dom.utils.changeElement(targetChild, this.alignIcons[textAlign] || this.alignIcons[this.defaultDir]);
+				target.setAttribute('data-focus', textAlign);
+				return true;
+			}
+			return undefined;
+		}
+
+		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
+	 */
+	on(target) {
+		const currentAlign = target.getAttribute('data-focus') || this.defaultDir;
+		if (!currentAlign) return;
+
+		const alignList = this.alignList;
+		for (let i = 0, len = alignList.length; i < len; i++) {
+			if (currentAlign === alignList[i].getAttribute('data-command')) {
+				dom.utils.addClass(alignList[i], 'active');
+			} else {
+				dom.utils.removeClass(alignList[i], 'active');
+			}
+		}
+	}
+
+	/**
+	 * @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';
+		if (this.defaultDir === _dir) return;
+
+		this.defaultDir = _dir;
+		const leftBtn = this._itemMenu.querySelector('[data-command="left"]');
+		const rightBtn = this._itemMenu.querySelector('[data-command="right"]');
+		if (leftBtn && rightBtn) {
+			const lp = leftBtn.parentElement;
+			const rp = rightBtn.parentElement;
+			lp.appendChild(rightBtn);
+			rp.appendChild(leftBtn);
+		}
+	}
+
+	/**
+	 * @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');
+		if (!value) return;
+
+		const defaultDir = this.defaultDir;
+		const selectedFormsts = this.format.getLines();
+		for (let i = 0, len = selectedFormsts.length; i < len; i++) {
+			dom.utils.setStyle(selectedFormsts[i], 'textAlign', value === defaultDir ? '' : value);
+		}
+
+		this.editor.effectNode = null;
+		this.menu.dropdownOff();
+		this.editor.focus();
+		this.history.push(false);
+	}
+}
+
+function CreateHTML({ lang, icons, options }, items) {
+	const alignItems = Array.isArray(items) ? items : options.get('_rtl') ? ['right', 'center', 'left', 'justify'] : ['left', 'center', 'right', 'justify'];
+
+	let html = '';
+	for (let i = 0, item, text; i < alignItems.length; i++) {
+		item = alignItems[i];
+		text = lang['align' + item.charAt(0).toUpperCase() + item.slice(1)];
+		html += /*html*/ `
+		<li>
+			<button type="button" class="se-btn se-btn-list" data-command="${item}" title="${text}" aria-label="${text}">
+				<span class="se-list-icon">${icons['align_' + item]}</span>${text}
+			</button>
+		</li>`;
+	}
+
+	return dom.utils.createElement(
+		'div',
+		{
+			class: 'se-dropdown se-list-layer se-list-align'
+		},
+		/*html*/ `
+		<div class="se-list-inner">
+			<ul class="se-list-basic">${html}</ul>
+		</div>`
+	);
+}
+
+export default Align;

package/src/plugins/dropdown/backgroundColor.js

@@ -1,104 +1,108 @@
-import EditorInjector from '../../editorInjector';
-import ColorPicker from '../../modules/ColorPicker';
-import { dom } from '../../helper';
-
-/**
- * @class
- * @description Text background color plugin
- */
-class BackgroundColor extends EditorInjector {
-	static key = 'backgroundColor';
-	static type = 'dropdown-free';
-	static className = '';
-
-	/**
-	 * @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;
-
-		if (!element) {
-			colorHelper.style.color = '';
-		} else if (element.style.backgroundColor.length > 0) {
-			colorHelper.style.color = element.style.backgroundColor;
-			return true;
-		}
-
-		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
-	 */
-	on(target) {
-		this.colorPicker.init(this.selection.getNode(), target);
-	}
-
-	/**
-	 * @editorMethod Modules.Dropdown
-	 * @description Executes the method that is called when a plugin's "dropdown" menu is closed.
-	 */
-	off() {
-		this.colorPicker.hueSliderClose();
-	}
-
-	/**
-	 * @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(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.applyInlineElement(null, { stylesToModify: ['background-color'], nodesToRemove: ['span'], strictRemove: true });
-		}
-
-		this.menu.dropdownOff();
-	}
-}
-
-function CreateHTML() {
-	return dom.utils.createElement('DIV', { class: 'se-dropdown se-list-layer' }, null);
-}
-
-export default BackgroundColor;
+import EditorInjector from '../../editorInjector';
+import ColorPicker from '../../modules/ColorPicker';
+import { dom } from '../../helper';
+
+/**
+ * @class
+ * @description Text background color plugin
+ */
+class BackgroundColor extends EditorInjector {
+	static key = 'backgroundColor';
+	static type = 'dropdown-free';
+	static className = '';
+
+	/**
+	 * @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
+	 * - If it returns "undefined", it will no longer be called in this scope.
+	 */
+	active(element, target) {
+		const colorHelper = /** @type {SVGPathElement} */ (target.querySelector('path.se-svg-color-helper'));
+		if (!colorHelper) return undefined;
+
+		let color = '';
+		if (!element) {
+			colorHelper.style.color = color;
+		} else if (this.format.isLine(element)) {
+			return undefined;
+		} else if ((color = dom.utils.getStyle(element, 'backgroundColor'))) {
+			colorHelper.style.color = color;
+			return true;
+		}
+
+		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
+	 */
+	on(target) {
+		this.colorPicker.init(this.selection.getNode(), target, (current) => this.format.isLine(current));
+	}
+
+	/**
+	 * @editorMethod Modules.Dropdown
+	 * @description Executes the method that is called when a plugin's "dropdown" menu is closed.
+	 */
+	off() {
+		this.colorPicker.hueSliderClose();
+	}
+
+	/**
+	 * @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(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.applyInlineElement(null, { stylesToModify: ['background-color'], nodesToRemove: ['span'], strictRemove: true });
+		}
+
+		this.menu.dropdownOff();
+	}
+}
+
+function CreateHTML() {
+	return dom.utils.createElement('DIV', { class: 'se-dropdown se-list-layer' }, null);
+}
+
+export default BackgroundColor;