suneditor 2.46.2 → 3.0.0-alpha.2

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

@@ -0,0 +1,114 @@
+import { domUtils, env } from '../../../helper';
+
+const { isMobile } = env;
+
+export function ButtonsHandler(e) {
+	let target = e.target;
+
+	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();
+
+	if (isInput) {
+		this.editor._antiBlur = false;
+	} else if (!this.editor.frameContext.get('wysiwyg').contains(this.selection.getNode())) {
+		this.editor.focus();
+	}
+
+	if (domUtils.getParentElement(target, '.se-dropdown')) {
+		e.stopPropagation();
+		this.editor._notHideToolbar = true;
+	} else {
+		let command = target.getAttribute('data-command');
+		let className = target.className;
+
+		while (target && !command && !/(se-menu-list|sun-editor-common|se-menu-tray)/.test(className)) {
+			target = target.parentNode;
+			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;
+			if (!this.status.hasFocus) this.applyTagEffect();
+			/* event */
+			const eventTarget = e.target;
+			if (!domUtils.isInputElement(eventTarget) || eventTarget.disabled) return;
+
+			const plugin = this.plugins[command];
+
+			if (this.__inputBlurEvent) this.__removeInput();
+
+			// blur event
+			if (typeof plugin.onInputChange === 'function') this.__inputPlugin = { obj: plugin, target: eventTarget, value: eventTarget.value };
+			this.__inputBlurEvent = this.addEvent(eventTarget, 'blur', (ev) => {
+				if (plugin.isInputActive) return;
+
+				try {
+					const value = eventTarget.value.trim();
+					if (typeof plugin.onInputChange === 'function' && value !== this.__inputPlugin.value) plugin.onInputChange({ target: eventTarget, value, event: ev });
+				} finally {
+					this._w.setTimeout(() => (this._inputFocus = false), 0);
+					this.__removeInput();
+				}
+			});
+
+			if (!plugin) return;
+
+			// keydown event
+			if (typeof plugin.onInputKeyDown === 'function') {
+				this.__inputKeyEvent = this.addEvent(eventTarget, 'keydown', (event) => {
+					plugin.onInputKeyDown({ target: eventTarget, event });
+				});
+			}
+		} else if (this.__inputBlurEvent && this.__inputPlugin) {
+			const value = this.__inputPlugin.target.value.trim();
+			if (value !== this.__inputPlugin.value) {
+				this.__inputPlugin.obj.onInputChange({ target: this.__inputPlugin.target, value, event: e });
+			}
+
+			this.__removeInput();
+			return;
+		} else if (!this.editor.frameContext.get('isCodeView')) {
+			if (isMobile) {
+				this.editor._antiBlur = true;
+			} else {
+				e.preventDefault();
+				if (env.isGecko && command) {
+					this._injectActiveEvent(target);
+				}
+			}
+		}
+
+		if (command === this.menu.currentDropdownName || command === this.editor._containerName) {
+			e.stopPropagation();
+		}
+	}
+}
+
+export function OnClick_menuTray(e) {
+	const target = domUtils.getCommandTarget(e.target);
+	if (!target) return;
+
+	let t = target;
+	let k = '';
+	while (t && !/se-menu-tray/.test(t.className) && !k) {
+		t = t.parentElement;
+		k = t.getAttribute('data-key');
+	}
+	if (!k) return;
+
+	const plugin = this.plugins[k];
+	if (!plugin || typeof plugin.action !== 'function') return;
+
+	e.stopPropagation();
+	plugin.action(target);
+}
+
+export function OnClick_toolbar(e) {
+	this.editor.runFromTarget(e.target);
+}

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

@@ -0,0 +1,31 @@
+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) {
+	const clipboardData = e.clipboardData;
+
+	// user event
+	if (this.triggerEvent('onCopy', { frameContext, event: e, clipboardData }) === false) {
+		e.preventDefault();
+		e.stopPropagation();
+		return false;
+	}
+}
+
+export function OnCut_wysiwyg(frameContext, e) {
+	const clipboardData = e.clipboardData;
+
+	// user event
+	if (this.triggerEvent('onCut', { frameContext, event: e, clipboardData }) === false) {
+		e.preventDefault();
+		e.stopPropagation();
+		return false;
+	}
+
+	this._w.setTimeout(() => {
+		this.history.push(false);
+	}, 0);
+}

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

@@ -0,0 +1,69 @@
+import { domUtils } from '../../../helper';
+import { _DragHandle } from '../../../modules';
+
+export function OnDragOver_wysiwyg(dragCursor, _iframe, e) {
+	e.preventDefault();
+
+	const { sc, so, ec, eo } = this.selection.getEventLocationRange(e);
+
+	const cursorRange = this._d.createRange();
+	cursorRange.setStart(sc, so);
+	cursorRange.setEnd(ec, eo);
+
+	const _offset = { y: 0, x: 0 };
+	if (_iframe) {
+		const iframeOffset = this.offset.getGlobal(this.editor.frameContext.get('topArea'));
+		_offset.y = iframeOffset.top - this._w.scrollY;
+		_offset.x = iframeOffset.left - this._w.scrollX;
+	}
+
+	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`;
+		dragCursor.style.height = `${rect.height + 10}px`;
+		dragCursor.style.display = 'block';
+	} else {
+		dragCursor.style.display = 'none';
+	}
+}
+
+export function OnDrop_wysiwyg(frameContext, dragCursor, e) {
+	try {
+		if (frameContext.get('isReadOnly')) {
+			e.preventDefault();
+			e.stopPropagation();
+			return false;
+		}
+
+		const dataTransfer = e.dataTransfer;
+		if (!dataTransfer) return true;
+
+		const { sc, so, ec, eo } = this.selection.getEventLocationRange(e);
+
+		if (domUtils.getParentElement(sc, '.se-disable-pointer')) {
+			e.preventDefault();
+			return;
+		}
+
+		if (_DragHandle.get('__dragContainer')) {
+			e.preventDefault();
+			if (_DragHandle.get('__dragContainer').contains(e.target)) {
+				this.component.deselect();
+				return;
+			}
+
+			const dragContainer = _DragHandle.get('__dragContainer');
+			this.component.deselect();
+			this.selection.setRange(sc, so, ec, eo);
+			this.html.insertNode(dragContainer, null, true);
+			return;
+		}
+
+		this.html.remove();
+		this.selection.setRange(sc, so, ec, eo);
+		return this._dataTransferAction('drop', e, dataTransfer, frameContext);
+	} finally {
+		dragCursor.style.display = 'none';
+	}
+}