suneditor 3.0.5 → 3.1.0

package/src/plugins/field/autocomplete.js

@@ -0,0 +1,346 @@
+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;
+
+/**
+ * @description Default render function for dropdown items.
+ * @param {{key: string, name?: string}} item - The data item.
+ * @returns {string} HTML string for the dropdown item.
+ */
+function defaultRenderItem(item) {
+	return `<div class="se-autocomplete-item"><span>${item.key}</span>${item.name ? `<span>${item.name}</span>` : ''}</div>`;
+}
+
+/**
+ * @description Default select handler. Creates a span element with the trigger text + key.
+ * @param {{key: string}} item - The selected data item.
+ * @param {string} triggerText - The trigger character.
+ * @returns {{tag: string, attrs: Object, text: string}} Descriptor for element creation.
+ */
+function defaultOnSelect(item, triggerText) {
+	return {
+		tag: 'span',
+		attrs: { 'data-se-autocomplete': triggerText + item.key },
+		text: triggerText + item.key,
+	};
+}
+
+/**
+ * @typedef {Object} AutocompleteTriggerConfig
+ * @property {Array<{key: string, [x: string]: any}>} [data] - Static data array. Each item must have a `key` field. Mutually exclusive with `apiUrl`.
+ * ```js
+ * // data
+ * [{ key: 'john', name: 'John Doe', url: '/users/john' }]
+ * ```
+ * @property {string} [apiUrl] - API endpoint URL. Supports `{key}` and `{limitSize}` placeholders. Mutually exclusive with `data`.
+ * @property {Object<string, string>} [apiHeaders] - HTTP headers for the API request.
+ * @property {function(Object, XMLHttpRequest): Array<{key: string}>} [transformResponse] - Transforms parsed JSON response into an array of data items.
+ * @property {number} [limitSize] - Override global `limitSize` for this trigger.
+ * @property {number} [searchStartLength] - Override global `searchStartLength` for this trigger.
+ * @property {boolean} [useCachingData] - Override global `useCachingData` for this trigger.
+ * @property {boolean} [useCachingFieldData] - Override global `useCachingFieldData` for this trigger.
+ * @property {function({key: string, [x: string]: any}, string): string} [renderItem] - Custom dropdown item renderer. Receives `(item, triggerText)`, returns HTML string.
+ * @property {function({key: string, [x: string]: any}, string): (string|Element|{tag: string, attrs?: Object, text?: string})} [onSelect] - Custom selection handler. Returns:
+ *   - `string`: inserted as text node
+ *   - `Element`: inserted as-is
+ *   - `{tag, attrs, text}`: creates element via `dom.utils.createElement`
+ */
+
+/**
+ * @typedef {Object} AutocompletePluginOptions
+ * @property {number} [delayTime=120] - Debounce delay in ms before processing input.
+ * @property {number} [limitSize=5] - Maximum number of items to display in the dropdown.
+ * @property {number} [searchStartLength=0] - Minimum input length before triggering search.
+ * @property {boolean} [useCachingData=true] - Whether to cache query responses per trigger.
+ * @property {boolean} [useCachingFieldData=true] - Whether to cache selected items for priority display.
+ * @property {Object<string, AutocompleteTriggerConfig>} triggers - Per-trigger configurations keyed by trigger character.
+ * ```js
+ * // triggers
+ * {
+ *   '@': { data: [...], renderItem: (item) => `...` },
+ *   '#': { apiUrl: '/api/tags?q={key}' }
+ * }
+ * ```
+ */
+
+/**
+ * @class
+ * @description Autocomplete Plugin
+ * - A generic autocomplete plugin supporting multiple trigger characters.
+ * - Each trigger can have its own data source, rendering, and selection behavior.
+ * - Supports static data arrays and API-based data fetching.
+ * - Uses per-trigger caching for optimized performance.
+ */
+class Autocomplete extends PluginField {
+	static key = 'autocomplete';
+	static className = '';
+
+	#lastTriggerPos = 0;
+	#anchorOffset = 0;
+	#anchorNode = null;
+	#activeTrigger = null;
+
+	/**
+	 * @constructor
+	 * @param {SunEditor.Kernel} kernel - The Kernel instance
+	 * @param {AutocompletePluginOptions} pluginOptions
+	 */
+	constructor(kernel, pluginOptions) {
+		super(kernel);
+		this.title = this.$.lang.autocomplete;
+		this.icon = 'autocomplete';
+
+		// global defaults
+		const limitSize = pluginOptions.limitSize || 5;
+		const searchStartLength = pluginOptions.searchStartLength || 0;
+		const delayTime = typeof pluginOptions.delayTime === 'number' ? pluginOptions.delayTime : 120;
+		const useCachingData = pluginOptions.useCachingData ?? true;
+		const useCachingFieldData = pluginOptions.useCachingFieldData ?? true;
+
+		// build trigger contexts
+		this.triggerContexts = new Map();
+		const triggers = pluginOptions.triggers || {};
+		for (const [triggerChar, config] of Object.entries(triggers)) {
+			const triggerLimit = config.limitSize ?? limitSize;
+			this.triggerContexts.set(triggerChar, {
+				trigger: triggerChar,
+				limitSize: triggerLimit,
+				searchStartLength: config.searchStartLength ?? searchStartLength,
+				directData: config.data || null,
+				apiUrl: config.apiUrl?.replace(/\s/g, '').replace(/\{limitSize\}/i, String(triggerLimit)) || '',
+				apiHeaders: config.apiHeaders || null,
+				transformResponse: config.transformResponse || null,
+				renderItem: config.renderItem || defaultRenderItem,
+				onSelect: config.onSelect || defaultOnSelect,
+				apiManager: config.apiUrl ? new ApiManager(this, this.$, { headers: config.apiHeaders }) : null,
+				cachingData: (config.useCachingData ?? useCachingData) ? new Map() : null,
+				cachingFieldData: (config.useCachingFieldData ?? useCachingFieldData) ? [] : null,
+			});
+		}
+
+		// sort triggers by length descending (longest match first)
+		this.sortedTriggers = [...this.triggerContexts.keys()].sort((a, b) => b.length - a.length);
+
+		// controller
+		const controllerEl = CreateHTML_controller();
+		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.#cancelActiveApi();
+					this.selectMenu.close();
+				},
+			},
+			null,
+		);
+		this.selectMenu.on(controllerEl.firstElementChild, this.#onSelectItem.bind(this));
+
+		// onInput debounce
+		this.onInput = debounce(this.onInput.bind(this), delayTime);
+	}
+
+	/**
+	 * @description Cancels the active trigger's in-flight API request.
+	 */
+	#cancelActiveApi() {
+		if (this.#activeTrigger?.apiManager) {
+			this.#activeTrigger.apiManager.cancel();
+		}
+	}
+
+	/**
+	 * @hook Editor.EventManager
+	 * @type {SunEditor.Hook.Event.OnInputAsync}
+	 */
+	async onInput() {
+		this.#cancelActiveApi();
+
+		const sel = this.$.selection.get();
+		if (!sel.rangeCount) {
+			this.selectMenu.close();
+			return;
+		}
+
+		const anchorNode = sel.anchorNode;
+		const anchorOffset = sel.anchorOffset;
+		const textBeforeCursor = anchorNode.textContent.substring(0, anchorOffset);
+
+		// find matching trigger (longest first)
+		for (const trigger of this.sortedTriggers) {
+			const lastPos = textBeforeCursor.lastIndexOf(trigger);
+			if (lastPos === -1) continue;
+
+			const query = textBeforeCursor.substring(lastPos + trigger.length, anchorOffset);
+			const beforeText = textBeforeCursor[lastPos - 1]?.trim();
+
+			if (!/\s/.test(query) && (!beforeText || dom.check.isZeroWidth(beforeText))) {
+				const ctx = this.triggerContexts.get(trigger);
+				if (query.length < ctx.searchStartLength) return;
+
+				const anchorParent = anchorNode.parentNode;
+				if (dom.check.isAnchor(anchorParent) && !anchorParent.getAttribute('data-se-autocomplete')) {
+					return;
+				}
+
+				try {
+					this.#activeTrigger = ctx;
+					await this.#createList(ctx, query, anchorNode);
+					this.#lastTriggerPos = lastPos;
+					this.#anchorNode = anchorNode;
+					this.#anchorOffset = anchorOffset;
+					return;
+				} catch (error) {
+					console.warn('[SUNEDITOR.autocomplete.api] ', error);
+				}
+			}
+
+			continue;
+		}
+
+		this.selectMenu.close();
+	}
+
+	/**
+	 * @description Generates the autocomplete dropdown list.
+	 * @param {Object} ctx - The trigger context.
+	 * @param {string} value - The query text after the trigger.
+	 * @param {Node} targetNode - The node where the trigger was detected.
+	 * @returns {Promise<boolean>}
+	 */
+	async #createList(ctx, value, targetNode) {
+		const limit = ctx.limitSize;
+		const lowerValue = value.toLowerCase();
+		let response = null;
+
+		if (ctx.cachingData) {
+			response = ctx.cachingData.get(value);
+		}
+
+		if (!response) {
+			if (ctx.directData) {
+				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);
+				response = ctx.transformResponse ? ctx.transformResponse(json, xmlHttp) : json;
+			}
+		}
+
+		if (ctx.cachingFieldData) {
+			const uniqueKeys = new Set();
+			response = ctx.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) {
+			this.selectMenu.close();
+			return false;
+		}
+
+		const list = [];
+		const menus = [];
+		for (let i = 0, len = response.length, v; i < len; i++) {
+			v = response[i];
+			list.push(v);
+			menus.push(ctx.renderItem(v, ctx.trigger));
+		}
+
+		// controller open
+		this.controller.open(targetNode, null, { isWWTarget: true, initMethod: null, addOffset: null });
+		// select menu create
+		this.selectMenu.create(list, menus);
+		this.selectMenu.open();
+		this.selectMenu.setItem(0);
+		if (ctx.cachingData) ctx.cachingData.set(value, list);
+		return true;
+	}
+
+	/**
+	 * @description Constructs the API request URL with the query value.
+	 * @param {Object} ctx - The trigger context.
+	 * @param {string} key - The query text.
+	 * @returns {string}
+	 */
+	#createUrl(ctx, key) {
+		return ctx.apiUrl.replace(/\{key\}/i, key);
+	}
+
+	/**
+	 * @description Handles item selection from the dropdown.
+	 * @param {{key: string, [x: string]: any}} item - The selected data item.
+	 * @returns {boolean}
+	 */
+	#onSelectItem(item) {
+		if (!item) return false;
+
+		const ctx = this.#activeTrigger;
+		if (!ctx) return false;
+
+		const result = ctx.onSelect(item, ctx.trigger);
+		let insertedNode = null;
+
+		const anchorParent = this.#anchorNode.parentNode;
+
+		if (typeof result === 'string') {
+			// plain text insertion
+			this.$.selection.setRange(this.#anchorNode, this.#lastTriggerPos, this.#anchorNode, this.#anchorOffset);
+			insertedNode = dom.utils.createTextNode(result);
+			if (!this.$.html.insertNode(insertedNode, { afterNode: null, skipCharCount: false })) return false;
+		} else {
+			// element insertion (descriptor or DOM element)
+			let element;
+			if (result?.nodeType) {
+				element = result;
+			} else if (result?.tag) {
+				element = dom.utils.createElement(result.tag.toUpperCase(), result.attrs || {}, result.text || '');
+			} else {
+				return false;
+			}
+
+			if (anchorParent.getAttribute?.('data-se-autocomplete')) {
+				// update existing autocomplete element in-place
+				for (const attr of [...anchorParent.attributes]) anchorParent.removeAttribute(attr.name);
+				for (const attr of [...element.attributes]) anchorParent.setAttribute(attr.name, attr.value);
+				anchorParent.textContent = element.textContent;
+				insertedNode = anchorParent;
+			} else {
+				this.$.selection.setRange(this.#anchorNode, this.#lastTriggerPos, this.#anchorNode, this.#anchorOffset);
+				if (!this.$.html.insertNode(element, { afterNode: null, skipCharCount: false })) return false;
+				insertedNode = element;
+			}
+		}
+
+		this.selectMenu.close();
+
+		const space = dom.utils.createTextNode('\u00A0');
+		insertedNode.parentNode.insertBefore(space, insertedNode.nextSibling);
+		this.$.selection.setRange(space, 1, space, 1);
+
+		if (ctx.cachingFieldData && !ctx.cachingFieldData.some((data) => data.key === item.key)) {
+			ctx.cachingFieldData.push(item);
+		}
+	}
+}
+
+/**
+ * @returns {HTMLElement}
+ */
+function CreateHTML_controller() {
+	return dom.utils.createElement('DIV', { class: 'se-controller se-empty-controller' }, '<div></div>');
+}
+
+export default Autocomplete;

