suneditor 3.0.0-beta.2 → 3.0.0-beta.3

package/src/core/editor.js

@@ -1,5 +1,5 @@
 import { env, converter, dom, numbers } from '../helper';
-import Constructor, { InitOptions, UpdateButton, CreateShortcuts, CreateStatusbar, OPTION_FIXED_FLAG } from './section/constructor';
+import Constructor, { InitOptions, UpdateButton, CreateShortcuts, CreateStatusbar, OPTION_FRAME_FIXED_FLAG, OPTION_FIXED_FLAG } from './section/constructor';
 import { UpdateStatusbarContext } from './section/context';
 import { BASIC_COMMANDS, ACTIVE_EVENT_COMMANDS, SELECT_ALL, DIR_BTN_ACTIVE, SAVE, COPY_FORMAT, FONT_STYLE, PAGE_BREAK } from './section/actives';
 import History from './base/history';
@@ -383,11 +383,17 @@ function Editor(multiTargets, options) {
 	this._notHideToolbar = false;
 
 	/**
-	 * @description Variables for controlling focus and blur events
+	 * @description Variables for controlling blur events
 	 * @type {boolean}
 	 */
 	this._preventBlur = false;
 
+	/**
+	 * @description Variables for controlling focus events
+	 * @type {boolean}
+	 */
+	this._preventFocus = false;
+
 	/**
 	 * @description Variables for controlling selection change events
 	 */
@@ -762,37 +768,39 @@ Editor.prototype = {
 	 * @param {EditorInitOptions_editor} newOptions Options
 	 */
 	resetOptions(newOptions) {
-		const _keys = Object.keys;
 		this.viewer.codeView(false);
 		this.viewer.showBlocks(false);
 
-		const newOptionKeys = _keys(newOptions);
+		const rootDiff = new Map();
+		const frameRoots = this.frameRoots;
+		const newRoots = [];
+		const newRootKeys = new Map();
+
+		// frame roots
+		const nRoot = {};
+		for (const k in newOptions) {
+			if (OPTION_FRAME_FIXED_FLAG[k] === undefined) continue;
+			nRoot[k] = newOptions[k];
+			delete newOptions[k];
+		}
+		for (const rootKey of frameRoots.keys()) {
+			newOptions[rootKey || ''] = { ...nRoot, ...newOptions[rootKey || ''] };
+		}
+
+		// check reoption validation
+		const newOptionKeys = Object.keys(newOptions);
 		CheckResetKeys(newOptionKeys, this.plugins, '');
 		if (newOptionKeys.length === 0) return;
 
+		if (frameRoots.size === 1) {
+			newOptionKeys.unshift(null);
+		}
+
 		// option merge
-		const rootDiff = {};
-		const rootKeys = this.rootKeys;
-		const frameRoots = this.frameRoots;
-		const newRoots = [];
-		const newRootKeys = {};
-		this._originOptions = [newOptions, this._originOptions].reduce(function (init, option) {
+		const _originOptions = [this._originOptions, newOptions].reduce((init, option) => {
 			for (const key in option) {
-				if (rootKeys.includes(key) && option[key]) {
-					const nro = option[key];
-					const newKeys = _keys(nro);
-					CheckResetKeys(newKeys, null, key + '.');
-					if (newKeys.length === 0) continue;
-
-					rootDiff[key] = new Map();
-					const o = frameRoots.get(key).get('options').get('_origin');
-					for (const rk in nro) {
-						const roV = nro[rk];
-						if (!newKeys.includes(rk) || o[rk] === roV) continue;
-						rootDiff[key].set(GetResetDiffKey(rk), true);
-						o[rk] = roV;
-					}
-					newRoots.push((newRootKeys[key] = { options: o }));
+				if (frameRoots.has(key || null)) {
+					RestoreFrameOptions(key, option, frameRoots, rootDiff, newRootKeys, newRoots);
 				} else {
 					init[key] = option[key];
 				}
@@ -802,17 +810,25 @@ Editor.prototype = {
 
 		// init options
 		const options = this.options;
-		const newMap = InitOptions(this._originOptions, newRoots, this.plugins).o;
-		/** --------- root start --------- */
-		for (let i = 0, k; (k = newOptionKeys[i]); i++) {
-			if (newRootKeys[k]) {
-				const diff = rootDiff[k];
+		const newO = InitOptions(_originOptions, newRoots, this.plugins);
+		const newOptionMap = newO.o;
+		const newFrameMap = newO.frameMap;
+		/** --------- [root start] --------- */
+		for (let i = 0, len = newOptionKeys.length, k; i < len; i++) {
+			k = newOptionKeys[i] || null;
+
+			if (newRootKeys.has(k)) {
+				const diff = rootDiff.get(k);
 				const fc = frameRoots.get(k);
 				const originOptions = fc.get('options');
-				const newRootOptions = newRootKeys[k].options;
+				const newRootOptions = newFrameMap.get(k);
 
-				// statusbar
-				if (diff.has('statusbar')) {
+				// --- set options : fc ---
+				fc.set('options', newRootOptions);
+
+				// statusbar-changed
+				if (diff.has('statusbar-changed')) {
+					// statusbar
 					dom.utils.removeItem(fc.get('statusbar'));
 					if (newRootOptions.get('statusbar')) {
 						const statusbar = CreateStatusbar(newRootOptions, null).statusbar;
@@ -824,6 +840,10 @@ Editor.prototype = {
 						newRootOptions.set('__statusbarEvent', null);
 						UpdateStatusbarContext(null, fc);
 					}
+					// charCounter
+					if (fc.get('statusbar')) {
+						this.char.display(fc);
+					}
 				}
 
 				// iframe's options
@@ -834,6 +854,7 @@ Editor.prototype = {
 					for (const origin_k in originAttr) frame.removeAttribute(origin_k, originAttr[origin_k]);
 					for (const new_k in newAttr) frame.setAttribute(new_k, newAttr[new_k]);
 				}
+
 				if (diff.has('iframe_cssFileName')) {
 					const docHead = fc.get('_wd').head;
 					const links = docHead.getElementsByTagName('link');
@@ -844,11 +865,12 @@ Editor.prototype = {
 					while (newLinks[0]) docHead.insertBefore(newLinks[0], sTag);
 				}
 
-				// --- options set ---
-				fc.set('options', newRootOptions);
+				if (diff.has('placeholder')) {
+					fc.get('placeholder').textContent = newRootOptions.get('placeholder');
+				}
 
 				// frame styles
-				this.ui.setEditorStyle(newRootOptions.get('_defaultStyles'), fc);
+				this.ui.setEditorStyle(newRootOptions.get('editorStyle'), fc);
 
 				// frame attributes
 				const frame = fc.get('wysiwyg');
@@ -859,25 +881,47 @@ Editor.prototype = {
 
 				continue;
 			}
-			/** --------- root end --------- */
+			/** --------- [root end] --------- */
 
-			options.set(k, newMap.get(k));
+			//  --- set options ---
+			options.set(k, newOptionMap.get(k));
 
-			/** apply option */
-			// history delay time
-			if (k === 'historyStackDelayTime') {
-				this.history.resetDelayTime(options.get('historyStackDelayTime'));
-				continue;
-			}
-			// set dir
-			if (k === 'textDirection') {
-				this.setDir(options.get('_rtl') ? 'ltr' : 'rtl');
-				continue;
+			/** Options that require a function call */
+			switch (k) {
+				case 'theme': {
+					this.ui.setTheme(options.get('theme'));
+					break;
+				}
+				case 'events': {
+					const events = options.get('events');
+					for (const name in events) {
+						this.events[name] = events[name];
+					}
+					break;
+				}
+				case 'autoStyleify': {
+					this.html.__resetAutoStyleify(options.get('autoStyleify'));
+					break;
+				}
+				case 'textDirection': {
+					this.setDir(options.get('_rtl') ? 'ltr' : 'rtl');
+					break;
+				}
+				case 'historyStackDelayTime': {
+					this.history.resetDelayTime(options.get('historyStackDelayTime'));
+					break;
+				}
+				case 'defaultLineBreakFormat': {
+					this.format.__resetBrLineBreak(options.get('defaultLineBreakFormat'));
+				}
 			}
 		}
 
 		/** apply options */
-		// toolbar
+		// _origin
+		this._originOptions = _originOptions;
+
+		// --- [toolbar] ---
 		const toolbar = this.context.get('toolbar.main');
 		// width
 		if (/inline|balloon/i.test(options.get('mode')) && newOptionKeys.includes('toolbar_width')) {
@@ -886,6 +930,8 @@ Editor.prototype = {
 		// hide
 		if (options.get('toolbar_hide')) {
 			toolbar.style.display = 'none';
+		} else {
+			toolbar.style.display = '';
 		}
 		// shortcuts hint
 		if (options.get('shortcutsHint')) {
@@ -894,11 +940,6 @@ Editor.prototype = {
 			dom.utils.addClass(toolbar, 'se-shortcut-hide');
 		}
 
-		// theme
-		if (this._originOptions.theme !== (newOptions.theme ?? this._originOptions.theme)) {
-			this.ui.setTheme(newOptions.theme);
-		}
-
 		this.effectNode = null;
 		this._setFrameInfo(this.frameRoots.get(this.status.rootKey));
 	},
@@ -1444,7 +1485,7 @@ Editor.prototype = {
 
 	/**
 	 * @private
-	 * @description Caches shortcut keys for commands.
+	 * @description Caches custom(starts with "_") shortcut keys for commands.
 	 */
 	__cachingShortcuts() {
 		const shortcuts = this.options.get('shortcuts');
@@ -1689,16 +1730,41 @@ Editor.prototype = {
 	Constructor: Editor
 };
 
+function RestoreFrameOptions(key, option, frameRoots, rootDiff, newRootKeys, newRoots) {
+	const nro = option[key];
+	const newKeys = Object.keys(nro);
+	CheckResetKeys(newKeys, null, key + '.');
+	if (newKeys.length === 0) return false;
+
+	const rootKey = key || null;
+	rootDiff.set(rootKey, new Map());
+
+	const o = frameRoots.get(rootKey).get('options').get('_origin');
+	const no = {};
+	const hasOwn = Object.prototype.hasOwnProperty;
+	for (const rk in nro) {
+		if (!hasOwn.call(OPTION_FRAME_FIXED_FLAG, rk)) continue;
+		const roV = nro[rk];
+		if (!newKeys.includes(rk) || o[rk] === roV) continue;
+		rootDiff.get(rootKey).set(GetResetDiffKey(rk), true);
+		no[rk] = roV;
+	}
+
+	const newO = { ...o, ...no };
+	newRootKeys.set(rootKey, new Map(Object.entries(newO)));
+	newRoots.push({ key: rootKey, options: newO });
+}
+
 function GetResetDiffKey(key) {
-	if (/^statusbar/i.test(key)) return 'statusbar';
+	if (/^statusbar|^charCounter/.test(key)) return 'statusbar-changed';
 	return key;
 }
 
 function CheckResetKeys(keys, plugins, root) {
 	for (let i = 0, len = keys.length, k; i < len; i++) {
 		k = keys[i];
-		if (OPTION_FIXED_FLAG[k] === 'fixed' || (plugins && plugins[k])) {
-			console.warn(`[SUNEDITOR.warn.resetOptions] "[${root + k}]" options not available in resetOptions have no effect.`);
+		if (OPTION_FIXED_FLAG[k] === 'fixed' || OPTION_FRAME_FIXED_FLAG[k] === 'fixed' || (plugins && plugins[k])) {
+			console.warn(`[SUNEDITOR.warn.resetOptions] The "[${root + k}]" option cannot be changed after the editor is created.`);
 			keys.splice(i--, 1);
 			len--;
 		}

package/src/core/section/actives.js

@@ -31,6 +31,35 @@ const __RemoveCopyformt = function (ww, button) {
 	return true;
 };
 
+/**
+ * @private
+ * @description Finds the first and last child elements in a selection area.
+ * @param {Element} selectArea Selection area element
+ * @returns {{ first: Node, last: Node}} Object containing the first and last child elements
+ */
+const __findFirstAndLast = function (selectArea) {
+	const isContentLess = dom.check.isContentLess;
+	const isTable = dom.check.isTable;
+	const first =
+		dom.query.getEdgeChild(
+			dom.query.getEdgeChild(selectArea, (current) => !isContentLess(current), false),
+			(current) => {
+				return current.childNodes.length === 0 || current.nodeType === 3 || isTable(current);
+			},
+			false
+		) || selectArea.firstChild;
+	const last =
+		dom.query.getEdgeChild(
+			selectArea.lastChild,
+			(current) => {
+				return current.childNodes.length === 0 || current.nodeType === 3 || isTable(current);
+			},
+			true
+		) || selectArea.lastChild;
+
+	return { first, last };
+};
+
 /**
  * @description List of commands that trigger active event handling in the editor.
  * - These commands typically apply inline formatting or structural changes.
@@ -77,39 +106,35 @@ export function SELECT_ALL(editor) {
 	// select all
 	const scopeTagList = scopeSelectionTags.filter((tagName) => tagName !== prevScopeTagName);
 	const scopeBaseTag = dom.query.getParentElement(prevScopeTag || editor.selection.getNode(), (current) => scopeTagList.includes(current.nodeName?.toLowerCase()));
-	const selectArea = scopeBaseTag || ww;
 
-	let first =
-		dom.query.getEdgeChild(
-			dom.query.getEdgeChild(selectArea, (current) => !dom.check.isContentLess(current), false),
-			(current) => {
-				return current.childNodes.length === 0 || current.nodeType === 3 || dom.check.isTable(current);
-			},
-			false
-		) || selectArea.firstChild;
-	let last =
-		dom.query.getEdgeChild(
-			selectArea.lastChild,
-			(current) => {
-				return current.childNodes.length === 0 || current.nodeType === 3 || dom.check.isTable(current);
-			},
-			true
-		) || selectArea.lastChild;
+	let selectArea = scopeBaseTag || ww;
+	let { first, last } = __findFirstAndLast(selectArea);
+
+	if (!first || !last) return;
+
+	const isZeroWidth = dom.check.isZeroWidth;
+	while (isZeroWidth(first) && isZeroWidth(last) && selectArea !== ww) {
+		selectArea = selectArea.parentElement;
+		({ first, last } = __findFirstAndLast(dom.query.getParentElement(selectArea, (current) => scopeTagList.includes(current.nodeName?.toLowerCase())) || ww));
+	}
 
 	if (!first || !last) return;
 
-	if (dom.check.isMedia(first) || editor.component.is(first.parentElement) || dom.check.isTableElements(first)) {
-		const info = editor.component.get(first) || editor.component.get(first.parentElement);
+	let info = null;
+	if (dom.check.isMedia(first) || (info = editor.component.get(first.parentElement)) || dom.check.isTableElements(first)) {
 		const br = dom.utils.createElement('BR');
 		const format = dom.utils.createElement(editor.options.get('defaultLine'), null, br);
 		first = info ? info.container || info.cover : first;
-		first.parentNode.insertBefore(format, first);
+		first.parentElement.insertBefore(format, first);
 		first = br;
 	}
 
-	if (dom.check.isMedia(last) || editor.component.is(last.parentElement) || dom.check.isTableElements(last)) {
-		last = dom.utils.createElement('BR');
-		selectArea.appendChild(dom.utils.createElement(editor.options.get('defaultLine'), null, last));
+	if (dom.check.isMedia(last) || (info = editor.component.get(last.parentElement)) || dom.check.isTableElements(last)) {
+		const br = dom.utils.createElement('BR');
+		const format = dom.utils.createElement(editor.options.get('defaultLine'), null, br);
+		last = info ? info.container || info.cover : last;
+		last.parentElement.appendChild(format);
+		last = br;
 	}
 
 	editor.toolbar._showBalloon(editor.selection.setRange(first, 0, last, last.textContent.length));

package/src/core/section/constructor.js

@@ -224,107 +224,115 @@ const RETAIN_STYLE_MODE = ['repeat', 'always', 'none'];
  * @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_FIXED_FLAG = {
+export const OPTION_FRAME_FIXED_FLAG = {
 	value: 'fixed',
-	placeholder: 'fixed',
-	editableFrameAttributes: null,
-	width: null,
-	minWidth: null,
-	maxWidth: null,
-	height: null,
-	minHeight: null,
-	maxHeight: null,
-	editorStyle: null,
+	placeholder: true,
+	editableFrameAttributes: true,
+	width: true,
+	minWidth: true,
+	maxWidth: true,
+	height: true,
+	minHeight: true,
+	maxHeight: true,
+	editorStyle: true,
 	iframe: 'fixed',
-	iframe_fullPage: null,
-	iframe_attributes: null,
-	iframe_cssFileName: null,
-	statusbar: null,
-	statusbar_showPathLabel: null,
-	statusbar_resizeEnable: null,
-	charCounter: null,
-	charCounter_max: null,
-	charCounter_label: null,
-	charCounter_type: null,
-	plugins: null,
-	excludedPlugins: null,
+	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: null,
-	strictMode: null,
+	v2Migration: 'fixed',
+	strictMode: 'fixed',
 	mode: 'fixed',
 	type: 'fixed',
-	theme: null,
+	theme: true,
 	lang: 'fixed',
 	fontSizeUnits: 'fixed',
-	allowedClassName: null,
-	closeModalOutsideClick: null,
-	copyFormatKeepOn: null,
-	syncTabIndent: null,
-	tabDisable: null,
-	autoLinkify: null,
-	autoStyleify: null,
-	scrollToOptions: null,
-	componentScrollToOptions: null,
-	retainStyleMode: null,
-	allowedExtraTags: null,
-	events: null,
+	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: null,
+	__tagStyles: 'fixed',
 	tagStyles: 'fixed',
 	spanStyles: 'fixed',
 	lineStyles: 'fixed',
-	textDirection: null,
-	reverseButtons: null,
-	historyStackDelayTime: null,
-	lineAttrReset: null,
-	printClass: null,
+	textDirection: true,
+	reverseButtons: 'fixed',
+	historyStackDelayTime: true,
+	lineAttrReset: true,
+	printClass: true,
 	defaultLine: 'fixed',
-	defaultLineBreakFormat: null,
-	scopeSelectionTags: null,
+	defaultLineBreakFormat: true,
+	scopeSelectionTags: true,
 	__defaultElementWhitelist: 'fixed',
 	elementWhitelist: 'fixed',
 	elementBlacklist: 'fixed',
 	__defaultAttributeWhitelist: 'fixed',
 	attributeWhitelist: 'fixed',
 	attributeBlacklist: 'fixed',
-	__defaultFormatLine: null,
+	__defaultFormatLine: 'fixed',
 	formatLine: 'fixed',
-	__defaultFormatBrLine: null,
+	__defaultFormatBrLine: 'fixed',
 	formatBrLine: 'fixed',
 	__defaultFormatClosureBrLine: 'fixed',
 	formatClosureBrLine: 'fixed',
-	__defaultFormatBlock: null,
+	__defaultFormatBlock: 'fixed',
 	formatBlock: 'fixed',
-	__defaultFormatClosureBlock: null,
+	__defaultFormatClosureBlock: 'fixed',
 	formatClosureBlock: 'fixed',
-	allowedEmptyTags: null,
-	toolbar_width: null,
+	allowedEmptyTags: true,
+	toolbar_width: true,
 	toolbar_container: 'fixed',
-	toolbar_sticky: null,
-	toolbar_hide: null,
+	toolbar_sticky: true,
+	toolbar_hide: true,
 	subToolbar: 'fixed',
 	statusbar_container: 'fixed',
-	shortcutsHint: null,
+	shortcutsHint: true,
 	shortcutsDisable: 'fixed',
 	shortcuts: 'fixed',
-	fullScreenOffset: null,
-	previewTemplate: null,
-	printTemplate: null,
-	componentAutoSelect: null,
-	defaultUrlProtocol: null,
-	allUsedStyles: null,
-	toastMessageTime: null,
+	fullScreenOffset: true,
+	previewTemplate: true,
+	printTemplate: true,
+	componentAutoSelect: true,
+	defaultUrlProtocol: true,
+	allUsedStyles: 'fixed',
+	toastMessageTime: true,
 	icons: 'fixed',
-	freeCodeViewMode: null,
-	__lineFormatFilter: null,
-	__pluginRetainFilter: null,
+	freeCodeViewMode: true,
+	__lineFormatFilter: true,
+	__pluginRetainFilter: true,
 	__listCommonStyle: 'fixed',
 	externalLibs: 'fixed'
 };
@@ -438,7 +446,7 @@ function Constructor(editorTargets, options) {
 		const to = optionMap.frameMap.get(editTarget.key);
 		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' });
-		const editor_div = dom.utils.createElement('DIV', { class: 'se-wrapper' + (o.get('type') === 'document' ? ' se-type-document' : '') });
+		const editor_div = dom.utils.createElement('DIV', { class: 'se-wrapper' + (o.get('type') === 'document' ? ' se-type-document' : '') + (o.get('_type_options').includes('header') ? ' se-type-document-header' : '') });
 
 		container.appendChild(dom.utils.createElement('DIV', { class: 'se-toolbar-shadow' }));
 
@@ -574,13 +582,16 @@ export function CreateShortcuts(command, button, values, keyMap, rc, reverseKeys
 		plugin = null;
 		method = a[a.length - 1].trim?.();
 		if (method.startsWith('~')) {
+			// plugin key, method
 			plugin = command;
 			method = a.pop().trim().substring(1);
-		} else if (method.startsWith('p~')) {
+		} else if (method.startsWith('$~')) {
+			// custom key, plugin method
 			const a_ = a.pop().trim().substring(2).split('.');
 			plugin = a_[0];
 			method = a_[1];
 		} else if (method.startsWith('$')) {
+			// directly method
 			_i = 1;
 			method = values[i + 2];
 		} else {
@@ -613,13 +624,16 @@ export function CreateShortcuts(command, button, values, keyMap, rc, reverseKeys
 			}
 		}
 
-		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);
+		v = v.split('|');
+		for (let j = 0, len = v.length; j < len; j++) {
+			k = c ? v[j] + (s ? '1000' : '') : v[j];
+			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, s, edge, space, enter, textTrigger, plugin, command, method, r, type: button?.getAttribute('data-type'), button, key: k });
+				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;
@@ -809,7 +823,7 @@ export function InitOptions(options, editorTargets, plugins) {
 	/** whitelist, blacklist */
 	// default line
 	o.set('defaultLine', typeof options.defaultLine === 'string' && options.defaultLine.length > 0 ? options.defaultLine : 'p');
-	o.set('_defaultBrLineBreak', options.defaultLineBreakFormat === 'br');
+	o.set('defaultLineBreakFormat', options.defaultLineBreakFormat || 'line');
 	o.set('scopeSelectionTags', options.scopeSelectionTags || DEFAULT_SCOPE_SELECTION_TAGS.split('|'));
 	// element
 	const elw = (typeof options.elementWhitelist === 'string' ? options.elementWhitelist : '').toLowerCase();
@@ -926,9 +940,9 @@ export function InitOptions(options, editorTargets, plugins) {
 					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', '']
+					_h1: ['c+s+Digit1|Numpad1+$~formatBlock.applyHeaderByShortcut', ''],
+					_h2: ['c+s+Digit2|Numpad2+$~formatBlock.applyHeaderByShortcut', ''],
+					_h3: ['c+s+Digit3|Numpad3+$~formatBlock.applyHeaderByShortcut', '']
 				},
 				options.shortcuts || {}
 		  ].reduce((_default, _new) => {
@@ -1115,6 +1129,7 @@ function InitFrameOptions(o, origin) {
 	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('editorStyle', editorStyle);
 	fo.set('_defaultStyles', converter._setDefaultOptionStyle(fo, typeof editorStyle === 'string' ? editorStyle : ''));
 	// iframe
 	fo.set('iframe', !!(iframe_fullPage || iframe));
@@ -1175,9 +1190,8 @@ function _initTargetElements(key, options, topDiv, targetOptions) {
 
 	// textarea for code view
 	const textarea = dom.utils.createElement('TEXTAREA', { class: 'se-wrapper-inner se-code-viewer', style: editorStyles.frame });
-	let placeholder = null;
+	const placeholder = dom.utils.createElement('SPAN', { class: 'se-placeholder' });
 	if (targetOptions.get('placeholder')) {
-		placeholder = dom.utils.createElement('SPAN', { class: 'se-placeholder' });
 		placeholder.textContent = targetOptions.get('placeholder');
 	}