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

package/types/interfaces/plugins.d.ts

@@ -0,0 +1,168 @@
+import type {} from '../typedef';
+/**
+ * @abstract
+ * @interface
+ * Base class for Browser plugins
+ * Child classes MUST implement open(), close(), and onSelectFile() methods
+ */
+export class PluginBrowser extends Base {
+	/**
+	 * @abstract
+	 * @description Executes the method that is called when a `Browser` module's is opened.
+	 * @param {?(target: Node) => *} [onSelectfunction] - Method to be executed after selecting an item in the gallery
+	 * @returns {void}
+	 */
+	open(onSelectfunction?: ((target: Node) => any) | null): void;
+	/**
+	 * @abstract
+	 * @description Executes the method that is called when a `Browser` module's is closed.
+	 * @returns {void}
+	 */
+	close(): void;
+}
+/**
+ * @abstract
+ * @interface
+ * Base class for Command plugins
+ * Child classes MUST implement the action() method
+ */
+export class PluginCommand extends Base {
+	/**
+	 * @abstract
+	 * @description Executes the main execution method of the plugin.
+	 * - It is executed by clicking a toolbar `command` button or calling an API.
+	 * - MUST be overridden by child classes
+	 * @param {HTMLElement} [target] - The plugin's toolbar button element
+	 * @returns {void | Promise<void>}
+	 */
+	action(target?: HTMLElement): void | Promise<void>;
+}
+/**
+ * @abstract
+ * @interface
+ * Base class for Dropdown plugins
+ * Child classes MUST implement the action() method
+ * Child classes MAY optionally implement on() and off() methods
+ */
+export class PluginDropdown extends Base {
+	/**
+	 * @optional
+	 * @description Executes the method that is called when a plugin's dropdown menu is opened.
+	 * @param {HTMLElement} [target] - The dropdown target element
+	 * @returns {void}
+	 */
+	on?(target?: HTMLElement): void;
+	/**
+	 * @abstract
+	 * @description Executes the main execution method of the plugin.
+	 * - Called when an item in the `dropdown` menu is clicked.
+	 * - MUST be overridden by child classes
+	 * @param {HTMLElement} target - The clicked dropdown item element
+	 * @returns {void | Promise<void>}
+	 */
+	action(target: HTMLElement): void | Promise<void>;
+}
+/**
+ * @abstract
+ * @interface
+ * Base class for Dropdown-Free plugins
+ * These plugins handle their own event logic without automatic action() calls
+ * Typically used for complex UI components like ColorPicker or Table
+ * Child classes MAY optionally implement on() and off() methods
+ */
+export class PluginDropdownFree extends Base {
+	/**
+	 * @optional
+	 * @description Executes the method that is called when a plugin's dropdown menu is opened.
+	 * @param {HTMLElement} [target] - The dropdown target element
+	 * @returns {void}
+	 */
+	on?(target?: HTMLElement): void;
+	/**
+	 * @optional
+	 * @description Executes the method that is called when a plugin's dropdown menu is closed.
+	 * @returns {void}
+	 */
+	off?(): void;
+}
+/**
+ * @abstract
+ * @interface
+ * Base class for Field plugins
+ * 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)
+ * - Other event hooks can be used as needed (`onKeydown`, `onClick`, etc.)
+ *
+ * Child classes MAY optionally implement event hook methods
+ * @see {Mention} - Example implementation using onInput hook
+ */
+export class PluginField extends Base {}
+export class PluginInput extends Base {
+	/**
+	 * @optional
+	 * @description Executes the event function of toolbar's input tag - `keydown`.
+	 * @param {SunEditor.HookParams.ToolbarInputKeyDown} params - Input event information
+	 * @returns {void}
+	 */
+	toolbarInputKeyDown?(params: SunEditor.HookParams.ToolbarInputKeyDown): void;
+	/**
+	 * @optional
+	 * @description Executes the event function of toolbar's input tag - `change`.
+	 * @param {SunEditor.HookParams.ToolbarInputChange} params - Input event information
+	 * @returns {void}
+	 */
+	toolbarInputChange?(params: SunEditor.HookParams.ToolbarInputChange): void;
+}
+export class PluginModal extends Base {
+	/**
+	 * @abstract
+	 * Opens the modal window (Plugin's public API called by toolbar/external code)
+	 * @param {HTMLElement} [target] - The plugin's toolbar button element
+	 * @returns {void}
+	 */
+	open(target?: HTMLElement): void;
+}
+export class PluginPopup extends Base {
+	/**
+	 * @abstract
+	 * Called when a popup is shown
+	 * @returns {void}
+	 */
+	show(): void;
+}
+/**
+ * @abstract
+ * Base class for all plugins - contains common properties
+ */
+declare class Base extends KernelInjector {
+	/** @type {string} - Plugin type (`browser`|`command`|`dropdown`|`field`|`input`|`modal`|`popup`) */
+	static type: string;
+	/** @type {string} - Unique plugin identifier */
+	static key: string;
+	/** @type {string} - CSS class name for the plugin button */
+	static className: string;
+	/**
+	 * Plugin-specific options
+	 * @type {{eventIndex?: number, isInputComponent?: boolean}}
+	 * @property {number} [eventIndex=0] - Plugin event handler execution priority (higher = later)
+	 * @property {boolean} [isInputComponent=false] - Allow keyboard input inside component (e.g., table cells), prevents auto-selection on arrow keys
+	 */
+	static options: {
+		eventIndex?: number;
+		isInputComponent?: boolean;
+	};
+	/** @type {string} */
+	title: string;
+	/** @type {string} */
+	icon: string;
+	/** @type {HTMLElement} */
+	beforeItem: HTMLElement;
+	/** @type {HTMLElement} */
+	afterItem: HTMLElement;
+	/** @type {HTMLElement} */
+	replaceButton: HTMLElement;
+}
+import KernelInjector from '../core/kernel/kernelInjector';
+export {};

