suneditor 3.0.6 → 3.1.1

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/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

@@ -38,7 +38,6 @@ export type _Lang = {
 	caption: string;
 	cellProperties: string;
 	center: string;
-	clear: string;
 	close: string;
 	codeView: string;
 	color: string;
@@ -119,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/plugins/field/autocomplete.d.ts

@@ -0,0 +1,251 @@
+import type {} from '../../typedef';
+export default Autocomplete;
+export type AutocompleteTriggerConfig = {
+	/**
+	 * - Static data array. Each item must have a `key` field. Mutually exclusive with `apiUrl`.
+	 * ```js
+	 * // data
+	 * [{ key: 'john', name: 'John Doe', url: '/users/john' }]
+	 * ```
+	 */
+	data?: Array<{
+		key: string;
+		[x: string]: any;
+	}>;
+	/**
+	 * - API endpoint URL. Supports `{key}` and `{limitSize}` placeholders. Mutually exclusive with `data`.
+	 */
+	apiUrl?: string;
+	/**
+	 * - HTTP headers for the API request.
+	 */
+	apiHeaders?: {
+		[x: string]: string;
+	};
+	/**
+	 * - Transforms parsed JSON response into an array of data items.
+	 */
+	transformResponse?: (
+		arg0: any,
+		arg1: XMLHttpRequest,
+	) => Array<{
+		key: string;
+	}>;
+	/**
+	 * - Override global `limitSize` for this trigger.
+	 */
+	limitSize?: number;
+	/**
+	 * - Override global `searchStartLength` for this trigger.
+	 */
+	searchStartLength?: number;
+	/**
+	 * - Override global `useCachingData` for this trigger.
+	 */
+	useCachingData?: boolean;
+	/**
+	 * - Override global `useCachingFieldData` for this trigger.
+	 */
+	useCachingFieldData?: boolean;
+	/**
+	 * - Custom dropdown item renderer. Receives `(item, triggerText)`, returns HTML string.
+	 */
+	renderItem?: (
+		arg0: {
+			key: string;
+			[x: string]: any;
+		},
+		arg1: string,
+	) => string;
+	/**
+	 * - Custom selection handler. Returns:
+	 * - `string`: inserted as text node
+	 * - `Element`: inserted as-is
+	 * - `{tag, attrs, text}`: creates element via `dom.utils.createElement`
+	 */
+	onSelect?: (
+		arg0: {
+			key: string;
+			[x: string]: any;
+		},
+		arg1: string,
+	) =>
+		| string
+		| Element
+		| {
+				tag: string;
+				attrs?: any;
+				text?: string;
+		  };
+};
+export type AutocompletePluginOptions = {
+	/**
+	 * - Debounce delay in ms before processing input.
+	 */
+	delayTime?: number;
+	/**
+	 * - Maximum number of items to display in the dropdown.
+	 */
+	limitSize?: number;
+	/**
+	 * - Minimum input length before triggering search.
+	 */
+	searchStartLength?: number;
+	/**
+	 * - Whether to cache query responses per trigger.
+	 */
+	useCachingData?: boolean;
+	/**
+	 * - Whether to cache selected items for priority display.
+	 */
+	useCachingFieldData?: boolean;
+	/**
+	 * - Per-trigger configurations keyed by trigger character.
+	 * ```js
+	 * // Basic usage with static data — mention trigger
+	 * const editor = SUNEDITOR.create('#editor', {
+	 * plugins: [autocomplete],
+	 * autocomplete: {
+	 * triggers: {
+	 * '@': {
+	 * data: [
+	 * { key: 'john', name: 'John Doe' },
+	 * { key: 'jane', name: 'Jane Smith' },
+	 * ],
+	 * },
+	 * },
+	 * },
+	 * });
+	 *
+	 * // API-based trigger with custom rendering and selection
+	 * const editor = SUNEDITOR.create('#editor', {
+	 * plugins: [autocomplete],
+	 * autocomplete: {
+	 * delayTime: 200,
+	 * limitSize: 10,
+	 * triggers: {
+	 * '@': {
+	 * apiUrl: '/api/users?q={key}&limit={limitSize}',
+	 * apiHeaders: { Authorization: 'Bearer TOKEN' },
+	 * transformResponse: (json) => json.data.map((u) => ({ key: u.username, name: u.displayName, id: u.id })),
+	 * renderItem: (item) => `<div class="user-item"><strong>${item.key}</strong> <span>${item.name}</span></div>`,
+	 * onSelect: (item, trigger) => ({
+	 * tag: 'a',
+	 * attrs: { href: `/users/${item.id}`, 'data-se-autocomplete': trigger + item.key },
+	 * text: trigger + item.key,
+	 * }),
+	 * },
+	 * '#': {
+	 * apiUrl: '/api/tags?q={key}',
+	 * transformResponse: (json) => json.tags,
+	 * searchStartLength: 2,
+	 * useCachingData: false,
+	 * },
+	 * },
+	 * },
+	 * });
+	 * ```
+	 */
+	triggers: {
+		[x: string]: AutocompleteTriggerConfig;
+	};
+};
+/**
+ * @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
+ * // Basic usage with static data — mention trigger
+ * const editor = SUNEDITOR.create('#editor', {
+ *   plugins: [autocomplete],
+ *   autocomplete: {
+ *     triggers: {
+ *       '@': {
+ *         data: [
+ *           { key: 'john', name: 'John Doe' },
+ *           { key: 'jane', name: 'Jane Smith' },
+ *         ],
+ *       },
+ *     },
+ *   },
+ * });
+ *
+ * // API-based trigger with custom rendering and selection
+ * const editor = SUNEDITOR.create('#editor', {
+ *   plugins: [autocomplete],
+ *   autocomplete: {
+ *     delayTime: 200,
+ *     limitSize: 10,
+ *     triggers: {
+ *       '@': {
+ *         apiUrl: '/api/users?q={key}&limit={limitSize}',
+ *         apiHeaders: { Authorization: 'Bearer TOKEN' },
+ *         transformResponse: (json) => json.data.map((u) => ({ key: u.username, name: u.displayName, id: u.id })),
+ *         renderItem: (item) => `<div class="user-item"><strong>${item.key}</strong> <span>${item.name}</span></div>`,
+ *         onSelect: (item, trigger) => ({
+ *           tag: 'a',
+ *           attrs: { href: `/users/${item.id}`, 'data-se-autocomplete': trigger + item.key },
+ *           text: trigger + item.key,
+ *         }),
+ *       },
+ *       '#': {
+ *         apiUrl: '/api/tags?q={key}',
+ *         transformResponse: (json) => json.tags,
+ *         searchStartLength: 2,
+ *         useCachingData: false,
+ *       },
+ *     },
+ *   },
+ * });
+ * ```
+ */
+/**
+ * @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.
+ */
+declare class Autocomplete extends PluginField {
+	/**
+	 * @constructor
+	 * @param {SunEditor.Kernel} kernel - The Kernel instance
+	 * @param {AutocompletePluginOptions} pluginOptions
+	 */
+	constructor(kernel: SunEditor.Kernel, pluginOptions: AutocompletePluginOptions);
+	title: any;
+	triggerContexts: Map<any, any>;
+	sortedTriggers: any[];
+	selectMenu: SelectMenu;
+	controller: Controller;
+	onInput(params: SunEditor.HookParams.InputWithData): Promise<void>;
+	#private;
+}
+import { PluginField } from '../../interfaces';
+import { Controller } from '../../modules/contract';
+import { SelectMenu } from '../../modules/ui';

package/types/plugins/index.d.ts

@@ -6,7 +6,7 @@ declare namespace _default {
 	export { fileUpload };
 	export { list_bulleted };
 	export { list_numbered };
-	export { mention };
+	export { autocomplete };
 	export { align };
 	export { font };
 	export { fontColor };
@@ -61,7 +61,7 @@ import paragraphStyle from './dropdown/paragraphStyle';
 import table from './dropdown/table';
 import template from './dropdown/template';
 import textStyle from './dropdown/textStyle';
-import mention from './field/mention';
+import autocomplete from './field/autocomplete';
 import fontSize from './input/fontSize';
 import pageNavigator from './input/pageNavigator';
 import audio from './modal/audio';
@@ -77,6 +77,7 @@ export {
 	anchor,
 	audio,
 	audioGallery,
+	autocomplete,
 	backgroundColor,
 	blockquote,
 	blockStyle,
@@ -100,7 +101,6 @@ export {
 	list_bulleted,
 	list_numbered,
 	math,
-	mention,
 	pageNavigator,
 	paragraphStyle,
 	table,

package/types/typedef.d.ts

@@ -306,7 +306,7 @@ declare global {
 				| 'fileUpload'
 				| 'list_bulleted'
 				| 'list_numbered'
-				| 'mention'
+				| 'autocomplete'
 				| 'align'
 				| 'font'
 				| 'fontColor'