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

package/src/core/section/constructor.js

@@ -1,359 +1,42 @@
 import _icons from '../../assets/icons/defaultIcons';
 import _defaultLang from '../../langs/en';
-import { CreateContext, CreateFrameContext } from './context';
+import { CreateContext } from '../schema/context';
+import { CreateFrameContext } from '../schema/frameContext';
 import { dom, numbers, converter, env } from '../../helper';
+import { DEFAULTS } from '../schema/options';
 
 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 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|colgroup|col|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';
-
-/* scopeSelectionTags */
-const DEFAULT_SCOPE_SELECTION_TAGS = 'td|table|li|ol|ul|pre|figcaption|blockquote|dl|dt|dd';
-
-const _media_attr = '|width|height|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' + _media_attr + _iframe_attr;
-
-const DEFAULT_FORMAT_LINE = 'P|H[1-6]|LI|TH|TD|DETAILS';
-const DEFAULT_FORMAT_BR_LINE = 'PRE';
-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|^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_CONTENT_STYLES =
-	'background|background-clip|background-color|' +
-	'border|border-bottom|border-collapse|border-color|border-image|border-left-width|border-radius|border-right-width|border-spacing|border-style|border-top|border-width|' +
-	'box-shadow|box-sizing|' +
-	'caption-side|color|content|' +
-	'direction|display|' +
-	'float|font|font-family|font-size|font-style|font-weight|' +
-	'height|' +
-	'left|letter-spacing|line-height|list-style-position|list-style-type|' +
-	'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|' +
-	'vertical-align|visibility|' +
-	'white-space|width|word-break|word-wrap';
-const DEFAULT_TAG_STYLES = {
-	'table|th|td': 'border|border-[a-z]+|color|background-color|text-align|float|font-weight|text-decoration|font-style|vertical-align|text-align',
-	'table|td': 'width',
-	tr: 'height',
-	col: 'width',
-	'ol|ul': 'list-style-type'
-};
-const DEFAULT_TEXT_STYLES = 'font-family|font-size|color|background-color';
-const DEFAULT_LINE_STYLES = 'text-align|margin-left|margin-right|line-height';
-
-const RETAIN_STYLE_MODE = ['repeat', 'always', 'none'];
 
 /**
- * @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.
+ * @typedef {import('../schema/options').AllBaseOptions} AllBaseOptions_constructor
  */
 
 /**
- * @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 {string} [allUsedStyles] - Specifies additional styles to the list of allowed styles. Delimiter: "|" (e.g. "color|background-color").
- * @property {Object<string, string>} [__tagStyles={
- 	'table|th|td': 'border|border-[a-z]+|color|background-color|text-align|float|font-weight|text-decoration|font-style|vertical-align|text-align',
-	'table|td': 'width',
-	tr: 'height',
-	col: 'width',
-	'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 {"line"|"br"} [defaultLineBreakFormat="line"] - Specifies the default line break format.
- * - [Recommended] "line" :  is a line break that is divided into general tags.
- * - [Not recommended] "br" : Line breaks are treated as <br> on the same line. (like shift+enter)
- * - Line breaks are handled as <br> within "line".
- * - You can create a new "line" by entering a line break twice in a row.
- * - Formats that include "line", such as "Quote", still operate on a "line" basis.
- * - ● suneditor processes work in "line" units.
- * - ● When set to "br", performance may decrease when editing a lot of data.
- * @property {Array<string>} [scopeSelectionTags=["td", "table", "li", "ol", "ul", "pre", "figcaption", "blockquote", "dl", "dt", "dd"]] - Tags treated as whole units when selecting all content.
- * @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 {Object<"copy", number>} [toastMessageTime] - {"copy": 1500} - Duration for displaying toast messages.
- * @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, *>} [Dynamic_pluginOptions] - Dynamic plugin options, where the key is the plugin name and the value is its configuration.
+ * @typedef {Object} ConstructorReturnType
+ * @property {SunEditor.Context} context - Editor context object
+ * @property {HTMLElement} carrierWrapper - Carrier wrapper element
+ * @property {Map<string, *>} options - Processed editor options (`Map`)
+ * @property {Object<string, *>} plugins - Loaded plugins
+ * @property {Object<string, string>} icons - Icon set
+ * @property {Object<string, string>} lang - Language pack
+ * @property {?string} value - Initial editor value
+ * @property {?string} rootId - Root frame ID
+ * @property {Array<string|null>} rootKeys - Array of frame keys
+ * @property {Map<string|null, ReturnType<import('../schema/frameContext').CreateFrameContext>>} frameRoots - Map of frame contexts
+ * @property {Object<string, Array<HTMLElement>>} pluginCallButtons - Plugin toolbar buttons
+ * @property {Array<HTMLElement>} responsiveButtons - Responsive toolbar buttons
+ * @property {Object<string, Array<HTMLElement>>|[]} pluginCallButtons_sub - Sub-toolbar plugin buttons
+ * @property {Array<HTMLElement>} responsiveButtons_sub - Sub-toolbar responsive buttons
  */
 
