@syncfusion/ej2-richtexteditor 24.2.8 → 25.1.35

package/src/rich-text-editor/actions/dropdown-buttons.js

@@ -26,7 +26,7 @@ var DropDownButtons = /** @class */ (function () {
             addClass([args.element], item.cssClass);
         }
         if (item.command === 'Images' || item.command === 'Videos' || item.command === 'Audios' || item.command === 'Table') {
-            args.element.setAttribute('title', getQuickToolbarTooltipText(item.text));
+            args.element.setAttribute('title', getQuickToolbarTooltipText(item.text) !== '' ? getQuickToolbarTooltipText(item.text) : item.text);
         }
         if (item.command === 'Alignments' || item.subCommand === 'JustifyLeft'
             || item.subCommand === 'JustifyRight' || item.subCommand === 'JustifyCenter') {
@@ -36,13 +36,13 @@ var DropDownButtons = /** @class */ (function () {
             args.element.setAttribute('title', getTooltipTextDropdownItems(item.subCommand.toLocaleLowerCase(), this.locator, formatsLocale));
         }
         if (item.command === 'Font') {
-            args.element.setAttribute('title', getTooltipTextDropdownItems(item.value.toLocaleLowerCase(), this.locator, fontNameLocale));
+            args.element.setAttribute('title', getTooltipTextDropdownItems(item.text.toLocaleLowerCase(), this.locator, fontNameLocale) !== '' ? getTooltipTextDropdownItems(item.text.toLocaleLowerCase(), this.locator, fontNameLocale) : item.text);
         }
         if (item.subCommand === 'BulletFormatList') {
-            args.element.setAttribute('title', getTooltipTextDropdownItems(item.value.toLocaleLowerCase(), this.locator, bulletFormatListLocale));
+            args.element.setAttribute('title', getTooltipTextDropdownItems(item.text.toLocaleLowerCase(), this.locator, bulletFormatListLocale) !== '' ? getTooltipTextDropdownItems(item.text.toLocaleLowerCase(), this.locator, bulletFormatListLocale) : item.text);
         }
         if (item.subCommand === 'NumberFormatList') {
-            args.element.setAttribute('title', getTooltipTextDropdownItems(item.text.replace(/\s/g, '').toLocaleLowerCase(), this.locator, numberFormatListLocale));
+            args.element.setAttribute('title', (getTooltipTextDropdownItems(item.text.toLocaleLowerCase(), this.locator, numberFormatListLocale)) !== '' ? getTooltipTextDropdownItems(item.text.toLocaleLowerCase(), this.locator, numberFormatListLocale) : item.text);
         }
         if (item.subCommand === 'FontSize') {
             args.element.setAttribute('title', getTooltipTextDropdownItems(item.value.toLocaleLowerCase(), null, null, this.parent));

package/src/rich-text-editor/actions/emoji-picker.js

@@ -61,10 +61,10 @@ var EmojiPicker = /** @class */ (function () {
         }
         this.popDiv = this.parent.createElement('div', { className: 'e-rte-emojipicker-popup', id: this.parent.getID() + '_emojiPicker' });
         if (!isNOU(this.parent.getToolbar()) && !this.parent.inlineMode.enable) {
-            this.parent.getToolbar().appendChild(this.popDiv);
+            this.parent.getToolbar().parentElement.appendChild(this.popDiv);
         }
         else if (this.parent.inlineMode.enable) {
-            this.parent.inputElement.appendChild(this.popDiv);
+            this.parent.element.appendChild(this.popDiv);
         }
         EventHandler.add(this.popDiv, 'keydown', this.onKeyDown, this);
         EventHandler.add(this.popDiv, 'keyup', this.searchFilter, this);

package/src/rich-text-editor/actions/enter-key.js

@@ -50,7 +50,8 @@ var EnterKeyAction = /** @class */ (function () {
             isTableEnter = blockElement.tagName === 'TD' || blockElement.tagName === 'TBODY' ? false : true;
         }
         if (e.args.which === 13 && !e.args.ctrlKey && (!Browser.isDevice ? e.args.code === 'Enter' : e.args.key === 'Enter')) {
-            if (isNOU(this.startNode.closest('LI, UL, OL')) && isNOU(this.endNode.closest('LI, UL, OL')) && isTableEnter &&
+            if (isNOU(this.startNode.closest('LI, UL, OL')) && isNOU(this.endNode.closest('LI, UL, OL')) &&
+                isNOU(this.startNode.closest('.e-img-inner')) && isTableEnter &&
                 isNOU(this.startNode.closest('PRE')) && isNOU(this.endNode.closest('PRE'))) {
                 var shiftKey_1 = e.args.shiftKey;
                 var actionBeginArgs = {
@@ -485,10 +486,10 @@ var EnterKeyAction = /** @class */ (function () {
         }
         var previousBlockNode = this.parent.formatter.editorManager.domNode.blockNodes()[0].previousSibling;
         var nextBlockNode = this.parent.formatter.editorManager.domNode.blockNodes()[0].nextSibling;
-        if (!isNOU(previousBlockNode) && previousBlockNode.hasAttribute('style') && previousBlockNode.nodeName !== 'TABLE') {
+        if (!isNOU(previousBlockNode) && previousBlockNode.nodeName !== '#text' && previousBlockNode.hasAttribute('style') && previousBlockNode.nodeName !== 'TABLE') {
             insertElem.setAttribute('style', previousBlockNode.getAttribute('style'));
         }
-        if (isNOU(previousBlockNode) && !isNOU(nextBlockNode) && nextBlockNode.hasAttribute('style') && nextBlockNode.nodeName !== 'TABLE') {
+        if (isNOU(previousBlockNode) && !isNOU(nextBlockNode) && nextBlockNode.nodeName !== '#text' && nextBlockNode.hasAttribute('style') && nextBlockNode.nodeName !== 'TABLE') {
             insertElem.setAttribute('style', nextBlockNode.getAttribute('style'));
         }
         return insertElem;

package/src/rich-text-editor/actions/full-screen.js

@@ -46,7 +46,7 @@ var FullScreen = /** @class */ (function () {
                     _this.parent.element.classList.add(classes.CLS_FULL_SCREEN);
                     _this.toggleParentOverflow(true);
                     var isExpand = _this.parent.element.querySelectorAll('.e-toolbar-extended.e-popup-open').length > 0 ? true : false;
-                    _this.parent.setContentHeight(null, isExpand);
+                    _this.parent.setContentHeight('Maximize', isExpand);
                     if (_this.parent.toolbarModule) {
                         if (!_this.parent.getBaseToolbarObject().toolbarObj.items[0].properties) {
                             _this.parent.getBaseToolbarObject().toolbarObj.removeItems(0);
@@ -98,7 +98,7 @@ var FullScreen = /** @class */ (function () {
                         removeClass([elem[i]], ['e-rte-overflow']);
                     }
                     var isExpand = _this.parent.element.querySelectorAll('.e-toolbar-extended.e-popup-open').length > 0 ? true : false;
-                    _this.parent.setContentHeight(null, isExpand);
+                    _this.parent.setContentHeight('Minimize', isExpand);
                     if (_this.parent.toolbarModule) {
                         if (!_this.parent.getBaseToolbarObject().toolbarObj.items[0].properties) {
                             _this.parent.getBaseToolbarObject().toolbarObj.removeItems(0);

package/src/rich-text-editor/actions/html-editor.d.ts

@@ -22,7 +22,6 @@ export declare class HtmlEditor {
     private saveSelection;
     xhtmlValidation: XhtmlValidation;
     private clickTimeout;
-    private tooltipTargetEle;
     constructor(parent?: IRichTextEditor, serviceLocator?: ServiceLocator);
     /**
      * Destroys the Markdown.
@@ -59,7 +58,6 @@ export declare class HtmlEditor {
     private getRangeLiNode;
     private onPaste;
     private spaceLink;
-    private mouseOutHandler;
     private onToolbarClick;
     private renderColorPicker;
     private instantiateRenderer;

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

@@ -1,5 +1,5 @@
 import * as events from '../base/constant';
-import { isNullOrUndefined, closest, attributes, removeClass, addClass, Browser, detach, EventHandler } from '@syncfusion/ej2-base';
+import { isNullOrUndefined, closest, attributes, removeClass, addClass, Browser, detach } from '@syncfusion/ej2-base';
 import { isNullOrUndefined as isNOU } from '@syncfusion/ej2-base';
 import { HTMLFormatter } from '../formatter/html-formatter';
 import { RenderType } from '../base/enum';
@@ -425,9 +425,9 @@ var HtmlEditor = /** @class */ (function () {
                 var liElement = this.getRangeLiNode(currentRange.startContainer);
                 if (liElement.previousElementSibling && liElement.previousElementSibling.childElementCount > 0) {
                     this.oldRangeElement = liElement.previousElementSibling.lastElementChild.nodeName === 'BR' ?
-                        liElement.previousElementSibling : liElement.previousElementSibling.lastElementChild;
+                        liElement.previousElementSibling : liElement.previousElementSibling.lastChild;
                     if (!isNOU(liElement.lastElementChild) && liElement.lastElementChild.nodeName !== 'BR' &&
-                        isNOU(liElement.lastElementChild.previousSibling)) {
+                        isNOU(liElement.lastElementChild.previousSibling) && liElement.lastChild.nodeName !== "#text") {
                         this.rangeElement = liElement.lastElementChild;
                         isLiElement = true;
                     }
@@ -452,7 +452,7 @@ var HtmlEditor = /** @class */ (function () {
                         ? this.oldRangeElement.lastElementChild.lastElementChild :
                         this.oldRangeElement.lastElementChild;
                 }
-                var lastNode = this.oldRangeElement.lastChild;
+                var lastNode = this.oldRangeElement.lastChild ? this.oldRangeElement.lastChild : this.oldRangeElement;
                 while (lastNode.nodeType !== 3 && lastNode.nodeName !== '#text' &&
                     lastNode.nodeName !== 'BR') {
                     lastNode = lastNode.lastChild;
@@ -460,12 +460,17 @@ var HtmlEditor = /** @class */ (function () {
                 this.parent.formatter.editorManager.nodeSelection.setCursorPoint(this.parent.contentModule.getDocument(), 
                 // eslint-disable-next-line
                 lastNode, lastNode.textContent.length);
-                if (this.oldRangeElement.querySelectorAll('BR').length === 1) {
+                if (this.oldRangeElement.nodeName !== '#text' && this.oldRangeElement.querySelectorAll('BR').length === 1) {
                     detach(this.oldRangeElement.querySelector('BR'));
                 }
                 if (!isNOU(this.rangeElement) && this.oldRangeElement !== this.rangeElement) {
                     while (this.rangeElement.firstChild) {
-                        this.oldRangeElement.appendChild(this.rangeElement.childNodes[0]);
+                        if (this.oldRangeElement.nodeName === '#text') {
+                            this.oldRangeElement.parentElement.appendChild(this.rangeElement.childNodes[0]);
+                        }
+                        else {
+                            this.oldRangeElement.appendChild(this.rangeElement.childNodes[0]);
+                        }
                     }
                     // eslint-disable-next-line
                     !isLiElement ? detach(this.rangeElement) : detach(this.rangeElement.parentElement);
@@ -502,7 +507,11 @@ var HtmlEditor = /** @class */ (function () {
                 (!isNullOrUndefined(this.deleteRangeElement.nextElementSibling) && this.deleteRangeElement.nextElementSibling.tagName === 'TABLE'))) {
                 return;
             }
-            if (this.getCaretIndex(currentRange, this.deleteRangeElement) === this.deleteRangeElement.textContent.length) {
+            var isImgWithEmptyBlockNode = false;
+            if (this.deleteRangeElement.querySelectorAll('img').length > 0 && this.deleteRangeElement.textContent.trim() === '') {
+                isImgWithEmptyBlockNode = true;
+            }
+            if (this.getCaretIndex(currentRange, this.deleteRangeElement) === this.deleteRangeElement.textContent.length && !isImgWithEmptyBlockNode) {
                 if (!isNullOrUndefined(liElement)) {
                     if (isLiElement || !isNullOrUndefined(liElement.nextElementSibling)) {
                         this.deleteOldRangeElement = this.getRangeElement(liElement.nextElementSibling);
@@ -694,19 +703,6 @@ var HtmlEditor = /** @class */ (function () {
             }, e, value);
         }
     };
-    HtmlEditor.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);
-    };
     HtmlEditor.prototype.onToolbarClick = function (args) {
         var _this = this;
         var save;
@@ -714,17 +710,8 @@ var HtmlEditor = /** @class */ (function () {
         var selectParentEle;
         var item = args.item;
         var closestElement = closest(args.originalEvent.target, '.e-rte-quick-popup');
-        var currentDocument = this.parent.iframeSettings.enable ? this.parent.contentModule.getPanel().ownerDocument :
-            this.parent.contentModule.getDocument();
-        this.tooltipTargetEle = closest(args.originalEvent.target, '[data-tooltip-id]');
-        if (!isNOU(this.tooltipTargetEle) && this.parent.showTooltip && !isNOU(currentDocument.querySelector('.e-tooltip-wrap'))) {
-            this.parent.notify(events.destroyTooltip, { args: event });
-            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);
-            }
-        }
+        var target = args.originalEvent.target;
+        this.parent.notify(events.closeTooltip, { target: target });
         if (item.command !== 'FormatPainter') {
             if (closestElement && !closestElement.classList.contains('e-rte-inline-popup') && !closestElement.classList.contains('e-rte-text-popup')) {
                 if (!(item.subCommand === 'SourceCode' || item.subCommand === 'Preview' ||

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

@@ -74,7 +74,9 @@ var MarkdownEditor = /** @class */ (function () {
     MarkdownEditor.prototype.onToolbarClick = function (args) {
         var item = args.item;
         var textArea = this.parent.contentModule.getEditPanel();
-        textArea.focus();
+        if (item.command !== 'Formats') {
+            textArea.focus();
+        }
         var startOffset = textArea.selectionStart;
         var endOffset = textArea.selectionEnd;
         var text = textArea.value.substring(startOffset, endOffset);

package/src/rich-text-editor/actions/paste-clean-up.d.ts

@@ -77,6 +77,7 @@ export declare class PasteCleanup {
     private deniedAttributes;
     private allowedStyle;
     private findLastElement;
+    private processPictureElement;
     /**
      * For internal use only - Get the module name.
      *

package/src/rich-text-editor/actions/paste-clean-up.js

@@ -679,6 +679,9 @@ var PasteCleanup = /** @class */ (function () {
             this.setImageProperties(allImg[i]);
         }
         this.addTempClass(clipBoardElem);
+        if (clipBoardElem.querySelectorAll('picture').length > 0) {
+            this.processPictureElement(clipBoardElem);
+        }
         if (clipBoardElem.textContent !== '' || !isNOU(clipBoardElem.querySelector('img')) ||
             !isNOU(clipBoardElem.querySelector('table'))) {
             var tempWrapperElem = this.parent.createElement('div');
@@ -1138,6 +1141,26 @@ var PasteCleanup = /** @class */ (function () {
         }
         return null;
     };
+    PasteCleanup.prototype.processPictureElement = function (clipBoardElem) {
+        var pictureElems = clipBoardElem.querySelectorAll('picture');
+        for (var i = 0; i < pictureElems.length; i++) {
+            var imgElem = pictureElems[i].querySelector('img');
+            var sourceElems = pictureElems[i].querySelectorAll('source');
+            if (imgElem && imgElem.getAttribute('src')) {
+                var srcValue = imgElem.getAttribute('src');
+                var url = new URL(srcValue);
+                for (var j = 0; j < sourceElems.length; j++) {
+                    var srcset = sourceElems[j].getAttribute('srcset');
+                    if (srcset) {
+                        if (srcset.indexOf('http') === -1) {
+                            var fullPath = url.origin + srcset;
+                            sourceElems[j].setAttribute('srcset', fullPath);
+                        }
+                    }
+                }
+            }
+        }
+    };
     /**
      * For internal use only - Get the module name.
      *

package/src/rich-text-editor/actions/quick-toolbar.d.ts

@@ -137,4 +137,11 @@ export declare class QuickToolbar {
      * @hidden
      */
     private getModuleName;
+    /**
+     *
+     * @returns {BaseQuickToolbar[]} - specifies the quick toolbar instance.
+     * @hidden
+     * @private
+     */
+    getQuickToolbarInstance(): BaseQuickToolbar[];
 }

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

@@ -149,7 +149,7 @@ var QuickToolbar = /** @class */ (function () {
 
      */
     QuickToolbar.prototype.showInlineQTBar = function (x, y, target) {
-        if (isNOU(this.parent) || this.parent.readonly || target.tagName.toLowerCase() === 'img') {
+        if (isNOU(this.parent) || this.parent.readonly || target.tagName.toLowerCase() === 'img' || this.inlineQTBar.element.querySelector('.e-rte-color-content')) {
             return;
         }
         this.inlineQTBar.showPopup(x, y, target);
@@ -238,6 +238,9 @@ var QuickToolbar = /** @class */ (function () {
             }
         }
         if (!isNOU(this.textQTBar) && !isNOU(this.parent.quickToolbarSettings.text) && !this.parent.inlineMode.enable) {
+            if (!isNOU(e) && !isNOU(e.name) && e.name === 'sourceCodeMouseDown') {
+                return;
+            }
             var args = e.args.touches ?
                 e.args.changedTouches[0] : e.args;
             var target = e.args.target;
@@ -248,7 +251,7 @@ var QuickToolbar = /** @class */ (function () {
             this.offsetY = pageYOffset(args, this.parent.element, this.parent.iframeSettings.enable);
             var range = this.parent.getRange();
             if ((range.endContainer.parentElement.tagName === range.startContainer.parentElement.tagName && (range.startContainer.parentElement.tagName === 'A' && range.endContainer.parentElement.tagName === 'A')) ||
-                (target.tagName === 'IMG') || (target.tagName === 'VIDEO') || (target.tagName === 'AUDIO') || (target.childNodes[0].nodeType === 1 && target.childNodes[0].classList.contains('e-rte-audio')) ||
+                (target.tagName === 'IMG') || (target.tagName === 'VIDEO') || (target.tagName === 'AUDIO') || (target.childNodes[0] && target.childNodes[0].nodeType === 1 && target.childNodes[0].classList.contains('e-rte-audio')) ||
                 (this.parent.getRange().startOffset === this.parent.getRange().endOffset)) {
                 return;
             }
@@ -256,13 +259,16 @@ var QuickToolbar = /** @class */ (function () {
             this.textQTBar.showPopup(this.offsetX, this.offsetY, target, 'text');
         }
     };
-    QuickToolbar.prototype.keyDownHandler = function () {
-        if ((this.parent.inlineMode.enable && (!Browser.isDevice || isIDevice()))
-            && !isNullOrUndefined(select('.' + CLS_INLINE_POP, document))) {
-            this.hideInlineQTBar();
-        }
-        if (this.textQTBar && !hasClass(this.textQTBar.element, 'e-popup-close')) {
-            this.textQTBar.hidePopup();
+    QuickToolbar.prototype.keyDownHandler = function (e) {
+        var preventHide = e.args.altKey;
+        if (!preventHide) {
+            if ((this.parent.inlineMode.enable && (!Browser.isDevice || isIDevice()))
+                && !isNullOrUndefined(select('.' + CLS_INLINE_POP, document))) {
+                this.hideInlineQTBar();
+            }
+            if (this.textQTBar && !hasClass(this.textQTBar.element, 'e-popup-close')) {
+                this.textQTBar.hidePopup();
+            }
         }
     };
     QuickToolbar.prototype.inlineQTBarMouseDownHandler = function () {
@@ -590,6 +596,15 @@ var QuickToolbar = /** @class */ (function () {
     QuickToolbar.prototype.getModuleName = function () {
         return 'quickToolbar';
     };
+    /**
+     *
+     * @returns {BaseQuickToolbar[]} - specifies the quick toolbar instance.
+     * @hidden
+     * @private
+     */
+    QuickToolbar.prototype.getQuickToolbarInstance = function () {
+        return [this.linkQTBar, this.imageQTBar, this.audioQTBar, this.videoQTBar, this.tableQTBar, this.textQTBar, this.inlineQTBar];
+    };
     return QuickToolbar;
 }());
 export { QuickToolbar };

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

@@ -71,7 +71,8 @@ var Resize = /** @class */ (function () {
             this.parent.element.style.width = (!this.parent.enableRtl) ? eventType.clientX - boundRect.left + 'px' : boundRect.right - eventType.clientX + 'px';
         }
         if (!this.parent.toolbarSettings.enable) {
-            this.parent.setContentHeight('', false);
+            var isExpand = this.parent.element.querySelectorAll('.e-toolbar-extended.e-popup-open').length > 0 ? true : false;
+            this.parent.setContentHeight('Resize', isExpand);
         }
         this.parent.refreshUI();
     };

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

@@ -151,8 +151,6 @@ export declare class Toolbar {
      */
     destroy(): void;
     private moduleDestroy;
-    private scrollHandler;
-    private getDOMVisibility;
     private mouseDownHandler;
     private focusChangeHandler;
     private dropDownBeforeOpenHandler;

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

@@ -150,72 +150,14 @@ var Toolbar = /** @class */ (function () {
         }
     };
     Toolbar.prototype.toggleFloatClass = function (e) {
-        var topValue;
-        var isBody = false;
-        var isFloat = false;
-        var scrollParent;
         var floatOffset = this.parent.floatingToolbarOffset;
-        if (e && this.parent.iframeSettings.enable && this.parent.inputElement.ownerDocument === e.target) {
-            scrollParent = e.target.body;
-        }
-        else if (e && e.target !== document) {
-            scrollParent = e.target;
-        }
-        else {
-            isBody = true;
-            scrollParent = document.body;
-        }
-        var tbHeight = this.getToolbarHeight() + this.getExpandTBarPopHeight();
-        if (this.isTransformChild) {
-            topValue = 0;
-            var scrollParentRelativeTop = 0;
-            var trgHeight = this.parent.element.offsetHeight;
-            if (isBody) {
-                var bodyStyle = window.getComputedStyle(scrollParent);
-                scrollParentRelativeTop = parseFloat(bodyStyle.marginTop.split('px')[0]) + parseFloat(bodyStyle.paddingTop.split('px')[0]);
-            }
-            var targetTop = this.parent.element.getBoundingClientRect().top;
-            var scrollParentYOffset = (Browser.isMSPointer && isBody) ? window.pageYOffset : scrollParent.parentElement.scrollTop;
-            var scrollParentRect = scrollParent.getBoundingClientRect();
-            var scrollParentTop = (!isBody) ? scrollParentRect.top : (scrollParentRect.top + scrollParentYOffset);
-            var outOfRange = ((targetTop - ((!isBody) ? scrollParentTop : 0))
-                + trgHeight > tbHeight + floatOffset) ? false : true;
-            if (targetTop > (scrollParentTop + floatOffset) || targetTop < -trgHeight || ((targetTop < 0) ? outOfRange : false)) {
-                isFloat = false;
-                removeClass([this.tbElement], [classes.CLS_TB_ABS_FLOAT]);
-            }
-            else if (targetTop < (scrollParentTop + floatOffset)) {
-                if (targetTop < 0) {
-                    topValue = (-targetTop) + scrollParentTop;
-                }
-                else {
-                    topValue = scrollParentTop - targetTop;
-                }
-                topValue = (isBody) ? topValue - scrollParentRelativeTop : topValue;
-                addClass([this.tbElement], [classes.CLS_TB_ABS_FLOAT]);
-                isFloat = true;
-            }
-        }
-        else {
-            var parent_1 = this.parent.element.getBoundingClientRect();
-            if (window.innerHeight < parent_1.top) {
-                return;
-            }
-            topValue = (e && e.target !== document) ? scrollParent.getBoundingClientRect().top : 0;
-            if ((parent_1.bottom < (floatOffset + tbHeight + topValue)) || parent_1.bottom < 0 || parent_1.top > floatOffset + topValue) {
-                isFloat = false;
-            }
-            else if (parent_1.top < floatOffset || parent_1.top < floatOffset + topValue) {
-                isFloat = true;
-            }
-        }
-        if (!isFloat) {
-            removeClass([this.tbElement], [classes.CLS_TB_FLOAT]);
-            setStyleAttribute(this.tbElement, { top: 0 + 'px', width: '100%' });
+        if (this.parent.toolbarSettings.enableFloating) {
+            addClass([this.tbElement.parentElement], [classes.CLS_TB_FLOAT]);
+            setStyleAttribute(this.tbElement.parentElement, { top: (floatOffset) + 'px' });
         }
         else {
-            addClass([this.tbElement], [classes.CLS_TB_FLOAT]);
-            setStyleAttribute(this.tbElement, { width: this.parent.element.offsetWidth + 'px', top: (floatOffset + topValue) + 'px' });
+            removeClass([this.tbElement.parentElement], [classes.CLS_TB_FLOAT]);
+            setStyleAttribute(this.tbElement.parentElement, { top: '' });
         }
     };
     Toolbar.prototype.renderToolbar = function () {
@@ -521,19 +463,6 @@ var Toolbar = /** @class */ (function () {
         this.toolbarActionModule.parent = null;
         this.dropDownModule.parent = null;
     };
-    Toolbar.prototype.scrollHandler = function (e) {
-        if (!this.parent.inlineMode.enable) {
-            if (this.parent.toolbarSettings.enableFloating && this.getDOMVisibility(this.tbElement)) {
-                this.toggleFloatClass(e.args);
-            }
-        }
-    };
-    Toolbar.prototype.getDOMVisibility = function (el) {
-        if (!el.offsetParent && el.offsetWidth === 0 && el.offsetHeight === 0) {
-            return false;
-        }
-        return true;
-    };
     Toolbar.prototype.mouseDownHandler = function () {
         if (Browser.isDevice && this.parent.inlineMode.enable && !isIDevice()) {
             this.showFixedTBar();
@@ -570,11 +499,6 @@ var Toolbar = /** @class */ (function () {
     };
     Toolbar.prototype.adjustContentHeight = function (trg, isKeyboard) {
         if (trg && this.parent.toolbarSettings.type === ToolbarType.Expand && !isNOU(trg)) {
-            var extendedTbar = this.tbElement.querySelector('.e-toolbar-extended');
-            if (!isNOU(extendedTbar)) {
-                setStyleAttribute(extendedTbar, { maxHeight: '', display: 'block' });
-                setStyleAttribute(extendedTbar, { maxHeight: extendedTbar.offsetHeight + 'px', display: '' });
-            }
             var hasActiveClass = trg.classList.contains('e-nav-active');
             var isExpand = isKeyboard ? (hasActiveClass ? false : true) : (hasActiveClass ? true : false);
             if (isExpand) {
@@ -583,7 +507,7 @@ var Toolbar = /** @class */ (function () {
             else {
                 removeClass([this.tbElement], [classes.CLS_EXPAND_OPEN]);
             }
-            this.parent.setContentHeight('toolbar', isExpand);
+            this.parent.setContentHeight('Toolbar', isExpand);
         }
         else if (Browser.isDevice || this.parent.inlineMode.enable) {
             this.isToolbar = true;
@@ -608,7 +532,6 @@ var Toolbar = /** @class */ (function () {
         this.dropDownModule = new DropDownButtons(this.parent, this.locator);
         this.toolbarActionModule = new ToolbarAction(this.parent);
         this.parent.on(events.initialEnd, this.renderToolbar, this);
-        this.parent.on(events.scroll, this.scrollHandler, this);
         this.parent.on(events.bindOnEnd, this.toolbarBindEvent, this);
         this.parent.on(events.toolbarUpdated, this.updateToolbarStatus, this);
         this.parent.on(events.modelChanged, this.onPropertyChanged, this);
@@ -633,7 +556,6 @@ var Toolbar = /** @class */ (function () {
             return;
         }
         this.parent.off(events.initialEnd, this.renderToolbar);
-        this.parent.off(events.scroll, this.scrollHandler);
         this.parent.off(events.bindOnEnd, this.toolbarBindEvent);
         this.parent.off(events.toolbarUpdated, this.updateToolbarStatus);
         this.parent.off(events.modelChanged, this.onPropertyChanged);
@@ -668,7 +590,8 @@ var Toolbar = /** @class */ (function () {
         if (!this.parent.inlineMode.enable) {
             this.refreshToolbarOverflow();
         }
-        this.parent.setContentHeight('', true);
+        var isExpand = this.parent.element.querySelectorAll('.e-toolbar-extended.e-popup-open').length > 0 ? true : false;
+        this.parent.setContentHeight('Refresh', isExpand);
     };
     /**
      * Called internally if any of the property value changed.
@@ -689,6 +612,11 @@ var Toolbar = /** @class */ (function () {
                 }
             }
         }
+        if (!isNullOrUndefined(e.newProp.toolbarSettings)) {
+            if (!isNullOrUndefined(e.newProp.toolbarSettings.enableFloating)) {
+                this.toggleFloatClass();
+            }
+        }
         if (e.module !== this.getModuleName()) {
             return;
         }

package/src/rich-text-editor/base/classes.d.ts

@@ -49,11 +49,6 @@ export declare const CLS_TB_FLOAT: string;
 /**
  * @hidden
 
- */
-export declare const CLS_TB_ABS_FLOAT: string;
-/**
- * @hidden
-
  */
 export declare const CLS_INLINE: string;
 /**

package/src/rich-text-editor/base/classes.js

@@ -49,11 +49,6 @@ export var CLS_TB_FLOAT = 'e-rte-tb-float';
 /**
  * @hidden
 
- */
-export var CLS_TB_ABS_FLOAT = 'e-rte-tb-abs-float';
-/**
- * @hidden
-
  */
 export var CLS_INLINE = 'e-rte-inline';
 /**

package/src/rich-text-editor/base/constant.d.ts

@@ -764,6 +764,11 @@ export declare const showColorPicker: string;
 /**
  * @hidden
 
+ */
+export declare const closeTooltip: string;
+/**
+ * @hidden
+
  */
 export declare const blockEmptyNodes: string;
 /**

package/src/rich-text-editor/base/constant.js

@@ -764,6 +764,11 @@ export var showColorPicker = 'showColorPicker';
 /**
  * @hidden
 
+ */
+export var closeTooltip = 'closeTooltip';
+/**
+ * @hidden
+
  */
 export var blockEmptyNodes = "address:empty, article:empty, aside:empty, blockquote:empty,\n details:empty, dd:empty, div:empty, dl:empty, dt:empty, fieldset:empty, footer:empty,form:empty, h1:empty,\n h2:empty, h3:empty, h4:empty, h5:empty, h6:empty, header:empty, hgroup:empty, li:empty, main:empty, nav:empty,\n noscript:empty, output:empty, p:empty, pre:empty, section:empty, td:empty, th:empty";
 /**

package/src/rich-text-editor/base/interface.d.ts

@@ -8,7 +8,7 @@ import { ClickEventArgs } from '@syncfusion/ej2-navigations';
 import { BaseToolbar } from '../actions/base-toolbar';
 import { BaseQuickToolbar } from '../actions/base-quick-toolbar';
 import { NodeSelection } from '../../selection/selection';
-import { EditorMode, EnterKey, ShiftEnterKey } from './../../common/types';
+import { ContentHeightSource, EditorMode, EnterKey, ShiftEnterKey } from './../../common/types';
 import { MarkdownSelection } from './../../markdown-parser/plugin/markdown-selection';
 import { ToolbarSettingsModel, IFrameSettingsModel, ImageSettingsModel, AudioSettingsModel, VideoSettingsModel, TableSettingsModel, FormatPainterSettingsModel, EmojiSettingsModel } from '../models/models';
 import { QuickToolbarSettingsModel, InlineModeModel, PasteCleanupSettingsModel, FileManagerSettingsModel } from '../models/models';
@@ -163,7 +163,7 @@ export interface IRichTextEditor extends Component<HTMLElement> {
     getText(): string;
     updateValueData?(): void;
     getBaseToolbarObject(): BaseToolbar;
-    setContentHeight(target?: string, isExpand?: boolean): void;
+    setContentHeight(target: ContentHeightSource, isExpand?: boolean): void;
     keyConfig?: {
         [key: string]: string;
     };
@@ -667,6 +667,10 @@ export interface IToolsItemConfigs {
     subCommand?: string;
     value?: string;
 }
+/**
+ * @hidden
+
+ */
 export interface IListDropDownModel extends DropDownItemModel {
     cssClass?: string;
     command?: string;
@@ -676,6 +680,10 @@ export interface IListDropDownModel extends DropDownItemModel {
     listStyle?: string;
     listImage?: string;
 }
+/**
+ * @hidden
+
+ */
 export interface IDropDownItemModel extends DropDownItemModel {
     cssClass?: string;
     command?: string;
@@ -1378,3 +1386,29 @@ export interface CleanupResizeElemArgs {
     value: string;
     callBack(value: string): void;
 }
+/**
+ * @hidden
+ * @private
+ */
+export interface IBaseQuickToolbar {
+    /**
+     * Instance of the Quick Toolabr Popup.
+     */
+    popupObj: Popup;
+    /**
+     * Parent Element of the Quick Toolbar.
+     */
+    element: HTMLElement;
+    /**
+     * Boolean to check whether the quick toolbar is rendered in the DOM.
+     */
+    isRendered: boolean;
+    /**
+     * Instance of the Toolbar rendered inside the Popup.
+     */
+    quickTBarObj: BaseToolbar;
+    /**
+     * Element of the Toolbar rendered inside the Popup.
+     */
+    toolbarElement: HTMLElement;
+}