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

package/types/plugins/dropdown/table/render/table.html.d.ts

@@ -0,0 +1,71 @@
+import type {} from '../../../../typedef';
+/**
+ * @description Creates the initial HTML structure for the table plugin.
+ * @returns {HTMLDivElement}
+ */
+export function CreateHTML(): HTMLDivElement;
+/**
+ * @description Creates the table controller HTML.
+ * @param {SunEditor.Deps} $ - Kernel dependencies
+ * @returns {HTMLDivElement}
+ */
+export function CreateHTML_controller_table({ lang, icons }: SunEditor.Deps): HTMLDivElement;
+/**
+ * @param {SunEditor.Deps} $ - Kernel dependencies
+ * @param {boolean} cellControllerTop - Whether to position cell controller on top
+ * @returns {{ html: HTMLElement, splitButton: HTMLButtonElement, columnButton: HTMLButtonElement, rowButton: HTMLButtonElement, mergeButton: HTMLButtonElement, unmergeButton: HTMLButtonElement }}
+ */
+export function CreateHTML_controller_cell(
+	{ lang, icons }: SunEditor.Deps,
+	cellControllerTop: boolean,
+): {
+	html: HTMLElement;
+	splitButton: HTMLButtonElement;
+	columnButton: HTMLButtonElement;
+	rowButton: HTMLButtonElement;
+	mergeButton: HTMLButtonElement;
+	unmergeButton: HTMLButtonElement;
+};
+/**
+ * @typedef {Object} TableCtrlProps
+ * @property {HTMLElement} html
+ * @property {HTMLElement} controller_props_title
+ * @property {HTMLButtonElement} borderButton
+ * @property {HTMLButtonElement} borderFormatButton
+ * @property {HTMLElement} cell_alignment
+ * @property {HTMLElement} cell_alignment_vertical
+ * @property {HTMLElement} cell_alignment_table_text
+ * @property {HTMLButtonElement} border_style
+ * @property {HTMLInputElement} border_color
+ * @property {HTMLInputElement} border_width
+ * @property {HTMLInputElement} back_color
+ * @property {HTMLInputElement} font_color
+ * @property {HTMLButtonElement} palette_border_button
+ * @property {HTMLButtonElement} font_bold
+ * @property {HTMLButtonElement} font_underline
+ * @property {HTMLButtonElement} font_italic
+ * @property {HTMLButtonElement} font_strike
+ *
+ * @param {SunEditor.Deps} $ - Kernel deps
+ * @returns {TableCtrlProps}
+ */
+export function CreateHTML_controller_properties({ lang, icons, options }: SunEditor.Deps): TableCtrlProps;
+export type TableCtrlProps = {
+	html: HTMLElement;
+	controller_props_title: HTMLElement;
+	borderButton: HTMLButtonElement;
+	borderFormatButton: HTMLButtonElement;
+	cell_alignment: HTMLElement;
+	cell_alignment_vertical: HTMLElement;
+	cell_alignment_table_text: HTMLElement;
+	border_style: HTMLButtonElement;
+	border_color: HTMLInputElement;
+	border_width: HTMLInputElement;
+	back_color: HTMLInputElement;
+	font_color: HTMLInputElement;
+	palette_border_button: HTMLButtonElement;
+	font_bold: HTMLButtonElement;
+	font_underline: HTMLButtonElement;
+	font_italic: HTMLButtonElement;
+	font_strike: HTMLButtonElement;
+};

package/types/plugins/dropdown/table/render/table.menu.d.ts

