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

package/src/core/{class → logic/dom}/offset.js

@@ -1,17 +1,8 @@
-/**
- * @fileoverview Offset class
- */
-
-import CoreInjector from '../../editorInjector/_core';
-import { getParentElement } from '../../helper/dom/domQuery';
-import { isWysiwygFrame, isElement } from '../../helper/dom/domCheck';
-import { hasClass, addClass, removeClass, getClientSize } from '../../helper/dom/domUtils';
-import { numbers } from '../../helper';
-import { _w, _d } from '../../helper/env';
-
-/**
- * @typedef {Omit<Offset & Partial<__se__EditorInjector>, 'offset'>} OffsetThis
- */
+import { getParentElement } from '../../../helper/dom/domQuery';
+import { isWysiwygFrame, isElement } from '../../../helper/dom/domCheck';
+import { hasClass, addClass, removeClass, getClientSize } from '../../../helper/dom/domUtils';
+import { numbers } from '../../../helper';
+import { _w, _d } from '../../../helper/env';
 
 /**
  * @typedef {Object} RectsInfo Bounding rectangle information of the selection range.
@@ -37,16 +28,17 @@ import { _w, _d } from '../../helper/env';
  * @property {number} right - The right position of the node relative to the WYSIWYG editor.
  * @property {number} scrollX - The horizontal scroll offset inside the WYSIWYG editor.
  * @property {number} scrollY - The vertical scroll offset inside the WYSIWYG editor.
+ * @property {number} scrollH - The vertical scroll height inside the WYSIWYG editor.
  */
 
 /**
  * @typedef {Object} OffsetGlobalInfo
  * @property {number} top - The top position of the element relative to the entire document.
  * @property {number} left - The left position of the element relative to the entire document.
+ * @property {number} fixedTop - The top position within the current viewport, without taking scrolling into account.
+ * @property {number} fixedLeft - The left position within the current viewport, without taking scrolling into account.
  * @property {number} width - The total width of the element, including its content, padding, and border.
  * @property {number} height - The total height of the element, including its content, padding, and border.
- * @property {number} scrollTop - The amount of vertical scrolling applied to the element.
- * @property {number} scrollLeft - The amount of horizontal scrolling applied to the element.
  */
 
 /**
@@ -74,45 +66,55 @@ import { _w, _d } from '../../helper/env';
  * @property {number} width - The total width of the WYSIWYG editor's scrollable area.
  * @property {number} height - The total height of the WYSIWYG editor's scrollable area.
  * @property {number} bottom - The sum of `top` and `height`, representing the bottom-most scrollable position.
- * @property {RectsInfo} rects - The bounding rectangle of the editor's visible area.
  */
 
 /**
- * @constructor
- * @this {OffsetThis}
  * @description Offset class, get the position of the element
- * @param {__se__EditorCore} editor - The root editor instance
  */
-function Offset(editor) {
-	CoreInjector.call(this, editor);
-
-	// members
-	this._scrollEvent = null;
-	this._elTop = 0;
-	this._scrollY = 0;
-	this._isFixed = false;
-}
+class Offset {
+	#$;
+	#store;
+
+	#shadowRoot;
+	#carrierWrapper;
+	#context;
+	#frameContext;
+	#options;
+	#frameOptions;
+
+	/**
+	 * @constructor
+	 * @param {SunEditor.Kernel} kernel
+	 */
+	constructor(kernel) {
+		this.#$ = kernel.$;
+		this.#store = kernel.store;
+
+		this.#shadowRoot = this.#$.contextProvider.shadowRoot;
+		this.#carrierWrapper = this.#$.contextProvider.carrierWrapper;
+		this.#context = this.#$.context;
+		this.#frameContext = this.#$.frameContext;
+		this.#options = this.#$.options;
+		this.#frameOptions = this.#$.frameOptions;
+	}
 
-Offset.prototype = {
 	/**
-	 * @this {OffsetThis}
 	 * @description Gets the position just outside the argument's internal editor (wysiwygFrame).
 	 * @param {Node} node Target node.
 	 * @returns {OffsetInfo} Position relative to the editor frame.
 	 */
 	get(node) {
-		const wFrame = this.editor.frameContext.get('wysiwygFrame');
+		const wFrame = this.#frameContext.get('wysiwygFrame');
 		const iframe = /iframe/i.test(wFrame?.nodeName);
 		const off = this.getLocal(node);
 
 		return {
 			left: off.left + (iframe ? wFrame.parentElement.offsetLeft : 0),
-			top: off.top + (iframe ? wFrame.parentElement.offsetTop : 0)
+			top: off.top + (iframe ? wFrame.parentElement.offsetTop : 0),
 		};
-	},
+	}
 
 	/**
-	 * @this {OffsetThis}
 	 * @description Gets the position inside the internal editor of the argument.
 	 * @param {Node} node Target node.
 	 * @returns {OffsetLocalInfo} Position relative to the WYSIWYG editor.
@@ -135,89 +137,79 @@ Offset.prototype = {
 			offsetElement = /** @type {HTMLElement} */ (offsetElement.offsetParent);
 		}
 
