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

package/src/core/section/constructor.js

@@ -1,17 +1,32 @@
 import _icons from '../../assets/icons/_default';
 import _defaultLang from '../../langs/en';
 import { CreateContext, CreateFrameContext } from './context';
-import { domUtils, numbers, converter, env } from '../../helper';
+import { dom, numbers, converter, env } from '../../helper';
 
 const _d = env._d;
-const DEFAULT_BUTTON_LIST = [['undo', 'redo'], ['bold', 'underline', 'italic', 'strike', 'subscript', 'superscript'], ['removeFormat'], ['outdent', 'indent'], ['fullScreen', 'showBlocks', 'codeView'], ['preview', 'print']];
+const DEFAULT_BUTTON_LIST = [
+	['undo', 'redo'],
+	'|',
+	['bold', 'underline', 'italic', 'strike', '|', 'subscript', 'superscript'],
+	'|',
+	['removeFormat'],
+	'|',
+	['outdent', 'indent'],
+	'|',
+	['fullScreen', 'showBlocks', 'codeView'],
+	'|',
+	['preview', 'print']
+];
 
 const REQUIRED_FORMAT_LINE = 'div';
 const REQUIRED_ELEMENT_WHITELIST = 'br|div';
 const DEFAULT_ELEMENT_WHITELIST =
 	'p|pre|blockquote|h1|h2|h3|h4|h5|h6|ol|ul|li|hr|figure|figcaption|img|iframe|audio|video|source|table|thead|tbody|tr|th|td|caption|a|b|strong|var|i|em|u|ins|s|span|strike|del|sub|sup|code|svg|path|details|summary';
 const DEFAULT_TEXT_STYLE_TAGS = 'strong|span|font|b|var|i|em|u|ins|s|strike|del|sub|sup|mark|a|label|code|summary';
-const DEFAULT_ATTRIBUTE_WHITELIST = 'contenteditable|target|href|title|download|rel|src|alt|class|type|controls|colspan|rowspan';
+
+const _video_audio_attr = '|controls|autoplay|loop|muted|poster|preload|playsinline|volume|crossorigin|disableRemotePlayback|controlsList';
+const _iframe_attr = '|allowfullscreen|sandbox|loading|allow|referrerpolicy|frameborder|scrolling';
+const DEFAULT_ATTRIBUTE_WHITELIST = 'contenteditable|target|href|title|download|rel|src|alt|class|type|colspan|rowspan' + _video_audio_attr + _iframe_attr;
 
 const DEFAULT_FORMAT_LINE = 'P|H[1-6]|LI|TH|TD|DETAILS';
 const DEFAULT_FORMAT_BR_LINE = 'PRE';
@@ -19,9 +34,12 @@ const DEFAULT_FORMAT_CLOSURE_BR_LINE = '';
 const DEFAULT_FORMAT_BLOCK = 'BLOCKQUOTE|OL|UL|FIGCAPTION|TABLE|THEAD|TBODY|TR|CAPTION|DETAILS';
 const DEFAULT_FORMAT_CLOSURE_BLOCK = 'TH|TD';
 
+const DEFAULT_ALLOWED_EMPTY_NODE_LIST = '.se-component, pre, blockquote, hr, li, table, img, iframe, video, audio, canvas, details';
+
 const DEFAULT_SIZE_UNITS = ['px', 'pt', 'em', 'rem'];
 
