@syncfusion/ej2-richtexteditor 19.2.62 → 19.3.43

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

@@ -1,8 +1,8 @@
-import { addClass, detach, EventHandler, isNullOrUndefined, select, isBlazor, Ajax } from '@syncfusion/ej2-base';
+import { addClass, detach, EventHandler, isNullOrUndefined, select, Ajax, formatUnit } from '@syncfusion/ej2-base';
 import { Browser, closest, removeClass, isNullOrUndefined as isNOU } from '@syncfusion/ej2-base';
 import * as events from '../base/constant';
 import * as classes from '../base/classes';
-import { Uploader, NumericTextBox } from '@syncfusion/ej2-inputs';
+import { Uploader, TextBox } from '@syncfusion/ej2-inputs';
 import { Popup } from '@syncfusion/ej2-popups';
 import { Button, CheckBox } from '@syncfusion/ej2-buttons';
 import { RenderType } from '../base/enum';
@@ -14,6 +14,7 @@ import { isIDevice } from '../../common/util';
 var Image = /** @class */ (function () {
     function Image(parent, serviceLocator) {
         this.isImgUploaded = false;
+        this.isAllowedTypes = true;
         this.pageX = null;
         this.pageY = null;
         this.deletedImg = [];
@@ -134,7 +135,7 @@ var Image = /** @class */ (function () {
         if (Browser.isDevice) {
             removeClass([e.target.parentElement], 'e-mob-span');
         }
-        var args = isBlazor() ? { requestType: 'images' } : { event: e, requestType: 'images' };
+        var args = { event: e, requestType: 'images' };
         this.parent.trigger(events.resizeStop, args);
         /* eslint-disable */
         var pageX = this.getPointX(e);
@@ -188,7 +189,7 @@ var Image = /** @class */ (function () {
                 addClass([this.imgResizeDiv], 'e-mob-span');
             }
             else {
-                var args = isBlazor() ? { requestType: 'images' } : { event: e, requestType: 'images' };
+                var args = { event: e, requestType: 'images' };
                 this.parent.trigger(events.resizeStart, args, function (resizeStartArgs) {
                     if (resizeStartArgs.cancel) {
                         _this.cancelResizeAction();
@@ -323,6 +324,12 @@ var Image = /** @class */ (function () {
                 img.style.height = null;
                 img.removeAttribute('height');
             }
+            else if (img.style.width === '' && img.style.height !== '') {
+                img.style.height = expectedY + 'px';
+            }
+            else if (img.style.width !== '' && img.style.height === '') {
+                img.style.width = ((width / height * expectedY) + width / height).toString() + 'px';
+            }
             else if (img.style.width !== '') {
                 img.style.width = (width / height * expectedY) + 'px';
                 img.style.height = expectedY + 'px';
@@ -371,7 +378,7 @@ var Image = /** @class */ (function () {
     };
     Image.prototype.imgDupMouseMove = function (width, height, e) {
         var _this = this;
-        var args = isBlazor() ? { requestType: 'images' } : { event: e, requestType: 'images' };
+        var args = { event: e, requestType: 'images' };
         this.parent.trigger(events.onResize, args, function (resizingArgs) {
             if (resizingArgs.cancel) {
                 _this.cancelResizeAction();
@@ -1198,7 +1205,7 @@ var Image = /** @class */ (function () {
             isModal: Browser.isDevice,
             buttons: [{
                     click: this.insertImageUrl.bind(selectObj),
-                    buttonModel: { content: imgInsert, cssClass: 'e-flat e-insertImage', isPrimary: true }
+                    buttonModel: { content: imgInsert, cssClass: 'e-flat e-insertImage', isPrimary: true, disabled: true }
                 },
                 {
                     click: function (e) {
@@ -1324,12 +1331,23 @@ var Image = /** @class */ (function () {
     };
     // eslint-disable-next-line
     Image.prototype.imageUrlPopup = function (e) {
+        var _this = this;
         var imgUrl = this.parent.createElement('div', { className: 'imgUrl' });
         var placeUrl = this.i10n.getConstant('imageUrl');
         this.inputUrl = this.parent.createElement('input', {
             className: 'e-input e-img-url',
             attrs: { placeholder: placeUrl, spellcheck: 'false' }
         });
+        this.inputUrl.addEventListener('input', function () {
+            if (!isNOU(_this.inputUrl)) {
+                if (_this.inputUrl.value.length === 0) {
+                    _this.dialogObj.getButtons(0).element.disabled = true;
+                }
+                else {
+                    _this.dialogObj.getButtons(0).element.removeAttribute('disabled');
+                }
+            }
+        });
         imgUrl.appendChild(this.inputUrl);
         return imgUrl;
     };
@@ -1380,42 +1398,58 @@ var Image = /** @class */ (function () {
         }
     };
     Image.prototype.imgsizeInput = function (e) {
+        var _this = this;
         var selectNode = e.selectNode[0];
         var imgHeight = this.i10n.getConstant('imageHeight');
         var imgWidth = this.i10n.getConstant('imageWidth');
         var imgSizeWrap = this.parent.createElement('div', { className: 'e-img-sizewrap' });
-        var widthVal = (selectNode.getAttribute('width') === 'auto' ||
-            isNullOrUndefined(selectNode.getAttribute('width'))) ? selectNode.width : selectNode.getClientRects()[0].width;
-        var heightVal = (selectNode.getAttribute('height') === 'auto' ||
-            isNullOrUndefined(selectNode.getAttribute('height'))) ? selectNode.height : selectNode.getClientRects()[0].height;
+        var widthVal = isNullOrUndefined(this.changedWidthValue) && (selectNode.style.width.toString() === 'auto' ||
+            selectNode.style.width !== "") ? selectNode.style.width : !isNullOrUndefined(this.changedWidthValue) ?
+            this.changedWidthValue : (parseInt(selectNode.getClientRects()[0].width.toString())).toString();
+        var heightVal = isNullOrUndefined(this.changedHeightValue) && (selectNode.style.height.toString() === 'auto' ||
+            selectNode.style.height !== "") ? selectNode.style.height : !isNullOrUndefined(this.changedHeightValue) ?
+            this.changedHeightValue : (parseInt(selectNode.getClientRects()[0].height.toString())).toString();
+        this.changedWidthValue = null;
+        this.changedHeightValue = null;
         var content = '<div class="e-rte-label"><label>' + imgWidth +
-            '</label></div><div class="e-rte-field"><input type="text" data-role ="none" id="imgwidth" class="e-img-width" value=' +
+            '</label></div><div class="e-rte-field"><input type="text" id="imgwidth" class="e-img-width" value=' +
             widthVal
             + ' /></div>' +
             '<div class="e-rte-label">' + '<label>' + imgHeight + '</label></div><div class="e-rte-field"> ' +
-            '<input type="text" data-role ="none" id="imgheight" class="e-img-height" value=' +
+            '<input type="text" id="imgheight" class="e-img-height" value=' +
             heightVal
             + ' /></div>';
         var contentElem = parseHtml(content);
         imgSizeWrap.appendChild(contentElem);
-        var widthNum = new NumericTextBox({
-            format: '###.### px', min: this.parent.insertImageSettings.minWidth,
-            max: this.parent.getInsertImgMaxWidth(),
-            enableRtl: this.parent.enableRtl, locale: this.parent.locale
+        var widthNum = new TextBox({
+            value: formatUnit(widthVal),
+            enableRtl: this.parent.enableRtl,
+            input: function (e) {
+                _this.inputWidthValue = formatUnit(_this.inputValue(e.value));
+            }
         });
-        widthNum.isStringTemplate = true;
         widthNum.createElement = this.parent.createElement;
         widthNum.appendTo(imgSizeWrap.querySelector('#imgwidth'));
-        var heightNum = new NumericTextBox({
-            format: '###.### px', min: this.parent.insertImageSettings.minHeight,
-            max: this.parent.insertImageSettings.maxHeight,
-            enableRtl: this.parent.enableRtl, locale: this.parent.locale
+        var heightNum = new TextBox({
+            value: formatUnit(heightVal),
+            enableRtl: this.parent.enableRtl,
+            input: function (e) {
+                _this.inputHeightValue = formatUnit(_this.inputValue(e.value));
+            }
         });
-        heightNum.isStringTemplate = true;
         heightNum.createElement = this.parent.createElement;
         heightNum.appendTo(imgSizeWrap.querySelector('#imgheight'));
         return imgSizeWrap;
     };
+    Image.prototype.inputValue = function (value) {
+        if (value === 'auto' || value.indexOf('%') !== -1 || value.indexOf('px') !== -1
+            || value.match(/(\d+)/)) {
+            return value;
+        }
+        else {
+            return "auto";
+        }
+    };
     Image.prototype.insertSize = function (e) {
         e.selection.restore();
         var proxy = e.selfImage;
@@ -1423,8 +1457,10 @@ var Image = /** @class */ (function () {
             proxy.parent.formatter.saveData();
         }
         var dialogEle = proxy.dialogObj.element;
-        var width = parseFloat(dialogEle.querySelector('.e-img-width').value);
-        var height = parseFloat(dialogEle.parentElement.querySelector('.e-img-height').value);
+        this.changedWidthValue = this.inputWidthValue;
+        this.changedHeightValue = this.inputHeightValue;
+        var width = dialogEle.querySelector('.e-img-width').value;
+        var height = dialogEle.parentElement.querySelector('.e-img-height').value;
         proxy.parent.formatter.process(this.parent, e.args, e.args, {
             width: width, height: height, selectNode: e.selectNode,
             subCommand: e.args.item.subCommand
@@ -1534,6 +1570,10 @@ var Image = /** @class */ (function () {
                                     }
                                 };
                                 proxy.inputUrl.setAttribute('disabled', 'true');
+                                if (isNullOrUndefined(proxy.parent.insertImageSettings.saveUrl) && _this.isAllowedTypes
+                                    && !isNullOrUndefined(_this.dialogObj)) {
+                                    _this.dialogObj.getButtons(0).element.removeAttribute('disabled');
+                                }
                             });
                             reader_1.readAsDataURL(selectArgs.filesData[0].rawFile);
                         }
@@ -1590,6 +1630,9 @@ var Image = /** @class */ (function () {
                         };
                         proxy.inputUrl.setAttribute('disabled', 'true');
                     }
+                    if (e.operation === 'upload' && !isNullOrUndefined(_this.dialogObj)) {
+                        _this.dialogObj.getButtons(0).element.removeAttribute('disabled');
+                    }
                 });
             },
             failure: function (e) {
@@ -1599,11 +1642,11 @@ var Image = /** @class */ (function () {
                 // eslint-disable-next-line
                 _this.parent.trigger(events.imageRemoving, e, function (e) {
                     proxy.isImgUploaded = false;
+                    _this.dialogObj.getButtons(0).element.disabled = true;
                     proxy.inputUrl.removeAttribute('disabled');
                     if (proxy.uploadUrl) {
                         proxy.uploadUrl.url = '';
                     }
-                    _this.dialogObj.getButtons(0).element.removeAttribute('disabled');
                 });
             }
         });
@@ -1616,9 +1659,10 @@ var Image = /** @class */ (function () {
         if (this.uploadObj.allowedExtensions) {
             if (this.uploadObj.allowedExtensions.toLocaleLowerCase().indexOf(('.' + e.type).toLocaleLowerCase()) === -1) {
                 this.dialogObj.getButtons(0).element.setAttribute('disabled', 'disabled');
+                this.isAllowedTypes = false;
             }
             else {
-                this.dialogObj.getButtons(0).element.removeAttribute('disabled');
+                this.isAllowedTypes = true;
             }
         }
     };

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

@@ -1,4 +1,4 @@
-import { EventHandler, detach, isNullOrUndefined, select, isBlazor, extend } from '@syncfusion/ej2-base';
+import { EventHandler, detach, isNullOrUndefined, select, extend } from '@syncfusion/ej2-base';
 import { closest, addClass, removeClass, Browser } from '@syncfusion/ej2-base';
 import * as events from '../base/constant';
 import { CLS_RTE_ELEMENTS } from '../base/classes';
@@ -293,7 +293,7 @@ var Link = /** @class */ (function () {
                 }
                 _this.dialogObj.destroy();
                 detach(_this.dialogObj.element);
-                var args = isBlazor() ? null : _this.dialogObj;
+                var args = _this.dialogObj;
                 _this.dialogRenderObj.close(args);
                 _this.dialogObj = null;
             }
@@ -385,7 +385,8 @@ var Link = /** @class */ (function () {
             proxy.parent.formatter.saveData();
         }
         var argsValue;
-        if (this.args.code === 'KeyK') {
+        if (!isNullOrUndefined(this.args) &&
+            this.args.code === 'KeyK') {
             var originalEvent = this.args;
             extend(this.args, { item: { command: 'Links', subCommand: 'CreateLink' }, originalEvent: originalEvent }, true);
             var argsVal = {

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

@@ -1,6 +1,5 @@
 import { Popup } from '@syncfusion/ej2-popups';
 import { CLS_QUICK_POP } from '../base/classes';
-import { isBlazor } from '@syncfusion/ej2-base';
 import * as events from '../base/constant';
 /**
  * `Popup renderer` module is used to render popup in RichTextEditor.
@@ -18,7 +17,7 @@ var PopupRenderer = /** @class */ (function () {
         this.parent = parent;
     }
     PopupRenderer.prototype.quickToolbarOpen = function () {
-        var args = isBlazor() ? { element: this.popupObj.element } : this.popupObj;
+        var args = this.popupObj;
         this.parent.trigger(events.quickToolbarOpen, args);
     };
     /**

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

@@ -74,9 +74,17 @@ var Render = /** @class */ (function () {
                     var childNodes = this.parent.contentModule.getEditPanel().childNodes;
                     if ((childNodes.length === 0) ||
                         (childNodes.length === 1 && childNodes[0].childNodes.length === 0 && ((childNodes[0].tagName === 'BR') ||
-                            (childNodes[0].tagName === 'P' && childNodes[0].textContent === '')))) {
+                            ((childNodes[0].tagName === 'P' || childNodes[0].tagName === 'DIV') && childNodes[0].textContent === '')))) {
                         var node = this.parent.contentModule.getEditPanel();
-                        node.innerHTML = '<p><br/></p>';
+                        if (this.parent.enterKey === 'DIV') {
+                            node.innerHTML = '<div><br/></div>';
+                        }
+                        else if (this.parent.enterKey === 'BR') {
+                            node.innerHTML = '<br/>';
+                        }
+                        else {
+                            node.innerHTML = '<p><br/></p>';
+                        }
                         this.parent.formatter.editorManager.nodeSelection.setCursorPoint(this.parent.contentModule.getDocument(), node.childNodes[0], 0);
                     }
                     break;

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

@@ -1,4 +1,4 @@
-import { detach, closest, Browser, isNullOrUndefined as isNOU, isBlazor } from '@syncfusion/ej2-base';
+import { 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';
@@ -111,6 +111,7 @@ var Table = /** @class */ (function () {
                 break;
             case 'Dashed':
             case 'Alternate':
+            case 'Custom':
                 this.tableStyles(args, item.subCommand);
                 break;
             case 'Merge':
@@ -234,6 +235,13 @@ var Table = /** @class */ (function () {
                 table.classList.add(classes.CLS_TB_ALT_BOR);
             /* eslint-enable */
         }
+        if (args.args && args.args.item.cssClass) {
+            var classList = args.args.item.cssClass.split(' ');
+            for (var i = 0; i < classList.length; i++) {
+                (table.classList.contains(classList[i])) ? table.classList.remove(classList[i]) :
+                    table.classList.add(classList[i]);
+            }
+        }
         this.parent.formatter.saveData();
         this.parent.formatter.editorManager.nodeSelection.restore();
     };
@@ -450,7 +458,7 @@ var Table = /** @class */ (function () {
             selectionObj.selection = proxy.parent.formatter.editorManager.nodeSelection.save(range, proxy.contentModule.getDocument());
         }
         var value = {
-            row: row, columns: col, width: {
+            rows: row, columns: col, width: {
                 minWidth: proxy.parent.tableSettings.minWidth,
                 maxWidth: proxy.parent.tableSettings.maxWidth,
                 width: proxy.parent.tableSettings.width
@@ -649,7 +657,7 @@ var Table = /** @class */ (function () {
                 EventHandler.add(this.helper, Browser.touchStartEvent, this.resizeStart, this);
             }
             else {
-                var args = isBlazor() ? { requestType: 'Table' } : { event: e, requestType: 'Table' };
+                var args = { event: e, requestType: 'Table' };
                 this.parent.trigger(events.resizeStart, args, function (resizeStartArgs) {
                     if (resizeStartArgs.cancel) {
                         _this.cancelResizeAction();
@@ -726,7 +734,7 @@ var Table = /** @class */ (function () {
         var mouseY = (this.parent.enableRtl) ? -(pageY - this.pageY) : (pageY - this.pageY);
         this.pageX = pageX;
         this.pageY = pageY;
-        var args = isBlazor() ? { requestType: 'table' } : { event: e, requestType: 'table' };
+        var args = { event: e, requestType: 'table' };
         this.parent.trigger(events.onResize, args, function (resizingArgs) {
             if (resizingArgs.cancel) {
                 _this.cancelResizeAction();
@@ -813,7 +821,7 @@ var Table = /** @class */ (function () {
             this.pageY = null;
             this.moveEle = null;
         }
-        var args = isBlazor() ? { requestType: 'table' } : { event: e, requestType: 'table' };
+        var args = { event: e, requestType: 'table' };
         this.parent.trigger(events.resizeStop, args);
         this.parent.formatter.saveData();
     };

package/src/rich-text-editor/renderer/view-source.js

@@ -178,7 +178,21 @@ var ViewSource = /** @class */ (function () {
             baseToolbar: this.parent.getBaseToolbarObject()
         });
         var serializeValue = this.parent.serializeValue(editHTML.value);
-        var value = (serializeValue === null || serializeValue === '') ? '<p><br/></p>' : serializeValue;
+        var value;
+        if (serializeValue === null || serializeValue === '') {
+            if (this.parent.enterKey === 'DIV') {
+                value = '<div><br/></div>';
+            }
+            else if (this.parent.enterKey === 'BR') {
+                value = '<br/>';
+            }
+            else {
+                value = '<p><br/></p>';
+            }
+        }
+        else {
+            value = serializeValue;
+        }
         if (this.parent.iframeSettings.enable) {
             editHTML.parentElement.style.display = 'none';
             editHTML.style.display = 'none';
@@ -210,9 +224,13 @@ var ViewSource = /** @class */ (function () {
     };
     ViewSource.prototype.getTextAreaValue = function () {
         return (this.contentModule.getEditPanel().innerHTML === '<p><br></p>') ||
+            (this.contentModule.getEditPanel().innerHTML === '<div><br></div>') ||
+            (this.contentModule.getEditPanel().innerHTML === '<br>') ||
             (this.contentModule.getEditPanel().childNodes.length === 1 &&
-                this.contentModule.getEditPanel().childNodes[0].tagName === 'P' &&
-                this.contentModule.getEditPanel().innerHTML.length === 7) ? '' : this.parent.value;
+                (this.contentModule.getEditPanel().childNodes[0].tagName === 'P' &&
+                    this.contentModule.getEditPanel().innerHTML.length === 7) ||
+                (this.contentModule.getEditPanel().childNodes[0].tagName === 'DIV' &&
+                    this.contentModule.getEditPanel().innerHTML.length === 11)) ? '' : this.parent.value;
     };
     /**
      * getPanel method

package/styles/bootstrap-dark.css

@@ -196,8 +196,8 @@
   content: '\e33c';
 }
 
-.e-rte-toolbar .e-dimension::before,
-.e-rte-dropdown-popup .e-dimension::before {
+.e-rte-toolbar .e-img-dimension::before,
+.e-rte-dropdown-popup .e-img-dimension::before {
   content: '\e336';
 }
 
@@ -663,15 +663,15 @@
   font-size: 13px;
 }
 
-.e-richtexteditor .e-rte-toolbar .e-toolbar-items .e-toolbar-item .e-rte-numberformatlist-dropdown .e-order-list.e-icons::before,
-.e-richtexteditor .e-rte-toolbar .e-toolbar-items .e-toolbar-item .e-rte-bulletformatlist-dropdown .e-unorder-list.e-icons::before,
-.e-richtexteditor .e-rte-toolbar .e-toolbar-extended .e-toolbar-item .e-rte-numberformatlist-dropdown .e-order-list.e-icons::before,
-.e-richtexteditor .e-rte-toolbar .e-toolbar-extended .e-toolbar-item .e-rte-bulletformatlist-dropdown .e-unorder-list.e-icons::before,
-.e-richtexteditor .e-rte-toolbar.e-toolbar.e-extended-toolbar .e-toolbar-items .e-toolbar-item .e-rte-numberformatlist-dropdown .e-order-list.e-icons::before,
-.e-richtexteditor .e-rte-toolbar.e-toolbar.e-extended-toolbar .e-toolbar-items .e-toolbar-item .e-rte-bulletformatlist-dropdown .e-unorder-list.e-icons::before,
-.e-richtexteditor .e-rte-toolbar.e-toolbar.e-extended-toolbar .e-toolbar-extended .e-toolbar-item .e-rte-numberformatlist-dropdown .e-order-list.e-icons::before,
-.e-richtexteditor .e-rte-toolbar.e-toolbar.e-extended-toolbar .e-toolbar-extended .e-toolbar-item .e-rte-bulletformatlist-dropdown .e-unorder-list.e-icons::before {
-  font-size: 14px;
+.e-richtexteditor .e-rte-toolbar .e-toolbar-items .e-toolbar-item .e-rte-numberformatlist-dropdown .e-rte-list-primary-content,
+.e-richtexteditor .e-rte-toolbar .e-toolbar-items .e-toolbar-item .e-rte-bulletformatlist-dropdown .e-rte-list-primary-content,
+.e-richtexteditor .e-rte-toolbar .e-toolbar-extended .e-toolbar-item .e-rte-numberformatlist-dropdown .e-rte-list-primary-content,
+.e-richtexteditor .e-rte-toolbar .e-toolbar-extended .e-toolbar-item .e-rte-bulletformatlist-dropdown .e-rte-list-primary-content,
+.e-richtexteditor .e-rte-toolbar.e-toolbar.e-extended-toolbar .e-toolbar-items .e-toolbar-item .e-rte-numberformatlist-dropdown .e-rte-list-primary-content,
+.e-richtexteditor .e-rte-toolbar.e-toolbar.e-extended-toolbar .e-toolbar-items .e-toolbar-item .e-rte-bulletformatlist-dropdown .e-rte-list-primary-content,
+.e-richtexteditor .e-rte-toolbar.e-toolbar.e-extended-toolbar .e-toolbar-extended .e-toolbar-item .e-rte-numberformatlist-dropdown .e-rte-list-primary-content,
+.e-richtexteditor .e-rte-toolbar.e-toolbar.e-extended-toolbar .e-toolbar-extended .e-toolbar-item .e-rte-bulletformatlist-dropdown .e-rte-list-primary-content {
+  line-height: 1;
 }
 
 .e-richtexteditor .e-rte-toolbar .e-toolbar-items .e-toolbar-item .e-background-color.e-icons::before,
@@ -1884,7 +1884,7 @@
 .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-list-primary-content .e-order-list,
 .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-rte-list-primary-content .e-unorder-list,
 .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-list-primary-content .e-unorder-list {
-  line-height: 25px;
+  line-height: 30px;
 }
 
 .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::after,
@@ -2384,6 +2384,11 @@
   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 {
+  padding-left: 0;
+  padding-right: 0;
+}
+
 .e-richtexteditor .e-rte-table-popup.e-popup-open.e-dialog .e-rte-tablecell {
   margin: 1px;
 }
@@ -2394,6 +2399,10 @@
   border-bottom: 0;
 }
 
+.e-richtexteditor .e-rte-toolbar .e-toolbar-item.e-overlay .e-tbar-btn .e-icons {
+  color: #f0f0f0;
+}
+
 .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(26, 26, 26, 0.12);
@@ -2658,6 +2667,10 @@
   border-bottom: 0;
 }
 
+.e-richtexteditor.e-rte-tb-expand .e-rte-toolbar .e-toolbar-extended.e-popup-open {
+  border-bottom: 0;
+}
+
 .e-richtexteditor.e-rte-tb-expand .e-rte-toolbar.e-expand-open + .e-rte-content {
   border-top: 0;
 }

package/styles/bootstrap.css

@@ -342,8 +342,8 @@
   content: '\e33c';
 }
 
-.e-rte-toolbar .e-dimension::before,
-.e-rte-dropdown-popup .e-dimension::before {
+.e-rte-toolbar .e-img-dimension::before,
+.e-rte-dropdown-popup .e-img-dimension::before {
   content: '\e336';
 }
 
@@ -809,15 +809,15 @@
   font-size: 13px;
 }
 
-.e-richtexteditor .e-rte-toolbar .e-toolbar-items .e-toolbar-item .e-rte-numberformatlist-dropdown .e-order-list.e-icons::before,
-.e-richtexteditor .e-rte-toolbar .e-toolbar-items .e-toolbar-item .e-rte-bulletformatlist-dropdown .e-unorder-list.e-icons::before,
-.e-richtexteditor .e-rte-toolbar .e-toolbar-extended .e-toolbar-item .e-rte-numberformatlist-dropdown .e-order-list.e-icons::before,
-.e-richtexteditor .e-rte-toolbar .e-toolbar-extended .e-toolbar-item .e-rte-bulletformatlist-dropdown .e-unorder-list.e-icons::before,
-.e-richtexteditor .e-rte-toolbar.e-toolbar.e-extended-toolbar .e-toolbar-items .e-toolbar-item .e-rte-numberformatlist-dropdown .e-order-list.e-icons::before,
-.e-richtexteditor .e-rte-toolbar.e-toolbar.e-extended-toolbar .e-toolbar-items .e-toolbar-item .e-rte-bulletformatlist-dropdown .e-unorder-list.e-icons::before,
-.e-richtexteditor .e-rte-toolbar.e-toolbar.e-extended-toolbar .e-toolbar-extended .e-toolbar-item .e-rte-numberformatlist-dropdown .e-order-list.e-icons::before,
-.e-richtexteditor .e-rte-toolbar.e-toolbar.e-extended-toolbar .e-toolbar-extended .e-toolbar-item .e-rte-bulletformatlist-dropdown .e-unorder-list.e-icons::before {
-  font-size: 14px;
+.e-richtexteditor .e-rte-toolbar .e-toolbar-items .e-toolbar-item .e-rte-numberformatlist-dropdown .e-rte-list-primary-content,
+.e-richtexteditor .e-rte-toolbar .e-toolbar-items .e-toolbar-item .e-rte-bulletformatlist-dropdown .e-rte-list-primary-content,
+.e-richtexteditor .e-rte-toolbar .e-toolbar-extended .e-toolbar-item .e-rte-numberformatlist-dropdown .e-rte-list-primary-content,
+.e-richtexteditor .e-rte-toolbar .e-toolbar-extended .e-toolbar-item .e-rte-bulletformatlist-dropdown .e-rte-list-primary-content,
+.e-richtexteditor .e-rte-toolbar.e-toolbar.e-extended-toolbar .e-toolbar-items .e-toolbar-item .e-rte-numberformatlist-dropdown .e-rte-list-primary-content,
+.e-richtexteditor .e-rte-toolbar.e-toolbar.e-extended-toolbar .e-toolbar-items .e-toolbar-item .e-rte-bulletformatlist-dropdown .e-rte-list-primary-content,
+.e-richtexteditor .e-rte-toolbar.e-toolbar.e-extended-toolbar .e-toolbar-extended .e-toolbar-item .e-rte-numberformatlist-dropdown .e-rte-list-primary-content,
+.e-richtexteditor .e-rte-toolbar.e-toolbar.e-extended-toolbar .e-toolbar-extended .e-toolbar-item .e-rte-bulletformatlist-dropdown .e-rte-list-primary-content {
+  line-height: 1;
 }
 
 .e-richtexteditor .e-rte-toolbar .e-toolbar-items .e-toolbar-item .e-background-color.e-icons::before,
@@ -2030,7 +2030,7 @@
 .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-list-primary-content .e-order-list,
 .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-rte-list-primary-content .e-unorder-list,
 .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-list-primary-content .e-unorder-list {
-  line-height: 25px;
+  line-height: 30px;
 }
 
 .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::after,
@@ -2530,6 +2530,11 @@
   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 {
+  padding-left: 0;
+  padding-right: 0;
+}
+
 .e-richtexteditor .e-rte-table-popup.e-popup-open.e-dialog .e-rte-tablecell {
   margin: 1px;
 }
@@ -2540,6 +2545,10 @@
   border-bottom: 0;
 }
 
+.e-richtexteditor .e-rte-toolbar .e-toolbar-item.e-overlay .e-tbar-btn .e-icons {
+  color: #000;
+}
+
 .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);
@@ -2804,6 +2813,10 @@
   border-bottom: 0;
 }
 
+.e-richtexteditor.e-rte-tb-expand .e-rte-toolbar .e-toolbar-extended.e-popup-open {
+  border-bottom: 0;
+}
+
 .e-richtexteditor.e-rte-tb-expand .e-rte-toolbar.e-expand-open + .e-rte-content {
   border-top: 0;
 }

package/styles/bootstrap4.css

@@ -475,8 +475,8 @@
   content: '\e80b';
 }
 
-.e-rte-toolbar .e-dimension::before,
-.e-rte-dropdown-popup .e-dimension::before {
+.e-rte-toolbar .e-img-dimension::before,
+.e-rte-dropdown-popup .e-img-dimension::before {
   content: '\e791';
 }
 
@@ -942,15 +942,15 @@
   font-size: 13px;
 }
 
-.e-richtexteditor .e-rte-toolbar .e-toolbar-items .e-toolbar-item .e-rte-numberformatlist-dropdown .e-order-list.e-icons::before,
-.e-richtexteditor .e-rte-toolbar .e-toolbar-items .e-toolbar-item .e-rte-bulletformatlist-dropdown .e-unorder-list.e-icons::before,
-.e-richtexteditor .e-rte-toolbar .e-toolbar-extended .e-toolbar-item .e-rte-numberformatlist-dropdown .e-order-list.e-icons::before,
-.e-richtexteditor .e-rte-toolbar .e-toolbar-extended .e-toolbar-item .e-rte-bulletformatlist-dropdown .e-unorder-list.e-icons::before,
-.e-richtexteditor .e-rte-toolbar.e-toolbar.e-extended-toolbar .e-toolbar-items .e-toolbar-item .e-rte-numberformatlist-dropdown .e-order-list.e-icons::before,
-.e-richtexteditor .e-rte-toolbar.e-toolbar.e-extended-toolbar .e-toolbar-items .e-toolbar-item .e-rte-bulletformatlist-dropdown .e-unorder-list.e-icons::before,
-.e-richtexteditor .e-rte-toolbar.e-toolbar.e-extended-toolbar .e-toolbar-extended .e-toolbar-item .e-rte-numberformatlist-dropdown .e-order-list.e-icons::before,
-.e-richtexteditor .e-rte-toolbar.e-toolbar.e-extended-toolbar .e-toolbar-extended .e-toolbar-item .e-rte-bulletformatlist-dropdown .e-unorder-list.e-icons::before {
-  font-size: 14px;
+.e-richtexteditor .e-rte-toolbar .e-toolbar-items .e-toolbar-item .e-rte-numberformatlist-dropdown .e-rte-list-primary-content,
+.e-richtexteditor .e-rte-toolbar .e-toolbar-items .e-toolbar-item .e-rte-bulletformatlist-dropdown .e-rte-list-primary-content,
+.e-richtexteditor .e-rte-toolbar .e-toolbar-extended .e-toolbar-item .e-rte-numberformatlist-dropdown .e-rte-list-primary-content,
+.e-richtexteditor .e-rte-toolbar .e-toolbar-extended .e-toolbar-item .e-rte-bulletformatlist-dropdown .e-rte-list-primary-content,
+.e-richtexteditor .e-rte-toolbar.e-toolbar.e-extended-toolbar .e-toolbar-items .e-toolbar-item .e-rte-numberformatlist-dropdown .e-rte-list-primary-content,
+.e-richtexteditor .e-rte-toolbar.e-toolbar.e-extended-toolbar .e-toolbar-items .e-toolbar-item .e-rte-bulletformatlist-dropdown .e-rte-list-primary-content,
+.e-richtexteditor .e-rte-toolbar.e-toolbar.e-extended-toolbar .e-toolbar-extended .e-toolbar-item .e-rte-numberformatlist-dropdown .e-rte-list-primary-content,
+.e-richtexteditor .e-rte-toolbar.e-toolbar.e-extended-toolbar .e-toolbar-extended .e-toolbar-item .e-rte-bulletformatlist-dropdown .e-rte-list-primary-content {
+  line-height: 1;
 }
 
 .e-richtexteditor .e-rte-toolbar .e-toolbar-items .e-toolbar-item .e-background-color.e-icons::before,
@@ -2163,7 +2163,7 @@
 .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-list-primary-content .e-order-list,
 .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-rte-list-primary-content .e-unorder-list,
 .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-list-primary-content .e-unorder-list {
-  line-height: 30px;
+  line-height: 28px;
 }
 
 .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::after,
@@ -2418,7 +2418,7 @@
 .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.e-active .e-rte-list-primary-content .e-order-list,
 .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 .e-rte-list-primary-content .e-unorder-list,
 .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.e-active .e-rte-list-primary-content .e-unorder-list {
-  line-height: 32px;
+  line-height: 36px;
 }
 
 .e-bigger .e-rte-toolbar.e-toolbar.e-extended-toolbar .e-toolbar-items .e-toolbar-item button.e-rte-fontcolor-dropdown.e-dropdown-btn.e-tbar-btn.e-btn.e-control .e-icons.e-btn-icon,
@@ -2673,6 +2673,10 @@
   border-bottom: 0;
 }
 
+.e-richtexteditor .e-rte-toolbar .e-toolbar-item.e-overlay .e-tbar-btn .e-icons {
+  color: rgba(108, 117, 125, 0.3);
+}
+
 .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: #6c757d;
@@ -2937,6 +2941,10 @@
   border-bottom: 0;
 }
 
+.e-richtexteditor.e-rte-tb-expand .e-rte-toolbar .e-toolbar-extended.e-popup-open {
+  border-bottom: 0;
+}
+
 .e-richtexteditor.e-rte-tb-expand .e-rte-toolbar.e-expand-open + .e-rte-content {
   border-top: 0;
 }