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

package/src/core/class/ui.js

@@ -55,7 +55,7 @@ UI.prototype = {
 	 * @param {__se__FrameContext|null} fc Frame context
 	 */
 	setEditorStyle(style, fc) {
-		fc = fc || this.editor.frameContext;
+		fc ||= this.frameContext;
 
 		const fo = fc.get('options');
 		fo.set('editorStyle', style);
@@ -105,8 +105,8 @@ UI.prototype = {
 			applyTheme(e.get('wysiwyg'));
 		});
 
-		applyTheme(this.context.get('statusbar._wrapper'));
-		applyTheme(this.context.get('toolbar._wrapper'));
+		applyTheme(this.context.get('statusbar_wrapper'));
+		applyTheme(this.context.get('toolbar_wrapper'));
 	},
 
 	/**
@@ -116,7 +116,7 @@ UI.prototype = {
 	 * @param {string|undefined} rootKey Root key
 	 */
 	readOnly(value, rootKey) {
-		const fc = rootKey ? this.frameRoots.get(rootKey) : this.editor.frameContext;
+		const fc = rootKey ? this.frameRoots.get(rootKey) : this.frameContext;
 
 		fc.set('isReadOnly', !!value);
 		dom.utils.setDisabled(this.editor._controllerOnDisabledButtons, !!value);
@@ -148,7 +148,7 @@ UI.prototype = {
 	 * @param {string|undefined} rootKey Root key
 	 */
 	disable(rootKey) {
-		const fc = rootKey ? this.frameRoots.get(rootKey) : this.editor.frameContext;
+		const fc = rootKey ? this.frameRoots.get(rootKey) : this.frameContext;
 
 		this.toolbar.disable();
 		this._offCurrentController();
@@ -170,7 +170,7 @@ UI.prototype = {
 	 * @param {string|undefined} rootKey Root key
 	 */
 	enable(rootKey) {
-		const fc = rootKey ? this.frameRoots.get(rootKey) : this.editor.frameContext;
+		const fc = rootKey ? this.frameRoots.get(rootKey) : this.frameContext;
 
 		this.toolbar.enable();
 		fc.get('wysiwyg').setAttribute('contenteditable', true);
@@ -189,7 +189,7 @@ UI.prototype = {
 	 * @param {string|undefined} rootKey Root key
 	 */
 	show(rootKey) {
-		const fc = rootKey ? this.frameRoots.get(rootKey) : this.editor.frameContext;
+		const fc = rootKey ? this.frameRoots.get(rootKey) : this.frameContext;
 		const topAreaStyle = fc.get('topArea').style;
 		if (topAreaStyle.display === 'none') topAreaStyle.display = 'block';
 	},
@@ -200,7 +200,7 @@ UI.prototype = {
 	 * @param {string|undefined} rootKey Root key
 	 */
 	hide(rootKey) {
-		const fc = rootKey ? this.frameRoots.get(rootKey) : this.editor.frameContext;
+		const fc = rootKey ? this.frameRoots.get(rootKey) : this.frameContext;
 		fc.get('topArea').style.display = 'none';
 	},
 
@@ -270,7 +270,7 @@ UI.prototype = {
 		if (type) dom.utils.addClass(this.alertModal, `se-alert-${type}`);
 
 		if (this._closeSignal) this._alertInner.addEventListener('click', this._closeListener[1]);
-		if (this._bindClose) this._bindClose = this.eventManager.removeGlobalEvent(this._bindClose);
+		this._bindClose &&= this.eventManager.removeGlobalEvent(this._bindClose);
 		this._bindClose = this.eventManager.addGlobalEvent('keydown', this._closeListener[0]);
 
 		this._alertArea.style.display = 'block';
@@ -286,7 +286,7 @@ UI.prototype = {
 		dom.utils.removeClass(this.alertModal, 'se-alert-*');
 		this._alertArea.style.display = 'none';
 		if (this._closeSignal) this._alertInner.removeEventListener('click', this._closeListener[1]);
-		if (this._bindClose) this._bindClose = this.eventManager.removeGlobalEvent(this._bindClose);
+		this._bindClose &&= this.eventManager.removeGlobalEvent(this._bindClose);
 	},
 
 	/**
@@ -332,7 +332,7 @@ UI.prototype = {
 	 */
 	_visibleControllers(value, lineBreakShow) {
 		const visible = value ? '' : 'hidden';
-		const breakerVisible = lineBreakShow ?? visible ? '' : 'hidden';
+		const breakerVisible = (lineBreakShow ?? visible) ? '' : 'hidden';
 
 		const cont = this.editor.opendControllers;
 		for (let i = 0, c; i < cont.length; i++) {

package/src/core/class/viewer.js

@@ -5,6 +5,8 @@
 import CoreInjector from '../../editorInjector/_core';
 import { dom, env, converter, numbers } from '../../helper';
 
+const { _w, _d } = env;
+
 /**
  * @typedef {Omit<Viewer & Partial<__se__EditorInjector>, 'viewer'>} ViewerThis
  */
@@ -41,7 +43,7 @@ Viewer.prototype = {
 	 * @param {boolean=} value true/false, If undefined toggle the codeView mode.
 	 */
 	codeView(value) {
-		const fc = this.editor.frameContext;
+		const fc = this.frameContext;
 		if (value === undefined) value = !fc.get('isCodeView');
 		if (value === fc.get('isCodeView')) return;
 
@@ -61,7 +63,7 @@ Viewer.prototype = {
 
 			if (fc.get('isFullScreen')) {
 				codeFrame.style.height = '100%';
-			} else if (this.editor.frameOptions.get('height') === 'auto' && !this.options.get('hasCodeMirror')) {
+			} else if (this.frameOptions.get('height') === 'auto' && !this.options.get('hasCodeMirror')) {
 				codeFrame.style.height = codeFrame.scrollHeight > 0 ? codeFrame.scrollHeight + 'px' : 'auto';
 			}
 
@@ -72,8 +74,8 @@ Viewer.prototype = {
 			if (!fc.get('isFullScreen')) {
 				this.editor._notHideToolbar = true;
 				if (this.editor.isBalloon) {
-					this.context.get('toolbar._arrow').style.display = 'none';
-					this.context.get('toolbar.main').style.left = '';
+					this.context.get('toolbar_arrow').style.display = 'none';
+					this.context.get('toolbar_main').style.left = '';
 					this.editor.isInline = this.toolbar._isInline = true;
 					this.editor.isBalloon = this.toolbar._isBalloon = false;
 					this.toolbar._showInline();
@@ -96,12 +98,12 @@ Viewer.prototype = {
 			codeWrapper.style.setProperty('display', 'none', 'important');
 			wysiwygFrame.style.display = 'block';
 
-			if (this.editor.frameOptions.get('height') === 'auto' && !this.options.get('hasCodeMirror')) fc.get('code').style.height = '0px';
+			if (this.frameOptions.get('height') === 'auto' && !this.options.get('hasCodeMirror')) fc.get('code').style.height = '0px';
 
 			if (!fc.get('isFullScreen')) {
 				this.editor._notHideToolbar = false;
 				if (/balloon/.test(this.options.get('mode'))) {
-					this.context.get('toolbar._arrow').style.display = '';
+					this.context.get('toolbar_arrow').style.display = '';
 					this.editor.isInline = this.toolbar._isInline = false;
 					this.editor.isBalloon = this.toolbar._isBalloon = true;
 					this.eventManager._hideToolbar();
@@ -122,7 +124,7 @@ Viewer.prototype = {
 		dom.utils.setDisabled(this.editor._codeViewDisabledButtons, value);
 
 		// document type
-		if (fc.has('documentType-use-header')) {
+		if (fc.has('documentType_use_header')) {
 			if (value) {
 				fc.get('documentTypeInner').style.display = 'none';
 			} else {
@@ -141,20 +143,20 @@ Viewer.prototype = {
 	 * @param {boolean=} value true/false, If undefined toggle the codeView mode.
 	 */
 	fullScreen(value) {
-		const fc = this.editor.frameContext;
+		const fc = this.frameContext;
 		if (value === undefined) value = !fc.get('isFullScreen');
 		if (value === fc.get('isFullScreen')) return;
 
 		fc.set('isFullScreen', value);
 		const topArea = fc.get('topArea');
-		const toolbar = this.context.get('toolbar.main');
+		const toolbar = this.context.get('toolbar_main');
 		const editorArea = fc.get('wrapper');
 		const wysiwygFrame = fc.get('wysiwygFrame');
 		const codeWrapper = fc.get('codeWrapper');
 		const code = fc.get('code');
 		const codeNumbers = fc.get('codeNumbers');
-		const isCodeView = this.editor.frameContext.get('isCodeView');
-		const arrow = this.context.get('toolbar._arrow');
+		const isCodeView = this.frameContext.get('isCodeView');
+		const arrow = this.context.get('toolbar_arrow');
 
 		this.ui._offCurrentController();
 		const wasToolbarHidden = toolbar.style.display === 'none' || (this.editor.isInline && !this.editor.toolbar._inlineToolbarAttr.isShow);
@@ -188,7 +190,7 @@ Viewer.prototype = {
 			topArea.style.width = '100%';
 			topArea.style.maxWidth = '100%';
 			topArea.style.height = '100%';
-			topArea.style.zIndex = '2147483646';
+			topArea.style.zIndex = '2147483639';
 
 			if (fc.get('_stickyDummy').style.display !== 'none' && fc.get('_stickyDummy').style.display !== '') {
 				this.fullScreenSticky = true;
@@ -196,12 +198,12 @@ Viewer.prototype = {
 				dom.utils.removeClass(toolbar, 'se-toolbar-sticky');
 			}
 
-			this.bodyOverflow = this._d.body.style.overflow;
-			this._d.body.style.overflow = 'hidden';
+			this.bodyOverflow = _d.body.style.overflow;
+			_d.body.style.overflow = 'hidden';
 
 			// frame
 			editorArea.style.cssText = toolbar.style.cssText = '';
-			wysiwygFrame.style.cssText = (wysiwygFrame.style.cssText.match(/\s?display(\s+)?:(\s+)?[a-zA-Z]+;/) || [''])[0] + this.editor.frameOptions.get('_defaultStyles').editor + (isCodeView ? 'display: none;' : '');
+			wysiwygFrame.style.cssText = (wysiwygFrame.style.cssText.match(/\s?display(\s+)?:(\s+)?[a-zA-Z]+;/) || [''])[0] + this.frameOptions.get('_defaultStyles').editor + (isCodeView ? 'display: none;' : '');
 
 			// code wrapper
 			codeWrapper.style.cssText = (codeWrapper.style.cssText.match(/\s?display(\s+)?:(\s+)?[a-zA-Z]+;/) || [''])[0] + `display: ${!isCodeView ? 'none' : 'flex'} !important;`;
@@ -216,10 +218,10 @@ Viewer.prototype = {
 			toolbar.style.position = 'relative';
 			toolbar.style.display = 'block';
 
-			this.fullScreenInnerHeight = this._w.innerHeight - toolbar.offsetHeight;
+			this.fullScreenInnerHeight = _w.innerHeight - toolbar.offsetHeight;
 			editorArea.style.height = this.fullScreenInnerHeight - (fc.has('statusbar') ? fc.get('statusbar').offsetHeight : 0) - this.options.get('fullScreenOffset') + 'px';
 
-			if (this.editor.frameOptions.get('iframe') && this.editor.frameOptions.get('height') === 'auto') {
+			if (this.frameOptions.get('iframe') && this.frameOptions.get('height') === 'auto') {
 				editorArea.style.overflow = 'auto';
 				this.editor._iframeAutoHeight(fc);
 			}
@@ -247,9 +249,9 @@ Viewer.prototype = {
 			editorArea.style.cssText = this.editorAreaOriginCssText;
 			topArea.style.cssText = this._originCssText;
 			if (arrow) arrow.style.cssText = this.arrowOriginCssText;
-			this._d.body.style.overflow = this.bodyOverflow;
+			_d.body.style.overflow = this.bodyOverflow;
 
-			if (this.editor.frameOptions.get('height') === 'auto' && !this.options.get('hasCodeMirror')) this._codeViewAutoHeight(fc.get('code'), fc.get('codeNumbers'), true);
+			if (this.frameOptions.get('height') === 'auto' && !this.options.get('hasCodeMirror')) this._codeViewAutoHeight(fc.get('code'), fc.get('codeNumbers'), true);
 
 			if (this.toolbarParent) {
 				this.toolbarParent.appendChild(toolbar);
@@ -295,7 +297,7 @@ Viewer.prototype = {
 	 * @param {boolean=} value true/false, If undefined toggle the codeView mode.
 	 */
 	showBlocks(value) {
-		const fc = this.editor.frameContext;
+		const fc = this.frameContext;
 		if (value === undefined) value = !fc.get('isShowBlocks');
 		fc.set('isShowBlocks', !!value);
 
@@ -316,7 +318,7 @@ Viewer.prototype = {
 	 * @description Set the active class to the button of the toolbar
 	 */
 	_setButtonsActive() {
-		const fc = this.editor.frameContext;
+		const fc = this.frameContext;
 
 		// codeView
 		if (fc.get('isCodeView')) {
@@ -355,12 +357,12 @@ Viewer.prototype = {
 	print() {
 		/** @type {HTMLIFrameElement} */
 		const iframe = dom.utils.createElement('IFRAME', { style: 'display: none;' });
-		this._d.body.appendChild(iframe);
+		_d.body.appendChild(iframe);
 
-		const innerPadding = this._w.getComputedStyle(this.editor.frameContext.get('wysiwyg')).padding;
+		const innerPadding = _w.getComputedStyle(this.frameContext.get('wysiwyg')).padding;
 		const contentHTML = this.options.get('printTemplate') ? this.options.get('printTemplate').replace(/\{\{\s*contents\s*\}\}/i, this.html.get()) : this.html.get();
 		const printDocument = dom.query.getIframeDocument(iframe);
-		const wDoc = this.editor.frameContext.get('_wd');
+		const wDoc = this.frameContext.get('_wd');
 		const rtlClass = this.options.get('_rtl') ? ' se-rtl' : '';
 		const pageCSS = /*html*/ `
 			<style>
@@ -370,12 +372,12 @@ Viewer.prototype = {
 				}
 			</style>`;
 
-		if (this.editor.frameOptions.get('iframe')) {
+		if (this.frameOptions.get('iframe')) {
 			const arrts = this.options.get('printClass')
 				? 'class="' + this.options.get('printClass') + rtlClass + '"'
-				: this.editor.frameOptions.get('iframe_fullPage')
-				? dom.utils.getAttributesToString(wDoc.body, ['contenteditable'])
-				: 'class="' + this.options.get('_editableClass') + rtlClass + '"';
+				: this.frameOptions.get('iframe_fullPage')
+					? dom.utils.getAttributesToString(wDoc.body, ['contenteditable'])
+					: 'class="' + this.options.get('_editableClass') + rtlClass + '"';
 
 			printDocument.write(/*html*/ `
 				<!DOCTYPE html>
@@ -389,8 +391,8 @@ Viewer.prototype = {
 					</body>
 				</html>`);
 		} else {
-			const links = this._d.head.getElementsByTagName('link');
-			const styles = this._d.head.getElementsByTagName('style');
+			const links = _d.head.getElementsByTagName('link');
+			const styles = _d.head.getElementsByTagName('style');
 			let linkHTML = '';
 			for (let i = 0, len = links.length; i < len; i++) {
 				linkHTML += links[i].outerHTML;
@@ -413,7 +415,7 @@ Viewer.prototype = {
 		}
 
 		this.ui.showLoading();
-		this._w.setTimeout(() => {
+		_w.setTimeout(() => {
 			try {
 				iframe.focus();
 				// Edge, Chromium
@@ -448,16 +450,16 @@ Viewer.prototype = {
 		this.ui._offCurrentModal();
 
 		const contentHTML = this.options.get('previewTemplate') ? this.options.get('previewTemplate').replace(/\{\{\s*contents\s*\}\}/i, this.html.get({ withFrame: true })) : this.html.get({ withFrame: true });
-		const windowObject = this._w.open('', '_blank');
-		const wDoc = this.editor.frameContext.get('_wd');
+		const windowObject = _w.open('', '_blank');
+		const wDoc = this.frameContext.get('_wd');
 		const rtlClass = this.options.get('_rtl') ? ' se-rtl' : '';
 
-		if (this.editor.frameOptions.get('iframe')) {
+		if (this.frameOptions.get('iframe')) {
 			const arrts = this.options.get('printClass')
 				? 'class="' + this.options.get('printClass') + rtlClass + '"'
-				: this.editor.frameOptions.get('iframe_fullPage')
-				? dom.utils.getAttributesToString(wDoc.body, ['contenteditable'])
-				: 'class="' + this.options.get('_editableClass') + rtlClass + '"';
+				: this.frameOptions.get('iframe_fullPage')
+					? dom.utils.getAttributesToString(wDoc.body, ['contenteditable'])
+					: 'class="' + this.options.get('_editableClass') + rtlClass + '"';
 
 			windowObject.document.write(/*html*/ `<!DOCTYPE html>
 				<html>
@@ -472,8 +474,8 @@ Viewer.prototype = {
 					</body>
 				</html>`);
 		} else {
-			const links = this._d.head.getElementsByTagName('link');
-			const styles = this._d.head.getElementsByTagName('style');
+			const links = _d.head.getElementsByTagName('link');
+			const styles = _d.head.getElementsByTagName('style');
 			let linkHTML = '';
 			for (let i = 0, len = links.length; i < len; i++) {
 				linkHTML += links[i].outerHTML;
@@ -504,10 +506,9 @@ Viewer.prototype = {
 	 * - Updates the editor's height dynamically when in full-screen mode.
 	 */
 	_resetFullScreenHeight() {
-		if (this.editor.frameContext.get('isFullScreen')) {
-			this.fullScreenInnerHeight +=
-				this._w.innerHeight - this.context.get('toolbar.main').offsetHeight - (this.editor.frameContext.has('statusbar') ? this.editor.frameContext.get('statusbar').offsetHeight : 0) - this.fullScreenInnerHeight;
-			this.editor.frameContext.get('wrapper').style.height = this.fullScreenInnerHeight + 'px';
+		if (this.frameContext.get('isFullScreen')) {
+			this.fullScreenInnerHeight += _w.innerHeight - this.context.get('toolbar_main').offsetHeight - (this.frameContext.has('statusbar') ? this.frameContext.get('statusbar').offsetHeight : 0) - this.fullScreenInnerHeight;
+			this.frameContext.get('wrapper').style.height = this.fullScreenInnerHeight + 'px';
 			return true;
 		}
 	},
@@ -521,7 +522,7 @@ Viewer.prototype = {
 	 * @param {string|undefined} rootKey Root key
 	 */
 	_codeMirrorEditor(key, value, rootKey) {
-		const fo = rootKey ? this.frameRoots.get(rootKey).get('options') : this.editor.frameOptions;
+		const fo = rootKey ? this.frameRoots.get(rootKey).get('options') : this.frameOptions;
 		switch (key) {
 			case 'set':
 				if (fo.has('codeMirror5Editor')) {
@@ -565,7 +566,7 @@ Viewer.prototype = {
 		if (this.options.get('hasCodeMirror')) {
 			this._codeMirrorEditor('set', value, null);
 		} else {
-			this.editor.frameContext.get('code').value = value;
+			this.frameContext.get('code').value = value;
 		}
 	},
 
@@ -578,7 +579,7 @@ Viewer.prototype = {
 		if (this.options.get('hasCodeMirror')) {
 			return this._codeMirrorEditor('get', null, null);
 		} else {
-			return this.editor.frameContext.get('code').value;
+			return this.frameContext.get('code').value;
 		}
 	},
 
@@ -590,8 +591,8 @@ Viewer.prototype = {
 	_setCodeDataToEditor() {
 		const code_html = this._getCodeView();
 
-		if (this.editor.frameOptions.get('iframe_fullPage')) {
-			const wDoc = this.editor.frameContext.get('_wd');
+		if (this.frameOptions.get('iframe_fullPage')) {
+			const wDoc = this.frameContext.get('_wd');
 			const parseDocument = new DOMParser().parseFromString(code_html, 'text/html');
 
 			if (!this.options.get('__allowedScriptTag')) {
@@ -606,8 +607,8 @@ Viewer.prototype = {
 			}
 
 			let headers = parseDocument.head.innerHTML;
-			if (!parseDocument.head.querySelector('link[rel="stylesheet"]') || (this.editor.frameOptions.get('height') === 'auto' && !parseDocument.head.querySelector('style'))) {
-				headers += converter._setIframeStyleLinks(this.editor.frameOptions.get('iframe_cssFileName')) + converter._setAutoHeightStyle(this.editor.frameOptions.get('height'));
+			if (!parseDocument.head.querySelector('link[rel="stylesheet"]') || (this.frameOptions.get('height') === 'auto' && !parseDocument.head.querySelector('style'))) {
+				headers += converter._setIframeStyleLinks(this.frameOptions.get('iframe_cssFileName')) + converter._setAutoHeightStyle(this.frameOptions.get('height'));
 			}
 
 			wDoc.head.innerHTML = headers;
@@ -625,7 +626,7 @@ Viewer.prototype = {
 				}
 			}
 		} else {
-			this.editor.frameContext.get('wysiwyg').innerHTML =
+			this.frameContext.get('wysiwyg').innerHTML =
 				code_html.length > 0
 					? this.html.clean(code_html, { forceFormat: true, whitelist: null, blacklist: null, _freeCodeViewMode: this.options.get('freeCodeViewMode') })
 					: '<' + this.options.get('defaultLine') + '><br></' + this.options.get('defaultLine') + '>';
@@ -638,12 +639,12 @@ Viewer.prototype = {
 	 * @description Convert the data of the WYSIWYG area and put it in the code view area.
 	 */
 	_setEditorDataToCodeView() {
-		const codeContent = this.html._convertToCode(this.editor.frameContext.get('wysiwyg'), false);
+		const codeContent = this.html._convertToCode(this.frameContext.get('wysiwyg'), false);
 		let codeValue = '';
 
-		if (this.editor.frameOptions.get('iframe_fullPage')) {
-			const attrs = dom.utils.getAttributesToString(this.editor.frameContext.get('_wd').body, null);
-			codeValue = '<!DOCTYPE html>\n<html>\n' + this.editor.frameContext.get('_wd').head.outerHTML.replace(/>(?!\n)/g, '>\n') + '<body ' + attrs + '>\n' + codeContent + '</body>\n</html>';
+		if (this.frameOptions.get('iframe_fullPage')) {
+			const attrs = dom.utils.getAttributesToString(this.frameContext.get('_wd').body, null);
+			codeValue = '<!DOCTYPE html>\n<html>\n' + this.frameContext.get('_wd').head.outerHTML.replace(/>(?!\n)/g, '>\n') + '<body ' + attrs + '>\n' + codeContent + '</body>\n</html>';
 		} else {
 			codeValue = codeContent;
 		}

package/src/core/config/context.js

@@ -0,0 +1,122 @@
+/**
+ * ================================================================================================================================
+ * === CONTEXT TYPES : Store
+ * =================================================================================================================================
+ */
+
+/**
+ * ================================================================================================================================
+ * @typedef {Object} ContextStore
+ *
+ * This object stores **global editor-level UI references** for a SunEditor instance.
+ *
+ * - Primarily manages **toolbar, menu tray, and status bar containers**.
+ * - Used by the editor to control **sticky behavior, sub-toolbars, and global layout**.
+ * - Shared across all frames in a multi-frame editor (unlike FrameContextStore which is per-frame).
+ * -----------------
+ *
+ * === Main UI Containers ===
+ * @property {HTMLElement} menuTray - The **top menu tray** that holds buttons, dropdowns, or custom menus.
+ * @property {HTMLElement} toolbar_main - The **main toolbar** element containing editor actions.
+ * @property {HTMLElement} toolbar_buttonTray - The **container for main toolbar buttons**.
+ * @property {HTMLElement} toolbar_arrow - The **arrow indicator** in the toolbar (used for dropdown/tool menu navigation).
+ * @property {HTMLElement} [toolbar_wrapper] - The **wrapper for the main toolbar and editor frame** (groups UI together).
+ *
+ * === Sub-Toolbar (Contextual/Balloon) ===
+ * @property {HTMLElement} [toolbar_sub_main] - The **sub-toolbar** element (used for contextual or balloon toolbars).
+ * @property {HTMLElement} [toolbar_sub_buttonTray] - The **container for sub-toolbar buttons**.
+ * @property {HTMLElement} [toolbar_sub_arrow] - The **arrow indicator** in the sub-toolbar.
+ * @property {HTMLElement} [toolbar_sub_wrapper] - The **wrapper for the sub-toolbar**, containing its structure.
+ *
+ * === Status Bar ===
+ * @property {HTMLElement} [statusbar_wrapper] - The **wrapper for the status bar** (footer area for resize handles, info, etc.).
+ *
+ * === Sticky Mode Helpers ===
+ * @property {HTMLElement} [_stickyDummy] - A **dummy placeholder** used when the toolbar is in sticky mode (to prevent layout shift).
+ * ================================================================================================================================
+ */
+
+/** --+--+--+--+--+--+--+--+--+--+--+--+--+--+--+--+--+--+--+--+--+--+--+--+--+--+--+--+--+--+--+--+--+--+--+--+--+--+--+--+--+--+--+-- */
+
+/**
+ * ================================================================================================================================
+ * === UTILITIES : Manage Context Map
+ * =================================================================================================================================
+ */
+
+/**
+ * @description Creates a context map of commonly accessed DOM elements for the editor.
+ * @param {Element} toolbar - Main toolbar element.
+ * @param {Element|null} toolbarContainer - Container element for the toolbar.
+ * @param {Element} menuTray - Main menu tray element.
+ * @param {Element|null} subbar - Sub-toolbar element.
+ * @param {Element|null} statusbarContainer - Status bar container element.
+ * @returns {__se__Context} - A map of key DOM nodes used throughout the editor.
+ */
+export function CreateContext(toolbar, toolbarContainer, menuTray, subbar, statusbarContainer) {
+	const m = new Map([
+		['menuTray', menuTray],
+		['toolbar_main', toolbar],
+		['toolbar_buttonTray', toolbar.querySelector('.se-btn-tray')],
+		['toolbar_arrow', toolbar.querySelector('.se-arrow')]
+	]);
+
+	if (subbar) {
+		m.set('toolbar_sub_main', subbar);
+		m.set('toolbar_sub_buttonTray', subbar.querySelector('.se-btn-tray'));
+		m.set('toolbar_sub_arrow', subbar.querySelector('.se-arrow'));
+		m.set('toolbar_sub_wrapper', subbar.parentElement.parentElement);
+	}
+
+	if (toolbarContainer) {
+		m.set('toolbar_wrapper', toolbarContainer.querySelector('.sun-editor'));
+		m.set('_stickyDummy', toolbarContainer.querySelector('.se-toolbar-sticky-dummy'));
+	}
+
+	if (statusbarContainer) {
+		m.set('statusbar_wrapper', statusbarContainer.querySelector('.sun-editor'));
+	}
+
+	return /** @type {__se__Context} */ (m);
+}
+
+/**
+ * @typedef {Object} ContextUtil
+ * @property {(k: keyof ContextStore) => HTMLElement|null} get - Get a DOM element from the context by key.
+ * @property {(k: keyof ContextStore, v: HTMLElement) => void} set - Set a DOM element in the context by key.
+ * @property {(k: keyof ContextStore) => boolean} has - Check if a key exists in the context.
+ * @property {(k: keyof ContextStore) => boolean} delete - Delete a key from the context.
+ * @property {() => Object<keyof ContextStore, HTMLElement|null>} [getAll] - Get all DOM elements in the context as an object.
+ * @property {() => void} clear - Clear all elements in the context.
+ */
+
+/**
+ * @description Creates a utility wrapper for editor base options.
+ * - Provides get, set, has, getAll, and setMany methods with internal Map support.
+ * @param {*} editor - The editor instance
+ * @returns {ContextUtil}
+ */
+export function ContextUtil(editor) {
+	const store = editor.__context;
+
+	return {
+		get(k) {
+			return store.get(k);
+		},
+		set(k, v) {
+			return store.set(k, v);
+		},
+		has(k) {
+			return store.has(k);
+		},
+		delete(k) {
+			return store.delete(k);
+		},
+		getAll() {
+			return Object.fromEntries(store.entries());
+		},
+		clear() {
+			store.clear();
+		}
+	};
+}