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

package/src/core/base/eventHandlers/handler_ww_mouse.js

@@ -1,11 +1,33 @@
-import { domUtils, env } from '../../../helper';
+import { dom, env } from '../../../helper';
 import { _DragHandle } from '../../../modules';
 
 const { _w } = env;
 
-export function OnMouseDown_wysiwyg(frameContext, e) {
-	if (frameContext.get('isReadOnly') || domUtils.isNonEditable(frameContext.get('wysiwyg'))) return;
-	if (this.format._isExcludeSelectionElement(e.target)) {
+let _onDownEv = null;
+function _offDownFn() {
+	this.editor.status._onMousedown = false;
+	_onDownEv = this.removeGlobalEvent(_onDownEv);
+}
+
+/**
+ * @typedef {Omit<import('../eventManager').default & Partial<__se__EditorInjector>, 'eventManager'>} EventManagerThis_handler_ww_mouse
+ */
+
+/**
+ * @private
+ * @this {EventManagerThis_handler_ww_mouse}
+ * @param {__se__FrameContext} fc - Frame context object
+ * @param {MouseEvent} e - Event object
+ */
+export async function OnMouseDown_wysiwyg(fc, e) {
+	const eventTarget = dom.query.getEventTarget(e);
+
+	this.editor.status._onMousedown = true;
+	if (_onDownEv) _offDownFn.call(this);
+	_onDownEv = this.addGlobalEvent('mouseup', _offDownFn.bind(this));
+
+	if (fc.get('isReadOnly') || dom.check.isNonEditable(fc.get('wysiwyg'))) return;
+	if (this.format._isExcludeSelectionElement(eventTarget)) {
 		e.preventDefault();
 		return;
 	}
@@ -15,10 +37,10 @@ export function OnMouseDown_wysiwyg(frameContext, e) {
 	this._w.setTimeout(this.selection._init.bind(this.selection), 0);
 
 	// user event
-	if (this.triggerEvent('onMouseDown', { frameContext, event: e }) === false) return;
+	if ((await this.triggerEvent('onMouseDown', { frameContext: fc, event: e })) === false) return;
 
 	// plugin event
-	if (this._callPluginEvent('onMouseDown', { frameContext, event: e }) === false) return;
+	if (this._callPluginEvent('onMouseDown', { frameContext: fc, event: e }) === false) return;
 
 	if (this.editor.isBalloon) {
 		this._hideToolbar();
@@ -26,39 +48,51 @@ export function OnMouseDown_wysiwyg(frameContext, e) {
 		this._hideToolbar_sub();
 	}
 
-	if (/FIGURE/i.test(e.target.nodeName)) e.preventDefault();
+	if (/FIGURE/i.test(eventTarget.nodeName)) e.preventDefault();
 }
 
-export function OnMouseUp_wysiwyg(frameContext, e) {
+/**
+ * @private
+ * @this {EventManagerThis_handler_ww_mouse}
+ * @param {__se__FrameContext} fc - Frame context object
+ * @param {MouseEvent} e - Event object
+ */
+export async function OnMouseUp_wysiwyg(fc, e) {
 	// user event
-	if (this.triggerEvent('onMouseUp', { frameContext, event: e }) === false) return;
+	if ((await this.triggerEvent('onMouseUp', { frameContext: fc, event: e })) === false) return;
 
 	// plugin event
-	if (this._callPluginEvent('onMouseUp', { frameContext, event: e }) === false) return;
+	if (this._callPluginEvent('onMouseUp', { frameContext: fc, event: e }) === false) return;
 }
 
-export function OnClick_wysiwyg(frameContext, e) {
-	const targetElement = e.target;
+/**
+ * @private
+ * @this {EventManagerThis_handler_ww_mouse}
+ * @param {__se__FrameContext} fc - Frame context object
+ * @param {MouseEvent} e - Event object
+ */
+export async function OnClick_wysiwyg(fc, e) {
+	const eventTarget = dom.query.getEventTarget(e);
 
-	if (frameContext.get('isReadOnly')) {
+	if (fc.get('isReadOnly')) {
 		e.preventDefault();
-		if (domUtils.isAnchor(targetElement)) {
-			_w.open(targetElement.href, targetElement.target);
+		if (dom.check.isAnchor(eventTarget)) {
+			_w.open(eventTarget.href, eventTarget.target);
 		}
 		return false;
 	}
 
-	if (domUtils.isNonEditable(frameContext.get('wysiwyg'))) return;
+	if (dom.check.isNonEditable(fc.get('wysiwyg'))) return;
 
 	// user event
-	if (this.triggerEvent('onClick', { frameContext, event: e }) === false) return;
+	if ((await this.triggerEvent('onClick', { frameContext: fc, event: e })) === false) return;
 	// plugin event
-	if (this._callPluginEvent('onClick', { frameContext, event: e }) === false) return;
+	if (this._callPluginEvent('onClick', { frameContext: fc, event: e }) === false) return;
 
-	const componentInfo = this.component.get(targetElement);
+	const componentInfo = this.component.get(eventTarget);
 	if (componentInfo) {
 		e.preventDefault();
-		this.component.select(componentInfo.target, componentInfo.pluginName, false);
+		this.component.select(componentInfo.target, componentInfo.pluginName);
 		return;
 	}
 
@@ -67,7 +101,7 @@ export function OnClick_wysiwyg(frameContext, e) {
 	if (e.detail === 3) {
 		let range = this.selection.getRange();
 		if (this.format.isLine(range.endContainer) && range.endOffset === 0) {
-			range = this.selection.setRange(range.startContainer, range.startOffset, range.startContainer, range.startContainer.length);
+			range = this.selection.setRange(range.startContainer, range.startOffset, range.startContainer, range.startContainer.textContent.length);
 			this.selection._rangeInfo(range, this.selection.get());
 		}
 	}
@@ -75,19 +109,19 @@ export function OnClick_wysiwyg(frameContext, e) {
 	const selectionNode = this.selection.getNode();
 	const formatEl = this.format.getLine(selectionNode, null);
 	const rangeEl = this.format.getBlock(selectionNode, null);
-	if (!formatEl && !domUtils.isNonEditable(targetElement) && !domUtils.isList(rangeEl)) {
+	if (!formatEl && !dom.check.isNonEditable(eventTarget) && !dom.check.isList(rangeEl)) {
 		const range = this.selection.getRange();
 		if (this.format.getLine(range.startContainer) === this.format.getLine(range.endContainer)) {
-			if (domUtils.isList(rangeEl)) {
+			if (dom.check.isList(rangeEl)) {
 				e.preventDefault();
 				const prevLi = selectionNode.nextElementSibling;
-				const oLi = domUtils.createElement('LI', null, selectionNode);
+				const oLi = dom.utils.createElement('LI', null, selectionNode);
 				rangeEl.insertBefore(oLi, prevLi);
 				this.editor.focus();
 			} else if (
-				!domUtils.isWysiwygFrame(selectionNode) &&
+				!dom.check.isWysiwygFrame(selectionNode) &&
 				!this.component.is(selectionNode) &&
-				(!domUtils.isTableElements(selectionNode) || domUtils.isTableCell(selectionNode)) &&
+				(!dom.check.isTableElements(selectionNode) || dom.check.isTableCell(selectionNode)) &&
 				this._setDefaultLine(this.format.isBlock(rangeEl) ? 'DIV' : this.options.get('defaultLine')) !== null
 			) {
 				e.preventDefault();
@@ -102,15 +136,15 @@ export function OnClick_wysiwyg(frameContext, e) {
 			const _styleNode = [...this.editor._onCopyFormatInfo];
 			const n = _styleNode.pop();
 
-			this.format.removeTextStyle();
+			this.format.removeInlineElement();
 
 			if (n) {
-				const insertedNode = this.format.applyTextStyle(n, null, [n.nodeName], false);
+				const insertedNode = this.format.applyInlineElement(n, { stylesToModify: null, nodesToRemove: [n.nodeName], strictRemove: false });
 				const { parent, inner } = this.nodeTransform.createNestedNode(_styleNode);
 				insertedNode.parentNode.insertBefore(parent, insertedNode);
 				inner.appendChild(insertedNode);
 
-				this.selection.setRange(insertedNode, domUtils.isZeroWith(insertedNode) ? 1 : 0, insertedNode, 1);
+				this.selection.setRange(insertedNode, dom.check.isZeroWidth(insertedNode) ? 1 : 0, insertedNode, 1);
 			}
 
 			if (this.options.get('copyFormatKeepOn')) return;
@@ -128,20 +162,33 @@ export function OnClick_wysiwyg(frameContext, e) {
 	if (this.editor.isBalloon || this.editor.isSubBalloon) this._w.setTimeout(this._toggleToolbarBalloon.bind(this), 0);
 }
 
-export function OnMouseMove_wysiwyg(frameContext, e) {
-	if (frameContext.get('isReadOnly') || frameContext.get('isDisabled')) return false;
+/**
+ * @private
+ * @this {EventManagerThis_handler_ww_mouse}
+ * @param {__se__FrameContext} fc - Frame context object
+ * @param {MouseEvent} e - Event object
+ */
+export function OnMouseMove_wysiwyg(fc, e) {
+	if (fc.get('isReadOnly') || fc.get('isDisabled')) return false;
+	const eventTarget = dom.query.getEventTarget(e);
 
 	// over component
 	if (_DragHandle.get('__overInfo') !== false) {
-		this._overComponentSelect(e.target);
+		this._overComponentSelect(eventTarget);
 	}
 
-	this._callPluginEvent('onMouseMove', { frameContext, event: e });
+	this._callPluginEvent('onMouseMove', { frameContext: fc, event: e });
 }
 
-export function OnMouseLeave_wysiwyg(frameContext, e) {
+/**
+ * @private
+ * @this {EventManagerThis_handler_ww_mouse}
+ * @param {__se__FrameContext} fc - Frame context object
+ * @param {MouseEvent} e - Event object
+ */
+export async function OnMouseLeave_wysiwyg(fc, e) {
 	// user event
-	if (this.triggerEvent('onMouseLeave', { frameContext, event: e }) === false) return;
+	if ((await this.triggerEvent('onMouseLeave', { frameContext: fc, event: e })) === false) return;
 	// plugin event
-	if (this._callPluginEvent('onMouseLeave', { frameContext, event: e }) === false) return;
+	if (this._callPluginEvent('onMouseLeave', { frameContext: fc, event: e }) === false) return;
 }