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

package/src/modules/Controller.js

@@ -1,61 +1,101 @@
 import EditorInjector from '../editorInjector';
-import { domUtils, env } from '../helper';
+import { dom, env, keyCodeMap } from '../helper';
 import { _DragHandle } from '../modules';
 
-const { ON_OVER_COMPONENT } = env;
-const NON_RESPONSE_KEYCODE = /^(1[7-9]|20|27|45|11[2-9]|12[0-3]|144|145)$/;
-const INDEX_0 = 2147483647;
-const INDEX_1 = 2147483646;
-const INDEX_2 = 2147483645;
+const { _w, ON_OVER_COMPONENT } = env;
+const INDEX_00 = '2147483646';
+const INDEX_0 = '2147483645';
+const INDEX_S_1 = '2147483641';
+const INDEX_1 = '2147483640';
 
 /**
- *
- * @param {*} inst
- * @param {*} element
- * @param {{position: "top" | "bottom" | "position", disabled?: boolean}} params params
- * When using the "top" position, there should not be an arrow on the controller.
- * When using the "bottom" position there should be an arrow on the controller.
+ * @typedef {Object} ControllerInfo
+ * @property {*} inst The controller instance
+ * @property {string} [position="bottom"] The controller position ("bottom"|"top")
+ * @property {HTMLElement} [form=null] The controller element
+ * @property {HTMLElement|Range} [target=null] The controller target element
+ * @property {boolean} [notInCarrier=false] If the controller is not in the "carrierWrapper", set it to true.
+ * @property {boolean} [isRangeTarget=false] If the target is a Range, set it to true.
+ * @property {boolean} [fixed=false] If the controller is fixed and should not be closed, set it to true.
  */