-/**
- * @typedef {EditorBaseOptions & EditorFrameOptions} EditorInitOptions
- */
-
-/** ------------- [OPTIONS FRAG] ------------- */
-/**
- * @description For all EditorInitOptions keys, only boolean | null values are allowed.
- * - 'fixed' → Immutable / null → Resettable.
- * @type {Partial<Record<keyof EditorInitOptions, "fixed" | true>>}
- */
-export const OPTION_FRAME_FIXED_FLAG = {
-	value: 'fixed',
-	placeholder: true,
-	editableFrameAttributes: true,
-	width: true,
-	minWidth: true,
-	maxWidth: true,
-	height: true,
-	minHeight: true,
-	maxHeight: true,
-	editorStyle: true,
-	iframe: 'fixed',
-	iframe_fullPage: 'fixed',
-	iframe_attributes: true,
-	iframe_cssFileName: true,
-	statusbar: true,
-	statusbar_showPathLabel: true,
-	statusbar_resizeEnable: 'fixed',
-	charCounter: true,
-	charCounter_max: true,
-	charCounter_label: true,
-	charCounter_type: true
-};
-/**
- * @description For all EditorInitOptions keys, only boolean | null values are allowed.
- * - 'fixed' → Immutable / null → Resettable.
- * @type {Partial<Record<keyof EditorInitOptions, "fixed" | true>>}
- */
-export const OPTION_FIXED_FLAG = {
-	plugins: 'fixed',
-	excludedPlugins: 'fixed',
-	buttonList: 'fixed',
-	v2Migration: 'fixed',
-	strictMode: 'fixed',
-	mode: 'fixed',
-	type: 'fixed',
-	theme: true,
-	lang: 'fixed',
-	fontSizeUnits: 'fixed',
-	allowedClassName: 'fixed',
-	closeModalOutsideClick: 'fixed',
-	copyFormatKeepOn: true,
-	syncTabIndent: true,
-	tabDisable: true,
-	autoLinkify: true,
-	autoStyleify: true,
-	scrollToOptions: true,
-	componentScrollToOptions: true,
-	retainStyleMode: true,
-	allowedExtraTags: 'fixed',
-	events: true,
-	__textStyleTags: 'fixed',
-	textStyleTags: 'fixed',
-	convertTextTags: 'fixed',
-	__tagStyles: 'fixed',
-	tagStyles: 'fixed',
-	spanStyles: 'fixed',
-	lineStyles: 'fixed',
-	textDirection: true,
-	reverseButtons: 'fixed',
-	historyStackDelayTime: true,
-	lineAttrReset: true,
-	printClass: true,
-	defaultLine: 'fixed',
-	defaultLineBreakFormat: true,
-	scopeSelectionTags: true,
-	__defaultElementWhitelist: 'fixed',
-	elementWhitelist: 'fixed',
-	elementBlacklist: 'fixed',
-	__defaultAttributeWhitelist: 'fixed',
-	attributeWhitelist: 'fixed',
-	attributeBlacklist: 'fixed',
-	__defaultFormatLine: 'fixed',
-	formatLine: 'fixed',
-	__defaultFormatBrLine: 'fixed',
-	formatBrLine: 'fixed',
-	__defaultFormatClosureBrLine: 'fixed',
-	formatClosureBrLine: 'fixed',
-	__defaultFormatBlock: 'fixed',
-	formatBlock: 'fixed',
-	__defaultFormatClosureBlock: 'fixed',
-	formatClosureBlock: 'fixed',
-	allowedEmptyTags: true,
-	toolbar_width: true,
-	toolbar_container: 'fixed',
-	toolbar_sticky: true,
-	toolbar_hide: true,
-	subToolbar: 'fixed',
-	statusbar_container: 'fixed',
-	shortcutsHint: true,
-	shortcutsDisable: 'fixed',
-	shortcuts: 'fixed',
-	fullScreenOffset: true,
-	previewTemplate: true,
-	printTemplate: true,
-	componentAutoSelect: true,
-	defaultUrlProtocol: true,
-	allUsedStyles: 'fixed',
-	toastMessageTime: true,
-	icons: 'fixed',
-	freeCodeViewMode: true,
-	__lineFormatFilter: true,
-	__pluginRetainFilter: true,
-	__listCommonStyle: 'fixed',
-	externalLibs: 'fixed'
-};
-
 /**
  * @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.
+ * @param {Array<{target: Element, key: *, options: SunEditor.InitFrameOptions}>} editorTargets - Target element or multi-root object.
+ * @param {SunEditor.InitOptions} options - Configuration options for the editor.
+ * @returns {ConstructorReturnType} - SunEditor instance with context, options, and DOM elements.
  */
 function Constructor(editorTargets, options) {
-	if (typeof options !== 'object') options = {};
+	if (typeof options !== 'object') options = /** @type {SunEditor.InitOptions} */ ({});
 
 	/** --- Plugins ------------------------------------------------------------------------------------------ */
 	const plugins = {};
@@ -384,7 +67,7 @@ function Constructor(editorTargets, options) {
 	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;'
+			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;
@@ -440,7 +123,7 @@ function Constructor(editorTargets, options) {
 		subbar.style.visibility = 'hidden';
 		// subbar mode must be balloon-*
 		subbar.className += ' se-toolbar-balloon se-toolbar-sub';
-		subbar.style.width = o.get('toolbar.sub_width');
+		subbar.style.width = o.get('toolbar_sub_width');
 		subbar.appendChild(dom.utils.createElement('DIV', { class: 'se-arrow' }));
 	}
 
@@ -524,9 +207,9 @@ function Constructor(editorTargets, options) {
 				'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;`
+					style: `position: absolute; width: 21cm; columns: 21cm; border: 0; overflow: hidden; height: auto; top: -10000px; left: -10000px;`,
 				},
-				null
+				null,
 			);
 		}
 
