suneditor 3.0.0-beta.3 → 3.0.0-beta.30

package/src/core/{base → event}/eventManager.js

@@ -7,13 +7,14 @@ import { dom, unicode, numbers, env, converter } from '../../helper';
 import { _DragHandle } from '../../modules';
 
 // event handlers
-import { ButtonsHandler, OnClick_menuTray, OnClick_toolbar } from './eventHandlers/handler_toolbar';
-import { OnMouseDown_wysiwyg, OnMouseUp_wysiwyg, OnClick_wysiwyg, OnMouseMove_wysiwyg, OnMouseLeave_wysiwyg } from './eventHandlers/handler_ww_mouse';
-import { OnInput_wysiwyg, OnKeyDown_wysiwyg, OnKeyUp_wysiwyg } from './eventHandlers/handler_ww_key_input';
-import { OnPaste_wysiwyg, OnCopy_wysiwyg, OnCut_wysiwyg } from './eventHandlers/handler_ww_clipboard';
-import { OnDragOver_wysiwyg, OnDragEnd_wysiwyg, OnDrop_wysiwyg } from './eventHandlers/handler_ww_dragDrop';
+import { ButtonsHandler, OnClick_menuTray, OnClick_toolbar } from './handlers/handler_toolbar';
+import { OnMouseDown_wysiwyg, OnMouseUp_wysiwyg, OnClick_wysiwyg, OnMouseMove_wysiwyg, OnMouseLeave_wysiwyg } from './handlers/handler_ww_mouse';
+import { OnBeforeInput_wysiwyg, OnInput_wysiwyg } from './handlers/handler_ww_input';
+import { OnKeyDown_wysiwyg, OnKeyUp_wysiwyg } from './handlers/handler_ww_key';
+import { OnPaste_wysiwyg, OnCopy_wysiwyg, OnCut_wysiwyg } from './handlers/handler_ww_clipboard';
+import { OnDragOver_wysiwyg, OnDragEnd_wysiwyg, OnDrop_wysiwyg } from './handlers/handler_ww_dragDrop';
 
-const { _w, ON_OVER_COMPONENT, isMobile } = env;
+const { _w, ON_OVER_COMPONENT, isMobile, isTouchDevice } = env;
 
 /**
  * @typedef {Omit<EventManager & Partial<__se__EditorInjector>, 'eventManager'>} EventManagerThis
@@ -35,12 +36,20 @@ function EventManager(editor) {
 	 */
 	this.isComposing = false;
 
+	/**
+	 * @description An array of parent containers that can be scrolled (in descending order)
+	 * @type {Array<Element>}
+	 */
+	this.scrollparents = [];
+
 	/** @type {Array<*>} */
 	this._events = [];
 	/** @type {RegExp} */
 	this._onButtonsCheck = new RegExp(`^(${Object.keys(editor.options.get('_defaultStyleTagMap')).join('|')})$`, 'i');
 	/** @type {boolean} */
 	this._onShortcutKey = false;
+	/** @type {boolean} */
+	this._handledInBefore = false;
 	/** @type {number} */
 	this._balloonDelay = null;
 	/** @type {ResizeObserver} */
@@ -59,8 +68,6 @@ function EventManager(editor) {
 	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} */
