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

package/src/plugins/dropdown/font.js

@@ -1,137 +1,141 @@
-import EditorInjector from '../../editorInjector';
-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';
-
-	/**
-	 * @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');
-		const tooltip = target.parentNode.querySelector('.se-tooltip-text');
-
-		if (!element) {
-			const font = this.status.hasFocus ? this.editor.frameContext.get('wwComputedStyle').fontFamily : this.lang.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, '');
-			dom.utils.changeTxt(targetText, selectFont);
-			dom.utils.changeTxt(tooltip, this.lang.font + ' (' + selectFont + ')');
-			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 fontList = this.fontList;
-		const currentFont = target.querySelector('.se-txt').textContent;
-
-		if (currentFont !== this.currentFont) {
-			for (let i = 0, len = fontList.length; i < len; i++) {
-				if (currentFont === (fontList[i].getAttribute('data-command') || '').replace(/'|"/g, '')) {
-					dom.utils.addClass(fontList[i], 'active');
-				} else {
-					dom.utils.removeClass(fontList[i], 'active');
-				}
-			}
-
-			this.currentFont = currentFont;
-		}
-	}
-
-	/**
-	 * @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>}
-	 */
-	async action(target) {
-		let value = target.getAttribute('data-command');
-		if (value) {
-			if (/[\s\d\W]/.test(value) && !/^['"].*['"]$/.test(value)) {
-				value = `"${value}"`;
-			}
-
-			// 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.applyInlineElement(null, { stylesToModify: ['font-family'], nodesToRemove: ['span'], strictRemove: true });
-		}
-
-		this.menu.dropdownOff();
-	}
-}
-
-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" 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++) {
-		font = fontList[i];
-		text = font.split(',')[0];
-		list += /*html*/ `
-			<li>
-				<button type="button" class="se-btn se-btn-list" data-command="${font}" data-txt="${text}" title="${text}" aria-label="${text}" style="font-family:${font};">${text}</button>
-			</li>`;
-	}
-	list += /*html*/ `
-		</ul>
-	</div>`;
-
-	return dom.utils.createElement('DIV', { class: 'se-dropdown se-list-layer se-list-font-family' }, list);
-}
-
-export default Font;
+import EditorInjector from '../../editorInjector';
+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';
+
+	/**
+	 * @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
+	 * - If it returns "undefined", it will no longer be called in this scope.
+	 */
+	active(element, target) {
+		const targetText = target.querySelector('.se-txt');
+		const tooltip = target.parentNode.querySelector('.se-tooltip-text');
+
+		let fontFamily = '';
+		if (!element) {
+			const font = this.status.hasFocus ? this.editor.frameContext.get('wwComputedStyle').fontFamily : this.lang.font;
+			dom.utils.changeTxt(targetText, font);
+			dom.utils.changeTxt(tooltip, this.status.hasFocus ? this.lang.font + (font ? ' (' + font + ')' : '') : font);
+		} else if (this.format.isLine(element)) {
+			return undefined;
+		} else if ((fontFamily = dom.utils.getStyle(element, 'fontFamily'))) {
+			const selectFont = fontFamily.replace(/["']/g, '');
+			dom.utils.changeTxt(targetText, selectFont);
+			dom.utils.changeTxt(tooltip, this.lang.font + ' (' + selectFont + ')');
+			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 fontList = this.fontList;
+		const currentFont = target.querySelector('.se-txt').textContent;
+
+		if (currentFont !== this.currentFont) {
+			for (let i = 0, len = fontList.length; i < len; i++) {
+				if (currentFont === (fontList[i].getAttribute('data-command') || '').replace(/'|"/g, '')) {
+					dom.utils.addClass(fontList[i], 'active');
+				} else {
+					dom.utils.removeClass(fontList[i], 'active');
+				}
+			}
+
+			this.currentFont = currentFont;
+		}
+	}
+
+	/**
+	 * @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>}
+	 */
+	async action(target) {
+		let value = target.getAttribute('data-command');
+		if (value) {
+			if (/[\s\d\W]/.test(value) && !/^['"].*['"]$/.test(value)) {
+				value = `"${value}"`;
+			}
+
+			// 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.applyInlineElement(null, { stylesToModify: ['font-family'], nodesToRemove: ['span'], strictRemove: true });
+		}
+
+		this.menu.dropdownOff();
+	}
+}
+
+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" 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++) {
+		font = fontList[i];
+		text = font.split(',')[0];
+		list += /*html*/ `
+			<li>
+				<button type="button" class="se-btn se-btn-list" data-command="${font}" data-txt="${text}" title="${text}" aria-label="${text}" style="font-family:${font};">${text}</button>
+			</li>`;
+	}
+	list += /*html*/ `
+		</ul>
+	</div>`;
+
+	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,105 +1,109 @@
-import EditorInjector from '../../editorInjector';
-import ColorPicker from '../../modules/ColorPicker';
-import { dom } from '../../helper';
-
-/**
- * @class
- * @description Font color plugin
- */
-class FontColor extends EditorInjector {
-	static key = 'fontColor';
-	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.fontColor;
-		this.icon = 'font_color';
-
-		// create HTML
-		const menu = CreateHTML();
-
-		// 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);
-	}
-
-	/**
-	 * @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) {
-		/** @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;
-	}
-
-	/**
-	 * @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
-	 * @Override 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: 'color: ' + color + ';' });
-			this.format.applyInlineElement(newNode, { stylesToModify: ['color'], nodesToRemove: null, strictRemove: null });
-		} else {
-			this.format.applyInlineElement(null, { stylesToModify: ['color'], nodesToRemove: ['span'], strictRemove: true });
-		}
-
-		this.menu.dropdownOff();
-	}
-}
-
-function CreateHTML() {
-	return dom.utils.createElement('DIV', { class: 'se-dropdown se-list-layer' }, null);
-}
-
-export default FontColor;
+import EditorInjector from '../../editorInjector';
+import ColorPicker from '../../modules/ColorPicker';
+import { dom } from '../../helper';
+
+/**
+ * @class
+ * @description Font color plugin
+ */
+class FontColor extends EditorInjector {
+	static key = 'fontColor';
+	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.fontColor;
+		this.icon = 'font_color';
+
+		// create HTML
+		const menu = CreateHTML();
+
+		// 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);
+	}
+
+	/**
+	 * @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) {
+		/** @type {HTMLElement} */
+		const colorHelper = target.querySelector('.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, 'color'))) {
+			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
+	 * @Override 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: 'color: ' + color + ';' });
+			this.format.applyInlineElement(newNode, { stylesToModify: ['color'], nodesToRemove: null, strictRemove: null });
+		} else {
+			this.format.applyInlineElement(null, { stylesToModify: ['color'], nodesToRemove: ['span'], strictRemove: true });
+		}
+
+		this.menu.dropdownOff();
+	}
+}
+
+function CreateHTML() {
+	return dom.utils.createElement('DIV', { class: 'se-dropdown se-list-layer' }, null);
+}
+
+export default FontColor;