@syncfusion/ej2-richtexteditor 19.3.47 → 19.3.57

package/dist/global/index.d.ts

@@ -1,6 +1,6 @@
 /*!
 *  filename: index.d.ts
-*  version : 19.3.47
+*  version : 19.3.57
 *  Copyright Syncfusion Inc. 2001 - 2020. All rights reserved.
 *  Use of this code is subject to the terms of our license.
 *  A copy of the current license can be obtained at any time by e-mailing

package/package.json

@@ -1,8 +1,8 @@
 {
   "_from": "@syncfusion/ej2-richtexteditor@*",
-  "_id": "@syncfusion/ej2-richtexteditor@19.3.46",
+  "_id": "@syncfusion/ej2-richtexteditor@19.3.55",
   "_inBundle": false,
-  "_integrity": "sha512-KQjXb4GwcPJNBiezc3uprAR1P3Z0O2zn0ponoX5Y6KdSgN06/h83YeBbgoOVjQTVtK2ni97KMliyopHBJ8IsFQ==",
+  "_integrity": "sha512-D/DsRzXeFfRt5Dpl70MOKjgCZWbAvgLyeukh+TFdyGjtKeX3+QOcYK+UqdvSmOnjU1K006D1qL8HAWJJ+qko8w==",
   "_location": "/@syncfusion/ej2-richtexteditor",
   "_phantomChildren": {},
   "_requested": {
@@ -26,8 +26,8 @@
     "/@syncfusion/ej2-react-richtexteditor",
     "/@syncfusion/ej2-vue-richtexteditor"
   ],
-  "_resolved": "http://nexus.syncfusion.com/repository/ej2-hotfix/@syncfusion/ej2-richtexteditor/-/ej2-richtexteditor-19.3.46.tgz",
-  "_shasum": "ce6564f5c1887ff8ddd139f2fbbf40ccbacb99fe",
+  "_resolved": "http://nexus.syncfusion.com/repository/ej2-hotfix-new/@syncfusion/ej2-richtexteditor/-/ej2-richtexteditor-19.3.55.tgz",
+  "_shasum": "a67a4621ca30dd75181f6d3bf53341c29b0d0e0c",
   "_spec": "@syncfusion/ej2-richtexteditor@*",
   "_where": "/jenkins/workspace/automation_release_19.1.0.1-ZPMUBNQ6AUYH6YGEFBPVYMEQLRRW2SLD4XCZ6GATNZJFYJ3RIAOA/packages/included",
   "author": {
@@ -38,13 +38,13 @@
   },
   "bundleDependencies": false,
   "dependencies": {
-    "@syncfusion/ej2-base": "~19.3.47",
-    "@syncfusion/ej2-buttons": "~19.3.44",
-    "@syncfusion/ej2-filemanager": "~19.3.44",
-    "@syncfusion/ej2-inputs": "~19.3.47",
-    "@syncfusion/ej2-navigations": "~19.3.46",
-    "@syncfusion/ej2-popups": "~19.3.47",
-    "@syncfusion/ej2-splitbuttons": "~19.3.47"
+    "@syncfusion/ej2-base": "~19.3.56",
+    "@syncfusion/ej2-buttons": "~19.3.53",
+    "@syncfusion/ej2-filemanager": "~19.3.55",
+    "@syncfusion/ej2-inputs": "~19.3.57",
+    "@syncfusion/ej2-navigations": "~19.3.57",
+    "@syncfusion/ej2-popups": "~19.3.57",
+    "@syncfusion/ej2-splitbuttons": "~19.3.53"
   },
   "deprecated": false,
   "description": "Essential JS 2 RichTextEditor component",
@@ -70,6 +70,6 @@
     "url": "git+https://github.com/syncfusion/ej2-javascript-ui-controls.git"
   },
   "typings": "index.d.ts",
-  "version": "19.3.47",
+  "version": "19.3.57",
   "sideEffects": false
 }

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

@@ -370,7 +370,15 @@ var InsertHtml = /** @class */ (function () {
                 tempSpan.parentNode.replaceChild(node, tempSpan);
             }
             else {
-                var splitedElm = nodeCutter.GetSpliceNode(range, blockNode);
+                var currentNode = nodes[nodes.length - 1];
+                var splitedElm = void 0;
+                if ((currentNode.nodeName === 'BR' || currentNode.nodeName === 'HR') && !isNOU(currentNode.parentElement) &&
+                    currentNode.parentElement.textContent.trim().length === 0 && !node.classList.contains('pasteContent')) {
+                    splitedElm = currentNode;
+                }
+                else {
+                    splitedElm = nodeCutter.GetSpliceNode(range, blockNode);
+                }
                 splitedElm.parentNode.replaceChild(node, splitedElm);
             }
         }

