@syncfusion/ej2-richtexteditor 20.1.61 → 20.2.39

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

@@ -16,6 +16,8 @@ var Table = /** @class */ (function () {
         this.pageX = null;
         this.pageY = null;
         this.moveEle = null;
+        this.currentColumnResize = '';
+        this.currentMarginLeft = 0;
         this.parent = parent;
         this.rteID = parent.element.id;
         this.l10n = serviceLocator.getService('rteLocale');
@@ -183,6 +185,7 @@ var Table = /** @class */ (function () {
                 }
                 else if (ele && ele.querySelectorAll('table').length > 0) {
                     this.removeResizeElement();
+                    this.hideTableQuickToolbar();
                 }
             }
             if (ele && ele.tagName !== 'TD' && ele.tagName !== 'TH') {
@@ -559,7 +562,7 @@ var Table = /** @class */ (function () {
     };
     Table.prototype.tableResizeEleCreation = function (table, e) {
         this.parent.preventDefaultResize(e);
-        var columns = Array.prototype.slice.call(table.rows[this.calMaxCol(table)].cells, 1);
+        var columns = table.rows[this.calMaxCol(table)].cells;
         var rows = [];
         for (var i = 0; i < table.rows.length; i++) {
             rows.push(Array.prototype.slice.call(table.rows[i].cells, 0, 1)[0]);
@@ -567,15 +570,21 @@ var Table = /** @class */ (function () {
         var height = parseInt(getComputedStyle(table).height, 10);
         var width = parseInt(getComputedStyle(table).width, 10);
         var pos = this.calcPos(table);
-        for (var i = 0; columns.length > i; i++) {
+        for (var i = 0; columns.length >= i; i++) {
             var colReEle = this.parent.createElement('span', {
                 attrs: {
-                    'data-col': (i + 1).toString(), 'unselectable': 'on', 'contenteditable': 'false'
+                    'data-col': (i).toString(), 'unselectable': 'on', 'contenteditable': 'false'
                 }
             });
             colReEle.classList.add(classes.CLS_RTE_TABLE_RESIZE, classes.CLS_TB_COL_RES);
-            colReEle.style.cssText = 'height: ' + height + 'px; width: 4px; top: ' + pos.top +
-                'px; left:' + (pos.left + this.calcPos(columns[i]).left) + 'px;';
+            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;';
+            }
+            else {
+                colReEle.style.cssText = 'height: ' + height + 'px; width: 4px; top: ' + pos.top +
+                    'px; left:' + (pos.left + this.calcPos(columns[i]).left) + 'px;';
+            }
             this.contentModule.getEditPanel().appendChild(colReEle);
         }
         for (var i = 0; rows.length > i; i++) {
@@ -593,7 +602,7 @@ var Table = /** @class */ (function () {
             this.contentModule.getEditPanel().appendChild(rowReEle);
         }
         var tableReBox = this.parent.createElement('span', {
-            className: classes.CLS_TB_BOX_RES, attrs: {
+            className: classes.CLS_TB_BOX_RES + ' ' + this.parent.cssClass, attrs: {
                 'data-col': columns.length.toString(), 'unselectable': 'on', 'contenteditable': 'false'
             }
         });
@@ -692,7 +701,19 @@ var Table = /** @class */ (function () {
             this.hideTableQuickToolbar();
             if (target.classList.contains(classes.CLS_TB_COL_RES)) {
                 this.resizeBtnStat.column = true;
-                this.columnEle = this.curTable.rows[this.calMaxCol(this.curTable)].cells[parseInt(target.getAttribute('data-col'), 10)];
+                if (parseInt(target.getAttribute('data-col'), 10) === this.curTable.rows[this.calMaxCol(this.curTable)].cells.length) {
+                    this.currentColumnResize = 'last';
+                    this.columnEle = this.curTable.rows[this.calMaxCol(this.curTable)].cells[parseInt(target.getAttribute('data-col'), 10) - 1];
+                }
+                else {
+                    if (parseInt(target.getAttribute('data-col'), 10) === 0) {
+                        this.currentColumnResize = 'first';
+                    }
+                    else {
+                        this.currentColumnResize = 'middle';
+                    }
+                    this.columnEle = this.curTable.rows[this.calMaxCol(this.curTable)].cells[parseInt(target.getAttribute('data-col'), 10)];
+                }
                 this.colIndex = this.columnEle.cellIndex;
                 this.moveEle = e.target;
                 this.appendHelper();
@@ -736,7 +757,7 @@ var Table = /** @class */ (function () {
     };
     Table.prototype.appendHelper = function () {
         this.helper = this.parent.createElement('div', {
-            className: 'e-table-rhelper'
+            className: 'e-table-rhelper' + ' ' + this.parent.cssClass
         });
         if (Browser.isDevice) {
             this.helper.classList.add('e-reicon');
@@ -749,7 +770,8 @@ var Table = /** @class */ (function () {
         if (this.resizeBtnStat.column) {
             this.helper.classList.add('e-column-helper');
             this.helper.style.cssText = 'height: ' + getComputedStyle(this.curTable).height + '; top: ' +
-                pos.top + 'px; left:' + (pos.left + this.calcPos(this.columnEle).left - 1) + 'px;';
+                pos.top + 'px; left:' + ((pos.left + this.calcPos(this.columnEle).left) +
+                (this.currentColumnResize === 'last' ? this.columnEle.offsetWidth + 2 : 0) - 1) + 'px;';
         }
         else {
             this.helper.classList.add('e-row-helper');
@@ -761,7 +783,8 @@ var Table = /** @class */ (function () {
     Table.prototype.updateHelper = function () {
         var pos = this.calcPos(this.curTable);
         if (this.resizeBtnStat.column) {
-            var left = pos.left + this.calcPos(this.columnEle).left - 1;
+            var left = (pos.left + this.calcPos(this.columnEle).left) +
+                (this.currentColumnResize === 'last' ? this.columnEle.offsetWidth + 2 : 0) - 1;
             this.helper.style.left = left + 'px';
         }
         else {
@@ -800,23 +823,66 @@ var Table = /** @class */ (function () {
                 var paddingSize = +getComputedStyle(_this.contentModule.getEditPanel()).paddingRight.match(/\d/g).join('');
                 var rteWidth = _this.contentModule.getEditPanel().offsetWidth - (_this.contentModule.getEditPanel().offsetWidth -
                     _this.contentModule.getEditPanel().clientWidth) - paddingSize * 2;
+                var widthCompare = void 0;
+                if (!isNOU(_this.curTable.parentElement.closest('table'))) {
+                    var currentTd = _this.curTable.closest('td');
+                    var currentTDPad = +getComputedStyle(currentTd).paddingRight.match(/\d/g).join('');
+                    // Padding of the current table with the parent element multiply with 2.
+                    widthCompare = currentTd.offsetWidth - (currentTd.offsetWidth - currentTd.clientWidth) - currentTDPad * 2;
+                }
+                else {
+                    widthCompare = rteWidth;
+                }
                 if (_this.resizeBtnStat.column) {
-                    var cellColl = _this.curTable.rows[_this.calMaxCol(_this.curTable)].cells;
                     var width = parseFloat(_this.columnEle.offsetWidth.toString());
-                    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++) {
-                        if ((totalwid - actualwid) > 20 && actualwid > 20) {
-                            var leftColumnWidth = totalwid - actualwid;
-                            var rightColWidth = actualwid;
-                            if (!isNOU(_this.curTable.rows[i].cells[_this.colIndex - 1])) {
-                                _this.curTable.rows[i].cells[_this.colIndex - 1].style.width =
-                                    _this.convertPixelToPercentage(leftColumnWidth, tableWidth) + '%';
+                    var cellRow = _this.curTable.rows[0].cells[0].nodeName === 'TH' ? 1 : 0;
+                    var currentTableWidth = parseFloat(_this.curTable.style.width.split('%')[0]);
+                    var currentColumnCellWidth = parseFloat(_this.curTable.rows[cellRow].cells[_this.colIndex].style.width.split('%')[0]);
+                    if (_this.currentColumnResize === 'first') {
+                        mouseX = mouseX - 0.75; //This was done for to make the gripper and the table first/last column will be close.
+                        _this.removeResizeElement();
+                        // Below the value '100' is the 100% width of the parent element.
+                        if (((mouseX !== 0 && 5 < currentColumnCellWidth) || mouseX < 0) && currentTableWidth <= 100 && _this.convertPixelToPercentage(tableWidth - mouseX, widthCompare) <= 100) {
+                            var firstColumnsCell = _this.findFirstLastColCells(_this.curTable, true);
+                            _this.curTable.style.width = _this.convertPixelToPercentage(tableWidth - mouseX, widthCompare) > 100 ? (100 + '%') : (_this.convertPixelToPercentage(tableWidth - mouseX, widthCompare) + '%');
+                            var differenceWidth = currentTableWidth - _this.convertPixelToPercentage(tableWidth - mouseX, widthCompare);
+                            _this.currentMarginLeft = _this.currentMarginLeft + differenceWidth;
+                            _this.curTable.style.marginLeft = 'calc(' + (_this.curTable.style.width === '100%' ? 0 : _this.currentMarginLeft) + '%)';
+                            for (var i = 0; i < firstColumnsCell.length; i++) {
+                                _this.curTable.rows[i].cells[_this.colIndex].style.width = (currentColumnCellWidth - differenceWidth) + '%';
                             }
-                            if (!isNOU(_this.curTable.rows[i].cells[_this.colIndex])) {
-                                _this.curTable.rows[i].cells[_this.colIndex].style.width =
-                                    _this.convertPixelToPercentage(rightColWidth, tableWidth) + '%';
+                        }
+                    }
+                    else if (_this.currentColumnResize === 'last') {
+                        mouseX = mouseX + 0.75; //This was done for to make the gripper and the table first/last column will be close.
+                        _this.removeResizeElement();
+                        // Below the value '100' is the 100% width of the parent element.
+                        if (((mouseX !== 0 && 5 < currentColumnCellWidth) || mouseX > 0) && currentTableWidth <= 100 && _this.convertPixelToPercentage(tableWidth + mouseX, widthCompare) <= 100) {
+                            var lastColumnsCell = _this.findFirstLastColCells(_this.curTable, false);
+                            _this.curTable.style.width = _this.convertPixelToPercentage(tableWidth + mouseX, widthCompare) > 100 ? (100 + '%') : (_this.convertPixelToPercentage(tableWidth + mouseX, widthCompare) + '%');
+                            var differenceWidth = currentTableWidth - _this.convertPixelToPercentage(tableWidth + mouseX, widthCompare);
+                            for (var i = 0; i < lastColumnsCell.length; i++) {
+                                _this.curTable.rows[i].cells[_this.colIndex].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++) {
+                            if ((totalwid - actualwid) > 20 && actualwid > 20) {
+                                var leftColumnWidth = totalwid - actualwid;
+                                var rightColWidth = actualwid;
+                                if (!isNOU(_this.curTable.rows[i].cells[_this.colIndex - 1])) {
+                                    _this.curTable.rows[i].cells[_this.colIndex - 1].style.width =
+                                        _this.convertPixelToPercentage(leftColumnWidth, tableWidth) + '%';
+                                }
+                                if (!isNOU(_this.curTable.rows[i].cells[_this.colIndex])) {
+                                    _this.curTable.rows[i].cells[_this.colIndex].style.width =
+                                        _this.convertPixelToPercentage(rightColWidth, tableWidth) + '%';
+                                }
                             }
                         }
                     }
@@ -840,7 +906,7 @@ var Table = /** @class */ (function () {
                         EventHandler.remove(_this.contentModule.getEditPanel(), 'mouseover', _this.resizeHelper);
                     }
                     var widthType = _this.curTable.style.width.indexOf('%') > -1;
-                    _this.curTable.style.width = widthType ? _this.convertPixelToPercentage(tableWidth + mouseX, rteWidth) + '%'
+                    _this.curTable.style.width = widthType ? _this.convertPixelToPercentage(tableWidth + mouseX, widthCompare) + '%'
                         : tableWidth + mouseX + 'px';
                     _this.curTable.style.height = tableHeight + mouseY + 'px';
                     tableReBox.classList.add('e-rbox-select');
@@ -850,6 +916,17 @@ 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]);
+            }
+        }
+        return resultColumns;
+    };
     Table.prototype.convertPixelToPercentage = function (value, offsetValue) {
         return (value / offsetValue) * 100;
     };
@@ -868,14 +945,14 @@ var Table = /** @class */ (function () {
                 EventHandler.add(this.contentModule.getEditPanel(), 'mouseover', this.resizeHelper, this);
             }
             this.removeResizeElement();
-            if (this.helper && this.contentModule.getEditPanel().contains(this.helper)) {
-                detach(this.helper);
-                this.helper = null;
-            }
-            this.pageX = null;
-            this.pageY = null;
-            this.moveEle = null;
         }
+        if (this.helper && this.contentModule.getEditPanel().contains(this.helper)) {
+            detach(this.helper);
+            this.helper = null;
+        }
+        this.pageX = null;
+        this.pageY = null;
+        this.moveEle = null;
         var args = { event: e, requestType: 'table' };
         this.parent.trigger(events.resizeStop, args);
         this.parent.formatter.saveData();
@@ -930,16 +1007,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', id: this.rteID + '_table' });
-        this.tblHeader = this.parent.createElement('div', { className: 'e-rte-popup-header' });
+        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.tblHeader.innerHTML = header;
         this.dlgDiv.appendChild(this.tblHeader);
-        var tableDiv = this.parent.createElement('div', { className: 'e-rte-table-span' });
+        var tableDiv = this.parent.createElement('div', { className: 'e-rte-table-span' + ' ' + this.parent.cssClass });
         this.drawTable(tableDiv, args);
         this.dlgDiv.appendChild(tableDiv);
-        this.dlgDiv.appendChild(this.parent.createElement('span', { className: 'e-span-border' }));
+        this.dlgDiv.appendChild(this.parent.createElement('span', { className: 'e-span-border' + ' ' + this.parent.cssClass }));
         var btnEle = this.parent.createElement('button', {
-            className: 'e-insert-table-btn', id: this.rteID + '_insertTable',
+            className: 'e-insert-table-btn' + ' ' + this.parent.cssClass, id: this.rteID + '_insertTable',
             attrs: { type: 'button', tabindex: '0' }
         });
         if (!isNOU(this.parent.getToolbarElement().querySelector('.e-expended-nav'))) {
@@ -1001,7 +1078,7 @@ var Table = /** @class */ (function () {
             !target.offsetParent.classList.contains('e-quick-dropdown') &&
             !target.offsetParent.classList.contains('e-rte-backgroundcolor-dropdown') && !closest(target, '.e-rte-dropdown-popup')
             && !closest(target, '.e-rte-elements')) {
-            removeClass(this.parent.element.querySelectorAll('table td'), classes.CLS_TABLE_SEL);
+            removeClass(this.parent.inputElement.querySelectorAll('table td'), classes.CLS_TABLE_SEL);
             if (!Browser.isIE) {
                 this.hideTableQuickToolbar();
             }
@@ -1015,10 +1092,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', attrs: { 'data-column': '' + row } });
+            rowDiv = this.parent.createElement('div', { className: 'e-rte-table-row' + ' ' + this.parent.cssClass, 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', attrs: { 'data-cell': '' + col } });
+                tableCell = this.parent.createElement('div', { className: 'e-rte-tablecell e-default' + ' ' + this.parent.cssClass, attrs: { 'data-cell': '' + col } });
                 rowDiv.appendChild(tableCell);
                 tableCell.style.display = display;
                 if (col === 0 && row === 0) {
@@ -1042,15 +1119,15 @@ 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', isPrimary: true }
+                    buttonModel: { content: update, cssClass: 'e-flat e-size-update' + ' ' + this.parent.cssClass, isPrimary: true }
                 },
                 {
                     click: function (e) {
                         _this.cancelDialog(e);
                     },
-                    buttonModel: { cssClass: 'e-flat e-cancel', content: cancel }
+                    buttonModel: { cssClass: 'e-flat e-cancel' + ' ' + this.parent.cssClass, content: cancel }
                 }],
-            cssClass: this.parent.cssClass
+            cssClass: this.editdlgObj.cssClass + ' e-rte-edit-table-prop-dialog'
         });
         this.editdlgObj.element.style.maxHeight = 'none';
         this.editdlgObj.content.querySelector('input').focus();
@@ -1072,13 +1149,13 @@ var Table = /** @class */ (function () {
             height: 'initial', width: '290px', content: dlgContent,
             buttons: [{
                     click: proxy.customTable.bind(this, args),
-                    buttonModel: { content: insert, cssClass: 'e-flat e-insert-table', isPrimary: true }
+                    buttonModel: { content: insert, cssClass: 'e-flat e-insert-table' + ' ' + proxy.parent.cssClass, isPrimary: true }
                 },
                 {
                     click: function (e) {
                         proxy.cancelDialog(e);
                     },
-                    buttonModel: { cssClass: 'e-flat e-cancel', content: cancel }
+                    buttonModel: { cssClass: 'e-flat e-cancel' + ' ' + proxy.parent.cssClass, content: cancel }
                 }]
         });
         if (!isNOU(proxy.parent.cssClass)) {
@@ -1090,10 +1167,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' });
-        var content = '<div class="e-rte-field"><input type="text" '
-            + ' data-role ="none" id="tableColumn" class="e-table-column"/></div>'
-            + '<div class="e-rte-field"><input type="text" data-role ="none" id="tableRow" class="e-table-row" /></div>';
+        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 contentElem = parseHtml(content);
         tableWrap.appendChild(contentElem);
         this.columnTextBox = new NumericTextBox({
@@ -1137,7 +1214,7 @@ var Table = /** @class */ (function () {
             return;
         }
         var tableDialog = this.parent.createElement('div', {
-            className: 'e-rte-edit-table', id: this.rteID + '_tabledialog'
+            className: 'e-rte-edit-table' + ' ' + this.parent.cssClass, id: this.rteID + '_tabledialog'
         });
         this.parent.element.appendChild(tableDialog);
         var insert = this.l10n.getConstant('dialogInsert');
@@ -1152,13 +1229,13 @@ var Table = /** @class */ (function () {
             position: { X: 'center', Y: (Browser.isDevice) ? 'center' : 'top' },
             isModal: Browser.isDevice,
             buttons: [{
-                    buttonModel: { content: insert, cssClass: 'e-flat e-insert-table', isPrimary: true }
+                    buttonModel: { content: insert, cssClass: 'e-flat e-insert-table' + ' ' + this.parent.cssClass, isPrimary: true }
                 },
                 {
                     click: function (e) {
                         _this.cancelDialog(e);
                     },
-                    buttonModel: { cssClass: 'e-flat e-cancel', content: cancel }
+                    buttonModel: { cssClass: 'e-flat e-cancel' + ' ' + this.parent.cssClass, content: cancel }
                 }],
             target: (Browser.isDevice) ? document.body : this.parent.element,
             animationSettings: { effect: 'None' },
@@ -1226,13 +1303,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' });
+        var tableWrap = this.parent.createElement('div', { className: 'e-table-sizewrap' + ' ' + this.parent.cssClass });
         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"><input type="text" data-role ="none" id="tableWidth" class="e-table-width" '
-            + ' /></div>' + '<div class="e-rte-field"><input type="text" data-role ="none" id="cellPadding" class="e-cell-padding" />'
-            + ' </div><div class="e-rte-field"><input type="text" data-role ="none" id="cellSpacing" class="e-cell-spacing" /></div>';
+        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 contentElem = parseHtml(content);
         tableWrap.appendChild(contentElem);
         this.tableWidthNum = new NumericTextBox({

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

@@ -296,6 +296,7 @@ var ToolbarRenderer = /** @class */ (function () {
         var proxy = this;
         var css = CLS_RTE_ELEMENTS + ' ' + CLS_TB_BTN + ((this.parent.inlineMode) ? (' ' + CLS_INLINE_DROPDOWN) : '');
         css += (' ' + ((item === 'backgroundcolor') ? CLS_BACKGROUND_COLOR_DROPDOWN : CLS_FONT_COLOR_DROPDOWN));
+        css += ' ' + this.parent.cssClass;
         var content = proxy.parent.createElement('span', { className: CLS_COLOR_CONTENT });
         var inlineEle = proxy.parent.createElement('span', { className: args.cssClass });
         var range;
@@ -466,6 +467,7 @@ var ToolbarRenderer = /** @class */ (function () {
 
      */
     ToolbarRenderer.prototype.renderColorPicker = function (args, item) {
+        var _this = this;
         // eslint-disable-next-line
         var proxy = this;
         var value;
@@ -483,6 +485,14 @@ var ToolbarRenderer = /** @class */ (function () {
             beforeTileRender: function (args) {
                 args.element.classList.add(CLS_COLOR_PALETTE);
                 args.element.classList.add(CLS_CUSTOM_TILE);
+                if (!isNullOrUndefined(_this.parent.cssClass)) {
+                    var allClassName = _this.parent.cssClass.split(' ');
+                    for (var i = 0; i < allClassName.length; i++) {
+                        if (allClassName[i].trim() !== '') {
+                            args.element.classList.add(allClassName[i]);
+                        }
+                    }
+                }
                 if (args.value === '') {
                     args.element.classList.add(CLS_NOCOLOR_ITEM);
                 }
@@ -497,8 +507,9 @@ var ToolbarRenderer = /** @class */ (function () {
                 proxy.parent.notify(events.selectionRestore, {});
                 proxy.currentElement.querySelector('.' + CLS_RTE_ELEMENTS).style.borderBottomColor = colorpickerValue;
                 var range = proxy.parent.formatter.editorManager.nodeSelection.getRange(proxy.parent.contentModule.getDocument());
+                var closestElement = closest(range.startContainer.parentNode, 'table');
                 if ((range.startContainer.nodeName === 'TD' || range.startContainer.nodeName === 'TH' || range.startContainer.nodeName === 'BODY' ||
-                    closest(range.startContainer.parentNode, 'td,th')) && range.collapsed && args.subCommand === 'BackgroundColor') {
+                    closest(range.startContainer.parentNode, 'td,th')) && range.collapsed && args.subCommand === 'BackgroundColor' && closest(closestElement, '.' + classes.CLS_RTE)) {
                     proxy.parent.notify(events.tableColorPickerChanged, colorPickerArgs);
                 }
                 else {
@@ -518,7 +529,7 @@ var ToolbarRenderer = /** @class */ (function () {
         colorPicker.columns = (item === 'backgroundcolor') ? this.parent.backgroundColor.columns : this.parent.fontColor.columns;
         colorPicker.presetColors = (item === 'backgroundcolor') ? this.parent.backgroundColor.colorCode :
             this.parent.fontColor.colorCode;
-        colorPicker.cssClass = (item === 'backgroundcolor') ? CLS_BACKGROUND_COLOR_PICKER : CLS_FONT_COLOR_PICKER;
+        colorPicker.cssClass = ((item === 'backgroundcolor') ? CLS_BACKGROUND_COLOR_PICKER : CLS_FONT_COLOR_PICKER) + ' ' + args.cssClass;
         colorPicker.createElement = this.parent.createElement;
         colorPicker.appendTo(document.getElementById(args.target));
         return colorPicker;

package/src/rich-text-editor/renderer/view-source.js

@@ -42,7 +42,7 @@ var ViewSource = /** @class */ (function () {
         this.parent.formatter.editorManager.observer.off(CONSTANT.KEY_DOWN_HANDLER, this.onKeyDown);
     };
     ViewSource.prototype.getSourceCode = function () {
-        return this.parent.createElement('textarea', { className: 'e-rte-srctextarea' });
+        return this.parent.createElement('textarea', { className: 'e-rte-srctextarea' + ' ' + this.parent.cssClass });
     };
     ViewSource.prototype.wireEvent = function (element) {
         this.keyboardModule = new KeyboardEvents(element, {

package/styles/bootstrap-dark.css

@@ -417,6 +417,34 @@
 .e-richtexteditor.e-bigger.e-rte-full-screen iframe {
   height: calc(100% - 56px);
 }
+.e-bigger .e-richtexteditor.e-rte-full-screen .e-rte-edit-table,
+.e-richtexteditor.e-bigger.e-rte-full-screen .e-rte-edit-table {
+  max-height: 330px !important;
+}
+.e-bigger .e-richtexteditor.e-rte-full-screen .e-rte-edit-table-prop-dialog,
+.e-richtexteditor.e-bigger.e-rte-full-screen .e-rte-edit-table-prop-dialog {
+  max-height: 414px !important;
+}
+.e-bigger .e-richtexteditor.e-rte-full-screen .e-rte-link-dialog,
+.e-richtexteditor.e-bigger.e-rte-full-screen .e-rte-link-dialog {
+  max-height: 427px !important;
+}
+.e-bigger .e-richtexteditor.e-rte-full-screen .e-rte-img-dialog,
+.e-richtexteditor.e-bigger.e-rte-full-screen .e-rte-img-dialog {
+  min-height: 457px !important;
+}
+.e-bigger .e-richtexteditor.e-rte-full-screen .e-rte-img-link-dialog,
+.e-richtexteditor.e-bigger.e-rte-full-screen .e-rte-img-link-dialog {
+  max-height: 256px !important;
+}
+.e-bigger .e-richtexteditor.e-rte-full-screen .e-rte-img-size-dialog,
+.e-richtexteditor.e-bigger.e-rte-full-screen .e-rte-img-size-dialog {
+  max-height: 327px !important;
+}
+.e-bigger .e-richtexteditor.e-rte-full-screen .e-rte-img-alt-dialog,
+.e-richtexteditor.e-bigger.e-rte-full-screen .e-rte-img-alt-dialog {
+  min-height: 457px !important;
+}
 
 .e-richtexteditor {
   color: #f0f0f0;
@@ -456,6 +484,27 @@
 .e-richtexteditor.e-rte-full-screen iframe {
   height: calc(100% - 42px);
 }
+.e-richtexteditor.e-rte-full-screen .e-rte-edit-table {
+  max-height: 287px !important;
+}
+.e-richtexteditor.e-rte-full-screen .e-rte-edit-table-prop-dialog {
+  max-height: 365px !important;
+}
+.e-richtexteditor.e-rte-full-screen .e-rte-link-dialog {
+  max-height: 394px !important;
+}
+.e-richtexteditor.e-rte-full-screen .e-rte-img-dialog {
+  max-height: 426px !important;
+}
+.e-richtexteditor.e-rte-full-screen .e-rte-img-link-dialog {
+  max-height: 223px !important;
+}
+.e-richtexteditor.e-rte-full-screen .e-rte-img-size-dialog {
+  max-height: 284px !important;
+}
+.e-richtexteditor.e-rte-full-screen .e-rte-img-alt-dialog {
+  max-height: 426px !important;
+}
 .e-richtexteditor.e-rtl .e-rte-character-count {
   left: 0;
   padding-left: 30px;

package/styles/bootstrap.css

@@ -558,6 +558,34 @@
 .e-richtexteditor.e-bigger.e-rte-full-screen iframe {
   height: calc(100% - 56px);
 }
+.e-bigger .e-richtexteditor.e-rte-full-screen .e-rte-edit-table,
+.e-richtexteditor.e-bigger.e-rte-full-screen .e-rte-edit-table {
+  max-height: 330px !important;
+}
+.e-bigger .e-richtexteditor.e-rte-full-screen .e-rte-edit-table-prop-dialog,
+.e-richtexteditor.e-bigger.e-rte-full-screen .e-rte-edit-table-prop-dialog {
+  max-height: 414px !important;
+}
+.e-bigger .e-richtexteditor.e-rte-full-screen .e-rte-link-dialog,
+.e-richtexteditor.e-bigger.e-rte-full-screen .e-rte-link-dialog {
+  max-height: 427px !important;
+}
+.e-bigger .e-richtexteditor.e-rte-full-screen .e-rte-img-dialog,
+.e-richtexteditor.e-bigger.e-rte-full-screen .e-rte-img-dialog {
+  min-height: 457px !important;
+}
+.e-bigger .e-richtexteditor.e-rte-full-screen .e-rte-img-link-dialog,
+.e-richtexteditor.e-bigger.e-rte-full-screen .e-rte-img-link-dialog {
+  max-height: 256px !important;
+}
+.e-bigger .e-richtexteditor.e-rte-full-screen .e-rte-img-size-dialog,
+.e-richtexteditor.e-bigger.e-rte-full-screen .e-rte-img-size-dialog {
+  max-height: 327px !important;
+}
+.e-bigger .e-richtexteditor.e-rte-full-screen .e-rte-img-alt-dialog,
+.e-richtexteditor.e-bigger.e-rte-full-screen .e-rte-img-alt-dialog {
+  min-height: 457px !important;
+}
 
 .e-richtexteditor {
   color: #333;
@@ -597,6 +625,27 @@
 .e-richtexteditor.e-rte-full-screen iframe {
   height: calc(100% - 42px);
 }
+.e-richtexteditor.e-rte-full-screen .e-rte-edit-table {
+  max-height: 287px !important;
+}
+.e-richtexteditor.e-rte-full-screen .e-rte-edit-table-prop-dialog {
+  max-height: 365px !important;
+}
+.e-richtexteditor.e-rte-full-screen .e-rte-link-dialog {
+  max-height: 394px !important;
+}
+.e-richtexteditor.e-rte-full-screen .e-rte-img-dialog {
+  max-height: 426px !important;
+}
+.e-richtexteditor.e-rte-full-screen .e-rte-img-link-dialog {
+  max-height: 223px !important;
+}
+.e-richtexteditor.e-rte-full-screen .e-rte-img-size-dialog {
+  max-height: 284px !important;
+}
+.e-richtexteditor.e-rte-full-screen .e-rte-img-alt-dialog {
+  max-height: 426px !important;
+}
 .e-richtexteditor.e-rtl .e-rte-character-count {
   left: 0;
   padding-left: 30px;

package/styles/bootstrap4.css

@@ -653,6 +653,34 @@
 .e-richtexteditor.e-bigger.e-rte-full-screen iframe {
   height: calc(100% - 56px);
 }
+.e-bigger .e-richtexteditor.e-rte-full-screen .e-rte-edit-table,
+.e-richtexteditor.e-bigger.e-rte-full-screen .e-rte-edit-table {
+  max-height: 302px !important;
+}
+.e-bigger .e-richtexteditor.e-rte-full-screen .e-rte-edit-table-prop-dialog,
+.e-richtexteditor.e-bigger.e-rte-full-screen .e-rte-edit-table-prop-dialog {
+  max-height: 378px !important;
+}
+.e-bigger .e-richtexteditor.e-rte-full-screen .e-rte-link-dialog,
+.e-richtexteditor.e-bigger.e-rte-full-screen .e-rte-link-dialog {
+  max-height: 404px !important;
+}
+.e-bigger .e-richtexteditor.e-rte-full-screen .e-rte-img-dialog,
+.e-richtexteditor.e-bigger.e-rte-full-screen .e-rte-img-dialog {
+  min-height: 428px !important;
+}
+.e-bigger .e-richtexteditor.e-rte-full-screen .e-rte-img-link-dialog,
+.e-richtexteditor.e-bigger.e-rte-full-screen .e-rte-img-link-dialog {
+  max-height: 231px !important;
+}
+.e-bigger .e-richtexteditor.e-rte-full-screen .e-rte-img-size-dialog,
+.e-richtexteditor.e-bigger.e-rte-full-screen .e-rte-img-size-dialog {
+  max-height: 312px !important;
+}
+.e-bigger .e-richtexteditor.e-rte-full-screen .e-rte-img-alt-dialog,
+.e-richtexteditor.e-bigger.e-rte-full-screen .e-rte-img-alt-dialog {
+  min-height: 428px !important;
+}
 
 .e-richtexteditor {
   color: #212529;
@@ -692,6 +720,27 @@
 .e-richtexteditor.e-rte-full-screen iframe {
   height: calc(100% - 42px);
 }
+.e-richtexteditor.e-rte-full-screen .e-rte-edit-table {
+  max-height: 264px !important;
+}
+.e-richtexteditor.e-rte-full-screen .e-rte-edit-table-prop-dialog {
+  max-height: 333px !important;
+}
+.e-richtexteditor.e-rte-full-screen .e-rte-link-dialog {
+  max-height: 368px !important;
+}
+.e-richtexteditor.e-rte-full-screen .e-rte-img-dialog {
+  max-height: 405px !important;
+}
+.e-richtexteditor.e-rte-full-screen .e-rte-img-link-dialog {
+  max-height: 204px !important;
+}
+.e-richtexteditor.e-rte-full-screen .e-rte-img-size-dialog {
+  max-height: 268px !important;
+}
+.e-richtexteditor.e-rte-full-screen .e-rte-img-alt-dialog {
+  max-height: 405px !important;
+}
 .e-richtexteditor.e-rtl .e-rte-character-count {
   left: 0;
   padding-left: 30px;