suneditor 2.46.2 → 3.0.0-alpha.1

package/src/plugins/dropdown/hr.js

@@ -0,0 +1,111 @@
+import EditorInjector from '../../editorInjector';
+import { domUtils } from '../../helper';
+
+const HR = function (editor, pluginOptions) {
+	// plugin bisic properties
+	EditorInjector.call(this, editor);
+	this.title = this.lang.horizontalLine;
+	this.icon = 'horizontal_line';
+
+	// create HTML
+	const HRMenus = CreateHTML(editor, pluginOptions.items);
+
+	// members
+	this.list = HRMenus.querySelectorAll('button');
+
+	// init
+	this.menu.initDropdownTarget(HR, HRMenus);
+};
+
+HR.key = 'hr';
+HR.type = 'dropdown';
+HR.className = '';
+HR.component = function (node) {
+	return /^hr$/i.test(node?.nodeName) ? node : null;
+};
+HR.prototype = {
+	/**
+	 * @override component
+	 * @description Called when a container is selected.
+	 * @param {Element} element Target element
+	 */
+	select(element) {
+		domUtils.addClass(element, 'on');
+	},
+
+	/**
+	 * @override component
+	 * @description Called when a container is deselected.
+	 * @param {Element} element Target element
+	 */
+	deselect(element) {
+		domUtils.removeClass(element, 'on');
+	},
+
+	destroy(element) {
+		if (!element) return;
+
+		const focusEl = element.previousElementSibling || element.nextElementSibling;
+		domUtils.removeItem(element);
+
+		// focus
+		this.editor.focusEdge(focusEl);
+		this.history.push(false);
+	},
+
+	/**
+	 * @override core
+	 * @param {Element} target Target command button
+	 */
+	action(target) {
+		const hr = target.firstElementChild.cloneNode(false);
+		this.editor.focus();
+		this.component.insert(hr, false, false);
+		this.menu.dropdownOff();
+
+		const line = this.format.addLine(hr);
+		this.selection.setRange(line, 1, line, 1);
+	},
+
+	constructor: HR
+};
+
+function CreateHTML({ lang }, HRItems) {
+	const items = HRItems || [
+		{
+			name: lang.hr_solid,
+			class: '__se__solid'
+		},
+		{
+			name: lang.hr_dashed,
+			class: '__se__dashed'
+		},
+		{
+			name: lang.hr_dotted,
+			class: '__se__dotted'
+		}
+	];
+
+	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 domUtils.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>`
+	);
+}
+
+export default HR;

package/src/plugins/dropdown/layout.js

@@ -0,0 +1,72 @@
+import EditorInjector from '../../editorInjector';
+import { domUtils } from '../../helper';
+
+const Layout = function (editor, pluginOptions) {
+	// plugin bisic properties
+	EditorInjector.call(this, editor);
+	this.title = this.lang.layout;
+	this.icon = 'layout';
+
+	// members
+	this.selectedIndex = -1;
+	this.items = pluginOptions.items;
+
+	// create HTML
+	const menu = CreateHTML(this.items);
+
+	// init
+	this.menu.initDropdownTarget(Layout, menu);
+};
+
+Layout.key = 'layout';
+Layout.type = 'dropdown';
+Layout.className = '';
+Layout.prototype = {
+	/**
+	 * @override core
+	 * @param {Element} target Target command button
+	 */
+	action(target) {
+		const index = target.getAttribute('data-value') * 1;
+		const temp = this.items[(this.selectedIndex = index)];
+
+		if (temp.html) {
+			this.html.set(temp.html);
+		} else {
+			this.menu.dropdownOff();
+			throw Error('[SUNEDITOR.layout.fail] cause : "layouts[i].html not found"');
+		}
+
+		this.menu.dropdownOff();
+	},
+
+	constructor: Layout
+};
+
+function CreateHTML(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-value="${i}" title="${t.name}" aria-label="${t.name}">
+					${t.name}
+				</button>
+			</li>`;
+	}
+
+	list += /*html*/ `
+		</ul>
+	</div>`;
+
+	return domUtils.createElement('DIV', { class: 'se-list-layer' }, list);
+}
+
+export default Layout;

package/src/plugins/dropdown/lineHeight.js

