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

package/types/plugins/dropdown/fontColor.d.ts

@@ -1,64 +1,46 @@
+import type {} from '../../typedef';
 export default FontColor;
+export type FontColorPluginOptions = {
+	/**
+	 * - Color list
+	 */
+	items?: Array<
+		| string
+		| {
+				value: string;
+				name: string;
+		  }
+	>;
+	/**
+	 * - Number of colors per line
+	 */
+	splitNum?: number;
+	/**
+	 * - Disable HEX input
+	 */
+	disableHEXInput?: boolean;
+};
+/**
+ * @typedef {Object} FontColorPluginOptions
+ * @property {Array<string|{value: string, name: string}>} [items] - Color list
+ * @property {number} [splitNum] - Number of colors per line
+ * @property {boolean} [disableHEXInput] - Disable HEX input
+ */
 /**
  * @class
  * @description Font color plugin
  */
-declare class FontColor extends EditorInjector {
-	static key: string;
-	static type: string;
-	static className: string;
+declare class FontColor extends PluginDropdownFree {
 	/**
 	 * @constructor
-	 * @param {__se__EditorCore} editor - The root editor instance
-	 * @param {Object} pluginOptions
-	 * @param {Array<string|{value: string, name: string}>} pluginOptions.items - Color list
-	 * @param {number} pluginOptions.splitNum - Number of colors per line
-	 * @param {boolean} pluginOptions.disableHEXInput - Disable HEX input
+	 * @param {SunEditor.Kernel} editor - The core kernel
+	 * @param {FontColorPluginOptions} pluginOptions - Plugin options
 	 */
-	constructor(
-		editor: __se__EditorCore,
-		pluginOptions: {
-			items: Array<
-				| string
-				| {
-						value: string;
-						name: string;
-				  }
-			>;
-			splitNum: number;
-			disableHEXInput: boolean;
-		}
-	);
+	constructor(editor: SunEditor.Kernel, pluginOptions: FontColorPluginOptions);
 	title: any;
-	icon: string;
 	colorPicker: ColorPicker;
-	/**
-	 * @editorMethod Editor.EventManager
-	 * @description Executes the method that is called whenever the cursor position changes.
-	 * @param {?HTMLElement=} element - Node element where the cursor is currently located
-	 * @param {?HTMLElement=} target - The plugin's toolbar button element
-	 * @returns {boolean} - Whether the plugin is active
-	 * - If it returns "undefined", it will no longer be called in this scope.
-	 */
-	active(element?: (HTMLElement | null) | undefined, target?: (HTMLElement | null) | undefined): boolean;
-	/**
-	 * @editorMethod Modules.Dropdown
-	 * @description Executes the method that is called when a plugin's dropdown menu is opened.
-	 * @param {HTMLElement} target Line element at the current cursor position
-	 */
-	on(target: HTMLElement): void;
-	/**
-	 * @editorMethod Modules.Dropdown
-	 * @Override Executes the method that is called when a plugin's dropdown menu is closed.
-	 */
-	off(): void;
-	/**
-	 * @editorMethod Modules.ColorPicker
-	 * @description Executes the method called when a button of "ColorPicker" module is clicked.
-	 * - This plugin is by applying the "ColorPicker" module globally to the "dropdown" menu, the default "action" method is not called.
-	 * @param {string} color - Color code (hex)
-	 */
-	colorPickerAction(color: string): void;
+	active(element: HTMLElement | null, target: HTMLElement | null): boolean | void;
+	colorPickerAction(color: SunEditor.Module.HueSlider.Color): void;
 }
-import EditorInjector from '../../editorInjector';
-import ColorPicker from '../../modules/ColorPicker';
+import { PluginDropdownFree } from '../../interfaces';
+import { ColorPicker } from '../../modules/contract';

package/types/plugins/dropdown/hr.d.ts

@@ -1,71 +1,45 @@
+import type {} from '../../typedef';
 export default HR;
+export type HRPluginOptions = {
+	/**
+	 * - HR list
+	 */
+	items?: Array<{
+		name: string;
+		class: string;
+		style?: string;
+	}>;
+};
+/**
+ * @typedef {Object} HRPluginOptions
+ * @property {Array<{name: string, class: string, style?: string}>} [items] - HR list
+ */
 /**
  * @class
  * @description HR Plugin
  */
-declare class HR extends EditorInjector {
-	static key: string;
-	static type: string;
-	static className: string;
+declare class HR extends PluginDropdown {
 	/**
-	 * @this {HR}
 	 * @param {HTMLElement} node - The node to check.
 	 * @returns {HTMLElement|null} Returns a node if the node is a valid component.
 	 */
-	static component(this: HR, node: HTMLElement): HTMLElement | null;
+	static component(node: HTMLElement): HTMLElement | null;
 	/**
 	 * @constructor
-	 * @param {__se__EditorCore} editor - The root editor instance
-	 * @param {Object} pluginOptions
-	 * @param {Array<{name: string, class: string}>} pluginOptions.items - HR list
+	 * @param {SunEditor.Kernel} editor - The core kernel
+	 * @param {HRPluginOptions} pluginOptions - Plugin options
 	 */
-	constructor(
-		editor: __se__EditorCore,
-		pluginOptions: {
-			items: Array<{
-				name: string;
-				class: string;
-			}>;
-		}
-	);
+	constructor(editor: SunEditor.Kernel, pluginOptions: HRPluginOptions);
 	title: any;
-	icon: string;
 	list: NodeListOf<HTMLButtonElement>;
+	componentSelect(target: HTMLElement): void | boolean;
+	componentDeselect(target: HTMLElement): void;
+	componentDestroy(target: HTMLElement): Promise<void>;
+	shortcut(params: SunEditor.HookParams.Shortcut): void;
 	/**
-	 * @editorMethod Editor.Component
-	 * @description Executes the method that is called when a component of a plugin is selected.
-	 * @param {HTMLElement} target Target component element
-	 */
-	select(target: HTMLElement): void;
-	/**
-	 * @editorMethod Editor.Component
-	 * @description Called when a container is deselected.
-	 * @param {HTMLElement} element Target element
-	 */
-	deselect(element: HTMLElement): void;
-	/**
-	 * @editorMethod Editor.Component
-	 * @description Method to delete a component of a plugin, called by the "FileManager", "Controller" module.
-	 * @param {HTMLElement} target Target element
-	 */
-	destroy(target: HTMLElement): void;
-	/**
-	 * @editorMethod Editor.core
-	 * @description Executes the main execution method of the plugin.
-	 * - Called when an item in the "dropdown" menu is clicked.
-	 * @param {HTMLElement} target - The plugin's toolbar button element
-	 */
-	action(target: HTMLElement): void;
-	/**
-	 * @editorMethod Editor.core
-	 * @description Executes methods called by shortcut keys.
-	 * @param {__se__PluginShortcutInfo} params - Information of the "shortcut" plugin
-	 */
-	shortcut({ line, range }: __se__PluginShortcutInfo): void;
-	/**
-	 * @description Add a hr element
+	 * @description Add a `hr` element
 	 * @param {string} className HR class name
 	 */
 	submit(className: string): HTMLElement;
 }
-import EditorInjector from '../../editorInjector';
+import { PluginDropdown } from '../../interfaces';

package/types/plugins/dropdown/layout.d.ts

@@ -1,40 +1,34 @@
+import type {} from '../../typedef';
 export default Layout;
+export type LayoutPluginOptions = {
+	/**
+	 * - Layout list
+	 */
+	items?: Array<{
+		name: string;
+		html: string;
+	}>;
+};
+/**
+ * @typedef {Object} LayoutPluginOptions
+ * @property {Array<{name: string, html: string}>} [items] - Layout list
+ */
 /**
  * @class
  * @description Layout Plugin, Apply layout to the entire editor.
  */
-declare class Layout extends EditorInjector {
-	static key: string;
-	static type: string;
-	static className: string;
+declare class Layout extends PluginDropdown {
 	/**
 	 * @constructor
-	 * @param {__se__EditorCore} editor - The root editor instance
-	 * @param {Object} pluginOptions
-	 * @param {Array<{name: string, html: string}>} pluginOptions.items - Layout list
+	 * @param {SunEditor.Kernel} editor - The core kernel
+	 * @param {LayoutPluginOptions} pluginOptions - Plugin options
 	 */
-	constructor(
-		editor: __se__EditorCore,
-		pluginOptions: {
-			items: Array<{
-				name: string;
-				html: string;
-			}>;
-		}
-	);
+	constructor(editor: SunEditor.Kernel, pluginOptions: LayoutPluginOptions);
 	title: any;
-	icon: string;
 	selectedIndex: number;
 	items: {
 		name: string;
 		html: string;
 	}[];
-	/**
-	 * @editorMethod Editor.core
-	 * @description Executes the main execution method of the plugin.
-	 * - Called when an item in the "dropdown" menu is clicked.
-	 * @param {HTMLElement} target - The plugin's toolbar button element
-	 */
-	action(target: HTMLElement): void;
 }
-import EditorInjector from '../../editorInjector';
+import { PluginDropdown } from '../../interfaces';

package/types/plugins/dropdown/lineHeight.d.ts

@@ -1,51 +1,33 @@
+import type {} from '../../typedef';
 export default LineHeight;
+export type LineHeightPluginOptions = {
+	/**
+	 * - Line height list
+	 */
+	items?: Array<{
+		text: string;
+		value: string;
+	}>;
+};
+/**
+ * @typedef {Object} LineHeightPluginOptions
+ * @property {Array<{text: string, value: string}>} [items] - Line height list
+ */
 /**
  * @class
  * @description Line height Plugin
  */
-declare class LineHeight extends EditorInjector {
-	static key: string;
-	static type: string;
-	static className: string;
+declare class LineHeight extends PluginDropdown {
 	/**
 	 * @constructor
-	 * @param {__se__EditorCore} editor - The root editor instance
-	 * @param {Object} pluginOptions
-	 * @param {Array<{text: string, value: number}>} pluginOptions.items - Line height list
+	 * @param {SunEditor.Kernel} editor - The core kernel
+	 * @param {LineHeightPluginOptions} pluginOptions - Plugin options
 	 */
-	constructor(
-		editor: __se__EditorCore,
-		pluginOptions: {
-			items: Array<{
-				text: string;
-				value: number;
-			}>;
-		}
-	);
+	constructor(editor: SunEditor.Kernel, pluginOptions: LineHeightPluginOptions);
 	title: any;
-	icon: string;
 	sizeList: NodeListOf<Element>;
 	currentSize: any;
-	/**
-	 * @editorMethod Editor.EventManager
-	 * @description Executes the method that is called whenever the cursor position changes.
-	 * @param {?HTMLElement=} element - Node element where the cursor is currently located
-	 * @param {?HTMLElement=} target - The plugin's toolbar button element
-	 * @returns {boolean} - Whether the plugin is active
-	 * - If it returns "undefined", it will no longer be called in this scope.
-	 */
-	active(element?: (HTMLElement | null) | undefined, target?: (HTMLElement | null) | undefined): boolean;
-	/**
-	 * @editorMethod Modules.Dropdown
-	 * @description Executes the method that is called when a plugin's dropdown menu is opened.
-	 */
-	on(): void;
-	/**
-	 * @editorMethod Editor.core
-	 * @description Executes the main execution method of the plugin.
-	 * - Called when an item in the "dropdown" menu is clicked.
-	 * @param {HTMLElement} target - The plugin's toolbar button element
-	 */
-	action(target: HTMLElement): void;
+	active(element: HTMLElement | null, target: HTMLElement | null): boolean | void;
+	#private;
 }
-import EditorInjector from '../../editorInjector';
+import { PluginDropdown } from '../../interfaces';

package/types/plugins/dropdown/list.d.ts

@@ -1,40 +1,12 @@
+import type {} from '../../typedef';
 export default List;
 /**
  * @class
- * @description List Plugin (OL, UL)
+ * @description List Plugin (`OL`, `UL`)
  */
-declare class List extends EditorInjector {
-	static key: string;
-	static type: string;
-	static className: string;
+declare class List extends PluginDropdown {
 	title: any;
-	icon: string;
-	listItems: NodeListOf<Element>;
-	icons: {
-		bulleted: string;
-		numbered: string;
-	};
-	/**
-	 * @editorMethod Editor.EventManager
-	 * @description Executes the method that is called whenever the cursor position changes.
-	 * @param {?HTMLElement=} element - Node element where the cursor is currently located
-	 * @param {?HTMLElement=} target - The plugin's toolbar button element
-	 * @returns {boolean} - Whether the plugin is active
-	 * - If it returns "undefined", it will no longer be called in this scope.
-	 */
-	active(element?: (HTMLElement | null) | undefined, target?: (HTMLElement | null) | undefined): boolean;
-	/**
-	 * @editorMethod Modules.Dropdown
-	 * @description Executes the method that is called when a plugin's dropdown menu is opened.
-	 * @param {HTMLElement} target Line element at the current cursor position
-	 */
-	on(target: HTMLElement): void;
-	/**
-	 * @editorMethod Editor.core
-	 * @description Executes the main execution method of the plugin.
-	 * - Called when an item in the "dropdown" menu is clicked.
-	 * @param {HTMLElement} target - The plugin's toolbar button element
-	 */
-	action(target: HTMLElement): void;
+	active(element: HTMLElement | null, target: HTMLElement | null): boolean | void;
+	#private;
 }
-import EditorInjector from '../../editorInjector';
+import { PluginDropdown } from '../../interfaces';

package/types/plugins/dropdown/paragraphStyle.d.ts

@@ -1,54 +1,43 @@
+import type {} from '../../typedef';
 export default ParagraphStyle;
+export type ParagraphStylePluginOptions = {
+	/**
+	 * - Paragraph item list
+	 */
+	items?: Array<
+		| string
+		| {
+				name: string;
+				class: string;
+				_class: string;
+		  }
+	>;
+};
+/**
+ * @typedef {Object} ParagraphStylePluginOptions
+ * @property {Array<string|{name: string, class: string, _class: string}>} [items] - Paragraph item list
+ * @example
+ * use default paragraph styles
+ * ['spaced', 'bordered', 'neon']
+ * custom paragraph styles
+ * [
+ *   { name: 'spaced', class: '__se__p-spaced', _class: '' },
+ *   { name: 'bordered', class: '__se__p-bordered', _class: '' },
+ *   { name: 'neon', class: '__se__p-neon', _class: '' }
+ * ]
+ */
 /**
  * @class
  * @description A plugin to style lines using classes.
  */
-declare class ParagraphStyle extends EditorInjector {
-	static key: string;
-	static type: string;
-	static className: string;
+declare class ParagraphStyle extends PluginDropdown {
 	/**
-     * @constructor
-     * @param {__se__EditorCore} editor - The root editor instance
-     * @param {Object} pluginOptions
-     * @param {Array<string|{name: string, class: string, _class: string}>} pluginOptions.items - Paragraph item list
-     * @example
-     * use default paragraph styles
-     * ['spaced', 'bordered', 'neon']
-     * custom paragraph styles
-        [
-            { name: 'spaced', class: '__se__p-spaced', _class: '' },
-            { name: 'bordered', class: '__se__p-bordered', _class: '' },
-            { name: 'neon', class: '__se__p-neon', _class: ''}
-        ]
-     */
-	constructor(
-		editor: __se__EditorCore,
-		pluginOptions: {
-			items: Array<
-				| string
-				| {
-						name: string;
-						class: string;
-						_class: string;
-				  }
-			>;
-		}
-	);
+	 * @constructor
+	 * @param {SunEditor.Kernel} editor - The core kernel
+	 * @param {ParagraphStylePluginOptions} pluginOptions - Plugin options
+	 */
+	constructor(editor: SunEditor.Kernel, pluginOptions: ParagraphStylePluginOptions);
 	title: any;
-	icon: string;
 	classList: NodeListOf<Element>;
-	/**
-	 * @editorMethod Modules.Dropdown
-	 * @description Executes the method that is called when a plugin's dropdown menu is opened.
-	 */
-	on(): void;
-	/**
-	 * @editorMethod Editor.core
-	 * @description Executes the main execution method of the plugin.
-	 * - Called when an item in the "dropdown" menu is clicked.
-	 * @param {HTMLElement} target - The plugin's toolbar button element
-	 */
-	action(target: HTMLElement): void;
 }
-import EditorInjector from '../../editorInjector';
+import { PluginDropdown } from '../../interfaces';

package/types/plugins/dropdown/table/index.d.ts

@@ -0,0 +1,158 @@
+import type {} from '../../../typedef';
+export default Table;
+export type TablePluginOptions = {
+	/**
+	 * - Scroll type (`x`, `y`, `xy`)
+	 */
+	scrollType?: 'x' | 'y' | 'xy';
+	/**
+	 * - Caption position (`top`, `bottom`)
+	 */
+	captionPosition?: 'top' | 'bottom';
+	/**
+	 * - Cell controller position (`cell`, `table`)
+	 */
+	cellControllerPosition?: 'cell' | 'table';
+	/**
+	 * - Color list, used in cell color picker
+	 */
+	colorList?: any[];
+};
+export type TableState = import('./shared/table.constants').TableState;
+/**
+ * @typedef {Object} TablePluginOptions
+ * @property {"x"|"y"|"xy"} [scrollType='x'] - Scroll type (`x`, `y`, `xy`)
+ * @property {"top"|"bottom"} [captionPosition='bottom'] - Caption position (`top`, `bottom`)
+ * @property {"cell"|"table"} [cellControllerPosition='cell'] - Cell controller position (`cell`, `table`)
+ * @property {Array} [colorList] - Color list, used in cell color picker
+ */
+/**
+ * @typedef {import('./shared/table.constants').TableState} TableState
+ */
+/**
+ * @class
+ * @description Table Plugin
+ */
+declare class Table extends PluginDropdownFree {
+	static options: {
+		isInputComponent: boolean;
+	};
+	/**
+	 * @param {HTMLElement} node - The node to check.
+	 * @returns {HTMLElement|null} Returns a node if the node is a valid component.
+	 */
+	static component(node: HTMLElement): HTMLElement | null;
+	/**
+	 * @constructor
+	 * @param {SunEditor.Kernel} editor - The core kernel
+	 * @param {TablePluginOptions} pluginOptions - Plugin options
+	 */
+	constructor(editor: SunEditor.Kernel, pluginOptions: TablePluginOptions);
+	title: any;
+	figureScrollList: string[];
+	figureScroll: string;
+	captionPosition: string;
+	cellControllerTop: boolean;
+	controller_cell: Controller;
+	controller_table: Controller;
+	figure: Figure;
+	/**
+	 * @description Same value as `this._selectedTable`, but it maintains the prev table element
+	 * @type {HTMLTableElement}
+	 */
+	_element: HTMLTableElement;
+	state: Constants.TableState;
+	cellService: TableCellService;
+	clipboardService: TableClipboardService;
+	gridService: TableGridService;
+	resizeService: TableResizeService;
+	selectionService: TableSelectionService;
+	styleService: TableStyleService;
+	/**
+	 * @template {keyof import('./shared/table.constants').TableState} K
+	 * @param {K} key
+	 * @param {import('./shared/table.constants').TableState[K]} value
+	 */
+	setState<K extends keyof import('./shared/table.constants').TableState>(key: K, value: import('./shared/table.constants').TableState[K]): void;
+	componentSelect(target: HTMLElement): void | boolean;
+	componentDeselect(target: HTMLElement): void;
+	componentDestroy(target: HTMLElement): Promise<void>;
+	componentCopy(params: SunEditor.HookParams.CopyComponent): boolean | void;
+	onPaste(params: SunEditor.HookParams.Paste): void | boolean;
+	retainFormat(): {
+		query: string;
+		method: (element: HTMLElement) => void;
+	};
+	setDir(dir: string): void;
+	onMouseMove(params: SunEditor.HookParams.MouseEvent): void;
+	onMouseDown(params: SunEditor.HookParams.MouseEvent): void | boolean;
+	onMouseUp(params: SunEditor.HookParams.MouseEvent): void;
+	onMouseLeave(params: SunEditor.HookParams.MouseEvent): void;
+	onKeyDown(params: SunEditor.HookParams.KeyEvent): void | boolean;
+	onKeyUp(params: SunEditor.HookParams.KeyEvent): void | boolean;
+	onScroll(params: SunEditor.HookParams.Scroll): void;
+	controllerAction(target: HTMLButtonElement): void;
+	/**
+	 * @description Sets various table-related information based on the provided table cell element (`<td>`). This includes updating cell, row, and table attributes, handling spanning cells, and adjusting the UI for elements like headers and captions.
+	 * @param {HTMLTableCellElement} tdElement The target table cell (`<td>`) element from which table information will be extracted.
+	 * @param {boolean} reset A flag indicating whether to reset the cell information. If `true`, the cell information will be reset and recalculated.
+	 */
+	setCellInfo(tdElement: HTMLTableCellElement, reset: boolean): void;
+	/**
+	 * @description Sets row-related information based on the provided table row element (`<tr>`). This includes updating the row count and the index of the selected row.
+	 * @param {HTMLTableRowElement} trElement The target table row (`<tr>`) element from which row information will be extracted.
+	 */
+	setRowInfo(trElement: HTMLTableRowElement): void;
+	/**
+	 * @description Sets the table and figure elements based on the provided cell element, and stores references to them for later use.
+	 * @param {Node} element The target table cell (`<td>`) element from which the table info will be extracted.
+	 * @returns {HTMLTableElement} The `<table>` element that is the parent of the provided `element`.
+	 */
+	setTableInfo(element: Node): HTMLTableElement;
+	/**
+	 * @description Resets the internal state related to table cell selection,
+	 * - clearing any selected cells and removing associated styles and event listeners.
+	 */
+	resetInfo(): void;
+	/**
+	 * @description Adds a new entry to the history stack.
+	 */
+	historyPush(): void;
+	/**
+	 * @internal
+	 * @description Sets the controller position for a cell.
+	 * @param {HTMLTableCellElement} tdElement - The target table cell.
+	 */
+	_setController(tdElement: HTMLTableCellElement): void;
+	/**
+	 * @internal
+	 * @description Sets the position of the cell controller.
+	 * @param {HTMLTableCellElement} tdElement - The target table cell.
+	 * @param {boolean} reset - Whether to reset the controller position.
+	 */
+	_setCellControllerPosition(tdElement: HTMLTableCellElement, reset: boolean): void;
+	/**
+	 * @description Enables or disables editor mode.
+	 * @param {boolean} enabled Whether to enable or disable the editor.
+	 */
+	_editorEnable(enabled: boolean): void;
+	/**
+	 * @description Closes table-related controllers.
+	 */
+	_closeController(): void;
+	/**
+	 * @description Closes table-related controllers and table figure
+	 */
+	_closeTableSelectInfo(): void;
+	#private;
+}
+import { PluginDropdownFree } from '../../../interfaces';
+import { Controller } from '../../../modules/contract';
+import { Figure } from '../../../modules/contract';
+import TableCellService from './services/table.cell';
+import TableClipboardService from './services/table.clipboard';
+import TableGridService from './services/table.grid';
+import TableResizeService from './services/table.resize';
+import TableSelectionService from './services/table.selection';
+import TableStyleService from './services/table.style';
+import * as Constants from './shared/table.constants';