suneditor 3.0.0-beta.3 → 3.0.0-beta.30

package/src/core/class/selection.js

@@ -3,7 +3,8 @@
  */
 
 import CoreInjector from '../../editorInjector/_core';
-import { dom, unicode, env } from '../../helper';
+import { dom, unicode, env, numbers } from '../../helper';
+const { _w, isTouchDevice } = env;
 
 /**
  * @typedef {Omit<Selection_ & Partial<__se__EditorInjector>, 'selection'>} SelectionThis
@@ -28,6 +29,13 @@ function Selection_(editor) {
 	/** @type {HTMLElement|Text} */
 	this.selectionNode = null;
 	this.__iframeFocus = false;
+	this.__hasScrollParents = false;
+	this._scrollMargin = 0;
+
+	_w.setTimeout(() => {
+		this.__hasScrollParents = this.eventManager?.scrollparents.length > 0;
+		this._scrollMargin = !this.frameContext ? 40 : (numbers.get(_w.getComputedStyle(this.frameContext.get('wysiwyg')).scrollMargin, 0) || 40) + numbers.get(_w.getComputedStyle(this.frameContext.get('wrapper')).paddingBottom, 0);
+	}, 1000);
 }
 
 Selection_.prototype = {
@@ -37,19 +45,16 @@ Selection_.prototype = {
 	 * @returns {Selection}
 	 */
 	get() {
-		const wSelection = this.editor.frameContext.get('_ww').getSelection();
 		let selection = null;
 
-		if (this._shadowRoot) {
-			selection = wSelection.getComposedRanges?.();
-		}
-
-		if (!selection) {
-			selection = wSelection;
+		if (typeof this.editor._shadowRoot?.getSelection === 'function') {
+			selection = this.editor._shadowRoot.getSelection();
+		} else {
+			selection = this.frameContext.get('_ww').getSelection();
 		}
 
 		if (!selection) return null;
-		if (!this.status._range && !this.editor.frameContext.get('wysiwyg').contains(selection.focusNode)) {
+		if (!this.status._range && !this.frameContext.get('wysiwyg').contains(selection.focusNode)) {
 			selection.removeAllRanges();
 			selection.addRange(this._createDefaultRange());
 		}
@@ -64,7 +69,7 @@ Selection_.prototype = {
 	 */
 	isRange(range) {
 		// return /Range/.test(Object.prototype.toString.call(range?.__proto__));
-		return range instanceof Range;
+		return this.instanceCheck.isRange(range);
 	},
 
 	/**
@@ -75,7 +80,7 @@ Selection_.prototype = {
 	getRange() {
 		const range = this.status._range || this._createDefaultRange();
 		const selection = this.get();
-		if (range.collapsed === selection.isCollapsed || !this.editor.frameContext.get('wysiwyg').contains(selection.focusNode)) {
+		if (range.collapsed === selection.isCollapsed || !this.frameContext.get('wysiwyg').contains(selection.focusNode)) {
 			if (this.component.is(range.startContainer)) {
 				const compInfo = this.component.get(range.startContainer);
 				const container = compInfo?.container;
@@ -144,9 +149,11 @@ Selection_.prototype = {
 			eo = eo > 0 ? (ec.nodeType === 1 && !dom.check.isBreak(ec) ? 1 : ec.textContent ? ec.textContent.length : 0) : 0;
 		}
 
-		const range = this.editor.frameContext.get('_wd').createRange();
+		const range = this.frameContext.get('_wd').createRange();
 
 		try {
+			so = Math.min(so, sc.textContent?.length || 0);
+			eo = Math.min(eo, ec.textContent?.length || 0);
 			range.setStart(sc, so);
 			range.setEnd(ec, eo);
 			this.status.hasFocus = true;
@@ -166,7 +173,7 @@ Selection_.prototype = {
 		this.status._range = range;
 		this._rangeInfo(range, this.get());
 
-		if (this.editor.frameOptions.get('iframe')) this.__focus();
+		if (this.frameOptions.get('iframe')) this.__focus();
 
 		return range;
 	},
@@ -218,7 +225,7 @@ Selection_.prototype = {
 	 */
 	getRangeAndAddLine(range, container) {
 		if (this._isNone(range)) {
-			const parent = container?.parentElement || this.editor.frameContext.get('wysiwyg');
+			const parent = container?.parentElement || this.frameContext.get('wysiwyg');
 			const op = dom.utils.createElement(this.options.get('defaultLine'), null, '<br>');
 			parent.insertBefore(op, container && container !== parent ? (!(/** @type {HTMLElement} */ (container).previousElementSibling) ? container : /** @type {HTMLElement} */ (container).nextElementSibling) : parent.firstElementChild);
 			this.setRange(op.firstElementChild, 0, op.firstElementChild, 1);
@@ -233,9 +240,9 @@ Selection_.prototype = {
 	 * @returns {HTMLElement|Text}
 	 */
 	getNode() {
-		if (!this.editor.frameContext.get('wysiwyg').contains(this.selectionNode)) this._init();
+		if (!this.frameContext.get('wysiwyg').contains(this.selectionNode)) this._init();
 		if (!this.selectionNode) {
-			const selectionNode = /** @type {HTMLElement|Text} */ (dom.query.getEdgeChild(this.editor.frameContext.get('wysiwyg').firstChild, (current) => current.childNodes.length === 0 || current.nodeType === 3, false));
+			const selectionNode = /** @type {HTMLElement|Text} */ (dom.query.getEdgeChild(this.frameContext.get('wysiwyg').firstChild, (current) => current.childNodes.length === 0 || current.nodeType === 3, false));
 			if (!selectionNode) {
 				this._init();
 			} else {
@@ -254,7 +261,7 @@ Selection_.prototype = {
 	 * @returns {{rects: RectsInfo_selection, position: "start"|"end", scrollLeft: number, scrollTop: number}}
 	 */
 	getRects(target, position) {
-		const targetAbs = dom.check.isElement(/** @type {Node} */ (target)) ? this._w.getComputedStyle(target).position === 'absolute' : false;
+		const targetAbs = dom.check.isElement(/** @type {Node} */ (target)) ? _w.getComputedStyle(target).position === 'absolute' : false;
 		target = /** @type {Range} */ (!target || dom.check.isText(/** @type {Node} */ (target)) ? this.getRange() : target);
 		const globalScroll = this.offset.getGlobalScroll();
 		let isStartPosition = position === 'start';
@@ -291,7 +298,7 @@ Selection_.prototype = {
 			isStartPosition = true;
 		}
 
-		const iframeRects = /^iframe$/i.test(this.editor.frameContext.get('wysiwygFrame').nodeName) ? this.editor.frameContext.get('wysiwygFrame').getClientRects()[0] : null;
+		const iframeRects = /^iframe$/i.test(this.frameContext.get('wysiwygFrame').nodeName) ? this.frameContext.get('wysiwygFrame').getClientRects()[0] : null;
 		if (!targetAbs && iframeRects) {
 			rects = {
 				left: rects.left + iframeRects.left,
@@ -316,7 +323,7 @@ Selection_.prototype = {
 	 * @returns {{sc: Node, so: number, ec: Node, eo: number}} {sc: startContainer, so: startOffset, ec: endContainer, eo: endOffset}
 	 */
 	getDragEventLocationRange(e) {
-		const wd = this.editor.frameContext.get('_wd');
+		const wd = this.frameContext.get('_wd');
 		let r, sc, so, ec, eo;
 
 		if (wd.caretPositionFromPoint) {
@@ -348,21 +355,117 @@ Selection_.prototype = {
 	 * @param {?Object<string, *>=} scrollOption option of scrollTo
 	 */
 	scrollTo(ref, scrollOption) {
-		if (ref instanceof Selection) {
+		if (this.instanceCheck.isSelection(ref)) {
 			ref = ref.getRangeAt(0);
-		} else if (ref instanceof Node) {
+		} else if (this.instanceCheck.isNode(ref)) {
 			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);
 		}
 
-		const rect = ref.getBoundingClientRect();
-		const isVisible = rect.top >= 0 && rect.bottom <= this.editor.frameContext.get('wysiwygFrame').innerHeight;
+		scrollOption = { behavior: 'smooth', block: 'nearest', inline: 'nearest', ...scrollOption };
+		const el = dom.query.getParentElement(ref.startContainer, (current) => current.nodeType === 1);
+
+		const { frameContext, frameOptions } = this.editor;
+		const ww = frameContext.get('_ww');
+		const wwFrame = frameContext.get('wysiwygFrame');
+		const isIframe = frameOptions.get('iframe');
+		const isAutoHeight = frameOptions.get('height') === 'auto';
+		const initViewportHeight = this.status.initViewportHeight;
+		const viewportHeight = this.status.currentViewportHeight;
+		const scrollY = isAutoHeight ? _w.scrollY : isIframe ? ww.scrollY : wwFrame.scrollTop;
+		const realToolbarHeight = this.context.get('toolbar_main').offsetHeight;
+		const toolbarHeight = this.toolbar._sticky ? realToolbarHeight : 0;
+		const statusbarHeight = frameContext.get('statusbar')?.offsetHeight || 0;
+
+		if (this.__hasScrollParents || (!isIframe && (!isTouchDevice || initViewportHeight - viewportHeight < 150))) {
+			el?.scrollIntoView(scrollOption);
+
+			if (scrollOption?.behavior === 'auto') {
+				if (toolbarHeight && scrollY > _w.scrollY) {
+					_w.scrollBy(0, -toolbarHeight);
+				} else if (isAutoHeight) {
+					_w.scrollBy(0, statusbarHeight);
+				}
+			}
 
-		if (isVisible) return;
+			return;
+		}
 
-		const el = dom.query.getParentElement(ref.startContainer, (current) => current.nodeType === 1);
-		el?.scrollIntoView?.(scrollOption || this.options.get('scrollToOptions'));
+		// --- When there is no upper scroll and it is an iframe ---
+		const PADDING = this._scrollMargin;
+		const viewHeight = isAutoHeight ? viewportHeight : wwFrame.offsetHeight;
+		const elH = el.offsetHeight || 0;
+
+		const behavior = scrollOption?.behavior;
+		if (isAutoHeight) {
+			if (isIframe) {
+				const rect = this.getRects(ref, 'end').rects;
+				const topMargin = rect.top + elH - toolbarHeight;
+				const bottomMargin = viewHeight - PADDING - (rect.top + elH);
+				if (topMargin >= 0 && bottomMargin >= 0) return;
+
+				const newScrollTop = scrollY - (topMargin < 0 ? -(topMargin - PADDING) : bottomMargin);
+				_w.scrollTo({
+					top: newScrollTop,
+					behavior
+				});
+			} else {
+				const rect = this.offset.getGlobal(el);
+				const scrollMargin = viewHeight + scrollY - rect.top - elH;
+
+				if (scrollMargin - PADDING > 0 && viewHeight > scrollMargin + PADDING + toolbarHeight) return;
+
+				const newScrollTop = scrollMargin <= PADDING ? scrollY - scrollMargin + PADDING + statusbarHeight : scrollY - scrollMargin + (viewHeight - elH - PADDING);
+				_w.scrollTo({
+					top: newScrollTop,
+					behavior
+				});
+			}
+		} else {
+			// local scroll
+			const { top } = this.offset.getLocal(el);
+
+			const keepLocalScroll = top - PADDING > 0 && top + PADDING <= viewHeight;
+			const rectScroll = top - PADDING > 0 ? top + PADDING - viewHeight : top - (toolbarHeight + elH);
+			let newScrollTop = scrollY + rectScroll;
+
+			// frame scroll
+			const gy = _w.scrollY;
+			const globalRect = this.offset.getGlobal();
+			const topMargin = gy - globalRect.top + realToolbarHeight;
+			const bottomMargin = globalRect.top + globalRect.height - (gy + viewportHeight) + realToolbarHeight;
+
+			// set frame scroll
+			if (topMargin > 0) {
+				const newFrameY = (keepLocalScroll ? top : top + scrollY - newScrollTop) - elH - PADDING - topMargin;
+				if (newFrameY < 0) {
+					newScrollTop += realToolbarHeight;
+					_w.scrollTo({
+						top: gy + newFrameY,
+						behavior: 'smooth'
+					});
+				}
+			}
+			if (bottomMargin > 0) {
+				const newFrameY = (keepLocalScroll ? top : top + scrollY - newScrollTop) + elH + PADDING - (globalRect.height - bottomMargin);
+				if (newFrameY > 0) {
+					newScrollTop += statusbarHeight;
+					_w.scrollTo({
+						top: gy + newFrameY,
+						behavior: 'smooth'
+					});
+				}
+			}
+
+			// set local scroll
+			if (!keepLocalScroll) {
+				(isIframe ? ww : wwFrame).scrollTo({
+					top: newScrollTop,
+					behavior
+				});
+			}
+		}
 	},
 
 	/**
@@ -389,8 +492,8 @@ Selection_.prototype = {
 	 * @returns {Range}
 	 */
 	_createDefaultRange() {
-		const wysiwyg = this.editor.frameContext.get('wysiwyg');
-		const range = this.editor.frameContext.get('_wd').createRange();
+		const wysiwyg = this.frameContext.get('wysiwyg');
+		const range = this.frameContext.get('_wd').createRange();
 
 		let firstFormat = wysiwyg.firstElementChild;
 		let focusEl = null;
@@ -439,7 +542,7 @@ Selection_.prototype = {
 	 * @description Saving the range object and the currently selected node of editor
 	 */
 	_init() {
-		const activeEl = this.editor.frameContext.get('_wd').activeElement;
+		const activeEl = this.frameContext.get('_wd').activeElement;
 		if (dom.check.isInputElement(activeEl)) {
 			this.selectionNode = activeEl;
 			return activeEl;
@@ -471,10 +574,10 @@ Selection_.prototype = {
 			if (caption) {
 				caption.focus();
 			} else {
-				this.editor.frameContext.get('wysiwyg').focus();
+				this.frameContext.get('wysiwyg').focus();
 			}
 		} finally {
-			env._w.setTimeout(() => (this.__iframeFocus = false), 0);
+			_w.setTimeout(() => (this.__iframeFocus = false), 0);
 		}
 	},
 
@@ -525,7 +628,7 @@ Selection_.prototype = {
 		}
 
 		// startContainer
-		tempCon = dom.check.isWysiwygFrame(startCon) ? this.editor.frameContext.get('wysiwyg').firstChild : startCon;
+		tempCon = dom.check.isWysiwygFrame(startCon) ? this.frameContext.get('wysiwyg').firstChild : startCon;
 		tempOffset = startOff;
 
 		if (dom.check.isBreak(tempCon) || (tempCon.nodeType === 1 && tempCon.childNodes.length > 0)) {
@@ -541,7 +644,7 @@ Selection_.prototype = {
 
 				let format = this.format.getLine(tempCon, null);
 				if (format === this.format.getBlock(format, null)) {
-					tempCon = tempCon || tempConCache;
+					tempCon ||= tempConCache;
 					format = dom.utils.createElement(dom.query.getParentElement(tempCon, dom.check.isTableCell) ? 'DIV' : this.options.get('defaultLine'));
 					tempCon.parentNode.insertBefore(format, tempCon);
 					if (tempCon !== tempConCache) format.appendChild(tempCon);
@@ -566,7 +669,7 @@ Selection_.prototype = {
 		startOff = tempOffset;
 
 		// endContainer
-		tempCon = dom.check.isWysiwygFrame(endCon) ? this.editor.frameContext.get('wysiwyg').lastChild : endCon;
+		tempCon = dom.check.isWysiwygFrame(endCon) ? this.frameContext.get('wysiwyg').lastChild : endCon;
 		tempOffset = endOff;
 
 		if (dom.check.isBreak(tempCon) || (tempCon.nodeType === 1 && tempCon.childNodes.length > 0)) {

package/src/core/class/toolbar.js

@@ -18,18 +18,31 @@ const { _w } = env;
  * @description Toolbar class
  * @param {__se__EditorCore} editor - The root editor instance
  * @param {Object} options - toolbar options
- * @param {String} options.keyName - toolbar key name
- * @param {Boolean} options.balloon - balloon toolbar
- * @param {Boolean} options.inline - inline toolbar
- * @param {Boolean} options.balloonAlways - balloon toolbar always show
+ * @param {"toolbar"|"toolbar_sub"} options.keyName - toolbar key name
+ * @param {boolean} options.balloon - balloon toolbar
+ * @param {boolean} options.inline - inline toolbar
+ * @param {boolean} options.balloonAlways - balloon toolbar always show
  * @param {Array<Node>} options.res - responsive toolbar button list
  */
 function Toolbar(editor, { keyName, balloon, inline, balloonAlways, res }) {
 	CoreInjector.call(this, editor);
 
 	// members
-	this.keyName = keyName;
-	this.isSub = /sub/.test(keyName);
+	this.isSub = keyName === 'toolbar_sub';
+
+	/**
+	 * @type {Object}
+	 * @description Key names for the toolbar elements.
+	 * @property {"toolbar_sub_main"|"toolbar_main"} main - Main toolbar key name
+	 * @property {"toolbar_sub_buttonTray"|"toolbar_buttonTray"} buttonTray - Button tray key name
+	 * @property {"toolbar_sub_width"|"toolbar_width"} width - Toolbar width key name
+	 */
+	this.keyName = {
+		main: this.isSub ? 'toolbar_sub_main' : 'toolbar_main',
+		buttonTray: this.isSub ? 'toolbar_sub_buttonTray' : 'toolbar_buttonTray',
+		width: this.isSub ? 'toolbar_sub_width' : 'toolbar_width'
+	};
+
 	this.currentMoreLayerActiveButton = null;
 	this._isBalloon = balloon;
 	this._isInline = inline;
@@ -64,7 +77,7 @@ Toolbar.prototype = {
 		this._moreLayerOff();
 		this.menu.dropdownOff();
 		this.menu.containerOff();
-		dom.utils.setDisabled(this.context.get(this.keyName + '.buttonTray').querySelectorAll('.se-menu-list .se-toolbar-btn[data-type]'), true);
+		dom.utils.setDisabled(this.context.get(this.keyName.buttonTray).querySelectorAll('.se-menu-list .se-toolbar-btn[data-type]'), true);
 	},
 
 	/**
@@ -72,7 +85,7 @@ Toolbar.prototype = {
 	 * @description Enable the toolbar
 	 */
 	enable() {
-		dom.utils.setDisabled(this.context.get(this.keyName + '.buttonTray').querySelectorAll('.se-menu-list .se-toolbar-btn[data-type]'), false);
+		dom.utils.setDisabled(this.context.get(this.keyName.buttonTray).querySelectorAll('.se-menu-list .se-toolbar-btn[data-type]'), false);
 	},
 
 	/**
@@ -85,8 +98,8 @@ Toolbar.prototype = {
 		} else if (this._isBalloon) {
 			this._showBalloon();
 		} else {
-			this.context.get(this.keyName + '.main').style.display = '';
-			if (!this.isSub) this.editor.frameContext.get('_stickyDummy').style.display = '';
+			this.context.get(this.keyName.main).style.display = '';
+			if (!this.isSub) this.frameContext.get('_stickyDummy').style.display = '';
 		}
 
 		if (!this.isSub) this.resetResponsiveToolbar();
@@ -98,12 +111,12 @@ Toolbar.prototype = {
 	 */
 	hide() {
 		if (this._isInline) {
-			this.context.get(this.keyName + '.main').style.display = 'none';
-			this.context.get(this.keyName + '.main').style.top = '0px';
+			this.context.get(this.keyName.main).style.display = 'none';
+			this.context.get(this.keyName.main).style.top = '0px';
 			this._inlineToolbarAttr.isShow = false;
 		} else {
-			this.context.get(this.keyName + '.main').style.display = 'none';
-			if (!this.isSub) this.editor.frameContext.get('_stickyDummy').style.display = 'none';
+			this.context.get(this.keyName.main).style.display = 'none';
+			if (!this.isSub) this.frameContext.get('_stickyDummy').style.display = 'none';
 			if (this._isBalloon) {
 				this._balloonOffset = {
 					top: 0,
@@ -123,10 +136,10 @@ Toolbar.prototype = {
 		const responsiveSize = this._rButtonsize;
 		if (responsiveSize) {
 			let w = 0;
-			if (((this._isBalloon || this._isInline) && this.options.get('toolbar_width') === 'auto') || (this.editor.isSubBalloon && this.options.get('toolbar.sub_width') === 'auto')) {
-				w = this.editor.frameContext.get('topArea').offsetWidth;
+			if (((this._isBalloon || this._isInline) && this.options.get('toolbar_width') === 'auto') || (this.editor.isSubBalloon && this.options.get('toolbar_sub_width') === 'auto')) {
+				w = this.frameContext.get('topArea').offsetWidth;
 			} else {
-				w = this.context.get(this.keyName + '.main').offsetWidth;
+				w = this.context.get(this.keyName.main).offsetWidth;
 			}
 
 			let responsiveWidth = 'default';
@@ -156,33 +169,40 @@ Toolbar.prototype = {
 		this.menu.dropdownOff();
 		this.menu.containerOff();
 
-		const { options, icons, lang, isSub } = this;
-		const newToolbar = CreateToolBar(buttonList, this.plugins, options, icons, lang, true);
+		const { icons, lang } = this;
+		const newToolbar = CreateToolBar(buttonList, this.plugins, this.editor.__options, icons, lang, true);
 
 		newToolbar.updateButtons.forEach((v) => UpdateButton(v.button, v.plugin, this.icons, this.lang));
 
-		let cmdButtons;
-		if (isSub) cmdButtons = this.editor.subAllCommandButtons = new Map();
-		else cmdButtons = this.editor.allCommandButtons = new Map();
+		this.context.get(this.keyName.main).replaceChild(newToolbar.buttonTray, this.context.get(this.keyName.buttonTray));
+		this.context.set(this.keyName.buttonTray, newToolbar.buttonTray);
+
+		this._resetButtonInfo();
+
+		this.triggerEvent('onSetToolbarButtons', { buttonTray: newToolbar.buttonTray, frameContext: this.frameContext });
+	},
+
+	/**
+	 * @private
+	 * @this {ToolbarThis}
+	 * @description Reset the common buttons info.
+	 */
+	_resetButtonInfo() {
+		this.editor.allCommandButtons = new Map();
+		this.editor.subAllCommandButtons = new Map();
 		this.editor.commandTargets = new Map();
 		this.editor.shortcutsKeyMap = new Map();
-		this.editor.__saveCommandButtons(cmdButtons, newToolbar.buttonTray);
-		this.editor.__cachingShortcuts();
-
-		this.context.get(this.keyName + '.main').replaceChild(newToolbar.buttonTray, this.context.get(this.keyName + '.buttonTray'));
-		this.context.set(this.keyName + '.buttonTray', newToolbar.buttonTray);
 
-		this.editor.__setDisabledButtons();
+		this.editor.__cachingButtons(this.isSub ? 'sub' : 'main');
+		this.editor.__cachingShortcuts();
 
-		this.history.resetButtons(this.editor.frameContext.get('key'), null);
+		this.history.resetButtons(this.frameContext.get('key'), null);
 		this._resetSticky();
 
 		this.editor.effectNode = null;
 		this.viewer._setButtonsActive();
 		if (this.status.hasFocus) this.eventManager.applyTagEffect();
-		if (this.editor.frameContext.get('isReadOnly')) this.ui.setControllerOnDisabledButtons(true);
-
-		this.triggerEvent('onSetToolbarButtons', { buttonTray: newToolbar.buttonTray, frameContext: this.editor.frameContext });
+		if (this.frameContext.get('isReadOnly')) this.ui.setControllerOnDisabledButtons(true);
 	},
 
 	/**
@@ -191,17 +211,17 @@ Toolbar.prototype = {
 	 * @description Reset the sticky toolbar position based on the editor state.
 	 */
 	_resetSticky() {
-		const wrapper = this.editor.frameContext.get('wrapper');
+		const wrapper = this.frameContext.get('wrapper');
 		if (!wrapper) return;
 
-		const toolbar = this.context.get(this.keyName + '.main');
-		if (this.editor.frameContext.get('isFullScreen') || toolbar.offsetWidth === 0 || this.options.get('toolbar_sticky') < 0) return;
+		const toolbar = this.context.get(this.keyName.main);
+		if (this.frameContext.get('isFullScreen') || toolbar.offsetWidth === 0 || this.options.get('toolbar_sticky') < 0) return;
 
 		const currentScrollY = this._isViewPortSize ? _w.visualViewport.pageTop : _w.scrollY;
 
-		const minHeight = this.editor.frameContext.get('_minHeight');
+		const minHeight = this.frameContext.get('_minHeight');
 		const editorHeight = wrapper.offsetHeight;
-		const editorOffset = this.offset.getGlobal(this.editor.frameContext.get('topArea'));
+		const editorOffset = this.offset.getGlobal(this.frameContext.get('topArea'));
 		const y = currentScrollY + this.options.get('toolbar_sticky');
 		const t = (this._isBalloon || this._isInline ? editorOffset.top : this.offset.getGlobal(this.options.get('toolbar_container')).top) - (this._isInline ? toolbar.offsetHeight : 0);
 		const inlineOffset = 1;
@@ -225,10 +245,10 @@ Toolbar.prototype = {
 	 * @description Enable sticky toolbar mode and adjust position.
 	 */
 	_onSticky(inlineOffset) {
-		const toolbar = this.context.get(this.keyName + '.main');
+		const toolbar = this.context.get(this.keyName.main);
 
 		if (!this._isInline) {
-			const stickyDummy = !this.options.get('toolbar_container') ? this.editor.frameContext.get('_stickyDummy') : this.context.get('_stickyDummy');
+			const stickyDummy = !this.options.get('toolbar_container') ? this.frameContext.get('_stickyDummy') : this.context.get('_stickyDummy');
 			stickyDummy.style.height = toolbar.offsetHeight + 'px';
 			stickyDummy.style.display = 'block';
 		}
@@ -259,13 +279,13 @@ Toolbar.prototype = {
 	 * @description Disable sticky toolbar mode.
 	 */
 	_offSticky() {
-		const stickyDummy = !this.options.get('toolbar_container') ? this.editor.frameContext.get('_stickyDummy') : this.context.get('_stickyDummy');
+		const stickyDummy = !this.options.get('toolbar_container') ? this.frameContext.get('_stickyDummy') : this.context.get('_stickyDummy');
 		stickyDummy.style.display = 'none';
 
-		const toolbar = this.context.get(this.keyName + '.main');
+		const toolbar = this.context.get(this.keyName.main);
 		toolbar.style.top = this._isInline ? this._inlineToolbarAttr.top : '';
 		toolbar.style.width = this._isInline ? this._inlineToolbarAttr.width : '';
-		this.editor.frameContext.get('wrapper').style.marginTop = '';
+		this.frameContext.get('wrapper').style.marginTop = '';
 
 		dom.utils.removeClass(toolbar, 'se-toolbar-sticky');
 		this._sticky = false;
@@ -312,7 +332,7 @@ Toolbar.prototype = {
 		if (this.isSub) this.resetResponsiveToolbar();
 
 		const range = rangeObj || this.selection.getRange();
-		const toolbar = this.context.get(this.keyName + '.main');
+		const toolbar = this.context.get(this.keyName.main);
 		const selection = this.selection.get();
 
 		let isDirTop;
@@ -321,13 +341,13 @@ Toolbar.prototype = {
 		} else if (selection.focusNode === selection.anchorNode) {
 			isDirTop = selection.focusOffset < selection.anchorOffset;
 		} else {
-			const childNodes = dom.query.getListChildNodes(range.commonAncestorContainer, null);
+			const childNodes = dom.query.getListChildNodes(range.commonAncestorContainer, null, null);
 			isDirTop = dom.utils.getArrayIndex(childNodes, selection.focusNode) < dom.utils.getArrayIndex(childNodes, selection.anchorNode);
 		}
 
 		this._setBalloonOffset(isDirTop, range);
 
-		this.triggerEvent('onShowToolbar', { toolbar, mode: 'balloon', frameContext: this.editor.frameContext });
+		this.triggerEvent('onShowToolbar', { toolbar, mode: 'balloon', frameContext: this.frameContext });
 	},
 
 	/**
@@ -338,8 +358,8 @@ Toolbar.prototype = {
 	 * @param {Range} [range] - Selection range
 	 */
 	_setBalloonOffset(positionTop, range) {
-		const toolbar = this.context.get(this.keyName + '.main');
-		const topArea = this.editor.frameContext.get('topArea');
+		const toolbar = this.context.get(this.keyName.main);
+		const topArea = this.frameContext.get('topArea');
 		const offsets = this.offset.getGlobal(topArea);
 		const stickyTop = offsets.top;
 
@@ -355,7 +375,7 @@ Toolbar.prototype = {
 			let left = container.offsetLeft;
 			let top = container.offsetTop;
 
-			while (!container.parentElement.contains(editorParent) || !/^(BODY|HTML)$/i.test(container.parentElement.nodeName)) {
+			while (!container.parentElement.contains(editorParent) && !/^(BODY|HTML)$/i.test(container.parentElement.nodeName)) {
 				container = container.offsetParent;
 				left += container.offsetLeft;
 				top += container.offsetTop;
@@ -381,14 +401,14 @@ Toolbar.prototype = {
 	_showInline() {
 		if (!this._isInline) return;
 
-		const toolbar = this.context.get(this.keyName + '.main');
+		const toolbar = this.context.get(this.keyName.main);
 		toolbar.style.visibility = 'hidden';
 		this._offSticky();
 
 		toolbar.style.display = 'block';
 		toolbar.style.top = '0px';
-		this._inlineToolbarAttr.width = toolbar.style.width = this.options.get(this.keyName + '_width');
-		this._inlineToolbarAttr.top = toolbar.style.top = -1 + (this.offset.getGlobal(this.editor.frameContext.get('topArea')).top - this.offset.getGlobal(toolbar).top - toolbar.offsetHeight) + 'px';
+		this._inlineToolbarAttr.width = toolbar.style.width = this.options.get(this.keyName.width);
+		this._inlineToolbarAttr.top = toolbar.style.top = -1 + (this.offset.getGlobal(this.frameContext.get('topArea')).top - this.offset.getGlobal(toolbar).top - toolbar.offsetHeight) + 'px';
 
 		this._resetSticky();
 		this._inlineToolbarAttr.isShow = true;
@@ -418,7 +438,8 @@ Toolbar.prototype = {
 	 */
 	_moreLayerOff() {
 		if (this.currentMoreLayerActiveButton) {
-			const layer = this.context.get(this.keyName + '.main').querySelector('.' + this.currentMoreLayerActiveButton.getAttribute('data-command'));
+			/** @type {HTMLElement} */
+			const layer = this.context.get(this.keyName.main).querySelector('.' + this.currentMoreLayerActiveButton.getAttribute('data-command'));
 			layer.style.display = 'none';
 			dom.utils.removeClass(this.currentMoreLayerActiveButton, 'on');
 			this.currentMoreLayerActiveButton = null;