@syncfusion/ej2-richtexteditor 24.1.41 → 24.1.43-569781

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

@@ -1,4 +1,4 @@
-import { detach, closest, Browser, isNullOrUndefined as isNOU } from '@syncfusion/ej2-base';
+import { createElement, detach, closest, Browser, isNullOrUndefined as isNOU } from '@syncfusion/ej2-base';
 import { isNullOrUndefined, EventHandler, addClass, removeClass } from '@syncfusion/ej2-base';
 import { Popup } from '@syncfusion/ej2-popups';
 import { Button } from '@syncfusion/ej2-buttons';
@@ -17,7 +17,7 @@ var Table = /** @class */ (function () {
         this.pageY = null;
         this.moveEle = null;
         this.currentColumnResize = '';
-        this.currentMarginLeft = 0;
+        this.resizeEndTime = 0;
         this.parent = parent;
         this.rteID = parent.element.id;
         this.l10n = serviceLocator.getService('rteLocale');
@@ -47,6 +47,7 @@ var Table = /** @class */ (function () {
         this.parent.on(events.bindCssClass, this.setCssClass, this);
         this.parent.on(events.destroy, this.destroy, this);
         this.parent.on(events.moduleDestroy, this.moduleDestroy, this);
+        this.parent.on(events.afterKeyDown, this.afterKeyDown, this);
     };
     Table.prototype.removeEventListener = function () {
         if (this.parent.isDestroyed) {
@@ -72,6 +73,7 @@ var Table = /** @class */ (function () {
         this.parent.off(events.bindCssClass, this.setCssClass);
         this.parent.off(events.destroy, this.destroy);
         this.parent.off(events.moduleDestroy, this.moduleDestroy);
+        this.parent.off(events.afterKeyDown, this.afterKeyDown);
         if (!Browser.isDevice && this.parent.tableSettings.resize) {
             EventHandler.remove(this.contentModule.getEditPanel(), 'mouseover', this.resizeHelper);
         }
@@ -173,7 +175,15 @@ var Table = /** @class */ (function () {
     Table.prototype.keyUp = function (e) {
         var target = e.args.target;
         if (e.args.key.toLocaleLowerCase() === 'escape' && target && target.classList && (this.popupObj && !closest(target, '[id=' + "'" + this.popupObj.element.id + "'" + ']')) && this.popupObj) {
+            var createTableToolbarBtn = this.popupObj.relateTo;
+            if (createTableToolbarBtn.nodeName !== 'BUTTON') {
+                createTableToolbarBtn = createTableToolbarBtn.querySelector('span.e-create-table');
+                createTableToolbarBtn = createTableToolbarBtn.parentElement;
+            }
             this.popupObj.hide();
+            if (createTableToolbarBtn) {
+                createTableToolbarBtn.focus();
+            }
         }
     };
     Table.prototype.keyDown = function (e) {
@@ -229,6 +239,14 @@ var Table = /** @class */ (function () {
                 }
             }
         }
+        if (event.ctrlKey && event.key === 'a') {
+            this.handleSelectAll();
+        }
+    };
+    Table.prototype.handleSelectAll = function () {
+        this.cancelResizeAction();
+        var selectedCells = this.parent.inputElement.querySelectorAll('.' + classes.CLS_TABLE_SEL);
+        removeClass(selectedCells, classes.CLS_TABLE_SEL);
     };
     // eslint-disable-next-line @typescript-eslint/no-unused-vars
     Table.prototype.tableModulekeyUp = function (e) {
@@ -262,7 +280,6 @@ var Table = /** @class */ (function () {
                 name: !isInternal ? 'showDialog' : null
             };
             this.insertTableDialog({ self: this, args: args, selection: selection });
-            this.parent.formatter.editorManager.nodeSelection.restore();
         }
     };
     Table.prototype.showDialog = function () {
@@ -346,7 +363,20 @@ var Table = /** @class */ (function () {
             return false;
         }
     };
+    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) && selection.range.startContainer.nodeType === 3 ||
@@ -483,10 +513,12 @@ var Table = /** @class */ (function () {
             var startNode = this.parent.getRange().startContainer.parentElement;
             var endNode = this.parent.getRange().endContainer.parentElement;
             var isAnchorEle = this.getAnchorNode(target);
+            var currentTime = new Date().getTime();
             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 && (target.nodeName === 'TD' || target.nodeName === 'TH' ||
                 target.nodeName === 'TABLE' || (closestTable && this.parent.contentModule.getEditPanel().contains(closestTable)))
-                && !(range.startContainer.nodeType === 3 && !range.collapsed)) {
+                && !(range.startContainer.nodeType === 3 && !range.collapsed) &&
+                currentTime - this.resizeEndTime > 100) {
                 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());
@@ -582,7 +614,10 @@ var Table = /** @class */ (function () {
         var tdNode = closest(target, 'td,th');
         target = (target.nodeName !== 'TD' && tdNode && this.parent.contentModule.getEditPanel().contains(tdNode)) ?
             tdNode : target;
-        removeClass(this.contentModule.getEditPanel().querySelectorAll('table td, table th'), classes.CLS_TABLE_SEL);
+        if (!(this.parent.quickToolbarSettings.showOnRightClick && e.args.which === 3 &&
+            target.classList.contains(classes.CLS_TABLE_SEL))) {
+            removeClass(this.contentModule.getEditPanel().querySelectorAll('table td, table th'), classes.CLS_TABLE_SEL);
+        }
         if (target && (target.tagName === 'TD' || target.tagName === 'TH')) {
             addClass([target], classes.CLS_TABLE_SEL);
             this.activeCell = target;
@@ -607,7 +642,7 @@ var Table = /** @class */ (function () {
             return;
         }
         var target = e.target || e.targetTouches[0].target;
-        var closestTable = closest(target, 'table.e-rte-table');
+        var closestTable = closest(target, 'table.e-rte-table, table.e-rte-paste-table');
         if (!isNOU(this.curTable) && !isNOU(closestTable) && closestTable !== this.curTable &&
             this.parent.contentModule.getEditPanel().contains(closestTable)) {
             this.removeResizeElement();
@@ -624,7 +659,7 @@ var Table = /** @class */ (function () {
     };
     Table.prototype.tableResizeEleCreation = function (table, e) {
         this.parent.preventDefaultResize(e);
-        var columns = table.rows[this.calMaxCol(table)].cells;
+        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++) {
@@ -646,11 +681,11 @@ var Table = /** @class */ (function () {
             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:' + (pos.left + this.calcPos(columns[i - 1]).left + columns[i - 1].offsetWidth) + 'px;';
+                    'px; left:' + (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:' + (pos.left + this.calcPos(columns[i]).left) + 'px;';
+                    'px; left:' + (pos.left + this.calcPos(columns[i]).left - 2) + 'px;';
             }
             this.contentModule.getEditPanel().appendChild(colReEle);
         }
@@ -682,7 +717,7 @@ var Table = /** @class */ (function () {
     };
     Table.prototype.removeResizeElement = function () {
         var item = this.parent.contentModule.getEditPanel().
-            querySelectorAll('.e-column-resize, .e-row-resize, .e-table-box, .e-table-rhelper');
+            querySelectorAll('.e-column-resize, .e-row-resize, .e-table-box');
         if (item.length > 0) {
             for (var i = 0; i < item.length; i++) {
                 detach(item[i]);
@@ -756,6 +791,7 @@ var Table = /** @class */ (function () {
         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);
             removeClass(this.curTable.querySelectorAll('td,th'), classes.CLS_TABLE_SEL);
@@ -766,9 +802,10 @@ var Table = /** @class */ (function () {
             this.hideTableQuickToolbar();
             if (target.classList.contains(classes.CLS_TB_COL_RES)) {
                 this.resizeBtnStat.column = true;
-                if (parseInt(target.getAttribute('data-col'), 10) === this.curTable.rows[this.calMaxCol(this.curTable)].cells.length) {
+                if (parseInt(target.getAttribute('data-col'), 10) === this.calMaxCol(this.curTable).length) {
                     this.currentColumnResize = 'last';
-                    this.columnEle = this.curTable.rows[this.calMaxCol(this.curTable)].cells[parseInt(target.getAttribute('data-col'), 10) - 1];
+                    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) {
@@ -776,10 +813,48 @@ var Table = /** @class */ (function () {
                     }
                     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 = 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 = createElement('col');
+                            cell.appendChild(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.columnEle = this.curTable.rows[this.calMaxCol(this.curTable)].cells[parseInt(target.getAttribute('data-col'), 10)];
+                    this.colIndex = parseInt(target.getAttribute('data-col'), 10);
+                    this.columnEle = this.calMaxCol(this.curTable)[this.colIndex];
                 }
-                this.colIndex = this.columnEle.cellIndex;
                 this.moveEle = e.target;
                 this.appendHelper();
             }
@@ -808,6 +883,16 @@ var Table = /** @class */ (function () {
             EventHandler.add(this.contentModule.getDocument(), Browser.touchEndEvent, this.resizeEnd, this);
         }
     };
+    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) {
@@ -836,12 +921,12 @@ var Table = /** @class */ (function () {
             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 + 2 : 0) - 1) + 'px;';
+                (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) +
+                (this.calcPos(this.rowEle).top + pos.top + this.rowEle.offsetHeight - 1) +
                 'px; left:' + (this.calcPos(this.rowEle).left + pos.left) + 'px;';
         }
     };
@@ -849,24 +934,42 @@ var Table = /** @class */ (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 + 2 : 0) - 1;
+                (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;
+            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 (element) {
-        var max = 0;
-        var maxRowIndex;
-        for (var i = 0; i < element.rows.length; i++) {
-            if (max < element.rows[i].cells.length) {
-                maxRowIndex = i;
-                max = element.rows[i].cells.length;
+    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 maxRowIndex;
+        return cells;
     };
     Table.prototype.resizing = function (e) {
         var _this = this;
@@ -879,10 +982,6 @@ var Table = /** @class */ (function () {
         var maxiumWidth;
         var currentTdElement = this.curTable.closest('td');
         var args = { event: e, requestType: 'table' };
-        var isRowCellsMerged = false;
-        var isColCellsMerged = false;
-        var mergedCellIndex;
-        var mergedElement;
         this.parent.trigger(events.onResize, args, function (resizingArgs) {
             if (resizingArgs.cancel) {
                 _this.cancelResizeAction();
@@ -907,8 +1006,10 @@ var Table = /** @class */ (function () {
                     widthCompare = rteWidth;
                 }
                 if (_this.resizeBtnStat.column) {
-                    var width = parseFloat(_this.columnEle.offsetWidth.toString());
-                    var cellRow = _this.curTable.rows[0].cells[0].nodeName === 'TH' ? 1 : 0;
+                    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]);
@@ -916,7 +1017,8 @@ var Table = /** @class */ (function () {
                     else {
                         currentTableWidth = _this.getCurrentTableWidth(_this.curTable.offsetWidth, _this.parent.inputElement.offsetWidth);
                     }
-                    var currentColumnCellWidth = parseFloat(_this.curTable.rows[cellRow].cells[_this.colIndex >= _this.curTable.rows[cellRow].cells.length ? _this.curTable.rows[cellRow].cells.length - 1 : _this.colIndex].style.width.split('%')[0]);
+                    var currentCol = _this.calMaxCol(_this.curTable)[_this.colIndex];
+                    var currentColResizableWidth = _this.getCurrentColWidth(currentCol, tableWidth);
                     if (_this.currentColumnResize === 'first') {
                         mouseX = mouseX - 0.75; //This was done for to make the gripper and the table first/last column will be close.
                         _this.removeResizeElement();
@@ -925,16 +1027,43 @@ var Table = /** @class */ (function () {
                             _this.curTable.style.maxWidth = maxiumWidth + 'px';
                         }
                         // Below the value '100' is the 100% width of the parent element.
-                        if (((mouseX !== 0 && 5 < currentColumnCellWidth) || mouseX < 0) && currentTableWidth <= 100 &&
+                        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);
-                            _this.currentMarginLeft = _this.currentMarginLeft + differenceWidth;
-                            _this.curTable.style.marginLeft = 'calc(' + (_this.curTable.style.width === '100%' ? 0 : _this.currentMarginLeft) + '%)';
+                            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 (!isNOU(_this.curTable.style.marginLeft) && _this.curTable.style.marginLeft !== '') {
+                                var regex = /[-+]?\d*\.\d+|\d+/;
+                                var value = _this.curTable.style.marginLeft.match(regex);
+                                if (!isNOU(value)) {
+                                    preMarginLeft = parseFloat(value[0]);
+                                }
+                            }
+                            var currentMarginLeft = preMarginLeft + differenceWidth;
+                            if (currentMarginLeft && currentMarginLeft > 100) {
+                                var width = parseFloat(_this.curTable.style.width);
+                                currentMarginLeft = 100 - width;
+                            }
+                            if (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++) {
-                                _this.curTable.rows[i].cells[_this.colIndex].style.width = (currentColumnCellWidth - differenceWidth) + '%';
+                                var currentColumnCellWidth = _this.getCurrentColWidth(firstColumnsCell[i], tableWidth);
+                                firstColumnsCell[i].style.width = (currentColumnCellWidth - differenceWidth) + '%';
                             }
                         }
                     }
@@ -946,112 +1075,48 @@ var Table = /** @class */ (function () {
                             _this.curTable.style.maxWidth = maxiumWidth + 'px';
                         }
                         // Below the value '100' is the 100% width of the parent element.
-                        if (((mouseX !== 0 && 5 < currentColumnCellWidth) || mouseX > 0) &&
+                        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++) {
-                                if (_this.curTable.rows[i].cells[_this.colIndex]) {
-                                    _this.curTable.rows[i].cells[_this.curTable.rows[i].cells.length === _this.colIndex ?
-                                        _this.colIndex - 1 : _this.colIndex].style.width = (currentColumnCellWidth - differenceWidth) + '%';
-                                }
+                                var currentColumnCellWidth = _this.getCurrentColWidth(lastColumnsCell[i], tableWidth);
+                                lastColumnsCell[i].style.width = (currentColumnCellWidth - differenceWidth) + '%';
                             }
                         }
                     }
                     else {
-                        var cellColl = _this.curTable.rows[_this.calMaxCol(_this.curTable)].cells;
-                        var actualwid = width - mouseX;
-                        var totalwid = parseFloat(_this.columnEle.offsetWidth.toString()) +
-                            parseFloat(cellColl[_this.colIndex - 1].offsetWidth.toString());
-                        for (var i = 0; i < _this.curTable.rows.length; i++) {
-                            var currentRow = _this.curTable.rows[i];
-                            if ((totalwid - actualwid) > 20 && actualwid > 20) {
-                                var leftColumnWidth = totalwid - actualwid;
-                                var rightColWidth = actualwid;
-                                var index = void 0;
-                                var isMergedEleResize = false;
-                                var leftTableCell = void 0;
-                                var rightTableCell = void 0;
-                                isColCellsMerged = false;
-                                isRowCellsMerged = false;
-                                /* eslint-disable */
-                                for (var j = 0; j < currentRow.cells.length; j++) {
-                                    if (currentRow.cells[j].hasAttribute('rowspan') && j <= _this.colIndex) {
-                                        isRowCellsMerged = true;
-                                        mergedCellIndex = i;
-                                        mergedElement = currentRow.cells[j];
-                                    }
-                                    else if (currentRow.cells[j].hasAttribute('colspan') && j <= currentRow.cells.length) {
-                                        isColCellsMerged = true;
-                                        mergedCellIndex = i;
-                                        mergedElement = currentRow.cells[j];
-                                    }
-                                }
-                                if (!isNOU(currentRow.cells[i]) && currentRow.cells[i].hasAttribute('colspan')) {
-                                    index = parseInt(currentRow.cells[i].getAttribute('colspan'), 10) - 1;
-                                }
-                                else {
-                                    index = _this.colIndex;
-                                }
-                                if (isRowCellsMerged || isColCellsMerged) {
-                                    var currentResizeRow = void 0;
-                                    if (currentRow.cells.length < cellColl.length) {
-                                        index = currentRow.cells.length === _this.colIndex || currentRow === _this.curTable.rows[_this.curTable.rows.length - 1] ?
-                                            _this.colIndex - 1 : _this.colIndex;
-                                        currentResizeRow = _this.curTable.rows[!isNullOrUndefined(mergedCellIndex) ?
-                                            mergedCellIndex : _this.colIndex - 1];
-                                        if (currentResizeRow && currentResizeRow !== currentRow && (currentResizeRow.cells[_this.colIndex - 1] === mergedElement ||
-                                            currentResizeRow.cells[currentResizeRow.cells.length - 1] === mergedElement)) {
-                                            isMergedEleResize = true;
-                                        }
-                                        else {
-                                            isMergedEleResize = false;
-                                        }
-                                    }
-                                    else {
-                                        index = _this.colIndex;
-                                    }
-                                    leftTableCell = !isMergedEleResize ? currentRow.cells[index - 1] : (currentResizeRow &&
-                                        currentResizeRow.cells[currentResizeRow.cells.length - 1] !== mergedElement) ?
-                                        currentResizeRow.cells[_this.colIndex - 1] : currentRow.cells[currentRow.cells.length - 1];
-                                    rightTableCell = !isMergedEleResize ? currentRow.cells[index] : rightTableCell && rightTableCell.hasAttribute('rowspan') ?
-                                        currentResizeRow.cells[_this.colIndex] : currentResizeRow && currentResizeRow.cells[currentResizeRow.cells.length - 1] !== mergedElement ?
-                                        currentRow.cells[index - 1] : currentResizeRow.cells[currentResizeRow.cells.length - 1];
-                                }
-                                if (!isNOU(currentRow.cells[index - 1]) && !isRowCellsMerged && !isColCellsMerged) {
-                                    currentRow.cells[index - 1].style.width =
-                                        _this.convertPixelToPercentage(leftColumnWidth, tableWidth) + '%';
-                                }
-                                else {
-                                    if (leftTableCell) {
-                                        leftTableCell.style.width =
-                                            _this.convertPixelToPercentage(leftColumnWidth, tableWidth) + '%';
-                                    }
-                                }
-                                if (!isNOU(currentRow.cells[index]) && !isRowCellsMerged && !isColCellsMerged) {
-                                    currentRow.cells[index].style.width =
-                                        _this.convertPixelToPercentage(rightColWidth, tableWidth) + '%';
-                                }
-                                else {
-                                    if (rightTableCell) {
-                                        rightTableCell.style.width =
-                                            _this.convertPixelToPercentage(rightColWidth, tableWidth) + '%';
-                                    }
-                                }
-                                /* eslint-enable */
-                            }
+                        var actualwid = colGroup[_this.colIndex].offsetWidth - mouseX;
+                        // eslint-disable-next-line
+                        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 height = parseFloat(_this.rowEle.clientHeight.toString()) + mouseY;
-                    if (height > 20) {
-                        _this.rowEle.style.height = height + 'px';
+                    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';
+                        }
                     }
-                    _this.curTable.style.height = '';
                     if (!isNOU(tableReBox)) {
                         tableReBox.style.cssText = 'top: ' + (_this.calcPos(_this.curTable).top + tableHeight - 4) +
                             'px; left:' + (_this.calcPos(_this.curTable).left + tableWidth - 4) + 'px;';
@@ -1065,19 +1130,40 @@ var Table = /** @class */ (function () {
                         maxiumWidth = Math.abs(tableBoxPosition - currentTdElement.getBoundingClientRect().width) - 5;
                         _this.curTable.style.maxWidth = maxiumWidth + 'px';
                     }
-                    var widthType = _this.curTable.style.width.indexOf('%') > -1;
-                    _this.curTable.style.width = widthType ? _this.convertPixelToPercentage(tableWidth + mouseX, widthCompare) + '%'
-                        : tableWidth + mouseX + 'px';
                     _this.curTable.style.height = tableHeight + mouseY + 'px';
                     if (!isNOU(tableReBox)) {
                         tableReBox.classList.add('e-rbox-select');
                         tableReBox.style.cssText = 'top: ' + (_this.calcPos(_this.curTable).top + tableHeight - 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;
@@ -1085,12 +1171,22 @@ var Table = /** @class */ (function () {
     };
     Table.prototype.findFirstLastColCells = function (table, isFirst) {
         var resultColumns = [];
-        var rows = table.querySelectorAll('tr');
-        for (var i = 0; i < rows.length; i++) {
-            if (rows[i].closest('table') === table) {
-                var columns = rows[i].querySelectorAll('th, td');
-                resultColumns.push(isFirst ? columns[0] : columns[columns.length - 1]);
+        var rows = table.rows;
+        var rowSpanCellIndexs = new Array();
+        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;
     };
@@ -1114,12 +1210,50 @@ var Table = /** @class */ (function () {
             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++) {
+            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 (!curTable.style.width) {
+            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 };
@@ -1206,7 +1340,7 @@ var Table = /** @class */ (function () {
         this.createTableButton.isStringTemplate = true;
         this.createTableButton.appendTo(btnEle);
         EventHandler.add(btnEle, 'click', this.insertTableDialog, { self: this, args: args.args, selection: args.selection });
-        this.parent.getToolbar().appendChild(this.dlgDiv);
+        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 Popup(this.dlgDiv, {
@@ -1230,6 +1364,7 @@ var Table = /** @class */ (function () {
         if (!isNOU(this.parent.cssClass)) {
             addClass([this.popupObj.element], this.parent.getCssClass());
         }
+        btnEle.focus();
         this.popupObj.refreshPosition(target);
     };
     Table.prototype.onIframeMouseDown = function () {
@@ -1247,6 +1382,7 @@ var Table = /** @class */ (function () {
                 this.popupObj.hide();
             }
             if (this.editdlgObj) {
+                this.parent.notify(events.documentClickClosedBy, { closedBy: "outside click" });
                 this.editdlgObj.hide();
             }
             this.parent.isBlur = true;
@@ -1538,7 +1674,7 @@ var Table = /** @class */ (function () {
      * @function destroy
      * @returns {void}
      * @hidden
-
+     * @deprecated
      */
     Table.prototype.destroy = function () {
         if (isNOU(this.parent)) {
@@ -1557,6 +1693,22 @@ var Table = /** @class */ (function () {
     Table.prototype.getModuleName = function () {
         return 'table';
     };
+    Table.prototype.afterKeyDown = function (e) {
+        var _this = this;
+        if (this.curTable) {
+            setTimeout(function () {
+                _this.updateResizeIconPosition();
+            }, 1);
+        }
+    };
+    Table.prototype.updateResizeIconPosition = function () {
+        var tableReBox = this.parent.contentModule.getEditPanel().querySelector('.e-table-box');
+        if (!isNOU(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;';
+        }
+    };
     return Table;
 }());
 export { Table };