@syncfusion/ej2-richtexteditor 29.2.4-738301 → 29.2.4-760237

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

@@ -0,0 +1,2206 @@
+define(["require", "exports", "@syncfusion/ej2-base", "@syncfusion/ej2-base", "@syncfusion/ej2-popups", "@syncfusion/ej2-buttons", "../base/constant", "../base/enum", "@syncfusion/ej2-inputs", "../base/classes", "../base/util", "../../common/util"], function (require, exports, ej2_base_1, ej2_base_2, ej2_popups_1, ej2_buttons_1, events, enum_1, ej2_inputs_1, classes, util_1, util_2) {
+    "use strict";
+    Object.defineProperty(exports, "__esModule", { value: true });
+    var Table = (function () {
+        function Table(parent, serviceLocator) {
+            this.ensureInsideTableList = true;
+            this.pageX = null;
+            this.pageY = null;
+            this.moveEle = null;
+            this.currentColumnResize = '';
+            this.resizeEndTime = 0;
+            this.isTableMoveActive = false;
+            this.isResizeBind = true;
+            this.parent = parent;
+            this.rteID = parent.element.id;
+            this.l10n = serviceLocator.getService('rteLocale');
+            this.rendererFactory = serviceLocator.getService('rendererFactory');
+            this.dialogRenderObj = serviceLocator.getService('dialogRenderObject');
+            this.addEventListener();
+            this.isDestroyed = false;
+        }
+        Table.prototype.addEventListener = function () {
+            if (this.parent.isDestroyed) {
+                return;
+            }
+            this.parent.on(events.createTable, this.renderDlgContent, this);
+            this.parent.on(events.initialEnd, this.afterRender, this);
+            this.parent.on(events.dynamicModule, this.afterRender, this);
+            this.parent.on(events.showTableDialog, this.showDialog, this);
+            this.parent.on(events.closeTableDialog, this.closeDialog, this);
+            this.parent.on(events.docClick, this.docClick, this);
+            this.parent.on(events.iframeMouseDown, this.onIframeMouseDown, this);
+            this.parent.on(events.editAreaClick, this.editAreaClickHandler, this);
+            this.parent.on(events.clearDialogObj, this.clearDialogObj, this);
+            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.tableModulekeyUp, this.tableModulekeyUp, this);
+            this.parent.on(events.bindCssClass, this.setCssClass, this);
+            this.parent.on(events.destroy, this.destroy, this);
+            this.parent.on(events.afterKeyDown, this.afterKeyDown, this);
+            this.parent.on(events.hideTableQuickToolbar, this.hideTableQuickToolbar, this);
+        };
+        Table.prototype.removeEventListener = function () {
+            this.parent.off(events.createTable, this.renderDlgContent);
+            this.parent.off(events.initialEnd, this.afterRender);
+            this.parent.off(events.dynamicModule, this.afterRender);
+            this.parent.off(events.docClick, this.docClick);
+            this.parent.off(events.iframeMouseDown, this.onIframeMouseDown);
+            this.parent.off(events.showTableDialog, this.showDialog);
+            this.parent.off(events.closeTableDialog, this.closeDialog);
+            this.parent.off(events.editAreaClick, this.editAreaClickHandler);
+            this.parent.off(events.clearDialogObj, this.clearDialogObj);
+            this.parent.off(events.tableToolbarAction, this.onToolbarAction);
+            this.parent.off(events.dropDownSelect, this.dropdownSelect);
+            this.parent.off(events.mouseDown, this.cellSelect);
+            this.parent.off(events.hideTableQuickToolbar, this.hideTableQuickToolbar);
+            this.parent.off(events.keyDown, this.keyDown);
+            this.parent.off(events.tableModulekeyUp, this.tableModulekeyUp);
+            this.parent.off(events.bindCssClass, this.setCssClass);
+            this.parent.off(events.destroy, this.destroy);
+            this.parent.off(events.afterKeyDown, this.afterKeyDown);
+            if (!ej2_base_1.Browser.isDevice && this.parent.tableSettings.resize) {
+                ej2_base_2.EventHandler.remove(this.contentModule.getEditPanel(), 'mouseover', this.resizeHelper);
+                ej2_base_2.EventHandler.remove(this.contentModule.getEditPanel(), ej2_base_1.Browser.touchStartEvent, this.resizeStart);
+            }
+        };
+        Table.prototype.updateCss = function (currentObj, e) {
+            if (currentObj && e.cssClass) {
+                if (ej2_base_2.isNullOrUndefined(e.oldCssClass)) {
+                    currentObj.setProperties({ cssClass: (currentObj.cssClass + ' ' + e.cssClass).trim() });
+                }
+                else {
+                    currentObj.setProperties({ cssClass: (currentObj.cssClass.replace(e.oldCssClass, '').trim() + ' ' + e.cssClass).trim() });
+                }
+            }
+        };
+        Table.prototype.setCssClass = function (e) {
+            if (this.popupObj && e.cssClass) {
+                if (ej2_base_2.isNullOrUndefined(e.oldCssClass)) {
+                    ej2_base_2.addClass([this.popupObj.element], e.cssClass);
+                }
+                else {
+                    util_2.removeClassWithAttr([this.popupObj.element], e.oldCssClass);
+                    ej2_base_2.addClass([this.popupObj.element], e.cssClass);
+                }
+            }
+            this.updateCss(this.createTableButton, e);
+            this.updateCss(this.editdlgObj, e);
+            var numericTextBoxObj = [
+                this.columnTextBox, this.rowTextBox, this.tableWidthNum, this.tableCellPadding, this.tableCellSpacing
+            ];
+            for (var i = 0; i < numericTextBoxObj.length; i++) {
+                this.updateCss(numericTextBoxObj[i], e);
+            }
+        };
+        Table.prototype.afterRender = function () {
+            if (ej2_base_2.isNullOrUndefined(this.contentModule)) {
+                this.contentModule = this.rendererFactory.getRenderer(enum_1.RenderType.Content);
+                this.parent.on(events.mouseDown, this.cellSelect, this);
+                if (this.parent.tableSettings.resize) {
+                    ej2_base_2.EventHandler.add(this.parent.contentModule.getEditPanel(), ej2_base_1.Browser.touchStartEvent, this.resizeStart, this);
+                }
+                if (!ej2_base_1.Browser.isDevice && this.parent.tableSettings.resize) {
+                    ej2_base_2.EventHandler.add(this.contentModule.getEditPanel(), 'mouseover', this.resizeHelper, this);
+                }
+            }
+        };
+        Table.prototype.dropdownSelect = function (e) {
+            var item = e.item;
+            if (!document.body.contains(document.body.querySelector('.e-rte-quick-toolbar')) || item.command !== 'Table') {
+                return;
+            }
+            var range = this.parent.formatter.editorManager.nodeSelection.getRange(this.parent.contentModule.getDocument());
+            var args = {
+                args: e,
+                selection: this.parent.formatter.editorManager.nodeSelection.save(range, this.contentModule.getDocument()),
+                selectParent: this.parent.formatter.editorManager.nodeSelection.getParentNodeCollection(range)
+            };
+            switch (item.subCommand) {
+                case 'InsertRowBefore':
+                case 'InsertRowAfter':
+                    this.addRow(args.selection, e);
+                    break;
+                case 'InsertColumnLeft':
+                case 'InsertColumnRight':
+                    this.addColumn(args.selection, e);
+                    break;
+                case 'DeleteColumn':
+                case 'DeleteRow':
+                    this.removeRowColumn(args.selection, e);
+                    break;
+                case 'AlignTop':
+                case 'AlignMiddle':
+                case 'AlignBottom':
+                    this.verticalAlign(args, e);
+                    break;
+                case 'Dashed':
+                case 'Alternate':
+                case 'Custom':
+                    this.tableStyles(args, e);
+                    break;
+                case 'Merge':
+                case 'VerticalSplit':
+                case 'HorizontalSplit':
+                    this.UpdateCells(args.selection, e);
+                    break;
+            }
+        };
+        Table.prototype.UpdateCells = function (selectCell, e) {
+            this.parent.formatter.process(this.parent, e, e, { selection: selectCell, subCommand: e.item.subCommand });
+            this.hideTableQuickToolbar();
+        };
+        Table.prototype.keyDown = function (e) {
+            var event = e.args;
+            var proxy = this;
+            switch (event.action) {
+                case 'escape':
+                    break;
+                case 'insert-table':
+                    if (this.parent.editorMode === 'HTML') {
+                        this.openDialog(true, e);
+                    }
+                    else if (this.parent.editorMode === 'Markdown') {
+                        this.parent.formatter.process(this.parent, null, event);
+                    }
+                    event.preventDefault();
+                    break;
+            }
+            if (!ej2_base_2.isNullOrUndefined(this.parent.formatter.editorManager.nodeSelection) && this.contentModule
+                && event.code !== 'KeyK') {
+                var selection = void 0;
+                var range = this.parent.formatter.editorManager.nodeSelection.getRange(this.parent.contentModule.getDocument());
+                var ele = this.parent.formatter.editorManager.nodeSelection.getParentNodeCollection(range)[0];
+                ele = (ele && ele.tagName !== 'TD' && ele.tagName !== 'TH') ? ele.parentElement : ele;
+                if ((event.keyCode === 8 || event.keyCode === 46) ||
+                    (event.ctrlKey && event.keyCode === 88)) {
+                    if (ele && ele.tagName === 'TBODY') {
+                        if (!ej2_base_2.isNullOrUndefined(this.parent.formatter.editorManager.nodeSelection) && this.contentModule) {
+                            selection = this.parent.formatter.editorManager.nodeSelection.save(range, this.contentModule.getDocument());
+                        }
+                        event.preventDefault();
+                        proxy.removeTable(selection, event, true);
+                    }
+                    else if (ele && ele.querySelectorAll('table').length > 0) {
+                        this.removeResizeElement();
+                        this.hideTableQuickToolbar();
+                    }
+                }
+                if (ele && ele.tagName !== 'TD' && ele.tagName !== 'TH') {
+                    var closestTd = ej2_base_1.closest(ele, 'td');
+                    ele = !ej2_base_2.isNullOrUndefined(closestTd) && this.parent.inputElement.contains(closestTd) ? closestTd : ele;
+                }
+                if (ele && (ele.tagName === 'TD' || ele.tagName === 'TH')) {
+                    var selectedEndCell = this.contentModule.getEditPanel().querySelectorAll('.e-cell-select-end');
+                    if ((ej2_base_1.isNullOrUndefined(this.activeCell) || this.activeCell !== ele) && !ej2_base_1.isNullOrUndefined(selectedEndCell) && selectedEndCell.length === 0) {
+                        this.activeCell = ele;
+                    }
+                    if (!ej2_base_1.isNullOrUndefined(this.parent.formatter.editorManager.nodeSelection) && this.contentModule) {
+                        selection = this.parent.formatter.editorManager.nodeSelection.save(range, this.contentModule.getDocument());
+                    }
+                    if (!event.shiftKey ||
+                        (event.shiftKey && event.keyCode === 9)) {
+                        switch (event.keyCode) {
+                            case 9:
+                            case 37:
+                            case 39:
+                                proxy.tabSelection(event, selection, ele);
+                                break;
+                            case 40:
+                            case 38:
+                                proxy.tableArrowNavigation(event, selection, ele);
+                                break;
+                        }
+                    }
+                }
+            }
+            if (this.parent.editorMode === 'HTML' && event.shiftKey && (event.keyCode === 39 ||
+                event.keyCode === 37
+                || event.keyCode === 38 || event.keyCode === 40)) {
+                this.keyDownEventInstance = event;
+                ej2_base_2.EventHandler.add(this.parent.contentModule.getDocument(), 'selectionchange', this.tableCellsKeyboardSelection, this);
+            }
+            if (event.ctrlKey && event.key === 'a') {
+                this.handleSelectAll();
+            }
+            if (((event.code === 'Delete' && event.which === 46) || (event.code === 'Backspace' && event.which === 8)) && this.parent.editorMode === 'HTML') {
+                var range = this.parent.formatter.editorManager.nodeSelection.getRange(this.parent.contentModule.getDocument());
+                if (range.startContainer.nodeType === Node.ELEMENT_NODE && range.startContainer.nodeName === 'DIV' && range.startContainer.classList.contains('e-table-fake-selection')) {
+                    this.deleteTable();
+                    event.preventDefault();
+                }
+                else {
+                    var table = (event.code === 'Delete' && event.which === 46) ? this.getAdjacentTableElement(range, true) : this.getAdjacentTableElement(range, false);
+                    if (table) {
+                        this.updateTableSelection(table);
+                        event.preventDefault();
+                    }
+                }
+            }
+            else {
+                var isShiftEnter = event.shiftKey && event.key === 'Enter';
+                var isActionKey = classes.ALLOWED_ACTIONKEYS.indexOf(event.key) !== -1;
+                if (isShiftEnter || isActionKey || (event.key && event.key.length === 1)) {
+                    var table = this.parent.contentModule.getEditPanel().querySelector('table.e-cell-select');
+                    if (table) {
+                        if (event.keyCode === 39 || event.keyCode === 37) {
+                            this.parent.formatter.editorManager.nodeSelection.setCursorPoint(this.contentModule.getDocument(), table, 0);
+                        }
+                        else {
+                            var firstTd = table.querySelector('tr').cells[0];
+                            this.parent.formatter.editorManager.nodeSelection.setSelectionText(this.contentModule.getDocument(), firstTd, firstTd, 0, 0);
+                        }
+                    }
+                    this.removeTableSelection();
+                }
+            }
+        };
+        Table.prototype.tableCellsKeyboardSelection = function (e) {
+            ej2_base_2.EventHandler.remove(this.parent.contentModule.getDocument(), 'selectionchange', this.tableCellsKeyboardSelection);
+            var range = this.parent.formatter.editorManager.nodeSelection.getRange(this.parent.contentModule.getDocument());
+            var event = this.keyDownEventInstance;
+            var isMultiSelect = !ej2_base_2.isNullOrUndefined(range) && !ej2_base_2.isNullOrUndefined(range.commonAncestorContainer) &&
+                range.commonAncestorContainer.nodeType === Node.ELEMENT_NODE
+                && (range.commonAncestorContainer.tagName === 'TR'
+                    || range.commonAncestorContainer.tagName === 'TBODY') && !ej2_base_2.isNullOrUndefined(this.activeCell);
+            var selectedEndCell = this.contentModule.getEditPanel().querySelectorAll('.e-cell-select-end');
+            if (!ej2_base_2.isNullOrUndefined(selectedEndCell) && selectedEndCell.length > 0) {
+                this.parent.formatter.editorManager.nodeSelection.Clear(this.parent.contentModule.getDocument());
+                this.parent.formatter.editorManager.nodeSelection.setSelectionText(this.parent.contentModule.getDocument(), selectedEndCell[0], selectedEndCell[0], 0, 0);
+                this.parent.formatter.editorManager.nodeSelection.setCursorPoint(this.parent.contentModule.getDocument(), selectedEndCell[0], 0);
+            }
+            if (isMultiSelect || (!ej2_base_2.isNullOrUndefined(selectedEndCell) && selectedEndCell.length > 0)) {
+                var cells = this.getCorrespondingColumns();
+                var cell = !ej2_base_2.isNullOrUndefined(selectedEndCell)
+                    && selectedEndCell.length > 0 ? selectedEndCell[0] : this.activeCell;
+                var activeIndexes = this.getCorrespondingIndex(cell, cells);
+                var activeCellRowIndex = activeIndexes[0];
+                var activeCellColIndex = activeIndexes[1];
+                var target = void 0;
+                if (event.keyCode === 39) {
+                    if (activeCellColIndex < cells[0].length - 1) {
+                        target = cells[activeCellRowIndex][(activeCellColIndex + 1)];
+                    }
+                    else if (activeCellRowIndex < cells.length - 1) {
+                        target = cells[(activeCellRowIndex + 1)][activeCellColIndex];
+                        if (selectedEndCell.length === 0 && activeCellRowIndex < cells.length - 1) {
+                            this.activeCell = cells[activeCellRowIndex][0];
+                        }
+                    }
+                    else {
+                        this.resetTableSelection();
+                    }
+                }
+                else if (event.keyCode === 37) {
+                    if (0 < activeCellColIndex) {
+                        target = cells[activeCellRowIndex][(activeCellColIndex - 1)];
+                    }
+                    else if (0 < activeCellRowIndex) {
+                        target = cells[(activeCellRowIndex - 1)][activeCellColIndex];
+                        if (selectedEndCell.length === 0 && 0 < activeCellRowIndex) {
+                            this.activeCell = cells[activeCellRowIndex][(cells[activeCellRowIndex].length - 1)];
+                        }
+                    }
+                    else {
+                        this.resetTableSelection();
+                    }
+                }
+                else if (event.keyCode === 38) {
+                    if (0 < activeCellRowIndex) {
+                        target = cells[(activeCellRowIndex - 1)][activeCellColIndex];
+                    }
+                    else {
+                        this.resetTableSelection();
+                    }
+                }
+                else if (event.keyCode === 40) {
+                    if (activeCellRowIndex < cells.length - 1) {
+                        target = cells[(activeCellRowIndex + 1)][activeCellColIndex];
+                    }
+                    else {
+                        this.resetTableSelection();
+                    }
+                }
+                if (target) {
+                    this.parent.formatter.editorManager.observer.notify('TABLE_MOVE', {
+                        event: { target: target },
+                        selectNode: [this.activeCell]
+                    });
+                }
+            }
+            if (selectedEndCell.length > 0) {
+                event.preventDefault();
+                e.preventDefault();
+            }
+        };
+        Table.prototype.resetTableSelection = function () {
+            var selectedEndCell = this.contentModule.getEditPanel().querySelectorAll('.e-cell-select-end');
+            if (!ej2_base_2.isNullOrUndefined(selectedEndCell) && selectedEndCell.length > 0) {
+                this.parent.formatter.editorManager.nodeSelection.setSelectionNode(this.parent.contentModule.getDocument(), this.curTable);
+            }
+            this.activeCell = null;
+            this.removeCellSelectClasses();
+            this.removeTableSelection();
+        };
+        Table.prototype.getCorrespondingColumns = function () {
+            var elementArray = [];
+            var colspan = 0;
+            var allRows = this.curTable.rows;
+            for (var i = 0; i <= allRows.length - 1; i++) {
+                var ele = allRows[i];
+                var index = 0;
+                for (var j = 0; j <= ele.children.length - 1; j++) {
+                    var colEle = ele.children[j];
+                    for (var ele_1 = colEle, colspan_1 = parseInt(ele_1.getAttribute('colspan'), 10) || 1, rowSpan = parseInt(ele_1.getAttribute('rowspan'), 10) || 1, rowIndex = i; rowIndex < i + rowSpan; rowIndex++) {
+                        for (var colIndex = index; colIndex < index + colspan_1; colIndex++) {
+                            if (!elementArray[rowIndex]) {
+                                elementArray[rowIndex] = [];
+                            }
+                            if (elementArray[rowIndex][colIndex]) {
+                                index++;
+                            }
+                            else {
+                                elementArray[rowIndex][colIndex] = colEle;
+                            }
+                        }
+                    }
+                    index += colspan;
+                }
+            }
+            return elementArray;
+        };
+        Table.prototype.getCorrespondingIndex = function (cell, allCells) {
+            for (var i = 0; i < allCells.length; i++) {
+                for (var j = 0; j < allCells[i].length; j++) {
+                    if (allCells[i][j] === cell) {
+                        return [i, j];
+                    }
+                }
+            }
+            return [];
+        };
+        Table.prototype.getAdjacentTableElement = function (range, isdelKey) {
+            if (!range.collapsed || (!isdelKey && this.quickToolObj && this.quickToolObj.tableQTBar
+                && document.body.contains(this.quickToolObj.tableQTBar.element))) {
+                return null;
+            }
+            var nodeCollection = this.getNodeCollection(range);
+            var startContainer = (range.collapsed && this.parent.contentModule.getEditPanel() === range.startContainer
+                && nodeCollection && nodeCollection.length > 0 && nodeCollection[0] ?
+                nodeCollection[0] : range.startContainer);
+            var adjacentElement = this.getSelectedTableEle(nodeCollection);
+            var isBrEle = this.getBrElement(range, nodeCollection);
+            if (startContainer && startContainer.nodeType === Node.ELEMENT_NODE) {
+                if (startContainer.tagName === 'IMG' || startContainer.querySelector('img') || startContainer.tagName === 'AUDIO'
+                    || startContainer.querySelector('audio') || startContainer.tagName === 'VIDEO' || startContainer.querySelector('video')
+                    || startContainer.querySelector('.e-video-clickelem')) {
+                    var compareRange = this.contentModule.getDocument().createRange();
+                    compareRange.collapse(true);
+                    compareRange.selectNodeContents(startContainer);
+                    var nodeIndex = this.parent.formatter.editorManager.nodeSelection.getIndex(startContainer);
+                    if ((isdelKey && compareRange.startOffset >= range.startOffset) ||
+                        (!isdelKey && (startContainer.tagName !== 'IMG' && compareRange.startOffset !== range.startOffset
+                            || startContainer.tagName === 'IMG' && nodeIndex !== range.startOffset))) {
+                        return null;
+                    }
+                }
+            }
+            if (startContainer && startContainer.nodeType === Node.TEXT_NODE) {
+                if (isdelKey) {
+                    if (range.endOffset !== range.endContainer.textContent.length) {
+                        if (range.endOffset !== range.endContainer.textContent.trim().length) {
+                            return null;
+                        }
+                    }
+                }
+                else if (range.startOffset !== 0) {
+                    return null;
+                }
+            }
+            if (startContainer && startContainer.nodeType === Node.ELEMENT_NODE && startContainer.tagName === 'TABLE') {
+                adjacentElement = startContainer;
+            }
+            if (adjacentElement) {
+                var currentEleIndex = this.parent.formatter.editorManager.nodeSelection.getIndex(adjacentElement);
+                if (!((range.startOffset === currentEleIndex && isdelKey) || (range.startOffset !== currentEleIndex && !isdelKey))) {
+                    adjacentElement = null;
+                }
+            }
+            if (!adjacentElement && startContainer) {
+                adjacentElement = this.getAdjacentElementFromDom(startContainer, isBrEle, isdelKey);
+            }
+            if (adjacentElement && adjacentElement.nodeType === Node.ELEMENT_NODE && adjacentElement.tagName === 'TABLE') {
+                this.setSelection(adjacentElement, isBrEle);
+                return adjacentElement;
+            }
+            return null;
+        };
+        Table.prototype.getAdjacentElementFromDom = function (startContainer, isBrEle, isdelKey) {
+            var adjacentElement;
+            var parentElement = (isBrEle ? isBrEle : startContainer.parentNode);
+            var currentElement = startContainer;
+            while (parentElement && !adjacentElement && parentElement.parentNode) {
+                var childNodes = Array.from(parentElement.childNodes);
+                var startContainerIndex = childNodes.indexOf(currentElement);
+                if (startContainerIndex !== -1 && ((isdelKey && startContainerIndex < childNodes.length - 1)
+                    || (!isdelKey && startContainerIndex > 0))) {
+                    adjacentElement = (childNodes[isdelKey ? startContainerIndex + 1 : startContainerIndex - 1]);
+                }
+                else {
+                    adjacentElement = (isdelKey ? parentElement.nextSibling : parentElement.previousSibling);
+                    currentElement = parentElement;
+                }
+                if (!isBrEle && startContainer.nodeType === Node.TEXT_NODE && adjacentElement && adjacentElement.tagName && adjacentElement.tagName.toUpperCase() === 'BR') {
+                    isBrEle = currentElement = parentElement = adjacentElement;
+                    adjacentElement = null;
+                }
+                if (!isBrEle && adjacentElement && !(adjacentElement.nodeType === Node.ELEMENT_NODE && adjacentElement.tagName === 'TABLE') && !ej2_base_2.isNullOrUndefined(adjacentElement.textContent) && !adjacentElement.textContent.trim()) {
+                    currentElement = parentElement = adjacentElement.parentNode;
+                    adjacentElement = null;
+                }
+                if (adjacentElement && adjacentElement.tagName && ['UL', 'OL', 'LI'].indexOf(adjacentElement.tagName.toUpperCase()) !== -1) {
+                    adjacentElement = this.getAdjacentElementFromList(adjacentElement, isdelKey);
+                    if (!adjacentElement) {
+                        return null;
+                    }
+                }
+                if (parentElement && parentElement.tagName && parentElement.tagName.toUpperCase() === 'LI' && !isdelKey) {
+                    adjacentElement = parentElement;
+                }
+                parentElement = parentElement.parentNode;
+            }
+            return adjacentElement;
+        };
+        Table.prototype.getAdjacentElementFromList = function (adjacentElement, isdelKey) {
+            while (adjacentElement) {
+                if (adjacentElement.tagName && ['UL', 'OL', 'LI'].indexOf(adjacentElement.tagName.toUpperCase()) === -1) {
+                    if (!(adjacentElement.nodeType === Node.ELEMENT_NODE && adjacentElement.tagName === 'TABLE')) {
+                        adjacentElement = (isdelKey ? adjacentElement.firstChild : adjacentElement.lastChild);
+                    }
+                    break;
+                }
+                adjacentElement = (isdelKey ? adjacentElement.firstChild : adjacentElement.lastChild);
+            }
+            return adjacentElement;
+        };
+        Table.prototype.getNodeCollection = function (range) {
+            var nodes = [];
+            if (range.collapsed && this.parent.contentModule.getEditPanel() === range.startContainer
+                && range.startContainer.childNodes.length > 0) {
+                var index = Math.max(0, Math.min(range.startContainer.childNodes.length - 1, range.endOffset - 1));
+                nodes.push(range.startContainer.childNodes[index]);
+            }
+            else {
+                nodes = this.parent.formatter.editorManager.nodeSelection.getNodeCollection(range);
+            }
+            return nodes;
+        };
+        Table.prototype.getSelectedTableEle = function (nodeCollection) {
+            if (nodeCollection && nodeCollection.length > 0) {
+                for (var _i = 0, _a = Array.from(nodeCollection); _i < _a.length; _i++) {
+                    var element = _a[_i];
+                    if (element && element.tagName === 'TABLE') {
+                        return element;
+                    }
+                }
+            }
+            return null;
+        };
+        Table.prototype.getBrElement = function (range, nodeCollection) {
+            if (range.endContainer.tagName === 'BR') {
+                return range.endContainer;
+            }
+            if (nodeCollection.length === 1 && nodeCollection[0]
+                && nodeCollection[0].tagName === 'BR') {
+                return nodeCollection[0];
+            }
+            return null;
+        };
+        Table.prototype.setSelection = function (nextElement, isBrEle) {
+            if (!nextElement.classList.contains('e-cell-select')) {
+                this.parent.formatter.editorManager.nodeSelection.Clear(this.contentModule.getDocument());
+                if (isBrEle) {
+                    if (isBrEle.parentNode && isBrEle.parentNode.childNodes.length === 1 && isBrEle.parentNode.firstChild.nodeName === 'BR') {
+                        ej2_base_1.detach(isBrEle.parentNode);
+                    }
+                    else {
+                        ej2_base_1.detach(isBrEle);
+                    }
+                }
+                var fakeSelectionEle = this.parent.createElement('div', { className: 'e-table-fake-selection' });
+                fakeSelectionEle.setAttribute('contenteditable', 'false');
+                this.contentModule.getEditPanel().appendChild(fakeSelectionEle);
+                this.parent.formatter.editorManager.nodeSelection.setSelectionNode(this.contentModule.getDocument(), fakeSelectionEle);
+            }
+        };
+        Table.prototype.removeAllFakeSelectionEles = function () {
+            var fakeSelectionEles = this.parent.contentModule.getEditPanel().querySelectorAll('.e-table-fake-selection');
+            if (fakeSelectionEles && fakeSelectionEles.length > 0) {
+                fakeSelectionEles.forEach(function (element) {
+                    ej2_base_1.detach(element);
+                });
+            }
+        };
+        Table.prototype.deleteTable = function () {
+            var table = this.parent.contentModule.getEditPanel().querySelector('table.e-cell-select');
+            this.removeResizeElement();
+            if (table) {
+                var brElement = document.createElement('br');
+                var containerEle = brElement;
+                if (this.parent.enterKey === 'DIV') {
+                    containerEle = document.createElement('div');
+                    containerEle.appendChild(brElement);
+                }
+                else if (this.parent.enterKey === 'P') {
+                    containerEle = document.createElement('p');
+                    containerEle.appendChild(brElement);
+                }
+                table.parentNode.replaceChild(containerEle, table);
+                this.parent.formatter.editorManager.nodeSelection.setSelectionText(this.contentModule.getDocument(), containerEle, containerEle, 0, 0);
+                this.removeTableSelection();
+            }
+        };
+        Table.prototype.removeTableSelection = function () {
+            var table = this.parent.contentModule.getEditPanel().querySelector('table.e-cell-select');
+            if (table) {
+                util_2.removeClassWithAttr([table], classes.CLS_TABLE_SEL);
+            }
+            this.removeAllFakeSelectionEles();
+        };
+        Table.prototype.updateTableSelection = function (table) {
+            ej2_base_2.addClass([table], 'e-cell-select');
+        };
+        Table.prototype.handleSelectAll = function () {
+            this.cancelResizeAction();
+            var selectedCells = this.parent.inputElement.querySelectorAll('.' + classes.CLS_TABLE_SEL);
+            util_2.removeClassWithAttr(selectedCells, classes.CLS_TABLE_SEL);
+            this.removeTableSelection();
+        };
+        Table.prototype.tableModulekeyUp = function (e) {
+            if (!ej2_base_2.isNullOrUndefined(this.parent.formatter.editorManager.nodeSelection) && this.contentModule) {
+                var range = this.parent.formatter.editorManager.nodeSelection.getRange(this.parent.contentModule.getDocument());
+                var ele = this.parent.formatter.editorManager.nodeSelection.getParentNodeCollection(range)[0];
+                ele = (ele && ele.tagName !== 'TD' && ele.tagName !== 'TH') ? ele.parentElement : ele;
+                if (ele && ele.tagName !== 'TD' && ele.tagName !== 'TH') {
+                    var closestTd = ej2_base_1.closest(ele, 'td');
+                    ele = !ej2_base_2.isNullOrUndefined(closestTd) && this.parent.inputElement.contains(closestTd) ? closestTd : ele;
+                }
+                if ((ele && ele.tagName === 'TD' || ele.tagName === 'TH') && !ele.classList.contains(classes.CLS_TABLE_SEL)) {
+                    ele.classList.add(classes.CLS_TABLE_SEL);
+                }
+                var eventArgs = e.args;
+                if (this.previousTableElement !== ele && !ej2_base_2.isNullOrUndefined(this.previousTableElement)
+                    && !eventArgs.shiftKey && (eventArgs.keyCode === 39 || eventArgs.keyCode === 37 ||
+                    eventArgs.keyCode === 38 || eventArgs.keyCode === 40)) {
+                    util_2.removeClassWithAttr([this.previousTableElement], classes.CLS_TABLE_SEL);
+                    this.removeTableSelection();
+                }
+            }
+        };
+        Table.prototype.openDialog = function (isInternal, e) {
+            if (!isInternal) {
+                this.parent.contentModule.getEditPanel().focus();
+            }
+            if (this.parent.editorMode === 'HTML') {
+                var docElement = this.parent.contentModule.getDocument();
+                var range = this.parent.formatter.editorManager.nodeSelection.getRange(docElement);
+                var selection = this.parent.formatter.editorManager.nodeSelection.save(range, docElement);
+                var args = {
+                    originalEvent: e ? e.args : { action: 'insert-table' },
+                    item: {
+                        command: 'Table',
+                        subCommand: 'CreateTable'
+                    },
+                    name: !isInternal ? 'showDialog' : null
+                };
+                this.insertTableDialog({ self: this, args: args, selection: selection });
+            }
+        };
+        Table.prototype.showDialog = function () {
+            this.openDialog(false);
+            this.setCssClass({ cssClass: this.parent.getCssClass() });
+        };
+        Table.prototype.closeDialog = function () {
+            if (this.editdlgObj) {
+                this.editdlgObj.hide({ returnValue: true });
+            }
+        };
+        Table.prototype.onToolbarAction = function (args) {
+            var item = args.args.item;
+            switch (item.subCommand) {
+                case 'TableHeader':
+                    this.tableHeader(args.selection, args.args);
+                    break;
+                case 'TableRemove':
+                    this.removeTable(args.selection, args.args);
+                    break;
+                case 'TableEditProperties':
+                    this.editTable(args);
+                    break;
+            }
+        };
+        Table.prototype.verticalAlign = function (args, e) {
+            var tdEle = ej2_base_1.closest(args.selectParent[0], 'th') || ej2_base_1.closest(args.selectParent[0], 'td');
+            if (tdEle) {
+                this.parent.formatter.process(this.parent, e, e, { tableCell: tdEle, subCommand: e.item.subCommand });
+            }
+        };
+        Table.prototype.tableStyles = function (args, e) {
+            var command = e.item.subCommand;
+            var table = ej2_base_1.closest(args.selectParent[0], 'table');
+            if (command === 'Dashed') {
+                (this.parent.element.classList.contains(classes.CLS_TB_DASH_BOR)) ?
+                    util_2.removeClassWithAttr([this.parent.element], classes.CLS_TB_DASH_BOR) : this.parent.element.classList.add(classes.CLS_TB_DASH_BOR);
+                (table.classList.contains(classes.CLS_TB_DASH_BOR)) ? util_2.removeClassWithAttr([table], classes.CLS_TB_DASH_BOR) :
+                    table.classList.add(classes.CLS_TB_DASH_BOR);
+            }
+            if (command === 'Alternate') {
+                (this.parent.element.classList.contains(classes.CLS_TB_ALT_BOR)) ?
+                    util_2.removeClassWithAttr([this.parent.element], classes.CLS_TB_ALT_BOR) : this.parent.element.classList.add(classes.CLS_TB_ALT_BOR);
+                (table.classList.contains(classes.CLS_TB_ALT_BOR)) ? util_2.removeClassWithAttr([table], classes.CLS_TB_ALT_BOR) :
+                    table.classList.add(classes.CLS_TB_ALT_BOR);
+            }
+            if (args.args && args.args.item.cssClass) {
+                var classList = args.args.item.cssClass.split(' ');
+                for (var i = 0; i < classList.length; i++) {
+                    if (table.classList.contains(classList[i])) {
+                        util_2.removeClassWithAttr([table], (classList[i]));
+                    }
+                    else {
+                        table.classList.add(classList[i]);
+                    }
+                }
+            }
+            this.parent.formatter.process(this.parent, e, e, { subCommand: e.item.subCommand });
+            this.parent.formatter.saveData();
+            this.hideTableQuickToolbar();
+            this.parent.formatter.editorManager.nodeSelection.restore();
+        };
+        Table.prototype.insideList = function (range) {
+            var blockNodes = this.getBlockNodesInSelection(range);
+            var nodes = [];
+            for (var i = 0; i < blockNodes.length; i++) {
+                if (blockNodes[i].parentNode.tagName === 'LI') {
+                    nodes.push(blockNodes[i].parentNode);
+                }
+                else if (blockNodes[i].tagName === 'LI' && blockNodes[i].childNodes[0].tagName !== 'P' &&
+                    (blockNodes[i].childNodes[0].tagName !== 'OL' &&
+                        blockNodes[i].childNodes[0].tagName !== 'UL')) {
+                    nodes.push(blockNodes[i]);
+                }
+            }
+            if (nodes.length > 1 || nodes.length && ((range.startOffset === 0 && range.endOffset === 0))) {
+                this.ensureInsideTableList = true;
+                return true;
+            }
+            else {
+                this.ensureInsideTableList = false;
+                return false;
+            }
+        };
+        Table.prototype.getBlockNodesInSelection = function (range) {
+            var blockTags = [
+                'DIV', 'SECTION', 'HEADER', 'FOOTER', 'ARTICLE', 'NAV',
+                'P', 'H1', 'H2', 'H3', 'BLOCKQUOTE', 'LI', 'PRE',
+                'TD', 'TH', 'FORM', 'FIELDSET', 'LEGEND', 'LABEL', 'TEXTAREA'
+            ];
+            var blockNodes = new Set();
+            var treeWalker = this.contentModule.getDocument().createTreeWalker(range.commonAncestorContainer, NodeFilter.SHOW_TEXT, {
+                acceptNode: function (node) { return (range.intersectsNode(node) ? NodeFilter.FILTER_ACCEPT : NodeFilter.FILTER_REJECT); }
+            });
+            if (range.collapsed) {
+                var blockNode = this.getImmediateBlockNode(range.startContainer, blockTags);
+                if (blockNode) {
+                    blockNodes.add(blockNode);
+                }
+            }
+            else {
+                while (treeWalker.nextNode()) {
+                    var blockNode = this.getImmediateBlockNode(treeWalker.currentNode, blockTags);
+                    if (blockNode) {
+                        blockNodes.add(blockNode);
+                    }
+                }
+            }
+            return Array.from(blockNodes);
+        };
+        Table.prototype.getImmediateBlockNode = function (node, blockTags) {
+            var parentNode = node.nodeType === Node.TEXT_NODE ? node.parentNode : node;
+            while (parentNode && parentNode.nodeType === Node.ELEMENT_NODE) {
+                var element = parentNode;
+                if (blockTags.indexOf(element.tagName) > -1) {
+                    return element;
+                }
+                parentNode = parentNode.parentNode;
+            }
+            return null;
+        };
+        Table.prototype.removeEmptyTextNodes = function (element) {
+            var children = element.childNodes;
+            for (var i = children.length - 1; i >= 0; i--) {
+                var node = children[i];
+                if (node.nodeType === Node.TEXT_NODE && node.nodeValue.trim() === '') {
+                    element.removeChild(node);
+                }
+            }
+        };
+        Table.prototype.tabSelection = function (event, selection, ele) {
+            var allHeadBodyTRElements = ele.closest('table').querySelectorAll('thead, tbody, tr');
+            for (var i = 0; i < allHeadBodyTRElements.length; i++) {
+                this.removeEmptyTextNodes(allHeadBodyTRElements[i]);
+            }
+            this.previousTableElement = ele;
+            var insideList = this.insideList(selection.range);
+            if ((event.keyCode === 37 || event.keyCode === 39) ||
+                insideList) {
+                return;
+            }
+            event.preventDefault();
+            util_2.removeClassWithAttr([ele], classes.CLS_TABLE_SEL);
+            this.removeTableSelection();
+            if (!event.shiftKey && event.keyCode !== 37) {
+                var nextElement = (!ej2_base_2.isNullOrUndefined(ele.nextSibling)) ? ele.nextSibling :
+                    (!ej2_base_2.isNullOrUndefined(ej2_base_1.closest(ele, 'tr').nextSibling) ? ej2_base_1.closest(ele, 'tr').nextSibling.childNodes[0] :
+                        (!ej2_base_2.isNullOrUndefined(ej2_base_1.closest(ele, 'table').nextSibling)) ?
+                            (ej2_base_1.closest(ele, 'table').nextSibling.nodeName.toLowerCase() === 'td') ?
+                                ej2_base_1.closest(ele, 'table').nextSibling : ele : ele);
+                if (ele === nextElement && ele.nodeName === 'TH') {
+                    nextElement = ej2_base_1.closest(ele, 'table').rows[1].cells[0];
+                }
+                if (event.keyCode === 39 && ele === nextElement) {
+                    nextElement = ej2_base_1.closest(ele, 'table').nextSibling;
+                }
+                if (nextElement) {
+                    (nextElement.textContent.trim() !== '' && ej2_base_1.closest(nextElement, 'td')) ?
+                        selection.setSelectionNode(this.contentModule.getDocument(), nextElement) :
+                        selection.setSelectionText(this.contentModule.getDocument(), nextElement, nextElement, 0, 0);
+                }
+                if (ele === nextElement && event.keyCode !== 39 && nextElement) {
+                    ele.classList.add(classes.CLS_TABLE_SEL);
+                    this.addRow(selection, event, true);
+                    util_2.removeClassWithAttr([ele], classes.CLS_TABLE_SEL);
+                    this.removeTableSelection();
+                    nextElement = nextElement.parentElement.nextSibling ? nextElement.parentElement.nextSibling.firstChild :
+                        nextElement.parentElement.firstChild;
+                    (nextElement.textContent.trim() !== '' && ej2_base_1.closest(nextElement, 'td')) ?
+                        selection.setSelectionNode(this.contentModule.getDocument(), nextElement) :
+                        selection.setSelectionText(this.contentModule.getDocument(), nextElement, nextElement, 0, 0);
+                }
+            }
+            else {
+                var prevElement = (!ej2_base_2.isNullOrUndefined(ele.previousSibling)) ? ele.previousSibling :
+                    (!ej2_base_2.isNullOrUndefined(ej2_base_1.closest(ele, 'tr').previousSibling) ?
+                        ej2_base_1.closest(ele, 'tr').previousSibling.childNodes[ej2_base_1.closest(ele, 'tr').previousSibling.childNodes.length - 1] :
+                        (!ej2_base_2.isNullOrUndefined(ej2_base_1.closest(ele, 'table').previousSibling)) ?
+                            (ej2_base_1.closest(ele, 'table').previousSibling.nodeName.toLowerCase() === 'td') ? ej2_base_1.closest(ele, 'table').previousSibling :
+                                ele : ele);
+                if (ele === prevElement && ele.cellIndex === 0 &&
+                    ej2_base_1.closest(ele, 'table').tHead && ele.nodeName !== 'TH') {
+                    var clsTble = ej2_base_1.closest(ele, 'table');
+                    prevElement = clsTble.rows[0].cells[clsTble.rows[0].cells.length - 1];
+                }
+                if (event.keyCode === 37 && ele === prevElement) {
+                    prevElement = ej2_base_1.closest(ele, 'table').previousSibling;
+                }
+                if (!ej2_base_1.isNullOrUndefined(prevElement) && prevElement.firstChild.nodeName === 'TABLE') {
+                    var tableChild = prevElement;
+                    while (!ej2_base_1.isNullOrUndefined(tableChild.firstChild) && tableChild.firstChild.nodeName === 'TABLE' && tableChild.firstChild.rows.length > 0 && tableChild.firstChild.rows[0].cells.length > 0) {
+                        tableChild = tableChild.firstChild.rows[0].cells[0];
+                    }
+                    prevElement = tableChild;
+                }
+                if (prevElement) {
+                    (prevElement.textContent.trim() !== '' && ej2_base_1.closest(prevElement, 'td')) ?
+                        selection.setSelectionNode(this.contentModule.getDocument(), prevElement) :
+                        selection.setSelectionText(this.contentModule.getDocument(), prevElement, prevElement, 0, 0);
+                }
+            }
+        };
+        Table.prototype.tableArrowNavigation = function (event, selection, ele) {
+            var selText = selection.range.startContainer;
+            this.previousTableElement = ele;
+            if ((event.keyCode === 40 && selText.nodeType === 3 && (selText.nextSibling && selText.nextSibling.nodeName === 'BR' ||
+                selText.parentNode && selText.parentNode.nodeName !== 'TD')) ||
+                (event.keyCode === 38 && selText.nodeType === 3 && (selText.previousSibling && selText.previousSibling.nodeName === 'BR' ||
+                    selText.parentNode && selText.parentNode.nodeName !== 'TD'))) {
+                return;
+            }
+            event.preventDefault();
+            util_2.removeClassWithAttr([ele], classes.CLS_TABLE_SEL);
+            this.removeTableSelection();
+            if (event.keyCode === 40) {
+                ele = (!ej2_base_2.isNullOrUndefined(ej2_base_1.closest(ele, 'tr').nextElementSibling)) ?
+                    ej2_base_1.closest(ele, 'tr').nextElementSibling.children[ele.cellIndex] :
+                    (ej2_base_1.closest(ele, 'table').tHead && ele.nodeName === 'TH') ?
+                        ej2_base_1.closest(ele, 'table').rows[1].cells[ele.cellIndex] :
+                        (!ej2_base_2.isNullOrUndefined(ej2_base_1.closest(ele, 'table').nextSibling)) ? ej2_base_1.closest(ele, 'table').nextSibling :
+                            ele;
+            }
+            else {
+                ele = (!ej2_base_2.isNullOrUndefined(ej2_base_1.closest(ele, 'tr').previousElementSibling)) ?
+                    ej2_base_1.closest(ele, 'tr').previousElementSibling.children[ele.cellIndex] :
+                    (ej2_base_1.closest(ele, 'table').tHead && ele.nodeName !== 'TH') ?
+                        ej2_base_1.closest(ele, 'table').tHead.rows[0].cells[ele.cellIndex] :
+                        (!ej2_base_2.isNullOrUndefined(ej2_base_1.closest(ele, 'table').previousSibling)) ? ej2_base_1.closest(ele, 'table').previousSibling :
+                            ele;
+            }
+            if (ele) {
+                selection.setSelectionText(this.contentModule.getDocument(), ele, ele, 0, 0);
+            }
+        };
+        Table.prototype.hideTableQuickToolbar = function () {
+            if (this.quickToolObj && this.quickToolObj.tableQTBar && document.body.contains(this.quickToolObj.tableQTBar.element)) {
+                this.quickToolObj.tableQTBar.hidePopup();
+            }
+        };
+        Table.prototype.tableHeader = function (selection, e) {
+            this.parent.formatter.process(this.parent, e, e.originalEvent, { selection: selection, subCommand: e.item.subCommand });
+        };
+        Table.prototype.getAnchorNode = function (element) {
+            var selectParent = ej2_base_1.closest(element, 'a');
+            return (selectParent ? selectParent : element);
+        };
+        Table.prototype.editAreaClickHandler = function (e) {
+            if (this.parent.readonly || !ej2_base_1.isNullOrUndefined(ej2_base_1.closest(e.args.target, '.e-img-caption'))) {
+                return;
+            }
+            var args = e.args;
+            var showOnRightClick = this.parent.quickToolbarSettings.showOnRightClick;
+            if (args.which === 2 || (showOnRightClick && args.which === 1) || (!showOnRightClick && args.which === 3)) {
+                return;
+            }
+            if (this.parent.editorMode === 'HTML' && this.parent.quickToolbarModule && this.parent.quickToolbarModule.tableQTBar) {
+                this.quickToolObj = this.parent.quickToolbarModule;
+                var target = args.target;
+                this.contentModule = this.rendererFactory.getRenderer(enum_1.RenderType.Content);
+                var isPopupOpen = this.quickToolObj.tableQTBar.element.classList.contains('e-rte-pop');
+                if (isPopupOpen) {
+                    return;
+                }
+                var range = this.parent.formatter.editorManager.nodeSelection.getRange(this.contentModule.getDocument());
+                var closestTable = ej2_base_1.closest(target, 'table');
+                var startNode = this.parent.getRange().startContainer.parentElement;
+                var endNode = this.parent.getRange().endContainer.parentElement;
+                var isAnchorEle = this.getAnchorNode(target);
+                var currentTime = new Date().getTime();
+                var ismacRightClick = this.parent.userAgentData.getPlatform() === 'macOS' && args.which === 3;
+                if (target && target.nodeName !== 'A' && isAnchorEle.nodeName !== 'A' && target.nodeName !== 'IMG' && target.nodeName !== 'VIDEO' && !target.classList.contains(classes.CLS_CLICKELEM) &&
+                    target.nodeName !== 'AUDIO' && (startNode === endNode || ismacRightClick) && (target.nodeName === 'TD' || target.nodeName === 'TH' ||
+                    target.nodeName === 'TABLE' || (closestTable && this.parent.contentModule.getEditPanel().contains(closestTable)))
+                    && !(range.startContainer.nodeType === 3 && !(range.collapsed || ismacRightClick)) &&
+                    currentTime - this.resizeEndTime > 100 && !(ismacRightClick && (range.collapsed && range.startOffset !== 0)) && !(ismacRightClick && range.endContainer.nodeName === '#text')) {
+                    var range_1 = this.parent.formatter.editorManager.nodeSelection.getRange(this.contentModule.getDocument());
+                    this.parent.formatter.editorManager.nodeSelection.save(range_1, this.contentModule.getDocument());
+                    this.parent.formatter.editorManager.nodeSelection.Clear(this.contentModule.getDocument());
+                    var pageX = void 0;
+                    var pageY = void 0;
+                    if (ej2_base_1.Browser.isDevice && e.args.touches) {
+                        pageX = (this.parent.iframeSettings.enable) ? window.pageXOffset + this.parent.element.getBoundingClientRect().left +
+                            e.args.changedTouches[0].clientX : e.args.changedTouches[0].pageX;
+                        pageY = (this.parent.iframeSettings.enable) ? window.pageYOffset + this.parent.element.getBoundingClientRect().top +
+                            (!this.parent.inlineMode.enable ? this.parent.toolbarModule.getToolbarHeight() : 0)
+                            + e.args.changedTouches[0].clientY : e.args.changedTouches[0].pageY;
+                    }
+                    else {
+                        pageX = (this.parent.iframeSettings.enable) ? window.pageXOffset
+                            + this.parent.element.getBoundingClientRect().left + args.clientX : args.pageX;
+                        pageY = (this.parent.iframeSettings.enable) ? window.pageYOffset + this.parent.element.getBoundingClientRect().top +
+                            this.parent.toolbarModule.getToolbarHeight() + args.clientY : args.pageY;
+                    }
+                    this.quickToolObj.tableQTBar.showPopup(pageX, pageY, target);
+                    this.parent.formatter.editorManager.nodeSelection.restore();
+                }
+                else {
+                    this.hideTableQuickToolbar();
+                }
+            }
+        };
+        Table.prototype.tableCellSelect = function (e) {
+            var target = e.target;
+            var row = Array.prototype.slice.call(target.parentElement.parentElement.children).indexOf(target.parentElement);
+            var col = Array.prototype.slice.call(target.parentElement.children).indexOf(target);
+            var list = this.dlgDiv.querySelectorAll('.e-rte-tablecell');
+            Array.prototype.forEach.call(list, function (item) {
+                var parentIndex = Array.prototype.slice.call(item.parentElement.parentElement.children).indexOf(item.parentElement);
+                var cellIndex = Array.prototype.slice.call(item.parentElement.children).indexOf(item);
+                util_2.removeClassWithAttr([item], 'e-active');
+                if (parentIndex <= row && cellIndex <= col) {
+                    ej2_base_2.addClass([item], 'e-active');
+                }
+            });
+            this.tblHeader.innerHTML = (col + 1) + 'x' + (row + 1);
+        };
+        Table.prototype.tableMouseUp = function () {
+            this.unwireTableSelectionEvents();
+            this.isTableMoveActive = false;
+        };
+        Table.prototype.tableMouseLeave = function () {
+            if (!ej2_base_1.Browser.isDevice) {
+                this.unwireTableSelectionEvents();
+                this.isTableMoveActive = false;
+                this.resetTableSelection();
+            }
+        };
+        Table.prototype.tableCellLeave = function (e) {
+            util_2.removeClassWithAttr(this.dlgDiv.querySelectorAll('.e-rte-tablecell'), 'e-active');
+            ej2_base_2.addClass([this.dlgDiv.querySelector('.e-rte-tablecell')], 'e-active');
+            this.tblHeader.innerHTML = 1 + 'x' + 1;
+        };
+        Table.prototype.tableCellClick = function (e) {
+            var target = e.target;
+            var row = Array.prototype.slice.call(target.parentElement.parentElement.children).indexOf(target.parentElement) + 1;
+            var col = Array.prototype.slice.call(target.parentElement.children).indexOf(target) + 1;
+            this.self.tableInsert(row, col, e, this);
+        };
+        Table.prototype.tableInsert = function (row, col, e, selectionObj) {
+            var proxy = (selectionObj.self) ? selectionObj.self : this;
+            var startContainer = selectionObj.selection.range.startContainer;
+            if (startContainer.nodeName === 'P' && startContainer.textContent.trim() === '' && !(startContainer.childNodes.length > 0)) {
+                startContainer.innerHTML = '<br />';
+            }
+            var parentNode = startContainer.parentNode;
+            if (proxy.parent.editorMode === 'HTML' &&
+                ((proxy.parent.iframeSettings.enable && !util_1.hasClass(parentNode.ownerDocument.querySelector('body'), 'e-lib')) ||
+                    (!proxy.parent.iframeSettings.enable && ej2_base_1.isNullOrUndefined(ej2_base_1.closest(parentNode, '[id=' + "'" + proxy.contentModule.getPanel().id + "'" + ']'))))) {
+                proxy.contentModule.getEditPanel().focus();
+                var range = proxy.parent.formatter.editorManager.nodeSelection.getRange(proxy.contentModule.getDocument());
+                selectionObj.selection = proxy.parent.formatter.editorManager.nodeSelection.save(range, proxy.contentModule.getDocument());
+            }
+            var value = {
+                rows: row, columns: col, width: {
+                    minWidth: proxy.parent.tableSettings.minWidth,
+                    maxWidth: proxy.parent.tableSettings.maxWidth,
+                    width: proxy.parent.tableSettings.width
+                },
+                selection: selectionObj.selection
+            };
+            if (proxy.popupObj) {
+                var rows = Array.prototype.slice.call(e.target.parentElement.parentElement.children);
+                for (var i = 0; i < rows.length; i++) {
+                    ej2_base_2.EventHandler.remove(rows[i], 'mouseleave', this.tableCellLeave);
+                    var cells = Array.prototype.slice.call(rows[i].children);
+                    for (var j = 0; j < cells.length; j++) {
+                        ej2_base_2.EventHandler.remove(cells[j], 'mousemove', this.tableCellSelect);
+                        ej2_base_2.EventHandler.remove(cells[j], 'mouseup', this.tableCellClick);
+                    }
+                }
+                proxy.popupObj.hide();
+            }
+            if (proxy.editdlgObj) {
+                proxy.editdlgObj.hide();
+            }
+            var x = window.scrollX;
+            var y = window.scrollY;
+            proxy.parent.formatter.process(proxy.parent, selectionObj.args, selectionObj.args.originalEvent, value);
+            proxy.contentModule.getEditPanel().focus();
+            window.scrollTo(x, y);
+            proxy.parent.on(events.mouseDown, proxy.cellSelect, proxy);
+            var selection = proxy.parent.formatter.editorManager.nodeSelection.get(proxy.contentModule.getDocument());
+            if (!ej2_base_2.isNullOrUndefined(selection) && !ej2_base_2.isNullOrUndefined(selection.anchorNode) &&
+                selection.anchorNode.nodeType === Node.ELEMENT_NODE && (selection.anchorNode.tagName === 'TD'
+                || selection.anchorNode.tagName === 'TH')) {
+                proxy.curTable = ej2_base_1.closest(selection.anchorNode, 'table');
+                proxy.activeCell = selection.anchorNode;
+            }
+        };
+        Table.prototype.cellSelect = function (e) {
+            var target = e.args.target;
+            var tdNode = ej2_base_1.closest(target, 'td,th');
+            target = (target.nodeName !== 'TD' && tdNode && this.parent.contentModule.getEditPanel().contains(tdNode)) ?
+                tdNode : target;
+            if (!ej2_base_1.isNullOrUndefined(this.activeCell) && e.args.shiftKey && !ej2_base_1.isNullOrUndefined(target) && !ej2_base_1.isNullOrUndefined(target.tagName)
+                && (target.tagName === 'TD' || target.tagName === 'TH') && this.activeCell !== target) {
+                this.parent.formatter.editorManager.observer.notify('TABLE_MOVE', { event: e.args, selectNode: [this.activeCell] });
+                e.args.preventDefault();
+                return;
+            }
+            if (!(this.parent.quickToolbarSettings.showOnRightClick && e.args.which === 3 &&
+                target.classList.contains(classes.CLS_TABLE_SEL))) {
+                if (this.isTableMoveActive) {
+                    this.unwireTableSelectionEvents();
+                    this.isTableMoveActive = false;
+                }
+                this.activeCell = null;
+                this.heightcheck();
+                this.removeCellSelectClasses();
+                this.removeTableSelection();
+            }
+            if (target && (target.tagName === 'TD' || target.tagName === 'TH')) {
+                ej2_base_2.addClass([target], classes.CLS_TABLE_SEL);
+                this.activeCell = target;
+                this.curTable = (this.curTable) ? this.curTable : ej2_base_1.closest(target, 'table');
+                this.wireTableSelectionEvents();
+                this.isTableMoveActive = true;
+                this.removeResizeElement();
+                if (this.helper && this.contentModule.getEditPanel().contains(this.helper)) {
+                    ej2_base_1.detach(this.helper);
+                }
+            }
+        };
+        Table.prototype.heightcheck = function () {
+            var table = this.parent.contentModule.getEditPanel().querySelector('td.e-cell-select');
+            if (table && table.querySelector('img') && table.querySelector('img').style.height.includes('%')) {
+                table.style.height = 'inherit';
+            }
+        };
+        Table.prototype.wireTableSelectionEvents = function () {
+            ej2_base_2.EventHandler.add(this.curTable, 'mousemove', this.tableMove, this);
+            ej2_base_2.EventHandler.add(this.curTable, 'mouseup', this.tableMouseUp, this);
+            ej2_base_2.EventHandler.add(this.curTable, 'mouseleave', this.tableMouseLeave, this);
+        };
+        Table.prototype.unwireTableSelectionEvents = function () {
+            ej2_base_2.EventHandler.remove(this.curTable, 'mousemove', this.tableMove);
+            ej2_base_2.EventHandler.remove(this.curTable, 'mouseup', this.tableMouseUp);
+            ej2_base_2.EventHandler.remove(this.curTable, 'mouseleave', this.tableMouseLeave);
+        };
+        Table.prototype.removeCellSelectClasses = function () {
+            util_2.removeClassWithAttr(this.contentModule.getEditPanel().querySelectorAll('table td, table th'), classes.CLS_TABLE_SEL_END);
+            util_2.removeClassWithAttr(this.contentModule.getEditPanel().querySelectorAll('table td, table th'), classes.CLS_TABLE_MULTI_CELL);
+            util_2.removeClassWithAttr(this.contentModule.getEditPanel().querySelectorAll('table td, table th'), classes.CLS_TABLE_SEL);
+        };
+        Table.prototype.tableMove = function (event) {
+            this.parent.formatter.editorManager.observer.notify('TABLE_MOVE', { event: event, selectNode: [this.activeCell] });
+        };
+        Table.prototype.resizeHelper = function (e) {
+            if (this.parent.readonly) {
+                return;
+            }
+            if (this.isTableMoveActive) {
+                return;
+            }
+            if (e && e.buttons && e.buttons > 0) {
+                return;
+            }
+            var target = e.target || e.targetTouches[0].target;
+            var closestTable = ej2_base_1.closest(target, 'table.e-rte-table, table.e-rte-paste-table, table.e-rte-custom-table');
+            var isResizing = this.parent.contentModule.getEditPanel().querySelectorAll('.e-table-box.e-rbox-select, .e-table-rhelper.e-column-helper, .e-table-rhelper.e-row-helper').length > 0;
+            if (!isResizing && !ej2_base_1.isNullOrUndefined(this.curTable) && !ej2_base_1.isNullOrUndefined(closestTable) && closestTable !== this.curTable &&
+                this.parent.contentModule.getEditPanel().contains(closestTable)) {
+                this.removeResizeElement();
+                this.removeHelper(e);
+                this.cancelResizeAction();
+            }
+            if (!isResizing && (target.nodeName === 'TABLE' || target.nodeName === 'TD' || target.nodeName === 'TH')) {
+                this.curTable = (closestTable && this.parent.contentModule.getEditPanel().contains(closestTable))
+                    && (target.nodeName === 'TD' || target.nodeName === 'TH') ?
+                    closestTable : target;
+                this.removeResizeElement();
+                this.tableResizeEleCreation(this.curTable, e);
+            }
+        };
+        Table.prototype.tableResizeEleCreation = function (table, e) {
+            this.parent.preventDefaultResize(e);
+            var columns = this.calMaxCol(this.curTable);
+            var rows = [];
+            for (var i = 0; i < table.rows.length; i++) {
+                for (var j = 0; j < table.rows[i].cells.length; j++) {
+                    if (!table.rows[i].cells[j].hasAttribute('rowspan')) {
+                        rows.push(Array.prototype.slice.call(table.rows[i].cells, 0, table.rows[i].cells.length)[j]);
+                        break;
+                    }
+                }
+            }
+            var height = parseInt(getComputedStyle(table).height, 10);
+            var width = parseInt(getComputedStyle(table).width, 10);
+            var pos = this.calcPos(table);
+            for (var i = 0; columns.length >= i; i++) {
+                var colReEle = this.parent.createElement('span', {
+                    attrs: {
+                        'data-col': (i).toString(), 'unselectable': 'on', 'contenteditable': 'false'
+                    }
+                });
+                colReEle.classList.add(classes.CLS_RTE_TABLE_RESIZE, classes.CLS_TB_COL_RES);
+                if (columns.length === i) {
+                    colReEle.style.cssText = 'height: ' + height + 'px; width: 4px; top: ' + pos.top +
+                        'px; left:' + ((columns[i - 1].classList.contains('e-multi-cells-select') ? 0 : pos.left) + this.calcPos(columns[i - 1]).left + columns[i - 1].offsetWidth - 2) + 'px;';
+                }
+                else {
+                    colReEle.style.cssText = 'height: ' + height + 'px; width: 4px; top: ' + pos.top +
+                        'px; left:' + ((columns[i].classList.contains('e-multi-cells-select') ? 0 : pos.left) + this.calcPos(columns[i]).left - 2) + 'px;';
+                }
+                this.contentModule.getEditPanel().appendChild(colReEle);
+            }
+            for (var i = 0; rows.length > i; i++) {
+                var rowReEle = this.parent.createElement('span', {
+                    attrs: {
+                        'data-row': (i).toString(), 'unselectable': 'on', 'contenteditable': 'false'
+                    }
+                });
+                rowReEle.classList.add(classes.CLS_RTE_TABLE_RESIZE, classes.CLS_TB_ROW_RES);
+                var rowPosLeft = !ej2_base_1.isNullOrUndefined(table.getAttribute('cellspacing')) || table.getAttribute('cellspacing') !== '' ?
+                    0 : this.calcPos(rows[i]).left;
+                rowReEle.style.cssText = 'width: ' + width + 'px; height: 4px; top: ' +
+                    (this.calcPos(rows[i]).top + (rows[i].classList.contains('e-multi-cells-select') ? 0 : pos.top) + rows[i].offsetHeight - 2) +
+                    'px; left:' + (rowPosLeft + pos.left) + 'px;';
+                this.contentModule.getEditPanel().appendChild(rowReEle);
+            }
+            var tableReBox = this.parent.createElement('span', {
+                className: classes.CLS_TB_BOX_RES + this.parent.getCssClass(true), attrs: {
+                    'data-col': columns.length.toString(), 'unselectable': 'on', 'contenteditable': 'false'
+                }
+            });
+            tableReBox.style.cssText = 'top: ' + (pos.top + height - 4) +
+                'px; left:' + (pos.left + width - 4) + 'px;';
+            if (ej2_base_1.Browser.isDevice) {
+                tableReBox.classList.add('e-rmob');
+            }
+            this.contentModule.getEditPanel().appendChild(tableReBox);
+        };
+        Table.prototype.removeResizeElement = function () {
+            var item = this.parent.contentModule.getEditPanel().
+                querySelectorAll('.e-column-resize, .e-row-resize, .e-table-box');
+            if (item.length > 0) {
+                for (var i = 0; i < item.length; i++) {
+                    ej2_base_1.detach(item[i]);
+                }
+            }
+        };
+        Table.prototype.calcPos = function (elem) {
+            var parentOffset = {
+                top: 0,
+                left: 0
+            };
+            var offset = elem.getBoundingClientRect();
+            var doc = elem.ownerDocument;
+            var offsetParent = elem.offsetParent || doc.documentElement;
+            var isNestedTable = false;
+            while (offsetParent &&
+                (offsetParent === doc.body || offsetParent === doc.documentElement) &&
+                offsetParent.style.position === 'static') {
+                offsetParent = offsetParent.parentNode;
+            }
+            if (offsetParent.nodeName === 'TD' && elem.nodeName === 'TABLE') {
+                offsetParent = ej2_base_1.closest(offsetParent, '.e-rte-content');
+                isNestedTable = true;
+            }
+            if (offsetParent && offsetParent !== elem && offsetParent.nodeType === 1) {
+                parentOffset = offsetParent.getBoundingClientRect();
+            }
+            if (isNestedTable) {
+                isNestedTable = false;
+                var topValue = this.parent.inputElement && this.parent.inputElement.scrollTop > 0 ?
+                    (this.parent.inputElement.scrollTop + offset.top) - parentOffset.top : offset.top - parentOffset.top;
+                var leftValue = this.parent.inputElement && this.parent.inputElement.scrollLeft > 0 ?
+                    (this.parent.inputElement.scrollLeft + offset.left) - parentOffset.left : offset.left - parentOffset.left;
+                return {
+                    top: topValue,
+                    left: leftValue
+                };
+            }
+            else {
+                return {
+                    top: elem.offsetTop,
+                    left: elem.offsetLeft
+                };
+            }
+        };
+        Table.prototype.getPointX = function (e) {
+            if (e.touches && e.touches.length) {
+                return e.touches[0].pageX;
+            }
+            else {
+                return e.pageX;
+            }
+        };
+        Table.prototype.getPointY = function (e) {
+            if (e.touches && e.touches.length) {
+                return e.touches[0].pageY;
+            }
+            else {
+                return e.pageY;
+            }
+        };
+        Table.prototype.resizeStart = function (e) {
+            var _this = this;
+            if (this.parent.readonly) {
+                return;
+            }
+            if (ej2_base_1.Browser.isDevice) {
+                this.resizeHelper(e);
+            }
+            var target = e.target;
+            if (target.classList.contains(classes.CLS_TB_COL_RES) ||
+                target.classList.contains(classes.CLS_TB_ROW_RES) ||
+                target.classList.contains(classes.CLS_TB_BOX_RES)) {
+                this.resetResizeHelper(this.curTable);
+                e.preventDefault();
+                this.parent.preventDefaultResize(e);
+                util_2.removeClassWithAttr(this.curTable.querySelectorAll('td,th'), classes.CLS_TABLE_SEL);
+                this.removeTableSelection();
+                this.pageX = this.getPointX(e);
+                this.pageY = this.getPointY(e);
+                this.resizeBtnInit();
+                this.hideTableQuickToolbar();
+                if (target.classList.contains(classes.CLS_TB_COL_RES)) {
+                    this.resizeBtnStat.column = true;
+                    if (parseInt(target.getAttribute('data-col'), 10) === this.calMaxCol(this.curTable).length) {
+                        this.currentColumnResize = 'last';
+                        this.colIndex = parseInt(target.getAttribute('data-col'), 10) - 1;
+                        this.columnEle = this.calMaxCol(this.curTable)[this.colIndex];
+                    }
+                    else {
+                        if (parseInt(target.getAttribute('data-col'), 10) === 0) {
+                            this.currentColumnResize = 'first';
+                        }
+                        else {
+                            this.currentColumnResize = 'middle';
+                            var cellColl = this.curTable.rows[0].cells;
+                            var cellCount = 0;
+                            for (var cell = 0; cell < cellColl.length; cell++) {
+                                cellCount = cellCount + cellColl[cell].colSpan;
+                            }
+                            var sizes = new Array(cellCount);
+                            var colGroupEle = ej2_base_1.createElement('colgroup');
+                            var rowSpanCells = new Map();
+                            for (var i = 0; i < this.curTable.rows.length; i++) {
+                                var currentColIndex = 0;
+                                for (var k = 0; k < this.curTable.rows[i].cells.length; k++) {
+                                    for (var l = 1; l < this.curTable.rows[i].cells[k].rowSpan; l++) {
+                                        var key = "" + (i + l) + currentColIndex;
+                                        rowSpanCells.set(key, this.curTable.rows[i].cells[k]);
+                                    }
+                                    var cellIndex = this.getCellIndex(rowSpanCells, i, k);
+                                    if (cellIndex > currentColIndex) {
+                                        currentColIndex = cellIndex;
+                                    }
+                                    var width = this.curTable.rows[i].cells[k].offsetWidth;
+                                    if (!sizes[currentColIndex] || width < sizes[currentColIndex]) {
+                                        sizes[currentColIndex] = width;
+                                    }
+                                    currentColIndex += 1 + this.curTable.rows[i].cells[k].colSpan - 1;
+                                }
+                            }
+                            for (var size = 0; size < sizes.length; size++) {
+                                var cell = ej2_base_1.createElement('col');
+                                cell.appendChild(ej2_base_1.createElement('br'));
+                                cell.style.width = this.convertPixelToPercentage(sizes[size], parseInt(getComputedStyle(this.curTable).width, 10)) + '%';
+                                colGroupEle.appendChild(cell);
+                            }
+                            this.curTable.insertBefore(colGroupEle, this.curTable.firstChild);
+                            for (var i = 0; i < this.curTable.rows.length; i++) {
+                                for (var k = 0; k < this.curTable.rows[i].cells.length; k++) {
+                                    this.curTable.rows[i].cells[k].style.width = '';
+                                }
+                            }
+                        }
+                        this.colIndex = parseInt(target.getAttribute('data-col'), 10);
+                        this.columnEle = this.calMaxCol(this.curTable)[this.colIndex];
+                    }
+                    this.moveEle = e.target;
+                    this.appendHelper();
+                }
+                if (target.classList.contains(classes.CLS_TB_ROW_RES)) {
+                    this.rowEle = this.curTable.rows[parseInt(target.getAttribute('data-row'), 10)];
+                    this.resizeBtnStat.row = true;
+                    this.appendHelper();
+                }
+                if (target.classList.contains(classes.CLS_TB_BOX_RES)) {
+                    this.resizeBtnStat.tableBox = true;
+                }
+                if (ej2_base_1.Browser.isDevice && this.helper && !this.helper.classList.contains('e-reicon')) {
+                    this.helper.classList.add('e-reicon');
+                    ej2_base_2.EventHandler.add(document, ej2_base_1.Browser.touchStartEvent, this.removeHelper, this);
+                    ej2_base_2.EventHandler.add(this.helper, ej2_base_1.Browser.touchStartEvent, this.resizeStart, this);
+                }
+                else {
+                    var args = { event: e, requestType: 'Table' };
+                    this.parent.trigger(events.resizeStart, args, function (resizeStartArgs) {
+                        if (resizeStartArgs.cancel) {
+                            _this.cancelResizeAction();
+                        }
+                    });
+                }
+                if (this.isResizeBind) {
+                    ej2_base_2.EventHandler.add(this.contentModule.getDocument(), ej2_base_1.Browser.touchMoveEvent, this.resizing, this);
+                    ej2_base_2.EventHandler.add(this.contentModule.getDocument(), ej2_base_1.Browser.touchEndEvent, this.resizeEnd, this);
+                    this.isResizeBind = false;
+                }
+            }
+        };
+        Table.prototype.getCellIndex = function (rowSpanCells, rowIndex, colIndex) {
+            var cellKey = "" + rowIndex + colIndex;
+            var spannedCell = rowSpanCells.get(cellKey);
+            if (spannedCell) {
+                return this.getCellIndex(rowSpanCells, rowIndex, colIndex + spannedCell.colSpan);
+            }
+            else {
+                return colIndex;
+            }
+        };
+        Table.prototype.removeHelper = function (e) {
+            var cls = e.target.classList;
+            if (!(cls.contains('e-reicon')) && this.helper) {
+                ej2_base_2.EventHandler.remove(document, ej2_base_1.Browser.touchStartEvent, this.removeHelper);
+                ej2_base_2.EventHandler.remove(this.helper, ej2_base_1.Browser.touchStartEvent, this.resizeStart);
+                if (this.helper && this.contentModule.getEditPanel().contains(this.helper)) {
+                    ej2_base_1.detach(this.helper);
+                }
+                this.pageX = null;
+                this.helper = null;
+            }
+        };
+        Table.prototype.appendHelper = function () {
+            this.helper = this.parent.createElement('div', {
+                className: 'e-table-rhelper' + this.parent.getCssClass(true)
+            });
+            if (ej2_base_1.Browser.isDevice) {
+                this.helper.classList.add('e-reicon');
+            }
+            this.contentModule.getEditPanel().appendChild(this.helper);
+            this.setHelperHeight();
+        };
+        Table.prototype.setHelperHeight = function () {
+            var pos = this.calcPos(this.curTable);
+            if (this.resizeBtnStat.column) {
+                this.helper.classList.add('e-column-helper');
+                this.helper.style.cssText = 'height: ' + getComputedStyle(this.curTable).height + '; top: ' +
+                    pos.top + 'px; left:' + ((pos.left + this.calcPos(this.columnEle).left) +
+                    (this.currentColumnResize === 'last' ? this.columnEle.offsetWidth : 0) - 1) + 'px;';
+            }
+            else {
+                this.helper.classList.add('e-row-helper');
+                this.helper.style.cssText = 'width: ' + getComputedStyle(this.curTable).width + '; top: ' +
+                    (this.calcPos(this.rowEle).top + pos.top + this.rowEle.offsetHeight - 1) +
+                    'px; left:' + (this.calcPos(this.rowEle).left + pos.left) + 'px;';
+            }
+        };
+        Table.prototype.updateHelper = function () {
+            var pos = this.calcPos(this.curTable);
+            if (this.resizeBtnStat.column) {
+                var left = (pos.left + this.calcPos(this.columnEle).left) +
+                    (this.currentColumnResize === 'last' ? this.columnEle.offsetWidth : 0) - 1;
+                this.helper.style.left = left + 'px';
+                this.helper.style.height = this.curTable.offsetHeight + 'px';
+            }
+            else {
+                var top_1 = this.calcPos(this.rowEle).top + pos.top + this.rowEle.offsetHeight - 1;
+                this.helper.style.top = top_1 + 'px';
+            }
+        };
+        Table.prototype.calMaxCol = function (curTable) {
+            var cellColl = curTable.rows[0].cells;
+            var cellCount = 0;
+            for (var cell = 0; cell < cellColl.length; cell++) {
+                cellCount = cellCount + cellColl[cell].colSpan;
+            }
+            var cells = new Array(cellCount);
+            var rowSpanCells = new Map();
+            for (var i = 0; i < curTable.rows.length; i++) {
+                var currentColIndex = 0;
+                for (var k = 0; k < curTable.rows[i].cells.length; k++) {
+                    for (var l = 1; l < curTable.rows[i].cells[k].rowSpan; l++) {
+                        var key = "" + (i + l) + currentColIndex;
+                        rowSpanCells.set(key, curTable.rows[i].cells[k]);
+                    }
+                    var cellIndex = this.getCellIndex(rowSpanCells, i, k);
+                    if (cellIndex > currentColIndex) {
+                        currentColIndex = cellIndex;
+                    }
+                    var width = curTable.rows[i].cells[k].offsetWidth;
+                    if (!cells[currentColIndex] || width < cells[currentColIndex].offsetWidth) {
+                        cells[currentColIndex] = curTable.rows[i].cells[k];
+                    }
+                    currentColIndex += 1 + curTable.rows[i].cells[k].colSpan - 1;
+                }
+            }
+            return cells;
+        };
+        Table.prototype.resizing = function (e) {
+            var _this = this;
+            var pageX = this.getPointX(e);
+            var pageY = this.getPointY(e);
+            var mouseX = (this.parent.enableRtl) ? -(pageX - this.pageX) : (pageX - this.pageX);
+            var mouseY = (this.parent.enableRtl) ? -(pageY - this.pageY) : (pageY - this.pageY);
+            this.pageX = pageX;
+            this.pageY = pageY;
+            var maxiumWidth;
+            var currentTdElement = this.curTable.closest('td');
+            var args = { event: e, requestType: 'table' };
+            this.parent.trigger(events.onResize, args, function (resizingArgs) {
+                if (resizingArgs.cancel) {
+                    _this.cancelResizeAction();
+                }
+                else {
+                    var tableReBox = _this.contentModule.getEditPanel().querySelector('.e-table-box');
+                    var tableWidth = parseInt(getComputedStyle(_this.curTable).width, 10);
+                    var tableHeight = !isNaN(parseInt(_this.curTable.style.height, 10)) ?
+                        parseInt(_this.curTable.style.height, 10) : parseInt(getComputedStyle(_this.curTable).height, 10);
+                    var paddingSize = +getComputedStyle(_this.contentModule.getEditPanel()).paddingRight.match(/\d/g).join('');
+                    var rteWidth = _this.contentModule.getEditPanel().offsetWidth -
+                        (_this.contentModule.getEditPanel().offsetWidth -
+                            _this.contentModule.getEditPanel().clientWidth) - paddingSize * 2;
+                    var widthCompare = void 0;
+                    if (!ej2_base_1.isNullOrUndefined(_this.curTable.parentElement.closest('table')) && !ej2_base_1.isNullOrUndefined(_this.curTable.closest('td')) &&
+                        _this.contentModule.getEditPanel().contains(_this.curTable.closest('td'))) {
+                        var currentTd = _this.curTable.closest('td');
+                        var currentTDPad = +getComputedStyle(currentTd).paddingRight.match(/\d/g).join('');
+                        widthCompare = currentTd.offsetWidth - (currentTd.offsetWidth - currentTd.clientWidth) - currentTDPad * 2;
+                    }
+                    else {
+                        widthCompare = rteWidth;
+                    }
+                    if (_this.resizeBtnStat.column) {
+                        if (_this.curTable.closest('li')) {
+                            widthCompare = _this.curTable.closest('li').offsetWidth;
+                        }
+                        var colGroup = _this.curTable.querySelectorAll('colgroup > col');
+                        var currentTableWidth = void 0;
+                        if (_this.curTable.style.width !== '' && _this.curTable.style.width.includes('%')) {
+                            currentTableWidth = parseFloat(_this.curTable.style.width.split('%')[0]);
+                        }
+                        else {
+                            currentTableWidth = _this.getCurrentTableWidth(_this.curTable.offsetWidth, _this.parent.inputElement.offsetWidth);
+                        }
+                        var currentCol = _this.calMaxCol(_this.curTable)[_this.colIndex];
+                        var currentColResizableWidth = _this.getCurrentColWidth(currentCol, tableWidth);
+                        if (_this.currentColumnResize === 'first') {
+                            mouseX = mouseX - 0.75;
+                            _this.removeResizeElement();
+                            if (currentTdElement) {
+                                maxiumWidth = _this.curTable.getBoundingClientRect().right - _this.calcPos(currentTdElement).left;
+                                _this.curTable.style.maxWidth = maxiumWidth + 'px';
+                            }
+                            if (((mouseX !== 0 && 5 < currentColResizableWidth) || mouseX < 0) && currentTableWidth <= 100 &&
+                                _this.convertPixelToPercentage(tableWidth - mouseX, widthCompare) <= 100) {
+                                var firstColumnsCell = _this.findFirstLastColCells(_this.curTable, true);
+                                _this.curTable.style.width = _this.convertPixelToPercentage(tableWidth - mouseX, widthCompare) > 100 ? (100 + '%') :
+                                    (_this.convertPixelToPercentage(tableWidth - mouseX, widthCompare) + '%');
+                                var differenceWidth = currentTableWidth - _this.convertPixelToPercentage(tableWidth - mouseX, widthCompare);
+                                var preMarginLeft = 0;
+                                var widthType = _this.curTable.style.width.indexOf('%') > -1;
+                                if (!widthType && _this.curTable.offsetWidth > _this.contentModule.getEditPanel().offsetWidth) {
+                                    _this.curTable.style.width = rteWidth + 'px';
+                                    return;
+                                }
+                                if (widthType && parseFloat(_this.curTable.style.width.split('%')[0]) > 100) {
+                                    _this.curTable.style.width = '100%';
+                                    return;
+                                }
+                                if (!ej2_base_1.isNullOrUndefined(_this.curTable.style.marginLeft) && _this.curTable.style.marginLeft !== '') {
+                                    var regex = /[-+]?\d*\.\d+|\d+/;
+                                    var value = _this.curTable.style.marginLeft.match(regex);
+                                    if (!ej2_base_1.isNullOrUndefined(value)) {
+                                        preMarginLeft = parseFloat(value[0]);
+                                    }
+                                }
+                                var currentMarginLeft = preMarginLeft + differenceWidth;
+                                if (currentMarginLeft && currentMarginLeft > 100) {
+                                    var width = parseFloat(_this.curTable.style.width);
+                                    currentMarginLeft = 100 - width;
+                                }
+                                if (!_this.curTable.classList.contains('e-rte-paste-table') && currentMarginLeft && currentMarginLeft < 1) {
+                                    _this.curTable.style.marginLeft = null;
+                                    _this.curTable.style.width = '100%';
+                                    return;
+                                }
+                                _this.curTable.style.marginLeft = 'calc(' + (_this.curTable.style.width === '100%' ? 0 : currentMarginLeft) + '%)';
+                                for (var i = 0; i < firstColumnsCell.length; i++) {
+                                    var currentColumnCellWidth = _this.getCurrentColWidth(firstColumnsCell[i], tableWidth);
+                                    firstColumnsCell[i].style.width = (currentColumnCellWidth - differenceWidth) + '%';
+                                }
+                            }
+                        }
+                        else if (_this.currentColumnResize === 'last') {
+                            mouseX = mouseX + 0.75;
+                            _this.removeResizeElement();
+                            if (currentTdElement) {
+                                maxiumWidth = currentTdElement.getBoundingClientRect().right - _this.curTable.getBoundingClientRect().left;
+                                _this.curTable.style.maxWidth = maxiumWidth + 'px';
+                            }
+                            if (((mouseX !== 0 && 5 < currentColResizableWidth) || mouseX > 0) &&
+                                currentTableWidth <= 100 && _this.convertPixelToPercentage(tableWidth + mouseX, widthCompare) <= 100) {
+                                var lastColumnsCell = _this.findFirstLastColCells(_this.curTable, false);
+                                _this.curTable.style.width = _this.convertPixelToPercentage(tableWidth + mouseX, widthCompare) > 100 ? (100 + '%') : (_this.convertPixelToPercentage(tableWidth + mouseX, widthCompare) + '%');
+                                var differenceWidth = currentTableWidth - _this.convertPixelToPercentage(tableWidth + mouseX, widthCompare);
+                                for (var i = 0; i < lastColumnsCell.length; i++) {
+                                    var currentColumnCellWidth = _this.getCurrentColWidth(lastColumnsCell[i], tableWidth);
+                                    lastColumnsCell[i].style.width = (currentColumnCellWidth - differenceWidth) + '%';
+                                }
+                            }
+                        }
+                        else {
+                            var actualwid = colGroup[_this.colIndex].offsetWidth - mouseX;
+                            var totalwid = colGroup[_this.colIndex].offsetWidth + colGroup[_this.colIndex - 1].offsetWidth;
+                            if ((totalwid - actualwid) > 20 && actualwid > 20) {
+                                var leftColumnWidth = totalwid - actualwid;
+                                var rightColWidth = actualwid;
+                                colGroup[_this.colIndex - 1].style.width = _this.convertPixelToPercentage(leftColumnWidth, tableWidth) + '%';
+                                colGroup[_this.colIndex].style.width = _this.convertPixelToPercentage(rightColWidth, tableWidth) + '%';
+                            }
+                        }
+                        _this.updateHelper();
+                    }
+                    else if (_this.resizeBtnStat.row) {
+                        _this.parent.preventDefaultResize(e);
+                        var tableTrElementPixel = [];
+                        var currentTableTrElement = _this.curTable.querySelectorAll('tr');
+                        for (var i = 0; i < currentTableTrElement.length; i++) {
+                            if (_this.rowEle !== currentTableTrElement[i]) {
+                                tableTrElementPixel[i] = (parseFloat(currentTableTrElement[i].clientHeight.toString()));
+                            }
+                        }
+                        _this.curTable.style.height = (parseFloat(_this.curTable.clientHeight.toString()) + ((mouseY > 0) ? 0 : mouseY)) + 'px';
+                        for (var i = 0; i < currentTableTrElement.length; i++) {
+                            if (_this.rowEle === currentTableTrElement[i]) {
+                                currentTableTrElement[i].style.height = (parseFloat(currentTableTrElement[i].clientHeight.toString()) + mouseY) + 'px';
+                            }
+                            else {
+                                currentTableTrElement[i].style.height = tableTrElementPixel[i] + 'px';
+                            }
+                        }
+                        if (!ej2_base_1.isNullOrUndefined(tableReBox)) {
+                            tableReBox.style.cssText = 'top: ' + (_this.calcPos(_this.curTable).top + tableHeight - 4) +
+                                'px; left:' + (_this.calcPos(_this.curTable).left + tableWidth - 4) + 'px;';
+                        }
+                        _this.updateHelper();
+                    }
+                    else if (_this.resizeBtnStat.tableBox) {
+                        if (currentTdElement) {
+                            var tableBoxPosition = _this.curTable.getBoundingClientRect().left
+                                - currentTdElement.getBoundingClientRect().left;
+                            maxiumWidth = Math.abs(tableBoxPosition - currentTdElement.getBoundingClientRect().width) - 5;
+                            _this.curTable.style.maxWidth = maxiumWidth + 'px';
+                        }
+                        _this.curTable.style.height = tableHeight + mouseY + 'px';
+                        if (!ej2_base_1.isNullOrUndefined(tableReBox)) {
+                            tableReBox.classList.add('e-rbox-select');
+                            tableReBox.style.cssText = 'top: ' + (_this.calcPos(_this.curTable).top + parseInt(getComputedStyle(_this.curTable).height, 10) - 4) +
+                                'px; left:' + (_this.calcPos(_this.curTable).left + tableWidth - 4) + 'px;';
+                        }
+                        if (_this.curTable.closest('li')) {
+                            widthCompare = _this.curTable.closest('li').offsetWidth;
+                        }
+                        var widthType = _this.curTable.style.width.indexOf('%') > -1;
+                        if (widthType && parseFloat(_this.curTable.style.width.split('%')[0]) > 100) {
+                            _this.curTable.style.width = '100%';
+                            return;
+                        }
+                        if (!widthType && _this.curTable.offsetWidth > _this.contentModule.getEditPanel().offsetWidth) {
+                            _this.curTable.style.width = rteWidth + 'px';
+                            return;
+                        }
+                        _this.curTable.style.width = widthType ? _this.convertPixelToPercentage(tableWidth + mouseX, widthCompare) + '%'
+                            : tableWidth + mouseX + 'px';
+                    }
+                }
+            });
+        };
+        Table.prototype.getCurrentColWidth = function (col, tableWidth) {
+            var currentColWidth = 0;
+            if (col.style.width !== '' && col.style.width.includes('%')) {
+                currentColWidth = parseFloat(col.style.width.split('%')[0]);
+            }
+            else {
+                currentColWidth = this.convertPixelToPercentage(col.offsetWidth, tableWidth);
+            }
+            return currentColWidth;
+        };
+        Table.prototype.getCurrentTableWidth = function (tableWidth, parentWidth) {
+            var currentTableWidth = 0;
+            currentTableWidth = tableWidth / parentWidth * 100;
+            return currentTableWidth;
+        };
+        Table.prototype.findFirstLastColCells = function (table, isFirst) {
+            var resultColumns = [];
+            var rows = table.rows;
+            var rowSpanCellIndexs = [];
+            var _loop_1 = function (i) {
+                var cellIndex = isFirst ? 0 : rows[i].cells.length - 1;
+                var column = rows[i].cells[cellIndex];
+                for (var rowSpan = 1; rowSpan < column.rowSpan; rowSpan++) {
+                    var key = i + rowSpan + "-" + cellIndex;
+                    rowSpanCellIndexs.push(key);
+                }
+                var spannedCellKey = i + "-" + cellIndex;
+                if (rowSpanCellIndexs.length === 0 || (isFirst && rowSpanCellIndexs.indexOf(spannedCellKey) === -1) || (!isFirst && rowSpanCellIndexs.indexOf(spannedCellKey) === -1 && rowSpanCellIndexs.every(function (key) { return key.split('-')[0] !== i.toString(); }))) {
+                    resultColumns.push(column);
+                }
+            };
+            for (var i = 0; i < rows.length; i++) {
+                _loop_1(i);
+            }
+            return resultColumns;
+        };
+        Table.prototype.convertPixelToPercentage = function (value, offsetValue) {
+            return (value / offsetValue) * 100;
+        };
+        Table.prototype.cancelResizeAction = function () {
+            this.isResizeBind = true;
+            ej2_base_2.EventHandler.remove(this.contentModule.getDocument(), ej2_base_1.Browser.touchMoveEvent, this.resizing);
+            ej2_base_2.EventHandler.remove(this.contentModule.getDocument(), ej2_base_1.Browser.touchEndEvent, this.resizeEnd);
+            this.removeResizeElement();
+        };
+        Table.prototype.resizeEnd = function (e) {
+            this.resizeBtnInit();
+            this.isResizeBind = true;
+            ej2_base_2.EventHandler.remove(this.contentModule.getDocument(), ej2_base_1.Browser.touchMoveEvent, this.resizing);
+            ej2_base_2.EventHandler.remove(this.contentModule.getDocument(), ej2_base_1.Browser.touchEndEvent, this.resizeEnd);
+            if (this.contentModule.getEditPanel().querySelector('.e-table-box') &&
+                this.contentModule.getEditPanel().contains(this.contentModule.getEditPanel().querySelector('.e-table-box'))) {
+                this.removeResizeElement();
+            }
+            if (this.helper && this.contentModule.getEditPanel().contains(this.helper)) {
+                ej2_base_1.detach(this.helper);
+                this.helper = null;
+            }
+            this.resetResizeHelper(this.curTable);
+            this.pageX = null;
+            this.pageY = null;
+            this.moveEle = null;
+            var currentTableTrElement = this.curTable.querySelectorAll('tr');
+            var tableTrPercentage = [];
+            for (var i = 0; i < currentTableTrElement.length; i++) {
+                var percentage = (parseFloat(currentTableTrElement[i].clientHeight.toString())
+                    / parseFloat(this.curTable.clientHeight.toString())) * 100;
+                tableTrPercentage[i] = percentage;
+            }
+            for (var i = 0; i < currentTableTrElement.length; i++) {
+                if (currentTableTrElement[i].parentElement.nodeName === 'THEAD') {
+                    currentTableTrElement[i].parentElement.style.height = tableTrPercentage[i] + '%';
+                    currentTableTrElement[i].style.height = tableTrPercentage[i] + '%';
+                }
+                else {
+                    currentTableTrElement[i].style.height = tableTrPercentage[i] + '%';
+                }
+            }
+            var args = { event: e, requestType: 'table' };
+            this.parent.trigger(events.resizeStop, args);
+            this.parent.formatter.saveData();
+            this.resizeEndTime = new Date().getTime();
+        };
+        Table.prototype.resetResizeHelper = function (curTable) {
+            var colHelper = this.parent.element.querySelectorAll('.e-table-rhelper.e-column-helper');
+            Array.from(colHelper).forEach(function (element) {
+                if (element.parentNode) {
+                    element.parentNode.removeChild(element);
+                }
+            });
+            var rowHelper = this.parent.element.querySelectorAll('.e-table-rhelper.e-row-helper');
+            Array.from(rowHelper).forEach(function (element) {
+                if (element.parentNode) {
+                    element.parentNode.removeChild(element);
+                }
+            });
+            if (parseInt(curTable.style.width, 10) === 0) {
+                curTable.style.width = curTable.offsetWidth + 'px';
+            }
+            var colGroup = curTable.querySelector('colgroup');
+            if (colGroup) {
+                for (var i = 0; i < curTable.rows.length; i++) {
+                    for (var k = 0; k < curTable.rows[i].cells.length; k++) {
+                        var width = this.convertPixelToPercentage(curTable.rows[i].cells[k].offsetWidth, parseInt(getComputedStyle(curTable).width, 10)) + '%';
+                        curTable.rows[i].cells[k].style.width = width;
+                    }
+                }
+                curTable.removeChild(colGroup);
+            }
+        };
+        Table.prototype.resizeBtnInit = function () {
+            return this.resizeBtnStat = { column: false, row: false, tableBox: false };
+        };
+        Table.prototype.addRow = function (selectCell, e, tabkey) {
+            var cmd;
+            if (tabkey) {
+                cmd = {
+                    item: { command: 'Table', subCommand: 'InsertRowAfter' }
+                };
+            }
+            var value = {
+                selection: selectCell,
+                subCommand: (tabkey) ? cmd.item.subCommand : e.item.subCommand
+            };
+            this.parent.formatter.process(this.parent, (tabkey) ? cmd : e, e, value);
+        };
+        Table.prototype.addColumn = function (selectCell, e) {
+            this.parent.formatter.process(this.parent, e, e, { selection: selectCell, width: this.parent.tableSettings.width, subCommand: e.item.subCommand });
+        };
+        Table.prototype.removeRowColumn = function (selectCell, e) {
+            this.parent.formatter.process(this.parent, e, e, { selection: selectCell, subCommand: e.item.subCommand });
+            this.hideTableQuickToolbar();
+        };
+        Table.prototype.removeTable = function (selection, args, delKey) {
+            var cmd;
+            if (delKey) {
+                cmd = { item: { command: 'Table', subCommand: 'TableRemove' } };
+            }
+            var value = {
+                selection: selection,
+                subCommand: (delKey) ? cmd.item.subCommand : args.item.subCommand
+            };
+            this.parent.formatter.process(this.parent, (delKey) ? cmd : args, args.originalEvent, value);
+            this.contentModule.getEditPanel().focus();
+            if (this.parent.inputElement.innerHTML === null || this.parent.inputElement.innerHTML === '') {
+                if (this.parent.enterKey === 'DIV') {
+                    this.contentModule.getEditPanel().innerHTML = '<div><br/></div>';
+                }
+                else if (this.parent.enterKey === 'BR') {
+                    this.contentModule.getEditPanel().innerHTML = '<br/>';
+                }
+                else {
+                    this.contentModule.getEditPanel().innerHTML = '<p><br/></p>';
+                }
+            }
+            this.removeResizeElement();
+            this.hideTableQuickToolbar();
+        };
+        Table.prototype.renderDlgContent = function (args) {
+            var _this = this;
+            var argsTarget = args.args.originalEvent.target;
+            if (ej2_base_1.Browser.isDevice || this.parent.inlineMode.enable || !ej2_base_2.isNullOrUndefined(ej2_base_1.closest(argsTarget, '.e-rte-text-popup'))) {
+                this.insertTableDialog(args);
+                return;
+            }
+            if (this.popupObj) {
+                this.popupObj.hide();
+                return;
+            }
+            this.hideTableQuickToolbar();
+            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);
+            var tableDiv = this.parent.createElement('div', { className: 'e-rte-table-span' + this.parent.getCssClass(true) });
+            this.drawTable(tableDiv, args);
+            this.dlgDiv.appendChild(tableDiv);
+            this.dlgDiv.appendChild(this.parent.createElement('span', { className: 'e-span-border' + this.parent.getCssClass(true) }));
+            var btnEle = this.parent.createElement('button', {
+                className: 'e-insert-table-btn' + this.parent.getCssClass(true), id: this.rteID + '_insertTable',
+                attrs: { type: 'button', tabindex: '0' }
+            });
+            if (!ej2_base_1.isNullOrUndefined(this.parent.getToolbarElement().querySelector('.e-expended-nav'))) {
+                this.parent.getToolbarElement().querySelector('.e-expended-nav').setAttribute('tabindex', '1');
+            }
+            this.dlgDiv.appendChild(btnEle);
+            this.createTableButton = new ej2_buttons_1.Button({
+                iconCss: 'e-icons e-create-table', content: insertbtn, cssClass: 'e-flat' + this.parent.getCssClass(true),
+                enableRtl: this.parent.enableRtl, locale: this.parent.locale
+            });
+            this.createTableButton.isStringTemplate = true;
+            this.createTableButton.appendTo(btnEle);
+            ej2_base_2.EventHandler.add(btnEle, 'click', this.insertTableDialog, { self: this, args: args.args, selection: args.selection });
+            this.parent.getToolbar().parentElement.appendChild(this.dlgDiv);
+            var target = args.args.originalEvent.target;
+            target = target.classList.contains('e-toolbar-item') ? target.firstChild : target.parentElement;
+            this.popupObj = new ej2_popups_1.Popup(this.dlgDiv, {
+                targetType: 'relative',
+                relateTo: target,
+                collision: { X: 'fit', Y: 'none' },
+                offsetY: 8,
+                viewPortElement: this.parent.element,
+                position: { X: 'left', Y: 'bottom' },
+                enableRtl: this.parent.enableRtl,
+                zIndex: 10001,
+                close: function (event) {
+                    ej2_base_2.EventHandler.remove(btnEle, 'click', _this.insertTableDialog);
+                    _this.dlgDiv.removeEventListener('keydown', _this.createTablePopupBoundFn);
+                    ej2_base_1.detach(btnEle);
+                    if (_this.createTableButton && !_this.createTableButton.isDestroyed) {
+                        _this.createTableButton.destroy();
+                        _this.createTableButton.element = null;
+                        _this.createTableButton = null;
+                    }
+                    _this.parent.isBlur = false;
+                    _this.popupObj.element.parentElement.style.zIndex = '';
+                    _this.popupObj.destroy();
+                    ej2_base_1.detach(_this.popupObj.element);
+                    _this.popupObj = null;
+                }
+            });
+            ej2_base_2.addClass([this.popupObj.element], 'e-popup-open');
+            this.popupObj.element.parentElement.style.zIndex = '11';
+            if (!ej2_base_1.isNullOrUndefined(this.parent.cssClass)) {
+                ej2_base_2.addClass([this.popupObj.element], this.parent.getCssClass());
+            }
+            btnEle.focus();
+            this.popupObj.refreshPosition(target);
+        };
+        Table.prototype.onIframeMouseDown = function () {
+            if (this.popupObj) {
+                this.popupObj.hide();
+            }
+            if (this.parent.inlineMode.enable && this.editdlgObj) {
+                this.editdlgObj.hide();
+            }
+            if (!ej2_base_1.isNullOrUndefined(this.parent) && !ej2_base_1.isNullOrUndefined(this.parent.contentModule) && !ej2_base_1.isNullOrUndefined(this.parent.contentModule.getEditPanel())) {
+                this.removeResizeElement();
+            }
+        };
+        Table.prototype.docClick = function (e) {
+            var target = e.args.target;
+            if (target && target.classList && ((this.popupObj && !ej2_base_1.closest(target, '[id=' + "'" + this.popupObj.element.id + "'" + ']') ||
+                (this.editdlgObj && !ej2_base_1.closest(target, '#' + this.editdlgObj.element.id)))) && !target.classList.contains('e-create-table') &&
+                target.offsetParent && !target.offsetParent.classList.contains('e-rte-backgroundcolor-dropdown')) {
+                if (this.popupObj) {
+                    this.popupObj.hide();
+                }
+                if (this.editdlgObj) {
+                    this.parent.notify(events.documentClickClosedBy, { closedBy: 'outside click' });
+                    this.editdlgObj.hide();
+                }
+                this.parent.isBlur = true;
+                util_1.dispatchEvent(this.parent.element, 'focusout');
+            }
+            var closestEle = ej2_base_1.closest(target, 'td');
+            var isExist = closestEle && this.parent.contentModule.getEditPanel().contains(closestEle) ? true : false;
+            if (target && target.tagName !== 'TD' && target.tagName !== 'TH' && !isExist &&
+                ej2_base_1.closest(target, '.e-rte-quick-popup') === null && target.offsetParent &&
+                !target.offsetParent.classList.contains('e-quick-dropdown') &&
+                !target.offsetParent.classList.contains('e-rte-backgroundcolor-dropdown') && !ej2_base_1.closest(target, '.e-rte-dropdown-popup')
+                && !ej2_base_1.closest(target, '.e-rte-elements')) {
+                var isToolbarClick = target && target.closest('.e-toolbar') ? true : false;
+                if (!isToolbarClick) {
+                    this.removeCellSelectClasses();
+                }
+                this.removeTableSelection();
+                if (!ej2_base_1.Browser.isIE) {
+                    this.hideTableQuickToolbar();
+                }
+            }
+            if (target && target.classList && !target.classList.contains(classes.CLS_TB_COL_RES) &&
+                !target.classList.contains(classes.CLS_TB_ROW_RES) && !target.classList.contains(classes.CLS_TB_BOX_RES)) {
+                this.removeResizeElement();
+            }
+        };
+        Table.prototype.drawTable = function (tableDiv, args) {
+            var rowDiv;
+            var tableCell;
+            for (var row = 0; row < 3; row++) {
+                rowDiv = this.parent.createElement('div', { className: 'e-rte-table-row' + this.parent.getCssClass(true), attrs: { 'data-column': '' + row } });
+                ej2_base_2.EventHandler.add(rowDiv, 'mouseleave', this.tableCellLeave, this);
+                for (var col = 0; col < 10; col++) {
+                    tableCell = this.parent.createElement('div', { className: 'e-rte-tablecell e-default' + this.parent.getCssClass(true), attrs: { 'data-cell': '' + col } });
+                    rowDiv.appendChild(tableCell);
+                    tableCell.style.display = 'inline-block';
+                    if (col === 0 && row === 0) {
+                        ej2_base_2.addClass([tableCell], 'e-active');
+                    }
+                    ej2_base_2.EventHandler.add(tableCell, 'mousemove', this.tableCellSelect, this);
+                    ej2_base_2.EventHandler.add(tableCell, 'mouseup', this.tableCellClick, { self: this, args: args.args, selection: args.selection });
+                }
+                tableDiv.appendChild(rowDiv);
+            }
+        };
+        Table.prototype.editTable = function (args) {
+            var _this = this;
+            this.createDialog(args);
+            var editContent = this.tableDlgContent(args);
+            var update = this.l10n.getConstant('dialogUpdate');
+            var cancel = this.l10n.getConstant('dialogCancel');
+            var editHeader = this.l10n.getConstant('tableEditHeader');
+            this.editdlgObj.setProperties({
+                height: 'initial', width: '290px', content: editContent, header: editHeader,
+                buttons: [{
+                        click: this.applyProperties.bind(this, args),
+                        buttonModel: { content: update, cssClass: 'e-flat e-size-update' + this.parent.getCssClass(true), isPrimary: true }
+                    },
+                    {
+                        click: function (e) {
+                            _this.cancelDialog(e);
+                        },
+                        buttonModel: { cssClass: 'e-flat e-cancel' + this.parent.getCssClass(true), content: cancel }
+                    }],
+                cssClass: this.editdlgObj.cssClass + ' e-rte-edit-table-prop-dialog'
+            });
+            this.editdlgObj.element.style.maxHeight = 'none';
+            this.editdlgObj.content.querySelector('input').focus();
+            this.hideTableQuickToolbar();
+        };
+        Table.prototype.insertTableDialog = function (args) {
+            var proxy = (this.self) ? this.self : this;
+            if (proxy.popupObj) {
+                proxy.popupObj.hide();
+            }
+            proxy.createDialog(args);
+            var dlgContent = proxy.tableCellDlgContent();
+            var insert = proxy.l10n.getConstant('dialogInsert');
+            var cancel = proxy.l10n.getConstant('dialogCancel');
+            if (ej2_base_2.isNullOrUndefined(proxy.editdlgObj)) {
+                return;
+            }
+            proxy.editdlgObj.setProperties({
+                height: 'initial', width: '290px', content: dlgContent,
+                buttons: [{
+                        click: proxy.customTable.bind(this, args),
+                        buttonModel: { content: insert, cssClass: 'e-flat e-insert-table' + ' ' + proxy.parent.cssClass, isPrimary: true }
+                    },
+                    {
+                        click: function (e) {
+                            proxy.cancelDialog(e);
+                        },
+                        buttonModel: { cssClass: 'e-flat e-cancel' + ' ' + proxy.parent.cssClass, content: cancel }
+                    }]
+            });
+            if (!ej2_base_1.isNullOrUndefined(proxy.parent.cssClass)) {
+                proxy.editdlgObj.setProperties({ cssClass: proxy.parent.cssClass });
+            }
+            proxy.editdlgObj.element.style.maxHeight = 'none';
+            proxy.editdlgObj.content.querySelector('input').focus();
+        };
+        Table.prototype.tableCellDlgContent = function () {
+            var tableColumn = this.l10n.getConstant('columns');
+            var tableRow = this.l10n.getConstant('rows');
+            var tableWrap = this.parent.createElement('div', { className: 'e-cell-wrap' + this.parent.getCssClass(true) });
+            var content = '<div class="e-rte-field' + this.parent.getCssClass(true) + '"><input type="text" '
+                + ' data-role ="none" id="tableColumn" class="e-table-column' + this.parent.getCssClass(true) + '"/></div>'
+                + '<div class="e-rte-field' + this.parent.getCssClass(true) + '"><input type="text" data-role ="none" id="tableRow" class="e-table-row' + this.parent.getCssClass(true) + '" /></div>';
+            var contentElem = util_1.parseHtml(content);
+            tableWrap.appendChild(contentElem);
+            this.columnTextBox = new ej2_inputs_1.NumericTextBox({
+                format: 'n0',
+                min: 1,
+                value: 3,
+                placeholder: tableColumn,
+                floatLabelType: 'Auto',
+                max: 50,
+                enableRtl: this.parent.enableRtl, locale: this.parent.locale,
+                cssClass: this.parent.getCssClass()
+            });
+            this.columnTextBox.isStringTemplate = true;
+            this.columnTextBox.appendTo(tableWrap.querySelector('#tableColumn'));
+            this.rowTextBox = new ej2_inputs_1.NumericTextBox({
+                format: 'n0',
+                min: 1,
+                value: 3,
+                placeholder: tableRow,
+                floatLabelType: 'Auto',
+                max: 1000,
+                enableRtl: this.parent.enableRtl, locale: this.parent.locale,
+                cssClass: this.parent.getCssClass()
+            });
+            this.rowTextBox.isStringTemplate = true;
+            this.rowTextBox.appendTo(tableWrap.querySelector('#tableRow'));
+            return tableWrap;
+        };
+        Table.prototype.clearDialogObj = function () {
+            if (this.editdlgObj) {
+                this.editdlgObj.destroy();
+                ej2_base_1.detach(this.editdlgObj.element);
+                this.editdlgObj = null;
+            }
+        };
+        Table.prototype.createDialog = function (args) {
+            var _this = this;
+            if (this.editdlgObj) {
+                this.editdlgObj.hide({ returnValue: true });
+                return;
+            }
+            var tableDialog = this.parent.createElement('div', {
+                className: 'e-rte-edit-table' + this.parent.getCssClass(true), id: this.rteID + '_tabledialog'
+            });
+            this.parent.rootContainer.appendChild(tableDialog);
+            var insert = this.l10n.getConstant('dialogInsert');
+            var cancel = this.l10n.getConstant('dialogCancel');
+            var header = this.l10n.getConstant('tabledialogHeader');
+            var dialogModel = {
+                header: header,
+                cssClass: classes.CLS_RTE_ELEMENTS + this.parent.getCssClass(true),
+                enableRtl: this.parent.enableRtl,
+                locale: this.parent.locale,
+                showCloseIcon: true, closeOnEscape: true, width: (ej2_base_1.Browser.isDevice) ? '290px' : '340px', height: 'initial',
+                position: { X: 'center', Y: (ej2_base_1.Browser.isDevice) ? 'center' : 'top' },
+                isModal: ej2_base_1.Browser.isDevice,
+                buttons: [{
+                        buttonModel: { content: insert, cssClass: 'e-flat e-insert-table' + this.parent.getCssClass(true), isPrimary: true }
+                    },
+                    {
+                        click: function (e) {
+                            _this.cancelDialog(e);
+                        },
+                        buttonModel: { cssClass: 'e-flat e-cancel' + this.parent.getCssClass(true), content: cancel }
+                    }],
+                target: (ej2_base_1.Browser.isDevice) ? document.body : this.parent.element,
+                animationSettings: { effect: 'None' },
+                close: function (event) {
+                    _this.parent.isBlur = false;
+                    _this.editdlgObj.destroy();
+                    ej2_base_1.detach(_this.editdlgObj.element);
+                    _this.dialogRenderObj.close(event);
+                    _this.editdlgObj = null;
+                }
+            };
+            this.editdlgObj = this.dialogRenderObj.render(dialogModel);
+            this.editdlgObj.appendTo(tableDialog);
+            if (this.quickToolObj && this.quickToolObj.inlineQTBar && document.body.contains(this.quickToolObj.inlineQTBar.element)) {
+                this.quickToolObj.inlineQTBar.hidePopup();
+            }
+            if (this.quickToolObj && this.quickToolObj.textQTBar &&
+                this.parent.element.ownerDocument.body.contains(this.quickToolObj.textQTBar.element)) {
+                this.quickToolObj.textQTBar.hidePopup();
+            }
+        };
+        Table.prototype.customTable = function (args, e) {
+            var proxy = (this.self) ? this.self : this;
+            if (proxy && proxy.rowTextBox && proxy.rowTextBox.value && proxy.columnTextBox && proxy.columnTextBox.value) {
+                var argument = ((ej2_base_1.Browser.isDevice || (!ej2_base_2.isNullOrUndefined(args.args)
+                    && !ej2_base_2.isNullOrUndefined(args.args.originalEvent) &&
+                    args.args.originalEvent.action === 'insert-table')
+                    || proxy.parent.inlineMode.enable ||
+                    ((!ej2_base_2.isNullOrUndefined(proxy.parent.quickToolbarSettings.text)) && !(args instanceof PointerEvent))) ? args :
+                    this);
+                proxy.tableInsert(proxy.rowTextBox.value, proxy.columnTextBox.value, e, argument);
+            }
+        };
+        Table.prototype.cancelDialog = function (e) {
+            this.parent.isBlur = false;
+            this.editdlgObj.hide({ returnValue: true });
+        };
+        Table.prototype.applyProperties = function (args, e) {
+            var dialogEle = this.editdlgObj.element;
+            if (dialogEle && args && args.selectNode.length > 0 && args.selectNode[0]) {
+                var selectedElement = (args.selectNode[0] && args.selectNode[0].nodeType === 3 ?
+                    args.selectNode[0].parentNode : args.selectNode[0]);
+                var table = selectedElement ? ej2_base_1.closest(selectedElement, 'table') : null;
+                if (table) {
+                    table.style.width = dialogEle.querySelector('.e-table-width') ? dialogEle.querySelector('.e-table-width').value + 'px'
+                        : table.style.width;
+                    if (dialogEle.querySelector('.e-cell-padding') && dialogEle.querySelector('.e-cell-padding').value !== '') {
+                        var tdElm = table.querySelectorAll('td');
+                        for (var i = 0; i < tdElm.length; i++) {
+                            var padVal = '';
+                            if (tdElm[i].style.padding === '') {
+                                padVal = tdElm[i].getAttribute('style') + ' padding:' +
+                                    dialogEle.querySelector('.e-cell-padding').value + 'px;';
+                            }
+                            else {
+                                tdElm[i].style.padding = dialogEle.querySelector('.e-cell-padding').value + 'px';
+                                padVal = tdElm[i].getAttribute('style');
+                            }
+                            tdElm[i].style.cssText = padVal;
+                        }
+                    }
+                    table.cellSpacing = dialogEle.querySelector('.e-cell-spacing') ? dialogEle.querySelector('.e-cell-spacing').value
+                        : table.cellSpacing;
+                    if (!ej2_base_1.isNullOrUndefined(table.cellSpacing) && table.cellSpacing !== '0') {
+                        ej2_base_2.addClass([table], classes.CLS_TABLE_BORDER);
+                    }
+                    else {
+                        util_2.removeClassWithAttr([table], classes.CLS_TABLE_BORDER);
+                    }
+                    this.parent.formatter.saveData();
+                    this.editdlgObj.hide({ returnValue: true });
+                }
+            }
+        };
+        Table.prototype.tableDlgContent = function (e) {
+            var selectNode = e.selectParent[0];
+            var tableWidth = this.l10n.getConstant('tableWidth');
+            var cellPadding = this.l10n.getConstant('cellpadding');
+            var cellSpacing = this.l10n.getConstant('cellspacing');
+            var tableWrap = this.parent.createElement('div', { className: 'e-table-sizewrap' + this.parent.getCssClass(true) });
+            var widthVal = ej2_base_1.closest(selectNode, 'table').getClientRects()[0].width;
+            var padVal = ej2_base_1.closest(selectNode, 'td').style.padding;
+            var brdSpcVal = ej2_base_1.closest(selectNode, 'table').getAttribute('cellspacing');
+            var content = '<div class="e-rte-field' + this.parent.getCssClass(true) + '"><input type="text" data-role ="none" id="tableWidth" class="e-table-width' + this.parent.getCssClass(true) + '" '
+                + ' /></div>' + '<div class="e-rte-field' + this.parent.getCssClass(true) + '"><input type="text" data-role ="none" id="cellPadding" class="e-cell-padding' + this.parent.getCssClass(true) + '" />'
+                + ' </div><div class="e-rte-field' + this.parent.getCssClass(true) + '"><input type="text" data-role ="none" id="cellSpacing" class="e-cell-spacing' + this.parent.getCssClass(true) + '" /></div>';
+            var contentElem = util_1.parseHtml(content);
+            tableWrap.appendChild(contentElem);
+            this.tableWidthNum = new ej2_inputs_1.NumericTextBox({
+                format: 'n0',
+                min: 0,
+                value: widthVal,
+                placeholder: tableWidth,
+                floatLabelType: 'Auto',
+                enableRtl: this.parent.enableRtl, locale: this.parent.locale
+            });
+            this.tableWidthNum.isStringTemplate = true;
+            this.tableWidthNum.appendTo(tableWrap.querySelector('#tableWidth'));
+            this.tableCellPadding = new ej2_inputs_1.NumericTextBox({
+                format: 'n0',
+                min: 0,
+                value: padVal !== '' ? parseInt(padVal, null) : 0,
+                placeholder: cellPadding,
+                floatLabelType: 'Auto',
+                enableRtl: this.parent.enableRtl, locale: this.parent.locale
+            });
+            this.tableCellPadding.isStringTemplate = true;
+            this.tableCellPadding.appendTo(tableWrap.querySelector('#cellPadding'));
+            this.tableCellSpacing = new ej2_inputs_1.NumericTextBox({
+                format: 'n0',
+                min: 0,
+                value: brdSpcVal !== '' && !ej2_base_1.isNullOrUndefined(brdSpcVal) ? parseInt(brdSpcVal, null) : 0,
+                placeholder: cellSpacing,
+                floatLabelType: 'Auto',
+                enableRtl: this.parent.enableRtl, locale: this.parent.locale
+            });
+            this.tableCellSpacing.isStringTemplate = true;
+            this.tableCellSpacing.appendTo(tableWrap.querySelector('#cellSpacing'));
+            return tableWrap;
+        };
+        Table.prototype.destroy = function () {
+            if (this.isDestroyed) {
+                return;
+            }
+            if (this.resizeIconPositionTime) {
+                clearTimeout(this.resizeIconPositionTime);
+                this.resizeIconPositionTime = null;
+            }
+            this.removeEventListener();
+            ej2_base_2.EventHandler.remove(this.parent.contentModule.getDocument(), 'selectionchange', this.tableCellsKeyboardSelection);
+            if (this.curTable) {
+                ej2_base_2.EventHandler.remove(this.curTable, 'mouseleave', this.tableMouseLeave);
+            }
+            if (this.tableCellSpacing && !this.tableCellSpacing.isDestroyed) {
+                this.tableCellSpacing.destroy();
+                this.tableCellSpacing = null;
+            }
+            if (this.tableCellPadding && !this.tableCellPadding.isDestroyed) {
+                this.tableCellPadding.destroy();
+                this.tableCellPadding = null;
+            }
+            if (this.tableWidthNum && !this.tableWidthNum.isDestroyed) {
+                this.tableWidthNum.destroy();
+                this.tableWidthNum = null;
+            }
+            if (this.rowTextBox && !this.rowTextBox.isDestroyed) {
+                this.rowTextBox.destroy();
+                this.rowTextBox = null;
+            }
+            if (this.columnTextBox && !this.columnTextBox.isDestroyed) {
+                this.columnTextBox.destroy();
+                this.columnTextBox = null;
+            }
+            if (this.createTableButton && !this.createTableButton.isDestroyed) {
+                this.createTableButton.destroy();
+                this.createTableButton = null;
+            }
+            this.createTablePopupBoundFn = null;
+            this.isDestroyed = true;
+        };
+        Table.prototype.getModuleName = function () {
+            return 'table';
+        };
+        Table.prototype.afterKeyDown = function () {
+            var _this = this;
+            if (this.curTable) {
+                this.resizeIconPositionTime = setTimeout(function () {
+                    _this.updateResizeIconPosition();
+                }, 1);
+            }
+        };
+        Table.prototype.updateResizeIconPosition = function () {
+            var tableReBox = this.parent.contentModule.getEditPanel().querySelector('.e-table-box');
+            if (!ej2_base_1.isNullOrUndefined(tableReBox)) {
+                var tablePosition = this.calcPos(this.curTable);
+                tableReBox.style.cssText = 'top: ' + (tablePosition.top + parseInt(getComputedStyle(this.curTable).height, 10) - 4) +
+                    '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 = ej2_base_1.getComponent(popupRootElem, 'popup');
+                var tableToolbarButton = popup.relateTo;
+                popup.hide();
+                tableToolbarButton.focus({ preventScroll: true });
+            }
+        };
+        return Table;
+    }());
+    exports.Table = Table;
+});