suneditor 3.1.4 → 3.2.0

package/src/plugins/dropdown/template.js

@@ -1,5 +1,4 @@
 import { PluginDropdown } from '../../interfaces';
-import { dom } from '../../helper';
 
 /**
  * @typedef {Object} TemplatePluginOptions
@@ -32,11 +31,8 @@ class Template extends PluginDropdown {
 		this.selectedIndex = -1;
 		this.items = pluginOptions.items;
 
-		// create HTML
-		const menu = CreateHTML(this.items);
-
-		// init
-		this.$.menu.initDropdownTarget(Template, menu);
+		// create menu from items
+		this.$.menu.initDropdownTarget(Template, CreateItems(this.items));
 	}
 
 	/**
@@ -60,33 +56,21 @@ class Template extends PluginDropdown {
 
 /**
  * @param {Array<{name: string, html: string}>} templateList - Template items
- * @returns {HTMLElement}
+ * @returns {Array<import('../../core/logic/panel/menu').DropdownItem>}
  */
-function CreateHTML(templateList) {
+function CreateItems(templateList) {
 	if (!templateList || templateList.length === 0) {
-		console.warn('[SUNEDITOR.plugins.template.warn] To use the "template" plugin, please define the "templates" option.');
-	}
-
-	let list = '<div class="se-dropdown se-list-inner"><ul class="se-list-basic">';
-	for (let i = 0, len = (templateList || []).length, t; i < len; i++) {
-		t = templateList[i];
-		list += /*html*/ `
-		<li>
-			<button 
-				type="button" 
-				class="se-btn se-btn-list"
-				data-command="template"
-				data-value="${i}" 
-				title="${t.name}" 
-				aria-label="${t.name}"
-			>
-				${t.name}
-			</button>
-		</li>`;
+		console.warn(
+			'[SUNEDITOR.plugins.template.warn] To use the "template" plugin, please define the "templates" option.',
+		);
 	}
-	list += '</ul></div>';
 
-	return dom.utils.createElement('DIV', { class: 'se-list-layer' }, list);
+	return (templateList || []).map((t, i) => ({
+		command: 'template',
+		value: String(i),
+		title: t.name,
+		innerHTML: t.name,
+	}));
 }
 
 export default Template;

package/src/plugins/dropdown/textStyle.js

@@ -29,14 +29,13 @@ class TextStyle extends PluginDropdown {
 		this.title = this.$.lang.textStyle;
 		this.icon = 'text_style';
 
-		// create HTML
-		const menu = CreateHTML(this.$, pluginOptions.items);
+		// create menu from items
+		const menu = this.$.menu.initDropdownTarget(TextStyle, CreateItems(this.$, pluginOptions.items), {
+			className: 'se-list-format',
+		});
 
 		// members
 		this.styleList = menu.querySelectorAll('li button');
-
-		// init
-		this.$.menu.initDropdownTarget(TextStyle, menu);
 	}
 
 	/**
@@ -58,7 +57,11 @@ class TextStyle extends PluginDropdown {
 				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) ? dom.utils.hasClass(node, value.replace(/^\./, '')) : /** @type {HTMLElement} */ (node).style[value]) {
+						if (
+							/^\./.test(value)
+								? dom.utils.hasClass(node, value.replace(/^\./, ''))
+								: /** @type {HTMLElement} */ (node).style[value]
+						) {
 							active = true;
 							break;
 						}
@@ -98,9 +101,9 @@ class TextStyle extends PluginDropdown {
 /**
  * @param {SunEditor.Deps} $ - Kernel dependencies
  * @param {Array<string|{name: string, class: string, tag?: string}>} [items] - Text style items
- * @returns {HTMLElement}
+ * @returns {Array<import('../../core/logic/panel/menu').DropdownItem>}
  */
-function CreateHTML({ lang }, items) {
+function CreateItems({ lang }, items) {
 	const defaultList = {
 		code: {
 			name: lang.menu_code,
@@ -114,13 +117,10 @@ function CreateHTML({ lang }, items) {
 		},
 	};
 	const styleList = items || Object.keys(defaultList);
+	const result = [];
 
-	let list = '<div class="se-list-inner"><ul class="se-list-basic">';
-	for (let i = 0, len = styleList.length, t, tag, name, attrs, command, value; i < len; i++) {
+	for (let i = 0, len = styleList.length, t, tag, name, value; i < len; i++) {
 		t = styleList[i];
-		attrs = '';
-		value = '';
-		command = [];
 
 		if (typeof t === 'string') {
 			const cssText = defaultList[t.toLowerCase()];
@@ -130,30 +130,17 @@ function CreateHTML({ lang }, items) {
 
 		name = t.name;
 		tag = t.tag || 'span';
-
-		attrs += ` class="${t.class}"`;
-		value += `.${t.class.trim().replace(/\s+/g, ',.')}`;
-		command.push('class');
-
-		value = value.replace(/,$/, '');
-
-		list += `
-		<li>
-			<button 
-				type="button" 
-				class="se-btn se-btn-list" 
-				data-command="${tag}" 
-				data-value="${value}" 
-				title="${name}" 
-				aria-label="${name}"
-			>
-				<${tag}${attrs}>${name}</${tag}>
-			</button>
-		</li>`;
+		value = `.${t.class.trim().replace(/\s+/g, ',.')}`.replace(/,$/, '');
+
+		result.push({
+			command: tag,
+			value,
+			title: name,
+			innerHTML: `<${tag} class="${t.class}">${name}</${tag}>`,
+		});
 	}
-	list += '</ul></div>';
 
-	return dom.utils.createElement('DIV', { class: 'se-dropdown se-list-layer se-list-format' }, list);
+	return result;
 }
 
 export default TextStyle;

package/src/plugins/field/autocomplete.js

@@ -128,8 +128,6 @@ class Autocomplete extends PluginField {
 	 */
 	constructor(kernel, pluginOptions) {
 		super(kernel);
-		this.title = this.$.lang.autocomplete;
-		this.icon = 'autocomplete';
 
 		// global defaults
 		const limitSize = pluginOptions.limitSize || 5;
@@ -164,7 +162,11 @@ class Autocomplete extends PluginField {
 
 		// 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.$,
@@ -263,7 +265,9 @@ class Autocomplete extends PluginField {
 
 		if (!response) {
 			if (ctx.directData) {
-				response = ctx.directData.filter((item) => item.key.toLowerCase().startsWith(lowerValue)).slice(0, limit);
+				response = ctx.directData
+					.filter((item) => item.key.toLowerCase().startsWith(lowerValue))
+					.slice(0, limit);
 			} else {
 				const xmlHttp = await ctx.apiManager.asyncCall({ method: 'GET', url: this.#createUrl(ctx, value) });
 				const json = JSON.parse(xmlHttp.responseText);

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;