@syncfusion/ej2-richtexteditor 25.1.41 → 25.1.42

package/dist/global/index.d.ts

@@ -1,6 +1,6 @@
 /*!
 *  filename: index.d.ts
-*  version : 25.1.41
+*  version : 25.1.42
 *  Copyright Syncfusion Inc. 2001 - 2023. 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@25.1.39",
+  "_id": "@syncfusion/ej2-richtexteditor@25.1.41",
   "_inBundle": false,
-  "_integrity": "sha512-vnRCdIzVVU3ZMq7rEllyCaOR5EaZqQhzFSpJO/Cu1rHpNVZ8FqYIedV0vxClmjmz/9yMbl30dCP7PNJtJ9Eu7A==",
+  "_integrity": "sha512-+SQQWuGTr85M/kWC43aUeAA8TDQsVcc+Py0S5FC0jSb88TH8ZhY1yS/N9nSsCtkk8H+9LWn3sF3xk9VNzovEdw==",
   "_location": "/@syncfusion/ej2-richtexteditor",
   "_phantomChildren": {},
   "_requested": {
@@ -25,8 +25,8 @@
     "/@syncfusion/ej2-react-richtexteditor",
     "/@syncfusion/ej2-vue-richtexteditor"
   ],
-  "_resolved": "https://nexus.syncfusioninternal.com/repository/ej2-hotfix-new/@syncfusion/ej2-richtexteditor/-/ej2-richtexteditor-25.1.39.tgz",
-  "_shasum": "3d96b955c7077bca2ff259ca6c380fc9885008a4",
+  "_resolved": "https://nexus.syncfusioninternal.com/repository/ej2-hotfix-new/@syncfusion/ej2-richtexteditor/-/ej2-richtexteditor-25.1.41.tgz",
+  "_shasum": "e454a752ac8f1b765d7affaadc18316ec104e50f",
   "_spec": "@syncfusion/ej2-richtexteditor@*",
   "_where": "/jenkins/workspace/elease-automation_release_25.1.1/packages/included",
   "author": {
@@ -40,9 +40,9 @@
     "@syncfusion/ej2-base": "~25.1.35",
     "@syncfusion/ej2-buttons": "~25.1.39",
     "@syncfusion/ej2-filemanager": "~25.1.40",
-    "@syncfusion/ej2-inputs": "~25.1.40",
-    "@syncfusion/ej2-navigations": "~25.1.41",
-    "@syncfusion/ej2-popups": "~25.1.41",
+    "@syncfusion/ej2-inputs": "~25.1.42",
+    "@syncfusion/ej2-navigations": "~25.1.42",
+    "@syncfusion/ej2-popups": "~25.1.42",
     "@syncfusion/ej2-splitbuttons": "~25.1.38"
   },
   "deprecated": false,
@@ -58,7 +58,17 @@
     "rich-text-editor",
     "markdown-editor",
     "wysiwyg-markdown-editor",
-    "editor"
+    "editor",
+    "rich text editor",
+    "editing",
+    "rich text",
+    "rich editor",
+    "text editor",
+    "contenteditable",
+    "wysiwyg",
+    "html",
+    "text",
+    "markdown"
   ],
   "license": "SEE LICENSE IN license",
   "main": "./dist/ej2-richtexteditor.umd.min.js",
@@ -69,6 +79,6 @@
     "url": "git+https://github.com/syncfusion/ej2-javascript-ui-controls.git"
   },
   "typings": "index.d.ts",
-  "version": "25.1.41",
+  "version": "25.1.42",
   "sideEffects": false
 }

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

@@ -58,7 +58,7 @@ var InsertHtml = /** @class */ (function () {
             range.startContainer === range.endContainer;
         var isCollapsed = range.collapsed;
         var nodes = this.getNodeCollection(range, nodeSelection, node);
-        var closestParentNode = (node.nodeName.toLowerCase() === 'table') ? this.closestEle(nodes[0].parentNode, editNode) : nodes[0];
+        var closestParentNode = (node.nodeName.toLowerCase() === 'table') ? (!isNOU(nodes[0]) ? this.closestEle(nodes[0].parentNode, editNode) : range.startContainer) : nodes[0];
         if (closestParentNode && closestParentNode.nodeName === 'LI' && node.nodeName.toLowerCase() === 'table') {
             this.insertTableInList(range, node, closestParentNode, nodes[0], nodeCutter);
             return;
@@ -103,7 +103,7 @@ var InsertHtml = /** @class */ (function () {
                     nodes[index].parentNode.removeChild(nodes[index]);
                 }
             }
-            if (sibNode) {
+            if (!isNOU(sibNode) && !isNOU(sibNode.parentNode)) {
                 InsertMethods.AppendBefore(node, sibNode, true);
             }
             else {
@@ -354,6 +354,12 @@ var InsertHtml = /** @class */ (function () {
                 node.parentNode.replaceChild(fragment, node);
             }
         }
+        if (lastSelectionNode.nodeName === 'TABLE') {
+            var pTag = createElement('p');
+            pTag.appendChild(createElement('br'));
+            lastSelectionNode.parentElement.insertBefore(pTag, lastSelectionNode.nextSibling);
+            lastSelectionNode = pTag;
+        }
         if (lastSelectionNode.nodeName === '#text') {
             this.placeCursorEnd(lastSelectionNode, node, nodeSelection, docElement, editNode);
         }

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

@@ -47,4 +47,5 @@ export declare class Lists {
     private revertList;
     private openTag;
     private closeTag;
+    private gatherElementsAround;
 }

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

@@ -553,58 +553,36 @@ var Lists = /** @class */ (function () {
         var listsNodes = this.domNode.blockNodes(true);
         if (e.enterAction === 'BR') {
             this.setSelectionBRConfig();
-            var allSelectedNode = this.parent.nodeSelection.getSelectedNodes(this.parent.currentDocument);
-            var selectedNodes = this.parent.nodeSelection.getSelectionNodes(allSelectedNode);
-            var currentFormatNodes = [];
-            if (selectedNodes.length === 0) {
-                selectedNodes.push(listsNodes[0]);
-            }
-            for (var i = 0; i < selectedNodes.length; i++) {
-                var currentNode = selectedNodes[i];
-                var previousCurrentNode = void 0;
-                while (!this.parent.domNode.isBlockNode(currentNode) && currentNode !== this.parent.editableElement) {
-                    previousCurrentNode = currentNode;
-                    currentNode = currentNode.parentElement;
-                }
-                if (this.parent.domNode.isBlockNode(currentNode) && currentNode === this.parent.editableElement) {
-                    currentFormatNodes.push(previousCurrentNode);
-                }
-            }
-            for (var i = 0; i < currentFormatNodes.length; i++) {
-                if (!this.parent.domNode.isBlockNode(currentFormatNodes[i])) {
-                    var currentNode = currentFormatNodes[i];
-                    var previousNode = currentNode;
-                    while (currentNode === this.parent.editableElement) {
-                        previousNode = currentNode;
-                        currentNode = currentNode.parentElement;
+            var selectedNodes = this.parent.domNode.blockNodes();
+            if (selectedNodes.length > 1) {
+                var i = 0;
+                var currentAlignmentNode = selectedNodes[0];
+                while (!isNOU(currentAlignmentNode)) {
+                    if (currentAlignmentNode.nodeName === 'BR') {
+                        var nextNode = currentAlignmentNode.nextSibling;
+                        detach(currentAlignmentNode);
+                        currentAlignmentNode = nextNode;
                     }
-                    var tempElem = void 0;
-                    if (this.parent.domNode.isBlockNode(previousNode.parentElement) &&
-                        previousNode.parentElement === this.parent.editableElement) {
-                        tempElem = createElement('p');
-                        previousNode.parentElement.insertBefore(tempElem, previousNode);
-                        tempElem.appendChild(previousNode);
-                    }
-                    else {
-                        tempElem = previousNode;
-                    }
-                    var preNode = tempElem.previousSibling;
-                    while (!isNOU(preNode) && preNode.nodeName !== 'BR' &&
-                        !this.parent.domNode.isBlockNode(preNode)) {
-                        tempElem.firstChild.parentElement.insertBefore(preNode, tempElem.firstChild);
-                        preNode = tempElem.previousSibling;
-                    }
-                    if (!isNOU(preNode) && preNode.nodeName === 'BR') {
-                        detach(preNode);
-                    }
-                    var postNode = tempElem.nextSibling;
-                    while (!isNOU(postNode) && postNode.nodeName !== 'BR' &&
-                        !this.parent.domNode.isBlockNode(postNode)) {
-                        tempElem.appendChild(postNode);
-                        postNode = tempElem.nextSibling;
+                    if (!isNOU(currentAlignmentNode)) {
+                        selectedNodes[i] = currentAlignmentNode.nodeName === 'LI' || this.parent.domNode.isBlockNode(currentAlignmentNode) ?
+                            currentAlignmentNode : this.gatherElementsAround(currentAlignmentNode);
+                        var currentSelectNode = selectedNodes[i].nodeName === 'LI' ? selectedNodes[i].parentElement : selectedNodes[i];
+                        var currentElementCheckNode = currentAlignmentNode.nodeName === '#text' ? currentAlignmentNode.parentElement : currentAlignmentNode;
+                        currentAlignmentNode = !isNOU(currentElementCheckNode.querySelector('.e-editor-select-end')) ||
+                            !isNOU(closest(currentAlignmentNode, '.e-editor-select-end')) ?
+                            null : currentSelectNode.nextSibling;
+                        if (currentAlignmentNode === null && !isNOU(currentSelectNode.nextSibling) && currentSelectNode.nextSibling.nodeName === 'BR') {
+                            detach(currentSelectNode.nextSibling);
+                        }
                     }
-                    if (!isNOU(postNode) && postNode.nodeName === 'BR') {
-                        detach(postNode);
+                    i++;
+                }
+            }
+            else {
+                if (!this.parent.domNode.isBlockNode(selectedNodes[0])) {
+                    selectedNodes[0] = this.gatherElementsAround(selectedNodes[0]);
+                    if (!isNOU(selectedNodes[0].nextSibling) && (selectedNodes[0].nextSibling.nodeName === 'BR')) {
+                        detach(selectedNodes[0].nextSibling);
                     }
                 }
             }
@@ -710,6 +688,16 @@ var Lists = /** @class */ (function () {
             }
         }
         this.cleanNode();
+        if (e.enterAction === 'BR') {
+            var spansToRemove = document.querySelectorAll('span#removeSpan');
+            spansToRemove.forEach(function (span) {
+                var fragment = document.createDocumentFragment();
+                while (span.firstChild) {
+                    fragment.appendChild(span.firstChild);
+                }
+                span.parentNode.replaceChild(fragment, span);
+            });
+        }
         this.parent.editableElement.focus();
         if (isIDevice()) {
             setEditFrameFocus(this.parent.editableElement, selector);
@@ -913,6 +901,12 @@ var Lists = /** @class */ (function () {
                         if (e.enterAction !== 'BR') {
                             this.domNode.wrapInner(element, this.domNode.parseHTMLFragment(wrapper));
                         }
+                        else {
+                            var wrapperSpan = '<span class=e-rte-wrap-inner id=removeSpan></span>';
+                            var br = document.createElement('br');
+                            this.domNode.wrapInner(element, this.domNode.parseHTMLFragment(wrapperSpan));
+                            element.appendChild(br);
+                        }
                     }
                     else if (this.domNode.contents(element)[0].nodeType === 3) {
                         var replace = this.domNode.createTagString(CONSTANT.DEFAULT_TAG, parentNode, this.parent.domNode.encode(this.domNode.contents(element)[0].textContent));
@@ -925,8 +919,18 @@ var Lists = /** @class */ (function () {
                     }
                     else {
                         var childNode = element.firstChild;
+                        if (childNode) {
+                            var attributes_1 = element.parentElement.attributes;
+                            if (attributes_1.length > 0) {
+                                for (var d = 0; d < attributes_1.length; d++) {
+                                    var e_1 = attributes_1[d];
+                                    var existingValue = childNode.getAttribute(e_1.nodeName);
+                                    var parentValue = (element.parentElement).getAttribute(e_1.nodeName);
+                                    childNode.setAttribute(e_1.nodeName, existingValue ? parentValue + ' ' + existingValue : parentValue);
+                                }
+                            }
+                        }
                         className = childNode.getAttribute('class');
-                        attributes(childNode, this.domNode.rawAttributes(parentNode));
                         if (className && childNode.getAttribute('class')) {
                             attributes(childNode, { 'class': className + ' ' + childNode.getAttribute('class') });
                         }
@@ -967,6 +971,48 @@ var Lists = /** @class */ (function () {
     Lists.prototype.closeTag = function (type) {
         return this.domNode.parseHTMLFragment('<span class="e-rte-list-close-' + type.toLowerCase() + '"></span>');
     };
+    Lists.prototype.gatherElementsAround = function (node) {
+        var pWrap = document.createElement('p');
+        // Insert the new div before the current node
+        var currentNode = node.previousSibling;
+        var classNode = node.parentNode;
+        if (classNode.className === 'e-editor-select-start') {
+            node.parentNode.parentNode.insertBefore(pWrap, node.parentNode);
+        }
+        else if (node.parentNode) {
+            node.parentNode.insertBefore(pWrap, node);
+        }
+        // Gather text and inline elements before the currentNode
+        var i = 0;
+        while (currentNode !== null && currentNode.nodeName !== 'BR' &&
+            !this.parent.domNode.isBlockNode(currentNode)) {
+            var prevSibling = currentNode.previousSibling;
+            if (currentNode.nodeType === 3 || currentNode.nodeType === 1) {
+                if (i === 0) {
+                    pWrap.appendChild(currentNode);
+                }
+                else {
+                    pWrap.insertBefore(currentNode, pWrap.firstChild);
+                }
+            }
+            currentNode = prevSibling;
+            i++;
+        }
+        // Add the current node to the new p
+        pWrap.appendChild(node);
+        // Gather text and inline elements after the currentNode
+        currentNode = pWrap.nextSibling ? pWrap.nextSibling : pWrap.parentElement.nextSibling;
+        while (currentNode !== null && currentNode.nodeName !== 'BR' &&
+            !this.parent.domNode.isBlockNode(currentNode)) {
+            var nextSibling = currentNode.nextSibling ?
+                currentNode.nextSibling : currentNode.parentElement.nextSibling;
+            if (currentNode.nodeType === 3 || currentNode.nodeType === 1) {
+                pWrap.appendChild(currentNode);
+            }
+            currentNode = nextSibling;
+        }
+        return pWrap;
+    };
     return Lists;
 }());
 export { Lists };

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

@@ -50,7 +50,7 @@ var NodeCutter = /** @class */ (function () {
                 fragment = this.spliceEmptyNode(fragment, false);
                 if (fragment && fragment.childNodes.length > 0) {
                     var isEmpty = (fragment.childNodes.length === 1 && fragment.childNodes[0].nodeName !== 'IMG' && !(fragment.querySelectorAll('img').length > 0)
-                        && this.isRteElm(fragment) && fragment.textContent === '') ? true : false;
+                        && this.isRteElm(fragment) && fragment.textContent.trim() === '') ? true : false;
                     if (!isEmpty) {
                         if (node) {
                             InsertMethods.AppendBefore(fragment, node);
@@ -71,7 +71,7 @@ var NodeCutter = /** @class */ (function () {
                 fragment = this.spliceEmptyNode(fragment, true);
                 if (fragment && fragment.childNodes.length > 0) {
                     var isEmpty = (fragment.childNodes.length === 1 && fragment.childNodes[0].nodeName !== 'IMG'
-                        && this.isRteElm(fragment) && fragment.textContent === '') ? true : false;
+                        && this.isRteElm(fragment) && fragment.textContent.trim() === '') ? true : false;
                     if (!isEmpty) {
                         if (node) {
                             InsertMethods.AppendBefore(fragment, node, true);

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

@@ -767,7 +767,7 @@ var EmojiPicker = /** @class */ (function () {
         var popupHeight = 330;
         var popupTop = cursorTop;
         var popupLeft = cursorLeft + rect.width;
-        if (rteEle.getBoundingClientRect().top < 0) {
+        if (rteEle.getBoundingClientRect().top < 0 && !this.parent.inlineMode.enable) {
             popupTop = popupTop + rteContent.getBoundingClientRect().top - toolbarHeight;
         }
         if (rect.top < popupHeight) {

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

@@ -364,6 +364,7 @@ var EnterKeyAction = /** @class */ (function () {
                             else {
                                 currentParent = _this.startNode;
                             }
+                            var currentParentStyle = window.getComputedStyle(currentParent);
                             _this.removeBRElement(currentParent);
                             var isEmptyBrInserted = false;
                             var currentParentLastChild = currentParent.lastChild;
@@ -428,6 +429,14 @@ var EnterKeyAction = /** @class */ (function () {
                                         // eslint-disable-next-line @typescript-eslint/no-unused-vars
                                         isEmptyBrInserted = true;
                                     }
+                                    else if (currentParent !== _this.parent.inputElement &&
+                                        (currentParentStyle.display === 'inline' || currentParentStyle.display === 'inline-block')) {
+                                        // eslint-disable-next-line @typescript-eslint/no-unused-vars
+                                        newElem = _this.parent.formatter.editorManager.nodeCutter.SplitNode(_this.range, currentParent, true).cloneNode(true);
+                                        currentParent.parentElement.insertBefore(outerBRElem, currentParent);
+                                        _this.parent.formatter.editorManager.nodeSelection.setCursorPoint(_this.parent.contentModule.getDocument(), currentParent, 0);
+                                        _this.insertFocusContent();
+                                    }
                                     else {
                                         _this.insertBRElement();
                                     }

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

@@ -216,8 +216,14 @@ var HtmlEditor = /** @class */ (function () {
                     range.insertNode(tempSpan);
                 }
                 var currentChild = this.parent.inputElement.firstChild;
-                while (!isNOU(currentChild) && currentChild.textContent.replace(regEx, '').trim().length > 0) {
-                    currentChild.innerHTML = currentChild.innerHTML.replace(regEx, '');
+                while (!isNOU(currentChild)) {
+                    if (currentChild.nodeName === '#text') {
+                        currentChild = currentChild.nextElementSibling;
+                        continue;
+                    }
+                    if (currentChild.textContent.replace(regEx, '').trim().length > 0) {
+                        currentChild.innerHTML = currentChild.innerHTML.replace(regEx, '');
+                    }
                     currentChild = currentChild.nextElementSibling;
                 }
                 var tempSpanToRemove = this.parent.inputElement.querySelector('.tempSpan');

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

@@ -9,7 +9,7 @@ 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';
-import { RenderType, UploadRequest } from '../base/enum';
+import { RenderType, ImageInputSource } from '../base/enum';
 import { Uploader } from '@syncfusion/ej2-inputs';
 import * as classes from '../base/classes';
 import { sanitizeHelper, convertToBlob, getDefaultValue } from '../base/util';
@@ -410,7 +410,7 @@ var PasteCleanup = /** @class */ (function () {
         var _this = this;
         this.parent.inputElement.contentEditable = 'true';
         e.element = imgElem;
-        e.requestType = UploadRequest.Pasted;
+        e.detectImageSource = ImageInputSource.Pasted;
         this.parent.trigger(events.imageUploadSuccess, e, function (e) {
             if (!isNullOrUndefined(_this.parent.insertImageSettings.path)) {
                 var url = _this.parent.insertImageSettings.path + e.file.name;

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

@@ -67,11 +67,11 @@ export declare type ToolbarConfigItems = 'Alignments' | 'JustifyLeft' | 'Justify
 /**
  * Defines types to be used as inserted image.
  */
-export declare enum UploadRequest {
-    /** Defines UploadRequest as Uploaded */
+export declare enum ImageInputSource {
+    /** Defines ImageInputSource as Uploaded */
     Uploaded = "Uploaded",
-    /** Defines UploadRequest as Dropped */
+    /** Defines ImageInputSource as Dropped */
     Dropped = "Dropped",
-    /** Defines UploadRequest as Pasted */
+    /** Defines ImageInputSource as Pasted */
     Pasted = "Pasted"
 }

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

@@ -64,12 +64,12 @@ export var DialogType;
 /**
  * Defines types to be used as inserted image.
  */
-export var UploadRequest;
-(function (UploadRequest) {
-    /** Defines UploadRequest as Uploaded */
-    UploadRequest["Uploaded"] = "Uploaded";
-    /** Defines UploadRequest as Dropped */
-    UploadRequest["Dropped"] = "Dropped";
-    /** Defines UploadRequest as Pasted */
-    UploadRequest["Pasted"] = "Pasted";
-})(UploadRequest || (UploadRequest = {}));
+export var ImageInputSource;
+(function (ImageInputSource) {
+    /** Defines ImageInputSource as Uploaded */
+    ImageInputSource["Uploaded"] = "Uploaded";
+    /** Defines ImageInputSource as Dropped */
+    ImageInputSource["Dropped"] = "Dropped";
+    /** Defines ImageInputSource as Pasted */
+    ImageInputSource["Pasted"] = "Pasted";
+})(ImageInputSource || (ImageInputSource = {}));

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

@@ -1,7 +1,7 @@
 import { Component, Observer, L10n, KeyboardEventArgs, EmitType } from '@syncfusion/ej2-base';
 import { ItemModel, OverflowMode } from '@syncfusion/ej2-navigations';
 import { ItemModel as DropDownItemModel, DropDownButton } from '@syncfusion/ej2-splitbuttons';
-import { ToolbarType, RenderType, UploadRequest } from './enum';
+import { ToolbarType, RenderType, ImageInputSource } from './enum';
 import { Toolbar } from '../actions/toolbar';
 import { UndoRedoManager } from '../../editor-manager/plugin/undo';
 import { ClickEventArgs } from '@syncfusion/ej2-navigations';
@@ -1159,9 +1159,9 @@ export interface ImageSuccessEventArgs {
      */
     element?: HTMLElement;
     /**
-     * Specify the request type of the event.
+     * Specify the detected image source of the event.
      */
-    requestType?: UploadRequest;
+    detectImageSource?: ImageInputSource;
 }
 /**
  * Provides information about a ImageFailed event.

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

@@ -1072,6 +1072,13 @@ var RichTextEditor = /** @class */ (function (_super) {
             clearInterval(this.timeInterval);
             this.timeInterval = null;
         }
+        var tooltipElements = document.querySelectorAll('[data-rte-id="' + this.getID() + '"]');
+        for (var i = 0; i < tooltipElements.length; i++) {
+            var tooltipEle = tooltipElements[i];
+            if (this.getID() === tooltipEle.getAttribute('data-rte-id')) {
+                detach(tooltipEle);
+            }
+        }
         if (this.element.offsetParent === null) {
             if (!isNOU(this.toolbarModule)) {
                 this.toolbarModule.destroy();

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-video {border: 0;cursor: pointer;display:\n                    block;float: none;height: auto;margin: 5px auto;max-width: 100%;position: relative;}\n                .e-rte-audio {border: 0;cursor: pointer;display:\n                        block;float: none;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;\n                    margin-left: 5px;margin-right: 5px;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-rte-img-caption.e-imgcenter {display: contents; margin-left: auto; margin-right: auto;}\n                .e-rte-img-caption.e-imgright {display: contents; margin-left: auto; margin-right: 0;}\n                .e-rte-img-caption.e-imgleft {display: contents;margin-left: 0;margin-right: auto;}\n                .e-img-caption.e-rte-img-caption.e-imgbreak {display: contents;}\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, span.e-rte-videoboxmark {  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, .e-mob-rte.e-mob-span span.e-rte-videoboxmark { background: #4a90e2; border: 1px solid #fff; }\n                .e-mob-rte span.e-rte-imageboxmark, .e-mob-rte span.e-rte-videoboxmark { 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, .e-mob-rte.e-mob-span span.e-rte-videoboxmark { 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-rte-img-caption.e-imgleft .e-img-inner { float: left; text-align: left; }\n                .e-rte-img-caption.e-imgright .e-img-inner { float: right; text-align: right; }\n                .e-rte-img-caption.e-imgleft .e-img-wrap, .e-rte-img-caption.e-imgright .e-img-wrap { display: contents; }\n                .e-img-caption a:focus-visible { outline: none; }\n                .e-rte-img-caption .e-rte-image.e-imgright { margin-left: auto; margin-right: 0; }\n                .e-rte-img-caption .e-rte-image.e-imgleft { 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; padding-top: 16px; position: absolute; text-align: start; top: 0; z-index: 1; }\n                li ol, li ul { margin-block-start: 10px;}\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-video {border: 0;cursor: pointer;display:\n                    block;float: none;height: auto;margin: 5px auto;max-width: 100%;position: relative;}\n                .e-rte-audio {border: 0;cursor: pointer;display:\n                        block;float: none;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;\n                    margin-left: 5px;margin-right: 5px;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-rte-img-caption.e-imgcenter {display: contents; margin-left: auto; margin-right: auto;}\n                .e-rte-img-caption.e-imgright {display: contents; margin-left: auto; margin-right: 0;}\n                .e-rte-img-caption.e-imgleft {display: contents;margin-left: 0;margin-right: auto;}\n                .e-img-caption.e-rte-img-caption.e-imgbreak {display: contents;}\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, span.e-rte-videoboxmark {  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, .e-mob-rte.e-mob-span span.e-rte-videoboxmark { background: #4a90e2; border: 1px solid #fff; }\n                .e-mob-rte span.e-rte-imageboxmark, .e-mob-rte span.e-rte-videoboxmark { 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, .e-mob-rte.e-mob-span span.e-rte-videoboxmark { 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-rte-img-caption.e-imgleft .e-img-inner { float: left; text-align: left; }\n                .e-rte-img-caption.e-imgright .e-img-inner { float: right; text-align: right; }\n                .e-rte-img-caption.e-imgleft .e-img-wrap, .e-rte-img-caption.e-imgright .e-img-wrap { display: contents; }\n                .e-img-caption a:focus-visible { outline: none; }\n                .e-rte-img-caption .e-rte-image.e-imgright { margin-left: auto; margin-right: 0; }\n                .e-rte-img-caption .e-rte-image.e-imgleft { 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                table{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; padding-top: 16px; position: absolute; text-align: start; top: 0; z-index: 1; }\n                li ol, li ul { margin-block-start: 10px;}\n            </style>\n        </head>";
 /**
  * Content module is used to render Rich Text Editor content
  *

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

@@ -5,7 +5,7 @@ import * as classes from '../base/classes';
 import { Uploader, TextBox } from '@syncfusion/ej2-inputs';
 import { Popup } from '@syncfusion/ej2-popups';
 import { Button, CheckBox } from '@syncfusion/ej2-buttons';
-import { RenderType, UploadRequest } from '../base/enum';
+import { RenderType, ImageInputSource } from '../base/enum';
 import { dispatchEvent, parseHtml, hasClass, convertToBlob } from '../base/util';
 import { isIDevice } from '../../common/util';
 import { imageResizeFactor } from '../../common/config';
@@ -1797,7 +1797,7 @@ var Image = /** @class */ (function () {
                 }
             },
             success: function (e) {
-                e.requestType = UploadRequest.Uploaded;
+                e.detectImageSource = ImageInputSource.Uploaded;
                 _this.parent.trigger(events.imageUploadSuccess, e, function (e) {
                     if (!isNOU(_this.parent.insertImageSettings.path)) {
                         var url = _this.parent.insertImageSettings.path + e.file.name;
@@ -2243,7 +2243,7 @@ var Image = /** @class */ (function () {
         imageElement.style.opacity = '1';
         imageElement.classList.add(classes.CLS_IMG_FOCUS);
         e.element = imageElement;
-        e.requestType = UploadRequest.Dropped;
+        e.detectImageSource = ImageInputSource.Dropped;
         this.parent.trigger(events.imageUploadSuccess, e, function (e) {
             if (!isNOU(_this.parent.insertImageSettings.path)) {
                 var url = _this.parent.insertImageSettings.path + e.file.name;

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

@@ -527,7 +527,10 @@ var Link = /** @class */ (function () {
             this.selection.restore();
         }
         else {
+            var x = window.scrollX;
+            var y = window.scrollY;
             this.selfLink.parent.contentModule.getEditPanel().focus();
+            window.scrollTo(x, y);
         }
     };
     Link.prototype.onDocumentClick = function (e) {

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

@@ -605,8 +605,11 @@ var Table = /** @class */ (function () {
         if (proxy.editdlgObj) {
             proxy.editdlgObj.hide();
         }
+        var x = window.scrollX;
+        var y = window.scrollY;
         proxy.parent.formatter.process(proxy.parent, selectionObj.args, selectionObj.args.originalEvent, value);
         proxy.contentModule.getEditPanel().focus();
+        window.scrollTo(x, y);
         proxy.parent.on(events.mouseDown, proxy.cellSelect, proxy);
     };
     Table.prototype.cellSelect = function (e) {

package/src/rich-text-editor/renderer/toolbar-renderer.d.ts

@@ -1,4 +1,5 @@
 import { DropDownButton } from '@syncfusion/ej2-splitbuttons';
+import { TooltipEventArgs } from '@syncfusion/ej2-popups';
 import { IRenderer, IRichTextEditor, IToolbarOptions, IDropDownModel, IColorPickerModel } from '../base/interface';
 import { ColorPicker } from '@syncfusion/ej2-inputs';
 import { ServiceLocator } from '../services/service-locator';
@@ -94,6 +95,7 @@ export declare class ToolbarRenderer implements IRenderer {
 
      */
     renderColorPicker(args: IColorPickerModel, item: string): ColorPicker;
+    tooltipBeforeOpen(args: TooltipEventArgs): void;
     /**
      * The function is used to render Rich Text Editor toolbar
      *

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

@@ -153,6 +153,7 @@ var ToolbarRenderer = /** @class */ (function () {
                 openDelay: 400,
                 opensOn: 'Hover',
                 beforeRender: this.tooltipBeforeRender.bind(this),
+                beforeOpen: this.tooltipBeforeOpen.bind(this),
                 cssClass: this.parent.getCssClass(),
                 windowCollision: true,
                 position: 'BottomCenter'
@@ -275,7 +276,7 @@ var ToolbarRenderer = /** @class */ (function () {
                             if ((divNode.textContent.trim() !== ''
                                 && args.element.childNodes[index].textContent.trim() === divNode.textContent.trim()) ||
                                 ((args.items[0].command === 'Formats' && !isNOU(toolbarStatus.formats) && _this.parent.format.types[index].value.toLowerCase() === toolbarStatus.formats.toLowerCase() && args.element.childNodes[index].classList.contains(_this.parent.format.types[index].cssClass))
-                                    || (args.items[0].command === 'Font' && !isNOU(toolbarStatus.fontname) && _this.parent.fontFamily.items[index].value.toLowerCase() === toolbarStatus.fontname.toLowerCase() && args.element.childNodes[index].classList.contains(_this.parent.fontFamily.items[index].cssClass)))) {
+                                    || (args.items[0].subCommand === 'FontName' && args.items[0].command === 'Font' && !isNOU(toolbarStatus.fontname) && !isNOU(_this.parent.fontFamily.items[index]) && _this.parent.fontFamily.items[index].value.toLowerCase() === toolbarStatus.fontname.toLowerCase() && args.element.childNodes[index].classList.contains(_this.parent.fontFamily.items[index].cssClass)))) {
                                 if (!args.element.childNodes[index].classList.contains('e-active')) {
                                     addClass([args.element.childNodes[index]], 'e-active');
                                 }
@@ -661,6 +662,11 @@ var ToolbarRenderer = /** @class */ (function () {
         colorPicker.appendTo(document.getElementById(args.target));
         return colorPicker;
     };
+    ToolbarRenderer.prototype.tooltipBeforeOpen = function (args) {
+        if (args.element) {
+            args.element.setAttribute('data-rte-id', this.parent.getID());
+        }
+    };
     /**
      * The function is used to render Rich Text Editor toolbar
      *

package/styles/bootstrap-dark.css

@@ -896,6 +896,10 @@
   margin-left: 0;
   padding-left: 5px;
 }
+.e-richtexteditor .e-rte-content .e-content table,
+.e-richtexteditor .e-source-content .e-content table {
+  margin-bottom: 10px;
+}
 .e-richtexteditor .e-rte-content .e-content pre,
 .e-richtexteditor .e-source-content .e-content pre {
   background-color: inherit;