@syncfusion/ej2-richtexteditor 20.1.59 → 20.2.36

package/dist/global/index.d.ts

@@ -1,6 +1,6 @@
 /*!
 *  filename: index.d.ts
-*  version : 20.1.59
+*  version : 20.2.36
 *  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/helpers/e2e/index.js

@@ -1,6 +1,8 @@
-"use strict";
-function __export(m) {
-    for (var p in m) if (!exports.hasOwnProperty(p)) exports[p] = m[p];
-}
-Object.defineProperty(exports, "__esModule", { value: true });
-__export(require("./rte-helper"));
+define(["require", "exports", "./rte-helper"], function (require, exports, rte_helper_1) {
+    "use strict";
+    function __export(m) {
+        for (var p in m) if (!exports.hasOwnProperty(p)) exports[p] = m[p];
+    }
+    Object.defineProperty(exports, "__esModule", { value: true });
+    __export(rte_helper_1);
+});

package/helpers/e2e/rte-helper.js

@@ -1,65 +1,81 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-const e2e_1 = require("@syncfusion/ej2-base/helpers/e2e");
-class RichTextEditorHelper extends e2e_1.TestHelper {
-    constructor(id, wrapperFn) {
-        super();
-        this.id = id;
-        if (wrapperFn !== undefined) {
-            this.wrapperFn = wrapperFn;
+var __extends = (this && this.__extends) || (function () {
+    var extendStatics = function (d, b) {
+        extendStatics = Object.setPrototypeOf ||
+            ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
+            function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };
+        return extendStatics(d, b);
+    };
+    return function (d, b) {
+        extendStatics(d, b);
+        function __() { this.constructor = d; }
+        d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
+    };
+})();
+define(["require", "exports", "@syncfusion/ej2-base/helpers/e2e"], function (require, exports, e2e_1) {
+    "use strict";
+    Object.defineProperty(exports, "__esModule", { value: true });
+    var RichTextEditorHelper = (function (_super) {
+        __extends(RichTextEditorHelper, _super);
+        function RichTextEditorHelper(id, wrapperFn) {
+            var _this = _super.call(this) || this;
+            _this.id = id;
+            if (wrapperFn !== undefined) {
+                _this.wrapperFn = wrapperFn;
+            }
+            return _this;
         }
-        return this;
-    }
-    getElement() {
-        return this.selector('#' + this.id);
-    }
-    getQuickToolbarElement() {
-        return this.selector(".e-rte-quick-popup");
-    }
-    getToolbar() {
-        return this.selector('#' + this.id + "_toolbar");
-    }
-    getCharCount() {
-        return this.selector(".e-rte-character-count");
-    }
-    getTableDialog() {
-        return this.selector('#' + this.id + "_tabledialog");
-    }
-    getImageDialog() {
-        return this.selector('#' + this.id + "_defaultRTE_image");
-    }
-    getLinkDialog() {
-        return this.selector('#' + this.id + "_rtelink");
-    }
-    getFontNamePopup() {
-        return this.selector('#' + this.id + "_toolbar_FontName-popup");
-    }
-    getFontSizePopup() {
-        return this.selector('#' + this.id + "_toolbar_FontSize-popup");
-    }
-    getFontColorPopup() {
-        return this.selector('#' + this.id + "toolbar_FontColor-popup");
-    }
-    getBackgroundColorPopup() {
-        return this.selector('#' + this.id + "toolbar_BackgroundColor-popup");
-    }
-    getFormatPopup() {
-        return this.selector('#' + this.id + "toolbar_Formats-popup");
-    }
-    getAlignmentPopup() {
-        return this.selector('#' + this.id + "toolbar_Alignments-popup");
-    }
-    getContent() {
-        return this.selector(".e-rte-content");
-    }
-    getModel(property) {
-        this.getModel(property);
-    }
-    setModel(property, value) {
-        this.setModel(property, value);
-    }
-    invoke(fName, args) {
-        this.invoke(fName, args);
-    }
-}
-exports.RichTextEditorHelper = RichTextEditorHelper;
+        RichTextEditorHelper.prototype.getElement = function () {
+            return this.selector('#' + this.id);
+        };
+        RichTextEditorHelper.prototype.getQuickToolbarElement = function () {
+            return this.selector(".e-rte-quick-popup");
+        };
+        RichTextEditorHelper.prototype.getToolbar = function () {
+            return this.selector('#' + this.id + "_toolbar");
+        };
+        RichTextEditorHelper.prototype.getCharCount = function () {
+            return this.selector(".e-rte-character-count");
+        };
+        RichTextEditorHelper.prototype.getTableDialog = function () {
+            return this.selector('#' + this.id + "_tabledialog");
+        };
+        RichTextEditorHelper.prototype.getImageDialog = function () {
+            return this.selector('#' + this.id + "_defaultRTE_image");
+        };
+        RichTextEditorHelper.prototype.getLinkDialog = function () {
+            return this.selector('#' + this.id + "_rtelink");
+        };
+        RichTextEditorHelper.prototype.getFontNamePopup = function () {
+            return this.selector('#' + this.id + "_toolbar_FontName-popup");
+        };
+        RichTextEditorHelper.prototype.getFontSizePopup = function () {
+            return this.selector('#' + this.id + "_toolbar_FontSize-popup");
+        };
+        RichTextEditorHelper.prototype.getFontColorPopup = function () {
+            return this.selector('#' + this.id + "toolbar_FontColor-popup");
+        };
+        RichTextEditorHelper.prototype.getBackgroundColorPopup = function () {
+            return this.selector('#' + this.id + "toolbar_BackgroundColor-popup");
+        };
+        RichTextEditorHelper.prototype.getFormatPopup = function () {
+            return this.selector('#' + this.id + "toolbar_Formats-popup");
+        };
+        RichTextEditorHelper.prototype.getAlignmentPopup = function () {
+            return this.selector('#' + this.id + "toolbar_Alignments-popup");
+        };
+        RichTextEditorHelper.prototype.getContent = function () {
+            return this.selector(".e-rte-content");
+        };
+        RichTextEditorHelper.prototype.getModel = function (property) {
+            this.getModel(property);
+        };
+        RichTextEditorHelper.prototype.setModel = function (property, value) {
+            this.setModel(property, value);
+        };
+        RichTextEditorHelper.prototype.invoke = function (fName, args) {
+            this.invoke(fName, args);
+        };
+        return RichTextEditorHelper;
+    }(e2e_1.TestHelper));
+    exports.RichTextEditorHelper = RichTextEditorHelper;
+});

package/package.json

@@ -1,8 +1,8 @@
 {
   "_from": "@syncfusion/ej2-richtexteditor@*",
-  "_id": "@syncfusion/ej2-richtexteditor@20.1.58",
+  "_id": "@syncfusion/ej2-richtexteditor@19.10.1",
   "_inBundle": false,
-  "_integrity": "sha512-qxEXYEGIaR0st9tRaWcOOpDp4IexL/rHxDx6XL/BnRjTE56hfHyn12zKW9i8FcCA2wFfDGRA8NUWcfqplZGtpg==",
+  "_integrity": "sha512-nRcvTjn8CJx6Jc+BsAL5C8zGWA/jIfS4UA+7uCE0CGxNvW74otn0hU1phz61DYDvsmWP/oVREomhY7do8ADZqg==",
   "_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.58.tgz",
-  "_shasum": "f3ebd6ff60aea3ee6079960ba07c001bd2bf12a4",
+  "_resolved": "http://nexus.syncfusion.com/repository/ej2-release/@syncfusion/ej2-richtexteditor/-/ej2-richtexteditor-19.10.1.tgz",
+  "_shasum": "2368624db68c024864a84641dc195e8bb602dedd",
   "_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.57",
-    "@syncfusion/ej2-buttons": "~20.1.55",
-    "@syncfusion/ej2-filemanager": "~20.1.59",
-    "@syncfusion/ej2-inputs": "~20.1.59",
-    "@syncfusion/ej2-navigations": "~20.1.58",
-    "@syncfusion/ej2-popups": "~20.1.58",
-    "@syncfusion/ej2-splitbuttons": "~20.1.57"
+    "@syncfusion/ej2-base": "~20.2.36",
+    "@syncfusion/ej2-buttons": "~20.2.36",
+    "@syncfusion/ej2-filemanager": "~20.2.36",
+    "@syncfusion/ej2-inputs": "~20.2.36",
+    "@syncfusion/ej2-navigations": "~20.2.36",
+    "@syncfusion/ej2-popups": "~20.2.36",
+    "@syncfusion/ej2-splitbuttons": "~20.2.36"
   },
   "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.59",
+  "version": "20.2.36",
   "sideEffects": false
 }

package/src/common/util.js

@@ -2,7 +2,6 @@
  * Defines common util methods used by Rich Text Editor.
  */
 import { isNullOrUndefined, Browser, createElement, detach } from '@syncfusion/ej2-base';
