@syncfusion/ej2-richtexteditor 19.4.56 → 20.1.47

package/dist/global/index.d.ts

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

package/package.json

@@ -1,8 +1,8 @@
 {
   "_from": "@syncfusion/ej2-richtexteditor@*",
-  "_id": "@syncfusion/ej2-richtexteditor@19.4.55",
+  "_id": "@syncfusion/ej2-richtexteditor@19.7.5",
   "_inBundle": false,
-  "_integrity": "sha512-yCzpe6Glr/5vD9wGZWamZZlXj6Pij6DBLAW2/7gKcFRevy5MG22PPORfDb0WrRRYYYj+kIV2Ea/7nU5HSpmtXw==",
+  "_integrity": "sha512-qd8dxBBoB6NySpSez7cBo1QjzbpAmvbM3hS4N1NqHbVvaRjJWs8hnvOeCwDAqcS8U4KltG8Np81Ztg0Zsnn+zQ==",
   "_location": "/@syncfusion/ej2-richtexteditor",
   "_phantomChildren": {},
   "_requested": {
@@ -26,8 +26,8 @@
     "/@syncfusion/ej2-react-richtexteditor",
     "/@syncfusion/ej2-vue-richtexteditor"
   ],
-  "_resolved": "http://nexus.syncfusion.com/repository/ej2-hotfix-new/@syncfusion/ej2-richtexteditor/-/ej2-richtexteditor-19.4.55.tgz",
-  "_shasum": "c71b371a808166cf0c76c804df45bc6723eb4027",
+  "_resolved": "http://nexus.syncfusion.com/repository/ej2-release/@syncfusion/ej2-richtexteditor/-/ej2-richtexteditor-19.7.5.tgz",
+  "_shasum": "a9cbd4740f94fbe66b3fb49af4d63dc8fed5af77",
   "_spec": "@syncfusion/ej2-richtexteditor@*",
   "_where": "/jenkins/workspace/automation_release_19.1.0.1-ZPMUBNQ6AUYH6YGEFBPVYMEQLRRW2SLD4XCZ6GATNZJFYJ3RIAOA/packages/included",
   "author": {
@@ -38,13 +38,13 @@
   },
   "bundleDependencies": false,
   "dependencies": {
-    "@syncfusion/ej2-base": "~19.4.52",
-    "@syncfusion/ej2-buttons": "~19.4.55",
-    "@syncfusion/ej2-filemanager": "~19.4.56",
-    "@syncfusion/ej2-inputs": "~19.4.52",
-    "@syncfusion/ej2-navigations": "~19.4.56",
-    "@syncfusion/ej2-popups": "~19.4.53",
-    "@syncfusion/ej2-splitbuttons": "~19.4.52"
+    "@syncfusion/ej2-base": "~20.1.47",
+    "@syncfusion/ej2-buttons": "~20.1.47",
+    "@syncfusion/ej2-filemanager": "~20.1.47",
+    "@syncfusion/ej2-inputs": "~20.1.47",
+    "@syncfusion/ej2-navigations": "~20.1.47",
+    "@syncfusion/ej2-popups": "~20.1.47",
+    "@syncfusion/ej2-splitbuttons": "~20.1.47"
   },
   "deprecated": false,
   "description": "Essential JS 2 RichTextEditor component",
@@ -70,6 +70,6 @@
     "url": "git+https://github.com/syncfusion/ej2-javascript-ui-controls.git"
   },
   "typings": "index.d.ts",
-  "version": "19.4.56",
+  "version": "20.1.47",
   "sideEffects": false
 }

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

