@syncfusion/ej2-richtexteditor 27.2.3 → 27.2.4

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

@@ -3135,6 +3135,9 @@ function hasClass(element, className) {
 function getDropDownValue(items, value, type, returnType) {
     let data;
     let result;
+    if (items.length === 0 && value === 'FontSize') {
+        return 'Font Size';
+    }
     for (let k = 0; k < items.length; k++) {
         if (type === 'value' && items[k].value.toLocaleLowerCase() === value.toLocaleLowerCase()) {
             data = items[k];
@@ -3282,7 +3285,7 @@ function setToolbarStatus(e, isPopToolbar, self) {
                             }
                             const fontNameItems = e.parent.fontFamily.items;
                             result = value === 'empty' ? '' : getDropDownValue(fontNameItems, value, 'value', 'text');
-                            const fontNameContent = isNullOrUndefined(e.parent.fontFamily.default) ? fontNameItems[0].text :
+                            const fontNameContent = isNullOrUndefined(e.parent.fontFamily.default) ? (fontNameItems.length === 0) ? self.serviceLocator.getService('rteLocale').getConstant('fontName') : fontNameItems[0].text :
                                 e.parent.fontFamily.default;
                             const name = (isNullOrUndefined(result) ? fontNameContent : result) === 'Default' ? self.serviceLocator.getService('rteLocale').getConstant('fontName')
                                 : (isNullOrUndefined(result) ? fontNameContent : result);
@@ -3299,9 +3302,9 @@ function setToolbarStatus(e, isPopToolbar, self) {
                                 break;
                             }
                             const fontSizeItems = e.parent.fontSize.items;
-                            const fontSizeContent = isNullOrUndefined(e.parent.fontSize.default) ? fontSizeItems[0].text :
+                            const fontSizeContent = isNullOrUndefined(e.parent.fontSize.default) ? (fontSizeItems.length === 0) ? self.serviceLocator.getService('rteLocale').getConstant('fontSize') : fontSizeItems[0].text :
                                 e.parent.fontSize.default;
-                            const fontSizeToolbarText = getDropDownValue(fontSizeItems, (value === '' ? fontSizeContent.replace(/\s/g, '') : value), (fontSizeContent.replace(/\s/g, '') === fontSizeItems[0].text && value === '') ? 'text' : 'value', 'text');
+                            const fontSizeToolbarText = getDropDownValue(fontSizeItems, (value === '' ? fontSizeContent.replace(/\s/g, '') : value), (fontSizeItems.length > 0 && fontSizeItems[0] && fontSizeContent.replace(/\s/g, '') === fontSizeItems[0].text && value === '') ? 'text' : 'value', 'text');
                             result = value === 'empty' ? '' : (fontSizeToolbarText === 'Default') ? self.serviceLocator.getService('rteLocale').getConstant('fontSize') : fontSizeToolbarText;
                             dropDown.fontSizeDropDown.content = ('<span style="display: inline-flex;' +
                                 'width:' + e.parent.fontSize.width + '" >' +
@@ -5676,7 +5679,7 @@ class ToolbarRenderer {
                             alignEle = alignEle.parentElement;
                         }
                         const alignStyle = window.getComputedStyle(alignEle).textAlign;
-                        if (args.items[0].command === 'Alignments') {
+                        if (!isNullOrUndefined(args.items[0]) && args.items[0].command === 'Alignments') {
                             if ((args.items[0].text === 'Align Left' && (alignStyle === 'left') || alignStyle === 'start')) {
                                 addClass([args.element.childNodes[0]], 'e-active');
                                 break;
@@ -5699,7 +5702,7 @@ class ToolbarRenderer {
                     //image preselect
                     const closestNode = startNode.closest('img');
                     const imageEle = closestNode ? closestNode : startNode.querySelector('img');
-                    if (args.items[0].command === 'Images') {
+                    if (!isNullOrUndefined(args.items[0]) && args.items[0].command === 'Images') {
                         if (!isNullOrUndefined(imageEle)) {
                             let index;
                             if (imageEle.classList.contains('e-imgleft') || imageEle.classList.contains('e-imginline')) {
@@ -5717,7 +5720,7 @@ class ToolbarRenderer {
                         }
                     }
                     //Formats preselect
-                    if (args.items[0].command === 'Formats' || args.items[0].command === 'Font') {
+                    if (!isNullOrUndefined(args.items[0]) && (args.items[0].command === 'Formats' || args.items[0].command === 'Font')) {
                         const fontName = [];
                         const formats = [];
                         let hasUpdatedActive = false;
@@ -16174,11 +16177,11 @@ class DropDownButtons {
                                 command: { value: 'Font', enumerable: true }, subCommand: { value: 'FontName', enumerable: true }
                             });
                         });
-                        const fontNameContent = isNullOrUndefined(this.parent.fontFamily.default) ? fontItem[0].text :
+                        const fontNameContent = isNullOrUndefined(this.parent.fontFamily.default) ? fontItem.length === 0 ? '' : fontItem[0].text :
                             this.parent.fontFamily.default;
                         this.fontNameDropDown = this.toolbarRenderer.renderDropDownButton({
                             iconCss: ((type === 'quick') ? 'e-font-name e-icons' : ''),
-                            content: this.dropdownContent(this.parent.fontFamily.width, type, ((type === 'quick') ? '' : (getDropDownValue(fontItem, fontNameContent, 'text', 'text') === 'Default' ? this.i10n.getConstant('fontName') : getDropDownValue(fontItem, fontNameContent, 'text', 'text')))),
+                            content: this.dropdownContent(this.parent.fontFamily.width, type, ((fontItem.length === 0) ? this.i10n.getConstant('fontName') : (type === 'quick') ? '' : (getDropDownValue(fontItem, fontNameContent, 'text', 'text') === 'Default' ? this.i10n.getConstant('fontName') : getDropDownValue(fontItem, fontNameContent, 'text', 'text')))),
                             cssClass: CLS_DROPDOWN_POPUP + ' ' + CLS_DROPDOWN_ITEMS + ' ' + CLS_FONT_NAME_TB_BTN,
                             itemName: 'FontName', items: fontItem, element: targetElement
                         });
@@ -16197,11 +16200,11 @@ class DropDownButtons {
                                 command: { value: 'Font', enumerable: true }, subCommand: { value: 'FontSize', enumerable: true }
                             });
                         });
-                        const fontSizeContent = isNullOrUndefined(this.parent.fontSize.default) ? fontsize[0].text :
+                        const fontSizeContent = isNullOrUndefined(this.parent.fontSize.default) ? fontsize.length === 0 ? '' : fontsize[0].text :
                             this.parent.fontSize.default;
                         const fontSizeDropDownContent = ((fontSizeContent === 'Default') ? getDropDownValue(fontsize, fontSizeContent.replace(/\s/g, ''), 'text', 'text') : getDropDownValue(fontsize, fontSizeContent.replace(/\s/g, ''), 'value', 'text'));
                         this.fontSizeDropDown = this.toolbarRenderer.renderDropDownButton({
-                            content: this.dropdownContent(this.parent.fontSize.width, type, getFormattedFontSize((fontSizeDropDownContent === 'Default') ? this.i10n.getConstant('fontSize') : fontSizeDropDownContent)),
+                            content: this.dropdownContent(this.parent.fontSize.width, type, fontsize.length === 0 ? this.i10n.getConstant('fontSize') : (getFormattedFontSize((fontSizeDropDownContent === 'Default') ? this.i10n.getConstant('fontSize') : fontSizeDropDownContent))),
                             cssClass: CLS_DROPDOWN_POPUP + ' ' + CLS_DROPDOWN_ITEMS + ' ' + CLS_FONT_SIZE_TB_BTN,
                             itemName: 'FontSize', items: fontsize, element: targetElement
                         });
@@ -23911,6 +23914,11 @@ class NodeCutter {
                         if (node) {
                             InsertMethods.AppendBefore(fragment, node, true);
                         }
+                        else if (parent.childNodes.length > 1 && parent.childNodes.length !== index) {
+                            node = parent.childNodes[parent.childNodes.length - 1];
+                            InsertMethods.AppendBefore(fragment, node, true);
+                            node = node.nextSibling;
+                        }
                         else {
                             parent.appendChild(fragment);
                             const divNode = document.createElement('div');
@@ -28138,8 +28146,10 @@ class SelectionCommands {
             range.startContainer.textContent.substring(range.startOffset, range.startContainer.textContent.length) :
             range.startContainer.textContent;
         const nodeText = nodes[index].textContent;
+        const isParentNodeSameAsParentElement = nodes[0].parentElement.nodeName === nodes[0].parentElement.parentElement.nodeName;
         if (!(range.startContainer === range.endContainer && range.startOffset === 0
-            && range.endOffset === range.startContainer.length)) {
+            && range.endOffset === range.startContainer.length
+            && (range.startContainer.textContent === formatNode.textContent || isParentNodeSameAsParentElement))) {
             const nodeIndex = [];
             let cloneNode = nodes[index];
             const clonedElement = cloneNode;
@@ -28160,10 +28170,19 @@ class SelectionCommands {
             if (!isCursor) {
                 while (cloneNode && cloneNode.childNodes.length > 0 && ((nodeIndex.length - 1) >= 0)
                     && (cloneNode.childNodes.length > nodeIndex[nodeIndex.length - 1])) {
-                    cloneNode = cloneNode.childNodes[nodeIndex[nodeIndex.length - 1]];
-                    nodeIndex.pop();
+                    if (cloneNode.childNodes.length > 1 && nodeIndex.length > 1) {
+                        cloneNode = cloneNode.childNodes[nodeIndex[nodeIndex.length - 2]];
+                        break;
+                    }
+                    else {
+                        cloneNode = cloneNode.childNodes[nodeIndex[nodeIndex.length - 1]];
+                        nodeIndex.pop();
+                    }
                 }
                 if (nodes[index].nodeName !== 'BR') {
+                    while (cloneNode.nodeType === 1 && cloneNode.childNodes.length > 0) {
+                        cloneNode = cloneNode.childNodes[0];
+                    }
                     if (cloneNode.nodeType === 3 && !(isCursor && cloneNode.nodeValue === '')) {
                         nodes[index] = cloneNode;
                     }
@@ -32593,10 +32612,21 @@ class HtmlEditor {
                     // eslint-disable-next-line
                     lastNode, lastNode.textContent.length);
                 }
-                if (this.oldRangeElement.nodeName !== '#text' && this.oldRangeElement.querySelectorAll('BR').length === 1) {
-                    detach(this.oldRangeElement.querySelector('BR'));
+                let checkParent = false;
+                if (this.oldRangeElement && this.oldRangeElement.nodeName !== '#text' && this.oldRangeElement.querySelectorAll('BR').length === 1) {
+                    const brElement = this.oldRangeElement.querySelector('BR');
+                    if (brElement) {
+                        const brParentElement = brElement.parentNode;
+                        const currentState = this.oldRangeElement.innerHTML;
+                        this.parent.formatter.saveData(currentState);
+                        detach(brElement);
+                        if (brParentElement && brParentElement.childNodes.length === 0) {
+                            detach(brParentElement);
+                            checkParent = true;
+                        }
+                    }
                 }
-                if (!isNullOrUndefined(this.rangeElement) && this.oldRangeElement !== this.rangeElement) {
+                if (!isNullOrUndefined(this.rangeElement) && this.oldRangeElement !== this.rangeElement && !checkParent) {
                     while (this.rangeElement.firstChild) {
                         if (this.oldRangeElement.nodeName === '#text') {
                             this.oldRangeElement.parentElement.appendChild(this.rangeElement.childNodes[0]);