@syncfusion/ej2-richtexteditor 23.2.5 → 23.2.7

package/dist/global/index.d.ts

@@ -1,6 +1,6 @@
 /*!
 *  filename: index.d.ts
-*  version : 23.2.5
+*  version : 23.2.7
 *  Copyright Syncfusion Inc. 2001 - 2023. 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@23.2.4",
+  "_id": "@syncfusion/ej2-richtexteditor@23.2.6",
   "_inBundle": false,
-  "_integrity": "sha512-gQoJXBFkuekaa+gB0U2JpQldeFdkRz6T+N7qkqYNBpSDw0+zF71ScmwYy42dxjGVEJRdZT/HHRwtV5KgLEAhAQ==",
+  "_integrity": "sha512-yiMdrOTe/kK+B6CGHKyKTYE+XvhMVnznfPPgziZDZgT11BPn/mdRhpMyCtfjlTybpQ5ohE9WGNqpeWndalRhZA==",
   "_location": "/@syncfusion/ej2-richtexteditor",
   "_phantomChildren": {},
   "_requested": {
@@ -25,8 +25,8 @@
     "/@syncfusion/ej2-react-richtexteditor",
     "/@syncfusion/ej2-vue-richtexteditor"
   ],
-  "_resolved": "https://nexus.syncfusion.com/repository/ej2-hotfix-new/@syncfusion/ej2-richtexteditor/-/ej2-richtexteditor-23.2.4.tgz",
-  "_shasum": "53e152500eb6b7a1c1215748894fb8de196fec14",
+  "_resolved": "https://nexus.syncfusion.com/repository/ej2-hotfix-new/@syncfusion/ej2-richtexteditor/-/ej2-richtexteditor-23.2.6.tgz",
+  "_shasum": "b567bbae22fa4e6718a8f076b6c14c4a16e2977b",
   "_spec": "@syncfusion/ej2-richtexteditor@*",
   "_where": "/jenkins/workspace/elease-automation_release_23.1.1/packages/included",
   "author": {
@@ -37,11 +37,11 @@
   },
   "bundleDependencies": false,
   "dependencies": {
-    "@syncfusion/ej2-base": "~23.2.4",
-    "@syncfusion/ej2-buttons": "~23.2.4",
-    "@syncfusion/ej2-filemanager": "~23.2.4",
+    "@syncfusion/ej2-base": "~23.2.6",
+    "@syncfusion/ej2-buttons": "~23.2.7",
+    "@syncfusion/ej2-filemanager": "~23.2.6",
     "@syncfusion/ej2-inputs": "~23.2.4",
-    "@syncfusion/ej2-navigations": "~23.2.5",
+    "@syncfusion/ej2-navigations": "~23.2.7",
     "@syncfusion/ej2-popups": "~23.2.4",
     "@syncfusion/ej2-splitbuttons": "~23.2.4"
   },
@@ -69,6 +69,6 @@
     "url": "git+https://github.com/syncfusion/ej2-javascript-ui-controls.git"
   },
   "typings": "index.d.ts",
-  "version": "23.2.5",
+  "version": "23.2.7",
   "sideEffects": false
 }

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

@@ -124,6 +124,7 @@ export interface IHtmlItemArgs {
     captionClass?: string;
     action?: string;
     formatPainterAction?: IFormatPainterActionValue;
+    ariaLabel?: string;
 }
 /**
 

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

@@ -488,7 +488,9 @@ var InsertHtml = /** @class */ (function () {
     InsertHtml.findDetachEmptyElem = function (element) {
         var removableElement;
         if (!isNOU(element.parentElement)) {
-            if (element.parentElement.textContent.trim() === '' && element.parentElement.contentEditable !== 'true' &&
+            var hasNbsp = element.parentElement.textContent.length > 0 && element.parentElement.textContent.match(/\u00a0/g)
+                && element.parentElement.textContent.match(/\u00a0/g).length > 0;
+            if (!hasNbsp && element.parentElement.textContent.trim() === '' && element.parentElement.contentEditable !== 'true' &&
                 isNOU(element.parentElement.querySelector('img'))) {
                 removableElement = this.findDetachEmptyElem(element.parentElement);
             }

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

@@ -58,9 +58,11 @@ var LinkCommand = /** @class */ (function () {
             }
             if (!isNOU(e.item.target)) {
                 anchorEle.setAttribute('target', e.item.target);
+                anchorEle.setAttribute('aria-label', e.item.ariaLabel);
             }
             else {
                 anchorEle.removeAttribute('target');
+                anchorEle.removeAttribute('aria-label');
             }
             if (linkText === e.item.text) {
                 e.item.selection.setSelectionText(this.parent.currentDocument, anchorEle, anchorEle, 1, 1);

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

@@ -356,7 +356,9 @@ var MsWordPaste = /** @class */ (function () {
                     isNOU(allElements[i].nextElementSibling)))) {
                 var detachableElement = this.findDetachElem(allElements[i]);
                 var brElement = createElement('br');
-                if (!isNOU(detachableElement.parentElement)) {
+                var hasNbsp = detachableElement.textContent.length > 0 && detachableElement.textContent.match(/\u00a0/g)
+                    && detachableElement.textContent.match(/\u00a0/g).length > 0;
+                if (!hasNbsp && !isNOU(detachableElement.parentElement)) {
                     detachableElement.parentElement.insertBefore(brElement, detachableElement);
                     detach(detachableElement);
                 }
@@ -395,7 +397,9 @@ var MsWordPaste = /** @class */ (function () {
     MsWordPaste.prototype.findDetachEmptyElem = function (element) {
         var removableElement;
         if (!isNOU(element.parentElement)) {
-            if (element.parentElement.textContent.trim() === '' &&
+            var hasNbsp = element.parentElement.textContent.length > 0 && element.parentElement.textContent.match(/\u00a0/g)
+                && element.parentElement.textContent.match(/\u00a0/g).length > 0;
+            if (!hasNbsp && element.parentElement.textContent.trim() === '' &&
                 element.parentElement.getAttribute('id') !== 'MSWord-Content' &&
                 !(this.hasParentWithClass(element, 'MsoListParagraph')) &&
                 isNOU(element.parentElement.querySelector('img'))) {

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

@@ -399,7 +399,7 @@ var EnterKeyAction = /** @class */ (function () {
                                     var newElem = void 0;
                                     var outerBRElem = _this.parent.createElement('br');
                                     if (_this.range.startOffset === 0 && _this.range.endOffset === 0 &&
-                                        !isNOU(currentParent.previousSibling) && currentParent.previousSibling.nodeName === 'BR') {
+                                        !isNOU(currentParent.previousSibling) && currentParent.previousSibling.nodeName === 'BR' && currentParent.nodeName !== 'P' && currentParent.nodeName !== 'DIV') {
                                         // eslint-disable-next-line @typescript-eslint/no-unused-vars
                                         newElem = _this.parent.formatter.editorManager.nodeCutter.SplitNode(_this.range, currentParent, false).cloneNode(true);
                                         _this.parent.formatter.editorManager.domNode.insertAfter(outerBRElem, currentParent);

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

@@ -800,6 +800,9 @@ var HtmlEditor = /** @class */ (function () {
      */
     HtmlEditor.prototype.onPropertyChanged = function (e) {
         // On property code change here
+        if (!isNOU(e) && !isNOU(e.newProp.toolbarSettings) && !isNOU(e.newProp.toolbarSettings.enable)) {
+            this.toolbarUpdate = new HtmlToolbarStatus(this.parent);
+        }
         if (!isNullOrUndefined(e.newProp.formatter)) {
             var editElement = this.contentRenderer.getEditPanel();
             var option = { undoRedoSteps: this.parent.undoRedoSteps,

package/src/rich-text-editor/actions/paste-clean-up.js

@@ -269,7 +269,7 @@ var PasteCleanup = /** @class */ (function () {
         var popupEle = this.parent.createElement('div');
         this.parent.element.appendChild(popupEle);
         var contentEle = this.parent.createElement('input', {
-            id: this.parent.element.id + '_upload', attrs: { type: 'File', name: 'UploadFiles' }
+            id: this.parent.getID() + '_upload', attrs: { type: 'File', name: 'UploadFiles' }
         });
         var offsetY = this.parent.iframeSettings.enable ? -50 : -90;
         this.popupObj = new Popup(popupEle, {
@@ -900,7 +900,9 @@ var PasteCleanup = /** @class */ (function () {
     PasteCleanup.prototype.findDetachEmptyElem = function (element) {
         var removableElement;
         if (!isNOU(element.parentElement)) {
-            if (element.parentElement.textContent.trim() === '' &&
+            var hasNbsp = element.parentElement.textContent.length > 0 && element.parentElement.textContent.match(/\u00a0/g)
+                && element.parentElement.textContent.match(/\u00a0/g).length > 0;
+            if (!hasNbsp && element.parentElement.textContent.trim() === '' &&
                 element.parentElement.getAttribute('class') !== 'pasteContent') {
                 removableElement = this.findDetachEmptyElem(element.parentElement);
             }

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

@@ -149,7 +149,7 @@ var QuickToolbar = /** @class */ (function () {
 
      */
     QuickToolbar.prototype.showInlineQTBar = function (x, y, target) {
-        if (this.parent.readonly || target.tagName.toLowerCase() === 'img') {
+        if (isNOU(this.parent) || this.parent.readonly || target.tagName.toLowerCase() === 'img') {
             return;
         }
         this.inlineQTBar.showPopup(x, y, target);
@@ -519,6 +519,9 @@ var QuickToolbar = /** @class */ (function () {
         this.parent.off(events.rtlMode, this.setRtl);
         this.parent.off(events.bindCssClass, this.setCssClass);
         this.parent.off(events.hidePopup, this.hideQuickToolbars);
+        if (this.deBouncer) {
+            clearTimeout(this.deBouncer);
+        }
     };
     /**
      * Called internally if any of the property value changed.

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

@@ -156,7 +156,6 @@ export declare class Toolbar {
     private focusChangeHandler;
     private dropDownBeforeOpenHandler;
     private tbFocusHandler;
-    private tbKeydownHandler;
     private toolbarClickHandler;
     protected wireEvents(): void;
     protected unWireEvents(): void;

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

@@ -557,12 +557,6 @@ var Toolbar = /** @class */ (function () {
             }
         }
     };
-    Toolbar.prototype.tbKeydownHandler = function (e) {
-        if (e.target.classList.contains('e-dropdown-btn') ||
-            e.target.getAttribute('id') === this.parent.getID() + '_toolbar_CreateTable') {
-            e.target.setAttribute('tabindex', '0');
-        }
-    };
     Toolbar.prototype.toolbarClickHandler = function (e) {
         var trg = closest(e.originalEvent.target, '.e-hor-nav');
         if (trg && this.parent.toolbarSettings.type === ToolbarType.Expand && !isNOU(trg)) {
@@ -592,11 +586,9 @@ var Toolbar = /** @class */ (function () {
             return;
         }
         EventHandler.add(this.tbElement, 'focusin', this.tbFocusHandler, this);
-        EventHandler.add(this.tbElement, 'keydown', this.tbKeydownHandler, this);
     };
     Toolbar.prototype.unWireEvents = function () {
         EventHandler.remove(this.tbElement, 'focusin', this.tbFocusHandler);
-        EventHandler.remove(this.tbElement, 'keydown', this.tbKeydownHandler);
     };
     Toolbar.prototype.addEventListener = function () {
         if (this.parent.isDestroyed) {

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

@@ -601,3 +601,8 @@ export declare const CLS_RTE_TB_ENABLED: string;
 
  */
 export declare const CLS_RTE_RES_WEST: string;
+/**
+ * @hidden
+
+ */
+export declare const CLS_RTE_SOURCE_CODE_TXTAREA: string;

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

@@ -601,3 +601,8 @@ export var CLS_RTE_TB_ENABLED = 'e-rte-toolbar-enabled';
 
  */
 export var CLS_RTE_RES_WEST = 'e-south-west';
+/**
+ * @hidden
+
+ */
+export var CLS_RTE_SOURCE_CODE_TXTAREA = 'e-rte-srctextarea';

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

@@ -258,6 +258,7 @@ export interface NotifyArgs {
     allowedStylePropertiesArray?: string[];
     formatPainterSettings?: FormatPainterSettingsModel;
     emojiPickerSettings?: EmojiSettingsModel;
+    ariaLabel?: string;
 }
 /**
  * Provides information about the current and previous cssClass property .

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

@@ -1585,4 +1585,16 @@ export declare class RichTextEditor extends Component<HTMLElement> implements IN
     private editorKeyDown;
     private unWireEvents;
     private unbindEvents;
+    /**
+     *
+     * @param e Focus event
+     * @returns string Returns the current focus either `editArea` or `toolbar` or `textArea` or `sourceCode` or `outside` of the RichTextEditor.
+     * @hidden
+     */
+    private getCurrentFocus;
+    /**
+     * @param {FocusEvent} e - specifies the event.
+     * @hidden
+     */
+    private resetToolbarTabIndex;
 }

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

@@ -762,10 +762,10 @@ var RichTextEditor = /** @class */ (function (_super) {
             }
             switch (e.action) {
                 case 'toolbar-focus':
-                    if (this.toolbarSettings.enable) {
-                        // eslint-disable-next-line
-                        var selector = '.e-toolbar-item[title] [tabindex]';
-                        this.toolbarModule.baseToolbar.toolbarObj.element.querySelector(selector).focus();
+                    if (this.toolbarSettings.enable && this.getToolbarElement()) {
+                        var firstActiveItem = this.getToolbarElement().querySelector('.e-toolbar-item:not(.e-overlay)[title]');
+                        firstActiveItem.firstElementChild.removeAttribute('tabindex');
+                        firstActiveItem.firstElementChild.focus();
                     }
                     break;
                 case 'escape':
@@ -2128,15 +2128,10 @@ var RichTextEditor = /** @class */ (function (_super) {
             }
             EventHandler.add(document, 'mousedown', this.onDocumentClick, this);
         }
-        if (!isNOU(this.getToolbarElement())) {
-            var toolbarItem = this.getToolbarElement().querySelectorAll('input,select,button,a,[tabindex]');
-            for (var i = 0; i < toolbarItem.length; i++) {
-                if ((!toolbarItem[i].classList.contains('e-rte-dropdown-btn') &&
-                    !toolbarItem[i].classList.contains('e-insert-table-btn')) &&
-                    (!toolbarItem[i].hasAttribute('tabindex') ||
-                        toolbarItem[i].getAttribute('tabindex') !== '-1')) {
-                    toolbarItem[i].setAttribute('tabindex', '-1');
-                }
+        if (!this.readonly) {
+            var currentFocus = this.getCurrentFocus(e);
+            if (currentFocus === 'editArea' || currentFocus === 'textArea' || currentFocus === 'sourceCode') {
+                this.resetToolbarTabIndex();
             }
         }
     };
@@ -2253,6 +2248,9 @@ var RichTextEditor = /** @class */ (function (_super) {
         else {
             this.isRTE = true;
         }
+        if (!this.readonly && this.getCurrentFocus(e) === 'outside') {
+            this.resetToolbarTabIndex();
+        }
     };
     /**
      * invokeChangeEvent method
@@ -2507,6 +2505,44 @@ var RichTextEditor = /** @class */ (function (_super) {
         }
         this.unWireScrollElementsEvents();
     };
+    /**
+     *
+     * @param e Focus event
+     * @returns string Returns the current focus either `editArea` or `toolbar` or `textArea` or `sourceCode` or `outside` of the RichTextEditor.
+     * @hidden
+     */
+    RichTextEditor.prototype.getCurrentFocus = function (e) {
+        if (e.target === this.inputElement && document.activeElement === this.inputElement) {
+            return 'editArea';
+        }
+        else if (e.target === this.getToolbarElement() || (!isNOU(e.relatedTarget) && closest(e.relatedTarget, '.e-rte-toolbar') === this.getToolbarElement())) {
+            return 'toolbar';
+        }
+        else if (e.target === this.valueContainer && document.activeElement === this.valueContainer) {
+            return 'textArea';
+        }
+        else if (!isNOU(e.target) && e.target.classList.contains(classes.CLS_RTE_SOURCE_CODE_TXTAREA) && document.activeElement === e.target) {
+            return 'sourceCode';
+        }
+        return 'outside';
+    };
+    /**
+     * @param {FocusEvent} e - specifies the event.
+     * @hidden
+     */
+    RichTextEditor.prototype.resetToolbarTabIndex = function () {
+        if (this.getToolbarElement()) {
+            var toolbarItem = this.getToolbarElement().querySelectorAll('input,select,button,a,[tabindex]');
+            for (var i = 0; i < toolbarItem.length; i++) {
+                if ((!toolbarItem[i].classList.contains('e-rte-dropdown-btn') &&
+                    !toolbarItem[i].classList.contains('e-insert-table-btn')) &&
+                    (!toolbarItem[i].hasAttribute('tabindex') ||
+                        toolbarItem[i].getAttribute('tabindex') !== '-1')) {
+                    toolbarItem[i].setAttribute('tabindex', '-1');
+                }
+            }
+        }
+    };
     __decorate([
         Complex({}, ToolbarSettings)
     ], RichTextEditor.prototype, "toolbarSettings", void 0);

package/src/rich-text-editor/models/default-locale.js

@@ -198,6 +198,7 @@ export var defaultLocale = {
     'emojiPickerTypeToFind': 'Type to find',
     'emojiPickerNoResultFound': 'No results found',
     'emojiPickerTrySomethingElse': 'Try something else',
+    'linkAriaLabel': 'Open in new window',
 };
 export var toolsLocale = {
     'alignments': 'alignments',

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

@@ -555,7 +555,6 @@ var Audio = /** @class */ (function () {
             enableRtl: this.parent.enableRtl,
             locale: this.parent.locale,
             showCloseIcon: true, closeOnEscape: true, width: (Browser.isDevice) ? '290px' : '340px',
-            position: { X: 'center', Y: (Browser.isDevice) ? 'center' : 'top' },
             isModal: Browser.isDevice,
             buttons: [{
                     click: this.insertAudioUrl.bind(selectObj),

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

@@ -24,6 +24,7 @@ export declare class DialogRenderer {
     private beforeOpenCallback;
     private open;
     private beforeClose;
+    private getDialogPosition;
     /**
      * dialog close method
      *

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

@@ -35,6 +35,7 @@ var DialogRenderer = /** @class */ (function () {
         var dlgObj;
         e.beforeOpen = this.beforeOpen.bind(this);
         e.open = this.open.bind(this);
+        e.position = { X: 'center', Y: this.getDialogPosition() };
         if (isNOU(e.close)) {
             e.close = this.close.bind(this);
         }
@@ -79,6 +80,16 @@ var DialogRenderer = /** @class */ (function () {
             }
         });
     };
+    DialogRenderer.prototype.getDialogPosition = function () {
+        var distanceFromVisibleTop = this.parent.element.getBoundingClientRect().top;
+        if (distanceFromVisibleTop < 0) {
+            distanceFromVisibleTop = Math.abs(distanceFromVisibleTop);
+            return distanceFromVisibleTop.toString();
+        }
+        else {
+            return 'top';
+        }
+    };
     /**
      * dialog close method
      *

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

@@ -1007,7 +1007,6 @@ var Image = /** @class */ (function () {
                 width: '290px',
                 header: this.parent.localeObj.getConstant('imageInsertLinkHeader'),
                 content: linkWrap,
-                position: { X: 'center', Y: 'center' },
                 buttons: [{
                         // eslint-disable-next-line
                         click: function (e) {
@@ -1057,7 +1056,7 @@ var Image = /** @class */ (function () {
                 alt: inputAlt
             };
             this.dialogObj.setProperties({
-                height: 'inherit', width: '290px', header: altHeader, content: altWrap, position: { X: 'center', Y: 'center' },
+                height: 'inherit', width: '290px', header: altHeader, content: altWrap,
                 buttons: [{
                         // eslint-disable-next-line
                         click: function (e) {
@@ -1284,7 +1283,7 @@ var Image = /** @class */ (function () {
             var dialogContent = this.imgsizeInput(e);
             var selectObj_1 = { args: e.args, selfImage: this, selection: e.selection, selectNode: e.selectNode };
             this.dialogObj.setProperties({
-                height: (Browser.isDevice) ? '300px' : 'inherit', width: '290px', header: imgSizeHeader, content: dialogContent, position: { X: 'center', Y: 'center' },
+                height: (Browser.isDevice) ? '300px' : 'inherit', width: '290px', header: imgSizeHeader, content: dialogContent,
                 buttons: [{
                         // eslint-disable-next-line
                         click: function (e) {
@@ -1350,7 +1349,6 @@ var Image = /** @class */ (function () {
             enableRtl: this.parent.enableRtl,
             locale: this.parent.locale,
             showCloseIcon: true, closeOnEscape: true, width: (Browser.isDevice) ? '290px' : '340px',
-            position: { X: 'center', Y: (Browser.isDevice) ? 'center' : 'top' },
             isModal: Browser.isDevice,
             buttons: [{
                     click: this.insertImageUrl.bind(selectObj),

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

@@ -365,6 +365,7 @@ var Link = /** @class */ (function () {
             linkTitle = linkEle.querySelector('.e-rte-linkTitle').value;
         }
         var target = (this.selfLink.checkBoxObj.checked) ? '_blank' : null;
+        var linkLabel = (this.selfLink.checkBoxObj.checked) ? this.selfLink.i10n.getConstant('linkAriaLabel') : null;
         if (linkUrl === '') {
             this.selfLink.checkUrl(true);
             return;
@@ -395,7 +396,7 @@ var Link = /** @class */ (function () {
             this.selectParent = proxy.parent.formatter.editorManager.nodeSelection.getParentNodeCollection(range);
         }
         var value = {
-            url: linkUrl, text: linkText, title: linkTitle, target: target,
+            url: linkUrl, text: linkText, title: linkTitle, target: target, ariaLabel: linkLabel,
             selection: this.selection, selectParent: this.selectParent
         };
         if (document.body.contains(proxy.dialogObj.element)) {

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

@@ -44,6 +44,7 @@ export declare class Table {
     private afterRender;
     private dropdownSelect;
     private UpdateCells;
+    private keyUp;
     private keyDown;
     private tableModulekeyUp;
     private openDialog;

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

@@ -40,6 +40,7 @@ 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.mouseUp, this.selectionTable, this);
         this.parent.on(events.tableModulekeyUp, this.tableModulekeyUp, this);
         this.parent.on(events.bindCssClass, this.setCssClass, this);
@@ -62,6 +63,7 @@ var Table = /** @class */ (function () {
         this.parent.off(events.dropDownSelect, this.dropdownSelect);
         this.parent.off(events.mouseDown, this.cellSelect);
         this.parent.off(events.tableColorPickerChanged, this.setBGColor);
+        this.parent.off(events.keyUp, this.keyUp);
         this.parent.off(events.keyDown, this.keyDown);
         this.parent.off(events.mouseUp, this.selectionTable);
         this.parent.off(events.tableModulekeyUp, this.tableModulekeyUp);
@@ -166,6 +168,12 @@ 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) {
+            this.popupObj.hide();
+        }
+    };
     Table.prototype.keyDown = function (e) {
         var event = e.args;
         // eslint-disable-next-line
@@ -1351,7 +1359,7 @@ var Table = /** @class */ (function () {
             value: 3,
             placeholder: tableRow,
             floatLabelType: 'Auto',
-            max: 50,
+            max: 1000,
             enableRtl: this.parent.enableRtl, locale: this.parent.locale,
             cssClass: this.parent.cssClass
         });

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

@@ -34,7 +34,7 @@ var ToolbarRenderer = /** @class */ (function () {
     };
     ToolbarRenderer.prototype.destroyTooltip = function () {
         if (!isNullOrUndefined(document.querySelector('.e-tooltip-wrap')) && !isNullOrUndefined(document.querySelector(' [data-tooltip-id]'))) {
-            var tooltipTargetEle = document.querySelector('#' + (this.parent.element).id + ' [data-tooltip-id]');
+            var tooltipTargetEle = this.parent.element.querySelector('[data-tooltip-id]');
             var event_1 = new MouseEvent('mouseleave', { bubbles: true, cancelable: true });
             tooltipTargetEle.dispatchEvent(event_1);
         }
@@ -195,17 +195,86 @@ var ToolbarRenderer = /** @class */ (function () {
                     return;
                 }
                 // eslint-disable-next-line
-                for (var index = 0; index < args.element.childNodes.length; index++) {
-                    var divNode = _this.parent.createElement('div');
-                    divNode.innerHTML = dropDown.content.trim();
-                    if (divNode.textContent.trim() !== ''
-                        && args.element.childNodes[index].textContent.trim() === divNode.textContent.trim()) {
-                        if (!args.element.childNodes[index].classList.contains('e-active')) {
-                            addClass([args.element.childNodes[index]], 'e-active');
+                // Table styles dropdown preselect
+                if (proxy.parent.editorMode !== 'Markdown') {
+                    var startNode = proxy.parent.getRange().startContainer.parentElement;
+                    var tableEle = startNode.closest('table');
+                    var trow = startNode.closest('tr');
+                    if (!isNOU(tableEle) && tableEle.classList.contains('e-dashed-border')) {
+                        for (var index = 0; index < args.element.childNodes.length; index++) {
+                            if (args.element.childNodes[index].classList.contains('e-dashed-borders')) {
+                                addClass([args.element.childNodes[index]], 'e-active');
+                            }
                         }
                     }
-                    else {
-                        removeClass([args.element.childNodes[index]], 'e-active');
+                    else if (!isNOU(tableEle) && !tableEle.classList.contains('e-dashed-border') && tableEle.classList.contains('e-alternate-rows') && window.getComputedStyle(trow).backgroundColor !== '') {
+                        for (var index = 0; index < args.element.childNodes.length; index++) {
+                            if (args.element.childNodes[index].classList.contains('e-alternate-rows')) {
+                                addClass([args.element.childNodes[index]], 'e-active');
+                            }
+                        }
+                    }
+                    //Alignments preselect
+                    var alignEle = proxy.parent.getRange().startContainer;
+                    while (alignEle !== proxy.parent.element.querySelector('.e-content') && !isNOU(alignEle.parentElement)) {
+                        if (alignEle.nodeName === '#text') {
+                            alignEle = alignEle.parentElement;
+                        }
+                        var alignStyle = window.getComputedStyle(alignEle).textAlign;
+                        if (args.items[0].command === 'Alignments') {
+                            if ((args.items[0].text === 'Align Left' && (alignStyle === 'left') || alignStyle === 'start')) {
+                                addClass([args.element.childNodes[0]], 'e-active');
+                                break;
+                            }
+                            else if (args.items[1].text === 'Align Center' && alignStyle === 'center') {
+                                addClass([args.element.childNodes[1]], 'e-active');
+                                break;
+                            }
+                            else if (args.items[2].text === 'Align Right' && alignStyle === 'right') {
+                                addClass([args.element.childNodes[2]], 'e-active');
+                                break;
+                            }
+                            else if (args.items[3].text === 'Align Justify' && alignStyle === 'justify') {
+                                addClass([args.element.childNodes[3]], 'e-active');
+                                break;
+                            }
+                        }
+                        alignEle = alignEle.parentElement;
+                    }
+                    //image preselect
+                    var imageEle = startNode.closest('img') ? startNode.closest('img') : startNode.querySelector('img');
+                    if (args.items[0].command === 'Images') {
+                        if (!isNOU(imageEle)) {
+                            var index = void 0;
+                            if (imageEle.classList.contains('e-imgleft') || imageEle.classList.contains('e-imginline')) {
+                                index = 0;
+                            }
+                            else if (imageEle.classList.contains('e-imgcenter') || imageEle.classList.contains('e-imgbreak')) {
+                                index = 1;
+                            }
+                            else if (imageEle.classList.contains('e-imgright')) {
+                                index = 2;
+                            }
+                            if (!isNOU(args.element.childNodes[index])) {
+                                addClass([args.element.childNodes[index]], 'e-active');
+                            }
+                        }
+                    }
+                    //Formats preselect
+                    if (args.items[0].command === 'Formats') {
+                        for (var index = 0; index < args.element.childNodes.length; index++) {
+                            var divNode = _this.parent.createElement('div');
+                            divNode.innerHTML = dropDown.content.trim();
+                            if (divNode.textContent.trim() !== ''
+                                && args.element.childNodes[index].textContent.trim() === divNode.textContent.trim()) {
+                                if (!args.element.childNodes[index].classList.contains('e-active')) {
+                                    addClass([args.element.childNodes[index]], 'e-active');
+                                }
+                            }
+                            else {
+                                removeClass([args.element.childNodes[index]], 'e-active');
+                            }
+                        }
                     }
                 }
                 proxy.parent.notify(events.beforeDropDownOpen, args);

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

@@ -143,7 +143,7 @@ var Video = /** @class */ (function () {
             var dialogContent = this.vidsizeInput(e);
             var selectObj_1 = { args: e.args, selfVideo: this, selection: e.selection, selectNode: e.selectNode };
             this.dialogObj.setProperties({
-                height: 'inherit', width: '290px', header: vidSizeHeader, content: dialogContent, position: { X: 'center', Y: 'center' },
+                height: 'inherit', width: '290px', header: vidSizeHeader, content: dialogContent,
                 buttons: [{
                         // eslint-disable-next-line
                         click: function (e) {
@@ -1048,7 +1048,6 @@ var Video = /** @class */ (function () {
             enableRtl: this.parent.enableRtl,
             locale: this.parent.locale,
             showCloseIcon: true, closeOnEscape: true, width: (Browser.isDevice) ? '290px' : '340px',
-            position: { X: 'center', Y: (Browser.isDevice) ? 'center' : 'top' },
             isModal: Browser.isDevice,
             buttons: [{
                     click: this.insertVideoUrl.bind(selectObj),