@syncfusion/ej2-richtexteditor 20.1.61 → 20.2.39

package/dist/es6/ej2-richtexteditor.es5.js

@@ -524,11 +524,41 @@ var imageUploadFailed = 'imageUploadFailed';
  * @deprecated
  */
 var imageRemoving = 'imageRemoving';
+/**
+ * @hidden
+ * @deprecated
+ */
+var mediaSelected = 'mediaSelected';
+/**
+ * @hidden
+ * @deprecated
+ */
+var mediaUploading = 'mediaUploading';
+/**
+ * @hidden
+ * @deprecated
+ */
+var mediaUploadSuccess = 'mediaUploadSuccess';
+/**
+ * @hidden
+ * @deprecated
+ */
+var mediaUploadFailed = 'mediaUploadFailed';
+/**
+ * @hidden
+ * @deprecated
+ */
+var mediaRemoving = 'mediaRemoving';
 /**
  * @hidden
  * @deprecated
  */
 var afterImageDelete = 'afterImageDelete';
+/**
+ * @hidden
+ * @deprecated
+ */
+var afterMediaDelete = 'afterMediaaDelete';
 /**
  * @hidden
  * @deprecated
@@ -544,6 +574,11 @@ var xhtmlValidation = 'xhtmlValidation';
  * @deprecated
  */
 var beforeImageUpload = 'beforeImageUpload';
+/**
+ * @hidden
+ * @deprecated
+ */
+var beforeMediaUpload = 'beforeMediaUpload';
 /**
  * @hidden
  * @deprecated
@@ -599,6 +634,11 @@ var showImageDialog = 'showImageDialog';
  * @deprecated
  */
 var closeImageDialog = 'closeImageDialog';
+/**
+ * @hidden
+ * @deprecated
+ */
+var closeAudioDialog = 'closeAudioDialog';
 /**
  * @hidden
  * @deprecated
@@ -618,7 +658,12 @@ var bindCssClass = 'closeTableDialog';
  * @hidden
  * @deprecated
  */
-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";
+var blockEmptyNodes = "address:empty, article:empty, aside:empty, blockquote:empty,\n details:empty, dd:empty, div:empty, dl:empty, dt:empty, fieldset:empty, footer:empty,form:empty, h1:empty,\n h2:empty, h3:empty, h4:empty, h5:empty, h6:empty, header:empty, hgroup:empty, li:empty, main:empty, nav:empty,\n noscript:empty, output:empty, p:empty, pre:empty, section:empty, td:empty, th:empty";
+/**
+ * @hidden
+ * @deprecated
+ */
+var inlineEmptyNodes = "a:empty, abbr:empty, acronym:empty, b:empty, bdi:empty, bdo:empty, big:empty, button:empty,\n canvas:empty, cite:empty, code:empty, data:empty, datalist:empty, del:empty, dfn:empty, em:empty, font:empty, i:empty, iframe:empty,\n ins:empty, kbd:empty, label:empty, map:empty, mark:empty, meter:empty, noscript:empty, object:empty, output:empty, picture:empty, progress:empty,\n q: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,\n template:empty, textarea:empty, time:empty, u:empty, tt:empty, var:empty, wbr:empty";
 
 /**
  * Rich Text Editor classes defined here.
@@ -1163,6 +1208,11 @@ var CLS_RTE_FIXED_TB_EXPAND = 'e-rte-fixed-tb-expand';
  * @deprecated
  */
 var CLS_RTE_TB_ENABLED = 'e-rte-toolbar-enabled';
