@syncfusion/ej2-richtexteditor 21.1.39 → 21.2.3

package/dist/global/index.d.ts

@@ -1,6 +1,6 @@
 /*!
 *  filename: index.d.ts
-*  version : 21.1.39
+*  version : 21.2.3
 *  Copyright Syncfusion Inc. 2001 - 2020. All rights reserved.
 *  Use of this code is subject to the terms of our license.
 *  A copy of the current license can be obtained at any time by e-mailing

package/package.json

@@ -1,8 +1,8 @@
 {
   "_from": "@syncfusion/ej2-richtexteditor@*",
-  "_id": "@syncfusion/ej2-richtexteditor@21.1.37",
+  "_id": "@syncfusion/ej2-richtexteditor@21.1.41",
   "_inBundle": false,
-  "_integrity": "sha512-XSrMOxnThUk2xWJucy2uDnotxGLRt1zQxT/YELnGJ0eHhWcAl1zWziThdYckBM40LbzfCHjnXf1tYGQXJhZvWQ==",
+  "_integrity": "sha512-sZ+UzPwJaEg2z7jTscOziWpIJmJSRML5niE2J0Pq1UauQLPicefJT4M3a+qqWqQM7Nrw/cMMTXaR+7LIACWH5w==",
   "_location": "/@syncfusion/ej2-richtexteditor",
   "_phantomChildren": {},
   "_requested": {
@@ -19,15 +19,12 @@
   "_requiredBy": [
     "/",
     "/@syncfusion/ej2",
-    "/@syncfusion/ej2-angular-richtexteditor",
     "/@syncfusion/ej2-gantt",
     "/@syncfusion/ej2-inplace-editor",
-    "/@syncfusion/ej2-pdfviewer",
-    "/@syncfusion/ej2-react-richtexteditor",
-    "/@syncfusion/ej2-vue-richtexteditor"
+    "/@syncfusion/ej2-pdfviewer"
   ],
-  "_resolved": "https://nexus.syncfusion.com/repository/ej2-hotfix-new/@syncfusion/ej2-richtexteditor/-/ej2-richtexteditor-21.1.37.tgz",
-  "_shasum": "f1319ab8be5befb8435594fa6a6cfbcd1a60540c",
+  "_resolved": "https://nexus.syncfusion.com/repository/ej2-hotfix-new/@syncfusion/ej2-richtexteditor/-/ej2-richtexteditor-21.1.41.tgz",
+  "_shasum": "424e4613c9bdab39c5a2aafa1da22f8e2bedb831",
   "_spec": "@syncfusion/ej2-richtexteditor@*",
   "_where": "/jenkins/workspace/elease-automation_release_21.1.1/packages/included",
   "author": {
@@ -38,13 +35,13 @@
   },
   "bundleDependencies": false,
   "dependencies": {
-    "@syncfusion/ej2-base": "~21.1.39",
-    "@syncfusion/ej2-buttons": "~21.1.37",
-    "@syncfusion/ej2-filemanager": "~21.1.39",
-    "@syncfusion/ej2-inputs": "~21.1.39",
-    "@syncfusion/ej2-navigations": "~21.1.39",
-    "@syncfusion/ej2-popups": "~21.1.37",
-    "@syncfusion/ej2-splitbuttons": "~21.1.37"
+    "@syncfusion/ej2-base": "~21.2.3",
+    "@syncfusion/ej2-buttons": "~21.2.3",
+    "@syncfusion/ej2-filemanager": "~21.2.3",
+    "@syncfusion/ej2-inputs": "~21.2.3",
+    "@syncfusion/ej2-navigations": "~21.2.3",
+    "@syncfusion/ej2-popups": "~21.2.3",
+    "@syncfusion/ej2-splitbuttons": "~21.2.3"
   },
   "deprecated": false,
   "description": "Essential JS 2 RichTextEditor component",
@@ -70,6 +67,6 @@
     "url": "git+https://github.com/syncfusion/ej2-javascript-ui-controls.git"
   },
   "typings": "index.d.ts",
-  "version": "21.1.39",
+  "version": "21.2.3",
   "sideEffects": false
 }

package/src/editor-manager/plugin/clearformat-exec.js

@@ -34,7 +34,7 @@ var ClearFormatExec = /** @class */ (function () {
     };
     ClearFormatExec.prototype.applyClear = function (e) {
         if (e.subCommand === 'ClearFormat') {
-            ClearFormat.clear(this.parent.currentDocument, this.parent.editableElement, e.enterAction, e.selector);
+            ClearFormat.clear(this.parent.currentDocument, this.parent.editableElement, e.enterAction, e.selector, e.subCommand);
             if (e.callBack) {
                 e.callBack({
                     requestType: e.subCommand,

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

@@ -16,7 +16,7 @@ export declare class ClearFormat {
      * @hidden
 
      */
-    static clear(docElement: Document, endNode: Node, enterAction: string, selector?: string): void;
+    static clear(docElement: Document, endNode: Node, enterAction: string, selector?: string, command?: string): void;
     private static reSelection;
     private static clearBlocks;
     private static spliceParent;

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

@@ -22,7 +22,7 @@ var ClearFormat = /** @class */ (function () {
      * @hidden
 
      */
-    ClearFormat.clear = function (docElement, endNode, enterAction, selector) {
+    ClearFormat.clear = function (docElement, endNode, enterAction, selector, command) {
         this.domNode = new DOMNode(endNode, docElement);
         this.defaultTag = enterAction === 'P' ? this.defaultTag : 'div';
         var nodeSelection = new NodeSelection();
@@ -32,7 +32,7 @@ var ClearFormat = /** @class */ (function () {
             nodeSelection.getSelectionNodeCollectionBr(range);
         var save = nodeSelection.save(range, docElement);
         var cursorRange = false;
-        if (range.collapsed) {
+        if (range.collapsed && command !== 'ClearFormat') {
             cursorRange = true;
             range = nodeCutter.GetCursorRange(docElement, range, nodes[0]);
         }

package/src/editor-manager/plugin/selection-commands.d.ts

@@ -21,6 +21,7 @@ export declare class SelectionCommands {
     private static removeFormat;
     private static insertFormat;
     private static applyStyles;
+    private static getPriorityFormatNode;
     private static getInsertNode;
     private static getChildNode;
     private static applySelection;

package/src/editor-manager/plugin/selection-commands.js

@@ -96,18 +96,13 @@ var SelectionCommands = /** @class */ (function () {
                         isSubSup = formatNode === null ? false : true;
                     }
                 }
-                else if ((format === 'fontsize' || format === 'fontname' || format === 'fontcolor' || format === 'backgroundcolor') && range.startContainer.parentElement === endNode) {
-                    formatNode = null;
-                }
                 if (index === 0 && formatNode === null) {
                     isFormat = true;
                 }
                 if (formatNode !== null && (!isFormat || isFontStyle)) {
                     nodes[index] = this.removeFormat(nodes, index, formatNode, isCursor, isFormat, isFontStyle, range, nodeCutter, format, value, domSelection, endNode, domNode);
                 }
-                else if (range.startContainer.parentElement !== endNode ||
-                    (range.commonAncestorContainer !== endNode && range.startContainer.parentElement === endNode)
-                    || (range.commonAncestorContainer === endNode || nodes.length === 1)) {
+                else {
                     nodes[index] = this.insertFormat(docElement, nodes, index, formatNode, isCursor, isFormat, isFontStyle, range, nodeCutter, format, value, painterValues, domNode, endNode);
                 }
                 domSelection = this.applySelection(nodes, domSelection, nodeCutter, index, isCollapsed);
@@ -259,6 +254,27 @@ var SelectionCommands = /** @class */ (function () {
                 nodes[index] = lastNode.firstChild;
             }
         }
+        else if (isFontStyle && !nodes[index].contains(formatNode) && nodes[index].nodeType === 3 &&
+            nodes[index].textContent !== formatNode.textContent) {
+            // If the selection is within the format node .
+            var isFullNodeSelected = nodes[index].textContent === nodes[index].wholeText;
+            var nodeTraverse = nodes[index];
+            var styleElement = this.GetFormatNode(format, value);
+            // while loop and traverse back until text content does not match with parent text content
+            while (nodeTraverse && nodeTraverse.textContent === nodeTraverse.parentElement.textContent) {
+                nodeTraverse = nodeTraverse.parentElement;
+            }
+            if (isFullNodeSelected && formatNode.textContent !== nodeTraverse.textContent) {
+                var nodeArray = [];
+                var priorityNode = this.getPriorityFormatNode(nodeTraverse, endNode);
+                if (priorityNode && priorityNode.textContent === nodeTraverse.textContent) {
+                    nodeTraverse = priorityNode;
+                }
+                nodeArray.push(nodeTraverse);
+                this.applyStyles(nodeArray, 0, styleElement);
+                return nodes[index];
+            }
+        }
         var fontStyle;
         if (format === 'backgroundcolor') {
             fontStyle = formatNode.style.fontSize;
@@ -405,23 +421,9 @@ var SelectionCommands = /** @class */ (function () {
         return nodes[index];
     };
     SelectionCommands.insertFormat = function (docElement, nodes, index, formatNode, isCursor, isFormat, isFontStyle, range, nodeCutter, format, value, painterValues, domNode, endNode) {
-        var rootElementNode;
         if (!isCursor) {
             if ((formatNode === null && isFormat) || isFontStyle) {
                 if (nodes[index].nodeName !== 'BR') {
-                    if (format === 'fontsize' || format === 'fontname' || format === 'fontcolor' || format === 'backgroundcolor') {
-                        var rangeNode = nodes[index];
-                        while (rangeNode && !domNode.isBlockNode(rangeNode) && rangeNode !== endNode) {
-                            if (domNode.isBlockNode(rangeNode.parentElement)) {
-                                rootElementNode = rangeNode;
-                            }
-                            rangeNode = rangeNode.parentElement;
-                        }
-                        if (rootElementNode && rootElementNode.nodeType !== 3) {
-                            nodeCutter.SplitNode(range, rootElementNode, true).cloneNode(true);
-                            nodeCutter.SplitNode(range, rootElementNode, false).cloneNode(false);
-                        }
-                    }
                     nodes[index] = nodeCutter.GetSpliceNode(range, nodes[index]);
                     nodes[index].textContent = nodeCutter.TrimLineBreak(nodes[index].textContent);
                 }
@@ -431,57 +433,63 @@ var SelectionCommands = /** @class */ (function () {
                 }
                 else if (!(isFontStyle === true && value === '')) {
                     var element = this.GetFormatNode(format, value);
-                    if (value === 'formatPainter' || format === 'fontsize' || format === 'fontcolor' || format === 'fontname' || format === 'backgroundcolor') {
-                        if (format !== 'fontname' && format !== 'backgroundcolor') {
-                            var liElement = nodes[index].parentElement;
-                            var parentElement = nodes[index].parentElement;
-                            while (!isNOU(parentElement) && parentElement.tagName.toLowerCase() !== 'li') {
-                                parentElement = parentElement.parentElement;
-                                liElement = parentElement;
+                    if (value === 'formatPainter' || isFontStyle) {
+                        var liElement = nodes[index].parentElement;
+                        var parentElement = nodes[index].parentElement;
+                        while (!isNOU(parentElement) && parentElement.tagName.toLowerCase() !== 'li') {
+                            parentElement = parentElement.parentElement;
+                            liElement = parentElement;
+                        }
+                        if (!isNOU(liElement) && liElement.tagName.toLowerCase() === 'li' &&
+                            liElement.textContent.trim() === nodes[index].textContent.trim()) {
+                            if (format === 'fontsize') {
+                                liElement.style.fontSize = value;
                             }
-                            if (!isNOU(liElement) && liElement.tagName.toLowerCase() === 'li' &&
-                                liElement.textContent.trim() === nodes[index].textContent.trim()) {
-                                if (format === 'fontsize') {
-                                    liElement.style.fontSize = value;
-                                }
-                                else {
-                                    liElement.style.color = value;
-                                    liElement.style.textDecoration = 'inherit';
-                                }
+                            else if (format === 'fontcolor') {
+                                liElement.style.color = value;
+                                liElement.style.textDecoration = 'inherit';
                             }
                         }
-                        if (rootElementNode && rootElementNode.nodeType !== 3 && rootElementNode.nodeName !== 'A') {
-                            var save = new NodeSelection();
-                            save.save(range, docElement);
-                            domNode.setMarker(save);
-                            var cloneNode = rootElementNode.cloneNode(true);
-                            element.appendChild(cloneNode);
-                            domNode.replaceWith(rootElementNode, element.outerHTML);
-                            var currentStartNode = endNode.querySelector('.e-editor-select-start');
-                            var currrentEndNode = endNode.querySelector('.e-editor-select-end');
-                            if (index === 0) {
-                                nodes[index] = currentStartNode ? currentStartNode.lastChild : nodes[index];
-                            }
-                            if (range.startContainer.parentElement === endNode) {
-                                if (nodes.length > 1) {
-                                    nodes[nodes.length - 1] = currrentEndNode ? currrentEndNode.lastChild : nodes[index];
+                        if (value === 'formatPainter') {
+                            return this.insertFormatPainterElem(nodes, index, range, nodeCutter, painterValues, domNode);
+                        }
+                        var currentNode = nodes[index];
+                        var priorityNode = this.getPriorityFormatNode(currentNode, endNode);
+                        // 1. Checking is there any priority node present in the selection range. (Use case for nested styles);
+                        // 2  Or font style is applied. (Use case not a nested style)
+                        if (!isNOU(priorityNode) || isFontStyle) {
+                            var currentFormatNode = isNOU(priorityNode) ? currentNode : priorityNode;
+                            currentFormatNode = !isNOU(priorityNode) && priorityNode.style.fontSize !== '' ?
+                                currentFormatNode.firstChild : currentFormatNode;
+                            if (isNOU(priorityNode) || format === 'fontsize') {
+                                while (currentFormatNode) {
+                                    var isSameTextContent = currentFormatNode.parentElement.textContent.trim()
+                                        === nodes[index].textContent.trim();
+                                    if (!domNode.isBlockNode(currentFormatNode.parentElement) && isSameTextContent) {
+                                        currentFormatNode = currentFormatNode.parentElement;
+                                    }
+                                    else {
+                                        break;
+                                    }
                                 }
                             }
-                            domNode.saveMarker(save, null);
-                        }
-                        else {
-                            if (value === 'formatPainter') {
-                                return this.insertFormatPainterElem(nodes, index, range, nodeCutter, painterValues, domNode);
+                            var nodeList = [];
+                            // Since color is different for different themnes, we need to wrap the fontColor over the text node.
+                            if (format === 'fontcolor') {
+                                var closestAnchor = closest(nodes[index].parentElement, 'A');
+                                if (!isNOU(closestAnchor) && closestAnchor.firstChild.textContent.trim()
+                                    === nodes[index].textContent.trim()) {
+                                    currentFormatNode = nodes[index];
+                                }
                             }
-                            else {
-                                nodes[index] = this.applyStyles(nodes, index, element);
+                            if (nodes[index].textContent.trim() !== currentFormatNode.textContent.trim()) {
+                                currentFormatNode = nodes[index];
                             }
+                            nodeList[0] = currentFormatNode;
+                            this.applyStyles(nodeList, 0, element);
                         }
-                        if (format === 'fontsize') {
-                            var bg = closest(nodes[index].parentElement, 'span[style*=' + 'background-color' + ']');
-                            if (!isNOU(bg)) {
-                                nodes[index].parentElement.style.backgroundColor = bg.style.backgroundColor;
-                            }
+                        else {
+                            nodes[index] = this.applyStyles(nodes, index, element);
                         }
                     }
                     else {
@@ -514,6 +522,37 @@ var SelectionCommands = /** @class */ (function () {
         }
         return nodes[index];
     };
+    SelectionCommands.getPriorityFormatNode = function (node, endNode) {
+        var isFormatted = new IsFormatted();
+        var fontSizeNode = isFormatted.getFormattedNode(node, 'fontsize', endNode);
+        var fontColorNode;
+        var backgroundColorNode;
+        var fontNameNode;
+        if (isNOU(fontSizeNode)) {
+            backgroundColorNode = isFormatted.getFormattedNode(node, 'backgroundcolor', endNode);
+            if (isNOU(backgroundColorNode)) {
+                fontNameNode = isFormatted.getFormattedNode(node, 'fontname', endNode);
+                if (isNOU(fontNameNode)) {
+                    fontColorNode = isFormatted.getFormattedNode(node, 'fontcolor', endNode);
+                    if (isNOU(fontColorNode)) {
+                        return null;
+                    }
+                    else {
+                        return fontColorNode;
+                    }
+                }
+                else {
+                    return fontNameNode;
+                }
+            }
+            else {
+                return backgroundColorNode;
+            }
+        }
+        else {
+            return fontSizeNode;
+        }
+    };
     SelectionCommands.getInsertNode = function (docElement, range, format, value) {
         var element = this.GetFormatNode(format, value);
         element.innerHTML = '​';

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

@@ -27,6 +27,7 @@ export declare class PasteCleanup {
     private destroy;
     private removeEventListener;
     private pasteClean;
+    private fireFoxImageUpload;
     private splitBreakLine;
     private makeSpace;
     private imgUploading;
@@ -55,6 +56,7 @@ export declare class PasteCleanup {
     private destroyDialog;
     private cleanAppleClass;
     private formatting;
+    private setImageProperties;
     private addTempClass;
     private removeTempClass;
     private sanitizeHelper;

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

@@ -5,6 +5,7 @@ import { isNullOrUndefined as isNOU, isNullOrUndefined, detach, extend, addClass
 import { getUniqueID, Browser } from '@syncfusion/ej2-base';
 import { CLS_RTE_PASTE_KEEP_FORMAT, CLS_RTE_PASTE_REMOVE_FORMAT, CLS_RTE_PASTE_PLAIN_FORMAT } from '../base/classes';
 import { CLS_RTE_PASTE_OK, CLS_RTE_PASTE_CANCEL, CLS_RTE_DIALOG_MIN_HEIGHT } from '../base/classes';
+import { CLS_RTE_IMAGE, CLS_IMGINLINE, CLS_IMGBREAK } from '../base/classes';
 import { pasteCleanupGroupingTags } from '../../common/config';
 import { NodeSelection } from '../../selection/selection';
 import * as EVENTS from './../../common/constant';
@@ -120,14 +121,22 @@ var PasteCleanup = /** @class */ (function () {
             this.parent.trigger(events.afterPasteCleanup, { value: value }, function (updatedArgs) {
                 value = updatedArgs.value;
             });
+            var tempDivElem = this.parent.createElement('div');
+            tempDivElem.innerHTML = value;
+            var isValueNotEmpty = tempDivElem.textContent !== '' || !isNOU(tempDivElem.querySelector('img')) ||
+                !isNOU(tempDivElem.querySelector('table'));
             if (this.parent.pasteCleanupSettings.prompt) {
-                e.args.preventDefault();
-                var tempDivElem = this.parent.createElement('div');
-                tempDivElem.innerHTML = value;
-                if (tempDivElem.textContent !== '' || !isNOU(tempDivElem.querySelector('img')) ||
-                    !isNOU(tempDivElem.querySelector('table'))) {
+                if (isValueNotEmpty) {
+                    e.args.preventDefault();
                     this.pasteDialog(value, args);
                 }
+                else if (Browser.userAgent.indexOf('Firefox') !== -1) {
+                    this.fireFoxImageUpload();
+                }
+            }
+            else if (!isValueNotEmpty && !this.parent.pasteCleanupSettings.plainText &&
+                Browser.userAgent.indexOf('Firefox') !== -1) {
+                this.fireFoxImageUpload();
             }
             else if (this.parent.pasteCleanupSettings.plainText) {
                 e.args.preventDefault();
@@ -143,6 +152,31 @@ var PasteCleanup = /** @class */ (function () {
             }
         }
     };
+    PasteCleanup.prototype.fireFoxImageUpload = function () {
+        var _this = this;
+        // Timeout 500 is added to capture after default paste image from file manager is completed.
+        setTimeout(function () {
+            if (Browser.userAgent.indexOf('Firefox') !== -1) {
+                var currentFocusNode = _this.nodeSelectionObj.getRange(_this.contentRenderer.getDocument()).startContainer;
+                if (currentFocusNode.nodeName !== '#text') {
+                    currentFocusNode = currentFocusNode.childNodes[_this.nodeSelectionObj.getRange(_this.contentRenderer.getDocument()).startOffset];
+                }
+                if (currentFocusNode.previousSibling.nodeName === 'IMG') {
+                    currentFocusNode.previousSibling.classList.add('pasteContent_Img');
+                    currentFocusNode.previousSibling.classList.add(CLS_RTE_IMAGE);
+                    if (_this.parent.insertImageSettings.display === 'inline') {
+                        currentFocusNode.previousSibling.classList.add(CLS_IMGINLINE);
+                    }
+                    else {
+                        currentFocusNode.previousSibling.classList.add(CLS_IMGBREAK);
+                    }
+                    currentFocusNode.previousSibling.classList.add();
+                    _this.setImageProperties(currentFocusNode.previousSibling);
+                }
+            }
+            _this.imgUploading(_this.parent.inputElement);
+        }, 500);
+    };
     PasteCleanup.prototype.splitBreakLine = function (value) {
         var enterSplitText = value.split('\n');
         var contentInnerElem = '';
@@ -626,24 +660,7 @@ var PasteCleanup = /** @class */ (function () {
         var allImg = clipBoardElem.querySelectorAll('img');
         for (var i = 0; i < allImg.length; i++) {
             allImg[i].classList.add('pasteContent_Img');
-            if (this.parent.insertImageSettings.width !== 'auto') {
-                allImg[i].setAttribute('width', this.parent.insertImageSettings.width);
-            }
-            if (this.parent.insertImageSettings.minWidth !== '0' && this.parent.insertImageSettings.minWidth !== 0) {
-                allImg[i].style.minWidth = this.parent.insertImageSettings.minWidth.toString();
-            }
-            if (this.parent.insertImageSettings.maxWidth !== null) {
-                allImg[i].style.maxWidth = this.parent.getInsertImgMaxWidth().toString();
-            }
-            if (this.parent.insertImageSettings.height !== 'auto') {
-                allImg[i].setAttribute('height', this.parent.insertImageSettings.height);
-            }
-            if (this.parent.insertImageSettings.minHeight !== '0' && this.parent.insertImageSettings.minHeight !== 0) {
-                allImg[i].style.minHeight = this.parent.insertImageSettings.minHeight.toString();
-            }
-            if (this.parent.insertImageSettings.maxHeight !== null) {
-                allImg[i].style.maxHeight = this.parent.insertImageSettings.maxHeight.toString();
-            }
+            this.setImageProperties(allImg[i]);
         }
         this.addTempClass(clipBoardElem);
         if (clipBoardElem.textContent !== '' || !isNOU(clipBoardElem.querySelector('img')) ||
@@ -660,6 +677,26 @@ var PasteCleanup = /** @class */ (function () {
             }
         }
     };
+    PasteCleanup.prototype.setImageProperties = function (allImg) {
+        if (this.parent.insertImageSettings.width !== 'auto') {
+            allImg.setAttribute('width', this.parent.insertImageSettings.width);
+        }
+        if (this.parent.insertImageSettings.minWidth !== '0' && this.parent.insertImageSettings.minWidth !== 0) {
+            allImg.style.minWidth = this.parent.insertImageSettings.minWidth.toString();
+        }
+        if (this.parent.insertImageSettings.maxWidth !== null) {
+            allImg.style.maxWidth = this.parent.getInsertImgMaxWidth().toString();
+        }
+        if (this.parent.insertImageSettings.height !== 'auto') {
+            allImg.setAttribute('height', this.parent.insertImageSettings.height);
+        }
+        if (this.parent.insertImageSettings.minHeight !== '0' && this.parent.insertImageSettings.minHeight !== 0) {
+            allImg.style.minHeight = this.parent.insertImageSettings.minHeight.toString();
+        }
+        if (this.parent.insertImageSettings.maxHeight !== null) {
+            allImg.style.maxHeight = this.parent.insertImageSettings.maxHeight.toString();
+        }
+    };
     PasteCleanup.prototype.addTempClass = function (clipBoardElem) {
         var allChild = clipBoardElem.children;
         for (var i = 0; i < allChild.length; i++) {

package/src/rich-text-editor/actions/xhtml-validation.js

@@ -145,7 +145,8 @@ var XhtmlValidation = /** @class */ (function () {
                                 var childEle = ele.childNodes[j];
                                 if (childEle.nodeType !== 3 && childEle.nodeName !== 'TABLE' && childEle.nodeName !== 'TBODY' &&
                                     childEle.nodeName !== 'THEAD' && childEle.nodeName !== 'TH' && childEle.nodeName !== 'TR' &&
-                                    childEle.nodeName !== 'TD' && childEle.hasAttribute(attrName)) {
+                                    childEle.nodeName !== 'TD' && childEle.hasAttribute(attrName) &&
+                                    !childEle.classList.contains('e-mention-chip')) {
                                     childEle.removeAttribute(attrName);
                                 }
                                 if (childEle.hasChildNodes()) {

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

@@ -642,6 +642,7 @@ var RichTextEditor = /** @class */ (function (_super) {
         var currentEndContainer = range.endContainer;
         var currentStartOffset = range.startOffset;
         var isSameContainer = currentStartContainer === currentEndContainer ? true : false;
+        var currentEndOffset = currentEndContainer.textContent.length;
         var endNode = range.endContainer.nodeName === '#text' ? range.endContainer.parentElement :
             range.endContainer;
         var closestLI = closest(endNode, 'LI');
@@ -754,6 +755,9 @@ var RichTextEditor = /** @class */ (function (_super) {
             if ((!isNOU(this.placeHolderWrapper)) && (this.inputElement.textContent.length !== 1)) {
                 this.placeHolderWrapper.style.display = 'none';
             }
+            else if (this.iframeSettings.enable && this.inputElement.classList.contains("e-rte-placeholder")) {
+                removeClass([this.inputElement], "e-rte-placeholder");
+            }
             else {
                 this.setPlaceHolder();
             }
@@ -1457,6 +1461,17 @@ var RichTextEditor = /** @class */ (function (_super) {
                 this.inputElement.setAttribute('placeholder', this.placeholder);
             }
         }
+        if (this.placeholder && this.iframeSettings.enable) {
+            if (this.inputElement.textContent.length === 0 && this.inputElement.childNodes.length < 2 && !isNOU(this.inputElement.firstChild) && (this.inputElement.firstChild.nodeName === 'BR' ||
+                ((this.inputElement.firstChild.nodeName === 'P' || this.inputElement.firstChild.nodeName === 'DIV') && !isNOU(this.inputElement.firstChild.firstChild) &&
+                    this.inputElement.firstChild.firstChild.nodeName === 'BR'))) {
+                addClass([this.inputElement], "e-rte-placeholder");
+                this.inputElement.setAttribute('placeholder', this.placeholder);
+            }
+            else {
+                removeClass([this.inputElement], "e-rte-placeholder");
+            }
+        }
     };
     RichTextEditor.prototype.setWidth = function (width) {
         if (width !== 'auto') {
@@ -2182,6 +2197,9 @@ var RichTextEditor = /** @class */ (function (_super) {
                 clearInterval(this.timeInterval);
                 this.timeInterval = null;
             }
+            if (!isNOU(this.placeHolderWrapper) && this.element.querySelector('[title = Preview]')) {
+                this.placeHolderWrapper.style.display = "none";
+            }
             EventHandler.remove(document, 'mousedown', this.onDocumentClick);
         }
         else {

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

@@ -14,7 +14,7 @@ var __extends = (this && this.__extends) || (function () {
 import { ContentRender } from '../renderer/content-renderer';
 import { isNullOrUndefined } from '@syncfusion/ej2-base';
 import { getEditValue } from '../base/util';
-var IFRAMEHEADER = "\n<!DOCTYPE html> \n    <html>\n         <head>\n            <meta charset='utf-8' /> \n            <style>\n                @charset \"UTF-8\";\n                body {\n                    font-family: \"Roboto\", sans-serif;\n                    font-size: 14px;\n                }\n                html, body{height: 100%;margin: 0;}\n                body.e-cursor{cursor:default}\n                span.e-selected-node\t{background-color: #939393;color: white;}\n                span.e-selected-node.e-highlight {background-color: #1d9dd8;}\n                body{color:#333;word-wrap:break-word;padding: 8px;box-sizing: border-box;}\n                .e-rte-image, .e-rte-audio, .e-rte-video  {border: 0;cursor: pointer;display:\n                    block;float: none;height: auto;margin: 5px auto;max-width: 100%;position: relative;}\n                .e-rte-image.e-imginline, .e-rte-audio.e-audio-inline, .e-rte-video.e-video-inline {display: inline-block;float: none;max-width: calc(100% - (2 * 5px));padding: 1px;vertical-align: bottom;}\n                .e-rte-image.e-imgcenter, .e-rte-video.e-video-center {cursor: pointer;display: block;float: none;margin: 5px auto;max-width: 100%;position: relative;}\n                .e-rte-image.e-imgright, .e-rte-video.e-video-right { float: right; margin: 0 auto;margin-left: 5px;text-align: right;}\n                .e-rte-image.e-imgleft, .e-rte-video.e-video-left {float: left;margin: 0 auto;margin-right: 5px;text-align: left;}\n                .e-img-caption { display: inline-block; float: none; margin: 5px auto; max-width: 100%;position: relative;}\n                .e-img-caption.e-caption-inline {display: inline-block;float: none;\n                    margin: 5px auto;margin-left: 5px;margin-right: 5px;max-width: calc(100% - (2 * 5px));\n                    position: relativetext-align: center;vertical-align: bottom;}\n                .e-img-inner {box-sizing: border-box;display: block;font-size: 16px;font-weight: initial;\n                    margin: auto;opacity: .9;text-align: center;width: 100%;}\n                .e-img-wrap {display: inline-block;margin: auto;padding: 0;text-align: center;width: 100%;}\n                .e-imgleft, .e-video-left {float: left;margin: 0 5px 0 0;text-align: left;}\n                .e-imgright, .e-video-right {float: right;margin: 0 0 0 5px;text-align: right;}\n                .e-imgcenter, .e-video-center {cursor: pointer;display: block;float: none;height: auto;margin: 5px auto;max-width: 100%;position: relative;}\n                .e-control img:not(.e-resize) {border: 2px solid transparent; z-index: 1000}\n                .e-imginline , .e-audio-inline, .e-video-inline {display: inline-block;float: none;margin-left: 5px;margin-right: 5px;\n                    max-width: calc(100% - (2 * 5px));vertical-align: bottom;}\n                .e-imgbreak, .e-audio-break, .e-video-break {border: 0;cursor: pointer;\n                    display: block;float: none;height: auto;margin: 5px auto;max-width: 100%;position: relative;}\n                .e-rte-image.e-img-focus:not(.e-resize), .e-audio-focus:not(.e-resize), .e-video-focus:not(.e-resize) {border: solid 2px #4a90e2;}\n                img.e-img-focus::selection, audio.e-audio-focus::selection, .e-video-focus::selection { background: transparent;color: transparent;}\n                span.e-rte-imageboxmark {  width: 10px; height: 10px; position: absolute; display: block;\n                    background: #4a90e2; border: 1px solid #fff; z-index: 1000;}\n                .e-mob-rte.e-mob-span span.e-rte-imageboxmark { background: #4a90e2; border: 1px solid #fff; }\n                .e-mob-rte span.e-rte-imageboxmark { background: #fff; border: 1px solid #4a90e2;\n                    border-radius: 15px; height: 20px; width: 20px; }\n                .e-mob-rte.e-mob-span span.e-rte-imageboxmark { background: #4a90e2; border: 1px solid #fff; }\n                .e-rte-content .e-content img.e-resize, .e-rte-content .e-content video.e-resize { z-index: 1000; }\n                .e-img-caption .e-img-inner { outline: 0; }\n                .e-img-caption a:focus-visible { outline: none; }\n                .e-img-caption .e-rte-image.e-imgright, .e-img-caption .e-rte-image.e-imgleft { float: none; margin: 0;}\n                body{box-sizing: border-box;min-height: 100px;outline: 0 solid transparent;\n                    overflow-x: auto;padding: 16px;position: relative;text-align: inherit;z-index: 2;}\n                p{margin: 0 0 10px;margin-bottom: 10px;}\n                li{margin-bottom: 10px;}\n                h1{font-size: 2.17em;font-weight: 400;line-height: 1;margin: 10px 0;}\n                h2{font-size: 1.74em;font-weight: 400;margin: 10px 0;}\n                h3{font-size: 1.31em;font-weight: 400;margin: 10px 0;}\n                h4{font-size: 16px;font-weight: 400;line-height: 1.5;margin: 0;}\n                h5{font-size: 00.8em;font-weight: 400;margin: 0;}\n                h6{font-size: 00.65em;font-weight: 400;margin: 0;}\n                blockquote{margin: 10px 0;margin-left: 0;padding-left: 5px;border-left: solid 2px #5c5c5c;}\n                pre{background-color: inherit;border: 0;border-radius: 0;color: #333;\n                    font-size: inherit;line-height: inherit;margin: 0 0 10px;overflow: visible;padding: 0;\n                    white-space: pre-wrap;word-break: inherit;word-wrap: break-word;}\n                strong, b{font-weight: 700;}\n                a{text-decoration: none;user-select: auto;}\n                a:hover{text-decoration: underline;};\n                p:last-child, pre:last-child, blockquote:last-child{margin-bottom: 0;}\n                h3+h4, h4+h5, h5+h6{margin-top: 00.6em;}\n                ul:last-child{margin-bottom: 0;}\n                table { border-collapse: collapse; empty-cells: show;}\n                table td,table th {border: 1px solid #BDBDBD; height: 20px; padding: 2px 5px; vertical-align: middle;}\n                table.e-alternate-border tbody tr:nth-child(2n) {background-color: #F5F5F5;}\n                table th {background-color: #E0E0E0;}\n                table.e-dashed-border td,table.e-dashed-border th { border: 1px dashed #BDBDBD} \n                table .e-cell-select {border: 1px double #4a90e2;}\n                span.e-table-box { cursor: nwse-resize; display: block; height: 10px; position: absolute; width: 10px; }\n                span.e-table-box.e-rmob {height: 14px;width: 14px;}\n                .e-row-resize, .e-column-resize { background-color: transparent; background-repeat: repeat;\n                    bottom: 0;cursor: col-resize;height: 1px;overflow: visible;position: absolute;width: 1px; }\n                .e-row-resize { cursor: row-resize; height: 1px;}\n                .e-table-rhelper { cursor: col-resize; opacity: .87;position: absolute;}\n                .e-table-rhelper.e-column-helper { width: 1px; }\n                .e-table-rhelper.e-row-helper {height: 1px;}\n                .e-reicon::before { border-bottom: 6px solid transparent; border-right: 6px solid;\n                    border-top: 6px solid transparent; content: ''; display: block; height: 0;\n                    position: absolute; right: 4px; top: 4px; width: 20px; }\n                .e-reicon::after { border-bottom: 6px solid transparent; border-left: 6px solid;\n                    border-top: 6px solid transparent; content: ''; display: block;\n                    height: 0; left: 4px; position: absolute; top: 4px; width: 20px; z-index: 3; }\n                .e-row-helper.e-reicon::after { top: 10px; transform: rotate(90deg); }\n                .e-row-helper.e-reicon::before { left: 4px; top: -20px; transform: rotate(90deg); }\n                span.e-table-box { background-color: #ffffff; border: 1px solid #BDBDBD; }\n                span.e-table-box.e-rbox-select { background-color: #BDBDBD; border: 1px solid #BDBDBD; }\n                .e-table-rhelper { background-color: #4a90e2;}\n                .e-rtl { direction: rtl; }\n            </style>\n        </head>";
+var IFRAMEHEADER = "\n<!DOCTYPE html> \n    <html>\n         <head>\n            <meta charset='utf-8' /> \n            <style>\n                @charset \"UTF-8\";\n                body {\n                    font-family: \"Roboto\", sans-serif;\n                    font-size: 14px;\n                }\n                html, body{height: 100%;margin: 0;}\n                body.e-cursor{cursor:default}\n                span.e-selected-node\t{background-color: #939393;color: white;}\n                span.e-selected-node.e-highlight {background-color: #1d9dd8;}\n                body{color:#333;word-wrap:break-word;padding: 8px;box-sizing: border-box;}\n                .e-rte-image, .e-rte-audio, .e-rte-video  {border: 0;cursor: pointer;display:\n                    block;float: none;height: auto;margin: 5px auto;max-width: 100%;position: relative;}\n                .e-rte-image.e-imginline, .e-rte-audio.e-audio-inline, .e-rte-video.e-video-inline {display: inline-block;float: none;max-width: calc(100% - (2 * 5px));padding: 1px;vertical-align: bottom;}\n                .e-rte-image.e-imgcenter, .e-rte-video.e-video-center {cursor: pointer;display: block;float: none;margin: 5px auto;max-width: 100%;position: relative;}\n                .e-rte-image.e-imgright, .e-rte-video.e-video-right { float: right; margin: 0 auto;margin-left: 5px;text-align: right;}\n                .e-rte-image.e-imgleft, .e-rte-video.e-video-left {float: left;margin: 0 auto;margin-right: 5px;text-align: left;}\n                .e-img-caption { display: inline-block; float: none; margin: 5px auto; max-width: 100%;position: relative;}\n                .e-img-caption.e-caption-inline {display: inline-block;float: none;\n                    margin: 5px auto;margin-left: 5px;margin-right: 5px;max-width: calc(100% - (2 * 5px));\n                    position: relativetext-align: center;vertical-align: bottom;}\n                .e-img-inner {box-sizing: border-box;display: block;font-size: 16px;font-weight: initial;\n                    margin: auto;opacity: .9;text-align: center;width: 100%;}\n                .e-img-wrap {display: inline-block;margin: auto;padding: 0;text-align: center;width: 100%;}\n                .e-imgleft, .e-video-left {float: left;margin: 0 5px 0 0;text-align: left;}\n                .e-imgright, .e-video-right {float: right;margin: 0 0 0 5px;text-align: right;}\n                .e-imgcenter, .e-video-center {cursor: pointer;display: block;float: none;height: auto;margin: 5px auto;max-width: 100%;position: relative;}\n                .e-control img:not(.e-resize) {border: 2px solid transparent; z-index: 1000}\n                .e-imginline , .e-audio-inline, .e-video-inline {display: inline-block;float: none;margin-left: 5px;margin-right: 5px;\n                    max-width: calc(100% - (2 * 5px));vertical-align: bottom;}\n                .e-imgbreak, .e-audio-break, .e-video-break {border: 0;cursor: pointer;\n                    display: block;float: none;height: auto;margin: 5px auto;max-width: 100%;position: relative;}\n                .e-rte-image.e-img-focus:not(.e-resize), .e-audio-focus:not(.e-resize), .e-video-focus:not(.e-resize) {border: solid 2px #4a90e2;}\n                img.e-img-focus::selection, audio.e-audio-focus::selection, .e-video-focus::selection { background: transparent;color: transparent;}\n                span.e-rte-imageboxmark {  width: 10px; height: 10px; position: absolute; display: block;\n                    background: #4a90e2; border: 1px solid #fff; z-index: 1000;}\n                .e-mob-rte.e-mob-span span.e-rte-imageboxmark { background: #4a90e2; border: 1px solid #fff; }\n                .e-mob-rte span.e-rte-imageboxmark { background: #fff; border: 1px solid #4a90e2;\n                    border-radius: 15px; height: 20px; width: 20px; }\n                .e-mob-rte.e-mob-span span.e-rte-imageboxmark { background: #4a90e2; border: 1px solid #fff; }\n                .e-rte-content .e-content img.e-resize, .e-rte-content .e-content video.e-resize { z-index: 1000; }\n                .e-img-caption .e-img-inner { outline: 0; }\n                .e-img-caption a:focus-visible { outline: none; }\n                .e-img-caption .e-rte-image.e-imgright, .e-img-caption .e-rte-image.e-imgleft { float: none; margin: 0;}\n                body{box-sizing: border-box;min-height: 100px;outline: 0 solid transparent;\n                    overflow-x: auto;padding: 16px;position: relative;text-align: inherit;z-index: 2;}\n                p{margin: 0 0 10px;margin-bottom: 10px;}\n                li{margin-bottom: 10px;}\n                h1{font-size: 2.17em;font-weight: 400;line-height: 1;margin: 10px 0;}\n                h2{font-size: 1.74em;font-weight: 400;margin: 10px 0;}\n                h3{font-size: 1.31em;font-weight: 400;margin: 10px 0;}\n                h4{font-size: 16px;font-weight: 400;line-height: 1.5;margin: 0;}\n                h5{font-size: 00.8em;font-weight: 400;margin: 0;}\n                h6{font-size: 00.65em;font-weight: 400;margin: 0;}\n                blockquote{margin: 10px 0;margin-left: 0;padding-left: 5px;border-left: solid 2px #5c5c5c;}\n                pre{background-color: inherit;border: 0;border-radius: 0;color: #333;\n                    font-size: inherit;line-height: inherit;margin: 0 0 10px;overflow: visible;padding: 0;\n                    white-space: pre-wrap;word-break: inherit;word-wrap: break-word;}\n                strong, b{font-weight: 700;}\n                a{text-decoration: none;user-select: auto;}\n                a:hover{text-decoration: underline;};\n                p:last-child, pre:last-child, blockquote:last-child{margin-bottom: 0;}\n                h3+h4, h4+h5, h5+h6{margin-top: 00.6em;}\n                ul:last-child{margin-bottom: 0;}\n                table { border-collapse: collapse; empty-cells: show;}\n                table td,table th {border: 1px solid #BDBDBD; height: 20px; padding: 2px 5px; vertical-align: middle;}\n                table.e-alternate-border tbody tr:nth-child(2n) {background-color: #F5F5F5;}\n                table th {background-color: #E0E0E0;}\n                table.e-dashed-border td,table.e-dashed-border th { border: 1px dashed #BDBDBD} \n                table .e-cell-select {border: 1px double #4a90e2;}\n                span.e-table-box { cursor: nwse-resize; display: block; height: 10px; position: absolute; width: 10px; }\n                span.e-table-box.e-rmob {height: 14px;width: 14px;}\n                .e-row-resize, .e-column-resize { background-color: transparent; background-repeat: repeat;\n                    bottom: 0;cursor: col-resize;height: 1px;overflow: visible;position: absolute;width: 1px; }\n                .e-row-resize { cursor: row-resize; height: 1px;}\n                .e-table-rhelper { cursor: col-resize; opacity: .87;position: absolute;}\n                .e-table-rhelper.e-column-helper { width: 1px; }\n                .e-table-rhelper.e-row-helper {height: 1px;}\n                .e-reicon::before { border-bottom: 6px solid transparent; border-right: 6px solid;\n                    border-top: 6px solid transparent; content: ''; display: block; height: 0;\n                    position: absolute; right: 4px; top: 4px; width: 20px; }\n                .e-reicon::after { border-bottom: 6px solid transparent; border-left: 6px solid;\n                    border-top: 6px solid transparent; content: ''; display: block;\n                    height: 0; left: 4px; position: absolute; top: 4px; width: 20px; z-index: 3; }\n                .e-row-helper.e-reicon::after { top: 10px; transform: rotate(90deg); }\n                .e-row-helper.e-reicon::before { left: 4px; top: -20px; transform: rotate(90deg); }\n                span.e-table-box { background-color: #ffffff; border: 1px solid #BDBDBD; }\n                span.e-table-box.e-rbox-select { background-color: #BDBDBD; border: 1px solid #BDBDBD; }\n                .e-table-rhelper { background-color: #4a90e2;}\n                .e-rtl { direction: rtl; }\n                .e-rte-placeholder::before { content: attr(placeholder); opacity: 0.54; overflow: hidden;\n                     padding-top: 16px; position: absolute; text-align: start; top: 0; z-index: 1; }\n            </style>\n        </head>";
 /**
  * Content module is used to render Rich Text Editor content
  *

package/src/rich-text-editor/renderer/video-module.js

@@ -1124,7 +1124,7 @@ var Video = /** @class */ (function () {
         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', 'aria-label': this.i10n.getConstant('embedVideoLinkHeader') }
+            attrs: { placeholder: 'Paste Embedded Code here', type: 'text', tabindex: '-1', 'aria-label': this.i10n.getConstant('embedVideoLinkHeader') }
         });
         this.embedInputUrl.addEventListener('keyup', function () {
             if (!isNOU(_this.embedInputUrl)) {
@@ -1151,7 +1151,7 @@ var Video = /** @class */ (function () {
             }
         });
         var embedUrlBtn = new RadioButton({
-            label: 'Embed URL',
+            label: 'Embedded Code',
             checked: true,
             name: 'URL',
             created: function () {