@@ -567,18 +250,18 @@ function Constructor(editorTargets, options) {
 		pluginCallButtons: tool_bar_main.pluginCallButtons,
 		responsiveButtons: tool_bar_main.responsiveButtons,
 		pluginCallButtons_sub: sub_main ? sub_main.pluginCallButtons : [],
-		responsiveButtons_sub: sub_main ? sub_main.responsiveButtons : []
+		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|null} button Command button element
+ * @param {Array<string>} values `options.shortcuts[command]`
+ * @param {?Element} 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
+ * @param {Array} rc `_reverseCommandArray` option
+ * @param {Set} reverseKeys Reverse key array
  */
 export function CreateShortcuts(command, button, values, keyMap, rc, reverseKeys) {
 	if (!values || values.length < 2) return;
@@ -589,7 +272,7 @@ export function CreateShortcuts(command, button, values, keyMap, rc, reverseKeys
 		a = values[i].split('+');
 
 		plugin = null;
-		method = a[a.length - 1].trim?.();
+		method = a.at(-1).trim?.();
 		if (method.startsWith('~')) {
 			// plugin key, method
 			plugin = command;
@@ -639,7 +322,7 @@ export function CreateShortcuts(command, button, values, keyMap, rc, reverseKeys
 			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);
+				if (r) reverseKeys.add(k);
 
 				keyMap.set(k, { c, s, edge, space, enter, textTrigger, plugin, command, method, r, type: button?.getAttribute('data-type'), button, key: k });
 			}
@@ -655,8 +338,7 @@ function _addTooltip(tooptipBtn, shift, shortcut) {
 }
 
 /**
- * @private
- * @description Returns a new object with merge "a" and "b"
+ * @description Returns a new object with merge `a` and `b`
  * @param {Object<*, *>} a object
  * @param {Object<*, *>} b object
  * @returns {Object<*, *>} new object
@@ -670,23 +352,27 @@ function _mergeObject(a, b) {
 	}, {});
 }
 
+/**
+ * @typedef {Object} InitOptionsReturnType
+ * @property {Map<string, *>} o - Processed base options (`Map` containing {@link AllBaseOptions_constructor} keys)
+ * @property {Object<string, string>} i - Icon set
+ * @property {Object<string, string>} l - Language pack
+ * @property {?string} v - Initial editor value
+ * @property {SunEditor.UI.ButtonList} buttons - Toolbar button list (arrays for groups, strings for single buttons)
+ * @property {?SunEditor.UI.ButtonList} subButtons - Sub-toolbar button list
+ * @property {?Element} statusbarContainer - Container element for status bar (if specified)
+ * @property {Map<string|null, SunEditor.FrameOptions>} frameMap - Map of frame-specific options (frame key => `SunEditor.FrameOptions`)
+ */
+
 /**
  * @description Initialize options
- * @param {EditorInitOptions} options Configuration options for the editor.
- * @param {Array<{target: Element, key: *, options: EditorFrameOptions}>} editorTargets Target textarea
+ * @param {SunEditor.InitOptions} options Configuration options for the editor.
+ * @param {Array<{target: Element, key: *, options: SunEditor.InitFrameOptions}>} 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
+ * @returns {InitOptionsReturnType} Initialized options and configuration
  */
 export function InitOptions(options, editorTargets, plugins) {
-	const buttonList = options.buttonList || DEFAULT_BUTTON_LIST;
+	const buttonList = options.buttonList || DEFAULTS.BUTTON_LIST;
 	const o = new Map();
 
 	/** Multi root */
@@ -699,15 +385,14 @@ export function InitOptions(options, editorTargets, plugins) {
 
 	/** Base */
 	o.set('buttons', new Set(buttonList.toString().split(',')));
-	const modeValue = options.strictMode !== false;
 	o.set('strictMode', {
-		tagFilter: modeValue,
-		formatFilter: modeValue,
-		classFilter: modeValue,
-		styleNodeFilter: modeValue,
-		attrFilter: modeValue,
-		styleFilter: modeValue,
-		...(typeof options.strictMode === 'boolean' ? {} : options.strictMode)
+		tagFilter: true,
+		formatFilter: true,
+		classFilter: true,
+		textStyleTagFilter: true,
+		attrFilter: true,
+		styleFilter: true,
+		...(typeof options.strictMode === 'boolean' ? {} : options.strictMode),
 	});
 	o.set('freeCodeViewMode', !!options.freeCodeViewMode);
 	o.set('__lineFormatFilter', options.__lineFormatFilter ?? true);
@@ -718,8 +403,8 @@ export function InitOptions(options, editorTargets, plugins) {
 	o.set('_themeClass', options.theme ? ` se-theme-${options.theme}` : '');
 	o.set('_type_options', options.type?.split(':')[1] || '');
 	o.set('externalLibs', options.externalLibs || {});
-	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('fontSizeUnits', Array.isArray(options.fontSizeUnits) && options.fontSizeUnits.length > 0 ? options.fontSizeUnits.map((v) => v.toLowerCase()) : DEFAULTS.SIZE_UNITS);
+	o.set('allowedClassName', new RegExp(`${options.allowedClassName && typeof options.allowedClassName === 'string' ? options.allowedClassName + '|' : ''}${DEFAULTS.CLASS_NAME}`));
 	o.set('closeModalOutsideClick', !!options.closeModalOutsideClick);
 
 	// format
@@ -730,18 +415,14 @@ export function InitOptions(options, editorTargets, plugins) {
 	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)) {
-		console.error(`Invalid retainStyleMode: ${retainStyleMode}. Valid options are ${RETAIN_STYLE_MODE.join(', ')}. Using default 'once'.`);
+	let retainStyleMode = options.retainStyleMode || 'repeat';
+	if (typeof retainStyleMode === 'string' && !DEFAULTS.RETAIN_STYLE_MODE.includes(retainStyleMode)) {
+		console.error(`Invalid retainStyleMode: ${retainStyleMode}. Valid options are ${DEFAULTS.RETAIN_STYLE_MODE.join(', ')}. Using default 'repeat'.`);
 		retainStyleMode = 'repeat';
 	}
 	o.set('retainStyleMode', retainStyleMode);
 
-	const allowedExtraTags = { ...DEFAULT_EXTRA_TAG_MAP, ...options.allowedExtraTags, '-': true };
+	const allowedExtraTags = { ...DEFAULTS.EXTRA_TAG_MAP, ...options.allowedExtraTags, '-': true };
 	const extraKeys = Object.keys(allowedExtraTags);
 	const allowedKeys = extraKeys.filter((k) => allowedExtraTags[k]).join('|');
 	const disallowedKeys = extraKeys.filter((k) => !allowedExtraTags[k]).join('|');
@@ -751,7 +432,7 @@ export function InitOptions(options, editorTargets, plugins) {
 	o.set('events', options.events || {});
 
 	// text style tags
-	o.set('textStyleTags', (typeof options.__textStyleTags === 'string' ? options.__textStyleTags : DEFAULT_TEXT_STYLE_TAGS) + (options.textStyleTags ? '|' + options.textStyleTags : ''));
+	o.set('textStyleTags', (typeof options.__textStyleTags === 'string' ? options.__textStyleTags : DEFAULTS.TEXT_STYLE_TAGS) + (options.textStyleTags ? '|' + options.textStyleTags : ''));
 	const textTags = _mergeObject(
 		{
 			bold: 'strong',
@@ -759,23 +440,23 @@ export function InitOptions(options, editorTargets, plugins) {
 			italic: 'em',
 			strike: 'del',
 			subscript: 'sub',
-			superscript: 'sup'
+			superscript: 'sup',
 		},
-		options.convertTextTags || {}
+		options.convertTextTags || {},
 	);
 	o.set('convertTextTags', textTags);
 	o.set('_textStyleTags', Object.values(textTags).concat(['span', 'li']));
 	o.set(
 		'tagStyles',
-		[{ ...DEFAULT_TAG_STYLES, ...(options.__tagStyles || {}) }, options.tagStyles || {}].reduce((_default, _new) => {
+		[{ ...DEFAULTS.TAG_STYLES, ...(options.__tagStyles || {}) }, options.tagStyles || {}].reduce((_default, _new) => {
 			for (const key in _new) {
 				_default[key] = _new[key];
 			}
 			return _default;
-		}, {})
+		}, {}),
 	);
-	o.set('_textStylesRegExp', new RegExp(`\\s*[^-a-zA-Z](${DEFAULT_TEXT_STYLES}${options.spanStyles ? '|' + options.spanStyles : ''})\\s*:[^;]+(?!;)*`, 'gi'));
-	o.set('_lineStylesRegExp', new RegExp(`\\s*[^-a-zA-Z](${DEFAULT_LINE_STYLES}${options.lineStyles ? '|' + options.lineStyles : ''})\\s*:[^;]+(?!;)*`, 'gi'));
+	o.set('_textStylesRegExp', new RegExp(`\\s*[^-a-zA-Z](${DEFAULTS.SPAN_STYLES}${options.spanStyles ? '|' + options.spanStyles : ''})\\s*:[^;]+(?!;)*`, 'gi'));
+	o.set('_lineStylesRegExp', new RegExp(`\\s*[^-a-zA-Z](${DEFAULTS.LINE_STYLES}${options.lineStyles ? '|' + options.lineStyles : ''})\\s*:[^;]+(?!;)*`, 'gi'));
 	o.set('_defaultStyleTagMap', {
 		strong: textTags.bold,
 		b: textTags.bold,
@@ -787,7 +468,7 @@ export function InitOptions(options, editorTargets, plugins) {
 		strike: textTags.strike,
 		s: textTags.strike,
 		sub: textTags.subscript,
-		sup: textTags.superscript
+		sup: textTags.superscript,
 	});
 	o.set(
 		'_styleCommandMap',
@@ -802,8 +483,8 @@ export function InitOptions(options, editorTargets, plugins) {
 			strike: 'strike',
 			s: 'strike',
 			sub: 'subscript',
-			sup: 'superscript'
-		})
+			sup: 'superscript',
+		}),
 	);
 	o.set('_defaultTagCommand', {
 		bold: textTags.bold,
@@ -811,10 +492,10 @@ export function InitOptions(options, editorTargets, plugins) {
 		italic: textTags.italic,
 		strike: textTags.strike,
 		subscript: textTags.sub,
-		superscript: textTags.sup
+		superscript: textTags.sup,
 	});
 	// text direction
-	o.set('textDirection', typeof options.textDirection !== 'string' ? 'ltr' : options.textDirection);
+	o.set('textDirection', options.textDirection ?? 'ltr');
 	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 || []));
@@ -825,7 +506,7 @@ export function InitOptions(options, editorTargets, plugins) {
 
 	// etc
 	o.set('historyStackDelayTime', typeof options.historyStackDelayTime === 'number' ? options.historyStackDelayTime : 400);
-	o.set('_editableClass', 'sun-editor-editable' + o.get('_themeClass') + (o.get('_rtl') ? ' se-rtl' : '') + (o.get('type') === 'document' ? ' se-type-document-editable' : ''));
+	o.set('_editableClass', 'sun-editor-editable' + o.get('_themeClass') + (o.get('_rtl') ? ' se-rtl' : '') + (o.get('type') === 'document' ? ' se-type-document-editable-a4' : ''));
 	o.set('lineAttrReset', ['id'].concat(options.lineAttrReset && typeof options.lineAttrReset === 'string' ? options.lineAttrReset.toLowerCase().split('|') : []));
 	o.set('printClass', typeof options.printClass === 'string' ? options.printClass + ' ' + o.get('_editableClass') : null);
 
@@ -833,10 +514,10 @@ export function InitOptions(options, editorTargets, plugins) {
 	// default line
 	o.set('defaultLine', typeof options.defaultLine === 'string' && options.defaultLine.length > 0 ? options.defaultLine : 'p');
 	o.set('defaultLineBreakFormat', options.defaultLineBreakFormat || 'line');
-	o.set('scopeSelectionTags', options.scopeSelectionTags || DEFAULT_SCOPE_SELECTION_TAGS.split('|'));
+	o.set('scopeSelectionTags', options.scopeSelectionTags || DEFAULTS.SCOPE_SELECTION_TAGS);
 	// element
 	const elw = (typeof options.elementWhitelist === 'string' ? options.elementWhitelist : '').toLowerCase();
-	const mjxEls = o.get('externalLibs').mathjax ? DEFAULT_CLASS_MJX + '|' : '';
+	const mjxEls = o.get('externalLibs').mathjax ? DEFAULTS.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'));
@@ -848,25 +529,25 @@ export function InitOptions(options, editorTargets, plugins) {
 		'formatClosureBrLine',
 		_createFormatInfo(
 			options.formatClosureBrLine,
-			(options.__defaultFormatClosureBrLine = typeof options.__defaultFormatClosureBrLine === 'string' ? options.__defaultFormatClosureBrLine : DEFAULT_FORMAT_CLOSURE_BR_LINE).toLowerCase(),
-			o.get('elementBlacklist')
-		)
+			(options.__defaultFormatClosureBrLine = typeof options.__defaultFormatClosureBrLine === 'string' ? options.__defaultFormatClosureBrLine : DEFAULTS.FORMAT_CLOSURE_BR_LINE).toLowerCase(),
+			o.get('elementBlacklist'),
+		),
 	);
 	o.set(
 		'formatBrLine',
 		_createFormatInfo(
 			(options.formatBrLine || '') + '|' + o.get('formatClosureBrLine').str,
-			(options.__defaultFormatBrLine = typeof options.__defaultFormatBrLine === 'string' ? options.__defaultFormatBrLine : DEFAULT_FORMAT_BR_LINE).toLowerCase(),
-			o.get('elementBlacklist')
-		)
+			(options.__defaultFormatBrLine = typeof options.__defaultFormatBrLine === 'string' ? options.__defaultFormatBrLine : DEFAULTS.FORMAT_BR_LINE).toLowerCase(),
+			o.get('elementBlacklist'),
+		),
 	);
 	o.set(
 		'formatLine',
 		_createFormatInfo(
-			REQUIRED_FORMAT_LINE + '|' + (options.formatLine || '') + '|' + o.get('formatBrLine').str,
-			(options.__defaultFormatLine = typeof options.__defaultFormatLine === 'string' ? options.__defaultFormatLine : DEFAULT_FORMAT_LINE).toLowerCase(),
-			o.get('elementBlacklist')
-		)
+			DEFAULTS.REQUIRED_FORMAT_LINE + '|' + (options.formatLine || '') + '|' + o.get('formatBrLine').str,
+			(options.__defaultFormatLine = typeof options.__defaultFormatLine === 'string' ? options.__defaultFormatLine : DEFAULTS.FORMAT_LINE).toLowerCase(),
+			o.get('elementBlacklist'),
+		),
 	);
 
 	// Error - default line
@@ -878,24 +559,24 @@ export function InitOptions(options, editorTargets, plugins) {
 		'formatClosureBlock',
 		_createFormatInfo(
 			options.formatClosureBlock,
-			(options.__defaultFormatClosureBlock = typeof options.__defaultFormatClosureBlock === 'string' ? options.__defaultFormatClosureBlock : DEFAULT_FORMAT_CLOSURE_BLOCK).toLowerCase(),
-			o.get('elementBlacklist')
-		)
+			(options.__defaultFormatClosureBlock = typeof options.__defaultFormatClosureBlock === 'string' ? options.__defaultFormatClosureBlock : DEFAULTS.FORMAT_CLOSURE_BLOCK).toLowerCase(),
+			o.get('elementBlacklist'),
+		),
 	);
 	o.set(
 		'formatBlock',
 		_createFormatInfo(
 			(options.formatBlock || '') + '|' + o.get('formatClosureBlock').str,
-			(options.__defaultFormatBlock = typeof options.__defaultFormatBlock === 'string' ? options.__defaultFormatBlock : DEFAULT_FORMAT_BLOCK).toLowerCase(),
-			o.get('elementBlacklist')
-		)
+			(options.__defaultFormatBlock = typeof options.__defaultFormatBlock === 'string' ? options.__defaultFormatBlock : DEFAULTS.FORMAT_BLOCK).toLowerCase(),
+			o.get('elementBlacklist'),
+		),
 	);
 
-	o.set('allowedEmptyTags', DEFAULT_ALLOWED_EMPTY_NODE_LIST + (options.allowedEmptyTags ? ', ' + options.allowedEmptyTags : ''));
+	o.set('allowedEmptyTags', DEFAULTS.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());
+	o.set('__defaultElementWhitelist', DEFAULTS.REQUIRED_ELEMENT_WHITELIST + '|' + (typeof options.__defaultElementWhitelist === 'string' ? options.__defaultElementWhitelist : DEFAULTS.ELEMENT_WHITELIST).toLowerCase());
+	o.set('__defaultAttributeWhitelist', (typeof options.__defaultAttributeWhitelist === 'string' ? options.__defaultAttributeWhitelist : DEFAULTS.ATTRIBUTE_WHITELIST).toLowerCase());
 	// --- create element whitelist (__defaultElementWhiteList + elementWhitelist + format[line, BrLine, Block, Closureblock, ClosureBrLine] - elementBlacklist)
 	o.set('_editorElementWhitelist', o.get('elementWhitelist') === '*' ? '*' : _createWhitelist(o));
 
@@ -913,7 +594,7 @@ export function InitOptions(options, editorTargets, plugins) {
 			console.warn('[SUNEDITOR.create.subToolbar.fail] When the "mode" option is "balloon-*", the "subToolbar" option is omitted.');
 		} else {
 			o.set('_subMode', subbar.mode || 'balloon');
-			o.set('toolbar.sub_width', subbar.width ? (numbers.is(subbar.width) ? subbar.width + 'px' : subbar.width) : 'auto');
+			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(',')));
 		}
