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

package/src/plugins/dropdown/template.js

@@ -1,83 +1,83 @@
-import EditorInjector from '../../editorInjector';
-import { dom } from '../../helper';
-
-/**
- * @class
- * @description Template Plugin, Apply a template to the selection.
- */
-class Template extends EditorInjector {
-	static key = 'template';
-	static type = 'dropdown';
-	static className = '';
-
-	/**
-	 * @constructor
-	 * @param {__se__EditorCore} editor - The root editor instance
-	 * @param {Object} pluginOptions
-	 * @param {Array<{name: string, html: string}>} pluginOptions.items - Template list
-	 */
-	constructor(editor, pluginOptions) {
-		// plugin bisic properties
-		super(editor);
-		this.title = this.lang.template;
-		this.icon = 'template';
-
-		// members
-		this.selectedIndex = -1;
-		this.items = pluginOptions.items;
-
-		// create HTML
-		const menu = CreateHTML(this.items);
-
-		// init
-		this.menu.initDropdownTarget(Template, menu);
-	}
-
-	/**
-	 * @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 index = Number(target.getAttribute('data-value'));
-		const temp = this.items[(this.selectedIndex = index)];
-
-		if (temp.html) {
-			this.html.insert(temp.html, { selectInserted: false, skipCharCount: false, skipCleaning: false });
-		} else {
-			this.menu.dropdownOff();
-			throw Error('[SUNEDITOR.template.fail] cause : "templates[i].html not found"');
-		}
-
-		this.menu.dropdownOff();
-	}
-}
-
-function CreateHTML(templateList) {
-	if (!templateList || templateList.length === 0) {
-		console.warn('[SUNEDITOR.plugins.template.warn] To use the "template" plugin, please define the "templates" option.');
-	}
-
-	let list = '<div class="se-dropdown se-list-inner"><ul class="se-list-basic">';
-	for (let i = 0, len = (templateList || []).length, t; i < len; i++) {
-		t = templateList[i];
-		list += /*html*/ `
-		<li>
-			<button 
-				type="button" 
-				class="se-btn se-btn-list" 
-				data-value="${i}" 
-				title="${t.name}" 
-				aria-label="${t.name}"
-			>
-				${t.name}
-			</button>
-		</li>`;
-	}
-	list += '</ul></div>';
-
-	return dom.utils.createElement('DIV', { class: 'se-list-layer' }, list);
-}
-
-export default Template;
+import EditorInjector from '../../editorInjector';
+import { dom } from '../../helper';
+
+/**
+ * @class
+ * @description Template Plugin, Apply a template to the selection.
+ */
+class Template extends EditorInjector {
+	static key = 'template';
+	static type = 'dropdown';
+	static className = '';
+
+	/**
+	 * @constructor
+	 * @param {__se__EditorCore} editor - The root editor instance
+	 * @param {Object} pluginOptions
+	 * @param {Array<{name: string, html: string}>} pluginOptions.items - Template list
+	 */
+	constructor(editor, pluginOptions) {
+		// plugin bisic properties
+		super(editor);
+		this.title = this.lang.template;
+		this.icon = 'template';
+
+		// members
+		this.selectedIndex = -1;
+		this.items = pluginOptions.items;
+
+		// create HTML
+		const menu = CreateHTML(this.items);
+
+		// init
+		this.menu.initDropdownTarget(Template, menu);
+	}
+
+	/**
+	 * @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 index = Number(target.getAttribute('data-value'));
+		const temp = this.items[(this.selectedIndex = index)];
+
+		if (temp.html) {
+			this.html.insert(temp.html, { selectInserted: false, skipCharCount: false, skipCleaning: false });
+		} else {
+			this.menu.dropdownOff();
+			throw Error('[SUNEDITOR.template.fail] cause : "templates[i].html not found"');
+		}
+
+		this.menu.dropdownOff();
+	}
+}
+
+function CreateHTML(templateList) {
+	if (!templateList || templateList.length === 0) {
+		console.warn('[SUNEDITOR.plugins.template.warn] To use the "template" plugin, please define the "templates" option.');
+	}
+
+	let list = '<div class="se-dropdown se-list-inner"><ul class="se-list-basic">';
+	for (let i = 0, len = (templateList || []).length, t; i < len; i++) {
+		t = templateList[i];
+		list += /*html*/ `
+		<li>
+			<button 
+				type="button" 
+				class="se-btn se-btn-list" 
+				data-value="${i}" 
+				title="${t.name}" 
+				aria-label="${t.name}"
+			>
+				${t.name}
+			</button>
+		</li>`;
+	}
+	list += '</ul></div>';
+
+	return dom.utils.createElement('DIV', { class: 'se-list-layer' }, list);
+}
+
+export default Template;