+/**
+ * @hidden
+ * @deprecated
+ */
+var CLS_RTE_RES_WEST = 'e-south-west';
 
 /**
  * Defines types of Render
@@ -2308,7 +2358,7 @@ function setToolbarStatus(e, isPopToolbar, self) {
                             result = getDropDownValue(formatItems$$1, value, 'subCommand', 'text');
                             dropDown.formatDropDown.content = ('<span style="display: inline-flex;' +
                                 'width:' + e.parent.format.width + '" >' +
-                                '<span class="e-rte-dropdown-btn-text">'
+                                '<span class="e-rte-dropdown-btn-text' + ' ' + e.parent.cssClass + '">'
                                 + (isNullOrUndefined(result) ? formatContent : result) +
                                 '</span></span>');
                             dropDown.formatDropDown.dataBind();
@@ -2338,7 +2388,7 @@ function setToolbarStatus(e, isPopToolbar, self) {
                             e.tbElements[j].title = name_1;
                             dropDown.fontNameDropDown.content = ('<span style="display: inline-flex;' +
                                 'width:' + e.parent.fontFamily.width + '" >' +
-                                '<span class="e-rte-dropdown-btn-text">'
+                                '<span class="e-rte-dropdown-btn-text' + ' ' + e.parent.cssClass + '">'
                                 + name_1 + '</span></span>');
                             dropDown.fontNameDropDown.dataBind();
                             break;
@@ -2354,7 +2404,7 @@ function setToolbarStatus(e, isPopToolbar, self) {
                             result = getDropDownValue(fontSizeItems, (value === '' ? fontSizeContent.replace(/\s/g, '') : value), 'value', 'text');
                             dropDown.fontSizeDropDown.content = ('<span style="display: inline-flex;' +
                                 'width:' + e.parent.fontSize.width + '" >' +
-                                '<span class="e-rte-dropdown-btn-text">'
+                                '<span class="e-rte-dropdown-btn-text' + ' ' + e.parent.cssClass + '">'
                                 + getFormattedFontSize(result) + '</span></span>');
                             dropDown.fontSizeDropDown.dataBind();
                             break;
@@ -2545,9 +2595,13 @@ function updateTextNode(value, rteObj) {
         var previousParent = void 0;
         var insertElem = void 0;
         while (tempNode.firstChild) {
-            var emptyElem = tempNode.querySelectorAll(blockInlineEmptyNodes);
-            for (var i = 0; i < emptyElem.length; i++) {
-                emptyElem[i].innerHTML = '<br>';
+            var emptyBlockElem = tempNode.querySelectorAll(blockEmptyNodes);
+            for (var i = 0; i < emptyBlockElem.length; i++) {
+                emptyBlockElem[i].innerHTML = '<br>';
+            }
+            var emptyInlineElem = tempNode.querySelectorAll(inlineEmptyNodes);
+            for (var i = 0; i < emptyInlineElem.length; i++) {
+                emptyInlineElem[i].innerHTML = '&ZeroWidthSpace;';
             }
             if (rteObj.enterKey !== 'BR' && ((tempNode.firstChild.nodeName === '#text' &&
                 (tempNode.firstChild.textContent.indexOf('\n') < 0 || tempNode.firstChild.textContent.trim() !== '')) ||
@@ -2994,6 +3048,7 @@ var ToolbarRenderer = /** @__PURE__ @class */ (function () {
         var proxy = this;
         var css = CLS_RTE_ELEMENTS + ' ' + CLS_TB_BTN + ((this.parent.inlineMode) ? (' ' + CLS_INLINE_DROPDOWN) : '');
         css += (' ' + ((item === 'backgroundcolor') ? CLS_BACKGROUND_COLOR_DROPDOWN : CLS_FONT_COLOR_DROPDOWN));
+        css += ' ' + this.parent.cssClass;
         var content = proxy.parent.createElement('span', { className: CLS_COLOR_CONTENT });
         var inlineEle = proxy.parent.createElement('span', { className: args.cssClass });
         var range;
@@ -3164,6 +3219,7 @@ var ToolbarRenderer = /** @__PURE__ @class */ (function () {
      * @deprecated
      */
     ToolbarRenderer.prototype.renderColorPicker = function (args, item) {
+        var _this = this;
         // eslint-disable-next-line
         var proxy = this;
         var value;
@@ -3181,6 +3237,14 @@ var ToolbarRenderer = /** @__PURE__ @class */ (function () {
             beforeTileRender: function (args) {
                 args.element.classList.add(CLS_COLOR_PALETTE);
                 args.element.classList.add(CLS_CUSTOM_TILE);
+                if (!isNullOrUndefined(_this.parent.cssClass)) {
+                    var allClassName = _this.parent.cssClass.split(' ');
+                    for (var i = 0; i < allClassName.length; i++) {
+                        if (allClassName[i].trim() !== '') {
+                            args.element.classList.add(allClassName[i]);
+                        }
+                    }
+                }
                 if (args.value === '') {
                     args.element.classList.add(CLS_NOCOLOR_ITEM);
                 }
@@ -3195,8 +3259,9 @@ var ToolbarRenderer = /** @__PURE__ @class */ (function () {
                 proxy.parent.notify(selectionRestore, {});
                 proxy.currentElement.querySelector('.' + CLS_RTE_ELEMENTS).style.borderBottomColor = colorpickerValue;
                 var range = proxy.parent.formatter.editorManager.nodeSelection.getRange(proxy.parent.contentModule.getDocument());
+                var closestElement = closest(range.startContainer.parentNode, 'table');
                 if ((range.startContainer.nodeName === 'TD' || range.startContainer.nodeName === 'TH' || range.startContainer.nodeName === 'BODY' ||
-                    closest(range.startContainer.parentNode, 'td,th')) && range.collapsed && args.subCommand === 'BackgroundColor') {
+                    closest(range.startContainer.parentNode, 'td,th')) && range.collapsed && args.subCommand === 'BackgroundColor' && closest(closestElement, '.' + CLS_RTE)) {
                     proxy.parent.notify(tableColorPickerChanged, colorPickerArgs);
                 }
                 else {
@@ -3216,7 +3281,7 @@ var ToolbarRenderer = /** @__PURE__ @class */ (function () {
         colorPicker.columns = (item === 'backgroundcolor') ? this.parent.backgroundColor.columns : this.parent.fontColor.columns;
         colorPicker.presetColors = (item === 'backgroundcolor') ? this.parent.backgroundColor.colorCode :
             this.parent.fontColor.colorCode;
-        colorPicker.cssClass = (item === 'backgroundcolor') ? CLS_BACKGROUND_COLOR_PICKER : CLS_FONT_COLOR_PICKER;
+        colorPicker.cssClass = ((item === 'backgroundcolor') ? CLS_BACKGROUND_COLOR_PICKER : CLS_FONT_COLOR_PICKER) + ' ' + args.cssClass;
         colorPicker.createElement = this.parent.createElement;
         colorPicker.appendTo(document.getElementById(args.target));
         return colorPicker;
@@ -4216,7 +4281,8 @@ var Toolbar$2 = /** @__PURE__ @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']);
@@ -4333,7 +4399,8 @@ var Toolbar$2 = /** @__PURE__ @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) {
@@ -5073,10 +5140,18 @@ var ColorPickerInput = /** @__PURE__ @class */ (function () {
                         var fontNode = _this.parent.createElement('input');
                         fontNode.id = targetID;
                         fontNode.classList.add(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
-                                + ' ' + CLS_RTE_ELEMENTS + ' ' + CLS_ICONS,
+                                + ' ' + CLS_RTE_ELEMENTS + ' ' + CLS_ICONS + ' ' + _this.parent.cssClass,
                             value: _this.tools[item.toLocaleLowerCase()].value,
                             command: _this.tools[item.toLocaleLowerCase()].command,
                             subCommand: _this.tools[item.toLocaleLowerCase()].subCommand,
@@ -5092,10 +5167,18 @@ var ColorPickerInput = /** @__PURE__ @class */ (function () {
                         var backNode = _this.parent.createElement('input');
                         backNode.id = targetID;
                         backNode.classList.add(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
-                                + ' ' + CLS_RTE_ELEMENTS + ' ' + CLS_ICONS,
+                                + ' ' + CLS_RTE_ELEMENTS + ' ' + CLS_ICONS + ' ' + _this.parent.cssClass,
                             value: _this.tools[item.toLocaleLowerCase()].value,
                             command: _this.tools[item.toLocaleLowerCase()].command,
                             subCommand: _this.tools[item.toLocaleLowerCase()].subCommand,
@@ -5168,8 +5251,8 @@ var ColorPickerInput = /** @__PURE__ @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() });
             }
         }
     };
@@ -6637,18 +6720,18 @@ function updateTextNode$1(value) {
                     tdElm[j].style.removeProperty('border');
                 }
             }
-            if (!tableElm[i].classList.contains(CLS_TABLE)) {
-                tableElm[i].classList.add(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(CLS_RTE_IMAGE)) {
-                imageElm[i].classList.add(CLS_RTE_IMAGE);
+            if (!imageElm[i].classList.contains('e-rte-image')) {
+                imageElm[i].classList.add('e-rte-image');
             }
-            if (!(imageElm[i].classList.contains(CLS_IMGINLINE) ||
-                imageElm[i].classList.contains(CLS_IMGBREAK))) {
-                imageElm[i].classList.add(CLS_IMGINLINE);
+            if (!(imageElm[i].classList.contains('e-imginline') ||
+                imageElm[i].classList.contains('e-imgbreak'))) {
+                imageElm[i].classList.add('e-imginline');
             }
         }
     }
@@ -7110,7 +7193,7 @@ var Formatter = /** @__PURE__ @class */ (function () {
         }
         self.trigger(actionComplete, events, function (callbackArgs) {
             self.setPlaceHolder();
-            if (callbackArgs.requestType === 'Images' || callbackArgs.requestType === 'Links' && self.editorMode === 'HTML') {
+            if ((callbackArgs.requestType === 'Images' || callbackArgs.requestType === 'Links') && self.editorMode === 'HTML') {
                 var args = callbackArgs;
                 if (callbackArgs.requestType === 'Links' && callbackArgs.event &&
                     callbackArgs.event.type === 'keydown' &&
@@ -7214,6 +7297,12 @@ var CLEAR_COMMAND = 'clear-commands';
  * @hidden
  */
 var MD_TABLE = 'insert-table';
+/**
+ * insertText plugin events
+ *
+ * @hidden
+ */
+var INSERT_TEXT_COMMAND = 'insert-text';
 
 /**
  * Lists internal component
@@ -8950,6 +9039,56 @@ var ClearFormat = /** @__PURE__ @class */ (function () {
     return ClearFormat;
 }());
 
+/**
+ * Link internal component
+ *
+ * @hidden
+ * @deprecated
+ */
+var MDInsertText = /** @__PURE__ @class */ (function () {
+    /**
+     * Constructor for creating the insert text plugin
+     *
+     * @param {MarkdownParser} parent - specifies the parent element
+     * @hidden
+     * @deprecated
+     */
+    function MDInsertText(parent) {
+        this.parent = parent;
+        this.selection = this.parent.markdownSelection;
+        this.addEventListener();
+    }
+    MDInsertText.prototype.addEventListener = function () {
+        this.parent.observer.on(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;
+}());
+
 /**
  * MarkdownParser internal component
  *
@@ -8976,6 +9115,7 @@ var MarkdownParser = /** @__PURE__ @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 () {
@@ -9042,6 +9182,10 @@ var MarkdownParser = /** @__PURE__ @class */ (function () {
             case 'clear':
                 this.observer.notify(CLEAR_COMMAND, { subCommand: value, event: event, callBack: callBack });
                 break;
+            case 'inserttext':
+                this.observer.notify(INSERT_TEXT_COMMAND, { subCommand: value, event: event, callBack: callBack,
+                    value: { text: exeValue } });
+                break;
         }
     };
     return MarkdownParser;
@@ -9134,7 +9278,8 @@ var MarkdownRender = /** @__PURE__ @class */ (function () {
         var div = this.parent.createElement('div', { id: this.parent.getID() + '_view', className: 'e-rte-content' });
         this.editableElement = this.parent.createElement('textarea', {
             className: 'e-content',
-            id: this.parent.getID() + '_editable-content'
+            id: this.parent.getID() + '_editable-content',
+            attrs: { 'aria-labelledby': this.parent.getID() + '_view' }
         });
         div.appendChild(this.editableElement);
         this.setPanel(div);
@@ -10851,6 +10996,8 @@ var Lists = /** @__PURE__ @class */ (function () {
         var endNode = this.parent.domNode.getSelectedNode(range.endContainer, range.endOffset);
         startNode = startNode.nodeName === 'BR' ? startNode.parentElement : startNode;
         endNode = endNode.nodeName === 'BR' ? endNode.parentElement : endNode;
+        startNode = startNode.nodeName !== 'LI' && !isNullOrUndefined(startNode.closest('LI')) ? startNode.closest('LI') : startNode;
+        endNode = endNode.nodeName !== 'LI' && !isNullOrUndefined(endNode.closest('LI')) ? endNode.closest('LI') : endNode;
         if (((range.commonAncestorContainer.nodeName === 'OL' || range.commonAncestorContainer.nodeName === 'UL' || range.commonAncestorContainer.nodeName === 'LI') &&
             isNullOrUndefined(endNode.nextElementSibling) && endNode.textContent.length === range.endOffset &&
             isNullOrUndefined(startNode.previousElementSibling) && range.startOffset === 0) ||
@@ -11224,7 +11371,7 @@ var Lists = /** @__PURE__ @class */ (function () {
         }
     };
     Lists.prototype.applyLists = function (elements, type, selector, item, e) {
-        if (this.isRevert(elements, type) && isNullOrUndefined(item)) {
+        if (this.isRevert(elements, type, item) && isNullOrUndefined(item)) {
             this.revertList(elements, e);
             this.removeEmptyListElements();
         }
@@ -11287,13 +11434,14 @@ var Lists = /** @__PURE__ @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 ||
+                isNullOrUndefined(item) && nodes[i].parentNode.style.listStyleType !== '') {
                 isRevert = false;
             }
         }
@@ -11316,6 +11464,12 @@ var Lists = /** @__PURE__ @class */ (function () {
                 (nodes[i].tagName === 'LI' && node.tagName === tagName && nodesTemp.indexOf(node) < 0 && item !== null)) {
                 nodesTemp.push(node);
             }
+            if (isNullOrUndefined(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];
@@ -11417,7 +11571,8 @@ var Lists = /** @__PURE__ @class */ (function () {
                     }
                 }
             }
-            if (element.parentNode.insertBefore(this.closeTag(parentNode.tagName), element), 'LI' === parentNode.parentNode.tagName) {
+            if (element.parentNode.insertBefore(this.closeTag(parentNode.tagName), element), 'LI' === parentNode.parentNode.tagName || 'OL' === parentNode.parentNode.tagName ||
+                    'UL' === parentNode.parentNode.tagName) {
                 element.parentNode.insertBefore(this.closeTag('LI'), element);
             }
             else {
@@ -12383,7 +12538,9 @@ var InsertHtml = /** @__PURE__ @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);
@@ -12511,9 +12668,28 @@ var InsertHtml = /** @__PURE__ @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') && !isNullOrUndefined(currentNode.parentElement) &&
-                    currentNode.parentElement.textContent.trim().length === 0) {
+                if ((currentNode.nodeName === 'BR' || currentNode.nodeName === 'HR' ||
+                    (currentNode.nodeName === '#text' && !isNullOrUndefined(currentNode.parentElement) && currentNode.parentElement.nodeName === 'LI')) &&
+                    (!isNullOrUndefined(currentNode.parentElement) && currentNode.parentElement.textContent.trim().length === 0)) {
                     splitedElm = currentNode;
+                    if (currentNode.parentElement.nodeName === 'LI' && !isNullOrUndefined(currentNode.nextSibling) &&
+                        currentNode.nextSibling.nodeName === 'BR') {
+                        detach(currentNode.nextSibling);
+                    }
+                }
+                else if (currentNode.nodeName === '#text' && !isNullOrUndefined(currentNode.parentElement) &&
+                    currentNode.parentElement.nodeName === 'LI' && currentNode.parentElement.textContent.trim().length > 0) {
+                    splitedElm = currentNode;
+                    if (currentNode.parentElement.nodeName === 'LI' && !isNullOrUndefined(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);
@@ -12600,6 +12776,7 @@ var InsertHtml = /** @__PURE__ @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;
 }());
 
@@ -17204,7 +17381,7 @@ var __extends$3 = (undefined && undefined.__extends) || (function () {
         d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
     };
 })();
-var IFRAMEHEADER = "\n<!DOCTYPE html> \n    <html>\n         <head>\n            <meta charset='utf-8' /> \n            <style>\n                @charset \"UTF-8\";\n                body {\n                    font-family: \"Roboto\", sans-serif;\n                    font-size: 14px;\n                }\n                html, body{height: 100%;margin: 0;}\n                body.e-cursor{cursor:default}\n                span.e-selected-node\t{background-color: #939393;color: white;}\n                span.e-selected-node.e-highlight {background-color: #1d9dd8;}\n                body{color:#333;word-wrap:break-word;padding: 8px;box-sizing: border-box;}\n                .e-rte-image {border: 0;cursor: pointer;display:\n                    block;float: none;height: auto;margin: 5px auto;max-width: 100%;position: relative;}\n                .e-rte-image.e-imginline {display: inline-block;float: none;max-width: calc(100% - (2 * 5px));padding: 1px;vertical-align: bottom;}\n                .e-rte-image.e-imgcenter {cursor: pointer;display: block;float: none;margin: 5px auto;max-width: 100%;position: relative;}\n                .e-rte-image.e-imgright { float: right; margin: 0 auto;margin-left: 5px;text-align: right;}\n                .e-rte-image.e-imgleft {float: left;margin: 0 auto;margin-right: 5px;text-align: left;}\n                .e-img-caption { display: inline-block; float: none; margin: 5px auto; max-width: 100%;position: relative;}\n                .e-img-caption.e-caption-inline {display: inline-block;float: none;\n                    margin: 5px auto;margin-left: 5px;margin-right: 5px;max-width: calc(100% - (2 * 5px));\n                    position: relativetext-align: center;vertical-align: bottom;}\n                .e-img-inner {box-sizing: border-box;display: block;font-size: 16px;font-weight: initial;\n                    margin: auto;opacity: .9;text-align: center;width: 100%;}\n                .e-img-wrap {display: inline-block;margin: auto;padding: 0;text-align: center;width: 100%;}\n                .e-imgleft {float: left;margin: 0 5px 0 0;text-align: left;}\n                .e-imgright {float: right;margin: 0 0 0 5px;text-align: right;}\n                .e-imgcenter {cursor: pointer;display: block;float: none;height: auto;margin: 5px auto;max-width: 100%;position: relative;}\n                .e-control img:not(.e-resize) {border: 2px solid transparent; z-index: 1000}\n                .e-imginline {display: inline-block;float: none;margin-left: 5px;margin-right: 5px;\n                    max-width: calc(100% - (2 * 5px));vertical-align: bottom;}\n                .e-imgbreak {border: 0;cursor: pointer;\n                    display: block;float: none;height: auto;margin: 5px auto;max-width: 100%;position: relative;}\n                .e-rte-image.e-img-focus:not(.e-resize) {border: solid 2px #4a90e2;}\n                img.e-img-focus::selection { background: transparent;color: transparent;}\n                span.e-rte-imageboxmark {  width: 10px; height: 10px; position: absolute; display: block;\n                    background: #4a90e2; border: 1px solid #fff; z-index: 1000;}\n                .e-mob-rte.e-mob-span span.e-rte-imageboxmark { background: #4a90e2; border: 1px solid #fff; }\n                .e-mob-rte span.e-rte-imageboxmark { background: #fff; border: 1px solid #4a90e2;\n                    border-radius: 15px; height: 20px; width: 20px; }\n                .e-mob-rte.e-mob-span span.e-rte-imageboxmark { background: #4a90e2; border: 1px solid #fff; }\n                .e-rte-content .e-content img.e-resize { z-index: 1000; }\n                .e-img-caption .e-img-inner { outline: 0; }\n                .e-img-caption a:focus-visible { outline: none; }\n                .e-img-caption .e-rte-image.e-imgright, .e-img-caption .e-rte-image.e-imgleft { float: none; margin: 0;}\n                body{box-sizing: border-box;min-height: 100px;outline: 0 solid transparent;\n                    overflow-x: auto;padding: 16px;position: relative;text-align: inherit;z-index: 2;}\n                p{margin: 0 0 10px;margin-bottom: 10px;}\n                li{margin-bottom: 10px;}\n                h1{font-size: 2.17em;font-weight: 400;line-height: 1;margin: 10px 0;}\n                h2{font-size: 1.74em;font-weight: 400;margin: 10px 0;}\n                h3{font-size: 1.31em;font-weight: 400;margin: 10px 0;}\n                h4{font-size: 16px;font-weight: 400;line-height: 1.5;margin: 0;}\n                h5{font-size: 00.8em;font-weight: 400;margin: 0;}\n                h6{font-size: 00.65em;font-weight: 400;margin: 0;}\n                blockquote{margin: 10px 0;margin-left: 0;padding-left: 5px;border-left: solid 2px #5c5c5c;}\n                pre{background-color: inherit;border: 0;border-radius: 0;color: #333;\n                    font-size: inherit;line-height: inherit;margin: 0 0 10px;overflow: visible;padding: 0;\n                    white-space: pre-wrap;word-break: inherit;word-wrap: break-word;}\n                strong, b{font-weight: 700;}\n                a{text-decoration: none;user-select: auto;}\n                a:hover{text-decoration: underline;};\n                p:last-child, pre:last-child, blockquote:last-child{margin-bottom: 0;}\n                h3+h4, h4+h5, h5+h6{margin-top: 00.6em;}\n                ul:last-child{margin-bottom: 0;}\n                table { border-collapse: collapse; empty-cells: show;}\n                table td,table th {border: 1px solid #BDBDBD; height: 20px; vertical-align: middle;}\n                table.e-alternate-border tbody tr:nth-child(2n) {background-color: #F5F5F5;}\n                table th {background-color: #E0E0E0;}\n                table.e-dashed-border td,table.e-dashed-border th { border: 1px dashed #BDBDBD} \n                table .e-cell-select {border: 1px double #4a90e2;}\n                span.e-table-box { cursor: nwse-resize; display: block; height: 10px; position: absolute; width: 10px; }\n                span.e-table-box.e-rmob {height: 14px;width: 14px;}\n                .e-row-resize, .e-column-resize { background-color: transparent; background-repeat: repeat;\n                    bottom: 0;cursor: col-resize;height: 1px;overflow: visible;position: absolute;width: 1px; }\n                .e-row-resize { cursor: row-resize; height: 1px;}\n                .e-table-rhelper { cursor: col-resize; opacity: .87;position: absolute;}\n                .e-table-rhelper.e-column-helper { width: 1px; }\n                .e-table-rhelper.e-row-helper {height: 1px;}\n                .e-reicon::before { border-bottom: 6px solid transparent; border-right: 6px solid;\n                    border-top: 6px solid transparent; content: ''; display: block; height: 0;\n                    position: absolute; right: 4px; top: 4px; width: 20px; }\n                .e-reicon::after { border-bottom: 6px solid transparent; border-left: 6px solid;\n                    border-top: 6px solid transparent; content: ''; display: block;\n                    height: 0; left: 4px; position: absolute; top: 4px; width: 20px; z-index: 3; }\n                .e-row-helper.e-reicon::after { top: 10px; transform: rotate(90deg); }\n                .e-row-helper.e-reicon::before { left: 4px; top: -20px; transform: rotate(90deg); }\n                span.e-table-box { background-color: #ffffff; border: 1px solid #BDBDBD; }\n                span.e-table-box.e-rbox-select { background-color: #BDBDBD; border: 1px solid #BDBDBD; }\n                .e-table-rhelper { background-color: #4a90e2;}\n                .e-rtl { direction: rtl; }\n            </style>\n        </head>";
+var IFRAMEHEADER = "\n<!DOCTYPE html> \n    <html>\n         <head>\n            <meta charset='utf-8' /> \n            <style>\n                @charset \"UTF-8\";\n                body {\n                    font-family: \"Roboto\", sans-serif;\n                    font-size: 14px;\n                }\n                html, body{height: 100%;margin: 0;}\n                body.e-cursor{cursor:default}\n                span.e-selected-node\t{background-color: #939393;color: white;}\n                span.e-selected-node.e-highlight {background-color: #1d9dd8;}\n                body{color:#333;word-wrap:break-word;padding: 8px;box-sizing: border-box;}\n                .e-rte-image {border: 0;cursor: pointer;display:\n                    block;float: none;height: auto;margin: 5px auto;max-width: 100%;position: relative;}\n                .e-rte-image.e-imginline {display: inline-block;float: none;max-width: calc(100% - (2 * 5px));padding: 1px;vertical-align: bottom;}\n                .e-rte-image.e-imgcenter {cursor: pointer;display: block;float: none;margin: 5px auto;max-width: 100%;position: relative;}\n                .e-rte-image.e-imgright { float: right; margin: 0 auto;margin-left: 5px;text-align: right;}\n                .e-rte-image.e-imgleft {float: left;margin: 0 auto;margin-right: 5px;text-align: left;}\n                .e-img-caption { display: inline-block; float: none; margin: 5px auto; max-width: 100%;position: relative;}\n                .e-img-caption.e-caption-inline {display: inline-block;float: none;\n                    margin: 5px auto;margin-left: 5px;margin-right: 5px;max-width: calc(100% - (2 * 5px));\n                    position: relativetext-align: center;vertical-align: bottom;}\n                .e-img-inner {box-sizing: border-box;display: block;font-size: 16px;font-weight: initial;\n                    margin: auto;opacity: .9;text-align: center;width: 100%;}\n                .e-img-wrap {display: inline-block;margin: auto;padding: 0;text-align: center;width: 100%;}\n                .e-imgleft {float: left;margin: 0 5px 0 0;text-align: left;}\n                .e-imgright {float: right;margin: 0 0 0 5px;text-align: right;}\n                .e-imgcenter {cursor: pointer;display: block;float: none;height: auto;margin: 5px auto;max-width: 100%;position: relative;}\n                .e-control img:not(.e-resize) {border: 2px solid transparent; z-index: 1000}\n                .e-imginline {display: inline-block;float: none;margin-left: 5px;margin-right: 5px;\n                    max-width: calc(100% - (2 * 5px));vertical-align: bottom;}\n                .e-imgbreak {border: 0;cursor: pointer;\n                    display: block;float: none;height: auto;margin: 5px auto;max-width: 100%;position: relative;}\n                .e-rte-image.e-img-focus:not(.e-resize) {border: solid 2px #4a90e2;}\n                img.e-img-focus::selection { background: transparent;color: transparent;}\n                span.e-rte-imageboxmark {  width: 10px; height: 10px; position: absolute; display: block;\n                    background: #4a90e2; border: 1px solid #fff; z-index: 1000;}\n                .e-mob-rte.e-mob-span span.e-rte-imageboxmark { background: #4a90e2; border: 1px solid #fff; }\n                .e-mob-rte span.e-rte-imageboxmark { background: #fff; border: 1px solid #4a90e2;\n                    border-radius: 15px; height: 20px; width: 20px; }\n                .e-mob-rte.e-mob-span span.e-rte-imageboxmark { background: #4a90e2; border: 1px solid #fff; }\n                .e-rte-content .e-content img.e-resize { z-index: 1000; }\n                .e-img-caption .e-img-inner { outline: 0; }\n                .e-img-caption a:focus-visible { outline: none; }\n                .e-img-caption .e-rte-image.e-imgright, .e-img-caption .e-rte-image.e-imgleft { float: none; margin: 0;}\n                body{box-sizing: border-box;min-height: 100px;outline: 0 solid transparent;\n                    overflow-x: auto;padding: 16px;position: relative;text-align: inherit;z-index: 2;}\n                p{margin: 0 0 10px;margin-bottom: 10px;}\n                li{margin-bottom: 10px;}\n                h1{font-size: 2.17em;font-weight: 400;line-height: 1;margin: 10px 0;}\n                h2{font-size: 1.74em;font-weight: 400;margin: 10px 0;}\n                h3{font-size: 1.31em;font-weight: 400;margin: 10px 0;}\n                h4{font-size: 16px;font-weight: 400;line-height: 1.5;margin: 0;}\n                h5{font-size: 00.8em;font-weight: 400;margin: 0;}\n                h6{font-size: 00.65em;font-weight: 400;margin: 0;}\n                blockquote{margin: 10px 0;margin-left: 0;padding-left: 5px;border-left: solid 2px #5c5c5c;}\n                pre{background-color: inherit;border: 0;border-radius: 0;color: #333;\n                    font-size: inherit;line-height: inherit;margin: 0 0 10px;overflow: visible;padding: 0;\n                    white-space: pre-wrap;word-break: inherit;word-wrap: break-word;}\n                strong, b{font-weight: 700;}\n                a{text-decoration: none;user-select: auto;}\n                a:hover{text-decoration: underline;};\n                p:last-child, pre:last-child, blockquote:last-child{margin-bottom: 0;}\n                h3+h4, h4+h5, h5+h6{margin-top: 00.6em;}\n                ul:last-child{margin-bottom: 0;}\n                table { border-collapse: collapse; empty-cells: show;}\n                table td,table th {border: 1px solid #BDBDBD; height: 20px; padding: 2px 5px; vertical-align: middle;}\n                table.e-alternate-border tbody tr:nth-child(2n) {background-color: #F5F5F5;}\n                table th {background-color: #E0E0E0;}\n                table.e-dashed-border td,table.e-dashed-border th { border: 1px dashed #BDBDBD} \n                table .e-cell-select {border: 1px double #4a90e2;}\n                span.e-table-box { cursor: nwse-resize; display: block; height: 10px; position: absolute; width: 10px; }\n                span.e-table-box.e-rmob {height: 14px;width: 14px;}\n                .e-row-resize, .e-column-resize { background-color: transparent; background-repeat: repeat;\n                    bottom: 0;cursor: col-resize;height: 1px;overflow: visible;position: absolute;width: 1px; }\n                .e-row-resize { cursor: row-resize; height: 1px;}\n                .e-table-rhelper { cursor: col-resize; opacity: .87;position: absolute;}\n                .e-table-rhelper.e-column-helper { width: 1px; }\n                .e-table-rhelper.e-row-helper {height: 1px;}\n                .e-reicon::before { border-bottom: 6px solid transparent; border-right: 6px solid;\n                    border-top: 6px solid transparent; content: ''; display: block; height: 0;\n                    position: absolute; right: 4px; top: 4px; width: 20px; }\n                .e-reicon::after { border-bottom: 6px solid transparent; border-left: 6px solid;\n                    border-top: 6px solid transparent; content: ''; display: block;\n                    height: 0; left: 4px; position: absolute; top: 4px; width: 20px; z-index: 3; }\n                .e-row-helper.e-reicon::after { top: 10px; transform: rotate(90deg); }\n                .e-row-helper.e-reicon::before { left: 4px; top: -20px; transform: rotate(90deg); }\n                span.e-table-box { background-color: #ffffff; border: 1px solid #BDBDBD; }\n                span.e-table-box.e-rbox-select { background-color: #BDBDBD; border: 1px solid #BDBDBD; }\n                .e-table-rhelper { background-color: #4a90e2;}\n                .e-rtl { direction: rtl; }\n            </style>\n        </head>";
 /**
  * Content module is used to render Rich Text Editor content
  *
@@ -19106,9 +19283,10 @@ var Resize = /** @__PURE__ @class */ (function () {
         this.parent.on(destroy, this.destroy, this);
     };
     Resize.prototype.renderResizable = function () {
+        var enableRtlClass = (this.parent.enableRtl) ? CLS_RTE_RES_WEST : CLS_RTE_RES_EAST;
         this.resizer = this.parent.createElement('div', {
             id: this.parent.getID() + '-resizable', className: 'e-icons'
-                + ' ' + CLS_RTE_RES_HANDLE + ' ' + CLS_RTE_RES_EAST
+                + ' ' + CLS_RTE_RES_HANDLE + ' ' + enableRtlClass
         });
         this.parent.element.classList.add(CLS_RTE_RES_CNT);
         this.parent.element.appendChild(this.resizer);
@@ -19141,12 +19319,12 @@ var Resize = /** @__PURE__ @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);
@@ -19499,7 +19677,8 @@ var FullScreen = /** @__PURE__ @class */ (function () {
                     }
                     _this.parent.element.classList.add(CLS_FULL_SCREEN);
                     _this.toggleParentOverflow(true);
-                    _this.parent.setContentHeight();
+                    var isExpand = _this.parent.element.querySelectorAll('.e-toolbar-extended.e-popup-open').length > 0 ? true : false;
+                    _this.parent.setContentHeight(null, isExpand);
                     if (_this.parent.toolbarModule) {
                         if (!_this.parent.getBaseToolbarObject().toolbarObj.items[0].properties) {
                             _this.parent.getBaseToolbarObject().toolbarObj.removeItems(0);
@@ -19546,7 +19725,8 @@ var FullScreen = /** @__PURE__ @class */ (function () {
                     for (var i = 0; i < elem.length; i++) {
                         removeClass([elem[i]], ['e-rte-overflow']);
                     }
-                    _this.parent.setContentHeight();
+                    var isExpand = _this.parent.element.querySelectorAll('.e-toolbar-extended.e-popup-open').length > 0 ? true : false;
+                    _this.parent.setContentHeight(null, isExpand);
                     if (_this.parent.toolbarModule) {
                         if (!_this.parent.getBaseToolbarObject().toolbarObj.items[0].properties) {
                             _this.parent.getBaseToolbarObject().toolbarObj.removeItems(0);
@@ -20023,22 +20203,22 @@ var Link = /** @__PURE__ @class */ (function () {
         var textPlace = this.i10n.getConstant('textPlaceholder');
         var title = this.i10n.getConstant('linkTitle');
         var linkDialogEle = this.parent.createElement('div', {
-            className: 'e-rte-link-dialog', id: this.rteID + '_rtelink'
+            className: 'e-rte-link-dialog' + ' ' + this.parent.cssClass, id: this.rteID + '_rtelink'
         });
         this.parent.element.appendChild(linkDialogEle);
         var linkContent = this.parent.createElement('div', {
-            className: 'e-rte-linkcontent', id: this.rteID + '_linkContent'
+            className: 'e-rte-linkcontent' + ' ' + this.parent.cssClass, id: this.rteID + '_linkContent'
         });
         var htmlTextbox = (this.parent.editorMode === 'HTML') ? '<label>' + linkTooltip +
-            '</label></div><div class="e-rte-field">' +
-            '<input type="text" data-role ="none" spellcheck="false" placeholder = "' + title + '" class="e-input e-rte-linkTitle"></div>' +
-            '<div class="e-rte-label"></div>' + '<div class="e-rte-field">' +
-            '<input type="checkbox" class="e-rte-linkTarget"  data-role ="none"></div>' : '';
-        var content = '<div class="e-rte-label"><label>' + linkWebAddress + '</label></div>' + '<div class="e-rte-field">' +
-            '<input type="text" data-role ="none" spellcheck="false" placeholder="' + urlPlace + '" class="e-input e-rte-linkurl"/></div>' +
-            '<div class="e-rte-label">' + '<label>' + linkDisplayText + '</label></div><div class="e-rte-field"> ' +
-            '<input type="text" data-role ="none" spellcheck="false" class="e-input e-rte-linkText" placeholder="' + textPlace + '">' +
-            '</div><div class="e-rte-label">' + htmlTextbox;
+            '</label></div><div class="e-rte-field' + ' ' + this.parent.cssClass + '">' +
+            '<input type="text" data-role ="none" spellcheck="false" placeholder = "' + title + '" class="e-input e-rte-linkTitle' + ' ' + this.parent.cssClass + '"></div>' +
+            '<div class="e-rte-label' + ' ' + this.parent.cssClass + '"></div>' + '<div class="e-rte-field' + ' ' + this.parent.cssClass + '">' +
+            '<input type="checkbox" class="e-rte-linkTarget' + ' ' + this.parent.cssClass + '"  data-role ="none"></div>' : '';
+        var content = '<div class="e-rte-label' + ' ' + this.parent.cssClass + '"><label>' + linkWebAddress + '</label></div>' + '<div class="e-rte-field' + ' ' + this.parent.cssClass + '">' +
+            '<input type="text" data-role ="none" spellcheck="false" placeholder="' + urlPlace + '" class="e-input e-rte-linkurl' + ' ' + this.parent.cssClass + '"/></div>' +
+            '<div class="e-rte-label' + ' ' + this.parent.cssClass + '">' + '<label>' + linkDisplayText + '</label></div><div class="e-rte-field' + ' ' + this.parent.cssClass + '"> ' +
+            '<input type="text" data-role ="none" spellcheck="false" class="e-input e-rte-linkText' + ' ' + this.parent.cssClass + '" placeholder="' + textPlace + '">' +
+            '</div><div class="e-rte-label' + ' ' + this.parent.cssClass + '">' + htmlTextbox;
         var contentElem = parseHtml(content);
         linkContent.appendChild(contentElem);
         var linkTarget = linkContent.querySelector('.e-rte-linkTarget');
@@ -20066,9 +20246,9 @@ var Link = /** @__PURE__ @class */ (function () {
             isModal: Browser.isDevice,
             buttons: [{
                     click: this.insertlink.bind(selectObj),
-                    buttonModel: { content: linkInsert, cssClass: 'e-flat e-insertLink', isPrimary: true }
+                    buttonModel: { content: linkInsert, cssClass: 'e-flat e-insertLink' + ' ' + this.parent.cssClass, isPrimary: true }
                 },
-                { click: this.cancelDialog.bind(selectObj), buttonModel: { cssClass: 'e-flat', content: linkCancel } }],
+                { click: this.cancelDialog.bind(selectObj), buttonModel: { cssClass: 'e-flat' + ' ' + this.parent.cssClass, content: linkCancel } }],
             target: (Browser.isDevice) ? document.body : this.parent.element,
             animationSettings: { effect: 'None' },
             close: function (event) {
@@ -20212,8 +20392,10 @@ var Link = /** @__PURE__ @class */ (function () {
         if (this.parent.formatter.getUndoRedoStack().length === 0) {
             this.parent.formatter.saveData();
         }
+        var selectParentEle = this.getAnchorNode(e.selectParent[0]);
         this.parent.formatter.process(this.parent, e.args, e.args, {
             selectNode: e.selectNode, selectParent: e.selectParent, selection: e.selection,
+            text: selectParentEle.innerText,
             subCommand: e.args.item.subCommand
         });
         if (isIDevice$1() && this.parent.iframeSettings.enable) {
@@ -20228,7 +20410,7 @@ var Link = /** @__PURE__ @class */ (function () {
         var selectParentEle = this.getAnchorNode(e.selectParent[0]);
         if (selectParentEle.classList.contains('e-rte-anchor') || selectParentEle.tagName === 'A') {
             this.parent.formatter.process(this.parent, e.args, e.args, {
-                url: selectParentEle.href,
+                url: selectParentEle.href, text: selectParentEle.innerText,
                 target: selectParentEle.target === '' ? '_self' : '_blank', selectNode: e.selectNode,
                 subCommand: e.args.item.subCommand
             });
@@ -20310,6 +20492,7 @@ var Image = /** @__PURE__ @class */ (function () {
         this.isAllowedTypes = true;
         this.pageX = null;
         this.pageY = null;
+        this.mousex = null;
         this.deletedImg = [];
         this.parent = parent;
         this.rteID = parent.element.id;
@@ -20548,18 +20731,18 @@ var Image = /** @__PURE__ @class */ (function () {
         this.resizeBtnInit();
         this.imgEle = e;
         addClass([this.imgEle], 'e-resize');
-        this.imgResizeDiv = this.parent.createElement('span', { className: 'e-img-resize', id: this.rteID + '_imgResize' });
+        this.imgResizeDiv = this.parent.createElement('span', { className: 'e-img-resize' + ' ' + this.parent.cssClass, id: this.rteID + '_imgResize' });
         this.imgResizeDiv.appendChild(this.parent.createElement('span', {
-            className: 'e-rte-imageboxmark e-rte-topLeft', styles: 'cursor: nwse-resize'
+            className: 'e-rte-imageboxmark e-rte-topLeft' + ' ' + this.parent.cssClass, styles: 'cursor: nwse-resize'
         }));
         this.imgResizeDiv.appendChild(this.parent.createElement('span', {
-            className: 'e-rte-imageboxmark e-rte-topRight', styles: 'cursor: nesw-resize'
+            className: 'e-rte-imageboxmark e-rte-topRight' + ' ' + this.parent.cssClass, styles: 'cursor: nesw-resize'
         }));
         this.imgResizeDiv.appendChild(this.parent.createElement('span', {
-            className: 'e-rte-imageboxmark e-rte-botLeft', styles: 'cursor: nesw-resize'
+            className: 'e-rte-imageboxmark e-rte-botLeft' + ' ' + this.parent.cssClass, styles: 'cursor: nesw-resize'
         }));
         this.imgResizeDiv.appendChild(this.parent.createElement('span', {
-            className: 'e-rte-imageboxmark e-rte-botRight', styles: 'cursor: nwse-resize'
+            className: 'e-rte-imageboxmark e-rte-botRight' + ' ' + this.parent.cssClass, styles: 'cursor: nwse-resize'
         }));
         if (Browser.isDevice) {
             addClass([this.imgResizeDiv], 'e-mob-rte');
@@ -20646,8 +20829,9 @@ var Image = /** @__PURE__ @class */ (function () {
             img.style.minWidth = this.parent.insertImageSettings.minWidth === 0 ? '20px' : formatUnit(this.parent.insertImageSettings.minWidth);
             if (this.parent.insertImageSettings.resizeByPercent) {
                 if (parseInt('' + img.getBoundingClientRect().width + '', 10) !== 0 && parseInt('' + width + '', 10) !== 0) {
-                    var percentageValue = this.pixToPerc((width / height * expectedY), (img.previousElementSibling || img.parentElement));
-                    img.style.width = Math.min(Math.round((percentageValue / img.getBoundingClientRect().width) * expectedX * 100) / 100, 100) + '%';
+                    var original = img.offsetWidth + this.mousex;
+                    var finalWidthByPerc = (original / img.offsetWidth) * (parseFloat(img.style.width).toString() == 'NaN' ? (img.offsetWidth / (parseFloat(getComputedStyle(this.parent.element).width)) * 100) : parseFloat(img.style.width));
+                    img.style.width = ((finalWidthByPerc > 3) ? finalWidthByPerc : 3) + '%';
                 }
                 else {
                     img.style.width = this.pixToPerc((width / height * expectedY), (img.previousElementSibling || img.parentElement)) + '%';
@@ -20670,13 +20854,20 @@ var Image = /** @__PURE__ @class */ (function () {
                 img.style.height = expectedY + 'px';
             }
             else {
-                img.setAttribute('width', ((width / height * expectedY) + width / height).toString());
+                if (this.parent.iframeSettings.enable) {
+                    img.setAttribute('width', (img.width + this.mousex).toString());
+                }
+                else {
+                    img.setAttribute('width', (img.offsetWidth + this.mousex).toString());
+                }
             }
         }
         else if (height > width) {
             if (this.parent.insertImageSettings.resizeByPercent) {
                 if (parseInt('' + img.getBoundingClientRect().width + '', 10) !== 0 && parseInt('' + width + '', 10) !== 0) {
-                    img.style.width = Math.min(Math.round((width / img.getBoundingClientRect().width) * expectedX * 100) / 100, 100) + '%';
+                    var original = img.offsetWidth + this.mousex;
+                    var finalWidthByPerc = (original / img.offsetWidth) * (parseFloat(img.style.width).toString() == 'NaN' ? (img.offsetWidth / (parseFloat(getComputedStyle(this.parent.element).width)) * 100) : parseFloat(img.style.width));
+                    img.style.width = ((finalWidthByPerc > 3) ? finalWidthByPerc : 3) + '%';
                 }
                 else {
                     img.style.width = this.pixToPerc((expectedX / height * expectedY), (img.previousElementSibling || img.parentElement)) + '%';
@@ -20743,6 +20934,7 @@ var Image = /** @__PURE__ @class */ (function () {
         var mouseY = (this.resizeBtnStat.topLeft || this.resizeBtnStat.topRight) ? -(pageY - this.pageY) : (pageY - this.pageY);
         var width = parseInt(this.imgDupPos.width, 10) + mouseX;
         var height = parseInt(this.imgDupPos.height, 10) + mouseY;
+        this.mousex = mouseX;
         this.pageX = pageX;
         this.pageY = pageY;
         if (this.resizeBtnStat.botRight) {
@@ -21224,12 +21416,12 @@ var Image = /** @__PURE__ @class */ (function () {
         }
         this.imagDialog(e);
         if (!isNullOrUndefined(this.dialogObj)) {
-            var linkWrap = this.parent.createElement('div', { className: 'e-img-linkwrap' });
+            var linkWrap = this.parent.createElement('div', { className: 'e-img-linkwrap' + ' ' + this.parent.cssClass });
             var linkUrl = this.i10n.getConstant('linkurl');
-            var content = '<div class="e-rte-field">' +
-                '<input type="text" data-role ="none" class="e-input e-img-link" spellcheck="false" placeholder="' + linkUrl + '"/></div>' +
+            var content = '<div class="e-rte-field' + ' ' + this.parent.cssClass + '">' +
+                '<input type="text" data-role ="none" class="e-input e-img-link' + ' ' + this.parent.cssClass + '" spellcheck="false" placeholder="' + linkUrl + '"/></div>' +
                 '<div class="e-rte-label"></div>' + '<div class="e-rte-field">' +
-                '<input type="checkbox" class="e-rte-linkTarget"  data-role ="none"></div>';
+                '<input type="checkbox" class="e-rte-linkTarget' + ' ' + this.parent.cssClass + '"  data-role ="none"></div>';
             var contentElem = parseHtml(content);
             linkWrap.appendChild(contentElem);
             var linkTarget = linkWrap.querySelector('.e-rte-linkTarget');
@@ -21268,9 +21460,10 @@ var Image = /** @__PURE__ @class */ (function () {
                             _this.insertlink(linkargs_1);
                         },
                         buttonModel: {
-                            content: linkUpdate, cssClass: 'e-flat e-update-link', isPrimary: true
+                            content: linkUpdate, cssClass: 'e-flat e-update-link' + ' ' + this.parent.cssClass, isPrimary: true
                         }
-                    }]
+                    }],
+                cssClass: this.dialogObj.cssClass + ' e-rte-img-link-dialog'
             });
             if (!isNullOrUndefined(this.parent.cssClass)) {
                 this.dialogObj.setProperties({ cssClass: this.parent.cssClass });
@@ -21293,13 +21486,13 @@ var Image = /** @__PURE__ @class */ (function () {
         this.imagDialog(e);
         var altText = this.i10n.getConstant('altText');
         if (!isNullOrUndefined(this.dialogObj)) {
-            var altWrap = this.parent.createElement('div', { className: 'e-img-altwrap' });
+            var altWrap = this.parent.createElement('div', { className: 'e-img-altwrap' + ' ' + this.parent.cssClass });
             var altHeader = this.i10n.getConstant('alternateHeader');
             var linkUpdate = this.i10n.getConstant('dialogUpdate');
             var getAlt = (e.selectNode[0].getAttribute('alt') === null) ? '' :
                 e.selectNode[0].getAttribute('alt');
-            var content = '<div class="e-rte-field">' +
-                '<input type="text" spellcheck="false" value="' + getAlt + '" class="e-input e-img-alt" placeholder="' + altText + '"/>' +
+            var content = '<div class="e-rte-field' + ' ' + this.parent.cssClass + '">' +
+                '<input type="text" spellcheck="false" value="' + getAlt + '" class="e-input e-img-alt' + ' ' + this.parent.cssClass + '" placeholder="' + altText + '"/>' +
                 '</div>';
             var contentElem = parseHtml(content);
             altWrap.appendChild(contentElem);
@@ -21316,9 +21509,10 @@ var Image = /** @__PURE__ @class */ (function () {
                             _this.insertAlt(altArgs_1);
                         },
                         buttonModel: {
-                            content: linkUpdate, cssClass: 'e-flat e-update-alt', isPrimary: true
+                            content: linkUpdate, cssClass: 'e-flat e-update-alt' + ' ' + this.parent.cssClass, isPrimary: true
                         }
-                    }]
+                    }],
+                cssClass: this.dialogObj.cssClass + ' e-rte-img-alt-dialog'
             });
             if (!isNullOrUndefined(this.parent.cssClass)) {
                 this.dialogObj.setProperties({ cssClass: this.parent.cssClass });
@@ -21482,11 +21676,11 @@ var Image = /** @__PURE__ @class */ (function () {
         }
         else {
             this.captionEle = this.parent.createElement('span', {
-                className: CLS_CAPTION + ' ' + CLS_RTE_CAPTION,
+                className: CLS_CAPTION + ' ' + CLS_RTE_CAPTION + ' ' + this.parent.cssClass,
                 attrs: { contenteditable: 'false', draggable: 'false', style: 'width:' + this.parent.insertImageSettings.width }
             });
-            var imgWrap = this.parent.createElement('span', { className: 'e-img-wrap' });
-            var imgInner = this.parent.createElement('span', { className: 'e-img-inner',
+            var imgWrap = this.parent.createElement('span', { className: 'e-img-wrap' + ' ' + this.parent.cssClass });
+            var imgInner = this.parent.createElement('span', { className: 'e-img-inner' + ' ' + this.parent.cssClass,
                 attrs: { contenteditable: 'true' } });
             var parent_1 = e.selectNode[0].parentElement;
             if (parent_1.tagName === 'A') {
@@ -21539,9 +21733,10 @@ var Image = /** @__PURE__ @class */ (function () {
                             _this.insertSize(selectObj_1);
                         },
                         buttonModel: {
-                            content: linkUpdate, cssClass: 'e-flat e-update-size', isPrimary: true
+                            content: linkUpdate, cssClass: 'e-flat e-update-size' + ' ' + this.parent.cssClass, isPrimary: true
                         }
-                    }]
+                    }],
+                cssClass: this.dialogObj.cssClass + ' e-rte-img-size-dialog'
             });
             if (!isNullOrUndefined(this.parent.cssClass)) {
                 this.dialogObj.setProperties({ cssClass: this.parent.cssClass });
@@ -21584,7 +21779,7 @@ var Image = /** @__PURE__ @class */ (function () {
             this.dialogObj.hide({ returnValue: true });
             return;
         }
-        var imgDialog = this.parent.createElement('div', { className: 'e-rte-img-dialog', id: this.rteID + '_image' });
+        var imgDialog = this.parent.createElement('div', { className: 'e-rte-img-dialog' + ' ' + this.parent.cssClass, id: this.rteID + '_image' });
         this.parent.element.appendChild(imgDialog);
         var imgInsert = this.i10n.getConstant('dialogInsert');
         var imglinkCancel = this.i10n.getConstant('dialogCancel');
@@ -21593,7 +21788,7 @@ var Image = /** @__PURE__ @class */ (function () {
         var selectObj = { selfImage: this, selection: e.selection, args: e.args, selectParent: e.selectParent };
         var dialogModel = {
             header: imgHeader,
-            cssClass: CLS_RTE_ELEMENTS,
+            cssClass: CLS_RTE_ELEMENTS + ' ' + this.parent.cssClass,
             enableRtl: this.parent.enableRtl,
             locale: this.parent.locale,
             showCloseIcon: true, closeOnEscape: true, width: (Browser.isDevice) ? '290px' : '340px', height: 'inherit',
@@ -21601,13 +21796,13 @@ var Image = /** @__PURE__ @class */ (function () {
             isModal: Browser.isDevice,
             buttons: [{
                     click: this.insertImageUrl.bind(selectObj),
-                    buttonModel: { content: imgInsert, cssClass: 'e-flat e-insertImage', isPrimary: true, disabled: true }
+                    buttonModel: { content: imgInsert, cssClass: 'e-flat e-insertImage' + ' ' + this.parent.cssClass, isPrimary: true, disabled: true }
                 },
                 {
                     click: function (e) {
                         _this.cancelDialog(e);
                     },
-                    buttonModel: { cssClass: 'e-flat e-cancel', content: imglinkCancel }
+                    buttonModel: { cssClass: 'e-flat e-cancel' + ' ' + this.parent.cssClass, content: imglinkCancel }
                 }],
             target: (Browser.isDevice) ? document.body : this.parent.element,
             animationSettings: { effect: 'None' },
@@ -21630,12 +21825,12 @@ var Image = /** @__PURE__ @class */ (function () {
                 _this.dialogObj = null;
             }
         };
-        var dialogContent = this.parent.createElement('div', { className: 'e-img-content' });
+        var dialogContent = this.parent.createElement('div', { className: 'e-img-content' + ' ' + this.parent.cssClass });
         if ((!isNullOrUndefined(this.parent.insertImageSettings.path) && this.parent.editorMode === 'Markdown')
             || this.parent.editorMode === 'HTML') {
             dialogContent.appendChild(this.imgUpload(e));
         }
-        var linkHeader = this.parent.createElement('div', { className: 'e-linkheader' });
+        var linkHeader = this.parent.createElement('div', { className: 'e-linkheader' + ' ' + this.parent.cssClass });
         var linkHeaderText = this.i10n.getConstant('imageLinkHeader');
         if (this.parent.editorMode === 'HTML') {
             linkHeader.innerHTML = linkHeaderText;
@@ -21707,7 +21902,8 @@ var Image = /** @__PURE__ @class */ (function () {
             }
             /* eslint-enable */
         }
-        if (!(this.parent.iframeSettings.enable && this.parent.currentTarget.nodeName === 'IMG') && e.target.tagName !== 'IMG' && this.imgResizeDiv && !(this.quickToolObj &&
+        if (!(this.parent.iframeSettings.enable && !isNullOrUndefined(this.parent.currentTarget) && this.parent.currentTarget.nodeName === 'IMG') &&
+            e.target.tagName !== 'IMG' && this.imgResizeDiv && !(this.quickToolObj &&
             this.quickToolObj.imageQTBar && this.quickToolObj.imageQTBar.element.contains(e.target)) &&
             this.contentModule.getEditPanel().contains(this.imgResizeDiv)) {
             this.cancelResizeAction();
@@ -21737,10 +21933,10 @@ var Image = /** @__PURE__ @class */ (function () {
     // eslint-disable-next-line
     Image.prototype.imageUrlPopup = function (e) {
         var _this = this;
-        var imgUrl = this.parent.createElement('div', { className: 'imgUrl' });
+        var imgUrl = this.parent.createElement('div', { className: 'imgUrl' + ' ' + this.parent.cssClass });
         var placeUrl = this.i10n.getConstant('imageUrl');
         this.inputUrl = this.parent.createElement('input', {
-            className: 'e-input e-img-url',
+            className: 'e-input e-img-url' + ' ' + this.parent.cssClass,
             attrs: { placeholder: placeUrl, spellcheck: 'false' }
         });
         this.inputUrl.addEventListener('input', function () {
@@ -21807,7 +22003,7 @@ var Image = /** @__PURE__ @class */ (function () {
         var selectNode = e.selectNode[0];
         var imgHeight = this.i10n.getConstant('imageHeight');
         var imgWidth = this.i10n.getConstant('imageWidth');
-        var imgSizeWrap = this.parent.createElement('div', { className: 'e-img-sizewrap' });
+        var imgSizeWrap = this.parent.createElement('div', { className: 'e-img-sizewrap' + ' ' + this.parent.cssClass });
         var widthVal = isNullOrUndefined(this.changedWidthValue) && (selectNode.style.width.toString() === 'auto' ||
             selectNode.style.width !== '') ? selectNode.style.width : !isNullOrUndefined(this.changedWidthValue) ?
             this.changedWidthValue : (parseInt(selectNode.getClientRects()[0].width.toString(), 10)).toString();
@@ -21816,12 +22012,12 @@ var Image = /** @__PURE__ @class */ (function () {
             this.changedHeightValue : (parseInt(selectNode.getClientRects()[0].height.toString(), 10)).toString();
         this.changedWidthValue = null;
         this.changedHeightValue = null;
-        var content = '<div class="e-rte-label"><label>' + imgWidth +
-            '</label></div><div class="e-rte-field"><input type="text" id="imgwidth" class="e-img-width" value=' +
+        var content = '<div class="e-rte-label' + ' ' + this.parent.cssClass + '"><label>' + imgWidth +
+            '</label></div><div class="e-rte-field' + ' ' + this.parent.cssClass + '"><input type="text" id="imgwidth" class="e-img-width' + ' ' + this.parent.cssClass + '" value=' +
             widthVal
             + ' /></div>' +
-            '<div class="e-rte-label">' + '<label>' + imgHeight + '</label></div><div class="e-rte-field"> ' +
-            '<input type="text" id="imgheight" class="e-img-height" value=' +
+            '<div class="e-rte-label' + ' ' + this.parent.cssClass + '">' + '<label>' + imgHeight + '</label></div><div class="e-rte-field' + ' ' + this.parent.cssClass + '"> ' +
+            '<input type="text" id="imgheight" class="e-img-height' + ' ' + this.parent.cssClass + '" value=' +
             heightVal
             + ' /></div>';
         var contentElem = parseHtml(content);
@@ -21911,16 +22107,16 @@ var Image = /** @__PURE__ @class */ (function () {
             save = e.selection;
             selectParent = e.selectParent;
         }
-        var uploadParentEle = this.parent.createElement('div', { className: 'e-img-uploadwrap e-droparea' });
+        var uploadParentEle = this.parent.createElement('div', { className: 'e-img-uploadwrap e-droparea' + ' ' + this.parent.cssClass });
         var deviceImgUpMsg = this.i10n.getConstant('imageDeviceUploadMessage');
         var imgUpMsg = this.i10n.getConstant('imageUploadMessage');
-        var span = this.parent.createElement('span', { className: 'e-droptext' });
+        var span = this.parent.createElement('span', { className: 'e-droptext' + ' ' + this.parent.cssClass });
         var spanMsg = this.parent.createElement('span', {
-            className: 'e-rte-upload-text', innerHTML: ((Browser.isDevice) ? deviceImgUpMsg : imgUpMsg)
+            className: 'e-rte-upload-text' + ' ' + this.parent.cssClass, innerHTML: ((Browser.isDevice) ? deviceImgUpMsg : imgUpMsg)
         });
         span.appendChild(spanMsg);
         var btnEle = this.parent.createElement('button', {
-            className: 'e-browsebtn', id: this.rteID + '_insertImage', attrs: { autofocus: 'true', type: 'button' }
+            className: 'e-browsebtn' + ' ' + this.parent.cssClass, id: this.rteID + '_insertImage', attrs: { autofocus: 'true', type: 'button' }
         });
         span.appendChild(btnEle);
         uploadParentEle.appendChild(span);
@@ -21932,7 +22128,7 @@ var Image = /** @__PURE__ @class */ (function () {
         var btnClick = (Browser.isDevice) ? span : btnEle;
         EventHandler.add(btnClick, 'click', this.fileSelect, this);
         var uploadEle = this.parent.createElement('input', {
-            id: this.rteID + '_upload', attrs: { type: 'File', name: 'UploadFiles' }
+            id: this.rteID + '_upload', attrs: { type: 'File', name: 'UploadFiles' }, className: this.parent.cssClass
         });
         uploadParentEle.appendChild(uploadEle);
         var altText;
@@ -22622,7 +22818,7 @@ var ViewSource = /** @__PURE__ @class */ (function () {
         this.parent.formatter.editorManager.observer.off(KEY_DOWN_HANDLER, this.onKeyDown);
     };
     ViewSource.prototype.getSourceCode = function () {
-        return this.parent.createElement('textarea', { className: 'e-rte-srctextarea' });
+        return this.parent.createElement('textarea', { className: 'e-rte-srctextarea' + ' ' + this.parent.cssClass });
     };
     ViewSource.prototype.wireEvent = function (element) {
         this.keyboardModule = new KeyboardEvents$1(element, {
@@ -22854,6 +23050,8 @@ var Table = /** @__PURE__ @class */ (function () {
         this.pageX = null;
         this.pageY = null;
         this.moveEle = null;
+        this.currentColumnResize = '';
+        this.currentMarginLeft = 0;
         this.parent = parent;
         this.rteID = parent.element.id;
         this.l10n = serviceLocator.getService('rteLocale');
@@ -23021,6 +23219,7 @@ var Table = /** @__PURE__ @class */ (function () {
                 }
                 else if (ele && ele.querySelectorAll('table').length > 0) {
                     this.removeResizeElement();
+                    this.hideTableQuickToolbar();
                 }
             }
             if (ele && ele.tagName !== 'TD' && ele.tagName !== 'TH') {
@@ -23397,7 +23596,7 @@ var Table = /** @__PURE__ @class */ (function () {
     };
     Table.prototype.tableResizeEleCreation = function (table, e) {
         this.parent.preventDefaultResize(e);
-        var columns = Array.prototype.slice.call(table.rows[this.calMaxCol(table)].cells, 1);
+        var columns = table.rows[this.calMaxCol(table)].cells;
         var rows = [];
         for (var i = 0; i < table.rows.length; i++) {
             rows.push(Array.prototype.slice.call(table.rows[i].cells, 0, 1)[0]);
@@ -23405,15 +23604,21 @@ var Table = /** @__PURE__ @class */ (function () {
         var height = parseInt(getComputedStyle(table).height, 10);
         var width = parseInt(getComputedStyle(table).width, 10);
         var pos = this.calcPos(table);
-        for (var i = 0; columns.length > i; i++) {
+        for (var i = 0; columns.length >= i; i++) {
             var colReEle = this.parent.createElement('span', {
                 attrs: {
-                    'data-col': (i + 1).toString(), 'unselectable': 'on', 'contenteditable': 'false'
+                    'data-col': (i).toString(), 'unselectable': 'on', 'contenteditable': 'false'
                 }
             });
             colReEle.classList.add(CLS_RTE_TABLE_RESIZE, CLS_TB_COL_RES);
-            colReEle.style.cssText = 'height: ' + height + 'px; width: 4px; top: ' + pos.top +
-                'px; left:' + (pos.left + this.calcPos(columns[i]).left) + 'px;';
+            if (columns.length === i) {
+                colReEle.style.cssText = 'height: ' + height + 'px; width: 4px; top: ' + pos.top +
+                    'px; left:' + (pos.left + this.calcPos(columns[i - 1]).left + columns[i - 1].offsetWidth) + 'px;';
+            }
+            else {
+                colReEle.style.cssText = 'height: ' + height + 'px; width: 4px; top: ' + pos.top +
+                    'px; left:' + (pos.left + this.calcPos(columns[i]).left) + 'px;';
+            }
             this.contentModule.getEditPanel().appendChild(colReEle);
         }
         for (var i = 0; rows.length > i; i++) {
@@ -23431,7 +23636,7 @@ var Table = /** @__PURE__ @class */ (function () {
             this.contentModule.getEditPanel().appendChild(rowReEle);
         }
         var tableReBox = this.parent.createElement('span', {
-            className: CLS_TB_BOX_RES, attrs: {
+            className: CLS_TB_BOX_RES + ' ' + this.parent.cssClass, attrs: {
                 'data-col': columns.length.toString(), 'unselectable': 'on', 'contenteditable': 'false'
             }
         });
@@ -23530,7 +23735,19 @@ var Table = /** @__PURE__ @class */ (function () {
             this.hideTableQuickToolbar();
             if (target.classList.contains(CLS_TB_COL_RES)) {
                 this.resizeBtnStat.column = true;
-                this.columnEle = this.curTable.rows[this.calMaxCol(this.curTable)].cells[parseInt(target.getAttribute('data-col'), 10)];
+                if (parseInt(target.getAttribute('data-col'), 10) === this.curTable.rows[this.calMaxCol(this.curTable)].cells.length) {
+                    this.currentColumnResize = 'last';
+                    this.columnEle = this.curTable.rows[this.calMaxCol(this.curTable)].cells[parseInt(target.getAttribute('data-col'), 10) - 1];
+                }
+                else {
+                    if (parseInt(target.getAttribute('data-col'), 10) === 0) {
+                        this.currentColumnResize = 'first';
+                    }
+                    else {
+                        this.currentColumnResize = 'middle';
+                    }
+                    this.columnEle = this.curTable.rows[this.calMaxCol(this.curTable)].cells[parseInt(target.getAttribute('data-col'), 10)];
+                }
                 this.colIndex = this.columnEle.cellIndex;
                 this.moveEle = e.target;
                 this.appendHelper();
@@ -23574,7 +23791,7 @@ var Table = /** @__PURE__ @class */ (function () {
     };
     Table.prototype.appendHelper = function () {
         this.helper = this.parent.createElement('div', {
-            className: 'e-table-rhelper'
+            className: 'e-table-rhelper' + ' ' + this.parent.cssClass
         });
         if (Browser.isDevice) {
             this.helper.classList.add('e-reicon');
@@ -23587,7 +23804,8 @@ var Table = /** @__PURE__ @class */ (function () {
         if (this.resizeBtnStat.column) {
             this.helper.classList.add('e-column-helper');
             this.helper.style.cssText = 'height: ' + getComputedStyle(this.curTable).height + '; top: ' +
-                pos.top + 'px; left:' + (pos.left + this.calcPos(this.columnEle).left - 1) + 'px;';
+                pos.top + 'px; left:' + ((pos.left + this.calcPos(this.columnEle).left) +
+                (this.currentColumnResize === 'last' ? this.columnEle.offsetWidth + 2 : 0) - 1) + 'px;';
         }
         else {
             this.helper.classList.add('e-row-helper');
@@ -23599,7 +23817,8 @@ var Table = /** @__PURE__ @class */ (function () {
     Table.prototype.updateHelper = function () {
         var pos = this.calcPos(this.curTable);
         if (this.resizeBtnStat.column) {
-            var left = pos.left + this.calcPos(this.columnEle).left - 1;
+            var left = (pos.left + this.calcPos(this.columnEle).left) +
+                (this.currentColumnResize === 'last' ? this.columnEle.offsetWidth + 2 : 0) - 1;
             this.helper.style.left = left + 'px';
         }
         else {
@@ -23638,23 +23857,66 @@ var Table = /** @__PURE__ @class */ (function () {
                 var paddingSize = +getComputedStyle(_this.contentModule.getEditPanel()).paddingRight.match(/\d/g).join('');
                 var rteWidth = _this.contentModule.getEditPanel().offsetWidth - (_this.contentModule.getEditPanel().offsetWidth -
                     _this.contentModule.getEditPanel().clientWidth) - paddingSize * 2;
+                var widthCompare = void 0;
+                if (!isNullOrUndefined(_this.curTable.parentElement.closest('table'))) {
+                    var currentTd = _this.curTable.closest('td');
+                    var currentTDPad = +getComputedStyle(currentTd).paddingRight.match(/\d/g).join('');
+                    // Padding of the current table with the parent element multiply with 2.
+                    widthCompare = currentTd.offsetWidth - (currentTd.offsetWidth - currentTd.clientWidth) - currentTDPad * 2;
+                }
+                else {
+                    widthCompare = rteWidth;
+                }
                 if (_this.resizeBtnStat.column) {
-                    var cellColl = _this.curTable.rows[_this.calMaxCol(_this.curTable)].cells;
                     var width = parseFloat(_this.columnEle.offsetWidth.toString());
-                    var actualwid = width - mouseX;
-                    var totalwid = parseFloat(_this.columnEle.offsetWidth.toString()) +
-                        parseFloat(cellColl[_this.colIndex - 1].offsetWidth.toString());
-                    for (var i = 0; i < _this.curTable.rows.length; i++) {
-                        if ((totalwid - actualwid) > 20 && actualwid > 20) {
-                            var leftColumnWidth = totalwid - actualwid;
-                            var rightColWidth = actualwid;
-                            if (!isNullOrUndefined(_this.curTable.rows[i].cells[_this.colIndex - 1])) {
-                                _this.curTable.rows[i].cells[_this.colIndex - 1].style.width =
-                                    _this.convertPixelToPercentage(leftColumnWidth, tableWidth) + '%';
+                    var cellRow = _this.curTable.rows[0].cells[0].nodeName === 'TH' ? 1 : 0;
+                    var currentTableWidth = parseFloat(_this.curTable.style.width.split('%')[0]);
+                    var currentColumnCellWidth = parseFloat(_this.curTable.rows[cellRow].cells[_this.colIndex].style.width.split('%')[0]);
+                    if (_this.currentColumnResize === 'first') {
+                        mouseX = mouseX - 0.75; //This was done for to make the gripper and the table first/last column will be close.
+                        _this.removeResizeElement();
+                        // Below the value '100' is the 100% width of the parent element.
+                        if (((mouseX !== 0 && 5 < currentColumnCellWidth) || mouseX < 0) && currentTableWidth <= 100 && _this.convertPixelToPercentage(tableWidth - mouseX, widthCompare) <= 100) {
+                            var firstColumnsCell = _this.findFirstLastColCells(_this.curTable, true);
+                            _this.curTable.style.width = _this.convertPixelToPercentage(tableWidth - mouseX, widthCompare) > 100 ? (100 + '%') : (_this.convertPixelToPercentage(tableWidth - mouseX, widthCompare) + '%');
+                            var differenceWidth = currentTableWidth - _this.convertPixelToPercentage(tableWidth - mouseX, widthCompare);
+                            _this.currentMarginLeft = _this.currentMarginLeft + differenceWidth;
+                            _this.curTable.style.marginLeft = 'calc(' + (_this.curTable.style.width === '100%' ? 0 : _this.currentMarginLeft) + '%)';
+                            for (var i = 0; i < firstColumnsCell.length; i++) {
+                                _this.curTable.rows[i].cells[_this.colIndex].style.width = (currentColumnCellWidth - differenceWidth) + '%';
                             }
-                            if (!isNullOrUndefined(_this.curTable.rows[i].cells[_this.colIndex])) {
-                                _this.curTable.rows[i].cells[_this.colIndex].style.width =
-                                    _this.convertPixelToPercentage(rightColWidth, tableWidth) + '%';
+                        }
+                    }
+                    else if (_this.currentColumnResize === 'last') {
+                        mouseX = mouseX + 0.75; //This was done for to make the gripper and the table first/last column will be close.
+                        _this.removeResizeElement();
+                        // Below the value '100' is the 100% width of the parent element.
+                        if (((mouseX !== 0 && 5 < currentColumnCellWidth) || mouseX > 0) && currentTableWidth <= 100 && _this.convertPixelToPercentage(tableWidth + mouseX, widthCompare) <= 100) {
+                            var lastColumnsCell = _this.findFirstLastColCells(_this.curTable, false);
+                            _this.curTable.style.width = _this.convertPixelToPercentage(tableWidth + mouseX, widthCompare) > 100 ? (100 + '%') : (_this.convertPixelToPercentage(tableWidth + mouseX, widthCompare) + '%');
+                            var differenceWidth = currentTableWidth - _this.convertPixelToPercentage(tableWidth + mouseX, widthCompare);
+                            for (var i = 0; i < lastColumnsCell.length; i++) {
+                                _this.curTable.rows[i].cells[_this.colIndex].style.width = (currentColumnCellWidth - differenceWidth) + '%';
+                            }
+                        }
+                    }
+                    else {
+                        var cellColl = _this.curTable.rows[_this.calMaxCol(_this.curTable)].cells;
+                        var actualwid = width - mouseX;
+                        var totalwid = parseFloat(_this.columnEle.offsetWidth.toString()) +
+                            parseFloat(cellColl[_this.colIndex - 1].offsetWidth.toString());
+                        for (var i = 0; i < _this.curTable.rows.length; i++) {
+                            if ((totalwid - actualwid) > 20 && actualwid > 20) {
+                                var leftColumnWidth = totalwid - actualwid;
+                                var rightColWidth = actualwid;
+                                if (!isNullOrUndefined(_this.curTable.rows[i].cells[_this.colIndex - 1])) {
+                                    _this.curTable.rows[i].cells[_this.colIndex - 1].style.width =
+                                        _this.convertPixelToPercentage(leftColumnWidth, tableWidth) + '%';
+                                }
+                                if (!isNullOrUndefined(_this.curTable.rows[i].cells[_this.colIndex])) {
+                                    _this.curTable.rows[i].cells[_this.colIndex].style.width =
+                                        _this.convertPixelToPercentage(rightColWidth, tableWidth) + '%';
+                                }
                             }
                         }
                     }
@@ -23678,7 +23940,7 @@ var Table = /** @__PURE__ @class */ (function () {
                         EventHandler.remove(_this.contentModule.getEditPanel(), 'mouseover', _this.resizeHelper);
                     }
                     var widthType = _this.curTable.style.width.indexOf('%') > -1;
-                    _this.curTable.style.width = widthType ? _this.convertPixelToPercentage(tableWidth + mouseX, rteWidth) + '%'
+                    _this.curTable.style.width = widthType ? _this.convertPixelToPercentage(tableWidth + mouseX, widthCompare) + '%'
                         : tableWidth + mouseX + 'px';
                     _this.curTable.style.height = tableHeight + mouseY + 'px';
                     tableReBox.classList.add('e-rbox-select');
@@ -23688,6 +23950,17 @@ var Table = /** @__PURE__ @class */ (function () {
             }
         });
     };
+    Table.prototype.findFirstLastColCells = function (table, isFirst) {
+        var resultColumns = [];
+        var rows = table.querySelectorAll('tr');
+        for (var i = 0; i < rows.length; i++) {
+            if (rows[i].closest('table') === table) {
+                var columns = rows[i].querySelectorAll('th, td');
+                resultColumns.push(isFirst ? columns[0] : columns[columns.length - 1]);
+            }
+        }
+        return resultColumns;
+    };
     Table.prototype.convertPixelToPercentage = function (value, offsetValue) {
         return (value / offsetValue) * 100;
     };
@@ -23706,14 +23979,14 @@ var Table = /** @__PURE__ @class */ (function () {
                 EventHandler.add(this.contentModule.getEditPanel(), 'mouseover', this.resizeHelper, this);
             }
             this.removeResizeElement();
-            if (this.helper && this.contentModule.getEditPanel().contains(this.helper)) {
-                detach(this.helper);
-                this.helper = null;
-            }
-            this.pageX = null;
-            this.pageY = null;
-            this.moveEle = null;
         }
+        if (this.helper && this.contentModule.getEditPanel().contains(this.helper)) {
+            detach(this.helper);
+            this.helper = null;
+        }
+        this.pageX = null;
+        this.pageY = null;
+        this.moveEle = null;
         var args = { event: e, requestType: 'table' };
         this.parent.trigger(resizeStop, args);
         this.parent.formatter.saveData();
@@ -23768,16 +24041,16 @@ var Table = /** @__PURE__ @class */ (function () {
         this.hideTableQuickToolbar();
         var header = '1X1';
         var insertbtn = this.l10n.getConstant('inserttablebtn');
-        this.dlgDiv = this.parent.createElement('div', { className: 'e-rte-table-popup', id: this.rteID + '_table' });
-        this.tblHeader = this.parent.createElement('div', { className: 'e-rte-popup-header' });
+        this.dlgDiv = this.parent.createElement('div', { className: 'e-rte-table-popup' + ' ' + this.parent.cssClass, id: this.rteID + '_table' });
+        this.tblHeader = this.parent.createElement('div', { className: 'e-rte-popup-header' + ' ' + this.parent.cssClass });
         this.tblHeader.innerHTML = header;
         this.dlgDiv.appendChild(this.tblHeader);
-        var tableDiv = this.parent.createElement('div', { className: 'e-rte-table-span' });
+        var tableDiv = this.parent.createElement('div', { className: 'e-rte-table-span' + ' ' + this.parent.cssClass });
         this.drawTable(tableDiv, args);
         this.dlgDiv.appendChild(tableDiv);
-        this.dlgDiv.appendChild(this.parent.createElement('span', { className: 'e-span-border' }));
+        this.dlgDiv.appendChild(this.parent.createElement('span', { className: 'e-span-border' + ' ' + this.parent.cssClass }));
         var btnEle = this.parent.createElement('button', {
-            className: 'e-insert-table-btn', id: this.rteID + '_insertTable',
+            className: 'e-insert-table-btn' + ' ' + this.parent.cssClass, id: this.rteID + '_insertTable',
             attrs: { type: 'button', tabindex: '0' }
         });
         if (!isNullOrUndefined(this.parent.getToolbarElement().querySelector('.e-expended-nav'))) {
@@ -23839,7 +24112,7 @@ var Table = /** @__PURE__ @class */ (function () {
             !target.offsetParent.classList.contains('e-quick-dropdown') &&
             !target.offsetParent.classList.contains('e-rte-backgroundcolor-dropdown') && !closest(target, '.e-rte-dropdown-popup')
             && !closest(target, '.e-rte-elements')) {
-            removeClass(this.parent.element.querySelectorAll('table td'), CLS_TABLE_SEL);
+            removeClass(this.parent.inputElement.querySelectorAll('table td'), CLS_TABLE_SEL);
             if (!Browser.isIE) {
                 this.hideTableQuickToolbar();
             }
@@ -23853,10 +24126,10 @@ var Table = /** @__PURE__ @class */ (function () {
         var rowDiv;
         var tableCell;
         for (var row = 0; row < 3; row++) {
-            rowDiv = this.parent.createElement('div', { className: 'e-rte-table-row', attrs: { 'data-column': '' + row } });
+            rowDiv = this.parent.createElement('div', { className: 'e-rte-table-row' + ' ' + this.parent.cssClass, attrs: { 'data-column': '' + row } });
             for (var col = 0; col < 10; col++) {
                 var display = (row > 2) ? 'none' : 'inline-block';
-                tableCell = this.parent.createElement('div', { className: 'e-rte-tablecell e-default', attrs: { 'data-cell': '' + col } });
+                tableCell = this.parent.createElement('div', { className: 'e-rte-tablecell e-default' + ' ' + this.parent.cssClass, attrs: { 'data-cell': '' + col } });
                 rowDiv.appendChild(tableCell);
                 tableCell.style.display = display;
                 if (col === 0 && row === 0) {
@@ -23880,15 +24153,15 @@ var Table = /** @__PURE__ @class */ (function () {
             height: 'initial', width: '290px', content: editContent, header: editHeader,
             buttons: [{
                     click: this.applyProperties.bind(this, args),
-                    buttonModel: { content: update, cssClass: 'e-flat e-size-update', isPrimary: true }
+                    buttonModel: { content: update, cssClass: 'e-flat e-size-update' + ' ' + this.parent.cssClass, isPrimary: true }
                 },
                 {
                     click: function (e) {
                         _this.cancelDialog(e);
                     },
-                    buttonModel: { cssClass: 'e-flat e-cancel', content: cancel }
+                    buttonModel: { cssClass: 'e-flat e-cancel' + ' ' + this.parent.cssClass, content: cancel }
                 }],
-            cssClass: this.parent.cssClass
+            cssClass: this.editdlgObj.cssClass + ' e-rte-edit-table-prop-dialog'
         });
         this.editdlgObj.element.style.maxHeight = 'none';
         this.editdlgObj.content.querySelector('input').focus();
@@ -23910,13 +24183,13 @@ var Table = /** @__PURE__ @class */ (function () {
             height: 'initial', width: '290px', content: dlgContent,
             buttons: [{
                     click: proxy.customTable.bind(this, args),
-                    buttonModel: { content: insert, cssClass: 'e-flat e-insert-table', isPrimary: true }
+                    buttonModel: { content: insert, cssClass: 'e-flat e-insert-table' + ' ' + proxy.parent.cssClass, isPrimary: true }
                 },
                 {
                     click: function (e) {
                         proxy.cancelDialog(e);
                     },
-                    buttonModel: { cssClass: 'e-flat e-cancel', content: cancel }
+                    buttonModel: { cssClass: 'e-flat e-cancel' + ' ' + proxy.parent.cssClass, content: cancel }
                 }]
         });
         if (!isNullOrUndefined(proxy.parent.cssClass)) {
@@ -23928,10 +24201,10 @@ var Table = /** @__PURE__ @class */ (function () {
     Table.prototype.tableCellDlgContent = function () {
         var tableColumn = this.l10n.getConstant('columns');
         var tableRow = this.l10n.getConstant('rows');
-        var tableWrap = this.parent.createElement('div', { className: 'e-cell-wrap' });
-        var content = '<div class="e-rte-field"><input type="text" '
-            + ' data-role ="none" id="tableColumn" class="e-table-column"/></div>'
-            + '<div class="e-rte-field"><input type="text" data-role ="none" id="tableRow" class="e-table-row" /></div>';
+        var tableWrap = this.parent.createElement('div', { className: 'e-cell-wrap' + ' ' + this.parent.cssClass });
+        var content = '<div class="e-rte-field' + ' ' + this.parent.cssClass + '"><input type="text" '
+            + ' data-role ="none" id="tableColumn" class="e-table-column' + ' ' + this.parent.cssClass + '"/></div>'
+            + '<div class="e-rte-field' + ' ' + this.parent.cssClass + '"><input type="text" data-role ="none" id="tableRow" class="e-table-row' + ' ' + this.parent.cssClass + '" /></div>';
         var contentElem = parseHtml(content);
         tableWrap.appendChild(contentElem);
         this.columnTextBox = new NumericTextBox({
@@ -23975,7 +24248,7 @@ var Table = /** @__PURE__ @class */ (function () {
             return;
         }
         var tableDialog = this.parent.createElement('div', {
-            className: 'e-rte-edit-table', id: this.rteID + '_tabledialog'
+            className: 'e-rte-edit-table' + ' ' + this.parent.cssClass, id: this.rteID + '_tabledialog'
         });
         this.parent.element.appendChild(tableDialog);
         var insert = this.l10n.getConstant('dialogInsert');
@@ -23990,13 +24263,13 @@ var Table = /** @__PURE__ @class */ (function () {
             position: { X: 'center', Y: (Browser.isDevice) ? 'center' : 'top' },
             isModal: Browser.isDevice,
             buttons: [{
-                    buttonModel: { content: insert, cssClass: 'e-flat e-insert-table', isPrimary: true }
+                    buttonModel: { content: insert, cssClass: 'e-flat e-insert-table' + ' ' + this.parent.cssClass, isPrimary: true }
                 },
                 {
                     click: function (e) {
                         _this.cancelDialog(e);
                     },
-                    buttonModel: { cssClass: 'e-flat e-cancel', content: cancel }
+                    buttonModel: { cssClass: 'e-flat e-cancel' + ' ' + this.parent.cssClass, content: cancel }
                 }],
             target: (Browser.isDevice) ? document.body : this.parent.element,
             animationSettings: { effect: 'None' },
@@ -24064,13 +24337,13 @@ var Table = /** @__PURE__ @class */ (function () {
         var tableWidth = this.l10n.getConstant('tableWidth');
         var cellPadding = this.l10n.getConstant('cellpadding');
         var cellSpacing = this.l10n.getConstant('cellspacing');
-        var tableWrap = this.parent.createElement('div', { className: 'e-table-sizewrap' });
+        var tableWrap = this.parent.createElement('div', { className: 'e-table-sizewrap' + ' ' + this.parent.cssClass });
         var widthVal = closest(selectNode, 'table').getClientRects()[0].width;
         var padVal = closest(selectNode, 'td').style.padding;
         var brdSpcVal = closest(selectNode, 'table').getAttribute('cellspacing');
-        var content = '<div class="e-rte-field"><input type="text" data-role ="none" id="tableWidth" class="e-table-width" '
-            + ' /></div>' + '<div class="e-rte-field"><input type="text" data-role ="none" id="cellPadding" class="e-cell-padding" />'
-            + ' </div><div class="e-rte-field"><input type="text" data-role ="none" id="cellSpacing" class="e-cell-spacing" /></div>';
+        var content = '<div class="e-rte-field' + ' ' + this.parent.cssClass + '"><input type="text" data-role ="none" id="tableWidth" class="e-table-width' + ' ' + this.parent.cssClass + '" '
+            + ' /></div>' + '<div class="e-rte-field' + ' ' + this.parent.cssClass + '"><input type="text" data-role ="none" id="cellPadding" class="e-cell-padding' + ' ' + this.parent.cssClass + '" />'
+            + ' </div><div class="e-rte-field' + ' ' + this.parent.cssClass + '"><input type="text" data-role ="none" id="cellSpacing" class="e-cell-spacing' + ' ' + this.parent.cssClass + '" /></div>';
         var contentElem = parseHtml(content);
         tableWrap.appendChild(contentElem);
         this.tableWidthNum = new NumericTextBox({
@@ -25215,26 +25488,7 @@ var __decorate$1 = (undefined && undefined.__decorate) || function (decorators,
 var RichTextEditor = /** @__PURE__ @class */ (function (_super) {
     __extends$4(RichTextEditor, _super);
     function RichTextEditor(options, element) {
-        var _this = _super.call(this, options, element) || this;
-        _this.defaultResetValue = null;
-        _this.isResizeInitialized = false;
-        /**
-         * @hidden
-         * @deprecated
-         */
-        _this.isFocusOut = false;
-        /**
-         * @hidden
-         * @deprecated
-         */
-        _this.isRTE = false;
-        /**
-         * @hidden
-         * @deprecated
-         */
-        _this.isBlur = true;
-        _this.needsID = true;
-        return _this;
+        return _super.call(this, options, element) || this;
     }
     /**
      * To provide the array of modules needed for component rendering
@@ -25315,6 +25569,14 @@ var RichTextEditor = /** @__PURE__ @class */ (function (_super) {
         // eslint-disable-next-line
         (this.enabled) ? this.eventInitializer() : this.unWireEvents();
     };
+    RichTextEditor.prototype.initializeValue = function () {
+        this.isFocusOut = false;
+        this.isRTE = false;
+        this.isBlur = true;
+        this.needsID = true;
+        this.defaultResetValue = null;
+        this.isResizeInitialized = false;
+    };
     /**
      * For internal use only - Initialize the event handler;
      *
@@ -25323,6 +25585,7 @@ var RichTextEditor = /** @__PURE__ @class */ (function (_super) {
      * @private
      */
     RichTextEditor.prototype.preRender = function () {
+        this.initializeValue();
         this.onBlurHandler = this.blurHandler.bind(this);
         this.onFocusHandler = this.focusHandler.bind(this);
         this.onResizeHandler = this.resizeHandler.bind(this);
@@ -25379,11 +25642,18 @@ var RichTextEditor = /** @__PURE__ @class */ (function (_super) {
         }
         else {
             this.valueContainer = this.createElement('textarea', {
-                id: this.getID() + '-value'
+                id: this.getID() + '-value',
+                attrs: { 'aria-labelledby': this.getID() }
             });
         }
         this.valueContainer.name = this.getID();
         addClass([this.valueContainer], CLS_RTE_HIDDEN);
+        if (!isNullOrUndefined(this.cssClass)) {
+            var currentClassList = this.cssClass.split(' ');
+            for (var i = 0; i < currentClassList.length; i++) {
+                addClass([this.valueContainer], currentClassList[i]);
+            }
+        }
         this.element.appendChild(this.valueContainer);
     };
     /**
@@ -25644,19 +25914,22 @@ var RichTextEditor = /** @__PURE__ @class */ (function (_super) {
         var currentEndContainer = range.endContainer;
         var currentStartOffset = range.startOffset;
         var isSameContainer = currentStartContainer === currentEndContainer ? true : false;
-        var currentEndOffset;
         var endNode = range.endContainer.nodeName === '#text' ? range.endContainer.parentElement :
             range.endContainer;
         var closestLI = closest(endNode, 'LI');
         if (!isNullOrUndefined(closestLI) && endNode.textContent.length === range.endOffset &&
             !range.collapsed && isNullOrUndefined(endNode.nextElementSibling)) {
-            closestLI.textContent = closestLI.textContent.trim();
-            currentEndOffset = closestLI.textContent.length - 1;
+            for (var i = 0; i < closestLI.childNodes.length; i++) {
+                if (closestLI.childNodes[i].nodeName === "#text" && closestLI.childNodes[i].textContent.trim().length === 0) {
+                    detach(closestLI.childNodes[i]);
+                    i--;
+                }
+            }
             var currentLastElem = closestLI;
-            while (currentLastElem.nodeName !== '#text') {
+            while (currentLastElem.lastChild !== null && currentLastElem.nodeName !== '#text') {
                 currentLastElem = currentLastElem.lastChild;
             }
-            this.formatter.editorManager.nodeSelection.setSelectionText(this.contentModule.getDocument(), isSameContainer ? currentLastElem : currentStartContainer, currentLastElem, currentStartOffset, currentLastElem.textContent.length);
+            this.formatter.editorManager.nodeSelection.setSelectionText(this.contentModule.getDocument(), isSameContainer ? (currentLastElem.nodeName === 'BR' && !isNullOrUndefined(currentLastElem.previousSibling) ? currentLastElem.previousSibling : currentLastElem) : currentStartContainer, currentLastElem, currentStartOffset, (currentLastElem.nodeName === 'BR' ? 0 : currentLastElem.textContent.length));
         }
     };
     /**
@@ -26022,6 +26295,12 @@ var RichTextEditor = /** @__PURE__ @class */ (function (_super) {
             for (var i = 0; i < this.originalElement.classList.length; i++) {
                 addClass([this.element], this.originalElement.classList[i]);
             }
+            if (!isNullOrUndefined(this.cssClass)) {
+                var currentClassList = this.cssClass.split(' ');
+                for (var i = 0; i < currentClassList.length; i++) {
+                    addClass([this.element], currentClassList[i]);
+                }
+            }
             removeClass([this.element], CLS_RTE_HIDDEN);
         }
         else {
@@ -26397,7 +26676,7 @@ var RichTextEditor = /** @__PURE__ @class */ (function (_super) {
         if (this.inputElement && this.placeholder && this.iframeSettings.enable !== true) {
             if (this.editorMode !== 'Markdown') {
                 if (!this.placeHolderWrapper) {
-                    this.placeHolderWrapper = this.createElement('span', { className: 'rte-placeholder e-rte-placeholder' });
+                    this.placeHolderWrapper = this.createElement('span', { className: 'rte-placeholder e-rte-placeholder' + ' ' + this.cssClass });
                     if (this.inputElement) {
                         this.inputElement.parentElement.insertBefore(this.placeHolderWrapper, this.inputElement);
                     }
@@ -26647,7 +26926,7 @@ var RichTextEditor = /** @__PURE__ @class */ (function (_super) {
                 this.setProperties({ value: this.valueTemplate });
             }
             else {
-                var compiledTemplate = compile(this.valueTemplate)("", this, 'valueTemplate');
+                var compiledTemplate = compile(this.valueTemplate)('', this, 'valueTemplate');
                 for (var i = 0; i < compiledTemplate.length; i++) {
                     var item = compiledTemplate[i];
                     append([item], this.element);
@@ -27601,5 +27880,5 @@ var RichTextEditor = /** @__PURE__ @class */ (function (_super) {
  * Rich Text Editor component exported items
  */
 
-export { Toolbar$2 as Toolbar, KeyboardEvents$1 as KeyboardEvents, BaseToolbar, BaseQuickToolbar, QuickToolbar, Count, ColorPickerInput, MarkdownToolbarStatus, ExecCommandCallBack, ToolbarAction, MarkdownEditor, HtmlEditor, PasteCleanup, Resize, DropDownButtons, FileManager$1 as FileManager, FullScreen, setAttributes, HtmlToolbarStatus, XhtmlValidation, HTMLFormatter, Formatter, MarkdownFormatter, ContentRender, Render, ToolbarRenderer, Link, Image, ViewSource, Table, DialogRenderer, IframeContentRender, MarkdownRender, PopupRenderer, RichTextEditor, RenderType, ToolbarType, DialogType, executeGroup, created, destroyed, load, initialLoad, contentChanged, initialEnd, iframeMouseDown, destroy, toolbarClick, toolbarRefresh, refreshBegin, toolbarUpdated, bindOnEnd, renderColorPicker, htmlToolbarClick, markdownToolbarClick, destroyColorPicker, modelChanged, keyUp, keyDown, mouseUp, toolbarCreated, toolbarRenderComplete, enableFullScreen, disableFullScreen, dropDownSelect, beforeDropDownItemRender, execCommandCallBack, imageToolbarAction, linkToolbarAction, windowResize, resizeStart, onResize, resizeStop, undo, redo, insertLink, unLink, editLink, openLink, actionBegin, actionComplete, updatedToolbarStatus, actionSuccess, updateToolbarItem, insertImage, insertCompleted, imageLeft, imageRight, imageCenter, imageBreak, imageInline, imageLink, imageAlt, imageDelete, imageCaption, imageSize, sourceCode, updateSource, toolbarOpen, beforeDropDownOpen, selectionSave, selectionRestore, expandPopupClick, count, contentFocus, contentBlur, mouseDown, sourceCodeMouseDown, editAreaClick, scroll, contentscroll, colorPickerChanged, tableColorPickerChanged, focusChange, selectAll$1 as selectAll, selectRange, getSelectedHtml, renderInlineToolbar, paste, imgModule, rtlMode, createTable, docClick, tableToolbarAction, checkUndo, readOnlyMode, pasteClean, enterHandler, beforeDialogOpen, clearDialogObj, dialogOpen, beforeDialogClose, dialogClose, beforeQuickToolbarOpen, quickToolbarOpen, quickToolbarClose, popupHide, imageSelected, imageUploading, imageUploadSuccess, imageUploadFailed, imageRemoving, afterImageDelete, drop, xhtmlValidation, beforeImageUpload, resizeInitialized, renderFileManager, beforeImageDrop, dynamicModule, beforePasteCleanup, afterPasteCleanup, updateTbItemsStatus, showLinkDialog, closeLinkDialog, showImageDialog, closeImageDialog, showTableDialog, closeTableDialog, bindCssClass, blockInlineEmptyNodes, CLS_RTE, CLS_RTL, CLS_CONTENT, CLS_DISABLED, CLS_SCRIPT_SHEET, CLS_STYLE_SHEET, CLS_TOOLBAR, CLS_TB_FIXED, CLS_TB_FLOAT, CLS_TB_ABS_FLOAT, CLS_INLINE, CLS_TB_INLINE, CLS_RTE_EXPAND_TB, CLS_FULL_SCREEN, CLS_QUICK_TB, CLS_POP, CLS_TB_STATIC, CLS_QUICK_POP, CLS_QUICK_DROPDOWN, CLS_IMAGE_POP, CLS_INLINE_POP, CLS_INLINE_DROPDOWN, CLS_DROPDOWN_POPUP, CLS_DROPDOWN_ICONS, CLS_DROPDOWN_ITEMS, CLS_DROPDOWN_BTN, CLS_RTE_CONTENT, CLS_TB_ITEM, CLS_TB_EXTENDED, CLS_TB_WRAP, CLS_POPUP, CLS_SEPARATOR, CLS_MINIMIZE, CLS_MAXIMIZE, CLS_BACK, CLS_SHOW, CLS_HIDE, CLS_VISIBLE, CLS_FOCUS, CLS_RM_WHITE_SPACE, CLS_IMGRIGHT, CLS_IMGLEFT, CLS_IMGCENTER, CLS_IMGBREAK, CLS_CAPTION, CLS_RTE_CAPTION, CLS_CAPINLINE, CLS_IMGINLINE, CLS_COUNT, CLS_WARNING, CLS_ERROR, CLS_ICONS, CLS_ACTIVE, CLS_EXPAND_OPEN, CLS_RTE_ELEMENTS, CLS_TB_BTN, CLS_HR_SEPARATOR, CLS_TB_IOS_FIX, CLS_LIST_PRIMARY_CONTENT, CLS_NUMBERFORMATLIST_TB_BTN, CLS_BULLETFORMATLIST_TB_BTN, CLS_FORMATS_TB_BTN, CLS_FONT_NAME_TB_BTN, CLS_FONT_SIZE_TB_BTN, CLS_ALIGN_TB_BTN, CLS_FONT_COLOR_TARGET, CLS_BACKGROUND_COLOR_TARGET, CLS_COLOR_CONTENT, CLS_FONT_COLOR_DROPDOWN, CLS_BACKGROUND_COLOR_DROPDOWN, CLS_COLOR_PALETTE, CLS_FONT_COLOR_PICKER, CLS_BACKGROUND_COLOR_PICKER, CLS_RTE_READONLY, CLS_TABLE_SEL, CLS_TB_DASH_BOR, CLS_TB_ALT_BOR, CLS_TB_COL_RES, CLS_TB_ROW_RES, CLS_TB_BOX_RES, CLS_RTE_HIDDEN, CLS_RTE_PASTE_KEEP_FORMAT, CLS_RTE_PASTE_REMOVE_FORMAT, CLS_RTE_PASTE_PLAIN_FORMAT, CLS_RTE_PASTE_OK, CLS_RTE_PASTE_CANCEL, CLS_RTE_DIALOG_MIN_HEIGHT, CLS_RTE_RES_HANDLE, CLS_RTE_RES_EAST, CLS_RTE_IMAGE, CLS_RESIZE, CLS_IMG_FOCUS, CLS_RTE_DRAG_IMAGE, CLS_RTE_UPLOAD_POPUP, CLS_POPUP_OPEN, CLS_IMG_RESIZE, CLS_DROPAREA, CLS_IMG_INNER, CLS_UPLOAD_FILES, CLS_RTE_DIALOG_UPLOAD, CLS_RTE_RES_CNT, CLS_CUSTOM_TILE, CLS_NOCOLOR_ITEM, CLS_TABLE, CLS_TABLE_BORDER, CLS_RTE_TABLE_RESIZE, CLS_RTE_FIXED_TB_EXPAND, CLS_RTE_TB_ENABLED, getIndex, hasClass, getDropDownValue, isIDevice, getFormattedFontSize, pageYOffset, getTooltipText, setToolbarStatus, getCollection, getTBarItemsIndex, updateUndoRedoStatus, dispatchEvent, parseHtml, getTextNodesUnder, toObjectLowerCase, getEditValue, updateTextNode, getDefaultValue, isEditableValueEmpty, decode, sanitizeHelper, convertToBlob, getLocaleFontFormat, updateDropDownFontFormatLocale, ServiceLocator, RendererFactory, EditorManager, IMAGE, TABLE, LINK, INSERT_ROW, INSERT_COLUMN, DELETEROW, DELETECOLUMN, REMOVETABLE, TABLEHEADER, TABLE_VERTICAL_ALIGN, TABLE_MERGE, TABLE_VERTICAL_SPLIT, TABLE_HORIZONTAL_SPLIT, TABLE_MOVE, ALIGNMENT_TYPE, INDENT_TYPE, DEFAULT_TAG, BLOCK_TAGS, IGNORE_BLOCK_TAGS, TABLE_BLOCK_TAGS, SELECTION_TYPE, INSERTHTML_TYPE, INSERT_TEXT_TYPE, CLEAR_TYPE, SELF_CLOSING_TAGS, CLASS_IMAGE_RIGHT, CLASS_IMAGE_LEFT, CLASS_IMAGE_CENTER, CLASS_IMAGE_BREAK, CLASS_CAPTION, CLASS_RTE_CAPTION, CLASS_CAPTION_INLINE, CLASS_IMAGE_INLINE, Lists, markerClassName, DOMNode, Alignments, Indents, Formats, LinkCommand, InsertMethods, InsertTextExec, InsertHtmlExec, InsertHtml, IsFormatted, MsWordPaste, NodeCutter, ImageCommand, SelectionCommands, SelectionBasedExec, ClearFormatExec, UndoRedoManager, TableCommand, statusCollection, ToolbarStatus, NodeSelection, MarkdownParser, LISTS_COMMAND, selectionCommand, LINK_COMMAND, CLEAR_COMMAND, MD_TABLE, ClearFormat, MDLists, MDFormats, MarkdownSelection, UndoRedoCommands, MDSelectionFormats, MDLink, MDTable, markdownFormatTags, markdownSelectionTags, markdownListsTags, htmlKeyConfig, markdownKeyConfig, pasteCleanupGroupingTags, listConversionFilters, selfClosingTags, KEY_DOWN, ACTION, FORMAT_TYPE, KEY_DOWN_HANDLER, LIST_TYPE, KEY_UP_HANDLER, KEY_UP, MODEL_CHANGED_PLUGIN, MODEL_CHANGED, MS_WORD_CLEANUP_PLUGIN, MS_WORD_CLEANUP, ON_BEGIN, SPACE_ACTION };
+export { Toolbar$2 as Toolbar, KeyboardEvents$1 as KeyboardEvents, BaseToolbar, BaseQuickToolbar, QuickToolbar, Count, ColorPickerInput, MarkdownToolbarStatus, ExecCommandCallBack, ToolbarAction, MarkdownEditor, HtmlEditor, PasteCleanup, Resize, DropDownButtons, FileManager$1 as FileManager, FullScreen, setAttributes, HtmlToolbarStatus, XhtmlValidation, HTMLFormatter, Formatter, MarkdownFormatter, ContentRender, Render, ToolbarRenderer, Link, Image, ViewSource, Table, DialogRenderer, IframeContentRender, MarkdownRender, PopupRenderer, RichTextEditor, RenderType, ToolbarType, DialogType, executeGroup, created, destroyed, load, initialLoad, contentChanged, initialEnd, iframeMouseDown, destroy, toolbarClick, toolbarRefresh, refreshBegin, toolbarUpdated, bindOnEnd, renderColorPicker, htmlToolbarClick, markdownToolbarClick, destroyColorPicker, modelChanged, keyUp, keyDown, mouseUp, toolbarCreated, toolbarRenderComplete, enableFullScreen, disableFullScreen, dropDownSelect, beforeDropDownItemRender, execCommandCallBack, imageToolbarAction, linkToolbarAction, windowResize, resizeStart, onResize, resizeStop, undo, redo, insertLink, unLink, editLink, openLink, actionBegin, actionComplete, updatedToolbarStatus, actionSuccess, updateToolbarItem, insertImage, insertCompleted, imageLeft, imageRight, imageCenter, imageBreak, imageInline, imageLink, imageAlt, imageDelete, imageCaption, imageSize, sourceCode, updateSource, toolbarOpen, beforeDropDownOpen, selectionSave, selectionRestore, expandPopupClick, count, contentFocus, contentBlur, mouseDown, sourceCodeMouseDown, editAreaClick, scroll, contentscroll, colorPickerChanged, tableColorPickerChanged, focusChange, selectAll$1 as selectAll, selectRange, getSelectedHtml, renderInlineToolbar, paste, imgModule, rtlMode, createTable, docClick, tableToolbarAction, checkUndo, readOnlyMode, pasteClean, enterHandler, beforeDialogOpen, clearDialogObj, dialogOpen, beforeDialogClose, dialogClose, beforeQuickToolbarOpen, quickToolbarOpen, quickToolbarClose, popupHide, imageSelected, imageUploading, imageUploadSuccess, imageUploadFailed, imageRemoving, mediaSelected, mediaUploading, mediaUploadSuccess, mediaUploadFailed, mediaRemoving, afterImageDelete, afterMediaDelete, drop, xhtmlValidation, beforeImageUpload, beforeMediaUpload, resizeInitialized, renderFileManager, beforeImageDrop, dynamicModule, beforePasteCleanup, afterPasteCleanup, updateTbItemsStatus, showLinkDialog, closeLinkDialog, showImageDialog, closeImageDialog, closeAudioDialog, showTableDialog, closeTableDialog, bindCssClass, blockEmptyNodes, inlineEmptyNodes, CLS_RTE, CLS_RTL, CLS_CONTENT, CLS_DISABLED, CLS_SCRIPT_SHEET, CLS_STYLE_SHEET, CLS_TOOLBAR, CLS_TB_FIXED, CLS_TB_FLOAT, CLS_TB_ABS_FLOAT, CLS_INLINE, CLS_TB_INLINE, CLS_RTE_EXPAND_TB, CLS_FULL_SCREEN, CLS_QUICK_TB, CLS_POP, CLS_TB_STATIC, CLS_QUICK_POP, CLS_QUICK_DROPDOWN, CLS_IMAGE_POP, CLS_INLINE_POP, CLS_INLINE_DROPDOWN, CLS_DROPDOWN_POPUP, CLS_DROPDOWN_ICONS, CLS_DROPDOWN_ITEMS, CLS_DROPDOWN_BTN, CLS_RTE_CONTENT, CLS_TB_ITEM, CLS_TB_EXTENDED, CLS_TB_WRAP, CLS_POPUP, CLS_SEPARATOR, CLS_MINIMIZE, CLS_MAXIMIZE, CLS_BACK, CLS_SHOW, CLS_HIDE, CLS_VISIBLE, CLS_FOCUS, CLS_RM_WHITE_SPACE, CLS_IMGRIGHT, CLS_IMGLEFT, CLS_IMGCENTER, CLS_IMGBREAK, CLS_CAPTION, CLS_RTE_CAPTION, CLS_CAPINLINE, CLS_IMGINLINE, CLS_COUNT, CLS_WARNING, CLS_ERROR, CLS_ICONS, CLS_ACTIVE, CLS_EXPAND_OPEN, CLS_RTE_ELEMENTS, CLS_TB_BTN, CLS_HR_SEPARATOR, CLS_TB_IOS_FIX, CLS_LIST_PRIMARY_CONTENT, CLS_NUMBERFORMATLIST_TB_BTN, CLS_BULLETFORMATLIST_TB_BTN, CLS_FORMATS_TB_BTN, CLS_FONT_NAME_TB_BTN, CLS_FONT_SIZE_TB_BTN, CLS_ALIGN_TB_BTN, CLS_FONT_COLOR_TARGET, CLS_BACKGROUND_COLOR_TARGET, CLS_COLOR_CONTENT, CLS_FONT_COLOR_DROPDOWN, CLS_BACKGROUND_COLOR_DROPDOWN, CLS_COLOR_PALETTE, CLS_FONT_COLOR_PICKER, CLS_BACKGROUND_COLOR_PICKER, CLS_RTE_READONLY, CLS_TABLE_SEL, CLS_TB_DASH_BOR, CLS_TB_ALT_BOR, CLS_TB_COL_RES, CLS_TB_ROW_RES, CLS_TB_BOX_RES, CLS_RTE_HIDDEN, CLS_RTE_PASTE_KEEP_FORMAT, CLS_RTE_PASTE_REMOVE_FORMAT, CLS_RTE_PASTE_PLAIN_FORMAT, CLS_RTE_PASTE_OK, CLS_RTE_PASTE_CANCEL, CLS_RTE_DIALOG_MIN_HEIGHT, CLS_RTE_RES_HANDLE, CLS_RTE_RES_EAST, CLS_RTE_IMAGE, CLS_RESIZE, CLS_IMG_FOCUS, CLS_RTE_DRAG_IMAGE, CLS_RTE_UPLOAD_POPUP, CLS_POPUP_OPEN, CLS_IMG_RESIZE, CLS_DROPAREA, CLS_IMG_INNER, CLS_UPLOAD_FILES, CLS_RTE_DIALOG_UPLOAD, CLS_RTE_RES_CNT, CLS_CUSTOM_TILE, CLS_NOCOLOR_ITEM, CLS_TABLE, CLS_TABLE_BORDER, CLS_RTE_TABLE_RESIZE, CLS_RTE_FIXED_TB_EXPAND, CLS_RTE_TB_ENABLED, CLS_RTE_RES_WEST, getIndex, hasClass, getDropDownValue, isIDevice, getFormattedFontSize, pageYOffset, getTooltipText, setToolbarStatus, getCollection, getTBarItemsIndex, updateUndoRedoStatus, dispatchEvent, parseHtml, getTextNodesUnder, toObjectLowerCase, getEditValue, updateTextNode, getDefaultValue, isEditableValueEmpty, decode, sanitizeHelper, convertToBlob, getLocaleFontFormat, updateDropDownFontFormatLocale, ServiceLocator, RendererFactory, EditorManager, IMAGE, TABLE, LINK, INSERT_ROW, INSERT_COLUMN, DELETEROW, DELETECOLUMN, REMOVETABLE, TABLEHEADER, TABLE_VERTICAL_ALIGN, TABLE_MERGE, TABLE_VERTICAL_SPLIT, TABLE_HORIZONTAL_SPLIT, TABLE_MOVE, ALIGNMENT_TYPE, INDENT_TYPE, DEFAULT_TAG, BLOCK_TAGS, IGNORE_BLOCK_TAGS, TABLE_BLOCK_TAGS, SELECTION_TYPE, INSERTHTML_TYPE, INSERT_TEXT_TYPE, CLEAR_TYPE, SELF_CLOSING_TAGS, CLASS_IMAGE_RIGHT, CLASS_IMAGE_LEFT, CLASS_IMAGE_CENTER, CLASS_IMAGE_BREAK, CLASS_CAPTION, CLASS_RTE_CAPTION, CLASS_CAPTION_INLINE, CLASS_IMAGE_INLINE, Lists, markerClassName, DOMNode, Alignments, Indents, Formats, LinkCommand, InsertMethods, InsertTextExec, InsertHtmlExec, InsertHtml, IsFormatted, MsWordPaste, NodeCutter, ImageCommand, SelectionCommands, SelectionBasedExec, ClearFormatExec, UndoRedoManager, TableCommand, statusCollection, ToolbarStatus, NodeSelection, MarkdownParser, LISTS_COMMAND, selectionCommand, LINK_COMMAND, CLEAR_COMMAND, MD_TABLE, INSERT_TEXT_COMMAND, ClearFormat, MDLists, MDFormats, MarkdownSelection, UndoRedoCommands, MDSelectionFormats, MDLink, MDTable, markdownFormatTags, markdownSelectionTags, markdownListsTags, htmlKeyConfig, markdownKeyConfig, pasteCleanupGroupingTags, listConversionFilters, selfClosingTags, KEY_DOWN, ACTION, FORMAT_TYPE, KEY_DOWN_HANDLER, LIST_TYPE, KEY_UP_HANDLER, KEY_UP, MODEL_CHANGED_PLUGIN, MODEL_CHANGED, MS_WORD_CLEANUP_PLUGIN, MS_WORD_CLEANUP, ON_BEGIN, SPACE_ACTION };
 //# sourceMappingURL=ej2-richtexteditor.es5.js.map