@syncfusion/ej2-richtexteditor 28.1.36 → 28.1.38-680214

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,
@@ -6179,17 +6132,21 @@ class ToolbarRenderer {
                     value: colorpickerValue
                 };
                 proxy.parent.notify(selectionRestore, {});
-                proxy.currentElement.querySelector('.' + CLS_RTE_ELEMENTS).style.borderBottomColor = colorpickerValue;
+                if (proxy.currentElement) {
+                    proxy.currentElement.querySelector('.' + CLS_RTE_ELEMENTS).style.borderBottomColor = colorpickerValue;
+                }
                 const range = proxy.parent.formatter.editorManager.nodeSelection.getRange(proxy.parent.contentModule.getDocument());
                 const closestElement = closest(range.startContainer.parentNode, 'table');
                 if ((range.startContainer.nodeName === 'TD' || range.startContainer.nodeName === 'TH' || range.startContainer.nodeName === 'BODY' ||
-                    closest(range.startContainer.parentNode, 'td,th')) && range.collapsed && args.subCommand === 'BackgroundColor' && (closest(closestElement, '.' + CLS_RTE) || proxy.parent.iframeSettings.enable)) {
+                    (range.startContainer.parentNode && closest(range.startContainer.parentNode, 'td,th'))) && range.collapsed && args.subCommand === 'BackgroundColor' && (closestElement && closest(closestElement, '.' + CLS_RTE) || proxy.parent.iframeSettings.enable)) {
                     proxy.parent.notify(tableColorPickerChanged, colorPickerArgs);
                 }
                 else {
                     proxy.parent.notify(colorPickerChanged, colorPickerArgs);
                 }