@@ -0,0 +1,59 @@
+import type {} from '../../../../typedef';
+/**
+ * @description Creates the split menu items.
+ * @param {Object} lang - Language object.
+ * @returns {{items: string[], menus: NodeListOf<Element>}}
+ */
+export function CreateSplitMenu(lang: any): {
+	items: string[];
+	menus: NodeListOf<Element>;
+};
+/**
+ * @description Creates the column menu items.
+ * @param {Object} lang - Language object.
+ * @param {Object} icons - Icons object.
+ * @returns {{items: string[], menus: NodeListOf<Element>}}
+ */
+export function CreateColumnMenu(
+	lang: any,
+	icons: any,
+): {
+	items: string[];
+	menus: NodeListOf<Element>;
+};
+/**
+ * @description Creates the row menu items.
+ * @param {Object} lang - Language object.
+ * @param {Object} icons - Icons object.
+ * @returns {{items: string[], menus: NodeListOf<Element>}}
+ */
+export function CreateRowMenu(
+	lang: any,
+	icons: any,
+): {
+	items: string[];
+	menus: NodeListOf<Element>;
+};
+/**
+ * @description Creates the border style menu items.
+ * @returns {{items: string[], menus: NodeListOf<Element>}}
+ */
+export function CreateBorderMenu(): {
+	items: string[];
+	menus: NodeListOf<Element>;
+};
+/**
+ * @description Creates the border format menu items.
+ * @param {Object} langs - Language object.
+ * @param {Object} icons - Icons object.
+ * @param {string[]} indideFormats - Formats to exclude.
+ * @returns {{items: string[], menus: NodeListOf<Element>}}
+ */
+export function CreateBorderFormatMenu(
+	langs: any,
+	icons: any,
+	indideFormats: string[],
+): {
+	items: string[];
+	menus: NodeListOf<Element>;
+};

package/types/plugins/dropdown/table/services/table.cell.d.ts

@@ -0,0 +1,76 @@
+import type {} from '../../../../typedef';
+/**
+ * @description Handles table cell operations including merging, splitting,
+ * - and multi-cell selection management.
+ */
+export class TableCellService {
+	/**
+	 * @param {import('../index').default} main Table index
+	 * @param {{
+	 * 	mergeButton: HTMLButtonElement,
+	 * 	unmergeButton: HTMLButtonElement,
+	 * 	splitButton: HTMLButtonElement,
+	 * 	openCellMenuFunc: ()=>void,
+	 * 	closeCellMenuFunc: ()=>void
+	 * 	}} options Options for table service
+	 */
+	constructor(
+		main: import('../index').default,
+		{
+			mergeButton,
+			unmergeButton,
+			splitButton,
+			openCellMenuFunc,
+			closeCellMenuFunc,
+		}: {
+			mergeButton: HTMLButtonElement;
+			unmergeButton: HTMLButtonElement;
+			splitButton: HTMLButtonElement;
+			openCellMenuFunc: () => void;
+			closeCellMenuFunc: () => void;
+		},
+	);
+	mergeButton: HTMLButtonElement;
+	unmergeButton: HTMLButtonElement;
+	splitButton: HTMLButtonElement;
+	selectMenu_split: SelectMenu;
+	/**
+	 * @description Opens the split menu.
+	 */
+	openSplitMenu(): void;
+	/**
+	 * @description Merges the selected table cells into one cell by combining their contents and adjusting their row and column spans.
+	 * - This method removes the selected cells, consolidates their contents, and applies the appropriate row and column spans to the merged cell.
+	 * @param {HTMLTableCellElement[]} selectedCells Cells array
+	 * @param {boolean} [skipPostProcess=false] - If `true`, skips table cloning, cell re-selection, history stack push, and rendering.
+	 */
+	mergeCells(selectedCells: HTMLTableCellElement[], skipPostProcess?: boolean): void;
+	/**
+	 * @description Unmerges a table cell that has been merged using rowspan and/or colspan.
+	 * @param {HTMLTableCellElement[]} selectedCells - Cells array
+	 * @param {boolean} [skipPostProcess=false] - If `true`, skips table cloning, cell re-selection, history stack push, and rendering.
+	 */
+	unmergeCells(selectedCells: HTMLTableCellElement[], skipPostProcess?: boolean): void;
+	/**
+	 * @description Find merged cells
+	 * @param {HTMLTableCellElement[]} cells - Cells array
+	 */
+	findMergedCells(cells: HTMLTableCellElement[]): any[];
+	/**
+	 * @description Sets the merge/split button visibility.
+	 */
+	setMergeSplitButton(): void;
+	/**
+	 * @description Sets the unmerge button visibility.
+	 */
+	setUnMergeButton(): void;
+	/**
+	 * @internal
+	 * @description Splits a table cell either vertically or horizontally.
+	 * @param {"vertical"|"horizontal"} direction The direction to split the cell.
+	 */
+	_OnSplitCells(direction: 'vertical' | 'horizontal'): void;
+	#private;
+}
+export default TableCellService;
+import { SelectMenu } from '../../../../modules/ui';

