suneditor 3.0.0-beta.2 → 3.0.0-beta.4

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "suneditor",
-	"version": "3.0.0-beta.2",
+	"version": "3.0.0-beta.4",
 	"description": "Vanilla javascript based WYSIWYG web editor",
 	"author": "Yi JiHong",
 	"license": "MIT",

package/src/assets/design/color.css

@@ -37,8 +37,18 @@
 	--se-statusbar-font-color: #666;
 	--se-overlay-background-color: #222;
 
-	/* hover, active */
+	/* hover */
+	--se-hover-color: #000;
+	--se-hover-dark-color: #cccccc;
+	--se-hover-dark2-color: #bfbfbf;
+	--se-hover-dark3-color: #b0b0b0;
+	--se-hover-light-color: #e1e1e1;
+	--se-hover-light2-color: #e6e6e6;
+	--se-hover-light3-color: #d9d9d9;
+
+	/* active */
 	--se-active-color: #5cd2e6;
+	--se-active-hover-color: #2964b7;
 	--se-active-dark-color: #80bdff;
 	--se-active-dark2-color: #407dd1;
 	--se-active-dark3-color: #4592ff;

package/src/assets/suneditor.css

@@ -201,9 +201,13 @@
 /* se-type-document - placeholder position set */
 .sun-editor .se-wrapper.se-type-document .se-placeholder {
 	top: clamp(var(--se-doc-min-padding));
+	left: clamp(var(--se-doc-min-padding));
+	right: clamp(var(--se-doc-min-padding));
+	padding: var(--se-edit-inner-padding-doc-type);
+}
+.sun-editor .se-wrapper.se-type-document.se-type-document-header .se-placeholder {
 	left: var(--se-doc-info-width);
 	right: var(--se-doc-info-width);
-	padding: var(--se-edit-inner-padding-doc-type);
 }
 /** --- se-type-document end ---------------------------------------------------------- */
 
@@ -253,16 +257,17 @@
 
 .sun-editor .se-btn:not(.on):not(.active):enabled:hover,
 .sun-editor .se-btn:not(.on):not(.active):enabled:focus {
-	background-color: var(--se-main-divider-color);
-	border-color: var(--se-main-border-color);
+	color: var(--se-hover-color);
+	background-color: var(--se-hover-light-color);
+	border-color: var(--se-hover-dark-color);
 }
 
 .sun-editor .se-btn:not(.on):not(.active):enabled:active,
 .sun-editor .se-btn:not(.on):not(.active):enabled.__se__active {
-	background-color: var(--se-main-shadow-color);
-	border-color: var(--se-main-shadow-color) !important;
-	outline: 1px solid var(--se-main-outline-color) !important;
-	box-shadow: 0 0 0 0.3rem var(--se-main-shadow-color);
+	background-color: var(--se-hover-light2-color);
+	border-color: var(--se-hover-dark2-color) !important;
+	outline: 1px solid var(--se-hover-dark3-color) !important;
+	box-shadow: 0 0 0 0.3rem var(--se-hover-light2-color);
 	transition: box-shadow 0.1s ease-in-out;
 }
 
@@ -274,7 +279,7 @@
 .sun-editor .se-menu-list li:hover .se-btn-input input:enabled {
 	border-width: 1px;
 	border-style: solid;
-	border-color: var(--se-main-divider-color);
+	border-color: var(--se-hover-light3-color);
 }
 
 /* after, before button - on, active */
@@ -324,7 +329,7 @@
 .sun-editor .se-btn:enabled.on:hover,
 .sun-editor .se-btn:enabled.on:focus {
 	background-color: var(--se-active-light3-color);
-	color: var(--se-active-dark2-color);
+	color: var(--se-active-hover-color);
 	border-color: var(--se-active-light5-color);
 }
 
