@syncfusion/ej2-richtexteditor 28.1.38 → 28.1.39

package/dist/global/index.d.ts

@@ -1,6 +1,6 @@
 /*!
 *  filename: index.d.ts
-*  version : 28.1.38
+*  version : 28.1.39
 *  Copyright Syncfusion Inc. 2001 - 2024. All rights reserved.
 *  Use of this code is subject to the terms of our license.
 *  A copy of the current license can be obtained at any time by e-mailing

package/package.json

@@ -1,8 +1,8 @@
 {
   "_from": "@syncfusion/ej2-richtexteditor@*",
-  "_id": "@syncfusion/ej2-richtexteditor@28.1.37",
+  "_id": "@syncfusion/ej2-richtexteditor@28.1.38",
   "_inBundle": false,
-  "_integrity": "sha512-LcoACNENKzPU49FmsncrsED1lWXsHPU9w6nV7nSn1wOipA3bqUwEVvbJimIw8Ll29E/RrzcR80mBsWYj7LhNzw==",
+  "_integrity": "sha512-VgcAoOpiEA/QFH8o0/1zMctqznoFqjYtvQtK8ep3Km41VszqWndVLw+FI0+bS9d51fTHTDIKKY4FSk+I1eoMRA==",
   "_location": "/@syncfusion/ej2-richtexteditor",
   "_phantomChildren": {},
   "_requested": {
@@ -25,8 +25,8 @@
     "/@syncfusion/ej2-react-richtexteditor",
     "/@syncfusion/ej2-vue-richtexteditor"
   ],
-  "_resolved": "https://nexus.syncfusioninternal.com/repository/ej2-hotfix-new/@syncfusion/ej2-richtexteditor/-/ej2-richtexteditor-28.1.37.tgz",
-  "_shasum": "8e8379aba1b398d91e5704b67386f3fac2be2b87",
+  "_resolved": "https://nexus.syncfusioninternal.com/repository/ej2-hotfix-new/@syncfusion/ej2-richtexteditor/-/ej2-richtexteditor-28.1.38.tgz",
+  "_shasum": "344a03d500b197a42d3a8f28f1b7766e7bf90b2f",
   "_spec": "@syncfusion/ej2-richtexteditor@*",
   "_where": "/jenkins/workspace/elease-automation_release_28.1.1/packages/included",
   "author": {
@@ -38,12 +38,12 @@
   "bundleDependencies": false,
   "dependencies": {
     "@syncfusion/ej2-base": "~28.1.33",
-    "@syncfusion/ej2-buttons": "~28.1.37",
-    "@syncfusion/ej2-dropdowns": "~28.1.38",
-    "@syncfusion/ej2-filemanager": "~28.1.36",
+    "@syncfusion/ej2-buttons": "~28.1.39",
+    "@syncfusion/ej2-dropdowns": "~28.1.39",
+    "@syncfusion/ej2-filemanager": "~28.1.39",
     "@syncfusion/ej2-inputs": "~28.1.37",
-    "@syncfusion/ej2-navigations": "~28.1.37",
-    "@syncfusion/ej2-popups": "~28.1.38",
+    "@syncfusion/ej2-navigations": "~28.1.39",
+    "@syncfusion/ej2-popups": "~28.1.39",
     "@syncfusion/ej2-splitbuttons": "~28.1.37"
   },
   "deprecated": false,
@@ -80,6 +80,6 @@
     "url": "git+https://github.com/syncfusion/ej2-javascript-ui-controls.git"
   },
   "typings": "index.d.ts",
-  "version": "28.1.38",
+  "version": "28.1.39",
   "sideEffects": false
 }

package/src/common/util.d.ts

@@ -13,11 +13,10 @@ export declare function isIDevice(): boolean;
 export declare function setEditFrameFocus(editableElement: Element, selector: string): void;
 /**
  * @param {string} value - specifies the string value
- * @param {string} enterAction - specifies the enter key action API
  * @returns {void}
  * @hidden
  */
