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

package/src/core/class/format.js

@@ -3,26 +3,47 @@
  */
 
 import CoreInjector from '../../editorInjector/_core';
-import { domUtils, unicode, numbers, env } from '../../helper';
+import { dom, unicode, numbers, converter } from '../../helper';
 
-const Format = function (editor) {
+/**
+ * @typedef {Omit<Format & Partial<__se__EditorInjector>, 'format'>} FormatThis
+ */
+
+/**
+ * @typedef {Object} NodeStyleContainerType
+ * @property {?Node=} ancestor
+ * @property {?number=} offset
+ * @property {?Node=} container
+ * @property {?Node=} endContainer
+ */
+
+/**
+ * @constructor
+ * @this {FormatThis}
+ * @description Classes related to editor formats such as line creation, line retrieval from selected range, etc.
+ * @param {__se__EditorCore} editor - The root editor instance
+ */
+function Format(editor) {
 	CoreInjector.call(this, editor);
 
 	// members
 	this._listCamel = this.options.get('__listCommonStyle');
-	this._listKebab = env.camelToKebabCase(this.options.get('__listCommonStyle'));
+	this._listKebab = converter.camelToKebabCase(this.options.get('__listCommonStyle'));
 	this._formatLineCheck = this.options.get('formatLine').reg;
 	this._formatBrLineCheck = this.options.get('formatBrLine').reg;
 	this._formatBlockCheck = this.options.get('formatBlock').reg;
 	this._formatClosureBlockCheck = this.options.get('formatClosureBlock').reg;
 	this._formatClosureBrLineCheck = this.options.get('formatClosureBrLine').reg;
 	this._textStyleTagsCheck = new RegExp('^(' + this.options.get('textStyleTags') + ')$', 'i');
-};
+	// members - _defaultBrLineBreak
+	this._brLineBreak = this.options.get('_defaultBrLineBreak');
+}
 
 Format.prototype = {
 	/**
+	 * @this {FormatThis}
 	 * @description Replace the line tag of the current selection.
-	 * @param {Element} element Line element (P, DIV..)
+	 * @param {Node} element Line element (P, DIV..)
 	 */
 	setLine(element) {
 		if (!this.isLine(element)) {
@@ -40,8 +61,8 @@ Format.prototype = {
 			node = lines[i];
 
 			if ((node.nodeName !== value || (node.className.match(/(\s|^)__se__format__[^\s]+/) || [''])[0].trim() !== className) && !this.component.is(node)) {
-				newFormat = element.cloneNode(false);
-				domUtils.copyFormatAttributes(newFormat, node);
+				newFormat = /** @type {HTMLElement} */ (element.cloneNode(false));
+				dom.utils.copyFormatAttributes(newFormat, node);
 				newFormat.innerHTML = node.innerHTML;
 
 				node.parentNode.replaceChild(newFormat, node);
@@ -52,15 +73,21 @@ Format.prototype = {
 			newFormat = null;
 		}
 
-		this.selection.setRange(domUtils.getNodeFromPath(info.firstPath, first), info.startOffset, domUtils.getNodeFromPath(info.lastPath, last), info.endOffset);
+		this.selection.setRange(dom.query.getNodeFromPath(info.firstPath, first), info.startOffset, dom.query.getNodeFromPath(info.lastPath, last), info.endOffset);
 		this.history.push(false);
+
+		// document type
+		if (this.editor.frameContext.has('documentType-use-header')) {
+			this.editor.frameContext.get('documentType').reHeader();
+		}
 	},
 
 	/**
+	 * @this {FormatThis}
 	 * @description If a parent node that contains an argument node finds a format node (format.isLine), it returns that node.
 	 * @param {Node} node Reference node.
-	 * @param {Function|null} validation Additional validation function.
-	 * @returns {Element|null}
+	 * @param {?(current: Node) => boolean=} validation Additional validation function.
+	 * @returns {HTMLElement|null}
 	 */
 	getLine(node, validation) {
 		if (!node) return null;
@@ -71,9 +98,9 @@ Format.prototype = {
 		}
 
 		while (node) {
-			if (domUtils.isWysiwygFrame(node)) return null;
-			if (this.isBlock(node)) return node.firstElementChild;
-			if (this.isLine(node) && validation(node)) return node;
+			if (dom.check.isWysiwygFrame(node)) return null;
+			if (this.isBlock(node)) return /** @type {HTMLElement} */ (node.firstElementChild);
+			if (this.isLine(node) && validation(node)) return /** @type {HTMLElement} */ (node);
 
 			node = node.parentNode;
 		}
@@ -82,8 +109,9 @@ Format.prototype = {
 	},
 
 	/**
+	 * @this {FormatThis}
 	 * @description Replace the br-line tag of the current selection.
-	 * @param {Element} element BR-Line element (PRE..)
+	 * @param {Node} element BR-Line element (PRE..)
 	 */
 	setBrLine(element) {
 		if (!this.isBrLine(element)) {
@@ -93,7 +121,7 @@ Format.prototype = {
 		const lines = this._lineWork().lines;
 		const len = lines.length - 1;
 		let parentNode = lines[len].parentNode;
-		let freeElement = element.cloneNode(false);
+		let freeElement = /** @type {HTMLElement} */ (element.cloneNode(false));
 		const focusElement = freeElement;
 
 		for (let i = len, f, html, before, next, inner, isComp, first = true; i >= 0; i--) {
@@ -102,7 +130,7 @@ Format.prototype = {
 
 			isComp = this.component.is(f);
 			html = isComp ? '' : f.innerHTML.replace(/(?!>)\s+(?=<)|\n/g, ' ');
-			before = domUtils.getParentElement(f, (current) => current.parentNode === parentNode);
+			before = dom.query.getParentElement(f, (current) => current.parentNode === parentNode);
 
 			if (parentNode !== f.parentNode || isComp) {
 				if (this.isLine(parentNode)) {
@@ -113,13 +141,13 @@ Format.prototype = {
 					parentNode = f.parentNode;
 				}
 
-				next = freeElement.nextSibling;
-				if (next && freeElement.nodeName === next.nodeName && domUtils.isSameAttributes(freeElement, next)) {
+				next = /** @type {HTMLElement} */ (freeElement.nextSibling);
+				if (next && freeElement.nodeName === next.nodeName && dom.check.isSameAttributes(freeElement, next)) {
 					freeElement.innerHTML += '<BR>' + next.innerHTML;
-					domUtils.removeItem(next);
+					dom.utils.removeItem(next);
 				}
 
-				freeElement = element.cloneNode(false);
+				freeElement = /** @type {HTMLElement} */ (element.cloneNode(false));
 				first = true;
 			}
 
@@ -128,20 +156,20 @@ Format.prototype = {
 
 			if (i === 0) {
 				parentNode.insertBefore(freeElement, f);
-				next = f.nextSibling;
-				if (next && freeElement.nodeName === next.nodeName && domUtils.isSameAttributes(freeElement, next)) {
+				next = /** @type {HTMLElement} */ (f.nextSibling);
+				if (next && freeElement.nodeName === next.nodeName && dom.check.isSameAttributes(freeElement, next)) {
 					freeElement.innerHTML += '<BR>' + next.innerHTML;
-					domUtils.removeItem(next);
+					dom.utils.removeItem(next);
 				}
 
-				const prev = freeElement.previousSibling;
-				if (prev && freeElement.nodeName === prev.nodeName && domUtils.isSameAttributes(freeElement, prev)) {
+				const prev = /** @type {HTMLElement} */ (freeElement.previousSibling);
+				if (prev && freeElement.nodeName === prev.nodeName && dom.check.isSameAttributes(freeElement, prev)) {
 					prev.innerHTML += '<BR>' + freeElement.innerHTML;
-					domUtils.removeItem(freeElement);
+					dom.utils.removeItem(freeElement);
 				}
 			}
 
-			if (!isComp) domUtils.removeItem(f);
+			if (!isComp) dom.utils.removeItem(f);
 			if (html) first = false;
 		}
 
@@ -150,10 +178,11 @@ Format.prototype = {
 	},
 
 	/**
-	 * @description If a parent node that contains an argument node finds a free format node (format.isBrLine), it returns that node.
+	 * @this {FormatThis}
+	 * @description If a parent node that contains an argument node finds a "brLine" (format.isBrLine), it returns that node.
 	 * @param {Node} element Reference node.
-	 * @param {Function|null} validation Additional validation function.
-	 * @returns {Element|null}
+	 * @param {?(current: Node) => boolean=} validation Additional validation function.
+	 * @returns {HTMLBRElement|null}
 	 */
 	getBrLine(element, validation) {
 		if (!element) return null;
@@ -164,8 +193,8 @@ Format.prototype = {
 		}
 
 		while (element) {
-			if (domUtils.isWysiwygFrame(element)) return null;
-			if (this.isBrLine(element) && validation(element)) return element;
+			if (dom.check.isWysiwygFrame(element)) return null;
+			if (this.isBrLine(element) && validation(element)) return /** @type {HTMLBRElement} */ (element);
 
 			element = element.parentNode;
 		}
@@ -174,45 +203,41 @@ Format.prototype = {
 	},
 
 	/**
-	 * @description Append format element to sibling node of argument element.
-	 * If the "lineNode" argument value is present, the tag of that argument value is inserted,
-	 * If not, the currently selected format tag is inserted.
-	 * @param {Element} element Insert as siblings of that element
-	 * @param {string|Element|null} lineNode Node name or node obejct to be inserted
-	 * @returns {Element}
+	 * @this {FormatThis}
+	 * @description Append "line" element to sibling node of argument element.
+	 * - If the "lineNode" argument value is present, the tag of that argument value is inserted,
+	 * - If not, the currently selected format tag is inserted.
+	 * @param {Node} element Insert as siblings of that element
+	 * @param {?string|Node=} lineNode Node name or node obejct to be inserted
+	 * @returns {HTMLElement}
 	 */
 	addLine(element, lineNode) {
 		if (!element || !element.parentNode) return null;
 
 		const currentFormatEl = this.getLine(this.selection.getNode(), null);
 		let oFormat = null;
-		if (!this.isBrLine(element) && this.isBrLine(currentFormatEl || element.parentNode)) {
-			oFormat = domUtils.createElement('BR');
+		if (!this.isBrLine(element) && this.isBrLine(currentFormatEl || element.parentNode) && !this.component.is(element)) {
+			oFormat = dom.utils.createElement('BR');
 		} else {
-			const oFormatName = lineNode
-				? typeof lineNode === 'string'
-					? lineNode
-					: lineNode.nodeName
-				: this.isLine(currentFormatEl) && !this.isBlock(currentFormatEl) && !this.isBrLine(currentFormatEl)
-				? currentFormatEl.nodeName
-				: this.options.get('defaultLine');
-			oFormat = domUtils.createElement(oFormatName, null, '<br>');
+			const oFormatName = lineNode ? (typeof lineNode === 'string' ? lineNode : lineNode.nodeName) : this.isLineOnly(currentFormatEl) ? currentFormatEl.nodeName : this.options.get('defaultLine');
+			oFormat = dom.utils.createElement(oFormatName, null, '<br>');
 			if ((lineNode && typeof lineNode !== 'string') || (!lineNode && this.isLine(currentFormatEl))) {
-				domUtils.copyTagAttributes(oFormat, lineNode || currentFormatEl, ['id']);
+				dom.utils.copyTagAttributes(oFormat, /** @type {Node} */ (lineNode || currentFormatEl), ['id']);
 			}
 		}
 
-		if (domUtils.isTableCell(element)) element.insertBefore(oFormat, element.nextElementSibling);
-		else element.parentNode.insertBefore(oFormat, element.nextElementSibling);
+		if (dom.check.isTableCell(element)) element.insertBefore(oFormat, element.nextElementSibling);
+		else element.parentNode.insertBefore(oFormat, /** @type {HTMLElement} */ (element).nextElementSibling);
 
 		return oFormat;
 	},
 
 	/**
+	 * @this {FormatThis}
 	 * @description If a parent node that contains an argument node finds a format node (format.isBlock), it returns that node.
 	 * @param {Node} element Reference node.
-	 * @param {Function|null} validation Additional validation function.
-	 * @returns {Element|null}
+	 * @param {?(current: Node) => boolean=} validation Additional validation function.
+	 * @returns {HTMLElement|null}
 	 */
 	getBlock(element, validation) {
 		if (!element) return null;
@@ -223,7 +248,7 @@ Format.prototype = {
 		}
 
 		while (element) {
-			if (domUtils.isWysiwygFrame(element)) return null;
+			if (dom.check.isWysiwygFrame(element)) return null;
 			if (this.isBlock(element) && !/^(THEAD|TBODY|TR)$/i.test(element.nodeName) && validation(element)) return element;
 			element = element.parentNode;
 		}
@@ -232,25 +257,26 @@ Format.prototype = {
 	},
 
 	/**
-	 * @description Appended all selected format Element to the argument element and insert
-	 * @param {Element} block Element of wrap the arguments (BLOCKQUOTE...)
+	 * @this {FormatThis}
+	 * @description Appended all selected "line" element to the argument element("block") and insert
+	 * @param {Node} blockElement Element of wrap the arguments (BLOCKQUOTE...)
 	 */
-	applyBlock(block) {
+	applyBlock(blockElement) {
 		this.selection.getRangeAndAddLine(this.selection.getRange(), null);
-		const rangeLines = this.getLinesAndComponents(false);
+		const rangeLines = /** @type {Element[]} */ (this.getLinesAndComponents(false));
 		if (!rangeLines || rangeLines.length === 0) return;
 
 		linesLoop: for (let i = 0, len = rangeLines.length, line, nested, fEl, lEl, f, l; i < len; i++) {
 			line = rangeLines[i];
-			if (!domUtils.isListCell(line)) continue;
+			if (!dom.check.isListCell(line)) continue;
 
 			nested = line.lastElementChild;
-			if (nested && domUtils.isListCell(line.nextElementSibling) && rangeLines.includes(line.nextElementSibling)) {
+			if (nested && dom.check.isListCell(line.nextElementSibling) && rangeLines.includes(line.nextElementSibling)) {
 				lEl = nested.lastElementChild;
 				if (rangeLines.includes(lEl)) {
 					let list = null;
 					while ((list = lEl.lastElementChild)) {
-						if (domUtils.isList(list)) {
+						if (dom.check.isList(list)) {
 							if (rangeLines.includes(list.lastElementChild)) {
 								lEl = list.lastElementChild;
 							} else {
@@ -278,7 +304,7 @@ Format.prototype = {
 			standTag = this.getBlock(last, null) || this.getLine(last, null);
 		}
 
-		if (domUtils.isTableCell(standTag)) {
+		if (dom.check.isTableCell(standTag)) {
 			beforeTag = null;
 			pElement = standTag;
 		} else {
@@ -286,14 +312,14 @@ Format.prototype = {
 			pElement = standTag.parentNode;
 		}
 
-		block = block.cloneNode(false);
-		let parentDepth = domUtils.getNodeDepth(standTag);
+		const block = /** @type {HTMLElement} */ (blockElement.cloneNode(false));
+		let parentDepth = dom.query.getNodeDepth(standTag);
 		let listParent = null;
 		const lineArr = [];
 		const removeItems = (parent, origin, before) => {
 			let cc = null;
-			if (parent !== origin && !domUtils.isTableElements(origin)) {
-				if (origin && domUtils.getNodeDepth(parent) === domUtils.getNodeDepth(origin)) return before;
+			if (parent !== origin && !dom.check.isTableElements(origin)) {
+				if (origin && dom.query.getNodeDepth(parent) === dom.query.getNodeDepth(origin)) return before;
 				cc = this.nodeTransform.removeAllParents(origin, null, parent);
 			}
 
@@ -305,9 +331,9 @@ Format.prototype = {
 			originParent = line.parentNode;
 			if (!originParent || block.contains(originParent)) continue;
 
-			depth = domUtils.getNodeDepth(line);
+			depth = dom.query.getNodeDepth(line);
 
-			if (domUtils.isList(originParent)) {
+			if (dom.check.isList(originParent)) {
 				if (listParent === null) {
 					if (nextList) {
 						listParent = nextList;
@@ -329,14 +355,14 @@ Format.prototype = {
 
 					let list = originParent.parentNode,
 						p;
-					while (domUtils.isList(list)) {
-						p = domUtils.createElement(list.nodeName);
+					while (dom.check.isList(list)) {
+						p = dom.utils.createElement(list.nodeName);
 						p.appendChild(listParent);
 						listParent = p;
 						list = list.parentNode;
 					}
 
-					const edge = this.removeBlock(originParent, lineArr, null, true, true);
+					const edge = this.removeBlock(originParent, { selectedFormats: lineArr, newBlockElement: null, shouldDelete: true, skipHistory: true });
 
 					if (parentDepth >= depth) {
 						parentDepth = depth;
@@ -380,12 +406,12 @@ Format.prototype = {
 
 		this.editor.effectNode = null;
 		this.nodeTransform.mergeSameTags(block, null, false);
-		this.nodeTransform.mergeNestedTags(block, (current) => domUtils.isList(current));
+		this.nodeTransform.mergeNestedTags(block, (current) => dom.check.isList(current));
 
 		// Nested list
-		if (beforeTag && domUtils.getNodeDepth(beforeTag) > 0 && (domUtils.isList(beforeTag.parentNode) || domUtils.isList(beforeTag.parentNode.parentNode))) {
-			const depthFormat = domUtils.getParentElement(beforeTag, (current) => this.isBlock(current) && !domUtils.isList(current));
-			const splitRange = this.nodeTransform.split(beforeTag, null, !depthFormat ? 0 : domUtils.getNodeDepth(depthFormat) + 1);
+		if (beforeTag && dom.query.getNodeDepth(beforeTag) > 0 && (dom.check.isList(beforeTag.parentNode) || dom.check.isList(beforeTag.parentNode.parentNode))) {
+			const depthFormat = dom.query.getParentElement(beforeTag, (current) => this.isBlock(current) && !dom.check.isList(current));
+			const splitRange = this.nodeTransform.split(beforeTag, null, !depthFormat ? 0 : dom.query.getNodeDepth(depthFormat) + 1);
 			splitRange.parentNode.insertBefore(block, splitRange);
 		} else {
 			// basic
@@ -393,7 +419,7 @@ Format.prototype = {
 			removeItems(block, beforeTag);
 		}
 
-		const edge = domUtils.getEdgeChildNodes(block.firstElementChild, block.lastElementChild);
+		const edge = dom.query.getEdgeChildNodes(block.firstElementChild, block.lastElementChild);
 		if (rangeLines.length > 1) {
 			this.selection.setRange(edge.sc, 0, edge.ec, edge.ec.textContent.length);
 		} else {
@@ -404,35 +430,43 @@ Format.prototype = {
 	},
 
 	/**
-	 * @description The elements of the "selectedFormats" array are detached from the "rangeElement" element. ("LI" tags are converted to "P" tags)
-	 * When "selectedFormats" is null, all elements are detached and return {cc: parentNode, sc: nextSibling, ec: previousSibling, removeArray: [Array of removed elements]}.
-	 * @param {Element} rangeElement Range format element (PRE, BLOCKQUOTE, OL, UL...)
-	 * @param {Array|null} selectedFormats Array of format elements (P, DIV, LI...) to remove.
-	 * If null, Applies to all elements and return {cc: parentNode, sc: nextSibling, ec: previousSibling}
-	 * @param {Element|null} newRangeElement The node(rangeElement) to replace the currently wrapped node.
-	 * @param {boolean} remove If true, deleted without detached.
-	 * @param {boolean} notHistoryPush When true, it does not update the history stack and the selection object and return EdgeNodes (domUtils.getEdgeChildNodes)
-	 * @returns {Object}
+	 * @this {FormatThis}
+	 * @description The elements of the "selectedFormats" array are detached from the "blockElement" element. ("LI" tags are converted to "P" tags)
+	 * - When "selectedFormats" is null, all elements are detached and return {cc: parentNode, sc: nextSibling, ec: previousSibling, removeArray: [Array of removed elements]}.
+	 * @param {Node} blockElement "block" element (PRE, BLOCKQUOTE, OL, UL...)
+	 * @param {Object} [options] Options
+	 * @param {Array<Node>} [options.selectedFormats=null] Array of "line" elements (P, DIV, LI...) to remove.
+	 * - If null, Applies to all elements and return {cc: parentNode, sc: nextSibling, ec: previousSibling}
+	 * @param {Node} [options.newBlockElement=null] The node(blockElement) to replace the currently wrapped node.
+	 * @param {boolean} [options.shouldDelete=false] If true, deleted without detached.
+	 * @param {boolean} [options.skipHistory=false] When true, it does not update the history stack and the selection object and return EdgeNodes (dom-query-GetEdgeChildNodes)
+	 * @returns {{cc: Node, sc: Node, so: number, ec: Node, eo: number, removeArray: Array<Node>|null}} Node information after deletion
+	 * - cc: Common parent container node
+	 * - sc: Start container node
+	 * - so: Start offset
+	 * - ec: End container node
+	 * - eo: End offset
+	 * - removeArray: Array of removed elements
 	 */
-	removeBlock(rangeElement, selectedFormats, newRangeElement, remove, notHistoryPush) {
+	removeBlock(blockElement, { selectedFormats, newBlockElement, shouldDelete, skipHistory } = {}) {
 		const range = this.selection.getRange();
 		let so = range.startOffset;
 		let eo = range.endOffset;
 
-		let children = domUtils.getListChildNodes(rangeElement, (current) => current.parentNode === rangeElement);
-		let parent = rangeElement.parentNode;
+		let children = dom.query.getListChildNodes(blockElement, (current) => current.parentNode === blockElement);
+		let parent = blockElement.parentNode;
 		let firstNode = null;
 		let lastNode = null;
-		let rangeEl = rangeElement.cloneNode(false);
+		let rangeEl = /** @type {HTMLElement} */ (blockElement.cloneNode(false));
 
 		const removeArray = [];
-		const newList = domUtils.isList(newRangeElement);
+		const newList = dom.check.isList(newBlockElement);
 		let insertedNew = false;
 		let reset = false;
 		let moveComplete = false;
 
 		const appendNode = (parentEl, insNode, sibling, originNode) => {
-			if (domUtils.isZeroWith(insNode)) {
+			if (dom.check.isZeroWidth(insNode)) {
 				insNode.innerHTML = unicode.zeroWidthSpace;
 				so = eo = 1;
 			}
@@ -449,7 +483,7 @@ Format.prototype = {
 
 			while (insChildren[0]) {
 				c = insChildren[0];
-				if (this._notTextNode(c) && !domUtils.isBreak(c) && !domUtils.isListCell(format)) {
+				if (this._notTextNode(c) && !dom.check.isBreak(c) && !dom.check.isListCell(format)) {
 					if (format.childNodes.length > 0) {
 						if (!first) first = format;
 						parentEl.insertBefore(format, sibling);
@@ -463,7 +497,7 @@ Format.prototype = {
 			}
 
 			if (format.childNodes.length > 0) {
-				if (domUtils.isListCell(parentEl) && domUtils.isListCell(format) && domUtils.isList(sibling)) {
+				if (dom.check.isListCell(parentEl) && dom.check.isListCell(format) && dom.check.isList(sibling)) {
 					if (newList) {
 						first = sibling;
 						while (sibling) {
@@ -474,13 +508,13 @@ Format.prototype = {
 					} else {
 						const originNext = originNode.nextElementSibling;
 						const detachRange = this._removeNestedList(originNode, false);
-						if (rangeElement !== detachRange || originNext !== originNode.nextElementSibling) {
+						if (blockElement !== detachRange || originNext !== originNode.nextElementSibling) {
 							const fChildren = format.childNodes;
 							while (fChildren[0]) {
 								originNode.appendChild(fChildren[0]);
 							}
 
-							rangeElement = detachRange;
+							blockElement = detachRange;
 							reset = true;
 						}
 					}
@@ -497,12 +531,12 @@ Format.prototype = {
 		// detach loop
 		for (let i = 0, len = children.length, insNode, lineIndex, next; i < len; i++) {
 			insNode = children[i];
-			if (insNode.nodeType === 3 && domUtils.isList(rangeEl)) continue;
+			if (insNode.nodeType === 3 && dom.check.isList(rangeEl)) continue;
 
 			moveComplete = false;
-			if (remove && i === 0) {
+			if (shouldDelete && i === 0) {
 				if (!selectedFormats || selectedFormats.length === len || selectedFormats[0] === insNode) {
-					firstNode = rangeElement.previousSibling;
+					firstNode = blockElement.previousSibling;
 				} else {
 					firstNode = rangeEl;
 				}
@@ -510,35 +544,41 @@ Format.prototype = {
 
 			if (selectedFormats) lineIndex = selectedFormats.indexOf(insNode);
 			if (selectedFormats && lineIndex === -1) {
-				if (!rangeEl) rangeEl = rangeElement.cloneNode(false);
+				if (!rangeEl) rangeEl = /** @type {HTMLElement} */ (blockElement.cloneNode(false));
 				rangeEl.appendChild(insNode);
 			} else {
 				if (selectedFormats) next = selectedFormats[lineIndex + 1];
 				if (rangeEl && rangeEl.children.length > 0) {
-					parent.insertBefore(rangeEl, rangeElement);
+					parent.insertBefore(rangeEl, blockElement);
 					rangeEl = null;
 				}
 
-				if (!newList && domUtils.isListCell(insNode)) {
-					if (next && domUtils.getNodeDepth(insNode) !== domUtils.getNodeDepth(next) && (domUtils.isListCell(parent) || domUtils.getArrayItem(insNode.children, domUtils.isList, false))) {
+				if (!newList && dom.check.isListCell(insNode)) {
+					if (next && dom.query.getNodeDepth(insNode) !== dom.query.getNodeDepth(next) && (dom.check.isListCell(parent) || dom.utils.arrayFind(insNode.children, dom.check.isList))) {
 						const insNext = insNode.nextElementSibling;
 						const detachRange = this._removeNestedList(insNode, false);
-						if (rangeElement !== detachRange || insNext !== insNode.nextElementSibling) {
-							rangeElement = detachRange;
+						if (blockElement !== detachRange || insNext !== insNode.nextElementSibling) {
+							blockElement = detachRange;
 							reset = true;
 						}
 					} else {
 						const inner = insNode;
-						insNode = domUtils.createElement(
-							remove ? inner.nodeName : domUtils.isList(rangeElement.parentNode) || domUtils.isListCell(rangeElement.parentNode) ? 'LI' : domUtils.isTableCell(rangeElement.parentNode) ? 'DIV' : this.options.get('defaultLine')
+						insNode = dom.utils.createElement(
+							shouldDelete
+								? inner.nodeName
+								: dom.check.isList(blockElement.parentNode) || dom.check.isListCell(blockElement.parentNode)
+								? 'LI'
+								: dom.check.isTableCell(blockElement.parentNode)
+								? 'DIV'
+								: this.options.get('defaultLine')
 						);
-						const isCell = domUtils.isListCell(insNode);
+						const isCell = dom.check.isListCell(insNode);
 						const innerChildren = inner.childNodes;
 						while (innerChildren[0]) {
-							if (domUtils.isList(innerChildren[0]) && !isCell) break;
+							if (dom.check.isList(innerChildren[0]) && !isCell) break;
 							insNode.appendChild(innerChildren[0]);
 						}
-						domUtils.copyFormatAttributes(insNode, inner);
+						dom.utils.copyFormatAttributes(insNode, inner);
 						moveComplete = true;
 					}
 				} else {
@@ -546,15 +586,15 @@ Format.prototype = {
 				}
 
 				if (!reset) {
-					if (!remove) {
-						if (newRangeElement) {
+					if (!shouldDelete) {
+						if (newBlockElement) {
 							if (!insertedNew) {
-								parent.insertBefore(newRangeElement, rangeElement);
+								parent.insertBefore(newBlockElement, blockElement);
 								insertedNew = true;
 							}
-							insNode = appendNode(newRangeElement, insNode, null, children[i]);
+							insNode = appendNode(newBlockElement, insNode, null, children[i]);
 						} else {
-							insNode = appendNode(parent, insNode, rangeElement, children[i]);
+							insNode = appendNode(parent, insNode, blockElement, children[i]);
 						}
 
 						if (!reset) {
@@ -569,14 +609,14 @@ Format.prototype = {
 						}
 					} else {
 						removeArray.push(insNode);
-						domUtils.removeItem(children[i]);
+						dom.utils.removeItem(children[i]);
 					}
 
 					if (reset) {
 						reset = moveComplete = false;
-						children = domUtils.getListChildNodes(rangeElement, (current) => current.parentNode === rangeElement);
-						rangeEl = rangeElement.cloneNode(false);
-						parent = rangeElement.parentNode;
+						children = dom.query.getListChildNodes(blockElement, (current) => current.parentNode === blockElement);
+						rangeEl = /** @type {HTMLElement} */ (blockElement.cloneNode(false));
+						parent = blockElement.parentNode;
 						i = -1;
 						len = children.length;
 						continue;
@@ -585,24 +625,24 @@ Format.prototype = {
 			}
 		}
 
-		const rangeParent = rangeElement.parentNode;
-		let rangeRight = rangeElement.nextSibling;
+		const rangeParent = blockElement.parentNode;
+		let rangeRight = blockElement.nextSibling;
 		if (rangeEl?.children.length > 0) {
 			rangeParent.insertBefore(rangeEl, rangeRight);
 		}
 
-		if (newRangeElement) firstNode = newRangeElement.previousSibling;
-		else if (!firstNode) firstNode = rangeElement.previousSibling;
-		rangeRight = rangeElement.nextSibling !== rangeEl ? rangeElement.nextSibling : rangeEl ? rangeEl.nextSibling : null;
+		if (newBlockElement) firstNode = newBlockElement.previousSibling;
+		else if (!firstNode) firstNode = blockElement.previousSibling;
+		rangeRight = blockElement.nextSibling !== rangeEl ? blockElement.nextSibling : rangeEl ? rangeEl.nextSibling : null;
 
-		if (rangeElement.children.length === 0 || rangeElement.textContent.length === 0) {
-			domUtils.removeItem(rangeElement);
+		if (/** @type {HTMLElement} */ (blockElement).children.length === 0 || blockElement.textContent.length === 0) {
+			dom.utils.removeItem(blockElement);
 		} else {
-			this.nodeTransform.removeEmptyNode(rangeElement, null, false);
+			this.nodeTransform.removeEmptyNode(blockElement, null, false);
 		}
 
 		let edge = null;
-		if (remove) {
+		if (shouldDelete) {
 			edge = {
 				cc: rangeParent,
 				sc: firstNode,
@@ -614,7 +654,7 @@ Format.prototype = {
 		} else {
 			if (!firstNode) firstNode = lastNode;
 			if (!lastNode) lastNode = firstNode;
-			const childEdge = domUtils.getEdgeChildNodes(firstNode, lastNode.parentNode ? firstNode : lastNode);
+			const childEdge = dom.query.getEdgeChildNodes(firstNode, lastNode.parentNode ? firstNode : lastNode);
 			edge = {
 				cc: (childEdge.sc || childEdge.ec).parentNode,
 				sc: childEdge.sc,
@@ -626,9 +666,9 @@ Format.prototype = {
 		}
 
 		this.editor.effectNode = null;
-		if (notHistoryPush) return edge;
+		if (skipHistory) return edge;
 
-		if (!remove && edge) {
+		if (!shouldDelete && edge) {
 			if (!selectedFormats) {
 				this.selection.setRange(edge.sc, 0, edge.sc, 0);
 			} else {
@@ -640,9 +680,10 @@ Format.prototype = {
 	},
 
 	/**
-	 * @description Append all selected format Element to the list and insert.
+	 * @this {FormatThis}
+	 * @description Append all selected "line" element to the list and insert.
 	 * @param {string} type List type. (ol | ul):[listStyleType]
-	 * @param {Element} selectedCells Format elements or list cells.
+	 * @param {Array<Node>} selectedCells "line" elements or list cells.
 	 * @param {boolean} nested If true, indenting existing list cells.
 	 */
 	applyList(type, selectedCells, nested) {
@@ -650,7 +691,7 @@ Format.prototype = {
 		const listStyle = type.split(':')[1] || '';
 
 		let range = this.selection.getRange();
-		let selectedFormats = !selectedCells ? this.getLinesAndComponents(false) : selectedCells;
+		let selectedFormats = /** @type {Array<HTMLElement>} */ (!selectedCells ? this.getLinesAndComponents(false) : selectedCells);
 
 		if (selectedFormats.length === 0) {
 			if (selectedCells) return;
@@ -659,18 +700,18 @@ Format.prototype = {
 			if (selectedFormats.length === 0) return;
 		}
 
-		domUtils.sortNodeByDepth(selectedFormats, true);
+		dom.query.sortNodeByDepth(selectedFormats, true);
 
 		// merge
 		const firstSel = selectedFormats[0];
 		const lastSel = selectedFormats[selectedFormats.length - 1];
-		let topEl = (domUtils.isListCell(firstSel) || this.component.is(firstSel)) && !firstSel.previousElementSibling ? firstSel.parentNode.previousElementSibling : firstSel.previousElementSibling;
-		let bottomEl = (domUtils.isListCell(lastSel) || this.component.is(lastSel)) && !lastSel.nextElementSibling ? lastSel.parentNode.nextElementSibling : lastSel.nextElementSibling;
+		let topEl = (dom.check.isListCell(firstSel) || this.component.is(firstSel)) && !firstSel.previousElementSibling ? firstSel.parentElement.previousElementSibling : firstSel.previousElementSibling;
+		let bottomEl = (dom.check.isListCell(lastSel) || this.component.is(lastSel)) && !lastSel.nextElementSibling ? lastSel.parentElement.nextElementSibling : lastSel.nextElementSibling;
 
 		const isCollapsed = range.collapsed;
 		const originRange = {
 			sc: range.startContainer,
-			so: range.startContainer === range.endContainer && domUtils.isZeroWith(range.startContainer) && range.startOffset === 0 && range.endOffset === 1 ? range.endOffset : range.startOffset,
+			so: range.startContainer === range.endContainer && dom.check.isZeroWidth(range.startContainer) && range.startOffset === 0 && range.endOffset === 1 ? range.endOffset : range.startOffset,
 			ec: range.endContainer,
 			eo: range.endOffset
 		};
@@ -678,7 +719,7 @@ Format.prototype = {
 		let isRemove = true;
 
 		for (let i = 0, len = selectedFormats.length; i < len; i++) {
-			if (!domUtils.isList(this.getBlock(selectedFormats[i], (current) => this.getBlock(current) && current !== selectedFormats[i]))) {
+			if (!dom.check.isList(this.getBlock(selectedFormats[i], (current) => this.getBlock(current) && current !== selectedFormats[i]))) {
 				isRemove = false;
 				break;
 			}
@@ -706,85 +747,85 @@ Format.prototype = {
 			};
 
 			if (!cancel) {
-				tempList = domUtils.createElement(listTag, { style: 'list-style-type: ' + listStyle });
+				tempList = dom.utils.createElement(listTag, { style: 'list-style-type: ' + listStyle });
 			}
 
 			for (let i = 0, len = selectedFormats.length, r, o; i < len; i++) {
 				o = this.getBlock(selectedFormats[i], passComponent);
-				if (!o || !domUtils.isList(o)) continue;
+				if (!o || !dom.check.isList(o)) continue;
 
 				if (!r) {
 					r = o;
 					rangeArr = {
 						r: r,
-						f: [domUtils.getParentElement(selectedFormats[i], 'LI')]
+						f: [dom.query.getParentElement(selectedFormats[i], 'LI')]
 					};
 				} else {
 					if (r !== o) {
-						if (nested && domUtils.isListCell(o.parentNode)) {
+						if (nested && dom.check.isListCell(o.parentNode)) {
 							this._detachNested(rangeArr.f);
 						} else {
-							afterRange = this.removeBlock(rangeArr.f[0].parentNode, rangeArr.f, tempList, false, true);
+							afterRange = this.removeBlock(rangeArr.f[0].parentElement, { selectedFormats: rangeArr.f, newBlockElement: tempList, shouldDelete: false, skipHistory: true });
 						}
 
 						o = selectedFormats[i].parentNode;
 						if (!cancel) {
-							tempList = domUtils.createElement(listTag, { style: 'list-style-type: ' + listStyle });
+							tempList = dom.utils.createElement(listTag, { style: 'list-style-type: ' + listStyle });
 						}
 
 						r = o;
 						rangeArr = {
 							r: r,
-							f: [domUtils.getParentElement(selectedFormats[i], 'LI')]
+							f: [dom.query.getParentElement(selectedFormats[i], 'LI')]
 						};
 					} else {
-						rangeArr.f.push(domUtils.getParentElement(selectedFormats[i], 'LI'));
+						rangeArr.f.push(dom.query.getParentElement(selectedFormats[i], 'LI'));
 					}
 				}
 
 				if (i === len - 1) {
-					if (nested && domUtils.isListCell(o.parentNode)) {
+					if (nested && dom.check.isListCell(o.parentNode)) {
 						this._detachNested(rangeArr.f);
 					} else {
-						afterRange = this.removeBlock(rangeArr.f[0].parentNode, rangeArr.f, tempList, false, true);
+						afterRange = this.removeBlock(rangeArr.f[0].parentElement, { selectedFormats: rangeArr.f, newBlockElement: tempList, shouldDelete: false, skipHistory: true });
 					}
 				}
 			}
 		} else {
 			const topElParent = topEl ? topEl.parentNode : topEl;
 			const bottomElParent = bottomEl ? bottomEl.parentNode : bottomEl;
-			topEl = topElParent && !domUtils.isWysiwygFrame(topElParent) && topElParent.nodeName === listTag ? topElParent : topEl;
-			bottomEl = bottomElParent && !domUtils.isWysiwygFrame(bottomElParent) && bottomElParent.nodeName === listTag ? bottomElParent : bottomEl;
+			topEl = /** @type {HTMLElement} */ (topElParent && !dom.check.isWysiwygFrame(topElParent) && topElParent.nodeName === listTag ? topElParent : topEl);
+			bottomEl = /** @type {HTMLElement} */ (bottomElParent && !dom.check.isWysiwygFrame(bottomElParent) && bottomElParent.nodeName === listTag ? bottomElParent : bottomEl);
 
 			const mergeTop = topEl?.tagName === listTag;
 			const mergeBottom = bottomEl?.tagName === listTag;
 
-			let list = mergeTop ? topEl : domUtils.createElement(listTag, { style: 'list-style-type: ' + listStyle });
+			let list = mergeTop ? topEl : dom.utils.createElement(listTag, { style: 'list-style-type: ' + listStyle });
 			let firstList = null;
 			let topNumber = null;
 			// let lastList = null;
 			// let bottomNumber = null;
 
 			const passComponent = (current) => {
-				return !this.component.is(current) && !domUtils.isList(current);
+				return !this.component.is(current) && !dom.check.isList(current);
 			};
 
 			for (let i = 0, len = selectedFormats.length, newCell, fTag, isCell, next, originParent, nextParent, parentTag, siblingTag, rangeTag; i < len; i++) {
 				fTag = selectedFormats[i];
 				if (fTag.childNodes.length === 0 && !this._isIgnoreNodeChange(fTag)) {
-					domUtils.removeItem(fTag);
+					dom.utils.removeItem(fTag);
 					continue;
 				}
 				next = selectedFormats[i + 1];
 				originParent = fTag.parentNode;
 				nextParent = next ? next.parentNode : null;
-				isCell = domUtils.isListCell(fTag);
+				isCell = dom.check.isListCell(fTag);
 				rangeTag = this.isBlock(originParent) ? originParent : null;
-				parentTag = isCell && !domUtils.isWysiwygFrame(originParent) ? originParent.parentNode : originParent;
-				siblingTag = isCell && !domUtils.isWysiwygFrame(originParent) ? (!next || domUtils.isListCell(parentTag) ? originParent : originParent.nextSibling) : fTag.nextSibling;
+				parentTag = isCell && !dom.check.isWysiwygFrame(originParent) ? originParent.parentNode : originParent;
+				siblingTag = isCell && !dom.check.isWysiwygFrame(originParent) ? (!next || dom.check.isListCell(parentTag) ? originParent : originParent.nextSibling) : fTag.nextSibling;
 
-				newCell = domUtils.createElement('LI');
-				domUtils.copyFormatAttributes(newCell, fTag);
+				newCell = dom.utils.createElement('LI');
+				dom.utils.copyFormatAttributes(newCell, fTag);
 				if (this.component.is(fTag)) {
 					const isHR = /^HR$/i.test(fTag.nodeName);
 					if (!isHR) newCell.innerHTML = '<br>';
@@ -801,22 +842,22 @@ Format.prototype = {
 				// if (!next) lastList = list;
 				if (!next || parentTag !== nextParent || this.isBlock(siblingTag)) {
 					if (!firstList) firstList = list;
-					if ((!mergeTop || !next || parentTag !== nextParent) && !(next && domUtils.isList(nextParent) && nextParent === originParent)) {
+					if ((!mergeTop || !next || parentTag !== nextParent) && !(next && dom.check.isList(nextParent) && nextParent === originParent)) {
 						if (list.parentNode !== parentTag) parentTag.insertBefore(list, siblingTag);
 					}
 				}
 
-				domUtils.removeItem(fTag);
+				dom.utils.removeItem(fTag);
 				if (mergeTop && topNumber === null) topNumber = list.children.length - 1;
 				if (
 					next &&
 					(this.getBlock(nextParent, passComponent) !== this.getBlock(originParent, passComponent) ||
-						(domUtils.isList(nextParent) && domUtils.isList(originParent) && domUtils.getNodeDepth(nextParent) !== domUtils.getNodeDepth(originParent)))
+						(dom.check.isList(nextParent) && dom.check.isList(originParent) && dom.query.getNodeDepth(nextParent) !== dom.query.getNodeDepth(originParent)))
 				) {
-					list = domUtils.createElement(listTag, { style: 'list-style-type: ' + listStyle });
+					list = dom.utils.createElement(listTag, { style: 'list-style-type: ' + listStyle });
 				}
 
-				if (rangeTag?.children.length === 0) domUtils.removeItem(rangeTag);
+				if (rangeTag?.children.length === 0) dom.utils.removeItem(rangeTag);
 			}
 
 			if (topNumber) {
@@ -827,22 +868,25 @@ Format.prototype = {
 				// bottomNumber = list.children.length - 1;
 				list.innerHTML += bottomEl.innerHTML;
 				// lastList = list.children[bottomNumber] || lastList;
-				domUtils.removeItem(bottomEl);
+				dom.utils.removeItem(bottomEl);
 			}
 		}
 
 		this.editor.effectNode = null;
-		return !isRemove || !isCollapsed ? originRange : afterRange;
+		return !isRemove || !isCollapsed ? originRange : afterRange || originRange;
 	},
 
 	/**
+	 * @this {FormatThis}
 	 * @description "selectedCells" array are detached from the list element.
-	 * The return value is applied when the first and last lines of "selectedFormats" are "LI" respectively.
-	 * @param {Array} selectedCells Array of format elements (LI, P...) to remove.
-	 * @param {boolean} remove If true, It does not just remove the list, it deletes the content.
-	 * @returns {Object} {sc: <LI>, ec: <LI>}.
+	 * - The return value is applied when the first and last lines of "selectedFormats" are "LI" respectively.
+	 * @param {Array<Node>} selectedCells Array of ["line", li] elements(LI, P...) to remove.
+	 * @param {boolean} shouldDelete If true, It does not just remove the list, it deletes the content.
+	 * @returns {{sc: Node, ec: Node}} Node information after deletion
+	 * - sc: Start container node
+	 * - ec: End container node
 	 */
-	removeList(selectedCells, remove) {
+	removeList(selectedCells, shouldDelete) {
 		let rangeArr = {};
 		let listFirst = false;
 		let listLast = false;
@@ -855,17 +899,17 @@ Format.prototype = {
 		for (let i = 0, len = selectedCells.length, r, o, lastIndex, isList; i < len; i++) {
 			lastIndex = i === len - 1;
 			o = this.getBlock(selectedCells[i], passComponent);
-			isList = domUtils.isList(o);
+			isList = dom.check.isList(o);
 			if (!r && isList) {
 				r = o;
 				rangeArr = {
 					r: r,
-					f: [domUtils.getParentElement(selectedCells[i], 'LI')]
+					f: [dom.query.getParentElement(selectedCells[i], 'LI')]
 				};
 				if (i === 0) listFirst = true;
 			} else if (r && isList) {
 				if (r !== o) {
-					const edge = this.detachRangeFormatElement(rangeArr.f[0].parentNode, rangeArr.f, null, remove, true);
+					const edge = this.removeBlock(rangeArr.f[0].parentNode, { selectedFormats: rangeArr.f, newBlockElement: null, shouldDelete, skipHistory: true });
 					o = selectedCells[i].parentNode;
 					if (listFirst) {
 						first = edge.sc;
@@ -877,20 +921,20 @@ Format.prototype = {
 						r = o;
 						rangeArr = {
 							r: r,
-							f: [domUtils.getParentElement(selectedCells[i], 'LI')]
+							f: [dom.query.getParentElement(selectedCells[i], 'LI')]
 						};
 						if (lastIndex) listLast = true;
 					} else {
 						r = null;
 					}
 				} else {
-					rangeArr.f.push(domUtils.getParentElement(selectedCells[i], 'LI'));
+					rangeArr.f.push(dom.query.getParentElement(selectedCells[i], 'LI'));
 					if (lastIndex) listLast = true;
 				}
 			}
 
-			if (lastIndex && domUtils.isList(r)) {
-				const edge = this.detachRangeFormatElement(rangeArr.f[0].parentNode, rangeArr.f, null, remove, true);
+			if (lastIndex && dom.check.isList(r)) {
+				const edge = this.removeBlock(rangeArr.f[0].parentNode, { selectedFormats: rangeArr.f, newBlockElement: null, shouldDelete, skipHistory: true });
 				if (listLast || len === 1) last = edge.ec;
 				if (listFirst) first = edge.sc || last;
 			}
@@ -903,8 +947,9 @@ Format.prototype = {
 	},
 
 	/**
+	 * @this {FormatThis}
 	 * @description Indent more the selected lines.
-	 * margin size - 'status.indentSize'px
+	 * - margin size : 'status.indentSize'px
 	 */
 	indent() {
 		const range = this.selection.getRange();
@@ -927,8 +972,9 @@ Format.prototype = {
 	},
 
 	/**
+	 * @this {FormatThis}
 	 * @description Indent less the selected lines.
-	 * margin size - "status.indentSize"px
+	 * - margin size - "status.indentSize"px
 	 */
 	outdent() {
 		const range = this.selection.getRange();
@@ -951,46 +997,51 @@ Format.prototype = {
 	},
 
 	/**
-	 * @description Add, update, and delete style node from selected text. (a, span, strong, ect.)
-	 * 1. If there is a node in the "styleNode" argument, a node with the same tags and attributes as "styleNode" is added to the selection text.
-	 * 2. If it is in the same tag, only the tag's attributes are changed without adding a tag.
-	 * 3. If the "styleNode" argument is null, the node of the selection is update or remove without adding a new node.
-	 * 4. The same style as the style attribute of the "styleArray" argument is deleted.
-	 *    (Styles should be put with attribute names from css. ["background-color"])
-	 * 5. The same class name as the class attribute of the "styleArray" argument is deleted.
-	 *    (The class name is preceded by "." [".className"])
-	 * 6. Use a list of styles and classes of "styleNode" in "styleArray" to avoid duplicate property values.
-	 * 7. If a node with all styles and classes removed has the same tag name as "styleNode" or "removeNodeArray", or "styleNode" is null, that node is deleted.
-	 * 8. Regardless of the style and class of the node, the tag with the same name as the "removeNodeArray" argument value is deleted.
-	 * 9. If the "strictRemove" argument is true, only nodes with all styles and classes removed from the nodes of "removeNodeArray" are removed.
-	 *10. It won't work if the parent node has the same class and same value style.
-	 *    However, if there is a value in "removeNodeArray", it works and the text node is separated even if there is no node to replace.
-	 * @param {Element|null} styleNode The element to be added to the selection. If it is null, only delete the node.
-	 * @param {Array|null} styleArray The style or className attribute name Array to check (['font-size'], ['.className'], ['font-family', 'color', '.className']...])
-	 * @param {Array|null} removeNodeArray An array of node names to remove types from, remove all formats when "styleNode" is null and there is an empty array or null value. (['span'], ['strong', 'em'] ...])
-	 * @param {Boolean|null} strictRemove If true, only nodes with all styles and classes removed from the nodes of "removeNodeArray" are removed.
-	 * @returns {Element} The element that was added to the selection.
+	 * @this {FormatThis}
+	 * @description Adds, updates, or deletes style nodes from selected text (a, span, strong, etc.).
+	 * @param {?Node} styleNode The element to be added to the selection. If null, only existing nodes are modified or removed.
+	 * @param {Object} [options] Options
+	 * @param {Array<string>} [options.stylesToModify=null] Array of style or class names to check and modify.
+	 *        (e.g., ['font-size'], ['.className'], ['font-family', 'color', '.className'])
+	 * @param {Array<string>} [options.nodesToRemove=null] Array of node names to remove.
+	 *        If empty array or null when styleNode is null, all formats are removed.
+	 *        (e.g., ['span'], ['strong', 'em'])
+	 * @param {boolean} [options.strictRemove=false] If true, only removes nodes from nodesToRemove if all styles and classes are removed.
+	 * @returns {HTMLElement} The element that was added to or modified in the selection.
+	 *
+	 * @details
+	 * 1. If styleNode is provided, a node with the same tags and attributes is added to the selected text.
+	 * 2. If the same tag already exists, only its attributes are updated.
+	 * 3. If styleNode is null, existing nodes are updated or removed without adding new ones.
+	 * 4. Styles matching those in stylesToModify are removed. (Use CSS attribute names, e.g., "background-color")
+	 * 5. Classes matching those in stylesToModify (prefixed with ".") are removed.
+	 * 6. stylesToModify is used to avoid duplicate property values from styleNode.
+	 * 7. Nodes with all styles and classes removed are deleted if they match styleNode, are in nodesToRemove, or if styleNode is null.
+	 * 8. Tags matching names in nodesToRemove are deleted regardless of their style and class.
+	 * 9. If strictRemove is true, nodes in nodesToRemove are only removed if all their styles and classes are removed.
+	 * 10. The function won't modify nodes if the parent has the same class and style values.
+	 * - However, if nodesToRemove has values, it will work and separate text nodes even if there's no node to replace.
 	 */
-	applyTextStyle(styleNode, styleArray, removeNodeArray, strictRemove) {
-		if (domUtils.getParentElement(this.selection.getNode(), domUtils.isNonEditable)) return;
+	applyInlineElement(styleNode, { stylesToModify, nodesToRemove, strictRemove } = {}) {
+		if (dom.query.getParentElement(this.selection.getNode(), dom.check.isNonEditable)) return;
 
 		this.selection._resetRangeToTextNode();
 		let range = this.selection.getRangeAndAddLine(this.selection.getRange(), null);
-		styleArray = styleArray?.length > 0 ? styleArray : false;
-		removeNodeArray = removeNodeArray?.length > 0 ? removeNodeArray : false;
+		stylesToModify = stylesToModify?.length > 0 ? stylesToModify : null;
+		nodesToRemove = nodesToRemove?.length > 0 ? nodesToRemove : null;
 
 		const isRemoveNode = !styleNode;
-		const isRemoveFormat = isRemoveNode && !removeNodeArray && !styleArray;
+		const isRemoveFormat = isRemoveNode && !nodesToRemove && !stylesToModify;
 		let startCon = range.startContainer;
 		let startOff = range.startOffset;
 		let endCon = range.endContainer;
 		let endOff = range.endOffset;
 
-		if ((isRemoveFormat && range.collapsed && this.isLine(startCon.parentNode) && this.isLine(endCon.parentNode)) || (startCon === endCon && startCon.nodeType === 1 && domUtils.isNonEditable(startCon))) {
+		if ((isRemoveFormat && range.collapsed && this.isLine(startCon.parentNode) && this.isLine(endCon.parentNode)) || (startCon === endCon && startCon.nodeType === 1 && dom.check.isNonEditable(startCon))) {
 			const format = startCon.parentNode;
 			if (
-				!domUtils.isListCell(format) ||
-				!env.getValues(format.style).some((k) => {
+				!dom.check.isListCell(format) ||
+				!converter.getValues(format.style).some((k) => {
 					return this._listKebab.includes(k);
 				})
 			)
@@ -999,7 +1050,7 @@ Format.prototype = {
 		}
 
 		if (range.collapsed && !isRemoveFormat) {
-			if (startCon.nodeType === 1 && !domUtils.isBreak(startCon) && !this.component.is(startCon)) {
+			if (startCon.nodeType === 1 && !dom.check.isBreak(startCon) && !this.component.is(startCon)) {
 				let afterNode = null;
 				const focusNode = startCon.childNodes[startOff];
 
@@ -1007,11 +1058,11 @@ Format.prototype = {
 					if (!focusNode.nextSibling) {
 						afterNode = null;
 					} else {
-						afterNode = domUtils.isBreak(focusNode) ? focusNode : focusNode.nextSibling;
+						afterNode = dom.check.isBreak(focusNode) ? focusNode : focusNode.nextSibling;
 					}
 				}
 
-				const zeroWidth = domUtils.createTextNode(unicode.zeroWidthSpace);
+				const zeroWidth = dom.utils.createTextNode(unicode.zeroWidthSpace);
 				startCon.insertBefore(zeroWidth, afterNode);
 				this.selection.setRange(zeroWidth, 1, zeroWidth, 1);
 
@@ -1033,37 +1084,40 @@ Format.prototype = {
 		}
 
 		if (isRemoveNode) {
-			styleNode = domUtils.createElement('DIV');
+			styleNode = dom.utils.createElement('DIV');
 		}
 
 		const wRegExp = RegExp;
 		const newNodeName = styleNode.nodeName;
 
 		/* checked same style property */
-		if (!isRemoveFormat && startCon === endCon && !removeNodeArray && styleNode) {
+		if (!isRemoveFormat && startCon === endCon && !nodesToRemove && styleNode) {
 			let sNode = startCon;
 			let checkCnt = 0;
 			const checkAttrs = [];
 
-			const checkStyles = styleNode.style;
+			const checkStyles = /** @type {HTMLElement} */ (styleNode).style;
 			for (let i = 0, len = checkStyles.length; i < len; i++) {
 				checkAttrs.push(checkStyles[i]);
 			}
 
-			const ckeckClasses = styleNode.classList;
+			const checkClassName = /** @type {HTMLElement} */ (styleNode).className;
+			const ckeckClasses = /** @type {HTMLElement} */ (styleNode).classList;
 			for (let i = 0, len = ckeckClasses.length; i < len; i++) {
 				checkAttrs.push('.' + ckeckClasses[i]);
 			}
 
 			if (checkAttrs.length > 0) {
-				while (!this.isLine(sNode) && !domUtils.isWysiwygFrame(sNode)) {
+				while (!this.isLine(sNode) && !dom.check.isWysiwygFrame(sNode)) {
 					for (let i = 0; i < checkAttrs.length; i++) {
 						if (sNode.nodeType === 1) {
 							const s = checkAttrs[i];
 							const classReg = /^\./.test(s) ? new wRegExp('\\s*' + s.replace(/^\./, '') + '(\\s+|$)', 'ig') : false;
+							const sNodeStyle = /** @type {HTMLElement} */ (sNode).style;
+							const sNodeClassName = /** @type {HTMLElement} */ (sNode).className;
 
-							const styleCheck = isRemoveNode ? !!sNode.style[s] : !!sNode.style[s] && !!styleNode.style[s] && sNode.style[s] === styleNode.style[s];
-							const classCheck = classReg === false ? false : isRemoveNode ? !!sNode.className.match(classReg) : !!sNode.className.match(classReg) && !!styleNode.className.match(classReg);
+							const styleCheck = isRemoveNode ? !!sNodeStyle[s] : !!sNodeStyle[s] && !!checkStyles[s] && sNodeStyle[s] === checkStyles[s];
+							const classCheck = classReg === false ? false : isRemoveNode ? !!sNodeClassName.match(classReg) : !!sNodeClassName.match(classReg) && !!checkClassName.match(classReg);
 							if (styleCheck || classCheck) {
 								checkCnt++;
 							}
@@ -1076,16 +1130,22 @@ Format.prototype = {
 			}
 		}
 
-		let start = {},
-			end = {};
-		let newNode,
-			styleRegExp = '',
-			classRegExp = '',
-			removeNodeRegExp = null;
+		let newNode;
+		/** @type {NodeStyleContainerType} */
+		let start = {};
+		/** @type {NodeStyleContainerType} */
+		let end = {};
+
+		/** @type {string|RegExp} */
+		let styleRegExp;
+		/** @type {string|RegExp} */
+		let classRegExp;
+		/** @type {string|RegExp} */
+		let removeNodeRegExp;
 
-		if (styleArray) {
-			for (let i = 0, len = styleArray.length, s; i < len; i++) {
-				s = styleArray[i];
+		if (stylesToModify) {
+			for (let i = 0, len = stylesToModify.length, s; i < len; i++) {
+				s = stylesToModify[i];
 				if (/^\./.test(s)) {
 					classRegExp += (classRegExp ? '|' : '\\s*(?:') + s.replace(/^\./, '');
 				} else {
@@ -1104,17 +1164,16 @@ Format.prototype = {
 			}
 		}
 
-		if (removeNodeArray) {
-			removeNodeRegExp = '^(?:' + removeNodeArray[0];
-			for (let i = 1; i < removeNodeArray.length; i++) {
-				removeNodeRegExp += '|' + removeNodeArray[i];
+		if (nodesToRemove) {
+			removeNodeRegExp = '^(?:' + nodesToRemove[0];
+			for (let i = 1; i < nodesToRemove.length; i++) {
+				removeNodeRegExp += '|' + nodesToRemove[i];
 			}
 			removeNodeRegExp += ')$';
 			removeNodeRegExp = new wRegExp(removeNodeRegExp, 'i');
 		}
 
 		/** validation check function*/
-		const wBoolean = Boolean;
 		const _removeCheck = {
 			v: false
 		};
@@ -1122,12 +1181,12 @@ Format.prototype = {
 			const vNode = checkNode.cloneNode(false);
 
 			// all path
-			if (vNode.nodeType === 3 || domUtils.isBreak(vNode)) return vNode;
+			if (vNode.nodeType === 3 || dom.check.isBreak(vNode)) return vNode;
 			// all remove
 			if (isRemoveFormat) return null;
 
 			// remove node check
-			const tagRemove = (!removeNodeRegExp && isRemoveNode) || removeNodeRegExp?.test(vNode.nodeName);
+			const tagRemove = (!removeNodeRegExp && isRemoveNode) || /** @type {RegExp} */ (removeNodeRegExp)?.test(vNode.nodeName);
 
 			// tag remove
 			if (tagRemove && !strictRemove) {
@@ -1160,7 +1219,7 @@ Format.prototype = {
 			}
 
 			// change
-			if (style || classes || vNode.nodeName !== newNodeName || wBoolean(styleRegExp) !== wBoolean(originStyle) || wBoolean(classRegExp) !== wBoolean(originClasses)) {
+			if (style || classes || vNode.nodeName !== newNodeName || Boolean(styleRegExp) !== Boolean(originStyle) || Boolean(classRegExp) !== Boolean(originClasses)) {
 				if (styleRegExp && originStyle.length > 0) vNode.style.cssText = style;
 				if (!vNode.style.cssText) {
 					vNode.removeAttribute('style');
@@ -1192,7 +1251,7 @@ Format.prototype = {
 		endOff = range.endOffset;
 
 		if (!this.getLine(startCon, null)) {
-			startCon = domUtils.getEdgeChild(
+			startCon = dom.query.getEdgeChild(
 				lineNodes[0],
 				function (current) {
 					return current.nodeType === 3;
@@ -1203,7 +1262,7 @@ Format.prototype = {
 		}
 
 		if (!this.getLine(endCon, null)) {
-			endCon = domUtils.getEdgeChild(
+			endCon = dom.query.getEdgeChild(
 				lineNodes[lineNodes.length - 1],
 				function (current) {
 					return current.nodeType === 3;
@@ -1224,10 +1283,10 @@ Format.prototype = {
 			(isRemoveNode &&
 				(function (inst, arr) {
 					for (let n = 0, len = arr.length; n < len; n++) {
-						if (inst._isNonSplitNode(arr[n]) || inst._sn_isSizeNode(arr[n])) return true;
+						if (inst._isNonSplitNode(arr[n])) return true;
 					}
 					return false;
-				})(this, removeNodeArray));
+				})(this, nodesToRemove));
 
 		const isSizeNode = isRemoveNode || this._sn_isSizeNode(newNode);
 		const _getMaintainedNode = this._sn_getMaintainedNode.bind(this, isRemoveAnchor, isSizeNode);
@@ -1235,7 +1294,7 @@ Format.prototype = {
 
 		// one line
 		if (oneLine) {
-			if (this._sn_resetCommonListCell(lineNodes[0], styleArray)) range = this.selection.setRange(startCon, startOff, endCon, endOff);
+			if (this._sn_resetCommonListCell(lineNodes[0], stylesToModify)) range = this.selection.setRange(startCon, startOff, endCon, endOff);
 
 			const newRange = this._setNode_oneLine(lineNodes[0], newNode, validation, startCon, startOff, endCon, endOff, isRemoveFormat, isRemoveNode, range.collapsed, _removeCheck, _getMaintainedNode, _isMaintainedNode);
 			start.container = newRange.startContainer;
@@ -1243,15 +1302,15 @@ Format.prototype = {
 			end.container = newRange.endContainer;
 			end.offset = newRange.endOffset;
 
-			if (start.container === end.container && domUtils.isZeroWith(start.container)) {
+			if (start.container === end.container && dom.check.isZeroWidth(start.container)) {
 				start.offset = end.offset = 1;
 			}
 			this._sn_setCommonListStyle(newRange.ancestor, null);
 		} else {
 			// multi line
 			let appliedCommonList = false;
-			if (endLength > 0 && this._sn_resetCommonListCell(lineNodes[endLength], styleArray)) appliedCommonList = true;
-			if (this._sn_resetCommonListCell(lineNodes[0], styleArray)) appliedCommonList = true;
+			if (endLength > 0 && this._sn_resetCommonListCell(lineNodes[endLength], stylesToModify)) appliedCommonList = true;
+			if (this._sn_resetCommonListCell(lineNodes[0], stylesToModify)) appliedCommonList = true;
 			if (appliedCommonList) this.selection.setRange(startCon, startOff, endCon, endOff);
 
 			// end
@@ -1262,7 +1321,7 @@ Format.prototype = {
 
 			// mid
 			for (let i = endLength - 1, newRange; i > 0; i--) {
-				this._sn_resetCommonListCell(lineNodes[i], styleArray);
+				this._sn_resetCommonListCell(lineNodes[i], stylesToModify);
 				newNode = styleNode.cloneNode(false);
 				newRange = this._setNode_middleLine(lineNodes[i], newNode, validation, isRemoveFormat, isRemoveNode, _removeCheck, end.container);
 				if (newRange.endContainer && newRange.ancestor.contains(newRange.endContainer)) {
@@ -1294,38 +1353,40 @@ Format.prototype = {
 		}
 
 		// set range
-		this.editor._offCurrentController();
+		this.ui._offCurrentController();
 		this.selection.setRange(start.container, start.offset, end.container, end.offset);
 		this.history.push(false);
 
-		return newNode;
+		return /** @type {HTMLElement} */ (newNode);
 	},
 
 	/**
+	 * @this {FormatThis}
 	 * @description Remove format of the currently selected text.
 	 */
-	removeTextStyle() {
-		this.applyTextStyle(null, null, null, null);
+	removeInlineElement() {
+		this.applyInlineElement(null, { stylesToModify: null, nodesToRemove: null, strictRemove: null });
 	},
 
 	/**
+	 * @this {FormatThis}
 	 * @description Check if the container and offset values are the edges of the "line"
-	 * @param {Node} container The node of the selection object. (range.startContainer..)
+	 * @param {Node} node The node of the selection object. (range.startContainer..)
 	 * @param {number} offset The offset of the selection object. (selection.getRange().startOffset...)
-	 * @param {string} dir Select check point - "front": Front edge, "end": End edge, undefined: Both edge.
-	 * @returns {boolean}
+	 * @param {"front"|"end"} dir Select check point - "front": Front edge, "end": End edge, undefined: Both edge.
+	 * @returns {node is HTMLElement}
 	 */
 	isEdgeLine(node, offset, dir) {
-		if (!domUtils.isEdgePoint(node, offset, dir)) return false;
+		if (!dom.check.isEdgePoint(node, offset, dir)) return false;
 
-		const result = [];
-		dir = dir === 'front' ? 'previousSibling' : 'nextSibling';
-		while (node && !this.isLine(node) && !domUtils.isWysiwygFrame(node)) {
-			if (!node[dir] || (domUtils.isBreak(node[dir]) && !node[dir][dir])) {
-				if (node.nodeType === 1) result.push(node.cloneNode(false));
+		let result = false;
+		const siblingType = dir === 'front' ? 'previousSibling' : 'nextSibling';
+		while (node && !this.isLine(node) && !dom.check.isWysiwygFrame(node)) {
+			if (!node[siblingType] || (dom.check.isBreak(node[siblingType]) && !node[siblingType][siblingType])) {
+				result = true;
 				node = node.parentNode;
 			} else {
-				return null;
+				return false;
 			}
 		}
 
@@ -1333,102 +1394,118 @@ Format.prototype = {
 	},
 
 	/**
+	 * @this {FormatThis}
 	 * @description It is judged whether it is a node related to the text style.
 	 * @param {Node|string} element The node to check
-	 * @returns {boolean}
+	 * @returns {element is HTMLElement}
 	 */
 	isTextStyleNode(element) {
 		return typeof element === 'string' ? this._textStyleTagsCheck.test(element) : element && element.nodeType === 1 && this._textStyleTagsCheck.test(element.nodeName);
 	},
 
 	/**
-	 * @description It is judged whether it is the format element (P, DIV, H[1-6], PRE, LI | class="__se__format__line_xxx")
-	 * Format element also contain "free format Element"
+	 * @this {FormatThis}
+	 * @description It is judged whether it is the "line" element.
+	 * - (P, DIV, H[1-6], PRE, LI | class="__se__format__line_xxx")
+	 * - "line" element also contain "brLine" element
 	 * @param {Node|string} element The node to check
-	 * @returns {boolean}
+	 * @returns {element is HTMLElement}
 	 */
 	isLine(element) {
+		if (this.isBlock(element)) return false;
 		return typeof element === 'string'
 			? this._formatLineCheck.test(element)
-			: element && element.nodeType === 1 && (this._formatLineCheck.test(element.nodeName) || domUtils.hasClass(element, '__se__format__line_.+|__se__format__br_line_.+')) && !this._nonFormat(element);
+			: element && element.nodeType === 1 && (this._formatLineCheck.test(element.nodeName) || dom.utils.hasClass(element, '__se__format__line_.+|__se__format__br_line_.+')) && !this._nonFormat(element);
 	},
 
 	/**
-	 * @description It is judged whether it is the only format element, not block (td, th, li)
-	 * Format element also contain "free format Element"
+	 * @this {FormatThis}
+	 * @description It is judged whether it is the only "line" element, not "brLine".
 	 * @param {Node|string} element The node to check
-	 * @returns {boolean}
+	 * @returns {element is HTMLElement}
 	 */
 	isLineOnly(element) {
-		return this._formatLineCheck.test(element) && !this._formatBlockCheck.test(element);
+		return this.isLine(element) && (this._brLineBreak || !this.isBrLine(element));
 	},
 
 	/**
-	 * @description It is judged whether it is the free format element. (PRE | class="__se__format__br_line_xxx")
-	 * Free format elements is included in the format element.
-	 * Free format elements's line break is "BR" tag.
-	 * ※ Entering the Enter key in the space on the last line ends "Free Format" and appends "Format".
+	 * @this {FormatThis}
+	 * @description It is judged whether it is the "brLine" element.
+	 * - (PRE | class="__se__format__br_line_xxx")
+	 * - "brLine" elements is included in the "line" element.
+	 * - "brLine" elements's line break is "BR" tag.
+	 * ※ Entering the Enter key in the space on the last line ends "brLine" and appends "line".
 	 * @param {Node|string} element The node to check
-	 * @returns {boolean}
+	 * @returns {element is HTMLElement}
 	 */
 	isBrLine(element) {
-		return typeof element === 'string'
-			? this._formatBrLineCheck.test(element)
-			: element && element.nodeType === 1 && (this._formatBrLineCheck.test(element.nodeName) || domUtils.hasClass(element, '__se__format__br_line_.+')) && !this._nonFormat(element);
+		return (
+			(this._brLineBreak && this.isLine(element)) ||
+			(typeof element === 'string'
+				? this._formatBrLineCheck.test(element)
+				: element && element.nodeType === 1 && (this._formatBrLineCheck.test(element.nodeName) || dom.utils.hasClass(element, '__se__format__br_line_.+')) && !this._nonFormat(element))
+		);
 	},
 
 	/**
-	 * @description It is judged whether it is the range format element. (BLOCKQUOTE, OL, UL, FIGCAPTION, TABLE, THEAD, TBODY, TR, TH, TD | class="__se__format__block_xxx")
-	 * Range format element is wrap the "format element" and "component"
+	 * @this {FormatThis}
+	 * @description It is judged whether it is the "block" element.
+	 * - (BLOCKQUOTE, OL, UL, FIGCAPTION, TABLE, THEAD, TBODY, TR, TH, TD | class="__se__format__block_xxx")
+	 * - "block" is wrap the "line" and "component"
 	 * @param {Node|string} element The node to check
-	 * @returns {boolean}
+	 * @returns {element is HTMLElement}
 	 */
 	isBlock(element) {
 		return typeof element === 'string'
 			? this._formatBlockCheck.test(element)
-			: element && element.nodeType === 1 && (this._formatBlockCheck.test(element.nodeName) || domUtils.hasClass(element, '__se__format__block_.+')) && !this._nonFormat(element);
+			: element && element.nodeType === 1 && (this._formatBlockCheck.test(element.nodeName) || dom.utils.hasClass(element, '__se__format__block_.+')) && !this._nonFormat(element);
 	},
 
 	/**
-	 * @description It is judged whether it is the closure range format element. (TH, TD | class="__se__format__block_closure_xxx")
-	 * Closure range format elements is included in the range format element.
-	 *  - Closure range format element is wrap the "format element" and "component"
-	 * ※ You cannot exit this format with the Enter key or Backspace key.
-	 * ※ Use it only in special cases. ([ex] format of table cells)
+	 * @this {FormatThis}
+	 * @description It is judged whether it is the "closureBlock" element.
+	 * - (TH, TD | class="__se__format__block_closure_xxx")
+	 * - "closureBlock" elements is included in the "block".
+	 * - "closureBlock" element is wrap the "line" and "component"
+	 * - ※ You cannot exit this format with the Enter key or Backspace key.
+	 * - ※ Use it only in special cases. ([ex] format of table cells)
 	 * @param {Node|string} element The node to check
-	 * @returns {boolean}
+	 * @returns {element is HTMLElement}
 	 */
 	isClosureBlock(element) {
 		return typeof element === 'string'
 			? this._formatClosureBlockCheck.test(element)
-			: element && element.nodeType === 1 && (this._formatClosureBlockCheck.test(element.nodeName) || domUtils.hasClass(element, '__se__format__block_closure_.+')) && !this._nonFormat(element);
+			: element && element.nodeType === 1 && (this._formatClosureBlockCheck.test(element.nodeName) || dom.utils.hasClass(element, '__se__format__block_closure_.+')) && !this._nonFormat(element);
 	},
 
 	/**
-	 * @description It is judged whether it is the closure free format element. (class="__se__format__br_line__closure_xxx")
-	 * Closure free format elements is included in the free format element.
-	 *  - Closure free format elements's line break is "BR" tag.
-	 * ※ You cannot exit this format with the Enter key or Backspace key.
-	 * ※ Use it only in special cases. ([ex] format of table cells)
+	 * @this {FormatThis}
+	 * @description It is judged whether it is the "closureBrLine" element.
+	 * - (class="__se__format__br_line__closure_xxx")
+	 * - "closureBrLine" elements is included in the "brLine".
+	 * - "closureBrLine" elements's line break is "BR" tag.
+	 * - ※ You cannot exit this format with the Enter key or Backspace key.
+	 * - ※ Use it only in special cases. ([ex] format of table cells)
 	 * @param {Node|string} element The node to check
-	 * @returns {boolean}
+	 * @returns {element is HTMLElement}
 	 */
 	isClosureBrLine(element) {
 		return typeof element === 'string'
 			? this._formatClosureBrLineCheck.test(element)
-			: element && element.nodeType === 1 && (this._formatClosureBrLineCheck.test(element.nodeName) || domUtils.hasClass(element, '__se__format__br_line__closure_.+')) && !this._nonFormat(element);
+			: element && element.nodeType === 1 && (this._formatClosureBrLineCheck.test(element.nodeName) || dom.utils.hasClass(element, '__se__format__br_line__closure_.+')) && !this._nonFormat(element);
 	},
 
 	/**
+	 * @this {FormatThis}
 	 * @description Returns a "line" array from selected range.
-	 * @param {Function|null} validation The validation function. (Replaces the default validation format.isLine(current))
-	 * @returns {Array}
+	 * @param {?(current: Node) => boolean=} validation The validation function. (Replaces the default validation format.isLine(current))
+	 * @returns {Array<HTMLElement>}
 	 */
 	getLines(validation) {
 		if (!this.selection._resetRangeToTextNode()) return [];
 		let range = this.selection.getRange();
 
-		if (domUtils.isWysiwygFrame(range.startContainer)) {
+		if (dom.check.isWysiwygFrame(range.startContainer)) {
 			const children = this.editor.frameContext.get('wysiwyg').children;
 			if (children.length === 0) return [];
 
@@ -1441,11 +1518,11 @@ Format.prototype = {
 		const commonCon = range.commonAncestorContainer;
 
 		// get line nodes
-		const lineNodes = domUtils.getListChildren(commonCon, (current) => {
+		const lineNodes = dom.query.getListChildren(commonCon, (current) => {
 			return validation ? validation(current) : this.isLine(current);
 		});
 
-		if (!domUtils.isWysiwygFrame(commonCon) && !this.isBlock(commonCon)) lineNodes.unshift(this.getLine(commonCon, null));
+		if (!dom.check.isWysiwygFrame(commonCon) && !this.isBlock(commonCon)) lineNodes.unshift(this.getLine(commonCon, null));
 		if (startCon === endCon || lineNodes.length === 1) return lineNodes;
 
 		const startLine = this.getLine(startCon, null);
@@ -1454,13 +1531,13 @@ Format.prototype = {
 		let endIdx = null;
 
 		const onlyTable = function (current) {
-			return domUtils.isTableElements(current) ? /^TABLE$/i.test(current.nodeName) : true;
+			return dom.check.isTableElements(current) ? /^TABLE$/i.test(current.nodeName) : true;
 		};
 
 		let startRangeEl = this.getBlock(startLine, onlyTable);
 		let endRangeEl = this.getBlock(endLine, onlyTable);
-		if (domUtils.isTableElements(startRangeEl) && domUtils.isListCell(startRangeEl.parentNode)) startRangeEl = startRangeEl.parentNode;
-		if (domUtils.isTableElements(endRangeEl) && domUtils.isListCell(endRangeEl.parentNode)) endRangeEl = endRangeEl.parentNode;
+		if (dom.check.isTableElements(startRangeEl) && dom.check.isListCell(startRangeEl.parentNode)) startRangeEl = startRangeEl.parentNode;
+		if (dom.check.isTableElements(endRangeEl) && dom.check.isListCell(endRangeEl.parentNode)) endRangeEl = endRangeEl.parentNode;
 
 		const sameRange = startRangeEl === endRangeEl;
 		for (let i = 0, len = lineNodes.length, line; i < len; i++) {
@@ -1484,18 +1561,19 @@ Format.prototype = {
 	},
 
 	/**
+	 * @this {FormatThis}
 	 * @description Get lines and components from the selected range. (P, DIV, H[1-6], OL, UL, TABLE..)
-	 * If some of the component are included in the selection, get the entire that component.
+	 * - If some of the component are included in the selection, get the entire that component.
 	 * @param {boolean} removeDuplicate If true, if there is a parent and child tag among the selected elements, the child tag is excluded.
-	 * @returns {Array}
+	 * @returns {Array<HTMLElement>}
 	 */
 	getLinesAndComponents(removeDuplicate) {
 		const commonCon = this.selection.getRange().commonAncestorContainer;
-		const myComponent = domUtils.getParentElement(commonCon, this.component.is.bind(this.component));
-		const selectedLines = domUtils.isTableElements(commonCon)
+		const myComponent = dom.query.getParentElement(commonCon, this.component.is.bind(this.component));
+		const selectedLines = dom.check.isTableElements(commonCon)
 			? this.getLines(null)
 			: this.getLines((current) => {
-					const component = domUtils.getParentElement(current, this.component.is.bind(this.component));
+					const component = dom.query.getParentElement(current, this.component.is.bind(this.component));
 					return (this.isLine(current) && (!component || component === myComponent)) || (this.component.is(current) && !this.getLine(current));
 			  });
 
@@ -1516,59 +1594,71 @@ Format.prototype = {
 	},
 
 	/**
+	 * @private
+	 * @this {FormatThis}
 	 * @description A function that distinguishes areas where "selection" should not be placed
-	 * @param {Element} element Element
+	 * @param {Node} element Element
 	 * @returns {boolean}
-	 * @private
 	 */
 	_isExcludeSelectionElement(element) {
 		return !/FIGCAPTION/i.test(element.nodeName) && (this.component.is(element) || /FIGURE/i.test(element.nodeName));
 	},
 
 	/**
+	 * @private
+	 * @this {FormatThis}
 	 * @description A function that distinguishes non-formatting HTML elements or tags from formatting ones.
-	 * @param {Element} element Element
+	 * @param {Node} element Element
 	 * @returns {boolean}
-	 * @private
 	 */
 	_nonFormat(element) {
-		return domUtils.isExcludeFormat(element) || this.component.is(element) || domUtils.isWysiwygFrame(element);
+		return dom.check.isExcludeFormat(element) || this.component.is(element) || dom.check.isWysiwygFrame(element);
 	},
 
 	/**
+	 * @private
+	 * @this {FormatThis}
 	 * @description Nodes that must remain undetached when changing text nodes (A, Label, Code, Span:font-size)
-	 * @param {Node|String} element Element to check
+	 * @param {Node|string} element Element to check
 	 * @returns {boolean}
-	 * @private
 	 */
 	_isNonSplitNode(element) {
-		return element && element.nodeType !== 3 && /^(a|label|code|summary)$/i.test(typeof element === 'string' ? element : element.nodeName);
+		if (!element) return false;
+		const checkRegExp = /^(a|label|code|summary)$/i;
+		if (typeof element === 'string') return checkRegExp.test(element);
+		return element.nodeType === 1 && checkRegExp.test(element.nodeName);
 	},
 
 	/**
+	 * @private
+	 * @this {FormatThis}
 	 * @description Nodes without text
-	 * @param {Node} element Element to check
+	 * @param {Node|string} element Element to check
 	 * @returns {boolean}
-	 * @private
 	 */
 	_notTextNode(element) {
-		return element && element.nodeType !== 3 && (this.component.is(element) || /^(br|input|select|canvas|img|iframe|audio|video)$/i.test(typeof element === 'string' ? element : element.nodeName));
+		if (!element) return false;
+		const checkRegExp = /^(br|input|select|canvas|img|iframe|audio|video)$/i;
+		if (typeof element === 'string') return checkRegExp.test(element);
+		return element.nodeType === 1 && (this.component.is(element) || checkRegExp.test(element.nodeName));
 	},
 
 	/**
+	 * @private
+	 * @this {FormatThis}
 	 * @description Nodes that need to be added without modification when changing text nodes
 	 * @param {Node} element Element to check
 	 * @returns {boolean}
-	 * @private
 	 */
 	_isIgnoreNodeChange(element) {
-		return element && element.nodeType !== 3 && (domUtils.isNonEditable(element) || !this.isTextStyleNode(element));
+		return element && element.nodeType === 1 && (dom.check.isNonEditable(element) || !this.isTextStyleNode(element) || this.component.is(element));
 	},
 
 	/**
-	 * @description Get current selected lines and selected node info.
-	 * @returns { lines: Array.<Element>, firstNode: Node,  lastNode: Node, firstPath: Array.<number>, lastPath: Array.<number>, startOffset: number, endOffset: number }
 	 * @private
+	 * @this {FormatThis}
+	 * @description Get current selected lines and selected node info.
+	 * @returns {{lines: Array<HTMLElement>, firstNode: Node,  lastNode: Node, firstPath: Array<number>, lastPath: Array<number>, startOffset: number, endOffset: number}}
 	 */
 	_lineWork() {
 		let range = this.selection.getRange();
@@ -1583,10 +1673,10 @@ Format.prototype = {
 		const startOffset = range.startOffset;
 		const endOffset = range.endOffset;
 
-		let first = selectedFormsts[0];
-		let last = selectedFormsts[selectedFormsts.length - 1];
-		const firstPath = domUtils.getNodePath(range.startContainer, first, null, null);
-		const lastPath = domUtils.getNodePath(range.endContainer, last, null, null);
+		let first = /** @type {Node} */ (selectedFormsts[0]);
+		let last = /** @type {Node} */ (selectedFormsts[selectedFormsts.length - 1]);
+		const firstPath = dom.query.getNodePath(range.startContainer, first, null);
+		const lastPath = dom.query.getNodePath(range.endContainer, last, null);
 
 		// remove selected list
 		const rlist = this.removeList(selectedFormsts, false);
@@ -1594,7 +1684,7 @@ Format.prototype = {
 		if (rlist.ec) last = rlist.ec;
 
 		// change format tag
-		this.selection.setRange(domUtils.getNodeFromPath(firstPath, first), startOffset, domUtils.getNodeFromPath(lastPath, last), endOffset);
+		this.selection.setRange(dom.query.getNodeFromPath(firstPath, first), startOffset, dom.query.getNodeFromPath(lastPath, last), endOffset);
 
 		return {
 			lines: this.getLinesAndComponents(false),
@@ -1607,6 +1697,22 @@ Format.prototype = {
 		};
 	},
 
+	/**
+	 * @private
+	 * @this {FormatThis}
+	 * @description Attaches a nested list structure by merging adjacent lists if applicable.
+	 * - Ensures that the nested list is placed correctly in the document structure.
+	 * @param {Element} originList The original list element where the nested list is inserted.
+	 * @param {Element} innerList The nested list element.
+	 * @param {Element} prev The previous sibling element.
+	 * @param {Element} next The next sibling element.
+	 * @param {{s: Array<number> | null, e: Array<number> | null, sl: Node | null, el: Node | null}} nodePath Object storing the start and end node paths.
+	 * - s : Start node path.
+	 * - e : End node path.
+	 * - sl : Start node's parent element.
+	 * - el : End node's parent element.
+	 * @returns {Node} The attached inner list.
+	 */
 	_attachNested(originList, innerList, prev, next, nodePath) {
 		let insertPrev = false;
 
@@ -1632,7 +1738,7 @@ Format.prototype = {
 		}
 
 		if (!insertPrev) {
-			if (domUtils.isListCell(prev)) {
+			if (dom.check.isListCell(prev)) {
 				originList = prev;
 				next = null;
 			}
@@ -1640,29 +1746,40 @@ Format.prototype = {
 			originList.insertBefore(innerList, next);
 
 			if (!nodePath.s) {
-				nodePath.s = domUtils.getNodePath(innerList.firstElementChild.firstChild, originList, null);
+				nodePath.s = dom.query.getNodePath(innerList.firstElementChild.firstChild, originList, null);
 				nodePath.sl = originList;
 			}
 
-			const slPath = originList.contains(nodePath.sl) ? domUtils.getNodePath(nodePath.sl, originList) : null;
-			nodePath.e = domUtils.getNodePath(innerList.lastElementChild.firstChild, originList, null);
+			const slPath = originList.contains(nodePath.sl) ? dom.query.getNodePath(nodePath.sl, originList) : null;
+			nodePath.e = dom.query.getNodePath(innerList.lastElementChild.firstChild, originList, null);
 			nodePath.el = originList;
 
 			this.nodeTransform.mergeSameTags(originList, [nodePath.s, nodePath.e, slPath], false);
 			this.nodeTransform.mergeNestedTags(originList);
-			if (slPath) nodePath.sl = domUtils.getNodeFromPath(slPath, originList);
+			if (slPath) nodePath.sl = dom.query.getNodeFromPath(slPath, originList);
 		}
 
 		return innerList;
 	},
 
+	/**
+	 * @private
+	 * @this {FormatThis}
+	 * @description Detaches a nested list structure by extracting list items from their parent list.
+	 * - Ensures proper restructuring of the list elements.
+	 * @param {Array<HTMLElement>} cells The list items to be detached.
+	 * @returns {{cc: Node, sc: Node, ec: Node}} An object containing reference nodes for repositioning.
+	 * - cc : The parent node of the first list item.
+	 * - sc : The first list item.
+	 * - ec : The last list item.
+	 */
 	_detachNested(cells) {
 		const first = cells[0];
 		const last = cells[cells.length - 1];
 		const next = last.nextElementSibling;
-		const originList = first.parentNode;
-		const sibling = originList.parentNode.nextElementSibling;
-		const parentNode = originList.parentNode.parentNode;
+		const originList = first.parentElement;
+		const sibling = originList.parentElement.nextElementSibling;
+		const parentNode = originList.parentElement.parentElement;
 
 		for (let c = 0, cLen = cells.length; c < cLen; c++) {
 			parentNode.insertBefore(cells[c], sibling);
@@ -1671,17 +1788,17 @@ Format.prototype = {
 		if (next && originList.children.length > 0) {
 			const newList = originList.cloneNode(false);
 			const children = originList.childNodes;
-			const index = domUtils.getPositionIndex(next);
+			const index = dom.query.getPositionIndex(next);
 			while (children[index]) {
 				newList.appendChild(children[index]);
 			}
 			last.appendChild(newList);
 		}
 
-		if (originList.children.length === 0) domUtils.removeItem(originList);
+		if (originList.children.length === 0) dom.utils.removeItem(originList);
 		this.nodeTransform.mergeSameTags(parentNode);
 
-		const edge = domUtils.getEdgeChildNodes(first, last);
+		const edge = dom.query.getEdgeChildNodes(first, last);
 
 		return {
 			cc: first.parentNode,
@@ -1691,19 +1808,20 @@ Format.prototype = {
 	},
 
 	/**
+	 * @private
+	 * @this {FormatThis}
 	 * @description Nest list cells or cancel nested cells.
 	 * @param selectedCells List cells.
 	 * @param nested Nested or cancel nested.
-	 * @private
 	 */
 	_applyNestedList(selectedCells, nested) {
 		selectedCells = !selectedCells
 			? this.getLines().filter(function (el) {
-					return domUtils.isListCell(el);
+					return dom.check.isListCell(el);
 			  })
 			: selectedCells;
 		const cellsLen = selectedCells.length;
-		if (cellsLen === 0 || (!nested && !domUtils.isListCell(selectedCells[0].previousElementSibling) && !domUtils.isListCell(selectedCells[cellsLen - 1].nextElementSibling))) {
+		if (cellsLen === 0 || (!nested && !dom.check.isListCell(selectedCells[0].previousElementSibling) && !dom.check.isListCell(selectedCells[cellsLen - 1].nextElementSibling))) {
 			return {
 				sc: selectedCells[0],
 				so: 0,
@@ -1717,7 +1835,7 @@ Format.prototype = {
 		let range = null;
 
 		if (nested) {
-			if (originList !== lastCell.parentNode && domUtils.isList(lastCell.parentNode.parentNode) && lastCell.nextElementSibling) {
+			if (originList !== lastCell.parentNode && dom.check.isList(lastCell.parentNode.parentNode) && lastCell.nextElementSibling) {
 				lastCell = lastCell.nextElementSibling;
 				while (lastCell) {
 					selectedCells.push(lastCell);
@@ -1726,7 +1844,7 @@ Format.prototype = {
 			}
 			range = this.applyList(originList.nodeName + ':' + originList.style.listStyleType, selectedCells, true);
 		} else {
-			let innerList = domUtils.createElement(originList.nodeName);
+			let innerList = dom.utils.createElement(originList.nodeName);
 			let prev = selectedCells[0].previousElementSibling;
 			let next = lastCell.nextElementSibling;
 			const nodePath = {
@@ -1741,7 +1859,7 @@ Format.prototype = {
 				if (c.parentNode !== originList) {
 					this._attachNested(originList, innerList, prev, next, nodePath);
 					originList = c.parentNode;
-					innerList = domUtils.createElement(originList.nodeName);
+					innerList = dom.utils.createElement(originList.nodeName);
 				}
 
 				prev = c.previousElementSibling;
@@ -1751,8 +1869,8 @@ Format.prototype = {
 
 			this._attachNested(originList, innerList, prev, next, nodePath);
 
-			const sc = domUtils.getNodeFromPath(nodePath.s, nodePath.sl);
-			const ec = domUtils.getNodeFromPath(nodePath.e, nodePath.el);
+			const sc = dom.query.getNodeFromPath(nodePath.s, nodePath.sl);
+			const ec = dom.query.getNodeFromPath(nodePath.e, nodePath.el);
 			range = {
 				sc: sc,
 				so: 0,
@@ -1765,12 +1883,13 @@ Format.prototype = {
 	},
 
 	/**
+	 * @private
+	 * @this {FormatThis}
 	 * @description Detach Nested all nested lists under the "baseNode".
-	 * Returns a list with nested removed.
-	 * @param {Node} baseNode Element on which to base.
+	 * - Returns a list with nested removed.
+	 * @param {HTMLElement} baseNode Element on which to base.
 	 * @param {boolean} all If true, it also detach all nested lists of a returned list.
-	 * @returns {Element}
-	 * @private
+	 * @returns {Node} Result element
 	 */
 	_removeNestedList(baseNode, all) {
 		const rNode = DeleteNestedList(baseNode);
@@ -1779,7 +1898,7 @@ Format.prototype = {
 		if (rNode) {
 			rangeElement = rNode.cloneNode(false);
 			cNodes = rNode.childNodes;
-			const index = domUtils.getPositionIndex(baseNode);
+			const index = dom.query.getPositionIndex(baseNode);
 			while (cNodes[index]) {
 				rangeElement.appendChild(cNodes[index]);
 			}
@@ -1789,13 +1908,13 @@ Format.prototype = {
 
 		let rChildren;
 		if (!all) {
-			const depth = domUtils.getNodeDepth(baseNode) + 2;
-			rChildren = domUtils.getListChildren(baseNode, (current) => {
-				return domUtils.isListCell(current) && !current.previousElementSibling && domUtils.getNodeDepth(current) === depth;
+			const depth = dom.query.getNodeDepth(baseNode) + 2;
+			rChildren = dom.query.getListChildren(baseNode, (current) => {
+				return dom.check.isListCell(current) && !current.previousElementSibling && dom.query.getNodeDepth(current) === depth;
 			});
 		} else {
-			rChildren = domUtils.getListChildren(rangeElement, (current) => {
-				return domUtils.isListCell(current) && !current.previousElementSibling;
+			rChildren = dom.query.getListChildren(rangeElement, (current) => {
+				return dom.check.isListCell(current) && !current.previousElementSibling;
 			});
 		}
 
@@ -1805,17 +1924,19 @@ Format.prototype = {
 
 		if (rNode) {
 			rNode.parentNode.insertBefore(rangeElement, rNode.nextSibling);
-			if (cNodes?.length === 0) domUtils.removeItem(rNode);
+			if (cNodes?.length === 0) dom.utils.removeItem(rNode);
 		}
 
 		return rangeElement === baseNode ? rangeElement.parentNode : rangeElement;
 	},
 
 	/**
+	 * @private
+	 * @this {FormatThis}
 	 * @description wraps text nodes of line selected text.
-	 * @param {Element} element The node of the line that contains the selected text node.
-	 * @param {Element} newInnerNode The dom that will wrap the selected text area
-	 * @param {Function} validation Check if the node should be stripped.
+	 * @param {Node} element The node of the line that contains the selected text node.
+	 * @param {Node} newInnerNode The dom that will wrap the selected text area
+	 * @param {(current: Node) => Node|null} validation Check if the node should be stripped.
 	 * @param {Node} startCon The startContainer property of the selection object.
 	 * @param {number} startOff The startOffset property of the selection object.
 	 * @param {Node} endCon The endContainer property of the selection object.
@@ -1824,24 +1945,23 @@ Format.prototype = {
 	 * @param {boolean} isRemoveNode "newInnerNode" is remove node?
 	 * @param {boolean} collapsed range.collapsed
 	 * @returns {{ancestor: *, startContainer: *, startOffset: *, endContainer: *, endOffset: *}}
-	 * @private
 	 */
 	_setNode_oneLine(element, newInnerNode, validation, startCon, startOff, endCon, endOff, isRemoveFormat, isRemoveNode, collapsed, _removeCheck, _getMaintainedNode, _isMaintainedNode) {
 		// not add tag
 		let parentCon = startCon.parentNode;
-		while (!parentCon.nextSibling && !parentCon.previousSibling && !this.isLine(parentCon.parentNode) && !domUtils.isWysiwygFrame(parentCon.parentNode)) {
+		while (!parentCon.nextSibling && !parentCon.previousSibling && !this.isLine(parentCon.parentNode) && !dom.check.isWysiwygFrame(parentCon.parentNode)) {
 			if (parentCon.nodeName === newInnerNode.nodeName) break;
 			parentCon = parentCon.parentNode;
 		}
 
 		if (!isRemoveNode && parentCon === endCon.parentNode && parentCon.nodeName === newInnerNode.nodeName) {
-			if (domUtils.isZeroWith(startCon.textContent.slice(0, startOff)) && domUtils.isZeroWith(endCon.textContent.slice(endOff))) {
+			if (dom.check.isZeroWidth(startCon.textContent.slice(0, startOff)) && dom.check.isZeroWidth(endCon.textContent.slice(endOff))) {
 				const children = parentCon.childNodes;
 				let sameTag = false;
 
 				for (let i = 0, len = children.length, c, s, e, z; i < len; i++) {
 					c = children[i];
-					z = !domUtils.isZeroWith(c);
+					z = !dom.check.isZeroWidth(c);
 					if (c === startCon) {
 						s = true;
 						continue;
@@ -1857,7 +1977,7 @@ Format.prototype = {
 				}
 
 				if (sameTag) {
-					domUtils.copyTagAttributes(parentCon, newInnerNode);
+					dom.utils.copyTagAttributes(parentCon, newInnerNode);
 
 					return {
 						ancestor: element,
@@ -1889,7 +2009,7 @@ Format.prototype = {
 		const wRegExp = RegExp;
 		function checkCss(vNode) {
 			const regExp = new wRegExp('(?:;|^|\\s)(?:' + cssText + 'null)\\s*:[^;]*\\s*(?:;|$)', 'ig');
-			let style = '';
+			let style = false;
 
 			if (regExp && vNode.style.cssText.length > 0) {
 				style = regExp.test(vNode.style.cssText);
@@ -1911,12 +2031,17 @@ Format.prototype = {
 				if (!startPass && child === startContainer) {
 					let line = pNode;
 					anchorNode = _getMaintainedNode(child);
-					const prevNode = domUtils.createTextNode(startContainer.nodeType === 1 ? '' : startContainer.substringData(0, startOffset));
-					const textNode = domUtils.createTextNode(
-						startContainer.nodeType === 1
-							? ''
-							: startContainer.substringData(startOffset, isSameNode ? (endOffset >= startOffset ? endOffset - startOffset : startContainer.data.length - startOffset) : startContainer.data.length - startOffset)
-					);
+
+					let _prevText = '';
+					let _nextText = '';
+					if (startContainer.nodeType === 3) {
+						const sText = /** @type {Text} */ (startContainer);
+						_prevText = sText.substringData(0, startOffset);
+						_nextText = sText.substringData(startOffset, isSameNode ? (endOffset >= startOffset ? endOffset - startOffset : sText.data.length - startOffset) : sText.data.length - startOffset);
+					}
+
+					const prevNode = dom.utils.createTextNode(_prevText);
+					const textNode = dom.utils.createTextNode(_nextText);
 
 					if (anchorNode) {
 						const a = _getMaintainedNode(ancestor);
@@ -1936,7 +2061,7 @@ Format.prototype = {
 						anchorNode = anchorNode.cloneNode(false);
 					}
 
-					if (!domUtils.isZeroWith(prevNode)) {
+					if (!dom.check.isZeroWidth(prevNode)) {
 						ancestor.appendChild(prevNode);
 					}
 
@@ -1944,16 +2069,16 @@ Format.prototype = {
 					if (prevAnchorNode) anchorNode = prevAnchorNode;
 					if (anchorNode) line = anchorNode;
 
-					newNode = child;
+					newNode = /** @type {HTMLElement} */ (child);
 					pCurrent = [];
 					cssText = '';
 					while (newNode !== line && newNode !== el && newNode !== null) {
 						vNode = _isMaintainedNode(newNode) ? null : validation(newNode);
 						if (vNode && newNode.nodeType === 1 && checkCss(newNode)) {
 							pCurrent.push(vNode);
-							cssText += newNode.style.cssText.substr(0, newNode.style.cssText.indexOf(':')) + '|';
+							cssText += newNode.style.cssText.substring(0, newNode.style.cssText.indexOf(':')) + '|';
 						}
-						newNode = newNode.parentNode;
+						newNode = newNode.parentElement;
 					}
 
 					const childNode = pCurrent.pop() || textNode;
@@ -1984,8 +2109,17 @@ Format.prototype = {
 				// endContainer
 				if (!endPass && child === endContainer) {
 					anchorNode = _getMaintainedNode(child);
-					const afterNode = domUtils.createTextNode(endContainer.nodeType === 1 ? '' : endContainer.substringData(endOffset, endContainer.length - endOffset));
-					const textNode = domUtils.createTextNode(isSameNode || endContainer.nodeType === 1 ? '' : endContainer.substringData(0, endOffset));
+
+					let _prevText = '';
+					let _nextText = '';
+					if (endContainer.nodeType === 3) {
+						const eText = /** @type {Text} */ (endContainer);
+						_prevText = eText.substringData(endOffset, eText.length - endOffset);
+						_nextText = isSameNode ? '' : eText.substringData(0, endOffset);
+					}
+
+					const afterNode = dom.utils.createTextNode(_prevText);
+					const textNode = dom.utils.createTextNode(_nextText);
 
 					if (anchorNode) {
 						anchorNode = anchorNode.cloneNode(false);
@@ -1995,8 +2129,8 @@ Format.prototype = {
 						nNodeArray.push(newInnerNode);
 					}
 
-					if (!domUtils.isZeroWith(afterNode)) {
-						newNode = child;
+					if (!dom.check.isZeroWidth(afterNode)) {
+						newNode = /** @type {HTMLElement} */ (child);
 						cssText = '';
 						pCurrent = [];
 						const anchors = [];
@@ -2004,9 +2138,9 @@ Format.prototype = {
 							if (newNode.nodeType === 1 && checkCss(newNode)) {
 								if (_isMaintainedNode(newNode)) anchors.push(newNode.cloneNode(false));
 								else pCurrent.push(newNode.cloneNode(false));
-								cssText += newNode.style.cssText.substr(0, newNode.style.cssText.indexOf(':')) + '|';
+								cssText += newNode.style.cssText.substring(0, newNode.style.cssText.indexOf(':')) + '|';
 							}
-							newNode = newNode.parentNode;
+							newNode = newNode.parentElement;
 						}
 						pCurrent = pCurrent.concat(anchors);
 
@@ -2028,16 +2162,16 @@ Format.prototype = {
 						}
 					}
 
-					newNode = child;
+					newNode = /** @type {HTMLElement} */ (child);
 					pCurrent = [];
 					cssText = '';
 					while (newNode !== pNode && newNode !== el && newNode !== null) {
 						vNode = _isMaintainedNode(newNode) ? null : validation(newNode);
 						if (vNode && newNode.nodeType === 1 && checkCss(newNode)) {
 							pCurrent.push(vNode);
-							cssText += newNode.style.cssText.substr(0, newNode.style.cssText.indexOf(':')) + '|';
+							cssText += newNode.style.cssText.substring(0, newNode.style.cssText.indexOf(':')) + '|';
 						}
-						newNode = newNode.parentNode;
+						newNode = newNode.parentElement;
 					}
 
 					const childNode = pCurrent.pop() || textNode;
@@ -2074,7 +2208,7 @@ Format.prototype = {
 
 				// other
 				if (startPass) {
-					if (child.nodeType === 1 && !domUtils.isBreak(child)) {
+					if (child.nodeType === 1 && !dom.check.isBreak(child)) {
 						if (inst._isIgnoreNodeChange(child)) {
 							pNode.appendChild(child.cloneNode(true));
 							if (!collapsed) {
@@ -2088,21 +2222,21 @@ Format.prototype = {
 						continue;
 					}
 
-					newNode = child;
+					newNode = /** @type {HTMLElement} */ (child);
 					pCurrent = [];
 					cssText = '';
 					const anchors = [];
 					while (newNode.parentNode !== null && newNode !== el && newNode !== newInnerNode) {
 						vNode = endPass ? newNode.cloneNode(false) : validation(newNode);
-						if (newNode.nodeType === 1 && !domUtils.isBreak(child) && vNode && checkCss(newNode)) {
+						if (newNode.nodeType === 1 && !dom.check.isBreak(child) && vNode && checkCss(newNode)) {
 							if (_isMaintainedNode(newNode)) {
 								if (!anchorNode) anchors.push(vNode);
 							} else {
 								pCurrent.push(vNode);
 							}
-							cssText += newNode.style.cssText.substr(0, newNode.style.cssText.indexOf(':')) + '|';
+							cssText += newNode.style.cssText.substring(0, newNode.style.cssText.indexOf(':')) + '|';
 						}
-						newNode = newNode.parentNode;
+						newNode = newNode.parentElement;
 					}
 					pCurrent = pCurrent.concat(anchors);
 
@@ -2114,7 +2248,7 @@ Format.prototype = {
 						appendNode = newNode;
 					}
 
-					if (_isMaintainedNode(newInnerNode.parentNode) && !_isMaintainedNode(childNode) && !domUtils.isZeroWith(newInnerNode)) {
+					if (_isMaintainedNode(newInnerNode.parentNode) && !_isMaintainedNode(childNode) && !dom.check.isZeroWidth(newInnerNode)) {
 						newInnerNode = newInnerNode.cloneNode(false);
 						pNode.appendChild(newInnerNode);
 						nNodeArray.push(newInnerNode);
@@ -2129,7 +2263,7 @@ Format.prototype = {
 						childNode.appendChild(newInnerNode);
 						pNode.appendChild(childNode);
 						nNodeArray.push(newInnerNode);
-						if (newInnerNode.children.length > 0) ancestor = newNode;
+						if (/** @type {HTMLElement} */ (newInnerNode).children.length > 0) ancestor = newNode;
 						else ancestor = newInnerNode;
 					} else if (childNode === child) {
 						if (!endPass) ancestor = newInnerNode;
@@ -2144,7 +2278,7 @@ Format.prototype = {
 
 					if (anchorNode && child.nodeType === 3) {
 						if (_getMaintainedNode(child)) {
-							const ancestorAnchorNode = domUtils.getParentElement(ancestor, (c) => {
+							const ancestorAnchorNode = dom.query.getParentElement(ancestor, (c) => {
 								return inst._isNonSplitNode(c.parentNode) || c.parentNode === pNode;
 							});
 							anchorNode.appendChild(ancestorAnchorNode);
@@ -2159,7 +2293,7 @@ Format.prototype = {
 
 				cloneNode = child.cloneNode(false);
 				ancestor.appendChild(cloneNode);
-				if (child.nodeType === 1 && !domUtils.isBreak(child)) coverNode = cloneNode;
+				if (child.nodeType === 1 && !dom.check.isBreak(child)) coverNode = cloneNode;
 
 				recursionFunc(child, coverNode);
 			}
@@ -2184,7 +2318,7 @@ Format.prototype = {
 				let textNode, textNode_s, textNode_e;
 
 				if (collapsed) {
-					textNode = domUtils.createTextNode(unicode.zeroWidthSpace);
+					textNode = dom.utils.createTextNode(unicode.zeroWidthSpace);
 					pNode.replaceChild(textNode, removeNode);
 				} else {
 					const rChildren = removeNode.childNodes;
@@ -2193,7 +2327,7 @@ Format.prototype = {
 						textNode_e = rChildren[0];
 						pNode.insertBefore(textNode_e, removeNode);
 					}
-					domUtils.removeItem(removeNode);
+					dom.utils.removeItem(removeNode);
 				}
 
 				if (i === 0) {
@@ -2227,8 +2361,8 @@ Format.prototype = {
 		// endContainer reset
 		const endConReset = isRemoveFormat || endContainer.textContent.length === 0;
 
-		if (!domUtils.isBreak(endContainer) && endContainer.textContent.length === 0) {
-			domUtils.removeItem(endContainer);
+		if (!dom.check.isBreak(endContainer) && endContainer.textContent.length === 0) {
+			dom.utils.removeItem(endContainer);
 			endContainer = startContainer;
 		}
 		endOffset = endConReset ? endContainer.textContent.length : endOffset;
@@ -2238,7 +2372,7 @@ Format.prototype = {
 			s: 0,
 			e: 0
 		};
-		const startPath = domUtils.getNodePath(startContainer, pNode, newStartOffset);
+		const startPath = dom.query.getNodePath(startContainer, pNode, newStartOffset);
 
 		const mergeEndCon = !endContainer.parentNode;
 		if (mergeEndCon) endContainer = startContainer;
@@ -2246,7 +2380,7 @@ Format.prototype = {
 			s: 0,
 			e: 0
 		};
-		const endPath = domUtils.getNodePath(endContainer, pNode, !mergeEndCon && !endConReset ? newEndOffset : null);
+		const endPath = dom.query.getNodePath(endContainer, pNode, !mergeEndCon && !endConReset ? newEndOffset : null);
 
 		startOffset += newStartOffset.s;
 		endOffset = collapsed ? startOffset : mergeEndCon ? startContainer.textContent.length : endConReset ? endOffset + newStartOffset.s : endOffset + newEndOffset.s;
@@ -2256,8 +2390,8 @@ Format.prototype = {
 
 		element.parentNode.replaceChild(pNode, element);
 
-		startContainer = domUtils.getNodeFromPath(startPath, pNode);
-		endContainer = domUtils.getNodeFromPath(endPath, pNode);
+		startContainer = dom.query.getNodeFromPath(startPath, pNode);
+		endContainer = dom.query.getNodeFromPath(endPath, pNode);
 
 		return {
 			ancestor: pNode,
@@ -2269,31 +2403,31 @@ Format.prototype = {
 	},
 
 	/**
+	 * @private
+	 * @this {FormatThis}
 	 * @description wraps first line selected text.
-	 * @param {Element} element The node of the line that contains the selected text node.
-	 * @param {Element} newInnerNode The dom that will wrap the selected text area
-	 * @param {Function} validation Check if the node should be stripped.
+	 * @param {Node} element The node of the line that contains the selected text node.
+	 * @param {Node} newInnerNode The dom that will wrap the selected text area
+	 * @param {(current: Node) => Node|null} validation Check if the node should be stripped.
 	 * @param {Node} startCon The startContainer property of the selection object.
 	 * @param {number} startOff The startOffset property of the selection object.
 	 * @param {boolean} isRemoveFormat Is the remove all formats command?
 	 * @param {boolean} isRemoveNode "newInnerNode" is remove node?
-	 * @returns {null|Node} If end container is renewed, returned renewed node
-	 * @returns {Object} { ancestor, container, offset, endContainer }
-	 * @private
+	 * @returns {NodeStyleContainerType} { ancestor, container, offset, endContainer }
 	 */
 	_setNode_startLine(element, newInnerNode, validation, startCon, startOff, isRemoveFormat, isRemoveNode, _removeCheck, _getMaintainedNode, _isMaintainedNode, _endContainer) {
 		// not add tag
 		let parentCon = startCon.parentNode;
-		while (!parentCon.nextSibling && !parentCon.previousSibling && !this.isLine(parentCon.parentNode) && !domUtils.isWysiwygFrame(parentCon.parentNode)) {
+		while (!parentCon.nextSibling && !parentCon.previousSibling && !this.isLine(parentCon.parentNode) && !dom.check.isWysiwygFrame(parentCon.parentNode)) {
 			if (parentCon.nodeName === newInnerNode.nodeName) break;
 			parentCon = parentCon.parentNode;
 		}
 
-		if (!isRemoveNode && parentCon.nodeName === newInnerNode.nodeName && !this.isLine(parentCon) && !parentCon.nextSibling && domUtils.isZeroWith(startCon.textContent.slice(0, startOff))) {
+		if (!isRemoveNode && parentCon.nodeName === newInnerNode.nodeName && !this.isLine(parentCon) && !parentCon.nextSibling && dom.check.isZeroWidth(startCon.textContent.slice(0, startOff))) {
 			let sameTag = false;
 			let s = startCon.previousSibling;
 			while (s) {
-				if (!domUtils.isZeroWith(s)) {
+				if (!dom.check.isZeroWidth(s)) {
 					sameTag = false;
 					break;
 				}
@@ -2301,7 +2435,7 @@ Format.prototype = {
 			}
 
 			if (sameTag) {
-				domUtils.copyTagAttributes(parentCon, newInnerNode);
+				dom.utils.copyTagAttributes(parentCon, newInnerNode);
 
 				return {
 					ancestor: element,
@@ -2328,11 +2462,11 @@ Format.prototype = {
 			const childNodes = current.childNodes;
 
 			for (let i = 0, len = childNodes.length, vNode, cloneChild; i < len; i++) {
-				const child = childNodes[i];
+				const child = /** @type {HTMLElement} */ (childNodes[i]);
 				if (!child) continue;
 				let coverNode = ancestor;
 
-				if (passNode && !domUtils.isBreak(child)) {
+				if (passNode && !dom.check.isBreak(child)) {
 					if (child.nodeType === 1) {
 						if (inst._isIgnoreNodeChange(child)) {
 							newInnerNode = newInnerNode.cloneNode(false);
@@ -2343,8 +2477,8 @@ Format.prototype = {
 
 							// end container
 							if (_endContainer && child.contains(_endContainer)) {
-								const endPath = domUtils.getNodePath(_endContainer, child);
-								_endContainer = domUtils.getNodeFromPath(endPath, cloneChild);
+								const endPath = dom.query.getNodePath(_endContainer, child);
+								_endContainer = dom.query.getNodeFromPath(endPath, cloneChild);
 							}
 						} else {
 							recursionFunc(child, child);
@@ -2402,7 +2536,7 @@ Format.prototype = {
 
 					if (anchorNode && child.nodeType === 3) {
 						if (_getMaintainedNode(child)) {
-							const ancestorAnchorNode = domUtils.getParentElement(ancestor, (c) => {
+							const ancestorAnchorNode = dom.query.getParentElement(ancestor, (c) => {
 								return inst._isNonSplitNode(c.parentNode) || c.parentNode === pNode;
 							});
 							anchorNode.appendChild(ancestorAnchorNode);
@@ -2419,8 +2553,17 @@ Format.prototype = {
 				if (!passNode && child === container) {
 					let line = pNode;
 					anchorNode = _getMaintainedNode(child);
-					const prevNode = domUtils.createTextNode(container.nodeType === 1 ? '' : container.substringData(0, offset));
-					const textNode = domUtils.createTextNode(container.nodeType === 1 ? '' : container.substringData(offset, container.length - offset));
+
+					let _prevText = '';
+					let _nextText = '';
+					if (container.nodeType === 3) {
+						const cText = /** @type {Text} */ (container);
+						_prevText = cText.substringData(0, offset);
+						_nextText = cText.substringData(offset, cText.length - offset);
+					}
+
+					const prevNode = dom.utils.createTextNode(_prevText);
+					const textNode = dom.utils.createTextNode(_nextText);
 
 					if (anchorNode) {
 						const a = _getMaintainedNode(ancestor);
@@ -2440,7 +2583,7 @@ Format.prototype = {
 						anchorNode = anchorNode.cloneNode(false);
 					}
 
-					if (!domUtils.isZeroWith(prevNode)) {
+					if (!dom.check.isZeroWidth(prevNode)) {
 						ancestor.appendChild(prevNode);
 					}
 
@@ -2473,7 +2616,7 @@ Format.prototype = {
 						ancestor = newInnerNode;
 					}
 
-					if (domUtils.isBreak(child)) newInnerNode.appendChild(child.cloneNode(false));
+					if (dom.check.isBreak(child)) newInnerNode.appendChild(child.cloneNode(false));
 					line.appendChild(newInnerNode);
 
 					container = textNode;
@@ -2487,7 +2630,7 @@ Format.prototype = {
 				vNode = !passNode ? child.cloneNode(false) : validation(child);
 				if (vNode) {
 					ancestor.appendChild(vNode);
-					if (child.nodeType === 1 && !domUtils.isBreak(child)) coverNode = vNode;
+					if (child.nodeType === 1 && !dom.check.isBreak(child)) coverNode = vNode;
 				}
 
 				recursionFunc(child, coverNode);
@@ -2515,7 +2658,7 @@ Format.prototype = {
 				while (rChildren[0]) {
 					pNode.insertBefore(rChildren[0], removeNode);
 				}
-				domUtils.removeItem(removeNode);
+				dom.utils.removeItem(removeNode);
 
 				if (i === 0) container = textNode;
 			}
@@ -2530,13 +2673,13 @@ Format.prototype = {
 			if (element.childNodes) {
 				container = element.childNodes[0];
 			} else {
-				container = domUtils.createTextNode(unicode.zeroWidthSpace);
+				container = dom.utils.createTextNode(unicode.zeroWidthSpace);
 				element.appendChild(container);
 			}
 		} else {
 			this.nodeTransform.removeEmptyNode(pNode, newInnerNode, false);
 
-			if (domUtils.isZeroWith(pNode.textContent)) {
+			if (dom.check.isZeroWidth(pNode.textContent)) {
 				container = pNode.firstChild;
 				offset = 0;
 			}
@@ -2546,7 +2689,7 @@ Format.prototype = {
 				s: 0,
 				e: 0
 			};
-			const path = domUtils.getNodePath(container, pNode, offsets);
+			const path = dom.query.getNodePath(container, pNode, offsets);
 			offset += offsets.s;
 
 			// tag merge
@@ -2554,7 +2697,7 @@ Format.prototype = {
 
 			element.parentNode.replaceChild(pNode, element);
 
-			container = domUtils.getNodeFromPath(path, pNode);
+			container = dom.query.getNodeFromPath(path, pNode);
 			offset += newOffsets[0];
 		}
 
@@ -2567,38 +2710,39 @@ Format.prototype = {
 	},
 
 	/**
+	 * @private
+	 * @this {FormatThis}
 	 * @description wraps mid lines selected text.
-	 * @param {Element} element The node of the line that contains the selected text node.
-	 * @param {Element} newInnerNode The dom that will wrap the selected text area
-	 * @param {Function} validation Check if the node should be stripped.
+	 * @param {HTMLElement} element The node of the line that contains the selected text node.
+	 * @param {Node} newInnerNode The dom that will wrap the selected text area
+	 * @param {(current: Node) => Node|null} validation Check if the node should be stripped.
 	 * @param {boolean} isRemoveFormat Is the remove all formats command?
 	 * @param {boolean} isRemoveNode "newInnerNode" is remove node?
 	 * @param {Node} _endContainer Offset node of last line already modified (end.container)
-	 * @returns {Object} { ancestor, endContainer: "If end container is renewed, returned renewed node" }
-	 * @private
+	 * @returns {NodeStyleContainerType} { ancestor, endContainer: "If end container is renewed, returned renewed node" }
 	 */
 	_setNode_middleLine(element, newInnerNode, validation, isRemoveFormat, isRemoveNode, _removeCheck, _endContainer) {
 		// not add tag
 		if (!isRemoveNode) {
 			// end container path
 			let endPath = null;
-			if (_endContainer && element.contains(_endContainer)) endPath = domUtils.getNodePath(_endContainer, element);
+			if (_endContainer && element.contains(_endContainer)) endPath = dom.query.getNodePath(_endContainer, element);
 
 			const tempNode = element.cloneNode(true);
-			const newNodeName = newInnerNode.nodeName;
-			const newCssText = newInnerNode.style.cssText;
-			const newClass = newInnerNode.className;
+			const newNodeName = /** @type {HTMLElement} */ (newInnerNode).nodeName;
+			const newCssText = /** @type {HTMLElement} */ (newInnerNode).style.cssText;
+			const newClass = /** @type {HTMLElement} */ (newInnerNode).className;
 
 			let children = tempNode.childNodes;
 			let i = 0,
 				len = children.length;
 			for (let child; i < len; i++) {
-				child = children[i];
+				child = /** @type {HTMLElement} */ (children[i]);
 				if (child.nodeType === 3) break;
 				if (child.nodeName === newNodeName) {
 					child.style.cssText += newCssText;
-					domUtils.addClass(child, newClass);
-				} else if (!domUtils.isBreak(child) && this._isIgnoreNodeChange(child)) {
+					dom.utils.addClass(child, newClass);
+				} else if (!dom.check.isBreak(child) && this._isIgnoreNodeChange(child)) {
 					continue;
 				} else if (len === 1) {
 					children = child.childNodes;
@@ -2611,10 +2755,10 @@ Format.prototype = {
 			}
 
 			if (len > 0 && i === len) {
-				element.innerHTML = tempNode.innerHTML;
+				element.innerHTML = /** @type {HTMLElement} */ (tempNode).innerHTML;
 				return {
 					ancestor: element,
-					endContainer: endPath ? domUtils.getNodeFromPath(endPath, element) : null
+					endContainer: endPath ? dom.query.getNodeFromPath(endPath, element) : null
 				};
 			}
 		}
@@ -2631,11 +2775,11 @@ Format.prototype = {
 			const childNodes = current.childNodes;
 
 			for (let i = 0, len = childNodes.length, vNode, cloneChild; i < len; i++) {
-				const child = childNodes[i];
+				const child = /** @type {HTMLElement} */ (childNodes[i]);
 				if (!child) continue;
 				let coverNode = ancestor;
 
-				if (!domUtils.isBreak(child) && inst._isIgnoreNodeChange(child)) {
+				if (!dom.check.isBreak(child) && inst._isIgnoreNodeChange(child)) {
 					if (newInnerNode.childNodes.length > 0) {
 						pNode.appendChild(newInnerNode);
 						newInnerNode = newInnerNode.cloneNode(false);
@@ -2649,8 +2793,8 @@ Format.prototype = {
 
 					// end container
 					if (_endContainer && child.contains(_endContainer)) {
-						const endPath = domUtils.getNodePath(_endContainer, child);
-						_endContainer = domUtils.getNodeFromPath(endPath, cloneChild);
+						const endPath = dom.query.getNodePath(_endContainer, child);
+						_endContainer = dom.query.getNodeFromPath(endPath, cloneChild);
 					}
 
 					continue;
@@ -2663,7 +2807,7 @@ Format.prototype = {
 					}
 				}
 
-				if (!domUtils.isBreak(child)) recursionFunc(child, coverNode);
+				if (!dom.check.isBreak(child)) recursionFunc(child, coverNode);
 			}
 		})(element, newInnerNode);
 
@@ -2684,7 +2828,7 @@ Format.prototype = {
 				while (rChildren[0]) {
 					pNode.insertBefore(rChildren[0], removeNode);
 				}
-				domUtils.removeItem(removeNode);
+				dom.utils.removeItem(removeNode);
 			}
 		} else if (isRemoveNode) {
 			newInnerNode = newInnerNode.firstChild;
@@ -2705,30 +2849,31 @@ Format.prototype = {
 	},
 
 	/**
+	 * @private
+	 * @this {FormatThis}
 	 * @description wraps last line selected text.
-	 * @param {Element} element The node of the line that contains the selected text node.
-	 * @param {Element} newInnerNode The dom that will wrap the selected text area
-	 * @param {Function} validation Check if the node should be stripped.
+	 * @param {Node} element The node of the line that contains the selected text node.
+	 * @param {Node} newInnerNode The dom that will wrap the selected text area
+	 * @param {(current: Node) => Node|null} validation Check if the node should be stripped.
 	 * @param {Node} endCon The endContainer property of the selection object.
 	 * @param {number} endOff The endOffset property of the selection object.
 	 * @param {boolean} isRemoveFormat Is the remove all formats command?
 	 * @param {boolean} isRemoveNode "newInnerNode" is remove node?
-	 * @returns {Object} { ancestor, container, offset }
-	 * @private
+	 * @returns {NodeStyleContainerType} { ancestor, container, offset }
 	 */
 	_setNode_endLine(element, newInnerNode, validation, endCon, endOff, isRemoveFormat, isRemoveNode, _removeCheck, _getMaintainedNode, _isMaintainedNode) {
 		// not add tag
 		let parentCon = endCon.parentNode;
-		while (!parentCon.nextSibling && !parentCon.previousSibling && !this.isLine(parentCon.parentNode) && !domUtils.isWysiwygFrame(parentCon.parentNode)) {
+		while (!parentCon.nextSibling && !parentCon.previousSibling && !this.isLine(parentCon.parentNode) && !dom.check.isWysiwygFrame(parentCon.parentNode)) {
 			if (parentCon.nodeName === newInnerNode.nodeName) break;
 			parentCon = parentCon.parentNode;
 		}
 
-		if (!isRemoveNode && parentCon.nodeName === newInnerNode.nodeName && !this.isLine(parentCon) && !parentCon.previousSibling && domUtils.isZeroWith(endCon.textContent.slice(endOff))) {
+		if (!isRemoveNode && parentCon.nodeName === newInnerNode.nodeName && !this.isLine(parentCon) && !parentCon.previousSibling && dom.check.isZeroWidth(endCon.textContent.slice(endOff))) {
 			let sameTag = false;
 			let e = endCon.nextSibling;
 			while (e) {
-				if (!domUtils.isZeroWith(e)) {
+				if (!dom.check.isZeroWidth(e)) {
 					sameTag = false;
 					break;
 				}
@@ -2736,7 +2881,7 @@ Format.prototype = {
 			}
 
 			if (sameTag) {
-				domUtils.copyTagAttributes(parentCon, newInnerNode);
+				dom.utils.copyTagAttributes(parentCon, newInnerNode);
 
 				return {
 					ancestor: element,
@@ -2767,7 +2912,7 @@ Format.prototype = {
 				if (!child) continue;
 				let coverNode = ancestor;
 
-				if (passNode && !domUtils.isBreak(child)) {
+				if (passNode && !dom.check.isBreak(child)) {
 					if (child.nodeType === 1) {
 						if (inst._isIgnoreNodeChange(child)) {
 							newInnerNode = newInnerNode.cloneNode(false);
@@ -2821,7 +2966,7 @@ Format.prototype = {
 						childNode.appendChild(newInnerNode);
 						pNode.insertBefore(childNode, pNode.firstChild);
 						nNodeArray.push(newInnerNode);
-						if (newInnerNode.children.length > 0) ancestor = newNode;
+						if (/** @type {HTMLElement} */ (newInnerNode).children.length > 0) ancestor = newNode;
 						else ancestor = newInnerNode;
 					} else if (isTopNode) {
 						newInnerNode.insertBefore(childNode, newInnerNode.firstChild);
@@ -2832,7 +2977,7 @@ Format.prototype = {
 
 					if (anchorNode && child.nodeType === 3) {
 						if (_getMaintainedNode(child)) {
-							const ancestorAnchorNode = domUtils.getParentElement(ancestor, (c) => {
+							const ancestorAnchorNode = dom.query.getParentElement(ancestor, (c) => {
 								return inst._isNonSplitNode(c.parentNode) || c.parentNode === pNode;
 							});
 							anchorNode.appendChild(ancestorAnchorNode);
@@ -2848,8 +2993,17 @@ Format.prototype = {
 				// endContainer
 				if (!passNode && child === container) {
 					anchorNode = _getMaintainedNode(child);
-					const afterNode = domUtils.createTextNode(container.nodeType === 1 ? '' : container.substringData(offset, container.length - offset));
-					const textNode = domUtils.createTextNode(container.nodeType === 1 ? '' : container.substringData(0, offset));
+
+					let _prevText = '';
+					let _nextText = '';
+					if (container.nodeType === 3) {
+						const cText = /** @type {Text} */ (container);
+						_prevText = cText.substringData(offset, cText.length - offset);
+						_nextText = cText.substringData(0, offset);
+					}
+
+					const afterNode = dom.utils.createTextNode(_prevText);
+					const textNode = dom.utils.createTextNode(_nextText);
 
 					if (anchorNode) {
 						anchorNode = anchorNode.cloneNode(false);
@@ -2874,7 +3028,7 @@ Format.prototype = {
 						nNodeArray.push(newInnerNode);
 					}
 
-					if (!domUtils.isZeroWith(afterNode)) {
+					if (!dom.check.isZeroWidth(afterNode)) {
 						ancestor.insertBefore(afterNode, ancestor.firstChild);
 					}
 
@@ -2903,7 +3057,7 @@ Format.prototype = {
 						ancestor = newInnerNode;
 					}
 
-					if (domUtils.isBreak(child)) newInnerNode.appendChild(child.cloneNode(false));
+					if (dom.check.isBreak(child)) newInnerNode.appendChild(child.cloneNode(false));
 
 					if (anchorNode) {
 						anchorNode.insertBefore(newInnerNode, anchorNode.firstChild);
@@ -2924,7 +3078,7 @@ Format.prototype = {
 				vNode = !passNode ? child.cloneNode(false) : validation(child);
 				if (vNode) {
 					ancestor.insertBefore(vNode, ancestor.firstChild);
-					if (child.nodeType === 1 && !domUtils.isBreak(child)) coverNode = vNode;
+					if (child.nodeType === 1 && !dom.check.isBreak(child)) coverNode = vNode;
 				}
 
 				recursionFunc(child, coverNode);
@@ -2952,7 +3106,7 @@ Format.prototype = {
 					textNode = rChildren[0];
 					pNode.insertBefore(textNode, removeNode);
 				}
-				domUtils.removeItem(removeNode);
+				dom.utils.removeItem(removeNode);
 
 				if (i === nNodeArray.length - 1) {
 					container = textNode;
@@ -2970,7 +3124,7 @@ Format.prototype = {
 			if (element.childNodes) {
 				container = element.childNodes[0];
 			} else {
-				container = domUtils.createTextNode(unicode.zeroWidthSpace);
+				container = dom.utils.createTextNode(unicode.zeroWidthSpace);
 				element.appendChild(container);
 			}
 		} else {
@@ -2985,10 +3139,10 @@ Format.prototype = {
 
 			this.nodeTransform.removeEmptyNode(pNode, newInnerNode, false);
 
-			if (domUtils.isZeroWith(pNode.textContent)) {
+			if (dom.check.isZeroWidth(pNode.textContent)) {
 				container = pNode.firstChild;
 				offset = container.textContent.length;
-			} else if (domUtils.isZeroWith(container)) {
+			} else if (dom.check.isZeroWidth(container)) {
 				container = newInnerNode;
 				offset = 1;
 			}
@@ -2998,7 +3152,7 @@ Format.prototype = {
 				s: 0,
 				e: 0
 			};
-			const path = domUtils.getNodePath(container, pNode, offsets);
+			const path = dom.query.getNodePath(container, pNode, offsets);
 			offset += offsets.s;
 
 			// tag merge
@@ -3006,7 +3160,7 @@ Format.prototype = {
 
 			element.parentNode.replaceChild(pNode, element);
 
-			container = domUtils.getNodeFromPath(path, pNode);
+			container = dom.query.getNodeFromPath(path, pNode);
 			offset += newOffsets[0];
 		}
 
@@ -3018,57 +3172,59 @@ Format.prototype = {
 	},
 
 	/**
+	 * @private
+	 * @this {FormatThis}
 	 * @description Node with font-size style
 	 * @param {Node} element Element to check
 	 * @returns {boolean}
-	 * @private
 	 */
 	_sn_isSizeNode(element) {
-		return element && typeof element !== 'string' && element.nodeType !== 3 && this.isTextStyleNode(element) && element.style.fontSize;
+		return element && typeof element !== 'string' && element.nodeType !== 3 && this.isTextStyleNode(element) && !!element.style.fontSize;
 	},
 
 	/**
-	 * @description Return the parent maintained tag. (bind and use a util object)
-	 * @param {Element} element Element
-	 * @returns {Element}
 	 * @private
+	 * @this {FormatThis}
+	 * @description Return the parent maintained tag. (bind and use a util object)
+	 * @param {boolean} _isRemove is remove anchor
+	 * @param {boolean} _isSizeNode is size span node
+	 * @param {Node} element Element
+	 * @returns {Node|null}
 	 */
 	_sn_getMaintainedNode(_isRemove, _isSizeNode, element) {
 		if (!element || _isRemove) return null;
-		return domUtils.getParentElement(element, this._isNonSplitNode) || (!_isSizeNode ? domUtils.getParentElement(element, this._sn_isSizeNode.bind(this)) : null);
+		return dom.query.getParentElement(element, this._isNonSplitNode.bind(this)) || (!_isSizeNode ? dom.query.getParentElement(element, this._sn_isSizeNode.bind(this)) : null);
 	},
 
 	/**
-	 * @description Check if element is a tag that should be persisted. (bind and use a util object)
-	 * @param {Element} element Element
-	 * @returns {Element}
 	 * @private
+	 * @this {FormatThis}
+	 * @description Check if element is a tag that should be persisted. (bind and use a util object)
+	 * @param {boolean} _isRemove is remove anchor
+	 * @param {boolean} _isSizeNode is size span node
+	 * @param {Node} element Element
+	 * @returns {boolean}
 	 */
 	_sn_isMaintainedNode(_isRemove, _isSizeNode, element) {
 		if (!element || _isRemove || element.nodeType !== 1) return false;
 		const anchor = this._isNonSplitNode(element);
-		return domUtils.getParentElement(element, this._isNonSplitNode) ? anchor : anchor || (!_isSizeNode ? this._sn_isSizeNode(element) : false);
+		return dom.query.getParentElement(element, this._isNonSplitNode.bind(this)) ? anchor : anchor || (!_isSizeNode ? this._sn_isSizeNode(element) : false);
 	},
 
 	/**
-	 * @description If certain styles are applied to all child nodes of the list cell, the style of the list cell is also changed. (bold, color, size)
-	 * @param {Element} el List cell element. <li>
-	 * @param {Element|null} child Variable for recursive call. ("null" on the first call)
 	 * @private
+	 * @this {FormatThis}
+	 * @description If certain styles are applied to all child nodes of the list cell, the style of the list cell is also changed. (bold, color, size)
+	 * @param {Node} el List cell element. <li>
+	 * @param {?Node} child Variable for recursive call. ("null" on the first call)
 	 */
 	_sn_setCommonListStyle(el, child) {
-		if (!domUtils.isListCell(el)) return;
-
-		const children = domUtils.getArrayItem(
-			(child || el).childNodes,
-			function (current) {
-				return !domUtils.isBreak(current);
-			},
-			true
-		);
+		if (!dom.check.isListCell(el)) return;
+
+		const children = dom.utils.arrayFilter((child || el).childNodes, (current) => !dom.check.isBreak(current));
 		child = children[0];
 
-		if (!child || children.length > 1 || child.nodeType !== 1) return;
+		if (!dom.check.isElement(child) || children.length > 1) return;
 
 		// set cell style---
 		const childStyle = child.style;
@@ -3081,7 +3237,7 @@ Format.prototype = {
 		if (this.options.get('_defaultStyleTagMap')[nodeName] === this.options.get('_defaultTagCommand').italic.toLowerCase()) elStyle.fontStyle = 'italic';
 
 		// styles
-		const cKeys = env.getValues(childStyle);
+		const cKeys = converter.getValues(childStyle);
 		if (cKeys.length > 0) {
 			for (let i = 0, len = this._listCamel.length; i < len; i++) {
 				if (cKeys.includes(this._listKebab[i])) {
@@ -3103,32 +3259,27 @@ Format.prototype = {
 			while (ch.length > 0) {
 				p.insertBefore(ch[0], n);
 			}
-			domUtils.removeItem(child);
+			dom.utils.removeItem(child);
 		}
 	},
 
 	/**
+	 * @private
+	 * @this {FormatThis}
 	 * @description Watch the applied text nodes and adjust the common styles of the list.
-	 * @param {Element} el "LI" element
+	 * @param {Node} el "LI" element
 	 * @param {Array|null} styleArray Refer style array
-	 * @private
 	 */
 	_sn_resetCommonListCell(el, styleArray) {
-		if (!domUtils.isListCell(el)) return;
+		if (!dom.check.isListCell(el)) return;
 		if (!styleArray) styleArray = this._listKebab;
 
-		const children = domUtils.getArrayItem(
-			el.childNodes,
-			function (current) {
-				return !domUtils.isBreak(current);
-			},
-			true
-		);
+		const children = dom.utils.arrayFilter(el.childNodes, (current) => !dom.check.isBreak(current));
 		const elStyles = el.style;
 
 		const ec = [],
 			ek = [],
-			elKeys = env.getValues(elStyles);
+			elKeys = converter.getValues(elStyles);
 		for (let i = 0, len = this._listKebab.length; i < len; i++) {
 			if (elKeys.includes(this._listKebab[i]) && styleArray.includes(this._listKebab[i])) {
 				ec.push(this._listCamel[i]);
@@ -3139,7 +3290,7 @@ Format.prototype = {
 		if (!ec.length) return;
 
 		// reset cell style---
-		const refer = domUtils.createElement('SPAN');
+		const refer = dom.utils.createElement('SPAN');
 		for (let i = 0, len = ec.length; i < len; i++) {
 			refer.style[ec[i]] = elStyles[ek[i]];
 			elStyles.removeProperty(ek[i]);
@@ -3149,10 +3300,10 @@ Format.prototype = {
 		let r = null,
 			appliedEl = false;
 		for (let i = 0, len = children.length, c, s; i < len; i++) {
-			c = children[i];
+			c = /** @type {HTMLElement} */ (children[i]);
 			if (this.options.get('_defaultStyleTagMap')[c.nodeName.toLowerCase()]) continue;
 
-			s = env.getValues(c.style);
+			s = converter.getValues(c.style);
 			if (
 				s.length === 0 ||
 				(ec.some(function (k) {
@@ -3186,48 +3337,60 @@ Format.prototype = {
 	constructor: Format
 };
 
+/**
+ * @private
+ * @param {Node} baseNode Node
+ */
 function DeleteNestedList(baseNode) {
 	const baseParent = baseNode.parentNode;
-	let sibling = baseParent;
-	let parent = sibling.parentNode;
+	let parent = baseParent.parentNode;
+	let siblingNode = /** @type {*} */ (baseParent);
 	let liSibling, liParent, child, index, c;
 
-	while (domUtils.isListCell(parent)) {
-		index = domUtils.getPositionIndex(baseNode);
+	while (dom.check.isListCell(parent)) {
+		index = dom.query.getPositionIndex(baseNode);
 		liSibling = parent.nextElementSibling;
 		liParent = parent.parentNode;
-		child = sibling;
+		child = siblingNode;
+
 		while (child) {
-			sibling = sibling.nextSibling;
-			if (domUtils.isList(child)) {
+			siblingNode = siblingNode.nextSibling;
+			if (dom.check.isList(child)) {
 				c = child.childNodes;
 				while (c[index]) {
 					liParent.insertBefore(c[index], liSibling);
 				}
-				if (c.length === 0) domUtils.removeItem(child);
+				if (c.length === 0) dom.utils.removeItem(child);
 			} else {
 				liParent.appendChild(child);
 			}
-			child = sibling;
+			child = siblingNode;
 		}
-		sibling = liParent;
+
 		parent = liParent.parentNode;
 	}
 
-	if (baseParent.children.length === 0) domUtils.removeItem(baseParent);
+	if (baseParent.children.length === 0) dom.utils.removeItem(baseParent);
 
 	return liParent;
 }
 
+/**
+ * @private
+ * @param {Array<HTMLElement>} lines - Line elements
+ * @param {number} size - Margin size
+ * @param {string} dir - Direction
+ * @returns
+ */
 function SetLineMargin(lines, size, dir) {
 	const cells = [];
 
 	for (let i = 0, len = lines.length, f, margin; i < len; i++) {
 		f = lines[i];
-		if (!domUtils.isListCell(f)) {
+		if (!dom.check.isListCell(f)) {
 			margin = /\d+/.test(f.style[dir]) ? numbers.get(f.style[dir], 0) : 0;
 			margin += size;
-			domUtils.setStyle(f, dir, margin <= 0 ? '' : margin + 'px');
+			dom.utils.setStyle(f, dir, margin <= 0 ? '' : margin + 'px');
 		} else {
 			if (size < 0 || f.previousElementSibling) {
 				cells.push(f);
@@ -3239,6 +3402,7 @@ function SetLineMargin(lines, size, dir) {
 }
 
 /**
+ * @private
  * @description Strip remove node
  * @param {Node} removeNode The remove node
  * @private