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

package/src/core/editor.js

@@ -1,10 +1,11 @@
-import { env, converter, domUtils, numbers } from '../helper';
-import Constructor, { InitOptions, UpdateButton, CreateShortcuts, CreateStatusbar, RO_UNAVAILABD } from './section/constructor';
+import { env, converter, dom, numbers } from '../helper';
+import Constructor, { InitOptions, UpdateButton, CreateShortcuts, CreateStatusbar, 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 } from './section/actives';
+import { BASIC_COMMANDS, ACTIVE_EVENT_COMMANDS, SELECT_ALL, DIR_BTN_ACTIVE, SAVE, COPY_FORMAT, FONT_STYLE, PAGE_BREAK } from './section/actives';
 import History from './base/history';
 import EventManager from './base/eventManager';
-import Events from './base/events';
+import Events from '../events';
+import DocumentType from './section/documentType';
 
 // class injector
 import ClassInjector from '../editorInjector/_classes';
@@ -16,11 +17,11 @@ import Format from './class/format';
 import HTML from './class/html';
 import Menu from './class/menu';
 import NodeTransform from './class/nodeTransform';
-import Notice from './class/notice';
 import Offset from './class/offset';
-import Selection from './class/selection';
+import Selection_ from './class/selection';
 import Shortcuts from './class/shortcuts';
 import Toolbar from './class/toolbar';
+import UI from './class/ui';
 import Viewer from './class/viewer';
 
 const COMMAND_BUTTONS = '.se-menu-list .se-toolbar-btn[data-command]';
