@syncfusion/ej2-richtexteditor 19.2.57 → 19.3.43

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

@@ -238,7 +238,8 @@ var IsFormatted = /** @class */ (function () {
         'sup',
         'tt',
         'u',
-        'var'
+        'var',
+        'del'
     ];
     return IsFormatted;
 }());

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

@@ -33,6 +33,7 @@ export declare class Lists {
     private noPreviousElement;
     private nestedList;
     private applyListsHandler;
+    private setSelectionBRConfig;
     private applyLists;
     private removeEmptyListElements;
     private isRevert;

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

@@ -47,7 +47,7 @@ var Lists = /** @class */ (function () {
         var olListStartRegex = [/^[1]+[.]+$/, /^[i]+[.]+$/, /^[a]+[.]+$/];
         if (!isNullOrUndefined(range.startContainer.textContent.slice(0, range.startOffset))) {
             for (var i = 0; i < olListStartRegex.length; i++) {
-                if (olListStartRegex[i].test(range.startContainer.textContent.slice(0, range.startOffset).trim())) {
+                if (olListStartRegex[i].test(range.startContainer.textContent.replace(/\u200B/g, '').slice(0, range.startOffset).trim())) {
                     return true;
                 }
             }
@@ -75,8 +75,8 @@ var Lists = /** @class */ (function () {
                 this.applyListsHandler({ subCommand: 'OL', callBack: e.callBack });
                 e.event.preventDefault();
             }
-            else if (range.startContainer.textContent.slice(0, range.startOffset).trim() === '*' ||
-                range.startContainer.textContent.slice(0, range.startOffset).trim() === '-') {
+            else if (range.startContainer.textContent.replace(/\u200B/g, '').slice(0, range.startOffset).trim() === '*' ||
+                range.startContainer.textContent.replace(/\u200B/g, '').slice(0, range.startOffset).trim() === '-') {
                 range.startContainer.textContent = range.startContainer.textContent.slice(range.startOffset, range.startContainer.textContent.length);
                 this.applyListsHandler({ subCommand: 'UL', callBack: e.callBack });
                 e.event.preventDefault();
@@ -97,15 +97,24 @@ var Lists = /** @class */ (function () {
             var startNodeParent = startNode.parentElement;
             if (isNOU(startNodeParent.parentElement.closest('UL')) && isNOU(startNodeParent.parentElement.closest('OL'))) {
                 if (!isNOU(startNode.nextElementSibling)) {
-                    //startNode.classList.add('innerNode');
                     var nearBlockNode = this.parent.domNode.blockParentNode(startNode);
                     this.parent.nodeCutter.GetSpliceNode(range, nearBlockNode);
                 }
-                var paraTag = createElement('p');
-                paraTag.innerHTML = '<br>';
-                this.parent.domNode.insertAfter(paraTag, startNodeParent);
+                var insertTag = void 0;
+                if (e.enterAction === 'DIV') {
+                    insertTag = createElement('div');
+                    insertTag.innerHTML = '<br>';
+                }
+                else if (e.enterAction === 'P') {
+                    insertTag = createElement('p');
+                    insertTag.innerHTML = '<br>';
+                }
+                else {
+                    insertTag = createElement('br');
+                }
+                this.parent.domNode.insertAfter(insertTag, startNodeParent);
                 e.event.preventDefault();
-                this.parent.nodeSelection.setCursorPoint(this.parent.currentDocument, paraTag, 0);
+                this.parent.nodeSelection.setCursorPoint(this.parent.currentDocument, insertTag, 0);
                 if (startNodeParent.textContent === '') {
                     detach(startNodeParent);
                 }
@@ -402,6 +411,66 @@ var Lists = /** @class */ (function () {
         this.currentAction = e.subCommand = this.currentAction === 'NumberFormatList' ? 'OL' : this.currentAction === 'BulletFormatList' ? 'UL' : this.currentAction;
         this.domNode.setMarker(this.saveSelection);
         var listsNodes = this.domNode.blockNodes();
+        if (e.enterAction === 'BR') {
+            this.setSelectionBRConfig();
+            var allSelectedNode = this.parent.nodeSelection.getSelectedNodes(this.parent.currentDocument);
+            var selectedNodes = this.parent.nodeSelection.getSelectionNodes(allSelectedNode);
+            var currentFormatNodes = [];
+            if (selectedNodes.length === 0) {
+                selectedNodes.push(listsNodes[0]);
+            }
+            for (var i = 0; i < selectedNodes.length; i++) {
+                var currentNode = selectedNodes[i];
+                var previousCurrentNode = void 0;
+                while (!this.parent.domNode.isBlockNode(currentNode) && currentNode !== this.parent.editableElement) {
+                    previousCurrentNode = currentNode;
+                    currentNode = currentNode.parentElement;
+                }
+                if (this.parent.domNode.isBlockNode(currentNode) && currentNode === this.parent.editableElement) {
+                    currentFormatNodes.push(previousCurrentNode);
+                }
+            }
+            for (var i = 0; i < currentFormatNodes.length; i++) {
+                if (!this.parent.domNode.isBlockNode(currentFormatNodes[i])) {
+                    var currentNode = currentFormatNodes[i];
+                    var previousNode = currentNode;
+                    while (currentNode === this.parent.editableElement) {
+                        previousNode = currentNode;
+                        currentNode = currentNode.parentElement;
+                    }
+                    var tempElem = void 0;
+                    if (this.parent.domNode.isBlockNode(previousNode.parentElement) &&
+                        previousNode.parentElement === this.parent.editableElement) {
+                        tempElem = createElement('p');
+                        previousNode.parentElement.insertBefore(tempElem, previousNode);
+                        tempElem.appendChild(previousNode);
+                    }
+                    else {
+                        tempElem = previousNode;
+                    }
+                    var preNode = tempElem.previousSibling;
+                    while (!isNOU(preNode) && preNode.nodeName !== 'BR' &&
+                        !this.parent.domNode.isBlockNode(preNode)) {
+                        tempElem.firstChild.parentElement.insertBefore(preNode, tempElem.firstChild);
+                        preNode = tempElem.previousSibling;
+                    }
+                    if (!isNOU(preNode) && preNode.nodeName === 'BR') {
+                        detach(preNode);
+                    }
+                    var postNode = tempElem.nextSibling;
+                    while (!isNOU(postNode) && postNode.nodeName !== 'BR' &&
+                        !this.parent.domNode.isBlockNode(postNode)) {
+                        tempElem.appendChild(postNode);
+                        postNode = tempElem.nextSibling;
+                    }
+                    if (!isNOU(postNode) && postNode.nodeName === 'BR') {
+                        detach(postNode);
+                    }
+                }
+            }
+            this.setSelectionBRConfig();
+            listsNodes = this.parent.domNode.blockNodes();
+        }
         for (var i = 0; i < listsNodes.length; i++) {
             if (listsNodes[i].tagName === 'TABLE' && !range.collapsed) {
                 listsNodes.splice(i, 1);
@@ -422,6 +491,16 @@ var Lists = /** @class */ (function () {
             });
         }
     };
+    Lists.prototype.setSelectionBRConfig = function () {
+        var startElem = this.parent.editableElement.querySelector('.' + markerClassName.startSelection);
+        var endElem = this.parent.editableElement.querySelector('.' + markerClassName.endSelection);
+        if (isNOU(endElem)) {
+            this.parent.nodeSelection.setCursorPoint(this.parent.currentDocument, startElem, 0);
+        }
+        else {
+            this.parent.nodeSelection.setSelectionText(this.parent.currentDocument, startElem, endElem, 0, 0);
+        }
+    };
     Lists.prototype.applyLists = function (elements, type, selector, item) {
         var isReverse = true;
         if (this.isRevert(elements, type) && isNOU(item)) {

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

@@ -5,6 +5,7 @@
 
  */
 export declare class NodeCutter {
+    enterAction: string;
     position: number;
     private nodeSelection;
     /**

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

@@ -9,6 +9,7 @@ import { InsertMethods } from './insert-methods';
  */
 var NodeCutter = /** @class */ (function () {
     function NodeCutter() {
+        this.enterAction = 'P';
         this.position = -1;
         this.nodeSelection = new NodeSelection();
     }

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

@@ -1,4 +1,5 @@
 export declare class SelectionCommands {
+    static enterAction: string;
     /**
      * applyFormat method
      *
@@ -11,7 +12,7 @@ export declare class SelectionCommands {
      * @hidden
 
      */
-    static applyFormat(docElement: Document, format: string, endNode: Node, value?: string, selector?: string): void;
+    static applyFormat(docElement: Document, format: string, endNode: Node, enterAction: string, value?: string, selector?: string): void;
     private static insertCursorNode;
     private static getCursorFormat;
     private static removeFormat;

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

@@ -23,7 +23,8 @@ var SelectionCommands = /** @class */ (function () {
      * @hidden
 
      */
-    SelectionCommands.applyFormat = function (docElement, format, endNode, value, selector) {
+    SelectionCommands.applyFormat = function (docElement, format, endNode, enterAction, value, selector) {
+        this.enterAction = enterAction;
         var validFormats = ['bold', 'italic', 'underline', 'strikethrough', 'superscript',
             'subscript', 'uppercase', 'lowercase', 'fontcolor', 'fontname', 'fontsize', 'backgroundcolor'];
         if (validFormats.indexOf(format) > -1) {
@@ -99,7 +100,7 @@ var SelectionCommands = /** @class */ (function () {
                 save.restore();
             }
             if (isSubSup) {
-                this.applyFormat(docElement, format, endNode);
+                this.applyFormat(docElement, format, endNode, enterAction);
             }
         }
     };
@@ -119,6 +120,10 @@ var SelectionCommands = /** @class */ (function () {
                 cursorNodes[0].firstElementChild.tagName.toLowerCase() === 'br')) {
                 cursorNodes[0].innerHTML = '';
             }
+            if (cursorNodes.length === 1 && range.startOffset === 0 && (cursorNodes[0].nodeName === 'BR' ||
+                cursorNodes[0].nextSibling.nodeName === 'BR')) {
+                detach(cursorNodes[0].nodeName === '#text' ? cursorNodes[0].nextSibling : cursorNodes[0]);
+            }
             cursorNode = this.getInsertNode(docElement, range, format, value).firstChild;
         }
         return cursorNode;
@@ -212,6 +217,13 @@ var SelectionCommands = /** @class */ (function () {
                             nodeCutter.SplitNode(range, textNode.parentElement, false);
                         }
                     }
+                    if (nodeTraverse.parentElement.tagName.toLocaleLowerCase() === 'span') {
+                        if (formatNode.style.textDecoration === 'underline' &&
+                            nodeTraverse.parentElement.style.textDecoration !== 'underline') {
+                            nodeTraverse = nodeTraverse.parentElement;
+                            continue;
+                        }
+                    }
                     InsertMethods.unwrap(nodeTraverse.parentElement);
                     nodeTraverse = !isNOU(nodeTraverse.parentElement) && !domNode.isBlockNode(nodeTraverse.parentElement) ? textNode :
                         nodeTraverse.parentElement;
@@ -223,12 +235,14 @@ var SelectionCommands = /** @class */ (function () {
         }
         if (child.length > 0 && isFontStyle) {
             for (var num = 0; num < child.length; num++) {
-                child[num] = InsertMethods.Wrap(child[num], this.GetFormatNode(format, value, formatNodeTagName, formatNodeStyles));
-                if (num === 0) {
-                    range.setStartBefore(child[num]);
-                }
-                else if (num === child.length - 1) {
-                    range.setEndAfter(child[num]);
+                if (child[num].nodeType !== 3 || (child[num].textContent && child[num].textContent.trim().length > 0)) {
+                    child[num] = InsertMethods.Wrap(child[num], this.GetFormatNode(format, value, formatNodeTagName, formatNodeStyles));
+                    if (num === 0) {
+                        range.setStartBefore(child[num]);
+                    }
+                    else if (num === child.length - 1) {
+                        range.setEndAfter(child[num]);
+                    }
                 }
             }
             var currentNodeElem = nodes[index].parentElement;
@@ -325,10 +339,12 @@ var SelectionCommands = /** @class */ (function () {
         return nodes[index];
     };
     SelectionCommands.applyStyles = function (nodes, index, element) {
-        nodes[index] = (index === (nodes.length - 1)) || nodes[index].nodeName === 'BR' ?
-            InsertMethods.Wrap(nodes[index], element)
-            : InsertMethods.WrapBefore(nodes[index], element, true);
-        nodes[index] = this.getChildNode(nodes[index], element);
+        if (!(nodes[index].nodeName === 'BR' && this.enterAction === 'BR')) {
+            nodes[index] = (index === (nodes.length - 1)) || nodes[index].nodeName === 'BR' ?
+                InsertMethods.Wrap(nodes[index], element)
+                : InsertMethods.WrapBefore(nodes[index], element, true);
+            nodes[index] = this.getChildNode(nodes[index], element);
+        }
         return nodes[index];
     };
     SelectionCommands.getInsertNode = function (docElement, range, format, value) {
@@ -423,6 +439,7 @@ var SelectionCommands = /** @class */ (function () {
             ele.setAttribute('style', styles);
         }
     };
+    SelectionCommands.enterAction = 'P';
     return SelectionCommands;
 }());
 export { SelectionCommands };

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

@@ -28,12 +28,12 @@ var SelectionBasedExec = /** @class */ (function () {
             'subscript', 'uppercase', 'lowercase'];
         if (e.event.ctrlKey && validFormats.indexOf(e.event.action) > -1) {
             e.event.preventDefault();
-            SelectionCommands.applyFormat(this.parent.currentDocument, e.event.action, this.parent.editableElement);
+            SelectionCommands.applyFormat(this.parent.currentDocument, e.event.action, this.parent.editableElement, e.enterAction);
             this.callBack(e, e.event.action);
         }
     };
     SelectionBasedExec.prototype.applySelection = function (e) {
-        SelectionCommands.applyFormat(this.parent.currentDocument, e.subCommand.toLocaleLowerCase(), this.parent.editableElement, e.value, e.selector);
+        SelectionCommands.applyFormat(this.parent.currentDocument, e.subCommand.toLocaleLowerCase(), this.parent.editableElement, e.enterAction, e.value, e.selector);
         this.callBack(e, e.subCommand);
     };
     SelectionBasedExec.prototype.callBack = function (event, action) {

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

@@ -47,7 +47,7 @@ var TableCommand = /** @class */ (function () {
         }
         var tdWid = parseInt(e.item.width.width, 10) > 100 ?
             100 / e.item.columns : parseInt(e.item.width.width, 10) / e.item.columns;
-        for (var i = 0; i < e.item.row; i++) {
+        for (var i = 0; i < e.item.rows; i++) {
             var row = createElement('tr');
             for (var j = 0; j < e.item.columns; j++) {
                 var cell = createElement('td');
@@ -63,9 +63,19 @@ var TableCommand = /** @class */ (function () {
         this.removeEmptyNode();
         e.item.selection.setSelectionText(this.parent.currentDocument, table.querySelector('td'), table.querySelector('td'), 0, 0);
         if (table.nextElementSibling === null) {
-            var emptyPara = createElement('p');
-            emptyPara.appendChild(createElement('br'));
-            this.insertAfter(emptyPara, table);
+            var insertElem = void 0;
+            if (e.enterAction === 'DIV') {
+                insertElem = createElement('div');
+                insertElem.appendChild(createElement('br'));
+            }
+            else if (e.enterAction === 'BR') {
+                insertElem = createElement('br');
+            }
+            else {
+                insertElem = createElement('p');
+                insertElem.appendChild(createElement('br'));
+            }
+            this.insertAfter(insertElem, table);
         }
         table.querySelector('td').classList.add('e-cell-select');
         if (e.callBack) {
@@ -207,16 +217,16 @@ var TableCommand = /** @class */ (function () {
         var curRow = closest(selectedCell, 'tr');
         var curCell;
         var allRows = closest((curRow), 'table').rows;
-        var colIndex = Array.prototype.slice.call(curRow.querySelectorAll('th,td')).indexOf(selectedCell);
-        var previousWidth = parseInt(e.item.width, 10) / (curRow.querySelectorAll('td,th').length);
-        var currentWidth = parseInt(e.item.width, 10) / (curRow.querySelectorAll('td,th').length + 1);
+        var colIndex = Array.prototype.slice.call(curRow.querySelectorAll(':scope > td, :scope > th')).indexOf(selectedCell);
+        var previousWidth = parseInt(e.item.width, 10) / (curRow.querySelectorAll(':scope > td, :scope > th').length);
+        var currentWidth = parseInt(e.item.width, 10) / (curRow.querySelectorAll(':scope > td, :scope > th').length + 1);
         var currentTabElm = closest(curRow, 'table');
         var thTdElm = closest(curRow, 'table').querySelectorAll('th,td');
         for (var i = 0; i < thTdElm.length; i++) {
             thTdElm[i].dataset.oldWidth = (thTdElm[i].offsetWidth / currentTabElm.offsetWidth * 100) + "%";
         }
         for (var i = 0; i < allRows.length; i++) {
-            curCell = allRows[i].querySelectorAll('th,td')[colIndex];
+            curCell = allRows[i].querySelectorAll(':scope > td, :scope > th')[colIndex];
             var colTemplate = curCell.cloneNode(true);
             colTemplate.innerHTML = '';
             colTemplate.appendChild(createElement('br'));
@@ -750,7 +760,7 @@ var TableCommand = /** @class */ (function () {
         // eslint-disable-next-line
         var _this = this;
         var colspan = 0;
-        var allRows = _this.curTable.querySelectorAll('tr');
+        var allRows = _this.curTable.rows;
         for (var i = 0; i <= allRows.length - 1; i++) {
             var ele = allRows[i];
             var index = 0;

package/src/editor-manager/plugin/toolbar-status.d.ts

@@ -21,6 +21,7 @@ export declare class ToolbarStatus {
 
      */
     static get(docElement: Document, targetNode: Node, formatNode?: string[], fontSize?: string[], fontName?: string[], documentNode?: Node): IToolbarStatus;
+    private static getImmediateBlockNode;
     private static getFormatParent;
     private static isFormattedNode;
     private static isFontColor;

package/src/editor-manager/plugin/toolbar-status.js

@@ -31,7 +31,21 @@ var ToolbarStatus = /** @class */ (function () {
         var nodeSelection = new NodeSelection();
         var nodes = documentNode ? [documentNode] : nodeSelection.getNodeCollection(nodeSelection.getRange(docElement));
         var nodesLength = nodes.length;
+        var isNodeChanged = false;
+        var range = nodeSelection.getRange(docElement);
         for (var index = 0; index < nodes.length; index++) {
+            while (nodes[index].nodeType === 3 && range.startContainer.nodeType === 3 && nodes[index].parentNode &&
+                nodes[index].parentNode.lastElementChild && nodes[index].parentNode.lastElementChild.nodeName !== "BR" &&
+                this.getImmediateBlockNode(nodes[index].parentNode, targetNode).textContent.replace(/\u200B/g, '').length === 0 &&
+                range.startContainer.textContent.replace(/\u200B/g, '').length === 0 &&
+                nodeSelection.get(docElement).toString().replace(/\u200B/g, '').length === 0) {
+                nodes[index] = nodes[index].parentNode.lastElementChild.firstChild;
+                isNodeChanged = true;
+            }
+            if (isNodeChanged && nodes[index]) {
+                nodeSelection.setCursorPoint(docElement, nodes[index], nodes[index].textContent.length);
+                isNodeChanged = false;
+            }
             if ((nodes[index].nodeName !== 'BR' && nodes[index].nodeType !== 3) ||
                 (nodesLength > 1 && nodes[index].nodeType === 3 && nodes[index].textContent.trim() === '')) {
                 nodes.splice(index, 1);
@@ -98,6 +112,12 @@ var ToolbarStatus = /** @class */ (function () {
         }
         return nodeCollection;
     };
+    ToolbarStatus.getImmediateBlockNode = function (node, editNode) {
+        do {
+            node = node.parentNode;
+        } while (node && CONSTANT.BLOCK_TAGS.indexOf(node.nodeName.toLocaleLowerCase()) < 0);
+        return node;
+    };
     ToolbarStatus.getFormatParent = function (docElement, formatCollection, node, targetNode, formatNode, fontSize, fontName) {
         if (targetNode.contains(node) ||
             (node.nodeType === 3 && targetNode.nodeType !== 3 && targetNode.contains(node.parentNode))) {

package/src/rich-text-editor/actions/base-quick-toolbar.js

@@ -1,4 +1,4 @@
-import { detach, getUniqueID, append, closest, selectAll, select, isNullOrUndefined as isNOU, isBlazor } from '@syncfusion/ej2-base';
+import { detach, getUniqueID, append, closest, selectAll, select, isNullOrUndefined as isNOU } from '@syncfusion/ej2-base';
 import { addClass, removeClass, Browser, isNullOrUndefined, setStyleAttribute } from '@syncfusion/ej2-base';
 import { isCollide } from '@syncfusion/ej2-popups';
 import * as events from '../base/constant';
@@ -179,8 +179,7 @@ var BaseQuickToolbar = /** @class */ (function () {
      */
     BaseQuickToolbar.prototype.showPopup = function (x, y, target) {
         var _this = this;
-        var eventArgs = isBlazor() ? { cancel: false, targetElement: target } :
-            { popup: this.popupObj, cancel: false, targetElement: target };
+        var eventArgs = { popup: this.popupObj, cancel: false, targetElement: target };
         this.parent.trigger(events.beforeQuickToolbarOpen, eventArgs, function (beforeQuickToolbarArgs) {
             if (!beforeQuickToolbarArgs.cancel) {
                 var editPanelTop = void 0;
@@ -307,7 +306,7 @@ var BaseQuickToolbar = /** @class */ (function () {
             this.colorPickerObj.destroyColorPicker();
             removeClass([this.element], [classes.CLS_POP]);
             detach(element);
-            var args = isBlazor() ? { element: this.popupObj.element } : this.popupObj;
+            var args = this.popupObj;
             this.parent.trigger(events.quickToolbarClose, args);
         }
     };

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

@@ -0,0 +1,18 @@
+import { IRichTextEditor } from '../base/interface';
+/**
+ * `EnterKey` module is used to handle enter key press actions.
+ */
+export declare class EnterKeyAction {
+    private parent;
+    private range;
+    private startNode;
+    private endNode;
+    constructor(parent?: IRichTextEditor);
+    protected addEventListener(): void;
+    private destroy;
+    private removeEventListener;
+    private getRangeNode;
+    private enterHandler;
+    private insertFocusContent;
+    private createInsertElement;
+}