@syncfusion/ej2-richtexteditor 20.4.52 → 21.1.35

package/src/rich-text-editor/models/toolbar-settings.d.ts

@@ -5,7 +5,7 @@ import { NavigationPaneSettingsModel, SearchSettingsModel, SortOrder } from '@sy
 import { ToolbarSettingsModel as FileToolbarSettingsModel } from '@syncfusion/ej2-filemanager';
 import { UploadSettingsModel, ViewType } from '@syncfusion/ej2-filemanager';
 import { SaveFormat, DisplayLayoutOptions } from '../../common';
-import { ToolbarType, ActionOnScroll, ToolbarItems } from '../base/enum';
+import { ToolbarType, ActionOnScroll, ToolbarItems, FormatPainterContext } from '../base/enum';
 import { IToolbarItems, IDropDownItemModel, ColorModeType, IToolsItemConfigs, IListDropDownModel } from '../base/interface';
 /**
  * Configures the toolbar settings of the RichTextEditor.
@@ -497,6 +497,29 @@ export declare class QuickToolbarSettings extends ChildProperty<QuickToolbarSett
      */
     table: (string | IToolbarItems)[];
 }
+/**
+ * Configure the format painter settings of the Rich Text Editor.
+ */
+export declare class FormatPainterSettings extends ChildProperty<FormatPainterSettings> {
+    /**
+     * Defines the context or contexts in which styles will be copied.
+     *
+     * @default ['Text', 'List', 'Table']
+     */
+    allowedContext: FormatPainterContext[];
+    /**
+     * Defines the tag name selectors for obtaining the formats from the elements.
+     *
+     * @default 'b; em; font; sub; sup; kbd; i; s; u; code; strong; span; p; div; h1; h2; h3; h4; h5; h6; blockquote; table; thead; tbody; tr; td; th; ol; ul; li; pre;'
+     */
+    allowedFormats: string;
+    /**
+     * Defines selectors for the elements from which fetching formats is expressly prohibited.
+     *
+     * @default null
+     */
+    deniedFormats: string;
+}
 /**
  * Configures the Paste Cleanup settings of the RichTextEditor.
  */

package/src/rich-text-editor/models/toolbar-settings.js

@@ -309,6 +309,26 @@ var QuickToolbarSettings = /** @class */ (function (_super) {
     return QuickToolbarSettings;
 }(ChildProperty));
 export { QuickToolbarSettings };
+/**
+ * Configure the format painter settings of the Rich Text Editor.
+ */
+var FormatPainterSettings = /** @class */ (function (_super) {
+    __extends(FormatPainterSettings, _super);
+    function FormatPainterSettings() {
+        return _super !== null && _super.apply(this, arguments) || this;
+    }
+    __decorate([
+        Property(['Text', 'List', 'Table'])
+    ], FormatPainterSettings.prototype, "allowedContext", void 0);
+    __decorate([
+        Property('b; em; font; sub; sup; kbd; i; s; u; code; strong; span; p; div; h1; h2; h3; h4; h5; h6; blockquote; table; thead; tbody; tr; td; th; ol; ul; li; pre;')
+    ], FormatPainterSettings.prototype, "allowedFormats", void 0);
+    __decorate([
+        Property(null)
+    ], FormatPainterSettings.prototype, "deniedFormats", void 0);
+    return FormatPainterSettings;
+}(ChildProperty));
+export { FormatPainterSettings };
 /**
  * Configures the Paste Cleanup settings of the RichTextEditor.
  */

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

