@syncfusion/ej2-richtexteditor 27.2.4 → 27.2.5

package/dist/global/index.d.ts

@@ -1,6 +1,6 @@
 /*!
 *  filename: index.d.ts
-*  version : 27.2.4
+*  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.3",
+  "_id": "@syncfusion/ej2-richtexteditor@27.2.4",
   "_inBundle": false,
-  "_integrity": "sha512-pp9x/DFwkNSSE2Tan2Lp5VmSNG56ukyqIdbHdqMEBOKVTCqX5nlYCpEjTU4T6piBi4BlbeiEcjasWJxtc3ZhNw==",
+  "_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.3.tgz",
-  "_shasum": "c4636a9f71acd2f9a8a0a63cbfb22593f71ac168",
+  "_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-base": "~27.2.5",
     "@syncfusion/ej2-buttons": "~27.2.4",
-    "@syncfusion/ej2-dropdowns": "~27.2.4",
-    "@syncfusion/ej2-filemanager": "~27.2.3",
+    "@syncfusion/ej2-dropdowns": "~27.2.5",
+    "@syncfusion/ej2-filemanager": "~27.2.5",
     "@syncfusion/ej2-inputs": "~27.2.4",
-    "@syncfusion/ej2-navigations": "~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.4",
+  "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/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

@@ -509,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;
@@ -996,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;
@@ -1012,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':
@@ -1024,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/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

@@ -559,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;