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

package/src/modules/ColorPicker.js

@@ -104,7 +104,7 @@ class ColorPicker extends CoreInjector {
 		this.inputElement = /** @type {HTMLInputElement} */ (this.target.querySelector('.se-color-input'));
 		this.styleProperties = styles;
 		this.splitNum = params.splitNum || 0;
-		this.defaultColor = params.defaultColor;
+		this.defaultColor = params.defaultColor || '';
 		this.hueSliderOptions = params.hueSliderOptions;
 		this.parentDisplay = '';
 		this.currentColor = '';
@@ -123,7 +123,7 @@ class ColorPicker extends CoreInjector {
 			this.parentFormDisplay = [];
 			this.parentForm = params.hueSliderOptions?.controllerOptions?.parents?.length > 0 && !params.hueSliderOptions?.controllerOptions?.isInsideForm ? params.hueSliderOptions.controllerOptions.parents : null;
 			// hue open
-			this.eventManager.addEvent(this.target.querySelector('.se-btn-info'), 'click', this.#OnColorPalette.bind(this));
+			this.eventManager.addEvent(this.target.querySelector('.__se_hue'), 'click', this.#OnColorPalette.bind(this));
 			this.eventManager.addEvent(this.inputElement, 'input', this.#OnChangeInput.bind(this));
 			this.eventManager.addEvent(this.target.querySelector('form'), 'submit', this.#Submit.bind(this));
 		}
@@ -140,14 +140,15 @@ class ColorPicker extends CoreInjector {
 	 * @description Displays or resets the currently selected color at color list.
 	 * @param {Node|string} nodeOrColor Current Selected node
 	 * @param {Node} target target
+	 * @param {?((current: Node) => boolean)=} stopCondition - A function used to stop traversing parent nodes while finding the color.
+	 * - When this function returns true, the traversal ends at that node.
+	 * - e.g., `(node) => this.format.isLine(node)` stops at line-level elements like <p>, <div>.
 	 */
-	init(nodeOrColor, target) {
+	init(nodeOrColor, target, stopCondition) {
 		this.targetButton = target;
+		if (typeof stopCondition !== 'function') stopCondition = () => false;
 
-		const computedColor = this.editor.frameContext.get('wwComputedStyle')[this.styleProperties];
-		const defaultColor = this.defaultColor || converter.isHexColor(computedColor) ? computedColor : converter.rgb2hex(computedColor);
-
-		let fillColor = (typeof nodeOrColor === 'string' ? nodeOrColor : this._getColorInNode(nodeOrColor)) || defaultColor;
+		let fillColor = (typeof nodeOrColor === 'string' ? nodeOrColor : this.#getColorInNode(nodeOrColor, stopCondition)) || this.defaultColor;
 		fillColor = converter.isHexColor(fillColor) ? fillColor : converter.rgb2hex(fillColor) || fillColor || '';
 
 		const colorList = this.colorList;
@@ -162,7 +163,7 @@ class ColorPicker extends CoreInjector {
 			}
 		}
 
-		this._setInputText(this._colorName2hex(fillColor));
+		this.#setInputText(this.#colorName2hex(fillColor));
 	}
 
 	/**
@@ -182,27 +183,45 @@ class ColorPicker extends CoreInjector {
 	}
 
 	/**
-	 * @private
+	 * @editorMethod Modules.HueSlider
+	 * @description This method is called when the color is selected in the hue slider.
+	 * @param {HueSliderColor_colorPicker} color - Color object
+	 */
+	hueSliderAction(color) {
+		this.#setInputText(color.hex);
+	}
+
+	/**
+	 * @editorMethod Modules.HueSlider
+	 * @description This method is called when the hue slider is closed.
+	 */
+	hueSliderCancelAction() {
+		if (this.parentForm?.length > 0) {
+			this.parentFormDisplay.forEach((e) => (e[0].style.display = e[1]));
+		}
+	}
+
+	/**
 	 * @description Set color at input element
 	 * @param {string} hexColorStr Hax color value
 	 */
-	_setInputText(hexColorStr) {
-		hexColorStr = /^#/.test(hexColorStr) ? hexColorStr : '#' + hexColorStr;
+	#setInputText(hexColorStr) {
+		hexColorStr = !hexColorStr || /^#/.test(hexColorStr) ? hexColorStr : '#' + hexColorStr;
 		this.inputElement.value = hexColorStr;
 		this.setHexColor.call(this, hexColorStr);
 	}
 
 	/**
-	 * @private
 	 * @description Gets color value at color property of node
 	 * @param {Node} node Selected node
+	 * @param {(current: Node) => boolean} stopCondition - A function used to stop traversing parent nodes while finding the color.
 	 * @returns {string}
 	 */
-	_getColorInNode(node) {
+	#getColorInNode(node, stopCondition) {
 		let findColor = '';
 		const sp = this.styleProperties;
 
-		while (node && !dom.check.isWysiwygFrame(node) && findColor.length === 0) {
+		while (node && !stopCondition(node) && !dom.check.isWysiwygFrame(node) && findColor.length === 0) {
 			if (isElement(node) && node.style[sp]) findColor = node.style[sp];
 			node = node.parentNode;
 		}
@@ -211,13 +230,12 @@ class ColorPicker extends CoreInjector {
 	}
 
 	/**
-	 * @private
 	 * @description Converts color values of other formats to hex color values and returns.
 	 * @param {string} colorName Color value
 	 * @returns {string}
 	 */
-	_colorName2hex(colorName) {
-		if (/^#/.test(colorName)) return colorName;
+	#colorName2hex(colorName) {
+		if (!colorName || /^#/.test(colorName)) return colorName;
 		const temp = dom.utils.createElement('div', { style: 'display: none; color: ' + colorName });
 		const colors = this._w
 			.getComputedStyle(this._d.body.appendChild(temp))
@@ -229,25 +247,6 @@ class ColorPicker extends CoreInjector {
 		return colors.length >= 3 ? '#' + ((1 << 24) + (colors[0] << 16) + (colors[1] << 8) + colors[2]).toString(16).substring(1) : '';
 	}
 
-	/**
-	 * @editorMethod Modules.HueSlider
-	 * @description This method is called when the color is selected in the hue slider.
-	 * @param {HueSliderColor_colorPicker} color - Color object
-	 */
-	hueSliderAction(color) {
-		this._setInputText(color.hex);
-	}
-
-	/**
-	 * @editorMethod Modules.HueSlider
-	 * @description This method is called when the hue slider is closed.
-	 */
-	hueSliderCancelAction() {
-		if (this.parentForm?.length > 0) {
-			this.parentFormDisplay.forEach((e) => (e[0].style.display = e[1]));
-		}
-	}
-
 	#OnColorPalette() {
 		if (this.parentForm?.length > 0) {
 			this.parentForm.forEach((e) => {
@@ -303,7 +302,7 @@ class ColorPicker extends CoreInjector {
  * @returns
  */
 function CreateHTML({ lang, icons }, { colorList, disableHEXInput, disableRemove, splitNum }) {
-	colorList = colorList || DEFAULT_COLOR_LIST;
+	colorList ||= DEFAULT_COLOR_LIST;
 	splitNum = colorList === DEFAULT_COLOR_LIST ? DEFAULLT_COLOR_SPLITNUM : splitNum;
 
 	let list = '';
@@ -325,7 +324,7 @@ function CreateHTML({ lang, icons }, { colorList, disableHEXInput, disableRemove
 	}
 	list += /*html*/ `
 		<form class="se-form-group se-form-w0">
-			${disableHEXInput ? '' : `<button type="button" class="se-btn se-btn-info" title="${lang.colorPicker}" aria-label="${lang.colorPicker}">${icons.color_palette}</button>`}
+			${disableHEXInput ? '' : `<button type="button" class="se-btn __se_hue" title="${lang.colorPicker}" aria-label="${lang.colorPicker}">${icons.color_palette}</button>`}
 			<input type="text" class="se-color-input" ${disableHEXInput ? 'readonly' : ''} placeholder="${lang.color}" />
 			${disableHEXInput ? '' : `<button type="submit" class="se-btn se-btn-success" title="${lang.submitButton}" aria-label="${lang.submitButton}">${icons.checked}</button>`}
 			${disableRemove ? '' : `<button type="button" class="se-btn __se_remove" title="${lang.remove}" aria-label="${lang.remove}">${icons.remove_color}</button>`}

package/src/modules/Controller.js

@@ -2,7 +2,7 @@ import EditorInjector from '../editorInjector';
 import { dom, env, keyCodeMap } from '../helper';
 import { _DragHandle } from '../modules';
 
-const { _w, ON_OVER_COMPONENT } = env;
+const { _w, isMobile, ON_OVER_COMPONENT } = env;
 const INDEX_00 = '2147483646';
 const INDEX_0 = '2147483645';
 const INDEX_S_1 = '2147483641';
@@ -28,7 +28,9 @@ const INDEX_1 = '2147483640';
  * @property {Array<HTMLElement>=} [parents=[]] The parent "controller" array when "controller" is opened nested.
  * @property {boolean=} [parentsHide=false] If true, the parent element is hidden when the controller is opened.
  * @property {HTMLElement=} [sibling=null] The related sibling controller element that this controller is positioned relative to.
- * @property {"top"|"side"} [siblingPosition="top"] The relative position of this controller to the sibling element (e.g., display above or beside the sibling).
+ * - e.g.) table plugin :: 118
+ * @property {boolean=} [siblingMain=false] If true, This sibling controller is the main controller.
+ * - You must specify this option, if use "sibling"
  * @property {boolean=} [isInsideForm=false] If the controller is inside a form, set it to true.
  * @property {boolean=} [isOutsideForm=false] If the controller is outside a form, set it to true.
  */
@@ -38,6 +40,16 @@ const INDEX_1 = '2147483640';
  * @description Controller module class that handles the UI and interaction logic for a specific editor controller element.
  */
 class Controller extends EditorInjector {
+	#reserveIndex;
+	#initMethod;
+	#globalEventHandlers;
+	#bindClose_key;
+	#bindClose_mouse;
+	#addOffset;
+	#shadowRootEventForm;
+	#shadowRootEventListener;
+	#preventClose;
+
 	/**
 	 * @constructor
 	 * @param {*} inst The instance object that called the constructor.
@@ -61,20 +73,22 @@ class Controller extends EditorInjector {
 		this.parents = /** @type {Array<HTMLElement>} */ (params.parents || []);
 		this.parentsHide = !!params.parentsHide;
 		this.sibling = /** @type {HTMLElement} */ (params.sibling || null);
-		this.siblingPosition = ['top', 'side'].includes(params.siblingPosition) ? params.siblingPosition : 'top';
+		this.siblingMain = !!params.siblingMain;
 		this.isInsideForm = !!params.isInsideForm;
 		this.isOutsideForm = !!params.isOutsideForm;
 		this.toTop = false;
-		this._reserveIndex = false;
-		this._initMethod = typeof params.initMethod === 'function' ? params.initMethod : null;
-		this.__globalEventHandlers = { keydown: this.#CloseListener_keydown.bind(this), mousedown: this.#CloseListener_mousedown.bind(this) };
-		this._bindClose_key = null;
-		this._bindClose_mouse = null;
 		/** @type {{left?: number, top?: number, addOfffset?: {left?: number, top?: number}}} */
 		this.__offset = {};
-		this.__addOffset = { left: 0, top: 0 };
-		this.__shadowRootEventForm = null;
-		this.__shadowRootEventListener = null;
+
+		this.#reserveIndex = false;
+		this.#initMethod = typeof params.initMethod === 'function' ? params.initMethod : null;
+		this.#globalEventHandlers = { keydown: this.#CloseListener_keydown.bind(this), mousedown: this.#CloseListener_mousedown.bind(this) };
+		this.#bindClose_key = null;
+		this.#bindClose_mouse = null;
+		this.#addOffset = { left: 0, top: 0 };
+		this.#shadowRootEventForm = null;
+		this.#shadowRootEventListener = null;
+		this.#preventClose = false;
 
 		// add element
 		this.carrierWrapper.appendChild(element);
@@ -118,11 +132,11 @@ class Controller extends EditorInjector {
 
 		this.currentPositionTarget = positionTarget || target;
 		this.isWWTarget = isWWTarget ?? this.isWWTarget;
-		if (typeof initMethod === 'function') this._initMethod = initMethod;
+		if (typeof initMethod === 'function') this.#initMethod = initMethod;
 		this.editor.currentControllerName = this.kind;
 
-		this.__addOffset = { left: 0, top: 0 };
-		if (addOffset) this.__addOffset = { ...this.__addOffset, ...addOffset };
+		this.#addOffset = { left: 0, top: 0 };
+		if (addOffset) this.#addOffset = { ...this.#addOffset, ...addOffset };
 
 		const parents = this.isOutsideForm ? this.parents : [];
 		this.editor.opendControllers?.forEach((e) => {
@@ -135,23 +149,15 @@ class Controller extends EditorInjector {
 			});
 		}
 
-		this.__addGlobalEvent();
+		this.#addGlobalEvent();
 
-		// add sibling offset
-		if (this.sibling) {
-			if (this.siblingPosition === 'top') {
-				this.__addOffset.top += -this.sibling.offsetHeight + 1;
-			} else {
-				this.__addOffset.left += this.form.offsetWidth + this.sibling.offsetWidth - 1;
-			}
-		}
 		// display controller
-		this._setControllerPosition(this.form, this.currentPositionTarget, false);
+		this.#setControllerPosition(this.form, this.currentPositionTarget, false);
 
-		const isRangeTarget = target instanceof Range;
+		const isRangeTarget = this.instanceCheck.isRange(target);
 		this.currentTarget = isRangeTarget ? null : target;
-		this._controllerOn(this.form, target, isRangeTarget);
-		this._w.setTimeout(() => _DragHandle.set('__overInfo', false), 0);
+		this.#controllerOn(this.form, target, isRangeTarget);
+		_w.setTimeout(() => _DragHandle.set('__overInfo', false), 0);
 	}
 
 	/**
@@ -160,17 +166,18 @@ class Controller extends EditorInjector {
 	 * @param {boolean=} force If true, parent controllers are forcibly closed.
 	 */
 	close(force) {
-		if (!this.isOpen) return;
+		if (!this.isOpen || this.#preventClose) return;
 
 		this.toTop = false;
 		this.isOpen = false;
+		this.#preventClose = false;
 		this.__offset = {};
-		this.__addOffset = { left: 0, top: 0 };
+		this.#addOffset = { left: 0, top: 0 };
 
-		this.__removeGlobalEvent();
+		this.#removeGlobalEvent();
 
-		if (typeof this._initMethod === 'function') this._initMethod();
-		this._controllerOff();
+		if (typeof this.#initMethod === 'function') this.#initMethod();
+		this.#controllerOff();
 
 		if (this.parentsHide && !force) {
 			this.parents.forEach((e) => {
@@ -194,7 +201,7 @@ class Controller extends EditorInjector {
 	 * @description Show controller
 	 */
 	show() {
-		this._setControllerPosition(this.form, this.currentPositionTarget, false);
+		this.#setControllerPosition(this.form, this.currentPositionTarget, false);
 	}
 
 	/**
@@ -211,17 +218,16 @@ class Controller extends EditorInjector {
 	 * @param {Node=} target
 	 */
 	resetPosition(target) {
-		this._setControllerPosition(this.form, target || this.currentPositionTarget, true);
+		this.#setControllerPosition(this.form, target || this.currentPositionTarget, true);
 	}
 
 	/**
-	 * @private
 	 * @description Show controller at editor area (controller elements, function, "controller target element(@Required)", "controller name(@Required)", etc..)
 	 * @param {HTMLFormElement} form Controller element
 	 * @param {Node|Range} target Controller target element
 	 * @param {boolean} isRangeTarget If the target is a Range, set it to true.
 	 */
-	async _controllerOn(form, target, isRangeTarget) {
+	async #controllerOn(form, target, isRangeTarget) {
 		/** @type {ControllerInfo} */
 		const info = {
 			position: this.position,
@@ -232,16 +238,16 @@ class Controller extends EditorInjector {
 			notInCarrier: !this.carrierWrapper.contains(form)
 		};
 
-		if ((await this.triggerEvent('onBeforeShowController', { caller: this.kind, frameContext: this.editor.frameContext, info })) === false) return;
+		if ((await this.triggerEvent('onBeforeShowController', { caller: this.kind, frameContext: this.frameContext, info })) === false) return;
 
 		form.style.display = 'block';
-		if (this._shadowRoot) {
-			this.__shadowRootEventForm = form;
-			this.__shadowRootEventListener = (e) => e.stopPropagation();
-			form.addEventListener('mousedown', this.__shadowRootEventListener);
+		if (this.editor._shadowRoot) {
+			this.#shadowRootEventForm = form;
+			this.#shadowRootEventListener = (e) => e.stopPropagation();
+			form.addEventListener('mousedown', this.#shadowRootEventListener);
 		}
 
-		this.editor._controllerTargetContext = this.editor.frameContext.get('topArea');
+		this.editor._controllerTargetContext = this.frameContext.get('topArea');
 
 		if (!this.isOpen) {
 			this.editor.opendControllers.push(info);
@@ -250,21 +256,20 @@ class Controller extends EditorInjector {
 		this.isOpen = true;
 		this.editor._preventBlur = true;
 		this.editor.status.onSelected = true;
-		this.triggerEvent('onShowController', { caller: this.kind, frameContext: this.editor.frameContext, info });
+		this.triggerEvent('onShowController', { caller: this.kind, frameContext: this.frameContext, info });
 	}
 
 	/**
-	 * @private
 	 * @description Hide controller at editor area (link button, image resize button..)
 	 */
-	_controllerOff() {
+	#controllerOff() {
 		this.form.style.display = 'none';
 		this.editor.opendControllers = this.editor.opendControllers.filter((v) => v.form !== this.form);
 		if (this.editor.currentControllerName !== this.kind && this.editor.opendControllers.length > 0) return;
 
 		this.ui.setControllerOnDisabledButtons(false);
 
-		this.editor.frameContext.get('lineBreaker_t').style.display = this.editor.frameContext.get('lineBreaker_b').style.display = 'none';
+		this.frameContext.get('lineBreaker_t').style.display = this.frameContext.get('lineBreaker_b').style.display = 'none';
 		this.editor.effectNode = null;
 		this.editor.currentControllerName = '';
 		this.editor._preventBlur = false;
@@ -272,24 +277,28 @@ class Controller extends EditorInjector {
 		_w.setTimeout(() => {
 			this.editor.status.onSelected = false;
 		}, 0);
-		if (this.__shadowRootEventForm) {
-			this.__shadowRootEventForm.removeEventListener('mousedown', this.__shadowRootEventListener);
-			this.__shadowRootEventForm = this.__shadowRootEventListener = null;
+		if (this.#shadowRootEventForm) {
+			this.#shadowRootEventForm.removeEventListener('mousedown', this.#shadowRootEventListener);
+			this.#shadowRootEventForm = this.#shadowRootEventListener = null;
 		}
 		if (typeof this.inst.reset === 'function') this.inst.reset();
 	}
 
 	/**
-	 * @private
 	 * @description Specify the position of the controller.
 	 * @param {HTMLElement} controller Controller element.
 	 * @param {Node|Range} refer Element or Range that is the basis of the controller's position.
 	 * @param {boolean} [skipAutoReposition=false] If true, skips scroll/resize-based automatic positioning logic.
 	 */
-	_setControllerPosition(controller, refer, skipAutoReposition) {
+	#setControllerPosition(controller, refer, skipAutoReposition) {
 		controller.style.visibility = 'hidden';
 		controller.style.display = 'block';
 
+		if (this.sibling && this.sibling.style.display !== 'block') {
+			this.sibling.style.visibility = 'hidden';
+			this.sibling.style.display = 'block';
+		}
+
 		if (this.selection.isRange(refer)) {
 			if (!this.offset.setRangePosition(this.form, /** @type {Range} */ (refer), { position: 'bottom' })) {
 				this.hide();
@@ -297,58 +306,56 @@ class Controller extends EditorInjector {
 			}
 		} else {
 			if (refer) {
-				const positionResult = this.offset.setAbsPosition(controller, /** @type {HTMLElement} */ (refer), { addOffset: this.__addOffset, position: this.position, isWWTarget: this.isWWTarget, inst: this });
+				const positionResult = this.offset.setAbsPosition(controller, /** @type {HTMLElement} */ (refer), { addOffset: this.#addOffset, position: this.position, isWWTarget: this.isWWTarget, inst: this, sibling: this.sibling });
 				if (!positionResult) {
 					this.hide();
 					return;
 				}
 
-				if (!skipAutoReposition && this.sibling && this.siblingPosition === 'top' && positionResult.position !== this.position) {
-					const resetPosition = controller.offsetTop - this.__addOffset.top;
+				if (!skipAutoReposition && this.sibling && !this.siblingMain) {
+					const resetPosition = controller.offsetTop - this.#addOffset.top;
 					if (positionResult.position === 'bottom') {
-						this._reserveIndex = true;
-						controller.style.top = resetPosition + this.sibling.offsetHeight - 2 + 'px';
+						this.#reserveIndex = true;
+						controller.style.top = resetPosition + this.sibling.offsetHeight - 1 + 'px';
 					} else {
+						this.#reserveIndex = false;
 						controller.style.top = resetPosition - this.sibling.offsetHeight + 2 + 'px';
 					}
 				} else {
-					this._reserveIndex = false;
+					this.#reserveIndex = false;
 				}
 			}
 		}
 
-		controller.style.zIndex = this.toTop ? INDEX_0 : this._reserveIndex ? INDEX_S_1 : INDEX_1;
+		controller.style.zIndex = this.toTop ? INDEX_0 : this.#reserveIndex ? INDEX_S_1 : INDEX_1;
 		controller.style.visibility = '';
 	}
 
 	/**
-	 * @private
 	 * @description Adds global event listeners.
 	 * - When the controller is opened
 	 */
-	__addGlobalEvent() {
-		this.__removeGlobalEvent();
-		this._bindClose_key = this.eventManager.addGlobalEvent('keydown', this.__globalEventHandlers.keydown, true);
-		this._bindClose_mouse = this.eventManager.addGlobalEvent('mousedown', this.__globalEventHandlers.mousedown, true);
+	#addGlobalEvent() {
+		this.#removeGlobalEvent();
+		this.#bindClose_key = this.eventManager.addGlobalEvent('keydown', this.#globalEventHandlers.keydown, true);
+		this.#bindClose_mouse = this.eventManager.addGlobalEvent(isMobile ? 'click' : 'mousedown', this.#globalEventHandlers.mousedown, true);
 	}
 
 	/**
-	 * @private
 	 * @description Removes global event listeners.
 	 * - When the ESC key is pressed, the controller is closed.
 	 */
-	__removeGlobalEvent() {
+	#removeGlobalEvent() {
 		this.component.__removeGlobalEvent();
-		if (this._bindClose_key) this._bindClose_key = this.eventManager.removeGlobalEvent(this._bindClose_key);
-		if (this._bindClose_mouse) this._bindClose_mouse = this.eventManager.removeGlobalEvent(this._bindClose_mouse);
+		this.#bindClose_key &&= this.eventManager.removeGlobalEvent(this.#bindClose_key);
+		this.#bindClose_mouse &&= this.eventManager.removeGlobalEvent(this.#bindClose_mouse);
 	}
 
 	/**
-	 * @private
 	 * @description Checks if the controller is fixed and should not be closed.
 	 * @returns {boolean} True if the controller is fixed.
 	 */
-	_checkFixed() {
+	#checkFixed() {
 		if (this.editor.selectMenuOn) return true;
 
 		const cont = this.editor.opendControllers;
@@ -361,12 +368,11 @@ class Controller extends EditorInjector {
 	}
 
 	/**
-	 * @private
 	 * @description Checks if the given target is within a form or controller.
 	 * @param {Node} target The target element.
 	 * @returns {boolean} True if the target is inside a form or controller.
 	 */
-	_checkForm(target) {
+	#checkForm(target) {
 		if (dom.check.isWysiwygFrame(target)) return false;
 		if (dom.utils.hasClass(target, 'se-drag-handle')) return true;
 
@@ -415,20 +421,20 @@ class Controller extends EditorInjector {
 		if (this.parents.length > 0 && this.isInsideForm) return;
 
 		const eventTarget = dom.query.getEventTarget(e);
-		eventTarget.style.zIndex = this.toTop ? INDEX_0 : this._reserveIndex ? INDEX_S_1 : INDEX_1;
+		eventTarget.style.zIndex = this.toTop ? INDEX_0 : this.#reserveIndex ? INDEX_S_1 : INDEX_1;
 	}
 
 	/**
 	 * @param {KeyboardEvent} e - Event object
 	 */
 	#CloseListener_keydown(e) {
-		if (this._checkFixed()) return;
+		if (this.#checkFixed()) return;
 		const keyCode = e.code;
 		const ctrl = keyCodeMap.isCtrl(e);
 		if (ctrl || !keyCodeMap.isNonResponseKey(keyCode)) return;
 
 		const eventTarget = dom.query.getEventTarget(e);
-		if (this.form.contains(eventTarget) || this._checkForm(eventTarget)) return;
+		if (this.form.contains(eventTarget) || this.#checkForm(eventTarget)) return;
 		if (this.editor._fileManager.pluginRegExp.test(this.kind) && !keyCodeMap.isEsc(keyCode)) return;
 
 		this.#PostCloseEvent(eventTarget);
@@ -441,17 +447,17 @@ class Controller extends EditorInjector {
 	#CloseListener_mousedown(e) {
 		const eventTarget = dom.query.getEventTarget(e);
 		if (this.inst?._element?.contains(eventTarget)) {
-			this.isOpen = false;
+			this.#preventClose = true;
 			return;
 		}
 
-		this.isOpen = true;
+		this.#preventClose = false;
 		if (
 			eventTarget === this.inst._element ||
 			eventTarget === this.currentTarget ||
-			this._checkFixed() ||
+			this.#checkFixed() ||
 			this.form.contains(eventTarget) ||
-			this._checkForm(eventTarget) ||
+			this.#checkForm(eventTarget) ||
 			dom.query.getParentElement(eventTarget, '.se-line-breaker-component')
 		) {
 			return;
@@ -465,7 +471,7 @@ class Controller extends EditorInjector {
 	 * @param {HTMLElement} eventTarget - The target element that triggered the event.
 	 */
 	#PostCloseEvent(eventTarget) {
-		if (!this.editor.frameContext.get('wysiwyg').contains(eventTarget)) {
+		if (!this.frameContext.get('wysiwyg').contains(eventTarget)) {
 			this.component.__prevent = false;
 		}
 	}