@syncfusion/ej2-richtexteditor 27.2.3 → 27.2.5

package/dist/global/index.d.ts

@@ -1,6 +1,6 @@
 /*!
 *  filename: index.d.ts
-*  version : 27.2.3
+*  version : 27.2.5
 *  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@27.2.2",
+  "_id": "@syncfusion/ej2-richtexteditor@27.2.4",
   "_inBundle": false,
-  "_integrity": "sha512-XhxuV4pqamHtam7yooDj+UAn8UorGonjtxLr2pDoVeiz3r/YodlN5r+UV8Ta6jk4p0hvmwyTa/wJGliZjPBuzQ==",
+  "_integrity": "sha512-1De20+Us2+PA3L4shDlbnUqadpJYfdbvv5DWyflNR5/axtshaR3WcqqfUCpCPxexCl3jVgznaEhnKv85YWf/zw==",
   "_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-27.2.2.tgz",
-  "_shasum": "0b7cb82941dbccb875cbea81919374a9245339a9",
+  "_resolved": "https://nexus.syncfusioninternal.com/repository/ej2-hotfix-new/@syncfusion/ej2-richtexteditor/-/ej2-richtexteditor-27.2.4.tgz",
+  "_shasum": "5360188d231a7d646f0647d8de7e2745384588f6",
   "_spec": "@syncfusion/ej2-richtexteditor@*",
   "_where": "/jenkins/workspace/elease-automation_release_27.1.1/packages/included",
   "author": {
@@ -37,12 +37,12 @@
   },
   "bundleDependencies": false,
   "dependencies": {
-    "@syncfusion/ej2-base": "~27.2.2",
-    "@syncfusion/ej2-buttons": "~27.2.2",
-    "@syncfusion/ej2-dropdowns": "~27.2.3",
-    "@syncfusion/ej2-filemanager": "~27.2.3",
-    "@syncfusion/ej2-inputs": "~27.2.2",
-    "@syncfusion/ej2-navigations": "~27.2.3",
+    "@syncfusion/ej2-base": "~27.2.5",
+    "@syncfusion/ej2-buttons": "~27.2.4",
+    "@syncfusion/ej2-dropdowns": "~27.2.5",
+    "@syncfusion/ej2-filemanager": "~27.2.5",
+    "@syncfusion/ej2-inputs": "~27.2.4",
+    "@syncfusion/ej2-navigations": "~27.2.5",
     "@syncfusion/ej2-popups": "~27.2.2",
     "@syncfusion/ej2-splitbuttons": "~27.2.2"
   },
@@ -80,6 +80,6 @@
     "url": "git+https://github.com/syncfusion/ej2-javascript-ui-controls.git"
   },
   "typings": "index.d.ts",
-  "version": "27.2.3",
+  "version": "27.2.5",
   "sideEffects": false
 }

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

@@ -89,7 +89,7 @@ var Indents = /** @class */ (function () {
                 isRtl ? (parentNode.style.marginRight = indentsValue) : (parentNode.style.marginLeft = indentsValue);
             }
             else {
-                indentsValue = (marginLeftOrRight === '' || marginLeftOrRight === '0px' || marginLeftOrRight === '0in') ? '' : parseInt(marginLeftOrRight, null) - this.indentValue + 'px';
+                indentsValue = (marginLeftOrRight === '' || marginLeftOrRight === '0px' || marginLeftOrRight === '0in') ? '' : (parseInt(marginLeftOrRight, null) - this.indentValue < 0) ? '0px' : (parseInt(marginLeftOrRight, null) - this.indentValue) + 'px';
                 isRtl ? (parentNode.style.marginRight = indentsValue) : (parentNode.style.marginLeft = indentsValue);
                 /* eslint-enable */
             }

package/src/editor-manager/plugin/inserthtml.d.ts

@@ -18,6 +18,7 @@ export declare class InsertHtml {
     private static pasteInsertHTML;
     private static listCleanUp;
     private static cleanUpListItems;
+    private static cleanUpFlattenListContainer;
     private static cleanUpListContainer;
     private static placeCursorEnd;
     private static getNodeCollection;

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

@@ -406,27 +406,33 @@ var InsertHtml = /** @class */ (function () {
         var range = nodeSelection.getRange(docElement);
         var startContainer = range.startContainer;
         var startOffset = range.startOffset;
-        if (range.startContainer.parentElement.closest('ol,ul') !== null && range.endContainer.parentElement.closest('ol,ul') !== null) {
-            var haslistCleanUp = this.cleanUpListItems(range.startContainer.parentElement.closest('ol,ul'));
-            var haslistContainerCleanUp = this.cleanUpListContainer(range.startContainer.parentElement.closest('ol,ul'));
-            if (haslistCleanUp || haslistContainerCleanUp) {
-                range.setStart(startContainer, startOffset);
-                range.setEnd(startContainer, startOffset);
+        var startParentElement = range.startContainer.parentElement;
+        var endParentElement = range.endContainer.parentElement;
+        if (!isNOU(startParentElement) && !isNOU(endParentElement)) {
+            var startClosestList = startParentElement.closest('ol, ul');
+            var endClosestList = endParentElement.closest('ol, ul');
+            if (!isNOU(startClosestList) && !isNOU(endClosestList)) {
+                var hasListCleanUp = this.cleanUpListItems(startClosestList);
+                var hasListContainerCleanUp = this.cleanUpListContainer(startClosestList);
+                if (hasListCleanUp || hasListContainerCleanUp) {
+                    range.setStart(startContainer, startOffset);
+                    range.setEnd(startContainer, startOffset);
+                }
             }
         }
     };
     InsertHtml.cleanUpListItems = function (parentContainer) {
         var _this = this;
         var hasListCleanUp = false;
-        var listItems = parentContainer.closest('ol, ul').querySelectorAll('li');
-        if (listItems.length === 0) {
+        var listItems;
+        if (!isNOU(parentContainer.closest('ol, ul'))) {
+            listItems = parentContainer.closest('ol, ul').querySelectorAll('li');
+        }
+        if (isNOU(listItems) || listItems.length === 0) {
             return false;
         }
         var nearestListItem = null;
         listItems.forEach(function (listItem) {
-            if (!isNOU(listItem.firstChild) && (listItem.firstChild.nodeName === 'OL' || listItem.firstChild.nodeName === 'UL')) {
-                listItem.style.listStyleType = 'none';
-            }
             var parentElement = listItem.parentElement;
             if (!isNOU(parentElement) && parentElement.nodeName !== 'OL' && parentElement.nodeName !== 'UL') {
                 if (isNOU(nearestListItem)) {
@@ -453,15 +459,38 @@ var InsertHtml = /** @class */ (function () {
                     var closestList = parentElement.closest('ol, ul');
                     nearestListItem.insertAdjacentElement('afterend', listItem);
                     nearestListItem = nearestListItem.nextSibling;
-                    _this.removeEmptyElements(closestList);
+                    if (!isNOU(closestList)) {
+                        _this.removeEmptyElements(closestList);
+                    }
                     hasListCleanUp = true;
                 }
             }
+        });
+        var cleanUpFlattenListContainer = this.cleanUpFlattenListContainer(parentContainer);
+        hasListCleanUp = cleanUpFlattenListContainer ? cleanUpFlattenListContainer : hasListCleanUp;
+        return hasListCleanUp;
+    };
+    InsertHtml.cleanUpFlattenListContainer = function (parentContainer) {
+        var hasListCleanUp = false;
+        var listItems;
+        if (!isNOU(parentContainer.closest('ol, ul'))) {
+            listItems = parentContainer.closest('ol, ul').querySelectorAll('li');
+        }
+        if (isNOU(listItems) || listItems.length === 0) {
+            return false;
+        }
+        listItems.forEach(function (listItem) {
+            if (!isNOU(listItem.firstChild) && (listItem.firstChild.nodeName === 'OL' || listItem.firstChild.nodeName === 'UL')) {
+                listItem.style.listStyleType = 'none';
+            }
             var nestedLi = Array.from(listItem.children).find(function (child) {
                 return child.tagName === 'LI' && (child.parentElement && child.parentElement.tagName !== 'OL' && child.parentElement.tagName !== 'UL');
             });
-            if (nestedLi && listItem.parentNode) {
+            if (!isNOU(nestedLi) && !isNOU(listItem.parentNode)) {
                 listItem.parentNode.replaceChild(nestedLi, listItem);
+                if (isNOU(nestedLi.textContent) || nestedLi.textContent.trim() === '') {
+                    nestedLi.remove();
+                }
                 hasListCleanUp = true;
             }
         });

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

@@ -204,6 +204,10 @@ var MsWordPaste = /** @class */ (function () {
             for (var i = 0; i < imgElem.length; i++) {
                 imgSrc.push(imgElem[i].getAttribute('src'));
                 imgName.push(imgElem[i].getAttribute('src').split('/')[imgElem[i].getAttribute('src').split('/').length - 1].split('.')[0]);
+                if (!isNOU(imgSrc) && imgSrc[i] !== '') {
+                    var imgType = imgSrc[i].split('.').pop().toLowerCase();
+                    imgElem[i].setAttribute('data-image-type', imgType);
+                }
             }
             var hexValue = this.hexConversion(rtfData);
             for (var i = 0; i < hexValue.length; i++) {
@@ -1031,9 +1035,22 @@ var MsWordPaste = /** @class */ (function () {
                     }
                 }
                 var listOrder = firstChild.querySelector('span[style="mso-list:Ignore"]');
+                var isEmptyMarkerSpan = isNOU(listOrder);
+                listOrder = isEmptyMarkerSpan ? firstChild : listOrder;
                 if (!isNOU(listOrder)) {
-                    this.listContents.push(listOrder.textContent.trim());
-                    detach(listOrder);
+                    var textContent = listOrder.textContent.trim();
+                    if (isEmptyMarkerSpan) {
+                        var bulletPattern = /^(\d{1,2}|[a-zA-Z]|[*#~•○■])(\.|\)|-)\s*/;
+                        var textContentMatch = textContent.match(bulletPattern);
+                        if (!isNOU(textContentMatch)) {
+                            textContent = textContentMatch[0].trim();
+                            listOrder.textContent = listOrder.textContent.trim().substring(textContent.length).trim();
+                        }
+                    }
+                    this.listContents.push(textContent);
+                    if (!isEmptyMarkerSpan) {
+                        detach(listOrder);
+                    }
                     this.removingComments(elem);
                     this.removeUnwantedElements(elem);
                 }

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

@@ -76,6 +76,11 @@ var NodeCutter = /** @class */ (function () {
                         if (node) {
                             InsertMethods.AppendBefore(fragment, node, true);
                         }
+                        else if (parent_1.childNodes.length > 1 && parent_1.childNodes.length !== index) {
+                            node = parent_1.childNodes[parent_1.childNodes.length - 1];
+                            InsertMethods.AppendBefore(fragment, node, true);
+                            node = node.nextSibling;
+                        }
                         else {
                             parent_1.appendChild(fragment);
                             var divNode = document.createElement('div');

package/src/editor-manager/plugin/selection-commands.d.ts

@@ -32,4 +32,5 @@ export declare class SelectionCommands {
     private static formatPainterCleanup;
     private static concatenateTextExcludingList;
     private static conCatenateTextNode;
+    private static hasColorsEqual;
 }

package/src/editor-manager/plugin/selection-commands.js

@@ -284,8 +284,10 @@ var SelectionCommands = /** @class */ (function () {
             range.startContainer.textContent.substring(range.startOffset, range.startContainer.textContent.length) :
             range.startContainer.textContent;
         var nodeText = nodes[index].textContent;
+        var 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))) {
             var nodeIndex = [];
             var cloneNode = nodes[index];
             var clonedElement = cloneNode;
@@ -306,10 +308,19 @@ var SelectionCommands = /** @class */ (function () {
             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;
                     }
@@ -498,12 +509,6 @@ var SelectionCommands = /** @class */ (function () {
             if (!isNOU(bgStyle) && bgStyle !== '') {
                 currentNodeElem.style.backgroundColor = bgStyle;
             }
-            if ((format === 'backgroundcolor' && !isNOU(fontStyle) && fontStyle !== '') &&
-                currentNodeElem.parentElement.innerHTML === currentNodeElem.outerHTML) {
-                var curParentElem = currentNodeElem.parentElement;
-                curParentElem.parentElement.insertBefore(currentNodeElem, curParentElem);
-                detach(curParentElem);
-            }
             if (format === 'fontsize' || format === 'fontcolor') {
                 var liElement = nodes[index].parentElement;
                 var parentElement = nodes[index].parentElement;
@@ -985,12 +990,12 @@ var SelectionCommands = /** @class */ (function () {
             case 'fontcolor':
                 liElement.querySelectorAll('span').forEach(function (span) {
                     colorStyle = span.style.color;
-                    if (colorStyle === constVal) {
+                    if (SelectionCommands.hasColorsEqual(colorStyle, constVal)) {
                         result = result + span.textContent;
                     }
                 });
-                if (result === value) {
-                    liElement.style.color = colorStyle;
+                if (!isNOU(result) && !isNOU(value) && result !== '' && value !== '' && result.replace(/\s+/g, '') === value.replace(/\s+/g, '')) {
+                    liElement.style.color = constVal;
                     liElement.style.textDecoration = 'inherit';
                 }
                 break;
@@ -1001,8 +1006,8 @@ var SelectionCommands = /** @class */ (function () {
                         result = result + span.textContent;
                     }
                 });
-                if (result === value) {
-                    liElement.style.fontSize = fontSize;
+                if (!isNOU(result) && !isNOU(value) && result !== '' && value !== '' && result.replace(/\s+/g, '') === value.replace(/\s+/g, '')) {
+                    liElement.style.fontSize = constVal;
                 }
                 break;
             case 'fontname':
@@ -1013,12 +1018,24 @@ var SelectionCommands = /** @class */ (function () {
                         result = result + span.textContent;
                     }
                 });
-                if (result === value) {
-                    liElement.style.fontFamily = fontFamily;
+                if (!isNOU(result) && !isNOU(value) && result !== '' && value !== '' && result.replace(/\s+/g, '') === value.replace(/\s+/g, '')) {
+                    liElement.style.fontFamily = constVal;
                 }
                 break;
         }
     };
+    SelectionCommands.hasColorsEqual = function (color1, color2) {
+        if (isNOU(color1) || isNOU(color2) || color1.trim() === '' || color2.trim() === '') {
+            return color1 === color2;
+        }
+        if (color1.startsWith('rgb(')) {
+            color1 = color1.replace('rgb(', 'rgba(').slice(0, -1) + ',1)';
+        }
+        if (color2.startsWith('rgb(')) {
+            color2 = color2.replace('rgb(', 'rgba(').slice(0, -1) + ',1)';
+        }
+        return color1.replace(/\s+/g, '') === color2.replace(/\s+/g, '');
+    };
     SelectionCommands.enterAction = 'P';
     return SelectionCommands;
 }());

package/src/rich-text-editor/actions/dropdown-buttons.js

@@ -113,11 +113,11 @@ var DropDownButtons = /** @class */ (function () {
                                 command: { value: 'Font', enumerable: true }, subCommand: { value: 'FontName', enumerable: true }
                             });
                         });
-                        var fontNameContent = isNullOrUndefined(_this.parent.fontFamily.default) ? fontItem[0].text :
+                        var 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: classes.CLS_DROPDOWN_POPUP + ' ' + classes.CLS_DROPDOWN_ITEMS + ' ' + classes.CLS_FONT_NAME_TB_BTN,
                             itemName: 'FontName', items: fontItem, element: targetElement
                         });
@@ -136,11 +136,11 @@ var DropDownButtons = /** @class */ (function () {
                                 command: { value: 'Font', enumerable: true }, subCommand: { value: 'FontSize', enumerable: true }
                             });
                         });
-                        var fontSizeContent = isNullOrUndefined(_this.parent.fontSize.default) ? fontsize[0].text :
+                        var fontSizeContent = isNullOrUndefined(_this.parent.fontSize.default) ? fontsize.length === 0 ? '' : fontsize[0].text :
                             _this.parent.fontSize.default;
                         var 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: classes.CLS_DROPDOWN_POPUP + ' ' + classes.CLS_DROPDOWN_ITEMS + ' ' + classes.CLS_FONT_SIZE_TB_BTN,
                             itemName: 'FontSize', items: fontsize, element: targetElement
                         });

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

@@ -584,10 +584,21 @@ var HtmlEditor = /** @class */ (function () {
                     // eslint-disable-next-line
                     lastNode, lastNode.textContent.length);
                 }
-                if (this.oldRangeElement.nodeName !== '#text' && this.oldRangeElement.querySelectorAll('BR').length === 1) {
-                    detach(this.oldRangeElement.querySelector('BR'));
+                var checkParent = false;
+                if (this.oldRangeElement && this.oldRangeElement.nodeName !== '#text' && this.oldRangeElement.querySelectorAll('BR').length === 1) {
+                    var brElement = this.oldRangeElement.querySelector('BR');
+                    if (brElement) {
+                        var brParentElement = brElement.parentNode;
+                        var currentState = this.oldRangeElement.innerHTML;
+                        this.parent.formatter.saveData(currentState);
+                        detach(brElement);
+                        if (brParentElement && brParentElement.childNodes.length === 0) {
+                            detach(brParentElement);
+                            checkParent = true;
+                        }
+                    }
                 }
-                if (!isNOU(this.rangeElement) && this.oldRangeElement !== this.rangeElement) {
+                if (!isNOU(this.rangeElement) && this.oldRangeElement !== this.rangeElement && !checkParent) {
                     while (this.rangeElement.firstChild) {
                         if (this.oldRangeElement.nodeName === '#text') {
                             this.oldRangeElement.parentElement.appendChild(this.rangeElement.childNodes[0]);

package/src/rich-text-editor/actions/paste-clean-up.js

@@ -112,6 +112,7 @@ var PasteCleanup = /** @class */ (function () {
         var value = null;
         var isClipboardHTMLDataNull = false;
         var imageproperties;
+        var allowedTypes = this.parent.insertImageSettings.allowedTypes;
         if (e.args && !isNOU(e.args.clipboardData)) {
             value = e.args.clipboardData.getData('text/html');
         }
@@ -131,6 +132,14 @@ var PasteCleanup = /** @class */ (function () {
                         (!isNOU(e.args.clipboardData.items[1]) ?
                             e.args.clipboardData.items[1].getAsFile() : null) :
                         e.args.clipboardData.items[0].getAsFile()) : null;
+                if (file) {
+                    var fileNameParts = file.name;
+                    var imgType_1 = fileNameParts.substring(fileNameParts.lastIndexOf('.'));
+                    if (allowedTypes.every(function (type) { return type.toLowerCase() !== imgType_1; })) {
+                        e.args.preventDefault();
+                        return;
+                    }
+                }
                 this.parent.notify(events.paste, {
                     file: file,
                     args: e.args,
@@ -179,6 +188,28 @@ var PasteCleanup = /** @class */ (function () {
             value = tempDivElem.innerHTML;
             var isValueNotEmpty = tempDivElem.textContent !== '' || !isNOU(tempDivElem.querySelector('img')) ||
                 !isNOU(tempDivElem.querySelector('table'));
+            var imgElements = tempDivElem.querySelectorAll('img');
+            imgElements.forEach(function (imgElement) {
+                var imageFileFormat;
+                var imgElementSrc = imgElement.getAttribute('src');
+                if (!isNullOrUndefined(imgElementSrc) && imgElementSrc !== '') {
+                    if (!isNullOrUndefined(imgElement.getAttribute('data-image-type'))) {
+                        imageFileFormat = imgElement.getAttribute('data-image-type');
+                    }
+                    else if (imgElementSrc.indexOf('base64') > -1 && imgElementSrc.indexOf('data:') > -1) {
+                        imageFileFormat = imgElementSrc.split(';')[0].split('/')[1];
+                    }
+                    else {
+                        imageFileFormat = imgElementSrc.split('.').pop().toLowerCase();
+                    }
+                    if (!isNullOrUndefined(imageFileFormat) &&
+                        allowedTypes.every(function (type) { return imageFileFormat !== type.substring(1).toLowerCase(); }) &&
+                        imgElementSrc.indexOf('blob') === -1) {
+                        detach(imgElement);
+                    }
+                }
+            });
+            value = tempDivElem.innerHTML;
             this.parent.notify(events.cleanupResizeElements, {
                 value: value,
                 callBack: function (currentValue) {

package/src/rich-text-editor/actions/resize.d.ts

@@ -10,6 +10,7 @@ export declare class Resize {
     protected touchEndEvent: string;
     private isDestroyed;
     private isResizing;
+    private iframeElement;
     private iframeMouseUpBoundFn;
     private constructor();
     private addEventListener;

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

@@ -20,6 +20,7 @@ var Resize = /** @class */ (function () {
         this.parent.on(events.destroy, this.destroy, this);
     };
     Resize.prototype.renderResizable = function () {
+        var _this = this;
         var enableRtlClass = (this.parent.enableRtl) ? classes.CLS_RTE_RES_WEST : classes.CLS_RTE_RES_EAST;
         this.resizer = this.parent.createElement('div', {
             id: this.parent.getID() + '-resizable', className: 'e-icons'
@@ -32,6 +33,12 @@ var Resize = /** @class */ (function () {
             this.parent.inputElement.classList.add('e-resize-enabled');
             this.parent.contentModule.getDocument().addEventListener('mouseup', this.iframeMouseUpBoundFn);
         }
+        this.iframeElement = this.parent.contentModule.getDocument().querySelectorAll('iframe');
+        if (!isNullOrUndefined(this.iframeElement)) {
+            this.iframeElement.forEach(function (iframe) {
+                EventHandler.add(iframe.contentDocument, 'mouseup', _this.stopResize, _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);
@@ -130,6 +137,7 @@ var Resize = /** @class */ (function () {
         this.isDestroyed = true;
     };
     Resize.prototype.removeEventListener = function () {
+        var _this = this;
         this.parent.off(events.initialEnd, this.renderResizable);
         this.parent.element.classList.remove(classes.CLS_RTE_RES_CNT);
         if (this.parent && this.parent.rootContainer && this.parent.rootContainer.classList.contains('e-resize-enabled')) {
@@ -139,6 +147,11 @@ var Resize = /** @class */ (function () {
             this.parent.inputElement.classList.remove('e-resize-enabled');
             this.parent.contentModule.getDocument().removeEventListener('mouseup', this.iframeMouseUpBoundFn);
         }
+        if (!isNullOrUndefined(this.iframeElement)) {
+            this.iframeElement.forEach(function (iframe) {
+                EventHandler.remove(iframe.contentDocument, 'mouseup', _this.stopResize);
+            });
+        }
         if (this.resizer) {
             EventHandler.remove(this.resizer, 'mousedown', this.resizeStart);
             EventHandler.remove(this.resizer, this.touchStartEvent, this.resizeStart);
@@ -151,6 +164,9 @@ var Resize = /** @class */ (function () {
         if (this.isResizing) {
             this.stopResize(e);
         }
+        else {
+            return;
+        }
     };
     /**
      * For internal use only - Get the module name.

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

@@ -155,6 +155,12 @@ export declare function decode(value: string): string;
  * @hidden
  */
 export declare function sanitizeHelper(value: string, parent: IRichTextEditor): string;
+/**
+ * @param {string} value - specifies the string value
+ * @returns {string} - returns the string value
+ * @hidden
+ */
+export declare function parseHelper(value: string): string;
 /**
  * @param {string} dataUrl - specifies the string value
  * @returns {BaseToolbar} - returns the value

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

@@ -54,6 +54,9 @@ export function hasClass(element, className) {
 export function getDropDownValue(items, value, type, returnType) {
     var data;
     var result;
+    if (items.length === 0 && value === 'FontSize') {
+        return 'Font Size';
+    }
     for (var k = 0; k < items.length; k++) {
         if (type === 'value' && items[k].value.toLocaleLowerCase() === value.toLocaleLowerCase()) {
             data = items[k];
@@ -202,7 +205,7 @@ export function setToolbarStatus(e, isPopToolbar, self) {
                             }
                             var fontNameItems = e.parent.fontFamily.items;
                             result = value === 'empty' ? '' : getDropDownValue(fontNameItems, value, 'value', 'text');
-                            var fontNameContent = isNOU(e.parent.fontFamily.default) ? fontNameItems[0].text :
+                            var fontNameContent = isNOU(e.parent.fontFamily.default) ? (fontNameItems.length === 0) ? self.serviceLocator.getService('rteLocale').getConstant('fontName') : fontNameItems[0].text :
                                 e.parent.fontFamily.default;
                             var name_1 = (isNOU(result) ? fontNameContent : result) === 'Default' ? self.serviceLocator.getService('rteLocale').getConstant('fontName')
                                 : (isNOU(result) ? fontNameContent : result);
@@ -219,9 +222,9 @@ export function setToolbarStatus(e, isPopToolbar, self) {
                                 break;
                             }
                             var fontSizeItems = e.parent.fontSize.items;
-                            var fontSizeContent = isNOU(e.parent.fontSize.default) ? fontSizeItems[0].text :
+                            var fontSizeContent = isNOU(e.parent.fontSize.default) ? (fontSizeItems.length === 0) ? self.serviceLocator.getService('rteLocale').getConstant('fontSize') : fontSizeItems[0].text :
                                 e.parent.fontSize.default;
-                            var fontSizeToolbarText = getDropDownValue(fontSizeItems, (value === '' ? fontSizeContent.replace(/\s/g, '') : value), (fontSizeContent.replace(/\s/g, '') === fontSizeItems[0].text && value === '') ? 'text' : 'value', 'text');
+                            var 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 + '" >' +
@@ -556,8 +559,57 @@ export function sanitizeHelper(value, parent) {
             value = SanitizeHtmlHelper.serializeValue(item, value);
         }
     }
+    value = parseHelper(value);
     return value;
 }
+/**
+ * @param {string} value - specifies the string value
+ * @returns {string} - returns the string value
+ * @hidden
+ */
+export function parseHelper(value) {
+    var temp = createElement('div');
+    temp.innerHTML = value;
+    var fontElements = temp.querySelectorAll('font');
+    fontElements.forEach(function (font) {
+        var span = document.createElement('span');
+        var style = (font.getAttribute('style') || '').replace(/style:/gi, '').trim();
+        if (!isNOU(style) && style.trim() !== '' && !style.endsWith(';')) {
+            style += ';';
+        }
+        Array.from(font.attributes).forEach(function (attr) {
+            var name = attr.name.toLowerCase();
+            var value = attr.value;
+            switch (name) {
+                case 'size':
+                    style += "font-size:" + value + ";";
+                    break;
+                case 'face':
+                    style += "font-family:" + value + ";";
+                    break;
+                case 'bgcolor':
+                    style += "background-color:" + value + ";";
+                    break;
+                case 'style':
+                    break;
+                default:
+                    style += name + ":" + value + ";";
+                    break;
+            }
+        });
+        if (!isNOU(style) && style.trim() !== '') {
+            style = style.replace(/;;+/g, ';');
+            span.setAttribute('style', style);
+        }
+        span.innerHTML = font.innerHTML;
+        if (!isNOU(font.parentNode)) {
+            font.parentNode.replaceChild(span, font);
+        }
+    });
+    var parsedValue = temp.innerHTML;
+    temp.remove();
+    return parsedValue;
+}
 /**
  * @param {string} dataUrl - specifies the string value
  * @returns {BaseToolbar} - returns the value

package/src/rich-text-editor/renderer/image-module.js

@@ -1612,6 +1612,8 @@ var Image = /** @class */ (function () {
         if (proxy.parent.formatter.getUndoRedoStack().length === 0) {
             proxy.parent.formatter.saveData();
         }
+        var previousSubCommand = this.args.item.subCommand;
+        this.args.item.subCommand = e.target.innerHTML === 'Update' ? 'Replace' : this.args.item.subCommand;
         if (!isNOU(proxy.uploadUrl) && proxy.uploadUrl.url !== '') {
             proxy.uploadUrl.cssClass = (proxy.parent.insertImageSettings.display === 'inline' ?
                 classes.CLS_IMGINLINE : classes.CLS_IMGBREAK);
@@ -1655,6 +1657,7 @@ var Image = /** @class */ (function () {
             }
             proxy.parent.formatter.process(proxy.parent, this.args, this.args.originalEvent, value);
         }
+        this.args.item.subCommand = previousSubCommand;
     };
     Image.prototype.imgsizeInput = function (e) {
         var _this = this;

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

@@ -227,7 +227,7 @@ var ToolbarRenderer = /** @class */ (function () {
                             alignEle = alignEle.parentElement;
                         }
                         var alignStyle = window.getComputedStyle(alignEle).textAlign;
-                        if (args.items[0].command === 'Alignments') {
+                        if (!isNOU(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;
@@ -250,7 +250,7 @@ var ToolbarRenderer = /** @class */ (function () {
                     //image preselect
                     var closestNode = startNode.closest('img');
                     var imageEle = closestNode ? closestNode : startNode.querySelector('img');
-                    if (args.items[0].command === 'Images') {
+                    if (!isNOU(args.items[0]) && args.items[0].command === 'Images') {
                         if (!isNOU(imageEle)) {
                             var index = void 0;
                             if (imageEle.classList.contains('e-imgleft') || imageEle.classList.contains('e-imginline')) {
@@ -268,7 +268,7 @@ var ToolbarRenderer = /** @class */ (function () {
                         }
                     }
                     //Formats preselect
-                    if (args.items[0].command === 'Formats' || args.items[0].command === 'Font') {
+                    if (!isNOU(args.items[0]) && (args.items[0].command === 'Formats' || args.items[0].command === 'Font')) {
                         var fontName_1 = [];
                         var formats_1 = [];
                         var hasUpdatedActive = false;