package/types/plugins/dropdown/table/services/table.clipboard.d.ts

@@ -0,0 +1,26 @@
+import type {} from '../../../../typedef';
+/**
+ * @description Table clipboard service for handling copy and paste operations within tables.
+ */
+export class TableClipboardService {
+	/**
+	 * @param {import('../index').default} main Table index
+	 */
+	constructor(main: import('../index').default);
+	/**
+	 * @description Copies the selected table cells to the clipboard.
+	 * @param {ClipboardEvent} e - Event object
+	 * @param {HTMLElement} container - The container element
+	 * @param {NodeListOf<HTMLTableCellElement>} selectedCells - The selected table cells
+	 */
+	copySelectedTableCells(e: ClipboardEvent, container: HTMLElement, selectedCells: NodeListOf<HTMLTableCellElement>): void;
+	/**
+	 * @description Updates the target table's cells with the data from the copied table.
+	 * @param {HTMLTableElement} copyTable The table containing the copied data.
+	 * @param {HTMLTableCellElement} targetTD The starting cell in the target table where data will be pasted.
+	 * @returns {HTMLTableCellElement[]} The array of cells that were updated with pasted data.
+	 */
+	pasteTableCellMatrix(copyTable: HTMLTableElement, targetTD: HTMLTableCellElement): HTMLTableCellElement[];
+	#private;
+}
+export default TableClipboardService;

package/types/plugins/dropdown/table/services/table.grid.d.ts

@@ -0,0 +1,77 @@
+import type {} from '../../../../typedef';
+/**
+ * @description Manages table grid operations including row and column insertion, deletion, and header toggling.
+ */
+export class TableGridService {
+	/**
+	 * @param {import('../index').default} main Table index
+	 * @param {{
+	 * 	columnButton: HTMLButtonElement,
+	 * 	rowButton: HTMLButtonElement,
+	 * 	openCellMenuFunc: ()=>void,
+	 * 	closeCellMenuFunc: ()=>void
+	 * 	}} options Options for table service
+	 */
+	constructor(
+		main: import('../index').default,
+		{
+			columnButton,
+			rowButton,
+			openCellMenuFunc,
+			closeCellMenuFunc,
+		}: {
+			columnButton: HTMLButtonElement;
+			rowButton: HTMLButtonElement;
+			openCellMenuFunc: () => void;
+			closeCellMenuFunc: () => void;
+		},
+	);
+	selectMenu_column: SelectMenu;
+	selectMenu_row: SelectMenu;
+	/**
+	 * @description Opens the column menu.
+	 */
+	openColumnMenu(): void;
+	/**
+	 * @description Opens the row menu.
+	 */
+	openRowMenu(): void;
+	/**
+	 * @description Edits the table by adding, removing, or modifying rows and cells, based on the provided options. Supports both single and multi-cell/row editing.
+	 * @param {"row"|"cell"} type The type of element to edit (`row` or `cell`).
+	 * @param {?"up"|"down"|"left"|"right"} option The action to perform: `up`, `down`, `left`, `right`, or `null` for removing.
+	 */
+	editTable(type: 'row' | 'cell', option: ('up' | 'down' | 'left' | 'right') | null): void;
+	/**
+	 * @description Edits a table cell(column), either adding, removing, or modifying the cell based on the provided option.
+	 * @param {?string} option The action to perform on the cell (`left`|`right`|`null`)
+	 * - `null`: to remove the cell
+	 * - `left`: to insert a new cell to the left
+	 * - `right`: to insert a new cell to the right
+	 * @param {?HTMLTableCellElement} [targetCell] Target cell, (default: current selected cell)
+	 * @param {?HTMLTableCellElement} [positionResetElement] The element to reset the position of (optional). This can be the cell that triggered the column edit.
+	 * @returns {HTMLTableCellElement} Target table cell
+	 */
+	editColumn(option: string | null, targetCell?: HTMLTableCellElement | null, positionResetElement?: HTMLTableCellElement | null): HTMLTableCellElement;
+	/**
+	 * @description Edits a table row, either adding, removing, the row
+	 * @param {?string} option The action to perform on the row (`up`|`down`|`null`)
+	 * - `null`: to remove the row
+	 * - `up`: to insert the row up
+	 * - `down`: to insert the row down, or `null` to remove.
+	 * @param {?HTMLTableCellElement} [targetCell] Target cell, (default: current selected cell)
+	 * @param {?HTMLTableCellElement} [positionResetElement] The element to reset the position of (optional). This can be the cell that triggered the row edit.
+	 */
+	editRow(option: string | null, targetCell?: HTMLTableCellElement | null, positionResetElement?: HTMLTableCellElement | null): void;
+	/**
+	 * @description Inserts a new row into the table at the specified index to it.
+	 * @param {HTMLTableElement} table The table element to insert the row into.
+	 * @param {number} rowIndex The index at which to insert the new row.
+	 * @param {number} cellCnt The number of cells to create in the new row.
+	 * @returns {HTMLTableRowElement} The newly inserted row element.
+	 */
+	insertBodyRow(table: HTMLTableElement, rowIndex: number, cellCnt: number): HTMLTableRowElement;
+	#private;
+}
+export default TableGridService;
+import { SelectMenu } from '../../../../modules/ui';

