@syncfusion/ej2-richtexteditor 27.1.51 → 27.1.52

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

@@ -1,4 +1,4 @@
-import { isNullOrUndefined, Browser, addClass, removeClass, selectAll as selectAll$1, createElement, detach, SanitizeHtmlHelper, extend, EventHandler, closest, getInstance, formatUnit, select, Ajax, Base, Property, Event, NotifyPropertyChanges, ChildProperty, KeyboardEvents as KeyboardEvents$1, setStyleAttribute, getUniqueID, append, debounce, Observer, prepend, attributes, getComponent, getEnumValue, Complex, Component, print, L10n, compile, Touch } from '@syncfusion/ej2-base';
+import { isNullOrUndefined, Browser, addClass, removeClass, selectAll as selectAll$1, createElement, detach, SanitizeHtmlHelper, extend, EventHandler, closest, getInstance, formatUnit, select, Ajax, Base, Property, Event as Event$1, NotifyPropertyChanges, ChildProperty, KeyboardEvents as KeyboardEvents$1, setStyleAttribute, getUniqueID, append, debounce, Observer, prepend, attributes, getComponent, getEnumValue, Complex, Component, print, L10n, compile, Touch } from '@syncfusion/ej2-base';
 import { Toolbar as Toolbar$1 } from '@syncfusion/ej2-navigations';
 import { DropDownButton } from '@syncfusion/ej2-splitbuttons';
 import { Tooltip, Popup, Dialog, isCollide, getScrollableParent } from '@syncfusion/ej2-popups';
@@ -3720,9 +3720,15 @@ class ContentRender {
             id: this.parent.getID() + '_rte-edit-view',
             attrs: {
                 'contenteditable': 'true'
-            },
-            innerHTML: rteContent
+            }
         });