@@ -349,14 +354,14 @@
 .sun-editor .se-btn:enabled.active:hover,
 .sun-editor .se-btn:enabled.active:focus {
 	background-color: var(--se-active-light5-color);
-	color: var(--se-active-dark5-color);
+	color: var(--se-active-hover-color);
 	border-color: var(--se-active-dark4-color);
 }
 
 .sun-editor .se-btn:enabled.active:active,
 .sun-editor .se-btn:enabled.active.__se__active {
 	background-color: var(--se-active-light5-color);
-	color: var(--se-active-dark5-color);
+	color: var(--se-active-hover-color);
 	border-color: var(--se-active-dark5-color) !important;
 	outline: 1px solid var(--se-active-dark5-color) !important;
 	box-shadow: 0 0 0 0.3rem var(--se-active-light5-color);
@@ -773,9 +778,7 @@
 	height: 100%;
 	top: 0;
 	left: 0;
-	background-color: rgba(0, 0, 0, 0.35);
-	opacity: 0.7;
-	filter: alpha(opacity=70);
+	background-color: transparent;
 	z-index: 2147483647;
 }
 
@@ -811,7 +814,7 @@
 	opacity: 0.95;
 	border-radius: var(--se-border-radius);
 	cursor: pointer;
-	z-index: 2147483647;
+	z-index: 2147483646;
 	transition: opacity 0.3s ease, color 0.3s ease, background-color 0.3s ease;
 }
 .sun-editor .se-line-breaker-component.se-on-selected {
@@ -868,7 +871,7 @@
 .sun-editor .se-toolbar.se-toolbar-balloon {
 	display: none;
 	position: absolute;
-	z-index: 2147483647;
+	z-index: 2147483646;
 	width: auto;
 	box-shadow: 0 3px 9px var(--se-shadow-layer-color);
 	-webkit-box-shadow: 0 3px 9px var(--se-shadow-layer-color);
@@ -1057,7 +1060,7 @@
 	left: 0px;
 	width: 100%;
 	height: 0px;
-	z-index: 2147483647;
+	z-index: 2147483646;
 }
 
 /** --- dropdown layer ---------------------------------------------------------- */
@@ -1733,7 +1736,7 @@
 	-khtml-user-select: none;
 	-webkit-user-select: none;
 	-ms-user-select: none;
-	z-index: 2147483647;
+	z-index: 2147483646;
 	background-color: transparent;
 }
 
@@ -1783,7 +1786,7 @@
 	left: 0;
 	width: 100%;
 	height: 100%;
-	z-index: 2147483647;
+	z-index: 2147483646;
 }
 .sun-editor .se-modal-area.se-backdrop-show {
 	display: block;
@@ -2774,7 +2777,7 @@
 	min-width: auto;
 	top: 0px;
 	left: 0px;
-	z-index: 2147483647;
+	z-index: 2147483646;
 	display: none;
 	width: -webkit-max-content;
 	width: -moz-max-content;
@@ -2845,7 +2848,7 @@
 	background-color: var(--se-active-light4-color);
 	border-color: var(--se-active-light4-color) !important;
 	outline: 1px solid var(--se-active-color) !important;
-	box-shadow: inset 2px 2px 5px var(--se-active-light6-color), inset -2px -2px 5px var(--se-active-light-color);
+	box-shadow: none;
 	transition: background-color 0.1s ease-in-out, box-shadow 0.1s ease-in-out;
 }
 
@@ -2866,7 +2869,7 @@
 	left: 0;
 	width: 100%;
 	height: 100%;
-	z-index: 2147483647;
+	z-index: 2147483646;
 }
 
 .sun-editor .se-browser label,
@@ -3313,7 +3316,7 @@
 	left: 0;
 	width: 100%;
 	height: 100%;
-	z-index: 2147483647;
+	z-index: 2147483646;
 	pointer-events: none;
 }
 
@@ -4031,7 +4034,7 @@
 	pointer-events: none;
 	width: 2px;
 	background-color: var(--se-active-dark5-color);