package/types/langs/_Lang.d.ts

@@ -1,4 +1,4 @@
-export interface _Lang {
+export type _Lang = {
 	code: string;
 	align: string;
 	alignBottom: string;
@@ -191,4 +191,4 @@ export interface _Lang {
 	width: string;
 	message_copy_success: string;
 	message_copy_fail: string;
-}
+};

package/types/langs/index.d.ts

@@ -38,8 +38,8 @@ import he from './he';
 import hu from './hu';
 import it from './it';
 import ja from './ja';
-import ko from './ko';
 import km from './km';
+import ko from './ko';
 import lv from './lv';
 import nl from './nl';
 import pl from './pl';
@@ -51,4 +51,4 @@ import tr from './tr';
 import uk from './uk';
 import ur from './ur';
 import zh_cn from './zh_cn';
-export { ckb, cs, da, de, en, es, fa, fr, he, hu, it, ja, ko, km, lv, nl, pl, pt_br, ro, ru, se, tr, uk, ur, zh_cn };
+export { ckb, cs, da, de, en, es, fa, fr, he, hu, it, ja, km, ko, lv, nl, pl, pt_br, ro, ru, se, tr, uk, ur, zh_cn };

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

@@ -0,0 +1,262 @@
+import type {} from '../../typedef';
+export default Browser;
+/**
+ * Browser file item structure
+ */
+export type BrowserFile = {
+	/**
+	 * - Source url
+	 */
+	src?: string;
+	/**
+	 * - File name | Folder name
+	 */
+	name?: string;
+	/**
+	 * - Thumbnail url
+	 */
+	thumbnail?: string;
+	/**
+	 * - Image alt
+	 */
+	alt?: string;
+	/**
+	 * - Tag name list
+	 */
+	tag?: Array<string> | string;
+	/**
+	 * - Type (image, video, audio, etc.)
+	 */
+	type?: string;
+	/**
+	 * - Frame name (iframe, video, etc.)
+	 */
+	frame?: string;
+	/**
+	 * - Whether this folder is the default selection.
+	 */
+	default?: boolean;
+	/**
+	 * - Metadata
+	 */
+	meta?: {
+		[x: string]: any;
+	};
+	/**
+	 * - Internal: The folder's contents or an API URL (⚠️ DO NOT USE directly)
+	 */
+	_data?: BrowserFile | string;
+};
+export type BrowserParams = {
+	/**
+	 * - File browser window title. Required. Can be overridden in browser.
+	 */
+	title: string;
+	/**
+	 * - Class name of the file browser. Optional. Default: ''.
+	 */
+	className?: string;
+	/**
+	 * - direct data without server calls
+	 */
+	data?:
+		| {
+				[x: string]: any;
+		  }
+		| Array<any>;
+	/**
+	 * - File server url. Required. Can be overridden in browser.
+	 */
+	url?: string;
+	/**
+	 * - File server http header. Required. Can be overridden in browser.
+	 */
+	headers?: {
+		[x: string]: string;
+	};
+	/**
+	 * - Function that actions when an item is clicked. Required. Can be overridden in browser.
+	 */
+	selectorHandler: (target: Node) => void;
+	/**
+	 * - Whether to use the search function. Optional. Default: `true`.
+	 */
+	useSearch?: boolean;
+	/**
+	 * - File server search url. Optional. Can be overridden in browser.
+	 */
+	searchUrl?: string;
+	/**
+	 * - File server search http header. Optional. Can be overridden in browser.
+	 */
+	searchUrlHeader?: {
+		[x: string]: string;
+	};
+	/**
+	 * - Class name of list div. Required. Can be overridden in browser.
+	 */
+	listClass?: string;
+	/**
+	 * - Function that defines the HTML of a file item. Required. Can be overridden in browser.
+	 */
+	drawItemHandler?: (item: BrowserFile) => string;
+	/**
+	 * - `props` argument to `drawItemHandler` function. Optional. Can be overridden in browser.
+	 */
+	props?: Array<any>;
+	/**
+	 * - Number of `div.se-file-item-column` to be created. Optional. Can be overridden in browser. Default: 4.
+	 */
+	columnSize?: number;
+	/**
+	 * - Default thumbnail
+	 */
+	thumbnail?: (item: BrowserFile) => string;
+};
+/**
+ * Browser file item structure
+ * @typedef {Object} BrowserFile
+ * @property {string} [src=""] - Source url
+ * @property {string} [name=""] - File name | Folder name
+ * @property {string} [thumbnail] - Thumbnail url
+ * @property {string} [alt] - Image alt
+ * @property {Array<string>|string} [tag] - Tag name list
+ * @property {string} [type] - Type (image, video, audio, etc.)
+ * @property {string} [frame] - Frame name (iframe, video, etc.)
+ * @property {boolean} [default] - Whether this folder is the default selection.
+ * @property {Object<string, *>} [meta] - Metadata
+ * @property {BrowserFile | string} [_data] - Internal: The folder's contents or an API URL (⚠️ DO NOT USE directly)
+ */
+/**
+ * @typedef BrowserParams
+ * @property {string} title - File browser window title. Required. Can be overridden in browser.
+ * @property {string} [className] - Class name of the file browser. Optional. Default: ''.
+ * @property {Object<string, *>|Array<*>} [data] - direct data without server calls
+ * @property {string} [url] - File server url. Required. Can be overridden in browser.
+ * @property {Object<string, string>} [headers] - File server http header. Required. Can be overridden in browser.
+ * @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.
+ * @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 defines the HTML of a file item. Required. Can be overridden in browser.
+ * @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 {((item: BrowserFile) => string)} [thumbnail] - Default thumbnail
+ */
+/**
+ * @class
+ * @description File browser plugin
+ */
+declare class Browser {
+	/**
+	 * @constructor
+	 * @param {*} host The instance object that called the constructor.
+	 * @param {SunEditor.Deps} $ Kernel dependencies
+	 * @param {BrowserParams} params Browser options
+	 */
+	constructor(host: any, $: SunEditor.Deps, params: BrowserParams);
+	useSearch: boolean;
+	kind: any;
+	host: any;
+	area: HTMLElement;
+	header: HTMLElement;
+	titleArea: HTMLElement;
+	tagArea: HTMLElement;
+	body: HTMLElement;
+	list: HTMLElement;
+	side: HTMLElement;
+	wrapper: HTMLElement;
+	title: string;
+	listClass: string;
+	directData:
+		| any[]
+		| {
+				[x: string]: any;
+		  };
+	url: string;
+	urlHeader: {
+		[x: string]: string;
+	};
+	searchUrl: string;
+	searchUrlHeader: {
+		[x: string]: string;
+	};
+	drawItemHandler: any;
+	selectorHandler: (target: Node) => void;
+	columnSize: number;
+	folderDefaultPath: string;
+	closeArrow: any;
+	openArrow: any;
+	icon_folder: any;
+	icon_folder_item: any;
+	icon_item: any;
+	/** @type {Array<BrowserFile>} */
+	items: Array<BrowserFile>;
+	/** @type {Object<string, {name: string, meta: Object<string, *>}>} */
+	folders: {
+		[x: string]: {
+			name: string;
+			meta: {
+				[x: string]: any;
+			};
+		};
+	};
+	/** @type {Object<string, {key?: string, name?: string, children?: *}>} */
+	tree: {
+		[x: string]: {
+			key?: string;
+			name?: string;
+			children?: any;
+		};
+	};
+	/** @type {BrowserFile} */
+	data: BrowserFile;
+	selectedTags: any[];
+	keyword: string;
+	sideInner: HTMLElement;
+	apiManager: ApiManager;
+	sideOpenBtn: HTMLButtonElement;
+	/**
+	 * @description Open a file browser plugin
+	 * @param {Object} [params={}]
+	 * @param {string} [params.listClass] - Class name of list div. If not, use `this.listClass`.
+	 * @param {string} [params.title] - File browser window title. If not, use `this.title`.
+	 * @param {string} [params.url] - File server url. If not, use `this.url`.
+	 * @param {Object<string, string>} [params.urlHeader] - File server http header. If not, use `this.urlHeader`.
+	 */
+	open(params?: {
+		listClass?: string;
+		title?: string;
+		url?: string;
+		urlHeader?: {
+			[x: string]: string;
+		};
+	}): void;
+	/**
+	 * @description Close a browser plugin
+	 * - The plugin's `init` method is called.
+	 */
+	close(): void;
+	/**
+	 * @description Search files
+	 * @param {string} keyword - Search keyword
+	 */
+	search(keyword: string): void;
+	/**
+	 * @description Filter items by tag
+	 * @param {Array<BrowserFile>} items - Items to filter
+	 * @returns {Array<BrowserFile>}
+	 */
+	tagfilter(items: Array<BrowserFile>): Array<BrowserFile>;
+	/**
+	 * @description Show file browser loading box
+	 */
+	showBrowserLoading(): void;
+	/**
+	 * @description Close file browser loading box
+	 */
+	closeBrowserLoading(): void;
+	#private;
+}
+import ApiManager from '../manager/ApiManager';

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

@@ -0,0 +1,99 @@
+import type {} from '../../typedef';
+export default ColorPicker;
+export type ColorPickerParams = {
+	/**
+	 * The form element to attach the color picker.
+	 */
+	form: HTMLElement;
+	/**
+	 * color list
+	 */
+	colorList?: Array<
+		| string
+		| {
+				value: string;
+				name: string;
+		  }
+	>;
+	/**
+	 * Number of colors to be displayed in one line
+	 */
+	splitNum?: number;
+	/**
+	 * Default color
+	 */
+	defaultColor?: string;
+	/**
+	 * Disable HEX input
+	 */
+	disableHEXInput?: boolean;
+	/**
+	 * Disable remove button
+	 */
+	disableRemove?: boolean;
+	/**
+	 * hue slider options
+	 */
+	hueSliderOptions?: import('./HueSlider').HueSliderParams;
+};
+/**
+ * @typedef {Object} ColorPickerParams
+ * @property {HTMLElement} form The form element to attach the color picker.
+ * @property {Array<string|{value: string, name: string}>} [colorList=[]] color list
+ * @property {number} [splitNum=0] Number of colors to be displayed in one line
+ * @property {string} [defaultColor] Default color
+ * @property {boolean} [disableHEXInput=false] Disable HEX input
+ * @property {boolean} [disableRemove=false] Disable remove button
+ * @property {import('./HueSlider').HueSliderParams} [hueSliderOptions] hue slider options
+ */
+/**
+ * @class
+ * @description Create a color picker element and register for related events. (`this.target`)
+ * - When calling the color selection, `submit`, and `remove` buttons, the `action` method of the instance is called with the `color` value as an argument.
+ */
+declare class ColorPicker {
+	/**
+	 * @constructor
+	 * @param {*} host The instance object that called the constructor.
+	 * @param {SunEditor.Deps} $ Kernel dependencies
+	 * @param {string} styles style property (`"color"`, `"backgroundColor"`..)
+	 * @param {ColorPickerParams} params Color picker options
+	 */
+	constructor(host: any, $: SunEditor.Deps, styles: string, params: ColorPickerParams);
+	kind: any;
+	host: any;
+	form: HTMLElement;
+	target: HTMLElement;
+	targetButton: Node;
+	inputElement: HTMLInputElement;
+	styleProperties: string;
+	splitNum: number;
+	defaultColor: string;
+	hueSliderOptions: import('./HueSlider').HueSliderParams;
+	currentColor: string;
+	colorList: any[] | NodeListOf<Element>;
+	hueSlider: HueSlider;
+	checkedIcon: HTMLElement;
+	/**
+	 * @description Displays or resets the currently selected color at color list.
+	 * @param {Node|string} nodeOrColor Current Selected node
+	 * @param {Node} target target
+	 * @param {?(current: Node) => boolean} [stopCondition] - A function used to stop traversing parent nodes while finding the color.
+	 * - When this function returns `true`, the traversal ends at that node.
+	 * - e.g., `(node) => this.format.isLine(node)` stops at line-level elements like <p>, <div>.
+	 */
+	init(nodeOrColor: Node | string, target: Node, stopCondition?: ((current: Node) => boolean) | null): void;
+	/**
+	 * @description Store color values
+	 * @param {string} hexColorStr Hax color value
+	 */
+	setHexColor(hexColorStr: string): void;
+	/**
+	 * @description Close hue slider
+	 */
+	hueSliderClose(): void;
+	hueSliderAction(color: SunEditor.Module.HueSlider.Color): void;
+	hueSliderCancelAction(): void;
+	#private;
+}
+import HueSlider from './HueSlider';