@@ -922,7 +603,7 @@ export function InitOptions(options, editorTargets, plugins) {
 	/** root options */
 	const frameMap = new Map();
 	for (let i = 0, len = editorTargets.length; i < len; i++) {
-		frameMap.set(editorTargets[i].key, InitFrameOptions(editorTargets[i].options || {}, options));
+		frameMap.set(editorTargets[i].key, InitFrameOptions(editorTargets[i].options || /** @type {SunEditor.InitFrameOptions} */ ({}), options));
 	}
 
 	/** Key actions */
@@ -949,17 +630,17 @@ export function InitOptions(options, editorTargets, plugins) {
 					list_numbered: ['!+1.+_+~shortcut', ''],
 					list_bulleted: ['!+*.+_+~shortcut', ''],
 					// custom
-					_h1: ['c+s+Digit1|Numpad1+$~formatBlock.applyHeaderByShortcut', ''],
-					_h2: ['c+s+Digit2|Numpad2+$~formatBlock.applyHeaderByShortcut', ''],
-					_h3: ['c+s+Digit3|Numpad3+$~formatBlock.applyHeaderByShortcut', '']
+					_h1: ['c+s+Digit1|Numpad1+$~blockStyle.applyHeaderByShortcut', ''],
+					_h2: ['c+s+Digit2|Numpad2+$~blockStyle.applyHeaderByShortcut', ''],
+					_h3: ['c+s+Digit3|Numpad3+$~blockStyle.applyHeaderByShortcut', ''],
 				},
-				options.shortcuts || {}
-		  ].reduce((_default, _new) => {
+				options.shortcuts || {},
+			].reduce((_default, _new) => {
 				for (const key in _new) {
 					_default[key] = _new[key];
 				}
 				return _default;
-		  }, {});
+			}, {});
 	o.set('shortcuts', shortcuts);
 
 	/** View */