+        if (!isNullOrUndefined(this.parent.fontFamily.default)) {
+            this.editableElement.style.fontFamily = this.parent.fontFamily.default;
+        }
+        if (!isNullOrUndefined(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);
@@ -6514,7 +6520,7 @@ class Link {
     // eslint-disable-next-line
     insertlink(e) {
         const linkEle = this.selfLink.dialogObj.element;
-        let linkUrl = linkEle.querySelector('.e-rte-linkurl').value;
+        let linkUrl = linkEle.querySelector('.e-rte-linkurl').value.trim();
         let linkText = linkEle.querySelector('.e-rte-linkText').value;
         let linkTitle;
         if (this.selfLink.parent.editorMode === 'HTML') {
@@ -7291,6 +7297,17 @@ class Image$1 {
             return value;
         }
     }
+    adjustDimensionsByAspectRatio(width, height, aspectRatio, isWidthPrimary) {
+        if (isWidthPrimary) {
+            height = Math.round(width / aspectRatio);
+            width = Math.round(height * aspectRatio);
+        }
+        else {
+            width = Math.round(height * aspectRatio);
+            height = Math.round(width / aspectRatio);
+        }
+        return { width, height };
+    }
     pixToPerc(expected, parentEle) {
         return expected / parseFloat(getComputedStyle(parentEle).width) * 100;
     }
@@ -7331,23 +7348,21 @@ class Image$1 {
             const diffY = (pageY - this.pageY);
             const currentWidth = this.imgEle.clientWidth;
             const currentHeight = this.imgEle.clientHeight;
-            let width = diffX * resizeFactor[0] + currentWidth;
-            let height = diffY * resizeFactor[1] + currentHeight;
-            width = (width < 16) ? 16 : width;
-            height = (height < 16) ? 16 : height;
-            if (Math.abs(diffX) > Math.abs(diffY)) {
-                height = Math.round(width / this.aspectRatio);
-                width = Math.round(height * this.aspectRatio);
-            }
-            else {
-                width = Math.round(height * this.aspectRatio);
-                height = Math.round(width / this.aspectRatio);
-            }
+            const width = diffX * resizeFactor[0] + currentWidth;
+            const height = diffY * resizeFactor[1] + currentHeight;
+            const dimensions = this.adjustDimensions(width, height, diffX, diffY, this.aspectRatio);
             this.pageX = pageX;
             this.pageY = pageY;
-            this.imgDupMouseMove(width + 'px', height + 'px', e);
+            this.imgDupMouseMove(dimensions.width + 'px', dimensions.height + 'px', e);
         }
     }
+    adjustDimensions(width, height, diffX, diffY, aspectRatio) {
+        width = (width < 16) ? 16 : width;
+        height = (height < 16) ? 16 : height;
+        const isWidthPrimary = Math.abs(diffX) > Math.abs(diffY);
+        const dimensions = this.adjustDimensionsByAspectRatio(width, height, aspectRatio, isWidthPrimary);
+        return dimensions;
+    }
     getResizeFactor(value) {
         return imageResizeFactor[value];
     }
@@ -11977,7 +11992,7 @@ __decorate([
     Property('keyup')
 ], KeyboardEvents.prototype, "eventName", void 0);
 __decorate([
-    Event()
+    Event$1()
 ], KeyboardEvents.prototype, "keyAction", void 0);
 KeyboardEvents = KeyboardEvents_1 = __decorate([
     NotifyPropertyChanges
@@ -14524,128 +14539,624 @@ class DialogRenderer {
     }
 }
 
+const IFRAME_EDITOR_STYLES = `
+@charset "UTF-8";
+
+html {
+    height: auto;
+}
+
+html, body {
+    margin: 0;
+}
+
+body {
+    color: #333;
+    word-wrap: break-word;
+}
+
+.e-content {
+    background: unset;
+    box-sizing: border-box;
+    min-height: 100px;
+    outline: 0 solid transparent;
+    padding: 16px;
+    position: relative;
+    overflow-x: auto;
+    font-weight: normal;
+    line-height: 1.5;
+    font-size: 14px;
+    text-align: inherit;
+    font-family: "Roboto", "Segoe UI", "GeezaPro", "DejaVu Serif", "sans-serif", "-apple-system", "BlinkMacSystemFont";
+}
+
+.e-content p {
+    margin: 0 0 10px;
+    margin-bottom: 10px;
+}
+
+.e-content h1 {
+    font-size: 2.857em;
+    font-weight: 600;
+    line-height: 1.2;
+    margin: 10px 0;
+}
+
+.e-content h2 {
+    font-size: 2.285em;
+    font-weight: 600;
+    line-height: 1.2;
+    margin: 10px 0;
+}
+
+.e-content h3 {
+    font-size: 2em;
+    font-weight: 600;
+    line-height: 1.2;
+    margin: 10px 0;
+}
+
+.e-content h4 {
+    font-size: 1.714em;
+    font-weight: 600;
+    line-height: 1.2;
+    margin: 10px 0;
+}
+
+.e-content h5 {
+    font-size: 1.428em;
+    font-weight: 600;
+    line-height: 1.2;
+    margin: 10px 0;
+}
+
+.e-content h6 {
+    font-size: 1.142em;
+    font-weight: 600;
+    line-height: 1.5;
+    margin: 10px 0;
+}
+
+.e-content blockquote {
+    margin: 10px 0;
+    padding-left: 12px;
+    border-left: 2px solid #5c5c5c;
+}
+
+.e-rtl.e-content blockquote {
+    padding-left: 0;
+    padding-right: 12px;
+}
+
+.e-content pre {
+    border: 0;
+    border-radius: 0;
+    color: #333;
+    font-size: inherit;
+    line-height: inherit;
+    margin: 0 0 10px;
+    overflow: visible;
+    padding: 0;
+    white-space: pre-wrap;
+    word-break: inherit;
+    word-wrap: break-word;
+}
+
+.e-content code {
+    background: #9d9d9d26;
+    color: #ed484c;
+}
+
+.e-content strong,
+.e-content b {
+    font-weight: bold;
+}
+
+.e-content a {
+    text-decoration: none;
+    user-select: auto;
+}
+
+.e-content a:hover {
+    text-decoration: underline;
+}
+
+.e-content li {
+    margin-bottom: 10px;
+}
+
+.e-content li ol,
+.e-content li ul {
+    margin-block-start: 10px;
+}
+
+.e-content ul {
+    list-style-type: disc;
+}
+
+.e-content ul ul,
+.e-content ol ul {
+    list-style-type: circle;
+}
+
+.e-content ul ul ul,
+.e-content ol ul ul,
+.e-content ul ol ul,
+.e-content ol ol ul {
+    list-style-type: square;
+}
+
+.e-rte-image,
+.e-rte-video {
+    border: 0;
+    cursor: pointer;
+    display: block;
+    float: none;
+    height: auto;
+    margin: 5px auto;
+    max-width: 100%;
+    position: relative;
+}
+
+.e-content p:last-child,
+.e-content pre:last-child,
+.e-content blockquote:last-child {
+    margin-bottom: 0;
+}
+
+.e-content h3 + h4,
+.e-content h4 + h5,
+.e-content h5 + h6 {
+    margin-top: 0.6em;
+}
+
+.e-content ul:last-child {
+    margin-bottom: 0;
+}
+
+.e-content table {
+    margin-bottom: 10px;
+    border-collapse: collapse;
+    empty-cells: show;
+}
+
+.e-content table.e-cell-select {
+    position: relative;
+}
+
+.e-content table.e-cell-select::after {
+    content: '';
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    border: 2px solid #4a90e2;
+    pointer-events: none;
+}
+
+table .e-cell-select {
+    border: 1px double #4a90e2 !important;
+}
+
+.e-content table.e-rte-table th {
+    background-color: #E0E0E0;
+}
+
+.e-rte-table td,
+.e-rte-table th {
+    border: 1px solid #BDBDBD;
+    height: 20px;
+    min-width: 20px;
+    padding: 2px 5px;
+    box-sizing: border-box;
+}
+
+.e-rte-table td.e-cell-select.e-multi-cells-select,
+.e-rte-table th.e-cell-select.e-multi-cells-select {
+    position: relative;
+}
+
+.e-rte-table td.e-cell-select.e-multi-cells-select::after,
+.e-rte-table th.e-cell-select.e-multi-cells-select::after {
+    background-color: rgba(13, 110, 253, 0.08);
+    content: "";
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    bottom: 0;
+    pointer-events: none;
+    right: 0;
+}
+
+table td.e-multi-cells-select ::selection,
+table th.e-multi-cells-select ::selection {
+    background-color: transparent;
+}
+
+td.e-multi-cells-select,
+th.e-multi-cells-select {
+    user-select: none !important;
+}
+
+.e-rte-table.e-dashed-border td,
+.e-rte-table.e-dashed-border th {
+    border-style: dashed;
+}
+
+.e-rte-table .e-alternate-border tbody tr:nth-child(2n) {
+    background-color: #F5F5F5;
+}
+
+.e-rte-audio {
+    border: 0;
+    cursor: pointer;
+    display: block;
+    float: none;
+    margin: 5px auto;
+    max-width: 100%;
+    position: relative;
+}
+
+.e-rte-image.e-imginline,
+.e-rte-audio.e-audio-inline,
+.e-rte-video.e-video-inline {
+    display: inline-block;
+    float: none;
+    margin-left: 5px;
+    margin-right: 5px;
+    max-width: calc(100% - (2 * 5px));
+    padding: 1px;
+    vertical-align: bottom;
+}
+
+.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;
+}
+
+.e-rte-image.e-imgright,
+.e-rte-video.e-video-right {
+    float: right;
+    margin: 0 auto;
+    margin-left: 5px;
+    text-align: right;
+}
+
+.e-rte-image.e-imgleft,
+.e-rte-video.e-video-left {
+    float: left;
+    margin: 0 auto;
+    margin-right: 5px;
+    text-align: left;
+}
+
+.e-img-caption {
+    display: inline-block;
+    float: none;
+    margin: 5px auto;
+    max-width: 100%;
+    position: relative;
+}
+
+.e-img-caption.e-caption-inline {
+    display: inline-block;
+    float: none;
+    margin: 5px auto;
+    margin-left: 5px;
+    margin-right: 5px;
+    max-width: calc(100% - (2 * 5px));
+    position: relative;
+    text-align: center;
+    vertical-align: bottom;
+}
+
+.e-rte-img-caption.e-imgcenter {
+    display: contents;
+    margin-left: auto;
+    margin-right: auto;
+}
+
+.e-rte-img-caption.e-imgright {
+    display: contents;
+    margin-left: auto;
+    margin-right: 0;
+}
+
+.e-rte-img-caption.e-imgleft {
+    display: contents;
+    margin-left: 0;
+    margin-right: auto;
+}
+
+.e-img-caption.e-rte-img-caption.e-imgbreak {
+    display: contents;
+}
+
+.e-img-inner {
+    box-sizing: border-box;
+    display: block;
+    font-size: 16px;
+    font-weight: initial;
+    margin: auto;
+    opacity: .9;
+    text-align: center;
+    width: 100%;
+}
+
+.e-img-wrap {
+    display: inline-block;
+    margin: auto;
+    padding: 0;
+    text-align: center;
+    width: 100%;
+}
+
+.e-imgleft,
+.e-video-left {
+    float: left;
+    margin: 0 5px 0 0;
+    text-align: left;
+}
+
+.e-imgright,
+.e-video-right {
+    float: right;
+    margin: 0 0 0 5px;
+    text-align: right;
+}
+
+.e-imgcenter,
+.e-video-center {
+    cursor: pointer;
+    display: block;
+    float: none;
+    height: auto;
+    margin: 5px auto;
+    max-width: 100%;
+    position: relative;
+}
+
+.e-control img:not(.e-resize) {
+    border: 2px solid transparent;
+    z-index: 1000
+}
+
+.e-imginline,
+.e-audio-inline,
+.e-video-inline {
+    display: inline-block;
+    float: none;
+    margin-left: 5px;
+    margin-right: 5px;
+    max-width: calc(100% - (2 * 5px));
+    vertical-align: bottom;
+}
+
+.e-imgbreak,
+.e-audio-break,
+.e-video-break {
+    border: 0;
+    cursor: pointer;
+    display: block;
+    float: none;
+    height: auto;
+    margin: 5px auto;
+    max-width: 100%;
+    position: relative;
+}
+
+.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;
+}
+
+img.e-img-focus::selection,
+audio.e-audio-focus::selection,
+.e-video-focus::selection {
+    background: transparent;
+    color: transparent;
+}
+
+span.e-rte-imageboxmark,
+span.e-rte-videoboxmark {
+    width: 10px;
+    height: 10px;
+    position: absolute;
+    display: block;
+    background: #4a90e2;
+    border: 1px solid #fff;
+    z-index: 1000;
+}
+
+.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;
+}
+
+.e-mob-rte span.e-rte-imageboxmark,
+.e-mob-rte span.e-rte-videoboxmark {
+    background: #fff;
+    border: 1px solid #4a90e2;
+    border-radius: 15px;
+    height: 20px;
+    width: 20px;
+}
+
+.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;
+}
+
+.e-content img.e-resize,
+.e-content video.e-resize {
+    z-index: 1000;
+}
+
+.e-img-caption .e-img-inner {
+    outline: 0;
+}
+
+.e-rte-img-caption.e-imgleft .e-img-inner {
+    float: left;
+    text-align: left;
+}
+
+.e-rte-img-caption.e-imgright .e-img-inner {
+    float: right;
+    text-align: right;
+}
+
+.e-rte-img-caption.e-imgleft .e-img-wrap,
+.e-rte-img-caption.e-imgright .e-img-wrap {
+    display: contents;
+}
+
+.e-img-caption a:focus-visible {
+    outline: none;
+}
+
+.e-rte-img-caption .e-rte-image.e-imgright {
+    margin-left: auto;
+    margin-right: 0;
+}
+
+.e-rte-img-caption .e-rte-image.e-imgleft {
+    margin: 0;
+}
+
+span.e-table-box {
+    cursor: nwse-resize;
+    display: block;
+    height: 10px;
+    position: absolute;
+    width: 10px;
+    background-color: #ffffff;
+    border: 1px solid #BDBDBD;
+}
+
+span.e-table-box.e-rmob {
+    height: 14px;
+    width: 14px;
+    background-color: #BDBDBD;
+    border: 1px solid #BDBDBD;
+}
+
+.e-row-resize,
+.e-column-resize {
+    background-color: transparent;
+    background-repeat: repeat;
+    bottom: 0;
+    cursor: col-resize;
+    height: 1px;
+    overflow: visible;
+    position: absolute;
+    width: 1px;
+}
+
+.e-row-resize {
+    cursor: row-resize;
+    height: 1px;
+}
+
+.e-table-rhelper {
+    cursor: col-resize;
+    opacity: .87;
+    position: absolute;
+}
+
+.e-table-rhelper.e-column-helper {
+    width: 1px;
+}
+
+.e-table-rhelper.e-row-helper {
+    height: 1px;
+}
+
+.e-reicon::before {
+    border-bottom: 6px solid transparent;
+    border-right: 6px solid;
+    border-top: 6px solid transparent;
+    content: '';
+    display: block;
+    height: 0;
+    position: absolute;
+    right: 4px;
+    top: 4px;
+    width: 20px;
+}
+
+.e-reicon::after {
+    border-bottom: 6px solid transparent;
+    border-left: 6px solid;
+    border-top: 6px solid transparent;
+    content: '';
+    display: block;
+    height: 0;
+    left: 4px;
+    position: absolute;
+    top: 4px;
+    width: 20px;
+    z-index: 3;
+}
+
+.e-row-helper.e-reicon::after {
+    top: 10px;
+    transform: rotate(90deg);
+}
+
+.e-row-helper.e-reicon::before {
+    left: 4px;
+    top: -20px;
+    transform: rotate(90deg);
+}
+
+
+.e-table-rhelper {
+    background-color: #4a90e2;
+}
+
+.e-rtl {
+    direction: rtl;
+}
+
+.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;
+}
+
+.e-resize-enabled,
+.e-count-enabled {
+    padding-bottom: 0px;
+}
+`;
+
 const IFRAMEHEADER = `
-<!DOCTYPE html> 
+    <!DOCTYPE html> 
     <html>
          <head>
             <meta charset='utf-8' /> 
-            <style>
-                @charset "UTF-8";
-                body {
-                    font-family: "Roboto", sans-serif;
-                    font-size: 14px;
-                }
-                html, body{height: 100%;margin: 0;}
-                body.e-cursor{cursor:default}
-                span.e-selected-node	{background-color: #939393;color: white;}
-                span.e-selected-node.e-highlight {background-color: #1d9dd8;}
-                body{color:#333;word-wrap:break-word;padding: 8px;box-sizing: border-box;}
-                .e-rte-image, .e-rte-video {border: 0;cursor: pointer;display:
-                    block;float: none;height: auto;margin: 5px auto;max-width: 100%;position: relative;}
-                .e-rte-audio {border: 0;cursor: pointer;display:
-                        block;float: none;margin: 5px auto;max-width: 100%;position: relative;}
-                .e-rte-image.e-imginline, .e-rte-audio.e-audio-inline, .e-rte-video.e-video-inline {display: inline-block;float: none;
-                    margin-left: 5px;margin-right: 5px;max-width: calc(100% - (2 * 5px));padding: 1px;vertical-align: bottom;}
-                .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;}
-                .e-rte-image.e-imgright, .e-rte-video.e-video-right { float: right; margin: 0 auto;margin-left: 5px;text-align: right;}
-                .e-rte-image.e-imgleft, .e-rte-video.e-video-left {float: left;margin: 0 auto;margin-right: 5px;text-align: left;}
-                .e-img-caption { display: inline-block; float: none; margin: 5px auto; max-width: 100%;position: relative;}
-                .e-img-caption.e-caption-inline {display: inline-block;float: none;
-                    margin: 5px auto;margin-left: 5px;margin-right: 5px;max-width: calc(100% - (2 * 5px));
-                    position: relativetext-align: center;vertical-align: bottom;}
-                .e-rte-img-caption.e-imgcenter {display: contents; margin-left: auto; margin-right: auto;}
-                .e-rte-img-caption.e-imgright {display: contents; margin-left: auto; margin-right: 0;}
-                .e-rte-img-caption.e-imgleft {display: contents;margin-left: 0;margin-right: auto;}
-                .e-img-caption.e-rte-img-caption.e-imgbreak {display: contents;}
-                .e-img-inner {box-sizing: border-box;display: block;font-size: 16px;font-weight: initial;
-                    margin: auto;opacity: .9;text-align: center;width: 100%;}
-                .e-img-wrap {display: inline-block;margin: auto;padding: 0;text-align: center;width: 100%;}
-                .e-imgleft, .e-video-left {float: left;margin: 0 5px 0 0;text-align: left;}
-                .e-imgright, .e-video-right {float: right;margin: 0 0 0 5px;text-align: right;}
-                .e-imgcenter, .e-video-center {cursor: pointer;display: block;float: none;height: auto;margin: 5px auto;max-width: 100%;position: relative;}
-                .e-control img:not(.e-resize) {border: 2px solid transparent; z-index: 1000}
-                .e-imginline , .e-audio-inline, .e-video-inline {display: inline-block;float: none;margin-left: 5px;margin-right: 5px;
-                    max-width: calc(100% - (2 * 5px));vertical-align: bottom;}
-                .e-imgbreak, .e-audio-break, .e-video-break {border: 0;cursor: pointer;
-                    display: block;float: none;height: auto;margin: 5px auto;max-width: 100%;position: relative;}
-                .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;}
-                img.e-img-focus::selection, audio.e-audio-focus::selection, .e-video-focus::selection { background: transparent;color: transparent;}
-                span.e-rte-imageboxmark, span.e-rte-videoboxmark {  width: 10px; height: 10px; position: absolute; display: block;
-                    background: #4a90e2; border: 1px solid #fff; z-index: 1000;}
-                .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; }
-                .e-mob-rte span.e-rte-imageboxmark, .e-mob-rte span.e-rte-videoboxmark { background: #fff; border: 1px solid #4a90e2;
-                    border-radius: 15px; height: 20px; width: 20px; }
-                .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; }
-                .e-rte-content .e-content img.e-resize, .e-rte-content .e-content video.e-resize { z-index: 1000; }
-                .e-rte-content { font-size: 14px; }
-                .e-content { font-weight: normal; line-height: 1.5; font-size: 1em; }
-                .e-img-caption .e-img-inner { outline: 0; }
-                .e-rte-img-caption.e-imgleft .e-img-inner { float: left; text-align: left; }
-                .e-rte-img-caption.e-imgright .e-img-inner { float: right; text-align: right; }
-                .e-rte-img-caption.e-imgleft .e-img-wrap, .e-rte-img-caption.e-imgright .e-img-wrap { display: contents; }
-                .e-img-caption a:focus-visible { outline: none; }
-                .e-rte-img-caption .e-rte-image.e-imgright { margin-left: auto; margin-right: 0; }
-                .e-rte-img-caption .e-rte-image.e-imgleft { margin: 0; }
-                body{box-sizing: border-box;min-height: 100px;outline: 0 solid transparent;
-                    overflow-x: auto;padding: 16px;position: relative;text-align: inherit;z-index: 2;}
-                p{margin: 0 0 10px;margin-bottom: 10px;}
-                code{ background: #9d9d9d26; color: #ed484c;}
-                li{margin-bottom: 10px;}
-                table{margin-bottom: 10px;}
-                h1{ font-size: 2.857em; font-weight: 600; line-height: 1.2; margin: 10px 0; }
-                h2{ font-size: 2.285em; font-weight: 600; line-height: 1.2; margin: 10px 0; }
-                h3{ font-size: 2em; font-weight: 600; line-height: 1.2; margin: 10px 0; }
-                h4{ font-size: 1.714em; font-weight: 600; line-height: 1.2; margin: 10px 0; }
-                h5{ font-size: 1.428em; font-weight: 600; line-height: 1.2; margin: 10px 0; }
-                h6{ font-size: 1.142em; line-height: 600; line-height: 1.5; margin: 10px 0; }
-                blockquote{margin: 10px 0;margin-left: 0;padding-left: 5px;border-left: solid 2px #5c5c5c;}
-                pre{background-color: inherit;border: 0;border-radius: 0;color: #333;
-                    font-size: inherit;line-height: inherit;margin: 0 0 10px;overflow: visible;padding: 0;
-                    white-space: pre-wrap;word-break: inherit;word-wrap: break-word;}
-                strong, b{font-weight: 700;}
-                a{text-decoration: none;user-select: auto;}
-                a:hover{text-decoration: underline;};
-                p:last-child, pre:last-child, blockquote:last-child{margin-bottom: 0;}
-                h3+h4, h4+h5, h5+h6{margin-top: 00.6em;}
-                ul:last-child{margin-bottom: 0;}
-                table { border-collapse: collapse; empty-cells: show;}
-                table td,table th {border: 1px solid #BDBDBD; height: 20px; padding: 2px 5px; vertical-align: middle;}
-                table.e-alternate-border tbody tr:nth-child(2n) {background-color: #F5F5F5;}
-                table th {background-color: #E0E0E0;}
-                table.e-dashed-border td,table.e-dashed-border th { border: 1px dashed #BDBDBD} 
-                table .e-cell-select {border: 1px double #4a90e2;}
-                table.e-cell-select {position: relative;}
-                table.e-cell-select::after { content: ""; position: absolute; top: 0; left: 0; right: 0; bottom: 0; border: 2px solid #4a90e2; pointer-events: none;}
-                table td.e-cell-select.e-multi-cells-select, table th.e-cell-select.e-multi-cells-select {border: 1px solid #dee2e6; position: relative; }
-                table td.e-cell-select.e-multi-cells-select::after, table th.e-cell-select.e-multi-cells-select::after {background-color: rgba(13, 110, 253, 0.08); content: "";
-                    position: absolute; top: 0; left: 0; width: 100%; height: 100%; bottom: 0; pointer-events: none; right: 0;}
-                span.e-table-box { cursor: nwse-resize; display: block; height: 10px; position: absolute; width: 10px; }
-                span.e-table-box.e-rmob {height: 14px;width: 14px;}
-                .e-row-resize, .e-column-resize { background-color: transparent; background-repeat: repeat;
-                    bottom: 0;cursor: col-resize;height: 1px;overflow: visible;position: absolute;width: 1px; }
-                .e-row-resize { cursor: row-resize; height: 1px;}
-                .e-table-rhelper { cursor: col-resize; opacity: .87;position: absolute;}
-                .e-table-rhelper.e-column-helper { width: 1px; }
-                .e-table-rhelper.e-row-helper {height: 1px;}
-                .e-reicon::before { border-bottom: 6px solid transparent; border-right: 6px solid;
-                    border-top: 6px solid transparent; content: ''; display: block; height: 0;
-                    position: absolute; right: 4px; top: 4px; width: 20px; }
-                .e-reicon::after { border-bottom: 6px solid transparent; border-left: 6px solid;
-                    border-top: 6px solid transparent; content: ''; display: block;
-                    height: 0; left: 4px; position: absolute; top: 4px; width: 20px; z-index: 3; }
-                .e-row-helper.e-reicon::after { top: 10px; transform: rotate(90deg); }
-                .e-row-helper.e-reicon::before { left: 4px; top: -20px; transform: rotate(90deg); }
-                span.e-table-box { background-color: #ffffff; border: 1px solid #BDBDBD; }
-                span.e-table-box.e-rbox-select { background-color: #BDBDBD; border: 1px solid #BDBDBD; }
-                .e-table-rhelper { background-color: #4a90e2;}
-                .e-rtl { direction: rtl; }
-                .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; }
-                li ol, li ul { margin-block-start: 10px;}
-                .e-resize-enabled, .e-count-enabled { padding-bottom: 0px; }
-                td.e-multi-cells-select ::selection, th.e-multi-cells-select ::selection { background-color: transparent; }
-                td.e-multi-cells-select, th.e-multi-cells-select { user-select: none !important; }
+            <style>` +
+    IFRAME_EDITOR_STYLES.replace(/[\n\t]/g, '') + `
             </style>
-        </head>`;
+        </head>
+`;
 /**
  * Content module is used to render Rich Text Editor content
  *
@@ -14662,7 +15173,7 @@ class IframeContentRender extends ContentRender {
     renderPanel() {
         const rteObj = this.parent;
         const rteContent = getEditValue(rteObj.value, rteObj);
-        const iFrameBodyContent = '<body spellcheck="false" autocorrect="off" contenteditable="true">' +
+        const iFrameBodyContent = '<body contenteditable="true">' +
             rteContent + '</body></html>';
         let iFrameContent = IFRAMEHEADER + iFrameBodyContent;
         const iframe = this.parent.createElement('iframe', {
@@ -14682,12 +15193,23 @@ class IframeContentRender extends ContentRender {
             iframe.setAttribute('sandbox', sandboxValues.trim());
         }
         rteObj.rootContainer.appendChild(iframe);
-        iframe.contentDocument.body.id = this.parent.getID() + '_rte-edit-view';
         iframe.contentDocument.body.setAttribute('aria-owns', this.parent.getID());
         iframe.contentDocument.open();
         iFrameContent = this.setThemeColor(iFrameContent, { color: '#333' });
         iframe.contentDocument.write(iFrameContent);
         iframe.contentDocument.close();
+        const body = iframe.contentDocument.body;
+        body.className = 'e-content';
+        if (this.parent.height === 'auto') {
+            body.style.overflowY = 'hidden';
+        }
+        if (!isNullOrUndefined(this.parent.fontFamily.default)) {
+            body.style.fontFamily = this.parent.fontFamily.default;
+        }
+        if (!isNullOrUndefined(this.parent.fontSize.default)) {
+            body.style.fontSize = this.parent.fontSize.default;
+        }
+        body.id = this.parent.getID() + '_rte-edit-view';
         if (rteObj.enableRtl) {
             this.contentPanel.contentDocument.body.setAttribute('class', 'e-rtl');
         }
@@ -15373,7 +15895,7 @@ class BaseToolbar {
                 const tooltipText = items[num].tooltipText;
                 let shortCutKey;
                 const 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 {
@@ -15545,9 +16067,6 @@ class DropDownButtons {
                             cssClass: CLS_DROPDOWN_POPUP + ' ' + CLS_DROPDOWN_ITEMS + ' ' + 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': {
@@ -15571,9 +16090,6 @@ class DropDownButtons {
                             cssClass: CLS_DROPDOWN_POPUP + ' ' + CLS_DROPDOWN_ITEMS + ' ' + 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':
@@ -22488,7 +23004,7 @@ class Lists {
                 }
                 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);
@@ -22797,7 +23313,7 @@ class Lists {
                 span.parentNode.replaceChild(fragment, span);
             });
         }
-        this.parent.editableElement.focus();
+        this.parent.editableElement.focus({ preventScroll: true });
         if (isIDevice$1()) {
             setEditFrameFocus(this.parent.editableElement, selector);
         }
@@ -23031,7 +23547,8 @@ class Lists {
                             parentNode.removeAttribute('style');
                         }
                     }
-                    const wrapper = '<' + e.enterAction + wrapperclass + this.domNode.attributes(element) + '></' + e.enterAction + '>';
+                    const wrapperTag = isNullOrUndefined(e.enterAction) ? DEFAULT_TAG : e.enterAction;
+                    const wrapper = '<' + wrapperTag + wrapperclass + this.domNode.attributes(element) + '></' + wrapperTag + '>';
                     if (e.enterAction !== 'BR') {
                         this.domNode.wrapInner(element, this.domNode.parseHTMLFragment(wrapper));
                     }
@@ -24167,7 +24684,9 @@ class InsertHtml {
                     fragment.appendChild(node.firstChild);
                 }
                 if (isSingleNode) {
-                    preNode.parentNode.replaceChild(fragment, preNode);
+                    range.deleteContents();
+                    this.removeEmptyElements(editNode, true);
+                    range.insertNode(fragment);
                 }
                 else {
                     const startContainerParent = editNode === range.startContainer ?
@@ -24179,6 +24698,7 @@ class InsertHtml {
                     range.setEnd(startContainerParent, startIndex);
                     if (!isNullOrUndefined(lasNode) && lasNode !== editNode) {
                         detach(lasNode);
+                        this.removeEmptyElements(editNode, true);
                     }
                     // eslint-disable-next-line
                     !isNullOrUndefined(sibNode) ? (sibNode.parentNode === editNode ? sibNode.appendChild(fragment) : sibNode.parentNode.appendChild(fragment)) : range.insertNode(fragment);
@@ -24369,10 +24889,10 @@ class InsertHtml {
                 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')) {
                 let liNode;
                 while (node.firstElementChild.lastElementChild && node.firstElementChild.lastElementChild.tagName === 'LI') {
@@ -24383,7 +24903,7 @@ class InsertHtml {
                     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') {
                 const tempSpan = createElement('span', { className: 'tempSpan' });
                 range.insertNode(tempSpan);
                 tempSpan.parentNode.replaceChild(node, tempSpan);
@@ -24466,17 +24986,19 @@ class InsertHtml {
         innerElement = innerElement.replace(/<!--[\s\S]*?-->/g, '');
         elm.innerHTML = innerElement;
     }
-    static findDetachEmptyElem(element) {
+    static findDetachEmptyElem(element, ignoreBlockNodes = false) {
         let removableElement;
         if (!isNullOrUndefined(element.parentElement)) {
             const 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' &&
                 isNullOrUndefined(element.parentElement.querySelector('img')) && element.parentElement.nodeName !== 'TD' && element.parentElement.nodeName !== 'TH') {
-                removableElement = this.findDetachEmptyElem(element.parentElement);
+                removableElement = ignoreBlockNodes && BLOCK_TAGS.indexOf(element.parentElement.tagName.toLowerCase()) !== -1 ?
+                    element : this.findDetachEmptyElem(element.parentElement, ignoreBlockNodes);
             }
             else {
-                removableElement = element;
+                removableElement = ignoreBlockNodes && BLOCK_TAGS.indexOf(element.tagName.toLowerCase()) !== -1 ? null :
+                    element;
             }
         }
         else {
@@ -24484,7 +25006,7 @@ class InsertHtml {
         }
         return removableElement;
     }
-    static removeEmptyElements(element) {
+    static removeEmptyElements(element, ignoreBlockNodes = false) {
         const emptyElements = element.querySelectorAll(':empty');
         const nonSvgEmptyElements = Array.from(emptyElements).filter((element) => {
             // Check if the element is an SVG element or an ancestor of an SVG element
@@ -24497,7 +25019,7 @@ class InsertHtml {
                     nonSvgEmptyElements[i].style.borderBottom === '' ? true : false;
             }
             if (SELF_CLOSING_TAGS.indexOf(nonSvgEmptyElements[i].tagName.toLowerCase()) < 0 && lineWithDiv) {
-                const detachableElement = this.findDetachEmptyElem(nonSvgEmptyElements[i]);
+                const detachableElement = this.findDetachEmptyElem(nonSvgEmptyElements[i], ignoreBlockNodes);
                 if (!isNullOrUndefined(detachableElement)) {
                     detach(detachableElement);
                 }
@@ -25003,7 +25525,7 @@ class Alignments {
                     selector: e.selector
                 });
             }
-            this.parent.editableElement.focus();
+            this.parent.editableElement.focus({ preventScroll: true });
             save = this.parent.domNode.saveMarker(save);
             if (isIDevice$1()) {
                 setEditFrameFocus(this.parent.editableElement, e.selector);
@@ -25121,7 +25643,7 @@ class Indents {
                 /* eslint-enable */
             }
         }
-        editEle.focus();
+        editEle.focus({ preventScroll: true });
         if (isIDevice$1()) {
             setEditFrameFocus(editEle, e.selector);
         }
@@ -29492,6 +30014,11 @@ class MsWordPaste {
                                 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);
                         }
@@ -35718,7 +36245,7 @@ __decorate$2([
 class FileManagerSettings extends ChildProperty {
 }
 __decorate$2([
-    Event()
+    Event$1()
 ], FileManagerSettings.prototype, "beforeSend", void 0);
 __decorate$2([
     Complex({ getImageUrl: null, url: null, uploadUrl: null }, AjaxSettings)
@@ -36484,6 +37011,7 @@ class EnterKeyAction {
                             e.args.preventDefault();
                         }
                         this.triggerActionComplete(e, shiftKey);
+                        this.parent.inputElement.dispatchEvent(new Event('input'));
                     }
                 });
             }
@@ -39055,7 +39583,6 @@ let RichTextEditor = class RichTextEditor extends Component {
                 const iframeElement = this.element.querySelector('#' + this.getID() + '_rte-view');
                 if (iframeElement) {
                     this.setAutoHeight(iframeElement);
-                    this.inputElement.style.overflow = 'hidden';
                 }
             }
         }
@@ -39080,9 +39607,14 @@ let RichTextEditor = class RichTextEditor extends Component {
     }
     setAutoHeight(element) {
         if (!isNullOrUndefined(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';
+            }
         }
     }
     wireEvents() {
@@ -39468,124 +40000,124 @@ __decorate$5([
     Property(10000)
 ], RichTextEditor.prototype, "saveInterval", void 0);
 __decorate$5([
-    Event()
+    Event$1()
 ], RichTextEditor.prototype, "actionBegin", void 0);
 __decorate$5([
-    Event()
+    Event$1()
 ], RichTextEditor.prototype, "actionComplete", void 0);
 __decorate$5([
-    Event()
+    Event$1()
 ], RichTextEditor.prototype, "beforeDialogOpen", void 0);
 __decorate$5([
-    Event()
+    Event$1()
 ], RichTextEditor.prototype, "dialogOpen", void 0);
 __decorate$5([
-    Event()
+    Event$1()
 ], RichTextEditor.prototype, "beforeDialogClose", void 0);
 __decorate$5([
-    Event()
+    Event$1()
 ], RichTextEditor.prototype, "dialogClose", void 0);
 __decorate$5([
-    Event()
+    Event$1()
 ], RichTextEditor.prototype, "beforeQuickToolbarOpen", void 0);
 __decorate$5([
-    Event()
+    Event$1()
 ], RichTextEditor.prototype, "quickToolbarOpen", void 0);
 __decorate$5([
-    Event()
+    Event$1()
 ], RichTextEditor.prototype, "quickToolbarClose", void 0);
 __decorate$5([
-    Event()
+    Event$1()
 ], RichTextEditor.prototype, "toolbarStatusUpdate", void 0);
 __decorate$5([
-    Event()
+    Event$1()
 ], RichTextEditor.prototype, "updatedToolbarStatus", void 0);
 __decorate$5([
-    Event()
+    Event$1()
 ], RichTextEditor.prototype, "imageSelected", void 0);
 __decorate$5([
-    Event()
+    Event$1()
 ], RichTextEditor.prototype, "beforeImageUpload", void 0);
 __decorate$5([
-    Event()
+    Event$1()
 ], RichTextEditor.prototype, "imageUploading", void 0);
 __decorate$5([
-    Event()
+    Event$1()
 ], RichTextEditor.prototype, "imageUploadSuccess", void 0);
 __decorate$5([
-    Event()
+    Event$1()
 ], RichTextEditor.prototype, "imageUploadFailed", void 0);
 __decorate$5([
-    Event()
+    Event$1()
 ], RichTextEditor.prototype, "imageRemoving", void 0);
 __decorate$5([
-    Event()
+    Event$1()
 ], RichTextEditor.prototype, "afterImageDelete", void 0);
 __decorate$5([
-    Event()
+    Event$1()
 ], RichTextEditor.prototype, "fileSelected", void 0);
 __decorate$5([
-    Event()
+    Event$1()
 ], RichTextEditor.prototype, "beforeFileUpload", void 0);
 __decorate$5([
-    Event()
+    Event$1()
 ], RichTextEditor.prototype, "fileUploading", void 0);
 __decorate$5([
-    Event()
+    Event$1()
 ], RichTextEditor.prototype, "fileUploadSuccess", void 0);
 __decorate$5([
-    Event()
+    Event$1()
 ], RichTextEditor.prototype, "fileUploadFailed", void 0);
 __decorate$5([
-    Event()
+    Event$1()
 ], RichTextEditor.prototype, "fileRemoving", void 0);
 __decorate$5([
-    Event()
+    Event$1()
 ], RichTextEditor.prototype, "afterMediaDelete", void 0);
 __decorate$5([
-    Event()
+    Event$1()
 ], RichTextEditor.prototype, "created", void 0);
 __decorate$5([
-    Event()
+    Event$1()
 ], RichTextEditor.prototype, "destroyed", void 0);
 __decorate$5([
-    Event()
+    Event$1()
 ], RichTextEditor.prototype, "beforeSanitizeHtml", void 0);
 __decorate$5([
-    Event()
+    Event$1()
 ], RichTextEditor.prototype, "blur", void 0);
 __decorate$5([
-    Event()
+    Event$1()
 ], RichTextEditor.prototype, "toolbarClick", void 0);
 __decorate$5([
-    Event()
+    Event$1()
 ], RichTextEditor.prototype, "focus", void 0);
 __decorate$5([
-    Event()
+    Event$1()
 ], RichTextEditor.prototype, "change", void 0);
 __decorate$5([
-    Event()
+    Event$1()
 ], RichTextEditor.prototype, "resizing", void 0);
 __decorate$5([
-    Event()
+    Event$1()
 ], RichTextEditor.prototype, "resizeStart", void 0);
 __decorate$5([
-    Event()
+    Event$1()
 ], RichTextEditor.prototype, "resizeStop", void 0);
 __decorate$5([
-    Event()
+    Event$1()
 ], RichTextEditor.prototype, "beforePasteCleanup", void 0);
 __decorate$5([
-    Event()
+    Event$1()
 ], RichTextEditor.prototype, "afterPasteCleanup", void 0);
 __decorate$5([
-    Event()
+    Event$1()
 ], RichTextEditor.prototype, "beforeImageDrop", void 0);
 __decorate$5([
     Property(null)
 ], RichTextEditor.prototype, "formatter", void 0);
 __decorate$5([
-    Event()
+    Event$1()
 ], RichTextEditor.prototype, "slashMenuItemSelect", void 0);
 RichTextEditor = __decorate$5([
     NotifyPropertyChanges