@syncfusion/ej2-angular-richtexteditor 20.4.53 → 21.1.35

package/styles/rich-text-editor/_highcontrast-definition.scss

@@ -6,13 +6,13 @@ $rte-list-btn-flex: column !default;
 $rte-list-btn-line-height: 1 !default;
 $rte-split-btn-line-height: 40px !default;
 $rte-big-split-btn-line-height: 50px !default;
-$skin-name: 'highcontrast' !default;
 $rte-border-color: $border-fg !default;
 $rte-full-screen-bg: $bg-base-0 !default;
 $rte-content-bg: $bg-base-0 !default;
 $rte-content-font-color: #fff !default;
 $rte-item-color: $content-font !default;
 $rte-icons-color: $content-font !default;
+$rte-hover-icons-color: $content-font !default;
 $rte-content-padding: 16px !default;
 $rte-table-popup-padding: 10px !default;
 
@@ -137,6 +137,7 @@ $rte-table-span-active-bg-color: rgba($selection-bg, .2) !default;
 $rte-table-span-active-border-color: $selection-border !default;
 $rte-table-select-border-color: #0478d7 !default;
 $rte-table-popup-bg: $bg-base-0 !default;
+$rte-table-resize-back-color: $bg-base-0 !default;
 $rte-table-popup-color: $border-fg !default;
 $rte-table-popup-box: 0 3px 8px 0 rgba($bg-base-75, .26) !default;
 $rte-table-border-color: #bdbdbd !default;
@@ -187,4 +188,26 @@ $rte-big-file-browser-dlg-max-height: 557px !default;
 $rte-big-table-dlg-max-height: 309px !default;
 $rte-big-edit-table-dlg-max-height: 400px !default;
 $rte-drop-text-width: 288px !default;
+$rte-drop-text-height: 185px !default;
 $rte-drop-text-mobile-width: 238px !default;
+$rte-tbar-default-bg: $bg-base-0;
+$rte-droparea-line-height: 10;
+$rte-droparea-browsebtn-height: 36px;
+$rte-droparea-browsebtn-padding: 0 18px;
+$rte-droparea-browsebtn-top: -50px;
+$rte-insert-dialog-font-size: 15px;
+$rte-big-insert-dialog-font-size: 15px;
+$rte-table-popup-tablecell-height: 14px;
+$rte-table-popup-tablecell-width: 14px;
+$rte-table-popup-tablecell-margin: 1px;
+$rte-table-popup-row-height : 16px;
+$rte-border-top-left-radius: 0;
+$rte-border-top-right-radius: 0;
+$rte-border-bottom-right-radius: 0;
+$rte-border-bottom-left-radius: 0;
+$rte-big-border-radius: 0;
+$rte-big-table-row-height : 18px;
+$rte-big-tablecell-height : 16px;
+$rte-big-tablecell-width : 16px;
+$rte-toolbar-item-frist-last-child-margin: 0 6px;
+$rte-big-toolbar-item-frist-last-child-margin: 0 6px;

package/styles/rich-text-editor/_highcontrast-light-definition.scss

@@ -6,13 +6,13 @@ $rte-list-btn-flex: column !default;
 $rte-list-btn-line-height: 1 !default;
 $rte-split-btn-line-height: 39px !default;
 $rte-big-split-btn-line-height: 47px !default;
-$skin-name: 'highcontrast' !default;
 $rte-border-color: $border-fg !default;
 $rte-full-screen-bg: $bg-base-0 !default;
 $rte-content-bg: $bg-base-0 !default;
 $rte-content-font-color: #fff !default;
 $rte-item-color: $content-font !default;
 $rte-icons-color: $content-font !default;
+$rte-hover-icons-color: $content-font !default;
 $rte-table-popup-padding: 10px !default;
 
 $rte-big-quick-item-btn-width: 39px !default;
@@ -137,6 +137,7 @@ $rte-table-span-active-bg-color: rgba($selection-bg, .2) !default;
 $rte-table-span-active-border-color: $selection-border !default;
 $rte-table-select-border-color: #0478d7 !default;
 $rte-table-popup-bg: $bg-base-0 !default;
+$rte-table-resize-back-color: $bg-base-0 !default;
 $rte-table-popup-color: $border-fg !default;
 $rte-table-popup-box: 0 3px 8px 0 rgba($bg-base-75, .26) !default;
 $rte-table-border-color: #bdbdbd !default;
