suneditor 3.1.3 → 3.2.0

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',
+		);
 	}
 }
 

package/src/plugins/dropdown/template.js

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

package/src/plugins/dropdown/textStyle.js

@@ -29,14 +29,13 @@ class TextStyle extends PluginDropdown {
 		this.title = this.$.lang.textStyle;
 		this.icon = 'text_style';
 
-		// create HTML
-		const menu = CreateHTML(this.$, pluginOptions.items);
+		// create menu from items
+		const menu = this.$.menu.initDropdownTarget(TextStyle, CreateItems(this.$, pluginOptions.items), {
+			className: 'se-list-format',
+		});
 
 		// members
 		this.styleList = menu.querySelectorAll('li button');
-
-		// init
-		this.$.menu.initDropdownTarget(TextStyle, menu);
 	}
 
 	/**
@@ -58,7 +57,11 @@ class TextStyle extends PluginDropdown {
 				while (node && !this.$.format.isLine(node) && !this.$.component.is(node)) {
 					if (node.nodeName.toLowerCase() === btn.getAttribute('data-command').toLowerCase()) {
 						value = data[v];
-						if (/^\./.test(value) ? dom.utils.hasClass(node, value.replace(/^\./, '')) : /** @type {HTMLElement} */ (node).style[value]) {
+						if (
+							/^\./.test(value)
+								? dom.utils.hasClass(node, value.replace(/^\./, ''))
+								: /** @type {HTMLElement} */ (node).style[value]
+						) {
 							active = true;
 							break;
 						}
@@ -98,9 +101,9 @@ class TextStyle extends PluginDropdown {
 /**
  * @param {SunEditor.Deps} $ - Kernel dependencies
  * @param {Array<string|{name: string, class: string, tag?: string}>} [items] - Text style items
- * @returns {HTMLElement}
+ * @returns {Array<import('../../core/logic/panel/menu').DropdownItem>}
  */
-function CreateHTML({ lang }, items) {
+function CreateItems({ lang }, items) {
 	const defaultList = {
 		code: {
 			name: lang.menu_code,
@@ -114,13 +117,10 @@ function CreateHTML({ lang }, items) {
 		},
 	};
 	const styleList = items || Object.keys(defaultList);
+	const result = [];
 
-	let list = '<div class="se-list-inner"><ul class="se-list-basic">';
-	for (let i = 0, len = styleList.length, t, tag, name, attrs, command, value; i < len; i++) {
+	for (let i = 0, len = styleList.length, t, tag, name, value; i < len; i++) {
 		t = styleList[i];
-		attrs = '';
-		value = '';
-		command = [];
 
 		if (typeof t === 'string') {
 			const cssText = defaultList[t.toLowerCase()];
@@ -130,30 +130,17 @@ function CreateHTML({ lang }, items) {
 
 		name = t.name;
 		tag = t.tag || 'span';
-
-		attrs += ` class="${t.class}"`;
-		value += `.${t.class.trim().replace(/\s+/g, ',.')}`;
-		command.push('class');
-
-		value = value.replace(/,$/, '');
-
-		list += `
-		<li>
-			<button 
-				type="button" 
-				class="se-btn se-btn-list" 
-				data-command="${tag}" 
-				data-value="${value}" 
-				title="${name}" 
-				aria-label="${name}"
-			>
-				<${tag}${attrs}>${name}</${tag}>
-			</button>
-		</li>`;
+		value = `.${t.class.trim().replace(/\s+/g, ',.')}`.replace(/,$/, '');
+
+		result.push({
+			command: tag,
+			value,
+			title: name,
+			innerHTML: `<${tag} class="${t.class}">${name}</${tag}>`,
+		});
 	}
-	list += '</ul></div>';
 
-	return dom.utils.createElement('DIV', { class: 'se-dropdown se-list-layer se-list-format' }, list);
+	return result;
 }
 
 export default TextStyle;

package/src/plugins/field/autocomplete.js

@@ -128,8 +128,6 @@ class Autocomplete extends PluginField {
 	 */
 	constructor(kernel, pluginOptions) {
 		super(kernel);
-		this.title = this.$.lang.autocomplete;
-		this.icon = 'autocomplete';
 
 		// global defaults
 		const limitSize = pluginOptions.limitSize || 5;
@@ -164,7 +162,11 @@ class Autocomplete extends PluginField {
 
 		// controller
 		const controllerEl = CreateHTML_controller();
-		this.selectMenu = new SelectMenu(this.$, { position: 'right-bottom', dir: 'ltr', closeMethod: () => this.controller.close() });
+		this.selectMenu = new SelectMenu(this.$, {
+			position: 'right-bottom',
+			dir: 'ltr',
+			closeMethod: () => this.controller.close(),
+		});
 		this.controller = new Controller(
 			this,
 			this.$,
@@ -263,7 +265,9 @@ class Autocomplete extends PluginField {
 
 		if (!response) {
 			if (ctx.directData) {
-				response = ctx.directData.filter((item) => item.key.toLowerCase().startsWith(lowerValue)).slice(0, limit);
+				response = ctx.directData
+					.filter((item) => item.key.toLowerCase().startsWith(lowerValue))
+					.slice(0, limit);
 			} else {
 				const xmlHttp = await ctx.apiManager.asyncCall({ method: 'GET', url: this.#createUrl(ctx, value) });
 				const json = JSON.parse(xmlHttp.responseText);