-		const wwFrame = this.editor.frameContext.get('wysiwygFrame');
-		if (this.editor.frameContext.get('wysiwyg').contains(target)) {
+		const wwFrame = this.#frameContext.get('wysiwygFrame');
+		if (this.#frameContext.get('wysiwyg').contains(target)) {
 			l = wwFrame.offsetLeft;
 			t = wwFrame.offsetTop;
 			r = wwFrame.parentElement.offsetWidth - (wwFrame.offsetLeft + wwFrame.offsetWidth);
 		}
 
-		const eventWysiwyg = this.editor.frameContext.get('eventWysiwyg');
-		offsetLeft += l;
+		const eventWysiwyg = this.#frameContext.get('eventWysiwyg');
+		offsetLeft += l - (wysiwyg ? wysiwyg.scrollLeft : 0);
 		offsetTop += t - (wysiwyg ? wysiwyg.scrollTop : 0);
 		return {
 			left: offsetLeft,
 			top: offsetTop,
 			right: offsetElement?.offsetWidth ? offsetElement.offsetWidth - (offsetLeft - l + targetWidth) + r : 0,
-			scrollX: eventWysiwyg.scrollX || eventWysiwyg.scrollLeft || 0,
-			scrollY: eventWysiwyg.scrollY || eventWysiwyg.scrollTop || 0
+			scrollX: eventWysiwyg.scrollLeft || eventWysiwyg.scrollX || 0,
+			scrollY: eventWysiwyg.scrollTop || eventWysiwyg.scrollY || 0,
+			scrollH: this.#frameContext.get('wysiwyg').scrollHeight || 0,
 		};
-	},
+	}
 
 	/**
-	 * @this {OffsetThis}
 	 * @description Returns the position of the argument relative to the global document.
-	 * @param {?Node=} node Target element.
+	 * This is a refactored version using getBoundingClientRect for better performance and accuracy.
+	 * @param {?Node} [node] Target element.
 	 * @returns {OffsetGlobalInfo} Global position and scroll values.
 	 */
 	getGlobal(node) {
-		const topArea = this.editor.frameContext.get('topArea');
-		const wFrame = this.editor.frameContext.get('wysiwygFrame');
+		const topArea = this.#frameContext.get('topArea');
+		const wFrame = this.#frameContext.get('wysiwygFrame');
 
-		let isTop = false;
-		let targetAbs = false;
-		if (!node) node = topArea;
-		if (node === topArea) isTop = true;
-		if (!isTop && isElement(node)) {
-			targetAbs = _w.getComputedStyle(node).position === 'absolute';
-		}
+		node ||= topArea;
 
-		let element = /** @type {HTMLElement} */ (node);
-		const w = element.offsetWidth;
-		const h = element.offsetHeight;
-		let t = 0,
-			l = 0,
-			st = 0,
-			sl = 0;
-
-		while (element) {
-			t += element.offsetTop;
-			l += element.offsetLeft;
-			st += element.scrollTop;
-			sl += element.scrollLeft;
-			element = /** @type {HTMLElement} */ (element.offsetParent);
+		if (!isElement(node)) {
+			return { top: 0, left: 0, fixedTop: 0, fixedLeft: 0, width: 0, height: 0 };
 		}
 
-		if (!targetAbs && !isTop && /^iframe$/i.test(wFrame.nodeName) && this.editor.frameContext.get('wysiwyg').contains(element)) {
-			element = this.editor.frameContext.get('wrapper');
-			while (element) {
-				t += element.offsetTop;
-				l += element.offsetLeft;
-				element = /** @type {HTMLElement} */ (element.offsetParent);
-			}
+		const element = /** @type {HTMLElement} */ (node);
+
+		const rect = element.getBoundingClientRect();
+
+		let top = rect.top;
+		let left = rect.left;
+
+		const isIframe = /^iframe$/i.test(wFrame.nodeName);
+		if (isIframe && wFrame.contentDocument.contains(element)) {
+			const iframeRect = wFrame.getBoundingClientRect();
+			top += iframeRect.top;
+			left += iframeRect.left;
 		}
 
+		const wy = _w.scrollY;
+		const wx = _w.scrollX;
+
 		return {
-			top: t + st,
-			left: l + sl,
-			width: w,
-			height: h,
-			scrollTop: st,
-			scrollLeft: sl
+			top: top + wy,
+			left: left + wx,
+			fixedTop: top,
+			fixedLeft: left,
+			width: element.offsetWidth,
+			height: element.offsetHeight,
 		};
-	},
+	}
 
 	/**
-	 * @this {OffsetThis}
 	 * @description Gets the current editor-relative scroll offset.
-	 * @param {?Node=} node Target element.
+	 * @param {?Node} [node] Target element.
 	 * @returns {OffsetGlobalScrollInfo} Global scroll information.
 	 */
 	getGlobalScroll(node) {
-		const topArea = this.editor.frameContext.get('topArea');
+		const topArea = this.#frameContext.get('topArea');
 		let isTop = false;
 		let targetAbs = false;
-		if (!node) node = topArea;
+		node ||= topArea;
 		if (node === topArea) isTop = true;
 		if (!isTop && isElement(node)) {
 			targetAbs = _w.getComputedStyle(node).position === 'absolute';
@@ -246,7 +238,7 @@ Offset.prototype = {
 			if (el.scrollTop > 0) {
 				y += el.offsetTop;
 			}
-			if (el.scrollHeight > el.clientHeight) {
+			if (el.scrollHeight >= el.clientHeight) {
 				oh = /^html$/i.test(el.nodeName) ? oh || el.clientHeight : el.clientHeight + (ohel ? -ohel.clientTop : 0);
 				ohOffsetEl = ohel || ohOffsetEl || el;
 				ohel = el;
@@ -254,7 +246,7 @@ Offset.prototype = {
 			if (el.scrollLeft > 0) {
 				x += el.offsetLeft;
 			}
-			if (el.scrollWidth > el.clientWidth) {
+			if (el.scrollWidth >= el.clientWidth) {
 				ow = /^html$/i.test(el.nodeName) ? ow || el.clientWidth : el.clientWidth + (owel ? -owel.clientLeft : 0);
 				owOffsetEl = owel || owOffsetEl || el;
 				owel = el;
@@ -262,8 +254,8 @@ Offset.prototype = {
 			el = el.parentElement;
 		}
 
-		if (!targetAbs && !isTop && /^iframe$/i.test(this.editor.frameContext.get('wysiwygFrame').nodeName)) {
-			el = this.editor.frameContext.get('wrapper');
+		if (!targetAbs && !isTop && /^iframe$/i.test(this.#frameContext.get('wysiwygFrame').nodeName)) {
+			el = this.#frameContext.get('wrapper');
 			ohOffsetEl = owOffsetEl = topArea;
 			while (el) {
 				t += el.scrollTop;
@@ -273,14 +265,14 @@ Offset.prototype = {
 				if (el.scrollTop > 0) {
 					y += el.offsetTop;
 				}
-				if (el.scrollHeight > el.clientHeight) {
+				if (el.scrollHeight >= el.clientHeight) {
 					oh = /^html$/i.test(el.nodeName) ? oh || el.clientHeight : el.clientHeight + (ohel ? -ohel.clientTop : 0);
 					ohel = el;
 				}
 				if (el.scrollLeft > 0) {
 					x += el.offsetLeft;
 				}
-				if (el.scrollWidth > el.clientWidth) {
+				if (el.scrollWidth >= el.clientWidth) {
 					ow = /^html$/i.test(el.nodeName) ? ow || el.clientWidth : el.clientWidth + (owel ? -owel.clientLeft : 0);
 					owel = el;
 				}
@@ -288,7 +280,7 @@ Offset.prototype = {
 			}
 		}
 
-		el = /** @type {HTMLElement} */ (this.editor._shadowRoot?.host);
+		el = /** @type {HTMLElement} */ (this.#shadowRoot?.host);
 		if (el) ohOffsetEl = owOffsetEl = topArea;
 		while (el) {
 			t += el.scrollTop;
@@ -298,14 +290,14 @@ Offset.prototype = {
 			if (el.scrollTop > 0) {
 				y += el.offsetTop;
 			}
-			if (el.scrollHeight > el.clientHeight) {
+			if (el.scrollHeight >= el.clientHeight) {
 				oh = /^html$/i.test(el.nodeName) ? oh || el.clientHeight : el.clientHeight + (ohel ? -ohel.clientTop : 0);
 				ohel = el;
 			}
 			if (el.scrollLeft > 0) {
 				x += el.offsetLeft;
 			}
-			if (el.scrollWidth > el.clientWidth) {
+			if (el.scrollWidth >= el.clientWidth) {
 				ow = /^html$/i.test(el.nodeName) ? ow || el.clientWidth : el.clientWidth + (owel ? -owel.clientLeft : 0);
 				owel = el;
 			}
@@ -322,7 +314,7 @@ Offset.prototype = {
 		oh = heightEditorRefer ? topArea.clientHeight : oh;
 		ow = widthEditorRefer ? topArea.clientWidth : ow;
 
-		const clientSize = getClientSize(this.editor.frameContext.get('_wd'));
+		const clientSize = getClientSize(this.#frameContext.get('_wd'));
 		return {
 			top: t,
 			left: l,
@@ -337,114 +329,97 @@ Offset.prototype = {
 			oh: targetAbs ? clientSize.h : oh,
 			ow: targetAbs ? clientSize.w : ow,
 			heightEditorRefer: heightEditorRefer,
-			widthEditorRefer: widthEditorRefer
+			widthEditorRefer: widthEditorRefer,
 		};
-	},
+	}
 
 	/**
-	 * @this {OffsetThis}
 	 * @description Get the scroll info of the WYSIWYG area.
 	 * @returns {OffsetWWScrollInfo} Scroll information within the editor.
 	 */
 	getWWScroll() {
-		const eventWysiwyg = this.editor.frameContext.get('wysiwyg');
-		const rects = this.selection.getRects(eventWysiwyg, 'start').rects;
-		const top = eventWysiwyg.scrollY || eventWysiwyg.scrollTop || 0;
-		const height = eventWysiwyg.scrollHeight || 0;
+		const eventWysiwyg = this.#frameContext.get('eventWysiwyg');
+		const top = eventWysiwyg.scrollTop || eventWysiwyg.scrollY || 0;
+		const height = eventWysiwyg.scrollHeight || eventWysiwyg.document?.documentElement.scrollHeight || 0;
 
 		return {
 			top,
-			left: eventWysiwyg.scrollX || eventWysiwyg.scrollLeft || 0,
-			width: eventWysiwyg.scrollWidth || 0,
+			left: eventWysiwyg.scrollLeft || eventWysiwyg.scrollX || 0,
+			width: eventWysiwyg.scrollWidth || eventWysiwyg.document?.documentElement.scrollWidth || 0,
 			height,
 			bottom: top + height,
-			rects
 		};
-	},
+	}
 
 	/**
-	 * @this {OffsetThis}
 	 * @description Sets the relative position of an element
 	 * @param {HTMLElement} element Element to position
 	 * @param {HTMLElement} e_container Element's root container
 	 * @param {HTMLElement} target Target element to position against
 	 * @param {HTMLElement} t_container Target's root container
-	 * @param {boolean} _reload Whether to reload position
 	 */
-	setRelPosition(element, e_container, target, t_container, _reload) {
-		this._scrollY = _w.scrollY;
-		let wy = 0;
-		let tCon = t_container;
-		do {
-			if ((this._isFixed = /^fixed$/i.test(_w.getComputedStyle(tCon).position))) {
-				wy += this._scrollY;
-				break;
-			}
-		} while (!hasClass(tCon, 'sun-editor') && (tCon = tCon.parentElement));
+	setRelPosition(element, e_container, target, t_container) {
+		const isFixedContainer = /^fixed$/i.test(_w.getComputedStyle(t_container).position);
+		const tGlobal = this.getGlobal(target);
+
+		// top
+		if (isFixedContainer) {
+			element.style.position = 'fixed';
+			element.style.top = `${tGlobal.fixedTop + tGlobal.height}px`;
+		} else {
+			element.style.position = '';
+
+			const isSameContainer = t_container.contains(element);
+			const containerTop = isSameContainer ? this.getGlobal(e_container).top : 0;
+			const elHeight = element.offsetHeight;
+			const scrollTop = this.getGlobalScroll().top;
+			const bt = tGlobal.top;
+
+			const menuHeight_bottom = getClientSize(_d).h - (containerTop - scrollTop + bt + target.offsetHeight);
+			if (menuHeight_bottom < elHeight) {
+				let menuTop = -1 * (elHeight - bt + 3);
+				const insTop = containerTop - scrollTop + menuTop;
+				const menuHeight_top = elHeight + (insTop < 0 ? insTop : 0);
+
+				if (menuHeight_top > menuHeight_bottom) {
+					element.style.height = `${menuHeight_top}px`;
+					menuTop = -1 * (menuHeight_top - bt + 3);
+				} else {
+					element.style.height = `${menuHeight_bottom}px`;
+					menuTop = bt + target.offsetHeight;
+				}
 
-		if (!_reload) {
-			this.__removeGlobalEvent();
-			this._scrollEvent = this.editor.eventManager.addGlobalEvent('scroll', FixedScroll.bind(this, element, e_container, target, t_container), false);
+				element.style.top = `${menuTop}px`;
+			} else {
+				element.style.top = `${bt + target.offsetHeight}px`;
+			}
 		}
 
+		// left
 		const ew = element.offsetWidth;
 		const tw = target.offsetWidth;
-		const tl = this.getGlobal(target).left;
+		const tl = tGlobal.left;
 		const tcleft = this.getGlobal(t_container).left;
 
-		// left
-		if (this.options.get('_rtl')) {
+		if (this.#options.get('_rtl')) {
 			const rtlW = ew > tw ? ew - tw : 0;
 			const rtlL = rtlW > 0 ? 0 : tw - ew;
-			element.style.left = `${tl - rtlW + rtlL + tcleft}px`;
+			element.style.left = `${tl - rtlW + rtlL}px`;
 			if (tcleft > this.getGlobal(element).left) {
 				element.style.left = tcleft + 'px';
 			}
 		} else {
 			const cw = t_container.offsetWidth + tcleft;
 			const overLeft = cw <= ew ? 0 : cw - (tl + ew);
-			if (overLeft < 0) element.style.left = `${tl + overLeft + tcleft}px`;
-			else element.style.left = `${tl}px`;
-		}
-
-		// top
-		const isSameContainer = t_container.contains(element);
-		const containerTop = isSameContainer ? this.getGlobal(e_container).top : 0;
-		const elHeight = element.offsetHeight;
-		const scrollTop = this.getGlobalScroll().top;
-		let bt = wy;
-		let offsetEl = target;
-		while (offsetEl && offsetEl !== e_container) {
-			bt += offsetEl.offsetTop;
-			offsetEl = /** @type {HTMLElement} */ (offsetEl.offsetParent);
-		}
-
-		const menuHeight_bottom = getClientSize(_d).h - (containerTop - scrollTop + bt + target.offsetHeight);
-		if (menuHeight_bottom < elHeight) {
-			let menuTop = -1 * (elHeight - bt + 3);
-			const insTop = containerTop - scrollTop + menuTop;
-			const menuHeight_top = elHeight + (insTop < 0 ? insTop : 0);
-
-			if (menuHeight_top > menuHeight_bottom) {
-				element.style.height = `${menuHeight_top}px`;
-				menuTop = -1 * (menuHeight_top - bt + 3);
+			if (overLeft < 0) {
+				element.style.left = `${tl + overLeft}px`;
 			} else {
-				element.style.height = `${menuHeight_bottom}px`;
-				menuTop = bt + target.offsetHeight;
+				element.style.left = `${tl}px`;
 			}
-
-			element.style.top = `${menuTop}px`;
-		} else {
-			element.style.top = `${bt + target.offsetHeight}px`;
 		}
-
-		if (this._isFixed) {
-			this._elTop = element.offsetTop;
-		}
-	},
+	}
 
 	/**
-	 * @this {OffsetThis}
 	 * @description Sets the absolute position of an element
 	 * @param {HTMLElement} element Element to position
 	 * @param {HTMLElement} target Target element
@@ -453,76 +428,97 @@ Offset.prototype = {
 	 * @param {{left:number, top:number}} [params.addOffset={left:0, top:0}] Additional offset
 	 * @param {"bottom"|"top"} [params.position="bottom"] Position ('bottom'|'top')
 	 * @param {*} params.inst Instance object of caller
+	 * @param {HTMLElement} [params.sibling=null] The sibling controller element
 	 * @returns {{position: "top" | "bottom"} | undefined} Success -> {position: current position}
 	 */
 	setAbsPosition(element, target, params) {
 		const addOffset = {
 			left: 0,
 			top: 0,
-			...params.addOffset
+			...params.addOffset,
 		};
 		const position = params.position || 'bottom';
 		const inst = params.inst;
-		const isLTR = !this.options.get('_rtl');
+		const isLTR = !this.#options.get('_rtl');
 
 		if (!isLTR) {
 			addOffset.left *= -1;
 		}
 
-		const isWWTarget = this.editor.frameContext.get('wrapper').contains(target) || params.isWWTarget;
-		const isCtrlTarget = getParentElement(target, '.se-controller');
-		const isTargetAbs = isWWTarget && !isCtrlTarget;
+		const isIframe = this.#frameOptions.get('iframe');
+		const isWWTarget = this.#frameContext.get('wrapper').contains(target) || params.isWWTarget || (isIframe ? this.#frameContext.get('wysiwyg').contains(target) : false);
+		const isToolbarTarget = Boolean(getParentElement(target, '.se-toolbar'));
+		const isElTarget = target.nodeType === 1;
+
+		const isTextSelection = isWWTarget && !isElTarget;
+		const isInlineTarget = isElTarget && /inline/.test(_w.getComputedStyle(target).display);
 		const clientSize = getClientSize(_d);
-		const wwScroll = isTargetAbs ? this.getWWScroll() : this._getWindowScroll();
-		const targetRect = isCtrlTarget ? target.getBoundingClientRect() : this.selection.getRects(target, 'start').rects;
+		const wwScroll = isTextSelection ? this.getWWScroll() : this.#getWindowScroll();
+		const targetRect = !isWWTarget || (!isIframe && isElTarget) ? target.getBoundingClientRect() : this.#$.selection.getRects(target, 'start').rects;
 		const targetOffset = this.getGlobal(target);
 		const arrow = /** @type {HTMLElement} */ (hasClass(element.firstElementChild, 'se-arrow') ? element.firstElementChild : null);
 
 		// top ----------------------------------------------------------------------------------------------------
+		const siblingH = params.sibling?.offsetHeight || 0;
 		const ah = arrow ? arrow.offsetHeight : 0;
 		const elH = element.offsetHeight;
 		const targetH = target.offsetHeight;
 		// margin
 		const tmtw = targetRect.top;
 		const tmbw = clientSize.h - targetRect.bottom;
-		const toolbarH = !this.editor.toolbar._sticky && (this.editor.isBalloon || this.editor.isInline) ? 0 : this.context.get('toolbar.main').offsetHeight;
+		const globalTop = this.getGlobal(this.#frameContext.get('topArea')).top;
+		const wScrollY = _w.scrollY;
+		const th = this.#context.get('toolbar_main').offsetHeight;
+		const containerToolbar = this.#options.get('toolbar_container');
+		const headLess = this.#store.mode.isBalloon || this.#store.mode.isInline || containerToolbar;
+		const toolbarH = (containerToolbar && globalTop - wScrollY - th > 0) || (!this.#$.toolbar.isSticky && headLess) ? 0 : th + (this.#$.toolbar.isSticky ? this.#options.get('toolbar_sticky') : 0);
+		const statusBarH = this.#frameContext.get('statusbar')?.offsetHeight || 0;
 
 		// check margin
-		const { rmt, rmb, rt } = this._getVMargin(tmtw, tmbw, toolbarH, clientSize, targetRect, isTargetAbs, wwScroll);
-		if (isWWTarget && (rmb + targetH <= 0 || rmt + rt + targetH <= 0)) return;
+		const { rmt, rmb, bMargin, rt } = this.#getVMargin(tmtw, tmbw, toolbarH, clientSize, targetRect, isTextSelection, isToolbarTarget);
+		if ((isWWTarget && (rmb - statusBarH + targetH <= 0 || rmt + rt + targetH - (this.#$.toolbar.isSticky && isInlineTarget ? toolbarH : 0) <= 0)) || rmt + targetH < 0) return;
 
+		const isSticky = this.#$.toolbar.isSticky && this.#context.get('toolbar_main').style.display !== 'none' && (!headLess || this.#frameContext.get('topArea').getBoundingClientRect().top <= th);
 		let t = addOffset.top;
 		let y = 0;
 		let arrowDir = '';
+
+		// [bottom] position
 		if (position === 'bottom') {
 			arrowDir = 'up';
-			t += targetRect.bottom + ah + _w.scrollY;
+			t += targetRect.bottom + ah + wScrollY;
 			y = rmb - (elH + ah);
-			if (y < 0) {
+			// change to <top> position
+			if (y - siblingH < 0) {
 				arrowDir = 'down';
 				t -= targetH + elH + ah * 2;
-				y = toolbarH + rmt - (elH + ah);
-				if (y < 0) {
+				y = rmt - (elH + ah);
+				// sticky the <top> position
+				if (y - siblingH < 0) {
 					arrowDir = '';
-					t -= y;
+					t -= y - siblingH - Math.max(1, y + elH + ah);
 				}
 			}
-		} else {
+		}
+		// <top> position
+		else {
 			arrowDir = 'down';
-			t += targetRect.top - elH - ah + _w.scrollY;
-			y = rmt - (elH + ah);
-			if (y < 0) {
+			t += targetRect.top - elH - ah + wScrollY;
+			y = (isSticky ? targetRect.top - toolbarH : rmt) - elH - ah;
+			// change to [bottom] position
+			if (y - siblingH < 0) {
 				arrowDir = 'up';
 				t += targetH + elH + ah * 2;
-				y = rmb - (elH + ah);
-				if (y < 0) {
+				y = (rmb > 0 ? bMargin : rmb) - (elH + ah) - statusBarH;
+				// sticky the [bottom] position
+				if (y - siblingH < 0) {
 					arrowDir = '';
-					t += y;
+					t += y - 2;
 				}
 			}
 		}
 
-		this._setArrow(arrow, arrowDir);
+		this.#setArrow(arrow, arrowDir);
 		element.style.top = `${t}px`;
 
 		// left ----------------------------------------------------------------------------------------------------
@@ -531,16 +527,8 @@ Offset.prototype = {
 		const elW = element.offsetWidth;
 		const aw = arrow ? arrow.offsetWidth : 0;
 		// margin
-		const tmlw = targetRect.left;
-		const tmrw = clientSize.w - targetRect.right;
-		let rml, rmr;
-		if (this.editor.frameContext.get('isFullScreen')) {
-			rml = tmlw;
-			rmr = tmrw;
-		} else {
-			rml = targetRect.left;
-			rmr = clientSize.w - targetRect.right;
-		}
+		const rml = targetRect.left;
+		const rmr = clientSize.w - targetRect.right;
 
 		if (isWWTarget && (rml + targetW <= 0 || rmr + targetW <= 0)) return;
 		if (arrow) {
@@ -588,14 +576,13 @@ Offset.prototype = {
 		inst.__offset = {
 			left: element.offsetLeft + wwScroll.left,
 			top: element.offsetTop + wwScroll.top,
-			addOffset: addOffset
+			addOffset: addOffset,
 		};
 
 		return { position: arrowDir === 'up' ? 'bottom' : 'top' };
-	},
+	}
 
 	/**
-	 * @this {OffsetThis}
 	 * @description Sets the position of an element relative to a range
 	 * @param {HTMLElement} element Element to position
 	 * @param {?Range} range Range to position against.
@@ -611,12 +598,12 @@ Offset.prototype = {
 		element.style.display = 'block';
 
 		let positionTop = position === 'top';
-		range = range || this.selection.getRange();
-		const rectsObj = this.selection.getRects(range, positionTop ? 'start' : 'end');
+		range ||= this.#$.selection.getRange();
+		const rectsObj = this.#$.selection.getRects(range, positionTop ? 'start' : 'end');
 		positionTop = rectsObj.position === 'start';
 
-		const isFullScreen = this.editor.frameContext.get('isFullScreen');
-		const topArea = this.editor.frameContext.get('topArea');
+		const isFullScreen = this.#frameContext.get('isFullScreen');
+		const topArea = this.#frameContext.get('topArea');
 		const rects = rectsObj.rects;
 		const scrollLeft = isFullScreen ? 0 : rectsObj.scrollLeft;
 		const scrollTop = isFullScreen ? 0 : rectsObj.scrollTop;
@@ -626,38 +613,33 @@ Offset.prototype = {
 		const toolbarWidth = element.offsetWidth;
 		const toolbarHeight = element.offsetHeight;
 
-		this._setOffsetOnRange(positionTop, rects, element, editorLeft, editorWidth, scrollLeft, scrollTop, addTop);
+		this.#setOffsetOnRange(positionTop, rects, element, editorLeft, editorWidth, scrollLeft, scrollTop, addTop);
 		if (this.getGlobal(element).top - offsets.top < 0) {
 			positionTop = !positionTop;
-			this._setOffsetOnRange(positionTop, rects, element, editorLeft, editorWidth, scrollLeft, scrollTop, addTop);
+			this.#setOffsetOnRange(positionTop, rects, element, editorLeft, editorWidth, scrollLeft, scrollTop, addTop);
 		}
 
 		if (toolbarWidth !== element.offsetWidth || toolbarHeight !== element.offsetHeight) {
-			this._setOffsetOnRange(positionTop, rects, element, editorLeft, editorWidth, scrollLeft, scrollTop, addTop);
+			this.#setOffsetOnRange(positionTop, rects, element, editorLeft, editorWidth, scrollLeft, scrollTop, addTop);
 		}
 
 		// check margin
-		const isTargetAbs = !this.carrierWrapper.contains(element);
+		const isTextSelection = !this.#carrierWrapper.contains(element);
 		const clientSize = getClientSize(_d);
-		const wwScroll = isTargetAbs ? this.getWWScroll() : this._getWindowScroll();
 		const targetH = rects.height;
 		const tmtw = rects.top;
 		const tmbw = clientSize.h - rects.bottom;
-		const toolbarH = !this.editor.toolbar._sticky && (this.editor.isBalloon || this.editor.isInline) ? 0 : this.context.get('toolbar.main').offsetHeight;
+		const toolbarH = !this.#$.toolbar.isSticky && (this.#store.mode.isBalloon || this.#store.mode.isInline) ? 0 : this.#context.get('toolbar_main').offsetHeight;
 
-		const { rmt, rmb, rt } = this._getVMargin(tmtw, tmbw, toolbarH, clientSize, rects, isTargetAbs, wwScroll);
+		const { rmt, rmb, rt } = this.#getVMargin(tmtw, tmbw, toolbarH, clientSize, rects, isTextSelection, false);
 		if (rmb + targetH <= 0 || rmt + rt + targetH <= 0) return;
 
-		_w.setTimeout(() => {
-			element.style.visibility = '';
-		}, 0);
+		element.style.visibility = '';
 
 		return true;
-	},
+	}
 
 	/**
-	 * @private
-	 * @this {OffsetThis}
 	 * @description Sets the position of an element relative to the selection range in the editor.
 	 * - This method calculates the top and left offsets for the element, ensuring it
 	 * - does not overflow the editor boundaries and adjusts the arrow positioning accordingly.
@@ -670,7 +652,7 @@ Offset.prototype = {
 	 * @param {number} scrollTop - The vertical scroll offset.
 	 * @param {number} [addTop=0] - Additional top margin adjustment.
 	 */
-	_setOffsetOnRange(isDirTop, rects, element, editorLeft, editorWidth, scrollLeft, scrollTop, addTop = 0) {
+	#setOffsetOnRange(isDirTop, rects, element, editorLeft, editorWidth, scrollLeft, scrollTop, addTop = 0) {
 		const padding = 1;
 		const arrow = /** @type  {HTMLElement} */ (element.querySelector('.se-arrow '));
 		const arrowMargin = Math.round(arrow.offsetWidth / 2);
@@ -684,8 +666,8 @@ Offset.prototype = {
 		const l = absoluteLeft < 0 ? padding : overRight < 0 ? absoluteLeft : absoluteLeft - overRight - padding - 1;
 
 		let resetTop = false;
-		const space = t + (isDirTop ? this.getGlobal(this.editor.frameContext.get('topArea')).top : element.offsetHeight - this.editor.frameContext.get('wysiwyg').offsetHeight);
-		if (!isDirTop && space > 0 && this._getPageBottomSpace() < space) {
+		const space = t + (isDirTop ? this.getGlobal(this.#frameContext.get('topArea')).top : element.offsetHeight - this.#frameContext.get('wysiwyg').offsetHeight);
+		if (!isDirTop && space > 0 && this.#getPageBottomSpace() < space) {
 			isDirTop = true;
 			resetTop = true;
 		} else if (isDirTop && _d.documentElement.offsetTop > space) {
@@ -708,22 +690,18 @@ Offset.prototype = {
 
 		const arrow_left = Math.floor(elW / 2 + (absoluteLeft - l));
 		arrow.style.left = (arrow_left + arrowMargin > element.offsetWidth ? element.offsetWidth - arrowMargin : arrow_left < arrowMargin ? arrowMargin : arrow_left) + 'px';
-	},
+	}
 
 	/**
-	 * @private
-	 * @this {OffsetThis}
 	 * @description Get available space from page bottom
 	 * @returns {number} Available space
 	 */
-	_getPageBottomSpace() {
-		const topArea = this.editor.frameContext.get('topArea');
+	#getPageBottomSpace() {
+		const topArea = this.#frameContext.get('topArea');
 		return _d.documentElement.scrollHeight - (this.getGlobal(topArea).top + topArea.offsetHeight);
-	},
+	}
 
 	/**
-	 * @private
-	 * @this {OffsetThis}
 	 * @description Calculates the vertical margin offsets for the target element relative to the editor frame.
 	 * - This method determines the top and bottom margins based on various conditions such as
 	 * - fullscreen mode, iframe usage, toolbar height, and scroll positions.
@@ -732,67 +710,68 @@ Offset.prototype = {
 	 * @param {number} toolbarH Toolbar height
 	 * @param {{w: number, h: number}} clientSize documentElement.clientWidth, documentElement.clientHeight
 	 * @param {RectsInfo} targetRect Target rect object
-	 * @param {boolean} isTargetAbs Is target absolute position
-	 * @param {OffsetWWScrollInfo} wwScroll WYSIWYG scroll info
-	 * @returns {{rmt:number, rmb:number, rt:number}} Margin values (rmt: top margin, rmb: bottom margin, rt: Toolbar height offset adjustment)
+	 * @param {boolean} isTextSelection Is text selection or Range
+	 * @param {boolean} isToolbarTarget Indicates if the target is a toolbar element
+	 * @returns {{rmt:number, rmb:number, rt:number, tMargin:number, bMargin:number}} Margin values
+	 * - rmt: top margin to frame
+	 * - rmb: bottom margin to frame
+	 * - rt: Toolbar height offset adjustment
+	 * - tMargin: top margin
+	 * - bMargin: bottom margin
 	 */
-	_getVMargin(tmtw, tmbw, toolbarH, clientSize, targetRect, isTargetAbs, wwScroll) {
+	#getVMargin(tmtw, tmbw, toolbarH, clientSize, targetRect, isTextSelection, isToolbarTarget) {
+		const wwRects = this.#$.selection.getRects(this.#frameContext.get('wysiwyg'), 'start').rects;
+
 		let rmt = 0;
 		let rmb = 0;
 		let rt = 0;
-		if (this.editor.frameContext.get('isFullScreen')) {
-			rmt = tmtw - toolbarH;
-			rmb = tmbw;
+		let tMargin = 0;
+		let bMargin = 0;
+
+		const isIframe = this.#frameOptions.get('iframe');
+		tMargin = targetRect.top;
+		bMargin = clientSize.h - targetRect.bottom;
+		const editorOffset = this.getGlobal();
+
+		if (!isTextSelection) {
+			const emt = editorOffset.fixedTop > 0 ? editorOffset.fixedTop : 0;
+			const emb = _w.innerHeight - (editorOffset.fixedTop + editorOffset.height);
+			rt = !isToolbarTarget && (this.#$.toolbar.isSticky || !this.#$.toolbar.isBalloonMode) ? toolbarH : 0;
+			rmt = tMargin - (!isToolbarTarget ? emt : 0) - rt;
+			rmb = bMargin - (emb > 0 ? emb : 0);
 		} else {
-			const isIframe = isTargetAbs && this.editor.frameOptions.get('iframe');
-			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 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) + statusBarH);
-			} else {
-				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) {
-						st = toolbarH;
-						toolbarH = 0;
-					} else {
-						st = wst + toolbarH;
-					}
-				} else if (this.options.get('toolbar_container')) {
-					toolbarH = 0;
+			rt = !isToolbarTarget && !this.#$.toolbar.isSticky && !this.#options.get('toolbar_container') ? toolbarH : 0;
+			const wst = !isIframe ? editorOffset.top - _w.scrollY + rt : 0;
+			const wsb = !isIframe ? this.#store.get('currentViewportHeight') - (editorOffset.top + editorOffset.height - _w.scrollY) : 0;
+			let st = wst;
+			if (toolbarH > wst) {
+				if (this.#$.toolbar.isSticky) {
+					st = toolbarH;
 				} else {
-					st = wst + (this.editor.toolbar._sticky ? toolbarH : 0);
+					st = wst + toolbarH;
 				}
-
-				rmt = targetRect.top - st;
-				rmb = wwScroll.rects.bottom - targetRect.bottom - wsb - statusBarH;
+			} else if (this.#options.get('toolbar_container') && !this.#$.toolbar.isSticky) {
+				toolbarH = 0;
+			} else {
+				st = wst + toolbarH;
 			}
 
+			rmt = targetRect.top - (wwRects.top - st) + toolbarH;
+			rmb = wwRects.bottom - (targetRect.bottom - wsb);
 			// display margin
-			rmt = (rmt > 0 ? tMargin : rmt) - toolbarH;
-			rmb = rmb > 0 ? bMargin : rmb;
+			rmt = rmt > 0 ? rmt : rmt - toolbarH;
 		}
 
 		return {
 			rmt,
 			rmb,
-			rt
+			rt,
+			tMargin,
+			bMargin,
 		};
-	},
+	}
 
 	/**
-	 * @private
-	 * @this {OffsetThis}
 	 * @description Sets the visibility and direction of the arrow element.
 	 * - This method applies the appropriate class (`se-arrow-up` or `se-arrow-down`)
 	 * - based on the specified direction key and adjusts the visibility of the arrow.
@@ -801,7 +780,7 @@ Offset.prototype = {
 	 * - Accepts `'up'` for an upward arrow, `'down'` for a downward arrow,
 	 * - or any other value to hide the arrow.
 	 */
-	_setArrow(arrow, key) {
+	#setArrow(arrow, key) {
 		if (key === 'up') {
 			if (arrow) arrow.style.visibility = '';
 			addClass(arrow, 'se-arrow-up');
@@ -813,11 +792,9 @@ Offset.prototype = {
 		} else {
 			if (arrow) arrow.style.visibility = 'hidden';
 		}
-	},
+	}
 
 	/**
-	 * @private
-	 * @this {OffsetThis}
 	 * @description Retrieves the current window scroll position and viewport size.
 	 * - Returns an object containing the scroll offsets, viewport dimensions, and boundary rects.
 	 * @returns {{
@@ -829,8 +806,7 @@ Offset.prototype = {
 	 *   rects: RectsInfo
 	 * }} An object with scroll and viewport information.
 	 */
-
-	_getWindowScroll() {
+	#getWindowScroll() {
 		const viewPort = getClientSize(_d);
 		return {
 			top: _w.scrollY,
@@ -842,50 +818,11 @@ Offset.prototype = {
 				left: 0,
 				top: 0,
 				right: _w.innerWidth,
-				bottom: _w.innerHeight,
-				noText: true
-			}
+				bottom: this.#store.get('currentViewportHeight') || _w.innerHeight,
+				noText: true,
+			},
 		};
-	},
-
-	/**
-	 * @private
-	 * @this {OffsetThis}
-	 * @description Removes the global scroll event listener from the editor.
-	 * - Resets related scroll tracking properties.
-	 */
-	__removeGlobalEvent() {
-		if (this._scrollEvent) {
-			this._scrollEvent = this.editor.eventManager.removeGlobalEvent(this._scrollEvent);
-			this._scrollY = 0;
-			this._elTop = null;
-		}
-	},
-
-	constructor: Offset
-};
-
-/**
- * @private
- * @this {OffsetThis}
- * @param {HTMLElement} element - The element to check for a specific class name.
- * @param {HTMLElement} e_container - The root container of the element.
- * @param {HTMLElement} target - The target element to position against.
- * @param {HTMLElement} t_container - The root container of the target element.
- */
-function FixedScroll(element, e_container, target, t_container) {
-	const isFixed = /^fixed$/i.test(_w.getComputedStyle(t_container).position);
-	if (!this._isFixed) {
-		if (isFixed) {
-			this.setRelPosition(element, e_container, target, t_container, true);
-		}
-		return;
-	} else if (!isFixed) {
-		this.setRelPosition(element, e_container, target, t_container, true);
-		return;
 	}
-
-	element.style.top = `${this._elTop - (this._scrollY - _w.scrollY - t_container.offsetTop)}px`;
 }
 
 export default Offset;