package/types/plugins/dropdown/table/services/table.resize.d.ts

@@ -0,0 +1,72 @@
+import type {} from '../../../../typedef';
+/**
+ * @description Manages table and cell resizing with drag-based dimension adjustments and visual guide lines.
+ */
+export class TableResizeService {
+	/**
+	 * @param {import('../index').default} main Table index
+	 */
+	constructor(main: import('../index').default);
+	/**
+	 * @description Checks if the table is currently being resized.
+	 * @returns {boolean}
+	 */
+	isResizing(): boolean;
+	/**
+	 * @description Display a guide line during resize operations logic.
+	 * @param {MouseEvent} event - Mouse event
+	 * @param {HTMLElement} target - Target element (table cell or row)
+	 * @returns {boolean|undefined} Returns `false` if resizing started, otherwise `undefined`.
+	 */
+	onResizeGuide(event: MouseEvent, target: HTMLElement): boolean | undefined;
+	/**
+	 * @description Hides the resize guide line.
+	 */
+	offResizeGuide(): void;
+	/**
+	 * @description Prepares for resizing from the edge of a cell or row.
+	 * @param {MouseEvent} event - Mouse event
+	 * @param {HTMLTableCellElement} target - Target element
+	 * @returns {boolean|undefined} Returns `false` if resizing started.
+	 */
+	readyResizeFromEdge(event: MouseEvent, target: HTMLTableCellElement): boolean | undefined;
+	/**
+	 * @internal
+	 * @description Starts resizing a table cell.
+	 * @param {HTMLElement} col The column element.
+	 * @param {number} startX The starting X position.
+	 * @param {number} startWidth The initial width of the column.
+	 * @param {boolean} isLeftEdge Whether the resizing is on the left edge.
+	 */
+	_startCellResizing(col: HTMLElement, startX: number, startWidth: number, isLeftEdge: boolean): void;
+	/**
+	 * @internal
+	 * @description Starts resizing a table row.
+	 * @param {HTMLElement} row The table row element.
+	 * @param {number} startY The starting Y position.
+	 * @param {number} startHeight The initial height of the row.
+	 */
+	_startRowResizing(row: HTMLElement, startY: number, startHeight: number): void;
+	/**
+	 * @internal
+	 * @description Starts resizing the table figure.
+	 * @param {number} startX The starting X position.
+	 * @param {boolean} isLeftEdge Whether the resizing is on the left edge.
+	 */
+	_startFigureResizing(startX: number, isLeftEdge: boolean): void;
+	/**
+	 * @internal
+	 * @description Stops resizing the table.
+	 * @param {HTMLElement} target The target element.
+	 * @param {string} prevValue The previous style value.
+	 * @param {string} styleProp The CSS property being changed.
+	 * @param {KeyboardEvent} e The keyboard event.
+	 */
+	_stopResize(target: HTMLElement, prevValue: string, styleProp: string, e: KeyboardEvent): void;
+	/**
+	 * @description Initialize the resize service (remove global events).
+	 */
+	init(): void;
+	#private;
+}
+export default TableResizeService;

package/types/plugins/dropdown/table/services/table.selection.d.ts

