@syncfusion/ej2-richtexteditor 25.1.37 → 25.1.38

package/dist/global/index.d.ts

@@ -1,6 +1,6 @@
 /*!
 *  filename: index.d.ts
-*  version : 25.1.37
+*  version : 25.1.38
 *  Copyright Syncfusion Inc. 2001 - 2023. 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@25.1.35",
+  "_id": "@syncfusion/ej2-richtexteditor@25.1.37",
   "_inBundle": false,
-  "_integrity": "sha512-+ZVGzeuC6zPgsx8Ydma2G5WgxqpfYz7NnO17cQwk7cLzhoGTJqSrY/dcHCwPYe884mJ4hm0P6QB1mD9kUXywFA==",
+  "_integrity": "sha512-CEvrleMxqO4OKhdhi18qBG/K230NQEOrIMhby9ijEpKXDIZMDr5Ya3WHfVA+ODcCjIYsSy3kIJcH13sjKdwcyQ==",
   "_location": "/@syncfusion/ej2-richtexteditor",
   "_phantomChildren": {},
   "_requested": {
@@ -25,8 +25,8 @@
     "/@syncfusion/ej2-react-richtexteditor",
     "/@syncfusion/ej2-vue-richtexteditor"
   ],
-  "_resolved": "https://nexus.syncfusioninternal.com/repository/ej2-hotfix-new/@syncfusion/ej2-richtexteditor/-/ej2-richtexteditor-25.1.35.tgz",
-  "_shasum": "9b56182752bfc14fa4ccfbe95f8a3875a66ecabc",
+  "_resolved": "https://nexus.syncfusioninternal.com/repository/ej2-hotfix-new/@syncfusion/ej2-richtexteditor/-/ej2-richtexteditor-25.1.37.tgz",
+  "_shasum": "33b50ff739e07452c07dcd7aeb20843177c42689",
   "_spec": "@syncfusion/ej2-richtexteditor@*",
   "_where": "/jenkins/workspace/elease-automation_release_25.1.1/packages/included",
   "author": {
@@ -39,11 +39,11 @@
   "dependencies": {
     "@syncfusion/ej2-base": "~25.1.35",
     "@syncfusion/ej2-buttons": "~25.1.35",
-    "@syncfusion/ej2-filemanager": "~25.1.37",
-    "@syncfusion/ej2-inputs": "~25.1.37",
-    "@syncfusion/ej2-navigations": "~25.1.37",
-    "@syncfusion/ej2-popups": "~25.1.35",
-    "@syncfusion/ej2-splitbuttons": "~25.1.37"
+    "@syncfusion/ej2-filemanager": "~25.1.38",
+    "@syncfusion/ej2-inputs": "~25.1.38",
+    "@syncfusion/ej2-navigations": "~25.1.38",
+    "@syncfusion/ej2-popups": "~25.1.38",
+    "@syncfusion/ej2-splitbuttons": "~25.1.38"
   },
   "deprecated": false,
   "description": "Essential JS 2 RichTextEditor component",
@@ -69,6 +69,6 @@
     "url": "git+https://github.com/syncfusion/ej2-javascript-ui-controls.git"
   },
   "typings": "index.d.ts",
-  "version": "25.1.37",
+  "version": "25.1.38",
   "sideEffects": false
 }

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

@@ -215,25 +215,22 @@ var InsertHtml = /** @class */ (function () {
             CONSTANT.TABLE_BLOCK_TAGS.indexOf(closestParentNode.tagName.toLocaleLowerCase()) !== -1))
             || (node.nodeName.toLowerCase() === 'table' && closestParentNode &&
                 CONSTANT.TABLE_BLOCK_TAGS.indexOf(closestParentNode.tagName.toLocaleLowerCase()) === -1))) {
-            if (isCollapsed) {
-                preNode = nodeCutter.SplitNode(range, closestParentNode, true);
-            }
-            else {
-                preNode = nodeCutter.SplitNode(range, closestParentNode, false);
-            }
-            sibNode = isNOU(preNode.previousSibling) ? preNode.parentNode.previousSibling : preNode.previousSibling;
-            if (nodes.length === 1) {
-                nodeSelection.setSelectionContents(docElement, preNode);
-                range = nodeSelection.getRange(docElement);
-                isSingleNode = true;
-            }
-            else {
-                lasNode = nodeCutter.GetSpliceNode(range, nodes[nodes.length - 1].parentElement);
-                lasNode = isNOU(lasNode) ? preNode : lasNode;
-                nodeSelection.setSelectionText(docElement, preNode, lasNode, 0, (lasNode.nodeType === 3) ?
-                    lasNode.textContent.length : lasNode.childNodes.length);
-                range = nodeSelection.getRange(docElement);
-                isSingleNode = false;
+            preNode = nodeCutter.GetSpliceNode(range, closestParentNode);
+            if (!isNOU(preNode)) {
+                sibNode = isNOU(preNode.previousSibling) ? preNode.parentNode.previousSibling : preNode.previousSibling;
+                if (nodes.length === 1) {
+                    nodeSelection.setSelectionContents(docElement, preNode);
+                    range = nodeSelection.getRange(docElement);
+                    isSingleNode = true;
+                }
+                else {
+                    lasNode = nodeCutter.GetSpliceNode(range, nodes[nodes.length - 1].parentElement);
+                    lasNode = isNOU(lasNode) ? preNode : lasNode;
+                    nodeSelection.setSelectionText(docElement, preNode, lasNode, 0, (lasNode.nodeType === 3) ?
+                        lasNode.textContent.length : lasNode.childNodes.length);
+                    range = nodeSelection.getRange(docElement);
+                    isSingleNode = false;
+                }
             }
         }
         var containsBlockNode = false;

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

@@ -212,6 +212,7 @@ var Lists = /** @class */ (function () {
         endNode = endNode.nodeName === 'BR' ? endNode.parentElement : endNode;
         startNode = startNode.nodeName !== 'LI' && !isNOU(startNode.closest('LI')) ? startNode.closest('LI') : startNode;
         endNode = endNode.nodeName !== 'LI' && endNode.nodeName !== '#text' && !isNOU(endNode.closest('LI')) ? endNode.closest('LI') : endNode;
+        var parentList = (range.startContainer.nodeName === '#text') ? range.startContainer.parentElement.closest('li') : range.startContainer.closest('li');
         if (((range.commonAncestorContainer.nodeName === 'OL' || range.commonAncestorContainer.nodeName === 'UL' || range.commonAncestorContainer.nodeName === 'LI') &&
             isNOU(endNode.nextElementSibling) && endNode.textContent.length === range.endOffset &&
             isNOU(startNode.previousElementSibling) && range.startOffset === 0) ||
@@ -228,6 +229,12 @@ var Lists = /** @class */ (function () {
             }
             e.event.preventDefault();
         }
+        else if (!isNOU(parentList) && parentList.textContent === range.startContainer.textContent && parentList.closest('li').previousElementSibling === null) {
+            range.deleteContents();
+            this.parent.editableElement.querySelectorAll('li:empty').forEach(function (e) { return e.remove(); });
+            this.parent.editableElement.querySelectorAll('ol:empty').forEach(function (e) { return e.remove(); });
+            e.event.preventDefault();
+        }
     };
     Lists.prototype.onKeyUp = function () {
         if (!isNOU(this.commonLIParent) && !isNOU(this.commonLIParent.querySelector('.removeList'))) {
@@ -267,7 +274,7 @@ var Lists = /** @class */ (function () {
         if (e.event.which === 8) {
             this.backspaceList(e);
         }
-        if (e.event.which === 46 && e.event.action === 'delete') {
+        if ((e.event.which === 46 && e.event.action === 'delete') || (e.event.which === 88 && e.event.action === 'cut')) {
             var range = this.parent.nodeSelection.getRange(this.parent.currentDocument);
             var commonAncestor = range.commonAncestorContainer;
             var startEle = range.startContainer;
@@ -867,17 +874,18 @@ var Lists = /** @class */ (function () {
                         var wrapperclass = isNullOrUndefined(className) ? ' class="e-rte-wrap-inner"' :
                             ' class="' + className + ' e-rte-wrap-inner"';
                         var parentElement = parentNode;
-                        if (!isNOU(parentElement.style.listStyleType)) {
-                            parentNode.style.removeProperty("list-style-type");
-                        }
-                        if (!isNOU(parentElement.style.listStyleImage)) {
-                            parentNode.style.removeProperty("list-style-image");
-                        }
-                        if (parentElement.style.length === 0) {
-                            parentNode.removeAttribute("style");
+                        if (elements.length === parentElement.querySelectorAll('li').length) {
+                            if (!isNOU(parentElement.style.listStyleType)) {
+                                parentNode.style.removeProperty('list-style-type');
+                            }
+                            if (!isNOU(parentElement.style.listStyleImage)) {
+                                parentNode.style.removeProperty('list-style-image');
+                            }
+                            if (parentElement.style.length === 0) {
+                                parentNode.removeAttribute('style');
+                            }
                         }
-                        var wrapper = '<' + CONSTANT.DEFAULT_TAG + wrapperclass +
-                            this.domNode.attributes(parentElement) + '></' + CONSTANT.DEFAULT_TAG + '>';
+                        var wrapper = '<' + CONSTANT.DEFAULT_TAG + wrapperclass + '></' + CONSTANT.DEFAULT_TAG + '>';
                         if (e.enterAction !== 'BR') {
                             this.domNode.wrapInner(element, this.domNode.parseHTMLFragment(wrapper));
                         }

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

@@ -90,9 +90,6 @@ var HtmlEditor = /** @class */ (function () {
     };
     HtmlEditor.prototype.onSelectionRestore = function (e) {
         this.parent.isBlur = false;
-        if (isNOU(this.saveSelection) || isNOU(closest(this.saveSelection.range.startContainer.parentElement, ".e-img-caption")) ? true : !(closest(this.saveSelection.range.startContainer.parentElement, ".e-img-caption").getAttribute("contenteditable") == "false")) {
-            this.contentRenderer.getEditPanel().focus();
-        }
         if (isNullOrUndefined(e.items) || e.items) {
             this.saveSelection.restore();
         }

package/src/rich-text-editor/actions/quick-toolbar.js

@@ -261,6 +261,10 @@ var QuickToolbar = /** @class */ (function () {
     };
     QuickToolbar.prototype.keyDownHandler = function (e) {
         var preventHide = e.args.altKey;
+        if (this.parent.inlineMode.enable && e.args.metaKey && e.args.keyCode === 65) {
+            this.showInlineQTBar(this.offsetX, this.offsetY, e.args.target);
+            return;
+        }
         if (!preventHide) {
             if ((this.parent.inlineMode.enable && (!Browser.isDevice || isIDevice()))
                 && !isNullOrUndefined(select('.' + CLS_INLINE_POP, document))) {

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

@@ -366,9 +366,11 @@ var ToolbarRenderer = /** @class */ (function () {
                             for (var index = 0; index < args.element.childNodes.length; index++) {
                                 if (currentListStyle === args.element.childNodes[index].innerHTML.split(' ').join('').toLocaleLowerCase()) {
                                     addClass([args.element.childNodes[index]], 'e-active');
+                                    break;
                                 }
-                                else if (currentListStyle === '') {
+                                else if (currentListStyle === '' && args.element.childNodes[index].innerHTML !== 'None') {
                                     addClass([args.element.childNodes[index]], 'e-active');
+                                    break;
                                 }
                             }
                         }

package/styles/bootstrap-dark.css

@@ -475,7 +475,7 @@
 .e-richtexteditor.e-bigger .e-rte-toolbar.e-toolbar.e-extended-toolbar .e-toolbar-items .e-dropdown-btn .e-rte-color-content,
 .e-richtexteditor.e-bigger .e-rte-toolbar.e-toolbar.e-extended-toolbar .e-toolbar-extended .e-dropdown-btn .e-rte-color-content {
   padding-top: 1px;
-  height: 30px;
+  height: 35px;
 }
 .e-bigger .e-richtexteditor.e-rte-full-screen iframe,
 .e-richtexteditor.e-bigger.e-rte-full-screen iframe {
@@ -545,11 +545,11 @@
 }
 .e-bigger .e-richtexteditor .e-toolbar.e-extended-toolbar .e-toolbar-extended .e-toolbar-item .e-tbar-btn.e-btn.e-control,
 .e-richtexteditor.e-bigger .e-toolbar.e-extended-toolbar .e-toolbar-extended .e-toolbar-item .e-tbar-btn.e-btn.e-control {
-  padding: 0 6px;
+  padding: 0 7px;
 }
 .e-bigger .e-richtexteditor .e-toolbar.e-extended-toolbar .e-toolbar-extended .e-toolbar-item .e-tbar-btn.e-btn.e-control:hover,
 .e-richtexteditor.e-bigger .e-toolbar.e-extended-toolbar .e-toolbar-extended .e-toolbar-item .e-tbar-btn.e-btn.e-control:hover {
-  padding: 0 6px;
+  padding: 0 7px;
 }
 
 .e-richtexteditor {
@@ -629,7 +629,7 @@
 }
 .e-richtexteditor .e-rte-toolbar .e-hor-nav.e-expended-nav {
   height: auto;
-  min-height: 44px;
+  min-height: 40px;
   padding-left: 1px;
 }
 .e-richtexteditor .e-rte-toolbar .e-toolbar-multirow {
@@ -1383,7 +1383,7 @@
 .e-richtexteditor .e-toolbar.e-extended-toolbar .e-toolbar-extended .e-toolbar-item .e-tbar-btn.e-btn.e-control,
 .e-rte-elements .e-toolbar.e-extended-toolbar .e-toolbar-extended .e-toolbar-item .e-tbar-btn.e-btn,
 .e-rte-elements .e-toolbar.e-extended-toolbar .e-toolbar-extended .e-toolbar-item .e-tbar-btn.e-btn.e-control {
-  padding: 2px 3.5px;
+  padding: 0 2.5px;
 }
 .e-richtexteditor .e-toolbar .e-toolbar-pop .e-toolbar-item.e-tbtn-align .e-btn.e-control .e-icons.e-btn-icon,
 .e-rte-elements .e-toolbar .e-toolbar-pop .e-toolbar-item.e-tbtn-align .e-btn.e-control .e-icons.e-btn-icon {
@@ -1794,11 +1794,11 @@
 }
 .e-bigger .e-rte-quick-popup .e-rte-quick-toolbar .e-toolbar-items .e-rte-backgroundcolor-dropdown .e-rte-color-content,
 .e-bigger .e-rte-quick-popup .e-rte-quick-toolbar .e-toolbar-items .e-rte-backgroundcolor-dropdown .e-caret {
-  height: 30px;
+  height: 35px;
 }
 .e-bigger .e-rte-quick-popup .e-rte-quick-toolbar .e-toolbar-items .e-rte-backgroundcolor-dropdown .e-rte-color-content:hover,
 .e-bigger .e-rte-quick-popup .e-rte-quick-toolbar .e-toolbar-items .e-rte-backgroundcolor-dropdown .e-caret:hover {
-  height: 30px;
+  height: 35px;
 }
 .e-bigger .e-rte-quick-popup .e-rte-quick-toolbar .e-toolbar-items:not(.e-tbar-pos) {
   margin: 0 6px;
@@ -2944,6 +2944,9 @@
 .e-richtexteditor .e-video-url-wrap textarea {
   height: 80px;
 }
+.e-richtexteditor .e-toolbar-extended .e-toolbar-item:not(.e-active) .e-tbar-btn {
+  border: 1px solid transparent;
+}
 
 .e-rte-quick-popup {
   border: 0;

package/styles/bootstrap.css

@@ -770,7 +770,7 @@
 }
 .e-richtexteditor .e-rte-toolbar .e-hor-nav.e-expended-nav {
   height: auto;
-  min-height: 44px;
+  min-height: 40px;
   padding-left: 1px;
 }
 .e-richtexteditor .e-rte-toolbar .e-toolbar-multirow {
@@ -1524,7 +1524,7 @@
 .e-richtexteditor .e-toolbar.e-extended-toolbar .e-toolbar-extended .e-toolbar-item .e-tbar-btn.e-btn.e-control,
 .e-rte-elements .e-toolbar.e-extended-toolbar .e-toolbar-extended .e-toolbar-item .e-tbar-btn.e-btn,
 .e-rte-elements .e-toolbar.e-extended-toolbar .e-toolbar-extended .e-toolbar-item .e-tbar-btn.e-btn.e-control {
-  padding: 2px 3.5px;
+  padding: 1px 2.5px;
 }
 .e-richtexteditor .e-toolbar .e-toolbar-pop .e-toolbar-item.e-tbtn-align .e-btn.e-control .e-icons.e-btn-icon,
 .e-rte-elements .e-toolbar .e-toolbar-pop .e-toolbar-item.e-tbtn-align .e-btn.e-control .e-icons.e-btn-icon {
@@ -1770,7 +1770,7 @@
 .e-richtexteditor .e-rte-emojipicker-popup.e-popup.e-popup-open .e-toolbar .e-toolbar-item .e-tbar-btn:hover, .e-richtexteditor .e-rte-emojipicker-popup.e-popup.e-popup-open .e-toolbar .e-toolbar-item .e-tbar-btn:focus,
 .e-rte-elements .e-rte-emojipicker-popup.e-popup.e-popup-open .e-toolbar .e-toolbar-item .e-tbar-btn:hover,
 .e-rte-elements .e-rte-emojipicker-popup.e-popup.e-popup-open .e-toolbar .e-toolbar-item .e-tbar-btn:focus {
-  padding: 6px 2px;
+  padding: 7px 3px;
 }
 .e-richtexteditor .e-rte-emojipicker-popup.e-popup.e-popup-open .e-toolbar .e-toolbar-item .e-tbar-btn .e-tbar-btn-text,
 .e-rte-elements .e-rte-emojipicker-popup.e-popup.e-popup-open .e-toolbar .e-toolbar-item .e-tbar-btn .e-tbar-btn-text {

package/styles/fluent-dark.css

@@ -453,7 +453,7 @@
 .e-richtexteditor.e-bigger .e-rte-toolbar .e-toolbar-extended .e-toolbar-item.e-active .e-tbar-btn.e-btn,
 .e-richtexteditor.e-bigger .e-rte-toolbar.e-toolbar.e-extended-toolbar .e-toolbar-items .e-toolbar-item.e-active .e-tbar-btn.e-btn,
 .e-richtexteditor.e-bigger .e-rte-toolbar.e-toolbar.e-extended-toolbar .e-toolbar-extended .e-toolbar-item.e-active .e-tbar-btn.e-btn {
-  padding: 0 6px;
+  padding: 0 8px;
   border-radius: 0;
 }
 .e-bigger .e-richtexteditor .e-rte-toolbar .e-toolbar-items .e-dropdown-btn .e-rte-color-content,
@@ -747,7 +747,7 @@
 .e-richtexteditor .e-rte-toolbar .e-toolbar-extended .e-toolbar-item.e-active .e-tbar-btn.e-btn,
 .e-richtexteditor .e-rte-toolbar.e-toolbar.e-extended-toolbar .e-toolbar-items .e-toolbar-item.e-active .e-tbar-btn.e-btn,
 .e-richtexteditor .e-rte-toolbar.e-toolbar.e-extended-toolbar .e-toolbar-extended .e-toolbar-item.e-active .e-tbar-btn.e-btn {
-  padding: 0;
+  padding: 0 4px;
   border-radius: 0;
 }
 .e-richtexteditor .e-rte-toolbar .e-toolbar-items .e-dropdown-btn .e-rte-color-content,
@@ -2716,7 +2716,7 @@
 }
 .e-richtexteditor .e-rte-toolbar .e-toolbar-item.e-active .e-tbar-btn, .e-richtexteditor .e-rte-toolbar .e-toolbar-item.e-active .e-tbar-btn:focus {
   background: #3b3a39;
-  border: 0 solid #8a8886;
+  border: 1px solid transparent;
 }
 .e-richtexteditor .e-rte-toolbar .e-toolbar-item.e-active .e-tbar-btn .e-icons, .e-richtexteditor .e-rte-toolbar .e-toolbar-item.e-active .e-tbar-btn:focus .e-icons {
   color: #a19f9d;
@@ -2784,7 +2784,7 @@
 }
 .e-richtexteditor .e-rte-toolbar .e-toolbar-item .e-rte-backgroundcolor-dropdown.e-active, .e-richtexteditor .e-rte-toolbar .e-toolbar-item .e-rte-fontcolor-dropdown.e-active, .e-richtexteditor .e-rte-toolbar .e-toolbar-item .e-rte-numberformatlist-dropdown.e-active, .e-richtexteditor .e-rte-toolbar .e-toolbar-item .e-rte-bulletformatlist-dropdown.e-active {
   background: #3b3a39;
-  border: 0;
+  border: 1px solid transparent;
 }
 .e-richtexteditor .e-rte-toolbar .e-toolbar-item .e-rte-backgroundcolor-dropdown.e-active .e-rte-color-content::after, .e-richtexteditor .e-rte-toolbar .e-toolbar-item .e-rte-fontcolor-dropdown.e-active .e-rte-color-content::after, .e-richtexteditor .e-rte-toolbar .e-toolbar-item .e-rte-numberformatlist-dropdown.e-active .e-rte-color-content::after, .e-richtexteditor .e-rte-toolbar .e-toolbar-item .e-rte-bulletformatlist-dropdown.e-active .e-rte-color-content::after {
   background: #1b1a19;
@@ -2973,6 +2973,18 @@
 .e-richtexteditor .e-video-url-wrap textarea {
   height: 80px;
 }
+.e-richtexteditor .e-toolbar.e-extended-toolbar .e-toolbar-extended .e-toolbar-item .e-tbar-btn {
+  border: 1px solid transparent;
+}
+.e-richtexteditor .e-toolbar.e-extended-toolbar .e-toolbar-extended .e-toolbar-item .e-tbar-btn:hover {
+  border: 1px solid transparent;
+}
+.e-richtexteditor .e-toolbar .e-toolbar-item .e-tbar-btn {
+  border: 1px solid transparent;
+}
+.e-richtexteditor .e-toolbar .e-toolbar-item .e-tbar-btn:hover {
+  border: 1px solid transparent;
+}
 
 .e-rte-quick-popup {
   border: none;
@@ -3026,7 +3038,7 @@
 .e-rte-quick-popup .e-rte-quick-toolbar .e-toolbar-items .e-toolbar-item.e-active .e-tbar-btn,
 .e-rte-quick-popup .e-rte-quick-toolbar .e-toolbar-items .e-toolbar-item.e-active .e-tbar-btn:focus {
   background: #3b3a39;
-  border: 0 solid #8a8886;
+  border: 1px solid transparent;
 }
 .e-rte-quick-popup .e-rte-quick-toolbar .e-toolbar-items .e-toolbar-item.e-active .e-tbar-btn .e-icons,
 .e-rte-quick-popup .e-rte-quick-toolbar .e-toolbar-items .e-toolbar-item.e-active .e-tbar-btn:focus .e-icons {

package/styles/fluent.css

@@ -453,7 +453,7 @@
 .e-richtexteditor.e-bigger .e-rte-toolbar .e-toolbar-extended .e-toolbar-item.e-active .e-tbar-btn.e-btn,
 .e-richtexteditor.e-bigger .e-rte-toolbar.e-toolbar.e-extended-toolbar .e-toolbar-items .e-toolbar-item.e-active .e-tbar-btn.e-btn,
 .e-richtexteditor.e-bigger .e-rte-toolbar.e-toolbar.e-extended-toolbar .e-toolbar-extended .e-toolbar-item.e-active .e-tbar-btn.e-btn {
-  padding: 0 6px;
+  padding: 0 8px;
   border-radius: 0;
 }
 .e-bigger .e-richtexteditor .e-rte-toolbar .e-toolbar-items .e-dropdown-btn .e-rte-color-content,
@@ -747,7 +747,7 @@
 .e-richtexteditor .e-rte-toolbar .e-toolbar-extended .e-toolbar-item.e-active .e-tbar-btn.e-btn,
 .e-richtexteditor .e-rte-toolbar.e-toolbar.e-extended-toolbar .e-toolbar-items .e-toolbar-item.e-active .e-tbar-btn.e-btn,
 .e-richtexteditor .e-rte-toolbar.e-toolbar.e-extended-toolbar .e-toolbar-extended .e-toolbar-item.e-active .e-tbar-btn.e-btn {
-  padding: 0;
+  padding: 0 4px;
   border-radius: 0;
 }
 .e-richtexteditor .e-rte-toolbar .e-toolbar-items .e-dropdown-btn .e-rte-color-content,
@@ -2716,7 +2716,7 @@
 }
 .e-richtexteditor .e-rte-toolbar .e-toolbar-item.e-active .e-tbar-btn, .e-richtexteditor .e-rte-toolbar .e-toolbar-item.e-active .e-tbar-btn:focus {
   background: #d2d0ce;
-  border: 0 solid #8a8886;
+  border: 1px solid transparent;
 }
 .e-richtexteditor .e-rte-toolbar .e-toolbar-item.e-active .e-tbar-btn .e-icons, .e-richtexteditor .e-rte-toolbar .e-toolbar-item.e-active .e-tbar-btn:focus .e-icons {
   color: #605e5c;
@@ -2784,7 +2784,7 @@
 }
 .e-richtexteditor .e-rte-toolbar .e-toolbar-item .e-rte-backgroundcolor-dropdown.e-active, .e-richtexteditor .e-rte-toolbar .e-toolbar-item .e-rte-fontcolor-dropdown.e-active, .e-richtexteditor .e-rte-toolbar .e-toolbar-item .e-rte-numberformatlist-dropdown.e-active, .e-richtexteditor .e-rte-toolbar .e-toolbar-item .e-rte-bulletformatlist-dropdown.e-active {
   background: #d2d0ce;
-  border: 0;
+  border: 1px solid transparent;
 }
 .e-richtexteditor .e-rte-toolbar .e-toolbar-item .e-rte-backgroundcolor-dropdown.e-active .e-rte-color-content::after, .e-richtexteditor .e-rte-toolbar .e-toolbar-item .e-rte-fontcolor-dropdown.e-active .e-rte-color-content::after, .e-richtexteditor .e-rte-toolbar .e-toolbar-item .e-rte-numberformatlist-dropdown.e-active .e-rte-color-content::after, .e-richtexteditor .e-rte-toolbar .e-toolbar-item .e-rte-bulletformatlist-dropdown.e-active .e-rte-color-content::after {
   background: #fff;
@@ -2973,6 +2973,18 @@
 .e-richtexteditor .e-video-url-wrap textarea {
   height: 80px;
 }
+.e-richtexteditor .e-toolbar.e-extended-toolbar .e-toolbar-extended .e-toolbar-item .e-tbar-btn {
+  border: 1px solid transparent;
+}
+.e-richtexteditor .e-toolbar.e-extended-toolbar .e-toolbar-extended .e-toolbar-item .e-tbar-btn:hover {
+  border: 1px solid transparent;
+}
+.e-richtexteditor .e-toolbar .e-toolbar-item .e-tbar-btn {
+  border: 1px solid transparent;
+}
+.e-richtexteditor .e-toolbar .e-toolbar-item .e-tbar-btn:hover {
+  border: 1px solid transparent;
+}
 
 .e-rte-quick-popup {
   border: none;
@@ -3026,7 +3038,7 @@
 .e-rte-quick-popup .e-rte-quick-toolbar .e-toolbar-items .e-toolbar-item.e-active .e-tbar-btn,
 .e-rte-quick-popup .e-rte-quick-toolbar .e-toolbar-items .e-toolbar-item.e-active .e-tbar-btn:focus {
   background: #d2d0ce;
-  border: 0 solid #8a8886;
+  border: 1px solid transparent;
 }
 .e-rte-quick-popup .e-rte-quick-toolbar .e-toolbar-items .e-toolbar-item.e-active .e-tbar-btn .e-icons,
 .e-rte-quick-popup .e-rte-quick-toolbar .e-toolbar-items .e-toolbar-item.e-active .e-tbar-btn:focus .e-icons {

package/styles/material-dark.css

@@ -1614,7 +1614,7 @@
 .e-rte-elements .e-rte-emojipicker-popup.e-popup.e-popup-open .e-toolbar .e-toolbar-item .e-tbar-btn {
   padding: 7px 3px;
   border-radius: 4px;
-  padding: 3px;
+  padding: 0 6px;
 }
 .e-richtexteditor .e-rte-emojipicker-popup.e-popup.e-popup-open .e-toolbar .e-toolbar-item .e-tbar-btn .e-tbar-btn-text,
 .e-rte-elements .e-rte-emojipicker-popup.e-popup.e-popup-open .e-toolbar .e-toolbar-item .e-tbar-btn .e-tbar-btn-text {

package/styles/material.css

@@ -1614,7 +1614,7 @@
 .e-rte-elements .e-rte-emojipicker-popup.e-popup.e-popup-open .e-toolbar .e-toolbar-item .e-tbar-btn {
   padding: 7px 3px;
   border-radius: 4px;
-  padding: 3px;
+  padding: 0 6px;
 }
 .e-richtexteditor .e-rte-emojipicker-popup.e-popup.e-popup-open .e-toolbar .e-toolbar-item .e-tbar-btn .e-tbar-btn-text,
 .e-rte-elements .e-rte-emojipicker-popup.e-popup.e-popup-open .e-toolbar .e-toolbar-item .e-tbar-btn .e-tbar-btn-text {

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

@@ -124,7 +124,7 @@ $rte-colorpicker-parent-padding-hover: 1px !default;
 $rte-colorpicker-parent-padding-active-hover: 1px !default;
 $rte-overlay-color: #383838 !default;
 $rte-dropdown-btn-color-content-height: 30px !default;
-$rte-big-dropdown-btn-color-content-height: 30px !default;
+$rte-big-dropdown-btn-color-content-height: 35px !default;
 $rte-font-icon-width: 30px !default;
 $rte-font-arrow-width: 18px !default;
 $rte-font-arrow-touch-width: 20px !default;
@@ -229,9 +229,9 @@ $rte-big-tablecell-width : 16px;
 $rte-toolbar-item-frist-last-child-margin: 0;
 $rte-big-toolbar-item-frist-last-child-margin: 0 6px;
 $dropdown-btn-font-size: inherit !default;
-$rte-toolbar-expaned-padding: 2px 3.5px;
+$rte-toolbar-expaned-padding: 0 2.5px;
 $rte-toolbar-expaned-padding-hover: 0 2.5px;
-$rte-big-toolbar-expaned-padding: 0 6px;
+$rte-big-toolbar-expaned-padding: 0 7px;
 $rte-extended-toolbar-items-padding: 0;
 $rte-expand-tbar-hover-bg: transparent !default;
 $rte-big-insert-dialog-label-padding-top: 12px;
@@ -240,7 +240,7 @@ $rte-background-color-icon-fontsize: 14px;
 $rte-big-background-color-icon-fontsize: 18px;
 $rte-dropdown-btn-color-content-padding: 1px !default;
 $rte-big-dropdown-btn-color-content-padding: 1px !default;
-$rte-tb-expended-min-height: 44px !default;
+$rte-tb-expended-min-height: 40px !default;
 $rte-big-tb-expended-min-height: 49px !default;
 $rte-tb-expended-padding-left: 1px !default;
 $rte-tb-expended-hover-padding-left: 1px !default;

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

@@ -228,7 +228,7 @@ $rte-big-tablecell-height : 16px;
 $rte-big-tablecell-width : 16px;
 $rte-toolbar-item-frist-last-child-margin: 0;
 $rte-big-toolbar-item-frist-last-child-margin: 0 6px;
-$rte-toolbar-expaned-padding: 2px 3.5px;
+$rte-toolbar-expaned-padding: 1px 2.5px;
 $dropdown-btn-font-size: inherit !default;
 $rte-toolbar-expaned-padding-hover: 1px 2.5px;
 $rte-big-toolbar-expaned-padding: 0 7px;
@@ -240,7 +240,7 @@ $rte-background-color-icon-fontsize: 14px;
 $rte-big-background-color-icon-fontsize: 18px;
 $rte-dropdown-btn-color-content-padding: 1px !default;
 $rte-big-dropdown-btn-color-content-padding: 1px !default;
-$rte-tb-expended-min-height: 44px !default;
+$rte-tb-expended-min-height: 40px !default;
 $rte-big-tb-expended-min-height: 49px !default;
 $rte-tb-expended-padding-left: 1px !default;
 $rte-tb-expended-hover-padding-left: 1px !default;

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

@@ -36,7 +36,7 @@ $rte-big-tb-items-margin-left: 8px !default;
 $rte-tb-items-margin-left: 8px !default;
 $rte-big-tb-items-padding-left: 8px !default;
 $rte-tb-items-padding-left: 8px !default;
-$rte-active-tb-item-btn-padding: 0 !default;
+$rte-active-tb-item-btn-padding: 0 4px !default;
 $rte-split-btn-bar-size: 0 !default;
 $rte-split-btn-active-color-icon-line-height: 30px !default;
 $rte-big-split-btn-active-color-icon-line-height: 37px !default;
@@ -65,7 +65,7 @@ $rte-font-arrow-width: 12px !default;
 $rte-font-arrow-touch-width: 20px !default;
 $rte-font-icon-line-height: $leading-none !default;
 $rte-placeholder-line-height: $leading-normal !default;
-$rte-big-active-tb-item-btn-padding: 0 6px !default;
+$rte-big-active-tb-item-btn-padding: 0 8px !default;
 $rte-table-popup-padding: 10px !default;
 $rte-table-popup-border: 0 solid $gray30 !default;
 $rte-insert-dialog-label-padding-top: 12px !default;
@@ -116,7 +116,7 @@ $rte-big-formatlists-dropdown-line-height: 30px;
 //Layout Variables End
 
 //Theme Variables Start
-$rte-split-btn-active-border: 0 !default;
+$rte-split-btn-active-border: 1px solid $transparent !default;
 $rte-border-color: $border-light !default;
 $rte-content-bg: $content-bg-color !default;
 $rte-full-screen-bg: $content-bg-color !default;
@@ -145,7 +145,7 @@ $rte-quick-pop-item-focus-bg: $content-bg-color-alt4 !default;
 $rte-quick-tb-btn-hover: $content-bg-color-alt4 !default;
 $rte-tb-item-active-bg: $content-bg-color-alt5 !default;
 $rte-tb-active-font-color: $icon-color !default;
-$rte-tb-item-active-border: 0 solid $secondary-border-color-pressed !default;
+$rte-tb-item-active-border: 1px solid $transparent !default;
 $rte-expand-tb-border-bottom: $rte-border-size $rte-border-type $border-light !default;
 $rte-color-picker-active-bg: inherit !default;
 $rte-drop-btn-active-bg: $content-bg-color-alt5 !default;
@@ -162,7 +162,7 @@ $rte-split-btn-span-active-bg: $content-bg-color-alt3 !default;
 $rte-split-btn-bar-bg: $content-bg-color !default;
 $rte-split-btn-active-bar-bg: $content-bg-color !default;
 $rte-split-btn-bar-size: 0 !default;
-$rte-split-btn-active-border: 0 !default;
+$rte-split-btn-active-border: 1px solid $transparent !default;
 $rte-split-btn-active-color-icon-line-height: 40px !default;
 $rte-big-split-btn-active-color-icon-line-height: 48px !default;
 

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

@@ -1284,12 +1284,12 @@
         @if $skin-name =='bootstrap' or $skin-name =='botstrap-dark' {
           &:hover,
           &:focus{
-            padding: 6px 2px;
+            padding: 7px 3px;
           }
         }
 
         @if $skin-name =='material' or $skin-name =='material-dark' {
-          padding: 3px;
+          padding: 0 6px;
         }
 
         .e-tbar-btn-text {
@@ -1684,7 +1684,7 @@
     .e-rte-numberformatlist-dropdown.e-dropdown-btn.e-tbar-btn.e-btn.e-control,
     .e-rte-bulletformatlist-dropdown.e-dropdown-btn.e-tbar-btn.e-btn.e-control {
       @if $skin-name == 'tailwind' {
-        padding: 1px;
+        padding: 0;
       }
     }
   }

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

@@ -12,7 +12,7 @@ $rte-quick-item-btn-width: 26px !default;
 $rte-big-quick-item-btn-height: 38px !default;
 $rte-quick-item-btn-height: 30px !default;
 $rte-big-quick-item-padding: 12px !default;
-$rte-quick-item-padding: 3px !default;
+$rte-quick-item-padding: 0 3px !default;
 $rte-quick-item-icon-min-width: 24px !default;
 $rte-big-quick-item-line-height: $leading-normal !default;
 $rte-content-padding: 12px !default;
@@ -51,8 +51,8 @@ $rte-big-drop-btn-padding-left: 10px !default;
 $rte-big-drop-btn-padding-right: 6px !default;
 $rte-big-drop-btn-action-padding-left: 10px !default;
 $rte-big-drop-btn-action-padding-right: 6px !default;
-$rte-colorpicker-parent-padding: 1px !default;
-$rte-colorpicker-parent-padding-hover: 1px !default;
+$rte-colorpicker-parent-padding: 0 !default;
+$rte-colorpicker-parent-padding-hover: 0 !default;
 $rte-colorpicker-parent-padding-active-hover: 0 !default;
 $rte-dropdown-btn-color-content-height: 30px !default;
 $rte-big-dropdown-btn-color-content-height: 38px !default;
@@ -85,7 +85,7 @@ $rte-big-inline-tmp-size-min-width: 59px;
 $rte-inline-tmp-size-min-width: 66px;
 $rte-big-inline-tmp-color-min-width: 50px;
 $rte-inline-tmp-color-min-width: 55px;
-$rte-big-color-list-span-common-padding-left-right: 1px;
+$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;
@@ -159,7 +159,7 @@ $rte-split-btn-span-active-bg: $secondary-bg-color-pressed !default;
 $rte-split-btn-bar-bg: $content-bg-color-alt1 !default;
 $rte-split-btn-active-bar-bg: $content-bg-color !default;
 $rte-split-btn-bar-size: 0 !default;
-$rte-split-btn-active-border: 0 solid $secondary-border-color-hover !default;
+$rte-split-btn-active-border: 1px solid $secondary-border-color-hover !default;
 $rte-split-btn-active-color-icon-line-height: 30px !default;
 $rte-big-split-btn-active-color-icon-line-height: 38px !default;
 

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

@@ -381,6 +381,27 @@
     .e-video-url-wrap textarea {
       height: 80px;
     }
+
+    @if $skin-name == 'FluentUI' {
+      .e-toolbar.e-extended-toolbar .e-toolbar-extended .e-toolbar-item .e-tbar-btn{
+        border: 1px solid transparent;
+        &:hover{
+          border: 1px solid transparent;
+        }
+      }
+      .e-toolbar .e-toolbar-item .e-tbar-btn{
+        border: 1px solid transparent;
+        &:hover{
+          border: 1px solid transparent;
+        }
+      }
+    }
+
+    @if $skin-name == 'bootstrap-dark' {
+      .e-toolbar-extended .e-toolbar-item:not(.e-active) .e-tbar-btn{
+        border: 1px solid transparent;
+      }
+    }
   }
 
   .e-rte-quick-popup {