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

package/src/core/base/eventManager.js

@@ -3,7 +3,7 @@
  */
 
 import CoreInjector from '../../editorInjector/_core';
-import { domUtils, unicode, numbers, env, converter } from '../../helper';
+import { dom, unicode, numbers, env, converter } from '../../helper';
 import { _DragHandle } from '../../modules';
 
 // event handlers
@@ -15,78 +15,118 @@ import { OnDragOver_wysiwyg, OnDragEnd_wysiwyg, OnDrop_wysiwyg } from './eventHa
 
 const { _w, ON_OVER_COMPONENT, isMobile } = env;
 
-const EventManager = function (editor) {
+/**
+ * @typedef {Omit<EventManager & Partial<__se__EditorInjector>, 'eventManager'>} EventManagerThis
+ */
+
+/**
+ * @constructor
+ * @this {EventManagerThis}
+ * @description Event manager, editor's all event management class
+ * @param {__se__EditorCore} editor - The root editor instance
+ * @property {__se__EditorCore} editor - The root editor instance
+ */
+function EventManager(editor) {
 	CoreInjector.call(this, editor);
+
+	/**
+	 * @description Old browsers: When there is no 'e.isComposing' in the keyup event
+	 * @type {boolean}
+	 */
+	this.isComposing = false;
+
+	/** @type {Array<*>} */
 	this._events = [];
+	/** @type {RegExp} */
 	this._onButtonsCheck = new RegExp(`^(${Object.keys(editor.options.get('_defaultStyleTagMap')).join('|')})$`, 'i');
+	/** @type {boolean} */
 	this._onShortcutKey = false;
-	this.isComposing = false; // Old browsers: When there is no 'e.isComposing' in the keyup event.
+	/** @type {number} */
 	this._balloonDelay = null;
+	/** @type {ResizeObserver} */
 	this._wwFrameObserver = null;
+	/** @type {ResizeObserver} */
 	this._toolbarObserver = null;
-	this._lineBreakDir = null;
+	/** @type {Element|null} */
 	this._lineBreakComp = null;
+	/** @type {Object<string, *>|null} */
 	this._formatAttrsTemp = null;
+	/** @type {number} */
 	this._resizeClientY = 0;
+	/** @type {__se__GlobalEventInfo|null} */
 	this.__resize_editor = null;
+	/** @type {__se__GlobalEventInfo|null} */
 	this.__close_move = null;
+	/** @type {__se__GlobalEventInfo|null} */
 	this.__geckoActiveEvent = null;
+	/** @type {Array<Element>} */
 	this.__scrollparents = [];
+	/** @type {Array<Node>} */
 	this.__cacheStyleNodes = [];
+	/** @type {__se__GlobalEventInfo|null} */
 	this.__selectionSyncEvent = null;
+
 	// input plugins
+	/** @type {boolean} */
 	this._inputFocus = false;
+	/** @type {Object<string, *>|null} */
 	this.__inputPlugin = null;
+	/** @type {?__se__EventInfo=} */
 	this.__inputBlurEvent = null;
+	/** @type {?__se__EventInfo=} */
 	this.__inputKeyEvent = null;
+
 	// viewport
-	this._vitualKeyboardHeight = 0;
+	/** @type {HTMLInputElement} */
 	this.__focusTemp = this.carrierWrapper.querySelector('.__se__focus__temp__');
+	/** @type {number|void} */
 	this.__retainTimer = null;
+	/** @type {Element} */
 	this.__eventDoc = null;
+	/** @type {string} */
 	this.__secopy = null;
-	// this.__scrollID = '';
-};
+}
 
 EventManager.prototype = {
 	/**
+	 * @this {EventManagerThis}
 	 * @description Register for an event.
-	 * Only events registered with this method are unregistered or re-registered when methods such as 'setOptions', 'destroy' are called.
-	 * @param {Element|Array.<Element>} target Target element
+	 * - Only events registered with this method are unregistered or re-registered when methods such as 'setOptions', 'destroy' are called.
+	 * @param {*} target Target element
 	 * @param {string} type Event type
-	 * @param {Function} listener Event handler
-	 * @param {boolean|undefined} useCapture Event useCapture option
-	 * @return {boolean}
+	 * @param {(...args: *) => *} listener Event handler
+	 * @param {boolean|AddEventListenerOptions=} useCapture Event useCapture option
+	 * @return {__se__EventInfo|null} Registered event information
 	 */
 	addEvent(target, type, listener, useCapture) {
-		if (!target) return false;
+		if (!target) return null;
 		if (!numbers.is(target.length) || target.nodeName || (!Array.isArray(target) && target.length < 1)) target = [target];
-		if (target.length === 0) return false;
+		if (target.length === 0) return null;
 
 		const len = target.length;
 		for (let i = 0; i < len; i++) {
 			target[i].addEventListener(type, listener, useCapture);
 			this._events.push({
 				target: target[i],
-				type: type,
-				handler: listener,
-				useCapture: useCapture
+				type,
+				listener,
+				useCapture
 			});
 		}
 
 		return {
 			target: len > 1 ? target : target[0],
-			type: type,
+			type,
 			listener,
-			handler: listener,
-			useCapture: useCapture
+			useCapture
 		};
 	},
 
 	/**
+	 * @this {EventManagerThis}
 	 * @description Remove event
-	 * @param {object} params { target, type, listener, useCapture } = this.addEvent()
-	 * @returns {null}
+	 * @param {__se__EventInfo} params event info = this.addEvent()
+	 * @returns {undefined|null} Success: null, Not found: undefined
 	 */
 	removeEvent(params) {
 		if (!params) return;
@@ -96,9 +136,9 @@ EventManager.prototype = {
 		const listener = params.listener;
 		const useCapture = params.useCapture;
 
-		if (!target) return false;
-		if (!numbers.is(target.length) || target.nodeName || (!Array.isArray(target) && target.length < 1)) target = [target];
-		if (target.length === 0) return false;
+		if (!target) return;
+		if (!numbers.is(target.length) || target.nodeName || (!Array.isArray(target) && target.length < 1)) target = /** @type {Array<Element>} */ ([target]);
+		if (target.length === 0) return;
 
 		for (let i = 0, len = target.length; i < len; i++) {
 			target[i].removeEventListener(type, listener, useCapture);
@@ -108,12 +148,13 @@ EventManager.prototype = {
 	},
 
 	/**
+	 * @this {EventManagerThis}
 	 * @description Add an event to document.
-	 * When created as an Iframe, the same event is added to the document in the Iframe.
+	 * - When created as an Iframe, the same event is added to the document in the Iframe.
 	 * @param {string} type Event type
-	 * @param {Function} listener Event listener
-	 * @param {boolean|undefined} useCapture Use event capture
-	 * @return {type, listener, useCapture}
+	 * @param {(...args: *) => *} listener Event listener
+	 * @param {boolean|AddEventListenerOptions=} useCapture Use event capture
+	 * @return {__se__GlobalEventInfo} Registered event information
 	 */
 	addGlobalEvent(type, listener, useCapture) {
 		if (this.editor.frameOptions.get('iframe')) {
@@ -121,18 +162,20 @@ EventManager.prototype = {
 		}
 		this._w.addEventListener(type, listener, useCapture);
 		return {
-			type: type,
-			listener: listener,
-			useCapture: useCapture
+			type,
+			listener,
+			useCapture
 		};
 	},
 
 	/**
+	 * @this {EventManagerThis}
 	 * @description Remove events from document.
-	 * When created as an Iframe, the event of the document inside the Iframe is also removed.
-	 * @param {string|object} type Event type
-	 * @param {Function} listener Event listener
-	 * @param {boolean|undefined} useCapture Use event capture
+	 * - When created as an Iframe, the event of the document inside the Iframe is also removed.
+	 * @param {string|__se__GlobalEventInfo} type Event type or (Event info = this.addGlobalEvent())
+	 * @param {(...args: *) => *=} listener Event listener
+	 * @param {boolean|AddEventListenerOptions=} useCapture Use event capture
+	 * @returns {undefined|null} Success: null, Not found: undefined
 	 */
 	removeGlobalEvent(type, listener, useCapture) {
 		if (!type) return;
@@ -146,12 +189,15 @@ EventManager.prototype = {
 			this.editor.frameContext.get('_ww').removeEventListener(type, listener, useCapture);
 		}
 		this._w.removeEventListener(type, listener, useCapture);
+
+		return null;
 	},
 
 	/**
+	 * @this {EventManagerThis}
 	 * @description Activates the corresponding button with the tags information of the current cursor position,
-	 * such as 'bold', 'underline', etc., and executes the 'active' method of the plugins.
-	 * @param {Node|null} selectionNode selectionNode
+	 * - such as 'bold', 'underline', etc., and executes the 'active' method of the plugins.
+	 * @param {?Node=} selectionNode selectionNode
 	 * @returns {Node|undefined} selectionNode
 	 */
 	applyTagEffect(selectionNode) {
@@ -176,7 +222,8 @@ EventManager.prototype = {
 
 		if (this.component.is(selectionNode) && !this.component.__selectionSelected) {
 			const component = this.component.get(selectionNode);
-			this.component.select(component.target, component.pluginName, false);
+			if (!component) return;
+			this.component.select(component.target, component.pluginName);
 			return;
 		}
 
@@ -186,9 +233,9 @@ EventManager.prototype = {
 
 		const fc = this.editor.frameContext;
 		const notReadonly = !fc.get('isReadOnly');
-		for (let element = selectionNode; !domUtils.isWysiwygFrame(element); element = element.parentNode) {
+		for (let element = selectionNode; !dom.check.isWysiwygFrame(element); element = element.parentElement) {
 			if (!element) break;
-			if (element.nodeType !== 1 || domUtils.isBreak(element)) continue;
+			if (element.nodeType !== 1 || dom.check.isBreak(element)) continue;
 			if (this._isNonFocusNode(element)) {
 				this.editor.blur();
 				return;
@@ -217,11 +264,11 @@ EventManager.prototype = {
 			/** indent, outdent */
 			if (this.format.isLine(element)) {
 				/* Outdent */
-				if (!commandMapNodes.includes('outdent') && commandTargets.has('outdent') && (domUtils.isListCell(element) || (element.style[marginDir] && numbers.get(element.style[marginDir], 0) > 0))) {
+				if (!commandMapNodes.includes('outdent') && commandTargets.has('outdent') && (dom.check.isListCell(element) || (element.style[marginDir] && numbers.get(element.style[marginDir], 0) > 0))) {
 					if (
 						commandTargets.get('outdent').filter((e) => {
-							if (domUtils.isImportantDisabled(e)) return false;
-							e.removeAttribute('disabled');
+							if (dom.check.isImportantDisabled(e)) return false;
+							e.disabled = false;
 							return true;
 						}).length > 0
 					) {
@@ -230,15 +277,11 @@ EventManager.prototype = {
 				}
 				/* Indent */
 				if (!commandMapNodes.includes('indent') && commandTargets.has('indent')) {
-					const indentDisable = domUtils.isListCell(element) && !element.previousElementSibling;
+					const indentDisable = dom.check.isListCell(element) && !element.previousElementSibling;
 					if (
 						commandTargets.get('indent').filter((e) => {
-							if (domUtils.isImportantDisabled(e)) return false;
-							if (indentDisable) {
-								e.setAttribute('disabled', true);
-							} else {
-								e.removeAttribute('disabled');
-							}
+							if (dom.check.isImportantDisabled(e)) return false;
+							e.disabled = indentDisable;
 							return true;
 						}).length > 0
 					) {
@@ -253,7 +296,7 @@ EventManager.prototype = {
 			if (classOnCheck.test(nodeName)) {
 				nodeName = styleCommand[nodeName] || nodeName;
 				commandMapNodes.push(nodeName);
-				domUtils.addClass(commandTargets.get(nodeName), 'active');
+				dom.utils.addClass(commandTargets.get(nodeName), 'active');
 			}
 		}
 
@@ -275,21 +318,25 @@ EventManager.prototype = {
 	},
 
 	/**
+	 * @private
+	 * @this {EventManagerThis}
 	 * @description Gives an active effect when the mouse down event is blocked. (Used when "env.isGecko" is true)
-	 * @param {Element} target Target element
+	 * @param {Node} target Target element
 	 * @private
 	 */
 	_injectActiveEvent(target) {
-		domUtils.addClass(target, '__se__active');
+		dom.utils.addClass(target, '__se__active');
 		this.__geckoActiveEvent = this.addGlobalEvent('mouseup', () => {
-			domUtils.removeClass(target, '__se__active');
+			dom.utils.removeClass(target, '__se__active');
 			this.__geckoActiveEvent = this.removeGlobalEvent(this.__geckoActiveEvent);
 		});
 	},
 
 	/**
+	 * @private
+	 * @this {EventManagerThis}
 	 * @description remove class, display text.
-	 * @param {Array} ignoredList Igonred button list
+	 * @param {Array<string>} ignoredList Igonred button list
 	 * @private
 	 */
 	_setKeyEffect(ignoredList) {
@@ -303,20 +350,25 @@ EventManager.prototype = {
 			p = plugins[k];
 			for (let j = 0, jLen = c.length, e; j < jLen; j++) {
 				e = c[j];
-				if (!e || e.length === 0) continue;
+				if (!e) continue;
 				if (p) {
 					p.active(null, e);
 				} else if (/^outdent$/i.test(k)) {
-					if (!domUtils.isImportantDisabled(e)) e.setAttribute('disabled', true);
+					if (!dom.check.isImportantDisabled(e)) e.disabled = true;
 				} else if (/^indent$/i.test(k)) {
-					if (!domUtils.isImportantDisabled(e)) e.removeAttribute('disabled');
+					if (!dom.check.isImportantDisabled(e)) e.disabled = false;
 				} else {
-					domUtils.removeClass(e, 'active');
+					dom.utils.removeClass(e, 'active');
 				}
 			}
 		}
 	},
 
+	/**
+	 * @private
+	 * @this {EventManagerThis}
+	 * @description Show toolbar-balloon with delay.
+	 */
 	_showToolbarBalloonDelay() {
 		if (this._balloonDelay) {
 			_w.clearTimeout(this._balloonDelay);
@@ -330,12 +382,17 @@ EventManager.prototype = {
 		}, 250);
 	},
 
+	/**
+	 * @private
+	 * @this {EventManagerThis}
+	 * @description Show or hide the toolbar-balloon.
+	 */
 	_toggleToolbarBalloon() {
 		this.selection._init();
 		const range = this.selection.getRange();
 		const hasSubMode = this.options.has('_subMode');
 
-		if (this.menu._bindControllersOff || (!(hasSubMode ? this.editor.isSubBalloonAlways : this.editor.isBalloonAlways) && range.collapsed)) {
+		if (!(hasSubMode ? this.editor.isSubBalloonAlways : this.editor.isBalloonAlways) && range.collapsed) {
 			if (hasSubMode) this._hideToolbar_sub();
 			else this._hideToolbar();
 		} else {
@@ -344,38 +401,73 @@ EventManager.prototype = {
 		}
 	},
 
+	/**
+	 * @private
+	 * @this {EventManagerThis}
+	 * @description Hide the toolbar.
+	 */
 	_hideToolbar() {
 		if (!this.editor._notHideToolbar && !this.editor.frameContext.get('isFullScreen')) {
 			this.toolbar.hide();
 		}
 	},
 
+	/**
+	 * @private
+	 * @this {EventManagerThis}
+	 * @description Hide the Sub-Toolbar.
+	 */
 	_hideToolbar_sub() {
 		if (this.subToolbar && !this.editor._notHideToolbar) {
 			this.subToolbar.hide();
 		}
 	},
 
+	/**
+	 * @private
+	 * @this {EventManagerThis}
+	 * @description Checks if a node is a non-focusable element(.data-se-non-focus). (e.g. fileUpload.component > span)
+	 * @param {Node} node Node to check
+	 * @returns {boolean} True if the node is non-focusable, otherwise false
+	 */
 	_isNonFocusNode(node) {
-		return node.nodeType === 1 && node.getAttribute('data-se-non-focus') === 'true';
+		return dom.check.isElement(node) && node.getAttribute('data-se-non-focus') === 'true';
 	},
 
+	/**
+	 * @private
+	 * @this {EventManagerThis}
+	 * @description Determines if the "range" is within an uneditable node.
+	 * @param {Range} range The range object
+	 * @param {boolean} isFront Whether to check the start or end of the range
+	 * @returns {Node|null} The uneditable node if found, otherwise null
+	 */
 	_isUneditableNode(range, isFront) {
 		const container = isFront ? range.startContainer : range.endContainer;
 		const offset = isFront ? range.startOffset : range.endOffset;
 		const siblingKey = isFront ? 'previousSibling' : 'nextSibling';
 		const isElement = container.nodeType === 1;
-		let siblingNode;
 
+		let siblingNode;
 		if (isElement) {
-			siblingNode = this._isUneditableNode_getSibling(container.childNodes[offset], siblingKey, container);
+			siblingNode = /** @type {HTMLElement} */ (this._isUneditableNode_getSibling(container.childNodes[offset], siblingKey, container));
 			return siblingNode && siblingNode.nodeType === 1 && siblingNode.getAttribute('contenteditable') === 'false' ? siblingNode : null;
 		} else {
-			siblingNode = this._isUneditableNode_getSibling(container, siblingKey, container);
-			return domUtils.isEdgePoint(container, offset, isFront ? 'front' : 'end') && siblingNode && siblingNode.nodeType === 1 && siblingNode.getAttribute('contenteditable') === 'false' ? siblingNode : null;
+			siblingNode = /** @type {HTMLElement} */ (this._isUneditableNode_getSibling(container, siblingKey, container));
+			return dom.check.isEdgePoint(container, offset, isFront ? 'front' : 'end') && siblingNode && siblingNode.nodeType === 1 && siblingNode.getAttribute('contenteditable') === 'false' ? siblingNode : null;
 		}
 	},
 
+	/**
+	 * @private
+	 * @this {EventManagerThis}
+	 * @description Retrieves the sibling node of a selected node if it is uneditable.
+	 * - Used only in `_isUneditableNode`.
+	 * @param {Node} selectNode The selected node
+	 * @param {string} siblingKey The key to access the sibling (`previousSibling` or `nextSibling`)
+	 * @param {Node} container The parent container node
+	 * @returns {Node|null} The sibling node if found, otherwise null
+	 */
 	_isUneditableNode_getSibling(selectNode, siblingKey, container) {
 		if (!selectNode) return null;
 		let siblingNode = selectNode[siblingKey];
@@ -390,7 +482,13 @@ EventManager.prototype = {
 		return siblingNode;
 	},
 
-	// FireFox - table delete, Chrome - image, video, audio
+	/**
+	 * @private
+	 * @this {EventManagerThis}
+	 * @description Deletes specific elements such as tables in "Firefox" and media elements (image, video, audio) in "Chrome".
+	 * - Handles deletion logic based on selection range and node types.
+	 * @returns {boolean} Returns `true` if an element was deleted and focus was adjusted, otherwise `false`.
+	 */
 	_hardDelete() {
 		const range = this.selection.getRange();
 		const sc = range.startContainer;
@@ -399,56 +497,60 @@ EventManager.prototype = {
 		// table
 		const sCell = this.format.getBlock(sc);
 		const eCell = this.format.getBlock(ec);
-		const sIsCell = domUtils.isTableCell(sCell);
-		const eIsCell = domUtils.isTableCell(eCell);
-		const ancestor = range.commonAncestorContainer;
+		const sIsCell = dom.check.isTableCell(sCell);
+		const eIsCell = dom.check.isTableCell(eCell);
 		if (((sIsCell && !sCell.previousElementSibling && !sCell.parentElement.previousElementSibling) || (eIsCell && !eCell.nextElementSibling && !eCell.parentElement.nextElementSibling)) && sCell !== eCell) {
+			const ancestor = dom.query.getParentElement(range.commonAncestorContainer, dom.check.isFigure) || range.commonAncestorContainer;
 			if (!sIsCell) {
-				domUtils.removeItem(domUtils.getParentElement(eCell, (current) => ancestor === current.parentNode));
+				dom.utils.removeItem(dom.query.getParentElement(eCell, (current) => ancestor === current));
 			} else if (!eIsCell) {
-				domUtils.removeItem(domUtils.getParentElement(sCell, (current) => ancestor === current.parentNode));
+				dom.utils.removeItem(dom.query.getParentElement(sCell, (current) => ancestor === current));
 			} else {
-				domUtils.removeItem(domUtils.getParentElement(sCell, (current) => ancestor === current.parentNode));
+				dom.utils.removeItem(dom.query.getParentElement(sCell, (current) => ancestor === current));
 				this.editor._nativeFocus();
 				return true;
 			}
 		}
 
 		// component
-		const sComp = sc.nodeType === 1 ? domUtils.getParentElement(sc, '.se-component') : null;
-		const eComp = ec.nodeType === 1 ? domUtils.getParentElement(ec, '.se-component') : null;
-		if (sComp) domUtils.removeItem(sComp);
-		if (eComp) domUtils.removeItem(eComp);
+		const sComp = sc.nodeType === 1 ? dom.query.getParentElement(sc, '.se-component') : null;
+		const eComp = ec.nodeType === 1 ? dom.query.getParentElement(ec, '.se-component') : null;
+		if (sComp) dom.utils.removeItem(sComp);
+		if (eComp) dom.utils.removeItem(eComp);
 
 		return false;
 	},
 
 	/**
+	 * @private
+	 * @this {EventManagerThis}
 	 * @description If there is no default format, add a line and move 'selection'.
 	 * @param {string|null} formatName Format tag name (default: 'P')
-	 * @private
 	 */
 	_setDefaultLine(formatName) {
 		if (!this.options.get('__lineFormatFilter')) return null;
 		if (this.editor._fileManager.pluginRegExp.test(this.editor.currentControllerName)) return;
 
 		const range = this.selection.getRange();
-		const commonCon = range.commonAncestorContainer;
+		const commonCon = /** @type {HTMLElement} */ (range.commonAncestorContainer);
 		const startCon = range.startContainer;
 		const rangeEl = this.format.getBlock(commonCon, null);
-		let focusNode, offset, format;
+
+		/** @type {Node} */
+		let focusNode;
+		let offset, format;
 
 		if (rangeEl) {
-			format = domUtils.createElement(formatName || this.options.get('defaultLine'));
+			format = dom.utils.createElement(formatName || this.options.get('defaultLine'));
 			format.innerHTML = rangeEl.innerHTML;
 			if (format.childNodes.length === 0) format.innerHTML = unicode.zeroWidthSpace;
 
 			rangeEl.innerHTML = format.outerHTML;
 			format = rangeEl.firstChild;
-			focusNode = domUtils.getEdgeChildNodes(format, null).sc;
+			focusNode = dom.query.getEdgeChildNodes(format, null).sc;
 
 			if (!focusNode) {
-				focusNode = domUtils.createTextNode(unicode.zeroWidthSpace);
+				focusNode = dom.utils.createTextNode(unicode.zeroWidthSpace);
 				format.insertBefore(focusNode, format.firstChild);
 			}
 
@@ -457,13 +559,20 @@ EventManager.prototype = {
 			return;
 		}
 
-		const fileComponent = domUtils.getParentElement(commonCon, this.component.is.bind(this.component));
-		if (fileComponent && commonCon.nodeType === 3) {
-			const siblingEl = commonCon.nextElementSibling ? fileComponent : fileComponent.nextElementSibling;
-			const el = domUtils.createElement(this.options.get('defaultLine'), null, commonCon);
-			fileComponent.parentElement.insertBefore(el, siblingEl);
-			this.editor.focusEdge(el);
-			return;
+		if (commonCon.nodeType === 3 && this.component.is(commonCon.parentElement)) {
+			const compInfo = this.component.get(commonCon.parentElement);
+			const container = compInfo.container;
+
+			if (commonCon.parentElement === container) {
+				const siblingEl = commonCon.nextElementSibling ? container : container.nextElementSibling;
+				const el = dom.utils.createElement(this.options.get('defaultLine'), null, commonCon);
+				container.parentElement.insertBefore(el, siblingEl);
+				this.editor.focusEdge(el);
+				return;
+			}
+
+			this.component.select(compInfo.target, compInfo.pluginName);
+			return null;
 		} else if (commonCon.nodeType === 1 && commonCon.getAttribute('data-se-embed') === 'true') {
 			let el = commonCon.nextElementSibling;
 			if (!this.format.isLine(el)) el = this.format.addLine(commonCon, this.options.get('defaultLine'));
@@ -471,15 +580,15 @@ EventManager.prototype = {
 			return;
 		}
 
-		if ((this.format.isBlock(startCon) || domUtils.isWysiwygFrame(startCon)) && (this.component.is(startCon.children[range.startOffset]) || this.component.is(startCon.children[range.startOffset - 1]))) return;
-		if (domUtils.getParentElement(commonCon, domUtils.isExcludeFormat)) return null;
+		if ((this.format.isBlock(startCon) || dom.check.isWysiwygFrame(startCon)) && (this.component.is(startCon.children[range.startOffset]) || this.component.is(startCon.children[range.startOffset - 1]))) return;
+		if (dom.query.getParentElement(commonCon, dom.check.isExcludeFormat)) return null;
 
 		if (this.format.isBlock(commonCon) && commonCon.childNodes.length <= 1) {
 			let br = null;
-			if (commonCon.childNodes.length === 1 && domUtils.isBreak(commonCon.firstChild)) {
+			if (commonCon.childNodes.length === 1 && dom.check.isBreak(commonCon.firstChild)) {
 				br = commonCon.firstChild;
 			} else {
-				br = domUtils.createTextNode(unicode.zeroWidthSpace);
+				br = dom.utils.createTextNode(unicode.zeroWidthSpace);
 				commonCon.appendChild(br);
 			}
 
@@ -487,17 +596,18 @@ EventManager.prototype = {
 			return;
 		}
 
+		/* eslint-disable @typescript-eslint/no-unused-vars */
 		try {
 			if (commonCon.nodeType === 3) {
-				format = domUtils.createElement(formatName || this.options.get('defaultLine'));
+				format = dom.utils.createElement(formatName || this.options.get('defaultLine'));
 				commonCon.parentNode.insertBefore(format, commonCon);
 				format.appendChild(commonCon);
 			}
 
-			if (domUtils.isBreak(format.nextSibling)) domUtils.removeItem(format.nextSibling);
-			if (domUtils.isBreak(format.previousSibling)) domUtils.removeItem(format.previousSibling);
-			if (domUtils.isBreak(focusNode)) {
-				const zeroWidth = domUtils.createTextNode(unicode.zeroWidthSpace);
+			if (dom.check.isBreak(format.nextSibling)) dom.utils.removeItem(format.nextSibling);
+			if (dom.check.isBreak(format.previousSibling)) dom.utils.removeItem(format.previousSibling);
+			if (dom.check.isBreak(focusNode)) {
+				const zeroWidth = dom.utils.createTextNode(unicode.zeroWidthSpace);
 				focusNode.parentNode.insertBefore(zeroWidth, focusNode);
 				focusNode = zeroWidth;
 			}
@@ -505,34 +615,69 @@ EventManager.prototype = {
 			this.editor.execCommand('formatBlock', false, formatName || this.options.get('defaultLine'));
 			this.selection.removeRange();
 			this.selection._init();
+			this.editor.effectNode = null;
+			return;
 		}
+		/* eslint-disable @typescript-eslint/no-unused-vars */
 
 		if (format) {
-			if (domUtils.isBreak(format.nextSibling)) domUtils.removeItem(format.nextSibling);
-			if (domUtils.isBreak(format.previousSibling)) domUtils.removeItem(format.previousSibling);
-			if (domUtils.isBreak(focusNode)) {
-				const zeroWidth = domUtils.createTextNode(unicode.zeroWidthSpace);
+			if (dom.check.isBreak(format.nextSibling)) dom.utils.removeItem(format.nextSibling);
+			if (dom.check.isBreak(format.previousSibling)) dom.utils.removeItem(format.previousSibling);
+			if (dom.check.isBreak(focusNode)) {
+				const zeroWidth = dom.utils.createTextNode(unicode.zeroWidthSpace);
 				focusNode.parentNode.insertBefore(zeroWidth, focusNode);
 				focusNode = zeroWidth;
 			}
 		}
 
 		this.editor.effectNode = null;
-		this.editor._nativeFocus();
+		if (startCon) {
+			this.selection.setRange(startCon, 1, startCon, 1);
+		} else {
+			this.editor._nativeFocus();
+		}
 	},
 
-	_dataTransferAction(type, e, clipboardData, frameContext) {
+	/**
+	 * @private
+	 * @this {EventManagerThis}
+	 * @description Handles data transfer actions for paste and drop events.
+	 * - It processes clipboard data, triggers relevant events, and inserts cleaned data into the editor.
+	 * @param {"paste"|"drop"} type The type of event
+	 * @param {Event} e The original event object
+	 * @param {DataTransfer} clipboardData The clipboard data object
+	 * @param {__se__FrameContext} frameContext The frame context
+	 * @returns {Promise<boolean>} Resolves to `false` if processing is complete, otherwise allows default behavior
+	 */
+	async _dataTransferAction(type, e, clipboardData, frameContext) {
 		try {
-			this._setClipboardData(type, e, clipboardData, frameContext);
+			this.ui.showLoading();
+			await this._setClipboardData(type, e, clipboardData, frameContext);
 			e.preventDefault();
 			e.stopPropagation();
 			return false;
 		} catch (err) {
 			console.warn('[SUNEDITOR.paste.error]', err);
+		} finally {
+			this.ui.hideLoading();
 		}
 	},
 
+	/**
+	 * @private
+	 * @this {EventManagerThis}
+	 * @description Processes clipboard data for paste and drop events, handling text and HTML cleanup.
+	 * - Supports specific handling for content from Microsoft Office applications.
+	 * @param {"paste"|"drop"} type The type of event
+	 * @param {Event} e The original event object
+	 * @param {DataTransfer} clipboardData The clipboard data object
+	 * @param {__se__FrameContext} frameContext The frame context
+	 * @returns {Promise<boolean>} Resolves to `false` if processing is complete, otherwise allows default behavior
+	 */
 	async _setClipboardData(type, e, clipboardData, frameContext) {
+		e.preventDefault();
+		e.stopPropagation();
+
 		let plainText = clipboardData.getData('text/plain');
 		let cleanData = clipboardData.getData('text/html');
 		const onlyText = !cleanData;
@@ -557,20 +702,20 @@ EventManager.prototype = {
 		if (!SEData) {
 			const autoLinkify = this.options.get('autoLinkify');
 			if (autoLinkify) {
-				const dom = new DOMParser().parseFromString(cleanData, 'text/html');
-				domUtils.getListChildNodes(dom.body, converter.textToAnchor);
-				cleanData = dom.body.innerHTML;
+				const domParser = new DOMParser().parseFromString(cleanData, 'text/html');
+				dom.query.getListChildNodes(domParser.body, converter.textToAnchor);
+				cleanData = domParser.body.innerHTML;
 			}
 		}
 
 		if (!onlyText) {
-			cleanData = this.html.clean(cleanData, false, null, null);
+			cleanData = this.html.clean(cleanData, { forceFormat: false, whitelist: null, blacklist: null });
 		}
 
 		const maxCharCount = this.char.test(this.editor.frameOptions.get('charCounter_type') === 'byte-html' ? cleanData : plainText, false);
 		// user event - paste
 		if (type === 'paste') {
-			const value = await this.triggerEvent('onPaste', { frameContext, event: e, html: cleanData, maxCharCount, from });
+			const value = await this.triggerEvent('onPaste', { frameContext, event: e, data: cleanData, maxCharCount, from });
 			if (value === false) {
 				return false;
 			} else if (typeof value === 'string') {
@@ -580,7 +725,7 @@ EventManager.prototype = {
 		}
 		// user event - drop
 		if (type === 'drop') {
-			const value = await this.triggerEvent('onDrop', { frameContext, event: e, html: cleanData, maxCharCount, from });
+			const value = await this.triggerEvent('onDrop', { frameContext, event: e, data: cleanData, maxCharCount, from });
 			if (value === false) {
 				return false;
 			} else if (typeof value === 'string') {
@@ -593,7 +738,7 @@ EventManager.prototype = {
 		const files = clipboardData.files;
 		if (files.length > 0 && !MSData) {
 			for (let i = 0, len = files.length; i < len; i++) {
-				this._callPluginEvent('onPastAndDrop', { frameContext, event: e, file: files[i] });
+				this._callPluginEvent('onFilePasteAndDrop', { frameContext, event: e, file: files[i] });
 			}
 
 			return false;
@@ -604,11 +749,25 @@ EventManager.prototype = {
 		}
 
 		if (cleanData) {
-			this.html.insert(cleanData, false, true, true);
+			const domParser = new DOMParser().parseFromString(cleanData, 'text/html');
+			if (this._callPluginEvent('onPaste', { frameContext, event: e, data: cleanData, doc: domParser }) !== true) {
+				this.html.insert(cleanData, { selectInserted: false, skipCharCount: true, skipCleaning: true });
+			}
+
+			// document type
+			if (frameContext.has('documentType-use-header')) {
+				frameContext.get('documentType').reHeader();
+			}
 			return false;
 		}
 	},
 
+	/**
+	 * @private
+	 * @this {EventManagerThis}
+	 * @description Registers common UI events such as toolbar and menu interactions.
+	 * - Adds event listeners for various UI elements, sets up observers, and configures window events.
+	 */
 	_addCommonEvents() {
 		const buttonsHandler = ButtonsHandler.bind(this);
 		const toolbarHandler = OnClick_toolbar.bind(this);
@@ -639,22 +798,42 @@ EventManager.prototype = {
 			this._wwFrameObserver = new ResizeObserver((entries) => {
 				_w.setTimeout(() => {
 					entries.forEach((e) => {
-						this.editor.__callResizeFunction(this.editor.frameRoots.get(e.target.getAttribute('data-root-key')), -1, e);
+						this.editor.__callResizeFunction(this.frameRoots.get(e.target.getAttribute('data-root-key')), -1, e);
 					});
 				}, 0);
 			});
 		}
 
+		/** modal outside click */
+		if (this.options.get('closeModalOutsideClick')) {
+			this.addEvent(
+				this.carrierWrapper.querySelector('.se-modal .se-modal-inner'),
+				'click',
+				(e) => {
+					if (e.target === this.carrierWrapper.querySelector('.se-modal .se-modal-inner')) {
+						this.ui._offCurrentModal();
+					}
+				},
+				false
+			);
+		}
+
 		/** window event */
 		this.addEvent(_w, 'resize', OnResize_window.bind(this), false);
 		this.addEvent(_w, 'scroll', OnScroll_window.bind(this), false);
 		if (env.isMobile) {
-			this.addEvent(_w.visualViewport, 'resize', OnResize_viewport.bind(this), false);
-			this.addEvent(_w.visualViewport, 'scroll', OnScroll_viewport.bind(this), false);
-			this.addEvent(_w.visualViewport, 'scroll', converter.debounce(OnScroll_viewport_onKeyboardOn.bind(this), 200), false);
+			this.addEvent(_w.visualViewport, 'resize', OnChange_viewport.bind(this), false);
+			this.addEvent(_w.visualViewport, 'scroll', OnChange_viewport.bind(this), false);
 		}
 	},
 
+	/**
+	 * @private
+	 * @this {EventManagerThis}
+	 * @description Registers event listeners for the editor's frame, including text input, selection, and UI interactions.
+	 * - Handles events inside an iframe or within the standard wysiwyg editor.
+	 * @param {__se__FrameContext} fc The frame context object
+	 */
 	_addFrameEvents(fc) {
 		const isIframe = fc.get('options').get('iframe');
 		const eventWysiwyg = isIframe ? fc.get('_ww') : fc.get('wysiwyg');
@@ -683,7 +862,7 @@ EventManager.prototype = {
 		);
 		this.addEvent(eventWysiwyg, 'dragend', OnDragEnd_wysiwyg.bind(this, dragCursor), false);
 		this.addEvent(eventWysiwyg, 'drop', OnDrop_wysiwyg.bind(this, fc, dragCursor), false);
-		this.addEvent(eventWysiwyg, 'scroll', OnScroll_wysiwyg.bind(this, fc, eventWysiwyg), { passive: true, useCapture: false });
+		this.addEvent(eventWysiwyg, 'scroll', OnScroll_wysiwyg.bind(this, fc, eventWysiwyg), { passive: true, capture: false });
 		this.addEvent(eventWysiwyg, 'focus', OnFocus_wysiwyg.bind(this, fc), false);
 		this.addEvent(eventWysiwyg, 'blur', OnBlur_wysiwyg.bind(this, fc), false);
 		this.addEvent(codeArea, 'mousedown', OnFocus_code.bind(this, fc), false);
@@ -717,7 +896,7 @@ EventManager.prototype = {
 		if (isMobile) {
 			this.addEvent(eventWysiwyg, 'touchstart', wwMouseMove, {
 				passive: true,
-				useCapture: false
+				capture: false
 			});
 		}
 
@@ -738,7 +917,7 @@ EventManager.prototype = {
 
 		const OnScrollAbs = OnScroll_Abs.bind(this);
 		let scrollParent = fc.get('originElement');
-		while ((scrollParent = domUtils.getScrollParent(scrollParent.parentElement))) {
+		while ((scrollParent = dom.query.getScrollParent(scrollParent.parentElement))) {
 			this.__scrollparents.push(scrollParent);
 			this.addEvent(scrollParent, 'scroll', OnScrollAbs, false);
 		}
@@ -753,18 +932,32 @@ EventManager.prototype = {
 		}
 	},
 
+	/**
+	 * @private
+	 * @this {EventManagerThis}
+	 * @description Adds event listeners for resizing the status bar if resizing is enabled.
+	 * - If resizing is not enabled, applies a non-resizable class.
+	 * @param {__se__FrameContext} fc The frame context object
+	 * @param {__se__FrameOptions} fo The frame options object
+	 */
 	__addStatusbarEvent(fc, fo) {
 		if (/\d+/.test(fo.get('height')) && fo.get('statusbar_resizeEnable')) {
 			fo.set('__statusbarEvent', this.addEvent(fc.get('statusbar'), 'mousedown', OnMouseDown_statusbar.bind(this), false));
 		} else {
-			domUtils.addClass(fc.get('statusbar'), 'se-resizing-none');
+			dom.utils.addClass(fc.get('statusbar'), 'se-resizing-none');
 		}
 	},
 
+	/**
+	 * @private
+	 * @this {EventManagerThis}
+	 * @description Removes all registered event listeners from the editor.
+	 * - Disconnects observers and clears stored event references.
+	 */
 	_removeAllEvents() {
 		for (let i = 0, len = this._events.length, e; i < len; i++) {
 			e = this._events[i];
-			e.target.removeEventListener(e.type, e.handler, e.useCapture);
+			e.target.removeEventListener(e.type, e.listener, e.useCapture);
 		}
 
 		this._events = [];
@@ -780,9 +973,16 @@ EventManager.prototype = {
 		}
 	},
 
+	/**
+	 * @private
+	 * @this {EventManagerThis}
+	 * @description Adjusts the position of the editor's toolbar, controllers, and other floating elements based on scroll position.
+	 * - Ensures UI elements maintain their intended relative positions when scrolling.
+	 * @param {Element} eventWysiwyg The wysiwyg event object containing scroll data
+	 */
 	_moveContainer(eventWysiwyg) {
-		const y = eventWysiwyg.scrollY || eventWysiwyg.scrollTop || 0;
-		const x = eventWysiwyg.scrollX || eventWysiwyg.scrollLeft || 0;
+		const y = eventWysiwyg.scrollTop || 0;
+		const x = eventWysiwyg.scrollLeft || 0;
 
 		if (this.editor.isBalloon) {
 			this.context.get('toolbar.main').style.top = this.toolbar._balloonOffset.top - y + 'px';
@@ -793,7 +993,7 @@ EventManager.prototype = {
 		}
 
 		if (this.editor._controllerTargetContext !== this.editor.frameContext.get('topArea')) {
-			this.editor._offCurrentController();
+			this.ui._offCurrentController();
 		}
 
 		if (this.editor._lineBreaker_t) {
@@ -824,6 +1024,12 @@ EventManager.prototype = {
 		}
 	},
 
+	/**
+	 * @private
+	 * @this {EventManagerThis}
+	 * @description Handles the scrolling of the editor container.
+	 * - Repositions open controllers if necessary.
+	 */
 	_scrollContainer() {
 		const openCont = this.editor.opendControllers;
 		if (!openCont.length) return;
@@ -831,6 +1037,13 @@ EventManager.prototype = {
 		this.__rePositionController(openCont);
 	},
 
+	/**
+	 * @private
+	 * @this {EventManagerThis}
+	 * @description Repositions the currently open controllers within the editor.
+	 * - Ensures elements are displayed in their correct positions after scrolling.
+	 * @param {Array<object>} cont List of controllers to reposition
+	 */
 	__rePositionController(cont) {
 		if (_DragHandle.get('__dragMove')) _DragHandle.get('__dragMove')();
 		for (let i = 0; i < cont.length; i++) {
@@ -839,6 +1052,12 @@ EventManager.prototype = {
 		}
 	},
 
+	/**
+	 * @private
+	 * @this {EventManagerThis}
+	 * @description Resets the frame status, adjusting toolbar and UI elements based on the current state.
+	 * - Handles inline editor adjustments, fullscreen mode, and responsive toolbar updates.
+	 */
 	_resetFrameStatus() {
 		if (!env.isResizeObserverSupported) {
 			this.toolbar.resetResponsiveToolbar();
@@ -849,10 +1068,9 @@ EventManager.prototype = {
 		const isToolbarHidden = toolbar.style.display === 'none' || (this.editor.isInline && !this.toolbar._inlineToolbarAttr.isShow);
 		if (toolbar.offsetWidth === 0 && !isToolbarHidden) return;
 
-		const fc = this.editor.frameContext;
-		const fileBrowser = fc.get('fileBrowser');
-		if (fileBrowser && fileBrowser.area.style.display === 'block') {
-			fileBrowser.body.style.maxHeight = domUtils.getClientSize().h - fileBrowser.header.offsetHeight - 50 + 'px';
+		const opendBrowser = this.editor.opendBrowser;
+		if (opendBrowser && opendBrowser.area.style.display === 'block') {
+			opendBrowser.body.style.maxHeight = dom.utils.getClientSize().h - opendBrowser.header.offsetHeight - 50 + 'px';
 		}
 
 		if (this.menu.currentDropdownActiveButton && this.menu.currentDropdown) {
@@ -861,6 +1079,7 @@ EventManager.prototype = {
 
 		if (this.viewer._resetFullScreenHeight()) return;
 
+		const fc = this.editor.frameContext;
 		if (fc.get('isCodeView') && this.editor.isInline) {
 			this.toolbar._showInline();
 			return;
@@ -874,6 +1093,12 @@ EventManager.prototype = {
 		}
 	},
 
+	/**
+	 * @private
+	 * @this {EventManagerThis}
+	 * @description Synchronizes the selection state by resetting it on mouseup.
+	 * - Ensures selection updates correctly across different interactions.
+	 */
 	_setSelectionSync() {
 		this.removeGlobalEvent(this.__selectionSyncEvent);
 		this.__selectionSyncEvent = this.addGlobalEvent('mouseup', () => {
@@ -882,6 +1107,14 @@ EventManager.prototype = {
 		});
 	},
 
+	/**
+	 * @private
+	 * @this {EventManagerThis}
+	 * @description Retains the style nodes for formatting consistency when applying styles.
+	 * - Preserves nested styling by cloning and restructuring the style nodes.
+	 * @param {HTMLElement} formatEl The format element where styles should be retained
+	 * @param {Array<Node>} _styleNodes The list of style nodes to retain
+	 */
 	_retainStyleNodes(formatEl, _styleNodes) {
 		const el = _styleNodes[0].cloneNode(false);
 		let n = el;
@@ -892,7 +1125,7 @@ EventManager.prototype = {
 		}
 
 		const { parent, inner } = this.nodeTransform.createNestedNode(_styleNodes, null);
-		const zeroWidth = domUtils.createTextNode(unicode.zeroWidthSpace);
+		const zeroWidth = dom.utils.createTextNode(unicode.zeroWidthSpace);
 		inner.appendChild(zeroWidth);
 
 		formatEl.innerHTML = '';
@@ -901,51 +1134,103 @@ EventManager.prototype = {
 		this.selection.setRange(zeroWidth, 1, zeroWidth, 1);
 	},
 
+	/**
+	 * @private
+	 * @this {EventManagerThis}
+	 * @description Clears retained style nodes by replacing content with a single line break.
+	 * - Resets the selection to the start of the cleared element.
+	 * @param {HTMLElement} formatEl The format element where styles should be cleared
+	 */
 	_clearRetainStyleNodes(formatEl) {
 		formatEl.innerHTML = '<br>';
 		this.selection.setRange(formatEl, 0, formatEl, 0);
 	},
 
+	/**
+	 * @private
+	 * @this {EventManagerThis}
+	 * @description Calls a registered plugin event and executes associated handlers.
+	 * - If any handler returns `false`, the event propagation stops.
+	 * @param {string} name The name of the plugin event
+	 * @param {{ frameContext: __se__FrameContext, event: Event, data?: string, line?: Node, range?: Range, file?: File, doc?: Document }} e The event object passed to the plugin event handler
+	 * @returns {boolean|undefined} Returns `false` if any handler stops the event, otherwise `undefined`
+	 */
 	_callPluginEvent(name, e) {
 		const eventPlugins = this.editor._onPluginEvents.get(name);
-		for (let i = 0; i < eventPlugins.length; i++) {
-			if (eventPlugins[i](e) === false) return false;
+		for (let i = 0, r; i < eventPlugins.length; i++) {
+			r = eventPlugins[i](e);
+			if (typeof r === 'boolean') return r;
 		}
 	},
 
+	/**
+	 * @private
+	 * @this {EventManagerThis}
+	 * @description Handles the selection of a component when hovering over it.
+	 * - If the target is a component, it ensures that the component is selected properly.
+	 * @param {Element} target The element being hovered over
+	 */
 	_overComponentSelect(target) {
-		const figure = domUtils.getParentElement(target, domUtils.isFigure);
+		const figure = dom.query.getParentElement(target, dom.check.isFigure);
 		let info = this.component.get(target);
 		if (info || figure) {
 			if (!info) info = this.component.get(figure);
-			if (info && !domUtils.hasClass(info.container, 'se-component-selected')) {
-				this.editor._offCurrentController();
+			if (info && !dom.utils.hasClass(info.container, 'se-component-selected')) {
+				this.ui._offCurrentController();
 				_DragHandle.set('__overInfo', ON_OVER_COMPONENT);
-				this.component.select(info.target, info.pluginName, false);
+				this.component.select(info.target, info.pluginName);
 			}
-		} else if (_DragHandle.get('__overInfo') !== null && !domUtils.hasClass(target, 'se-drag-handle')) {
+		} else if (_DragHandle.get('__overInfo') !== null && !dom.utils.hasClass(target, 'se-drag-handle')) {
 			this.component.__deselect();
 			_DragHandle.set('__overInfo', null);
 		}
 	},
 
+	/**
+	 * @private
+	 * @this {EventManagerThis}
+	 * @description Removes input event listeners and resets input-related properties.
+	 */
 	__removeInput() {
-		this._inputFocus = this.editor._antiBlur = false;
+		this._inputFocus = this.editor._preventBlur = false;
 		this.__inputBlurEvent = this.removeEvent(this.__inputBlurEvent);
 		this.__inputKeyEvent = this.removeEvent(this.__inputKeyEvent);
 		this.__inputPlugin = null;
 	},
 
+	/**
+	 * @private
+	 * @this {EventManagerThis}
+	 * @description Prevents the default behavior of the Enter key and refocuses the editor.
+	 * @param {Event} e The keyboard event
+	 */
 	__enterPrevent(e) {
 		e.preventDefault();
 		if (!isMobile) return;
 
 		this.__focusTemp.focus();
+		this.editor.frameContext.get('wysiwyg').focus();
+	},
+
+	/**
+	 * @private
+	 * @description Scrolls the editor view to the caret position after pressing Enter. (Ignored on mobile devices)
+	 * @this {EventManagerThis}
+	 * @param {*} range Range object
+	 */
+	__enterScrollTo(range) {
+		if (!env.isMobile) this.editor.selection.scrollTo(range);
 	},
 
 	constructor: EventManager
 };
 
+/**
+ * @this {EventManagerThis}
+ * @param {__se__FrameContext} frameContext - frame context object
+ * @param {Element} eventWysiwyg - wysiwyg event object
+ * @param {Event} e - Event object
+ */
 function OnScroll_wysiwyg(frameContext, eventWysiwyg, e) {
 	this._moveContainer(eventWysiwyg);
 	this._scrollContainer();
@@ -953,11 +1238,26 @@ function OnScroll_wysiwyg(frameContext, eventWysiwyg, e) {
 	// plugin event
 	this._callPluginEvent('onScroll', { frameContext, event: e });
 
+	// document type page
+	if (frameContext.has('documentType-use-page')) {
+		frameContext.get('documentType').scrollPage();
+	}
+
 	// user event
 	this.triggerEvent('onScroll', { frameContext, event: e });
 }
 
+/**
+ * @this {EventManagerThis}
+ * @param {__se__FrameContext} frameContext - frame context object
+ * @param {Event} e - Event object
+ */
 function OnFocus_wysiwyg(frameContext, e) {
+	if (this.selection.__iframeFocus || frameContext.get('isReadOnly') || frameContext.get('isDisabled')) {
+		e.preventDefault();
+		return false;
+	}
+
 	const rootKey = frameContext.get('key');
 
 	if (this._inputFocus) {
@@ -969,19 +1269,19 @@ function OnFocus_wysiwyg(frameContext, e) {
 		return;
 	}
 
-	if (this.status.rootKey === rootKey && this.editor._antiBlur) return;
+	if (this.status.rootKey === rootKey && this.editor._preventBlur) return;
 
-	const componentSelected = this.editor.status.componentSelected;
-	this.editor._offCurrentController();
+	const onSelected = this.editor.status.onSelected || this.editor.opendModal;
+	this.ui._offCurrentController();
 	this.status.hasFocus = true;
 
-	domUtils.removeClass(this.editor.commandTargets.get('codeView'), 'active');
-	domUtils.setDisabled(this.editor._codeViewDisabledButtons, false);
+	dom.utils.removeClass(this.editor.commandTargets.get('codeView'), 'active');
+	dom.utils.setDisabled(this.editor._codeViewDisabledButtons, false);
 
 	this.editor.changeFrameContext(rootKey);
 	this.history.resetButtons(rootKey, null);
 
-	if (!componentSelected) {
+	if (!onSelected) {
 		this.applyTagEffect();
 	}
 
@@ -995,12 +1295,16 @@ function OnFocus_wysiwyg(frameContext, e) {
 	}, 0);
 }
 
+/**
+ * @this {EventManagerThis}
+ * @param {__se__FrameContext} frameContext - frame context object
+ * @param {Event} e - Event object
+ */
 function OnBlur_wysiwyg(frameContext, e) {
-	if (this._inputFocus || this.editor._antiBlur || frameContext.get('isCodeView')) return;
+	if (this._inputFocus || this.editor._preventBlur || frameContext.get('isCodeView') || frameContext.get('isReadOnly') || frameContext.get('isDisabled')) return;
 
 	this.status.hasFocus = false;
 	this.editor.effectNode = null;
-	this.editor._offCurrentController();
 	if (this.editor.isInline || this.editor.isBalloon) this._hideToolbar();
 	if (this.editor.isSubBalloon) this._hideToolbar_sub();
 
@@ -1021,38 +1325,53 @@ function OnBlur_wysiwyg(frameContext, e) {
 	this._callPluginEvent('onBlur', { frameContext, event: e });
 }
 
+/**
+ * @this {EventManagerThis}
+ * @param {MouseEvent} e - Event object
+ */
 function OnMouseDown_statusbar(e) {
 	e.stopPropagation();
 	this._resizeClientY = e.clientY;
-	this.editor.enableBackWrapper('ns-resize');
+	this.ui.enableBackWrapper('ns-resize');
 	this.__resize_editor = this.addGlobalEvent('mousemove', __resizeEditor.bind(this));
 	this.__close_move = this.addGlobalEvent('mouseup', __closeMove.bind(this));
 }
 
+/**
+ * @this {EventManagerThis}
+ * @param {MouseEvent} e - Event object
+ */
 function __resizeEditor(e) {
 	const fc = this.editor.frameContext;
 	const resizeInterval = fc.get('wrapper').offsetHeight + (e.clientY - this._resizeClientY);
 	const h = resizeInterval < fc.get('_minHeight') ? fc.get('_minHeight') : resizeInterval;
 	fc.get('wysiwygFrame').style.height = fc.get('code').style.height = h + 'px';
 	this._resizeClientY = e.clientY;
-	if (!env.isResizeObserverSupported) this.editor.__callResizeFunction(h, null);
+	if (!env.isResizeObserverSupported) this.editor.__callResizeFunction(fc, h, null);
 }
 
+/**
+ * @this {EventManagerThis}
+ */
 function __closeMove() {
-	this.editor.disableBackWrapper();
+	this.ui.disableBackWrapper();
 	if (this.__resize_editor) this.__resize_editor = this.removeGlobalEvent(this.__resize_editor);
 	if (this.__close_move) this.__close_move = this.removeGlobalEvent(this.__close_move);
 }
 
+/**
+ * @this {EventManagerThis}
+ * @param {"t"|"b"} dir - Direction
+ * @param {Event} e - Event object
+ */
 function DisplayLineBreak(dir, e) {
 	e.preventDefault();
 
 	const component = this._lineBreakComp;
 	if (!component) return;
 
-	dir = !dir ? this._lineBreakDir : dir;
-	const isList = domUtils.isListCell(component.parentNode);
-	const format = domUtils.createElement(isList ? 'BR' : domUtils.isTableCell(component.parentNode) ? 'DIV' : this.options.get('defaultLine'));
+	const isList = dom.check.isListCell(component.parentElement);
+	const format = dom.utils.createElement(isList ? 'BR' : dom.check.isTableCell(component.parentElement) ? 'DIV' : this.options.get('defaultLine'));
 	if (!isList) format.innerHTML = '<br>';
 
 	if (this.editor.frameOptions.get('charCounter_type') === 'byte-html' && !this.char.check(format.outerHTML)) return;
@@ -1060,16 +1379,24 @@ function DisplayLineBreak(dir, e) {
 	component.parentNode.insertBefore(format, dir === 't' ? component : component.nextSibling);
 	this.component.deselect();
 
-	const focusEl = isList ? format : format.firstChild;
-	this.selection.setRange(focusEl, 1, focusEl, 1);
-	this.history.push(false);
+	try {
+		this.editor._preventBlur = true;
+		const focusEl = isList ? format : format.firstChild;
+		this.selection.setRange(focusEl, 1, focusEl, 1);
+		this.history.push(false);
+	} finally {
+		this.editor._preventBlur = false;
+	}
 }
 
+/**
+ * @this {EventManagerThis}
+ */
 function OnResize_window() {
 	if (isMobile) {
 		this._scrollContainer();
 	} else {
-		this.editor._offCurrentController();
+		this.ui._offCurrentController();
 	}
 
 	if (this.editor.isBalloon) this.toolbar.hide();
@@ -1078,13 +1405,12 @@ function OnResize_window() {
 	this._resetFrameStatus();
 }
 
+/**
+ * @this {EventManagerThis}
+ */
 function OnScroll_window() {
 	if (this.options.get('toolbar_sticky') > -1) {
-		if (this._vitualKeyboardHeight && this.toolbar._sticky) {
-			this.toolbar._visible(false);
-		} else {
-			this.toolbar._resetSticky();
-		}
+		this.toolbar._resetSticky();
 	}
 
 	if (this.editor.isBalloon && this.context.get('toolbar.main').style.display === 'block') {
@@ -1094,50 +1420,65 @@ function OnScroll_window() {
 	}
 
 	this._scrollContainer();
-}
-
-function OnResize_viewport() {
-	this._vitualKeyboardHeight = _w.innerHeight - _w.visualViewport.height;
-}
 
-function OnScroll_viewport() {
-	if (this.options.get('toolbar_sticky') > -1) {
-		if (this._vitualKeyboardHeight && this.toolbar._sticky) {
-			this.toolbar._visible(false);
-		} else {
-			this.toolbar._resetSticky();
-		}
+	// document type page
+	if (this.editor.frameContext.has('documentType-use-page')) {
+		this.editor.frameContext.get('documentType').scrollWindow();
 	}
 }
 
-function OnScroll_viewport_onKeyboardOn() {
-	this.toolbar._visible(true);
-	if (this._vitualKeyboardHeight && this.options.get('toolbar_sticky') > -1) {
+/**
+ * @this {EventManagerThis}
+ */
+function OnChange_viewport() {
+	if (this.options.get('toolbar_sticky') > -1) {
 		this.toolbar._resetSticky();
+		this.editor.menu._restoreMenuPosition();
 	}
 }
 
+/**
+ * @this {EventManagerThis}
+ * @param {Document} _wd - Wysiwyg document
+ */
 function OnSelectionchange_document(_wd) {
+	if (this.editor._preventSelection) return;
+
 	const selection = _wd.getSelection();
 	let anchorNode = selection.anchorNode;
 
 	this.editor.applyFrameRoots((root) => {
 		if (anchorNode && root.get('wysiwyg').contains(anchorNode)) {
+			if (root.get('isReadOnly') || root.get('isDisabled')) return;
+
 			anchorNode = null;
 			this.selection._init();
 			this.applyTagEffect();
+
+			// document type
+			if (root.has('documentType-use-header')) {
+				const el = dom.query.getParentElement(this.selection.selectionNode, this.format.isLine.bind(this.format));
+				root.get('documentType').on(el);
+			}
 		}
 	});
 }
 
+/**
+ * @this {EventManagerThis}
+ */
 function OnScroll_Abs() {
 	this._scrollContainer();
 }
 
+/**
+ * @this {EventManagerThis}
+ * @param {__se__FrameContext} frameContext - frame context object
+ */
 function OnFocus_code(frameContext) {
 	this.editor.changeFrameContext(frameContext.get('key'));
-	domUtils.addClass(this.editor.commandTargets.get('codeView'), 'active');
-	domUtils.setDisabled(this.editor._codeViewDisabledButtons, true);
+	dom.utils.addClass(this.editor.commandTargets.get('codeView'), 'active');
+	dom.utils.setDisabled(this.editor._codeViewDisabledButtons, true);
 }
 
 export default EventManager;