@@ -209,7 +209,8 @@ var ClearFormat = /** @class */ (function () {
         for (var index = 0; index < textNodes.length; index++) {
             var currentInlineNode = textNodes[index];
             var currentNode = void 0;
-            while (!this.domNode.isBlockNode(currentInlineNode)) {
+            while (!this.domNode.isBlockNode(currentInlineNode) &&
+                (currentInlineNode.parentElement && !currentInlineNode.parentElement.classList.contains('e-img-inner'))) {
                 currentNode = currentInlineNode;
                 currentInlineNode = currentInlineNode.parentElement;
             }
@@ -223,7 +224,7 @@ var ClearFormat = /** @class */ (function () {
     ClearFormat.removeInlineParent = function (textNodes) {
         var nodes = InsertMethods.unwrap(textNodes);
         for (var index = 0; index < nodes.length; index++) {
-            if (nodes[index].parentNode.childNodes.length === 1
+            if (nodes[index].parentNode.childNodes.length === 1 && !nodes[index].parentNode.classList.contains('e-img-inner')
                 && IsFormatted.inlineTags.indexOf(nodes[index].parentNode.nodeName.toLocaleLowerCase()) > -1) {
                 this.removeInlineParent(nodes[index].parentNode);
             }

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

@@ -39,6 +39,12 @@ var InsertHtml = /** @class */ (function () {
             nodeSelection.setSelectionText(docElement, range.startContainer.children[0], range.startContainer.children[0], 0, 0);
             range = nodeSelection.getRange(docElement);
         }
+        if (range.startContainer.nodeName === 'BR' && range.startOffset === 0 && range.startOffset === range.endOffset &&
+            range.startContainer === range.endContainer) {
+            var currentIndex = Array.prototype.slice.call(range.startContainer.parentElement.children).indexOf(range.startContainer);
+            nodeSelection.setSelectionText(docElement, range.startContainer.parentElement, range.startContainer.parentElement, currentIndex + 1, currentIndex + 1);
+            range = nodeSelection.getRange(docElement);
+        }
         var isCursor = range.startOffset === range.endOffset && range.startOffset === 0 &&
             range.startContainer === range.endContainer;
         var isCollapsed = range.collapsed;
@@ -222,7 +228,7 @@ var InsertHtml = /** @class */ (function () {
             else {
                 var tempSpan = createElement('span', { className: 'tempSpan' });
                 var nearestAnchor = closest(range.startContainer.parentElement, 'a');
-                if (range.startContainer.nodeType === 3 && nearestAnchor) {
+                if (range.startContainer.nodeType === 3 && nearestAnchor && closest(nearestAnchor, 'span')) {
                     var immediateBlockNode = this.getImmediateBlockNode(range.startContainer, editNode);
                     if (immediateBlockNode.querySelectorAll('br').length > 0) {
                         detach(immediateBlockNode.querySelector('br'));

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

@@ -92,6 +92,9 @@ var Lists = /** @class */ (function () {
             range.endContainer.parentElement.closest('LI');
         if (!isNOU(startNode) && !isNOU(endNode) && startNode === endNode && startNode.tagName === 'LI' &&
             startNode.textContent.trim() === '' && startNode.querySelectorAll('IMG').length === 0) {
+            if (startNode.innerHTML.indexOf(' ') >= 0) {
+                return;
+            }
             if (startNode.textContent.charCodeAt(0) === 65279) {
                 startNode.textContent = '';
             }
@@ -233,7 +236,7 @@ var Lists = /** @class */ (function () {
                 e.event.stopPropagation();
                 this.currentAction = this.getAction(nodes[0]);
                 if (e.event.shiftKey) {
-                    this.revertList(nodes);
+                    this.revertList(nodes, e);
                     this.revertClean();
                 }
                 else {
@@ -395,6 +398,9 @@ var Lists = /** @class */ (function () {
                         append([nestedElement], prevSibling);
                         append([elements[i]], nestedElement);
                     }
+                    else if (prevSibling.tagName === 'OL' || prevSibling.tagName === 'UL') {
+                        append([elements[i]], prevSibling);
+                    }
                 }
             }
             else {
@@ -489,7 +495,7 @@ var Lists = /** @class */ (function () {
                 listsNodes[i] = listsNodes[i].parentNode;
             }
         }
-        this.applyLists(listsNodes, this.currentAction, e.selector, e.item);
+        this.applyLists(listsNodes, this.currentAction, e.selector, e.item, e);
         if (e.callBack) {
             e.callBack({
                 requestType: this.currentAction,
@@ -510,10 +516,10 @@ var Lists = /** @class */ (function () {
             this.parent.nodeSelection.setSelectionText(this.parent.currentDocument, startElem, endElem, 0, 0);
         }
     };
-    Lists.prototype.applyLists = function (elements, type, selector, item) {
+    Lists.prototype.applyLists = function (elements, type, selector, item, e) {
         var isReverse = true;
         if (this.isRevert(elements, type) && isNOU(item)) {
-            this.revertList(elements);
+            this.revertList(elements, e);
             this.removeEmptyListElements();
         }
         else {
@@ -672,7 +678,7 @@ var Lists = /** @class */ (function () {
             }
         }
     };
-    Lists.prototype.revertList = function (elements) {
+    Lists.prototype.revertList = function (elements, e) {
         var temp = [];
         for (var i = elements.length - 1; i >= 0; i--) {
             for (var j = i - 1; j >= 0; j--) {
@@ -722,7 +728,9 @@ var Lists = /** @class */ (function () {
                         ' class="' + className + ' e-rte-wrap-inner"';
                     var wrapper = '<' + CONSTANT.DEFAULT_TAG + wrapperclass +
                         this.domNode.attributes(parentNode) + '></' + CONSTANT.DEFAULT_TAG + '>';
-                    this.domNode.wrapInner(element, this.domNode.parseHTMLFragment(wrapper));
+                    if (e.enterAction !== 'BR') {
+                        this.domNode.wrapInner(element, this.domNode.parseHTMLFragment(wrapper));
+                    }
                 }
                 else if (this.domNode.contents(element)[0].nodeType === 3) {
                     var replace = this.domNode.createTagString(CONSTANT.DEFAULT_TAG, parentNode, this.parent.domNode.encode(this.domNode.contents(element)[0].textContent));

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

@@ -182,7 +182,7 @@ var TableCommand = /** @class */ (function () {
                     var tdElement = createElement('td');
                     tdElement.appendChild(createElement('br'));
                     newRow.appendChild(tdElement);
-                    tdElement.setAttribute('style', allCells[(isHeaderSelect && isBelow) ? (minVal + 1) : minVal][i].getAttribute('style'));
+                    tdElement.setAttribute('style', allCells[(isHeaderSelect && isBelow) ? allCells[(minVal + 1)] ? (minVal + 1) : minVal : minVal][i].getAttribute('style'));
                 }
             }
             // eslint-disable-next-line
@@ -566,7 +566,8 @@ var TableCommand = /** @class */ (function () {
         if (min < (max = Math.min(max, eleArray.length - 1))) {
             for (rowValue = min; rowValue <= max; rowValue++) {
                 // eslint-disable-next-line
-                if (!(min < rowValue && eleArray[rowValue][0] === eleArray[rowValue - 1][0]) && 1 < (index = Math.min(parseInt(eleArray[rowValue][0].getAttribute('rowspan'), 10) || 1, max - min + 1)) && eleArray[rowValue][0] === eleArray[rowValue + 1][0]) {
+                if (!(min < rowValue && eleArray[rowValue][0] === eleArray[rowValue - 1][0]) && eleArray[rowValue][0] &&
+                    1 < (index = Math.min(parseInt(eleArray[rowValue][0].getAttribute('rowspan'), 10) || 1, max - min + 1)) && eleArray[rowValue][0] === eleArray[rowValue + 1][0]) {
                     for (count = index - 1, colIndex = 1; colIndex < eleArray[0].length; colIndex++) {
                         if (eleArray[rowValue][colIndex] !== eleArray[rowValue][colIndex - 1]) {
                             for (rowMin = rowValue; rowMin < rowValue + index; rowMin++) {
@@ -608,10 +609,10 @@ var TableCommand = /** @class */ (function () {
     };
     TableCommand.prototype.mergeCellContent = function () {
         var selectedCells = this.curTable.querySelectorAll('.e-cell-select');
-        var innerHtml = selectedCells[0].innerHTML;
-        for (var i = 1; i < selectedCells.length - 1; i++) {
+        var innerHtml = selectedCells[0].innerHTML === '<br>' ? '' : selectedCells[0].innerHTML;
+        for (var i = 1; i < selectedCells.length; i++) {
             if ('<br>' !== selectedCells[i].innerHTML) {
-                innerHtml = innerHtml + selectedCells[i].innerHTML;
+                innerHtml = innerHtml ? innerHtml + '<br>' + selectedCells[i].innerHTML : innerHtml + selectedCells[i].innerHTML;
             }
         }
         selectedCells[0].innerHTML = innerHtml;

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

@@ -34,8 +34,8 @@ var Count = /** @class */ (function () {
         }
     };
     Count.prototype.appendCount = function () {
-        var htmlText = this.parent.editorMode === 'Markdown' ? this.editPanel.value.trim() :
-            this.editPanel.textContent.trim();
+        var htmlText = this.parent.editorMode === 'Markdown' ? this.editPanel.value :
+            this.editPanel.textContent;
         if (this.parent.editorMode !== 'Markdown' && htmlText.indexOf('\u200B') !== -1) {
             this.htmlLength = htmlText.replace(/\u200B/g, '').length;
         }

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

@@ -159,7 +159,7 @@ var DropDownButtons = /** @class */ (function () {
                         }
                         _this.alignDropDown = _this.toolbarRenderer.renderDropDownButton({
                             iconCss: 'e-justify-left e-icons',
-                            cssClass: classes.CLS_DROPDOWN_POPUP + ' ' + classes.CLS_DROPDOWN_ITEMS,
+                            cssClass: classes.CLS_DROPDOWN_POPUP + ' ' + classes.CLS_DROPDOWN_ITEMS + ' ' + classes.CLS_ALIGN_TB_BTN,
                             itemName: 'Alignments', items: model.alignmentItems, element: targetElement
                         });
                         break;

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

@@ -199,6 +199,7 @@ var HtmlEditor = /** @class */ (function () {
             if (!this.isImageDelete) {
                 args.preventDefault();
             }
+            args.preventDefault();
         }
     };
     HtmlEditor.prototype.isOrderedList = function (editorValue) {

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

@@ -324,6 +324,11 @@ export declare const CLS_FONT_SIZE_TB_BTN: string;
 /**
  * @hidden
 
+ */
+export declare const CLS_ALIGN_TB_BTN: string;
+/**
+ * @hidden
+
  */
 export declare const CLS_FONT_COLOR_TARGET: string;
 /**

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

@@ -324,6 +324,11 @@ export var CLS_FONT_SIZE_TB_BTN = 'e-font-size-tbar-btn';
 /**
  * @hidden
 
+ */
+export var CLS_ALIGN_TB_BTN = 'e-alignment-tbar-btn';
+/**
+ * @hidden
+
  */
 export var CLS_FONT_COLOR_TARGET = 'e-rte-fontcolor-element';
 /**

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

@@ -1211,7 +1211,7 @@ var RichTextEditor = /** @class */ (function (_super) {
                         this.inputElement.parentElement.insertBefore(this.placeHolderWrapper, this.inputElement);
                     }
                     attributes(this.placeHolderWrapper, {
-                        'style': 'font-size: 14px; padding: 16px; margin-left: 0px; margin-right: 0px;'
+                        'style': 'font-size: 14px; margin-left: 0px; margin-right: 0px;'
                     });
                 }
                 this.placeHolderWrapper.innerHTML = this.placeholder;
@@ -1451,7 +1451,8 @@ var RichTextEditor = /** @class */ (function (_super) {
     };
     RichTextEditor.prototype.setValue = function () {
         if (this.valueTemplate) {
-            if (typeof this.valueTemplate === 'string') {
+            var regEx = new RegExp(/<(?=.*? .*?\/ ?>|br|hr|input|!--|wbr)[a-z]+.*?>|<([a-z]+).*?<\/\1>/i);
+            if (regEx.test(this.valueTemplate)) {
                 this.setProperties({ value: this.valueTemplate });
             }
             else {
@@ -2037,7 +2038,7 @@ var RichTextEditor = /** @class */ (function (_super) {
     RichTextEditor.prototype.restrict = function (e) {
         if (this.maxLength >= 0) {
             var element = this.editorMode === 'Markdown' ? this.contentModule.getText() :
-                e.currentTarget.textContent.trim();
+                e.currentTarget.textContent;
             var array = [8, 16, 17, 37, 38, 39, 40, 46, 65];
             var arrayKey = void 0;
             for (var i = 0; i <= array.length - 1; i++) {

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

@@ -286,6 +286,7 @@ var Image = /** @class */ (function () {
     Image.prototype.calcPos = function (elem) {
         var ignoreOffset = ['TD', 'TH', 'TABLE', 'A'];
         var parentOffset = { top: 0, left: 0 };
+        var elementOffset;
         var doc = elem.ownerDocument;
         var offsetParent = ((elem.offsetParent && (elem.offsetParent.classList.contains('e-img-caption') ||
             ignoreOffset.indexOf(elem.offsetParent.tagName) > -1)) ?
@@ -299,10 +300,19 @@ var Image = /** @class */ (function () {
             // eslint-disable-next-line
             parentOffset = offsetParent.getBoundingClientRect();
         }
-        return {
-            top: elem.offsetTop,
-            left: elem.offsetLeft
-        };
+        if (elem.offsetParent && (elem.offsetParent.classList.contains('e-img-caption'))) {
+            elementOffset = elem.getBoundingClientRect();
+            return {
+                top: elementOffset.top - parentOffset.top,
+                left: elementOffset.left - parentOffset.left
+            };
+        }
+        else {
+            return {
+                top: elem.offsetTop,
+                left: elem.offsetLeft
+            };
+        }
     };
     Image.prototype.setAspectRatio = function (img, expectedX, expectedY, e) {
         if (isNullOrUndefined(img.width)) {
@@ -312,7 +322,7 @@ var Image = /** @class */ (function () {
             parseInt(img.style.width, 10) : img.width;
         var height = img.style.height !== '' ? parseInt(img.style.height, 10) : img.height;
         if (width > height) {
-            img.style.minWidth = '20px';
+            img.style.minWidth = this.parent.insertImageSettings.minWidth === 0 ? '20px' : formatUnit(this.parent.insertImageSettings.minWidth);
             if (this.parent.insertImageSettings.resizeByPercent) {
                 if (parseInt('' + img.getBoundingClientRect().width + '', 10) !== 0 && parseInt('' + width + '', 10) !== 0) {
                     var percentageValue = this.pixToPerc((width / height * expectedY), (img.previousElementSibling || img.parentElement));
@@ -635,6 +645,10 @@ var Image = /** @class */ (function () {
                         range.startContainer.querySelector('.' + classes.CLS_CAPTION + '.' + classes.CLS_CAPINLINE))) {
                         detach(range.startContainer.querySelector('.' + classes.CLS_CAPTION + '.' + classes.CLS_CAPINLINE));
                     }
+                    else if (range.startContainer.nodeType === 1 &&
+                        range.startContainer.querySelector('.' + classes.CLS_CAPTION + '.' + classes.CLS_IMGBREAK)) {
+                        detach(range.startContainer.querySelector('.' + classes.CLS_CAPTION + '.' + classes.CLS_IMGBREAK));
+                    }
                 }
                 break;
             case 'insert-image':
@@ -805,6 +819,8 @@ var Image = /** @class */ (function () {
         if (this.parent.quickToolbarModule.imageQTBar) {
             if (e.isNotify) {
                 setTimeout(function () {
+                    _this.parent.formatter.editorManager.nodeSelection.Clear(_this.contentModule.getDocument());
+                    _this.parent.formatter.editorManager.nodeSelection.setSelectionContents(_this.contentModule.getDocument(), target);
                     _this.quickToolObj.imageQTBar.showPopup(args.pageX, pageY, target);
                 }, 400);
             }

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

@@ -301,7 +301,7 @@ var Table = /** @class */ (function () {
                 ele.classList.add(classes.CLS_TABLE_SEL);
                 this.addRow(selection, event, true);
                 ele.classList.remove(classes.CLS_TABLE_SEL);
-                nextElement = nextElement.parentElement.nextSibling.firstChild;
+                nextElement = nextElement.parentElement.nextSibling ? nextElement.parentElement.nextSibling.firstChild : nextElement.parentElement.firstChild;
                 // eslint-disable-next-line
                 (nextElement.textContent.trim() !== '' && closest(nextElement, 'td')) ?
                     selection.setSelectionNode(this.contentModule.getDocument(), nextElement) :
@@ -590,6 +590,7 @@ var Table = /** @class */ (function () {
         var offset = elem.getBoundingClientRect();
         var doc = elem.ownerDocument;
         var offsetParent = elem.offsetParent || doc.documentElement;
+        var isNestedTable = false;
         while (offsetParent &&
             (offsetParent === doc.body || offsetParent === doc.documentElement) &&
             offsetParent.style.position === 'static') {
@@ -597,15 +598,29 @@ var Table = /** @class */ (function () {
         }
         if (offsetParent.nodeName === 'TD' && elem.nodeName === 'TABLE') {
             offsetParent = closest(offsetParent, '.e-rte-content');
+            isNestedTable = true;
         }
         if (offsetParent && offsetParent !== elem && offsetParent.nodeType === 1) {
             // eslint-disable-next-line
             parentOffset = offsetParent.getBoundingClientRect();
         }
-        return {
-            top: elem.offsetTop,
-            left: elem.offsetLeft
-        };
+        if (isNestedTable) {
+            isNestedTable = false;
+            var topValue = this.parent.inputElement && this.parent.inputElement.scrollTop > 0 ?
+                (this.parent.inputElement.scrollTop + offset.top) - parentOffset.top : offset.top - parentOffset.top;
+            var leftValue = this.parent.inputElement && this.parent.inputElement.scrollLeft > 0 ?
+                (this.parent.inputElement.scrollLeft + offset.left) - parentOffset.left : offset.left - parentOffset.left;
+            return {
+                top: topValue,
+                left: leftValue
+            };
+        }
+        else {
+            return {
+                top: elem.offsetTop,
+                left: elem.offsetLeft
+            };
+        }
     };
     Table.prototype.getPointX = function (e) {
         if (e.touches && e.touches.length) {

package/src/selection/selection.js

@@ -296,6 +296,9 @@ var NodeSelection = /** @class */ (function () {
             node = node && node.childNodes[num[index]];
         }
         if (node && constant >= 0 && node.nodeName !== 'html') {
+            if (node.nodeType === 3 && node.nodeValue.replace(/\u00a0/g, ' ') === ' ') {
+                constant = node.textContent.length;
+            }
             range[isvalid ? 'setStart' : 'setEnd'](node, constant);
         }
         return range;

package/styles/bootstrap-dark.css

@@ -756,6 +756,7 @@
   line-height: 18px;
   opacity: 00.54;
   overflow: hidden;
+  padding: 16px;
   position: absolute;
   text-align: start;
   top: 0;
@@ -920,10 +921,9 @@
 .e-richtexteditor .e-rte-character-count {
   bottom: 0;
   color: #f0f0f0;
-  font-family: 'Times New Roman', Georgia, Serif;
   font-size: 14px;
   margin-right: 30px;
-  opacity: 00.54;
+  opacity: 0.54;
   padding-bottom: 2px;
   position: absolute;
   right: 0;
@@ -2388,7 +2388,10 @@
   padding: 0;
 }
 
-.e-rte-quick-toolbar.e-rte-toolbar.e-toolbar .e-toolbar-items .e-toolbar-item .e-rte-backgroundcolor-dropdown.e-dropdown-btn.e-tbar-btn.e-btn.e-control {
+.e-rte-quick-toolbar.e-toolbar .e-toolbar-items .e-toolbar-item .e-rte-backgroundcolor-dropdown.e-dropdown-btn.e-tbar-btn.e-btn.e-control,
+.e-rte-quick-toolbar.e-rte-toolbar.e-toolbar .e-toolbar-items .e-toolbar-item .e-rte-backgroundcolor-dropdown.e-dropdown-btn.e-tbar-btn.e-btn.e-control:hover,
+.e-rte-quick-toolbar.e-rte-toolbar.e-toolbar .e-toolbar-items .e-toolbar-item .e-rte-backgroundcolor-dropdown.e-dropdown-btn.e-tbar-btn.e-btn.e-control:active,
+.e-rte-quick-toolbar.e-rte-toolbar.e-toolbar .e-toolbar-items .e-toolbar-item .e-rte-backgroundcolor-dropdown.e-dropdown-btn.e-tbar-btn.e-btn.e-control.e-active {
   padding-left: 0;
   padding-right: 0;
 }

package/styles/bootstrap.css

@@ -902,6 +902,7 @@
   line-height: 18px;
   opacity: 00.54;
   overflow: hidden;
+  padding: 16px;
   position: absolute;
   text-align: start;
   top: 0;
@@ -1066,10 +1067,9 @@
 .e-richtexteditor .e-rte-character-count {
   bottom: 0;
   color: #000;
-  font-family: 'Times New Roman', Georgia, Serif;
   font-size: 14px;
   margin-right: 30px;
-  opacity: 00.54;
+  opacity: 0.54;
   padding-bottom: 2px;
   position: absolute;
   right: 0;
@@ -2534,7 +2534,10 @@
   padding: 0;
 }
 
-.e-rte-quick-toolbar.e-rte-toolbar.e-toolbar .e-toolbar-items .e-toolbar-item .e-rte-backgroundcolor-dropdown.e-dropdown-btn.e-tbar-btn.e-btn.e-control {
+.e-rte-quick-toolbar.e-toolbar .e-toolbar-items .e-toolbar-item .e-rte-backgroundcolor-dropdown.e-dropdown-btn.e-tbar-btn.e-btn.e-control,
+.e-rte-quick-toolbar.e-rte-toolbar.e-toolbar .e-toolbar-items .e-toolbar-item .e-rte-backgroundcolor-dropdown.e-dropdown-btn.e-tbar-btn.e-btn.e-control:hover,
+.e-rte-quick-toolbar.e-rte-toolbar.e-toolbar .e-toolbar-items .e-toolbar-item .e-rte-backgroundcolor-dropdown.e-dropdown-btn.e-tbar-btn.e-btn.e-control:active,
+.e-rte-quick-toolbar.e-rte-toolbar.e-toolbar .e-toolbar-items .e-toolbar-item .e-rte-backgroundcolor-dropdown.e-dropdown-btn.e-tbar-btn.e-btn.e-control.e-active {
   padding-left: 0;
   padding-right: 0;
 }

package/styles/bootstrap4.css

@@ -1035,6 +1035,7 @@
   line-height: 18px;
   opacity: 00.54;
   overflow: hidden;
+  padding: 16px;
   position: absolute;
   text-align: start;
   top: 0;
@@ -1199,10 +1200,9 @@
 .e-richtexteditor .e-rte-character-count {
   bottom: 0;
   color: #6c757d;
-  font-family: 'Times New Roman', Georgia, Serif;
   font-size: 14px;
   margin-right: 30px;
-  opacity: 00.54;
+  opacity: 1;
   padding-bottom: 2px;
   position: absolute;
   right: 0;

package/styles/bootstrap5-dark.css

@@ -482,6 +482,13 @@
   padding: 0 6px;
 }
 
+.e-bigger .e-richtexteditor .e-rte-toolbar .e-toolbar-extended .e-toolbar-item.e-active .e-tbar-btn.e-btn,
+.e-bigger .e-richtexteditor .e-rte-toolbar.e-toolbar.e-extended-toolbar .e-toolbar-extended .e-toolbar-item.e-active .e-tbar-btn.e-btn,
+.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-extended .e-toolbar-item.e-active .e-tbar-btn.e-btn {
+  padding: 0 8px;
+}
+
 .e-bigger .e-richtexteditor.e-rte-full-screen iframe,
 .e-richtexteditor.e-bigger.e-rte-full-screen iframe {
   height: calc(100% - 56px);
@@ -544,6 +551,10 @@
   padding-right: 5px;
 }
 
+.e-richtexteditor .e-rte-toolbar.e-toolbar .e-hor-nav {
+  min-height: 40px;
+}
+
 .e-richtexteditor .e-rte-toolbar .e-toolbar-items:not(.e-tbar-pos):not(.e-toolbar-multirow) .e-toolbar-item:first-child {
   margin-left: 7px;
 }
@@ -700,6 +711,11 @@
   padding: 0;
 }
 
+.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-extended .e-toolbar-item.e-active .e-tbar-btn.e-btn {
+  padding: 0 4px;
+}
+
 .e-richtexteditor .e-rte-toolbar.e-control[class*='e-toolbar'],
 .e-richtexteditor .e-rte-toolbar.e-toolbar.e-extended-toolbar.e-control[class*='e-toolbar'] {
   box-sizing: border-box;
@@ -752,6 +768,7 @@
   line-height: 1.5;
   opacity: 00.54;
   overflow: hidden;
+  padding: 16px;
   position: absolute;
   text-align: start;
   top: 0;
@@ -916,10 +933,9 @@
 .e-richtexteditor .e-rte-character-count {
   bottom: 0;
   color: #6c757d;
-  font-family: 'Times New Roman', Georgia, Serif;
   font-size: 14px;
   margin-right: 30px;
-  opacity: 00.54;
+  opacity: 1;
   padding-bottom: 2px;
   position: absolute;
   right: 0;
@@ -2042,6 +2058,13 @@
   font-size: 12px;
 }
 
+.e-rte-toolbar.e-toolbar.e-extended-toolbar .e-toolbar-items .e-toolbar-item .e-dropdown-btn.e-alignment-tbar-btn .e-btn-icon.e-caret,
+.e-rte-toolbar.e-toolbar .e-toolbar-items .e-toolbar-item .e-dropdown-btn.e-alignment-tbar-btn .e-btn-icon.e-caret,
+.e-rte-toolbar.e-toolbar.e-extended-toolbar .e-toolbar-extended .e-toolbar-item .e-dropdown-btn.e-alignment-tbar-btn .e-btn-icon.e-caret,
+.e-rte-toolbar.e-toolbar .e-toolbar-extended .e-toolbar-item .e-dropdown-btn.e-alignment-tbar-btn .e-btn-icon.e-caret {
+  min-width: 24px;
+}
+
 .e-rte-inline-dropdown .e-rte-color-content .e-rte-elements {
   border-bottom-style: solid;
   border-bottom-width: 3px;
@@ -2471,6 +2494,7 @@
 .e-richtexteditor .e-rte-toolbar .e-toolbar-item.e-active .e-tbar-btn:focus {
   background: #565e64;
   border: 1px solid #51585e;
+  border: 0;
 }
 
 .e-richtexteditor .e-rte-toolbar .e-toolbar-item.e-active .e-tbar-btn .e-icons,
@@ -2479,7 +2503,7 @@
 }
 
 .e-richtexteditor .e-rte-toolbar .e-toolbar-item .e-icons {
-  color: #fff;
+  color: #adb5bd;
 }
 
 .e-richtexteditor .e-rte-toolbar .e-toolbar-item .e-tbar-btn:hover .e-icons {
@@ -2643,7 +2667,7 @@
 }
 
 .e-richtexteditor .e-rte-toolbar .e-toolbar-extended .e-toolbar-item .e-tbar-btn .e-icons {
-  color: #fff;
+  color: #adb5bd;
 }
 
 .e-richtexteditor .e-rte-toolbar .e-toolbar-extended .e-toolbar-item.e-active .e-tbar-btn .e-icons {
@@ -2848,7 +2872,7 @@
 }
 
 .e-rte-quick-popup .e-rte-quick-toolbar .e-toolbar-items .e-icons {
-  color: #fff;
+  color: #adb5bd;
 }
 
 .e-rte-quick-popup .e-rte-quick-toolbar .e-toolbar-items .e-tbar-btn:hover .e-icons {
@@ -2860,7 +2884,7 @@
 }
 
 .e-rte-quick-popup .e-rte-quick-toolbar .e-toolbar-extended .e-toolbar-item .e-tbar-btn .e-icons {
-  color: #fff;
+  color: #adb5bd;
 }
 
 .e-rte-quick-popup .e-rte-dropdown-btn {