suneditor 2.43.4 → 2.43.7

package/src/lib/core.js

@@ -41,6 +41,7 @@ export default function (context, pluginCallButtons, plugins, lang, options, _re
         _parser: new _w.DOMParser(),
         _prevRtl: options.rtl,
         _editorHeight: 0,
+        _editorHeightPadding: 0,
         _listCamel: options.__listCommonStyle,
         _listKebab: util.camelToKebabCase(options.__listCommonStyle),
 
@@ -459,13 +460,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 +469,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 +506,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 +522,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++) {
@@ -1518,7 +1501,7 @@ export default function (context, pluginCallButtons, plugins, lang, options, _re
 
             const currentFormatEl = util.getFormatElement(this.getSelectionNode(), null);
             let oFormat = null;
-            if (util.isFreeFormatElement(currentFormatEl || element.parentNode)) {
+            if (!util.isFormatElement(element) && util.isFreeFormatElement(currentFormatEl || element.parentNode)) {
                 oFormat = util.createElement('BR');
             } else {
                 const oFormatName = formatNode ? (typeof formatNode === 'string' ? formatNode : formatNode.nodeName) : (util.isFormatElement(currentFormatEl) && !util.isRangeFormatElement(currentFormatEl) && !util.isFreeFormatElement(currentFormatEl)) ? currentFormatEl.nodeName : options.defaultTag;
@@ -1692,152 +1675,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 = (container === r.prevContainer && range.collapsed) ? null : 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) {
+                                    line.parentNode.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);
 
-                parentNode.insertBefore(oNode, parentNode === afterNode ? parentNode.lastChild : 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;
+                            }
+
+                            if (util.onlyZeroWidthSpace(line.textContent.trim())) {
+                                util.removeItem(line);
+                            }
+                        }
+                    }
+                }
             } catch (e) {
                 parentNode.appendChild(oNode);
             } finally {
@@ -2006,28 +2098,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 +2122,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 +2140,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 +2175,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 +2900,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 +2937,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 +2996,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 +3009,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 +3039,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);
             }
         },
 
