suneditor 3.1.4 → 3.2.0

package/src/plugins/dropdown/table/services/table.cell.js

@@ -34,7 +34,12 @@ export class TableCellService {
 
 		// members - SelectMenu - split
 		const splitMenu = CreateSplitMenu(this.#$.lang);
-		this.selectMenu_split = new SelectMenu(this.#$, { checkList: false, position: 'bottom-center', openMethod: openCellMenuFunc, closeMethod: closeCellMenuFunc });
+		this.selectMenu_split = new SelectMenu(this.#$, {
+			checkList: false,
+			position: 'bottom-center',
+			openMethod: openCellMenuFunc,
+			closeMethod: closeCellMenuFunc,
+		});
 		this.selectMenu_split.on(this.splitButton, this._OnSplitCells.bind(this));
 		this.selectMenu_split.create(splitMenu.items, splitMenu.menus);
 	}
@@ -59,7 +64,9 @@ export class TableCellService {
 	mergeCells(selectedCells, skipPostProcess = false) {
 		const originTable = selectedCells[0].closest('table');
 		InvalidateTableCache(originTable);
-		const { clonedTable, clonedSelectedCells } = skipPostProcess ? { clonedTable: originTable, clonedSelectedCells: selectedCells } : CloneTable(originTable, selectedCells);
+		const { clonedTable, clonedSelectedCells } = skipPostProcess
+			? { clonedTable: originTable, clonedSelectedCells: selectedCells }
+			: CloneTable(originTable, selectedCells);
 
 		this.#main.setTableInfo(clonedTable);
 		selectedCells = clonedSelectedCells;
@@ -160,7 +167,9 @@ export class TableCellService {
 
 		const originTable = selectedCells[0].closest('table');
 		InvalidateTableCache(originTable);
-		const { clonedTable, clonedSelectedCells } = skipPostProcess ? { clonedTable: originTable, clonedSelectedCells: selectedCells } : CloneTable(originTable, selectedCells);
+		const { clonedTable, clonedSelectedCells } = skipPostProcess
+			? { clonedTable: originTable, clonedSelectedCells: selectedCells }
+			: CloneTable(originTable, selectedCells);
 
 		this.#main.setState('ref', null);
 		this.#main.setTableInfo(clonedTable);
@@ -217,7 +226,12 @@ export class TableCellService {
 
 		// set info
 		if (firstCell !== lastCell) {
-			lastCell = !newLastCell || lastCell.closest('tr').rowIndex > newLastCell.closest('tr').rowIndex || lastCell.cellIndex > newLastCell.cellIndex ? lastCell : newLastCell;
+			lastCell =
+				!newLastCell ||
+				lastCell.closest('tr').rowIndex > newLastCell.closest('tr').rowIndex ||
+				lastCell.cellIndex > newLastCell.cellIndex
+					? lastCell
+					: newLastCell;
 			this.#selectionService.setMultiCells(firstCell, lastCell);
 			this.#main.setState('selectedCells', Array.from(table.querySelectorAll('.se-selected-table-cell')));
 		} else {
@@ -265,7 +279,11 @@ export class TableCellService {
 	 * @description Sets the unmerge button visibility.
 	 */
 	setUnMergeButton() {
-		if (this.findMergedCells(!this.#state.selectedCells?.length ? [this.#state.fixedCell] : this.#state.selectedCells).length > 0) {
+		if (
+			this.findMergedCells(
+				!this.#state.selectedCells?.length ? [this.#state.fixedCell] : this.#state.selectedCells,
+			).length > 0
+		) {
 			this.unmergeButton.disabled = false;
 		} else {
 			this.unmergeButton.disabled = true;
@@ -345,7 +363,11 @@ export class TableCellService {
 							});
 						}
 
-						if (cell !== currentCell && logcalIndex <= index && logcalIndex + cs >= index + currentColSpan - 1) {
+						if (
+							cell !== currentCell &&
+							logcalIndex <= index &&
+							logcalIndex + cs >= index + currentColSpan - 1
+						) {
 							cell.colSpan += 1;
 							break;
 						}
@@ -399,7 +421,11 @@ export class TableCellService {
 				const nextCells = nextRow.cells;
 				let rs = rowSpanArr.shift();
 
-				for (let c = 0, cLen = nextCells.length, colSpan = 0, cell, cs, logcalIndex, insertIndex; c < cLen; c++) {
+				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;

package/src/plugins/dropdown/table/services/table.clipboard.js

@@ -292,7 +292,11 @@ export class TableClipboardService {
 				const cEnd = cStart + cs - 1;
 				const mergeCells = [];
 
-				for (let targetR = targetInfo.rowIndex + r, tRowCnt = targetR + rs, rowOffset = 0; targetR < tRowCnt; targetR++, rowOffset++) {
+				for (
+					let targetR = targetInfo.rowIndex + r, tRowCnt = targetR + rs, rowOffset = 0;
+					targetR < tRowCnt;
+					targetR++, rowOffset++
+				) {
 					const targetRow = targetRows[targetR];
 					const targetCells = targetRow.cells;
 

package/src/plugins/dropdown/table/services/table.grid.js

@@ -28,13 +28,23 @@ export class TableGridService {
 
 		// members - SelectMenu - column
 		const columnMenu = CreateColumnMenu(this.#$.lang, this.#$.icons);
-		this.selectMenu_column = new SelectMenu(this.#$, { checkList: false, position: 'bottom-center', openMethod: openCellMenuFunc, closeMethod: closeCellMenuFunc });
+		this.selectMenu_column = new SelectMenu(this.#$, {
+			checkList: false,
+			position: 'bottom-center',
+			openMethod: openCellMenuFunc,
+			closeMethod: closeCellMenuFunc,
+		});
 		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);
-		this.selectMenu_row = new SelectMenu(this.#$, { checkList: false, position: 'bottom-center', openMethod: openCellMenuFunc, closeMethod: closeCellMenuFunc });
+		this.selectMenu_row = new SelectMenu(this.#$, {
+			checkList: false,
+			position: 'bottom-center',
+			openMethod: openCellMenuFunc,
+			closeMethod: closeCellMenuFunc,
+		});
 		this.selectMenu_row.on(rowButton, this.#OnRowEdit.bind(this));
 		this.selectMenu_row.create(rownMenu.items, rownMenu.menus);
 	}
@@ -54,7 +64,11 @@ export class TableGridService {
 	 * @description Opens the row menu.
 	 */
 	openRowMenu() {
-		this.selectMenu_row.menus[0].style.display = this.selectMenu_row.menus[1].style.display = /^TH$/i.test(this.#state.tdElement?.nodeName) ? 'none' : '';
+		this.selectMenu_row.menus[0].style.display = this.selectMenu_row.menus[1].style.display = /^TH$/i.test(
+			this.#state.tdElement?.nodeName,
+		)
+			? 'none'
+			: '';
 		this.selectMenu_row.open();
 	}
 
@@ -77,7 +91,8 @@ export class TableGridService {
 						dom.utils.removeItem(this.#state.figureElement);
 						this.#main._closeTableSelectInfo();
 					} else {
-						table.innerHTML += '<tbody><tr>' + CreateCellsString('td', this.#state.logical_cellCnt) + '</tr></tbody>';
+						table.innerHTML +=
+							'<tbody><tr>' + CreateCellsString('td', this.#state.logical_cellCnt) + '</tr></tbody>';
 					}
 					return;
 				}
@@ -274,7 +289,12 @@ export class TableGridService {
 					if (removeIndex >= insertIndex && removeIndex + cs <= insertIndex + colSpan) {
 						removeCell.push(cell);
 					} else if (removeIndex <= insertIndex + colSpan && removeIndex + cs >= insertIndex) {
-						cell.colSpan -= numbers.getOverlapRangeAtIndex(cellIndex, cellIndex + colSpan, removeIndex, removeIndex + cs);
+						cell.colSpan -= numbers.getOverlapRangeAtIndex(
+							cellIndex,
+							cellIndex + colSpan,
+							removeIndex,
+							removeIndex + cs,
+						);
 					} else if (rs > 0 && (removeIndex < insertIndex || removeIndex + cs > insertIndex + colSpan)) {
 						removeSpanArr.push({
 							cell: cell,
@@ -311,8 +331,11 @@ export class TableGridService {
 			if (remove) {
 				dom.utils.removeItem(cols[insertIndex]);
 			} else {
-				const isAutoLayout = !dom.utils.hasClass(this.#main._element, 'se-table-layout-fixed') && this.#main._element.style.tableLayout !== 'fixed';
-				const hasWidth = !isAutoLayout && Array.prototype.some.call(cols, (col) => numbers.get(col.style.width) > 0);
+				const isAutoLayout =
+					!dom.utils.hasClass(this.#main._element, 'se-table-layout-fixed') &&
+					this.#main._element.style.tableLayout !== 'fixed';
+				const hasWidth =
+					!isAutoLayout && Array.prototype.some.call(cols, (col) => numbers.get(col.style.width) > 0);
 
 				if (hasWidth) {
 					let totalW = 0;
@@ -345,7 +368,12 @@ export class TableGridService {
 
 			for (let c = 0, cLen = removeSpanArr.length, rowSpanCell; c < cLen; c++) {
 				rowSpanCell = removeSpanArr[c];
-				rowSpanCell.cell.rowSpan = numbers.getOverlapRangeAtIndex(removeFirst, removeEnd, rowSpanCell.i, rowSpanCell.rs);
+				rowSpanCell.cell.rowSpan = numbers.getOverlapRangeAtIndex(
+					removeFirst,
+					removeEnd,
+					rowSpanCell.i,
+					rowSpanCell.rs,
+				);
 			}
 
 			this.#main._closeController();
@@ -408,7 +436,10 @@ export class TableGridService {
 
 					if (cell.rowSpan > 1) {
 						cell.rowSpan -= 1;
-						spanCells.push({ cell: /** @type {HTMLTableCellElement} */ (cell.cloneNode(true)), index: logcalIndex });
+						spanCells.push({
+							cell: /** @type {HTMLTableCellElement} */ (cell.cloneNode(true)),
+							index: logcalIndex,
+						});
 					}
 				}
 

package/src/plugins/dropdown/table/services/table.resize.js

@@ -61,7 +61,12 @@ export class TableResizeService {
 			this.#removeGlobalEvents();
 			if (this.#resizeLine?.style.display === 'block') this.#resizeLine.style.display = 'none';
 			this.#resizeLine = this.#$.frameContext.get('wrapper').querySelector(Constants.RESIZE_CELL_CLASS);
-			this.#setResizeLinePosition(dom.query.getParentElement(target, dom.check.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 false;
 		}
@@ -98,12 +103,15 @@ export class TableResizeService {
 			try {
 				this.#selectionService.deleteStyleSelectedCells();
 				this.#main.setCellInfo(target, true);
-				const colIndex = this.#state.logical_cellIndex + this.#state.current_colSpan - (cellEdge.isLeft ? 1 : 0);
+				const colIndex =
+					this.#state.logical_cellIndex + this.#state.current_colSpan - (cellEdge.isLeft ? 1 : 0);
 
 				// ready
 				this.#$.ui.enableBackWrapper('ew-resize');
 				this.#resizeLine ||= this.#$.frameContext.get('wrapper').querySelector(Constants.RESIZE_CELL_CLASS);
-				this.#resizeLinePrev = this.#$.frameContext.get('wrapper').querySelector(Constants.RESIZE_CELL_PREV_CLASS);
+				this.#resizeLinePrev = this.#$.frameContext
+					.get('wrapper')
+					.querySelector(Constants.RESIZE_CELL_PREV_CLASS);
 
 				// select figure
 				if (colIndex < 0 || colIndex === this.#state.logical_cellCnt - 1) {
@@ -112,8 +120,15 @@ export class TableResizeService {
 					return false;
 				}
 
-				const col = this.#main._element.querySelector('colgroup').querySelectorAll('col')[colIndex < 0 ? 0 : colIndex];
-				this._startCellResizing(col, cellEdge.startX, numbers.get(_w.getComputedStyle(col).width, Constants.CELL_DECIMAL_END), cellEdge.isLeft);
+				const col = this.#main._element.querySelector('colgroup').querySelectorAll('col')[
+					colIndex < 0 ? 0 : colIndex
+				];
+				this._startCellResizing(
+					col,
+					cellEdge.startX,
+					numbers.get(_w.getComputedStyle(col).width, Constants.CELL_DECIMAL_END),
+					cellEdge.isLeft,
+				);
 				this.#main._editorEnable(false);
 			} catch (err) {
 				console.warn('[SUNEDITOR.plugins.table.error]', err);
@@ -148,9 +163,15 @@ export class TableResizeService {
 				// ready
 				this.#$.ui.enableBackWrapper('ns-resize');
 				this.#resizeLine ||= this.#$.frameContext.get('wrapper').querySelector(Constants.RESIZE_ROW_CLASS);
-				this.#resizeLinePrev = this.#$.frameContext.get('wrapper').querySelector(Constants.RESIZE_ROW_PREV_CLASS);
-
-				this._startRowResizing(row, rowEdge.startY, numbers.get(_w.getComputedStyle(row).height, Constants.CELL_DECIMAL_END));
+				this.#resizeLinePrev = this.#$.frameContext
+					.get('wrapper')
+					.querySelector(Constants.RESIZE_ROW_PREV_CLASS);
+
+				this._startRowResizing(
+					row,
+					rowEdge.startY,
+					numbers.get(_w.getComputedStyle(row).height, Constants.CELL_DECIMAL_END),
+				);
 				this.#main._editorEnable(false);
 			} catch (err) {
 				console.warn('[SUNEDITOR.plugins.table.error]', err);
@@ -204,7 +225,9 @@ export class TableResizeService {
 		const prevValue = col.style.width;
 		const nextCol = /** @type {HTMLElement} */ (col.nextElementSibling);
 		const nextColPrevValue = nextCol.style.width;
-		const realWidth = dom.utils.hasClass(this.#main._element, 'se-table-layout-fixed') ? nextColPrevValue : converter.getWidthInPercentage(nextCol || col);
+		const realWidth = dom.utils.hasClass(this.#main._element, 'se-table-layout-fixed')
+			? nextColPrevValue
+			: converter.getWidthInPercentage(nextCol || col);
 
 		if (_DragHandle.get('__dragHandler')) _DragHandle.get('__dragHandler').style.display = 'none';
 		this.#addResizeGlobalEvents(
@@ -251,7 +274,20 @@ export class TableResizeService {
 	 * @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) {
+	#cellResize(
+		col,
+		nextCol,
+		figure,
+		tdEl,
+		resizeLine,
+		isLeftEdge,
+		startX,
+		startWidth,
+		prevWidthPercent,
+		nextColWidthPercent,
+		tableWidth,
+		e,
+	) {
 		const deltaX = e.clientX - startX;
 		const newWidthPx = startWidth + deltaX;
 		const newWidthPercent = (newWidthPx / tableWidth) * 100;
@@ -324,7 +360,15 @@ export class TableResizeService {
 
 		if (_DragHandle.get('__dragHandler')) _DragHandle.get('__dragHandler').style.display = 'none';
 		this.#addResizeGlobalEvents(
-			this.#figureResize.bind(this, figure, this.#resizeLine, isLeftEdge, startX, figure.offsetWidth, numbers.get(realWidth, Constants.CELL_DECIMAL_END)),
+			this.#figureResize.bind(
+				this,
+				figure,
+				this.#resizeLine,
+				isLeftEdge,
+				startX,
+				figure.offsetWidth,
+				numbers.get(realWidth, Constants.CELL_DECIMAL_END),
+			),
 			() => {
 				this.#removeGlobalEvents();
 				if (numbers.get(figure.style.width, 0) > 100) figure.style.width = '100%';

package/src/plugins/dropdown/table/services/table.selection.js

@@ -93,7 +93,10 @@ export class TableSelectionService {
 		}
 
 		// try cache
-		const cacheKey = getCacheKey(/** @type {HTMLTableCellElement} */ (startCell), /** @type {HTMLTableCellElement} */ (endCell));
+		const cacheKey = getCacheKey(
+			/** @type {HTMLTableCellElement} */ (startCell),
+			/** @type {HTMLTableCellElement} */ (endCell),
+		);
 		let tableCache = refCache.get(table);
 		const cachedRef = tableCache?.get(cacheKey);
 
@@ -186,7 +189,10 @@ export class TableSelectionService {
 					const newRs = ref.rs < i ? ref.rs : i;
 					const newRe = ref.re > i + rs ? ref.re : i + rs;
 
-					if (numbers.getOverlapRangeAtIndex(ref.cs, ref.ce, logcalIndex, logcalIndex + cs) && numbers.getOverlapRangeAtIndex(ref.rs, ref.re, i, i + rs)) {
+					if (
+						numbers.getOverlapRangeAtIndex(ref.cs, ref.ce, logcalIndex, logcalIndex + cs) &&
+						numbers.getOverlapRangeAtIndex(ref.rs, ref.re, i, i + rs)
+					) {
 						if (ref.cs !== newCs || ref.ce !== newCe || ref.rs !== newRs || ref.re !== newRe) {
 							ref.cs = newCs;
 							ref.ce = newCe;
@@ -262,7 +268,10 @@ export class TableSelectionService {
 					}
 				}
 
-				if (numbers.getOverlapRangeAtIndex(ref.cs, ref.ce, logcalIndex, logcalIndex + cs) && numbers.getOverlapRangeAtIndex(ref.rs, ref.re, i, i + rs)) {
+				if (
+					numbers.getOverlapRangeAtIndex(ref.cs, ref.ce, logcalIndex, logcalIndex + cs) &&
+					numbers.getOverlapRangeAtIndex(ref.rs, ref.re, i, i + rs)
+				) {
 					dom.utils.addClass(cell, 'se-selected-table-cell');
 				}
 
@@ -362,7 +371,9 @@ export class TableSelectionService {
 	 */
 	#OnCellMultiSelect(e) {
 		this.#$.store.set('_preventBlur', true);
-		const target = /** @type {HTMLTableCellElement} */ (dom.query.getParentElement(dom.query.getEventTarget(e), dom.check.isTableCell));
+		const target = /** @type {HTMLTableCellElement} */ (
+			dom.query.getParentElement(dom.query.getEventTarget(e), dom.check.isTableCell)
+		);
 
 		if (this.#state.isShiftPressed) {
 			if (target === this.#state.fixedCell) {
@@ -379,7 +390,12 @@ export class TableSelectionService {
 			else this.#main._editorEnable(false);
 		}
 
-		if (!target || target === this.#state.selectedCell || this.#fixedCellName !== target.nodeName || this.#state.selectedTable !== dom.query.getParentElement(target, 'TABLE')) {
+		if (
+			!target ||
+			target === this.#state.selectedCell ||
+			this.#fixedCellName !== target.nodeName ||
+			this.#state.selectedTable !== dom.query.getParentElement(target, 'TABLE')
+		) {
 			return;
 		}
 
@@ -405,7 +421,10 @@ export class TableSelectionService {
 		if (!fixedCell || !this.#state.selectedTable) return;
 
 		this.#cellService.setMergeSplitButton();
-		this.#main.setState('selectedCells', Array.from(this.#state.selectedTable.querySelectorAll('.se-selected-table-cell')));
+		this.#main.setState(
+			'selectedCells',
+			Array.from(this.#state.selectedTable.querySelectorAll('.se-selected-table-cell')),
+		);
 
 		if (this.#state.isShiftPressed) return;
 
@@ -432,7 +451,8 @@ export class TableSelectionService {
 
 			this.focusCellEdge(this.#state.fixedCell);
 
-			const displayCell = this.#state.selectedCells?.length > 0 ? this.#state.selectedCell : this.#state.fixedCell;
+			const displayCell =
+				this.#state.selectedCells?.length > 0 ? this.#state.selectedCell : this.#state.fixedCell;
 			this.#main._setController(displayCell);
 		}
 	}

package/src/plugins/dropdown/table/services/table.style.js

@@ -44,7 +44,11 @@ export class TableStyleService {
 		// props
 		const controller_props = CreateHTML_controller_properties(this.#$);
 		const propsTargets = [this.#main.controller_table, this.#main.controller_cell];
-		this.controller_props = new Controller(this, this.#$, controller_props.html, { position: 'bottom', parents: propsTargets, isInsideForm: true });
+		this.controller_props = new Controller(this, this.#$, controller_props.html, {
+			position: 'bottom',
+			parents: propsTargets,
+			isInsideForm: true,
+		});
 		this.controller_props_title = controller_props.controller_props_title;
 
 		// color picker
@@ -65,7 +69,9 @@ export class TableStyleService {
 			colorList: pluginOptions.colorList || Constants.DEFAULT_COLOR_LIST,
 			splitNum: 5,
 			disableRemove: true,
-			hueSliderOptions: { controllerOptions: { isOutsideForm: true, parents: [this.controller_colorPicker], parentsHide: true } },
+			hueSliderOptions: {
+				controllerOptions: { isOutsideForm: true, parents: [this.controller_colorPicker], parentsHide: true },
+			},
 		});
 
 		// members - SelectMenu - properties - border style
@@ -78,14 +84,34 @@ export class TableStyleService {
 		// 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 = new SelectMenu(this.#$, {
+			checkList: false,
+			position: 'bottom-left',
+			dir: 'ltr',
+			splitNum: 5,
+		});
 		this.selectMenu_props_border_format.on(borderFormatButton, this.#OnPropsBorderFormatEdit.bind(this, 'all'));
 		this.selectMenu_props_border_format.create(borderFormatMenu.items, borderFormatMenu.menus);
 
-		const borderFormatMenu_oneCell = CreateBorderFormatMenu(this.#$.lang, this.#$.icons, Constants.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, this.#OnPropsBorderFormatEdit.bind(this, 'outside'));
-		this.selectMenu_props_border_format_oneCell.create(borderFormatMenu_oneCell.items, borderFormatMenu_oneCell.menus);
+		const borderFormatMenu_oneCell = CreateBorderFormatMenu(
+			this.#$.lang,
+			this.#$.icons,
+			Constants.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,
+			this.#OnPropsBorderFormatEdit.bind(this, 'outside'),
+		);
+		this.selectMenu_props_border_format_oneCell.create(
+			borderFormatMenu_oneCell.items,
+			borderFormatMenu_oneCell.menus,
+		);
 
 		// memberts - elements..
 		this.maxText = this.#$.lang.maxSize;
@@ -170,7 +196,11 @@ export class TableStyleService {
 		} else {
 			this.controller_props_title.textContent = this.#$.lang.tableProperties;
 			this.#setCtrlProps('table');
-			this.controller_props.open(target, this.#main.controller_table.form, { isWWTarget: false, initMethod: null, addOffset: null });
+			this.controller_props.open(target, this.#main.controller_table.form, {
+				isWWTarget: false,
+				initMethod: null,
+				addOffset: null,
+			});
 		}
 	}
 
@@ -184,7 +214,11 @@ export class TableStyleService {
 		} else {
 			this.controller_props_title.textContent = this.#$.lang.cellProperties;
 			this.#setCtrlProps('cell');
-			this.controller_props.open(target, this.#main.controller_cell.form, { isWWTarget: false, initMethod: null, addOffset: null });
+			this.controller_props.open(target, this.#main.controller_cell.form, {
+				isWWTarget: false,
+				initMethod: null,
+				addOffset: null,
+			});
 		}
 	}
 
@@ -268,7 +302,9 @@ export class TableStyleService {
 		const table = this.#main._element;
 
 		if (!active) {
-			const caption = dom.utils.createElement('CAPTION', { class: `se-table-caption-${this.#main.captionPosition}` });
+			const caption = dom.utils.createElement('CAPTION', {
+				class: `se-table-caption-${this.#main.captionPosition}`,
+			});
 			caption.innerHTML = '<div><br></div>';
 			table.insertBefore(caption, table.firstElementChild);
 		} else {
@@ -404,7 +440,16 @@ export class TableStyleService {
 			const targets = isTable ? [this.#main._element] : this.#state.selectedCells;
 			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;
+			const {
+				border_format,
+				border_color,
+				border_style,
+				border_width,
+				back_color,
+				font_color,
+				cell_alignment,
+				cell_alignment_vertical,
+			} = this.propTargets;
 
 			const borderFormat = border_format.getAttribute('se-border-format') || '';
 			const hasFormat = borderFormat !== 'all';
@@ -445,7 +490,11 @@ export class TableStyleService {
 				ce -= cs;
 				cs -= cs;
 				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++) {
+				for (
+					let i = 0, cellCnt = 0, len = targets.length, e, es, rowIndex = 0, cellIndex, colspan, rowspan;
+					i < len;
+					i++, cellCnt++
+				) {
 					e = /** @type {HTMLTableCellElement} */ (targets[i]);
 					colspan = e.colSpan;
 					rowspan = e.rowSpan;
@@ -481,7 +530,8 @@ export class TableStyleService {
 					if (rowIndex === re || isBottom) cells.bottom.push(e);
 					if (cellIndex === cs) cells.left.push(e);
 					if (cellIndex === ce || cellIndex + colspan - 1 === ce) cells.right.push(e);
-					if (!isBottom && rowIndex !== rs && rowIndex !== re && cellIndex !== cs && cellIndex !== ce) cells.middle.push(e);
+					if (!isBottom && rowIndex !== rs && rowIndex !== re && cellIndex !== cs && cellIndex !== ce)
+						cells.middle.push(e);
 
 					// --- set styles
 					es = e.style;
@@ -575,11 +625,28 @@ export class TableStyleService {
 		const targets = isTable ? [this.#main._element] : this.#state.selectedCells;
 		if (!targets?.[0]) return;
 
-		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 {
+			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);
 
-		/** @type {HTMLElement} */ (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 = '';
@@ -640,7 +707,8 @@ export class TableStyleService {
 		}
 
 		// border - format
-		border_format.firstElementChild.innerHTML = this.#$.icons[Constants.BORDER_FORMATS[targets.length === 1 ? 'outside' : 'all']];
+		border_format.firstElementChild.innerHTML =
+			this.#$.icons[Constants.BORDER_FORMATS[targets.length === 1 ? 'outside' : 'all']];
 		border_format.setAttribute('se-border-format', 'all');
 		dom.utils.removeClass(border_format, 'active');
 
@@ -674,7 +742,10 @@ export class TableStyleService {
 		const { font_bold, font_italic, font_strike, font_underline } = this.propTargets;
 		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();
+		styles.textDecoration = (
+			(dom.utils.hasClass(font_strike, 'on') ? 'line-through ' : '') +
+			(dom.utils.hasClass(font_underline, 'on') ? 'underline' : '')
+		).trim();
 	}
 
 	/**
@@ -841,8 +912,37 @@ export class TableStyleService {
 	 * @description Initialize the style service (resets properties).
 	 */
 	init() {
-		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;
-		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');
+		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;
+		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',
+		);
 	}
 }