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

package/src/core/editor.js

@@ -1,12 +1,17 @@
 import { env, converter, dom, numbers } from '../helper';
-import Constructor, { InitOptions, UpdateButton, CreateShortcuts, CreateStatusbar, OPTION_FRAME_FIXED_FLAG, OPTION_FIXED_FLAG } from './section/constructor';
-import { UpdateStatusbarContext } from './section/context';
-import { BASIC_COMMANDS, ACTIVE_EVENT_COMMANDS, SELECT_ALL, DIR_BTN_ACTIVE, SAVE, COPY_FORMAT, FONT_STYLE, PAGE_BREAK } from './section/actives';
+import Constructor, { InitOptions, UpdateButton, CreateShortcuts, CreateStatusbar } from './section/constructor';
+import { OPTION_FRAME_FIXED_FLAG, OPTION_FIXED_FLAG, BaseOptionsMap, FrameOptionsMap } from './config/options';
+import { ContextUtil } from './config/context';
+import { UpdateStatusbarContext, FrameContextUtil } from './config/frameContext';
+import { BASIC_COMMANDS, ACTIVE_EVENT_COMMANDS, SELECT_ALL, DIR_BTN_ACTIVE, SAVE, COPY_FORMAT, FONT_STYLE, PAGE_BREAK } from './base/actives';
 import History from './base/history';
-import EventManager from './base/eventManager';
+import EventManager from './event/eventManager';
 import Events from '../events';
 import DocumentType from './section/documentType';
 
+// util
+import InstanceCheck from './util/instanceCheck';
+
 // class injector
 import ClassInjector from '../editorInjector/_classes';
 
@@ -15,6 +20,8 @@ import Char from './class/char';
 import Component from './class/component';
 import Format from './class/format';
 import HTML from './class/html';
+import Inline from './class/inline';
+import ListFormat from './class/listFormat';
 import Menu from './class/menu';
 import NodeTransform from './class/nodeTransform';
 import Offset from './class/offset';
@@ -28,14 +35,6 @@ const COMMAND_BUTTONS = '.se-menu-list .se-toolbar-btn[data-command]';
 const DISABLE_BUTTONS_CODEVIEW = `${COMMAND_BUTTONS}:not([class~="se-code-view-enabled"]):not([data-type="MORE"])`;
 const DISABLE_BUTTONS_CONTROLLER = `${COMMAND_BUTTONS}:not([class~="se-component-enabled"]):not([data-type="MORE"])`;
 
-/**
- * @typedef {import('./section/constructor').EditorInitOptions} EditorInitOptions_editor
- */
-
-/**
- * @typedef {import('./section/constructor').EditorFrameOptions} EditorFrameOptions_editor
- */
-
 /**
  * @typedef {import('../modules/Controller').ControllerInfo} ControllerInfo_editor
  */
