suneditor 3.0.0-alpha.2 → 3.0.0-alpha.20

package/src/plugins/dropdown/table.js

@@ -1,5 +1,5 @@
 import EditorInjector from '../../editorInjector';
-import { domUtils, numbers, converter, env } from '../../helper';
+import { dom, numbers, converter, env, keyCodeMap } from '../../helper';
 import { Controller, SelectMenu, ColorPicker, Figure, _DragHandle } from '../../modules';
 
 const { _w, ON_OVER_COMPONENT } = env;
@@ -61,270 +61,365 @@ const DEFAULT_COLOR_LIST = [
 	'#000000'
 ];
 
-const Table = function (editor, pluginOptions) {
-	// plugin bisic properties
-	EditorInjector.call(this, editor);
-	this.title = this.lang.table;
-	this.icon = 'table';
-
-	// pluginOptions options
-	this.figureScrollList = ['se-scroll-figure-xy', 'se-scroll-figure-x', 'se-scroll-figure-y'];
-	this.figureScroll = typeof pluginOptions.scrollType === 'string' ? pluginOptions.scrollType.toLowerCase() : 'x';
-	this.captionPosition = pluginOptions.captionPosition !== 'bottom' ? 'top' : 'bottom';
-	this.cellControllerTop = (pluginOptions.cellControllerPosition !== 'cell' ? 'table' : 'cell') === 'table';
-
-	// create HTML
-	const menu = CreateHTML(editor);
-	const commandArea = menu.querySelector('.se-controller-table-picker');
-	const controller_table = CreateHTML_controller_table(editor);
-	const controller_cell = CreateHTML_controller_cell(editor, this.cellControllerTop);
-	const controller_props = CreateHTML_controller_properties(editor);
-
-	editor.applyFrameRoots((e) => {
-		e.get('wrapper').appendChild(domUtils.createElement('DIV', { class: RESIZE_CELL_CLASS.replace(/^\./, '') }));
-		e.get('wrapper').appendChild(domUtils.createElement('DIV', { class: RESIZE_CELL_PREV_CLASS.replace(/^\./, '') }));
-		e.get('wrapper').appendChild(domUtils.createElement('DIV', { class: RESIZE_ROW_CLASS.replace(/^\./, '') }));
-		e.get('wrapper').appendChild(domUtils.createElement('DIV', { class: RESIZE_ROW_PREV_CLASS.replace(/^\./, '') }));
-	});
-
-	// members - Controller
-	this.controller_table = new Controller(this, controller_table, { position: 'top' });
-	this.controller_cell = new Controller(this, controller_cell, { position: this.cellControllerTop ? 'top' : 'bottom' });
-	// props
-	const propsTargetForms = [this.controller_table.form, this.controller_cell.form];
-	this.controller_props = new Controller(this, controller_props, { position: 'bottom', parents: propsTargetForms, isInsideForm: true });
-	this.controller_props_title = controller_props.querySelector('.se-controller-title');
-	// color picker
-	const colorForm = domUtils.createElement('DIV', { class: 'se-controller se-list-layer' }, null);
-	this.colorPicker = new ColorPicker(this, '', {
-		colorList: pluginOptions.colorList || DEFAULT_COLOR_LIST,
-		splitNum: 5,
-		disableRemove: true,
-		hueSliderOptions: { controllerOptions: { parents: [colorForm], isOutsideForm: true } }
-	});
-
-	colorForm.appendChild(this.colorPicker.target);
-	this.controller_colorPicker = new Controller(this, colorForm, {
-		position: 'bottom',
-		parents: [this.controller_props.form].concat(propsTargetForms),
-		isInsideForm: true,
-		isWWTarget: false,
-		initMethod: () => {
-			this.colorPicker.hueSlider.close();
-			domUtils.removeClass(this.controller_colorPicker.currentTarget, 'on');
-		}
-	});
-
-	this.figure = new Figure(this, null, {});
-
-	this.sliderType = '';
-
-	// members - SelectMenu - split
-	const splitMenu = CreateSplitMenu(this.lang);
-	this.splitButton = controller_cell.querySelector('[data-command="onsplit"]');
-	this.selectMenu_split = new SelectMenu(this, { checkList: false, position: 'bottom-center' });
-	this.selectMenu_split.on(this.splitButton, OnSplitCells.bind(this));
-	this.selectMenu_split.create(splitMenu.items, splitMenu.menus);
-
-	// members - SelectMenu - column
-	const columnMenu = CreateColumnMenu(this.lang, this.icons);
-	const columnButton = controller_cell.querySelector('[data-command="oncolumn"]');
-	this.selectMenu_column = new SelectMenu(this, { checkList: false, position: 'bottom-center' });
-	this.selectMenu_column.on(columnButton, OnColumnEdit.bind(this));
-	this.selectMenu_column.create(columnMenu.items, columnMenu.menus);
-
-	// members - SelectMenu - row
-	const rownMenu = CreateRowMenu(this.lang, this.icons);
-	const rowButton = controller_cell.querySelector('[data-command="onrow"]');
-	this.selectMenu_row = new SelectMenu(this, { checkList: false, position: 'bottom-center' });
-	this.selectMenu_row.on(rowButton, OnRowEdit.bind(this));
-	this.selectMenu_row.create(rownMenu.items, rownMenu.menus);
-
-	// members - SelectMenu - properties - border style
-	const borderMenu = CreateBorderMenu();
-	const borderButton = controller_props.querySelector('[data-command="props_onborder_style"]');
-	this.selectMenu_props_border = new SelectMenu(this, { checkList: false, position: 'bottom-center' });
-	this.selectMenu_props_border.on(borderButton, OnPropsBorderEdit.bind(this));
-	this.selectMenu_props_border.create(borderMenu.items, borderMenu.menus);
-
-	// members - SelectMenu - properties - border format
-	const borderFormatMenu = CreateBorderFormatMenu(this.lang, this.icons, []);
-	const borderFormatButton = controller_props.querySelector('[data-command="props_onborder_format"]');
-	this.selectMenu_props_border_format = new SelectMenu(this, { checkList: false, position: 'bottom-left', dir: 'ltr', splitNum: 5 });
-	this.selectMenu_props_border_format.on(borderFormatButton, OnPropsBorderFormatEdit.bind(this, 'all'));
-	this.selectMenu_props_border_format.create(borderFormatMenu.items, borderFormatMenu.menus);
-
-	const borderFormatMenu_oneCell = CreateBorderFormatMenu(this.lang, this.icons, BORDER_FORMAT_INSIDE);
-	this.selectMenu_props_border_format_oneCell = new SelectMenu(this, { checkList: false, position: 'bottom-left', dir: 'ltr', splitNum: 6 });
-	this.selectMenu_props_border_format_oneCell.on(borderFormatButton, OnPropsBorderFormatEdit.bind(this, 'outside'));
-	this.selectMenu_props_border_format_oneCell.create(borderFormatMenu_oneCell.items, borderFormatMenu_oneCell.menus);
-
-	// memberts - elements..
-	this.maxText = this.lang.maxSize;
-	this.minText = this.lang.minSize;
-	this.propTargets = {
-		cell_alignment: controller_props.querySelector('.se-table-props-align > .__se__a_h'),
-		cell_alignment_vertical: controller_props.querySelector('.se-table-props-align > .__se__a_v'),
-		border_format: borderFormatButton,
-		border_style: controller_props.querySelector('[data-command="props_onborder_style"] .se-txt'),
-		border_color: controller_props.querySelector('.__se_border_color'),
-		border_width: controller_props.querySelector('.__se__border_size'),
-		back_color: controller_props.querySelector('.__se_back_color'),
-		font_color: controller_props.querySelector('.__se_font_color'),
-		palette_border_button: controller_props.querySelector('[data-command="props_onpalette"][data-value="border"]'),
-		font_bold: controller_props.querySelector('[data-command="props_font_style"][data-value="bold"]'),
-		font_underline: controller_props.querySelector('[data-command="props_font_style"][data-value="underline"]'),
-		font_italic: controller_props.querySelector('[data-command="props_font_style"][data-value="italic"]'),
-		font_strike: controller_props.querySelector('[data-command="props_font_style"][data-value="strike"]')
-	};
-	this._propsCache = [];
-	this._currentFontStyles = [];
-	this._propsAlignCache = '';
-	this._propsVerticalAlignCache = '';
-	this._typeCache = '';
-	this.tableHighlight = menu.querySelector('.se-table-size-highlighted');
-	this.tableUnHighlight = menu.querySelector('.se-table-size-unhighlighted');
-	this.tableDisplay = menu.querySelector('.se-table-size-display');
-	this.resizeButton = controller_table.querySelector('._se_table_resize');
-	this.resizeText = controller_table.querySelector('._se_table_resize > span > span');
-	this.columnFixedButton = controller_table.querySelector('._se_table_fixed_column');
-	this.headerButton = controller_table.querySelector('._se_table_header');
-	this.captionButton = controller_table.querySelector('._se_table_caption');
-	this.mergeButton = controller_cell.querySelector('[data-command="merge"]');
-
-	// members - private
-	this._resizing = false;
-	this._resizeLine = null;
-	this._resizeLinePrev = null;
-	this._figure = null;
-	this._element = null;
-	this._tdElement = null;
-	this._trElement = null;
-	this._trElements = null;
-	this._tableXY = [];
-	this._maxWidth = true;
-	this._fixedColumn = false;
-	this._physical_cellCnt = 0;
-	this._logical_cellCnt = 0;
-	this._rowCnt = 0;
-	this._rowIndex = 0;
-	this._physical_cellIndex = 0;
-	this._logical_cellIndex = 0;
-	this._current_colSpan = 0;
-	this._current_rowSpan = 0;
-
-	// member - multi selecte
-	this._selectedCells = null;
-	this._shift = false;
-	this._fixedCell = null;
-	this._fixedCellName = null;
-	this._selectedCell = null;
-	this._selectedTable = null;
-	this._ref = null;
-
-	// member - global events
-	this._bindMultiOn = OnCellMultiSelect.bind(this);
-	this._bindMultiOff = OffCellMultiSelect.bind(this);
-	this._bindShiftOff = OffCellShift.bind(this);
-	this._bindTouchOff = OffCellTouch.bind(this);
-	this.__globalEvents = {
-		on: null,
-		off: null,
-		shiftOff: null,
-		touchOff: null,
-		resize: null,
-		resizeStop: null,
-		resizeKeyDown: null
-	};
+/**
+ * @class
+ * @description Table Plugin
+ */
+class Table extends EditorInjector {
+	static key = 'table';
+	static type = 'dropdown-free';
+	static className = '';
+	static options = { isInputComponent: true };
+	/**
+	 * @this {Table}
+	 * @param {HTMLElement} node - The node to check.
+	 * @returns {HTMLElement|null} Returns a node if the node is a valid component.
+	 */
+	static component(node) {
+		return dom.check.isTable(node) ? node : null;
+	}
 
-	// init
-	this.menu.initDropdownTarget(Table, menu);
-	this.eventManager.addEvent(commandArea, 'mousemove', OnMouseMoveTablePicker.bind(this));
-	this.eventManager.addEvent(commandArea, 'click', OnClickTablePicker.bind(this));
-};
+	/**
+	 * @constructor
+	 * @param {__se__EditorCore} editor - The root editor instance
+	 * @param {Object} pluginOptions
+	 * @param {"x"|"y"|"xy"} [pluginOptions.scrollType='x'] - Scroll type ('x', 'y', 'xy')
+	 * @param {"top"|"bottom"} [pluginOptions.captionPosition='bottom'] - Caption position ('top', 'bottom')
+	 * @param {"cell"|"table"} [pluginOptions.cellControllerPosition='cell'] - Cell controller position ('cell', 'table')
+	 * @param {Array} [pluginOptions.colorList] - Color list, used in cell color picker
+	 */
+	constructor(editor, pluginOptions) {
+		// plugin bisic properties
+		super(editor);
+		this.title = this.lang.table;
+		this.icon = 'table';
+
+		// pluginOptions options
+		this.figureScrollList = ['se-scroll-figure-xy', 'se-scroll-figure-x', 'se-scroll-figure-y'];
+		this.figureScroll = typeof pluginOptions.scrollType === 'string' ? pluginOptions.scrollType.toLowerCase() : 'x';
+		this.captionPosition = pluginOptions.captionPosition !== 'bottom' ? 'top' : 'bottom';
+		this.cellControllerTop = (pluginOptions.cellControllerPosition !== 'cell' ? 'table' : 'cell') === 'table';
+
+		// create HTML
+		const menu = CreateHTML();
+		const commandArea = menu.querySelector('.se-controller-table-picker');
+		const controller_table = CreateHTML_controller_table(editor);
+		const controller_cell = CreateHTML_controller_cell(editor, this.cellControllerTop);
+		const controller_props = CreateHTML_controller_properties(editor);
+
+		editor.applyFrameRoots((e) => {
+			e.get('wrapper').appendChild(dom.utils.createElement('DIV', { class: RESIZE_CELL_CLASS.replace(/^\./, '') }));
+			e.get('wrapper').appendChild(dom.utils.createElement('DIV', { class: RESIZE_CELL_PREV_CLASS.replace(/^\./, '') }));
+			e.get('wrapper').appendChild(dom.utils.createElement('DIV', { class: RESIZE_ROW_CLASS.replace(/^\./, '') }));
+			e.get('wrapper').appendChild(dom.utils.createElement('DIV', { class: RESIZE_ROW_PREV_CLASS.replace(/^\./, '') }));
+		});
+
+		// members - Controller
+		this.controller_table = new Controller(this, controller_table, { position: 'top' });
+		this.controller_cell = new Controller(this, controller_cell.html, { position: this.cellControllerTop ? 'top' : 'bottom' });
+		// props
+		const propsTargetForms = [this.controller_table.form, this.controller_cell.form];
+		this.controller_props = new Controller(this, controller_props.html, { position: 'bottom', parents: propsTargetForms, isInsideForm: true });
+		this.controller_props_title = controller_props.controller_props_title;
+		// color picker
+		const colorForm = dom.utils.createElement('DIV', { class: 'se-controller se-list-layer' }, null);
+		this.colorPicker = new ColorPicker(this, '', {
+			colorList: pluginOptions.colorList || DEFAULT_COLOR_LIST,
+			splitNum: 5,
+			disableRemove: true,
+			hueSliderOptions: { controllerOptions: { parents: [colorForm], isOutsideForm: true } }
+		});
+
+		colorForm.appendChild(this.colorPicker.target);
+		this.controller_colorPicker = new Controller(this, colorForm, {
+			position: 'bottom',
+			parents: [this.controller_props.form].concat(propsTargetForms),
+			isInsideForm: true,
+			isWWTarget: false,
+			initMethod: () => {
+				this.colorPicker.hueSlider.close();
+				dom.utils.removeClass(this.controller_colorPicker.currentTarget, 'on');
+			}
+		});
+
+		this.figure = new Figure(this, null, {});
+
+		this.sliderType = '';
+
+		// members - SelectMenu - split
+		const splitMenu = CreateSplitMenu(this.lang);
+		this.splitButton = controller_cell.splitButton;
+		this.selectMenu_split = new SelectMenu(this, { checkList: false, position: 'bottom-center' });
+		this.selectMenu_split.on(this.splitButton, this.#OnSplitCells.bind(this));
+		this.selectMenu_split.create(splitMenu.items, splitMenu.menus);
+
+		// members - SelectMenu - column
+		const columnMenu = CreateColumnMenu(this.lang, this.icons);
+		const columnButton = controller_cell.columnButton;
+		this.selectMenu_column = new SelectMenu(this, { checkList: false, position: 'bottom-center' });
+		this.selectMenu_column.on(columnButton, this.#OnColumnEdit.bind(this));
+		this.selectMenu_column.create(columnMenu.items, columnMenu.menus);
+
+		// members - SelectMenu - row
+		const rownMenu = CreateRowMenu(this.lang, this.icons);
+		const rowButton = controller_cell.rowButton;
+		this.selectMenu_row = new SelectMenu(this, { checkList: false, position: 'bottom-center' });
+		this.selectMenu_row.on(rowButton, this.#OnRowEdit.bind(this));
+		this.selectMenu_row.create(rownMenu.items, rownMenu.menus);
+
+		// members - SelectMenu - properties - border style
+		const borderMenu = CreateBorderMenu();
+		const borderButton = controller_props.borderButton;
+		this.selectMenu_props_border = new SelectMenu(this, { checkList: false, position: 'bottom-center' });
+		this.selectMenu_props_border.on(borderButton, OnPropsBorderEdit.bind(this));
+		this.selectMenu_props_border.create(borderMenu.items, borderMenu.menus);
+
+		// members - SelectMenu - properties - border format
+		const borderFormatMenu = CreateBorderFormatMenu(this.lang, this.icons, []);
+		const borderFormatButton = controller_props.borderFormatButton;
+		this.selectMenu_props_border_format = new SelectMenu(this, { checkList: false, position: 'bottom-left', dir: 'ltr', splitNum: 5 });
+		this.selectMenu_props_border_format.on(borderFormatButton, OnPropsBorderFormatEdit.bind(this, 'all'));
+		this.selectMenu_props_border_format.create(borderFormatMenu.items, borderFormatMenu.menus);
+
+		const borderFormatMenu_oneCell = CreateBorderFormatMenu(this.lang, this.icons, BORDER_FORMAT_INSIDE);
+		this.selectMenu_props_border_format_oneCell = new SelectMenu(this, { checkList: false, position: 'bottom-left', dir: 'ltr', splitNum: 6 });
+		this.selectMenu_props_border_format_oneCell.on(borderFormatButton, OnPropsBorderFormatEdit.bind(this, 'outside'));
+		this.selectMenu_props_border_format_oneCell.create(borderFormatMenu_oneCell.items, borderFormatMenu_oneCell.menus);
+
+		// memberts - elements..
+		this.maxText = this.lang.maxSize;
+		this.minText = this.lang.minSize;
+		this.propTargets = {
+			cell_alignment: controller_props.cell_alignment,
+			cell_alignment_vertical: controller_props.cell_alignment_vertical,
+			cell_alignment_table_text: controller_props.cell_alignment_table_text,
+			border_format: borderFormatButton,
+			border_style: controller_props.border_style,
+			border_color: controller_props.border_color,
+			border_width: controller_props.border_width,
+			back_color: controller_props.back_color,
+			font_color: controller_props.font_color,
+			palette_border_button: controller_props.palette_border_button,
+			font_bold: controller_props.font_bold,
+			font_underline: controller_props.font_underline,
+			font_italic: controller_props.font_italic,
+			font_strike: controller_props.font_strike
+		};
+		this._propsCache = [];
+		this._currentFontStyles = [];
+		this._propsAlignCache = '';
+		this._propsVerticalAlignCache = '';
+		this._typeCache = '';
+
+		/** @type {HTMLElement} */
+		this.tableHighlight = menu.querySelector('.se-table-size-highlighted');
+		/** @type {HTMLElement} */
+		this.tableUnHighlight = menu.querySelector('.se-table-size-unhighlighted');
+		/** @type {HTMLElement} */
+		this.tableDisplay = menu.querySelector('.se-table-size-display');
+		/** @type {HTMLButtonElement} */
+		this.resizeButton = controller_table.querySelector('._se_table_resize');
+		/** @type {HTMLSpanElement} */
+		this.resizeText = controller_table.querySelector('._se_table_resize > span > span');
+		/** @type {HTMLButtonElement} */
+		this.columnFixedButton = controller_table.querySelector('._se_table_fixed_column');
+		/** @type {HTMLButtonElement} */
+		this.headerButton = controller_table.querySelector('._se_table_header');
+		/** @type {HTMLButtonElement} */
+		this.captionButton = controller_table.querySelector('._se_table_caption');
+		/** @type {HTMLButtonElement} */
+		this.mergeButton = controller_cell.mergeButton;
+
+		// members - private
+		this._resizing = false;
+		this._resizeLine = null;
+		this._resizeLinePrev = null;
+
+		/** @type {HTMLElement} */
+		this._figure = null;
+		/** @type {HTMLTableElement} */
+		this._element = null;
+		/** @type {HTMLTableCellElement} */
+		this._tdElement = null;
+		/** @type {HTMLTableRowElement} */
+		this._trElement = null;
+		/** @type {HTMLTableRowElement[]|HTMLCollectionOf<HTMLTableRowElement>} */
+		this._trElements = null;
+
+		this._tableXY = [];
+		this._maxWidth = true;
+		this._fixedColumn = false;
+		this._physical_cellCnt = 0;
+		this._logical_cellCnt = 0;
+		this._rowCnt = 0;
+		this._rowIndex = 0;
+		this._physical_cellIndex = 0;
+		this._logical_cellIndex = 0;
+		this._current_colSpan = 0;
+		this._current_rowSpan = 0;
+
+		// member - multi selecte
+		/** @type {HTMLTableElement} */
+		this._selectedTable = null;
+		/** @type {HTMLTableCellElement} */
+		this._fixedCell = null;
+		/** @type {HTMLTableCellElement} */
+		this._selectedCell = null;
+		/** @type {HTMLTableCellElement[]} */
+		this._selectedCells = null;
+
+		this._shift = false;
+		this.__s = false;
+		this._fixedCellName = null;
+		this._ref = null;
+
+		// member - global events
+		this._bindMultiOn = this.#OnCellMultiSelect.bind(this);
+		this._bindMultiOff = this.#OffCellMultiSelect.bind(this);
+		this._bindShiftOff = this.#OffCellShift.bind(this);
+		this._bindTouchOff = this.#OffCellTouch.bind(this);
+		this.__globalEvents = {
+			on: null,
+			off: null,
+			shiftOff: null,
+			touchOff: null,
+			resize: null,
+			resizeStop: null,
+			resizeKeyDown: null
+		};
+
+		// init
+		this.menu.initDropdownTarget(Table, menu);
+		this.eventManager.addEvent(commandArea, 'mousemove', this.#OnMouseMoveTablePicker.bind(this));
+		this.eventManager.addEvent(commandArea, 'click', this.#OnClickTablePicker.bind(this));
+	}
 
-Table.key = 'table';
-Table.type = 'dropdown-free';
-Table.className = '';
-Table.component = function (node) {
-	return domUtils.isTable(node) ? node : null;
-};
-Table.options = { isInputComponent: true };
-Table.prototype = {
 	/**
-	 * @override core
+	 * @editorMethod Editor.core
+	 * @description Executes the main execution method of the plugin.
+	 * - Called when an item in the "dropdown" menu is clicked.
 	 */
 	action() {
-		const oTable = domUtils.createElement('TABLE');
+		const oTable = dom.utils.createElement('TABLE');
 		const x = this._tableXY[0];
 		const y = this._tableXY[1];
 
-		const body = `<tbody>${`<tr>${CreateCells('td', x, false)}</tr>`.repeat(y)}</tbody>`;
+		const body = `<tbody>${`<tr>${CreateCellsString('td', x)}</tr>`.repeat(y)}</tbody>`;
 		const colGroup = `<colgroup>${`<col style="width: ${numbers.get(100 / x, CELL_DECIMAL_END)}%;">`.repeat(x)}</colgroup>`;
 		oTable.innerHTML = colGroup + body;
 
-		const figure = domUtils.createElement('FIGURE', { class: 'se-flex-component se-input-component' });
+		// scroll
+		let scrollTypeClass = '';
+		if (this.figureScroll) {
+			scrollTypeClass = ` se-scroll-figure-${this.figureScroll}`;
+		}
+
+		const figure = dom.utils.createElement('FIGURE', { class: 'se-flex-component se-input-component' + scrollTypeClass });
 		figure.appendChild(oTable);
 
-		if (this.component.insert(figure, false, false)) {
+		if (this.component.insert(figure, { skipCharCount: false, skipSelection: false, skipHistory: false })) {
 			this._resetTablePicker();
 			const target = oTable.querySelector('td div');
 			this.selection.setRange(target, 0, target, 0);
 		}
-	},
+	}
 
 	/**
-	 * @override core
+	 * @editorMethod Modules.Component
+	 * @description Executes the method that is called when a component of a plugin is selected.
+	 * @param {HTMLElement} target Target component element
+	 */
+	select(target) {
+		this._figureOpen(target);
+		if (!this._figure) this.setTableInfo(target);
+
+		const targetWidth = this._figure?.style.width || '100%';
+		this._maxWidth = targetWidth === '100%';
+		this._fixedColumn = dom.utils.hasClass(target, 'se-table-layout-fixed') || target.style.tableLayout === 'fixed';
+		this._setTableStyle(this._maxWidth ? 'width|column' : 'width', true);
+
+		if (_DragHandle.get('__overInfo') === ON_OVER_COMPONENT) return;
+
+		if (!this._tdElement) return;
+		this.setCellInfo(this._tdElement, true);
+
+		// controller open
+		const btnDisabled = this._selectedCells.length > 1;
+		const figureEl = dom.query.getParentElement(target, dom.check.isFigure);
+		this.controller_table.open(figureEl, null, { isWWTarget: false, initMethod: null, addOffset: null, disabled: btnDisabled });
+
+		const addOffset = !this.cellControllerTop ? null : this.controller_table.form.style.display === 'block' ? { left: this.controller_table.form.offsetWidth + 2 } : null;
+		this.controller_cell.open(this._tdElement, this.cellControllerTop ? figureEl : null, { isWWTarget: false, initMethod: null, addOffset: addOffset, disabled: btnDisabled });
+	}
+
+	/**
+	 * @editorMethod Editor.core
+	 * @description This method is used to validate and preserve the format of the component within the editor.
+	 * - It ensures that the structure and attributes of the element are maintained and secure.
+	 * - The method checks if the element is already wrapped in a valid container and updates its attributes if necessary.
+	 * - If the element isn't properly contained, a new container is created to retain the format.
+	 * @returns {{query: string, method: (element: HTMLTableElement) => void}} The format retention object containing the query and method to process the element.
+	 * - query: The selector query to identify the relevant elements (in this case, 'audio').
+	 * - method:The function to execute on the element to validate and preserve its format.
+	 * - The function takes the element as an argument, checks if it is contained correctly, and applies necessary adjustments.
 	 */
 	retainFormat() {
 		return {
 			query: 'table',
 			method: (element) => {
 				const ColgroupEl = element.querySelector('colgroup');
-				let FigureEl = domUtils.isFigure(element.parentNode) ? element.parentNode : null;
+				let FigureEl = dom.check.isFigure(element.parentNode) ? element.parentNode : null;
 				if (ColgroupEl && FigureEl) return;
 
 				// create colgroup
 				if (!ColgroupEl) {
 					const maxCount = GetMaxColumns(element);
-					const colGroup = domUtils.createElement('colgroup', null, `<col style="width: ${numbers.get(100 / maxCount, CELL_DECIMAL_END)}%;">`.repeat(maxCount));
+					const colGroup = dom.utils.createElement('colgroup', null, `<col style="width: ${numbers.get(100 / maxCount, CELL_DECIMAL_END)}%;">`.repeat(maxCount));
 					element.insertBefore(colGroup, element.firstElementChild);
 				}
 
 				// figure
 				if (!FigureEl) {
-					FigureEl = domUtils.createElement('FIGURE', { class: 'se-flex-component se-input-component' });
+					FigureEl = dom.utils.createElement('FIGURE', { class: 'se-flex-component se-input-component' });
 					element.parentNode.insertBefore(FigureEl, element);
 					FigureEl.appendChild(element);
 				} else {
-					domUtils.addClass(FigureEl, 'se-flex-component|se-input-component');
+					dom.utils.addClass(FigureEl, 'se-flex-component|se-input-component');
 				}
 
 				// scroll
 				if (!this.figureScroll) {
-					domUtils.removeClass(FigureEl, this.figureScrollList.join('|'));
+					dom.utils.removeClass(FigureEl, this.figureScrollList.join('|'));
 				} else {
 					const scrollTypeClass = `se-scroll-figure-${this.figureScroll}`;
-					domUtils.addClass(FigureEl, scrollTypeClass);
-					domUtils.removeClass(FigureEl, this.figureScrollList.filter((v) => v !== scrollTypeClass).join('|'));
+					dom.utils.addClass(FigureEl, scrollTypeClass);
+					dom.utils.removeClass(FigureEl, this.figureScrollList.filter((v) => v !== scrollTypeClass).join('|'));
 				}
 			}
 		};
-	},
+	}
 
 	/**
-	 * @override core
-	 * @param {"rtl"|"ltr"} dir Direction
+	 * @editorMethod Editor.core
+	 * @description Executes the method called when the rtl, ltr mode changes. ("editor.setDir")
+	 * @param {string} dir Direction ("rtl" or "ltr")
 	 */
 	setDir(dir) {
 		this.tableHighlight.style.left = dir === 'rtl' ? 10 * 18 - 13 + 'px' : '';
 		this._resetTablePicker();
-		this._resetPropsAlign(dir === 'rtl');
-	},
+		this._resetPropsAlign();
+	}
 
+	/**
+	 * @editorMethod Editor.EventManager
+	 * @description Executes the event function of "mousemove".
+	 * @param {__se__PluginMouseEventInfo} params
+	 */
 	onMouseMove({ event }) {
 		if (this._resizing) return;
-		const target = domUtils.getParentElement(event.target, IsResizeEls);
+
+		const eventTarget = dom.query.getEventTarget(event);
+		const target = dom.query.getParentElement(eventTarget, IsResizeEls);
 		if (!target || this._fixedCell) {
 			this.__hideResizeLine();
 			return;
@@ -336,7 +431,7 @@ Table.prototype = {
 			this.__removeGlobalEvents();
 			if (this._resizeLine?.style.display === 'block') this._resizeLine.style.display = 'none';
 			this._resizeLine = this.editor.frameContext.get('wrapper').querySelector(RESIZE_CELL_CLASS);
-			this._setResizeLinePosition(domUtils.getParentElement(target, domUtils.isTable), target, this._resizeLine, cellEdge.isLeft);
+			this._setResizeLinePosition(dom.query.getParentElement(target, dom.check.isTable), target, this._resizeLine, cellEdge.isLeft);
 			this._resizeLine.style.display = 'block';
 			return;
 		}
@@ -344,33 +439,39 @@ Table.prototype = {
 		const rowEdge = CheckRowEdge(event, target);
 		if (rowEdge.is) {
 			this.__removeGlobalEvents();
-			this._element = domUtils.getParentElement(target, domUtils.isTable);
+			this._element = dom.query.getParentElement(target, dom.check.isTable);
 			this._element.style.cursor = 'ns-resize';
 			if (this._resizeLine?.style.display === 'block') this._resizeLine.style.display = 'none';
 			this._resizeLine = this.editor.frameContext.get('wrapper').querySelector(RESIZE_ROW_CLASS);
-			this._setResizeRowPosition(domUtils.getParentElement(target, domUtils.isTable), target, this._resizeLine);
+			this._setResizeRowPosition(dom.query.getParentElement(target, dom.check.isTable), target, this._resizeLine);
 			this._resizeLine.style.display = 'block';
 			return;
 		}
 
 		if (this._element) this._element.style.cursor = '';
 		this.__hideResizeLine();
-	},
+	}
 
+	/**
+	 * @editorMethod Editor.EventManager
+	 * @description Executes the event function of "scroll".
+	 */
 	onScroll() {
 		if (this._resizeLine?.style.display !== 'block') return;
 		// delete resize line position
 		if (this._element) this._element.style.cursor = '';
 		this._resizeLine.style.display = 'none';
-	},
+	}
 
 	/**
-	 * @override core
-	 * @param {any} event Event object
+	 * @editorMethod Editor.EventManager
+	 * @description Executes the event function of "mousedown".
+	 * @param {__se__PluginMouseEventInfo} params
 	 */
 	onMouseDown({ event }) {
 		this._ref = null;
-		const target = domUtils.getParentElement(event.target, IsResizeEls);
+		const eventTarget = dom.query.getEventTarget(event);
+		const target = /** @type {HTMLTableCellElement} */ (dom.query.getParentElement(eventTarget, IsResizeEls));
 		if (!target) return;
 
 		const cellEdge = CheckCellEdge(event, target);
@@ -381,7 +482,7 @@ Table.prototype = {
 				const colIndex = this._logical_cellIndex - (cellEdge.isLeft ? 1 : 0);
 
 				// ready
-				this.editor.enableBackWrapper('ew-resize');
+				this.ui.enableBackWrapper('ew-resize');
 				if (!this._resizeLine) this._resizeLine = this.editor.frameContext.get('wrapper').querySelector(RESIZE_CELL_CLASS);
 				this._resizeLinePrev = this.editor.frameContext.get('wrapper').querySelector(RESIZE_CELL_PREV_CLASS);
 
@@ -404,11 +505,12 @@ Table.prototype = {
 		const rowEdge = CheckRowEdge(event, target);
 		if (rowEdge.is) {
 			try {
-				let row = domUtils.getParentElement(target, domUtils.isTableRow);
+				/** @type {HTMLTableRowElement} */
+				let row = dom.query.getParentElement(target, dom.check.isTableRow);
 				let rowSpan = target.rowSpan;
 				if (rowSpan > 1) {
-					while (domUtils.isTableRow(row) && rowSpan > 1) {
-						row = row.nextElementSibling;
+					while (dom.check.isTableRow(row) && rowSpan > 1) {
+						row = /** @type {HTMLTableRowElement} */ (row.nextElementSibling);
 						--rowSpan;
 					}
 				}
@@ -417,7 +519,7 @@ Table.prototype = {
 				this.setRowInfo(row);
 
 				// ready
-				this.editor.enableBackWrapper('ns-resize');
+				this.ui.enableBackWrapper('ns-resize');
 				if (!this._resizeLine) this._resizeLine = this.editor.frameContext.get('wrapper').querySelector(RESIZE_ROW_CLASS);
 				this._resizeLinePrev = this.editor.frameContext.get('wrapper').querySelector(RESIZE_ROW_PREV_CLASS);
 
@@ -430,52 +532,56 @@ Table.prototype = {
 			return;
 		}
 
-		if (!(target !== this._fixedCell && !this._shift)) return;
+		if (this._shift && target !== this._fixedCell) return;
 
 		this._deleteStyleSelectedCells();
 		if (/^TR$/i.test(target.nodeName)) return;
 
 		this.selectCells(target, false);
-	},
+	}
 
 	/**
-	 * @override core
+	 * @editorMethod Editor.EventManager
+	 * @description Executes the event function of "mouseup".
 	 */
 	onMouseUp() {
 		this._shift = false;
-	},
+	}
 
 	/**
-	 * @override core
+	 * @editorMethod Editor.EventManager
+	 * @description Executes the event function of "mouseleave".
 	 */
 	onMouseLeave() {
 		this.__hideResizeLine();
-	},
+	}
 
 	/**
-	 * @override core
-	 * @param {any} event Event object
-	 * @param {any} range range object
-	 * @param {Element} line Current line element
+	 * @editorMethod Editor.EventManager
+	 * @description Executes the event function of "keydown".
+	 * @param {__se__PluginKeyEventInfo} params
 	 */
 	onKeyDown({ event, range, line }) {
 		this._ref = null;
-		if (this.editor.selectMenuOn || this._resizing) return;
+		if (this.editor.selectMenuOn || this._resizing || this.__s) return;
 
-		const keyCode = event.keyCode;
+		const keyCode = event.code;
+		this.__s = event.shiftKey;
 		// table tabkey
-		if (keyCode === 9) {
-			const tableCell = domUtils.getParentElement(line, domUtils.isTableCell);
-			if (tableCell && range.collapsed && domUtils.isEdgePoint(range.startContainer, range.startOffset)) {
+		if (keyCodeMap.isTab(keyCode)) {
+			const tableCell = dom.query.getParentElement(line, dom.check.isTableCell);
+			if (tableCell && range.collapsed && dom.check.isEdgePoint(range.startContainer, range.startOffset)) {
 				this._closeController();
 
 				const shift = event.shiftKey;
-				const table = domUtils.getParentElement(tableCell, 'table');
-				const cells = domUtils.getListChildren(table, domUtils.isTableCell);
-				const idx = shift ? domUtils.prevIndex(cells, tableCell) : domUtils.nextIndex(cells, tableCell);
+				/** @type {HTMLTableElement} */
+				const table = dom.query.getParentElement(tableCell, 'table');
+				/** @type {HTMLTableCellElement[]} */
+				const cells = dom.query.getListChildren(table, dom.check.isTableCell);
+				const idx = shift ? dom.utils.prevIndex(cells, tableCell) : dom.utils.nextIndex(cells, tableCell);
 
 				if (idx === cells.length && !shift) {
-					if (!domUtils.getParentElement(tableCell, 'thead')) {
+					if (!dom.query.getParentElement(tableCell, 'thead')) {
 						const rows = table.rows;
 						const newRow = this.insertBodyRow(table, rows.length, rows[rows.length - 1].cells.length);
 						const firstTd = newRow.querySelector('td div');
@@ -490,11 +596,11 @@ Table.prototype = {
 
 				if (idx === -1 && shift) return;
 
-				let moveCell = cells[idx];
+				const moveCell = cells[idx];
 				if (!moveCell) return;
 
-				moveCell = moveCell.firstElementChild || moveCell;
-				this.selection.setRange(moveCell, 0, moveCell, 0);
+				const rangeCell = moveCell.firstElementChild || moveCell;
+				this.selection.setRange(rangeCell, 0, rangeCell, 0);
 
 				event.preventDefault();
 				event.stopPropagation();
@@ -504,9 +610,9 @@ Table.prototype = {
 		}
 
 		let cell = null;
-		if (!event.shiftKey || keyCode !== 16) {
-			cell = domUtils.getParentElement(line, domUtils.isTableCell);
-			if (!domUtils.hasClass(cell, 'se-selected-cell-focus')) return;
+		if (!keyCodeMap.isShift(event)) {
+			cell = dom.query.getParentElement(line, dom.check.isTableCell);
+			if (!dom.utils.hasClass(cell, 'se-selected-cell-focus')) return;
 
 			this._deleteStyleSelectedCells();
 			this._toggleEditor(true);
@@ -518,43 +624,46 @@ Table.prototype = {
 
 		if (this._shift || this._ref) return;
 
-		cell = cell || domUtils.getParentElement(line, domUtils.isTableCell);
+		cell = /** @type {HTMLTableCellElement} */ (cell || dom.query.getParentElement(line, dom.check.isTableCell));
 		if (cell) {
+			this.__s = false;
 			this._fixedCell = cell;
 			this._closeController();
 			this.selectCells(cell, event.shiftKey);
 			return false;
 		}
-	},
+	}
 
 	/**
-	 * @override core
-	 * @param {any} event Event object
-	 * @param {any} range range object
-	 * @param {Element} line Current line element
+	 * @editorMethod Editor.EventManager
+	 * @description Executes the event function of "keyup".
+	 * @param {__se__PluginKeyEventInfo} params
 	 */
 	onKeyUp({ line }) {
-		if (this._shift && domUtils.getParentElement(line, domUtils.isTableCell) === this._fixedCell) {
+		this.__s = false;
+		if (this._shift && dom.query.getParentElement(line, dom.check.isTableCell) === this._fixedCell) {
 			this._deleteStyleSelectedCells();
 			this._toggleEditor(true);
 			this.__removeGlobalEvents();
 		}
 		this._shift = false;
-	},
+	}
 
 	/**
-	 * @override ColorPicker
+	 * @editorMethod Modules.ColorPicker
+	 * @description Executes the method called when a button of "ColorPicker" module is clicked.
+	 * @param {string} color - Color code (hex)
 	 */
 	colorPickerAction(color) {
 		const target = this.propTargets[`${this.sliderType}_color`];
 		target.style.borderColor = target.value = color;
 		this.controller_colorPicker.close();
-	},
+	}
 
 	/**
-	 * @override controller
-	 * @param {Element} target Target button element
-	 * @returns
+	 * @editorMethod Modules.Controller
+	 * @description Executes the method that is called when a button is clicked in the "controller".
+	 * @param {HTMLButtonElement} target Target button element
 	 */
 	controllerAction(target) {
 		const command = target.getAttribute('data-command');
@@ -614,7 +723,7 @@ Table.prototype = {
 				this._onColorPalette(target, value, value === 'border' ? border_color : value === 'back' ? back_color : font_color);
 				break;
 			case 'props_font_style':
-				domUtils.toggleClass(this.propTargets[`font_${value}`], 'on');
+				dom.utils.toggleClass(this.propTargets[`font_${value}`], 'on');
 				break;
 			case 'props_submit':
 				this._submitProps(target);
@@ -627,7 +736,7 @@ Table.prototype = {
 				// alignment
 				this._setAlignProps(this.propTargets.cell_alignment, this._propsAlignCache, true);
 				this._setAlignProps(this.propTargets.cell_alignment_vertical, this._propsVerticalAlignCache, true);
-				if (domUtils.isTable(propsCache[0][0]) && this._figure) {
+				if (dom.check.isTable(propsCache[0][0]) && this._figure) {
 					this._figure.style.float = this._propsAlignCache;
 				}
 				break;
@@ -646,19 +755,19 @@ Table.prototype = {
 				break;
 			case 'resize':
 				this._maxWidth = !this._maxWidth;
-				this.setTableStyle('width', false);
+				this._setTableStyle('width', false);
 				this._historyPush();
 				this.component.select(this._element, Table.key, true);
 				break;
 			case 'layout':
 				this._fixedColumn = !this._fixedColumn;
-				this.setTableStyle('column', false);
+				this._setTableStyle('column', false);
 				this._historyPush();
 				this.component.select(this._element, Table.key, true);
 				break;
 			case 'remove': {
 				const emptyDiv = this._figure?.parentNode;
-				domUtils.removeItem(this._figure);
+				dom.utils.removeItem(this._figure);
 				this._closeController();
 
 				if (emptyDiv !== this.editor.frameContext.get('wysiwyg'))
@@ -680,12 +789,13 @@ Table.prototype = {
 		}
 
 		if (!/^(remove|props_|on|open|merge)/.test(command)) {
-			this.setCellControllerPosition(this._tdElement, this._shift);
+			this._setCellControllerPosition(this._tdElement, this._shift);
 		}
-	},
+	}
 
 	/**
-	 * @override controller
+	 * @editorMethod Modules.Controller
+	 * @description Executes the method called when the "controller" is closed.
 	 */
 	close() {
 		this.__removeGlobalEvents();
@@ -719,19 +829,26 @@ Table.prototype = {
 		this._fixedCellName = null;
 
 		const { border_format, border_color, border_style, border_width, back_color, font_color, cell_alignment, cell_alignment_vertical, font_bold, font_underline, font_italic, font_strike } = this.propTargets;
-		domUtils.removeClass([border_format, border_color, border_style, border_width, back_color, font_color, cell_alignment, cell_alignment_vertical, font_bold, font_underline, font_italic, font_strike], 'on');
-	},
+		dom.utils.removeClass([border_format, border_color, border_style, border_width, back_color, font_color, cell_alignment, cell_alignment_vertical, font_bold, font_underline, font_italic, font_strike], 'on');
+	}
 
+	/**
+	 * @description Selects cells in a table, handling single and multi-cell selection, and managing shift key behavior for extended selection.
+	 * @param {HTMLTableCellElement} tdElement The target table cell (`<td>`) element that is being selected.
+	 * @param {boolean} shift A flag indicating whether the shift key is held down for multi-cell selection.
+	 * If `true`, the selection will extend to include adjacent cells, otherwise it selects only the provided cell.
+	 */
 	selectCells(tdElement, shift) {
+		this.__s = shift;
 		if (!this._shift && !this._ref) this.__removeGlobalEvents();
 
 		this._shift = shift;
 		this._fixedCell = tdElement;
 		this._fixedCellName = tdElement.nodeName;
-		this._selectedTable = domUtils.getParentElement(tdElement, 'TABLE');
+		this._selectedTable = dom.query.getParentElement(tdElement, 'TABLE');
 
 		this._deleteStyleSelectedCells();
-		domUtils.addClass(tdElement, 'se-selected-cell-focus');
+		dom.utils.addClass(tdElement, 'se-selected-cell-focus');
 
 		if (!shift) {
 			this.__globalEvents.on = this.eventManager.addGlobalEvent('mousemove', this._bindMultiOn, false);
@@ -742,30 +859,41 @@ Table.prototype = {
 
 		this.__globalEvents.off = this.eventManager.addGlobalEvent('mouseup', this._bindMultiOff, false);
 		this.__globalEvents.touchOff = this.eventManager.addGlobalEvent('touchmove', this._bindTouchOff, false);
-	},
+	}
 
-	seTableInfo(element) {
-		const table = (this._element = this._selectedTable || domUtils.getParentElement(element, 'TABLE'));
-		this._figure = domUtils.getParentElement(table, domUtils.isFigure) || table;
-		return table;
-	},
+	/**
+	 * @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) {
+		const table = (this._element = this._selectedTable || dom.query.getParentElement(element, 'TABLE'));
+		this._figure = dom.query.getParentElement(table, dom.check.isFigure) || table;
+		return /** @type {HTMLTableElement} */ (table);
+	}
 
+	/**
+	 * @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, reset) {
-		const table = this.seTableInfo(tdElement);
-		this._trElement = tdElement.parentNode;
+		const table = this.setTableInfo(tdElement);
+		if (!table) return;
+		this._trElement = /** @type {HTMLTableRowElement} */ (tdElement.parentNode);
 
 		// hedaer
-		if (table.querySelector('thead')) domUtils.addClass(this.headerButton, 'active');
-		else domUtils.removeClass(this.headerButton, 'active');
+		if (table.querySelector('thead')) dom.utils.addClass(this.headerButton, 'active');
+		else dom.utils.removeClass(this.headerButton, 'active');
 
 		// caption
-		if (table.querySelector('caption')) domUtils.addClass(this.captionButton, 'active');
-		else domUtils.removeClass(this.captionButton, 'active');
+		if (table.querySelector('caption')) dom.utils.addClass(this.captionButton, 'active');
+		else dom.utils.removeClass(this.captionButton, 'active');
 
 		if (reset || this._physical_cellCnt === 0) {
 			if (this._tdElement !== tdElement) {
 				this._tdElement = tdElement;
-				this._trElement = tdElement.parentNode;
+				this._trElement = /** @type {HTMLTableRowElement} */ (tdElement.parentNode);
 			}
 
 			if (!this._selectedCells || this._selectedCells.length === 0) this._selectedCells = [tdElement];
@@ -854,30 +982,39 @@ Table.prototype = {
 			rowSpanArr = null;
 			spanIndex = null;
 		}
-	},
+	}
 
+	/**
+	 * @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) {
-		const table = this.seTableInfo(trElement);
+		const table = this.setTableInfo(trElement);
 		const rows = (this._trElements = table.rows);
 		this._rowCnt = rows.length;
 		this._rowIndex = trElement.rowIndex;
-	},
+	}
 
+	/**
+	 * @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, option) {
 		const table = this._element;
 		const isRow = type === 'row';
 
 		if (isRow) {
-			const tableAttr = this._trElement.parentNode;
+			const tableAttr = this._trElement.parentElement;
 			if (/^THEAD$/i.test(tableAttr.nodeName)) {
 				if (option === 'up') {
 					return;
 				} else if (!tableAttr.nextElementSibling || !/^TBODY$/i.test(tableAttr.nextElementSibling.nodeName)) {
 					if (!option) {
-						domUtils.removeItem(this._figure);
+						dom.utils.removeItem(this._figure);
 						this._closeController();
 					} else {
-						table.innerHTML += '<tbody><tr>' + CreateCells('td', this._logical_cellCnt, false) + '</tr></tbody>';
+						table.innerHTML += '<tbody><tr>' + CreateCellsString('td', this._logical_cellCnt) + '</tr></tbody>';
 					}
 					return;
 				}
@@ -959,16 +1096,26 @@ Table.prototype = {
 			const children = table.children;
 			for (let i = 0; i < children.length; i++) {
 				if (children[i].children.length === 0) {
-					domUtils.removeItem(children[i]);
+					dom.utils.removeItem(children[i]);
 					i--;
 				}
 			}
 
-			if (table.children.length === 0) domUtils.removeItem(table);
+			if (table.children.length === 0) dom.utils.removeItem(table);
 		}
-	},
+	}
 
+	/**
+	 * @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=} [positionResetElement] The element to reset the position of (optional). This can be the cell that triggered the row edit.
+	 */
 	editRow(option, positionResetElement) {
+		this._deleteStyleSelectedCells();
+
 		const remove = !option;
 		const up = option === 'up';
 		const originRowIndex = this._rowIndex;
@@ -1008,7 +1155,7 @@ Table.prototype = {
 
 					if (cell.rowSpan > 1) {
 						cell.rowSpan -= 1;
-						spanCells.push({ cell: cell.cloneNode(false), index: logcalIndex });
+						spanCells.push({ cell: /** @type {HTMLTableCellElement} */ (cell.cloneNode(false)), index: logcalIndex });
 					}
 				}
 
@@ -1047,12 +1194,20 @@ Table.prototype = {
 		}
 
 		if (!remove) {
-			this.setCellControllerPosition(positionResetElement || this._tdElement, true);
+			this._setCellControllerPosition(positionResetElement || this._tdElement, true);
 		} else {
 			this._closeController();
 		}
-	},
+	}
 
+	/**
+	 * @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=} [positionResetElement] The element to reset the position of (optional). This can be the cell that triggered the column edit.
+	 */
 	editCell(option, positionResetElement) {
 		const remove = !option;
 		const left = option === 'left';
@@ -1172,7 +1327,7 @@ Table.prototype = {
 				}
 
 				if (insertIndex !== null && cells.length > 0) {
-					newCell = CreateCells(cells[0].nodeName, 0, true);
+					newCell = CreateCellsHTML(cells[0].nodeName);
 					newCell = row.insertBefore(newCell, cells[insertIndex]);
 				}
 			}
@@ -1182,16 +1337,16 @@ Table.prototype = {
 		if (colgroup) {
 			const cols = colgroup.querySelectorAll('col');
 			if (remove) {
-				domUtils.removeItem(cols[insertIndex]);
+				dom.utils.removeItem(cols[insertIndex]);
 			} else {
 				let totalW = 0;
 				for (let i = 0, len = cols.length, w; i < len; i++) {
 					w = numbers.get(cols[i].style.width);
-					w -= Math.round((w * len * 0.1) / 2, CELL_DECIMAL_END);
+					w -= Math.round((w * len * 0.1) / 2);
 					totalW += w;
 					cols[i].style.width = `${w}%`;
 				}
-				const newCol = domUtils.createElement('col', { style: `width:${100 - totalW}%` });
+				const newCol = dom.utils.createElement('col', { style: `width:${100 - totalW}%` });
 				colgroup.insertBefore(newCol, cols[insertIndex]);
 			}
 		}
@@ -1199,12 +1354,12 @@ Table.prototype = {
 		if (remove) {
 			let removeFirst, removeEnd;
 			for (let r = 0, rLen = removeCell.length, row; r < rLen; r++) {
-				row = removeCell[r].parentNode;
-				domUtils.removeItem(removeCell[r]);
+				row = /** @type {HTMLTableRowElement} */ (removeCell[r].parentNode);
+				dom.utils.removeItem(removeCell[r]);
 				if (row.cells.length === 0) {
-					if (!removeFirst) removeFirst = domUtils.getArrayIndex(rows, row);
-					removeEnd = domUtils.getArrayIndex(rows, row);
-					domUtils.removeItem(row);
+					if (!removeFirst) removeFirst = dom.utils.getArrayIndex(rows, row);
+					removeEnd = dom.utils.getArrayIndex(rows, row);
+					dom.utils.removeItem(row);
 				}
 			}
 
@@ -1215,16 +1370,27 @@ Table.prototype = {
 
 			this._closeController();
 		} else {
-			this.setCellControllerPosition(positionResetElement || this._tdElement, true);
+			this._setCellControllerPosition(positionResetElement || this._tdElement, true);
 		}
-	},
+	}
 
+	/**
+	 * @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, rowIndex, cellCnt) {
 		const newRow = table.insertRow(rowIndex);
-		newRow.innerHTML = CreateCells('td', cellCnt, false);
+		newRow.innerHTML = CreateCellsString('td', cellCnt);
 		return newRow;
-	},
+	}
 
+	/**
+	 * @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.
+	 */
 	mergeCells() {
 		const ref = this._ref;
 		const selectedCells = this._selectedCells;
@@ -1239,17 +1405,17 @@ Table.prototype = {
 
 		for (let i = 1, len = selectedCells.length, cell, ch; i < len; i++) {
 			cell = selectedCells[i];
-			if (row !== cell.parentNode) row = cell.parentNode;
+			if (row !== cell.parentNode) row = /** @type {HTMLTableRowElement} */ (cell.parentNode);
 
 			ch = cell.children;
 			for (let c = 0, cLen = ch.length; c < cLen; c++) {
-				if (this.format.isLine(ch[c]) && domUtils.isZeroWith(ch[c].textContent)) {
-					domUtils.removeItem(ch[c]);
+				if (this.format.isLine(ch[c]) && dom.check.isZeroWidth(ch[c].textContent)) {
+					dom.utils.removeItem(ch[c]);
 				}
 			}
 
 			mergeHTML += cell.innerHTML;
-			domUtils.removeItem(cell);
+			dom.utils.removeItem(cell);
 
 			if (row.cells.length === 0) {
 				if (!emptyRowFirst) emptyRowFirst = row;
@@ -1260,8 +1426,8 @@ Table.prototype = {
 
 		if (emptyRowFirst) {
 			const rows = this._trElements;
-			const rowIndexFirst = domUtils.getArrayIndex(rows, emptyRowFirst);
-			const rowIndexLast = domUtils.getArrayIndex(rows, emptyRowLast || emptyRowFirst);
+			const rowIndexFirst = dom.utils.getArrayIndex(rows, emptyRowFirst);
+			const rowIndexLast = dom.utils.getArrayIndex(rows, emptyRowLast || emptyRowFirst);
 			const removeRows = [];
 
 			for (let i = 0, cells; i <= rowIndexLast; i++) {
@@ -1281,7 +1447,7 @@ Table.prototype = {
 			}
 
 			for (let i = 0, len = removeRows.length; i < len; i++) {
-				domUtils.removeItem(removeRows[i]);
+				dom.utils.removeItem(removeRows[i]);
 			}
 		}
 
@@ -1289,53 +1455,65 @@ Table.prototype = {
 		mergeCell.colSpan = cs;
 		mergeCell.rowSpan = rs;
 
-		this.setMergeSplitButton(true, false);
-		this.setController(mergeCell);
+		this._setMergeSplitButton(true, false);
+		this._setController(mergeCell);
 
 		this.editor.focusEdge(mergeCell);
 		this._historyPush();
-	},
+	}
 
+	/**
+	 * @description Toggles the visibility of the table header (`<thead>`). If the header is present, it is removed; if absent, it is added.
+	 */
 	toggleHeader() {
 		const btn = this.headerButton;
-		const active = domUtils.hasClass(btn, 'active');
+		const active = dom.utils.hasClass(btn, 'active');
 		const table = this._element;
 
 		if (!active) {
-			const header = domUtils.createElement('THEAD');
-			header.innerHTML = '<tr>' + CreateCells('th', this._logical_cellCnt, false) + '</tr>';
+			const header = dom.utils.createElement('THEAD');
+			header.innerHTML = '<tr>' + CreateCellsString('th', this._logical_cellCnt) + '</tr>';
 			table.insertBefore(header, table.firstElementChild);
 		} else {
-			domUtils.removeItem(table.querySelector('thead'));
+			dom.utils.removeItem(table.querySelector('thead'));
 		}
 
-		domUtils.toggleClass(btn, 'active');
+		dom.utils.toggleClass(btn, 'active');
 
 		if (/TH/i.test(this._tdElement.nodeName)) {
 			this._closeController();
 		} else {
-			this.setCellControllerPosition(this._tdElement, false);
+			this._setCellControllerPosition(this._tdElement, false);
 		}
-	},
+	}
 
+	/**
+	 * @description Toggles the visibility of the table caption (`<caption>`). If the caption is present, it is removed; if absent, it is added.
+	 */
 	toggleCaption() {
 		const btn = this.captionButton;
-		const active = domUtils.hasClass(btn, 'active');
+		const active = dom.utils.hasClass(btn, 'active');
 		const table = this._element;
 
 		if (!active) {
-			const caption = domUtils.createElement('CAPTION', { class: `se-table-caption-${this.captionPosition}` });
+			const caption = dom.utils.createElement('CAPTION', { class: `se-table-caption-${this.captionPosition}` });
 			caption.innerHTML = '<div><br></div>';
 			table.insertBefore(caption, table.firstElementChild);
 		} else {
-			domUtils.removeItem(table.querySelector('caption'));
+			dom.utils.removeItem(table.querySelector('caption'));
 		}
 
-		domUtils.toggleClass(btn, 'active');
-		this.setCellControllerPosition(this._tdElement, false);
-	},
+		dom.utils.toggleClass(btn, 'active');
+		this._setCellControllerPosition(this._tdElement, false);
+	}
 
-	setTableStyle(styles, ondisplay) {
+	/**
+	 * @private
+	 * @description Updates table styles.
+	 * @param {string} styles - Styles to update.
+	 * @param {boolean} ondisplay - Whether to update display.
+	 */
+	_setTableStyle(styles, ondisplay) {
 		if (styles.includes('width')) {
 			const targets = this._figure;
 			if (!targets) return;
@@ -1351,24 +1529,30 @@ Table.prototype = {
 				if (!ondisplay) targets.style.width = '100%';
 			}
 
-			domUtils.changeElement(this.resizeButton.firstElementChild, sizeIcon);
-			domUtils.changeTxt(this.resizeText, text);
+			dom.utils.changeElement(this.resizeButton.firstElementChild, sizeIcon);
+			dom.utils.changeTxt(this.resizeText, text);
 		}
 
 		if (styles.includes('column')) {
 			if (!this._fixedColumn) {
-				domUtils.removeClass(this._element, 'se-table-layout-fixed');
-				domUtils.addClass(this._element, 'se-table-layout-auto');
-				domUtils.removeClass(this.columnFixedButton, 'active');
+				dom.utils.removeClass(this._element, 'se-table-layout-fixed');
+				dom.utils.addClass(this._element, 'se-table-layout-auto');
+				dom.utils.removeClass(this.columnFixedButton, 'active');
 			} else {
-				domUtils.removeClass(this._element, 'se-table-layout-auto');
-				domUtils.addClass(this._element, 'se-table-layout-fixed');
-				domUtils.addClass(this.columnFixedButton, 'active');
+				dom.utils.removeClass(this._element, 'se-table-layout-auto');
+				dom.utils.addClass(this._element, 'se-table-layout-fixed');
+				dom.utils.addClass(this.columnFixedButton, 'active');
 			}
 		}
-	},
+	}
 
-	setMergeSplitButton(fixedCell, selectedCell) {
+	/**
+	 * @private
+	 * @description Sets the merge/split button visibility.
+	 * @param {boolean} fixedCell - Whether a single cell is selected.
+	 * @param {boolean} selectedCell - Whether multiple cells are selected.
+	 */
+	_setMergeSplitButton(fixedCell, selectedCell) {
 		if (!selectedCell || !selectedCell || fixedCell === selectedCell) {
 			this.splitButton.style.display = 'block';
 			this.mergeButton.style.display = 'none';
@@ -1376,67 +1560,70 @@ Table.prototype = {
 			this.splitButton.style.display = 'none';
 			this.mergeButton.style.display = 'block';
 		}
-	},
+	}
 
 	/**
-	 * @override fileManager
-	 * @param {Element} target Target element
+	 * @private
+	 * @description Sets the controller position for a cell.
+	 * @param {HTMLTableCellElement} tdElement - The target table cell.
 	 */
-	select(target) {
-		this._figureOpen(target);
-
-		const targetWidth = this._figure?.style.width || '100%';
-		this._maxWidth = targetWidth === '100%';
-		this._fixedColumn = domUtils.hasClass(target, 'se-table-layout-fixed') || target.style.tableLayout === 'fixed';
-		this.setTableStyle(this._maxWidth ? 'width|column' : 'width', true);
-
-		if (_DragHandle.get('__overInfo') === ON_OVER_COMPONENT) return;
-
-		if (!this._tdElement) return;
-		this.setCellInfo(this._tdElement, true);
-
-		// controller open
-		const figureEl = domUtils.getParentElement(target, domUtils.isFigure);
-		this.controller_table.open(figureEl, null, { isWWTarget: false, initMethod: null, addOffset: null });
-
-		const addOffset = !this.cellControllerTop ? null : this.controller_table.form.style.display === 'block' ? { left: this.controller_table.form.offsetWidth + 2 } : null;
-		this.controller_cell.open(this._tdElement, this.cellControllerTop ? figureEl : null, { isWWTarget: false, initMethod: null, addOffset: addOffset });
-	},
-
-	setController(tdElement) {
+	_setController(tdElement) {
 		if (!this.selection.get().isCollapsed && !this._selectedCell) {
 			this._deleteStyleSelectedCells();
 			return;
 		}
 
 		this._tdElement = tdElement;
-		domUtils.addClass(tdElement, 'se-selected-cell-focus');
-		const tableElement = this._element || this._selectedTable || domUtils.getParentElement(tdElement, 'TABLE');
+		dom.utils.addClass(tdElement, 'se-selected-cell-focus');
+		const tableElement = this._element || this._selectedTable || dom.query.getParentElement(tdElement, 'TABLE');
 		this.component.select(tableElement, Table.key, true);
-	},
+	}
 
-	setCellControllerPosition(tdElement, reset) {
+	/**
+	 * @private
+	 * @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, reset) {
 		this.setCellInfo(tdElement, reset);
-		this.controller_cell.resetPosition(this.cellControllerTop ? domUtils.getParentElement(tdElement, domUtils.isTable) : tdElement);
-	},
+		this.controller_cell.resetPosition(this.cellControllerTop ? dom.query.getParentElement(tdElement, dom.check.isTable) : tdElement);
+	}
 
+	/**
+	 * @private
+	 * @description Adds a new entry to the history stack.
+	 */
 	_historyPush() {
 		this._deleteStyleSelectedCells();
 		this.history.push(false);
 		this._recallStyleSelectedCells();
-	},
+	}
 
+	/**
+	 * @private
+	 * @description Opens the figure.
+	 * @param {Node} target - The target figure element.
+	 */
 	_figureOpen(target) {
 		this.figure.open(target, { nonResizing: true, nonSizeInfo: true, nonBorder: true, figureTarget: true, __fileManagerInfo: false });
-	},
+	}
 
+	/**
+	 * @private
+	 * @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, startX, startWidth, isLeftEdge) {
 		this._setResizeLinePosition(this._figure, this._tdElement, this._resizeLinePrev, isLeftEdge);
 		this._resizeLinePrev.style.display = 'block';
 		const prevValue = col.style.width;
-		const nextCol = col.nextElementSibling;
+		const nextCol = /** @type {HTMLElement} */ (col.nextElementSibling);
 		const nextColPrevValue = nextCol.style.width;
-		const realWidth = domUtils.hasClass(this._element, 'se-table-layout-fixed') ? nextColPrevValue : converter.getWidthInPercentage(col);
+		const realWidth = dom.utils.hasClass(this._element, 'se-table-layout-fixed') ? nextColPrevValue : converter.getWidthInPercentage(col);
 
 		if (_DragHandle.get('__dragHandler')) _DragHandle.get('__dragHandler').style.display = 'none';
 		this._addResizeGlobalEvents(
@@ -1465,8 +1652,24 @@ Table.prototype = {
 				this._stopResize(nextCol, nextColPrevValue, 'width', e);
 			}
 		);
-	},
+	}
 
+	/**
+	 * @private
+	 * @description Resizes a table cell.
+	 * @param {HTMLElement} col The column element.
+	 * @param {HTMLElement} nextCol The next column element.
+	 * @param {HTMLElement} figure The table figure element.
+	 * @param {HTMLElement} tdEl The table cell element.
+	 * @param {HTMLElement} resizeLine The resize line element.
+	 * @param {boolean} isLeftEdge Whether the resizing is on the left edge.
+	 * @param {number} startX The starting X position.
+	 * @param {number} startWidth The initial width of the column.
+	 * @param {number} prevWidthPercent The previous width percentage.
+	 * @param {number} nextColWidthPercent The next column's width percentage.
+	 * @param {number} tableWidth The total width of the table.
+	 * @param {MouseEvent} e The mouse event.
+	 */
 	_cellResize(col, nextCol, figure, tdEl, resizeLine, isLeftEdge, startX, startWidth, prevWidthPercent, nextColWidthPercent, tableWidth, e) {
 		const deltaX = e.clientX - startX;
 		const newWidthPx = startWidth + deltaX;
@@ -1478,8 +1681,15 @@ Table.prototype = {
 			nextCol.style.width = `${nextColWidthPercent + delta}%`;
 			this._setResizeLinePosition(figure, tdEl, resizeLine, isLeftEdge);
 		}
-	},
+	}
 
+	/**
+	 * @private
+	 * @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, startY, startHeight) {
 		this._setResizeRowPosition(this._figure, row, this._resizeLinePrev);
 		this._resizeLinePrev.style.display = 'block';
@@ -1488,20 +1698,36 @@ Table.prototype = {
 		this._addResizeGlobalEvents(
 			this._rowResize.bind(this, row, this._figure, this._resizeLine, startY, startHeight),
 			() => {
-				this.__removeGlobalEvents(this);
+				this.__removeGlobalEvents();
 				this.history.push(true);
 			},
 			this._stopResize.bind(this, row, prevValue, 'height')
 		);
-	},
+	}
 
+	/**
+	 * @private
+	 * @description Resizes a table row.
+	 * @param {HTMLElement} row The table row element.
+	 * @param {HTMLElement} figure The table figure element.
+	 * @param {HTMLElement} resizeLine The resize line element.
+	 * @param {number} startY The starting Y position.
+	 * @param {number} startHeight The initial height of the row.
+	 * @param {MouseEvent} e The mouse event.
+	 */
 	_rowResize(row, figure, resizeLine, startY, startHeight, e) {
 		const deltaY = e.clientY - startY;
 		const newHeightPx = startHeight + deltaY;
 		row.style.height = `${newHeightPx}px`;
 		this._setResizeRowPosition(figure, row, resizeLine);
-	},
+	}
 
+	/**
+	 * @private
+	 * @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, isLeftEdge) {
 		const figure = this._figure;
 		this._setResizeLinePosition(figure, figure, this._resizeLinePrev, isLeftEdge);
@@ -1518,8 +1744,19 @@ Table.prototype = {
 			},
 			this._stopResize.bind(this, figure, figure.style.width, 'width')
 		);
-	},
+	}
 
+	/**
+	 * @private
+	 * @description Resizes the table figure.
+	 * @param {HTMLElement} figure The table figure element.
+	 * @param {HTMLElement} resizeLine The resize line element.
+	 * @param {boolean} isLeftEdge Whether the resizing is on the left edge.
+	 * @param {number} startX The starting X position.
+	 * @param {number} startWidth The initial width of the figure.
+	 * @param {number} constNum A constant number used for width calculation.
+	 * @param {MouseEvent} e The mouse event.
+	 */
 	_figureResize(figure, resizeLine, isLeftEdge, startX, startWidth, constNum, e) {
 		const deltaX = isLeftEdge ? startX - e.clientX : e.clientX - startX;
 		const newWidthPx = startWidth + deltaX;
@@ -1529,78 +1766,126 @@ Table.prototype = {
 			figure.style.width = `${newWidthPercent}%`;
 			this._setResizeLinePosition(figure, figure, resizeLine, isLeftEdge);
 		}
-	},
+	}
 
+	/**
+	 * @private
+	 * @description Sets the resize line position.
+	 * @param {HTMLElement} figure The table figure element.
+	 * @param {HTMLElement} target The target element.
+	 * @param {HTMLElement} resizeLine The resize line element.
+	 * @param {boolean} isLeftEdge Whether the resizing is on the left edge.
+	 */
 	_setResizeLinePosition(figure, target, resizeLine, isLeftEdge) {
-		const tdOffset = this.offset.get(target);
-		const tableOffset = this.offset.get(figure);
+		const tdOffset = this.offset.getLocal(target);
+		const tableOffset = this.offset.getLocal(figure);
 		resizeLine.style.left = `${tdOffset.left + (isLeftEdge ? 0 : target.offsetWidth)}px`;
 		resizeLine.style.top = `${tableOffset.top}px`;
 		resizeLine.style.height = `${figure.offsetHeight}px`;
-	},
+	}
 
+	/**
+	 * @private
+	 * @description Sets the resize row position.
+	 * @param {HTMLElement} figure The table figure element.
+	 * @param {HTMLElement} target The target row element.
+	 * @param {HTMLElement} resizeLine The resize line element.
+	 */
 	_setResizeRowPosition(figure, target, resizeLine) {
-		const rowOffset = this.offset.get(target);
-		const tableOffset = this.offset.get(figure);
+		const rowOffset = this.offset.getLocal(target);
+		const tableOffset = this.offset.getLocal(figure);
 		resizeLine.style.top = `${rowOffset.top + target.offsetHeight}px`;
 		resizeLine.style.left = `${tableOffset.left}px`;
 		resizeLine.style.width = `${figure.offsetWidth}px`;
-	},
+	}
 
+	/**
+	 * @private
+	 * @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, prevValue, styleProp, e) {
-		if (e.keyCode !== 27) return;
+		if (!keyCodeMap.isEsc(e.code)) return;
 		this.__removeGlobalEvents();
 		target.style[styleProp] = prevValue;
 		// figure reopen
 		if (styleProp === 'width') {
 			this.component.select(this._element, Table.key, true);
 		}
-	},
+	}
 
+	/**
+	 * @private
+	 * @description Deletes styles from selected table cells.
+	 */
 	_deleteStyleSelectedCells() {
-		domUtils.removeClass([this._fixedCell, this._selectedCell], 'se-selected-cell-focus');
+		dom.utils.removeClass([this._fixedCell, this._selectedCell], 'se-selected-cell-focus');
 		if (this._selectedTable) {
 			const selectedCells = this._selectedTable.querySelectorAll('.se-selected-table-cell');
 			for (let i = 0, len = selectedCells.length; i < len; i++) {
-				domUtils.removeClass(selectedCells[i], 'se-selected-table-cell');
+				dom.utils.removeClass(selectedCells[i], 'se-selected-table-cell');
 			}
 		}
-	},
+	}
 
+	/**
+	 * @private
+	 * @description Restores styles for selected table cells.
+	 */
 	_recallStyleSelectedCells() {
 		if (this._selectedCells) {
 			const selectedCells = this._selectedCells;
 			for (let i = 0, len = selectedCells.length; i < len; i++) {
-				domUtils.addClass(selectedCells[i], 'se-selected-table-cell');
+				dom.utils.addClass(selectedCells[i], 'se-selected-table-cell');
 			}
 		}
-	},
+	}
 
+	/**
+	 * @private
+	 * @description Adds global event listeners for resizing.
+	 * @param {(...args: *) => void} resizeFn The function handling the resize event.
+	 * @param {(...args: *) => void} stopFn The function handling the stop event.
+	 * @param {(...args: *) => void} keyDownFn The function handling the keydown event.
+	 */
 	_addResizeGlobalEvents(resizeFn, stopFn, keyDownFn) {
 		this.__globalEvents.resize = this.eventManager.addGlobalEvent('mousemove', resizeFn, false);
 		this.__globalEvents.resizeStop = this.eventManager.addGlobalEvent('mouseup', stopFn, false);
 		this.__globalEvents.resizeKeyDown = this.eventManager.addGlobalEvent('keydown', keyDownFn, false);
 		this._resizing = true;
-	},
+	}
 
+	/**
+	 * @private
+	 * @description Enables or disables editor mode.
+	 * @param {boolean} enabled Whether to enable or disable the editor.
+	 */
 	_toggleEditor(enabled) {
 		const wysiwyg = this.editor.frameContext.get('wysiwyg');
-		wysiwyg.setAttribute('contenteditable', enabled);
-		if (enabled) domUtils.removeClass(wysiwyg, 'se-disabled');
-		else domUtils.addClass(wysiwyg, 'se-disabled');
-	},
+		if (enabled) dom.utils.removeClass(wysiwyg, 'se-disabled');
+		else dom.utils.addClass(wysiwyg, 'se-disabled');
+	}
 
+	/**
+	 * @private
+	 * @description Updates control properties.
+	 * @param {string} type The type of control property.
+	 */
 	_setCtrlProps(type) {
 		this._typeCache = type;
 		const isTable = type === 'table';
 		const targets = isTable ? [this._element] : this._selectedCells;
 		if (!targets || targets.length === 0) return;
 
-		const { border_format, border_color, border_style, border_width, back_color, font_color, cell_alignment, cell_alignment_vertical, font_bold, font_underline, font_italic, font_strike } = this.propTargets;
+		const { border_format, border_color, border_style, border_width, back_color, font_color, cell_alignment, cell_alignment_vertical, cell_alignment_table_text, font_bold, font_underline, font_italic, font_strike } = this.propTargets;
 		const { border, backgroundColor, color, textAlign, verticalAlign, fontWeight, textDecoration, fontStyle } = _w.getComputedStyle(targets[0]);
 		const cellBorder = this._getBorderStyle(border);
 
-		cell_alignment.querySelector('[data-value="justify"]').style.display = isTable ? 'none' : '';
+		/** @type {HTMLElement} */ (cell_alignment.querySelector('[data-value="justify"]')).style.display = isTable ? 'none' : '';
+		cell_alignment_table_text.style.display = isTable ? '' : 'none';
 		if (isTable) cell_alignment_vertical.style.display = 'none';
 		else cell_alignment_vertical.style.display = '';
 
@@ -1632,7 +1917,7 @@ Table.prototype = {
 			if (fontColor !== converter.rgb2hex(color)) fontColor = '';
 			if (align !== (isTable ? this._figure?.style.float : textAlign)) align = '';
 			if (align_v && align_v !== verticalAlign) align_v = '';
-			if (bold && bold !== /.+/.test(fontWeight)) bold = '';
+			if (bold && bold !== /.+/.test(fontWeight)) bold = false;
 			if (underline && underline !== /underline/i.test(textDecoration)) underline = false;
 			if (strike && strike !== /line-through/i.test(textDecoration)) strike = false;
 			if (italic && italic !== /italic/i.test(fontStyle)) italic = false;
@@ -1644,7 +1929,7 @@ Table.prototype = {
 		// border - format
 		border_format.firstElementChild.innerHTML = this.icons[BORDER_FORMATS[targets.length === 1 ? 'outside' : 'all']];
 		border_format.setAttribute('se-border-format', 'all');
-		domUtils.removeClass(border_format, 'active');
+		dom.utils.removeClass(border_format, 'active');
 
 		// border - styles
 		b_style = b_style || BORDER_LIST[0];
@@ -1658,43 +1943,64 @@ Table.prototype = {
 		font_color.value = font_color.style.borderColor = fontColor;
 
 		// font style
-		if (bold) domUtils.addClass(font_bold, 'on');
-		if (underline) domUtils.addClass(font_underline, 'on');
-		if (strike) domUtils.addClass(font_strike, 'on');
-		if (italic) domUtils.addClass(font_italic, 'on');
+		if (bold) dom.utils.addClass(font_bold, 'on');
+		if (underline) dom.utils.addClass(font_underline, 'on');
+		if (strike) dom.utils.addClass(font_strike, 'on');
+		if (italic) dom.utils.addClass(font_italic, 'on');
 
 		// align
 		this._setAlignProps(cell_alignment, (this._propsAlignCache = align), true);
 		this._setAlignProps(cell_alignment_vertical, (this._propsVerticalAlignCache = align_v), true);
-	},
+	}
 
+	/**
+	 * @private
+	 * @description Sets text alignment properties.
+	 * @param {Element} el The element to apply alignment to.
+	 * @param {string} align The alignment value.
+	 * @param {boolean} reset Whether to reset the alignment.
+	 */
 	_setAlignProps(el, align, reset) {
-		domUtils.removeClass(el.querySelectorAll('button'), 'on');
+		dom.utils.removeClass(el.querySelectorAll('button'), 'on');
 
 		if (!reset && el.getAttribute('se-cell-align') === align) {
 			el.setAttribute('se-cell-align', '');
 			return;
 		}
 
-		domUtils.addClass(el.querySelector(`[data-value="${align}"]`), 'on');
+		dom.utils.addClass(el.querySelector(`[data-value="${align}"]`), 'on');
 		el.setAttribute('se-cell-align', align);
-	},
+	}
 
+	/**
+	 * @private
+	 * @description Disables or enables border properties.
+	 * @param {boolean} disabled Whether to disable or enable border properties.
+	 */
 	_disableBorderProps(disabled) {
 		const { border_color, border_width, palette_border_button } = this.propTargets;
 		if (disabled) {
-			border_color.setAttribute('disabled', true);
-			border_width.setAttribute('disabled', true);
-			palette_border_button.setAttribute('disabled', true);
-			border_width.setAttribute('disabled', true);
+			border_color.disabled = true;
+			border_width.disabled = true;
+			palette_border_button.disabled = true;
+			border_width.disabled = true;
 		} else {
-			border_color.removeAttribute('disabled');
-			border_width.removeAttribute('disabled');
-			palette_border_button.removeAttribute('disabled');
-			border_width.removeAttribute('disabled');
+			border_color.disabled = false;
+			border_width.disabled = false;
+			palette_border_button.disabled = false;
+			border_width.disabled = false;
 		}
-	},
+	}
 
+	/**
+	 * @private
+	 * @description Gets the border style.
+	 * @param {string} borderStyle The border style string.
+	 * @returns {{w: string, s: string, c: string}} The parsed border style object.
+	 * - w: The border width.
+	 * - s: The border style.
+	 * - c: The border color.
+	 */
 	_getBorderStyle(borderStyle) {
 		const parts = borderStyle.split(/\s(?![^()]*\))/);
 		let w = '',
@@ -1722,15 +2028,20 @@ Table.prototype = {
 		}
 
 		return { w, s, c: converter.rgb2hex(c) };
-	},
+	}
 
+	/**
+	 * @private
+	 * @description Applies properties to table cells.
+	 * @param {HTMLButtonElement} target The target element.
+	 */
 	_submitProps(target) {
 		try {
-			target.setAttribute('disabled', true);
+			target.disabled = true;
 
 			const isTable = this.controller_table.form.contains(this.controller_props.currentTarget);
 			const targets = isTable ? [this._element] : this._selectedCells;
-			const tr = targets[0];
+			const tr = /** @type {HTMLTableCellElement} */ (targets[0]);
 			const trStyles = _w.getComputedStyle(tr);
 			const { border_format, border_color, border_style, border_width, back_color, font_color, cell_alignment, cell_alignment_vertical } = this.propTargets;
 
@@ -1753,14 +2064,16 @@ Table.prototype = {
 				top: [],
 				right: [],
 				bottom: [],
-				middle: []
+				middle: [],
+				all: null
 			};
 
 			if (!isTable) {
+				const trRow = /** @type {HTMLTableRowElement} */ (tr.parentElement);
 				// --- target cells roof
 				let { rs, re, cs, ce } = this._ref || {
-					rs: tr.parentElement.rowIndex || 0,
-					re: tr.parentElement.rowIndex || 0,
+					rs: trRow.rowIndex || 0,
+					re: trRow.rowIndex || 0,
 					cs: tr.cellIndex || 0,
 					ce: tr.cellIndex || 0
 				};
@@ -1770,17 +2083,17 @@ Table.prototype = {
 				rs -= rs;
 				ce -= cs;
 				cs -= cs;
-				let prevRow = tr.parentNode;
+				let prevRow = /** @type {HTMLElement} */ (trRow);
 				for (let i = 0, cellCnt = 0, len = targets.length, e, es, rowIndex = 0, cellIndex, colspan, rowspan; i < len; i++, cellCnt++) {
-					e = targets[i];
+					e = /** @type {HTMLTableCellElement} */ (targets[i]);
 					colspan = e.colSpan;
 					rowspan = e.rowSpan;
 					cellIndex = e.cellIndex - cellStartIndex;
 
-					if (prevRow !== e.parentNode) {
+					if (prevRow !== e.parentElement) {
 						rowIndex++;
 						cellCnt = 0;
-						prevRow = e.parentNode;
+						prevRow = e.parentElement;
 					}
 
 					let c = 0;
@@ -1874,83 +2187,93 @@ Table.prototype = {
 			if (this._tdElement) {
 				this._recallStyleSelectedCells();
 				this.setCellInfo(this._tdElement, true);
-				domUtils.addClass(this._tdElement, 'se-selected-cell-focus');
+				dom.utils.addClass(this._tdElement, 'se-selected-cell-focus');
 			}
 		} catch (err) {
 			console.warn('[SUNEDITOR.plugins.table.setProps.error]', err);
 		} finally {
-			target.removeAttribute('disabled');
+			target.disabled = false;
 		}
-	},
+	}
 
+	/**
+	 * @private
+	 * @description Sets font styles.
+	 * @param {CSSStyleDeclaration} styles The style object to modify.
+	 */
 	_setFontStyle(styles) {
 		const { font_bold, font_italic, font_strike, font_underline } = this.propTargets;
-		styles.fontWeight = domUtils.hasClass(font_bold, 'on') ? 'bold' : '';
-		styles.fontStyle = domUtils.hasClass(font_italic, 'on') ? 'italic' : '';
-		styles.textDecoration = ((domUtils.hasClass(font_strike, 'on') ? 'line-through ' : '') + (domUtils.hasClass(font_underline, 'on') ? 'underline' : '')).trim();
-	},
+		styles.fontWeight = dom.utils.hasClass(font_bold, 'on') ? 'bold' : '';
+		styles.fontStyle = dom.utils.hasClass(font_italic, 'on') ? 'italic' : '';
+		styles.textDecoration = ((dom.utils.hasClass(font_strike, 'on') ? 'line-through ' : '') + (dom.utils.hasClass(font_underline, 'on') ? 'underline' : '')).trim();
+	}
 
 	/**
 	 * @private
-	 * @description Set border format
-	 * @param {Element[]} cells Target elements
-	 * @param {"all"|"inside"|"horizon"|"vertical"|"outside"|"left"|"top"|"right"|"bottom"} borderKey Border style
-	 * @param {number} s Border style
-	 * @param {boolean} isTable table selected
+	 * @description Sets border format and styles.
+	 * @param {{left: Node[], top: Node[], right: Node[], bottom: Node[], all: Node[]}} cells The table cells categorized by border positions.
+	 * @param {string} borderKey Border style ("all"|"inside"|"horizon"|"vertical"|"outside"|"left"|"top"|"right"|"bottom")
+	 * @param {string} s The border style value.
 	 */
 	_setBorderStyles(cells, borderKey, s) {
 		const { left, top, right, bottom, all } = cells;
 		switch (borderKey) {
 			case 'inside':
-				if (cells.length === 1) return;
-				domUtils.setStyle(
+				if (all.length === 1) return;
+				dom.utils.setStyle(
 					all.filter((c) => !bottom.includes(c)),
 					BORDER_NS.b,
 					s
 				);
-				domUtils.setStyle(
+				dom.utils.setStyle(
 					all.filter((c) => !right.includes(c)),
 					BORDER_NS.r,
 					s
 				);
 				break;
 			case 'horizon':
-				if (cells.length === 1) return;
-				domUtils.setStyle(
+				if (all.length === 1) return;
+				dom.utils.setStyle(
 					all.filter((c) => !bottom.includes(c)),
 					BORDER_NS.b,
 					s
 				);
 				break;
 			case 'vertical':
-				if (cells.length === 1) return;
-				domUtils.setStyle(
+				if (all.length === 1) return;
+				dom.utils.setStyle(
 					all.filter((c) => !right.includes(c)),
 					BORDER_NS.r,
 					s
 				);
 				break;
 			case 'outside':
-				domUtils.setStyle(left, BORDER_NS.l, s);
-				domUtils.setStyle(top, BORDER_NS.t, s);
-				domUtils.setStyle(right, BORDER_NS.r, s);
-				domUtils.setStyle(bottom, BORDER_NS.b, s);
+				dom.utils.setStyle(left, BORDER_NS.l, s);
+				dom.utils.setStyle(top, BORDER_NS.t, s);
+				dom.utils.setStyle(right, BORDER_NS.r, s);
+				dom.utils.setStyle(bottom, BORDER_NS.b, s);
 				break;
 			case 'left':
-				domUtils.setStyle(left, BORDER_NS.l, s);
+				dom.utils.setStyle(left, BORDER_NS.l, s);
 				break;
 			case 'top':
-				domUtils.setStyle(top, BORDER_NS.t, s);
+				dom.utils.setStyle(top, BORDER_NS.t, s);
 				break;
 			case 'right':
-				domUtils.setStyle(right, BORDER_NS.r, s);
+				dom.utils.setStyle(right, BORDER_NS.r, s);
 				break;
 			case 'bottom':
-				domUtils.setStyle(bottom, BORDER_NS.b, s);
+				dom.utils.setStyle(bottom, BORDER_NS.b, s);
 				break;
 		}
-	},
+	}
 
+	/**
+	 * @private
+	 * @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, endCell) {
 		const rows = this._selectedTable.rows;
 		this._deleteStyleSelectedCells();
@@ -1958,7 +2281,7 @@ Table.prototype = {
 		if (startCell === endCell) {
 			if (!this._shift) return;
 		} else {
-			domUtils.addClass(startCell, 'se-selected-table-cell');
+			dom.utils.addClass(startCell, 'se-selected-table-cell');
 		}
 
 		let findSelectedCell = true;
@@ -2034,7 +2357,7 @@ Table.prototype = {
 						break;
 					}
 
-					domUtils.addClass(cell, 'se-selected-table-cell');
+					dom.utils.addClass(cell, 'se-selected-table-cell');
 				}
 
 				if (rs > 0) {
@@ -2054,8 +2377,12 @@ Table.prototype = {
 			});
 			rowSpanArr = [];
 		}
-	},
+	}
 
+	/**
+	 * @private
+	 * @description Resets the table picker display.
+	 */
 	_resetTablePicker() {
 		if (!this.tableHighlight) return;
 
@@ -2067,10 +2394,14 @@ Table.prototype = {
 		unHighlight.width = '10em';
 		unHighlight.height = '10em';
 
-		domUtils.changeTxt(this.tableDisplay, '1 x 1');
+		dom.utils.changeTxt(this.tableDisplay, '1 x 1');
 		this.menu.dropdownOff();
-	},
+	}
 
+	/**
+	 * @private
+	 * @description Resets the alignment properties for table cells.
+	 */
 	_resetPropsAlign() {
 		const { cell_alignment } = this.propTargets;
 		const left = cell_alignment.querySelector('[data-value="left"]');
@@ -2079,35 +2410,54 @@ Table.prototype = {
 		const r_parent = right.parentElement;
 		l_parent.appendChild(right);
 		r_parent.appendChild(left);
-	},
+	}
 
+	/**
+	 * @private
+	 * @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.
+	 * @param {HTMLInputElement} color Color text input element.
+	 */
 	_onColorPalette(button, type, color) {
 		if (this.controller_colorPicker.isOpen && type === this.sliderType) {
 			this.controller_colorPicker.close();
 		} else {
 			this.sliderType = type;
-			domUtils.addClass(button, 'on');
+			dom.utils.addClass(button, 'on');
 			this.colorPicker.init(color?.value || '', button);
 			this.controller_colorPicker.open(button, null, { isWWTarget: false, initMethod: null, addOffset: null });
 		}
-	},
+	}
 
+	/**
+	 * @private
+	 * @description Closes table-related controllers.
+	 */
 	_closeController() {
 		this.component.deselect();
 		this.controller_table.close();
 		this.controller_cell.close();
-	},
+	}
 
+	/**
+	 * @private
+	 * @description Hides the resize line if it is visible.
+	 */
 	__hideResizeLine() {
 		if (this._resizeLine) {
 			this._resizeLine.style.display = 'none';
 			this._resizeLine = null;
 		}
-	},
+	}
 
+	/**
+	 * @private
+	 * @description Removes global event listeners and resets resize-related properties.
+	 */
 	__removeGlobalEvents() {
 		this._resizing = false;
-		this.editor.disableBackWrapper();
+		this.ui.disableBackWrapper();
 		this.__hideResizeLine();
 		if (this._resizeLinePrev) {
 			this._resizeLinePrev.style.display = 'none';
@@ -2117,372 +2467,457 @@ Table.prototype = {
 		for (const k in globalEvents) {
 			if (globalEvents[k]) globalEvents[k] = this.eventManager.removeGlobalEvent(globalEvents[k]);
 		}
-	},
-
-	constructor: Table
-};
-
-function IsResizeEls(node) {
-	return /^(TD|TH|TR)$/i.test(node?.nodeName);
-}
-
-function CheckCellEdge(event, tableCell) {
-	const startX = event.clientX;
-	const startWidth = numbers.get(_w.getComputedStyle(tableCell).width, CELL_DECIMAL_END);
-	const rect = tableCell.getBoundingClientRect();
-	const offsetX = Math.round(startX - rect.left);
-	const isLeft = offsetX <= CELL_SELECT_MARGIN;
-	const is = isLeft || startWidth - offsetX <= CELL_SELECT_MARGIN;
-
-	return {
-		is,
-		isLeft,
-		startX
-	};
-}
-
-function CheckRowEdge(event, tableCell) {
-	const startY = event.clientY;
-	const startHeight = numbers.get(_w.getComputedStyle(tableCell).height, CELL_DECIMAL_END);
-	const rect = tableCell.getBoundingClientRect();
-	const is = Math.ceil(startHeight + rect.top - startY) <= ROW_SELECT_MARGIN;
-
-	return {
-		is,
-		startY
-	};
-}
+	}
 
-function OnSplitCells(direction) {
-	const vertical = direction === 'vertical';
-	const currentCell = this._tdElement;
-	const rows = this._trElements;
-	const currentRow = this._trElement;
-	const index = this._logical_cellIndex;
-	const rowIndex = this._rowIndex;
-	const newCell = CreateCells(currentCell.nodeName, 0, true);
-
-	// vertical
-	if (vertical) {
-		const currentColSpan = currentCell.colSpan;
-		newCell.rowSpan = currentCell.rowSpan;
-
-		// colspan > 1
-		if (currentColSpan > 1) {
-			newCell.colSpan = Math.floor(currentColSpan / 2);
-			currentCell.colSpan = currentColSpan - newCell.colSpan;
-			currentRow.insertBefore(newCell, currentCell.nextElementSibling);
-		} else {
-			// colspan - 1
-			let rowSpanArr = [];
-			let spanIndex = [];
+	/**
+	 * @description Splits a table cell either vertically or horizontally.
+	 * @param {"vertical"|"horizontal"} direction The direction to split the cell.
+	 */
+	#OnSplitCells(direction) {
+		const vertical = direction === 'vertical';
+		const currentCell = this._tdElement;
+		const rows = this._trElements;
+		const currentRow = this._trElement;
+		const index = this._logical_cellIndex;
+		const rowIndex = this._rowIndex;
+		const newCell = CreateCellsHTML(currentCell.nodeName);
+
+		// vertical
+		if (vertical) {
+			const currentColSpan = currentCell.colSpan;
+			newCell.rowSpan = currentCell.rowSpan;
 
-			for (let i = 0, len = this._rowCnt, cells, colSpan; i < len; i++) {
-				cells = rows[i].cells;
-				colSpan = 0;
-				for (let c = 0, cLen = cells.length, cell, cs, rs, logcalIndex; c < cLen; c++) {
-					cell = cells[c];
-					cs = cell.colSpan - 1;
-					rs = cell.rowSpan - 1;
-					logcalIndex = c + colSpan;
+			// colspan > 1
+			if (currentColSpan > 1) {
+				newCell.colSpan = Math.floor(currentColSpan / 2);
+				currentCell.colSpan = currentColSpan - newCell.colSpan;
+				currentRow.insertBefore(newCell, currentCell.nextElementSibling);
+			} else {
+				// colspan - 1
+				let rowSpanArr = [];
+				let spanIndex = [];
 
-					if (spanIndex.length > 0) {
-						for (let r = 0, arr; r < spanIndex.length; r++) {
-							arr = spanIndex[r];
-							if (arr.row > i) continue;
-							if (logcalIndex >= arr.index) {
-								colSpan += arr.cs;
-								logcalIndex += arr.cs;
-								arr.rs -= 1;
-								arr.row = i + 1;
-								if (arr.rs < 1) {
-									spanIndex.splice(r, 1);
-									r--;
-								}
-							} else if (c === cLen - 1) {
-								arr.rs -= 1;
-								arr.row = i + 1;
-								if (arr.rs < 1) {
-									spanIndex.splice(r, 1);
-									r--;
+				for (let i = 0, len = this._rowCnt, cells, colSpan; i < len; i++) {
+					cells = rows[i].cells;
+					colSpan = 0;
+					for (let c = 0, cLen = cells.length, cell, cs, rs, logcalIndex; c < cLen; c++) {
+						cell = cells[c];
+						cs = cell.colSpan - 1;
+						rs = cell.rowSpan - 1;
+						logcalIndex = c + colSpan;
+
+						if (spanIndex.length > 0) {
+							for (let r = 0, arr; r < spanIndex.length; r++) {
+								arr = spanIndex[r];
+								if (arr.row > i) continue;
+								if (logcalIndex >= arr.index) {
+									colSpan += arr.cs;
+									logcalIndex += arr.cs;
+									arr.rs -= 1;
+									arr.row = i + 1;
+									if (arr.rs < 1) {
+										spanIndex.splice(r, 1);
+										r--;
+									}
+								} else if (c === cLen - 1) {
+									arr.rs -= 1;
+									arr.row = i + 1;
+									if (arr.rs < 1) {
+										spanIndex.splice(r, 1);
+										r--;
+									}
 								}
 							}
 						}
-					}
 
-					if (logcalIndex <= index && rs > 0) {
-						rowSpanArr.push({
-							index: logcalIndex,
-							cs: cs + 1,
-							rs: rs,
-							row: -1
-						});
-					}
+						if (logcalIndex <= index && rs > 0) {
+							rowSpanArr.push({
+								index: logcalIndex,
+								cs: cs + 1,
+								rs: rs,
+								row: -1
+							});
+						}
 
-					if (cell !== currentCell && logcalIndex <= index && logcalIndex + cs >= index + currentColSpan - 1) {
-						cell.colSpan += 1;
-						break;
-					}
+						if (cell !== currentCell && logcalIndex <= index && logcalIndex + cs >= index + currentColSpan - 1) {
+							cell.colSpan += 1;
+							break;
+						}
 
-					if (logcalIndex > index) break;
+						if (logcalIndex > index) break;
 
-					colSpan += cs;
+						colSpan += cs;
+					}
+
+					spanIndex = spanIndex.concat(rowSpanArr).sort(function (a, b) {
+						return a.index - b.index;
+					});
+					rowSpanArr = [];
 				}
 
-				spanIndex = spanIndex.concat(rowSpanArr).sort(function (a, b) {
-					return a.index - b.index;
-				});
-				rowSpanArr = [];
+				currentRow.insertBefore(newCell, currentCell.nextElementSibling);
 			}
+		} else {
+			// horizontal
+			const currentRowSpan = currentCell.rowSpan;
+			newCell.colSpan = currentCell.colSpan;
 
-			currentRow.insertBefore(newCell, currentCell.nextElementSibling);
-		}
-	} else {
-		// horizontal
-		const currentRowSpan = currentCell.rowSpan;
-		newCell.colSpan = currentCell.colSpan;
+			// rowspan > 1
+			if (currentRowSpan > 1) {
+				newCell.rowSpan = Math.floor(currentRowSpan / 2);
+				const newRowSpan = currentRowSpan - newCell.rowSpan;
+
+				const rowSpanArr = [];
+				const nextRowIndex = dom.utils.getArrayIndex(rows, currentRow) + newRowSpan;
 
-		// rowspan > 1
-		if (currentRowSpan > 1) {
-			newCell.rowSpan = Math.floor(currentRowSpan / 2);
-			const newRowSpan = currentRowSpan - newCell.rowSpan;
+				for (let i = 0, cells, colSpan; i < nextRowIndex; i++) {
+					cells = rows[i].cells;
+					colSpan = 0;
+					for (let c = 0, cLen = cells.length, cell, cs, logcalIndex; c < cLen; c++) {
+						logcalIndex = c + colSpan;
+						if (logcalIndex >= index) break;
+
+						cell = cells[c];
+						cs = cell.rowSpan - 1;
+						if (cs > 0 && cs + i >= nextRowIndex && logcalIndex < index) {
+							rowSpanArr.push({
+								index: logcalIndex,
+								cs: cell.colSpan
+							});
+						}
+						colSpan += cell.colSpan - 1;
+					}
+				}
 
-			const rowSpanArr = [];
-			const nextRowIndex = domUtils.getArrayIndex(rows, currentRow) + newRowSpan;
+				const nextRow = rows[nextRowIndex];
+				const nextCells = nextRow.cells;
+				let rs = rowSpanArr.shift();
 
-			for (let i = 0, cells, colSpan; i < nextRowIndex; i++) {
-				cells = rows[i].cells;
-				colSpan = 0;
-				for (let c = 0, cLen = cells.length, cell, cs, logcalIndex; c < cLen; c++) {
+				for (let c = 0, cLen = nextCells.length, colSpan = 0, cell, cs, logcalIndex, insertIndex; c < cLen; c++) {
 					logcalIndex = c + colSpan;
-					if (logcalIndex >= index) break;
+					cell = nextCells[c];
+					cs = cell.colSpan - 1;
+					insertIndex = logcalIndex + cs + 1;
 
-					cell = cells[c];
-					cs = cell.rowSpan - 1;
-					if (cs > 0 && cs + i >= nextRowIndex && logcalIndex < index) {
-						rowSpanArr.push({
-							index: logcalIndex,
-							cs: cell.colSpan
-						});
+					if (rs && insertIndex >= rs.index) {
+						colSpan += rs.cs;
+						insertIndex += rs.cs;
+						rs = rowSpanArr.shift();
 					}
-					colSpan += cell.colSpan - 1;
-				}
-			}
-
-			const nextRow = rows[nextRowIndex];
-			const nextCells = nextRow.cells;
-			let rs = rowSpanArr.shift();
 
-			for (let c = 0, cLen = nextCells.length, colSpan = 0, cell, cs, logcalIndex, insertIndex; c < cLen; c++) {
-				logcalIndex = c + colSpan;
-				cell = nextCells[c];
-				cs = cell.colSpan - 1;
-				insertIndex = logcalIndex + cs + 1;
+					if (insertIndex >= index || c === cLen - 1) {
+						nextRow.insertBefore(newCell, cell.nextElementSibling);
+						break;
+					}
 
-				if (rs && insertIndex >= rs.index) {
-					colSpan += rs.cs;
-					insertIndex += rs.cs;
-					rs = rowSpanArr.shift();
+					colSpan += cs;
 				}
 
-				if (insertIndex >= index || c === cLen - 1) {
-					nextRow.insertBefore(newCell, cell.nextElementSibling);
-					break;
+				currentCell.rowSpan = newRowSpan;
+			} else {
+				// rowspan - 1
+				newCell.rowSpan = currentCell.rowSpan;
+				const newRow = dom.utils.createElement('TR');
+				newRow.appendChild(newCell);
+
+				for (let i = 0, cells; i < rowIndex; i++) {
+					cells = rows[i].cells;
+					if (cells.length === 0) return;
+
+					for (let c = 0, cLen = cells.length; c < cLen; c++) {
+						if (i + cells[c].rowSpan - 1 >= rowIndex) {
+							cells[c].rowSpan += 1;
+						}
+					}
 				}
 
-				colSpan += cs;
-			}
-
-			currentCell.rowSpan = newRowSpan;
-		} else {
-			// rowspan - 1
-			newCell.rowSpan = currentCell.rowSpan;
-			const newRow = domUtils.createElement('TR');
-			newRow.appendChild(newCell);
-
-			for (let i = 0, cells; i < rowIndex; i++) {
-				cells = rows[i].cells;
-				if (cells.length === 0) return;
+				const physicalIndex = this._physical_cellIndex;
+				const cells = currentRow.cells;
 
 				for (let c = 0, cLen = cells.length; c < cLen; c++) {
-					if (i + cells[c].rowSpan - 1 >= rowIndex) {
-						cells[c].rowSpan += 1;
-					}
+					if (c === physicalIndex) continue;
+					cells[c].rowSpan += 1;
 				}
+
+				currentRow.parentNode.insertBefore(newRow, currentRow.nextElementSibling);
 			}
+		}
 
-			const physicalIndex = this._physical_cellIndex;
-			const cells = currentRow.cells;
+		this.selectMenu_split.close();
+		this.editor.focusEdge(currentCell);
 
-			for (let c = 0, cLen = cells.length; c < cLen; c++) {
-				if (c === physicalIndex) continue;
-				cells[c].rowSpan += 1;
-			}
+		this._deleteStyleSelectedCells();
+		this.history.push(false);
 
-			currentRow.parentNode.insertBefore(newRow, currentRow.nextElementSibling);
-		}
+		this._setController(currentCell);
+		this._selectedCell = this._fixedCell = currentCell;
 	}
 
-	this.selectMenu_split.close();
-	this.editor.focusEdge(currentCell);
+	/**
+	 * @description Handles column operations such as insert and delete.
+	 * @param {"insert-left"|"insert-right"|"delete"} command The column operation to perform.
+	 */
+	#OnColumnEdit(command) {
+		switch (command) {
+			case 'insert-left':
+				this.editTable('cell', 'left');
+				break;
+			case 'insert-right':
+				this.editTable('cell', 'right');
+				break;
+			case 'delete':
+				this.editTable('cell', null);
+		}
 
-	this._deleteStyleSelectedCells();
-	this.history.push(false);
+		this._historyPush();
+	}
 
-	this.setController(currentCell);
-	this._selectedCell = this._fixedCell = currentCell;
-}
+	/**
+	 * @description Handles row operations such as insert and delete.
+	 * @param {"insert-above"|"insert-below"|"delete"} command The row operation to perform.
+	 */
+	#OnRowEdit(command) {
+		switch (command) {
+			case 'insert-above':
+				this.editTable('row', 'up');
+				break;
+			case 'insert-below':
+				this.editTable('row', 'down');
+				break;
+			case 'delete':
+				this.editTable('row', null);
+		}
 
-function OnColumnEdit(command) {
-	switch (command) {
-		case 'insert-left':
-			this.editTable('cell', 'left');
-			break;
-		case 'insert-right':
-			this.editTable('cell', 'right');
-			break;
-		case 'delete':
-			this.editTable('cell', null);
+		this._historyPush();
 	}
 
-	this._historyPush();
-}
+	/**
+	 * @description Handles mouse movement within the table picker.
+	 * @param {MouseEvent} e The mouse event.
+	 */
+	#OnMouseMoveTablePicker(e) {
+		e.stopPropagation();
 
-function OnRowEdit(command) {
-	switch (command) {
-		case 'insert-above':
-			this.editTable('row', 'up');
-			break;
-		case 'insert-below':
-			this.editTable('row', 'down');
-			break;
-		case 'delete':
-			this.editTable('row', null);
-	}
+		let x = Math.ceil(e.offsetX / 18);
+		let y = Math.ceil(e.offsetY / 18);
+		x = x < 1 ? 1 : x;
+		y = y < 1 ? 1 : y;
 
-	this._historyPush();
-}
+		if (this.options.get('_rtl')) {
+			this.tableHighlight.style.left = x * 18 - 13 + 'px';
+			x = 11 - x;
+		}
 
-function OnMouseMoveTablePicker(e) {
-	e.stopPropagation();
+		this.tableHighlight.style.width = x + 'em';
+		this.tableHighlight.style.height = y + 'em';
 
-	let x = Math.ceil(e.offsetX / 18);
-	let y = Math.ceil(e.offsetY / 18);
-	x = x < 1 ? 1 : x;
-	y = y < 1 ? 1 : y;
+		const x_u = x < 5 ? 5 : x > 8 ? 10 : x + 2;
+		const y_u = y < 5 ? 5 : y > 8 ? 10 : y + 2;
+		this.tableUnHighlight.style.width = x_u + 'em';
+		this.tableUnHighlight.style.height = y_u + 'em';
 
-	if (this.options.get('_rtl')) {
-		this.tableHighlight.style.left = x * 18 - 13 + 'px';
-		x = 11 - x;
+		dom.utils.changeTxt(this.tableDisplay, x + ' x ' + y);
+		this._tableXY = [x, y];
 	}
 
-	this.tableHighlight.style.width = x + 'em';
-	this.tableHighlight.style.height = y + 'em';
-
-	const x_u = x < 5 ? 5 : x > 8 ? 10 : x + 2;
-	const y_u = y < 5 ? 5 : y > 8 ? 10 : y + 2;
-	this.tableUnHighlight.style.width = x_u + 'em';
-	this.tableUnHighlight.style.height = y_u + 'em';
+	/**
+	 * @description Executes the selected action when the table picker is clicked.
+	 */
+	#OnClickTablePicker() {
+		this.action();
+	}
 
-	domUtils.changeTxt(this.tableDisplay, x + ' x ' + y);
-	this._tableXY = [x, y];
-}
+	/**
+	 * @description Handles multi-selection of table cells.
+	 * @param {MouseEvent} e The mouse event.
+	 */
+	#OnCellMultiSelect(e) {
+		this.editor._preventBlur = true;
+		const target = /** @type {HTMLTableCellElement} */ (dom.query.getParentElement(dom.query.getEventTarget(e), dom.check.isTableCell));
 
-function OnClickTablePicker() {
-	this.action();
-}
+		if (this._shift) {
+			if (target === this._fixedCell) {
+				this._shift = false;
+				this._deleteStyleSelectedCells();
+				this._toggleEditor(true);
+				this.__removeGlobalEvents();
+				return;
+			} else {
+				this._toggleEditor(false);
+			}
+		} else if (!this._ref) {
+			if (target === this._fixedCell) return;
+			else this._toggleEditor(false);
+		}
 
-function CreateCells(nodeName, cnt, returnElement) {
-	nodeName = nodeName.toLowerCase();
+		if (!target || target === this._selectedCell || this._fixedCellName !== target.nodeName || this._selectedTable !== dom.query.getParentElement(target, 'TABLE')) {
+			return;
+		}
 
-	if (!returnElement) {
-		return `<${nodeName}><div><br></div></${nodeName}>`.repeat(cnt);
-	} else {
-		return domUtils.createElement(nodeName, null, '<div><br></div>');
+		this._selectedCell = target;
+		this._setMultiCells(this._fixedCell, target);
 	}
-}
 
-function OnCellMultiSelect(e) {
-	this.editor._antiBlur = true;
-	const target = domUtils.getParentElement(e.target, domUtils.isTableCell);
+	/**
+	 * @description Stops multi-selection of table cells.
+	 * @param {MouseEvent} e The mouse event.
+	 */
+	#OffCellMultiSelect(e) {
+		e.stopPropagation();
 
-	if (this._shift) {
-		if (target === this._fixedCell) {
-			this._shift = false;
-			this._deleteStyleSelectedCells();
-			this._toggleEditor(true);
+		if (!this._shift) {
 			this.__removeGlobalEvents();
-			return;
-		} else {
-			this._toggleEditor(false);
+			this._toggleEditor(true);
+		} else if (this.__globalEvents.touchOff) {
+			this.__globalEvents.touchOff = this.eventManager.removeGlobalEvent(this.__globalEvents.touchOff);
 		}
-	} else if (!this._ref) {
-		if (target === this._fixedCell) return;
-		else this._toggleEditor(false);
+
+		if (!this._fixedCell || !this._selectedTable) return;
+
+		this._setMergeSplitButton(!!this._fixedCell, !!this._selectedCell);
+		this._selectedCells = Array.from(this._selectedTable.querySelectorAll('.se-selected-table-cell'));
+
+		const focusCell = this._selectedCells?.length > 0 ? this._selectedCell : this._fixedCell;
+		this._setController(focusCell);
 	}
 
-	if (!target || target === this._selectedCell || this._fixedCellName !== target.nodeName || this._selectedTable !== domUtils.getParentElement(target, 'TABLE')) {
-		return;
+	/**
+	 * @description Handles the removal of shift-based selection.
+	 */
+	#OffCellShift() {
+		if (!this._ref) this._closeController();
 	}
 
-	this._selectedCell = target;
-	this._setMultiCells(this._fixedCell, target);
+	/**
+	 * @description Handles the removal of touch-based selection.
+	 */
+	#OffCellTouch() {
+		this.close();
+	}
 }
 
-function OffCellMultiSelect(e) {
-	e.stopPropagation();
+/**
+ * @private
+ * @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.
+ */
+function IsResizeEls(node) {
+	return /^(TD|TH|TR)$/i.test(node?.nodeName);
+}
 
-	if (!this._shift) {
-		this.__removeGlobalEvents();
-		this._toggleEditor(true);
-	} else if (this.__globalEvents.touchOff) {
-		this.__globalEvents.touchOff = this.eventManager.removeGlobalEvent(this.__globalEvents.touchOff);
-	}
+/**
+ * @private
+ * @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.
+ */
+function CheckCellEdge(event, tableCell) {
+	const startX = event.clientX;
+	const startWidth = numbers.get(_w.getComputedStyle(tableCell).width, CELL_DECIMAL_END);
+	const rect = tableCell.getBoundingClientRect();
+	const offsetX = Math.round(startX - rect.left);
+	const isLeft = offsetX <= CELL_SELECT_MARGIN;
+	const is = isLeft || startWidth - offsetX <= CELL_SELECT_MARGIN;
 
-	if (!this._fixedCell || !this._selectedTable) return;
+	return {
+		is,
+		isLeft,
+		startX
+	};
+}
 
-	this.setMergeSplitButton(this._fixedCell, this._selectedCell);
-	this._selectedCells = Array.from(this._selectedTable.querySelectorAll('.se-selected-table-cell'));
+/**
+ * @private
+ * @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.
+ */
+function CheckRowEdge(event, tableCell) {
+	const startY = event.clientY;
+	const startHeight = numbers.get(_w.getComputedStyle(tableCell).height, CELL_DECIMAL_END);
+	const rect = tableCell.getBoundingClientRect();
+	const is = Math.ceil(startHeight + rect.top - startY) <= ROW_SELECT_MARGIN;
 
-	const focusCell = this._selectedCells?.length > 0 ? this._selectedCell : this._fixedCell;
-	this.setController(focusCell);
+	return {
+		is,
+		startY
+	};
 }
 
-function OffCellShift() {
-	if (!this._ref) this._closeController();
+/**
+ * @private
+ * @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.
+ */
+function CreateCellsString(nodeName, cnt) {
+	nodeName = nodeName.toLowerCase();
+	return `<${nodeName}><div><br></div></${nodeName}>`.repeat(cnt);
 }
 
-function OffCellTouch() {
-	this.close();
+/**
+ * @private
+ * @description Creates table cells as element HTML.
+ * @param {string} nodeName The tag name of the cell (TD or TH).
+ * @returns {HTMLTableCellElement} The created cells.
+ */
+function CreateCellsHTML(nodeName) {
+	nodeName = nodeName.toLowerCase();
+	return /** @type {HTMLTableCellElement} */ (dom.utils.createElement(nodeName, null, '<div><br></div>'));
 }
 
+/**
+ * @private
+ * @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.
+ */
 function GetMaxColumns(table) {
+	const rows = table.rows;
 	let maxColumns = 0;
 
-	for (const row of table.rows) {
+	for (let i = 0, len = rows.length; i < len; i++) {
+		const cells = rows[i].cells;
 		let columnCount = 0;
-		for (const cell of row.cells) {
-			columnCount += cell.colSpan;
+
+		for (let j = 0, jLen = cells.length; j < jLen; j++) {
+			columnCount += cells[j].colSpan;
 		}
+
 		maxColumns = Math.max(maxColumns, columnCount);
 	}
 
 	return maxColumns;
 }
 
+/**
+ * @private
+ * @description Handles border style changes in table properties.
+ * @param {string} command The border style command.
+ */
 function OnPropsBorderEdit(command) {
 	this.propTargets.border_style.textContent = command;
 	this._disableBorderProps(command === BORDER_LIST[0]);
 	this.selectMenu_props_border.close();
 }
 
+/**
+ * @private
+ * @description Handles border format changes in table properties.
+ * @param {string} defaultCommand The default border format command.
+ * @param {string} command The new border format command.
+ */
 function OnPropsBorderFormatEdit(defaultCommand, command) {
 	const { border_format } = this.propTargets;
 
 	border_format.setAttribute('se-border-format', command);
 	border_format.firstElementChild.innerHTML = this.icons[BORDER_FORMATS[command]];
-	if (command !== defaultCommand) domUtils.addClass(border_format, 'active');
-	else domUtils.removeClass(border_format, 'active');
+	if (command !== defaultCommand) dom.utils.addClass(border_format, 'active');
+	else dom.utils.removeClass(border_format, 'active');
 
 	this.selectMenu_props_border_format.close();
 	this.selectMenu_props_border_format_oneCell.close();
@@ -2490,7 +2925,7 @@ function OnPropsBorderFormatEdit(defaultCommand, command) {
 
 // init element
 function CreateSplitMenu(lang) {
-	const menus = domUtils.createElement(
+	const menus = dom.utils.createElement(
 		'DIV',
 		null,
 		/*html*/ `
@@ -2506,7 +2941,7 @@ function CreateSplitMenu(lang) {
 }
 
 function CreateColumnMenu(lang, icons) {
-	const menus = domUtils.createElement(
+	const menus = dom.utils.createElement(
 		'DIV',
 		null,
 		/*html*/ `
@@ -2525,7 +2960,7 @@ function CreateColumnMenu(lang, icons) {
 }
 
 function CreateRowMenu(lang, icons) {
-	const menus = domUtils.createElement(
+	const menus = dom.utils.createElement(
 		'DIV',
 		null,
 		/*html*/ `
@@ -2554,7 +2989,7 @@ function CreateBorderMenu() {
 		</div>`;
 	}
 
-	const menus = domUtils.createElement('DIV', null, html);
+	const menus = dom.utils.createElement('DIV', null, html);
 	return { items: BORDER_LIST, menus: menus.querySelectorAll('div') };
 }
 
@@ -2575,7 +3010,7 @@ function CreateBorderFormatMenu(langs, icons, indideFormats) {
 			</button>`;
 	}
 
-	const menus = domUtils.createElement('DIV', null, html);
+	const menus = dom.utils.createElement('DIV', null, html);
 	return { items, menus: menus.querySelectorAll('button') };
 }
 
@@ -2588,7 +3023,7 @@ function CreateHTML() {
 	</div>
 	<div class="se-table-size-display">1 x 1</div>`;
 
-	return domUtils.createElement('DIV', { class: 'se-dropdown se-selector-table' }, html);
+	return dom.utils.createElement('DIV', { class: 'se-dropdown se-selector-table' }, html);
 }
 
 function CreateHTML_controller_table({ lang, icons }) {
@@ -2633,9 +3068,13 @@ function CreateHTML_controller_table({ lang, icons }) {
 		</button>
 	</div>`;
 
-	return domUtils.createElement('DIV', { class: 'se-controller se-controller-table' }, html);
+	return dom.utils.createElement('DIV', { class: 'se-controller se-controller-table' }, html);
 }
 
+/**
+ * @param {__se__EditorCore} editor
+ * @returns {{ html: HTMLElement, splitButton: HTMLButtonElement, columnButton: HTMLButtonElement, rowButton: HTMLButtonElement, mergeButton: HTMLButtonElement }}
+ */
 function CreateHTML_controller_cell({ lang, icons }, cellControllerTop) {
 	const html = /*html*/ `
 	<div class="se-arrow se-arrow-${cellControllerTop ? 'down se-visible-hidden' : 'up'}"></div>
@@ -2672,9 +3111,44 @@ function CreateHTML_controller_cell({ lang, icons }, cellControllerTop) {
         </button>
     </div>`;
 
-	return domUtils.createElement('DIV', { class: 'se-controller se-controller-table-cell' }, html);
+	const content = dom.utils.createElement('DIV', { class: 'se-controller se-controller-table-cell' }, html);
+
+	return {
+		html: content,
+		splitButton: content.querySelector('[data-command="onsplit"]'),
+		columnButton: content.querySelector('[data-command="oncolumn"]'),
+		rowButton: content.querySelector('[data-command="onrow"]'),
+		mergeButton: content.querySelector('[data-command="merge"]')
+	};
 }
 
+/**
+ 
+ */
+
+/**
+ * @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 {__se__EditorCore} editor - Editor instance
+ * @returns {TableCtrlProps}
+ */
 function CreateHTML_controller_properties({ lang, icons, options }) {
 	const alignItems = options.get('_rtl') ? ['right', 'center', 'left', 'justify'] : ['left', 'center', 'right', 'justify'];
 	let alignHtml = '';
@@ -2682,14 +3156,12 @@ function CreateHTML_controller_properties({ lang, icons, options }) {
 		item = alignItems[i];
 		text = lang['align' + item.charAt(0).toUpperCase() + item.slice(1)];
 		alignHtml += /*html*/ `
-		<li>
-			<button type="button" class="se-btn se-btn-list se-tooltip" data-command="props_align" data-value="${item}" title="${text}" aria-label="${text}">
-				${icons['align_' + item]}
-				<span class="se-tooltip-inner">
-					<span class="se-tooltip-text">${text}</span>
-				</span>
-			</button>
-		</li>`;
+		<button type="button" class="se-btn se-tooltip" data-command="props_align" data-value="${item}" title="${text}" aria-label="${text}">
+			${icons['align_' + item]}
+			<span class="se-tooltip-inner">
+				<span class="se-tooltip-text">${text}</span>
+			</span>
+		</button>`;
 	}
 
 	// vertical align html
@@ -2699,14 +3171,12 @@ function CreateHTML_controller_properties({ lang, icons, options }) {
 		item = verticalAligns[i];
 		text = lang['align' + item.charAt(0).toUpperCase() + item.slice(1)];
 		verticalAlignHtml += /*html*/ `
-		<li>
-			<button type="button" class="se-btn se-btn-list se-tooltip" data-command="props_align_vertical" data-value="${item}" title="${text}" aria-label="${text}">
-				${icons['align_' + item]}
-				<span class="se-tooltip-inner">
-					<span class="se-tooltip-text">${text}</span>
-				</span>
-			</button>
-		</li>`;
+		<button type="button" class="se-btn se-tooltip" data-command="props_align_vertical" data-value="${item}" title="${text}" aria-label="${text}">
+			${icons['align_' + item]}
+			<span class="se-tooltip-inner">
+				<span class="se-tooltip-text">${text}</span>
+			</span>
+		</button>`;
 	}
 
 	const html = /*html*/ `
@@ -2789,12 +3259,14 @@ function CreateHTML_controller_properties({ lang, icons, options }) {
 				</div>
 
 				<div class="se-table-props-align">
-					<label>${lang.align}</label>
-					<div class="se-form-group se-form-w0 se-list-inner __se__a_h">
-						<ul class="se-form-group se-form-w0">${alignHtml}</ul>
-					</div>
-					<div class="se-form-group se-form-w0 se-list-inner __se__a_v">
-						<ul class="se-form-group se-form-w0">${verticalAlignHtml}</ul>
+					<label>${lang.align} <span class="__se__a_table_t">( ${lang.table} )</span></label>
+					<div class="se-form-group se-form-w0 se-list-inner">
+						<div class="__se__a_h">
+							${alignHtml}
+						</div>
+						<div class="__se__a_v">
+							${verticalAlignHtml}
+						</div>
 					</div>
 				</div>
 			</div>
@@ -2804,7 +3276,27 @@ function CreateHTML_controller_properties({ lang, icons, options }) {
 			</div>
 		</div>`;
 
-	return domUtils.createElement('DIV', { class: 'se-controller se-table-props' }, html);
+	const content = dom.utils.createElement('DIV', { class: 'se-controller se-table-props' }, html);
+
+	return {
+		html: content,
+		controller_props_title: content.querySelector('.se-controller-title'),
+		borderButton: content.querySelector('[data-command="props_onborder_style"]'),
+		borderFormatButton: content.querySelector('[data-command="props_onborder_format"]'),
+		cell_alignment: content.querySelector('.se-table-props-align .__se__a_h'),
+		cell_alignment_vertical: content.querySelector('.se-table-props-align .__se__a_v'),
+		cell_alignment_table_text: content.querySelector('.se-table-props-align .__se__a_table_t'),
+		border_style: content.querySelector('[data-command="props_onborder_style"] .se-txt'),
+		border_color: content.querySelector('.__se_border_color'),
+		border_width: content.querySelector('.__se__border_size'),
+		back_color: content.querySelector('.__se_back_color'),
+		font_color: content.querySelector('.__se_font_color'),
+		palette_border_button: content.querySelector('[data-command="props_onpalette"][data-value="border"]'),
+		font_bold: content.querySelector('[data-command="props_font_style"][data-value="bold"]'),
+		font_underline: content.querySelector('[data-command="props_font_style"][data-value="underline"]'),
+		font_italic: content.querySelector('[data-command="props_font_style"][data-value="italic"]'),
+		font_strike: content.querySelector('[data-command="props_font_style"][data-value="strike"]')
+	};
 }
 
 export default Table;