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

package/src/plugins/dropdown/formatBlock.js

@@ -1,178 +1,170 @@
-import EditorInjector from '../../editorInjector';
-import { dom } from '../../helper';
-
-const HEADER_KEYCODE = new Map([
-	['Digit1', 'h1'],
-	['Digit2', 'h2'],
-	['Digit3', 'h3'],
-	['Digit4', 'h4'],
-	['Digit5', 'h5'],
-	['Digit6', 'h6']
-]);
-
-/**
- * @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';
-
-	/**
-	 * @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);
-
-		// members
-		this.formatList = menu.querySelectorAll('li button');
-		this.currentFormat = '';
-
-		// init
-		this.menu.initDropdownTarget(FormatBlock, 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) {
-		let formatTitle = this.lang.formats;
-		const targetText = target.querySelector('.se-txt');
-
-		if (!element) {
-			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 = /** @type {HTMLButtonElement} */ (formatList[i]);
-				if (nodeName === f.getAttribute('data-value') && className === f.getAttribute('data-class')) {
-					formatTitle = f.title;
-					break;
-				}
-			}
-
-			dom.utils.changeTxt(targetText, formatTitle);
-			targetText.setAttribute('data-value', nodeName);
-			targetText.setAttribute('data-class', className);
-
-			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 formatList = this.formatList;
-		const targetText = target.querySelector('.se-txt');
-		const currentFormat = (targetText.getAttribute('data-value') || '') + (targetText.getAttribute('data-class') || '');
-
-		if (currentFormat !== this.currentFormat) {
-			for (let i = 0, len = formatList.length, f; i < len; i++) {
-				f = formatList[i];
-				if (currentFormat === f.getAttribute('data-value') + f.getAttribute('data-class')) {
-					dom.utils.addClass(f, 'active');
-				} else {
-					dom.utils.removeClass(f, 'active');
-				}
-			}
-
-			this.currentFormat = currentFormat;
-		}
-	}
-
-	/**
-	 * @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"
-		const command = target.getAttribute('data-command');
-		const tag = target.firstElementChild;
-		if (command === 'block') {
-			this.format.applyBlock(tag);
-		} else if (command === 'br-line') {
-			this.format.setBrLine(tag);
-		} else {
-			this.format.setLine(tag);
-		}
-
-		this.menu.dropdownOff();
-	}
-
-	/**
-	 * @description Create a header tag, call by "shortcut" class
-	 * - (e.g. shortcuts._h1: ['c+s+49+p~formatBlock.createHeader', ''])
-	 * @param {__se__PluginShortcutInfo} params - Information of the "shortcut" plugin
-	 */
-	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'];
-	const formatList = !items || items.length === 0 ? defaultFormats : items;
-
-	let list = /*html*/ `
-	<div class="se-list-inner">
-		<ul class="se-list-basic">`;
-
-	for (let i = 0, len = formatList.length, format, tagName, command, name, h, attrs, className; i < len; i++) {
-		format = formatList[i];
-
-		if (typeof format === 'string' && defaultFormats.includes(format)) {
-			tagName = format.toLowerCase();
-			command = tagName === 'blockquote' ? 'block' : tagName === 'pre' ? 'br-line' : 'line';
-			h = /^h/.test(tagName) ? tagName.match(/\d+/)[0] : '';
-			name = lang['tag_' + (h ? 'h' : tagName)] + h;
-			className = '';
-			attrs = '';
-		} else {
-			tagName = format.tag.toLowerCase();
-			command = format.command;
-			name = format.name || tagName;
-			className = format.class;
-			attrs = className ? ' class="' + className + '"' : '';
-		}
-
-		list += /*html*/ `
-			<li>
-				<button type="button" class="se-btn se-btn-list" data-command="${command}" data-value="${tagName}" data-class="${className}" title="${name}" aria-label="${name}">
-					<${tagName}${attrs}>${name}</${tagName}>
-				</button>
-			</li>`;
-	}
-	list += /*html*/ `
-		</ul>
-	</div>`;
-
-	return dom.utils.createElement('DIV', { class: 'se-dropdown se-list-layer se-list-format' }, list);
-}
-
-export default FormatBlock;
+import EditorInjector from '../../editorInjector';
+import { dom } from '../../helper';
+
+/**
+ * @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';
+
+	/**
+	 * @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);
+
+		// members
+		this.formatList = menu.querySelectorAll('li button');
+		this.currentFormat = '';
+
+		// init
+		this.menu.initDropdownTarget(FormatBlock, 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) {
+		let formatTitle = this.lang.formats;
+		const targetText = target.querySelector('.se-txt');
+
+		if (!element) {
+			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 = /** @type {HTMLButtonElement} */ (formatList[i]);
+				if (nodeName === f.getAttribute('data-value') && className === f.getAttribute('data-class')) {
+					formatTitle = f.title;
+					break;
+				}
+			}
+
+			dom.utils.changeTxt(targetText, formatTitle);
+			targetText.setAttribute('data-value', nodeName);
+			targetText.setAttribute('data-class', className);
+
+			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 formatList = this.formatList;
+		const targetText = target.querySelector('.se-txt');
+		const currentFormat = (targetText.getAttribute('data-value') || '') + (targetText.getAttribute('data-class') || '');
+
+		if (currentFormat !== this.currentFormat) {
+			for (let i = 0, len = formatList.length, f; i < len; i++) {
+				f = formatList[i];
+				if (currentFormat === f.getAttribute('data-value') + f.getAttribute('data-class')) {
+					dom.utils.addClass(f, 'active');
+				} else {
+					dom.utils.removeClass(f, 'active');
+				}
+			}
+
+			this.currentFormat = currentFormat;
+		}
+	}
+
+	/**
+	 * @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"
+		const command = target.getAttribute('data-command');
+		const tag = target.firstElementChild;
+		if (command === 'block') {
+			this.format.applyBlock(tag);
+		} else if (command === 'br-line') {
+			this.format.setBrLine(tag);
+		} else {
+			this.format.setLine(tag);
+		}
+
+		this.menu.dropdownOff();
+	}
+
+	/**
+	 * @description Create a header tag, call by "shortcut" class
+	 * - (e.g. shortcuts._h1: ['c+s+49+$~formatBlock.applyHeaderByShortcut', ''])
+	 * @param {__se__PluginShortcutInfo} params - Information of the "shortcut" plugin
+	 */
+	applyHeaderByShortcut({ keyCode }) {
+		const headerNum = keyCode.match(/\d+$/)?.[0];
+		const tag = dom.utils.createElement(`H${headerNum}`);
+		this.format.setLine(tag);
+	}
+}
+
+function CreateHTML({ lang }, items) {
+	const defaultFormats = ['p', 'blockquote', 'pre', 'h1', 'h2', 'h3', 'h4', 'h5', 'h6'];
+	const formatList = !items || items.length === 0 ? defaultFormats : items;
+
+	let list = /*html*/ `
+	<div class="se-list-inner">
+		<ul class="se-list-basic">`;
+
+	for (let i = 0, len = formatList.length, format, tagName, command, name, h, attrs, className; i < len; i++) {
+		format = formatList[i];
+
+		if (typeof format === 'string' && defaultFormats.includes(format)) {
+			tagName = format.toLowerCase();
+			command = tagName === 'blockquote' ? 'block' : tagName === 'pre' ? 'br-line' : 'line';
+			h = /^h/.test(tagName) ? tagName.match(/\d+/)[0] : '';
+			name = lang['tag_' + (h ? 'h' : tagName)] + h;
+			className = '';
+			attrs = '';
+		} else {
+			tagName = format.tag.toLowerCase();
+			command = format.command;
+			name = format.name || tagName;
+			className = format.class;
+			attrs = className ? ' class="' + className + '"' : '';
+		}
+
+		list += /*html*/ `
+			<li>
+				<button type="button" class="se-btn se-btn-list" data-command="${command}" data-value="${tagName}" data-class="${className}" title="${name}" aria-label="${name}">
+					<${tagName}${attrs}>${name}</${tagName}>
+				</button>
+			</li>`;
+	}
+	list += /*html*/ `
+		</ul>
+	</div>`;
+
+	return dom.utils.createElement('DIV', { class: 'se-dropdown se-list-layer se-list-format' }, list);
+}
+
+export default FormatBlock;

