@syncfusion/ej2-richtexteditor 20.4.42 → 20.4.44

package/dist/es6/ej2-richtexteditor.es2015.js

@@ -11182,7 +11182,7 @@ class Lists {
             range.startContainer.parentElement.closest('LI');
         const endNode = range.endContainer.nodeName === 'LI' ? range.endContainer :
             range.endContainer.parentElement.closest('LI');
-        // Checks for Image, Audio , Video Element inside List Element 
+        // Checks for Image, Audio , Video Element inside List Element
         let hasMediaElem = false;
         if (!isNullOrUndefined(startNode)) {
             const videoElemList = startNode.querySelectorAll('.e-video-clickelem');
@@ -11809,6 +11809,11 @@ class Lists {
                 }
                 node.parentNode.removeChild(node);
             }
+            else if (!isNullOrUndefined(node.getAttribute('level'))) {
+                if (node.tagName === node.previousElementSibling.tagName) {
+                    node.previousElementSibling.lastChild.append(node);
+                }
+            }
         }
     }
     findUnSelected(temp, elements) {
@@ -12848,52 +12853,62 @@ class InsertHtml {
             }
         }
         else {
-            this.insertTempNode(range, node, nodes, nodeCutter, editNode);
-            let isFirstTextNode = true;
-            let isPreviousInlineElem;
-            let paraElm;
-            let previousParent;
-            if (!this.contentsDeleted) {
-                range.deleteContents();
-            }
-            while (node.firstChild) {
-                if (node.firstChild.nodeName === '#text' && node.firstChild.textContent.trim() === '') {
-                    detach(node.firstChild);
-                    continue;
+            let parentElem = range.startContainer;
+            while (!isNullOrUndefined(parentElem) && parentElem.nodeName !== 'PRE' && parentElem !== editNode) {
+                parentElem = parentElem.parentElement;
+            }
+            if (!isNullOrUndefined(node) && !isNullOrUndefined(parentElem) && parentElem.nodeName === 'PRE') {
+                range.insertNode(node);
+                lastSelectionNode = node.lastChild;
+            }
+            else {
+                this.insertTempNode(range, node, nodes, nodeCutter, editNode);
+                let isFirstTextNode = true;
+                let isPreviousInlineElem;
+                let paraElm;
+                let previousParent;
+                if (!this.contentsDeleted) {
+                    range.deleteContents();
                 }
-                if (node.firstChild.nodeName === '#text' && isFirstTextNode ||
-                    (this.inlineNode.indexOf(node.firstChild.nodeName.toLocaleLowerCase()) >= 0 && isFirstTextNode)) {
-                    lastSelectionNode = node.firstChild;
-                    if (isNullOrUndefined(node.previousElementSibling)) {
-                        const firstParaElm = createElement('p');
-                        node.parentElement.insertBefore(firstParaElm, node);
+                while (node.firstChild) {
+                    if (node.firstChild.nodeName === '#text' && node.firstChild.textContent.trim() === '') {
+                        detach(node.firstChild);
+                        continue;
                     }
-                    node.previousElementSibling.appendChild(node.firstChild);
-                }
-                else {
-                    lastSelectionNode = node.firstChild;
-                    if (node.firstChild.nodeName === '#text' ||
-                        (this.inlineNode.indexOf(node.firstChild.nodeName.toLocaleLowerCase()) >= 0)) {
-                        if (!isPreviousInlineElem) {
-                            paraElm = createElement('p');
-                            paraElm.appendChild(node.firstChild);
-                            fragment.appendChild(paraElm);
+                    if (node.firstChild.nodeName === '#text' && isFirstTextNode ||
+                        (this.inlineNode.indexOf(node.firstChild.nodeName.toLocaleLowerCase()) >= 0 && isFirstTextNode)) {
+                        lastSelectionNode = node.firstChild;
+                        if (isNullOrUndefined(node.previousElementSibling)) {
+                            const firstParaElm = createElement('p');
+                            node.parentElement.insertBefore(firstParaElm, node);
                         }
-                        else {
-                            previousParent.appendChild(node.firstChild);
-                            fragment.appendChild(previousParent);
-                        }
-                        previousParent = paraElm;
-                        isPreviousInlineElem = true;
+                        node.previousElementSibling.appendChild(node.firstChild);
                     }
                     else {
-                        fragment.appendChild(node.firstChild);
-                        isPreviousInlineElem = false;
+                        lastSelectionNode = node.firstChild;
+                        if (node.firstChild.nodeName === '#text' ||
+                            (this.inlineNode.indexOf(node.firstChild.nodeName.toLocaleLowerCase()) >= 0)) {
+                            if (!isPreviousInlineElem) {
+                                paraElm = createElement('p');
+                                paraElm.appendChild(node.firstChild);
+                                fragment.appendChild(paraElm);
+                            }
+                            else {
+                                previousParent.appendChild(node.firstChild);
+                                fragment.appendChild(previousParent);
+                            }
+                            previousParent = paraElm;
+                            isPreviousInlineElem = true;
+                        }
+                        else {
+                            fragment.appendChild(node.firstChild);
+                            isPreviousInlineElem = false;
+                        }
+                        isFirstTextNode = false;
                     }
-                    isFirstTextNode = false;
                 }
+                node.parentNode.replaceChild(fragment, node);
             }
-            node.parentNode.replaceChild(fragment, node);
         }
         if (lastSelectionNode.nodeName === '#text') {
             this.placeCursorEnd(lastSelectionNode, node, nodeSelection, docElement, editNode);
@@ -15612,14 +15627,17 @@ class SelectionCommands {
                         isSubSup = formatNode === null ? false : true;
                     }
                 }
+                else if ((format === 'fontsize' || format === 'fontname' || format === 'fontcolor') && range.startContainer.parentElement === endNode) {
+                    formatNode = null;
+                }
                 if (index === 0 && formatNode === null) {
                     isFormat = true;
                 }
                 if (formatNode !== null && (!isFormat || isFontStyle)) {
                     nodes[index] = this.removeFormat(nodes, index, formatNode, isCursor, isFormat, isFontStyle, range, nodeCutter, format, value, domSelection, endNode, domNode);
                 }
-                else {
-                    nodes[index] = this.insertFormat(docElement, nodes, index, formatNode, isCursor, isFormat, isFontStyle, range, nodeCutter, format, value);
+                else if (range.startContainer.parentElement !== endNode || (range.commonAncestorContainer === endNode || nodes.length === 1)) {
+                    nodes[index] = this.insertFormat(docElement, nodes, index, formatNode, isCursor, isFormat, isFontStyle, range, nodeCutter, format, value, domNode, endNode);
                 }
                 domSelection = this.applySelection(nodes, domSelection, nodeCutter, index, isCollapsed);
             }
@@ -15874,10 +15892,24 @@ class SelectionCommands {
         }
         return nodes[index];
     }
-    static insertFormat(docElement, nodes, index, formatNode, isCursor, isFormat, isFontStyle, range, nodeCutter, format, value) {
+    static insertFormat(docElement, nodes, index, formatNode, isCursor, isFormat, isFontStyle, range, nodeCutter, format, value, domNode, endNode) {
+        let rootBlockNode;
         if (!isCursor) {
             if ((formatNode === null && isFormat) || isFontStyle) {
                 if (nodes[index].nodeName !== 'BR') {
+                    if (format === 'fontsize' || format === 'fontname' || format === 'fontcolor') {
+                        let rangeNode = nodes[index];
+                        while (rangeNode && !domNode.isBlockNode(rangeNode) && rangeNode !== endNode) {
+                            if (domNode.isBlockNode(rangeNode.parentElement)) {
+                                rootBlockNode = rangeNode;
+                            }
+                            rangeNode = rangeNode.parentElement;
+                        }
+                        if (rootBlockNode && rootBlockNode.nodeType !== 3) {
+                            nodeCutter.SplitNode(range, rootBlockNode, true).cloneNode(true);
+                            nodeCutter.SplitNode(range, rootBlockNode, false).cloneNode(false);
+                        }
+                    }
                     nodes[index] = nodeCutter.GetSpliceNode(range, nodes[index]);
                     nodes[index].textContent = nodeCutter.TrimLineBreak(nodes[index].textContent);
                 }
@@ -15887,24 +15919,47 @@ class SelectionCommands {
                 }
                 else if (!(isFontStyle === true && value === '')) {
                     const element = this.GetFormatNode(format, value);
-                    if (format === 'fontsize' || format === 'fontcolor') {
-                        let liElement = nodes[index].parentElement;
-                        let parentElement = nodes[index].parentElement;
-                        while (!isNullOrUndefined(parentElement) && parentElement.tagName.toLowerCase() !== 'li') {
-                            parentElement = parentElement.parentElement;
-                            liElement = parentElement;
+                    if (format === 'fontsize' || format === 'fontcolor' || format === 'fontname') {
+                        if (format !== 'fontname') {
+                            let liElement = nodes[index].parentElement;
+                            let parentElement = nodes[index].parentElement;
+                            while (!isNullOrUndefined(parentElement) && parentElement.tagName.toLowerCase() !== 'li') {
+                                parentElement = parentElement.parentElement;
+                                liElement = parentElement;
+                            }
+                            if (!isNullOrUndefined(liElement) && liElement.tagName.toLowerCase() === 'li' &&
+                                liElement.textContent.trim() === nodes[index].textContent.trim()) {
+                                if (format === 'fontsize') {
+                                    liElement.style.fontSize = value;
+                                }
+                                else {
+                                    liElement.style.color = value;
+                                    liElement.style.textDecoration = 'inherit';
+                                }
+                            }
                         }
-                        if (!isNullOrUndefined(liElement) && liElement.tagName.toLowerCase() === 'li' &&
-                            liElement.textContent.trim() === nodes[index].textContent.trim()) {
-                            if (format === 'fontsize') {
-                                liElement.style.fontSize = value;
+                        if (rootBlockNode && rootBlockNode.nodeType !== 3) {
+                            const save = new NodeSelection();
+                            save.save(range, docElement);
+                            domNode.setMarker(save);
+                            var cloneNode = rootBlockNode.cloneNode(true);
+                            element.appendChild(cloneNode);
+                            domNode.replaceWith(rootBlockNode, element.outerHTML);
+                            const currentStartNode = endNode.querySelector('.e-editor-select-start');
+                            const currrentEndNode = endNode.querySelector('.e-editor-select-end');
+                            if (index === 0) {
+                                nodes[index] = currentStartNode ? currentStartNode.lastChild : nodes[index];
                             }
-                            else {
-                                liElement.style.color = value;
-                                liElement.style.textDecoration = 'inherit';
+                            if (range.startContainer.parentElement === endNode) {
+                                if (nodes.length > 1) {
+                                    nodes[nodes.length - 1] = currrentEndNode ? currrentEndNode.lastChild : nodes[index];
+                                }
                             }
+                            domNode.saveMarker(save, null);
+                        }
+                        else {
+                            nodes[index] = this.applyStyles(nodes, index, element);
                         }
-                        nodes[index] = this.applyStyles(nodes, index, element);
                         if (format === 'fontsize') {
                             const bg = closest(nodes[index].parentElement, 'span[style*=' + 'background-color' + ']');
                             if (!isNullOrUndefined(bg)) {
@@ -18500,10 +18555,12 @@ class HtmlEditor {
         // eslint-disable-next-line
         const regEx = new RegExp(String.fromCharCode(8203), 'g');
         let pointer;
+        let isRootParent = false;
         if (restrictKeys.indexOf(args.keyCode) < 0 && !args.shiftKey && !args.ctrlKey && !args.altKey) {
             pointer = range.startOffset;
             // eslint-disable-next-line @typescript-eslint/no-unused-expressions
-            range.startContainer.nodeName === '#text' ? range.startContainer.parentElement.classList.add('currentStartMark') : range.startContainer.classList.add('currentStartMark');
+            range.startContainer.nodeName === '#text' ? range.startContainer.parentElement !== this.parent.inputElement ? range.startContainer.parentElement.classList.add('currentStartMark')
+                : isRootParent = true : range.startContainer.classList.add('currentStartMark');
             if (range.startContainer.textContent.charCodeAt(0) === 8203) {
                 pointer = range.startOffset === 0 ? range.startOffset : range.startOffset - 1;
                 range.startContainer.textContent = range.startContainer.textContent.replace(regEx, '');
@@ -18512,7 +18569,7 @@ class HtmlEditor {
             const previousLength = this.parent.inputElement.innerHTML.length;
             const currentLength = this.parent.inputElement.innerHTML.replace(regEx, '').length;
             let focusNode = range.startContainer;
-            if (previousLength > currentLength) {
+            if (previousLength > currentLength && !isRootParent) {
                 let currentChild = this.parent.inputElement.firstChild;
                 while (!isNullOrUndefined(currentChild) && currentChild.textContent.replace(regEx, '').trim().length > 0) {
                     currentChild.innerHTML = currentChild.innerHTML.replace(regEx, '');
@@ -21784,6 +21841,10 @@ class Image {
         });
     }
     resizing(e) {
+        if (!this.parent) {
+            this.cancelResizeAction();
+            return;
+        }
         if (this.imgEle.offsetWidth >= this.parent.getInsertImgMaxWidth()) {
             this.imgEle.style.maxHeight = this.imgEle.offsetHeight + 'px';
         }
@@ -21947,7 +22008,6 @@ class Image {
         if (!isNullOrUndefined(this.parent.formatter.editorManager.nodeSelection) &&
             originalEvent.code !== 'KeyK') {
             range = this.parent.formatter.editorManager.nodeSelection.getRange(this.parent.contentModule.getDocument());
-            save = this.parent.formatter.editorManager.nodeSelection.save(range, this.parent.contentModule.getDocument());
             selectNodeEle = this.parent.formatter.editorManager.nodeSelection.getNodeCollection(range);
             selectParentEle = this.parent.formatter.editorManager.nodeSelection.getParentNodeCollection(range);
             if (!originalEvent.ctrlKey && originalEvent.key && (originalEvent.key.length === 1 || originalEvent.action === 'enter') &&
@@ -21966,6 +22026,8 @@ class Image {
         }
         if (originalEvent.keyCode === 8 || originalEvent.keyCode === 46) {
             if (selectNodeEle && selectNodeEle[0].nodeName === 'IMG' && selectNodeEle.length < 1) {
+                if (!isNullOrUndefined(this.parent.formatter.editorManager.nodeSelection))
+                    save = this.parent.formatter.editorManager.nodeSelection.save(range, this.parent.contentModule.getDocument());
                 originalEvent.preventDefault();
                 const event = {
                     selectNode: selectNodeEle, selection: save, selectParent: selectParentEle,
@@ -22024,6 +22086,8 @@ class Image {
                 }
                 break;
             case 'insert-image':
+                if (!isNullOrUndefined(this.parent.formatter.editorManager.nodeSelection))
+                    save = this.parent.formatter.editorManager.nodeSelection.save(range, this.parent.contentModule.getDocument());
                 this.openDialog(true, originalEvent, save, selectNodeEle, selectParentEle);
                 originalEvent.preventDefault();
                 break;
@@ -23795,7 +23859,6 @@ class Audio {
         if (!isNullOrUndefined(this.parent.formatter.editorManager.nodeSelection) &&
             originalEvent.code !== 'KeyK') {
             range = this.parent.formatter.editorManager.nodeSelection.getRange(this.parent.contentModule.getDocument());
-            save = this.parent.formatter.editorManager.nodeSelection.save(range, this.parent.contentModule.getDocument());
             selectNodeEle = this.parent.formatter.editorManager.nodeSelection.getNodeCollection(range);
             selectParentEle = this.parent.formatter.editorManager.nodeSelection.getParentNodeCollection(range);
             if (!originalEvent.ctrlKey && originalEvent.key && (originalEvent.key.length === 1 || originalEvent.action === 'enter') &&
@@ -23811,6 +23874,8 @@ class Audio {
         }
         if (originalEvent.keyCode === 8 || originalEvent.keyCode === 46) {
             if (selectNodeEle && this.isAudioElem(selectNodeEle[0]) && selectNodeEle.length < 1) {
+                if (!isNullOrUndefined(this.parent.formatter.editorManager.nodeSelection))
+                    save = this.parent.formatter.editorManager.nodeSelection.save(range, this.parent.contentModule.getDocument());
                 originalEvent.preventDefault();
                 const event = {
                     selectNode: selectNodeEle, selection: save, selectParent: selectParentEle,
@@ -23859,6 +23924,8 @@ class Audio {
                 }
                 break;
             case 'insert-audio':
+                if (!isNullOrUndefined(this.parent.formatter.editorManager.nodeSelection))
+                    save = this.parent.formatter.editorManager.nodeSelection.save(range, this.parent.contentModule.getDocument());
                 this.openDialog(true, originalEvent, save, selectNodeEle, selectParentEle);
                 originalEvent.preventDefault();
                 break;
@@ -25092,7 +25159,6 @@ class Video {
         if (!isNullOrUndefined(this.parent.formatter.editorManager.nodeSelection) &&
             originalEvent.code !== 'KeyK') {
             range = this.parent.formatter.editorManager.nodeSelection.getRange(this.parent.contentModule.getDocument());
-            save = this.parent.formatter.editorManager.nodeSelection.save(range, this.parent.contentModule.getDocument());
             selectNodeEle = this.parent.formatter.editorManager.nodeSelection.getNodeCollection(range);
             selectParentEle = this.parent.formatter.editorManager.nodeSelection.getParentNodeCollection(range);
             if (!originalEvent.ctrlKey && originalEvent.key && (originalEvent.key.length === 1 || originalEvent.action === 'enter') &&
@@ -25112,6 +25178,8 @@ class Video {
         }
         if (originalEvent.keyCode === 8 || originalEvent.keyCode === 46) {
             if (selectNodeEle && (selectNodeEle[0].nodeName === 'VIDEO' || this.isEmbedVidElem(selectNodeEle[0])) && selectNodeEle.length < 1) {
+                if (!isNullOrUndefined(this.parent.formatter.editorManager.nodeSelection))
+                    save = this.parent.formatter.editorManager.nodeSelection.save(range, this.parent.contentModule.getDocument());
                 originalEvent.preventDefault();
                 const event = {
                     selectNode: selectNodeEle, selection: save, selectParent: selectParentEle,
@@ -25164,6 +25232,8 @@ class Video {
                 }
                 break;
             case 'insert-video':
+                if (!isNullOrUndefined(this.parent.formatter.editorManager.nodeSelection))
+                    save = this.parent.formatter.editorManager.nodeSelection.save(range, this.parent.contentModule.getDocument());
                 this.openDialog(true, originalEvent, save, selectNodeEle, selectParentEle);
                 originalEvent.preventDefault();
                 break;
@@ -26347,14 +26417,15 @@ class Table {
         }
         if (!isNullOrUndefined(this.parent.formatter.editorManager.nodeSelection) && this.contentModule
             && event.code !== 'KeyK') {
+            let selection;
             const range = this.parent.formatter.editorManager.nodeSelection.getRange(this.parent.contentModule.getDocument());
-            const selection = this.parent.formatter.editorManager.
-                nodeSelection.save(range, this.contentModule.getDocument());
             let ele = this.parent.formatter.editorManager.nodeSelection.getParentNodeCollection(range)[0];
             ele = (ele && ele.tagName !== 'TD' && ele.tagName !== 'TH') ? ele.parentElement : ele;
             if ((event.keyCode === 8 || event.keyCode === 46) ||
                 (event.ctrlKey && event.keyCode === 88)) {
                 if (ele && ele.tagName === 'TBODY') {
+                    if (!isNullOrUndefined(this.parent.formatter.editorManager.nodeSelection) && this.contentModule)
+                        selection = this.parent.formatter.editorManager.nodeSelection.save(range, this.contentModule.getDocument());
                     event.preventDefault();
                     proxy.removeTable(selection, event, true);
                 }
@@ -26368,6 +26439,8 @@ class Table {
                 ele = !isNullOrUndefined(closestTd) && this.parent.inputElement.contains(closestTd) ? closestTd : ele;
             }
             if (ele && (ele.tagName === 'TD' || ele.tagName === 'TH')) {
+                if (!isNullOrUndefined(this.parent.formatter.editorManager.nodeSelection) && this.contentModule)
+                    selection = this.parent.formatter.editorManager.nodeSelection.save(range, this.contentModule.getDocument());
                 switch (event.keyCode) {
                     case 9:
                     case 37:
@@ -26635,9 +26708,10 @@ class Table {
                 const range = this.parent.formatter.editorManager.nodeSelection.getRange(this.contentModule.getDocument());
                 this.parent.formatter.editorManager.nodeSelection.save(range, this.contentModule.getDocument());
                 this.parent.formatter.editorManager.nodeSelection.Clear(this.contentModule.getDocument());
+                const pageX = (this.parent.iframeSettings.enable) ? window.pageXOffset + this.parent.element.getBoundingClientRect().left + args.clientX : args.pageX;
                 const pageY = (this.parent.iframeSettings.enable) ? window.pageYOffset +
                     this.parent.element.getBoundingClientRect().top + args.clientY : args.pageY;
-                this.quickToolObj.tableQTBar.showPopup(args.pageX, pageY, target);
+                this.quickToolObj.tableQTBar.showPopup(pageX, pageY, target);
                 this.parent.formatter.editorManager.nodeSelection.restore();
             }
             else {
@@ -29670,6 +29744,10 @@ let RichTextEditor = class RichTextEditor extends Component {
         if (this.isDestroyed || !this.isRendered) {
             return;
         }
+        if (!isNullOrUndefined(this.timeInterval)) {
+            clearInterval(this.timeInterval);
+            this.timeInterval = null;
+        }
         if (this.element.offsetParent === null) {
             if (!isNullOrUndefined(this.toolbarModule)) {
                 this.toolbarModule.destroy();
@@ -29679,10 +29757,6 @@ let RichTextEditor = class RichTextEditor extends Component {
         }
         this.notify(destroy, {});
         this.destroyDependentModules();
-        if (!isNullOrUndefined(this.timeInterval)) {
-            clearInterval(this.timeInterval);
-            this.timeInterval = null;
-        }
         this.unWireEvents();
         if (this.originalElement.tagName === 'TEXTAREA') {
             this.element.parentElement.insertBefore(this.valueContainer, this.element);