@syncfusion/ej2-richtexteditor 23.2.5 → 23.2.7

package/dist/es6/ej2-richtexteditor.es2015.js

@@ -1365,6 +1365,11 @@ const CLS_RTE_TB_ENABLED = 'e-rte-toolbar-enabled';
  * @deprecated
  */
 const CLS_RTE_RES_WEST = 'e-south-west';
+/**
+ * @hidden
+ * @deprecated
+ */
+const CLS_RTE_SOURCE_CODE_TXTAREA = 'e-rte-srctextarea';
 
 /**
  * Defines types of Render
@@ -2604,6 +2609,7 @@ let defaultLocale = {
     'emojiPickerTypeToFind': 'Type to find',
     'emojiPickerNoResultFound': 'No results found',
     'emojiPickerTrySomethingElse': 'Try something else',
+    'linkAriaLabel': 'Open in new window',
 };
 let toolsLocale = {
     'alignments': 'alignments',
@@ -3339,7 +3345,7 @@ class ToolbarRenderer {
     }
     destroyTooltip() {
         if (!isNullOrUndefined(document.querySelector('.e-tooltip-wrap')) && !isNullOrUndefined(document.querySelector(' [data-tooltip-id]'))) {
-            const tooltipTargetEle = document.querySelector('#' + (this.parent.element).id + ' [data-tooltip-id]');
+            const tooltipTargetEle = this.parent.element.querySelector('[data-tooltip-id]');
             const event = new MouseEvent('mouseleave', { bubbles: true, cancelable: true });
             tooltipTargetEle.dispatchEvent(event);
         }
@@ -3499,17 +3505,86 @@ class ToolbarRenderer {
                     return;
                 }
                 // eslint-disable-next-line
-                for (let index = 0; index < args.element.childNodes.length; index++) {
-                    const 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') {
+                    const startNode = proxy.parent.getRange().startContainer.parentElement;
+                    const tableEle = startNode.closest('table');
+                    const trow = startNode.closest('tr');
+                    if (!isNullOrUndefined(tableEle) && tableEle.classList.contains('e-dashed-border')) {
+                        for (let 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 (!isNullOrUndefined(tableEle) && !tableEle.classList.contains('e-dashed-border') && tableEle.classList.contains('e-alternate-rows') && window.getComputedStyle(trow).backgroundColor !== '') {
+                        for (let 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
+                    let alignEle = proxy.parent.getRange().startContainer;
+                    while (alignEle !== proxy.parent.element.querySelector('.e-content') && !isNullOrUndefined(alignEle.parentElement)) {
+                        if (alignEle.nodeName === '#text') {
+                            alignEle = alignEle.parentElement;
+                        }
+                        const 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
+                    const imageEle = startNode.closest('img') ? startNode.closest('img') : startNode.querySelector('img');
+                    if (args.items[0].command === 'Images') {
+                        if (!isNullOrUndefined(imageEle)) {
+                            let index;
+                            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 (!isNullOrUndefined(args.element.childNodes[index])) {
+                                addClass([args.element.childNodes[index]], 'e-active');
+                            }
+                        }
+                    }
+                    //Formats preselect
+                    if (args.items[0].command === 'Formats') {
+                        for (let index = 0; index < args.element.childNodes.length; index++) {
+                            const 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(beforeDropDownOpen, args);
@@ -5347,12 +5422,6 @@ class Toolbar$2 {
             }
         }
     }
-    tbKeydownHandler(e) {
-        if (e.target.classList.contains('e-dropdown-btn') ||
-            e.target.getAttribute('id') === this.parent.getID() + '_toolbar_CreateTable') {
-            e.target.setAttribute('tabindex', '0');
-        }
-    }
     toolbarClickHandler(e) {
         const trg = closest(e.originalEvent.target, '.e-hor-nav');
         if (trg && this.parent.toolbarSettings.type === ToolbarType.Expand && !isNullOrUndefined(trg)) {
@@ -5382,11 +5451,9 @@ class Toolbar$2 {
             return;
         }
         EventHandler.add(this.tbElement, 'focusin', this.tbFocusHandler, this);
-        EventHandler.add(this.tbElement, 'keydown', this.tbKeydownHandler, this);
     }
     unWireEvents() {
         EventHandler.remove(this.tbElement, 'focusin', this.tbFocusHandler);
-        EventHandler.remove(this.tbElement, 'keydown', this.tbKeydownHandler);
     }
     addEventListener() {
         if (this.parent.isDestroyed) {
@@ -6599,7 +6666,7 @@ class QuickToolbar {
      * @deprecated
      */
     showInlineQTBar(x, y, target) {
-        if (this.parent.readonly || target.tagName.toLowerCase() === 'img') {
+        if (isNullOrUndefined(this.parent) || this.parent.readonly || target.tagName.toLowerCase() === 'img') {
             return;
         }
         this.inlineQTBar.showPopup(x, y, target);
@@ -6967,6 +7034,9 @@ class QuickToolbar {
         this.parent.off(rtlMode, this.setRtl);
         this.parent.off(bindCssClass, this.setCssClass);
         this.parent.off(hidePopup, this.hideQuickToolbars);
+        if (this.deBouncer) {
+            clearTimeout(this.deBouncer);
+        }
     }
     /**
      * Called internally if any of the property value changed.
@@ -13585,7 +13655,9 @@ class InsertHtml {
     static findDetachEmptyElem(element) {
         let removableElement;
         if (!isNullOrUndefined(element.parentElement)) {
-            if (element.parentElement.textContent.trim() === '' && element.parentElement.contentEditable !== 'true' &&
+            const 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' &&
                 isNullOrUndefined(element.parentElement.querySelector('img'))) {
                 removableElement = this.findDetachEmptyElem(element.parentElement);
             }
@@ -13699,9 +13771,11 @@ class LinkCommand {
             }
             if (!isNullOrUndefined(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);
@@ -17810,7 +17884,9 @@ class MsWordPaste {
                     isNullOrUndefined(allElements[i].nextElementSibling)))) {
                 const detachableElement = this.findDetachElem(allElements[i]);
                 const brElement = createElement('br');
-                if (!isNullOrUndefined(detachableElement.parentElement)) {
+                const hasNbsp = detachableElement.textContent.length > 0 && detachableElement.textContent.match(/\u00a0/g)
+                    && detachableElement.textContent.match(/\u00a0/g).length > 0;
+                if (!hasNbsp && !isNullOrUndefined(detachableElement.parentElement)) {
                     detachableElement.parentElement.insertBefore(brElement, detachableElement);
                     detach(detachableElement);
                 }
@@ -17849,7 +17925,9 @@ class MsWordPaste {
     findDetachEmptyElem(element) {
         let removableElement;
         if (!isNullOrUndefined(element.parentElement)) {
-            if (element.parentElement.textContent.trim() === '' &&
+            const 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')) &&
                 isNullOrUndefined(element.parentElement.querySelector('img'))) {
@@ -20954,6 +21032,9 @@ class HtmlEditor {
      */
     onPropertyChanged(e) {
         // On property code change here
+        if (!isNullOrUndefined(e) && !isNullOrUndefined(e.newProp.toolbarSettings) && !isNullOrUndefined(e.newProp.toolbarSettings.enable)) {
+            this.toolbarUpdate = new HtmlToolbarStatus(this.parent);
+        }
         if (!isNullOrUndefined(e.newProp.formatter)) {
             const editElement = this.contentRenderer.getEditPanel();
             const option = { undoRedoSteps: this.parent.undoRedoSteps,
@@ -21259,7 +21340,7 @@ class PasteCleanup {
         const popupEle = this.parent.createElement('div');
         this.parent.element.appendChild(popupEle);
         const 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' }
         });
         const offsetY = this.parent.iframeSettings.enable ? -50 : -90;
         this.popupObj = new Popup(popupEle, {
@@ -21879,7 +21960,9 @@ class PasteCleanup {
     findDetachEmptyElem(element) {
         let removableElement;
         if (!isNullOrUndefined(element.parentElement)) {
-            if (element.parentElement.textContent.trim() === '' &&
+            const 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);
             }
@@ -24041,6 +24124,7 @@ class Link {
             linkTitle = linkEle.querySelector('.e-rte-linkTitle').value;
         }
         const target = (this.selfLink.checkBoxObj.checked) ? '_blank' : null;
+        const linkLabel = (this.selfLink.checkBoxObj.checked) ? this.selfLink.i10n.getConstant('linkAriaLabel') : null;
         if (linkUrl === '') {
             this.selfLink.checkUrl(true);
             return;
@@ -24071,7 +24155,7 @@ class Link {
             this.selectParent = proxy.parent.formatter.editorManager.nodeSelection.getParentNodeCollection(range);
         }
         const 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)) {
@@ -25215,7 +25299,6 @@ class Image$1 {
                 width: '290px',
                 header: this.parent.localeObj.getConstant('imageInsertLinkHeader'),
                 content: linkWrap,
-                position: { X: 'center', Y: 'center' },
                 buttons: [{
                         // eslint-disable-next-line
                         click: (e) => {
@@ -25264,7 +25347,7 @@ class Image$1 {
                 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: (e) => {
@@ -25490,7 +25573,7 @@ class Image$1 {
             const dialogContent = this.imgsizeInput(e);
             const selectObj = { 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: (e) => {
@@ -25555,7 +25638,6 @@ class Image$1 {
             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),
@@ -27036,7 +27118,6 @@ class Audio {
             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),
@@ -27465,7 +27546,7 @@ class Video {
             const dialogContent = this.vidsizeInput(e);
             const selectObj = { 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: (e) => {
@@ -28365,7 +28446,6 @@ class Video {
             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),
@@ -28766,7 +28846,7 @@ class ViewSource {
         this.parent.formatter.editorManager.observer.off(KEY_DOWN_HANDLER, this.onKeyDown);
     }
     getSourceCode() {
-        return this.parent.createElement('textarea', { className: 'e-rte-srctextarea' + ' ' + this.parent.cssClass });
+        return this.parent.createElement('textarea', { className: CLS_RTE_SOURCE_CODE_TXTAREA + ' ' + this.parent.cssClass });
     }
     wireEvent(element) {
         this.keyboardModule = new KeyboardEvents$1(element, {
@@ -28800,9 +28880,10 @@ class ViewSource {
                 event.preventDefault();
                 break;
             case 'toolbar-focus':
-                if (this.parent.toolbarSettings.enable) {
-                    const selector = '.e-toolbar-item[title] [tabindex]';
-                    this.parent.toolbarModule.baseToolbar.toolbarObj.element.querySelector(selector).focus();
+                if (this.parent.toolbarSettings.enable && this.parent.getToolbarElement()) {
+                    const firstActiveItem = this.parent.getToolbarElement().querySelector('.e-toolbar-item:not(.e-overlay)[title]');
+                    firstActiveItem.firstElementChild.removeAttribute('tabindex');
+                    firstActiveItem.firstElementChild.focus();
                 }
                 break;
         }
@@ -28844,13 +28925,13 @@ class ViewSource {
         this.parent.updateValueData();
         if (this.parent.iframeSettings.enable) {
             let rteContent;
-            if (isNullOrUndefined(this.parent.element.querySelector('#' + this.parent.element.id + '_source-view'))) {
+            if (isNullOrUndefined(this.parent.element.querySelector('#' + this.parent.getID() + '_source-view'))) {
                 rteContent = this.parent.createElement('div', {
-                    className: 'e-source-content', id: this.parent.element.id + '_source-view'
+                    className: 'e-source-content', id: this.parent.getID() + '_source-view'
                 });
             }
             else {
-                rteContent = this.parent.element.querySelector('#' + this.parent.element.id + '_source-view');
+                rteContent = this.parent.element.querySelector('#' + this.parent.getID() + '_source-view');
             }
             rteContent.appendChild(this.previewElement);
             this.parent.element.appendChild(rteContent);
@@ -29030,6 +29111,7 @@ class Table {
         this.parent.on(tableToolbarAction, this.onToolbarAction, this);
         this.parent.on(dropDownSelect, this.dropdownSelect, this);
         this.parent.on(keyDown, this.keyDown, this);
+        this.parent.on(keyUp, this.keyUp, this);
         this.parent.on(mouseUp, this.selectionTable, this);
         this.parent.on(tableModulekeyUp, this.tableModulekeyUp, this);
         this.parent.on(bindCssClass, this.setCssClass, this);
@@ -29052,6 +29134,7 @@ class Table {
         this.parent.off(dropDownSelect, this.dropdownSelect);
         this.parent.off(mouseDown, this.cellSelect);
         this.parent.off(tableColorPickerChanged, this.setBGColor);
+        this.parent.off(keyUp, this.keyUp);
         this.parent.off(keyDown, this.keyDown);
         this.parent.off(mouseUp, this.selectionTable);
         this.parent.off(tableModulekeyUp, this.tableModulekeyUp);
@@ -29156,6 +29239,12 @@ class Table {
         this.parent.formatter.process(this.parent, e, e, { selection: selectCell, subCommand: e.item.subCommand });
         this.hideTableQuickToolbar();
     }
+    keyUp(e) {
+        const 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();
+        }
+    }
     keyDown(e) {
         const event = e.args;
         // eslint-disable-next-line
@@ -30337,7 +30426,7 @@ class Table {
             value: 3,
             placeholder: tableRow,
             floatLabelType: 'Auto',
-            max: 50,
+            max: 1000,
             enableRtl: this.parent.enableRtl, locale: this.parent.locale,
             cssClass: this.parent.cssClass
         });
@@ -30557,6 +30646,7 @@ class DialogRenderer {
         let dlgObj;
         e.beforeOpen = this.beforeOpen.bind(this);
         e.open = this.open.bind(this);
+        e.position = { X: 'center', Y: this.getDialogPosition() };
         if (isNullOrUndefined(e.close)) {
             e.close = this.close.bind(this);
         }
@@ -30601,6 +30691,16 @@ class DialogRenderer {
             }
         });
     }
+    getDialogPosition() {
+        let distanceFromVisibleTop = this.parent.element.getBoundingClientRect().top;
+        if (distanceFromVisibleTop < 0) {
+            distanceFromVisibleTop = Math.abs(distanceFromVisibleTop);
+            return distanceFromVisibleTop.toString();
+        }
+        else {
+            return 'top';
+        }
+    }
     /**
      * dialog close method
      *
@@ -31653,7 +31753,7 @@ class EnterKeyAction {
                                     let newElem;
                                     const outerBRElem = this.parent.createElement('br');
                                     if (this.range.startOffset === 0 && this.range.endOffset === 0 &&
-                                        !isNullOrUndefined(currentParent.previousSibling) && currentParent.previousSibling.nodeName === 'BR') {
+                                        !isNullOrUndefined(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);
@@ -32456,10 +32556,10 @@ let RichTextEditor = class RichTextEditor extends Component {
             }
             switch (e.action) {
                 case 'toolbar-focus':
-                    if (this.toolbarSettings.enable) {
-                        // eslint-disable-next-line
-                        let selector = '.e-toolbar-item[title] [tabindex]';
-                        this.toolbarModule.baseToolbar.toolbarObj.element.querySelector(selector).focus();
+                    if (this.toolbarSettings.enable && this.getToolbarElement()) {
+                        const firstActiveItem = this.getToolbarElement().querySelector('.e-toolbar-item:not(.e-overlay)[title]');
+                        firstActiveItem.firstElementChild.removeAttribute('tabindex');
+                        firstActiveItem.firstElementChild.focus();
                     }
                     break;
                 case 'escape':
@@ -33818,15 +33918,10 @@ let RichTextEditor = class RichTextEditor extends Component {
             }
             EventHandler.add(document, 'mousedown', this.onDocumentClick, this);
         }
-        if (!isNullOrUndefined(this.getToolbarElement())) {
-            const toolbarItem = this.getToolbarElement().querySelectorAll('input,select,button,a,[tabindex]');
-            for (let 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) {
+            const currentFocus = this.getCurrentFocus(e);
+            if (currentFocus === 'editArea' || currentFocus === 'textArea' || currentFocus === 'sourceCode') {
+                this.resetToolbarTabIndex();
             }
         }
     }
@@ -33943,6 +34038,9 @@ let RichTextEditor = class RichTextEditor extends Component {
         else {
             this.isRTE = true;
         }
+        if (!this.readonly && this.getCurrentFocus(e) === 'outside') {
+            this.resetToolbarTabIndex();
+        }
     }
     /**
      * invokeChangeEvent method
@@ -34194,6 +34292,44 @@ let RichTextEditor = class RichTextEditor extends Component {
         }
         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
+     */
+    getCurrentFocus(e) {
+        if (e.target === this.inputElement && document.activeElement === this.inputElement) {
+            return 'editArea';
+        }
+        else if (e.target === this.getToolbarElement() || (!isNullOrUndefined(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 (!isNullOrUndefined(e.target) && e.target.classList.contains(CLS_RTE_SOURCE_CODE_TXTAREA) && document.activeElement === e.target) {
+            return 'sourceCode';
+        }
+        return 'outside';
+    }
+    /**
+     * @param {FocusEvent} e - specifies the event.
+     * @hidden
+     */
+    resetToolbarTabIndex() {
+        if (this.getToolbarElement()) {
+            const toolbarItem = this.getToolbarElement().querySelectorAll('input,select,button,a,[tabindex]');
+            for (let 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$1([
     Complex({}, ToolbarSettings$1)
@@ -34497,5 +34633,5 @@ RichTextEditor = __decorate$1([
  * Rich Text Editor component exported items
  */
 
-export { Toolbar$2 as Toolbar, KeyboardEvents$1 as KeyboardEvents, BaseToolbar, BaseQuickToolbar, QuickToolbar, Count, ColorPickerInput, MarkdownToolbarStatus, ExecCommandCallBack, ToolbarAction, MarkdownEditor, HtmlEditor, PasteCleanup, Resize, DropDownButtons, FileManager$1 as FileManager, FullScreen, setAttributes, HtmlToolbarStatus, XhtmlValidation, FormatPainter, EmojiPicker, HTMLFormatter, Formatter, MarkdownFormatter, ContentRender, Render, ToolbarRenderer, Link, Image$1 as Image, Audio, Video, ViewSource, Table, DialogRenderer, IframeContentRender, MarkdownRender, PopupRenderer, RichTextEditor, RenderType, ToolbarType, DialogType, executeGroup, created, destroyed, tableclass, load, initialLoad, contentChanged, initialEnd, iframeMouseDown, destroy, toolbarClick, toolbarRefresh, refreshBegin, toolbarUpdated, bindOnEnd, renderColorPicker, htmlToolbarClick, markdownToolbarClick, destroyColorPicker, modelChanged, tableModulekeyUp, keyUp, keyDown, mouseUp, toolbarCreated, toolbarRenderComplete, enableFullScreen, disableFullScreen, dropDownSelect, beforeDropDownItemRender, execCommandCallBack, imageToolbarAction, audioToolbarAction, videoToolbarAction, linkToolbarAction, windowResize, resizeStart, onResize, resizeStop, undo, redo, insertLink, unLink, editLink, openLink, actionBegin, actionComplete, updatedToolbarStatus, actionSuccess, updateToolbarItem, insertImage, insertAudio, insertVideo, insertCompleted, imageLeft, imageRight, imageCenter, imageBreak, imageInline, imageLink, imageAlt, imageDelete, audioDelete, videoDelete, imageCaption, imageSize, videoSize, sourceCode, updateSource, toolbarOpen, beforeDropDownOpen, selectionSave, selectionRestore, expandPopupClick, count, contentFocus, contentBlur, mouseDown, sourceCodeMouseDown, editAreaClick, scroll, contentscroll, colorPickerChanged, tableColorPickerChanged, focusChange, selectAll$1 as selectAll, selectRange, getSelectedHtml, renderInlineToolbar, paste, imgModule, rtlMode, createTable, docClick, tableToolbarAction, checkUndo, readOnlyMode, moduleDestroy, pasteClean, enterHandler, beforeDialogOpen, clearDialogObj, dialogOpen, beforeDialogClose, dialogClose, beforeQuickToolbarOpen, quickToolbarOpen, quickToolbarClose, popupHide, imageSelected, imageUploading, imageUploadSuccess, imageUploadFailed, imageRemoving, fileSelected, fileUploading, fileUploadSuccess, fileUploadFailed, fileRemoving, afterImageDelete, afterMediaDelete, drop, xhtmlValidation, beforeImageUpload, beforeFileUpload, resizeInitialized, renderFileManager, beforeImageDrop, dynamicModule, beforePasteCleanup, afterPasteCleanup, updateTbItemsStatus, showLinkDialog, closeLinkDialog, showImageDialog, showAudioDialog, showVideoDialog, closeImageDialog, closeAudioDialog, closeVideoDialog, showTableDialog, closeTableDialog, bindCssClass, formatPainterClick, formatPainterDoubleClick, emojiPicker, maximizeMinimizeClick, hidePopup, blockEmptyNodes, inlineEmptyNodes, CLS_RTE, CLS_RTL, CLS_CONTENT, CLS_DISABLED, CLS_SCRIPT_SHEET, CLS_STYLE_SHEET, CLS_TOOLBAR, CLS_TB_FIXED, CLS_TB_FLOAT, CLS_TB_ABS_FLOAT, CLS_INLINE, CLS_TB_INLINE, CLS_RTE_EXPAND_TB, CLS_FULL_SCREEN, CLS_QUICK_TB, CLS_POP, CLS_TB_STATIC, CLS_QUICK_POP, CLS_QUICK_DROPDOWN, CLS_IMAGE_POP, CLS_TEXT_POP, CLS_INLINE_POP, CLS_INLINE_DROPDOWN, CLS_DROPDOWN_POPUP, CLS_DROPDOWN_ICONS, CLS_DROPDOWN_ITEMS, CLS_DROPDOWN_BTN, CLS_RTE_CONTENT, CLS_TB_ITEM, CLS_TB_EXTENDED, CLS_TB_WRAP, CLS_POPUP, CLS_SEPARATOR, CLS_MINIMIZE, CLS_MAXIMIZE, CLS_BACK, CLS_SHOW, CLS_HIDE, CLS_VISIBLE, CLS_FOCUS, CLS_RM_WHITE_SPACE, CLS_IMGRIGHT, CLS_IMGLEFT, CLS_IMGCENTER, CLS_IMGBREAK, CLS_AUDIOBREAK, CLS_CLICKELEM, CLS_VID_CLICK_ELEM, CLS_AUDIOWRAP, CLS_VIDEOWRAP, CLS_VIDEOBREAK, CLS_CAPTION, CLS_RTE_CAPTION, CLS_CAPINLINE, CLS_IMGINLINE, CLS_AUDIOINLINE, CLS_VIDEOINLINE, CLS_COUNT, CLS_WARNING, CLS_ERROR, CLS_ICONS, CLS_ACTIVE, CLS_EXPAND_OPEN, CLS_RTE_ELEMENTS, CLS_TB_BTN, CLS_HR_SEPARATOR, CLS_TB_IOS_FIX, CLS_LIST_PRIMARY_CONTENT, CLS_NUMBERFORMATLIST_TB_BTN, CLS_BULLETFORMATLIST_TB_BTN, CLS_FORMATS_TB_BTN, CLS_FONT_NAME_TB_BTN, CLS_FONT_SIZE_TB_BTN, CLS_ALIGN_TB_BTN, CLS_FONT_COLOR_TARGET, CLS_BACKGROUND_COLOR_TARGET, CLS_COLOR_CONTENT, CLS_FONT_COLOR_DROPDOWN, CLS_BACKGROUND_COLOR_DROPDOWN, CLS_COLOR_PALETTE, CLS_FONT_COLOR_PICKER, CLS_BACKGROUND_COLOR_PICKER, CLS_RTE_READONLY, CLS_TABLE_SEL, CLS_TB_DASH_BOR, CLS_TB_ALT_BOR, CLS_TB_COL_RES, CLS_TB_ROW_RES, CLS_TB_BOX_RES, CLS_RTE_HIDDEN, CLS_RTE_PASTE_KEEP_FORMAT, CLS_RTE_PASTE_REMOVE_FORMAT, CLS_RTE_PASTE_PLAIN_FORMAT, CLS_RTE_PASTE_OK, CLS_RTE_PASTE_CANCEL, CLS_RTE_DIALOG_MIN_HEIGHT, CLS_RTE_RES_HANDLE, CLS_RTE_RES_EAST, CLS_RTE_IMAGE, CLS_RESIZE, CLS_IMG_FOCUS, CLS_AUD_FOCUS, CLS_VID_FOCUS, CLS_RTE_DRAG_IMAGE, CLS_RTE_UPLOAD_POPUP, CLS_POPUP_OPEN, CLS_IMG_RESIZE, CLS_DROPAREA, CLS_IMG_INNER, CLS_UPLOAD_FILES, CLS_RTE_DIALOG_UPLOAD, CLS_RTE_RES_CNT, CLS_CUSTOM_TILE, CLS_NOCOLOR_ITEM, CLS_TABLE, CLS_TABLE_BORDER, CLS_RTE_TABLE_RESIZE, CLS_RTE_FIXED_TB_EXPAND, CLS_RTE_TB_ENABLED, CLS_RTE_RES_WEST, getIndex, hasClass, getDropDownValue, isIDevice, getFormattedFontSize, pageYOffset, getTooltipText, setToolbarStatus, getCollection, getTBarItemsIndex, updateUndoRedoStatus, dispatchEvent, parseHtml, getTextNodesUnder, toObjectLowerCase, getEditValue, updateTextNode, getDefaultValue, isEditableValueEmpty, decode, sanitizeHelper, convertToBlob, getLocaleFontFormat, updateDropDownFontFormatLocale, ServiceLocator, RendererFactory, EditorManager, IMAGE, AUDIO, VIDEO, TABLE, LINK, INSERT_ROW, INSERT_COLUMN, DELETEROW, DELETECOLUMN, REMOVETABLE, TABLEHEADER, TABLE_VERTICAL_ALIGN, TABLE_MERGE, TABLE_VERTICAL_SPLIT, TABLE_HORIZONTAL_SPLIT, TABLE_MOVE, ALIGNMENT_TYPE, INDENT_TYPE, DEFAULT_TAG, BLOCK_TAGS, IGNORE_BLOCK_TAGS, TABLE_BLOCK_TAGS, SELECTION_TYPE, INSERTHTML_TYPE, INSERT_TEXT_TYPE, CLEAR_TYPE, SELF_CLOSING_TAGS, CLASS_IMAGE_RIGHT, CLASS_IMAGE_LEFT, CLASS_IMAGE_CENTER, CLASS_VIDEO_RIGHT, CLASS_VIDEO_LEFT, CLASS_VIDEO_CENTER, CLASS_IMAGE_BREAK, CLASS_AUDIO_BREAK, CLASS_VIDEO_BREAK, CLASS_CAPTION, CLASS_RTE_CAPTION, CLASS_CAPTION_INLINE, CLASS_IMAGE_INLINE, CLASS_AUDIO_INLINE, CLASS_CLICK_ELEM, CLASS_VIDEO_CLICK_ELEM, CLASS_AUDIO, CLASS_VIDEO, CLASS_AUDIO_WRAP, CLASS_VIDEO_WRAP, CLASS_EMBED_VIDEO_WRAP, CLASS_AUDIO_FOCUS, CLASS_VIDEO_FOCUS, CLASS_VIDEO_INLINE, Lists, markerClassName, DOMNode, Alignments, Indents, Formats, LinkCommand, InsertMethods, InsertTextExec, InsertHtmlExec, InsertHtml, IsFormatted, MsWordPaste, NodeCutter, ImageCommand, AudioCommand, VideoCommand, SelectionCommands, SelectionBasedExec, ClearFormatExec, UndoRedoManager, TableCommand, statusCollection, ToolbarStatus, FormatPainterActions, EmojiPickerAction, NodeSelection, MarkdownParser, LISTS_COMMAND, selectionCommand, LINK_COMMAND, CLEAR_COMMAND, MD_TABLE, INSERT_TEXT_COMMAND, ClearFormat, MDLists, MDFormats, MarkdownSelection, UndoRedoCommands, MDSelectionFormats, MDLink, MDTable, markdownFormatTags, markdownSelectionTags, markdownListsTags, htmlKeyConfig, markdownKeyConfig, pasteCleanupGroupingTags, listConversionFilters, selfClosingTags, KEY_DOWN, ACTION, FORMAT_TYPE, KEY_DOWN_HANDLER, LIST_TYPE, KEY_UP_HANDLER, KEY_UP, MODEL_CHANGED_PLUGIN, MODEL_CHANGED, MS_WORD_CLEANUP_PLUGIN, MS_WORD_CLEANUP, ON_BEGIN, SPACE_ACTION, FORMAT_PAINTER_ACTIONS, EMOJI_PICKER_ACTIONS };
+export { Toolbar$2 as Toolbar, KeyboardEvents$1 as KeyboardEvents, BaseToolbar, BaseQuickToolbar, QuickToolbar, Count, ColorPickerInput, MarkdownToolbarStatus, ExecCommandCallBack, ToolbarAction, MarkdownEditor, HtmlEditor, PasteCleanup, Resize, DropDownButtons, FileManager$1 as FileManager, FullScreen, setAttributes, HtmlToolbarStatus, XhtmlValidation, FormatPainter, EmojiPicker, HTMLFormatter, Formatter, MarkdownFormatter, ContentRender, Render, ToolbarRenderer, Link, Image$1 as Image, Audio, Video, ViewSource, Table, DialogRenderer, IframeContentRender, MarkdownRender, PopupRenderer, RichTextEditor, RenderType, ToolbarType, DialogType, executeGroup, created, destroyed, tableclass, load, initialLoad, contentChanged, initialEnd, iframeMouseDown, destroy, toolbarClick, toolbarRefresh, refreshBegin, toolbarUpdated, bindOnEnd, renderColorPicker, htmlToolbarClick, markdownToolbarClick, destroyColorPicker, modelChanged, tableModulekeyUp, keyUp, keyDown, mouseUp, toolbarCreated, toolbarRenderComplete, enableFullScreen, disableFullScreen, dropDownSelect, beforeDropDownItemRender, execCommandCallBack, imageToolbarAction, audioToolbarAction, videoToolbarAction, linkToolbarAction, windowResize, resizeStart, onResize, resizeStop, undo, redo, insertLink, unLink, editLink, openLink, actionBegin, actionComplete, updatedToolbarStatus, actionSuccess, updateToolbarItem, insertImage, insertAudio, insertVideo, insertCompleted, imageLeft, imageRight, imageCenter, imageBreak, imageInline, imageLink, imageAlt, imageDelete, audioDelete, videoDelete, imageCaption, imageSize, videoSize, sourceCode, updateSource, toolbarOpen, beforeDropDownOpen, selectionSave, selectionRestore, expandPopupClick, count, contentFocus, contentBlur, mouseDown, sourceCodeMouseDown, editAreaClick, scroll, contentscroll, colorPickerChanged, tableColorPickerChanged, focusChange, selectAll$1 as selectAll, selectRange, getSelectedHtml, renderInlineToolbar, paste, imgModule, rtlMode, createTable, docClick, tableToolbarAction, checkUndo, readOnlyMode, moduleDestroy, pasteClean, enterHandler, beforeDialogOpen, clearDialogObj, dialogOpen, beforeDialogClose, dialogClose, beforeQuickToolbarOpen, quickToolbarOpen, quickToolbarClose, popupHide, imageSelected, imageUploading, imageUploadSuccess, imageUploadFailed, imageRemoving, fileSelected, fileUploading, fileUploadSuccess, fileUploadFailed, fileRemoving, afterImageDelete, afterMediaDelete, drop, xhtmlValidation, beforeImageUpload, beforeFileUpload, resizeInitialized, renderFileManager, beforeImageDrop, dynamicModule, beforePasteCleanup, afterPasteCleanup, updateTbItemsStatus, showLinkDialog, closeLinkDialog, showImageDialog, showAudioDialog, showVideoDialog, closeImageDialog, closeAudioDialog, closeVideoDialog, showTableDialog, closeTableDialog, bindCssClass, formatPainterClick, formatPainterDoubleClick, emojiPicker, maximizeMinimizeClick, hidePopup, blockEmptyNodes, inlineEmptyNodes, CLS_RTE, CLS_RTL, CLS_CONTENT, CLS_DISABLED, CLS_SCRIPT_SHEET, CLS_STYLE_SHEET, CLS_TOOLBAR, CLS_TB_FIXED, CLS_TB_FLOAT, CLS_TB_ABS_FLOAT, CLS_INLINE, CLS_TB_INLINE, CLS_RTE_EXPAND_TB, CLS_FULL_SCREEN, CLS_QUICK_TB, CLS_POP, CLS_TB_STATIC, CLS_QUICK_POP, CLS_QUICK_DROPDOWN, CLS_IMAGE_POP, CLS_TEXT_POP, CLS_INLINE_POP, CLS_INLINE_DROPDOWN, CLS_DROPDOWN_POPUP, CLS_DROPDOWN_ICONS, CLS_DROPDOWN_ITEMS, CLS_DROPDOWN_BTN, CLS_RTE_CONTENT, CLS_TB_ITEM, CLS_TB_EXTENDED, CLS_TB_WRAP, CLS_POPUP, CLS_SEPARATOR, CLS_MINIMIZE, CLS_MAXIMIZE, CLS_BACK, CLS_SHOW, CLS_HIDE, CLS_VISIBLE, CLS_FOCUS, CLS_RM_WHITE_SPACE, CLS_IMGRIGHT, CLS_IMGLEFT, CLS_IMGCENTER, CLS_IMGBREAK, CLS_AUDIOBREAK, CLS_CLICKELEM, CLS_VID_CLICK_ELEM, CLS_AUDIOWRAP, CLS_VIDEOWRAP, CLS_VIDEOBREAK, CLS_CAPTION, CLS_RTE_CAPTION, CLS_CAPINLINE, CLS_IMGINLINE, CLS_AUDIOINLINE, CLS_VIDEOINLINE, CLS_COUNT, CLS_WARNING, CLS_ERROR, CLS_ICONS, CLS_ACTIVE, CLS_EXPAND_OPEN, CLS_RTE_ELEMENTS, CLS_TB_BTN, CLS_HR_SEPARATOR, CLS_TB_IOS_FIX, CLS_LIST_PRIMARY_CONTENT, CLS_NUMBERFORMATLIST_TB_BTN, CLS_BULLETFORMATLIST_TB_BTN, CLS_FORMATS_TB_BTN, CLS_FONT_NAME_TB_BTN, CLS_FONT_SIZE_TB_BTN, CLS_ALIGN_TB_BTN, CLS_FONT_COLOR_TARGET, CLS_BACKGROUND_COLOR_TARGET, CLS_COLOR_CONTENT, CLS_FONT_COLOR_DROPDOWN, CLS_BACKGROUND_COLOR_DROPDOWN, CLS_COLOR_PALETTE, CLS_FONT_COLOR_PICKER, CLS_BACKGROUND_COLOR_PICKER, CLS_RTE_READONLY, CLS_TABLE_SEL, CLS_TB_DASH_BOR, CLS_TB_ALT_BOR, CLS_TB_COL_RES, CLS_TB_ROW_RES, CLS_TB_BOX_RES, CLS_RTE_HIDDEN, CLS_RTE_PASTE_KEEP_FORMAT, CLS_RTE_PASTE_REMOVE_FORMAT, CLS_RTE_PASTE_PLAIN_FORMAT, CLS_RTE_PASTE_OK, CLS_RTE_PASTE_CANCEL, CLS_RTE_DIALOG_MIN_HEIGHT, CLS_RTE_RES_HANDLE, CLS_RTE_RES_EAST, CLS_RTE_IMAGE, CLS_RESIZE, CLS_IMG_FOCUS, CLS_AUD_FOCUS, CLS_VID_FOCUS, CLS_RTE_DRAG_IMAGE, CLS_RTE_UPLOAD_POPUP, CLS_POPUP_OPEN, CLS_IMG_RESIZE, CLS_DROPAREA, CLS_IMG_INNER, CLS_UPLOAD_FILES, CLS_RTE_DIALOG_UPLOAD, CLS_RTE_RES_CNT, CLS_CUSTOM_TILE, CLS_NOCOLOR_ITEM, CLS_TABLE, CLS_TABLE_BORDER, CLS_RTE_TABLE_RESIZE, CLS_RTE_FIXED_TB_EXPAND, CLS_RTE_TB_ENABLED, CLS_RTE_RES_WEST, CLS_RTE_SOURCE_CODE_TXTAREA, getIndex, hasClass, getDropDownValue, isIDevice, getFormattedFontSize, pageYOffset, getTooltipText, setToolbarStatus, getCollection, getTBarItemsIndex, updateUndoRedoStatus, dispatchEvent, parseHtml, getTextNodesUnder, toObjectLowerCase, getEditValue, updateTextNode, getDefaultValue, isEditableValueEmpty, decode, sanitizeHelper, convertToBlob, getLocaleFontFormat, updateDropDownFontFormatLocale, ServiceLocator, RendererFactory, EditorManager, IMAGE, AUDIO, VIDEO, TABLE, LINK, INSERT_ROW, INSERT_COLUMN, DELETEROW, DELETECOLUMN, REMOVETABLE, TABLEHEADER, TABLE_VERTICAL_ALIGN, TABLE_MERGE, TABLE_VERTICAL_SPLIT, TABLE_HORIZONTAL_SPLIT, TABLE_MOVE, ALIGNMENT_TYPE, INDENT_TYPE, DEFAULT_TAG, BLOCK_TAGS, IGNORE_BLOCK_TAGS, TABLE_BLOCK_TAGS, SELECTION_TYPE, INSERTHTML_TYPE, INSERT_TEXT_TYPE, CLEAR_TYPE, SELF_CLOSING_TAGS, CLASS_IMAGE_RIGHT, CLASS_IMAGE_LEFT, CLASS_IMAGE_CENTER, CLASS_VIDEO_RIGHT, CLASS_VIDEO_LEFT, CLASS_VIDEO_CENTER, CLASS_IMAGE_BREAK, CLASS_AUDIO_BREAK, CLASS_VIDEO_BREAK, CLASS_CAPTION, CLASS_RTE_CAPTION, CLASS_CAPTION_INLINE, CLASS_IMAGE_INLINE, CLASS_AUDIO_INLINE, CLASS_CLICK_ELEM, CLASS_VIDEO_CLICK_ELEM, CLASS_AUDIO, CLASS_VIDEO, CLASS_AUDIO_WRAP, CLASS_VIDEO_WRAP, CLASS_EMBED_VIDEO_WRAP, CLASS_AUDIO_FOCUS, CLASS_VIDEO_FOCUS, CLASS_VIDEO_INLINE, Lists, markerClassName, DOMNode, Alignments, Indents, Formats, LinkCommand, InsertMethods, InsertTextExec, InsertHtmlExec, InsertHtml, IsFormatted, MsWordPaste, NodeCutter, ImageCommand, AudioCommand, VideoCommand, SelectionCommands, SelectionBasedExec, ClearFormatExec, UndoRedoManager, TableCommand, statusCollection, ToolbarStatus, FormatPainterActions, EmojiPickerAction, NodeSelection, MarkdownParser, LISTS_COMMAND, selectionCommand, LINK_COMMAND, CLEAR_COMMAND, MD_TABLE, INSERT_TEXT_COMMAND, ClearFormat, MDLists, MDFormats, MarkdownSelection, UndoRedoCommands, MDSelectionFormats, MDLink, MDTable, markdownFormatTags, markdownSelectionTags, markdownListsTags, htmlKeyConfig, markdownKeyConfig, pasteCleanupGroupingTags, listConversionFilters, selfClosingTags, KEY_DOWN, ACTION, FORMAT_TYPE, KEY_DOWN_HANDLER, LIST_TYPE, KEY_UP_HANDLER, KEY_UP, MODEL_CHANGED_PLUGIN, MODEL_CHANGED, MS_WORD_CLEANUP_PLUGIN, MS_WORD_CLEANUP, ON_BEGIN, SPACE_ACTION, FORMAT_PAINTER_ACTIONS, EMOJI_PICKER_ACTIONS };
 //# sourceMappingURL=ej2-richtexteditor.es2015.js.map