@@ -968,7 +649,7 @@ export function InitOptions(options, editorTargets, plugins) {
 	o.set('printTemplate', typeof options.printTemplate === 'string' ? options.printTemplate : null);
 
 	/** --- Media select */
-	o.set('componentAutoSelect', options.componentAutoSelect === undefined ? false : !!options.componentAutoSelect);
+	o.set('componentInsertBehavior', ['auto', 'select', 'line', 'none'].includes(options.componentInsertBehavior) ? options.componentInsertBehavior : 'auto');
 
 	/** --- Url input protocol */
 	o.set('defaultUrlProtocol', typeof options.defaultUrlProtocol === 'string' ? options.defaultUrlProtocol : null);
@@ -983,7 +664,7 @@ export function InitOptions(options, editorTargets, plugins) {
 		} else if (cm.src) {
 			o.set('codeMirror5Editor', true);
 		} else {
-			console.warn('[SUNEDITOR.options.externalLibs.codeMirror.fail] The codeMirror option is set incorrectly.');
+			console.warn('[SUNEDITOR.options.externalLibs.codeMirror.fail] The codeMirror option is set incorrectly. See: https://github.com/ARA-developer/suneditor/blob/develop/guide/external-libraries.md');
 			o.set('codeMirror', null);
 		}
 	}
