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

package/src/plugins/dropdown/layout.js

@@ -1,83 +1,83 @@
-import EditorInjector from '../../editorInjector';
-import { dom } from '../../helper';
-
-/**
- * @class
- * @description Layout Plugin, Apply layout to the entire editor.
- */
-class Layout extends EditorInjector {
-	static key = 'layout';
-	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 - Layout list
-	 */
-	constructor(editor, pluginOptions) {
-		// plugin bisic properties
-		super(editor);
-		this.title = this.lang.layout;
-		this.icon = 'layout';
-
-		// members
-		this.selectedIndex = -1;
-		this.items = pluginOptions.items;
-
-		// create HTML
-		const menu = CreateHTML(this.items);
-
-		// init
-		this.menu.initDropdownTarget(Layout, 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.set(temp.html);
-		} else {
-			this.menu.dropdownOff();
-			throw Error('[SUNEDITOR.layout.fail] cause : "layouts[i].html not found"');
-		}
-
-		this.menu.dropdownOff();
-	}
-}
-
-function CreateHTML(layoutList) {
-	if (!layoutList || layoutList.length === 0) {
-		console.warn('[SUNEDITOR.plugins.layout.warn] To use the "layout" plugin, please define the "layouts" option.');
-	}
-
-	let list = /*html*/ `
-	<div class="se-dropdown se-list-inner">
-		<ul class="se-list-basic">`;
-
-	for (let i = 0, len = (layoutList || []).length, t; i < len; i++) {
-		t = layoutList[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 += /*html*/ `
-		</ul>
-	</div>`;
-
-	return dom.utils.createElement('DIV', { class: 'se-list-layer' }, list);
-}
-
-export default Layout;
+import EditorInjector from '../../editorInjector';
+import { dom } from '../../helper';
+
+/**
+ * @class
+ * @description Layout Plugin, Apply layout to the entire editor.
+ */
+class Layout extends EditorInjector {
+	static key = 'layout';
+	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 - Layout list
+	 */
+	constructor(editor, pluginOptions) {
+		// plugin bisic properties
+		super(editor);
+		this.title = this.lang.layout;
+		this.icon = 'layout';
+
+		// members
+		this.selectedIndex = -1;
+		this.items = pluginOptions.items;
+
+		// create HTML
+		const menu = CreateHTML(this.items);
+
+		// init
+		this.menu.initDropdownTarget(Layout, 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.set(temp.html);
+		} else {
+			this.menu.dropdownOff();
+			throw Error('[SUNEDITOR.layout.fail] cause : "layouts[i].html not found"');
+		}
+
+		this.menu.dropdownOff();
+	}
+}
+
+function CreateHTML(layoutList) {
+	if (!layoutList || layoutList.length === 0) {
+		console.warn('[SUNEDITOR.plugins.layout.warn] To use the "layout" plugin, please define the "layouts" option.');
+	}
+
+	let list = /*html*/ `
+	<div class="se-dropdown se-list-inner">
+		<ul class="se-list-basic">`;
+
+	for (let i = 0, len = (layoutList || []).length, t; i < len; i++) {
+		t = layoutList[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 += /*html*/ `
+		</ul>
+	</div>`;
+
+	return dom.utils.createElement('DIV', { class: 'se-list-layer' }, list);
+}
+
+export default Layout;

package/src/plugins/dropdown/lineHeight.js

@@ -1,130 +1,131 @@
-import EditorInjector from '../../editorInjector';
-import { dom } from '../../helper';
-
-/**
- * @class
- * @description Line height Plugin
- */
-class LineHeight extends EditorInjector {
-	static key = 'lineHeight';
-	static type = 'dropdown';
-	static className = '';
-
-	/**
-	 * @constructor
-	 * @param {__se__EditorCore} editor - The root editor instance
-	 * @param {Object} pluginOptions
-	 * @param {Array<{text: string, value: number}>} pluginOptions.items - Line height list
-	 */
-	constructor(editor, pluginOptions) {
-		// plugin bisic properties
-		super(editor);
-		this.title = this.lang.lineHeight;
-		this.icon = 'line_height';
-
-		// create HTML
-		const menu = CreateHTML(editor, pluginOptions.items);
-
-		// members
-		this.sizeList = menu.querySelectorAll('li button');
-		this.currentSize = null;
-
-		// init
-		this.menu.initDropdownTarget(LineHeight, 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) {
-		if (element?.style?.lineHeight.length > 0) {
-			dom.utils.addClass(target, 'active');
-			return true;
-		}
-
-		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.
-	 */
-	on() {
-		const format = this.format.getLine(this.selection.getNode());
-		const currentSize = !format ? '' : format.style.lineHeight + '';
-
-		if (currentSize !== this.currentSize) {
-			const sizeList = this.sizeList;
-			for (let i = 0, len = sizeList.length; i < len; i++) {
-				if (currentSize === sizeList[i].getAttribute('data-command')) {
-					dom.utils.addClass(sizeList[i], 'active');
-				} else {
-					dom.utils.removeClass(sizeList[i], 'active');
-				}
-			}
-
-			this.currentSize = currentSize;
-		}
-	}
-
-	/**
-	 * @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') || '';
-		const formats = this.format.getLines();
-
-		for (let i = 0, len = formats.length; i < len; i++) {
-			formats[i].style.lineHeight = value;
-		}
-
-		this.menu.dropdownOff();
-
-		this.editor.effectNode = null;
-		this.history.push(false);
-	}
-}
-
-function CreateHTML({ lang }, items) {
-	const sizeList = items || [
-		{ text: '1', value: '1em' },
-		{ text: '1.2', value: '1.2em' },
-		{ text: '1.7', value: '1.7em' },
-		{ text: '2', value: '2em' }
-	];
-
-	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 = sizeList.length, size; i < len; i++) {
-		size = sizeList[i];
-		list += /*html*/ `
-			<li>
-				<button type="button" class="se-btn se-btn-list" data-command="${size.value}" title="${size.text}" aria-label="${size.text}">
-					${size.text}
-				</button>
-			</li>`;
-	}
-
-	list += /*html*/ `
-		</ul>
-	</div>`;
-
-	return dom.utils.createElement('DIV', { class: 'se-dropdown se-list-layer' }, list);
-}
-
-export default LineHeight;
+import EditorInjector from '../../editorInjector';
+import { dom } from '../../helper';
+
+/**
+ * @class
+ * @description Line height Plugin
+ */
+class LineHeight extends EditorInjector {
+	static key = 'lineHeight';
+	static type = 'dropdown';
+	static className = '';
+
+	/**
+	 * @constructor
+	 * @param {__se__EditorCore} editor - The root editor instance
+	 * @param {Object} pluginOptions
+	 * @param {Array<{text: string, value: number}>} pluginOptions.items - Line height list
+	 */
+	constructor(editor, pluginOptions) {
+		// plugin bisic properties
+		super(editor);
+		this.title = this.lang.lineHeight;
+		this.icon = 'line_height';
+
+		// create HTML
+		const menu = CreateHTML(editor, pluginOptions.items);
+
+		// members
+		this.sizeList = menu.querySelectorAll('li button');
+		this.currentSize = null;
+
+		// init
+		this.menu.initDropdownTarget(LineHeight, 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) {
+		if (this.format.isLine(element) && element.style.lineHeight.length > 0) {
+			dom.utils.addClass(target, 'active');
+			return true;
+		}
+
+		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.
+	 */
+	on() {
+		const format = this.format.getLine(this.selection.getNode());
+		const currentSize = !format ? '' : format.style.lineHeight + '';
+
+		if (currentSize !== this.currentSize) {
+			const sizeList = this.sizeList;
+			for (let i = 0, len = sizeList.length; i < len; i++) {
+				if (currentSize === sizeList[i].getAttribute('data-command')) {
+					dom.utils.addClass(sizeList[i], 'active');
+				} else {
+					dom.utils.removeClass(sizeList[i], 'active');
+				}
+			}
+
+			this.currentSize = currentSize;
+		}
+	}
+
+	/**
+	 * @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') || '';
+		const formats = this.format.getLines();
+
+		for (let i = 0, len = formats.length; i < len; i++) {
+			formats[i].style.lineHeight = value;
+		}
+
+		this.menu.dropdownOff();
+
+		this.editor.effectNode = null;
+		this.history.push(false);
+	}
+}
+
+function CreateHTML({ lang }, items) {
+	const sizeList = items || [
+		{ text: '1', value: '1em' },
+		{ text: '1.2', value: '1.2em' },
+		{ text: '1.7', value: '1.7em' },
+		{ text: '2', value: '2em' }
+	];
+
+	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 = sizeList.length, size; i < len; i++) {
+		size = sizeList[i];
+		list += /*html*/ `
+			<li>
+				<button type="button" class="se-btn se-btn-list" data-command="${size.value}" title="${size.text}" aria-label="${size.text}">
+					${size.text}
+				</button>
+			</li>`;
+	}
+
+	list += /*html*/ `
+		</ul>
+	</div>`;
+
+	return dom.utils.createElement('DIV', { class: 'se-dropdown se-list-layer' }, list);
+}
+
+export default LineHeight;