@syncfusion/ej2-richtexteditor 25.1.38 → 25.1.39

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

@@ -3,8 +3,7 @@ import { RenderType } from '../base/enum';
 import { getIndex } from '../base/util';
 import * as events from '../base/constant';
 import * as classes from '../base/classes';
-import { getDropDownValue, getFormattedFontSize, getTooltipText, getTooltipTextDropdownItems, getQuickToolbarTooltipText } from '../base/util';
-import { fontNameLocale, formatsLocale, numberFormatListLocale, bulletFormatListLocale } from '../models/default-locale';
+import { getDropDownValue, getFormattedFontSize, getTooltipText } from '../base/util';
 import * as model from '../models/items';
 import { dispatchEvent } from '../base/util';
 /**
@@ -25,28 +24,10 @@ var DropDownButtons = /** @class */ (function () {
         if (item.cssClass) {
             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) !== '' ? getQuickToolbarTooltipText(item.text) : item.text);
-        }
         if (item.command === 'Alignments' || item.subCommand === 'JustifyLeft'
             || item.subCommand === 'JustifyRight' || item.subCommand === 'JustifyCenter') {
             args.element.setAttribute('title', getTooltipText(item.subCommand.toLocaleLowerCase(), this.locator));
         }
-        if (item.command === 'Formats') {
-            args.element.setAttribute('title', getTooltipTextDropdownItems(item.subCommand.toLocaleLowerCase(), this.locator, formatsLocale));
-        }
-        if (item.command === 'Font') {
-            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.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.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));
-        }
     };
     DropDownButtons.prototype.dropdownContent = function (width, type, content) {
         return ('<span style="display: inline-flex;' + 'width:' + ((type === 'quick') ? 'auto' : width) + '" >' +
@@ -352,7 +333,7 @@ var DropDownButtons = /** @class */ (function () {
         if (targetElement.classList.contains(classes.CLS_DROPDOWN_BTN)) {
             return;
         }
-        this.tableRowsDropDown = this.toolbarRenderer.renderDropDownButton({
+        this.tableCellDropDown = this.toolbarRenderer.renderDropDownButton({
             iconCss: 'e-table-cell e-icons',
             cssClass: classes.CLS_DROPDOWN_POPUP + ' ' + classes.CLS_DROPDOWN_ITEMS + ' ' + classes.CLS_QUICK_DROPDOWN,
             itemName: 'TableCell',
@@ -460,6 +441,10 @@ var DropDownButtons = /** @class */ (function () {
             this.removeDropDownClasses(this.tableColumnsDropDown.element);
             this.tableColumnsDropDown.destroy();
         }
+        if (this.tableCellDropDown) {
+            this.removeDropDownClasses(this.tableCellDropDown.element);
+            this.tableCellDropDown.destroy();
+        }
         if (this.tableCellVerticalAlignDropDown) {
             this.removeDropDownClasses(this.tableCellVerticalAlignDropDown.element);
             this.tableCellVerticalAlignDropDown.destroy();
@@ -513,7 +498,7 @@ var DropDownButtons = /** @class */ (function () {
         var dropDownObj = [
             this.formatDropDown, this.fontNameDropDown, this.fontSizeDropDown, this.alignDropDown, this.imageAlignDropDown,
             this.displayDropDown, this.numberFormatListDropDown, this.bulletFormatListDropDown, this.tableRowsDropDown,
-            this.tableColumnsDropDown, this.tableCellVerticalAlignDropDown
+            this.tableColumnsDropDown, this.tableCellDropDown, this.tableCellVerticalAlignDropDown
         ];
         for (var i = 0; i < dropDownObj.length; i++) {
             this.updateCss(dropDownObj[i], e);
@@ -531,7 +516,7 @@ var DropDownButtons = /** @class */ (function () {
         this.parent.on(events.bindCssClass, this.setCssClass, this);
     };
     DropDownButtons.prototype.onIframeMouseDown = function () {
-        if (this.parent.getToolbarElement().querySelectorAll('.e-rte-dropdown-btn[aria-expanded="true"]').length > 0) {
+        if (!isNullOrUndefined(this.parent.getToolbarElement()) && (this.parent.getToolbarElement().querySelectorAll('.e-rte-dropdown-btn[aria-expanded="true"]').length > 0 || this.parent.getToolbarElement().querySelectorAll('.e-dropdown-btn.e-rte-inline-dropdown[aria-expanded="true"]').length > 0)) {
             dispatchEvent(document, 'mousedown');
         }
     };

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

@@ -638,7 +638,7 @@ var EmojiPicker = /** @class */ (function () {
                     }
                 }
             }
-            if (noEMoji && !this.parent.element.querySelector('.e-rte-emojiSearch-noEmoji') && (inputValue !== '' && value !== ':')) {
+            if (noEMoji && !this.parent.element.querySelector('.e-rte-emojiSearch-noEmoji') && (inputValue !== '' && value !== ':' && value !== ': :')) {
                 noEmojiObj.innerHTML = '<span style="color: rgba(0, 0, 0, 0.75); font-weight: 500; font-size: 16px;">' + this.i10n.getConstant('emojiPickerNoResultFound') + ' 😥 </span>' + '<br>' + '<span style="color: rgba(0, 0, 0, 0.75);"> ' + this.i10n.getConstant('emojiPickerTrySomethingElse') + ' ? </span>';
                 noEmojiObj.style.margin = '55px';
                 emojipickerAll.appendChild(noEmojiObj);

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

@@ -47,7 +47,7 @@ var EnterKeyAction = /** @class */ (function () {
                 curElement = curElement.parentElement;
                 blockElement = curElement;
             }
-            isTableEnter = blockElement.tagName === 'TD' || blockElement.tagName === 'TBODY' ? false : true;
+            isTableEnter = blockElement.tagName === 'TH' || 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')) &&
@@ -62,6 +62,9 @@ var EnterKeyAction = /** @class */ (function () {
                 };
                 this.parent.trigger(events.actionBegin, actionBeginArgs, function (actionBeginArgs) {
                     if (!actionBeginArgs.cancel) {
+                        if (_this.parent.formatter.getUndoRedoStack().length === 0) {
+                            _this.parent.formatter.saveData();
+                        }
                         if (!(_this.range.startOffset === _this.range.endOffset && _this.range.startContainer === _this.range.endContainer)) {
                             if (!(_this.range.startContainer.nodeName === 'SPAN' && (_this.range.startContainer.classList.contains('e-video-wrap') ||
                                 _this.range.startContainer.classList.contains('e-audio-wrap')))) {

package/src/rich-text-editor/actions/format-painter.js

@@ -1,4 +1,4 @@
-import { addClass, isNullOrUndefined as isNOU, removeClass } from '@syncfusion/ej2-base';
+import { addClass, Browser, isNullOrUndefined as isNOU, removeClass } from '@syncfusion/ej2-base';
 import * as events from '../base/constant';
 var FormatPainter = /** @class */ (function () {
     function FormatPainter(parent) {
@@ -43,6 +43,9 @@ var FormatPainter = /** @class */ (function () {
             if ((originalEvent.action === 'format-copy' || originalEvent.action === 'format-paste')) {
                 originalEvent.stopPropagation();
             }
+            if (Browser.userAgent.indexOf('Firefox') !== -1) {
+                originalEvent.preventDefault();
+            }
             this.actionHandler(event, 'keyBoard');
         }
     };

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

@@ -451,12 +451,17 @@ var HtmlEditor = /** @class */ (function () {
                 }
                 var lastNode = this.oldRangeElement.lastChild ? this.oldRangeElement.lastChild : this.oldRangeElement;
                 while (lastNode.nodeType !== 3 && lastNode.nodeName !== '#text' &&
-                    lastNode.nodeName !== 'BR') {
+                    lastNode.nodeName !== 'BR' && !isNOU(lastNode.lastChild)) {
                     lastNode = lastNode.lastChild;
                 }
-                this.parent.formatter.editorManager.nodeSelection.setCursorPoint(this.parent.contentModule.getDocument(), 
-                // eslint-disable-next-line
-                lastNode, lastNode.textContent.length);
+                if (lastNode.nodeName === 'IMG') {
+                    this.parent.formatter.editorManager.nodeSelection.setCursorPoint(this.parent.contentModule.getDocument(), lastNode.parentElement, lastNode.parentElement.childNodes.length);
+                }
+                else {
+                    this.parent.formatter.editorManager.nodeSelection.setCursorPoint(this.parent.contentModule.getDocument(), 
+                    // eslint-disable-next-line
+                    lastNode, lastNode.textContent.length);
+                }
                 if (this.oldRangeElement.nodeName !== '#text' && this.oldRangeElement.querySelectorAll('BR').length === 1) {
                     detach(this.oldRangeElement.querySelector('BR'));
                 }

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

@@ -22,6 +22,7 @@ export declare class QuickToolbar {
     videoQTBar: BaseQuickToolbar;
     tableQTBar: BaseQuickToolbar;
     inlineQTBar: BaseQuickToolbar;
+    debounceTimeout: number;
     private renderFactory;
     constructor(parent?: IRichTextEditor, locator?: ServiceLocator);
     private formatItems;
@@ -72,6 +73,7 @@ export declare class QuickToolbar {
     hideQuickToolbars(): void;
     private deBounce;
     private mouseUpHandler;
+    private isEmbedVidElem;
     private keyDownHandler;
     private inlineQTBarMouseDownHandler;
     private keyUpHandler;

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

@@ -4,12 +4,13 @@ import * as events from '../base/constant';
 import { pageYOffset, hasClass, isIDevice } from '../base/util';
 import { BaseQuickToolbar } from './base-quick-toolbar';
 import { PopupRenderer } from '../renderer/popup-renderer';
-import { CLS_INLINE_POP, CLS_INLINE } from '../base/classes';
+import { CLS_INLINE_POP, CLS_INLINE, CLS_VID_CLICK_ELEM } from '../base/classes';
 /**
  * `Quick toolbar` module is used to handle Quick toolbar actions.
  */
 var QuickToolbar = /** @class */ (function () {
     function QuickToolbar(parent, locator) {
+        this.debounceTimeout = 1000;
         this.parent = parent;
         this.locator = locator;
         this.renderFactory = this.locator.getService('rendererFactory');
@@ -201,7 +202,7 @@ var QuickToolbar = /** @class */ (function () {
         clearTimeout(this.deBouncer);
         this.deBouncer = window.setTimeout(function () {
             _this.showInlineQTBar(x, y, target);
-        }, 1000);
+        }, this.debounceTimeout);
     };
     QuickToolbar.prototype.mouseUpHandler = function (e) {
         if (this.parent.inlineMode.enable && (!Browser.isDevice || isIDevice())) {
@@ -251,7 +252,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] && target.childNodes[0].nodeType === 1 && target.childNodes[0].classList.contains('e-rte-audio')) ||
+                (target.tagName === 'IMG') || (target.tagName === 'VIDEO' || this.isEmbedVidElem(target)) || (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;
             }
@@ -259,6 +260,15 @@ var QuickToolbar = /** @class */ (function () {
             this.textQTBar.showPopup(this.offsetX, this.offsetY, target, 'text');
         }
     };
+    QuickToolbar.prototype.isEmbedVidElem = function (target) {
+        if ((target && target.nodeType !== 3 && target.nodeName !== 'BR' && (target.classList && target.classList.contains(CLS_VID_CLICK_ELEM))) ||
+            (target && target.nodeName === 'IFRAME')) {
+            return true;
+        }
+        else {
+            return false;
+        }
+    };
     QuickToolbar.prototype.keyDownHandler = function (e) {
         var preventHide = e.args.altKey;
         if (this.parent.inlineMode.enable && e.args.metaKey && e.args.keyCode === 65) {
@@ -314,7 +324,7 @@ var QuickToolbar = /** @class */ (function () {
         clearTimeout(this.deBouncer);
         this.deBouncer = window.setTimeout(function () {
             _this.onSelectionChange(e);
-        }, 1000);
+        }, this.debounceTimeout);
     };
     QuickToolbar.prototype.onSelectionChange = function (e) {
         if (!isNullOrUndefined(select('.' + CLS_INLINE_POP, document.body))) {

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

@@ -755,8 +755,8 @@ var RichTextEditor = /** @class */ (function (_super) {
             !(e.altKey || e.shiftKey || (e.altKey && e.shiftKey && e.which == 67))) {
             this.formatter.saveData();
         }
-        if (e.action !== 'insert-link' &&
-            e.action !== 'format-copy' && e.action !== 'format-paste' &&
+        var keyboardEventAction = ['insert-link', 'format-copy', 'format-paste', 'insert-image', 'insert-table', 'insert-audio', 'insert-video'];
+        if (keyboardEventAction.indexOf(e.action) === -1 &&
             (!e.target || !(e.target.classList.contains('e-mention') && !isNOU(document.querySelector('#' + e.target.id + '_popup.e-popup-open')) && e.code === 'Tab')) &&
             (e.action && e.action !== 'paste' && e.action !== 'space'
                 || e.which === 9 || (e.code === 'Backspace' && e.which === 8))) {
@@ -2412,12 +2412,9 @@ var RichTextEditor = /** @class */ (function (_super) {
 
      */
     RichTextEditor.prototype.autoResize = function () {
-        var _this = this;
         if (this.height === 'auto') {
             if (this.editorMode === 'Markdown') {
-                setTimeout(function () {
-                    _this.setAutoHeight(_this.inputElement);
-                }, 0);
+                this.setAutoHeight(this.inputElement);
             }
             else if (this.iframeSettings.enable) {
                 var iframeElement = this.element.querySelector('#' + this.getID() + '_rte-view');
@@ -2430,21 +2427,10 @@ var RichTextEditor = /** @class */ (function (_super) {
         }
     };
     RichTextEditor.prototype.setAutoHeight = function (element) {
-        if (!isNOU(element) && !this.iframeSettings.enable) {
+        if (!isNOU(element)) {
             element.style.height = this.inputElement.scrollHeight + 'px';
             element.style.overflow = 'hidden';
         }
-        else if (!isNOU(element) && !isNOU(element.parentElement) && this.iframeSettings.enable) {
-            var newRange = this.getRange();
-            element.style.height = 'auto';
-            var newHeight = element.contentDocument.body.scrollHeight + 'px';
-            element.style.height = newHeight;
-            element.style.overflow = 'hidden';
-            // 16 px added for padding doesn't affect the editor height
-            if (newRange.startContainer.nodeName !== '#text' && newRange.startContainer.nodeName !== 'BODY' && window.innerHeight < newRange.startContainer.getBoundingClientRect().top + element.getBoundingClientRect().top + 16) {
-                newRange.startContainer.scrollIntoView(false);
-            }
-        }
     };
     RichTextEditor.prototype.wireEvents = function () {
         this.element.addEventListener('focusin', this.onFocusHandler, true);

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

@@ -51,10 +51,6 @@ export declare function pageYOffset(e: MouseEvent | Touch, parentElement: HTMLEl
  * @hidden
  */
 export declare function getTooltipText(item: string, serviceLocator: ServiceLocator): string;
-export declare function getTooltipTextDropdownItems(item: string, serviceLocator: ServiceLocator, localeItems: {
-    [ket: string]: string;
-}[], rteObj?: IRichTextEditor): string;
-export declare function getQuickToolbarTooltipText(item: string): string;
 /**
  * @param {ISetToolbarStatusArgs} e - specifies the e element
  * @param {boolean} isPopToolbar - specifies the boolean value

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

@@ -6,7 +6,7 @@ import { Browser, detach, SanitizeHtmlHelper, extend } from '@syncfusion/ej2-bas
 import * as classes from '../base/classes';
 import * as CONSTANT from '../base/constant';
 import * as model from '../models/items';
-import { toolsLocale, fontNameLocale, formatsLocale, numberFormatListLocale, bulletFormatListLocale, defaultLocale } from '../models/default-locale';
+import { toolsLocale, fontNameLocale, formatsLocale, numberFormatListLocale, bulletFormatListLocale } from '../models/default-locale';
 var undoRedoItems = ['Undo', 'Redo'];
 var inlineNode = ['a', 'abbr', 'acronym', 'audio', 'b', 'bdi', 'bdo', 'big', 'br', 'button',
     'canvas', 'cite', 'code', 'data', 'datalist', 'del', 'dfn', 'em', 'embed', 'font', 'i', 'iframe', 'img', 'input',
@@ -134,40 +134,6 @@ export function getTooltipText(item, serviceLocator) {
     var tooltipText = i10n.getConstant(itemLocale);
     return tooltipText;
 }
-export function getTooltipTextDropdownItems(item, serviceLocator, localeItems, rteObj) {
-    if (localeItems) {
-        var i10n = serviceLocator.getService('rteLocale');
-        for (var i = 0; i < localeItems.length; i++) {
-            var itemLocale = localeItems[i].value.toLocaleLowerCase();
-            var numberValue = localeItems[i].locale;
-            var numberLocale = defaultLocale["" + numberValue].toLocaleLowerCase();
-            if (item === itemLocale || item === numberLocale) {
-                var tooltipText = localeItems[i].locale;
-                return i10n.getConstant(tooltipText);
-            }
-        }
-    }
-    else {
-        var fontsize = rteObj.fontSize.items;
-        for (var i = 0; i < fontsize.length; i++) {
-            if (item === rteObj.fontSize.items[i].value) {
-                var fontSize = rteObj.fontSize.items[i].text;
-                return fontSize;
-            }
-        }
-    }
-    return '';
-}
-export function getQuickToolbarTooltipText(item) {
-    var keys = Object.keys(defaultLocale);
-    for (var i = 0; i < keys.length; i++) {
-        var tooltipText = defaultLocale["" + keys[i]];
-        if (item === tooltipText) {
-            return tooltipText;
-        }
-    }
-    return '';
-}
 /**
  * @param {ISetToolbarStatusArgs} e - specifies the e element
  * @param {boolean} isPopToolbar - specifies the boolean value

package/src/rich-text-editor/formatter/formatter.js

@@ -133,7 +133,8 @@ var Formatter = /** @class */ (function () {
                         _this.saveData();
                     }
                     self.isBlur = false;
-                    if (isNOU(saveSelection) || isNOU(closest(saveSelection.range.startContainer.parentElement, ".e-img-caption")) ? true : !(closest(saveSelection.range.startContainer.parentElement, ".e-img-caption").getAttribute("contenteditable") == "false")) {
+                    var quickToolbarAction = !isNOU(event) && !isNOU(event.target) && (!isNOU(closest(event.target, ".e-rte-elements.e-dropdown-popup.e-rte-dropdown-popup.e-quick-dropdown.e-popup-open")) || !isNOU(closest(event.target, ".e-rte-elements.e-rte-quick-popup.e-popup-open")));
+                    if (isNOU(saveSelection) || (!quickToolbarAction && (isNOU(closest(saveSelection.range.startContainer.parentElement, ".e-img-caption")) ? true : !(closest(saveSelection.range.startContainer.parentElement, ".e-img-caption").getAttribute("contenteditable") == "false")))) {
                         self.contentModule.getEditPanel().focus();
                     }
                     if (self.editorMode === 'HTML' && !isKeyboardVideoInsert) {

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

@@ -39,6 +39,7 @@ var Audio = /** @class */ (function () {
         this.parent.on(events.editAreaClick, this.editAreaClickHandler, this);
         this.parent.on(events.insertCompleted, this.showAudioQuickToolbar, this);
         this.parent.on(events.destroy, this.removeEventListener, this);
+        this.parent.on(events.iframeMouseDown, this.closeDialog, this);
     };
     Audio.prototype.removeEventListener = function () {
         if (this.parent.isDestroyed) {
@@ -57,6 +58,7 @@ var Audio = /** @class */ (function () {
         this.parent.off(events.editAreaClick, this.editAreaClickHandler);
         this.parent.off(events.insertCompleted, this.showAudioQuickToolbar);
         this.parent.off(events.destroy, this.removeEventListener);
+        this.parent.off(events.iframeMouseDown, this.closeDialog);
         if (!isNullOrUndefined(this.contentModule)) {
             EventHandler.remove(this.parent.contentModule.getEditPanel(), Browser.touchStartEvent, this.touchStart);
             EventHandler.remove(this.contentModule.getEditPanel(), Browser.touchEndEvent, this.audioClick);
@@ -305,7 +307,7 @@ var Audio = /** @class */ (function () {
             this.parent.formatter.saveData();
         }
         e.selection.restore();
-        this.parent.formatter.process(this.parent, e.args, e.args, {
+        this.parent.formatter.process(this.parent, e.args, e.args.originalEvent, {
             selectNode: e.selectNode,
             subCommand: e.args.item.subCommand
         });
@@ -401,6 +403,9 @@ var Audio = /** @class */ (function () {
                 this.prevSelectedAudEle.style.outline = '';
             }
         }
+        if (this.parent.inlineMode.enable && target && this.dialogObj && !closest(target, '#' + this.dialogObj.element.id)) {
+            this.dialogObj.hide();
+        }
     };
     Audio.prototype.alignmentSelect = function (e) {
         var item = e.item;
@@ -433,7 +438,7 @@ var Audio = /** @class */ (function () {
         }
         var subCommand = (e.args.item) ?
             e.args.item.subCommand : 'Break';
-        this.parent.formatter.process(this.parent, e.args, e.args, { selectNode: e.selectNode, subCommand: subCommand });
+        this.parent.formatter.process(this.parent, e.args, e.args.originalEvent, { selectNode: e.selectNode, subCommand: subCommand });
     };
     Audio.prototype.inline = function (e) {
         if (e.selectNode[0].nodeName !== 'AUDIO') {
@@ -441,7 +446,7 @@ var Audio = /** @class */ (function () {
         }
         var subCommand = (e.args.item) ?
             e.args.item.subCommand : 'Inline';
-        this.parent.formatter.process(this.parent, e.args, e.args, { selectNode: e.selectNode, subCommand: subCommand });
+        this.parent.formatter.process(this.parent, e.args, e.args.originalEvent, { selectNode: e.selectNode, subCommand: subCommand });
     };
     Audio.prototype.editAreaClickHandler = function (e) {
         if (this.parent.readonly) {
@@ -581,7 +586,7 @@ var Audio = /** @class */ (function () {
                     _this.uploadObj.removing();
                 }
                 _this.parent.isBlur = false;
-                if (event && event.event.returnValue) {
+                if (event && !isNOU(event.event) && event.event.returnValue) {
                     if (_this.parent.editorMode === 'HTML') {
                         selection.restore();
                     }

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

@@ -1399,7 +1399,7 @@ var Image = /** @class */ (function () {
                     _this.uploadObj.remove();
                 }
                 _this.parent.isBlur = false;
-                if (event && event.event.returnValue) {
+                if (event && !isNOU(event.event) && event.event.returnValue) {
                     if (_this.parent.editorMode === 'HTML') {
                         selection.restore();
                     }
@@ -1518,6 +1518,9 @@ var Image = /** @class */ (function () {
                 removeClass([items[i]], 'e-resize');
             }
         }
+        if (this.parent.inlineMode.enable && target && this.dialogObj && !closest(target, '#' + this.dialogObj.element.id)) {
+            this.dialogObj.hide();
+        }
     };
     Image.prototype.removeResizeEle = function () {
         EventHandler.remove(this.contentModule.getDocument(), Browser.touchMoveEvent, this.resizing);

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

@@ -643,13 +643,14 @@ var Table = /** @class */ (function () {
         }
         var target = e.target || e.targetTouches[0].target;
         var closestTable = closest(target, 'table.e-rte-table, table.e-rte-paste-table');
-        if (!isNOU(this.curTable) && !isNOU(closestTable) && closestTable !== this.curTable &&
+        var isResizing = this.parent.contentModule.getEditPanel().querySelectorAll('.e-table-box.e-rbox-select, .e-table-rhelper.e-column-helper, .e-table-rhelper.e-row-helper').length > 0;
+        if (!isResizing && !isNOU(this.curTable) && !isNOU(closestTable) && closestTable !== this.curTable &&
             this.parent.contentModule.getEditPanel().contains(closestTable)) {
             this.removeResizeElement();
             this.removeHelper(e);
             this.cancelResizeAction();
         }
-        if (target.nodeName === 'TABLE' || target.nodeName === 'TD' || target.nodeName === 'TH') {
+        if (!isResizing && (target.nodeName === 'TABLE' || target.nodeName === 'TD' || target.nodeName === 'TH')) {
             this.curTable = (closestTable && this.parent.contentModule.getEditPanel().contains(closestTable))
                 && (target.nodeName === 'TD' || target.nodeName === 'TH') ?
                 closestTable : target;
@@ -795,7 +796,6 @@ var Table = /** @class */ (function () {
             e.preventDefault();
             this.parent.preventDefaultResize(e);
             removeClass(this.curTable.querySelectorAll('td,th'), classes.CLS_TABLE_SEL);
-            this.parent.formatter.editorManager.nodeSelection.Clear(this.contentModule.getDocument());
             this.pageX = this.getPointX(e);
             this.pageY = this.getPointY(e);
             this.resizeBtnInit();
@@ -1055,7 +1055,8 @@ var Table = /** @class */ (function () {
                                 var width = parseFloat(_this.curTable.style.width);
                                 currentMarginLeft = 100 - width;
                             }
-                            if (currentMarginLeft && currentMarginLeft < 1) {
+                            // For table pasted from word, Margin left can be anything so we are avoiding the below process.
+                            if (!_this.curTable.classList.contains('e-rte-paste-table') && currentMarginLeft && currentMarginLeft < 1) {
                                 _this.curTable.style.marginLeft = null;
                                 _this.curTable.style.width = '100%';
                                 return;
@@ -1221,7 +1222,13 @@ var Table = /** @class */ (function () {
             tableTrPercentage[i] = percentage;
         }
         for (var i = 0; i < currentTableTrElement.length; i++) {
-            currentTableTrElement[i].style.height = tableTrPercentage[i] + '%';
+            if (currentTableTrElement[i].parentElement.nodeName === 'THEAD') {
+                currentTableTrElement[i].parentElement.style.height = tableTrPercentage[i] + '%';
+                currentTableTrElement[i].style.height = tableTrPercentage[i] + '%';
+            }
+            else {
+                currentTableTrElement[i].style.height = tableTrPercentage[i] + '%';
+            }
         }
         var args = { event: e, requestType: 'table' };
         this.parent.trigger(events.resizeStop, args);
@@ -1371,6 +1378,9 @@ var Table = /** @class */ (function () {
         if (this.popupObj) {
             this.popupObj.hide();
         }
+        if (this.parent.inlineMode.enable && this.editdlgObj) {
+            this.editdlgObj.hide();
+        }
     };
     Table.prototype.docClick = function (e) {
         var target = e.args.target;

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

@@ -21,7 +21,6 @@ export declare class ToolbarRenderer implements IRenderer {
     private currentDropdown;
     private tooltip;
     private l10n;
-    private dropdownTooltip;
     private tooltipTargetEle;
     /**
      * Constructor for toolbar renderer module

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

@@ -8,6 +8,7 @@ import * as events from '../base/constant';
 import { CLS_TOOLBAR, CLS_DROPDOWN_BTN, CLS_RTE_ELEMENTS, CLS_TB_BTN, CLS_INLINE_DROPDOWN, CLS_COLOR_CONTENT, CLS_FONT_COLOR_DROPDOWN, CLS_BACKGROUND_COLOR_DROPDOWN, CLS_COLOR_PALETTE, CLS_FONT_COLOR_PICKER, CLS_BACKGROUND_COLOR_PICKER, CLS_CUSTOM_TILE, CLS_NOCOLOR_ITEM, CLS_BULLETFORMATLIST_TB_BTN, CLS_NUMBERFORMATLIST_TB_BTN, CLS_LIST_PRIMARY_CONTENT } from '../base/classes';
 import { ColorPicker } from '@syncfusion/ej2-inputs';
 import { hasClass } from '../base/util';
+import { ToolbarStatus } from '../../editor-manager/plugin/toolbar-status';
 /**
  * `Toolbar renderer` module is used to render toolbar in RichTextEditor.
  *
@@ -65,7 +66,7 @@ var ToolbarRenderer = /** @class */ (function () {
         }
     };
     ToolbarRenderer.prototype.dropDownSelected = function (args) {
-        this.parent.notify(events.dropDownSelect, args);
+        this.parent.notify(events.dropDownSelect, { element: args.element, item: args.item, originalEvent: args.event });
         this.destroyTooltip();
     };
     ToolbarRenderer.prototype.beforeDropDownItemRender = function (args) {
@@ -89,6 +90,9 @@ var ToolbarRenderer = /** @class */ (function () {
                     break;
             }
         }
+        if (args.target.querySelector('.e-active')) {
+            args.cancel = true;
+        }
     };
     ToolbarRenderer.prototype.dropDownOpen = function (args) {
         if (args.element.parentElement.getAttribute('id').indexOf('TableCell') > -1 && !isNOU(args.element.parentElement.querySelector('.e-cell-merge')) &&
@@ -111,19 +115,6 @@ var ToolbarRenderer = /** @class */ (function () {
                 addClass([listEle[1], listEle[2]], 'e-disabled');
             }
         }
-        if (this.parent.showTooltip) {
-            this.dropdownTooltip = new Tooltip({
-                target: '[aria-owns="' + this.parent.getID() + '"].e-rte-elements [title]',
-                showTipPointer: true,
-                openDelay: 400,
-                opensOn: 'Hover',
-                beforeRender: this.tooltipBeforeRender.bind(this),
-                cssClass: this.parent.getCssClass(),
-                windowCollision: true,
-                position: 'BottomCenter'
-            });
-            this.dropdownTooltip.appendTo(args.element);
-        }
         this.parent.notify(events.selectionSave, args);
     };
     ToolbarRenderer.prototype.dropDownClose = function (args) {
@@ -269,11 +260,22 @@ var ToolbarRenderer = /** @class */ (function () {
                     }
                     //Formats preselect
                     if (args.items[0].command === 'Formats' || args.items[0].command === 'Font') {
+                        var fontName_1 = [];
+                        var formats_1 = [];
+                        _this.parent.format.types.forEach(function (item) {
+                            formats_1.push(item.value.toLocaleLowerCase());
+                        });
+                        _this.parent.fontFamily.items.forEach(function (item) {
+                            fontName_1.push(item.value);
+                        });
+                        var toolbarStatus = ToolbarStatus.get(_this.parent.contentModule.getDocument(), _this.parent.contentModule.getEditPanel(), formats_1, null, fontName_1);
                         for (var index = 0; index < args.element.childNodes.length; index++) {
                             var divNode = _this.parent.createElement('div');
                             divNode.innerHTML = dropDown.content.trim();
-                            if (divNode.textContent.trim() !== ''
-                                && args.element.childNodes[index].textContent.trim() === divNode.textContent.trim()) {
+                            if ((divNode.textContent.trim() !== ''
+                                && args.element.childNodes[index].textContent.trim() === divNode.textContent.trim()) ||
+                                ((args.items[0].command === 'Formats' && !isNOU(toolbarStatus.formats) && _this.parent.format.types[index].value.toLowerCase() === toolbarStatus.formats.toLowerCase() && args.element.childNodes[index].classList.contains(_this.parent.format.types[index].cssClass))
+                                    || (args.items[0].command === 'Font' && !isNOU(toolbarStatus.fontname) && _this.parent.fontFamily.items[index].value.toLowerCase() === toolbarStatus.fontname.toLowerCase() && args.element.childNodes[index].classList.contains(_this.parent.fontFamily.items[index].cssClass)))) {
                                 if (!args.element.childNodes[index].classList.contains('e-active')) {
                                     addClass([args.element.childNodes[index]], 'e-active');
                                 }
@@ -459,6 +461,8 @@ var ToolbarRenderer = /** @class */ (function () {
             target: colorPicker.element.parentElement, cssClass: css,
             enablePersistence: this.parent.enablePersistence, enableRtl: this.parent.enableRtl,
             beforeOpen: function (dropDownArgs) {
+                colorPicker.inline = true;
+                colorPicker.dataBind();
                 if (proxy.parent.readonly || !proxy.parent.enabled) {
                     dropDownArgs.cancel = true;
                     return;
@@ -597,18 +601,14 @@ var ToolbarRenderer = /** @class */ (function () {
         var colorPicker = new ColorPicker({
             enablePersistence: this.parent.enablePersistence,
             enableRtl: this.parent.enableRtl,
-            inline: true,
-            value: null,
-            cssClass: ((item === 'backgroundcolor') ? CLS_BACKGROUND_COLOR_PICKER : CLS_FONT_COLOR_PICKER) + ' ' + args.cssClass + ' ' + 'e-rte-picker-init',
+            inline: false,
+            value: '#fff',
             created: function () {
                 var value = (item === 'backgroundcolor') ? proxy.parent.backgroundColor.default : proxy.parent.fontColor.default;
-                colorPicker.cssClass = ((item === 'backgroundcolor') ? CLS_BACKGROUND_COLOR_PICKER : CLS_FONT_COLOR_PICKER) + ' ' + args.cssClass;
-                colorPicker.value = value;
+                colorPicker.setProperties({ value: value });
             },
             mode: ((item === 'backgroundcolor') ? proxy.parent.backgroundColor.mode : proxy.parent.fontColor.mode),
             modeSwitcher: ((item === 'backgroundcolor') ? proxy.parent.backgroundColor.modeSwitcher : proxy.parent.fontColor.modeSwitcher),
-            presetColors: (item === 'backgroundcolor') ? this.parent.backgroundColor.colorCode : this.parent.fontColor.colorCode,
-            columns: (item === 'backgroundcolor') ? this.parent.backgroundColor.columns : this.parent.fontColor.columns,
             beforeTileRender: function (args) {
                 args.element.classList.add(CLS_COLOR_PALETTE);
                 args.element.classList.add(CLS_CUSTOM_TILE);
@@ -653,6 +653,10 @@ var ToolbarRenderer = /** @class */ (function () {
             }
         });
         colorPicker.isStringTemplate = true;
+        colorPicker.columns = (item === 'backgroundcolor') ? this.parent.backgroundColor.columns : this.parent.fontColor.columns;
+        colorPicker.presetColors = (item === 'backgroundcolor') ? this.parent.backgroundColor.colorCode :
+            this.parent.fontColor.colorCode;
+        colorPicker.cssClass = ((item === 'backgroundcolor') ? CLS_BACKGROUND_COLOR_PICKER : CLS_FONT_COLOR_PICKER) + ' ' + args.cssClass;
         colorPicker.createElement = this.parent.createElement;
         colorPicker.appendTo(document.getElementById(args.target));
         return colorPicker;