@syncfusion/ej2-richtexteditor 23.2.7 → 24.1.41-569421

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);
     };
     /**
@@ -32,7 +35,7 @@ var BaseQuickToolbar = /** @class */ (function () {
      * @param {IQuickToolbarOptions} args - specifies the arguments
      * @returns {void}
      * @hidden
-
+     * @deprecated
      */
     BaseQuickToolbar.prototype.render = function (args) {
         var className;
@@ -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;
@@ -183,7 +209,7 @@ var BaseQuickToolbar = /** @class */ (function () {
      * @param {string} type - specifies the type
      * @returns {void}
      * @hidden
-
+     * @deprecated
      */
     BaseQuickToolbar.prototype.showPopup = function (x, y, target, type) {
         var _this = this;
@@ -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,16 +312,21 @@ 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
      *
      * @returns {void}
      * @hidden
-
+     * @deprecated
      */
     BaseQuickToolbar.prototype.hidePopup = function () {
         var viewSourcePanel = this.parent.sourceCodeModule.getViewPanel();
@@ -318,14 +354,14 @@ var BaseQuickToolbar = /** @class */ (function () {
             }
         }
         this.removeEleFromDOM();
-        this.isDOMElement = false;
+        this.isRendered = false;
     };
     /**
      * @param {string} item - specifies the string value
      * @param {number} index - specifies the index value
      * @returns {void}
      * @hidden
-
+     * @deprecated
      */
     BaseQuickToolbar.prototype.addQTBarItem = function (item, index) {
         this.quickTBarObj.toolbarObj.addItems(this.quickTBarObj.getItems(item, 'toolbar'), index);
@@ -334,14 +370,14 @@ var BaseQuickToolbar = /** @class */ (function () {
      * @param {number} index - specifies the index value
      * @returns {void}
      * @hidden
-
+     * @deprecated
      */
     BaseQuickToolbar.prototype.removeQTBarItem = function (index) {
         this.quickTBarObj.toolbarObj.removeItems(index);
     };
     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());
         }
     };
@@ -369,7 +416,7 @@ var BaseQuickToolbar = /** @class */ (function () {
      * @function destroy
      * @returns {void}
      * @hidden
-
+     * @deprecated
      */
     BaseQuickToolbar.prototype.destroy = function () {
         if (this.popupObj && !this.popupObj.isDestroyed) {
@@ -383,7 +430,7 @@ var BaseQuickToolbar = /** @class */ (function () {
      *
      * @returns {void}
      * @hidden
-
+     * @deprecated
      */
     BaseQuickToolbar.prototype.addEventListener = function () {
         if (this.parent.isDestroyed) {
@@ -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);
         }
     };
@@ -401,7 +448,7 @@ var BaseQuickToolbar = /** @class */ (function () {
      * @param {RichTextEditorModel} e - specifies the model element
      * @returns {void}
      * @hidden
-
+     * @deprecated
      */
     BaseQuickToolbar.prototype.onPropertyChanged = function (e) {
         if (!isNullOrUndefined(e.newProp.inlineMode)) {
@@ -425,7 +472,7 @@ var BaseQuickToolbar = /** @class */ (function () {
      *
      * @returns {void}
      * @hidden
-
+     * @deprecated
      */
     BaseQuickToolbar.prototype.removeEventListener = function () {
         if (this.parent.isDestroyed) {
@@ -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.d.ts

@@ -32,7 +32,7 @@ export declare class BaseToolbar {
      * @param {string} container - specifies the value of string
      * @returns {IToolbarItemModel} - returns the model element
      * @hidden
-
+     * @deprecated
      */
     getObject(item: string, container: string): IToolbarItemModel;
     /**
@@ -40,7 +40,7 @@ export declare class BaseToolbar {
      * @param {string} container - specifies the container value
      * @returns {ItemModel} - retunrs the model element
      * @hidden
-
+     * @deprecated
      */
     getItems(tbItems: (string | IToolbarItems)[], container: string): ItemModel[];
     private getToolbarOptions;
@@ -50,7 +50,7 @@ export declare class BaseToolbar {
      * @param {IToolbarRenderOptions} args - specifies the toolbar options
      * @returns {void}
      * @hidden
-
+     * @deprecated
      */
     render(args: IToolbarRenderOptions): void;
 }

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.
  */
@@ -93,7 +93,7 @@ var BaseToolbar = /** @class */ (function () {
      * @param {string} container - specifies the value of string
      * @returns {IToolbarItemModel} - returns the model element
      * @hidden
-
+     * @deprecated
      */
     BaseToolbar.prototype.getObject = function (item, container) {
         var itemStr = item.toLowerCase();
@@ -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
+                    };
             }
         }
     };
@@ -132,7 +122,7 @@ var BaseToolbar = /** @class */ (function () {
      * @param {string} container - specifies the container value
      * @returns {ItemModel} - retunrs the model element
      * @hidden
-
+     * @deprecated
      */
     BaseToolbar.prototype.getItems = function (tbItems, container) {
         var _this = this;
@@ -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;
@@ -204,7 +203,7 @@ var BaseToolbar = /** @class */ (function () {
      * @param {IToolbarRenderOptions} args - specifies the toolbar options
      * @returns {void}
      * @hidden
-
+     * @deprecated
      */
     BaseToolbar.prototype.render = function (args) {
         this.toolbarRenderer = this.renderFactory.getRenderer(RenderType.Toolbar);

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

@@ -23,7 +23,7 @@ export declare class ColorPickerInput {
      * @param {IColorPickerRenderArgs} args - specify the arguments.
      * @returns {void}
      * @hidden
-
+     * @deprecated
      */
     renderColorPickerInput(args: IColorPickerRenderArgs): void;
     private destroy;
@@ -32,13 +32,14 @@ export declare class ColorPickerInput {
      *
      * @returns {void}
      * @hidden
-
+     * @deprecated
      */
     destroyColorPicker(): void;
     private setRtl;
     private setCssClass;
     private updateCss;
     protected addEventListener(): void;
+    private showColorPicker;
     private onPropertyChanged;
     protected removeEventListener(): void;
 }

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

@@ -30,7 +30,7 @@ var ColorPickerInput = /** @class */ (function () {
      * @param {IColorPickerRenderArgs} args - specify the arguments.
      * @returns {void}
      * @hidden
-
+     * @deprecated
      */
     ColorPickerInput.prototype.renderColorPickerInput = function (args) {
         var _this = this;
@@ -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 () {
@@ -112,7 +112,7 @@ var ColorPickerInput = /** @class */ (function () {
      *
      * @returns {void}
      * @hidden
-
+     * @deprecated
      */
     ColorPickerInput.prototype.destroyColorPicker = function () {
         if (this.fontColorPicker && !this.fontColorPicker.isDestroyed) {
@@ -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.d.ts

@@ -22,7 +22,7 @@ export declare class Count {
      *
      * @returns {void}
      * @hidden
-
+     * @deprecated
      */
     renderCount(): void;
     private appendCount;
@@ -30,7 +30,7 @@ export declare class Count {
     /**
      * @returns {void}
      * @hidden
-
+     * @deprecated
      */
     refresh(): void;
     /**
@@ -39,7 +39,7 @@ export declare class Count {
      * @function destroy
      * @returns {void}
      * @hidden
-
+     * @deprecated
      */
     destroy(): void;
     private toggle;

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

@@ -22,7 +22,7 @@ var Count = /** @class */ (function () {
      *
      * @returns {void}
      * @hidden
-
+     * @deprecated
      */
     Count.prototype.renderCount = function () {
         this.initializeInstance();
@@ -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;
         }
@@ -63,7 +63,7 @@ var Count = /** @class */ (function () {
     /**
      * @returns {void}
      * @hidden
-
+     * @deprecated
      */
     Count.prototype.refresh = function () {
         if (!isNullOrUndefined(this.editPanel)) {
@@ -79,7 +79,7 @@ var Count = /** @class */ (function () {
      * @function destroy
      * @returns {void}
      * @hidden
-
+     * @deprecated
      */
     Count.prototype.destroy = function () {
         if (this.element && !isNullOrUndefined(this.parent.element.querySelector('.' + CLS_COUNT))) {

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;
     /**
      *
@@ -36,7 +37,7 @@ export declare class DropDownButtons {
      * @param {IDropDownRenderArgs} args - specifies the arguments
      * @returns {void}
      * @hidden
-
+     * @deprecated
      */
     renderDropDowns(args: IDropDownRenderArgs): void;
     private getUpdateItems;
@@ -55,7 +56,7 @@ export declare class DropDownButtons {
      *
      * @returns {void}
      * @hidden
-
+     * @deprecated
      */
     destroyDropDowns(): void;
     private setRtl;

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

@@ -39,7 +39,7 @@ var DropDownButtons = /** @class */ (function () {
      * @param {IDropDownRenderArgs} args - specifies the arguments
      * @returns {void}
      * @hidden
-
+     * @deprecated
      */
     DropDownButtons.prototype.renderDropDowns = function (args) {
         var _this = this;
@@ -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',
@@ -406,7 +406,7 @@ var DropDownButtons = /** @class */ (function () {
      *
      * @returns {void}
      * @hidden
-
+     * @deprecated
      */
     DropDownButtons.prototype.destroyDropDowns = function () {
         if (this.formatDropDown) {
@@ -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) {

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

@@ -21,7 +21,7 @@ export declare class EmojiPicker {
      * @function destroy
      * @returns {void}
      * @hidden
-
+     * @deprecated
      */
     destroy(): void;
     protected addEventListener(): void;