-export declare function updateTextNode(value: string, enterAction?: string): string;
+export declare function updateTextNode(value: string): string;
 /**
  * @param {Node} startChildNodes - specifies the node
  * @returns {void}

package/src/common/util.js

@@ -1,12 +1,7 @@
 /**
  * Defines common util methods used by Rich Text Editor.
  */
-import { isNullOrUndefined, Browser, createElement, detach, removeClass } from '@syncfusion/ej2-base';
-var inlineNode = ['a', 'abbr', 'acronym', 'audio', 'b', 'bdi', 'bdo', 'big', 'br', 'button',
-    'canvas', 'cite', 'code', 'data', 'datalist', 'del', 'dfn', 'em', 'embed', 'font', 'i', 'iframe', 'img', 'input',
-    'ins', 'kbd', 'label', 'map', 'mark', 'meter', 'noscript', 'object', 'output', 'picture', 'progress',
-    'q', 'ruby', 's', 'samp', 'script', 'select', 'slot', 'small', 'span', 'strong', 'strike', 'sub', 'sup', 'svg',
-    'template', 'textarea', 'time', 'u', 'tt', 'var', 'video', 'wbr'];
+import { isNullOrUndefined, Browser, removeClass } from '@syncfusion/ej2-base';
 /**
  * @returns {void}
  * @hidden
@@ -34,109 +29,68 @@ export function setEditFrameFocus(editableElement, selector) {
 }
 /**
  * @param {string} value - specifies the string value
- * @param {string} enterAction - specifies the enter key action API
  * @returns {void}
  * @hidden
  */