-const DEFAULT_CLASS_NAME = '^__se__|^se-|^katex';
+const DEFAULT_CLASS_NAME = '^__se__|^se-|^katex|^MathJax';
+const DEFAULT_CLASS_MJX = 'mjx-container|mjx-math|mjx-mrow|mjx-mi|mjx-mo|mjx-mn|mjx-msup|mjx-mfrac|mjx-munderover';
 const DEFAULT_EXTRA_TAG_MAP = { script: false, style: false, meta: false, link: false, '[a-z]+:[a-z]+': false };
 
 const DEFAULT_TAG_STYLES = {
@@ -42,6 +60,7 @@ const DEFAULT_CONTENT_STYLES =
 	'margin|margin-block-end|margin-block-start|margin-bottom|margin-inline-end|margin-inline-start|margin-left|margin-right|margin-top|max-width|min-width|' +
 	'outline|overflow|' +
 	'position|padding|padding-bottom|padding-inline-start|padding-left|padding-right|padding-top|' +
+	'page-break-before|page-break-after|page-break-inside|' +
 	'rotate|rotateX|rotateY|' +
 	'table-layout|text-align|text-decoration|text-shadow|text-transform|top|' +
 	'text-indent|text-rendering|' +
@@ -52,8 +71,8 @@ const RETAIN_STYLE_MODE = ['repeat', 'always', 'none'];
 
 export const RO_UNAVAILABD = [
 	'mode',
+	'type',
 	'externalLibs',
-	'keepStyleOnDelete',
 	'iframe',
 	'convertTextTags',
 	'textStyleTags',
@@ -87,23 +106,161 @@ export const RO_UNAVAILABD = [
 ];
 
 /**
- * @description document create
- * @param {Object} options Options
- * @param {Element|Array.<Element>} editorTargets Target textarea
- * @returns {Object}
+ * @typedef {Object} EditorFrameOptions
+ * @property {string} [value=""] - Initial value for the editor.
+ * @property {string} [placeholder=""] - Placeholder text.
+ * @property {Object<string, string>} [editableFrameAttributes={}] - Attributes for the editable frame[.sun-editor-editable]. (e.g. [key]: value)
+ * @property {string} [width="100%"] - Width for the editor.
+ * @property {string} [minWidth=""] - Min width for the editor.
+ * @property {string} [maxWidth=""] - Max width for the editor.
+ * @property {string} [height="auto"] - Height for the editor.
+ * @property {string} [minHeight=""] - Min height for the editor.
+ * @property {string} [maxHeight=""] - Max height for the editor.
+ * @property {string} [editorStyle=""] - Style string of the top frame of the editor. (e.g. "border: 1px solid #ccc;").
+ * @property {boolean} [iframe=false] - Content will be placed in an iframe and isolated from the rest of the page.
+ * @property {boolean} [iframe_fullPage=false] - Allows the usage of HTML, HEAD, BODY tags and DOCTYPE declaration on the "iframe".
+ * @property {Object<string, string>} [iframe_attributes={}] - Attributes of the "iframe". (e.g. {'scrolling': 'no'})
+ * @property {string} [iframe_cssFileName="suneditor"] - Name or Array of the CSS file to apply inside the iframe.
+ * - You can also use regular expressions.
+ * - Applied by searching by filename in the link tag of document,
+ * - or put the URL value (".css" can be omitted).
+ * @property {boolean} [statusbar=true] - Enables the status bar.
+ * @property {boolean} [statusbar_showPathLabel=true] - Displays the current node structure to status bar.
+ * @property {boolean} [statusbar_resizeEnable=true] - Enables resize function of bottom status bar
+ * @property {boolean} [charCounter=false] - Shows the number of characters in the editor.
+ * - If the maxCharCount option has a value, it becomes true.
+ * @property {number} [charCounter_max] - The maximum number of characters allowed to be inserted into the editor.
+ * @property {string} [charCounter_label] - Text to be displayed in the "charCounter" area of the bottom bar. (e.g. "Characters : 20/200")
+ * @property {"char"|"byte"|"byte-html"} [charCounter_type="char"] - Defines the calculation method of the "charCounter" option.
+ * - 'char': Characters length.
+ * - 'byte': Binary data size of characters.
+ * - 'byte-html': Binary data size of the full HTML string.
  */
-const Constructor = function (editorTargets, options) {
+
+/**
+ * @typedef {Object} EditorBaseOptions
+ * @property {Object<string, *>|Array<Object<string, *>>} [plugins] - Plugin configuration.
+ * @property {Array<string>} [excludedPlugins] - Plugin configuration.
+ * @property {Array<string[]|string>} [buttonList] - List of toolbar buttons, grouped by sub-arrays.
+ * @property {boolean} [v2Migration=false] - Enables migration mode for SunEditor v2.
+ * @property {boolean|{tagFilter: boolean, formatFilter: boolean, classFilter: boolean, styleNodeFilter: boolean, attrFilter: boolean, styleFilter: boolean}} [strictMode=true] - Enables strict filtering of tags, attributes, and styles.
+ * @property {"classic"|"inline"|"balloon"|"balloon-always"} [mode="classic"] - Toolbar mode: "classic", "inline", "balloon", "balloon-always".
+ * @property {string} [type=""] - Editor type: "document:header,page".
+ * @property {string} [theme=""] - Editor theme.
+ * @property {Object<string, string>} [lang] - Language configuration.
+ * @property {Array<string>} [fontSizeUnits=["px", "pt", "em", "rem"]] - Allowed font size units.
+ * @property {string} [allowedClassName] - Allowed class names.
+ * @property {boolean} [closeModalOutsideClick=false] - Closes modals when clicking outside.
+ * @property {boolean} [copyFormatKeepOn=false] - Keeps the format of the copied content.
+ * @property {boolean} [syncTabIndent=true] - Synchronizes tab indent with spaces.
+ * @property {boolean} [tabDisable=false] - Disables tab key input.
+ * @property {boolean} [autoLinkify] - Automatically converts URLs into hyperlinks. ("Link" plugin required)
+ * @property {Array<string>} [autoStyleify=["bold", "underline", "italic", "strike"]] - Styles applied automatically on text input.
+ * @property {Object<string, string|number>} [scrollToOptions={behavior: "auto", block: "nearest"}] - Configuration for scroll behavior when navigating editor content.
+ * @property {Object<string, string|number>} [componentScrollToOptions={behavior: "smooth", block: "center"}] - Configuration for scroll behavior when navigating components.
+ * @property {"repeat"|"always"|"none"} [retainStyleMode="repeat"] - This option determines how inline elements (such as <span>, <strong>, etc.) are handled when deleting text.
+ * - "repeat": Inline styles are retained unless the backspace key is repeatedly pressed. If the user continuously presses backspace, the styles will eventually be removed.
+ * - "none": Inline styles are not retained at all. When deleting text, the associated inline elements are immediately removed along with it.
+ * - "always": Inline styles persist indefinitely unless explicitly removed. Even if all text inside an inline element is deleted, the element itself remains until manually removed.
+ * @property {Object<string, boolean>} [allowedExtraTags={script: false, style: false, meta: false, link: false, "[a-z]+:[a-z]+": false}] - Specifies extra allowed or disallowed tags.
+ * @property {Object<string, (...args: *) => *>} [events={}] - Custom event handlers.
+ * @property {string} [__textStyleTags="strong|span|font|b|var|i|em|u|ins|s|strike|del|sub|sup|mark|a|label|code|summary"] - The basic tags that serves as the base for "textStyleTags"
+ * @property {string} [textStyleTags="strong|span|font|b|var|i|em|u|ins|s|strike|del|sub|sup|mark|a|label|code|summary"] - Additional text style tags.
+ * @property {Object<string, string>} [convertTextTags={bold: "strong", underline: "u", italic: "em", strike: "del", subscript: "sub", superscript: "sup"}] - Maps text styles to specific HTML tags.
+ * @property {Object<string, string>} [__tagStyles={'table|th|td': 'border|border-[a-z]+|background-color|text-align|float|font-weight|text-decoration|font-style', 'ol|ul': 'list-style-type'}] - The basic tags that serves as the base for "tagStyles"
+ * @property {Object<string, string>} [tagStyles={}] - Specifies allowed styles for HTML tags.
+ * @property {string} [spanStyles="font-family|font-size|color|background-color"] - Specifies allowed styles for the "span" tag.
+ * @property {string} [lineStyles="text-align|margin-left|margin-right|line-height"] - Specifies allowed styles for the "line" element (p..).
+ * @property {string} [textDirection="ltr"] - Text direction: "ltr" or "rtl".
+ * @property {Array<string>} [reverseButtons=['indent-outdent']] - An array of command pairs whose shortcut icons should be opposite each other, depending on the "textDirection" mode.
+ * @property {number} [historyStackDelayTime=400] - Delay time for history stack updates (ms).
+ * @property {string} [lineAttrReset=""] - Line properties that should be reset when changing lines (e.g. "id|name").
+ * @property {string} [printClass=""] - Class name for printing.
+ * @property {string} [defaultLine="p"] - Default line element when inserting new lines.
+ * @property {string} [__defaultElementWhitelist="br|div"] - Default allowed HTML elements. The default values are maintained.
+ * @property {string} [elementWhitelist=""] - Allowed HTML elements. Delimiter: "|" (e.g. "p|div", "*").
+ * @property {string} [elementBlacklist=""] - Disallowed HTML elements. Delimiter: "|" (e.g. "script|style").
+ * @property {string} [__defaultAttributeWhitelist] - Allowed attributes. Delimiter: "|" (e.g. "href|target").
+ * @property {Object<string, string>} [attributeWhitelist=""] - Allowed attributes. (e.g. {a: "href|target", img: "src|alt"}).
+ * @property {Object<string, string>} [attributeBlacklist=""] - Disallowed attributes. (e.g. {a: "href|target", img: "src|alt"}).
+ * @property {string} [__defaultFormatLine="P|DIV|H[1-6]|LI|TH|TD|DETAILS"] - Overrides the editor's default "line" element.
+ * @property {string} [formatLine="P|DIV|H[1-6]|LI|TH|TD|DETAILS"] - Specifies the editor's "line" elements.
+ * - (P, DIV, H[1-6], PRE, LI | class="__se__format__line_xxx")
+ * - "line" element also contain "brLine" element
+ * @property {string} [__defaultFormatBrLine="PRE"] - Overrides the editor's default "brLine" element.
+ * @property {string} [formatBrLine="PRE"] - Specifies the editor's "brLine" elements. (e.g. "PRE").
+ * - (PRE | class="__se__format__br_line_xxx")
+ * - "brLine" elements is included in the "line" element.
+ * - "brLine" elements's line break is "BR" tag.
+ * ※ Entering the Enter key in the space on the last line ends "brLine" and appends "line".
+ * @property {string} [__defaultFormatClosureBrLine=""] - Overrides the editor's default "closureBrLine" element.
+ * @property {string} [formatClosureBrLine=""] - Specifies the editor's "closureBrLine" elements.
+ * - (class="__se__format__br_line__closure_xxx")
+ * - "closureBrLine" elements is included in the "brLine".
+ * - "closureBrLine" elements's line break is "BR" tag.
+ * - ※ You cannot exit this format with the Enter key or Backspace key.
+ * - ※ Use it only in special cases. ([ex] format of table cells)
+ * @property {string} [__defaultFormatBlock="BLOCKQUOTE|OL|UL|FIGCAPTION|TABLE|THEAD|TBODY|TR|CAPTION|DETAILS"] - Overrides the editor's default "block" element.
+ * @property {string} [formatBlock="BLOCKQUOTE|OL|UL|FIGCAPTION|TABLE|THEAD|TBODY|TR|CAPTION|DETAILS"] - Specifies the editor's "block" elements.
+ * - (BLOCKQUOTE, OL, UL, FIGCAPTION, TABLE, THEAD, TBODY, TR, TH, TD | class="__se__format__block_xxx")
+ * - "block" is wrap the "line" and "component"
+ * @property {string} [__defaultFormatClosureBlock="TH|TD"] - Overrides the editor's default "closureBlock" element.
+ * @property {string} [formatClosureBlock="TH|TD"] - Specifies the editor's "closureBlock" elements.
+ * - (TH, TD | class="__se__format__block_closure_xxx")
+ * - "closureBlock" elements is included in the "block".
+ * - "closureBlock" element is wrap the "line" and "component"
+ * - ※ You cannot exit this format with the Enter key or Backspace key.
+ * - ※ Use it only in special cases. ([ex] format of table cells)
+ * @property {string} [allowedEmptyTags=".se-component, pre, blockquote, hr, li, table, img, iframe, video, audio, canvas, details"] - Allowed empty tags.
+ * @property {number|string} [toolbar_width="auto"] - Toolbar width.
+ * @property {Element|string} [toolbar_container] - Container element for the toolbar.
+ * @property {number} [toolbar_sticky=0] - Enables sticky toolbar with optional offset.
+ * @property {boolean} [toolbar_hide=false] - Hides toolbar initially.
+ * @property {Object} [subToolbar] - Sub-toolbar configuration.
+ * @property {Array<Array<string>>} [subToolbar.buttonList] - List of Sub-toolbar buttons, grouped by sub-arrays.
+ * @property {"balloon"|"balloon-always"} [subToolbar.mode="balloon"] - Sub-toolbar mode: "balloon", "balloon-always".
+ * @property {number|string} [subToolbar.width="auto"] - Sub-toolbar width.
+ * @property {Element|string} [statusbar_container] - Container element for the status bar.
+ * @property {boolean} [shortcutsHint=true] - Displays shortcut hints in tooltips.
+ * @property {boolean} [shortcutsDisable=false] - Disables keyboard shortcuts.
+ * @property {Object<string, Array<string>>} [shortcuts] - Custom keyboard shortcuts.
+ * @property {number} [fullScreenOffset=0] - Offset applied when entering fullscreen mode.
+ * @property {string} [previewTemplate] - Custom template for preview mode.
+ * @property {string} [printTemplate] - Custom template for print mode.
+ * @property {boolean} [componentAutoSelect=false] - Enables automatic selection of inserted components.
+ * @property {string} [defaultUrlProtocol] - Default URL protocol for links.
+ * @property {string} [allUsedStyles] - Specifies additional styles to the list of allowed styles. Delimiter: "|" (e.g. "color|background-color").
+ * @property {Object<string, string>} [icons] - Overrides the default icons.
+ * @property {string} [freeCodeViewMode=false] - Enables free code view mode.
+ * @property {boolean} [__lineFormatFilter=true] - Line format filter configuration.
+ * @property {boolean} [__pluginRetainFilter=true] - Plugin retain filter configuration.
+ * @property {Array<string>} [__listCommonStyle=["fontSize", "color", "fontFamily", "fontWeight", "fontStyle"]] - Defines the list of styles that are applied directly to the `<li>` element
+ * - when a text style is applied to the entire list item.
+ * - For example, when changing the font size or color of a list item (`<li>`),
+ * - these styles will be applied to the `<li>` tag instead of wrapping the content inside additional tags.
+ * @property {Object<string, *>} [externalLibs] - External libraries like CodeMirror or MathJax.
+ * @property {Object<string, *>} [PluginOptions] - Dynamic plugin options, where the key is the plugin name and the value is its configuration.
+ */
+
+/**
+ * @typedef {EditorBaseOptions & EditorFrameOptions} EditorInitOptions
+ */
+
+/**
+ * @description Creates a new SunEditor instance with specified options.
+ * @param {Array<{target: Element, key: *, options: EditorFrameOptions}>} editorTargets - Target element or multi-root object.
+ * @param {EditorInitOptions} options - Configuration options for the editor.
+ * @returns {Object<string, *>} - SunEditor instance with context, options, and DOM elements.
+ */
+function Constructor(editorTargets, options) {
 	if (typeof options !== 'object') options = {};
 
 	/** --- Plugins ------------------------------------------------------------------------------------------ */
 	const plugins = {};
 	if (options.plugins) {
+		const excludedPlugins = options.excludedPlugins || [];
 		const originPlugins = options.plugins;
-		const pluginsValues = Array.isArray(originPlugins.length)
-			? originPlugins
-			: Object.keys(originPlugins).map(function (name) {
-					return originPlugins[name];
-			  });
+		const pluginsValues = (Array.isArray(originPlugins) ? originPlugins : Object.keys(originPlugins)).filter((name) => !excludedPlugins.includes(name)).map((name) => originPlugins[name]);
 
 		for (let i = 0, len = pluginsValues.length, p; i < len; i++) {
 			p = pluginsValues[i].default || pluginsValues[i];
@@ -112,39 +269,41 @@ const Constructor = function (editorTargets, options) {
 	}
 
 	/** --- options --------------------------------------------------------------- */
-	const optionMap = InitOptions(options, editorTargets);
+	const optionMap = InitOptions(options, editorTargets, plugins);
 	const o = optionMap.o;
 	const icons = optionMap.i;
 	const lang = optionMap.l;
-	const loadingBox = domUtils.createElement('DIV', { class: 'se-loading-box sun-editor-common' }, '<div class="se-loading-effect"></div>');
+	const loadingBox = dom.utils.createElement('DIV', { class: 'se-loading-box sun-editor-common' }, '<div class="se-loading-effect"></div>');
 
 	/** --- carrier wrapper --------------------------------------------------------------- */
-	const editor_carrier_wrapper = domUtils.createElement('DIV', { class: 'sun-editor sun-editor-carrier-wrapper sun-editor-common' + (o.get('_rtl') ? ' se-rtl' : '') });
+	const editor_carrier_wrapper = dom.utils.createElement('DIV', { class: 'sun-editor sun-editor-carrier-wrapper sun-editor-common' + o.get('_themeClass') + (o.get('_rtl') ? ' se-rtl' : '') });
 	// menuTray
-	const menuTray = domUtils.createElement('DIV', { class: 'se-menu-tray' });
+	const menuTray = dom.utils.createElement('DIV', { class: 'se-menu-tray' });
 	editor_carrier_wrapper.appendChild(menuTray);
 	// focus temp element
-	const focusTemp = domUtils.createElement('INPUT', {
-		class: '__se__focus__temp__',
-		style: 'position: absolute !important; top: -10000px !important; display: block !important; width: 0 !important; height: 0 !important; margin: 0 !important; padding: 0 !important;'
-	});
+	const focusTemp = /** @type {HTMLInputElement} */ (
+		dom.utils.createElement('INPUT', {
+			class: '__se__focus__temp__',
+			style: 'position: fixed !important; top: -10000px !important; left: -10000px !important; display: block !important; width: 0 !important; height: 0 !important; margin: 0 !important; padding: 0 !important;'
+		})
+	);
 	focusTemp.tabIndex = 0;
 	editor_carrier_wrapper.appendChild(focusTemp);
 
 	// modal
-	const modal = domUtils.createElement('DIV', { class: 'se-modal sun-editor-common' });
-	const modal_back = domUtils.createElement('DIV', { class: 'se-modal-back', style: 'display: none;' });
-	const modal_inner = domUtils.createElement('DIV', { class: 'se-modal-inner', style: 'display: none;' });
+	const modal = dom.utils.createElement('DIV', { class: 'se-modal sun-editor-common' });
+	const modal_back = dom.utils.createElement('DIV', { class: 'se-modal-back', style: 'display: none;' });
+	const modal_inner = dom.utils.createElement('DIV', { class: 'se-modal-inner', style: 'display: none;' });
 	modal.appendChild(modal_back);
 	modal.appendChild(modal_inner);
 	editor_carrier_wrapper.appendChild(modal);
 
 	// loding box, resizing back
-	editor_carrier_wrapper.appendChild(domUtils.createElement('DIV', { class: 'se-back-wrapper' }));
+	editor_carrier_wrapper.appendChild(dom.utils.createElement('DIV', { class: 'se-back-wrapper' }));
 	editor_carrier_wrapper.appendChild(loadingBox.cloneNode(true));
 
 	// drag cursor
-	const dragCursor = domUtils.createElement('DIV', { class: 'se-drag-cursor' });
+	const dragCursor = dom.utils.createElement('DIV', { class: 'se-drag-cursor' });
 	editor_carrier_wrapper.appendChild(dragCursor);
 
 	// set carrier wrapper
@@ -163,7 +322,7 @@ const Constructor = function (editorTargets, options) {
 	} else if (/balloon/i.test(o.get('mode'))) {
 		toolbar.className += ' se-toolbar-balloon';
 		toolbar.style.width = o.get('toolbar_width');
-		toolbar.appendChild(domUtils.createElement('DIV', { class: 'se-arrow' }));
+		toolbar.appendChild(dom.utils.createElement('DIV', { class: 'se-arrow' }));
 	}
 
 	/** --- subToolbar --------------------------------------------------------------- */
@@ -174,7 +333,7 @@ const Constructor = function (editorTargets, options) {
 		// subbar mode must be balloon-*
 		subbar.className += ' se-toolbar-balloon se-toolbar-sub';
 		subbar.style.width = o.get('toolbar.sub_width');
-		subbar.appendChild(domUtils.createElement('DIV', { class: 'se-arrow' }));
+		subbar.appendChild(dom.utils.createElement('DIV', { class: 'se-arrow' }));
 	}
 
 	/** frame - root set - start -------------------------------------------------------------- */
@@ -185,12 +344,12 @@ const Constructor = function (editorTargets, options) {
 	let default_status_bar = null;
 	for (let i = 0, len = editorTargets.length; i < len; i++) {
 		const editTarget = editorTargets[i];
-		const to = editTarget.options;
-		const top_div = domUtils.createElement('DIV', { class: 'sun-editor' + (to.get('_rtl') ? ' se-rtl' : '') });
-		const container = domUtils.createElement('DIV', { class: 'se-container' });
-		const editor_div = domUtils.createElement('DIV', { class: 'se-wrapper' });
+		const to = optionMap.frameMap.get(editTarget.key);
+		const top_div = dom.utils.createElement('DIV', { class: 'sun-editor' + o.get('_themeClass') + (to.get('_rtl') ? ' se-rtl' : '') });
+		const container = dom.utils.createElement('DIV', { class: 'se-container' });
+		const editor_div = dom.utils.createElement('DIV', { class: 'se-wrapper' + (o.get('type') === 'document' ? ' se-type-document' : '') });
 
-		container.appendChild(domUtils.createElement('DIV', { class: 'se-toolbar-shadow' }));
+		container.appendChild(dom.utils.createElement('DIV', { class: 'se-toolbar-shadow' }));
 
 		// init element
 		const initElements = _initTargetElements(editTarget.key, o, top_div, to);
@@ -201,22 +360,22 @@ const Constructor = function (editorTargets, options) {
 		let textarea = initElements.codeView;
 
 		// line breaker
-		const line_breaker_t = domUtils.createElement('DIV', { class: 'se-line-breaker-component se-line-breaker-component-t', title: lang.insertLine }, icons.line_break);
-		const line_breaker_b = domUtils.createElement('DIV', { class: 'se-line-breaker-component se-line-breaker-component-b', title: lang.insertLine }, icons.line_break);
+		const line_breaker_t = dom.utils.createElement('DIV', { class: 'se-line-breaker-component se-line-breaker-component-t', title: lang.insertLine }, icons.line_break);
+		const line_breaker_b = dom.utils.createElement('DIV', { class: 'se-line-breaker-component se-line-breaker-component-b', title: lang.insertLine }, icons.line_break);
 
 		editor_div.appendChild(line_breaker_t);
 		editor_div.appendChild(line_breaker_b);
 
 		// append container
 		if (placeholder_span) editor_div.appendChild(placeholder_span);
-		container.appendChild(domUtils.createElement('DIV', { class: 'se-toolbar-sticky-dummy' }));
+		container.appendChild(dom.utils.createElement('DIV', { class: 'se-toolbar-sticky-dummy' }));
 		container.appendChild(editor_div);
 
 		// statusbar
 		if (statusbar) {
 			if (statusbarContainer) {
 				if (!default_status_bar) {
-					statusbarContainer.appendChild(domUtils.createElement('DIV', { class: 'sun-editor' }, statusbar));
+					statusbarContainer.appendChild(dom.utils.createElement('DIV', { class: 'sun-editor' + o.get('_themeClass') }, statusbar));
 					default_status_bar = statusbar;
 				}
 			} else {
@@ -231,7 +390,7 @@ const Constructor = function (editorTargets, options) {
 		const key = editTarget.key || null;
 
 		// code view - wrapper
-		const codeWrapper = domUtils.createElement('DIV', { class: 'se-code-wrapper' }, textarea);
+		const codeWrapper = dom.utils.createElement('DIV', { class: 'se-code-wrapper' }, textarea);
 		codeWrapper.style.setProperty('display', 'none', 'important');
 		editor_div.appendChild(codeWrapper);
 
@@ -240,29 +399,46 @@ const Constructor = function (editorTargets, options) {
 		// not used code mirror
 		if (textarea === codeMirrorEl) {
 			// add line nubers
-			const codeNumbers = domUtils.createElement('TEXTAREA', { class: 'se-code-view-line', readonly: 'true' }, null);
+			const codeNumbers = dom.utils.createElement('TEXTAREA', { class: 'se-code-view-line', readonly: 'true' }, null);
 			codeWrapper.insertBefore(codeNumbers, textarea);
 		} else {
 			textarea = codeMirrorEl;
 		}
 
+		// document type
+		const documentTypeInner = { inner: null, page: null, pageMirror: null };
+		if (o.get('type-options').includes('header')) {
+			documentTypeInner.inner = dom.utils.createElement('DIV', { class: 'se-document-lines', style: `height: ${to.get('height')};` }, '<div class="se-document-lines-inner"></div>');
+		}
+		if (o.get('type-options').includes('page')) {
+			documentTypeInner.page = dom.utils.createElement('DIV', { class: 'se-document-page' }, null);
+			documentTypeInner.pageMirror = dom.utils.createElement(
+				'DIV',
+				{
+					class: 'sun-editor-editable se-document-page-mirror-a4',
+					style: `position: absolute; width: 21cm; columns: 21cm; border: 0; overflow: hidden; height: auto; top: -10000px; left: -10000px;`
+				},
+				null
+			);
+		}
+
 		// set container
 		top_div.appendChild(container);
 		rootKeys.push(key);
-		frameRoots.set(key, CreateFrameContext(editTarget, top_div, wysiwyg_div, codeWrapper, textarea, default_status_bar || statusbar, key));
+		frameRoots.set(key, CreateFrameContext({ target: editTarget.target, key: editTarget.key, options: to }, top_div, wysiwyg_div, codeWrapper, textarea, default_status_bar || statusbar, documentTypeInner, key));
 	}
 	/** frame - root set - end -------------------------------------------------------------- */
 
 	// toolbar container
 	const toolbar_container = o.get('toolbar_container');
 	if (toolbar_container) {
-		const top_div = domUtils.createElement('DIV', { class: 'sun-editor' + (o.get('_rtl') ? ' se-rtl' : '') });
-		const container = domUtils.createElement('DIV', { class: 'se-container' });
+		const top_div = dom.utils.createElement('DIV', { class: 'sun-editor' + o.get('_themeClass') + (o.get('_rtl') ? ' se-rtl' : '') });
+		const container = dom.utils.createElement('DIV', { class: 'se-container' });
 		container.appendChild(toolbar);
 		if (subbar) container.appendChild(subbar);
 		top_div.appendChild(container);
 		toolbar_container.appendChild(top_div);
-		toolbar_container.appendChild(domUtils.createElement('DIV', { class: 'se-toolbar-sticky-dummy' }));
+		toolbar_container.appendChild(dom.utils.createElement('DIV', { class: 'se-toolbar-sticky-dummy' }));
 	} else {
 		const rootContainer = frameRoots.get(rootId).get('container');
 		rootContainer.insertBefore(toolbar, rootContainer.firstElementChild);
@@ -285,30 +461,74 @@ const Constructor = function (editorTargets, options) {
 		pluginCallButtons_sub: sub_main ? sub_main.pluginCallButtons : [],
 		responsiveButtons_sub: sub_main ? sub_main.responsiveButtons : []
 	};
-};
+}
 
 /**
  * @description Create shortcuts desc span.
  * @param {string} command Command string
- * @param {Array.<string>} values options.shortcuts[command]
- * @param {Element} button Command button element
- * @param {Map} keyMap Map to store shortcut key info
+ * @param {Array<string>} values options.shortcuts[command]
+ * @param {Element|null} button Command button element
+ * @param {Map<string, *>} keyMap Map to store shortcut key info
  * @param {Array} rc "_reverseCommandArray" option
  * @param {Array} reverseKeys Reverse key array
  */
 export function CreateShortcuts(command, button, values, keyMap, rc, reverseKeys) {
 	if (!values || values.length < 2) return;
-	const tooptip = button.querySelector('.se-tooltip-text');
+	const tooptip = button?.querySelector('.se-tooltip-text');
+
+	for (let i = 0, a, v, c, s, edge, space, enter, textTrigger, plugin, method, t, k, r, _i; i < values.length; i += 2 + _i) {
+		_i = 0;
+		a = values[i].split('+');
+
+		plugin = null;
+		method = a.at(-1).trim?.();
+		if (method.startsWith('~')) {
+			plugin = command;
+			method = a.pop().trim().substring(1);
+		} else if (method.startsWith('p~')) {
+			const a_ = a.pop().trim().substring(2).split('.');
+			plugin = a_[0];
+			method = a_[1];
+		} else if (method.startsWith('$')) {
+			_i = 1;
+			method = values[i + 2];
+		} else {
+			method = '';
+		}
+
+		c = s = edge = space = enter = textTrigger = v = null;
+		for (const a_ of a) {
+			switch (a_.trim()) {
+				case 'c':
+					c = true;
+					break;
+				case '!':
+					edge = true;
+					break;
+				case 's':
+					s = true;
+					break;
+				case '_':
+					space = true;
+					break;
+				case '=':
+					textTrigger = true;
+					break;
+				case '/':
+					enter = true;
+					break;
+				default:
+					v = a_;
+			}
+		}
 
-	for (let i = 0, v, s, t, k, r; i < values.length; i += 2) {
-		v = values[i];
-		s = /^s/i.test(v);
-		k = numbers.get(v) + (s ? 1000 : 0);
+		k = c ? v + (s ? '1000' : '') : v;
 		if (!keyMap.has(k)) {
 			r = rc.indexOf(command);
 			r = r === -1 ? '' : numbers.isOdd(r) ? rc[r + 1] : rc[r - 1];
 			if (r) reverseKeys.push(k);
-			keyMap.set(k, { c: command, r: r, t: button.getAttribute('data-type'), e: button });
+
+			keyMap.set(k, { c, s, edge, space, enter, textTrigger, plugin, command, method, r, type: button?.getAttribute('data-type'), button, key: k });
 		}
 
 		if (!(t = values[i + 1])) continue;
@@ -317,13 +537,15 @@ export function CreateShortcuts(command, button, values, keyMap, rc, reverseKeys
 }
 
 function _addTooltip(tooptipBtn, shift, shortcut) {
-	tooptipBtn.appendChild(domUtils.createElement('SPAN', { class: 'se-shortcut' }, env.cmdIcon + (shift ? env.shiftIcon : '') + '+<span class="se-shortcut-key">' + shortcut + '</span>'));
+	tooptipBtn.appendChild(dom.utils.createElement('SPAN', { class: 'se-shortcut' }, env.cmdIcon + (shift ? env.shiftIcon : '') + '+<span class="se-shortcut-key">' + shortcut + '</span>'));
 }
 
 /**
+ * @private
  * @description Returns a new object with merge "a" and "b"
- * @param {Object} obj object
- * @returns {Object}
+ * @param {Object<*, *>} a object
+ * @param {Object<*, *>} b object
+ * @returns {Object<*, *>} new object
  */
 function _mergeObject(a, b) {
 	return [a, b].reduce((_default, _new) => {
@@ -336,11 +558,20 @@ function _mergeObject(a, b) {
 
 /**
  * @description Initialize options
- * @param {Object} options Options object
- * @param {Array.<Element>} editorTargets Target textarea
- * @returns {o:Map, p:Map} {{o: options map, p: plugins map}}
+ * @param {EditorInitOptions} options Configuration options for the editor.
+ * @param {Array<{target: Element, key: *, options: EditorFrameOptions}>} editorTargets Target textarea
+ * @param {Object<string, *>} plugins Plugins object
+ * @returns {{o: Map<string, *>, i: Object<string, string>, l: Object<string, string>, v: string, buttons: Array<string[]|string>, subButtons: Array<string[]|string>, statusbarContainer: Element|null, frameMap: Map<*, *>}}
+ * - o: options
+ * - i: icons
+ * - l: lang
+ * - v: value
+ * - buttons: Toolbar button list
+ * - subButtons: Sub-Toolbar button list
+ * - statusbarContainer: statusbar container
+ * - frameMap: converted options map
  */
-export function InitOptions(options, editorTargets) {
+export function InitOptions(options, editorTargets, plugins) {
 	const buttonList = options.buttonList || DEFAULT_BUTTON_LIST;
 	const o = new Map();
 
@@ -349,7 +580,11 @@ export function InitOptions(options, editorTargets) {
 		if (!options.toolbar_container && !/inline|balloon/i.test(options.mode)) throw Error('[SUNEDITOR.create.fail] In multi root, The "mode" option cannot be "classic" without using the "toolbar_container" option.');
 	}
 
+	// migration data-.+
+	o.set('v2Migration', !!options.v2Migration);
+
 	/** Base */
+	o.set('buttons', new Set(buttonList.toString().split(',')));
 	const modeValue = options.strictMode !== false;
 	o.set('strictMode', {
 		tagFilter: modeValue,
@@ -358,13 +593,32 @@ export function InitOptions(options, editorTargets) {
 		styleNodeFilter: modeValue,
 		attrFilter: modeValue,
 		styleFilter: modeValue,
-		...options.strictMode
+		...(typeof options.strictMode === 'boolean' ? {} : options.strictMode)
 	});
+	o.set('freeCodeViewMode', !!options.freeCodeViewMode);
+	o.set('__lineFormatFilter', options.__lineFormatFilter ?? true);
+	o.set('__pluginRetainFilter', options.__pluginRetainFilter ?? true);
 	o.set('mode', options.mode || 'classic'); // classic, inline, balloon, balloon-always
+	o.set('type', options.type?.split(':')[0] || ''); // document:header,page
+	o.set('theme', options.theme || '');
+	o.set('_themeClass', options.theme ? ` se-theme-${options.theme}` : '');
+	o.set('type-options', options.type?.split(':')[1] || '');
 	o.set('externalLibs', options.externalLibs || {});
-	o.set('keepStyleOnDelete', !!options.keepStyleOnDelete);
 	o.set('fontSizeUnits', Array.isArray(options.fontSizeUnits) && options.fontSizeUnits.length > 0 ? options.fontSizeUnits.map((v) => v.toLowerCase()) : DEFAULT_SIZE_UNITS);
 	o.set('allowedClassName', new RegExp(`${options.allowedClassName && typeof options.allowedClassName === 'string' ? options.allowedClassName + '|' : ''}${DEFAULT_CLASS_NAME}`));
+	o.set('closeModalOutsideClick', !!options.closeModalOutsideClick);
+
+	// format
+	o.set('copyFormatKeepOn', !!options.copyFormatKeepOn);
+	o.set('syncTabIndent', options.syncTabIndent ?? true);
+
+	// auto convert on paste
+	o.set('autoLinkify', options.autoLinkify ?? !!plugins.link);
+	o.set('autoStyleify', Array.isArray(options.autoStyleify) ? options.autoStyleify : ['bold', 'underline', 'italic', 'strike']);
+
+	// scroll options
+	o.set('scrollToOptions', { behavior: 'auto', block: 'nearest', ...options.scrollToOptions });
+	o.set('componentScrollToOptions', { behavior: 'smooth', block: 'center', ...options.componentScrollToOptions });
 
 	let retainStyleMode = options.retainStyleMode;
 	if (typeof retainStyleMode === 'string' && !RETAIN_STYLE_MODE.includes(retainStyleMode)) {
@@ -448,6 +702,7 @@ export function InitOptions(options, editorTargets) {
 	// text direction
 	o.set('textDirection', typeof options.textDirection !== 'string' ? 'ltr' : options.textDirection);
 	o.set('_rtl', o.get('textDirection') === 'rtl');
+	// An array of key codes generated with the reverseButtons option, used to reverse the action for a specific key combination.
 	o.set('reverseCommands', ['indent-outdent'].concat(options.reverseButtons || []));
 	o.set('_reverseCommandArray', ('-' + o.get('reverseCommands').join('-')).split('-'));
 	if (numbers.isEven(o.get('_reverseCommandArray').length)) {
@@ -456,16 +711,17 @@ export function InitOptions(options, editorTargets) {
 
 	// etc
 	o.set('historyStackDelayTime', typeof options.historyStackDelayTime === 'number' ? options.historyStackDelayTime : 400);
-	o.set('_editableClass', 'sun-editor-editable' + (o.get('_rtl') ? ' se-rtl' : ''));
+	o.set('_editableClass', 'sun-editor-editable' + o.get('_themeClass') + (o.get('_rtl') ? ' se-rtl' : '') + (o.get('type') === 'document' ? ' se-type-document-editable' : ''));
 	o.set('lineAttrReset', ['id'].concat(options.lineAttrReset && typeof options.lineAttrReset === 'string' ? options.lineAttrReset.toLowerCase().split('|') : []));
-	o.set('printClass', typeof options.printClass === 'string' ? options.printClass : null);
+	o.set('printClass', typeof options.printClass === 'string' ? options.printClass + ' ' + o.get('_editableClass') : null);
 
 	/** whitelist, blacklist */
 	// default line
 	o.set('defaultLine', typeof options.defaultLine === 'string' && options.defaultLine.length > 0 ? options.defaultLine : 'p');
 	// element
 	const elw = (typeof options.elementWhitelist === 'string' ? options.elementWhitelist : '').toLowerCase();
-	o.set('elementWhitelist', elw + (elw ? '|' : '') + o.get('_allowedExtraTag'));
+	const mjxEls = o.get('externalLibs').mathjax ? DEFAULT_CLASS_MJX + '|' : '';
+	o.set('elementWhitelist', elw + (elw ? '|' : '') + mjxEls + o.get('_allowedExtraTag'));
 	const elb = _createBlacklist((typeof options.elementBlacklist === 'string' ? options.elementBlacklist : '').toLowerCase(), o.get('defaultLine'));
 	o.set('elementBlacklist', elb + (elb ? '|' : '') + o.get('_disallowedExtraTag'));
 	// attribute
@@ -519,6 +775,8 @@ export function InitOptions(options, editorTargets) {
 		)
 	);
 
+	o.set('allowedEmptyTags', DEFAULT_ALLOWED_EMPTY_NODE_LIST + (options.allowedEmptyTags ? ', ' + options.allowedEmptyTags : ''));
+
 	/** __defaults */
 	o.set('__defaultElementWhitelist', REQUIRED_ELEMENT_WHITELIST + '|' + (typeof options.__defaultElementWhitelist === 'string' ? options.__defaultElementWhitelist : DEFAULT_ELEMENT_WHITELIST).toLowerCase());
 	o.set('__defaultAttributeWhitelist', (typeof options.__defaultAttributeWhitelist === 'string' ? options.__defaultAttributeWhitelist : DEFAULT_ATTRIBUTE_WHITELIST).toLowerCase());
@@ -528,7 +786,7 @@ export function InitOptions(options, editorTargets) {
 	/** Toolbar */
 	o.set('toolbar_width', options.toolbar_width ? (numbers.is(options.toolbar_width) ? options.toolbar_width + 'px' : options.toolbar_width) : 'auto');
 	o.set('toolbar_container', options.toolbar_container && !/inline/i.test(o.get('mode')) ? (typeof options.toolbar_container === 'string' ? _d.querySelector(options.toolbar_container) : options.toolbar_container) : null);
-	o.set('toolbar_sticky', /balloon/i.test(o.get('mode')) ? -1 : options.toolbar_sticky === undefined ? 0 : /^\d+/.test(options.toolbar_sticky) ? numbers.get(options.toolbar_sticky, 0) : -1);
+	o.set('toolbar_sticky', /balloon/i.test(o.get('mode')) ? -1 : options.toolbar_sticky === undefined ? 0 : numbers.is(options.toolbar_sticky) ? numbers.get(options.toolbar_sticky, 0) : -1);
 	o.set('toolbar_hide', !!options.toolbar_hide);
 
 	/** subToolbar */
@@ -541,12 +799,14 @@ export function InitOptions(options, editorTargets) {
 			o.set('_subMode', subbar.mode || 'balloon');
 			o.set('toolbar.sub_width', subbar.width ? (numbers.is(subbar.width) ? subbar.width + 'px' : subbar.width) : 'auto');
 			subButtons = o.get('_rtl') ? subbar.buttonList.reverse() : subbar.buttonList;
+			o.set('buttons_sub', new Set(subButtons.toString().split(',')));
 		}
 	}
 
 	/** root options */
+	const frameMap = new Map();
 	for (let i = 0, len = editorTargets.length; i < len; i++) {
-		InitFrameOptions(editorTargets[i].options || {}, options, (editorTargets[i].options = new Map()));
+		frameMap.set(editorTargets[i].key, InitFrameOptions(editorTargets[i].options || {}, options));
 	}
 
 	/** Key actions */
@@ -557,20 +817,25 @@ export function InitOptions(options, editorTargets) {
 		: [
 				{
 					// default command
-					selectAll: ['65', 'A'],
-					bold: ['66', 'B'],
-					strike: ['s83', 'S'],
-					underline: ['85', 'U'],
-					italic: ['73', 'I'],
-					redo: ['89', 'Y', 's90', 'Z'],
-					undo: ['90', 'Z'],
-					indent: ['221', ']'],
-					outdent: ['219', '['],
-					sup: ['187', '='],
-					sub: ['s187', '='],
-					save: ['83', 'S'],
+					selectAll: ['c+KeyA', 'A'],
+					bold: ['c+KeyB', 'B'],
+					strike: ['c+s+KeyS', 'S'],
+					underline: ['c+KeyU', 'U'],
+					italic: ['c+KeyI', 'I'],
+					redo: ['c+KeyY', 'Y', 'c+s+KeyZ', 'Z'],
+					undo: ['c+KeyZ', 'Z'],
+					indent: ['c+BracketRight', ']'],
+					outdent: ['c+BracketLeft', '['],
+					save: ['c+KeyS', 'S'],
 					// plugins
-					link: ['75', 'K']
+					link: ['c+KeyK', 'K'],
+					hr: ['!+---+=+~shortcut', ''],
+					list_numbered: ['!+1.+_+~shortcut', ''],
+					list_bulleted: ['!+*.+_+~shortcut', ''],
+					// custom
+					_h1: ['c+s+Digit1+p~formatBlock.createHeader', ''],
+					_h2: ['c+s+Digit2+p~formatBlock.createHeader', ''],
+					_h3: ['c+s+Digit3+p~formatBlock.createHeader', '']
 				},
 				options.shortcuts || {}
 		  ].reduce((_default, _new) => {
@@ -582,12 +847,12 @@ export function InitOptions(options, editorTargets) {
 	o.set('shortcuts', shortcuts);
 
 	/** View */
-	o.set('fullScreenOffset', options.fullScreenOffset === undefined ? 0 : /^\d+/.test(options.fullScreenOffset) ? numbers.get(options.fullScreenOffset, 0) : 0);
+	o.set('fullScreenOffset', options.fullScreenOffset === undefined ? 0 : numbers.is(options.fullScreenOffset) ? numbers.get(options.fullScreenOffset, 0) : 0);
 	o.set('previewTemplate', typeof options.previewTemplate === 'string' ? options.previewTemplate : null);
 	o.set('printTemplate', typeof options.printTemplate === 'string' ? options.printTemplate : null);
 
 	/** --- Media select */
-	o.set('mediaAutoSelect', options.mediaAutoSelect === undefined ? true : !!options.mediaAutoSelect);
+	o.set('componentAutoSelect', options.componentAutoSelect === undefined ? false : !!options.componentAutoSelect);
 
 	/** --- Url input protocol */
 	o.set('defaultUrlProtocol', typeof options.defaultUrlProtocol === 'string' ? options.defaultUrlProtocol : null);
@@ -651,42 +916,49 @@ export function InitOptions(options, editorTargets) {
 	return {
 		o: o,
 		i: icons,
-		l: options.lang || _defaultLang,
+		l: /** @type {Object<string, string>} */ (options.lang || _defaultLang),
 		v: (options.value = typeof options.value === 'string' ? options.value : null),
 		buttons: o.get('_rtl') ? buttonList.reverse() : buttonList,
 		subButtons: subButtons,
-		statusbarContainer: typeof options.statusbar_container === 'string' ? _d.querySelector(options.statusbar_container) : options.statusbar_container
+		statusbarContainer: typeof options.statusbar_container === 'string' ? _d.querySelector(options.statusbar_container) : options.statusbar_container,
+		frameMap: frameMap
 	};
 }
 
+/**
+ * @description Create a context object for the editor frame.
+ * @param {Map<string, *>} targetOptions - editor.frameOptions
+ * @param {HTMLElement} statusbar - statusbar element
+ * @returns {{statusbar: HTMLElement, navigation: HTMLElement, charWrapper: HTMLElement, charCounter: HTMLElement}}
+ */
 export function CreateStatusbar(targetOptions, statusbar) {
 	let navigation = null;
 	let charWrapper = null;
 	let charCounter = null;
 
 	if (targetOptions.get('statusbar')) {
-		statusbar = statusbar || domUtils.createElement('DIV', { class: 'se-status-bar sun-editor-common' });
+		statusbar = statusbar || dom.utils.createElement('DIV', { class: 'se-status-bar sun-editor-common' });
 
 		/** navigation */
-		navigation = statusbar.querySelector('.se-navigation') || domUtils.createElement('DIV', { class: 'se-navigation sun-editor-common' });
+		navigation = statusbar.querySelector('.se-navigation') || dom.utils.createElement('DIV', { class: 'se-navigation sun-editor-common' });
 		statusbar.appendChild(navigation);
 
 		/** char counter */
 		if (targetOptions.get('charCounter')) {
-			charWrapper = statusbar.querySelector('.se-char-counter-wrapper') || domUtils.createElement('DIV', { class: 'se-char-counter-wrapper' });
+			charWrapper = statusbar.querySelector('.se-char-counter-wrapper') || dom.utils.createElement('DIV', { class: 'se-char-counter-wrapper' });
 
 			if (targetOptions.get('charCounter_label')) {
-				const charLabel = charWrapper.querySelector('.se-char-label') || domUtils.createElement('SPAN', { class: 'se-char-label' });
+				const charLabel = charWrapper.querySelector('.se-char-label') || dom.utils.createElement('SPAN', { class: 'se-char-label' });
 				charLabel.textContent = targetOptions.get('charCounter_label');
 				charWrapper.appendChild(charLabel);
 			}
 
-			charCounter = charWrapper.querySelector('.se-char-counter') || domUtils.createElement('SPAN', { class: 'se-char-counter' });
+			charCounter = charWrapper.querySelector('.se-char-counter') || dom.utils.createElement('SPAN', { class: 'se-char-counter' });
 			charCounter.textContent = '0';
 			charWrapper.appendChild(charCounter);
 
 			if (targetOptions.get('charCounter_max') > 0) {
-				const char_max = charWrapper.querySelector('.se-char-max') || domUtils.createElement('SPAN', { class: 'se-char-max' });
+				const char_max = charWrapper.querySelector('.se-char-max') || dom.utils.createElement('SPAN', { class: 'se-char-max' });
 				char_max.textContent = ' / ' + targetOptions.get('charCounter_max');
 				charWrapper.appendChild(char_max);
 			}
@@ -697,13 +969,21 @@ export function CreateStatusbar(targetOptions, statusbar) {
 
 	return {
 		statusbar: statusbar,
-		navigation: navigation,
-		charWrapper: charWrapper,
-		charCounter: charCounter
+		navigation: /** @type {HTMLElement} */ (navigation),
+		charWrapper: /** @type {HTMLElement} */ (charWrapper),
+		charCounter: /** @type {HTMLElement} */ (charCounter)
 	};
 }
 
-function InitFrameOptions(o, origin, fo) {
+/**
+ * @description Initialize options.
+ * @param {EditorFrameOptions} o - Target options
+ * @param {EditorInitOptions} origin - Full options
+ * @returns {Map<string, *>}
+ */
+function InitFrameOptions(o, origin) {
+	const fo = new Map();
+
 	fo.set('_origin', o);
 	const barContainer = origin.statusbar_container;
 
@@ -757,14 +1037,18 @@ function InitFrameOptions(o, origin, fo) {
 	fo.set('charCounter_max', numbers.is(charCounter_max) && charCounter_max > -1 ? charCounter_max * 1 : null);
 	fo.set('charCounter_label', typeof charCounter_label === 'string' ? charCounter_label.trim() : null);
 	fo.set('charCounter_type', typeof charCounter_type === 'string' ? charCounter_type : 'char');
+
+	return fo;
 }
 
 /**
+ * @private
  * @description Initialize property of suneditor elements
- * @param {string} key Key
- * @param {Object} options Options
- * @param {Element} topDiv Suneditor top div
- * @returns {Object} Bottom bar elements (statusbar, navigation, charWrapper, charCounter)
+ * @param {string} key - The key of the editor frame
+ * @param {Map<string, *>} options - options
+ * @param {HTMLElement} topDiv - top div
+ * @param {Map<string, *>} targetOptions - editor.frameOptions
+ * @returns {{bottomBar: ReturnType<CreateStatusbar>, wysiwygFrame: HTMLElement, codeView: HTMLElement, placeholder: HTMLElement}}
  */
 function _initTargetElements(key, options, topDiv, targetOptions) {
 	const editorStyles = targetOptions.get('_defaultStyles');
@@ -773,13 +1057,13 @@ function _initTargetElements(key, options, topDiv, targetOptions) {
 
 	/** editor */
 	// wysiwyg div or iframe
-	const wysiwygDiv = domUtils.createElement(!targetOptions.get('iframe') ? 'DIV' : 'IFRAME', {
+	const wysiwygDiv = dom.utils.createElement(!targetOptions.get('iframe') ? 'DIV' : 'IFRAME', {
 		class: 'se-wrapper-inner se-wrapper-wysiwyg',
 		'data-root-key': key
 	});
 
 	if (!targetOptions.get('iframe')) {
-		wysiwygDiv.setAttribute('contenteditable', true);
+		wysiwygDiv.setAttribute('contenteditable', 'true');
 		wysiwygDiv.setAttribute('scrolling', 'auto');
 		wysiwygDiv.className += ' ' + options.get('_editableClass');
 		wysiwygDiv.style.cssText = editorStyles.frame + editorStyles.editor;
@@ -788,17 +1072,19 @@ function _initTargetElements(key, options, topDiv, targetOptions) {
 		for (const frameKey in frameAttrs) {
 			wysiwygDiv.setAttribute(frameKey, frameAttrs[frameKey]);
 		}
-		wysiwygDiv.allowFullscreen = true;
-		wysiwygDiv.frameBorder = 0;
-		wysiwygDiv.style.cssText = editorStyles.frame;
+
+		const iframeWW = /** @type {HTMLIFrameElement} */ (wysiwygDiv);
+		iframeWW.allowFullscreen = true;
+		iframeWW.frameBorder = '0';
+		iframeWW.style.cssText = editorStyles.frame;
 	}
 
 	// textarea for code view
-	const textarea = domUtils.createElement('TEXTAREA', { class: 'se-wrapper-inner se-code-viewer', style: editorStyles.frame });
+	const textarea = dom.utils.createElement('TEXTAREA', { class: 'se-wrapper-inner se-code-viewer', style: editorStyles.frame });
 	let placeholder = null;
 	if (targetOptions.get('placeholder')) {
-		placeholder = domUtils.createElement('SPAN', { class: 'se-placeholder' });
-		placeholder.innerText = targetOptions.get('placeholder');
+		placeholder = dom.utils.createElement('SPAN', { class: 'se-placeholder' });
+		placeholder.textContent = targetOptions.get('placeholder');
 	}
 
 	return {
@@ -810,9 +1096,10 @@ function _initTargetElements(key, options, topDiv, targetOptions) {
 }
 
 /**
+ * @private
  * @description Check the CodeMirror option to apply the CodeMirror and return the CodeMirror element.
- * @param {Object} options options
- * @param {Element} textarea textarea element
+ * @param {Map<string, *>} options options
+ * @param {HTMLElement} textarea textarea element
  */
 function _checkCodeMirror(options, targetOptions, textarea) {
 	let cmeditor = null;
@@ -863,7 +1150,7 @@ function _checkCodeMirror(options, targetOptions, textarea) {
 
 	options.set('hasCodeMirror', hasCodeMirror);
 	if (cmeditor) {
-		domUtils.removeItem(textarea);
+		dom.utils.removeItem(textarea);
 		cmeditor.className += ' se-code-viewer-mirror';
 		return cmeditor;
 	}
@@ -872,6 +1159,7 @@ function _checkCodeMirror(options, targetOptions, textarea) {
 }
 
 /**
+ * @private
  * @description create blacklist
  * @param {string} blacklist blacklist
  * @param {string} defaultLine options.get('defaultLine')
@@ -893,6 +1181,7 @@ function _createBlacklist(blacklist, defaultLine) {
 }
 
 /**
+ * @private
  * @description create formats regexp object.
  * @param {string} value value
  * @param {string} defaultValue default value
@@ -913,8 +1202,9 @@ function _createFormatInfo(value, defaultValue, blacklist) {
 }
 
 /**
+ * @private
  * @description create whitelist or blacklist.
- * @param {Object} o options
+ * @param {Map<string, *>} o options
  * @returns {string} whitelist
  */
 function _createWhitelist(o) {
@@ -928,8 +1218,9 @@ function _createWhitelist(o) {
 }
 
 /**
+ * @private
  * @description Suneditor's Default button list
- * @param {Object} options options
+ * @param {Map<string, *>} options options
  */
 function _defaultButtons(options, icons, lang) {
 	const isRTL = options.get('_rtl');
@@ -941,6 +1232,7 @@ function _defaultButtons(options, icons, lang) {
 		subscript: ['', lang.subscript, 'subscript', '', icons.subscript],
 		superscript: ['', lang.superscript, 'superscript', '', icons.superscript],
 		removeFormat: ['', lang.removeFormat, 'removeFormat', '', icons.remove_format],
+		copyFormat: ['', lang.copyFormat, 'copyFormat', '', icons.format_paint],
 		indent: ['se-icon-flip-rtl', lang.indent, 'indent', '', isRTL ? icons.outdent : icons.indent],
 		outdent: ['se-icon-flip-rtl', lang.outdent, 'outdent', '', isRTL ? icons.indent : icons.outdent],
 		fullScreen: ['se-code-view-enabled se-component-enabled', lang.fullScreen, 'fullScreen', '', icons.expansion],
@@ -955,17 +1247,23 @@ function _defaultButtons(options, icons, lang) {
 		dir_rtl: ['', lang.dir_rtl, 'dir_rtl', '', icons.dir_rtl],
 		save: ['se-component-enabled', lang.save, 'save', '', icons.save],
 		newDocument: ['se-component-enabled', lang.newDocument, 'newDocument', '', icons.new_document],
-		selectAll: ['se-component-enabled', lang.selectAll, 'selectAll', '', icons.select_all]
+		selectAll: ['se-component-enabled', lang.selectAll, 'selectAll', '', icons.select_all],
+		pageBreak: ['se-component-enabled', lang.pageBreak, 'pageBreak', '', icons.page_break],
+		// document type buttons
+		pageUp: ['se-component-enabled', lang.pageUp, 'pageUp', '', icons.page_up],
+		pageDown: ['se-component-enabled', lang.pageDown, 'pageDown', '', icons.page_down],
+		pageNavigator: ['se-component-enabled', '', 'pageNavigator', 'input', '']
 	};
 }
 
 /**
+ * @private
  * @description Create a group div containing each module
- * @returns {Object}
+ * @returns {{div: Element, ul: Element}}
  */
 function _createModuleGroup() {
-	const oUl = domUtils.createElement('UL', { class: 'se-menu-list' });
-	const oDiv = domUtils.createElement('DIV', { class: 'se-btn-module se-btn-module-border' }, oUl);
+	const oUl = dom.utils.createElement('UL', { class: 'se-menu-list' });
+	const oDiv = dom.utils.createElement('DIV', { class: 'se-btn-module se-btn-module-border' }, oUl);
 
 	return {
 		div: oDiv,
@@ -974,27 +1272,38 @@ function _createModuleGroup() {
 }
 
 /**
+ * @private
  * @description Create a button element
  * @param {string} className className in button
  * @param {string} title Title in button
  * @param {string} dataCommand The data-command property of the button
- * @param {string} dataType The data-type property of the button ('modal', 'dropdown', 'command',  'container')
+ * @param {"command"|"dropdown"|"field"|"browser"|"input"|"modal"|"popup"} dataType The data-type property of the button
  * @param {string} innerHTML Html in button
  * @param {string} _disabled Button disabled
- * @param {Object} icons Icons
- * @returns {Object}
+ * @param {Object<string, string>} icons Icons
+ * @returns {{li: HTMLElement, button: HTMLElement}}
  */
 function _createButton(className, title, dataCommand, dataType, innerHTML, _disabled, icons) {
-	const oLi = domUtils.createElement('LI');
+	if (!innerHTML) innerHTML = '';
+
+	const oLi = dom.utils.createElement('LI');
 	const label = title || '';
-	const oButton = domUtils.createElement(/^INPUT|FIELD$/i.test(dataType) ? 'DIV' : 'BUTTON', {
-		type: 'button',
-		class: 'se-toolbar-btn se-btn se-tooltip' + (className ? ' ' + className : ''),
-		'data-command': dataCommand,
-		'data-type': dataType,
-		'aria-label': label.replace(/<span .+<\/span>/, ''),
-		tabindex: '-1'
-	});
+	const isDiv = /^INPUT|FIELD$/i.test(dataType);
+	const oButton = /** @type {HTMLButtonElement} */ (
+		'se-toolbar-separator-vertical' === className
+			? dom.utils.createElement('DIV', { class: className, tabindex: '-1' }, null)
+			: dom.utils.createElement(isDiv ? 'DIV' : 'BUTTON', {
+					class: 'se-toolbar-btn se-btn se-tooltip' + (className ? ' ' + className : ''),
+					'data-command': dataCommand,
+					'data-type': dataType,
+					'aria-label': label.replace(/<span .+<\/span>/, ''),
+					tabindex: '-1'
+			  })
+	);
+
+	if (!isDiv) {
+		oButton.setAttribute('type', 'button');
+	}
 
 	if (/^default\./i.test(innerHTML)) {
 		innerHTML = icons[innerHTML.replace(/^default\./i, '')];
@@ -1004,9 +1313,9 @@ function _createButton(className, title, dataCommand, dataType, innerHTML, _disa
 		oButton.className += ' se-btn-more-text';
 	}
 
-	if (_disabled) oButton.setAttribute('disabled', true);
+	if (_disabled) oButton.disabled = true;
 
-	if (/^FIELD$/i.test(dataType)) domUtils.addClass(oLi, 'se-toolbar-hidden-btn');
+	if (/^FIELD$/i.test(dataType)) dom.utils.addClass(oLi, 'se-toolbar-hidden-btn');
 
 	if (label) innerHTML += CreateTooltipInner(label);
 	if (innerHTML) oButton.innerHTML = innerHTML;
@@ -1019,18 +1328,34 @@ function _createButton(className, title, dataCommand, dataType, innerHTML, _disa
 	};
 }
 
+/**
+ * @description Create tooltip HTML
+ * @param {string} text Tooltip text
+ * @returns {string} Tooltip HTML
+ */
 export function CreateTooltipInner(text) {
 	return `<span class="se-tooltip-inner"><span class="se-tooltip-text">${text}</span></span>`;
 }
 
+/**
+ * @description Update a button state, attributes, and icons
+ * @param {HTMLElement|null} element Button element
+ * @param {Object<string, *>} plugin Plugin
+ * @param {Object<string, string>} icons Icons
+ * @param {Object<string, string>} lang lang
+ */
 export function UpdateButton(element, plugin, icons, lang) {
 	if (!element) return;
 
 	const noneInner = plugin.inner === false;
 
-	element.innerHTML = noneInner
-		? ''
-		: (plugin.inner || icons[plugin.icon] || plugin.icon || '<span class="se-icon-text">!</span>') + '<span class="se-tooltip-inner"><span class="se-tooltip-text">' + (lang[plugin.title] || plugin.title) + '</span></span>';
+	if (plugin.inner?.nodeType === 1) {
+		element.appendChild(plugin.inner);
+	} else {
+		element.innerHTML = noneInner
+			? ''
+			: (plugin.inner || icons[plugin.icon] || plugin.icon || '<span class="se-icon-text">!</span>') + '<span class="se-tooltip-inner"><span class="se-tooltip-text">' + (lang[plugin.title] || plugin.title) + '</span></span>';
+	}
 
 	element.setAttribute('aria-label', plugin.title);
 
@@ -1043,24 +1368,24 @@ export function UpdateButton(element, plugin, icons, lang) {
 	}
 
 	// side, replace button
-	if (plugin.afterButton) {
-		domUtils.addClass(plugin.afterButton, 'se-toolbar-btn');
-		element.parentElement.appendChild(plugin.afterButton);
+	if (plugin.afterItem) {
+		dom.utils.addClass(plugin.afterItem, 'se-toolbar-btn');
+		element.parentElement.appendChild(plugin.afterItem);
 
-		domUtils.addClass(element, 'se-side-btn-a');
-		domUtils.addClass(plugin.afterButton, 'se-side-btn-after');
+		dom.utils.addClass(element, 'se-side-btn-a');
+		dom.utils.addClass(plugin.afterItem, 'se-side-btn-after');
 	}
-	if (plugin.beforeButton) {
-		domUtils.addClass(plugin.beforeButton, 'se-toolbar-btn');
-		element.parentElement.insertBefore(plugin.beforeButton, element);
+	if (plugin.beforeItem) {
+		dom.utils.addClass(plugin.beforeItem, 'se-toolbar-btn');
+		element.parentElement.insertBefore(plugin.beforeItem, element);
 
-		if (plugin.afterButton) {
-			domUtils.addClass(element, 'se-side-btn');
-			domUtils.removeClass(element, 'se-side-btn-a');
+		if (plugin.afterItem) {
+			dom.utils.addClass(element, 'se-side-btn');
+			dom.utils.removeClass(element, 'se-side-btn-a');
 		} else {
-			domUtils.addClass(element, 'se-side-btn-b');
+			dom.utils.addClass(element, 'se-side-btn-b');
 		}
-		domUtils.addClass(plugin.beforeButton, 'se-side-btn-before');
+		dom.utils.addClass(plugin.beforeItem, 'se-side-btn-before');
 	}
 	if (plugin.replaceButton) {
 		element.parentElement.appendChild(plugin.replaceButton);
@@ -1070,10 +1395,10 @@ export function UpdateButton(element, plugin, icons, lang) {
 	if (!plugin.replaceButton && /^INPUT$/i.test(element.getAttribute('data-type'))) {
 		const inputTarget = element.querySelector('input');
 		if (inputTarget) {
-			domUtils.addClass(inputTarget, 'se-toolbar-btn');
+			dom.utils.addClass(inputTarget, 'se-toolbar-btn');
 			inputTarget.setAttribute('data-command', element.getAttribute('data-command'));
 			inputTarget.setAttribute('data-type', element.getAttribute('data-type'));
-			if (element.hasAttribute('disabled')) inputTarget.setAttribute('disabled', true);
+			if (element.hasAttribute('disabled')) inputTarget.disabled = true;
 		}
 	}
 }
@@ -1081,17 +1406,18 @@ export function UpdateButton(element, plugin, icons, lang) {
 /**
  * @description Create editor HTML
  * @param {Array} buttonList option.buttonList
- * @param {Object|null} plugins Plugins
- * @param {Array} options options
- * @param {Object} icons icons
- * @param {Object} lang lang
+ * @param {?Object<string, *>} plugins Plugins
+ * @param {Map<string, *>} options options
+ * @param {Object<string, string>} icons icons
+ * @param {Object<string, string>} lang lang
  * @param {boolean} isUpdate Is update
- * @returns {Object} { element: (Element) Toolbar element, plugins: (Array|null) Plugins Array, pluginCallButtons: (Object), responsiveButtons: (Array) }
+ * @returns {{element: HTMLElement, pluginCallButtons: Object<string, Array<HTMLElement>>, responsiveButtons: Array<HTMLElement>, buttonTray: HTMLElement, updateButtons: Array<{button: HTMLElement, plugin: *, key: string}>}}}
  */
 export function CreateToolBar(buttonList, plugins, options, icons, lang, isUpdate) {
 	/** create button list */
 	buttonList = JSON.parse(JSON.stringify(buttonList));
 	const defaultButtonList = _defaultButtons(options, icons, lang);
+	/** @type {Object<string, Array<HTMLElement>>} */
 	const pluginCallButtons = {};
 	const responsiveButtons = [];
 	const updateButtons = [];
@@ -1101,10 +1427,10 @@ export function CreateToolBar(buttonList, plugins, options, icons, lang, isUpdat
 	let plugin = null;
 	let moduleElement = null;
 	let buttonElement = null;
-	let vertical = false;
-	const moreLayer = domUtils.createElement('DIV', { class: 'se-toolbar-more-layer' });
-	const buttonTray = domUtils.createElement('DIV', { class: 'se-btn-tray' });
-	const separator_vertical = domUtils.createElement('DIV', { class: 'se-toolbar-separator-vertical' });
+	// let vertical = false;
+	const moreLayer = dom.utils.createElement('DIV', { class: 'se-toolbar-more-layer' });
+	const buttonTray = dom.utils.createElement('DIV', { class: 'se-btn-tray' });
+	const separator_vertical = dom.utils.createElement('DIV', { class: 'se-toolbar-separator-vertical' });
 
 	buttonGroupLoop: for (let i = 0, more, moreContainer, moreCommand, buttonGroup, align; i < buttonList.length; i++) {
 		more = false;
@@ -1134,14 +1460,14 @@ export function CreateToolBar(buttonList, plugins, options, icons, lang, isUpdat
 				} else {
 					// align
 					if (/^-/.test(button)) {
-						align = button.substr(1);
+						align = button.substring(1);
 						moduleElement.div.className += ' module-float-' + align;
 						continue;
 					}
 
 					// rtl fix
 					if (/^#/.test(button)) {
-						const option = button.substr(1);
+						const option = button.substring(1);
 						if (option === 'fix') moduleElement.ul.className += ' se-menu-dir-fix';
 						continue;
 					}
@@ -1154,6 +1480,9 @@ export function CreateToolBar(buttonList, plugins, options, icons, lang, isUpdat
 						const title = matched[1].trim();
 						const innerHTML = matched[2].trim();
 						modules = ['se-btn-more', /^lang\./i.test(title) ? lang[title.replace(/^lang\./i, '')] : title, moreCommand, 'MORE', innerHTML];
+					} else if (button === '|') {
+						// separator vertical
+						modules = ['se-toolbar-separator-vertical', '', '', 'separator', ''];
 					} else {
 						// default command
 						modules = defaultButtonList[button];
@@ -1184,7 +1513,7 @@ export function CreateToolBar(buttonList, plugins, options, icons, lang, isUpdat
 				// more button
 				if (moreButton) {
 					more = true;
-					moreContainer = domUtils.createElement('DIV');
+					moreContainer = dom.utils.createElement('DIV');
 					moreContainer.className = 'se-more-layer ' + moreCommand;
 					moreContainer.setAttribute('data-ref', moreCommand);
 					moreContainer.innerHTML = '<div class="se-more-form"><ul class="se-menu-list"' + (align ? ' style="float: ' + align + ';"' : '') + '></ul></div>';
@@ -1193,18 +1522,23 @@ export function CreateToolBar(buttonList, plugins, options, icons, lang, isUpdat
 				}
 			}
 
-			if (vertical) {
-				const sv = separator_vertical.cloneNode(false);
-				buttonTray.appendChild(sv);
-			}
+			// if (vertical) {
+			// 	const sv = separator_vertical.cloneNode(false);
+			// 	buttonTray.appendChild(sv);
+			// }
 
 			buttonTray.appendChild(moduleElement.div);
-			vertical = true;
+			// vertical = true;
+		} else if (buttonGroup === '|') {
+			// // separator vertical
+			const sv = separator_vertical.cloneNode(false);
+			buttonTray.appendChild(sv);
+			continue;
 		} else if (/^\/$/.test(buttonGroup)) {
 			/** line break  */
-			const enterDiv = domUtils.createElement('DIV', { class: 'se-btn-module-enter' });
+			const enterDiv = dom.utils.createElement('DIV', { class: 'se-btn-module-enter' });
 			buttonTray.appendChild(enterDiv);
-			vertical = false;
+			// vertical = false;
 		}
 	}
 
@@ -1213,7 +1547,7 @@ export function CreateToolBar(buttonList, plugins, options, icons, lang, isUpdat
 			buttonTray.style.display = 'none';
 			break;
 		case 1:
-			domUtils.removeClass(buttonTray.firstElementChild, 'se-btn-module-border');
+			dom.utils.removeClass(buttonTray.firstElementChild, 'se-btn-module-border');
 			break;
 	}
 
@@ -1221,7 +1555,7 @@ export function CreateToolBar(buttonList, plugins, options, icons, lang, isUpdat
 	if (responsiveButtons.length > 0) responsiveButtons.unshift(buttonList);
 
 	// rendering toolbar
-	const tool_bar = domUtils.createElement('DIV', { class: 'se-toolbar sun-editor-common' + (!options.get('shortcutsHint') ? ' se-shortcut-hide' : '') }, buttonTray);
+	const tool_bar = dom.utils.createElement('DIV', { class: 'se-toolbar sun-editor-common' + (!options.get('shortcutsHint') ? ' se-shortcut-hide' : '') }, buttonTray);
 
 	if (options.get('toolbar_hide')) tool_bar.style.display = 'none';