@syncfusion/ej2-richtexteditor 23.2.7-52849 → 24.1.41-569421

package/src/editor-manager/plugin/toolbar-status.js

@@ -2,6 +2,7 @@ import { IsFormatted } from './isformatted';
 import * as CONSTANT from './../base/constant';
 import { NodeSelection } from './../../selection/index';
 import { getDefaultHtmlTbStatus } from './../../common/util';
+import { isNullOrUndefined } from '@syncfusion/ej2-base';
 /**
  * Update Toolbar Status
  *
@@ -16,7 +17,7 @@ var ToolbarStatus = /** @class */ (function () {
      * get method
      *
      * @param {Document} docElement - specifies the document element
-     * @param {Node} targetNode - specifies the target node
+     * @param {Node} rootNode - specifies the content editable element
      * @param {string[]} formatNode - specifies the format node
      * @param {string[]} fontSize - specifies the font size
      * @param {string[]} fontName - specifies the font name.
@@ -25,7 +26,7 @@ var ToolbarStatus = /** @class */ (function () {
      * @hidden
      * @deprecated
      */
-    ToolbarStatus.get = function (docElement, targetNode, formatNode, fontSize, fontName, documentNode) {
+    ToolbarStatus.get = function (docElement, rootNode, formatNode, fontSize, fontName, documentNode) {
         var formatCollection = JSON.parse(JSON.stringify(statusCollection));
         var nodeCollection = JSON.parse(JSON.stringify(statusCollection));
         var nodeSelection = new NodeSelection();
@@ -55,7 +56,7 @@ var ToolbarStatus = /** @class */ (function () {
         }
         for (var index = 0; index < nodes.length; index++) {
             // eslint-disable-next-line max-len
-            formatCollection = this.getFormatParent(docElement, formatCollection, nodes[index], targetNode, formatNode, fontSize, fontName);
+            formatCollection = this.getFormatParent(docElement, formatCollection, nodes[index], rootNode, formatNode, fontSize, fontName);
             if ((index === 0 && formatCollection.bold) || !formatCollection.bold) {
                 nodeCollection.bold = formatCollection.bold;
             }
@@ -130,16 +131,24 @@ var ToolbarStatus = /** @class */ (function () {
         return node;
     };
     ToolbarStatus.getFormatParent = function (docElement, formatCollection, node, targetNode, formatNode, fontSize, fontName) {
+        var isListUpdated = false;
+        var isComplexListUpdated = false;
         if (targetNode.contains(node) ||
             (node.nodeType === 3 && targetNode.nodeType !== 3 && targetNode.contains(node.parentNode))) {
             do {
-                formatCollection = this.isFormattedNode(docElement, formatCollection, node, formatNode, fontSize, fontName);
+                formatCollection = this.isFormattedNode(docElement, formatCollection, node, isListUpdated, isComplexListUpdated, formatNode, fontSize, fontName);
+                if (formatCollection.orderedlist || formatCollection.unorderedlist) {
+                    isListUpdated = true;
+                }
+                if (formatCollection.bulletFormatList || formatCollection.numberFormatList) {
+                    isComplexListUpdated = true;
+                }
                 node = node.parentNode;
             } while (node && (node !== targetNode));
         }
         return formatCollection;
     };
-    ToolbarStatus.isFormattedNode = function (docElement, formatCollection, node, formatNode, fontSize, fontName) {
+    ToolbarStatus.isFormattedNode = function (docElement, formatCollection, node, isListUpdated, isComplexListUpdated, formatNode, fontSize, fontName) {
         if (!formatCollection.bold) {
             formatCollection.bold = IsFormatted.isBold(node);
         }
@@ -170,10 +179,10 @@ var ToolbarStatus = /** @class */ (function () {
         if (!formatCollection.backgroundcolor) {
             formatCollection.backgroundcolor = this.isBackgroundColor(node);
         }
-        if (!formatCollection.orderedlist) {
+        if (!formatCollection.orderedlist && !isListUpdated) {
             formatCollection.orderedlist = this.isOrderedList(node);
         }
-        if (!formatCollection.unorderedlist) {
+        if (!formatCollection.unorderedlist && !isListUpdated) {
             formatCollection.unorderedlist = this.isUnorderedList(node);
         }
         if (!formatCollection.alignments) {
@@ -188,10 +197,10 @@ var ToolbarStatus = /** @class */ (function () {
         if (!formatCollection.createlink) {
             formatCollection.createlink = this.isLink(node);
         }
-        if (!formatCollection.numberFormatList) {
+        if (!formatCollection.numberFormatList && !isComplexListUpdated) {
             formatCollection.numberFormatList = this.isNumberFormatList(node);
         }
-        if (!formatCollection.bulletFormatList) {
+        if (!formatCollection.bulletFormatList && !isComplexListUpdated) {
             formatCollection.bulletFormatList = this.isBulletFormatList(node);
         }
         return formatCollection;
@@ -250,7 +259,8 @@ var ToolbarStatus = /** @class */ (function () {
                 // eslint-disable-next-line
                 var pattern = new RegExp(name, 'i');
                 if ((value.replace(/"/g, '').replace(/ /g, '').toLowerCase() === name.replace(/"/g, '').replace(/ /g, '').toLowerCase()) ||
-                    (value.split(',')[0] && value.split(',')[0].search(pattern) > -1)) {
+                    (value.split(',')[0] && !isNullOrUndefined(value.split(',')[0].trim().match(pattern)) &&
+                        value.split(',')[0].trim() === value.split(',')[0].trim().match(pattern)[0])) {
                     index = pos;
                 }
             }) && (index !== null)))) {

package/src/editor-manager/plugin/undo.d.ts

@@ -39,6 +39,7 @@ export declare class UndoRedoManager {
     private keyDown;
     private keyUp;
     private getTextContentFromFragment;
+    private isElementStructureEqual;
     /**
      * RTE collection stored html format.
      *

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

@@ -98,6 +98,25 @@ var UndoRedoManager = /** @class */ (function () {
         }
         return textContent;
     };
+    UndoRedoManager.prototype.isElementStructureEqual = function (previousFragment, currentFragment) {
+        if (previousFragment.childNodes.length !== currentFragment.childNodes.length) {
+            return false;
+        }
+        for (var i = 0; i < previousFragment.childNodes.length; i++) {
+            var previousFragmentNode = previousFragment.childNodes[i];
+            var currentFragmentNode = currentFragment.childNodes[i];
+            if (!previousFragmentNode || !currentFragmentNode) {
+                return false;
+            }
+            if (previousFragmentNode.nodeType !== currentFragmentNode.nodeType) {
+                return false;
+            }
+            if (previousFragmentNode.outerHTML !== currentFragmentNode.outerHTML) {
+                return false;
+            }
+        }
+        return true;
+    };
     /**
      * RTE collection stored html format.
      *
@@ -134,7 +153,8 @@ var UndoRedoManager = /** @class */ (function () {
             (this.undoRedoStack[this.undoRedoStack.length - 1].range.endOffset === save.range.endOffset) &&
             (this.undoRedoStack[this.undoRedoStack.length - 1].range.range.startContainer === save.range.startContainer) &&
             (this.getTextContentFromFragment(this.undoRedoStack[this.undoRedoStack.length - 1].text).trim() ===
-                this.getTextContentFromFragment(changEle.text).trim())) {
+                this.getTextContentFromFragment(changEle.text).trim()) &&
+            this.isElementStructureEqual(this.undoRedoStack[this.undoRedoStack.length - 1].text, changEle.text)) {
             return;
         }
         this.undoRedoStack.push(changEle);

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

@@ -1,5 +1,5 @@
 import { Popup } from '@syncfusion/ej2-popups';
-import { IRichTextEditor } from '../base/interface';
+import { IRichTextEditor, IBaseQuickToolbar } from '../base/interface';
 import { IToolbarItems, IQuickToolbarOptions } from '../base/interface';
 import { ServiceLocator } from '../services/service-locator';
 import { BaseToolbar } from './base-toolbar';
@@ -7,10 +7,10 @@ import { RichTextEditorModel } from '../base/rich-text-editor-model';
 /**
  * `Quick toolbar` module is used to handle Quick toolbar actions.
  */
-export declare class BaseQuickToolbar {
+export declare class BaseQuickToolbar implements IBaseQuickToolbar {
     popupObj: Popup;
     element: HTMLElement;
-    private isDOMElement;
+    isRendered: boolean;
     quickTBarObj: BaseToolbar;
     private stringItems;
     private dropDownButtons;
@@ -48,6 +48,7 @@ export declare class BaseQuickToolbar {
      * @deprecated
      */
     showPopup(x: number, y: number, target: Element, type?: string): void;
+    private tooltipBeforeRender;
     /**
      * hidePopup method
      *

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

@@ -15,7 +15,7 @@ var BaseQuickToolbar = /** @class */ (function () {
     function BaseQuickToolbar(parent, locator) {
         this.parent = parent;
         this.locator = locator;
-        this.isDOMElement = false;
+        this.isRendered = false;
         this.renderFactory = this.locator.getService('rendererFactory');
         this.contentRenderer = this.renderFactory.getRenderer(RenderType.Content);
         this.popupRenderer = this.renderFactory.getRenderer(RenderType.Popup);
@@ -24,6 +24,9 @@ var BaseQuickToolbar = /** @class */ (function () {
     }
     BaseQuickToolbar.prototype.appendPopupContent = function () {
         this.toolbarElement = this.parent.createElement('div', { className: classes.CLS_QUICK_TB });
+        if (this.element.classList.contains(classes.CLS_TEXT_POP)) {
+            this.toolbarElement.classList.add(classes.CLS_TEXT_QUICK_TB);
+        }
         this.element.appendChild(this.toolbarElement);
     };
     /**
@@ -76,7 +79,18 @@ var BaseQuickToolbar = /** @class */ (function () {
             e.target.classList.contains('e-imgbreak')) ? false : true;
         var target = !isNOU(imgWrapper) ? imgWrapper : e.target;
         addClass([this.toolbarElement], [classes.CLS_RM_WHITE_SPACE]);
-        var targetOffsetTop = target.offsetTop;
+        var targetOffsetTop;
+        if (!isNOU(closest(target, 'table'))) {
+            targetOffsetTop = target.offsetTop;
+            var parentTable = closest(target, 'table');
+            while (!isNOU(parentTable)) {
+                targetOffsetTop += parentTable.offsetTop;
+                parentTable = closest(parentTable.parentElement, 'table');
+            }
+        }
+        else {
+            targetOffsetTop = (target.classList.contains("e-rte-audio")) ? target.parentElement.offsetTop : target.offsetTop;
+        }
         var parentOffsetTop = window.pageYOffset + e.parentData.top;
         if ((targetOffsetTop - e.editTop) > e.popHeight) {
             y = parentOffsetTop + e.tBarElementHeight + (targetOffsetTop - e.editTop) - e.popHeight - 5;
@@ -88,11 +102,23 @@ var BaseQuickToolbar = /** @class */ (function () {
             y = e.y;
         }
         target = isAligned ? e.target : target;
+        var targetOffsetLeft;
+        if (!isNOU(closest(target, 'table'))) {
+            targetOffsetLeft = target.offsetLeft;
+            var parentTable = closest(target.parentElement, 'td');
+            while (!isNOU(parentTable)) {
+                targetOffsetLeft += parentTable.offsetLeft;
+                parentTable = closest(parentTable.parentElement, 'table');
+            }
+        }
+        else {
+            targetOffsetLeft = (target.classList.contains("e-rte-audio")) ? target.parentElement.offsetLeft : target.offsetLeft;
+        }
         if (target.offsetWidth > e.popWidth) {
-            x = (target.offsetWidth / 2) - (e.popWidth / 2) + e.parentData.left + target.offsetLeft;
+            x = (target.offsetWidth / 2) - (e.popWidth / 2) + e.parentData.left + targetOffsetLeft;
         }
         else {
-            x = e.parentData.left + target.offsetLeft;
+            x = e.parentData.left + targetOffsetLeft;
         }
         this.popupObj.position.X = ((x + e.popWidth) > e.parentData.right) ? e.parentData.right - e.popWidth : x;
         this.popupObj.position.Y = (y >= 0) ? y : e.y + 5;
@@ -216,18 +242,23 @@ var BaseQuickToolbar = /** @class */ (function () {
                     editPanelTop = (cntEle) ? cntEle.scrollTop : 0;
                     editPanelHeight = (cntEle) ? cntEle.offsetHeight : 0;
                 }
-                if (!_this.parent.inlineMode.enable && !closest(target, 'table') && type !== 'text') {
+                if ((!_this.parent.inlineMode.enable && !closest(target, 'table') && type !== 'text' && type !== 'link') || target.tagName === 'IMG') {
                     _this.parent.disableToolbarItem(_this.parent.toolbarSettings.items);
                     _this.parent.enableToolbarItem(['Undo', 'Redo']);
                 }
+                else {
+                    _this.parent.enableToolbarItem(_this.parent.toolbarSettings.items);
+                }
                 append([_this.element], document.body);
                 if (_this.parent.showTooltip) {
                     _this.tooltip = new Tooltip({
                         target: '#' + _this.element.id + ' [title]',
                         openDelay: 400,
                         showTipPointer: true,
+                        beforeRender: _this.tooltipBeforeRender.bind(_this),
                         windowCollision: true,
-                        position: 'BottomCenter'
+                        position: 'BottomCenter',
+                        cssClass: _this.parent.getCssClass()
                     });
                     _this.tooltip.appendTo(_this.element);
                 }
@@ -261,9 +292,9 @@ var BaseQuickToolbar = /** @class */ (function () {
                     parentData: parent_1.getBoundingClientRect(),
                     tBarElementHeight: tBarHeight
                 };
-                if (target.tagName === 'IMG' || target.tagName === 'AUDIO' || target.tagName === 'VIDEO' || target.tagName === 'IFRAME' || (target.classList &&
+                if ((closest(target, 'TABLE') || target.tagName === 'IMG' || target.tagName === 'AUDIO' || target.tagName === 'VIDEO' || target.tagName === 'IFRAME' || (target.classList &&
                     (target.classList.contains(classes.CLS_AUDIOWRAP) || target.classList.contains(classes.CLS_CLICKELEM) ||
-                        target.classList.contains(classes.CLS_VID_CLICK_ELEM)))) {
+                        target.classList.contains(classes.CLS_VID_CLICK_ELEM)))) && (x == beforeQuickToolbarArgs.positionX || y == beforeQuickToolbarArgs.positionY)) {
                     _this.setPosition(showPopupData);
                 }
                 if (!_this.parent.inlineMode.enable) {
@@ -281,10 +312,15 @@ var BaseQuickToolbar = /** @class */ (function () {
                     maxWidth: window.outerWidth + 'px'
                 });
                 addClass([_this.element], [classes.CLS_POP]);
-                _this.isDOMElement = true;
+                _this.isRendered = true;
             }
         });
     };
+    BaseQuickToolbar.prototype.tooltipBeforeRender = function (args) {
+        if (args.target.querySelector('.e-active')) {
+            args.cancel = true;
+        }
+    };
     /**
      * hidePopup method
      *
@@ -318,7 +354,7 @@ var BaseQuickToolbar = /** @class */ (function () {
             }
         }
         this.removeEleFromDOM();
-        this.isDOMElement = false;
+        this.isRendered = false;
     };
     /**
      * @param {string} item - specifies the string value
@@ -341,7 +377,7 @@ var BaseQuickToolbar = /** @class */ (function () {
     };
     BaseQuickToolbar.prototype.removeEleFromDOM = function () {
         var element = this.popupObj.element;
-        if (this.isDOMElement) {
+        if (this.isRendered) {
             this.dropDownButtons.destroyDropDowns();
             this.colorPickerObj.destroyColorPicker();
             removeClass([this.element], [classes.CLS_POP]);
@@ -359,7 +395,18 @@ var BaseQuickToolbar = /** @class */ (function () {
             tbItems: this.quickTBarObj.toolbarObj.items
         };
         setToolbarStatus(options, true, this.parent);
-        if (!select('.e-rte-srctextarea', this.parent.element)) {
+        if (this.parent.quickToolbarSettings.text && this.parent.quickToolbarModule.textQTBar) {
+            var options_1 = {
+                args: args,
+                dropDownModule: this.parent.quickToolbarModule.textQTBar.dropDownButtons,
+                parent: this.parent,
+                tbElements: selectAll('.' + classes.CLS_TB_ITEM, this.parent.quickToolbarModule.textQTBar.element),
+                tbItems: this.parent.quickToolbarModule.textQTBar.quickTBarObj.toolbarObj.items
+            };
+            setToolbarStatus(options_1, true, this.parent);
+            updateUndoRedoStatus(this.parent.quickToolbarModule.textQTBar.quickTBarObj, this.parent.formatter.editorManager.undoRedoManager.getUndoStatus());
+        }
+        if (!select('.' + classes.CLS_RTE_SOURCE_CODE_TXTAREA, this.parent.element)) {
             updateUndoRedoStatus(this.parent.getBaseToolbarObject(), this.parent.formatter.editorManager.undoRedoManager.getUndoStatus());
         }
     };
@@ -391,7 +438,7 @@ var BaseQuickToolbar = /** @class */ (function () {
         }
         this.parent.on(events.destroy, this.destroy, this);
         this.parent.on(events.modelChanged, this.onPropertyChanged, this);
-        if (this.parent.inlineMode.enable) {
+        if (this.parent.inlineMode.enable || this.parent.quickToolbarSettings.text) {
             this.parent.on(events.toolbarUpdated, this.updateStatus, this);
         }
     };
@@ -433,7 +480,7 @@ var BaseQuickToolbar = /** @class */ (function () {
         }
         this.parent.off(events.destroy, this.destroy);
         this.parent.off(events.modelChanged, this.onPropertyChanged);
-        if (this.parent.inlineMode.enable) {
+        if (this.parent.inlineMode.enable || this.parent.quickToolbarSettings.text) {
             this.parent.off(events.toolbarUpdated, this.updateStatus);
         }
     };

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

@@ -1,9 +1,9 @@
 import { RenderType } from '../base/enum';
 import { CLS_HR_SEPARATOR } from '../base/classes';
 import * as events from '../base/constant';
-import { getTooltipText, isIDevice, toObjectLowerCase } from '../base/util';
+import { getTooltipText, toObjectLowerCase } from '../base/util';
 import { tools, templateItems, windowKeys } from '../models/items';
-import { isNullOrUndefined, extend, Browser } from '@syncfusion/ej2-base';
+import { isNullOrUndefined, extend } from '@syncfusion/ej2-base';
 /**
  * `Toolbar` module is used to handle Toolbar actions.
  */
@@ -107,23 +107,13 @@ var BaseToolbar = /** @class */ (function () {
                 case '-':
                     return { type: 'Separator', cssClass: CLS_HR_SEPARATOR };
                 default:
-                    if (this.parent.showTooltip) {
-                        return {
-                            id: this.parent.getID() + '_' + container + '_' + this.tools[itemStr.toLocaleLowerCase()].id,
-                            prefixIcon: this.tools[itemStr.toLocaleLowerCase()].icon,
-                            tooltipText: getTooltipText(itemStr, this.locator),
-                            command: this.tools[itemStr.toLocaleLowerCase()].command,
-                            subCommand: this.tools[itemStr.toLocaleLowerCase()].subCommand
-                        };
-                    }
-                    else {
-                        return {
-                            id: this.parent.getID() + '_' + container + '_' + this.tools[itemStr.toLocaleLowerCase()].id,
-                            prefixIcon: this.tools[itemStr.toLocaleLowerCase()].icon,
-                            command: this.tools[itemStr.toLocaleLowerCase()].command,
-                            subCommand: this.tools[itemStr.toLocaleLowerCase()].subCommand
-                        };
-                    }
+                    return {
+                        id: this.parent.getID() + '_' + container + '_' + this.tools[itemStr.toLocaleLowerCase()].id,
+                        prefixIcon: this.tools[itemStr.toLocaleLowerCase()].icon,
+                        tooltipText: getTooltipText(itemStr, this.locator),
+                        command: this.tools[itemStr.toLocaleLowerCase()].command,
+                        subCommand: this.tools[itemStr.toLocaleLowerCase()].subCommand
+                    };
             }
         }
     };
@@ -154,10 +144,14 @@ var BaseToolbar = /** @class */ (function () {
                                 _this.parent.formatter.saveData();
                             }
                             callback_1.call(_this);
-                            var currentContentElem = _this.parent.createElement('div');
-                            currentContentElem.appendChild(_this.parent.formatter.getUndoRedoStack()[_this.parent.formatter.getUndoRedoStack().length - 1].text);
-                            if (currentContentElem.innerHTML.trim() === _this.parent.inputElement.innerHTML.trim()) {
-                                return;
+                            if (_this.parent.formatter.getUndoRedoStack().length > 0) {
+                                var currentContentElem = _this.parent.createElement('div');
+                                var stackItem = _this.parent.formatter.getUndoRedoStack()[_this.parent.formatter.getUndoRedoStack().length - 1];
+                                var clonedItem = (stackItem.text).cloneNode(true);
+                                currentContentElem.appendChild(clonedItem);
+                                if (currentContentElem.innerHTML.trim() === _this.parent.inputElement.innerHTML.trim()) {
+                                    return;
+                                }
                             }
                             if (proxy_1.undo) {
                                 _this.parent.formatter.saveData();
@@ -172,17 +166,22 @@ var BaseToolbar = /** @class */ (function () {
             var item = tbItems_1[_i];
             _loop_1(item);
         }
-        for (var num = 0; num < items.length; num++) {
-            var tooltipText = items[num].tooltipText;
-            var shortCutKey = void 0;
-            if (windowKeys["" + tooltipText]) {
-                shortCutKey = Browser.isDevice && isIDevice() ? windowKeys["" + tooltipText].replace('Ctrl', 'Cmd') : windowKeys["" + tooltipText];
-            }
-            else {
-                shortCutKey = tooltipText;
-            }
-            if (shortCutKey) {
-                items[num].tooltipText = (tooltipText !== shortCutKey) ? tooltipText + ' (' + shortCutKey + ')' : tooltipText;
+        if (this.parent.showTooltip) {
+            for (var num = 0; num < items.length; num++) {
+                var tooltipText = items[num].tooltipText;
+                var shortCutKey = void 0;
+                var isMacDev = window.navigator.platform.toLocaleLowerCase().includes('mac');
+                if (windowKeys["" + tooltipText]) {
+                    shortCutKey = isMacDev ? windowKeys["" + tooltipText].replace('Ctrl+', '⌘').replace('Shift+', '⇧').replace('Alt+', '⌥') : windowKeys["" + tooltipText];
+                }
+                else {
+                    shortCutKey = tooltipText;
+                }
+                if (shortCutKey) {
+                    if (!(items[num].command === "Images" && items[num].subCommand === "InsertLink")) {
+                        items[num].tooltipText = (tooltipText !== shortCutKey) ? (isMacDev) ? shortCutKey : tooltipText + ' (' + shortCutKey + ')' : tooltipText;
+                    }
+                }
             }
         }
         return items;

package/src/rich-text-editor/actions/color-picker.d.ts

@@ -39,6 +39,7 @@ export declare class ColorPickerInput {
     private setCssClass;
     private updateCss;
     protected addEventListener(): void;
+    private showColorPicker;
     private onPropertyChanged;
     protected removeEventListener(): void;
 }

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

@@ -58,7 +58,7 @@ var ColorPickerInput = /** @class */ (function () {
                         document.body.appendChild(fontNode);
                         options = {
                             cssClass: _this.tools[item.toLocaleLowerCase()].icon
-                                + ' ' + classes.CLS_RTE_ELEMENTS + ' ' + classes.CLS_ICONS + ' ' + _this.parent.cssClass,
+                                + ' ' + classes.CLS_RTE_ELEMENTS + ' ' + classes.CLS_ICONS + _this.parent.getCssClass(true),
                             value: _this.tools[item.toLocaleLowerCase()].value,
                             command: _this.tools[item.toLocaleLowerCase()].command,
                             subCommand: _this.tools[item.toLocaleLowerCase()].subCommand,
@@ -85,7 +85,7 @@ var ColorPickerInput = /** @class */ (function () {
                         document.body.appendChild(backNode);
                         options = {
                             cssClass: _this.tools[item.toLocaleLowerCase()].icon
-                                + ' ' + classes.CLS_RTE_ELEMENTS + ' ' + classes.CLS_ICONS + ' ' + _this.parent.cssClass,
+                                + ' ' + classes.CLS_RTE_ELEMENTS + ' ' + classes.CLS_ICONS + _this.parent.getCssClass(true),
                             value: _this.tools[item.toLocaleLowerCase()].value,
                             command: _this.tools[item.toLocaleLowerCase()].command,
                             subCommand: _this.tools[item.toLocaleLowerCase()].subCommand,
@@ -100,7 +100,7 @@ var ColorPickerInput = /** @class */ (function () {
             }
         });
         if (this.parent.inlineMode.enable) {
-            this.setCssClass({ cssClass: this.parent.cssClass });
+            this.setCssClass({ cssClass: this.parent.getCssClass() });
         }
     };
     ColorPickerInput.prototype.destroy = function () {
@@ -170,6 +170,15 @@ var ColorPickerInput = /** @class */ (function () {
         this.parent.on(events.destroyColorPicker, this.destroyColorPicker, this);
         this.parent.on(events.modelChanged, this.onPropertyChanged, this);
         this.parent.on(events.bindCssClass, this.setCssClass, this);
+        this.parent.on(events.showColorPicker, this.showColorPicker, this);
+    };
+    ColorPickerInput.prototype.showColorPicker = function (e) {
+        if (!isNullOrUndefined(this.fontColorPicker) && (e.toolbarClick === "fontcolor")) {
+            this.fontColorDropDown.toggle();
+        }
+        else if (!isNullOrUndefined(this.backgroundColorPicker) && (e.toolbarClick === "backgroundcolor")) {
+            this.backgroundColorDropDown.toggle();
+        }
     };
     ColorPickerInput.prototype.onPropertyChanged = function (model) {
         var newProp = model.newProp;
@@ -243,6 +252,7 @@ var ColorPickerInput = /** @class */ (function () {
         this.parent.off(events.destroyColorPicker, this.destroyColorPicker);
         this.parent.off(events.modelChanged, this.onPropertyChanged);
         this.parent.off(events.bindCssClass, this.setCssClass);
+        this.parent.off(events.showColorPicker, this.showColorPicker);
     };
     return ColorPickerInput;
 }());

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

@@ -35,7 +35,7 @@ var Count = /** @class */ (function () {
     };
     Count.prototype.appendCount = function () {
         var htmlText = this.parent.editorMode === 'Markdown' ? this.editPanel.value :
-            this.editPanel.textContent;
+            (this.parent.getText().replace(/(\r\n|\n|\r|\t)/gm, ''));
         if (this.parent.editorMode !== 'Markdown' && htmlText.indexOf('\u200B') !== -1) {
             this.htmlLength = htmlText.replace(/\u200B/g, '').length;
         }

package/src/rich-text-editor/actions/dropdown-buttons.d.ts

@@ -16,6 +16,7 @@ export declare class DropDownButtons {
     displayDropDown: DropDownButton;
     tableRowsDropDown: DropDownButton;
     tableColumnsDropDown: DropDownButton;
+    tableCellDropDown: DropDownButton;
     tableCellVerticalAlignDropDown: DropDownButton;
     /**
      *

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

@@ -134,7 +134,7 @@ var DropDownButtons = /** @class */ (function () {
                         if (isNullOrUndefined(targetElement) || targetElement.classList.contains(classes.CLS_DROPDOWN_BTN)) {
                             return;
                         }
-                        var fontsize = _this.parent.fontSize.items.slice();
+                        var fontsize = !isNullOrUndefined(_this.fontSizeDropDown) && !isNullOrUndefined(_this.fontSizeDropDown.items) && _this.fontSizeDropDown.items.length > 0 ? _this.fontSizeDropDown.items : JSON.parse(JSON.stringify(_this.parent.fontSize.items.slice()));
                         fontsize.forEach(function (item) {
                             Object.defineProperties(item, {
                                 command: { value: 'Font', enumerable: true }, subCommand: { value: 'FontSize', enumerable: true }
@@ -191,7 +191,7 @@ var DropDownButtons = /** @class */ (function () {
             }
         });
         if (this.parent.inlineMode.enable) {
-            this.setCssClass({ cssClass: this.parent.cssClass });
+            this.setCssClass({ cssClass: this.parent.getCssClass() });
         }
     };
     DropDownButtons.prototype.getUpdateItems = function (items, value) {
@@ -333,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',
@@ -441,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();
@@ -494,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);
@@ -512,7 +516,9 @@ var DropDownButtons = /** @class */ (function () {
         this.parent.on(events.bindCssClass, this.setCssClass, this);
     };
     DropDownButtons.prototype.onIframeMouseDown = function () {
-        dispatchEvent(document, 'mousedown');
+        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');
+        }
     };
     DropDownButtons.prototype.removeEventListener = function () {
         if (this.parent.isDestroyed) {