suneditor 2.43.3 → 2.43.6

package/src/lib/core.js

@@ -459,13 +459,6 @@ export default function (context, pluginCallButtons, plugins, lang, options, _re
             DEL: ['text-decoration']
         },
 
-        /**
-         * @description Contains pairs of all "data-commands" and "elements" setted in toolbar over time
-         * Used primarily to save and recover button states after the toolbar re-creation
-         * Updates each "_cachingButtons()" invocation  
-         */
-        allCommandButtons: null,
-
         /**
          * @description Style button related to edit area
          * @property {Element} fullScreen fullScreen button element
@@ -475,19 +468,6 @@ export default function (context, pluginCallButtons, plugins, lang, options, _re
          */
         _styleCommandMap: null,
 
-        /**
-         * @description Map of default command
-         * @private
-         */
-        _defaultCommand: {
-            bold: options.textTags.bold,
-            underline: options.textTags.underline,
-            italic: options.textTags.italic,
-            strike: options.textTags.strike,
-            subscript: options.textTags.sub,
-            superscript: options.textTags.sup
-        },
-
         /**
          * @description Variables used internally in editor operation
          * @property {Boolean} isCodeView State of code view
@@ -525,8 +505,9 @@ export default function (context, pluginCallButtons, plugins, lang, options, _re
 
         /**
          * @description Save the current buttons states to "allCommandButtons" object
+         * @private
          */
