@syncfusion/ej2-richtexteditor 23.2.7-52849 → 24.1.41-569781

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

@@ -451,19 +451,6 @@ var DOMNode = /** @class */ (function () {
         var end = this.parent.querySelector('.' + markerClassName.endSelection);
         var startTextNode;
         var endTextNode;
-        if (start.textContent === '' && isNOU(end) && action !== 'tab') {
-            // To Do Apply Heading and Back space press in empty content.
-            // if (isNOU(action) && save.range.startContainer.nodeType === 1 &&
-            //     (save.range.startContainer as HTMLElement).querySelectorAll('audio,video,image').length === 0)  {
-            //     start.innerHTML = '<br>';
-            // }
-            if (start.childNodes.length === 1 && start.childNodes[0].nodeName === 'BR') {
-                start.innerHTML = '&#65279;&#65279;<br>';
-            }
-            else {
-                start.innerHTML = '&#65279;&#65279;';
-            }
-        }
         if (this.hasClass(start, markerClassName.startSelection) && start.classList.length > 1) {
             var replace = this.createTagString(CONSTANT.DEFAULT_TAG, start, this.encode(start.textContent));
             this.replaceWith(start, replace);
@@ -503,9 +490,11 @@ var DOMNode = /** @class */ (function () {
         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;
@@ -586,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.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);
@@ -679,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) {
@@ -697,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 = [];
@@ -782,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

@@ -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

@@ -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

@@ -18,6 +18,7 @@ export declare class Formats {
     private addEventListener;
     private getParentNode;
     private onKeyUp;
+    private getBlockParent;
     private onKeyDown;
     private removeCodeContent;
     private deleteContent;

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

@@ -52,6 +52,14 @@ var Formats = /** @class */ (function () {
             }
         }
     };
+    Formats.prototype.getBlockParent = function (node, endNode) {
+        var currentParent;
+        while (node != endNode) {
+            currentParent = node;
+            node = node.parentElement;
+        }
+        return currentParent;
+    };
     Formats.prototype.onKeyDown = function (e) {
         if (e.event.which === 13) {
             var range = this.parent.nodeSelection.getRange(this.parent.currentDocument);
@@ -61,6 +69,8 @@ var Formats = /** @class */ (function () {
                 ? range.endContainer : range.endContainer.parentElement;
             var preElem = closest(startCon, 'pre');
             var endPreElem = closest(endCon, 'pre');
+            var blockquoteEle = closest(startCon, 'blockquote');
+            var endBlockquoteEle = closest(endCon, 'blockquote');
             var liParent = !isNOU(preElem) && !isNOU(preElem.parentElement) && preElem.parentElement.tagName === 'LI';
             if (liParent) {
                 return;
@@ -72,6 +82,17 @@ var Formats = /** @class */ (function () {
                 range = this.parent.nodeSelection.getRange(this.parent.currentDocument);
                 this.parent.nodeSelection.setCursorPoint(this.parent.currentDocument, endCon, 0);
             }
+            if (e.event.which === 13 && ((!isNOU(blockquoteEle) && !isNOU(endBlockquoteEle)) || (!isNOU(blockquoteEle) && isNOU(endBlockquoteEle)))) {
+                var startParent = this.getBlockParent(range.startContainer, blockquoteEle);
+                if ((startParent.textContent.charCodeAt(0) === 8203 &&
+                    startParent.textContent.length === 1) || startParent.textContent.length === 0) {
+                    if (isNOU(startParent.nextSibling) && ((startParent.previousSibling.textContent.charCodeAt(0) === 8203 &&
+                        startParent.previousSibling.textContent.length === 1) || startParent.previousSibling.textContent.length === 0)) {
+                        e.event.preventDefault();
+                        this.paraFocus(startParent.parentElement); //Revert from blockquotes while pressing enter key
+                    }
+                }
+            }
             if (e.event.which === 13 && !isNOU(preElem) && !isNOU(endPreElem)) {
                 e.event.preventDefault();
                 this.deleteContent(range);
@@ -221,7 +242,7 @@ var Formats = /** @class */ (function () {
         }
         var save = this.parent.nodeSelection.save(range, this.parent.currentDocument);
         this.parent.domNode.setMarker(save);
-        var formatsNodes = this.parent.domNode.blockNodes();
+        var formatsNodes = this.parent.domNode.blockNodes(true);
         if (e.enterAction === 'BR') {
             this.setSelectionBRConfig();
             var allSelectedNode = this.parent.nodeSelection.getSelectedNodes(this.parent.currentDocument);
@@ -295,7 +316,7 @@ var Formats = /** @class */ (function () {
                 replaceHTML = parentNode.innerHTML;
             }
             if ((e.subCommand.toLowerCase() === parentNode.tagName.toLowerCase() &&
-                (e.subCommand.toLowerCase() !== 'pre' ||
+                (e.subCommand.toLowerCase() !== 'pre' && e.subCommand.toLowerCase() !== 'blockquote' ||
                     (!isNOU(e.exeValue) && e.exeValue.name === 'dropDownSelect'))) ||
                 isNOU(parentNode.parentNode) ||
                 (parentNode.tagName === 'TABLE' && e.subCommand.toLowerCase() === 'pre')) {
@@ -304,7 +325,21 @@ var Formats = /** @class */ (function () {
             this.cleanFormats(parentNode, e.subCommand);
             var replaceNode = (e.subCommand.toLowerCase() === 'pre' && parentNode.tagName.toLowerCase() === 'pre') ?
                 'p' : e.subCommand;
-            var replaceTag = this.parent.domNode.createTagString(replaceNode, parentNode, replaceHTML.replace(/>\s+</g, '><'));
+            var isToggleBlockquoteList = e.subCommand.toLowerCase() === parentNode.tagName.toLowerCase() &&
+                e.subCommand.toLowerCase() === 'blockquote' && this.parent.domNode.isList(parentNode.firstElementChild);
+            var isToggleBlockquote = e.subCommand.toLowerCase() === parentNode.tagName.toLowerCase()
+                && e.subCommand.toLowerCase() === 'blockquote';
+            var replaceTag = void 0;
+            if (isToggleBlockquoteList) {
+                replaceTag = replaceHTML.replace(/>\s+</g, '><');
+            }
+            else if (isToggleBlockquote) {
+                var tagWrap = (e.enterAction == 'BR' || e.enterAction == 'P') ? 'P' : e.enterAction;
+                replaceTag = this.parent.domNode.createTagString(tagWrap, parentNode, replaceHTML.replace(/>\s+</g, '><'));
+            }
+            else {
+                replaceTag = this.parent.domNode.createTagString(replaceNode, parentNode, replaceHTML.replace(/>\s+</g, '><'));
+            }
             if (parentNode.tagName === 'LI') {
                 parentNode.innerHTML = '';
                 parentNode.insertAdjacentHTML('beforeend', replaceTag);

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

@@ -79,13 +79,12 @@ var ImageCommand = /** @class */ (function () {
         }
     };
     ImageCommand.prototype.createImage = function (e) {
-        var _this = this;
         var isReplaced = false;
         e.item.url = isNOU(e.item.url) || e.item.url === 'undefined' ? e.item.src : e.item.url;
         if (!isNOU(e.item.selectParent) && e.item.selectParent[0].tagName === 'IMG') {
             var imgEle = e.item.selectParent[0];
-            this.setStyle(imgEle, e);
             isReplaced = true;
+            this.setStyle(imgEle, e, isReplaced);
         }
         else {
             var imgElement = createElement('img');
@@ -109,24 +108,43 @@ var ImageCommand = /** @class */ (function () {
             var selectedNode = this.parent.nodeSelection.getSelectedNodes(this.parent.currentDocument)[0];
             var imgElm_1 = (e.value === 'Replace' || isReplaced) ? e.item.selectParent[0] :
                 (Browser.isIE ? selectedNode.previousSibling : selectedNode.previousElementSibling);
-            imgElm_1.addEventListener('load', function () {
-                if (e.value !== 'Replace' || !isReplaced) {
-                    e.callBack({
-                        requestType: 'Images',
-                        editorMode: 'HTML',
-                        event: e.event,
-                        range: _this.parent.nodeSelection.getRange(_this.parent.currentDocument),
-                        elements: [imgElm_1]
-                    });
-                }
-            });
+            var imageInstance_1 = this;
+            var onImageLoadEvent_1 = function () {
+                e.callBack({
+                    requestType: (e.value === 'Replace') ? (e.item.subCommand = 'Replace', "Replace") : 'Images',
+                    editorMode: 'HTML',
+                    event: e.event,
+                    range: imageInstance_1.parent.nodeSelection.getRange(imageInstance_1.parent.currentDocument),
+                    elements: [imgElm_1]
+                });
+                imgElm_1.removeEventListener('load', onImageLoadEvent_1);
+            };
+            imgElm_1.addEventListener('load', onImageLoadEvent_1);
         }
     };
-    ImageCommand.prototype.setStyle = function (imgElement, e) {
+    ImageCommand.prototype.setStyle = function (imgElement, e, imgReplace) {
         if (!isNOU(e.item.url)) {
             imgElement.setAttribute('src', e.item.url);
         }
-        imgElement.setAttribute('class', 'e-rte-image' + (isNOU(e.item.cssClass) ? '' : ' ' + e.item.cssClass));
+        var alignClassName;
+        if (imgReplace) {
+            var alignClass = {
+                'e-imgcenter': 'e-imgcenter',
+                'e-imgright': 'e-imgright',
+                'e-imgleft': 'e-imgleft'
+            };
+            var imgClassList = imgElement.classList;
+            var classArray = [];
+            for (var i = 0; i < imgClassList.length; i++) {
+                // eslint-disable-next-line
+                if (!isNOU(alignClass[imgClassList[i]])) {
+                    // eslint-disable-next-line
+                    alignClassName = alignClass[imgClassList[i]];
+                }
+            }
+        }
+        imgElement.setAttribute('class', 'e-rte-image' + (isNOU(e.item.cssClass) ? '' : ' ' + e.item.cssClass)
+            + (isNOU(alignClassName) ? '' : ' ' + alignClassName));
         if (!isNOU(e.item.altText)) {
             imgElement.setAttribute('alt', e.item.altText);
         }
@@ -178,6 +196,9 @@ var ImageCommand = /** @class */ (function () {
         if (!isNOU(e.item.target)) {
             anchor.setAttribute('target', e.item.target);
         }
+        if (!isNOU(e.item.ariaLabel)) {
+            anchor.setAttribute('aria-label', e.item.ariaLabel);
+        }
         InsertHtml.Insert(this.parent.currentDocument, anchor, this.parent.editableElement);
         this.callBack(e);
     };
@@ -209,9 +230,11 @@ var ImageCommand = /** @class */ (function () {
         e.item.selectNode[0].parentElement.href = e.item.url;
         if (isNOU(e.item.target)) {
             e.item.selectNode[0].parentElement.removeAttribute('target');
+            e.item.selectNode[0].parentElement.removeAttribute('aria-label');
         }
         else {
             e.item.selectNode[0].parentElement.target = e.item.target;
+            e.item.selectNode[0].parentElement.ariaLabel = e.item.ariaLabel;
         }
         this.callBack(e);
     };

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

@@ -26,4 +26,5 @@ export declare class InsertHtml {
     private static findDetachEmptyElem;
     private static removeEmptyElements;
     private static closestEle;
+    private static insertTableInList;
 }

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

@@ -3,7 +3,7 @@ import { NodeCutter } from './nodecutter';
 import * as CONSTANT from './../base/constant';
 import { detach, Browser, isNullOrUndefined as isNOU, createElement, closest } from '@syncfusion/ej2-base';
 import { InsertMethods } from './insert-methods';
-import { updateTextNode } from './../../common/util';
+import { updateTextNode, nestedListCleanUp } from './../../common/util';
 /**
  * Insert a HTML Node or Text
  *
@@ -59,6 +59,10 @@ var InsertHtml = /** @class */ (function () {
         var isCollapsed = range.collapsed;
         var nodes = this.getNodeCollection(range, nodeSelection, node);
         var closestParentNode = (node.nodeName.toLowerCase() === 'table') ? this.closestEle(nodes[0].parentNode, editNode) : nodes[0];
+        if (closestParentNode && closestParentNode.nodeName === 'LI' && node.nodeName.toLowerCase() === 'table') {
+            this.insertTableInList(range, node, closestParentNode, nodes[0], nodeCutter);
+            return;
+        }
         if (isExternal || (!isNOU(node) && !isNOU(node.classList) &&
             node.classList.contains('pasteContent'))) {
             this.pasteInsertHTML(nodes, node, range, nodeSelection, nodeCutter, docElement, isCollapsed, closestParentNode, editNode, enterAction);
@@ -82,7 +86,12 @@ var InsertHtml = /** @class */ (function () {
                     lasNode.textContent.length : lasNode.childNodes.length);
                 range = nodeSelection.getRange(docElement);
             }
-            range.extractContents();
+            if (range.startContainer.parentElement.closest('ol,ul') !== null && range.endContainer.parentElement.closest('ol,ul') !== null) {
+                nestedListCleanUp(range);
+            }
+            else {
+                range.extractContents();
+            }
             if (insertNode.tagName === 'TABLE') {
                 this.removeEmptyElements(editNode);
             }
@@ -119,6 +128,9 @@ var InsertHtml = /** @class */ (function () {
                         InsertMethods.AppendBefore(node, parentNode.firstChild, false);
                     }
                 }
+                else if (isNOU(preNode.previousSibling) && insertNode.tagName === 'TABLE') {
+                    parentNode.prepend(node);
+                }
                 else {
                     parentNode.appendChild(node);
                 }
@@ -203,7 +215,12 @@ var InsertHtml = /** @class */ (function () {
             CONSTANT.TABLE_BLOCK_TAGS.indexOf(closestParentNode.tagName.toLocaleLowerCase()) !== -1))
             || (node.nodeName.toLowerCase() === 'table' && closestParentNode &&
                 CONSTANT.TABLE_BLOCK_TAGS.indexOf(closestParentNode.tagName.toLocaleLowerCase()) === -1))) {
-            preNode = nodeCutter.GetSpliceNode(range, closestParentNode);
+            if (isCollapsed) {
+                preNode = nodeCutter.SplitNode(range, closestParentNode, true);
+            }
+            else {
+                preNode = nodeCutter.SplitNode(range, closestParentNode, false);
+            }
             sibNode = isNOU(preNode.previousSibling) ? preNode.parentNode.previousSibling : preNode.previousSibling;
             if (nodes.length === 1) {
                 nodeSelection.setSelectionContents(docElement, preNode);
@@ -240,12 +257,17 @@ var InsertHtml = /** @class */ (function () {
                     preNode.parentNode.replaceChild(fragment, preNode);
                 }
                 else {
+                    var startContainerParent = range.startContainer.parentNode;
+                    // Get the index of the start container among its siblings
+                    var startIndex = Array.prototype.indexOf.call(startContainerParent.childNodes, range.startContainer);
                     range.deleteContents();
+                    range.setStart(startContainerParent, startIndex);
+                    range.setEnd(startContainerParent, startIndex);
                     if (!isNOU(lasNode)) {
                         detach(lasNode);
                     }
                     // eslint-disable-next-line
-                    !isNOU(sibNode) ? sibNode.parentNode.appendChild(fragment) : editNode.appendChild(fragment);
+                    !isNOU(sibNode) ? (sibNode.parentNode === editNode ? sibNode.appendChild(fragment) : sibNode.parentNode.appendChild(fragment)) : range.insertNode(fragment);
                 }
             }
             else {
@@ -285,6 +307,9 @@ var InsertHtml = /** @class */ (function () {
                 var paraElm = void 0;
                 var previousParent = void 0;
                 if (!this.contentsDeleted) {
+                    if (!isCollapsed && range.startContainer.parentElement.textContent.length === 0 && range.startContainer.nodeName === 'BR' && range.startContainer.parentElement.nodeName === 'P') {
+                        editNode.removeChild(range.startContainer.parentElement);
+                    }
                     range.deleteContents();
                 }
                 while (node.firstChild) {
@@ -296,7 +321,7 @@ var InsertHtml = /** @class */ (function () {
                         (this.inlineNode.indexOf(node.firstChild.nodeName.toLocaleLowerCase()) >= 0 && isFirstTextNode)) {
                         lastSelectionNode = node.firstChild;
                         if (isNOU(node.previousElementSibling)) {
-                            var firstParaElm = createElement('p');
+                            var firstParaElm = enterAction === 'DIV' ? createElement('div') : createElement('p');
                             node.parentElement.insertBefore(firstParaElm, node);
                         }
                         if (node.previousElementSibling.nodeName === 'BR') {
@@ -311,7 +336,7 @@ var InsertHtml = /** @class */ (function () {
                         if (node.firstChild.nodeName === '#text' ||
                             (this.inlineNode.indexOf(node.firstChild.nodeName.toLocaleLowerCase()) >= 0)) {
                             if (!isPreviousInlineElem) {
-                                paraElm = createElement('p');
+                                paraElm = enterAction === 'DIV' ? createElement('div') : createElement('p');
                                 paraElm.appendChild(node.firstChild);
                                 fragment.appendChild(paraElm);
                             }
@@ -470,7 +495,15 @@ var InsertHtml = /** @class */ (function () {
     };
     InsertHtml.imageFocus = function (node, nodeSelection, docElement) {
         var focusNode = document.createTextNode(' ');
-        node.parentNode.insertBefore(focusNode, node.nextSibling);
+        if (node.parentNode && node.parentNode.nodeName === 'A') {
+            var anchorTag = node.parentNode;
+            var parentNode = anchorTag.parentNode;
+            parentNode.insertBefore(focusNode, anchorTag.nextSibling);
+            parentNode.insertBefore(node, focusNode);
+        }
+        else {
+            node.parentNode.insertBefore(focusNode, node.nextSibling);
+        }
         nodeSelection.setSelectionText(docElement, node.nextSibling, node.nextSibling, 0, 0);
     };
     // eslint-disable-next-line
@@ -525,6 +558,9 @@ var InsertHtml = /** @class */ (function () {
     };
     InsertHtml.closestEle = function (element, editNode) {
         var el = element;
+        if (closest(el, 'li')) {
+            return closest(el, 'li');
+        }
         while (el && el.nodeType === 1) {
             if (el.parentNode === editNode ||
                 (!isNOU(el.parentNode.tagName) &&
@@ -535,6 +571,30 @@ var InsertHtml = /** @class */ (function () {
         }
         return null;
     };
+    InsertHtml.insertTableInList = function (range, insertNode, parentNode, currentNode, nodeCutter) {
+        if (range.collapsed) {
+            var isStart = range.startOffset === 0;
+            var isEnd = range.startContainer.textContent.trimEnd().length === range.startOffset;
+            if (isStart || isEnd) {
+                if (isStart) {
+                    InsertMethods.AppendBefore(insertNode, currentNode, false);
+                }
+                else {
+                    InsertMethods.AppendBefore(insertNode, currentNode, true);
+                }
+            }
+            else {
+                var preNode = nodeCutter.SplitNode(range, parentNode, true);
+                var sibNode = preNode.previousSibling;
+                sibNode.appendChild(insertNode);
+            }
+        }
+        else {
+            range.deleteContents();
+            parentNode.appendChild(insertNode);
+        }
+        insertNode.classList.add('ignore-table');
+    };
     /**
      * Insert method
      *