suneditor 3.1.3 → 3.2.0

package/src/plugins/field/slashCommand.js

@@ -0,0 +1,297 @@
+import { PluginField } from '../../interfaces';
+import { Controller } from '../../modules/contract';
+import { CommandMenu } from '../../modules/ui';
+import { dom, converter, keyCodeMap } from '../../helper';
+import { ResolveButton } from '../../core/section/constructor';
+
+const { debounce } = converter;
+
+/**
+ * @typedef {Object} SlashCommandItem
+ * @property {string} key - Unique identifier for the item.
+ * @property {string} title - Display label.
+ * @property {string} [icon] - Icon key from `$.icons` (e.g. `'h1'`) or a raw HTML string (e.g. `'<svg>...</svg>'`).
+ * @property {string[]} [keywords] - Extra search terms used in addition to the title.
+ * @property {function(SunEditor.Deps, SlashCommandActionContext): void | Promise<void>} action - Invoked when the item is selected.
+ *   The trigger string (e.g. `/hea`) is already removed from the editor and the caret restored to that position before `action` runs.
+ *   The action owns its history entry — calling an L3 wrapper (`$.html.*`, `$.format.*`, `$.inline.apply`) auto-pushes; otherwise call `$.history.push(false)` manually.
+ */
+
+/**
+ * @typedef {Object} SlashCommandActionContext
+ * @property {string} triggerChar - The configured trigger character (e.g. `'/'`).
+ * @property {string} query - The text the user typed after the trigger (e.g. `'hea'`).
+ * @property {SlashCommandItem} item - The selected item.
+ */
+
+/**
+ * @typedef {Object} SlashCommandPluginOptions
+ * @property {string} [triggerChar='/'] - Character that opens the command menu. Single character recommended.
+ * @property {Array<SlashCommandItem | string>} items - Menu entries. Strings resolve via `ResolveButton`
+ *   (plugin names, built-in commands like `'bold'`); objects are custom items with their own `action`.
+ *   Required.
+ * @property {number} [delayTime=120] - Debounce delay (ms) before the input is inspected for the trigger.
+ * @property {number} [limitSize=10] - Maximum number of items shown in the dropdown.
+ * @property {string} [emptyMessage] - Message shown when no items match the query. If unset, the menu closes on no match.
+ * @property {function(SlashCommandItem, { icons: Object }): string} [renderItem] - Custom item HTML renderer.
+ *   Applied only to custom item objects; plugin-name entries always render with the canonical BlockHandle row.
+ * ```js
+ * SUNEDITOR.create('#editor', {
+ *   plugins: [slashCommand],
+ *   slashCommand: {
+ *     triggerChar: '/',
+ *     items: [
+ *       {
+ *         key: 'h1',
+ *         title: 'Heading 1',
+ *         icon: 'h1',
+ *         keywords: ['header', 'title'],
+ *         action: ($) => $.format.applyBlock(document.createElement('H1')),
+ *       },
+ *       'bold',
+ *       'image',
+ *       'blockStyle',
+ *     ],
+ *   },
+ * });
+ * ```
+ */
+
+/**
+ * @class
+ * @description Slash Command plugin
+ * - Notion / Tiptap style "/" command menu. Triggered by the configured character (default `'/'`).
+ * - Menu rendering + dispatch is delegated to {@link CommandMenu}, which is also used by BlockHandle's
+ *   action menu — both menus share the exact same row HTML and dispatch behavior.
+ * - SlashCommand-specific concerns kept here: input watching, debounce, trigger detection,
+ *   trigger text deletion before dispatch, empty-state row.
+ */
+class SlashCommand extends PluginField {
+	static key = 'slashCommand';
+	static className = '';
+
+	#triggerChar;
+	#limitSize;
+	#emptyMessage;
+
+	/** @type {CommandMenu} */
+	#menu;
+
+	#lastTriggerPos = 0;
+	#anchorOffset = 0;
+	#anchorNode = null;
+	#internalClose = false;
+
+	/**
+	 * @constructor
+	 * @param {SunEditor.Kernel} kernel
+	 * @param {SlashCommandPluginOptions} pluginOptions
+	 */
+	constructor(kernel, pluginOptions) {
+		super(kernel);
+
+		this.#triggerChar =
+			typeof pluginOptions.triggerChar === 'string' && pluginOptions.triggerChar.length > 0
+				? pluginOptions.triggerChar
+				: '/';
+		this.#limitSize =
+			typeof pluginOptions.limitSize === 'number' && pluginOptions.limitSize > 0 ? pluginOptions.limitSize : 10;
+		this.#emptyMessage = typeof pluginOptions.emptyMessage === 'string' ? pluginOptions.emptyMessage : '';
+		const delayTime = typeof pluginOptions.delayTime === 'number' ? pluginOptions.delayTime : 120;
+
+		this.#menu = new CommandMenu(this, this.$, {
+			items: Array.isArray(pluginOptions.items) ? pluginOptions.items : [],
+			resolveButton: ResolveButton,
+			renderCustomItem: typeof pluginOptions.renderItem === 'function' ? pluginOptions.renderItem : null,
+			selectMenuParams: {
+				position: 'bottom-left',
+				dir: 'ltr',
+				minWidth: '200px',
+				maxHeight: '320px',
+				closeMethod: () => this.#onMenuClose(),
+			},
+		});
+
+		const controllerEl = CreateHTML_controller();
+		this.controller = new Controller(
+			this,
+			this.$,
+			controllerEl,
+			{
+				position: 'bottom',
+				escGuard: () => this.#menu.hasOpenSubPanel(),
+			},
+			null,
+		);
+
+		this.#menu.attach(/** @type {HTMLElement} */ (controllerEl.firstElementChild), this.#onSelectItem.bind(this), {
+			class: 'se-block-action-menu se-slash-command-menu',
+		});
+
+		this.onInput = debounce(this.onInput.bind(this), delayTime);
+	}
+
+	/**
+	 * @hook Editor.EventManager
+	 * @description ESC while the menu is still pending must not let that scheduled `onInput` re-open the menu after the dismiss.
+	 * @type {SunEditor.Hook.Event.OnKeyDown}
+	 * @param {SunEditor.HookParams.KeyEvent} params
+	 */
+	onKeyDown({ event }) {
+		if (keyCodeMap.isEsc(event.code)) /** @type {{ cancel?: () => void }} */ (this.onInput).cancel?.();
+	}
+
+	/**
+	 * @hook Editor.EventManager
+	 * @type {SunEditor.Hook.Event.OnInput}
+	 */
+	onInput() {
+		const items = this.#menu.getItems();
+		if (items.length === 0) return;
+
+		const sel = this.$.selection.get();
+		if (!sel.rangeCount) {
+			this.#closeMenu();
+			return;
+		}
+
+		const anchorNode = sel.anchorNode;
+		const anchorOffset = sel.anchorOffset;
+		if (!anchorNode || typeof anchorNode.textContent !== 'string') {
+			this.#closeMenu();
+			return;
+		}
+
+		const textBeforeCursor = anchorNode.textContent.substring(0, anchorOffset);
+		const trigger = this.#triggerChar;
+		const lastPos = textBeforeCursor.lastIndexOf(trigger);
+		if (lastPos === -1) {
+			this.#closeMenu();
+			return;
+		}
+
+		const query = textBeforeCursor.substring(lastPos + trigger.length, anchorOffset);
+		// Reject when the query contains whitespace (user moved past the slash word).
+		if (/\s/.test(query)) {
+			this.#closeMenu();
+			return;
+		}
+
+		// Trigger must sit at the start of the line or be preceded by whitespace / zero-width.
+		const beforeChar = textBeforeCursor[lastPos - 1];
+		if (beforeChar && beforeChar.trim() !== '' && !dom.check.isZeroWidth(beforeChar)) {
+			this.#closeMenu();
+			return;
+		}
+
+		const filtered = this.#menu.filter(query, this.#limitSize);
+
+		if (filtered.length === 0) {
+			if (this.#emptyMessage) {
+				this.#renderEmpty(anchorNode);
+				this.#cacheAnchor(anchorNode, lastPos, anchorOffset);
+			} else {
+				this.#closeMenu();
+			}
+			return;
+		}
+
+		this.controller.open(anchorNode, null, { isWWTarget: true, initMethod: null, addOffset: null });
+		this.#menu.createRows(filtered);
+		this.#menu.open();
+		this.#menu.setItem(0);
+		this.#cacheAnchor(anchorNode, lastPos, anchorOffset);
+	}
+
+	/**
+	 * @description Close the menu from the plugin itself (invalid query, or after a selection). Flags
+	 * the close as internal so `#onMenuClose` does not treat it as a user dismiss.
+	 */
+	#closeMenu() {
+		this.#internalClose = true;
+		this.#menu.close();
+		this.#internalClose = false;
+	}
+
+	/**
+	 * @description SelectMenu `closeMethod`. On a user dismiss (ESC / outside-click) — i.e. not an
+	 * internal close and not a selection — drop the typed "/query" and restore the caret to where the
+	 * trigger was, leaving the editor in a clean state. Always tears down the controller.
+	 */
+	#onMenuClose() {
+		if (!this.#internalClose) this.#removeTrigger();
+		this.#anchorNode = null;
+		this.controller.close();
+	}
+
+	/**
+	 * @description Remove the trigger + query text (`/hea`) and collapse the caret to the trigger
+	 * position. No-op if the cached anchor is stale (text changed / node detached).
+	 */
+	#removeTrigger() {
+		const anchorNode = this.#anchorNode;
+		if (!anchorNode || !anchorNode.parentNode) return;
+		if (anchorNode.textContent?.[this.#lastTriggerPos] !== this.#triggerChar) return;
+
+		this.$.selection.setRange(anchorNode, this.#lastTriggerPos, anchorNode, this.#anchorOffset);
+		const range = this.$.selection.getRange();
+		if (range && !range.collapsed) this.$.html.remove();
+	}
+
+	/**
+	 * @param {Node} anchorNode
+	 * @param {number} lastPos
+	 * @param {number} anchorOffset
+	 */
+	#cacheAnchor(anchorNode, lastPos, anchorOffset) {
+		this.#anchorNode = anchorNode;
+		this.#lastTriggerPos = lastPos;
+		this.#anchorOffset = anchorOffset;
+	}
+
+	/**
+	 * @description Render the no-match row as a single non-clickable entry.
+	 * @param {Node} targetNode
+	 */
+	#renderEmpty(targetNode) {
+		this.controller.open(targetNode, null, { isWWTarget: true, initMethod: null, addOffset: null });
+		this.#menu.selectMenu.create([null], [`<span class="se-slash-empty">${this.#emptyMessage}</span>`]);
+		this.#menu.open();
+	}
+
+	/**
+	 * @description Click handler. Removes the trigger string from the editor, then hands the item
+	 * to {@link CommandMenu#dispatch} — which routes to `plugin.open/show/action`,
+	 * `commandDispatcher.run`, or the custom item's `action` callback.
+	 * @param {import('../../modules/ui/CommandMenu.js').ResolvedItem | null} item
+	 * @returns {boolean | undefined}
+	 */
+	#onSelectItem(item) {
+		if (!item) return false;
+
+		const anchorNode = this.#anchorNode;
+		if (!anchorNode) return false;
+
+		const triggerChar = this.#triggerChar;
+		const query = anchorNode.textContent.substring(this.#lastTriggerPos + triggerChar.length, this.#anchorOffset);
+
+		// Remove the trigger + query, leaving the caret at the trigger position so the action
+		// (insert block, run command, etc.) operates from a clean cursor.
+		this.$.selection.setRange(anchorNode, this.#lastTriggerPos, anchorNode, this.#anchorOffset);
+		const range = this.$.selection.getRange();
+		if (range && !range.collapsed) this.$.html.remove();
+
+		this.#closeMenu();
+
+		this.#menu.dispatch(item, { triggerChar, query, item: item.raw });
+	}
+}
+
+/**
+ * @returns {HTMLElement}
+ */
+function CreateHTML_controller() {
+	return dom.utils.createElement('DIV', { class: 'se-controller se-empty-controller' }, '<div></div>');
+}
+
+export default SlashCommand;