-                proxy.currentDropdown.toggle();
+                if (proxy.currentDropdown) {
+                    proxy.currentDropdown.toggle();
+                }
             },
             beforeModeSwitch: (args) => {
                 value = colorPicker.value;
@@ -6650,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;
@@ -12484,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);
@@ -12505,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);
@@ -12602,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
@@ -14187,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);
@@ -14224,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();
@@ -14477,34 +14421,40 @@ class Table {
     // eslint-disable-next-line
     applyProperties(args, e) {
         const dialogEle = this.editdlgObj.element;
-        const table = closest(args.selectNode[0], 'table');
-        table.style.width = dialogEle.querySelector('.e-table-width') ? dialogEle.querySelector('.e-table-width').value + 'px'
-            : table.style.width;
-        if (dialogEle.querySelector('.e-cell-padding') && dialogEle.querySelector('.e-cell-padding').value !== '') {
-            const tdElm = table.querySelectorAll('td');
-            for (let i = 0; i < tdElm.length; i++) {
-                let padVal = '';
-                if (tdElm[i].style.padding === '') {
-                    padVal = tdElm[i].getAttribute('style') + ' padding:' +
-                        dialogEle.querySelector('.e-cell-padding').value + 'px;';
+        if (dialogEle && args && args.selectNode.length > 0 && args.selectNode[0]) {
+            const selectedElement = (args.selectNode[0] && args.selectNode[0].nodeType === 3 ?
+                args.selectNode[0].parentNode : args.selectNode[0]);
+            const table = selectedElement ? closest(selectedElement, 'table') : null;
+            if (table) {
+                table.style.width = dialogEle.querySelector('.e-table-width') ? dialogEle.querySelector('.e-table-width').value + 'px'
+                    : table.style.width;
+                if (dialogEle.querySelector('.e-cell-padding') && dialogEle.querySelector('.e-cell-padding').value !== '') {
+                    const tdElm = table.querySelectorAll('td');
+                    for (let i = 0; i < tdElm.length; i++) {
+                        let padVal = '';
+                        if (tdElm[i].style.padding === '') {
+                            padVal = tdElm[i].getAttribute('style') + ' padding:' +
+                                dialogEle.querySelector('.e-cell-padding').value + 'px;';
+                        }
+                        else {
+                            tdElm[i].style.padding = dialogEle.querySelector('.e-cell-padding').value + 'px';
+                            padVal = tdElm[i].getAttribute('style');
+                        }
+                        tdElm[i].setAttribute('style', padVal);
+                    }
+                }
+                table.cellSpacing = dialogEle.querySelector('.e-cell-spacing') ? dialogEle.querySelector('.e-cell-spacing').value
+                    : table.cellSpacing;
+                if (!isNullOrUndefined(table.cellSpacing) && table.cellSpacing !== '0') {
+                    addClass([table], CLS_TABLE_BORDER);
                 }
                 else {
-                    tdElm[i].style.padding = dialogEle.querySelector('.e-cell-padding').value + 'px';
-                    padVal = tdElm[i].getAttribute('style');
+                    removeClassWithAttr([table], CLS_TABLE_BORDER);
                 }
-                tdElm[i].setAttribute('style', padVal);
+                this.parent.formatter.saveData();
+                this.editdlgObj.hide({ returnValue: true });
             }
         }
-        table.cellSpacing = dialogEle.querySelector('.e-cell-spacing') ? dialogEle.querySelector('.e-cell-spacing').value
-            : table.cellSpacing;
-        if (!isNullOrUndefined(table.cellSpacing) && table.cellSpacing !== '0') {
-            addClass([table], CLS_TABLE_BORDER);
-        }
-        else {
-            removeClassWithAttr([table], CLS_TABLE_BORDER);
-        }
-        this.parent.formatter.saveData();
-        this.editdlgObj.hide({ returnValue: true });
     }
     tableDlgContent(e) {
         const selectNode = e.selectParent[0];
@@ -14599,6 +14549,7 @@ class Table {
             this.createTableButton.destroy();
             this.createTableButton = null;
         }
+        this.createTablePopupBoundFn = null;
         this.isDestroyed = true;
     }
     /**
@@ -14624,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 });
+        }
+    }
 }
 
 /**
@@ -19400,7 +19360,7 @@ class Formatter {
                         }
                     }
                     const command = actionBeginArgs.item.subCommand.toLocaleLowerCase();
-                    if (command === 'image') {
+                    if (command === 'image' || command === 'file' || command === 'replace') {
                         value = actionBeginArgs.itemCollection;
                     }
                     if (command === 'paste' || command === 'cut' || command === 'copy') {
@@ -22293,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);
@@ -22553,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);
@@ -24034,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);
@@ -24049,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);
@@ -28587,6 +28559,7 @@ class SelectionCommands {
             }
             else {
                 InsertMethods.unwrap(cursorFormat);
+                domSelection.setCursorPoint(docElement, cursorNode, 0);
             }
         }
         else {
@@ -32696,7 +32669,7 @@ class HtmlEditor {
     onSelectionRestore(e) {
         this.parent.isBlur = false;
         this.contentRenderer.getEditPanel().focus({ preventScroll: true });
-        if (isNullOrUndefined(e.items) || e.items) {
+        if ((isNullOrUndefined(e.items) || e.items) && (!isNullOrUndefined(this.saveSelection))) {
             this.saveSelection.restore();
         }
     }
@@ -32996,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,
@@ -33132,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
@@ -33154,7 +33149,7 @@ class HtmlEditor {
                 let checkParent = false;
                 if (this.oldRangeElement && this.oldRangeElement.nodeName !== '#text' && this.oldRangeElement.querySelectorAll('BR').length === 1) {
                     const brElement = this.oldRangeElement.querySelector('BR');
-                    if (brElement) {
+                    if (brElement && isNullOrUndefined(brElement.nextSibling)) {
                         const brParentElement = brElement.parentNode;
                         const currentState = this.oldRangeElement.innerHTML;
                         this.parent.formatter.saveData(currentState);
@@ -33911,6 +33906,7 @@ class PasteCleanup {
             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');
@@ -33919,7 +33915,9 @@ class PasteCleanup {
                         imageFileFormat = imgElementSrc.split(';')[0].split('/')[1];
                     }
                     else {
-                        imageFileFormat = imgElementSrc.split('.').pop().toLowerCase();
+                        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()) &&
@@ -34177,7 +34175,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)) {
@@ -34193,7 +34195,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];
@@ -34218,13 +34220,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';
+                        }
                     }
                 }
             }
@@ -35021,13 +35032,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) {
@@ -35131,7 +35153,8 @@ class Resize {
         }
         if (!isNullOrUndefined(this.iframeElement)) {
             this.iframeElement.forEach((iframe) => {
-                EventHandler.remove(iframe.contentDocument, 'mouseup', this.stopResize);
+                this.removeMouseUpEventListener(iframe);
+                EventHandler.remove(iframe, 'load', this.onIFrameLoad);
             });
         }
         if (this.resizer) {
@@ -37712,7 +37735,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);
@@ -37754,7 +37777,8 @@ class EnterKeyAction {
                                         && isSplitTextEmpty && !isPreWrapApplied && !isTextWrapApplied;
                                     const isCursorAtStartPreWrapWithContent = lastCharBeforeCursor === 32
                                         && (isPreWrapApplied || isTextWrapApplied) && isSplitTextEmpty && hasContentAfterCursor;
-                                    if (isCursorAtStartNonPreWrap || isCursorAtStartPreWrapWithContent) {
+                                    if ((isCursorAtStartNonPreWrap || isCursorAtStartPreWrapWithContent) &&
+                                        !this.range.startContainer.previousSibling) {
                                         isFocusedFirst = true;
                                     }
                                 }
@@ -37763,15 +37787,16 @@ class EnterKeyAction {
                                 }
                                 this.removeBRElement(nearBlockNode);
                                 const fireFoxEnterAtMiddle = Browser.userAgent.indexOf('Firefox') !== -1 && this.range.startOffset === 0 && this.range.startContainer === this.range.endContainer &&
-                                    this.range.startContainer.nodeName === '#text' && !this.parent.formatter.editorManager.domNode.isBlockNode(this.range.startContainer.previousSibling) &&
+                                    this.range.startContainer.nodeName === '#text' && !isNullOrUndefined(this.range.startContainer.previousSibling) && !this.parent.formatter.editorManager.domNode.isBlockNode(this.range.startContainer.previousSibling) &&
                                     this.range.startContainer.parentElement === this.range.startContainer.previousSibling.parentElement;
                                 const preventZeroWithSpace = ((this.range.startContainer.nodeName === '#text' && this.range.startContainer.textContent.includes('\u200B') &&
                                     this.range.startContainer.textContent.trim() === '\u200B') ||
                                     (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;
@@ -37836,7 +37861,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);
@@ -37892,6 +37917,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' &&
@@ -39754,7 +39809,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 {
@@ -40488,7 +40543,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;