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

package/src/core/event/executor.js

@@ -0,0 +1,27 @@
+import common from './effects/common.registry';
+import keydown from './effects/keydown.registry';
+
+const HALT = 'action.stop';
+
+/**
+ * @typedef {import('./actions').Action[]} EventActions
+ */
+
+/**
+ * @description Execute actions sequentially by dispatching each action to its corresponding effect handler.
+ * Stops execution early if a HALT action is encountered or if any effect returns `false`.
+ * @param {EventActions} actions - Array of actions to execute
+ * @param {*} effContext - Effect context containing ports, ctx, and event
+ * @returns {Promise<false|undefined>} Returns `false` if execution was halted, `undefined` if all actions completed.
+ */
+export async function actionExecutor(actions, effContext) {
+	const effects = { ...common, ...keydown };
+	for (const a of actions) {
+		if (a.t === HALT) return false;
+		const eff = effects[a.t];
+		if (eff) {
+			const r = await eff(effContext, a.p);
+			if (r === false) return false;
+		}
+	}
+}

package/src/core/{base/eventHandlers → event/handlers}/handler_toolbar.js

@@ -1,13 +1,12 @@
 import { dom, env } from '../../../helper';
 
-const { isMobile } = env;
+const { isMobile, _w } = env;
 
 /**
- * @typedef {Omit<import('../eventManager').default & Partial<__se__EditorInjector>, 'eventManager'>} EventManagerThis_handler_toolbar
+ * @typedef {import('../eventOrchestrator').default} EventManagerThis_handler_toolbar
  */
 
 /**
- * @private
  * @this {EventManagerThis_handler_toolbar}
  * @param {MouseEvent} e - Event object
  */
