@syncfusion/ej2-richtexteditor 25.2.5 → 25.2.6

package/dist/global/index.d.ts

@@ -1,6 +1,6 @@
 /*!
 *  filename: index.d.ts
-*  version : 25.2.5
+*  version : 25.2.6
 *  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@25.2.4",
+  "_id": "@syncfusion/ej2-richtexteditor@25.2.5",
   "_inBundle": false,
-  "_integrity": "sha512-axjlW/M2AfJzH2TUhZ6jxy0E69gZEmC+Oxm+OBXnGOWNez043U4Nw8uw+eV/UuK52BrzdX0n99k9vxWwlIoKcw==",
+  "_integrity": "sha512-NonOxrKU+s4Zp5Miu995Sz33nwGR7Fw3cctfKMWUHH7ihn3sQyS8G55fS5//aypH1+fcqioRLz/MmYHsvUCPfA==",
   "_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-25.2.4.tgz",
-  "_shasum": "b32bf82ce555a4b5b2905f206d207d22866194fd",
+  "_resolved": "https://nexus.syncfusioninternal.com/repository/ej2-hotfix-new/@syncfusion/ej2-richtexteditor/-/ej2-richtexteditor-25.2.5.tgz",
+  "_shasum": "7d9d112209d8b618a69fdceb055dfa89af2472c4",
   "_spec": "@syncfusion/ej2-richtexteditor@*",
   "_where": "/jenkins/workspace/elease-automation_release_25.1.1/packages/included",
   "author": {
@@ -38,11 +38,11 @@
   "bundleDependencies": false,
   "dependencies": {
     "@syncfusion/ej2-base": "~25.2.5",
-    "@syncfusion/ej2-buttons": "~25.2.4",
-    "@syncfusion/ej2-filemanager": "~25.2.3",
-    "@syncfusion/ej2-inputs": "~25.2.5",
-    "@syncfusion/ej2-navigations": "~25.2.4",
-    "@syncfusion/ej2-popups": "~25.2.4",
+    "@syncfusion/ej2-buttons": "~25.2.6",
+    "@syncfusion/ej2-filemanager": "~25.2.6",
+    "@syncfusion/ej2-inputs": "~25.2.6",
+    "@syncfusion/ej2-navigations": "~25.2.6",
+    "@syncfusion/ej2-popups": "~25.2.6",
     "@syncfusion/ej2-splitbuttons": "~25.2.4"
   },
   "deprecated": false,
@@ -79,6 +79,6 @@
     "url": "git+https://github.com/syncfusion/ej2-javascript-ui-controls.git"
   },
   "typings": "index.d.ts",
-  "version": "25.2.5",
+  "version": "25.2.6",
   "sideEffects": false
 }

package/src/common/interface.d.ts

@@ -89,3 +89,17 @@ export interface IImageResizeFactor {
     botLeft: [number, number];
     botRight: [number, number];
 }
+/**
+ * The `ImageOrTableCursor` is used to specify the image or table cursor in Enter key Module.
+ *
+ * @private
+ * @hidden
+ *
+ *
+ * */
+export interface ImageOrTableCursor {
+    start: boolean;
+    startName: string;
+    end: boolean;
+    endName: string;
+}

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

@@ -255,7 +255,7 @@ var Lists = /** @class */ (function () {
             e.event.preventDefault();
         }
     };
