@syncfusion/ej2-richtexteditor 27.1.50 → 27.1.52

package/dist/global/index.d.ts

@@ -1,6 +1,6 @@
 /*!
 *  filename: index.d.ts
-*  version : 27.1.50
+*  version : 27.1.52
 *  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@27.1.48",
+  "_id": "@syncfusion/ej2-richtexteditor@27.1.51",
   "_inBundle": false,
-  "_integrity": "sha512-O6LTfLB+i7f8Fkc9RWMiv7Ko97D0DoF8iybwrwvZeygcujdQoBoWGjwpPxeM9KG5o/jlZ/4FqtcLEWFxpHcKWw==",
+  "_integrity": "sha512-inlHC5480ej5x2prpYyHklgio/xK2ySwJ9fde81c7VZodSANYCWTzGEM4zpNXwqGq883rUcsceZWyx77wbfPJQ==",
   "_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-27.1.48.tgz",
-  "_shasum": "167af738a4a40e0e0b9a8e3f7768a4656ba45e89",
+  "_resolved": "https://nexus.syncfusioninternal.com/repository/ej2-hotfix-new/@syncfusion/ej2-richtexteditor/-/ej2-richtexteditor-27.1.51.tgz",
+  "_shasum": "485be34e965c6976c8a1d3509ea9c399b6ab3612",
   "_spec": "@syncfusion/ej2-richtexteditor@*",
   "_where": "/jenkins/workspace/elease-automation_release_27.1.1/packages/included",
   "author": {
@@ -37,12 +37,12 @@
   },
   "bundleDependencies": false,
   "dependencies": {
-    "@syncfusion/ej2-base": "~27.1.50",
-    "@syncfusion/ej2-buttons": "~27.1.50",
-    "@syncfusion/ej2-dropdowns": "~27.1.50",
-    "@syncfusion/ej2-filemanager": "~27.1.50",
+    "@syncfusion/ej2-base": "~27.1.52",
+    "@syncfusion/ej2-buttons": "~27.1.51",
+    "@syncfusion/ej2-dropdowns": "~27.1.52",
+    "@syncfusion/ej2-filemanager": "~27.1.52",
     "@syncfusion/ej2-inputs": "~27.1.50",
-    "@syncfusion/ej2-navigations": "~27.1.50",
+    "@syncfusion/ej2-navigations": "~27.1.52",
     "@syncfusion/ej2-popups": "~27.1.50",
     "@syncfusion/ej2-splitbuttons": "~27.1.50"
   },
@@ -80,6 +80,6 @@
     "url": "git+https://github.com/syncfusion/ej2-javascript-ui-controls.git"
   },
   "typings": "index.d.ts",
-  "version": "27.1.50",
+  "version": "27.1.52",
   "sideEffects": false
 }

package/src/common/editor-styles.d.ts

@@ -0,0 +1 @@
+export declare const IFRAME_EDITOR_STYLES: string;

package/src/common/editor-styles.js

@@ -0,0 +1 @@
+export var IFRAME_EDITOR_STYLES = "\n@charset \"UTF-8\";\n\nhtml {\n    height: auto;\n}\n\nhtml, body {\n    margin: 0;\n}\n\nbody {\n    color: #333;\n    word-wrap: break-word;\n}\n\n.e-content {\n    background: unset;\n    box-sizing: border-box;\n    min-height: 100px;\n    outline: 0 solid transparent;\n    padding: 16px;\n    position: relative;\n    overflow-x: auto;\n    font-weight: normal;\n    line-height: 1.5;\n    font-size: 14px;\n    text-align: inherit;\n    font-family: \"Roboto\", \"Segoe UI\", \"GeezaPro\", \"DejaVu Serif\", \"sans-serif\", \"-apple-system\", \"BlinkMacSystemFont\";\n}\n\n.e-content p {\n    margin: 0 0 10px;\n    margin-bottom: 10px;\n}\n\n.e-content h1 {\n    font-size: 2.857em;\n    font-weight: 600;\n    line-height: 1.2;\n    margin: 10px 0;\n}\n\n.e-content h2 {\n    font-size: 2.285em;\n    font-weight: 600;\n    line-height: 1.2;\n    margin: 10px 0;\n}\n\n.e-content h3 {\n    font-size: 2em;\n    font-weight: 600;\n    line-height: 1.2;\n    margin: 10px 0;\n}\n\n.e-content h4 {\n    font-size: 1.714em;\n    font-weight: 600;\n    line-height: 1.2;\n    margin: 10px 0;\n}\n\n.e-content h5 {\n    font-size: 1.428em;\n    font-weight: 600;\n    line-height: 1.2;\n    margin: 10px 0;\n}\n\n.e-content h6 {\n    font-size: 1.142em;\n    font-weight: 600;\n    line-height: 1.5;\n    margin: 10px 0;\n}\n\n.e-content blockquote {\n    margin: 10px 0;\n    padding-left: 12px;\n    border-left: 2px solid #5c5c5c;\n}\n\n.e-rtl.e-content blockquote {\n    padding-left: 0;\n    padding-right: 12px;\n}\n\n.e-content pre {\n    border: 0;\n    border-radius: 0;\n    color: #333;\n    font-size: inherit;\n    line-height: inherit;\n    margin: 0 0 10px;\n    overflow: visible;\n    padding: 0;\n    white-space: pre-wrap;\n    word-break: inherit;\n    word-wrap: break-word;\n}\n\n.e-content code {\n    background: #9d9d9d26;\n    color: #ed484c;\n}\n\n.e-content strong,\n.e-content b {\n    font-weight: bold;\n}\n\n.e-content a {\n    text-decoration: none;\n    user-select: auto;\n}\n\n.e-content a:hover {\n    text-decoration: underline;\n}\n\n.e-content li {\n    margin-bottom: 10px;\n}\n\n.e-content li ol,\n.e-content li ul {\n    margin-block-start: 10px;\n}\n\n.e-content ul {\n    list-style-type: disc;\n}\n\n.e-content ul ul,\n.e-content ol ul {\n    list-style-type: circle;\n}\n\n.e-content ul ul ul,\n.e-content ol ul ul,\n.e-content ul ol ul,\n.e-content ol ol ul {\n    list-style-type: square;\n}\n\n.e-rte-image,\n.e-rte-video {\n    border: 0;\n    cursor: pointer;\n    display: block;\n    float: none;\n    height: auto;\n    margin: 5px auto;\n    max-width: 100%;\n    position: relative;\n}\n\n.e-content p:last-child,\n.e-content pre:last-child,\n.e-content blockquote:last-child {\n    margin-bottom: 0;\n}\n\n.e-content h3 + h4,\n.e-content h4 + h5,\n.e-content h5 + h6 {\n    margin-top: 0.6em;\n}\n\n.e-content ul:last-child {\n    margin-bottom: 0;\n}\n\n.e-content table {\n    margin-bottom: 10px;\n    border-collapse: collapse;\n    empty-cells: show;\n}\n\n.e-content table.e-cell-select {\n    position: relative;\n}\n\n.e-content table.e-cell-select::after {\n    content: '';\n    position: absolute;\n    top: 0;\n    left: 0;\n    right: 0;\n    bottom: 0;\n    border: 2px solid #4a90e2;\n    pointer-events: none;\n}\n\ntable .e-cell-select {\n    border: 1px double #4a90e2 !important;\n}\n\n.e-content table.e-rte-table th {\n    background-color: #E0E0E0;\n}\n\n.e-rte-table td,\n.e-rte-table th {\n    border: 1px solid #BDBDBD;\n    height: 20px;\n    min-width: 20px;\n    padding: 2px 5px;\n    box-sizing: border-box;\n}\n\n.e-rte-table td.e-cell-select.e-multi-cells-select,\n.e-rte-table th.e-cell-select.e-multi-cells-select {\n    position: relative;\n}\n\n.e-rte-table td.e-cell-select.e-multi-cells-select::after,\n.e-rte-table th.e-cell-select.e-multi-cells-select::after {\n    background-color: rgba(13, 110, 253, 0.08);\n    content: \"\";\n    position: absolute;\n    top: 0;\n    left: 0;\n    width: 100%;\n    height: 100%;\n    bottom: 0;\n    pointer-events: none;\n    right: 0;\n}\n\ntable td.e-multi-cells-select ::selection,\ntable th.e-multi-cells-select ::selection {\n    background-color: transparent;\n}\n\ntd.e-multi-cells-select,\nth.e-multi-cells-select {\n    user-select: none !important;\n}\n\n.e-rte-table.e-dashed-border td,\n.e-rte-table.e-dashed-border th {\n    border-style: dashed;\n}\n\n.e-rte-table .e-alternate-border tbody tr:nth-child(2n) {\n    background-color: #F5F5F5;\n}\n\n.e-rte-audio {\n    border: 0;\n    cursor: pointer;\n    display: block;\n    float: none;\n    margin: 5px auto;\n    max-width: 100%;\n    position: relative;\n}\n\n.e-rte-image.e-imginline,\n.e-rte-audio.e-audio-inline,\n.e-rte-video.e-video-inline {\n    display: inline-block;\n    float: none;\n    margin-left: 5px;\n    margin-right: 5px;\n    max-width: calc(100% - (2 * 5px));\n    padding: 1px;\n    vertical-align: bottom;\n}\n\n.e-rte-image.e-imgcenter,\n.e-rte-video.e-video-center {\n    cursor: pointer;\n    display: block;\n    float: none;\n    margin: 5px auto;\n    max-width: 100%;\n    position: relative;\n}\n\n.e-rte-image.e-imgright,\n.e-rte-video.e-video-right {\n    float: right;\n    margin: 0 auto;\n    margin-left: 5px;\n    text-align: right;\n}\n\n.e-rte-image.e-imgleft,\n.e-rte-video.e-video-left {\n    float: left;\n    margin: 0 auto;\n    margin-right: 5px;\n    text-align: left;\n}\n\n.e-img-caption {\n    display: inline-block;\n    float: none;\n    margin: 5px auto;\n    max-width: 100%;\n    position: relative;\n}\n\n.e-img-caption.e-caption-inline {\n    display: inline-block;\n    float: none;\n    margin: 5px auto;\n    margin-left: 5px;\n    margin-right: 5px;\n    max-width: calc(100% - (2 * 5px));\n    position: relative;\n    text-align: center;\n    vertical-align: bottom;\n}\n\n.e-rte-img-caption.e-imgcenter {\n    display: contents;\n    margin-left: auto;\n    margin-right: auto;\n}\n\n.e-rte-img-caption.e-imgright {\n    display: contents;\n    margin-left: auto;\n    margin-right: 0;\n}\n\n.e-rte-img-caption.e-imgleft {\n    display: contents;\n    margin-left: 0;\n    margin-right: auto;\n}\n\n.e-img-caption.e-rte-img-caption.e-imgbreak {\n    display: contents;\n}\n\n.e-img-inner {\n    box-sizing: border-box;\n    display: block;\n    font-size: 16px;\n    font-weight: initial;\n    margin: auto;\n    opacity: .9;\n    text-align: center;\n    width: 100%;\n}\n\n.e-img-wrap {\n    display: inline-block;\n    margin: auto;\n    padding: 0;\n    text-align: center;\n    width: 100%;\n}\n\n.e-imgleft,\n.e-video-left {\n    float: left;\n    margin: 0 5px 0 0;\n    text-align: left;\n}\n\n.e-imgright,\n.e-video-right {\n    float: right;\n    margin: 0 0 0 5px;\n    text-align: right;\n}\n\n.e-imgcenter,\n.e-video-center {\n    cursor: pointer;\n    display: block;\n    float: none;\n    height: auto;\n    margin: 5px auto;\n    max-width: 100%;\n    position: relative;\n}\n\n.e-control img:not(.e-resize) {\n    border: 2px solid transparent;\n    z-index: 1000\n}\n\n.e-imginline,\n.e-audio-inline,\n.e-video-inline {\n    display: inline-block;\n    float: none;\n    margin-left: 5px;\n    margin-right: 5px;\n    max-width: calc(100% - (2 * 5px));\n    vertical-align: bottom;\n}\n\n.e-imgbreak,\n.e-audio-break,\n.e-video-break {\n    border: 0;\n    cursor: pointer;\n    display: block;\n    float: none;\n    height: auto;\n    margin: 5px auto;\n    max-width: 100%;\n    position: relative;\n}\n\n.e-rte-image.e-img-focus:not(.e-resize),\n.e-audio-focus:not(.e-resize),\n.e-video-focus:not(.e-resize) {\n    border: solid 2px #4a90e2;\n}\n\nimg.e-img-focus::selection,\naudio.e-audio-focus::selection,\n.e-video-focus::selection {\n    background: transparent;\n    color: transparent;\n}\n\nspan.e-rte-imageboxmark,\nspan.e-rte-videoboxmark {\n    width: 10px;\n    height: 10px;\n    position: absolute;\n    display: block;\n    background: #4a90e2;\n    border: 1px solid #fff;\n    z-index: 1000;\n}\n\n.e-mob-rte.e-mob-span span.e-rte-imageboxmark,\n.e-mob-rte.e-mob-span span.e-rte-videoboxmark {\n    background: #4a90e2;\n    border: 1px solid #fff;\n}\n\n.e-mob-rte span.e-rte-imageboxmark,\n.e-mob-rte span.e-rte-videoboxmark {\n    background: #fff;\n    border: 1px solid #4a90e2;\n    border-radius: 15px;\n    height: 20px;\n    width: 20px;\n}\n\n.e-mob-rte.e-mob-span span.e-rte-imageboxmark,\n.e-mob-rte.e-mob-span span.e-rte-videoboxmark {\n    background: #4a90e2;\n    border: 1px solid #fff;\n}\n\n.e-content img.e-resize,\n.e-content video.e-resize {\n    z-index: 1000;\n}\n\n.e-img-caption .e-img-inner {\n    outline: 0;\n}\n\n.e-rte-img-caption.e-imgleft .e-img-inner {\n    float: left;\n    text-align: left;\n}\n\n.e-rte-img-caption.e-imgright .e-img-inner {\n    float: right;\n    text-align: right;\n}\n\n.e-rte-img-caption.e-imgleft .e-img-wrap,\n.e-rte-img-caption.e-imgright .e-img-wrap {\n    display: contents;\n}\n\n.e-img-caption a:focus-visible {\n    outline: none;\n}\n\n.e-rte-img-caption .e-rte-image.e-imgright {\n    margin-left: auto;\n    margin-right: 0;\n}\n\n.e-rte-img-caption .e-rte-image.e-imgleft {\n    margin: 0;\n}\n\nspan.e-table-box {\n    cursor: nwse-resize;\n    display: block;\n    height: 10px;\n    position: absolute;\n    width: 10px;\n    background-color: #ffffff;\n    border: 1px solid #BDBDBD;\n}\n\nspan.e-table-box.e-rmob {\n    height: 14px;\n    width: 14px;\n    background-color: #BDBDBD;\n    border: 1px solid #BDBDBD;\n}\n\n.e-row-resize,\n.e-column-resize {\n    background-color: transparent;\n    background-repeat: repeat;\n    bottom: 0;\n    cursor: col-resize;\n    height: 1px;\n    overflow: visible;\n    position: absolute;\n    width: 1px;\n}\n\n.e-row-resize {\n    cursor: row-resize;\n    height: 1px;\n}\n\n.e-table-rhelper {\n    cursor: col-resize;\n    opacity: .87;\n    position: absolute;\n}\n\n.e-table-rhelper.e-column-helper {\n    width: 1px;\n}\n\n.e-table-rhelper.e-row-helper {\n    height: 1px;\n}\n\n.e-reicon::before {\n    border-bottom: 6px solid transparent;\n    border-right: 6px solid;\n    border-top: 6px solid transparent;\n    content: '';\n    display: block;\n    height: 0;\n    position: absolute;\n    right: 4px;\n    top: 4px;\n    width: 20px;\n}\n\n.e-reicon::after {\n    border-bottom: 6px solid transparent;\n    border-left: 6px solid;\n    border-top: 6px solid transparent;\n    content: '';\n    display: block;\n    height: 0;\n    left: 4px;\n    position: absolute;\n    top: 4px;\n    width: 20px;\n    z-index: 3;\n}\n\n.e-row-helper.e-reicon::after {\n    top: 10px;\n    transform: rotate(90deg);\n}\n\n.e-row-helper.e-reicon::before {\n    left: 4px;\n    top: -20px;\n    transform: rotate(90deg);\n}\n\n\n.e-table-rhelper {\n    background-color: #4a90e2;\n}\n\n.e-rtl {\n    direction: rtl;\n}\n\n.e-rte-placeholder::before {\n    content: attr(placeholder);\n    opacity: 0.54;\n    overflow: hidden;\n    padding-top: 16px;\n    position: absolute;\n    text-align: start;\n    top: 0;\n    z-index: 1;\n}\n\n.e-resize-enabled,\n.e-count-enabled {\n    padding-bottom: 0px;\n}\n";

package/src/common/interface.d.ts

@@ -105,3 +105,13 @@ export interface ImageOrTableCursor {
     end: boolean;
     endName: string;
 }
+/**
+ * The `ImageDimension` is used to specify the width and height of the editor image.
+ *
+ * @private
+ * @hidden
+ */
+export interface ImageDimension {
+    width: number;
+    height: number;
+}

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

