@syncfusion/ej2-richtexteditor 24.2.4 → 24.2.8

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,6 @@ var Table = /** @class */ (function () {
         this.pageY = null;
         this.moveEle = null;
         this.currentColumnResize = '';
-        this.currentMarginLeft = 0;
         this.parent = parent;
         this.rteID = parent.element.id;
         this.l10n = serviceLocator.getService('rteLocale');
@@ -633,7 +632,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++) {
@@ -655,11 +654,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);
         }
@@ -691,7 +690,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]);
@@ -765,6 +764,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);
@@ -775,9 +775,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) {
@@ -785,10 +786,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();
             }
@@ -817,6 +856,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) {
@@ -845,12 +894,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;';
         }
     };
@@ -858,24 +907,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;
@@ -888,10 +955,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();
@@ -916,8 +979,7 @@ 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;
+                    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]);
@@ -925,7 +987,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();
@@ -934,16 +997,25 @@ 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;
+                            if (!isNullOrUndefined(_this.curTable.style.marginLeft) && _this.curTable.style.marginLeft !== '') {
+                                var regex = /[-+]?\d*\.\d+|\d+/;
+                                var value = _this.curTable.style.marginLeft.match(regex);
+                                if (!isNullOrUndefined(value)) {
+                                    preMarginLeft = parseFloat(value[0]);
+                                }
+                            }
+                            var currentMarginLeft = preMarginLeft + differenceWidth;
+                            _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) + '%';
                             }
                         }
                     }
@@ -955,112 +1027,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;';
@@ -1087,6 +1095,16 @@ var Table = /** @class */ (function () {
             }
         });
     };
+    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;
@@ -1094,12 +1112,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;
     };
@@ -1123,13 +1151,47 @@ 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();
     };
+    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);
+            }
+        });
+        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 };
     };
@@ -1239,6 +1301,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 () {
@@ -1571,12 +1634,18 @@ var Table = /** @class */ (function () {
         var _this = this;
         if (this.curTable) {
             setTimeout(function () {
-                var mouseOverEvent = document.createEvent('MouseEvents');
-                mouseOverEvent.initEvent('mouseover', true, true);
-                _this.curTable.dispatchEvent(mouseOverEvent);
+                _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 };

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

@@ -108,6 +108,19 @@ var ToolbarRenderer = /** @class */ (function () {
                 addClass([listEle[1], listEle[2]], 'e-disabled');
             }
         }
+        if (this.parent.showTooltip) {
+            this.dropdownTooltip = new Tooltip({
+                target: '[aria-owns="' + this.parent.getID() + '"].e-rte-elements [title]',
+                showTipPointer: true,
+                openDelay: 400,
+                opensOn: 'Hover',
+                beforeRender: this.tooltipBeforeRender.bind(this),
+                cssClass: this.parent.getCssClass(),
+                windowCollision: true,
+                position: 'BottomCenter'
+            });
+            this.dropdownTooltip.appendTo(args.element);
+        }
         this.parent.notify(events.selectionSave, args);
     };
     ToolbarRenderer.prototype.dropDownClose = function (args) {
@@ -152,19 +165,6 @@ var ToolbarRenderer = /** @class */ (function () {
             });
             this.tooltip.appendTo(args.target);
         }
-        if (this.parent.showTooltip) {
-            this.dropdownTooltip = new Tooltip({
-                target: '[aria-owns="' + this.parent.getID() + '"].e-rte-elements [title]',
-                showTipPointer: true,
-                openDelay: 400,
-                opensOn: 'Hover',
-                beforeRender: this.tooltipBeforeRender.bind(this),
-                cssClass: this.parent.getCssClass(),
-                windowCollision: true,
-                position: 'BottomCenter'
-            });
-            this.dropdownTooltip.appendTo(document.body);
-        }
     };
     /**
      * renderDropDownButton method