-    Lists.prototype.onKeyUp = function () {
+    Lists.prototype.onKeyUp = function (e) {
         if (!isNOU(this.commonLIParent) && !isNOU(this.commonLIParent.querySelector('.removeList'))) {
             var currentLIElem = this.commonLIParent.querySelector('.removeList');
             while (!isNOU(currentLIElem.firstChild)) {
@@ -263,6 +263,14 @@ var Lists = /** @class */ (function () {
             }
             detach(currentLIElem);
         }
+        if (e.event.keyCode === 13) {
+            var listElements = this.parent.editableElement.querySelectorAll('UL, OL');
+            for (var i = 0; i < listElements.length; i++) {
+                if (!isNullOrUndefined(listElements[i]) && !isNullOrUndefined(listElements[i].parentElement) && !isNullOrUndefined(listElements[i].previousElementSibling) && (listElements[i].parentElement.nodeName === 'UL' || listElements[i].parentElement.nodeName === 'OL')) {
+                    listElements[i].previousElementSibling.appendChild(listElements[i]);
+                }
+            }
+        }
     };
     // eslint-disable-next-line @typescript-eslint/no-unused-vars
     Lists.prototype.firstListBackSpace = function (range, _e) {
@@ -504,6 +512,8 @@ var Lists = /** @class */ (function () {
                 else {
                     if (prevSibling.tagName === 'LI') {
                         var nestedElement = createElement(elements[i].parentNode.tagName);
+                        nestedElement.style.listStyleType =
+                            elements[i].parentNode.style.listStyleType;
                         append([nestedElement], prevSibling);
                         append([elements[i]], nestedElement);
                     }
@@ -611,7 +621,7 @@ var Lists = /** @class */ (function () {
                 }
                 var elemAtt = void 0;
                 elements[i].style.removeProperty('margin-left');
-                elemAtt = elements[i].tagName === 'IMG' ? '' : this.domNode.attributes(elements[i]);
+                elemAtt = elements[i].tagName === 'IMG' || elements[i].classList.contains('e-editor-select-start') ? '' : this.domNode.attributes(elements[i]);
                 if (elements[i].getAttribute('contenteditable') === 'true'
                     && elements[i].childNodes.length === 1 && elements[i].childNodes[0].nodeName === 'TABLE') {
                     var listEle = document.createElement(type);
@@ -735,6 +745,13 @@ var Lists = /** @class */ (function () {
         for (var c = 0; c < liParents.length; c++) {
             var node = liParents[c];
             var toFindtopOlUl = true;
+            var containsListElements = node;
+            while (containsListElements.parentElement) {
+                if (containsListElements.parentElement && containsListElements.parentElement.tagName !== 'LI' && containsListElements.parentElement.tagName !== 'OL' && containsListElements.parentElement.tagName !== 'UL') {
+                    break;
+                }
+                containsListElements = containsListElements.parentElement;
+            }
             if (toFindtopOlUl && (liParents[c].parentElement.parentElement.nodeName === 'OL' || liParents[c].parentElement.parentElement.nodeName === 'UL')) {
                 toFindtopOlUl = false;
                 var preElement = liParents[c].parentElement.parentElement;
@@ -754,9 +771,43 @@ var Lists = /** @class */ (function () {
                     node.previousElementSibling.lastChild.append(node);
                 }
             }
+            else if (this.domNode.isList(node.previousElementSibling) && containsListElements.contains(node.previousElementSibling) && ((node.tagName === 'OL' || node.tagName === 'UL') && (node.previousElementSibling.nodeName === 'OL' || node.previousElementSibling.nodeName === 'UL'))) {
+                var contentNodes = this.domNode.contents(node);
+                for (var f = 0; f < contentNodes.length; f++) {
+                    node.previousElementSibling.appendChild(contentNodes[f]);
+                }
+                node.parentNode.removeChild(node);
+            }
         }
         if (firstNodeOL) {
             firstNodeOL.style.listStyleType = listStyleType;
+            var range = this.parent.nodeSelection.getRange(this.parent.currentDocument);
+            var listOlUlElements = [];
+            if (range.commonAncestorContainer.nodeName === 'UL' || range.commonAncestorContainer.nodeName === 'OL') {
+                if (range.commonAncestorContainer instanceof Element) {
+                    listOlUlElements.push(range.commonAncestorContainer);
+                }
+                listOlUlElements = listOlUlElements.concat(Array.from(range.commonAncestorContainer.querySelectorAll('ol, ul')));
+            }
+            else {
+                listOlUlElements = Array.from(range.commonAncestorContainer.querySelectorAll('ol, ul'));
+            }
+            for (var k = 0; k < listOlUlElements.length; k++) {
+                var listStyle = void 0;
+                var listElements = listOlUlElements[k];
+                while (listElements) {
+                    if (listElements.nodeName === 'OL' || listElements.nodeName === 'OL') {
+                        if (listElements.style.listStyleType !== '' && listElements.style.listStyleType !== 'none' && listElements.nodeName !== 'LI') {
+                            listStyle = listElements.style.listStyleType;
+                        }
+                        else if (!isNOU(listStyle) && (listElements.style.listStyleType === '' || listElements.style.listStyleType === 'none') &&
+                            listElements.nodeName !== 'LI' && (listElements.nodeName === 'UL' || listElements.nodeName === 'OL')) {
+                            listElements.style.listStyleType = listStyle;
+                        }
+                    }
+                    listElements = listElements.querySelector('UL,OL');
+                }
+            }
         }
     };
     Lists.prototype.findUnSelected = function (temp, elements) {

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

@@ -821,7 +821,7 @@ var MsWordPaste = /** @class */ (function () {
                 !isNormalList) {
                 prevList = null;
             }
-            var pElement = createElement('p', { className: 'MsoNormal' });
+            var pElement = createElement('p', { className: 'MsoNoSpacing' });
             pElement.innerHTML = collection[index].content.join(' ');
             if ((collection[index].nestedLevel === 1) &&
                 (listCount === 0 || lfo !== collection[index].listFormatOverride) &&

package/src/rich-text-editor/actions/enter-key.d.ts

@@ -19,5 +19,10 @@ export declare class EnterKeyAction {
     private insertBRElement;
     private insertFocusContent;
     private createInsertElement;
+    private triggerActionComplete;
     private handleCursorAtTableSide;
+    private handleEnterKeyAtImageSide;
+    private isTableOrImageStart;
+    private isTableOrImageEnd;
+    private processedTableImageCursor;
 }

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

@@ -39,16 +39,18 @@ var EnterKeyAction = /** @class */ (function () {
         this.getRangeNode();
         var isTableEnter = true;
         this.formatTags = ['h1', 'h2', 'h3', 'h4', 'h5', 'h6', 'blockquote'];
-        var isCursorAtTableEnd = this.range.collapsed && (this.range.startContainer.nodeType === 1) &&
-            this.range.startContainer.isContentEditable &&
-            this.range.startContainer.childNodes[this.range.startOffset - 1] &&
-            this.range.startContainer.childNodes[this.range.startOffset - 1].nodeName === 'TABLE';
-        var isCursorAtTableStart = this.range.collapsed && (this.range.startContainer.nodeType === 1) &&
-            this.range.startContainer.isContentEditable && this.range.startContainer.childNodes[this.range.startOffset] &&
-            this.range.startContainer.childNodes[this.range.startOffset].nodeName === 'TABLE';
-        if (isCursorAtTableEnd || isCursorAtTableStart) {
-            this.handleCursorAtTableSide(e, isCursorAtTableStart, isCursorAtTableEnd);
-            return;
+        var tableImagCursor = this.processedTableImageCursor();
+        if (tableImagCursor.start || tableImagCursor.end) {
+            if (tableImagCursor.startName === 'TABLE' || tableImagCursor.endName === 'TABLE') { // Default browser action prevented and hanled manually.
+                this.handleCursorAtTableSide(e, tableImagCursor.start, tableImagCursor.end);
+                return;
+            }
+        }
+        if (tableImagCursor.start || tableImagCursor.end || this.range.startContainer.nodeName === 'IMG') {
+            if (this.parent.enterKey === 'BR' && (tableImagCursor.startName === 'IMG' || tableImagCursor.endName === 'IMG' || this.range.startContainer.nodeName === 'IMG')) { // Default browser action prevented and hanled manually.
+                this.handleEnterKeyAtImageSide(e, tableImagCursor.start, tableImagCursor.end);
+                return;
+            }
         }
         if (!isNOU(this.startNode.closest('TABLE')) && !isNOU(this.endNode.closest('TABLE'))) {
             isTableEnter = false;
@@ -417,7 +419,6 @@ var EnterKeyAction = /** @class */ (function () {
                                     var outerBRElem = _this.parent.createElement('br');
                                     if (_this.range.startOffset === 0 && _this.range.endOffset === 0 &&
                                         !isNOU(currentParent.previousSibling) && currentParent.previousSibling.nodeName === 'BR' && currentParent.nodeName !== 'P' && currentParent.nodeName !== 'DIV') {
-                                        // eslint-disable-next-line @typescript-eslint/no-unused-vars
                                         newElem = _this.parent.formatter.editorManager.nodeCutter.SplitNode(_this.range, currentParent, false).cloneNode(true);
                                         _this.parent.formatter.editorManager.domNode.insertAfter(outerBRElem, currentParent);
                                         _this.insertFocusContent();
@@ -447,7 +448,7 @@ var EnterKeyAction = /** @class */ (function () {
                             }
                             e.args.preventDefault();
                         }
-                        _this.parent.trigger(events.actionComplete, { requestType: shiftKey_1 ? 'ShiftEnterAction' : 'EnterAction', args: e.args });
+                        _this.triggerActionComplete(e, shiftKey_1);
                     }
                 });
             }
@@ -517,6 +518,9 @@ var EnterKeyAction = /** @class */ (function () {
         }
         return insertElem;
     };
+    EnterKeyAction.prototype.triggerActionComplete = function (e, shiftKey) {
+        this.parent.trigger(events.actionComplete, { requestType: shiftKey ? 'ShiftEnterAction' : 'EnterAction', args: e.args });
+    };
     EnterKeyAction.prototype.handleCursorAtTableSide = function (e, isStart, isEnd) {
         var _this = this;
         if (this.parent.enterKey !== 'BR') {
@@ -547,11 +551,92 @@ var EnterKeyAction = /** @class */ (function () {
                     }
                     _this.parent.formatter.editorManager.nodeSelection.setCursorPoint(_this.parent.contentModule.getDocument(), newElement, 0);
                     e.args.preventDefault();
-                    _this.parent.trigger(events.actionComplete, { requestType: shiftKey_2 ? 'ShiftEnterAction' : 'EnterAction', args: e.args });
+                    _this.triggerActionComplete(e, shiftKey_2);
                 }
             });
         }
     };
+    EnterKeyAction.prototype.handleEnterKeyAtImageSide = function (e, isStart, isEnd) {
+        var _this = this;
+        var actionBeginArgs = {
+            cancel: false,
+            name: events.actionBegin,
+            requestType: e.args.shiftKey ? 'ShiftEnterAction' : 'EnterAction',
+            originalEvent: e.args
+        };
+        var directRange = false;
+        if (this.range.startContainer.nodeName === 'IMG' && this.range.startOffset === 0) {
+            directRange = true;
+        }
+        this.parent.trigger(events.actionBegin, actionBeginArgs, function (actionBeginArgs) {
+            if (!actionBeginArgs.cancel) {
+                if (_this.parent.enterKey === 'BR') {
+                    var newElement = _this.parent.createElement('BR');
+                    var imageElement = void 0;
+                    if (directRange) {
+                        imageElement = _this.range.startContainer;
+                        imageElement.parentElement.insertBefore(newElement, imageElement);
+                        _this.parent.formatter.editorManager.nodeSelection.
+                            setCursorPoint(_this.parent.contentModule.getDocument(), imageElement, 0);
+                    }
+                    if (isStart) {
+                        imageElement = _this.range.startContainer.childNodes[_this.range.startOffset];
+                        imageElement.parentElement.insertBefore(newElement, imageElement);
+                        _this.parent.formatter.editorManager.nodeSelection.
+                            setCursorPoint(_this.parent.contentModule.getDocument(), imageElement, 0);
+                    }
+                    if (isEnd) {
+                        imageElement = _this.range.startContainer.childNodes[_this.range.startOffset - 1];
+                        if (!isNOU(imageElement.nextSibling)) {
+                            imageElement.parentElement.insertBefore(newElement, imageElement.nextSibling);
+                            _this.parent.formatter.editorManager.nodeSelection.setCursorPoint(_this.parent.contentModule.getDocument(), newElement.nextSibling, 0);
+                        }
+                        else if (isNOU(imageElement.nextSibling)) {
+                            imageElement.parentElement.appendChild(newElement);
+                            var brElement = _this.parent.createElement('BR');
+                            imageElement.parentElement.appendChild(brElement);
+                            _this.parent.formatter.editorManager.nodeSelection.setCursorPoint(_this.parent.contentModule.getDocument(), brElement, 0);
+                        }
+                    }
+                    e.args.preventDefault();
+                    _this.triggerActionComplete(e, e.args.shiftKey);
+                }
+            }
+        });
+    };
+    EnterKeyAction.prototype.isTableOrImageStart = function () {
+        var customHandlerElements = ['IMG', 'TABLE'];
+        var startContainer = this.range.startContainer;
+        var startOffset = this.range.startOffset;
+        var isCursorAtStart = this.range.collapsed && (startContainer.nodeType === 1) &&
+            startContainer.isContentEditable && startContainer.childNodes[startOffset] &&
+            (customHandlerElements.indexOf(startContainer.childNodes[startOffset].nodeName) > -1);
+        if (isCursorAtStart) {
+            return { start: isCursorAtStart, startNodeName: startContainer.childNodes[startOffset].nodeName };
+        }
+        else {
+            return { start: false, startNodeName: '' };
+        }
+    };
+    EnterKeyAction.prototype.isTableOrImageEnd = function () {
+        var customHandlerElements = ['IMG', 'TABLE'];
+        var startContainer = this.range.startContainer;
+        var startOffset = this.range.startOffset;
+        var isCursorAtEnd = this.range.collapsed && (startContainer.nodeType === 1) &&
+            startContainer.isContentEditable && startContainer.childNodes[startOffset - 1] &&
+            (customHandlerElements.indexOf(startContainer.childNodes[startOffset - 1].nodeName) > -1);
+        if (isCursorAtEnd) {
+            return { end: isCursorAtEnd, endNodeName: startContainer.childNodes[startOffset - 1].nodeName };
+        }
+        else {
+            return { end: false, endNodeName: '' };
+        }
+    };
+    EnterKeyAction.prototype.processedTableImageCursor = function () {
+        var _a = this.isTableOrImageStart(), start = _a.start, startNodeName = _a.startNodeName;
+        var _b = this.isTableOrImageEnd(), end = _b.end, endNodeName = _b.endNodeName;
+        return { start: start, startName: startNodeName, end: end, endName: endNodeName };
+    };
     return EnterKeyAction;
 }());
 export { EnterKeyAction };

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

@@ -292,7 +292,7 @@ var HtmlEditor = /** @class */ (function () {
                 var range = this.nodeSelectionObj.getRange(this.contentRenderer.getDocument());
                 var parentNode = this.nodeSelectionObj.getParentNodeCollection(range);
                 if (!((parentNode[0].nodeName === 'LI' || closest(parentNode[0], 'li') ||
-                    closest(parentNode[0], 'table')) && range.startOffset === 0)) {
+                    closest(parentNode[0], 'table')))) {
                     args.preventDefault();
                     var selection = this.contentRenderer.getDocument().getSelection().getRangeAt(0);
                     var alignmentNodes = this.parent.formatter.editorManager.domNode.blockNodes();

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

@@ -674,7 +674,8 @@ var PasteCleanup = /** @class */ (function () {
             clipBoardElem = this.allowedStyle(clipBoardElem);
         }
         this.saveSelection.restore();
-        clipBoardElem.innerHTML = this.sanitizeHelper(clipBoardElem.innerHTML);
+        var newText = clipBoardElem.innerHTML.split("&").join("&");
+        clipBoardElem.innerHTML = this.sanitizeHelper(newText);
         var allImg = clipBoardElem.querySelectorAll('img');
         for (var i = 0; i < allImg.length; i++) {
             if (!isNOU(allImg[i].getAttribute('src'))) {

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

@@ -1330,6 +1330,7 @@ export declare class RichTextEditor extends Component<HTMLElement> implements IN
     updateValueData(): void;
     private removeSheets;
     private updatePanelValue;
+    private listOrderCorrection;
     private setHeight;
     /**
      * setPlaceHolder method

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

@@ -1425,7 +1425,7 @@ var RichTextEditor = /** @class */ (function (_super) {
         }
     };
     RichTextEditor.prototype.updatePanelValue = function () {
-        var value = this.value;
+        var value = this.listOrderCorrection(this.value);
         value = (this.enableHtmlEncode && this.value) ? decode(value) : value;
         var getTextArea = this.element.querySelector('.' + classes.CLS_RTE_SOURCE_CODE_TXTAREA);
         if (value) {
@@ -1469,6 +1469,17 @@ var RichTextEditor = /** @class */ (function (_super) {
             this.countModule.refresh();
         }
     };
+    RichTextEditor.prototype.listOrderCorrection = function (value) {
+        var valueElementWrapper = this.createElement('div');
+        valueElementWrapper.innerHTML = value;
+        var listElements = valueElementWrapper.querySelectorAll('UL, OL');
+        for (var i = 0; i < listElements.length; i++) {
+            if (!isNOU(listElements[i]) && !isNOU(listElements[i].parentElement) && !isNOU(listElements[i].previousElementSibling) && (listElements[i].parentElement.nodeName === 'UL' || listElements[i].parentElement.nodeName === 'OL')) {
+                listElements[i].previousElementSibling.appendChild(listElements[i]);
+            }
+        }
+        return valueElementWrapper.innerHTML;
+    };
     RichTextEditor.prototype.setHeight = function (height) {
         if (height !== 'auto') {
             this.element.style.height = formatUnit(height);

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

@@ -624,13 +624,13 @@ var Image = /** @class */ (function () {
             selectParentEle = this.parent.formatter.editorManager.nodeSelection.getParentNodeCollection(range);
             if (!originalEvent.ctrlKey && originalEvent.key && (originalEvent.key.length === 1 || originalEvent.action === 'enter') &&
                 (!isNOU(selectParentEle[0]) && selectParentEle[0].tagName === 'IMG') && selectParentEle[0].parentElement) {
-                var prev = selectParentEle[0].parentElement.childNodes[0];
                 if (this.contentModule.getEditPanel().querySelector('.e-img-resize')) {
                     this.removeResizeEle();
                 }
-                this.parent.formatter.editorManager.nodeSelection.setSelectionText(this.contentModule.getDocument(), prev, prev, prev.textContent.length, prev.textContent.length);
                 removeClass([selectParentEle[0]], 'e-img-focus');
-                this.quickToolObj.imageQTBar.hidePopup();
+                if (this.quickToolObj && this.quickToolObj.imageQTBar) {
+                    this.quickToolObj.imageQTBar.hidePopup();
+                }
             }
         }
         if (originalEvent.ctrlKey && (originalEvent.keyCode === 89 || originalEvent.keyCode === 90)) {