@@ -157,10 +164,10 @@ EventManager.prototype = {
 	 * @return {__se__GlobalEventInfo} Registered event information
 	 */
 	addGlobalEvent(type, listener, useCapture) {
-		if (this.editor.frameOptions.get('iframe')) {
-			this.editor.frameContext.get('_ww').addEventListener(type, listener, useCapture);
+		if (this.frameOptions.get('iframe')) {
+			this.frameContext.get('_ww').addEventListener(type, listener, useCapture);
 		}
-		this._w.addEventListener(type, listener, useCapture);
+		_w.addEventListener(type, listener, useCapture);
 		return {
 			type,
 			listener,
@@ -185,10 +192,10 @@ EventManager.prototype = {
 			useCapture = type.useCapture;
 			type = type.type;
 		}
-		if (this.editor.frameOptions.get('iframe')) {
-			this.editor.frameContext.get('_ww').removeEventListener(type, listener, useCapture);
+		if (this.frameOptions.get('iframe')) {
+			this.frameContext.get('_ww').removeEventListener(type, listener, useCapture);
 		}
-		this._w.removeEventListener(type, listener, useCapture);
+		_w.removeEventListener(type, listener, useCapture);
 
 		return null;
 	},
@@ -201,7 +208,7 @@ EventManager.prototype = {
 	 * @returns {Node|undefined} selectionNode
 	 */
 	applyTagEffect(selectionNode) {
-		selectionNode = selectionNode || this.selection.getNode();
+		selectionNode ||= this.selection.getNode();
 		if (selectionNode === this.editor.effectNode) return;
 		this.editor.effectNode = selectionNode;
 
@@ -216,6 +223,7 @@ EventManager.prototype = {
 		const styleTags = this.options.get('_textStyleTags');
 		const styleNodes = [];
 
+		const ignoreCommands = [];
 		const activeCommands = this.editor.activeCommands;
 		const cLen = activeCommands.length;
 		let nodeName = '';
@@ -223,6 +231,7 @@ EventManager.prototype = {
 		if (this.component.is(selectionNode) && !this.component.__selectionSelected) {
 			const component = this.component.get(selectionNode);
 			if (!component) return;
+			this.editor.effectNode = null;
 			this.component.select(component.target, component.pluginName);
 			return;
 		}
@@ -231,7 +240,7 @@ EventManager.prototype = {
 			selectionNode = selectionNode.firstChild;
 		}
 
-		const fc = this.editor.frameContext;
+		const fc = this.frameContext;
 		const notReadonly = !fc.get('isReadOnly');
 		for (let element = selectionNode; !dom.check.isWysiwygFrame(element); element = element.parentElement) {
 			if (!element) break;
@@ -251,9 +260,14 @@ EventManager.prototype = {
 					name = activeCommands[c];
 					if (
 						!commandMapNodes.includes(name) &&
+						!ignoreCommands.includes(name) &&
 						commandTargets.get(name) &&
 						commandTargets.get(name).filter((e) => {
-							return plugins[name]?.active(element, e);
+							const r = plugins[name]?.active(element, e);
+							if (r === undefined) {
+								ignoreCommands.push(name);
+							}
+							return r;
 						}).length > 0
 					) {
 						commandMapNodes.push(name);
@@ -310,7 +324,7 @@ EventManager.prototype = {
 		this.status.currentNodesMap = commandMapNodes;
 
 		/**  Displays the current node structure to statusbar */
-		if (this.editor.frameOptions.get('statusbar_showPathLabel') && fc.get('navigation')) {
+		if (this.frameOptions.get('statusbar_showPathLabel') && fc.get('navigation')) {
 			fc.get('navigation').textContent = this.options.get('_rtl') ? this.status.currentNodes.reverse().join(' < ') : this.status.currentNodes.join(' > ');
 		}
 
@@ -407,7 +421,7 @@ EventManager.prototype = {
 	 * @description Hide the toolbar.
 	 */
 	_hideToolbar() {
-		if (!this.editor._notHideToolbar && !this.editor.frameContext.get('isFullScreen')) {
+		if (!this.editor._notHideToolbar && !this.frameContext.get('isFullScreen')) {
 			this.toolbar.hide();
 		}
 	},
@@ -434,93 +448,6 @@ EventManager.prototype = {
 		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;
-		if (isElement) {
-			siblingNode = /** @type {HTMLElement} */ (this._isUneditableNode_getSibling(container.childNodes[offset], siblingKey, container));
-			return siblingNode && siblingNode.nodeType === 1 && siblingNode.getAttribute('contenteditable') === 'false' ? siblingNode : null;
-		} else {
-			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];
-
-		if (!siblingNode) {
-			siblingNode = this.format.getLine(container);
-			siblingNode = siblingNode ? siblingNode[siblingKey] : null;
-			if (siblingNode && !this.component.is(siblingNode)) siblingNode = siblingKey === 'previousSibling' ? siblingNode.firstChild : siblingNode.lastChild;
-			else return null;
-		}
-
-		return siblingNode;
-	},
-
-	/**
-	 * @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;
-		const ec = range.endContainer;
-
-		// table
-		const sCell = this.format.getBlock(sc);
-		const eCell = this.format.getBlock(ec);
-		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)?.parentElement || range.commonAncestorContainer;
-			if (!sIsCell) {
-				dom.utils.removeItem(dom.query.getParentElement(eCell, (current) => ancestor === current.parentNode));
-			} else if (!eIsCell) {
-				dom.utils.removeItem(dom.query.getParentElement(sCell, (current) => ancestor === current.parentNode));
-			} else {
-				dom.utils.removeItem(dom.query.getParentElement(sCell, (current) => ancestor === current.parentNode));
-				this.editor._nativeFocus();
-				return true;
-			}
-		}
-
-		// component
-		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}
@@ -534,6 +461,7 @@ EventManager.prototype = {
 		const range = this.selection.getRange();
 		const commonCon = /** @type {HTMLElement} */ (range.commonAncestorContainer);
 		const startCon = range.startContainer;
+		const endOffset = range.endOffset;
 		const rangeEl = this.format.getBlock(commonCon, null);
 
 		/** @type {Node} */
@@ -547,7 +475,7 @@ EventManager.prototype = {
 
 			rangeEl.innerHTML = format.outerHTML;
 			format = rangeEl.firstChild;
-			focusNode = dom.query.getEdgeChildNodes(format, null).sc;
+			focusNode = format.childNodes[endOffset] || dom.query.getEdgeChildNodes(format, null).sc;
 
 			if (!focusNode) {
 				focusNode = dom.utils.createTextNode(unicode.zeroWidthSpace);
@@ -561,6 +489,8 @@ EventManager.prototype = {
 
 		if (commonCon.nodeType === 3 && this.component.is(commonCon.parentElement)) {
 			const compInfo = this.component.get(commonCon.parentElement);
+			if (!compInfo) return;
+
 			const container = compInfo.container;
 
 			if (commonCon.parentElement === container) {
@@ -596,7 +526,6 @@ EventManager.prototype = {
 			return;
 		}
 
-		/* eslint-disable @typescript-eslint/no-unused-vars */
 		try {
 			if (commonCon.nodeType === 3) {
 				format = dom.utils.createElement(formatName || this.options.get('defaultLine'));
@@ -611,14 +540,12 @@ EventManager.prototype = {
 				focusNode.parentNode.insertBefore(zeroWidth, focusNode);
 				focusNode = zeroWidth;
 			}
-		} catch (e) {
+		} catch {
 			this.editor.execCommand('formatBlock', false, formatName || this.options.get('defaultLine'));
-			this.selection.removeRange();
-			this.selection._init();
 			this.editor.effectNode = null;
+			this.selection._init();
 			return;
 		}
-		/* eslint-disable @typescript-eslint/no-unused-vars */
 
 		if (format) {
 			if (dom.check.isBreak(format.nextSibling)) dom.utils.removeItem(format.nextSibling);
@@ -703,7 +630,7 @@ EventManager.prototype = {
 			const autoLinkify = this.options.get('autoLinkify');
 			if (autoLinkify) {
 				const domParser = new DOMParser().parseFromString(cleanData, 'text/html');
-				dom.query.getListChildNodes(domParser.body, converter.textToAnchor);
+				dom.query.getListChildNodes(domParser.body, converter.textToAnchor, null);
 				cleanData = domParser.body.innerHTML;
 			}
 		}
@@ -712,7 +639,7 @@ EventManager.prototype = {
 			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);
+		const maxCharCount = this.char.test(this.frameOptions.get('charCounter_type') === 'byte-html' ? cleanData : plainText, false);
 		// user event - paste
 		if (type === 'paste') {
 			const value = await this.triggerEvent('onPaste', { frameContext, event: e, data: cleanData, maxCharCount, from });
@@ -755,7 +682,7 @@ EventManager.prototype = {
 			}
 
 			// document type
-			if (frameContext.has('documentType-use-header')) {
+			if (frameContext.has('documentType_use_header')) {
 				frameContext.get('documentType').reHeader();
 			}
 			return false;
@@ -777,12 +704,12 @@ EventManager.prototype = {
 		this.addEvent(this.context.get('menuTray'), 'click', OnClick_menuTray.bind(this), true);
 
 		/** toolbar event */
-		this.addEvent(this.context.get('toolbar.main'), 'mousedown', buttonsHandler, false);
-		this.addEvent(this.context.get('toolbar.main'), 'click', toolbarHandler, false);
+		this.addEvent(this.context.get('toolbar_main'), 'mousedown', buttonsHandler, false);
+		this.addEvent(this.context.get('toolbar_main'), 'click', toolbarHandler, false);
 		// subToolbar
 		if (this.options.has('_subMode')) {
-			this.addEvent(this.context.get('toolbar.sub.main'), 'mousedown', buttonsHandler, false);
-			this.addEvent(this.context.get('toolbar.sub.main'), 'click', toolbarHandler, false);
+			this.addEvent(this.context.get('toolbar_sub_main'), 'mousedown', buttonsHandler, false);
+			this.addEvent(this.context.get('toolbar_sub_main'), 'click', toolbarHandler, false);
 		}
 
 		/** set response toolbar */
@@ -818,12 +745,12 @@ EventManager.prototype = {
 			);
 		}
 
-		/** window event */
+		/** global event */
 		this.addEvent(_w, 'resize', OnResize_window.bind(this), false);
+		this.addEvent(_w.visualViewport, 'resize', OnResize_viewport.bind(this), false);
 		this.addEvent(_w, 'scroll', OnScroll_window.bind(this), false);
-		if (env.isMobile) {
-			this.addEvent(_w.visualViewport, 'resize', OnChange_viewport.bind(this), false);
-			this.addEvent(_w.visualViewport, 'scroll', OnChange_viewport.bind(this), false);
+		if (isTouchDevice) {
+			this.addEvent(_w.visualViewport, 'scroll', OnMobileScroll_viewport.bind(this), false);
 		}
 	},
 
@@ -848,6 +775,7 @@ EventManager.prototype = {
 		this.addEvent(eventWysiwyg, 'mousedown', OnMouseDown_wysiwyg.bind(this, fc), false);
 		this.addEvent(eventWysiwyg, 'mouseup', OnMouseUp_wysiwyg.bind(this, fc), false);
 		this.addEvent(eventWysiwyg, 'click', OnClick_wysiwyg.bind(this, fc), false);
+		this.addEvent(eventWysiwyg, 'beforeinput', OnBeforeInput_wysiwyg.bind(this, fc), false);
 		this.addEvent(eventWysiwyg, 'input', OnInput_wysiwyg.bind(this, fc), false);
 		this.addEvent(eventWysiwyg, 'keydown', OnKeyDown_wysiwyg.bind(this, fc), false);
 		this.addEvent(eventWysiwyg, 'keyup', OnKeyUp_wysiwyg.bind(this, fc), false);
@@ -857,7 +785,7 @@ EventManager.prototype = {
 		this.addEvent(
 			eventWysiwyg,
 			'dragover',
-			OnDragOver_wysiwyg.bind(this, fc, dragCursor, isIframe ? this.editor.frameContext.get('topArea') : null, !this.options.get('toolbar_container') && !this.editor.isBalloon && !this.editor.isInline),
+			OnDragOver_wysiwyg.bind(this, fc, dragCursor, isIframe ? this.frameContext.get('topArea') : null, !this.options.get('toolbar_container') && !this.editor.isBalloon && !this.editor.isInline),
 			false
 		);
 		this.addEvent(eventWysiwyg, 'dragend', OnDragEnd_wysiwyg.bind(this, dragCursor), false);
@@ -880,20 +808,11 @@ EventManager.prototype = {
 		);
 
 		/** line breaker */
-		const lineBreakEventName = isMobile ? 'touchstart' : 'mousedown';
-		// this.addEvent(
-		// 	[fc.get('lineBreaker_t'), fc.get('lineBreaker_b')],
-		// 	lineBreakEventName,
-		// 	(e) => {
-		// 		e.preventDefault();
-		// 	},
-		// 	false
-		// );
-		this.addEvent(fc.get('lineBreaker_t'), lineBreakEventName, DisplayLineBreak.bind(this, 't'), false);
-		this.addEvent(fc.get('lineBreaker_b'), lineBreakEventName, DisplayLineBreak.bind(this, 'b'), false);
+		this.addEvent(fc.get('lineBreaker_t'), 'pointerdown', DisplayLineBreak.bind(this, 't'), false);
+		this.addEvent(fc.get('lineBreaker_b'), 'pointerdown', DisplayLineBreak.bind(this, 'b'), false);
 
 		/** Events are registered mobile. */
-		if (isMobile) {
+		if (isTouchDevice) {
 			this.addEvent(eventWysiwyg, 'touchstart', wwMouseMove, {
 				passive: true,
 				capture: false
@@ -903,7 +822,7 @@ EventManager.prototype = {
 		/** code view area auto line */
 		if (!this.options.get('hasCodeMirror')) {
 			const codeNumbers = fc.get('codeNumbers');
-			const cvAuthHeight = this.viewer._codeViewAutoHeight.bind(this.viewer, fc.get('code'), codeNumbers, this.editor.frameOptions.get('height') === 'auto');
+			const cvAuthHeight = this.viewer._codeViewAutoHeight.bind(this.viewer, fc.get('code'), codeNumbers, this.frameOptions.get('height') === 'auto');
 
 			this.addEvent(codeArea, 'keydown', cvAuthHeight, false);
 			this.addEvent(codeArea, 'keyup', cvAuthHeight, false);
@@ -916,10 +835,10 @@ EventManager.prototype = {
 		if (fc.has('statusbar')) this.__addStatusbarEvent(fc, fc.get('options'));
 
 		const OnScrollAbs = OnScroll_Abs.bind(this);
-		let scrollParent = fc.get('originElement');
-		while ((scrollParent = dom.query.getScrollParent(scrollParent.parentElement))) {
-			this.__scrollparents.push(scrollParent);
-			this.addEvent(scrollParent, 'scroll', OnScrollAbs, false);
+		const scrollParents = dom.query.getScrollParents(fc.get('originElement'));
+		for (const parent of scrollParents) {
+			this.scrollparents.push(parent);
+			this.addEvent(parent, 'scroll', OnScrollAbs, false);
 		}
 
 		/** focus temp (mobile) */
@@ -978,21 +897,21 @@ EventManager.prototype = {
 	 * @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
+	 * @param {*} eventWysiwyg The wysiwyg event object containing scroll data (Window or element)
 	 */
 	_moveContainer(eventWysiwyg) {
-		const y = eventWysiwyg.scrollTop || 0;
-		const x = eventWysiwyg.scrollLeft || 0;
+		const y = eventWysiwyg.scrollTop || eventWysiwyg.scrollY || 0;
+		const x = eventWysiwyg.scrollLeft || eventWysiwyg.scrollX || 0;
 
 		if (this.editor.isBalloon) {
-			this.context.get('toolbar.main').style.top = this.toolbar._balloonOffset.top - y + 'px';
-			this.context.get('toolbar.main').style.left = this.toolbar._balloonOffset.left - x + 'px';
+			this.context.get('toolbar_main').style.top = this.toolbar._balloonOffset.top - y + 'px';
+			this.context.get('toolbar_main').style.left = this.toolbar._balloonOffset.left - x + 'px';
 		} else if (this.editor.isSubBalloon) {
-			this.context.get('toolbar.sub.main').style.top = this.subToolbar._balloonOffset.top - y + 'px';
-			this.context.get('toolbar.sub.main').style.left = this.subToolbar._balloonOffset.left - x + 'px';
+			this.context.get('toolbar_sub_main').style.top = this.subToolbar._balloonOffset.top - y + 'px';
+			this.context.get('toolbar_sub_main').style.left = this.subToolbar._balloonOffset.left - x + 'px';
 		}
 
-		if (this.editor._controllerTargetContext !== this.editor.frameContext.get('topArea')) {
+		if (this.editor._controllerTargetContext !== this.frameContext.get('topArea')) {
 			this.ui._offCurrentController();
 		}
 
@@ -1031,8 +950,12 @@ EventManager.prototype = {
 	 * - Repositions open controllers if necessary.
 	 */
 	_scrollContainer() {
+		if (this.menu.currentDropdownActiveButton && this.menu.currentDropdown) {
+			this.menu._resetMenuPosition(this.menu.currentDropdownActiveButton, this.menu.currentDropdown);
+		}
+
 		const openCont = this.editor.opendControllers;
-		if (!openCont.length) return;
+		if (openCont.length === 0) return;
 
 		this.__rePositionController(openCont);
 	},
@@ -1064,7 +987,7 @@ EventManager.prototype = {
 			if (this.options.get('_subMode')) this.subToolbar.resetResponsiveToolbar();
 		}
 
-		const toolbar = this.context.get('toolbar.main');
+		const toolbar = this.context.get('toolbar_main');
 		const isToolbarHidden = toolbar.style.display === 'none' || (this.editor.isInline && !this.toolbar._inlineToolbarAttr.isShow);
 		if (toolbar.offsetWidth === 0 && !isToolbarHidden) return;
 
@@ -1074,12 +997,12 @@ EventManager.prototype = {
 		}
 
 		if (this.menu.currentDropdownActiveButton && this.menu.currentDropdown) {
-			this.menu._setMenuPosition(this.menu.currentDropdownActiveButton, this.menu.currentDropdown);
+			this.menu._resetMenuPosition(this.menu.currentDropdownActiveButton, this.menu.currentDropdown);
 		}
 
 		if (this.viewer._resetFullScreenHeight()) return;
 
-		const fc = this.editor.frameContext;
+		const fc = this.frameContext;
 		if (fc.get('isCodeView') && this.editor.isInline) {
 			this.toolbar._showInline();
 			return;
@@ -1088,7 +1011,7 @@ EventManager.prototype = {
 		this.editor._iframeAutoHeight(fc);
 
 		if (this.toolbar._sticky) {
-			this.context.get('toolbar.main').style.width = fc.get('topArea').offsetWidth - 2 + 'px';
+			this.context.get('toolbar_main').style.width = fc.get('topArea').offsetWidth - 2 + 'px';
 			this.toolbar._resetSticky();
 		}
 	},
@@ -1174,7 +1097,7 @@ EventManager.prototype = {
 		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);
+			info ||= this.component.get(figure);
 			if (info && !dom.utils.hasClass(info.container, 'se-component-selected')) {
 				this.ui._offCurrentController();
 				_DragHandle.set('__overInfo', ON_OVER_COMPONENT);
@@ -1198,30 +1121,6 @@ EventManager.prototype = {
 		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);
-	},
-
 	/**
 	 * @private
 	 * @description Focus Event Postprocessing
@@ -1256,13 +1155,23 @@ EventManager.prototype = {
 		this._callPluginEvent('onBlur', { frameContext, event });
 	},
 
+	/**
+	 * @private
+	 * @description Records the current viewport size.
+	 * @this {EventManagerThis}
+	 */
+	__setViewportSize() {
+		this.status.currentViewportHeight = numbers.get(_w.visualViewport.height, 0);
+		// dom.utils.setRootCssVar('--se-var-viewport-height', `${this.status.currentViewportHeight}px`);
+	},
+
 	constructor: EventManager
 };
 
 /**
  * @this {EventManagerThis}
  * @param {__se__FrameContext} frameContext - frame context object
- * @param {Element} eventWysiwyg - wysiwyg event object
+ * @param {Element|Window} eventWysiwyg - wysiwyg event object
  * @param {Event} e - Event object
  */
 function OnScroll_wysiwyg(frameContext, eventWysiwyg, e) {
@@ -1273,7 +1182,7 @@ function OnScroll_wysiwyg(frameContext, eventWysiwyg, e) {
 	this._callPluginEvent('onScroll', { frameContext, event: e });
 
 	// document type page
-	if (frameContext.has('documentType-use-page')) {
+	if (frameContext.has('documentType_use_page')) {
 		frameContext.get('documentType').scrollPage();
 	}
 
@@ -1300,7 +1209,7 @@ function OnFocus_wysiwyg(frameContext, e) {
 
 	if (this._inputFocus) {
 		if (this.editor.isInline) {
-			this._w.setTimeout(() => {
+			_w.setTimeout(() => {
 				this.toolbar._showInline();
 			}, 0);
 		}
@@ -1310,7 +1219,6 @@ function OnFocus_wysiwyg(frameContext, e) {
 	if ((this.status.rootKey === rootKey && this.editor._preventBlur) || this.editor._preventFocus) return;
 	this.editor._preventFocus = true;
 
-	const onSelected = this.editor.status.onSelected || this.editor.opendModal;
 	this.ui._offCurrentController();
 
 	dom.utils.removeClass(this.editor.commandTargets.get('codeView'), 'active');
@@ -1319,11 +1227,7 @@ function OnFocus_wysiwyg(frameContext, e) {
 	this.editor.changeFrameContext(rootKey);
 	this.history.resetButtons(rootKey, null);
 
-	if (!onSelected) {
-		this.applyTagEffect();
-	}
-
-	this._w.setTimeout(() => {
+	_w.setTimeout(() => {
 		this.__postFocusEvent(frameContext, e);
 	}, 0);
 }
@@ -1374,7 +1278,7 @@ function OnMouseDown_statusbar(e) {
  * @param {MouseEvent} e - Event object
  */
 function __resizeEditor(e) {
-	const fc = this.editor.frameContext;
+	const fc = this.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';
@@ -1387,8 +1291,8 @@ function __resizeEditor(e) {
  */
 function __closeMove() {
 	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.__resize_editor &&= this.removeGlobalEvent(this.__resize_editor);
+	this.__close_move &&= this.removeGlobalEvent(this.__close_move);
 }
 
 /**
@@ -1406,7 +1310,7 @@ function DisplayLineBreak(dir, e) {
 	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;
+	if (this.frameOptions.get('charCounter_type') === 'byte-html' && !this.char.check(format.outerHTML)) return;
 
 	component.parentNode.insertBefore(format, dir === 't' ? component : component.nextSibling);
 	this.component.deselect();
@@ -1424,9 +1328,9 @@ function DisplayLineBreak(dir, e) {
  * @this {EventManagerThis}
  */
 function OnResize_window() {
-	if (isMobile) {
-		this._scrollContainer();
-	} else {
+	this.status.initViewportHeight = _w.visualViewport.height;
+
+	if (!isMobile) {
 		this.ui._offCurrentController();
 	}
 
@@ -1436,6 +1340,19 @@ function OnResize_window() {
 	this._resetFrameStatus();
 }
 
+/**
+ * @this {EventManagerThis}
+ */
+function OnResize_viewport() {
+	if (isMobile && this.options.get('toolbar_sticky') > -1) {
+		this.toolbar._resetSticky();
+		this.editor.menu._restoreMenuPosition();
+	}
+
+	this._scrollContainer();
+	this.__setViewportSize();
+}
+
 /**
  * @this {EventManagerThis}
  */
@@ -1444,24 +1361,24 @@ function OnScroll_window() {
 		this.toolbar._resetSticky();
 	}
 
-	if (this.editor.isBalloon && this.context.get('toolbar.main').style.display === 'block') {
+	if (this.editor.isBalloon && this.context.get('toolbar_main').style.display === 'block') {
 		this.toolbar._setBalloonOffset(this.toolbar._balloonOffset.position === 'top');
-	} else if (this.editor.isSubBalloon && this.context.get('toolbar.sub.main').style.display === 'block') {
+	} else if (this.editor.isSubBalloon && this.context.get('toolbar_sub_main').style.display === 'block') {
 		this.subToolbar._setBalloonOffset(this.subToolbar._balloonOffset.position === 'top');
 	}
 
 	this._scrollContainer();
 
 	// document type page
-	if (this.editor.frameContext.has('documentType-use-page')) {
-		this.editor.frameContext.get('documentType').scrollWindow();
+	if (this.frameContext.has('documentType_use_page')) {
+		this.frameContext.get('documentType').scrollWindow();
 	}
 }
 
 /**
  * @this {EventManagerThis}
  */
-function OnChange_viewport() {
+function OnMobileScroll_viewport() {
 	if (this.options.get('toolbar_sticky') > -1) {
 		this.toolbar._resetSticky();
 		this.editor.menu._restoreMenuPosition();
@@ -1487,7 +1404,7 @@ function OnSelectionchange_document(_wd) {
 			this.applyTagEffect();
 
 			// document type
-			if (root.has('documentType-use-header')) {
+			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);
 			}
@@ -1499,6 +1416,7 @@ function OnSelectionchange_document(_wd) {
  * @this {EventManagerThis}
  */
 function OnScroll_Abs() {
+	this.menu.dropdownOff();
 	this._scrollContainer();
 }