suneditor 3.0.0-beta.9 → 3.0.0-rc.2

package/src/plugins/field/mention.js

@@ -1,9 +1,24 @@
-import EditorInjector from '../../editorInjector';
-import { ApiManager, SelectMenu, Controller } from '../../modules';
+import { PluginField } from '../../interfaces';
+import { Controller } from '../../modules/contract';
+import { ApiManager } from '../../modules/manager';
+import { SelectMenu } from '../../modules/ui';
 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
@@ -12,29 +27,23 @@ const { debounce } = converter;
  * - Supports fetching mention data from an API or a predefined data array.
  * - Uses caching for optimized performance.
  */
-class Mention extends EditorInjector {
+class Mention extends PluginField {
 	static key = 'mention';
-	static type = 'field';
 	static className = '';
 
+	#lastAtPos = 0;
+	#anchorOffset = 0;
+	#anchorNode = null;
+
 	/**
 	 * @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 {SunEditor.Kernel} editor - The core kernel
+	 * @param {MentionPluginOptions} pluginOptions
 	 */
 	constructor(editor, pluginOptions) {
 		super(editor);
 		// plugin basic properties
-		this.title = this.lang.mention;
+		this.title = this.$.lang.mention;
 		this.icon = 'mention';
 
 		// members
@@ -44,29 +53,26 @@ 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.apiManager = new ApiManager(this, this.$, { headers: pluginOptions.apiHeaders });
+		this.cachingData = (pluginOptions.useCachingData ?? true) ? new Map() : null;
+		this.cachingFieldData = (pluginOptions.useCachingFieldData ?? true) ? [] : null;
 
 		// controller
 		const controllerEl = CreateHTML_controller();
-		this.selectMenu = new SelectMenu(this, { position: 'right-bottom', dir: 'ltr', closeMethod: () => this.controller.close() });
+		this.selectMenu = new SelectMenu(this.$, { position: 'right-bottom', dir: 'ltr', closeMethod: () => this.controller.close() });
 		this.controller = new Controller(
 			this,
+			this.$,
 			controllerEl,
 			{
 				position: 'bottom',
 				initMethod: () => {
 					this.apiManager.cancel();
 					this.selectMenu.close();
-				}
+				},
 			},
-			null
+			null,
 		);
 		this.selectMenu.on(controllerEl.firstElementChild, this.#SelectMention.bind(this));
 
@@ -75,19 +81,18 @@ class Mention extends EditorInjector {
 	}
 
 	/**
-	 * @editorMethod Editor.EventManager
-	 * @description Executes the event function of "input".
-	 * @returns {Promise<boolean>}
+	 * @hook Editor.EventManager
+	 * @type {SunEditor.Hook.Event.OnInputAsync}
 	 */
 	async onInput() {
 		if (!this.directData) {
 			this.apiManager.cancel();
 		}
 
-		const sel = this.selection.get();
+		const sel = this.$.selection.get();
 		if (!sel.rangeCount) {
 			this.selectMenu.close();
-			return true;
+			return;
 		}
 
 		const anchorNode = sel.anchorNode;
@@ -99,19 +104,19 @@ class Mention extends EditorInjector {
 			const mentionQuery = textBeforeCursor.substring(lastAtPos + 1, anchorOffset);
 			const beforeText = textBeforeCursor[lastAtPos - 1]?.trim();
 			if (!/\s/.test(mentionQuery) && (!beforeText || dom.check.isZeroWidth(beforeText))) {
-				if (mentionQuery.length < this.searchStartLength) return true;
+				if (mentionQuery.length < this.searchStartLength) return;
 
 				const anchorParent = anchorNode.parentNode;
 				if (dom.check.isAnchor(anchorParent) && !anchorParent.getAttribute('data-se-mention')) {
-					return true;
+					return;
 				}
 
 				try {
-					const result = await this._createMentionList(mentionQuery, anchorNode);
-					this._lastAtPos = lastAtPos;
-					this._anchorNode = anchorNode;
-					this._anchorOffset = anchorOffset;
-					return !result;
+					await this.#createMentionList(mentionQuery, anchorNode);
+					this.#lastAtPos = lastAtPos;
+					this.#anchorNode = anchorNode;
+					this.#anchorOffset = anchorOffset;
+					return;
 				} catch (error) {
 					console.warn('[SUNEDITOR.mention.api.file] ', error);
 				}
@@ -119,11 +124,9 @@ class Mention extends EditorInjector {
 		}
 
 		this.selectMenu.close();
-		return true;
 	}
 
 	/**
-	 * @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 +135,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 +147,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,26 +193,25 @@ 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);
 	}
 
 	/**
 	 * @description Inserts a mention link into the editor when a user selects a mention from the list.
 	 * @param {{ key: string, name: string, url: string }} item - The selected mention item.
-	 * @returns {boolean} - Returns `false` if insertion fails, otherwise completes execution.
+	 * @returns {boolean} Returns `false` if insertion fails, otherwise completes execution.
 	 */
 	#SelectMention(item) {
 		if (!item) return false;
 
 		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,16 +220,16 @@ 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;
+			if (!this.$.html.insertNode(oA, { afterNode: null, skipCharCount: false })) return false;
 		}
 
 		this.selectMenu.close();
 
 		const space = dom.utils.createTextNode('\u00A0');
 		oA.parentNode.insertBefore(space, oA.nextSibling);
-		this.selection.setRange(space, 1, space, 1);
+		this.$.selection.setRange(space, 1, space, 1);
 
 		if (this.cachingFieldData && !this.cachingFieldData.some((data) => data.key === item.key)) {
 			this.cachingFieldData.push(item);
@@ -235,6 +237,9 @@ class Mention extends EditorInjector {
 	}
 }
 
+/**
+ * @returns {HTMLElement}
+ */
 function CreateHTML_controller() {
 	return dom.utils.createElement('DIV', { class: 'se-controller se-empty-controller' }, '<div></div>');
 }

package/src/plugins/index.js

@@ -16,7 +16,7 @@ import backgroundColor from './dropdown/backgroundColor';
 import hr from './dropdown/hr';
 import list from './dropdown/list';
 import table from './dropdown/table';
-import formatBlock from './dropdown/formatBlock';
+import blockStyle from './dropdown/blockStyle';
 import layout from './dropdown/layout';
 import lineHeight from './dropdown/lineHeight';
 import template from './dropdown/template';
@@ -59,7 +59,7 @@ export {
 	backgroundColor,
 	list,
 	table,
-	formatBlock,
+	blockStyle,
 	hr,
 	layout,
 	lineHeight,
@@ -80,7 +80,7 @@ export {
 	fileBrowser,
 	fontSize,
 	pageNavigator,
-	anchor
+	anchor,
 };
 export default {
 	blockquote,
@@ -95,7 +95,7 @@ export default {
 	backgroundColor,
 	list,
 	table,
-	formatBlock,
+	blockStyle,
 	hr,
 	layout,
 	lineHeight,
@@ -116,5 +116,5 @@ export default {
 	fileBrowser,
 	fontSize,
 	pageNavigator,
-	anchor
+	anchor,
 };