@@ -0,0 +1,114 @@
+import EditorInjector from '../../editorInjector';
+import { domUtils } from '../../helper';
+
+const LineHeight = function (editor, pluginOptions) {
+	// plugin bisic properties
+	EditorInjector.call(this, editor);
+	this.title = this.lang.lineHeight;
+	this.icon = 'line_height';
+
+	// create HTML
+	const menu = CreateHTML(editor, pluginOptions.items);
+
+	// members
+	this.sizeList = menu.querySelectorAll('li button');
+	this.currentSize = -1;
+
+	// init
+	this.menu.initDropdownTarget(LineHeight, menu);
+};
+
+LineHeight.key = 'lineHeight';
+LineHeight.type = 'dropdown';
+LineHeight.className = '';
+LineHeight.prototype = {
+	/**
+	 * @override core
+	 */
+	active(element, target) {
+		if (element?.style?.lineHeight.length > 0) {
+			domUtils.addClass(target, 'active');
+			return true;
+		}
+
+		domUtils.removeClass(target, 'active');
+		return false;
+	},
+
+	/**
+	 * @override dropdown
+	 */
+	on() {
+		const format = this.format.getLine(this.selection.getNode());
+		const currentSize = !format ? '' : format.style.lineHeight + '';
+
+		if (currentSize !== this.currentSize) {
+			const sizeList = this.sizeList;
+			for (let i = 0, len = sizeList.length; i < len; i++) {
+				if (currentSize === sizeList[i].getAttribute('data-command')) {
+					domUtils.addClass(sizeList[i], 'active');
+				} else {
+					domUtils.removeClass(sizeList[i], 'active');
+				}
+			}
+
+			this.currentSize = currentSize;
+		}
+	},
+
+	/**
+	 * @override core
+	 * @param {Element} target Target command button
+	 */
+	action(target) {
+		const value = target.getAttribute('data-command') || '';
+		const formats = this.format.getLines();
+
+		for (let i = 0, len = formats.length; i < len; i++) {
+			formats[i].style.lineHeight = value;
+		}
+
+		this.menu.dropdownOff();
+
+		this.editor.effectNode = null;
+		this.history.push(false);
+	},
+
+	constructor: LineHeight
+};
+
+function CreateHTML({ lang }, items) {
+	const sizeList = items || [
+		{ text: '1', value: 1 },
+		{ text: '1.15', value: 1.15 },
+		{ text: '1.5', value: 1.5 },
+		{ text: '2', value: 2 }
+	];
+
+	let list = /*html*/ `
+	<div class="se-list-inner">
+		<ul class="se-list-basic">
+			<li>
+				<button type="button" class="default_value se-btn-list" title="${lang.default}" aria-label="${lang.default}">
+					(${lang.default})
+				</button>
+			</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 domUtils.createElement('DIV', { class: 'se-dropdown se-list-layer' }, list);
+}
+
+export default LineHeight;

package/src/plugins/dropdown/list.js

@@ -0,0 +1,107 @@
+import EditorInjector from '../../editorInjector';
+import { domUtils } from '../../helper';
+
+const List = function (editor) {
+	// plugin bisic properties
+	EditorInjector.call(this, editor);
+	this.title = this.lang.list;
+	this.icon = 'list_numbered';
+
+	// create HTML
+	const menu = CreateHTML(editor);
+
+	// members
+	this.listItems = menu.querySelectorAll('li button');
+	this.icons = {
+		bulleted: editor.icons.list_bulleted,
+		numbered: editor.icons.list_numbered
+	};
+
+	// init
+	this.menu.initDropdownTarget(List, menu);
+};
+
+List.key = 'list';
+List.type = 'dropdown';
+List.className = 'se-icon-flip-rtl';
+List.prototype = {
+	/**
+	 * @override core
+	 */
+	active(element, target) {
+		const icon = target.firstElementChild;
+
+		if (domUtils.isList(element)) {
+			const nodeName = element.nodeName.toLowerCase();
+			target.setAttribute('data-focus', nodeName);
+			domUtils.addClass(target, 'active');
+
+			if (/^ul$/.test(nodeName)) {
+				domUtils.changeElement(icon, this.icons.bulleted);
+			} else {
+				domUtils.changeElement(icon, this.icons.numbered);
+			}
+
+			return true;
+		}
+
+		target.removeAttribute('data-focus');
+		domUtils.changeElement(icon, this.icons.number);
+		domUtils.removeClass(target, 'active');
+
+		return false;
+	},
+
+	/**
+	 * @override dropdown
+	 */
+	on(target) {
+		const currentList = target.getAttribute('data-focus') || '';
+		const list = this.listItems;
+		for (let i = 0, len = list.length; i < len; i++) {
+			if (currentList === list[i].getAttribute('data-command')) {
+				domUtils.addClass(list[i], 'active');
+			} else {
+				domUtils.removeClass(list[i], 'active');
+			}
+		}
+	},
+
+	/**
+	 * @override core
+	 * @param {Element} target Target command button
+	 */
+	action(target) {
+		const command = target.getAttribute('data-command');
+		const type = target.getAttribute('data-value') || '';
+		const range = this.format.applyList(`${command}:${type}`, null, false);
+		if (range) this.selection.setRange(range.sc, range.so, range.ec, range.eo);
+
+		this.menu.dropdownOff();
+		this.history.push(false);
+	},
+
+	constructor: List
+};
+
+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 domUtils.createElement('DIV', { class: 'se-dropdown se-list-layer' }, html);
+}
+
+export default List;

package/src/plugins/dropdown/paragraphStyle.js

@@ -0,0 +1,117 @@
+import EditorInjector from '../../editorInjector';
+import { domUtils } from '../../helper';
+
+const ParagraphStyle = function (editor, pluginOptions) {
+	// plugin bisic properties
+	EditorInjector.call(this, editor);
+	this.title = this.lang.paragraphStyle;
+	this.icon = 'paragraph_style';
+
+	// create HTML
+	const menu = CreateHTML(editor, pluginOptions.items);
+
+	// members
+	this.classList = menu.querySelectorAll('li button');
+
+	// init
+	this.menu.initDropdownTarget(ParagraphStyle, menu);
+};
+
+ParagraphStyle.key = 'paragraphStyle';
+ParagraphStyle.type = 'dropdown';
+ParagraphStyle.className = '';
+ParagraphStyle.prototype = {
+	/**
+	 * @override dropdown
+	 */
+	on() {
+		const paragraphList = this.classList;
+		const currentFormat = this.format.getLine(this.selection.getNode());
+
+		for (let i = 0, len = paragraphList.length; i < len; i++) {
+			if (domUtils.hasClass(currentFormat, paragraphList[i].getAttribute('data-command'))) {
+				domUtils.addClass(paragraphList[i], 'active');
+			} else {
+				domUtils.removeClass(paragraphList[i], 'active');
+			}
+		}
+	},
+
+	/**
+	 * @override core
+	 * @param {Element} target Target command button
+	 */
+	action(target) {
+		const value = target.getAttribute('data-command');
+		let selectedFormsts = this.format.getLines();
+		if (selectedFormsts.length === 0) {
+			this.selection.getRangeAndAddLine(this.selection.getRange(), null);
+			selectedFormsts = this.format.getLines();
+			if (selectedFormsts.length === 0) return;
+		}
+
+		// change format class
+		const toggleClass = domUtils.hasClass(target, 'active') ? domUtils.removeClass : domUtils.addClass;
+		for (let i = 0, len = selectedFormsts.length; i < len; i++) {
+			toggleClass(selectedFormsts[i], value);
+		}
+
+		this.menu.dropdownOff();
+		this.history.push(false);
+	},
+
+	constructor: ParagraphStyle
+};
+
+function CreateHTML({ lang }, items) {
+	const defaultList = {
+		spaced: {
+			name: lang.menu_spaced,
+			class: '__se__p-spaced',
+			_class: ''
+		},
+		bordered: {
+			name: lang.menu_bordered,
+			class: '__se__p-bordered',
+			_class: ''
+		},
+		neon: {
+			name: lang.menu_neon,
+			class: '__se__p-neon',
+			_class: ''
+		}
+	};
+	const paragraphStyles = !items || items.length === 0 ? ['spaced', 'bordered', 'neon'] : items;
+
+	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++) {
+		p = paragraphStyles[i];
+
+		if (typeof p === 'string') {
+			const cssText = defaultList[p.toLowerCase()];
+			if (!cssText) continue;
+			p = cssText;
+		}
+
+		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>`;
+	}
+	list += /*html*/ `
+		</ul>
+	</div>`;
+
+	return domUtils.createElement('DIV', { class: 'se-dropdown se-list-layer se-list-format' }, list);
+}
+
+export default ParagraphStyle;