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

package/src/core/class/offset.js

@@ -2,90 +2,169 @@
  * @fileoverview Offset class
  */
 
-import { getParentElement, isWysiwygFrame, hasClass, addClass, removeClass, getClientSize } from '../../helper/domUtils';
-import { domUtils, numbers } from '../../helper';
+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';
 
-const Offset = function (editor) {
-	this.editor = editor;
-	this.options = editor.options;
-	this.context = editor.context;
+/**
+ * @typedef {Omit<Offset & Partial<__se__EditorInjector>, 'offset'>} OffsetThis
+ */
+
+/**
+ * @typedef {Object} RectsInfo Bounding rectangle information of the selection range.
+ * @property {number} rects.left - The left position of the selection.
+ * @property {number} rects.right - The right position of the selection.
+ * @property {number} rects.top - The top position of the selection.
+ * @property {number} rects.bottom - The bottom position of the selection.
+ * @property {boolean} [rects.noText] - Whether the selection contains text.
+ * @property {number} [rects.width] - The width of the selection.
+ * @property {number} [rects.height] - The height of the selection.
+ */
+
+/**
+ * @typedef {Object} OffsetInfo
+ * @property {number} top - The vertical position of the node relative to the entire document, including iframe offsets.
+ * @property {number} left - The horizontal position of the node relative to the entire document, including iframe offsets.
+ */
+
+/**
+ * @typedef {Object} OffsetLocalInfo
+ * @property {number} top - The vertical position of the node relative to the WYSIWYG editor.
+ * @property {number} left - The horizontal 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.
+ */
+
+/**
+ * @typedef {Object} OffsetGlobalInfo
+ * @property {number} top - The vertical position of the element relative to the entire document.
+ * @property {number} left - The horizontal position of the element relative to the entire document.
+ * @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.
+ */
+
+/**
+ * @typedef {Object} OffsetGlobalScrollInfo
+ * @property {number} top - Total vertical scroll distance
+ * @property {number} left - Total horizontal scroll distance
+ * @property {number} width - Total width including scrollable area
+ * @property {number} height - Total height including scrollable area
+ * @property {number} x - Horizontal offset from the top reference element
+ * @property {number} y - Vertical offset from the top reference element
+ * @property {HTMLElement|Window|null} ohOffsetEl - Element or window used as the vertical scroll reference
+ * @property {HTMLElement|Window|null} owOffsetEl - Element or window used as the horizontal scroll reference
+ * @property {number} oh - Height of the vertical scrollable area (clientHeight)
+ * @property {number} ow - Width of the horizontal scrollable area (clientWidth)
+ * @property {boolean} heightEditorRefer - Indicates if the vertical scroll reference is the editor area
+ * @property {boolean} widthEditorRefer - Indicates if the horizontal scroll reference is the editor area
+ * @property {number} ts - Top position of the height offset element relative to the viewport
+ * @property {number} ls - Left position of the width offset element relative to the viewport
+ */
+
+/**
+ * @typedef {Object} OffsetWWScrollInfo
+ * @property {number} top - The vertical scroll offset inside the WYSIWYG editor.
+ * @property {number} left - The horizontal scroll offset inside the WYSIWYG editor.
+ * @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;
-};
+}
 
 Offset.prototype = {
 	/**
-	 * @description Returns the offset and size of the argument, "target" relative to the editor.
-	 * @param {Node} target Target node
-	 * @returns {{w:number, h:number, t:number, l:number, scrollX:number, scrollY:number}}
+	 * @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.
 	 */
-	getSize(target) {
-		const eventWysiwyg = this.editor.frameContext.get('eventWysiwyg');
+	get(node) {
 		const wFrame = this.editor.frameContext.get('wysiwygFrame');
-		const offset = this.get(target);
-		const frameOffset = this.get(wFrame);
-		const w = target.offsetWidth - 1;
-		const h = target.offsetHeight - 1;
-		const t = offset.top - (this.editor.frameOptions.get('iframe') ? frameOffset.top : 0);
-		const l = offset.left - (this.editor.frameOptions.get('iframe') ? frameOffset.left + (eventWysiwyg.scrollX || eventWysiwyg.scrollLeft || 0) : 0) - wFrame.scrollLeft;
+		const iframe = /iframe/i.test(wFrame?.nodeName);
+		const off = this.getLocal(node);
 
 		return {
-			w,
-			h,
-			t,
-			l,
-			scrollX: eventWysiwyg.scrollX || eventWysiwyg.scrollLeft || 0,
-			scrollY: eventWysiwyg.scrollY || eventWysiwyg.scrollTop || 0
+			left: off.left + (iframe ? wFrame.parentElement.offsetLeft : 0),
+			top: off.top + (iframe ? wFrame.parentElement.offsetTop : 0)
 		};
 	},
 
 	/**
-	 * @description Returns the position of the argument, "this.editor.frameContext.get('wrapper')" to inside the editor.Returns the position of the element in "this.editor.frameContext.get('wrapper')".
-	 * @param {Node} node Target node
-	 * @returns {{top:boolean, left:boolean}}
+	 * @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.
 	 */
-	get(node) {
+	getLocal(node) {
 		let offsetLeft = 0;
 		let offsetTop = 0;
-		let offsetElement = node.nodeType === 3 ? node.parentElement : node;
+		let l = 0;
+		let t = 0;
+		let offsetElement = /** @type {HTMLElement} */ (node.nodeType === 3 ? node.parentElement : node);
 		const wysiwyg = getParentElement(node, isWysiwygFrame.bind(this));
 		const self = offsetElement;
 
 		while (offsetElement && !hasClass(offsetElement, 'se-wrapper') && offsetElement !== wysiwyg) {
 			offsetLeft += offsetElement.offsetLeft - (self !== offsetElement ? offsetElement.scrollLeft : 0);
 			offsetTop += offsetElement.offsetTop + (self !== offsetElement ? offsetElement.scrollTop : 0);
-			offsetElement = offsetElement.offsetParent;
+			offsetElement = /** @type {HTMLElement} */ (offsetElement.offsetParent);
 		}
 
-		const wFrame = this.editor.frameContext.get('wysiwygFrame');
-		const iframe = /iframe/i.test(wFrame?.nodeName);
+		const wwFrame = this.editor.frameContext.get('wysiwygFrame');
+		if (this.editor.frameContext.get('wysiwyg').contains(node)) {
+			l = wwFrame.offsetLeft;
+			t = wwFrame.offsetTop;
+		}
 
+		const eventWysiwyg = this.editor.frameContext.get('eventWysiwyg');
 		return {
-			left: offsetLeft + (iframe ? wFrame.parentElement.offsetLeft : 0),
-			top: offsetTop - (wysiwyg ? wysiwyg.scrollTop : 0) + (iframe ? wFrame.parentElement.offsetTop : 0)
+			left: offsetLeft + l,
+			top: offsetTop + t - (wysiwyg ? wysiwyg.scrollTop : 0),
+			scrollX: eventWysiwyg.scrollX || eventWysiwyg.scrollLeft || 0,
+			scrollY: eventWysiwyg.scrollY || eventWysiwyg.scrollTop || 0
 		};
 	},
 
 	/**
-	 * @description Returns the position of the argument, relative to global document. {left:0, top:0, scroll: 0}
-	 * @param {Element} element Target element
-	 * @returns {{top:boolean, left:boolean}}
+	 * @this {OffsetThis}
+	 * @description Returns the position of the argument relative to the global document.
+	 * @param {?Node=} node Target element.
+	 * @returns {OffsetGlobalInfo} Global position and scroll values.
 	 */
-	getGlobal(element) {
+	getGlobal(node) {
 		const topArea = this.editor.frameContext.get('topArea');
 		const wFrame = this.editor.frameContext.get('wysiwygFrame');
 
 		let isTop = false;
 		let targetAbs = false;
-		if (!element) element = topArea;
-		if (element === topArea) isTop = true;
-		if (!isTop && element.nodeType === 1) {
-			targetAbs = _w.getComputedStyle(element).position === 'absolute';
+		if (!node) node = topArea;
+		if (node === topArea) isTop = true;
+		if (!isTop && isElement(node)) {
+			targetAbs = _w.getComputedStyle(node).position === 'absolute';
 		}
 
+		let element = /** @type {HTMLElement} */ (node);
 		const w = element.offsetWidth;
 		const h = element.offsetHeight;
 		let t = 0,
@@ -98,15 +177,15 @@ Offset.prototype = {
 			l += element.offsetLeft;
 			st += element.scrollTop;
 			sl += element.scrollLeft;
-			element = element.offsetParent;
+			element = /** @type {HTMLElement} */ (element.offsetParent);
 		}
 
-		if (!targetAbs && !isTop && /^iframe$/i.test(wFrame.nodeName) && wFrame.contains(element)) {
+		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 = element.offsetParent;
+				element = /** @type {HTMLElement} */ (element.offsetParent);
 			}
 		}
 
@@ -121,20 +200,22 @@ Offset.prototype = {
 	},
 
 	/**
+	 * @this {OffsetThis}
 	 * @description Gets the current editor-relative scroll offset.
-	 * @param {Element} element Target element
-	 * @returns {{top:boolean, left:boolean, width:boolean, height:boolean}}
+	 * @param {?Node=} node Target element.
+	 * @returns {OffsetGlobalScrollInfo} Global scroll information.
 	 */
-	getGlobalScroll(element) {
+	getGlobalScroll(node) {
 		const topArea = this.editor.frameContext.get('topArea');
 		let isTop = false;
 		let targetAbs = false;
-		if (!element) element = topArea;
-		if (element === topArea) isTop = true;
-		if (!isTop && element.nodeType === 1) {
-			targetAbs = _w.getComputedStyle(element).position === 'absolute';
+		if (!node) node = topArea;
+		if (node === topArea) isTop = true;
+		if (!isTop && isElement(node)) {
+			targetAbs = _w.getComputedStyle(node).position === 'absolute';
 		}
 
+		const element = /** @type {HTMLElement} */ (node);
 		let t = 0,
 			l = 0,
 			h = 0,
@@ -199,7 +280,7 @@ Offset.prototype = {
 			}
 		}
 
-		el = this._shadowRoot?.host;
+		el = /** @type {HTMLElement} */ (this._shadowRoot?.host);
 		if (el) ohOffsetEl = owOffsetEl = topArea;
 		while (el) {
 			t += el.scrollTop;
@@ -236,8 +317,8 @@ Offset.prototype = {
 		const clientSize = getClientSize(this.editor.frameContext.get('_wd'));
 		return {
 			top: t,
-			ts: ts,
 			left: l,
+			ts: ts,
 			ls: ls,
 			width: w,
 			height: h,
@@ -253,12 +334,13 @@ Offset.prototype = {
 	},
 
 	/**
+	 * @this {OffsetThis}
 	 * @description Get the scroll info of the WYSIWYG area.
-	 * @returns {{top:boolean, left:boolean}}
+	 * @returns {OffsetWWScrollInfo} Scroll information within the editor.
 	 */
 	getWWScroll() {
 		const eventWysiwyg = this.editor.frameContext.get('wysiwyg');
-		const rects = this.editor.selection.getRects(eventWysiwyg, 'start').rects;
+		const rects = this.selection.getRects(eventWysiwyg, 'start').rects;
 		const top = eventWysiwyg.scrollY || eventWysiwyg.scrollTop || 0;
 		const height = eventWysiwyg.scrollHeight || 0;
 
@@ -272,6 +354,15 @@ Offset.prototype = {
 		};
 	},
 
+	/**
+	 * @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;
@@ -281,7 +372,7 @@ Offset.prototype = {
 				wy += this._scrollY;
 				break;
 			}
-		} while (!domUtils.hasClass(tCon, 'sun-editor') && (tCon = tCon.parentElement));
+		} while (!hasClass(tCon, 'sun-editor') && (tCon = tCon.parentElement));
 
 		if (!_reload) {
 			this.__removeGlobalEvent();
@@ -302,7 +393,7 @@ Offset.prototype = {
 				element.style.left = tcleft + 'px';
 			}
 		} else {
-			const cw = t_container.offsetWidth;
+			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`;
@@ -317,10 +408,10 @@ Offset.prototype = {
 		let offsetEl = target;
 		while (offsetEl && offsetEl !== e_container) {
 			bt += offsetEl.offsetTop;
-			offsetEl = offsetEl.offsetParent;
+			offsetEl = /** @type {HTMLElement} */ (offsetEl.offsetParent);
 		}
 
-		const menuHeight_bottom = getClientSize(this.editor.frameContext.get('_wd')).h - (containerTop - scrollTop + bt + target.offsetHeight);
+		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;
@@ -344,6 +435,18 @@ Offset.prototype = {
 		}
 	},
 
+	/**
+	 * @this {OffsetThis}
+	 * @description Sets the absolute position of an element
+	 * @param {HTMLElement} element Element to position
+	 * @param {HTMLElement} target Target element
+	 * @param {Object} params Position parameters
+	 * @param {boolean} [params.isWWTarget=false] Whether the target is within the editor's WYSIWYG area
+	 * @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
+	 * @returns {boolean} Success / Failure
+	 */
 	setAbsPosition(element, target, params) {
 		const addOffset = params.addOffset || {
 			left: 0,
@@ -358,14 +461,13 @@ Offset.prototype = {
 		}
 
 		const isWWTarget = this.editor.frameContext.get('wrapper').contains(target) || params.isWWTarget;
-		const isCtrlTarget = domUtils.getParentElement(target, '.se-controller');
+		const isCtrlTarget = getParentElement(target, '.se-controller');
 		const isTargetAbs = isWWTarget && !isCtrlTarget;
 		const clientSize = getClientSize(_d);
 		const wwScroll = isTargetAbs ? this.getWWScroll() : this._getWindowScroll();
-		const targetRect = isCtrlTarget ? target.getBoundingClientRect() : this.editor.selection.getRects(target, 'start').rects;
+		const targetRect = isCtrlTarget ? target.getBoundingClientRect() : this.selection.getRects(target, 'start').rects;
 		const targetOffset = this.getGlobal(target);
-		const arrow = hasClass(element.firstElementChild, 'se-arrow') ? element.firstElementChild : null;
-		const isIframe = isTargetAbs && this.editor.frameOptions.get('iframe');
+		const arrow = /** @type {HTMLElement} */ (hasClass(element.firstElementChild, 'se-arrow') ? element.firstElementChild : null);
 
 		// top ----------------------------------------------------------------------------------------------------
 		const ah = arrow ? arrow.offsetHeight : 0;
@@ -374,46 +476,11 @@ Offset.prototype = {
 		// margin
 		const tmtw = targetRect.top;
 		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;
-		if (this.editor.frameContext.get('isFullScreen')) {
-			rmt = tmtw - toolbarH;
-			rmb = tmbw;
-		} else {
-			const tMargin = targetRect.top;
-			const bMargin = clientSize.h - targetRect.bottom;
-
-			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));
-			} else {
-				const wst = !isTargetAbs && /\d+/.test(this.editor.frameOptions.get('height')) ? this.getGlobal(this.editor.frameContext.get('topArea')).top - _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;
-				}
-
-				rmt = targetRect.top - st;
-				rmb = wwScroll.rects.bottom - targetRect.bottom;
-			}
+		const toolbarH = !this.editor.toolbar._sticky && (this.editor.isBalloon || this.editor.isInline) ? 0 : this.context.get('toolbar.main').offsetHeight;
 
-			// display margin
-			rmt = (rmt > 0 ? tMargin : rmt) - toolbarH;
-			rmb = rmb > 0 ? bMargin : rmb;
-		}
-
-		if (isWWTarget && (rmb + targetH <= 0 || rmt + targetH <= 0)) return;
+		// 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;
 
 		let t = addOffset.top;
 		let y = 0;
@@ -425,7 +492,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;
@@ -518,6 +585,213 @@ Offset.prototype = {
 		return true;
 	},
 
+	/**
+	 * @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.
+	 * - if null, the current selection range is used
+	 * @param {Object} [options={}] Position options
+	 * @param {"bottom"|"top"} [options.position="bottom"] Position ('bottom'|'top')
+	 * @param {number} [options.addTop=0] Additional top offset
+	 * @returns {boolean} Success / Failure
+	 */
+	setRangePosition(element, range, { position, addTop } = {}) {
+		element.style.top = '-10000px';
+		element.style.visibility = 'hidden';
+		element.style.display = 'block';
+
+		let positionTop = position === 'top';
+		range = 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 rects = rectsObj.rects;
+		const scrollLeft = isFullScreen ? 0 : rectsObj.scrollLeft;
+		const scrollTop = isFullScreen ? 0 : rectsObj.scrollTop;
+		const editorWidth = topArea.offsetWidth;
+		const offsets = this.getGlobal(topArea);
+		const editorLeft = offsets.left;
+		const toolbarWidth = element.offsetWidth;
+		const toolbarHeight = element.offsetHeight;
+
+		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);
+		}
+
+		if (toolbarWidth !== element.offsetWidth || toolbarHeight !== element.offsetHeight) {
+			this._setOffsetOnRange(positionTop, rects, element, editorLeft, editorWidth, scrollLeft, scrollTop, addTop);
+		}
+
+		// check margin
+		const isTargetAbs = !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 { rmt, rmb, rt } = this._getVMargin(tmtw, tmbw, toolbarH, clientSize, rects, isTargetAbs, wwScroll);
+		if (rmb + targetH <= 0 || rmt + rt + targetH <= 0) return;
+
+		_w.setTimeout(() => {
+			element.style.visibility = '';
+		}, 0);
+
+		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.
+	 * @param {boolean} isDirTop - Determines whether the element should be positioned above (`true`) or below (`false`) the target.
+	 * @param {RectsInfo} rects - Bounding rectangle information of the selection range.
+	 * @param {HTMLElement} element - The element to be positioned.
+	 * @param {number} editorLeft - The left position of the editor.
+	 * @param {number} editorWidth - The width of the editor.
+	 * @param {number} scrollLeft - The horizontal scroll offset.
+	 * @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) {
+		const padding = 1;
+		const arrow = /** @type  {HTMLElement} */ (element.querySelector('.se-arrow '));
+		const arrowMargin = Math.round(arrow.offsetWidth / 2);
+		const elW = element.offsetWidth;
+		const elH = rects.noText && !isDirTop ? 0 : element.offsetHeight;
+
+		const absoluteLeft = (isDirTop ? rects.left : rects.right) - editorLeft - elW / 2 + scrollLeft;
+		const overRight = absoluteLeft + elW - editorWidth;
+
+		let t = (isDirTop ? rects.top - elH - arrowMargin : rects.bottom + arrowMargin) - (rects.noText ? 0 : addTop) + scrollTop;
+		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) {
+			isDirTop = true;
+			resetTop = true;
+		} else if (isDirTop && _d.documentElement.offsetTop > space) {
+			isDirTop = false;
+			resetTop = true;
+		}
+
+		if (resetTop) t = (isDirTop ? rects.top - elH - arrowMargin : rects.bottom + arrowMargin) - (rects.noText ? 0 : addTop) + scrollTop;
+
+		element.style.left = Math.floor(l) + 'px';
+		element.style.top = Math.floor(t) + 'px';
+
+		if (isDirTop) {
+			removeClass(arrow, 'se-arrow-up');
+			addClass(arrow, 'se-arrow-down');
+		} else {
+			removeClass(arrow, 'se-arrow-down');
+			addClass(arrow, 'se-arrow-up');
+		}
+
+		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');
+		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.
+	 * @param {number} tmtw Top margin to window
+	 * @param {number} tmbw Bottom margin to window
+	 * @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)
+	 */
+	_getVMargin(tmtw, tmbw, toolbarH, clientSize, targetRect, isTargetAbs, wwScroll) {
+		let rmt = 0;
+		let rmb = 0;
+		let rt = 0;
+		if (this.editor.frameContext.get('isFullScreen')) {
+			rmt = tmtw - toolbarH;
+			rmb = tmbw;
+		} 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;
+				} else {
+					st = wst + (this.editor.toolbar._sticky ? toolbarH : 0);
+				}
+
+				rmt = targetRect.top - st;
+				rmb = wwScroll.rects.bottom - targetRect.bottom - wsb - statusBarH;
+			}
+
+			// display margin
+			rmt = (rmt > 0 ? tMargin : rmt) - toolbarH;
+			rmb = rmb > 0 ? bMargin : rmb;
+		}
+
+		return {
+			rmt,
+			rmb,
+			rt
+		};
+	},
+
+	/**
+	 * @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.
+	 * @param {HTMLElement} arrow - The arrow element to be updated.
+	 * @param {string} key - The direction of the arrow. ("up"|"down"|"")
+	 * - Accepts `'up'` for an upward arrow, `'down'` for a downward arrow,
+	 * - or any other value to hide the arrow.
+	 */
 	_setArrow(arrow, key) {
 		if (key === 'up') {
 			if (arrow) arrow.style.visibility = '';
@@ -532,13 +806,29 @@ Offset.prototype = {
 		}
 	},
 
+	/**
+	 * @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 {{
+	 *   top: number,
+	 *   left: number,
+	 *   width: number,
+	 *   height: number,
+	 *   bottom: number,
+	 *   rects: RectsInfo
+	 * }} An object with scroll and viewport information.
+	 */
+
 	_getWindowScroll() {
-		const viewPort = domUtils.getClientSize();
+		const viewPort = getClientSize(_d);
 		return {
 			top: _w.scrollY,
 			left: _w.scrollX,
 			width: viewPort.w,
 			height: viewPort.h,
+			bottom: _w.scrollY + viewPort.h,
 			rects: {
 				left: 0,
 				top: 0,
@@ -549,6 +839,12 @@ Offset.prototype = {
 		};
 	},
 
+	/**
+	 * @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);
@@ -560,6 +856,14 @@ Offset.prototype = {
 	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) {