@syncfusion/ej2-richtexteditor 24.2.7 → 24.2.9

package/dist/global/index.d.ts

@@ -1,6 +1,6 @@
 /*!
 *  filename: index.d.ts
-*  version : 24.2.7
+*  version : 24.2.9
 *  Copyright Syncfusion Inc. 2001 - 2023. All rights reserved.
 *  Use of this code is subject to the terms of our license.
 *  A copy of the current license can be obtained at any time by e-mailing

package/package.json

@@ -1,8 +1,8 @@
 {
   "_from": "@syncfusion/ej2-richtexteditor@*",
-  "_id": "@syncfusion/ej2-richtexteditor@24.2.4",
+  "_id": "@syncfusion/ej2-richtexteditor@24.2.8",
   "_inBundle": false,
-  "_integrity": "sha512-gxGUXVmOFE1abnbYaLzzX3FEGyT+H3uIhWIt0jS7DALyg61NbYz8XViClAoYz62KxDenDXYzu+HyP5bjpMc7gg==",
+  "_integrity": "sha512-RiTlxXAeoPOeO3I9n1A4XHgDuna06LrHQgt08fEpnjhBE38mAzyH68yRzCtrUlVnoVqTPOvJJ83rLI2VDDlC1w==",
   "_location": "/@syncfusion/ej2-richtexteditor",
   "_phantomChildren": {},
   "_requested": {
@@ -25,8 +25,8 @@
     "/@syncfusion/ej2-react-richtexteditor",
     "/@syncfusion/ej2-vue-richtexteditor"
   ],
-  "_resolved": "https://nexus.syncfusioninternal.com/repository/ej2-hotfix-new/@syncfusion/ej2-richtexteditor/-/ej2-richtexteditor-24.2.4.tgz",
-  "_shasum": "c1a662b91702ceddbdb9a858bae8cdccb2635ea7",
+  "_resolved": "https://nexus.syncfusioninternal.com/repository/ej2-hotfix-new/@syncfusion/ej2-richtexteditor/-/ej2-richtexteditor-24.2.8.tgz",
+  "_shasum": "f966e83e1230cc284396b8ec962f1df25c80d5a9",
   "_spec": "@syncfusion/ej2-richtexteditor@*",
   "_where": "/jenkins/workspace/elease-automation_release_24.1.1/packages/included",
   "author": {
@@ -40,9 +40,9 @@
     "@syncfusion/ej2-base": "~24.2.7",
     "@syncfusion/ej2-buttons": "~24.2.7",
     "@syncfusion/ej2-filemanager": "~24.2.7",
-    "@syncfusion/ej2-inputs": "~24.2.7",
-    "@syncfusion/ej2-navigations": "~24.2.4",
-    "@syncfusion/ej2-popups": "~24.2.5",
+    "@syncfusion/ej2-inputs": "~24.2.9",
+    "@syncfusion/ej2-navigations": "~24.2.8",
+    "@syncfusion/ej2-popups": "~24.2.9",
     "@syncfusion/ej2-splitbuttons": "~24.2.7"
   },
   "deprecated": false,
@@ -69,6 +69,6 @@
     "url": "git+https://github.com/syncfusion/ej2-javascript-ui-controls.git"
   },
   "typings": "index.d.ts",
-  "version": "24.2.7",
+  "version": "24.2.9",
   "sideEffects": false
 }

package/src/editor-manager/plugin/dom-node.js

@@ -490,9 +490,11 @@ var DOMNode = /** @class */ (function () {
         var range = save.range;
         var startChildNodes = range.startContainer.childNodes;
         var isTableStart = startChildNodes.length > 1 && startChildNodes[0].nodeName === 'TABLE';
+        var isImgOnlySelected = startChildNodes.length > 1 && startChildNodes[0].nodeName === 'IMAGE' &&
+            range.endOffset === 1 && range.endContainer.nodeName === '#text' && range.endContainer.textContent.length === 0;
         var start = ((isTableStart ? getLastTextNode(startChildNodes[range.startOffset + 1]) :
             startChildNodes[(range.startOffset > 0) ? (range.startOffset - 1) : range.startOffset]) || range.startContainer);
-        var end = (range.endContainer.childNodes[(range.endOffset > 0) ? (range.endOffset - 1) : range.endOffset]
+        var end = (range.endContainer.childNodes[(range.endOffset > 0) ? (isImgOnlySelected ? range.endOffset : (range.endOffset - 1)) : range.endOffset]
             || range.endContainer);
         if ((start.nodeType === Node.ELEMENT_NODE && end.nodeType === Node.ELEMENT_NODE) && (start.contains(end) || end.contains(start))) {
             var existNode = start.contains(end) ? start : end;

package/src/editor-manager/plugin/format-painter-actions.d.ts

@@ -35,6 +35,7 @@ export declare class FormatPainterActions implements IFormatPainterEditor {
     private validateELementTag;
     private findCurrentContext;
     private insertFormatNode;
+    private isListCopied;
     private insertBlockNode;
     private insertNewList;
     private insertSameList;

package/src/editor-manager/plugin/format-painter-actions.js

@@ -363,6 +363,14 @@ var FormatPainterActions = /** @class */ (function () {
         var range = this.parent.nodeSelection.getRange(docElement);
         var isCollapsed = range.collapsed;
         var blockNodes = this.parent.domNode.blockNodes();
+        var isListCopied = this.isListCopied();
+        if (isListCopied) {
+            for (var i = 0; i < blockNodes.length; i++) {
+                if (closest(blockNodes[i], 'li')) {
+                    blockNodes[i] = closest(blockNodes[i], 'li');
+                }
+            }
+        }
         var isFullNodeSelected = false;
         if (blockNodes.length === 1) {
             isFullNodeSelected = blockNodes[0].textContent.trim() === range.toString().trim();
@@ -371,6 +379,16 @@ var FormatPainterActions = /** @class */ (function () {
             this.insertBlockNode(clonedElem, range, docElement, blockNodes);
         }
     };
+    FormatPainterActions.prototype.isListCopied = function () {
+        var isListCopied = false;
+        for (var i = 0; i < this.copyCollection.length; i++) {
+            if (this.copyCollection[i].tagName === 'OL' || this.copyCollection[i].tagName === 'UL') {
+                isListCopied = true;
+                break;
+            }
+        }
+        return isListCopied;
+    };
     FormatPainterActions.prototype.insertBlockNode = function (element, range, docElement, nodes) {
         var domSelection = this.parent.nodeSelection;
         var saveSelection = domSelection.save(range, docElement);

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

@@ -211,7 +211,12 @@ var InsertHtml = /** @class */ (function () {
             CONSTANT.TABLE_BLOCK_TAGS.indexOf(closestParentNode.tagName.toLocaleLowerCase()) !== -1))
             || (node.nodeName.toLowerCase() === 'table' && closestParentNode &&
                 CONSTANT.TABLE_BLOCK_TAGS.indexOf(closestParentNode.tagName.toLocaleLowerCase()) === -1))) {
-            preNode = nodeCutter.GetSpliceNode(range, closestParentNode);
+            if (isCollapsed) {
+                preNode = nodeCutter.SplitNode(range, closestParentNode, true);
+            }
+            else {
+                preNode = nodeCutter.SplitNode(range, closestParentNode, false);
+            }
             sibNode = isNOU(preNode.previousSibling) ? preNode.parentNode.previousSibling : preNode.previousSibling;
             if (nodes.length === 1) {
                 nodeSelection.setSelectionContents(docElement, preNode);
@@ -298,6 +303,9 @@ var InsertHtml = /** @class */ (function () {
                 var paraElm = void 0;
                 var previousParent = void 0;
                 if (!this.contentsDeleted) {
+                    if (!isCollapsed && range.startContainer.parentElement.textContent.length === 0 && range.startContainer.nodeName === 'BR' && range.startContainer.parentElement.nodeName === 'P') {
+                        editNode.removeChild(range.startContainer.parentElement);
+                    }
                     range.deleteContents();
                 }
                 while (node.firstChild) {

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

@@ -72,14 +72,21 @@ var Lists = /** @class */ (function () {
         var preElementOLTest = this.testList(preElement);
         var nextElementOLTest = this.testList(nextElement);
         if (!preElementOLTest && !nextElementOLTest && preElemULStart !== '*' && nextElemULStart !== '*') {
+            var brElement = createElement('br');
             if (startElementOLTest) {
                 range.startContainer.textContent = range.startContainer.textContent.slice(range.startOffset, range.startContainer.textContent.length);
+                if (range.startContainer.nodeName === '#text' && range.startContainer.textContent.length === 0) {
+                    this.parent.domNode.insertAfter(brElement, range.startContainer);
+                }
                 this.applyListsHandler({ subCommand: 'OL', callBack: e.callBack });
                 e.event.preventDefault();
             }
             else if (range.startContainer.textContent.replace(/\u200B/g, '').slice(0, range.startOffset).trim() === '*' ||
                 range.startContainer.textContent.replace(/\u200B/g, '').slice(0, range.startOffset).trim() === '-') {
                 range.startContainer.textContent = range.startContainer.textContent.slice(range.startOffset, range.startContainer.textContent.length);
+                if (range.startContainer.nodeName === '#text' && range.startContainer.textContent.length === 0) {
+                    this.parent.domNode.insertAfter(brElement, range.startContainer);
+                }
                 this.applyListsHandler({ subCommand: 'UL', callBack: e.callBack });
                 e.event.preventDefault();
             }
@@ -190,11 +197,11 @@ var Lists = /** @class */ (function () {
     };
     Lists.prototype.removeList = function (range, e) {
         var startNode = this.parent.domNode.getSelectedNode(range.startContainer, range.startOffset);
-        var endNode = this.parent.domNode.getSelectedNode(range.endContainer, range.endOffset);
+        var endNode = (!isNOU(range.endContainer.parentElement.closest('li')) && range.endContainer.parentElement.closest('li').childElementCount > 1 && range.endContainer.nodeName === '#text') ? range.endContainer : this.parent.domNode.getSelectedNode(range.endContainer, range.endOffset);
         startNode = startNode.nodeName === 'BR' ? startNode.parentElement : startNode;
         endNode = endNode.nodeName === 'BR' ? endNode.parentElement : endNode;
         startNode = startNode.nodeName !== 'LI' && !isNOU(startNode.closest('LI')) ? startNode.closest('LI') : startNode;
-        endNode = endNode.nodeName !== 'LI' && !isNOU(endNode.closest('LI')) ? endNode.closest('LI') : endNode;
+        endNode = endNode.nodeName !== 'LI' && endNode.nodeName !== '#text' && !isNOU(endNode.closest('LI')) ? endNode.closest('LI') : endNode;
         if (((range.commonAncestorContainer.nodeName === 'OL' || range.commonAncestorContainer.nodeName === 'UL' || range.commonAncestorContainer.nodeName === 'LI') &&
             isNOU(endNode.nextElementSibling) && endNode.textContent.length === range.endOffset &&
             isNOU(startNode.previousElementSibling) && range.startOffset === 0) ||
@@ -600,7 +607,7 @@ var Lists = /** @class */ (function () {
     };
     Lists.prototype.applyLists = function (elements, type, selector, item, e) {
         var isReverse = true;
-        if (this.isRevert(elements, type, item) && isNOU(item)) {
+        if (this.isRevert(elements, type, item) && isNOU(item) || (!isNOU(item) && item.listStyle === 'none')) {
             this.revertList(elements, e);
             this.removeEmptyListElements();
         }
@@ -790,82 +797,84 @@ var Lists = /** @class */ (function () {
         var viewNode = [];
         for (var i = 0; i < elements.length; i++) {
             var element = elements[i];
-            if (this.domNode.contents(element)[0].nodeType === 3 && this.domNode.contents(element)[0].textContent.trim().length === 0) {
-                detach(this.domNode.contents(element)[0]);
-            }
-            var parentNode = elements[i].parentNode;
-            var className = element.getAttribute('class');
-            if (temp.length === 0) {
-                var siblingList = elements[i].querySelectorAll('ul, ol');
-                var firstNode = siblingList[0];
-                if (firstNode) {
-                    var child = firstNode
-                        .querySelectorAll('li');
-                    if (child) {
-                        var nestedElement = createElement(firstNode.tagName);
-                        append([nestedElement], firstNode.parentNode);
-                        var nestedElementLI = createElement('li', { styles: 'list-style-type: none;' });
-                        append([nestedElementLI], nestedElement);
-                        append([firstNode], nestedElementLI);
+            if ((isNullOrUndefined(e.item)) || ((element.nodeName === 'LI' && e.item.listStyle === 'none'))) {
+                if (this.domNode.contents(element)[0].nodeType === 3 && this.domNode.contents(element)[0].textContent.trim().length === 0) {
+                    detach(this.domNode.contents(element)[0]);
+                }
+                var parentNode = elements[i].parentNode;
+                var className = element.getAttribute('class');
+                if (temp.length === 0) {
+                    var siblingList = elements[i].querySelectorAll('ul, ol');
+                    var firstNode = siblingList[0];
+                    if (firstNode) {
+                        var child = firstNode
+                            .querySelectorAll('li');
+                        if (child) {
+                            var nestedElement = createElement(firstNode.tagName);
+                            append([nestedElement], firstNode.parentNode);
+                            var nestedElementLI = createElement('li', { styles: 'list-style-type: none;' });
+                            append([nestedElementLI], nestedElement);
+                            append([firstNode], nestedElementLI);
+                        }
                     }
                 }
-            }
-            if (element.parentNode.insertBefore(this.closeTag(parentNode.tagName), element),
-                'LI' === parentNode.parentNode.tagName || 'OL' === parentNode.parentNode.tagName ||
-                    'UL' === parentNode.parentNode.tagName) {
-                element.parentNode.insertBefore(this.closeTag('LI'), element);
-            }
-            else {
-                var classAttr = '';
-                if (className) {
-                    // eslint-disable-next-line
-                    classAttr += ' class="' + className + '"';
-                }
-                if (CONSTANT.DEFAULT_TAG && 0 === element.querySelectorAll(CONSTANT.BLOCK_TAGS.join(', ')).length) {
-                    var wrapperclass = isNullOrUndefined(className) ? ' class="e-rte-wrap-inner"' :
-                        ' class="' + className + ' e-rte-wrap-inner"';
-                    var parentElement = parentNode;
-                    if (!isNOU(parentElement.style.listStyleType)) {
-                        parentNode.style.removeProperty("list-style-type");
+                if (element.parentNode.insertBefore(this.closeTag(parentNode.tagName), element),
+                    'LI' === parentNode.parentNode.tagName || 'OL' === parentNode.parentNode.tagName ||
+                        'UL' === parentNode.parentNode.tagName) {
+                    element.parentNode.insertBefore(this.closeTag('LI'), element);
+                }
+                else {
+                    var classAttr = '';
+                    if (className) {
+                        // eslint-disable-next-line
+                        classAttr += ' class="' + className + '"';
                     }
-                    if (!isNOU(parentElement.style.listStyleImage)) {
-                        parentNode.style.removeProperty("list-style-image");
+                    if (CONSTANT.DEFAULT_TAG && 0 === element.querySelectorAll(CONSTANT.BLOCK_TAGS.join(', ')).length) {
+                        var wrapperclass = isNullOrUndefined(className) ? ' class="e-rte-wrap-inner"' :
+                            ' class="' + className + ' e-rte-wrap-inner"';
+                        var parentElement = parentNode;
+                        if (!isNOU(parentElement.style.listStyleType)) {
+                            parentNode.style.removeProperty("list-style-type");
+                        }
+                        if (!isNOU(parentElement.style.listStyleImage)) {
+                            parentNode.style.removeProperty("list-style-image");
+                        }
+                        if (parentElement.style.length === 0) {
+                            parentNode.removeAttribute("style");
+                        }
+                        var wrapper = '<' + CONSTANT.DEFAULT_TAG + wrapperclass +
+                            this.domNode.attributes(parentElement) + '></' + CONSTANT.DEFAULT_TAG + '>';
+                        if (e.enterAction !== 'BR') {
+                            this.domNode.wrapInner(element, this.domNode.parseHTMLFragment(wrapper));
+                        }
                     }
-                    if (parentElement.style.length === 0) {
-                        parentNode.removeAttribute("style");
+                    else if (this.domNode.contents(element)[0].nodeType === 3) {
+                        var replace = this.domNode.createTagString(CONSTANT.DEFAULT_TAG, parentNode, this.parent.domNode.encode(this.domNode.contents(element)[0].textContent));
+                        this.domNode.replaceWith(this.domNode.contents(element)[0], replace);
                     }
-                    var wrapper = '<' + CONSTANT.DEFAULT_TAG + wrapperclass +
-                        this.domNode.attributes(parentElement) + '></' + CONSTANT.DEFAULT_TAG + '>';
-                    if (e.enterAction !== 'BR') {
-                        this.domNode.wrapInner(element, this.domNode.parseHTMLFragment(wrapper));
+                    else if (this.domNode.contents(element)[0].classList.contains(markerClassName.startSelection) ||
+                        this.domNode.contents(element)[0].classList.contains(markerClassName.endSelection)) {
+                        var replace = this.domNode.createTagString(CONSTANT.DEFAULT_TAG, parentNode, this.domNode.contents(element)[0].outerHTML);
+                        this.domNode.replaceWith(this.domNode.contents(element)[0], replace);
                     }
+                    else {
+                        var childNode = element.firstChild;
+                        className = childNode.getAttribute('class');
+                        attributes(childNode, this.domNode.rawAttributes(parentNode));
+                        if (className && childNode.getAttribute('class')) {
+                            attributes(childNode, { 'class': className + ' ' + childNode.getAttribute('class') });
+                        }
+                    }
+                    append([this.openTag('LI')], element);
+                    prepend([this.closeTag('LI')], element);
                 }
-                else if (this.domNode.contents(element)[0].nodeType === 3) {
-                    var replace = this.domNode.createTagString(CONSTANT.DEFAULT_TAG, parentNode, this.parent.domNode.encode(this.domNode.contents(element)[0].textContent));
-                    this.domNode.replaceWith(this.domNode.contents(element)[0], replace);
-                }
-                else if (this.domNode.contents(element)[0].classList.contains(markerClassName.startSelection) ||
-                    this.domNode.contents(element)[0].classList.contains(markerClassName.endSelection)) {
-                    var replace = this.domNode.createTagString(CONSTANT.DEFAULT_TAG, parentNode, this.domNode.contents(element)[0].outerHTML);
-                    this.domNode.replaceWith(this.domNode.contents(element)[0], replace);
+                this.domNode.insertAfter(this.openTag(parentNode.tagName), element);
+                if (parentNode.parentNode.tagName === 'LI') {
+                    parentNode = parentNode.parentNode.parentNode;
                 }
-                else {
-                    var childNode = element.firstChild;
-                    className = childNode.getAttribute('class');
-                    attributes(childNode, this.domNode.rawAttributes(parentNode));
-                    if (className && childNode.getAttribute('class')) {
-                        attributes(childNode, { 'class': className + ' ' + childNode.getAttribute('class') });
-                    }
+                if (viewNode.indexOf(parentNode) < 0) {
+                    viewNode.push(parentNode);
                 }
-                append([this.openTag('LI')], element);
-                prepend([this.closeTag('LI')], element);
-            }
-            this.domNode.insertAfter(this.openTag(parentNode.tagName), element);
-            if (parentNode.parentNode.tagName === 'LI') {
-                parentNode = parentNode.parentNode.parentNode;
-            }
-            if (viewNode.indexOf(parentNode) < 0) {
-                viewNode.push(parentNode);
             }
         }
         for (var i = 0; i < viewNode.length; i++) {

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

@@ -21,6 +21,7 @@ export declare class MsWordPaste {
     private addEventListener;
     private cropImageDimensions;
     private wordCleanup;
+    private addDoubleBr;
     private cleanList;
     private insertAfter;
     private findClosestListElem;

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

@@ -1,5 +1,5 @@
 import * as EVENTS from '../../common/constant';
-import { createElement, isNullOrUndefined as isNOU, detach, addClass } from '@syncfusion/ej2-base';
+import { createElement, isNullOrUndefined as isNOU, detach, addClass, Browser } from '@syncfusion/ej2-base';
 import { PASTE_SOURCE } from '../base/constant';
 /**
  * PasteCleanup for MsWord content
@@ -61,6 +61,7 @@ var MsWordPaste = /** @class */ (function () {
         var elm = createElement('p');
         elm.setAttribute('id', 'MSWord-Content');
         elm.innerHTML = tempHTMLContent;
+        this.addDoubleBr(elm);
         var patern = /class='?Mso|style='[^ ]*\bmso-/i;
         var patern2 = /class="?Mso|style="[^ ]*\bmso-/i;
         var patern3 = /(class="?Mso|class='?Mso|class="?Xl|class='?Xl|class=Xl|style="[^"]*\bmso-|style='[^']*\bmso-|w:WordDocument)/gi;
@@ -95,6 +96,26 @@ var MsWordPaste = /** @class */ (function () {
             e.callBack(elm.innerHTML);
         }
     };
+    MsWordPaste.prototype.addDoubleBr = function (elm) {
+        var newline = elm.querySelector('.Apple-interchange-newline');
+        if (!isNOU(newline) && Browser.userAgent.indexOf('Chrome') !== -1 && newline.parentElement.nodeName === 'P' && elm !== newline.parentElement) {
+            for (var i = 0; i < elm.childNodes.length; i++) {
+                // eslint-disable-next-line
+                var node = elm.childNodes[i];
+                if (node.nodeType === Node.COMMENT_NODE && node.nodeValue.includes('StartFragment')) {
+                    var newElement = document.createElement('p');
+                    newElement.innerHTML = '<br>';
+                    var cssText = newline.parentElement.style.cssText;
+                    var currentStyle = newElement.getAttribute('style') || '';
+                    var newStyle = currentStyle + cssText;
+                    newElement.setAttribute('style', newStyle);
+                    elm.insertBefore(newElement, node.nextSibling);
+                    detach(newline);
+                    break;
+                }
+            }
+        }
+    };
     MsWordPaste.prototype.cleanList = function (elm, listTag) {
         var replacableElem = elm.querySelectorAll(listTag + ' div');
         for (var j = replacableElem.length - 1; j >= 0; j--) {

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

@@ -223,6 +223,9 @@ var BaseQuickToolbar = /** @class */ (function () {
                     _this.parent.disableToolbarItem(_this.parent.toolbarSettings.items);
                     _this.parent.enableToolbarItem(['Undo', 'Redo']);
                 }
+                else {
+                    _this.parent.enableToolbarItem(_this.parent.toolbarSettings.items);
+                }
                 append([_this.element], document.body);
                 if (_this.parent.showTooltip) {
                     _this.tooltip = new Tooltip({
@@ -264,9 +267,9 @@ var BaseQuickToolbar = /** @class */ (function () {
                     parentData: parent_1.getBoundingClientRect(),
                     tBarElementHeight: tBarHeight
                 };
-                if (target.tagName === 'IMG' || target.tagName === 'AUDIO' || target.tagName === 'VIDEO' || target.tagName === 'IFRAME' || (target.classList &&
+                if ((target.tagName === 'IMG' || target.tagName === 'AUDIO' || target.tagName === 'VIDEO' || target.tagName === 'IFRAME' || (target.classList &&
                     (target.classList.contains(classes.CLS_AUDIOWRAP) || target.classList.contains(classes.CLS_CLICKELEM) ||
-                        target.classList.contains(classes.CLS_VID_CLICK_ELEM)))) {
+                        target.classList.contains(classes.CLS_VID_CLICK_ELEM)))) && (x == beforeQuickToolbarArgs.positionX || y == beforeQuickToolbarArgs.positionY)) {
                     _this.setPosition(showPopupData);
                 }
                 if (!_this.parent.inlineMode.enable) {

package/src/rich-text-editor/actions/color-picker.d.ts

@@ -39,6 +39,7 @@ export declare class ColorPickerInput {
     private setCssClass;
     private updateCss;
     protected addEventListener(): void;
+    private showColorPicker;
     private onPropertyChanged;
     protected removeEventListener(): void;
 }

package/src/rich-text-editor/actions/color-picker.js

@@ -170,6 +170,15 @@ var ColorPickerInput = /** @class */ (function () {
         this.parent.on(events.destroyColorPicker, this.destroyColorPicker, this);
         this.parent.on(events.modelChanged, this.onPropertyChanged, this);
         this.parent.on(events.bindCssClass, this.setCssClass, this);
+        this.parent.on(events.showColorPicker, this.showColorPicker, this);
+    };
+    ColorPickerInput.prototype.showColorPicker = function (e) {
+        if (!isNullOrUndefined(this.fontColorPicker) && (e.toolbarClick === "fontcolor")) {
+            this.fontColorDropDown.toggle();
+        }
+        else if (!isNullOrUndefined(this.backgroundColorPicker) && (e.toolbarClick === "backgroundcolor")) {
+            this.backgroundColorDropDown.toggle();
+        }
     };
     ColorPickerInput.prototype.onPropertyChanged = function (model) {
         var newProp = model.newProp;
@@ -243,6 +252,7 @@ var ColorPickerInput = /** @class */ (function () {
         this.parent.off(events.destroyColorPicker, this.destroyColorPicker);
         this.parent.off(events.modelChanged, this.onPropertyChanged);
         this.parent.off(events.bindCssClass, this.setCssClass);
+        this.parent.off(events.showColorPicker, this.showColorPicker);
     };
     return ColorPickerInput;
 }());

package/src/rich-text-editor/actions/emoji-picker.js

@@ -64,7 +64,7 @@ var EmojiPicker = /** @class */ (function () {
             this.parent.getToolbar().appendChild(this.popDiv);
         }
         else if (this.parent.inlineMode.enable) {
-            this.parent.inputElement.appendChild(this.popDiv);
+            this.parent.element.appendChild(this.popDiv);
         }
         EventHandler.add(this.popDiv, 'keydown', this.onKeyDown, this);
         EventHandler.add(this.popDiv, 'keyup', this.searchFilter, this);

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

@@ -485,10 +485,10 @@ var EnterKeyAction = /** @class */ (function () {
         }
         var previousBlockNode = this.parent.formatter.editorManager.domNode.blockNodes()[0].previousSibling;
         var nextBlockNode = this.parent.formatter.editorManager.domNode.blockNodes()[0].nextSibling;
-        if (!isNOU(previousBlockNode) && previousBlockNode.hasAttribute('style') && previousBlockNode.nodeName !== 'TABLE') {
+        if (!isNOU(previousBlockNode) && previousBlockNode.nodeName !== '#text' && previousBlockNode.hasAttribute('style') && previousBlockNode.nodeName !== 'TABLE') {
             insertElem.setAttribute('style', previousBlockNode.getAttribute('style'));
         }
-        if (isNOU(previousBlockNode) && !isNOU(nextBlockNode) && nextBlockNode.hasAttribute('style') && nextBlockNode.nodeName !== 'TABLE') {
+        if (isNOU(previousBlockNode) && !isNOU(nextBlockNode) && nextBlockNode.nodeName !== '#text' && nextBlockNode.hasAttribute('style') && nextBlockNode.nodeName !== 'TABLE') {
             insertElem.setAttribute('style', nextBlockNode.getAttribute('style'));
         }
         return insertElem;

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

@@ -425,9 +425,9 @@ var HtmlEditor = /** @class */ (function () {
                 var liElement = this.getRangeLiNode(currentRange.startContainer);
                 if (liElement.previousElementSibling && liElement.previousElementSibling.childElementCount > 0) {
                     this.oldRangeElement = liElement.previousElementSibling.lastElementChild.nodeName === 'BR' ?
-                        liElement.previousElementSibling : liElement.previousElementSibling.lastElementChild;
+                        liElement.previousElementSibling : liElement.previousElementSibling.lastChild;
                     if (!isNOU(liElement.lastElementChild) && liElement.lastElementChild.nodeName !== 'BR' &&
-                        isNOU(liElement.lastElementChild.previousSibling)) {
+                        isNOU(liElement.lastElementChild.previousSibling) && liElement.lastChild.nodeName !== "#text") {
                         this.rangeElement = liElement.lastElementChild;
                         isLiElement = true;
                     }
@@ -452,7 +452,7 @@ var HtmlEditor = /** @class */ (function () {
                         ? this.oldRangeElement.lastElementChild.lastElementChild :
                         this.oldRangeElement.lastElementChild;
                 }
-                var lastNode = this.oldRangeElement.lastChild;
+                var lastNode = this.oldRangeElement.lastChild ? this.oldRangeElement.lastChild : this.oldRangeElement;
                 while (lastNode.nodeType !== 3 && lastNode.nodeName !== '#text' &&
                     lastNode.nodeName !== 'BR') {
                     lastNode = lastNode.lastChild;
@@ -460,12 +460,17 @@ var HtmlEditor = /** @class */ (function () {
                 this.parent.formatter.editorManager.nodeSelection.setCursorPoint(this.parent.contentModule.getDocument(), 
                 // eslint-disable-next-line
                 lastNode, lastNode.textContent.length);
-                if (this.oldRangeElement.querySelectorAll('BR').length === 1) {
+                if (this.oldRangeElement.nodeName !== '#text' && this.oldRangeElement.querySelectorAll('BR').length === 1) {
                     detach(this.oldRangeElement.querySelector('BR'));
                 }
                 if (!isNOU(this.rangeElement) && this.oldRangeElement !== this.rangeElement) {
                     while (this.rangeElement.firstChild) {
-                        this.oldRangeElement.appendChild(this.rangeElement.childNodes[0]);
+                        if (this.oldRangeElement.nodeName === '#text') {
+                            this.oldRangeElement.parentElement.appendChild(this.rangeElement.childNodes[0]);
+                        }
+                        else {
+                            this.oldRangeElement.appendChild(this.rangeElement.childNodes[0]);
+                        }
                     }
                     // eslint-disable-next-line
                     !isLiElement ? detach(this.rangeElement) : detach(this.rangeElement.parentElement);

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

@@ -149,7 +149,7 @@ var QuickToolbar = /** @class */ (function () {
 
      */
     QuickToolbar.prototype.showInlineQTBar = function (x, y, target) {
-        if (isNOU(this.parent) || this.parent.readonly || target.tagName.toLowerCase() === 'img') {
+        if (isNOU(this.parent) || this.parent.readonly || target.tagName.toLowerCase() === 'img' || this.inlineQTBar.element.querySelector('.e-rte-color-content')) {
             return;
         }
         this.inlineQTBar.showPopup(x, y, target);

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

@@ -56,6 +56,9 @@ var Toolbar = /** @class */ (function () {
                 if (e.target.classList.contains('e-hor-nav')) {
                     this.adjustContentHeight(e.target, true);
                 }
+                if (!isNullOrUndefined(e.target) && (e.target.classList.contains("e-rte-fontcolor-dropdown") || e.target.classList.contains("e-rte-backgroundcolor-dropdown"))) {
+                    this.parent.notify(events.showColorPicker, { toolbarClick: e.target.classList.contains("e-rte-fontcolor-dropdown") ? "fontcolor" : "backgroundcolor" });
+                }
         }
     };
     Toolbar.prototype.createToolbarElement = function () {

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

@@ -759,6 +759,11 @@ export declare const documentClickClosedBy: string;
 /**
  * @hidden
 
+ */
+export declare const showColorPicker: string;
+/**
+ * @hidden
+
  */
 export declare const blockEmptyNodes: string;
 /**

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

@@ -759,6 +759,11 @@ export var documentClickClosedBy = 'documentClickClosedBy';
 /**
  * @hidden
 
+ */
+export var showColorPicker = 'showColorPicker';
+/**
+ * @hidden
+
  */
 export var blockEmptyNodes = "address:empty, article:empty, aside:empty, blockquote:empty,\n details:empty, dd:empty, div:empty, dl:empty, dt:empty, fieldset:empty, footer:empty,form:empty, h1:empty,\n h2:empty, h3:empty, h4:empty, h5:empty, h6:empty, header:empty, hgroup:empty, li:empty, main:empty, nav:empty,\n noscript:empty, output:empty, p:empty, pre:empty, section:empty, td:empty, th:empty";
 /**

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

@@ -911,11 +911,14 @@ var RichTextEditor = /** @class */ (function (_super) {
                 clientX: touch.clientX, clientY: touch.clientY }
         });
         if (this.inputElement && ((this.editorMode === 'HTML' && this.inputElement.textContent.length !== 0) ||
-            (this.editorMode === 'Markdown' && this.inputElement.value.length !== 0)) || (e.target && (e.target.nodeName === 'VIDEO'
-            || e.target.querySelectorAll('.' + classes.CLS_VIDEOWRAP).length > 0) || (e.target && e.target.nodeName !== 'BR' &&
-            (e.target.classList.contains(classes.CLS_AUDIOWRAP) ||
-                e.target.classList.contains(classes.CLS_CLICKELEM) ||
-                e.target.classList.contains(classes.CLS_VID_CLICK_ELEM))))) {
+            (this.editorMode === 'Markdown' && this.inputElement.value.length !== 0)) ||
+            (e.target && !isNOU(closest(e.target, 'table'))) ||
+            (e.target && (e.target.nodeName === 'VIDEO' ||
+                e.target.querySelectorAll('.' + classes.CLS_VIDEOWRAP).length > 0) ||
+                (e.target && e.target.nodeName !== 'BR' &&
+                    (e.target.classList.contains(classes.CLS_AUDIOWRAP) ||
+                        e.target.classList.contains(classes.CLS_CLICKELEM) ||
+                        e.target.classList.contains(classes.CLS_VID_CLICK_ELEM))))) {
             this.notify(events.toolbarRefresh, { args: e });
         }
         this.triggerEditArea(e);
@@ -1799,6 +1802,13 @@ var RichTextEditor = /** @class */ (function (_super) {
         var imgPadding = 12;
         var imgResizeBorder = 2;
         var editEle = this.contentModule.getEditPanel();
+        if (this.editorMode === "HTML" && !isNOU(this.formatter.editorManager.nodeSelection) && !isNOU(this.formatter.editorManager.nodeSelection.range)) {
+            var currentRange = this.formatter.editorManager.nodeSelection.range;
+            if (currentRange.startContainer.nodeType !== 3 && currentRange.startContainer.closest &&
+                !isNOU(currentRange.startContainer.closest('TD'))) {
+                editEle = currentRange.startContainer;
+            }
+        }
         var eleStyle = window.getComputedStyle(editEle);
         var editEleMaxWidth = editEle.offsetWidth - (imgPadding + imgResizeBorder +
             parseFloat(eleStyle.paddingLeft.split('px')[0]) + parseFloat(eleStyle.paddingRight.split('px')[0]) +
@@ -2242,6 +2252,12 @@ var RichTextEditor = /** @class */ (function (_super) {
         var trg = e.relatedTarget;
         if (trg) {
             var rteElement = closest(trg, '.' + classes.CLS_RTE);
+            if (!rteElement && this.iframeSettings.enable) {
+                var iframeElement = this.element.querySelector('#' + this.getID() + '_rte-view');
+                if (iframeElement && iframeElement.contentWindow.document.body.contains(trg)) {
+                    rteElement = closest(iframeElement, '.' + classes.CLS_RTE);
+                }
+            }
             if (rteElement && rteElement === this.element) {
                 this.isBlur = false;
                 if (trg === this.getToolbarElement()) {

package/src/rich-text-editor/models/default-locale.js

@@ -94,7 +94,7 @@ export var defaultLocale = {
     'browse': 'Browse',
     'imageUrl': 'http://example.com/image.png',
     'audioUrl': 'http://example.com/audio.mp3',
-    'videoUrl': 'http://example.com/video.mp3',
+    'videoUrl': 'http://example.com/video.mp4',
     'webUrl': 'Web URL',
     'embedUrl': 'Embed Code',
     'imageCaption': 'Caption',