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

package/src/core/logic/shell/component.js

@@ -0,0 +1,970 @@
+import { dom, env, numbers, unicode, keyCodeMap, converter } from '../../../helper';
+import { Figure } from '../../../modules/contract';
+import { _DragHandle } from '../../../modules/ui';
+
+const { _w, ON_OVER_COMPONENT, isMobile } = env;
+const DIR_KEYCODE = /^Arrow(Left|Up|Right|Down)$/;
+const DIR_UP_KEYCODE = /^Arrow(Left|Up)$/;
+
+/**
+ * @description Class for managing components such as images and tables that are not in `line` format
+ */
+class Component {
+	#kernel;
+	#$;
+	#store;
+
+	#contextProvider;
+	#carrierWrapper;
+	#options;
+	#frameContext;
+	#eventManager;
+
+	/** @type {Object<string, (...args: *) => *>} */
+	#globalEvents;
+	/** @type {?SunEditor.Event.GlobalInfo} */
+	#bindClose_copy = null;
+	/** @type {?SunEditor.Event.GlobalInfo} */
+	#bindClose_cut = null;
+	/** @type {?SunEditor.Event.GlobalInfo} */
+	#bindClose_keydown = null;
+	/** @type {?SunEditor.Event.GlobalInfo} */
+	#bindClose_mousedown = null;
+
+	/**
+	 * @constructor
+	 * @param {SunEditor.Kernel} kernel
+	 */
+	constructor(kernel) {
+		this.#kernel = kernel;
+		this.#$ = kernel.$;
+		this.#store = kernel.store;
+
+		this.#contextProvider = this.#$.contextProvider;
+		this.#carrierWrapper = this.#contextProvider.carrierWrapper;
+		this.#options = this.#$.options;
+		this.#frameContext = this.#$.frameContext;
+		this.#eventManager = this.#$.eventManager;
+
+		/**
+		 * @description The current component information, used copy, cut, and keydown events
+		 * @type {SunEditor.ComponentInfo}
+		 */
+		this.info = null;
+
+		/**
+		 * @description Component is selected
+		 * @type {boolean}
+		 */
+		this.isSelected = false;
+
+		/**
+		 * @description Currently selected component target
+		 * @type {?Node}
+		 */
+		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 {?SunEditor.ComponentInfo}
+		 */
+		this.currentInfo = null;
+
+		this.#globalEvents = {
+			copy: this.#OnCopy_component.bind(this),
+			cut: this.#OnCut_component.bind(this),
+			keydown: this.#OnKeyDown_component.bind(this),
+			mousedown: this.#CloseListener_mousedown.bind(this),
+		};
+
+		/** @internal */
+		this.__selectionSelected = false;
+		/** @internal */
+		this.__prevent = false;
+	}
+
+	/**
+	 * @description Initialize eventManager reference after EventManager is created.
+	 */
+	_init() {
+		this.#contextProvider.applyToRoots((e) => {
+			// drag
+			const dragHandle = dom.utils.createElement('DIV', { class: 'se-drag-handle', draggable: 'true' }, this.#contextProvider.icons.selection);
+			e.get('wrapper').appendChild(dragHandle);
+			this.#eventManager.addEvent(dragHandle, 'mouseenter', this.#OnDragEnter.bind(this));
+			this.#eventManager.addEvent(dragHandle, 'mouseleave', this.#OnDragLeave.bind(this));
+			this.#eventManager.addEvent(dragHandle, 'dragstart', this.#OnDragStart.bind(this));
+			this.#eventManager.addEvent(dragHandle, 'dragend', this.#OnDragEnd.bind(this));
+			this.#eventManager.addEvent(dragHandle, 'click', this.#OnDragClick.bind(this));
+		});
+	}
+
+	/**
+	 * @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.skipHistory=false] If `true`, do not push to history.
+	 * @param {boolean} [options.scrollTo=true] `true` : Scroll to the inserted element, `false` : Do not scroll.
+	 * @param {SunEditor.ComponentInsertType} [options.insertBehavior] If `true`, do not automatically select the inserted component. [default: `options.get('componentInsertBehavior')`]
+	 * - If `null`, no action is performed after insertion.
+	 * @returns {HTMLElement} The inserted element or new line (for HR)
+	 */
+	insert(element, { skipCharCount = false, skipHistory = false, scrollTo = true, insertBehavior } = {}) {
+		if (this.#frameContext.get('isReadOnly') || (!skipCharCount && !this.#$.char.check(element))) {
+			return null;
+		}
+
+		if (insertBehavior === undefined) insertBehavior = this.#options.get('componentInsertBehavior');
+
+		const r = this.#$.html.remove();
+		const isInline = this.isInline(element);
+		this.#$.selection.getRangeAndAddLine(this.#$.selection.getRange(), r.container);
+		const selectionNode = this.#$.selection.getNode();
+		let oNode = null;
+		let formatEl = this.#$.format.getLine(selectionNode, null);
+
+		try {
+			if (dom.check.isListCell(formatEl)) {
+				this.#$.html.insertNode(element, { afterNode: isInline ? null : !dom.check.isZeroWidth(selectionNode) ? null : (selectionNode || r.container || {}).nextSibling, skipCharCount: true });
+				if (!isInline && !element.nextSibling) element.parentNode.appendChild(dom.utils.createElement('BR'));
+			} else {
+				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, { 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 = dom.utils.createTextNode(unicode.zeroWidthSpace);
+				element.parentNode.insertBefore(empty, element.nextSibling);
+			}
+		} catch (e) {
+			console.error('Component insert error:', e);
+		}
+
+		if (!skipHistory) this.#$.history.push(false);
+
+		// document type
+		if (this.#frameContext.has('documentType_use_header')) {
+			this.#frameContext.get('documentType').reHeader();
+		}
+
+		const targetElement = /** @type {HTMLElement} */ (oNode || element);
+
+		if (scrollTo) this.#$.selection.scrollTo(targetElement, { behavior: 'auto' });
+		if (insertBehavior !== null) this.applyInsertBehavior(element, oNode, insertBehavior);
+
+		return targetElement;
+	}
+
+	/**
+	 * @description Handles post-insertion behavior for a newly created component based on the specified mode.
+	 * @param {Node} container The inserted component element.
+	 * @param {?Node} [oNode] Optional node to use for selection if the component cannot be selected.
+	 * @param {SunEditor.ComponentInsertType} [insertBehavior] Behavior mode after component insertion.
+	 */
+	applyInsertBehavior(container, oNode, insertBehavior) {
+		const cInfo = this.get(container);
+
+		if (this.isInline(container)) {
+			const nr = this.#$.selection.getNearRange(container);
+			if (nr) {
+				this.#$.selection.setRange(nr.container, nr.offset, nr.container, nr.offset);
+			} else {
+				this.select(cInfo.target, cInfo.pluginName);
+			}
+			return;
+		}
+
+		switch (insertBehavior) {
+			case 'auto': {
+				if (!this.#moveToNextLineOrAdd(container)) {
+					this.select(cInfo.target, cInfo.pluginName);
+				}
+
+				break;
+			}
+			case 'select': {
+				this.#$.selection.setRange(container, 0, container, 0);
+
+				if (cInfo) {
+					this.select(cInfo.target, cInfo.pluginName);
+				} else if (oNode) {
+					oNode = dom.query.getEdgeChildNodes(oNode, null).sc || oNode;
+					this.#$.selection.setRange(oNode, 0, oNode, 0);
+				}
+				break;
+			}
+			case 'line': {
+				if (!this.#moveToNextLineOrAdd(container)) {
+					const line = this.#$.format.addLine(container, null);
+					if (line) this.#$.selection.setRange(line, 0, line, 0);
+				}
+
+				break;
+			}
+			case 'none': {
+				// Do not select the component and remove the editor focus
+				break;
+			}
+		}
+	}
+
+	/**
+	 * @description Gets the file component and that plugin name
+	 * - return: {target, component, pluginName} | null
+	 * @param {Node} element Target element (figure tag, component div, file tag)
+	 * @returns {SunEditor.ComponentInfo|null}
+	 */
+	get(element) {
+		if (!element) return null;
+
+		let target;
+		let pluginName = '';
+		let options = {};
+		let isFile = false;
+		let launcher = null;
+
+		if (this.is(element)) {
+			if (dom.check.isComponentContainer(element) && !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.#$.pluginManager.findComponentInfo(element);
+			if (!comp) return null;
+			target = comp.target;
+			pluginName = comp.pluginName;
+			options = comp.options;
+			launcher = comp.launcher;
+		}
+
+		if (!target && element.nodeName) {
+			if (this.#isFiles(element)) {
+				isFile = true;
+			}
+			const comp = this.#$.pluginManager.findComponentInfo(element);
+			if (!comp) return null;
+			target = comp.target;
+			pluginName = comp.pluginName;
+			options = comp.options;
+			launcher = comp.launcher;
+		}
+
+		if (!target) {
+			return null;
+		}
+
+		const figureInfo = Figure.GetContainer(target);
+		const container = figureInfo.container || figureInfo.cover || target;
+		return (this.info = {
+			target: figureInfo.target,
+			pluginName,
+			options,
+			container: container,
+			cover: figureInfo.cover,
+			inlineCover: figureInfo.inlineCover,
+			caption: figureInfo.caption,
+			isFile,
+			launcher,
+			isInputType: dom.utils.hasClass(container, 'se-input-component'),
+		});
+	}
+
+	/**
+	 * @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 {Object} [options] Options
+	 * @param {boolean} [options.isInput=false] Whether the target is an input component (table).
+	 */
+	select(element, pluginName, { isInput = false } = {}) {
+		const info = this.get(element);
+		if (!info || dom.check.isUneditable(dom.query.getParentElement(element, this.is.bind(this))) || dom.check.isUneditable(element)) return false;
+
+		const plugin = info.launcher || this.#$.plugins[pluginName];
+		if (!plugin) return;
+
+		const notOver = _DragHandle.get('__overInfo') !== ON_OVER_COMPONENT;
+		if (!isInput && notOver) {
+			if (this.#store.get('_mousedown')) return;
+
+			this.#store.set('_preventBlur', true);
+			this.__selectionSelected = true;
+			if (this.isInline(info.container)) {
+				this.#$.selection.setRange(info.container, 0, info.container, 0);
+			}
+			this.#$.focusManager.blur();
+			// Defer flag reset — blur event fires synchronously and checks __selectionSelected to distinguish component-initiated blur
+			_w.setTimeout(() => {
+				this.__selectionSelected = false;
+			});
+		}
+
+		this.isSelected = true;
+		this.__prevent = true;
+
+		let isNonFigureComponent;
+		if (typeof plugin.componentSelect === 'function') isNonFigureComponent = plugin.componentSelect(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;
+		this.currentPluginName = pluginName;
+		this.currentInfo = info;
+
+		_DragHandle.set('__dragInst', this);
+
+		const __overInfo = _DragHandle.get('__overInfo');
+		// Defer drag handle setup — let the current click/mousedown event complete before attaching global listeners
+		_w.setTimeout(() => {
+			_DragHandle.set('__overInfo', __overInfo === ON_OVER_COMPONENT ? undefined : false);
+			if (__overInfo !== ON_OVER_COMPONENT) this.#addGlobalEvent();
+			if (!info.isFile) this.#addNotFileGlobalEvent();
+		}, 0);
+
+		converter.debounce(() => {
+			dom.utils.addClass(info.container, 'se-component-selected');
+		}, 0)();
+
+		if (notOver && !this.#store.get('hasFocus') && !this.#store.get('_preventFocus')) {
+			this.#kernel._eventOrchestrator.__postFocusEvent(this.#frameContext, null);
+			this.#store.set('_preventFocus', true);
+		}
+
+		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 || dom.check.isBreak(oNode.previousSibling)) {
+				zeroWidth = dom.utils.createTextNode(unicode.zeroWidthSpace);
+				oNode.parentNode.insertBefore(zeroWidth, oNode);
+			}
+
+			if (!oNode.nextSibling || dom.check.isBreak(oNode.nextSibling)) {
+				zeroWidth = dom.utils.createTextNode(unicode.zeroWidthSpace);
+				oNode.parentNode.insertBefore(zeroWidth, oNode.nextSibling);
+			}
+
+			this.#store.set('controlActive', true);
+		} else if (isBreakComponent || !dom.utils.hasClass(info.container, 'se-input-component')) {
+			const dragHandle = /** @type {HTMLElement} */ (this.#frameContext.get('wrapper').querySelector('.se-drag-handle'));
+			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 = 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 = top + 'px';
+			dragHandle.style.left = left + 'px';
+
+			_DragHandle.set('__dragHandler', dragHandle);
+			_DragHandle.set('__dragContainer', info.container);
+			_DragHandle.set('__dragCover', info.cover);
+
+			dragHandle.style.display = 'block';
+		}
+	}
+
+	/**
+	 * @description Deselects the selected component.
+	 */
+	deselect() {
+		// Defer controlActive reset — synchronous blur handlers during deselect still need to see it as active
+		_w.setTimeout(() => {
+			this.#store.set('controlActive', false);
+		}, 0);
+		this.__deselect();
+		this.#$.ui.setControllerOnDisabledButtons(false);
+
+		if (this.#store.get('_preventFocus') && !this.#store.get('hasFocus') && !this.__prevent) {
+			this.#kernel._eventOrchestrator.__postBlurEvent(this.#frameContext, null);
+			this.#store.set('_preventFocus', false);
+		}
+	}
+
+	/**
+	 * @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.
+	 * @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) || dom.check.isComponentContainer(element)) return true;
+		if (this.#$.pluginManager.findComponentInfo(element)) return true;
+
+		return false;
+	}
+
+	/**
+	 * @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.
+	 * @param {Node} element The DOM node to check.
+	 * @returns {boolean} True if the node is an inline component or part of it, otherwise false.
+	 */
+	isInline(element) {
+		if (!element) return false;
+
+		if (/^FIGURE$/i.test(element.nodeName)) element = element.parentElement;
+		if (dom.utils.hasClass(element, 'se-inline-component')) return true;
+
+		const comp = this.#$.pluginManager.findComponentInfo(element);
+		if (comp && (dom.utils.hasClass(element, 'se-inline-component') || dom.utils.hasClass(element.parentElement, 'se-inline-component'))) return true;
+
+		return false;
+	}
+
+	/**
+	 * @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.
+	 * @param {Node} element The DOM node to check.
+	 * @returns {boolean} True if the node is a basic (non-inline) component, otherwise false.
+	 */
+	isBasic(element) {
+		return this.is(element) && !this.isInline(element);
+	}
+
+	/**
+	 * @description Copies the specified component node to the clipboard.
+	 * - This function is different from the one called when the user presses the `Ctrl + C` key combination.
+	 * @param {Node} container The DOM node to check.
+	 */
+	async copy(container) {
+		const cloneContainer = /** @type {HTMLElement} */ (dom.utils.clone(container, true));
+
+		RemoveSelectedClass(cloneContainer);
+
+		// copy to clipboard
+		if ((await this.#$.html.copy(cloneContainer)) === false) return;
+
+		// copy effect
+		dom.utils.flashClass(container, 'se-copy');
+	}
+
+	/**
+	 * @description Temporarily selects a component without showing its controller.
+	 * This is a lightweight selection mode used for:
+	 * - Mouse hover: Shows visual selection while hovering, auto-deselects on mouse out
+	 * - Table column/row resize: Maintains selection after resize without showing controller
+	 *
+	 * Key differences from `select()`:
+	 * - Does NOT show the component's controller (resize handles, toolbar, etc.)
+	 * - Sets `__overInfo` flag so selection is automatically cleared on mouse out
+	 * - Calling `select()` afterward will upgrade to full selection with controller
+	 *
+	 * @param {Element} target The element to hover-select
+	 */
+	hoverSelect(target) {
+		const figure = dom.query.getParentElement(target, dom.check.isFigure);
+		let info = this.get(target);
+		if (info || figure) {
+			info ||= this.get(figure);
+			if (info && !dom.utils.hasClass(info.container, 'se-component-selected')) {
+				this.#$.ui.offCurrentController();
+				_DragHandle.set('__overInfo', ON_OVER_COMPONENT);
+				this.select(info.target, info.pluginName);
+			}
+		} else if (_DragHandle.get('__overInfo') !== null && !dom.utils.hasClass(target, 'se-drag-handle')) {
+			this.__deselect();
+			_DragHandle.set('__overInfo', null);
+		}
+	}
+
+	/**
+	 * @internal
+	 * @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.#store.set('_preventBlur', false);
+		_DragHandle.set('__overInfo', null);
+		this.__removeDragEvent();
+
+		if (this.currentInfo) {
+			const infoContainer = this.currentInfo.container;
+			const infoCover = this.currentInfo.cover;
+			converter.debounce(() => {
+				RemoveSelectedClass(infoContainer);
+				dom.utils.removeClass(infoCover, 'se-figure-over-selected');
+			}, 0)();
+		}
+
+		if (this.#frameContext.get('lineBreaker_t')) {
+			this.#frameContext.get('lineBreaker_t').style.display = this.#frameContext.get('lineBreaker_b').style.display = 'none';
+		}
+
+		if (this.currentPlugin) {
+			this.currentPlugin.componentDeselect?.(this.currentTarget);
+		}
+
+		this.isSelected = false;
+		this.currentPlugin = null;
+		this.currentTarget = null;
+		this.currentPluginName = '';
+		this.currentInfo = null;
+		this.__removeGlobalEvent();
+		this.#$.ui._offControllers();
+	}
+
+	/**
+	 * @internal
+	 * @description Set line breaker of component
+	 * @param {HTMLElement} element Element tag
+	 */
+	_setComponentLineBreaker(element) {
+		const _overInfo = _DragHandle.get('__overInfo') === ON_OVER_COMPONENT;
+		this.#kernel._eventOrchestrator._lineBreakComp = null;
+		const info = this.get(element);
+		if (!info) return;
+
+		const fc = this.#frameContext;
+		const container = info.container;
+		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.#$.ui.getVisibleFigure() || offsetTarget;
+		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 { top, left, right, scrollX, scrollY } = this.#$.offset.getLocal(offsetTarget);
+		const sideOffset = isRtl ? right : left;
+
+		if (isList ? (!dom.check.isBreak(container.previousElementSibling) && !container.previousSibling?.textContent?.trim()) || this.is(container.previousElementSibling) : !this.#$.format.isLine(container.previousElementSibling)) {
+			const cStyle = _w.getComputedStyle(lb_t);
+			const cH = numbers.get(cStyle.height, 1);
+			const cW = numbers.get(cStyle.width, 1);
+
+			this.#kernel._eventOrchestrator._lineBreakComp = container;
+			componentTop = top;
+			w = target.offsetWidth / 2 / 2;
+
+			t_style.top = componentTop - cH / 2 + 'px';
+			t_style[dir[0]] = (isNonSelected ? sideOffset - cW / 2 : sideOffset + 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';
+			t_style.visibility = '';
+		} else {
+			t_style.display = 'none';
+		}
+
+		// bottom
+		if (isList ? (!dom.check.isBreak(container.nextElementSibling) && !container.nextSibling?.textContent?.trim()) || this.is(container.nextElementSibling) : !this.#$.format.isLine(container.nextElementSibling)) {
+			const cStyle = _w.getComputedStyle(lb_b);
+			const cH = numbers.get(cStyle.height, 1);
+			const cW = numbers.get(cStyle.width, 1);
+
+			if (!componentTop) {
+				this.#kernel._eventOrchestrator._lineBreakComp = container;
+				componentTop = top;
+				w = target.offsetWidth / 2 / 2;
+			}
+
+			b_style.top = componentTop + target.offsetHeight - cH / 2 + 'px';
+			b_style[dir[0]] = sideOffset + target.offsetWidth - (isNonSelected ? 0 : w) - (isNonSelected ? cW / 2 : cW) + 'px';
+			b_style[dir[1]] = '';
+
+			lb_b.setAttribute('data-offset', scrollY + ',' + dir[0] + ',' + scrollX);
+			if (_overInfo) dom.utils.removeClass(lb_b, 'se-on-selected');
+			else dom.utils.addClass(lb_b, 'se-on-selected');
+
+			b_style.display = 'block';
+			b_style.visibility = '';
+		} else {
+			b_style.display = 'none';
+		}
+	}
+
+	/**
+	 * @internal
+	 * @description Removes global event listeners that were previously added for component interactions.
+	 */
+	__removeGlobalEvent() {
+		this.#removeNotFileGlobalEvent();
+		this.#bindClose_copy &&= this.#eventManager.removeGlobalEvent(this.#bindClose_copy);
+		this.#bindClose_cut &&= this.#eventManager.removeGlobalEvent(this.#bindClose_cut);
+		this.#bindClose_keydown &&= this.#eventManager.removeGlobalEvent(this.#bindClose_keydown);
+	}
+
+	/**
+	 * @internal
+	 * @description Removes drag-related events and resets drag-related states.
+	 */
+	__removeDragEvent() {
+		/** @type {HTMLElement} */ (this.#carrierWrapper.querySelector('.se-drag-cursor')).style.left = '-10000px';
+		if (_DragHandle.get('__dragHandler')) _DragHandle.get('__dragHandler').style.display = 'none';
+
+		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);
+		_DragHandle.set('__dragHandler', null);
+		_DragHandle.set('__dragContainer', null);
+		_DragHandle.set('__dragCover', null);
+		_DragHandle.set('__dragMove', null);
+		_DragHandle.set('__overInfo', null);
+	}
+
+	/**
+	 * @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);
+		this.#bindClose_cut = this.#eventManager.addGlobalEvent('cut', this.#globalEvents.cut);
+		this.#bindClose_keydown = this.#eventManager.addGlobalEvent('keydown', this.#globalEvents.keydown);
+	}
+
+	/**
+	 * @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(isMobile ? 'click' : 'mousedown', this.#globalEvents.mousedown, true);
+	}
+
+	/**
+	 * @internal
+	 * @description Removes global event listeners related to non-file interactions.
+	 */
+	#removeNotFileGlobalEvent() {
+		this.#bindClose_mousedown &&= this.#eventManager.removeGlobalEvent(this.#bindClose_mousedown);
+	}
+
+	/**
+	 * @description
+	 * Attempts to move the cursor to a valid line after the given container.
+	 * - If a valid next sibling line exists, moves the selection there.
+	 * - If no next sibling exists, creates a new line after the container and moves the selection there.
+	 * - If the next sibling exists but is not a valid line element and cannot create a new line, returns false.
+	 * @param {Node} container The component container element.
+	 * @returns {boolean} Returns true if the selection moved to a line (existing or newly created), otherwise false.
+	 */
+	#moveToNextLineOrAdd(container) {
+		const nextSibling = /** @type {Element} */ (container).nextElementSibling;
+		if (!nextSibling) {
+			const line = this.#$.format.addLine(container, null);
+			if (line) this.#$.selection.setRange(line, 0, line, 0);
+			return true;
+		} else if (this.#$.format.isLine(nextSibling)) {
+			this.#$.selection.setRange(nextSibling, 0, nextSibling, 0);
+			return true;
+		}
+
+		return false;
+	}
+
+	/**
+	 * @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.#$.pluginManager.fileInfo.regExp.test(nodeName) &&
+			(!this.#$.pluginManager.fileInfo.tagAttrs[nodeName] || this.#$.pluginManager.fileInfo.tagAttrs[nodeName]?.every((v) => /** @type {HTMLElement} */ (element).hasAttribute(v)))
+		);
+	}
+
+	#OnDragEnter() {
+		this.#store.set('_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');
+	}
+
+	#OnDragLeave() {
+		this.#store.set('_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');
+	}
+
+	/**
+	 * @param {DragEvent} e - Drag event
+	 */
+	#OnDragStart(e) {
+		const cover = _DragHandle.get('__dragCover') || _DragHandle.get('__dragContainer');
+
+		if (!cover) {
+			e.preventDefault();
+			return;
+		}
+
+		this.#store.set('_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);
+	}
+
+	#OnDragEnd() {
+		this.#store.set('_preventBlur', false);
+		dom.utils.removeClass([_DragHandle.get('__dragHandler'), _DragHandle.get('__dragContainer')], 'se-dragging');
+		this.__removeDragEvent();
+	}
+
+	/**
+	 * @param {MouseEvent} e - Mouse event
+	 */
+	#OnDragClick(e) {
+		const target = dom.query.getEventTarget(e);
+		if (!dom.utils.hasClass(target, 'se-drag-handle-full')) return;
+
+		const dragInst = _DragHandle.get('__dragInst');
+		if (!dragInst) return;
+
+		this.__removeDragEvent();
+		this.select(dragInst.currentTarget, dragInst.currentPluginName);
+	}
+
+	/**
+	 * @param {MouseEvent} e - Mouse event
+	 */
+	#CloseListener_mousedown(e) {
+		const target = dom.query.getEventTarget(e);
+		if (
+			this.currentTarget?.contains(target) ||
+			dom.query.getParentElement(target, '.se-controller') ||
+			dom.utils.hasClass(target, 'se-drag-handle') ||
+			(this.currentPluginName === this.#$.ui.currentControllerName && this.#$.ui.opendControllers.some(({ form }) => form.contains(target)))
+		) {
+			return;
+		}
+		this.deselect();
+	}
+
+	/**
+	 * @param {ClipboardEvent} e - Event object
+	 */
+	#OnCopy_component(e) {
+		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;
+
+		const cloneContainer = info.container.cloneNode(true);
+		if (typeof this.#$.plugins[info.pluginName]?.componentCopy !== 'function' || this.#$.plugins[info.pluginName].componentCopy({ event: e, cloneContainer, info }) === false) {
+			SetClipboardComponent(e, cloneContainer, e.clipboardData);
+		}
+
+		// copy effect
+		dom.utils.flashClass(info.container, 'se-copy');
+	}
+
+	/**
+	 * @param {ClipboardEvent} e - Event object
+	 */
+	#OnCut_component(e) {
+		const info = this.info;
+		if (!info) return;
+
+		const cloneContainer = info.container.cloneNode(true);
+		dom.utils.removeClass(cloneContainer, 'se-component-selected');
+
+		SetClipboardComponent(e, cloneContainer, e.clipboardData);
+		this.deselect();
+		dom.utils.removeItem(info.container);
+	}
+
+	/**
+	 * @param {KeyboardEvent} e - Event object
+	 */
+	async #OnKeyDown_component(e) {
+		if (this.#$.ui.selectMenuOn) return;
+
+		const keyCode = e.code;
+		const ctrl = keyCodeMap.isCtrl(e);
+
+		// redo, undo
+		if (ctrl) {
+			if (keyCode !== 'ControlRight' && keyCode !== 'ControlLeft') {
+				const info = this.#$.shortcuts.keyMap.get(keyCode + (e.shiftKey ? '1000' : ''));
+				if (/^(redo|undo)$/.test(info?.command)) {
+					e.preventDefault();
+					e.stopPropagation();
+					this.#$.commandDispatcher.run(info.command, info.type, info.button);
+				}
+			}
+			return;
+		}
+
+		// backspace key, delete key
+		if (keyCodeMap.isRemoveKey(keyCode)) {
+			e.preventDefault();
+			e.stopPropagation();
+
+			if (typeof this.currentPlugin?.componentDestroy === 'function' && (!this.info.isInputType || !this.#store.get('hasFocus'))) {
+				const focusNode = this.info.container.previousSibling;
+				await this.currentPlugin.componentDestroy(this.currentTarget);
+				this.deselect();
+				if (focusNode) {
+					const offset = focusNode.nodeType === 3 ? focusNode.textContent.length : 1;
+					this.#$.selection.setRange(focusNode, offset, focusNode, offset);
+				} else {
+					this.#$.focusManager.focus();
+				}
+				return;
+			}
+		}
+
+		// 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 (dom.check.isListCell(container.parentNode)) {
+				newEl = dom.utils.createElement('BR');
+			} else {
+				newEl = dom.utils.createElement(this.#$.format.isLine(sibling) ? sibling.nodeName : this.#options.get('defaultLine'), null, '<br>');
+			}
+
+			const pluginName = this.currentPluginName;
+			this.deselect();
+			container.parentNode.insertBefore(newEl, container);
+			if (this.select(compContext.target, pluginName) === false) this.#$.focusManager.blur();
+			this.#$.history.push(false);
+
+			return;
+		}
+
+		// up down, left right
+		DIR_KEYCODE.lastIndex = 0;
+		if (DIR_KEYCODE.test(keyCode)) {
+			const { container } = this.get(this.currentTarget);
+			const isInline = this.isInline(container || this.currentTarget);
+
+			let el = null;
+			let offset = 1;
+			if (isInline) {
+				switch (keyCode) {
+					case 'ArrowLeft': // left
+						el = container.previousSibling;
+						offset = el?.nodeType === 3 ? el.textContent.length : 1;
+						break;
+					case 'ArrowRight': // right
+						el = container.nextSibling;
+						offset = 0;
+						break;
+					case 'ArrowUp': {
+						// up
+						const line = this.#$.format.getLine(container, null);
+						el = line?.previousElementSibling;
+						offset = 0;
+						break;
+					}
+					case 'ArrowDown': {
+						// down
+						const line = this.#$.format.getLine(container, null);
+						el = line?.nextElementSibling;
+						break;
+					}
+				}
+			} else {
+				DIR_UP_KEYCODE.lastIndex = 0;
+				if (DIR_UP_KEYCODE.test(keyCode)) {
+					el = container.previousElementSibling;
+				} else {
+					el = container.nextElementSibling;
+					offset = 0;
+				}
+			}
+
+			if (!el) return;
+
+			this.deselect();
+
+			const elComp = this.get(el);
+			if (elComp?.container) {
+				e.stopPropagation();
+				e.preventDefault();
+				this.select(elComp.target, elComp.pluginName);
+			} else {
+				try {
+					this.#store.set('_preventBlur', true);
+					e.stopPropagation();
+					e.preventDefault();
+					this.#$.selection.setRange(el, offset, el, offset);
+				} finally {
+					this.#store.set('_preventBlur', false);
+				}
+			}
+
+			return;
+		}
+
+		// ESC
+		if (keyCodeMap.isEsc(keyCode)) {
+			this.deselect();
+			return;
+		}
+	}
+
+	/**
+	 * @internal
+	 * @description Destroy the Component instance and release memory
+	 */
+	_destroy() {
+		this.__removeGlobalEvent();
+		this.__removeDragEvent();
+	}
+}
+
+function SetClipboardComponent(e, container, clipboardData) {
+	e.preventDefault();
+	e.stopPropagation();
+	RemoveSelectedClass(container);
+	clipboardData.setData('text/html', container.outerHTML);
+}
+
+function RemoveSelectedClass(container) {
+	dom.utils.removeClass(container, 'se-component-selected');
+	dom.utils.removeClass(container.querySelectorAll('.se-figure-selected'), 'se-figure-selected');
+	dom.utils.removeClass(container.querySelectorAll('.se-selected-table-cell'), 'se-selected-table-cell');
+	dom.utils.removeClass(container.querySelector('.se-selected-cell-focus'), 'se-selected-cell-focus');
+}
+
+export default Component;