-import * as classes from '../rich-text-editor/base/classes';
 var inlineNode = ['a', 'abbr', 'acronym', 'audio', 'b', 'bdi', 'bdo', 'big', 'br', 'button',
     'canvas', 'cite', 'code', 'data', 'datalist', 'del', 'dfn', 'em', 'embed', 'font', 'i', 'iframe', 'img', 'input',
     'ins', 'kbd', 'label', 'map', 'mark', 'meter', 'noscript', 'object', 'output', 'picture', 'progress',
@@ -95,18 +94,18 @@ export function updateTextNode(value) {
                     tdElm[j].style.removeProperty('border');
                 }
             }
-            if (!tableElm[i].classList.contains(classes.CLS_TABLE)) {
-                tableElm[i].classList.add(classes.CLS_TABLE);
+            if (!tableElm[i].classList.contains('e-rte-table')) {
+                tableElm[i].classList.add('e-rte-table');
             }
         }
         var imageElm = resultElm.querySelectorAll('img');
         for (var i = 0; i < imageElm.length; i++) {
-            if (!imageElm[i].classList.contains(classes.CLS_RTE_IMAGE)) {
-                imageElm[i].classList.add(classes.CLS_RTE_IMAGE);
+            if (!imageElm[i].classList.contains('e-rte-image')) {
+                imageElm[i].classList.add('e-rte-image');
             }
-            if (!(imageElm[i].classList.contains(classes.CLS_IMGINLINE) ||
-                imageElm[i].classList.contains(classes.CLS_IMGBREAK))) {
-                imageElm[i].classList.add(classes.CLS_IMGINLINE);
+            if (!(imageElm[i].classList.contains('e-imginline') ||
+                imageElm[i].classList.contains('e-imgbreak'))) {
+                imageElm[i].classList.add('e-imginline');
             }
         }
     }

package/src/editor-manager/plugin/inserthtml.d.ts

@@ -12,6 +12,7 @@ export declare class InsertHtml {
 
      */
     static inlineNode: string[];
+    static contentsDeleted: boolean;
     static Insert(docElement: Document, insertNode: Node | string, editNode?: Element, isExternal?: boolean): void;
     private static pasteInsertHTML;
     private static placeCursorEnd;

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

@@ -252,7 +252,9 @@ var InsertHtml = /** @class */ (function () {
             var isPreviousInlineElem = void 0;
             var paraElm = void 0;
             var previousParent = void 0;
-            range.deleteContents();
+            if (!this.contentsDeleted) {
+                range.deleteContents();
+            }
             while (node.firstChild) {
                 if (node.firstChild.nodeName === '#text' && node.firstChild.textContent.trim() === '') {
                     detach(node.firstChild);
@@ -380,9 +382,28 @@ var InsertHtml = /** @class */ (function () {
                 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) {
+                if ((currentNode.nodeName === 'BR' || currentNode.nodeName === 'HR' ||
+                    (currentNode.nodeName === '#text' && !isNOU(currentNode.parentElement) && currentNode.parentElement.nodeName === 'LI')) &&
+                    (!isNOU(currentNode.parentElement) && currentNode.parentElement.textContent.trim().length === 0)) {
+                    splitedElm = currentNode;
+                    if (currentNode.parentElement.nodeName === 'LI' && !isNOU(currentNode.nextSibling) &&
+                        currentNode.nextSibling.nodeName === 'BR') {
+                        detach(currentNode.nextSibling);
+                    }
+                }
+                else if (currentNode.nodeName === '#text' && !isNOU(currentNode.parentElement) &&
+                    currentNode.parentElement.nodeName === 'LI' && currentNode.parentElement.textContent.trim().length > 0) {
                     splitedElm = currentNode;
+                    if (currentNode.parentElement.nodeName === 'LI' && !isNOU(currentNode.nextSibling) &&
+                        currentNode.nextSibling.nodeName === 'BR') {
+                        detach(currentNode.nextSibling);
+                    }
+                    if (!range.collapsed) {
+                        range.deleteContents();
+                    }
+                    range.insertNode(node);
+                    this.contentsDeleted = true;
+                    return;
                 }
                 else {
                     splitedElm = nodeCutter.GetSpliceNode(range, blockNode);
@@ -469,6 +490,7 @@ var InsertHtml = /** @class */ (function () {
         'ins', 'kbd', 'label', 'map', 'mark', 'meter', 'noscript', 'object', 'output', 'picture', 'progress',
         'q', 'ruby', 's', 'samp', 'script', 'select', 'slot', 'small', 'span', 'strong', 'sub', 'sup', 'svg',
         'template', 'textarea', 'time', 'u', 'tt', 'var', 'video', 'wbr'];
+    InsertHtml.contentsDeleted = false;
     return InsertHtml;
 }());
 export { InsertHtml };

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

@@ -559,7 +559,7 @@ var Lists = /** @class */ (function () {
     };
     Lists.prototype.applyLists = function (elements, type, selector, item, e) {
         var isReverse = true;
-        if (this.isRevert(elements, type) && isNOU(item)) {
+        if (this.isRevert(elements, type, item) && isNOU(item)) {
             this.revertList(elements, e);
             this.removeEmptyListElements();
         }
@@ -624,13 +624,14 @@ var Lists = /** @class */ (function () {
             }
         }
     };
-    Lists.prototype.isRevert = function (nodes, tagName) {
+    Lists.prototype.isRevert = function (nodes, tagName, item) {
         var isRevert = true;
         for (var i = 0; i < nodes.length; i++) {
             if (nodes[i].tagName !== 'LI') {
                 return false;
             }
-            if (nodes[i].parentNode.tagName !== tagName) {
+            if (nodes[i].parentNode.tagName !== tagName ||
+                isNOU(item) && nodes[i].parentNode.style.listStyleType !== '') {
                 isRevert = false;
             }
         }
@@ -653,6 +654,12 @@ var Lists = /** @class */ (function () {
                 (nodes[i].tagName === 'LI' && node.tagName === tagName && nodesTemp.indexOf(node) < 0 && item !== null)) {
                 nodesTemp.push(node);
             }
+            if (isNOU(item) && (node.tagName === tagName ||
+                ((node.tagName === 'UL' || node.tagName === 'OL') && node.hasAttribute('style')))) {
+                if (node.hasAttribute('style')) {
+                    node.removeAttribute('style');
+                }
+            }
         }
         for (var j = nodesTemp.length - 1; j >= 0; j--) {
             var h = nodesTemp[j];
@@ -755,7 +762,8 @@ var Lists = /** @class */ (function () {
                 }
             }
             if (element.parentNode.insertBefore(this.closeTag(parentNode.tagName), element),
-                'LI' === parentNode.parentNode.tagName) {
+                'LI' === parentNode.parentNode.tagName || 'OL' === parentNode.parentNode.tagName ||
+                    'UL' === parentNode.parentNode.tagName) {
                 element.parentNode.insertBefore(this.closeTag('LI'), element);
             }
             else {

package/src/editor-manager/plugin/ms-word-clean-up.js

@@ -111,7 +111,7 @@ var MsWordPaste = /** @class */ (function () {
         this.checkVShape(elm);
         var imgElem = elm.querySelectorAll('img');
         for (var i = 0; i < imgElem.length; i++) {
-            if (!isNOU(imgElem[i].getAttribute('v:shapes')) && imgElem[i].getAttribute('v:shapes').indexOf('Picture') < 0) {
+            if (!isNOU(imgElem[i].getAttribute('v:shapes')) && imgElem[i].getAttribute('v:shapes').indexOf('Picture') < 0 && imgElem[i].getAttribute('v:shapes').indexOf('Image') < 0) {
                 detach(imgElem[i]);
             }
         }

package/src/markdown-parser/base/constant.d.ts

@@ -31,3 +31,9 @@ export declare const CLEAR_COMMAND: string;
  * @hidden
  */
 export declare const MD_TABLE: string;
+/**
+ * insertText plugin events
+ *
+ * @hidden
+ */
+export declare const INSERT_TEXT_COMMAND: string;

package/src/markdown-parser/base/constant.js

@@ -31,3 +31,9 @@ export var CLEAR_COMMAND = 'clear-commands';
  * @hidden
  */
 export var MD_TABLE = 'insert-table';
+/**
+ * insertText plugin events
+ *
+ * @hidden
+ */
+export var INSERT_TEXT_COMMAND = 'insert-text';

package/src/markdown-parser/base/markdown-parser.d.ts

@@ -9,6 +9,7 @@ import { UndoRedoCommands } from './../plugin/undo';
 import { MDLink } from './../plugin/link';
 import { MDTable } from './../plugin/table';
 import { ClearFormat } from './../plugin/clearformat';
+import { MDInsertText } from './../plugin/insert-text';
 /**
  * MarkdownParser internal component
  *
@@ -35,6 +36,7 @@ export declare class MarkdownParser {
     linkObj: MDLink;
     tableObj: MDTable;
     clearObj: ClearFormat;
+    insertTextObj: MDInsertText;
     /**
      * Constructor for creating the component
      *

package/src/markdown-parser/base/markdown-parser.js

@@ -11,6 +11,7 @@ import { MDLink } from './../plugin/link';
 import { MDTable } from './../plugin/table';
 import * as EVENTS from './../../common/constant';
 import { ClearFormat } from './../plugin/clearformat';
+import { MDInsertText } from './../plugin/insert-text';
 /**
  * MarkdownParser internal component
  *
@@ -37,6 +38,7 @@ var MarkdownParser = /** @class */ (function () {
         this.linkObj = new MDLink(this);
         this.tableObj = new MDTable({ parent: this, syntaxTag: ({ Formats: this.formatTags, List: this.listTags }) });
         this.clearObj = new ClearFormat(this);
+        this.insertTextObj = new MDInsertText(this);
         this.wireEvents();
     }
     MarkdownParser.prototype.initialize = function () {
@@ -103,6 +105,10 @@ var MarkdownParser = /** @class */ (function () {
             case 'clear':
                 this.observer.notify(CONSTANT.CLEAR_COMMAND, { subCommand: value, event: event, callBack: callBack });
                 break;
+            case 'inserttext':
+                this.observer.notify(CONSTANT.INSERT_TEXT_COMMAND, { subCommand: value, event: event, callBack: callBack,
+                    value: { text: exeValue } });
+                break;
         }
     };
     return MarkdownParser;

package/src/markdown-parser/base/types.d.ts

@@ -4,4 +4,4 @@
  * @hidden
 
  */
-export declare type MarkdownExecCommand = 'Indents' | 'Lists' | 'Formats' | 'Alignments' | 'Style' | 'Effects' | 'Casing' | 'Actions' | 'table' | 'Links' | 'Images' | 'Clear';
+export declare type MarkdownExecCommand = 'Indents' | 'Lists' | 'Formats' | 'Alignments' | 'Style' | 'Effects' | 'Casing' | 'Actions' | 'table' | 'Links' | 'Images' | 'Clear' | 'Inserttext';

package/src/markdown-parser/plugin/insert-text.d.ts

@@ -0,0 +1,22 @@
+import { MarkdownParser } from './../base/markdown-parser';
+/**
+ * Link internal component
+ *
+ * @hidden
+
+ */
+export declare class MDInsertText {
+    private parent;
+    private selection;
+    /**
+     * Constructor for creating the insert text plugin
+     *
+     * @param {MarkdownParser} parent - specifies the parent element
+     * @hidden
+
+     */
+    constructor(parent: MarkdownParser);
+    private addEventListener;
+    private InsertTextExec;
+    private restore;
+}

package/src/markdown-parser/plugin/insert-text.js

@@ -0,0 +1,51 @@
+import * as CONSTANT from './../base/constant';
+/**
+ * Link internal component
+ *
+ * @hidden
+
+ */
+var MDInsertText = /** @class */ (function () {
+    /**
+     * Constructor for creating the insert text plugin
+     *
+     * @param {MarkdownParser} parent - specifies the parent element
+     * @hidden
+
+     */
+    function MDInsertText(parent) {
+        this.parent = parent;
+        this.selection = this.parent.markdownSelection;
+        this.addEventListener();
+    }
+    MDInsertText.prototype.addEventListener = function () {
+        this.parent.observer.on(CONSTANT.INSERT_TEXT_COMMAND, this.InsertTextExec, this);
+    };
+    MDInsertText.prototype.InsertTextExec = function (e) {
+        var textArea = this.parent.element;
+        textArea.focus();
+        var start = textArea.selectionStart;
+        var end = textArea.selectionEnd;
+        var text = e.value.text;
+        var startOffset = start + text.length;
+        var endOffset = end + text.length;
+        textArea.value = textArea.value.substr(0, start)
+            + text + textArea.value.substr(end, textArea.value.length);
+        this.parent.markdownSelection.setSelection(textArea, startOffset, endOffset);
+        this.restore(textArea, startOffset, endOffset, e);
+    };
+    MDInsertText.prototype.restore = function (textArea, start, end, event) {
+        this.selection.save(start, end);
+        this.selection.restore(textArea);
+        if (event && event.callBack) {
+            event.callBack({
+                requestType: event.subCommand,
+                selectedText: this.selection.getSelectedText(textArea),
+                editorMode: 'Markdown',
+                event: event.event
+            });
+        }
+    };
+    return MDInsertText;
+}());
+export { MDInsertText };

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

@@ -47,10 +47,18 @@ var ColorPickerInput = /** @class */ (function () {
                         var fontNode = _this.parent.createElement('input');
                         fontNode.id = targetID;
                         fontNode.classList.add(classes.CLS_FONT_COLOR_TARGET);
+                        if (!isNullOrUndefined(_this.parent.cssClass)) {
+                            var allClassName = _this.parent.cssClass.split(' ');
+                            for (var i = 0; i < allClassName.length; i++) {
+                                if (allClassName[i].trim() !== '') {
+                                    fontNode.classList.add(allClassName[i]);
+                                }
+                            }
+                        }
                         document.body.appendChild(fontNode);
                         options = {
                             cssClass: _this.tools[item.toLocaleLowerCase()].icon
-                                + ' ' + classes.CLS_RTE_ELEMENTS + ' ' + classes.CLS_ICONS,
+                                + ' ' + classes.CLS_RTE_ELEMENTS + ' ' + classes.CLS_ICONS + ' ' + _this.parent.cssClass,
                             value: _this.tools[item.toLocaleLowerCase()].value,
                             command: _this.tools[item.toLocaleLowerCase()].command,
                             subCommand: _this.tools[item.toLocaleLowerCase()].subCommand,
@@ -66,10 +74,18 @@ var ColorPickerInput = /** @class */ (function () {
                         var backNode = _this.parent.createElement('input');
                         backNode.id = targetID;
                         backNode.classList.add(classes.CLS_BACKGROUND_COLOR_TARGET);
+                        if (!isNullOrUndefined(_this.parent.cssClass)) {
+                            var allClassName = _this.parent.cssClass.split(' ');
+                            for (var i = 0; i < allClassName.length; i++) {
+                                if (allClassName[i].trim() !== '') {
+                                    backNode.classList.add(allClassName[i]);
+                                }
+                            }
+                        }
                         document.body.appendChild(backNode);
                         options = {
                             cssClass: _this.tools[item.toLocaleLowerCase()].icon
-                                + ' ' + classes.CLS_RTE_ELEMENTS + ' ' + classes.CLS_ICONS,
+                                + ' ' + classes.CLS_RTE_ELEMENTS + ' ' + classes.CLS_ICONS + ' ' + _this.parent.cssClass,
                             value: _this.tools[item.toLocaleLowerCase()].value,
                             command: _this.tools[item.toLocaleLowerCase()].command,
                             subCommand: _this.tools[item.toLocaleLowerCase()].subCommand,
@@ -142,8 +158,8 @@ var ColorPickerInput = /** @class */ (function () {
                 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() });
+                colorPickerObj.setProperties({ cssClass: (colorPickerObj.cssClass.replace(e.oldCssClass, '').replace('  ', ' ').trim() + ' ' + e.cssClass).trim() });
+                dropDownObj.setProperties({ cssClass: (dropDownObj.cssClass.replace(e.oldCssClass, '').replace('  ', ' ').trim() + ' ' + e.cssClass).trim() });
             }
         }
     };

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

@@ -17,9 +17,10 @@ var Resize = /** @class */ (function () {
         this.parent.on(events.destroy, this.destroy, this);
     };
     Resize.prototype.renderResizable = function () {
+        var enableRtlClass = (this.parent.enableRtl) ? classes.CLS_RTE_RES_WEST : classes.CLS_RTE_RES_EAST;
         this.resizer = this.parent.createElement('div', {
             id: this.parent.getID() + '-resizable', className: 'e-icons'
-                + ' ' + classes.CLS_RTE_RES_HANDLE + ' ' + classes.CLS_RTE_RES_EAST
+                + ' ' + classes.CLS_RTE_RES_HANDLE + ' ' + enableRtlClass
         });
         this.parent.element.classList.add(classes.CLS_RTE_RES_CNT);
         this.parent.element.appendChild(this.resizer);
@@ -52,12 +53,12 @@ var Resize = /** @class */ (function () {
         var boundRect = this.parent.element.getBoundingClientRect();
         if (this.isMouseEvent(e)) {
             this.parent.element.style.height = e.clientY - boundRect.top + 'px';
-            this.parent.element.style.width = e.clientX - boundRect.left + 'px';
+            this.parent.element.style.width = (!this.parent.enableRtl) ? e.clientX - boundRect.left + 'px' : boundRect.right - e.clientX + 'px';
         }
         else {
             var eventType = Browser.info.name !== 'msie' ? e.touches[0] : e;
             this.parent.element.style.height = eventType.clientY - boundRect.top + 'px';
-            this.parent.element.style.width = eventType.clientX - boundRect.left + 'px';
+            this.parent.element.style.width = (!this.parent.enableRtl) ? e.clientX - boundRect.left + 'px' : boundRect.right - e.clientX + 'px';
         }
         if (!this.parent.toolbarSettings.enable) {
             this.parent.setContentHeight('', false);

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

@@ -105,7 +105,8 @@ var Toolbar = /** @class */ (function () {
             container: ((this.parent.inlineMode.enable) ? 'quick' : 'toolbar'),
             items: this.parent.toolbarSettings.items,
             mode: tBarMode,
-            target: ele
+            target: ele,
+            cssClass: this.parent.cssClass
         });
         if (this.parent.toolbarSettings.type === ToolbarType.Expand) {
             addClass([ele], ['e-rte-tb-mobile']);
@@ -222,7 +223,8 @@ var Toolbar = /** @class */ (function () {
                 container: 'toolbar',
                 items: this.parent.toolbarSettings.items,
                 mode: this.getToolbarMode(),
-                target: this.tbElement
+                target: this.tbElement,
+                cssClass: this.parent.cssClass
             });
             if (!this.parent.inlineMode.enable) {
                 if (this.parent.toolbarSettings.enableFloating) {

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

@@ -541,3 +541,8 @@ export declare const CLS_RTE_FIXED_TB_EXPAND: string;
 
  */
 export declare const CLS_RTE_TB_ENABLED: string;
+/**
+ * @hidden
+
+ */
+export declare const CLS_RTE_RES_WEST: string;