@syncfusion/ej2-richtexteditor 20.4.44 → 20.4.48

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

@@ -1457,7 +1457,7 @@ let tools = {
     },
     'fontcolor': {
         'id': 'FontColor',
-        'icon': 'e-font-color',
+        'icon': 'e-rte-font-color',
         'tooltip': 'Font Color',
         'command': 'Font',
         'subCommand': 'FontColor',
@@ -3330,6 +3330,8 @@ class ToolbarRenderer {
             target: colorPicker.element.parentElement, cssClass: css,
             enablePersistence: this.parent.enablePersistence, enableRtl: this.parent.enableRtl,
             beforeOpen: (dropDownArgs) => {
+                colorPicker.inline = true;
+                colorPicker.dataBind();
                 if (proxy.parent.readonly || !proxy.parent.enabled) {
                     dropDownArgs.cancel = true;
                     return;
@@ -3496,7 +3498,7 @@ class ToolbarRenderer {
         const colorPicker = new ColorPicker({
             enablePersistence: this.parent.enablePersistence,
             enableRtl: this.parent.enableRtl,
-            inline: true,
+            inline: false,
             value: '#fff',
             created: () => {
                 const value = (item === 'backgroundcolor') ? proxy.parent.backgroundColor.default : proxy.parent.fontColor.default;
@@ -13007,7 +13009,7 @@ class InsertHtml {
                         detach(currentNode.nextSibling);
                     }
                 }
-                else if (currentNode.nodeName === '#text' && !isNullOrUndefined(currentNode.parentElement) &&
+                else if ((currentNode.nodeName === '#text' || currentNode.nodeName === "BR") && !isNullOrUndefined(currentNode.parentElement) &&
                     (currentNode.parentElement.nodeName === 'LI' || (blockNode === editNode && currentNode.parentElement === blockNode)) &&
                     currentNode.parentElement.textContent.trim().length > 0) {
                     splitedElm = currentNode;
@@ -15627,7 +15629,7 @@ class SelectionCommands {
                         isSubSup = formatNode === null ? false : true;
                     }
                 }
-                else if ((format === 'fontsize' || format === 'fontname' || format === 'fontcolor') && range.startContainer.parentElement === endNode) {
+                else if ((format === 'fontsize' || format === 'fontname' || format === 'fontcolor' || format === 'backgroundcolor') && range.startContainer.parentElement === endNode) {
                     formatNode = null;
                 }
                 if (index === 0 && formatNode === null) {
@@ -15893,21 +15895,21 @@ class SelectionCommands {
         return nodes[index];
     }
     static insertFormat(docElement, nodes, index, formatNode, isCursor, isFormat, isFontStyle, range, nodeCutter, format, value, domNode, endNode) {
-        let rootBlockNode;
+        let rootElementNode;
         if (!isCursor) {
             if ((formatNode === null && isFormat) || isFontStyle) {
                 if (nodes[index].nodeName !== 'BR') {
-                    if (format === 'fontsize' || format === 'fontname' || format === 'fontcolor') {
+                    if (format === 'fontsize' || format === 'fontname' || format === 'fontcolor' || format === 'backgroundcolor') {
                         let rangeNode = nodes[index];
                         while (rangeNode && !domNode.isBlockNode(rangeNode) && rangeNode !== endNode) {
                             if (domNode.isBlockNode(rangeNode.parentElement)) {
-                                rootBlockNode = rangeNode;
+                                rootElementNode = rangeNode;
                             }
                             rangeNode = rangeNode.parentElement;
                         }
-                        if (rootBlockNode && rootBlockNode.nodeType !== 3) {
-                            nodeCutter.SplitNode(range, rootBlockNode, true).cloneNode(true);
-                            nodeCutter.SplitNode(range, rootBlockNode, false).cloneNode(false);
+                        if (rootElementNode && rootElementNode.nodeType !== 3) {
+                            nodeCutter.SplitNode(range, rootElementNode, true).cloneNode(true);
+                            nodeCutter.SplitNode(range, rootElementNode, false).cloneNode(false);
                         }
                     }
                     nodes[index] = nodeCutter.GetSpliceNode(range, nodes[index]);
@@ -15919,11 +15921,11 @@ class SelectionCommands {
                 }
                 else if (!(isFontStyle === true && value === '')) {
                     const element = this.GetFormatNode(format, value);
-                    if (format === 'fontsize' || format === 'fontcolor' || format === 'fontname') {
-                        if (format !== 'fontname') {
+                    if (format === 'fontsize' || format === 'fontcolor' || format === 'fontname' || format === 'backgroundcolor') {
+                        if (format !== 'fontname' && format !== 'backgroundcolor') {
                             let liElement = nodes[index].parentElement;
                             let parentElement = nodes[index].parentElement;
-                            while (!isNullOrUndefined(parentElement) && parentElement.tagName.toLowerCase() !== 'li') {
+                            while (!isNullOrUndefined(parentElement) && parentElement.tagName.toLowerCase() !== 'li' && parentElement !== endNode) {
                                 parentElement = parentElement.parentElement;
                                 liElement = parentElement;
                             }
@@ -15938,13 +15940,13 @@ class SelectionCommands {
                                 }
                             }
                         }
-                        if (rootBlockNode && rootBlockNode.nodeType !== 3) {
+                        if (rootElementNode && rootElementNode.nodeType !== 3) {
                             const save = new NodeSelection();
                             save.save(range, docElement);
                             domNode.setMarker(save);
-                            var cloneNode = rootBlockNode.cloneNode(true);
+                            var cloneNode = rootElementNode.cloneNode(true);
                             element.appendChild(cloneNode);
-                            domNode.replaceWith(rootBlockNode, element.outerHTML);
+                            domNode.replaceWith(rootElementNode, element.outerHTML);
                             const currentStartNode = endNode.querySelector('.e-editor-select-start');
                             const currrentEndNode = endNode.querySelector('.e-editor-select-end');
                             if (index === 0) {