-const Controller = function (inst, element, params, _name) {
-	EditorInjector.call(this, inst.editor);
-
-	// members
-	this.kind = _name || inst.constructor.key || inst.constructor.name;
-	this.inst = inst;
-	this.form = element;
-	this.isOpen = false;
-	this.currentTarget = null;
-	this.currentPositionTarget = null;
-	this.isWWTarget = params.isWWTarget ?? true;
-	this.position = params.position;
-	this.disabled = !!params.disabled;
-	this.parents = params.parents || [];
-	this.parentsHide = !!params.parentsHide;
-	this.isInsideForm = !!params.isInsideForm;
-	this.isOutsideForm = !!params.isOutsideForm;
-	this._initMethod = typeof params.initMethod === 'function' ? params.initMethod : null;
-	this.__globalEventHandlers = { keydown: CloseListener_keydown.bind(this), mousedown: CloseListener_mousedown.bind(this) };
-	this._bindClose_key = null;
-	this._bindClose_mouse = null;
-	this.__offset = {};
-	this.__addOffset = { left: 0, top: 0 };
-	this.__shadowRootEventForm = null;
-	this.__shadowRootEventListener = null;
-
-	// add element
-	this.carrierWrapper.appendChild(element);
-
-	// init
-	this.eventManager.addEvent(element, 'click', Action.bind(this));
-	this.eventManager.addEvent(element, 'mouseenter', MouseEnter.bind(this));
-	this.eventManager.addEvent(element, 'mouseleave', MouseLeave.bind(this));
-};
-
-Controller.prototype = {
+
+/**
+ * @typedef {Object} ControllerParams
+ * @property {"top"|"bottom"} [position="bottom"] Controller position
+ * @property {boolean=} [isWWTarget=true] If the controller is in the WYSIWYG area, set it to true.
+ * @property {() => void=} [initMethod=null] Method to be called when the controller is closed.
+ * @property {boolean=} [disabled=false] If true, When the "controller" is opened, buttons without the "se-component-enabled" class are disabled.
+ * @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).
+ * @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.
+ */
+
+/**
+ * @class
+ * @description Controller module class that handles the UI and interaction logic for a specific editor controller element.
+ */
+class Controller extends EditorInjector {
+	/**
+	 * @constructor
+	 * @param {*} inst The instance object that called the constructor.
+	 * @param {Node} element Controller element
+	 * @param {ControllerParams} params Controller options
+	 * @param {?string=} _name An optional name for the controller key.
+	 */
+	constructor(inst, element, params, _name) {
+		super(inst.editor);
+
+		// members
+		this.kind = _name || inst.constructor.key || inst.constructor.name;
+		this.inst = inst;
+		this.form = /** @type {HTMLFormElement} */ (element);
+		this.isOpen = false;
+		this.currentTarget = null;
+		this.currentPositionTarget = null;
+		this.isWWTarget = params.isWWTarget ?? true;
+		this.position = params.position || 'bottom';
+		this.disabled = !!params.disabled;
+		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.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;
+
+		// add element
+		this.carrierWrapper.appendChild(element);
+
+		// init
+		this.eventManager.addEvent(element, 'click', this.#Action.bind(this));
+		this.eventManager.addEvent(element, 'mouseenter', this.#MouseEnter.bind(this));
+		this.eventManager.addEvent(element, 'mouseleave', this.#MouseLeave.bind(this));
+	}
+
 	/**
 	 * @description Open a modal plugin
+	 * @param {Node|Range} target Target element
+	 * @param {Node} [positionTarget] Position target element
+	 * @param {Object} [params={}] params
+	 * @param {boolean=} params.isWWTarget If the controller is in the WYSIWYG area, set it to true.
+	 * @param {() => void=} params.initMethod Method to be called when the controller is closed.
+	 * @param {boolean=} params.disabled If true, When the "controller" is opened, buttons without the "se-component-enabled" class are disabled. (default: this.disabled)
+	 * @param {{left?: number, top?: number}=} params.addOffset Additional offset values
 	 */
-	open(target, positionTarget, { isWWTarget, initMethod, disabled, addOffset }) {
+	open(target, positionTarget, { isWWTarget, initMethod, disabled, addOffset } = {}) {
 		if (_DragHandle.get('__overInfo') === ON_OVER_COMPONENT) {
 			return;
 		}
@@ -68,19 +108,23 @@ Controller.prototype = {
 		if (this.editor.isBalloon) this.toolbar.hide();
 		else if (this.editor.isSubBalloon) this.subToolbar.hide();
 
-		if (disabled ?? this.disabled) domUtils.setDisabled(this.editor._controllerOnDisabledButtons, true);
+		if (disabled ?? this.disabled) {
+			this.ui.setControllerOnDisabledButtons(true);
+		} else {
+			this.ui.setControllerOnDisabledButtons(false);
+		}
 
-		this.currentTarget = target;
 		this.currentPositionTarget = positionTarget || target;
 		this.isWWTarget = isWWTarget ?? this.isWWTarget;
 		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 };
 
 		const parents = this.isOutsideForm ? this.parents : [];
 		this.editor.opendControllers?.forEach((e) => {
-			if (!parents.includes(e.form)) e.form.style.zIndex = INDEX_2;
+			if (!parents.includes(e.form)) e.form.style.zIndex = INDEX_1;
 		});
 
 		if (this.parentsHide) {
@@ -90,20 +134,34 @@ Controller.prototype = {
 		}
 
 		this.__addGlobalEvent();
-		this._setControllerPosition(this.form, this.currentPositionTarget);
-		this._controllerOn(this.form, target);
+
+		// 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);
+
+		const isRangeTarget = target instanceof Range;
+		this.currentTarget = isRangeTarget ? null : target;
+		this._controllerOn(this.form, target, isRangeTarget);
 		this._w.setTimeout(() => _DragHandle.set('__overInfo', false), 0);
-	},
+	}
 
 	/**
 	 * @description Close a modal plugin
-	 * The plugin's "init" method is called.
+	 * - The plugin's "init" method is called.
+	 * @param {boolean=} force If true, parent controllers are forcibly closed.
 	 */
 	close(force) {
 		if (!this.isOpen) return;
 
+		this.toTop = false;
 		this.isOpen = false;
-		this.editor._antiBlur = false;
 		this.__offset = {};
 		this.__addOffset = { left: 0, top: 0 };
 
@@ -121,43 +179,58 @@ Controller.prototype = {
 		if (this.parents.length > 0) return;
 		if (typeof this.inst.close === 'function') this.inst.close();
 		this.component.deselect();
-	},
+	}
 
 	/**
 	 * @description Hide controller
 	 */
 	hide() {
 		this.form.style.display = 'none';
-	},
+	}
 
 	/**
 	 * @description Show controller
 	 */
 	show() {
-		this._setControllerPosition(this.form, this.currentPositionTarget);
-	},
+		this._setControllerPosition(this.form, this.currentPositionTarget, false);
+	}
+
+	/**
+	 * @description Sets whether the element (form) should be brought to the top based on z-index.
+	 * @param {boolean} value - true: '2147483646', false: '2147483645'.
+	 */
+	bringToTop(value) {
+		this.toTop = value;
+		this.form.style.zIndex = value ? INDEX_00 : INDEX_0;
+	}
 
 	/**
 	 * @description Reset controller position
-	 * @param {Element|undefined} target
+	 * @param {Node=} target
 	 */
 	resetPosition(target) {
-		this._setControllerPosition(this.form, target || this.currentPositionTarget);
-	},
+		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 {any} arguments controller elements, function..
+	 * @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.
 	 */
-	_controllerOn(form, target) {
-		const params = {
+	async _controllerOn(form, target, isRangeTarget) {
+		/** @type {ControllerInfo} */
+		const info = {
 			position: this.position,
-			form: form,
-			target: target,
-			inst: this
+			inst: this,
+			form: /** @type {HTMLElement} */ (form),
+			target: /** @type {HTMLElement} */ (target),
+			isRangeTarget,
+			notInCarrier: !this.carrierWrapper.contains(form)
 		};
 
-		if (this.triggerEvent('onBeforeShowController', { caller: this.kind, frameContext: this.editor.frameContext, params }) === false) return;
+		if ((await this.triggerEvent('onBeforeShowController', { caller: this.kind, frameContext: this.editor.frameContext, info })) === false) return;
 
 		form.style.display = 'block';
 		if (this._shadowRoot) {
@@ -169,72 +242,110 @@ Controller.prototype = {
 		this.editor._controllerTargetContext = this.editor.frameContext.get('topArea');
 
 		if (!this.isOpen) {
-			this.editor.opendControllers.push({
-				position: this.position,
-				form: form,
-				target: target,
-				inst: this
-			});
+			this.editor.opendControllers.push(info);
 		}
 
 		this.isOpen = true;
-		this.editor._antiBlur = true;
-		this.triggerEvent('onShowController', { caller: this.kind, frameContext: this.editor.frameContext, params });
-	},
+		this.editor._preventBlur = true;
+		this.editor.status.onSelected = true;
+		this.triggerEvent('onShowController', { caller: this.kind, frameContext: this.editor.frameContext, info });
+	}
 
 	/**
-	 * @description Hide controller at editor area (link button, image resize button..)
-	 * @param {KeyboardEvent|MouseEvent|null} e Event object when called from mousedown and keydown events registered in "_controllerOn"
 	 * @private
+	 * @description Hide controller at editor area (link button, image resize button..)
 	 */
 	_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;
 
-		if (this.disabled) domUtils.setDisabled(this.editor._controllerOnDisabledButtons, false);
+		this.ui.setControllerOnDisabledButtons(false);
+
 		this.editor.frameContext.get('lineBreaker_t').style.display = this.editor.frameContext.get('lineBreaker_b').style.display = 'none';
 		this.editor.effectNode = null;
 		this.editor.currentControllerName = '';
-		this.editor._antiBlur = false;
+		this.editor._preventBlur = false;
 		this.editor._controllerTargetContext = null;
+		_w.setTimeout(() => {
+			this.editor.status.onSelected = false;
+		}, 0);
 		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 {Element} controller Controller element.
-	 * @param {Element} referEl Element that is the basis of the controller's position.
+	 * @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, referEl) {
-		controller.style.zIndex = INDEX_1;
+	_setControllerPosition(controller, refer, skipAutoReposition) {
 		controller.style.visibility = 'hidden';
 		controller.style.display = 'block';
 
-		if (!this.offset.setAbsPosition(controller, referEl, { addOffset: this.__addOffset, position: this.position, isWWTarget: this.isWWTarget, inst: this })) {
-			this.hide();
-			return;
+		if (this.selection.isRange(refer)) {
+			if (!this.offset.setRangePosition(this.form, /** @type {Range} */ (refer), { position: 'bottom' })) {
+				this.hide();
+				return;
+			}
+		} else {
+			if (refer) {
+				const positionResult = this.offset.setAbsPosition(controller, /** @type {HTMLElement} */ (refer), { addOffset: this.__addOffset, position: this.position, isWWTarget: this.isWWTarget, inst: this });
+				if (!positionResult) {
+					this.hide();
+					return;
+				}
+
+				if (!skipAutoReposition && this.sibling && this.siblingPosition === 'top' && positionResult.position !== this.position) {
+					const resetPosition = controller.offsetTop - this.__addOffset.top;
+					if (positionResult.position === 'bottom') {
+						this._reserveIndex = true;
+						controller.style.top = resetPosition + this.sibling.offsetHeight - 2 + 'px';
+					} else {
+						controller.style.top = resetPosition - this.sibling.offsetHeight + 2 + 'px';
+					}
+				} else {
+					this._reserveIndex = false;
+				}
+			}
 		}
 
+		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);
-	},
+	}
 
+	/**
+	 * @private
+	 * @description Removes global event listeners.
+	 * - When the ESC key is pressed, the controller is closed.
+	 */
 	__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);
-	},
+	}
 
+	/**
+	 * @private
+	 * @description Checks if the controller is fixed and should not be closed.
+	 * @returns {boolean} True if the controller is fixed.
+	 */
 	_checkFixed() {
 		if (this.editor.selectMenuOn) return true;
 
@@ -245,11 +356,17 @@ Controller.prototype = {
 			}
 		}
 		return false;
-	},
+	}
 
+	/**
+	 * @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) {
-		if (domUtils.isWysiwygFrame(target)) return false;
-		if (domUtils.hasClass(target, 'se-drag-handle')) return true;
+		if (dom.check.isWysiwygFrame(target)) return false;
+		if (dom.utils.hasClass(target, 'se-drag-handle')) return true;
 
 		let isParentForm = false;
 		if (this.isInsideForm && this.parents?.length > 0) {
@@ -261,63 +378,77 @@ Controller.prototype = {
 			});
 		}
 
-		return !isParentForm && (domUtils.getParentElement(target, '.se-controller') || target?.contains(this.inst._element));
-	},
-
-	constructor: Controller
-};
+		return !isParentForm && (!!dom.query.getParentElement(target, '.se-controller') || target?.contains(this.inst._element));
+	}
 
-// @todo
-Controller.CreateHTML = function () {
-	const html = '';
-	return domUtils.createElement('DIV', { class: '' }, html);
-};
+	/**
+	 * @param {MouseEvent} e - Event object
+	 */
+	#Action(e) {
+		const eventTarget = dom.query.getEventTarget(e);
+		const target = dom.query.getCommandTarget(eventTarget);
+		if (!target) return;
 
-function Action(e) {
-	const target = domUtils.getCommandTarget(e.target);
-	if (!target) return;
+		e.stopPropagation();
+		e.preventDefault();
 
-	e.stopPropagation();
-	e.preventDefault();
+		this.inst.controllerAction(target);
+	}
 
-	this.inst.controllerAction(target);
-}
+	/**
+	 * @param {MouseEvent} e - Event object
+	 */
+	#MouseEnter(e) {
+		this.editor.currentControllerName = this.kind;
+		if (this.parents.length > 0 && this.isInsideForm) return;
 