package/src/rich-text-editor/actions/dropdown-buttons.js

@@ -206,6 +206,11 @@ var DropDownButtons = /** @class */ (function () {
             var prop = _a[_i];
             switch (prop) {
                 case 'fontFamily':
+                    if (this.parent.inlineMode.enable) {
+                        if (!isNullOrUndefined(this.parent.fontFamily.default)) {
+                            this.getEditNode().style.fontFamily = this.parent.fontFamily.default;
+                        }
+                    }
                     if (this.fontNameDropDown) {
                         for (var _b = 0, _c = Object.keys(newProp.fontFamily); _b < _c.length; _b++) {
                             var fontFamily = _c[_b];
@@ -237,6 +242,11 @@ var DropDownButtons = /** @class */ (function () {
                     }
                     break;
                 case 'fontSize':
+                    if (this.parent.inlineMode) {
+                        if (!isNullOrUndefined(this.parent.fontSize.default)) {
+                            this.getEditNode().style.fontSize = this.parent.fontSize.default;
+                        }
+                    }
                     if (this.fontSizeDropDown) {
                         for (var _d = 0, _e = Object.keys(newProp.fontSize); _d < _e.length; _d++) {
                             var fontSize = _e[_d];

package/src/rich-text-editor/actions/enter-key.d.ts

@@ -13,6 +13,7 @@ export declare class EnterKeyAction {
     private removeEventListener;
     private getRangeNode;
     private enterHandler;
+    private insertBRElement;
     private insertFocusContent;
     private createInsertElement;
 }

package/src/rich-text-editor/actions/enter-key.js

@@ -89,12 +89,13 @@ var EnterKeyAction = /** @class */ (function () {
                             _this.parent.formatter.editorManager.nodeSelection.setCursorPoint(_this.parent.contentModule.getDocument(), _this.range.startContainer.childNodes[_this.range.startOffset], 0);
                             _this.getRangeNode();
                         }
-                        if (_this.parent.enterKey === 'P' || _this.parent.enterKey === 'DIV' ||
+                        if ((_this.parent.enterKey === 'P' && !shiftKey_1) || (_this.parent.enterKey === 'DIV' && !shiftKey_1) ||
                             (_this.parent.shiftEnterKey === 'P' && shiftKey_1) ||
                             (_this.parent.shiftEnterKey === 'DIV' && shiftKey_1)) {
                             var nearBlockNode = _this.parent.formatter.editorManager.domNode.blockParentNode(_this.startNode);
                             var isImageNode = false;
-                            if (_this.range.startOffset === 0 && _this.range.endOffset === 0 && !(!isNOU(_this.range.startContainer.previousSibling) && _this.range.startContainer.previousSibling.nodeName === 'IMG')) {
+                            if (_this.range.startOffset === 0 && _this.range.endOffset === 0 && !(!isNOU(_this.range.startContainer.previousSibling) &&
+                                (_this.range.startContainer.previousSibling.nodeName === 'IMG' || _this.range.startContainer.previousSibling.nodeName === 'BR'))) {
                                 var isNearBlockLengthZero = void 0;
                                 var newElem = void 0;
                                 if (_this.range.startContainer.nodeName === 'IMG') {
@@ -129,6 +130,7 @@ var EnterKeyAction = /** @class */ (function () {
                                         detach(nearBlockNode);
                                     }
                                 }
+                                _this.parent.formatter.editorManager.nodeSelection.setCursorPoint(_this.parent.contentModule.getDocument(), insertElem.nextElementSibling, 0);
                             }
                             else if (nearBlockNode.textContent.length === 0 && !(!isNOU(nearBlockNode.childNodes[0]) && nearBlockNode.childNodes[0].nodeName === 'IMG')) {
                                 if (!isNOU(nearBlockNode.children[0]) && nearBlockNode.children[0].tagName !== 'BR') {
@@ -167,7 +169,7 @@ var EnterKeyAction = /** @class */ (function () {
                             }
                             e.args.preventDefault();
                         }
-                        if (_this.parent.enterKey === 'BR' && !shiftKey_1) {
+                        if ((_this.parent.enterKey === 'BR' && !shiftKey_1) || (_this.parent.shiftEnterKey === 'BR' && shiftKey_1)) {
                             var currentParent = void 0;
                             if (!_this.parent.formatter.editorManager.domNode.isBlockNode(_this.startNode)) {
                                 var currentNode = _this.startNode;
@@ -183,10 +185,16 @@ var EnterKeyAction = /** @class */ (function () {
                                 currentParent = _this.startNode;
                             }
                             var isEmptyBrInserted = false;
+                            var currentParentLastChild = currentParent.lastChild;
+                            while (!isNOU(currentParentLastChild) && !(currentParentLastChild.nodeName === '#text')) {
+                                currentParentLastChild = currentParentLastChild.lastChild;
+                            }
+                            var isLastNodeLength = _this.range.startContainer === currentParentLastChild ?
+                                _this.range.startContainer.textContent.length : currentParent.textContent.length;
                             if (currentParent !== _this.parent.inputElement &&
                                 _this.parent.formatter.editorManager.domNode.isBlockNode(currentParent) &&
                                 _this.range.startOffset === _this.range.endOffset &&
-                                _this.range.startOffset === currentParent.textContent.length) {
+                                _this.range.startOffset === isLastNodeLength) {
                                 var outerBRElem = _this.parent.createElement('br');
                                 _this.parent.formatter.editorManager.domNode.insertAfter(outerBRElem, currentParent);
                                 _this.parent.formatter.editorManager.nodeSelection.setCursorPoint(_this.parent.contentModule.getDocument(), outerBRElem, 0);
@@ -216,34 +224,12 @@ var EnterKeyAction = /** @class */ (function () {
                                         isEmptyBrInserted = true;
                                     }
                                     else {
-                                        newElem = _this.parent.formatter.editorManager.nodeCutter.SplitNode(_this.range, currentParent, true);
-                                        newElem.parentElement.insertBefore(outerBRElem, newElem);
-                                        _this.insertFocusContent();
+                                        _this.insertBRElement();
                                     }
                                 }
                             }
                             else {
-                                var brElm = _this.parent.createElement('br');
-                                if (_this.startNode.nodeName === 'BR' && _this.endNode.nodeName === 'BR' && _this.range.startOffset === 0 && _this.range.startOffset === _this.range.endOffset) {
-                                    _this.parent.formatter.editorManager.domNode.insertAfter(brElm, _this.startNode);
-                                    isEmptyBrInserted = true;
-                                }
-                                else {
-                                    if (_this.startNode === _this.parent.inputElement && !isNOU(_this.range.startContainer.previousSibling) &&
-                                        _this.range.startContainer.previousSibling.nodeName === 'BR' && _this.range.startContainer.textContent.length === 0) {
-                                        isEmptyBrInserted = true;
-                                    }
-                                    _this.range.insertNode(brElm);
-                                }
-                                if (isEmptyBrInserted || (!isNOU(brElm.nextElementSibling) && brElm.nextElementSibling.tagName === 'BR') || (!isNOU(brElm.nextSibling) && brElm.nextSibling.textContent.length > 0)) {
-                                    _this.parent.formatter.editorManager.nodeSelection.setCursorPoint(_this.parent.contentModule.getDocument(), !isNOU(brElm.nextSibling) ? brElm.nextSibling : brElm, 0);
-                                    isEmptyBrInserted = false;
-                                }
-                                else {
-                                    var brElm2 = _this.parent.createElement('br');
-                                    _this.range.insertNode(brElm2);
-                                    _this.parent.formatter.editorManager.nodeSelection.setCursorPoint(_this.parent.contentModule.getDocument(), brElm, 0);
-                                }
+                                _this.insertBRElement();
                             }
                             e.args.preventDefault();
                         }
@@ -253,6 +239,30 @@ var EnterKeyAction = /** @class */ (function () {
             }
         }
     };
+    EnterKeyAction.prototype.insertBRElement = function () {
+        var isEmptyBrInserted = false;
+        var brElm = this.parent.createElement('br');
+        if (this.startNode.nodeName === 'BR' && this.endNode.nodeName === 'BR' && this.range.startOffset === 0 && this.range.startOffset === this.range.endOffset) {
+            this.parent.formatter.editorManager.domNode.insertAfter(brElm, this.startNode);
+            isEmptyBrInserted = true;
+        }
+        else {
+            if (this.startNode === this.parent.inputElement && !isNOU(this.range.startContainer.previousSibling) &&
+                this.range.startContainer.previousSibling.nodeName === 'BR' && this.range.startContainer.textContent.length === 0) {
+                isEmptyBrInserted = true;
+            }
+            this.range.insertNode(brElm);
+        }
+        if (isEmptyBrInserted || (!isNOU(brElm.nextElementSibling) && brElm.nextElementSibling.tagName === 'BR') || (!isNOU(brElm.nextSibling) && brElm.nextSibling.textContent.length > 0)) {
+            this.parent.formatter.editorManager.nodeSelection.setCursorPoint(this.parent.contentModule.getDocument(), !isNOU(brElm.nextSibling) ? brElm.nextSibling : brElm, 0);
+            isEmptyBrInserted = false;
+        }
+        else {
+            var brElm2 = this.parent.createElement('br');
+            this.range.insertNode(brElm2);
+            this.parent.formatter.editorManager.nodeSelection.setCursorPoint(this.parent.contentModule.getDocument(), brElm, 0);
+        }
+    };
     EnterKeyAction.prototype.insertFocusContent = function () {
         if (this.range.startContainer.textContent.length === 0) {
             if (this.range.startContainer.nodeName === '#text') {

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

@@ -149,7 +149,7 @@ var HtmlEditor = /** @class */ (function () {
             e.args.action === 'enter' ||
             e.args.keyCode === 13) {
             this.spaceLink(e.args);
-            if (this.parent.editorMode === 'HTML' && !((this.parent.shiftEnterKey === 'BR' && e.args.shiftKey))) {
+            if (this.parent.editorMode === 'HTML') {
                 this.parent.notify(events.enterHandler, { args: e.args });
             }
         }
@@ -426,7 +426,7 @@ var HtmlEditor = /** @class */ (function () {
             var divElement = this.parent.createElement('div');
             divElement.setAttribute('class', 'pasteContent');
             divElement.style.display = 'inline';
-            divElement.innerHTML = contentInnerElem;
+            divElement.innerHTML = contentInnerElem.replace('&para', '&para');
             var paraElem = divElement.querySelectorAll('span, p');
             for (var i = 0; i < paraElem.length; i++) {
                 var splitTextContent = paraElem[i].innerHTML.split(' ');

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

@@ -38,6 +38,7 @@ export declare class QuickToolbar {
     createQTBar(popupType: string, mode: string, items: (string | IToolbarItems)[], type: RenderType): BaseQuickToolbar;
     private initializeQuickToolbars;
     private onMouseDown;
+    private keyUpQT;
     private renderQuickToolbars;
     private renderInlineQuickToolbar;
     /**

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

@@ -80,6 +80,11 @@ var QuickToolbar = /** @class */ (function () {
         this.parent.isBlur = false;
         this.parent.isRTE = true;
     };
+    QuickToolbar.prototype.keyUpQT = function (e) {
+        if (e.which == 27) {
+            this.hideQuickToolbars();
+        }
+    };
     QuickToolbar.prototype.renderQuickToolbars = function () {
         if (this.linkQTBar || this.imageQTBar || this.textQTBar || this.tableQTBar) {
             return;
@@ -94,15 +99,19 @@ var QuickToolbar = /** @class */ (function () {
         this.renderFactory.addRenderer(RenderType.TableToolbar, this.tableQTBar);
         if (this.linkQTBar) {
             EventHandler.add(this.linkQTBar.element, 'mousedown', this.onMouseDown, this);
+            EventHandler.add(this.linkQTBar.element, 'keyup', this.keyUpQT, this);
         }
         if (this.imageQTBar) {
             EventHandler.add(this.imageQTBar.element, 'mousedown', this.onMouseDown, this);
+            EventHandler.add(this.imageQTBar.element, 'keyup', this.keyUpQT, this);
         }
         if (this.textQTBar) {
             EventHandler.add(this.textQTBar.element, 'mousedown', this.onMouseDown, this);
+            EventHandler.add(this.textQTBar.element, 'keyup', this.keyUpQT, this);
         }
         if (this.tableQTBar) {
             EventHandler.add(this.tableQTBar.element, 'mousedown', this.onMouseDown, this);
+            EventHandler.add(this.tableQTBar.element, 'keyup', this.keyUpQT, this);
         }
     };
     QuickToolbar.prototype.renderInlineQuickToolbar = function () {
@@ -111,6 +120,7 @@ var QuickToolbar = /** @class */ (function () {
             this.inlineQTBar = this.createQTBar('Inline', 'MultiRow', this.parent.toolbarSettings.items, RenderType.InlineToolbar);
             this.renderFactory.addRenderer(RenderType.InlineToolbar, this.inlineQTBar);
             EventHandler.add(this.inlineQTBar.element, 'mousedown', this.onMouseDown, this);
+            EventHandler.add(this.inlineQTBar.element, 'keyup', this.keyUpQT, this);
         }
     };
     /**
@@ -124,7 +134,7 @@ var QuickToolbar = /** @class */ (function () {
 
      */
     QuickToolbar.prototype.showInlineQTBar = function (x, y, target) {
-        if (this.parent.readonly) {
+        if (this.parent.readonly || target.tagName.toLowerCase() === "img") {
             return;
         }
         this.inlineQTBar.showPopup(x, y, target);
@@ -265,22 +275,27 @@ var QuickToolbar = /** @class */ (function () {
     QuickToolbar.prototype.destroy = function () {
         if (this.linkQTBar) {
             EventHandler.remove(this.linkQTBar.element, 'mousedown', this.onMouseDown);
+            EventHandler.remove(this.linkQTBar.element, 'keyup', this.keyUpQT);
             this.linkQTBar.destroy();
         }
         if (this.textQTBar) {
             EventHandler.remove(this.textQTBar.element, 'mousedown', this.onMouseDown);
+            EventHandler.remove(this.textQTBar.element, 'keyup', this.keyUpQT);
             this.textQTBar.destroy();
         }
         if (this.imageQTBar) {
             EventHandler.remove(this.imageQTBar.element, 'mousedown', this.onMouseDown);
+            EventHandler.remove(this.imageQTBar.element, 'keyup', this.keyUpQT);
             this.imageQTBar.destroy();
         }
         if (this.tableQTBar) {
             EventHandler.remove(this.tableQTBar.element, 'mousedown', this.onMouseDown);
+            EventHandler.remove(this.tableQTBar.element, 'keyup', this.keyUpQT);
             this.tableQTBar.destroy();
         }
         if (this.inlineQTBar) {
             EventHandler.remove(this.inlineQTBar.element, 'mousedown', this.onMouseDown);
+            EventHandler.remove(this.inlineQTBar.element, 'keyup', this.keyUpQT);
             if (isIDevice()) {
                 EventHandler.remove(document, 'selectionchange', this.selectionChangeHandler);
             }

package/src/rich-text-editor/base/interface.d.ts

@@ -576,6 +576,8 @@ export interface ActionBeginEventArgs {
     originalEvent?: MouseEvent | KeyboardEvent;
     /** Defines the event name. */
     name?: string;
+    /** Defines the selection type is dropdown. */
+    selectType?: string;
     /**
      * Defines the url action details.
      *

package/src/rich-text-editor/base/rich-text-editor.js

@@ -1431,8 +1431,7 @@ var RichTextEditor = /** @class */ (function (_super) {
                 this.setProperties({ value: this.valueTemplate });
             }
             else {
-                var compiledString = compile(this.valueTemplate);
-                var compiledTemplate = compiledString({});
+                var compiledTemplate = compile(this.valueTemplate)('', this, 'valueTemplate');
                 for (var i = 0; i < compiledTemplate.length; i++) {
                     var item = compiledTemplate[i];
                     append([item], this.element);

package/src/rich-text-editor/formatter/formatter.js

@@ -88,7 +88,7 @@ var Formatter = /** @class */ (function () {
             || ((args.item.subCommand === 'FontName' || args.item.subCommand === 'FontSize') && args.name === 'dropDownSelect')
             || ((args.item.subCommand === 'BackgroundColor' || args.item.subCommand === 'FontColor')
                 && args.name === 'colorPickerChanged'))) {
-            extend(args, args, { requestType: args.item.subCommand, cancel: false, itemCollection: value }, true);
+            extend(args, args, { requestType: args.item.subCommand, cancel: false, itemCollection: value, selectType: args.name }, true);
             self.trigger(CONSTANT.actionBegin, args, function (actionBeginArgs) {
                 if (!actionBeginArgs.cancel) {
                     if (_this.getUndoRedoStack().length === 0 && actionBeginArgs.item.command !== 'Links'
@@ -106,8 +106,8 @@ var Formatter = /** @class */ (function () {
                     }
                     else {
                         _this.editorManager.observer.notify(CONSTANT.checkUndo, { subCommand: actionBeginArgs.item.subCommand });
-                        _this.editorManager.execCommand(actionBeginArgs.item.command, actionBeginArgs.item.subCommand, event, _this.onSuccess.bind(_this, self), actionBeginArgs.item.value, actionBeginArgs.item.subCommand === 'Pre' && args.name === 'dropDownSelect' ?
-                            { name: args.name } : value, ('#' + self.getID() + ' iframe'), self.enterKey);
+                        _this.editorManager.execCommand(actionBeginArgs.item.command, actionBeginArgs.item.subCommand, event, _this.onSuccess.bind(_this, self), actionBeginArgs.item.value, actionBeginArgs.item.subCommand === 'Pre' && actionBeginArgs.selectType === 'dropDownSelect' ?
+                            { name: actionBeginArgs.selectType } : value, ('#' + self.getID() + ' iframe'), self.enterKey);
                     }
                 }
             });

package/src/rich-text-editor/renderer/image-module.js

@@ -328,10 +328,14 @@ var Image = /** @class */ (function () {
                 img.style.height = expectedY + 'px';
             }
             else if (img.style.width !== '' && img.style.height === '') {
-                img.style.width = ((width / height * expectedY) + width / height).toString() + 'px';
+                var currentWidth = ((width / height * expectedY) + width / height) < (this.parent.inputElement.getBoundingClientRect().right - 32) ?
+                    ((width / height * expectedY) + width / height) : (this.parent.inputElement.getBoundingClientRect().right - 32);
+                img.style.width = currentWidth.toString() + 'px';
             }
             else if (img.style.width !== '') {
-                img.style.width = (width / height * expectedY) + 'px';
+                var currentWidth = (width / height * expectedY) < (this.parent.inputElement.getBoundingClientRect().right - 32) ?
+                    (width / height * expectedY) : (this.parent.inputElement.getBoundingClientRect().right - 32);
+                img.style.width = currentWidth + 'px';
                 img.style.height = expectedY + 'px';
             }
             else {
@@ -440,7 +444,7 @@ var Image = /** @class */ (function () {
     };
     Image.prototype.resizeImgDupPos = function (e) {
         this.imgDupPos = {
-            width: (e.style.height !== '') ? this.imgEle.style.width : e.width + 'px',
+            width: (e.style.width !== '') ? this.imgEle.style.width : e.width + 'px',
             height: (e.style.height !== '') ? this.imgEle.style.height : e.height + 'px'
         };
     };
@@ -608,6 +612,27 @@ var Image = /** @class */ (function () {
                     var src = this.deletedImg[i].src;
                     this.imageRemovePost(src);
                 }
+                if (range.startContainer.nodeType === 3) {
+                    if (originalEvent.code === 'Backspace') {
+                        if (range.startContainer.previousElementSibling && range.startOffset === 0 &&
+                            range.startContainer.previousElementSibling.classList.contains(classes.CLS_CAPTION) &&
+                            range.startContainer.previousElementSibling.classList.contains(classes.CLS_CAPINLINE)) {
+                            detach(range.startContainer.previousElementSibling);
+                        }
+                    }
+                    else {
+                        if (range.startContainer.nextElementSibling &&
+                            range.endContainer.textContent.length === range.endOffset &&
+                            range.startContainer.nextElementSibling.classList.contains(classes.CLS_CAPTION) &&
+                            range.startContainer.nextElementSibling.classList.contains(classes.CLS_CAPINLINE)) {
+                            detach(range.startContainer.nextElementSibling);
+                        }
+                    }
+                }
+                else if ((range.startContainer.nodeType === 1 &&
+                    range.startContainer.querySelector('.' + classes.CLS_CAPTION + '.' + classes.CLS_CAPINLINE))) {
+                    detach(range.startContainer.querySelector('.' + classes.CLS_CAPTION + '.' + classes.CLS_CAPINLINE));
+                }
                 break;
             case 'insert-image':
                 this.openDialog(true, originalEvent, save, selectNodeEle, selectParentEle);
@@ -813,7 +838,7 @@ var Image = /** @class */ (function () {
             var target = args.target;
             this.contentModule = this.rendererFactory.getRenderer(RenderType.Content);
             var isPopupOpen = this.quickToolObj.imageQTBar.element.classList.contains('e-rte-pop');
-            if (target.nodeName === 'IMG' && this.parent.quickToolbarModule && this.parent.getRange().startOffset === this.parent.getRange().endOffset) {
+            if (target.nodeName === 'IMG' && this.parent.quickToolbarModule) {
                 if (isPopupOpen) {
                     return;
                 }
@@ -1054,6 +1079,9 @@ var Image = /** @class */ (function () {
     Image.prototype.imageRemovePost = function (src) {
         var proxy = this;
         var absoluteUrl = '';
+        if (isNOU(this.parent.insertImageSettings.removeUrl) || this.parent.insertImageSettings.removeUrl === '') {
+            return;
+        }
         if (src.indexOf('http://') > -1 || src.indexOf('https://') > -1) {
             absoluteUrl = src;
         }
@@ -1899,6 +1927,7 @@ var Image = /** @class */ (function () {
         imageTag.addEventListener('load', function () {
             _this.parent.trigger(events.actionComplete, e);
         });
+        detach(parentElement);
     };
     /**
      * Rendering uploader and popup for drag and drop
@@ -1934,6 +1963,9 @@ var Image = /** @class */ (function () {
                 _this.popupObj.destroy();
                 detach(_this.popupObj.element);
                 _this.popupObj = null;
+                if (!_this.parent.inlineMode.enable) {
+                    _this.parent.toolbarModule.baseToolbar.toolbarObj.disable(false);
+                }
             }
         });
         this.popupObj.element.style.display = 'none';
@@ -1965,6 +1997,10 @@ var Image = /** @class */ (function () {
                 isUploading = false;
                 detach(imageElement);
                 _this.popupObj.close();
+                _this.quickToolObj.imageQTBar.hidePopup();
+                setTimeout(function () {
+                    _this.uploadObj.destroy();
+                }, 900);
             },
             beforeUpload: function (args) {
                 if (_this.parent.isServerRendered) {
@@ -1976,6 +2012,9 @@ var Image = /** @class */ (function () {
                         if (beforeUploadArgs.cancel) {
                             return;
                         }
+                        if (!_this.parent.inlineMode.enable) {
+                            _this.parent.toolbarModule.baseToolbar.toolbarObj.disable(true);
+                        }
                         /* eslint-disable */
                         _this.uploadObj.currentRequestHeader = beforeUploadArgs.currentRequest ?
                             beforeUploadArgs.currentRequest : _this.uploadObj.currentRequestHeader;
@@ -1988,6 +2027,9 @@ var Image = /** @class */ (function () {
                 }
                 else {
                     _this.parent.trigger(events.beforeImageUpload, args);
+                    if (!_this.parent.inlineMode.enable) {
+                        _this.parent.toolbarModule.baseToolbar.toolbarObj.disable(true);
+                    }
                 }
             },
             uploading: function (e) {
@@ -2030,6 +2072,9 @@ var Image = /** @class */ (function () {
                 }, 900);
             },
             success: function (e) {
+                if (e.operation === "cancel") {
+                    return;
+                }
                 isUploading = false;
                 _this.parent.inputElement.contentEditable = 'true';
                 var args = {

package/src/rich-text-editor/renderer/toolbar-renderer.js

@@ -1,4 +1,4 @@
-import { addClass, Browser, removeClass, EventHandler, formatUnit, isNullOrUndefined } from '@syncfusion/ej2-base';
+import { addClass, Browser, removeClass, EventHandler, formatUnit, isNullOrUndefined, isNullOrUndefined as isNOU } from '@syncfusion/ej2-base';
 import { getInstance, closest, selectAll, detach } from '@syncfusion/ej2-base';
 import { Toolbar } from '@syncfusion/ej2-navigations';
 import { DropDownButton } from '@syncfusion/ej2-splitbuttons';
@@ -62,7 +62,8 @@ var ToolbarRenderer = /** @class */ (function () {
         this.parent.notify(events.beforeDropDownItemRender, args);
     };
     ToolbarRenderer.prototype.dropDownOpen = function (args) {
-        if (args.element.parentElement.getAttribute('id').indexOf('TableCell') > -1) {
+        if (args.element.parentElement.getAttribute('id').indexOf('TableCell') > -1 && !isNOU(args.element.parentElement.querySelector('.e-cell-merge')) &&
+            (!isNOU(args.element.parentElement.querySelector('.e-cell-horizontal-split')) || !isNOU(args.element.parentElement.querySelector('.e-cell-vertical-split')))) {
             var listEle = args.element.querySelectorAll('li');
             if (this.parent.inputElement.querySelectorAll('.e-cell-select').length === 1) {
                 addClass([listEle[0]], 'e-disabled');

package/src/selection/selection.js

@@ -116,7 +116,8 @@ var NodeSelection = /** @class */ (function () {
             || range.startContainer;
         var endNode = range.endContainer.childNodes[(range.endOffset > 0) ? (range.endOffset - 1) : range.endOffset]
             || range.endContainer;
-        if (startNode === endNode && startNode.childNodes.length === 0) {
+        if ((startNode === endNode || (startNode.nodeName === 'BR' && startNode === range.endContainer.childNodes[range.endOffset])) &&
+            startNode.childNodes.length === 0) {
             return [startNode];
         }
         if (range.startOffset === range.endOffset && range.startOffset !== 0 && range.startContainer.nodeName === 'PRE') {

package/styles/bootstrap-dark.css

@@ -1324,6 +1324,10 @@
   margin-top: 0;
 }
 
+.e-richtexteditor .e-img-uploadwrap.e-droparea .e-upload .e-upload-files .e-file-abort-btn.e-icons {
+  margin-right: 30px;
+}
+
 .e-richtexteditor .e-img-uploadwrap.e-droparea .e-upload .e-upload-files .e-upload-file-list {
   border-bottom: 0 solid transparent;
   min-height: initial;

package/styles/bootstrap.css

@@ -1470,6 +1470,10 @@
   margin-top: 0;
 }
 
+.e-richtexteditor .e-img-uploadwrap.e-droparea .e-upload .e-upload-files .e-file-abort-btn.e-icons {
+  margin-right: 30px;
+}
+
 .e-richtexteditor .e-img-uploadwrap.e-droparea .e-upload .e-upload-files .e-upload-file-list {
   border-bottom: 0 solid transparent;
   min-height: initial;

package/styles/bootstrap4.css

@@ -1603,6 +1603,10 @@
   margin-top: 0;
 }
 
+.e-richtexteditor .e-img-uploadwrap.e-droparea .e-upload .e-upload-files .e-file-abort-btn.e-icons {
+  margin-right: 30px;
+}
+
 .e-richtexteditor .e-img-uploadwrap.e-droparea .e-upload .e-upload-files .e-upload-file-list {
   border-bottom: 0 solid transparent;
   min-height: initial;

package/styles/bootstrap5-dark.css

@@ -1320,6 +1320,10 @@
   margin-top: 0;
 }
 
+.e-richtexteditor .e-img-uploadwrap.e-droparea .e-upload .e-upload-files .e-file-abort-btn.e-icons {
+  margin-right: 30px;
+}
+
 .e-richtexteditor .e-img-uploadwrap.e-droparea .e-upload .e-upload-files .e-upload-file-list {
   border-bottom: 0 solid transparent;
   min-height: initial;

package/styles/bootstrap5.css

@@ -1320,6 +1320,10 @@
   margin-top: 0;
 }
 
+.e-richtexteditor .e-img-uploadwrap.e-droparea .e-upload .e-upload-files .e-file-abort-btn.e-icons {
+  margin-right: 30px;
+}
+
 .e-richtexteditor .e-img-uploadwrap.e-droparea .e-upload .e-upload-files .e-upload-file-list {
   border-bottom: 0 solid transparent;
   min-height: initial;

package/styles/fabric-dark.css

@@ -1313,6 +1313,10 @@
   margin-top: 0;
 }
 
+.e-richtexteditor .e-img-uploadwrap.e-droparea .e-upload .e-upload-files .e-file-abort-btn.e-icons {
+  margin-right: 30px;
+}
+
 .e-richtexteditor .e-img-uploadwrap.e-droparea .e-upload .e-upload-files .e-upload-file-list {
   border-bottom: 0 solid transparent;
   min-height: initial;

package/styles/fabric.css

@@ -1313,6 +1313,10 @@
   margin-top: 0;
 }
 
+.e-richtexteditor .e-img-uploadwrap.e-droparea .e-upload .e-upload-files .e-file-abort-btn.e-icons {
+  margin-right: 30px;
+}
+
 .e-richtexteditor .e-img-uploadwrap.e-droparea .e-upload .e-upload-files .e-upload-file-list {
   border-bottom: 0 solid transparent;
   min-height: initial;

package/styles/highcontrast-light.css

@@ -1313,6 +1313,10 @@
   margin-top: 0;
 }
 
+.e-richtexteditor .e-img-uploadwrap.e-droparea .e-upload .e-upload-files .e-file-abort-btn.e-icons {
+  margin-right: 30px;
+}
+
 .e-richtexteditor .e-img-uploadwrap.e-droparea .e-upload .e-upload-files .e-upload-file-list {
   border-bottom: 0 solid transparent;
   min-height: initial;