@@ -91,7 +91,7 @@ var Alignments = /** @class */ (function () {
                     selector: e.selector
                 });
             }
-            this.parent.editableElement.focus();
+            this.parent.editableElement.focus({ preventScroll: true });
             save = this.parent.domNode.saveMarker(save);
             if (isIDevice()) {
                 setEditFrameFocus(this.parent.editableElement, e.selector);

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

@@ -94,7 +94,7 @@ var Indents = /** @class */ (function () {
                 /* eslint-enable */
             }
         }
-        editEle.focus();
+        editEle.focus({ preventScroll: true });
         if (isIDevice()) {
             setEditFrameFocus(editEle, e.selector);
         }

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

@@ -254,7 +254,9 @@ var InsertHtml = /** @class */ (function () {
                     fragment.appendChild(node.firstChild);
                 }
                 if (isSingleNode) {
-                    preNode.parentNode.replaceChild(fragment, preNode);
+                    range.deleteContents();
+                    this.removeEmptyElements(editNode, true);
+                    range.insertNode(fragment);
                 }
                 else {
                     var startContainerParent = editNode === range.startContainer ?
@@ -266,6 +268,7 @@ var InsertHtml = /** @class */ (function () {
                     range.setEnd(startContainerParent, startIndex);
                     if (!isNOU(lasNode) && lasNode !== editNode) {
                         detach(lasNode);
+                        this.removeEmptyElements(editNode, true);
                     }
                     // eslint-disable-next-line
                     !isNOU(sibNode) ? (sibNode.parentNode === editNode ? sibNode.appendChild(fragment) : sibNode.parentNode.appendChild(fragment)) : range.insertNode(fragment);
@@ -282,6 +285,9 @@ var InsertHtml = /** @class */ (function () {
                     var rangeElement = closest(nearestAnchor, 'span');
                     rangeElement.appendChild(tempSpan);
                 }
+                else if (nodes[0].nodeName === '#text' && nodes[0].nodeValue.includes('\u200B') && !isNOU(nodes[0].parentElement) && !isNOU(nodes[0].parentElement.previousElementSibling) && nodes[0].parentElement.previousElementSibling.classList.contains('e-mention-chip')) {
+                    range.startContainer.parentElement.insertAdjacentElement('afterend', tempSpan);
+                }
                 else {
                     range.insertNode(tempSpan);
                 }
@@ -367,6 +373,24 @@ var InsertHtml = /** @class */ (function () {
         if (lastSelectionNode.nodeName === '#text') {
             this.placeCursorEnd(lastSelectionNode, node, nodeSelection, docElement, editNode);
         }
+        else if (lastSelectionNode.nodeName === 'HR') {
+            var nextSiblingNode = lastSelectionNode.nextSibling ? lastSelectionNode.nextSibling : null;
+            var siblingTag = enterAction === 'DIV' ? createElement('div') : createElement('p');
+            siblingTag.appendChild(createElement('br'));
+            if (!isNOU(nextSiblingNode) && nextSiblingNode.nodeName === 'HR') {
+                lastSelectionNode.parentNode.insertBefore(siblingTag, nextSiblingNode);
+                lastSelectionNode = siblingTag;
+            }
+            else if (!isNOU(nextSiblingNode)) {
+                lastSelectionNode = nextSiblingNode;
+            }
+            else {
+                lastSelectionNode.parentNode.appendChild(siblingTag);
+                lastSelectionNode.parentNode.insertBefore(lastSelectionNode, siblingTag);
+                lastSelectionNode = siblingTag;
+            }
+            nodeSelection.setSelectionText(docElement, lastSelectionNode, lastSelectionNode, 0, 0);
+        }
         else {
             this.cursorPos(lastSelectionNode, node, nodeSelection, docElement, editNode, enterAction);
         }
@@ -435,10 +459,10 @@ var InsertHtml = /** @class */ (function () {
                 blockNode = range.endContainer;
                 range.setEnd(blockNode, range.endContainer.textContent.length);
             }
-            if (blockNode.nodeName === 'BODY' && range.startContainer === range.endContainer && range.startContainer.nodeType === 1) {
+            if (blockNode && blockNode.nodeName === 'BODY' && range.startContainer === range.endContainer && range.startContainer.nodeType === 1) {
                 blockNode = range.startContainer;
             }
-            if (blockNode.closest('LI') && editNode.contains(blockNode.closest('LI')) && blockNode.nodeName !== 'TD' && blockNode.nodeName !== 'TH' && blockNode.nodeName !== 'TR' && node && node.firstElementChild &&
+            if (blockNode && blockNode.closest('LI') && editNode.contains(blockNode.closest('LI')) && blockNode.nodeName !== 'TD' && blockNode.nodeName !== 'TH' && blockNode.nodeName !== 'TR' && node && node.firstElementChild &&
                 ((node).firstElementChild.tagName === 'OL' || node.firstElementChild.tagName === 'UL')) {
                 var liNode = void 0;
                 while (node.firstElementChild.lastElementChild && node.firstElementChild.lastElementChild.tagName === 'LI') {
@@ -449,7 +473,7 @@ var InsertHtml = /** @class */ (function () {
                     node.firstElementChild.insertAdjacentElement('afterend', liNode);
                 }
             }
-            if (blockNode.nodeName === 'TD' || blockNode.nodeName === 'TH' || blockNode.nodeName === 'TR') {
+            if (blockNode && blockNode.nodeName === 'TD' || blockNode.nodeName === 'TH' || blockNode.nodeName === 'TR') {
                 var tempSpan = createElement('span', { className: 'tempSpan' });
                 range.insertNode(tempSpan);
                 tempSpan.parentNode.replaceChild(node, tempSpan);
@@ -532,17 +556,20 @@ var InsertHtml = /** @class */ (function () {
         innerElement = innerElement.replace(/<!--[\s\S]*?-->/g, '');
         elm.innerHTML = innerElement;
     };
-    InsertHtml.findDetachEmptyElem = function (element) {
+    InsertHtml.findDetachEmptyElem = function (element, ignoreBlockNodes) {
+        if (ignoreBlockNodes === void 0) { ignoreBlockNodes = false; }
         var removableElement;
         if (!isNOU(element.parentElement)) {
             var hasNbsp = element.parentElement.textContent.length > 0 && element.parentElement.textContent.match(/\u00a0/g)
                 && element.parentElement.textContent.match(/\u00a0/g).length > 0;
             if (!hasNbsp && element.parentElement.textContent.trim() === '' && element.parentElement.contentEditable !== 'true' &&
                 isNOU(element.parentElement.querySelector('img')) && element.parentElement.nodeName !== 'TD' && element.parentElement.nodeName !== 'TH') {
-                removableElement = this.findDetachEmptyElem(element.parentElement);
+                removableElement = ignoreBlockNodes && CONSTANT.BLOCK_TAGS.indexOf(element.parentElement.tagName.toLowerCase()) !== -1 ?
+                    element : this.findDetachEmptyElem(element.parentElement, ignoreBlockNodes);
             }
             else {
-                removableElement = element;
+                removableElement = ignoreBlockNodes && CONSTANT.BLOCK_TAGS.indexOf(element.tagName.toLowerCase()) !== -1 ? null :
+                    element;
             }
         }
         else {
@@ -550,7 +577,8 @@ var InsertHtml = /** @class */ (function () {
         }
         return removableElement;
     };
-    InsertHtml.removeEmptyElements = function (element) {
+    InsertHtml.removeEmptyElements = function (element, ignoreBlockNodes) {
+        if (ignoreBlockNodes === void 0) { ignoreBlockNodes = false; }
         var emptyElements = element.querySelectorAll(':empty');
         var nonSvgEmptyElements = Array.from(emptyElements).filter(function (element) {
             // Check if the element is an SVG element or an ancestor of an SVG element
@@ -563,7 +591,7 @@ var InsertHtml = /** @class */ (function () {
                     nonSvgEmptyElements[i].style.borderBottom === '' ? true : false;
             }
             if (CONSTANT.SELF_CLOSING_TAGS.indexOf(nonSvgEmptyElements[i].tagName.toLowerCase()) < 0 && lineWithDiv) {
-                var detachableElement = this.findDetachEmptyElem(nonSvgEmptyElements[i]);
+                var detachableElement = this.findDetachEmptyElem(nonSvgEmptyElements[i], ignoreBlockNodes);
                 if (!isNOU(detachableElement)) {
                     detach(detachableElement);
                 }

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

@@ -374,7 +374,7 @@ var Lists = /** @class */ (function () {
                 }
                 if (isNested) {
                     this.cleanNode();
-                    this.parent.editableElement.focus();
+                    this.parent.editableElement.focus({ preventScroll: true });
                 }
                 if (!(e.event.action && e.event.action === 'indent')) {
                     this.saveSelection = this.domNode.saveMarker(this.saveSelection);
@@ -688,7 +688,7 @@ var Lists = /** @class */ (function () {
                 span.parentNode.replaceChild(fragment, span);
             });
         }
-        this.parent.editableElement.focus();
+        this.parent.editableElement.focus({ preventScroll: true });
         if (isIDevice()) {
             setEditFrameFocus(this.parent.editableElement, selector);
         }
@@ -927,7 +927,8 @@ var Lists = /** @class */ (function () {
                             parentNode.removeAttribute('style');
                         }
                     }
-                    var wrapper = '<' + e.enterAction + wrapperclass + this.domNode.attributes(element) + '></' + e.enterAction + '>';
+                    var wrapperTag = isNullOrUndefined(e.enterAction) ? CONSTANT.DEFAULT_TAG : e.enterAction;
+                    var wrapper = '<' + wrapperTag + wrapperclass + this.domNode.attributes(element) + '></' + wrapperTag + '>';
                     if (e.enterAction !== 'BR') {
                         this.domNode.wrapInner(element, this.domNode.parseHTMLFragment(wrapper));
                     }

package/src/editor-manager/plugin/ms-word-clean-up.js

@@ -516,15 +516,22 @@ var MsWordPaste = /** @class */ (function () {
                         var styleProperty = resultElem[j].getAttribute('style');
                         if (!isNOU(styleProperty) && styleProperty.trim() !== '') {
                             var valueSplit = values[i].split(';');
+                            for (var q = 0; q < valueSplit.length; q++) {
+                                if (valueSplit[q].split(':')[0] === 'border' && valueSplit[q].split(':')[1] === 'none') {
+                                    valueSplit.splice(q, 1);
+                                    q--;
+                                }
+                            }
                             if (!fromClass) {
                                 for (var k = 0; k < valueSplit.length; k++) {
-                                    if (styleProperty.indexOf(valueSplit[k].split(':')[0]) >= 0) {
+                                    var propertyName = valueSplit[k].split(':')[0];
+                                    if (styleProperty.includes(propertyName + ':')) {
                                         valueSplit.splice(k, 1);
                                         k--;
                                     }
                                 }
                             }
-                            var changedValue = styleProperty + valueSplit.join(';') + ';';
+                            var changedValue = valueSplit.join(';') + ';' + styleProperty;
                             resultElem[j].setAttribute('style', changedValue);
                         }
                         else {
@@ -703,6 +710,11 @@ var MsWordPaste = /** @class */ (function () {
                                 startAttr = parseInt(startString, 10);
                             }
                         }
+                        else if (listStyleType === 'decimal-leading-zero') {
+                            if (!isNaN(parseInt(startString, 10))) {
+                                startAttr = parseInt(startString, 10);
+                            }
+                        }
                         else if (listStyleType === 'upper-alpha') {
                             startAttr = (startString.split('.')[0].charCodeAt(0) - 64);
                         }

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

@@ -228,6 +228,9 @@ var TableCommand = /** @class */ (function () {
         for (var i = 0; i < thTdElm.length; i++) {
             thTdElm[i].dataset.oldWidth = (thTdElm[i].offsetWidth / currentTabElm.offsetWidth * 100) + '%';
         }
+        if (isNOU(currentTabElm.style.width) || currentTabElm.style.width === '') {
+            currentTabElm.style.width = currentTabElm.offsetWidth + 'px';
+        }
         for (var i = 0; i < allRows.length; i++) {
             curCell = allRows[i].querySelectorAll(':scope > td, :scope > th')[colIndex];
             var colTemplate = curCell.cloneNode(true);

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

@@ -176,7 +176,7 @@ var BaseToolbar = /** @class */ (function () {
                 var tooltipText = items[num].tooltipText;
                 var shortCutKey = void 0;
                 var isMacDev = window.navigator.platform.toLocaleLowerCase().includes('mac');
-                if (windowKeys["" + tooltipText]) {
+                if (windowKeys["" + tooltipText] && (!isNullOrUndefined(items[num].id) || !isNullOrUndefined(items[num].cssClass))) {
                     shortCutKey = isMacDev ? windowKeys["" + tooltipText].replace('Ctrl+', '⌘').replace('Shift+', '⇧').replace('Alt+', '⌥') : windowKeys["" + tooltipText];
                 }
                 else {

package/src/rich-text-editor/actions/dropdown-buttons.js

@@ -121,9 +121,6 @@ var DropDownButtons = /** @class */ (function () {
                             cssClass: classes.CLS_DROPDOWN_POPUP + ' ' + classes.CLS_DROPDOWN_ITEMS + ' ' + classes.CLS_FONT_NAME_TB_BTN,
                             itemName: 'FontName', items: fontItem, element: targetElement
                         });
-                        if (!isNullOrUndefined(_this.parent.fontFamily.default)) {
-                            _this.getEditNode().style.fontFamily = _this.parent.fontFamily.default;
-                        }
                         break;
                     }
                     case 'fontsize': {
@@ -147,9 +144,6 @@ var DropDownButtons = /** @class */ (function () {
                             cssClass: classes.CLS_DROPDOWN_POPUP + ' ' + classes.CLS_DROPDOWN_ITEMS + ' ' + classes.CLS_FONT_SIZE_TB_BTN,
                             itemName: 'FontSize', items: fontsize, element: targetElement
                         });
-                        if (!isNullOrUndefined(_this.parent.fontSize.default)) {
-                            _this.getEditNode().style.fontSize = _this.parent.fontSize.default;
-                        }
                         break;
                     }
                     case 'alignments':

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

@@ -160,7 +160,12 @@ var EnterKeyAction = /** @class */ (function () {
                             else {
                                 var nearBlockNode = void 0;
                                 if (isTableEnter && _this.parent.formatter.editorManager.domNode.isBlockNode(_this.startNode)) {
-                                    nearBlockNode = _this.startNode;
+                                    if (_this.range.startContainer.nodeName === '#text' && !isNOU(_this.range.startContainer.previousSibling) && _this.range.startContainer.previousSibling.nodeName === 'HR') {
+                                        nearBlockNode = _this.range.startContainer.nextSibling;
+                                    }
+                                    else {
+                                        nearBlockNode = _this.startNode;
+                                    }
                                 }
                                 else {
                                     nearBlockNode = _this.parent.formatter.editorManager.domNode.blockParentNode(_this.startNode);
@@ -208,7 +213,7 @@ var EnterKeyAction = /** @class */ (function () {
                                     }
                                     else {
                                         if ((nearBlockNode.textContent.trim().length !== 0 ||
-                                            nearBlockNode.childNodes[0].nodeName === 'IMG' ||
+                                            (!isNOU(nearBlockNode.childNodes[0]) && nearBlockNode.childNodes[0].nodeName === 'IMG') ||
                                             (nearBlockNode.textContent.trim() === '' && nearBlockNode.querySelectorAll('img, audio, video').length > 0))) {
                                             if ((_this.range.startOffset === _this.range.endOffset && _this.range.startOffset !== 0)) {
                                                 newElem = _this.parent.formatter.editorManager.nodeCutter.SplitNode(_this.range, nearBlockNode, false).cloneNode(true);
@@ -463,6 +468,7 @@ var EnterKeyAction = /** @class */ (function () {
                             e.args.preventDefault();
                         }
                         _this.triggerActionComplete(e, shiftKey_1);
+                        _this.parent.inputElement.dispatchEvent(new Event('input'));
                     }
                 });
             }

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

@@ -650,12 +650,13 @@ var HtmlEditor = /** @class */ (function () {
                         this.isImageDelete = false;
                     }
                     var brNode = this.deleteRangeElement.querySelector('BR');
+                    var brLastChildNode = this.deleteRangeElement.lastChild;
                     if (brNode && brNode.classList.contains('e-rte-image-remove-focus')) {
                         removeClass([brNode], ['e-rte-image-focus']);
                         return;
                     }
-                    else if (brNode) {
-                        detach(brNode);
+                    else if (brNode && brLastChildNode && brLastChildNode.nodeName === 'BR') {
+                        detach(brLastChildNode);
                         e.args.preventDefault();
                     }
                     if (!isNullOrUndefined(this.deleteRangeElement) && (this.deleteOldRangeElement.tagName !== 'OL' && this.deleteOldRangeElement.tagName !== 'UL')

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

@@ -115,12 +115,12 @@ var PasteCleanup = /** @class */ (function () {
         if (e.args && !isNOU(e.args.clipboardData)) {
             value = e.args.clipboardData.getData('text/html');
         }
-        this.parent.trigger(events.beforePasteCleanup, { value: value });
         if (e.args && value !== null && this.parent.editorMode === 'HTML') {
             var file = void 0;
             if (value.length === 0) {
                 var htmlRegex = new RegExp(/<\/[a-z][\s\S]*>/i);
                 value = e.args.clipboardData.getData('text/plain');
+                this.parent.trigger(events.beforePasteCleanup, { value: value });
                 this.isNotFromHtml = value !== '' ? true : false;
                 value = value.replace(/</g, '&lt;');
                 value = value.replace(/>/g, '&gt;');
@@ -153,6 +153,7 @@ var PasteCleanup = /** @class */ (function () {
                 }
             }
             else if (value.length > 0) {
+                this.parent.trigger(events.beforePasteCleanup, { value: value });
                 this.parent.formatter.editorManager.observer.notify(EVENTS.MS_WORD_CLEANUP, {
                     args: e.args,
                     text: e.text,

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

@@ -588,14 +588,14 @@ export interface RichTextEditorModel extends ComponentModel{
      * default: 'Paragraph',
      * width: '65px',
      * types: [
-     * { text: 'Paragraph' },
-     * { text: 'Code' },
-     * { text: 'Heading 1' },
-     * { text: 'Heading 2' },
-     * { text: 'Heading 3' },
-     * { text: 'Heading 4' },
-     * { text: 'Heading 5' },
-     * { text: 'Heading 6' }
+     * { text: 'Paragraph', value: 'P'},
+     * { text: 'Heading 1', value: 'H1' },
+     * { text: 'Heading 2', value: 'H2' },
+     * { text: 'Heading 3', value: 'H3' },
+     * { text: 'Heading 4', value: 'H4' },
+     * { text: 'Heading 5', value: 'H5' },
+     * { text: 'Heading 6', value: 'H6' },
+     * { text: 'Preformatted', value: 'Pre' },
      * ]
      * }
      */

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

@@ -757,14 +757,14 @@ export declare class RichTextEditor extends Component<HTMLElement> implements IN
      * default: 'Paragraph',
      * width: '65px',
      * types: [
-     * { text: 'Paragraph' },
-     * { text: 'Code' },
-     * { text: 'Heading 1' },
-     * { text: 'Heading 2' },
-     * { text: 'Heading 3' },
-     * { text: 'Heading 4' },
-     * { text: 'Heading 5' },
-     * { text: 'Heading 6' }
+     * { text: 'Paragraph', value: 'P'},
+     * { text: 'Heading 1', value: 'H1' },
+     * { text: 'Heading 2', value: 'H2' },
+     * { text: 'Heading 3', value: 'H3' },
+     * { text: 'Heading 4', value: 'H4' },
+     * { text: 'Heading 5', value: 'H5' },
+     * { text: 'Heading 6', value: 'H6' },
+     * { text: 'Preformatted', value: 'Pre' },
      * ]
      * }
      */

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

@@ -2428,7 +2428,6 @@ var RichTextEditor = /** @class */ (function (_super) {
                 var iframeElement = this.element.querySelector('#' + this.getID() + '_rte-view');
                 if (iframeElement) {
                     this.setAutoHeight(iframeElement);
-                    this.inputElement.style.overflow = 'hidden';
                 }
             }
         }
@@ -2453,9 +2452,14 @@ var RichTextEditor = /** @class */ (function (_super) {
     };
     RichTextEditor.prototype.setAutoHeight = function (element) {
         if (!isNOU(element)) {
-            element.style.height = 'auto';
-            element.style.height = (this.inputElement.scrollHeight + 16) + 'px';
-            element.style.overflow = 'hidden';
+            if (element.nodeName === 'TEXTAREA') {
+                element.style.height = 'auto';
+                element.style.height = (this.inputElement.scrollHeight + 16) + 'px';
+                element.style.overflow = 'hidden';
+            }
+            else if (element.nodeName === 'IFRAME') {
+                element.style.height = this.inputElement.parentElement.offsetHeight + 'px';
+            }
         }
     };
     RichTextEditor.prototype.wireEvents = function () {

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

@@ -8,7 +8,7 @@ import { IRenderer, IRichTextEditor } from '../base/interface';
 export declare class ContentRender implements IRenderer {
     protected contentPanel: Element;
     protected parent: IRichTextEditor;
-    protected editableElement: Element;
+    protected editableElement: HTMLElement;
     /**
      * Constructor for content renderer module
      *

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

@@ -1,4 +1,5 @@
 import { getEditValue } from '../base/util';
+import { isNullOrUndefined as isNOU } from '@syncfusion/ej2-base';
 /**
  * Content module is used to render Rich Text Editor content
  *
@@ -30,9 +31,15 @@ var ContentRender = /** @class */ (function () {
             id: this.parent.getID() + '_rte-edit-view',
             attrs: {
                 'contenteditable': 'true'
-            },
-            innerHTML: rteContent
+            }
         });
+        if (!isNOU(this.parent.fontFamily.default)) {
+            this.editableElement.style.fontFamily = this.parent.fontFamily.default;
+        }
+        if (!isNOU(this.parent.fontSize.default)) {
+            this.editableElement.style.fontSize = this.parent.fontSize.default;
+        }
+        this.editableElement.innerHTML = rteContent;
         div.appendChild(this.editableElement);
         this.setPanel(div);
         rteObj.rootContainer.appendChild(div);