@@ -181,8 +181,9 @@ var Audio = /** @class */ (function () {
         }
         if (originalEvent.keyCode === 8 || originalEvent.keyCode === 46) {
             if (selectNodeEle && this.isAudioElem(selectNodeEle[0]) && selectNodeEle.length < 1) {
-                if (!isNullOrUndefined(this.parent.formatter.editorManager.nodeSelection))
+                if (!isNullOrUndefined(this.parent.formatter.editorManager.nodeSelection)) {
                     save = this.parent.formatter.editorManager.nodeSelection.save(range, this.parent.contentModule.getDocument());
+                }
                 originalEvent.preventDefault();
                 var event_1 = {
                     selectNode: selectNodeEle, selection: save, selectParent: selectParentEle,
@@ -231,8 +232,9 @@ var Audio = /** @class */ (function () {
                 }
                 break;
             case 'insert-audio':
-                if (!isNullOrUndefined(this.parent.formatter.editorManager.nodeSelection))
+                if (!isNullOrUndefined(this.parent.formatter.editorManager.nodeSelection)) {
                     save = this.parent.formatter.editorManager.nodeSelection.save(range, this.parent.contentModule.getDocument());
+                }
                 this.openDialog(true, originalEvent, save, selectNodeEle, selectParentEle);
                 originalEvent.preventDefault();
                 break;
@@ -258,7 +260,8 @@ var Audio = /** @class */ (function () {
             this.insertAudio({
                 args: {
                     item: { command: 'Audios', subCommand: 'Audio' },
-                    originalEvent: event
+                    originalEvent: event,
+                    name: !isInternal ? 'showDialog' : null
                 },
                 selectNode: selectNodeEle,
                 selection: save,

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

@@ -387,7 +387,8 @@ var Image = /** @class */ (function () {
                     img.setAttribute('width', (img.width + this.mouseX).toString());
                 }
                 else {
-                    img.setAttribute('width', (img.offsetWidth + this.mouseX).toString());
+                    var currentWidth = img.offsetWidth === 0 ? img.width + this.mouseX + parseInt(img.style.outlineWidth.split('p')[0]) : img.offsetWidth + this.mouseX;
+                    img.setAttribute('width', (currentWidth).toString());
                 }
             }
         }
@@ -470,7 +471,7 @@ var Image = /** @class */ (function () {
         var pageX = this.getPointX(e);
         var pageY = this.getPointY(e);
         var mouseX = (this.resizeBtnStat.botLeft || this.resizeBtnStat.topLeft) ? -(pageX - this.pageX) : (pageX - this.pageX);
-        var mouseY = (this.resizeBtnStat.topLeft || this.resizeBtnStat.topRight) ? -(pageY - this.pageY) : (pageY - this.pageY);
+        var mouseY = (this.resizeBtnStat.botLeft || this.resizeBtnStat.topLeft) ? -(pageY - this.pageY) : (pageY - this.pageY);
         var width = parseInt(this.imgDupPos.width, 10) + mouseX;
         var height = parseInt(this.imgDupPos.height, 10) + mouseY;
         this.mouseX = mouseX;
@@ -641,8 +642,9 @@ var Image = /** @class */ (function () {
         }
         if (originalEvent.keyCode === 8 || originalEvent.keyCode === 46) {
             if (selectNodeEle && selectNodeEle[0].nodeName === 'IMG' && selectNodeEle.length < 1) {
-                if (!isNullOrUndefined(this.parent.formatter.editorManager.nodeSelection))
+                if (!isNullOrUndefined(this.parent.formatter.editorManager.nodeSelection)) {
                     save = this.parent.formatter.editorManager.nodeSelection.save(range, this.parent.contentModule.getDocument());
+                }
                 originalEvent.preventDefault();
                 var event_1 = {
                     selectNode: selectNodeEle, selection: save, selectParent: selectParentEle,
@@ -701,8 +703,9 @@ var Image = /** @class */ (function () {
                 }
                 break;
             case 'insert-image':
-                if (!isNullOrUndefined(this.parent.formatter.editorManager.nodeSelection))
+                if (!isNullOrUndefined(this.parent.formatter.editorManager.nodeSelection)) {
                     save = this.parent.formatter.editorManager.nodeSelection.save(range, this.parent.contentModule.getDocument());
+                }
                 this.openDialog(true, originalEvent, save, selectNodeEle, selectParentEle);
                 originalEvent.preventDefault();
                 break;
@@ -728,7 +731,8 @@ var Image = /** @class */ (function () {
             this.insertImage({
                 args: {
                     item: { command: 'Images', subCommand: 'Image' },
-                    originalEvent: event
+                    originalEvent: event,
+                    name: !isInternal ? 'showDialog' : null
                 },
                 selectNode: selectNodeEle,
                 selection: save,
@@ -739,7 +743,8 @@ var Image = /** @class */ (function () {
             this.insertImage({
                 args: {
                     item: { command: 'Images', subCommand: 'Image' },
-                    originalEvent: event
+                    originalEvent: event,
+                    name: !isInternal ? 'showDialog' : null
                 },
                 member: 'image',
                 text: this.parent.formatter.editorManager.markdownSelection.getSelectedText(this.parent.contentModule.getEditPanel()),

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

@@ -198,7 +198,8 @@ var Link = /** @class */ (function () {
             var eventArgs = {
                 args: event ? event.args : {
                     item: { command: 'Links', subCommand: 'CreateLink' },
-                    originalEvent: undefined
+                    originalEvent: undefined,
+                    name: !isInternal ? 'showDialog' : null
                 },
                 selectNode: selectNodeEle, selection: save, selectParent: selectParentEle
             };

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

@@ -184,8 +184,9 @@ var Table = /** @class */ (function () {
             if ((event.keyCode === 8 || event.keyCode === 46) ||
                 (event.ctrlKey && event.keyCode === 88)) {
                 if (ele && ele.tagName === 'TBODY') {
-                    if (!isNullOrUndefined(this.parent.formatter.editorManager.nodeSelection) && this.contentModule)
+                    if (!isNullOrUndefined(this.parent.formatter.editorManager.nodeSelection) && this.contentModule) {
                         selection = this.parent.formatter.editorManager.nodeSelection.save(range, this.contentModule.getDocument());
+                    }
                     event.preventDefault();
                     proxy.removeTable(selection, event, true);
                 }
@@ -199,8 +200,9 @@ var Table = /** @class */ (function () {
                 ele = !isNullOrUndefined(closestTd) && this.parent.inputElement.contains(closestTd) ? closestTd : ele;
             }
             if (ele && (ele.tagName === 'TD' || ele.tagName === 'TH')) {
-                if (!isNullOrUndefined(this.parent.formatter.editorManager.nodeSelection) && this.contentModule)
+                if (!isNullOrUndefined(this.parent.formatter.editorManager.nodeSelection) && this.contentModule) {
                     selection = this.parent.formatter.editorManager.nodeSelection.save(range, this.contentModule.getDocument());
+                }
                 switch (event.keyCode) {
                     case 9:
                     case 37:
@@ -243,7 +245,8 @@ var Table = /** @class */ (function () {
                 item: {
                     command: 'Table',
                     subCommand: 'CreateTable'
-                }
+                },
+                name: !isInternal ? 'showDialog' : null
             };
             this.insertTableDialog({ self: this, args: args, selection: selection });
         }
@@ -468,9 +471,18 @@ var Table = /** @class */ (function () {
                 var range_1 = this.parent.formatter.editorManager.nodeSelection.getRange(this.contentModule.getDocument());
                 this.parent.formatter.editorManager.nodeSelection.save(range_1, this.contentModule.getDocument());
                 this.parent.formatter.editorManager.nodeSelection.Clear(this.contentModule.getDocument());
-                var pageX = (this.parent.iframeSettings.enable) ? window.pageXOffset + this.parent.element.getBoundingClientRect().left + args.clientX : args.pageX;
-                var pageY = (this.parent.iframeSettings.enable) ? window.pageYOffset +
-                    this.parent.element.getBoundingClientRect().top + args.clientY : args.pageY;
+                var pageX = void 0;
+                var pageY = void 0;
+                if (Browser.isDevice && e.args.touches) {
+                    pageX = e.args.changedTouches[0].pageX;
+                    pageY = e.args.changedTouches[0].pageY;
+                }
+                else {
+                    pageX = (this.parent.iframeSettings.enable) ? window.pageXOffset
+                        + this.parent.element.getBoundingClientRect().left + args.clientX : args.pageX;
+                    pageY = (this.parent.iframeSettings.enable) ? window.pageYOffset +
+                        this.parent.element.getBoundingClientRect().top + args.clientY : args.pageY;
+                }
                 this.quickToolObj.tableQTBar.showPopup(pageX, pageY, target);
                 this.parent.formatter.editorManager.nodeSelection.restore();
             }

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

@@ -2,7 +2,7 @@ import { addClass, Browser, removeClass, EventHandler, formatUnit, isNullOrUndef
 import { getInstance, closest, selectAll, detach } from '@syncfusion/ej2-base';
 import { Toolbar } from '@syncfusion/ej2-navigations';
 import { DropDownButton } from '@syncfusion/ej2-splitbuttons';
-import { Popup } from '@syncfusion/ej2-popups';
+import { Popup, Tooltip } from '@syncfusion/ej2-popups';
 import * as classes from '../base/classes';
 import * as events from '../base/constant';
 import { CLS_TOOLBAR, CLS_DROPDOWN_BTN, CLS_RTE_ELEMENTS, CLS_TB_BTN, CLS_INLINE_DROPDOWN, CLS_COLOR_CONTENT, CLS_FONT_COLOR_DROPDOWN, CLS_BACKGROUND_COLOR_DROPDOWN, CLS_COLOR_PALETTE, CLS_FONT_COLOR_PICKER, CLS_BACKGROUND_COLOR_PICKER, CLS_CUSTOM_TILE, CLS_NOCOLOR_ITEM, CLS_BULLETFORMATLIST_TB_BTN, CLS_NUMBERFORMATLIST_TB_BTN, CLS_LIST_PRIMARY_CONTENT } from '../base/classes';
@@ -121,6 +121,14 @@ var ToolbarRenderer = /** @class */ (function () {
         args.rteToolbarObj.toolbarObj.isStringTemplate = true;
         args.rteToolbarObj.toolbarObj.createElement = this.parent.createElement;
         args.rteToolbarObj.toolbarObj.appendTo(args.target);
+        if (this.parent.showTooltip) {
+            var tooltip = new Tooltip({
+                target: '#' + this.parent.getID() + '_toolbar_wrapper [title]',
+                showTipPointer: true,
+                cssClass: this.parent.cssClass
+            });
+            tooltip.appendTo(args.target);
+        }
     };
     /**
      * renderDropDownButton method
@@ -227,6 +235,7 @@ var ToolbarRenderer = /** @class */ (function () {
         dropDown.createElement = proxy.parent.createElement;
         dropDown.appendTo(args.element);
         args.element.tabIndex = -1;
+        args.element.setAttribute('role', 'button');
         var popupElement = document.getElementById(dropDown.element.id + '-popup');
         popupElement.setAttribute('aria-owns', this.parent.getID());
         if (args.element.childElementCount === 1) {

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

@@ -412,7 +412,7 @@ var Video = /** @class */ (function () {
         var height = vidEleStyle.height !== '' ? parseInt(vidEleStyle.height, 10) : vid.style.height !== '' ? vid.style.height : vid.height;
         if (width > height) {
             vid.style.minWidth = this.parent.insertVideoSettings.minWidth === 0 ? '140px' : formatUnit(this.parent.insertVideoSettings.minWidth);
-            vid.style.minHeight = this.parent.insertVideoSettings.minHeight === 0 ? '50px' : formatUnit(this.parent.insertVideoSettings.minHeight);
+            vid.style.minHeight = this.parent.insertVideoSettings.minHeight === 0 ? '60px' : formatUnit(this.parent.insertVideoSettings.minHeight);
             if (this.parent.insertVideoSettings.resizeByPercent) {
                 if (parseInt('' + vid.getBoundingClientRect().width + '', 10) !== 0 && parseInt('' + width + '', 10) !== 0) {
                     var percentageValue = this.pixToPerc((parseInt(width.toString(), 10) / parseInt(height.toString(), 10) * expectedY), (vid.previousElementSibling || vid.parentElement));
@@ -624,8 +624,9 @@ var Video = /** @class */ (function () {
         }
         if (originalEvent.keyCode === 8 || originalEvent.keyCode === 46) {
             if (selectNodeEle && (selectNodeEle[0].nodeName === 'VIDEO' || this.isEmbedVidElem(selectNodeEle[0])) && selectNodeEle.length < 1) {
-                if (!isNullOrUndefined(this.parent.formatter.editorManager.nodeSelection))
+                if (!isNullOrUndefined(this.parent.formatter.editorManager.nodeSelection)) {
                     save = this.parent.formatter.editorManager.nodeSelection.save(range, this.parent.contentModule.getDocument());
+                }
                 originalEvent.preventDefault();
                 var event_1 = {
                     selectNode: selectNodeEle, selection: save, selectParent: selectParentEle,
@@ -678,8 +679,9 @@ var Video = /** @class */ (function () {
                 }
                 break;
             case 'insert-video':
-                if (!isNullOrUndefined(this.parent.formatter.editorManager.nodeSelection))
+                if (!isNullOrUndefined(this.parent.formatter.editorManager.nodeSelection)) {
                     save = this.parent.formatter.editorManager.nodeSelection.save(range, this.parent.contentModule.getDocument());
+                }
                 this.openDialog(true, originalEvent, save, selectNodeEle, selectParentEle);
                 originalEvent.preventDefault();
                 break;
@@ -705,7 +707,8 @@ var Video = /** @class */ (function () {
             this.insertVideo({
                 args: {
                     item: { command: 'Videos', subCommand: 'Video' },
-                    originalEvent: event
+                    originalEvent: event,
+                    name: !isInternal ? 'showDialog' : null
                 },
                 selectNode: selectNodeEle,
                 selection: save,
@@ -954,7 +957,7 @@ var Video = /** @class */ (function () {
     };
     Video.prototype.showVideoQuickToolbar = function (e) {
         var _this = this;
-        if (e.type !== 'Videos' || e.args.detail === 2 || isNullOrUndefined(this.parent.quickToolbarModule)
+        if (e.type !== 'Videos' || (!isNullOrUndefined(e.args) && e.args.detail === 2) || isNullOrUndefined(this.parent.quickToolbarModule)
             || isNullOrUndefined(this.parent.quickToolbarModule.videoQTBar) || isNullOrUndefined(e.args)) {
             return;
         }

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

@@ -79,7 +79,7 @@ var ViewSource = /** @class */ (function () {
                 break;
             case 'toolbar-focus':
                 if (this.parent.toolbarSettings.enable) {
-                    var selector = '.e-toolbar-item[aria-disabled="false"][title] [tabindex]';
+                    var selector = '.e-toolbar-item[title] [tabindex]';
                     this.parent.toolbarModule.baseToolbar.toolbarObj.element.querySelector(selector).focus();
                 }
                 break;

package/styles/bootstrap-dark.css

@@ -305,6 +305,10 @@
 .e-rte-dropdown-popup .e-rte-file-manager::before {
   content: "\e42b";
 }
+.e-rte-toolbar .e-rte-format-painter::before,
+.e-rte-dropdown-popup .e-rte-format-painter::before {
+  content: "\e98b";
+}
 
 .e-richtexteditor .e-south-east::before,
 .e-richtexteditor .e-south-west::before {
@@ -327,6 +331,10 @@
   content: "\e89c";
 }
 
+.e-rte-cursor-brush {
+  cursor: url('data:image/svg+xml;utf8,<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" clip-rule="evenodd" d="M16.0194 8H18.0175C19.6583 8 21 9.35001 21 11L20.9903 23H4L5.0932 10.91C5.0932 9.35001 6.42524 8 8.07573 8H10.0544V1H16.0194V8ZM8.06602 10C7.51845 10 7.07184 10.45 7.07184 11L6.89126 13H19.0019V11C19.0019 10.45 18.5553 10 18.0078 10H8.06602ZM14.0311 8V3H12.0427V8H14.0311ZM19.0019 15H6.71068L6.16699 21H7.83689L19.0019 15.6291V15ZM19.0019 17.8463L12.4466 21H19.0019V17.8463Z" fill="black"/><path d="M6.71068 15H19.0019V15.6291L7.83689 21H6.16699L6.71068 15Z" fill="white"/><path d="M8.06602 10C7.51845 10 7.07184 10.45 7.07184 11L6.89126 13H19.0019V11C19.0019 10.45 18.5553 10 18.0078 10H8.06602Z" fill="white"/><path d="M14.0311 8V3H12.0427V8H14.0311Z" fill="white"/><path d="M19.0019 17.8463L12.4466 21H19.0019V17.8463Z" fill="white"/></svg>'), text;
+}
+
 /*! tab layout */
 .e-bigger .e-richtexteditor .e-rte-toolbar .e-toolbar-items:not(.e-tbar-pos) .e-toolbar-item:first-child,
 .e-richtexteditor.e-bigger .e-rte-toolbar .e-toolbar-items:not(.e-tbar-pos) .e-toolbar-item:first-child {
@@ -555,6 +563,7 @@
   margin-right: 0;
 }
 .e-richtexteditor .e-rte-toolbar.e-rte-tb-mobile .e-toolbar-multirow {
+  display: inline-block;
   margin-left: 0;
   margin-right: 0;
   overflow-x: auto;
@@ -1417,6 +1426,7 @@
 }
 .e-rte-quick-popup .e-rte-quick-toolbar .e-toolbar-items:not(.e-tbar-pos).e-toolbar-multirow {
   white-space: nowrap;
+  display: inline-block;
 }
 .e-rte-quick-popup .e-rte-quick-toolbar.e-remove-white-space .e-toolbar-items:not(.e-tbar-pos).e-toolbar-multirow {
   white-space: nowrap;
@@ -2297,6 +2307,11 @@
   margin: 1px;
 }
 
+.e-transparent.e-rte-elements.e-tbar-btn.e-rte-fontcolor-dropdown,
+.e-transparent.e-rte-elements.e-tbar-btn.e-rte-backgroundcolor-dropdown {
+  visibility: hidden;
+}
+
 /*! tab layout */
 .e-richtexteditor .e-rte-toolbar {
   border: 1px solid #505050;
@@ -2389,6 +2404,9 @@
 .e-richtexteditor .e-rte-toolbar .e-toolbar-extended .e-toolbar-item .e-tbar-btn .e-icons {
   color: #f0f0f0;
 }
+.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-active .e-tbar-btn .e-icons {
   color: #f0f0f0;
 }
@@ -2407,6 +2425,9 @@
 .e-richtexteditor .e-toolbar-wrapper + .e-rte-toolbar:not(.e-rte-tb-float) {
   border: 0;
 }
+.e-richtexteditor .e-toolbar-wrapper {
+  background: #131313;
+}
 .e-richtexteditor img.e-img-focus::selection,
 .e-richtexteditor audio.e-audio-focus::selection,
 .e-richtexteditor .e-video-focus::selection {
@@ -2605,7 +2626,8 @@
 
 .e-dialog .e-img-uploadwrap .e-droptext,
 .e-dialog .e-aud-uploadwrap .e-droptext,
-.e-dialog .e-vid-uploadwrap .e-droptext {
+.e-dialog .e-vid-uploadwrap .e-droptext,
+.e-dialog.e-device .e-vid-uploadwrap .e-droptext {
   border: dashed 2px #505050;
   border-radius: 4px;
   color: #676767;
@@ -2618,6 +2640,10 @@
   width: 300px;
 }
 
+.e-dialog .e-vid-uploadwrap .e-droptext {
+  height: 108px;
+}
+
 .e-dialog.e-device.e-dlg-modal .e-img-uploadwrap .e-droptext,
 .e-dialog.e-device.e-dlg-modal .e-vid-uploadwrap .e-droptext,
 .e-dialog.e-device.e-dlg-modal .e-aud-uploadwrap .e-droptext {
@@ -2770,6 +2796,10 @@ span.e-table-box.e-rbox-select {
   color: #f0f0f0;
 }
 
+.e-richtexteditor .e-rte-toolbar .e-toolbar-extended .e-toolbar-item .e-tbar-btn.e-active .e-icons {
+  color: #f0f0f0;
+}
+
 .e-richtexteditor.e-rte-tb-expand .e-rte-content-border {
   border-bottom: 0;
 }

package/styles/bootstrap.css

@@ -446,6 +446,10 @@
 .e-rte-dropdown-popup .e-rte-file-manager::before {
   content: "\e42b";
 }
+.e-rte-toolbar .e-rte-format-painter::before,
+.e-rte-dropdown-popup .e-rte-format-painter::before {
+  content: "\e98b";
+}
 
 .e-richtexteditor .e-south-east::before,
 .e-richtexteditor .e-south-west::before {
@@ -468,6 +472,10 @@
   content: "\e89c";
 }
 
+.e-rte-cursor-brush {
+  cursor: url('data:image/svg+xml;utf8,<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" clip-rule="evenodd" d="M16.0194 8H18.0175C19.6583 8 21 9.35001 21 11L20.9903 23H4L5.0932 10.91C5.0932 9.35001 6.42524 8 8.07573 8H10.0544V1H16.0194V8ZM8.06602 10C7.51845 10 7.07184 10.45 7.07184 11L6.89126 13H19.0019V11C19.0019 10.45 18.5553 10 18.0078 10H8.06602ZM14.0311 8V3H12.0427V8H14.0311ZM19.0019 15H6.71068L6.16699 21H7.83689L19.0019 15.6291V15ZM19.0019 17.8463L12.4466 21H19.0019V17.8463Z" fill="black"/><path d="M6.71068 15H19.0019V15.6291L7.83689 21H6.16699L6.71068 15Z" fill="white"/><path d="M8.06602 10C7.51845 10 7.07184 10.45 7.07184 11L6.89126 13H19.0019V11C19.0019 10.45 18.5553 10 18.0078 10H8.06602Z" fill="white"/><path d="M14.0311 8V3H12.0427V8H14.0311Z" fill="white"/><path d="M19.0019 17.8463L12.4466 21H19.0019V17.8463Z" fill="white"/></svg>'), text;
+}
+
 /*! tab layout */
 .e-bigger .e-richtexteditor .e-rte-toolbar .e-toolbar-items:not(.e-tbar-pos) .e-toolbar-item:first-child,
 .e-richtexteditor.e-bigger .e-rte-toolbar .e-toolbar-items:not(.e-tbar-pos) .e-toolbar-item:first-child {
@@ -696,6 +704,7 @@
   margin-right: 0;
 }
 .e-richtexteditor .e-rte-toolbar.e-rte-tb-mobile .e-toolbar-multirow {
+  display: inline-block;
   margin-left: 0;
   margin-right: 0;
   overflow-x: auto;
@@ -1558,6 +1567,7 @@
 }
 .e-rte-quick-popup .e-rte-quick-toolbar .e-toolbar-items:not(.e-tbar-pos).e-toolbar-multirow {
   white-space: nowrap;
+  display: inline-block;
 }
 .e-rte-quick-popup .e-rte-quick-toolbar.e-remove-white-space .e-toolbar-items:not(.e-tbar-pos).e-toolbar-multirow {
   white-space: nowrap;
@@ -2438,6 +2448,11 @@
   margin: 1px;
 }
 
+.e-transparent.e-rte-elements.e-tbar-btn.e-rte-fontcolor-dropdown,
+.e-transparent.e-rte-elements.e-tbar-btn.e-rte-backgroundcolor-dropdown {
+  visibility: hidden;
+}
+
 /*! tab layout */
 .e-richtexteditor .e-rte-toolbar {
   border: 1px solid #ddd;
@@ -2530,6 +2545,9 @@
 .e-richtexteditor .e-rte-toolbar .e-toolbar-extended .e-toolbar-item .e-tbar-btn .e-icons {
   color: #000;
 }
+.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-active .e-tbar-btn .e-icons {
   color: #000;
 }
@@ -2548,6 +2566,9 @@
 .e-richtexteditor .e-toolbar-wrapper + .e-rte-toolbar:not(.e-rte-tb-float) {
   border: 0;
 }
+.e-richtexteditor .e-toolbar-wrapper {
+  background: #f8f8f8;
+}
 .e-richtexteditor img.e-img-focus::selection,
 .e-richtexteditor audio.e-audio-focus::selection,
 .e-richtexteditor .e-video-focus::selection {
@@ -2746,7 +2767,8 @@
 
 .e-dialog .e-img-uploadwrap .e-droptext,
 .e-dialog .e-aud-uploadwrap .e-droptext,
-.e-dialog .e-vid-uploadwrap .e-droptext {
+.e-dialog .e-vid-uploadwrap .e-droptext,
+.e-dialog.e-device .e-vid-uploadwrap .e-droptext {
   border: dashed 2px #d4d4d4;
   border-radius: 4px;
   color: #adadad;
@@ -2759,6 +2781,10 @@
   width: 300px;
 }
 
+.e-dialog .e-vid-uploadwrap .e-droptext {
+  height: 108px;
+}
+
 .e-dialog.e-device.e-dlg-modal .e-img-uploadwrap .e-droptext,
 .e-dialog.e-device.e-dlg-modal .e-vid-uploadwrap .e-droptext,
 .e-dialog.e-device.e-dlg-modal .e-aud-uploadwrap .e-droptext {
@@ -2911,6 +2937,10 @@ span.e-table-box.e-rbox-select {
   color: #000;
 }
 
+.e-richtexteditor .e-rte-toolbar .e-toolbar-extended .e-toolbar-item .e-tbar-btn.e-active .e-icons {
+  color: #000;
+}
+
 .e-richtexteditor.e-rte-tb-expand .e-rte-content-border {
   border-bottom: 0;
 }

package/styles/bootstrap4.css

@@ -541,6 +541,10 @@
 .e-rte-dropdown-popup .e-rte-file-manager::before {
   content: "\e70f";
 }
+.e-rte-toolbar .e-rte-format-painter::before,
+.e-rte-dropdown-popup .e-rte-format-painter::before {
+  content: "\e979";
+}
 
 .e-richtexteditor .e-south-east::before,
 .e-richtexteditor .e-south-west::before {
@@ -563,6 +567,10 @@
   content: "\e89c";
 }
 
+.e-rte-cursor-brush {
+  cursor: url('data:image/svg+xml;utf8,<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" clip-rule="evenodd" d="M16.0194 8H18.0175C19.6583 8 21 9.35001 21 11L20.9903 23H4L5.0932 10.91C5.0932 9.35001 6.42524 8 8.07573 8H10.0544V1H16.0194V8ZM8.06602 10C7.51845 10 7.07184 10.45 7.07184 11L6.89126 13H19.0019V11C19.0019 10.45 18.5553 10 18.0078 10H8.06602ZM14.0311 8V3H12.0427V8H14.0311ZM19.0019 15H6.71068L6.16699 21H7.83689L19.0019 15.6291V15ZM19.0019 17.8463L12.4466 21H19.0019V17.8463Z" fill="black"/><path d="M6.71068 15H19.0019V15.6291L7.83689 21H6.16699L6.71068 15Z" fill="white"/><path d="M8.06602 10C7.51845 10 7.07184 10.45 7.07184 11L6.89126 13H19.0019V11C19.0019 10.45 18.5553 10 18.0078 10H8.06602Z" fill="white"/><path d="M14.0311 8V3H12.0427V8H14.0311Z" fill="white"/><path d="M19.0019 17.8463L12.4466 21H19.0019V17.8463Z" fill="white"/></svg>'), text;
+}
+
 /*! tab layout */
 .e-bigger .e-richtexteditor .e-rte-toolbar .e-toolbar-items:not(.e-tbar-pos) .e-toolbar-item:first-child,
 .e-richtexteditor.e-bigger .e-rte-toolbar .e-toolbar-items:not(.e-tbar-pos) .e-toolbar-item:first-child {
@@ -791,6 +799,7 @@
   margin-right: 0;
 }
 .e-richtexteditor .e-rte-toolbar.e-rte-tb-mobile .e-toolbar-multirow {
+  display: inline-block;
   margin-left: 0;
   margin-right: 0;
   overflow-x: auto;
@@ -1653,6 +1662,7 @@
 }
 .e-rte-quick-popup .e-rte-quick-toolbar .e-toolbar-items:not(.e-tbar-pos).e-toolbar-multirow {
   white-space: nowrap;
+  display: inline-block;
 }
 .e-rte-quick-popup .e-rte-quick-toolbar.e-remove-white-space .e-toolbar-items:not(.e-tbar-pos).e-toolbar-multirow {
   white-space: nowrap;
@@ -2525,6 +2535,11 @@
   margin: 1px;
 }
 
+.e-transparent.e-rte-elements.e-tbar-btn.e-rte-fontcolor-dropdown,
+.e-transparent.e-rte-elements.e-tbar-btn.e-rte-backgroundcolor-dropdown {
+  visibility: hidden;
+}
+
 /*! tab layout */
 .e-richtexteditor .e-rte-toolbar {
   border: 1px solid #dee2e6;
@@ -2617,6 +2632,9 @@
 .e-richtexteditor .e-rte-toolbar .e-toolbar-extended .e-toolbar-item .e-tbar-btn .e-icons {
   color: #212529;
 }
+.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-active .e-tbar-btn .e-icons {
   color: #212529;
 }
@@ -2635,6 +2653,9 @@
 .e-richtexteditor .e-toolbar-wrapper + .e-rte-toolbar:not(.e-rte-tb-float) {
   border: 0;
 }
+.e-richtexteditor .e-toolbar-wrapper {
+  background: #f8f9fa;
+}
 .e-richtexteditor img.e-img-focus::selection,
 .e-richtexteditor audio.e-audio-focus::selection,
 .e-richtexteditor .e-video-focus::selection {
@@ -2833,7 +2854,8 @@
 
 .e-dialog .e-img-uploadwrap .e-droptext,
 .e-dialog .e-aud-uploadwrap .e-droptext,
-.e-dialog .e-vid-uploadwrap .e-droptext {
+.e-dialog .e-vid-uploadwrap .e-droptext,
+.e-dialog.e-device .e-vid-uploadwrap .e-droptext {
   border: dashed 2px #adb5bd;
   border-radius: 4px;
   color: #212529;
@@ -2846,6 +2868,10 @@
   width: 300px;
 }
 
+.e-dialog .e-vid-uploadwrap .e-droptext {
+  height: 108px;
+}
+
 .e-dialog.e-device.e-dlg-modal .e-img-uploadwrap .e-droptext,
 .e-dialog.e-device.e-dlg-modal .e-vid-uploadwrap .e-droptext,
 .e-dialog.e-device.e-dlg-modal .e-aud-uploadwrap .e-droptext {
@@ -2998,6 +3024,10 @@ span.e-table-box.e-rbox-select {
   color: #fff;
 }
 
+.e-richtexteditor .e-rte-toolbar .e-toolbar-extended .e-toolbar-item .e-tbar-btn.e-active .e-icons {
+  color: #212529;
+}
+
 .e-richtexteditor.e-rte-tb-expand .e-rte-content-border {
   border-bottom: 0;
 }