package/src/plugins/dropdown/hr.js

@@ -1,152 +1,152 @@
-import EditorInjector from '../../editorInjector';
-import { dom } from '../../helper';
-
-/**
- * @class
- * @description HR Plugin
- */
-class HR extends EditorInjector {
-	static key = 'hr';
-	static type = 'dropdown';
-	static className = '';
-	/**
-	 * @this {HR}
-	 * @param {HTMLElement} node - The node to check.
-	 * @returns {HTMLElement|null} Returns a node if the node is a valid component.
-	 */
-	static component(node) {
-		return /^hr$/i.test(node?.nodeName) ? node : null;
-	}
-
-	/**
-	 * @constructor
-	 * @param {__se__EditorCore} editor - The root editor instance
-	 * @param {Object} pluginOptions
-	 * @param {Array<{name: string, class: string}>} pluginOptions.items - HR list
-	 */
-	constructor(editor, pluginOptions) {
-		// plugin bisic properties
-		super(editor);
-		this.title = this.lang.horizontalLine;
-		this.icon = 'horizontal_line';
-
-		// create HTML
-		const HRMenus = CreateHTML(editor, pluginOptions.items);
-
-		// members
-		this.list = HRMenus.querySelectorAll('button');
-
-		// init
-		this.menu.initDropdownTarget(HR, HRMenus);
-	}
-
-	/**
-	 * @editorMethod Editor.Component
-	 * @description Executes the method that is called when a component of a plugin is selected.
-	 * @param {HTMLElement} target Target component element
-	 */
-	select(target) {
-		dom.utils.addClass(target, 'on');
-	}
-
-	/**
-	 * @editorMethod Editor.Component
-	 * @description Called when a container is deselected.
-	 * @param {HTMLElement} element Target element
-	 */
-	deselect(element) {
-		dom.utils.removeClass(element, 'on');
-	}
-
-	/**
-	 * @editorMethod Editor.Component
-	 * @description Method to delete a component of a plugin, called by the "FileManager", "Controller" module.
-	 * @param {HTMLElement} target Target element
-	 */
-	destroy(target) {
-		if (!target) return;
-
-		const focusEl = target.previousElementSibling || target.nextElementSibling;
-		dom.utils.removeItem(target);
-
-		// focus
-		this.editor.focusEdge(focusEl);
-		this.history.push(false);
-	}
-
-	/**
-	 * @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 hr = this.submit(target.firstElementChild.className);
-		const line = this.format.addLine(hr);
-		this.selection.setRange(line, 1, line, 1);
-		this.menu.dropdownOff();
-	}
-
-	/**
-	 * @editorMethod Editor.core
-	 * @description Executes methods called by shortcut keys.
-	 * @param {__se__PluginShortcutInfo} params - Information of the "shortcut" plugin
-	 */
-	shortcut({ line, range }) {
-		const newLine = this.nodeTransform.split(range.endContainer, range.endOffset, 0);
-		this.submit('__se__solid');
-		dom.utils.removeItem(line);
-		this.selection.setRange(newLine, 0, newLine, 0);
-	}
-
-	/**
-	 * @description Add a hr element
-	 * @param {string} className HR class name
-	 */
-	submit(className) {
-		const hr = dom.utils.createElement('hr', { class: className });
-		this.editor.focus();
-		this.component.insert(hr, { skipCharCount: false, skipSelection: true, skipHistory: false });
-		return hr;
-	}
-}
-
-function CreateHTML({ lang }, HRItems) {
-	const items = HRItems || [
-		{
-			name: lang.hr_solid,
-			class: '__se__solid'
-		},
-		{
-			name: lang.hr_dashed,
-			class: '__se__dashed'
-		},
-		{
-			name: lang.hr_dotted,
-			class: '__se__dotted'
-		}
-	];
-
-	let list = '';
-	for (let i = 0, len = items.length; i < len; i++) {
-		list += /*html*/ `
-		<li>
-			<button type="button" class="se-btn se-btn-list" data-command="hr" title="${items[i].name}" aria-label="${items[i].name}">
-				<hr${items[i].class ? ` class="${items[i].class}"` : ''}${items[i].style ? ` style="${items[i].style}"` : ''}/>
-			</button>
-		</li>`;
-	}
-
-	return dom.utils.createElement(
-		'DIV',
-		{
-			class: 'se-dropdown se-list-layer se-list-line'
-		},
-		/*html*/ `
-		<div class="se-list-inner">
-			<ul class="se-list-basic">${list}</ul>
-		</div>`
-	);
-}
-
-export default HR;
+import EditorInjector from '../../editorInjector';
+import { dom } from '../../helper';
+
+/**
+ * @class
+ * @description HR Plugin
+ */
+class HR extends EditorInjector {
+	static key = 'hr';
+	static type = 'dropdown';
+	static className = '';
+	/**
+	 * @this {HR}
+	 * @param {HTMLElement} node - The node to check.
+	 * @returns {HTMLElement|null} Returns a node if the node is a valid component.
+	 */
+	static component(node) {
+		return /^hr$/i.test(node?.nodeName) ? node : null;
+	}
+
+	/**
+	 * @constructor
+	 * @param {__se__EditorCore} editor - The root editor instance
+	 * @param {Object} pluginOptions
+	 * @param {Array<{name: string, class: string}>} pluginOptions.items - HR list
+	 */
+	constructor(editor, pluginOptions) {
+		// plugin bisic properties
+		super(editor);
+		this.title = this.lang.horizontalLine;
+		this.icon = 'horizontal_line';
+
+		// create HTML
+		const HRMenus = CreateHTML(editor, pluginOptions.items);
+
+		// members
+		this.list = HRMenus.querySelectorAll('button');
+
+		// init
+		this.menu.initDropdownTarget(HR, HRMenus);
+	}
+
+	/**
+	 * @editorMethod Editor.Component
+	 * @description Executes the method that is called when a component of a plugin is selected.
+	 * @param {HTMLElement} target Target component element
+	 */
+	select(target) {
+		dom.utils.addClass(target, 'on');
+	}
+
+	/**
+	 * @editorMethod Editor.Component
+	 * @description Called when a container is deselected.
+	 * @param {HTMLElement} element Target element
+	 */
+	deselect(element) {
+		dom.utils.removeClass(element, 'on');
+	}
+
+	/**
+	 * @editorMethod Editor.Component
+	 * @description Method to delete a component of a plugin, called by the "FileManager", "Controller" module.
+	 * @param {HTMLElement} target Target element
+	 */
+	destroy(target) {
+		if (!target) return;
+
+		const focusEl = target.previousElementSibling || target.nextElementSibling;
+		dom.utils.removeItem(target);
+
+		// focus
+		this.editor.focusEdge(focusEl);
+		this.history.push(false);
+	}
+
+	/**
+	 * @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 hr = this.submit(target.firstElementChild.className);
+		const line = this.format.addLine(hr);
+		this.selection.setRange(line, 1, line, 1);
+		this.menu.dropdownOff();
+	}
+
+	/**
+	 * @editorMethod Editor.core
+	 * @description Executes methods called by shortcut keys.
+	 * @param {__se__PluginShortcutInfo} params - Information of the "shortcut" plugin
+	 */
+	shortcut({ line, range }) {
+		const newLine = this.nodeTransform.split(range.endContainer, range.endOffset, 0);
+		this.submit('__se__solid');
+		dom.utils.removeItem(line);
+		this.selection.setRange(newLine, 0, newLine, 0);
+	}
+
+	/**
+	 * @description Add a hr element
+	 * @param {string} className HR class name
+	 */
+	submit(className) {
+		const hr = dom.utils.createElement('hr', { class: className });
+		this.editor.focus();
+		this.component.insert(hr, { skipCharCount: false, skipSelection: true, skipHistory: false });
+		return hr;
+	}
+}
+
+function CreateHTML({ lang }, HRItems) {
+	const items = HRItems || [
+		{
+			name: lang.hr_solid,
+			class: '__se__solid'
+		},
+		{
+			name: lang.hr_dashed,
+			class: '__se__dashed'
+		},
+		{
+			name: lang.hr_dotted,
+			class: '__se__dotted'
+		}
+	];
+
+	let list = '';
+	for (let i = 0, len = items.length; i < len; i++) {
+		list += /*html*/ `
+		<li>
+			<button type="button" class="se-btn se-btn-list" data-command="hr" title="${items[i].name}" aria-label="${items[i].name}">
+				<hr${items[i].class ? ` class="${items[i].class}"` : ''}${items[i].style ? ` style="${items[i].style}"` : ''}/>
+			</button>
+		</li>`;
+	}
+
+	return dom.utils.createElement(
+		'DIV',
+		{
+			class: 'se-dropdown se-list-layer se-list-line'
+		},
+		/*html*/ `
+		<div class="se-list-inner">
+			<ul class="se-list-basic">${list}</ul>
+		</div>`
+	);
+}
+
+export default HR;