@syncfusion/ej2-richtexteditor 24.2.8 → 25.1.35

package/src/rich-text-editor/renderer/table-module.d.ts

@@ -34,6 +34,7 @@ export declare class Table {
     private dialogRenderObj;
     private currentColumnResize;
     private previousTableElement;
+    private resizeEndTime;
     private constructor();
     protected addEventListener(): void;
     protected removeEventListener(): void;
@@ -54,6 +55,7 @@ export declare class Table {
     private verticalAlign;
     private tableStyles;
     private insideList;
+    private removeEmptyTextNodes;
     private tabSelection;
     private tableArrowNavigation;
     private setBGColor;

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

@@ -17,6 +17,7 @@ var Table = /** @class */ (function () {
         this.pageY = null;
         this.moveEle = null;
         this.currentColumnResize = '';
+        this.resizeEndTime = 0;
         this.parent = parent;
         this.rteID = parent.element.id;
         this.l10n = serviceLocator.getService('rteLocale');
@@ -174,7 +175,15 @@ var Table = /** @class */ (function () {
     Table.prototype.keyUp = function (e) {
         var target = e.args.target;
         if (e.args.key.toLocaleLowerCase() === 'escape' && target && target.classList && (this.popupObj && !closest(target, '[id=' + "'" + this.popupObj.element.id + "'" + ']')) && this.popupObj) {
+            var createTableToolbarBtn = this.popupObj.relateTo;
+            if (createTableToolbarBtn.nodeName !== 'BUTTON') {
+                createTableToolbarBtn = createTableToolbarBtn.querySelector('span.e-create-table');
+                createTableToolbarBtn = createTableToolbarBtn.parentElement;
+            }
             this.popupObj.hide();
+            if (createTableToolbarBtn) {
+                createTableToolbarBtn.focus();
+            }
         }
     };
     Table.prototype.keyDown = function (e) {
@@ -354,7 +363,20 @@ var Table = /** @class */ (function () {
             return false;
         }
     };
+    Table.prototype.removeEmptyTextNodes = function (element) {
+        var children = element.childNodes;
+        for (var i = children.length - 1; i >= 0; i--) {
+            var node = children[i];
+            if (node.nodeType === Node.TEXT_NODE && node.nodeValue.trim() === '') {
+                element.removeChild(node);
+            }
+        }
+    };
     Table.prototype.tabSelection = function (event, selection, ele) {
+        var allHeadBodyTRElements = ele.closest('table').querySelectorAll('thead, tbody, tr');
+        for (var i = 0; i < allHeadBodyTRElements.length; i++) {
+            this.removeEmptyTextNodes(allHeadBodyTRElements[i]);
+        }
         this.previousTableElement = ele;
         var insideList = this.insideList(selection.range);
         if ((event.keyCode === 37 || event.keyCode === 39) && selection.range.startContainer.nodeType === 3 ||
@@ -491,10 +513,12 @@ var Table = /** @class */ (function () {
             var startNode = this.parent.getRange().startContainer.parentElement;
             var endNode = this.parent.getRange().endContainer.parentElement;
             var isAnchorEle = this.getAnchorNode(target);
+            var currentTime = new Date().getTime();
             if (target && target.nodeName !== 'A' && isAnchorEle.nodeName !== 'A' && target.nodeName !== 'IMG' && target.nodeName !== 'VIDEO' && !target.classList.contains(classes.CLS_CLICKELEM) &&
                 target.nodeName !== 'AUDIO' && startNode === endNode && (target.nodeName === 'TD' || target.nodeName === 'TH' ||
                 target.nodeName === 'TABLE' || (closestTable && this.parent.contentModule.getEditPanel().contains(closestTable)))
-                && !(range.startContainer.nodeType === 3 && !range.collapsed)) {
+                && !(range.startContainer.nodeType === 3 && !range.collapsed) &&
+                currentTime - this.resizeEndTime > 100) {
                 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());
@@ -590,7 +614,10 @@ var Table = /** @class */ (function () {
         var tdNode = closest(target, 'td,th');
         target = (target.nodeName !== 'TD' && tdNode && this.parent.contentModule.getEditPanel().contains(tdNode)) ?
             tdNode : target;
-        removeClass(this.contentModule.getEditPanel().querySelectorAll('table td, table th'), classes.CLS_TABLE_SEL);
+        if (!(this.parent.quickToolbarSettings.showOnRightClick && e.args.which === 3 &&
+            target.classList.contains(classes.CLS_TABLE_SEL))) {
+            removeClass(this.contentModule.getEditPanel().querySelectorAll('table td, table th'), classes.CLS_TABLE_SEL);
+        }
         if (target && (target.tagName === 'TD' || target.tagName === 'TH')) {
             addClass([target], classes.CLS_TABLE_SEL);
             this.activeCell = target;
@@ -979,6 +1006,9 @@ var Table = /** @class */ (function () {
                     widthCompare = rteWidth;
                 }
                 if (_this.resizeBtnStat.column) {
+                    if (_this.curTable.closest('li')) {
+                        widthCompare = _this.curTable.closest('li').offsetWidth;
+                    }
                     var colGroup = _this.curTable.querySelectorAll('colgroup > col');
                     var currentTableWidth = void 0;
                     if (_this.curTable.style.width !== '' && _this.curTable.style.width.includes('%')) {
@@ -1004,14 +1034,32 @@ var Table = /** @class */ (function () {
                                 (_this.convertPixelToPercentage(tableWidth - mouseX, widthCompare) + '%');
                             var differenceWidth = currentTableWidth - _this.convertPixelToPercentage(tableWidth - mouseX, widthCompare);
                             var preMarginLeft = 0;
-                            if (!isNullOrUndefined(_this.curTable.style.marginLeft) && _this.curTable.style.marginLeft !== '') {
+                            var widthType = _this.curTable.style.width.indexOf('%') > -1;
+                            if (!widthType && _this.curTable.offsetWidth > _this.contentModule.getEditPanel().offsetWidth) {
+                                _this.curTable.style.width = rteWidth + 'px';
+                                return;
+                            }
+                            if (widthType && parseFloat(_this.curTable.style.width.split('%')[0]) > 100) {
+                                _this.curTable.style.width = '100%';
+                                return;
+                            }
+                            if (!isNOU(_this.curTable.style.marginLeft) && _this.curTable.style.marginLeft !== '') {
                                 var regex = /[-+]?\d*\.\d+|\d+/;
                                 var value = _this.curTable.style.marginLeft.match(regex);
-                                if (!isNullOrUndefined(value)) {
+                                if (!isNOU(value)) {
                                     preMarginLeft = parseFloat(value[0]);
                                 }
                             }
                             var currentMarginLeft = preMarginLeft + differenceWidth;
+                            if (currentMarginLeft && currentMarginLeft > 100) {
+                                var width = parseFloat(_this.curTable.style.width);
+                                currentMarginLeft = 100 - width;
+                            }
+                            if (currentMarginLeft && currentMarginLeft < 1) {
+                                _this.curTable.style.marginLeft = null;
+                                _this.curTable.style.width = '100%';
+                                return;
+                            }
                             _this.curTable.style.marginLeft = 'calc(' + (_this.curTable.style.width === '100%' ? 0 : currentMarginLeft) + '%)';
                             for (var i = 0; i < firstColumnsCell.length; i++) {
                                 var currentColumnCellWidth = _this.getCurrentColWidth(firstColumnsCell[i], tableWidth);
@@ -1082,15 +1130,26 @@ var Table = /** @class */ (function () {
                         maxiumWidth = Math.abs(tableBoxPosition - currentTdElement.getBoundingClientRect().width) - 5;
                         _this.curTable.style.maxWidth = maxiumWidth + 'px';
                     }
-                    var widthType = _this.curTable.style.width.indexOf('%') > -1;
-                    _this.curTable.style.width = widthType ? _this.convertPixelToPercentage(tableWidth + mouseX, widthCompare) + '%'
-                        : tableWidth + mouseX + 'px';
                     _this.curTable.style.height = tableHeight + mouseY + 'px';
                     if (!isNOU(tableReBox)) {
                         tableReBox.classList.add('e-rbox-select');
                         tableReBox.style.cssText = 'top: ' + (_this.calcPos(_this.curTable).top + tableHeight - 4) +
                             'px; left:' + (_this.calcPos(_this.curTable).left + tableWidth - 4) + 'px;';
                     }
+                    if (_this.curTable.closest('li')) {
+                        widthCompare = _this.curTable.closest('li').offsetWidth;
+                    }
+                    var widthType = _this.curTable.style.width.indexOf('%') > -1;
+                    if (widthType && parseFloat(_this.curTable.style.width.split('%')[0]) > 100) {
+                        _this.curTable.style.width = '100%';
+                        return;
+                    }
+                    if (!widthType && _this.curTable.offsetWidth > _this.contentModule.getEditPanel().offsetWidth) {
+                        _this.curTable.style.width = rteWidth + 'px';
+                        return;
+                    }
+                    _this.curTable.style.width = widthType ? _this.convertPixelToPercentage(tableWidth + mouseX, widthCompare) + '%'
+                        : tableWidth + mouseX + 'px';
                 }
             }
         });
@@ -1167,6 +1226,7 @@ var Table = /** @class */ (function () {
         var args = { event: e, requestType: 'table' };
         this.parent.trigger(events.resizeStop, args);
         this.parent.formatter.saveData();
+        this.resizeEndTime = new Date().getTime();
     };
     Table.prototype.resetResizeHelper = function (curTable) {
         var colHelper = this.parent.element.querySelectorAll('.e-table-rhelper.e-column-helper');
@@ -1181,6 +1241,9 @@ var Table = /** @class */ (function () {
                 element.parentNode.removeChild(element);
             }
         });
+        if (!curTable.style.width) {
+            curTable.style.width = curTable.offsetWidth + 'px';
+        }
         var colGroup = curTable.querySelector('colgroup');
         if (colGroup) {
             for (var i = 0; i < curTable.rows.length; i++) {
@@ -1277,7 +1340,7 @@ var Table = /** @class */ (function () {
         this.createTableButton.isStringTemplate = true;
         this.createTableButton.appendTo(btnEle);
         EventHandler.add(btnEle, 'click', this.insertTableDialog, { self: this, args: args.args, selection: args.selection });
-        this.parent.getToolbar().appendChild(this.dlgDiv);
+        this.parent.getToolbar().parentElement.appendChild(this.dlgDiv);
         var target = args.args.originalEvent.target;
         target = target.classList.contains('e-toolbar-item') ? target.firstChild : target.parentElement;
         this.popupObj = new Popup(this.dlgDiv, {

package/src/rich-text-editor/renderer/toolbar-renderer.d.ts

@@ -22,6 +22,7 @@ export declare class ToolbarRenderer implements IRenderer {
     private tooltip;
     private l10n;
     private dropdownTooltip;
+    private tooltipTargetEle;
     /**
      * Constructor for toolbar renderer module
      *
@@ -58,6 +59,8 @@ export declare class ToolbarRenderer implements IRenderer {
 
      */
     renderDropDownButton(args: IDropDownModel): DropDownButton;
+    private mouseOutHandler;
+    private closeTooltip;
     /**
      * renderListDropDown method
      *

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

@@ -1,4 +1,4 @@
-import { addClass, Browser, removeClass, formatUnit, isNullOrUndefined, isNullOrUndefined as isNOU } from '@syncfusion/ej2-base';
+import { addClass, Browser, removeClass, formatUnit, isNullOrUndefined, isNullOrUndefined as isNOU, EventHandler } from '@syncfusion/ej2-base';
 import { getInstance, closest, selectAll } from '@syncfusion/ej2-base';
 import { Toolbar } from '@syncfusion/ej2-navigations';
 import { DropDownButton } from '@syncfusion/ej2-splitbuttons';
@@ -31,6 +31,7 @@ var ToolbarRenderer = /** @class */ (function () {
     ToolbarRenderer.prototype.wireEvent = function () {
         this.parent.on(events.destroy, this.unWireEvent, this);
         this.parent.on(events.destroyTooltip, this.destroyTooltip, this);
+        this.parent.on(events.closeTooltip, this.closeTooltip, this);
     };
     ToolbarRenderer.prototype.destroyTooltip = function () {
         var currentDocument = this.parent.iframeSettings.enable ? this.parent.contentModule.getPanel().ownerDocument :
@@ -43,6 +44,8 @@ var ToolbarRenderer = /** @class */ (function () {
     };
     ToolbarRenderer.prototype.unWireEvent = function () {
         this.parent.off(events.destroy, this.unWireEvent);
+        this.parent.off(events.destroyTooltip, this.destroyTooltip);
+        this.parent.off(events.closeTooltip, this.closeTooltip);
     };
     ToolbarRenderer.prototype.toolbarBeforeCreate = function (e) {
         if (this.mode === 'Extended') {
@@ -163,7 +166,7 @@ var ToolbarRenderer = /** @class */ (function () {
                 windowCollision: true,
                 position: 'BottomCenter'
             });
-            this.tooltip.appendTo(args.target);
+            this.tooltip.appendTo(args.target.parentElement);
         }
     };
     /**
@@ -295,6 +298,32 @@ var ToolbarRenderer = /** @class */ (function () {
         popupElement.setAttribute('aria-owns', this.parent.getID());
         return dropDown;
     };
+    ToolbarRenderer.prototype.mouseOutHandler = function () {
+        if (!isNOU(this.tooltipTargetEle)) {
+            this.tooltipTargetEle.setAttribute('title', this.tooltipTargetEle.getAttribute('data-title'));
+        }
+        else {
+            var currentDocument = this.parent.iframeSettings.enable ? this.parent.contentModule.getPanel().ownerDocument :
+                this.parent.contentModule.getDocument();
+            this.tooltipTargetEle = currentDocument.querySelector('[data-title]');
+            this.tooltipTargetEle.setAttribute('title', this.tooltipTargetEle.getAttribute('data-title'));
+        }
+        this.tooltipTargetEle.removeAttribute('data-title');
+        EventHandler.remove(this.tooltipTargetEle, 'mouseout', this.mouseOutHandler);
+    };
+    ToolbarRenderer.prototype.closeTooltip = function (args) {
+        var currentDocument = this.parent.iframeSettings.enable ? this.parent.contentModule.getPanel().ownerDocument :
+            this.parent.contentModule.getDocument();
+        this.tooltipTargetEle = closest(args.target, '[data-tooltip-id]');
+        if (!isNOU(this.tooltipTargetEle) && this.parent.showTooltip && !isNOU(currentDocument.querySelector('.e-tooltip-wrap'))) {
+            this.destroyTooltip();
+            if (!this.tooltipTargetEle.closest('.e-rte-quick-popup')) {
+                this.tooltipTargetEle.setAttribute('data-title', this.tooltipTargetEle.getAttribute('title'));
+                this.tooltipTargetEle.removeAttribute('title');
+                EventHandler.add(this.tooltipTargetEle, 'mouseout', this.mouseOutHandler, this);
+            }
+        }
+    };
     /**
      * renderListDropDown method
      *
@@ -304,6 +333,7 @@ var ToolbarRenderer = /** @class */ (function () {
 
      */
     ToolbarRenderer.prototype.renderListDropDown = function (args) {
+        var _this = this;
         // eslint-disable-next-line
         var proxy = this;
         var css = CLS_RTE_ELEMENTS + ' ' + CLS_TB_BTN + ((this.parent.inlineMode) ? (' ' + CLS_INLINE_DROPDOWN) : '');
@@ -319,6 +349,35 @@ var ToolbarRenderer = /** @class */ (function () {
             enableRtl: this.parent.enableRtl,
             select: this.dropDownSelected.bind(this),
             beforeOpen: function (args) {
+                if (proxy.parent.editorMode !== 'Markdown') {
+                    var startNode = proxy.parent.getRange().startContainer.parentElement;
+                    var listElem = startNode.closest('LI');
+                    var currentLiElem = !isNOU(listElem) ? listElem.parentElement : null;
+                    if (!isNOU(currentLiElem) && (currentLiElem.nodeName === 'OL' || currentLiElem.nodeName === 'UL')) {
+                        if (currentLiElem.nodeName === 'UL' && args.items[0].subCommand === 'NumberFormatList') {
+                            addClass([args.element.childNodes[0]], 'e-active');
+                        }
+                        else if (currentLiElem.nodeName === 'OL' && args.items[0].subCommand === 'BulletFormatList') {
+                            addClass([args.element.childNodes[0]], 'e-active');
+                        }
+                        else {
+                            var currentListStyle = currentLiElem.style.listStyleType.split('-').join('').toLocaleLowerCase();
+                            currentListStyle = currentListStyle === 'decimal' ? 'number' : currentListStyle;
+                            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');
+                                }
+                                else if (currentListStyle === '') {
+                                    addClass([args.element.childNodes[index]], 'e-active');
+                                }
+                            }
+                        }
+                    }
+                    else {
+                        addClass([args.element.childNodes[0]], 'e-active');
+                    }
+                }
+                _this.closeTooltip({ target: args.event.target });
                 if (proxy.parent.readonly || !proxy.parent.enabled) {
                     args.cancel = true;
                     return;

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

@@ -144,7 +144,7 @@ var Video = /** @class */ (function () {
             var dialogContent = this.vidsizeInput(e);
             var selectObj_1 = { args: e.args, selfVideo: this, selection: e.selection, selectNode: e.selectNode };
             this.dialogObj.setProperties({
-                height: 'inherit', width: '290px', header: vidSizeHeader, content: dialogContent,
+                width: '290px', header: vidSizeHeader, content: dialogContent,
                 buttons: [{
                         // eslint-disable-next-line
                         click: function (e) {
@@ -516,7 +516,6 @@ var Video = /** @class */ (function () {
                 _this.setAspectRatio(_this.videoEle, parseInt(width, 10), parseInt(height, 10), args);
                 _this.resizeVidDupPos(_this.videoEle);
                 _this.vidResizePos(_this.videoEle, _this.vidResizeDiv);
-                _this.parent.setContentHeight('', false);
             }
         });
     };
@@ -1330,8 +1329,12 @@ var Video = /** @class */ (function () {
                 _this.parent.trigger(events.fileRemoving, e, function (e) {
                     proxy.isVideoUploaded = false;
                     _this.dialogObj.getButtons(0).element.disabled = true;
-                    //proxy.inputUrl.removeAttribute('disabled');
-                    proxy.embedInputUrl.removeAttribute('disabled');
+                    if (proxy.inputUrl.getAttribute('disabled')) {
+                        proxy.inputUrl.removeAttribute('disabled');
+                    }
+                    if (proxy.embedInputUrl.getAttribute('disabled')) {
+                        proxy.embedInputUrl.removeAttribute('disabled');
+                    }
                     if (proxy.uploadUrl) {
                         proxy.uploadUrl.url = '';
                     }

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

@@ -135,7 +135,6 @@ var ViewSource = /** @class */ (function () {
             rteContent.appendChild(this.previewElement);
             this.parent.element.appendChild(rteContent);
             rteContent.style.height = this.contentModule.getPanel().style.height;
-            rteContent.style.marginTop = this.contentModule.getPanel().style.marginTop;
             this.getPanel().value = this.getTextAreaValue();
             this.contentModule.getPanel().style.display = 'none';
             rteContent.style.display = 'block';
@@ -156,14 +155,17 @@ var ViewSource = /** @class */ (function () {
             removeClass([this.parent.getToolbar()], [CLS_EXPAND_OPEN]);
         }
         removeClass(tbItems, [CLS_ACTIVE]);
-        this.parent.setContentHeight('sourceCode', true);
+        var isExpand = this.parent.element.querySelectorAll('.e-toolbar-extended.e-popup-open').length > 0 ? true : false;
+        this.parent.setContentHeight('SourceCode', isExpand);
         this.wireEvent(this.previewElement);
         this.unWireBaseKeyDown();
         this.previewElement.focus();
         this.parent.updateValue();
         if (!isNullOrUndefined(this.parent.placeholder) && !this.parent.iframeSettings.enable) {
             var placeHolderWrapper = this.parent.element.querySelector('.rte-placeholder.e-rte-placeholder');
-            placeHolderWrapper.style.display = 'none';
+            if (placeHolderWrapper) {
+                placeHolderWrapper.style.display = 'none';
+            }
         }
         this.parent.trigger(events.actionComplete, { requestType: 'SourceCode', targetItem: 'SourceCode', args: args });
         this.parent.invokeChangeEvent();
@@ -219,7 +221,8 @@ var ViewSource = /** @class */ (function () {
         if (this.parent.getToolbar()) {
             removeClass([this.parent.getToolbar()], [CLS_EXPAND_OPEN]);
         }
-        this.parent.setContentHeight('preview', true);
+        var isExpand = this.parent.element.querySelectorAll('.e-toolbar-extended.e-popup-open').length > 0 ? true : false;
+        this.parent.setContentHeight('Preview', isExpand);
         this.unWireEvent();
         this.wireBaseKeyDown();
         this.contentModule.getEditPanel().focus();

package/styles/bootstrap-dark.css

@@ -140,12 +140,14 @@
   content: "\e948";
 }
 .e-rte-toolbar .e-replace::before,
+.e-rte-dropdown-popup .e-replace::before {
+  content: "\e359";
+}
 .e-rte-toolbar .e-audio-replace::before,
 .e-rte-toolbar .e-video-replace::before,
-.e-rte-dropdown-popup .e-replace::before,
 .e-rte-dropdown-popup .e-audio-replace::before,
 .e-rte-dropdown-popup .e-video-replace::before {
-  content: "\e359";
+  content: "\e606";
 }
 .e-rte-toolbar .e-align::before,
 .e-rte-dropdown-popup .e-align::before {
@@ -235,11 +237,11 @@
 }
 .e-rte-toolbar .e-table-header::before,
 .e-rte-dropdown-popup .e-table-header::before {
-  content: "\e705";
+  content: "\e148";
 }
 .e-rte-toolbar .e-table-remove::before,
 .e-rte-dropdown-popup .e-table-remove::before {
-  content: "\eb00";
+  content: "\e292";
 }
 .e-rte-toolbar .e-table-rows::before,
 .e-rte-dropdown-popup .e-table-rows::before {
@@ -541,6 +543,14 @@
 .e-richtexteditor.e-bigger .e-dialog .e-vid-uploadwrap.e-droparea .e-browsebtn {
   top: -120px;
 }
+.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;
+}
+.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;
+}
 
 .e-richtexteditor {
   color: #f0f0f0;
@@ -783,15 +793,6 @@
   display: block;
   z-index: 101;
 }
-.e-richtexteditor .e-rte-toolbar.e-rte-tb-float,
-.e-richtexteditor .e-rte-toolbar.e-toolbar.e-extended-toolbar.e-rte-tb-float {
-  position: fixed;
-  top: 0;
-}
-.e-richtexteditor .e-rte-toolbar.e-rte-tb-float.e-rte-tb-abs-float,
-.e-richtexteditor .e-rte-toolbar.e-toolbar.e-extended-toolbar.e-rte-tb-float.e-rte-tb-abs-float {
-  position: absolute;
-}
 .e-richtexteditor .rte-placeholder {
   color: #f0f0f0;
   line-height: 18px;
@@ -817,6 +818,8 @@
 }
 .e-richtexteditor .e-rte-content .e-content,
 .e-richtexteditor .e-source-content .e-content {
+  width: 100%;
+  float: left;
   background: unset;
   box-sizing: border-box;
   height: 100%;
@@ -837,6 +840,12 @@
 .e-richtexteditor .e-source-content .e-content li {
   margin-bottom: 10px;
 }
+.e-richtexteditor .e-rte-content .e-content li ol,
+.e-richtexteditor .e-rte-content .e-content li ul,
+.e-richtexteditor .e-source-content .e-content li ol,
+.e-richtexteditor .e-source-content .e-content li ul {
+  margin-block-start: 10px;
+}
 .e-richtexteditor .e-rte-content .e-content h1,
 .e-richtexteditor .e-source-content .e-content h1 {
   font-size: 2.17em;
@@ -943,6 +952,7 @@
   position: absolute;
   right: 0;
   z-index: 100;
+  pointer-events: none;
 }
 .e-richtexteditor .e-rte-character-count.e-warning {
   color: #ffb74d;
@@ -1257,13 +1267,11 @@
 }
 
 .e-rte-img-caption .e-rte-image.e-imgright {
-  float: none;
   margin-left: auto;
   margin-right: 0;
 }
 
 .e-rte-img-caption .e-rte-image.e-imgleft {
-  float: none;
   margin: 0;
 }
 
@@ -1282,6 +1290,7 @@
   height: 20px;
   min-width: 20px;
   padding: 2px 5px;
+  box-sizing: border-box;
 }
 
 .e-rte-table.e-dashed-border td,
@@ -1302,13 +1311,20 @@
 }
 
 .e-rte-img-caption.e-imgleft .e-img-inner {
+  float: left;
   text-align: left;
 }
 
 .e-rte-img-caption.e-imgright .e-img-inner {
+  float: right;
   text-align: right;
 }
 
+.e-rte-img-caption.e-imgleft .e-img-wrap,
+.e-rte-img-caption.e-imgright .e-img-wrap {
+  display: contents;
+}
+
 .e-rte-img-caption .e-img-wrap {
   display: inline-block;
   margin: auto;
@@ -1563,7 +1579,7 @@
 .e-rte-elements .e-rte-content .e-content table td.e-cell-select,
 .e-rte-elements .e-rte-content .e-content table th.e-cell-select {
   border: 1px double #0478d7;
-  height: 24.67px;
+  height: inherit;
 }
 .e-richtexteditor span.e-table-box,
 .e-rte-elements span.e-table-box {
@@ -2636,6 +2652,27 @@
   visibility: hidden;
 }
 
+.e-richtexteditor .e-toolbar-wrapper.e-rte-tb-float,
+.e-richtexteditor .e-toolbar-container.e-rte-tb-float {
+  position: sticky;
+  top: 0;
+  overflow: visible;
+}
+.e-richtexteditor .e-toolbar-wrapper,
+.e-richtexteditor .e-toolbar-container {
+  height: auto;
+  z-index: 10;
+}
+.e-richtexteditor .e-toolbar .e-toolbar-pop.e-toolbar-extended {
+  position: relative;
+  width: 100%;
+  top: 0 !important; /* stylelint-disable-line declaration-no-important */
+  left: 0 !important; /* stylelint-disable-line declaration-no-important */
+}
+.e-richtexteditor .e-toolbar .e-toolbar-pop.e-toolbar-extended.e-popup-open {
+  display: block;
+}
+
 /*! tab layout */
 .e-richtexteditor .e-rte-toolbar {
   border: 1px solid #505050;
@@ -2752,6 +2789,9 @@
 .e-richtexteditor .e-toolbar-wrapper .e-rte-toolbar:not(.e-rte-tb-float) {
   border-bottom: 1px solid #505050;
 }
+.e-richtexteditor .e-toolbar-wrapper.e-rte-tb-float .e-rte-toolbar {
+  border-top: 1px solid #505050;
+}
 .e-richtexteditor .e-toolbar-wrapper + .e-rte-toolbar:not(.e-rte-tb-float) {
   border: 0;
 }
@@ -3072,7 +3112,7 @@ span.e-rte-videoboxmark {
 }
 
 .e-dropdown-popup ul .e-item.e-active {
-  background-color: #0070f0;
+  background: #0070f0;
   color: #fff;
 }