@@ -187,4 +188,26 @@ $rte-big-file-browser-dlg-max-height: 557px !default;
 $rte-big-table-dlg-max-height: 309px !default;
 $rte-big-edit-table-dlg-max-height: 400px !default;
 $rte-drop-text-width: 288px !default;
+$rte-drop-text-height: 185px !default;
 $rte-drop-text-mobile-width: 238px !default;
+$rte-tbar-default-bg: $bg-base-0;
+$rte-droparea-line-height: 10;
+$rte-droparea-browsebtn-height: 36px;
+$rte-droparea-browsebtn-padding: 0 18px;
+$rte-droparea-browsebtn-top: -50px;
+$rte-insert-dialog-font-size: 15px;
+$rte-big-insert-dialog-font-size: 15px;
+$rte-table-popup-tablecell-height: 14px;
+$rte-table-popup-tablecell-width: 14px;
+$rte-table-popup-tablecell-margin: 1px;
+$rte-table-popup-row-height : 16px;
+$rte-border-top-left-radius: 0;
+$rte-border-top-right-radius: 0;
+$rte-border-bottom-right-radius: 0;
+$rte-border-bottom-left-radius: 0;
+$rte-big-border-radius: 0;
+$rte-big-table-row-height : 18px;
+$rte-big-tablecell-height : 16px;
+$rte-big-tablecell-width : 16px;
+$rte-toolbar-item-frist-last-child-margin: 0 6px;
+$rte-big-toolbar-item-frist-last-child-margin: 0 6px;

package/styles/rich-text-editor/_layout.scss

