@syncfusion/ej2-richtexteditor 20.3.61 → 20.4.38

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

@@ -41,8 +41,8 @@ var EnterKeyAction = /** @class */ (function () {
             var curElement = this.startNode;
             var 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;
         }
@@ -59,7 +59,10 @@ var EnterKeyAction = /** @class */ (function () {
                 this.parent.trigger(events.actionBegin, actionBeginArgs, function (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') {
@@ -88,8 +91,8 @@ var EnterKeyAction = /** @class */ (function () {
                                             while (!isNOU(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);
@@ -141,13 +144,14 @@ var EnterKeyAction = /** @class */ (function () {
                                 else {
                                     nearBlockNode = _this.parent.formatter.editorManager.domNode.blockParentNode(_this.startNode);
                                 }
-                                var isImageNode = false;
+                                var isMediaNode = false; // To check the image audio and video node cases
                                 var isFocusedFirst = false;
                                 if (_this.range.startOffset !== 0 && _this.range.endOffset !== 0 &&
                                     _this.range.startContainer === _this.range.endContainer && !(!isNOU(nearBlockNode.childNodes[0])
-                                    && nearBlockNode.childNodes[0].nodeName === 'IMG')) {
+                                    && nearBlockNode.childNodes[0].nodeName === 'IMG' && nearBlockNode.querySelectorAll('img,audio,video').length > 0)) {
                                     var startNodeText = _this.range.startContainer.textContent;
                                     var 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;
                                     }
@@ -159,26 +163,29 @@ var EnterKeyAction = /** @class */ (function () {
                                 var 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) &&
                                     !(!isNOU(_this.range.startContainer.previousSibling) &&
                                         (_this.range.startContainer.previousSibling.nodeName === 'IMG' || _this.range.startContainer.previousSibling.nodeName === 'BR'))) {
                                     var isNearBlockLengthZero = void 0;
                                     var newElem = void 0;
-                                    if (_this.range.startContainer.nodeName === 'IMG' || _this.range.startContainer.nodeName === 'TABLE') {
+                                    if (!isNOU(_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_1);
-                                        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;
                                         }
@@ -201,7 +208,7 @@ var EnterKeyAction = /** @class */ (function () {
                                     if (!isNearBlockLengthZero) {
                                         var currentFocusElem = insertElem;
                                         var finalFocusElem = void 0;
-                                        if (_this.range.startOffset === _this.range.endOffset && _this.range.startOffset != 0) {
+                                        if (_this.range.startOffset === _this.range.endOffset && _this.range.startOffset !== 0) {
                                             while (!isNOU(currentFocusElem) && currentFocusElem.nodeName !== '#text' &&
                                                 currentFocusElem.nodeName !== 'BR') {
                                                 finalFocusElem = currentFocusElem;
@@ -212,7 +219,7 @@ var EnterKeyAction = /** @class */ (function () {
                                             finalFocusElem = currentFocusElem;
                                         }
                                         finalFocusElem.innerHTML = '<br>';
-                                        if (!isImageNode) {
+                                        if (!isMediaNode) {
                                             detach(nearBlockNode);
                                         }
                                     }
@@ -231,6 +238,48 @@ var EnterKeyAction = /** @class */ (function () {
                                         _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) {
+                                        var newElem = _this.parent.formatter.editorManager.nodeCutter.SplitNode(_this.range, nearBlockNode, true);
+                                        var audioVideoElem = !isNOU(newElem.previousSibling.querySelector('.e-video-wrap')) ?
+                                            newElem.previousSibling.querySelector('.e-video-wrap') : newElem.previousSibling.querySelector('.e-audio-wrap');
+                                        var isBRInserted = false;
+                                        var lastNode = audioVideoElem.previousSibling;
+                                        while (!isNOU(lastNode) && lastNode.nodeName !== '#text') {
+                                            lastNode = lastNode.lastChild;
+                                        }
+                                        if (isNOU(lastNode)) {
+                                            var 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 {
+                                        var newElem = _this.parent.formatter.editorManager.nodeCutter.SplitNode(_this.range, nearBlockNode, true);
+                                        var focusElem = newElem.previousSibling;
+                                        while (!isNOU(focusElem.firstChild)) {
+                                            detach(focusElem.firstChild);
+                                        }
+                                        var brElm = _this.parent.createElement('br');
+                                        focusElem.appendChild(brElm);
+                                        _this.parent.formatter.editorManager.nodeSelection.setCursorPoint(_this.parent.contentModule.getDocument(), focusElem, 0);
+                                    }
+                                    if (!isNOU(_this.parent.audioModule)) {
+                                        _this.parent.audioModule.hideAudioQuickToolbar();
+                                    }
+                                    if (!isNOU(_this.parent.videoModule)) {
+                                        _this.parent.videoModule.hideVideoQuickToolbar();
+                                    }
+                                }
                                 else {
                                     var newElem = _this.parent.formatter.editorManager.nodeCutter.SplitNode(_this.range, nearBlockNode, true);
                                     if (!isNOU(newElem.childNodes[0]) && newElem.childNodes[0].nodeName === '#text' &&
@@ -246,7 +295,7 @@ var EnterKeyAction = /** @class */ (function () {
                                             _this.startNode = startParentElem;
                                         }
                                         else {
-                                            if (_this.startNode.nodeName != 'BR') {
+                                            if (_this.startNode.nodeName !== 'BR') {
                                                 _this.startNode.appendChild(brElm);
                                             }
                                         }
@@ -330,6 +379,7 @@ var EnterKeyAction = /** @class */ (function () {
                                     var outerBRElem = _this.parent.createElement('br');
                                     if (_this.range.startOffset === 0 && _this.range.endOffset === 0 &&
                                         !isNOU(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();
@@ -338,6 +388,7 @@ var EnterKeyAction = /** @class */ (function () {
                                             currentFocusElem = currentFocusElem.lastChild;
                                         }
                                         _this.parent.formatter.editorManager.nodeSelection.setCursorPoint(_this.parent.contentModule.getDocument(), currentFocusElem, 0);
+                                        // eslint-disable-next-line @typescript-eslint/no-unused-vars
                                         isEmptyBrInserted = true;
                                     }
                                     else {
@@ -367,7 +418,7 @@ var EnterKeyAction = /** @class */ (function () {
     EnterKeyAction.prototype.insertBRElement = function () {
         var isEmptyBrInserted = false;
         var 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;
         }
         var brElm = this.parent.createElement('br');

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

@@ -80,6 +80,7 @@ var FileManager = /** @class */ (function () {
         this.dialogObj.show(Browser.isDevice ? true : false);
         this.setCssClass({ cssClass: this.parent.cssClass });
     };
+    // eslint-disable-next-line @typescript-eslint/tslint/config
     FileManager.prototype.setCssClass = function (e) {
         if (this.dialogObj && e.cssClass) {
             if (isNullOrUndefined(e.oldCssClass)) {

package/src/rich-text-editor/actions/html-attributes.js

@@ -19,33 +19,33 @@ export function setAttributes(htmlAttributes, rte, isFrame, initial) {
         for (var _i = 0, _a = Object.keys(htmlAttributes); _i < _a.length; _i++) {
             var htmlAttr = _a[_i];
             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 {
                 var 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]);
                 }
             }
         }

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

@@ -106,10 +106,12 @@ var HtmlEditor = /** @class */ (function () {
         var 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];
         var range = this.parent.getRange();
+        // eslint-disable-next-line
         var regEx = new RegExp(String.fromCharCode(8203), 'g');
         var 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;

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

@@ -113,7 +113,7 @@ var KeyboardEvents = /** @class */ (function (_super) {
             var keys = Object.keys(_this.keyConfigs);
             for (var _i = 0, keys_1 = keys; _i < keys_1.length; _i++) {
                 var key = keys_1[_i];
-                var configCollection = _this.keyConfigs[key].split(',');
+                var configCollection = _this.keyConfigs["" + key].split(',');
                 for (var _a = 0, configCollection_1 = configCollection; _a < configCollection_1.length; _a++) {
                     var rconfig = configCollection_1[_a];
                     var rKeyObj = KeyboardEvents_1.getKeyConfigData(rconfig.trim());
@@ -187,7 +187,7 @@ var KeyboardEvents = /** @class */ (function (_super) {
      */
     KeyboardEvents.getKeyConfigData = function (config) {
         if (config in this.configCache) {
-            return this.configCache[config];
+            return this.configCache["" + config];
         }
         var keys = config.toLowerCase().split('+');
         var keyData = {
@@ -202,12 +202,12 @@ var KeyboardEvents = /** @class */ (function (_super) {
         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
     KeyboardEvents.getKeyCode = function (keyVal) {
-        return keyCode[keyVal] || keyVal.toUpperCase().charCodeAt(0);
+        return keyCode["" + keyVal] || keyVal.toUpperCase().charCodeAt(0);
     };
     var KeyboardEvents_1;
     KeyboardEvents.configCache = {};

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

@@ -58,7 +58,7 @@ var MarkdownToolbarStatus = /** @class */ (function () {
         }
         else {
             for (var 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;
                 }
@@ -118,6 +118,7 @@ var MarkdownToolbarStatus = /** @class */ (function () {
         return text.search('\\' + cmd + '') !== -1;
     };
     MarkdownToolbarStatus.prototype.multiCharRegx = function (cmd) {
+        // eslint-disable-next-line
         return new RegExp('(\\' + cmd + ')', 'g');
     };
     return MarkdownToolbarStatus;

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

@@ -569,6 +569,7 @@ var PasteCleanup = /** @class */ (function () {
             }
         }
     };
+    // eslint-disable-next-line @typescript-eslint/tslint/config
     PasteCleanup.prototype.setCssClass = function (e) {
         if (this.popupObj && e.cssClass) {
             if (isNullOrUndefined(e.oldCssClass)) {
@@ -820,7 +821,7 @@ var PasteCleanup = /** @class */ (function () {
         var groupingTags = deniedTags.slice();
         var keys = Object.keys(pasteCleanupGroupingTags);
         var values = keys.map(function (key) {
-            return pasteCleanupGroupingTags[key];
+            return pasteCleanupGroupingTags["" + key];
         });
         var addTags = [];
         for (var i = 0; i < groupingTags.length; i++) {

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

@@ -134,6 +134,7 @@ var Toolbar = /** @class */ (function () {
         this.isTransformChild = false;
         var transformElements = selectAll('[style*="transform"]', document);
         for (var 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;
@@ -632,6 +633,7 @@ var Toolbar = /** @class */ (function () {
             this.parent.off(events.toolbarClick, this.toolbarClickHandler);
         }
     };
+    // eslint-disable-next-line @typescript-eslint/tslint/config
     Toolbar.prototype.setCssClass = function (e) {
         if (this.toolbarObj && e.cssClass) {
             if (isNullOrUndefined(e.oldCssClass)) {

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

@@ -572,24 +572,24 @@ export declare const imageRemoving: string;
  */
 export declare const fileSelected: string;
 /**
-  * @hidden
+ * @hidden
 
-  */
+ */
 export declare const fileUploading: string;
 /**
-  * @hidden
+ * @hidden
 
-  */
+ */
 export declare const fileUploadSuccess: string;
 /**
-  * @hidden
+ * @hidden
 
-  */
+ */
 export declare const fileUploadFailed: string;
 /**
-  * @hidden
+ * @hidden
 
-  */
+ */
 export declare const fileRemoving: string;
 /**
  * @hidden

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

@@ -572,24 +572,24 @@ export var imageRemoving = 'imageRemoving';
  */
 export var fileSelected = 'fileSelected';
 /**
-  * @hidden
+ * @hidden
 
-  */
+ */
 export var fileUploading = 'fileUploading';
 /**
-  * @hidden
+ * @hidden
 
-  */
+ */
 export var fileUploadSuccess = 'fileUploadSuccess';
 /**
-  * @hidden
+ * @hidden
 
-  */
+ */
 export var fileUploadFailed = 'fileUploadFailed';
 /**
-  * @hidden
+ * @hidden
 
-  */
+ */
 export var fileRemoving = 'fileRemoving';
 /**
  * @hidden

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

@@ -55,6 +55,7 @@ export declare class RichTextEditor extends Component<HTMLElement> implements IN
     private defaultResetValue;
     private isResizeInitialized;
     private isValueChangeBlurhandler;
+    private displayTempElem;
     /**
      * @hidden
 
@@ -1404,6 +1405,7 @@ export declare class RichTextEditor extends Component<HTMLElement> implements IN
     private createScriptElement;
     private createStyleElement;
     private setValue;
+    renderTemplates(callBack: any): void;
     private updateResizeFlag;
     /**
      * Image max width calculation method

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

@@ -339,7 +339,7 @@ var RichTextEditor = /** @class */ (function (_super) {
                 this.focusIn();
             }
         }
-        var tool = executeGroup[commandName];
+        var tool = executeGroup["" + commandName];
         if (option && option.undo) {
             if (option.undo && this.formatter.getUndoRedoStack().length === 0) {
                 this.formatter.saveData();
@@ -564,8 +564,10 @@ var RichTextEditor = /** @class */ (function (_super) {
                 audioElm[i].classList.add('e-rte-audio');
                 audioElm[i].classList.add(classes.CLS_AUDIOINLINE);
             }
+            // eslint-disable-next-line max-len
             if (!audioElm[i].parentElement.classList.contains(classes.CLS_CLICKELEM) && !audioElm[i].parentElement.classList.contains(classes.CLS_AUDIOWRAP)) {
                 var audioWrapElem = this.createElement('span', { className: classes.CLS_AUDIOWRAP });
+                audioWrapElem.setAttribute('style', 'width:300px; margin:0 auto;');
                 audioWrapElem.contentEditable = 'false';
                 var audioInnerWrapElem = this.createElement('span', { className: classes.CLS_CLICKELEM });
                 audioWrapElem.appendChild(audioInnerWrapElem);
@@ -583,6 +585,7 @@ var RichTextEditor = /** @class */ (function (_super) {
                 videoElm[i].classList.add('e-rte-video');
                 videoElm[i].classList.add(classes.CLS_VIDEOINLINE);
             }
+            // eslint-disable-next-line max-len
             if (!videoElm[i].parentElement.classList.contains(classes.CLS_CLICKELEM) && !videoElm[i].parentElement.classList.contains(classes.CLS_VIDEOWRAP)) {
                 var videoWrapElem = this.createElement('span', { className: classes.CLS_VIDEOWRAP });
                 videoWrapElem.contentEditable = 'false';
@@ -594,10 +597,12 @@ var RichTextEditor = /** @class */ (function (_super) {
                 }
             }
             if (Browser.userAgent.indexOf('Firefox') !== -1) {
+                // eslint-disable-next-line
                 videoElm[i].addEventListener('play', function (args) {
                     _this.notify(events.mouseDown, { args: args });
                     _this.notify('editAreaClick', { args: args });
                 });
+                // eslint-disable-next-line
                 videoElm[i].addEventListener('pause', function (args) {
                     _this.notify(events.mouseDown, { args: args });
                     _this.notify('editAreaClick', { args: args });
@@ -616,6 +621,7 @@ var RichTextEditor = /** @class */ (function (_super) {
     RichTextEditor.prototype.eventInitializer = function () {
         this.wireEvents();
     };
+    // eslint-disable-next-line @typescript-eslint/no-unused-vars
     RichTextEditor.prototype.cleanList = function (e) {
         var range = this.getRange();
         var currentStartContainer = range.startContainer;
@@ -663,6 +669,7 @@ var RichTextEditor = /** @class */ (function (_super) {
             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
                 var regEx = new RegExp(String.fromCharCode(8203), 'g');
                 var pointer = e.which === 8 ? range.startOffset - 1 : range.startOffset;
                 range.startContainer.textContent = range.startContainer.textContent.replace(regEx, '');
@@ -681,6 +688,7 @@ var RichTextEditor = /** @class */ (function (_super) {
                 var bool = true;
                 var 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);
                     }
@@ -739,7 +747,7 @@ var RichTextEditor = /** @class */ (function (_super) {
             }
         }
         this.notify(events.keyUp, { member: 'keyup', args: e });
-        if (e.keyCode == 39 || e.keyCode == 37) {
+        if (e.keyCode === 39 || e.keyCode === 37) {
             this.notify(events.tableModulekeyUp, { member: 'tableModulekeyUp', args: e });
         }
         if (e.code === 'KeyX' && e.which === 88 && e.keyCode === 88 && e.ctrlKey && (this.inputElement.innerHTML === '' ||
@@ -1158,6 +1166,7 @@ var RichTextEditor = /** @class */ (function (_super) {
      * @hidden
 
      */
+    /* eslint-disable */
     RichTextEditor.prototype.onPropertyChanged = function (newProp, oldProp) {
         for (var _i = 0, _a = Object.keys(newProp); _i < _a.length; _i++) {
             var prop = _a[_i];
@@ -1197,7 +1206,7 @@ var RichTextEditor = /** @class */ (function (_super) {
                     break;
                 }
                 case 'valueTemplate':
-                    this.setValue();
+                    this.setValue(true);
                     if (this.showCharCount) {
                         this.countModule.refresh();
                     }
@@ -1293,7 +1302,6 @@ var RichTextEditor = /** @class */ (function (_super) {
                     this.notify(events.xhtmlValidation, { module: 'XhtmlValidation', newProp: newProp, oldProp: oldProp });
                     break;
                 case 'quickToolbarSettings':
-                    // eslint-disable-next-line
                     newProp.quickToolbarSettings.showOnRightClick ? this.wireContextEvent() : this.unWireContextEvent();
                     this.notify(events.modelChanged, { newProp: newProp, oldProp: oldProp });
                     break;
@@ -1303,6 +1311,7 @@ var RichTextEditor = /** @class */ (function (_super) {
             }
         }
     };
+    /* eslint-enable */
     /**
      * @hidden
      * @returns {void}
@@ -1644,7 +1653,8 @@ var RichTextEditor = /** @class */ (function (_super) {
         styleEle.rel = 'stylesheet';
         return styleEle;
     };
-    RichTextEditor.prototype.setValue = function () {
+    RichTextEditor.prototype.setValue = function (isPropertyChange) {
+        var _this = this;
         if (this.valueTemplate) {
             var regEx = new RegExp(/<(?=.*? .*?\/ ?>|br|hr|input|!--|wbr)[a-z]+.*?>|<([a-z]+).*?<\/\1>/i);
             if (regEx.test(this.valueTemplate)) {
@@ -1652,11 +1662,30 @@ var RichTextEditor = /** @class */ (function (_super) {
             }
             else {
                 var compiledTemplate = compile(this.valueTemplate)('', this, 'valueTemplate');
-                for (var i = 0; i < compiledTemplate.length; i++) {
-                    var item = compiledTemplate[i];
-                    append([item], this.element);
+                if (typeof this.valueTemplate !== 'string' && this.isReact) {
+                    this.displayTempElem = this.createElement('div');
+                    for (var i = 0; i < compiledTemplate.length; i++) {
+                        var item = compiledTemplate[i];
+                        append([item], this.displayTempElem);
+                    }
+                    this.renderTemplates(function () {
+                        _this.inputElement.innerHTML = _this.displayTempElem.childNodes[0].innerHTML;
+                        _this.setProperties({ value: _this.inputElement.innerHTML.trim() });
+                    });
+                }
+                else {
+                    var appendElem = this.element;
+                    if (isPropertyChange) {
+                        this.inputElement.innerHTML = '';
+                        appendElem = this.inputElement;
+                    }
+                    for (var i = 0; i < compiledTemplate.length; i++) {
+                        var item = compiledTemplate[i];
+                        append([item], appendElem);
+                    }
+                    this.setProperties({ value: appendElem.innerHTML.trim() });
+                    this.renderReactTemplates();
                 }
-                this.setProperties({ value: this.element.innerHTML.trim() });
             }
         }
         else {
@@ -1672,6 +1701,10 @@ var RichTextEditor = /** @class */ (function (_super) {
             }
         }
     };
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    RichTextEditor.prototype.renderTemplates = function (callBack) {
+        this.renderReactTemplates(callBack);
+    };
     RichTextEditor.prototype.updateResizeFlag = function () {
         this.isResizeInitialized = true;
     };
@@ -1741,7 +1774,7 @@ var RichTextEditor = /** @class */ (function (_super) {
         var rzHandle = this.element.querySelector('.' + classes.CLS_RTE_RES_HANDLE);
         var rzHeight = this.enableResize ? (!isNOU(rzHandle) ? (rzHandle.offsetHeight + 8) : 0) : 0;
         var 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;
         }