@syncfusion/ej2-richtexteditor 24.1.41-569421 → 24.1.41-581025

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

@@ -1,4 +1,4 @@
-import { createElement, detach, closest, Browser, isNullOrUndefined as isNOU } from '@syncfusion/ej2-base';
+import { 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.resizeEndTime = 0;
+        this.currentMarginLeft = 0;
         this.parent = parent;
         this.rteID = parent.element.id;
         this.l10n = serviceLocator.getService('rteLocale');
@@ -47,7 +47,6 @@ 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) {
@@ -73,7 +72,6 @@ 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);
         }
@@ -175,15 +173,7 @@ 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) {
@@ -239,14 +229,6 @@ 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) {
@@ -280,6 +262,7 @@ 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 () {
@@ -363,20 +346,7 @@ 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 ||
@@ -513,12 +483,10 @@ 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) &&
-                currentTime - this.resizeEndTime > 100) {
+                && !(range.startContainer.nodeType === 3 && !range.collapsed)) {
                 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());
@@ -614,10 +582,7 @@ var Table = /** @class */ (function () {
         var tdNode = closest(target, 'td,th');
         target = (target.nodeName !== 'TD' && tdNode && this.parent.contentModule.getEditPanel().contains(tdNode)) ?
             tdNode : target;
-        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);
-        }
+        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;
@@ -642,15 +607,14 @@ var Table = /** @class */ (function () {
             return;
         }
         var target = e.target || e.targetTouches[0].target;
-        var closestTable = closest(target, 'table.e-rte-table, table.e-rte-paste-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 && !isNOU(this.curTable) && !isNOU(closestTable) && closestTable !== this.curTable &&
+        var closestTable = closest(target, 'table.e-rte-table');
+        if (!isNOU(this.curTable) && !isNOU(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')) {
+        if (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;
@@ -660,7 +624,7 @@ var Table = /** @class */ (function () {
     };
     Table.prototype.tableResizeEleCreation = function (table, e) {
         this.parent.preventDefaultResize(e);
-        var columns = this.calMaxCol(this.curTable);
+        var columns = table.rows[this.calMaxCol(table)].cells;
         var rows = [];
         for (var i = 0; i < table.rows.length; i++) {
             for (var j = 0; j < table.rows[i].cells.length; j++) {
@@ -682,11 +646,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 - 2) + 'px;';
+                    'px; left:' + (pos.left + this.calcPos(columns[i - 1]).left + columns[i - 1].offsetWidth) + 'px;';
             }
             else {
                 colReEle.style.cssText = 'height: ' + height + 'px; width: 4px; top: ' + pos.top +
-                    'px; left:' + (pos.left + this.calcPos(columns[i]).left - 2) + 'px;';
+                    'px; left:' + (pos.left + this.calcPos(columns[i]).left) + 'px;';
             }
             this.contentModule.getEditPanel().appendChild(colReEle);
         }
@@ -718,7 +682,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');
+            querySelectorAll('.e-column-resize, .e-row-resize, .e-table-box, .e-table-rhelper');
         if (item.length > 0) {
             for (var i = 0; i < item.length; i++) {
                 detach(item[i]);
@@ -792,20 +756,19 @@ 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);
+            this.parent.formatter.editorManager.nodeSelection.Clear(this.contentModule.getDocument());
             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) {
+                if (parseInt(target.getAttribute('data-col'), 10) === this.curTable.rows[this.calMaxCol(this.curTable)].cells.length) {
                     this.currentColumnResize = 'last';
-                    this.colIndex = parseInt(target.getAttribute('data-col'), 10) - 1;
-                    this.columnEle = this.calMaxCol(this.curTable)[this.colIndex];
+                    this.columnEle = this.curTable.rows[this.calMaxCol(this.curTable)].cells[parseInt(target.getAttribute('data-col'), 10) - 1];
                 }
                 else {
                     if (parseInt(target.getAttribute('data-col'), 10) === 0) {
@@ -813,48 +776,10 @@ 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.colIndex = parseInt(target.getAttribute('data-col'), 10);
-                    this.columnEle = this.calMaxCol(this.curTable)[this.colIndex];
+                    this.columnEle = this.curTable.rows[this.calMaxCol(this.curTable)].cells[parseInt(target.getAttribute('data-col'), 10)];
                 }
+                this.colIndex = this.columnEle.cellIndex;
                 this.moveEle = e.target;
                 this.appendHelper();
             }
@@ -883,16 +808,6 @@ 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) {
@@ -921,12 +836,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 : 0) - 1) + 'px;';
+                (this.currentColumnResize === 'last' ? this.columnEle.offsetWidth + 2 : 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) +
+                (this.calcPos(this.rowEle).top + pos.top + this.rowEle.offsetHeight) +
                 'px; left:' + (this.calcPos(this.rowEle).left + pos.left) + 'px;';
         }
     };
@@ -934,42 +849,24 @@ 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 : 0) - 1;
+                (this.currentColumnResize === 'last' ? this.columnEle.offsetWidth + 2 : 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;
+            var top_1 = this.calcPos(this.rowEle).top + pos.top + this.rowEle.offsetHeight;
             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;
+    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;
             }
         }
-        return cells;
+        return maxRowIndex;
     };
     Table.prototype.resizing = function (e) {
         var _this = this;
@@ -982,6 +879,10 @@ 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();
@@ -1006,10 +907,8 @@ var Table = /** @class */ (function () {
                     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 width = parseFloat(_this.columnEle.offsetWidth.toString());
+                    var cellRow = _this.curTable.rows[0].cells[0].nodeName === 'TH' ? 1 : 0;
                     var currentTableWidth = void 0;
                     if (_this.curTable.style.width !== '' && _this.curTable.style.width.includes('%')) {
                         currentTableWidth = parseFloat(_this.curTable.style.width.split('%')[0]);
@@ -1017,8 +916,7 @@ var Table = /** @class */ (function () {
                     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);
+                    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]);
                     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();
@@ -1027,44 +925,16 @@ 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 < currentColResizableWidth) || mouseX < 0) && currentTableWidth <= 100 &&
+                        if (((mouseX !== 0 && 5 < currentColumnCellWidth) || 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 (!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;
-                            }
-                            // For table pasted from word, Margin left can be anything so we are avoiding the below process.
-                            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) + '%)';
+                            _this.currentMarginLeft = _this.currentMarginLeft + differenceWidth;
+                            _this.curTable.style.marginLeft = 'calc(' + (_this.curTable.style.width === '100%' ? 0 : _this.currentMarginLeft) + '%)';
                             for (var i = 0; i < firstColumnsCell.length; i++) {
-                                var currentColumnCellWidth = _this.getCurrentColWidth(firstColumnsCell[i], tableWidth);
-                                firstColumnsCell[i].style.width = (currentColumnCellWidth - differenceWidth) + '%';
+                                _this.curTable.rows[i].cells[_this.colIndex].style.width = (currentColumnCellWidth - differenceWidth) + '%';
                             }
                         }
                     }