-        saveButtonStates: function () {
+         _saveButtonStates: function () {
             if (!this.allCommandButtons) this.allCommandButtons = {};
 
             const currentButtons = this.context.element._buttonTray.querySelectorAll('.se-menu-list button[data-display]');
@@ -540,8 +521,9 @@ export default function (context, pluginCallButtons, plugins, lang, options, _re
 
         /**
          * @description Recover the current buttons states from "allCommandButtons" object
+         * @private
          */
-        recoverButtonStates: function () {
+        _recoverButtonStates: function () {
             if (this.allCommandButtons) {
                 const currentButtons = this.context.element._buttonTray.querySelectorAll('.se-menu-list button[data-display]'); 
                 for (let i = 0, button, command, oldButton; i < currentButtons.length; i++) {
@@ -1692,152 +1674,261 @@ export default function (context, pluginCallButtons, plugins, lang, options, _re
                 return null;
             }
 
-            const freeFormat = util.getFreeFormatElement(this.getSelectionNode(), null);
+            let range = this.getRange();
+            let line = util.isListCell(range.commonAncestorContainer) ? range.commonAncestorContainer : util.getFormatElement(this.getSelectionNode(), null);
+            let insertListCell = util.isListCell(line) && (util.isListCell(oNode) || util.isList(oNode));
+            
+            let parentNode, originAfter, tempAfterNode, tempParentNode = null;
+            const freeFormat = util.isFreeFormatElement(line);
             const isFormats = (!freeFormat && (util.isFormatElement(oNode) || util.isRangeFormatElement(oNode))) || util.isComponent(oNode);
 
+            if (insertListCell) {
+                tempAfterNode = afterNode || util.isList(oNode) ? line.lastChild : line.nextElementSibling;
+                tempParentNode = util.isList(oNode) ? line : (tempAfterNode || line).parentNode;
+            }
+
             if (!afterNode && (isFormats || util.isComponent(oNode) || util.isMedia(oNode))) {
+                const isEdge = this.isEdgePoint(range.endContainer, range.endOffset, 'end');
                 const r = this.removeNode();
-                if (r.container.nodeType === 3 || util.isBreak(r.container)) {
-                    const depthFormat = util.getParentElement(r.container, function (current) { return this.isRangeFormatElement(current) || this.isListCell(current); }.bind(util));
-                    afterNode = util.splitElement(r.container, r.offset, !depthFormat ? 0 : util.getElementDepth(depthFormat) + 1);
-                    if (afterNode) afterNode = afterNode.previousSibling;
+                const container = r.container;
+                const prevContainer = r.prevContainer;
+
+                if (insertListCell && prevContainer) {
+                    tempParentNode = prevContainer.nodeType === 3 ? prevContainer.parentNode : prevContainer;
+                    if (tempParentNode.contains(container)) {
+                        let sameParent = true;
+                        tempAfterNode = container;
+                        while (tempAfterNode.parentNode && tempAfterNode.parentNode !== tempParentNode) {
+                            tempAfterNode = tempAfterNode.parentNode;
+                            sameParent = false;
+                        }
+                        if (sameParent && container === prevContainer) tempAfterNode = tempAfterNode.nextSibling;
+                    } else {
+                        tempAfterNode = null;
+                    }
+                } else if (insertListCell && util.isListCell(container) && !line.parentElement) {
+                    line = util.createElement('LI');
+                    tempParentNode.appendChild(line);
+                    container.appendChild(tempParentNode);
+                    tempAfterNode = null;
+                } else if (container.nodeType === 3 || util.isBreak(container) || insertListCell) {
+                    const depthFormat = util.getParentElement(container, function (current) { return this.isRangeFormatElement(current) || this.isListCell(current); }.bind(util));
+                    afterNode = util.splitElement(container, r.offset, !depthFormat ? 0 : util.getElementDepth(depthFormat) + 1);
+                    if (afterNode) {
+                        if (insertListCell) {
+                            if (line.contains(container)) {
+                                const subList = util.isList(line.lastElementChild);
+                                let newCell = null;
+                                if (!isEdge) {
+                                    newCell = line.cloneNode(false);
+                                    newCell.appendChild(afterNode.textContent.trim() ? afterNode : util.createTextNode(util.zeroWidthSpace));
+                                }
+                                if (subList) {
+                                    if (!newCell) {
+                                        newCell = line.cloneNode(false);
+                                        newCell.appendChild(util.createTextNode(util.zeroWidthSpace));
+                                    }
+                                    newCell.appendChild(line.lastElementChild);
+                                }
+                                if (newCell) {
+                                    tempParentNode.insertBefore(newCell, line.nextElementSibling);
+                                    tempAfterNode = afterNode = newCell;
+                                }
+                            }
+                        } else {
+                            afterNode = afterNode.previousSibling;
+                        }
+                    }
                 }
             }
 
-            const range = (!afterNode && !isFormats) ? this.getRange_addLine(this.getRange(), null) : this.getRange();
+            range = (!afterNode && !isFormats) ? this.getRange_addLine(this.getRange(), null) : this.getRange();
             const commonCon = range.commonAncestorContainer;
             const startOff = range.startOffset;
             const endOff = range.endOffset;
             const formatRange = range.startContainer === commonCon && util.isFormatElement(commonCon);
             const startCon = formatRange ? (commonCon.childNodes[startOff] || commonCon.childNodes[0] || range.startContainer) : range.startContainer;
             const endCon = formatRange ? (commonCon.childNodes[endOff] || commonCon.childNodes[commonCon.childNodes.length - 1] || range.endContainer) : range.endContainer;
-            let parentNode, originAfter = null;
-
-            if (!afterNode) {
-                parentNode = startCon;
-                if (startCon.nodeType === 3) {
-                    parentNode = startCon.parentNode;
-                }
 
-                /** No Select range node */
-                if (range.collapsed) {
-                    if (commonCon.nodeType === 3) {
-                        if (commonCon.textContent.length > endOff) afterNode = commonCon.splitText(endOff);
-                        else afterNode = commonCon.nextSibling;
-                    } else {
-                        if (!util.isBreak(parentNode)) {
-                            let c = parentNode.childNodes[startOff];
-                            const focusNode = (c && c.nodeType === 3 && util.onlyZeroWidthSpace(c) && util.isBreak(c.nextSibling)) ? c.nextSibling : c;
-                            if (focusNode) {
-                                if (!focusNode.nextSibling) {
-                                    parentNode.removeChild(focusNode);
-                                    afterNode = null;
+            if (!insertListCell) {
+                if (!afterNode) {
+                    parentNode = startCon;
+                    if (startCon.nodeType === 3) {
+                        parentNode = startCon.parentNode;
+                    }
+    
+                    /** No Select range node */
+                    if (range.collapsed) {
+                        if (commonCon.nodeType === 3) {
+                            if (commonCon.textContent.length > endOff) afterNode = commonCon.splitText(endOff);
+                            else afterNode = commonCon.nextSibling;
+                        } else {
+                            if (!util.isBreak(parentNode)) {
+                                let c = parentNode.childNodes[startOff];
+                                const focusNode = (c && c.nodeType === 3 && util.onlyZeroWidthSpace(c) && util.isBreak(c.nextSibling)) ? c.nextSibling : c;
+                                if (focusNode) {
+                                    if (!focusNode.nextSibling) {
+                                        parentNode.removeChild(focusNode);
+                                        afterNode = null;
+                                    } else {
+                                        afterNode = (util.isBreak(focusNode) && !util.isBreak(oNode)) ? focusNode : focusNode.nextSibling;
+                                    }
                                 } else {
-                                    afterNode = (util.isBreak(focusNode) && !util.isBreak(oNode)) ? focusNode : focusNode.nextSibling;
+                                    afterNode = null;
                                 }
                             } else {
-                                afterNode = null;
+                                afterNode = parentNode;
+                                parentNode = parentNode.parentNode;
                             }
-                        } else {
-                            afterNode = parentNode;
-                            parentNode = parentNode.parentNode;
                         }
-                    }
-                } else { /** Select range nodes */
-                    const isSameContainer = startCon === endCon;
-
-                    if (isSameContainer) {
-                        if (this.isEdgePoint(endCon, endOff)) afterNode = endCon.nextSibling;
-                        else afterNode = endCon.splitText(endOff);
-
-                        let removeNode = startCon;
-                        if (!this.isEdgePoint(startCon, startOff)) removeNode = startCon.splitText(startOff);
-
-                        parentNode.removeChild(removeNode);
-                        if (parentNode.childNodes.length === 0 && isFormats) {
-                            parentNode.innerHTML = '<br>';
-                        }
-                    }
-                    else {
-                        const removedTag = this.removeNode();
-                        const container = removedTag.container;
-                        const prevContainer = removedTag.prevContainer;
-                        if (container && container.childNodes.length === 0 && isFormats) {
-                            if (util.isFormatElement(container)) {
-                                container.innerHTML = '<br>';
-                            } else if (util.isRangeFormatElement(container)) {
-                                container.innerHTML = '<' + options.defaultTag + '><br></' + options.defaultTag + '>';
+                    } else { /** Select range nodes */
+                        const isSameContainer = startCon === endCon;
+    
+                        if (isSameContainer) {
+                            if (this.isEdgePoint(endCon, endOff)) afterNode = endCon.nextSibling;
+                            else afterNode = endCon.splitText(endOff);
+    
+                            let removeNode = startCon;
+                            if (!this.isEdgePoint(startCon, startOff)) removeNode = startCon.splitText(startOff);
+    
+                            parentNode.removeChild(removeNode);
+                            if (parentNode.childNodes.length === 0 && isFormats) {
+                                parentNode.innerHTML = '<br>';
                             }
                         }
-
-                        if (!isFormats && prevContainer) {
-                            parentNode = prevContainer.nodeType === 3 ? prevContainer.parentNode : prevContainer;
-                            if (parentNode.contains(container)) {
-                                let sameParent = true;
-                                afterNode = container;
-                                while (afterNode.parentNode !== parentNode) {
-                                    afterNode = afterNode.parentNode;
-                                    sameParent = false;
+                        else {
+                            const removedTag = this.removeNode();
+                            const container = removedTag.container;
+                            const prevContainer = removedTag.prevContainer;
+
+                            if (container && container.childNodes.length === 0 && isFormats) {
+                                if (util.isFormatElement(container)) {
+                                    container.innerHTML = '<br>';
+                                } else if (util.isRangeFormatElement(container)) {
+                                    container.innerHTML = '<' + options.defaultTag + '><br></' + options.defaultTag + '>';
                                 }
-                                if (sameParent && container === prevContainer) afterNode = afterNode.nextSibling;
-                            } else {
+                            }
+    
+                            if (util.isListCell(container) && oNode.nodeType === 3) {
+                                parentNode = container;
                                 afterNode = null;
+                            } else if (!isFormats && prevContainer) {
+                                parentNode = prevContainer.nodeType === 3 ? prevContainer.parentNode : prevContainer;
+                                if (parentNode.contains(container)) {
+                                    let sameParent = true;
+                                    afterNode = container;
+                                    while (afterNode.parentNode && afterNode.parentNode !== parentNode) {
+                                        afterNode = afterNode.parentNode;
+                                        sameParent = false;
+                                    }
+                                    if (sameParent && container === prevContainer) afterNode = afterNode.nextSibling;
+                                } else {
+                                    afterNode = null;
+                                }
+                            } else {
+                                afterNode = isFormats ? endCon : container === prevContainer ? container.nextSibling : container;
+                                parentNode = (!afterNode || !afterNode.parentNode) ? commonCon : afterNode.parentNode;
+                            }
+    
+                            while (afterNode && !util.isFormatElement(afterNode) && afterNode.parentNode !== commonCon) {
+                                afterNode = afterNode.parentNode;
                             }
-                        } else {
-                            afterNode = isFormats ? endCon : container === prevContainer ? container.nextSibling : container;
-                            parentNode = (!afterNode || !afterNode.parentNode) ? commonCon : afterNode.parentNode;
-                        }
-
-                        while (afterNode && !util.isFormatElement(afterNode) && afterNode.parentNode !== commonCon) {
-                            afterNode = afterNode.parentNode;
                         }
                     }
+                } else { // has afterNode
+                    parentNode = afterNode.parentNode;
+                    afterNode = afterNode.nextSibling;
+                    originAfter = true;
                 }
             }
-            // has afterNode
-            else {
-                parentNode = afterNode.parentNode;
-                afterNode = afterNode.nextSibling;
-                originAfter = true;
-            }
 
-            // --- insert node ---
             try {
-                if (util.isWysiwygDiv(afterNode) || parentNode === context.element.wysiwyg.parentNode) {
-                    parentNode = context.element.wysiwyg;
-                    afterNode = null;
+                // set node
+                if (!insertListCell) {
+                    if (util.isWysiwygDiv(afterNode) || parentNode === context.element.wysiwyg.parentNode) {
+                        parentNode = context.element.wysiwyg;
+                        afterNode = null;
+                    }
+    
+                    if (util.isFormatElement(oNode) || util.isRangeFormatElement(oNode) || (!util.isListCell(parentNode) && util.isComponent(oNode))) {
+                        const oldParent = parentNode;
+                        if (util.isList(afterNode)) {
+                            parentNode = afterNode;
+                            afterNode = null;
+                        } else if (util.isListCell(afterNode)) {
+                            parentNode = afterNode.previousElementSibling || afterNode;
+                        } else if (!originAfter && !afterNode) {
+                            const r = this.removeNode();
+                            const container = r.container.nodeType === 3 ? (util.isListCell(util.getFormatElement(r.container, null)) ? r.container : (util.getFormatElement(r.container, null) || r.container.parentNode)) : r.container;
+                            const rangeCon = util.isWysiwygDiv(container) || util.isRangeFormatElement(container);
+                            parentNode = rangeCon ? container : container.parentNode;
+                            afterNode = rangeCon ? null : container.nextSibling;
+                        }
+    
+                        if (oldParent.childNodes.length === 0 && parentNode !== oldParent) util.removeItem(oldParent);
+                    }
+    
+                    if (isFormats && !freeFormat && !util.isRangeFormatElement(parentNode) && !util.isListCell(parentNode) && !util.isWysiwygDiv(parentNode)) {
+                        afterNode = parentNode.nextElementSibling;
+                        parentNode = parentNode.parentNode;
+                    }
+    
+                    if (util.isWysiwygDiv(parentNode) && (oNode.nodeType === 3 || util.isBreak(oNode))) {
+                        const fNode = util.createElement(options.defaultTag);
+                        fNode.appendChild(oNode);
+                        oNode = fNode;
+                    }
                 }
 
-                if (util.isFormatElement(oNode) || util.isRangeFormatElement(oNode) || (!util.isListCell(parentNode) && util.isComponent(oNode))) {
-                    const oldParent = parentNode;
-                    if (util.isList(afterNode)) {
-                        parentNode = afterNode;
+                // insert--
+                if (insertListCell) {
+                    if (!tempParentNode.parentNode) {
+                        parentNode = context.element.wysiwyg;
                         afterNode = null;
-                    } else if (util.isListCell(afterNode)) {
-                        parentNode = afterNode.previousElementSibling || afterNode;
-                    } else if (!originAfter && !afterNode) {
-                        const r = this.removeNode();
-                        const container = r.container.nodeType === 3 ? (util.isListCell(util.getFormatElement(r.container, null)) ? r.container : (util.getFormatElement(r.container, null) || r.container.parentNode)) : r.container;
-                        const rangeCon = util.isWysiwygDiv(container) || util.isRangeFormatElement(container);
-                        parentNode = rangeCon ? container : container.parentNode;
-                        afterNode = rangeCon ? null : container.nextSibling;
+                    } else {
+                        parentNode = tempParentNode;
+                        afterNode = tempAfterNode;
                     }
-
-                    if (oldParent.childNodes.length === 0 && parentNode !== oldParent) util.removeItem(oldParent);
+                } else {
+                    afterNode = parentNode === afterNode ? parentNode.lastChild : afterNode;
                 }
 
-                if (isFormats && !freeFormat && !util.isRangeFormatElement(parentNode) && !util.isListCell(parentNode) && !util.isWysiwygDiv(parentNode)) {
-                    afterNode = parentNode.nextElementSibling;
-                    parentNode = parentNode.parentNode;
+                if (util.isListCell(oNode) && !util.isList(parentNode)) {
+                    if (util.isListCell(parentNode)) {
+                        afterNode = parentNode.nextElementSibling;
+                        parentNode = parentNode.parentNode;
+                    } else {
+                        const ul = util.createElement('ol');
+                        parentNode.insertBefore(ul, afterNode);
+                        parentNode = ul;
+                        afterNode = null;
+                    }
+                    insertListCell = true;
                 }
 
-                if (util.isWysiwygDiv(parentNode) && (oNode.nodeType === 3 || util.isBreak(oNode))) {
-                    const fNode = util.createElement(options.defaultTag);
-                    fNode.appendChild(oNode);
-                    oNode = fNode;
-                }
+                parentNode.insertBefore(oNode, afterNode);
+
+                if (insertListCell) {
+                    if (util.onlyZeroWidthSpace(line.textContent.trim())) {
+                        util.removeItem(line);
+                        oNode = oNode.lastChild;
+                    } else {
+                        const chList = util.getArrayItem(line.children, util.isList);
+                        if (chList) {
+                            if (oNode !== chList) {
+                                oNode.appendChild(chList);
+                                oNode = chList.previousSibling;
+                            } else {
+                                parentNode.appendChild(oNode);
+                                oNode = parentNode;
+                            }
 
-                parentNode.insertBefore(oNode, parentNode === afterNode ? parentNode.lastChild : afterNode);
+                            if (util.onlyZeroWidthSpace(line.textContent.trim())) {
+                                util.removeItem(line);
+                            }
+                        }
+                    }
+                }
             } catch (e) {
                 parentNode.appendChild(oNode);
             } finally {
@@ -2006,28 +2097,11 @@ export default function (context, pluginCallButtons, plugins, lang, options, _re
                 startIndex = endIndex = 0;
             }
 
-            function remove (item) {
-                const format = util.getFormatElement(item, null);
-                util.removeItem(item);
-
-                if(util.isListCell(format)) {
-                    const list = util.getArrayItem(format.children, util.isList, false);
-                    if (list) {
-                        const child = list.firstElementChild;
-                        const children = child.childNodes;
-                        while (children[0]) {
-                            format.insertBefore(children[0], list);
-                        }
-                        util.removeItemAllParents(child, null, null);
-                    }
-                }
-            }
-
             for (let i = startIndex; i <= endIndex; i++) {
                 const item = childNodes[i];
 
                 if (item.length === 0 || (item.nodeType === 3 && item.data === undefined)) {
-                    remove(item);
+                    this._nodeRemoveListItem(item);
                     continue;
                 }
 
@@ -2047,7 +2121,7 @@ export default function (context, pluginCallButtons, plugins, lang, options, _re
                     if (beforeNode.length > 0) {
                         startCon.data = beforeNode.data;
                     } else {
-                        remove(startCon);
+                        this._nodeRemoveListItem(startCon);
                     }
 
                     if (item === endCon) break;
@@ -2065,24 +2139,26 @@ export default function (context, pluginCallButtons, plugins, lang, options, _re
                     if (afterNode.length > 0) {
                         endCon.data = afterNode.data;
                     } else {
-                        remove(endCon);
+                        this._nodeRemoveListItem(endCon);
                     }
 
                     continue;
                 }
 
-                remove(item);
+                this._nodeRemoveListItem(item);
             }
 
-            container = endCon && endCon.parentNode ? endCon : startCon && startCon.parentNode ? startCon : (range.endContainer || range.startContainer);
+            const endUl = util.getParentElement(endCon, 'ul');
+            const startLi = util.getParentElement(startCon, 'li');
+            if (endUl && startLi && startLi.contains(endUl)) {
+                container = endUl.previousSibling;
+                offset = container.textContent.length;
+            } else {
+                container = endCon && endCon.parentNode ? endCon : startCon && startCon.parentNode ? startCon : (range.endContainer || range.startContainer);
+            }
             
             if (!util.isWysiwygDiv(container) && container.childNodes.length === 0) {
-                const rc = util.removeItemAllParents(container, function (current) {
-                    if (this.isComponent(current)) return false;
-                    const text = current.textContent;
-                    return text.length === 0 || /^(\n|\u200B)+$/.test(text);
-                }.bind(util), null);
-                
+                const rc = util.removeItemAllParents(container, null, null);
                 if (rc) container = rc.sc || rc.ec || context.element.wysiwyg;
             }
 
@@ -2098,6 +2174,19 @@ export default function (context, pluginCallButtons, plugins, lang, options, _re
             };
         },
 
+        _nodeRemoveListItem: function (item) {
+            const format = util.getFormatElement(item, null);
+            util.removeItem(item);
+
+            if(!util.isListCell(format)) return;
+            
+            util.removeItemAllParents(format, null, null);
+
+            if (format && util.isList(format.firstChild)) {
+                format.insertBefore(util.createTextNode(util.zeroWidthSpace), format.firstChild);
+            }
+        },
+
         /**
          * @description Appended all selected format Element to the argument element and insert
          * @param {Element} rangeElement Element of wrap the arguments (BLOCKQUOTE...)
@@ -2810,20 +2899,26 @@ export default function (context, pluginCallButtons, plugins, lang, options, _re
 
             // one line
             if (oneLine) {
-                this._resetCommonListCell(lineNodes[0], styleArray);
+                if (this._resetCommonListCell(lineNodes[0], styleArray)) range = this.setRange(startCon, startOff, endCon, endOff);
+
                 const newRange = this._nodeChange_oneLine(lineNodes[0], newNode, validation, startCon, startOff, endCon, endOff, isRemoveFormat, isRemoveNode, range.collapsed, _removeCheck, _getMaintainedNode, _isMaintainedNode);
                 start.container = newRange.startContainer;
                 start.offset = newRange.startOffset;
                 end.container = newRange.endContainer;
                 end.offset = newRange.endOffset;
+                
                 if (start.container === end.container && util.onlyZeroWidthSpace(start.container)) {
                     start.offset = end.offset = 1;
                 }
                 this._setCommonListStyle(newRange.ancestor, null);
             } else { // multi line 
+                let appliedCommonList = false;
+                if (endLength > 0 && this._resetCommonListCell(lineNodes[endLength], styleArray)) appliedCommonList = true;
+                if (this._resetCommonListCell(lineNodes[0], styleArray)) appliedCommonList = true;
+                if (appliedCommonList) this.setRange(startCon, startOff, endCon, endOff);
+
                 // end
                 if (endLength > 0) {
-                    this._resetCommonListCell(lineNodes[endLength], styleArray);
                     newNode = appendNode.cloneNode(false);
                     end = this._nodeChange_endLine(lineNodes[endLength], newNode, validation, endCon, endOff, isRemoveFormat, isRemoveNode, _removeCheck, _getMaintainedNode, _isMaintainedNode);
                 }
@@ -2841,7 +2936,6 @@ export default function (context, pluginCallButtons, plugins, lang, options, _re
                 }
 
                 // start
-                this._resetCommonListCell(lineNodes[0], styleArray);
                 newNode = appendNode.cloneNode(false);
                 start = this._nodeChange_startLine(lineNodes[0], newNode, validation, startCon, startOff, isRemoveFormat, isRemoveNode, _removeCheck, _getMaintainedNode, _isMaintainedNode, end.container);
 
@@ -2901,9 +2995,11 @@ export default function (context, pluginCallButtons, plugins, lang, options, _re
             }
 
             let sel = refer.cloneNode(false);
-            let r = null;
+            let r = null, appliedEl = false;
             for (let i = 0, len = children.length, c, s; i < len; i++) {
                 c = children[i];
+                if (options._textTagsMap[c.nodeName.toLowerCase()]) continue;
+
                 s = util.getValues(c.style);
                 if (s.length === 0 || (ec.some(function (k) {return s.indexOf(k) === -1;}) && s.some(function(k) {ec.indexOf(k) > -1;}))) {
                     r = c.nextSibling;
@@ -2912,11 +3008,19 @@ export default function (context, pluginCallButtons, plugins, lang, options, _re
                     el.insertBefore(sel, r);
                     sel = refer.cloneNode(false);
                     r = null;
+                    appliedEl = true;
                 }
             }
             
-            if (sel.childNodes.length > 0) el.insertBefore(sel, r);
-            if (!elStyles.length) el.removeAttribute('style');
+            if (sel.childNodes.length > 0) {
+                el.insertBefore(sel, r);
+                appliedEl = true;
+            }
+            if (!elStyles.length) {
+                el.removeAttribute('style');
+            }
+
+            return appliedEl;
         },
 
         /**
@@ -2934,40 +3038,39 @@ export default function (context, pluginCallButtons, plugins, lang, options, _re
             if (!child || children.length > 1 || child.nodeType !== 1) return;
             
             // set cell style---
-            const commonStyleElements = [];
             const childStyle = child.style;
             const elStyle = el.style;
+            const nodeName = child.nodeName.toLowerCase();
+            let appliedEl = false;
 
             // bold, italic
-            if (options._textTagsMap[child.nodeName.toLowerCase()] === this._defaultCommand.bold.toLowerCase()) elStyle.fontWeight = 'bold'; // bold
-            else if (childStyle.fontWeight) elStyle.fontWeight = childStyle.fontWeight;
-            if (options._textTagsMap[child.nodeName.toLowerCase()] === this._defaultCommand.italic.toLowerCase()) elStyle.fontStyle = 'italic'; // italic
-            else if (childStyle.fontStyle) elStyle.fontStyle = childStyle.fontStyle;
+            if (options._textTagsMap[nodeName] === options._defaultCommand.bold.toLowerCase()) elStyle.fontWeight = 'bold';
+            if (options._textTagsMap[nodeName] === options._defaultCommand.italic.toLowerCase()) elStyle.fontStyle = 'italic';
 
             // styles
             const cKeys = util.getValues(childStyle);
-            for (let i = 0, len = this._listCamel.length; i < len; i++) {
-                if (cKeys.indexOf(this._listKebab[i]) > -1) {
-                    elStyle[this._listCamel[i]] = childStyle[this._listCamel[i]];
-                    childStyle.removeProperty(this._listKebab[i]);
+            if (cKeys.length > 0) {
+                for (let i = 0, len = this._listCamel.length; i < len; i++) {
+                    if (cKeys.indexOf(this._listKebab[i]) > -1) {
+                        elStyle[this._listCamel[i]] = childStyle[this._listCamel[i]];
+                        childStyle.removeProperty(this._listKebab[i]);
+                        appliedEl = true;
+                    }
                 }
             }
-            
-            // remove child
-            if (!childStyle.length) commonStyleElements.push(child);
 
             this._setCommonListStyle(el, child);
+            if (!appliedEl) return;
 
             // common style
-            for (let i = 0, len = commonStyleElements.length, n, ch, p; i < len; i++) {
-                n = commonStyleElements[i];
-                ch = n.childNodes;
-                p = n.parentNode;
-                n = n.nextSibling;
+            if (!childStyle.length) {
+                const ch = child.childNodes;
+                const p = child.parentNode;
+                const n = child.nextSibling;
                 while (ch.length > 0) {
                     p.insertBefore(ch[0], n);
                 }
-                util.removeItem(commonStyleElements[i]);
+                util.removeItem(child);
             }
         },
 
@@ -4284,7 +4387,7 @@ export default function (context, pluginCallButtons, plugins, lang, options, _re
                         wysiwyg.appendChild(format);
                         last = br;
                     }
-                    this.setRange(first, 0, last, last.textContent.length);
+                    event._showToolbarBalloon(this.setRange(first, 0, last, last.textContent.length));
                     break;
                 case 'codeView':
                     this.toggleCodeView();
@@ -4337,7 +4440,7 @@ export default function (context, pluginCallButtons, plugins, lang, options, _re
                     if (context.tool.save) context.tool.save.setAttribute('disabled', true);
                     break;
                 default : // 'STRONG', 'U', 'EM', 'DEL', 'SUB', 'SUP'..
-                    command = this._defaultCommand[command.toLowerCase()] || command;
+                    command = options._defaultCommand[command.toLowerCase()] || command;
                     if (!this.commandMap[command]) this.commandMap[command] = target;
 
                     const nodesMap = this._variable.currentNodesMap;
@@ -5152,7 +5255,7 @@ export default function (context, pluginCallButtons, plugins, lang, options, _re
             for (let i = 0, t; i < domTree.length; i++) {
                 t = domTree[i];
 
-                if (!util.isFormatElement(t) && !util.isComponent(t) && !util.isMedia(t)) {
+                if (!util.isFormatElement(t) && !util.isRangeFormatElement(t) && !util.isComponent(t) && !util.isMedia(t)) {
                     if (!p) p = util.createElement(options.defaultTag);
                     p.appendChild(t);
                     i--;
@@ -5626,12 +5729,10 @@ export default function (context, pluginCallButtons, plugins, lang, options, _re
             this.codeViewDisabledButtons = context.element._buttonTray.querySelectorAll('.se-menu-list button[data-display]:not([class~="se-code-view-enabled"]):not([data-display="MORE"])');
             this.resizingDisabledButtons = context.element._buttonTray.querySelectorAll('.se-menu-list button[data-display]:not([class~="se-resizing-enabled"]):not([data-display="MORE"])');
 
-            this.saveButtonStates();
+            this._saveButtonStates();
 
             const tool = context.tool;
             this.commandMap = {
-                SUB: tool.subscript,
-                SUP: tool.superscript,
                 OUTDENT: tool.outdent,
                 INDENT: tool.indent
             };
@@ -5639,6 +5740,8 @@ export default function (context, pluginCallButtons, plugins, lang, options, _re
             this.commandMap[options.textTags.underline.toUpperCase()] = tool.underline;
             this.commandMap[options.textTags.italic.toUpperCase()] = tool.italic;
             this.commandMap[options.textTags.strike.toUpperCase()] = tool.strike;
+            this.commandMap[options.textTags.sub.toUpperCase()] = tool.subscript;
+            this.commandMap[options.textTags.sup.toUpperCase()] = tool.superscript;
             
             this._styleCommandMap = {
                 fullScreen: tool.fullScreen,
@@ -5965,7 +6068,7 @@ export default function (context, pluginCallButtons, plugins, lang, options, _re
                     break;
             }
 
-            if (!command) return keyStr === 'B'; // chromium - bold disabled
+            if (!command) return !!keyStr;
 
             core.commandHandler(core.commandMap[command], command);
             return true;
@@ -5978,7 +6081,7 @@ export default function (context, pluginCallButtons, plugins, lang, options, _re
 
             const marginDir = options.rtl ? 'marginRight' : 'marginLeft';
             const commandMap = core.commandMap;
-            const classOnCheck = this._onButtonsCheck;
+            const classOnCheck = event._onButtonsCheck;
             const commandMapNodes = [];
             const currentNodes = [];
 
@@ -7233,6 +7336,7 @@ export default function (context, pluginCallButtons, plugins, lang, options, _re
         onBlur_wysiwyg: function (e) {
             if (core._antiBlur || core._variable.isCodeView) return;
             core.hasFocus = false;
+            core.effectNode = null;
             core.controllersOff();
             if (core._isInline || core._isBalloon) event._hideToolbar();
 
@@ -7589,23 +7693,23 @@ export default function (context, pluginCallButtons, plugins, lang, options, _re
             if (cleanData) {
                 if (util.isListCell(util.getFormatElement(core.getSelectionNode(), null))) {
                     const dom = (_d.createRange().createContextualFragment(cleanData));
-                    if (dom.childNodes[0].nodeType === 1) {
-                        cleanData = event._convertListCell(dom);
-                    }
+                    const domTree = dom.childNodes;
+                    if (domTree.length > 1 && domTree[0].nodeType === 1) cleanData = event._convertListCell(domTree);
                 }
                 functions.insertHTML(cleanData, true, false);
                 return false;
             }
         },
 
-        _convertListCell: function (dom) {
-            const domTree = dom.childNodes;
+        _convertListCell: function (domTree) {
             let html = '';
 
             for (let i = 0, len = domTree.length, node; i < len; i++) {
                 node = domTree[i];
                 if (node.nodeType === 1) {
-                    if (util.isFormatElement(node)) {
+                    if (util.isListCell(node) || util.isList(node)) {
+                        html += node.outerHTML;
+                    } else if (util.isFormatElement(node)) {
                         html += '<li>' +(node.innerHTML.trim() || '<br>') + '</li>';
                     } else if (util.isRangeFormatElement(node) && !util.isTable(node)) {
                         html += event._convertListCell(node);
@@ -8117,11 +8221,11 @@ export default function (context, pluginCallButtons, plugins, lang, options, _re
             context.tool = newContext.tool;
             if (options.iframe) context.element.wysiwyg = core._wd.body;
 
-            core.recoverButtonStates();
-
+            core._recoverButtonStates();
             core._cachingButtons();
             core.history._resetCachingButton();
 
+            core.effectNode = null;
             if (core.hasFocus) event._applyTagEffects();
             if (core.isReadOnly) util.setDisabledButtons(true, core.resizingDisabledButtons);
             if (typeof functions.onSetToolbarButtons === 'function') functions.onSetToolbarButtons(newToolbar._buttonTray.querySelectorAll('button'), core);