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

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
+ */
+
+/**
+ * @private
+ * @this {EventManagerThis}
+ * @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,36 +48,48 @@ 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}
+ * @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}
+ * @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);
@@ -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();
@@ -96,23 +130,65 @@ export function OnClick_wysiwyg(frameContext, e) {
 		}
 	}
 
+	// copy format
+	if (this.editor._onCopyFormatInfo) {
+		try {
+			const _styleNode = [...this.editor._onCopyFormatInfo];
+			const n = _styleNode.pop();
+
+			this.format.removeInlineElement();
+
+			if (n) {
+				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, dom.check.isZeroWidth(insertedNode) ? 1 : 0, insertedNode, 1);
+			}
+
+			if (this.options.get('copyFormatKeepOn')) return;
+
+			this.editor._onCopyFormatInitMethod();
+		} catch (err) {
+			console.warn('[SUNEDITOR.copyFormat.error] ', err);
+			if (!this.editor._onCopyFormatInitMethod?.()) {
+				this.editor._onCopyFormatInfo = null;
+				this.editor._onCopyFormatInitMethod = null;
+			}
+		}
+	}
+
 	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}
+ * @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}
+ * @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;
 }