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

package/types/plugins/dropdown/table/shared/table.constants.d.ts

@@ -0,0 +1,134 @@
+import type {} from '../../../../typedef';
+export const ROW_SELECT_MARGIN: 6;
+export const CELL_SELECT_MARGIN: 6;
+export const CELL_DECIMAL_END: 0;
+export const RESIZE_CELL_CLASS: '.se-table-resize-line';
+export const RESIZE_CELL_PREV_CLASS: '.se-table-resize-line-prev';
+export const RESIZE_ROW_CLASS: '.se-table-resize-row';
+export const RESIZE_ROW_PREV_CLASS: '.se-table-resize-row-prev';
+export const BORDER_LIST: string[];
+export namespace BORDER_FORMATS {
+	let all: string;
+	let inside: string;
+	let horizon: string;
+	let vertical: string;
+	let outside: string;
+	let left: string;
+	let top: string;
+	let right: string;
+	let bottom: string;
+	let none: string;
+}
+export const BORDER_FORMAT_INSIDE: string[];
+export namespace BORDER_NS {
+	let l: string;
+	let t: string;
+	let r: string;
+	let b: string;
+}
+export const DEFAULT_BORDER_UNIT: 'px';
+export const DEFAULT_COLOR_LIST: string[];
+/**
+ * @typedef {Object} TableState
+ * @property {number} physical_cellCnt The number of physical cells in the current row.
+ * @property {number} logical_cellCnt The number of logical cells (columns) in the table.
+ * @property {number} cellCnt Alias for `logical_cellCnt`.
+ * @property {number} rowCnt The total number of rows in the table.
+ * @property {number} rowIndex The index of the current row.
+ * @property {number} physical_cellIndex The physical index of the current cell.
+ * @property {number} logical_cellIndex The logical index of the current cell (taking colspan into account).
+ * @property {number} current_colSpan The colspan of the current cell.
+ * @property {number} current_rowSpan The rowspan of the current cell.
+ * @property {boolean} isShiftPressed Whether the shift key is pressed (multi-selection mode).
+ * @property {Object|null} ref Reference object for multi-selection range calculation.
+ * @property {HTMLElement|null} figureElement The figure element wrapping the table.
+ * @property {HTMLTableElement|null} selectedTable The selected table element.
+ * @property {HTMLTableRowElement|null} trElement The currently active row element.
+ * @property {HTMLCollectionOf<HTMLTableRowElement>|HTMLTableRowElement[]|null} trElements The collection of rows in the table.
+ * @property {HTMLTableCellElement|null} tdElement The currently active cell element.
+ * @property {HTMLTableCellElement|null} fixedCell The anchor cell for selection.
+ * @property {HTMLTableCellElement|null} selectedCell The last selected cell.
+ * @property {HTMLTableCellElement[]|null} selectedCells Array of currently selected cells.
+ */
+/**
+ * @type {TableState}
+ */
+export const INITIAL_STATE: TableState;
+export type TableState = {
+	/**
+	 * The number of physical cells in the current row.
+	 */
+	physical_cellCnt: number;
+	/**
+	 * The number of logical cells (columns) in the table.
+	 */
+	logical_cellCnt: number;
+	/**
+	 * Alias for `logical_cellCnt`.
+	 */
+	cellCnt: number;
+	/**
+	 * The total number of rows in the table.
+	 */
+	rowCnt: number;
+	/**
+	 * The index of the current row.
+	 */
+	rowIndex: number;
+	/**
+	 * The physical index of the current cell.
+	 */
+	physical_cellIndex: number;
+	/**
+	 * The logical index of the current cell (taking colspan into account).
+	 */
+	logical_cellIndex: number;
+	/**
+	 * The colspan of the current cell.
+	 */
+	current_colSpan: number;
+	/**
+	 * The rowspan of the current cell.
+	 */
+	current_rowSpan: number;
+	/**
+	 * Whether the shift key is pressed (multi-selection mode).
+	 */
+	isShiftPressed: boolean;
+	/**
+	 * Reference object for multi-selection range calculation.
+	 */
+	ref: any | null;
+	/**
+	 * The figure element wrapping the table.
+	 */
+	figureElement: HTMLElement | null;
+	/**
+	 * The selected table element.
+	 */
+	selectedTable: HTMLTableElement | null;
+	/**
+	 * The currently active row element.
+	 */
+	trElement: HTMLTableRowElement | null;
+	/**
+	 * The collection of rows in the table.
+	 */
+	trElements: HTMLCollectionOf<HTMLTableRowElement> | HTMLTableRowElement[] | null;
+	/**
+	 * The currently active cell element.
+	 */
+	tdElement: HTMLTableCellElement | null;
+	/**
+	 * The anchor cell for selection.
+	 */
+	fixedCell: HTMLTableCellElement | null;
+	/**
+	 * The last selected cell.
+	 */
+	selectedCell: HTMLTableCellElement | null;
+	/**
+	 * Array of currently selected cells.
+	 */
+	selectedCells: HTMLTableCellElement[] | null;
+};