@@ -0,0 +1,59 @@
+import type {} from '../../../../typedef';
+/**
+ * @description Manages table cell selection including multi-cell range selection with keyboard and mouse events.
+ */
+export class TableSelectionService {
+	/**
+	 * @param {import('../index').default} main Table index
+	 */
+	constructor(main: import('../index').default);
+	/**
+	 * @description Selects a group of table cells and sets internal state related to multi-cell selection.
+	 * @param {HTMLTableCellElement[]} cells - An array of table cell elements to be selected.
+	 * @returns {{ fixedCell: HTMLTableCellElement, selectedCell: HTMLTableCellElement }} The fixed and selected cells.
+	 */
+	selectCells(cells: HTMLTableCellElement[]): {
+		fixedCell: HTMLTableCellElement;
+		selectedCell: HTMLTableCellElement;
+	};
+	/**
+	 * @internal
+	 * @description Selects multiple table cells and applies selection styles.
+	 * @param {Node} startCell The first cell in the selection.
+	 * @param {Node} endCell The last cell in the selection.
+	 */
+	setMultiCells(startCell: Node, endCell: Node): void;
+	/**
+	 * @description Initializes cell selection state and applies visual styles.
+	 * Sets up the fixed cell, selected cells array, and table reference.
+	 * @param {HTMLTableCellElement} tdElement The target table cell element.
+	 */
+	initCellSelection(tdElement: HTMLTableCellElement): void;
+	/**
+	 * @description Starts cell selection with global event listeners for drag/shift selection.
+	 * **WARNING**: Registers global events (mousemove/mousedown, mouseup, touchmove).
+	 * These events are auto-removed on mouseup/touchmove, or call `#removeGlobalEvents()` manually.
+	 * @param {HTMLTableCellElement} tdElement The target table cell element.
+	 * @param {boolean} shift If `true`, enables shift+click range selection mode.
+	 */
+	startCellSelection(tdElement: HTMLTableCellElement, shift: boolean): void;
+	/**
+	 * @description Deletes styles from selected table cells.
+	 */
+	deleteStyleSelectedCells(): void;
+	/**
+	 * @description Restores styles for selected table cells.
+	 */
+	recallStyleSelectedCells(): void;
+	/**
+	 * @description Focus cell
+	 * @param {HTMLElement} cell Target node
+	 */
+	focusCellEdge(cell: HTMLElement): void;
+	/**
+	 * @description Initialize the selection service (remove global events).
+	 */
+	init(): void;
+	#private;
+}
+export default TableSelectionService;

package/types/plugins/dropdown/table/services/table.style.d.ts