@@ -43,8 +42,8 @@ const DISABLE_BUTTONS_CONTROLLER = `${COMMAND_BUTTONS}:not([class~="se-component
 /**
  * @constructor
  * @description SunEditor constructor function.
- * @param {Array<{target: Element, key: *, options: EditorFrameOptions_editor}>} multiTargets Target element
- * @param {EditorInitOptions_editor} options options
+ * @param {Array<{target: Element, key: *, options: __se__EditorFrameOptions}>} multiTargets Target element
+ * @param {__se__EditorOptions} options options
  */
 function Editor(multiTargets, options) {
 	const _d = multiTargets[0].target.ownerDocument || env._d;
@@ -63,47 +62,75 @@ function Editor(multiTargets, options) {
 	 */
 	this.frameRoots = product.frameRoots;
 
+	/**
+	 * @description Document object
+	 * @type {Document}
+	 */
+	this._d = _d;
+
+	/**
+	 * @description Window object
+	 * @type {Window}
+	 */
+	this._w = _w;
+
+	/**
+	 * @description Controllers carrier
+	 * @type {HTMLElement}
+	 */
+	this.carrierWrapper = product.carrierWrapper;
+
 	/**
 	 * @description Editor context object
 	 * @type {__se__Context}
 	 */
-	this.context = product.context;
+	this.__context = product.context;
 
 	/**
-	 * @description Current focusing frame context
-	 * @type {__se__FrameContext}
+	 * @description Utility object that manages the editor's runtime context.
+	 * Provides methods to get, set, and inspect internal context.
+	 * @type {ContextUtil}
 	 */
-	this.frameContext = new Map();
+	this.context = ContextUtil(this);
 
 	/**
-	 * @description Current focusing frame context options
-	 * @type {__se__FrameOptions}
+	 * @description Current focusing [frame] context
+	 * @type {import('./config/frameContext').FrameContextMap}
 	 */
-	this.frameOptions = new Map();
+	this.__frameContext = new Map();
 
 	/**
-	 * @description Document object
-	 * @type {Document}
+	 * @description Utility object that manages the editor's runtime [frame] context.
+	 * Provides methods to get, set, and inspect internal context.
+	 * @type {FrameContextUtil}
 	 */
-	this._d = _d;
+	this.frameContext = FrameContextUtil(this);
 
 	/**
-	 * @description Window object
-	 * @type {Window}
+	 * @description Current focusing [frame] context options
+	 * @type {__se__FrameOptions}
 	 */
-	this._w = _w;
+	this.__frameOptions = new Map();
 
 	/**
-	 * @description Controllers carrier
-	 * @type {HTMLElement}
+	 * @description Utility object that manages the editor's runtime [frame] options.
+	 * Provides methods to get, set, and inspect internal [frame] options.
+	 * @type {FrameOptionsMap}
 	 */
-	this.carrierWrapper = product.carrierWrapper;
+	this.frameOptions = FrameOptionsMap(this);
 
 	/**
-	 * @description Editor options
+	 * @description Editor row options
 	 * @type {Map<string, *>}
 	 */
-	this.options = product.options;
+	this.__options = product.options;
+
+	/**
+	 * @description Utility object that manages the editor's runtime options.
+	 * Provides methods to get, set, and inspect internal editor options.
+	 * @type {BaseOptionsMap}
+	 */
+	this.options = BaseOptionsMap(this);
 
 	/**
 	 * @description Plugins
@@ -146,6 +173,8 @@ function Editor(multiTargets, options) {
 		codeIndentSize: 2,
 		currentNodes: [],
 		currentNodesMap: [],
+		initViewportHeight: 0,
+		currentViewportHeight: 0,
 		onSelected: false,
 		rootKey: product.rootId,
 		_range: null,
@@ -209,9 +238,9 @@ function Editor(multiTargets, options) {
 	/**
 	 * @description Shoutcuts reverse key array
 	 * - An array of key codes generated with the reverseButtons option, used to reverse the action for a specific key combination.
-	 * @type {Array<string>}
+	 * @type {Set<string>}
 	 */
-	this.reverseKeys = [];
+	this.reverseKeys = new Set();
 
 	/**
 	 * @description A map with the plugin's buttons having an "active" method and the default command buttons with an "active" action.
@@ -265,9 +294,13 @@ function Editor(multiTargets, options) {
 	// ------ base ------
 	/** @description History class instance @type {ReturnType<typeof import('./base/history').default>} */
 	this.history = null;
-	/** @description EventManager class instance @type {import('./base/eventManager').default} */
+	/** @description EventManager class instance @type {import('./event/eventManager').default} */
 	this.eventManager = null;
 
+	//  ----- util -----
+	/** @description iframe-safe instanceof check utility class @type {import('./util/instanceCheck').default} */
+	this.instanceCheck = null;
+
 	// ------ class ------
 	/** @description Toolbar class instance @type {import('./class/toolbar').default} */
 	this.toolbar = null;
@@ -281,6 +314,10 @@ function Editor(multiTargets, options) {
 	this.format = null;
 	/** @description HTML class instance @type {import('./class/html').default} */
 	this.html = null;
+	/** @description Inline format class instance @type {import('./class/inline').default} */
+	this.inline = null;
+	/** @description List format class instance @type {import('./class/listFormat').default} */
+	this.listFormat = null;
 	/** @description Menu class instance @type {import('./class/menu').default} */
 	this.menu = null;
 	/** @description NodeTransform class instance @type {import('./class/nodeTransform').default} */
@@ -311,7 +348,7 @@ function Editor(multiTargets, options) {
 
 	/**
 	 * @description Closest ShadowRoot to editor if found
-	 * @type {ShadowRoot}
+	 * @type {ShadowRoot & { getSelection?: () => Selection }} - Chromium-based browsers (Chrome, Edge, etc.) has a getSelection method on the ShadowRoot
 	 */
 	this._shadowRoot = null;
 
@@ -354,13 +391,13 @@ function Editor(multiTargets, options) {
 
 	/**
 	 * @description List of buttons to run plugins in the toolbar
-	 * @type {Array<HTMLElement>}
+	 * @type {Object<string, Array<HTMLElement>>}
 	 */
 	this._pluginCallButtons = product.pluginCallButtons;
 
 	/**
 	 * @description List of buttons to run plugins in the Sub-Toolbar
-	 * @type {Array<HTMLElement>}
+	 * @type {Object<string, Array<HTMLElement>>|[]}
 	 */
 	this._pluginCallButtons_sub = product.pluginCallButtons_sub;
 
@@ -413,7 +450,7 @@ function Editor(multiTargets, options) {
 
 	/**
 	 * @description plugin retainFormat info Map()
-	 * @type {Map<string, ((...args: *) => *)>}
+	 * @type {Map<string, { key: string, method: (...args: *) => * }>}
 	 */
 	this._MELInfo = null;
 
@@ -454,7 +491,7 @@ function Editor(multiTargets, options) {
 
 	/**
 	 * @description Origin options
-	 * @type {EditorInitOptions_editor}
+	 * @type {__se__EditorOptions}
 	 */
 	this._originOptions = options;
 
@@ -577,6 +614,10 @@ Editor.prototype = {
 				this.html.set(`<${this.options.get('defaultLine')}><br></${this.options.get('defaultLine')}>`);
 				this.focus();
 				this.history.push(false);
+				// document type
+				if (this.frameContext.has('documentType_use_header')) {
+					this.frameContext.get('documentType').reHeader();
+				}
 				break;
 			case 'codeView':
 				this.viewer.codeView(!this.frameContext.get('isCodeView'));
@@ -597,7 +638,7 @@ Editor.prototype = {
 				this.history.redo();
 				break;
 			case 'removeFormat':
-				this.format.removeInlineElement();
+				this.inline.remove();
 				this.focus();
 				break;
 			case 'print':
@@ -684,8 +725,7 @@ Editor.prototype = {
 	 * @returns {boolean}
 	 */
 	isEmpty(fc) {
-		fc = fc || this.frameContext;
-		const wysiwyg = fc.get('wysiwyg');
+		const wysiwyg = (fc || this.frameContext).get('wysiwyg');
 		return dom.check.isZeroWidth(wysiwyg.textContent) && !wysiwyg.querySelector(this.options.get('allowedEmptyTags')) && (wysiwyg.innerText.match(/\n/g) || '').length <= 1;
 	},
 
@@ -707,8 +747,8 @@ Editor.prototype = {
 				if (typeof plugins[k].setDir === 'function') plugins[k].setDir(dir);
 			}
 
-			const toolbarWrapper = this.context.get('toolbar._wrapper');
-			const statusbarWrapper = this.context.get('statusbar._wrapper');
+			const toolbarWrapper = this.context.get('toolbar_wrapper');
+			const statusbarWrapper = this.context.get('statusbar_wrapper');
 			if (rtl) {
 				this.applyFrameRoots((e) => {
 					dom.utils.addClass([e.get('topArea'), e.get('wysiwyg'), e.get('documentTypePageMirror')], 'se-rtl');
@@ -721,9 +761,13 @@ Editor.prototype = {
 				dom.utils.removeClass([this.carrierWrapper, toolbarWrapper, statusbarWrapper], 'se-rtl');
 			}
 
-			const lineNodes = dom.query.getListChildren(fc.get('wysiwyg'), (current) => {
-				return this.format.isLine(current) && !!(current.style.marginRight || current.style.marginLeft || current.style.textAlign);
-			});
+			const lineNodes = dom.query.getListChildren(
+				fc.get('wysiwyg'),
+				(current) => {
+					return this.format.isLine(current) && !!(current.style.marginRight || current.style.marginLeft || current.style.textAlign);
+				},
+				null
+			);
 
 			for (let i = 0, n, l, r; (n = lineNodes[i]); i++) {
 				n = lineNodes[i];
@@ -743,11 +787,11 @@ Editor.prototype = {
 			DIR_BTN_ACTIVE(this, rtl);
 
 			// document type
-			if (fc.has('documentType-use-header')) {
+			if (fc.has('documentType_use_header')) {
 				if (rtl) fc.get('wrapper').appendChild(fc.get('documentTypeInner'));
 				else fc.get('wrapper').insertBefore(fc.get('documentTypeInner'), fc.get('wysiwygFrame'));
 			}
-			if (fc.has('documentType-use-page')) {
+			if (fc.has('documentType_use_page')) {
 				if (rtl) fc.get('wrapper').insertBefore(fc.get('documentTypePage'), fc.get('wysiwygFrame'));
 				else fc.get('wrapper').appendChild(fc.get('documentTypePage'));
 			}
@@ -765,7 +809,7 @@ Editor.prototype = {
 
 	/**
 	 * @description Add or reset option property (Editor is reloaded)
-	 * @param {EditorInitOptions_editor} newOptions Options
+	 * @param {__se__EditorOptions} newOptions Options
 	 */
 	resetOptions(newOptions) {
 		this.viewer.codeView(false);
@@ -815,7 +859,7 @@ Editor.prototype = {
 		const newFrameMap = newO.frameMap;
 		/** --------- [root start] --------- */
 		for (let i = 0, len = newOptionKeys.length, k; i < len; i++) {
-			k = newOptionKeys[i] || null;
+			k = /** @type {keyof import('./config/options').AllBaseOptions} */ (newOptionKeys[i] || null);
 
 			if (newRootKeys.has(k)) {
 				const diff = rootDiff.get(k);
@@ -922,7 +966,7 @@ Editor.prototype = {
 		this._originOptions = _originOptions;
 
 		// --- [toolbar] ---
-		const toolbar = this.context.get('toolbar.main');
+		const toolbar = this.context.get('toolbar_main');
 		// width
 		if (/inline|balloon/i.test(options.get('mode')) && newOptionKeys.includes('toolbar_width')) {
 			toolbar.style.width = options.get('toolbar_width');
@@ -1008,7 +1052,7 @@ Editor.prototype = {
 	 */
 	focusEdge(focusEl) {
 		this._preventBlur = false;
-		if (!focusEl) focusEl = this.frameContext.get('wysiwyg').lastElementChild;
+		focusEl ||= this.frameContext.get('wysiwyg').lastElementChild;
 
 		const fileComponentInfo = this.component.get(focusEl);
 		if (fileComponentInfo) {
@@ -1058,9 +1102,9 @@ Editor.prototype = {
 
 		/** remove element */
 		dom.utils.removeItem(this.carrierWrapper);
-		dom.utils.removeItem(this.context.get('toolbar._wrapper'));
-		dom.utils.removeItem(this.context.get('toolbar.sub._wrapper'));
-		dom.utils.removeItem(this.context.get('statusbar._wrapper'));
+		dom.utils.removeItem(this.context.get('toolbar_wrapper'));
+		dom.utils.removeItem(this.context.get('toolbar_sub_wrapper'));
+		dom.utils.removeItem(this.context.get('statusbar_wrapper'));
 		this.applyFrameRoots((e) => {
 			dom.utils.removeItem(e.get('topArea'));
 			e.get('options').clear();
@@ -1085,7 +1129,7 @@ Editor.prototype = {
 			delete obj[k];
 		}
 
-		obj = ['eventManager', 'char', 'component', 'format', 'html', 'menu', 'nodeTransform', 'offset', 'selection', 'shortcuts', 'toolbar', 'ui', 'viewer'];
+		obj = ['eventManager', 'instanceCheck', 'char', 'component', 'format', 'html', 'inline', 'listFormat', 'menu', 'nodeTransform', 'offset', 'selection', 'shortcuts', 'toolbar', 'ui', 'viewer'];
 		for (let i = 0, len = obj.length, c; i < len; i++) {
 			c = this[obj[i]];
 			for (const k in c) {
@@ -1114,8 +1158,8 @@ Editor.prototype = {
 	 * @param {__se__FrameContext} rt Root target[key] FrameContext
 	 */
 	_setFrameInfo(rt) {
-		this.frameContext = rt;
-		this.frameOptions = rt.get('options');
+		this.frameContext.reset(rt);
+		this.frameOptions.reset(rt.get('options'));
 		rt.set('_editorHeight', rt.get('wysiwygFrame').offsetHeight);
 		this._lineBreaker_t = rt.get('lineBreaker_t');
 		this._lineBreaker_b = rt.get('lineBreaker_b');
@@ -1174,10 +1218,10 @@ Editor.prototype = {
 		if (this.options.get('type') === 'document') {
 			e.set('documentType', new DocumentType(this, e));
 			if (e.get('documentType').useHeader) {
-				e.set('documentType-use-header', true);
+				e.set('documentType_use_header', true);
 			}
 			if (e.get('documentType').usePage) {
-				e.set('documentType-use-page', true);
+				e.set('documentType_use_page', true);
 				e.get('documentTypePageMirror').innerHTML = e.get('wysiwyg').innerHTML;
 			}
 		}
@@ -1191,15 +1235,17 @@ Editor.prototype = {
 	_resourcesStateChange(fc) {
 		this._iframeAutoHeight(fc);
 		this._checkPlaceholder(fc);
-		if (this.options.get('type') === 'document' && fc.get('documentType').usePage) {
+		// document type page
+		if (fc.has('documentType_use_page')) {
 			fc.get('documentTypePageMirror').innerHTML = fc.get('wysiwyg').innerHTML;
+			fc.get('documentType').rePage(true);
 		}
 	},
 
 	/**
 	 * @private
 	 * @description Modify the height value of the iframe when the height of the iframe is automatic.
-	 * @param {__se__FrameContext} fc - Frame context object
+	 * @param {__se__FrameContext|FrameContextUtil} fc - Frame context object
 	 */
 	_iframeAutoHeight(fc) {
 		const autoFrame = fc.get('_iframeAuto');
@@ -1218,7 +1264,7 @@ Editor.prototype = {
 	/**
 	 * @private
 	 * @description Call the "onResizeEditor" event
-	 * @param {__se__FrameContext} fc - Frame context object
+	 * @param {__se__FrameContext|FrameContextUtil} fc - Frame context object
 	 * @param {number} h - Height value
 	 * @param {ResizeObserverEntry} resizeObserverEntry - ResizeObserverEntry object
 	 */
@@ -1235,7 +1281,7 @@ Editor.prototype = {
 		}
 
 		// document type page
-		if (fc.has('documentType-use-page')) {
+		if (fc.has('documentType_use_page')) {
 			fc.get('documentType').resizePage();
 		}
 	},
@@ -1246,7 +1292,7 @@ Editor.prototype = {
 	 * @param {?__se__FrameContext=} fc - Frame context object, If null fc is this.frameContext
 	 */
 	_checkPlaceholder(fc) {
-		fc = fc || this.frameContext;
+		fc ||= /** @type {__se__FrameContext} */ (this.frameContext);
 		const placeholder = fc.get('placeholder');
 
 		if (placeholder) {
@@ -1266,9 +1312,12 @@ Editor.prototype = {
 	/**
 	 * @private
 	 * @description Initializ editor
-	 * @param {EditorInitOptions_editor} options Options
+	 * @param {__se__EditorOptions} options Options
 	 */
 	__editorInit(options) {
+		this.status.initViewportHeight = this._w.visualViewport.height;
+		this.eventManager.__setViewportSize();
+
 		this.applyFrameRoots((e) => {
 			this.__setEditorParams(e);
 		});
@@ -1283,6 +1332,9 @@ Editor.prototype = {
 		this.applyFrameRoots((e) => {
 			this.eventManager._addFrameEvents(e);
 			this._initWysiwygArea(e, e.get('options').get('value'));
+			if (e.get('options').get('iframe') && e.get('options').get('height') === 'auto') {
+				this.__callResizeFunction(e, e.get('wysiwygFrame').offsetHeight, null);
+			}
 		});
 
 		this.eventManager.__eventDoc = null;
@@ -1290,29 +1342,37 @@ Editor.prototype = {
 		this._componentsInfoReset = false;
 		this._checkComponents(true);
 
-		this._w.setTimeout(() => {
-			// toolbar visibility
-			this.context.get('toolbar.main').style.visibility = '';
-			// roots
-			this.applyFrameRoots((e) => {
-				if (typeof this._resourcesStateChange !== 'function') return;
-				// observer
-				if (this.eventManager._wwFrameObserver) this.eventManager._wwFrameObserver.observe(e.get('wysiwygFrame'));
-				if (this.eventManager._toolbarObserver) this.eventManager._toolbarObserver.observe(e.get('_toolbarShadow'));
-				// resource state
-				this._resourcesStateChange(e);
-			});
-			// history reset
-			this.history.reset();
-			// user event
-			this.triggerEvent('onload', {});
-		}, 0);
+		this._w.setTimeout(
+			function () {
+				// Check if instance was destroyed (e.g., in SSR with dynamic imports mistake)
+				if (!this.context) {
+					console.warn('[SUNEDITOR:E_INIT_FAIL] Editor instance was destroyed before initialization completed. Check if destroy() was called.');
+					return;
+				}
+
+				// toolbar visibility
+				this.context.get('toolbar_main').style.visibility = '';
+				// roots
+				this.applyFrameRoots((e) => {
+					// observer
+					if (this.eventManager._wwFrameObserver) this.eventManager._wwFrameObserver.observe(e.get('wysiwygFrame'));
+					if (this.eventManager._toolbarObserver) this.eventManager._toolbarObserver.observe(e.get('_toolbarShadow'));
+					// resource state
+					this._resourcesStateChange(e);
+				});
+				// history reset
+				this.history.reset();
+				// user event
+				this.triggerEvent('onload', {});
+			}.bind(this),
+			0
+		);
 	},
 
 	/**
 	 * @private
 	 * @description Initializ core variable
-	 * @param {EditorInitOptions_editor} options Options
+	 * @param {__se__EditorOptions} options Options
 	 */
 	__init(options) {
 		// file components
@@ -1331,6 +1391,7 @@ Editor.prototype = {
 			['onMouseUp', []],
 			['onScroll', []],
 			['onClick', []],
+			['onBeforeInput', []],
 			['onInput', []],
 			['onKeyDown', []],
 			['onKeyUp', []],
@@ -1397,7 +1458,7 @@ Editor.prototype = {
 			// plugin maintain
 			if (plugin.retainFormat) {
 				const info = plugin.retainFormat();
-				this._MELInfo.set(info.query, info.method);
+				this._MELInfo.set(info.query, { key: plugin.constructor.key, method: info.method });
 			}
 		}
 
@@ -1425,20 +1486,24 @@ Editor.prototype = {
 		delete this._pluginCallButtons;
 		delete this._pluginCallButtons_sub;
 
-		this.__cachingButtons();
+		this.__cachingButtons('all');
 		this.__cachingShortcuts();
 	},
 
 	/**
 	 * @private
 	 * @description Caching basic buttons to use
+	 * @param {string} mode 'all' | 'main' | 'sub'
 	 */
-	__cachingButtons() {
+	__cachingButtons(mode) {
 		const ctx = this.context;
 		this.__setDisabledButtons();
-		this.__saveCommandButtons(this.allCommandButtons, ctx.get('toolbar.buttonTray'));
-		if (this.options.has('_subMode')) {
-			this.__saveCommandButtons(this.subAllCommandButtons, ctx.get('toolbar.sub.buttonTray'));
+
+		if (/all|main/.test(mode)) {
+			this.__saveCommandButtons(this.allCommandButtons, ctx.get('toolbar_buttonTray'));
+		}
+		if (/all|sub/.test(mode) && this.options.has('_subMode')) {
+			this.__saveCommandButtons(this.subAllCommandButtons, ctx.get('toolbar_sub_buttonTray'));
 		}
 	},
 
@@ -1450,12 +1515,12 @@ Editor.prototype = {
 	__setDisabledButtons() {
 		const ctx = this.context;
 
-		this._codeViewDisabledButtons = converter.nodeListToArray(ctx.get('toolbar.buttonTray').querySelectorAll(DISABLE_BUTTONS_CODEVIEW));
-		this._controllerOnDisabledButtons = converter.nodeListToArray(ctx.get('toolbar.buttonTray').querySelectorAll(DISABLE_BUTTONS_CONTROLLER));
+		this._codeViewDisabledButtons = converter.nodeListToArray(ctx.get('toolbar_buttonTray').querySelectorAll(DISABLE_BUTTONS_CODEVIEW));
+		this._controllerOnDisabledButtons = converter.nodeListToArray(ctx.get('toolbar_buttonTray').querySelectorAll(DISABLE_BUTTONS_CONTROLLER));
 
 		if (this.options.has('_subMode')) {
-			this._codeViewDisabledButtons = this._codeViewDisabledButtons.concat(converter.nodeListToArray(ctx.get('toolbar.sub.buttonTray').querySelectorAll(DISABLE_BUTTONS_CODEVIEW)));
-			this._controllerOnDisabledButtons = this._controllerOnDisabledButtons.concat(converter.nodeListToArray(ctx.get('toolbar.sub.buttonTray').querySelectorAll(DISABLE_BUTTONS_CONTROLLER)));
+			this._codeViewDisabledButtons = this._codeViewDisabledButtons.concat(converter.nodeListToArray(ctx.get('toolbar_sub_buttonTray').querySelectorAll(DISABLE_BUTTONS_CODEVIEW)));
+			this._controllerOnDisabledButtons = this._controllerOnDisabledButtons.concat(converter.nodeListToArray(ctx.get('toolbar_sub_buttonTray').querySelectorAll(DISABLE_BUTTONS_CONTROLLER)));
 		}
 	},
 
@@ -1559,12 +1624,6 @@ Editor.prototype = {
 			}
 		}
 
-		// wisywig attributes
-		const attr = frameOptions.get('editableFrameAttributes');
-		for (const k in attr) {
-			e.get('wysiwyg').setAttribute(k, attr[k]);
-		}
-
 		// init, validate
 		if (frameOptions.get('iframe')) {
 			e.set('_ww', e.get('wysiwygFrame').contentWindow);
@@ -1577,6 +1636,12 @@ Editor.prototype = {
 			e.set('_ww', _w);
 			e.set('_wd', this._d);
 		}
+
+		// wisywig attributes
+		const attr = frameOptions.get('editableFrameAttributes');
+		for (const k in attr) {
+			e.get('wysiwyg').setAttribute(k, attr[k]);
+		}
 	},
 
 	/**
@@ -1588,7 +1653,7 @@ Editor.prototype = {
 		this.events = { ...Events, ...this.options.get('events') };
 		this.triggerEvent = async (eventName, eventData) => {
 			// [iframe] wysiwyg is disabled, the event is not called.
-			if (eventData?.frameContext?.get('wysiwyg').getAttribute('contenteditable') === 'false') return false;
+			if (dom.check.isNonEditable(eventData?.frameContext?.get('wysiwyg'))) return false;
 			const eventHandler = this.events[eventName];
 			if (typeof eventHandler === 'function') {
 				return await eventHandler({ editor: this, ...eventData });
@@ -1602,14 +1667,16 @@ Editor.prototype = {
 		// eventManager
 		this.eventManager = new EventManager(this);
 
-		// util classes
+		// util
+		this.instanceCheck = new InstanceCheck(this);
+
+		// main classes
 		this.offset = new Offset(this);
 		this.shortcuts = new Shortcuts(this);
-		// main classes
 		this.toolbar = new Toolbar(this, { keyName: 'toolbar', balloon: this.isBalloon, balloonAlways: this.isBalloonAlways, inline: this.isInline, res: this._responsiveButtons });
 		if (this.options.has('_subMode')) {
 			this.subToolbar = new Toolbar(this, {
-				keyName: 'toolbar.sub',
+				keyName: 'toolbar_sub',
 				balloon: this.isSubBalloon,
 				balloonAlways: this.isSubBalloonAlways,
 				inline: false,
@@ -1621,6 +1688,8 @@ Editor.prototype = {
 		this.nodeTransform = new NodeTransform(this);
 		this.component = new Component(this);
 		this.format = new Format(this);
+		this.inline = new Inline(this);
+		this.listFormat = new ListFormat(this);
 		this.menu = new Menu(this);
 		this.char = new Char(this);
 		this.ui = new UI(this);
@@ -1633,6 +1702,8 @@ Editor.prototype = {
 		ClassInjector.call(this.component, this);
 		ClassInjector.call(this.format, this);
 		ClassInjector.call(this.html, this);
+		ClassInjector.call(this.inline, this);
+		ClassInjector.call(this.listFormat, this);
 		ClassInjector.call(this.menu, this);
 		ClassInjector.call(this.nodeTransform, this);
 		ClassInjector.call(this.offset, this);
@@ -1649,6 +1720,8 @@ Editor.prototype = {
 		delete this.component['component'];
 		delete this.format['format'];
 		delete this.html['html'];
+		delete this.inline['inline'];
+		delete this.listFormat['listFormat'];
 		delete this.menu['menu'];
 		delete this.nodeTransform['nodeTransform'];
 		delete this.offset['offset'];
@@ -1665,7 +1738,7 @@ Editor.prototype = {
 	/**
 	 * @private
 	 * @description Creates the editor instance and initializes components.
-	 * @param {EditorInitOptions_editor} originOptions - The initial editor options.
+	 * @param {__se__EditorOptions} originOptions - The initial editor options.
 	 * @returns {Promise<void>}
 	 */
 	async __Create(originOptions) {
@@ -1696,7 +1769,7 @@ Editor.prototype = {
 			if (e.get('options').get('iframe')) {
 				const iframeLoaded = new Promise((resolve) => {
 					this.eventManager.addEvent(e.get('wysiwygFrame'), 'load', ({ target }) => {
-						this.__setIframeDocument(target, this.options, e.get('options'));
+						this.__setIframeDocument(target, this.__options, e.get('options'));
 						resolve();
 					});
 				});