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

package/src/plugins/command/fileUpload.js

@@ -1,116 +1,146 @@
 import EditorInjector from '../../editorInjector';
-import { CreateTooltipInner } from '../../core/section/constructor';
-import { domUtils, env, numbers } from '../../helper';
+import { dom, env, numbers } from '../../helper';
 import { FileManager, Figure, Controller } from '../../modules';
 
 const { NO_EVENT } = env;
 
-const FileUpload = function (editor, pluginOptions) {
-	EditorInjector.call(this, editor);
-	// plugin basic properties
-	this.title = this.lang.fileUpload;
-	this.icon = 'file_upload';
-
-	if (!pluginOptions.uploadUrl) console.warn('[SUNEDITOR.fileUpload.warn] "fileUpload" plugin must be have "uploadUrl" option.');
-
-	// members
-	this.uploadUrl = pluginOptions.uploadUrl;
-	this.uploadHeaders = pluginOptions.uploadHeaders;
-	this.uploadSizeLimit = /\d+/.test(pluginOptions.uploadSizeLimit) ? numbers.get(pluginOptions.uploadSizeLimit, 0) : null;
-	this.uploadSingleSizeLimit = /\d+/.test(pluginOptions.uploadSingleSizeLimit) ? numbers.get(pluginOptions.uploadSingleSizeLimit, 0) : null;
-	this.allowMultiple = !!pluginOptions.allowMultiple;
-	this.acceptedFormats = typeof pluginOptions.acceptedFormats !== 'string' ? '*' : pluginOptions.acceptedFormats.trim() || '*';
-	this._acceptedCheck = this.acceptedFormats.split(', ');
-	this.as = pluginOptions.as || 'box';
-	this.input = domUtils.createElement('input', { type: 'file', accept: this.acceptedFormats });
-	if (this.allowMultiple) {
-		this.input.setAttribute('multiple', 'multiple');
+/**
+ * @class
+ * @description File upload plugin
+ */
+class FileUpload extends EditorInjector {
+	static key = 'fileUpload';
+	static type = 'command';
+	static className = '';
+	static options = { eventIndex: 10000 };
+	/**
+	 * @this {FileUpload}
+	 * @param {HTMLElement} node - The node to check.
+	 * @returns {HTMLElement|null} Returns a node if the node is a valid component.
+	 */
+	static component(node) {
+		return dom.check.isAnchor(node) && node.hasAttribute('data-se-file-download') ? node : null;
 	}
-	this._element = null;
-
-	// figure
-	const customItems = {
-		'custom-download': {
-			command: 'download',
-			title: this.lang.download,
-			icon: 'download',
-			action: (target) => {
-				const url = target.getAttribute('href');
-				if (url) domUtils.createElement('A', { href: url }, null).click();
-			}
-		},
-		'custom-as': {
-			command: 'as',
-			value: 'link', // 'block' or 'link'
-			title: this.lang.asLink,
-			icon: 'reduction',
-			action: (target, value) => {
-				this.convertFormat(target, value);
+
+	/**
+	 * @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
+	 */
+	constructor(editor, pluginOptions) {
+		super(editor);
+		// plugin basic properties
+		this.title = this.lang.fileUpload;
+		this.icon = 'file_upload';
+
+		if (!pluginOptions.uploadUrl) console.warn('[SUNEDITOR.fileUpload.warn] "fileUpload" plugin must be have "uploadUrl" option.');
+
+		// members
+		this.uploadUrl = pluginOptions.uploadUrl;
+		this.uploadHeaders = pluginOptions.uploadHeaders;
+		this.uploadSizeLimit = numbers.get(pluginOptions.uploadSizeLimit, 0);
+		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.input = dom.utils.createElement('input', { type: 'file', accept: this.acceptedFormats });
+		if (this.allowMultiple) {
+			this.input.setAttribute('multiple', 'multiple');
+		}
+		this._element = null;
+
+		// figure
+		const customItems = {
+			'custom-download': {
+				command: 'download',
+				title: this.lang.download,
+				icon: 'download',
+				action: (target) => {
+					const url = target.getAttribute('href');
+					if (url) dom.utils.createElement('A', { href: url }, null).click();
+				}
+			},
+			'custom-as': {
+				command: 'as',
+				value: 'link', // 'block' or 'link'
+				title: this.lang.asLink,
+				icon: 'reduction',
+				action: (target, value) => {
+					this.convertFormat(target, value);
+				}
 			}
+		};
+
+		const figureControls = (pluginOptions.controls || [['custom-as', 'align', 'edit', 'custom-download', 'copy', 'remove']]).map((subArray) => subArray.map((item) => (item.startsWith('custom-') ? customItems[item] : item)));
+		this.figure = new Figure(this, figureControls, {});
+
+		// file manager
+		this.fileManager = new FileManager(this, {
+			query: 'a[download][data-se-file-download]',
+			loadHandler: this.events.onFileLoad,
+			eventHandler: this.events.onFileAction
+		});
+
+		// controller
+		if (/\bedit\b/.test(JSON.stringify(figureControls))) {
+			const controllerEl = CreateHTML_controller(this);
+			this.controller = new Controller(this, controllerEl, { position: 'bottom', disabled: true }, FileUpload.key);
+			this.editInput = controllerEl.querySelector('input');
 		}
-	};
-	let figureControls = pluginOptions.controls || [['custom-as', 'edit', 'align', 'remove', 'custom-download']];
-	figureControls = figureControls.map((subArray) => subArray.map((item) => (item.startsWith('custom-') ? customItems[item] : item)));
-	this.figure = new Figure(this, figureControls, {});
-
-	// file manager
-	this.fileManager = new FileManager(this, {
-		query: 'a[download][data-se-file-download]',
-		loadHandler: this.events.onFileLoad,
-		eventHandler: this.events.onFileAction
-	});
-
-	// controller
-	if (/\bedit\b/.test(JSON.stringify(figureControls))) {
-		const controllerEl = CreateHTML_controller(this);
-		this.controller = new Controller(this, controllerEl, { position: 'bottom', disabled: true }, FileUpload.key);
-		this.editInput = controllerEl.querySelector('input');
+
+		// init
+		this.eventManager.addEvent(this.input, 'change', this.#OnChangeFile.bind(this));
 	}
 
-	// init
-	this.eventManager.addEvent(this.input, 'change', OnChangeFile.bind(this));
-};
-
-FileUpload.key = 'fileUpload';
-FileUpload.type = 'command';
-FileUpload.className = '';
-FileUpload.options = { eventIndex: 10000 };
-FileUpload.component = function (node) {
-	return domUtils.isAnchor(node) && node.hasAttribute('data-se-file-download') ? node : null;
-};
-FileUpload.prototype = {
 	/**
-	 * @override core
-	 * @param {Element} target Target command button
+	 * @editorMethod Editor.core
+	 * @description Executes the main execution method of the plugin.
+	 * - It is executed by clicking a toolbar "command" button or calling an API.
 	 */
 	action() {
+		this.editor._preventBlur = true;
 		this.input.click();
-	},
+	}
 
 	/**
-	 * @override fileManager
-	 * @param {Element} target Target element
+	 * @editorMethod Editor.Component
+	 * @description Executes the method that is called when a component of a plugin is selected.
+	 * @param {HTMLElement} target Target component element
 	 */
 	select(target) {
 		this._element = target;
 		const asBtn = this.figure.controller.form.querySelector('[data-command="__c__as"]');
-		if (domUtils.isFigure(target.parentElement)) {
-			asBtn.innerHTML = this.icons.reduction + CreateTooltipInner(this.lang.asLink);
+		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 });
 		} else {
-			asBtn.innerHTML = this.icons.expansion + CreateTooltipInner(this.lang.asBlock);
+			asBtn.innerHTML = this.icons.expansion + dom.utils.createTooltipInner(this.lang.asBlock);
 			asBtn.setAttribute('data-value', 'box');
 			this.figure.controllerOpen(target, { isWWTarget: true });
 			return true;
 		}
-	},
+	}
 
 	/**
-	 * @description On paste or drop
-	 * @param {*} params { frameContext, event, file }
+	 * @editorMethod Editor.EventManager
+	 * @description Executes the event function of "paste" or "drop".
+	 * @param {Object} params { frameContext, event, file }
+	 * @param {__se__FrameContext} params.frameContext Frame context
+	 * @param {ClipboardEvent} params.event Event object
+	 * @param {File} params.file File object
+	 * @returns {boolean} - If return false, the file upload will be canceled
 	 */
-	onPastAndDrop({ file }) {
+	onFilePasteAndDrop({ file }) {
 		const fileType = file.type;
 		if (
 			!this._acceptedCheck.some((format) => {
@@ -125,23 +155,24 @@ FileUpload.prototype = {
 		this.editor.focus();
 
 		return false;
-	},
+	}
 
 	/**
-	 * @override Figure
-	 * @param {Element} target Target element
+	 * @editorMethod Modules.Controller
+	 * @description Executes the method that is called when a target component is edited.
+	 * @param {HTMLElement|Text} target Target element
 	 */
 	edit(target) {
 		this.editInput.value = target.textContent;
 		this.figure.controllerHide();
-		this.controller.open(target, null, { isWWTarget: !domUtils.isFigure(target.parentElement), initMethod: null, addOffset: null });
+		this.controller.open(target, null, { isWWTarget: !dom.check.isFigure(target.parentElement), initMethod: null, addOffset: null });
 		this.editInput.focus();
-	},
+	}
 
 	/**
-	 * @override controller
-	 * @param {Element} target Target button element
-	 * @returns
+	 * @editorMethod Modules.Controller
+	 * @description Executes the method that is called when a button is clicked in the "controller".
+	 * @param {HTMLButtonElement} target Target button element
 	 */
 	controllerAction(target) {
 		const command = target.getAttribute('data-command');
@@ -153,9 +184,38 @@ FileUpload.prototype = {
 		}
 
 		this.controller.close();
-		this.component.select(this._element, FileUpload.key, false);
-	},
+		this.component.select(this._element, FileUpload.key);
+	}
+
+	/**
+	 * @editorMethod Editor.Component
+	 * @description Method to delete a component of a plugin, called by the "FileManager", "Controller" module.
+	 * @param {HTMLElement} target Target element
+	 * @returns {Promise<void>}
+	 */
+	async destroy(target) {
+		if (!target) return;
+
+		const figure = Figure.GetContainer(target);
+		const containerTarget = dom.query.getParentElement(target, '.se-component') || target;
+
+		const message = await this.triggerEvent('onFileDeleteBefore', { element: figure.target, container: figure, url: figure.target.getAttribute('href') });
+		if (message === false) return;
+
+		const isInlineComp = this.component.isInline(containerTarget);
+		const focusEl = isInlineComp ? containerTarget.previousSibling || containerTarget.nextSibling : containerTarget.previousElementSibling || containerTarget.nextElementSibling;
+		dom.utils.removeItem(containerTarget);
+		this.ui._offCurrentController();
+
+		this.editor.focusEdge(focusEl);
+		this.history.push(false);
+	}
 
+	/**
+	 * @description Create an "file" component using the provided files.
+	 * @param {File[]|FileList} fileList File object list
+	 * @returns {Promise<boolean>} If return false, the file upload will be canceled
+	 */
 	async submitFile(fileList) {
 		if (fileList.length === 0) return;
 
@@ -174,7 +234,7 @@ FileUpload.prototype = {
 					file: f
 				});
 
-				this.notice.open(message === NO_EVENT ? err : message || err);
+				this.ui.alertOpen(message === NO_EVENT ? err : message || err, 'error');
 
 				return false;
 			}
@@ -194,7 +254,7 @@ FileUpload.prototype = {
 				uploadSize: fileSize
 			});
 
-			this.notice.open(message === NO_EVENT ? err : message || err);
+			this.ui.alertOpen(message === NO_EVENT ? err : message || err, 'error');
 
 			return false;
 		}
@@ -205,14 +265,14 @@ FileUpload.prototype = {
 			files
 		};
 
-		const handler = async function (infos, newInfos) {
+		const handler = async function (uploadCallback, infos, newInfos) {
 			infos = newInfos || infos;
 			const xmlHttp = await this.fileManager.asyncUpload(infos.url, infos.uploadHeaders, infos.files);
-			this._uploadCallBack(xmlHttp);
-		}.bind(this, fileInfo);
+			uploadCallback(xmlHttp);
+		}.bind(this, this.#_uploadCallBack.bind(this), fileInfo);
 
 		const result = await this.triggerEvent('onFileUploadBefore', {
-			...fileInfo,
+			info: fileInfo,
 			handler
 		});
 
@@ -221,33 +281,11 @@ FileUpload.prototype = {
 		if (result !== null && typeof result === 'object') handler(result);
 
 		if (result === true || result === NO_EVENT) handler(null);
-	},
-
-	/**
-	 * @override fileManager, Figure
-	 * @param {Element} target Target element
-	 */
-	async destroy(target) {
-		if (!target) return;
-
-		const figure = Figure.GetContainer(target);
-		target = domUtils.getParentElement(target, '.se-component') || target;
-
-		const message = await this.triggerEvent('onFileDeleteBefore', { target: figure.target, container: figure, url: figure.target.getAttribute('href') });
-		if (message === false) return;
-
-		const isInlineComp = this.component.isInline(target);
-		const focusEl = isInlineComp ? target.previousSibling || target.nextSibling : target.previousElementSibling || target.nextElementSibling;
-		domUtils.removeItem(target);
-		this.editor._offCurrentController();
-
-		this.editor.focusEdge(focusEl);
-		this.history.push(false);
-	},
+	}
 
 	/**
 	 * @description Convert format to link or block
-	 * @param {Element} target Target element
+	 * @param {HTMLElement} target Target element
 	 * @param {string} value 'link' or 'block'
 	 */
 	convertFormat(target, value) {
@@ -258,50 +296,43 @@ FileUpload.prototype = {
 			const parent = container.parentElement;
 
 			target.removeAttribute('data-se-non-focus');
-			target.setAttribute('contenteditable', false);
-			domUtils.addClass(target, 'se-component|se-inline-component');
+			target.setAttribute('contenteditable', 'false');
+			dom.utils.addClass(target, 'se-component|se-inline-component');
 
-			const line = domUtils.createElement(this.options.get('defaultLine'), null, target);
+			const line = dom.utils.createElement(this.options.get('defaultLine'), null, target);
 			parent.insertBefore(line, next);
-			domUtils.removeItem(container);
+			dom.utils.removeItem(container);
 		} else {
 			// block
 			this.selection.setRange(target, 0, target, 1);
 			const r = this.html.remove();
 			const s = this.nodeTransform.split(r.container, r.offset, 0);
 
-			if (s?.previousElementSibling && domUtils.isZeroWith(s.previousElementSibling)) {
-				domUtils.removeItem(s.previousElementSibling);
+			if (s?.previousElementSibling && dom.check.isZeroWidth(s.previousElementSibling)) {
+				dom.utils.removeItem(s.previousElementSibling);
 			}
 
 			target.setAttribute('data-se-non-focus', 'true');
 			target.removeAttribute('contenteditable');
-			domUtils.removeClass(target, 'se-component|se-component-selected|se-inline-component');
+			dom.utils.removeClass(target, 'se-component|se-component-selected|se-inline-component');
 
 			const figure = Figure.CreateContainer(target, 'se-file-figure se-flex-component');
 			(s || r.container).parentElement.insertBefore(figure.container, s);
 		}
 
 		this.history.push(false);
-		this.component.select(target, FileUpload.key, false);
-	},
-
-	_register(response) {
-		response.result.forEach((file, i, a) => {
-			this._create(
-				file.url,
-				{
-					name: file.name,
-					size: file.size
-				},
-				i === a.length - 1
-			);
-		});
-	},
+		this.component.select(target, FileUpload.key);
+	}
 
-	_create(url, file, isLast) {
+	/**
+	 * @description Create file element
+	 * @param {string} url File URL
+	 * @param {File|{name: string, size: number}} file File object
+	 * @param {boolean} isLast Is last file
+	 */
+	create(url, file, isLast) {
 		const name = file.name || url;
-		const a = domUtils.createElement(
+		const a = dom.utils.createElement(
 			'A',
 			{
 				href: url,
@@ -319,14 +350,14 @@ FileUpload.prototype = {
 
 		if (this.as === 'link') {
 			a.className = 'se-component se-inline-component';
-			this.component.insert(a, false, false);
+			this.component.insert(a, { skipCharCount: false, skipSelection: false, skipHistory: false });
 			return;
 		}
 
 		const figure = Figure.CreateContainer(a);
-		domUtils.addClass(figure.container, 'se-file-figure|se-flex-component');
+		dom.utils.addClass(figure.container, 'se-file-figure|se-flex-component');
 
-		if (!this.component.insert(figure.container, false, isLast ? !this.options.get('componentAutoSelect') : true)) {
+		if (!this.component.insert(figure.container, { skipCharCount: false, skipSelection: isLast ? !this.options.get('componentAutoSelect') : true, skipHistory: false })) {
 			this.editor.focus();
 			return;
 		}
@@ -337,32 +368,68 @@ FileUpload.prototype = {
 			const line = this.format.addLine(figure.container, null);
 			if (line) this.selection.setRange(line, 0, line, 0);
 		} else {
-			this.component.select(a, FileUpload.key, false);
+			this.component.select(a, FileUpload.key);
 		}
-	},
+	}
+
+	/**
+	 * @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) {
+		response.result.forEach((file, i, a) => {
+			this.create(
+				file.url,
+				{
+					name: file.name,
+					size: file.size
+				},
+				i === a.length - 1
+			);
+		});
+	}
 
+	/**
+	 * @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) {
 		const message = await this.triggerEvent('onFileUploadError', { error: response });
 		if (message === false) return;
 		const err = message === NO_EVENT ? response.errorMessage : message || response.errorMessage;
-		this.notice.open(err);
+		this.ui.alertOpen(err, 'error');
 		console.error('[SUNEDITOR.plugin.fileUpload.error]', err);
-	},
+	}
 
-	_uploadCallBack(xmlHttp) {
+	/**
+	 * @description Handles the file upload completion callback.
+	 * - Parses the response and registers the uploaded file.
+	 * @param {XMLHttpRequest} xmlHttp - The completed XHR request.
+	 */
+	#_uploadCallBack(xmlHttp) {
 		const response = JSON.parse(xmlHttp.responseText);
 		if (response.errorMessage) {
 			this._error(response);
 		} else {
 			this._register(response);
 		}
-	},
-
-	constructor: FileUpload
-};
+	}
 
-async function OnChangeFile(e) {
-	await this.submitFile(e.target.files);
+	/**
+	 * @description Handles the change event when a file is selected.
+	 * - Triggers the file upload process.
+	 * @param {InputEvent} e - The change event object.
+	 */
+	async #OnChangeFile(e) {
+		/** @type {HTMLInputElement} */
+		const eventTarget = dom.query.getEventTarget(e);
+		await this.submitFile(eventTarget.files);
+	}
 }
 
 function CreateHTML_controller({ lang, icons }) {
@@ -383,7 +450,7 @@ function CreateHTML_controller({ lang, icons }) {
 		</form>
 		`;
 
-	return domUtils.createElement('DIV', { class: 'se-controller se-controller-resizing' }, html);
+	return dom.utils.createElement('DIV', { class: 'se-controller se-controller-simple-input' }, html);
 }
 
 export default FileUpload;