@syncfusion/ej2-richtexteditor 20.1.61 → 20.2.36

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

@@ -251,22 +251,22 @@ var Link = /** @class */ (function () {
         var textPlace = this.i10n.getConstant('textPlaceholder');
         var title = this.i10n.getConstant('linkTitle');
         var linkDialogEle = this.parent.createElement('div', {
-            className: 'e-rte-link-dialog', id: this.rteID + '_rtelink'
+            className: 'e-rte-link-dialog' + ' ' + this.parent.cssClass, id: this.rteID + '_rtelink'
         });
         this.parent.element.appendChild(linkDialogEle);
         var linkContent = this.parent.createElement('div', {
-            className: 'e-rte-linkcontent', id: this.rteID + '_linkContent'
+            className: 'e-rte-linkcontent' + ' ' + this.parent.cssClass, id: this.rteID + '_linkContent'
         });
         var htmlTextbox = (this.parent.editorMode === 'HTML') ? '<label>' + linkTooltip +
-            '</label></div><div class="e-rte-field">' +
-            '<input type="text" data-role ="none" spellcheck="false" placeholder = "' + title + '" class="e-input e-rte-linkTitle"></div>' +
-            '<div class="e-rte-label"></div>' + '<div class="e-rte-field">' +
-            '<input type="checkbox" class="e-rte-linkTarget"  data-role ="none"></div>' : '';
-        var content = '<div class="e-rte-label"><label>' + linkWebAddress + '</label></div>' + '<div class="e-rte-field">' +
-            '<input type="text" data-role ="none" spellcheck="false" placeholder="' + urlPlace + '" class="e-input e-rte-linkurl"/></div>' +
-            '<div class="e-rte-label">' + '<label>' + linkDisplayText + '</label></div><div class="e-rte-field"> ' +
-            '<input type="text" data-role ="none" spellcheck="false" class="e-input e-rte-linkText" placeholder="' + textPlace + '">' +
-            '</div><div class="e-rte-label">' + htmlTextbox;
+            '</label></div><div class="e-rte-field' + ' ' + this.parent.cssClass + '">' +
+            '<input type="text" data-role ="none" spellcheck="false" placeholder = "' + title + '" class="e-input e-rte-linkTitle' + ' ' + this.parent.cssClass + '"></div>' +
+            '<div class="e-rte-label' + ' ' + this.parent.cssClass + '"></div>' + '<div class="e-rte-field' + ' ' + this.parent.cssClass + '">' +
+            '<input type="checkbox" class="e-rte-linkTarget' + ' ' + this.parent.cssClass + '"  data-role ="none"></div>' : '';
+        var content = '<div class="e-rte-label' + ' ' + this.parent.cssClass + '"><label>' + linkWebAddress + '</label></div>' + '<div class="e-rte-field' + ' ' + this.parent.cssClass + '">' +
+            '<input type="text" data-role ="none" spellcheck="false" placeholder="' + urlPlace + '" class="e-input e-rte-linkurl' + ' ' + this.parent.cssClass + '"/></div>' +
+            '<div class="e-rte-label' + ' ' + this.parent.cssClass + '">' + '<label>' + linkDisplayText + '</label></div><div class="e-rte-field' + ' ' + this.parent.cssClass + '"> ' +
+            '<input type="text" data-role ="none" spellcheck="false" class="e-input e-rte-linkText' + ' ' + this.parent.cssClass + '" placeholder="' + textPlace + '">' +
+            '</div><div class="e-rte-label' + ' ' + this.parent.cssClass + '">' + htmlTextbox;
         var contentElem = parseHtml(content);
         linkContent.appendChild(contentElem);
         var linkTarget = linkContent.querySelector('.e-rte-linkTarget');
@@ -294,9 +294,9 @@ var Link = /** @class */ (function () {
             isModal: Browser.isDevice,
             buttons: [{
                     click: this.insertlink.bind(selectObj),
-                    buttonModel: { content: linkInsert, cssClass: 'e-flat e-insertLink', isPrimary: true }
+                    buttonModel: { content: linkInsert, cssClass: 'e-flat e-insertLink' + ' ' + this.parent.cssClass, isPrimary: true }
                 },
-                { click: this.cancelDialog.bind(selectObj), buttonModel: { cssClass: 'e-flat', content: linkCancel } }],
+                { click: this.cancelDialog.bind(selectObj), buttonModel: { cssClass: 'e-flat' + ' ' + this.parent.cssClass, content: linkCancel } }],
             target: (Browser.isDevice) ? document.body : this.parent.element,
             animationSettings: { effect: 'None' },
             close: function (event) {
@@ -440,8 +440,10 @@ var Link = /** @class */ (function () {
         if (this.parent.formatter.getUndoRedoStack().length === 0) {
             this.parent.formatter.saveData();
         }
+        var selectParentEle = this.getAnchorNode(e.selectParent[0]);
         this.parent.formatter.process(this.parent, e.args, e.args, {
             selectNode: e.selectNode, selectParent: e.selectParent, selection: e.selection,
+            text: selectParentEle.innerText,
             subCommand: e.args.item.subCommand
         });
         if (isIDevice() && this.parent.iframeSettings.enable) {
@@ -456,7 +458,7 @@ var Link = /** @class */ (function () {
         var selectParentEle = this.getAnchorNode(e.selectParent[0]);
         if (selectParentEle.classList.contains('e-rte-anchor') || selectParentEle.tagName === 'A') {
             this.parent.formatter.process(this.parent, e.args, e.args, {
-                url: selectParentEle.href,
+                url: selectParentEle.href, text: selectParentEle.innerText,
                 target: selectParentEle.target === '' ? '_self' : '_blank', selectNode: e.selectNode,
                 subCommand: e.args.item.subCommand
             });

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

@@ -25,7 +25,8 @@ var MarkdownRender = /** @class */ (function () {
         var div = this.parent.createElement('div', { id: this.parent.getID() + '_view', className: 'e-rte-content' });
         this.editableElement = this.parent.createElement('textarea', {
             className: 'e-content',
-            id: this.parent.getID() + '_editable-content'
+            id: this.parent.getID() + '_editable-content',
+            attrs: { 'aria-labelledby': this.parent.getID() + '_view' }
         });
         div.appendChild(this.editableElement);
         this.setPanel(div);

package/src/rich-text-editor/renderer/table-module.d.ts

@@ -32,6 +32,8 @@ export declare class Table {
     private moveEle;
     private helper;
     private dialogRenderObj;
+    private currentColumnResize;
+    private currentMarginLeft;
     private constructor();
     protected addEventListener(): void;
     protected removeEventListener(): void;
@@ -75,6 +77,7 @@ export declare class Table {
     private updateHelper;
     private calMaxCol;
     private resizing;
+    private findFirstLastColCells;
     private convertPixelToPercentage;
     private cancelResizeAction;
     private resizeEnd;

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) + '%';
+                            }
+                        }
+                    }
+                    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) + '%';
                             }
-                            if (!isNOU(_this.curTable.rows[i].cells[_this.colIndex])) {
-                                _this.curTable.rows[i].cells[_this.colIndex].style.width =
-                                    _this.convertPixelToPercentage(rightColWidth, tableWidth) + '%';
+                        }
+                    }
+                    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,13 +1119,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', 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
         });
@@ -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);
                 }
@@ -518,7 +528,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/fluent-dark.css

@@ -1233,6 +1233,7 @@
   height: 16px;
 }
 .e-richtexteditor .e-rte-table-popup.e-popup-open .e-insert-table-btn {
+  margin-top: 16px;
   width: 100%;
 }
 .e-richtexteditor .e-rte-edit-table .e-rte-field {

package/styles/fluent.css

@@ -1233,6 +1233,7 @@
   height: 16px;
 }
 .e-richtexteditor .e-rte-table-popup.e-popup-open .e-insert-table-btn {
+  margin-top: 16px;
   width: 100%;
 }
 .e-richtexteditor .e-rte-edit-table .e-rte-field {

package/styles/rich-text-editor/_fluent-definition.scss

@@ -172,6 +172,7 @@ $rte-table-header-bg: $content-bg-color-alt1 !default;
 $rte-tb-hover-font-color: $secondary-text-color-hover;
 $transparent: $transparent;
 $rte-placeholder-padding: 24px !default;
+$rte-table-popup-btn-margin-top: 16px !default;
 
 $rte-img-dlg-min-height: 410px !default;
 $rte-big-img-dlg-min-height: 434px !default;