-	z-index: 2147483647;
+	z-index: 2147483646;
 }
 .sun-editor.sun-editor-carrier-wrapper .se-drag-cursor::before {
 	content: '';

package/src/core/base/eventHandlers/handler_ww_dragDrop.js

@@ -15,9 +15,10 @@ import { _DragHandle } from '../../../modules';
  * @param {DragEvent} e - Event object
  */
 export function OnDragOver_wysiwyg(fc, dragCursor, _iframeTopArea, _innerToolbar, e) {
-	e.preventDefault();
-
 	const { sc, so, ec, eo } = this.selection.getDragEventLocationRange(e);
+	if (!sc) return;
+
+	e.preventDefault();
 
 	const cursorRange = fc.get('_wd').createRange();
 	cursorRange.setStart(sc, so);
@@ -77,6 +78,7 @@ export function OnDrop_wysiwyg(fc, dragCursor, e) {
 		if (!dataTransfer) return true;
 
 		const { sc, so, ec, eo } = this.selection.getDragEventLocationRange(e);
+		if (!sc) return;
 
 		if (dom.query.getParentElement(sc, '.se-disable-pointer')) {
 			e.preventDefault();

package/src/core/base/eventHandlers/handler_ww_key_input.js

@@ -632,7 +632,7 @@ export async function OnKeyDown_wysiwyg(fc, e) {
 							const baseIndex = dom.query.findTextIndexOnLine(formatEl, range.startContainer, range.startOffset, this.component.is.bind(this.component));
 							const prevTabEndIndex = this.format.isLine(formatEl.previousElementSibling) ? dom.query.findTabEndIndex(formatEl.previousElementSibling, baseIndex, 2) : 0;
 							if (prevTabEndIndex > baseIndex) {
-								tabSize = prevTabEndIndex - baseIndex + 1;
+								tabSize = prevTabEndIndex - baseIndex;
 							}
 						}
 

package/src/core/base/eventManager.js

@@ -500,13 +500,13 @@ EventManager.prototype = {
 		const sIsCell = dom.check.isTableCell(sCell);
 		const eIsCell = dom.check.isTableCell(eCell);
 		if (((sIsCell && !sCell.previousElementSibling && !sCell.parentElement.previousElementSibling) || (eIsCell && !eCell.nextElementSibling && !eCell.parentElement.nextElementSibling)) && sCell !== eCell) {
-			const ancestor = dom.query.getParentElement(range.commonAncestorContainer, dom.check.isFigure) || range.commonAncestorContainer;
+			const ancestor = dom.query.getParentElement(range.commonAncestorContainer, dom.check.isFigure)?.parentElement || range.commonAncestorContainer;
 			if (!sIsCell) {
-				dom.utils.removeItem(dom.query.getParentElement(eCell, (current) => ancestor === current));
+				dom.utils.removeItem(dom.query.getParentElement(eCell, (current) => ancestor === current.parentNode));
 			} else if (!eIsCell) {
-				dom.utils.removeItem(dom.query.getParentElement(sCell, (current) => ancestor === current));
+				dom.utils.removeItem(dom.query.getParentElement(sCell, (current) => ancestor === current.parentNode));
 			} else {
-				dom.utils.removeItem(dom.query.getParentElement(sCell, (current) => ancestor === current));
+				dom.utils.removeItem(dom.query.getParentElement(sCell, (current) => ancestor === current.parentNode));
 				this.editor._nativeFocus();
 				return true;
 			}
@@ -881,14 +881,14 @@ EventManager.prototype = {
 
 		/** line breaker */
 		const lineBreakEventName = isMobile ? 'touchstart' : 'mousedown';
-		this.addEvent(
-			[fc.get('lineBreaker_t'), fc.get('lineBreaker_b')],
-			lineBreakEventName,
-			(e) => {
-				e.preventDefault();
-			},
-			false
-		);
+		// this.addEvent(
+		// 	[fc.get('lineBreaker_t'), fc.get('lineBreaker_b')],
+		// 	lineBreakEventName,
+		// 	(e) => {
+		// 		e.preventDefault();
+		// 	},
+		// 	false
+		// );
 		this.addEvent(fc.get('lineBreaker_t'), lineBreakEventName, DisplayLineBreak.bind(this, 't'), false);
 		this.addEvent(fc.get('lineBreaker_b'), lineBreakEventName, DisplayLineBreak.bind(this, 'b'), false);
 
@@ -1222,6 +1222,40 @@ EventManager.prototype = {
 		if (!env.isMobile) this.editor.selection.scrollTo(range);
 	},
 
+	/**
+	 * @private
+	 * @description Focus Event Postprocessing
+	 * @this {EventManagerThis}
+	 * @param {__se__FrameContext} frameContext - frame context object
+	 * @param {Event} event - Event object
+	 */
+	__postFocusEvent(frameContext, event) {
+		if (this.editor.isInline || this.editor.isBalloonAlways) this.toolbar.show();
+		if (this.editor.isSubBalloonAlways) this.subToolbar.show();
+
+		// user event
+		this.triggerEvent('onFocus', { frameContext, event });
+		// plugin event
+		this._callPluginEvent('onFocus', { frameContext, event });
+	},
+
+	/**
+	 * @private
+	 * @description Blur Event Postprocessing
+	 * @this {EventManagerThis}
+	 * @param {__se__FrameContext} frameContext - frame context object
+	 * @param {Event} event - Event object
+	 */
+	__postBlurEvent(frameContext, event) {
+		if (this.editor.isInline || this.editor.isBalloon) this._hideToolbar();
+		if (this.editor.isSubBalloon) this._hideToolbar_sub();
+
+		// user event
+		this.triggerEvent('onBlur', { frameContext, event });
+		// plugin event
+		this._callPluginEvent('onBlur', { frameContext, event });
+	},
+
 	constructor: EventManager
 };
 
@@ -1258,6 +1292,10 @@ function OnFocus_wysiwyg(frameContext, e) {
 		return false;
 	}
 
+	this.status.hasFocus = true;
+	this.component.__prevent = false;
+	this.triggerEvent('onNativeFocus', { frameContext, event: e });
+
 	const rootKey = frameContext.get('key');
 
 	if (this._inputFocus) {
@@ -1269,11 +1307,11 @@ function OnFocus_wysiwyg(frameContext, e) {
 		return;
 	}
 
-	if (this.status.rootKey === rootKey && this.editor._preventBlur) return;
+	if ((this.status.rootKey === rootKey && this.editor._preventBlur) || this.editor._preventFocus) return;
+	this.editor._preventFocus = true;
 
 	const onSelected = this.editor.status.onSelected || this.editor.opendModal;
 	this.ui._offCurrentController();
-	this.status.hasFocus = true;
 
 	dom.utils.removeClass(this.editor.commandTargets.get('codeView'), 'active');
 	dom.utils.setDisabled(this.editor._codeViewDisabledButtons, false);
@@ -1286,12 +1324,7 @@ function OnFocus_wysiwyg(frameContext, e) {
 	}
 
 	this._w.setTimeout(() => {
-		if (this.editor.isInline) this.toolbar._showInline();
-
-		// user event
-		this.triggerEvent('onFocus', { frameContext, event: e });
-		// plugin event
-		this._callPluginEvent('onFocus', { frameContext, event: e });
+		this.__postFocusEvent(frameContext, e);
 	}, 0);
 }
 
@@ -1301,12 +1334,14 @@ function OnFocus_wysiwyg(frameContext, e) {
  * @param {Event} e - Event object
  */
 function OnBlur_wysiwyg(frameContext, e) {
-	if (this._inputFocus || this.editor._preventBlur || frameContext.get('isCodeView') || frameContext.get('isReadOnly') || frameContext.get('isDisabled')) return;
+	if (frameContext.get('isCodeView') || frameContext.get('isReadOnly') || frameContext.get('isDisabled')) return;
 
 	this.status.hasFocus = false;
 	this.editor.effectNode = null;
-	if (this.editor.isInline || this.editor.isBalloon) this._hideToolbar();
-	if (this.editor.isSubBalloon) this._hideToolbar_sub();
+	this.triggerEvent('onNativeBlur', { frameContext, event: e });
+
+	if (this._inputFocus || this.editor._preventBlur) return;
+	this.editor._preventFocus = false;
 
 	this._setKeyEffect([]);
 
@@ -1319,10 +1354,7 @@ function OnBlur_wysiwyg(frameContext, e) {
 
 	this.history.check(frameContext.get('key'), this.status._range);
 
-	// user event
-	this.triggerEvent('onBlur', { frameContext, event: e });
-	// plugin event
-	this._callPluginEvent('onBlur', { frameContext, event: e });
+	this.__postBlurEvent(frameContext, e);
 }
 
 /**
@@ -1380,12 +1412,11 @@ function DisplayLineBreak(dir, e) {
 	this.component.deselect();
 
 	try {
-		this.editor._preventBlur = true;
 		const focusEl = isList ? format : format.firstChild;
 		this.selection.setRange(focusEl, 1, focusEl, 1);
 		this.history.push(false);
-	} finally {
-		this.editor._preventBlur = false;
+	} catch (err) {
+		console.warn('[SUNEDITOR.lineBreaker.error]', err);
 	}
 }
 

package/src/core/class/char.js

@@ -88,9 +88,10 @@ Char.prototype = {
 	/**
 	 * @this {CharThis}
 	 * @description Set the char count to charCounter element textContent.
+	 * @param {?__se__FrameContext=} fc Frame context
 	 */
-	display() {
-		const charCounter = this.editor.frameContext.get('charCounter');
+	display(fc) {
+		const charCounter = (fc || this.editor.frameContext).get('charCounter');
 		if (charCounter) {
 			_w.setTimeout(() => {
 				charCounter.textContent = this.getLength();

package/src/core/class/component.js

@@ -7,8 +7,8 @@ import { dom, env, numbers, unicode, keyCodeMap, converter } from '../../helper'
 import { Figure, _DragHandle } from '../../modules';
 
 const { _w, ON_OVER_COMPONENT, isMobile } = env;
-const DIR_KEYCODE = /^(3[7-9]|40)$/;
-const DIR_UP_KEYCODE = /^3[7-8]$/;
+const DIR_KEYCODE = /^Arrow(Left|Up|Right|Down)$/;
+const DIR_UP_KEYCODE = /^Arrow(Left|Up)$/;
 
 /**
  * @typedef {Omit<Component & Partial<__se__EditorInjector>, 'component'>} ComponentThis
@@ -79,6 +79,8 @@ function Component(editor) {
 	/** @type {boolean} */
 	this.__selectionSelected = false;
 
+	this.__prevent = false;
+
 	this.editor.applyFrameRoots((e) => {
 		// drag
 		const dragHandle = dom.utils.createElement('DIV', { class: 'se-drag-handle', draggable: 'true' }, this.icons.selection);
@@ -230,7 +232,8 @@ Component.prototype = {
 		const plugin = info.launcher || this.plugins[pluginName];
 		if (!plugin) return;
 
-		if (!isInput && _DragHandle.get('__overInfo') !== ON_OVER_COMPONENT) {
+		const notOver = _DragHandle.get('__overInfo') !== ON_OVER_COMPONENT;
+		if (!isInput && notOver) {
 			if (this.editor.status._onMousedown) return;
 
 			this.editor._preventBlur = true;
@@ -245,6 +248,7 @@ Component.prototype = {
 		}
 
 		this.isSelected = true;
+		this.__prevent = true;
 
 		let isNonFigureComponent;
 		if (typeof plugin.select === 'function') isNonFigureComponent = plugin.select(element);
@@ -270,6 +274,11 @@ Component.prototype = {
 			dom.utils.addClass(info.container, 'se-component-selected');
 		}, 0)();
 
+		if (notOver && !this.status.hasFocus && !this.editor._preventFocus) {
+			this.eventManager.__postFocusEvent(this.editor.frameContext, null);
+			this.editor._preventFocus = true;
+		}
+
 		if (!isBreakComponent && __overInfo !== ON_OVER_COMPONENT) {
 			// set zero width space
 			if (!this.isInline(info.container)) return;
@@ -321,6 +330,11 @@ Component.prototype = {
 		}, 0);
 		this.__deselect();
 		this.ui.setControllerOnDisabledButtons(false);
+
+		if (this.editor._preventFocus && !this.status.hasFocus && !this.__prevent) {
+			this.eventManager.__postBlurEvent(this.editor.frameContext, null);
+			this.editor._preventFocus = false;
+		}
 	},
 
 	/**

package/src/core/class/format.js

@@ -35,8 +35,9 @@ function Format(editor) {
 	this._formatClosureBlockCheck = this.options.get('formatClosureBlock').reg;
 	this._formatClosureBrLineCheck = this.options.get('formatClosureBrLine').reg;
 	this._textStyleTagsCheck = new RegExp('^(' + this.options.get('textStyleTags') + ')$', 'i');
-	// members - _defaultBrLineBreak
-	this._brLineBreak = this.options.get('_defaultBrLineBreak');
+
+	this._brLineBreak = null;
+	this.__resetBrLineBreak(this.options.get('defaultLineBreakFormat'));
 }
 
 Format.prototype = {
@@ -3334,6 +3335,16 @@ Format.prototype = {
 		return appliedEl;
 	},
 
+	/**
+	 * @private
+	 * @this {FormatThis}
+	 * @description Reset the line break format.
+	 * @param {"line"|"br"} breakFormat options.get('defaultLineBreakFormat')
+	 */
+	__resetBrLineBreak(breakFormat) {
+		this._brLineBreak = breakFormat === 'br';
+	},
+
 	constructor: Format
 };
 

package/src/core/class/html.js

@@ -152,27 +152,7 @@ function HTML(editor) {
 	this._attributeBlacklist = tagsAttr;
 
 	// autoStyleify
-	if (options.get('autoStyleify').length > 0) {
-		const convertTextTags = options.get('convertTextTags');
-		const styleToTag = {};
-		options.get('autoStyleify').forEach((style) => {
-			switch (style) {
-				case 'bold':
-					styleToTag.bold = { regex: /font-weight\s*:\s*bold/i, tag: convertTextTags.bold };
-					break;
-				case 'italic':
-					styleToTag.italic = { regex: /font-style\s*:\s*italic/i, tag: convertTextTags.italic };
-					break;
-				case 'underline':
-					styleToTag.underline = { regex: /text-decoration\s*:\s*underline/i, tag: convertTextTags.underline };
-					break;
-				case 'strike':
-					styleToTag.strike = { regex: /text-decoration\s*:\s*line-through/i, tag: convertTextTags.strike };
-					break;
-			}
-		});
-		this._autoStyleify = styleToTag;
-	}
+	this.__resetAutoStyleify(options.get('autoStyleify'));
 }
 
 HTML.prototype = {
@@ -1059,11 +1039,29 @@ HTML.prototype = {
 
 			const fc = this.editor.frameContext;
 			const renderHTML = dom.utils.createElement('DIV', null, this._convertToCode(fc.get('wysiwyg'), true));
-			const editableEls = dom.query.getListChildren(renderHTML, (current) => current.hasAttribute('contenteditable'));
+
+			const isTableCell = dom.check.isTableCell;
+			const isEmptyLine = dom.check.isEmptyLine;
+			const editableEls = [];
+			const emptyCells = [];
+			dom.query.getListChildren(renderHTML, (current) => {
+				if (current.hasAttribute('contenteditable')) {
+					editableEls.push(current);
+				}
+
+				const parent = current.parentElement;
+				if (isTableCell(parent) && parent.children.length <= 1 && isEmptyLine(current)) {
+					emptyCells.push(parent);
+				}
+				return false;
+			});
 
 			for (let j = 0, jlen = editableEls.length; j < jlen; j++) {
 				editableEls[j].removeAttribute('contenteditable');
 			}
+			for (let j = 0, jlen = emptyCells.length; j < jlen; j++) {
+				emptyCells[j].innerHTML = '<br>';
+			}
 
 			const content = renderHTML.innerHTML;
 			if (this.editor.frameOptions.get('iframe_fullPage')) {
@@ -1212,10 +1210,7 @@ HTML.prototype = {
 	 * @returns {string} HTML string
 	 */
 	compress(html) {
-		return html
-			.replace(/\n/g, '')
-			.replace(/(>)(?:\s+)(<)/g, '$1$2')
-			.trim();
+		return html.replace(/>\s+</g, '> <').replace(/\n/g, '').trim();
 	},
 
 	/**
@@ -1582,6 +1577,10 @@ HTML.prototype = {
 				value += '<!-- ' + n.textContent + ' -->';
 			} else if (!/meta/i.test(n.nodeName) && !this.format.isLine(n) && !this.format.isBlock(n) && !this.component.is(n) && !dom.check.isExcludeFormat(n)) {
 				if (!f) f = dom.utils.createElement(this.options.get('defaultLine'));
+				if (this.format.isTextStyleNode(n)) {
+					/** @type {HTMLElement} */
+					(n).removeAttribute('style');
+				}
 				f.appendChild(n);
 				i--;
 				len--;
@@ -1811,6 +1810,39 @@ HTML.prototype = {
 		return oNode;
 	},
 
+	/**
+	 * @private
+	 * @this {HTMLThis}
+	 * @description Reset autoStyleify options.
+	 * @param {Array.<string>} autoStyleify Styles applied automatically on text input.
+	 * - ex ["bold", "underline", "italic", "strike"]
+	 */
+	__resetAutoStyleify(autoStyleify) {
+		if (autoStyleify.length > 0) {
+			const convertTextTags = this.options.get('convertTextTags');
+			const styleToTag = {};
+			autoStyleify.forEach((style) => {
+				switch (style) {
+					case 'bold':
+						styleToTag.bold = { regex: /font-weight\s*:\s*bold/i, tag: convertTextTags.bold };
+						break;
+					case 'italic':
+						styleToTag.italic = { regex: /font-style\s*:\s*italic/i, tag: convertTextTags.italic };
+						break;
+					case 'underline':
+						styleToTag.underline = { regex: /text-decoration\s*:\s*underline/i, tag: convertTextTags.underline };
+						break;
+					case 'strike':
+						styleToTag.strike = { regex: /text-decoration\s*:\s*line-through/i, tag: convertTextTags.strike };
+						break;
+				}
+			});
+			this._autoStyleify = styleToTag;
+		} else {
+			this._autoStyleify = null;
+		}
+	},
+
 	constructor: HTML
 };
 

package/src/core/class/selection.js

@@ -149,6 +149,7 @@ Selection_.prototype = {
 		try {
 			range.setStart(sc, so);
 			range.setEnd(ec, eo);
+			this.status.hasFocus = true;
 		} catch (error) {
 			console.warn('[SUNEDITOR.selection.focus.warn]', error.message);
 			this.editor._nativeFocus();
@@ -332,14 +333,6 @@ Selection_.prototype = {
 			eo = r.endOffset;
 		}
 
-		if (!r) {
-			r = this.getRange();
-			sc = r.startContainer;
-			so = r.startOffset;
-			ec = r.endContainer;
-			eo = r.endOffset;
-		}
-
 		return {
 			sc,
 			so,

package/src/core/class/toolbar.js

@@ -167,6 +167,7 @@ Toolbar.prototype = {
 		this.editor.commandTargets = new Map();
 		this.editor.shortcutsKeyMap = new Map();
 		this.editor.__saveCommandButtons(cmdButtons, newToolbar.buttonTray);
+		this.editor.__cachingShortcuts();
 
 		this.context.get(this.keyName + '.main').replaceChild(newToolbar.buttonTray, this.context.get(this.keyName + '.buttonTray'));
 		this.context.set(this.keyName + '.buttonTray', newToolbar.buttonTray);
@@ -305,7 +306,7 @@ Toolbar.prototype = {
 	 * @param {?Range=} rangeObj - Selection range
 	 */
 	_showBalloon(rangeObj) {
-		if (!this._isBalloon || this.editor.opendControllers.length > 0) {
+		if (!this._isBalloon) {
 			return;
 		}
 		if (this.isSub) this.resetResponsiveToolbar();

package/src/core/class/ui.js

@@ -48,7 +48,7 @@ function UI(editor) {
 UI.prototype = {
 	/**
 	 * @this {UIThis}
-	 * @description Set "options.get('editorStyle')" style.
+	 * @description set editor frame styles.
 	 * - Define the style of the edit area
 	 * - It can also be defined with the "setOptions" method, but the "setEditorStyle" method does not render the editor again.
 	 * @param {string} style Style string
@@ -56,7 +56,9 @@ UI.prototype = {
 	 */
 	setEditorStyle(style, fc) {
 		fc = fc || this.editor.frameContext;
+
 		const fo = fc.get('options');
+		fo.set('editorStyle', style);
 
 		const newStyles = converter._setDefaultOptionStyle(fo, style);
 		fo.set('_defaultStyles', newStyles);