@@ -15,21 +14,21 @@ export function ButtonsHandler(e) {
 	const eventTarget = dom.query.getEventTarget(e);
 	let target = eventTarget;
 
-	if (this.editor.isSubBalloon && !this.context.get('toolbar.sub.main')?.contains(target)) {
+	if (this.$.store.mode.isBalloon && !this.$.context.get('toolbar_sub_main')?.contains(target)) {
 		this._hideToolbar_sub();
 	}
 
 	const isInput = dom.check.isInputElement(target);
 
 	if (isInput) {
-		this.editor._preventBlur = false;
-	} else if (!this.editor.frameContext.get('wysiwyg').contains(this.selection.getNode())) {
-		this.editor.focus();
+		this.$.store.set('_preventBlur', false);
+	} else if (!this.$.frameContext.get('wysiwyg').contains(this.$.selection.getNode())) {
+		this.$.focusManager.focus();
 	}
 
 	if (dom.query.getParentElement(target, '.se-dropdown')) {
 		e.stopPropagation();
-		this.editor._notHideToolbar = true;
+		this.$.ui.preventToolbarHide(true);
 	} else {
 		let command = target.getAttribute('data-command');
 		let className = target.className;
@@ -42,26 +41,28 @@ export function ButtonsHandler(e) {
 
 		// toolbar input button
 		if (isInput && /^INPUT$/i.test(target?.getAttribute('data-type'))) {
-			this.editor._preventBlur = this._inputFocus = true;
-			if (!this.status.hasFocus) this.applyTagEffect();
+			this.$.store.set('_preventBlur', true);
+			this._inputFocus = true;
+			if (!this.$.store.get('hasFocus')) this.applyTagEffect();
 			/* event */
 			if (!dom.check.isInputElement(eventTarget) || eventTarget.disabled) return;
 
-			const plugin = this.plugins[command];
+			const plugin = this.$.plugins[command];
 			if (!plugin) return;
 
 			if (this.__inputBlurEvent) this.__removeInput();
 
 			// blur event
-			if (typeof plugin.onInputChange === 'function') this.__inputPlugin = { obj: plugin, target: eventTarget, value: eventTarget.value };
-			this.__inputBlurEvent = this.addEvent(eventTarget, 'blur', (ev) => {
+			if (typeof plugin.toolbarInputChange === 'function') this.__inputPlugin = { obj: plugin, target: eventTarget, value: eventTarget.value };
+			this.__inputBlurEvent = this.$.eventManager.addEvent(eventTarget, 'blur', (ev) => {
 				if (plugin.isInputActive) return;
 
 				try {
 					const value = eventTarget.value.trim();
-					if (typeof plugin.onInputChange === 'function' && value !== this.__inputPlugin.value) plugin.onInputChange({ target: eventTarget, value, event: ev });
+					if (typeof plugin.toolbarInputChange === 'function' && value !== this.__inputPlugin.value) plugin.toolbarInputChange({ target: eventTarget, value, event: ev });
 				} finally {
-					this._w.setTimeout(() => (this._inputFocus = false), 0);
+					// Defer flag reset — wysiwyg focus event fires synchronously during blur and checks this flag
+					_w.setTimeout(() => (this._inputFocus = false), 0);
 					this.__removeInput();
 				}
 			});
@@ -69,38 +70,37 @@ export function ButtonsHandler(e) {
 			if (!plugin) return;
 
 			// keydown event
-			if (typeof plugin.onInputKeyDown === 'function') {
-				this.__inputKeyEvent = this.addEvent(eventTarget, 'keydown', (event) => {
-					plugin.onInputKeyDown({ target: eventTarget, event });
+			if (typeof plugin.toolbarInputKeyDown === 'function') {
+				this.__inputKeyEvent = this.$.eventManager.addEvent(eventTarget, 'keydown', (event) => {
+					plugin.toolbarInputKeyDown({ target: eventTarget, event });
 				});
 			}
 		} else if (this.__inputBlurEvent && this.__inputPlugin) {
 			const value = this.__inputPlugin.target.value.trim();
 			if (value !== this.__inputPlugin.value) {
-				this.__inputPlugin.obj.onInputChange({ target: this.__inputPlugin.target, value, event: e });
+				this.__inputPlugin.obj.toolbarInputChange({ target: this.__inputPlugin.target, value, event: e });
 			}
 
 			this.__removeInput();
 			return;
-		} else if (!this.editor.frameContext.get('isCodeView')) {
+		} else if (!this.$.frameContext.get('isCodeView')) {
 			if (isMobile) {
-				this.editor._preventBlur = true;
+				this.$.store.set('_preventBlur', true);
 			} else {
 				e.preventDefault();
 				if (env.isGecko && command) {
-					this._injectActiveEvent(target);
+					this.$.eventManager._injectActiveEvent(target);
 				}
 			}
 		}
 
-		if (command === this.menu.currentDropdownName || command === this.menu.currentContainerName) {
+		if (command === this.$.menu.currentDropdownName || command === this.$.menu.currentContainerName) {
 			e.stopPropagation();
 		}
 	}
 }
 
 /**
- * @private
  * @this {EventManagerThis_handler_toolbar}
  * @param {MouseEvent} e - Event object
  */
@@ -113,11 +113,11 @@ export function OnClick_menuTray(e) {
 	let k = '';
 	while (t && !/se-menu-tray/.test(t.className) && !k) {
 		t = t.parentElement;
-		k = t.getAttribute('data-key');
+		k = t?.getAttribute('data-key');
 	}
 	if (!k) return;
 
-	const plugin = this.plugins[k];
+	const plugin = this.$.plugins[k];
 	if (!plugin || typeof plugin.action !== 'function') return;
 
 	e.stopPropagation();
@@ -125,11 +125,10 @@ export function OnClick_menuTray(e) {
 }
 
 /**
- * @private
  * @this {EventManagerThis_handler_toolbar}
  * @param {MouseEvent} e - Event object
  */
 export function OnClick_toolbar(e) {
 	const eventTarget = dom.query.getEventTarget(e);
-	this.editor.runFromTarget(eventTarget);
+	this.$.commandDispatcher.runFromTarget(eventTarget);
 }

package/src/core/{base/eventHandlers → event/handlers}/handler_ww_clipboard.js

@@ -1,9 +1,12 @@
+import { env } from '../../../helper';
+
+const { _w } = env;
+
 /**
- * @typedef {Omit<import('../eventManager').default & Partial<__se__EditorInjector>, 'eventManager'>} EventManagerThis_handler_ww_clipboard
+ * @typedef {import('../eventOrchestrator').default} EventManagerThis_handler_ww_clipboard
  */
 
 /**
- * @private
  * @this {EventManagerThis_handler_ww_clipboard}
  * @param {ClipboardEvent} e - Event object
  */
@@ -14,7 +17,6 @@ export function OnPaste_wysiwyg(frameContext, e) {
 }
 
 /**
- * @private
  * @this {EventManagerThis_handler_ww_clipboard}
  * @param {ClipboardEvent} e - Event object
  */
@@ -22,7 +24,7 @@ export async function OnCopy_wysiwyg(frameContext, e) {
 	const clipboardData = e.clipboardData;
 
 	// user event
-	if ((await this.triggerEvent('onCopy', { frameContext, event: e, clipboardData })) === false) {
+	if ((await this.$.eventManager.triggerEvent('onCopy', { frameContext, event: e, clipboardData })) === false) {
 		e.preventDefault();
 		e.stopPropagation();
 		return false;
@@ -33,7 +35,6 @@ export async function OnCopy_wysiwyg(frameContext, e) {
 }
 
 /**
- * @private
  * @this {EventManagerThis_handler_ww_clipboard}
  * @param {ClipboardEvent} e - Event object
  */
@@ -41,7 +42,7 @@ export async function OnCut_wysiwyg(frameContext, e) {
 	const clipboardData = e.clipboardData;
 
 	// user event
-	if ((await this.triggerEvent('onCut', { frameContext, event: e, clipboardData })) === false) {
+	if ((await this.$.eventManager.triggerEvent('onCut', { frameContext, event: e, clipboardData })) === false) {
 		e.preventDefault();
 		e.stopPropagation();
 		return false;
@@ -50,7 +51,8 @@ export async function OnCut_wysiwyg(frameContext, e) {
 	const fcSelection = frameContext.get('_ww').getSelection();
 	this.__secopy = fcSelection.toString();
 
-	this._w.setTimeout(() => {
-		this.history.push(false);
+	// Defer history snapshot — browser applies the cut to the DOM after the cut event returns
+	_w.setTimeout(() => {
+		this.$.history.push(false);
 	}, 0);
 }

package/src/core/{base/eventHandlers → event/handlers}/handler_ww_dragDrop.js

@@ -1,21 +1,22 @@
-import { dom } from '../../../helper';
-import { _DragHandle } from '../../../modules';
+import { dom, env } from '../../../helper';
+import { _DragHandle } from '../../../modules/ui';
+
+const { _w } = env;
 
 /**
- * @typedef {Omit<import('../eventManager').default & Partial<__se__EditorInjector>, 'eventManager'>} EventManagerThis_handler_ww_dragDrop
+ * @typedef {import('../eventOrchestrator').default} EventManagerThis_handler_ww_dragDrop
  */
 
 /**
- * @private
  * @this {EventManagerThis_handler_ww_dragDrop}
- * @param {__se__FrameContext} fc - Frame context object
+ * @param {SunEditor.FrameContext} fc - Frame context object
  * @param {HTMLElement} dragCursor - Drag cursor element
  * @param {?HTMLElement} _iframeTopArea - Iframe top area element
  * @param {?HTMLElement} _innerToolbar - Inner toolbar element
  * @param {DragEvent} e - Event object
  */
 export function OnDragOver_wysiwyg(fc, dragCursor, _iframeTopArea, _innerToolbar, e) {
-	const { sc, so, ec, eo } = this.selection.getDragEventLocationRange(e);
+	const { sc, so, ec, eo } = this.$.selection.getDragEventLocationRange(e);
 	if (!sc) return;
 
 	e.preventDefault();
@@ -26,10 +27,10 @@ export function OnDragOver_wysiwyg(fc, dragCursor, _iframeTopArea, _innerToolbar
 
 	const _offset = { y: 0, x: 0 };
 	if (_iframeTopArea) {
-		const iframeOffset = this.offset.getGlobal(_iframeTopArea);
-		const toolbarH = _innerToolbar ? this.context.get('toolbar.main').offsetHeight : 0;
-		_offset.y = iframeOffset.top + toolbarH - this._w.scrollY;
-		_offset.x = iframeOffset.left - this._w.scrollX;
+		const iframeOffset = this.$.offset.getGlobal(_iframeTopArea);
+		const toolbarH = _innerToolbar ? this.$.context.get('toolbar_main').offsetHeight : 0;
+		_offset.y = iframeOffset.top + toolbarH - _w.scrollY;
+		_offset.x = iframeOffset.left - _w.scrollX;
 	}
 
 	const rect = cursorRange.getBoundingClientRect();
@@ -41,8 +42,8 @@ export function OnDragOver_wysiwyg(fc, dragCursor, _iframeTopArea, _innerToolbar
 			frameX = wwFrame.offsetLeft;
 			frameY = wwFrame.offsetTop;
 		}
-		dragCursor.style.left = `${rect.right + this._w.scrollX + _offset.x + frameX}px`;
-		dragCursor.style.top = `${rect.top + this._w.scrollY + _offset.y - 5 + frameY}px`;
+		dragCursor.style.left = `${rect.right + _w.scrollX + _offset.x + frameX}px`;
+		dragCursor.style.top = `${rect.top + _w.scrollY + _offset.y - 5 + frameY}px`;
 		dragCursor.style.height = `${rect.height + 10}px`;
 		dragCursor.style.display = 'block';
 	} else {
@@ -51,7 +52,6 @@ export function OnDragOver_wysiwyg(fc, dragCursor, _iframeTopArea, _innerToolbar
 }
 
 /**
- * @private
  * @this {EventManagerThis_handler_ww_dragDrop}
  * @param {HTMLElement} dragCursor - Drag cursor element
  */
@@ -60,9 +60,8 @@ export function OnDragEnd_wysiwyg(dragCursor) {
 }
 
 /**
- * @private
  * @this {EventManagerThis_handler_ww_dragDrop}
- * @param {__se__FrameContext} fc - Frame context object
+ * @param {SunEditor.FrameContext} fc - Frame context object
  * @param {HTMLElement} dragCursor - Drag cursor element
  * @param {DragEvent} e - Event object
  */
@@ -77,7 +76,7 @@ export function OnDrop_wysiwyg(fc, dragCursor, e) {
 		const dataTransfer = e.dataTransfer;
 		if (!dataTransfer) return true;
 
-		const { sc, so, ec, eo } = this.selection.getDragEventLocationRange(e);
+		const { sc, so, ec, eo } = this.$.selection.getDragEventLocationRange(e);
 		if (!sc) return;
 
 		if (dom.query.getParentElement(sc, '.se-disable-pointer')) {
@@ -88,17 +87,17 @@ export function OnDrop_wysiwyg(fc, dragCursor, e) {
 		if (_DragHandle.get('__dragContainer')) {
 			e.preventDefault();
 			if (_DragHandle.get('__dragContainer').contains(e.target)) {
-				this.component.deselect();
+				this.$.component.deselect();
 				return;
 			}
 
 			const dragContainer = _DragHandle.get('__dragContainer');
-			this.component.deselect();
-			this.selection.setRange(sc, so, ec, eo);
-			this.html.insertNode(dragContainer, { afterNode: null, skipCharCount: true });
+			this.$.component.deselect();
+			this.$.selection.setRange(sc, so, ec, eo);
+			this.$.html.insertNode(dragContainer, { afterNode: null, skipCharCount: true });
 
 			// document type page
-			if (fc.has('documentType-use-page')) {
+			if (fc.has('documentType_use_page')) {
 				fc.get('documentTypePageMirror').innerHTML = fc.get('wysiwyg').innerHTML;
 				fc.get('documentType').rePage(true);
 			}
@@ -106,8 +105,8 @@ export function OnDrop_wysiwyg(fc, dragCursor, e) {
 			return;
 		}
 
-		this.html.remove();
-		this.selection.setRange(sc, so, ec, eo);
+		this.$.html.remove();
+		this.$.selection.setRange(sc, so, ec, eo);
 		return this._dataTransferAction('drop', e, dataTransfer, fc);
 	} finally {
 		dragCursor.style.display = 'none';

package/src/core/event/handlers/handler_ww_input.js

@@ -0,0 +1,75 @@
+import { dom, keyCodeMap } from '../../../helper';
+
+/**
+ * @typedef {import('../eventOrchestrator').default} EventManagerThis_handler_ww_input
+ */
+
+/**
+ * @this {EventManagerThis_handler_ww_input}
+ * @param {SunEditor.FrameContext} fc - Frame context object
+ * @param {InputEvent} e - Event object
+ */
+export async function OnBeforeInput_wysiwyg(fc, e) {
+	if (fc.get('isReadOnly') || fc.get('isDisabled')) {
+		e.preventDefault();
+		e.stopPropagation();
+		return false;
+	}
+
+	const data = (e.data === null ? '' : e.data === undefined ? ' ' : e.data) || '';
+	if (!keyCodeMap.isComposing(e)) {
+		if (!this.$.char.test(data, false)) {
+			e.preventDefault();
+			e.stopPropagation();
+			return false;
+		}
+		this._handledInBefore = true;
+	} else {
+		this._handledInBefore = false;
+	}
+
+	// user event
+	if ((await this.$.eventManager.triggerEvent('onBeforeInput', { frameContext: fc, event: e, data })) === false) return;
+	// plugin event
+	await this._callPluginEventAsync('onBeforeInput', { frameContext: fc, event: e, data });
+}
+
+/**
+ * @this {EventManagerThis_handler_ww_input}
+ * @param {SunEditor.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 (!this.$.format.isNormalLine(formatEl) && !this.$.format.isBrLine(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._handledInBefore) {
+		if (!this.$.char.test(data, true)) {
+			e.preventDefault();
+			e.stopPropagation();
+			return false;
+		}
+	}
+	this._handledInBefore = false;
+
+	// user event
+	if ((await this.$.eventManager.triggerEvent('onInput', { frameContext: fc, event: e, data })) === false) return;
+	// plugin event
+	await this._callPluginEventAsync('onInput', { frameContext: fc, event: e, data });
+
+	this.$.history.push(true);
+}

package/src/core/event/handlers/handler_ww_key.js

@@ -0,0 +1,228 @@
+import { dom, env, unicode, keyCodeMap } from '../../../helper';
+import { actionExecutor } from '../executor';
+import { makePorts } from '../ports';
+import { reduceKeydown } from '../reducers/keydown.reducer';
+
+const { _w } = env;
+const FRONT_ZEROWIDTH = new RegExp(unicode.zeroWidthSpace + '+', '');
+
+const keyState = {
+	ctrl: false,
+	alt: false,
+};
+const _styleNodes = Object.preventExtensions({ value: [] });
+
+/**
+ * @typedef {import('../eventOrchestrator').default} EventManagerThis_handler_ww_key_input
+ */
+
+/**
+ * @this {EventManagerThis_handler_ww_key_input}
+ * @param {SunEditor.FrameContext} fc - Frame context object
+ * @param {KeyboardEvent} e - Event object
+ */
+export async function OnKeyDown_wysiwyg(fc, e) {
+	if ((this.isComposing = keyCodeMap.isComposing(e))) return true;
+	if (this.$.ui.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));
+
+	if (!ctrl && fc.get('isReadOnly') && !keyCodeMap.isDirectionKey(keyCode)) {
+		e.preventDefault();
+		return false;
+	}
+
+	this.$.menu.dropdownOff();
+
+	if (this.$.store.mode.isBalloon) {
+		this._hideToolbar();
+	} else if (this.$.store.mode.isSubBalloon) {
+		this._hideToolbar_sub();
+	}
+
+	// user event
+	if ((await this.$.eventManager.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 formatEl = /** @type {HTMLElement} */ (this.$.format.getLine(selectionNode, null) || selectionNode);
+
+	/** 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 ((await this._callPluginEventAsync('onKeyDown', { frameContext: fc, event: e, range, line: formatEl })) === false) return;
+
+	// reducer / actions
+	/** @type {import('../reducers/keydown.reducer').KeydownReducerCtx} */
+	const ctx = { e, fc, store: this.$.store, options: this.$.options, frameOptions: this.$.frameOptions, range, selectionNode, formatEl, keyCode, ctrl, alt, shift };
+	const ports = makePorts(this, { _styleNodes });
+
+	// action execute
+	const actions = await reduceKeydown(ports, ctx);
+	await actionExecutor(actions, { ports, ctx });
+}
+
+/**
+ * @this {EventManagerThis_handler_ww_key_input}
+ * @param {SunEditor.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.$.store.mode.isBalloon || this.$.store.mode.isSubBalloon) && (((this.$.store.mode.isBalloonAlways || this.$.store.mode.isSubBalloonAlways) && !keyCodeMap.isEsc(keyCode)) || !range.collapsed)) {
+		if (this.$.store.mode.isBalloonAlways || this.$.store.mode.isSubBalloonAlways) {
+			if (!keyCodeMap.isEsc(keyCode)) this._showToolbarBalloonDelay();
+		} else {
+			if (this.$.store.mode.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 currentNodeName = this.$.store.get('currentNodes')[0];
+		const oFormatTag = dom.utils.createElement(this.$.format.isLine(currentNodeName) && !dom.check.isListCell(currentNodeName) ? currentNodeName : 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 (
+		!this.$.format.isNormalLine(formatEl) &&
+		!this.$.format.isBrLine(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 && !dom.check.isListCell(formatEl)) {
+		const rsMode = this.$.options.get('retainStyleMode');
+		if (rsMode !== 'none' && _styleNodes.value?.length > 0) {
+			if (rsMode === 'repeat') {
+				if (this.__retainTimer) {
+					this.__retainTimer = _w.clearTimeout(this.__retainTimer);
+					this._clearRetainStyleNodes(formatEl);
+				} else {
+					// Timer as a "first press" flag — next keydown within the same tick clears and toggles to "remove" mode (repeat mode toggle)
+					this.__retainTimer = _w.setTimeout(() => {
+						this.__retainTimer = null;
+					}, 0);
+					this._retainStyleNodes(formatEl, _styleNodes.value);
+				}
+			} else {
+				this.__retainTimer = null;
+				this._retainStyleNodes(formatEl, _styleNodes.value);
+			}
+		} else {
+			this._clearRetainStyleNodes(formatEl);
+		}
+	}
+
+	// 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.$.eventManager.triggerEvent('onKeyUp', { frameContext: fc, event: e })) === false) return;
+	// plugin event
+	if ((await this._callPluginEventAsync('onKeyUp', { frameContext: fc, event: e, range, line: formatEl })) === false) return;
+
+	if (keyCodeMap.isHistoryRelevantKey(keyCode)) {
+		this.$.history.push(true);
+	}
+}