@syncfusion/ej2-richtexteditor 23.2.7-52849 → 24.1.41-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');
@@ -35,6 +35,7 @@ var Table = /** @class */ (function () {
         this.parent.on(events.showTableDialog, this.showDialog, this);
         this.parent.on(events.closeTableDialog, this.closeDialog, this);
         this.parent.on(events.docClick, this.docClick, this);
+        this.parent.on(events.iframeMouseDown, this.onIframeMouseDown, this);
         this.parent.on(events.editAreaClick, this.editAreaClickHandler, this);
         this.parent.on(events.clearDialogObj, this.clearDialogObj, this);
         this.parent.on(events.tableToolbarAction, this.onToolbarAction, this);
@@ -46,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) {
@@ -55,6 +57,7 @@ var Table = /** @class */ (function () {
         this.parent.off(events.initialEnd, this.afterRender);
         this.parent.off(events.dynamicModule, this.afterRender);
         this.parent.off(events.docClick, this.docClick);
+        this.parent.off(events.iframeMouseDown, this.onIframeMouseDown);
         this.parent.off(events.showTableDialog, this.showDialog);
         this.parent.off(events.closeTableDialog, this.closeDialog);
         this.parent.off(events.editAreaClick, this.editAreaClickHandler);
@@ -63,13 +66,14 @@ var Table = /** @class */ (function () {
         this.parent.off(events.dropDownSelect, this.dropdownSelect);
         this.parent.off(events.mouseDown, this.cellSelect);
         this.parent.off(events.tableColorPickerChanged, this.setBGColor);
-        this.parent.off(events.keyUp, this.keyUp);
         this.parent.off(events.keyDown, this.keyDown);
+        this.parent.off(events.keyUp, this.keyUp);
         this.parent.off(events.mouseUp, this.selectionTable);
         this.parent.off(events.tableModulekeyUp, this.tableModulekeyUp);
         this.parent.off(events.bindCssClass, this.setCssClass);
         this.parent.off(events.destroy, this.destroy);
         this.parent.off(events.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);
         }
@@ -171,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) {
@@ -227,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) {
@@ -264,7 +284,7 @@ var Table = /** @class */ (function () {
     };
     Table.prototype.showDialog = function () {
         this.openDialog(false);
-        this.setCssClass({ cssClass: this.parent.cssClass });
+        this.setCssClass({ cssClass: this.parent.getCssClass() });
     };
     Table.prototype.closeDialog = function () {
         if (this.editdlgObj) {
@@ -343,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 ||
@@ -454,6 +487,10 @@ var Table = /** @class */ (function () {
     Table.prototype.tableHeader = function (selection, e) {
         this.parent.formatter.process(this.parent, e, e.originalEvent, { selection: selection, subCommand: e.item.subCommand });
     };
+    Table.prototype.getAnchorNode = function (element) {
+        var selectParent = closest(element, 'a');
+        return (selectParent ? selectParent : element);
+    };
     Table.prototype.editAreaClickHandler = function (e) {
         if (this.parent.readonly || !isNOU(closest(e.args.target, '.e-img-caption'))) {
             return;
@@ -475,10 +512,13 @@ var Table = /** @class */ (function () {
             var closestTable = closest(target, 'table');
             var startNode = this.parent.getRange().startContainer.parentElement;
             var endNode = this.parent.getRange().endContainer.parentElement;
-            if (target && target.nodeName !== 'A' && target.nodeName !== 'IMG' && target.nodeName !== 'VIDEO' && !target.classList.contains(classes.CLS_CLICKELEM) &&
+            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());
@@ -574,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;
@@ -599,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();
@@ -616,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++) {
@@ -638,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);
         }
@@ -661,7 +704,7 @@ var Table = /** @class */ (function () {
             this.contentModule.getEditPanel().appendChild(rowReEle);
         }
         var tableReBox = this.parent.createElement('span', {
-            className: classes.CLS_TB_BOX_RES + ' ' + this.parent.cssClass, attrs: {
+            className: classes.CLS_TB_BOX_RES + this.parent.getCssClass(true), attrs: {
                 'data-col': columns.length.toString(), 'unselectable': 'on', 'contenteditable': 'false'
             }
         });
@@ -674,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]);
@@ -748,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);
@@ -758,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) {
@@ -768,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();
             }
@@ -800,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) {
@@ -814,7 +907,7 @@ var Table = /** @class */ (function () {
     };
     Table.prototype.appendHelper = function () {
         this.helper = this.parent.createElement('div', {
-            className: 'e-table-rhelper' + ' ' + this.parent.cssClass
+            className: 'e-table-rhelper' + this.parent.getCssClass(true)
         });
         if (Browser.isDevice) {
             this.helper.classList.add('e-reicon');
@@ -828,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;';
         }
     };
@@ -841,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;
@@ -871,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();
@@ -899,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]);
@@ -908,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();
@@ -917,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) + '%';
                             }
                         }
                     }
@@ -938,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;';
@@ -1057,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;
@@ -1077,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;
     };
@@ -1106,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 };
@@ -1175,16 +1317,16 @@ var Table = /** @class */ (function () {
         this.hideTableQuickToolbar();
         var header = '1X1';
         var insertbtn = this.l10n.getConstant('inserttablebtn');
-        this.dlgDiv = this.parent.createElement('div', { className: 'e-rte-table-popup' + ' ' + this.parent.cssClass, id: this.rteID + '_table' });
-        this.tblHeader = this.parent.createElement('div', { className: 'e-rte-popup-header' + ' ' + this.parent.cssClass });
+        this.dlgDiv = this.parent.createElement('div', { className: 'e-rte-table-popup' + this.parent.getCssClass(true), id: this.rteID + '_table' });
+        this.tblHeader = this.parent.createElement('div', { className: 'e-rte-popup-header' + this.parent.getCssClass(true) });
         this.tblHeader.innerHTML = header;
         this.dlgDiv.appendChild(this.tblHeader);
-        var tableDiv = this.parent.createElement('div', { className: 'e-rte-table-span' + ' ' + this.parent.cssClass });
+        var tableDiv = this.parent.createElement('div', { className: 'e-rte-table-span' + this.parent.getCssClass(true) });
         this.drawTable(tableDiv, args);
         this.dlgDiv.appendChild(tableDiv);
-        this.dlgDiv.appendChild(this.parent.createElement('span', { className: 'e-span-border' + ' ' + this.parent.cssClass }));
+        this.dlgDiv.appendChild(this.parent.createElement('span', { className: 'e-span-border' + this.parent.getCssClass(true) }));
         var btnEle = this.parent.createElement('button', {
-            className: 'e-insert-table-btn' + ' ' + this.parent.cssClass, id: this.rteID + '_insertTable',
+            className: 'e-insert-table-btn' + this.parent.getCssClass(true), id: this.rteID + '_insertTable',
             attrs: { type: 'button', tabindex: '0' }
         });
         if (!isNOU(this.parent.getToolbarElement().querySelector('.e-expended-nav'))) {
@@ -1192,13 +1334,13 @@ var Table = /** @class */ (function () {
         }
         this.dlgDiv.appendChild(btnEle);
         this.createTableButton = new Button({
-            iconCss: 'e-icons e-create-table', content: insertbtn, cssClass: 'e-flat' + ' ' + this.parent.cssClass,
+            iconCss: 'e-icons e-create-table', content: insertbtn, cssClass: 'e-flat' + this.parent.getCssClass(true),
             enableRtl: this.parent.enableRtl, locale: this.parent.locale
         });
         this.createTableButton.isStringTemplate = true;
         this.createTableButton.appendTo(btnEle);
         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, {
@@ -1220,10 +1362,16 @@ var Table = /** @class */ (function () {
         });
         addClass([this.popupObj.element], 'e-popup-open');
         if (!isNOU(this.parent.cssClass)) {
-            addClass([this.popupObj.element], 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();
+        }
+    };
     Table.prototype.docClick = function (e) {
         var target = e.args.target;
         // eslint-disable-next-line
@@ -1234,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;
@@ -1260,10 +1409,10 @@ var Table = /** @class */ (function () {
         var rowDiv;
         var tableCell;
         for (var row = 0; row < 3; row++) {
-            rowDiv = this.parent.createElement('div', { className: 'e-rte-table-row' + ' ' + this.parent.cssClass, attrs: { 'data-column': '' + row } });
+            rowDiv = this.parent.createElement('div', { className: 'e-rte-table-row' + this.parent.getCssClass(true), attrs: { 'data-column': '' + row } });
             for (var col = 0; col < 10; col++) {
                 var display = (row > 2) ? 'none' : 'inline-block';
-                tableCell = this.parent.createElement('div', { className: 'e-rte-tablecell e-default' + ' ' + this.parent.cssClass, attrs: { 'data-cell': '' + col } });
+                tableCell = this.parent.createElement('div', { className: 'e-rte-tablecell e-default' + this.parent.getCssClass(true), attrs: { 'data-cell': '' + col } });
                 rowDiv.appendChild(tableCell);
                 tableCell.style.display = display;
                 if (col === 0 && row === 0) {
@@ -1287,13 +1436,13 @@ var Table = /** @class */ (function () {
             height: 'initial', width: '290px', content: editContent, header: editHeader,
             buttons: [{
                     click: this.applyProperties.bind(this, args),
-                    buttonModel: { content: update, cssClass: 'e-flat e-size-update' + ' ' + this.parent.cssClass, isPrimary: true }
+                    buttonModel: { content: update, cssClass: 'e-flat e-size-update' + this.parent.getCssClass(true), isPrimary: true }
                 },
                 {
                     click: function (e) {
                         _this.cancelDialog(e);
                     },
-                    buttonModel: { cssClass: 'e-flat e-cancel' + ' ' + this.parent.cssClass, content: cancel }
+                    buttonModel: { cssClass: 'e-flat e-cancel' + this.parent.getCssClass(true), content: cancel }
                 }],
             cssClass: this.editdlgObj.cssClass + ' e-rte-edit-table-prop-dialog'
         });
@@ -1335,10 +1484,10 @@ var Table = /** @class */ (function () {
     Table.prototype.tableCellDlgContent = function () {
         var tableColumn = this.l10n.getConstant('columns');
         var tableRow = this.l10n.getConstant('rows');
-        var tableWrap = this.parent.createElement('div', { className: 'e-cell-wrap' + ' ' + this.parent.cssClass });
-        var content = '<div class="e-rte-field' + ' ' + this.parent.cssClass + '"><input type="text" '
-            + ' data-role ="none" id="tableColumn" class="e-table-column' + ' ' + this.parent.cssClass + '"/></div>'
-            + '<div class="e-rte-field' + ' ' + this.parent.cssClass + '"><input type="text" data-role ="none" id="tableRow" class="e-table-row' + ' ' + this.parent.cssClass + '" /></div>';
+        var tableWrap = this.parent.createElement('div', { className: 'e-cell-wrap' + this.parent.getCssClass(true) });
+        var content = '<div class="e-rte-field' + this.parent.getCssClass(true) + '"><input type="text" '
+            + ' data-role ="none" id="tableColumn" class="e-table-column' + this.parent.getCssClass(true) + '"/></div>'
+            + '<div class="e-rte-field' + this.parent.getCssClass(true) + '"><input type="text" data-role ="none" id="tableRow" class="e-table-row' + this.parent.getCssClass(true) + '" /></div>';
         var contentElem = parseHtml(content);
         tableWrap.appendChild(contentElem);
         this.columnTextBox = new NumericTextBox({
@@ -1349,7 +1498,7 @@ var Table = /** @class */ (function () {
             floatLabelType: 'Auto',
             max: 50,
             enableRtl: this.parent.enableRtl, locale: this.parent.locale,
-            cssClass: this.parent.cssClass
+            cssClass: this.parent.getCssClass()
         });
         this.columnTextBox.isStringTemplate = true;
         this.columnTextBox.appendTo(tableWrap.querySelector('#tableColumn'));
@@ -1361,7 +1510,7 @@ var Table = /** @class */ (function () {
             floatLabelType: 'Auto',
             max: 1000,
             enableRtl: this.parent.enableRtl, locale: this.parent.locale,
-            cssClass: this.parent.cssClass
+            cssClass: this.parent.getCssClass()
         });
         this.rowTextBox.isStringTemplate = true;
         this.rowTextBox.appendTo(tableWrap.querySelector('#tableRow'));
@@ -1382,7 +1531,7 @@ var Table = /** @class */ (function () {
             return;
         }
         var tableDialog = this.parent.createElement('div', {
-            className: 'e-rte-edit-table' + ' ' + this.parent.cssClass, id: this.rteID + '_tabledialog'
+            className: 'e-rte-edit-table' + this.parent.getCssClass(true), id: this.rteID + '_tabledialog'
         });
         this.parent.element.appendChild(tableDialog);
         var insert = this.l10n.getConstant('dialogInsert');
@@ -1390,20 +1539,20 @@ var Table = /** @class */ (function () {
         var header = this.l10n.getConstant('tabledialogHeader');
         var dialogModel = {
             header: header,
-            cssClass: classes.CLS_RTE_ELEMENTS + ' ' + this.parent.cssClass,
+            cssClass: classes.CLS_RTE_ELEMENTS + this.parent.getCssClass(true),
             enableRtl: this.parent.enableRtl,
             locale: this.parent.locale,
             showCloseIcon: true, closeOnEscape: true, width: (Browser.isDevice) ? '290px' : '340px', height: 'initial',
             position: { X: 'center', Y: (Browser.isDevice) ? 'center' : 'top' },
             isModal: Browser.isDevice,
             buttons: [{
-                    buttonModel: { content: insert, cssClass: 'e-flat e-insert-table' + ' ' + this.parent.cssClass, isPrimary: true }
+                    buttonModel: { content: insert, cssClass: 'e-flat e-insert-table' + this.parent.getCssClass(true), isPrimary: true }
                 },
                 {
                     click: function (e) {
                         _this.cancelDialog(e);
                     },
-                    buttonModel: { cssClass: 'e-flat e-cancel' + ' ' + this.parent.cssClass, content: cancel }
+                    buttonModel: { cssClass: 'e-flat e-cancel' + this.parent.getCssClass(true), content: cancel }
                 }],
             target: (Browser.isDevice) ? document.body : this.parent.element,
             animationSettings: { effect: 'None' },
@@ -1476,13 +1625,13 @@ var Table = /** @class */ (function () {
         var tableWidth = this.l10n.getConstant('tableWidth');
         var cellPadding = this.l10n.getConstant('cellpadding');
         var cellSpacing = this.l10n.getConstant('cellspacing');
-        var tableWrap = this.parent.createElement('div', { className: 'e-table-sizewrap' + ' ' + this.parent.cssClass });
+        var tableWrap = this.parent.createElement('div', { className: 'e-table-sizewrap' + this.parent.getCssClass(true) });
         var widthVal = closest(selectNode, 'table').getClientRects()[0].width;
         var padVal = closest(selectNode, 'td').style.padding;
         var brdSpcVal = closest(selectNode, 'table').getAttribute('cellspacing');
-        var content = '<div class="e-rte-field' + ' ' + this.parent.cssClass + '"><input type="text" data-role ="none" id="tableWidth" class="e-table-width' + ' ' + this.parent.cssClass + '" '
-            + ' /></div>' + '<div class="e-rte-field' + ' ' + this.parent.cssClass + '"><input type="text" data-role ="none" id="cellPadding" class="e-cell-padding' + ' ' + this.parent.cssClass + '" />'
-            + ' </div><div class="e-rte-field' + ' ' + this.parent.cssClass + '"><input type="text" data-role ="none" id="cellSpacing" class="e-cell-spacing' + ' ' + this.parent.cssClass + '" /></div>';
+        var content = '<div class="e-rte-field' + this.parent.getCssClass(true) + '"><input type="text" data-role ="none" id="tableWidth" class="e-table-width' + this.parent.getCssClass(true) + '" '
+            + ' /></div>' + '<div class="e-rte-field' + this.parent.getCssClass(true) + '"><input type="text" data-role ="none" id="cellPadding" class="e-cell-padding' + this.parent.getCssClass(true) + '" />'
+            + ' </div><div class="e-rte-field' + this.parent.getCssClass(true) + '"><input type="text" data-role ="none" id="cellSpacing" class="e-cell-spacing' + this.parent.getCssClass(true) + '" /></div>';
         var contentElem = parseHtml(content);
         tableWrap.appendChild(contentElem);
         this.tableWidthNum = new NumericTextBox({
@@ -1544,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 };