-function MouseEnter(e) {
-	this.editor.currentControllerName = this.kind;
-	if (this.parents.length > 0 && this.isInsideForm) return;
-	e.target.style.zIndex = INDEX_0;
-}
+		const eventTarget = dom.query.getEventTarget(e);
+		eventTarget.style.zIndex = this.toTop ? INDEX_00 : INDEX_0;
+	}
 
-function MouseLeave(e) {
-	if (this.parents.length > 0 && this.isInsideForm) return;
-	e.target.style.zIndex = INDEX_2;
-}
+	/**
+	 * @param {MouseEvent} e - Event object
+	 */
+	#MouseLeave(e) {
+		if (this.parents.length > 0 && this.isInsideForm) return;
 
-function CloseListener_keydown(e) {
-	if (this._checkFixed()) return;
-	const keyCode = e.keyCode;
-	const ctrl = e.ctrlKey || e.metaKey || keyCode === 91 || keyCode === 92 || keyCode === 224;
-	if (ctrl || !NON_RESPONSE_KEYCODE.test(keyCode)) return;
+		const eventTarget = dom.query.getEventTarget(e);
+		eventTarget.style.zIndex = this.toTop ? INDEX_0 : this._reserveIndex ? INDEX_S_1 : INDEX_1;
+	}
 
