suneditor 2.46.2 → 3.0.0-alpha.1

package/src/core/class/menu.js

@@ -0,0 +1,260 @@
+/**
+ * @fileoverview Menu class
+ */
+
+import CoreInjector from '../../editorInjector/_core';
+import { domUtils, converter } from '../../helper';
+
+const Menu = function (editor) {
+	CoreInjector.call(this, editor);
+
+	// members--
+	this.targetMap = {};
+	this.index = -1;
+	this.menus = [];
+	// dropdown
+	this.currentDropdown = null;
+	this.currentDropdownActiveButton = null;
+	this.currentDropdownName = '';
+	this.currentDropdownType = '';
+	// container
+	this.currentContainer = null;
+	this.currentContainerActiveButton = null;
+	// event
+	this._dropdownCommands = [];
+	this.__globalEventHandler = {
+		mousedown: OnMouseDown_dropdown.bind(this),
+		containerDown: this.containerOff.bind(this),
+		keydown: OnKeyDown_dropdown.bind(this),
+		mousemove: OnMousemove_dropdown.bind(this),
+		mouseout: OnMouseout_dropdown.bind(this)
+	};
+	this._bindClose_dropdown_mouse = null;
+	this._bindClose_dropdown_key = null;
+	this._bindClose_cons_mouse = null;
+	this.currentDropdownPlugin = null;
+};
+
+Menu.prototype = {
+	/**
+	 * @description Method for managing dropdown element.
+	 * You must add the "dropdown" element using the this method at custom plugin.
+	 * @param {{key: string, type: string}} classObj Class object
+	 * @param {Element} menu Dropdown element
+	 */
+	initDropdownTarget({ key, type }, menu) {
+		if (key) {
+			if (!/free$/.test(type)) {
+				menu.setAttribute('data-key', key);
+				this._dropdownCommands.push(key);
+			}
+			this.context.get('menuTray').appendChild(menu);
+			this.targetMap[key] = menu;
+		} else {
+			throw Error("[SUNEDITOR.init.fail] The plugin's key is not added.");
+		}
+	},
+
+	/**
+	 * @description On dropdown
+	 * @param {Element} button Dropdown's button element to call
+	 */
+	dropdownOn(button) {
+		this.__removeGlobalEvent();
+		const moreBtn = this._checkMoreLayer(button);
+		if (moreBtn) {
+			const target = domUtils.getParentElement(moreBtn, '.se-btn-tray').querySelector('[data-command="' + moreBtn.getAttribute('data-ref') + '"]');
+			if (target) {
+				this.editor.runFromTarget(target);
+				this.dropdownOn(button);
+				return;
+			}
+		}
+
+		const dropdownName = (this.currentDropdownName = button.getAttribute('data-command'));
+		this.currentDropdownType = button.getAttribute('data-type');
+		const menu = (this.currentDropdown = this.targetMap[dropdownName]);
+		this.currentDropdownActiveButton = button;
+		this._setMenuPosition(button, menu);
+
+		this._bindClose_dropdown_mouse = this.eventManager.addGlobalEvent('mousedown', this.__globalEventHandler.mousedown, false);
+		if (this._dropdownCommands.includes(dropdownName)) {
+			this.menus = converter.nodeListToArray(menu.querySelectorAll('.se-toolbar-btn[data-command]'));
+			if (this.menus.length > 0) {
+				this._bindClose_dropdown_key = this.eventManager.addGlobalEvent('keydown', this.__globalEventHandler.keydown, false);
+				menu.addEventListener('mousemove', this.__globalEventHandler.mousemove, false);
+				menu.addEventListener('mouseout', this.__globalEventHandler.mouseout, false);
+			}
+		}
+
+		this.currentDropdownPlugin = this.plugins[dropdownName];
+		if (typeof this.currentDropdownPlugin?.on === 'function') this.currentDropdownPlugin.on(button);
+		this.editor._antiBlur = true;
+	},
+
+	/**
+	 * @description Off dropdown
+	 */
+	dropdownOff() {
+		this.__removeGlobalEvent();
+		this.index = -1;
+		this.menus = [];
+
+		if (this.currentDropdown) {
+			this.currentDropdownName = '';
+			this.currentDropdownType = '';
+			this.currentDropdown.style.display = 'none';
+			this.currentDropdown = null;
+			if (this.currentDropdownActiveButton) {
+				domUtils.removeClass(this.currentDropdownActiveButton.parentElement.children, 'on');
+			}
+			this.currentDropdownActiveButton = null;
+			this.editor._notHideToolbar = false;
+		}
+
+		this.editor._antiBlur = false;
+
+		if (typeof this.currentDropdownPlugin?.off === 'function') this.currentDropdownPlugin.off();
+		this.currentDropdownPlugin = null;
+	},
+
+	/**
+	 * @description On menu container
+	 * @param {Element} button Container's button element to call
+	 */
+	containerOn(button) {
+		this.__removeGlobalEvent();
+
+		const containerName = (this._containerName = button.getAttribute('data-command'));
+		this.currentContainerActiveButton = button;
+		this._setMenuPosition(button, (this.currentContainer = this.targetMap[containerName]));
+
+		this._bindClose_cons_mouse = this.eventManager.addGlobalEvent('mousedown', this.__globalEventHandler.containerDown, false);
+
+		if (this.plugins[containerName].on) this.plugins[containerName].on(button);
+		this.editor._antiBlur = true;
+	},
+
+	/**
+	 * @description Off menu container
+	 */
+	containerOff() {
+		this.__removeGlobalEvent();
+
+		if (this.currentContainer) {
+			this._containerName = '';
+			this.currentContainer.style.display = 'none';
+			this.currentContainer = null;
+			domUtils.removeClass(this.currentContainerActiveButton, 'on');
+			this.currentContainerActiveButton = null;
+			this.editor._notHideToolbar = false;
+		}
+
+		this.editor._antiBlur = false;
+	},
+
+	/**
+	 * @description Set the menu position. (dropdown, container)
+	 * @param {*} element Button element
+	 * @param {*} menu Menu element
+	 * @private
+	 */
+	_setMenuPosition(element, menu) {
+		menu.style.visibility = 'hidden';
+		menu.style.display = 'block';
+		menu.style.height = '';
+		domUtils.addClass(element.parentElement.children, 'on');
+
+		this.offset.setRelPosition(menu, this.carrierWrapper, element.parentElement, domUtils.getParentElement(element, '.se-toolbar'), false);
+
+		menu.style.visibility = '';
+	},
+
+	_checkMoreLayer(element) {
+		const more = domUtils.getParentElement(element, '.se-more-layer');
+		if (more && more.style.display !== 'block') {
+			return more.getAttribute('data-ref') ? more : null;
+		} else {
+			return null;
+		}
+	},
+
+	_moveItem(num) {
+		domUtils.removeClass(this.currentDropdown, 'se-select-menu-mouse-move');
+		domUtils.addClass(this.currentDropdown, 'se-select-menu-key-action');
+		num = this.index + num;
+		const len = this.menus.length;
+		const selectIndex = (this.index = num >= len ? 0 : num < 0 ? len - 1 : num);
+
+		for (let i = 0; i < len; i++) {
+			if (i === selectIndex) {
+				domUtils.addClass(this.menus[i], 'on');
+			} else {
+				domUtils.removeClass(this.menus[i], 'on');
+			}
+		}
+	},
+
+	__removeGlobalEvent() {
+		if (this._bindClose_dropdown_mouse) this._bindClose_dropdown_mouse = this.eventManager.removeGlobalEvent(this._bindClose_dropdown_mouse);
+		if (this._bindClose_cons_mouse) this._bindClose_cons_mouse = this.eventManager.removeGlobalEvent(this._bindClose_cons_mouse);
+		if (this._bindClose_dropdown_key) {
+			this._bindClose_dropdown_key = this.eventManager.removeGlobalEvent(this._bindClose_dropdown_key);
+			domUtils.removeClass(this.menus, 'on');
+			domUtils.removeClass(this.currentDropdown, 'se-select-menu-key-action|se-select-menu-mouse-move');
+			this.currentDropdown.removeEventListener('mousemove', this.__globalEventHandler.mousemove, false);
+			this.currentDropdown.removeEventListener('mouseout', this.__globalEventHandler.mouseout, false);
+		}
+	},
+
+	constructor: Menu
+};
+
+function OnMouseDown_dropdown(e) {
+	if (domUtils.getParentElement(e.target, '.se-dropdown')) return;
+	this.dropdownOff();
+}
+
+function OnMouseout_dropdown() {
+	this.index = -1;
+}
+
+function OnKeyDown_dropdown(e) {
+	const keyCode = e.keyCode;
+	switch (keyCode) {
+		case 38: // up
+			e.preventDefault();
+			e.stopPropagation();
+			this._moveItem(-1);
+			break;
+		case 40: // down
+			e.preventDefault();
+			e.stopPropagation();
+			this._moveItem(1);
+			break;
+		case 13:
+		case /* enter, space */ 32: {
+			if (this.index < 0) break;
+
+			const target = this.menus[this.index];
+			if (!target || typeof this.plugins[this.currentDropdownName].action !== 'function') return;
+
+			e.preventDefault();
+			e.stopPropagation();
+			this.plugins[this.currentDropdownName].action(target);
+			this.dropdownOff();
+			break;
+		}
+	}
+}
+
+function OnMousemove_dropdown(e) {
+	domUtils.addClass(this.currentDropdown, 'se-select-menu-mouse-move');
+	domUtils.removeClass(this.currentDropdown, 'se-select-menu-key-action');
+
+	const index = this.menus.indexOf(e.target);
+	if (index === -1) return;
+	this.index = index * 1;
+}
+
+export default Menu;