@@ -1076,48 +946,112 @@ 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 < currentColResizableWidth) || mouseX > 0) &&
+                        if (((mouseX !== 0 && 5 < currentColumnCellWidth) || 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) + '%';
+                                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) + '%';
+                                }
                             }
                         }
                     }
                     else {
-                        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) + '%';
+                        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 */
+                            }
                         }
                     }
                     _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';
-                        }
+                    var height = parseFloat(_this.rowEle.clientHeight.toString()) + mouseY;
+                    if (height > 20) {
+                        _this.rowEle.style.height = height + '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;';
@@ -1131,40 +1065,19 @@ 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;
@@ -1172,22 +1085,12 @@ var Table = /** @class */ (function () {
     };
     Table.prototype.findFirstLastColCells = function (table, isFirst) {
         var resultColumns = [];
-        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);
-            }
-        };
+        var rows = table.querySelectorAll('tr');
         for (var i = 0; i < rows.length; i++) {
-            _loop_1(i);
+            if (rows[i].closest('table') === table) {
+                var columns = rows[i].querySelectorAll('th, td');
+                resultColumns.push(isFirst ? columns[0] : columns[columns.length - 1]);
+            }
         }
         return resultColumns;
     };
@@ -1211,56 +1114,12 @@ 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++) {
-            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 (!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 };
@@ -1347,7 +1206,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().parentElement.appendChild(this.dlgDiv);
+        this.parent.getToolbar().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, {
@@ -1371,16 +1230,12 @@ 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 () {
         if (this.popupObj) {
             this.popupObj.hide();
         }
-        if (this.parent.inlineMode.enable && this.editdlgObj) {
-            this.editdlgObj.hide();
-        }
     };
     Table.prototype.docClick = function (e) {
         var target = e.args.target;
@@ -1392,7 +1247,6 @@ 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;
@@ -1703,22 +1557,6 @@ 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 };