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

package/src/plugins/dropdown/template.js

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

package/src/plugins/dropdown/textStyle.js

@@ -1,6 +1,11 @@
 import EditorInjector from '../../editorInjector';
 import { dom } from '../../helper';
 
+/**
+ * @typedef {Object} TextStylePluginOptions
+ * @property {Array<string|{name: string, class: string, tag: string}>} items - Text style item list
+ */
+
 /**
  * @class
  * @description Text style Plugin, Applies a tag that specifies text styles to a selection.
@@ -13,8 +18,7 @@ class TextStyle extends EditorInjector {
 	/**
 	 * @constructor
 	 * @param {__se__EditorCore} editor - The root editor instance
-	 * @param {Object} pluginOptions
-	 * @param {Array<{name: string, html: string}>} pluginOptions.items - Template list
+	 * @param {TextStylePluginOptions} pluginOptions - Plugin options
 	 */
 	constructor(editor, pluginOptions) {
 		// plugin bisic properties
@@ -84,7 +88,7 @@ class TextStyle extends EditorInjector {
 
 		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.inline.apply(newNode, { stylesToModify: checkStyles, nodesToRemove: removeNodes, strictRemove: true });
 
 		this.menu.dropdownOff();
 	}

package/src/plugins/field/mention.js

@@ -4,6 +4,19 @@ import { dom, converter } from '../../helper';
 
 const { debounce } = converter;
 
+/**
+ * @typedef {Object} MentionPluginOptions
+ * @property {string} [triggerText="@"] - The character that triggers the mention list
+ * @property {number} [limitSize=5] - The number of items to display in the mention list
+ * @property {number} [searchStartLength=0] - The number of characters to start searching for the mention list
+ * @property {number} [delayTime=200] - The time to wait before displaying the mention list
+ * @property {Array<{key: string, name: string, url: string}>} [data] - Use data without using API
+ * @property {string} [apiUrl] - The URL to call the mention list
+ * @property {Object<string, string>} [apiHeaders] - The headers to send with the API call
+ * @property {boolean} [useCachingData=true] - Whether to cache the mention list data
+ * @property {boolean} [useCachingFieldData=true] - Whether to cache the mention list data in the field
+ */
+
 /**
  * @class
  * @description Mention Plugin
@@ -17,19 +30,14 @@ class Mention extends EditorInjector {
 	static type = 'field';
 	static className = '';
 
+	#lastAtPos;
+	#anchorOffset;
+	#anchorNode;
+
 	/**
 	 * @constructor
 	 * @param {__se__EditorCore} editor - The root editor instance
-	 * @param {Object} pluginOptions
-	 * @param {string=} [pluginOptions.triggerText="@"] The character that triggers the mention list. Default is '@'.
-	 * @param {number=} [pluginOptions.limitSize=5] The number of items to display in the mention list. Default is 5.
-	 * @param {number=} [pluginOptions.searchStartLength=0] The number of characters to start searching for the mention list. Default is 0.
-	 * @param {number=} [pluginOptions.delayTime=200] The time to wait before displaying the mention list. Default is 200ms.
-	 * @param {Array<{key: string, name: string, url: string}>=} pluginOptions.data Use data without using API.
-	 * @param {string=} pluginOptions.apiUrl The URL to call the mention list. Default is ''.
-	 * @param {Object<string, string>=} pluginOptions.apiHeaders The headers to send with the API call. Default is {}.
-	 * @param {boolean=} [pluginOptions.useCachingData=true] Whether to cache the mention list data. Default is true.
-	 * @param {boolean=} [pluginOptions.useCachingFieldData=true] Whether to cache the mention list data in the field. Default is true.
+	 * @param {MentionPluginOptions} pluginOptions
 	 */
 	constructor(editor, pluginOptions) {
 		super(editor);
@@ -44,14 +52,14 @@ class Mention extends EditorInjector {
 		this.delayTime = typeof pluginOptions.delayTime === 'number' ? pluginOptions.delayTime : 200;
 		this.directData = pluginOptions.data;
 		this.apiUrl = pluginOptions.apiUrl?.replace(/\s/g, '').replace(/\{limitSize\}/i, String(this.limitSize)) || '';
-		this._delay = 0;
-		this._lastAtPos = 0;
-		this._anchorOffset = 0;
-		this._anchorNode = null;
 		// members - api, caching
 		this.apiManager = new ApiManager(this, { headers: pluginOptions.apiHeaders });
-		this.cachingData = pluginOptions.useCachingData ?? true ? new Map() : null;
-		this.cachingFieldData = pluginOptions.useCachingFieldData ?? true ? [] : null;
+		this.cachingData = (pluginOptions.useCachingData ?? true) ? new Map() : null;
+		this.cachingFieldData = (pluginOptions.useCachingFieldData ?? true) ? [] : null;
+
+		this.#lastAtPos = 0;
+		this.#anchorOffset = 0;
+		this.#anchorNode = null;
 
 		// controller
 		const controllerEl = CreateHTML_controller();
@@ -107,10 +115,10 @@ class Mention extends EditorInjector {
 				}
 
 				try {
-					const result = await this._createMentionList(mentionQuery, anchorNode);
-					this._lastAtPos = lastAtPos;
-					this._anchorNode = anchorNode;
-					this._anchorOffset = anchorOffset;
+					const result = await this.#createMentionList(mentionQuery, anchorNode);
+					this.#lastAtPos = lastAtPos;
+					this.#anchorNode = anchorNode;
+					this.#anchorOffset = anchorOffset;
 					return !result;
 				} catch (error) {
 					console.warn('[SUNEDITOR.mention.api.file] ', error);
@@ -123,7 +131,6 @@ class Mention extends EditorInjector {
 	}
 
 	/**
-	 * @private
 	 * @description Generates the mention list based on user input.
 	 * - Fetches data from cache, direct data, or an API.
 	 * - Creates and opens the mention dropdown.
@@ -132,7 +139,7 @@ class Mention extends EditorInjector {
 	 * @param {Node} targetNode - The node where the mention is triggered.
 	 * @returns {Promise<boolean>} - Returns `true` if the mention list is displayed, `false` otherwise.
 	 */
-	async _createMentionList(value, targetNode) {
+	async #createMentionList(value, targetNode) {
 		const limit = this.limitSize;
 		const lowerValue = value.toLowerCase();
 		let response = null;
@@ -144,7 +151,7 @@ class Mention extends EditorInjector {
 			if (this.directData) {
 				response = this.directData.filter((item) => item.key.toLowerCase().startsWith(lowerValue)).slice(0, limit);
 			} else {
-				const xmlHttp = await this.apiManager.asyncCall({ method: 'GET', url: this._createUrl(value) });
+				const xmlHttp = await this.apiManager.asyncCall({ method: 'GET', url: this.#createUrl(value) });
 				response = JSON.parse(xmlHttp.responseText);
 			}
 		}
@@ -190,12 +197,11 @@ class Mention extends EditorInjector {
 	}
 
 	/**
-	 * @private
 	 * @description Constructs the API request URL with the mention query.
 	 * @param {string} key - The mention query text.
 	 * @returns {string} - The formatted API request URL.
 	 */
-	_createUrl(key) {
+	#createUrl(key) {
 		return this.apiUrl.replace(/\{key\}/i, key);
 	}
 
@@ -209,7 +215,7 @@ class Mention extends EditorInjector {
 
 		let oA = null;
 		const { key, name, url } = item;
-		const anchorParent = this._anchorNode.parentNode;
+		const anchorParent = this.#anchorNode.parentNode;
 
 		if (dom.check.isAnchor(anchorParent)) {
 			oA = anchorParent;
@@ -218,7 +224,7 @@ class Mention extends EditorInjector {
 			oA.setAttribute('title', name);
 			oA.textContent = this.triggerText + key;
 		} else {
-			this.selection.setRange(this._anchorNode, this._lastAtPos, this._anchorNode, this._anchorOffset);
+			this.selection.setRange(this.#anchorNode, this.#lastAtPos, this.#anchorNode, this.#anchorOffset);
 			oA = dom.utils.createElement('A', { 'data-se-mention': key, href: url, title: name, target: '_blank' }, this.triggerText + key);
 			if (!this.html.insertNode(oA, { afterNode: null, skipCharCount: false })) return false;
 		}

package/src/plugins/input/fontSize.js

@@ -85,6 +85,17 @@ const DEFAULT_UNIT_MAP = {
 	}
 };
 
+/**
+ * @typedef {Object} FontSizePluginOptions
+ * @property {string} [sizeUnit='px'] - The unit for the font size.
+ * - Accepted values include: 'px', 'pt', 'em', 'rem', 'vw', 'vh', '%' or 'text'.
+ * - If 'text' is used, a text-based font size list is applied.
+ * @property {boolean} [showDefaultSizeLabel=true] - Determines whether the default size label is displayed in the dropdown menu.
+ * @property {boolean} [showIncDecControls=false] - When true, displays increase and decrease buttons for font size adjustments.
+ * @property {boolean} [disableInput=true] - When true, disables the direct font size input box.
+ * @property {Object<string, {default: number, inc: number, min: number, max: number, list: Array<number>}>} [unitMap={}] - Optional object to override or extend the default unit mapping for font sizes.
+ */
+
 /**
  * @class
  * @description FontSize Plugin
@@ -97,17 +108,12 @@ class FontSize extends EditorInjector {
 	static type = 'input';
 	static className = 'se-btn-select se-btn-input se-btn-tool-font-size';
 
+	#disableInput;
+
 	/**
 	 * @constructor
 	 * @param {__se__EditorCore} editor - The root editor instance
-	 * @param {Object} pluginOptions - Configuration options for the FontSize plugin.
-	 * @param {string=} [pluginOptions.sizeUnit='px'] - The unit for the font size.
-	 * - Accepted values include: 'px', 'pt', 'em', 'rem', 'vw', 'vh', '%' or 'text'.
-	 * - If 'text' is used, a text-based font size list is applied.
-	 * @param {boolean=} [pluginOptions.showDefaultSizeLabel=true] - Determines whether the default size label is displayed in the dropdown menu.
-	 * @param {boolean=} [pluginOptions.showIncDecControls=false] - When true, displays increase and decrease buttons for font size adjustments.
-	 * @param {boolean=} [pluginOptions.disableInput=true] - When true, disables the direct font size input box.
-	 * @param {Object<string, {default: number, inc: number, min: number, max: number, list: Array<number>}>} [pluginOptions.unitMap={}] - Optional object to override or extend the default unit mapping for font sizes.
+	 * @param {FontSizePluginOptions} pluginOptions - Configuration options for the FontSize plugin.
 	 */
 	constructor(editor, pluginOptions) {
 		super(editor);
@@ -120,16 +126,16 @@ class FontSize extends EditorInjector {
 		const menu = CreateHTML(editor, unitMap, this.sizeUnit, pluginOptions.showDefaultSizeLabel);
 
 		// plugin basic properties
-		const showIncDec = this.sizeUnit ? pluginOptions.showIncDecControls ?? false : false;
-		const disableInput = this.sizeUnit ? pluginOptions.disableInput ?? false : true;
+		const showIncDec = this.sizeUnit ? (pluginOptions.showIncDecControls ?? false) : false;
+		const disableInput = this.sizeUnit ? (pluginOptions.disableInput ?? false) : true;
 
 		this.title = this.lang.fontSize;
 		this.inner =
 			disableInput && !showIncDec
 				? false
 				: disableInput
-				? `<span class="se-txt se-not-arrow-text __se__font_size">${this.lang.fontSize}</span>`
-				: `<input type="text" class="__se__font_size se-not-arrow-text" placeholder="${this.lang.fontSize}" />`;
+					? `<span class="se-txt se-not-arrow-text __se__font_size">${this.lang.fontSize}</span>`
+					: `<input type="text" class="__se__font_size se-not-arrow-text" placeholder="${this.lang.fontSize}" />`;
 
 		// increase, decrease buttons
 		if (showIncDec) {
@@ -164,7 +170,7 @@ class FontSize extends EditorInjector {
 		this.sizeList = menu.querySelectorAll('li button');
 		this.hasInputFocus = false;
 		this.isInputActive = false; // input target event
-		this._disableInput = disableInput;
+		this.#disableInput = disableInput;
 
 		// init
 		this.menu.initDropdownTarget(FontSize, menu);
@@ -176,14 +182,18 @@ class FontSize 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.utils.hasClass(target, '__se__font_size')) return false;
 
+		let fontSize = '';
 		if (!element) {
-			this._setSize(target, this._getDefaultSize());
-		} else if (element?.style.fontSize.length > 0) {
-			this._setSize(target, element.style.fontSize);
+			this.#setSize(target, this.#getDefaultSize());
+		} else if (this.format.isLine(element)) {
+			return undefined;
+		} else if ((fontSize = dom.utils.getStyle(element, 'fontSize'))) {
+			this.#setSize(target, fontSize);
 			return true;
 		}
 
@@ -200,14 +210,14 @@ class FontSize extends EditorInjector {
 	onInputKeyDown({ target, event }) {
 		const keyCode = event.code;
 
-		if (this._disableInput || keyCodeMap.isSpace(keyCode)) {
+		if (this.#disableInput || keyCodeMap.isSpace(keyCode)) {
 			event.preventDefault();
 			return;
 		}
 
 		if (!/^(38|40|13)$/.test(keyCode)) return;
 
-		const { value, unit } = this._getSize(target);
+		const { value, unit } = this.#getSize(target);
 		if (!value) return;
 
 		const numValue = numbers.get(value);
@@ -227,11 +237,11 @@ class FontSize extends EditorInjector {
 
 		try {
 			this.isInputActive = true;
-			const size = this._setSize(target, changeValue + unit);
-			if (this._disableInput) return;
+			const size = this.#setSize(target, changeValue + unit);
+			if (this.#disableInput) return;
 
 			const newNode = dom.utils.createElement('SPAN', { style: 'font-size: ' + size + ';' });
-			this.format.applyInlineElement(newNode, { stylesToModify: ['font-size'], nodesToRemove: null, strictRemove: null });
+			this.inline.apply(newNode, { stylesToModify: ['font-size'], nodesToRemove: null, strictRemove: null });
 
 			if (!keyCodeMap.isEnter(keyCode)) target.focus();
 		} finally {
@@ -245,18 +255,18 @@ class FontSize extends EditorInjector {
 	 * @param {__se__PluginToolbarInputChangeEventInfo} params
 	 */
 	onInputChange({ target, value: changeValue, event }) {
-		if (this._disableInput) return;
+		if (this.#disableInput) return;
 
 		try {
 			this.isInputActive = true;
 
 			// eslint-disable-next-line prefer-const
-			let { value, unit } = this._getSize(changeValue);
+			let { value, unit } = this.#getSize(changeValue);
 			const { max, min } = this.unitMap[unit];
 			value = value > max ? max : value < min ? min : value;
 
-			const newNode = dom.utils.createElement('SPAN', { style: 'font-size: ' + this._setSize(target, value + unit) + ';' });
-			this.format.applyInlineElement(newNode, { stylesToModify: ['font-size'], nodesToRemove: null, strictRemove: null });
+			const newNode = dom.utils.createElement('SPAN', { style: 'font-size: ' + this.#setSize(target, value + unit) + ';' });
+			this.inline.apply(newNode, { stylesToModify: ['font-size'], nodesToRemove: null, strictRemove: null });
 		} finally {
 			this.isInputActive = false;
 			event.preventDefault();
@@ -270,7 +280,7 @@ class FontSize extends EditorInjector {
 	 * @param {HTMLElement} target Line element at the current cursor position
 	 */
 	on(target) {
-		const { value, unit } = this._getSize(target);
+		const { value, unit } = this.#getSize(target);
 		const currentSize = value + unit;
 
 		if (currentSize === this.currentSize) return;
@@ -297,41 +307,39 @@ class FontSize extends EditorInjector {
 		const commandValue = target.getAttribute('data-command');
 
 		if (commandValue === FontSize.key) {
-			const { value, unit } = this._getSize(target);
+			const { value, unit } = this.#getSize(target);
 			let newSize = numbers.get(value) + (target.getAttribute('data-value') === 'inc' ? 1 : -1);
 			const { min, max } = this.unitMap[unit];
 			newSize = newSize < min ? min : newSize > max ? max : newSize;
 
 			const newNode = dom.utils.createElement('SPAN', { style: 'font-size: ' + newSize + unit + ';' });
-			this.format.applyInlineElement(newNode, { stylesToModify: ['font-size'], nodesToRemove: null, strictRemove: null });
+			this.inline.apply(newNode, { stylesToModify: ['font-size'], nodesToRemove: null, strictRemove: null });
 		} else if (commandValue) {
 			const newNode = dom.utils.createElement('SPAN', { style: 'font-size: ' + commandValue + ';' });
-			this.format.applyInlineElement(newNode, { stylesToModify: ['font-size'], nodesToRemove: null, strictRemove: null });
+			this.inline.apply(newNode, { stylesToModify: ['font-size'], nodesToRemove: null, strictRemove: null });
 		} else {
-			this.format.applyInlineElement(null, { stylesToModify: ['font-size'], nodesToRemove: ['span'], strictRemove: true });
+			this.inline.apply(null, { stylesToModify: ['font-size'], nodesToRemove: ['span'], strictRemove: true });
 		}
 
 		this.menu.dropdownOff();
 	}
 
 	/**
-	 * @private
 	 * @description Retrieves the default font size of the editor.
 	 * @returns {string} - The computed font size from the editor.
 	 */
-	_getDefaultSize() {
-		return this.editor.frameContext.get('wwComputedStyle').fontSize;
+	#getDefaultSize() {
+		return this.frameContext.get('wwComputedStyle').fontSize;
 	}
 
 	/**
-	 * @private
 	 * @description Extracts the font size and unit from the given element or input value.
 	 * @param {string|Element} target - The target input or element.
 	 * @returns {{ unit: string, value: number|string }} - An object containing:
 	 * - `unit` (string): The detected font size unit.
 	 * - `value` (number|string): The numeric font size value or text-based size.
 	 */
-	_getSize(target) {
+	#getSize(target) {
 		target = typeof target === 'string' ? target : target.parentElement.querySelector('.__se__font_size');
 		if (!target)
 			return {
@@ -355,13 +363,12 @@ class FontSize extends EditorInjector {
 	}
 
 	/**
-	 * @private
 	 * @description Sets the font size in the toolbar input field or button label.
 	 * @param {HTMLElement} target - The target element in the toolbar.
 	 * @param {string|number} value - The font size value.
 	 * @returns {string|number} - The applied font size.
 	 */
-	_setSize(target, value) {
+	#setSize(target, value) {
 		target = target.parentElement.querySelector('.__se__font_size');
 		if (!target) return 0;
 

package/src/plugins/input/pageNavigator.js

@@ -33,6 +33,7 @@ class PageNavigator extends EditorInjector {
 		// init
 		this.eventManager.addEvent(this.inner, 'change', this.#OnChangeInner.bind(this));
 	}
+
 	/**
 	 * @editorMethod Editor.documentType
 	 * @description Updates the displayed page number and total pages in the navigator.
@@ -53,13 +54,13 @@ class PageNavigator extends EditorInjector {
 	 * @param {InputEvent} e - Event object
 	 */
 	#OnChangeInner(e) {
-		if (!this.editor.frameContext.has('documentType-use-page')) return;
+		if (!this.frameContext.has('documentType_use_page')) return;
 
 		/** @type {HTMLInputElement} */
 		const eventTarget = dom.query.getEventTarget(e);
 
 		const value = Number(eventTarget.value) || 1;
-		this.editor.frameContext.get('documentType').pageGo(value);
+		this.frameContext.get('documentType').pageGo(value);
 	}
 }