suneditor 3.1.3 → 3.2.0

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;

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;