@syncfusion/ej2-richtexteditor 24.1.41 → 24.1.43-569781

package/src/editor-manager/plugin/dom-node.js

@@ -11,7 +11,7 @@ export var markerClassName = {
  * DOMNode internal plugin
  *
  * @hidden
-
+ * @deprecated
  */
 var DOMNode = /** @class */ (function () {
     /**
@@ -20,7 +20,7 @@ var DOMNode = /** @class */ (function () {
      * @param {Element} parent - specifies the parent element
      * @param {Document} currentDocument - specifies the current document.
      * @hidden
-
+     * @deprecated
      */
     function DOMNode(parent, currentDocument) {
         this.parent = parent;
@@ -33,7 +33,7 @@ var DOMNode = /** @class */ (function () {
      * @param {Element} element - specifies the element.
      * @returns {void}
      * @hidden
-
+     * @deprecated
      */
     DOMNode.prototype.contents = function (element) {
         return (element && 'IFRAME' !== element.tagName ? Array.prototype.slice.call(element.childNodes || []) : []);
@@ -44,7 +44,7 @@ var DOMNode = /** @class */ (function () {
      * @param {Element} element - specifies the node element.
      * @returns {boolean} - sepcifies the boolean value
      * @hidden
-
+     * @deprecated
      */
     DOMNode.prototype.isBlockNode = function (element) {
         return (!!element && (element.nodeType === Node.ELEMENT_NODE && CONSTANT.BLOCK_TAGS.indexOf(element.tagName.toLowerCase()) >= 0));
@@ -55,7 +55,7 @@ var DOMNode = /** @class */ (function () {
      * @param {Element} element - specifies the element
      * @returns {boolean} -  specifies the boolean value
      * @hidden
-
+     * @deprecated
      */
     DOMNode.prototype.isLink = function (element) {
         return (!!element && (element.nodeType === Node.ELEMENT_NODE && 'a' === element.tagName.toLowerCase()));
@@ -66,7 +66,7 @@ var DOMNode = /** @class */ (function () {
      * @param {Element} element - specifies the element
      * @returns {Element} - returns the element value
      * @hidden
-
+     * @deprecated
      */
     DOMNode.prototype.blockParentNode = function (element) {
         for (; element && element.parentNode !== this.parent && ((!element.parentNode ||
@@ -84,7 +84,7 @@ var DOMNode = /** @class */ (function () {
      * @param {Element} element - specifies the element
      * @returns {string} - returns the string value
      * @hidden
-
+     * @deprecated
      */
     DOMNode.prototype.rawAttributes = function (element) {
         var rawAttr = {};
@@ -103,7 +103,7 @@ var DOMNode = /** @class */ (function () {
      * @param {Element} element - sepcifies the element.
      * @returns {string} - returns the string value.
      * @hidden
-
+     * @deprecated
      */
     DOMNode.prototype.attributes = function (element) {
         if (!element) {
@@ -136,7 +136,7 @@ var DOMNode = /** @class */ (function () {
      * @param {Element} element - specifies the element
      * @returns {void}
      * @hidden
-
+     * @deprecated
      */
     DOMNode.prototype.clearAttributes = function (element) {
         for (var attr = element.attributes, c = attr.length - 1; c >= 0; c--) {
@@ -150,7 +150,7 @@ var DOMNode = /** @class */ (function () {
      * @param {Element} element - specifies the element.
      * @returns {string} - returns the string
      * @hidden
-
+     * @deprecated
      */
     DOMNode.prototype.openTagString = function (element) {
         return '<' + element.tagName.toLowerCase() + this.attributes(element) + '>';
@@ -161,7 +161,7 @@ var DOMNode = /** @class */ (function () {
      * @param {Element} element - specifies the element
      * @returns {string} - returns the string value
      * @hidden
-
+     * @deprecated
      */
     DOMNode.prototype.closeTagString = function (element) {
         return '</' + element.tagName.toLowerCase() + '>';
@@ -174,7 +174,7 @@ var DOMNode = /** @class */ (function () {
      * @param {string} innerHTML - specifies the string value
      * @returns {string} - returns the string value.
      * @hidden
-
+     * @deprecated
      */
     DOMNode.prototype.createTagString = function (tagName, relativeElement, innerHTML) {
         return '<' + tagName.toLowerCase() + this.attributes(relativeElement) + '>' + innerHTML + '</' + tagName.toLowerCase() + '>';
@@ -185,7 +185,7 @@ var DOMNode = /** @class */ (function () {
      * @param {Element} element - specifes the element.
      * @returns {boolean} - returns the boolean value
      * @hidden
-
+     * @deprecated
      */
     DOMNode.prototype.isList = function (element) {
         return !!element && ['UL', 'OL'].indexOf(element.tagName) >= 0;
@@ -196,7 +196,7 @@ var DOMNode = /** @class */ (function () {
      * @param {Element} element - specifes the element.
      * @returns {boolean} - returns the boolean value
      * @hidden
-
+     * @deprecated
      */
     DOMNode.prototype.isElement = function (element) {
         return element === this.parent;
@@ -207,7 +207,7 @@ var DOMNode = /** @class */ (function () {
      * @param {Element} element - specifes the element.
      * @returns {boolean} - returns the boolean value
      * @hidden
-
+     * @deprecated
      */
     DOMNode.prototype.isEditable = function (element) {
         return ((!element.getAttribute || element.getAttribute('contenteditable') === 'true')
@@ -220,7 +220,7 @@ var DOMNode = /** @class */ (function () {
      * @param {string} className - specifies the class name value
      * @returns {boolean} - returns the boolean value
      * @hidden
-
+     * @deprecated
      */
     DOMNode.prototype.hasClass = function (element, className) {
         return element && element.classList && element.classList.contains(className);
@@ -232,7 +232,7 @@ var DOMNode = /** @class */ (function () {
      * @param {string} value - specifies the string value
      * @returns {void}
      * @hidden
-
+     * @deprecated
      */
     DOMNode.prototype.replaceWith = function (element, value) {
         var parentNode = element.parentNode;
@@ -245,7 +245,7 @@ var DOMNode = /** @class */ (function () {
      * @param {string} value - specifies the string value
      * @returns {Element} - returns the element
      * @hidden
-
+     * @deprecated
      */
     DOMNode.prototype.parseHTMLFragment = function (value) {
         /* eslint-disable */
@@ -266,7 +266,7 @@ var DOMNode = /** @class */ (function () {
      * @param {Element} wrapper - specifies the element.
      * @returns {Element} - returns the element
      * @hidden
-
+     * @deprecated
      */
     DOMNode.prototype.wrap = function (element, wrapper) {
         element.parentNode.insertBefore(wrapper, element);
@@ -281,7 +281,7 @@ var DOMNode = /** @class */ (function () {
      * @param {Element} referenceNode - specifies the referenece node
      * @returns {void}
      * @hidden
-
+     * @deprecated
      */
     DOMNode.prototype.insertAfter = function (newNode, referenceNode) {
         referenceNode.parentNode.insertBefore(newNode, referenceNode.nextSibling);
@@ -293,7 +293,7 @@ var DOMNode = /** @class */ (function () {
      * @param {Element} wrapper - specifies the wrapper element.
      * @returns {Element} - returns the element
      * @hidden
-
+     * @deprecated
      */
     DOMNode.prototype.wrapInner = function (parent, wrapper) {
         parent.appendChild(wrapper);
@@ -313,7 +313,7 @@ var DOMNode = /** @class */ (function () {
      * @param {Element} element - specifies the element.
      * @returns {Element} - returns the element.
      * @hidden
-
+     * @deprecated
      */
     DOMNode.prototype.unWrap = function (element) {
         var parent = element.parentNode;
@@ -333,7 +333,7 @@ var DOMNode = /** @class */ (function () {
      * @param {number} index - specifies the index value.
      * @returns {Element} - returns the element
      * @hidden
-
+     * @deprecated
      */
     DOMNode.prototype.getSelectedNode = function (element, index) {
         if (element.nodeType === Node.ELEMENT_NODE && element.childNodes.length > 0 &&
@@ -357,7 +357,7 @@ var DOMNode = /** @class */ (function () {
      * @param {Element[]} elements - specifies the array of elements
      * @returns {Element[]} - returnts the array elements
      * @hidden
-
+     * @deprecated
      */
     DOMNode.prototype.nodeFinds = function (element, elements) {
         var existNodes = [];
@@ -373,7 +373,7 @@ var DOMNode = /** @class */ (function () {
      *
      * @returns {boolean} - returns the boolean value
      * @hidden
-
+     * @deprecated
      */
     DOMNode.prototype.isEditorArea = function () {
         var range = this.getRangePoint(0);
@@ -389,7 +389,7 @@ var DOMNode = /** @class */ (function () {
      * @param {number} point - specifies the number value.
      * @returns {Range} - returns the range.
      * @hidden
-
+     * @deprecated
      */
     DOMNode.prototype.getRangePoint = function (point) {
         var selection = this.getSelection();
@@ -414,7 +414,7 @@ var DOMNode = /** @class */ (function () {
      * @param {Element} element - specifies the element
      * @returns {Element} - returns the element
      * @hidden
-
+     * @deprecated
      */
     DOMNode.prototype.getPreviousNode = function (element) {
         element = element.previousElementSibling;
@@ -429,7 +429,7 @@ var DOMNode = /** @class */ (function () {
      * @param {string} value - specifies the string value
      * @returns {string} - specifies the string value
      * @hidden
-
+     * @deprecated
      */
     DOMNode.prototype.encode = function (value) {
         var divNode = document.createElement('div');
@@ -444,7 +444,7 @@ var DOMNode = /** @class */ (function () {
      * @param {string} action - specifies the action  value.
      * @returns {NodeSelection} - returns the value
      * @hidden
-
+     * @deprecated
      */
     DOMNode.prototype.saveMarker = function (save, action) {
         var start = this.parent.querySelector('.' + markerClassName.startSelection);
@@ -484,15 +484,17 @@ var DOMNode = /** @class */ (function () {
      * @param {NodeSelection} save - specifies the node selection.
      * @returns {void}
      * @hidden
-
+     * @deprecated
      */
     DOMNode.prototype.setMarker = function (save) {
         var range = save.range;
         var startChildNodes = range.startContainer.childNodes;
         var isTableStart = startChildNodes.length > 1 && startChildNodes[0].nodeName === 'TABLE';
+        var isImgOnlySelected = startChildNodes.length > 1 && startChildNodes[0].nodeName === 'IMAGE' &&
+            range.endOffset === 1 && range.endContainer.nodeName === '#text' && range.endContainer.textContent.length === 0;
         var start = ((isTableStart ? getLastTextNode(startChildNodes[range.startOffset + 1]) :
             startChildNodes[(range.startOffset > 0) ? (range.startOffset - 1) : range.startOffset]) || range.startContainer);
-        var end = (range.endContainer.childNodes[(range.endOffset > 0) ? (range.endOffset - 1) : range.endOffset]
+        var end = (range.endContainer.childNodes[(range.endOffset > 0) ? (isImgOnlySelected ? range.endOffset : (range.endOffset - 1)) : range.endOffset]
             || range.endContainer);
         if ((start.nodeType === Node.ELEMENT_NODE && end.nodeType === Node.ELEMENT_NODE) && (start.contains(end) || end.contains(start))) {
             var existNode = start.contains(end) ? start : end;
@@ -563,7 +565,7 @@ var DOMNode = /** @class */ (function () {
      * @param {Range} range - specifies the range value
      * @returns {void}
      * @hidden
-
+     * @deprecated
      */
     DOMNode.prototype.ensureSelfClosingTag = function (start, className, range) {
         var isTable = false;
@@ -573,10 +575,13 @@ var DOMNode = /** @class */ (function () {
         else if (start.tagName === 'BR') {
             this.replaceWith(start, this.marker(className, this.encode(start.textContent)));
             var markerStart = range.startContainer.querySelector('.' + className);
-            markerStart.parentElement.appendChild(start);
+            if (markerStart) {
+                markerStart.parentElement.appendChild(start);
+            }
         }
         else {
-            if (start.tagName === 'IMG') {
+            var tagName = !isNOU(start.parentElement) ? start.parentElement.tagName.toLocaleLowerCase() : '';
+            if (start.tagName === 'IMG' && tagName !== 'p' && tagName !== 'div') {
                 var parNode = document.createElement('p');
                 start.parentElement.insertBefore(parNode, start);
                 parNode.appendChild(start);
@@ -621,7 +626,7 @@ var DOMNode = /** @class */ (function () {
      * @param {Element} element - specifies the element.
      * @returns {Element} - returns the element
      * @hidden
-
+     * @deprecated
      */
     DOMNode.prototype.createTempNode = function (element) {
         var textContent = element.textContent;
@@ -654,7 +659,7 @@ var DOMNode = /** @class */ (function () {
      *
      * @returns {void}
      * @hidden
-
+     * @deprecated
      */
     DOMNode.prototype.getImageTagInSelection = function () {
         var selection = this.getSelection();
@@ -666,11 +671,12 @@ var DOMNode = /** @class */ (function () {
     /**
      * blockNodes method
      *
+     * @param {boolean} action - Optional Boolean that specifies the action is whether performed.
      * @returns {Node[]} - returns the node array values
      * @hidden
-
+     * @deprecated
      */
-    DOMNode.prototype.blockNodes = function () {
+    DOMNode.prototype.blockNodes = function (action) {
         var collectionNodes = [];
         var selection = this.getSelection();
         if (this.isEditorArea() && selection.rangeCount) {
@@ -684,23 +690,46 @@ var DOMNode = /** @class */ (function () {
                     collectionNodes.push(startNode);
                 }
                 parentNode = this.blockParentNode(startNode);
+                var endParentNode = this.blockParentNode(endNode);
                 if (parentNode && collectionNodes.indexOf(parentNode) < 0) {
-                    if (CONSTANT.IGNORE_BLOCK_TAGS.indexOf(parentNode.tagName.toLocaleLowerCase()) >= 0 && (startNode.tagName === 'BR' ||
-                        startNode.nodeType === Node.TEXT_NODE ||
-                        startNode.classList.contains(markerClassName.startSelection) ||
-                        startNode.classList.contains(markerClassName.endSelection))) {
-                        var tempNode = startNode.previousSibling &&
-                            startNode.previousSibling.nodeType === Node.TEXT_NODE ?
-                            startNode.previousSibling : startNode;
-                        if (!startNode.nextSibling && !startNode.previousSibling && startNode.tagName === 'BR') {
-                            collectionNodes.push(tempNode);
+                    if (!isNOU(action) && action) {
+                        if (range.commonAncestorContainer.nodeName === 'TD' || parentNode.nodeName === 'TD' || endParentNode.nodeName === 'TD') {
+                            var processedNodes = this.getPreBlockNodeCollection(range);
+                            if (processedNodes.length > 1) {
+                                this.wrapWithBlockNode(processedNodes, collectionNodes);
+                            }
+                            else if (processedNodes.length > 0) {
+                                if (startNode !== endNode && startNode.nodeName !== 'BR') {
+                                    collectionNodes.push(this.createTempNode(startNode));
+                                }
+                                else if (startNode === endNode && startNode.nodeName === 'SPAN' && (startNode.classList.contains(markerClassName.startSelection)
+                                    || startNode.classList.contains(markerClassName.endSelection))) {
+                                    collectionNodes.push(this.createTempNode(startNode));
+                                }
+                            }
                         }
                         else {
-                            collectionNodes.push(this.createTempNode(tempNode));
+                            collectionNodes.push(parentNode);
                         }
                     }
                     else {
-                        collectionNodes.push(parentNode);
+                        if (CONSTANT.IGNORE_BLOCK_TAGS.indexOf(parentNode.tagName.toLocaleLowerCase()) >= 0 && (startNode.tagName === 'BR' ||
+                            startNode.nodeType === Node.TEXT_NODE ||
+                            startNode.classList.contains(markerClassName.startSelection) ||
+                            startNode.classList.contains(markerClassName.endSelection))) {
+                            var tempNode = startNode.previousSibling &&
+                                startNode.previousSibling.nodeType === Node.TEXT_NODE ?
+                                startNode.previousSibling : startNode;
+                            if (!startNode.nextSibling && !startNode.previousSibling && startNode.tagName === 'BR') {
+                                collectionNodes.push(tempNode);
+                            }
+                            else {
+                                collectionNodes.push(this.createTempNode(tempNode));
+                            }
+                        }
+                        else {
+                            collectionNodes.push(parentNode);
+                        }
                     }
                 }
                 var nodes = [];
@@ -769,6 +798,131 @@ var DOMNode = /** @class */ (function () {
     DOMNode.prototype.ignoreTableTag = function (element) {
         return !(CONSTANT.TABLE_BLOCK_TAGS.indexOf(element.tagName.toLocaleLowerCase()) >= 0);
     };
+    DOMNode.prototype.getPreBlockNodeCollection = function (range) {
+        var startNode = this.getSelectedNode(range.startContainer, range.startOffset);
+        var endNode = this.getSelectedNode(range.endContainer, range.endOffset);
+        var nodes = [];
+        var rootNode = startNode.closest('td, th');
+        if (isNOU(rootNode)) {
+            return nodes;
+        }
+        var rootChildNode = Array.from(rootNode.childNodes);
+        var isContinue = true;
+        var processedStart = this.getClosestInlineParent(startNode, rootNode, true);
+        var processedEnd = this.getClosestInlineParent(endNode, rootNode, false);
+        for (var i = 0; i < rootChildNode.length; i++) {
+            var child = rootChildNode[i];
+            if (processedStart === processedEnd && child === processedStart) {
+                nodes.push(child);
+                isContinue = true;
+            }
+            else if (child === processedStart) {
+                isContinue = false;
+            }
+            else if (child === processedEnd) {
+                nodes.push(child); // Early Exit so Push the end node.
+                isContinue = true;
+            }
+            if (isContinue) {
+                continue;
+            }
+            else {
+                nodes.push(child);
+            }
+        }
+        return nodes;
+    };
+    DOMNode.prototype.getClosestInlineParent = function (node, rootNode, isStart) {
+        // 1. If the node is a text node, return the node
+        // 2. If the node is a block node return block node
+        // 3. If the node is a inline node,
+        //      Traverse back untill the TD or TH node
+        //      Check if the the previous sibling , next sibling is a block node.
+        //      If yes return the inline node that is closest to the block node.
+        if (node.nodeType === Node.TEXT_NODE) {
+            return node;
+        }
+        if (this.isBlockNode(node)) {
+            return node;
+        }
+        var currentNode = node;
+        var rootFlag = false;
+        while (currentNode) {
+            var previousNode = currentNode;
+            if (rootFlag) {
+                if (this.isBlockNode(currentNode)) {
+                    return previousNode;
+                }
+                if (isStart && currentNode.previousSibling) {
+                    if (this.isBlockNode(currentNode.previousSibling) || currentNode.previousSibling.nodeName === 'BR') {
+                        return previousNode;
+                    }
+                    else {
+                        currentNode = currentNode.previousSibling;
+                    }
+                }
+                else if (!isStart && currentNode.nextSibling) {
+                    if (this.isBlockNode(currentNode.nextSibling) || currentNode.nextSibling.nodeName === 'BR') {
+                        return previousNode;
+                    }
+                    else {
+                        currentNode = currentNode.nextSibling;
+                    }
+                }
+                else {
+                    return currentNode;
+                }
+            }
+            else {
+                currentNode = currentNode.parentElement;
+                if (currentNode === rootNode) {
+                    currentNode = previousNode;
+                    rootFlag = true;
+                }
+            }
+        }
+        return null;
+    };
+    DOMNode.prototype.wrapWithBlockNode = function (nodes, collectionNodes) {
+        var wrapperElement = createElement('p');
+        for (var i = 0; i < nodes.length; i++) {
+            var child = nodes[i];
+            if (child.nodeName === 'BR') {
+                child.parentNode.insertBefore(wrapperElement, child);
+                wrapperElement.appendChild(child);
+                if (wrapperElement.childNodes.length > 0) {
+                    collectionNodes.push(wrapperElement);
+                }
+                wrapperElement = createElement('p');
+            }
+            else {
+                if (!this.isBlockNode(child)) {
+                    if (child.nodeName === '#text' && child.textContent.trim() === '') {
+                        continue;
+                    }
+                    if (wrapperElement.childElementCount === 0) {
+                        child.parentNode.insertBefore(wrapperElement, child);
+                        wrapperElement.appendChild(child);
+                    }
+                    else {
+                        wrapperElement.appendChild(child);
+                    }
+                }
+                else {
+                    collectionNodes.push(child);
+                }
+                // Use case when the BR is next sibling but the BR is not the part of selection.
+                if ((i === nodes.length - 1) && wrapperElement.nextElementSibling &&
+                    wrapperElement.querySelectorAll('br').length === 0 &&
+                    wrapperElement.nextElementSibling.nodeName === 'BR') {
+                    wrapperElement.appendChild(wrapperElement.nextElementSibling);
+                }
+            }
+        }
+        if (wrapperElement.childNodes.length > 0 && collectionNodes.indexOf(wrapperElement) < 0) {
+            collectionNodes.push(wrapperElement);
+        }
+    };
     return DOMNode;
 }());
 export { DOMNode };

package/src/editor-manager/plugin/format-painter-actions.d.ts

@@ -18,7 +18,7 @@ export declare class FormatPainterActions implements IFormatPainterEditor {
      * @function destroy
      * @returns {void}
      * @hidden
-
+     * @deprecated
      */
     destroy(): void;
     private actionHandler;
@@ -35,6 +35,7 @@ export declare class FormatPainterActions implements IFormatPainterEditor {
     private validateELementTag;
     private findCurrentContext;
     private insertFormatNode;
+    private isListCopied;
     private insertBlockNode;
     private insertNewList;
     private insertSameList;

package/src/editor-manager/plugin/format-painter-actions.js

@@ -34,7 +34,7 @@ var FormatPainterActions = /** @class */ (function () {
      * @function destroy
      * @returns {void}
      * @hidden
-
+     * @deprecated
      */
     FormatPainterActions.prototype.destroy = function () {
         this.removeEventListener();
@@ -174,7 +174,7 @@ var FormatPainterActions = /** @class */ (function () {
     };
     FormatPainterActions.prototype.copyAction = function () {
         var copyCollection = [];
-        var range = this.parent.nodeSelection.getRange(document);
+        var range = this.parent.nodeSelection.getRange(this.parent.currentDocument);
         var domSelection = this.parent.nodeSelection;
         var nodes = range.collapsed ? domSelection.getSelectionNodeCollection(range) :
             domSelection.getSelectionNodeCollectionBr(range);
@@ -363,6 +363,14 @@ var FormatPainterActions = /** @class */ (function () {
         var range = this.parent.nodeSelection.getRange(docElement);
         var isCollapsed = range.collapsed;
         var blockNodes = this.parent.domNode.blockNodes();
+        var isListCopied = this.isListCopied();
+        if (isListCopied) {
+            for (var i = 0; i < blockNodes.length; i++) {
+                if (closest(blockNodes[i], 'li')) {
+                    blockNodes[i] = closest(blockNodes[i], 'li');
+                }
+            }
+        }
         var isFullNodeSelected = false;
         if (blockNodes.length === 1) {
             isFullNodeSelected = blockNodes[0].textContent.trim() === range.toString().trim();
@@ -371,6 +379,16 @@ var FormatPainterActions = /** @class */ (function () {
             this.insertBlockNode(clonedElem, range, docElement, blockNodes);
         }
     };
+    FormatPainterActions.prototype.isListCopied = function () {
+        var isListCopied = false;
+        for (var i = 0; i < this.copyCollection.length; i++) {
+            if (this.copyCollection[i].tagName === 'OL' || this.copyCollection[i].tagName === 'UL') {
+                isListCopied = true;
+                break;
+            }
+        }
+        return isListCopied;
+    };
     FormatPainterActions.prototype.insertBlockNode = function (element, range, docElement, nodes) {
         var domSelection = this.parent.nodeSelection;
         var saveSelection = domSelection.save(range, docElement);

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

@@ -3,7 +3,7 @@ import { EditorManager } from './../base/editor-manager';
  * Formats internal component
  *
  * @hidden
-
+ * @deprecated
  */
 export declare class Formats {
     private parent;
@@ -12,12 +12,13 @@ export declare class Formats {
      *
      * @param {EditorManager} parent - specifies the parent element.
      * @hidden
-
+     * @deprecated
      */
     constructor(parent: EditorManager);
     private addEventListener;
     private getParentNode;
     private onKeyUp;
+    private getBlockParent;
     private onKeyDown;
     private removeCodeContent;
     private deleteContent;