@syncfusion/ej2-richtexteditor 20.1.51 → 20.1.56

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

@@ -39,6 +39,7 @@ var Table = /** @class */ (function () {
         this.parent.on(events.dropDownSelect, this.dropdownSelect, this);
         this.parent.on(events.keyDown, this.keyDown, this);
         this.parent.on(events.mouseUp, this.selectionTable, this);
+        this.parent.on(events.bindCssClass, this.setCssClass, this);
         this.parent.on(events.destroy, this.destroy, this);
     };
     Table.prototype.removeEventListener = function () {
@@ -59,8 +60,38 @@ var Table = /** @class */ (function () {
         this.parent.off(events.tableColorPickerChanged, this.setBGColor);
         this.parent.off(events.keyDown, this.keyDown);
         this.parent.off(events.mouseUp, this.selectionTable);
+        this.parent.off(events.bindCssClass, this.setCssClass);
         this.parent.off(events.destroy, this.destroy);
     };
+    Table.prototype.updateCss = function (currentObj, e) {
+        if (currentObj && e.cssClass) {
+            if (isNullOrUndefined(e.oldCssClass)) {
+                currentObj.setProperties({ cssClass: (currentObj.cssClass + ' ' + e.cssClass).trim() });
+            }
+            else {
+                currentObj.setProperties({ cssClass: (currentObj.cssClass.replace(e.oldCssClass, '').trim() + ' ' + e.cssClass).trim() });
+            }
+        }
+    };
+    Table.prototype.setCssClass = function (e) {
+        if (this.popupObj && e.cssClass) {
+            if (isNullOrUndefined(e.oldCssClass)) {
+                addClass([this.popupObj.element], e.cssClass);
+            }
+            else {
+                removeClass([this.popupObj.element], e.oldCssClass);
+                addClass([this.popupObj.element], e.cssClass);
+            }
+        }
+        this.updateCss(this.createTableButton, e);
+        this.updateCss(this.editdlgObj, e);
+        var numericTextBoxObj = [
+            this.columnTextBox, this.rowTextBox, this.tableWidthNum, this.tableCellPadding, this.tableCellSpacing
+        ];
+        for (var i = 0; i < numericTextBoxObj.length; i++) {
+            this.updateCss(numericTextBoxObj[i], e);
+        }
+    };
     Table.prototype.selectionTable = function (e) {
         var target = e.args.target;
         if (Browser.info.name === 'mozilla' && !isNOU(closest(target, 'table')) && closest(target, 'table').tagName === 'TABLE') {
@@ -193,6 +224,7 @@ var Table = /** @class */ (function () {
     };
     Table.prototype.showDialog = function () {
         this.openDialog(false);
+        this.setCssClass({ cssClass: this.parent.cssClass });
     };
     Table.prototype.closeDialog = function () {
         if (this.editdlgObj) {
@@ -766,7 +798,8 @@ var Table = /** @class */ (function () {
                 var tableWidth = parseInt(getComputedStyle(_this.curTable).width, 10);
                 var tableHeight = parseInt(getComputedStyle(_this.curTable).height, 10);
                 var paddingSize = +getComputedStyle(_this.contentModule.getEditPanel()).paddingRight.match(/\d/g).join('');
-                var rteWidth = _this.contentModule.getEditPanel().offsetWidth - paddingSize * 2;
+                var rteWidth = _this.contentModule.getEditPanel().offsetWidth - (_this.contentModule.getEditPanel().offsetWidth -
+                    _this.contentModule.getEditPanel().clientWidth) - paddingSize * 2;
                 if (_this.resizeBtnStat.column) {
                     var cellColl = _this.curTable.rows[_this.calMaxCol(_this.curTable)].cells;
                     var width = parseFloat(_this.columnEle.offsetWidth.toString());
@@ -913,12 +946,12 @@ var Table = /** @class */ (function () {
             this.parent.getToolbarElement().querySelector('.e-expended-nav').setAttribute('tabindex', '1');
         }
         this.dlgDiv.appendChild(btnEle);
-        var button = new Button({
-            iconCss: 'e-icons e-create-table', content: insertbtn, cssClass: 'e-flat',
+        this.createTableButton = new Button({
+            iconCss: 'e-icons e-create-table', content: insertbtn, cssClass: 'e-flat' + ' ' + this.parent.cssClass,
             enableRtl: this.parent.enableRtl, locale: this.parent.locale
         });
-        button.isStringTemplate = true;
-        button.appendTo(btnEle);
+        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);
         var target = args.args.originalEvent.target;
@@ -941,6 +974,9 @@ var Table = /** @class */ (function () {
             }
         });
         addClass([this.popupObj.element], 'e-popup-open');
+        if (!isNOU(this.parent.cssClass)) {
+            addClass([this.popupObj.element], this.parent.cssClass);
+        }
         this.popupObj.refreshPosition(target);
     };
     Table.prototype.docClick = function (e) {
@@ -1013,7 +1049,8 @@ var Table = /** @class */ (function () {
                         _this.cancelDialog(e);
                     },
                     buttonModel: { cssClass: 'e-flat e-cancel', content: cancel }
-                }]
+                }],
+            cssClass: this.parent.cssClass
         });
         this.editdlgObj.element.style.maxHeight = 'none';
         this.editdlgObj.content.querySelector('input').focus();
@@ -1044,6 +1081,9 @@ var Table = /** @class */ (function () {
                     buttonModel: { cssClass: 'e-flat e-cancel', content: cancel }
                 }]
         });
+        if (!isNOU(proxy.parent.cssClass)) {
+            proxy.editdlgObj.setProperties({ cssClass: proxy.parent.cssClass });
+        }
         proxy.editdlgObj.element.style.maxHeight = 'none';
         proxy.editdlgObj.content.querySelector('input').focus();
     };
@@ -1063,7 +1103,8 @@ var Table = /** @class */ (function () {
             placeholder: tableColumn,
             floatLabelType: 'Auto',
             max: 50,
-            enableRtl: this.parent.enableRtl, locale: this.parent.locale
+            enableRtl: this.parent.enableRtl, locale: this.parent.locale,
+            cssClass: this.parent.cssClass
         });
         this.columnTextBox.isStringTemplate = true;
         this.columnTextBox.appendTo(tableWrap.querySelector('#tableColumn'));
@@ -1074,7 +1115,8 @@ var Table = /** @class */ (function () {
             placeholder: tableRow,
             floatLabelType: 'Auto',
             max: 50,
-            enableRtl: this.parent.enableRtl, locale: this.parent.locale
+            enableRtl: this.parent.enableRtl, locale: this.parent.locale,
+            cssClass: this.parent.cssClass
         });
         this.rowTextBox.isStringTemplate = true;
         this.rowTextBox.appendTo(tableWrap.querySelector('#tableRow'));
@@ -1103,7 +1145,7 @@ var Table = /** @class */ (function () {
         var header = this.l10n.getConstant('tabledialogHeader');
         var dialogModel = {
             header: header,
-            cssClass: classes.CLS_RTE_ELEMENTS,
+            cssClass: classes.CLS_RTE_ELEMENTS + ' ' + this.parent.cssClass,
             enableRtl: this.parent.enableRtl,
             locale: this.parent.locale,
             showCloseIcon: true, closeOnEscape: true, width: (Browser.isDevice) ? '290px' : '340px', height: 'initial',
@@ -1193,7 +1235,7 @@ var Table = /** @class */ (function () {
             + ' </div><div class="e-rte-field"><input type="text" data-role ="none" id="cellSpacing" class="e-cell-spacing" /></div>';
         var contentElem = parseHtml(content);
         tableWrap.appendChild(contentElem);
-        var widthNum = new NumericTextBox({
+        this.tableWidthNum = new NumericTextBox({
             format: 'n0',
             min: 0,
             value: widthVal,
@@ -1201,9 +1243,9 @@ var Table = /** @class */ (function () {
             floatLabelType: 'Auto',
             enableRtl: this.parent.enableRtl, locale: this.parent.locale
         });
-        widthNum.isStringTemplate = true;
-        widthNum.appendTo(tableWrap.querySelector('#tableWidth'));
-        var padding = new NumericTextBox({
+        this.tableWidthNum.isStringTemplate = true;
+        this.tableWidthNum.appendTo(tableWrap.querySelector('#tableWidth'));
+        this.tableCellPadding = new NumericTextBox({
             format: 'n0',
             min: 0,
             // eslint-disable-next-line
@@ -1212,9 +1254,9 @@ var Table = /** @class */ (function () {
             floatLabelType: 'Auto',
             enableRtl: this.parent.enableRtl, locale: this.parent.locale
         });
-        padding.isStringTemplate = true;
-        padding.appendTo(tableWrap.querySelector('#cellPadding'));
-        var spacing = new NumericTextBox({
+        this.tableCellPadding.isStringTemplate = true;
+        this.tableCellPadding.appendTo(tableWrap.querySelector('#cellPadding'));
+        this.tableCellSpacing = new NumericTextBox({
             format: 'n0',
             min: 0,
             // eslint-disable-next-line
@@ -1223,8 +1265,8 @@ var Table = /** @class */ (function () {
             floatLabelType: 'Auto',
             enableRtl: this.parent.enableRtl, locale: this.parent.locale
         });
-        spacing.isStringTemplate = true;
-        spacing.appendTo(tableWrap.querySelector('#cellSpacing'));
+        this.tableCellSpacing.isStringTemplate = true;
+        this.tableCellSpacing.appendTo(tableWrap.querySelector('#cellSpacing'));
         return tableWrap;
     };
     /**

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

@@ -115,7 +115,8 @@ var ToolbarRenderer = /** @class */ (function () {
             created: this.toolbarCreated.bind(this),
             clicked: this.toolbarClicked.bind(this),
             enablePersistence: args.enablePersistence,
-            enableRtl: args.enableRtl
+            enableRtl: args.enableRtl,
+            cssClass: args.cssClass
         });
         args.rteToolbarObj.toolbarObj.isStringTemplate = true;
         args.rteToolbarObj.toolbarObj.createElement = this.parent.createElement;