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

package/src/plugins/dropdown/template.js

@@ -1,46 +1,58 @@
 import EditorInjector from '../../editorInjector';
-import { domUtils } from '../../helper';
+import { dom } from '../../helper';
 
-const Template = function (editor, pluginOptions) {
-	// plugin bisic properties
-	EditorInjector.call(this, editor);
-	this.title = this.lang.template;
-	this.icon = 'template';
+/**
+ * @class
+ * @description Template Plugin, Apply a template to the selection.
+ */
+class Template extends EditorInjector {
+	static key = 'template';
+	static type = 'dropdown';
+	static className = '';
 
-	// members
-	this.selectedIndex = -1;
-	this.items = pluginOptions.items;
+	/**
+	 * @constructor
+	 * @param {__se__EditorCore} editor - The root editor instance
+	 * @param {Object} pluginOptions
+	 * @param {Array<{name: string, html: string}>} pluginOptions.items - Template list
+	 */
+	constructor(editor, pluginOptions) {
+		// plugin bisic properties
+		super(editor);
+		this.title = this.lang.template;
+		this.icon = 'template';
 
-	// create HTML
-	const menu = CreateHTML(this.items);
+		// members
+		this.selectedIndex = -1;
+		this.items = pluginOptions.items;
 
-	// init
-	this.menu.initDropdownTarget(Template, menu);
-};
+		// create HTML
+		const menu = CreateHTML(this.items);
+
+		// init
+		this.menu.initDropdownTarget(Template, menu);
+	}
 
-Template.key = 'template';
-Template.type = 'dropdown';
-Template.className = '';
-Template.prototype = {
 	/**
-	 * @override core
+	 * @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 = target.getAttribute('data-value') * 1;
+		const index = Number(target.getAttribute('data-value'));
 		const temp = this.items[(this.selectedIndex = index)];
 
 		if (temp.html) {
-			this.html.insert(temp.html);
+			this.html.insert(temp.html, { selectInserted: false, skipCharCount: false, skipCleaning: false });
 		} else {
 			this.menu.dropdownOff();
 			throw Error('[SUNEDITOR.template.fail] cause : "templates[i].html not found"');
 		}
 
 		this.menu.dropdownOff();
-	},
-
-	constructor: Template
-};
+	}
+}
 
 function CreateHTML(templateList) {
 	if (!templateList || templateList.length === 0) {
@@ -65,7 +77,7 @@ function CreateHTML(templateList) {
 	}
 	list += '</ul></div>';
 
-	return domUtils.createElement('DIV', { class: 'se-list-layer' }, list);
+	return dom.utils.createElement('DIV', { class: 'se-list-layer' }, list);
 }
 
 export default Template;

package/src/plugins/dropdown/textStyle.js

@@ -1,28 +1,40 @@
 import EditorInjector from '../../editorInjector';
-import { domUtils } from '../../helper';
+import { dom } from '../../helper';
 
-const TextStyle = function (editor, pluginOptions) {
-	// plugin bisic properties
-	EditorInjector.call(this, editor);
-	this.title = this.lang.textStyle;
-	this.icon = 'text_style';
+/**
+ * @class
+ * @description Text style Plugin, Applies a tag that specifies text styles to a selection.
+ */
+class TextStyle extends EditorInjector {
+	static key = 'textStyle';
+	static type = 'dropdown';
+	static className = '';
 
-	// create HTML
-	const menu = CreateHTML(editor, pluginOptions.items);
+	/**
+	 * @constructor
+	 * @param {__se__EditorCore} editor - The root editor instance
+	 * @param {Object} pluginOptions
+	 * @param {Array<{name: string, html: string}>} pluginOptions.items - Template list
+	 */
+	constructor(editor, pluginOptions) {
+		// plugin bisic properties
+		super(editor);
+		this.title = this.lang.textStyle;
+		this.icon = 'text_style';
 
-	// members
-	this.styleList = menu.querySelectorAll('li button');
+		// create HTML
+		const menu = CreateHTML(editor, pluginOptions.items);
 
-	// init
-	this.menu.initDropdownTarget(TextStyle, menu);
-};
+		// members
+		this.styleList = menu.querySelectorAll('li button');
+
+		// init
+		this.menu.initDropdownTarget(TextStyle, menu);
+	}
 
-TextStyle.key = 'textStyle';
-TextStyle.type = 'dropdown';
-TextStyle.className = '';
-TextStyle.prototype = {
 	/**
-	 * @override dropdown
+	 * @editorMethod Modules.Dropdown
+	 * @description Executes the method that is called when a plugin's dropdown menu is opened.
 	 */
 	on() {
 		const styleButtonList = this.styleList;
@@ -39,7 +51,7 @@ TextStyle.prototype = {
 				while (node && !this.format.isLine(node) && !this.component.is(node)) {
 					if (node.nodeName.toLowerCase() === btn.getAttribute('data-command').toLowerCase()) {
 						value = data[v];
-						if (/^\./.test(value) ? domUtils.hasClass(node, value.replace(/^\./, '')) : node.style[value]) {
+						if (/^\./.test(value) ? dom.utils.hasClass(node, value.replace(/^\./, '')) : /** @type {HTMLElement} */ (node).style[value]) {
 							active = true;
 							break;
 						}
@@ -50,16 +62,18 @@ TextStyle.prototype = {
 				if (!active) break;
 			}
 
-			active ? domUtils.addClass(btn, 'active') : domUtils.removeClass(btn, 'active');
+			active ? dom.utils.addClass(btn, 'active') : dom.utils.removeClass(btn, 'active');
 		}
-	},
+	}
 
 	/**
-	 * @override core
-	 * @param {Element} target Target command button
+	 * @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 tempElement = target.firstElementChild;
+		const tempElement = /** @type {HTMLElement} */ (target.firstElementChild);
 		const checkStyles = tempElement.style.cssText.replace(/:.+(;|$)/g, ',').split(',');
 		checkStyles.pop();
 
@@ -68,15 +82,13 @@ TextStyle.prototype = {
 			checkStyles.push('.' + classes[i]);
 		}
 
-		const newNode = domUtils.hasClass(target, 'active') ? null : tempElement.cloneNode(false);
+		const newNode = dom.utils.hasClass(target, 'active') ? null : tempElement.cloneNode(false);
 		const removeNodes = newNode ? null : [tempElement.nodeName];
-		this.format.applyTextStyle(newNode, checkStyles, removeNodes, true);
+		this.format.applyInlineElement(newNode, { stylesToModify: checkStyles, nodesToRemove: removeNodes, strictRemove: true });
 
 		this.menu.dropdownOff();
-	},
-
-	constructor: TextStyle
-};
+	}
+}
 
 function CreateHTML({ lang }, items) {
 	const defaultList = {
@@ -131,7 +143,7 @@ function CreateHTML({ lang }, items) {
 	}
 	list += '</ul></div>';
 
-	return domUtils.createElement('DIV', { class: 'se-dropdown se-list-layer se-list-format' }, list);
+	return dom.utils.createElement('DIV', { class: 'se-dropdown se-list-layer se-list-format' }, list);
 }
 
 export default TextStyle;

package/src/plugins/field/mention.js

@@ -1,65 +1,93 @@
 import EditorInjector from '../../editorInjector';
 import { ApiManager, SelectMenu, Controller } from '../../modules';
-import { domUtils, converter } from '../../helper';
+import { dom, converter } from '../../helper';
 
 const { debounce } = converter;
 
-const Mention = function (editor, pluginOptions) {
-	EditorInjector.call(this, editor);
-	// plugin basic properties
-	this.title = this.lang.mention;
-	this.icon = 'mention';
-
-	// members
-	this.triggerText = pluginOptions.triggerText || '@';
-	this.limitSize = pluginOptions.limitSize || 5;
-	this.searchStartLength = pluginOptions.searchStartLength || 0;
-	this.delayTime = typeof pluginOptions.delayTime === 'number' ? pluginOptions.delayTime : 200;
-	this.apiUrl = pluginOptions.apiUrl?.replace(/\s/g, '').replace(/\{limitSize\}/i, 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 ? new Map([['', []]]) : null;
-
-	// controller
-	const controllerEl = CreateHTML_controller();
-	this.selectMenu = new SelectMenu(this, { position: 'right-bottom', dir: 'ltr', closeMethod: () => this.controller.close() });
-	this.controller = new Controller(
-		this,
-		controllerEl,
-		{
-			position: 'bottom',
-			initMethod: () => {
-				this.apiManager.cancel();
-				this.selectMenu.close();
-			}
-		},
-		null
-	);
-	this.selectMenu.on(controllerEl.firstElementChild, SelectMention.bind(this));
-
-	// onInput debounce
-	this.onInput = debounce(this.onInput.bind(this), this.delayTime);
-};
-
-Mention.key = 'mention';
-Mention.type = 'field';
-Mention.className = '';
-Mention.prototype = {
+/**
+ * @class
+ * @description Mention Plugin
+ * - A plugin that provides a mention feature using `@` or a custom trigger character.
+ * - Displays a mention list when the trigger character is typed.
+ * - Supports fetching mention data from an API or a predefined data array.
+ * - Uses caching for optimized performance.
+ */
+class Mention extends EditorInjector {
+	static key = 'mention';
+	static type = 'field';
+	static className = '';
+
+	/**
+	 * @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.
+	 */
+	constructor(editor, pluginOptions) {
+		super(editor);
+		// plugin basic properties
+		this.title = this.lang.mention;
+		this.icon = 'mention';
+
+		// members
+		this.triggerText = pluginOptions.triggerText || '@';
+		this.limitSize = pluginOptions.limitSize || 5;
+		this.searchStartLength = pluginOptions.searchStartLength || 0;
+		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;
+
+		// controller
+		const controllerEl = CreateHTML_controller();
+		this.selectMenu = new SelectMenu(this, { position: 'right-bottom', dir: 'ltr', closeMethod: () => this.controller.close() });
+		this.controller = new Controller(
+			this,
+			controllerEl,
+			{
+				position: 'bottom',
+				initMethod: () => {
+					this.apiManager.cancel();
+					this.selectMenu.close();
+				}
+			},
+			null
+		);
+		this.selectMenu.on(controllerEl.firstElementChild, this.#SelectMention.bind(this));
+
+		// onInput debounce
+		this.onInput = debounce(this.onInput.bind(this), this.delayTime);
+	}
+
 	/**
-	 * @override core
+	 * @editorMethod Editor.EventManager
+	 * @description Executes the event function of "input".
+	 * @returns {Promise<boolean>}
 	 */
 	async onInput() {
-		this.apiManager.cancel();
+		if (!this.directData) {
+			this.apiManager.cancel();
+		}
 
 		const sel = this.selection.get();
 		if (!sel.rangeCount) {
 			this.selectMenu.close();
-			return;
+			return true;
 		}
 
 		const anchorNode = sel.anchorNode;
@@ -70,11 +98,11 @@ Mention.prototype = {
 		if (lastAtPos > -1) {
 			const mentionQuery = textBeforeCursor.substring(lastAtPos + 1, anchorOffset);
 			const beforeText = textBeforeCursor[lastAtPos - 1]?.trim();
-			if (!/\s/.test(mentionQuery) && (!beforeText || domUtils.isZeroWith(beforeText))) {
+			if (!/\s/.test(mentionQuery) && (!beforeText || dom.check.isZeroWidth(beforeText))) {
 				if (mentionQuery.length < this.searchStartLength) return true;
 
 				const anchorParent = anchorNode.parentNode;
-				if (domUtils.isAnchor(anchorParent) && !anchorParent.getAttribute('data-se-mention')) {
+				if (dom.check.isAnchor(anchorParent) && !anchorParent.getAttribute('data-se-mention')) {
 					return true;
 				}
 
@@ -92,21 +120,45 @@ Mention.prototype = {
 
 		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.
+	 * - Caches the fetched data for future use.
+	 * @param {string} value - The mention query text.
+	 * @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) {
+		const limit = this.limitSize;
+		const lowerValue = value.toLowerCase();
 		let response = null;
 		if (this.cachingData) {
 			response = this.cachingData.get(value);
 		}
 
 		if (!response) {
-			const xmlHttp = await this.apiManager.asyncCall({ method: 'GET', url: this._createUrl(value) });
-			response = JSON.parse(xmlHttp.responseText);
+			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) });
+				response = JSON.parse(xmlHttp.responseText);
+			}
 		}
 
 		if (this.cachingFieldData) {
-			response = this.cachingFieldData.get('').concat(response).splice(0, this.limitSize);
+			const uniqueKeys = new Set();
+			response = this.cachingFieldData
+				.concat(response)
+				.filter(({ key }) => {
+					if (uniqueKeys.has(key)) return false;
+					uniqueKeys.add(key);
+					return key.toLowerCase().startsWith(lowerValue);
+				})
+				.slice(0, limit);
 		}
 
 		if (!response?.length) {
@@ -135,47 +187,56 @@ Mention.prototype = {
 			if (this.cachingData) this.cachingData.set(value, list);
 			return true;
 		}
-	},
+	}
 
+	/**
+	 * @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) {
 		return this.apiUrl.replace(/\{key\}/i, key);
-	},
-
-	constructor: Mention
-};
-
-function SelectMention(item) {
-	if (!item) return false;
-
-	let oA = null;
-	const { key, name, url } = item;
-	const anchorParent = this._anchorNode.parentNode;
-
-	if (domUtils.isAnchor(anchorParent)) {
-		oA = anchorParent;
-		oA.setAttribute('data-se-mention', key);
-		oA.setAttribute('href', url);
-		oA.setAttribute('title', name);
-		oA.textContent = this.triggerText + key;
-	} else {
-		this.selection.setRange(this._anchorNode, this._lastAtPos, this._anchorNode, this._anchorOffset);
-		oA = domUtils.createElement('A', { 'data-se-mention': key, href: url, title: name, target: '_blank' }, this.triggerText + key);
-		if (!this.html.insertNode(oA, null, false)) return false;
 	}
 
-	this.selectMenu.close();
+	/**
+	 * @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.
+	 */
+	#SelectMention(item) {
+		if (!item) return false;
+
+		let oA = null;
+		const { key, name, url } = item;
+		const anchorParent = this._anchorNode.parentNode;
+
+		if (dom.check.isAnchor(anchorParent)) {
+			oA = anchorParent;
+			oA.setAttribute('data-se-mention', key);
+			oA.setAttribute('href', url);
+			oA.setAttribute('title', name);
+			oA.textContent = this.triggerText + key;
+		} else {
+			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;
+		}
+
+		this.selectMenu.close();
 
-	const space = domUtils.createTextNode('\u00A0');
-	oA.parentNode.insertBefore(space, oA.nextSibling);
-	this.selection.setRange(space, 1, space, 1);
+		const space = dom.utils.createTextNode('\u00A0');
+		oA.parentNode.insertBefore(space, oA.nextSibling);
+		this.selection.setRange(space, 1, space, 1);
 
-	if (this.cachingFieldData) {
-		this.cachingFieldData.get('').push(item);
+		if (this.cachingFieldData && !this.cachingFieldData.some((data) => data.key === item.key)) {
+			this.cachingFieldData.push(item);
+		}
 	}
 }
 
 function CreateHTML_controller() {
-	return domUtils.createElement('DIV', { class: 'se-controller se-empty-controller' }, '<div></div>');
+	return dom.utils.createElement('DIV', { class: 'se-controller se-empty-controller' }, '<div></div>');
 }
 
 export default Mention;

package/src/plugins/index.js

@@ -1,6 +1,6 @@
 // command
 import blockquote from './command/blockquote';
-import exportPdf from './command/exportPdf';
+import exportPDF from './command/exportPDF';
 import fileUpload from './command/fileUpload';
 import list_bulleted from './command/list_bulleted';
 import list_numbered from './command/list_numbered';
@@ -28,17 +28,27 @@ import link from './modal/link';
 import image from './modal/image';
 import video from './modal/video';
 import audio from './modal/audio';
+import embed from './modal/embed';
 import math from './modal/math';
+import drawing from './modal/drawing';
 
 // file browser
-import imageGallery from './fileBrowser/imageGallery';
+import imageGallery from './browser/imageGallery';
+import videoGallery from './browser/videoGallery';
+import audioGallery from './browser/audioGallery';
+import fileGallery from './browser/fileGallery';
+import fileBrowser from './browser/fileBrowser';
 
 // input
 import fontSize from './input/fontSize';
+import pageNavigator from './input/pageNavigator';
+
+// popup
+import anchor from './popup/anchor';
 
 export {
 	blockquote,
-	exportPdf,
+	exportPDF,
 	fileUpload,
 	list_bulleted,
 	list_numbered,
@@ -60,13 +70,21 @@ export {
 	image,
 	video,
 	audio,
+	embed,
 	math,
+	drawing,
 	imageGallery,
-	fontSize
+	videoGallery,
+	audioGallery,
+	fileGallery,
+	fileBrowser,
+	fontSize,
+	pageNavigator,
+	anchor
 };
 export default {
 	blockquote,
-	exportPdf,
+	exportPDF,
 	fileUpload,
 	list_bulleted,
 	list_numbered,
@@ -88,7 +106,15 @@ export default {
 	image,
 	video,
 	audio,
+	embed,
 	math,
+	drawing,
 	imageGallery,
-	fontSize
+	videoGallery,
+	audioGallery,
+	fileGallery,
+	fileBrowser,
+	fontSize,
+	pageNavigator,
+	anchor
 };