@syncfusion/ej2-richtexteditor 23.2.6 → 23.2.7-52849

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

@@ -748,18 +748,18 @@ const hidePopup = 'hidePopup';
  * @hidden
  * @deprecated
  */
-const blockEmptyNodes = `address:empty, article:empty, aside:empty, blockquote:empty,
- details:empty, dd:empty, div:empty, dl:empty, dt:empty, fieldset:empty, footer:empty,form:empty, h1:empty,
- h2:empty, h3:empty, h4:empty, h5:empty, h6:empty, header:empty, hgroup:empty, li:empty, main:empty, nav:empty,
+const blockEmptyNodes = `address:empty, article:empty, aside:empty, blockquote:empty,
+ details:empty, dd:empty, div:empty, dl:empty, dt:empty, fieldset:empty, footer:empty,form:empty, h1:empty,
+ h2:empty, h3:empty, h4:empty, h5:empty, h6:empty, header:empty, hgroup:empty, li:empty, main:empty, nav:empty,
  noscript:empty, output:empty, p:empty, pre:empty, section:empty, td:empty, th:empty`;
 /**
  * @hidden
  * @deprecated
  */
-const inlineEmptyNodes = `a:empty, abbr:empty, acronym:empty, b:empty, bdi:empty, bdo:empty, big:empty, button:empty,
-canvas:empty, cite:empty, code:empty, data:empty, datalist:empty, del:empty, dfn:empty, em:empty, font:empty, i:empty, iframe:empty,
-ins:empty, kbd:empty, label:empty, map:empty, mark:empty, meter:empty, noscript:empty, object:empty, output:empty, picture:empty, progress:empty,
-q:empty, ruby:empty, s:empty, samp:empty, script:empty, select:empty, slot:empty, small:empty, span:empty, strong:empty, strike:empty, sub:empty, sup:empty, svg:empty,
+const inlineEmptyNodes = `a:empty, abbr:empty, acronym:empty, b:empty, bdi:empty, bdo:empty, big:empty, button:empty,
+canvas:empty, cite:empty, code:empty, data:empty, datalist:empty, del:empty, dfn:empty, em:empty, font:empty, i:empty, iframe:empty,
+ins:empty, kbd:empty, label:empty, map:empty, mark:empty, meter:empty, noscript:empty, object:empty, output:empty, picture:empty, progress:empty,
+q:empty, ruby:empty, s:empty, samp:empty, script:empty, select:empty, slot:empty, small:empty, span:empty, strong:empty, strike:empty, sub:empty, sup:empty, svg:empty,
 template:empty, textarea:empty, time:empty, u:empty, tt:empty, var:empty, wbr:empty`;
 
 /**
@@ -3345,7 +3345,7 @@ class ToolbarRenderer {
     }
     destroyTooltip() {
         if (!isNullOrUndefined(document.querySelector('.e-tooltip-wrap')) && !isNullOrUndefined(document.querySelector(' [data-tooltip-id]'))) {
-            const tooltipTargetEle = document.querySelector('#' + (this.parent.element).id + ' [data-tooltip-id]');
+            const tooltipTargetEle = this.parent.element.querySelector('[data-tooltip-id]');
             const event = new MouseEvent('mouseleave', { bubbles: true, cancelable: true });
             tooltipTargetEle.dispatchEvent(event);
         }
@@ -3505,17 +3505,86 @@ class ToolbarRenderer {
                     return;
                 }
                 // eslint-disable-next-line
-                for (let index = 0; index < args.element.childNodes.length; index++) {
-                    const divNode = this.parent.createElement('div');
-                    divNode.innerHTML = dropDown.content.trim();
-                    if (divNode.textContent.trim() !== ''
-                        && args.element.childNodes[index].textContent.trim() === divNode.textContent.trim()) {
-                        if (!args.element.childNodes[index].classList.contains('e-active')) {
-                            addClass([args.element.childNodes[index]], 'e-active');
+                // Table styles dropdown preselect
+                if (proxy.parent.editorMode !== 'Markdown') {
+                    const startNode = proxy.parent.getRange().startContainer.parentElement;
+                    const tableEle = startNode.closest('table');
+                    const trow = startNode.closest('tr');
+                    if (!isNullOrUndefined(tableEle) && tableEle.classList.contains('e-dashed-border')) {
+                        for (let index = 0; index < args.element.childNodes.length; index++) {
+                            if (args.element.childNodes[index].classList.contains('e-dashed-borders')) {
+                                addClass([args.element.childNodes[index]], 'e-active');
+                            }
                         }
                     }
-                    else {
-                        removeClass([args.element.childNodes[index]], 'e-active');
+                    else if (!isNullOrUndefined(tableEle) && !tableEle.classList.contains('e-dashed-border') && tableEle.classList.contains('e-alternate-rows') && window.getComputedStyle(trow).backgroundColor !== '') {
+                        for (let index = 0; index < args.element.childNodes.length; index++) {
+                            if (args.element.childNodes[index].classList.contains('e-alternate-rows')) {
+                                addClass([args.element.childNodes[index]], 'e-active');
+                            }
+                        }
+                    }
+                    //Alignments preselect
+                    let alignEle = proxy.parent.getRange().startContainer;
+                    while (alignEle !== proxy.parent.element.querySelector('.e-content') && !isNullOrUndefined(alignEle.parentElement)) {
+                        if (alignEle.nodeName === '#text') {
+                            alignEle = alignEle.parentElement;
+                        }
+                        const alignStyle = window.getComputedStyle(alignEle).textAlign;
+                        if (args.items[0].command === 'Alignments') {
+                            if ((args.items[0].text === 'Align Left' && (alignStyle === 'left') || alignStyle === 'start')) {
+                                addClass([args.element.childNodes[0]], 'e-active');
+                                break;
+                            }
+                            else if (args.items[1].text === 'Align Center' && alignStyle === 'center') {
+                                addClass([args.element.childNodes[1]], 'e-active');
+                                break;
+                            }
+                            else if (args.items[2].text === 'Align Right' && alignStyle === 'right') {
+                                addClass([args.element.childNodes[2]], 'e-active');
+                                break;
+                            }
+                            else if (args.items[3].text === 'Align Justify' && alignStyle === 'justify') {
+                                addClass([args.element.childNodes[3]], 'e-active');
+                                break;
+                            }
+                        }
+                        alignEle = alignEle.parentElement;
+                    }
+                    //image preselect
+                    const imageEle = startNode.closest('img') ? startNode.closest('img') : startNode.querySelector('img');
+                    if (args.items[0].command === 'Images') {
+                        if (!isNullOrUndefined(imageEle)) {
+                            let index;
+                            if (imageEle.classList.contains('e-imgleft') || imageEle.classList.contains('e-imginline')) {
+                                index = 0;
+                            }
+                            else if (imageEle.classList.contains('e-imgcenter') || imageEle.classList.contains('e-imgbreak')) {
+                                index = 1;
+                            }
+                            else if (imageEle.classList.contains('e-imgright')) {
+                                index = 2;
+                            }
+                            if (!isNullOrUndefined(args.element.childNodes[index])) {
+                                addClass([args.element.childNodes[index]], 'e-active');
+                            }
+                        }
+                    }
+                    //Formats preselect
+                    if (args.items[0].command === 'Formats') {
+                        for (let index = 0; index < args.element.childNodes.length; index++) {
+                            const divNode = this.parent.createElement('div');
+                            divNode.innerHTML = dropDown.content.trim();
+                            if (divNode.textContent.trim() !== ''
+                                && args.element.childNodes[index].textContent.trim() === divNode.textContent.trim()) {
+                                if (!args.element.childNodes[index].classList.contains('e-active')) {
+                                    addClass([args.element.childNodes[index]], 'e-active');
+                                }
+                            }
+                            else {
+                                removeClass([args.element.childNodes[index]], 'e-active');
+                            }
+                        }
                     }
                 }
                 proxy.parent.notify(beforeDropDownOpen, args);
@@ -5508,12 +5577,12 @@ class Toolbar$2 {
     }
 }
 
-var __decorate = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
-    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
-    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
-    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
-    return c > 3 && r && Object.defineProperty(target, key, r), r;
-};
+var __decorate = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
 var KeyboardEvents_1;
 const keyCode = {
     'backspace': 8,
@@ -13586,7 +13655,9 @@ class InsertHtml {
     static findDetachEmptyElem(element) {
         let removableElement;
         if (!isNullOrUndefined(element.parentElement)) {
-            if (element.parentElement.textContent.trim() === '' && element.parentElement.contentEditable !== 'true' &&
+            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'))) {
                 removableElement = this.findDetachEmptyElem(element.parentElement);
             }
@@ -17813,7 +17884,9 @@ class MsWordPaste {
                     isNullOrUndefined(allElements[i].nextElementSibling)))) {
                 const detachableElement = this.findDetachElem(allElements[i]);
                 const brElement = createElement('br');
-                if (!isNullOrUndefined(detachableElement.parentElement)) {
+                const hasNbsp = detachableElement.textContent.length > 0 && detachableElement.textContent.match(/\u00a0/g)
+                    && detachableElement.textContent.match(/\u00a0/g).length > 0;
+                if (!hasNbsp && !isNullOrUndefined(detachableElement.parentElement)) {
                     detachableElement.parentElement.insertBefore(brElement, detachableElement);
                     detach(detachableElement);
                 }
@@ -17852,7 +17925,9 @@ class MsWordPaste {
     findDetachEmptyElem(element) {
         let removableElement;
         if (!isNullOrUndefined(element.parentElement)) {
-            if (element.parentElement.textContent.trim() === '' &&
+            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.getAttribute('id') !== 'MSWord-Content' &&
                 !(this.hasParentWithClass(element, 'MsoListParagraph')) &&
                 isNullOrUndefined(element.parentElement.querySelector('img'))) {
@@ -19835,103 +19910,103 @@ class ContentRender {
     }
 }
 
-const IFRAMEHEADER = `
-<!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-audio, .e-rte-video  {border: 0;cursor: pointer;display:
-                    block;float: none;height: auto;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;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-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 {  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 { background: #4a90e2; border: 1px solid #fff; }
-                .e-mob-rte span.e-rte-imageboxmark { background: #fff; border: 1px solid #4a90e2;
-                    border-radius: 15px; height: 20px; width: 20px; }
-                .e-mob-rte.e-mob-span span.e-rte-imageboxmark { 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-img-caption .e-img-inner { outline: 0; }
-                .e-img-caption a:focus-visible { outline: none; }
-                .e-img-caption .e-rte-image.e-imgright, .e-img-caption .e-rte-image.e-imgleft { float: none; 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;}
-                li{margin-bottom: 10px;}
-                h1{font-size: 2.17em;font-weight: 400;line-height: 1;margin: 10px 0;}
-                h2{font-size: 1.74em;font-weight: 400;margin: 10px 0;}
-                h3{font-size: 1.31em;font-weight: 400;margin: 10px 0;}
-                h4{font-size: 16px;font-weight: 400;line-height: 1.5;margin: 0;}
-                h5{font-size: 00.8em;font-weight: 400;margin: 0;}
-                h6{font-size: 00.65em;font-weight: 400;margin: 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;}
-                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; }
-            </style>
+const IFRAMEHEADER = `
+<!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-audio, .e-rte-video  {border: 0;cursor: pointer;display:
+                    block;float: none;height: auto;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;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-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 {  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 { background: #4a90e2; border: 1px solid #fff; }
+                .e-mob-rte span.e-rte-imageboxmark { background: #fff; border: 1px solid #4a90e2;
+                    border-radius: 15px; height: 20px; width: 20px; }
+                .e-mob-rte.e-mob-span span.e-rte-imageboxmark { 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-img-caption .e-img-inner { outline: 0; }
+                .e-img-caption a:focus-visible { outline: none; }
+                .e-img-caption .e-rte-image.e-imgright, .e-img-caption .e-rte-image.e-imgleft { float: none; 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;}
+                li{margin-bottom: 10px;}
+                h1{font-size: 2.17em;font-weight: 400;line-height: 1;margin: 10px 0;}
+                h2{font-size: 1.74em;font-weight: 400;margin: 10px 0;}
+                h3{font-size: 1.31em;font-weight: 400;margin: 10px 0;}
+                h4{font-size: 16px;font-weight: 400;line-height: 1.5;margin: 0;}
+                h5{font-size: 00.8em;font-weight: 400;margin: 0;}
+                h6{font-size: 00.65em;font-weight: 400;margin: 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;}
+                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; }
+            </style>
         </head>`;
 /**
  * Content module is used to render Rich Text Editor content
@@ -20586,8 +20661,13 @@ class HtmlEditor {
                         this.parent.formatter.editorManager.nodeSelection.setCursorPoint(this.parent.contentModule.getDocument(), this.deleteRangeElement, this.deleteRangeElement.childNodes.length);
                         this.isImageDelete = false;
                     }
-                    if (this.deleteRangeElement.querySelector('BR')) {
-                        detach(this.deleteRangeElement.querySelector('BR'));
+                    const brNode = this.deleteRangeElement.querySelector('BR');
+                    if (brNode && brNode.classList.contains('e-rte-image-remove-focus')) {
+                        removeClass([brNode], ['e-rte-image-focus']);
+                        return;
+                    }
+                    else if (brNode) {
+                        detach(brNode);
                     }
                     if (!isNullOrUndefined(this.deleteRangeElement) && (this.deleteOldRangeElement.tagName !== 'OL' && this.deleteOldRangeElement.tagName !== 'UL')
                         && this.deleteOldRangeElement !== this.deleteRangeElement) {
@@ -21185,7 +21265,7 @@ class PasteCleanup {
             }
             else {
                 const contentWithSpace = this.makeSpace(enterSplitText[i]);
-                contentInnerElem += '<p>' + contentWithSpace.trim() + '</p>';
+                contentInnerElem += (i === 0 ? '<span>' : '<p>') + contentWithSpace.trim() + (i === 0 ? '</span>' : '</p>');
             }
         }
         return contentInnerElem;
@@ -21265,7 +21345,7 @@ class PasteCleanup {
         const popupEle = this.parent.createElement('div');
         this.parent.element.appendChild(popupEle);
         const contentEle = this.parent.createElement('input', {
-            id: this.parent.element.id + '_upload', attrs: { type: 'File', name: 'UploadFiles' }
+            id: this.parent.getID() + '_upload', attrs: { type: 'File', name: 'UploadFiles' }
         });
         const offsetY = this.parent.iframeSettings.enable ? -50 : -90;
         this.popupObj = new Popup(popupEle, {
@@ -21885,7 +21965,9 @@ class PasteCleanup {
     findDetachEmptyElem(element) {
         let removableElement;
         if (!isNullOrUndefined(element.parentElement)) {
-            if (element.parentElement.textContent.trim() === '' &&
+            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.getAttribute('class') !== 'pasteContent') {
                 removableElement = this.findDetachEmptyElem(element.parentElement);
             }
@@ -24916,13 +24998,22 @@ class Image$1 {
                             }
                         }
                     }
-                    else if ((range.startContainer.nodeType === 1 &&
-                        range.startContainer.querySelector('.' + CLS_CAPTION + '.' + CLS_CAPINLINE))) {
-                        detach(range.startContainer.querySelector('.' + CLS_CAPTION + '.' + CLS_CAPINLINE));
-                    }
-                    else if (range.startContainer.nodeType === 1 &&
-                        range.startContainer.querySelector('.' + CLS_CAPTION + '.' + CLS_IMGBREAK)) {
-                        detach(range.startContainer.querySelector('.' + CLS_CAPTION + '.' + CLS_IMGBREAK));
+                    else if (range.startContainer.nodeType === 1) {
+                        if (range.startContainer.querySelector('.' + CLS_CAPTION + '.' + CLS_CAPINLINE)) {
+                            detach(range.startContainer.querySelector('.' + CLS_CAPTION + '.' + CLS_CAPINLINE));
+                        }
+                        else if (range.startContainer.querySelector('.' + CLS_CAPTION + '.' + CLS_IMGBREAK)) {
+                            detach(range.startContainer.querySelector('.' + CLS_CAPTION + '.' + CLS_IMGBREAK));
+                        }
+                        else if (range.startContainer.classList.contains('e-img-wrap') && closest(range.startContainer, '.' + CLS_CAPTION)) {
+                            const parentElem = range.startContainer.parentElement.parentElement;
+                            detach(closest(range.startContainer, '.' + CLS_CAPTION));
+                            if (parentElem && parentElem.textContent.trim() === '') {
+                                const brElem = this.parent.createElement('br');
+                                brElem.classList.add('e-rte-image-remove-focus');
+                                parentElem.appendChild(brElem);
+                            }
+                        }
                     }
                 }
                 break;
@@ -25222,7 +25313,6 @@ class Image$1 {
                 width: '290px',
                 header: this.parent.localeObj.getConstant('imageInsertLinkHeader'),
                 content: linkWrap,
-                position: { X: 'center', Y: 'center' },
                 buttons: [{
                         // eslint-disable-next-line
                         click: (e) => {
@@ -25271,7 +25361,7 @@ class Image$1 {
                 alt: inputAlt
             };
             this.dialogObj.setProperties({
-                height: 'inherit', width: '290px', header: altHeader, content: altWrap, position: { X: 'center', Y: 'center' },
+                height: 'inherit', width: '290px', header: altHeader, content: altWrap,
                 buttons: [{
                         // eslint-disable-next-line
                         click: (e) => {
@@ -25497,7 +25587,7 @@ class Image$1 {
             const dialogContent = this.imgsizeInput(e);
             const selectObj = { args: e.args, selfImage: this, selection: e.selection, selectNode: e.selectNode };
             this.dialogObj.setProperties({
-                height: (Browser.isDevice) ? '300px' : 'inherit', width: '290px', header: imgSizeHeader, content: dialogContent, position: { X: 'center', Y: 'center' },
+                height: (Browser.isDevice) ? '300px' : 'inherit', width: '290px', header: imgSizeHeader, content: dialogContent,
                 buttons: [{
                         // eslint-disable-next-line
                         click: (e) => {
@@ -25562,7 +25652,6 @@ class Image$1 {
             enableRtl: this.parent.enableRtl,
             locale: this.parent.locale,
             showCloseIcon: true, closeOnEscape: true, width: (Browser.isDevice) ? '290px' : '340px',
-            position: { X: 'center', Y: (Browser.isDevice) ? 'center' : 'top' },
             isModal: Browser.isDevice,
             buttons: [{
                     click: this.insertImageUrl.bind(selectObj),
@@ -27043,7 +27132,6 @@ class Audio {
             enableRtl: this.parent.enableRtl,
             locale: this.parent.locale,
             showCloseIcon: true, closeOnEscape: true, width: (Browser.isDevice) ? '290px' : '340px',
-            position: { X: 'center', Y: (Browser.isDevice) ? 'center' : 'top' },
             isModal: Browser.isDevice,
             buttons: [{
                     click: this.insertAudioUrl.bind(selectObj),
@@ -27472,7 +27560,7 @@ class Video {
             const dialogContent = this.vidsizeInput(e);
             const selectObj = { args: e.args, selfVideo: this, selection: e.selection, selectNode: e.selectNode };
             this.dialogObj.setProperties({
-                height: 'inherit', width: '290px', header: vidSizeHeader, content: dialogContent, position: { X: 'center', Y: 'center' },
+                height: 'inherit', width: '290px', header: vidSizeHeader, content: dialogContent,
                 buttons: [{
                         // eslint-disable-next-line
                         click: (e) => {
@@ -28372,7 +28460,6 @@ class Video {
             enableRtl: this.parent.enableRtl,
             locale: this.parent.locale,
             showCloseIcon: true, closeOnEscape: true, width: (Browser.isDevice) ? '290px' : '340px',
-            position: { X: 'center', Y: (Browser.isDevice) ? 'center' : 'top' },
             isModal: Browser.isDevice,
             buttons: [{
                     click: this.insertVideoUrl.bind(selectObj),
@@ -28852,13 +28939,13 @@ class ViewSource {
         this.parent.updateValueData();
         if (this.parent.iframeSettings.enable) {
             let rteContent;
-            if (isNullOrUndefined(this.parent.element.querySelector('#' + this.parent.element.id + '_source-view'))) {
+            if (isNullOrUndefined(this.parent.element.querySelector('#' + this.parent.getID() + '_source-view'))) {
                 rteContent = this.parent.createElement('div', {
-                    className: 'e-source-content', id: this.parent.element.id + '_source-view'
+                    className: 'e-source-content', id: this.parent.getID() + '_source-view'
                 });
             }
             else {
-                rteContent = this.parent.element.querySelector('#' + this.parent.element.id + '_source-view');
+                rteContent = this.parent.element.querySelector('#' + this.parent.getID() + '_source-view');
             }
             rteContent.appendChild(this.previewElement);
             this.parent.element.appendChild(rteContent);
@@ -29038,6 +29125,7 @@ class Table {
         this.parent.on(tableToolbarAction, this.onToolbarAction, this);
         this.parent.on(dropDownSelect, this.dropdownSelect, this);
         this.parent.on(keyDown, this.keyDown, this);
+        this.parent.on(keyUp, this.keyUp, this);
         this.parent.on(mouseUp, this.selectionTable, this);
         this.parent.on(tableModulekeyUp, this.tableModulekeyUp, this);
         this.parent.on(bindCssClass, this.setCssClass, this);
@@ -29060,6 +29148,7 @@ class Table {
         this.parent.off(dropDownSelect, this.dropdownSelect);
         this.parent.off(mouseDown, this.cellSelect);
         this.parent.off(tableColorPickerChanged, this.setBGColor);
+        this.parent.off(keyUp, this.keyUp);
         this.parent.off(keyDown, this.keyDown);
         this.parent.off(mouseUp, this.selectionTable);
         this.parent.off(tableModulekeyUp, this.tableModulekeyUp);
@@ -29164,6 +29253,12 @@ class Table {
         this.parent.formatter.process(this.parent, e, e, { selection: selectCell, subCommand: e.item.subCommand });
         this.hideTableQuickToolbar();
     }
+    keyUp(e) {
+        const target = e.args.target;
+        if (e.args.key.toLocaleLowerCase() === 'escape' && target && target.classList && (this.popupObj && !closest(target, '[id=' + "'" + this.popupObj.element.id + "'" + ']')) && this.popupObj) {
+            this.popupObj.hide();
+        }
+    }
     keyDown(e) {
         const event = e.args;
         // eslint-disable-next-line
@@ -30565,6 +30660,7 @@ class DialogRenderer {
         let dlgObj;
         e.beforeOpen = this.beforeOpen.bind(this);
         e.open = this.open.bind(this);
+        e.position = { X: 'center', Y: this.getDialogPosition() };
         if (isNullOrUndefined(e.close)) {
             e.close = this.close.bind(this);
         }
@@ -30609,6 +30705,16 @@ class DialogRenderer {
             }
         });
     }
+    getDialogPosition() {
+        let distanceFromVisibleTop = this.parent.element.getBoundingClientRect().top;
+        if (distanceFromVisibleTop < 0) {
+            distanceFromVisibleTop = Math.abs(distanceFromVisibleTop);
+            return distanceFromVisibleTop.toString();
+        }
+        else {
+            return 'top';
+        }
+    }
     /**
      * dialog close method
      *
@@ -30819,12 +30925,12 @@ const executeGroup = {
     }
 };
 
-var __decorate$2 = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
-    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
-    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
-    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
-    return c > 3 && r && Object.defineProperty(target, key, r), r;
-};
+var __decorate$2 = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
 /**
  * Configures the toolbar settings of the RichTextEditor.
  */
