suneditor 3.0.0-alpha.2 → 3.0.0-alpha.20

package/src/core/class/component.js

@@ -3,39 +3,98 @@
  */
 
 import CoreInjector from '../../editorInjector/_core';
-import { domUtils, env, numbers, unicode } from '../../helper';
+import { dom, env, numbers, unicode, keyCodeMap } from '../../helper';
 import { Figure, _DragHandle } from '../../modules';
 
-const { _w, ON_OVER_COMPONENT } = env;
+const { _w, ON_OVER_COMPONENT, isMobile } = env;
 const DIR_KEYCODE = /^(3[7-9]|40)$/;
 const DIR_UP_KEYCODE = /^3[7-8]$/;
 
-const Component = function (editor) {
+/**
+ * @typedef {Omit<Component & Partial<__se__EditorInjector>, 'component'>} ComponentThis
+ */
+
+/**
+ * @typedef {Object} ComponentInfo
+ * @property {HTMLElement} target - The target element associated with the component.
+ * @property {string} pluginName - The name of the plugin related to the component.
+ * @property {Object<string, *>} options - Options related to the component.
+ * @property {HTMLElement} container - The main container element for the component.
+ * @property {?HTMLElement} cover - The cover element, if applicable.
+ * @property {?HTMLElement} inlineCover - The inline cover element, if applicable.
+ * @property {?HTMLElement} caption - The caption element, if applicable.
+ * @property {boolean} isFile - Whether the component is a file-related component.
+ * @property {?HTMLElement} launcher - The element that triggered the component, if applicable.
+ */
+
+/**
+ * @constructor
+ * @this {ComponentThis}
+ * @description Class for managing components such as images and tables that are not in line format
+ * @param {__se__EditorCore} editor - The root editor instance
+ */
+function Component(editor) {
 	CoreInjector.call(this, editor);
 
-	// members
+	/**
+	 * @description The current component information, used copy, cut, and keydown events
+	 * @type {ComponentInfo}
+	 */
 	this.info = null;
+
+	/**
+	 * @description Component is selected
+	 * @type {boolean}
+	 */
 	this.isSelected = false;
+
+	/**
+	 * @description Currently selected component target
+	 * @type {Node|null}
+	 */
 	this.currentTarget = null;
+
+	/**
+	 * @description Currently selected component plugin instance
+	 * @type {*}
+	 */
 	this.currentPlugin = null;
+
+	/**
+	 * @description Currently selected component plugin name
+	 * @type {*}
+	 */
 	this.currentPluginName = '';
+
+	/**
+	 * @description Currently selected component information
+	 * @type {ComponentInfo|null}
+	 */
 	this.currentInfo = null;
+
+	/** @type {Object<string, (...args: *) => *>} */
 	this.__globalEvents = {
 		copy: OnCopy_component.bind(this),
 		cut: OnCut_component.bind(this),
 		keydown: OnKeyDown_component.bind(this),
 		mousedown: CloseListener_mousedown.bind(this)
 	};
+	/** @type {__se__GlobalEventInfo|void} */
 	this._bindClose_copy = null;
+	/** @type {__se__GlobalEventInfo|void} */
 	this._bindClose_cut = null;
+	/** @type {__se__GlobalEventInfo|void} */
 	this._bindClose_keydown = null;
+	/** @type {__se__GlobalEventInfo|void} */
 	this._bindClose_mousedown = null;
+	/** @type {__se__GlobalEventInfo|void} */
 	this._bindClose_touchstart = null;
+	/** @type {boolean} */
 	this.__selectionSelected = false;
 
 	this.editor.applyFrameRoots((e) => {
 		// drag
-		const dragHandle = domUtils.createElement('DIV', { class: 'se-drag-handle', draggable: 'true' }, this.icons.selection);
+		const dragHandle = dom.utils.createElement('DIV', { class: 'se-drag-handle', draggable: 'true' }, this.icons.selection);
 		e.get('wrapper').appendChild(dragHandle);
 		this.eventManager.addEvent(dragHandle, 'mouseenter', OnDragEnter.bind(this));
 		this.eventManager.addEvent(dragHandle, 'mouseleave', OnDragLeave.bind(this));
@@ -43,19 +102,22 @@ const Component = function (editor) {
 		this.eventManager.addEvent(dragHandle, 'dragend', OnDragEnd.bind(this));
 		this.eventManager.addEvent(dragHandle, 'click', OnDragClick.bind(this));
 	});
-};
+}
 
 Component.prototype = {
 	/**
-	 * @description The method to insert a element and return. (used elements : table, hr, image, video)
-	 * If "element" is "HR", insert and return the new line.
-	 * @param {Element} element Element to be inserted
-	 * @param {boolean} notCheckCharCount If true, it will be inserted even if "frameOptions.get('charCounter_max')" is exceeded.
-	 * @param {boolean} notSelect If true, Do not automatically select the inserted component.
-	 * @returns {Element}
+	 * @this {ComponentThis}
+	 * @description Inserts an element and returns it. (Used for elements: table, hr, image, video)
+	 * - If "element" is "HR", inserts and returns the new line.
+	 * @param {Node} element Element to be inserted
+	 * @param {Object} [options] Options
+	 * @param {boolean} [options.skipCharCount=false] If true, it will be inserted even if "frameOptions.get('charCounter_max')" is exceeded.
+	 * @param {boolean} [options.skipSelection=false] If true, do not automatically select the inserted component.
+	 * @param {boolean} [options.skipHistory=false] If true, do not push to history.
+	 * @returns {HTMLElement} The inserted element or new line (for HR)
 	 */
-	insert(element, notCheckCharCount, notSelect) {
-		if (this.editor.frameContext.get('isReadOnly') || (!notCheckCharCount && !this.char.check(element))) {
+	insert(element, { skipCharCount, skipSelection, skipHistory } = {}) {
+		if (this.editor.frameContext.get('isReadOnly') || (!skipCharCount && !this.char.check(element))) {
 			return null;
 		}
 
@@ -66,45 +128,51 @@ Component.prototype = {
 		let oNode = null;
 		let formatEl = this.format.getLine(selectionNode, null);
 
-		if (domUtils.isListCell(formatEl)) {
-			this.html.insertNode(element, isInline ? null : selectionNode === formatEl ? null : r.container.nextSibling, true);
-			if (!isInline && !element.nextSibling) element.parentNode.appendChild(domUtils.createElement('BR'));
+		if (dom.check.isListCell(formatEl)) {
+			this.html.insertNode(element, { afterNode: isInline ? null : selectionNode === formatEl ? null : r.container.nextSibling, skipCharCount: true });
+			if (!isInline && !element.nextSibling) element.parentNode.appendChild(dom.utils.createElement('BR'));
 		} else {
-			if (this.selection.getRange().collapsed && (r.container.nodeType === 3 || domUtils.isBreak(r.container))) {
-				const depthFormat = domUtils.getParentElement(r.container, this.format.isBlock.bind(this.format));
-				oNode = this.nodeTransform.split(r.container, r.offset, !depthFormat ? 0 : domUtils.getNodeDepth(depthFormat) + 1);
-				if (oNode) formatEl = oNode.previousSibling;
+			if (!isInline && this.selection.getRange().collapsed && (r.container.nodeType === 3 || dom.check.isBreak(r.container))) {
+				const depthFormat = dom.query.getParentElement(r.container, this.format.isBlock.bind(this.format));
+				oNode = this.nodeTransform.split(r.container, r.offset, !depthFormat ? 0 : dom.query.getNodeDepth(depthFormat) + 1);
+				if (oNode) formatEl = /** @type {HTMLElement} */ (oNode.previousSibling);
 			}
-			this.html.insertNode(element, isInline ? null : this.format.isBlock(formatEl) ? null : formatEl, true);
-			if (!isInline && formatEl && domUtils.isZeroWith(formatEl)) domUtils.removeItem(formatEl);
+			this.html.insertNode(element, { afterNode: isInline ? null : this.format.isBlock(formatEl) ? null : formatEl, skipCharCount: true });
+			if (!isInline && formatEl && dom.check.isZeroWidth(formatEl)) dom.utils.removeItem(formatEl);
 		}
 
 		if (isInline) {
-			const empty = domUtils.createTextNode(unicode.zeroWidthSpace);
+			const empty = dom.utils.createTextNode(unicode.zeroWidthSpace);
 			element.parentNode.insertBefore(empty, element.nextSibling);
 		}
 
-		this.history.push(false);
+		if (!skipHistory) this.history.push(false);
 
-		if (!notSelect) {
+		if (!skipSelection) {
 			this.selection.setRange(element, 0, element, 0);
 			const fileComponentInfo = this.get(element);
 			if (fileComponentInfo) {
 				this.select(fileComponentInfo.target, fileComponentInfo.pluginName);
 			} else if (oNode) {
-				oNode = domUtils.getEdgeChildNodes(oNode, null).sc || oNode;
+				oNode = dom.query.getEdgeChildNodes(oNode, null).sc || oNode;
 				this.selection.setRange(oNode, 0, oNode, 0);
 			}
 		}
 
-		return oNode || element;
+		// document type
+		if (this.editor.frameContext.has('documentType-use-header')) {
+			this.editor.frameContext.get('documentType').reHeader();
+		}
+
+		return /** @type {HTMLElement} */ (oNode || element);
 	},
 
 	/**
+	 * @this {ComponentThis}
 	 * @description Gets the file component and that plugin name
-	 * return: {target, component, pluginName} | null
-	 * @param {Element} element Target element (figure tag, component div, file tag)
-	 * @returns {Object|null}
+	 * - return: {target, component, pluginName} | null
+	 * @param {Node} element Target element (figure tag, component div, file tag)
+	 * @returns {ComponentInfo|null}
 	 */
 	get(element) {
 		if (!element) return null;
@@ -113,10 +181,11 @@ Component.prototype = {
 		let pluginName = '';
 		let options = {};
 		let isFile = false;
+		let launcher = null;
 
 		if (this.is(element)) {
-			if (domUtils.hasClass(element, 'se-component') && !domUtils.hasClass(element, 'se-inline-component')) element = element.firstElementChild || element;
-			if (/^FIGURE$/i.test(element.nodeName)) element = element.firstElementChild;
+			if (dom.utils.hasClass(element, 'se-component') && !dom.utils.hasClass(element, 'se-inline-component')) element = /** @type {HTMLElement} */ (element).firstElementChild || element;
+			if (/^FIGURE$/i.test(element.nodeName)) element = /** @type {HTMLElement} */ (element).firstElementChild;
 			if (!element) return null;
 
 			const comp = this.editor._componentManager.map((f) => f(element)).find((e) => e);
@@ -124,6 +193,7 @@ Component.prototype = {
 			target = comp.target;
 			pluginName = comp.pluginName;
 			options = comp.options;
+			launcher = comp.launcher;
 		}
 
 		if (!target && element.nodeName) {
@@ -135,6 +205,7 @@ Component.prototype = {
 			target = comp.target;
 			pluginName = comp.pluginName;
 			options = comp.options;
+			launcher = comp.launcher;
 		}
 
 		if (!target) {
@@ -148,25 +219,31 @@ Component.prototype = {
 			options,
 			container: figureInfo.container || figureInfo.cover || target,
 			cover: figureInfo.cover,
+			inlineCover: figureInfo.inlineCover,
 			caption: figureInfo.caption,
-			isFile: isFile
+			isFile,
+			launcher
 		});
 	},
 
 	/**
-	 * @description The component(image, video) is selected and the resizing module is called.
-	 * @param {Element} element Element tag (img, iframe, video)
-	 * @param {string} pluginName Plugin name (image, video)
+	 * @this {ComponentThis}
+	 * @description The component(media, file component, table, etc) is selected and the resizing module is called.
+	 * @param {Node} element Target element
+	 * @param {string} pluginName The plugin name for the selected target.
+	 * @param {boolean=} isInput Whether the target is an input component.(table)
 	 */
 	select(element, pluginName, isInput) {
 		const info = this.get(element);
-		if (!info || domUtils.isUneditable(domUtils.getParentElement(element, this.is.bind(this))) || domUtils.isUneditable(element)) return false;
+		if (!info || dom.check.isUneditable(dom.query.getParentElement(element, this.is.bind(this))) || dom.check.isUneditable(element)) return false;
 
-		const plugin = this.plugins[pluginName];
+		const plugin = info.launcher || this.plugins[pluginName];
 		if (!plugin) return;
 
 		if (!isInput && _DragHandle.get('__overInfo') !== ON_OVER_COMPONENT) {
-			this.editor._antiBlur = true;
+			if (this.editor.status._onMousedown) return;
+
+			this.editor._preventBlur = true;
 			this.__selectionSelected = true;
 			if (this.isInline(info.container)) {
 				this.selection.setRange(info.container, 0, info.container, 0);
@@ -182,7 +259,8 @@ Component.prototype = {
 		let isNonFigureComponent;
 		if (typeof plugin.select === 'function') isNonFigureComponent = plugin.select(element);
 
-		if (!isNonFigureComponent && !domUtils.hasClass(info.container, 'se-inline-component')) this._setComponentLineBreaker(info.container || info.cover || element);
+		const isBreakComponent = dom.utils.hasClass(info.target, 'se-component-line-break');
+		if (isBreakComponent || (!isNonFigureComponent && !dom.utils.hasClass(info.container, 'se-inline-component'))) this._setComponentLineBreaker(/** @type {HTMLElement} */ (info.container || info.cover || element));
 
 		this.currentTarget = element;
 		this.currentPlugin = plugin;
@@ -197,38 +275,40 @@ Component.prototype = {
 			if (__overInfo !== ON_OVER_COMPONENT) this.__addGlobalEvent();
 			if (!info.isFile) this.__addNotFileGlobalEvent();
 		}, 0);
-		domUtils.addClass(info.container, 'se-component-selected');
-
-		if (__overInfo !== ON_OVER_COMPONENT) {
-			domUtils.setDisabled(this.editor._controllerOnDisabledButtons, true);
+		dom.utils.addClass(info.container, 'se-component-selected');
 
+		if (!isBreakComponent && __overInfo !== ON_OVER_COMPONENT) {
 			// set zero width space
 			if (!this.isInline(info.container)) return;
 
 			const oNode = info.container;
 			let zeroWidth = null;
-			if (!oNode.previousSibling || domUtils.isBreak(oNode.previousSibling)) {
-				zeroWidth = domUtils.createTextNode(unicode.zeroWidthSpace);
+			if (!oNode.previousSibling || dom.check.isBreak(oNode.previousSibling)) {
+				zeroWidth = dom.utils.createTextNode(unicode.zeroWidthSpace);
 				oNode.parentNode.insertBefore(zeroWidth, oNode);
 			}
 
-			if (!oNode.nextSibling || domUtils.isBreak(oNode.nextSibling)) {
-				zeroWidth = domUtils.createTextNode(unicode.zeroWidthSpace);
+			if (!oNode.nextSibling || dom.check.isBreak(oNode.nextSibling)) {
+				zeroWidth = dom.utils.createTextNode(unicode.zeroWidthSpace);
 				oNode.parentNode.insertBefore(zeroWidth, oNode.nextSibling);
 			}
-		} else if (!domUtils.hasClass(info.container, 'se-input-component')) {
+
+			this.editor.status.onSelected = true;
+		} else if (isBreakComponent || !dom.utils.hasClass(info.container, 'se-input-component')) {
 			const dragHandle = this.editor.frameContext.get('wrapper').querySelector('.se-drag-handle');
-			domUtils.addClass(dragHandle, 'se-drag-handle-full');
-			this.editor._visibleControllers(false, false);
+			dom.utils.addClass(dragHandle, 'se-drag-handle-full');
+			this.ui._visibleControllers(false, false);
 
 			const sizeTarget = info.caption ? info.target : info.cover || info.container || info.target;
-			const { w, h, t, l } = this.offset.getSize(sizeTarget);
+			const w = sizeTarget.offsetWidth;
+			const h = sizeTarget.offsetHeight;
+			const { top, left } = this.offset.getLocal(sizeTarget);
 
 			dragHandle.style.opacity = 0;
 			dragHandle.style.width = w + 'px';
 			dragHandle.style.height = h + 'px';
-			dragHandle.style.top = t + 'px';
-			dragHandle.style.left = l + 'px';
+			dragHandle.style.top = top - 1 + 'px';
+			dragHandle.style.left = left + 'px';
 
 			_DragHandle.set('__dragHandler', dragHandle);
 			_DragHandle.set('__dragContainer', info.container);
@@ -238,51 +318,40 @@ Component.prototype = {
 		}
 	},
 
+	/**
+	 * @this {ComponentThis}
+	 * @description Deselects the selected component.
+	 */
 	deselect() {
-		this.editor._antiBlur = false;
-		_DragHandle.set('__overInfo', null);
-		this._removeDragEvent(this);
-		domUtils.removeClass(this.currentInfo?.container, 'se-component-selected|');
-		domUtils.removeClass(this.currentInfo?.cover, 'se-figure-over-selected');
-
-		const { frameContext } = this.editor;
-		frameContext.get('lineBreaker_t').style.display = frameContext.get('lineBreaker_b').style.display = 'none';
-
-		if (this.currentPlugin && typeof this.currentPlugin.deselect === 'function') {
-			this.currentPlugin.deselect(this.currentTarget);
-		}
-
-		this.isSelected = false;
-		this.currentPlugin = null;
-		this.currentTarget = null;
-		this.currentPluginName = '';
-		this.currentInfo = null;
-		this.__removeGlobalEvent();
-		this.editor.__offControllers();
-
-		domUtils.setDisabled(this.editor._controllerOnDisabledButtons, false);
+		_w.setTimeout(() => {
+			this.editor.status.onSelected = false;
+		}, 0);
+		this.__deselect();
+		this.ui.setControllerOnDisabledButtons(false);
 	},
 
 	/**
+	 * @this {ComponentThis}
 	 * @description Determines if the specified node is a block component (e.g., img, iframe, video, audio, table) with the class "se-component"
-	 * or a direct FIGURE node. This function checks if the node itself is a component
-	 * or if it belongs to any components identified by the component manager.
+	 * - or a direct FIGURE node. This function checks if the node itself is a component
+	 * - or if it belongs to any components identified by the component manager.
 	 * @param {Node} element The DOM node to check.
 	 * @returns {boolean} True if the node is a block component or part of it, otherwise false.
 	 */
 	is(element) {
 		if (!element) return false;
 
-		if (/^FIGURE$/i.test(element.nodeName) || domUtils.hasClass(element, 'se-component')) return true;
+		if (/^FIGURE$/i.test(element.nodeName) || dom.utils.hasClass(element, 'se-component')) return true;
 		if (this.editor._componentManager.find((f) => f(element))) return true;
 
 		return false;
 	},
 
 	/**
+	 * @this {ComponentThis}
 	 * @description Checks if the given node is an inline component (class "se-inline-component").
-	 * If the node is a FIGURE, it checks the parent element instead.
-	 * It also verifies whether the node is part of an inline component recognized by the component manager.
+	 * - If the node is a FIGURE, it checks the parent element instead.
+	 * - It also verifies whether the node is part of an inline component recognized by the component manager.
 	 * @param {Node} element The DOM node to check.
 	 * @returns {boolean} True if the node is an inline component or part of it, otherwise false.
 	 */
@@ -290,18 +359,19 @@ Component.prototype = {
 		if (!element) return false;
 
 		if (/^FIGURE$/i.test(element.nodeName)) element = element.parentElement;
-		if (domUtils.hasClass(element, 'se-inline-component')) return true;
+		if (dom.utils.hasClass(element, 'se-inline-component')) return true;
 
 		const container = this.editor._componentManager.find((f) => f(element));
-		if (container && domUtils.hasClass(element, 'se-inline-component')) return true;
+		if (container && dom.utils.hasClass(element, 'se-inline-component')) return true;
 
 		return false;
 	},
 
 	/**
+	 * @this {ComponentThis}
 	 * @description Checks if the specified node qualifies as a basic component within the editor.
-	 * This function verifies whether the node is recognized as a component by the `is` function, while also ensuring that it is not an inline component as determined by the `isInline` function.
-	 * This is used to identify block-level elements or standalone components that are not part of the inline component classification.
+	 * - This function verifies whether the node is recognized as a component by the `is` function, while also ensuring that it is not an inline component as determined by the `isInline` function.
+	 * - This is used to identify block-level elements or standalone components that are not part of the inline component classification.
 	 * @param {Node} element The DOM node to check.
 	 * @returns {boolean} True if the node is a basic (non-inline) component, otherwise false.
 	 */
@@ -309,46 +379,91 @@ Component.prototype = {
 		return this.is(element) && !this.isInline(element);
 	},
 
+	/**
+	 * @private
+	 * @this {ComponentThis}
+	 * @description Checks if the given element is a file component by matching its tag name against the file manager's regular expressions.
+	 * - It also verifies whether the element has the required attributes based on the tag type.
+	 * @param {Node} element The element to check.
+	 * @returns {boolean} Returns true if the element is a file component, otherwise false.
+	 */
 	__isFiles(element) {
 		const nodeName = element.nodeName.toLowerCase();
-		return this.editor._fileManager.regExp.test(nodeName) && (!this.editor._fileManager.tagAttrs[nodeName] || this.editor._fileManager.tagAttrs[nodeName]?.every((v) => element.hasAttribute(v)));
+		return this.editor._fileManager.regExp.test(nodeName) && (!this.editor._fileManager.tagAttrs[nodeName] || this.editor._fileManager.tagAttrs[nodeName]?.every((v) => /** @type {HTMLElement} */ (element).hasAttribute(v)));
+	},
+
+	/**
+	 * @private
+	 * @this {ComponentThis}
+	 * @description Deselects the currently selected component, removing any selection effects and associated event listeners.
+	 * - This method resets the selection state and hides UI elements related to the component selection.
+	 */
+	__deselect() {
+		this.editor._preventBlur = false;
+		_DragHandle.set('__overInfo', null);
+		this._removeDragEvent();
+		dom.utils.removeClass(this.currentInfo?.container, 'se-component-selected|');
+		dom.utils.removeClass(this.currentInfo?.cover, 'se-figure-over-selected');
+
+		const { frameContext } = this.editor;
+		frameContext.get('lineBreaker_t').style.display = frameContext.get('lineBreaker_b').style.display = 'none';
+
+		if (this.currentPlugin && typeof this.currentPlugin.deselect === 'function') {
+			this.currentPlugin.deselect(this.currentTarget);
+		}
+
+		this.isSelected = false;
+		this.currentPlugin = null;
+		this.currentTarget = null;
+		this.currentPluginName = '';
+		this.currentInfo = null;
+		this.__removeGlobalEvent();
+		this.ui.__offControllers();
 	},
 
 	/**
-	 * @description Set line breaker of component
-	 * @param {Element} element Element tag
 	 * @private
+	 * @this {ComponentThis}
+	 * @description Set line breaker of component
+	 * @param {HTMLElement} element Element tag
 	 */
 	_setComponentLineBreaker(element) {
+		const _overInfo = _DragHandle.get('__overInfo') === ON_OVER_COMPONENT;
 		this.eventManager._lineBreakComp = null;
 		const info = this.get(element);
 		if (!info) return;
 
 		const fc = this.editor.frameContext;
 		const container = info.container;
-		const isNonSelected = domUtils.hasClass(container, 'se-flex-component');
+		const isNonSelected = dom.utils.hasClass(container, 'se-flex-component');
 		const lb_t = fc.get('lineBreaker_t');
 		const lb_b = fc.get('lineBreaker_b');
 		const t_style = lb_t.style;
 		const b_style = lb_b.style;
 		const offsetTarget = container.offsetWidth < element.offsetWidth ? container : element;
 		const target = this.editor._figureContainer?.style.display === 'block' ? this.editor._figureContainer : offsetTarget;
-		const isList = domUtils.isListCell(container.parentNode);
+		const isList = dom.check.isListCell(container.parentNode);
 
 		// top
 		let componentTop, w;
 		const isRtl = this.options.get('_rtl');
 		const dir = isRtl ? ['right', 'left'] : ['left', 'right'];
-		const { t, scrollX, scrollY } = this.offset.getSize(offsetTarget);
+		const { top, left, scrollX, scrollY } = this.offset.getLocal(offsetTarget);
+
 		if (isList ? !container.previousSibling : !this.format.isLine(container.previousElementSibling)) {
-			const tH = numbers.get(_w.getComputedStyle(lb_t).height, 1);
+			const tlComputedStyle = _w.getComputedStyle(lb_t);
+			const tH = numbers.get(tlComputedStyle.height, 1);
 			this.eventManager._lineBreakComp = container;
-			componentTop = t + scrollY;
+			componentTop = top;
 			w = target.offsetWidth / 2 / 2;
 			t_style.top = componentTop - scrollY - tH / 2 + 'px';
-			t_style[dir[0]] = (isNonSelected ? 4 : this.offset.get(target).left + w) + 'px';
+			t_style[dir[0]] = (isNonSelected ? left - numbers.get(tlComputedStyle.height, 0) / 2 : left + w) + 'px';
 			t_style[dir[1]] = '';
+
 			lb_t.setAttribute('data-offset', scrollY + ',' + scrollX);
+			if (_overInfo) dom.utils.removeClass(lb_t, 'se-on-selected');
+			else dom.utils.addClass(lb_t, 'se-on-selected');
+
 			t_style.display = 'block';
 		} else {
 			t_style.display = 'none';
@@ -362,22 +477,30 @@ Component.prototype = {
 
 			if (!componentTop) {
 				this.eventManager._lineBreakComp = container;
-				componentTop = t + scrollY;
+				componentTop = top;
 				w = target.offsetWidth / 2 / 2;
 			}
 
 			b_style.top = componentTop + target.offsetHeight - scrollY - bH / 2 + 'px';
 			b_style.right = '';
-			b_style.left = this.offset.get(target).left + (isRtl ? 0 : target.offsetWidth) - (isNonSelected ? 0 : w) - (isNonSelected ? bW / 2 : bW) + 'px';
+			b_style.left = left + (isRtl ? 0 : target.offsetWidth) - (isNonSelected ? 0 : w) - (isNonSelected ? bW / 2 : bW) + 'px';
 
 			const bDir = 'left';
 			lb_b.setAttribute('data-offset', scrollY + ',' + bDir + ',' + scrollX);
+			if (_overInfo) dom.utils.removeClass(lb_b, 'se-on-selected');
+			else dom.utils.addClass(lb_b, 'se-on-selected');
+
 			b_style.display = 'block';
 		} else {
 			b_style.display = 'none';
 		}
 	},
 
+	/**
+	 * @private
+	 * @this {ComponentThis}
+	 * @description Adds global event listeners for component interactions such as copy, cut, and keydown events.
+	 */
 	__addGlobalEvent() {
 		this.__removeGlobalEvent();
 		this._bindClose_copy = this.eventManager.addGlobalEvent('copy', this.__globalEvents.copy);
@@ -385,6 +508,11 @@ Component.prototype = {
 		this._bindClose_keydown = this.eventManager.addGlobalEvent('keydown', this.__globalEvents.keydown);
 	},
 
+	/**
+	 * @private
+	 * @this {ComponentThis}
+	 * @description Removes global event listeners that were previously added for component interactions.
+	 */
 	__removeGlobalEvent() {
 		this.__removeNotFileGlobalEvent();
 		if (this._bindClose_copy) this._bindClose_copy = this.eventManager.removeGlobalEvent(this._bindClose_copy);
@@ -392,23 +520,38 @@ Component.prototype = {
 		if (this._bindClose_keydown) this._bindClose_keydown = this.eventManager.removeGlobalEvent(this._bindClose_keydown);
 	},
 
+	/**
+	 * @private
+	 * @this {ComponentThis}
+	 * @description Adds global event listeners for non-file-related interactions such as mouse and touch events.
+	 */
 	__addNotFileGlobalEvent() {
 		this.__removeNotFileGlobalEvent();
-		this._bindClose_mousedown = this.eventManager.addGlobalEvent('mousedown', this.__globalEvents.mousedown, true);
-		this._bindClose_touchstart = this.eventManager.addGlobalEvent('touchstart', this.__globalEvents.mousedown, true);
+		if (!isMobile) this._bindClose_mousedown = this.eventManager.addGlobalEvent('mousedown', this.__globalEvents.mousedown, true);
+		else this._bindClose_touchstart = this.eventManager.addGlobalEvent('touchstart', this.__globalEvents.mousedown, true);
 	},
 
+	/**
+	 * @private
+	 * @this {ComponentThis}
+	 * @description Removes global event listeners related to non-file interactions.
+	 */
 	__removeNotFileGlobalEvent() {
 		if (this._bindClose_mousedown) this._bindClose_mousedown = this.eventManager.removeGlobalEvent(this._bindClose_mousedown);
 		if (this._bindClose_touchstart) this._bindClose_touchstart = this.eventManager.removeGlobalEvent(this._bindClose_touchstart);
 	},
 
+	/**
+	 * @private
+	 * @this {ComponentThis}
+	 * @description Removes drag-related events and resets drag-related states.
+	 */
 	_removeDragEvent() {
-		this.carrierWrapper.querySelector('.se-drag-cursor').style.left = '-10000px';
+		/** @type {HTMLElement} */ (this.carrierWrapper.querySelector('.se-drag-cursor')).style.left = '-10000px';
 		if (_DragHandle.get('__dragHandler')) _DragHandle.get('__dragHandler').style.display = 'none';
 
-		domUtils.removeClass([_DragHandle.get('__dragHandler'), _DragHandle.get('__dragContainer')], 'se-dragging');
-		domUtils.removeClass([_DragHandle.get('__dragCover'), _DragHandle.get('__dragContainer')], 'se-drag-over');
+		dom.utils.removeClass([_DragHandle.get('__dragHandler'), _DragHandle.get('__dragContainer')], 'se-dragging');
+		dom.utils.removeClass([_DragHandle.get('__dragCover'), _DragHandle.get('__dragContainer')], 'se-drag-over');
 
 		_DragHandle.set('__figureInst', null);
 		_DragHandle.set('__dragInst', null);
@@ -422,18 +565,28 @@ Component.prototype = {
 	constructor: Component
 };
 
+/**
+ * @this {ComponentThis}
+ */
 function OnDragEnter() {
-	this.editor._antiBlur = true;
-	this.editor._visibleControllers(false, domUtils.hasClass(_DragHandle.get('__dragHandler'), 'se-drag-handle-full'));
-	domUtils.addClass(_DragHandle.get('__dragCover') || _DragHandle.get('__dragContainer'), 'se-drag-over');
+	this.editor._preventBlur = true;
+	this.ui._visibleControllers(false, dom.utils.hasClass(_DragHandle.get('__dragHandler'), 'se-drag-handle-full'));
+	dom.utils.addClass(_DragHandle.get('__dragCover') || _DragHandle.get('__dragContainer'), 'se-drag-over');
 }
 
+/**
+ * @this {ComponentThis}
+ */
 function OnDragLeave() {
-	this.editor._antiBlur = false;
-	if (!domUtils.hasClass(_DragHandle.get('__dragHandler'), 'se-drag-handle-full')) this.editor._visibleControllers(true, true);
-	domUtils.removeClass([_DragHandle.get('__dragCover'), _DragHandle.get('__dragContainer')], 'se-drag-over');
+	this.editor._preventBlur = false;
+	if (!dom.utils.hasClass(_DragHandle.get('__dragHandler'), 'se-drag-handle-full')) this.ui._visibleControllers(true, true);
+	dom.utils.removeClass([_DragHandle.get('__dragCover'), _DragHandle.get('__dragContainer')], 'se-drag-over');
 }
 
+/**
+ * @this {ComponentThis}
+ * @param {DragEvent} e - Drag event
+ */
 function OnDragStart(e) {
 	const cover = _DragHandle.get('__dragCover') || _DragHandle.get('__dragContainer');
 
@@ -442,29 +595,44 @@ function OnDragStart(e) {
 		return;
 	}
 
-	this.editor._antiBlur = false;
-	domUtils.addClass(_DragHandle.get('__dragHandler'), 'se-dragging');
-	domUtils.addClass(_DragHandle.get('__dragContainer'), 'se-dragging');
+	this.editor._preventBlur = false;
+	dom.utils.addClass(_DragHandle.get('__dragHandler'), 'se-dragging');
+	dom.utils.addClass(_DragHandle.get('__dragContainer'), 'se-dragging');
 	e.dataTransfer.setDragImage(cover, this.options.get('_rtl') ? cover.offsetWidth : -5, -5);
 }
 
+/**
+ * @this {ComponentThis}
+ */
 function OnDragEnd() {
-	this.editor._antiBlur = false;
-	domUtils.removeClass([_DragHandle.get('__dragHandler'), _DragHandle.get('__dragContainer')], 'se-dragging');
+	this.editor._preventBlur = false;
+	dom.utils.removeClass([_DragHandle.get('__dragHandler'), _DragHandle.get('__dragContainer')], 'se-dragging');
 	this._removeDragEvent();
 }
 
-function OnDragClick({ target }) {
-	if (!domUtils.hasClass(target, 'se-drag-handle-full')) return;
+/**
+ * @this {ComponentThis}
+ * @param {MouseEvent} e - Mouse event
+ */
+function OnDragClick(e) {
+	const target = dom.query.getEventTarget(e);
+	if (!dom.utils.hasClass(target, 'se-drag-handle-full')) return;
+
 	const dragInst = _DragHandle.get('__dragInst');
+	this._removeDragEvent();
 	this.select(dragInst.currentTarget, dragInst.currentPluginName, false);
 }
 
-function CloseListener_mousedown({ target }) {
+/**
+ * @this {ComponentThis}
+ * @param {MouseEvent} e - Mouse event
+ */
+function CloseListener_mousedown(e) {
+	const target = dom.query.getEventTarget(e);
 	if (
 		this.currentTarget?.contains(target) ||
-		domUtils.getParentElement(target, '.se-controller') ||
-		domUtils.hasClass(target, 'se-drag-handle') ||
+		dom.query.getParentElement(target, '.se-controller') ||
+		dom.utils.hasClass(target, 'se-drag-handle') ||
 		(this.currentPluginName === this.editor.currentControllerName && this.editor.opendControllers.some(({ form }) => form.contains(target)))
 	) {
 		return;
@@ -472,39 +640,52 @@ function CloseListener_mousedown({ target }) {
 	this.deselect();
 }
 
+/**
+ * @this {ComponentThis}
+ * @param {ClipboardEvent} e - Event object
+ */
 function OnCopy_component(e) {
-	if (domUtils.isInputElement(e.target) && domUtils.getParentElement(e.target, '.se-modal')) return;
+	const target = dom.query.getEventTarget(e);
+	if (dom.check.isInputElement(target) && dom.query.getParentElement(target, '.se-modal')) return;
 
 	const info = this.info;
 	if (!info) return;
 
 	SetClipboardComponent(e, info.container, e.clipboardData);
-	domUtils.addClass(info.container, 'se-copy');
+	dom.utils.addClass(info.container, 'se-copy');
 	// copy effect
 	_w.setTimeout(() => {
-		domUtils.removeClass(info.container, 'se-copy');
+		dom.utils.removeClass(info.container, 'se-copy');
 	}, 120);
 }
 
+/**
+ * @this {ComponentThis}
+ * @param {ClipboardEvent} e - Event object
+ */
 function OnCut_component(e) {
 	const info = this.info;
 	if (!info) return;
 
 	SetClipboardComponent(e, info.container, e.clipboardData);
 	this.deselect();
-	domUtils.removeItem(info.container);
+	dom.utils.removeItem(info.container);
 }
 
-function OnKeyDown_component(e) {
+/**
+ * @this {ComponentThis}
+ * @param {KeyboardEvent} e - Event object
+ */
+async function OnKeyDown_component(e) {
 	if (this.editor.selectMenuOn) return;
 
-	const keyCode = e.keyCode;
-	const ctrl = e.ctrlKey || e.metaKey || keyCode === 91 || keyCode === 92 || keyCode === 224;
+	const keyCode = e.code;
+	const ctrl = keyCodeMap.isCtrl(e);
 
 	// redo, undo
 	if (ctrl) {
-		if (keyCode !== 17) {
-			const info = this.editor.shortcutsKeyMap.get(keyCode + (e.shiftKey ? 1000 : 0));
+		if (keyCode !== 'ControlRight' && keyCode !== 'ControlLeft') {
+			const info = this.editor.shortcutsKeyMap.get(keyCode + (e.shiftKey ? '1000' : ''));
 			if (/^(redo|undo)$/.test(info?.c)) {
 				e.preventDefault();
 				e.stopPropagation();
@@ -514,29 +695,29 @@ function OnKeyDown_component(e) {
 		return;
 	}
 
-	// backspace, delete
-	if (keyCode === 8 || keyCode === 46) {
+	// backspace key, delete key
+	if (keyCodeMap.isRemoveKey(keyCode)) {
 		e.preventDefault();
 		e.stopPropagation();
 		if (typeof this.currentPlugin?.destroy === 'function') {
-			this.currentPlugin.destroy(this.currentTarget);
+			await this.currentPlugin.destroy(this.currentTarget);
 			this.deselect();
 			this.editor.focus();
 			return;
 		}
 	}
 
-	// enter
-	if (keyCode === 13) {
+	// enter key
+	if (keyCodeMap.isEnter(keyCode)) {
 		e.preventDefault();
 		const compContext = this.currentInfo || this.get(this.currentTarget);
 		const container = compContext.container || compContext.target;
 		const sibling = container.previousElementSibling || container.nextElementSibling;
 		let newEl = null;
-		if (domUtils.isListCell(container.parentNode)) {
-			newEl = domUtils.createElement('BR');
+		if (dom.check.isListCell(container.parentNode)) {
+			newEl = dom.utils.createElement('BR');
 		} else {
-			newEl = domUtils.createElement(this.format.isLine(sibling) && !this.format.isBlock(sibling) ? sibling.nodeName : this.options.get('defaultLine'), null, '<br>');
+			newEl = dom.utils.createElement(this.format.isLine(sibling) ? sibling.nodeName : this.options.get('defaultLine'), null, '<br>');
 		}
 
 		const pluginName = this.currentPluginName;
@@ -557,21 +738,22 @@ function OnKeyDown_component(e) {
 		let offset = 1;
 		if (isInline) {
 			switch (keyCode) {
-				case 37: // left
+				case 'ArrowLeft': // left
 					el = container.previousSibling;
 					offset = el?.nodeType === 3 ? el.textContent.length : 1;
 					break;
-				case 39: // right
+				case 'ArrowRight': // right
 					el = container.nextSibling;
+					offset = 0;
 					break;
-				case 38: {
+				case 'ArrowUp': {
 					// up
 					const line = this.format.getLine(container, null);
 					el = line?.previousElementSibling;
 					offset = 0;
 					break;
 				}
-				case 40: {
+				case 'ArrowDown': {
 					// down
 					const line = this.format.getLine(container, null);
 					el = line?.nextElementSibling;
@@ -597,16 +779,21 @@ function OnKeyDown_component(e) {
 			e.preventDefault();
 			this.select(elComp.target, elComp.pluginName);
 		} else {
-			e.stopPropagation();
-			e.preventDefault();
-			this.selection.setRange(el, offset, el, offset);
+			try {
+				this.editor._preventBlur = true;
+				e.stopPropagation();
+				e.preventDefault();
+				this.selection.setRange(el, offset, el, offset);
+			} finally {
+				this.editor._preventBlur = false;
+			}
 		}
 
 		return;
 	}
 
 	// ESC
-	if (keyCode === 27) {
+	if (keyCodeMap.isEsc(keyCode)) {
 		this.deselect();
 		return;
 	}
@@ -616,8 +803,8 @@ function SetClipboardComponent(e, container, clipboardData) {
 	e.preventDefault();
 	e.stopPropagation();
 	const pasteContainer = container.cloneNode(true);
-	domUtils.removeClass(pasteContainer, 'se-component-selected');
-	pasteContainer.querySelectorAll('.se-figure-selected').forEach((el) => domUtils.removeClass(el, 'se-figure-selected'));
+	dom.utils.removeClass(pasteContainer, 'se-component-selected');
+	pasteContainer.querySelectorAll('.se-figure-selected').forEach((el) => dom.utils.removeClass(el, 'se-figure-selected'));
 	clipboardData.setData('text/html', pasteContainer.outerHTML);
 }