suneditor 2.46.1 → 3.0.0-alpha.1

package/src/plugins/command/list_numbered.js

@@ -0,0 +1,115 @@
+import EditorInjector from '../../editorInjector';
+import { domUtils } from '../../helper';
+
+const DEFAULT_TYPE = 'decimal';
+
+const List_numbered = function (editor) {
+	// plugin bisic properties
+	EditorInjector.call(this, editor);
+	this.title = this.lang.numberedList;
+	this.icon = 'list_numbered';
+	this.afterButton = domUtils.createElement(
+		'button',
+		{ class: 'se-btn se-tooltip se-sub-arrow-btn', '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>`
+	);
+
+	// create HTML
+	const menu = CreateHTML();
+
+	// members
+	this.listItems = menu.querySelectorAll('li button ol');
+
+	// init
+	this.menu.initDropdownTarget({ key: List_numbered.key, type: 'dropdown' }, menu);
+};
+
+List_numbered.key = 'list_numbered';
+List_numbered.type = 'command';
+List_numbered.className = 'se-icon-flip-rtl';
+List_numbered.prototype = {
+	/**
+	 * @override core
+	 */
+	active(element, target) {
+		if (domUtils.isListCell(element) && /^OL$/i.test(element.parentElement.nodeName)) {
+			domUtils.addClass(target, 'active');
+			return true;
+		}
+
+		domUtils.removeClass(target, 'active');
+		return false;
+	},
+
+	/**
+	 * @override dropdown
+	 */
+	on() {
+		const list = this.listItems;
+		const el = this.format.getBlock(this.selection.getNode());
+		const type = el?.style ? el.style.listStyleType || DEFAULT_TYPE : '';
+
+		for (let i = 0, len = list.length, l; i < len; i++) {
+			l = list[i];
+			if (type === l.style.listStyleType) {
+				domUtils.addClass(l.parentElement, 'active');
+			} else {
+				domUtils.removeClass(l.parentElement, 'active');
+			}
+		}
+	},
+
+	/**
+	 * @override core
+	 * @param {Element|null} target Target command button
+	 */
+	action(target) {
+		const el = this.format.getBlock(this.selection.getNode());
+		const type = target?.querySelector('ol')?.style.listStyleType || '';
+
+		if (domUtils.isList(el) && type) {
+			el.style.listStyleType = type;
+		} else {
+			const range = this.format.applyList(`ol:${type}`, null, false);
+			if (range) this.selection.setRange(range.sc, range.so, range.ec, range.eo);
+		}
+
+		this.menu.dropdownOff();
+		this.editor.focus();
+		this.history.push(false);
+	},
+
+	constructor: List_numbered
+};
+
+function CreateHTML() {
+	const html = /*html*/ `
+	<div class="se-list-inner">
+		<ul class="se-list-basic se-list-horizontal se-list-carrier">
+			${_CreateLI(['decimal', 'upper-roman', 'lower-roman'])}
+		</ul>
+		<ul class="se-list-basic se-list-horizontal se-list-carrier">
+		${_CreateLI(['lower-latin', 'upper-latin', 'lower-greek'])}
+		</ul>
+	</div>`;
+
+	return domUtils.createElement('DIV', { class: 'se-dropdown se-list-layer' }, html);
+}
+
+function _CreateLI(types) {
+	return types
+		.map((v) => {
+			return /*html*/ `
+			<li>
+				<button type="button" class="se-btn se-btn-list se-icon-flip-rtl" data-command="${v}" title="${v}" aria-label="${v}">
+					<ol style="list-style-type: ${v};">
+						<li></li><li></li><li></li>
+					</ol>
+				</button>
+			</li>
+		`;
+		})
+		.join('');
+}
+
+export default List_numbered;

package/src/plugins/dropdown/align.js

@@ -0,0 +1,143 @@
+import EditorInjector from '../../editorInjector';
+import { domUtils } from '../../helper';
+
+const Align = function (editor, pluginOptions) {
+	// plugin bisic properties
+	EditorInjector.call(this, editor);
+	this.title = this.lang.align;
+	this.icon = this.options.get('_rtl') ? 'align_right' : 'align_left';
+
+	// create HTML
+	const menu = CreateHTML(editor, pluginOptions.items);
+	const commandArea = (this._itemMenu = menu.querySelector('ul'));
+
+	// members
+	this.defaultDir = editor.options.get('_rtl') ? 'right' : 'left';
+	this.alignIcons = {
+		justify: editor.icons.align_justify,
+		left: editor.icons.align_left,
+		right: editor.icons.align_right,
+		center: editor.icons.align_center
+	};
+	this.alignList = commandArea.querySelectorAll('li button');
+
+	// init
+	this.menu.initDropdownTarget(Align, menu);
+};
+
+Align.key = 'align';
+Align.type = 'dropdown';
+Align.className = '';
+Align.prototype = {
+	/**
+	 * @override core
+	 * @param {Node} element Selection node.
+	 * @param {Element} target Target button.
+	 * @returns {boolean}
+	 */
+	active(element, target) {
+		const targetChild = target.firstElementChild;
+
+		if (!element) {
+			domUtils.changeElement(targetChild, this.alignIcons[this.defaultDir]);
+			target.removeAttribute('data-focus');
+		} else if (this.format.isLine(element)) {
+			const textAlign = element.style.textAlign;
+			if (textAlign) {
+				domUtils.changeElement(targetChild, this.alignIcons[textAlign] || this.alignIcons[this.defaultDir]);
+				target.setAttribute('data-focus', textAlign);
+				return true;
+			}
+		}
+
+		return false;
+	},
+
+	/**
+	 * @override dropdown
+	 */
+	on(target) {
+		const currentAlign = target.getAttribute('data-focus') || this.defaultDir;
+		if (!currentAlign) return;
+
+		const alignList = this.alignList;
+		for (let i = 0, len = alignList.length; i < len; i++) {
+			if (currentAlign === alignList[i].getAttribute('data-command')) {
+				domUtils.addClass(alignList[i], 'active');
+			} else {
+				domUtils.removeClass(alignList[i], 'active');
+			}
+		}
+	},
+
+	/**
+	 * @override core
+	 * @param {"rtl"|"ltr"} dir Direction
+	 */
+	setDir(dir) {
+		const _dir = dir === 'rtl' ? 'right' : 'left';
+		if (this.defaultDir === _dir) return;
+
+		this.defaultDir = _dir;
+		const leftBtn = this._itemMenu.querySelector('[data-command="left"]');
+		const rightBtn = this._itemMenu.querySelector('[data-command="right"]');
+		if (leftBtn && rightBtn) {
+			const lp = leftBtn.parentElement;
+			const rp = rightBtn.parentElement;
+			lp.appendChild(rightBtn);
+			rp.appendChild(leftBtn);
+		}
+	},
+
+	/**
+	 * @override core
+	 * @param {Element} target Target command button
+	 * @returns
+	 */
+	action(target) {
+		const value = target.getAttribute('data-command');
+		if (!value) return;
+
+		const defaultDir = this.defaultDir;
+		const selectedFormsts = this.format.getLines();
+		for (let i = 0, len = selectedFormsts.length; i < len; i++) {
+			domUtils.setStyle(selectedFormsts[i], 'textAlign', value === defaultDir ? '' : value);
+		}
+
+		this.editor.effectNode = null;
+		this.menu.dropdownOff();
+		this.editor.focus();
+		this.history.push(false);
+	},
+
+	constructor: Align
+};
+
+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 domUtils.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>`
+	);
+}
+
+export default Align;

package/src/plugins/dropdown/backgroundColor.js

@@ -0,0 +1,73 @@
+import EditorInjector from '../../editorInjector';
+import ColorPicker from '../../modules/ColorPicker';
+import { domUtils } from '../../helper';
+
+const BackgroundColor = function (editor, pluginOptions) {
+	EditorInjector.call(this, editor);
+	// plugin basic properties
+	this.title = this.lang.backgroundColor;
+	this.icon = 'background_color';
+
+	// create HTML
+	const menu = CreateHTML();
+
+	// members
+	this.colorPicker = new ColorPicker(this, 'backgroundColor', {
+		colorList: pluginOptions.items,
+		splitNum: pluginOptions.splitNum,
+		disableHEXInput: pluginOptions.disableHEXInput,
+		hueSliderOptions: { controllerOptions: { parents: [menu], isOutsideForm: true } }
+	});
+
+	// itit
+	menu.appendChild(this.colorPicker.target);
+	this.menu.initDropdownTarget(BackgroundColor, menu);
+};
+
+BackgroundColor.key = 'backgroundColor';
+BackgroundColor.type = 'dropdown-free';
+BackgroundColor.className = '';
+BackgroundColor.prototype = {
+	/**
+	 * @override dropdown
+	 */
+	on(target) {
+		this.colorPicker.init(this.selection.getNode(), target);
+	},
+
+	/**
+	 * @Override dropdown
+	 */
+	off() {
+		this.colorPicker.hueSliderClose();
+	},
+
+	/**
+	 *  @override ColorPicker
+	 */
+	colorPickerAction(value) {
+		this.action(value);
+	},
+
+	/**
+	 * @override core
+	 */
+	action(value) {
+		if (value) {
+			const newNode = domUtils.createElement('SPAN', { style: 'background-color: ' + value + ';' });
+			this.format.applyTextStyle(newNode, ['background-color'], null, null);
+		} else {
+			this.format.applyTextStyle(null, ['background-color'], ['span'], true);
+		}
+
+		this.menu.dropdownOff();
+	},
+
+	constructor: BackgroundColor
+};
+
+function CreateHTML() {
+	return domUtils.createElement('DIV', { class: 'se-dropdown se-list-layer' }, null);
+}
+
+export default BackgroundColor;

package/src/plugins/dropdown/font.js

@@ -0,0 +1,113 @@
+import EditorInjector from '../../editorInjector';
+import { domUtils } from '../../helper';
+
+const Font = function (editor, pluginOptions) {
+	EditorInjector.call(this, editor);
+	// plugin basic properties
+	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(editor, fontList);
+
+	// members
+	this.currentFont = '';
+	this.fontList = menu.querySelectorAll('ul li button');
+	this.fontArray = fontList;
+
+	// init
+	this.menu.initDropdownTarget(Font, menu);
+};
+
+Font.key = 'font';
+Font.type = 'dropdown';
+Font.className = 'se-btn-select se-btn-tool-font';
+Font.prototype = {
+	/**
+	 * @override core
+	 */
+	active(element, target) {
+		const targetText = target.querySelector('.se-txt');
+		const tooltip = target.parentNode.querySelector('.se-tooltip-text');
+
+		if (!element) {
+			const font = this.status.hasFocus ? this.editor.frameContext.get('wwComputedStyle').fontFamily : this.lang.font;
+			domUtils.changeTxt(targetText, font);
+			domUtils.changeTxt(tooltip, this.status.hasFocus ? this.lang.font + (font ? ' (' + font + ')' : '') : font);
+		} else if (element?.style.fontFamily.length > 0) {
+			const selectFont = element.style.fontFamily.replace(/["']/g, '');
+			domUtils.changeTxt(targetText, selectFont);
+			domUtils.changeTxt(tooltip, this.lang.font + ' (' + selectFont + ')');
+			return true;
+		}
+
+		return false;
+	},
+
+	/**
+	 * @override dropdown
+	 */
+	on(target) {
+		const fontList = this.fontList;
+		const currentFont = target.querySelector('.se-txt').textContent;
+
+		if (currentFont !== this.currentFont) {
+			for (let i = 0, len = fontList.length; i < len; i++) {
+				if (currentFont === (fontList[i].getAttribute('data-command') || '').replace(/'|"/g, '')) {
+					domUtils.addClass(fontList[i], 'active');
+				} else {
+					domUtils.removeClass(fontList[i], 'active');
+				}
+			}
+
+			this.currentFont = currentFont;
+		}
+	},
+
+	/**
+	 * @override core
+	 * @param {Element} target Target command button
+	 */
+	action(target) {
+		let value = target.getAttribute('data-command');
+		if (value) {
+			if (/[\s\d\W]/.test(value) && !/^['"].*['"]$/.test(value)) {
+				value = `"${value}"`;
+			}
+			const newNode = domUtils.createElement('SPAN', { style: 'font-family: ' + value + ';' });
+			this.format.applyTextStyle(newNode, ['font-family'], null, null);
+		} else {
+			this.format.applyTextStyle(null, ['font-family'], ['span'], true);
+		}
+
+		this.menu.dropdownOff();
+	},
+
+	constructor: Font
+};
+
+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" title="${lang.default}" aria-label="${lang.default}">(${lang.default})</button>
+			</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 domUtils.createElement('DIV', { class: 'se-dropdown se-list-layer se-list-font-family' }, list);
+}
+
+export default Font;

package/src/plugins/dropdown/fontColor.js

@@ -0,0 +1,73 @@
+import EditorInjector from '../../editorInjector';
+import ColorPicker from '../../modules/ColorPicker';
+import { domUtils } from '../../helper';
+
+const FontColor = function (editor, pluginOptions) {
+	EditorInjector.call(this, editor);
+	// plugin basic properties
+	this.title = this.lang.fontColor;
+	this.icon = 'font_color';
+
+	// create HTML
+	const menu = CreateHTML();
+
+	// members
+	this.colorPicker = new ColorPicker(this, 'color', {
+		colorList: pluginOptions.items,
+		splitNum: pluginOptions.splitNum,
+		disableHEXInput: pluginOptions.disableHEXInput,
+		hueSliderOptions: { controllerOptions: { parents: [menu], isOutsideForm: true } }
+	});
+
+	// itit
+	menu.appendChild(this.colorPicker.target);
+	this.menu.initDropdownTarget(FontColor, menu);
+};
+
+FontColor.key = 'fontColor';
+FontColor.type = 'dropdown-free';
+FontColor.className = '';
+FontColor.prototype = {
+	/**
+	 * @override dropdown
+	 */
+	on(target) {
+		this.colorPicker.init(this.selection.getNode(), target);
+	},
+
+	/**
+	 * @Override dropdown
+	 */
+	onDropdownClose() {
+		this.colorPicker.hueSliderClose();
+	},
+
+	/**
+	 *  @override ColorPicker
+	 */
+	colorPickerAction(value) {
+		this.action(value);
+	},
+
+	/**
+	 * @override core
+	 */
+	action(value) {
+		if (value) {
+			const newNode = domUtils.createElement('SPAN', { style: 'color: ' + value + ';' });
+			this.format.applyTextStyle(newNode, ['color'], null, null);
+		} else {
+			this.format.applyTextStyle(null, ['color'], ['span'], true);
+		}
+
+		this.menu.dropdownOff();
+	},
+
+	constructor: FontColor
+};
+
+function CreateHTML() {
+	return domUtils.createElement('DIV', { class: 'se-dropdown se-list-layer' }, null);
+}
+
+export default FontColor;

package/src/plugins/dropdown/formatBlock.js

@@ -0,0 +1,141 @@
+import EditorInjector from '../../editorInjector';
+import { domUtils } from '../../helper';
+
+const FormatBlock = function (editor, pluginOptions) {
+	EditorInjector.call(this, editor);
+	// plugin basic properties
+	this.title = this.lang.formats;
+	this.inner = '<span class="se-txt">' + this.lang.formats + '</span>' + this.icons.arrow_down;
+
+	// create HTML
+	const menu = CreateHTML(editor, pluginOptions.items);
+
+	// members
+	this.formatList = menu.querySelectorAll('li button');
+	this.currentFormat = '';
+
+	// init
+	this.menu.initDropdownTarget(FormatBlock, menu);
+};
+
+FormatBlock.key = 'formatBlock';
+FormatBlock.type = 'dropdown';
+FormatBlock.className = 'se-btn-select se-btn-tool-format';
+FormatBlock.prototype = {
+	/**
+	 * @override core
+	 */
+	active(element, target) {
+		let formatTitle = this.lang.formats;
+		const targetText = target.querySelector('.se-txt');
+
+		if (!element) {
+			domUtils.changeTxt(targetText, formatTitle);
+		} else if (this.format.isLine(element)) {
+			const formatList = this.formatList;
+			const nodeName = element.nodeName.toLowerCase();
+			const className = (element.className.match(/(\s|^)__se__format__[^\s]+/) || [''])[0].trim();
+
+			for (let i = 0, len = formatList.length, f; i < len; i++) {
+				f = formatList[i];
+				if (nodeName === f.getAttribute('data-value') && className === f.getAttribute('data-class')) {
+					formatTitle = f.title;
+					break;
+				}
+			}
+
+			domUtils.changeTxt(targetText, formatTitle);
+			targetText.setAttribute('data-value', nodeName);
+			targetText.setAttribute('data-class', className);
+
+			return true;
+		}
+
+		return false;
+	},
+
+	/**
+	 * @override dropdown
+	 */
+	on(target) {
+		const formatList = this.formatList;
+		const targetText = target.querySelector('.se-txt');
+		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++) {
+				f = formatList[i];
+				if (currentFormat === f.getAttribute('data-value') + f.getAttribute('data-class')) {
+					domUtils.addClass(f, 'active');
+				} else {
+					domUtils.removeClass(f, 'active');
+				}
+			}
+
+			this.currentFormat = currentFormat;
+		}
+	},
+
+	/**
+	 * @override core
+	 * @param {Element} target Target command button
+	 */
+	action(target) {
+		// "line"|"br-line"|"block"
+		const command = target.getAttribute('data-command');
+		const tag = target.firstElementChild;
+		if (command === 'block') {
+			this.format.applyBlock(tag);
+		} else if (command === 'br-line') {
+			this.format.setBrLine(tag);
+		} else {
+			this.format.setLine(tag);
+		}
+
+		this.menu.dropdownOff();
+	},
+
+	constructor: FormatBlock
+};
+
+function CreateHTML({ lang }, items) {
+	const defaultFormats = ['p', 'blockquote', 'pre', '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">`;
+
+	for (let i = 0, len = formatList.length, format, tagName, command, name, h, attrs, className; i < len; i++) {
+		format = formatList[i];
+
+		if (typeof format === 'string' && defaultFormats.includes(format)) {
+			tagName = format.toLowerCase();
+			command = tagName === 'blockquote' ? 'block' : tagName === 'pre' ? 'br-line' : 'line';
+			h = /^h/.test(tagName) ? tagName.match(/\d+/)[0] : '';
+			name = lang['tag_' + (h ? 'h' : tagName)] + h;
+			className = '';
+			attrs = '';
+		} else {
+			tagName = format.tag.toLowerCase();
+			command = format.command;
+			name = format.name || tagName;
+			className = format.class;
+			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>`;
+	}
+	list += /*html*/ `
+		</ul>
+	</div>`;
+
+	return domUtils.createElement('DIV', { class: 'se-dropdown se-list-layer se-list-format' }, list);
+}
+
+export default FormatBlock;