@@ -1000,14 +681,14 @@ export function InitOptions(options, editorTargets, plugins) {
 						_default[key] = _new[key];
 					}
 					return _default;
-			  }, {});
+				}, {});
 	o.set('icons', icons);
 
 	/** Create all used styles  */
-	const allUsedStyles = new Set(DEFAULT_CONTENT_STYLES.split('|'));
+	const allUsedStyles = new Set(DEFAULTS.CONTENT_STYLES.split('|'));
 	const _ss = options.spanStyles?.split('|') || [];
 	const _ls = o.get('__listCommonStyle');
-	const _dts = DEFAULT_TEXT_STYLES.split('|');
+	const _dts = DEFAULTS.SPAN_STYLES.split('|');
 	for (let i = 0, len = _dts.length; i < len; i++) {
 		allUsedStyles.add(_dts[i]);
 	}
@@ -1038,13 +719,13 @@ export function InitOptions(options, editorTargets, plugins) {
 		buttons: o.get('_rtl') ? buttonList.reverse() : buttonList,
 		subButtons: subButtons,
 		statusbarContainer: typeof options.statusbar_container === 'string' ? _d.querySelector(options.statusbar_container) : options.statusbar_container,
-		frameMap: frameMap
+		frameMap: frameMap,
 	};
 }
 
 /**
  * @description Create a context object for the editor frame.
- * @param {Map<string, *>} targetOptions - editor.frameOptions
+ * @param {SunEditor.FrameOptions} targetOptions - `editor.frameOptions`
  * @param {HTMLElement} statusbar - statusbar element
  * @returns {{statusbar: HTMLElement, navigation: HTMLElement, charWrapper: HTMLElement, charCounter: HTMLElement}}
  */