@@ -944,7 +944,7 @@
     .e-videoheader,
     .e-video-url-wrap {
       font-family: $rte-font-family;
-      font-size: 15px;
+      font-size: $rte-insert-dialog-font-size;
       opacity: .87;
       padding-bottom: $rte-insert-dialog-label-padding-bottom;
       padding-top: $rte-insert-dialog-label-padding-top;
@@ -1002,11 +1002,11 @@
     .e-dialog .e-aud-uploadwrap.e-droparea .e-browsebtn,
     .e-dialog .e-vid-uploadwrap.e-droparea .e-browsebtn {
       display: block;
-      height: 36px;
+      height: $rte-droparea-browsebtn-height;
       margin: 0 auto;
-      padding: 0 18px;
+      padding: $rte-droparea-browsebtn-padding;
       position: relative;
-      top: -50px;
+      top: $rte-droparea-browsebtn-top;
       @if $skin-name == 'FluentUI' {
         outline: none;
       }
@@ -1026,7 +1026,7 @@
     .e-dialog .e-img-uploadwrap.e-droparea,
     .e-dialog .e-aud-uploadwrap.e-droparea,
     .e-dialog .e-vid-uploadwrap.e-droparea {
-      line-height: 10;
+      line-height: $rte-droparea-line-height;
       min-height: 50px;
       position: relative;
     }
@@ -1079,15 +1079,15 @@
     .e-rte-table-popup.e-popup-open .e-rte-tablecell {
       border: $rte-table-span-border;
       display: inline-block;
-      height: 14px;
-      margin: 1px;
+      height: $rte-table-popup-tablecell-height;
+      margin: $rte-table-popup-tablecell-margin;
       overflow: hidden;
       vertical-align: top;
-      width: 14px;
+      width: $rte-table-popup-tablecell-width;
     }
 
     .e-rte-table-popup.e-popup-open .e-rte-table-row {
-      height: 16px;
+      height: $rte-table-popup-row-height;
     }
 
     .e-rte-table-popup.e-popup-open .e-insert-table-btn {
@@ -1171,6 +1171,7 @@
 
       .e-toolbar-items:not(.e-tbar-pos).e-toolbar-multirow {
         white-space: nowrap;
+        display: inline-block;
       }
 
       &.e-remove-white-space {
@@ -1194,7 +1195,7 @@
         }
 
         .e-toolbar-item {
-          margin: 0 6px;
+          margin: $rte-toolbar-item-frist-last-child-margin;
           min-height: 42px;
 
           &:first-child,
@@ -1304,7 +1305,7 @@
 
         .e-toolbar-item:first-child,
         .e-toolbar-item:last-child {
-          margin: 0 6px;
+          margin: $rte-big-toolbar-item-frist-last-child-margin;
         }
 
         .e-toolbar-item .e-tbar-btn.e-btn.e-control {
@@ -1611,12 +1612,12 @@
   }
 
   .e-bigger .e-rte-table-popup.e-popup-open .e-rte-tablecell {
-    height: 16px;
-    width: 16px;
+    height: $rte-big-tablecell-height;
+    width: $rte-big-tablecell-width;
   }
 
   .e-bigger .e-rte-table-popup.e-popup-open .e-rte-table-row {
-    height: 18px;
+    height: $rte-big-table-row-height;
   }
 
   .e-table-rhelper {
@@ -1729,7 +1730,7 @@
 
     .e-linkheader {
       font-family: $rte-font-family;
-      font-size: 15px;
+      font-size: $rte-big-insert-dialog-font-size;
       opacity: .87;
       padding-bottom: $rte-insert-dialog-label-padding-bottom;
       padding-top: $rte-insert-dialog-label-padding-top;
@@ -1749,6 +1750,32 @@
     }
   }
 
+  @if $skin-name == 'Material3' {
+    .e-rte-toolbar .e-rte-table-popup .e-insert-table-btn{
+      border-color: $outline;
+    }
+    .e-dialog .e-dlg-header-content + .e-dlg-content{
+      padding-top: 0;
+    }
+    .e-bigger .e-richtexteditor,
+    .e-richtexteditor.e-bigger {
+      .e-dialog {
+        border-radius: 16px;
+      }
+    }
+    .e-dialog .e-dlg-content{
+      padding: 7px 20px;
+    }
+    .e-toolbar-wrapper .e-toolbar .e-toolbar-item:not(.e-separator),
+    .e-bigger .e-toolbar .e-toolbar-item:not(.e-separator) {
+      padding: 8px 4px;
+    }
+    .e-rte-quick-popup .e-rte-toolbar.e-rte-quick-toolbar .e-toolbar-items:not(.e-tbar-pos) .e-toolbar-item:first-child,
+    .e-rte-quick-popup .e-rte-quick-toolbar .e-toolbar-items:not(.e-tbar-pos) .e-toolbar-item:last-child {
+      margin: 0;
+    }
+  }
+  
   // Blazor styles start
   .e-rte-upload-popup.e-dialog .e-file-select-wrap {
     display: none;
@@ -1829,5 +1856,9 @@
   .e-richtexteditor .e-rte-table-popup.e-popup-open.e-dialog .e-rte-tablecell {
     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;
+  }
   // Blazor styles end
 }

package/styles/rich-text-editor/_material-dark-definition.scss

@@ -7,7 +7,6 @@ $rte-list-btn-flex: column !default;
 $rte-list-btn-line-height: 1 !default;
 $rte-split-btn-line-height: 25px !default;
 $rte-big-split-btn-line-height: 35px !default;
-$skin-name: 'material' !default;
 $rte-btn-color: rgba($grey-dark-font, .22) !default;
 $rte-border-color: $grey-700 !default;
 $rte-content-bg: $grey-dark !default;
@@ -15,6 +14,7 @@ $rte-full-screen-bg: $grey-dark !default;
 $rte-content-font-color: $grey-dark-font !default;
 $rte-item-color: $grey-dark-font !default;
 $rte-icons-color: $grey-dark-font !default;
+$rte-hover-icons-color: $grey-dark-font !default;
 $rte-content-padding: 16px !default;
 $rte-table-popup-padding: 10px !default;
 $rte-toolbar-icon-size: 16px !default;
@@ -142,6 +142,7 @@ $rte-table-span-active-bg-color: rgba($accent, .2) !default;
 $rte-table-span-active-border-color: $accent !default;
 $rte-table-select-border-color: #0478d7 !default;
 $rte-table-popup-bg: $grey-800 !default;
+$rte-table-resize-back-color: $grey-800 !default;
 $rte-table-popup-color: $grey-black !default;
 $rte-table-popup-box: 0 3px 8px 0 rgba($grey-black, .26) !default;
 $rte-table-border-color: rgba($grey-white, .5) !default;
@@ -189,6 +190,29 @@ $rte-big-file-browser-dlg-max-height: 557px !default;
 $rte-big-table-dlg-max-height: 312px !default;
 $rte-big-edit-table-dlg-max-height: 385px !default;
 $rte-drop-text-width: 300px !default;
+$rte-drop-text-height: 185px !default;
 $rte-drop-text-mobile-width: 250px !default;
 
+$rte-tbar-default-bg: $grey-900;
+$rte-droparea-line-height: 10;
+$rte-droparea-browsebtn-height: 36px;
+$rte-droparea-browsebtn-padding: 0 18px;
+$rte-droparea-browsebtn-top: -50px;
+$rte-insert-dialog-font-size: 15px;
+$rte-big-insert-dialog-font-size: 15px;
+$rte-table-popup-tablecell-height: 14px;
+$rte-table-popup-tablecell-width: 14px;
+$rte-table-popup-tablecell-margin: 1px;
+$rte-table-popup-row-height : 16px;
+$rte-border-top-left-radius: 0;
+$rte-border-top-right-radius: 0;
+$rte-border-bottom-right-radius: 0;
+$rte-border-bottom-left-radius: 0;
+$rte-big-border-radius: 0;
+$rte-big-table-row-height : 18px;
+$rte-big-tablecell-height : 16px;
+$rte-big-tablecell-width : 16px;
+$rte-toolbar-item-frist-last-child-margin: 0 6px;
+$rte-big-toolbar-item-frist-last-child-margin: 0 6px;
+
 //enddefult

package/styles/rich-text-editor/_material-definition.scss

@@ -6,7 +6,6 @@ $rte-list-btn-flex: column !default;
 $rte-list-btn-line-height: 1 !default;
 $rte-split-btn-line-height: 25px !default;
 $rte-big-split-btn-line-height: 35px !default;
-$skin-name: 'material' !default;
 $rte-btn-color: rgba($grey-black, .87) !default;
 $rte-border-color: rgba($grey-black, .12) !default;
 $rte-content-bg: $grey-white !default;
@@ -14,6 +13,7 @@ $rte-full-screen-bg: $grey-white !default;
 $rte-content-font-color: #333 !default;
 $rte-item-color: $grey-black !default;
 $rte-icons-color: $grey-black !default;
+$rte-hover-icons-color: $grey-black !default;
 $rte-content-padding: 16px !default;
 $rte-table-popup-padding: 10px !default;
 
@@ -139,6 +139,7 @@ $rte-table-span-active-bg-color: rgba($accent, .2) !default;
 $rte-table-span-active-border-color: $accent !default;
 $rte-table-select-border-color: #0478d7 !default;
 $rte-table-popup-bg: $grey-white !default;
+$rte-table-resize-back-color: $grey-white !default;
 $rte-table-popup-color: $grey-black !default;
 $rte-table-popup-box: 0 3px 8px 0 rgba($grey-black, .26) !default;
 $rte-table-border-color: #bdbdbd !default;
@@ -189,4 +190,26 @@ $rte-big-file-browser-dlg-max-height: 557px !default;
 $rte-big-table-dlg-max-height: 312px !default;
 $rte-big-edit-table-dlg-max-height: 385px !default;
 $rte-drop-text-width: 300px !default;
+$rte-drop-text-height: 185px !default;
 $rte-drop-text-mobile-width: 250px !default;
+$rte-tbar-default-bg: $grey-50;
+$rte-droparea-line-height: 10;
+$rte-droparea-browsebtn-height: 36px;
+$rte-droparea-browsebtn-padding: 0 18px;
+$rte-droparea-browsebtn-top: -50px;
+$rte-insert-dialog-font-size: 15px;
+$rte-big-insert-dialog-font-size: 15px;
+$rte-table-popup-tablecell-height: 14px;
+$rte-table-popup-tablecell-width: 14px;
+$rte-table-popup-tablecell-margin: 1px;
+$rte-table-popup-row-height : 16px;
+$rte-border-top-left-radius: 0;
+$rte-border-top-right-radius: 0;
+$rte-border-bottom-right-radius: 0;
+$rte-border-bottom-left-radius: 0;
+$rte-big-border-radius: 0;
+$rte-big-table-row-height : 18px;
+$rte-big-tablecell-height : 16px;
+$rte-big-tablecell-width : 16px;
+$rte-toolbar-item-frist-last-child-margin: 0 6px;
+$rte-big-toolbar-item-frist-last-child-margin: 0 6px;

package/styles/rich-text-editor/_tailwind-definition.scss

@@ -1,5 +1,3 @@
-$skin-name: 'tailwind' !default;
-
 //Layout Variables Start
 $rte-border-size: 1px !default;
 $rte-2px-border-size: 2px !default;
@@ -29,8 +27,8 @@ $rte-big-quick-drop-btn-icon-size: 16px !default;
 $rte-quick-drop-btn-icon-size: 14px !default;
 $rte-big-quick-drop-btn-caret-icon-size: 10px !default;
 $rte-quick-drop-btn-caret-icon-size: 12px !default;
-$rte-big-quick-drop-btn-caret-font-size: 12px !default;
-$rte-quick-drop-btn-caret-font-size: 10px !default;
+$rte-big-quick-drop-btn-caret-font-size: $text-xs !default;
+$rte-quick-drop-btn-caret-font-size: $text-xxs !default;
 $rte-big-tb-items-margin-left: 3px !default;
 $rte-tb-items-margin-left: 7px !default;
 $rte-big-tb-items-padding-left: 3px !default;
@@ -70,7 +68,7 @@ $rte-big-quick-tbar-item-min-width: 39px !default;
 $rte-content-font-size:  $text-sm !default;
 $rte-dropdown-caret-icon-size: $text-xs !default;
 $rte-big-dropdown-caret-icon-size: $text-sm !default;
-$font-weight: 400 !default;
+$font-weight: $font-weight-normal !default;
 $rte-table-popup-bdr-radius: 2px !default;
 $rte-resize-handler-width: 15px;
 $rte-resize-handler-height: 15px;
@@ -84,6 +82,21 @@ $rte-inline-tmp-color-min-width: 55px;
 $rte-big-color-list-span-common-padding-left-right: 0;
 $rte-placeholder-padding: 12px !default;
 $rte-default-character-count-opacity: 1;
+$rte-droparea-line-height: 10;
+$rte-droparea-browsebtn-height: 36px;
+$rte-droparea-browsebtn-padding: 0 18px;
+$rte-droparea-browsebtn-top: -50px;
+$rte-insert-dialog-font-size: 15px;
+$rte-big-insert-dialog-font-size: 15px;
+$rte-table-popup-tablecell-height: 14px;
+$rte-table-popup-tablecell-width: 14px;
+$rte-table-popup-tablecell-margin: 1px;
+$rte-table-popup-row-height : 16px;
+$rte-big-table-row-height : 18px;
+$rte-big-tablecell-height : 16px;
+$rte-big-tablecell-width : 16px;
+$rte-toolbar-item-frist-last-child-margin: 0 6px;
+$rte-big-toolbar-item-frist-last-child-margin: 0 6px;
 
 //Layout Variables End
 
@@ -94,6 +107,7 @@ $rte-full-screen-bg: $content-bg-color !default;
 $rte-content-font-color: $content-text-color !default;
 $rte-item-color: $content-text-color !default;
 $rte-icons-color: $icon-color !default;
+$rte-hover-icons-color: $icon-color !default;
 $rte-img-popup-border: 1px solid $border-light !default;
 $rte-img-popup-box-shadow: $shadow !default;
 $rte-img-popup-color: $border-light !default;
@@ -162,12 +176,18 @@ $rte-table-span-active-bg-color: $primary-lighter !default;
 $rte-table-span-active-border-color: $primary !default;
 $rte-table-select-border-color:  $primary !default;
 $rte-table-popup-bg: $content-bg-color !default;
+$rte-table-resize-back-color: $content-bg-color !default;
 $rte-table-popup-color: $border-light !default;
 $rte-table-popup-box: $shadow !default;
 $rte-table-border-color: $border-light !default;
 $rte-table-alternate-color: $content-bg-color-alt1 !default;
 $rte-table-header-bg: $content-bg-color-alt1 !default;
 $rte-toolbar-hor-nav-border-width: 0 0 0 1px !default;
+$rte-border-top-left-radius: 0;
+$rte-border-top-right-radius: 0;
+$rte-border-bottom-right-radius: 0;
+$rte-border-bottom-left-radius: 0;
+$rte-big-border-radius: 0;
 
 //Theme Variables End
 
@@ -191,4 +211,6 @@ $rte-big-file-browser-dlg-max-height: 557px !default;
 $rte-big-table-dlg-max-height: 283px !default;
 $rte-big-edit-table-dlg-max-height: 388px !default;
 $rte-drop-text-width: 300px !default;
+$rte-drop-text-height: 185px !default;
 $rte-drop-text-mobile-width: 250px !default;
+$rte-tbar-default-bg: $content-bg-color-alt2;

package/styles/rich-text-editor/_theme.scss

@@ -157,6 +157,9 @@
         .e-toolbar-item .e-tbar-btn .e-icons {
           color: $rte-icons-color;
         }
+        .e-toolbar-item .e-tbar-btn:hover .e-icons {
+          color: $rte-hover-icons-color;
+        }
 
         .e-toolbar-item.e-active .e-tbar-btn .e-icons {
           color: $rte-tb-active-font-color;
@@ -193,13 +196,22 @@
       border: 0;
     }
 
+    .e-toolbar-wrapper {
+      background: $rte-tbar-default-bg;
+    }
+
     img.e-img-focus::selection,
     audio.e-audio-focus::selection,
     .e-video-focus::selection {
       background: transparent;
       color: transparent;
     }
-
+    @if $skin-name == 'Material3' {
+      ::selection {
+        color: $white;
+        background: $primary;
+      }
+    }
     .e-rte-content,
     .e-source-content {
       background: $rte-content-bg;
@@ -457,19 +469,24 @@
 
   .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 $rte-upload-drag-border-clr;
     border-radius: 4px;
     color: $rte-drop-text-clr;
     display: block;
     font-family: $rte-font-family;
     font-size: 14px;
-    height: 185px;
+    height: $rte-drop-text-height;
     margin: 0 auto;
     text-align: center;
     width: $rte-drop-text-width;
   }
 
+  .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 {
@@ -577,7 +594,9 @@
   }
 
   .e-rte-table-popup .e-span-border {
-    border: 1px solid $rte-border-color;
+    @if $skin-name != 'Material3' {
+      border: 1px solid $rte-border-color;
+    }
     display: block;
     margin-bottom: 8px;
     margin-top: 12px;
@@ -622,7 +641,7 @@
   }
 
   span.e-table-box {
-    background-color: $rte-table-popup-bg;
+    background-color: $rte-table-resize-back-color;
     border: 1px solid $rte-table-border-color;
   }
 
@@ -688,6 +707,33 @@
     }
   }
 
+  @if $skin-name == 'Material3' {
+    .e-bigger .e-richtexteditor.e-rte-tb-expand {
+      border-radius: 8px;
+    }
+    .e-bigger .e-richtexteditor .e-toolbar-wrapper {
+      border-top-left-radius: $rte-border-top-left-radius;
+      border-top-right-radius: $rte-border-top-right-radius;
+    }
+    .e-bigger .e-richtexteditor.e-rte-tb-expand .e-rte-toolbar.e-extended-toolbar,
+    .e-bigger .e-richtexteditor.e-rte-tb-expand .e-rte-toolbar .e-toolbar-extended {
+      border-top-left-radius: $rte-border-top-left-radius;
+      border-top-right-radius: $rte-border-top-right-radius;
+    }
+    .e-bigger .e-toolbar .e-toolbar-items {
+      border-top-left-radius: $rte-border-top-left-radius;
+    }
+    .e-bigger .e-toolbar .e-hor-nav {
+      border-top-right-radius: $rte-border-top-right-radius;
+    }
+    .e-bigger .e-rtl .e-toolbar .e-hor-nav {
+      border-top-left-radius: $rte-border-top-left-radius;
+      border-top-right-radius: 0;
+    }
+    .e-bigger .e-rtl .e-toolbar .e-toolbar-items {
+      border-top-right-radius: $rte-border-top-right-radius;
+    }
+  }
   // Blazor styles start
   .e-richtexteditor.e-rte-tb-expand .e-rte-content-border {
     border-bottom: 0;

package/styles/rich-text-editor/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 {
@@ -1417,6 +1425,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 +2306,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 +2403,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 +2424,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 +2625,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 +2639,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 {