@@ -4337,7 +4441,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;
@@ -4928,10 +5032,16 @@ export default function (context, pluginCallButtons, plugins, lang, options, _re
             // element
             if (node.nodeType === 1) {
                 if (util._disallowedTags(node)) return '';
+
+                const ch = util.getListChildNodes(node, function(current) { return util.isSpanWithoutAttr(current); }) || [];
+                for (let i = ch.length - 1; i >= 0; i--) {
+                    ch[i].outerHTML = ch[i].innerHTML;
+                }
+
                 if (!requireFormat || (util.isFormatElement(node) || util.isRangeFormatElement(node) || util.isComponent(node) || util.isMedia(node) || (util.isAnchor(node) && util.isMedia(node.firstElementChild)))) {
-                    return node.outerHTML;
+                    return util.isSpanWithoutAttr(node) ? node.innerHTML : node.outerHTML;
                 } else {
-                    return '<' + defaultTag + '>' + node.outerHTML + '</' + defaultTag + '>';
+                    return '<' + defaultTag + '>' + (util.isSpanWithoutAttr(node) ? node.innerHTML : node.outerHTML) + '</' + defaultTag + '>';
                 }
             }
             // text
@@ -5021,7 +5131,37 @@ export default function (context, pluginCallButtons, plugins, lang, options, _re
                 const sv = m.match(/style\s*=\s*(?:"|')[^"']*(?:"|')/);
                 if (sv) {
                     if (!v) v = [];
-                    v.push(sv[0]);
+                    const style = sv[0].replace(/&quot;/g, '').match(/\s*(font-family|font-size|color|background-color)\s*:[^;]+(?!;)*/ig);
+                    if (style) {
+                        const allowedStyle = [];
+                        for (let i = 0, len = style.length, r; i < len; i++) {
+                            r = style[i].match(/(.+)(:)([^:]+$)/);
+                            if (r && !/inherit|initial/i.test(r[3])) {
+                                const k = util.kebabToCamelCase(r[1].trim());
+                                const v = this.wwComputedStyle[k].replace(/"/g, '');
+                                const c = r[3].trim();
+                                switch (k) {
+                                    case 'fontFamily':
+                                        if (options.plugins.font ? options.font.indexOf(c) === -1 : true) continue;
+                                        break;
+                                    case 'fontSize':
+                                        if (!options.plugins.fontSize) continue;
+                                        break;
+                                    case 'color':
+                                        if (!options.plugins.fontColor) continue;
+                                        break;
+                                    case 'backgroundColor':
+                                        if (!options.plugins.hiliteColor) continue;
+                                        break;
+                                }
+                                
+                                if (v !== c) {
+                                    allowedStyle.push(r[0]);
+                                }
+                            }
+                        }
+                        if (allowedStyle.length > 0) v.push('style="' + allowedStyle.join(';') + '"');
+                    }
                 }
             }
 
@@ -5050,14 +5190,82 @@ export default function (context, pluginCallButtons, plugins, lang, options, _re
 
             if (v) {
                 for (let i = 0, len = v.length; i < len; i++) {
-                    if (lowLevelCheck && /^class="(?!(__se__|se-|katex))/.test(v[i])) continue;
-                    t += ' ' + (/^(?:href|src)\s*=\s*('|"|\s)*javascript\s*\:/i.test(v[i]) ? '' : v[i]);
+                    if (lowLevelCheck && /^class="(?!(__se__|se-|katex))/.test(v[i].trim())) continue;
+                    t += ' ' + (/^(?:href|src)\s*=\s*('|"|\s)*javascript\s*\:/i.test(v[i].trim()) ? '' : v[i]);
                 }
             }
 
             return t;
         },
 
+        /**
+         * @description Determines if formatting is required and returns a domTree
+         * @param {Element} dom documentFragment
+         * @returns {Element}
+         * @private
+         */
+        _editFormat: function (dom) {
+            let value = '', f;
+            const tempTree = dom.childNodes;
+            for (let i = 0, len = tempTree.length, n; i < len; i++) {
+                n = tempTree[i];
+                if (!util.isFormatElement(n) && !util.isRangeFormatElement(n) && !util.isComponent(n) && !/meta/i.test(n.nodeName)) {
+                    if (!f) f = util.createElement(options.defaultTag);
+                    f.appendChild(n);
+                    i--; len--;
+                } else {
+                    if (f) {
+                        value += f.outerHTML;
+                        f = null;
+                    }
+                    value += n.outerHTML;
+                }
+            }
+
+            if (f) value += f.outerHTML;
+
+            return _d.createRange().createContextualFragment(value);
+        },
+
+        _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.isList(node)) {
+                        html += node.innerHTML;
+                    } else if (util.isListCell(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);
+                    } else {
+                        html += '<li>' + node.outerHTML + '</li>';
+                    }
+                } else {
+                    html += '<li>' + (node.textContent || '<br>') + '</li>';
+                }
+            }
+
+            return html;
+        },
+
+        _isFormatData: function (domTree) {
+            let requireFormat = false;
+
+            for (let i = 0, len = domTree.length, t; i < len; i++) {
+                t = domTree[i];
+                if (t.nodeType === 1 && !util.isTextStyleElement(t) && !util.isBreak(t) && !util._disallowedTags(t)) {
+                    requireFormat = true;
+                    break;
+                }
+            }
+
+            return requireFormat;
+        },
+
         /**
          * @description Gets the clean HTML code for editor
          * @param {String} html HTML string
@@ -5091,16 +5299,12 @@ export default function (context, pluginCallButtons, plugins, lang, options, _re
                 }
             }
 
-            const domTree = dom.childNodes;
+            let domTree = dom.childNodes;
             let cleanHTML = '';
-            let requireFormat = false;
+            const requireFormat = this._isFormatData(domTree);
 
-            for (let i = 0, len = domTree.length, t; i < len; i++) {
-                t = domTree[i];
-                if (t.nodeType === 1 && !util.isTextStyleElement(t) && !util.isBreak(t) && !util._disallowedTags(t)) {
-                    requireFormat = true;
-                    break;
-                }
+            if(requireFormat) {
+                domTree = this._editFormat(dom).childNodes;
             }
 
             for (let i = 0, len = domTree.length; i < len; i++) {
@@ -5152,7 +5356,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--;
@@ -5463,6 +5667,7 @@ export default function (context, pluginCallButtons, plugins, lang, options, _re
             this._charTypeHTML = options.charCounterType === 'byte-html';
             this.wwComputedStyle = _w.getComputedStyle(context.element.wysiwyg);
             this._editorHeight = context.element.wysiwygFrame.offsetHeight;
+            this._editorHeightPadding = util.getNumber(this.wwComputedStyle.getPropertyValue('padding-top')) + util.getNumber(this.wwComputedStyle.getPropertyValue('padding-bottom'));
 
             if (!options.iframe && typeof _w.ShadowRoot === 'function') {
                 let child = context.element.wysiwygFrame;
@@ -5626,12 +5831,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 +5842,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,
@@ -5696,7 +5901,7 @@ export default function (context, pluginCallButtons, plugins, lang, options, _re
         },
 
         __callResizeFunction: function (h, resizeObserverEntry) {
-            h = h === -1 ? resizeObserverEntry.borderBoxSize[0].blockSize : h;
+            h = h === -1 ? (resizeObserverEntry.borderBoxSize ? resizeObserverEntry.borderBoxSize[0].blockSize : (resizeObserverEntry.contentRect.height + this._editorHeightPadding)) : h;
             if (this._editorHeight !== h) {
                 if (typeof functions.onResizeEditor === 'function') functions.onResizeEditor(h, this._editorHeight, core, resizeObserverEntry);
                 this._editorHeight = h;
@@ -5965,7 +6170,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 +6183,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 +7438,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();
 
@@ -7587,39 +7793,11 @@ 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);
-                    }
-                }
                 functions.insertHTML(cleanData, true, false);
                 return false;
             }
         },
 
-        _convertListCell: function (dom) {
-            const domTree = dom.childNodes;
-            let html = '';
-
-            for (let i = 0, len = domTree.length, node; i < len; i++) {
-                node = domTree[i];
-                if (node.nodeType === 1) {
-                    if (util.isFormatElement(node)) {
-                        html += '<li>' +(node.innerHTML.trim() || '<br>') + '</li>';
-                    } else if (util.isRangeFormatElement(node) && !util.isTable(node)) {
-                        html += event._convertListCell(node);
-                    } else {
-                        html += '<li>' + node.outerHTML + '</li>';
-                    }
-                } else {
-                    html += '<li>' + (node.textContent || '<br>') + '</li>';
-                }
-            }
-
-            return html;
-        },
-
         onMouseMove_wysiwyg: function (e) {
             if (core.isDisabled || core.isReadOnly) return false;
             const component = util.getParentElement(e.target, util.isComponent);
@@ -8117,11 +8295,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);
@@ -8335,10 +8513,16 @@ export default function (context, pluginCallButtons, plugins, lang, options, _re
          */
         insertHTML: function (html, notCleaningData, checkCharCount, rangeSelection) {
             if (!context.element.wysiwygFrame.contains(core.getSelection().focusNode)) core.focus();
-            
+
             if (typeof html === 'string') {
                 if (!notCleaningData) html = core.cleanHTML(html, null, null);
                 try {
+                    if (util.isListCell(util.getFormatElement(core.getSelectionNode(), null))) {
+                        const dom = _d.createRange().createContextualFragment(html);
+                        const domTree = dom.childNodes;
+                        if (core._isFormatData(domTree)) html = core._convertListCell(domTree);
+                    }
+
                     const dom = _d.createRange().createContextualFragment(html);
                     const domTree = dom.childNodes;