@syncfusion/ej2-richtexteditor 25.1.38 → 25.1.40

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

@@ -39,6 +39,7 @@ var Audio = /** @class */ (function () {
         this.parent.on(events.editAreaClick, this.editAreaClickHandler, this);
         this.parent.on(events.insertCompleted, this.showAudioQuickToolbar, this);
         this.parent.on(events.destroy, this.removeEventListener, this);
+        this.parent.on(events.iframeMouseDown, this.closeDialog, this);
     };
     Audio.prototype.removeEventListener = function () {
         if (this.parent.isDestroyed) {
@@ -57,6 +58,7 @@ var Audio = /** @class */ (function () {
         this.parent.off(events.editAreaClick, this.editAreaClickHandler);
         this.parent.off(events.insertCompleted, this.showAudioQuickToolbar);
         this.parent.off(events.destroy, this.removeEventListener);
+        this.parent.off(events.iframeMouseDown, this.closeDialog);
         if (!isNullOrUndefined(this.contentModule)) {
             EventHandler.remove(this.parent.contentModule.getEditPanel(), Browser.touchStartEvent, this.touchStart);
             EventHandler.remove(this.contentModule.getEditPanel(), Browser.touchEndEvent, this.audioClick);
@@ -305,7 +307,7 @@ var Audio = /** @class */ (function () {
             this.parent.formatter.saveData();
         }
         e.selection.restore();
-        this.parent.formatter.process(this.parent, e.args, e.args, {
+        this.parent.formatter.process(this.parent, e.args, e.args.originalEvent, {
             selectNode: e.selectNode,
             subCommand: e.args.item.subCommand
         });
@@ -401,6 +403,9 @@ var Audio = /** @class */ (function () {
                 this.prevSelectedAudEle.style.outline = '';
             }
         }
+        if (this.parent.inlineMode.enable && target && this.dialogObj && !closest(target, '#' + this.dialogObj.element.id)) {
+            this.dialogObj.hide();
+        }
     };
     Audio.prototype.alignmentSelect = function (e) {
         var item = e.item;
@@ -433,7 +438,7 @@ var Audio = /** @class */ (function () {
         }
         var subCommand = (e.args.item) ?
             e.args.item.subCommand : 'Break';
-        this.parent.formatter.process(this.parent, e.args, e.args, { selectNode: e.selectNode, subCommand: subCommand });
+        this.parent.formatter.process(this.parent, e.args, e.args.originalEvent, { selectNode: e.selectNode, subCommand: subCommand });
     };
     Audio.prototype.inline = function (e) {
         if (e.selectNode[0].nodeName !== 'AUDIO') {
@@ -441,7 +446,7 @@ var Audio = /** @class */ (function () {
         }
         var subCommand = (e.args.item) ?
             e.args.item.subCommand : 'Inline';
-        this.parent.formatter.process(this.parent, e.args, e.args, { selectNode: e.selectNode, subCommand: subCommand });
+        this.parent.formatter.process(this.parent, e.args, e.args.originalEvent, { selectNode: e.selectNode, subCommand: subCommand });
     };
     Audio.prototype.editAreaClickHandler = function (e) {
         if (this.parent.readonly) {
@@ -581,7 +586,7 @@ var Audio = /** @class */ (function () {
                     _this.uploadObj.removing();
                 }
                 _this.parent.isBlur = false;
-                if (event && event.event.returnValue) {
+                if (event && !isNOU(event.event) && event.event.returnValue) {
                     if (_this.parent.editorMode === 'HTML') {
                         selection.restore();
                     }

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

@@ -5,7 +5,7 @@ import * as classes from '../base/classes';
 import { Uploader, TextBox } from '@syncfusion/ej2-inputs';
 import { Popup } from '@syncfusion/ej2-popups';
 import { Button, CheckBox } from '@syncfusion/ej2-buttons';
-import { RenderType } from '../base/enum';
+import { RenderType, UploadRequest } from '../base/enum';
 import { dispatchEvent, parseHtml, hasClass, convertToBlob } from '../base/util';
 import { isIDevice } from '../../common/util';
 import { imageResizeFactor } from '../../common/config';
@@ -1399,7 +1399,7 @@ var Image = /** @class */ (function () {
                     _this.uploadObj.remove();
                 }
                 _this.parent.isBlur = false;
-                if (event && event.event.returnValue) {
+                if (event && !isNOU(event.event) && event.event.returnValue) {
                     if (_this.parent.editorMode === 'HTML') {
                         selection.restore();
                     }
@@ -1518,6 +1518,9 @@ var Image = /** @class */ (function () {
                 removeClass([items[i]], 'e-resize');
             }
         }
+        if (this.parent.inlineMode.enable && target && this.dialogObj && !closest(target, '#' + this.dialogObj.element.id)) {
+            this.dialogObj.hide();
+        }
     };
     Image.prototype.removeResizeEle = function () {
         EventHandler.remove(this.contentModule.getDocument(), Browser.touchMoveEvent, this.resizing);
@@ -1794,6 +1797,7 @@ var Image = /** @class */ (function () {
                 }
             },
             success: function (e) {
+                e.requestType = UploadRequest.Uploaded;
                 _this.parent.trigger(events.imageUploadSuccess, e, function (e) {
                     if (!isNOU(_this.parent.insertImageSettings.path)) {
                         var url = _this.parent.insertImageSettings.path + e.file.name;
@@ -2239,6 +2243,7 @@ var Image = /** @class */ (function () {
         imageElement.style.opacity = '1';
         imageElement.classList.add(classes.CLS_IMG_FOCUS);
         e.element = imageElement;
+        e.requestType = UploadRequest.Dropped;
         this.parent.trigger(events.imageUploadSuccess, e, function (e) {
             if (!isNOU(_this.parent.insertImageSettings.path)) {
                 var url = _this.parent.insertImageSettings.path + e.file.name;

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

@@ -643,13 +643,14 @@ var Table = /** @class */ (function () {
         }
         var target = e.target || e.targetTouches[0].target;
         var closestTable = closest(target, 'table.e-rte-table, table.e-rte-paste-table');
-        if (!isNOU(this.curTable) && !isNOU(closestTable) && closestTable !== this.curTable &&
+        var isResizing = this.parent.contentModule.getEditPanel().querySelectorAll('.e-table-box.e-rbox-select, .e-table-rhelper.e-column-helper, .e-table-rhelper.e-row-helper').length > 0;
+        if (!isResizing && !isNOU(this.curTable) && !isNOU(closestTable) && closestTable !== this.curTable &&
             this.parent.contentModule.getEditPanel().contains(closestTable)) {
             this.removeResizeElement();
             this.removeHelper(e);
             this.cancelResizeAction();
         }
-        if (target.nodeName === 'TABLE' || target.nodeName === 'TD' || target.nodeName === 'TH') {
+        if (!isResizing && (target.nodeName === 'TABLE' || target.nodeName === 'TD' || target.nodeName === 'TH')) {
             this.curTable = (closestTable && this.parent.contentModule.getEditPanel().contains(closestTable))
                 && (target.nodeName === 'TD' || target.nodeName === 'TH') ?
                 closestTable : target;
@@ -795,7 +796,6 @@ var Table = /** @class */ (function () {
             e.preventDefault();
             this.parent.preventDefaultResize(e);
             removeClass(this.curTable.querySelectorAll('td,th'), classes.CLS_TABLE_SEL);
-            this.parent.formatter.editorManager.nodeSelection.Clear(this.contentModule.getDocument());
             this.pageX = this.getPointX(e);
             this.pageY = this.getPointY(e);
             this.resizeBtnInit();
@@ -1055,7 +1055,8 @@ var Table = /** @class */ (function () {
                                 var width = parseFloat(_this.curTable.style.width);
                                 currentMarginLeft = 100 - width;
                             }
-                            if (currentMarginLeft && currentMarginLeft < 1) {
+                            // For table pasted from word, Margin left can be anything so we are avoiding the below process.
+                            if (!_this.curTable.classList.contains('e-rte-paste-table') && currentMarginLeft && currentMarginLeft < 1) {
                                 _this.curTable.style.marginLeft = null;
                                 _this.curTable.style.width = '100%';
                                 return;
@@ -1221,7 +1222,13 @@ var Table = /** @class */ (function () {
             tableTrPercentage[i] = percentage;
         }
         for (var i = 0; i < currentTableTrElement.length; i++) {
-            currentTableTrElement[i].style.height = tableTrPercentage[i] + '%';
+            if (currentTableTrElement[i].parentElement.nodeName === 'THEAD') {
+                currentTableTrElement[i].parentElement.style.height = tableTrPercentage[i] + '%';
+                currentTableTrElement[i].style.height = tableTrPercentage[i] + '%';
+            }
+            else {
+                currentTableTrElement[i].style.height = tableTrPercentage[i] + '%';
+            }
         }
         var args = { event: e, requestType: 'table' };
         this.parent.trigger(events.resizeStop, args);
@@ -1371,6 +1378,9 @@ var Table = /** @class */ (function () {
         if (this.popupObj) {
             this.popupObj.hide();
         }
+        if (this.parent.inlineMode.enable && this.editdlgObj) {
+            this.editdlgObj.hide();
+        }
     };
     Table.prototype.docClick = function (e) {
         var target = e.args.target;

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

@@ -21,7 +21,6 @@ export declare class ToolbarRenderer implements IRenderer {
     private currentDropdown;
     private tooltip;
     private l10n;
-    private dropdownTooltip;
     private tooltipTargetEle;
     /**
      * Constructor for toolbar renderer module

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

@@ -8,6 +8,7 @@ import * as events from '../base/constant';
 import { CLS_TOOLBAR, CLS_DROPDOWN_BTN, CLS_RTE_ELEMENTS, CLS_TB_BTN, CLS_INLINE_DROPDOWN, CLS_COLOR_CONTENT, CLS_FONT_COLOR_DROPDOWN, CLS_BACKGROUND_COLOR_DROPDOWN, CLS_COLOR_PALETTE, CLS_FONT_COLOR_PICKER, CLS_BACKGROUND_COLOR_PICKER, CLS_CUSTOM_TILE, CLS_NOCOLOR_ITEM, CLS_BULLETFORMATLIST_TB_BTN, CLS_NUMBERFORMATLIST_TB_BTN, CLS_LIST_PRIMARY_CONTENT } from '../base/classes';
 import { ColorPicker } from '@syncfusion/ej2-inputs';
 import { hasClass } from '../base/util';
+import { ToolbarStatus } from '../../editor-manager/plugin/toolbar-status';
 /**
  * `Toolbar renderer` module is used to render toolbar in RichTextEditor.
  *
@@ -65,7 +66,7 @@ var ToolbarRenderer = /** @class */ (function () {
         }
     };
     ToolbarRenderer.prototype.dropDownSelected = function (args) {
-        this.parent.notify(events.dropDownSelect, args);
+        this.parent.notify(events.dropDownSelect, { element: args.element, item: args.item, originalEvent: args.event });
         this.destroyTooltip();
     };
     ToolbarRenderer.prototype.beforeDropDownItemRender = function (args) {
@@ -89,6 +90,9 @@ var ToolbarRenderer = /** @class */ (function () {
                     break;
             }
         }
+        if (args.target.querySelector('.e-active')) {
+            args.cancel = true;
+        }
     };
     ToolbarRenderer.prototype.dropDownOpen = function (args) {
         if (args.element.parentElement.getAttribute('id').indexOf('TableCell') > -1 && !isNOU(args.element.parentElement.querySelector('.e-cell-merge')) &&
@@ -111,19 +115,6 @@ var ToolbarRenderer = /** @class */ (function () {
                 addClass([listEle[1], listEle[2]], 'e-disabled');
             }
         }
-        if (this.parent.showTooltip) {
-            this.dropdownTooltip = new Tooltip({
-                target: '[aria-owns="' + this.parent.getID() + '"].e-rte-elements [title]',
-                showTipPointer: true,
-                openDelay: 400,
-                opensOn: 'Hover',
-                beforeRender: this.tooltipBeforeRender.bind(this),
-                cssClass: this.parent.getCssClass(),
-                windowCollision: true,
-                position: 'BottomCenter'
-            });
-            this.dropdownTooltip.appendTo(args.element);
-        }
         this.parent.notify(events.selectionSave, args);
     };
     ToolbarRenderer.prototype.dropDownClose = function (args) {
@@ -269,11 +260,22 @@ var ToolbarRenderer = /** @class */ (function () {
                     }
                     //Formats preselect
                     if (args.items[0].command === 'Formats' || args.items[0].command === 'Font') {
+                        var fontName_1 = [];
+                        var formats_1 = [];
+                        _this.parent.format.types.forEach(function (item) {
+                            formats_1.push(item.value.toLocaleLowerCase());
+                        });
+                        _this.parent.fontFamily.items.forEach(function (item) {
+                            fontName_1.push(item.value);
+                        });
+                        var toolbarStatus = ToolbarStatus.get(_this.parent.contentModule.getDocument(), _this.parent.contentModule.getEditPanel(), formats_1, null, fontName_1);
                         for (var index = 0; index < args.element.childNodes.length; index++) {
                             var divNode = _this.parent.createElement('div');
                             divNode.innerHTML = dropDown.content.trim();
-                            if (divNode.textContent.trim() !== ''
-                                && args.element.childNodes[index].textContent.trim() === divNode.textContent.trim()) {
+                            if ((divNode.textContent.trim() !== ''
+                                && args.element.childNodes[index].textContent.trim() === divNode.textContent.trim()) ||
+                                ((args.items[0].command === 'Formats' && !isNOU(toolbarStatus.formats) && _this.parent.format.types[index].value.toLowerCase() === toolbarStatus.formats.toLowerCase() && args.element.childNodes[index].classList.contains(_this.parent.format.types[index].cssClass))
+                                    || (args.items[0].command === 'Font' && !isNOU(toolbarStatus.fontname) && _this.parent.fontFamily.items[index].value.toLowerCase() === toolbarStatus.fontname.toLowerCase() && args.element.childNodes[index].classList.contains(_this.parent.fontFamily.items[index].cssClass)))) {
                                 if (!args.element.childNodes[index].classList.contains('e-active')) {
                                     addClass([args.element.childNodes[index]], 'e-active');
                                 }
@@ -459,6 +461,8 @@ var ToolbarRenderer = /** @class */ (function () {
             target: colorPicker.element.parentElement, cssClass: css,
             enablePersistence: this.parent.enablePersistence, enableRtl: this.parent.enableRtl,
             beforeOpen: function (dropDownArgs) {
+                colorPicker.inline = true;
+                colorPicker.dataBind();
                 if (proxy.parent.readonly || !proxy.parent.enabled) {
                     dropDownArgs.cancel = true;
                     return;
@@ -597,18 +601,14 @@ var ToolbarRenderer = /** @class */ (function () {
         var colorPicker = new ColorPicker({
             enablePersistence: this.parent.enablePersistence,
             enableRtl: this.parent.enableRtl,
-            inline: true,
-            value: null,
-            cssClass: ((item === 'backgroundcolor') ? CLS_BACKGROUND_COLOR_PICKER : CLS_FONT_COLOR_PICKER) + ' ' + args.cssClass + ' ' + 'e-rte-picker-init',
+            inline: false,
+            value: '#fff',
             created: function () {
                 var value = (item === 'backgroundcolor') ? proxy.parent.backgroundColor.default : proxy.parent.fontColor.default;
-                colorPicker.cssClass = ((item === 'backgroundcolor') ? CLS_BACKGROUND_COLOR_PICKER : CLS_FONT_COLOR_PICKER) + ' ' + args.cssClass;
-                colorPicker.value = value;
+                colorPicker.setProperties({ value: value });
             },
             mode: ((item === 'backgroundcolor') ? proxy.parent.backgroundColor.mode : proxy.parent.fontColor.mode),
             modeSwitcher: ((item === 'backgroundcolor') ? proxy.parent.backgroundColor.modeSwitcher : proxy.parent.fontColor.modeSwitcher),
-            presetColors: (item === 'backgroundcolor') ? this.parent.backgroundColor.colorCode : this.parent.fontColor.colorCode,
-            columns: (item === 'backgroundcolor') ? this.parent.backgroundColor.columns : this.parent.fontColor.columns,
             beforeTileRender: function (args) {
                 args.element.classList.add(CLS_COLOR_PALETTE);
                 args.element.classList.add(CLS_CUSTOM_TILE);
@@ -653,6 +653,10 @@ var ToolbarRenderer = /** @class */ (function () {
             }
         });
         colorPicker.isStringTemplate = true;
+        colorPicker.columns = (item === 'backgroundcolor') ? this.parent.backgroundColor.columns : this.parent.fontColor.columns;
+        colorPicker.presetColors = (item === 'backgroundcolor') ? this.parent.backgroundColor.colorCode :
+            this.parent.fontColor.colorCode;
+        colorPicker.cssClass = ((item === 'backgroundcolor') ? CLS_BACKGROUND_COLOR_PICKER : CLS_FONT_COLOR_PICKER) + ' ' + args.cssClass;
         colorPicker.createElement = this.parent.createElement;
         colorPicker.appendTo(document.getElementById(args.target));
         return colorPicker;

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

@@ -817,7 +817,7 @@ var Video = /** @class */ (function () {
             this.parent.formatter.saveData();
         }
         e.selection.restore();
-        this.parent.formatter.process(this.parent, e.args, e.args, {
+        this.parent.formatter.process(this.parent, e.args, e.args.originalEvent, {
             selectNode: e.selectNode,
             subCommand: e.args.item.subCommand
         });
@@ -907,6 +907,9 @@ var Video = /** @class */ (function () {
                 this.prevSelectedVidEle.style.outline = '';
             }
         }
+        if (this.parent.inlineMode.enable && target && this.dialogObj && !closest(target, '#' + this.dialogObj.element.id)) {
+            this.dialogObj.hide();
+        }
     };
     Video.prototype.removeResizeEle = function () {
         EventHandler.remove(this.contentModule.getDocument(), Browser.touchMoveEvent, this.resizing);
@@ -924,7 +927,7 @@ var Video = /** @class */ (function () {
         }
         var subCommand = (e.args.item) ?
             e.args.item.subCommand : 'Break';
-        this.parent.formatter.process(this.parent, e.args, e.args, { selectNode: e.selectNode, subCommand: subCommand });
+        this.parent.formatter.process(this.parent, e.args, e.args.originalEvent, { selectNode: e.selectNode, subCommand: subCommand });
     };
     Video.prototype.inline = function (e) {
         if (e.selectNode[0].nodeName !== 'VIDEO' && !this.isEmbedVidElem(e.selectNode[0])) {
@@ -932,12 +935,12 @@ var Video = /** @class */ (function () {
         }
         var subCommand = (e.args.item) ?
             e.args.item.subCommand : 'Inline';
-        this.parent.formatter.process(this.parent, e.args, e.args, { selectNode: e.selectNode, subCommand: subCommand });
+        this.parent.formatter.process(this.parent, e.args, e.args.originalEvent, { selectNode: e.selectNode, subCommand: subCommand });
     };
     Video.prototype.alignVideo = function (e, type) {
         var subCommand = (e.args.item) ?
             e.args.item.subCommand : type;
-        this.parent.formatter.process(this.parent, e.args, e.args, { selectNode: e.selectNode, subCommand: subCommand });
+        this.parent.formatter.process(this.parent, e.args, e.args.originalEvent, { selectNode: e.selectNode, subCommand: subCommand });
     };
     Video.prototype.editAreaClickHandler = function (e) {
         if (this.parent.readonly) {
@@ -1081,7 +1084,7 @@ var Video = /** @class */ (function () {
                     _this.uploadObj.removing();
                 }
                 _this.parent.isBlur = false;
-                if (event && event.event.returnValue) {
+                if (event && !isNOU(event.event) && event.event.returnValue) {
                     if (_this.parent.editorMode === 'HTML') {
                         selection.restore();
                     }
@@ -1173,21 +1176,26 @@ var Video = /** @class */ (function () {
                 }
             }
         });
-        if (e.selectNode && ((e.selectNode[0] && e.selectNode[0].nodeType !== 3 &&
-            e.selectNode[0].nodeName !== 'BR' &&
-            (e.selectNode[0].classList &&
-                e.selectNode[0].classList.contains(classes.CLS_VID_CLICK_ELEM))) ||
-            e.selectNode[0].nodeName === 'IFRAME' || e.selectNode[0].nodeName === 'VIDEO')) {
-            var regex = new RegExp(/([^\S]|^)(((https?\:\/\/)|(www\.))(\S+))/gi);
-            var sourceElement = e.selectNode[0].querySelector('source');
-            this.inputUrl.value = sourceElement.src.match(regex) ? sourceElement.src : '';
+        if (e.selectNode && e.selectNode[0] && (e.selectNode[0].nodeName === 'VIDEO' || this.isEmbedVidElem(e.selectNode[0]))) {
+            if (e.selectNode[0].nodeName === 'VIDEO') {
+                var regex = new RegExp(/([^\S]|^)(((https?\:\/\/)|(www\.))(\S+))/gi);
+                var sourceElement = e.selectNode[0].querySelector('source');
+                this.inputUrl.value = sourceElement && sourceElement.src && sourceElement.src.match(regex) ? sourceElement.src : '';
+            }
+            else {
+                this.embedInputUrl.value = e.selectNode[0].nodeName === 'IFRAME' ? e.selectNode[0].outerHTML
+                    : e.selectNode[0].querySelector('iframe').outerHTML;
+            }
         }
+        var isWebUrl = this.inputUrl.value ? true : false;
         var embedUrlBtn = new RadioButton({
             label: this.i10n.getConstant('embeddedCode'),
-            checked: true,
+            checked: !isWebUrl,
             name: 'URL',
             created: function () {
-                urlContent.appendChild(_this.embedInputUrl);
+                if (!isWebUrl) {
+                    urlContent.appendChild(_this.embedInputUrl);
+                }
             },
             change: function () {
                 urlContent.innerHTML = '';
@@ -1197,7 +1205,13 @@ var Video = /** @class */ (function () {
         embedUrlBtn.appendTo(videoUrl.querySelector('#embedURL'));
         var webUrlBtn = new RadioButton({
             label: this.i10n.getConstant('webUrl'),
+            checked: isWebUrl,
             name: 'URL',
+            created: function () {
+                if (isWebUrl) {
+                    urlContent.appendChild(_this.inputUrl);
+                }
+            },
             change: function () {
                 urlContent.innerHTML = '';
                 urlContent.appendChild(_this.inputUrl);

package/styles/bootstrap-dark.css

@@ -551,6 +551,12 @@
 .e-richtexteditor.e-bigger .e-toolbar.e-extended-toolbar .e-toolbar-extended .e-toolbar-item .e-tbar-btn.e-btn.e-control:hover {
   padding: 0 7px;
 }
+.e-bigger .e-richtexteditor .e-dialog .e-img-uploadwrap.e-droparea .e-upload .e-upload-files .e-file-abort-btn.e-icons,
+.e-richtexteditor.e-bigger .e-dialog .e-img-uploadwrap.e-droparea .e-upload .e-upload-files .e-file-abort-btn.e-icons {
+  margin-right: 62px;
+  margin-top: -3px;
+  padding: 18px;
+}
 
 .e-richtexteditor {
   color: #f0f0f0;
@@ -1458,6 +1464,11 @@
   border: 0 solid transparent;
   float: none;
 }
+.e-richtexteditor .e-dialog .e-img-uploadwrap.e-droparea .e-upload .e-upload-files .e-file-abort-btn.e-icons,
+.e-rte-elements .e-dialog .e-img-uploadwrap.e-droparea .e-upload .e-upload-files .e-file-abort-btn.e-icons {
+  margin-right: 46px;
+  margin-top: -3px;
+}
 .e-richtexteditor .e-dialog .e-img-uploadwrap.e-droparea .e-browsebtn,
 .e-richtexteditor .e-dialog .e-aud-uploadwrap.e-droparea .e-browsebtn,
 .e-richtexteditor .e-dialog .e-vid-uploadwrap.e-droparea .e-browsebtn,

package/styles/bootstrap.css

@@ -692,6 +692,12 @@
 .e-richtexteditor.e-bigger .e-toolbar.e-extended-toolbar .e-toolbar-extended .e-toolbar-item .e-tbar-btn.e-btn.e-control:hover {
   padding: 0 7px;
 }
+.e-bigger .e-richtexteditor .e-dialog .e-img-uploadwrap.e-droparea .e-upload .e-upload-files .e-file-abort-btn.e-icons,
+.e-richtexteditor.e-bigger .e-dialog .e-img-uploadwrap.e-droparea .e-upload .e-upload-files .e-file-abort-btn.e-icons {
+  margin-right: 62px;
+  margin-top: -3px;
+  padding: 18px;
+}
 
 .e-richtexteditor {
   color: #333;
@@ -1599,6 +1605,11 @@
   border: 0 solid transparent;
   float: none;
 }
+.e-richtexteditor .e-dialog .e-img-uploadwrap.e-droparea .e-upload .e-upload-files .e-file-abort-btn.e-icons,
+.e-rte-elements .e-dialog .e-img-uploadwrap.e-droparea .e-upload .e-upload-files .e-file-abort-btn.e-icons {
+  margin-right: 46px;
+  margin-top: -3px;
+}
 .e-richtexteditor .e-dialog .e-img-uploadwrap.e-droparea .e-browsebtn,
 .e-richtexteditor .e-dialog .e-aud-uploadwrap.e-droparea .e-browsebtn,
 .e-richtexteditor .e-dialog .e-vid-uploadwrap.e-droparea .e-browsebtn,

package/styles/bootstrap4.css

@@ -787,6 +787,12 @@
 .e-richtexteditor.e-bigger .e-toolbar.e-extended-toolbar .e-toolbar-extended .e-toolbar-item .e-tbar-btn.e-btn.e-control:hover {
   padding: 0;
 }
+.e-bigger .e-richtexteditor .e-dialog .e-img-uploadwrap.e-droparea .e-upload .e-upload-files .e-file-abort-btn.e-icons,
+.e-richtexteditor.e-bigger .e-dialog .e-img-uploadwrap.e-droparea .e-upload .e-upload-files .e-file-abort-btn.e-icons {
+  margin-right: 65px;
+  margin-top: -1px;
+  padding: 0;
+}
 
 .e-richtexteditor {
   color: #212529;
@@ -1694,6 +1700,11 @@
   border: 0 solid transparent;
   float: none;
 }
+.e-richtexteditor .e-dialog .e-img-uploadwrap.e-droparea .e-upload .e-upload-files .e-file-abort-btn.e-icons,
+.e-rte-elements .e-dialog .e-img-uploadwrap.e-droparea .e-upload .e-upload-files .e-file-abort-btn.e-icons {
+  margin-right: 47px;
+  margin-top: -3px;
+}
 .e-richtexteditor .e-dialog .e-img-uploadwrap.e-droparea .e-browsebtn,
 .e-richtexteditor .e-dialog .e-aud-uploadwrap.e-droparea .e-browsebtn,
 .e-richtexteditor .e-dialog .e-vid-uploadwrap.e-droparea .e-browsebtn,

package/styles/bootstrap5-dark.css

@@ -550,6 +550,12 @@
 .e-richtexteditor.e-bigger .e-toolbar.e-extended-toolbar .e-toolbar-extended .e-toolbar-item .e-tbar-btn.e-btn.e-control:hover {
   padding: 0 8px;
 }
+.e-bigger .e-richtexteditor .e-dialog .e-img-uploadwrap.e-droparea .e-upload .e-upload-files .e-file-abort-btn.e-icons,
+.e-richtexteditor.e-bigger .e-dialog .e-img-uploadwrap.e-droparea .e-upload .e-upload-files .e-file-abort-btn.e-icons {
+  margin-right: 63px;
+  margin-top: 6px;
+  padding: 18px;
+}
 
 .e-richtexteditor {
   color: #fff;
@@ -1465,6 +1471,11 @@
   border: 0 solid transparent;
   float: none;
 }
+.e-richtexteditor .e-dialog .e-img-uploadwrap.e-droparea .e-upload .e-upload-files .e-file-abort-btn.e-icons,
+.e-rte-elements .e-dialog .e-img-uploadwrap.e-droparea .e-upload .e-upload-files .e-file-abort-btn.e-icons {
+  margin-right: 50px;
+  margin-top: 7px;
+}
 .e-richtexteditor .e-dialog .e-img-uploadwrap.e-droparea .e-browsebtn,
 .e-richtexteditor .e-dialog .e-aud-uploadwrap.e-droparea .e-browsebtn,
 .e-richtexteditor .e-dialog .e-vid-uploadwrap.e-droparea .e-browsebtn,

package/styles/bootstrap5.css

@@ -550,6 +550,12 @@
 .e-richtexteditor.e-bigger .e-toolbar.e-extended-toolbar .e-toolbar-extended .e-toolbar-item .e-tbar-btn.e-btn.e-control:hover {
   padding: 0 8px;
 }
+.e-bigger .e-richtexteditor .e-dialog .e-img-uploadwrap.e-droparea .e-upload .e-upload-files .e-file-abort-btn.e-icons,
+.e-richtexteditor.e-bigger .e-dialog .e-img-uploadwrap.e-droparea .e-upload .e-upload-files .e-file-abort-btn.e-icons {
+  margin-right: 63px;
+  margin-top: 6px;
+  padding: 18px;
+}
 
 .e-richtexteditor {
   color: #212529;
@@ -1465,6 +1471,11 @@
   border: 0 solid transparent;
   float: none;
 }
+.e-richtexteditor .e-dialog .e-img-uploadwrap.e-droparea .e-upload .e-upload-files .e-file-abort-btn.e-icons,
+.e-rte-elements .e-dialog .e-img-uploadwrap.e-droparea .e-upload .e-upload-files .e-file-abort-btn.e-icons {
+  margin-right: 50px;
+  margin-top: 7px;
+}
 .e-richtexteditor .e-dialog .e-img-uploadwrap.e-droparea .e-browsebtn,
 .e-richtexteditor .e-dialog .e-aud-uploadwrap.e-droparea .e-browsebtn,
 .e-richtexteditor .e-dialog .e-vid-uploadwrap.e-droparea .e-browsebtn,

package/styles/fabric-dark.css

@@ -540,6 +540,12 @@
 .e-richtexteditor.e-bigger .e-toolbar.e-extended-toolbar .e-toolbar-extended .e-toolbar-item .e-tbar-btn.e-btn.e-control:hover {
   padding: 0;
 }
+.e-bigger .e-richtexteditor .e-dialog .e-img-uploadwrap.e-droparea .e-upload .e-upload-files .e-file-abort-btn.e-icons,
+.e-richtexteditor.e-bigger .e-dialog .e-img-uploadwrap.e-droparea .e-upload .e-upload-files .e-file-abort-btn.e-icons {
+  margin-right: 60px;
+  margin-top: 3px;
+  padding: 18px;
+}
 
 .e-richtexteditor {
   color: #dadada;
@@ -1447,6 +1453,11 @@
   border: 0 solid transparent;
   float: none;
 }
+.e-richtexteditor .e-dialog .e-img-uploadwrap.e-droparea .e-upload .e-upload-files .e-file-abort-btn.e-icons,
+.e-rte-elements .e-dialog .e-img-uploadwrap.e-droparea .e-upload .e-upload-files .e-file-abort-btn.e-icons {
+  margin-right: 40px;
+  margin-top: -2px;
+}
 .e-richtexteditor .e-dialog .e-img-uploadwrap.e-droparea .e-browsebtn,
 .e-richtexteditor .e-dialog .e-aud-uploadwrap.e-droparea .e-browsebtn,
 .e-richtexteditor .e-dialog .e-vid-uploadwrap.e-droparea .e-browsebtn,

package/styles/fabric.css

@@ -540,6 +540,12 @@
 .e-richtexteditor.e-bigger .e-toolbar.e-extended-toolbar .e-toolbar-extended .e-toolbar-item .e-tbar-btn.e-btn.e-control:hover {
   padding: 0;
 }
+.e-bigger .e-richtexteditor .e-dialog .e-img-uploadwrap.e-droparea .e-upload .e-upload-files .e-file-abort-btn.e-icons,
+.e-richtexteditor.e-bigger .e-dialog .e-img-uploadwrap.e-droparea .e-upload .e-upload-files .e-file-abort-btn.e-icons {
+  margin-right: 60px;
+  margin-top: 3px;
+  padding: 18px;
+}
 
 .e-richtexteditor {
   color: #333;
@@ -1447,6 +1453,11 @@
   border: 0 solid transparent;
   float: none;
 }
+.e-richtexteditor .e-dialog .e-img-uploadwrap.e-droparea .e-upload .e-upload-files .e-file-abort-btn.e-icons,
+.e-rte-elements .e-dialog .e-img-uploadwrap.e-droparea .e-upload .e-upload-files .e-file-abort-btn.e-icons {
+  margin-right: 40px;
+  margin-top: -2px;
+}
 .e-richtexteditor .e-dialog .e-img-uploadwrap.e-droparea .e-browsebtn,
 .e-richtexteditor .e-dialog .e-aud-uploadwrap.e-droparea .e-browsebtn,
 .e-richtexteditor .e-dialog .e-vid-uploadwrap.e-droparea .e-browsebtn,

package/styles/fluent-dark.css

@@ -543,6 +543,12 @@
 .e-richtexteditor.e-bigger .e-toolbar.e-extended-toolbar .e-toolbar-extended .e-toolbar-item .e-tbar-btn.e-btn.e-control:hover {
   padding: 0 8px;
 }
+.e-bigger .e-richtexteditor .e-dialog .e-img-uploadwrap.e-droparea .e-upload .e-upload-files .e-file-abort-btn.e-icons,
+.e-richtexteditor.e-bigger .e-dialog .e-img-uploadwrap.e-droparea .e-upload .e-upload-files .e-file-abort-btn.e-icons {
+  margin-right: 60px;
+  margin-top: 10px;
+  padding: 5px;
+}
 
 .e-richtexteditor {
   color: #f3f2f1;
@@ -1452,6 +1458,11 @@
   border: 0 solid transparent;
   float: none;
 }
+.e-richtexteditor .e-dialog .e-img-uploadwrap.e-droparea .e-upload .e-upload-files .e-file-abort-btn.e-icons,
+.e-rte-elements .e-dialog .e-img-uploadwrap.e-droparea .e-upload .e-upload-files .e-file-abort-btn.e-icons {
+  margin-right: 45px;
+  margin-top: 17px;
+}
 .e-richtexteditor .e-dialog .e-img-uploadwrap.e-droparea .e-browsebtn,
 .e-richtexteditor .e-dialog .e-aud-uploadwrap.e-droparea .e-browsebtn,
 .e-richtexteditor .e-dialog .e-vid-uploadwrap.e-droparea .e-browsebtn,

package/styles/fluent.css

@@ -543,6 +543,12 @@
 .e-richtexteditor.e-bigger .e-toolbar.e-extended-toolbar .e-toolbar-extended .e-toolbar-item .e-tbar-btn.e-btn.e-control:hover {
   padding: 0 8px;
 }
+.e-bigger .e-richtexteditor .e-dialog .e-img-uploadwrap.e-droparea .e-upload .e-upload-files .e-file-abort-btn.e-icons,
+.e-richtexteditor.e-bigger .e-dialog .e-img-uploadwrap.e-droparea .e-upload .e-upload-files .e-file-abort-btn.e-icons {
+  margin-right: 60px;
+  margin-top: 10px;
+  padding: 5px;
+}
 
 .e-richtexteditor {
   color: #201f1e;
@@ -1452,6 +1458,11 @@
   border: 0 solid transparent;
   float: none;
 }
+.e-richtexteditor .e-dialog .e-img-uploadwrap.e-droparea .e-upload .e-upload-files .e-file-abort-btn.e-icons,
+.e-rte-elements .e-dialog .e-img-uploadwrap.e-droparea .e-upload .e-upload-files .e-file-abort-btn.e-icons {
+  margin-right: 45px;
+  margin-top: 17px;
+}
 .e-richtexteditor .e-dialog .e-img-uploadwrap.e-droparea .e-browsebtn,
 .e-richtexteditor .e-dialog .e-aud-uploadwrap.e-droparea .e-browsebtn,
 .e-richtexteditor .e-dialog .e-vid-uploadwrap.e-droparea .e-browsebtn,

package/styles/highcontrast-light.css

@@ -540,6 +540,12 @@
 .e-richtexteditor.e-bigger .e-toolbar.e-extended-toolbar .e-toolbar-extended .e-toolbar-item .e-tbar-btn.e-btn.e-control:hover {
   padding: 0;
 }
+.e-bigger .e-richtexteditor .e-dialog .e-img-uploadwrap.e-droparea .e-upload .e-upload-files .e-file-abort-btn.e-icons,
+.e-richtexteditor.e-bigger .e-dialog .e-img-uploadwrap.e-droparea .e-upload .e-upload-files .e-file-abort-btn.e-icons {
+  margin-right: 66px;
+  margin-top: -4px;
+  padding: 18px;
+}
 
 .e-richtexteditor {
   color: #fff;
@@ -1447,6 +1453,11 @@
   border: 0 solid transparent;
   float: none;
 }
+.e-richtexteditor .e-dialog .e-img-uploadwrap.e-droparea .e-upload .e-upload-files .e-file-abort-btn.e-icons,
+.e-rte-elements .e-dialog .e-img-uploadwrap.e-droparea .e-upload .e-upload-files .e-file-abort-btn.e-icons {
+  margin-right: 40px;
+  margin-top: -2px;
+}
 .e-richtexteditor .e-dialog .e-img-uploadwrap.e-droparea .e-browsebtn,
 .e-richtexteditor .e-dialog .e-aud-uploadwrap.e-droparea .e-browsebtn,
 .e-richtexteditor .e-dialog .e-vid-uploadwrap.e-droparea .e-browsebtn,