@syncfusion/ej2-richtexteditor 23.2.7-52849 → 24.1.41-569781

package/src/editor-manager/plugin/selection-commands.js

@@ -38,6 +38,45 @@ var SelectionCommands = /** @class */ (function () {
             var nodeCutter = new NodeCutter();
             var isFormatted = new IsFormatted();
             var range = domSelection.getRange(docElement);
+            var currentAnchorNode = range.startContainer.parentElement;
+            if (range.collapsed && !isNOU(currentAnchorNode) &&
+                currentAnchorNode.tagName === 'A' &&
+                (range.startOffset === currentAnchorNode.textContent.length || range.startOffset === 0)) {
+                var emptyTextNode = document.createTextNode('');
+                if (range.startOffset === 0) {
+                    currentAnchorNode.parentNode.insertBefore(emptyTextNode, currentAnchorNode);
+                }
+                else {
+                    if (!isNOU(currentAnchorNode.nextSibling)) {
+                        currentAnchorNode.parentElement.insertBefore(emptyTextNode, currentAnchorNode.nextSibling);
+                    }
+                    else {
+                        currentAnchorNode.parentNode.appendChild(emptyTextNode);
+                    }
+                }
+                // Set the range to the empty text node
+                var newRange = docElement.createRange();
+                range.setStart(emptyTextNode, 0);
+                range.setEnd(emptyTextNode, 0);
+                range.collapse(true);
+                domSelection.setRange(docElement, newRange);
+            }
+            if (Browser.userAgent.indexOf('Firefox') !== -1 && range.startContainer === range.endContainer && !isNOU(endNode) && range.startContainer === endNode) {
+                var startChildNodes = range.startContainer.childNodes;
+                var startNode = ((startChildNodes[(range.startOffset > 0) ? (range.startOffset - 1) :
+                    range.startOffset]) || range.startContainer);
+                var endNode_1 = (range.endContainer.childNodes[(range.endOffset > 0) ? (range.endOffset - 1) :
+                    range.endOffset] || range.endContainer);
+                var lastSelectionNode = (endNode_1.lastChild.nodeName === 'BR' ? (isNOU(endNode_1.lastChild.previousSibling) ? endNode_1
+                    : endNode_1.lastChild.previousSibling) : endNode_1.firstChild);
+                while (!isNOU(lastSelectionNode) && lastSelectionNode.nodeName !== '#text' && lastSelectionNode.nodeName !== 'IMG' &&
+                    lastSelectionNode.nodeName !== 'BR' && lastSelectionNode.nodeName !== 'HR') {
+                    lastSelectionNode = lastSelectionNode.lastChild;
+                }
+                ;
+                domSelection.setSelectionText(docElement, startNode, lastSelectionNode, 0, 0);
+                range = domSelection.getRange(docElement);
+            }
             var save = domSelection.save(range, docElement);
             var nodes = range.collapsed ? domSelection.getSelectionNodeCollection(range) :
                 domSelection.getSelectionNodeCollectionBr(range);
@@ -185,8 +224,7 @@ var SelectionCommands = /** @class */ (function () {
                 cursorNodes[0].firstElementChild.tagName.toLowerCase() === 'br')) {
                 cursorNodes[0].innerHTML = '';
             }
-            if (cursorNodes.length === 1 && range.startOffset === 0 && (cursorNodes[0].nodeName === 'BR' ||
-                cursorNodes[0].nextSibling.nodeName === 'BR')) {
+            if (cursorNodes.length === 1 && range.startOffset === 0 && (cursorNodes[0].nodeName === 'BR' || (isNOU(cursorNodes[0].nextSibling) ? false : cursorNodes[0].nextSibling.nodeName === 'BR'))) {
                 detach(cursorNodes[0].nodeName === '#text' ? cursorNodes[0].nextSibling : cursorNodes[0]);
             }
             cursorNode = this.getInsertNode(docElement, range, format, value).firstChild;
@@ -211,11 +249,15 @@ var SelectionCommands = /** @class */ (function () {
             && range.endOffset === range.startContainer.length)) {
             var nodeIndex = [];
             var cloneNode = nodes[index];
+            var clonedElement = cloneNode;
             do {
                 nodeIndex.push(domSelection.getIndex(cloneNode));
                 cloneNode = cloneNode.parentNode;
             } while (cloneNode && (cloneNode !== formatNode));
             if (nodes[index].nodeName !== 'BR') {
+                if (clonedElement.nodeName === '#text' && clonedElement.textContent.includes('\u200B')) {
+                    clonedElement.remove();
+                }
                 cloneNode = splitNode = (isCursor && (formatNode.textContent.length - 1) === range.startOffset) ?
                     nodeCutter.SplitNode(range, formatNode, true)
                     : nodeCutter.GetSpliceNode(range, formatNode);
@@ -293,8 +335,45 @@ var SelectionCommands = /** @class */ (function () {
             formatNode.style.textDecoration = 'none';
             child = [formatNode];
         }
+        else if (IsFormatted.inlineTags.indexOf(formatNodeTagName.toLowerCase()) !== -1 && isFontStyle && formatNodeTagName.toLocaleLowerCase() !== 'span') {
+            var fontNodeStyle = formatNode.style;
+            if (fontNodeStyle.color && format === 'fontcolor') {
+                if (formatNode.nodeName === 'A') {
+                    fontNodeStyle.color = value;
+                }
+                else {
+                    fontNodeStyle.color = '';
+                }
+            }
+            else if (fontNodeStyle.backgroundColor && format === 'backgroundcolor') {
+                fontNodeStyle.backgroundColor = '';
+            }
+            else if (fontNodeStyle.fontSize && format === 'fontsize') {
+                fontNodeStyle.fontSize = '';
+            }
+            else if (fontNodeStyle.fontFamily && format === 'fontname') {
+                fontNodeStyle.fontFamily = '';
+            }
+            if (formatNode.getAttribute("style") === '') {
+                formatNode.removeAttribute("style");
+            }
+            child = [formatNode];
+        }
         else {
             child = InsertMethods.unwrap(formatNode);
+            var liElement = nodes[index].parentElement;
+            if (!isNOU(liElement) && liElement.tagName.toLowerCase() !== 'li') {
+                liElement = closest(liElement, 'li');
+            }
+            if (!isNOU(liElement) && liElement.tagName.toLowerCase() === 'li' &&
+                liElement.textContent.trim() === nodes[index].textContent.trim()) {
+                if (format === 'bold') {
+                    liElement.style.fontWeight = 'normal';
+                }
+                else if (format === "italic") {
+                    liElement.style.fontStyle = 'normal';
+                }
+            }
         }
         if (child[0] && !isFontStyle) {
             var nodeTraverse = child[index] ? child[index] : child[0];
@@ -343,6 +422,16 @@ var SelectionCommands = /** @class */ (function () {
                 if (child[num].nodeType !== 3 || (child[num].textContent &&
                     child[num].textContent.trim().length > 0)) {
                     child[num] = InsertMethods.Wrap(child[num], this.GetFormatNode(format, value, formatNodeTagName, formatNodeStyles));
+                    var liElement = nodes[index].parentElement;
+                    if (!isNOU(liElement) && liElement.tagName.toLowerCase() !== 'li') {
+                        liElement = closest(liElement, 'li');
+                    }
+                    if (!isNOU(liElement) && liElement.tagName.toLowerCase() === 'li' &&
+                        liElement.textContent.trim() === nodes[index].textContent.trim()) {
+                        if (format === 'fontname') {
+                            liElement.style.fontFamily = value;
+                        }
+                    }
                     if (child[num].textContent === startText) {
                         if (num === 0) {
                             range.setStartBefore(child[num]);
@@ -375,7 +464,10 @@ var SelectionCommands = /** @class */ (function () {
                 }
                 var num = index;
                 var liChildContent = '';
-                while (num >= 0 && !isNOU(liElement) && liElement.tagName.toLowerCase() === 'li' && liElement.textContent.replace('/\u200B/g', '').trim().includes(nodes[num].textContent.trim())) {
+                /* eslint-disable security/detect-object-injection */
+                while (num >= 0 && !isNOU(liElement) && liElement.tagName.toLowerCase() === 'li' && liElement.contains(nodes[num]) &&
+                    liElement.textContent.replace('/\u200B/g', '').trim().includes(nodes[num].textContent.trim())) {
+                    /* eslint-enable security/detect-object-injection */
                     liChildContent = ' ' + nodes[num].textContent.trim() + liChildContent;
                     num--;
                 }
@@ -447,6 +539,48 @@ var SelectionCommands = /** @class */ (function () {
                             parentElement = parentElement.parentElement;
                             liElement = parentElement;
                         }
+                        if (format === 'fontcolor' || format === 'fontname') {
+                            var parentElem = nodes[index].parentElement;
+                            if (!isNOU(parentElem) && parentElem.childNodes) {
+                                for (var i = 0; i < parentElem.childNodes.length; i++) {
+                                    if (this.concatenateTextExcludingList(nodes, index) === nodes[index].textContent) {
+                                        var liElement_1 = void 0;
+                                        if (parentElem.tagName === 'LI') {
+                                            liElement_1 = parentElem;
+                                        }
+                                        else if (parentElem.closest('li')) {
+                                            liElement_1 = parentElem.closest('li');
+                                        }
+                                        if (!isNOU(liElement_1)) {
+                                            switch (format) {
+                                                case 'fontcolor':
+                                                    liElement_1.style.color = value;
+                                                    break;
+                                                case 'fontname':
+                                                    liElement_1.style.fontFamily = value;
+                                                    break;
+                                                default:
+                                                    break;
+                                            }
+                                        }
+                                    }
+                                    // eslint-disable-next-line
+                                    var childElement = parentElem.childNodes[i];
+                                    if (childElement.tagName === 'OL' || childElement.tagName === 'UL') {
+                                        switch (format) {
+                                            case 'fontcolor':
+                                                childElement.style.color = 'initial';
+                                                break;
+                                            case 'fontname':
+                                                childElement.style.fontFamily = 'initial';
+                                                break;
+                                            default:
+                                                break;
+                                        }
+                                    }
+                                }
+                            }
+                        }
                         if (!isNOU(liElement) && liElement.tagName.toLowerCase() === 'li' &&
                             liElement.textContent.trim() === nodes[index].textContent.trim()) {
                             if (format === 'fontsize') {
@@ -456,6 +590,9 @@ var SelectionCommands = /** @class */ (function () {
                                 liElement.style.color = value;
                                 liElement.style.textDecoration = 'inherit';
                             }
+                            else if (format === 'fontname') {
+                                liElement.style.fontFamily = value;
+                            }
                         }
                         if (value === 'formatPainter') {
                             return this.insertFormatPainterElem(nodes, index, range, nodeCutter, painterValues, domNode);
@@ -503,6 +640,19 @@ var SelectionCommands = /** @class */ (function () {
                     }
                     else {
                         nodes[index] = this.applyStyles(nodes, index, element);
+                        var liElement = nodes[index].parentElement;
+                        if (!isNOU(liElement) && liElement.tagName.toLowerCase() !== 'li') {
+                            liElement = closest(liElement, 'li');
+                        }
+                        if (!isNOU(liElement) && liElement.tagName.toLowerCase() === 'li' &&
+                            liElement.textContent.trim() === nodes[index].textContent.trim()) {
+                            if (format === 'bold') {
+                                liElement.style.fontWeight = 'bold';
+                            }
+                            else if (format === "italic") {
+                                liElement.style.fontStyle = 'italic';
+                            }
+                        }
                     }
                 }
             }
@@ -730,6 +880,18 @@ var SelectionCommands = /** @class */ (function () {
             }
         }
     };
+    SelectionCommands.concatenateTextExcludingList = function (nodes, index) {
+        var result = '';
+        var parentNode = nodes[index].parentElement;
+        for (var i = 0; i < parentNode.childNodes.length; i++) {
+            // eslint-disable-next-line
+            var childNode = parentNode.childNodes[i];
+            if ((childNode.nodeType === 3) || (childNode.nodeType === 1 && (childNode.tagName !== 'OL' && childNode.tagName !== 'UL'))) {
+                result += childNode.textContent;
+            }
+        }
+        return result;
+    };
     SelectionCommands.enterAction = 'P';
     return SelectionCommands;
 }());

package/src/editor-manager/plugin/table.d.ts

@@ -20,7 +20,6 @@ export declare class TableCommand {
     private addEventListener;
     private createTable;
     private calculateStyleValue;
-    private removeEmptyNode;
     private insertAfter;
     private getSelectedCellMinMaxIndex;
     private insertRow;

package/src/editor-manager/plugin/table.js

@@ -60,9 +60,8 @@ var TableCommand = /** @class */ (function () {
         table.appendChild(tblBody);
         e.item.selection.restore();
         InsertHtml.Insert(this.parent.currentDocument, table, this.parent.editableElement);
-        this.removeEmptyNode();
         e.item.selection.setSelectionText(this.parent.currentDocument, table.querySelector('td'), table.querySelector('td'), 0, 0);
-        if (table.nextElementSibling === null) {
+        if (table.nextElementSibling === null && !table.classList.contains('ignore-table')) {
             var insertElem = void 0;
             if (e.enterAction === 'DIV') {
                 insertElem = createElement('div');
@@ -77,6 +76,9 @@ var TableCommand = /** @class */ (function () {
             }
             this.insertAfter(insertElem, table);
         }
+        if (table.classList.contains('ignore-table')) {
+            table.classList.remove('ignore-table');
+        }
         table.querySelector('td').classList.add('e-cell-select');
         if (e.callBack) {
             e.callBack({
@@ -104,24 +106,6 @@ var TableCommand = /** @class */ (function () {
         }
         return styleValue;
     };
-    TableCommand.prototype.removeEmptyNode = function () {
-        var emptyUl = this.parent.editableElement.querySelectorAll('ul:empty, ol:empty');
-        for (var i = 0; i < emptyUl.length; i++) {
-            detach(emptyUl[i]);
-        }
-        var emptyLiChild = this.parent.editableElement.querySelectorAll('li *:empty:not(img)');
-        for (var i = 0; i < emptyLiChild.length; i++) {
-            detach(emptyLiChild[i]);
-            if (emptyLiChild.length === i + 1) {
-                emptyLiChild = this.parent.editableElement.querySelectorAll('li *:empty:not(img)');
-                i = -1;
-            }
-        }
-        var emptyLi = this.parent.editableElement.querySelectorAll('li:empty');
-        for (var i = 0; i < emptyLi.length; i++) {
-            detach(emptyLi[i]);
-        }
-    };
     TableCommand.prototype.insertAfter = function (newNode, referenceNode) {
         referenceNode.parentNode.insertBefore(newNode, referenceNode.nextSibling);
     };
@@ -472,14 +456,21 @@ var TableCommand = /** @class */ (function () {
         }
     };
     TableCommand.prototype.tableVerticalAlign = function (e) {
-        if (e.item.subCommand === 'AlignTop') {
-            e.item.tableCell.style.verticalAlign = 'top';
-        }
-        else if (e.item.subCommand === 'AlignMiddle') {
-            e.item.tableCell.style.verticalAlign = 'middle';
+        var value = '';
+        switch (e.item.subCommand) {
+            case 'AlignTop':
+                value = 'top';
+                break;
+            case 'AlignMiddle':
+                value = 'middle';
+                break;
+            case 'AlignBottom':
+                value = 'bottom';
+                break;
         }
-        else {
-            e.item.tableCell.style.verticalAlign = 'bottom';
+        e.item.tableCell.style.verticalAlign = value;
+        if (value && value !== '' && e.item.tableCell.getAttribute('valign')) {
+            e.item.tableCell.removeAttribute('valign');
         }
         if (e.callBack) {
             e.callBack({
@@ -510,10 +501,22 @@ var TableCommand = /** @class */ (function () {
             firstCell.setAttribute('rowspan', (minMaxIndexes.endRow - minMaxIndexes.startRow + 1).toString());
         }
         var totalWidth = 0;
+        var unit;
         for (var j = rowSelectedCells.length - 1; j >= 0; j--) {
-            totalWidth = totalWidth + parseFloat(rowSelectedCells[j].style.width);
+            if (!isNOU(rowSelectedCells[j].style.width)
+                && rowSelectedCells[j].style.width !== '') {
+                if (!unit) {
+                    var match = rowSelectedCells[j].style.width.match(/^([\d.]+)([a-z%]+)$/i);
+                    unit = match ? match[2] : '%';
+                }
+                totalWidth = totalWidth + parseFloat(rowSelectedCells[j].style.width);
+            }
+            else {
+                totalWidth = totalWidth + ((rowSelectedCells[j].offsetWidth / this.curTable.offsetWidth) * 100);
+                unit = '%';
+            }
         }
-        firstCell.style.width = totalWidth + '%';
+        firstCell.style.width = totalWidth + unit;
         for (var i = 1; i <= selectedCells.length - 1; i++) {
             detach(selectedCells[i]);
         }
@@ -550,7 +553,7 @@ var TableCommand = /** @class */ (function () {
         var eleArray = elements;
         //eslint-disable-next-line
         if (min < (max = Math.min(max, eleArray[0].length - 1))) {
-            for (colIndex === min; colIndex <= max; colIndex++) {
+            for (colIndex = min; colIndex <= max; colIndex++) {
                 // eslint-disable-next-line
                 if (!(min < colIndex && eleArray[0][colIndex] === eleArray[0][colIndex - 1]) && 1 < (index =
                     Math.min(parseInt(eleArray[0][colIndex].getAttribute('colspan'), 10) || 1, max - min + 1)) &&

package/src/editor-manager/plugin/toolbar-status.d.ts

@@ -11,7 +11,7 @@ export declare class ToolbarStatus {
      * get method
      *
      * @param {Document} docElement - specifies the document element
-     * @param {Node} targetNode - specifies the target node
+     * @param {Node} rootNode - specifies the content editable element
      * @param {string[]} formatNode - specifies the format node
      * @param {string[]} fontSize - specifies the font size
      * @param {string[]} fontName - specifies the font name.
@@ -20,7 +20,7 @@ export declare class ToolbarStatus {
      * @hidden
      * @deprecated
      */
-    static get(docElement: Document, targetNode: Node, formatNode?: string[], fontSize?: string[], fontName?: string[], documentNode?: Node): IToolbarStatus;
+    static get(docElement: Document, rootNode: Node, formatNode?: string[], fontSize?: string[], fontName?: string[], documentNode?: Node): IToolbarStatus;
     private static getImmediateBlockNode;
     private static getFormatParent;
     private static isFormattedNode;

package/src/editor-manager/plugin/toolbar-status.js

@@ -2,6 +2,7 @@ import { IsFormatted } from './isformatted';
 import * as CONSTANT from './../base/constant';
 import { NodeSelection } from './../../selection/index';
 import { getDefaultHtmlTbStatus } from './../../common/util';
+import { isNullOrUndefined } from '@syncfusion/ej2-base';
 /**
  * Update Toolbar Status
  *
@@ -16,7 +17,7 @@ var ToolbarStatus = /** @class */ (function () {
      * get method
      *
      * @param {Document} docElement - specifies the document element
-     * @param {Node} targetNode - specifies the target node
+     * @param {Node} rootNode - specifies the content editable element
      * @param {string[]} formatNode - specifies the format node
      * @param {string[]} fontSize - specifies the font size
      * @param {string[]} fontName - specifies the font name.
@@ -25,7 +26,7 @@ var ToolbarStatus = /** @class */ (function () {
      * @hidden
      * @deprecated
      */
-    ToolbarStatus.get = function (docElement, targetNode, formatNode, fontSize, fontName, documentNode) {
+    ToolbarStatus.get = function (docElement, rootNode, formatNode, fontSize, fontName, documentNode) {
         var formatCollection = JSON.parse(JSON.stringify(statusCollection));
         var nodeCollection = JSON.parse(JSON.stringify(statusCollection));
         var nodeSelection = new NodeSelection();
@@ -55,7 +56,7 @@ var ToolbarStatus = /** @class */ (function () {
         }
         for (var index = 0; index < nodes.length; index++) {
             // eslint-disable-next-line max-len
-            formatCollection = this.getFormatParent(docElement, formatCollection, nodes[index], targetNode, formatNode, fontSize, fontName);
+            formatCollection = this.getFormatParent(docElement, formatCollection, nodes[index], rootNode, formatNode, fontSize, fontName);
             if ((index === 0 && formatCollection.bold) || !formatCollection.bold) {
                 nodeCollection.bold = formatCollection.bold;
             }
@@ -130,16 +131,24 @@ var ToolbarStatus = /** @class */ (function () {
         return node;
     };
     ToolbarStatus.getFormatParent = function (docElement, formatCollection, node, targetNode, formatNode, fontSize, fontName) {
+        var isListUpdated = false;
+        var isComplexListUpdated = false;
         if (targetNode.contains(node) ||
             (node.nodeType === 3 && targetNode.nodeType !== 3 && targetNode.contains(node.parentNode))) {
             do {
-                formatCollection = this.isFormattedNode(docElement, formatCollection, node, formatNode, fontSize, fontName);
+                formatCollection = this.isFormattedNode(docElement, formatCollection, node, isListUpdated, isComplexListUpdated, formatNode, fontSize, fontName);
+                if (formatCollection.orderedlist || formatCollection.unorderedlist) {
+                    isListUpdated = true;
+                }
+                if (formatCollection.bulletFormatList || formatCollection.numberFormatList) {
+                    isComplexListUpdated = true;
+                }
                 node = node.parentNode;
             } while (node && (node !== targetNode));
         }
         return formatCollection;
     };
-    ToolbarStatus.isFormattedNode = function (docElement, formatCollection, node, formatNode, fontSize, fontName) {
+    ToolbarStatus.isFormattedNode = function (docElement, formatCollection, node, isListUpdated, isComplexListUpdated, formatNode, fontSize, fontName) {
         if (!formatCollection.bold) {
             formatCollection.bold = IsFormatted.isBold(node);
         }
@@ -170,10 +179,10 @@ var ToolbarStatus = /** @class */ (function () {
         if (!formatCollection.backgroundcolor) {
             formatCollection.backgroundcolor = this.isBackgroundColor(node);
         }
-        if (!formatCollection.orderedlist) {
+        if (!formatCollection.orderedlist && !isListUpdated) {
             formatCollection.orderedlist = this.isOrderedList(node);
         }
-        if (!formatCollection.unorderedlist) {
+        if (!formatCollection.unorderedlist && !isListUpdated) {
             formatCollection.unorderedlist = this.isUnorderedList(node);
         }
         if (!formatCollection.alignments) {
@@ -188,10 +197,10 @@ var ToolbarStatus = /** @class */ (function () {
         if (!formatCollection.createlink) {
             formatCollection.createlink = this.isLink(node);
         }
-        if (!formatCollection.numberFormatList) {
+        if (!formatCollection.numberFormatList && !isComplexListUpdated) {
             formatCollection.numberFormatList = this.isNumberFormatList(node);
         }
-        if (!formatCollection.bulletFormatList) {
+        if (!formatCollection.bulletFormatList && !isComplexListUpdated) {
             formatCollection.bulletFormatList = this.isBulletFormatList(node);
         }
         return formatCollection;
@@ -250,7 +259,8 @@ var ToolbarStatus = /** @class */ (function () {
                 // eslint-disable-next-line
                 var pattern = new RegExp(name, 'i');
                 if ((value.replace(/"/g, '').replace(/ /g, '').toLowerCase() === name.replace(/"/g, '').replace(/ /g, '').toLowerCase()) ||
-                    (value.split(',')[0] && value.split(',')[0].search(pattern) > -1)) {
+                    (value.split(',')[0] && !isNullOrUndefined(value.split(',')[0].trim().match(pattern)) &&
+                        value.split(',')[0].trim() === value.split(',')[0].trim().match(pattern)[0])) {
                     index = pos;
                 }
             }) && (index !== null)))) {

package/src/editor-manager/plugin/undo.d.ts

@@ -39,6 +39,7 @@ export declare class UndoRedoManager {
     private keyDown;
     private keyUp;
     private getTextContentFromFragment;
+    private isElementStructureEqual;
     /**
      * RTE collection stored html format.
      *

package/src/editor-manager/plugin/undo.js

@@ -98,6 +98,25 @@ var UndoRedoManager = /** @class */ (function () {
         }
         return textContent;
     };
+    UndoRedoManager.prototype.isElementStructureEqual = function (previousFragment, currentFragment) {
+        if (previousFragment.childNodes.length !== currentFragment.childNodes.length) {
+            return false;
+        }
+        for (var i = 0; i < previousFragment.childNodes.length; i++) {
+            var previousFragmentNode = previousFragment.childNodes[i];
+            var currentFragmentNode = currentFragment.childNodes[i];
+            if (!previousFragmentNode || !currentFragmentNode) {
+                return false;
+            }
+            if (previousFragmentNode.nodeType !== currentFragmentNode.nodeType) {
+                return false;
+            }
+            if (previousFragmentNode.outerHTML !== currentFragmentNode.outerHTML) {
+                return false;
+            }
+        }
+        return true;
+    };
     /**
      * RTE collection stored html format.
      *
@@ -134,7 +153,8 @@ var UndoRedoManager = /** @class */ (function () {
             (this.undoRedoStack[this.undoRedoStack.length - 1].range.endOffset === save.range.endOffset) &&
             (this.undoRedoStack[this.undoRedoStack.length - 1].range.range.startContainer === save.range.startContainer) &&
             (this.getTextContentFromFragment(this.undoRedoStack[this.undoRedoStack.length - 1].text).trim() ===
-                this.getTextContentFromFragment(changEle.text).trim())) {
+                this.getTextContentFromFragment(changEle.text).trim()) &&
+            this.isElementStructureEqual(this.undoRedoStack[this.undoRedoStack.length - 1].text, changEle.text)) {
             return;
         }
         this.undoRedoStack.push(changEle);

package/src/rich-text-editor/actions/base-quick-toolbar.d.ts

@@ -1,5 +1,5 @@
 import { Popup } from '@syncfusion/ej2-popups';
-import { IRichTextEditor } from '../base/interface';
+import { IRichTextEditor, IBaseQuickToolbar } from '../base/interface';
 import { IToolbarItems, IQuickToolbarOptions } from '../base/interface';
 import { ServiceLocator } from '../services/service-locator';
 import { BaseToolbar } from './base-toolbar';
@@ -7,10 +7,10 @@ import { RichTextEditorModel } from '../base/rich-text-editor-model';
 /**
  * `Quick toolbar` module is used to handle Quick toolbar actions.
  */
-export declare class BaseQuickToolbar {
+export declare class BaseQuickToolbar implements IBaseQuickToolbar {
     popupObj: Popup;
     element: HTMLElement;
-    private isDOMElement;
+    isRendered: boolean;
     quickTBarObj: BaseToolbar;
     private stringItems;
     private dropDownButtons;