-export function updateTextNode(value, enterAction) {
-    var tempNode = document.createElement('div');
-    tempNode.innerHTML = value;
-    tempNode.setAttribute('class', 'tempDiv');
+export function updateTextNode(value) {
     var resultElm = document.createElement('div');
-    var childNodes = tempNode.childNodes;
-    if (childNodes.length > 0) {
-        var isPreviousInlineElem = void 0;
-        var previousParent = void 0;
-        var paraElm = void 0;
-        while (tempNode.firstChild) {
-            if ((tempNode.firstChild.nodeName === '#text' &&
-                (tempNode.firstChild.textContent.indexOf('\n') < 0 || tempNode.firstChild.textContent.trim() !== '')) ||
-                inlineNode.indexOf(tempNode.firstChild.nodeName.toLocaleLowerCase()) >= 0) {
-                if (!isPreviousInlineElem) {
-                    if (enterAction === 'BR') {
-                        resultElm.appendChild(tempNode.firstChild);
-                        previousParent = resultElm;
-                    }
-                    else {
-                        paraElm = createElement('p');
-                        resultElm.appendChild(paraElm);
-                        paraElm.appendChild(tempNode.firstChild);
-                        previousParent = paraElm;
-                        isPreviousInlineElem = true;
-                    }
-                }
-                else {
-                    previousParent.appendChild(tempNode.firstChild);
-                    previousParent = paraElm;
-                    isPreviousInlineElem = true;
-                }
-            }
-            else if (tempNode.firstChild.nodeName === '#text' && (tempNode.firstChild.textContent === '\n' ||
-                (tempNode.firstChild.textContent.indexOf('\n') >= 0 && tempNode.firstChild.textContent.trim() === ''))) {
-                detach(tempNode.firstChild);
+    resultElm.innerHTML = value;
+    var tableElm = resultElm.querySelectorAll('table');
+    for (var i = 0; i < tableElm.length; i++) {
+        if (tableElm[i].classList.length > 0 &&
+            !tableElm[i].classList.contains('e-rte-table') && !tableElm[i].classList.contains('e-rte-custom-table')) {
+            tableElm[i].classList.add('e-rte-paste-table');
+            if (tableElm[i].classList.contains('e-rte-paste-word-table')) {
+                tableElm[i].classList.remove('e-rte-paste-word-table');
+                continue; // Skiping the removal of the border if the source is from word.
             }
-            else {
-                resultElm.appendChild(tempNode.firstChild);
-                isPreviousInlineElem = false;
-            }
-        }
-        var tableElm = resultElm.querySelectorAll('table');
-        for (var i = 0; i < tableElm.length; i++) {
-            if (tableElm[i].classList.length > 0 &&
-                !tableElm[i].classList.contains('e-rte-table') && !tableElm[i].classList.contains('e-rte-custom-table')) {
-                tableElm[i].classList.add('e-rte-paste-table');
-                if (tableElm[i].classList.contains('e-rte-paste-word-table')) {
-                    tableElm[i].classList.remove('e-rte-paste-word-table');
-                    continue; // Skiping the removal of the border if the source is from word.
+            else if (tableElm[i].classList.contains('e-rte-paste-excel-table')) {
+                tableElm[i].classList.remove('e-rte-paste-excel-table');
+                if (tableElm[i].getAttribute('border') === '0') {
+                    tableElm[i].removeAttribute('border');
                 }
-                else if (tableElm[i].classList.contains('e-rte-paste-excel-table')) {
-                    tableElm[i].classList.remove('e-rte-paste-excel-table');
-                    if (tableElm[i].getAttribute('border') === '0') {
-                        tableElm[i].removeAttribute('border');
+                var tdElm = tableElm[i].querySelectorAll('td');
+                for (var j = 0; j < tdElm.length; j++) {
+                    if (tdElm[j].style.borderLeft === 'none') {
+                        tdElm[j].style.removeProperty('border-left');
                     }
-                    var tdElm = tableElm[i].querySelectorAll('td');
-                    for (var j = 0; j < tdElm.length; j++) {
-                        if (tdElm[j].style.borderLeft === 'none') {
-                            tdElm[j].style.removeProperty('border-left');
-                        }
-                        if (tdElm[j].style.borderRight === 'none') {
-                            tdElm[j].style.removeProperty('border-right');
-                        }
-                        if (tdElm[j].style.borderBottom === 'none') {
-                            tdElm[j].style.removeProperty('border-bottom');
-                        }
-                        if (tdElm[j].style.borderTop === 'none') {
-                            tdElm[j].style.removeProperty('border-top');
-                        }
-                        if (tdElm[j].style.border === 'none') {
-                            tdElm[j].style.removeProperty('border');
-                        }
+                    if (tdElm[j].style.borderRight === 'none') {
+                        tdElm[j].style.removeProperty('border-right');
+                    }
+                    if (tdElm[j].style.borderBottom === 'none') {
+                        tdElm[j].style.removeProperty('border-bottom');
+                    }
+                    if (tdElm[j].style.borderTop === 'none') {
+                        tdElm[j].style.removeProperty('border-top');
+                    }
+                    if (tdElm[j].style.border === 'none') {
+                        tdElm[j].style.removeProperty('border');
                     }
                 }
-                else if (tableElm[i].classList.contains('e-rte-paste-onenote-table')) {
-                    tableElm[i].classList.remove('e-rte-paste-onenote-table');
-                    continue;
-                }
-                else if (tableElm[i].classList.contains('e-rte-paste-html-table')) {
-                    tableElm[i].classList.remove('e-rte-paste-html-table');
-                    continue;
-                }
-            }
-        }
-        var imageElm = resultElm.querySelectorAll('img');
-        for (var i = 0; i < imageElm.length; i++) {
-            if (imageElm[i].classList.contains('e-rte-image-unsupported')) {
-                continue; // Should not add the class if the image is Broken.
             }
-            if (!imageElm[i].classList.contains('e-rte-image')) {
-                imageElm[i].classList.add('e-rte-image');
+            else if (tableElm[i].classList.contains('e-rte-paste-onenote-table')) {
+                tableElm[i].classList.remove('e-rte-paste-onenote-table');
+                continue;
             }
-            if (!(imageElm[i].classList.contains('e-imginline') ||
-                imageElm[i].classList.contains('e-imgbreak'))) {
-                imageElm[i].classList.add('e-imginline');
+            else if (tableElm[i].classList.contains('e-rte-paste-html-table')) {
+                tableElm[i].classList.remove('e-rte-paste-html-table');
+                continue;
             }
         }
     }
+    var imageElm = resultElm.querySelectorAll('img');
+    for (var i = 0; i < imageElm.length; i++) {
+        if (imageElm[i].classList.contains('e-rte-image-unsupported')) {
+            continue; // Should not add the class if the image is Broken.
+        }
+        if (!imageElm[i].classList.contains('e-rte-image')) {
+            imageElm[i].classList.add('e-rte-image');
+        }
+        if (!(imageElm[i].classList.contains('e-imginline') ||
+            imageElm[i].classList.contains('e-imgbreak'))) {
+            imageElm[i].classList.add('e-imginline');
+        }
+    }
     return resultElm.innerHTML;
 }
 /**

package/src/editor-manager/base/interface.d.ts

@@ -156,6 +156,14 @@ export interface IHtmlKeyboardEvent {
      * Specifies the enter key configuration.
      */
     enterAction?: string;
+    /**
+     * Defines tag to be used when enter key is pressed.
+     */
+    enterKey?: string;
+    /**
+     * Defines tag to be used when shift enter key is pressed.
+     */
+    shiftEnterKey?: string;
 }
 /**
  *

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

@@ -397,7 +397,7 @@ var InsertHtml = /** @class */ (function () {
             nodeSelection.setSelectionText(docElement, lastSelectionNode, lastSelectionNode, 0, 0);
         }
         else {
-            this.cursorPos(lastSelectionNode, node, nodeSelection, docElement, editNode, enterAction);
+            this.cursorPos(lastSelectionNode, node, nodeSelection, docElement, editNode);
         }
         this.alignCheck(editNode);
         this.listCleanUp(nodeSelection, docElement);
@@ -661,9 +661,9 @@ var InsertHtml = /** @class */ (function () {
             }
         }
     };
-    InsertHtml.cursorPos = function (lastSelectionNode, node, nodeSelection, docElement, editNode, enterAction) {
+    InsertHtml.cursorPos = function (lastSelectionNode, node, nodeSelection, docElement, editNode) {
         lastSelectionNode.classList.add('lastNode');
-        editNode.innerHTML = updateTextNode(editNode.innerHTML, enterAction);
+        editNode.innerHTML = updateTextNode(editNode.innerHTML);
         lastSelectionNode = editNode.querySelector('.lastNode');
         if (!isNOU(lastSelectionNode)) {
             this.placeCursorEnd(lastSelectionNode, node, nodeSelection, docElement, editNode);

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

@@ -25,6 +25,7 @@ export declare class Lists {
     private removeEventListener;
     private testList;
     private testCurrentList;
+    private createAutoList;
     private spaceList;
     private enterList;
     private backspaceList;

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

@@ -64,6 +64,17 @@ var Lists = /** @class */ (function () {
         }
         return false;
     };
+    Lists.prototype.createAutoList = function (enterKey, shiftEnterKey) {
+        var autoListRules = {
+            BR: { BR: true, P: true, DIV: true },
+            P: { BR: false, P: true, DIV: true },
+            DIV: { BR: false, P: true, DIV: true }
+        };
+        if (autoListRules[enterKey] && autoListRules[enterKey][shiftEnterKey] !== undefined) {
+            return autoListRules[enterKey][shiftEnterKey];
+        }
+        return false;
+    };
     Lists.prototype.spaceList = function (e) {
         var range = this.parent.nodeSelection.getRange(this.parent.currentDocument);
         this.saveSelection = this.parent.nodeSelection.save(range, this.parent.currentDocument);
@@ -79,7 +90,8 @@ var Lists = /** @class */ (function () {
         var startElementOLTest = this.testCurrentList(range);
         var preElementOLTest = this.testList(preElement);
         var nextElementOLTest = this.testList(nextElement);
-        if (!preElementOLTest && !nextElementOLTest && preElemULStart !== '*' && nextElemULStart !== '*') {
+        var nextElementBRTest = range.startContainer.previousElementSibling && range.startContainer.previousElementSibling.tagName === 'BR';
+        if (!preElementOLTest && !nextElementOLTest && preElemULStart !== '*' && nextElemULStart !== '*' && (this.createAutoList(e.enterKey, e.shiftEnterKey) || !nextElementBRTest)) {
             var brElement = createElement('br');
             if (startElementOLTest) {
                 range.startContainer.textContent = range.startContainer.textContent.slice(range.startOffset, range.startContainer.textContent.length);

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

@@ -151,7 +151,7 @@ var EnterKeyAction = /** @class */ (function () {
                         if ((_this.parent.enterKey === 'P' && !shiftKey_1) || (_this.parent.enterKey === 'DIV' && !shiftKey_1) ||
                             (_this.parent.shiftEnterKey === 'P' && shiftKey_1) ||
                             (_this.parent.shiftEnterKey === 'DIV' && shiftKey_1)) {
-                            if ((_this.range.startOffset === 1 && _this.parent.inputElement.childNodes.length === 1 && _this.parent.inputElement.childNodes[0].nodeName === 'TABLE') || (_this.parent.enterKey === 'BR' && shiftKey_1)) {
+                            if ((_this.range.startOffset === 1 && _this.parent.inputElement.childNodes.length === 1 && _this.parent.inputElement.childNodes[0].nodeName === 'TABLE')) {
                                 var newElem = _this.createInsertElement(shiftKey_1);
                                 newElem.appendChild(_this.parent.createElement('BR'));
                                 _this.parent.inputElement.appendChild(newElem);
@@ -210,8 +210,9 @@ var EnterKeyAction = /** @class */ (function () {
                                     (_this.range.startContainer.nodeName === '#text' && !isNOU(_this.range.startContainer.textContent[_this.range.startOffset]) &&
                                         _this.range.startContainer.textContent[_this.range.startOffset].includes('\u200B') && _this.range.startContainer.textContent[_this.range.startOffset] === '\u200B' &&
                                         _this.parent.inputElement.textContent[0] !== '\u200B'));
+                                var preventEnterkeyShiftKey = (_this.range.startContainer.nodeName === '#text' || _this.range.startContainer.nodeName === 'BR') && (_this.range.startOffset === 0 && _this.range.endOffset === 0) && _this.range.startContainer.parentElement === _this.parent.inputElement && _this.parent.enterKey === 'BR' && shiftKey_1;
                                 // eslint-disable-next-line max-len
-                                if (!preventZeroWithSpace && !fireFoxEnterAtMiddle && ((_this.range.startOffset === 0 && _this.range.endOffset === 0) || isFocusedFirst) &&
+                                if (!preventEnterkeyShiftKey && !preventZeroWithSpace && !fireFoxEnterAtMiddle && ((_this.range.startOffset === 0 && _this.range.endOffset === 0) || isFocusedFirst) &&
                                     !(!isNOU(_this.range.startContainer.previousSibling) &&
                                         (_this.range.startContainer.previousSibling.nodeName === 'IMG' || _this.range.startContainer.previousSibling.nodeName === 'BR'))) {
                                     var isNearBlockLengthZero = void 0;
@@ -276,7 +277,7 @@ var EnterKeyAction = /** @class */ (function () {
                                     }
                                     _this.parent.formatter.editorManager.nodeSelection.setCursorPoint(_this.parent.contentModule.getDocument(), insertElem.nextElementSibling, 0);
                                 }
-                                else if (nearBlockNode.textContent.length === 0 && !(!isNOU(nearBlockNode.childNodes[0]) && nearBlockNode.childNodes[0].nodeName === 'IMG' ||
+                                else if (nearBlockNode !== _this.parent.inputElement && nearBlockNode.textContent.length === 0 && !(!isNOU(nearBlockNode.childNodes[0]) && nearBlockNode.childNodes[0].nodeName === 'IMG' ||
                                     (nearBlockNode.querySelectorAll('video').length > 0) || (nearBlockNode.querySelectorAll('audio').length > 0) || (nearBlockNode.querySelectorAll('img').length > 0))) {
                                     if (!isNOU(nearBlockNode.children[0]) && nearBlockNode.children[0].tagName !== 'BR') {
                                         var newElem = _this.parent.formatter.editorManager.nodeCutter.SplitNode(_this.range, nearBlockNode, false).cloneNode(true);
@@ -332,6 +333,36 @@ var EnterKeyAction = /** @class */ (function () {
                                         _this.parent.videoModule.hideVideoQuickToolbar();
                                     }
                                 }
+                                else if (_this.parent.enterKey === 'BR' && shiftKey_1 && _this.range.startContainer.nodeType === Node.TEXT_NODE && _this.range.startContainer.parentElement && _this.range.startContainer.parentElement === _this.parent.inputElement) {
+                                    var range = _this.range;
+                                    var startContainer = range.startContainer;
+                                    var startOffset = range.startOffset;
+                                    var newElement = _this.parent.createElement(_this.parent.shiftEnterKey);
+                                    if (startContainer.nodeType === Node.TEXT_NODE && range.endOffset !== 0 && range.startOffset !== 0) {
+                                        var textNode = startContainer;
+                                        if (startOffset < textNode.length) {
+                                            var newTextNode = textNode.splitText(startOffset);
+                                            newElement.appendChild(newTextNode);
+                                        }
+                                        else {
+                                            newElement.innerHTML = '<br>';
+                                        }
+                                        textNode.parentNode.insertBefore(newElement, textNode.nextSibling);
+                                        _this.parent.formatter.editorManager.nodeSelection.setCursorPoint(_this.parent.contentModule.getDocument(), newElement, 0);
+                                    }
+                                    else if (startOffset === 0 && range.endOffset === 0) {
+                                        newElement.innerHTML = '<br>';
+                                        if (range.endOffset === startContainer.textContent.length) {
+                                            var brElement = _this.parent.createElement('br');
+                                            startContainer.parentNode.insertBefore(brElement, startContainer);
+                                        }
+                                        startContainer.parentNode.insertBefore(newElement, startContainer);
+                                        var cursorTarget = (range.endOffset === startContainer.textContent.length)
+                                            ? newElement : newElement.nextSibling;
+                                        startContainer.parentNode.insertBefore(newElement, startContainer);
+                                        _this.parent.formatter.editorManager.nodeSelection.setCursorPoint(_this.parent.contentModule.getDocument(), cursorTarget, 0);
+                                    }
+                                }
                                 else {
                                     var newElem = _this.parent.formatter.editorManager.nodeCutter.SplitNode(_this.range, nearBlockNode, true);
                                     if (!isNOU(newElem.childNodes[0]) && newElem.childNodes[0].nodeName === '#text' &&

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

@@ -431,7 +431,9 @@ var HtmlEditor = /** @class */ (function () {
                 var eventArgs_1 = {
                     callBack: null,
                     event: e.args,
-                    name: 'keydown-handler'
+                    name: 'keydown-handler',
+                    enterKey: this.parent.enterKey,
+                    shiftEnterKey: this.parent.shiftEnterKey
                 };
                 var actionBeginArgs = {
                     cancel: false,

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

@@ -1560,7 +1560,7 @@ var RichTextEditor = /** @class */ (function (_super) {
                 this.placeHolderWrapper.innerHTML = this.placeholder;
                 if (this.inputElement.textContent.length === 0 && this.inputElement.childNodes.length < 2 && !isNOU(this.inputElement.firstChild) && (this.inputElement.firstChild.nodeName === 'BR' ||
                     ((this.inputElement.firstChild.nodeName === 'P' || this.inputElement.firstChild.nodeName === 'DIV') && !isNOU(this.inputElement.firstChild.firstChild) &&
-                        this.inputElement.firstChild.firstChild.nodeName === 'BR'))) {
+                        this.inputElement.firstChild.childNodes.length < 2 && this.inputElement.firstChild.firstChild.nodeName === 'BR'))) {
                     this.placeHolderWrapper.classList.add('enabled');
                 }
                 else {
@@ -2296,7 +2296,6 @@ var RichTextEditor = /** @class */ (function (_super) {
             var value = this.getUpdatedValue();
             this.setProperties({ value: value });
             this.valueContainer.value = this.value;
-            this.notify(events.toolbarRefresh, { args: e, documentNode: document });
             this.isValueChangeBlurhandler = true;
             this.invokeChangeEvent();
             this.isFocusOut = true;

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

@@ -397,10 +397,10 @@ var Link = /** @class */ (function () {
         }
         if (!this.selfLink.isUrl(linkUrl)) {
             if (this.selfLink.parent.editorMode === 'Markdown') {
-                linkText = (linkText !== '') ? linkText : '';
+                linkText = (linkText.trim() !== '') ? linkText : '';
             }
             else {
-                linkText = (linkText === '') ? linkUrl : linkText;
+                linkText = (linkText.trim() === '') ? linkUrl : linkText;
             }
             if (!this.selfLink.parent.enableAutoUrl) {
                 linkUrl = linkUrl.indexOf('http') > -1 ? linkUrl : 'http://' + linkUrl;

package/src/rich-text-editor/renderer/table-module.d.ts

@@ -40,6 +40,7 @@ export declare class Table {
     private resizeIconPositionTime;
     private isResizeBind;
     private isDestroyed;
+    private createTablePopupBoundFn;
     private constructor();
     protected addEventListener(): void;
     protected removeEventListener(): void;
@@ -48,7 +49,6 @@ export declare class Table {
     private afterRender;
     private dropdownSelect;
     private UpdateCells;
-    private keyUp;
     private keyDown;
     private tableCellsKeyboardSelection;
     private resetTableSelection;
@@ -150,4 +150,5 @@ export declare class Table {
     private getModuleName;
     private afterKeyDown;
     private updateResizeIconPosition;
+    private createTablePopupKeyDown;
 }

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

@@ -1,4 +1,4 @@
-import { createElement, detach, closest, Browser, isNullOrUndefined as isNOU } from '@syncfusion/ej2-base';
+import { createElement, detach, closest, Browser, isNullOrUndefined as isNOU, getComponent } from '@syncfusion/ej2-base';
 import { isNullOrUndefined, EventHandler, addClass } from '@syncfusion/ej2-base';
 import { Popup } from '@syncfusion/ej2-popups';
 import { Button } from '@syncfusion/ej2-buttons';
@@ -45,7 +45,6 @@ var Table = /** @class */ (function () {
         this.parent.on(events.tableToolbarAction, this.onToolbarAction, this);
         this.parent.on(events.dropDownSelect, this.dropdownSelect, this);
         this.parent.on(events.keyDown, this.keyDown, this);
-        this.parent.on(events.keyUp, this.keyUp, this);
         this.parent.on(events.tableModulekeyUp, this.tableModulekeyUp, this);
         this.parent.on(events.bindCssClass, this.setCssClass, this);
         this.parent.on(events.destroy, this.destroy, this);
@@ -66,7 +65,6 @@ var Table = /** @class */ (function () {
         this.parent.off(events.mouseDown, this.cellSelect);
         this.parent.off(events.tableColorPickerChanged, this.setBGColor);
         this.parent.off(events.keyDown, this.keyDown);
-        this.parent.off(events.keyUp, this.keyUp);
         this.parent.off(events.tableModulekeyUp, this.tableModulekeyUp);
         this.parent.off(events.bindCssClass, this.setCssClass);
         this.parent.off(events.destroy, this.destroy);
@@ -163,20 +161,6 @@ var Table = /** @class */ (function () {
         this.parent.formatter.process(this.parent, e, e, { selection: selectCell, subCommand: e.item.subCommand });
         this.hideTableQuickToolbar();
     };
-    Table.prototype.keyUp = function (e) {
-        var target = e.args.target;
-        if (e.args.key.toLocaleLowerCase() === 'escape' && target && target.classList && (this.popupObj && !closest(target, '[id=' + '\'' + this.popupObj.element.id + '\'' + ']')) && this.popupObj) {
-            var createTableToolbarBtn = this.popupObj.relateTo;
-            if (createTableToolbarBtn.nodeName !== 'BUTTON') {
-                createTableToolbarBtn = createTableToolbarBtn.querySelector('span.e-create-table');
-                createTableToolbarBtn = createTableToolbarBtn.parentElement;
-            }
-            this.popupObj.hide();
-            if (createTableToolbarBtn) {
-                createTableToolbarBtn.focus();
-            }
-        }
-    };
     Table.prototype.keyDown = function (e) {
         var event = e.args;
         // eslint-disable-next-line
@@ -1755,6 +1739,8 @@ var Table = /** @class */ (function () {
         var header = '1X1';
         var insertbtn = this.l10n.getConstant('inserttablebtn');
         this.dlgDiv = this.parent.createElement('div', { className: 'e-rte-table-popup' + this.parent.getCssClass(true), id: this.rteID + '_table' });
+        this.createTablePopupBoundFn = this.createTablePopupKeyDown.bind(this);
+        this.dlgDiv.addEventListener('keydown', this.createTablePopupBoundFn);
         this.tblHeader = this.parent.createElement('div', { className: 'e-rte-popup-header' + this.parent.getCssClass(true) });
         this.tblHeader.innerHTML = header;
         this.dlgDiv.appendChild(this.tblHeader);
@@ -1792,6 +1778,7 @@ var Table = /** @class */ (function () {
             // eslint-disable-next-line
             close: function (event) {
                 EventHandler.remove(btnEle, 'click', _this.insertTableDialog);
+                _this.dlgDiv.removeEventListener('keydown', _this.createTablePopupBoundFn);
                 detach(btnEle);
                 if (_this.createTableButton && !_this.createTableButton.isDestroyed) {
                     _this.createTableButton.destroy();
@@ -2175,6 +2162,7 @@ var Table = /** @class */ (function () {
             this.createTableButton.destroy();
             this.createTableButton = null;
         }
+        this.createTablePopupBoundFn = null;
         this.isDestroyed = true;
     };
     /**
@@ -2201,6 +2189,15 @@ var Table = /** @class */ (function () {
                 'px; left:' + (tablePosition.left + parseInt(getComputedStyle(this.curTable).width, 10) - 4) + 'px;';
         }
     };
+    Table.prototype.createTablePopupKeyDown = function (e) {
+        if (e.key === 'Escape') {
+            var popupRootElem = e.target.closest('.e-rte-table-popup');
+            var popup = getComponent(popupRootElem, 'popup');
+            var tableToolbarButton = popup.relateTo;
+            popup.hide();
+            tableToolbarButton.focus({ preventScroll: true });
+        }
+    };
     return Table;
 }());
 export { Table };

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

@@ -645,7 +645,6 @@ var ToolbarRenderer = /** @class */ (function () {
         var proxy = this;
         var value;
         var colorPicker = new ColorPicker({
-            enablePersistence: this.parent.enablePersistence,
             enableRtl: this.parent.enableRtl,
             inline: true,
             value: null,