@syncfusion/ej2-richtexteditor 28.1.38 → 28.1.41-642043

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 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 { 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, getComponent, ChildProperty, KeyboardEvents as KeyboardEvents$1, setStyleAttribute, getUniqueID, append, debounce, Observer, prepend, attributes, 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';
@@ -4793,11 +4793,6 @@ class NodeSelection {
 /**
  * Defines common util methods used by Rich Text Editor.
  */
-const inlineNode$1 = ['a', 'abbr', 'acronym', 'audio', 'b', 'bdi', 'bdo', 'big', 'br', 'button',
-    'canvas', 'cite', 'code', 'data', 'datalist', 'del', 'dfn', 'em', 'embed', 'font', 'i', 'iframe', 'img', 'input',
-    'ins', 'kbd', 'label', 'map', 'mark', 'meter', 'noscript', 'object', 'output', 'picture', 'progress',
-    'q', 'ruby', 's', 'samp', 'script', 'select', 'slot', 'small', 'span', 'strong', 'strike', 'sub', 'sup', 'svg',
-    'template', 'textarea', 'time', 'u', 'tt', 'var', 'video', 'wbr'];
 /**
  * @returns {void}
  * @hidden
@@ -4825,109 +4820,68 @@ function setEditFrameFocus(editableElement, selector) {
 }
 /**
  * @param {string} value - specifies the string value
- * @param {string} enterAction - specifies the enter key action API
  * @returns {void}
  * @hidden
  */
-function updateTextNode$1(value, enterAction) {
-    const tempNode = document.createElement('div');
-    tempNode.innerHTML = value;
-    tempNode.setAttribute('class', 'tempDiv');
+function updateTextNode$1(value) {
     const resultElm = document.createElement('div');
-    const childNodes = tempNode.childNodes;
-    if (childNodes.length > 0) {
-        let isPreviousInlineElem;
-        let previousParent;
-        let paraElm;
-        while (tempNode.firstChild) {
-            if ((tempNode.firstChild.nodeName === '#text' &&
-                (tempNode.firstChild.textContent.indexOf('\n') < 0 || tempNode.firstChild.textContent.trim() !== '')) ||
-                inlineNode$1.indexOf(tempNode.firstChild.nodeName.toLocaleLowerCase()) >= 0) {
-                if (!isPreviousInlineElem) {
-                    if (enterAction === 'BR') {
-                        resultElm.appendChild(tempNode.firstChild);
-                        previousParent = resultElm;
-                    }
-                    else {
-                        paraElm = createElement('p');
-                        resultElm.appendChild(paraElm);
-                        paraElm.appendChild(tempNode.firstChild);
-                        previousParent = paraElm;
-                        isPreviousInlineElem = true;
-                    }
-                }
-                else {
-                    previousParent.appendChild(tempNode.firstChild);
-                    previousParent = paraElm;
-                    isPreviousInlineElem = true;
-                }
+    resultElm.innerHTML = value;
+    const tableElm = resultElm.querySelectorAll('table');
+    for (let i = 0; i < tableElm.length; i++) {
+        if (tableElm[i].classList.length > 0 &&
+            !tableElm[i].classList.contains('e-rte-table') && !tableElm[i].classList.contains('e-rte-custom-table')) {
+            tableElm[i].classList.add('e-rte-paste-table');
+            if (tableElm[i].classList.contains('e-rte-paste-word-table')) {
+                tableElm[i].classList.remove('e-rte-paste-word-table');
+                continue; // Skiping the removal of the border if the source is from word.
             }
-            else if (tempNode.firstChild.nodeName === '#text' && (tempNode.firstChild.textContent === '\n' ||
-                (tempNode.firstChild.textContent.indexOf('\n') >= 0 && tempNode.firstChild.textContent.trim() === ''))) {
-                detach(tempNode.firstChild);
-            }
-            else {
-                resultElm.appendChild(tempNode.firstChild);
-                isPreviousInlineElem = false;
-            }
-        }
-        const tableElm = resultElm.querySelectorAll('table');
-        for (let i = 0; i < tableElm.length; i++) {
-            if (tableElm[i].classList.length > 0 &&
-                !tableElm[i].classList.contains('e-rte-table') && !tableElm[i].classList.contains('e-rte-custom-table')) {
-                tableElm[i].classList.add('e-rte-paste-table');
-                if (tableElm[i].classList.contains('e-rte-paste-word-table')) {
-                    tableElm[i].classList.remove('e-rte-paste-word-table');
-                    continue; // Skiping the removal of the border if the source is from word.
+            else if (tableElm[i].classList.contains('e-rte-paste-excel-table')) {
+                tableElm[i].classList.remove('e-rte-paste-excel-table');
+                if (tableElm[i].getAttribute('border') === '0') {
+                    tableElm[i].removeAttribute('border');
                 }
-                else if (tableElm[i].classList.contains('e-rte-paste-excel-table')) {
-                    tableElm[i].classList.remove('e-rte-paste-excel-table');
-                    if (tableElm[i].getAttribute('border') === '0') {
-                        tableElm[i].removeAttribute('border');
+                const tdElm = tableElm[i].querySelectorAll('td');
+                for (let j = 0; j < tdElm.length; j++) {
+                    if (tdElm[j].style.borderLeft === 'none') {
+                        tdElm[j].style.removeProperty('border-left');
                     }
-                    const tdElm = tableElm[i].querySelectorAll('td');
-                    for (let j = 0; j < tdElm.length; j++) {
-                        if (tdElm[j].style.borderLeft === 'none') {
-                            tdElm[j].style.removeProperty('border-left');
-                        }
-                        if (tdElm[j].style.borderRight === 'none') {
-                            tdElm[j].style.removeProperty('border-right');
-                        }
-                        if (tdElm[j].style.borderBottom === 'none') {
-                            tdElm[j].style.removeProperty('border-bottom');
-                        }
-                        if (tdElm[j].style.borderTop === 'none') {
-                            tdElm[j].style.removeProperty('border-top');
-                        }
-                        if (tdElm[j].style.border === 'none') {
-                            tdElm[j].style.removeProperty('border');
-                        }
+                    if (tdElm[j].style.borderRight === 'none') {
+                        tdElm[j].style.removeProperty('border-right');
+                    }
+                    if (tdElm[j].style.borderBottom === 'none') {
+                        tdElm[j].style.removeProperty('border-bottom');
+                    }
+                    if (tdElm[j].style.borderTop === 'none') {
+                        tdElm[j].style.removeProperty('border-top');
+                    }
+                    if (tdElm[j].style.border === 'none') {
+                        tdElm[j].style.removeProperty('border');
                     }
-                }
-                else if (tableElm[i].classList.contains('e-rte-paste-onenote-table')) {
-                    tableElm[i].classList.remove('e-rte-paste-onenote-table');
-                    continue;
-                }
-                else if (tableElm[i].classList.contains('e-rte-paste-html-table')) {
-                    tableElm[i].classList.remove('e-rte-paste-html-table');
-                    continue;
                 }
             }
-        }
-        const imageElm = resultElm.querySelectorAll('img');
-        for (let i = 0; i < imageElm.length; i++) {
-            if (imageElm[i].classList.contains('e-rte-image-unsupported')) {
-                continue; // Should not add the class if the image is Broken.
-            }
-            if (!imageElm[i].classList.contains('e-rte-image')) {
-                imageElm[i].classList.add('e-rte-image');
+            else if (tableElm[i].classList.contains('e-rte-paste-onenote-table')) {
+                tableElm[i].classList.remove('e-rte-paste-onenote-table');
+                continue;
             }
-            if (!(imageElm[i].classList.contains('e-imginline') ||
-                imageElm[i].classList.contains('e-imgbreak'))) {
-                imageElm[i].classList.add('e-imginline');
+            else if (tableElm[i].classList.contains('e-rte-paste-html-table')) {
+                tableElm[i].classList.remove('e-rte-paste-html-table');
+                continue;
             }
         }
     }
+    const imageElm = resultElm.querySelectorAll('img');
+    for (let i = 0; i < imageElm.length; i++) {
+        if (imageElm[i].classList.contains('e-rte-image-unsupported')) {
+            continue; // Should not add the class if the image is Broken.
+        }
+        if (!imageElm[i].classList.contains('e-rte-image')) {
+            imageElm[i].classList.add('e-rte-image');
+        }
+        if (!(imageElm[i].classList.contains('e-imginline') ||
+            imageElm[i].classList.contains('e-imgbreak'))) {
+            imageElm[i].classList.add('e-imginline');
+        }
+    }
     return resultElm.innerHTML;
 }
 /**
@@ -6143,7 +6097,6 @@ class ToolbarRenderer {
         let proxy = this;
         let value;
         const colorPicker = new ColorPicker({
-            enablePersistence: this.parent.enablePersistence,
             enableRtl: this.parent.enableRtl,
             inline: true,
             value: null,
@@ -6654,10 +6607,10 @@ class Link {
         }
         if (!this.selfLink.isUrl(linkUrl)) {
             if (this.selfLink.parent.editorMode === 'Markdown') {
-                linkText = (linkText !== '') ? linkText : '';
+                linkText = (linkText.trim() !== '') ? linkText : '';
             }
             else {
-                linkText = (linkText === '') ? linkUrl : linkText;
+                linkText = (linkText.trim() === '') ? linkUrl : linkText;
             }
             if (!this.selfLink.parent.enableAutoUrl) {
                 linkUrl = linkUrl.indexOf('http') > -1 ? linkUrl : 'http://' + linkUrl;
@@ -12002,12 +11955,12 @@ const DESTROY = 'destroy';
  */
 const INTERNAL_DESTROY = 'internal_destroy';
 
-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,
@@ -12488,7 +12441,6 @@ 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(tableModulekeyUp, this.tableModulekeyUp, this);
         this.parent.on(bindCssClass, this.setCssClass, this);
         this.parent.on(destroy, this.destroy, this);
@@ -12509,7 +12461,6 @@ class Table {
         this.parent.off(mouseDown, this.cellSelect);
         this.parent.off(tableColorPickerChanged, this.setBGColor);
         this.parent.off(keyDown, this.keyDown);
-        this.parent.off(keyUp, this.keyUp);
         this.parent.off(tableModulekeyUp, this.tableModulekeyUp);
         this.parent.off(bindCssClass, this.setCssClass);
         this.parent.off(destroy, this.destroy);
@@ -12606,20 +12557,6 @@ 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) {
-            let createTableToolbarBtn = this.popupObj.relateTo;
-            if (createTableToolbarBtn.nodeName !== 'BUTTON') {
-                createTableToolbarBtn = createTableToolbarBtn.querySelector('span.e-create-table');
-                createTableToolbarBtn = createTableToolbarBtn.parentElement;
-            }
-            this.popupObj.hide();
-            if (createTableToolbarBtn) {
-                createTableToolbarBtn.focus();
-            }
-        }
-    }
     keyDown(e) {
         const event = e.args;
         // eslint-disable-next-line
@@ -14191,6 +14128,8 @@ class Table {
         const header = '1X1';
         const insertbtn = this.l10n.getConstant('inserttablebtn');
         this.dlgDiv = this.parent.createElement('div', { className: 'e-rte-table-popup' + this.parent.getCssClass(true), id: this.rteID + '_table' });
+        this.createTablePopupBoundFn = this.createTablePopupKeyDown.bind(this);
+        this.dlgDiv.addEventListener('keydown', this.createTablePopupBoundFn);
         this.tblHeader = this.parent.createElement('div', { className: 'e-rte-popup-header' + this.parent.getCssClass(true) });
         this.tblHeader.innerHTML = header;
         this.dlgDiv.appendChild(this.tblHeader);
@@ -14228,6 +14167,7 @@ class Table {
             // eslint-disable-next-line
             close: (event) => {
                 EventHandler.remove(btnEle, 'click', this.insertTableDialog);
+                this.dlgDiv.removeEventListener('keydown', this.createTablePopupBoundFn);
                 detach(btnEle);
                 if (this.createTableButton && !this.createTableButton.isDestroyed) {
                     this.createTableButton.destroy();
@@ -14609,6 +14549,7 @@ class Table {
             this.createTableButton.destroy();
             this.createTableButton = null;
         }
+        this.createTablePopupBoundFn = null;
         this.isDestroyed = true;
     }
     /**
@@ -14634,6 +14575,15 @@ class Table {
                 'px; left:' + (tablePosition.left + parseInt(getComputedStyle(this.curTable).width, 10) - 4) + 'px;';
         }
     }
+    createTablePopupKeyDown(e) {
+        if (e.key === 'Escape') {
+            const popupRootElem = e.target.closest('.e-rte-table-popup');
+            const popup = getComponent(popupRootElem, 'popup');
+            const tableToolbarButton = popup.relateTo;
+            popup.hide();
+            tableToolbarButton.focus({ preventScroll: true });
+        }
+    }
 }
 
 /**
@@ -15622,12 +15572,12 @@ class PopupRenderer {
     }
 }
 
-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;
+};
 /**
  * Configures the slash menu settings of the RichTextEditor.
  */
@@ -22303,7 +22253,7 @@ class InsertHtml {
             nodeSelection.setSelectionText(docElement, lastSelectionNode, lastSelectionNode, 0, 0);
         }
         else {
-            this.cursorPos(lastSelectionNode, node, nodeSelection, docElement, editNode, enterAction);
+            this.cursorPos(lastSelectionNode, node, nodeSelection, docElement, editNode);
         }
         this.alignCheck(editNode);
         this.listCleanUp(nodeSelection, docElement);
@@ -22563,9 +22513,9 @@ class InsertHtml {
             }
         }
     }
-    static cursorPos(lastSelectionNode, node, nodeSelection, docElement, editNode, enterAction) {
+    static cursorPos(lastSelectionNode, node, nodeSelection, docElement, editNode) {
         lastSelectionNode.classList.add('lastNode');
-        editNode.innerHTML = updateTextNode$1(editNode.innerHTML, enterAction);
+        editNode.innerHTML = updateTextNode$1(editNode.innerHTML);
         lastSelectionNode = editNode.querySelector('.lastNode');
         if (!isNullOrUndefined(lastSelectionNode)) {
             this.placeCursorEnd(lastSelectionNode, node, nodeSelection, docElement, editNode);
@@ -24044,6 +23994,17 @@ class Lists {
         }
         return false;
     }
+    createAutoList(enterKey, shiftEnterKey) {
+        const autoListRules = {
+            BR: { BR: true, P: true, DIV: true },
+            P: { BR: false, P: true, DIV: true },
+            DIV: { BR: false, P: true, DIV: true }
+        };
+        if (autoListRules[enterKey] && autoListRules[enterKey][shiftEnterKey] !== undefined) {
+            return autoListRules[enterKey][shiftEnterKey];
+        }
+        return false;
+    }
     spaceList(e) {
         const range = this.parent.nodeSelection.getRange(this.parent.currentDocument);
         this.saveSelection = this.parent.nodeSelection.save(range, this.parent.currentDocument);
@@ -24059,7 +24020,8 @@ class Lists {
         const startElementOLTest = this.testCurrentList(range);
         const preElementOLTest = this.testList(preElement);
         const nextElementOLTest = this.testList(nextElement);
-        if (!preElementOLTest && !nextElementOLTest && preElemULStart !== '*' && nextElemULStart !== '*') {
+        const nextElementBRTest = range.startContainer.previousElementSibling && range.startContainer.previousElementSibling.tagName === 'BR';
+        if (!preElementOLTest && !nextElementOLTest && preElemULStart !== '*' && nextElemULStart !== '*' && (this.createAutoList(e.enterKey, e.shiftEnterKey) || !nextElementBRTest)) {
             const brElement = createElement('br');
             if (startElementOLTest) {
                 range.startContainer.textContent = range.startContainer.textContent.slice(range.startOffset, range.startContainer.textContent.length);
@@ -33007,7 +32969,9 @@ class HtmlEditor {
                 const eventArgs = {
                     callBack: null,
                     event: e.args,
-                    name: 'keydown-handler'
+                    name: 'keydown-handler',
+                    enterKey: this.parent.enterKey,
+                    shiftEnterKey: this.parent.shiftEnterKey
                 };
                 const actionBeginArgs = {
                     cancel: false,
@@ -33143,6 +33107,26 @@ class HtmlEditor {
             if (isNullOrUndefined(this.oldRangeElement)) {
                 return;
             }
+            else if (findBlockElement[0].previousSibling) {
+                const prevSibling = findBlockElement[0].previousSibling;
+                const currentElement = findBlockElement[0];
+                if (prevSibling.textContent.trim()) {
+                    if (prevSibling.lastChild.nodeName === 'BR') {
+                        prevSibling.removeChild(prevSibling.lastChild);
+                    }
+                    const cursorpointer = prevSibling.lastChild.textContent.length;
+                    const lastChild = prevSibling.lastChild;
+                    const childNodes = Array.from(currentElement.childNodes);
+                    for (let i = 0; i < childNodes.length; i++) {
+                        prevSibling.appendChild(childNodes[i].cloneNode(true));
+                    }
+                    this.parent.formatter.editorManager.nodeSelection.setCursorPoint(this.parent.contentModule.getDocument(), lastChild, cursorpointer);
+                    currentElement.parentNode.removeChild(currentElement);
+                }
+                else {
+                    prevSibling.parentNode.removeChild(prevSibling);
+                }
+            }
             else {
                 if (this.oldRangeElement.tagName === 'OL' || this.oldRangeElement.tagName === 'UL') {
                     this.oldRangeElement = this.oldRangeElement.lastElementChild.lastElementChild
@@ -33921,28 +33905,6 @@ class PasteCleanup {
             value = tempDivElem.innerHTML;
             const isValueNotEmpty = tempDivElem.textContent !== '' || !isNullOrUndefined(tempDivElem.querySelector('img')) ||
                 !isNullOrUndefined(tempDivElem.querySelector('table'));
-            const imgElements = tempDivElem.querySelectorAll('img');
-            const base = this.parent.contentModule.getDocument().location.origin;
-            imgElements.forEach((imgElement) => {
-                let imageFileFormat;
-                const imgElementSrc = imgElement.getAttribute('src');
-                if (!isNullOrUndefined(imgElementSrc) && imgElementSrc !== '') {
-                    if (imgElementSrc.indexOf('base64') > -1 && imgElementSrc.indexOf('data:') > -1) {
-                        imageFileFormat = imgElementSrc.split(';')[0].split('/')[1];
-                    }
-                    else {
-                        const parsedUrl = imgElementSrc.indexOf('http') > -1 ? new URL(imgElementSrc) : new URL(imgElementSrc, base);
-                        const path = parsedUrl.pathname;
-                        imageFileFormat = path.split('.').pop().toLowerCase();
-                    }
-                    if (!isNullOrUndefined(imageFileFormat) &&
-                        allowedTypes.every((type) => imageFileFormat !== type.substring(1).toLowerCase()) &&
-                        imgElementSrc.indexOf('blob') === -1) {
-                        detach(imgElement);
-                    }
-                }
-            });
-            value = tempDivElem.innerHTML;
             this.parent.notify(cleanupResizeElements, {
                 value: value,
                 callBack: (currentValue) => {
@@ -34191,7 +34153,11 @@ class PasteCleanup {
         this.parent.inputElement.contentEditable = 'true';
         detach(imgElem);
         if (popupObj) {
-            popupObj.close();
+            this.parent.isBlur = false;
+            popupObj.destroy();
+            if (!isNullOrUndefined(popupObj.element)) {
+                detach(popupObj.element);
+            }
         }
         this.parent.trigger(imageUploadFailed, e);
         if (uploadObj && document.body.contains(uploadObj.element)) {
@@ -34207,7 +34173,7 @@ class PasteCleanup {
             this.parent.trigger(imageUploadSuccess, e, (e) => {
                 if (!isNullOrUndefined(this.parent.insertImageSettings.path)) {
                     const url = this.parent.insertImageSettings.path + e.file.name;
-                    if (!this.parent.inputElement.contains(imgElem)) {
+                    if (!this.parent.inputElement.contains(imgElem) && imgElem.id) {
                         const imgHtmlElems = this.parent.inputElement.querySelectorAll('#' + imgElem.id);
                         for (let i = 0; i < imgHtmlElems.length; i++) {
                             const imgHtmlElem = imgHtmlElems[i];
@@ -34232,13 +34198,22 @@ class PasteCleanup {
             });
         }
         this.popupCloseTime = setTimeout(() => {
-            popupObj.close();
-            if (!this.parent.inputElement.contains(imgElem)) {
-                const imgHtmlElems = this.parent.inputElement.querySelectorAll('#' + imgElem.id);
-                for (let i = 0; i < imgHtmlElems.length; i++) {
-                    const imgHtmlElem = imgHtmlElems[i];
-                    if (imgHtmlElem && imgHtmlElem.style && imgHtmlElem.style.opacity === '0.5') {
-                        imgHtmlElem.style.opacity = '1';
+            if (popupObj) {
+                this.parent.isBlur = false;
+                popupObj.destroy();
+                if (!isNullOrUndefined(popupObj.element)) {
+                    detach(popupObj.element);
+                }
+            }
+            if (!this.parent.inputElement.contains(imgElem) && (imgElem.id || imgElem.alt)) {
+                const selector = imgElem.id ? `#${imgElem.id}` : `[alt="${imgElem.alt}"]`;
+                if (selector) {
+                    const imgHtmlElems = this.parent.inputElement.querySelectorAll(selector);
+                    for (let i = 0; i < imgHtmlElems.length; i++) {
+                        const imgHtmlElem = imgHtmlElems[i];
+                        if (imgHtmlElem && imgHtmlElem.style && imgHtmlElem.style.opacity === '0.5') {
+                            imgHtmlElem.style.opacity = '1';
+                        }
                     }
                 }
             }
@@ -35035,13 +35010,24 @@ class Resize {
         this.iframeElement = this.parent.contentModule.getDocument().querySelectorAll('iframe');
         if (!isNullOrUndefined(this.iframeElement)) {
             this.iframeElement.forEach((iframe) => {
-                EventHandler.add(iframe.contentDocument, 'mouseup', this.stopResize, this);
+                EventHandler.add(iframe, 'load', this.onIFrameLoad, this);
             });
         }
         this.touchStartEvent = (Browser.info.name === 'msie') ? 'pointerdown' : 'touchstart';
         EventHandler.add(this.resizer, 'mousedown', this.resizeStart, this);
         EventHandler.add(this.resizer, this.touchStartEvent, this.resizeStart, this);
     }
+    onIFrameLoad(e) {
+        const iframe = e.target;
+        if (iframe.nodeName === 'IFRAME' && iframe.contentDocument) {
+            EventHandler.add(iframe.contentDocument, 'mouseup', this.stopResize, this);
+        }
+    }
+    removeMouseUpEventListener(iframe) {
+        if (iframe.contentDocument) {
+            EventHandler.remove(iframe.contentDocument, 'mouseup', this.stopResize);
+        }
+    }
     resizeStart(e) {
         this.isResizing = false;
         if (e.cancelable) {
@@ -35145,7 +35131,7 @@ class Resize {
         }
         if (!isNullOrUndefined(this.iframeElement)) {
             this.iframeElement.forEach((iframe) => {
-                EventHandler.remove(iframe.contentDocument, 'mouseup', this.stopResize);
+                this.removeMouseUpEventListener(iframe);
             });
         }
         if (this.resizer) {
@@ -37089,12 +37075,12 @@ class RendererFactory {
     }
 }
 
-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.
  */
@@ -37520,12 +37506,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.
  */
@@ -37558,12 +37544,12 @@ __decorate$3([
     Property(null)
 ], IFrameSettings.prototype, "sandbox", 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.
  */
@@ -37726,7 +37712,7 @@ class EnterKeyAction {
                         if ((this.parent.enterKey === 'P' && !shiftKey) || (this.parent.enterKey === 'DIV' && !shiftKey) ||
                             (this.parent.shiftEnterKey === 'P' && shiftKey) ||
                             (this.parent.shiftEnterKey === 'DIV' && shiftKey)) {
-                            if ((this.range.startOffset === 1 && this.parent.inputElement.childNodes.length === 1 && this.parent.inputElement.childNodes[0].nodeName === 'TABLE') || (this.parent.enterKey === 'BR' && shiftKey)) {
+                            if ((this.range.startOffset === 1 && this.parent.inputElement.childNodes.length === 1 && this.parent.inputElement.childNodes[0].nodeName === 'TABLE')) {
                                 const newElem = this.createInsertElement(shiftKey);
                                 newElem.appendChild(this.parent.createElement('BR'));
                                 this.parent.inputElement.appendChild(newElem);
@@ -37785,8 +37771,9 @@ class EnterKeyAction {
                                     (this.range.startContainer.nodeName === '#text' && !isNullOrUndefined(this.range.startContainer.textContent[this.range.startOffset]) &&
                                         this.range.startContainer.textContent[this.range.startOffset].includes('\u200B') && this.range.startContainer.textContent[this.range.startOffset] === '\u200B' &&
                                         this.parent.inputElement.textContent[0] !== '\u200B'));
+                                const preventEnterkeyShiftKey = (this.range.startContainer.nodeName === '#text' || this.range.startContainer.nodeName === 'BR') && (this.range.startOffset === 0 && this.range.endOffset === 0) && this.range.startContainer.parentElement === this.parent.inputElement && this.parent.enterKey === 'BR' && shiftKey;
                                 // eslint-disable-next-line max-len
-                                if (!preventZeroWithSpace && !fireFoxEnterAtMiddle && ((this.range.startOffset === 0 && this.range.endOffset === 0) || isFocusedFirst) &&
+                                if (!preventEnterkeyShiftKey && !preventZeroWithSpace && !fireFoxEnterAtMiddle && ((this.range.startOffset === 0 && this.range.endOffset === 0) || isFocusedFirst) &&
                                     !(!isNullOrUndefined(this.range.startContainer.previousSibling) &&
                                         (this.range.startContainer.previousSibling.nodeName === 'IMG' || this.range.startContainer.previousSibling.nodeName === 'BR'))) {
                                     let isNearBlockLengthZero;
@@ -37851,7 +37838,7 @@ class EnterKeyAction {
                                     }
                                     this.parent.formatter.editorManager.nodeSelection.setCursorPoint(this.parent.contentModule.getDocument(), insertElem.nextElementSibling, 0);
                                 }
-                                else if (nearBlockNode.textContent.length === 0 && !(!isNullOrUndefined(nearBlockNode.childNodes[0]) && nearBlockNode.childNodes[0].nodeName === 'IMG' ||
+                                else if (nearBlockNode !== this.parent.inputElement && nearBlockNode.textContent.length === 0 && !(!isNullOrUndefined(nearBlockNode.childNodes[0]) && nearBlockNode.childNodes[0].nodeName === 'IMG' ||
                                     (nearBlockNode.querySelectorAll('video').length > 0) || (nearBlockNode.querySelectorAll('audio').length > 0) || (nearBlockNode.querySelectorAll('img').length > 0))) {
                                     if (!isNullOrUndefined(nearBlockNode.children[0]) && nearBlockNode.children[0].tagName !== 'BR') {
                                         const newElem = this.parent.formatter.editorManager.nodeCutter.SplitNode(this.range, nearBlockNode, false).cloneNode(true);
@@ -37907,6 +37894,36 @@ class EnterKeyAction {
                                         this.parent.videoModule.hideVideoQuickToolbar();
                                     }
                                 }
+                                else if (this.parent.enterKey === 'BR' && shiftKey && this.range.startContainer.nodeType === Node.TEXT_NODE && this.range.startContainer.parentElement && this.range.startContainer.parentElement === this.parent.inputElement) {
+                                    const range = this.range;
+                                    const startContainer = range.startContainer;
+                                    const startOffset = range.startOffset;
+                                    const newElement = this.parent.createElement(this.parent.shiftEnterKey);
+                                    if (startContainer.nodeType === Node.TEXT_NODE && range.endOffset !== 0 && range.startOffset !== 0) {
+                                        const textNode = startContainer;
+                                        if (startOffset < textNode.length) {
+                                            const newTextNode = textNode.splitText(startOffset);
+                                            newElement.appendChild(newTextNode);
+                                        }
+                                        else {
+                                            newElement.innerHTML = '<br>';
+                                        }
+                                        textNode.parentNode.insertBefore(newElement, textNode.nextSibling);
+                                        this.parent.formatter.editorManager.nodeSelection.setCursorPoint(this.parent.contentModule.getDocument(), newElement, 0);
+                                    }
+                                    else if (startOffset === 0 && range.endOffset === 0) {
+                                        newElement.innerHTML = '<br>';
+                                        if (range.endOffset === startContainer.textContent.length) {
+                                            const brElement = this.parent.createElement('br');
+                                            startContainer.parentNode.insertBefore(brElement, startContainer);
+                                        }
+                                        startContainer.parentNode.insertBefore(newElement, startContainer);
+                                        const cursorTarget = (range.endOffset === startContainer.textContent.length)
+                                            ? newElement : newElement.nextSibling;
+                                        startContainer.parentNode.insertBefore(newElement, startContainer);
+                                        this.parent.formatter.editorManager.nodeSelection.setCursorPoint(this.parent.contentModule.getDocument(), cursorTarget, 0);
+                                    }
+                                }
                                 else {
                                     const newElem = this.parent.formatter.editorManager.nodeCutter.SplitNode(this.range, nearBlockNode, true);
                                     if (!isNullOrUndefined(newElem.childNodes[0]) && newElem.childNodes[0].nodeName === '#text' &&
@@ -38268,12 +38285,12 @@ class EnterKeyAction {
     }
 }
 
-var __decorate$5 = (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$5 = (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
@@ -39769,7 +39786,7 @@ let RichTextEditor = class RichTextEditor extends Component {
                 this.placeHolderWrapper.innerHTML = this.placeholder;
                 if (this.inputElement.textContent.length === 0 && this.inputElement.childNodes.length < 2 && !isNullOrUndefined(this.inputElement.firstChild) && (this.inputElement.firstChild.nodeName === 'BR' ||
                     ((this.inputElement.firstChild.nodeName === 'P' || this.inputElement.firstChild.nodeName === 'DIV') && !isNullOrUndefined(this.inputElement.firstChild.firstChild) &&
-                        this.inputElement.firstChild.firstChild.nodeName === 'BR'))) {
+                        this.inputElement.firstChild.childNodes.length < 2 && this.inputElement.firstChild.firstChild.nodeName === 'BR'))) {
                     this.placeHolderWrapper.classList.add('enabled');
                 }
                 else {
@@ -40503,7 +40520,6 @@ let RichTextEditor = class RichTextEditor extends Component {
             const value = this.getUpdatedValue();
             this.setProperties({ value: value });
             this.valueContainer.value = this.value;
-            this.notify(toolbarRefresh, { args: e, documentNode: document });
             this.isValueChangeBlurhandler = true;
             this.invokeChangeEvent();
             this.isFocusOut = true;