@@ -0,0 +1,162 @@
+import type {} from '../../../../typedef';
+/**
+ * @description Manages table and cell styling including borders, colors, alignment, and property controllers.
+ */
+export class TableStyleService {
+	/**
+	 * @constructor
+	 * @param {import('../index').default} main Table index
+	 * @param {Object} options - Options
+	 * @param {import('../index').TablePluginOptions} options.pluginOptions - Plugin options
+	 * @param {HTMLElement} options.controller_table - Controller table element
+	 */
+	constructor(
+		main: import('../index').default,
+		{
+			pluginOptions,
+			controller_table,
+		}: {
+			pluginOptions: import('../index').TablePluginOptions;
+			controller_table: HTMLElement;
+		},
+	);
+	sliderType: string;
+	/** @type {HTMLButtonElement} */
+	resizeButton: HTMLButtonElement;
+	/** @type {HTMLSpanElement} */
+	resizeText: HTMLSpanElement;
+	/** @type {HTMLButtonElement} */
+	columnFixedButton: HTMLButtonElement;
+	/** @type {HTMLButtonElement} */
+	headerButton: HTMLButtonElement;
+	/** @type {HTMLButtonElement} */
+	captionButton: HTMLButtonElement;
+	controller_props: Controller;
+	controller_props_title: HTMLElement;
+	controller_colorPicker: Controller;
+	colorPicker: ColorPicker;
+	selectMenu_props_border: SelectMenu;
+	selectMenu_props_border_format: SelectMenu;
+	selectMenu_props_border_format_oneCell: SelectMenu;
+	maxText: any;
+	minText: any;
+	propTargets: {
+		cell_alignment: HTMLElement;
+		cell_alignment_vertical: HTMLElement;
+		cell_alignment_table_text: HTMLElement;
+		border_format: HTMLButtonElement;
+		border_style: HTMLButtonElement;
+		border_color: HTMLInputElement;
+		border_width: HTMLInputElement;
+		back_color: HTMLInputElement;
+		font_color: HTMLInputElement;
+		palette_border_button: HTMLButtonElement;
+		font_bold: HTMLButtonElement;
+		font_underline: HTMLButtonElement;
+		font_italic: HTMLButtonElement;
+		font_strike: HTMLButtonElement;
+	};
+	_propsCache: any[];
+	_currentFontStyles: any[];
+	_propsAlignCache: string;
+	_propsVerticalAlignCache: string;
+	_typeCache: string;
+	colorPickerAction(color: SunEditor.Module.HueSlider.Color): void;
+	controllerAction(target: HTMLButtonElement): void;
+	/**
+	 * @description Opens the table properties dialog.
+	 * @param {HTMLElement} target - The target element (usually the table).
+	 */
+	openTableProps(target: HTMLElement): void;
+	/**
+	 * @description Opens the cell properties dialog.
+	 * @param {HTMLElement} target - The target element (usually the table cell).
+	 */
+	openCellProps(target: HTMLElement): void;
+	/**
+	 * @description Opens the border format menu.
+	 */
+	openBorderFormatMenu(): void;
+	/**
+	 * @description Opens the border style menu.
+	 */
+	openBorderStyleMenu(): void;
+	/**
+	 * @description Handles color selection from the color palette.
+	 * @param {Node} button The button triggering the color palette.
+	 * @param {string} type The type of color selection.
+	 */
+	openColorPalette(button: Node, type: string): void;
+	/**
+	 * @description Toggles the font style.
+	 * @param {string} value - The style to toggle (`bold`|`underline`|`italic`|`strike`).
+	 */
+	toggleFontStyle(value: string): void;
+	/**
+	 * @description Toggles the visibility of the table header (`<thead>`). If the header is present, it is removed; if absent, it is added.
+	 */
+	toggleHeader(): void;
+	/**
+	 * @description Toggles the visibility of the table caption (`<caption>`). If the caption is present, it is removed; if absent, it is added.
+	 */
+	toggleCaption(): void;
+	/**
+	 * @description Resets the header button state.
+	 * @param {HTMLTableElement} table - The table element.
+	 */
+	resetHeaderButton(table: HTMLTableElement): void;
+	/**
+	 * @description Resets the caption button state.
+	 * @param {HTMLTableElement} table - The table element.
+	 */
+	resetCaptionButton(table: HTMLTableElement): void;
+	/**
+	 * @description Resets the alignment properties for table cells.
+	 */
+	resetPropsAlign(): void;
+	/**
+	 * @description Reverts the properties to their previous state.
+	 */
+	revertProps(): void;
+	/**
+	 * @description Applies the color from the color picker.
+	 * @param {any} color - The color string or object.
+	 */
+	applyColorPicker(color: any): void;
+	/**
+	 * @description Sets the alignment properties.
+	 * @param {string} value - The alignment value.
+	 */
+	setAlignProps(value: string): void;
+	/**
+	 * @description Sets the vertical alignment properties.
+	 * @param {string} value - The vertical alignment value.
+	 */
+	setVerticalAlignProps(value: string): void;
+	/**
+	 * @description Updates table layout styles.
+	 * @param {string} styles - Styles to update.
+	 * @param {boolean} isMaxWidth - Whether the table is set to maximum width.
+	 * @param {boolean} isFixedColumn - Whether the table has fixed column width.
+	 * @param {boolean} ondisplay - Whether to update display.
+	 */
+	setTableLayout(styles: string, isMaxWidth: boolean, isFixedColumn: boolean, ondisplay: boolean): void;
+	/**
+	 * @description Applies properties to table cells.
+	 * @param {HTMLButtonElement} target The target element.
+	 */
+	submitProps(target: HTMLButtonElement): void;
+	/**
+	 * @description Closes the properties dialog.
+	 */
+	closeProps(): void;
+	/**
+	 * @description Initialize the style service (resets properties).
+	 */
+	init(): void;
+	#private;
+}
+export default TableStyleService;
+import { Controller } from '../../../../modules/contract';
+import { ColorPicker } from '../../../../modules/contract';
+import { SelectMenu } from '../../../../modules/ui';