suneditor 3.0.0-beta.3 → 3.0.0-beta.30

package/src/plugins/command/fileUpload.js

@@ -4,6 +4,23 @@ import { FileManager, Figure, Controller } from '../../modules';
 
 const { NO_EVENT } = env;
 
+/**
+ * @typedef FileUploadPluginOptions
+ * @property {string} uploadUrl - Server request URL for file upload
+ * @property {Object<string, string>} [uploadHeaders] - Server request headers
+ * @property {string} [uploadSizeLimit] - Total upload size limit in bytes
+ * @property {string} [uploadSingleSizeLimit] - Single file size limit in bytes
+ * @property {boolean} [allowMultiple=false] - Allow multiple file uploads
+ * @property {string} [acceptedFormats="*"] - Accepted file formats (e.g., 'image/*, .pdf')
+ * @property {string} [as="box"] - Specify the default form of the file component as 'box' or 'link'
+ * @property {Array<string>} [controls] - Additional controls to be added to the figure
+ * @property {__se__ComponentInsertBehaviorType} [insertBehavior] - Component insertion behavior for selection and cursor placement. [default: options.get('componentInsertBehavior')]
+ * - `auto`: Move cursor to the next line if possible, otherwise select the component.
+ * - `select`: Always select the inserted component.
+ * - `line`: Move cursor to the next line if possible, or create a new line and move there.
+ * - `none`: Do nothing.
+ */
+
 /**
  * @class
  * @description File upload plugin
@@ -22,18 +39,13 @@ class FileUpload extends EditorInjector {
 		return dom.check.isAnchor(node) && node.hasAttribute('data-se-file-download') ? node : null;
 	}
 
+	#acceptedCheck;
+	#element;
+
 	/**
 	 * @constructor
 	 * @param {__se__EditorCore} editor - The root editor instance
-	 * @param {Object} pluginOptions - plugin options
-	 * @param {string} pluginOptions.uploadUrl - server request url
-	 * @param {Object<string, string>=} pluginOptions.uploadHeaders - server request headers
-	 * @param {string=} pluginOptions.uploadSizeLimit - upload size limit
-	 * @param {string=} pluginOptions.uploadSingleSizeLimit - upload single size limit
-	 * @param {boolean=} pluginOptions.allowMultiple - allow multiple files
-	 * @param {string=} pluginOptions.acceptedFormats - accepted formats
-	 * @param {string=} pluginOptions.as - Whether to use the 'Box' or 'Link' conversion button
-	 * @param {Array<string>} pluginOptions.controls - Additional controls to be added to the figure
+	 * @param {FileUploadPluginOptions} pluginOptions - plugin options
 	 */
 	constructor(editor, pluginOptions) {
 		super(editor);
@@ -50,13 +62,15 @@ class FileUpload extends EditorInjector {
 		this.uploadSingleSizeLimit = numbers.get(pluginOptions.uploadSingleSizeLimit, 0);
 		this.allowMultiple = !!pluginOptions.allowMultiple;
 		this.acceptedFormats = typeof pluginOptions.acceptedFormats !== 'string' ? '*' : pluginOptions.acceptedFormats.trim() || '*';
-		this._acceptedCheck = this.acceptedFormats.split(', ');
 		this.as = pluginOptions.as || 'box';
+		this.insertBehavior = pluginOptions.insertBehavior;
 		this.input = dom.utils.createElement('input', { type: 'file', accept: this.acceptedFormats });
 		if (this.allowMultiple) {
 			this.input.setAttribute('multiple', 'multiple');
 		}
-		this._element = null;
+
+		this.#acceptedCheck = this.acceptedFormats.split(', ');
+		this.#element = null;
 
 		// figure
 		const customItems = {
@@ -117,12 +131,12 @@ class FileUpload extends EditorInjector {
 	 * @param {HTMLElement} target Target component element
 	 */
 	select(target) {
-		this._element = target;
+		this.#element = target;
 		const asBtn = this.figure.controller.form.querySelector('[data-command="__c__as"]');
 		if (dom.check.isFigure(target.parentElement)) {
 			asBtn.innerHTML = this.icons.reduction + dom.utils.createTooltipInner(this.lang.asLink);
 			asBtn.setAttribute('data-value', 'link');
-			this.figure.open(target, { nonResizing: true, nonSizeInfo: true, nonBorder: true, figureTarget: true, __fileManagerInfo: false });
+			this.figure.open(target, { nonResizing: true, nonSizeInfo: true, nonBorder: true, figureTarget: true, infoOnly: false });
 		} else {
 			asBtn.innerHTML = this.icons.expansion + dom.utils.createTooltipInner(this.lang.asBlock);
 			asBtn.setAttribute('data-value', 'box');
@@ -143,7 +157,7 @@ class FileUpload extends EditorInjector {
 	onFilePasteAndDrop({ file }) {
 		const fileType = file.type;
 		if (
-			!this._acceptedCheck.some((format) => {
+			!this.#acceptedCheck.some((format) => {
 				if (format.startsWith('*')) return true;
 				if (format.startsWith(fileType)) return true;
 			})
@@ -180,11 +194,11 @@ class FileUpload extends EditorInjector {
 
 		if (command === 'edit') {
 			if (this.editInput.value.trim().length === 0) return;
-			this._element.textContent = this.editInput.value;
+			this.#element.textContent = this.editInput.value;
 		}
 
 		this.controller.close();
-		this.component.select(this._element, FileUpload.key);
+		this.component.select(this.#element, FileUpload.key);
 	}
 
 	/**
@@ -225,7 +239,7 @@ class FileUpload extends EditorInjector {
 		for (let i = 0, len = fileList.length, f, s; i < len; i++) {
 			f = fileList[i];
 			s = f.size;
-			if (slngleSizeLimit && slngleSizeLimit > s) {
+			if (slngleSizeLimit > 0 && s > slngleSizeLimit) {
 				const err = '[SUNEDITOR.fileUpload.fail] Size of uploadable single file: ' + slngleSizeLimit / 1000 + 'KB';
 				const message = await this.triggerEvent('onFileUploadError', {
 					error: err,
@@ -269,7 +283,7 @@ class FileUpload extends EditorInjector {
 			infos = newInfos || infos;
 			const xmlHttp = await this.fileManager.asyncUpload(infos.url, infos.uploadHeaders, infos.files);
 			uploadCallback(xmlHttp);
-		}.bind(this, this.#_uploadCallBack.bind(this), fileInfo);
+		}.bind(this, this.#uploadCallBack.bind(this), fileInfo);
 
 		const result = await this.triggerEvent('onFileUploadBefore', {
 			info: fileInfo,
@@ -328,7 +342,7 @@ class FileUpload extends EditorInjector {
 	 * @description Create file element
 	 * @param {string} url File URL
 	 * @param {File|{name: string, size: number}} file File object
-	 * @param {boolean} isLast Is last file
+	 * @param {boolean} isLast Indicates whether this is the last file in the batch (used for scroll and insert actions).
 	 */
 	create(url, file, isLast) {
 		const name = file.name || url;
@@ -350,21 +364,21 @@ class FileUpload extends EditorInjector {
 
 		if (this.as === 'link') {
 			a.className = 'se-component se-inline-component';
-			this.component.insert(a, { skipCharCount: false, skipSelection: false, skipHistory: false });
+			this.component.insert(a, { scrollTo: isLast ? true : false, insertBehavior: isLast ? this.insertBehavior : null });
 			return;
 		}
 
 		const figure = Figure.CreateContainer(a);
 		dom.utils.addClass(figure.container, 'se-file-figure|se-flex-component');
 
-		if (!this.component.insert(figure.container, { skipCharCount: false, skipSelection: isLast ? !this.options.get('componentAutoSelect') : true, skipHistory: false })) {
+		if (!this.component.insert(figure.container, { scrollTo: isLast ? true : false, insertBehavior: isLast ? this.insertBehavior : null })) {
 			this.editor.focus();
 			return;
 		}
 
 		if (!isLast) return;
 
-		if (!this.options.get('componentAutoSelect')) {
+		if (!this.options.get('componentInsertBehavior')) {
 			const line = this.format.addLine(figure.container, null);
 			if (line) this.selection.setRange(line, 0, line, 0);
 		} else {
@@ -373,12 +387,11 @@ class FileUpload extends EditorInjector {
 	}
 
 	/**
-	 * @private
 	 * @description Processes the server response after file upload.
 	 * - Registers the uploaded files in the editor.
 	 * @param {Object<string, *>} response - The response object from the server.
 	 */
-	_register(response) {
+	#register(response) {
 		response.result.forEach((file, i, a) => {
 			this.create(
 				file.url,
@@ -392,13 +405,12 @@ class FileUpload extends EditorInjector {
 	}
 
 	/**
-	 * @private
 	 * @description Handles file upload errors.
 	 * - Displays an error message if the upload fails.
 	 * @param {Object<string, *>} response - The error response from the server.
 	 * @returns {Promise<void>}
 	 */
-	async _error(response) {
+	async #error(response) {
 		const message = await this.triggerEvent('onFileUploadError', { error: response });
 		if (message === false) return;
 		const err = message === NO_EVENT ? response.errorMessage : message || response.errorMessage;
@@ -411,12 +423,12 @@ class FileUpload extends EditorInjector {
 	 * - Parses the response and registers the uploaded file.
 	 * @param {XMLHttpRequest} xmlHttp - The completed XHR request.
 	 */
-	#_uploadCallBack(xmlHttp) {
+	#uploadCallBack(xmlHttp) {
 		const response = JSON.parse(xmlHttp.responseText);
 		if (response.errorMessage) {
-			this._error(response);
+			this.#error(response);
 		} else {
-			this._register(response);
+			this.#register(response);
 		}
 	}
 

package/src/plugins/command/list_bulleted.js

@@ -43,6 +43,7 @@ class List_bulleted extends EditorInjector {
 	 * @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 (dom.check.isListCell(element) && /^UL$/i.test(element.parentElement.nodeName)) {
@@ -111,7 +112,7 @@ class List_bulleted extends EditorInjector {
 	 * @param {string} [type=""] List type
 	 */
 	submit(type) {
-		const range = this.format.applyList(`ul:${type || ''}`, null, false);
+		const range = this.listFormat.apply(`ul:${type || ''}`, null, false);
 		if (range) this.selection.setRange(range.sc, range.so, range.ec, range.eo);
 		this.editor.focus();
 		this.history.push(false);

package/src/plugins/command/list_numbered.js

@@ -43,6 +43,7 @@ class List_numbered extends EditorInjector {
 	 * @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 (dom.check.isListCell(element) && /^OL$/i.test(element.parentElement.nodeName)) {
@@ -111,7 +112,7 @@ class List_numbered extends EditorInjector {
 	 * @param {string} [type=""] List type
 	 */
 	submit(type) {
-		const range = this.format.applyList(`ol:${type || ''}`, null, false);
+		const range = this.listFormat.apply(`ol:${type || ''}`, null, false);
 		if (range) this.selection.setRange(range.sc, range.so, range.ec, range.eo);
 		this.editor.focus();
 		this.history.push(false);

package/src/plugins/dropdown/align.js

@@ -1,6 +1,11 @@
 import EditorInjector from '../../editorInjector';
 import { dom } from '../../helper';
 
+/**
+ * @typedef {Object} AlignPluginOptions
+ * @property {Array.<"right"|"center"|"left"|"justify">} [items] - Align items
+ */
+
 /**
  * @class
  * @description Align plugin
@@ -12,8 +17,7 @@ class Align extends EditorInjector {
 
 	/**
 	 * @param {__se__EditorCore} editor - The root editor instance
-	 * @param {Object} pluginOptions
-	 * @param {Array.<"right"|"center"|"left"|"justify">} pluginOptions.items - Align items
+	 * @param {AlignPluginOptions} pluginOptions - Plugin options
 	 */
 	constructor(editor, pluginOptions) {
 		super(editor);
@@ -44,6 +48,7 @@ class Align extends EditorInjector {
 	 * @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 targetChild = target.firstElementChild;
@@ -58,6 +63,7 @@ class Align extends EditorInjector {
 				target.setAttribute('data-focus', textAlign);
 				return true;
 			}
+			return undefined;
 		}
 
 		return false;

package/src/plugins/dropdown/backgroundColor.js

@@ -2,6 +2,13 @@ import EditorInjector from '../../editorInjector';
 import ColorPicker from '../../modules/ColorPicker';
 import { dom } from '../../helper';
 
+/**
+ * @typedef {Object} BackgroundColorPluginOptions
+ * @property {Array<string|{value: string, name: string}>} [items] - Color list
+ * @property {number} [splitNum] - Number of colors per line
+ * @property {boolean} [disableHEXInput] - Disable HEX input
+ */
+
 /**
  * @class
  * @description Text background color plugin
@@ -14,10 +21,7 @@ class BackgroundColor extends EditorInjector {
 	/**
 	 * @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
+	 * @param {BackgroundColorPluginOptions} pluginOptions - Plugin options
 	 */
 	constructor(editor, pluginOptions) {
 		super(editor);
@@ -47,15 +51,19 @@ class BackgroundColor extends EditorInjector {
 	 * @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 colorHelper = /** @type {SVGPathElement} */ (target.querySelector('path.se-svg-color-helper'));
-		if (!colorHelper) return false;
+		if (!colorHelper) return undefined;
 
+		let color = '';
 		if (!element) {
-			colorHelper.style.color = '';
-		} else if (element.style.backgroundColor.length > 0) {
-			colorHelper.style.color = element.style.backgroundColor;
+			colorHelper.style.color = color;
+		} else if (this.format.isLine(element)) {
+			return undefined;
+		} else if ((color = dom.utils.getStyle(element, 'backgroundColor'))) {
+			colorHelper.style.color = color;
 			return true;
 		}
 
@@ -68,7 +76,7 @@ class BackgroundColor extends EditorInjector {
 	 * @param {HTMLElement} target Line element at the current cursor position
 	 */
 	on(target) {
-		this.colorPicker.init(this.selection.getNode(), target);
+		this.colorPicker.init(this.selection.getNode(), target, (current) => this.format.isLine(current));
 	}
 
 	/**
@@ -88,9 +96,9 @@ class BackgroundColor extends EditorInjector {
 	colorPickerAction(color) {
 		if (color) {
 			const newNode = dom.utils.createElement('SPAN', { style: 'background-color: ' + color + ';' });
-			this.format.applyInlineElement(newNode, { stylesToModify: ['background-color'], nodesToRemove: null, strictRemove: null });
+			this.inline.apply(newNode, { stylesToModify: ['background-color'], nodesToRemove: null, strictRemove: null });
 		} else {
-			this.format.applyInlineElement(null, { stylesToModify: ['background-color'], nodesToRemove: ['span'], strictRemove: true });
+			this.inline.apply(null, { stylesToModify: ['background-color'], nodesToRemove: ['span'], strictRemove: true });
 		}
 
 		this.menu.dropdownOff();

package/src/plugins/dropdown/font.js

@@ -1,6 +1,11 @@
 import EditorInjector from '../../editorInjector';
 import { dom } from '../../helper';
 
+/**
+ * @typedef {Object} FontPluginOptions
+ * @property {Array<string>} [items] - Font list
+ */
+
 /**
  * @class
  * @description Text font plugin
@@ -13,10 +18,7 @@ class Font extends EditorInjector {
 	/**
 	 * @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
+	 * @param {FontPluginOptions} pluginOptions - plugin options
 	 */
 	constructor(editor, pluginOptions) {
 		super(editor);
@@ -43,17 +45,21 @@ class Font extends EditorInjector {
 	 * @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;
+			const font = this.status.hasFocus ? this.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, '');
+		} 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;
@@ -102,9 +108,9 @@ class Font extends EditorInjector {
 			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 });
+			this.inline.apply(newNode, { stylesToModify: ['font-family'], nodesToRemove: null, strictRemove: null });
 		} else {
-			this.format.applyInlineElement(null, { stylesToModify: ['font-family'], nodesToRemove: ['span'], strictRemove: true });
+			this.inline.apply(null, { stylesToModify: ['font-family'], nodesToRemove: ['span'], strictRemove: true });
 		}
 
 		this.menu.dropdownOff();

package/src/plugins/dropdown/fontColor.js

@@ -2,6 +2,13 @@ import EditorInjector from '../../editorInjector';
 import ColorPicker from '../../modules/ColorPicker';
 import { dom } from '../../helper';
 
+/**
+ * @typedef {Object} FontColorPluginOptions
+ * @property {Array<string|{value: string, name: string}>} [items] - Color list
+ * @property {number} [splitNum] - Number of colors per line
+ * @property {boolean} [disableHEXInput] - Disable HEX input
+ */
+
 /**
  * @class
  * @description Font color plugin
@@ -14,10 +21,7 @@ class FontColor extends EditorInjector {
 	/**
 	 * @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
+	 * @param {FontColorPluginOptions} pluginOptions - Plugin options
 	 */
 	constructor(editor, pluginOptions) {
 		super(editor);
@@ -47,16 +51,20 @@ class FontColor extends EditorInjector {
 	 * @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 false;
+		if (!colorHelper) return undefined;
 
+		let color = '';
 		if (!element) {
-			colorHelper.style.color = '';
-		} else if (element?.style.color.length > 0) {
-			colorHelper.style.color = element.style.color;
+			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;
 		}
 
@@ -69,7 +77,7 @@ class FontColor extends EditorInjector {
 	 * @param {HTMLElement} target Line element at the current cursor position
 	 */
 	on(target) {
-		this.colorPicker.init(this.selection.getNode(), target);
+		this.colorPicker.init(this.selection.getNode(), target, (current) => this.format.isLine(current));
 	}
 
 	/**
@@ -89,9 +97,9 @@ class FontColor extends EditorInjector {
 	colorPickerAction(color) {
 		if (color) {
 			const newNode = dom.utils.createElement('SPAN', { style: 'color: ' + color + ';' });
-			this.format.applyInlineElement(newNode, { stylesToModify: ['color'], nodesToRemove: null, strictRemove: null });
+			this.inline.apply(newNode, { stylesToModify: ['color'], nodesToRemove: null, strictRemove: null });
 		} else {
-			this.format.applyInlineElement(null, { stylesToModify: ['color'], nodesToRemove: ['span'], strictRemove: true });
+			this.inline.apply(null, { stylesToModify: ['color'], nodesToRemove: ['span'], strictRemove: true });
 		}
 
 		this.menu.dropdownOff();

package/src/plugins/dropdown/formatBlock.js

@@ -1,6 +1,11 @@
 import EditorInjector from '../../editorInjector';
 import { dom } from '../../helper';
 
+/**
+ * @typedef {Object} FormatBlockPluginOptions
+ * @property {Array<string>} [items] - Format list
+ */
+
 /**
  * @class
  * @description FormatBlock Plugin (P, BLOCKQUOTE, PRE, H1, H2...)
@@ -13,8 +18,7 @@ class FormatBlock extends EditorInjector {
 	/**
 	 * @constructor
 	 * @param {__se__EditorCore} editor - The root editor instance
-	 * @param {Object} pluginOptions
-	 * @param {Array<string>} pluginOptions.items - Format list
+	 * @param {FormatBlockPluginOptions} pluginOptions - Plugin options
 	 */
 	constructor(editor, pluginOptions) {
 		super(editor);
@@ -39,6 +43,7 @@ class FormatBlock extends EditorInjector {
 	 * @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;

package/src/plugins/dropdown/hr.js

@@ -1,6 +1,11 @@
 import EditorInjector from '../../editorInjector';
 import { dom } from '../../helper';
 
+/**
+ * @typedef {Object} HRPluginOptions
+ * @property {Array<{name: string, class: string}>} [items] - HR list
+ */
+
 /**
  * @class
  * @description HR Plugin
@@ -21,8 +26,7 @@ class HR extends EditorInjector {
 	/**
 	 * @constructor
 	 * @param {__se__EditorCore} editor - The root editor instance
-	 * @param {Object} pluginOptions
-	 * @param {Array<{name: string, class: string}>} pluginOptions.items - HR list
+	 * @param {HRPluginOptions} pluginOptions - Plugin options
 	 */
 	constructor(editor, pluginOptions) {
 		// plugin bisic properties
@@ -106,7 +110,7 @@ class HR extends EditorInjector {
 	submit(className) {
 		const hr = dom.utils.createElement('hr', { class: className });
 		this.editor.focus();
-		this.component.insert(hr, { skipCharCount: false, skipSelection: true, skipHistory: false });
+		this.component.insert(hr, { insertBehavior: 'line' });
 		return hr;
 	}
 }

package/src/plugins/dropdown/layout.js

@@ -1,6 +1,11 @@
 import EditorInjector from '../../editorInjector';
 import { dom } from '../../helper';
 
+/**
+ * @typedef {Object} LayoutPluginOptions
+ * @property {Array<{name: string, html: string}>} [items] - Layout list
+ */
+
 /**
  * @class
  * @description Layout Plugin, Apply layout to the entire editor.
@@ -13,8 +18,7 @@ class Layout extends EditorInjector {
 	/**
 	 * @constructor
 	 * @param {__se__EditorCore} editor - The root editor instance
-	 * @param {Object} pluginOptions
-	 * @param {Array<{name: string, html: string}>} pluginOptions.items - Layout list
+	 * @param {LayoutPluginOptions} pluginOptions - Plugin options
 	 */
 	constructor(editor, pluginOptions) {
 		// plugin bisic properties

package/src/plugins/dropdown/lineHeight.js

@@ -1,6 +1,11 @@
 import EditorInjector from '../../editorInjector';
 import { dom } from '../../helper';
 
+/**
+ * @typedef {Object} LineHeightPluginOptions
+ * @property {Array<{text: string, value: number}>} [items] - Line height list
+ */
+
 /**
  * @class
  * @description Line height Plugin
@@ -13,8 +18,7 @@ class LineHeight extends EditorInjector {
 	/**
 	 * @constructor
 	 * @param {__se__EditorCore} editor - The root editor instance
-	 * @param {Object} pluginOptions
-	 * @param {Array<{text: string, value: number}>} pluginOptions.items - Line height list
+	 * @param {LineHeightPluginOptions} pluginOptions - Plugin options
 	 */
 	constructor(editor, pluginOptions) {
 		// plugin bisic properties
@@ -39,9 +43,10 @@ class LineHeight extends EditorInjector {
 	 * @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 (element?.style?.lineHeight.length > 0) {
+		if (this.format.isLine(element) && element.style.lineHeight.length > 0) {
 			dom.utils.addClass(target, 'active');
 			return true;
 		}

package/src/plugins/dropdown/list.js

@@ -40,6 +40,7 @@ class List extends EditorInjector {
 	 * @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;
@@ -91,7 +92,7 @@ class List extends EditorInjector {
 	action(target) {
 		const command = target.getAttribute('data-command');
 		const type = target.getAttribute('data-value') || '';
-		const range = this.format.applyList(`${command}:${type}`, null, false);
+		const range = this.listFormat.apply(`${command}:${type}`, null, false);
 		if (range) this.selection.setRange(range.sc, range.so, range.ec, range.eo);
 
 		this.menu.dropdownOff();

package/src/plugins/dropdown/paragraphStyle.js

@@ -1,6 +1,20 @@
 import EditorInjector from '../../editorInjector';
 import { dom } from '../../helper';
 
+/**
+ * @typedef {Object} ParagraphStylePluginOptions
+ * @property {Array<string|{name: string, class: string, _class: string}>} [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: '' }
+ * ]
+ */
+
 /**
  * @class
  * @description A plugin to style lines using classes.
@@ -13,17 +27,7 @@ class ParagraphStyle extends EditorInjector {
 	/**
 	 * @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: ''}
-		]
+	 * @param {ParagraphStylePluginOptions} pluginOptions - Plugin options
 	 */
 	constructor(editor, pluginOptions) {
 		// plugin bisic properties