@@ -1054,7 +735,7 @@ export function CreateStatusbar(targetOptions, statusbar) {
 	let charCounter = null;
 
 	if (targetOptions.get('statusbar')) {
-		statusbar = statusbar || dom.utils.createElement('DIV', { class: 'se-status-bar sun-editor-common' });
+		statusbar ||= dom.utils.createElement('DIV', { class: 'se-status-bar sun-editor-common' });
 
 		/** navigation */
 		navigation = statusbar.querySelector('.se-navigation') || dom.utils.createElement('DIV', { class: 'se-navigation sun-editor-common' });
@@ -1088,18 +769,18 @@ export function CreateStatusbar(targetOptions, statusbar) {
 		statusbar: statusbar,
 		navigation: /** @type {HTMLElement} */ (navigation),
 		charWrapper: /** @type {HTMLElement} */ (charWrapper),
-		charCounter: /** @type {HTMLElement} */ (charCounter)
+		charCounter: /** @type {HTMLElement} */ (charCounter),
 	};
 }
 
 /**
  * @description Initialize options.
- * @param {EditorFrameOptions} o - Target options
- * @param {EditorInitOptions} origin - Full options
- * @returns {Map<string, *>}
+ * @param {SunEditor.InitFrameOptions} o - Target options
+ * @param {SunEditor.InitOptions} origin - Full options
+ * @returns {SunEditor.FrameOptions} Processed frame options `Map`
  */
 function InitFrameOptions(o, origin) {
-	const fo = new Map();
+	const fo = /** @type {SunEditor.FrameOptions} */ (/** @type {unknown} */ (new Map()));
 
 	fo.set('_origin', o);
 	const barContainer = origin.statusbar_container;
@@ -1130,21 +811,21 @@ function InitFrameOptions(o, origin) {
 	// value
 	fo.set('value', value);
 	fo.set('placeholder', placeholder);
-	fo.set('editableFrameAttributes', editableFrameAttributes || {});
+	fo.set('editableFrameAttributes', { spellcheck: 'false', ...editableFrameAttributes });
 	// styles
-	fo.set('width', width ? (numbers.is(width) ? width + 'px' : width) : '100%');
-	fo.set('minWidth', (numbers.is(minWidth) ? minWidth + 'px' : minWidth) || '');
-	fo.set('maxWidth', (numbers.is(maxWidth) ? maxWidth + 'px' : maxWidth) || '');
-	fo.set('height', height ? (numbers.is(height) ? height + 'px' : height) : 'auto');
-	fo.set('minHeight', (numbers.is(minHeight) ? minHeight + 'px' : minHeight) || '');
-	fo.set('maxHeight', (numbers.is(maxHeight) ? maxHeight + 'px' : maxHeight) || '');
+	fo.set('width', width ? String(numbers.is(width) ? width + 'px' : width) : '100%');
+	fo.set('minWidth', minWidth ? String(numbers.is(minWidth) ? minWidth + 'px' : minWidth) : '');
+	fo.set('maxWidth', maxWidth ? String(numbers.is(maxWidth) ? maxWidth + 'px' : maxWidth) : '');
+	fo.set('height', height ? String(numbers.is(height) ? height + 'px' : height) : 'auto');
+	fo.set('minHeight', minHeight ? String(numbers.is(minHeight) ? minHeight + 'px' : minHeight) : '');
+	fo.set('maxHeight', maxHeight ? String(numbers.is(maxHeight) ? maxHeight + 'px' : maxHeight) : '');
 	fo.set('editorStyle', editorStyle);
 	fo.set('_defaultStyles', converter._setDefaultOptionStyle(fo, typeof editorStyle === 'string' ? editorStyle : ''));
 	// iframe
 	fo.set('iframe', !!(iframe_fullPage || iframe));
 	fo.set('iframe_fullPage', !!iframe_fullPage);
 	fo.set('iframe_attributes', iframe_attributes || {});
-	fo.set('iframe_cssFileName', iframe ? (typeof iframe_cssFileName === 'string' ? [iframe_cssFileName] : iframe_cssFileName || ['suneditor']) : null);
+	fo.set('iframe_cssFileName', iframe ? (typeof iframe_cssFileName === 'string' ? [iframe_cssFileName] : iframe_cssFileName) || ['suneditor'] : null);
 	// status bar
 	const hasStatusbar = statusbar === undefined ? true : !!statusbar;
 	fo.set('statusbar', hasStatusbar);
@@ -1160,12 +841,11 @@ function InitFrameOptions(o, origin) {
 }
 
 /**
- * @private
- * @description Initialize property of suneditor elements
+ * @description Initialize property of `suneditor` elements
  * @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
+ * @param {Map<string, *>} options - Options
+ * @param {HTMLElement} topDiv - Top div
+ * @param {SunEditor.FrameOptions} targetOptions - `editor.frameOptions`
  * @returns {{bottomBar: ReturnType<CreateStatusbar>, wysiwygFrame: HTMLElement, codeView: HTMLElement, placeholder: HTMLElement}}
  */
 function _initTargetElements(key, options, topDiv, targetOptions) {
@@ -1176,24 +856,47 @@ function _initTargetElements(key, options, topDiv, targetOptions) {
 	/** editor */
 	// wysiwyg div or iframe
 	const wysiwygDiv = dom.utils.createElement(!targetOptions.get('iframe') ? 'DIV' : 'IFRAME', {
-		class: 'se-wrapper-inner se-wrapper-wysiwyg',
-		'data-root-key': key
+		class: 'se-wrapper-inner se-wrapper-wysiwyg' + (options.get('type') === 'document' ? ' se-type-document-iframe-a4' : ''),
+		'data-root-key': key,
 	});
 
 	if (!targetOptions.get('iframe')) {
 		wysiwygDiv.setAttribute('contenteditable', 'true');
-		wysiwygDiv.setAttribute('scrolling', 'auto');
 		wysiwygDiv.className += ' ' + options.get('_editableClass');
 		wysiwygDiv.style.cssText = editorStyles.frame + editorStyles.editor;
 	} else {
+		const iframeWW = /** @type {HTMLIFrameElement} */ (wysiwygDiv);
 		const frameAttrs = targetOptions.get('iframe_attributes');
+
+		// [sandbox] prop
+		let sandboxValue = frameAttrs.sandbox;
+		if (sandboxValue) {
+			const requiredSandbox = ['allow-same-origin'];
+			const userSandbox = sandboxValue.split(/\s+/);
+			const missingSandbox = requiredSandbox.filter((req) => !userSandbox.includes(req));
+
+			if (missingSandbox.length > 0) {
+				// Add missing required value
+				sandboxValue = userSandbox.concat(missingSandbox).join(' ');
+			}
+		} else {
+			sandboxValue = 'allow-same-origin';
+		}
+
+		// iframe [sandbox] attr
+		iframeWW.setAttribute('sandbox', sandboxValue);
+
+		// iframe [default border]
+		iframeWW.setAttribute('frameBorder', '0');
+
+		// iframe attr
 		for (const frameKey in frameAttrs) {
-			wysiwygDiv.setAttribute(frameKey, frameAttrs[frameKey]);
+			if (frameKey === 'sandbox') continue;
+			iframeWW.setAttribute(frameKey, frameAttrs[frameKey]);
 		}
 
-		const iframeWW = /** @type {HTMLIFrameElement} */ (wysiwygDiv);
 		iframeWW.allowFullscreen = true;
-		iframeWW.frameBorder = '0';
+		iframeWW.setAttribute('scrolling', targetOptions.get('height') === 'auto' ? 'no' : 'auto');
 		iframeWW.style.cssText = editorStyles.frame;
 	}
 
@@ -1208,15 +911,14 @@ function _initTargetElements(key, options, topDiv, targetOptions) {
 		bottomBar: CreateStatusbar(targetOptions, null),
 		wysiwygFrame: wysiwygDiv,
 		codeView: textarea,
-		placeholder: placeholder
+		placeholder: placeholder,
 	};
 }
 
 /**
- * @private
- * @description Check the CodeMirror option to apply the CodeMirror and return the CodeMirror element.
- * @param {Map<string, *>} options options
- * @param {HTMLElement} textarea textarea element
+ * @description Check the `CodeMirror` option to apply the `CodeMirror` and return the `CodeMirror` element.
+ * @param {Map<string, *>} options Options
+ * @param {HTMLElement} textarea Textarea element
  */
 function _checkCodeMirror(options, targetOptions, textarea) {
 	let cmeditor = null;
@@ -1228,7 +930,7 @@ function _checkCodeMirror(options, targetOptions, textarea) {
 		const cm = new codeMirror.EditorView({
 			parent: textarea.parentElement,
 			extensions: codeMirror.extensions,
-			state: codeMirror.state
+			state: codeMirror.state,
 		});
 
 		targetOptions.set('codeMirror6Editor', cm);
@@ -1242,9 +944,9 @@ function _checkCodeMirror(options, targetOptions, textarea) {
 				mode: 'htmlmixed',
 				htmlMode: true,
 				lineNumbers: true,
-				lineWrapping: true
+				lineWrapping: true,
 			},
-			codeMirror.options || {}
+			codeMirror.options || {},
 		].reduce((init, option) => {
 			for (const key in option) {
 				init[key] = option[key];
@@ -1276,10 +978,9 @@ function _checkCodeMirror(options, targetOptions, textarea) {
 }
 
 /**
- * @private
- * @description create blacklist
- * @param {string} blacklist blacklist
- * @param {string} defaultLine options.get('defaultLine')
+ * @description Create blacklist
+ * @param {string} blacklist Blacklist
+ * @param {string} defaultLine `options.get('defaultLine')`
  * @returns {string}
  */
 function _createBlacklist(blacklist, defaultLine) {
@@ -1298,8 +999,7 @@ function _createBlacklist(blacklist, defaultLine) {
 }
 
 /**
- * @private
- * @description create formats regexp object.
+ * @description Create formats regexp object.
  * @param {string} value value
  * @param {string} defaultValue default value
  * @param {string} blacklist blacklist
@@ -1314,13 +1014,12 @@ function _createFormatInfo(value, defaultValue, blacklist) {
 		.join('|');
 	return {
 		reg: new RegExp(`^(${str})$`, 'i'),
-		str: str
+		str: str,
 	};
 }
 
 /**
- * @private
- * @description create whitelist or blacklist.
+ * @description Create whitelist or blacklist.
  * @param {Map<string, *>} o options
  * @returns {string} whitelist
  */
@@ -1335,12 +1034,10 @@ function _createWhitelist(o) {
 }
 
 /**
- * @private
- * @description Suneditor's Default button list
- * @param {Map<string, *>} options options
+ * @description SunEditor's default button list
+ * @param {boolean} isRTL `rtl`
  */
-function _defaultButtons(options, icons, lang) {
-	const isRTL = options.get('_rtl');
+function _defaultButtons(isRTL, icons, lang) {
 	return {
 		bold: ['', lang.bold, 'bold', '', icons.bold],
 		underline: ['', lang.underline, 'underline', '', icons.underline],
@@ -1370,12 +1067,11 @@ function _defaultButtons(options, icons, lang) {
 		// 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', '']
+		pageNavigator: ['se-component-enabled', '', 'pageNavigator', 'input', ''],
 	};
 }
 
 /**
- * @private
  * @description Create a group div containing each module
  * @returns {{div: Element, ul: Element}}
  */
@@ -1385,24 +1081,23 @@ function _createModuleGroup() {
 
 	return {
 		div: oDiv,
-		ul: oUl
+		ul: oUl,
 	};
 }
 
 /**
- * @private
  * @description Create a button element
- * @param {string} className className in button
+ * @param {string} className `className` in button
  * @param {string} title Title in button
- * @param {string} dataCommand The data-command property of the button
- * @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 {string} dataCommand The `data-command` property of the button
+ * @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<string, string>} icons Icons
  * @returns {{li: HTMLElement, button: HTMLElement}}
  */
 function _createButton(className, title, dataCommand, dataType, innerHTML, _disabled, icons) {
-	if (!innerHTML) innerHTML = '';
+	innerHTML ||= '';
 
 	const oLi = dom.utils.createElement('LI');
 	const label = title || '';
@@ -1415,8 +1110,8 @@ function _createButton(className, title, dataCommand, dataType, innerHTML, _disa
 					'data-command': dataCommand,
 					'data-type': dataType,
 					'aria-label': label.replace(/<span .+<\/span>/, ''),
-					tabindex: '-1'
-			  })
+					tabindex: '-1',
+				})
 	);
 
 	if (!isDiv) {
@@ -1442,13 +1137,13 @@ function _createButton(className, title, dataCommand, dataType, innerHTML, _disa
 
 	return {
 		li: oLi,
-		button: oButton
+		button: oButton,
 	};
 }
 
 /**
  * @description Update a button state, attributes, and icons
- * @param {HTMLElement|null} element Button element
+ * @param {?HTMLElement} element Button element
  * @param {Object<string, *>} plugin Plugin
  * @param {Object<string, string>} icons Icons
  * @param {Object<string, string>} lang lang
@@ -1514,18 +1209,18 @@ export function UpdateButton(element, plugin, icons, lang) {
 
 /**
  * @description Create editor HTML
- * @param {Array} buttonList option.buttonList
+ * @param {Array} buttonList `option.buttonList`
  * @param {?Object<string, *>} plugins Plugins
- * @param {Map<string, *>} options options
- * @param {Object<string, string>} icons icons
- * @param {Object<string, string>} lang lang
+ * @param {Map<string, *>|SunEditor.Options} options Options
+ * @param {Object<string, string>} icons Icons
+ * @param {Object<string, string>} lang Lang
  * @param {boolean} isUpdate Is update
  * @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);
+	const defaultButtonList = _defaultButtons(options.get('_rtl'), icons, lang);
 	/** @type {Object<string, Array<HTMLElement>>} */
 	const pluginCallButtons = {};
 	const responsiveButtons = [];
@@ -1596,7 +1291,6 @@ export function CreateToolBar(buttonList, plugins, options, icons, lang, isUpdat
 						// default command
 						if (button === 'copy' && !env.isClipboardSupported) {
 							console.warn('[SUNEDITOR.constructor.warn] Clipboard is not supported in this browser. : [copy] button is not rendered.');
-							continue;
 						}
 						modules = defaultButtonList[button];
 					}
@@ -1677,7 +1371,7 @@ export function CreateToolBar(buttonList, plugins, options, icons, lang, isUpdat
 		pluginCallButtons,
 		responsiveButtons,
 		buttonTray,
-		updateButtons
+		updateButtons,
 	};
 }