suneditor 3.0.0-alpha.2 → 3.0.0-alpha.3

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "suneditor",
-	"version": "3.0.0-alpha.2",
+	"version": "3.0.0-alpha.3",
 	"description": "Vanilla javascript based WYSIWYG web editor",
 	"author": "Yi JiHong",
 	"license": "MIT",

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

@@ -1,19 +1,20 @@
 import { domUtils } from '../../../helper';
 import { _DragHandle } from '../../../modules';
 
-export function OnDragOver_wysiwyg(dragCursor, _iframe, e) {
+export function OnDragOver_wysiwyg(fc, dragCursor, _iframeTopArea, _innerToolbar, e) {
 	e.preventDefault();
 
 	const { sc, so, ec, eo } = this.selection.getEventLocationRange(e);
 
-	const cursorRange = this._d.createRange();
+	const cursorRange = fc.get('_wd').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;
+	if (_iframeTopArea) {
+		const iframeOffset = this.offset.getGlobal(_iframeTopArea);
+		const toolbarH = _innerToolbar ? this.context.get('toolbar.main').offsetHeight : 0;
+		_offset.y = iframeOffset.top + toolbarH - this._w.scrollY;
 		_offset.x = iframeOffset.left - this._w.scrollX;
 	}
 
@@ -28,6 +29,10 @@ export function OnDragOver_wysiwyg(dragCursor, _iframe, e) {
 	}
 }
 
+export function OnDragEnd_wysiwyg(dragCursor) {
+	dragCursor.style.display = 'none';
+}
+
 export function OnDrop_wysiwyg(frameContext, dragCursor, e) {
 	try {
 		if (frameContext.get('isReadOnly')) {

package/src/core/base/eventManager.js

@@ -11,7 +11,7 @@ import { ButtonsHandler, OnClick_menuTray, OnClick_toolbar } from './eventHandle
 import { OnMouseDown_wysiwyg, OnMouseUp_wysiwyg, OnClick_wysiwyg, OnMouseMove_wysiwyg, OnMouseLeave_wysiwyg } from './eventHandlers/handler_ww_mouse';
 import { OnInput_wysiwyg, OnKeyDown_wysiwyg, OnKeyUp_wysiwyg } from './eventHandlers/handler_ww_key_input';
 import { OnPaste_wysiwyg, OnCopy_wysiwyg, OnCut_wysiwyg } from './eventHandlers/handler_ww_clipboard';
-import { OnDragOver_wysiwyg, OnDrop_wysiwyg } from './eventHandlers/handler_ww_dragDrop';
+import { OnDragOver_wysiwyg, OnDragEnd_wysiwyg, OnDrop_wysiwyg } from './eventHandlers/handler_ww_dragDrop';
 
 const { _w, ON_OVER_COMPONENT, isMobile } = env;
 
@@ -656,7 +656,13 @@ EventManager.prototype = {
 		this.addEvent(eventWysiwyg, 'paste', OnPaste_wysiwyg.bind(this, fc), false);
 		this.addEvent(eventWysiwyg, 'copy', OnCopy_wysiwyg.bind(this, fc), false);
 		this.addEvent(eventWysiwyg, 'cut', OnCut_wysiwyg.bind(this, fc), false);
-		this.addEvent(eventWysiwyg, 'dragover', OnDragOver_wysiwyg.bind(this, dragCursor, isIframe ? this.editor.frameContext.get('topArea') : null), false);
+		this.addEvent(
+			eventWysiwyg,
+			'dragover',
+			OnDragOver_wysiwyg.bind(this, fc, dragCursor, isIframe ? this.editor.frameContext.get('topArea') : null, !this.options.get('toolbar_container') && !this.editor.isBalloon && !this.editor.isInline),
+			false
+		);
+		this.addEvent(eventWysiwyg, 'dragend', OnDragEnd_wysiwyg.bind(this, dragCursor), false);
 		this.addEvent(eventWysiwyg, 'drop', OnDrop_wysiwyg.bind(this, fc, dragCursor), false);
 		this.addEvent(eventWysiwyg, 'scroll', OnScroll_wysiwyg.bind(this, fc, eventWysiwyg), { passive: true, useCapture: false });
 		this.addEvent(eventWysiwyg, 'focus', OnFocus_wysiwyg.bind(this, fc), false);

package/src/core/class/offset.js

@@ -376,22 +376,26 @@ Offset.prototype = {
 		const tmbw = clientSize.h - targetRect.bottom;
 		let toolbarH = !this.editor.toolbar._sticky && (this.editor.isBalloon || this.editor.isInline) ? 0 : this.context.get('toolbar.main').offsetHeight;
 		let rmt, rmb;
+		let rt = 0;
 		if (this.editor.frameContext.get('isFullScreen')) {
 			rmt = tmtw - toolbarH;
 			rmb = tmbw;
 		} else {
 			const tMargin = targetRect.top;
 			const bMargin = clientSize.h - targetRect.bottom;
+			const editorOffset = this.getGlobal();
+			const editorScroll = this.getGlobalScroll();
+			const statusBarH = this.editor.frameContext.get('statusbar')?.offsetHeight || 0;
 
 			if (isIframe) {
-				const editorOffset = this.getGlobal();
-				const editorScroll = this.getGlobalScroll();
 				const emt = editorOffset.top - editorScroll.top - editorScroll.ts;
 				const editorH = this.editor.frameContext.get('topArea').offsetHeight;
 				rmt = targetRect.top - emt;
-				rmb = bMargin - (editorScroll.oh - (editorH + emt) + (this.editor.frameContext.get('statusbar')?.offsetHeight || 0));
+				rmb = bMargin - (editorScroll.oh - (editorH + emt) + statusBarH);
 			} else {
-				const wst = !isTargetAbs && /\d+/.test(this.editor.frameOptions.get('height')) ? this.getGlobal(this.editor.frameContext.get('topArea')).top - _w.scrollY : 0;
+				rt = !this.editor.toolbar._sticky && !this.options.get('toolbar_container') ? toolbarH : 0;
+				const wst = !isTargetAbs && /\d+/.test(this.editor.frameOptions.get('height')) ? editorOffset.top - _w.scrollY + rt : 0;
+				const wsb = !isTargetAbs && /\d+/.test(this.editor.frameOptions.get('height')) ? _w.innerHeight - (editorOffset.top + editorOffset.height - _w.scrollY) : 0;
 				let st = wst;
 				if (toolbarH > wst) {
 					if (this.editor.toolbar._sticky) {
@@ -402,10 +406,12 @@ Offset.prototype = {
 					}
 				} else if (this.options.get('toolbar_container')) {
 					toolbarH = 0;
+				} else {
+					st = wst + (this.editor.toolbar._sticky ? toolbarH : 0);
 				}
 
 				rmt = targetRect.top - st;
-				rmb = wwScroll.rects.bottom - targetRect.bottom;
+				rmb = wwScroll.rects.bottom - targetRect.bottom - wsb - statusBarH;
 			}
 
 			// display margin
@@ -413,7 +419,7 @@ Offset.prototype = {
 			rmb = rmb > 0 ? bMargin : rmb;
 		}
 
-		if (isWWTarget && (rmb + targetH <= 0 || rmt + targetH <= 0)) return;
+		if (isWWTarget && (rmb + targetH <= 0 || rmt + rt + targetH <= 0)) return;
 
 		let t = addOffset.top;
 		let y = 0;
@@ -425,7 +431,7 @@ Offset.prototype = {
 			if (y < 0) {
 				arrowDir = 'down';
 				t -= targetH + elH + ah * 2;
-				y = rmt - (elH + ah);
+				y = toolbarH + rmt - (elH + ah);
 				if (y < 0) {
 					arrowDir = '';
 					t -= y;

package/src/core/class/selection.js

@@ -235,13 +235,13 @@ Selection.prototype = {
 			eo = e.rangeOffset;
 		} else if (this.editor.frameContext.get('_wd').caretRangeFromPoint) {
 			let r = this.editor.frameContext.get('_wd').caretRangeFromPoint(e.clientX, e.clientY);
-			if (!r) r = this.selection.getRange();
+			if (!r) r = this.getRange();
 			sc = r.startContainer;
 			so = r.startOffset;
 			ec = r.endContainer;
 			eo = r.endOffset;
 		} else {
-			const r = this.selection.getRange();
+			const r = this.getRange();
 			sc = r.startContainer;
 			so = r.startOffset;
 			ec = r.endContainer;
@@ -264,7 +264,7 @@ Selection.prototype = {
 		if (ref instanceof Selection) {
 			ref = ref.getRangeAt(0);
 		} else if (ref instanceof Node) {
-			ref = this.selection.setRange(ref, 1, ref, 1);
+			ref = this.setRange(ref, 1, ref, 1);
 		} else if (typeof ref?.startContainer === 'undefined') {
 			console.warn('[SUNEDITOR.html.scrollTo.warn] "selectionRange" must be Selection or Range or Node object.', ref);
 		}
@@ -387,8 +387,10 @@ Selection.prototype = {
 		let rangeObj = this.getRange();
 		if (this._isNone(rangeObj)) {
 			if (!domUtils.isWysiwygFrame(rangeObj.startContainer) || !domUtils.isWysiwygFrame(rangeObj.endContainer)) return false;
-			const ww = rangeObj.startContainer;
-			rangeObj = this.setRange(ww.firstElementChild, 0, ww.lastElementChild, 1);
+			const ww = rangeObj.commonAncestorContainer;
+			const first = ww.children[rangeObj.startOffset];
+			const end = ww.children[rangeObj.endOffset];
+			rangeObj = this.setRange(first, 0, end, first === end ? 0 : 1);
 		}
 
 		const range = rangeObj;