suneditor 3.1.4 → 3.2.0

package/src/plugins/dropdown/font.js

@@ -27,9 +27,22 @@ class Font extends PluginDropdown {
 		this.title = this.$.lang.font;
 		this.inner = '<span class="se-txt">' + this.$.lang.font + '</span>' + this.$.icons.arrow_down;
 
-		// create HTML
-		const fontList = pluginOptions.items || ['Arial', 'Comic Sans MS', 'Courier New', 'Impact', 'Georgia', 'tahoma', 'Trebuchet MS', 'Verdana'];
-		const menu = CreateHTML(this.$, fontList);
+		// create menu from items
+		const fontList = pluginOptions.items || [
+			'Arial',
+			'Comic Sans MS',
+			'Courier New',
+			'Impact',
+			'Georgia',
+			'tahoma',
+			'Trebuchet MS',
+			'Verdana',
+		];
+		const prependHTML = `<li><button type="button" class="se-btn se-btn-list default_value" data-command="" title="${this.$.lang.default}" aria-label="${this.$.lang.default}">${this.$.lang.default}</button></li><li class="se-btn-list se-sub-list"><span></span></li>`;
+		const menu = this.$.menu.initDropdownTarget(Font, CreateItems(fontList), {
+			className: 'se-list-font-family',
+			prependHTML,
+		});
 
 		// members
 		this.currentFont = '';
@@ -37,9 +50,6 @@ class Font extends PluginDropdown {
 		this.fontArray = fontList;
 
 		this.#defaultValue = /** @type {HTMLSpanElement} */ (menu.querySelector('.se-sub-list span'));
-
-		// init
-		this.$.menu.initDropdownTarget(Font, menu);
 	}
 
 	/**
@@ -52,9 +62,14 @@ class Font extends PluginDropdown {
 
 		let fontFamily = '';
 		if (!element) {
-			const font = this.$.store.get('hasFocus') ? this.$.frameContext.get('wwComputedStyle').fontFamily : this.$.lang.font;
+			const font = this.$.store.get('hasFocus')
+				? this.$.frameContext.get('wwComputedStyle').fontFamily
+				: this.$.lang.font;
 			dom.utils.changeTxt(targetText, font);
-			dom.utils.changeTxt(tooltip, this.$.store.get('hasFocus') ? this.$.lang.font + (font ? ' (' + font + ')' : '') : font);
+			dom.utils.changeTxt(
+				tooltip,
+				this.$.store.get('hasFocus') ? this.$.lang.font + (font ? ' (' + font + ')' : '') : font,
+			);
 		} else if (this.$.format.isLine(element)) {
 			return undefined;
 		} else if ((fontFamily = dom.utils.getStyle(element, 'fontFamily'))) {
@@ -122,34 +137,19 @@ class Font extends PluginDropdown {
 }
 
 /**
- * @param {SunEditor.Deps} $ - Kernel dependencies
  * @param {string[]} fontList - Font name list
- * @returns {HTMLElement}
+ * @returns {Array<import('../../core/logic/panel/menu').DropdownItem>}
  */
-function CreateHTML({ lang }, fontList) {
-	let list = /*html*/ `
-	<div class="se-list-inner">
-		<ul class="se-list-basic">
-			<li>
-				<button type="button" class="se-btn se-btn-list default_value" data-command="" title="${lang.default}" aria-label="${lang.default}">
-					${lang.default}
-				</button>
-			</li>
-			<li class="se-btn-list se-sub-list"><span></span></li>`;
-
-	for (let i = 0, len = fontList.length, font, text; i < len; i++) {
-		font = fontList[i];
-		text = font.split(',')[0];
-		list += /*html*/ `
-			<li>
-				<button type="button" class="se-btn se-btn-list" data-command="${font}" data-txt="${text}" title="${text}" aria-label="${text}" style="font-family:${font};">${text}</button>
-			</li>`;
-	}
-	list += /*html*/ `
-		</ul>
-	</div>`;
-
-	return dom.utils.createElement('DIV', { class: 'se-dropdown se-list-layer se-list-font-family' }, list);
+function CreateItems(fontList) {
+	return fontList.map((font) => {
+		const text = font.split(',')[0];
+		return {
+			command: font,
+			title: text,
+			innerHTML: text,
+			attrs: { 'data-txt': text, style: `font-family:${font};` },
+		};
+	});
 }
 
 export default Font;

package/src/plugins/dropdown/hr.js

@@ -39,14 +39,13 @@ class HR extends PluginDropdown {
 		this.title = this.$.lang.horizontalLine;
 		this.icon = 'horizontal_line';
 
-		// create HTML
-		const HRMenus = CreateHTML(this.$, pluginOptions.items);
+		// create menu from items
+		const menu = this.$.menu.initDropdownTarget(HR, CreateItems(this.$, pluginOptions.items), {
+			className: 'se-list-line',
+		});
 
 		// members
-		this.list = HRMenus.querySelectorAll('button');
-
-		// init
-		this.$.menu.initDropdownTarget(HR, HRMenus);
+		this.list = menu.querySelectorAll('button');
 	}
 
 	/**
@@ -117,47 +116,20 @@ class HR extends PluginDropdown {
 /**
  * @param {SunEditor.Deps} $ - Kernel dependencies
  * @param {Array<{name: string, class: string, style?: string}>} [HRItems] - HR style items
- * @returns {HTMLElement}
+ * @returns {Array<import('../../core/logic/panel/menu').DropdownItem>}
  */
-function CreateHTML({ lang }, HRItems) {
+function CreateItems({ lang }, HRItems) {
 	const items = HRItems || [
-		{
-			name: lang.hr_solid,
-			class: '__se__solid',
-			style: null,
-		},
-		{
-			name: lang.hr_dashed,
-			class: '__se__dashed',
-			style: null,
-		},
-		{
-			name: lang.hr_dotted,
-			class: '__se__dotted',
-			style: null,
-		},
+		{ name: lang.hr_solid, class: '__se__solid', style: null },
+		{ name: lang.hr_dashed, class: '__se__dashed', style: null },
+		{ name: lang.hr_dotted, class: '__se__dotted', style: null },
 	];
 
-	let list = '';
-	for (let i = 0, len = items.length; i < len; i++) {
-		list += /*html*/ `
-		<li>
-			<button type="button" class="se-btn se-btn-list" data-command="hr" title="${items[i].name}" aria-label="${items[i].name}">
-				<hr${items[i].class ? ` class="${items[i].class}"` : ''}${items[i].style ? ` style="${items[i].style}"` : ''}/>
-			</button>
-		</li>`;
-	}
-
-	return dom.utils.createElement(
-		'DIV',
-		{
-			class: 'se-dropdown se-list-layer se-list-line',
-		},
-		/*html*/ `
-		<div class="se-list-inner">
-			<ul class="se-list-basic">${list}</ul>
-		</div>`,
-	);
+	return items.map((item) => ({
+		command: 'hr',
+		title: item.name,
+		innerHTML: `<hr${item.class ? ` class="${item.class}"` : ''}${item.style ? ` style="${item.style}"` : ''}/>`,
+	}));
 }
 
 export default HR;

package/src/plugins/dropdown/layout.js

@@ -1,5 +1,4 @@
 import { PluginDropdown } from '../../interfaces';
-import { dom } from '../../helper';
 
 /**
  * @typedef {Object} LayoutPluginOptions
@@ -32,11 +31,8 @@ class Layout extends PluginDropdown {
 		this.selectedIndex = -1;
 		this.items = pluginOptions.items;
 
-		// create HTML
-		const menu = CreateHTML(this.items);
-
-		// init
-		this.$.menu.initDropdownTarget(Layout, menu);
+		// create menu from items
+		this.$.menu.initDropdownTarget(Layout, CreateItems(this.items));
 	}
 
 	/**
@@ -60,32 +56,19 @@ class Layout extends PluginDropdown {
 
 /**
  * @param {Array<{name: string, html: string}>} layoutList - Layout items
- * @returns {HTMLElement}
+ * @returns {Array<import('../../core/logic/panel/menu').DropdownItem>}
  */
-function CreateHTML(layoutList) {
+function CreateItems(layoutList) {
 	if (!layoutList || layoutList.length === 0) {
 		console.warn('[SUNEDITOR.plugins.layout.warn] To use the "layout" plugin, please define the "layouts" option.');
 	}
 
-	let list = /*html*/ `
-	<div class="se-dropdown se-list-inner">
-		<ul class="se-list-basic">`;
-
-	for (let i = 0, len = (layoutList || []).length, t; i < len; i++) {
-		t = layoutList[i];
-		list += /*html*/ `
-			<li>
-				<button type="button" class="se-btn se-btn-list" data-command="layout" data-value="${i}" title="${t.name}" aria-label="${t.name}">
-					${t.name}
-				</button>
-			</li>`;
-	}
-
-	list += /*html*/ `
-		</ul>
-	</div>`;
-
-	return dom.utils.createElement('DIV', { class: 'se-list-layer' }, list);
+	return (layoutList || []).map((t, i) => ({
+		command: 'layout',
+		value: String(i),
+		title: t.name,
+		innerHTML: t.name,
+	}));
 }
 
 export default Layout;

package/src/plugins/dropdown/lineHeight.js

@@ -30,17 +30,15 @@ class LineHeight extends PluginDropdown {
 		this.title = this.$.lang.lineHeight;
 		this.icon = 'line_height';
 
-		// create HTML
-		const menu = CreateHTML(this.$, pluginOptions.items);
+		// create menu from items
+		const prependHTML = `<li><button type="button" class="se-btn se-btn-list default_value" data-command="" title="${this.$.lang.default}" aria-label="${this.$.lang.default}">${this.$.lang.default}</button></li><li class="se-btn-list se-sub-list"><span></span></li>`;
+		const menu = this.$.menu.initDropdownTarget(LineHeight, CreateItems(pluginOptions.items), { prependHTML });
 
 		// members
 		this.sizeList = menu.querySelectorAll('li button');
 		this.currentSize = null;
 
 		this.#defaultValue = /** @type {HTMLSpanElement} */ (menu.querySelector('.se-sub-list span'));
-
-		// init
-		this.$.menu.initDropdownTarget(LineHeight, menu);
 	}
 
 	/**
@@ -108,11 +106,10 @@ class LineHeight extends PluginDropdown {
 }
 
 /**
- * @param {SunEditor.Deps} $ - Kernel dependencies
  * @param {Array<{text: string, value: string}>} [items] - Line height items
- * @returns {HTMLElement}
+ * @returns {Array<import('../../core/logic/panel/menu').DropdownItem>}
  */
-function CreateHTML({ lang }, items) {
+function CreateItems(items) {
 	const sizeList = items || [
 		{ text: '1', value: '1em' },
 		{ text: '1.2', value: '1.2em' },
@@ -120,31 +117,11 @@ function CreateHTML({ lang }, items) {
 		{ text: '2', value: '2em' },
 	];
 
-	let list = /*html*/ `
-	<div class="se-list-inner">
-		<ul class="se-list-basic">
-			<li>
-				<button type="button" class="se-btn se-btn-list default_value" data-command="" title="${lang.default}" aria-label="${lang.default}">
-					${lang.default}
-				</button>
-			</li>
-			<li class="se-btn-list se-sub-list"><span></span></li>`;
-
-	for (let i = 0, len = sizeList.length, size; i < len; i++) {
-		size = sizeList[i];
-		list += /*html*/ `
-			<li>
-				<button type="button" class="se-btn se-btn-list" data-command="${size.value}" title="${size.text}" aria-label="${size.text}">
-					${size.text}
-				</button>
-			</li>`;
-	}
-
-	list += /*html*/ `
-		</ul>
-	</div>`;
-
-	return dom.utils.createElement('DIV', { class: 'se-dropdown se-list-layer' }, list);
+	return sizeList.map((size) => ({
+		command: size.value,
+		title: size.text,
+		innerHTML: size.text,
+	}));
 }
 
 export default LineHeight;

package/src/plugins/dropdown/list.js

@@ -22,18 +22,15 @@ class List extends PluginDropdown {
 		this.title = this.$.lang.list;
 		this.icon = 'list_numbered';
 
-		// create HTML
-		const menu = CreateHTML(this.$);
-
 		// members
-		this.#listItems = menu.querySelectorAll('li button');
 		this.#listIcons = {
 			bulleted: this.$.icons.list_bulleted,
 			numbered: this.$.icons.list_numbered,
 		};
 
-		// init
-		this.$.menu.initDropdownTarget(List, menu);
+		// create menu from items
+		const menu = this.$.menu.initDropdownTarget(List, CreateItems(this.$));
+		this.#listItems = menu.querySelectorAll('li button');
 	}
 
 	/**
@@ -97,26 +94,23 @@ class List extends PluginDropdown {
 
 /**
  * @param {SunEditor.Deps} $ - Kernel dependencies
- * @returns {HTMLElement}
+ * @returns {Array<import('../../core/logic/panel/menu').DropdownItem>}
  */
-function CreateHTML({ lang, icons }) {
-	const html = /*html*/ `
-	<div class="se-list-inner">
-		<ul class="se-list-basic">
-			<li>
-				<button type="button" class="se-btn se-btn-list se-tooltip se-icon-flip-rtl" data-command="ol" title="${lang.numberedList}" aria-label="${lang.numberedList}">
-					${icons.list_numbered}
-				</button>
-			</li>
-			<li>
-				<button type="button" class="se-btn se-btn-list se-tooltip se-icon-flip-rtl" data-command="ul" title="${lang.bulletedList}" aria-label="${lang.bulletedList}">
-					${icons.list_bulleted}
-				</button>
-			</li>
-		</ul>
-	</div>`;
-
-	return dom.utils.createElement('DIV', { class: 'se-dropdown se-list-layer' }, html);
+function CreateItems({ lang, icons }) {
+	return [
+		{
+			command: 'ol',
+			title: lang.numberedList,
+			innerHTML: icons.list_numbered,
+			className: 'se-tooltip se-icon-flip-rtl',
+		},
+		{
+			command: 'ul',
+			title: lang.bulletedList,
+			innerHTML: icons.list_bulleted,
+			className: 'se-tooltip se-icon-flip-rtl',
+		},
+	];
 }
 
 export default List;

package/src/plugins/dropdown/paragraphStyle.js

@@ -35,14 +35,13 @@ class ParagraphStyle extends PluginDropdown {
 		this.title = this.$.lang.paragraphStyle;
 		this.icon = 'paragraph_style';
 
-		// create HTML
-		const menu = CreateHTML(this.$, pluginOptions.items);
+		// create menu from items
+		const menu = this.$.menu.initDropdownTarget(ParagraphStyle, CreateItems(this.$, pluginOptions.items), {
+			className: 'se-list-format',
+		});
 
 		// members
 		this.classList = menu.querySelectorAll('li button');
-
-		// init
-		this.$.menu.initDropdownTarget(ParagraphStyle, menu);
 	}
 
 	/**
@@ -88,9 +87,9 @@ class ParagraphStyle extends PluginDropdown {
 /**
  * @param {SunEditor.Deps} $ - Kernel dependencies
  * @param {Array<string|{name: string, class: string, _class?: string}>} [items] - Paragraph style items
- * @returns {HTMLElement}
+ * @returns {Array<import('../../core/logic/panel/menu').DropdownItem>}
  */
-function CreateHTML({ lang }, items) {
+function CreateItems({ lang }, items) {
 	const defaultList = {
 		spaced: {
 			name: lang.menu_spaced,
@@ -109,12 +108,9 @@ function CreateHTML({ lang }, items) {
 		},
 	};
 	const paragraphStyles = !items || items.length === 0 ? ['spaced', 'bordered', 'neon'] : items;
+	const result = [];
 
-	let list = /*html*/ `
-	<div class="se-list-inner">
-		<ul class="se-list-basic">`;
-
-	for (let i = 0, len = paragraphStyles.length, p, name, attrs, _class; i < len; i++) {
+	for (let i = 0, len = paragraphStyles.length, p, name, attrs; i < len; i++) {
 		p = paragraphStyles[i];
 
 		if (typeof p === 'string') {
@@ -125,20 +121,16 @@ function CreateHTML({ lang }, items) {
 
 		name = p.name;
 		attrs = p.class ? ` class="${p.class}"` : '';
-		_class = p._class;
-
-		list += /*html*/ `
-			<li>
-				<button type="button" class="se-btn se-btn-list${_class ? ' ' + _class : ''}" data-command="${p.class}" title="${name}" aria-label="${name}">
-					<div${attrs}>${name}</div>
-				</button>
-			</li>`;
+
+		result.push({
+			command: p.class,
+			title: name,
+			innerHTML: `<div${attrs}>${name}</div>`,
+			className: p._class || undefined,
+		});
 	}
-	list += /*html*/ `
-		</ul>
-	</div>`;
 
-	return dom.utils.createElement('DIV', { class: 'se-dropdown se-list-layer se-list-format' }, list);
+	return result;
 }
 
 export default ParagraphStyle;

package/src/plugins/dropdown/table/index.js

@@ -4,7 +4,13 @@ import { Controller, Figure } from '../../../modules/contract';
 import { _DragHandle } from '../../../modules/ui';
 
 import * as Constants from './shared/table.constants';
-import { CreateCellsString, GetMaxColumns, IsResizeEls, IsTableCaption, GetLogicalCellIndex } from './shared/table.utils';
+import {
+	CreateCellsString,
+	GetMaxColumns,
+	IsResizeEls,
+	IsTableCaption,
+	GetLogicalCellIndex,
+} from './shared/table.utils';
 import { CreateHTML, CreateHTML_controller_table, CreateHTML_controller_cell } from './render/table.html';
 
 import TableCellService from './services/table.cell';
@@ -89,10 +95,18 @@ class Table extends PluginDropdownFree {
 		const controller_cell = CreateHTML_controller_cell(this.$, this.cellControllerTop);
 
 		this.$.contextProvider.applyToRoots((e) => {
-			e.get('wrapper').appendChild(dom.utils.createElement('DIV', { class: Constants.RESIZE_CELL_CLASS.replace(/^\./, '') }));
-			e.get('wrapper').appendChild(dom.utils.createElement('DIV', { class: Constants.RESIZE_CELL_PREV_CLASS.replace(/^\./, '') }));
-			e.get('wrapper').appendChild(dom.utils.createElement('DIV', { class: Constants.RESIZE_ROW_CLASS.replace(/^\./, '') }));
-			e.get('wrapper').appendChild(dom.utils.createElement('DIV', { class: Constants.RESIZE_ROW_PREV_CLASS.replace(/^\./, '') }));
+			e.get('wrapper').appendChild(
+				dom.utils.createElement('DIV', { class: Constants.RESIZE_CELL_CLASS.replace(/^\./, '') }),
+			);
+			e.get('wrapper').appendChild(
+				dom.utils.createElement('DIV', { class: Constants.RESIZE_CELL_PREV_CLASS.replace(/^\./, '') }),
+			);
+			e.get('wrapper').appendChild(
+				dom.utils.createElement('DIV', { class: Constants.RESIZE_ROW_CLASS.replace(/^\./, '') }),
+			);
+			e.get('wrapper').appendChild(
+				dom.utils.createElement('DIV', { class: Constants.RESIZE_ROW_PREV_CLASS.replace(/^\./, '') }),
+			);
 		});
 
 		// members - Controller
@@ -175,7 +189,12 @@ class Table extends PluginDropdownFree {
 
 		this.#maxWidth = this.state.figureElement?.style.width === '100%';
 		this.#fixedColumn = dom.utils.hasClass(target, 'se-table-layout-fixed') || target.style.tableLayout === 'fixed';
-		this.styleService.setTableLayout(this.#maxWidth ? 'width|column' : 'width', this.#maxWidth, this.#fixedColumn, true);
+		this.styleService.setTableLayout(
+			this.#maxWidth ? 'width|column' : 'width',
+			this.#maxWidth,
+			this.#fixedColumn,
+			true,
+		);
 
 		if (_DragHandle.get('__overInfo') === ON_OVER_COMPONENT) return;
 
@@ -185,12 +204,22 @@ class Table extends PluginDropdownFree {
 		// controller open
 		const btnDisabled = this.state.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 });
+		this.controller_table.open(figureEl, null, {
+			isWWTarget: false,
+			initMethod: null,
+			addOffset: null,
+			disabled: btnDisabled,
+		});
 
 		if (!this.state.fixedCell) return;
 
 		this.cellService.setUnMergeButton();
-		this.controller_cell.open(this.state.tdElement, this.cellControllerTop ? figureEl : null, { isWWTarget: false, initMethod: null, addOffset: null, disabled: btnDisabled });
+		this.controller_cell.open(this.state.tdElement, this.cellControllerTop ? figureEl : null, {
+			isWWTarget: false,
+			initMethod: null,
+			addOffset: null,
+			disabled: btnDisabled,
+		});
 	}
 
 	/**
@@ -253,7 +282,7 @@ class Table extends PluginDropdownFree {
 		if (domParserBody.childElementCount !== 1) return;
 
 		const componentInfo = this.$.component.get(domParserBody.firstElementChild);
-		if (componentInfo.pluginName !== Table.key) return;
+		if (componentInfo?.pluginName !== Table.key) return;
 
 		const copyTable = /** @type {HTMLTableElement} */ (componentInfo.target);
 		const selectedCells = this.clipboardService.pasteTableCellMatrix(copyTable, targetCell);
@@ -278,7 +307,9 @@ class Table extends PluginDropdownFree {
 			/** @param {HTMLTableElement} element */
 			method: (element) => {
 				const ColgroupEl = element.querySelector('colgroup');
-				let FigureEl = /** @type {HTMLElement} */ (dom.check.isFigure(element.parentNode) ? element.parentNode : null);
+				let FigureEl = /** @type {HTMLElement} */ (
+					dom.check.isFigure(element.parentNode) ? element.parentNode : null
+				);
 
 				// create colgroup
 				if (!ColgroupEl) {
@@ -318,7 +349,9 @@ class Table extends PluginDropdownFree {
 									if (existingWidth === null) {
 										colWidths[targetColIndex] = `width: ${cellWidth};`;
 									} else {
-										const existingPxWidth = parseFloat(existingWidth.replace('width: ', '').replace(';', ''));
+										const existingPxWidth = parseFloat(
+											existingWidth.replace('width: ', '').replace(';', ''),
+										);
 										if (colSpan === 1 && currentPxWidth !== existingPxWidth) {
 											colWidths[targetColIndex] = `width: ${cellWidth};`;
 										}
@@ -370,7 +403,10 @@ class Table extends PluginDropdownFree {
 				} else {
 					const scrollTypeClass = `se-scroll-figure-${this.figureScroll}`;
 					dom.utils.addClass(FigureEl, scrollTypeClass);
-					dom.utils.removeClass(FigureEl, this.figureScrollList.filter((v) => v !== scrollTypeClass).join('|'));
+					dom.utils.removeClass(
+						FigureEl,
+						this.figureScrollList.filter((v) => v !== scrollTypeClass).join('|'),
+					);
 				}
 			},
 		};
@@ -463,7 +499,13 @@ class Table extends PluginDropdownFree {
 
 		const keyCode = event.code;
 		const isTab = keyCodeMap.isTab(keyCode);
-		if (this.$.ui.selectMenuOn || this.resizeService.isResizing() || (!isTab && this.#_s) || keyCodeMap.isCtrl(event)) return;
+		if (
+			this.$.ui.selectMenuOn ||
+			this.resizeService.isResizing() ||
+			(!isTab && this.#_s) ||
+			keyCodeMap.isCtrl(event)
+		)
+			return;
 
 		if (!this.cellControllerTop) {
 			this.controller_cell.hide();
@@ -547,7 +589,10 @@ class Table extends PluginDropdownFree {
 	 */
 	onKeyUp({ line }) {
 		this.#_s = false;
-		if (this.state.isShiftPressed && dom.query.getParentElement(line, dom.check.isTableCell) === this.state.fixedCell) {
+		if (
+			this.state.isShiftPressed &&
+			dom.query.getParentElement(line, dom.check.isTableCell) === this.state.fixedCell
+		) {
 			this.selectionService.deleteStyleSelectedCells();
 			this._editorEnable(true);
 			this.#initService();
@@ -760,7 +805,8 @@ class Table extends PluginDropdownFree {
 		this.setState('tdElement', tdElement);
 		if (this.state.fixedCell === tdElement) dom.utils.addClass(tdElement, 'se-selected-cell-focus');
 		if (!this.state.selectedCells?.length) this.setState('selectedCells', [tdElement]);
-		const tableElement = this.state.selectedTable || this._element || dom.query.getParentElement(tdElement, 'TABLE');
+		const tableElement =
+			this.state.selectedTable || this._element || dom.query.getParentElement(tdElement, 'TABLE');
 		this.$.component.select(tableElement, Table.key, { isInput: true });
 	}
 
@@ -807,7 +853,13 @@ class Table extends PluginDropdownFree {
 	 * @param {Node} target - The target figure element.
 	 */
 	#figureOpen(target) {
-		this.figure.open(target, { nonResizing: true, nonSizeInfo: true, nonBorder: true, figureTarget: true, infoOnly: false });
+		this.figure.open(target, {
+			nonResizing: true,
+			nonSizeInfo: true,
+			nonBorder: true,
+			figureTarget: true,
+			infoOnly: false,
+		});
 	}
 
 	/**
@@ -885,7 +937,10 @@ class Table extends PluginDropdownFree {
 			scrollTypeClass = ` se-scroll-figure-${this.figureScroll}`;
 		}
 
-		const figure = dom.utils.createElement('FIGURE', { class: 'se-flex-component se-input-component' + scrollTypeClass, style: 'width: 100%;' });
+		const figure = dom.utils.createElement('FIGURE', {
+			class: 'se-flex-component se-input-component' + scrollTypeClass,
+			style: 'width: 100%;',
+		});
 		figure.appendChild(oTable);
 		this.#maxWidth = true;
 

package/src/plugins/dropdown/table/render/table.html.js

@@ -158,7 +158,9 @@ export function CreateHTML_controller_cell({ lang, icons }, cellControllerTop) {
  * @returns {TableCtrlProps}
  */
 export function CreateHTML_controller_properties({ lang, icons, options }) {
-	const alignItems = options.get('_rtl') ? ['right', 'center', 'left', 'justify'] : ['left', 'center', 'right', 'justify'];
+	const alignItems = options.get('_rtl')
+		? ['right', 'center', 'left', 'justify']
+		: ['left', 'center', 'right', 'justify'];
 	let alignHtml = '';
 	for (let i = 0, item, text; i < alignItems.length; i++) {
 		item = alignItems[i];