package/src/plugins/index.js

@@ -8,6 +8,7 @@ import list_numbered from './command/list_numbered';
 
 // field
 import autocomplete from './field/autocomplete';
+import slashCommand from './field/slashCommand';
 
 // dropdown
 import align from './dropdown/align';
@@ -55,6 +56,7 @@ export {
 	list_bulleted,
 	list_numbered,
 	autocomplete,
+	slashCommand,
 	align,
 	font,
 	fontColor,
@@ -92,6 +94,7 @@ export default {
 	list_bulleted,
 	list_numbered,
 	autocomplete,
+	slashCommand,
 	align,
 	font,
 	fontColor,

package/src/plugins/input/fontSize.js

@@ -131,7 +131,9 @@ class FontSize extends PluginInput {
 
 		// create HTML
 		this.unitMap = { ...DEFAULT_UNIT_MAP, ...(pluginOptions.unitMap || {}) };
-		this.sizeUnit = /text/.test(pluginOptions.sizeUnit) ? '' : pluginOptions.sizeUnit || this.$.options.get('fontSizeUnits')[0];
+		this.sizeUnit = /text/.test(pluginOptions.sizeUnit)
+			? ''
+			: pluginOptions.sizeUnit || this.$.options.get('fontSizeUnits')[0];
 
 		const unitMap = this.unitMap[this.sizeUnit || 'text'];
 		const menu = CreateHTML(this.$, unitMap, this.sizeUnit, pluginOptions.showDefaultSizeLabel);
@@ -152,25 +154,47 @@ class FontSize extends PluginInput {
 		if (showIncDec) {
 			this.beforeItem = dom.utils.createElement(
 				'button',
-				{ class: 'se-btn se-tooltip se-sub-btn', type: 'button', 'data-command': FontSize.key, 'data-type': 'command', 'data-value': 'dec' },
+				{
+					class: 'se-btn se-tooltip se-sub-btn',
+					type: 'button',
+					'data-command': FontSize.key,
+					'data-type': 'command',
+					'data-value': 'dec',
+				},
 				`${this.$.icons.minus}<span class="se-tooltip-inner"><span class="se-tooltip-text">${this.$.lang.decrease}</span></span>`,
 			);
 			this.afterItem = dom.utils.createElement(
 				'button',
-				{ class: 'se-btn se-tooltip se-sub-btn', type: 'button', 'data-command': FontSize.key, 'data-type': 'command', 'data-value': 'inc' },
+				{
+					class: 'se-btn se-tooltip se-sub-btn',
+					type: 'button',
+					'data-command': FontSize.key,
+					'data-type': 'command',
+					'data-value': 'inc',
+				},
 				`${this.$.icons.plus}<span class="se-tooltip-inner"><span class="se-tooltip-text">${this.$.lang.increase}</span></span>`,
 			);
 		} else if (!disableInput) {
 			this.afterItem = dom.utils.createElement(
 				'button',
-				{ class: 'se-btn se-tooltip se-sub-arrow-btn', type: 'button', 'data-command': FontSize.key, 'data-type': 'dropdown' },
+				{
+					class: 'se-btn se-tooltip se-sub-arrow-btn',
+					type: 'button',
+					'data-command': FontSize.key,
+					'data-type': 'dropdown',
+				},
 				`${this.$.icons.arrow_down}<span class="se-tooltip-inner"><span class="se-tooltip-text">${this.$.lang.fontSize}</span></span>`,
 			);
 			this.$.menu.initDropdownTarget({ key: FontSize.key, type: 'dropdown' }, menu);
 		} else if (disableInput && !showIncDec) {
 			this.replaceButton = dom.utils.createElement(
 				'button',
-				{ class: 'se-btn se-tooltip se-btn-select se-btn-tool-font-size', type: 'button', 'data-command': FontSize.key, 'data-type': 'dropdown' },
+				{
+					class: 'se-btn se-tooltip se-btn-select se-btn-tool-font-size',
+					type: 'button',
+					'data-command': FontSize.key,
+					'data-type': 'dropdown',
+				},
 				`<span class="se-txt __se__font_size">${this.$.lang.fontSize}</span>${this.$.icons.arrow_down}<span class="se-tooltip-inner"><span class="se-tooltip-text">${this.$.lang.fontSize}</span></span>`,
 			);
 			this.$.menu.initDropdownTarget({ key: FontSize.key, type: 'dropdown' }, menu);
@@ -268,7 +292,9 @@ class FontSize extends PluginInput {
 			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) + ';' });
+			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;
@@ -347,7 +373,8 @@ class FontSize extends PluginInput {
 				value: this.sizeUnit ? 0 : '',
 			};
 
-		const size = typeof target === 'string' ? target : dom.check.isInputElement(target) ? target.value : target.textContent;
+		const size =
+			typeof target === 'string' ? target : dom.check.isInputElement(target) ? target.value : target.textContent;
 		const splitValue = this.sizeUnit ? size.split(/(\d+)/) : [size, ''];
 
 		let unit = (splitValue.pop() || '').trim().toLowerCase();
@@ -375,7 +402,9 @@ class FontSize extends PluginInput {
 		if (dom.check.isInputElement(target)) {
 			return (target.value = String(value));
 		} else {
-			return (target.textContent = String(this.sizeUnit ? value : this.unitMap.text.list.find((v) => v.size === value)?.title || value));
+			return (target.textContent = String(
+				this.sizeUnit ? value : this.unitMap.text.list.find((v) => v.size === value)?.title || value,
+			));
 		}
 	}
 }

package/src/plugins/input/pageNavigator.js

@@ -67,7 +67,13 @@ class PageNavigator extends PluginInput {
  * @returns {HTMLInputElement}
  */
 function CreateInner() {
-	return /** @type {HTMLInputElement} */ (dom.utils.createElement('input', { type: 'number', class: 'se-not-arrow-text', placeholder: '1', value: '1', min: '1' }, null));
+	return /** @type {HTMLInputElement} */ (
+		dom.utils.createElement(
+			'input',
+			{ type: 'number', class: 'se-not-arrow-text', placeholder: '1', value: '1', min: '1' },
+			null,
+		)
+	);
 }
 
 export default PageNavigator;

package/src/plugins/modal/audio.js

@@ -76,16 +76,30 @@ class Audio_ extends PluginModal {
 
 		// define plugin options
 		this.pluginOptions = {
-			defaultWidth: !pluginOptions.defaultWidth ? '' : numbers.is(pluginOptions.defaultWidth) ? pluginOptions.defaultWidth + 'px' : pluginOptions.defaultWidth,
-			defaultHeight: !pluginOptions.defaultHeight ? '' : numbers.is(pluginOptions.defaultHeight) ? pluginOptions.defaultHeight + 'px' : pluginOptions.defaultHeight,
+			defaultWidth: !pluginOptions.defaultWidth
+				? ''
+				: numbers.is(pluginOptions.defaultWidth)
+					? pluginOptions.defaultWidth + 'px'
+					: pluginOptions.defaultWidth,
+			defaultHeight: !pluginOptions.defaultHeight
+				? ''
+				: numbers.is(pluginOptions.defaultHeight)
+					? pluginOptions.defaultHeight + 'px'
+					: pluginOptions.defaultHeight,
 			createFileInput: !!pluginOptions.createFileInput,
-			createUrlInput: pluginOptions.createUrlInput === undefined || !pluginOptions.createFileInput ? true : pluginOptions.createUrlInput,
+			createUrlInput:
+				pluginOptions.createUrlInput === undefined || !pluginOptions.createFileInput
+					? true
+					: pluginOptions.createUrlInput,
 			uploadUrl: typeof pluginOptions.uploadUrl === 'string' ? pluginOptions.uploadUrl : null,
 			uploadHeaders: pluginOptions.uploadHeaders || null,
 			uploadSizeLimit: numbers.get(pluginOptions.uploadSizeLimit, 0),
 			uploadSingleSizeLimit: numbers.get(pluginOptions.uploadSingleSizeLimit, 0),
 			allowMultiple: !!pluginOptions.allowMultiple,
-			acceptedFormats: typeof pluginOptions.acceptedFormats !== 'string' || pluginOptions.acceptedFormats.trim() === '*' ? 'audio/*' : pluginOptions.acceptedFormats.trim() || 'audio/*',
+			acceptedFormats:
+				typeof pluginOptions.acceptedFormats !== 'string' || pluginOptions.acceptedFormats.trim() === '*'
+					? 'audio/*'
+					: pluginOptions.acceptedFormats.trim() || 'audio/*',
 			audioTagAttributes: pluginOptions.audioTagAttributes || null,
 			insertBehavior: pluginOptions.insertBehavior,
 		};
@@ -124,7 +138,11 @@ class Audio_ extends PluginModal {
 
 		// init
 		if (this.audioInputFile) {
-			this.$.eventManager.addEvent(modalEl.querySelector('.se-modal-files-edge-button'), 'click', this.#RemoveSelectedFiles.bind(this, this.audioUrlFile, this.preview));
+			this.$.eventManager.addEvent(
+				modalEl.querySelector('.se-modal-files-edge-button'),
+				'click',
+				this.#RemoveSelectedFiles.bind(this, this.audioUrlFile, this.preview),
+			);
 			if (this.audioUrlFile) {
 				this.$.eventManager.addEvent(this.audioInputFile, 'change', this.#FileInputChange.bind(this));
 			}
@@ -177,12 +195,15 @@ class Audio_ extends PluginModal {
 	 */
 	modalOn(isUpdate) {
 		if (!isUpdate) {
-			if (this.audioInputFile && this.pluginOptions.allowMultiple) this.audioInputFile.setAttribute('multiple', 'multiple');
+			if (this.audioInputFile && this.pluginOptions.allowMultiple)
+				this.audioInputFile.setAttribute('multiple', 'multiple');
 		} else if (this.#element) {
 			this.#urlValue = this.preview.textContent = this.audioUrlFile.value = this.#element.src;
-			if (this.audioInputFile && this.pluginOptions.allowMultiple) this.audioInputFile.removeAttribute('multiple');
+			if (this.audioInputFile && this.pluginOptions.allowMultiple)
+				this.audioInputFile.removeAttribute('multiple');
 		} else {
-			if (this.audioInputFile && this.pluginOptions.allowMultiple) this.audioInputFile.removeAttribute('multiple');
+			if (this.audioInputFile && this.pluginOptions.allowMultiple)
+				this.audioInputFile.removeAttribute('multiple');
 		}
 	}
 
@@ -220,7 +241,8 @@ class Audio_ extends PluginModal {
 	controllerAction(target) {
 		switch (target.getAttribute('data-command')) {
 			case 'update':
-				if (this.audioUrlFile) this.#urlValue = this.preview.textContent = this.audioUrlFile.value = this.#element.src;
+				if (this.audioUrlFile)
+					this.#urlValue = this.preview.textContent = this.audioUrlFile.value = this.#element.src;
 				this.open();
 				break;
 			case 'copy': {
@@ -239,7 +261,13 @@ class Audio_ extends PluginModal {
 	 * @type {SunEditor.Hook.Component.Select}
 	 */
 	componentSelect(target) {
-		this.figure.open(target, { nonResizing: true, nonSizeInfo: true, nonBorder: true, figureTarget: true, infoOnly: false });
+		this.figure.open(target, {
+			nonResizing: true,
+			nonSizeInfo: true,
+			nonBorder: true,
+			figureTarget: true,
+			infoOnly: false,
+		});
 		this.#ready(target);
 	}
 
@@ -253,7 +281,11 @@ class Audio_ extends PluginModal {
 		const container = figure.container || element;
 		const focusEl = container.previousElementSibling || container.nextElementSibling;
 
-		const message = await this.$.eventManager.triggerEvent('onAudioDeleteBefore', { element: element, container: figure, url: element.getAttribute('src') });
+		const message = await this.$.eventManager.triggerEvent('onAudioDeleteBefore', {
+			element: element,
+			container: figure,
+			url: element.getAttribute('src'),
+		});
 		if (message === false) return;
 
 		const emptyDiv = container.parentNode;
@@ -293,7 +325,8 @@ class Audio_ extends PluginModal {
 
 			s = f.size;
 			if (singleSizeLimit > 0 && s > singleSizeLimit) {
-				const err = '[SUNEDITOR.audioUpload.fail] Size of uploadable single file: ' + singleSizeLimit / 1000 + 'KB';
+				const err =
+					'[SUNEDITOR.audioUpload.fail] Size of uploadable single file: ' + singleSizeLimit / 1000 + 'KB';
 				const message = await this.$.eventManager.triggerEvent('onAudioUploadError', {
 					error: err,
 					limitSize: singleSizeLimit,
@@ -313,7 +346,12 @@ class Audio_ extends PluginModal {
 		const limitSize = this.pluginOptions.uploadSizeLimit;
 		if (limitSize > 0 && fileSize + this.fileManager.getSize() > limitSize) {
 			const err = '[SUNEDITOR.audioUpload.fail] Size of uploadable total audios: ' + limitSize / 1000 + 'KB';
-			const message = await this.$.eventManager.triggerEvent('onAudioUploadError', { error: err, limitSize, currentSize: this.fileManager.getSize(), uploadSize: fileSize });
+			const message = await this.$.eventManager.triggerEvent('onAudioUploadError', {
+				error: err,
+				limitSize,
+				currentSize: this.fileManager.getSize(),
+				uploadSize: fileSize,
+			});
 
 			this.$.ui.alertOpen(message === NO_EVENT ? err : message || err, 'error');
 
@@ -396,7 +434,12 @@ class Audio_ extends PluginModal {
 			this.fileManager.setFileData(element, file);
 			element.src = src;
 			const figure = Figure.CreateContainer(element, 'se-flex-component');
-			if (!this.$.component.insert(figure.container, { scrollTo: isLast ? true : false, insertBehavior: isLast ? this.pluginOptions.insertBehavior : 'line' })) {
+			if (
+				!this.$.component.insert(figure.container, {
+					scrollTo: isLast ? true : false,
+					insertBehavior: isLast ? this.pluginOptions.insertBehavior : 'line',
+				})
+			) {
 				if (isLast) this.$.focusManager.focus();
 				return;
 			}
@@ -458,7 +501,9 @@ class Audio_ extends PluginModal {
 		const w = this.#defaultWidth;
 		const h = this.#defaultHeight;
 		/** @type {HTMLAudioElement} */
-		const oAudio = dom.utils.createElement('AUDIO', { style: (w ? 'width:' + w + '; ' : '') + (h ? 'height:' + h + ';' : '') });
+		const oAudio = dom.utils.createElement('AUDIO', {
+			style: (w ? 'width:' + w + '; ' : '') + (h ? 'height:' + h + ';' : ''),
+		});
 		this.#setTagAttrs(oAudio);
 		return oAudio;
 	}
@@ -489,7 +534,13 @@ class Audio_ extends PluginModal {
 		if (!files) return;
 
 		const uploadFiles = this.modal.isUpdate ? [files[0]] : files;
-		this.fileManager.upload(this.pluginOptions.uploadUrl, this.pluginOptions.uploadHeaders, uploadFiles, this.#UploadCallBack.bind(this, info), this.#error.bind(this));
+		this.fileManager.upload(
+			this.pluginOptions.uploadUrl,
+			this.pluginOptions.uploadHeaders,
+			uploadFiles,
+			this.#UploadCallBack.bind(this, info),
+			this.#error.bind(this),
+		);
 	}
 
 	/**
@@ -555,7 +606,10 @@ class Audio_ extends PluginModal {
 	 * @param {HTMLInputElement} target - The target element.
 	 */
 	#SetUrlInput(target) {
-		this.#urlValue = this.preview.textContent = this.audioUrlFile.value = target.getAttribute('data-command') || target.src;
+		this.#urlValue =
+			this.preview.textContent =
+			this.audioUrlFile.value =
+				target.getAttribute('data-command') || target.src;
 		this.audioUrlFile.focus();
 	}