@syncfusion/ej2-richtexteditor 20.3.60 → 20.4.38

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

@@ -580,24 +580,24 @@ const imageRemoving = 'imageRemoving';
  */
 const fileSelected = 'fileSelected';
 /**
-  * @hidden
-  * @deprecated
-  */
+ * @hidden
+ * @deprecated
+ */
 const fileUploading = 'fileUploading';
 /**
-  * @hidden
-  * @deprecated
-  */
+ * @hidden
+ * @deprecated
+ */
 const fileUploadSuccess = 'fileUploadSuccess';
 /**
-  * @hidden
-  * @deprecated
-  */
+ * @hidden
+ * @deprecated
+ */
 const fileUploadFailed = 'fileUploadFailed';
 /**
-  * @hidden
-  * @deprecated
-  */
+ * @hidden
+ * @deprecated
+ */
 const fileRemoving = 'fileRemoving';
 /**
  * @hidden
@@ -2584,7 +2584,7 @@ function pageYOffset(e, parentElement, isIFrame) {
  */
 function getTooltipText(item, serviceLocator) {
     const i10n = serviceLocator.getService('rteLocale');
-    const itemLocale = toolsLocale[item];
+    const itemLocale = toolsLocale[`${item}`];
     const tooltipText = i10n.getConstant(itemLocale);
     return tooltipText;
 }