package/types/plugins/dropdown/table/shared/table.utils.d.ts

@@ -0,0 +1,91 @@
+import type {} from '../../../../typedef';
+/** ================================================================================================================================ */
+/**
+ * @description Checks if the given node is a resizable table element.
+ * @param {Node} node The DOM node to check.
+ * @returns {boolean} True if the node is a table-related resizable element.
+ */
+export function IsResizeEls(node: Node): boolean;
+/**
+ * @description Check table caption
+ * @param {Node} node The DOM node to check.
+ * @returns {boolean}
+ */
+export function IsTableCaption(node: Node): boolean;
+/**
+ * @description Checks if a table cell is at its edge based on the mouse event.
+ * @param {MouseEvent} event The mouse event.
+ * @param {Element} tableCell The table cell to check.
+ * @returns {Object} An object containing edge detection details.
+ */
+export function CheckCellEdge(event: MouseEvent, tableCell: Element): any;
+/**
+ * @description Checks if a row is at its edge based on the mouse event.
+ * @param {MouseEvent} event The mouse event.
+ * @param {Element} tableCell The table row cell to check.
+ * @returns {Object} An object containing row edge detection details.
+ */
+export function CheckRowEdge(event: MouseEvent, tableCell: Element): any;
+/**
+ * @description Creates table cells as elements strings.
+ * @param {string} nodeName The tag name of the cell (`TD` or `TH`).
+ * @param {number} cnt The number of cells to create.
+ * @returns {string} The created cells string.
+ */
+export function CreateCellsString(nodeName: string, cnt: number): string;
+/**
+ * @description Creates table cells as element HTML.
+ * @param {string} nodeName The tag name of the cell (`TD` or `TH`).
+ * @returns {HTMLTableCellElement} The created cell element.
+ */
+export function CreateCellsHTML(nodeName: string): HTMLTableCellElement;
+/**
+ * @description Gets the maximum number of columns in a table.
+ * @param {HTMLTableElement} table The table element.
+ * @returns {number} The maximum number of columns in the table.
+ */
+export function GetMaxColumns(table: HTMLTableElement): number;
+/**
+ * @description Gets the logical cell index for a cell in a table.
+ * @param {HTMLTableElement} table The table element.
+ * @param {number} rowIndex The physical row index.
+ * @param {number} cellIndex The physical cell index.
+ * @returns {number} The logical cell index.
+ */
+export function GetLogicalCellIndex(table: HTMLTableElement, rowIndex: number, cellIndex: number): number;
+/**
+ * @description Clone a table element and map selected cells to the cloned table
+ * @param {HTMLTableElement} table `<table>` element
+ * @param {HTMLTableCellElement[]} selectedCells Selected cells array
+ * @returns {{ clonedTable: HTMLTableElement, clonedSelectedCells: HTMLTableCellElement[] }}
+ */
+export function CloneTable(
+	table: HTMLTableElement,
+	selectedCells: HTMLTableCellElement[],
+): {
+	clonedTable: HTMLTableElement;
+	clonedSelectedCells: HTMLTableCellElement[];
+};
+/**
+ * @description Clear table cache
+ * @param {HTMLTableElement} table The table element.
+ */
+export function InvalidateTableCache(table: HTMLTableElement): void;
+/**
+ * @description Cache for selected cell range references. (Use drag cells)
+ * - Stores the calculated logical start/end positions (row, col) for a given selection.
+ * @type {WeakMap<HTMLTableElement, Map<string, {cs: number, ce: number, rs: number, re: number, _i: number}>>}
+ */
+export const refCache: WeakMap<
+	HTMLTableElement,
+	Map<
+		string,
+		{
+			cs: number;
+			ce: number;
+			rs: number;
+			re: number;
+			_i: number;
+		}
+	>
+>;

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