@@ -28,24 +29,57 @@ const DISABLE_BUTTONS_CODEVIEW = `${COMMAND_BUTTONS}:not([class~="se-code-view-e
 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
+ */
+
+/**
+ * @constructor
  * @description SunEditor constructor function.
- * @param {Array.<Element>} multiTargets Target textarea
- * @param {Object} options options
- * @returns {Object}
+ * @param {Array<{target: Element, key: *, options: EditorFrameOptions_editor}>} multiTargets Target element
+ * @param {EditorInitOptions_editor} options options
  */
-const Editor = function (multiTargets, options) {
+function Editor(multiTargets, options) {
 	const _d = multiTargets[0].target.ownerDocument || env._d;
 	const _w = _d.defaultView || env._w;
 	const product = Constructor(multiTargets, options);
 
-	// properties
+	/**
+	 * @description Frame root key array
+	 * @type {Array<*>}
+	 */
 	this.rootKeys = product.rootKeys;
+
+	/**
+	 * @description Frame root map
+	 * @type {Map<*, __se__FrameContext>}
+	 */
 	this.frameRoots = product.frameRoots;
+
+	/**
+	 * @description Editor context object
+	 * @type {__se__Context}
+	 */
 	this.context = product.context;
+
+	/**
+	 * @description Current focusing frame context
+	 * @type {__se__FrameContext}
+	 */
 	this.frameContext = new Map();
+
+	/**
+	 * @description Current focusing frame context options
+	 * @type {__se__FrameOptions}
+	 */
 	this.frameOptions = new Map();
-	this._lineBreaker_t = null;
-	this._lineBreaker_b = null;
 
 	/**
 	 * @description Document object
@@ -61,55 +95,49 @@ const Editor = function (multiTargets, options) {
 
 	/**
 	 * @description Controllers carrier
+	 * @type {HTMLElement}
 	 */
 	this.carrierWrapper = product.carrierWrapper;
 
 	/**
 	 * @description Editor options
-	 * @type {Object.<string, any>}
+	 * @type {Map<string, *>}
 	 */
 	this.options = product.options;
 
 	/**
 	 * @description Plugins
-	 * @type {Object.<string, any>}
+	 * @type {Object<string, *>}
 	 */
 	this.plugins = product.plugins || {};
 
 	/**
 	 * @description Events object, call by triggerEvent function
-	 * @type {Object.<string, any>}
+	 * @type {Object<string, *>}
 	 */
 	this.events = null;
 
 	/**
 	 * @description Call the event function by injecting self: this.
-	 * @type {Function}
+	 * @type {(eventName: string, ...args: *) => Promise<*>}
 	 */
 	this.triggerEvent = null;
 
 	/**
 	 * @description Default icons object
-	 * @type {Object.<string, string>}
+	 * @type {Object<string, string>}
 	 */
 	this.icons = product.icons;
 
 	/**
 	 * @description loaded language
-	 * @type {Object.<string, any>}
+	 * @type {Object<string, *>}
 	 */
 	this.lang = product.lang;
 
 	/**
 	 * @description Variables used internally in editor operation
-	 * @property {boolean} hasFocus Boolean value of whether the editor has focus
-	 * @property {number} tabSize Indent size of tab (4)
-	 * @property {number} indentSize Indent size (25)px
-	 * @property {number} codeIndentSize Indent size of Code view mode (2)
-	 * @property {Array} currentNodes  An element array of the current cursor's node structure
-	 * @property {Array} currentNodesMap  An element name array of the current cursor's node structure
-	 * @property {boolean} componentSelected Boolean value of whether component is selected
-	 * @property {number} rootKey Current root key
+	 * @type {__se__EditorStatus}
 	 */
 	this.status = {
 		hasFocus: false,
@@ -118,155 +146,286 @@ const Editor = function (multiTargets, options) {
 		codeIndentSize: 2,
 		currentNodes: [],
 		currentNodesMap: [],
-		componentSelected: false,
+		onSelected: false,
 		rootKey: product.rootId,
-		_range: null
+		_range: null,
+		_onMousedown: false
 	};
 
 	/**
 	 * @description Is classic mode?
+	 * @type {boolean}
 	 */
-	this.isClassic = null;
+	this.isClassic = false;
 
 	/**
 	 * @description Is inline mode?
+	 * @type {boolean}
 	 */
-	this.isInline = null;
+	this.isInline = false;
 
 	/**
 	 * @description Is balloon|balloon-always mode?
+	 * @type {boolean}
 	 */
-	this.isBalloon = null;
+	this.isBalloon = false;
 
 	/**
 	 * @description Is balloon-always mode?
+	 * @type {boolean}
 	 */
-	this.isBalloonAlways = null;
+	this.isBalloonAlways = false;
 
 	/**
 	 * @description Is subToolbar balloon|balloon-always mode?
+	 * @type {boolean}
 	 */
-	this.isSubBalloon = null;
+	this.isSubBalloon = false;
 
 	/**
 	 * @description Is subToolbar balloon-always mode?
+	 * @type {boolean}
 	 */
-	this.isSubBalloonAlways = null;
+	this.isSubBalloonAlways = false;
 
-	// ----- Properties not shared with _core -----
 	/**
 	 * @description All command buttons map
+	 * @type {Map<string, HTMLElement>}
 	 */
 	this.allCommandButtons = new Map();
+
+	/**
+	 * @description All command buttons map
+	 * @type {Map<string, HTMLElement>}
+	 */
 	this.subAllCommandButtons = new Map();
 
 	/**
 	 * @description Shoutcuts key map
+	 * @type {Map<string, *>}
 	 */
 	this.shortcutsKeyMap = new Map();
+
+	/**
+	 * @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>}
+	 */
 	this.reverseKeys = [];
 
 	/**
 	 * @description A map with the plugin's buttons having an "active" method and the default command buttons with an "active" action.
-	 * Each button is contained in an array.
+	 * - Each button is contained in an array.
+	 * @type {Map<string, Array<HTMLButtonElement>>}
 	 */
 	this.commandTargets = new Map();
 
 	/**
 	 * @description Plugins array with "active" method.
-	 * "activeCommands" runs the "add" method when creating the editor.
+	 * - "activeCommands" runs the "add" method when creating the editor.
+	 * @type {Array<string>}
 	 */
 	this.activeCommands = null;
 
 	/**
 	 * @description The selection node (selection.getNode()) to which the effect was last applied
+	 * @type {Node|null}
 	 */
 	this.effectNode = null;
 
+	/**
+	 * @description Currently open "Modal" instance
+	 * @type {*}
+	 */
+	this.opendModal = null;
+
+	/**
+	 * @description Currently open "Controller" info array
+	 * @type {Array<ControllerInfo_editor>}
+	 */
+	this.opendControllers = [];
+
+	/**
+	 * @description Currently open "Controller" caller plugin name
+	 */
+	this.currentControllerName = '';
+
+	/**
+	 * @description Currently open "Browser" instance
+	 * @type {*}
+	 */
+	this.opendBrowser = null;
+
+	/**
+	 * @description Whether "SelectMenu" is open
+	 * @type {boolean}
+	 */
+	this.selectMenuOn = false;
+
+	// ------ base ------
+	/** @description History class instance @type {ReturnType<typeof import('./base/history').default>} */
+	this.history = null;
+	/** @description EventManager class instance @type {import('./base/eventManager').default} */
+	this.eventManager = null;
+
+	// ------ class ------
+	/** @description Toolbar class instance @type {import('./class/toolbar').default} */
+	this.toolbar = null;
+	/** @description Sub-Toolbar class instance @type {import('./class/toolbar').default|null} */
+	this.subToolbar = null;
+	/** @description Char class instance @type {import('./class/char').default} */
+	this.char = null;
+	/** @description Component class instance @type {import('./class/component').default} */
+	this.component = null;
+	/** @description Format class instance @type {import('./class/format').default} */
+	this.format = null;
+	/** @description HTML class instance @type {import('./class/html').default} */
+	this.html = null;
+	/** @description Menu class instance @type {import('./class/menu').default} */
+	this.menu = null;
+	/** @description NodeTransform class instance @type {import('./class/nodeTransform').default} */
+	this.nodeTransform = null;
+	/** @description Offset class instance @type {import('./class/offset').default} */
+	this.offset = null;
+	/** @description Selection class instance @type {import('./class/selection').default} */
+	this.selection = null;
+	/** @description Shortcuts class instance @type {import('./class/shortcuts').default} */
+	this.shortcuts = null;
+	/** @description UI class instance @type {import('./class/ui').default} */
+	this.ui = null;
+	/** @description Viewer class instance @type {import('./class/viewer').default} */
+	this.viewer = null;
+
 	// ------------------------------------------------------- private properties -------------------------------------------------------
+	/**
+	 * @description Line breaker (top)
+	 * @type {HTMLElement}
+	 */
+	this._lineBreaker_t = null;
+
+	/**
+	 * @description Line breaker (bottom)
+	 * @type {HTMLElement}
+	 */
+	this._lineBreaker_b = null;
+
 	/**
 	 * @description Closest ShadowRoot to editor if found
 	 * @type {ShadowRoot}
-	 * @private
 	 */
 	this._shadowRoot = null;
 
 	/**
 	 * @description Plugin call event map
-	 * @private
+	 * @type {Map<string, Array<((...args: *) => *) & { index: number }>>}
 	 */
 	this._onPluginEvents = null;
 
 	/**
 	 * @description Copy format info
-	 * @private
+	 * - eventManager.__cacheStyleNodes copied
+	 * @type {Array<Node>|null}
 	 */
 	this._onCopyFormatInfo = null;
+
+	/**
+	 * @description Copy format init method
+	 * @type {(...args: *) => *|null}
+	 */
 	this._onCopyFormatInitMethod = null;
 
 	/**
-	 * @description Controller, modal relative
-	 * @private
+	 * @description Controller target's frame div (editor.frameContext.get('topArea'))
+	 * @type {HTMLElement|null}
 	 */
-	this.opendModal = null;
-	this.opendControllers = [];
-	this.currentControllerName = '';
 	this._controllerTargetContext = null;
-	this.selectMenuOn = false;
-	this._backWrapper = product.carrierWrapper.querySelector('.se-back-wrapper');
 
+	/**
+	 * @description List of buttons that are disabled when "controller" is opened
+	 * @type {Array<HTMLButtonElement|HTMLInputElement>}
+	 */
 	this._controllerOnDisabledButtons = [];
+
+	/**
+	 * @description List of buttons that are disabled when "codeView" mode opened
+	 * @type {Array<HTMLButtonElement|HTMLInputElement>}
+	 */
 	this._codeViewDisabledButtons = [];
 
 	/**
-	 * @description Button List in Responsive Toolbar.
-	 * @private
+	 * @description List of buttons to run plugins in the toolbar
+	 * @type {Array<HTMLElement>}
 	 */
 	this._pluginCallButtons = product.pluginCallButtons;
+
+	/**
+	 * @description List of buttons to run plugins in the Sub-Toolbar
+	 * @type {Array<HTMLElement>}
+	 */
 	this._pluginCallButtons_sub = product.pluginCallButtons_sub;
+
+	/**
+	 * @description Responsive Toolbar Button Structure array
+	 * @type {Array<*>}
+	 */
 	this._responsiveButtons = product.responsiveButtons;
+
+	/**
+	 * @description Responsive Sub-Toolbar Button Structure array
+	 * @type {Array<*>}
+	 */
 	this._responsiveButtons_sub = product.responsiveButtons_sub;
 
 	/**
 	 * @description Variable that controls the "blur" event in the editor of inline or balloon mode when the focus is moved to dropdown
-	 * @private
+	 * @type {boolean}
 	 */
 	this._notHideToolbar = false;
 
 	/**
 	 * @description Variables for controlling focus and blur events
-	 * @private
+	 * @type {boolean}
 	 */
-	this._antiBlur = false;
+	this._preventBlur = false;
 
 	/**
-	 * @description If true, (initialize, reset) all indexes of image, video information
-	 * @private
+	 * @description Variables for controlling selection change events
+	 */
+	this._preventSelection = false;
+
+	/**
+	 * @description If true, initialize all indexes of image, video information
+	 * @type {boolean}
 	 */
 	this._componentsInfoInit = true;
+
+	/**
+	 * @description If true, reset all indexes of image, video information
+	 * @type {boolean}
+	 */
 	this._componentsInfoReset = false;
 
 	/**
 	 * @description plugin retainFormat info Map()
-	 * @private
+	 * @type {Map<string, ((...args: *) => *)>}
 	 */
 	this._MELInfo = null;
 
 	/**
 	 * @description Properties for managing files in the "FileManager" module
-	 * @private
+	 * @type {Array<*>}
 	 */
 	this._fileInfoPluginsCheck = null;
 
 	/**
 	 * @description Properties for managing files in the "FileManager" module
-	 * @private
+	 * @type {Array<*>}
 	 */
 	this._fileInfoPluginsReset = null;
 
 	/**
 	 * @description Variables for file component management
-	 * @private
+	 * @type {Object<string, *>}
 	 */
 	this._fileManager = {
 		tags: null,
@@ -274,34 +433,38 @@ const Editor = function (multiTargets, options) {
 		pluginRegExp: null,
 		pluginMap: null
 	};
+
+	/**
+	 * @description Variables for managing the components
+	 * @type {Array<*>}
+	 */
 	this._componentManager = [];
 
 	/**
 	 * @description Current Figure container.
-	 * @private
+	 * @type {HTMLElement|null}
 	 */
 	this._figureContainer = null;
 
 	/**
 	 * @description Origin options
-	 * @private
+	 * @type {EditorInitOptions_editor}
 	 */
 	this._originOptions = options;
 
 	/** ----- Create editor ------------------------------------------------------------ */
 	this.__Create(options);
-};
+}
 
 Editor.prototype = {
 	/**
 	 * @description If the plugin is not added, add the plugin and call the 'add' function.
-	 * If the plugin is added call callBack function.
+	 * - If the plugin is added call callBack function.
 	 * @param {string} pluginName The name of the plugin to call
-	 * @param {Array.<Element>|null} targets Plugin target button (This is not necessary if you have a button list when creating the editor)
-	 * @param {object|null} pluginOptions Plugin's options
-	 * @param {object} shortcuts this.options.get('shortcuts')
+	 * @param {?Array<HTMLElement>} targets Plugin target button (This is not necessary if you have a button list when creating the editor)
+	 * @param {?Object<string, *>} pluginOptions Plugin's options
 	 */
-	registerPlugin(pluginName, targets, pluginOptions, shortcuts) {
+	registerPlugin(pluginName, targets, pluginOptions) {
 		let plugin = this.plugins[pluginName];
 		if (!plugin) {
 			throw Error(`[SUNEDITOR.registerPlugin.fail] The called plugin does not exist or is in an invalid format. (pluginName: "${pluginName}")`);
@@ -312,7 +475,7 @@ Editor.prototype = {
 
 		if (targets) {
 			for (let i = 0, len = targets.length; i < len; i++) {
-				UpdateButton(targets[i], plugin, this.icons, this.lang, shortcuts);
+				UpdateButton(targets[i], plugin, this.icons, this.lang);
 			}
 
 			if (!this.activeCommands.includes(pluginName) && typeof this.plugins[pluginName].active === 'function') {
@@ -325,13 +488,13 @@ Editor.prototype = {
 	 * @description Run plugin calls and basic commands.
 	 * @param {string} command Command string
 	 * @param {string} type Display type string ('command', 'dropdown', 'modal', 'container')
-	 * @param {Element|null} button The element of command button
+	 * @param {?Node=} button The element of command button
 	 */
 	run(command, type, button) {
 		if (type) {
 			if (/more/i.test(type)) {
-				const toolbar = domUtils.getParentElement(button, '.se-toolbar');
-				const toolInst = domUtils.hasClass(toolbar, 'se-toolbar-sub') ? this.subToolbar : this.toolbar;
+				const toolbar = dom.query.getParentElement(button, '.se-toolbar');
+				const toolInst = dom.utils.hasClass(toolbar, 'se-toolbar-sub') ? this.subToolbar : this.toolbar;
 				if (button !== toolInst.currentMoreLayerActiveButton) {
 					const layer = toolbar.querySelector('.' + command);
 					if (layer) {
@@ -339,7 +502,7 @@ Editor.prototype = {
 						toolInst._showBalloon();
 						toolInst._showInline();
 					}
-					domUtils.addClass(button, 'on');
+					dom.utils.addClass(button, 'on');
 				} else if (toolInst.currentMoreLayerActiveButton) {
 					toolInst._moreLayerOff();
 					toolInst._showBalloon();
@@ -355,7 +518,7 @@ Editor.prototype = {
 				return;
 			}
 
-			if (this.frameContext.get('isReadOnly') && domUtils.arrayIncludes(this._controllerOnDisabledButtons, button)) return;
+			if (this.frameContext.get('isReadOnly') && dom.utils.arrayIncludes(this._controllerOnDisabledButtons, button)) return;
 			if (/dropdown/.test(type) && (this.menu.targetMap[command] === null || button !== this.menu.currentDropdownActiveButton)) {
 				this.menu.dropdownOn(button);
 				return;
@@ -364,8 +527,10 @@ Editor.prototype = {
 				return;
 			} else if (/command/.test(type)) {
 				this.plugins[command].action(button);
-			} else if (/fileBrowser/.test(type)) {
+			} else if (/browser/.test(type)) {
 				this.plugins[command].open(null);
+			} else if (/popup/.test(type)) {
+				this.plugins[command].show();
 			}
 		} else if (command) {
 			this.commandHandler(command, button);
@@ -381,24 +546,27 @@ Editor.prototype = {
 
 	/**
 	 * @description Execute default command of command button
-	 * (selectAll, codeView, fullScreen, indent, outdent, undo, redo, removeFormat, print, preview, showBlocks, save, bold, underline, italic, strike, subscript, superscript, copy, cut, paste)
+	 * - (selectAll, codeView, fullScreen, indent, outdent, undo, redo, removeFormat, print, preview, showBlocks, save, bold, underline, italic, strike, subscript, superscript, copy, cut, paste)
 	 * @param {string} command Property of command button (data-value)
-	 * @param {Element} button Command button
+	 * @param {?Node=} button Command button
+	 * @returns {Promise<void>}
 	 */
 	async commandHandler(command, button) {
 		if (this.frameContext.get('isReadOnly') && !/copy|cut|selectAll|codeView|fullScreen|print|preview|showBlocks/.test(command)) return;
 
 		switch (command) {
-			case 'copy':
-			case 'cut':
-				this.execCommand(command);
-				break;
-			case 'paste':
-				// @todo
-				break;
 			case 'selectAll':
 				SELECT_ALL(this);
 				break;
+			case 'copy': {
+				const range = this.selection.getRange();
+				if (range.collapsed) break;
+
+				const container = dom.utils.createElement('div', null, range.cloneContents());
+				await this.html.copy(container.innerHTML);
+
+				break;
+			}
 			case 'newDocument':
 				this.html.set(`<${this.options.get('defaultLine')}><br></${this.options.get('defaultLine')}>`);
 				this.focus();
@@ -423,7 +591,7 @@ Editor.prototype = {
 				this.history.redo();
 				break;
 			case 'removeFormat':
-				this.format.removeTextStyle();
+				this.format.removeInlineElement();
 				this.focus();
 				break;
 			case 'print':
@@ -450,6 +618,15 @@ Editor.prototype = {
 			case 'copyFormat':
 				COPY_FORMAT(this, button);
 				break;
+			case 'pageBreak':
+				PAGE_BREAK(this);
+				break;
+			case 'pageUp':
+				this.frameContext.get('documentType').pageUp();
+				break;
+			case 'pageDown':
+				this.frameContext.get('documentType').pageDown();
+				break;
 			default:
 				FONT_STYLE(this, command);
 		}
@@ -457,36 +634,38 @@ Editor.prototype = {
 
 	/**
 	 * @description Execute "editor.run" with command button.
-	 * @param {Element} target Command target
+	 * @param {Node} target Command target
 	 */
 	runFromTarget(target) {
-		const isInput = domUtils.isInputElement(target);
-		if (isInput || !(target = domUtils.getCommandTarget(target))) return;
+		if (dom.check.isInputElement(target)) return;
+
+		const targetBtn = /** @type {HTMLButtonElement} */ (dom.query.getCommandTarget(target));
+		if (!targetBtn) return;
 
-		const command = target.getAttribute('data-command');
-		const type = target.getAttribute('data-type');
+		const command = targetBtn.getAttribute('data-command');
+		const type = targetBtn.getAttribute('data-type');
 
 		if (!command && !type) return;
-		if (target.disabled) return;
+		if (targetBtn.disabled) return;
 
 		this.run(command, type, target);
 	},
 
 	/**
 	 * @description It is executed by inserting the button of commandTargets as the argument value of the "f" function.
-	 * "f" is called as long as the button array's length.
+	 * - "func" is called as long as the button array's length.
 	 * @param {string} cmd data-command
-	 * @param {Function} f Function.
+	 * @param {(...args: *) => *} func Function.
 	 */
-	applyCommandTargets(cmd, f) {
+	applyCommandTargets(cmd, func) {
 		if (this.commandTargets.has(cmd)) {
-			this.commandTargets.get(cmd).forEach(f);
+			this.commandTargets.get(cmd).forEach(func);
 		}
 	},
 
 	/**
-	 * @description Executes a function by traversing all root targets.
-	 * @param {Function} f Function
+	 * @description Execute a function by traversing all root targets.
+	 * @param {(...args: *) => *} f Function
 	 */
 	applyFrameRoots(f) {
 		this.frameRoots.forEach(f);
@@ -494,14 +673,14 @@ Editor.prototype = {
 
 	/**
 	 * @description Checks if the content of the editor is empty.
-	 * Display criteria for "placeholder".
-	 * @param {frameContext|null} fc Frame context, if not present, currently selected frame context.
+	 * - Display criteria for "placeholder".
+	 * @param {?__se__FrameContext=} fc Frame context, if not present, currently selected frame context.
 	 * @returns {boolean}
 	 */
 	isEmpty(fc) {
 		fc = fc || this.frameContext;
 		const wysiwyg = fc.get('wysiwyg');
-		return domUtils.isZeroWith(wysiwyg.textContent) && !wysiwyg.querySelector(env._allowedEmptyNodeList) && (wysiwyg.innerText.match(/\n/g) || '').length <= 1;
+		return dom.check.isZeroWidth(wysiwyg.textContent) && !wysiwyg.querySelector(this.options.get('allowedEmptyTags')) && (wysiwyg.innerText.match(/\n/g) || '').length <= 1;
 	},
 
 	/**
@@ -514,7 +693,7 @@ Editor.prototype = {
 
 		try {
 			this.options.set('_rtl', rtl);
-			this._offCurrentController();
+			this.ui._offCurrentController();
 
 			const fc = this.frameContext;
 			const plugins = this.plugins;
@@ -526,18 +705,18 @@ Editor.prototype = {
 			const statusbarWrapper = this.context.get('statusbar._wrapper');
 			if (rtl) {
 				this.applyFrameRoots((e) => {
-					domUtils.addClass([e.get('topArea'), e.get('wysiwyg')], 'se-rtl');
+					dom.utils.addClass([e.get('topArea'), e.get('wysiwyg'), e.get('documentTypePageMirror')], 'se-rtl');
 				});
-				domUtils.addClass([this.carrierWrapper, toolbarWrapper, statusbarWrapper], 'se-rtl');
+				dom.utils.addClass([this.carrierWrapper, toolbarWrapper, statusbarWrapper], 'se-rtl');
 			} else {
 				this.applyFrameRoots((e) => {
-					domUtils.removeClass([e.get('topArea'), e.get('wysiwyg')], 'se-rtl');
+					dom.utils.removeClass([e.get('topArea'), e.get('wysiwyg'), e.get('documentTypePageMirror')], 'se-rtl');
 				});
-				domUtils.removeClass([this.carrierWrapper, toolbarWrapper, statusbarWrapper], 'se-rtl');
+				dom.utils.removeClass([this.carrierWrapper, toolbarWrapper, statusbarWrapper], 'se-rtl');
 			}
 
-			const lineNodes = domUtils.getListChildren(fc.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);
 			});
 
 			for (let i = 0, n, l, r; (n = lineNodes[i]); i++) {
@@ -557,6 +736,16 @@ Editor.prototype = {
 
 			DIR_BTN_ACTIVE(this, rtl);
 
+			// document type
+			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 (rtl) fc.get('wrapper').insertBefore(fc.get('documentTypePage'), fc.get('wysiwygFrame'));
+				else fc.get('wrapper').appendChild(fc.get('documentTypePage'));
+			}
+
 			if (this.isBalloon) this.toolbar._showBalloon();
 			else if (this.isSubBalloon) this.subToolbar._showBalloon();
 		} catch (e) {
@@ -570,7 +759,7 @@ Editor.prototype = {
 
 	/**
 	 * @description Add or reset option property (Editor is reloaded)
-	 * @param {Object} newOptions Options
+	 * @param {EditorInitOptions_editor} newOptions Options
 	 */
 	resetOptions(newOptions) {
 		const _keys = Object.keys;
@@ -624,7 +813,7 @@ Editor.prototype = {
 
 				// statusbar
 				if (diff.has('statusbar')) {
-					domUtils.removeItem(fc.get('statusbar'));
+					dom.utils.removeItem(fc.get('statusbar'));
 					if (newRootOptions.get('statusbar')) {
 						const statusbar = CreateStatusbar(newRootOptions, null).statusbar;
 						fc.get('container').appendChild(statusbar);
@@ -659,7 +848,7 @@ Editor.prototype = {
 				fc.set('options', newRootOptions);
 
 				// frame styles
-				this.setEditorStyle(newRootOptions.get('_defaultStyles'), fc);
+				this.ui.setEditorStyle(newRootOptions.get('_defaultStyles'), fc);
 
 				// frame attributes
 				const frame = fc.get('wysiwyg');
@@ -700,9 +889,14 @@ Editor.prototype = {
 		}
 		// shortcuts hint
 		if (options.get('shortcutsHint')) {
-			domUtils.removeClass(toolbar, 'se-shortcut-hide');
+			dom.utils.removeClass(toolbar, 'se-shortcut-hide');
 		} else {
-			domUtils.addClass(toolbar, 'se-shortcut-hide');
+			dom.utils.addClass(toolbar, 'se-shortcut-hide');
+		}
+
+		// theme
+		if (this._originOptions.theme !== (newOptions.theme ?? this._originOptions.theme)) {
+			this.ui.setTheme(newOptions.theme);
 		}
 
 		this.effectNode = null;
@@ -711,7 +905,7 @@ Editor.prototype = {
 
 	/**
 	 * @description Change the current root index.
-	 * @param {number} rootKey
+	 * @param {*} rootKey
 	 */
 	changeFrameContext(rootKey) {
 		if (rootKey === this.status.rootKey) return;
@@ -724,8 +918,8 @@ Editor.prototype = {
 	/**
 	 * @description javascript execCommand
 	 * @param {string} command javascript execCommand function property
-	 * @param {Boolean|undefined} showDefaultUI javascript execCommand function property
-	 * @param {string|undefined} value javascript execCommand function property
+	 * @param {boolean=} showDefaultUI javascript execCommand function property
+	 * @param {string=} value javascript execCommand function property
 	 */
 	execCommand(command, showDefaultUI, value) {
 		this.frameContext.get('_wd').execCommand(command, showDefaultUI, command === 'formatBlock' ? '<' + value + '>' : value);
@@ -734,23 +928,23 @@ Editor.prototype = {
 
 	/**
 	 * @description Focus to wysiwyg area
-	 * @param {number|undefined} rootKey Root index
+	 * @param {*} rootKey Root index
 	 */
 	focus(rootKey) {
 		if (rootKey) this.changeFrameContext(rootKey);
 		if (this.frameContext.get('wysiwygFrame').style.display === 'none') return;
-		this._antiBlur = false;
+		this._preventBlur = false;
 
 		if (this.frameOptions.get('iframe') || !this.frameContext.get('wysiwyg').contains(this.selection.getNode())) {
 			this._nativeFocus();
 		} else {
 			try {
 				const range = this.selection.getRange();
-				if (range.startContainer === range.endContainer && domUtils.isWysiwygFrame(range.startContainer)) {
-					const currentNode = range.commonAncestorContainer.children[range.startOffset];
+				if (range.startContainer === range.endContainer && dom.check.isWysiwygFrame(range.startContainer)) {
+					const currentNode = /** @type {HTMLElement} */ (range.commonAncestorContainer).children[range.startOffset];
 					if (!this.format.isLine(currentNode) && !this.component.is(currentNode)) {
-						const br = domUtils.createElement('BR');
-						const format = domUtils.createElement(this.options.get('defaultLine'), null, br);
+						const br = dom.utils.createElement('BR');
+						const format = dom.utils.createElement(this.options.get('defaultLine'), null, br);
 						this.frameContext.get('wysiwyg').insertBefore(format, currentNode);
 						this.selection.setRange(br, 0, br, 0);
 						return;
@@ -768,19 +962,19 @@ Editor.prototype = {
 
 	/**
 	 * @description If "focusEl" is a component, then that component is selected; if it is a format element, the last text is selected
-	 * If "focusEdge" is null, then selected last element
-	 * @param {Element|null} focusEl Focus element
+	 * - If "focusEdge" is null, then selected last element
+	 * @param {?Node=} focusEl Focus element
 	 */
 	focusEdge(focusEl) {
-		this._antiBlur = false;
+		this._preventBlur = false;
 		if (!focusEl) focusEl = this.frameContext.get('wysiwyg').lastElementChild;
 
 		const fileComponentInfo = this.component.get(focusEl);
 		if (fileComponentInfo) {
-			this.component.select(fileComponentInfo.target, fileComponentInfo.pluginName, false);
+			this.component.select(fileComponentInfo.target, fileComponentInfo.pluginName);
 		} else if (focusEl) {
 			if (focusEl.nodeType !== 3) {
-				focusEl = domUtils.getEdgeChild(
+				focusEl = dom.query.getEdgeChild(
 					focusEl,
 					function (current) {
 						return current.childNodes.length === 0 || current.nodeType === 3;
@@ -806,163 +1000,6 @@ Editor.prototype = {
 		}
 	},
 
-	/**
-	 * @description Set "options.get('editorStyle')" style.
-	 * Define the style of the edit area
-	 * It can also be defined with the "setOptions" method, but the "setEditorStyle" method does not render the editor again.
-	 * @param {string} style Style string
-	 * @param {FrameContext|null} fc Frame context
-	 */
-	setEditorStyle(style, fc) {
-		fc = fc || this.frameContext;
-		const fo = fc.get('options');
-
-		const newStyles = converter._setDefaultOptionStyle(fo, style);
-		fo.set('_defaultStyles', newStyles);
-
-		// top area
-		fc.get('topArea').style.cssText = newStyles.top;
-
-		// code view
-		const code = fc.get('code');
-		code.style.cssText = fo.get('_defaultStyles').frame;
-		code.style.display = 'none';
-
-		// wysiwyg frame
-		if (!fo.get('iframe')) {
-			fc.get('wysiwygFrame').style.cssText = newStyles.frame + newStyles.editor;
-		} else {
-			fc.get('wysiwygFrame').style.cssText = newStyles.frame;
-			fc.get('wysiwyg').style.cssText = newStyles.editor;
-		}
-	},
-
-	/**
-	 * @description Switch to or off "ReadOnly" mode.
-	 * @param {boolean} value "readOnly" boolean value.
-	 * @param {string|undefined} rootKey Root key
-	 */
-	readOnly(value, rootKey) {
-		const fc = rootKey ? this.frameRoots.get(rootKey) : this.frameContext;
-
-		fc.set('isReadOnly', !!value);
-		domUtils.setDisabled(this._controllerOnDisabledButtons, !!value);
-
-		if (value) {
-			this._offCurrentController();
-			this._offCurrentModal();
-
-			if (this.toolbar?.currentMoreLayerActiveButton?.disabled) this.toolbar.moreLayerOff();
-			if (this.subToolbar?.currentMoreLayerActiveButton?.disabled) this.subToolbar.moreLayerOff();
-			if (this.menu?.currentDropdownActiveButton?.disabled) this.menu.dropdownOff();
-			if (this.menu?.currentContainerActiveButton?.disabled) this.menu.containerOff();
-			if (this.modalForm) this.plugins.modal.close.call(this);
-
-			fc.get('code').setAttribute('readOnly', 'true');
-			domUtils.addClass(fc.get('wysiwygFrame'), 'se-read-only');
-		} else {
-			fc.get('code').removeAttribute('readOnly');
-			domUtils.removeClass(fc.get('wysiwygFrame'), 'se-read-only');
-		}
-
-		if (this.options.get('hasCodeMirror')) {
-			this.viewer._codeMirrorEditor('readonly', !!value, rootKey);
-		}
-	},
-
-	/**
-	 * @description Disable the suneditor
-	 * @param {string|undefined} rootKey Root key
-	 */
-	disable(rootKey) {
-		const fc = rootKey ? this.frameRoots.get(rootKey) : this.frameContext;
-
-		this.toolbar.disable();
-		this._offCurrentController();
-		this._offCurrentModal();
-
-		if (this.modalForm) this.plugins.modal.close.call(this);
-
-		fc.get('wysiwyg').setAttribute('contenteditable', false);
-		fc.set('isDisabled', true);
-
-		if (this.options.get('hasCodeMirror')) {
-			this.viewer._codeMirrorEditor('readonly', true, rootKey);
-		} else {
-			fc.get('code').setAttribute('disabled', true);
-		}
-	},
-
-	/**
-	 * @description Enable the suneditor
-	 * @param {string|undefined} rootKey Root key
-	 */
-	enable(rootKey) {
-		const fc = rootKey ? this.frameRoots.get(rootKey) : this.frameContext;
-
-		this.toolbar.enable();
-		fc.get('wysiwyg').setAttribute('contenteditable', true);
-		fc.set('isDisabled', false);
-
-		if (this.options.get('hasCodeMirror')) {
-			this.viewer._codeMirrorEditor('readonly', false, rootKey);
-		} else {
-			fc.get('code').removeAttribute('disabled');
-		}
-	},
-
-	/**
-	 * @description Show the suneditor
-	 * @param {string|undefined} rootKey Root key
-	 */
-	show(rootKey) {
-		const fc = rootKey ? this.frameRoots.get(rootKey) : this.frameContext;
-		const topAreaStyle = fc.get('topArea').style;
-		if (topAreaStyle.display === 'none') topAreaStyle.display = 'block';
-	},
-
-	/**
-	 * @description Hide the suneditor
-	 * @param {string|undefined} rootKey Root key
-	 */
-	hide(rootKey) {
-		const fc = rootKey ? this.frameRoots.get(rootKey) : this.frameContext;
-		fc.get('topArea').style.display = 'none';
-	},
-
-	/**
-	 * @description Show loading box
-	 * @param {string|undefined} rootKey Root key
-	 */
-	showLoading(rootKey) {
-		(rootKey ? this.frameRoots.get(rootKey).get('container') : this.carrierWrapper).querySelector('.se-loading-box').style.display = 'block';
-	},
-
-	/**
-	 * @description Hide loading box
-	 * @param {string|undefined} rootKey Root key
-	 */
-	hideLoading(rootKey) {
-		(rootKey ? this.frameRoots.get(rootKey).get('container') : this.carrierWrapper).querySelector('.se-loading-box').style.display = 'none';
-	},
-
-	/**
-	 * @description Activate the transparent background "div" so that other elements are not affected during resizing.
-	 * @param {cursor} cursor cursor css property
-	 */
-	enableBackWrapper(cursor) {
-		this._backWrapper.style.cursor = cursor;
-		this._backWrapper.style.display = 'block';
-	},
-
-	/**
-	 * @description Disabled background "div"
-	 */
-	disableBackWrapper() {
-		this._backWrapper.style.display = 'none';
-		this._backWrapper.style.cursor = 'default';
-	},
-
 	/**
 	 * @description Destroy the suneditor
 	 */
@@ -979,12 +1016,12 @@ Editor.prototype = {
 		}
 
 		/** remove element */
-		domUtils.removeItem(this.carrierWrapper);
-		domUtils.removeItem(this.context.get('toolbar._wrapper'));
-		domUtils.removeItem(this.context.get('toolbar.sub._wrapper'));
-		domUtils.removeItem(this.context.get('statusbar._wrapper'));
+		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'));
 		this.applyFrameRoots((e) => {
-			domUtils.removeItem(e.get('topArea'));
+			dom.utils.removeItem(e.get('topArea'));
 			e.get('options').clear();
 			e.clear();
 		});
@@ -1007,7 +1044,7 @@ Editor.prototype = {
 			delete obj[k];
 		}
 
-		obj = ['eventManager', 'char', 'component', 'format', 'html', 'menu', 'nodeTransform', 'notice', 'offset', 'selection', 'shortcuts', 'toolbar', 'viewer'];
+		obj = ['eventManager', 'char', 'component', 'format', 'html', '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) {
@@ -1031,8 +1068,9 @@ Editor.prototype = {
 
 	/** ----- private methods ----------------------------------------------------------------------------------------------------------------------------- */
 	/**
+	 * @private
 	 * @description Set frameContext, frameOptions
-	 * @param {rootTarget} rt Root target
+	 * @param {__se__FrameContext} rt Root target[key] FrameContext
 	 */
 	_setFrameInfo(rt) {
 		this.frameContext = rt;
@@ -1043,68 +1081,8 @@ Editor.prototype = {
 	},
 
 	/**
-	 * @description visible controllers
-	 * @param {boolean} value hidden/show
-	 * @param {boolean?} lineBreakShow Line break hidden/show (default: Follows the value "value".)
 	 * @private
-	 */
-	_visibleControllers(value, lineBreakShow) {
-		const visible = value ? '' : 'hidden';
-		const breakerVisible = lineBreakShow ?? visible ? '' : 'hidden';
-
-		const cont = this.opendControllers;
-		for (let i = 0, c; i < cont.length; i++) {
-			c = cont[i];
-			if (c.form) c.form.style.visibility = visible;
-		}
-
-		this._lineBreaker_t.style.visibility = breakerVisible;
-		this._lineBreaker_b.style.visibility = breakerVisible;
-	},
-
-	/**
-	 * @description Off current controllers
-	 * @private
-	 */
-	_offCurrentController() {
-		this.__offControllers();
-		this.component.__deselect();
-	},
-
-	/**
-	 * @description Off controllers
-	 * @private
-	 */
-	__offControllers() {
-		const cont = this.opendControllers;
-		const fixedCont = [];
-		for (let i = 0, c; i < cont.length; i++) {
-			c = cont[i];
-			if (c.fixed) {
-				fixedCont.push(c);
-				continue;
-			}
-			if (typeof c.inst.close === 'function') c.inst.close();
-			if (c.form) c.form.style.display = 'none';
-		}
-		this.opendControllers = fixedCont;
-		this.currentControllerName = '';
-		this._antiBlur = false;
-	},
-
-	/**
-	 * @description Off current modal
-	 * @private
-	 */
-	_offCurrentModal() {
-		if (this.opendModal) {
-			this.opendModal.close();
-		}
-	},
-
-	/**
 	 * @description Focus to wysiwyg area using "native focus function"
-	 * @private
 	 */
 	_nativeFocus() {
 		this.selection.__focus();
@@ -1112,8 +1090,9 @@ Editor.prototype = {
 	},
 
 	/**
-	 * @description Check the components such as image and video and modify them according to the format.
 	 * @private
+	 * @description Check the components such as image and video and modify them according to the format.
+	 * @param {boolean} loaded If true, the component is loaded.
 	 */
 	_checkComponents(loaded) {
 		for (let i = 0, len = this._fileInfoPluginsCheck.length; i < len; i++) {
@@ -1122,8 +1101,8 @@ Editor.prototype = {
 	},
 
 	/**
-	 * @description Initialize the information of the components.
 	 * @private
+	 * @description Initialize the information of the components.
 	 */
 	_resetComponents() {
 		for (let i = 0, len = this._fileInfoPluginsReset.length; i < len; i++) {
@@ -1132,31 +1111,54 @@ Editor.prototype = {
 	},
 
 	/**
+	 * @private
 	 * @description Initializ wysiwyg area (Only called from core._init)
-	 * @param {Map} e frameContext
+	 * @param {__se__FrameContext} e frameContext
 	 * @param {string} value initial html string
-	 * @private
 	 */
 	_initWysiwygArea(e, value) {
+		// set content
 		e.get('wysiwyg').innerHTML =
-			this.html.clean(typeof value === 'string' ? value : (/^TEXTAREA$/i.test(e.get('originElement').nodeName) ? e.get('originElement').value : e.get('originElement').innerHTML) || '', true, null, null) ||
-			'<' + this.options.get('defaultLine') + '><br></' + this.options.get('defaultLine') + '>';
-
+			this.html.clean(typeof value === 'string' ? value : (/^TEXTAREA$/i.test(e.get('originElement').nodeName) ? e.get('originElement').value : e.get('originElement').innerHTML) || '', {
+				forceFormat: true,
+				whitelist: null,
+				blacklist: null,
+				_freeCodeViewMode: this.options.get('freeCodeViewMode')
+			}) || '<' + this.options.get('defaultLine') + '><br></' + this.options.get('defaultLine') + '>';
+
+		// char counter
 		if (e.has('charCounter')) e.get('charCounter').textContent = this.char.getLength();
+
+		// document type init
+		if (this.options.get('type') === 'document') {
+			e.set('documentType', new DocumentType(this, e));
+			if (e.get('documentType').useHeader) {
+				e.set('documentType-use-header', true);
+			}
+			if (e.get('documentType').usePage) {
+				e.set('documentType-use-page', true);
+				e.get('documentTypePageMirror').innerHTML = e.get('wysiwyg').innerHTML;
+			}
+		}
 	},
 
 	/**
-	 * @description Called when there are changes to tags in the wysiwyg region.
 	 * @private
+	 * @description Called when there are changes to tags in the wysiwyg region.
+	 * @param {__se__FrameContext} fc - Frame context object
 	 */
 	_resourcesStateChange(fc) {
 		this._iframeAutoHeight(fc);
 		this._checkPlaceholder(fc);
+		if (this.options.get('type') === 'document' && fc.get('documentType').usePage) {
+			fc.get('documentTypePageMirror').innerHTML = fc.get('wysiwyg').innerHTML;
+		}
 	},
 
 	/**
-	 * @description Modify the height value of the iframe when the height of the iframe is automatic.
 	 * @private
+	 * @description Modify the height value of the iframe when the height of the iframe is automatic.
+	 * @param {__se__FrameContext} fc - Frame context object
 	 */
 	_iframeAutoHeight(fc) {
 		const autoFrame = fc.get('_iframeAuto');
@@ -1172,6 +1174,13 @@ Editor.prototype = {
 		}
 	},
 
+	/**
+	 * @private
+	 * @description Call the "onResizeEditor" event
+	 * @param {__se__FrameContext} fc - Frame context object
+	 * @param {number} h - Height value
+	 * @param {ResizeObserverEntry} resizeObserverEntry - ResizeObserverEntry object
+	 */
 	__callResizeFunction(fc, h, resizeObserverEntry) {
 		h =
 			h === -1
@@ -1183,11 +1192,17 @@ Editor.prototype = {
 			this.triggerEvent('onResizeEditor', { height: h, prevHeight: fc.get('_editorHeight'), frameContext: fc, observerEntry: resizeObserverEntry });
 			fc.set('_editorHeight', h);
 		}
+
+		// document type page
+		if (fc.has('documentType-use-page')) {
+			fc.get('documentType').resizePage();
+		}
 	},
 
 	/**
-	 * @description Set display property when there is placeholder.
 	 * @private
+	 * @description Set display property when there is placeholder.
+	 * @param {?__se__FrameContext=} fc - Frame context object, If null fc is this.frameContext
 	 */
 	_checkPlaceholder(fc) {
 		fc = fc || this.frameContext;
@@ -1208,8 +1223,9 @@ Editor.prototype = {
 	},
 
 	/**
-	 * @description Initializ editor
 	 * @private
+	 * @description Initializ editor
+	 * @param {EditorInitOptions_editor} options Options
 	 */
 	__editorInit(options) {
 		this.applyFrameRoots((e) => {
@@ -1253,8 +1269,9 @@ Editor.prototype = {
 	},
 
 	/**
-	 * @description Initializ core variable
 	 * @private
+	 * @description Initializ core variable
+	 * @param {EditorInitOptions_editor} options Options
 	 */
 	__init(options) {
 		// file components
@@ -1278,20 +1295,19 @@ Editor.prototype = {
 			['onKeyUp', []],
 			['onFocus', []],
 			['onBlur', []],
-			['onPastAndDrop', []]
+			['onPaste', []],
+			['onFilePasteAndDrop', []]
 		]);
 		this._fileManager.tags = [];
 		this._fileManager.pluginMap = {};
 		this._fileManager.tagAttrs = {};
 
 		const plugins = this.plugins;
-		const isArray = Array.isArray;
-		const shortcuts = this.options.get('shortcuts');
 		const filePluginRegExp = [];
 		let plugin;
 		for (const key in plugins) {
-			this.registerPlugin(key, this._pluginCallButtons[key], options[key], shortcuts[key]);
-			this.registerPlugin(key, this._pluginCallButtons_sub[key], options[key], shortcuts[key]);
+			this.registerPlugin(key, this._pluginCallButtons[key], options[key]);
+			this.registerPlugin(key, this._pluginCallButtons_sub[key], options[key]);
 			plugin = this.plugins[key];
 
 			// Filemanager
@@ -1299,7 +1315,7 @@ Editor.prototype = {
 				const fm = plugin.__fileManagement;
 				this._fileInfoPluginsCheck.push(fm._checkInfo.bind(fm));
 				this._fileInfoPluginsReset.push(fm._resetInfo.bind(fm));
-				if (isArray(fm.tagNames)) {
+				if (Array.isArray(fm.tagNames)) {
 					const tagNames = fm.tagNames;
 					this._fileManager.tags = this._fileManager.tags.concat(tagNames);
 					filePluginRegExp.push(key);
@@ -1317,7 +1333,7 @@ Editor.prototype = {
 			if (typeof plugin.constructor.component === 'function') {
 				this._componentManager.push(
 					function (launcher, element) {
-						if (!(element = launcher.component?.call(this, element))) return null;
+						if (!element || !(element = launcher.component?.call(this, element))) return null;
 						return {
 							target: element,
 							pluginName: launcher.key,
@@ -1344,6 +1360,24 @@ Editor.prototype = {
 			}
 		}
 
+		if (this.options.get('buttons').has('pageBreak') || this.options.get('buttons_sub')?.has('pageBreak')) {
+			this._componentManager.push((element) => {
+				if (!element || !dom.utils.hasClass(element, 'se-page-break')) return null;
+				return {
+					target: element,
+					launcher: {
+						destroy: (target) => {
+							const focusEl = target.previousElementSibling || target.nextElementSibling;
+							dom.utils.removeItem(target);
+							// focus
+							this.focusEdge(focusEl);
+							this.history.push(false);
+						}
+					}
+				};
+			});
+		}
+
 		this._fileManager.regExp = new RegExp(`^(${this._fileManager.tags.join('|') || '\\^'})$`, 'i');
 		this._fileManager.pluginRegExp = new RegExp(`^(${filePluginRegExp.length === 0 ? '\\^' : filePluginRegExp.join('|')})$`, 'i');
 
@@ -1351,11 +1385,12 @@ Editor.prototype = {
 		delete this._pluginCallButtons_sub;
 
 		this.__cachingButtons();
+		this.__cachingShortcuts();
 	},
 
 	/**
-	 * @description Caching basic buttons to use
 	 * @private
+	 * @description Caching basic buttons to use
 	 */
 	__cachingButtons() {
 		const ctx = this.context;
@@ -1366,6 +1401,11 @@ Editor.prototype = {
 		}
 	},
 
+	/**
+	 * @private
+	 * @description Set the disabled button list
+	 * - this._codeViewDisabledButtons, this._controllerOnDisabledButtons
+	 */
 	__setDisabledButtons() {
 		const ctx = this.context;
 
@@ -1379,8 +1419,10 @@ Editor.prototype = {
 	},
 
 	/**
-	 * @description Save the current buttons
 	 * @private
+	 * @description Save the current buttons
+	 * @param {Map<string, Element>} cmdButtons Command button map
+	 * @param {Element} tray Button tray
 	 */
 	__saveCommandButtons(cmdButtons, tray) {
 		const currentButtons = tray.querySelectorAll(COMMAND_BUTTONS);
@@ -1390,7 +1432,7 @@ Editor.prototype = {
 		const reverseKeys = this.reverseKeys;
 
 		for (let i = 0, len = currentButtons.length, e, c; i < len; i++) {
-			e = currentButtons[i];
+			e = /** @type {HTMLButtonElement} */ (currentButtons[i]);
 			c = e.getAttribute('data-command');
 			// command set
 			cmdButtons.set(c, e);
@@ -1400,6 +1442,27 @@ Editor.prototype = {
 		}
 	},
 
+	/**
+	 * @private
+	 * @description Caches shortcut keys for commands.
+	 */
+	__cachingShortcuts() {
+		const shortcuts = this.options.get('shortcuts');
+		const reverseCommandArray = this.options.get('_reverseCommandArray');
+		const keyMap = this.shortcutsKeyMap;
+		const reverseKeys = this.reverseKeys;
+		for (const key of Object.keys(shortcuts)) {
+			if (!key.startsWith('_')) continue;
+			CreateShortcuts('', null, shortcuts[key], keyMap, reverseCommandArray, reverseKeys);
+		}
+	},
+
+	/**
+	 * @private
+	 * @description Sets command target elements.
+	 * @param {string} cmd - The command identifier.
+	 * @param {HTMLButtonElement} target - The associated command button.
+	 */
 	__setCommandTargets(cmd, target) {
 		if (!cmd || !target) return;
 
@@ -1413,6 +1476,13 @@ Editor.prototype = {
 		}
 	},
 
+	/**
+	 * @private
+	 * @description Configures the document properties of an iframe editor.
+	 * @param {HTMLIFrameElement} frame - The editor iframe.
+	 * @param {Map<string, *>} originOptions - The original options.
+	 * @param {__se__FrameOptions} targetOptions - The new options.
+	 */
 	__setIframeDocument(frame, originOptions, targetOptions) {
 		frame.setAttribute('scrolling', 'auto');
 		frame.contentDocument.head.innerHTML =
@@ -1420,9 +1490,14 @@ Editor.prototype = {
 			converter._setIframeStyleLinks(targetOptions.get('iframe_cssFileName')) +
 			converter._setAutoHeightStyle(targetOptions.get('height'));
 		frame.contentDocument.body.className = originOptions.get('_editableClass');
-		frame.contentDocument.body.setAttribute('contenteditable', true);
+		frame.contentDocument.body.setAttribute('contenteditable', 'true');
 	},
 
+	/**
+	 * @private
+	 * @description Set the FrameContext parameters and options
+	 * @param {__se__FrameContext} e - Frame context object
+	 */
 	__setEditorParams(e) {
 		const frameOptions = e.get('options');
 		const _w = this._w;
@@ -1463,10 +1538,16 @@ Editor.prototype = {
 		}
 	},
 
+	/**
+	 * @private
+	 * @description Registers and initializes editor classes.
+	 */
 	__registerClass() {
 		// use events
-		this.events = { ...Events(), ...this.options.get('events') };
+		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;
 			const eventHandler = this.events[eventName];
 			if (typeof eventHandler === 'function') {
 				return await eventHandler({ editor: this, ...eventData });
@@ -1483,10 +1564,9 @@ Editor.prototype = {
 		// util classes
 		this.offset = new Offset(this);
 		this.shortcuts = new Shortcuts(this);
-		this.notice = new Notice(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'))
+		if (this.options.has('_subMode')) {
 			this.subToolbar = new Toolbar(this, {
 				keyName: 'toolbar.sub',
 				balloon: this.isSubBalloon,
@@ -1494,13 +1574,15 @@ Editor.prototype = {
 				inline: false,
 				res: this._responsiveButtons_sub
 			});
-		this.selection = new Selection(this);
+		}
+		this.selection = new Selection_(this);
 		this.html = new HTML(this);
 		this.nodeTransform = new NodeTransform(this);
 		this.component = new Component(this);
 		this.format = new Format(this);
 		this.menu = new Menu(this);
 		this.char = new Char(this);
+		this.ui = new UI(this);
 		this.viewer = new Viewer(this);
 
 		// register classes to the eventManager
@@ -1512,26 +1594,39 @@ Editor.prototype = {
 		ClassInjector.call(this.html, this);
 		ClassInjector.call(this.menu, this);
 		ClassInjector.call(this.nodeTransform, this);
+		ClassInjector.call(this.offset, this);
 		ClassInjector.call(this.selection, this);
+		ClassInjector.call(this.shortcuts, this);
 		ClassInjector.call(this.toolbar, this);
+		ClassInjector.call(this.ui, this);
 		ClassInjector.call(this.viewer, this);
 		if (this.options.has('_subMode')) ClassInjector.call(this.subToolbar, this);
 
 		// delete self reference
-		delete this.char.char;
-		delete this.component.component;
-		delete this.format.format;
-		delete this.html.html;
-		delete this.menu.menu;
-		delete this.nodeTransform.nodeTransform;
-		delete this.selection.selection;
-		delete this.toolbar.toolbar;
-		delete this.viewer.viewer;
-		if (this.subToolbar) delete this.subToolbar.subToolbar;
-
-		this._responsiveButtons = this._responsiveButtons_res = null;
+		delete this.eventManager['eventManager'];
+		delete this.char['char'];
+		delete this.component['component'];
+		delete this.format['format'];
+		delete this.html['html'];
+		delete this.menu['menu'];
+		delete this.nodeTransform['nodeTransform'];
+		delete this.offset['offset'];
+		delete this.selection['selection'];
+		delete this.shortcuts['shortcuts'];
+		delete this.toolbar['toolbar'];
+		delete this.ui['ui'];
+		delete this.viewer['viewer'];
+		if (this.subToolbar) delete this.subToolbar['subToolbar'];
+
+		this._responsiveButtons = this._responsiveButtons_sub = null;
 	},
 
+	/**
+	 * @private
+	 * @description Creates the editor instance and initializes components.
+	 * @param {EditorInitOptions_editor} originOptions - The initial editor options.
+	 * @returns {Promise<void>}
+	 */
 	async __Create(originOptions) {
 		// set modes
 		this.isInline = /inline/i.test(this.options.get('mode'));
@@ -1570,6 +1665,18 @@ Editor.prototype = {
 
 		this.applyFrameRoots((e) => {
 			e.get('wrapper').appendChild(e.get('wysiwygFrame'));
+
+			// document type
+			if (e.get('documentTypeInner')) {
+				if (this.options.get('_rtl')) e.get('wrapper').appendChild(e.get('documentTypeInner'));
+				else e.get('wrapper').insertBefore(e.get('documentTypeInner'), e.get('wysiwygFrame'));
+			}
+			if (e.get('documentTypePage')) {
+				if (this.options.get('_rtl')) e.get('wrapper').insertBefore(e.get('documentTypePage'), e.get('wysiwygFrame'));
+				else e.get('wrapper').appendChild(e.get('documentTypePage'));
+				// page mirror
+				e.get('wrapper').appendChild(e.get('documentTypePageMirror'));
+			}
 		});
 
 		if (iframePromises.length > 0) {
@@ -1590,7 +1697,7 @@ function GetResetDiffKey(key) {
 function CheckResetKeys(keys, plugins, root) {
 	for (let i = 0, len = keys.length, k; i < len; i++) {
 		k = keys[i];
-		if (RO_UNAVAILABD.includes(k) || (plugins && plugins[k])) {
+		if (OPTION_FIXED_FLAG[k] === 'fixed' || (plugins && plugins[k])) {
 			console.warn(`[SUNEDITOR.warn.resetOptions] "[${root + k}]" options not available in resetOptions have no effect.`);
 			keys.splice(i--, 1);
 			len--;