@syncfusion/ej2-richtexteditor 24.2.7 → 24.2.8

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

@@ -17,7 +17,6 @@ var Table = /** @class */ (function () {
         this.pageY = null;
         this.moveEle = null;
         this.currentColumnResize = '';
-        this.currentMarginLeft = 0;
         this.parent = parent;
         this.rteID = parent.element.id;
         this.l10n = serviceLocator.getService('rteLocale');
@@ -633,7 +632,7 @@ var Table = /** @class */ (function () {
     };
     Table.prototype.tableResizeEleCreation = function (table, e) {
         this.parent.preventDefaultResize(e);
-        var columns = table.rows[this.calMaxCol(table)].cells;
+        var columns = this.calMaxCol(this.curTable);
         var rows = [];
         for (var i = 0; i < table.rows.length; i++) {
             for (var j = 0; j < table.rows[i].cells.length; j++) {
@@ -765,6 +764,7 @@ var Table = /** @class */ (function () {
         if (target.classList.contains(classes.CLS_TB_COL_RES) ||
             target.classList.contains(classes.CLS_TB_ROW_RES) ||
             target.classList.contains(classes.CLS_TB_BOX_RES)) {
+            this.resetResizeHelper(this.curTable);
             e.preventDefault();
             this.parent.preventDefaultResize(e);
             removeClass(this.curTable.querySelectorAll('td,th'), classes.CLS_TABLE_SEL);
@@ -775,9 +775,10 @@ var Table = /** @class */ (function () {
             this.hideTableQuickToolbar();
             if (target.classList.contains(classes.CLS_TB_COL_RES)) {
                 this.resizeBtnStat.column = true;
-                if (parseInt(target.getAttribute('data-col'), 10) === this.curTable.rows[this.calMaxCol(this.curTable)].cells.length) {
+                if (parseInt(target.getAttribute('data-col'), 10) === this.calMaxCol(this.curTable).length) {
                     this.currentColumnResize = 'last';
-                    this.columnEle = this.curTable.rows[this.calMaxCol(this.curTable)].cells[parseInt(target.getAttribute('data-col'), 10) - 1];
+                    this.colIndex = parseInt(target.getAttribute('data-col'), 10) - 1;
+                    this.columnEle = this.calMaxCol(this.curTable)[this.colIndex];
                 }
                 else {
                     if (parseInt(target.getAttribute('data-col'), 10) === 0) {
@@ -824,9 +825,9 @@ var Table = /** @class */ (function () {
                             }
                         }
                     }
-                    this.columnEle = this.curTable.rows[this.calMaxCol(this.curTable)].cells[parseInt(target.getAttribute('data-col'), 10)];
+                    this.colIndex = parseInt(target.getAttribute('data-col'), 10);
+                    this.columnEle = this.calMaxCol(this.curTable)[this.colIndex];
                 }
-                this.colIndex = this.columnEle.cellIndex;
                 this.moveEle = e.target;
                 this.appendHelper();
             }
@@ -915,16 +916,33 @@ var Table = /** @class */ (function () {
             this.helper.style.top = top_1 + 'px';
         }
     };
-    Table.prototype.calMaxCol = function (element) {
-        var max = 0;
-        var maxRowIndex;
-        for (var i = 0; i < element.rows.length; i++) {
-            if (max < element.rows[i].cells.length) {
-                maxRowIndex = i;
-                max = element.rows[i].cells.length;
+    Table.prototype.calMaxCol = function (curTable) {
+        var cellColl = curTable.rows[0].cells;
+        var cellCount = 0;
+        for (var cell = 0; cell < cellColl.length; cell++) {
+            cellCount = cellCount + cellColl[cell].colSpan;
+        }
+        var cells = new Array(cellCount);
+        var rowSpanCells = new Map();
+        for (var i = 0; i < curTable.rows.length; i++) {
+            var currentColIndex = 0;
+            for (var k = 0; k < curTable.rows[i].cells.length; k++) {
+                for (var l = 1; l < curTable.rows[i].cells[k].rowSpan; l++) {
+                    var key = "" + (i + l) + currentColIndex;
+                    rowSpanCells.set(key, curTable.rows[i].cells[k]);
+                }
+                var cellIndex = this.getCellIndex(rowSpanCells, i, k);
+                if (cellIndex > currentColIndex) {
+                    currentColIndex = cellIndex;
+                }
+                var width = curTable.rows[i].cells[k].offsetWidth;
+                if (!cells[currentColIndex] || width < cells[currentColIndex].offsetWidth) {
+                    cells[currentColIndex] = curTable.rows[i].cells[k];
+                }
+                currentColIndex += 1 + curTable.rows[i].cells[k].colSpan - 1;
             }
         }
-        return maxRowIndex;
+        return cells;
     };
     Table.prototype.resizing = function (e) {
         var _this = this;
@@ -962,7 +980,6 @@ var Table = /** @class */ (function () {
                 }
                 if (_this.resizeBtnStat.column) {
                     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('%')) {
                         currentTableWidth = parseFloat(_this.curTable.style.width.split('%')[0]);
@@ -970,7 +987,8 @@ var Table = /** @class */ (function () {
                     else {
                         currentTableWidth = _this.getCurrentTableWidth(_this.curTable.offsetWidth, _this.parent.inputElement.offsetWidth);
                     }
-                    var currentColumnCellWidth = parseFloat(_this.curTable.rows[cellRow].cells[_this.colIndex >= _this.curTable.rows[cellRow].cells.length ? _this.curTable.rows[cellRow].cells.length - 1 : _this.colIndex].style.width.split('%')[0]);
+                    var currentCol = _this.calMaxCol(_this.curTable)[_this.colIndex];
+                    var currentColResizableWidth = _this.getCurrentColWidth(currentCol, tableWidth);
                     if (_this.currentColumnResize === 'first') {
                         mouseX = mouseX - 0.75; //This was done for to make the gripper and the table first/last column will be close.
                         _this.removeResizeElement();
@@ -979,16 +997,25 @@ var Table = /** @class */ (function () {
                             _this.curTable.style.maxWidth = maxiumWidth + 'px';
                         }
                         // Below the value '100' is the 100% width of the parent element.
-                        if (((mouseX !== 0 && 5 < currentColumnCellWidth) || mouseX < 0) && currentTableWidth <= 100 &&
+                        if (((mouseX !== 0 && 5 < currentColResizableWidth) || mouseX < 0) && currentTableWidth <= 100 &&
                             _this.convertPixelToPercentage(tableWidth - mouseX, widthCompare) <= 100) {
                             var firstColumnsCell = _this.findFirstLastColCells(_this.curTable, true);
                             _this.curTable.style.width = _this.convertPixelToPercentage(tableWidth - mouseX, widthCompare) > 100 ? (100 + '%') :
                                 (_this.convertPixelToPercentage(tableWidth - mouseX, widthCompare) + '%');
                             var differenceWidth = currentTableWidth - _this.convertPixelToPercentage(tableWidth - mouseX, widthCompare);
-                            _this.currentMarginLeft = _this.currentMarginLeft + differenceWidth;
-                            _this.curTable.style.marginLeft = 'calc(' + (_this.curTable.style.width === '100%' ? 0 : _this.currentMarginLeft) + '%)';
+                            var preMarginLeft = 0;
+                            if (!isNullOrUndefined(_this.curTable.style.marginLeft) && _this.curTable.style.marginLeft !== '') {
+                                var regex = /[-+]?\d*\.\d+|\d+/;
+                                var value = _this.curTable.style.marginLeft.match(regex);
+                                if (!isNullOrUndefined(value)) {
+                                    preMarginLeft = parseFloat(value[0]);
+                                }
+                            }
+                            var currentMarginLeft = preMarginLeft + differenceWidth;
+                            _this.curTable.style.marginLeft = 'calc(' + (_this.curTable.style.width === '100%' ? 0 : currentMarginLeft) + '%)';
                             for (var i = 0; i < firstColumnsCell.length; i++) {
-                                _this.curTable.rows[i].cells[_this.colIndex].style.width = (currentColumnCellWidth - differenceWidth) + '%';
+                                var currentColumnCellWidth = _this.getCurrentColWidth(firstColumnsCell[i], tableWidth);
+                                firstColumnsCell[i].style.width = (currentColumnCellWidth - differenceWidth) + '%';
                             }
                         }
                     }
@@ -1000,16 +1027,14 @@ var Table = /** @class */ (function () {
                             _this.curTable.style.maxWidth = maxiumWidth + 'px';
                         }
                         // Below the value '100' is the 100% width of the parent element.
-                        if (((mouseX !== 0 && 5 < currentColumnCellWidth) || mouseX > 0) &&
+                        if (((mouseX !== 0 && 5 < currentColResizableWidth) || mouseX > 0) &&
                             currentTableWidth <= 100 && _this.convertPixelToPercentage(tableWidth + mouseX, widthCompare) <= 100) {
                             var lastColumnsCell = _this.findFirstLastColCells(_this.curTable, false);
                             _this.curTable.style.width = _this.convertPixelToPercentage(tableWidth + mouseX, widthCompare) > 100 ? (100 + '%') : (_this.convertPixelToPercentage(tableWidth + mouseX, widthCompare) + '%');
                             var differenceWidth = currentTableWidth - _this.convertPixelToPercentage(tableWidth + mouseX, widthCompare);
                             for (var i = 0; i < lastColumnsCell.length; i++) {
-                                if (_this.curTable.rows[i].cells[_this.colIndex]) {
-                                    _this.curTable.rows[i].cells[_this.curTable.rows[i].cells.length === _this.colIndex ?
-                                        _this.colIndex - 1 : _this.colIndex].style.width = (currentColumnCellWidth - differenceWidth) + '%';
-                                }
+                                var currentColumnCellWidth = _this.getCurrentColWidth(lastColumnsCell[i], tableWidth);
+                                lastColumnsCell[i].style.width = (currentColumnCellWidth - differenceWidth) + '%';
                             }
                         }
                     }
@@ -1035,7 +1060,7 @@ var Table = /** @class */ (function () {
                             tableTrElementPixel[i] = (parseFloat(currentTableTrElement[i].clientHeight.toString()));
                         }
                     }
-                    _this.curTable.style.height = (parseFloat(_this.curTable.clientHeight.toString()) + mouseY) + 'px';
+                    _this.curTable.style.height = (parseFloat(_this.curTable.clientHeight.toString()) + ((mouseY > 0) ? 0 : 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';
@@ -1070,6 +1095,16 @@ var Table = /** @class */ (function () {
             }
         });
     };
+    Table.prototype.getCurrentColWidth = function (col, tableWidth) {
+        var currentColWidth = 0;
+        if (col.style.width !== '' && col.style.width.includes('%')) {
+            currentColWidth = parseFloat(col.style.width.split('%')[0]);
+        }
+        else {
+            currentColWidth = this.convertPixelToPercentage(col.offsetWidth, tableWidth);
+        }
+        return currentColWidth;
+    };
     Table.prototype.getCurrentTableWidth = function (tableWidth, parentWidth) {
         var currentTableWidth = 0;
         currentTableWidth = tableWidth / parentWidth * 100;
@@ -1077,12 +1112,22 @@ var Table = /** @class */ (function () {
     };
     Table.prototype.findFirstLastColCells = function (table, isFirst) {
         var resultColumns = [];
-        var rows = table.querySelectorAll('tr');
-        for (var i = 0; i < rows.length; i++) {
-            if (rows[i].closest('table') === table) {
-                var columns = rows[i].querySelectorAll('th, td');
-                resultColumns.push(isFirst ? columns[0] : columns[columns.length - 1]);
+        var rows = table.rows;
+        var rowSpanCellIndexs = new Array();
+        var _loop_1 = function (i) {
+            var cellIndex = isFirst ? 0 : rows[i].cells.length - 1;
+            var column = rows[i].cells[cellIndex];
+            for (var rowSpan = 1; rowSpan < column.rowSpan; rowSpan++) {
+                var key = i + rowSpan + "-" + cellIndex;
+                rowSpanCellIndexs.push(key);
             }
+            var spannedCellKey = i + "-" + cellIndex;
+            if (rowSpanCellIndexs.length === 0 || (isFirst && rowSpanCellIndexs.indexOf(spannedCellKey) === -1) || (!isFirst && rowSpanCellIndexs.indexOf(spannedCellKey) === -1 && rowSpanCellIndexs.every(function (key) { return key.split('-')[0] !== i.toString(); }))) {
+                resultColumns.push(column);
+            }
+        };
+        for (var i = 0; i < rows.length; i++) {
+            _loop_1(i);
         }
         return resultColumns;
     };
@@ -1106,22 +1151,7 @@ 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.resetResizeHelper(this.curTable);
         this.pageX = null;
         this.pageY = null;
         this.moveEle = null;
@@ -1138,6 +1168,30 @@ var Table = /** @class */ (function () {
         this.parent.trigger(events.resizeStop, args);
         this.parent.formatter.saveData();
     };
+    Table.prototype.resetResizeHelper = function (curTable) {
+        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);
+            }
+        });
+        var rowHelper = this.parent.element.querySelectorAll('.e-table-rhelper.e-row-helper');
+        Array.from(rowHelper).forEach(function (element) {
+            if (element.parentNode) {
+                element.parentNode.removeChild(element);
+            }
+        });
+        var colGroup = curTable.querySelector('colgroup');
+        if (colGroup) {
+            for (var i = 0; i < curTable.rows.length; i++) {
+                for (var k = 0; k < curTable.rows[i].cells.length; k++) {
+                    var width = this.convertPixelToPercentage(curTable.rows[i].cells[k].offsetWidth, parseInt(getComputedStyle(curTable).width, 10)) + '%';
+                    curTable.rows[i].cells[k].style.width = width;
+                }
+            }
+            curTable.removeChild(colGroup);
+        }
+    };
     Table.prototype.resizeBtnInit = function () {
         return this.resizeBtnStat = { column: false, row: false, tableBox: false };
     };
@@ -1247,6 +1301,7 @@ var Table = /** @class */ (function () {
         if (!isNOU(this.parent.cssClass)) {
             addClass([this.popupObj.element], this.parent.getCssClass());
         }
+        btnEle.focus();
         this.popupObj.refreshPosition(target);
     };
     Table.prototype.onIframeMouseDown = function () {
@@ -1579,12 +1634,18 @@ var Table = /** @class */ (function () {
         var _this = this;
         if (this.curTable) {
             setTimeout(function () {
-                var mouseOverEvent = document.createEvent('MouseEvents');
-                mouseOverEvent.initEvent('mouseover', true, true);
-                _this.curTable.dispatchEvent(mouseOverEvent);
+                _this.updateResizeIconPosition();
             }, 1);
         }
     };
+    Table.prototype.updateResizeIconPosition = function () {
+        var tableReBox = this.parent.contentModule.getEditPanel().querySelector('.e-table-box');
+        if (!isNOU(tableReBox)) {
+            var tablePosition = this.calcPos(this.curTable);
+            tableReBox.style.cssText = 'top: ' + (tablePosition.top + parseInt(getComputedStyle(this.curTable).height, 10) - 4) +
+                'px; left:' + (tablePosition.left + parseInt(getComputedStyle(this.curTable).width, 10) - 4) + 'px;';
+        }
+    };
     return Table;
 }());
 export { Table };

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

@@ -108,6 +108,19 @@ 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) {
@@ -152,19 +165,6 @@ var ToolbarRenderer = /** @class */ (function () {
             });
             this.tooltip.appendTo(args.target);
         }
-        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(document.body);
-        }
     };
     /**
      * renderDropDownButton method

package/styles/bootstrap-dark.css

@@ -451,8 +451,8 @@
 .e-richtexteditor.e-bigger .e-rte-toolbar.e-toolbar.e-extended-toolbar .e-toolbar-extended .e-toolbar-item .e-tbar-btn.e-btn.e-control.e-rte-dropdown-btn.e-dropdown-btn:hover,
 .e-richtexteditor.e-bigger .e-rte-toolbar.e-toolbar.e-extended-toolbar .e-toolbar-extended .e-toolbar-item .e-tbar-btn.e-btn.e-control.e-rte-dropdown-btn.e-dropdown-btn:focus,
 .e-richtexteditor.e-bigger .e-rte-toolbar.e-toolbar.e-extended-toolbar .e-toolbar-extended .e-toolbar-item .e-tbar-btn.e-btn.e-control.e-rte-dropdown-btn.e-dropdown-btn:active {
-  padding-left: 11px;
-  padding-right: 6px;
+  padding-left: 12px;
+  padding-right: 7px;
 }
 .e-bigger .e-richtexteditor .e-rte-toolbar .e-toolbar-items .e-toolbar-item.e-active .e-tbar-btn.e-btn,
 .e-bigger .e-richtexteditor .e-rte-toolbar .e-toolbar-extended .e-toolbar-item.e-active .e-tbar-btn.e-btn,
@@ -462,7 +462,7 @@
 .e-richtexteditor.e-bigger .e-rte-toolbar .e-toolbar-extended .e-toolbar-item.e-active .e-tbar-btn.e-btn,
 .e-richtexteditor.e-bigger .e-rte-toolbar.e-toolbar.e-extended-toolbar .e-toolbar-items .e-toolbar-item.e-active .e-tbar-btn.e-btn,
 .e-richtexteditor.e-bigger .e-rte-toolbar.e-toolbar.e-extended-toolbar .e-toolbar-extended .e-toolbar-item.e-active .e-tbar-btn.e-btn {
-  padding: 0 6px;
+  padding: 0 7px;
 }
 .e-bigger .e-richtexteditor .e-rte-toolbar .e-toolbar-items .e-dropdown-btn .e-rte-color-content,
 .e-bigger .e-richtexteditor .e-rte-toolbar .e-toolbar-extended .e-dropdown-btn .e-rte-color-content,
@@ -698,8 +698,8 @@
 .e-richtexteditor .e-rte-toolbar.e-toolbar.e-extended-toolbar .e-toolbar-extended .e-toolbar-item .e-dropdown-btn:hover,
 .e-richtexteditor .e-rte-toolbar.e-toolbar.e-extended-toolbar .e-toolbar-extended .e-toolbar-item .e-dropdown-btn:focus,
 .e-richtexteditor .e-rte-toolbar.e-toolbar.e-extended-toolbar .e-toolbar-extended .e-toolbar-item .e-dropdown-btn:active {
-  padding-left: 8px;
-  padding-right: 2.5px;
+  padding-left: 9px;
+  padding-right: 3.5px;
 }
 .e-richtexteditor .e-rte-toolbar .e-toolbar-items .e-toolbar-item .e-rte-font-color .e-selected-color.e-icons::before,
 .e-richtexteditor .e-rte-toolbar .e-toolbar-extended .e-toolbar-item .e-rte-font-color .e-selected-color.e-icons::before,
@@ -744,7 +744,7 @@
 .e-richtexteditor .e-rte-toolbar .e-toolbar-extended .e-toolbar-item.e-active .e-tbar-btn.e-btn,
 .e-richtexteditor .e-rte-toolbar.e-toolbar.e-extended-toolbar .e-toolbar-items .e-toolbar-item.e-active .e-tbar-btn.e-btn,
 .e-richtexteditor .e-rte-toolbar.e-toolbar.e-extended-toolbar .e-toolbar-extended .e-toolbar-item.e-active .e-tbar-btn.e-btn {
-  padding: 0 1.5px;
+  padding: 0 2.5px;
 }
 .e-richtexteditor .e-rte-toolbar .e-toolbar-items .e-dropdown-btn .e-rte-color-content,
 .e-richtexteditor .e-rte-toolbar .e-toolbar-extended .e-dropdown-btn .e-rte-color-content,
@@ -1776,6 +1776,14 @@
 .e-bigger .e-rte-quick-popup .e-rte-quick-toolbar {
   min-height: 48px;
 }
+.e-bigger .e-rte-quick-popup .e-rte-quick-toolbar .e-toolbar-items .e-rte-backgroundcolor-dropdown .e-rte-color-content,
+.e-bigger .e-rte-quick-popup .e-rte-quick-toolbar .e-toolbar-items .e-rte-backgroundcolor-dropdown .e-caret {
+  height: 30px;
+}
+.e-bigger .e-rte-quick-popup .e-rte-quick-toolbar .e-toolbar-items .e-rte-backgroundcolor-dropdown .e-rte-color-content:hover,
+.e-bigger .e-rte-quick-popup .e-rte-quick-toolbar .e-toolbar-items .e-rte-backgroundcolor-dropdown .e-caret:hover {
+  height: 30px;
+}
 .e-bigger .e-rte-quick-popup .e-rte-quick-toolbar .e-toolbar-items:not(.e-tbar-pos) {
   margin: 0 6px;
   min-height: 48px;
@@ -1977,8 +1985,8 @@
 .e-rte-toolbar.e-toolbar .e-toolbar-extended .e-toolbar-item .e-rte-bulletformatlist-dropdown.e-dropdown-btn.e-tbar-btn.e-btn.e-control:active,
 .e-rte-toolbar.e-toolbar .e-toolbar-extended .e-toolbar-item .e-rte-bulletformatlist-dropdown.e-dropdown-btn.e-tbar-btn.e-btn.e-control.e-active,
 .e-rte-toolbar.e-toolbar .e-toolbar-extended .e-toolbar-item .e-rte-bulletformatlist-dropdown.e-dropdown-btn.e-tbar-btn.e-btn.e-control.e-active:hover {
-  padding-left: 0;
-  padding-right: 0;
+  padding-left: 1px;
+  padding-right: 1px;
 }
 .e-rte-toolbar.e-toolbar.e-extended-toolbar .e-toolbar-items .e-toolbar-item .e-rte-fontcolor-dropdown.e-dropdown-btn.e-tbar-btn.e-btn.e-control .e-rte-color-content,
 .e-rte-toolbar.e-toolbar.e-extended-toolbar .e-toolbar-items .e-toolbar-item .e-rte-fontcolor-dropdown.e-dropdown-btn.e-tbar-btn.e-btn.e-control .e-rte-list-primary-content,
@@ -2233,8 +2241,8 @@
 .e-bigger .e-rte-toolbar.e-toolbar .e-toolbar-extended .e-toolbar-item .e-rte-bulletformatlist-dropdown.e-dropdown-btn.e-tbar-btn.e-btn.e-control:hover,
 .e-bigger .e-rte-toolbar.e-toolbar .e-toolbar-extended .e-toolbar-item .e-rte-bulletformatlist-dropdown.e-dropdown-btn.e-tbar-btn.e-btn.e-control:focus,
 .e-bigger .e-rte-toolbar.e-toolbar .e-toolbar-extended .e-toolbar-item .e-rte-bulletformatlist-dropdown.e-dropdown-btn.e-tbar-btn.e-btn.e-control:active {
-  padding-left: 0;
-  padding-right: 0;
+  padding-left: 1px;
+  padding-right: 1px;
 }
 .e-bigger .e-rte-toolbar.e-toolbar.e-extended-toolbar .e-toolbar-items .e-toolbar-item .e-rte-fontcolor-dropdown.e-dropdown-btn.e-tbar-btn.e-btn.e-control .e-rte-list-primary-content .e-order-list, .e-bigger .e-rte-toolbar.e-toolbar.e-extended-toolbar .e-toolbar-items .e-toolbar-item .e-rte-fontcolor-dropdown.e-dropdown-btn.e-tbar-btn.e-btn.e-control.e-active .e-rte-list-primary-content .e-order-list,
 .e-bigger .e-rte-toolbar.e-toolbar.e-extended-toolbar .e-toolbar-items .e-toolbar-item .e-rte-fontcolor-dropdown.e-dropdown-btn.e-tbar-btn.e-btn.e-control .e-rte-list-primary-content .e-unorder-list, .e-bigger .e-rte-toolbar.e-toolbar.e-extended-toolbar .e-toolbar-items .e-toolbar-item .e-rte-fontcolor-dropdown.e-dropdown-btn.e-tbar-btn.e-btn.e-control.e-active .e-rte-list-primary-content .e-unorder-list,
@@ -2723,9 +2731,6 @@
 .e-richtexteditor .e-rte-toolbar .e-toolbar-extended .e-toolbar-item .e-tbar-btn:hover .e-icons {
   color: #f0f0f0;
 }
-.e-richtexteditor .e-rte-toolbar .e-toolbar-extended .e-toolbar-item .e-tbar-btn:focus .e-icons {
-  color: #f0f0f0;
-}
 .e-richtexteditor .e-rte-toolbar .e-toolbar-extended .e-toolbar-item.e-active .e-tbar-btn .e-icons {
   color: #f0f0f0;
 }
@@ -2908,6 +2913,20 @@
 .e-rte-quick-popup .e-rte-quick-toolbar .e-toolbar-items {
   background: #313131;
 }
+.e-rte-quick-popup .e-rte-quick-toolbar .e-toolbar-items .e-rte-backgroundcolor-dropdown .e-rte-color-content {
+  padding-top: 1px;
+  padding-top: 5px;
+  height: 30px;
+}
+.e-rte-quick-popup .e-rte-quick-toolbar .e-toolbar-items .e-rte-backgroundcolor-dropdown .e-rte-color-content:hover {
+  background: #313131;
+}
+.e-rte-quick-popup .e-rte-quick-toolbar .e-toolbar-items .e-rte-backgroundcolor-dropdown .e-caret:hover {
+  background: #313131;
+}
+.e-rte-quick-popup .e-rte-quick-toolbar .e-toolbar-items .e-rte-backgroundcolor-dropdown.e-tbar-btn:hover {
+  background: #131313;
+}
 .e-rte-quick-popup .e-rte-quick-toolbar .e-toolbar-items .e-separator {
   border: 0.5px solid rgba(26, 26, 26, 0.05);
 }

package/styles/bootstrap.css

@@ -1,8 +1,8 @@
 .e-richtexteditor .e-rte-toolbar.e-extended-toolbar .e-toolbar-items .e-toolbar-item .e-rte-dropdown-btn.e-active.e-tbar-btn {
   background: #e6e6e6;
-  border: 1px solid #8c8c8c;
-  padding-left: 8px;
-  padding-right: 2.5px;
+  border: 0;
+  padding-left: 9px;
+  padding-right: 3.5px;
 }
 
 .e-bigger .e-richtexteditor .e-rte-toolbar.e-extended-toolbar .e-toolbar-items .e-toolbar-item .e-tbar-btn.e-btn.e-control.e-dropdown-btn.e-rte-dropdown-btn.e-active {
@@ -592,8 +592,8 @@
 .e-richtexteditor.e-bigger .e-rte-toolbar.e-toolbar.e-extended-toolbar .e-toolbar-extended .e-toolbar-item .e-tbar-btn.e-btn.e-control.e-rte-dropdown-btn.e-dropdown-btn:hover,
 .e-richtexteditor.e-bigger .e-rte-toolbar.e-toolbar.e-extended-toolbar .e-toolbar-extended .e-toolbar-item .e-tbar-btn.e-btn.e-control.e-rte-dropdown-btn.e-dropdown-btn:focus,
 .e-richtexteditor.e-bigger .e-rte-toolbar.e-toolbar.e-extended-toolbar .e-toolbar-extended .e-toolbar-item .e-tbar-btn.e-btn.e-control.e-rte-dropdown-btn.e-dropdown-btn:active {
-  padding-left: 11px;
-  padding-right: 6px;
+  padding-left: 12px;
+  padding-right: 7px;
 }
 .e-bigger .e-richtexteditor .e-rte-toolbar .e-toolbar-items .e-toolbar-item.e-active .e-tbar-btn.e-btn,
 .e-bigger .e-richtexteditor .e-rte-toolbar .e-toolbar-extended .e-toolbar-item.e-active .e-tbar-btn.e-btn,
@@ -603,7 +603,7 @@
 .e-richtexteditor.e-bigger .e-rte-toolbar .e-toolbar-extended .e-toolbar-item.e-active .e-tbar-btn.e-btn,
 .e-richtexteditor.e-bigger .e-rte-toolbar.e-toolbar.e-extended-toolbar .e-toolbar-items .e-toolbar-item.e-active .e-tbar-btn.e-btn,
 .e-richtexteditor.e-bigger .e-rte-toolbar.e-toolbar.e-extended-toolbar .e-toolbar-extended .e-toolbar-item.e-active .e-tbar-btn.e-btn {
-  padding: 0 6px;
+  padding: 0 7px;
 }
 .e-bigger .e-richtexteditor .e-rte-toolbar .e-toolbar-items .e-dropdown-btn .e-rte-color-content,
 .e-bigger .e-richtexteditor .e-rte-toolbar .e-toolbar-extended .e-dropdown-btn .e-rte-color-content,
@@ -839,8 +839,8 @@
 .e-richtexteditor .e-rte-toolbar.e-toolbar.e-extended-toolbar .e-toolbar-extended .e-toolbar-item .e-dropdown-btn:hover,
 .e-richtexteditor .e-rte-toolbar.e-toolbar.e-extended-toolbar .e-toolbar-extended .e-toolbar-item .e-dropdown-btn:focus,
 .e-richtexteditor .e-rte-toolbar.e-toolbar.e-extended-toolbar .e-toolbar-extended .e-toolbar-item .e-dropdown-btn:active {
-  padding-left: 8px;
-  padding-right: 2.5px;
+  padding-left: 9px;
+  padding-right: 3.5px;
 }
 .e-richtexteditor .e-rte-toolbar .e-toolbar-items .e-toolbar-item .e-rte-font-color .e-selected-color.e-icons::before,
 .e-richtexteditor .e-rte-toolbar .e-toolbar-extended .e-toolbar-item .e-rte-font-color .e-selected-color.e-icons::before,
@@ -885,7 +885,7 @@
 .e-richtexteditor .e-rte-toolbar .e-toolbar-extended .e-toolbar-item.e-active .e-tbar-btn.e-btn,
 .e-richtexteditor .e-rte-toolbar.e-toolbar.e-extended-toolbar .e-toolbar-items .e-toolbar-item.e-active .e-tbar-btn.e-btn,
 .e-richtexteditor .e-rte-toolbar.e-toolbar.e-extended-toolbar .e-toolbar-extended .e-toolbar-item.e-active .e-tbar-btn.e-btn {
-  padding: 0 1.5px;
+  padding: 0 2.5px;
 }
 .e-richtexteditor .e-rte-toolbar .e-toolbar-items .e-dropdown-btn .e-rte-color-content,
 .e-richtexteditor .e-rte-toolbar .e-toolbar-extended .e-dropdown-btn .e-rte-color-content,
@@ -1922,6 +1922,14 @@
 .e-bigger .e-rte-quick-popup .e-rte-quick-toolbar {
   min-height: 48px;
 }
+.e-bigger .e-rte-quick-popup .e-rte-quick-toolbar .e-toolbar-items .e-rte-backgroundcolor-dropdown .e-rte-color-content,
+.e-bigger .e-rte-quick-popup .e-rte-quick-toolbar .e-toolbar-items .e-rte-backgroundcolor-dropdown .e-caret {
+  height: 33px;
+}
+.e-bigger .e-rte-quick-popup .e-rte-quick-toolbar .e-toolbar-items .e-rte-backgroundcolor-dropdown .e-rte-color-content:hover,
+.e-bigger .e-rte-quick-popup .e-rte-quick-toolbar .e-toolbar-items .e-rte-backgroundcolor-dropdown .e-caret:hover {
+  height: 33px;
+}
 .e-bigger .e-rte-quick-popup .e-rte-quick-toolbar .e-toolbar-items:not(.e-tbar-pos) {
   margin: 0 6px;
   min-height: 48px;
@@ -2123,8 +2131,8 @@
 .e-rte-toolbar.e-toolbar .e-toolbar-extended .e-toolbar-item .e-rte-bulletformatlist-dropdown.e-dropdown-btn.e-tbar-btn.e-btn.e-control:active,
 .e-rte-toolbar.e-toolbar .e-toolbar-extended .e-toolbar-item .e-rte-bulletformatlist-dropdown.e-dropdown-btn.e-tbar-btn.e-btn.e-control.e-active,
 .e-rte-toolbar.e-toolbar .e-toolbar-extended .e-toolbar-item .e-rte-bulletformatlist-dropdown.e-dropdown-btn.e-tbar-btn.e-btn.e-control.e-active:hover {
-  padding-left: 0;
-  padding-right: 0;
+  padding-left: 1px;
+  padding-right: 1px;
 }
 .e-rte-toolbar.e-toolbar.e-extended-toolbar .e-toolbar-items .e-toolbar-item .e-rte-fontcolor-dropdown.e-dropdown-btn.e-tbar-btn.e-btn.e-control .e-rte-color-content,
 .e-rte-toolbar.e-toolbar.e-extended-toolbar .e-toolbar-items .e-toolbar-item .e-rte-fontcolor-dropdown.e-dropdown-btn.e-tbar-btn.e-btn.e-control .e-rte-list-primary-content,
@@ -2379,8 +2387,8 @@
 .e-bigger .e-rte-toolbar.e-toolbar .e-toolbar-extended .e-toolbar-item .e-rte-bulletformatlist-dropdown.e-dropdown-btn.e-tbar-btn.e-btn.e-control:hover,
 .e-bigger .e-rte-toolbar.e-toolbar .e-toolbar-extended .e-toolbar-item .e-rte-bulletformatlist-dropdown.e-dropdown-btn.e-tbar-btn.e-btn.e-control:focus,
 .e-bigger .e-rte-toolbar.e-toolbar .e-toolbar-extended .e-toolbar-item .e-rte-bulletformatlist-dropdown.e-dropdown-btn.e-tbar-btn.e-btn.e-control:active {
-  padding-left: 0;
-  padding-right: 0;
+  padding-left: 1px;
+  padding-right: 1px;
 }
 .e-bigger .e-rte-toolbar.e-toolbar.e-extended-toolbar .e-toolbar-items .e-toolbar-item .e-rte-fontcolor-dropdown.e-dropdown-btn.e-tbar-btn.e-btn.e-control .e-rte-list-primary-content .e-order-list, .e-bigger .e-rte-toolbar.e-toolbar.e-extended-toolbar .e-toolbar-items .e-toolbar-item .e-rte-fontcolor-dropdown.e-dropdown-btn.e-tbar-btn.e-btn.e-control.e-active .e-rte-list-primary-content .e-order-list,
 .e-bigger .e-rte-toolbar.e-toolbar.e-extended-toolbar .e-toolbar-items .e-toolbar-item .e-rte-fontcolor-dropdown.e-dropdown-btn.e-tbar-btn.e-btn.e-control .e-rte-list-primary-content .e-unorder-list, .e-bigger .e-rte-toolbar.e-toolbar.e-extended-toolbar .e-toolbar-items .e-toolbar-item .e-rte-fontcolor-dropdown.e-dropdown-btn.e-tbar-btn.e-btn.e-control.e-active .e-rte-list-primary-content .e-unorder-list,
@@ -2784,7 +2792,7 @@
 }
 .e-richtexteditor .e-rte-toolbar .e-toolbar-item.e-active .e-tbar-btn, .e-richtexteditor .e-rte-toolbar .e-toolbar-item.e-active .e-tbar-btn:focus {
   background: rgba(0, 0, 0, 0.12);
-  border: 1px solid #8c8c8c;
+  border: 0;
 }
 .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: #000;
@@ -2852,7 +2860,7 @@
 }
 .e-richtexteditor .e-rte-toolbar .e-toolbar-item .e-rte-backgroundcolor-dropdown.e-active, .e-richtexteditor .e-rte-toolbar .e-toolbar-item .e-rte-fontcolor-dropdown.e-active, .e-richtexteditor .e-rte-toolbar .e-toolbar-item .e-rte-numberformatlist-dropdown.e-active, .e-richtexteditor .e-rte-toolbar .e-toolbar-item .e-rte-bulletformatlist-dropdown.e-active {
   background: #e6e6e6;
-  border: 1px solid #adadad;
+  border: 0 solid #adadad;
 }
 .e-richtexteditor .e-rte-toolbar .e-toolbar-item .e-rte-backgroundcolor-dropdown.e-active .e-rte-color-content::after, .e-richtexteditor .e-rte-toolbar .e-toolbar-item .e-rte-fontcolor-dropdown.e-active .e-rte-color-content::after, .e-richtexteditor .e-rte-toolbar .e-toolbar-item .e-rte-numberformatlist-dropdown.e-active .e-rte-color-content::after, .e-richtexteditor .e-rte-toolbar .e-toolbar-item .e-rte-bulletformatlist-dropdown.e-active .e-rte-color-content::after {
   background: #adadad;
@@ -2869,9 +2877,6 @@
 .e-richtexteditor .e-rte-toolbar .e-toolbar-extended .e-toolbar-item .e-tbar-btn:hover .e-icons {
   color: #000;
 }
-.e-richtexteditor .e-rte-toolbar .e-toolbar-extended .e-toolbar-item .e-tbar-btn:focus .e-icons {
-  color: #000;
-}
 .e-richtexteditor .e-rte-toolbar .e-toolbar-extended .e-toolbar-item.e-active .e-tbar-btn .e-icons {
   color: #000;
 }
@@ -3054,12 +3059,23 @@
 .e-rte-quick-popup .e-rte-quick-toolbar .e-toolbar-items {
   background: #fff;
 }
+.e-rte-quick-popup .e-rte-quick-toolbar .e-toolbar-items .e-rte-backgroundcolor-dropdown .e-rte-color-content {
+  padding-top: 1px;
+  padding-top: 5px;
+  height: 30px;
+}
+.e-rte-quick-popup .e-rte-quick-toolbar .e-toolbar-items .e-rte-backgroundcolor-dropdown .e-rte-color-content:hover {
+  background: rgba(0, 0, 0, 0.12);
+}
+.e-rte-quick-popup .e-rte-quick-toolbar .e-toolbar-items .e-rte-backgroundcolor-dropdown .e-caret:hover {
+  background: rgba(0, 0, 0, 0.12);
+}
 .e-rte-quick-popup .e-rte-quick-toolbar .e-toolbar-items .e-separator {
   border: 0.5px solid rgba(0, 0, 0, 0.05);
 }
 .e-rte-quick-popup .e-rte-quick-toolbar .e-toolbar-items .e-tbar-btn {
   background: #fff;
-  border: 1px solid transparent;
+  border: 0 solid transparent;
 }
 .e-rte-quick-popup .e-rte-quick-toolbar .e-toolbar-items .e-tbar-btn:hover {
   background: rgba(0, 0, 0, 0.12);
@@ -3078,7 +3094,7 @@
 .e-rte-quick-popup .e-rte-quick-toolbar .e-toolbar-items .e-toolbar-item.e-active .e-tbar-btn,
 .e-rte-quick-popup .e-rte-quick-toolbar .e-toolbar-items .e-toolbar-item.e-active .e-tbar-btn:focus {
   background: rgba(0, 0, 0, 0.12);
-  border: 1px solid #8c8c8c;
+  border: 0;
 }
 .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 {

package/styles/bootstrap4.css

@@ -2012,6 +2012,14 @@
 .e-bigger .e-rte-quick-popup .e-rte-quick-toolbar {
   min-height: 48px;
 }
+.e-bigger .e-rte-quick-popup .e-rte-quick-toolbar .e-toolbar-items .e-rte-backgroundcolor-dropdown .e-rte-color-content,
+.e-bigger .e-rte-quick-popup .e-rte-quick-toolbar .e-toolbar-items .e-rte-backgroundcolor-dropdown .e-caret {
+  height: 36px;
+}
+.e-bigger .e-rte-quick-popup .e-rte-quick-toolbar .e-toolbar-items .e-rte-backgroundcolor-dropdown .e-rte-color-content:hover,
+.e-bigger .e-rte-quick-popup .e-rte-quick-toolbar .e-toolbar-items .e-rte-backgroundcolor-dropdown .e-caret:hover {
+  height: 36px;
+}
 .e-bigger .e-rte-quick-popup .e-rte-quick-toolbar .e-toolbar-items:not(.e-tbar-pos) {
   margin: 0 6px;
   min-height: 48px;
@@ -2951,9 +2959,6 @@
 .e-richtexteditor .e-rte-toolbar .e-toolbar-extended .e-toolbar-item .e-tbar-btn:hover .e-icons {
   color: #212529;
 }
-.e-richtexteditor .e-rte-toolbar .e-toolbar-extended .e-toolbar-item .e-tbar-btn:focus .e-icons {
-  color: #212529;
-}
 .e-richtexteditor .e-rte-toolbar .e-toolbar-extended .e-toolbar-item.e-active .e-tbar-btn .e-icons {
   color: #f8f9fa;
 }
@@ -3136,6 +3141,16 @@
 .e-rte-quick-popup .e-rte-quick-toolbar .e-toolbar-items {
   background: #fff;
 }
+.e-rte-quick-popup .e-rte-quick-toolbar .e-toolbar-items .e-rte-backgroundcolor-dropdown .e-rte-color-content {
+  padding-top: 1px;
+  height: 30px;
+}
+.e-rte-quick-popup .e-rte-quick-toolbar .e-toolbar-items .e-rte-backgroundcolor-dropdown .e-rte-color-content:hover {
+  background: #5a6268;
+}
+.e-rte-quick-popup .e-rte-quick-toolbar .e-toolbar-items .e-rte-backgroundcolor-dropdown .e-caret:hover {
+  background: #5a6268;
+}
 .e-rte-quick-popup .e-rte-quick-toolbar .e-toolbar-items .e-separator {
   border: 0.5px solid #dee2e6;
 }