package/src/plugins/dropdown/textStyle.js

@@ -1,149 +1,149 @@
-import EditorInjector from '../../editorInjector';
-import { dom } from '../../helper';
-
-/**
- * @class
- * @description Text style Plugin, Applies a tag that specifies text styles to a selection.
- */
-class TextStyle extends EditorInjector {
-	static key = 'textStyle';
-	static type = 'dropdown';
-	static className = '';
-
-	/**
-	 * @constructor
-	 * @param {__se__EditorCore} editor - The root editor instance
-	 * @param {Object} pluginOptions
-	 * @param {Array<{name: string, html: string}>} pluginOptions.items - Template list
-	 */
-	constructor(editor, pluginOptions) {
-		// plugin bisic properties
-		super(editor);
-		this.title = this.lang.textStyle;
-		this.icon = 'text_style';
-
-		// create HTML
-		const menu = CreateHTML(editor, pluginOptions.items);
-
-		// members
-		this.styleList = menu.querySelectorAll('li button');
-
-		// init
-		this.menu.initDropdownTarget(TextStyle, menu);
-	}
-
-	/**
-	 * @editorMethod Modules.Dropdown
-	 * @description Executes the method that is called when a plugin's dropdown menu is opened.
-	 */
-	on() {
-		const styleButtonList = this.styleList;
-		const selectionNode = this.selection.getNode();
-
-		for (let i = 0, len = styleButtonList.length, btn, data, active; i < len; i++) {
-			btn = styleButtonList[i];
-			data = btn.getAttribute('data-value').split(',');
-
-			for (let v = 0, node, value; v < data.length; v++) {
-				node = selectionNode;
-				active = false;
-
-				while (node && !this.format.isLine(node) && !this.component.is(node)) {
-					if (node.nodeName.toLowerCase() === btn.getAttribute('data-command').toLowerCase()) {
-						value = data[v];
-						if (/^\./.test(value) ? dom.utils.hasClass(node, value.replace(/^\./, '')) : /** @type {HTMLElement} */ (node).style[value]) {
-							active = true;
-							break;
-						}
-					}
-					node = node.parentNode;
-				}
-
-				if (!active) break;
-			}
-
-			active ? dom.utils.addClass(btn, 'active') : dom.utils.removeClass(btn, 'active');
-		}
-	}
-
-	/**
-	 * @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 tempElement = /** @type {HTMLElement} */ (target.firstElementChild);
-		const checkStyles = tempElement.style.cssText.replace(/:.+(;|$)/g, ',').split(',');
-		checkStyles.pop();
-
-		const classes = tempElement.classList;
-		for (let i = 0, len = classes.length; i < len; i++) {
-			checkStyles.push('.' + classes[i]);
-		}
-
-		const newNode = dom.utils.hasClass(target, 'active') ? null : tempElement.cloneNode(false);
-		const removeNodes = newNode ? null : [tempElement.nodeName];
-		this.format.applyInlineElement(newNode, { stylesToModify: checkStyles, nodesToRemove: removeNodes, strictRemove: true });
-
-		this.menu.dropdownOff();
-	}
-}
-
-function CreateHTML({ lang }, items) {
-	const defaultList = {
-		code: {
-			name: lang.menu_code,
-			class: '__se__t-code',
-			tag: 'code'
-		},
-		shadow: {
-			name: lang.menu_shadow,
-			class: '__se__t-shadow',
-			tag: 'span'
-		}
-	};
-	const styleList = items || Object.keys(defaultList);
-
-	let list = '<div class="se-list-inner"><ul class="se-list-basic">';
-	for (let i = 0, len = styleList.length, t, tag, name, attrs, command, value; i < len; i++) {
-		t = styleList[i];
-		attrs = '';
-		value = '';
-		command = [];
-
-		if (typeof t === 'string') {
-			const cssText = defaultList[t.toLowerCase()];
-			if (!cssText) continue;
-			t = cssText;
-		}
-
-		name = t.name;
-		tag = t.tag || 'span';
-
-		attrs += ` class="${t.class}"`;
-		value += `.${t.class.trim().replace(/\s+/g, ',.')}`;
-		command.push('class');
-
-		value = value.replace(/,$/, '');
-
-		list += `
-		<li>
-			<button 
-				type="button" 
-				class="se-btn se-btn-list" 
-				data-command="${tag}" 
-				data-value="${value}" 
-				title="${name}" 
-				aria-label="${name}"
-			>
-				<${tag}${attrs}>${name}</${tag}>
-			</button>
-		</li>`;
-	}
-	list += '</ul></div>';
-
-	return dom.utils.createElement('DIV', { class: 'se-dropdown se-list-layer se-list-format' }, list);
-}
-
-export default TextStyle;
+import EditorInjector from '../../editorInjector';
+import { dom } from '../../helper';
+
+/**
+ * @class
+ * @description Text style Plugin, Applies a tag that specifies text styles to a selection.
+ */
+class TextStyle extends EditorInjector {
+	static key = 'textStyle';
+	static type = 'dropdown';
+	static className = '';
+
+	/**
+	 * @constructor
+	 * @param {__se__EditorCore} editor - The root editor instance
+	 * @param {Object} pluginOptions
+	 * @param {Array<{name: string, html: string}>} pluginOptions.items - Template list
+	 */
+	constructor(editor, pluginOptions) {
+		// plugin bisic properties
+		super(editor);
+		this.title = this.lang.textStyle;
+		this.icon = 'text_style';
+
+		// create HTML
+		const menu = CreateHTML(editor, pluginOptions.items);
+
+		// members
+		this.styleList = menu.querySelectorAll('li button');
+
+		// init
+		this.menu.initDropdownTarget(TextStyle, menu);
+	}
+
+	/**
+	 * @editorMethod Modules.Dropdown
+	 * @description Executes the method that is called when a plugin's dropdown menu is opened.
+	 */
+	on() {
+		const styleButtonList = this.styleList;
+		const selectionNode = this.selection.getNode();
+
+		for (let i = 0, len = styleButtonList.length, btn, data, active; i < len; i++) {
+			btn = styleButtonList[i];
+			data = btn.getAttribute('data-value').split(',');
+
+			for (let v = 0, node, value; v < data.length; v++) {
+				node = selectionNode;
+				active = false;
+
+				while (node && !this.format.isLine(node) && !this.component.is(node)) {
+					if (node.nodeName.toLowerCase() === btn.getAttribute('data-command').toLowerCase()) {
+						value = data[v];
+						if (/^\./.test(value) ? dom.utils.hasClass(node, value.replace(/^\./, '')) : /** @type {HTMLElement} */ (node).style[value]) {
+							active = true;
+							break;
+						}
+					}
+					node = node.parentNode;
+				}
+
+				if (!active) break;
+			}
+
+			active ? dom.utils.addClass(btn, 'active') : dom.utils.removeClass(btn, 'active');
+		}
+	}
+
+	/**
+	 * @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 tempElement = /** @type {HTMLElement} */ (target.firstElementChild);
+		const checkStyles = tempElement.style.cssText.replace(/:.+(;|$)/g, ',').split(',');
+		checkStyles.pop();
+
+		const classes = tempElement.classList;
+		for (let i = 0, len = classes.length; i < len; i++) {
+			checkStyles.push('.' + classes[i]);
+		}
+
+		const newNode = dom.utils.hasClass(target, 'active') ? null : tempElement.cloneNode(false);
+		const removeNodes = newNode ? null : [tempElement.nodeName];
+		this.format.applyInlineElement(newNode, { stylesToModify: checkStyles, nodesToRemove: removeNodes, strictRemove: true });
+
+		this.menu.dropdownOff();
+	}
+}
+
+function CreateHTML({ lang }, items) {
+	const defaultList = {
+		code: {
+			name: lang.menu_code,
+			class: '__se__t-code',
+			tag: 'code'
+		},
+		shadow: {
+			name: lang.menu_shadow,
+			class: '__se__t-shadow',
+			tag: 'span'
+		}
+	};
+	const styleList = items || Object.keys(defaultList);
+
+	let list = '<div class="se-list-inner"><ul class="se-list-basic">';
+	for (let i = 0, len = styleList.length, t, tag, name, attrs, command, value; i < len; i++) {
+		t = styleList[i];
+		attrs = '';
+		value = '';
+		command = [];
+
+		if (typeof t === 'string') {
+			const cssText = defaultList[t.toLowerCase()];
+			if (!cssText) continue;
+			t = cssText;
+		}
+
+		name = t.name;
+		tag = t.tag || 'span';
+
+		attrs += ` class="${t.class}"`;
+		value += `.${t.class.trim().replace(/\s+/g, ',.')}`;
+		command.push('class');
+
+		value = value.replace(/,$/, '');
+
+		list += `
+		<li>
+			<button 
+				type="button" 
+				class="se-btn se-btn-list" 
+				data-command="${tag}" 
+				data-value="${value}" 
+				title="${name}" 
+				aria-label="${name}"
+			>
+				<${tag}${attrs}>${name}</${tag}>
+			</button>
+		</li>`;
+	}
+	list += '</ul></div>';
+
+	return dom.utils.createElement('DIV', { class: 'se-dropdown se-list-layer se-list-format' }, list);
+}
+
+export default TextStyle;