@@ -31214,12 +31320,12 @@ __decorate$2([
     Property(bulletFormatList)
 ], BulletFormatList.prototype, "types", void 0);
 
-var __decorate$3 = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
-    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
-    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
-    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
-    return c > 3 && r && Object.defineProperty(target, key, r), r;
-};
+var __decorate$3 = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
 /**
  * Objects used for configuring the iframe resources properties.
  */
@@ -31246,12 +31352,12 @@ __decorate$3([
     Complex({}, Resources)
 ], IFrameSettings.prototype, "resources", void 0);
 
-var __decorate$4 = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
-    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
-    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
-    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
-    return c > 3 && r && Object.defineProperty(target, key, r), r;
-};
+var __decorate$4 = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
 /**
  * Configures the inlineMode property of the RTE.
  */
@@ -31661,7 +31767,7 @@ class EnterKeyAction {
                                     let newElem;
                                     const outerBRElem = this.parent.createElement('br');
                                     if (this.range.startOffset === 0 && this.range.endOffset === 0 &&
-                                        !isNullOrUndefined(currentParent.previousSibling) && currentParent.previousSibling.nodeName === 'BR') {
+                                        !isNullOrUndefined(currentParent.previousSibling) && currentParent.previousSibling.nodeName === 'BR' && currentParent.nodeName !== 'P' && currentParent.nodeName !== 'DIV') {
                                         // eslint-disable-next-line @typescript-eslint/no-unused-vars
                                         newElem = this.parent.formatter.editorManager.nodeCutter.SplitNode(this.range, currentParent, false).cloneNode(true);
                                         this.parent.formatter.editorManager.domNode.insertAfter(outerBRElem, currentParent);
@@ -31756,12 +31862,12 @@ class EnterKeyAction {
     }
 }
 
-var __decorate$1 = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
-    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
-    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
-    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
-    return c > 3 && r && Object.defineProperty(target, key, r), r;
-};
+var __decorate$1 = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
 /**
  * Represents the Rich Text Editor component.
  * ```html