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

package/src/rich-text-editor/actions/paste-clean-up.js

@@ -2,7 +2,7 @@ import * as events from '../base/constant';
 import { Popup } from '@syncfusion/ej2-popups';
 import { RadioButton } from '@syncfusion/ej2-buttons';
 import { isNullOrUndefined as isNOU, isNullOrUndefined, detach, extend, addClass, removeClass } from '@syncfusion/ej2-base';
-import { getUniqueID, Browser } from '@syncfusion/ej2-base';
+import { getUniqueID, Browser, closest } from '@syncfusion/ej2-base';
 import { CLS_RTE_PASTE_KEEP_FORMAT, CLS_RTE_PASTE_REMOVE_FORMAT, CLS_RTE_PASTE_PLAIN_FORMAT } from '../base/classes';
 import { CLS_RTE_PASTE_OK, CLS_RTE_PASTE_CANCEL, CLS_RTE_DIALOG_MIN_HEIGHT } from '../base/classes';
 import { CLS_RTE_IMAGE, CLS_IMGINLINE, CLS_IMGBREAK } from '../base/classes';
@@ -46,6 +46,7 @@ var PasteCleanup = /** @class */ (function () {
         this.parent.on(events.pasteClean, this.pasteClean, this);
         this.parent.on(events.bindCssClass, this.setCssClass, this);
         this.parent.on(events.destroy, this.destroy, this);
+        this.parent.on(events.docClick, this.docClick, this);
     };
     PasteCleanup.prototype.destroy = function () {
         this.removeEventListener();
@@ -57,6 +58,7 @@ var PasteCleanup = /** @class */ (function () {
         this.parent.off(events.pasteClean, this.pasteClean);
         this.parent.off(events.bindCssClass, this.setCssClass);
         this.parent.off(events.destroy, this.destroy);
+        this.parent.off(events.docClick, this.docClick);
     };
     PasteCleanup.prototype.pasteClean = function (e) {
         var _this = this;
@@ -66,6 +68,7 @@ var PasteCleanup = /** @class */ (function () {
             event: e
         };
         var value = null;
+        var isClipboardHTMLDataNull = false;
         var imageproperties;
         if (e.args && !isNOU(e.args.clipboardData)) {
             value = e.args.clipboardData.getData('text/html');
@@ -104,6 +107,7 @@ var PasteCleanup = /** @class */ (function () {
                     var divElement = this.parent.createElement('div');
                     divElement.innerHTML = this.splitBreakLine(value);
                     value = divElement.innerHTML;
+                    isClipboardHTMLDataNull = true;
                 }
             }
             else if (value.length > 0) {
@@ -111,7 +115,8 @@ var PasteCleanup = /** @class */ (function () {
                     args: e.args,
                     text: e.text,
                     allowedStylePropertiesArray: this.parent.pasteCleanupSettings.allowedStyleProps,
-                    callBack: function (a, cropImageData) {
+                    callBack: function (a, cropImageData, pasteTableSource) {
+                        args.pasteTableSource = pasteTableSource;
                         value = a.trim();
                         _this.cropImageData = cropImageData;
                     }
@@ -123,12 +128,24 @@ var PasteCleanup = /** @class */ (function () {
             this.saveSelection = this.nodeSelectionObj.save(range, currentDocument);
             var tempDivElem = this.parent.createElement('div');
             tempDivElem.innerHTML = value;
+            var unsupportedImg = tempDivElem.querySelectorAll('.e-rte-image-unsupported');
+            for (var index = 0; index < unsupportedImg.length; index++) {
+                unsupportedImg[index].setAttribute('alt', this.i10n.getConstant('unsupportedImage'));
+                unsupportedImg[index].classList.remove('e-rte-image-unsupported');
+            }
+            value = tempDivElem.innerHTML;
             var isValueNotEmpty = tempDivElem.textContent !== '' || !isNOU(tempDivElem.querySelector('img')) ||
                 !isNOU(tempDivElem.querySelector('table'));
+            this.parent.notify(events.cleanupResizeElements, {
+                value: value,
+                callBack: function (currentValue) {
+                    value = currentValue;
+                }
+            });
             if (this.parent.pasteCleanupSettings.prompt) {
                 if (isValueNotEmpty) {
                     e.args.preventDefault();
-                    this.pasteDialog(value, args);
+                    this.pasteDialog(value, args, isClipboardHTMLDataNull);
                 }
                 else if (Browser.userAgent.indexOf('Firefox') !== -1 && isNOU(file)) {
                     this.fireFoxImageUpload();
@@ -140,7 +157,7 @@ var PasteCleanup = /** @class */ (function () {
             }
             else if (this.parent.pasteCleanupSettings.plainText) {
                 e.args.preventDefault();
-                this.plainFormatting(value, args);
+                this.plainFormatting(value, args, isClipboardHTMLDataNull);
             }
             else if (this.parent.pasteCleanupSettings.keepFormat) {
                 e.args.preventDefault();
@@ -182,13 +199,17 @@ var PasteCleanup = /** @class */ (function () {
     PasteCleanup.prototype.splitBreakLine = function (value) {
         var enterSplitText = value.split('\n');
         var contentInnerElem = '';
+        var startNode = this.parent.enterKey === 'P' ? '<p>' : (this.parent.enterKey === 'DIV' ? '<div>' : '');
+        var endNode = this.parent.enterKey === 'P' ? '</p>' : (this.parent.enterKey === 'DIV' ? '</div>' : '<br>');
         for (var i = 0; i < enterSplitText.length; i++) {
             if (enterSplitText[i].trim() === '') {
                 contentInnerElem += getDefaultValue(this.parent);
             }
             else {
                 var contentWithSpace = this.makeSpace(enterSplitText[i]);
-                contentInnerElem += (i === 0 ? '<span>' : '<p>') + contentWithSpace.trim() + (i === 0 ? '</span>' : '</p>');
+                contentInnerElem += (i === 0 && this.parent.enterKey !== 'BR' ? '<span>' : startNode) +
+                    (contentWithSpace.trim() === '' ? '<br>' : contentWithSpace.trim()) +
+                    (enterSplitText.length - 1 === i && this.parent.enterKey === 'BR' ? '' : (i === 0 && this.parent.enterKey !== 'BR' ? '</span>' : endNode));
             }
         }
         return contentInnerElem;
@@ -398,7 +419,9 @@ var PasteCleanup = /** @class */ (function () {
         });
         popupObj.close();
         imgElem.style.opacity = '1';
-        uploadObj.destroy();
+        if (!uploadObj.isDestroyed) {
+            uploadObj.destroy();
+        }
         this.toolbarEnableDisable(false);
     };
     PasteCleanup.prototype.refreshPopup = function (imageElement, popupObj) {
@@ -457,10 +480,10 @@ var PasteCleanup = /** @class */ (function () {
         var range = this.nodeSelectionObj.getRange(currentDocument);
         this.saveSelection = this.nodeSelectionObj.save(range, currentDocument);
         if (this.parent.pasteCleanupSettings.prompt) {
-            this.pasteDialog(imageValue, pasteArgs);
+            this.pasteDialog(imageValue, pasteArgs, false);
         }
         else if (this.parent.pasteCleanupSettings.plainText) {
-            this.plainFormatting(imageValue, pasteArgs);
+            this.plainFormatting(imageValue, pasteArgs, false);
         }
         else if (this.parent.pasteCleanupSettings.keepFormat) {
             this.formatting(imageValue, false, pasteArgs);
@@ -484,7 +507,7 @@ var PasteCleanup = /** @class */ (function () {
         var plainTextElement = this.parent.element.querySelector('#plainTextFormat');
         this.plainTextRadioButton.appendTo(plainTextElement);
     };
-    PasteCleanup.prototype.selectFormatting = function (value, args, keepChecked, cleanChecked) {
+    PasteCleanup.prototype.selectFormatting = function (value, args, keepChecked, cleanChecked, isClipboardHTMLDataNull) {
         if (keepChecked) {
             this.formatting(value, false, args);
         }
@@ -492,10 +515,10 @@ var PasteCleanup = /** @class */ (function () {
             this.formatting(value, true, args);
         }
         else {
-            this.plainFormatting(value, args);
+            this.plainFormatting(value, args, isClipboardHTMLDataNull);
         }
     };
-    PasteCleanup.prototype.pasteDialog = function (value, args) {
+    PasteCleanup.prototype.pasteDialog = function (value, args, isClipboardHTMLDataNull) {
         var _this = this;
         var isHeight = false;
         var preRTEHeight = this.parent.height;
@@ -512,7 +535,7 @@ var PasteCleanup = /** @class */ (function () {
                             var argument = _this.dialogObj;
                             _this.dialogRenderObj.close(argument);
                             _this.dialogObj.destroy();
-                            _this.selectFormatting(value, args, keepChecked, cleanChecked);
+                            _this.selectFormatting(value, args, keepChecked, cleanChecked, isClipboardHTMLDataNull);
                         }
                     },
                     buttonModel: {
@@ -549,7 +572,7 @@ var PasteCleanup = /** @class */ (function () {
             width: '300px',
             height: '265px',
             cssClass: CLS_RTE_DIALOG_MIN_HEIGHT,
-            isModal: true,
+            isModal: Browser.isDevice,
             visible: false
         };
         this.dialogObj = this.dialogRenderObj.render(dialogModel);
@@ -573,7 +596,7 @@ var PasteCleanup = /** @class */ (function () {
             isHeight = true;
         }
         this.dialogObj.show();
-        this.setCssClass({ cssClass: this.parent.cssClass });
+        this.setCssClass({ cssClass: this.parent.getCssClass() });
     };
     PasteCleanup.prototype.updateCss = function (currentObj, e) {
         if (currentObj && e.cssClass) {
@@ -603,13 +626,22 @@ var PasteCleanup = /** @class */ (function () {
         this.updateCss(this.keepRadioButton, e);
     };
     PasteCleanup.prototype.destroyDialog = function (rteDialogWrapper) {
-        var rteDialogContainer = this.parent.element.querySelector('.e-dlg-container');
+        var rteDialogContainer = this.parent.element.querySelector('.e-rte-dialog-minheight');
         detach(rteDialogContainer);
         var rteDialogWrapperChildLength = rteDialogWrapper.children.length;
         for (var i = 0; i < rteDialogWrapperChildLength; i++) {
             detach(rteDialogWrapper.children[0]);
         }
     };
+    PasteCleanup.prototype.docClick = function (e) {
+        var target = e.args.target;
+        if (target && target.classList && ((this.dialogObj && !closest(target, '[id=' + "'" + this.dialogObj.element.id + "'" + ']')))
+            && (!target.classList.contains('e-toolbar-item'))) {
+            if (this.dialogObj) {
+                this.dialogObj.hide();
+            }
+        }
+    };
     PasteCleanup.prototype.cleanAppleClass = function (elem) {
         var appleClassElem = elem.querySelectorAll('br.Apple-interchange-newline');
         for (var i = 0; i < appleClassElem.length; i++) {
@@ -647,6 +679,9 @@ var PasteCleanup = /** @class */ (function () {
             this.setImageProperties(allImg[i]);
         }
         this.addTempClass(clipBoardElem);
+        if (clipBoardElem.querySelectorAll('picture').length > 0) {
+            this.processPictureElement(clipBoardElem);
+        }
         if (clipBoardElem.textContent !== '' || !isNOU(clipBoardElem.querySelector('img')) ||
             !isNOU(clipBoardElem.querySelector('table'))) {
             var tempWrapperElem = this.parent.createElement('div');
@@ -678,11 +713,26 @@ var PasteCleanup = /** @class */ (function () {
                 }
             }
             this.parent.trigger(events.afterPasteCleanup, { value: clipBoardElem.innerHTML, filesData: filesData }, function (updatedArgs) { value = updatedArgs.value; });
-            clipBoardElem.innerHTML = value;
-            clipBoardElem = this.addTableClass(clipBoardElem);
+            clipBoardElem.innerHTML = this.parent.addAnchorAriaLabel(value);
+            clipBoardElem = this.addTableClass(clipBoardElem, args.pasteTableSource);
             this.parent.formatter.editorManager.execCommand('inserthtml', 'pasteCleanup', args, function (returnArgs) {
                 extend(args, { elements: returnArgs.elements, imageElements: returnArgs.imgElem }, true);
                 _this.parent.formatter.onSuccess(_this.parent, args);
+                if (!isNOU(returnArgs.elements) && !isNOU(returnArgs.imgElem) &&
+                    returnArgs.imgElem.length > 0) {
+                    var pasteContent = returnArgs.elements;
+                    var imageContent = returnArgs.imgElem;
+                    var lastElementChild = _this.findLastElement(pasteContent[pasteContent.length - 1]);
+                    var isImageAtLast = !isNOU(lastElementChild) ? lastElementChild.nodeName === 'IMG' : false;
+                    if (isImageAtLast || pasteContent[pasteContent.length - 1] === imageContent[imageContent.length - 1]) {
+                        _this.parent.notify(events.insertCompleted, {
+                            args: args.event,
+                            type: 'Images',
+                            isNotify: true,
+                            elements: imageContent[imageContent.length - 1]
+                        });
+                    }
+                }
             }, clipBoardElem, null, null, this.parent.enterKey);
             this.removeTempClass();
             this.parent.notify(events.toolbarRefresh, {});
@@ -737,12 +787,16 @@ var PasteCleanup = /** @class */ (function () {
             }
         }
     };
-    PasteCleanup.prototype.addTableClass = function (element) {
+    PasteCleanup.prototype.addTableClass = function (element, source) {
+        source = isNOU(source) ? '' : source;
         var tableElement = element.querySelectorAll('table');
         for (var i = 0; i < tableElement.length; i++) {
-            if (!tableElement[i].classList.contains('e-rte-table')) {
+            if (!tableElement[i].classList.contains('e-rte-table') && (source === 'html' || source === '')) {
                 tableElement[i].classList.add('e-rte-table');
             }
+            else if (source && source !== 'html') {
+                tableElement[i].classList.add('e-rte-paste-' + source + '-table');
+            }
         }
         return element;
     };
@@ -786,7 +840,7 @@ var PasteCleanup = /** @class */ (function () {
         return value;
     };
     //Plain Formatting
-    PasteCleanup.prototype.plainFormatting = function (value, args) {
+    PasteCleanup.prototype.plainFormatting = function (value, args, isClipboardHTMLDataNull) {
         var _this = this;
         var clipBoardElem = this.parent.createElement('div', { className: 'pasteContent', styles: 'display:inline;' });
         clipBoardElem.innerHTML = value;
@@ -824,6 +878,13 @@ var PasteCleanup = /** @class */ (function () {
             this.saveSelection.restore();
             clipBoardElem.innerHTML = this.sanitizeHelper(clipBoardElem.innerHTML);
             this.addTempClass(clipBoardElem);
+            this.removingComments(clipBoardElem);
+            if (this.parent.enterKey === 'BR' && !isClipboardHTMLDataNull) {
+                clipBoardElem = this.reframeToBrContent(clipBoardElem);
+            }
+            else if (this.parent.enterKey === 'DIV') {
+                clipBoardElem.innerHTML = clipBoardElem.innerHTML.replace(/<p class="pasteContent_RTE">/g, '<div>').replace(/<\/p>/g, '</div>');
+            }
             this.parent.trigger(events.afterPasteCleanup, { value: clipBoardElem.innerHTML, filesData: null }, function (updatedArgs) { value = updatedArgs.value; });
             clipBoardElem.innerHTML = value;
             this.parent.formatter.editorManager.execCommand('inserthtml', 'pasteCleanup', args, function (returnArgs) {
@@ -838,6 +899,41 @@ var PasteCleanup = /** @class */ (function () {
             this.parent.formatter.onSuccess(this.parent, args);
         }
     };
+    PasteCleanup.prototype.removingComments = function (elm) {
+        var innerElement = elm.innerHTML;
+        innerElement = innerElement.replace(/<!--[\s\S]*?-->/g, '');
+        elm.innerHTML = innerElement;
+    };
+    PasteCleanup.prototype.reframeToBrContent = function (clipBoardElem) {
+        var newClipBoardElem = this.parent.createElement('div', { className: 'pasteContent', styles: 'display:inline;' });
+        while (!isNOU(clipBoardElem.firstChild)) {
+            var brElem = this.parent.createElement('br');
+            var currentFirstChild = clipBoardElem.firstChild;
+            if (currentFirstChild.nodeName === '#text') {
+                var isNextSibPresent = !isNOU(currentFirstChild.nextSibling);
+                newClipBoardElem.appendChild(currentFirstChild);
+                if (isNextSibPresent) {
+                    newClipBoardElem.appendChild(brElem);
+                }
+            }
+            else {
+                var isCurrentNodeBRElm = currentFirstChild.nodeName === 'BR';
+                if (isCurrentNodeBRElm) {
+                    newClipBoardElem.appendChild(currentFirstChild);
+                }
+                else {
+                    newClipBoardElem.appendChild(currentFirstChild.childNodes[0]);
+                }
+                if (!isNOU(currentFirstChild) && !isNOU(currentFirstChild.nextSibling)) {
+                    newClipBoardElem.appendChild(brElem);
+                }
+                if (!isCurrentNodeBRElm && !isNOU(currentFirstChild)) {
+                    detach(currentFirstChild);
+                }
+            }
+        }
+        return newClipBoardElem;
+    };
     PasteCleanup.prototype.getTextContent = function (clipBoardElem) {
         for (var i = 0; i < this.blockNode.length; i++) {
             var inElem = clipBoardElem.querySelectorAll(this.blockNode[i]);
@@ -885,14 +981,16 @@ var PasteCleanup = /** @class */ (function () {
         for (var i = 0; i < this.inlineNode.length; i++) {
             var inElem = clipBoardElem.querySelectorAll(this.inlineNode[i]);
             for (var j = 0; j < inElem.length; j++) {
-                var parElem = void 0;
-                for (var k = 0; k < inElem[j].childNodes.length; k++) {
-                    parElem = inElem[j].childNodes[k].parentElement;
-                    inElem[j].childNodes[k].parentElement.parentElement.insertBefore(inElem[j].childNodes[k], inElem[j].childNodes[k].parentElement);
-                    k--;
-                }
-                if (!isNOU(parElem)) {
-                    detach(parElem);
+                if (!(inElem[j] === clipBoardElem.firstChild && inElem[j].nodeName === 'SPAN')) {
+                    var parElem = void 0;
+                    for (var k = 0; k < inElem[j].childNodes.length; k++) {
+                        parElem = inElem[j].childNodes[k].parentElement;
+                        inElem[j].childNodes[k].parentElement.parentElement.insertBefore(inElem[j].childNodes[k], inElem[j].childNodes[k].parentElement);
+                        k--;
+                    }
+                    if (!isNOU(parElem)) {
+                        detach(parElem);
+                    }
                 }
             }
         }
@@ -1033,6 +1131,36 @@ var PasteCleanup = /** @class */ (function () {
         }
         return clipBoardElem;
     };
+    PasteCleanup.prototype.findLastElement = function (element) {
+        if (!isNOU(element) && !isNOU(element.lastElementChild)) {
+            var lastChild = element.lastElementChild;
+            while (lastChild && lastChild.lastElementChild) {
+                lastChild = lastChild.lastElementChild;
+            }
+            return lastChild;
+        }
+        return null;
+    };
+    PasteCleanup.prototype.processPictureElement = function (clipBoardElem) {
+        var pictureElems = clipBoardElem.querySelectorAll('picture');
+        for (var i = 0; i < pictureElems.length; i++) {
+            var imgElem = pictureElems[i].querySelector('img');
+            var sourceElems = pictureElems[i].querySelectorAll('source');
+            if (imgElem && imgElem.getAttribute('src')) {
+                var srcValue = imgElem.getAttribute('src');
+                var url = new URL(srcValue);
+                for (var j = 0; j < sourceElems.length; j++) {
+                    var srcset = sourceElems[j].getAttribute('srcset');
+                    if (srcset) {
+                        if (srcset.indexOf('http') === -1) {
+                            var fullPath = url.origin + srcset;
+                            sourceElems[j].setAttribute('srcset', fullPath);
+                        }
+                    }
+                }
+            }
+        }
+    };
     /**
      * For internal use only - Get the module name.
      *

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

@@ -72,6 +72,7 @@ export declare class QuickToolbar {
     hideQuickToolbars(): void;
     private deBounce;
     private mouseUpHandler;
+    private isEmbedVidElem;
     private keyDownHandler;
     private inlineQTBarMouseDownHandler;
     private keyUpHandler;
@@ -137,4 +138,11 @@ export declare class QuickToolbar {
      * @hidden
      */
     private getModuleName;
+    /**
+     *
+     * @returns {BaseQuickToolbar[]} - specifies the quick toolbar instance.
+     * @hidden
+     * @private
+     */
+    getQuickToolbarInstance(): BaseQuickToolbar[];
 }

package/src/rich-text-editor/actions/quick-toolbar.js

@@ -4,7 +4,7 @@ import * as events from '../base/constant';
 import { pageYOffset, hasClass, isIDevice } from '../base/util';
 import { BaseQuickToolbar } from './base-quick-toolbar';
 import { PopupRenderer } from '../renderer/popup-renderer';
-import { CLS_INLINE_POP, CLS_INLINE } from '../base/classes';
+import { CLS_INLINE_POP, CLS_INLINE, CLS_VID_CLICK_ELEM } from '../base/classes';
 /**
  * `Quick toolbar` module is used to handle Quick toolbar actions.
  */
@@ -47,7 +47,7 @@ var QuickToolbar = /** @class */ (function () {
             toolbarItems: items,
             mode: mode,
             renderType: type,
-            cssClass: this.parent.cssClass
+            cssClass: this.parent.getCssClass()
         };
     };
     /**
@@ -149,7 +149,7 @@ var QuickToolbar = /** @class */ (function () {
      * @deprecated
      */
     QuickToolbar.prototype.showInlineQTBar = function (x, y, target) {
-        if (isNOU(this.parent) || this.parent.readonly || target.tagName.toLowerCase() === 'img') {
+        if (isNOU(this.parent) || this.parent.readonly || target.tagName.toLowerCase() === 'img' || this.inlineQTBar.element.querySelector('.e-rte-color-content')) {
             return;
         }
         this.inlineQTBar.showPopup(x, y, target);
@@ -238,6 +238,9 @@ var QuickToolbar = /** @class */ (function () {
             }
         }
         if (!isNOU(this.textQTBar) && !isNOU(this.parent.quickToolbarSettings.text) && !this.parent.inlineMode.enable) {
+            if (!isNOU(e) && !isNOU(e.name) && e.name === 'sourceCodeMouseDown') {
+                return;
+            }
             var args = e.args.touches ?
                 e.args.changedTouches[0] : e.args;
             var target = e.args.target;
@@ -248,7 +251,7 @@ var QuickToolbar = /** @class */ (function () {
             this.offsetY = pageYOffset(args, this.parent.element, this.parent.iframeSettings.enable);
             var range = this.parent.getRange();
             if ((range.endContainer.parentElement.tagName === range.startContainer.parentElement.tagName && (range.startContainer.parentElement.tagName === 'A' && range.endContainer.parentElement.tagName === 'A')) ||
-                (target.tagName === 'IMG') || (target.tagName === 'VIDEO') || (target.tagName === 'AUDIO') || (target.childNodes[0].nodeType === 1 && target.childNodes[0].classList.contains('e-rte-audio')) ||
+                (target.tagName === 'IMG') || (target.tagName === 'VIDEO' || this.isEmbedVidElem(target)) || (target.tagName === 'AUDIO') || (target.childNodes[0] && target.childNodes[0].nodeType === 1 && target.childNodes[0].classList.contains('e-rte-audio')) ||
                 (this.parent.getRange().startOffset === this.parent.getRange().endOffset)) {
                 return;
             }
@@ -256,10 +259,29 @@ var QuickToolbar = /** @class */ (function () {
             this.textQTBar.showPopup(this.offsetX, this.offsetY, target, 'text');
         }
     };
-    QuickToolbar.prototype.keyDownHandler = function () {
-        if ((this.parent.inlineMode.enable && (!Browser.isDevice || isIDevice()))
-            && !isNullOrUndefined(select('.' + CLS_INLINE_POP, document))) {
-            this.hideInlineQTBar();
+    QuickToolbar.prototype.isEmbedVidElem = function (target) {
+        if ((target && target.nodeType !== 3 && target.nodeName !== 'BR' && (target.classList && target.classList.contains(CLS_VID_CLICK_ELEM))) ||
+            (target && target.nodeName === 'IFRAME')) {
+            return true;
+        }
+        else {
+            return false;
+        }
+    };
+    QuickToolbar.prototype.keyDownHandler = function (e) {
+        var preventHide = e.args.altKey;
+        if (this.parent.inlineMode.enable && e.args.metaKey && e.args.keyCode === 65) {
+            this.showInlineQTBar(this.offsetX, this.offsetY, e.args.target);
+            return;
+        }
+        if (!preventHide) {
+            if ((this.parent.inlineMode.enable && (!Browser.isDevice || isIDevice()))
+                && !isNullOrUndefined(select('.' + CLS_INLINE_POP, document))) {
+                this.hideInlineQTBar();
+            }
+            if (this.textQTBar && !hasClass(this.textQTBar.element, 'e-popup-close')) {
+                this.textQTBar.hidePopup();
+            }
         }
     };
     QuickToolbar.prototype.inlineQTBarMouseDownHandler = function () {
@@ -274,8 +296,8 @@ var QuickToolbar = /** @class */ (function () {
         }
     };
     QuickToolbar.prototype.keyUpHandler = function (e) {
+        var args = e.args;
         if (this.parent.inlineMode.enable && !Browser.isDevice) {
-            var args = e.args;
             if (this.parent.inlineMode.onSelection) {
                 if (this.parent.getSelection().length > 0) {
                     if ((args.ctrlKey && args.keyCode === 65) || (args.shiftKey && (args.keyCode === 33 || args.keyCode === 34 ||
@@ -288,6 +310,13 @@ var QuickToolbar = /** @class */ (function () {
             }
             this.deBounce(this.offsetX, this.offsetY, args.target);
         }
+        if (this.parent.quickToolbarSettings.text && !Browser.isDevice) {
+            if ((args.ctrlKey && args.keyCode === 65) || (args.shiftKey && (args.keyCode === 33 || args.keyCode === 34 ||
+                args.keyCode === 35 || args.keyCode === 36 || args.keyCode === 37 || args.keyCode === 38 ||
+                args.keyCode === 39 || args.keyCode === 40))) {
+                this.textQTBar.showPopup(this.offsetX, this.offsetY, args.target, 'text');
+            }
+        }
     };
     QuickToolbar.prototype.selectionChangeHandler = function (e) {
         var _this = this;
@@ -447,6 +476,15 @@ var QuickToolbar = /** @class */ (function () {
             if (this.videoQTBar && !hasClass(this.videoQTBar.element, 'e-popup-close')) {
                 this.videoQTBar.hidePopup();
             }
+            if (this.tableQTBar && !hasClass(this.tableQTBar.element, 'e-popup-close')) {
+                this.tableQTBar.hidePopup();
+            }
+            if (this.linkQTBar && !hasClass(this.linkQTBar.element, 'e-popup-close')) {
+                this.linkQTBar.hidePopup();
+            }
+            if (this.textQTBar && !hasClass(this.textQTBar.element, 'e-popup-close')) {
+                this.textQTBar.hidePopup();
+            }
         }
     };
     QuickToolbar.prototype.onIframeMouseDown = function () {
@@ -499,6 +537,9 @@ var QuickToolbar = /** @class */ (function () {
      * @deprecated
      */
     QuickToolbar.prototype.removeEventListener = function () {
+        if (this.deBouncer) {
+            clearTimeout(this.deBouncer);
+        }
         if (this.parent.isDestroyed) {
             return;
         }
@@ -519,9 +560,6 @@ var QuickToolbar = /** @class */ (function () {
         this.parent.off(events.rtlMode, this.setRtl);
         this.parent.off(events.bindCssClass, this.setCssClass);
         this.parent.off(events.hidePopup, this.hideQuickToolbars);
-        if (this.deBouncer) {
-            clearTimeout(this.deBouncer);
-        }
     };
     /**
      * Called internally if any of the property value changed.
@@ -571,6 +609,15 @@ var QuickToolbar = /** @class */ (function () {
     QuickToolbar.prototype.getModuleName = function () {
         return 'quickToolbar';
     };
+    /**
+     *
+     * @returns {BaseQuickToolbar[]} - specifies the quick toolbar instance.
+     * @hidden
+     * @private
+     */
+    QuickToolbar.prototype.getQuickToolbarInstance = function () {
+        return [this.linkQTBar, this.imageQTBar, this.audioQTBar, this.videoQTBar, this.tableQTBar, this.textQTBar, this.inlineQTBar];
+    };
     return QuickToolbar;
 }());
 export { QuickToolbar };

package/src/rich-text-editor/actions/resize.js

@@ -71,7 +71,8 @@ var Resize = /** @class */ (function () {
             this.parent.element.style.width = (!this.parent.enableRtl) ? eventType.clientX - boundRect.left + 'px' : boundRect.right - eventType.clientX + 'px';
         }
         if (!this.parent.toolbarSettings.enable) {
-            this.parent.setContentHeight('', false);
+            var isExpand = this.parent.element.querySelectorAll('.e-toolbar-extended.e-popup-open').length > 0 ? true : false;
+            this.parent.setContentHeight('Resize', isExpand);
         }
         this.parent.refreshUI();
     };

package/src/rich-text-editor/actions/toolbar-action.js

@@ -39,7 +39,7 @@ var ToolbarAction = /** @class */ (function () {
         if (args.item.command === 'Lists') {
             if (args.originalEvent.target.classList.contains('e-caret') &&
                 (args.originalEvent.target.parentElement.classList.contains('e-rte-bulletformatlist-dropdown') || args.originalEvent.target.parentElement.classList.contains('e-rte-numberformatlist-dropdown'))) {
-                args.item.command = args.item.subCommand = null;
+                return;
             }
         }
         this.parent.notify(events.htmlToolbarClick, args);

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

@@ -4,6 +4,7 @@ import { IUpdateItemsModel } from '../base/interface';
 import { ServiceLocator } from '../services/service-locator';
 import { RendererFactory } from '../services/renderer-factory';
 import { BaseToolbar } from './base-toolbar';
+import { DropDownButtons } from './dropdown-buttons';
 import { RichTextEditorModel } from '../base/rich-text-editor-model';
 /**
  * `Toolbar` module is used to handle Toolbar actions.
@@ -22,7 +23,7 @@ export declare class Toolbar {
     private isTransformChild;
     private contentRenderer;
     protected toolbarRenderer: IRenderer;
-    private dropDownModule;
+    dropDownModule: DropDownButtons;
     private toolbarActionModule;
     protected renderFactory: RendererFactory;
     private keyBoardModule;
@@ -150,13 +151,12 @@ export declare class Toolbar {
      */
     destroy(): void;
     private moduleDestroy;
-    private scrollHandler;
-    private getDOMVisibility;
     private mouseDownHandler;
     private focusChangeHandler;
     private dropDownBeforeOpenHandler;
     private tbFocusHandler;
     private toolbarClickHandler;
+    private adjustContentHeight;
     protected wireEvents(): void;
     protected unWireEvents(): void;
     protected addEventListener(): void;