@@ -2606,17 +2606,17 @@ function setToolbarStatus(e, isPopToolbar, self) {
             const itemStr = item && item.toLocaleLowerCase();
             if (item && (itemStr === key) || (item === 'UL' && key === 'unorderedlist') || (item === 'OL' && key === 'orderedlist') ||
                 (itemStr === 'pre' && key === 'insertcode')) {
-                if (typeof data[key] === 'boolean') {
-                    if (data[key] === true) {
+                if (typeof data[`${key}`] === 'boolean') {
+                    if (data[`${key}`] === true) {
                         addClass([e.tbElements[j]], [CLS_ACTIVE]);
                     }
                     else {
                         removeClass([e.tbElements[j]], [CLS_ACTIVE]);
                     }
                 }
-                else if ((typeof data[key] === 'string' || data[key] === null) &&
+                else if ((typeof data[`${key}`] === 'string' || data[`${key}`] === null) &&
                     getIndex(key, e.parent.toolbarSettings.items) > -1) {
-                    const value = ((data[key]) ? data[key] : '');
+                    const value = ((data[`${key}`]) ? data[`${key}`] : '');
                     let result = '';
                     switch (key) {
                         case 'formats': {
@@ -2630,7 +2630,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' + ' ' + e.parent.cssClass + '">'
+                                '<span class="e-rte-dropdown-btn-text' + (isNullOrUndefined(e.parent.cssClass) ? '' : ' ' + e.parent.cssClass) + '">'
                                 + (isNullOrUndefined(result) ? formatContent : result) +
                                 '</span></span>');
                             dropDown.formatDropDown.dataBind();
@@ -2660,7 +2660,7 @@ function setToolbarStatus(e, isPopToolbar, self) {
                             e.tbElements[j].title = name;
                             dropDown.fontNameDropDown.content = ('<span style="display: inline-flex;' +
                                 'width:' + e.parent.fontFamily.width + '" >' +
-                                '<span class="e-rte-dropdown-btn-text' + ' ' + e.parent.cssClass + '">'
+                                '<span class="e-rte-dropdown-btn-text' + (isNullOrUndefined(e.parent.cssClass) ? '' : ' ' + e.parent.cssClass) + '">'
                                 + name + '</span></span>');
                             dropDown.fontNameDropDown.dataBind();
                             break;
@@ -2676,7 +2676,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' + ' ' + e.parent.cssClass + '">'
+                                '<span class="e-rte-dropdown-btn-text' + (isNullOrUndefined(e.parent.cssClass) ? '' : ' ' + e.parent.cssClass) + '">'
                                 + getFormattedFontSize(result) + '</span></span>');
                             dropDown.fontSizeDropDown.dataBind();
                             break;
@@ -2757,7 +2757,7 @@ function updateUndoRedoStatus(baseToolbar, undoRedoStatus) {
     for (const key of keys) {
         const target = tbItems[trgItems[i]];
         if (target) {
-            baseToolbar.toolbarObj.enableItems(target, undoRedoStatus[key]);
+            baseToolbar.toolbarObj.enableItems(target, undoRedoStatus[`${key}`]);
         }
         i++;
     }
@@ -3308,6 +3308,7 @@ class ToolbarRenderer {
      * @param {IColorPickerModel} args - specifies the arguments.
      * @param {string} item - specifies the item.
      * @param {ColorPicker} colorPicker - specifies the colorpicker.
+     * @param {string} defaultColor -specifies the defaultColor.
      * @returns {void}
      * @hidden
      * @deprecated
@@ -4304,8 +4305,8 @@ class ServiceLocator {
      */
     /* eslint-enable */
     register(name, type) {
-        if (isNullOrUndefined(this.services[name])) {
-            this.services[name] = type;
+        if (isNullOrUndefined(this.services[`${name}`])) {
+            this.services[`${name}`] = type;
         }
     }
     /**
@@ -4317,11 +4318,11 @@ class ServiceLocator {
      * @deprecated
      */
     getService(name) {
-        if (isNullOrUndefined(this.services[name])) {
+        if (isNullOrUndefined(this.services[`${name}`])) {
             // eslint-disable-next-line
             throw `The service ${name} is not registered`;
         }
-        return this.services[name];
+        return this.services[`${name}`];
     }
 }
 
@@ -4346,8 +4347,8 @@ class RendererFactory {
      */
     addRenderer(name, type) {
         const rName = getEnumValue(RenderType, name);
-        if (isNullOrUndefined(this.rendererMap[rName])) {
-            this.rendererMap[rName] = type;
+        if (isNullOrUndefined(this.rendererMap[`${rName}`])) {
+            this.rendererMap[`${rName}`] = type;
         }
     }
     /**
@@ -4360,12 +4361,12 @@ class RendererFactory {
      */
     getRenderer(name) {
         const rName = getEnumValue(RenderType, name);
-        if (isNullOrUndefined(this.rendererMap[rName])) {
+        if (isNullOrUndefined(this.rendererMap[`${rName}`])) {
             // eslint-disable-next-line
             throw `The renderer ${rName} is not found`;
         }
         else {
-            return this.rendererMap[rName];
+            return this.rendererMap[`${rName}`];
         }
     }
 }
@@ -4566,6 +4567,7 @@ class Toolbar$2 {
         this.isTransformChild = false;
         const transformElements = selectAll('[style*="transform"]', document);
         for (let i = 0; i < transformElements.length; i++) {
+            // eslint-disable-next-line max-len
             if (!isNullOrUndefined(transformElements[i].contains) && transformElements[i].contains(this.parent.element)) {
                 this.isTransformChild = true;
                 break;
@@ -5064,6 +5066,7 @@ class Toolbar$2 {
             this.parent.off(toolbarClick, this.toolbarClickHandler);
         }
     }
+    // eslint-disable-next-line @typescript-eslint/tslint/config
     setCssClass(e) {
         if (this.toolbarObj && e.cssClass) {
             if (isNullOrUndefined(e.oldCssClass)) {
@@ -5232,7 +5235,7 @@ let KeyboardEvents$1 = KeyboardEvents_1 = class KeyboardEvents$$1 extends Base {
             const curkeyCode = e.which;
             const keys = Object.keys(this.keyConfigs);
             for (const key of keys) {
-                const configCollection = this.keyConfigs[key].split(',');
+                const configCollection = this.keyConfigs[`${key}`].split(',');
                 for (const rconfig of configCollection) {
                     const rKeyObj = KeyboardEvents_1.getKeyConfigData(rconfig.trim());
                     if (isAltKey === rKeyObj.altKey && (isCtrlKey === rKeyObj.ctrlKey || isMetaKey) &&
@@ -5303,7 +5306,7 @@ let KeyboardEvents$1 = KeyboardEvents_1 = class KeyboardEvents$$1 extends Base {
      */
     static getKeyConfigData(config) {
         if (config in this.configCache) {
-            return this.configCache[config];
+            return this.configCache[`${config}`];
         }
         const keys = config.toLowerCase().split('+');
         const keyData = {
@@ -5318,12 +5321,12 @@ let KeyboardEvents$1 = KeyboardEvents_1 = class KeyboardEvents$$1 extends Base {
         else {
             keyData.keyCode = KeyboardEvents_1.getKeyCode(keys[keys.length - 1]);
         }
-        KeyboardEvents_1.configCache[config] = keyData;
+        KeyboardEvents_1.configCache[`${config}`] = keyData;
         return keyData;
     }
     // Return the keycode value as string
     static getKeyCode(keyVal) {
-        return keyCode[keyVal] || keyVal.toUpperCase().charCodeAt(0);
+        return keyCode[`${keyVal}`] || keyVal.toUpperCase().charCodeAt(0);
     }
 };
 KeyboardEvents$1.configCache = {};
@@ -6852,7 +6855,9 @@ class MarkdownSelection {
         let isStart = false;
         if (line) {
             const reg = line.trim() === command.trim() ?
+                // eslint-disable-next-line
                 new RegExp('^(' + this.replaceSpecialChar(command.trim()) + ')', 'gim') :
+                // eslint-disable-next-line
                 new RegExp('^(' + this.replaceSpecialChar(command) + ')', 'gim');
             isStart = reg.test(line.trim());
         }
@@ -6882,6 +6887,7 @@ class MarkdownSelection {
     isClear(parents, regex) {
         const isClear = false;
         for (let i = 0; i < parents.length; i++) {
+            // eslint-disable-next-line
             if (new RegExp(regex, 'gim').test(parents[i].text)) {
                 return true;
             }
@@ -7131,7 +7137,7 @@ class MarkdownToolbarStatus {
         }
         else {
             for (let i = 0; i < lines.length; i++) {
-                if (!this.selection.isStartWith(lines[i].text, this.parent.formatter.listTags[type])) {
+                if (!this.selection.isStartWith(lines[i].text, this.parent.formatter.listTags[`${type}`])) {
                     isApply = false;
                     break;
                 }
@@ -7191,6 +7197,7 @@ class MarkdownToolbarStatus {
         return text.search('\\' + cmd + '') !== -1;
     }
     multiCharRegx(cmd) {
+        // eslint-disable-next-line
         return new RegExp('(\\' + cmd + ')', 'g');
     }
 }
@@ -7643,6 +7650,7 @@ class MDLists {
         const regex = this.getListRegex();
         this.currentAction = this.getAction(parents[0].text);
         for (let i = 0; i < parents.length; i++) {
+            // eslint-disable-next-line max-len
             let prevIndex = event.event.shiftKey ? parents[i].line - 1 : parents[i].line - 1;
             let prevLine = this.selection.getLine(textArea, prevIndex);
             if (prevLine && (!event.event.shiftKey && isNotFirst || (event.event.shiftKey))) {
@@ -7690,6 +7698,7 @@ class MDLists {
                 addedLength += tabSpaceLength;
                 if (parents.length !== 1) {
                     for (let j = i; j < parents.length; j++) {
+                        // eslint-disable-next-line max-len
                         parents[j].start = j !== 0 ? parents[j].start + tabSpaceLength : parents[j].start;
                         parents[j].end = parents[j].end + tabSpaceLength;
                     }
@@ -7820,6 +7829,7 @@ class MDLists {
         const ol = line.split('. ')[0];
         // eslint-disable-next-line
         const currentState = /^\d+$/.test(ol.trim());
+        // eslint-disable-next-line
         const ul = line.trim().split(new RegExp('^(' + this.selection.replaceSpecialChar(this.syntax.UL).trim() + ')'))[1];
         return (currentState ? 'OL' : ul ? 'UL' : 'NOTLIST');
     }
@@ -7979,6 +7989,7 @@ class MDLists {
     }
     appliedLine(line, prefixPattern, perfixObj, preTabSpaceLength) {
         const points = {};
+        // eslint-disable-next-line
         const regex = new RegExp('^[' + this.syntax.UL.trim() + ']');
         const lineSplit = line.split('. ');
         const currentPrefix = lineSplit[0] + '. ';
@@ -8041,6 +8052,7 @@ class MDLists {
             regex += regex === '' ? '^(' + syntax + ')|^(' + syntax.trim() + ')' :
                 '|^(' + syntax + ')|^(' + syntax.trim() + ')';
         }
+        // eslint-disable-next-line
         return new RegExp(regex);
     }
 }
@@ -8165,6 +8177,7 @@ class MDFormats {
                     if (configKey[j] === command) {
                         continue;
                     }
+                    // eslint-disable-next-line
                     const regex = new RegExp('^(' + this.selection.replaceSpecialChar(removeText) + ')', 'gim');
                     if (regex.test(parents[i].text)) {
                         parents[i].text = parents[i].text.replace(regex, '');
@@ -8207,14 +8220,14 @@ class MDFormats {
             !this.selection.isStartWith(lastNextText, this.syntax.pre.split('\n')[0])) {
             const lines = textArea.value.substring(start, end).split('\n');
             const lastLine = lines[lines.length - 1] === '' ? '' : '\n';
-            textArea.value = textArea.value.substr(0, start) + this.syntax[command] + textArea.value.substring(start, end) +
-                lastLine + this.syntax[command] +
+            textArea.value = textArea.value.substr(0, start) + this.syntax[`${command}`] + textArea.value.substring(start, end) +
+                lastLine + this.syntax[`${command}`] +
                 textArea.value.substr(end, textArea.value.length);
-            start = this.selection.selectionStart + this.syntax[command].length;
-            end = this.selection.selectionEnd + this.syntax[command].length - 1;
+            start = this.selection.selectionStart + this.syntax[`${command}`].length;
+            end = this.selection.selectionEnd + this.syntax[`${command}`].length - 1;
         }
         else {
-            const cmd = this.syntax[command];
+            const cmd = this.syntax[`${command}`];
             const selection = this.parent.markdownSelection.getSelectedInlinePoints(textArea);
             const startNo = textArea.value.substr(0, textArea.selectionStart).lastIndexOf(cmd);
             let endNo = textArea.value.substr(textArea.selectionEnd, textArea.selectionEnd).indexOf(cmd);
@@ -8341,9 +8354,11 @@ class MDSelectionFormats {
         return matchText;
     }
     multiCharRegx(cmd) {
+        // eslint-disable-next-line
         return new RegExp('(\\' + cmd + '\\' + cmd + ')', 'g');
     }
     singleCharRegx(cmd) {
+        // eslint-disable-next-line
         return new RegExp('(\\' + cmd + ')', 'g');
     }
     isAppliedCommand(cmd) {
@@ -8531,22 +8546,22 @@ class MDSelectionFormats {
         }
     }
     textReplace(text, command) {
-        let regx = this.singleCharRegx(this.syntax[command]);
+        let regx = this.singleCharRegx(this.syntax[`${command}`]);
         switch (command) {
             case 'Bold':
-                regx = this.multiCharRegx(this.syntax[command].substr(0, 1));
+                regx = this.multiCharRegx(this.syntax[`${command}`].substr(0, 1));
                 text = text.replace(regx, '');
                 break;
             case 'Italic':
-                if (!this.isBold(text, this.syntax[command].substr(0, 1))) {
+                if (!this.isBold(text, this.syntax[`${command}`].substr(0, 1))) {
                     text = text.replace(regx, '');
                 }
                 else {
-                    const regxB = this.multiCharRegx(this.syntax[command].substr(0, 1));
+                    const regxB = this.multiCharRegx(this.syntax[`${command}`].substr(0, 1));
                     let repText = text;
                     repText = repText.replace(regxB, '$%@').replace(regx, '');
                     const regxTemp = new RegExp('\\$%@', 'g');
-                    text = repText.replace(regxTemp, this.syntax[command].substr(0, 1) + this.syntax[command].substr(0, 1));
+                    text = repText.replace(regxTemp, this.syntax[`${command}`].substr(0, 1) + this.syntax[`${command}`].substr(0, 1));
                 }
                 break;
             case 'StrikeThrough':
@@ -8565,23 +8580,24 @@ class MDSelectionFormats {
         return text;
     }
     isApplied(line, command) {
-        let regx = this.singleCharRegx(this.syntax[command]);
+        let regx = this.singleCharRegx(this.syntax[`${command}`]);
         switch (command) {
             case 'SubScript':
             case 'SuperScript':
-                regx = this.singleCharRegx(this.syntax[command]);
+                regx = this.singleCharRegx(this.syntax[`${command}`]);
                 return regx.test(line.text);
             case 'Bold':
             case 'StrikeThrough':
-                regx = this.multiCharRegx(this.syntax[command].substr(0, 1));
+                regx = this.multiCharRegx(this.syntax[`${command}`].substr(0, 1));
                 return regx.test(line.text);
             case 'UpperCase':
             case 'LowerCase':
-                regx = new RegExp('^[' + this.syntax[command] + ']*$', 'g');
+                // eslint-disable-next-line
+                regx = new RegExp('^[' + this.syntax[`${command}`] + ']*$', 'g');
                 return regx.test(line.text);
             case 'Italic': {
                 let regTest;
-                const regxB = this.multiCharRegx(this.syntax[command].substr(0, 1));
+                const regxB = this.multiCharRegx(this.syntax[`${command}`].substr(0, 1));
                 if (regxB.test(line.text)) {
                     let repText = line.text;
                     repText = repText.replace(regxB, '$%#');
@@ -9234,23 +9250,25 @@ class ClearFormat {
             const key = keys[num];
             // eslint-disable-next-line
             if (data.hasOwnProperty(key) && data[key] !== '') {
-                const expString = this.replaceRegex(data[key]);
+                const expString = this.replaceRegex(data[`${key}`]);
                 let regExp;
-                const startExp = data[key].length;
-                const endExp = (data[key] === '<sup>' || data[key] === '<sub>') ? data[key].length + 1 : data[key].length;
-                if (data[key] === '<sup>') {
+                const startExp = data[`${key}`].length;
+                const endExp = (data[`${key}`] === '<sup>' || data[`${key}`] === '<sub>') ? data[`${key}`].length + 1 : data[`${key}`].length;
+                if (data[`${key}`] === '<sup>') {
                     // eslint-disable-next-line
                     regExp = new RegExp('<sup>(.*?)<\/sup>', 'ig');
                 }
-                else if (data[key] === '<sub>') {
+                else if (data[`${key}`] === '<sub>') {
                     // eslint-disable-next-line
                     regExp = new RegExp('<sub>(.*?)<\/sub>', 'ig');
                 }
                 else {
+                    // eslint-disable-next-line
                     regExp = new RegExp(expString + '(.*?)' + expString, 'ig');
                 }
                 const val = text.match(regExp);
                 for (let index = 0; val && index < val.length && val[index] !== ''; index++) {
+                    // eslint-disable-next-line max-len
                     text = text.replace(val[index], val[index].substr(startExp, val[index].length - endExp - startExp));
                 }
             }
@@ -9272,8 +9290,8 @@ class ClearFormat {
                     const key = keys[index];
                     // eslint-disable-next-line
                     if (data.hasOwnProperty(key) && data[key] !== '') {
-                        if (lines[len].indexOf(data[key]) === 0) {
-                            lines[len] = lines[len].replace(data[key], '');
+                        if (lines[len].indexOf(data[`${key}`]) === 0) {
+                            lines[len] = lines[len].replace(data[`${key}`], '');
                             lines[len] = this.clearFormatLines([lines[len]]);
                         }
                     }
@@ -10056,6 +10074,7 @@ class NodeSelection {
      */
     getSelectionNodes(nodeCollection) {
         nodeCollection = nodeCollection.reverse();
+        // eslint-disable-next-line
         const regEx = new RegExp(String.fromCharCode(8203), 'g');
         for (let index = 0; index < nodeCollection.length; index++) {
             if (nodeCollection[index].nodeType !== 3 || (nodeCollection[index].textContent.trim() === '' ||
@@ -10076,6 +10095,7 @@ class NodeSelection {
      */
     getSelectionNodesBr(nodeCollection) {
         nodeCollection = nodeCollection.reverse();
+        // eslint-disable-next-line
         const regEx = new RegExp(String.fromCharCode(8203), 'g');
         for (let index = 0; index < nodeCollection.length; index++) {
             if (nodeCollection[index].nodeName !== 'BR' &&
@@ -10408,7 +10428,7 @@ class DOMNode {
         const orderRawAttr = Object.keys(rawAttr).sort();
         for (let e = 0; e < orderRawAttr.length; e++) {
             const attrKey = orderRawAttr[e];
-            let attrValue = rawAttr[attrKey];
+            let attrValue = rawAttr[`${attrKey}`];
             /* eslint-disable */
             if (attrValue.indexOf("'") < 0 && attrValue.indexOf('"') >= 0) {
                 attr += ' ' + attrKey + "='" + attrValue + "'";
@@ -11159,8 +11179,15 @@ class Lists {
             range.startContainer.parentElement.closest('LI');
         const endNode = range.endContainer.nodeName === 'LI' ? range.endContainer :
             range.endContainer.parentElement.closest('LI');
+        // Checks for Image, Audio , Video Element inside List Element 
+        let hasMediaElem = false;
+        if (!isNullOrUndefined(startNode)) {
+            const videoElemList = startNode.querySelectorAll('.e-video-clickelem');
+            const embedVideoElem = videoElemList.length > 0 && videoElemList[0].childNodes[0].nodeName === 'IFRAME';
+            hasMediaElem = startNode.querySelectorAll('IMG').length > 0 || startNode.querySelectorAll('AUDIO').length > 0 || startNode.querySelectorAll('VIDEO').length > 0 || embedVideoElem;
+        }
         if (!isNullOrUndefined(startNode) && !isNullOrUndefined(endNode) && startNode === endNode && startNode.tagName === 'LI' &&
-            startNode.textContent.trim() === '' && startNode.querySelectorAll('IMG').length === 0) {
+            startNode.textContent.trim() === '' && !hasMediaElem) {
             if (startNode.innerHTML.indexOf('&nbsp;') >= 0) {
                 return;
             }
@@ -11197,7 +11224,6 @@ class Lists {
             }
         }
     }
-    // eslint-disable-next-line
     backspaceList(e) {
         const range = this.parent.nodeSelection.getRange(this.parent.currentDocument);
         let startNode = this.parent.domNode.getSelectedNode(range.startContainer, range.startOffset);
@@ -11283,7 +11309,8 @@ class Lists {
             detach(currentLIElem);
         }
     }
-    firstListBackSpace(range, e) {
+    // eslint-disable-next-line @typescript-eslint/no-unused-vars
+    firstListBackSpace(range, _e) {
         const startNode = this.parent.domNode.getSelectedNode(range.startContainer, range.startOffset);
         if (!isNullOrUndefined(startNode.closest('OL'))) {
             this.commonLIParent = startNode.closest('OL');
@@ -11546,6 +11573,7 @@ class Lists {
                 range.startOffset]) || range.startContainer);
             const endNode = (range.endContainer.childNodes[(range.endOffset > 0) ? (range.endOffset - 1) :
                 range.endOffset] || range.endContainer);
+            // eslint-disable-next-line @typescript-eslint/no-explicit-any
             let lastSelectionNode = endNode.lastChild.nodeName === 'BR' ? (isNullOrUndefined(endNode.lastChild.previousSibling) ? endNode
                 : endNode.lastChild.previousSibling) : endNode.lastChild;
             while (!isNullOrUndefined(lastSelectionNode) && lastSelectionNode.nodeName !== '#text' && lastSelectionNode.nodeName !== 'IMG' &&
@@ -11686,8 +11714,8 @@ class Lists {
                     const openTag = '<' + type + '>';
                     const closeTag = '</' + type + '>';
                     const newTag = 'li' + elemAtt;
-                    const replaceHTML = (elements[i].tagName.toLowerCase() === DEFAULT_TAG ? elements[i].innerHTML :
-                        elements[i].outerHTML);
+                    const replaceHTML = (elements[i].tagName.toLowerCase() === DEFAULT_TAG ?
+                        elements[i].innerHTML : elements[i].outerHTML);
                     const innerHTML = this.domNode.createTagString(newTag, null, replaceHTML);
                     const collectionString = openTag + innerHTML + closeTag;
                     this.domNode.replaceWith(elements[i], collectionString);
@@ -11698,8 +11726,8 @@ class Lists {
                     const openTag = '<' + type + elemAtt + '>';
                     const closeTag = '</' + type + '>';
                     const newTag = 'li';
-                    const replaceHTML = (elements[i].tagName.toLowerCase() === DEFAULT_TAG ? elements[i].innerHTML :
-                        elements[i].outerHTML);
+                    const replaceHTML = (elements[i].tagName.toLowerCase() === DEFAULT_TAG ?
+                        elements[i].innerHTML : elements[i].outerHTML);
                     const innerHTML = this.domNode.createTagString(newTag, null, replaceHTML);
                     const collectionString = openTag + innerHTML + closeTag;
                     this.domNode.replaceWith(elements[i], collectionString);
@@ -12098,6 +12126,7 @@ class NodeCutter {
             for (let i = 0; !isNullOrUndefined(firstChild.childNodes) && i < firstChild.childNodes.length; i++) {
                 if (firstChild.childNodes[i].nodeName === 'IMG' || (firstChild.childNodes[i].nodeName === 'SPAN' &&
                     (firstChild.childNodes[i].classList.contains('e-video-wrap') ||
+                        firstChild.childNodes[i].classList.contains('e-embed-video-wrap') ||
                         firstChild.childNodes[i].classList.contains('e-audio-wrap')))) {
                     result = false;
                 }
@@ -12311,6 +12340,7 @@ class Formats {
         }
     }
     removeCodeContent(range) {
+        // eslint-disable-next-line
         const regEx = new RegExp(String.fromCharCode(65279), 'g');
         if (!isNullOrUndefined(range.endContainer.textContent.match(regEx))) {
             const pointer = range.endContainer.textContent.charCodeAt(range.endOffset - 1) === 65279 ?
@@ -13211,7 +13241,8 @@ class LinkCommand {
                 finalinlineNodes[j] = inlineNodes[i];
             }
             if (inlineNodes.length > 1 && i < inlineNodes.length - 1) {
-                if ((inlineNodes[i].parentElement === inlineNodes[i + 1].parentElement) && (inlineNodes[i] === inlineNodes[i + 1])) {
+                if ((inlineNodes[i].parentElement === inlineNodes[i + 1].parentElement) &&
+                    (inlineNodes[i] === inlineNodes[i + 1])) {
                     continue;
                 }
                 else {
@@ -13308,6 +13339,7 @@ class LinkCommand {
         return arr.join(' ') + ' ';
     }
     openLink(e) {
+        // eslint-disable-next-line security/detect-non-literal-fs-filename
         document.defaultView.open(e.item.url, e.item.target);
         this.callBack(e);
     }
@@ -13771,6 +13803,7 @@ class ImageCommand {
         this.callBack(e);
     }
     openImageLink(e) {
+        // eslint-disable-next-line security/detect-non-literal-fs-filename
         document.defaultView.open(e.item.url, e.item.target);
         this.callBack(e);
     }
@@ -14253,8 +14286,8 @@ class VideoCommand {
                 videoElm.load();
             }
             if (Browser.userAgent.indexOf('Firefox') !== -1) {
-                vidElement.addEventListener('play', (args) => { this.editAreaVideoClick(e); });
-                vidElement.addEventListener('pause', (args) => { this.editAreaVideoClick(e); });
+                vidElement.addEventListener('play', () => { this.editAreaVideoClick(e); });
+                vidElement.addEventListener('pause', () => { this.editAreaVideoClick(e); });
             }
         }
     }
@@ -14493,6 +14526,7 @@ class TableCommand {
             const newRow = createElement('tr');
             const isHeaderSelect = this.curTable.querySelectorAll('th.e-cell-select').length > 0;
             for (let i = 0; i < allCells[minVal].length; i++) {
+                // eslint-disable-next-line max-len
                 if (isBelow && minVal < allCells.length - 1 && allCells[minVal][i] === allCells[minVal + 1][i] ||
                     !isBelow && 0 < minVal && allCells[minVal][i] === allCells[minVal - 1][i]) {
                     if (0 === i || 0 < i && allCells[minVal][i] !== allCells[minVal][i - 1]) {
@@ -14672,10 +14706,12 @@ class TableCommand {
                             1 === rowSpanVal ? allCells[maxI][j].removeAttribute('rowspan') : allCells[maxI][j].setAttribute('rowspan', rowSpanVal.toString());
                         }
                     }
+                    // eslint-disable-next-line max-len
                     if (maxI < allCells.length - 1 && allCells[maxI][j] === allCells[maxI + 1][j] && (0 === maxI ||
                         allCells[maxI][j] !== allCells[maxI - 1][j])) {
                         const element = allCells[maxI][j];
                         let index;
+                        // eslint-disable-next-line max-len
                         for (index = j; 0 < index && allCells[maxI][index] === allCells[maxI][index - 1]; index--) {
                             if (index === 0) {
                                 this.curTable.rows[maxI + 1].prepend(element);
@@ -14888,6 +14924,7 @@ class TableCommand {
             for (rowValue = min; rowValue <= max; rowValue++) {
                 // eslint-disable-next-line
                 if (!(min < rowValue && eleArray[rowValue][0] === eleArray[rowValue - 1][0])
+                    // eslint-disable-next-line no-cond-assign
                     && eleArray[rowValue][0] && 1 < (index = Math.min(parseInt(eleArray[rowValue][0].getAttribute('rowspan'), 10) ||
                     1, max - min + 1)) && eleArray[rowValue][0] === eleArray[rowValue + 1][0]) {
                     for (count = index - 1, colIndex = 1; colIndex < eleArray[0].length; colIndex++) {
@@ -14924,6 +14961,7 @@ class TableCommand {
                 min < rowIndex && elements[rowIndex][colIndex] === elements[rowIndex - 1][colIndex] ||
                     firstIndex < colIndex && elements[rowIndex][colIndex] === elements[rowIndex][colIndex - 1] ||
                     1 < (spanCount = parseInt(elements[rowIndex][colIndex].getAttribute(attr), 10) || 1) &&
+                        // eslint-disable-next-line max-len
                         (1 < spanCount - index ? elements[rowIndex][colIndex].setAttribute(attr, (spanCount - index).toString()) :
                             elements[rowIndex][colIndex].removeAttribute(attr));
             }
@@ -14987,6 +15025,7 @@ class TableCommand {
             let colIndex;
             for (avgRowIndex = activeCellIndex[0] + Math.ceil(activeCellRowSpan / 2), colIndex = 0 === activeCellIndex[1] ? activeCellIndex[1]
                     : activeCellIndex[1] - 1; 0 <= colIndex && (correspondingCells[avgRowIndex][colIndex] ===
+                // eslint-disable-next-line max-len
                 correspondingCells[avgRowIndex][colIndex - 1] || 0 < avgRowIndex && correspondingCells[avgRowIndex][colIndex]
                 === correspondingCells[avgRowIndex - 1][colIndex]);) {
                 colIndex--;
@@ -15524,7 +15563,7 @@ class SelectionCommands {
                 const currentFormatNode = isFormatted.getFormattedNode(range.startContainer, format, endNode);
                 const currentSelector = !isNullOrUndefined(currentFormatNode) ?
                     (currentFormatNode.getAttribute('style') === null ? currentFormatNode.nodeName :
-                        currentFormatNode.nodeName + `[style='` + currentFormatNode.getAttribute('style') + `']`) : null;
+                        currentFormatNode.nodeName + '[style=\'' + currentFormatNode.getAttribute('style') + '\']') : null;
                 if (nodes.length > 0) {
                     isCollapsed = true;
                     range = nodeCutter.GetCursorRange(docElement, range, nodes[0]);
@@ -15533,7 +15572,9 @@ class SelectionCommands {
                     range.startOffset > 0 && range.startContainer.parentElement.firstElementChild.tagName.toLowerCase() !== 'br') ||
                     !isNullOrUndefined(currentFormatNode) && currentFormatNode ===
                         (range.startContainer.parentElement.closest(currentSelector)) &&
-                        ((range.startContainer.parentElement.closest(currentSelector)).textContent.replace(new RegExp(String.fromCharCode(8203), 'g'), '').trim().length !== 0))) {
+                        ((range.startContainer.parentElement.closest(currentSelector)).textContent.replace(
+                        // eslint-disable-next-line
+                        new RegExp(String.fromCharCode(8203), 'g'), '').trim().length !== 0))) {
                     isCollapsed = true;
                     range = nodeCutter.GetCursorRange(docElement, range, range.startContainer);
                     nodes.push(range.startContainer);
@@ -15568,15 +15609,6 @@ class SelectionCommands {
                         isSubSup = formatNode === null ? false : true;
                     }
                 }
-                else if (formatNode.textContent !== nodes[index].textContent && formatNode.nodeName === 'SPAN' && formatNode.style[0] === 'font-size') {
-                    let currentParentElem = nodes[index].parentElement.textContent !== nodes[index].textContent ? nodes[index] : nodes[index].parentElement;
-                    let isSameTextContent = true;
-                    while (currentParentElem.textContent !== nodes[index].textContent && nodes[index].style[0] !== format && currentParentElem.nodeName === 'SPAN') {
-                        isSameTextContent = currentParentElem.textContent === currentParentElem.parentElement.textContent;
-                        currentParentElem = !isNullOrUndefined(currentParentElem.parentElement) && isSameTextContent ? currentParentElem.parentElement : currentParentElem;
-                    }
-                    formatNode = currentParentElem;
-                }
                 if (index === 0 && formatNode === null) {
                     isFormat = true;
                 }
@@ -15610,6 +15642,7 @@ class SelectionCommands {
         if (cursorFormat) {
             cursorNode = cursorNodes[0];
             if (cursorFormat.firstChild.textContent.charCodeAt(0) === 8203 && cursorFormat.firstChild.nodeType === 3) {
+                // eslint-disable-next-line
                 const regEx = new RegExp(String.fromCharCode(8203), 'g');
                 let emptySpaceNode;
                 if (cursorFormat.firstChild === cursorNode) {
@@ -15620,7 +15653,6 @@ class SelectionCommands {
                             cursorFormat.parentElement.firstChild && cursorFormat.parentElement.firstChild.nodeType === 1) ?
                         cursorNode.textContent : cursorNode.textContent.replace(regEx, ''));
                     emptySpaceNode = cursorNode;
-                    
                 }
                 else {
                     cursorFormat.firstChild.textContent = cursorFormat.firstChild.textContent.replace(regEx, '');
@@ -15792,7 +15824,8 @@ class SelectionCommands {
         }
         if (child.length > 0 && isFontStyle) {
             for (let num = 0; num < child.length; num++) {
-                if (child[num].nodeType !== 3 || (child[num].textContent && child[num].textContent.trim().length > 0)) {
+                if (child[num].nodeType !== 3 || (child[num].textContent &&
+                    child[num].textContent.trim().length > 0)) {
                     child[num] = InsertMethods.Wrap(child[num], this.GetFormatNode(format, value, formatNodeTagName, formatNodeStyles));
                     if (child[num].textContent === startText) {
                         if (num === 0) {
@@ -15868,33 +15901,7 @@ class SelectionCommands {
                                 liElement.style.textDecoration = 'inherit';
                             }
                         }
-                        let enterType = isNullOrUndefined(this.enterAction) ? 'P' : this.enterAction.toString();
-                        const currentNode = nodes[index];
-                        let isNestedNode = !isNullOrUndefined(currentNode) && nodes[index].nodeName === '#text' && nodes[index].parentElement.nodeName !== enterType;
-                        let currentParentElem = currentNode.parentElement.textContent !== currentNode.textContent ? currentNode : currentNode.parentElement;
-                        if (isNestedNode) {
-                            let isSameTextContent = true;
-                            isNestedNode = false;
-                            while (!isNullOrUndefined(currentParentElem) && isSameTextContent && currentParentElem.parentElement.nodeName !== enterType
-                                && (currentParentElem.nodeName === 'SPAN' && (currentParentElem.style.textDecoration === 'line-through' || 'underline')
-                                    || currentParentElem.nodeName === 'SPAN' && (currentParentElem.style[0] === 'background-color' || 'font-family' || 'color')
-                                    || (currentParentElem.nodeName === 'EM' || 'STRONG' || 'SUB' || 'SUP'))) {
-                                isSameTextContent = currentParentElem.textContent === currentParentElem.parentElement.textContent;
-                                currentParentElem = !isNullOrUndefined(currentParentElem.parentElement) && isSameTextContent ? currentParentElem.parentElement : currentParentElem;
-                            }
-                            if (!isNullOrUndefined(currentParentElem) && currentParentElem.childNodes.length > 0) {
-                                let nodeList = currentParentElem.querySelectorAll('span,strong,em,sub,sup');
-                                isNestedNode = nodeList.length > 0 && isSameTextContent;
-                            }
-                        }
-                        if (isNestedNode) {
-                            let nodeList = [];
-                            nodeList[0] = currentParentElem;
-                            this.applyStyles(nodeList, index, element);
-                        }
-                        else {
-                            nodes[index] = this.applyStyles(nodes, index, element);
-                        }
+                        nodes[index] = this.applyStyles(nodes, index, element);
                         if (format === 'fontsize') {
                             const bg = closest(nodes[index].parentElement, 'span[style*=' + 'background-color' + ']');
                             if (!isNullOrUndefined(bg)) {
@@ -16304,7 +16311,8 @@ class ClearFormat$1 {
                         this.unWrap(docElement, blockNodes, nodeCutter, nodeSelection);
                     }
                     else if (this.BLOCK_TAGS.indexOf(childNodes[index2].nodeName.toLocaleLowerCase()) > -1 &&
-                        childNodes[index2].parentNode.nodeName.toLocaleLowerCase() === childNodes[index2].nodeName.toLocaleLowerCase()) {
+                        childNodes[index2].parentNode.nodeName.toLocaleLowerCase() ===
+                            childNodes[index2].nodeName.toLocaleLowerCase()) {
                         InsertMethods.unwrap(childNodes[index2]);
                     }
                     else if (this.BLOCK_TAGS.indexOf(childNodes[index2].nodeName.toLocaleLowerCase()) > -1 &&
@@ -16818,6 +16826,7 @@ class MsWordPaste {
     hexConversion(rtfData) {
         // eslint-disable-next-line
         const picHead = /\{\\pict[\s\S]+?\\bliptag\-?\d+(\\blipupi\-?\d+)?(\{\\\*\\blipuid\s?[\da-fA-F]+)?[\s\}]*?/;
+        // eslint-disable-next-line security/detect-non-literal-regexp
         const pic = new RegExp('(?:(' + picHead.source + '))([\\da-fA-F\\s]+)\\}', 'g');
         const fullImg = rtfData.match(pic);
         let imgType;
@@ -16881,7 +16890,9 @@ class MsWordPaste {
     removeUnwantedElements(elm) {
         let innerElement = elm.innerHTML;
         for (let i = 0; i < this.removableElements.length; i++) {
+            // eslint-disable-next-line security/detect-non-literal-regexp
             const regExpStartElem = new RegExp('<' + this.removableElements[i] + '>', 'g');
+            // eslint-disable-next-line security/detect-non-literal-regexp
             const regExpEndElem = new RegExp('</' + this.removableElements[i] + '>', 'g');
             innerElement = innerElement.replace(regExpStartElem, '');
             innerElement = innerElement.replace(regExpEndElem, '');
@@ -16930,7 +16941,7 @@ class MsWordPaste {
             const styleClassObject = !isNullOrUndefined(styles) ? this.findStyleObject(styles) : null;
             const keys = Object.keys(styleClassObject);
             let values = keys.map((key) => {
-                return styleClassObject[key];
+                return styleClassObject[`${key}`];
             });
             values = this.removeUnwantedStyle(values, wordPasteStyleConfig);
             this.filterStyles(elm, wordPasteStyleConfig);
@@ -17211,7 +17222,8 @@ class MsWordPaste {
                     for (let j = 0; j < collection[index].nestedLevel - pLevel; j++) {
                         prevList.appendChild(temp = createElement(collection[index].listType));
                         prevList = createElement('li');
-                        if (j !== collection[index].nestedLevel - pLevel - 1 && collection[index].nestedLevel - pLevel > 1) {
+                        if (j !== collection[index].nestedLevel - pLevel - 1 &&
+                            collection[index].nestedLevel - pLevel > 1) {
                             prevList.style.listStyleType = 'none';
                         }
                         temp.appendChild(prevList);
@@ -17618,6 +17630,7 @@ class ToolbarStatus {
             }
         }
         for (let index = 0; index < nodes.length; index++) {
+            // eslint-disable-next-line max-len
             formatCollection = this.getFormatParent(docElement, formatCollection, nodes[index], targetNode, formatNode, fontSize, fontName);
             if ((index === 0 && formatCollection.bold) || !formatCollection.bold) {
                 nodeCollection.bold = formatCollection.bold;
@@ -17797,12 +17810,14 @@ class ToolbarStatus {
         let index = null;
         if ((name !== null && name !== '' && name !== undefined)
             && (fontName === null || fontName === undefined || (fontName.filter((value, pos) => {
+                // eslint-disable-next-line
                 const pattern = new RegExp(name, 'i');
                 if ((value.replace(/"/g, '').replace(/ /g, '').toLowerCase() === name.replace(/"/g, '').replace(/ /g, '').toLowerCase()) ||
-                    (value.search(pattern) > -1)) {
+                    (value.split(',')[0] && value.split(',')[0].search(pattern) > -1)) {
                     index = pos;
                 }
             }) && (index !== null)))) {
+            // eslint-disable-next-line
             return (index !== null) ? fontName[index] : name.replace(/"/g, '');
         }
         else {
@@ -18466,7 +18481,7 @@ class HtmlEditor {
         }
     }
     isTableClassAdded() {
-        let tableElement = this.parent.inputElement.querySelectorAll('table');
+        const tableElement = this.parent.inputElement.querySelectorAll('table');
         for (let i = 0; i < tableElement.length; i++) {
             if (!tableElement[i].classList.contains('e-rte-table')) {
                 tableElement[i].classList.add('e-rte-table');
@@ -18478,18 +18493,20 @@ class HtmlEditor {
         const restrictKeys = [8, 9, 13, 16, 17, 18, 20, 27, 37, 38, 39, 40, 44, 45, 46, 91,
             112, 113, 114, 115, 116, 117, 118, 119, 120, 121, 122, 123];
         const range = this.parent.getRange();
+        // eslint-disable-next-line
         const regEx = new RegExp(String.fromCharCode(8203), 'g');
         let pointer;
         if (restrictKeys.indexOf(args.keyCode) < 0 && !args.shiftKey && !args.ctrlKey && !args.altKey) {
             pointer = range.startOffset;
+            // eslint-disable-next-line @typescript-eslint/no-unused-expressions
             range.startContainer.nodeName === '#text' ? range.startContainer.parentElement.classList.add('currentStartMark') : range.startContainer.classList.add('currentStartMark');
             if (range.startContainer.textContent.charCodeAt(0) === 8203) {
                 pointer = range.startOffset === 0 ? range.startOffset : range.startOffset - 1;
                 range.startContainer.textContent = range.startContainer.textContent.replace(regEx, '');
                 this.parent.formatter.editorManager.nodeSelection.setCursorPoint(this.parent.contentModule.getDocument(), range.startContainer, pointer);
             }
-            let previousLength = this.parent.inputElement.innerHTML.length;
-            let currentLength = this.parent.inputElement.innerHTML.replace(regEx, '').length;
+            const previousLength = this.parent.inputElement.innerHTML.length;
+            const currentLength = this.parent.inputElement.innerHTML.replace(regEx, '').length;
             if (previousLength > currentLength) {
                 let currentChild = this.parent.inputElement.firstChild;
                 while (!isNullOrUndefined(currentChild) && currentChild.textContent.replace(regEx, '').trim().length > 0) {
@@ -18497,7 +18514,7 @@ class HtmlEditor {
                     currentChild = currentChild.nextElementSibling;
                 }
                 if (this.parent.inputElement.querySelector('.currentStartMark').childNodes.length > 1) {
-                    let currentChild = this.parent.inputElement.querySelector('.currentStartMark').childNodes;
+                    const currentChild = this.parent.inputElement.querySelector('.currentStartMark').childNodes;
                     for (let i = 0; i < currentChild.length; i++) {
                         if (currentChild[i].nodeName === '#text' && currentChild[i].textContent.length === 0) {
                             detach(currentChild[i]);
@@ -18507,7 +18524,7 @@ class HtmlEditor {
                 }
                 this.parent.formatter.editorManager.nodeSelection.setCursorPoint(this.parent.contentModule.getDocument(), this.parent.inputElement.querySelector('.currentStartMark').childNodes[0], pointer);
             }
-            let currentElem = this.parent.inputElement.querySelector('.currentStartMark');
+            const currentElem = this.parent.inputElement.querySelector('.currentStartMark');
             if (!isNullOrUndefined(currentElem)) {
                 currentElem.classList.remove('currentStartMark');
                 if (currentElem.getAttribute('class').trim() === '') {
@@ -18649,7 +18666,7 @@ class HtmlEditor {
         if (e.args.code === 'Backspace' && e.args.keyCode === 8 && currentRange.startOffset === 0 &&
             currentRange.endOffset === 0 && this.parent.getSelection().length === 0 && currentRange.startContainer.textContent.length > 0 &&
             currentRange.startContainer.parentElement.tagName !== 'TD' && currentRange.startContainer.parentElement.tagName !== 'TH') {
-            let checkNode = currentRange.startContainer.nodeName === '#text' ? currentRange.startContainer.parentElement : currentRange.startContainer;
+            const checkNode = currentRange.startContainer.nodeName === '#text' ? currentRange.startContainer.parentElement : currentRange.startContainer;
             if (!this.parent.formatter.editorManager.domNode.isBlockNode(checkNode) &&
                 !isNullOrUndefined(checkNode.previousSibling) && checkNode.previousSibling.nodeName === 'BR') {
                 return;
@@ -19709,6 +19726,7 @@ class PasteCleanup {
             }
         }
     }
+    // eslint-disable-next-line @typescript-eslint/tslint/config
     setCssClass(e) {
         if (this.popupObj && e.cssClass) {
             if (isNullOrUndefined(e.oldCssClass)) {
@@ -19958,7 +19976,7 @@ class PasteCleanup {
         const groupingTags = [...deniedTags];
         const keys = Object.keys(pasteCleanupGroupingTags);
         const values = keys.map((key) => {
-            return pasteCleanupGroupingTags[key];
+            return pasteCleanupGroupingTags[`${key}`];
         });
         const addTags = [];
         for (let i = 0; i < groupingTags.length; i++) {
@@ -20278,6 +20296,7 @@ class FileManager$1 {
         this.dialogObj.show(Browser.isDevice ? true : false);
         this.setCssClass({ cssClass: this.parent.cssClass });
     }
+    // eslint-disable-next-line @typescript-eslint/tslint/config
     setCssClass(e) {
         if (this.dialogObj && e.cssClass) {
             if (isNullOrUndefined(e.oldCssClass)) {
@@ -20636,33 +20655,33 @@ function setAttributes(htmlAttributes, rte, isFrame, initial) {
     if (Object.keys(htmlAttributes).length) {
         for (const htmlAttr of Object.keys(htmlAttributes)) {
             if (htmlAttr === 'class') {
-                target.classList.add(htmlAttributes[htmlAttr]);
+                target.classList.add(htmlAttributes[`${htmlAttr}`]);
             }
-            else if (htmlAttr === 'disabled' && htmlAttributes[htmlAttr] === 'disabled') {
+            else if (htmlAttr === 'disabled' && htmlAttributes[`${htmlAttr}`] === 'disabled') {
                 rte.enabled = false;
                 rte.setEnable();
             }
-            else if (htmlAttr === 'readonly' && htmlAttributes[htmlAttr] === 'readonly') {
+            else if (htmlAttr === 'readonly' && htmlAttributes[`${htmlAttr}`] === 'readonly') {
                 rte.readonly = true;
                 rte.setReadOnly(initial);
             }
             else if (htmlAttr === 'style') {
-                target.setAttribute('style', htmlAttributes[htmlAttr]);
+                target.setAttribute('style', htmlAttributes[`${htmlAttr}`]);
             }
             else if (htmlAttr === 'tabindex') {
-                rte.inputElement.setAttribute('tabindex', htmlAttributes[htmlAttr]);
+                rte.inputElement.setAttribute('tabindex', htmlAttributes[`${htmlAttr}`]);
             }
             else if (htmlAttr === 'placeholder') {
-                rte.placeholder = htmlAttributes[htmlAttr];
+                rte.placeholder = htmlAttributes[`${htmlAttr}`];
                 rte.setPlaceHolder();
             }
             else {
                 const validateAttr = ['name', 'required'];
                 if (validateAttr.indexOf(htmlAttr) > -1) {
-                    rte.valueContainer.setAttribute(htmlAttr, htmlAttributes[htmlAttr]);
+                    rte.valueContainer.setAttribute(htmlAttr, htmlAttributes[`${htmlAttr}`]);
                 }
                 else {
-                    target.setAttribute(htmlAttr, htmlAttributes[htmlAttr]);
+                    target.setAttribute(htmlAttr, htmlAttributes[`${htmlAttr}`]);
                 }
             }
         }
@@ -20856,6 +20875,7 @@ class Link {
             }
         }
     }
+    // eslint-disable-next-line @typescript-eslint/tslint/config
     setCssClass(e) {
         this.updateCss(this.checkBoxObj, e);
         this.updateCss(this.dialogObj, e);
@@ -21028,13 +21048,13 @@ class Link {
         });
         const htmlTextbox = (this.parent.editorMode === 'HTML') ? '<label>' + linkTooltip +
             '</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>' +
+            '<input type="text" data-role ="none" spellcheck="false" placeholder = "' + title + '"aria-label="' + this.i10n.getConstant('linkTitle') + '" 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>' : '';
         const 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>' +
+            '<input type="text" data-role ="none" spellcheck="false" placeholder="' + urlPlace + '"aria-label="' + this.i10n.getConstant('linkWebUrl') + '" 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 + '">' +
+            '<input type="text" data-role ="none" spellcheck="false" class="e-input e-rte-linkText' + ' ' + this.parent.cssClass + '"aria-label="' + this.i10n.getConstant('linkText') + '" placeholder="' + textPlace + '">' +
             '</div><div class="e-rte-label' + ' ' + this.parent.cssClass + '">' + htmlTextbox;
         const contentElem = parseHtml(content);
         linkContent.appendChild(contentElem);
@@ -21060,7 +21080,7 @@ class Link {
             cssClass: CLS_RTE_ELEMENTS + ' ' + this.parent.cssClass,
             enableRtl: this.parent.enableRtl,
             locale: this.parent.locale,
-            showCloseIcon: true, closeOnEscape: true, width: (Browser.isDevice) ? '290px' : '310px', height: 'inherit',
+            showCloseIcon: true, closeOnEscape: true, width: (Browser.isDevice) ? '290px' : '310px',
             isModal: Browser.isDevice,
             buttons: [{
                     click: this.insertlink.bind(selectObj),
@@ -21402,6 +21422,7 @@ class Image {
             }
         }
     }
+    // eslint-disable-next-line @typescript-eslint/tslint/config
     setCssClass(e) {
         if (this.popupObj && e.cssClass) {
             if (isNullOrUndefined(e.oldCssClass)) {
@@ -21594,8 +21615,8 @@ class Image {
         const pos = this.calcPos(e);
         const top = pos.top;
         const left = pos.left;
-        const imgWid = e.width;
-        const imgHgt = e.height;
+        const imgWid = e.getBoundingClientRect().width;
+        const imgHgt = e.getBoundingClientRect().height;
         const borWid = (Browser.isDevice) ? (4 * parseInt((e.style.outline.slice(-3)), 10)) + 2 :
             (2 * parseInt((e.style.outline.slice(-3)), 10)) + 2; //span border width + image outline width
         const devWid = ((Browser.isDevice) ? 0 : 2); // span border width
@@ -21622,7 +21643,6 @@ class Image {
             offsetParent = offsetParent.parentNode;
         }
         if (offsetParent && offsetParent !== elem && offsetParent.nodeType === 1) {
-            // eslint-disable-next-line
             parentOffset = offsetParent.getBoundingClientRect();
         }
         if (elem.offsetParent && (elem.offsetParent.classList.contains('e-img-caption'))) {
@@ -21643,6 +21663,7 @@ class Image {
         if (isNullOrUndefined(img.width)) {
             return;
         }
+        // eslint-disable-next-line security/detect-unsafe-regex
         const width = img.style.width !== '' ? img.style.width.match(/^\d+(\.\d*)?%$/g) ? parseFloat(img.style.width) :
             parseInt(img.style.width, 10) : img.width;
         const height = img.style.height !== '' ? parseInt(img.style.height, 10) : img.height;
@@ -22439,6 +22460,7 @@ class Image {
         }
     }
     imageRemovePost(src) {
+        // eslint-disable-next-line @typescript-eslint/no-this-alias
         const proxy = this;
         let absoluteUrl = '';
         if (isNullOrUndefined(this.parent.insertImageSettings.removeUrl) || this.parent.insertImageSettings.removeUrl === '') {
@@ -22450,8 +22472,9 @@ class Image {
         else {
             absoluteUrl = new URL(src, document.baseURI).href;
         }
-        this.removingImgName = absoluteUrl.replace(/^.*[\\\/]/, '');
+        this.removingImgName = absoluteUrl.replace(/^.*[\\/]/, '');
         const xhr = new XMLHttpRequest();
+        // eslint-disable-next-line @typescript-eslint/tslint/config
         xhr.addEventListener('readystatechange', function () {
             if (this.readyState === 4 && this.status === 200) {
                 proxy.triggerPost(this.response);
@@ -22466,6 +22489,7 @@ class Image {
         if (isNullOrUndefined(removeUrl) || removeUrl === '') {
             return;
         }
+        // eslint-disable-next-line @typescript-eslint/tslint/config
         const file = new File([response], this.removingImgName);
         const ajax = new Ajax(removeUrl, 'POST', true, null);
         const formData = new FormData();
@@ -22613,7 +22637,7 @@ class Image {
             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',
+            showCloseIcon: true, closeOnEscape: true, width: (Browser.isDevice) ? '290px' : '340px',
             position: { X: 'center', Y: (Browser.isDevice) ? 'center' : 'top' },
             isModal: Browser.isDevice,
             buttons: [{
@@ -22761,7 +22785,7 @@ class Image {
         const placeUrl = this.i10n.getConstant('imageUrl');
         this.inputUrl = this.parent.createElement('input', {
             className: 'e-input e-img-url' + ' ' + this.parent.cssClass,
-            attrs: { placeholder: placeUrl, spellcheck: 'false' }
+            attrs: { placeholder: placeUrl, spellcheck: 'false', 'aria-label': this.i10n.getConstant('imageLinkHeader') }
         });
         this.inputUrl.addEventListener('input', () => {
             if (!isNullOrUndefined(this.inputUrl)) {
@@ -23688,6 +23712,7 @@ class Audio {
             }
         }
     }
+    // eslint-disable-next-line @typescript-eslint/no-unused-vars
     touchStart(e, ele) {
         if (this.parent.readonly) {
             return;
@@ -23894,6 +23919,7 @@ class Audio {
         }
     }
     audioRemovePost(src) {
+        // eslint-disable-next-line @typescript-eslint/no-this-alias
         const proxy = this;
         let absoluteUrl = '';
         if (isNullOrUndefined(this.parent.insertAudioSettings.removeUrl) || this.parent.insertAudioSettings.removeUrl === '') {
@@ -23905,8 +23931,9 @@ class Audio {
         else {
             absoluteUrl = new URL(src, document.baseURI).href;
         }
-        this.removingAudioName = absoluteUrl.replace(/^.*[\\\/]/, '');
+        this.removingAudioName = absoluteUrl.replace(/^.*[\\/]/, '');
         const xhr = new XMLHttpRequest();
+        // eslint-disable-next-line @typescript-eslint/tslint/config
         xhr.addEventListener('readystatechange', function () {
             if (this.readyState === 4 && this.status === 200) {
                 proxy.triggerPost(this.response);
@@ -23940,6 +23967,7 @@ class Audio {
             }
         }
         if (this.isAudioElem(e.target)) {
+            this.audEle = e.target.querySelector('audio');
             e.preventDefault();
         }
     }
@@ -24078,8 +24106,6 @@ class Audio {
             addClass([target.querySelector('audio')], [CLS_AUD_FOCUS]);
             target.querySelector('audio').style.outline = '2px solid #4a90e2';
         }
-        const pageY = (this.parent.iframeSettings.enable) ? window.pageYOffset +
-            this.parent.element.getBoundingClientRect().top + args.clientY : args.pageY;
         if (this.parent.quickToolbarModule.audioQTBar) {
             if (e.isNotify) {
                 setTimeout(() => {
@@ -24134,7 +24160,7 @@ class Audio {
             cssClass: CLS_RTE_ELEMENTS,
             enableRtl: this.parent.enableRtl,
             locale: this.parent.locale,
-            showCloseIcon: true, closeOnEscape: true, width: (Browser.isDevice) ? '290px' : '340px', height: 'inherit',
+            showCloseIcon: true, closeOnEscape: true, width: (Browser.isDevice) ? '290px' : '340px',
             position: { X: 'center', Y: (Browser.isDevice) ? 'center' : 'top' },
             isModal: Browser.isDevice,
             buttons: [{
@@ -24205,7 +24231,7 @@ class Audio {
         const placeUrl = this.i10n.getConstant('audioUrl');
         this.inputUrl = this.parent.createElement('input', {
             className: 'e-input e-audio-url',
-            attrs: { placeholder: placeUrl, spellcheck: 'false' }
+            attrs: { placeholder: placeUrl, spellcheck: 'false', 'aria-label': this.i10n.getConstant('audioLinkHeader') }
         });
         this.inputUrl.addEventListener('input', () => {
             if (!isNullOrUndefined(this.inputUrl)) {
@@ -24832,7 +24858,6 @@ class Video {
             offsetParent = offsetParent.parentNode;
         }
         if (offsetParent && offsetParent !== elem && offsetParent.nodeType === 1) {
-            // eslint-disable-next-line
             parentOffset = offsetParent.getBoundingClientRect();
         }
         if (elem && elem.nodeType === 1 && elem.tagName === 'IFRAME') {
@@ -24854,6 +24879,7 @@ class Video {
         if (isNullOrUndefined(vidEleStyle)) {
             return;
         }
+        // eslint-disable-next-line
         const width = vidEleStyle.width !== '' ? vidEleStyle.width.match(/^\d+(\.\d*)?%$/g) ? parseFloat(vidEleStyle.width) :
             parseInt(vidEleStyle.width, 10) : vid.style.width !== '' ? vid.style.width : vid.width;
         const height = vidEleStyle.height !== '' ? parseInt(vidEleStyle.height, 10) : vid.style.height !== '' ? vid.style.height : vid.height;
@@ -25251,6 +25277,7 @@ class Video {
         }
     }
     videoRemovePost(src) {
+        // eslint-disable-next-line @typescript-eslint/no-this-alias
         const proxy = this;
         let absoluteUrl = '';
         if (isNullOrUndefined(this.parent.insertVideoSettings.removeUrl) || this.parent.insertVideoSettings.removeUrl === '') {
@@ -25262,8 +25289,10 @@ class Video {
         else {
             absoluteUrl = new URL(src, document.baseURI).href;
         }
+        // eslint-disable-next-line no-useless-escape
         this.removingVideoName = absoluteUrl.replace(/^.*[\\\/]/, '');
         const xhr = new XMLHttpRequest();
+        // eslint-disable-next-line @typescript-eslint/tslint/config
         xhr.addEventListener('readystatechange', function () {
             if (this.readyState === 4 && this.status === 200) {
                 proxy.triggerPost(this.response);
@@ -25393,7 +25422,7 @@ class Video {
         }
     }
     showVideoQuickToolbar(e) {
-        if (e.type !== 'Videos' || isNullOrUndefined(this.parent.quickToolbarModule)
+        if (e.type !== 'Videos' || e.args.detail === 2 || isNullOrUndefined(this.parent.quickToolbarModule)
             || isNullOrUndefined(this.parent.quickToolbarModule.videoQTBar) || isNullOrUndefined(e.args)) {
             return;
         }
@@ -25426,6 +25455,12 @@ class Video {
     hideVideoQuickToolbar() {
         if (!isNullOrUndefined(this.contentModule.getEditPanel().querySelector('.' + CLS_VID_FOCUS))) {
             removeClass([this.contentModule.getEditPanel().querySelector('.' + CLS_VID_FOCUS)], CLS_VID_FOCUS);
+            if (!isNullOrUndefined(this.videoEle)) {
+                this.videoEle.style.outline = '';
+            }
+            if (!isNullOrUndefined(this.contentModule.getEditPanel().querySelector('.e-vid-resize'))) {
+                detach(this.contentModule.getEditPanel().querySelector('.e-vid-resize'));
+            }
             if (this.quickToolObj && this.quickToolObj.videoQTBar && document.body.contains(this.quickToolObj.videoQTBar.element)) {
                 this.quickToolObj.videoQTBar.hidePopup();
             }
@@ -25470,7 +25505,7 @@ class Video {
             cssClass: CLS_RTE_ELEMENTS,
             enableRtl: this.parent.enableRtl,
             locale: this.parent.locale,
-            showCloseIcon: true, closeOnEscape: true, width: (Browser.isDevice) ? '290px' : '340px', height: 'inherit',
+            showCloseIcon: true, closeOnEscape: true, width: (Browser.isDevice) ? '290px' : '340px',
             position: { X: 'center', Y: (Browser.isDevice) ? 'center' : 'top' },
             isModal: Browser.isDevice,
             buttons: [{
@@ -25552,7 +25587,7 @@ class Video {
         videoUrl.appendChild(urlContent);
         this.embedInputUrl = this.parent.createElement('textarea', {
             className: 'e-input e-embed-video-url',
-            attrs: { placeholder: 'Paste Embed URL here', type: 'text', tabindex: '-1' }
+            attrs: { placeholder: 'Paste Embed URL here', type: 'text', tabindex: '-1', 'aria-label': this.i10n.getConstant('embedVideoLinkHeader') }
         });
         this.embedInputUrl.addEventListener('keyup', () => {
             if (!isNullOrUndefined(this.embedInputUrl)) {
@@ -26199,6 +26234,7 @@ class Table {
             }
         }
     }
+    // eslint-disable-next-line @typescript-eslint/tslint/config
     setCssClass(e) {
         if (this.popupObj && e.cssClass) {
             if (isNullOrUndefined(e.oldCssClass)) {
@@ -26331,18 +26367,17 @@ class Table {
             }
         }
     }
+    // eslint-disable-next-line @typescript-eslint/no-unused-vars
     tableModulekeyUp(e) {
-        const event = e.args;
         if (!isNullOrUndefined(this.parent.formatter.editorManager.nodeSelection) && this.contentModule) {
             const range = this.parent.formatter.editorManager.nodeSelection.getRange(this.parent.contentModule.getDocument());
-            const selection = this.parent.formatter.editorManager.nodeSelection.save(range, this.contentModule.getDocument());
             let ele = this.parent.formatter.editorManager.nodeSelection.getParentNodeCollection(range)[0];
             ele = (ele && ele.tagName !== 'TD' && ele.tagName !== 'TH') ? ele.parentElement : ele;
             if (ele && ele.tagName !== 'TD' && ele.tagName !== 'TH') {
                 const closestTd = closest(ele, 'td');
                 ele = !isNullOrUndefined(closestTd) && this.parent.inputElement.contains(closestTd) ? closestTd : ele;
             }
-            if (this.previousTableElement != ele && !isNullOrUndefined(this.previousTableElement)) {
+            if (this.previousTableElement !== ele && !isNullOrUndefined(this.previousTableElement)) {
                 this.previousTableElement.classList.remove(CLS_TABLE_SEL);
             }
         }
@@ -26771,7 +26806,6 @@ class Table {
             top: 0,
             left: 0
         };
-        // eslint-disable-next-line
         const offset = elem.getBoundingClientRect();
         const doc = elem.ownerDocument;
         let offsetParent = elem.offsetParent || doc.documentElement;
@@ -26786,7 +26820,6 @@ class Table {
             isNestedTable = true;
         }
         if (offsetParent && offsetParent !== elem && offsetParent.nodeType === 1) {
-            // eslint-disable-next-line
             parentOffset = offsetParent.getBoundingClientRect();
         }
         if (isNestedTable) {
@@ -26953,6 +26986,8 @@ class Table {
         const mouseY = (this.parent.enableRtl) ? -(pageY - this.pageY) : (pageY - this.pageY);
         this.pageX = pageX;
         this.pageY = pageY;
+        let maxiumWidth;
+        const currentTdElement = this.curTable.closest('td');
         const args = { event: e, requestType: 'table' };
         this.parent.trigger(onResize, args, (resizingArgs) => {
             if (resizingArgs.cancel) {
@@ -26985,6 +27020,10 @@ class Table {
                     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();
+                        if (currentTdElement) {
+                            maxiumWidth = this.curTable.getBoundingClientRect().right - this.calcPos(currentTdElement).left;
+                            this.curTable.style.maxWidth = maxiumWidth + 'px';
+                        }
                         // 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) {
@@ -27002,6 +27041,10 @@ class Table {
                     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();
+                        if (currentTdElement) {
+                            maxiumWidth = currentTdElement.getBoundingClientRect().right - this.curTable.getBoundingClientRect().left;
+                            this.curTable.style.maxWidth = maxiumWidth + 'px';
+                        }
                         // 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) {
@@ -27052,6 +27095,12 @@ class Table {
                     if (!Browser.isDevice) {
                         EventHandler.remove(this.contentModule.getEditPanel(), 'mouseover', this.resizeHelper);
                     }
+                    if (currentTdElement) {
+                        // eslint-disable-next-line max-len
+                        const tableBoxPosition = this.curTable.getBoundingClientRect().left - currentTdElement.getBoundingClientRect().left;
+                        maxiumWidth = Math.abs(tableBoxPosition - currentTdElement.getBoundingClientRect().width) - 5;
+                        this.curTable.style.maxWidth = maxiumWidth + 'px';
+                    }
                     const widthType = this.curTable.style.width.indexOf('%') > -1;
                     this.curTable.style.width = widthType ? this.convertPixelToPercentage(tableWidth + mouseX, widthCompare) + '%'
                         : tableWidth + mouseX + 'px';
@@ -28246,8 +28295,8 @@ class EnterKeyAction {
             let curElement = this.startNode;
             let blockElement = curElement;
             while (!this.parent.formatter.editorManager.domNode.isBlockNode(curElement)) {
-                blockElement = curElement;
                 curElement = curElement.parentElement;
+                blockElement = curElement;
             }
             isTableEnter = blockElement.tagName === 'TD' || blockElement.tagName === 'TBODY' ? false : true;
         }
@@ -28264,7 +28313,10 @@ class EnterKeyAction {
                 this.parent.trigger(actionBegin, actionBeginArgs, (actionBeginArgs) => {
                     if (!actionBeginArgs.cancel) {
                         if (!(this.range.startOffset === this.range.endOffset && this.range.startContainer === this.range.endContainer)) {
-                            this.range.deleteContents();
+                            if (!(this.range.startContainer.nodeName === 'SPAN' && (this.range.startContainer.classList.contains('e-video-wrap') ||
+                                this.range.startContainer.classList.contains('e-audio-wrap')))) {
+                                this.range.deleteContents();
+                            }
                             if (this.range.startContainer.nodeName === '#text' && this.range.startContainer.textContent.length === 0 &&
                                 this.range.startContainer.parentElement !== this.parent.inputElement) {
                                 if (this.parent.enterKey === 'BR') {
@@ -28293,8 +28345,8 @@ class EnterKeyAction {
                                             while (!isNullOrUndefined(currentFocusElem) && currentFocusElem.nodeName !== '#text' && currentFocusElem.nodeName !== 'BR') {
                                                 currentFocusElem = currentFocusElem.lastChild;
                                             }
-                                            if (currentFocusElem.nodeName != 'BR' && currentFocusElem.parentElement.textContent.length === 0 && currentFocusElem.parentElement.innerHTML.length === 0 &&
-                                                currentFocusElem.parentElement.nodeName != 'BR') {
+                                            if (currentFocusElem.nodeName !== 'BR' && currentFocusElem.parentElement.textContent.length === 0 && currentFocusElem.parentElement.innerHTML.length === 0 &&
+                                                currentFocusElem.parentElement.nodeName !== 'BR') {
                                                 currentFocusElem.parentElement.appendChild(this.parent.createElement('BR'));
                                             }
                                             this.parent.formatter.editorManager.nodeSelection.setCursorPoint(this.parent.contentModule.getDocument(), currentFocusElem.nodeName === 'BR' ? currentFocusElem : currentFocusElem.parentElement, currentFocusElem.parentElement.textContent.length >= 0 || currentFocusElem.nodeName === 'BR' ? 0 : 1);
@@ -28333,7 +28385,7 @@ class EnterKeyAction {
                             (this.parent.shiftEnterKey === 'P' && shiftKey) ||
                             (this.parent.shiftEnterKey === 'DIV' && shiftKey)) {
                             if (this.range.startOffset === 1 && this.parent.inputElement.childNodes.length === 1 && this.parent.inputElement.childNodes[0].nodeName === 'TABLE') {
-                                let newElem = this.createInsertElement(shiftKey);
+                                const newElem = this.createInsertElement(shiftKey);
                                 newElem.appendChild(this.parent.createElement('BR'));
                                 this.parent.inputElement.appendChild(newElem);
                                 this.parent.formatter.editorManager.nodeSelection.setCursorPoint(this.parent.contentModule.getDocument(), newElem, 0);
@@ -28346,13 +28398,14 @@ class EnterKeyAction {
                                 else {
                                     nearBlockNode = this.parent.formatter.editorManager.domNode.blockParentNode(this.startNode);
                                 }
-                                let isImageNode = false;
+                                let isMediaNode = false; // To check the image audio and video node cases
                                 let isFocusedFirst = false;
                                 if (this.range.startOffset !== 0 && this.range.endOffset !== 0 &&
                                     this.range.startContainer === this.range.endContainer && !(!isNullOrUndefined(nearBlockNode.childNodes[0])
-                                    && nearBlockNode.childNodes[0].nodeName === 'IMG')) {
+                                    && nearBlockNode.childNodes[0].nodeName === 'IMG' && nearBlockNode.querySelectorAll('img,audio,video').length > 0)) {
                                     const startNodeText = this.range.startContainer.textContent;
                                     const splitFirstText = startNodeText.substring(0, this.range.startOffset);
+                                    // eslint-disable-next-line max-len
                                     if (splitFirstText.charCodeAt(this.range.startOffset - 1) !== 160 && splitFirstText.trim().length === 0) {
                                         isFocusedFirst = true;
                                     }
@@ -28364,26 +28417,29 @@ class EnterKeyAction {
                                 const fireFoxEnterAtMiddle = Browser.userAgent.indexOf('Firefox') !== -1 && this.range.startOffset === 0 && this.range.startContainer === this.range.endContainer &&
                                     this.range.startContainer.nodeName === '#text' && !this.parent.formatter.editorManager.domNode.isBlockNode(this.range.startContainer.previousSibling) &&
                                     this.range.startContainer.parentElement === this.range.startContainer.previousSibling.parentElement;
+                                // eslint-disable-next-line max-len
                                 if (!fireFoxEnterAtMiddle && ((this.range.startOffset === 0 && this.range.endOffset === 0) || isFocusedFirst) &&
                                     !(!isNullOrUndefined(this.range.startContainer.previousSibling) &&
                                         (this.range.startContainer.previousSibling.nodeName === 'IMG' || this.range.startContainer.previousSibling.nodeName === 'BR'))) {
                                     let isNearBlockLengthZero;
                                     let newElem;
-                                    if (this.range.startContainer.nodeName === 'IMG' || this.range.startContainer.nodeName === 'TABLE') {
+                                    if (!isNullOrUndefined(this.range.startContainer.childNodes) && this.range.startContainer.textContent.length === 0 &&
+                                        (this.range.startContainer.querySelectorAll('img,audio,video').length > 0 ||
+                                            this.range.startContainer.nodeName === 'IMG' || this.range.startContainer.nodeName === 'TABLE')) {
                                         newElem = this.createInsertElement(shiftKey);
-                                        isImageNode = true;
+                                        isMediaNode = true;
                                         isNearBlockLengthZero = false;
                                     }
                                     else {
                                         if ((nearBlockNode.textContent.trim().length !== 0 ||
                                             nearBlockNode.childNodes[0].nodeName === 'IMG' ||
-                                            (nearBlockNode.textContent.trim() === '' && nearBlockNode.querySelectorAll('img').length > 0))) {
-                                            if ((this.range.startOffset === this.range.endOffset && this.range.startOffset != 0)) {
+                                            (nearBlockNode.textContent.trim() === '' && nearBlockNode.querySelectorAll('img,audio,video').length > 0))) {
+                                            if ((this.range.startOffset === this.range.endOffset && this.range.startOffset !== 0)) {
                                                 newElem = this.parent.formatter.editorManager.nodeCutter.SplitNode(this.range, nearBlockNode, false).cloneNode(true);
                                             }
                                             else {
                                                 newElem = this.parent.formatter.editorManager.nodeCutter.SplitNode(this.range, nearBlockNode, true).cloneNode(true);
-                                                isImageNode = true;
+                                                isMediaNode = true;
                                             }
                                             isNearBlockLengthZero = false;
                                         }
@@ -28406,7 +28462,7 @@ class EnterKeyAction {
                                     if (!isNearBlockLengthZero) {
                                         let currentFocusElem = insertElem;
                                         let finalFocusElem;
-                                        if (this.range.startOffset === this.range.endOffset && this.range.startOffset != 0) {
+                                        if (this.range.startOffset === this.range.endOffset && this.range.startOffset !== 0) {
                                             while (!isNullOrUndefined(currentFocusElem) && currentFocusElem.nodeName !== '#text' &&
                                                 currentFocusElem.nodeName !== 'BR') {
                                                 finalFocusElem = currentFocusElem;
@@ -28417,7 +28473,7 @@ class EnterKeyAction {
                                             finalFocusElem = currentFocusElem;
                                         }
                                         finalFocusElem.innerHTML = '<br>';
-                                        if (!isImageNode) {
+                                        if (!isMediaNode) {
                                             detach(nearBlockNode);
                                         }
                                     }
@@ -28436,6 +28492,48 @@ class EnterKeyAction {
                                         this.parent.formatter.editorManager.nodeSelection.setCursorPoint(this.parent.contentModule.getDocument(), insertElem, 0);
                                     }
                                 }
+                                else if (this.range.startContainer === this.range.endContainer && this.range.startContainer.nodeName === 'SPAN' &&
+                                    (this.range.startContainer.classList.contains('e-video-wrap') ||
+                                        this.range.startContainer.classList.contains('e-audio-wrap'))) {
+                                    if (nearBlockNode.textContent.trim().length > 0) {
+                                        const newElem = this.parent.formatter.editorManager.nodeCutter.SplitNode(this.range, nearBlockNode, true);
+                                        let audioVideoElem = !isNullOrUndefined(newElem.previousSibling.querySelector('.e-video-wrap')) ?
+                                            newElem.previousSibling.querySelector('.e-video-wrap') : newElem.previousSibling.querySelector('.e-audio-wrap');
+                                        let isBRInserted = false;
+                                        let lastNode = audioVideoElem.previousSibling;
+                                        while (!isNullOrUndefined(lastNode) && lastNode.nodeName !== '#text') {
+                                            lastNode = lastNode.lastChild;
+                                        }
+                                        if (isNullOrUndefined(lastNode)) {
+                                            const brElm = this.parent.createElement('br');
+                                            audioVideoElem.parentElement.appendChild(brElm);
+                                            isBRInserted = true;
+                                        }
+                                        if (isBRInserted) {
+                                            this.parent.formatter.editorManager.nodeSelection.setCursorPoint(this.parent.contentModule.getDocument(), audioVideoElem.parentElement, 0);
+                                        }
+                                        else {
+                                            this.parent.formatter.editorManager.nodeSelection.setCursorPoint(this.parent.contentModule.getDocument(), lastNode, lastNode.textContent.length);
+                                        }
+                                        detach(audioVideoElem);
+                                    }
+                                    else {
+                                        const newElem = this.parent.formatter.editorManager.nodeCutter.SplitNode(this.range, nearBlockNode, true);
+                                        let focusElem = newElem.previousSibling;
+                                        while (!isNullOrUndefined(focusElem.firstChild)) {
+                                            detach(focusElem.firstChild);
+                                        }
+                                        const brElm = this.parent.createElement('br');
+                                        focusElem.appendChild(brElm);
+                                        this.parent.formatter.editorManager.nodeSelection.setCursorPoint(this.parent.contentModule.getDocument(), focusElem, 0);
+                                    }
+                                    if (!isNullOrUndefined(this.parent.audioModule)) {
+                                        this.parent.audioModule.hideAudioQuickToolbar();
+                                    }
+                                    if (!isNullOrUndefined(this.parent.videoModule)) {
+                                        this.parent.videoModule.hideVideoQuickToolbar();
+                                    }
+                                }
                                 else {
                                     const newElem = this.parent.formatter.editorManager.nodeCutter.SplitNode(this.range, nearBlockNode, true);
                                     if (!isNullOrUndefined(newElem.childNodes[0]) && newElem.childNodes[0].nodeName === '#text' &&
@@ -28451,7 +28549,7 @@ class EnterKeyAction {
                                             this.startNode = startParentElem;
                                         }
                                         else {
-                                            if (this.startNode.nodeName != 'BR') {
+                                            if (this.startNode.nodeName !== 'BR') {
                                                 this.startNode.appendChild(brElm);
                                             }
                                         }
@@ -28462,7 +28560,7 @@ class EnterKeyAction {
                                     }
                                     if (((this.parent.enterKey === 'P' || this.parent.enterKey === 'DIV') && !shiftKey) || ((this.parent.shiftEnterKey === 'DIV' ||
                                         this.parent.shiftEnterKey === 'P') && shiftKey)) {
-                                        let isHeadingTag = this.formatTags.indexOf(newElem.nodeName.toLocaleLowerCase());
+                                        const isHeadingTag = this.formatTags.indexOf(newElem.nodeName.toLocaleLowerCase());
                                         if ((isHeadingTag < 0) || (isHeadingTag >= 0 && newElem.textContent.trim().length === 0)) {
                                             const insertElm = this.createInsertElement(shiftKey);
                                             while (newElem.firstChild) {
@@ -28534,6 +28632,7 @@ class EnterKeyAction {
                                     const outerBRElem = this.parent.createElement('br');
                                     if (this.range.startOffset === 0 && this.range.endOffset === 0 &&
                                         !isNullOrUndefined(currentParent.previousSibling) && currentParent.previousSibling.nodeName === 'BR') {
+                                        // eslint-disable-next-line @typescript-eslint/no-unused-vars
                                         newElem = this.parent.formatter.editorManager.nodeCutter.SplitNode(this.range, currentParent, false).cloneNode(true);
                                         this.parent.formatter.editorManager.domNode.insertAfter(outerBRElem, currentParent);
                                         this.insertFocusContent();
@@ -28542,6 +28641,7 @@ class EnterKeyAction {
                                             currentFocusElem = currentFocusElem.lastChild;
                                         }
                                         this.parent.formatter.editorManager.nodeSelection.setCursorPoint(this.parent.contentModule.getDocument(), currentFocusElem, 0);
+                                        // eslint-disable-next-line @typescript-eslint/no-unused-vars
                                         
                                     }
                                     else {
@@ -28571,7 +28671,7 @@ class EnterKeyAction {
     insertBRElement() {
         let isEmptyBrInserted = false;
         let isFocusTextNode = true;
-        if (this.range.endContainer.textContent.length == 0 && this.range.startContainer.nodeName === "BR") {
+        if (this.range.endContainer.textContent.length === 0 && this.range.startContainer.nodeName === 'BR') {
             isFocusTextNode = false;
         }
         const brElm = this.parent.createElement('br');
@@ -28904,7 +29004,7 @@ let RichTextEditor = class RichTextEditor extends Component {
                 this.focusIn();
             }
         }
-        const tool = executeGroup[commandName];
+        const tool = executeGroup[`${commandName}`];
         if (option && option.undo) {
             if (option.undo && this.formatter.getUndoRedoStack().length === 0) {
                 this.formatter.saveData();
@@ -29122,16 +29222,18 @@ let RichTextEditor = class RichTextEditor extends Component {
      */
     addAudioVideoWrapper() {
         let insertElem;
-        let audioElm = this.element.querySelectorAll('audio');
+        const audioElm = this.element.querySelectorAll('audio');
         for (let i = 0; i < audioElm.length; i++) {
             if (!audioElm[i].classList.contains('e-rte-audio')) {
                 audioElm[i].classList.add('e-rte-audio');
                 audioElm[i].classList.add(CLS_AUDIOINLINE);
             }
+            // eslint-disable-next-line max-len
             if (!audioElm[i].parentElement.classList.contains(CLS_CLICKELEM) && !audioElm[i].parentElement.classList.contains(CLS_AUDIOWRAP)) {
-                let audioWrapElem = this.createElement('span', { className: CLS_AUDIOWRAP });
+                const audioWrapElem = this.createElement('span', { className: CLS_AUDIOWRAP });
+                audioWrapElem.setAttribute('style', 'width:300px; margin:0 auto;');
                 audioWrapElem.contentEditable = 'false';
-                let audioInnerWrapElem = this.createElement('span', { className: CLS_CLICKELEM });
+                const audioInnerWrapElem = this.createElement('span', { className: CLS_CLICKELEM });
                 audioWrapElem.appendChild(audioInnerWrapElem);
                 audioElm[i].parentNode.insertBefore(audioWrapElem, audioElm[i].nextSibling);
                 audioInnerWrapElem.appendChild(audioElm[i]);
@@ -29141,14 +29243,15 @@ let RichTextEditor = class RichTextEditor extends Component {
                 }
             }
         }
-        let videoElm = this.element.querySelectorAll('video');
+        const videoElm = this.element.querySelectorAll('video');
         for (let i = 0; i < videoElm.length; i++) {
             if (!videoElm[i].classList.contains('e-rte-video')) {
                 videoElm[i].classList.add('e-rte-video');
                 videoElm[i].classList.add(CLS_VIDEOINLINE);
             }
+            // eslint-disable-next-line max-len
             if (!videoElm[i].parentElement.classList.contains(CLS_CLICKELEM) && !videoElm[i].parentElement.classList.contains(CLS_VIDEOWRAP)) {
-                let videoWrapElem = this.createElement('span', { className: CLS_VIDEOWRAP });
+                const videoWrapElem = this.createElement('span', { className: CLS_VIDEOWRAP });
                 videoWrapElem.contentEditable = 'false';
                 videoElm[i].parentNode.insertBefore(videoWrapElem, videoElm[i].nextSibling);
                 videoWrapElem.appendChild(videoElm[i]);
@@ -29158,10 +29261,12 @@ let RichTextEditor = class RichTextEditor extends Component {
                 }
             }
             if (Browser.userAgent.indexOf('Firefox') !== -1) {
+                // eslint-disable-next-line
                 videoElm[i].addEventListener('play', (args) => {
                     this.notify(mouseDown, { args: args });
                     this.notify('editAreaClick', { args: args });
                 });
+                // eslint-disable-next-line
                 videoElm[i].addEventListener('pause', (args) => {
                     this.notify(mouseDown, { args: args });
                     this.notify('editAreaClick', { args: args });
@@ -29180,6 +29285,7 @@ let RichTextEditor = class RichTextEditor extends Component {
     eventInitializer() {
         this.wireEvents();
     }
+    // eslint-disable-next-line @typescript-eslint/no-unused-vars
     cleanList(e) {
         const range = this.getRange();
         const currentStartContainer = range.startContainer;
@@ -29227,6 +29333,7 @@ let RichTextEditor = class RichTextEditor extends Component {
             if (closest(startNode, 'pre') &&
                 (e.which === 8 && range.startContainer.textContent.charCodeAt(range.startOffset - 1) === 8203) ||
                 (e.which === 46 && range.startContainer.textContent.charCodeAt(range.startOffset) === 8203)) {
+                // eslint-disable-next-line
                 const regEx = new RegExp(String.fromCharCode(8203), 'g');
                 const pointer = e.which === 8 ? range.startOffset - 1 : range.startOffset;
                 range.startContainer.textContent = range.startContainer.textContent.replace(regEx, '');
@@ -29245,6 +29352,7 @@ let RichTextEditor = class RichTextEditor extends Component {
                 let bool = true;
                 const removeNodeArray = [];
                 for (i = index; i >= 0; i--) {
+                    // eslint-disable-next-line max-len
                     if (parentEle.childNodes[i].nodeType === 3 && parentEle.childNodes[i].textContent.charCodeAt(0) === 8203 && bool) {
                         removeNodeArray.push(i);
                     }
@@ -29303,7 +29411,7 @@ let RichTextEditor = class RichTextEditor extends Component {
             }
         }
         this.notify(keyUp, { member: 'keyup', args: e });
-        if (e.keyCode == 39 || e.keyCode == 37) {
+        if (e.keyCode === 39 || e.keyCode === 37) {
             this.notify(tableModulekeyUp, { member: 'tableModulekeyUp', args: e });
         }
         if (e.code === 'KeyX' && e.which === 88 && e.keyCode === 88 && e.ctrlKey && (this.inputElement.innerHTML === '' ||
@@ -29721,6 +29829,7 @@ let RichTextEditor = class RichTextEditor extends Component {
      * @hidden
      * @deprecated
      */
+    /* eslint-disable */
     onPropertyChanged(newProp, oldProp) {
         for (const prop of Object.keys(newProp)) {
             switch (prop) {
@@ -29759,7 +29868,7 @@ let RichTextEditor = class RichTextEditor extends Component {
                     break;
                 }
                 case 'valueTemplate':
-                    this.setValue();
+                    this.setValue(true);
                     if (this.showCharCount) {
                         this.countModule.refresh();
                     }
@@ -29855,7 +29964,6 @@ let RichTextEditor = class RichTextEditor extends Component {
                     this.notify(xhtmlValidation, { module: 'XhtmlValidation', newProp: newProp, oldProp: oldProp });
                     break;
                 case 'quickToolbarSettings':
-                    // eslint-disable-next-line
                     newProp.quickToolbarSettings.showOnRightClick ? this.wireContextEvent() : this.unWireContextEvent();
                     this.notify(modelChanged, { newProp: newProp, oldProp: oldProp });
                     break;
@@ -29865,6 +29973,7 @@ let RichTextEditor = class RichTextEditor extends Component {
             }
         }
     }
+    /* eslint-enable */
     /**
      * @hidden
      * @returns {void}
@@ -30006,9 +30115,11 @@ let RichTextEditor = class RichTextEditor extends Component {
         this.notify(rtlMode, { enableRtl: this.enableRtl });
         if (this.enableRtl) {
             this.element.classList.add(CLS_RTL);
+            this.inputElement.classList.add(CLS_RTL);
         }
         else {
             this.element.classList.remove(CLS_RTL);
+            this.inputElement.classList.remove(CLS_RTL);
         }
     }
     updateReadOnly() {
@@ -30203,7 +30314,7 @@ let RichTextEditor = class RichTextEditor extends Component {
         styleEle.rel = 'stylesheet';
         return styleEle;
     }
-    setValue() {
+    setValue(isPropertyChange) {
         if (this.valueTemplate) {
             const regEx = new RegExp(/<(?=.*? .*?\/ ?>|br|hr|input|!--|wbr)[a-z]+.*?>|<([a-z]+).*?<\/\1>/i);
             if (regEx.test(this.valueTemplate)) {
@@ -30211,11 +30322,30 @@ let RichTextEditor = class RichTextEditor extends Component {
             }
             else {
                 const compiledTemplate = compile(this.valueTemplate)('', this, 'valueTemplate');
-                for (let i = 0; i < compiledTemplate.length; i++) {
-                    const item = compiledTemplate[i];
-                    append([item], this.element);
+                if (typeof this.valueTemplate !== 'string' && this.isReact) {
+                    this.displayTempElem = this.createElement('div');
+                    for (let i = 0; i < compiledTemplate.length; i++) {
+                        const item = compiledTemplate[i];
+                        append([item], this.displayTempElem);
+                    }
+                    this.renderTemplates(() => {
+                        this.inputElement.innerHTML = this.displayTempElem.childNodes[0].innerHTML;
+                        this.setProperties({ value: this.inputElement.innerHTML.trim() });
+                    });
+                }
+                else {
+                    let appendElem = this.element;
+                    if (isPropertyChange) {
+                        this.inputElement.innerHTML = '';
+                        appendElem = this.inputElement;
+                    }
+                    for (let i = 0; i < compiledTemplate.length; i++) {
+                        const item = compiledTemplate[i];
+                        append([item], appendElem);
+                    }
+                    this.setProperties({ value: appendElem.innerHTML.trim() });
+                    this.renderReactTemplates();
                 }
-                this.setProperties({ value: this.element.innerHTML.trim() });
             }
         }
         else {
@@ -30231,6 +30361,10 @@ let RichTextEditor = class RichTextEditor extends Component {
             }
         }
     }
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    renderTemplates(callBack) {
+        this.renderReactTemplates(callBack);
+    }
     updateResizeFlag() {
         this.isResizeInitialized = true;
     }
@@ -30300,7 +30434,7 @@ let RichTextEditor = class RichTextEditor extends Component {
         const rzHandle = this.element.querySelector('.' + CLS_RTE_RES_HANDLE);
         const rzHeight = this.enableResize ? (!isNullOrUndefined(rzHandle) ? (rzHandle.offsetHeight + 8) : 0) : 0;
         const expandPopHeight = this.getToolbar() ? this.toolbarModule.getExpandTBarPopHeight() : 0;
-        if (this.toolbarSettings.type === ToolbarType.Expand && isExpand && target !== 'preview') {
+        if (this.toolbarSettings.type === ToolbarType.Expand && isExpand) {
             heightValue = (this.height === 'auto' && rzHeight === 0) ? 'auto' : rteHeight - (tbHeight + expandPopHeight + rzHeight) + 'px';
             topValue = (!this.toolbarSettings.enableFloating) ? expandPopHeight : 0;
         }