suneditor 3.0.0-beta.2 → 3.0.0-beta.20

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

@@ -1,1200 +1,1200 @@
-import { dom, env, unicode, keyCodeMap } from '../../../helper';
-
-const { _w, isOSX_IOS } = env;
-const FRONT_ZEROWIDTH = new RegExp(unicode.zeroWidthSpace + '+', '');
-
-const keyState = {
-	ctrl: false,
-	alt: false
-};
-let _styleNodes = null;
-
-/**
- * @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) || '';
-	if (!this.char.test(data, true)) {
-		e.preventDefault();
-		e.stopPropagation();
-		return false;
-	}
-
-	// user event
-	if ((await this.triggerEvent('onInput', { frameContext: fc, event: e, data })) === false) return;
-	// plugin event
-	if (this._callPluginEvent('onInput', { frameContext: fc, event: e, data }) === false) return;
-
-	this.history.push(true);
-}
-
-/**
- * @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 (dom.check.isInputElement(selectionNode)) return;
-	if (this.menu.currentDropdownName) return;
-
-	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 && fc.get('isReadOnly') && !keyCodeMap.isDirectionKey(keyCode)) {
-		e.preventDefault();
-		return false;
-	}
-
-	this.menu.dropdownOff();
-
-	if (this.editor.isBalloon) {
-		this._hideToolbar();
-	} else if (this.editor.isSubBalloon) {
-		this._hideToolbar_sub();
-	}
-
-	// user event
-	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 && !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;
-	}
-
-	// plugin event
-	if (this._callPluginEvent('onKeyDown', { frameContext: fc, event: e, range, line: formatEl }) === false) return;
-
-	switch (keyCode) {
-		case 'Backspace' /** backspace key */: {
-			this.component.deselect();
-			_styleNodes = this.__cacheStyleNodes;
-			if (selectRange && this._hardDelete()) {
-				e.preventDefault();
-				e.stopPropagation();
-				break;
-			}
-
-			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 &&
-				!dom.check.isListCell(formatEl) &&
-				this.format.isLine(formatEl) &&
-				(!this.format.isBrLine(formatEl) || this.format.isClosureBrLine(formatEl))
-			) {
-				// closure range
-				if (this.format.isClosureBlock(formatEl.parentNode)) {
-					e.preventDefault();
-					e.stopPropagation();
-					return false;
-				}
-				// maintain default format
-				if (dom.check.isWysiwygFrame(formatEl.parentNode) && formatEl.childNodes.length <= 1 && (!formatEl.firstChild || dom.check.isZeroWidth(formatEl.textContent))) {
-					e.preventDefault();
-					e.stopPropagation();
-
-					if (formatEl.nodeName.toUpperCase() === this.options.get('defaultLine').toUpperCase()) {
-						formatEl.innerHTML = '<br>';
-						const attrs = formatEl.attributes;
-						while (attrs[0]) {
-							formatEl.removeAttribute(attrs[0].name);
-						}
-					} else {
-						formatEl.parentNode.replaceChild(dom.utils.createElement(this.options.get('defaultLine'), null, '<br>'), formatEl);
-					}
-
-					this.editor._nativeFocus();
-					return false;
-				}
-			}
-
-			// clean remove tag
-			const startCon = range.startContainer;
-			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 = dom.utils.createElement('BR');
-						formatEl.appendChild(prev);
-					} else {
-						prev = next;
-					}
-				}
-
-				let con = startCon;
-				while (formatEl.contains(con) && !con.previousSibling) {
-					con = con.parentNode;
-				}
-
-				if (!formatEl.contains(con)) {
-					startCon.textContent = '';
-					this.nodeTransform.removeAllParents(startCon, null, formatEl);
-					break;
-				}
-			}
-
-			// line component
-			if (!selectRange && formatEl && (range.startOffset === 0 || selectionNode === formatEl)) {
-				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) this.editor.blur();
-						break;
-					}
-				}
-			}
-
-			// tag[contenteditable='false']
-			if (this._isUneditableNode(range, true)) {
-				e.preventDefault();
-				e.stopPropagation();
-				break;
-			}
-
-			// format attributes
-			if (!selectRange && this.format.isEdgeLine(range.startContainer, range.startOffset, 'front')) {
-				if (this.format.isLine(formatEl.previousElementSibling)) {
-					this._formatAttrsTemp = formatEl.previousElementSibling.attributes;
-				}
-			}
-
-			// nested list
-			const commonCon = range.commonAncestorContainer;
-			formatEl = this.format.getLine(range.startContainer, null);
-			rangeEl = this.format.getBlock(formatEl, null);
-			if (rangeEl && formatEl && !dom.check.isTableCell(rangeEl) && !/^FIGCAPTION$/i.test(rangeEl.nodeName)) {
-				if (
-					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) {
-						e.preventDefault();
-
-						this.html.remove();
-						if (range.startContainer.nodeType === 3) {
-							this.selection.setRange(range.startContainer, range.startContainer.textContent.length, range.startContainer, range.startContainer.textContent.length);
-						}
-
-						this.history.push(true);
-					} else {
-						let prev = formatEl.previousElementSibling || rangeEl.parentElement;
-						if (dom.check.isListCell(prev)) {
-							e.preventDefault();
-
-							let prevLast = prev;
-							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 = dom.utils.createTextNode(unicode.zeroWidthSpace);
-								rangeEl.parentNode.insertBefore(con, rangeEl.parentNode.firstChild);
-							}
-							const offset = con.nodeType === 3 ? con.textContent.length : 1;
-							const children = formatEl.childNodes;
-							let after = con;
-							let child = children[0];
-							while ((child = children[0])) {
-								prev.insertBefore(child, after.nextSibling);
-								after = child;
-							}
-
-							dom.utils.removeItem(formatEl);
-							if (rangeEl.children.length === 0) dom.utils.removeItem(rangeEl);
-
-							this.selection.setRange(con, offset, con, offset);
-							this.history.push(true);
-						}
-					}
-
-					break;
-				}
-
-				// detach range
-				if (!selectRange && range.startOffset === 0) {
-					let detach = true;
-					let comm = commonCon;
-					while (comm && comm !== rangeEl && !dom.check.isWysiwygFrame(comm)) {
-						if (comm.previousSibling) {
-							if (comm.previousSibling.nodeType === 1 || !dom.check.isZeroWidth(comm.previousSibling.textContent.trim())) {
-								detach = false;
-								break;
-							}
-						}
-						comm = comm.parentNode;
-					}
-
-					if (detach && rangeEl.parentNode) {
-						e.preventDefault();
-						this.format.removeBlock(rangeEl, { selectedFormats: dom.check.isListCell(formatEl) ? [formatEl] : null, newBlockElement: null, shouldDelete: false, skipHistory: false });
-						this.history.push(true);
-						break;
-					}
-				}
-			}
-
-			// component
-			if (!selectRange && formatEl && (range.startOffset === 0 || (selectionNode === formatEl ? formatEl.childNodes[range.startOffset] : false))) {
-				const sel = selectionNode === formatEl ? formatEl.childNodes[range.startOffset] : selectionNode;
-				const prev = formatEl.previousSibling;
-				// select file component
-				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) 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();
-						dom.utils.removeItem(prev);
-					}
-					break;
-				}
-				// delete nonEditable
-				if (sel && dom.check.isNonEditable(sel.previousSibling)) {
-					e.preventDefault();
-					e.stopPropagation();
-					dom.utils.removeItem(sel.previousSibling);
-					break;
-				}
-			}
-
-			break;
-		}
-		case 'Delete' /** delete key */: {
-			this.component.deselect();
-			_styleNodes = this.__cacheStyleNodes;
-			if (selectRange && this._hardDelete()) {
-				e.preventDefault();
-				e.stopPropagation();
-				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) : 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 (dom.check.isZeroWidth(formatEl.textContent)) dom.utils.removeItem(formatEl);
-						if (this.component.select(fileComponentInfo.target, fileComponentInfo.pluginName) === false) this.editor.blur();
-						break;
-					}
-				}
-			}
-
-			// tag[contenteditable='false']
-			if (this._isUneditableNode(range, false)) {
-				e.preventDefault();
-				e.stopPropagation();
-				break;
-			}
-
-			// component
-			if (
-				(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;
-				if (!nextEl) break;
-				if (this.component.is(nextEl)) {
-					e.preventDefault();
-
-					if (dom.check.isZeroWidth(formatEl)) {
-						dom.utils.removeItem(formatEl);
-						// table component
-						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;
-						}
-					}
-
-					// select file component
-					const fileComponentInfo = this.component.get(nextEl);
-					if (fileComponentInfo) {
-						e.stopPropagation();
-						if (this.component.select(fileComponentInfo.target, fileComponentInfo.pluginName) === false) this.editor.blur();
-					} else if (this.component.is(nextEl)) {
-						e.stopPropagation();
-						dom.utils.removeItem(nextEl);
-					}
-
-					break;
-				}
-			}
-
-			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 && dom.check.isNonEditable(sel.nextSibling)) {
-					e.preventDefault();
-					e.stopPropagation();
-					dom.utils.removeItem(sel.nextSibling);
-					break;
-				} else if (this.component.is(sel)) {
-					e.preventDefault();
-					e.stopPropagation();
-					dom.utils.removeItem(sel);
-					break;
-				}
-			}
-
-			// format attributes
-			if (!selectRange && this.format.isEdgeLine(range.endContainer, range.endOffset, 'end')) {
-				if (this.format.isLine(formatEl.nextElementSibling)) {
-					this._formatAttrsTemp = formatEl.attributes;
-				}
-			}
-
-			// nested list
-			formatEl = this.format.getLine(range.startContainer, null);
-			rangeEl = this.format.getBlock(formatEl, null);
-			if (
-				dom.check.isListCell(formatEl) &&
-				dom.check.isList(rangeEl) &&
-				(selectionNode === formatEl ||
-					(selectionNode.nodeType === 3 &&
-						(!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();
-
-				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 (dom.check.isList(next)) {
-						const child = next.firstElementChild;
-						children = child.childNodes;
-						con = children[0];
-						while (children[0]) {
-							formatEl.insertBefore(children[0], next);
-						}
-						dom.utils.removeItem(child);
-					} else {
-						con = next.firstChild;
-						children = next.childNodes;
-						while (children[0]) {
-							formatEl.appendChild(children[0]);
-						}
-						dom.utils.removeItem(next);
-					}
-					this.selection.setRange(con, 0, con, 0);
-					this.history.push(true);
-				}
-				break;
-			}
-
-			break;
-		}
-		case 'Tab' /** tab key */: {
-			if (this.options.get('tabDisable')) break;
-			e.preventDefault();
-			if (ctrl || alt || dom.check.isWysiwygFrame(selectionNode)) break;
-
-			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 firstCell = dom.check.isListCell(selectedFormats[0]),
-				lastCell = dom.check.isListCell(selectedFormats[selectedFormats.length - 1]);
-			let r = {
-				sc: range.startContainer,
-				so: range.startOffset,
-				ec: range.endContainer,
-				eo: range.endOffset
-			};
-			for (let i = 0, len = selectedFormats.length, f; i < len; i++) {
-				f = selectedFormats[i];
-				if (dom.check.isListCell(f)) {
-					if (!f.previousElementSibling && !shift) {
-						continue;
-					} else {
-						cells.push(f);
-					}
-				} else {
-					lines.push(f);
-				}
-			}
-
-			// Nested list
-			if (cells.length > 0 && isEdge) {
-				r = this.format._applyNestedList(cells, shift);
-			}
-
-			// Lines tab
-			if (lines.length > 0) {
-				if (!shift) {
-					if (lines.length === 1) {
-						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 = tabText.length;
-						}
-						if (!lastCell) {
-							r.ec = tabText;
-							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 (dom.check.isBreak(child)) {
-								lines[i].insertBefore(tabText.cloneNode(false), child);
-							} else {
-								child.textContent = tabText.textContent + child.textContent;
-							}
-						}
-
-						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 (!lastCell && endChild) {
-							r.ec = endChild;
-							r.eo = endChild.textContent.length;
-						}
-					}
-				} else {
-					const len = lines.length - 1;
-					for (let i = 0, line; i <= len; i++) {
-						line = lines[i].childNodes;
-						for (let c = 0, cLen = line.length, child; c < cLen; c++) {
-							child = line[c];
-							if (!child) break;
-							if (dom.check.isZeroWidth(child)) continue;
-
-							if (/^\s{1,4}$/.test(child.textContent)) {
-								dom.utils.removeItem(child);
-							} else if (/^\s{1,4}/.test(child.textContent)) {
-								child.textContent = child.textContent.replace(/^\s{1,4}/, '');
-							}
-
-							break;
-						}
-					}
-
-					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 (!lastCell && endChild) {
-						r.ec = endChild;
-						r.eo = endChild.textContent.length;
-					}
-				}
-			}
-
-			this.selection.setRange(r.sc, r.so, r.ec, r.eo);
-			this.history.push(false);
-
-			break;
-		}
-		case 'Enter' /** enter key */: {
-			this.component.deselect();
-			const brBlock = this.format.getBrLine(selectionNode, null);
-
-			if (this.editor.frameOptions.get('charCounter_type') === 'byte-html') {
-				let enterHTML = '';
-				if ((!shift && brBlock) || shift) {
-					enterHTML = '<br>';
-				} else {
-					enterHTML = '<' + formatEl.nodeName + '><br></' + formatEl.nodeName + '>';
-				}
-
-				if (!this.char.check(enterHTML)) {
-					e.preventDefault();
-					return false;
-				}
-			}
-
-			if (!shift) {
-				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);
-					const newFormat = this.format.addLine(formatEl, this.options.get('defaultLine'));
-					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 {
-						this.selection.setRange(temp, 0, temp, 0);
-					}
-
-					// enter scroll
-					this.__enterScrollTo(range);
-					break;
-				} else if (rangeEl && formatEl && !dom.check.isTableCell(rangeEl) && !/^FIGCAPTION$/i.test(rangeEl.nodeName)) {
-					const rangeEnt = this.selection.getRange();
-					if (dom.check.isEdgePoint(rangeEnt.endContainer, rangeEnt.endOffset) && dom.check.isList(selectionNode.nextSibling)) {
-						this.__enterPrevent(e);
-						const br = dom.utils.createElement('BR');
-						const newEl = dom.utils.createElement('LI', null, br);
-
-						formatEl.parentNode.insertBefore(newEl, formatEl.nextElementSibling);
-						newEl.appendChild(selectionNode.nextSibling);
-
-						this.selection.setRange(br, 1, br, 1);
-
-						// enter scroll
-						this.__enterScrollTo(range);
-						break;
-					}
-
-					if (
-						(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 (dom.check.isListCell(rangeEl.parentElement)) {
-							const parentLi = formatEl.parentNode.parentElement;
-							rangeEl = parentLi.parentElement;
-							const newListCell = dom.utils.createElement('LI');
-							newListCell.innerHTML = '<br>';
-							dom.utils.copyTagAttributes(newListCell, formatEl, this.options.get('lineAttrReset'));
-							newEl = newListCell;
-							rangeEl.insertBefore(newEl, parentLi.nextElementSibling);
-						} else {
-							let newFormat;
-							if (dom.check.isTableCell(rangeEl.parentElement)) {
-								newFormat = 'DIV';
-							} else if (dom.check.isList(rangeEl.parentElement)) {
-								newFormat = 'LI';
-							} else if (this.format.isLine(rangeEl.nextElementSibling)) {
-								newFormat = rangeEl.nextElementSibling.nodeName;
-							} else if (this.format.isLine(rangeEl.previousElementSibling)) {
-								newFormat = rangeEl.previousElementSibling.nodeName;
-							} else {
-								newFormat = this.options.get('defaultLine');
-							}
-
-							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);
-						}
-
-						newEl.innerHTML = '<br>';
-						this.nodeTransform.removeAllParents(formatEl, null, null);
-						this.selection.setRange(newEl, 1, newEl, 1);
-						break;
-					}
-				}
-
-				if (brBlock) {
-					this.__enterPrevent(e);
-					const selectionFormat = selectionNode === brBlock;
-					const wSelection = this.selection.get();
-					const children = selectionNode.childNodes,
-						offset = wSelection.focusOffset,
-						prev = selectionNode.previousElementSibling,
-						next = selectionNode.nextSibling;
-
-					if (
-						!this.format.isClosureBrLine(brBlock) &&
-						children &&
-						((selectionFormat &&
-							range.collapsed &&
-							children.length - 1 <= offset + 1 &&
-							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 &&
-							dom.check.isBreak(children[offset - 1])) ||
-							(!selectionFormat &&
-								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) 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.__enterScrollTo(range);
-						break;
-					}
-
-					if (selectionFormat) {
-						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;
-						if (brBlock === focusNode) {
-							focusNode = focusNode.childNodes[wOffset - offset > 1 ? wOffset - 1 : wOffset];
-						}
-
-						this.selection.setRange(focusNode, 1, focusNode, 1);
-					} else {
-						const focusNext = wSelection.focusNode.nextSibling;
-						const br = dom.utils.createElement('BR');
-						this.html.insertNode(br, { afterNode: null, skipCharCount: true });
-
-						const brPrev = br.previousSibling,
-							brNext = br.nextSibling;
-						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 {
-							this.selection.setRange(brNext, 0, brNext, 0);
-						}
-					}
-
-					this._onShortcutKey = true;
-
-					// enter scroll
-					this.__enterScrollTo(range);
-					break;
-				}
-
-				// set format attrs - edge
-				if (range.collapsed && (formatStartEdge || formatEndEdge)) {
-					this.__enterPrevent(e);
-					const focusBR = dom.utils.createElement('BR');
-					const newFormat = dom.utils.createElement(formatEl.nodeName, null, focusBR);
-
-					dom.utils.copyTagAttributes(newFormat, formatEl, this.options.get('lineAttrReset'));
-
-					let child = focusBR;
-					do {
-						if (!dom.check.isBreak(selectionNode) && selectionNode.nodeType === 1) {
-							const f = /** @type {HTMLElement} */ (selectionNode.cloneNode(false));
-							f.appendChild(child);
-							child = f;
-						}
-						selectionNode = selectionNode.parentElement;
-					} while (formatEl !== selectionNode && formatEl.contains(selectionNode));
-
-					newFormat.appendChild(child);
-					formatEl.parentNode.insertBefore(newFormat, formatStartEdge && !formatEndEdge ? formatEl : formatEl.nextElementSibling);
-					if (formatEndEdge) {
-						this.selection.setRange(focusBR, 1, focusBR, 1);
-					} else {
-						const firstEl = formatEl.firstChild || formatEl;
-						this.selection.setRange(firstEl, 0, firstEl, 0);
-					}
-
-					// enter scroll
-					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 = /** @type {HTMLElement} */ (formatEl.cloneNode(false));
-						newFormat.innerHTML = '<br>';
-						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 (dom.check.isWysiwygFrame(rcon.container)) {
-								this.__enterPrevent(e);
-								fc.get('wysiwyg').appendChild(newFormat);
-								newEl = newFormat;
-								dom.utils.copyTagAttributes(newEl, formatEl, this.options.get('lineAttrReset'));
-								this.selection.setRange(newEl, offset, newEl, offset);
-							}
-
-							// enter scroll
-							this.__enterScrollTo(range);
-							break;
-						}
-
-						const innerRange = this.format.getBlock(rcon.container);
-						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);
-								newEl = newFormat;
-								offset = 0;
-							} else {
-								offset = rcon.offset;
-								if (formatStartEdge) {
-									const tempEl = newEl.parentNode.insertBefore(newFormat, newEl);
-									if (formatEndEdge) {
-										newEl = tempEl;
-										offset = 0;
-									}
-								}
-							}
-						} else {
-							if (formatEndEdge && formatStartEdge) {
-								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, dom.query.getNodeDepth(formatEl));
-							}
-						}
-					} else {
-						if (dom.check.isZeroWidth(formatEl)) {
-							newEl = this.format.addLine(formatEl, formatEl.cloneNode(false));
-						} else {
-							newEl = this.nodeTransform.split(range.endContainer, range.endOffset, dom.query.getNodeDepth(formatEl));
-						}
-					}
-
-					this.__enterPrevent(e);
-					dom.utils.copyTagAttributes(newEl, formatEl, this.options.get('lineAttrReset'));
-					this.selection.setRange(newEl, offset, newEl, offset);
-
-					// enter scroll
-					this.__enterScrollTo(range);
-					break;
-				}
-			}
-
-			if (selectRange) {
-				// enter scroll
-				this.__enterScrollTo(range);
-				break;
-			}
-
-			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.__enterScrollTo(range);
-			}
-
-			break;
-		}
-	}
-
-	if (shift && (isOSX_IOS ? alt : ctrl) && keyCodeMap.isSpace(keyCode)) {
-		e.preventDefault();
-		e.stopPropagation();
-		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 && !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);
-	}
-
-	// 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 'ArrowUp' /** up key */:
-			if (this.component.is(formatEl.previousElementSibling)) {
-				cmponentInfo = this.component.get(formatEl.previousElementSibling);
-			}
-			break;
-		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 'ArrowDown' /** down key */:
-			if (this.component.is(formatEl.nextElementSibling)) {
-				cmponentInfo = this.component.get(formatEl.nextElementSibling);
-			}
-			break;
-		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);
-				}
-			}
-			break;
-	}
-
-	if (cmponentInfo && !cmponentInfo.options?.isInputComponent) {
-		e.preventDefault();
-		if (this.component.select(cmponentInfo.target, cmponentInfo.pluginName) === false) this.editor.blur();
-	}
-}
-
-/**
- * @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.code;
-	const ctrl = keyCodeMap.isCtrl(e);
-	const alt = keyCodeMap.isAlt(e);
-
-	if (ctrl) keyState.ctrl = false;
-	if (alt) keyState.alt = false;
-
-	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) && !keyCodeMap.isEsc(keyCode)) || !range.collapsed)) {
-		if (this.editor.isBalloonAlways || this.editor.isSubBalloonAlways) {
-			if (!keyCodeMap.isEsc(keyCode)) this._showToolbarBalloonDelay();
-		} else {
-			if (this.editor.isSubBalloon) this.subToolbar._showBalloon();
-			else this.toolbar._showBalloon();
-			return;
-		}
-	}
-
-	/** when format tag deleted */
-	if (keyCodeMap.isBackspace(keyCode) && dom.check.isWysiwygFrame(selectionNode) && selectionNode.textContent === '' && selectionNode.children.length === 0) {
-		e.preventDefault();
-		e.stopPropagation();
-
-		selectionNode.innerHTML = '';
-
-		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;
-	}
-
-	const formatEl = this.format.getLine(selectionNode, null);
-	const rangeEl = this.format.getBlock(selectionNode, null);
-	const attrs = this._formatAttrsTemp;
-
-	if (formatEl && attrs) {
-		for (let i = 0, len = attrs.length; i < len; i++) {
-			if (keyCodeMap.isEnter(keyCode) && /^id$/i.test(attrs[i].name)) {
-				formatEl.removeAttribute('id');
-				continue;
-			}
-			formatEl.setAttribute(attrs[i].name, attrs[i].value);
-		}
-		this._formatAttrsTemp = 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 = !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;
-		const frontZeroWidthCnt = (selectionNode.textContent.substring(0, eo).match(FRONT_ZEROWIDTH) || '').length;
-		so = range.startOffset - frontZeroWidthCnt;
-		eo = range.endOffset - frontZeroWidthCnt;
-		selectionNode.textContent = selectionNode.textContent.replace(unicode.zeroWidthRegExp, '');
-		this.selection.setRange(selectionNode, so < 0 ? 0 : so, selectionNode, eo < 0 ? 0 : eo);
-	}
-
-	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') {
-				if (this.__retainTimer) {
-					this.__retainTimer = _w.clearTimeout(this.__retainTimer);
-					this._clearRetainStyleNodes(formatEl);
-				} else {
-					this.__retainTimer = _w.setTimeout(() => {
-						this.__retainTimer = null;
-					}, 0);
-					this._retainStyleNodes(formatEl, _styleNodes);
-				}
-			} else {
-				this.__retainTimer = null;
-				this._retainStyleNodes(formatEl, _styleNodes);
-			}
-		} else {
-			this._clearRetainStyleNodes(formatEl);
-		}
-	}
-
-	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 ((await this.triggerEvent('onKeyUp', { frameContext: fc, event: e })) === false) return;
-	// plugin event
-	if (this._callPluginEvent('onKeyUp', { frameContext: fc, event: e, range, line: formatEl }) === false) return;
-
-	if (keyCodeMap.isHistoryRelevantKey(keyCode)) {
-		this.history.push(true);
-	}
-}
+import { dom, env, unicode, keyCodeMap } from '../../../helper';
+
+const { _w, isOSX_IOS } = env;
+const FRONT_ZEROWIDTH = new RegExp(unicode.zeroWidthSpace + '+', '');
+
+const keyState = {
+	ctrl: false,
+	alt: false
+};
+let _styleNodes = null;
+
+/**
+ * @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) || '';
+	if (!this.char.test(data, true)) {
+		e.preventDefault();
+		e.stopPropagation();
+		return false;
+	}
+
+	// user event
+	if ((await this.triggerEvent('onInput', { frameContext: fc, event: e, data })) === false) return;
+	// plugin event
+	if (this._callPluginEvent('onInput', { frameContext: fc, event: e, data }) === false) return;
+
+	this.history.push(true);
+}
+
+/**
+ * @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 (dom.check.isInputElement(selectionNode)) return;
+	if (this.menu.currentDropdownName) return;
+
+	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 && fc.get('isReadOnly') && !keyCodeMap.isDirectionKey(keyCode)) {
+		e.preventDefault();
+		return false;
+	}
+
+	this.menu.dropdownOff();
+
+	if (this.editor.isBalloon) {
+		this._hideToolbar();
+	} else if (this.editor.isSubBalloon) {
+		this._hideToolbar_sub();
+	}
+
+	// user event
+	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 && !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;
+	}
+
+	// plugin event
+	if (this._callPluginEvent('onKeyDown', { frameContext: fc, event: e, range, line: formatEl }) === false) return;
+
+	switch (keyCode) {
+		case 'Backspace' /** backspace key */: {
+			this.component.deselect();
+			_styleNodes = this.__cacheStyleNodes;
+			if (selectRange && this._hardDelete()) {
+				e.preventDefault();
+				e.stopPropagation();
+				break;
+			}
+
+			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 &&
+				!dom.check.isListCell(formatEl) &&
+				this.format.isLine(formatEl) &&
+				(!this.format.isBrLine(formatEl) || this.format.isClosureBrLine(formatEl))
+			) {
+				// closure range
+				if (this.format.isClosureBlock(formatEl.parentNode)) {
+					e.preventDefault();
+					e.stopPropagation();
+					return false;
+				}
+				// maintain default format
+				if (dom.check.isWysiwygFrame(formatEl.parentNode) && formatEl.childNodes.length <= 1 && (!formatEl.firstChild || dom.check.isZeroWidth(formatEl.textContent))) {
+					e.preventDefault();
+					e.stopPropagation();
+
+					if (formatEl.nodeName.toUpperCase() === this.options.get('defaultLine').toUpperCase()) {
+						formatEl.innerHTML = '<br>';
+						const attrs = formatEl.attributes;
+						while (attrs[0]) {
+							formatEl.removeAttribute(attrs[0].name);
+						}
+					} else {
+						formatEl.parentNode.replaceChild(dom.utils.createElement(this.options.get('defaultLine'), null, '<br>'), formatEl);
+					}
+
+					this.editor._nativeFocus();
+					return false;
+				}
+			}
+
+			// clean remove tag
+			const startCon = range.startContainer;
+			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 = dom.utils.createElement('BR');
+						formatEl.appendChild(prev);
+					} else {
+						prev = next;
+					}
+				}
+
+				let con = startCon;
+				while (formatEl.contains(con) && !con.previousSibling) {
+					con = con.parentNode;
+				}
+
+				if (!formatEl.contains(con)) {
+					startCon.textContent = '';
+					this.nodeTransform.removeAllParents(startCon, null, formatEl);
+					break;
+				}
+			}
+
+			// line component
+			if (!selectRange && formatEl && (range.startOffset === 0 || selectionNode === formatEl)) {
+				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) this.editor.blur();
+						break;
+					}
+				}
+			}
+
+			// tag[contenteditable='false']
+			if (this._isUneditableNode(range, true)) {
+				e.preventDefault();
+				e.stopPropagation();
+				break;
+			}
+
+			// format attributes
+			if (!selectRange && this.format.isEdgeLine(range.startContainer, range.startOffset, 'front')) {
+				if (this.format.isLine(formatEl.previousElementSibling)) {
+					this._formatAttrsTemp = formatEl.previousElementSibling.attributes;
+				}
+			}
+
+			// nested list
+			const commonCon = range.commonAncestorContainer;
+			formatEl = this.format.getLine(range.startContainer, null);
+			rangeEl = this.format.getBlock(formatEl, null);
+			if (rangeEl && formatEl && !dom.check.isTableCell(rangeEl) && !/^FIGCAPTION$/i.test(rangeEl.nodeName)) {
+				if (
+					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) {
+						e.preventDefault();
+
+						this.html.remove();
+						if (range.startContainer.nodeType === 3) {
+							this.selection.setRange(range.startContainer, range.startContainer.textContent.length, range.startContainer, range.startContainer.textContent.length);
+						}
+
+						this.history.push(true);
+					} else {
+						let prev = formatEl.previousElementSibling || rangeEl.parentElement;
+						if (dom.check.isListCell(prev)) {
+							e.preventDefault();
+
+							let prevLast = prev;
+							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 = dom.utils.createTextNode(unicode.zeroWidthSpace);
+								rangeEl.parentNode.insertBefore(con, rangeEl.parentNode.firstChild);
+							}
+							const offset = con.nodeType === 3 ? con.textContent.length : 1;
+							const children = formatEl.childNodes;
+							let after = con;
+							let child = children[0];
+							while ((child = children[0])) {
+								prev.insertBefore(child, after.nextSibling);
+								after = child;
+							}
+
+							dom.utils.removeItem(formatEl);
+							if (rangeEl.children.length === 0) dom.utils.removeItem(rangeEl);
+
+							this.selection.setRange(con, offset, con, offset);
+							this.history.push(true);
+						}
+					}
+
+					break;
+				}
+
+				// detach range
+				if (!selectRange && range.startOffset === 0) {
+					let detach = true;
+					let comm = commonCon;
+					while (comm && comm !== rangeEl && !dom.check.isWysiwygFrame(comm)) {
+						if (comm.previousSibling) {
+							if (comm.previousSibling.nodeType === 1 || !dom.check.isZeroWidth(comm.previousSibling.textContent.trim())) {
+								detach = false;
+								break;
+							}
+						}
+						comm = comm.parentNode;
+					}
+
+					if (detach && rangeEl.parentNode) {
+						e.preventDefault();
+						this.format.removeBlock(rangeEl, { selectedFormats: dom.check.isListCell(formatEl) ? [formatEl] : null, newBlockElement: null, shouldDelete: false, skipHistory: false });
+						this.history.push(true);
+						break;
+					}
+				}
+			}
+
+			// component
+			if (!selectRange && formatEl && (range.startOffset === 0 || (selectionNode === formatEl ? formatEl.childNodes[range.startOffset] : false))) {
+				const sel = selectionNode === formatEl ? formatEl.childNodes[range.startOffset] : selectionNode;
+				const prev = formatEl.previousSibling;
+				// select file component
+				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) 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();
+						dom.utils.removeItem(prev);
+					}
+					break;
+				}
+				// delete nonEditable
+				if (sel && dom.check.isNonEditable(sel.previousSibling)) {
+					e.preventDefault();
+					e.stopPropagation();
+					dom.utils.removeItem(sel.previousSibling);
+					break;
+				}
+			}
+
+			break;
+		}
+		case 'Delete' /** delete key */: {
+			this.component.deselect();
+			_styleNodes = this.__cacheStyleNodes;
+			if (selectRange && this._hardDelete()) {
+				e.preventDefault();
+				e.stopPropagation();
+				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) : 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 (dom.check.isZeroWidth(formatEl.textContent)) dom.utils.removeItem(formatEl);
+						if (this.component.select(fileComponentInfo.target, fileComponentInfo.pluginName) === false) this.editor.blur();
+						break;
+					}
+				}
+			}
+
+			// tag[contenteditable='false']
+			if (this._isUneditableNode(range, false)) {
+				e.preventDefault();
+				e.stopPropagation();
+				break;
+			}
+
+			// component
+			if (
+				(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;
+				if (!nextEl) break;
+				if (this.component.is(nextEl)) {
+					e.preventDefault();
+
+					if (dom.check.isZeroWidth(formatEl)) {
+						dom.utils.removeItem(formatEl);
+						// table component
+						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;
+						}
+					}
+
+					// select file component
+					const fileComponentInfo = this.component.get(nextEl);
+					if (fileComponentInfo) {
+						e.stopPropagation();
+						if (this.component.select(fileComponentInfo.target, fileComponentInfo.pluginName) === false) this.editor.blur();
+					} else if (this.component.is(nextEl)) {
+						e.stopPropagation();
+						dom.utils.removeItem(nextEl);
+					}
+
+					break;
+				}
+			}
+
+			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 && dom.check.isNonEditable(sel.nextSibling)) {
+					e.preventDefault();
+					e.stopPropagation();
+					dom.utils.removeItem(sel.nextSibling);
+					break;
+				} else if (this.component.is(sel)) {
+					e.preventDefault();
+					e.stopPropagation();
+					dom.utils.removeItem(sel);
+					break;
+				}
+			}
+
+			// format attributes
+			if (!selectRange && this.format.isEdgeLine(range.endContainer, range.endOffset, 'end')) {
+				if (this.format.isLine(formatEl.nextElementSibling)) {
+					this._formatAttrsTemp = formatEl.attributes;
+				}
+			}
+
+			// nested list
+			formatEl = this.format.getLine(range.startContainer, null);
+			rangeEl = this.format.getBlock(formatEl, null);
+			if (
+				dom.check.isListCell(formatEl) &&
+				dom.check.isList(rangeEl) &&
+				(selectionNode === formatEl ||
+					(selectionNode.nodeType === 3 &&
+						(!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();
+
+				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 (dom.check.isList(next)) {
+						const child = next.firstElementChild;
+						children = child.childNodes;
+						con = children[0];
+						while (children[0]) {
+							formatEl.insertBefore(children[0], next);
+						}
+						dom.utils.removeItem(child);
+					} else {
+						con = next.firstChild;
+						children = next.childNodes;
+						while (children[0]) {
+							formatEl.appendChild(children[0]);
+						}
+						dom.utils.removeItem(next);
+					}
+					this.selection.setRange(con, 0, con, 0);
+					this.history.push(true);
+				}
+				break;
+			}
+
+			break;
+		}
+		case 'Tab' /** tab key */: {
+			if (this.options.get('tabDisable')) break;
+			e.preventDefault();
+			if (ctrl || alt || dom.check.isWysiwygFrame(selectionNode)) break;
+
+			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 firstCell = dom.check.isListCell(selectedFormats[0]),
+				lastCell = dom.check.isListCell(selectedFormats[selectedFormats.length - 1]);
+			let r = {
+				sc: range.startContainer,
+				so: range.startOffset,
+				ec: range.endContainer,
+				eo: range.endOffset
+			};
+			for (let i = 0, len = selectedFormats.length, f; i < len; i++) {
+				f = selectedFormats[i];
+				if (dom.check.isListCell(f)) {
+					if (!f.previousElementSibling && !shift) {
+						continue;
+					} else {
+						cells.push(f);
+					}
+				} else {
+					lines.push(f);
+				}
+			}
+
+			// Nested list
+			if (cells.length > 0 && isEdge) {
+				r = this.format._applyNestedList(cells, shift);
+			}
+
+			// Lines tab
+			if (lines.length > 0) {
+				if (!shift) {
+					if (lines.length === 1) {
+						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;
+							}
+						}
+
+						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 = tabText.length;
+						}
+						if (!lastCell) {
+							r.ec = tabText;
+							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 (dom.check.isBreak(child)) {
+								lines[i].insertBefore(tabText.cloneNode(false), child);
+							} else {
+								child.textContent = tabText.textContent + child.textContent;
+							}
+						}
+
+						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 (!lastCell && endChild) {
+							r.ec = endChild;
+							r.eo = endChild.textContent.length;
+						}
+					}
+				} else {
+					const len = lines.length - 1;
+					for (let i = 0, line; i <= len; i++) {
+						line = lines[i].childNodes;
+						for (let c = 0, cLen = line.length, child; c < cLen; c++) {
+							child = line[c];
+							if (!child) break;
+							if (dom.check.isZeroWidth(child)) continue;
+
+							if (/^\s{1,4}$/.test(child.textContent)) {
+								dom.utils.removeItem(child);
+							} else if (/^\s{1,4}/.test(child.textContent)) {
+								child.textContent = child.textContent.replace(/^\s{1,4}/, '');
+							}
+
+							break;
+						}
+					}
+
+					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 (!lastCell && endChild) {
+						r.ec = endChild;
+						r.eo = endChild.textContent.length;
+					}
+				}
+			}
+
+			this.selection.setRange(r.sc, r.so, r.ec, r.eo);
+			this.history.push(false);
+
+			break;
+		}
+		case 'Enter' /** enter key */: {
+			this.component.deselect();
+			const brBlock = this.format.getBrLine(selectionNode, null);
+
+			if (this.editor.frameOptions.get('charCounter_type') === 'byte-html') {
+				let enterHTML = '';
+				if ((!shift && brBlock) || shift) {
+					enterHTML = '<br>';
+				} else {
+					enterHTML = '<' + formatEl.nodeName + '><br></' + formatEl.nodeName + '>';
+				}
+
+				if (!this.char.check(enterHTML)) {
+					e.preventDefault();
+					return false;
+				}
+			}
+
+			if (!shift) {
+				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);
+					const newFormat = this.format.addLine(formatEl, this.options.get('defaultLine'));
+					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 {
+						this.selection.setRange(temp, 0, temp, 0);
+					}
+
+					// enter scroll
+					this.__enterScrollTo(range);
+					break;
+				} else if (rangeEl && formatEl && !dom.check.isTableCell(rangeEl) && !/^FIGCAPTION$/i.test(rangeEl.nodeName)) {
+					const rangeEnt = this.selection.getRange();
+					if (dom.check.isEdgePoint(rangeEnt.endContainer, rangeEnt.endOffset) && dom.check.isList(selectionNode.nextSibling)) {
+						this.__enterPrevent(e);
+						const br = dom.utils.createElement('BR');
+						const newEl = dom.utils.createElement('LI', null, br);
+
+						formatEl.parentNode.insertBefore(newEl, formatEl.nextElementSibling);
+						newEl.appendChild(selectionNode.nextSibling);
+
+						this.selection.setRange(br, 1, br, 1);
+
+						// enter scroll
+						this.__enterScrollTo(range);
+						break;
+					}
+
+					if (
+						(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 (dom.check.isListCell(rangeEl.parentElement)) {
+							const parentLi = formatEl.parentNode.parentElement;
+							rangeEl = parentLi.parentElement;
+							const newListCell = dom.utils.createElement('LI');
+							newListCell.innerHTML = '<br>';
+							dom.utils.copyTagAttributes(newListCell, formatEl, this.options.get('lineAttrReset'));
+							newEl = newListCell;
+							rangeEl.insertBefore(newEl, parentLi.nextElementSibling);
+						} else {
+							let newFormat;
+							if (dom.check.isTableCell(rangeEl.parentElement)) {
+								newFormat = 'DIV';
+							} else if (dom.check.isList(rangeEl.parentElement)) {
+								newFormat = 'LI';
+							} else if (this.format.isLine(rangeEl.nextElementSibling)) {
+								newFormat = rangeEl.nextElementSibling.nodeName;
+							} else if (this.format.isLine(rangeEl.previousElementSibling)) {
+								newFormat = rangeEl.previousElementSibling.nodeName;
+							} else {
+								newFormat = this.options.get('defaultLine');
+							}
+
+							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);
+						}
+
+						newEl.innerHTML = '<br>';
+						this.nodeTransform.removeAllParents(formatEl, null, null);
+						this.selection.setRange(newEl, 1, newEl, 1);
+						break;
+					}
+				}
+
+				if (brBlock) {
+					this.__enterPrevent(e);
+					const selectionFormat = selectionNode === brBlock;
+					const wSelection = this.selection.get();
+					const children = selectionNode.childNodes,
+						offset = wSelection.focusOffset,
+						prev = selectionNode.previousElementSibling,
+						next = selectionNode.nextSibling;
+
+					if (
+						!this.format.isClosureBrLine(brBlock) &&
+						children &&
+						((selectionFormat &&
+							range.collapsed &&
+							children.length - 1 <= offset + 1 &&
+							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 &&
+							dom.check.isBreak(children[offset - 1])) ||
+							(!selectionFormat &&
+								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) 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.__enterScrollTo(range);
+						break;
+					}
+
+					if (selectionFormat) {
+						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;
+						if (brBlock === focusNode) {
+							focusNode = focusNode.childNodes[wOffset - offset > 1 ? wOffset - 1 : wOffset];
+						}
+
+						this.selection.setRange(focusNode, 1, focusNode, 1);
+					} else {
+						const focusNext = wSelection.focusNode.nextSibling;
+						const br = dom.utils.createElement('BR');
+						this.html.insertNode(br, { afterNode: null, skipCharCount: true });
+
+						const brPrev = br.previousSibling,
+							brNext = br.nextSibling;
+						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 {
+							this.selection.setRange(brNext, 0, brNext, 0);
+						}
+					}
+
+					this._onShortcutKey = true;
+
+					// enter scroll
+					this.__enterScrollTo(range);
+					break;
+				}
+
+				// set format attrs - edge
+				if (range.collapsed && (formatStartEdge || formatEndEdge)) {
+					this.__enterPrevent(e);
+					const focusBR = dom.utils.createElement('BR');
+					const newFormat = dom.utils.createElement(formatEl.nodeName, null, focusBR);
+
+					dom.utils.copyTagAttributes(newFormat, formatEl, this.options.get('lineAttrReset'));
+
+					let child = focusBR;
+					do {
+						if (!dom.check.isBreak(selectionNode) && selectionNode.nodeType === 1) {
+							const f = /** @type {HTMLElement} */ (selectionNode.cloneNode(false));
+							f.appendChild(child);
+							child = f;
+						}
+						selectionNode = selectionNode.parentElement;
+					} while (formatEl !== selectionNode && formatEl.contains(selectionNode));
+
+					newFormat.appendChild(child);
+					formatEl.parentNode.insertBefore(newFormat, formatStartEdge && !formatEndEdge ? formatEl : formatEl.nextElementSibling);
+					if (formatEndEdge) {
+						this.selection.setRange(focusBR, 1, focusBR, 1);
+					} else {
+						const firstEl = formatEl.firstChild || formatEl;
+						this.selection.setRange(firstEl, 0, firstEl, 0);
+					}
+
+					// enter scroll
+					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 = /** @type {HTMLElement} */ (formatEl.cloneNode(false));
+						newFormat.innerHTML = '<br>';
+						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 (dom.check.isWysiwygFrame(rcon.container)) {
+								this.__enterPrevent(e);
+								fc.get('wysiwyg').appendChild(newFormat);
+								newEl = newFormat;
+								dom.utils.copyTagAttributes(newEl, formatEl, this.options.get('lineAttrReset'));
+								this.selection.setRange(newEl, offset, newEl, offset);
+							}
+
+							// enter scroll
+							this.__enterScrollTo(range);
+							break;
+						}
+
+						const innerRange = this.format.getBlock(rcon.container);
+						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);
+								newEl = newFormat;
+								offset = 0;
+							} else {
+								offset = rcon.offset;
+								if (formatStartEdge) {
+									const tempEl = newEl.parentNode.insertBefore(newFormat, newEl);
+									if (formatEndEdge) {
+										newEl = tempEl;
+										offset = 0;
+									}
+								}
+							}
+						} else {
+							if (formatEndEdge && formatStartEdge) {
+								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, dom.query.getNodeDepth(formatEl));
+							}
+						}
+					} else {
+						if (dom.check.isZeroWidth(formatEl)) {
+							newEl = this.format.addLine(formatEl, formatEl.cloneNode(false));
+						} else {
+							newEl = this.nodeTransform.split(range.endContainer, range.endOffset, dom.query.getNodeDepth(formatEl));
+						}
+					}
+
+					this.__enterPrevent(e);
+					dom.utils.copyTagAttributes(newEl, formatEl, this.options.get('lineAttrReset'));
+					this.selection.setRange(newEl, offset, newEl, offset);
+
+					// enter scroll
+					this.__enterScrollTo(range);
+					break;
+				}
+			}
+
+			if (selectRange) {
+				// enter scroll
+				this.__enterScrollTo(range);
+				break;
+			}
+
+			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.__enterScrollTo(range);
+			}
+
+			break;
+		}
+	}
+
+	if (shift && (isOSX_IOS ? alt : ctrl) && keyCodeMap.isSpace(keyCode)) {
+		e.preventDefault();
+		e.stopPropagation();
+		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 && !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);
+	}
+
+	// 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 'ArrowUp' /** up key */:
+			if (this.component.is(formatEl.previousElementSibling)) {
+				cmponentInfo = this.component.get(formatEl.previousElementSibling);
+			}
+			break;
+		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 'ArrowDown' /** down key */:
+			if (this.component.is(formatEl.nextElementSibling)) {
+				cmponentInfo = this.component.get(formatEl.nextElementSibling);
+			}
+			break;
+		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);
+				}
+			}
+			break;
+	}
+
+	if (cmponentInfo && !cmponentInfo.options?.isInputComponent) {
+		e.preventDefault();
+		if (this.component.select(cmponentInfo.target, cmponentInfo.pluginName) === false) this.editor.blur();
+	}
+}
+
+/**
+ * @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.code;
+	const ctrl = keyCodeMap.isCtrl(e);
+	const alt = keyCodeMap.isAlt(e);
+
+	if (ctrl) keyState.ctrl = false;
+	if (alt) keyState.alt = false;
+
+	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) && !keyCodeMap.isEsc(keyCode)) || !range.collapsed)) {
+		if (this.editor.isBalloonAlways || this.editor.isSubBalloonAlways) {
+			if (!keyCodeMap.isEsc(keyCode)) this._showToolbarBalloonDelay();
+		} else {
+			if (this.editor.isSubBalloon) this.subToolbar._showBalloon();
+			else this.toolbar._showBalloon();
+			return;
+		}
+	}
+
+	/** when format tag deleted */
+	if (keyCodeMap.isBackspace(keyCode) && dom.check.isWysiwygFrame(selectionNode) && selectionNode.textContent === '' && selectionNode.children.length === 0) {
+		e.preventDefault();
+		e.stopPropagation();
+
+		selectionNode.innerHTML = '';
+
+		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;
+	}
+
+	const formatEl = this.format.getLine(selectionNode, null);
+	const rangeEl = this.format.getBlock(selectionNode, null);
+	const attrs = this._formatAttrsTemp;
+
+	if (formatEl && attrs) {
+		for (let i = 0, len = attrs.length; i < len; i++) {
+			if (keyCodeMap.isEnter(keyCode) && /^id$/i.test(attrs[i].name)) {
+				formatEl.removeAttribute('id');
+				continue;
+			}
+			formatEl.setAttribute(attrs[i].name, attrs[i].value);
+		}
+		this._formatAttrsTemp = 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 = !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;
+		const frontZeroWidthCnt = (selectionNode.textContent.substring(0, eo).match(FRONT_ZEROWIDTH) || '').length;
+		so = range.startOffset - frontZeroWidthCnt;
+		eo = range.endOffset - frontZeroWidthCnt;
+		selectionNode.textContent = selectionNode.textContent.replace(unicode.zeroWidthRegExp, '');
+		this.selection.setRange(selectionNode, so < 0 ? 0 : so, selectionNode, eo < 0 ? 0 : eo);
+	}
+
+	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') {
+				if (this.__retainTimer) {
+					this.__retainTimer = _w.clearTimeout(this.__retainTimer);
+					this._clearRetainStyleNodes(formatEl);
+				} else {
+					this.__retainTimer = _w.setTimeout(() => {
+						this.__retainTimer = null;
+					}, 0);
+					this._retainStyleNodes(formatEl, _styleNodes);
+				}
+			} else {
+				this.__retainTimer = null;
+				this._retainStyleNodes(formatEl, _styleNodes);
+			}
+		} else {
+			this._clearRetainStyleNodes(formatEl);
+		}
+	}
+
+	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 ((await this.triggerEvent('onKeyUp', { frameContext: fc, event: e })) === false) return;
+	// plugin event
+	if (this._callPluginEvent('onKeyUp', { frameContext: fc, event: e, range, line: formatEl }) === false) return;
+
+	if (keyCodeMap.isHistoryRelevantKey(keyCode)) {
+		this.history.push(true);
+	}
+}