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

package/src/plugins/dropdown/list.js

@@ -1,122 +1,123 @@
-import EditorInjector from '../../editorInjector';
-import { dom } from '../../helper';
-
-/**
- * @class
- * @description List Plugin (OL, UL)
- */
-class List extends EditorInjector {
-	static key = 'list';
-	static type = 'dropdown';
-	static className = 'se-icon-flip-rtl';
-
-	/**
-	 * @constructor
-	 * @param {__se__EditorCore} editor - The root editor instance
-	 */
-	constructor(editor) {
-		// plugin bisic properties
-		super(editor);
-		this.title = this.lang.list;
-		this.icon = 'list_numbered';
-
-		// create HTML
-		const menu = CreateHTML(editor);
-
-		// members
-		this.listItems = menu.querySelectorAll('li button');
-		this.icons = {
-			bulleted: editor.icons.list_bulleted,
-			numbered: editor.icons.list_numbered
-		};
-
-		// init
-		this.menu.initDropdownTarget(List, 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 icon = target.firstElementChild;
-
-		if (dom.check.isList(element)) {
-			const nodeName = element.nodeName.toLowerCase();
-			target.setAttribute('data-focus', nodeName);
-			dom.utils.addClass(target, 'active');
-
-			if (/^ul$/.test(nodeName)) {
-				dom.utils.changeElement(icon, this.icons.bulleted);
-			} else {
-				dom.utils.changeElement(icon, this.icons.numbered);
-			}
-
-			return true;
-		}
-
-		target.removeAttribute('data-focus');
-		dom.utils.changeElement(icon, this.icons.number);
-		dom.utils.removeClass(target, 'active');
-
-		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 currentList = target.getAttribute('data-focus') || '';
-		const list = this.listItems;
-		for (let i = 0, len = list.length; i < len; i++) {
-			if (currentList === list[i].getAttribute('data-command')) {
-				dom.utils.addClass(list[i], 'active');
-			} else {
-				dom.utils.removeClass(list[i], '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 command = target.getAttribute('data-command');
-		const type = target.getAttribute('data-value') || '';
-		const range = this.format.applyList(`${command}:${type}`, null, false);
-		if (range) this.selection.setRange(range.sc, range.so, range.ec, range.eo);
-
-		this.menu.dropdownOff();
-		this.history.push(false);
-	}
-}
-
-function CreateHTML({ lang, icons }) {
-	const html = /*html*/ `
-	<div class="se-list-inner">
-		<ul class="se-list-basic">
-			<li>
-				<button type="button" class="se-btn se-btn-list se-tooltip se-icon-flip-rtl" data-command="ol" title="${lang.numberedList}" aria-label="${lang.numberedList}">
-					${icons.list_numbered}
-				</button>
-			</li>
-			<li>
-				<button type="button" class="se-btn se-btn-list se-tooltip se-icon-flip-rtl" data-command="ul" title="${lang.bulletedList}" aria-label="${lang.bulletedList}">
-					${icons.list_bulleted}
-				</button>
-			</li>
-		</ul>
-	</div>`;
-
-	return dom.utils.createElement('DIV', { class: 'se-dropdown se-list-layer' }, html);
-}
-
-export default List;
+import EditorInjector from '../../editorInjector';
+import { dom } from '../../helper';
+
+/**
+ * @class
+ * @description List Plugin (OL, UL)
+ */
+class List extends EditorInjector {
+	static key = 'list';
+	static type = 'dropdown';
+	static className = 'se-icon-flip-rtl';
+
+	/**
+	 * @constructor
+	 * @param {__se__EditorCore} editor - The root editor instance
+	 */
+	constructor(editor) {
+		// plugin bisic properties
+		super(editor);
+		this.title = this.lang.list;
+		this.icon = 'list_numbered';
+
+		// create HTML
+		const menu = CreateHTML(editor);
+
+		// members
+		this.listItems = menu.querySelectorAll('li button');
+		this.icons = {
+			bulleted: editor.icons.list_bulleted,
+			numbered: editor.icons.list_numbered
+		};
+
+		// init
+		this.menu.initDropdownTarget(List, 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 icon = target.firstElementChild;
+
+		if (dom.check.isList(element)) {
+			const nodeName = element.nodeName.toLowerCase();
+			target.setAttribute('data-focus', nodeName);
+			dom.utils.addClass(target, 'active');
+
+			if (/^ul$/.test(nodeName)) {
+				dom.utils.changeElement(icon, this.icons.bulleted);
+			} else {
+				dom.utils.changeElement(icon, this.icons.numbered);
+			}
+
+			return true;
+		}
+
+		target.removeAttribute('data-focus');
+		dom.utils.changeElement(icon, this.icons.number);
+		dom.utils.removeClass(target, 'active');
+
+		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 currentList = target.getAttribute('data-focus') || '';
+		const list = this.listItems;
+		for (let i = 0, len = list.length; i < len; i++) {
+			if (currentList === list[i].getAttribute('data-command')) {
+				dom.utils.addClass(list[i], 'active');
+			} else {
+				dom.utils.removeClass(list[i], '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 command = target.getAttribute('data-command');
+		const type = target.getAttribute('data-value') || '';
+		const range = this.format.applyList(`${command}:${type}`, null, false);
+		if (range) this.selection.setRange(range.sc, range.so, range.ec, range.eo);
+
+		this.menu.dropdownOff();
+		this.history.push(false);
+	}
+}
+
+function CreateHTML({ lang, icons }) {
+	const html = /*html*/ `
+	<div class="se-list-inner">
+		<ul class="se-list-basic">
+			<li>
+				<button type="button" class="se-btn se-btn-list se-tooltip se-icon-flip-rtl" data-command="ol" title="${lang.numberedList}" aria-label="${lang.numberedList}">
+					${icons.list_numbered}
+				</button>
+			</li>
+			<li>
+				<button type="button" class="se-btn se-btn-list se-tooltip se-icon-flip-rtl" data-command="ul" title="${lang.bulletedList}" aria-label="${lang.bulletedList}">
+					${icons.list_bulleted}
+				</button>
+			</li>
+		</ul>
+	</div>`;
+
+	return dom.utils.createElement('DIV', { class: 'se-dropdown se-list-layer' }, html);
+}
+
+export default List;

package/src/plugins/dropdown/paragraphStyle.js

@@ -1,138 +1,138 @@
-import EditorInjector from '../../editorInjector';
-import { dom } from '../../helper';
-
-/**
- * @class
- * @description A plugin to style lines using classes.
- */
-class ParagraphStyle extends EditorInjector {
-	static key = 'paragraphStyle';
-	static type = 'dropdown';
-	static className = '';
-
-	/**
-	 * @constructor
-	 * @param {__se__EditorCore} editor - The root editor instance
-	 * @param {Object} pluginOptions
-	 * @param {Array<string|{name: string, class: string, _class: string}>} pluginOptions.items - Paragraph item list
-	 * @example
-	 * use default paragraph styles
-	 * ['spaced', 'bordered', 'neon']
-	 * custom paragraph styles
-		[
-			{ name: 'spaced', class: '__se__p-spaced', _class: '' },
-			{ name: 'bordered', class: '__se__p-bordered', _class: '' },
-			{ name: 'neon', class: '__se__p-neon', _class: ''}
-		]
-	 */
-	constructor(editor, pluginOptions) {
-		// plugin bisic properties
-		super(editor);
-		this.title = this.lang.paragraphStyle;
-		this.icon = 'paragraph_style';
-
-		// create HTML
-		const menu = CreateHTML(editor, pluginOptions.items);
-
-		// members
-		this.classList = menu.querySelectorAll('li button');
-
-		// init
-		this.menu.initDropdownTarget(ParagraphStyle, menu);
-	}
-
-	/**
-	 * @editorMethod Modules.Dropdown
-	 * @description Executes the method that is called when a plugin's dropdown menu is opened.
-	 */
-	on() {
-		const paragraphList = this.classList;
-		const currentFormat = this.format.getLine(this.selection.getNode());
-
-		for (let i = 0, len = paragraphList.length; i < len; i++) {
-			if (dom.utils.hasClass(currentFormat, paragraphList[i].getAttribute('data-command'))) {
-				dom.utils.addClass(paragraphList[i], 'active');
-			} else {
-				dom.utils.removeClass(paragraphList[i], '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 value = target.getAttribute('data-command');
-		let selectedFormsts = this.format.getLines();
-		if (selectedFormsts.length === 0) {
-			this.selection.getRangeAndAddLine(this.selection.getRange(), null);
-			selectedFormsts = this.format.getLines();
-			if (selectedFormsts.length === 0) return;
-		}
-
-		// change format class
-		const toggleClass = dom.utils.hasClass(target, 'active') ? dom.utils.removeClass : dom.utils.addClass;
-		for (let i = 0, len = selectedFormsts.length; i < len; i++) {
-			toggleClass(selectedFormsts[i], value);
-		}
-
-		this.menu.dropdownOff();
-		this.history.push(false);
-	}
-}
-
-function CreateHTML({ lang }, items) {
-	const defaultList = {
-		spaced: {
-			name: lang.menu_spaced,
-			class: '__se__p-spaced',
-			_class: ''
-		},
-		bordered: {
-			name: lang.menu_bordered,
-			class: '__se__p-bordered',
-			_class: ''
-		},
-		neon: {
-			name: lang.menu_neon,
-			class: '__se__p-neon',
-			_class: ''
-		}
-	};
-	const paragraphStyles = !items || items.length === 0 ? ['spaced', 'bordered', 'neon'] : items;
-
-	let list = /*html*/ `
-	<div class="se-list-inner">
-		<ul class="se-list-basic">`;
-
-	for (let i = 0, len = paragraphStyles.length, p, name, attrs, _class; i < len; i++) {
-		p = paragraphStyles[i];
-
-		if (typeof p === 'string') {
-			const cssText = defaultList[p.toLowerCase()];
-			if (!cssText) continue;
-			p = cssText;
-		}
-
-		name = p.name;
-		attrs = p.class ? ` class="${p.class}"` : '';
-		_class = p._class;
-
-		list += /*html*/ `
-			<li>
-				<button type="button" class="se-btn se-btn-list${_class ? ' ' + _class : ''}" data-command="${p.class}" title="${name}" aria-label="${name}">
-					<div${attrs}>${name}</div>
-				</button>
-			</li>`;
-	}
-	list += /*html*/ `
-		</ul>
-	</div>`;
-
-	return dom.utils.createElement('DIV', { class: 'se-dropdown se-list-layer se-list-format' }, list);
-}
-
-export default ParagraphStyle;
+import EditorInjector from '../../editorInjector';
+import { dom } from '../../helper';
+
+/**
+ * @class
+ * @description A plugin to style lines using classes.
+ */
+class ParagraphStyle extends EditorInjector {
+	static key = 'paragraphStyle';
+	static type = 'dropdown';
+	static className = '';
+
+	/**
+	 * @constructor
+	 * @param {__se__EditorCore} editor - The root editor instance
+	 * @param {Object} pluginOptions
+	 * @param {Array<string|{name: string, class: string, _class: string}>} pluginOptions.items - Paragraph item list
+	 * @example
+	 * use default paragraph styles
+	 * ['spaced', 'bordered', 'neon']
+	 * custom paragraph styles
+		[
+			{ name: 'spaced', class: '__se__p-spaced', _class: '' },
+			{ name: 'bordered', class: '__se__p-bordered', _class: '' },
+			{ name: 'neon', class: '__se__p-neon', _class: ''}
+		]
+	 */
+	constructor(editor, pluginOptions) {
+		// plugin bisic properties
+		super(editor);
+		this.title = this.lang.paragraphStyle;
+		this.icon = 'paragraph_style';
+
+		// create HTML
+		const menu = CreateHTML(editor, pluginOptions.items);
+
+		// members
+		this.classList = menu.querySelectorAll('li button');
+
+		// init
+		this.menu.initDropdownTarget(ParagraphStyle, menu);
+	}
+
+	/**
+	 * @editorMethod Modules.Dropdown
+	 * @description Executes the method that is called when a plugin's dropdown menu is opened.
+	 */
+	on() {
+		const paragraphList = this.classList;
+		const currentFormat = this.format.getLine(this.selection.getNode());
+
+		for (let i = 0, len = paragraphList.length; i < len; i++) {
+			if (dom.utils.hasClass(currentFormat, paragraphList[i].getAttribute('data-command'))) {
+				dom.utils.addClass(paragraphList[i], 'active');
+			} else {
+				dom.utils.removeClass(paragraphList[i], '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 value = target.getAttribute('data-command');
+		let selectedFormsts = this.format.getLines();
+		if (selectedFormsts.length === 0) {
+			this.selection.getRangeAndAddLine(this.selection.getRange(), null);
+			selectedFormsts = this.format.getLines();
+			if (selectedFormsts.length === 0) return;
+		}
+
+		// change format class
+		const toggleClass = dom.utils.hasClass(target, 'active') ? dom.utils.removeClass : dom.utils.addClass;
+		for (let i = 0, len = selectedFormsts.length; i < len; i++) {
+			toggleClass(selectedFormsts[i], value);
+		}
+
+		this.menu.dropdownOff();
+		this.history.push(false);
+	}
+}
+
+function CreateHTML({ lang }, items) {
+	const defaultList = {
+		spaced: {
+			name: lang.menu_spaced,
+			class: '__se__p-spaced',
+			_class: ''
+		},
+		bordered: {
+			name: lang.menu_bordered,
+			class: '__se__p-bordered',
+			_class: ''
+		},
+		neon: {
+			name: lang.menu_neon,
+			class: '__se__p-neon',
+			_class: ''
+		}
+	};
+	const paragraphStyles = !items || items.length === 0 ? ['spaced', 'bordered', 'neon'] : items;
+
+	let list = /*html*/ `
+	<div class="se-list-inner">
+		<ul class="se-list-basic">`;
+
+	for (let i = 0, len = paragraphStyles.length, p, name, attrs, _class; i < len; i++) {
+		p = paragraphStyles[i];
+
+		if (typeof p === 'string') {
+			const cssText = defaultList[p.toLowerCase()];
+			if (!cssText) continue;
+			p = cssText;
+		}
+
+		name = p.name;
+		attrs = p.class ? ` class="${p.class}"` : '';
+		_class = p._class;
+
+		list += /*html*/ `
+			<li>
+				<button type="button" class="se-btn se-btn-list${_class ? ' ' + _class : ''}" data-command="${p.class}" title="${name}" aria-label="${name}">
+					<div${attrs}>${name}</div>
+				</button>
+			</li>`;
+	}
+	list += /*html*/ `
+		</ul>
+	</div>`;
+
+	return dom.utils.createElement('DIV', { class: 'se-dropdown se-list-layer se-list-format' }, list);
+}
+
+export default ParagraphStyle;