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

package/src/core/base/eventHandlers/handler_ww_key_input.js

@@ -1,21 +1,97 @@
-import { domUtils, env, unicode } from '../../../helper';
+import { dom, env, unicode, keyCodeMap } from '../../../helper';
 
 const { _w, isOSX_IOS } = env;
-const DIRECTION_KEYCODE = /^(8|3[2-9]|40|46)$/;
-const DIR_KEYCODE = /^(3[7-9]|40)$/;
-const DELETE_KEYCODE = /^(8|46)$/;
-const NON_TEXT_KEYCODE = /^(8|13|1[6-9]|20|27|3[3-9]|40|45|46|11[2-9]|12[0-3]|144|145|229)$/;
-const HISTORY_IGNORE_KEYCODE = /^(1[6-9]|20|27|3[3-9]|40|45|11[2-9]|12[0-3]|144|145|229)$/;
 const FRONT_ZEROWIDTH = new RegExp(unicode.zeroWidthSpace + '+', '');
+
+const keyState = {
+	ctrl: false,
+	alt: false
+};
 let _styleNodes = null;
 
-export function OnInput_wysiwyg(frameContext, e) {
-	if (frameContext.get('isReadOnly') || frameContext.get('isDisabled')) {
+/**
+ * @typedef {Omit<import('../eventManager').default & Partial<__se__EditorInjector>, 'eventManager'>} EventManagerThis_handler_ww_key_input
+ */
+
+/**
+ * @private
+ * @param {HTMLElement} formatEl - Format element
+ * @returns {Node}
+ */
+function LineDelete_next(formatEl) {
+	const focusNode = formatEl.lastChild;
+	const next = formatEl.nextElementSibling;
+
+	if (!next) return focusNode;
+
+	if (dom.check.isZeroWidth(next)) {
+		dom.utils.removeItem(next);
+		return focusNode;
+	}
+
+	const nextChild = next.childNodes;
+	while (nextChild[0]) {
+		formatEl.appendChild(nextChild[0]);
+	}
+
+	dom.utils.removeItem(next);
+
+	return focusNode;
+}
+
+/**
+ * @private
+ * @param {HTMLElement} formatEl - Format element
+ * @returns {{focusNode: Node, focusOffset: number}}
+ */
+function LineDelete_prev(formatEl) {
+	const formatChild = formatEl.childNodes;
+	const prev = formatEl.previousElementSibling;
+	let focusNode = formatChild[0];
+	let focusOffset = 0;
+
+	if (!prev) return { focusNode, focusOffset };
+
+	if (dom.check.isZeroWidth(prev)) {
+		dom.utils.removeItem(prev);
+		return { focusNode, focusOffset };
+	}
+
+	if (formatChild.length > 1 || formatChild[0]?.textContent.length > 0) {
+		while (formatChild[0]) {
+			prev.appendChild(formatChild[0]);
+		}
+	} else {
+		focusNode = prev.lastChild;
+		focusOffset = focusNode.textContent.length;
+	}
+
+	dom.utils.removeItem(formatEl);
+
+	return { focusNode, focusOffset };
+}
+
+/**
+ * @private
+ * @this {EventManagerThis_handler_ww_key_input}
+ * @param {__se__FrameContext} fc - Frame context object
+ * @param {InputEvent} e - Event object
+ */
+export async function OnInput_wysiwyg(fc, e) {
+	if (fc.get('isReadOnly') || fc.get('isDisabled')) {
 		e.preventDefault();
 		e.stopPropagation();
 		return false;
 	}
 
+	const range = this.selection.getRange();
+	const selectionNode = this.selection.getNode();
+	const formatEl = this.format.getLine(selectionNode, null);
+	if (!formatEl && range.collapsed && !this.component.is(selectionNode) && !dom.check.isList(selectionNode)) {
+		const rangeEl = this.format.getBlock(selectionNode, null);
+		this._setDefaultLine(this.format.isBlock(rangeEl) ? 'DIV' : this.options.get('defaultLine'));
+	}
+
 	this.selection._init();
 
 	const data = (e.data === null ? '' : e.data === undefined ? ' ' : e.data) || '';
@@ -26,27 +102,33 @@ export function OnInput_wysiwyg(frameContext, e) {
 	}
 
 	// user event
-	if (this.triggerEvent('onInput', { frameContext, event: e, data }) === false) return;
+	if ((await this.triggerEvent('onInput', { frameContext: fc, event: e, data })) === false) return;
 	// plugin event
-	if (this._callPluginEvent('onInput', { frameContext, event: e, data }) === false) return;
+	if (this._callPluginEvent('onInput', { frameContext: fc, event: e, data }) === false) return;
 
 	this.history.push(true);
 }
 
-export function OnKeyDown_wysiwyg(frameContext, e) {
+/**
+ * @private
+ * @this {EventManagerThis_handler_ww_key_input}
+ * @param {__se__FrameContext} fc - Frame context object
+ * @param {KeyboardEvent} e - Event object
+ */
+export async function OnKeyDown_wysiwyg(fc, e) {
 	if (this.editor.selectMenuOn || !e.isTrusted) return;
 
 	let selectionNode = this.selection.getNode();
-	if (domUtils.isInputElement(selectionNode)) return;
+	if (dom.check.isInputElement(selectionNode)) return;
 	if (this.menu.currentDropdownName) return;
 
-	const keyCode = e.keyCode;
-	const shift = e.shiftKey;
-	const ctrl = e.ctrlKey || e.metaKey || keyCode === 91 || keyCode === 92 || keyCode === 224;
-	const alt = e.altKey;
-	this.isComposing = keyCode === 229;
+	const keyCode = e.code;
+	const shift = keyCodeMap.isShift(e);
+	const ctrl = (keyState.ctrl = keyCodeMap.isCtrl(e));
+	const alt = (keyState.alt = keyCodeMap.isAlt(e));
+	this.isComposing = keyCodeMap.isComposing(e);
 
-	if (!ctrl && frameContext.get('isReadOnly') && !DIRECTION_KEYCODE.test(keyCode)) {
+	if (!ctrl && fc.get('isReadOnly') && !keyCodeMap.isDirectionKey(keyCode)) {
 		e.preventDefault();
 		return false;
 	}
@@ -60,29 +142,42 @@ export function OnKeyDown_wysiwyg(frameContext, e) {
 	}
 
 	// user event
-	if (this.triggerEvent('onKeyDown', { frameContext, event: e }) === false) return;
+	if ((await this.triggerEvent('onKeyDown', { frameContext: fc, event: e })) === false) return;
+
+	/** default key action */
+	if (keyCodeMap.isEnter(keyCode) && this.format.isLine(this.selection.getRange()?.startContainer)) {
+		this.selection._resetRangeToTextNode();
+		selectionNode = this.selection.getNode();
+	}
+
+	const range = this.selection.getRange();
+	const selectRange = !range.collapsed || range.startContainer !== range.endContainer;
+	let formatEl = /** @type {HTMLElement} */ (this.format.getLine(selectionNode, null) || selectionNode);
+	let rangeEl = this.format.getBlock(formatEl, null);
 
 	/** Shortcuts */
-	if (ctrl && this.shortcuts.command(keyCode, shift)) {
+	if (ctrl && !keyCodeMap.isNonTextKey(keyCode) && this.shortcuts.command(e, ctrl, shift, keyCode, '', false, null, null)) {
 		this._onShortcutKey = true;
 		e.preventDefault();
 		e.stopPropagation();
 		return false;
+	} else if (!ctrl && !keyCodeMap.isNonTextKey(keyCode) && this.format.isLine(formatEl) && range.collapsed && dom.check.isEdgePoint(range.startContainer, 0, 'front')) {
+		const keyword = /** @type {Text} */ (range.startContainer).substringData?.(0, range.startOffset);
+		if (keyword && this.shortcuts.command(e, false, shift, keyCode, keyword, true, formatEl, range)) {
+			this._onShortcutKey = true;
+			e.preventDefault();
+			e.stopPropagation();
+			return false;
+		}
 	} else if (this._onShortcutKey) {
 		this._onShortcutKey = false;
 	}
 
-	/** default key action */
-	const range = this.selection.getRange();
-	const selectRange = !range.collapsed || range.startContainer !== range.endContainer;
-	let formatEl = this.format.getLine(selectionNode, null) || selectionNode;
-	let rangeEl = this.format.getBlock(formatEl, null);
-
 	// plugin event
-	if (this._callPluginEvent('onKeyDown', { frameContext, event: e, range, line: formatEl }) === false) return;
+	if (this._callPluginEvent('onKeyDown', { frameContext: fc, event: e, range, line: formatEl }) === false) return;
 
 	switch (keyCode) {
-		case 8 /** backspace key */: {
+		case 'Backspace' /** backspace key */: {
 			this.component.deselect();
 			_styleNodes = this.__cacheStyleNodes;
 			if (selectRange && this._hardDelete()) {
@@ -91,18 +186,46 @@ export function OnKeyDown_wysiwyg(frameContext, e) {
 				break;
 			}
 
-			if (!this.format.isLine(formatEl) && !frameContext.get('wysiwyg').firstElementChild && !this.component.is(selectionNode) && this._setDefaultLine(this.options.get('defaultLine')) !== null) {
+			if (!this.format.isLine(formatEl) && !fc.get('wysiwyg').firstElementChild && !this.component.is(selectionNode) && this._setDefaultLine(this.options.get('defaultLine')) !== null) {
 				e.preventDefault();
 				e.stopPropagation();
 				return false;
 			}
 
+			// line delete
+			if (this.format.isLine(formatEl) && (!range.collapsed || dom.check.isEdgePoint(range.endContainer, range.endOffset, 'front')) && !range.endContainer.previousSibling && this.format.isLine(formatEl.previousElementSibling)) {
+				e.preventDefault();
+				e.stopPropagation();
+
+				let focusNode;
+				if (!range.collapsed) {
+					const rInfo = this.html.remove();
+					if (rInfo.commonCon !== rInfo.container && formatEl.parentElement) {
+						if (formatEl.contains(range.startContainer)) {
+							focusNode = LineDelete_next(formatEl);
+							this.selection.setRange(focusNode, focusNode.textContent.length, focusNode, focusNode.textContent.length);
+						} else {
+							const prevInfo = LineDelete_prev(formatEl);
+							this.selection.setRange(prevInfo.focusNode, prevInfo.focusOffset, prevInfo.focusNode, prevInfo.focusOffset);
+						}
+					}
+					this.history.push(true);
+					return;
+				}
+
+				const prevInfo = LineDelete_prev(formatEl);
+				this.selection.setRange(prevInfo.focusNode, prevInfo.focusOffset, prevInfo.focusNode, prevInfo.focusOffset);
+				this.history.push(true);
+
+				return;
+			}
+
 			if (
 				!selectRange &&
 				!formatEl.previousElementSibling &&
 				range.startOffset === 0 &&
 				!selectionNode.previousSibling &&
-				!domUtils.isListCell(formatEl) &&
+				!dom.check.isListCell(formatEl) &&
 				this.format.isLine(formatEl) &&
 				(!this.format.isBrLine(formatEl) || this.format.isClosureBrLine(formatEl))
 			) {
@@ -113,7 +236,7 @@ export function OnKeyDown_wysiwyg(frameContext, e) {
 					return false;
 				}
 				// maintain default format
-				if (domUtils.isWysiwygFrame(formatEl.parentNode) && formatEl.childNodes.length <= 1 && (!formatEl.firstChild || domUtils.isZeroWith(formatEl.textContent))) {
+				if (dom.check.isWysiwygFrame(formatEl.parentNode) && formatEl.childNodes.length <= 1 && (!formatEl.firstChild || dom.check.isZeroWidth(formatEl.textContent))) {
 					e.preventDefault();
 					e.stopPropagation();
 
@@ -124,7 +247,7 @@ export function OnKeyDown_wysiwyg(frameContext, e) {
 							formatEl.removeAttribute(attrs[0].name);
 						}
 					} else {
-						formatEl.parentElement.replaceChild(domUtils.createElement(this.options.get('defaultLine'), null, '<br>'), formatEl);
+						formatEl.parentNode.replaceChild(dom.utils.createElement(this.options.get('defaultLine'), null, '<br>'), formatEl);
 					}
 
 					this.editor._nativeFocus();
@@ -134,12 +257,12 @@ export function OnKeyDown_wysiwyg(frameContext, e) {
 
 			// clean remove tag
 			const startCon = range.startContainer;
-			if (formatEl && !formatEl.previousElementSibling && range.startOffset === 0 && startCon.nodeType === 3 && domUtils.isZeroWith(startCon)) {
+			if (formatEl && !formatEl.previousElementSibling && range.startOffset === 0 && startCon.nodeType === 3 && dom.check.isZeroWidth(startCon)) {
 				let prev = startCon.parentNode.previousSibling;
 				const next = startCon.parentNode.nextSibling;
 				if (!prev) {
 					if (!next) {
-						prev = domUtils.createElement('BR');
+						prev = dom.utils.createElement('BR');
 						formatEl.appendChild(prev);
 					} else {
 						prev = next;
@@ -160,13 +283,13 @@ export function OnKeyDown_wysiwyg(frameContext, e) {
 
 			// line component
 			if (!selectRange && formatEl && (range.startOffset === 0 || selectionNode === formatEl)) {
-				const sel = selectionNode === formatEl ? this._isUneditableNode(range, true) : domUtils.isEdgePoint(range.startContainer, range.startOffset) ? domUtils.getPreviousDeepestNode(range.startContainer) : null;
+				const sel = selectionNode === formatEl ? this._isUneditableNode(range, true) : dom.check.isEdgePoint(range.startContainer, range.startOffset) ? dom.query.getPreviousDeepestNode(range.startContainer) : null;
 				if (this.component.is(sel)) {
 					const fileComponentInfo = this.component.get(sel);
 					if (fileComponentInfo) {
 						e.preventDefault();
 						e.stopPropagation();
-						if (this.component.select(fileComponentInfo.target, fileComponentInfo.pluginName, false) === false) this.editor.blur();
+						if (this.component.select(fileComponentInfo.target, fileComponentInfo.pluginName) === false) this.editor.blur();
 						break;
 					}
 				}
@@ -180,7 +303,7 @@ export function OnKeyDown_wysiwyg(frameContext, e) {
 			}
 
 			// format attributes
-			if (!selectRange && this.format.isEdgeLine(range.startContainer, range.startOffset, 'start')) {
+			if (!selectRange && this.format.isEdgeLine(range.startContainer, range.startOffset, 'front')) {
 				if (this.format.isLine(formatEl.previousElementSibling)) {
 					this._formatAttrsTemp = formatEl.previousElementSibling.attributes;
 				}
@@ -190,12 +313,12 @@ export function OnKeyDown_wysiwyg(frameContext, e) {
 			const commonCon = range.commonAncestorContainer;
 			formatEl = this.format.getLine(range.startContainer, null);
 			rangeEl = this.format.getBlock(formatEl, null);
-			if (rangeEl && formatEl && !domUtils.isTableCell(rangeEl) && !/^FIGCAPTION$/i.test(rangeEl.nodeName)) {
+			if (rangeEl && formatEl && !dom.check.isTableCell(rangeEl) && !/^FIGCAPTION$/i.test(rangeEl.nodeName)) {
 				if (
-					domUtils.isListCell(formatEl) &&
-					domUtils.isList(rangeEl) &&
-					(domUtils.isListCell(rangeEl.parentNode) || formatEl.previousElementSibling) &&
-					(selectionNode === formatEl || (selectionNode.nodeType === 3 && (!selectionNode.previousSibling || domUtils.isList(selectionNode.previousSibling)))) &&
+					dom.check.isListCell(formatEl) &&
+					dom.check.isList(rangeEl) &&
+					(dom.check.isListCell(rangeEl.parentElement) || formatEl.previousElementSibling) &&
+					(selectionNode === formatEl || (selectionNode.nodeType === 3 && (!selectionNode.previousSibling || dom.check.isList(selectionNode.previousSibling)))) &&
 					(this.format.getLine(range.startContainer, null) !== this.format.getLine(range.endContainer, null) ? rangeEl.contains(range.startContainer) : range.startOffset === 0 && range.collapsed)
 				) {
 					if (range.startContainer !== range.endContainer) {
@@ -208,22 +331,22 @@ export function OnKeyDown_wysiwyg(frameContext, e) {
 
 						this.history.push(true);
 					} else {
-						let prev = formatEl.previousElementSibling || rangeEl.parentNode;
-						if (domUtils.isListCell(prev)) {
+						let prev = formatEl.previousElementSibling || rangeEl.parentElement;
+						if (dom.check.isListCell(prev)) {
 							e.preventDefault();
 
 							let prevLast = prev;
-							if (!prev.contains(formatEl) && domUtils.isListCell(prevLast) && domUtils.isList(prevLast.lastElementChild)) {
-								prevLast = prevLast.lastElementChild.lastElementChild;
-								while (domUtils.isListCell(prevLast) && domUtils.isList(prevLast.lastElementChild)) {
-									prevLast = prevLast.lastElementChild && prevLast.lastElementChild.lastElementChild;
+							if (!prev.contains(formatEl) && dom.check.isListCell(prevLast) && dom.check.isList(prevLast.lastElementChild)) {
+								prevLast = /** @type {HTMLLIElement} */ (prevLast.lastElementChild.lastElementChild);
+								while (dom.check.isListCell(prevLast) && dom.check.isList(prevLast.lastElementChild)) {
+									prevLast = /** @type {HTMLLIElement} */ (prevLast.lastElementChild && prevLast.lastElementChild.lastElementChild);
 								}
 								prev = prevLast;
 							}
 
 							let con = prev === rangeEl.parentNode ? rangeEl.previousSibling : prev.lastChild;
 							if (!con) {
-								con = domUtils.createTextNode(unicode.zeroWidthSpace);
+								con = dom.utils.createTextNode(unicode.zeroWidthSpace);
 								rangeEl.parentNode.insertBefore(con, rangeEl.parentNode.firstChild);
 							}
 							const offset = con.nodeType === 3 ? con.textContent.length : 1;
@@ -235,8 +358,8 @@ export function OnKeyDown_wysiwyg(frameContext, e) {
 								after = child;
 							}
 
-							domUtils.removeItem(formatEl);
-							if (rangeEl.children.length === 0) domUtils.removeItem(rangeEl);
+							dom.utils.removeItem(formatEl);
+							if (rangeEl.children.length === 0) dom.utils.removeItem(rangeEl);
 
 							this.selection.setRange(con, offset, con, offset);
 							this.history.push(true);
@@ -250,9 +373,9 @@ export function OnKeyDown_wysiwyg(frameContext, e) {
 				if (!selectRange && range.startOffset === 0) {
 					let detach = true;
 					let comm = commonCon;
-					while (comm && comm !== rangeEl && !domUtils.isWysiwygFrame(comm)) {
+					while (comm && comm !== rangeEl && !dom.check.isWysiwygFrame(comm)) {
 						if (comm.previousSibling) {
-							if (comm.previousSibling.nodeType === 1 || !domUtils.isZeroWith(comm.previousSibling.textContent.trim())) {
+							if (comm.previousSibling.nodeType === 1 || !dom.check.isZeroWidth(comm.previousSibling.textContent.trim())) {
 								detach = false;
 								break;
 							}
@@ -262,7 +385,7 @@ export function OnKeyDown_wysiwyg(frameContext, e) {
 
 					if (detach && rangeEl.parentNode) {
 						e.preventDefault();
-						this.format.removeBlock(rangeEl, domUtils.isListCell(formatEl) ? [formatEl] : null, null, false, false);
+						this.format.removeBlock(rangeEl, { selectedFormats: dom.check.isListCell(formatEl) ? [formatEl] : null, newBlockElement: null, shouldDelete: false, skipHistory: false });
 						this.history.push(true);
 						break;
 					}
@@ -274,33 +397,33 @@ export function OnKeyDown_wysiwyg(frameContext, e) {
 				const sel = selectionNode === formatEl ? formatEl.childNodes[range.startOffset] : selectionNode;
 				const prev = formatEl.previousSibling;
 				// select file component
-				const ignoreZWS = (commonCon.nodeType === 3 || domUtils.isBreak(commonCon)) && !commonCon.previousSibling && range.startOffset === 0;
+				const ignoreZWS = (commonCon.nodeType === 3 || dom.check.isBreak(commonCon)) && !commonCon.previousSibling && range.startOffset === 0;
 				if (sel && !sel.previousSibling && ((commonCon && this.component.is(commonCon.previousSibling)) || (ignoreZWS && this.component.is(prev)))) {
 					const fileComponentInfo = this.component.get(prev);
 					if (fileComponentInfo) {
 						e.preventDefault();
 						e.stopPropagation();
-						if (formatEl.textContent.length === 0) domUtils.removeItem(formatEl);
-						if (this.component.select(fileComponentInfo.target, fileComponentInfo.pluginName, false) === false) this.editor.blur();
+						if (formatEl.textContent.length === 0) dom.utils.removeItem(formatEl);
+						if (this.component.select(fileComponentInfo.target, fileComponentInfo.pluginName) === false) this.editor.blur();
 					} else if (this.component.is(prev)) {
 						e.preventDefault();
 						e.stopPropagation();
-						domUtils.removeItem(prev);
+						dom.utils.removeItem(prev);
 					}
 					break;
 				}
 				// delete nonEditable
-				if (sel && domUtils.isNonEditable(sel.previousSibling)) {
+				if (sel && dom.check.isNonEditable(sel.previousSibling)) {
 					e.preventDefault();
 					e.stopPropagation();
-					domUtils.removeItem(sel.previousSibling);
+					dom.utils.removeItem(sel.previousSibling);
 					break;
 				}
 			}
 
 			break;
 		}
-		case 46 /** delete key */: {
+		case 'Delete' /** delete key */: {
 			this.component.deselect();
 			_styleNodes = this.__cacheStyleNodes;
 			if (selectRange && this._hardDelete()) {
@@ -309,16 +432,49 @@ export function OnKeyDown_wysiwyg(frameContext, e) {
 				break;
 			}
 
+			if (!selectRange && this.format.isEdgeLine(range.endContainer, range.endOffset, 'end') && !formatEl.nextSibling) {
+				e.preventDefault();
+				e.stopPropagation();
+				return;
+			}
+
+			// line delete
+			if (this.format.isLine(formatEl) && (!range.collapsed || dom.check.isEdgePoint(range.startContainer, range.endOffset, 'end')) && !range.startContainer.nextSibling && this.format.isLine(formatEl.nextElementSibling)) {
+				e.preventDefault();
+				e.stopPropagation();
+
+				let focusNode;
+				if (!range.collapsed) {
+					const rInfo = this.html.remove();
+					if (rInfo.commonCon !== rInfo.container && formatEl.parentElement) {
+						if (formatEl.contains(range.startContainer)) {
+							focusNode = LineDelete_next(formatEl);
+							this.selection.setRange(focusNode, focusNode.textContent.length, focusNode, focusNode.textContent.length);
+						} else {
+							const prevInfo = LineDelete_prev(formatEl);
+							this.selection.setRange(prevInfo.focusNode, prevInfo.focusOffset, prevInfo.focusNode, prevInfo.focusOffset);
+						}
+					}
+					this.history.push(true);
+					return;
+				}
+
+				LineDelete_next(formatEl);
+				this.history.push(true);
+
+				return;
+			}
+
 			// line component
 			if (!selectRange && formatEl && (range.endOffset === range.endContainer.textContent.length || selectionNode === formatEl)) {
-				const sel = selectionNode === formatEl ? this._isUneditableNode(range, false) : domUtils.isEdgePoint(range.endContainer, range.endOffset) ? domUtils.getNextDeepestNode(range.endContainer, null) : null;
+				const sel = selectionNode === formatEl ? this._isUneditableNode(range, false) : dom.check.isEdgePoint(range.endContainer, range.endOffset) ? dom.query.getNextDeepestNode(range.endContainer, null) : null;
 				if (this.component.is(sel)) {
 					const fileComponentInfo = this.component.get(sel);
 					if (fileComponentInfo) {
 						e.preventDefault();
 						e.stopPropagation();
-						if (domUtils.isZeroWith(formatEl.textContent)) domUtils.removeItem(formatEl);
-						if (this.component.select(fileComponentInfo.target, fileComponentInfo.pluginName, false) === false) this.editor.blur();
+						if (dom.check.isZeroWidth(formatEl.textContent)) dom.utils.removeItem(formatEl);
+						if (this.component.select(fileComponentInfo.target, fileComponentInfo.pluginName) === false) this.editor.blur();
 						break;
 					}
 				}
@@ -333,7 +489,7 @@ export function OnKeyDown_wysiwyg(frameContext, e) {
 
 			// component
 			if (
-				(this.format.isLine(selectionNode) || selectionNode.nextSibling === null || (domUtils.isZeroWith(selectionNode.nextSibling) && selectionNode.nextSibling.nextSibling === null)) &&
+				(this.format.isLine(selectionNode) || selectionNode.nextSibling === null || (dom.check.isZeroWidth(selectionNode.nextSibling) && selectionNode.nextSibling.nextSibling === null)) &&
 				range.startOffset === selectionNode.textContent.length
 			) {
 				const nextEl = formatEl.nextElementSibling;
@@ -341,12 +497,12 @@ export function OnKeyDown_wysiwyg(frameContext, e) {
 				if (this.component.is(nextEl)) {
 					e.preventDefault();
 
-					if (domUtils.isZeroWith(formatEl)) {
-						domUtils.removeItem(formatEl);
+					if (dom.check.isZeroWidth(formatEl)) {
+						dom.utils.removeItem(formatEl);
 						// table component
-						if (domUtils.isTable(nextEl)) {
-							let cell = domUtils.getEdgeChild(nextEl, domUtils.isTableCell, false);
-							cell = cell.firstElementChild || cell;
+						if (dom.check.isTable(nextEl)) {
+							let cell = /** @type {HTMLElement} */ (dom.query.getEdgeChild(nextEl, dom.check.isTableCell, false));
+							cell = /** @type {HTMLElement} */ (cell.firstElementChild || cell);
 							this.selection.setRange(cell, 0, cell, 0);
 							break;
 						}
@@ -356,28 +512,28 @@ export function OnKeyDown_wysiwyg(frameContext, e) {
 					const fileComponentInfo = this.component.get(nextEl);
 					if (fileComponentInfo) {
 						e.stopPropagation();
-						if (this.component.select(fileComponentInfo.target, fileComponentInfo.pluginName, false) === false) this.editor.blur();
+						if (this.component.select(fileComponentInfo.target, fileComponentInfo.pluginName) === false) this.editor.blur();
 					} else if (this.component.is(nextEl)) {
 						e.stopPropagation();
-						domUtils.removeItem(nextEl);
+						dom.utils.removeItem(nextEl);
 					}
 
 					break;
 				}
 			}
 
-			if (!selectRange && (domUtils.isEdgePoint(range.endContainer, range.endOffset) || (selectionNode === formatEl ? formatEl.childNodes[range.startOffset] : false))) {
+			if (!selectRange && (dom.check.isEdgePoint(range.endContainer, range.endOffset) || (selectionNode === formatEl ? formatEl.childNodes[range.startOffset] : false))) {
 				const sel = selectionNode === formatEl ? formatEl.childNodes[range.startOffset] || selectionNode : selectionNode;
 				// delete nonEditable
-				if (sel && domUtils.isNonEditable(sel.nextSibling)) {
+				if (sel && dom.check.isNonEditable(sel.nextSibling)) {
 					e.preventDefault();
 					e.stopPropagation();
-					domUtils.removeItem(sel.nextSibling);
+					dom.utils.removeItem(sel.nextSibling);
 					break;
 				} else if (this.component.is(sel)) {
 					e.preventDefault();
 					e.stopPropagation();
-					domUtils.removeItem(sel);
+					dom.utils.removeItem(sel);
 					break;
 				}
 			}
@@ -393,36 +549,35 @@ export function OnKeyDown_wysiwyg(frameContext, e) {
 			formatEl = this.format.getLine(range.startContainer, null);
 			rangeEl = this.format.getBlock(formatEl, null);
 			if (
-				domUtils.isListCell(formatEl) &&
-				domUtils.isList(rangeEl) &&
+				dom.check.isListCell(formatEl) &&
+				dom.check.isList(rangeEl) &&
 				(selectionNode === formatEl ||
 					(selectionNode.nodeType === 3 &&
-						(!selectionNode.nextSibling || domUtils.isList(selectionNode.nextSibling)) &&
+						(!selectionNode.nextSibling || dom.check.isList(selectionNode.nextSibling)) &&
 						(this.format.getLine(range.startContainer, null) !== this.format.getLine(range.endContainer, null) ? rangeEl.contains(range.endContainer) : range.endOffset === selectionNode.textContent.length && range.collapsed)))
 			) {
 				if (range.startContainer !== range.endContainer) this.html.remove();
 
-				let next = domUtils.getArrayItem(formatEl.children, domUtils.isList, false);
-				next = next || formatEl.nextElementSibling || rangeEl.parentNode.nextElementSibling;
-				if (next && (domUtils.isList(next) || domUtils.getArrayItem(next.children, domUtils.isList, false))) {
+				const next = /** @type {HTMLElement} */ (dom.utils.arrayFind(formatEl.children, dom.check.isList) || formatEl.nextElementSibling || rangeEl.parentElement.nextElementSibling);
+				if (next && (dom.check.isList(next) || dom.utils.arrayFind(next.children, dom.check.isList))) {
 					e.preventDefault();
 
 					let con, children;
-					if (domUtils.isList(next)) {
+					if (dom.check.isList(next)) {
 						const child = next.firstElementChild;
 						children = child.childNodes;
 						con = children[0];
 						while (children[0]) {
 							formatEl.insertBefore(children[0], next);
 						}
-						domUtils.removeItem(child);
+						dom.utils.removeItem(child);
 					} else {
 						con = next.firstChild;
 						children = next.childNodes;
 						while (children[0]) {
 							formatEl.appendChild(children[0]);
 						}
-						domUtils.removeItem(next);
+						dom.utils.removeItem(next);
 					}
 					this.selection.setRange(con, 0, con, 0);
 					this.history.push(true);
@@ -432,18 +587,18 @@ export function OnKeyDown_wysiwyg(frameContext, e) {
 
 			break;
 		}
-		case 9 /** tab key */: {
+		case 'Tab' /** tab key */: {
 			if (this.options.get('tabDisable')) break;
 			e.preventDefault();
-			if (ctrl || alt || domUtils.isWysiwygFrame(selectionNode)) break;
+			if (ctrl || alt || dom.check.isWysiwygFrame(selectionNode)) break;
 
-			const isEdge = !range.collapsed || domUtils.isEdgePoint(range.startContainer, range.startOffset);
+			const isEdge = !range.collapsed || dom.check.isEdgePoint(range.startContainer, range.startOffset);
 			const selectedFormats = this.format.getLines(null);
 			selectionNode = this.selection.getNode();
 			const cells = [];
 			const lines = [];
-			const fc = domUtils.isListCell(selectedFormats[0]),
-				lc = domUtils.isListCell(selectedFormats[selectedFormats.length - 1]);
+			const firstCell = dom.check.isListCell(selectedFormats[0]),
+				lastCell = dom.check.isListCell(selectedFormats[selectedFormats.length - 1]);
 			let r = {
 				sc: range.startContainer,
 				so: range.startOffset,
@@ -452,7 +607,7 @@ export function OnKeyDown_wysiwyg(frameContext, e) {
 			};
 			for (let i = 0, len = selectedFormats.length, f; i < len; i++) {
 				f = selectedFormats[i];
-				if (domUtils.isListCell(f)) {
+				if (dom.check.isListCell(f)) {
 					if (!f.previousElementSibling && !shift) {
 						continue;
 					} else {
@@ -468,41 +623,50 @@ export function OnKeyDown_wysiwyg(frameContext, e) {
 				r = this.format._applyNestedList(cells, shift);
 			}
 
-			// Lines tab(4)
+			// Lines tab
 			if (lines.length > 0) {
 				if (!shift) {
-					const tabText = domUtils.createTextNode(new Array(this.status.tabSize + 1).join('\u00A0'));
 					if (lines.length === 1) {
-						const textRange = this.html.insertNode(tabText, null, false);
-						if (!textRange) return false;
-						if (!fc) {
+						let tabSize = this.status.tabSize + 1;
+						if (this.options.get('syncTabIndent')) {
+							const baseIndex = dom.query.findTextIndexOnLine(formatEl, range.startContainer, range.startOffset, this.component.is.bind(this.component));
+							const prevTabEndIndex = this.format.isLine(formatEl.previousElementSibling) ? dom.query.findTabEndIndex(formatEl.previousElementSibling, baseIndex, 2) : 0;
+							if (prevTabEndIndex > baseIndex) {
+								tabSize = prevTabEndIndex - baseIndex + 1;
+							}
+						}
+
+						const tabText = dom.utils.createTextNode(new Array(tabSize).join('\u00A0'));
+						if (!this.html.insertNode(tabText, { afterNode: null, skipCharCount: false })) return false;
+						if (!firstCell) {
 							r.sc = tabText;
-							r.so = textRange.endOffset;
+							r.so = tabText.length;
 						}
-						if (!lc) {
+						if (!lastCell) {
 							r.ec = tabText;
-							r.eo = textRange.endOffset;
+							r.eo = tabText.length;
 						}
 					} else {
+						const tabText = dom.utils.createTextNode(new Array(this.status.tabSize + 1).join('\u00A0'));
 						const len = lines.length - 1;
 						for (let i = 0, child; i <= len; i++) {
 							child = lines[i].firstChild;
 							if (!child) continue;
 
-							if (domUtils.isBreak(child)) {
+							if (dom.check.isBreak(child)) {
 								lines[i].insertBefore(tabText.cloneNode(false), child);
 							} else {
 								child.textContent = tabText.textContent + child.textContent;
 							}
 						}
 
-						const firstChild = domUtils.getEdgeChild(lines[0], 'text', false);
-						const endChild = domUtils.getEdgeChild(lines[len], 'text', true);
-						if (!fc && firstChild) {
+						const firstChild = dom.query.getEdgeChild(lines[0], 'text', false);
+						const endChild = dom.query.getEdgeChild(lines[len], 'text', true);
+						if (!firstCell && firstChild) {
 							r.sc = firstChild;
 							r.so = 0;
 						}
-						if (!lc && endChild) {
+						if (!lastCell && endChild) {
 							r.ec = endChild;
 							r.eo = endChild.textContent.length;
 						}
@@ -514,10 +678,10 @@ export function OnKeyDown_wysiwyg(frameContext, e) {
 						for (let c = 0, cLen = line.length, child; c < cLen; c++) {
 							child = line[c];
 							if (!child) break;
-							if (domUtils.isZeroWith(child)) continue;
+							if (dom.check.isZeroWidth(child)) continue;
 
 							if (/^\s{1,4}$/.test(child.textContent)) {
-								domUtils.removeItem(child);
+								dom.utils.removeItem(child);
 							} else if (/^\s{1,4}/.test(child.textContent)) {
 								child.textContent = child.textContent.replace(/^\s{1,4}/, '');
 							}
@@ -526,13 +690,13 @@ export function OnKeyDown_wysiwyg(frameContext, e) {
 						}
 					}
 
-					const firstChild = domUtils.getEdgeChild(lines[0], 'text', false);
-					const endChild = domUtils.getEdgeChild(lines[len], 'text', true);
-					if (!fc && firstChild) {
+					const firstChild = dom.query.getEdgeChild(lines[0], 'text', false);
+					const endChild = dom.query.getEdgeChild(lines[len], 'text', true);
+					if (!firstCell && firstChild) {
 						r.sc = firstChild;
 						r.so = 0;
 					}
-					if (!lc && endChild) {
+					if (!lastCell && endChild) {
 						r.ec = endChild;
 						r.eo = endChild.textContent.length;
 					}
@@ -544,7 +708,7 @@ export function OnKeyDown_wysiwyg(frameContext, e) {
 
 			break;
 		}
-		case 13 /** enter key */: {
+		case 'Enter' /** enter key */: {
 			this.component.deselect();
 			const brBlock = this.format.getBrLine(selectionNode, null);
 
@@ -563,27 +727,16 @@ export function OnKeyDown_wysiwyg(frameContext, e) {
 			}
 
 			if (!shift) {
-				const formatEndEdge = this.format.isEdgeLine(range.endContainer, range.endOffset, 'end');
-				const formatStartEdge = this.format.isEdgeLine(range.startContainer, range.startOffset, 'start');
+				const formatEndEdge = !range.endContainer.nextSibling && this.format.isEdgeLine(range.endContainer, range.endOffset, 'end');
+				const formatStartEdge = !range.startContainer.previousSibling && this.format.isEdgeLine(range.startContainer, range.startOffset, 'front');
 
 				// add default format line
 				if (formatEndEdge && (/^H[1-6]$/i.test(formatEl.nodeName) || /^HR$/i.test(formatEl.nodeName))) {
 					this.__enterPrevent(e);
-					let temp = null;
 					const newFormat = this.format.addLine(formatEl, this.options.get('defaultLine'));
-
-					if (formatEndEdge && formatEndEdge.length > 0) {
-						temp = formatEndEdge.pop();
-						const innerNode = temp;
-						while (formatEndEdge.length > 0) {
-							temp = temp.appendChild(formatEndEdge.pop());
-						}
-						newFormat.appendChild(innerNode);
-					}
-
-					temp = !temp ? newFormat.firstChild : temp.appendChild(newFormat.firstChild);
-					if (domUtils.isBreak(temp)) {
-						const zeroWidth = domUtils.createTextNode(unicode.zeroWidthSpace);
+					const temp = newFormat.firstChild;
+					if (dom.check.isBreak(temp)) {
+						const zeroWidth = dom.utils.createTextNode(unicode.zeroWidthSpace);
 						temp.parentNode.insertBefore(zeroWidth, temp);
 						this.selection.setRange(zeroWidth, 1, zeroWidth, 1);
 					} else {
@@ -591,14 +744,14 @@ export function OnKeyDown_wysiwyg(frameContext, e) {
 					}
 
 					// enter scroll
-					this.selection.scrollTo(range);
+					this.__enterScrollTo(range);
 					break;
-				} else if (rangeEl && formatEl && !domUtils.isTableCell(rangeEl) && !/^FIGCAPTION$/i.test(rangeEl.nodeName)) {
+				} else if (rangeEl && formatEl && !dom.check.isTableCell(rangeEl) && !/^FIGCAPTION$/i.test(rangeEl.nodeName)) {
 					const rangeEnt = this.selection.getRange();
-					if (domUtils.isEdgePoint(rangeEnt.endContainer, rangeEnt.endOffset) && domUtils.isList(selectionNode.nextSibling)) {
+					if (dom.check.isEdgePoint(rangeEnt.endContainer, rangeEnt.endOffset) && dom.check.isList(selectionNode.nextSibling)) {
 						this.__enterPrevent(e);
-						const br = domUtils.createElement('BR');
-						const newEl = domUtils.createElement('LI', null, br);
+						const br = dom.utils.createElement('BR');
+						const newEl = dom.utils.createElement('LI', null, br);
 
 						formatEl.parentNode.insertBefore(newEl, formatEl.nextElementSibling);
 						newEl.appendChild(selectionNode.nextSibling);
@@ -606,42 +759,42 @@ export function OnKeyDown_wysiwyg(frameContext, e) {
 						this.selection.setRange(br, 1, br, 1);
 
 						// enter scroll
-						this.selection.scrollTo(range);
+						this.__enterScrollTo(range);
 						break;
 					}
 
 					if (
-						(rangeEnt.commonAncestorContainer.nodeType === 3 ? !rangeEnt.commonAncestorContainer.nextElementSibling : true) &&
-						domUtils.isZeroWith(formatEl.innerText.trim()) &&
-						!domUtils.isListCell(formatEl.nextElementSibling)
+						(rangeEnt.commonAncestorContainer.nodeType === 3 ? !(/** @type {HTMLElement} */ (rangeEnt.commonAncestorContainer).nextElementSibling) : true) &&
+						dom.check.isZeroWidth(formatEl.innerText.trim()) &&
+						!dom.check.isListCell(formatEl.nextElementSibling)
 					) {
 						this.__enterPrevent(e);
 						let newEl = null;
 
-						if (domUtils.isListCell(rangeEl.parentNode)) {
-							const parentLi = formatEl.parentNode.parentNode;
-							rangeEl = parentLi.parentNode;
-							const newListCell = domUtils.createElement('LI');
+						if (dom.check.isListCell(rangeEl.parentElement)) {
+							const parentLi = formatEl.parentNode.parentElement;
+							rangeEl = parentLi.parentElement;
+							const newListCell = dom.utils.createElement('LI');
 							newListCell.innerHTML = '<br>';
-							domUtils.copyTagAttributes(newListCell, formatEl, this.options.get('lineAttrReset'));
+							dom.utils.copyTagAttributes(newListCell, formatEl, this.options.get('lineAttrReset'));
 							newEl = newListCell;
 							rangeEl.insertBefore(newEl, parentLi.nextElementSibling);
 						} else {
 							let newFormat;
-							if (domUtils.isTableCell(rangeEl.parentNode)) {
+							if (dom.check.isTableCell(rangeEl.parentElement)) {
 								newFormat = 'DIV';
-							} else if (domUtils.isList(rangeEl.parentNode)) {
+							} else if (dom.check.isList(rangeEl.parentElement)) {
 								newFormat = 'LI';
-							} else if (this.format.isLine(rangeEl.nextElementSibling) && !this.format.isBlock(rangeEl.nextElementSibling)) {
+							} else if (this.format.isLine(rangeEl.nextElementSibling)) {
 								newFormat = rangeEl.nextElementSibling.nodeName;
-							} else if (this.format.isLine(rangeEl.previousElementSibling) && !this.format.isBlock(rangeEl.previousElementSibling)) {
+							} else if (this.format.isLine(rangeEl.previousElementSibling)) {
 								newFormat = rangeEl.previousElementSibling.nodeName;
 							} else {
 								newFormat = this.options.get('defaultLine');
 							}
 
-							newEl = domUtils.createElement(newFormat);
-							const edge = this.format.removeBlock(rangeEl, [formatEl], null, true, true);
+							newEl = dom.utils.createElement(newFormat);
+							const edge = this.format.removeBlock(rangeEl, { selectedFormats: [formatEl], newBlockElement: null, shouldDelete: true, skipHistory: true });
 							edge.cc.insertBefore(newEl, edge.ec);
 						}
 
@@ -667,29 +820,30 @@ export function OnKeyDown_wysiwyg(frameContext, e) {
 						((selectionFormat &&
 							range.collapsed &&
 							children.length - 1 <= offset + 1 &&
-							domUtils.isBreak(children[offset]) &&
-							(!children[offset + 1] || ((!children[offset + 2] || domUtils.isZeroWith(children[offset + 2].textContent)) && children[offset + 1].nodeType === 3 && domUtils.isZeroWith(children[offset + 1].textContent))) &&
+							dom.check.isBreak(children[offset]) &&
+							(!children[offset + 1] || ((!children[offset + 2] || dom.check.isZeroWidth(children[offset + 2].textContent)) && children[offset + 1].nodeType === 3 && dom.check.isZeroWidth(children[offset + 1].textContent))) &&
 							offset > 0 &&
-							domUtils.isBreak(children[offset - 1])) ||
+							dom.check.isBreak(children[offset - 1])) ||
 							(!selectionFormat &&
-								domUtils.isZeroWith(selectionNode.textContent) &&
-								domUtils.isBreak(prev) &&
-								(domUtils.isBreak(prev.previousSibling) || !domUtils.isZeroWith(prev.previousSibling.textContent)) &&
-								(!next || (!domUtils.isBreak(next) && domUtils.isZeroWith(next.textContent)))))
+								dom.check.isZeroWidth(selectionNode.textContent) &&
+								dom.check.isBreak(prev) &&
+								(dom.check.isBreak(prev.previousSibling) || !dom.check.isZeroWidth(prev.previousSibling?.textContent)) &&
+								(!next || (!dom.check.isBreak(next) && dom.check.isZeroWidth(next.textContent)))))
 					) {
-						if (selectionFormat) domUtils.removeItem(children[offset - 1]);
-						else domUtils.removeItem(selectionNode);
-						const newEl = this.format.addLine(brBlock, this.format.isLine(brBlock.nextElementSibling) && !this.format.isBlock(brBlock.nextElementSibling) ? brBlock.nextElementSibling : null);
-						domUtils.copyFormatAttributes(newEl, brBlock);
+						if (selectionFormat) dom.utils.removeItem(children[offset - 1]);
+						else dom.utils.removeItem(selectionNode);
+						const brBlockNext = /** @type {HTMLElement} */ (brBlock).nextElementSibling;
+						const newEl = this.format.addLine(brBlock, this.format.isLine(brBlockNext) ? brBlockNext : null);
+						dom.utils.copyFormatAttributes(newEl, brBlock);
 						this.selection.setRange(newEl, 1, newEl, 1);
 
 						// enter scroll
-						this.selection.scrollTo(range);
+						this.__enterScrollTo(range);
 						break;
 					}
 
 					if (selectionFormat) {
-						this.html.insert(range.collapsed && domUtils.isBreak(range.startContainer.childNodes[range.startOffset - 1]) ? '<br>' : '<br><br>', false, true, true);
+						this.html.insert(range.collapsed && dom.check.isBreak(range.startContainer.childNodes[range.startOffset - 1]) ? '<br>' : '<br><br>', { selectInserted: false, skipCharCount: true, skipCleaning: true });
 
 						let focusNode = wSelection.focusNode;
 						const wOffset = wSelection.focusOffset;
@@ -700,12 +854,12 @@ export function OnKeyDown_wysiwyg(frameContext, e) {
 						this.selection.setRange(focusNode, 1, focusNode, 1);
 					} else {
 						const focusNext = wSelection.focusNode.nextSibling;
-						const br = domUtils.createElement('BR');
-						this.html.insertNode(br, null, true);
+						const br = dom.utils.createElement('BR');
+						this.html.insertNode(br, { afterNode: null, skipCharCount: true });
 
 						const brPrev = br.previousSibling,
 							brNext = br.nextSibling;
-						if (!domUtils.isBreak(focusNext) && !domUtils.isBreak(brPrev) && (!brNext || domUtils.isZeroWith(brNext))) {
+						if (!dom.check.isBreak(focusNext) && !dom.check.isBreak(brPrev) && (!brNext || dom.check.isZeroWidth(brNext))) {
 							br.parentNode.insertBefore(br.cloneNode(false), br);
 							this.selection.setRange(br, 1, br, 1);
 						} else {
@@ -716,26 +870,26 @@ export function OnKeyDown_wysiwyg(frameContext, e) {
 					this._onShortcutKey = true;
 
 					// enter scroll
-					this.selection.scrollTo(range);
+					this.__enterScrollTo(range);
 					break;
 				}
 
 				// set format attrs - edge
 				if (range.collapsed && (formatStartEdge || formatEndEdge)) {
 					this.__enterPrevent(e);
-					const focusBR = domUtils.createElement('BR');
-					const newFormat = domUtils.createElement(formatEl.nodeName, null, focusBR);
+					const focusBR = dom.utils.createElement('BR');
+					const newFormat = dom.utils.createElement(formatEl.nodeName, null, focusBR);
 
-					domUtils.copyTagAttributes(newFormat, formatEl, this.options.get('lineAttrReset'));
+					dom.utils.copyTagAttributes(newFormat, formatEl, this.options.get('lineAttrReset'));
 
 					let child = focusBR;
 					do {
-						if (!domUtils.isBreak(selectionNode) && selectionNode.nodeType === 1) {
-							const f = selectionNode.cloneNode(false);
+						if (!dom.check.isBreak(selectionNode) && selectionNode.nodeType === 1) {
+							const f = /** @type {HTMLElement} */ (selectionNode.cloneNode(false));
 							f.appendChild(child);
 							child = f;
 						}
-						selectionNode = selectionNode.parentNode;
+						selectionNode = selectionNode.parentElement;
 					} while (formatEl !== selectionNode && formatEl.contains(selectionNode));
 
 					newFormat.appendChild(child);
@@ -748,37 +902,42 @@ export function OnKeyDown_wysiwyg(frameContext, e) {
 					}
 
 					// enter scroll
-					this.selection.scrollTo(range);
+					this.__enterScrollTo(range);
 					break;
 				}
 
 				if (formatEl) {
 					e.stopPropagation();
 
+					/** @type {HTMLElement} */
 					let newEl;
 					let offset = 0;
 					if (!range.collapsed) {
 						const isMultiLine = this.format.getLine(range.startContainer, null) !== this.format.getLine(range.endContainer, null);
-						const newFormat = formatEl.cloneNode(false);
+						const newFormat = /** @type {HTMLElement} */ (formatEl.cloneNode(false));
 						newFormat.innerHTML = '<br>';
-						const rcon = this.html.remove();
+						const commonCon = /** @type {HTMLElement} */ (range.commonAncestorContainer);
+						const rcon =
+							commonCon === range.startContainer && commonCon === range.endContainer && dom.check.isZeroWidth(commonCon)
+								? { container: commonCon, offset: range.endOffset, prevContainer: commonCon.previousElementSibling, commonCon: commonCon }
+								: this.html.remove();
 						newEl = this.format.getLine(rcon.container, null);
 						if (!newEl) {
-							if (domUtils.isWysiwygFrame(rcon.container)) {
+							if (dom.check.isWysiwygFrame(rcon.container)) {
 								this.__enterPrevent(e);
-								frameContext.get('wysiwyg').appendChild(newFormat);
+								fc.get('wysiwyg').appendChild(newFormat);
 								newEl = newFormat;
-								domUtils.copyTagAttributes(newEl, formatEl, this.options.get('lineAttrReset'));
+								dom.utils.copyTagAttributes(newEl, formatEl, this.options.get('lineAttrReset'));
 								this.selection.setRange(newEl, offset, newEl, offset);
 							}
 
 							// enter scroll
-							this.selection.scrollTo(range);
+							this.__enterScrollTo(range);
 							break;
 						}
 
 						const innerRange = this.format.getBlock(rcon.container);
-						newEl = newEl.contains(innerRange) ? domUtils.getEdgeChild(innerRange, this.format.getLine.bind(this.format)) : newEl;
+						newEl = newEl.contains(innerRange) ? dom.query.getEdgeChild(innerRange, this.format.getLine.bind(this.format), false) : newEl;
 						if (isMultiLine) {
 							if (formatEndEdge && !formatStartEdge) {
 								newEl.parentNode.insertBefore(newFormat, !rcon.prevContainer || rcon.container === rcon.prevContainer ? newEl.nextElementSibling : newEl);
@@ -799,93 +958,103 @@ export function OnKeyDown_wysiwyg(frameContext, e) {
 								newEl.parentNode.insertBefore(newFormat, rcon.prevContainer && rcon.container === rcon.prevContainer ? newEl.nextElementSibling : newEl);
 								newEl = newFormat;
 								offset = 0;
+							} else if (formatEndEdge) {
+								newEl = newEl.parentNode.insertBefore(newFormat, newEl.nextElementSibling);
+								newEl = newFormat;
+								offset = 0;
 							} else {
-								newEl = this.nodeTransform.split(rcon.container, rcon.offset, domUtils.getNodeDepth(formatEl));
+								newEl = this.nodeTransform.split(rcon.container, rcon.offset, dom.query.getNodeDepth(formatEl));
 							}
 						}
 					} else {
-						if (domUtils.isZeroWith(formatEl)) {
+						if (dom.check.isZeroWidth(formatEl)) {
 							newEl = this.format.addLine(formatEl, formatEl.cloneNode(false));
 						} else {
-							newEl = this.nodeTransform.split(range.endContainer, range.endOffset, domUtils.getNodeDepth(formatEl));
+							newEl = this.nodeTransform.split(range.endContainer, range.endOffset, dom.query.getNodeDepth(formatEl));
 						}
 					}
 
 					this.__enterPrevent(e);
-					domUtils.copyTagAttributes(newEl, formatEl, this.options.get('lineAttrReset'));
+					dom.utils.copyTagAttributes(newEl, formatEl, this.options.get('lineAttrReset'));
 					this.selection.setRange(newEl, offset, newEl, offset);
 
 					// enter scroll
-					this.selection.scrollTo(range);
+					this.__enterScrollTo(range);
 					break;
 				}
 			}
 
 			if (selectRange) {
 				// enter scroll
-				this.selection.scrollTo(range);
+				this.__enterScrollTo(range);
 				break;
 			}
 
-			if (rangeEl && domUtils.getParentElement(rangeEl, 'FIGCAPTION') && domUtils.getParentElement(rangeEl, domUtils.isList)) {
+			if (rangeEl && dom.query.getParentElement(rangeEl, 'FIGCAPTION') && dom.query.getParentElement(rangeEl, dom.check.isList)) {
 				this.__enterPrevent(e);
 				formatEl = this.format.addLine(formatEl, null);
 				this.selection.setRange(formatEl, 0, formatEl, 0);
 
 				// enter scroll
-				this.selection.scrollTo(range);
+				this.__enterScrollTo(range);
 			}
 
 			break;
 		}
 	}
 
-	if (shift && (isOSX_IOS ? alt : ctrl) && keyCode === 32) {
+	if (shift && (isOSX_IOS ? alt : ctrl) && keyCodeMap.isSpace(keyCode)) {
 		e.preventDefault();
 		e.stopPropagation();
-		const nbsp = this.html.insertNode(domUtils.createTextNode('\u00a0'), null, true);
-		if (nbsp && nbsp.container) {
-			this.selection.setRange(nbsp.container, nbsp.endOffset, nbsp.container, nbsp.endOffset);
+		const nbsp = this.html.insertNode(dom.utils.createTextNode('\u00a0'), { afterNode: null, skipCharCount: true });
+		if (nbsp) {
+			this.selection.setRange(nbsp, nbsp.length, nbsp, nbsp.length);
 			return;
 		}
 	}
 
-	if (!ctrl && !alt && !selectRange && !NON_TEXT_KEYCODE.test(keyCode) && domUtils.isBreak(range.commonAncestorContainer)) {
-		const zeroWidth = domUtils.createTextNode(unicode.zeroWidthSpace);
-		this.html.insertNode(zeroWidth, null, true);
+	if (!ctrl && !alt && !selectRange && !keyCodeMap.isNonTextKey(keyCode) && dom.check.isBreak(range.commonAncestorContainer)) {
+		const zeroWidth = dom.utils.createTextNode(unicode.zeroWidthSpace);
+		this.html.insertNode(zeroWidth, { afterNode: null, skipCharCount: true });
 		this.selection.setRange(zeroWidth, 1, zeroWidth, 1);
 	}
 
-	// next component
-	if (!DIR_KEYCODE.test(keyCode)) return;
+	// document type
+	if (fc.has('documentType-use-header') && !range.collapsed && !ctrl && !alt && !shift && !keyCodeMap.isDirectionKey(keyCode)) {
+		_w.setTimeout(() => {
+			fc.get('documentType').reHeader();
+		}, 0);
+		return;
+	}
 
+	// next component
 	let cmponentInfo = null;
 	switch (keyCode) {
-		case 38 /** up key */:
+		case 'ArrowUp' /** up key */:
 			if (this.component.is(formatEl.previousElementSibling)) {
 				cmponentInfo = this.component.get(formatEl.previousElementSibling);
 			}
 			break;
-		case 37 /** left key */:
-			if (domUtils.isEdgePoint(selectionNode, range.startOffset, 'front')) {
-				const prevEl = selectionNode.previousElementSibling;
-				if (prevEl && this.component.is(prevEl)) {
-					cmponentInfo = this.component.get(prevEl);
+		case 'ArrowLeft' /** left key */:
+			if (dom.check.isEdgePoint(selectionNode, range.startOffset, 'front')) {
+				const prevEl = selectionNode.previousElementSibling || dom.query.getPreviousDeepestNode(selectionNode);
+				if (prevEl) {
+					if (this.component.is(prevEl)) cmponentInfo = this.component.get(prevEl);
 				} else if (this.component.is(formatEl.previousElementSibling)) {
 					cmponentInfo = this.component.get(formatEl.previousElementSibling);
 				}
 			}
 			break;
-		case 40 /** down key */:
+		case 'ArrowDown' /** down key */:
 			if (this.component.is(formatEl.nextElementSibling)) {
 				cmponentInfo = this.component.get(formatEl.nextElementSibling);
 			}
 			break;
-		case 39 /** right key */:
-			if (domUtils.isEdgePoint(selectionNode, range.endOffset, 'end')) {
-				const nextEl = selectionNode.nextElementSibling;
-				if (nextEl && this.component.is(nextEl)) {
-					cmponentInfo = this.component.get(nextEl);
+		case 'ArrowRight' /** right key */:
+			if (dom.check.isEdgePoint(selectionNode, range.endOffset, 'end')) {
+				const nextEl = selectionNode.nextElementSibling || dom.query.getNextDeepestNode(selectionNode);
+				if (nextEl) {
+					if (this.component.is(nextEl)) cmponentInfo = this.component.get(nextEl);
 				} else if (this.component.is(formatEl.nextElementSibling)) {
 					cmponentInfo = this.component.get(formatEl.nextElementSibling);
 				}
@@ -895,25 +1064,34 @@ export function OnKeyDown_wysiwyg(frameContext, e) {
 
 	if (cmponentInfo && !cmponentInfo.options?.isInputComponent) {
 		e.preventDefault();
-		if (this.component.select(cmponentInfo.target, cmponentInfo.pluginName, false) === false) this.editor.blur();
+		if (this.component.select(cmponentInfo.target, cmponentInfo.pluginName) === false) this.editor.blur();
 	}
 }
 
-export function OnKeyUp_wysiwyg(frameContext, e) {
+/**
+ * @private
+ * @this {EventManagerThis_handler_ww_key_input}
+ * @param {__se__FrameContext} fc - Frame context object
+ * @param {KeyboardEvent} e - Event object
+ */
+export async function OnKeyUp_wysiwyg(fc, e) {
 	if (this._onShortcutKey || this.menu.currentDropdownName) return;
 
-	const keyCode = e.keyCode;
-	const ctrl = e.ctrlKey || e.metaKey || keyCode === 91 || keyCode === 92 || keyCode === 224;
-	const alt = e.altKey;
+	const keyCode = e.code;
+	const ctrl = keyCodeMap.isCtrl(e);
+	const alt = keyCodeMap.isAlt(e);
+
+	if (ctrl) keyState.ctrl = false;
+	if (alt) keyState.alt = false;
 
-	if (frameContext.get('isReadOnly')) return;
+	if (fc.get('isReadOnly')) return;
 
 	const range = this.selection.getRange();
 	let selectionNode = this.selection.getNode();
 
-	if ((this.editor.isBalloon || this.editor.isSubBalloon) && (((this.editor.isBalloonAlways || this.editor.isSubBalloonAlways) && keyCode !== 27) || !range.collapsed)) {
+	if ((this.editor.isBalloon || this.editor.isSubBalloon) && (((this.editor.isBalloonAlways || this.editor.isSubBalloonAlways) && !keyCodeMap.isEsc(keyCode)) || !range.collapsed)) {
 		if (this.editor.isBalloonAlways || this.editor.isSubBalloonAlways) {
-			if (keyCode !== 27) this._showToolbarBalloonDelay();
+			if (!keyCodeMap.isEsc(keyCode)) this._showToolbarBalloonDelay();
 		} else {
 			if (this.editor.isSubBalloon) this.subToolbar._showBalloon();
 			else this.toolbar._showBalloon();
@@ -922,18 +1100,26 @@ export function OnKeyUp_wysiwyg(frameContext, e) {
 	}
 
 	/** when format tag deleted */
-	if (keyCode === 8 && domUtils.isWysiwygFrame(selectionNode) && selectionNode.textContent === '' && selectionNode.children.length === 0) {
+	if (keyCodeMap.isBackspace(keyCode) && dom.check.isWysiwygFrame(selectionNode) && selectionNode.textContent === '' && selectionNode.children.length === 0) {
 		e.preventDefault();
 		e.stopPropagation();
 
 		selectionNode.innerHTML = '';
 
-		const oFormatTag = domUtils.createElement(this.format.isLine(this.status.currentNodes[0]) && !domUtils.isListCell(this.status.currentNodes[0]) ? this.status.currentNodes[0] : this.options.get('defaultLine'), null, '<br>');
+		const oFormatTag = dom.utils.createElement(this.format.isLine(this.status.currentNodes[0]) && !dom.check.isListCell(this.status.currentNodes[0]) ? this.status.currentNodes[0] : this.options.get('defaultLine'), null, '<br>');
 		selectionNode.appendChild(oFormatTag);
 		this.selection.setRange(oFormatTag, 0, oFormatTag, 0);
 		this.applyTagEffect();
 
 		this.history.push(false);
+
+		// document type
+		if (fc.has('documentType-use-header')) {
+			if (keyCodeMap.isDocumentTypeObserverKey(keyCode)) {
+				fc.get('documentType').reHeader();
+			}
+		}
+
 		return;
 	}
 
@@ -943,7 +1129,7 @@ export function OnKeyUp_wysiwyg(frameContext, e) {
 
 	if (formatEl && attrs) {
 		for (let i = 0, len = attrs.length; i < len; i++) {
-			if (keyCode === 13 && /^id$/i.test(attrs[i].name)) {
+			if (keyCodeMap.isEnter(keyCode) && /^id$/i.test(attrs[i].name)) {
 				formatEl.removeAttribute('id');
 				continue;
 			}
@@ -952,11 +1138,11 @@ export function OnKeyUp_wysiwyg(frameContext, e) {
 		this._formatAttrsTemp = null;
 	}
 
-	if (!formatEl && range.collapsed && !this.component.is(selectionNode) && !domUtils.isList(selectionNode) && this._setDefaultLine(this.format.isBlock(rangeEl) ? 'DIV' : this.options.get('defaultLine')) !== null) {
+	if (!formatEl && range.collapsed && !this.component.is(selectionNode) && !dom.check.isList(selectionNode) && this._setDefaultLine(this.format.isBlock(rangeEl) ? 'DIV' : this.options.get('defaultLine')) !== null) {
 		selectionNode = this.selection.getNode();
 	}
 
-	const textKey = !ctrl && !alt && !NON_TEXT_KEYCODE.test(keyCode);
+	const textKey = !keyState.ctrl && !keyState.alt && !keyCodeMap.isNonTextKey(keyCode);
 	if (textKey && selectionNode.nodeType === 3 && unicode.zeroWidthRegExp.test(selectionNode.textContent) && !(e.isComposing !== undefined ? e.isComposing : this.isComposing)) {
 		let so = range.startOffset,
 			eo = range.endOffset;
@@ -967,7 +1153,7 @@ export function OnKeyUp_wysiwyg(frameContext, e) {
 		this.selection.setRange(selectionNode, so < 0 ? 0 : so, selectionNode, eo < 0 ? 0 : eo);
 	}
 
-	if (DELETE_KEYCODE.test(keyCode) && domUtils.isZeroWith(formatEl?.textContent) && !formatEl.previousElementSibling) {
+	if (keyCodeMap.isRemoveKey(keyCode) && dom.check.isZeroWidth(formatEl?.textContent) && !formatEl.previousElementSibling) {
 		const rsMode = this.options.get('retainStyleMode');
 		if (rsMode !== 'none' && _styleNodes?.length > 0) {
 			if (rsMode === 'repeat') {
@@ -991,12 +1177,24 @@ export function OnKeyUp_wysiwyg(frameContext, e) {
 
 	this.char.test('', false);
 
+	// document type
+	if (fc.has('documentType-use-header')) {
+		if (keyCodeMap.isDocumentTypeObserverKey(keyCode)) {
+			fc.get('documentType').reHeader();
+			const el = dom.query.getParentElement(this.selection.selectionNode, this.format.isLine.bind(this.format));
+			fc.get('documentType').on(el);
+		} else {
+			const el = dom.query.getParentElement(selectionNode, (current) => current.nodeType === 1);
+			fc.get('documentType').onChangeText(el);
+		}
+	}
+
 	// user event
-	if (this.triggerEvent('onKeyUp', { frameContext, event: e }) === false) return;
+	if ((await this.triggerEvent('onKeyUp', { frameContext: fc, event: e })) === false) return;
 	// plugin event
-	if (this._callPluginEvent('onKeyUp', { frameContext, event: e, range, line: formatEl }) === false) return;
+	if (this._callPluginEvent('onKeyUp', { frameContext: fc, event: e, range, line: formatEl }) === false) return;
 
-	if (!ctrl && !alt && !HISTORY_IGNORE_KEYCODE.test(keyCode)) {
+	if (keyCodeMap.isHistoryRelevantKey(keyCode)) {
 		this.history.push(true);
 	}
 }