@syncfusion/ej2-richtexteditor 20.1.55 → 20.1.58

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');

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

@@ -105,6 +105,8 @@ export declare class QuickToolbar {
     addEventListener(): void;
     private onKeyDown;
     private onIframeMouseDown;
+    private updateCss;
+    private setCssClass;
     private setRtl;
     /**
      * removeEventListener

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

@@ -46,7 +46,8 @@ var QuickToolbar = /** @class */ (function () {
             popupType: popType,
             toolbarItems: items,
             mode: mode,
-            renderType: type
+            renderType: type,
+            cssClass: this.parent.cssClass
         };
     };
     /**
@@ -357,6 +358,7 @@ var QuickToolbar = /** @class */ (function () {
         this.parent.on(events.destroy, this.destroy, this);
         this.parent.on(events.keyDown, this.onKeyDown, this);
         this.parent.on(events.rtlMode, this.setRtl, this);
+        this.parent.on(events.bindCssClass, this.setCssClass, this);
     };
     QuickToolbar.prototype.onKeyDown = function (e) {
         var args = e.args;
@@ -370,6 +372,24 @@ var QuickToolbar = /** @class */ (function () {
         this.hideQuickToolbars();
         this.hideInlineQTBar();
     };
+    QuickToolbar.prototype.updateCss = function (baseQTObj, e) {
+        if (baseQTObj && e.cssClass) {
+            if (isNullOrUndefined(e.oldCssClass && baseQTObj.quickTBarObj.toolbarObj.cssClass !== e.cssClass)) {
+                baseQTObj.quickTBarObj.toolbarObj.setProperties({ cssClass: (baseQTObj.quickTBarObj.toolbarObj.cssClass + ' ' + e.cssClass).trim() });
+            }
+            else {
+                baseQTObj.quickTBarObj.toolbarObj.setProperties({ cssClass: (baseQTObj.quickTBarObj.toolbarObj.cssClass.replace(e.oldCssClass, '').trim() + ' ' + e.cssClass).trim() });
+            }
+        }
+    };
+    QuickToolbar.prototype.setCssClass = function (e) {
+        var baseQuickToolbarObj = [
+            this.inlineQTBar, this.imageQTBar, this.linkQTBar, this.textQTBar, this.tableQTBar
+        ];
+        for (var i = 0; i < baseQuickToolbarObj.length; i++) {
+            this.updateCss(baseQuickToolbarObj[i], e);
+        }
+    };
     QuickToolbar.prototype.setRtl = function (args) {
         if (this.inlineQTBar) {
             this.inlineQTBar.quickTBarObj.toolbarObj.setProperties({ enableRtl: args.enableRtl });
@@ -378,7 +398,7 @@ var QuickToolbar = /** @class */ (function () {
             this.imageQTBar.quickTBarObj.toolbarObj.setProperties({ enableRtl: args.enableRtl });
         }
         if (this.linkQTBar) {
-            this.imageQTBar.quickTBarObj.toolbarObj.setProperties({ enableRtl: args.enableRtl });
+            this.linkQTBar.quickTBarObj.toolbarObj.setProperties({ enableRtl: args.enableRtl });
         }
     };
     /**
@@ -407,6 +427,7 @@ var QuickToolbar = /** @class */ (function () {
         this.parent.off(events.iframeMouseDown, this.onIframeMouseDown);
         this.parent.off(events.keyDown, this.onKeyDown);
         this.parent.off(events.rtlMode, this.setRtl);
+        this.parent.off(events.bindCssClass, this.setCssClass);
     };
     /**
      * Called internally if any of the property value changed.

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

@@ -161,6 +161,7 @@ export declare class Toolbar {
     protected unWireEvents(): void;
     protected addEventListener(): void;
     protected removeEventListener(): void;
+    private setCssClass;
     private onRefresh;
     /**
      * Called internally if any of the property value changed.

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

@@ -593,6 +593,7 @@ var Toolbar = /** @class */ (function () {
         this.parent.on(events.focusChange, this.focusChangeHandler, this);
         this.parent.on(events.mouseDown, this.mouseDownHandler, this);
         this.parent.on(events.sourceCodeMouseDown, this.mouseDownHandler, this);
+        this.parent.on(events.bindCssClass, this.setCssClass, this);
         if (!this.parent.inlineMode.enable && !isIDevice()) {
             this.parent.on(events.toolbarClick, this.toolbarClickHandler, this);
         }
@@ -616,12 +617,25 @@ var Toolbar = /** @class */ (function () {
         this.parent.off(events.focusChange, this.focusChangeHandler);
         this.parent.off(events.mouseDown, this.mouseDownHandler);
         this.parent.off(events.sourceCodeMouseDown, this.mouseDownHandler);
+        this.parent.off(events.bindCssClass, this.setCssClass);
         if (!this.parent.inlineMode.enable && !isIDevice()) {
             this.parent.off(events.toolbarClick, this.toolbarClickHandler);
         }
     };
+    Toolbar.prototype.setCssClass = function (e) {
+        if (this.toolbarObj && e.cssClass) {
+            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() });
+            }
+        }
+    };
     Toolbar.prototype.onRefresh = function () {
-        this.refreshToolbarOverflow();
+        if (!this.parent.inlineMode.enable) {
+            this.refreshToolbarOverflow();
+        }
         this.parent.setContentHeight('', true);
     };
     /**

package/src/rich-text-editor/base/constant.d.ts

@@ -601,3 +601,13 @@ export declare const showTableDialog: string;
 
  */
 export declare const closeTableDialog: string;
+/**
+ * @hidden
+
+ */
+export declare const bindCssClass: string;
+/**
+ * @hidden
+
+ */
+export declare const blockInlineEmptyNodes: string;

package/src/rich-text-editor/base/constant.js

@@ -601,3 +601,13 @@ export var showTableDialog = 'showTableDialog';
 
  */
 export var closeTableDialog = 'closeTableDialog';
+/**
+ * @hidden
+
+ */
+export var bindCssClass = 'closeTableDialog';
+/**
+ * @hidden
+
+ */
+export var blockInlineEmptyNodes = "address:empty, article:empty, aside:empty, blockquote:empty,\ndetails:empty, dd:empty, div:empty, dl:empty, dt:empty, fieldset:empty, footer:empty,form:empty, h1:empty,\nh2:empty, h3:empty, h4:empty, h5:empty, h6:empty, header:empty, hgroup:empty, hr:empty, li:empty, main:empty, nav:empty,\nnoscript:empty, output:empty, p:empty, pre:empty, section:empty, td:empty, th:empty,\na:empty, abbr:empty, acronym:empty, b:empty, bdi:empty, bdo:empty, big:empty, button:empty,\ncanvas:empty, cite:empty, code:empty, data:empty, datalist:empty, del:empty, dfn:empty, em:empty, font:empty, i:empty, iframe:empty,\nins:empty, kbd:empty, label:empty, map:empty, mark:empty, meter:empty, noscript:empty, object:empty, output:empty, picture:empty, progress:empty,\nq:empty, ruby:empty, s:empty, samp:empty, script:empty, select:empty, slot:empty, small:empty, span:empty, strong:empty, strike:empty, sub:empty, sup:empty, svg:empty,\ntemplate:empty, textarea:empty, time:empty, u:empty, tt:empty, var:empty, wbr:empty";

package/src/rich-text-editor/base/interface.d.ts

@@ -80,6 +80,7 @@ export interface IRichTextEditor extends Component<HTMLElement> {
     enabled?: boolean;
     readonly?: boolean;
     placeholder?: string;
+    cssClass?: string;
     valueContainer?: HTMLTextAreaElement;
     editorMode?: EditorMode;
     enableHtmlEncode?: boolean;
@@ -117,6 +118,7 @@ export interface IRichTextEditor extends Component<HTMLElement> {
     getCollection?(items: string | string[]): string[];
     getRange(): Range;
     getID(): string;
+    getText(): string;
     updateValueData?(): void;
     getBaseToolbarObject(): BaseToolbar;
     setContentHeight(target?: string, isExpand?: boolean): void;
@@ -205,6 +207,13 @@ export interface NotifyArgs {
     touchData?: ITouchData;
     allowedStylePropertiesArray?: string[];
 }
+/**
+ * Provides information about the current and previous cssClass property .
+ */
+export interface ICssClassArgs {
+    cssClass?: string;
+    oldCssClass?: string;
+}
 /**
 
  */
@@ -217,6 +226,8 @@ export interface IItemCollectionArgs {
     selectParent?: Node[];
     /** Defines the URL action details for link element */
     url?: string;
+    /** Defines the Display Text action details for link element */
+    text?: string;
     /** Defines the title of the link action details */
     title?: string;
     /** Defines the target as string for link element */
@@ -458,6 +469,7 @@ export interface IToolbarOptions {
     rteToolbarObj: BaseToolbar;
     enablePersistence: boolean;
     overflowMode?: OverflowMode;
+    cssClass?: string;
 }
 /**
 
@@ -476,6 +488,7 @@ export interface IToolbarRenderOptions {
     items?: (string | IToolbarItems)[];
     mode?: OverflowMode;
     container?: string;
+    cssClass?: string;
 }
 /**
 
@@ -645,6 +658,7 @@ export interface IQuickToolbarOptions {
     mode: OverflowMode;
     renderType: RenderType;
     toolbarItems: (string | IToolbarItems)[];
+    cssClass: string;
 }
 /**
  * Provides information about a BeforeQuickToolbarOpen event.

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

@@ -339,6 +339,35 @@ var RichTextEditor = /** @class */ (function (_super) {
                 this.formatter.saveData();
             }
         }
+        if (this.maxLength !== -1 && !isNOU(tool.command)) {
+            var currentInsertContentLength = 0;
+            if (tool.command === 'Links') {
+                currentInsertContentLength = value.text.length === 0 ?
+                    value.url.length : value.text.length;
+            }
+            if (tool.command === 'Images' || tool.command === 'Table' || tool.command === 'Files') {
+                currentInsertContentLength = 1;
+            }
+            if (tool.command === 'InsertHTML') {
+                if (!isNOU(value)) {
+                    var tempElem = this.createElement('div');
+                    tempElem.innerHTML = value;
+                    currentInsertContentLength = tempElem.textContent.length;
+                }
+                else if (!isNOU(tool.value) && (tool.value === '<hr/>' || tool.value === '<br/>')) {
+                    currentInsertContentLength = 1;
+                }
+            }
+            if (tool.command === 'InsertText') {
+                currentInsertContentLength = value.length;
+            }
+            var currentLength = this.getText().trim().length;
+            var selectionLength = this.getSelection().length;
+            var totalLength = (currentLength - selectionLength) + currentInsertContentLength;
+            if (!(this.maxLength === -1 || totalLength <= this.maxLength)) {
+                return;
+            }
+        }
         this.formatter.editorManager.execCommand(tool.command, tool.subCommand ? tool.subCommand : (value ? value : tool.value), null, null, (value ? value : tool.value), (value ? value : tool.value));
         if (option && option.undo) {
             this.formatter.saveData();
@@ -450,6 +479,7 @@ var RichTextEditor = /** @class */ (function (_super) {
         }
         // eslint-disable-next-line
         (!this.enabled) ? this.unWireEvents() : this.eventInitializer();
+        this.notify(events.bindCssClass, { cssClass: this.cssClass });
         this.renderComplete();
     };
     /**
@@ -570,6 +600,17 @@ var RichTextEditor = /** @class */ (function (_super) {
         this.autoResize();
     };
     RichTextEditor.prototype.keyUp = function (e) {
+        if (this.editorMode === "HTML") {
+            var range = this.getRange();
+            if (Browser.userAgent.indexOf('Firefox') != -1 && range.startContainer.nodeName === '#text' &&
+                range.startContainer.parentElement === this.inputElement && this.enterKey !== 'BR') {
+                var range_1 = this.getRange();
+                var tempElem = this.createElement(this.enterKey);
+                range_1.startContainer.parentElement.insertBefore(tempElem, range_1.startContainer);
+                tempElem.appendChild(range_1.startContainer);
+                this.formatter.editorManager.nodeSelection.setSelectionText(this.contentModule.getDocument(), tempElem.childNodes[0], tempElem.childNodes[0], tempElem.childNodes[0].textContent.length, tempElem.childNodes[0].textContent.length);
+            }
+        }
         this.notify(events.keyUp, { member: 'keyup', args: e });
         if (e.code === 'KeyX' && e.which === 88 && e.keyCode === 88 && e.ctrlKey && (this.inputElement.innerHTML === '' ||
             this.inputElement.innerHTML === '<br>')) {
@@ -722,7 +763,7 @@ var RichTextEditor = /** @class */ (function (_super) {
             requestType: 'Paste'
         };
         this.trigger(events.actionBegin, evenArgs, function (pasteArgs) {
-            var currentLength = _this.getText().trim().length;
+            var currentLength = _this.inputElement.textContent.length;
             var selectionLength = _this.getSelection().length;
             var pastedContentLength = (isNOU(e) || isNOU(e.clipboardData))
                 ? 0 : e.clipboardData.getData('text/plain').length;
@@ -1032,6 +1073,7 @@ var RichTextEditor = /** @class */ (function (_super) {
                 case 'cssClass':
                     this.element.classList.remove(oldProp[prop]);
                     this.setCssClass(newProp[prop]);
+                    this.notify(events.bindCssClass, { cssClass: newProp[prop], oldCssClass: oldProp[prop] });
                     break;
                 case 'enabled':
                     this.setEnable();

package/src/rich-text-editor/base/util.js

@@ -4,6 +4,7 @@
 import { isNullOrUndefined as isNOU, addClass, removeClass, selectAll, createElement } from '@syncfusion/ej2-base';
 import { Browser, detach, SanitizeHtmlHelper, extend } from '@syncfusion/ej2-base';
 import * as classes from '../base/classes';
+import * as CONSTANT from '../base/constant';
 import * as model from '../models/items';
 import { toolsLocale, fontNameLocale, formatsLocale, numberFormatListLocale, bulletFormatListLocale } from '../models/default-locale';
 var undoRedoItems = ['Undo', 'Redo'];
@@ -413,6 +414,10 @@ export function updateTextNode(value, rteObj) {
         var previousParent = void 0;
         var insertElem = void 0;
         while (tempNode.firstChild) {
+            var emptyElem = tempNode.querySelectorAll(CONSTANT.blockInlineEmptyNodes);
+            for (var i = 0; i < emptyElem.length; i++) {
+                emptyElem[i].innerHTML = '<br>';
+            }
             if (rteObj.enterKey !== 'BR' && ((tempNode.firstChild.nodeName === '#text' &&
                 (tempNode.firstChild.textContent.indexOf('\n') < 0 || tempNode.firstChild.textContent.trim() !== '')) ||
                 inlineNode.indexOf(tempNode.firstChild.nodeName.toLocaleLowerCase()) >= 0)) {

package/src/rich-text-editor/formatter/formatter.js

@@ -43,6 +43,21 @@ var Formatter = /** @class */ (function () {
                 || self.contentModule.getPanel() === range.commonAncestorContainer)) {
             return;
         }
+        if (!isNullOrUndefined(args) && self.maxLength !== -1 && !isNullOrUndefined(args.item.command)) {
+            var currentInsertContentLength = 0;
+            if (args.item.command === 'Links') {
+                currentInsertContentLength = value.text.length === 0 ? value.url.length : value.text.length;
+            }
+            if (args.item.command === 'Images' || args.item.command === 'Table' || args.item.command === 'Files') {
+                currentInsertContentLength = 1;
+            }
+            var currentLength = self.getText().trim().length;
+            var selectionLength = self.getSelection().length;
+            var totalLength = (currentLength - selectionLength) + currentInsertContentLength;
+            if (!(self.maxLength === -1 || totalLength <= self.maxLength)) {
+                return;
+            }
+        }
         if (isNullOrUndefined(args)) {
             var action_1 = event.action;
             if (action_1 !== 'tab' && action_1 !== 'enter' && action_1 !== 'space' && action_1 !== 'escape') {

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

@@ -66,7 +66,8 @@ var ContentRender = /** @class */ (function () {
      * @returns {string} - specifies the string element.
      */
     ContentRender.prototype.getText = function () {
-        return this.getEditPanel().innerText;
+        var textString = this.getEditPanel().innerText;
+        return textString === '\n' ? '' : textString;
     };
     /**
      * Set the content div element of RichTextEditor

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

@@ -14,6 +14,9 @@ export declare class Image {
     private inputUrl;
     private captionEle;
     private checkBoxObj;
+    private widthNum;
+    private heightNum;
+    private browseButton;
     private uploadUrl;
     private contentModule;
     private rendererFactory;
@@ -37,6 +40,8 @@ export declare class Image {
     private constructor();
     protected addEventListener(): void;
     protected removeEventListener(): void;
+    private updateCss;
+    private setCssClass;
     private onIframeMouseDown;
     private afterRender;
     private undoStack;