suneditor 3.1.4 → 3.2.1

package/src/plugins/browser/audioGallery.js

@@ -49,7 +49,8 @@ class AudioGallery extends PluginBrowser {
 		this.onSelectfunction = null;
 
 		// modules
-		const thumbnail = typeof pluginOptions.thumbnail === 'string' ? pluginOptions.thumbnail : this.$.icons.audio_thumbnail;
+		const thumbnail =
+			typeof pluginOptions.thumbnail === 'string' ? pluginOptions.thumbnail : this.$.icons.audio_thumbnail;
 		this.browser = new Browser(this, this.$, {
 			title: this.$.lang.audioGallery,
 			data: pluginOptions.data,

package/src/plugins/browser/fileBrowser.js

@@ -61,7 +61,11 @@ class FileBrowser extends PluginBrowser {
 		this.onSelectfunction = null;
 
 		// modules
-		const thumbnail = { video: this.$.icons.video_thumbnail, audio: this.$.icons.audio_thumbnail, file: this.$.icons.file_thumbnail };
+		const thumbnail = {
+			video: this.$.icons.video_thumbnail,
+			audio: this.$.icons.audio_thumbnail,
+			file: this.$.icons.file_thumbnail,
+		};
 		const defaultThumbnail = this.$.icons.file_thumbnail;
 		this.browser = new Browser(this, this.$, {
 			title: this.$.lang.fileBrowser,
@@ -73,7 +77,10 @@ class FileBrowser extends PluginBrowser {
 			selectorHandler: this.#SetItem.bind(this),
 			columnSize: 4,
 			className: 'se-file-browser',
-			thumbnail: typeof pluginOptions.thumbnail === 'function' ? pluginOptions.thumbnail : (item) => thumbnail[item.type] || defaultThumbnail,
+			thumbnail:
+				typeof pluginOptions.thumbnail === 'function'
+					? pluginOptions.thumbnail
+					: (item) => thumbnail[item.type] || defaultThumbnail,
 			props: [...new Set((pluginOptions.props ?? []).concat(['frame']))],
 			expand: pluginOptions.expand,
 		});

package/src/plugins/browser/fileGallery.js

@@ -50,7 +50,8 @@ class FileGallery extends PluginBrowser {
 		this.onSelectfunction = null;
 
 		// modules
-		const thumbnail = typeof pluginOptions.thumbnail === 'string' ? pluginOptions.thumbnail : this.$.icons.file_thumbnail;
+		const thumbnail =
+			typeof pluginOptions.thumbnail === 'string' ? pluginOptions.thumbnail : this.$.icons.file_thumbnail;
 		this.browser = new Browser(this, this.$, {
 			title: this.$.lang.fileGallery,
 			data: pluginOptions.data,

package/src/plugins/browser/imageGallery.js

@@ -62,8 +62,14 @@ class ImageGallery extends PluginBrowser {
 		});
 
 		// members
-		this.width = this.$.plugins.image.pluginOptions.defaultWidth === 'auto' ? '' : this.$.plugins.image.pluginOptions.defaultWidth;
-		this.height = this.$.plugins.image.pluginOptions.defaultHeight === 'auto' ? '' : this.$.plugins.image.pluginOptions.defaultHeight;
+		this.width =
+			this.$.plugins.image.pluginOptions.defaultWidth === 'auto'
+				? ''
+				: this.$.plugins.image.pluginOptions.defaultWidth;
+		this.height =
+			this.$.plugins.image.pluginOptions.defaultHeight === 'auto'
+				? ''
+				: this.$.plugins.image.pluginOptions.defaultHeight;
 	}
 
 	/**
@@ -94,7 +100,16 @@ class ImageGallery extends PluginBrowser {
 		} else {
 			const file = { name: target.getAttribute('data-name'), size: 0 };
 			this.$.plugins.image.modalInit();
-			this.$.plugins.image.create(target.getAttribute('data-command'), null, this.width, this.height, 'none', file, target.alt, true);
+			this.$.plugins.image.create(
+				target.getAttribute('data-command'),
+				null,
+				this.width,
+				this.height,
+				'none',
+				file,
+				target.alt,
+				true,
+			);
 		}
 	}
 }

package/src/plugins/browser/videoGallery.js

@@ -50,7 +50,8 @@ class VideoGallery extends PluginBrowser {
 		this.onSelectfunction = null;
 
 		// modules
-		const thumbnail = typeof pluginOptions.thumbnail === 'string' ? pluginOptions.thumbnail : this.$.icons.video_thumbnail;
+		const thumbnail =
+			typeof pluginOptions.thumbnail === 'string' ? pluginOptions.thumbnail : this.$.icons.video_thumbnail;
 		this.browser = new Browser(this, this.$, {
 			title: this.$.lang.videoGallery,
 			data: pluginOptions.data,
@@ -66,8 +67,14 @@ class VideoGallery extends PluginBrowser {
 		});
 
 		// members
-		this.width = this.$.plugins.video.pluginOptions.defaultWidth === 'auto' ? '' : this.$.plugins.video.pluginOptions.defaultWidth;
-		this.height = this.$.plugins.video.pluginOptions.defaultHeight === 'auto' ? '' : this.$.plugins.video.pluginOptions.defaultHeight;
+		this.width =
+			this.$.plugins.video.pluginOptions.defaultWidth === 'auto'
+				? ''
+				: this.$.plugins.video.pluginOptions.defaultWidth;
+		this.height =
+			this.$.plugins.video.pluginOptions.defaultHeight === 'auto'
+				? ''
+				: this.$.plugins.video.pluginOptions.defaultHeight;
 	}
 
 	/**
@@ -105,7 +112,9 @@ class VideoGallery extends PluginBrowser {
 			const file = { name: target.getAttribute('data-name'), size: 0 };
 			this.$.plugins.video.modalInit();
 			this.$.plugins.video.create(
-				this.$.plugins.video[target.getAttribute('data-frame') === 'iframe' ? 'createIframeTag' : 'createVideoTag']({ poster: target.getAttribute('data-thumbnail') }),
+				this.$.plugins.video[
+					target.getAttribute('data-frame') === 'iframe' ? 'createIframeTag' : 'createVideoTag'
+				]({ poster: target.getAttribute('data-thumbnail') }),
 				url,
 				null,
 				this.width,

package/src/plugins/command/blockquote.js

@@ -45,7 +45,12 @@ class Blockquote extends PluginCommand {
 		const currentBlockquote = dom.query.getParentElement(this.$.selection.getNode(), 'blockquote');
 
 		if (currentBlockquote) {
-			this.$.format.removeBlock(currentBlockquote, { selectedFormats: null, newBlockElement: null, shouldDelete: false, skipHistory: false });
+			this.$.format.removeBlock(currentBlockquote, {
+				selectedFormats: null,
+				newBlockElement: null,
+				shouldDelete: false,
+				skipHistory: false,
+			});
 		} else {
 			this.$.format.applyBlock(this.quoteTag.cloneNode(false));
 		}

package/src/plugins/command/codeBlock.js

@@ -5,7 +5,29 @@ import { SelectMenu } from '../../modules/ui';
 
 void PluginDropdown;
 
-const DEFAULT_LANGS = ['javascript', 'typescript', 'html', 'css', 'json', 'python', 'java', 'c', 'cpp', 'csharp', 'go', 'rust', 'ruby', 'php', 'swift', 'kotlin', 'sql', 'bash', 'markdown', 'xml', 'yaml'];
+const DEFAULT_LANGS = [
+	'javascript',
+	'typescript',
+	'html',
+	'css',
+	'json',
+	'python',
+	'java',
+	'c',
+	'cpp',
+	'csharp',
+	'go',
+	'rust',
+	'ruby',
+	'php',
+	'swift',
+	'kotlin',
+	'sql',
+	'bash',
+	'markdown',
+	'xml',
+	'yaml',
+];
 
 /**
  * @typedef {Object} CodeBlockPluginOptions
@@ -66,7 +88,12 @@ class CodeBlock extends PluginCommand {
 		// ───────────────── [[toolbar dropdown type]] ─────────────────
 		this.afterItem = dom.utils.createElement(
 			'button',
-			{ class: 'se-btn se-tooltip se-sub-arrow-btn', type: 'button', 'data-command': CodeBlock.key, 'data-type': 'dropdown' },
+			{
+				class: 'se-btn se-tooltip se-sub-arrow-btn',
+				type: 'button',
+				'data-command': CodeBlock.key,
+				'data-type': 'dropdown',
+			},
 			`${this.$.icons.arrow_down}<span class="se-tooltip-inner"><span class="se-tooltip-text">${this.$.lang.codeLanguage || 'Language'}</span></span>`,
 		);
 
@@ -242,11 +269,19 @@ class CodeBlock extends PluginCommand {
 	}
 
 	#addPreLeaveEvent() {
-		this.#mouseLeaveEvent ??= this.$.eventManager.addEvent(this.#hoverCurrentPre, 'mouseleave', this.#removeEventFunc);
+		this.#mouseLeaveEvent ??= this.$.eventManager.addEvent(
+			this.#hoverCurrentPre,
+			'mouseleave',
+			this.#removeEventFunc,
+		);
 	}
 
 	#addCtrlLeaveEvent() {
-		this.#mouseLeaveEvent ??= this.$.eventManager.addEvent(this.#hoverController.form, 'mouseleave', this.#removeEventFunc);
+		this.#mouseLeaveEvent ??= this.$.eventManager.addEvent(
+			this.#hoverController.form,
+			'mouseleave',
+			this.#removeEventFunc,
+		);
 	}
 
 	#buildHoverMenu(currentLang) {
@@ -271,7 +306,10 @@ class CodeBlock extends PluginCommand {
 	 * @returns {string}
 	 */
 	#getPreLang(preOrChild) {
-		const pre = preOrChild?.nodeName === 'PRE' ? preOrChild : dom.query.getParentElement(preOrChild, (el) => /^PRE$/i.test(el.nodeName));
+		const pre =
+			preOrChild?.nodeName === 'PRE'
+				? preOrChild
+				: dom.query.getParentElement(preOrChild, (el) => /^PRE$/i.test(el.nodeName));
 		if (!pre) return '';
 		return /** @type {HTMLElement} */ (pre).className.match(/language-(\S+)/)?.[1] || '';
 	}

package/src/plugins/command/exportPDF.js

@@ -62,17 +62,29 @@ class ExportPDF extends PluginCommand {
 		let ww = null;
 
 		try {
-			const standardWW = this.$.frameContext.get('documentTypePageMirror') || this.$.frameContext.get('wysiwygFrame');
+			const standardWW =
+				this.$.frameContext.get('documentTypePageMirror') || this.$.frameContext.get('wysiwygFrame');
 
 			// Strip theme class so getComputedStyle resolves default (light) colors for borders, shadows, etc.
 			const themeClass = (this.$.options.get('_themeClass') || '').trim();
 			const wwClassName = themeClass ? standardWW.className.replace(themeClass, '').trim() : standardWW.className;
 			const editableDiv = dom.utils.createElement('div', { class: wwClassName }, standardWW.innerHTML);
-			ww = dom.utils.createElement('div', { style: `position: absolute; top: -10000px; left: -10000px; width: 21cm; columns: 21cm; height: auto;` }, editableDiv);
+			ww = dom.utils.createElement(
+				'div',
+				{
+					style: `position: absolute; top: -10000px; left: -10000px; width: 21cm; columns: 21cm; height: auto;`,
+				},
+				editableDiv,
+			);
 
 			const innerPadding = _w.getComputedStyle(standardWW).padding;
 			const inlineWW = dom.utils.applyInlineStylesAll(editableDiv, true, this.$.options.get('allUsedStyles'));
-			inlineWW.style.padding = inlineWW.style.paddingTop = inlineWW.style.paddingBottom = inlineWW.style.paddingLeft = inlineWW.style.paddingRight = '0';
+			inlineWW.style.padding =
+				inlineWW.style.paddingTop =
+				inlineWW.style.paddingBottom =
+				inlineWW.style.paddingLeft =
+				inlineWW.style.paddingRight =
+					'0';
 
 			ww.innerHTML = `
 				<style>
@@ -129,7 +141,11 @@ class ExportPDF extends PluginCommand {
 		const contentDisposition = xhr.getResponseHeader('Content-Disposition');
 		const downloadUrl = URL.createObjectURL(blob);
 		const filename = (contentDisposition.match(/filename="([^"]+)/) || [])[1] || this.fileName + '.pdf';
-		const a = dom.utils.createElement('A', { href: downloadUrl, download: filename, style: 'display: none;' }, null);
+		const a = dom.utils.createElement(
+			'A',
+			{ href: downloadUrl, download: filename, style: 'display: none;' },
+			null,
+		);
 
 		try {
 			_d.body.appendChild(a);

package/src/plugins/command/fileUpload.js

@@ -69,7 +69,8 @@ class FileUpload extends PluginCommand {
 		this.title = this.$.lang.fileUpload;
 		this.icon = 'file_upload';
 
-		if (!pluginOptions.uploadUrl) console.warn('[SUNEDITOR.fileUpload.warn] "fileUpload" plugin must be have "uploadUrl" option.');
+		if (!pluginOptions.uploadUrl)
+			console.warn('[SUNEDITOR.fileUpload.warn] "fileUpload" plugin must be have "uploadUrl" option.');
 
 		// members
 		this.uploadUrl = pluginOptions.uploadUrl;
@@ -77,7 +78,8 @@ class FileUpload extends PluginCommand {
 		this.uploadSizeLimit = numbers.get(pluginOptions.uploadSizeLimit, 0);
 		this.uploadSingleSizeLimit = numbers.get(pluginOptions.uploadSingleSizeLimit, 0);
 		this.allowMultiple = !!pluginOptions.allowMultiple;
-		this.acceptedFormats = typeof pluginOptions.acceptedFormats !== 'string' ? '*' : pluginOptions.acceptedFormats.trim() || '*';
+		this.acceptedFormats =
+			typeof pluginOptions.acceptedFormats !== 'string' ? '*' : pluginOptions.acceptedFormats.trim() || '*';
 		this.as = pluginOptions.as || 'box';
 		this.insertBehavior = pluginOptions.insertBehavior;
 		this.input = dom.utils.createElement('input', { type: 'file', accept: this.acceptedFormats });
@@ -109,7 +111,9 @@ class FileUpload extends PluginCommand {
 			},
 		};
 
-		const figureControls = (pluginOptions.controls || [['custom-as', 'align', 'edit', 'custom-download', 'copy', 'remove']]).map((subArray) => subArray.map((item) => (item.startsWith('custom-') ? customItems[item] : item)));
+		const figureControls = (
+			pluginOptions.controls || [['custom-as', 'align', 'edit', 'custom-download', 'copy', 'remove']]
+		).map((subArray) => subArray.map((item) => (item.startsWith('custom-') ? customItems[item] : item)));
 		this.figure = new Figure(this, this.$, figureControls, {});
 
 		// file manager
@@ -122,7 +126,13 @@ class FileUpload extends PluginCommand {
 		// controller
 		if (/\bedit\b/.test(JSON.stringify(figureControls))) {
 			const controllerEl = CreateHTML_controller(this.$);
-			this.controller = new Controller(this, this.$, controllerEl, { position: 'bottom', disabled: true }, FileUpload.key);
+			this.controller = new Controller(
+				this,
+				this.$,
+				controllerEl,
+				{ position: 'bottom', disabled: true },
+				FileUpload.key,
+			);
 			this.editInput = controllerEl.querySelector('input');
 		}
 
@@ -188,7 +198,13 @@ class FileUpload extends PluginCommand {
 		if (dom.check.isFigure(target.parentElement)) {
 			asBtn.innerHTML = this.$.icons.reduction + dom.utils.createTooltipInner(this.$.lang.asLink);
 			asBtn.setAttribute('data-value', 'link');
-			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,
+			});
 		} else {
 			asBtn.innerHTML = this.$.icons.expansion + dom.utils.createTooltipInner(this.$.lang.asBlock);
 			asBtn.setAttribute('data-value', 'box');
@@ -204,7 +220,11 @@ class FileUpload extends PluginCommand {
 	componentEdit(target) {
 		this.editInput.value = target.textContent;
 		this.figure.controllerHide();
-		this.controller.open(target, null, { isWWTarget: !dom.check.isFigure(target.parentElement), initMethod: null, addOffset: null });
+		this.controller.open(target, null, {
+			isWWTarget: !dom.check.isFigure(target.parentElement),
+			initMethod: null,
+			addOffset: null,
+		});
 		this.editInput.focus();
 	}
 
@@ -218,11 +238,17 @@ class FileUpload extends PluginCommand {
 		const figure = Figure.GetContainer(target);
 		const containerTarget = dom.query.getParentElement(target, '.se-component') || target;
 
-		const message = await this.$.eventManager.triggerEvent('onFileDeleteBefore', { element: figure.target, container: figure, url: figure.target.getAttribute('href') });
+		const message = await this.$.eventManager.triggerEvent('onFileDeleteBefore', {
+			element: figure.target,
+			container: figure,
+			url: figure.target.getAttribute('href'),
+		});
 		if (message === false) return;
 
 		const isInlineComp = this.$.component.isInline(containerTarget);
-		const focusEl = isInlineComp ? containerTarget.previousSibling || containerTarget.nextSibling : containerTarget.previousElementSibling || containerTarget.nextElementSibling;
+		const focusEl = isInlineComp
+			? containerTarget.previousSibling || containerTarget.nextSibling
+			: containerTarget.previousElementSibling || containerTarget.nextElementSibling;
 		dom.utils.removeItem(containerTarget);
 		this.$.ui.offCurrentController();
 
@@ -245,7 +271,8 @@ class FileUpload extends PluginCommand {
 			f = fileList[i];
 			s = f.size;
 			if (slngleSizeLimit > 0 && s > slngleSizeLimit) {
-				const err = '[SUNEDITOR.fileUpload.fail] Size of uploadable single file: ' + slngleSizeLimit / 1000 + 'KB';
+				const err =
+					'[SUNEDITOR.fileUpload.fail] Size of uploadable single file: ' + slngleSizeLimit / 1000 + 'KB';
 				const message = await this.$.eventManager.triggerEvent('onFileUploadError', {
 					error: err,
 					limitSize: slngleSizeLimit,
@@ -369,14 +396,22 @@ class FileUpload extends PluginCommand {
 
 		if (this.as === 'link') {
 			a.className = 'se-component se-inline-component';
-			this.$.component.insert(a, { scrollTo: isLast ? true : false, insertBehavior: isLast ? this.insertBehavior : null });
+			this.$.component.insert(a, {
+				scrollTo: isLast ? true : false,
+				insertBehavior: isLast ? this.insertBehavior : null,
+			});
 			return;
 		}
 
 		const figure = Figure.CreateContainer(a);
 		dom.utils.addClass(figure.container, 'se-file-figure|se-flex-component');
 
-		if (!this.$.component.insert(figure.container, { scrollTo: isLast ? true : false, insertBehavior: isLast ? this.insertBehavior : null })) {
+		if (
+			!this.$.component.insert(figure.container, {
+				scrollTo: isLast ? true : false,
+				insertBehavior: isLast ? this.insertBehavior : null,
+			})
+		) {
 			this.$.focusManager.focus();
 			return;
 		}

package/src/plugins/command/list_bulleted.js

@@ -27,7 +27,12 @@ class List_bulleted extends PluginCommand {
 		this.icon = 'list_bulleted';
 		this.afterItem = dom.utils.createElement(
 			'button',
-			{ class: 'se-btn se-tooltip se-sub-arrow-btn', type: 'button', 'data-command': List_bulleted.key, 'data-type': 'dropdown' },
+			{
+				class: 'se-btn se-tooltip se-sub-arrow-btn',
+				type: 'button',
+				'data-command': List_bulleted.key,
+				'data-type': 'dropdown',
+			},
 			`${this.$.icons.arrow_down}<span class="se-tooltip-inner"><span class="se-tooltip-text">${this.$.lang.bulletedList}</span></span>`,
 		);
 

package/src/plugins/command/list_numbered.js

@@ -27,7 +27,12 @@ class List_numbered extends PluginCommand {
 		this.icon = 'list_numbered';
 		this.afterItem = dom.utils.createElement(
 			'button',
-			{ class: 'se-btn se-tooltip se-sub-arrow-btn', type: 'button', 'data-command': List_numbered.key, 'data-type': 'dropdown' },
+			{
+				class: 'se-btn se-tooltip se-sub-arrow-btn',
+				type: 'button',
+				'data-command': List_numbered.key,
+				'data-type': 'dropdown',
+			},
 			`${this.$.icons.arrow_down}<span class="se-tooltip-inner"><span class="se-tooltip-text">${this.$.lang.numberedList}</span></span>`,
 		);
 

package/src/plugins/dropdown/align.js

@@ -23,10 +23,6 @@ class Align extends PluginDropdown {
 		this.title = this.$.lang.align;
 		this.icon = this.$.options.get('_rtl') ? 'align_right' : 'align_left';
 
-		// create HTML
-		const menu = CreateHTML(this.$, pluginOptions.items);
-		const commandArea = (this._itemMenu = menu.querySelector('ul'));
-
 		// members
 		this.defaultDir = '';
 		this.alignIcons = {
@@ -35,10 +31,13 @@ class Align extends PluginDropdown {
 			right: this.$.icons.align_right,
 			center: this.$.icons.align_center,
 		};
-		this.alignList = commandArea.querySelectorAll('li button');
 
-		// init
-		this.$.menu.initDropdownTarget(Align, menu);
+		// create menu from items
+		const menu = this.$.menu.initDropdownTarget(Align, CreateItems(this.$, pluginOptions.items), {
+			className: 'se-list-align',
+		});
+		this._itemMenu = menu.querySelector('ul');
+		this.alignList = menu.querySelectorAll('li button');
 	}
 
 	/**
@@ -139,33 +138,22 @@ class Align extends PluginDropdown {
 /**
  * @param {SunEditor.Deps} $ - Kernel dependencies
  * @param {string[]} [items] - Align items list
- * @returns {HTMLElement}
+ * @returns {Array<import('../../core/logic/panel/menu').DropdownItem>}
  */
-function CreateHTML({ lang, icons, options }, items) {
-	const alignItems = Array.isArray(items) ? items : options.get('_rtl') ? ['right', 'center', 'left', 'justify'] : ['left', 'center', 'right', 'justify'];
-
-	let html = '';
-	for (let i = 0, item, text; i < alignItems.length; i++) {
-		item = alignItems[i];
-		text = lang['align' + item.charAt(0).toUpperCase() + item.slice(1)];
-		html += /*html*/ `
-		<li>
-			<button type="button" class="se-btn se-btn-list" data-command="${item}" title="${text}" aria-label="${text}">
-				<span class="se-list-icon">${icons['align_' + item]}</span>${text}
-			</button>
-		</li>`;
-	}
-
-	return dom.utils.createElement(
-		'div',
-		{
-			class: 'se-dropdown se-list-layer se-list-align',
-		},
-		/*html*/ `
-		<div class="se-list-inner">
-			<ul class="se-list-basic">${html}</ul>
-		</div>`,
-	);
+function CreateItems({ lang, icons, options }, items) {
+	const alignItems = Array.isArray(items)
+		? items
+		: options.get('_rtl')
+			? ['right', 'center', 'left', 'justify']
+			: ['left', 'center', 'right', 'justify'];
+	return alignItems.map((item) => {
+		const text = lang['align' + item.charAt(0).toUpperCase() + item.slice(1)];
+		return {
+			command: item,
+			title: text,
+			innerHTML: `<span class="se-list-icon">${icons['align_' + item]}</span>${text}`,
+		};
+	});
 }
 
 export default Align;

package/src/plugins/dropdown/backgroundColor.js

@@ -92,9 +92,17 @@ class BackgroundColor extends PluginDropdownFree {
 	colorPickerAction(color) {
 		if (color) {
 			const newNode = dom.utils.createElement('SPAN', { style: 'background-color: ' + color + ';' });
-			this.$.inline.apply(newNode, { stylesToModify: ['background-color'], nodesToRemove: null, strictRemove: null });
+			this.$.inline.apply(newNode, {
+				stylesToModify: ['background-color'],
+				nodesToRemove: null,
+				strictRemove: null,
+			});
 		} else {
-			this.$.inline.apply(null, { stylesToModify: ['background-color'], nodesToRemove: ['span'], strictRemove: true });
+			this.$.inline.apply(null, {
+				stylesToModify: ['background-color'],
+				nodesToRemove: ['span'],
+				strictRemove: true,
+			});
 		}
 
 		this.$.menu.dropdownOff();

package/src/plugins/dropdown/blockStyle.js

@@ -35,15 +35,14 @@ class BlockStyle extends PluginDropdown {
 		this.title = this.$.lang.formats;
 		this.inner = '<span class="se-txt">' + this.$.lang.formats + '</span>' + this.$.icons.arrow_down;
 
-		// create HTML
-		const menu = CreateHTML(this.$, pluginOptions.items);
+		// create menu from items
+		const menu = this.$.menu.initDropdownTarget(BlockStyle, CreateItems(this.$, pluginOptions.items), {
+			className: 'se-list-format',
+		});
 
 		// members
 		this.formatList = menu.querySelectorAll('li button');
 		this.currentFormat = '';
-
-		// init
-		this.$.menu.initDropdownTarget(BlockStyle, menu);
 	}
 
 	/**
@@ -86,7 +85,8 @@ class BlockStyle extends PluginDropdown {
 	on(target) {
 		const formatList = this.formatList;
 		const targetText = target.querySelector('.se-txt');
-		const currentFormat = (targetText.getAttribute('data-value') || '') + (targetText.getAttribute('data-class') || '');
+		const currentFormat =
+			(targetText.getAttribute('data-value') || '') + (targetText.getAttribute('data-class') || '');
 
 		if (currentFormat !== this.currentFormat) {
 			for (let i = 0, len = formatList.length, f; i < len; i++) {
@@ -136,15 +136,12 @@ class BlockStyle extends PluginDropdown {
 /**
  * @param {SunEditor.Deps} $ - Kernel dependencies
  * @param {Array<string|BlockStyleItem>} [items] - Block style items
- * @returns {HTMLElement}
+ * @returns {Array<import('../../core/logic/panel/menu').DropdownItem>}
  */
-function CreateHTML({ lang }, items) {
+function CreateItems({ lang }, items) {
 	const defaultFormats = ['p', 'blockquote', 'h1', 'h2', 'h3', 'h4', 'h5', 'h6'];
 	const formatList = !items || items.length === 0 ? defaultFormats : items;
-
-	let list = /*html*/ `
-	<div class="se-list-inner">
-		<ul class="se-list-basic">`;
+	const result = [];
 
 	for (let i = 0, len = formatList.length, format, tagName, command, name, h, attrs, className; i < len; i++) {
 		format = formatList[i];
@@ -165,18 +162,16 @@ function CreateHTML({ lang }, items) {
 			attrs = className ? ' class="' + className + '"' : '';
 		}
 
-		list += /*html*/ `
-			<li>
-				<button type="button" class="se-btn se-btn-list" data-command="${command}" data-value="${tagName}" data-class="${className}" title="${name}" aria-label="${name}">
-					<${tagName}${attrs}>${name}</${tagName}>
-				</button>
-			</li>`;
+		result.push({
+			command,
+			value: tagName,
+			title: name,
+			innerHTML: `<${tagName}${attrs}>${name}</${tagName}>`,
+			attrs: { 'data-class': className || '' },
+		});
 	}
-	list += /*html*/ `
-		</ul>
-	</div>`;
 
-	return dom.utils.createElement('DIV', { class: 'se-dropdown se-list-layer se-list-format' }, list);
+	return result;
 }
 
 export default BlockStyle;