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

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

@@ -1,24 +1,33 @@
-import { domUtils, env } from '../../../helper';
+import { dom, env } from '../../../helper';
 
 const { isMobile } = env;
 
+/**
+ * @typedef {Omit<import('../eventManager').default & Partial<__se__EditorInjector>, 'eventManager'>} EventManagerThis_handler_toolbar
+ */
+
+/**
+ * @private
+ * @this {EventManagerThis_handler_toolbar}
+ * @param {MouseEvent} e - Event object
+ */
 export function ButtonsHandler(e) {
-	let target = e.target;
+	const eventTarget = dom.query.getEventTarget(e);
+	let target = eventTarget;
 
 	if (this.editor.isSubBalloon && !this.context.get('toolbar.sub.main')?.contains(target)) {
 		this._hideToolbar_sub();
 	}
 
-	const isInput = domUtils.isInputElement(target);
-	if (this.menu._bindControllersOff) e.stopPropagation();
+	const isInput = dom.check.isInputElement(target);
 
 	if (isInput) {
-		this.editor._antiBlur = false;
+		this.editor._preventBlur = false;
 	} else if (!this.editor.frameContext.get('wysiwyg').contains(this.selection.getNode())) {
 		this.editor.focus();
 	}
 
-	if (domUtils.getParentElement(target, '.se-dropdown')) {
+	if (dom.query.getParentElement(target, '.se-dropdown')) {
 		e.stopPropagation();
 		this.editor._notHideToolbar = true;
 	} else {
@@ -26,20 +35,20 @@ export function ButtonsHandler(e) {
 		let className = target.className;
 
 		while (target && !command && !/(se-menu-list|sun-editor-common|se-menu-tray)/.test(className)) {
-			target = target.parentNode;
+			target = target.parentElement;
 			command = target.getAttribute('data-command');
 			className = target.className;
 		}
 
 		// toolbar input button
 		if (isInput && /^INPUT$/i.test(target?.getAttribute('data-type'))) {
-			this.editor._antiBlur = this._inputFocus = true;
+			this.editor._preventBlur = this._inputFocus = true;
 			if (!this.status.hasFocus) this.applyTagEffect();
 			/* event */
-			const eventTarget = e.target;
-			if (!domUtils.isInputElement(eventTarget) || eventTarget.disabled) return;
+			if (!dom.check.isInputElement(eventTarget) || eventTarget.disabled) return;
 
 			const plugin = this.plugins[command];
+			if (!plugin) return;
 
 			if (this.__inputBlurEvent) this.__removeInput();
 
@@ -75,7 +84,7 @@ export function ButtonsHandler(e) {
 			return;
 		} else if (!this.editor.frameContext.get('isCodeView')) {
 			if (isMobile) {
-				this.editor._antiBlur = true;
+				this.editor._preventBlur = true;
 			} else {
 				e.preventDefault();
 				if (env.isGecko && command) {
@@ -84,14 +93,20 @@ export function ButtonsHandler(e) {
 			}
 		}
 
-		if (command === this.menu.currentDropdownName || command === this.editor._containerName) {
+		if (command === this.menu.currentDropdownName || command === this.menu.currentContainerName) {
 			e.stopPropagation();
 		}
 	}
 }
 
+/**
+ * @private
+ * @this {EventManagerThis_handler_toolbar}
+ * @param {MouseEvent} e - Event object
+ */
 export function OnClick_menuTray(e) {
-	const target = domUtils.getCommandTarget(e.target);
+	const eventTarget = dom.query.getEventTarget(e);
+	const target = dom.query.getCommandTarget(eventTarget);
 	if (!target) return;
 
 	let t = target;
@@ -109,6 +124,12 @@ export function OnClick_menuTray(e) {
 	plugin.action(target);
 }
 
+/**
+ * @private
+ * @this {EventManagerThis_handler_toolbar}
+ * @param {MouseEvent} e - Event object
+ */
 export function OnClick_toolbar(e) {
-	this.editor.runFromTarget(e.target);
+	const eventTarget = dom.query.getEventTarget(e);
+	this.editor.runFromTarget(eventTarget);
 }

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

@@ -1,14 +1,28 @@
+/**
+ * @typedef {Omit<import('../eventManager').default & Partial<__se__EditorInjector>, 'eventManager'>} EventManagerThis_handler_ww_clipboard
+ */
+
+/**
+ * @private
+ * @this {EventManagerThis_handler_ww_clipboard}
+ * @param {ClipboardEvent} e - Event object
+ */
 export function OnPaste_wysiwyg(frameContext, e) {
 	const clipboardData = e.clipboardData;
 	if (!clipboardData) return true;
 	return this._dataTransferAction('paste', e, clipboardData, frameContext);
 }
 
-export function OnCopy_wysiwyg(frameContext, e) {
+/**
+ * @private
+ * @this {EventManagerThis_handler_ww_clipboard}
+ * @param {ClipboardEvent} e - Event object
+ */
+export async function OnCopy_wysiwyg(frameContext, e) {
 	const clipboardData = e.clipboardData;
 
 	// user event
-	if (this.triggerEvent('onCopy', { frameContext, event: e, clipboardData }) === false) {
+	if ((await this.triggerEvent('onCopy', { frameContext, event: e, clipboardData })) === false) {
 		e.preventDefault();
 		e.stopPropagation();
 		return false;
@@ -18,11 +32,16 @@ export function OnCopy_wysiwyg(frameContext, e) {
 	this.__secopy = fcSelection.toString();
 }
 
-export function OnCut_wysiwyg(frameContext, e) {
+/**
+ * @private
+ * @this {EventManagerThis_handler_ww_clipboard}
+ * @param {ClipboardEvent} e - Event object
+ */
+export async function OnCut_wysiwyg(frameContext, e) {
 	const clipboardData = e.clipboardData;
 
 	// user event
-	if (this.triggerEvent('onCut', { frameContext, event: e, clipboardData }) === false) {
+	if ((await this.triggerEvent('onCut', { frameContext, event: e, clipboardData })) === false) {
 		e.preventDefault();
 		e.stopPropagation();
 		return false;

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

@@ -1,10 +1,23 @@
-import { domUtils } from '../../../helper';
+import { dom } from '../../../helper';
 import { _DragHandle } from '../../../modules';
 
+/**
+ * @typedef {Omit<import('../eventManager').default & Partial<__se__EditorInjector>, 'eventManager'>} EventManagerThis_handler_ww_dragDrop
+ */
+
+/**
+ * @private
+ * @this {EventManagerThis_handler_ww_dragDrop}
+ * @param {__se__FrameContext} fc - Frame context object
+ * @param {HTMLElement} dragCursor - Drag cursor element
+ * @param {?HTMLElement} _iframeTopArea - Iframe top area element
+ * @param {?HTMLElement} _innerToolbar - Inner toolbar element
+ * @param {DragEvent} e - Event object
+ */
 export function OnDragOver_wysiwyg(fc, dragCursor, _iframeTopArea, _innerToolbar, e) {
 	e.preventDefault();
 
-	const { sc, so, ec, eo } = this.selection.getEventLocationRange(e);
+	const { sc, so, ec, eo } = this.selection.getDragEventLocationRange(e);
 
 	const cursorRange = fc.get('_wd').createRange();
 	cursorRange.setStart(sc, so);
@@ -20,8 +33,15 @@ export function OnDragOver_wysiwyg(fc, dragCursor, _iframeTopArea, _innerToolbar
 
 	const rect = cursorRange.getBoundingClientRect();
 	if (rect.height > 0) {
-		dragCursor.style.left = `${rect.right + this._w.scrollX + _offset.x}px`;
-		dragCursor.style.top = `${rect.top + this._w.scrollY + _offset.y - 5}px`;
+		const wwFrame = fc.get('wysiwygFrame');
+		let frameX = 0;
+		let frameY = 0;
+		if (/^iframe$/i.test(wwFrame.nodeName)) {
+			frameX = wwFrame.offsetLeft;
+			frameY = wwFrame.offsetTop;
+		}
+		dragCursor.style.left = `${rect.right + this._w.scrollX + _offset.x + frameX}px`;
+		dragCursor.style.top = `${rect.top + this._w.scrollY + _offset.y - 5 + frameY}px`;
 		dragCursor.style.height = `${rect.height + 10}px`;
 		dragCursor.style.display = 'block';
 	} else {
@@ -29,13 +49,25 @@ export function OnDragOver_wysiwyg(fc, dragCursor, _iframeTopArea, _innerToolbar
 	}
 }
 
+/**
+ * @private
+ * @this {EventManagerThis_handler_ww_dragDrop}
+ * @param {HTMLElement} dragCursor - Drag cursor element
+ */
 export function OnDragEnd_wysiwyg(dragCursor) {
 	dragCursor.style.display = 'none';
 }
 
-export function OnDrop_wysiwyg(frameContext, dragCursor, e) {
+/**
+ * @private
+ * @this {EventManagerThis_handler_ww_dragDrop}
+ * @param {__se__FrameContext} fc - Frame context object
+ * @param {HTMLElement} dragCursor - Drag cursor element
+ * @param {DragEvent} e - Event object
+ */
+export function OnDrop_wysiwyg(fc, dragCursor, e) {
 	try {
-		if (frameContext.get('isReadOnly')) {
+		if (fc.get('isReadOnly')) {
 			e.preventDefault();
 			e.stopPropagation();
 			return false;
@@ -44,9 +76,9 @@ export function OnDrop_wysiwyg(frameContext, dragCursor, e) {
 		const dataTransfer = e.dataTransfer;
 		if (!dataTransfer) return true;
 
-		const { sc, so, ec, eo } = this.selection.getEventLocationRange(e);
+		const { sc, so, ec, eo } = this.selection.getDragEventLocationRange(e);
 
-		if (domUtils.getParentElement(sc, '.se-disable-pointer')) {
+		if (dom.query.getParentElement(sc, '.se-disable-pointer')) {
 			e.preventDefault();
 			return;
 		}
@@ -61,13 +93,20 @@ export function OnDrop_wysiwyg(frameContext, dragCursor, e) {
 			const dragContainer = _DragHandle.get('__dragContainer');
 			this.component.deselect();
 			this.selection.setRange(sc, so, ec, eo);
-			this.html.insertNode(dragContainer, null, true);
+			this.html.insertNode(dragContainer, { afterNode: null, skipCharCount: true });
+
+			// document type page
+			if (fc.has('documentType-use-page')) {
+				fc.get('documentTypePageMirror').innerHTML = fc.get('wysiwyg').innerHTML;
+				fc.get('documentType').rePage(true);
+			}
+
 			return;
 		}
 
 		this.html.remove();
 		this.selection.setRange(sc, so, ec, eo);
-		return this._dataTransferAction('drop', e, dataTransfer, frameContext);
+		return this._dataTransferAction('drop', e, dataTransfer, fc);
 	} finally {
 		dragCursor.style.display = 'none';
 	}