suneditor 2.43.5 → 2.43.8

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
@@ -510,6 +504,42 @@ export default function (context, pluginCallButtons, plugins, lang, options, _re
             _lineBreakDir: ''
         },
 
+        /**
+         * @description Save the current buttons states to "allCommandButtons" object
+         * @private
+         */
+         _saveButtonStates: function () {
+            if (!this.allCommandButtons) this.allCommandButtons = {};
+
+            const currentButtons = this.context.element._buttonTray.querySelectorAll('.se-menu-list button[data-display]');
+            for (let i = 0, element, command; i < currentButtons.length; i++) {
+                element = currentButtons[i];
+                command = element.getAttribute('data-command');
+
+                this.allCommandButtons[command] = element;
+            }
+        },
+
+        /**
+         * @description Recover the current buttons states from "allCommandButtons" object
+         * @private
+         */
+        _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++) {
+                    button = currentButtons[i]; 
+                    command = button.getAttribute('data-command');
+
+                    oldButton = this.allCommandButtons[command];
+                    if (oldButton) {
+                        button.parentElement.replaceChild(oldButton, button);
+                        if (this.context.tool[command]) this.context.tool[command] = oldButton;
+                    }
+                }   
+            }
+        },
+
         /**
          * @description If the plugin is not added, add the plugin and call the 'add' function.
          * If the plugin is added call callBack function.
@@ -1471,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;
@@ -1645,165 +1675,261 @@ export default function (context, pluginCallButtons, plugins, lang, options, _re
                 return null;
             }
 
-            const line = util.getFormatElement(this.getSelectionNode(), null);
-            const listCell = util.isListCell(line);
+            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;
-                }
-
-                if (util.isFormatElement(oNode) || util.isRangeFormatElement(oNode) || (!util.isListCell(parentNode) && util.isComponent(oNode))) {
-                    const oldParent = parentNode;
-                    if (util.isList(afterNode)) {
-                        parentNode = afterNode;
+                // set node
+                if (!insertListCell) {
+                    if (util.isWysiwygDiv(afterNode) || parentNode === context.element.wysiwyg.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;
                     }
-
-                    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;
+                            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;
+                    }
                 }
 
                 // insert--
-                let emptyListCell = false;
-                if (listCell && util.isListCell(oNode)) {
-                    afterNode = line.nextElementSibling;
-                    parentNode = line.parentNode;
-                    emptyListCell = util.onlyZeroWidthSpace(line.textContent);
+                if (insertListCell) {
+                    if (!tempParentNode.parentNode) {
+                        parentNode = context.element.wysiwyg;
+                        afterNode = null;
+                    } else {
+                        parentNode = tempParentNode;
+                        afterNode = tempAfterNode;
+                    }
                 } else {
                     afterNode = parentNode === afterNode ? parentNode.lastChild : afterNode;
                 }
 
+                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;
+                }
+
                 parentNode.insertBefore(oNode, afterNode);
-                if (emptyListCell) util.removeItem(line);
+
+                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 {
@@ -1972,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;
                 }
 
@@ -2013,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;
@@ -2031,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;
             }
 
@@ -2064,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...)
@@ -4908,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
@@ -5001,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(';') + '"');
+                    }
                 }
             }
 
@@ -5030,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 += this._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
@@ -5071,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++) {
@@ -5443,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;
@@ -5606,6 +5831,8 @@ 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();
+
             const tool = context.tool;
             this.commandMap = {
                 OUTDENT: tool.outdent,
@@ -5674,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;
@@ -5943,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;
@@ -7566,41 +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.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;
-        },
-
         onMouseMove_wysiwyg: function (e) {
             if (core.isDisabled || core.isReadOnly) return false;
             const component = util.getParentElement(e.target, util.isComponent);
@@ -8098,6 +8295,7 @@ 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._cachingButtons();
             core.history._resetCachingButton();
 
@@ -8315,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;