@@ -1,40 +1,34 @@
+import type {} from '../../typedef';
 export default Template;
+export type TemplatePluginOptions = {
+	/**
+	 * - Template list
+	 */
+	items?: Array<{
+		name: string;
+		html: string;
+	}>;
+};
+/**
+ * @typedef {Object} TemplatePluginOptions
+ * @property {Array<{name: string, html: string}>} [items] - Template list
+ */
 /**
  * @class
  * @description Template Plugin, Apply a template to the selection.
  */
-declare class Template extends EditorInjector {
-	static key: string;
-	static type: string;
-	static className: string;
+declare class Template extends PluginDropdown {
 	/**
 	 * @constructor
-	 * @param {__se__EditorCore} editor - The root editor instance
-	 * @param {Object} pluginOptions
-	 * @param {Array<{name: string, html: string}>} pluginOptions.items - Template list
+	 * @param {SunEditor.Kernel} editor - The core kernel
+	 * @param {TemplatePluginOptions} pluginOptions - Plugin options
 	 */
-	constructor(
-		editor: __se__EditorCore,
-		pluginOptions: {
-			items: Array<{
-				name: string;
-				html: string;
-			}>;
-		}
-	);
+	constructor(editor: SunEditor.Kernel, pluginOptions: TemplatePluginOptions);
 	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/textStyle.d.ts

@@ -1,41 +1,34 @@
+import type {} from '../../typedef';
 export default TextStyle;
+export type TextStylePluginOptions = {
+	/**
+	 * - Text style item list
+	 */
+	items?: Array<
+		| string
+		| {
+				name: string;
+				class: string;
+				tag?: string;
+		  }
+	>;
+};
+/**
+ * @typedef {Object} TextStylePluginOptions
+ * @property {Array<string|{name: string, class: string, tag?: string}>} [items] - Text style item list
+ */
 /**
  * @class
  * @description Text style Plugin, Applies a tag that specifies text styles to a selection.
  */
-declare class TextStyle extends EditorInjector {
-	static key: string;
-	static type: string;
-	static className: string;
+declare class TextStyle extends PluginDropdown {
 	/**
 	 * @constructor
-	 * @param {__se__EditorCore} editor - The root editor instance
-	 * @param {Object} pluginOptions
-	 * @param {Array<{name: string, html: string}>} pluginOptions.items - Template list
+	 * @param {SunEditor.Kernel} editor - The core kernel
+	 * @param {TextStylePluginOptions} pluginOptions - Plugin options
 	 */
-	constructor(
-		editor: __se__EditorCore,
-		pluginOptions: {
-			items: Array<{
-				name: string;
-				html: string;
-			}>;
-		}
-	);
+	constructor(editor: SunEditor.Kernel, pluginOptions: TextStylePluginOptions);
 	title: any;
-	icon: string;
 	styleList: 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/field/mention.d.ts

@@ -1,4 +1,61 @@
+import type {} from '../../typedef';
 export default Mention;
+export type MentionPluginOptions = {
+	/**
+	 * - The character that triggers the mention list.
+	 */
+	triggerText?: string;
+	/**
+	 * - The number of items to display in the mention list
+	 */
+	limitSize?: number;
+	/**
+	 * - The number of characters to start searching for the mention list
+	 */
+	searchStartLength?: number;
+	/**
+	 * - The time to wait before displaying the mention list
+	 */
+	delayTime?: number;
+	/**
+	 * - Use data without using API
+	 */
+	data?: Array<{
+		key: string;
+		name: string;
+		url: string;
+	}>;
+	/**
+	 * - The URL to call the mention list
+	 */
+	apiUrl?: string;
+	/**
+	 * - The headers to send with the API call
+	 */
+	apiHeaders?: {
+		[x: string]: string;
+	};
+	/**
+	 * - Whether to cache the mention list data
+	 */
+	useCachingData?: boolean;
+	/**
+	 * - Whether to cache the mention list data in the field
+	 */
+	useCachingFieldData?: boolean;
+};
+/**
+ * @typedef {Object} MentionPluginOptions
+ * @property {string} [triggerText="@"] - The character that triggers the mention list.
+ * @property {number} [limitSize=5] - The number of items to display in the mention list
+ * @property {number} [searchStartLength=0] - The number of characters to start searching for the mention list
+ * @property {number} [delayTime=200] - The time to wait before displaying the mention list
+ * @property {Array<{key: string, name: string, url: string}>} [data] - Use data without using API
+ * @property {string} [apiUrl] - The URL to call the mention list
+ * @property {Object<string, string>} [apiHeaders] - The headers to send with the API call
+ * @property {boolean} [useCachingData=true] - Whether to cache the mention list data
+ * @property {boolean} [useCachingFieldData=true] - Whether to cache the mention list data in the field
+ */
 /**
  * @class
  * @description Mention Plugin
@@ -7,50 +64,14 @@ export default Mention;
  * - Supports fetching mention data from an API or a predefined data array.
  * - Uses caching for optimized performance.
  */
-declare class Mention extends EditorInjector {
-	static key: string;
-	static type: string;
-	static className: string;
+declare class Mention extends PluginField {
 	/**
 	 * @constructor
-	 * @param {__se__EditorCore} editor - The root editor instance
-	 * @param {Object} pluginOptions
-	 * @param {string=} [pluginOptions.triggerText="@"] The character that triggers the mention list. Default is '@'.
-	 * @param {number=} [pluginOptions.limitSize=5] The number of items to display in the mention list. Default is 5.
-	 * @param {number=} [pluginOptions.searchStartLength=0] The number of characters to start searching for the mention list. Default is 0.
-	 * @param {number=} [pluginOptions.delayTime=200] The time to wait before displaying the mention list. Default is 200ms.
-	 * @param {Array<{key: string, name: string, url: string}>=} pluginOptions.data Use data without using API.
-	 * @param {string=} pluginOptions.apiUrl The URL to call the mention list. Default is ''.
-	 * @param {Object<string, string>=} pluginOptions.apiHeaders The headers to send with the API call. Default is {}.
-	 * @param {boolean=} [pluginOptions.useCachingData=true] Whether to cache the mention list data. Default is true.
-	 * @param {boolean=} [pluginOptions.useCachingFieldData=true] Whether to cache the mention list data in the field. Default is true.
+	 * @param {SunEditor.Kernel} editor - The core kernel
+	 * @param {MentionPluginOptions} pluginOptions
 	 */
-	constructor(
-		editor: __se__EditorCore,
-		pluginOptions: {
-			triggerText?: string | undefined;
-			limitSize?: number | undefined;
-			searchStartLength?: number | undefined;
-			delayTime?: number | undefined;
-			data?:
-				| Array<{
-						key: string;
-						name: string;
-						url: string;
-				  }>
-				| undefined;
-			apiUrl?: string | undefined;
-			apiHeaders?:
-				| {
-						[x: string]: string;
-				  }
-				| undefined;
-			useCachingData?: boolean | undefined;
-			useCachingFieldData?: boolean | undefined;
-		}
-	);
+	constructor(editor: SunEditor.Kernel, pluginOptions: MentionPluginOptions);
 	title: any;
-	icon: string;
 	triggerText: string;
 	limitSize: number;
 	searchStartLength: number;
@@ -61,42 +82,15 @@ declare class Mention extends EditorInjector {
 		url: string;
 	}[];
 	apiUrl: string;
-	_delay: number;
-	_lastAtPos: number;
-	_anchorOffset: number;
-	_anchorNode: Node;
 	apiManager: ApiManager;
 	cachingData: Map<any, any>;
 	cachingFieldData: any[];
 	selectMenu: SelectMenu;
 	controller: Controller;
-	/**
-	 * @editorMethod Editor.EventManager
-	 * @description Executes the event function of "input".
-	 * @returns {Promise<boolean>}
-	 */
-	onInput(): Promise<boolean>;
-	/**
-	 * @private
-	 * @description Generates the mention list based on user input.
-	 * - Fetches data from cache, direct data, or an API.
-	 * - Creates and opens the mention dropdown.
-	 * - Caches the fetched data for future use.
-	 * @param {string} value - The mention query text.
-	 * @param {Node} targetNode - The node where the mention is triggered.
-	 * @returns {Promise<boolean>} - Returns `true` if the mention list is displayed, `false` otherwise.
-	 */
-	private _createMentionList;
-	/**
-	 * @private
-	 * @description Constructs the API request URL with the mention query.
-	 * @param {string} key - The mention query text.
-	 * @returns {string} - The formatted API request URL.
-	 */
-	private _createUrl;
+	onInput(params: SunEditor.HookParams.InputWithData): Promise<void>;
 	#private;
 }
-import EditorInjector from '../../editorInjector';
-import { ApiManager } from '../../modules';
-import { SelectMenu } from '../../modules';
-import { Controller } from '../../modules';
+import { PluginField } from '../../interfaces';
+import { Controller } from '../../modules/contract';
+import { ApiManager } from '../../modules/manager';
+import { SelectMenu } from '../../modules/ui';

package/types/plugins/index.d.ts

@@ -1,3 +1,4 @@
+import type {} from '../typedef';
 declare namespace _default {
 	export { blockquote };
 	export { exportPDF };
@@ -11,7 +12,7 @@ declare namespace _default {
 	export { backgroundColor };
 	export { list };
 	export { table };
-	export { formatBlock };
+	export { blockStyle };
 	export { hr };
 	export { layout };
 	export { lineHeight };
@@ -35,73 +36,73 @@ declare namespace _default {
 	export { anchor };
 }
 export default _default;
+import audioGallery from './browser/audioGallery';
+import fileBrowser from './browser/fileBrowser';
+import fileGallery from './browser/fileGallery';
+import imageGallery from './browser/imageGallery';
+import videoGallery from './browser/videoGallery';
 import blockquote from './command/blockquote';
 import exportPDF from './command/exportPDF';
 import fileUpload from './command/fileUpload';
 import list_bulleted from './command/list_bulleted';
 import list_numbered from './command/list_numbered';
-import mention from './field/mention';
 import align from './dropdown/align';
+import backgroundColor from './dropdown/backgroundColor';
+import blockStyle from './dropdown/blockStyle';
 import font from './dropdown/font';
 import fontColor from './dropdown/fontColor';
-import backgroundColor from './dropdown/backgroundColor';
-import list from './dropdown/list';
-import table from './dropdown/table';
-import formatBlock from './dropdown/formatBlock';
 import hr from './dropdown/hr';
 import layout from './dropdown/layout';
 import lineHeight from './dropdown/lineHeight';
-import template from './dropdown/template';
+import list from './dropdown/list';
 import paragraphStyle from './dropdown/paragraphStyle';
+import table from './dropdown/table';
+import template from './dropdown/template';
 import textStyle from './dropdown/textStyle';
-import link from './modal/link';
-import image from './modal/image';
-import video from './modal/video';
+import mention from './field/mention';
+import fontSize from './input/fontSize';
+import pageNavigator from './input/pageNavigator';
 import audio from './modal/audio';
+import drawing from './modal/drawing';
 import embed from './modal/embed';
+import image from './modal/image';
+import link from './modal/link';
 import math from './modal/math';
-import drawing from './modal/drawing';
-import imageGallery from './browser/imageGallery';
-import videoGallery from './browser/videoGallery';
-import audioGallery from './browser/audioGallery';
-import fileGallery from './browser/fileGallery';
-import fileBrowser from './browser/fileBrowser';
-import fontSize from './input/fontSize';
-import pageNavigator from './input/pageNavigator';
+import video from './modal/video';
 import anchor from './popup/anchor';
 export {
+	align,
+	anchor,
+	audio,
+	audioGallery,
+	backgroundColor,
 	blockquote,
+	blockStyle,
+	drawing,
+	embed,
 	exportPDF,
+	fileBrowser,
+	fileGallery,
 	fileUpload,
-	list_bulleted,
-	list_numbered,
-	mention,
-	align,
 	font,
 	fontColor,
-	backgroundColor,
-	list,
-	table,
-	formatBlock,
+	fontSize,
 	hr,
+	image,
+	imageGallery,
 	layout,
 	lineHeight,
-	template,
+	link,
+	list,
+	list_bulleted,
+	list_numbered,
+	math,
+	mention,
+	pageNavigator,
 	paragraphStyle,
+	table,
+	template,
 	textStyle,
-	link,
-	image,
 	video,
-	audio,
-	embed,
-	math,
-	drawing,
-	imageGallery,
 	videoGallery,
-	audioGallery,
-	fileGallery,
-	fileBrowser,
-	fontSize,
-	pageNavigator,
-	anchor
 };