package/src/plugins/index.js

@@ -7,7 +7,7 @@ import list_bulleted from './command/list_bulleted';
 import list_numbered from './command/list_numbered';
 
 // field
-import mention from './field/mention';
+import autocomplete from './field/autocomplete';
 
 // dropdown
 import align from './dropdown/align';
@@ -54,7 +54,7 @@ export {
 	fileUpload,
 	list_bulleted,
 	list_numbered,
-	mention,
+	autocomplete,
 	align,
 	font,
 	fontColor,
@@ -91,7 +91,7 @@ export default {
 	fileUpload,
 	list_bulleted,
 	list_numbered,
-	mention,
+	autocomplete,
 	align,
 	font,
 	fontColor,

package/src/plugins/modal/audio.js

@@ -13,6 +13,18 @@ const { NO_EVENT, ON_OVER_COMPONENT } = env;
  * @property {boolean} [createUrlInput] - Whether to create a URL input element.
  * - Defaults to `true`. Always `true` when `createFileInput` is `false`.
  * @property {string} [uploadUrl] - The URL to which files will be uploaded.
+ * - The server must return:
+ * ```js
+ * {
+ *   "result": [
+ *     {
+ *       "url": "https://example.com/audio.mp3",
+ *       "name": "audio.mp3",
+ *       "size": 3145728
+ *     }
+ *   ]
+ * }
+ * ```
  * @property {Object<string, string>} [uploadHeaders] - Headers to include in the file upload request.
  * @property {number} [uploadSizeLimit] - The total upload size limit in bytes.
  * @property {number} [uploadSingleSizeLimit] - The single file size limit in bytes.

package/src/plugins/modal/embed.js

@@ -11,6 +11,18 @@ const { _w, NO_EVENT } = env;
  * @property {string} [defaultHeight] - The default height of the embed element (numeric value or with unit).
  * @property {boolean} [percentageOnlySize=false] - Whether to allow only percentage-based sizing.
  * @property {string} [uploadUrl] - The URL for file uploads.
+ * - The server must return:
+ * ```js
+ * {
+ *   "result": [
+ *     {
+ *       "url": "https://example.com/embed.html",
+ *       "name": "embed.html",
+ *       "size": 2048
+ *     }
+ *   ]
+ * }
+ * ```
  * @property {Object<string, string>} [uploadHeaders] - Headers to include in file upload requests.
  * @property {number} [uploadSizeLimit] - The total file upload size limit in bytes.
  * @property {number} [uploadSingleSizeLimit] - The single file upload size limit in bytes.

package/src/plugins/modal/image/index.js

@@ -22,6 +22,18 @@ const { NO_EVENT } = env;
  * @property {boolean} [createUrlInput] - Whether to create a URL input element for image insertion.
  * - Defaults to `true`. Always `true` when `createFileInput` is `false`.
  * @property {string} [uploadUrl] - The URL endpoint for image file uploads.
+ * - The server must return:
+ * ```js
+ * {
+ *   "result": [
+ *     {
+ *       "url": "https://example.com/image.jpg",
+ *       "name": "image.jpg",
+ *       "size": 123456
+ *     }
+ *   ]
+ * }
+ * ```
  * @property {Object<string, string>} [uploadHeaders] - Additional headers to include in the file upload request.
  * ```js
  * { uploadUrl: '/api/upload/image', uploadHeaders: { Authorization: 'Bearer token' } }

package/src/plugins/modal/link.js

@@ -6,6 +6,18 @@ import { dom, numbers } from '../../helper';
 /**
  * @typedef {Object} LinkOptions
  * @property {string} [uploadUrl] - The URL endpoint for file uploads.
+ * - The server must return:
+ * ```js
+ * {
+ *   "result": [
+ *     {
+ *       "url": "https://example.com/file.pdf",
+ *       "name": "file.pdf",
+ *       "size": 1048576
+ *     }
+ *   ]
+ * }
+ * ```
  * @property {Object<string, string>} [uploadHeaders] - Additional headers for file upload requests.
  * @property {number} [uploadSizeLimit] - The total file upload size limit in bytes.
  * @property {number} [uploadSingleSizeLimit] - The single file upload size limit in bytes.

package/src/plugins/modal/video/index.js

@@ -19,6 +19,18 @@ import { CreateHTML_modal } from './render/video.html';
  * @property {boolean} [createUrlInput] - Whether to create a URL input element for video embedding.
  * - Defaults to `true`. Always `true` when `createFileInput` is `false`.
  * @property {string} [uploadUrl] - The URL endpoint for video file uploads.
+ * - The server must return:
+ * ```js
+ * {
+ *   "result": [
+ *     {
+ *       "url": "https://example.com/video.mp4",
+ *       "name": "video.mp4",
+ *       "size": 5242880
+ *     }
+ *   ]
+ * }
+ * ```
  * @property {Object<string, string>} [uploadHeaders] - Additional headers to include in the video upload request.
  * @property {number} [uploadSizeLimit] - The total upload size limit for videos in bytes.
  * @property {number} [uploadSingleSizeLimit] - The single file upload size limit for videos in bytes.

package/src/typedef.js

@@ -268,7 +268,7 @@
  * @typedef {"bold"|"underline"|"italic"|"strike"|"subscript"|"superscript"|"removeFormat"|"copyFormat"|"indent"|"outdent"|"fullScreen"|"showBlocks"|"codeView"|"markdownView"|"undo"|"redo"|"preview"|"print"|"copy"|"dir"|"dir_ltr"|"dir_rtl"|"finder"|"save"|"newDocument"|"selectAll"|"pageBreak"|"pageUp"|"pageDown"|"pageNavigator"} SunEditor.UI.ButtonCommand
  *
  * Plugin buttons available in the toolbar
- * @typedef {"blockquote"|"codeBlock"|"exportPDF"|"fileUpload"|"list_bulleted"|"list_numbered"|"mention"|"align"|"font"|"fontColor"|"backgroundColor"|"list"|"table"|"blockStyle"|"hr"|"layout"|"lineHeight"|"template"|"paragraphStyle"|"textStyle"|"link"|"image"|"video"|"audio"|"embed"|"math"|"drawing"|"imageGallery"|"videoGallery"|"audioGallery"|"fileGallery"|"fileBrowser"|"fontSize"|"pageNavigator"|"anchor"} SunEditor.UI.ButtonPlugin
+ * @typedef {"blockquote"|"codeBlock"|"exportPDF"|"fileUpload"|"list_bulleted"|"list_numbered"|"autocomplete"|"align"|"font"|"fontColor"|"backgroundColor"|"list"|"table"|"blockStyle"|"hr"|"layout"|"lineHeight"|"template"|"paragraphStyle"|"textStyle"|"link"|"image"|"video"|"audio"|"embed"|"math"|"drawing"|"imageGallery"|"videoGallery"|"audioGallery"|"fileGallery"|"fileBrowser"|"fontSize"|"pageNavigator"|"anchor"} SunEditor.UI.ButtonPlugin
  *
  * Single button item in the toolbar (includes special controls and custom strings)
  * @typedef {SunEditor.UI.ButtonCommand|SunEditor.UI.ButtonPlugin|SunEditor.UI.ButtonSpecial|string} SunEditor.UI.ButtonItem

package/types/core/logic/shell/shortcuts.d.ts

@@ -54,7 +54,7 @@ export type ShortcutInfo = {
 	 */
 	r: Array<string>;
 	/**
-	 * - Whether the event was triggered by a text input (e.g., mention like
+	 * - Whether the event was triggered by a text input (e.g., autocomplete like
 	 */
 	textTrigger: string;
 };
@@ -73,7 +73,7 @@ export type ShortcutInfo = {
  * @property {string} type - Plugin's type. (`command`, `dropdown`, `modal`, `browser`, `input`, `field`, `popup`).
  * @property {Node} button - The plugin command button.
  * @property {Array<string>} r - An array of key codes generated with the reverseButtons option, used to reverse the action for a specific key combination.
- * @property {string} textTrigger - Whether the event was triggered by a text input (e.g., mention like @ab).
+ * @property {string} textTrigger - Whether the event was triggered by a text input (e.g., autocomplete like @ab).
  */
 /**
  * @description Shortcuts class

package/types/core/schema/options.d.ts

@@ -525,6 +525,7 @@ export namespace DEFAULTS {
  * @property {import('../../plugins/dropdown/align.js').AlignPluginOptions} [align]
  * @property {import('../../plugins/modal/audio.js').AudioPluginOptions} [audio]
  * @property {import('../../plugins/browser/audioGallery.js').AudioGalleryPluginOptions} [audioGallery]
+ * @property {import('../../plugins/field/autocomplete.js').AutocompletePluginOptions} [autocomplete]
  * @property {import('../../plugins/dropdown/backgroundColor.js').BackgroundColorPluginOptions} [backgroundColor]
  * @property {import('../../plugins/dropdown/blockStyle.js').BlockStylePluginOptions} [blockStyle]
  * @property {import('../../plugins/command/codeBlock.js').CodeBlockPluginOptions} [codeBlock]
@@ -544,7 +545,6 @@ export namespace DEFAULTS {
  * @property {import('../../plugins/dropdown/lineHeight.js').LineHeightPluginOptions} [lineHeight]
  * @property {import('../../plugins/modal/link.js').LinkPluginOptions} [link]
  * @property {import('../../plugins/modal/math.js').MathPluginOptions} [math]
- * @property {import('../../plugins/field/mention.js').MentionPluginOptions} [mention]
  * @property {import('../../plugins/dropdown/paragraphStyle.js').ParagraphStylePluginOptions} [paragraphStyle]
  * @property {import('../../plugins/dropdown/table/index.js').TablePluginOptions} [table]
  * @property {import('../../plugins/dropdown/template.js').TemplatePluginOptions} [template]
@@ -1429,6 +1429,7 @@ export type EditorBaseOptions = {
 	align?: import('../../plugins/dropdown/align.js').AlignPluginOptions;
 	audio?: import('../../plugins/modal/audio.js').AudioPluginOptions;
 	audioGallery?: import('../../plugins/browser/audioGallery.js').AudioGalleryPluginOptions;
+	autocomplete?: import('../../plugins/field/autocomplete.js').AutocompletePluginOptions;
 	backgroundColor?: import('../../plugins/dropdown/backgroundColor.js').BackgroundColorPluginOptions;
 	blockStyle?: import('../../plugins/dropdown/blockStyle.js').BlockStylePluginOptions;
 	codeBlock?: import('../../plugins/command/codeBlock.js').CodeBlockPluginOptions;
@@ -1448,7 +1449,6 @@ export type EditorBaseOptions = {
 	lineHeight?: import('../../plugins/dropdown/lineHeight.js').LineHeightPluginOptions;
 	link?: import('../../plugins/modal/link.js').LinkPluginOptions;
 	math?: import('../../plugins/modal/math.js').MathPluginOptions;
-	mention?: import('../../plugins/field/mention.js').MentionPluginOptions;
 	paragraphStyle?: import('../../plugins/dropdown/paragraphStyle.js').ParagraphStylePluginOptions;
 	table?: import('../../plugins/dropdown/table/index.js').TablePluginOptions;
 	template?: import('../../plugins/dropdown/template.js').TemplatePluginOptions;

package/types/helper/index.d.ts

@@ -174,6 +174,9 @@ export const markdown: {
 	jsonToMarkdown: typeof import('./markdown').jsonToMarkdown;
 	markdownToHtml: typeof import('./markdown').markdownToHtml;
 };
+export const msOffice: {
+	cleanHTML: typeof import('./msOffice').cleanHTML;
+};
 declare namespace _default {
 	export { env };
 	export { unicode };
@@ -183,5 +186,6 @@ declare namespace _default {
 	export { keyCodeMap };
 	export { clipboard };
 	export { markdown };
+	export { msOffice };
 }
 export default _default;

package/types/helper/msOffice.d.ts

@@ -0,0 +1,11 @@
+import type {} from '../typedef';
+/**
+ * @description Converts MS Word/Excel/OneNote HTML clipboard data to clean, standards-compliant HTML.
+ * @param {string} html Raw HTML string from MS Office clipboard
+ * @returns {string} Cleaned HTML string
+ */
+export function cleanHTML(html: string): string;
+declare namespace _default {
+	export { cleanHTML };
+}
+export default _default;

package/types/interfaces/plugins.d.ts

@@ -92,7 +92,7 @@ export class PluginDropdownFree extends Base {
  * These plugins typically respond to input events in the wysiwyg area
  *
  * **Commonly used hooks:**
- * - `onInput()` - Responds to input events in the editor (See: `mention` plugin)
+ * - `onInput()` - Responds to input events in the editor (See: `autocomplete` plugin)
  * - Other event hooks can be used as needed (`onKeydown`, `onClick`, etc.)
  *
  * Child classes MAY optionally implement event hook methods

package/types/langs/_Lang.d.ts

@@ -118,7 +118,7 @@ export type _Lang = {
 	math_modal_title: string;
 	maxSize: string;
 	mediaGallery: string;
-	mention: string;
+	autocomplete: string;
 	menu_bordered: string;
 	menu_code: string;
 	menu_neon: string;

package/types/modules/contract/Browser.d.ts

@@ -84,6 +84,19 @@ export type BrowserParams = {
 	useSearch?: boolean;
 	/**
 	 * - File server search url. Optional. Can be overridden in browser.
+	 * - Requested as `searchUrl + '?keyword=' + keyword`. The server must return:
+	 * ```js
+	 * {
+	 * "result": [
+	 * {
+	 * "src": "https://example.com/file.jpg",
+	 * "name": "file.jpg",
+	 * "thumbnail": "https://example.com/file_thumb.jpg",
+	 * "tag": ["photo"]
+	 * }
+	 * ]
+	 * }
+	 * ```
 	 */
 	searchUrl?: string;
 	/**
@@ -113,6 +126,10 @@ export type BrowserParams = {
 	 * - Optional. Can be overridden in browser. Default: 4.
 	 */
 	columnSize?: number;
+	/**
+	 * - Initial folder expand depth. `1` expands the first level, `Infinity` expands all. Default: `1`.
+	 */
+	expand?: number;
 	/**
 	 * - Default thumbnail
 	 */
@@ -142,6 +159,19 @@ export type BrowserParams = {
  * @property {(target: Node) => void} selectorHandler - Function that actions when an item is clicked. Required. Can be overridden in browser.
  * @property {boolean} [useSearch] - Whether to use the search function. Optional. Default: `true`.
  * @property {string} [searchUrl] - File server search url. Optional. Can be overridden in browser.
+ * - Requested as `searchUrl + '?keyword=' + keyword`. The server must return:
+ * ```js
+ * {
+ *   "result": [
+ *     {
+ *       "src": "https://example.com/file.jpg",
+ *       "name": "file.jpg",
+ *       "thumbnail": "https://example.com/file_thumb.jpg",
+ *       "tag": ["photo"]
+ *     }
+ *   ]
+ * }
+ * ```
  * @property {Object<string, string>} [searchUrlHeader] - File server search http header. Optional. Can be overridden in browser.
  * @property {string} [listClass] - Class name of list div. Required. Can be overridden in browser.
  * @property {(item: BrowserFile) => string} [drawItemHandler] - Function that returns HTML string for rendering each file item. Required. Can be overridden in browser.
@@ -152,6 +182,7 @@ export type BrowserParams = {
  * @property {Array<*>} [props] - `props` argument to `drawItemHandler` function. Optional. Can be overridden in browser.
  * @property {number} [columnSize] - Number of `div.se-file-item-column` to be created.
  * - Optional. Can be overridden in browser. Default: 4.
+ * @property {number} [expand=1] - Initial folder expand depth. `1` expands the first level, `Infinity` expands all. Default: `1`.
  * @property {((item: BrowserFile) => string)} [thumbnail] - Default thumbnail
  */
 /**
@@ -206,6 +237,7 @@ declare class Browser {
 	drawItemHandler: any;
 	selectorHandler: (target: Node) => void;
 	columnSize: number;
+	expand: number;
 	folderDefaultPath: string;
 	closeArrow: any;
 	openArrow: any;