@syncfusion/ej2-richtexteditor 24.2.4 → 24.2.8

package/dist/global/index.d.ts

@@ -1,6 +1,6 @@
 /*!
 *  filename: index.d.ts
-*  version : 24.2.4
+*  version : 24.2.8
 *  Copyright Syncfusion Inc. 2001 - 2023. All rights reserved.
 *  Use of this code is subject to the terms of our license.
 *  A copy of the current license can be obtained at any time by e-mailing

package/package.json

@@ -1,8 +1,8 @@
 {
   "_from": "@syncfusion/ej2-richtexteditor@*",
-  "_id": "@syncfusion/ej2-richtexteditor@24.2.3",
+  "_id": "@syncfusion/ej2-richtexteditor@24.2.7",
   "_inBundle": false,
-  "_integrity": "sha512-qjy4z7YGj17wCO4I5dW2kqGyRSaUxHXprYekBaF78kmtSAbFQjy8QFO9+15bOUEcNTPaTaPWHNvZ61Vm3+qOEw==",
+  "_integrity": "sha512-LAwzVB7DsDIemywqqLxTjUPWekzjmy1o9UDLYXMT+MHewJcUqD6wVlupgs4/Tej+ZAE275Bt25VKHA/Zl06IMg==",
   "_location": "/@syncfusion/ej2-richtexteditor",
   "_phantomChildren": {},
   "_requested": {
@@ -25,8 +25,8 @@
     "/@syncfusion/ej2-react-richtexteditor",
     "/@syncfusion/ej2-vue-richtexteditor"
   ],
-  "_resolved": "https://nexus.syncfusion.com/repository/ej2-hotfix-new/@syncfusion/ej2-richtexteditor/-/ej2-richtexteditor-24.2.3.tgz",
-  "_shasum": "c6180082b7903ea03940e96f5911e093ee6fab92",
+  "_resolved": "https://nexus.syncfusioninternal.com/repository/ej2-hotfix-new/@syncfusion/ej2-richtexteditor/-/ej2-richtexteditor-24.2.7.tgz",
+  "_shasum": "4baefba0381f2363ff721f0972d9319c4edf05ab",
   "_spec": "@syncfusion/ej2-richtexteditor@*",
   "_where": "/jenkins/workspace/elease-automation_release_24.1.1/packages/included",
   "author": {
@@ -37,13 +37,13 @@
   },
   "bundleDependencies": false,
   "dependencies": {
-    "@syncfusion/ej2-base": "~24.2.3",
-    "@syncfusion/ej2-buttons": "~24.2.3",
-    "@syncfusion/ej2-filemanager": "~24.2.3",
-    "@syncfusion/ej2-inputs": "~24.2.4",
-    "@syncfusion/ej2-navigations": "~24.2.4",
-    "@syncfusion/ej2-popups": "~24.2.3",
-    "@syncfusion/ej2-splitbuttons": "~24.2.3"
+    "@syncfusion/ej2-base": "~24.2.7",
+    "@syncfusion/ej2-buttons": "~24.2.7",
+    "@syncfusion/ej2-filemanager": "~24.2.7",
+    "@syncfusion/ej2-inputs": "~24.2.7",
+    "@syncfusion/ej2-navigations": "~24.2.8",
+    "@syncfusion/ej2-popups": "~24.2.8",
+    "@syncfusion/ej2-splitbuttons": "~24.2.7"
   },
   "deprecated": false,
   "description": "Essential JS 2 RichTextEditor component",
@@ -69,6 +69,6 @@
     "url": "git+https://github.com/syncfusion/ej2-javascript-ui-controls.git"
   },
   "typings": "index.d.ts",
-  "version": "24.2.4",
+  "version": "24.2.8",
   "sideEffects": false
 }

package/src/common/util.js

@@ -86,7 +86,7 @@ export function updateTextNode(value, enterAction) {
                 tableElm[i].classList.add('e-rte-paste-table');
                 if (tableElm[i].classList.contains('e-rte-paste-word-table')) {
                     tableElm[i].classList.remove('e-rte-paste-word-table');
-                    continue; // Sking the removal of the border if the source is from word.
+                    continue; // Skiping the removal of the border if the source is from word.
                 }
                 else if (tableElm[i].classList.contains('e-rte-paste-excel-table')) {
                     tableElm[i].classList.remove('e-rte-paste-excel-table');
@@ -120,6 +120,9 @@ export function updateTextNode(value, enterAction) {
         }
         var imageElm = resultElm.querySelectorAll('img');
         for (var i = 0; i < imageElm.length; i++) {
+            if (imageElm[i].classList.contains('e-rte-image-unsupported')) {
+                continue; // Should not add the class if the image is Broken.
+            }
             if (!imageElm[i].classList.contains('e-rte-image')) {
                 imageElm[i].classList.add('e-rte-image');
             }

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

@@ -490,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;

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

@@ -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);
@@ -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/inserthtml.js

@@ -248,12 +248,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 {
@@ -478,7 +483,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

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

@@ -72,14 +72,21 @@ var Lists = /** @class */ (function () {
         var preElementOLTest = this.testList(preElement);
         var nextElementOLTest = this.testList(nextElement);
         if (!preElementOLTest && !nextElementOLTest && preElemULStart !== '*' && nextElemULStart !== '*') {
+            var brElement = createElement('br');
             if (startElementOLTest) {
                 range.startContainer.textContent = range.startContainer.textContent.slice(range.startOffset, range.startContainer.textContent.length);
+                if (range.startContainer.nodeName === '#text' && range.startContainer.textContent.length === 0) {
+                    this.parent.domNode.insertAfter(brElement, range.startContainer);
+                }
                 this.applyListsHandler({ subCommand: 'OL', callBack: e.callBack });
                 e.event.preventDefault();
             }
             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);
+                if (range.startContainer.nodeName === '#text' && range.startContainer.textContent.length === 0) {
+                    this.parent.domNode.insertAfter(brElement, range.startContainer);
+                }
                 this.applyListsHandler({ subCommand: 'UL', callBack: e.callBack });
                 e.event.preventDefault();
             }
@@ -190,11 +197,11 @@ var Lists = /** @class */ (function () {
     };
     Lists.prototype.removeList = function (range, e) {
         var startNode = this.parent.domNode.getSelectedNode(range.startContainer, range.startOffset);
-        var endNode = this.parent.domNode.getSelectedNode(range.endContainer, range.endOffset);
+        var endNode = (!isNOU(range.endContainer.parentElement.closest('li')) && range.endContainer.parentElement.closest('li').childElementCount > 1 && range.endContainer.nodeName === '#text') ? range.endContainer : this.parent.domNode.getSelectedNode(range.endContainer, range.endOffset);
         startNode = startNode.nodeName === 'BR' ? startNode.parentElement : startNode;
         endNode = endNode.nodeName === 'BR' ? endNode.parentElement : endNode;
         startNode = startNode.nodeName !== 'LI' && !isNOU(startNode.closest('LI')) ? startNode.closest('LI') : startNode;
-        endNode = endNode.nodeName !== 'LI' && !isNOU(endNode.closest('LI')) ? endNode.closest('LI') : endNode;
+        endNode = endNode.nodeName !== 'LI' && endNode.nodeName !== '#text' && !isNOU(endNode.closest('LI')) ? endNode.closest('LI') : endNode;
         if (((range.commonAncestorContainer.nodeName === 'OL' || range.commonAncestorContainer.nodeName === 'UL' || range.commonAncestorContainer.nodeName === 'LI') &&
             isNOU(endNode.nextElementSibling) && endNode.textContent.length === range.endOffset &&
             isNOU(startNode.previousElementSibling) && range.startOffset === 0) ||
@@ -600,7 +607,7 @@ var Lists = /** @class */ (function () {
     };
     Lists.prototype.applyLists = function (elements, type, selector, item, e) {
         var isReverse = true;
-        if (this.isRevert(elements, type, item) && isNOU(item)) {
+        if (this.isRevert(elements, type, item) && isNOU(item) || (!isNOU(item) && item.listStyle === 'none')) {
             this.revertList(elements, e);
             this.removeEmptyListElements();
         }
@@ -675,6 +682,9 @@ var Lists = /** @class */ (function () {
                 isNOU(item) && nodes[i].parentNode.style.listStyleType !== '') {
                 isRevert = false;
             }
+            if (nodes[i].parentNode.tagName === tagName && nodes[i].parentNode.style.listStyleType !== '') {
+                isRevert = true;
+            }
         }
         return isRevert;
     };
@@ -787,72 +797,84 @@ var Lists = /** @class */ (function () {
         var viewNode = [];
         for (var i = 0; i < elements.length; i++) {
             var element = elements[i];
-            if (this.domNode.contents(element)[0].nodeType === 3 && this.domNode.contents(element)[0].textContent.trim().length === 0) {
-                detach(this.domNode.contents(element)[0]);
-            }
-            var parentNode = elements[i].parentNode;
-            var className = element.getAttribute('class');
-            if (temp.length === 0) {
-                var siblingList = elements[i].querySelectorAll('ul, ol');
-                var firstNode = siblingList[0];
-                if (firstNode) {
-                    var child = firstNode
-                        .querySelectorAll('li');
-                    if (child) {
-                        var nestedElement = createElement(firstNode.tagName);
-                        append([nestedElement], firstNode.parentNode);
-                        var nestedElementLI = createElement('li', { styles: 'list-style-type: none;' });
-                        append([nestedElementLI], nestedElement);
-                        append([firstNode], nestedElementLI);
-                    }
-                }
-            }
-            if (element.parentNode.insertBefore(this.closeTag(parentNode.tagName), element),
-                'LI' === parentNode.parentNode.tagName || 'OL' === parentNode.parentNode.tagName ||
-                    'UL' === parentNode.parentNode.tagName) {
-                element.parentNode.insertBefore(this.closeTag('LI'), element);
-            }
-            else {
-                var classAttr = '';
-                if (className) {
-                    // eslint-disable-next-line
-                    classAttr += ' class="' + className + '"';
-                }
-                if (CONSTANT.DEFAULT_TAG && 0 === element.querySelectorAll(CONSTANT.BLOCK_TAGS.join(', ')).length) {
-                    var wrapperclass = isNullOrUndefined(className) ? ' class="e-rte-wrap-inner"' :
-                        ' class="' + className + ' e-rte-wrap-inner"';
-                    var wrapper = '<' + CONSTANT.DEFAULT_TAG + wrapperclass +
-                        this.domNode.attributes(parentNode) + '></' + CONSTANT.DEFAULT_TAG + '>';
-                    if (e.enterAction !== 'BR') {
-                        this.domNode.wrapInner(element, this.domNode.parseHTMLFragment(wrapper));
+            if ((isNullOrUndefined(e.item)) || ((element.nodeName === 'LI' && e.item.listStyle === 'none'))) {
+                if (this.domNode.contents(element)[0].nodeType === 3 && this.domNode.contents(element)[0].textContent.trim().length === 0) {
+                    detach(this.domNode.contents(element)[0]);
+                }
+                var parentNode = elements[i].parentNode;
+                var className = element.getAttribute('class');
+                if (temp.length === 0) {
+                    var siblingList = elements[i].querySelectorAll('ul, ol');
+                    var firstNode = siblingList[0];
+                    if (firstNode) {
+                        var child = firstNode
+                            .querySelectorAll('li');
+                        if (child) {
+                            var nestedElement = createElement(firstNode.tagName);
+                            append([nestedElement], firstNode.parentNode);
+                            var nestedElementLI = createElement('li', { styles: 'list-style-type: none;' });
+                            append([nestedElementLI], nestedElement);
+                            append([firstNode], nestedElementLI);
+                        }
                     }
                 }
-                else if (this.domNode.contents(element)[0].nodeType === 3) {
-                    var replace = this.domNode.createTagString(CONSTANT.DEFAULT_TAG, parentNode, this.parent.domNode.encode(this.domNode.contents(element)[0].textContent));
-                    this.domNode.replaceWith(this.domNode.contents(element)[0], replace);
-                }
-                else if (this.domNode.contents(element)[0].classList.contains(markerClassName.startSelection) ||
-                    this.domNode.contents(element)[0].classList.contains(markerClassName.endSelection)) {
-                    var replace = this.domNode.createTagString(CONSTANT.DEFAULT_TAG, parentNode, this.domNode.contents(element)[0].outerHTML);
-                    this.domNode.replaceWith(this.domNode.contents(element)[0], replace);
+                if (element.parentNode.insertBefore(this.closeTag(parentNode.tagName), element),
+                    'LI' === parentNode.parentNode.tagName || 'OL' === parentNode.parentNode.tagName ||
+                        'UL' === parentNode.parentNode.tagName) {
+                    element.parentNode.insertBefore(this.closeTag('LI'), element);
                 }
                 else {
-                    var childNode = element.firstChild;
-                    className = childNode.getAttribute('class');
-                    attributes(childNode, this.domNode.rawAttributes(parentNode));
-                    if (className && childNode.getAttribute('class')) {
-                        attributes(childNode, { 'class': className + ' ' + childNode.getAttribute('class') });
+                    var classAttr = '';
+                    if (className) {
+                        // eslint-disable-next-line
+                        classAttr += ' class="' + className + '"';
                     }
+                    if (CONSTANT.DEFAULT_TAG && 0 === element.querySelectorAll(CONSTANT.BLOCK_TAGS.join(', ')).length) {
+                        var wrapperclass = isNullOrUndefined(className) ? ' class="e-rte-wrap-inner"' :
+                            ' class="' + className + ' e-rte-wrap-inner"';
+                        var parentElement = parentNode;
+                        if (!isNOU(parentElement.style.listStyleType)) {
+                            parentNode.style.removeProperty("list-style-type");
+                        }
+                        if (!isNOU(parentElement.style.listStyleImage)) {
+                            parentNode.style.removeProperty("list-style-image");
+                        }
+                        if (parentElement.style.length === 0) {
+                            parentNode.removeAttribute("style");
+                        }
+                        var wrapper = '<' + CONSTANT.DEFAULT_TAG + wrapperclass +
+                            this.domNode.attributes(parentElement) + '></' + CONSTANT.DEFAULT_TAG + '>';
+                        if (e.enterAction !== 'BR') {
+                            this.domNode.wrapInner(element, this.domNode.parseHTMLFragment(wrapper));
+                        }
+                    }
+                    else if (this.domNode.contents(element)[0].nodeType === 3) {
+                        var replace = this.domNode.createTagString(CONSTANT.DEFAULT_TAG, parentNode, this.parent.domNode.encode(this.domNode.contents(element)[0].textContent));
+                        this.domNode.replaceWith(this.domNode.contents(element)[0], replace);
+                    }
+                    else if (this.domNode.contents(element)[0].classList.contains(markerClassName.startSelection) ||
+                        this.domNode.contents(element)[0].classList.contains(markerClassName.endSelection)) {
+                        var replace = this.domNode.createTagString(CONSTANT.DEFAULT_TAG, parentNode, this.domNode.contents(element)[0].outerHTML);
+                        this.domNode.replaceWith(this.domNode.contents(element)[0], replace);
+                    }
+                    else {
+                        var childNode = element.firstChild;
+                        className = childNode.getAttribute('class');
+                        attributes(childNode, this.domNode.rawAttributes(parentNode));
+                        if (className && childNode.getAttribute('class')) {
+                            attributes(childNode, { 'class': className + ' ' + childNode.getAttribute('class') });
+                        }
+                    }
+                    append([this.openTag('LI')], element);
+                    prepend([this.closeTag('LI')], element);
+                }
+                this.domNode.insertAfter(this.openTag(parentNode.tagName), element);
+                if (parentNode.parentNode.tagName === 'LI') {
+                    parentNode = parentNode.parentNode.parentNode;
+                }
+                if (viewNode.indexOf(parentNode) < 0) {
+                    viewNode.push(parentNode);
                 }
-                append([this.openTag('LI')], element);
-                prepend([this.closeTag('LI')], element);
-            }
-            this.domNode.insertAfter(this.openTag(parentNode.tagName), element);
-            if (parentNode.parentNode.tagName === 'LI') {
-                parentNode = parentNode.parentNode.parentNode;
-            }
-            if (viewNode.indexOf(parentNode) < 0) {
-                viewNode.push(parentNode);
             }
         }
         for (var i = 0; i < viewNode.length; i++) {