package/src/core/class/nodeTransform.js

@@ -0,0 +1,379 @@
+/**
+ * @fileoverview Node util class
+ */
+
+import CoreInjector from '../../editorInjector/_core';
+import { domUtils, unicode, env, numbers } from '../../helper';
+
+const NodeTransform = function (editor) {
+	CoreInjector.call(this, editor);
+};
+
+NodeTransform.prototype = {
+	/**
+	 * @description Split all tags based on "baseNode"
+	 * Returns the last element of the splited tag.
+	 * @param {Node} baseNode Element or text node on which to base
+	 * @param {Number|Node|null} offset Text offset of "baseNode" (Only valid when "baseNode" is a text node)
+	 * @param {number} depth The nesting depth of the element being split. (default: 0)
+	 * @returns {Element}
+	 */
+	split(baseNode, offset, depth) {
+		if (domUtils.isWysiwygFrame(baseNode) || this.component.is(baseNode) || !baseNode) return baseNode;
+
+		if (offset && !numbers.is(offset)) {
+			const children = baseNode.childNodes;
+			let index = domUtils.getPositionIndex(offset);
+			const prev = baseNode.cloneNode(false);
+			const next = baseNode.cloneNode(false);
+			for (let i = 0, len = children.length; i < len; i++) {
+				if (i < index) prev.appendChild(children[i]);
+				else if (i > index) next.appendChild(children[i]);
+				else continue;
+				i--;
+				len--;
+				index--;
+			}
+
+			if (prev.childNodes.length > 0) baseNode.parentNode.insertBefore(prev, baseNode);
+			if (next.childNodes.length > 0) baseNode.parentNode.insertBefore(next, baseNode.nextElementSibling);
+
+			return baseNode;
+		}
+
+		const bp = baseNode.parentNode;
+		let index = 0;
+		let suffixIndex = 1;
+		let next = true;
+		let newEl, children, temp;
+		if (!depth || depth < 0) depth = 0;
+
+		if (baseNode.nodeType === 3) {
+			index = domUtils.getPositionIndex(baseNode);
+			if (offset >= 0 && baseNode.length !== offset) {
+				baseNode.splitText(offset);
+				const after = domUtils.getNodeFromPath([index + 1], bp);
+				if (domUtils.isZeroWith(after)) after.data = unicode.zeroWidthSpace;
+			}
+		} else if (baseNode.nodeType === 1) {
+			if (offset === 0) {
+				while (baseNode.firstChild) {
+					baseNode = baseNode.firstChild;
+				}
+				if (baseNode.nodeType === 3) {
+					const after = domUtils.createTextNode(unicode.zeroWidthSpace);
+					baseNode.parentNode.insertBefore(after, baseNode);
+					baseNode = after;
+				}
+			}
+
+			if (!baseNode.previousSibling) {
+				if (domUtils.getNodeDepth(baseNode) === depth) next = false;
+			} else {
+				baseNode = baseNode.previousSibling;
+			}
+		}
+
+		if (baseNode.nodeType === 1) suffixIndex = 0;
+		let depthEl = baseNode;
+		while (domUtils.getNodeDepth(depthEl) > depth) {
+			index = domUtils.getPositionIndex(depthEl) + suffixIndex;
+			depthEl = depthEl.parentNode;
+
+			temp = newEl;
+			newEl = depthEl.cloneNode(false);
+			children = depthEl.childNodes;
+
+			if (temp) {
+				if (domUtils.isListCell(newEl) && domUtils.isList(temp) && temp.firstElementChild) {
+					newEl.innerHTML = temp.firstElementChild.innerHTML;
+					domUtils.removeItem(temp.firstElementChild);
+					if (temp.children.length > 0) newEl.appendChild(temp);
+				} else {
+					newEl.appendChild(temp);
+				}
+			}
+
+			while (children[index]) {
+				newEl.appendChild(children[index]);
+			}
+		}
+
+		if (depthEl.childNodes.length <= 1 && (!depthEl.firstChild || depthEl.firstChild.textContent.length === 0)) depthEl.innerHTML = '<br>';
+
+		const pElement = depthEl.parentNode;
+		if (next) depthEl = depthEl.nextSibling;
+		if (!newEl) return depthEl;
+
+		this.mergeSameTags(newEl, null, false);
+		this.mergeNestedTags(newEl, domUtils.isList);
+
+		if (newEl.childNodes.length > 0) pElement.insertBefore(newEl, depthEl);
+		else newEl = depthEl;
+
+		if (domUtils.isListCell(newEl) && newEl.children && domUtils.isList(newEl.children[0])) {
+			newEl.insertBefore(domUtils.createElement('BR'), newEl.children[0]);
+		}
+
+		if (bp.childNodes.length === 0) domUtils.removeItem(bp);
+
+		return newEl;
+	},
+
+	/**
+	 * @description Use with "npdePath (domUtils.getNodePath)" to merge the same attributes and tags if they are present and modify the nodepath.
+	 * If "offset" has been changed, it will return as much "offset" as it has been modified.
+	 * An array containing change offsets is returned in the order of the "nodePathArray" array.
+	 * @param {Element} element Element
+	 * @param {Array|null} nodePathArray Array of NodePath object ([domUtils.getNodePath(), ..])
+	 * @param {boolean} onlyText If true, non-text nodes like 'span', 'strong'.. are ignored.
+	 * @returns {Array} [offset, ..]
+	 */
+	mergeSameTags(element, nodePathArray, onlyText) {
+		// eslint-disable-next-line @typescript-eslint/no-this-alias
+		const inst = this;
+		const nodePathLen = nodePathArray ? nodePathArray.length : 0;
+		let offsets = null;
+
+		if (nodePathLen) {
+			offsets = Array.apply(null, new Array(nodePathLen)).map(Number.prototype.valueOf, 0);
+		}
+
+		(function recursionFunc(current, depth, depthIndex) {
+			const children = current.childNodes;
+
+			for (let i = 0, len = children.length, child, next; i < len; i++) {
+				child = children[i];
+				next = children[i + 1];
+				if (!child) break;
+				if ((onlyText && inst.format._isIgnoreNodeChange(child)) || (!onlyText && (domUtils.isTableElements(child) || domUtils.isListCell(child) || (inst.format.isLine(child) && !inst.format.isBrLine(child))))) {
+					if (domUtils.isTableElements(child) || domUtils.isListCell(child)) {
+						recursionFunc(child, depth + 1, i);
+					}
+					continue;
+				}
+				if (len === 1 && current.nodeName === child.nodeName && current.parentNode) {
+					// update nodePath
+					if (nodePathLen) {
+						let path, c, p, cDepth, spliceDepth;
+						for (let n = 0; n < nodePathLen; n++) {
+							path = nodePathArray[n];
+							if (path && path[depth] === i) {
+								c = child;
+								p = current;
+								cDepth = depth;
+								spliceDepth = true;
+								while (cDepth >= 0) {
+									if (domUtils.getArrayIndex(p.childNodes, c) !== path[cDepth]) {
+										spliceDepth = false;
+										break;
+									}
+									c = child.parentNode;
+									p = c.parentNode;
+									cDepth--;
+								}
+								if (spliceDepth) {
+									path.splice(depth, 1);
+									path[depth] = i;
+								}
+							}
+						}
+					}
+
+					// merge tag
+					domUtils.copyTagAttributes(child, current);
+					current.parentNode.insertBefore(child, current);
+					domUtils.removeItem(current);
+				}
+				if (!next) {
+					if (child.nodeType === 1) recursionFunc(child, depth + 1, i);
+					break;
+				}
+
+				if (child.nodeName === next.nodeName && domUtils.isSameAttributes(child, next) && child.href === next.href) {
+					const childs = child.childNodes;
+					let childLength = 0;
+					for (let n = 0, nLen = childs.length; n < nLen; n++) {
+						if (childs[n].textContent.length > 0) childLength++;
+					}
+
+					const l = child.lastChild;
+					const r = next.firstChild;
+					let addOffset = 0;
+					if (l && r) {
+						const textOffset = l.nodeType === 3 && r.nodeType === 3;
+						addOffset = l.textContent.length;
+						let tempL = l.previousSibling;
+						while (tempL && tempL.nodeType === 3) {
+							addOffset += tempL.textContent.length;
+							tempL = tempL.previousSibling;
+						}
+
+						if (childLength > 0 && l.nodeType === 3 && r.nodeType === 3 && (l.textContent.length > 0 || r.textContent.length > 0)) childLength--;
+
+						if (nodePathLen) {
+							let path = null;
+							for (let n = 0; n < nodePathLen; n++) {
+								path = nodePathArray[n];
+								if (path && path[depth] > i) {
+									if (depth > 0 && path[depth - 1] !== depthIndex) continue;
+
+									path[depth] -= 1;
+									if (path[depth + 1] >= 0 && path[depth] === i) {
+										path[depth + 1] += childLength;
+										if (textOffset) {
+											if (l && l.nodeType === 3 && r && r.nodeType === 3) {
+												offsets[n] += addOffset;
+											}
+										}
+									}
+								}
+							}
+						}
+					}
+
+					if (child.nodeType === 3) {
+						addOffset = child.textContent.length;
+						child.textContent += next.textContent;
+						if (nodePathLen) {
+							let path = null;
+							for (let n = 0; n < nodePathLen; n++) {
+								path = nodePathArray[n];
+								if (path && path[depth] > i) {
+									if (depth > 0 && path[depth - 1] !== depthIndex) continue;
+
+									path[depth] -= 1;
+									if (path[depth + 1] >= 0 && path[depth] === i) {
+										path[depth + 1] += childLength;
+										offsets[n] += addOffset;
+									}
+								}
+							}
+						}
+					} else {
+						child.innerHTML += next.innerHTML;
+					}
+
+					domUtils.removeItem(next);
+					i--;
+				} else if (child.nodeType === 1) {
+					recursionFunc(child, depth + 1, i);
+				}
+			}
+		})(element, 0, 0);
+
+		return offsets;
+	},
+
+	/**
+	 * @description Remove nested tags without other child nodes.
+	 * @param {Element} element Element object
+	 * @param {Function|String|null} validation Validation function / String("tag1|tag2..") / If null, all tags are applicable.
+	 */
+	mergeNestedTags(element, validation) {
+		if (typeof validation === 'string') {
+			validation = function (current) {
+				return this.test(current.tagName);
+			}.bind(new RegExp(`^(${validation ? validation : '.+'})$`, 'i'));
+		} else if (typeof validation !== 'function') {
+			validation = () => true;
+		}
+
+		(function recursionFunc(current) {
+			let children = current.children;
+			if (children.length === 1 && children[0].nodeName === current.nodeName && validation(current)) {
+				const temp = children[0];
+				children = temp.children;
+				while (children[0]) {
+					current.appendChild(children[0]);
+				}
+				current.removeChild(temp);
+			}
+
+			for (let i = 0, len = current.children.length; i < len; i++) {
+				recursionFunc(current.children[i]);
+			}
+		})(element);
+	},
+
+	/**
+	 * @description Delete itself and all parent nodes that match the condition.
+	 * Returns an {sc: previousSibling, ec: nextSibling}(the deleted node reference) or null.
+	 * @param {Node} item Node to be remove
+	 * @param {Function|null} validation Validation function. default(Deleted if it only have breakLine and blanks)
+	 * @param {Element|null} stopParent Stop when the parent node reaches stopParent
+	 * @returns {Object|null} {sc: previousSibling, ec: nextSibling}
+	 */
+	removeAllParents(item, validation, stopParent) {
+		if (!item) return null;
+		let cc = null;
+		if (!validation) {
+			validation = (current) => {
+				if (current === stopParent || this.component.is(current)) return false;
+				const text = current.textContent.trim();
+				return text.length === 0 || /^(\n|\u200B)+$/.test(text);
+			};
+		}
+
+		(function recursionFunc(element) {
+			if (!domUtils.isWysiwygFrame(element)) {
+				const parent = element.parentNode;
+				if (parent && validation(element)) {
+					cc = {
+						sc: element.previousElementSibling,
+						ec: element.nextElementSibling
+					};
+					domUtils.removeItem(element);
+					recursionFunc(parent);
+				}
+			}
+		})(item);
+
+		return cc;
+	},
+
+	/**
+	 * @description Delete a empty child node of argument element
+	 * @param {Element} element Element node
+	 * @param {Node|null} notRemoveNode Do not remove node
+	 * @param {boolean} forceDelete When all child nodes are deleted, the parent node is also deleted.
+	 */
+	removeEmptyNode(element, notRemoveNode, forceDelete) {
+		// eslint-disable-next-line @typescript-eslint/no-this-alias
+		const inst = this;
+
+		if (notRemoveNode) {
+			notRemoveNode = domUtils.getParentElement(notRemoveNode, (current) => element === current.parentElement);
+		}
+
+		(function recursionFunc(current) {
+			if (inst.format._notTextNode(current) || current === notRemoveNode || domUtils.isNonEditable(current)) return 0;
+			if (current !== element && domUtils.isZeroWith(current.textContent) && (!current.firstChild || !domUtils.isBreak(current.firstChild)) && !current.querySelector(env._allowedEmptyNodeList)) {
+				if (current.parentNode) {
+					current.parentNode.removeChild(current);
+					return -1;
+				}
+			} else {
+				const children = current.children;
+				for (let i = 0, len = children.length, r = 0; i < len; i++) {
+					if (!children[i + r] || inst.component.is(children[i + r])) continue;
+					r += recursionFunc(children[i + r]);
+				}
+			}
+
+			return 0;
+		})(element);
+
+		if (element.childNodes.length === 0) {
+			if (forceDelete) {
+				domUtils.removeItem(element);
+			} else {
+				element.innerHTML = '<br>';
+			}
+		}
+	},
+
+	constructor: NodeTransform
+};
+
+export default NodeTransform;

package/src/core/class/notice.js

@@ -0,0 +1,42 @@
+/**
+ * @fileoverview Menu class
+ */
+
+import Modal from '../../modules/Modal';
+import { domUtils } from '../../helper';
+
+const Notice = function (editor) {
+	const modalEl = CreateHTML(editor);
+
+	// members
+	this.editor = editor;
+	this.modal = new Modal(this, modalEl);
+	this.message = modalEl.querySelector('span');
+};
+
+Notice.prototype = {
+	/**
+	 * @description  Open the notice panel
+	 * @param {string} text Notice message
+	 */
+	open(text) {
+		this.message.textContent = text;
+		this.modal.open();
+	},
+
+	/**
+	 * @description  Close the notice panel
+	 */
+	close() {
+		this.modal.close();
+	},
+
+	constructor: Notice
+};
+
+function CreateHTML({ lang, icons }) {
+	const html = '<div><button class="close" data-command="close" title="' + lang.close + '">' + icons.cancel + '</button></div><div><span></span></div>';
+	return domUtils.createElement('DIV', { class: 'se-notice' }, html);
+}
+
+export default Notice;