-	if (this.form.contains(e.target) || this._checkForm(e.target)) return;
-	if (this.editor._fileManager.pluginRegExp.test(this.kind) && keyCode !== 27) return;
+	/**
+	 * @param {KeyboardEvent} e - Event object
+	 */
+	#CloseListener_keydown(e) {
+		if (this._checkFixed()) return;
+		const keyCode = e.code;
+		const ctrl = keyCodeMap.isCtrl(e);
+		if (ctrl || !keyCodeMap.isNonResponseKey(keyCode)) return;
 
-	this.close();
-}
+		const eventTarget = dom.query.getEventTarget(e);
+		if (this.form.contains(eventTarget) || this._checkForm(eventTarget)) return;
+		if (this.editor._fileManager.pluginRegExp.test(this.kind) && !keyCodeMap.isEsc(keyCode)) return;
 
-function CloseListener_mousedown({ target }) {
-	if (this.inst?._element?.contains(target)) {
-		this.isOpen = false;
-		return;
+		this.close();
 	}
 
-	this.isOpen = true;
-	if (target === this.inst._element || target === this.currentTarget || this._checkFixed() || this.form.contains(target) || this._checkForm(target)) {
-		return;
-	}
+	/**
+	 * @param {KeyboardEvent} e - Event object
+	 */
+	#CloseListener_mousedown(e) {
+		const eventTarget = dom.query.getEventTarget(e);
+		if (this.inst?._element?.contains(eventTarget)) {
+			this.isOpen = false;
+			return;
+		}
 
-	this.close(true);
+		this.isOpen = true;
+		if (eventTarget === this.inst._element || eventTarget === this.currentTarget || this._checkFixed() || this.form.contains(eventTarget) || this._checkForm(eventTarget)) {
+			return;
+		}
+
+		this.close(true);
+	}
 }
 
 export default Controller;