@syncfusion/ej2-richtexteditor 24.2.8 → 25.1.35

package/src/editor-manager/plugin/ms-word-clean-up.js

@@ -1,5 +1,5 @@
 import * as EVENTS from '../../common/constant';
-import { createElement, isNullOrUndefined as isNOU, detach, addClass } from '@syncfusion/ej2-base';
+import { createElement, isNullOrUndefined as isNOU, detach, addClass, Browser } from '@syncfusion/ej2-base';
 import { PASTE_SOURCE } from '../base/constant';
 /**
  * PasteCleanup for MsWord content
@@ -61,6 +61,7 @@ var MsWordPaste = /** @class */ (function () {
         var elm = createElement('p');
         elm.setAttribute('id', 'MSWord-Content');
         elm.innerHTML = tempHTMLContent;
+        this.addDoubleBr(elm);
         var patern = /class='?Mso|style='[^ ]*\bmso-/i;
         var patern2 = /class="?Mso|style="[^ ]*\bmso-/i;
         var patern3 = /(class="?Mso|class='?Mso|class="?Xl|class='?Xl|class=Xl|style="[^"]*\bmso-|style='[^']*\bmso-|w:WordDocument)/gi;
@@ -95,6 +96,26 @@ var MsWordPaste = /** @class */ (function () {
             e.callBack(elm.innerHTML);
         }
     };
+    MsWordPaste.prototype.addDoubleBr = function (elm) {
+        var newline = elm.querySelector('.Apple-interchange-newline');
+        if (!isNOU(newline) && Browser.userAgent.indexOf('Chrome') !== -1 && newline.parentElement.nodeName === 'P' && elm !== newline.parentElement) {
+            for (var i = 0; i < elm.childNodes.length; i++) {
+                // eslint-disable-next-line
+                var node = elm.childNodes[i];
+                if (node.nodeType === Node.COMMENT_NODE && node.nodeValue.includes('StartFragment')) {
+                    var newElement = document.createElement('p');
+                    newElement.innerHTML = '<br>';
+                    var cssText = newline.parentElement.style.cssText;
+                    var currentStyle = newElement.getAttribute('style') || '';
+                    var newStyle = currentStyle + cssText;
+                    newElement.setAttribute('style', newStyle);
+                    elm.insertBefore(newElement, node.nextSibling);
+                    detach(newline);
+                    break;
+                }
+            }
+        }
+    };
     MsWordPaste.prototype.cleanList = function (elm, listTag) {
         var replacableElem = elm.querySelectorAll(listTag + ' div');
         for (var j = replacableElem.length - 1; j >= 0; j--) {
@@ -451,72 +472,80 @@ var MsWordPaste = /** @class */ (function () {
     };
     MsWordPaste.prototype.styleCorrection = function (elm, wordPasteStyleConfig) {
         var styleElement = elm.querySelectorAll('style');
+        var styles = [];
         if (styleElement.length > 0) {
-            var styles = styleElement[0].innerHTML.match(/[\S ]+\s+{[\s\S]+?}/gi);
+            if (!isNOU(styleElement[0].innerHTML.match(/[\S ]+\s+{[\s\S]+?}/gi))) {
+                styles = styleElement[0].innerHTML.match(/[\S ]+\s+{[\s\S]+?}/gi);
+            }
+            else if (styleElement.length > 1) {
+                styles = styleElement[1].innerHTML.match(/[\S ]+\s+{[\s\S]+?}/gi);
+            }
             var styleClassObject_1 = !isNOU(styles) ? this.findStyleObject(styles) : null;
-            var keys = Object.keys(styleClassObject_1);
-            var values = keys.map(function (key) {
-                return styleClassObject_1["" + key];
-            });
-            values = this.removeUnwantedStyle(values, wordPasteStyleConfig);
-            this.filterStyles(elm, wordPasteStyleConfig);
-            var resultElem = void 0;
-            var fromClass = false;
-            for (var i = 0; i < keys.length; i++) {
-                if (keys[i].split('.')[0] === '') {
-                    resultElem = elm.getElementsByClassName(keys[i].split('.')[1]);
-                    fromClass = true;
-                }
-                else if (keys[i].split('.').length === 1 && keys[i].split('.')[0].indexOf('@') >= 0) {
-                    continue;
-                }
-                else if (keys[i].split('.').length === 1 && keys[i].split('.')[0].indexOf('@') < 0) {
-                    resultElem = elm.getElementsByTagName(keys[i]);
-                }
-                else {
-                    resultElem = elm.querySelectorAll(keys[i]);
-                }
-                for (var j = 0; j < resultElem.length; j++) {
-                    if (resultElem[j].closest('li') && keys[i] === 'p') {
+            if (!isNOU(styleClassObject_1)) {
+                var keys = Object.keys(styleClassObject_1);
+                var values = keys.map(function (key) {
+                    return styleClassObject_1["" + key];
+                });
+                values = this.removeUnwantedStyle(values, wordPasteStyleConfig);
+                this.filterStyles(elm, wordPasteStyleConfig);
+                var resultElem = void 0;
+                var fromClass = false;
+                for (var i = 0; i < keys.length; i++) {
+                    if (keys[i].split('.')[0] === '') {
+                        resultElem = elm.getElementsByClassName(keys[i].split('.')[1]);
+                        fromClass = true;
+                    }
+                    else if (keys[i].split('.').length === 1 && keys[i].split('.')[0].indexOf('@') >= 0) {
                         continue;
                     }
-                    var styleProperty = resultElem[j].getAttribute('style');
-                    if (!isNOU(styleProperty) && styleProperty.trim() !== '') {
-                        var valueSplit = values[i].split(';');
-                        if (!fromClass) {
-                            for (var k = 0; k < valueSplit.length; k++) {
-                                if (styleProperty.indexOf(valueSplit[k].split(':')[0]) >= 0) {
-                                    valueSplit.splice(k, 1);
-                                    k--;
+                    else if (keys[i].split('.').length === 1 && keys[i].split('.')[0].indexOf('@') < 0) {
+                        resultElem = elm.getElementsByTagName(keys[i]);
+                    }
+                    else {
+                        resultElem = elm.querySelectorAll(keys[i]);
+                    }
+                    for (var j = 0; j < resultElem.length; j++) {
+                        if (resultElem[j].closest('li') && keys[i] === 'p') {
+                            continue;
+                        }
+                        var styleProperty = resultElem[j].getAttribute('style');
+                        if (!isNOU(styleProperty) && styleProperty.trim() !== '') {
+                            var valueSplit = values[i].split(';');
+                            if (!fromClass) {
+                                for (var k = 0; k < valueSplit.length; k++) {
+                                    if (styleProperty.indexOf(valueSplit[k].split(':')[0]) >= 0) {
+                                        valueSplit.splice(k, 1);
+                                        k--;
+                                    }
                                 }
                             }
+                            var changedValue = styleProperty + valueSplit.join(';') + ';';
+                            resultElem[j].setAttribute('style', changedValue);
+                        }
+                        else {
+                            values[i] = values[i].replace(/text-indent:-(.*?)(?=;|$)/gm, '');
+                            resultElem[j].setAttribute('style', values[i]);
                         }
-                        var changedValue = styleProperty + valueSplit.join(';') + ';';
-                        resultElem[j].setAttribute('style', changedValue);
-                    }
-                    else {
-                        values[i] = values[i].replace(/text-indent:-(.*?)(?=;|$)/gm, '');
-                        resultElem[j].setAttribute('style', values[i]);
                     }
+                    fromClass = false;
                 }
-                fromClass = false;
-            }
-            var listClass = ['MsoListParagraphCxSpFirst', 'MsoListParagraphCxSpMiddle', 'MsoListParagraphCxSpLast'];
-            for (var i = 0; i < listClass.length; i++) {
-                if (keys.indexOf('li.' + listClass[i]) > -1) {
-                    var olULElems = elm.querySelectorAll('ol.' + listClass[i] + ', ul.' + listClass[i]);
-                    for (var j = 0; j < olULElems.length; j++) {
-                        var styleProperty = olULElems[j].getAttribute('style');
-                        if (!isNOU(styleProperty) && styleProperty.trim() !== '' && olULElems[j].style.marginLeft !== '') {
-                            var valueSplit = values[keys.indexOf('li.' + listClass[i])].split(';');
-                            for (var k = 0; k < valueSplit.length; k++) {
-                                if ('margin-left'.indexOf(valueSplit[k].split(':')[0]) >= 0) {
-                                    if (!isNOU(valueSplit[k].split(':')[1]) &&
-                                        valueSplit[k].split(':')[1].indexOf('in') >= 0 &&
-                                        olULElems[j].style.marginLeft.indexOf('in') >= 0) {
-                                        var classStyle = parseFloat(valueSplit[k].split(':')[1].split('in')[0]);
-                                        var inlineStyle = parseFloat(olULElems[j].style.marginLeft.split('in')[0]);
-                                        olULElems[j].style.marginLeft = (inlineStyle - classStyle) + 'in';
+                var listClass = ['MsoListParagraphCxSpFirst', 'MsoListParagraphCxSpMiddle', 'MsoListParagraphCxSpLast'];
+                for (var i = 0; i < listClass.length; i++) {
+                    if (keys.indexOf('li.' + listClass[i]) > -1) {
+                        var olULElems = elm.querySelectorAll('ol.' + listClass[i] + ', ul.' + listClass[i]);
+                        for (var j = 0; j < olULElems.length; j++) {
+                            var styleProperty = olULElems[j].getAttribute('style');
+                            if (!isNOU(styleProperty) && styleProperty.trim() !== '' && olULElems[j].style.marginLeft !== '') {
+                                var valueSplit = values[keys.indexOf('li.' + listClass[i])].split(';');
+                                for (var k = 0; k < valueSplit.length; k++) {
+                                    if ('margin-left'.indexOf(valueSplit[k].split(':')[0]) >= 0) {
+                                        if (!isNOU(valueSplit[k].split(':')[1]) &&
+                                            valueSplit[k].split(':')[1].indexOf('in') >= 0 &&
+                                            olULElems[j].style.marginLeft.indexOf('in') >= 0) {
+                                            var classStyle = parseFloat(valueSplit[k].split(':')[1].split('in')[0]);
+                                            var inlineStyle = parseFloat(olULElems[j].style.marginLeft.split('in')[0]);
+                                            olULElems[j].style.marginLeft = (inlineStyle - classStyle) + 'in';
+                                        }
                                     }
                                 }
                             }

package/src/editor-manager/plugin/selection-commands.js

@@ -331,6 +331,30 @@ var SelectionCommands = /** @class */ (function () {
             formatNode.style.textDecoration = 'none';
             child = [formatNode];
         }
+        else if (IsFormatted.inlineTags.indexOf(formatNodeTagName.toLowerCase()) !== -1 && isFontStyle && formatNodeTagName.toLocaleLowerCase() !== 'span') {
+            var fontNodeStyle = formatNode.style;
+            if (fontNodeStyle.color && format === 'fontcolor') {
+                if (formatNode.nodeName === 'A') {
+                    fontNodeStyle.color = value;
+                }
+                else {
+                    fontNodeStyle.color = '';
+                }
+            }
+            else if (fontNodeStyle.backgroundColor && format === 'backgroundcolor') {
+                fontNodeStyle.backgroundColor = '';
+            }
+            else if (fontNodeStyle.fontSize && format === 'fontsize') {
+                fontNodeStyle.fontSize = '';
+            }
+            else if (fontNodeStyle.fontFamily && format === 'fontname') {
+                fontNodeStyle.fontFamily = '';
+            }
+            if (formatNode.getAttribute("style") === '') {
+                formatNode.removeAttribute("style");
+            }
+            child = [formatNode];
+        }
         else {
             child = InsertMethods.unwrap(formatNode);
             var liElement = nodes[index].parentElement;
@@ -511,19 +535,44 @@ var SelectionCommands = /** @class */ (function () {
                             parentElement = parentElement.parentElement;
                             liElement = parentElement;
                         }
-                        if (format === 'fontcolor') {
+                        if (format === 'fontcolor' || format === 'fontname') {
                             var parentElem = nodes[index].parentElement;
                             if (!isNOU(parentElem) && parentElem.childNodes) {
                                 for (var i = 0; i < parentElem.childNodes.length; i++) {
                                     if (this.concatenateTextExcludingList(nodes, index) === nodes[index].textContent) {
+                                        var liElement_1 = void 0;
                                         if (parentElem.tagName === 'LI') {
-                                            parentElem.style.color = value;
+                                            liElement_1 = parentElem;
+                                        }
+                                        else if (parentElem.closest('li')) {
+                                            liElement_1 = parentElem.closest('li');
+                                        }
+                                        if (!isNOU(liElement_1)) {
+                                            switch (format) {
+                                                case 'fontcolor':
+                                                    liElement_1.style.color = value;
+                                                    break;
+                                                case 'fontname':
+                                                    liElement_1.style.fontFamily = value;
+                                                    break;
+                                                default:
+                                                    break;
+                                            }
                                         }
                                     }
                                     // eslint-disable-next-line
                                     var childElement = parentElem.childNodes[i];
                                     if (childElement.tagName === 'OL' || childElement.tagName === 'UL') {
-                                        childElement.style.color = 'initial';
+                                        switch (format) {
+                                            case 'fontcolor':
+                                                childElement.style.color = 'initial';
+                                                break;
+                                            case 'fontname':
+                                                childElement.style.fontFamily = 'initial';
+                                                break;
+                                            default:
+                                                break;
+                                        }
                                     }
                                 }
                             }

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

@@ -61,7 +61,7 @@ var TableCommand = /** @class */ (function () {
         e.item.selection.restore();
         InsertHtml.Insert(this.parent.currentDocument, table, this.parent.editableElement);
         e.item.selection.setSelectionText(this.parent.currentDocument, table.querySelector('td'), table.querySelector('td'), 0, 0);
-        if (table.nextElementSibling === null) {
+        if (table.nextElementSibling === null && !table.classList.contains('ignore-table')) {
             var insertElem = void 0;
             if (e.enterAction === 'DIV') {
                 insertElem = createElement('div');
@@ -76,6 +76,9 @@ var TableCommand = /** @class */ (function () {
             }
             this.insertAfter(insertElem, table);
         }
+        if (table.classList.contains('ignore-table')) {
+            table.classList.remove('ignore-table');
+        }
         table.querySelector('td').classList.add('e-cell-select');
         if (e.callBack) {
             e.callBack({
@@ -498,10 +501,22 @@ var TableCommand = /** @class */ (function () {
             firstCell.setAttribute('rowspan', (minMaxIndexes.endRow - minMaxIndexes.startRow + 1).toString());
         }
         var totalWidth = 0;
+        var unit;
         for (var j = rowSelectedCells.length - 1; j >= 0; j--) {
-            totalWidth = totalWidth + parseFloat(rowSelectedCells[j].style.width);
+            if (!isNOU(rowSelectedCells[j].style.width)
+                && rowSelectedCells[j].style.width !== '') {
+                if (!unit) {
+                    var match = rowSelectedCells[j].style.width.match(/^([\d.]+)([a-z%]+)$/i);
+                    unit = match ? match[2] : '%';
+                }
+                totalWidth = totalWidth + parseFloat(rowSelectedCells[j].style.width);
+            }
+            else {
+                totalWidth = totalWidth + ((rowSelectedCells[j].offsetWidth / this.curTable.offsetWidth) * 100);
+                unit = '%';
+            }
         }
-        firstCell.style.width = totalWidth + '%';
+        firstCell.style.width = totalWidth + unit;
         for (var i = 1; i <= selectedCells.length - 1; i++) {
             detach(selectedCells[i]);
         }

package/src/editor-manager/plugin/toolbar-status.d.ts

@@ -11,7 +11,7 @@ export declare class ToolbarStatus {
      * 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.
@@ -20,7 +20,7 @@ export declare class ToolbarStatus {
      * @hidden
 
      */
-    static get(docElement: Document, targetNode: Node, formatNode?: string[], fontSize?: string[], fontName?: string[], documentNode?: Node): IToolbarStatus;
+    static get(docElement: Document, rootNode: Node, formatNode?: string[], fontSize?: string[], fontName?: string[], documentNode?: Node): IToolbarStatus;
     private static getImmediateBlockNode;
     private static getFormatParent;
     private static isFormattedNode;

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

@@ -17,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.
@@ -26,7 +26,7 @@ var ToolbarStatus = /** @class */ (function () {
      * @hidden
 
      */
-    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();
@@ -56,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;
             }
@@ -131,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);
         }
@@ -171,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) {
@@ -189,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;

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;

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);
@@ -79,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.classList.contains("e-rte-audio")) ? target.parentElement.offsetTop : 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;
@@ -91,11 +102,30 @@ var BaseQuickToolbar = /** @class */ (function () {
             y = e.y;
         }
         target = isAligned ? e.target : target;
-        if (target.offsetWidth > e.popWidth) {
-            x = (target.offsetWidth / 2) - (e.popWidth / 2) + e.parentData.left + ((target.classList.contains("e-rte-audio")) ? target.parentElement.offsetLeft : target.offsetLeft);
+        var targetOffsetLeft;
+        var currentOffsetWidth;
+        if (!isNOU(closest(target, 'table'))) {
+            targetOffsetLeft = target.offsetLeft;
+            var parentTable = closest(target, 'table');
+            var checkOffSetParentWidth = false;
+            if (!isNOU(closest(parentTable, 'TD'))) {
+                checkOffSetParentWidth = true;
+            }
+            while (!isNOU(parentTable)) {
+                targetOffsetLeft += parentTable.offsetLeft;
+                currentOffsetWidth = checkOffSetParentWidth ? parentTable.offsetWidth : target.offsetWidth;
+                parentTable = closest(parentTable.parentElement, 'table');
+            }
         }
         else {
-            x = e.parentData.left + target.offsetLeft;
+            currentOffsetWidth = target.offsetWidth;
+            targetOffsetLeft = (target.classList.contains("e-rte-audio")) ? target.parentElement.offsetLeft : target.offsetLeft;
+        }
+        if (currentOffsetWidth > e.popWidth) {
+            x = (currentOffsetWidth / 2) - (e.popWidth / 2) + e.parentData.left + targetOffsetLeft;
+        }
+        else {
+            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;
@@ -223,6 +253,9 @@ var BaseQuickToolbar = /** @class */ (function () {
                     _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({
@@ -230,7 +263,8 @@ var BaseQuickToolbar = /** @class */ (function () {
                         openDelay: 400,
                         showTipPointer: true,
                         windowCollision: true,
-                        position: 'BottomCenter'
+                        position: 'BottomCenter',
+                        cssClass: _this.parent.getCssClass()
                     });
                     _this.tooltip.appendTo(_this.element);
                 }
@@ -264,7 +298,7 @@ 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)))) && (x == beforeQuickToolbarArgs.positionX || y == beforeQuickToolbarArgs.positionY)) {
                     _this.setPosition(showPopupData);
@@ -284,7 +318,7 @@ var BaseQuickToolbar = /** @class */ (function () {
                     maxWidth: window.outerWidth + 'px'
                 });
                 addClass([_this.element], [classes.CLS_POP]);
-                _this.isDOMElement = true;
+                _this.isRendered = true;
             }
         });
     };
@@ -324,7 +358,7 @@ var BaseQuickToolbar = /** @class */ (function () {
             this.parent.notify(events.destroyTooltip, { args: event });
         }
         this.removeEleFromDOM();
-        this.isDOMElement = false;
+        this.isRendered = false;
     };
     /**
      * @param {string} item - specifies the string value
@@ -347,7 +381,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]);

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
+                    };
             }
         }
     };
@@ -176,17 +166,21 @@ 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;
+                if (windowKeys["" + tooltipText]) {
+                    shortCutKey = window.navigator.platform.toLocaleLowerCase().includes('mac') ? windowKeys["" + tooltipText].replace('Ctrl', 'Cmd') : windowKeys["" + tooltipText];
+                }
+                else {
+                    shortCutKey = tooltipText;
+                }
+                if (shortCutKey) {
+                    if (!(items[num].command === "Images" && items[num].subCommand === "InsertLink")) {
+                        items[num].tooltipText = (tooltipText !== shortCutKey) ? tooltipText + ' (' + shortCutKey + ')' : tooltipText;
+                    }
+                }
             }
         }
         return items;