suneditor 3.0.0-alpha.9 → 3.0.0-beta.2

package/src/core/class/nodeTransform.js

@@ -3,27 +3,38 @@
  */
 
 import CoreInjector from '../../editorInjector/_core';
-import { domUtils, unicode, env, numbers } from '../../helper';
+import { dom, unicode, numbers } from '../../helper';
 
-const NodeTransform = function (editor) {
+/**
+ * @typedef {Omit<NodeTransform & Partial<__se__EditorInjector>, 'nodeTransform'>} NodeTransformThis
+ */
+
+/**
+ * @constructor
+ * @this {NodeTransformThis}
+ * @description Node utility class. split, merge, etc.
+ * @param {__se__EditorCore} editor - The root editor instance
+ */
+function NodeTransform(editor) {
 	CoreInjector.call(this, editor);
-};
+}
 
 NodeTransform.prototype = {
 	/**
+	 * @this {NodeTransformThis}
+	 * @template {HTMLElement} T
 	 * @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}
+	 * @param {?number|Node} offset Text offset of "baseNode" (Only valid when "baseNode" is a text node)
+	 * @param {number} [depth=0] The nesting depth of the element being split. (default: 0)
+	 * @returns {T} The last element of the splited tag.
 	 */
 	split(baseNode, offset, depth) {
-		if (domUtils.isWysiwygFrame(baseNode) || this.component.is(baseNode) || !baseNode) return baseNode;
+		if (dom.check.isWysiwygFrame(baseNode) || this.component.is(baseNode) || !baseNode) return /** @type {T} */ (baseNode);
 
 		if (offset && !numbers.is(offset)) {
 			const children = baseNode.childNodes;
-			let index = domUtils.getPositionIndex(offset);
+			let index = dom.query.getPositionIndex(/** @type {Node} */ (offset));
 			const prev = baseNode.cloneNode(false);
 			const next = baseNode.cloneNode(false);
 			for (let i = 0, len = children.length; i < len; i++) {
@@ -36,9 +47,9 @@ NodeTransform.prototype = {
 			}
 
 			if (prev.childNodes.length > 0) baseNode.parentNode.insertBefore(prev, baseNode);
-			if (next.childNodes.length > 0) baseNode.parentNode.insertBefore(next, baseNode.nextElementSibling);
+			if (next.childNodes.length > 0) baseNode.parentNode.insertBefore(next, /** @type {HTMLElement|Text} */ (baseNode).nextElementSibling);
 
-			return baseNode;
+			return /** @type {T} */ (baseNode);
 		}
 
 		const bp = baseNode.parentNode;
@@ -48,12 +59,13 @@ NodeTransform.prototype = {
 		let newEl, children, temp;
 		if (!depth || depth < 0) depth = 0;
 
-		if (baseNode.nodeType === 3) {
-			index = domUtils.getPositionIndex(baseNode);
+		if (dom.check.isText(baseNode)) {
+			index = dom.query.getPositionIndex(baseNode);
+			offset = Number(offset);
 			if (offset >= 0 && baseNode.length !== offset) {
 				baseNode.splitText(offset);
-				const after = domUtils.getNodeFromPath([index + 1], bp);
-				if (domUtils.isZeroWith(after)) after.data = unicode.zeroWidthSpace;
+				const after = /** @type {Text} */ (dom.query.getNodeFromPath([index + 1], bp));
+				if (dom.check.isZeroWidth(after)) after.data = unicode.zeroWidthSpace;
 			}
 		} else if (baseNode.nodeType === 1) {
 			if (offset === 0) {
@@ -61,14 +73,14 @@ NodeTransform.prototype = {
 					baseNode = baseNode.firstChild;
 				}
 				if (baseNode.nodeType === 3) {
-					const after = domUtils.createTextNode(unicode.zeroWidthSpace);
+					const after = dom.utils.createTextNode(unicode.zeroWidthSpace);
 					baseNode.parentNode.insertBefore(after, baseNode);
 					baseNode = after;
 				}
 			}
 
 			if (!baseNode.previousSibling) {
-				if (domUtils.getNodeDepth(baseNode) === depth) next = false;
+				if (dom.query.getNodeDepth(baseNode) === depth) next = false;
 			} else {
 				baseNode = baseNode.previousSibling;
 			}
@@ -76,8 +88,8 @@ NodeTransform.prototype = {
 
 		if (baseNode.nodeType === 1) suffixIndex = 0;
 		let depthEl = baseNode;
-		while (domUtils.getNodeDepth(depthEl) > depth) {
-			index = domUtils.getPositionIndex(depthEl) + suffixIndex;
+		while (dom.query.getNodeDepth(depthEl) > depth) {
+			index = dom.query.getPositionIndex(depthEl) + suffixIndex;
 			depthEl = depthEl.parentNode;
 
 			temp = newEl;
@@ -85,9 +97,9 @@ NodeTransform.prototype = {
 			children = depthEl.childNodes;
 
 			if (temp) {
-				if (domUtils.isListCell(newEl) && domUtils.isList(temp) && temp.firstElementChild) {
+				if (dom.check.isListCell(newEl) && dom.check.isList(temp) && temp.firstElementChild) {
 					newEl.innerHTML = temp.firstElementChild.innerHTML;
-					domUtils.removeItem(temp.firstElementChild);
+					dom.utils.removeItem(temp.firstElementChild);
 					if (temp.children.length > 0) newEl.appendChild(temp);
 				} else {
 					newEl.appendChild(temp);
@@ -99,35 +111,36 @@ NodeTransform.prototype = {
 			}
 		}
 
-		if (depthEl.childNodes.length <= 1 && (!depthEl.firstChild || depthEl.firstChild.textContent.length === 0)) depthEl.innerHTML = '<br>';
+		if (depthEl.childNodes.length <= 1 && (!depthEl.firstChild || depthEl.firstChild.textContent.length === 0)) /** @type {HTMLElement} */ (depthEl).innerHTML = '<br>';
 
 		const pElement = depthEl.parentNode;
 		if (next) depthEl = depthEl.nextSibling;
-		if (!newEl) return depthEl;
+		if (!newEl) return /** @type {T} */ (depthEl);
 
 		this.mergeSameTags(newEl, null, false);
-		this.mergeNestedTags(newEl, domUtils.isList);
+		this.mergeNestedTags(newEl, dom.check.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 (dom.check.isListCell(newEl) && newEl.children && dom.check.isList(newEl.children[0])) {
+			newEl.insertBefore(dom.utils.createElement('BR'), newEl.children[0]);
 		}
 
-		if (bp.childNodes.length === 0) domUtils.removeItem(bp);
+		if (bp.childNodes.length === 0) dom.utils.removeItem(bp);
 
-		return newEl;
+		return /** @type {T} */ (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, ..]
+	 * @this {NodeTransformThis}
+	 * @description Use with "npdePath (dom-query-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 {Node} element Element
+	 * @param {?number[][]=} nodePathArray Array of NodePath object ([dom-query-GetNodePath(), ..])
+	 * @param {?boolean=} onlyText If true, non-text nodes like 'span', 'strong'.. are ignored.
+	 * @returns {Array<number>} [offset, ..]
 	 */
 	mergeSameTags(element, nodePathArray, onlyText) {
 		// eslint-disable-next-line @typescript-eslint/no-this-alias
@@ -143,11 +156,12 @@ NodeTransform.prototype = {
 			const children = current.childNodes;
 
 			for (let i = 0, len = children.length, child, next; i < len; i++) {
-				child = children[i];
-				next = children[i + 1];
+				child = /** @type {HTMLElement} */ (children[i]);
+				next = /** @type {HTMLElement} */ (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)) {
+				if (dom.check.isBreak(child) || dom.check.isMedia(child) || dom.check.isInputElement(child)) continue;
+				if ((onlyText && inst.format._isIgnoreNodeChange(child)) || (!onlyText && (dom.check.isTableElements(child) || dom.check.isListCell(child) || (inst.format.isLine(child) && !inst.format.isBrLine(child))))) {
+					if (dom.check.isTableElements(child) || dom.check.isListCell(child)) {
 						recursionFunc(child, depth + 1, i);
 					}
 					continue;
@@ -164,7 +178,7 @@ NodeTransform.prototype = {
 								cDepth = depth;
 								spliceDepth = true;
 								while (cDepth >= 0) {
-									if (domUtils.getArrayIndex(p.childNodes, c) !== path[cDepth]) {
+									if (dom.utils.getArrayIndex(p.childNodes, c) !== path[cDepth]) {
 										spliceDepth = false;
 										break;
 									}
@@ -181,16 +195,17 @@ NodeTransform.prototype = {
 					}
 
 					// merge tag
-					domUtils.copyTagAttributes(child, current);
+					dom.utils.copyTagAttributes(child, current);
 					current.parentNode.insertBefore(child, current);
-					domUtils.removeItem(current);
+					dom.utils.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) {
+				if (child.nodeName === next.nodeName && dom.check.isSameAttributes(child, next) && child.getAttribute?.('href') === next.getAttribute?.('href')) {
 					const childs = child.childNodes;
 					let childLength = 0;
 					for (let n = 0, nLen = childs.length; n < nLen; n++) {
@@ -254,7 +269,7 @@ NodeTransform.prototype = {
 						child.innerHTML += next.innerHTML;
 					}
 
-					domUtils.removeItem(next);
+					dom.utils.removeItem(next);
 					i--;
 				} else if (child.nodeType === 1) {
 					recursionFunc(child, depth + 1, i);
@@ -266,15 +281,15 @@ NodeTransform.prototype = {
 	},
 
 	/**
+	 * @this {NodeTransformThis}
 	 * @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.
+	 * @param {Node} element Element object
+	 * @param {?(current: Node) => boolean|string=} 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'));
+			const tagRegExp = new RegExp(`^(${validation ? validation : '.+'})$`, 'i');
+			validation = (current) => tagRegExp.test(current.nodeName);
 		} else if (typeof validation !== 'function') {
 			validation = () => true;
 		}
@@ -293,16 +308,17 @@ NodeTransform.prototype = {
 			for (let i = 0, len = current.children.length; i < len; i++) {
 				recursionFunc(current.children[i]);
 			}
-		})(element);
+		})(/** @type {Element} */ (element));
 	},
 
 	/**
+	 * @this {NodeTransformThis}
 	 * @description Delete itself and all parent nodes that match the condition.
-	 * Returns an {sc: previousSibling, ec: nextSibling}(the deleted node reference) or null.
+	 * - 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}
+	 * @param {?(current: Node) => boolean=} validation Validation function. default(Deleted if it only have breakLine and blanks)
+	 * @param {?Node=} stopParent Stop when the parent node reaches stopParent
+	 * @returns {{sc: Node|null, ec: Node|null}|null} {sc: previousSibling, ec: nextSibling} (the deleted node reference) or null.
 	 */
 	removeAllParents(item, validation, stopParent) {
 		if (!item) return null;
@@ -316,39 +332,41 @@ NodeTransform.prototype = {
 		}
 
 		(function recursionFunc(element) {
-			if (!domUtils.isWysiwygFrame(element)) {
+			if (!dom.check.isWysiwygFrame(element)) {
 				const parent = element.parentNode;
 				if (parent && validation(element)) {
 					cc = {
 						sc: element.previousElementSibling,
 						ec: element.nextElementSibling
 					};
-					domUtils.removeItem(element);
-					recursionFunc(parent);
+					dom.utils.removeItem(element);
+					recursionFunc(/** @type {Element} */ (parent));
 				}
 			}
-		})(item);
+		})(/** @type {Element} */ (item));
 
 		return cc;
 	},
 
 	/**
+	 * @this {NodeTransformThis}
 	 * @description Delete a empty child node of argument element
-	 * @param {Element} element Element node
-	 * @param {Node|null} notRemoveNode Do not remove node
+	 * @param {Node} element Element node
+	 * @param {?Node} 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;
+		const allowedEmptyTags = this.options.get('allowedEmptyTags');
 
 		if (notRemoveNode) {
-			notRemoveNode = domUtils.getParentElement(notRemoveNode, (current) => element === current.parentElement);
+			notRemoveNode = dom.query.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 (inst.format._notTextNode(current) || current === notRemoveNode || dom.check.isNonEditable(current)) return 0;
+			if (current !== element && dom.check.isZeroWidth(current.textContent) && (!current.firstChild || !dom.check.isBreak(current.firstChild)) && !current.querySelector(allowedEmptyTags)) {
 				if (current.parentNode) {
 					current.parentNode.removeChild(current);
 					return -1;
@@ -362,31 +380,32 @@ NodeTransform.prototype = {
 			}
 
 			return 0;
-		})(element);
+		})(/** @type {Element} */ (element));
 
 		if (element.childNodes.length === 0) {
 			if (forceDelete) {
-				domUtils.removeItem(element);
+				dom.utils.removeItem(element);
 			} else {
-				element.innerHTML = '<br>';
+				/** @type {HTMLElement} */ (element).innerHTML = '<br>';
 			}
 		}
 	},
 
 	/**
+	 * @this {NodeTransformThis}
 	 * @description Creates a nested node structure from the given array of nodes.
-	 * @param {Array} nodeArray An array of nodes to clone. The first node in the array will be the top-level parent.
-	 * @param {Function|null|undefined} validate A validate function.
-	 * @returns {{ parent: Element, inner: Element }} An object containing the top-level parent node and the innermost child node.
+	 * @param {__se__NodeCollection} nodeArray An array of nodes to clone. The first node in the array will be the top-level parent.
+	 * @param {?(current: Node) => boolean=} validate A validate function.
+	 * @returns {{ parent: Node, inner: Node }} An object containing the top-level parent node and the innermost child node.
 	 */
 	createNestedNode(nodeArray, validate) {
 		if (typeof validate !== 'function') validate = () => true;
 
-		const el = nodeArray[0].cloneNode(false);
+		const el = /** @type {HTMLElement} */ (nodeArray[0].cloneNode(false));
 		let n = el;
 		for (let i = 1, len = nodeArray.length, t; i < len; i++) {
 			if (!validate(nodeArray[i])) continue;
-			t = nodeArray[i].cloneNode(false);
+			t = /** @type {HTMLElement} */ (nodeArray[i].cloneNode(false));
 			n.appendChild(t);
 			n = t;
 		}