@syncfusion/ej2-richtexteditor 20.1.51 → 20.1.56

package/dist/global/index.d.ts

@@ -1,6 +1,6 @@
 /*!
 *  filename: index.d.ts
-*  version : 20.1.51
+*  version : 20.1.56
 *  Copyright Syncfusion Inc. 2001 - 2020. All rights reserved.
 *  Use of this code is subject to the terms of our license.
 *  A copy of the current license can be obtained at any time by e-mailing

package/package.json

@@ -1,8 +1,8 @@
 {
   "_from": "@syncfusion/ej2-richtexteditor@*",
-  "_id": "@syncfusion/ej2-richtexteditor@20.1.50",
+  "_id": "@syncfusion/ej2-richtexteditor@20.1.55",
   "_inBundle": false,
-  "_integrity": "sha512-gkz4PlU7B1CB+wMuzLpWYTa/n3NaAlzqGYfk2gxHEx+26SxT8sIbVVqGHSjvT9wKHU4TSczQhqTCg3+aiS8RHA==",
+  "_integrity": "sha512-62Rvxj/EQwsiPPPAy15EYFm6lX3GcnRVlhtzmuePAa0UZWJQza9JKYpyJJDouMKozDsa/ekG+reDFrCeswoJLw==",
   "_location": "/@syncfusion/ej2-richtexteditor",
   "_phantomChildren": {},
   "_requested": {
@@ -26,8 +26,8 @@
     "/@syncfusion/ej2-react-richtexteditor",
     "/@syncfusion/ej2-vue-richtexteditor"
   ],
-  "_resolved": "http://nexus.syncfusion.com/repository/ej2-hotfix-new/@syncfusion/ej2-richtexteditor/-/ej2-richtexteditor-20.1.50.tgz",
-  "_shasum": "17718651142faa753d87d51a230d39c2a8e02db5",
+  "_resolved": "http://nexus.syncfusion.com/repository/ej2-hotfix-new/@syncfusion/ej2-richtexteditor/-/ej2-richtexteditor-20.1.55.tgz",
+  "_shasum": "250a94b80e644648ab21dda7654ac57331425f4d",
   "_spec": "@syncfusion/ej2-richtexteditor@*",
   "_where": "/jenkins/workspace/automation_release_19.1.0.1-ZPMUBNQ6AUYH6YGEFBPVYMEQLRRW2SLD4XCZ6GATNZJFYJ3RIAOA/packages/included",
   "author": {
@@ -38,13 +38,13 @@
   },
   "bundleDependencies": false,
   "dependencies": {
-    "@syncfusion/ej2-base": "~20.1.50",
-    "@syncfusion/ej2-buttons": "~20.1.50",
-    "@syncfusion/ej2-filemanager": "~20.1.47",
-    "@syncfusion/ej2-inputs": "~20.1.48",
-    "@syncfusion/ej2-navigations": "~20.1.51",
-    "@syncfusion/ej2-popups": "~20.1.47",
-    "@syncfusion/ej2-splitbuttons": "~20.1.47"
+    "@syncfusion/ej2-base": "~20.1.56",
+    "@syncfusion/ej2-buttons": "~20.1.55",
+    "@syncfusion/ej2-filemanager": "~20.1.56",
+    "@syncfusion/ej2-inputs": "~20.1.55",
+    "@syncfusion/ej2-navigations": "~20.1.56",
+    "@syncfusion/ej2-popups": "~20.1.55",
+    "@syncfusion/ej2-splitbuttons": "~20.1.55"
   },
   "deprecated": false,
   "description": "Essential JS 2 RichTextEditor component",
@@ -70,6 +70,6 @@
     "url": "git+https://github.com/syncfusion/ej2-javascript-ui-controls.git"
   },
   "typings": "index.d.ts",
-  "version": "20.1.51",
+  "version": "20.1.56",
   "sideEffects": false
 }

package/src/editor-manager/plugin/dom-node.js

@@ -541,7 +541,13 @@ var DOMNode = /** @class */ (function () {
                 markerStart.appendChild(start);
             }
             else {
-                this.replaceWith(start, this.marker(markerClassName.startSelection, this.encode(start.textContent)));
+                if (start.nodeType != 3 && start.nodeName != '#text') {
+                    var marker = this.marker(markerClassName.startSelection, '');
+                    append([this.parseHTMLFragment(marker)], start);
+                }
+                else {
+                    this.replaceWith(start, this.marker(markerClassName.startSelection, this.encode(start.textContent)));
+                }
             }
             if (end.nodeType !== Node.TEXT_NODE && end.tagName === 'BR' &&
                 CONSTANT.IGNORE_BLOCK_TAGS.indexOf(end.parentNode.tagName.toLocaleLowerCase()) >= 0) {

package/src/editor-manager/plugin/inserthtml.js

@@ -377,7 +377,8 @@ var InsertHtml = /** @class */ (function () {
                 tempSpan.parentNode.replaceChild(node, tempSpan);
             }
             else {
-                var currentNode = nodes[nodes.length - 1];
+                var nodeSelection = new NodeSelection();
+                var currentNode = this.getNodeCollection(range, nodeSelection, node)[this.getNodeCollection(range, nodeSelection, node).length - 1];
                 var splitedElm = void 0;
                 if ((currentNode.nodeName === 'BR' || currentNode.nodeName === 'HR') && !isNOU(currentNode.parentElement) &&
                     currentNode.parentElement.textContent.trim().length === 0) {

package/src/editor-manager/plugin/nodecutter.js

@@ -122,7 +122,7 @@ var NodeCutter = /** @class */ (function () {
         else if (len > -1) {
             this.spliceEmptyNode(fragment.childNodes[0], isStart);
         }
-        else if (fragment.nodeType !== 3 && fragment.nodeType !== 11) {
+        else if (fragment.nodeType !== 3 && fragment.nodeType !== 11 && fragment.nodeName !== 'IMG') {
             fragment.parentNode.removeChild(fragment);
         }
         return fragment;

package/src/rich-text-editor/actions/base-quick-toolbar.js

@@ -50,17 +50,18 @@ var BaseQuickToolbar = /** @class */ (function () {
         this.element = this.parent.createElement('div', { id: popupId, className: className + ' ' + classes.CLS_RTE_ELEMENTS });
         this.element.setAttribute('aria-owns', this.parent.getID());
         this.appendPopupContent();
-        this.createToolbar(args.toolbarItems, args.mode);
+        this.createToolbar(args.toolbarItems, args.mode, args.cssClass);
         this.popupRenderer.renderPopup(this);
         this.addEventListener();
     };
-    BaseQuickToolbar.prototype.createToolbar = function (items, mode) {
+    BaseQuickToolbar.prototype.createToolbar = function (items, mode, cssClass) {
         this.quickTBarObj = new BaseToolbar(this.parent, this.locator);
         this.quickTBarObj.render({
             container: 'quick',
             target: this.toolbarElement,
             items: items,
-            mode: mode
+            mode: mode,
+            cssClass: cssClass
         });
         this.quickTBarObj.toolbarObj.refresh();
     };
@@ -252,6 +253,10 @@ var BaseQuickToolbar = /** @class */ (function () {
                 _this.popupObj.element.classList.remove('e-popup-open');
                 removeClass([_this.element], [classes.CLS_HIDE]);
                 _this.popupObj.show({ name: 'ZoomIn', duration: (Browser.isIE ? 250 : 400) });
+                if (_this.popupObj && _this.parent.cssClass) {
+                    removeClass([_this.popupObj.element], _this.parent.cssClass);
+                    addClass([_this.popupObj.element], _this.parent.cssClass);
+                }
                 setStyleAttribute(_this.element, {
                     maxWidth: window.outerWidth + 'px'
                 });

package/src/rich-text-editor/actions/base-toolbar.d.ts

@@ -16,6 +16,7 @@ export declare class BaseToolbar {
     constructor(parent?: IRichTextEditor, serviceLocator?: ServiceLocator);
     private addEventListener;
     private removeEventListener;
+    private setCssClass;
     private setRtl;
     private getClass;
     private getTemplateObject;

package/src/rich-text-editor/actions/base-toolbar.js

@@ -23,12 +23,24 @@ var BaseToolbar = /** @class */ (function () {
     }
     BaseToolbar.prototype.addEventListener = function () {
         this.parent.on(events.rtlMode, this.setRtl, this);
+        this.parent.on(events.bindCssClass, this.setCssClass, this);
         this.parent.on(events.destroy, this.removeEventListener, this);
     };
     BaseToolbar.prototype.removeEventListener = function () {
         this.parent.off(events.rtlMode, this.setRtl);
+        this.parent.off(events.bindCssClass, this.setCssClass);
         this.parent.off(events.destroy, this.removeEventListener);
     };
+    BaseToolbar.prototype.setCssClass = function (e) {
+        if (!isNullOrUndefined(this.toolbarObj)) {
+            if (isNullOrUndefined(e.oldCssClass)) {
+                this.toolbarObj.setProperties({ cssClass: (this.toolbarObj.cssClass + ' ' + e.cssClass).trim() });
+            }
+            else {
+                this.toolbarObj.setProperties({ cssClass: (this.toolbarObj.cssClass.replace(e.oldCssClass, '').trim() + ' ' + e.cssClass).trim() });
+            }
+        }
+    };
     BaseToolbar.prototype.setRtl = function (args) {
         if (!isNullOrUndefined(this.toolbarObj)) {
             this.toolbarObj.setProperties({ enableRtl: args.enableRtl });
@@ -158,7 +170,8 @@ var BaseToolbar = /** @class */ (function () {
             items: this.getItems(args.items, args.container),
             overflowMode: args.mode,
             enablePersistence: this.parent.enablePersistence,
-            enableRtl: this.parent.enableRtl
+            enableRtl: this.parent.enableRtl,
+            cssClass: args.cssClass,
         };
     };
     /**

package/src/rich-text-editor/actions/color-picker.d.ts

@@ -36,6 +36,8 @@ export declare class ColorPickerInput {
      */
     destroyColorPicker(): void;
     private setRtl;
+    private setCssClass;
+    private updateCss;
     protected addEventListener(): void;
     private onPropertyChanged;
     protected removeEventListener(): void;

package/src/rich-text-editor/actions/color-picker.js

@@ -1,4 +1,4 @@
-import { select, detach, extend } from '@syncfusion/ej2-base';
+import { select, detach, extend, isNullOrUndefined } from '@syncfusion/ej2-base';
 import { RenderType } from '../base/enum';
 import * as events from '../base/constant';
 import * as classes from '../base/classes';
@@ -83,6 +83,9 @@ var ColorPickerInput = /** @class */ (function () {
                 }
             }
         });
+        if (this.parent.inlineMode.enable) {
+            this.setCssClass({ cssClass: this.parent.cssClass });
+        }
     };
     ColorPickerInput.prototype.destroy = function () {
         this.removeEventListener();
@@ -128,12 +131,29 @@ var ColorPickerInput = /** @class */ (function () {
             this.backgroundColorDropDown.setProperties({ enableRtl: args.enableRtl });
         }
     };
+    ColorPickerInput.prototype.setCssClass = function (e) {
+        this.updateCss(this.fontColorPicker, this.fontColorDropDown, e);
+        this.updateCss(this.backgroundColorPicker, this.backgroundColorDropDown, e);
+    };
+    ColorPickerInput.prototype.updateCss = function (colorPickerObj, dropDownObj, e) {
+        if (colorPickerObj && e.cssClass) {
+            if (isNullOrUndefined(e.oldCssClass)) {
+                colorPickerObj.setProperties({ cssClass: (colorPickerObj.cssClass + ' ' + e.cssClass).trim() });
+                dropDownObj.setProperties({ cssClass: (dropDownObj.cssClass + ' ' + e.cssClass).trim() });
+            }
+            else {
+                colorPickerObj.setProperties({ cssClass: (colorPickerObj.cssClass.replace(e.oldCssClass, '').trim() + ' ' + e.cssClass).trim() });
+                dropDownObj.setProperties({ cssClass: (dropDownObj.cssClass.replace(e.oldCssClass, '').trim() + ' ' + e.cssClass).trim() });
+            }
+        }
+    };
     ColorPickerInput.prototype.addEventListener = function () {
         this.parent.on(events.toolbarRenderComplete, this.renderColorPickerInput, this);
         this.parent.on(events.rtlMode, this.setRtl, this);
         this.parent.on(events.destroy, this.destroy, this);
         this.parent.on(events.destroyColorPicker, this.destroyColorPicker, this);
         this.parent.on(events.modelChanged, this.onPropertyChanged, this);
+        this.parent.on(events.bindCssClass, this.setCssClass, this);
     };
     ColorPickerInput.prototype.onPropertyChanged = function (model) {
         var newProp = model.newProp;
@@ -206,6 +226,7 @@ var ColorPickerInput = /** @class */ (function () {
         this.parent.off(events.rtlMode, this.setRtl);
         this.parent.off(events.destroyColorPicker, this.destroyColorPicker);
         this.parent.off(events.modelChanged, this.onPropertyChanged);
+        this.parent.off(events.bindCssClass, this.setCssClass);
     };
     return ColorPickerInput;
 }());

package/src/rich-text-editor/actions/dropdown-buttons.d.ts

@@ -54,6 +54,8 @@ export declare class DropDownButtons {
      */
     destroyDropDowns(): void;
     private setRtl;
+    private updateCss;
+    private setCssClass;
     protected addEventListener(): void;
     private onIframeMouseDown;
     protected removeEventListener(): void;

package/src/rich-text-editor/actions/dropdown-buttons.js

@@ -187,6 +187,9 @@ var DropDownButtons = /** @class */ (function () {
                 }
             }
         });
+        if (this.parent.inlineMode.enable) {
+            this.setCssClass({ cssClass: this.parent.cssClass });
+        }
     };
     DropDownButtons.prototype.getUpdateItems = function (items, value) {
         var dropDownItems = items.slice();
@@ -474,6 +477,26 @@ var DropDownButtons = /** @class */ (function () {
             this.bulletFormatListDropDown.setProperties({ enableRtl: args.enableRtl });
         }
     };
+    DropDownButtons.prototype.updateCss = function (dropDownObj, e) {
+        if (dropDownObj && e.cssClass) {
+            if (isNullOrUndefined(e.oldCssClass)) {
+                dropDownObj.setProperties({ cssClass: (dropDownObj.cssClass + ' ' + e.cssClass).trim() });
+            }
+            else {
+                dropDownObj.setProperties({ cssClass: (dropDownObj.cssClass.replace(e.oldCssClass, '').trim() + ' ' + e.cssClass).trim() });
+            }
+        }
+    };
+    DropDownButtons.prototype.setCssClass = function (e) {
+        var dropDownObj = [
+            this.formatDropDown, this.fontNameDropDown, this.fontSizeDropDown, this.alignDropDown, this.imageAlignDropDown,
+            this.displayDropDown, this.numberFormatListDropDown, this.bulletFormatListDropDown, this.tableRowsDropDown,
+            this.tableColumnsDropDown, this.tableCellVerticalAlignDropDown
+        ];
+        for (var i = 0; i < dropDownObj.length; i++) {
+            this.updateCss(dropDownObj[i], e);
+        }
+    };
     DropDownButtons.prototype.addEventListener = function () {
         if (this.parent.isDestroyed) {
             return;
@@ -483,6 +506,7 @@ var DropDownButtons = /** @class */ (function () {
         this.parent.on(events.rtlMode, this.setRtl, this);
         this.parent.on(events.destroy, this.removeEventListener, this);
         this.parent.on(events.modelChanged, this.onPropertyChanged, this);
+        this.parent.on(events.bindCssClass, this.setCssClass, this);
     };
     DropDownButtons.prototype.onIframeMouseDown = function () {
         dispatchEvent(document, 'mousedown');
@@ -496,6 +520,7 @@ var DropDownButtons = /** @class */ (function () {
         this.parent.off(events.beforeDropDownItemRender, this.beforeRender);
         this.parent.off(events.destroy, this.removeEventListener);
         this.parent.off(events.modelChanged, this.onPropertyChanged);
+        this.parent.off(events.bindCssClass, this.setCssClass);
     };
     return DropDownButtons;
 }());

package/src/rich-text-editor/actions/enter-key.js

@@ -292,8 +292,9 @@ var EnterKeyAction = /** @class */ (function () {
     };
     EnterKeyAction.prototype.removeBRElement = function (currentElement) {
         if (Browser.userAgent.indexOf('Firefox') != -1 &&
-            this.range.endOffset === currentElement.textContent.length &&
-            currentElement.lastChild.nodeName === 'BR') {
+            this.range.endOffset === currentElement.textContent.length && (currentElement.textContent.length !== 0 ||
+            currentElement.querySelectorAll('BR').length > 1) &&
+            !isNOU(currentElement.lastChild) && currentElement.lastChild.nodeName === 'BR') {
             detach(currentElement.lastChild);
         }
     };

package/src/rich-text-editor/actions/file-manager.d.ts

@@ -18,6 +18,7 @@ export declare class FileManager {
     private constructor();
     private initialize;
     private render;
+    private setCssClass;
     private renderFileManager;
     private getInputUrlElement;
     private insertImageUrl;

package/src/rich-text-editor/actions/file-manager.js

@@ -1,4 +1,4 @@
-import { Browser, detach, closest, isNullOrUndefined as isNOU, EventHandler } from '@syncfusion/ej2-base';
+import { Browser, detach, closest, isNullOrUndefined as isNOU, EventHandler, isNullOrUndefined } from '@syncfusion/ej2-base';
 import { ContextMenu, DetailsView, FileManager as EJ2FileManager } from '@syncfusion/ej2-filemanager';
 import { NavigationPane, Toolbar } from '@syncfusion/ej2-filemanager';
 import { RenderType } from '../base/enum';
@@ -78,6 +78,17 @@ var FileManager = /** @class */ (function () {
         this.dialogObj.createElement = this.parent.createElement;
         this.dialogObj.appendTo(dlgTarget);
         this.dialogObj.show(Browser.isDevice ? true : false);
+        this.setCssClass({ cssClass: this.parent.cssClass });
+    };
+    FileManager.prototype.setCssClass = function (e) {
+        if (this.dialogObj && e.cssClass) {
+            if (isNullOrUndefined(e.oldCssClass)) {
+                this.dialogObj.setProperties({ cssClass: (this.dialogObj.cssClass + ' ' + e.cssClass).trim() });
+            }
+            else {
+                this.dialogObj.setProperties({ cssClass: (this.dialogObj.cssClass.replace(e.oldCssClass, '').trim() + ' ' + e.cssClass).trim() });
+            }
+        }
     };
     FileManager.prototype.renderFileManager = function () {
         var _this = this;
@@ -202,12 +213,14 @@ var FileManager = /** @class */ (function () {
     FileManager.prototype.addEventListener = function () {
         this.parent.on(events.initialEnd, this.initialize, this);
         this.parent.on(events.renderFileManager, this.render, this);
+        this.parent.on(events.bindCssClass, this.setCssClass, this);
         this.parent.on(events.destroy, this.destroy, this);
     };
     FileManager.prototype.removeEventListener = function () {
         EventHandler.remove(this.parent.element.ownerDocument, 'mousedown', this.onDocumentClick);
         this.parent.off(events.initialEnd, this.initialize);
         this.parent.off(events.renderFileManager, this.render);
+        this.parent.off(events.bindCssClass, this.setCssClass);
         this.parent.off(events.destroy, this.destroy);
     };
     FileManager.prototype.destroyComponents = function () {

package/src/rich-text-editor/actions/paste-clean-up.d.ts

@@ -14,6 +14,10 @@ export declare class PasteCleanup {
     private dialogRenderObj;
     private popupObj;
     private uploadObj;
+    private dialogObj;
+    private keepRadioButton;
+    private cleanRadioButton;
+    private plainTextRadioButton;
     private inlineNode;
     private blockNode;
     private isNotFromHtml;
@@ -46,6 +50,8 @@ export declare class PasteCleanup {
     private radioRender;
     private selectFormatting;
     private pasteDialog;
+    private updateCss;
+    private setCssClass;
     private destroyDialog;
     private cleanAppleClass;
     private formatting;

package/src/rich-text-editor/actions/paste-clean-up.js

@@ -1,7 +1,7 @@
 import * as events from '../base/constant';
 import { Popup } from '@syncfusion/ej2-popups';
 import { RadioButton } from '@syncfusion/ej2-buttons';
-import { isNullOrUndefined as isNOU, isNullOrUndefined, detach, extend, addClass } from '@syncfusion/ej2-base';
+import { isNullOrUndefined as isNOU, isNullOrUndefined, detach, extend, addClass, removeClass } from '@syncfusion/ej2-base';
 import { getUniqueID, Browser } from '@syncfusion/ej2-base';
 import { CLS_RTE_PASTE_KEEP_FORMAT, CLS_RTE_PASTE_REMOVE_FORMAT, CLS_RTE_PASTE_PLAIN_FORMAT } from '../base/classes';
 import { CLS_RTE_PASTE_OK, CLS_RTE_PASTE_CANCEL, CLS_RTE_DIALOG_MIN_HEIGHT } from '../base/classes';
@@ -42,6 +42,7 @@ var PasteCleanup = /** @class */ (function () {
             return;
         }
         this.parent.on(events.pasteClean, this.pasteClean, this);
+        this.parent.on(events.bindCssClass, this.setCssClass, this);
         this.parent.on(events.destroy, this.destroy, this);
     };
     PasteCleanup.prototype.destroy = function () {
@@ -52,6 +53,7 @@ var PasteCleanup = /** @class */ (function () {
             return;
         }
         this.parent.off(events.pasteClean, this.pasteClean);
+        this.parent.off(events.bindCssClass, this.setCssClass);
         this.parent.off(events.destroy, this.destroy);
     };
     PasteCleanup.prototype.pasteClean = function (e) {
@@ -231,7 +233,7 @@ var PasteCleanup = /** @class */ (function () {
             id: this.parent.element.id + '_upload', attrs: { type: 'File', name: 'UploadFiles' }
         });
         var offsetY = this.parent.iframeSettings.enable ? -50 : -90;
-        var popupObj = new Popup(popupEle, {
+        this.popupObj = new Popup(popupEle, {
             relateTo: imgElem,
             height: '85px',
             width: '300px',
@@ -244,19 +246,22 @@ var PasteCleanup = /** @class */ (function () {
             // eslint-disable-next-line
             close: function (event) {
                 _this.parent.isBlur = false;
-                popupObj.destroy();
-                detach(popupObj.element);
+                _this.popupObj.destroy();
+                detach(_this.popupObj.element);
             }
         });
-        popupObj.element.style.display = 'none';
-        addClass([popupObj.element], [classes.CLS_POPUP_OPEN, classes.CLS_RTE_UPLOAD_POPUP]);
+        this.popupObj.element.style.display = 'none';
+        addClass([this.popupObj.element], [classes.CLS_POPUP_OPEN, classes.CLS_RTE_UPLOAD_POPUP]);
+        if (!isNOU(this.parent.cssClass)) {
+            addClass([this.popupObj.element], this.parent.cssClass);
+        }
         var timeOut = fileList.size > 1000000 ? 300 : 100;
         setTimeout(function () {
-            _this.refreshPopup(imgElem, popupObj);
+            _this.refreshPopup(imgElem, _this.popupObj);
         }, timeOut);
         var rawFile;
         var beforeUploadArgs;
-        var uploadObj = new Uploader({
+        this.uploadObj = new Uploader({
             asyncSettings: {
                 saveUrl: this.parent.insertImageSettings.saveUrl,
                 removeUrl: this.parent.insertImageSettings.removeUrl
@@ -266,7 +271,7 @@ var PasteCleanup = /** @class */ (function () {
             allowedExtensions: this.parent.insertImageSettings.allowedTypes.toString(),
             success: function (e) {
                 setTimeout(function () {
-                    _this.popupClose(popupObj, uploadObj, imgElem, e);
+                    _this.popupClose(_this.popupObj, _this.uploadObj, imgElem, e);
                 }, 900);
             },
             uploading: function (e) {
@@ -276,8 +281,8 @@ var PasteCleanup = /** @class */ (function () {
                             if (!isNullOrUndefined(imgElem)) {
                                 detach(imgElem);
                             }
-                            if (!isNullOrUndefined(popupObj.element)) {
-                                detach(popupObj.element);
+                            if (!isNullOrUndefined(_this.popupObj.element)) {
+                                detach(_this.popupObj.element);
                             }
                         }
                         else {
@@ -297,11 +302,11 @@ var PasteCleanup = /** @class */ (function () {
                         }
                         _this.toolbarEnableDisable(true);
                         /* eslint-disable */
-                        uploadObj.currentRequestHeader = beforeUploadArgs.currentRequest ?
-                            beforeUploadArgs.currentRequest : uploadObj.currentRequestHeader;
-                        uploadObj.customFormDatas = beforeUploadArgs.customFormData && beforeUploadArgs.customFormData.length > 0 ?
-                            beforeUploadArgs.customFormData : uploadObj.customFormDatas;
-                        uploadObj.uploadFiles(rawFile, null);
+                        _this.uploadObj.currentRequestHeader = beforeUploadArgs.currentRequest ?
+                            beforeUploadArgs.currentRequest : _this.uploadObj.currentRequestHeader;
+                        _this.uploadObj.customFormDatas = beforeUploadArgs.customFormData && beforeUploadArgs.customFormData.length > 0 ?
+                            beforeUploadArgs.customFormData : _this.uploadObj.customFormDatas;
+                        _this.uploadObj.uploadFiles(rawFile, null);
                         /* eslint-enable */
                     });
                 }
@@ -313,7 +318,7 @@ var PasteCleanup = /** @class */ (function () {
             // eslint-disable-next-line
             failure: function (e) {
                 setTimeout(function () {
-                    _this.uploadFailure(imgElem, uploadObj, popupObj, e);
+                    _this.uploadFailure(imgElem, _this.uploadObj, _this.popupObj, e);
                 }, 900);
             },
             canceling: function () {
@@ -322,7 +327,7 @@ var PasteCleanup = /** @class */ (function () {
                     detach(imgElem.nextSibling);
                 }
                 detach(imgElem);
-                popupObj.close();
+                _this.popupObj.close();
             },
             selected: function (e) {
                 e.cancel = true;
@@ -336,10 +341,10 @@ var PasteCleanup = /** @class */ (function () {
                     detach(imgElem.nextSibling);
                 }
                 detach(imgElem);
-                popupObj.close();
+                _this.popupObj.close();
             }
         });
-        uploadObj.appendTo(popupObj.element.childNodes[0]);
+        this.uploadObj.appendTo(this.popupObj.element.childNodes[0]);
         /* eslint-disable */
         var fileData = [{
                 name: fileList.name,
@@ -349,13 +354,13 @@ var PasteCleanup = /** @class */ (function () {
                 validationMessages: { minSize: "", maxSize: "" },
                 statusCode: '1'
             }];
-        uploadObj.createFileList(fileData);
-        uploadObj.filesData.push(fileData[0]);
+        this.uploadObj.createFileList(fileData);
+        this.uploadObj.filesData.push(fileData[0]);
         /* eslint-enable */
         rawFile = fileData;
-        uploadObj.upload(fileData);
-        popupObj.element.getElementsByClassName('e-file-select-wrap')[0].style.display = 'none';
-        detach(popupObj.element.querySelector('.e-rte-dialog-upload .e-file-select-wrap'));
+        this.uploadObj.upload(fileData);
+        this.popupObj.element.getElementsByClassName('e-file-select-wrap')[0].style.display = 'none';
+        detach(this.popupObj.element.querySelector('.e-rte-dialog-upload .e-file-select-wrap'));
     };
     PasteCleanup.prototype.uploadFailure = function (imgElem, uploadObj, popupObj, e) {
         this.parent.inputElement.contentEditable = 'true';
@@ -448,19 +453,19 @@ var PasteCleanup = /** @class */ (function () {
         }
     };
     PasteCleanup.prototype.radioRender = function () {
-        var keepRadioButton = new RadioButton({ label: this.i10n.getConstant('keepFormat'),
+        this.keepRadioButton = new RadioButton({ label: this.i10n.getConstant('keepFormat'),
             name: 'pasteOption', checked: true });
-        keepRadioButton.isStringTemplate = true;
+        this.keepRadioButton.isStringTemplate = true;
         var keepFormatElement = this.parent.element.querySelector('#keepFormating');
-        keepRadioButton.appendTo(keepFormatElement);
-        var cleanRadioButton = new RadioButton({ label: this.i10n.getConstant('cleanFormat'), name: 'pasteOption' });
-        cleanRadioButton.isStringTemplate = true;
+        this.keepRadioButton.appendTo(keepFormatElement);
+        this.cleanRadioButton = new RadioButton({ label: this.i10n.getConstant('cleanFormat'), name: 'pasteOption' });
+        this.cleanRadioButton.isStringTemplate = true;
         var cleanFormatElement = this.parent.element.querySelector('#cleanFormat');
-        cleanRadioButton.appendTo(cleanFormatElement);
-        var plainTextRadioButton = new RadioButton({ label: this.i10n.getConstant('plainText'), name: 'pasteOption' });
-        plainTextRadioButton.isStringTemplate = true;
+        this.cleanRadioButton.appendTo(cleanFormatElement);
+        this.plainTextRadioButton = new RadioButton({ label: this.i10n.getConstant('plainText'), name: 'pasteOption' });
+        this.plainTextRadioButton.isStringTemplate = true;
         var plainTextElement = this.parent.element.querySelector('#plainTextFormat');
-        plainTextRadioButton.appendTo(plainTextElement);
+        this.plainTextRadioButton.appendTo(plainTextElement);
     };
     PasteCleanup.prototype.selectFormatting = function (value, args, keepChecked, cleanChecked) {
         if (keepChecked) {
@@ -481,15 +486,15 @@ var PasteCleanup = /** @class */ (function () {
             buttons: [
                 {
                     click: function () {
-                        if (!dialog.isDestroyed) {
+                        if (!_this.dialogObj.isDestroyed) {
                             var keepChecked = _this.parent.element.querySelector('#keepFormating').checked;
                             var cleanChecked = _this.parent.element.querySelector('#cleanFormat').checked;
-                            dialog.hide();
+                            _this.dialogObj.hide();
                             _this.parent.height = isHeight ? preRTEHeight : _this.parent.height;
                             isHeight = false;
-                            var argument = dialog;
+                            var argument = _this.dialogObj;
                             _this.dialogRenderObj.close(argument);
-                            dialog.destroy();
+                            _this.dialogObj.destroy();
                             _this.selectFormatting(value, args, keepChecked, cleanChecked);
                         }
                     },
@@ -501,13 +506,13 @@ var PasteCleanup = /** @class */ (function () {
                 },
                 {
                     click: function () {
-                        if (!dialog.isDestroyed) {
-                            dialog.hide();
+                        if (!_this.dialogObj.isDestroyed) {
+                            _this.dialogObj.hide();
                             _this.parent.height = isHeight ? preRTEHeight : _this.parent.height;
                             isHeight = false;
-                            var args_1 = dialog;
+                            var args_1 = _this.dialogObj;
                             _this.dialogRenderObj.close(args_1);
-                            dialog.destroy();
+                            _this.dialogObj.destroy();
                         }
                     },
                     buttonModel: {
@@ -530,7 +535,7 @@ var PasteCleanup = /** @class */ (function () {
             isModal: true,
             visible: false
         };
-        var dialog = this.dialogRenderObj.render(dialogModel);
+        this.dialogObj = this.dialogRenderObj.render(dialogModel);
         var rteDialogWrapper = this.parent.element.querySelector('#' + this.parent.getID()
             + '_pasteCleanupDialog');
         if (rteDialogWrapper !== null && rteDialogWrapper.innerHTML !== '') {
@@ -542,15 +547,42 @@ var PasteCleanup = /** @class */ (function () {
             });
             this.parent.element.appendChild(rteDialogWrapper);
         }
-        dialog.appendTo(rteDialogWrapper);
+        this.dialogObj.appendTo(rteDialogWrapper);
         this.radioRender();
         /* eslint-disable */
-        if (this.parent.element.offsetHeight < parseInt(dialog.height.split('px')[0], null)) {
-            this.parent.height = parseInt(dialog.height.split('px')[0], null) + 40;
+        if (this.parent.element.offsetHeight < parseInt(this.dialogObj.height.split('px')[0], null)) {
+            this.parent.height = parseInt(this.dialogObj.height.split('px')[0], null) + 40;
             /* eslint-enable */
             isHeight = true;
         }
-        dialog.show();
+        this.dialogObj.show();
+        this.setCssClass({ cssClass: this.parent.cssClass });
+    };
+    PasteCleanup.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() });
+            }
+        }
+    };
+    PasteCleanup.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.dialogObj, e);
+        this.updateCss(this.uploadObj, e);
+        this.updateCss(this.plainTextRadioButton, e);
+        this.updateCss(this.cleanRadioButton, e);
+        this.updateCss(this.keepRadioButton, e);
     };
     PasteCleanup.prototype.destroyDialog = function (rteDialogWrapper) {
         var rteDialogContainer = this.parent.element.querySelector('.e-dlg-container');