@syncfusion/ej2-richtexteditor 24.2.4 → 24.2.7

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

@@ -1,4 +1,4 @@
-import { detach, closest, Browser, isNullOrUndefined as isNOU } from '@syncfusion/ej2-base';
+import { createElement, detach, closest, Browser, isNullOrUndefined as isNOU } from '@syncfusion/ej2-base';
 import { isNullOrUndefined, EventHandler, addClass, removeClass } from '@syncfusion/ej2-base';
 import { Popup } from '@syncfusion/ej2-popups';
 import { Button } from '@syncfusion/ej2-buttons';
@@ -655,11 +655,11 @@ var Table = /** @class */ (function () {
             colReEle.classList.add(classes.CLS_RTE_TABLE_RESIZE, classes.CLS_TB_COL_RES);
             if (columns.length === i) {
                 colReEle.style.cssText = 'height: ' + height + 'px; width: 4px; top: ' + pos.top +
-                    'px; left:' + (pos.left + this.calcPos(columns[i - 1]).left + columns[i - 1].offsetWidth) + 'px;';
+                    'px; left:' + (pos.left + this.calcPos(columns[i - 1]).left + columns[i - 1].offsetWidth - 2) + 'px;';
             }
             else {
                 colReEle.style.cssText = 'height: ' + height + 'px; width: 4px; top: ' + pos.top +
-                    'px; left:' + (pos.left + this.calcPos(columns[i]).left) + 'px;';
+                    'px; left:' + (pos.left + this.calcPos(columns[i]).left - 2) + 'px;';
             }
             this.contentModule.getEditPanel().appendChild(colReEle);
         }
@@ -691,7 +691,7 @@ var Table = /** @class */ (function () {
     };
     Table.prototype.removeResizeElement = function () {
         var item = this.parent.contentModule.getEditPanel().
-            querySelectorAll('.e-column-resize, .e-row-resize, .e-table-box, .e-table-rhelper');
+            querySelectorAll('.e-column-resize, .e-row-resize, .e-table-box');
         if (item.length > 0) {
             for (var i = 0; i < item.length; i++) {
                 detach(item[i]);
@@ -785,6 +785,44 @@ var Table = /** @class */ (function () {
                     }
                     else {
                         this.currentColumnResize = 'middle';
+                        var cellColl = this.curTable.rows[0].cells;
+                        var cellCount = 0;
+                        for (var cell = 0; cell < cellColl.length; cell++) {
+                            cellCount = cellCount + cellColl[cell].colSpan;
+                        }
+                        var sizes = new Array(cellCount);
+                        var colGroupEle = createElement('colgroup');
+                        var rowSpanCells = new Map();
+                        for (var i = 0; i < this.curTable.rows.length; i++) {
+                            var currentColIndex = 0;
+                            for (var k = 0; k < this.curTable.rows[i].cells.length; k++) {
+                                for (var l = 1; l < this.curTable.rows[i].cells[k].rowSpan; l++) {
+                                    var key = "" + (i + l) + currentColIndex;
+                                    rowSpanCells.set(key, this.curTable.rows[i].cells[k]);
+                                }
+                                var cellIndex = this.getCellIndex(rowSpanCells, i, k);
+                                if (cellIndex > currentColIndex) {
+                                    currentColIndex = cellIndex;
+                                }
+                                var width = this.curTable.rows[i].cells[k].offsetWidth;
+                                if (!sizes[currentColIndex] || width < sizes[currentColIndex]) {
+                                    sizes[currentColIndex] = width;
+                                }
+                                currentColIndex += 1 + this.curTable.rows[i].cells[k].colSpan - 1;
+                            }
+                        }
+                        for (var size = 0; size < sizes.length; size++) {
+                            var cell = createElement('col');
+                            cell.appendChild(createElement('br'));
+                            cell.style.width = this.convertPixelToPercentage(sizes[size], parseInt(getComputedStyle(this.curTable).width, 10)) + '%';
+                            colGroupEle.appendChild(cell);
+                        }
+                        this.curTable.insertBefore(colGroupEle, this.curTable.firstChild);
+                        for (var i = 0; i < this.curTable.rows.length; i++) {
+                            for (var k = 0; k < this.curTable.rows[i].cells.length; k++) {
+                                this.curTable.rows[i].cells[k].style.width = '';
+                            }
+                        }
                     }
                     this.columnEle = this.curTable.rows[this.calMaxCol(this.curTable)].cells[parseInt(target.getAttribute('data-col'), 10)];
                 }
@@ -817,6 +855,16 @@ var Table = /** @class */ (function () {
             EventHandler.add(this.contentModule.getDocument(), Browser.touchEndEvent, this.resizeEnd, this);
         }
     };
+    Table.prototype.getCellIndex = function (rowSpanCells, rowIndex, colIndex) {
+        var cellKey = "" + rowIndex + colIndex;
+        var spannedCell = rowSpanCells.get(cellKey);
+        if (spannedCell) {
+            return this.getCellIndex(rowSpanCells, rowIndex, colIndex + spannedCell.colSpan);
+        }
+        else {
+            return colIndex;
+        }
+    };
     Table.prototype.removeHelper = function (e) {
         var cls = e.target.classList;
         if (!(cls.contains('e-reicon')) && this.helper) {
@@ -845,12 +893,12 @@ var Table = /** @class */ (function () {
             this.helper.classList.add('e-column-helper');
             this.helper.style.cssText = 'height: ' + getComputedStyle(this.curTable).height + '; top: ' +
                 pos.top + 'px; left:' + ((pos.left + this.calcPos(this.columnEle).left) +
-                (this.currentColumnResize === 'last' ? this.columnEle.offsetWidth + 2 : 0) - 1) + 'px;';
+                (this.currentColumnResize === 'last' ? this.columnEle.offsetWidth : 0) - 1) + 'px;';
         }
         else {
             this.helper.classList.add('e-row-helper');
             this.helper.style.cssText = 'width: ' + getComputedStyle(this.curTable).width + '; top: ' +
-                (this.calcPos(this.rowEle).top + pos.top + this.rowEle.offsetHeight) +
+                (this.calcPos(this.rowEle).top + pos.top + this.rowEle.offsetHeight - 1) +
                 'px; left:' + (this.calcPos(this.rowEle).left + pos.left) + 'px;';
         }
     };
@@ -858,11 +906,12 @@ var Table = /** @class */ (function () {
         var pos = this.calcPos(this.curTable);
         if (this.resizeBtnStat.column) {
             var left = (pos.left + this.calcPos(this.columnEle).left) +
-                (this.currentColumnResize === 'last' ? this.columnEle.offsetWidth + 2 : 0) - 1;
+                (this.currentColumnResize === 'last' ? this.columnEle.offsetWidth : 0) - 1;
             this.helper.style.left = left + 'px';
+            this.helper.style.height = this.curTable.offsetHeight + 'px';
         }
         else {
-            var top_1 = this.calcPos(this.rowEle).top + pos.top + this.rowEle.offsetHeight;
+            var top_1 = this.calcPos(this.rowEle).top + pos.top + this.rowEle.offsetHeight - 1;
             this.helper.style.top = top_1 + 'px';
         }
     };
@@ -888,10 +937,6 @@ var Table = /** @class */ (function () {
         var maxiumWidth;
         var currentTdElement = this.curTable.closest('td');
         var args = { event: e, requestType: 'table' };
-        var isRowCellsMerged = false;
-        var isColCellsMerged = false;
-        var mergedCellIndex;
-        var mergedElement;
         this.parent.trigger(events.onResize, args, function (resizingArgs) {
             if (resizingArgs.cancel) {
                 _this.cancelResizeAction();
@@ -916,7 +961,7 @@ var Table = /** @class */ (function () {
                     widthCompare = rteWidth;
                 }
                 if (_this.resizeBtnStat.column) {
-                    var width = parseFloat(_this.columnEle.offsetWidth.toString());
+                    var colGroup = _this.curTable.querySelectorAll('colgroup > col');
                     var cellRow = _this.curTable.rows[0].cells[0].nodeName === 'TH' ? 1 : 0;
                     var currentTableWidth = void 0;
                     if (_this.curTable.style.width !== '' && _this.curTable.style.width.includes('%')) {
@@ -969,98 +1014,36 @@ var Table = /** @class */ (function () {
                         }
                     }
                     else {
-                        var cellColl = _this.curTable.rows[_this.calMaxCol(_this.curTable)].cells;
-                        var actualwid = width - mouseX;
-                        var totalwid = parseFloat(_this.columnEle.offsetWidth.toString()) +
-                            parseFloat(cellColl[_this.colIndex - 1].offsetWidth.toString());
-                        for (var i = 0; i < _this.curTable.rows.length; i++) {
-                            var currentRow = _this.curTable.rows[i];
-                            if ((totalwid - actualwid) > 20 && actualwid > 20) {
-                                var leftColumnWidth = totalwid - actualwid;
-                                var rightColWidth = actualwid;
-                                var index = void 0;
-                                var isMergedEleResize = false;
-                                var leftTableCell = void 0;
-                                var rightTableCell = void 0;
-                                isColCellsMerged = false;
-                                isRowCellsMerged = false;
-                                /* eslint-disable */
-                                for (var j = 0; j < currentRow.cells.length; j++) {
-                                    if (currentRow.cells[j].hasAttribute('rowspan') && j <= _this.colIndex) {
-                                        isRowCellsMerged = true;
-                                        mergedCellIndex = i;
-                                        mergedElement = currentRow.cells[j];
-                                    }
-                                    else if (currentRow.cells[j].hasAttribute('colspan') && j <= currentRow.cells.length) {
-                                        isColCellsMerged = true;
-                                        mergedCellIndex = i;
-                                        mergedElement = currentRow.cells[j];
-                                    }
-                                }
-                                if (!isNOU(currentRow.cells[i]) && currentRow.cells[i].hasAttribute('colspan')) {
-                                    index = parseInt(currentRow.cells[i].getAttribute('colspan'), 10) - 1;
-                                }
-                                else {
-                                    index = _this.colIndex;
-                                }
-                                if (isRowCellsMerged || isColCellsMerged) {
-                                    var currentResizeRow = void 0;
-                                    if (currentRow.cells.length < cellColl.length) {
-                                        index = currentRow.cells.length === _this.colIndex || currentRow === _this.curTable.rows[_this.curTable.rows.length - 1] ?
-                                            _this.colIndex - 1 : _this.colIndex;
-                                        currentResizeRow = _this.curTable.rows[!isNullOrUndefined(mergedCellIndex) ?
-                                            mergedCellIndex : _this.colIndex - 1];
-                                        if (currentResizeRow && currentResizeRow !== currentRow && (currentResizeRow.cells[_this.colIndex - 1] === mergedElement ||
-                                            currentResizeRow.cells[currentResizeRow.cells.length - 1] === mergedElement)) {
-                                            isMergedEleResize = true;
-                                        }
-                                        else {
-                                            isMergedEleResize = false;
-                                        }
-                                    }
-                                    else {
-                                        index = _this.colIndex;
-                                    }
-                                    leftTableCell = !isMergedEleResize ? currentRow.cells[index - 1] : (currentResizeRow &&
-                                        currentResizeRow.cells[currentResizeRow.cells.length - 1] !== mergedElement) ?
-                                        currentResizeRow.cells[_this.colIndex - 1] : currentRow.cells[currentRow.cells.length - 1];
-                                    rightTableCell = !isMergedEleResize ? currentRow.cells[index] : rightTableCell && rightTableCell.hasAttribute('rowspan') ?
-                                        currentResizeRow.cells[_this.colIndex] : currentResizeRow && currentResizeRow.cells[currentResizeRow.cells.length - 1] !== mergedElement ?
-                                        currentRow.cells[index - 1] : currentResizeRow.cells[currentResizeRow.cells.length - 1];
-                                }
-                                if (!isNOU(currentRow.cells[index - 1]) && !isRowCellsMerged && !isColCellsMerged) {
-                                    currentRow.cells[index - 1].style.width =
-                                        _this.convertPixelToPercentage(leftColumnWidth, tableWidth) + '%';
-                                }
-                                else {
-                                    if (leftTableCell) {
-                                        leftTableCell.style.width =
-                                            _this.convertPixelToPercentage(leftColumnWidth, tableWidth) + '%';
-                                    }
-                                }
-                                if (!isNOU(currentRow.cells[index]) && !isRowCellsMerged && !isColCellsMerged) {
-                                    currentRow.cells[index].style.width =
-                                        _this.convertPixelToPercentage(rightColWidth, tableWidth) + '%';
-                                }
-                                else {
-                                    if (rightTableCell) {
-                                        rightTableCell.style.width =
-                                            _this.convertPixelToPercentage(rightColWidth, tableWidth) + '%';
-                                    }
-                                }
-                                /* eslint-enable */
-                            }
+                        var actualwid = colGroup[_this.colIndex].offsetWidth - mouseX;
+                        // eslint-disable-next-line
+                        var totalwid = colGroup[_this.colIndex].offsetWidth + colGroup[_this.colIndex - 1].offsetWidth;
+                        if ((totalwid - actualwid) > 20 && actualwid > 20) {
+                            var leftColumnWidth = totalwid - actualwid;
+                            var rightColWidth = actualwid;
+                            colGroup[_this.colIndex - 1].style.width = _this.convertPixelToPercentage(leftColumnWidth, tableWidth) + '%';
+                            colGroup[_this.colIndex].style.width = _this.convertPixelToPercentage(rightColWidth, tableWidth) + '%';
                         }
                     }
                     _this.updateHelper();
                 }
                 else if (_this.resizeBtnStat.row) {
                     _this.parent.preventDefaultResize(e);
-                    var height = parseFloat(_this.rowEle.clientHeight.toString()) + mouseY;
-                    if (height > 20) {
-                        _this.rowEle.style.height = height + 'px';
+                    var tableTrElementPixel = [];
+                    var currentTableTrElement = _this.curTable.querySelectorAll('tr');
+                    for (var i = 0; i < currentTableTrElement.length; i++) {
+                        if (_this.rowEle !== currentTableTrElement[i]) {
+                            tableTrElementPixel[i] = (parseFloat(currentTableTrElement[i].clientHeight.toString()));
+                        }
+                    }
+                    _this.curTable.style.height = (parseFloat(_this.curTable.clientHeight.toString()) + mouseY) + 'px';
+                    for (var i = 0; i < currentTableTrElement.length; i++) {
+                        if (_this.rowEle === currentTableTrElement[i]) {
+                            currentTableTrElement[i].style.height = (parseFloat(currentTableTrElement[i].clientHeight.toString()) + mouseY) + 'px';
+                        }
+                        else {
+                            currentTableTrElement[i].style.height = tableTrElementPixel[i] + 'px';
+                        }
                     }
-                    _this.curTable.style.height = '';
                     if (!isNOU(tableReBox)) {
                         tableReBox.style.cssText = 'top: ' + (_this.calcPos(_this.curTable).top + tableHeight - 4) +
                             'px; left:' + (_this.calcPos(_this.curTable).left + tableWidth - 4) + 'px;';
@@ -1123,9 +1106,34 @@ var Table = /** @class */ (function () {
             detach(this.helper);
             this.helper = null;
         }
+        var colHelper = this.parent.element.querySelectorAll('.e-table-rhelper.e-column-helper');
+        Array.from(colHelper).forEach(function (element) {
+            if (element.parentNode) {
+                element.parentNode.removeChild(element);
+            }
+        });
+        for (var i = 0; i < this.curTable.rows.length; i++) {
+            for (var k = 0; k < this.curTable.rows[i].cells.length; k++) {
+                var width = this.convertPixelToPercentage(this.curTable.rows[i].cells[k].offsetWidth, parseInt(getComputedStyle(this.curTable).width, 10)) + '%';
+                this.curTable.rows[i].cells[k].style.width = width;
+            }
+        }
+        var colGroup = this.curTable.querySelector('colgroup');
+        if (colGroup) {
+            this.curTable.removeChild(colGroup);
+        }
         this.pageX = null;
         this.pageY = null;
         this.moveEle = null;
+        var currentTableTrElement = this.curTable.querySelectorAll("tr");
+        var tableTrPercentage = [];
+        for (var i = 0; i < currentTableTrElement.length; i++) {
+            var percentage = (parseFloat(currentTableTrElement[i].clientHeight.toString()) / parseFloat(this.curTable.clientHeight.toString())) * 100;
+            tableTrPercentage[i] = percentage;
+        }
+        for (var i = 0; i < currentTableTrElement.length; i++) {
+            currentTableTrElement[i].style.height = tableTrPercentage[i] + '%';
+        }
         var args = { event: e, requestType: 'table' };
         this.parent.trigger(events.resizeStop, args);
         this.parent.formatter.saveData();

package/styles/bootstrap-dark.css

@@ -533,6 +533,14 @@
 .e-richtexteditor.e-bigger .e-rte-content .e-content {
   font-size: 16px;
 }
+.e-bigger .e-richtexteditor .e-dialog .e-img-uploadwrap.e-droparea .e-browsebtn,
+.e-bigger .e-richtexteditor .e-dialog .e-aud-uploadwrap.e-droparea .e-browsebtn,
+.e-bigger .e-richtexteditor .e-dialog .e-vid-uploadwrap.e-droparea .e-browsebtn,
+.e-richtexteditor.e-bigger .e-dialog .e-img-uploadwrap.e-droparea .e-browsebtn,
+.e-richtexteditor.e-bigger .e-dialog .e-aud-uploadwrap.e-droparea .e-browsebtn,
+.e-richtexteditor.e-bigger .e-dialog .e-vid-uploadwrap.e-droparea .e-browsebtn {
+  top: -120px;
+}
 
 .e-richtexteditor {
   color: #f0f0f0;
@@ -1172,6 +1180,8 @@
 .e-rte-image.e-imginline,
 .e-rte-audio.e-audio-inline,
 .e-rte-video.e-video-inline {
+  margin-left: 5px;
+  margin-right: 5px;
   display: inline-block;
   float: none;
   max-width: calc(100% - 10px);
@@ -1229,19 +1239,19 @@
 }
 
 .e-rte-img-caption.e-imgcenter {
-  display: block;
+  display: contents;
   margin-left: auto;
   margin-right: auto;
 }
 
 .e-rte-img-caption.e-imgright {
-  display: block;
+  display: contents;
   margin-left: auto;
   margin-right: 0;
 }
 
 .e-rte-img-caption.e-imgleft {
-  display: block;
+  display: contents;
   margin-left: 0;
   margin-right: auto;
 }
@@ -1258,7 +1268,7 @@
 }
 
 .e-img-caption.e-rte-img-caption.e-imgbreak {
-  display: block;
+  display: contents;
 }
 
 .e-rte-table {
@@ -1443,13 +1453,13 @@
   margin: 0 auto;
   padding: 0 18px;
   position: relative;
-  top: -50px;
+  top: -120px;
 }
 .e-richtexteditor .e-dialog .e-vid-uploadwrap.e-droparea .e-browsebtn,
 .e-richtexteditor .e-rte-video-dialog.e-dialog.e-device.e-dlg-modal .e-vid-uploadwrap.e-droparea .e-browsebtn,
 .e-rte-elements .e-dialog .e-vid-uploadwrap.e-droparea .e-browsebtn,
 .e-rte-elements .e-rte-video-dialog.e-dialog.e-device.e-dlg-modal .e-vid-uploadwrap.e-droparea .e-browsebtn {
-  top: -130px;
+  top: -120px;
 }
 .e-richtexteditor .e-dialog.e-device.e-dlg-modal .e-img-uploadwrap.e-droparea .e-browsebtn,
 .e-richtexteditor .e-dialog.e-device.e-dlg-modal .e-aud-uploadwrap.e-droparea .e-browsebtn,
@@ -2606,7 +2616,7 @@
   margin: 0 auto;
   padding: 0 18px;
   position: relative;
-  top: -50px;
+  top: -120px;
 }
 .e-rte-elements.e-dialog .e-vid-uploadwrap.e-droparea .e-browsebtn,
 .e-rte-elements.e-dialog .e-rte-video-dialog.e-dialog.e-device.e-dlg-modal .e-vid-uploadwrap.e-droparea .e-browsebtn {
@@ -2955,14 +2965,20 @@
   display: block;
   font-family: "Helvetica Neue", "Helvetica", "Arial", sans-serif, "-apple-system", "BlinkMacSystemFont";
   font-size: 14px;
-  height: 185px;
+  height: 128px;
   margin: 0 auto;
   text-align: center;
   width: auto;
 }
 
 .e-dialog .e-vid-uploadwrap .e-droptext {
-  height: 108px;
+  height: 128px;
+}
+
+.e-bigger .e-richtexteditor .e-dialog .e-img-uploadwrap .e-droptext,
+.e-bigger .e-richtexteditor .e-dialog .e-aud-uploadwrap .e-droptext,
+.e-bigger .e-richtexteditor .e-dialog .e-vid-uploadwrap .e-droptext {
+  height: 140px;
 }
 
 .e-dialog.e-device.e-dlg-modal .e-img-uploadwrap .e-droptext,

package/styles/bootstrap.css

@@ -674,6 +674,14 @@
 .e-richtexteditor.e-bigger .e-rte-content .e-content {
   font-size: 16px;
 }
+.e-bigger .e-richtexteditor .e-dialog .e-img-uploadwrap.e-droparea .e-browsebtn,
+.e-bigger .e-richtexteditor .e-dialog .e-aud-uploadwrap.e-droparea .e-browsebtn,
+.e-bigger .e-richtexteditor .e-dialog .e-vid-uploadwrap.e-droparea .e-browsebtn,
+.e-richtexteditor.e-bigger .e-dialog .e-img-uploadwrap.e-droparea .e-browsebtn,
+.e-richtexteditor.e-bigger .e-dialog .e-aud-uploadwrap.e-droparea .e-browsebtn,
+.e-richtexteditor.e-bigger .e-dialog .e-vid-uploadwrap.e-droparea .e-browsebtn {
+  top: -120px;
+}
 
 .e-richtexteditor {
   color: #333;
@@ -1313,6 +1321,8 @@
 .e-rte-image.e-imginline,
 .e-rte-audio.e-audio-inline,
 .e-rte-video.e-video-inline {
+  margin-left: 5px;
+  margin-right: 5px;
   display: inline-block;
   float: none;
   max-width: calc(100% - 10px);
@@ -1370,19 +1380,19 @@
 }
 
 .e-rte-img-caption.e-imgcenter {
-  display: block;
+  display: contents;
   margin-left: auto;
   margin-right: auto;
 }
 
 .e-rte-img-caption.e-imgright {
-  display: block;
+  display: contents;
   margin-left: auto;
   margin-right: 0;
 }
 
 .e-rte-img-caption.e-imgleft {
-  display: block;
+  display: contents;
   margin-left: 0;
   margin-right: auto;
 }
@@ -1399,7 +1409,7 @@
 }
 
 .e-img-caption.e-rte-img-caption.e-imgbreak {
-  display: block;
+  display: contents;
 }
 
 .e-rte-table {
@@ -1584,13 +1594,13 @@
   margin: 0 auto;
   padding: 0 18px;
   position: relative;
-  top: -50px;
+  top: -120px;
 }
 .e-richtexteditor .e-dialog .e-vid-uploadwrap.e-droparea .e-browsebtn,
 .e-richtexteditor .e-rte-video-dialog.e-dialog.e-device.e-dlg-modal .e-vid-uploadwrap.e-droparea .e-browsebtn,
 .e-rte-elements .e-dialog .e-vid-uploadwrap.e-droparea .e-browsebtn,
 .e-rte-elements .e-rte-video-dialog.e-dialog.e-device.e-dlg-modal .e-vid-uploadwrap.e-droparea .e-browsebtn {
-  top: -130px;
+  top: -120px;
 }
 .e-richtexteditor .e-dialog.e-device.e-dlg-modal .e-img-uploadwrap.e-droparea .e-browsebtn,
 .e-richtexteditor .e-dialog.e-device.e-dlg-modal .e-aud-uploadwrap.e-droparea .e-browsebtn,
@@ -2752,7 +2762,7 @@
   margin: 0 auto;
   padding: 0 18px;
   position: relative;
-  top: -50px;
+  top: -120px;
 }
 .e-rte-elements.e-dialog .e-vid-uploadwrap.e-droparea .e-browsebtn,
 .e-rte-elements.e-dialog .e-rte-video-dialog.e-dialog.e-device.e-dlg-modal .e-vid-uploadwrap.e-droparea .e-browsebtn {
@@ -3101,14 +3111,20 @@
   display: block;
   font-family: "Helvetica Neue", "Helvetica", "Arial", sans-serif, "-apple-system", "BlinkMacSystemFont";
   font-size: 14px;
-  height: 185px;
+  height: 128px;
   margin: 0 auto;
   text-align: center;
   width: auto;
 }
 
 .e-dialog .e-vid-uploadwrap .e-droptext {
-  height: 108px;
+  height: 128px;
+}
+
+.e-bigger .e-richtexteditor .e-dialog .e-img-uploadwrap .e-droptext,
+.e-bigger .e-richtexteditor .e-dialog .e-aud-uploadwrap .e-droptext,
+.e-bigger .e-richtexteditor .e-dialog .e-vid-uploadwrap .e-droptext {
+  height: 140px;
 }
 
 .e-dialog.e-device.e-dlg-modal .e-img-uploadwrap .e-droptext,

package/styles/bootstrap4.css

@@ -769,6 +769,14 @@
 .e-richtexteditor.e-bigger .e-rte-content .e-content {
   font-size: 16px;
 }
+.e-bigger .e-richtexteditor .e-dialog .e-img-uploadwrap.e-droparea .e-browsebtn,
+.e-bigger .e-richtexteditor .e-dialog .e-aud-uploadwrap.e-droparea .e-browsebtn,
+.e-bigger .e-richtexteditor .e-dialog .e-vid-uploadwrap.e-droparea .e-browsebtn,
+.e-richtexteditor.e-bigger .e-dialog .e-img-uploadwrap.e-droparea .e-browsebtn,
+.e-richtexteditor.e-bigger .e-dialog .e-aud-uploadwrap.e-droparea .e-browsebtn,
+.e-richtexteditor.e-bigger .e-dialog .e-vid-uploadwrap.e-droparea .e-browsebtn {
+  top: -120px;
+}
 
 .e-richtexteditor {
   color: #212529;
@@ -908,7 +916,7 @@
 .e-richtexteditor .e-rte-toolbar .e-toolbar-extended .e-toolbar-item .e-dropdown-btn .e-rte-dropdown-btn-text,
 .e-richtexteditor .e-rte-toolbar.e-toolbar.e-extended-toolbar .e-toolbar-items .e-toolbar-item .e-dropdown-btn .e-rte-dropdown-btn-text,
 .e-richtexteditor .e-rte-toolbar.e-toolbar.e-extended-toolbar .e-toolbar-extended .e-toolbar-item .e-dropdown-btn .e-rte-dropdown-btn-text {
-  font-size: inherit;
+  font-size: 14px;
   font-weight: normal;
   overflow: hidden;
   text-overflow: ellipsis;
@@ -1408,6 +1416,8 @@
 .e-rte-image.e-imginline,
 .e-rte-audio.e-audio-inline,
 .e-rte-video.e-video-inline {
+  margin-left: 5px;
+  margin-right: 5px;
   display: inline-block;
   float: none;
   max-width: calc(100% - 10px);
@@ -1465,19 +1475,19 @@
 }
 
 .e-rte-img-caption.e-imgcenter {
-  display: block;
+  display: contents;
   margin-left: auto;
   margin-right: auto;
 }
 
 .e-rte-img-caption.e-imgright {
-  display: block;
+  display: contents;
   margin-left: auto;
   margin-right: 0;
 }
 
 .e-rte-img-caption.e-imgleft {
-  display: block;
+  display: contents;
   margin-left: 0;
   margin-right: auto;
 }
@@ -1494,7 +1504,7 @@
 }
 
 .e-img-caption.e-rte-img-caption.e-imgbreak {
-  display: block;
+  display: contents;
 }
 
 .e-rte-table {
@@ -1679,13 +1689,13 @@
   margin: 0 auto;
   padding: 0 18px;
   position: relative;
-  top: -50px;
+  top: -120px;
 }
 .e-richtexteditor .e-dialog .e-vid-uploadwrap.e-droparea .e-browsebtn,
 .e-richtexteditor .e-rte-video-dialog.e-dialog.e-device.e-dlg-modal .e-vid-uploadwrap.e-droparea .e-browsebtn,
 .e-rte-elements .e-dialog .e-vid-uploadwrap.e-droparea .e-browsebtn,
 .e-rte-elements .e-rte-video-dialog.e-dialog.e-device.e-dlg-modal .e-vid-uploadwrap.e-droparea .e-browsebtn {
-  top: -130px;
+  top: -120px;
 }
 .e-richtexteditor .e-dialog.e-device.e-dlg-modal .e-img-uploadwrap.e-droparea .e-browsebtn,
 .e-richtexteditor .e-dialog.e-device.e-dlg-modal .e-aud-uploadwrap.e-droparea .e-browsebtn,
@@ -1756,7 +1766,7 @@
   min-width: 120px;
   overflow: hidden;
   padding: 10px;
-  border: rgba(0, 0, 0, 0.2);
+  border: 1px solid rgba(0, 0, 0, 0.2);
 }
 .e-richtexteditor .e-rte-table-popup.e-popup-open .e-rte-tablecell,
 .e-rte-elements .e-rte-table-popup.e-popup-open .e-rte-tablecell {
@@ -2834,7 +2844,7 @@
   margin: 0 auto;
   padding: 0 18px;
   position: relative;
-  top: -50px;
+  top: -120px;
 }
 .e-rte-elements.e-dialog .e-vid-uploadwrap.e-droparea .e-browsebtn,
 .e-rte-elements.e-dialog .e-rte-video-dialog.e-dialog.e-device.e-dlg-modal .e-vid-uploadwrap.e-droparea .e-browsebtn {
@@ -2859,7 +2869,7 @@
   border: 1px solid #4e555b;
 }
 .e-richtexteditor .e-rte-toolbar .e-toolbar-item.e-active .e-tbar-btn .e-icons, .e-richtexteditor .e-rte-toolbar .e-toolbar-item.e-active .e-tbar-btn:focus .e-icons {
-  color: #212529;
+  color: #f8f9fa;
 }
 .e-richtexteditor .e-rte-toolbar .e-toolbar-item .e-icons {
   color: #212529;
@@ -2945,7 +2955,7 @@
   color: #212529;
 }
 .e-richtexteditor .e-rte-toolbar .e-toolbar-extended .e-toolbar-item.e-active .e-tbar-btn .e-icons {
-  color: #212529;
+  color: #f8f9fa;
 }
 .e-richtexteditor .e-rte-toolbar .e-toolbar-extended .e-toolbar-item.e-overlay .e-tbar-btn .e-icons {
   color: rgba(108, 117, 125, 0.3);
@@ -3154,7 +3164,7 @@
 }
 .e-rte-quick-popup .e-rte-quick-toolbar .e-toolbar-items .e-toolbar-item.e-active .e-tbar-btn .e-icons,
 .e-rte-quick-popup .e-rte-quick-toolbar .e-toolbar-items .e-toolbar-item.e-active .e-tbar-btn:focus .e-icons {
-  color: #212529;
+  color: #f8f9fa;
 }
 .e-rte-quick-popup .e-rte-quick-toolbar .e-toolbar-items .e-icons {
   color: #212529;
@@ -3183,14 +3193,20 @@
   display: block;
   font-family: "Helvetica Neue", "Helvetica", "Arial", sans-serif, "-apple-system", "BlinkMacSystemFont";
   font-size: 14px;
-  height: 185px;
+  height: 128px;
   margin: 0 auto;
   text-align: center;
   width: auto;
 }
 
 .e-dialog .e-vid-uploadwrap .e-droptext {
-  height: 108px;
+  height: 128px;
+}
+
+.e-bigger .e-richtexteditor .e-dialog .e-img-uploadwrap .e-droptext,
+.e-bigger .e-richtexteditor .e-dialog .e-aud-uploadwrap .e-droptext,
+.e-bigger .e-richtexteditor .e-dialog .e-vid-uploadwrap .e-droptext {
+  height: 140px;
 }
 
 .e-dialog.e-device.e-dlg-modal .e-img-uploadwrap .e-droptext,