Cleanup after ordered/unordered list item removal

yabwe · Apr 17, 2018 · 243fc97 · 243fc97
1 parent 62e6f3b
commit 243fc97
Show file tree

Hide file tree

Showing 2 changed files with 54 additions and 7 deletions.
diff --git a/spec/content.spec.js b/spec/content.spec.js
@@ -2,7 +2,7 @@
          prepareEvent, selectElementContents,
          selectElementContentsAndFire,
          placeCursorInsideElement,
-         isFirefox */
+         isIE, getEdgeVersion, isFirefox */
 
 describe('Content TestCase', function () {
     'use strict';
@@ -824,7 +824,14 @@ describe('Content TestCase', function () {
 
             selectElementContentsAndFire(target);
             fireEvent(toolbar.getToolbarElement().querySelector('[data-action="insertunorderedlist"]'), 'click');
-            expect(this.el.innerHTML).toBe('<p>lorem</p><ul><li>ipsum</li><li>dolor</li></ul>');
+
+            if (isIE() || getEdgeVersion() > 0) {
+                // IE and Edge wraps elements in div
+                expect(this.el.innerHTML).toBe('<div>lorem</div><ul><li>ipsum</li><li>dolor</li></ul>');
+            } else {
+                // Other browsers should wrap them in p
+                expect(this.el.innerHTML).toBe('<p>lorem</p><ul><li>ipsum</li><li>dolor</li></ul>');
+            }
         });
 
         it('should fix markup when miltiple list elements are unlisted', function () {
@@ -844,7 +851,13 @@ describe('Content TestCase', function () {
             selection.addRange(range);
 
             fireEvent(toolbar.getToolbarElement().querySelector('[data-action="insertorderedlist"]'), 'click');
-            expect(this.el.innerHTML).toBe('<p>lorem</p><p>ipsum</p><ol><li>dolor</li></ol>');
+            if (isIE() || getEdgeVersion() > 0) {
+                // IE and Edge wraps elements in div
+                expect(this.el.innerHTML).toBe('<div>lorem</div><div>ipsum</div><ol><li>dolor</li></ol>');
+            } else {
+                // Other browsers should wrap them in p
+                expect(this.el.innerHTML).toBe('<p>lorem</p><p>ipsum</p><ol><li>dolor</li></ol>');
+            }
         });
 
         it('should fix markup when all list elements are unlisted', function () {
@@ -859,7 +872,13 @@ describe('Content TestCase', function () {
 
             selectElementContentsAndFire(target);
             fireEvent(toolbar.getToolbarElement().querySelector('[data-action="insertunorderedlist"]'), 'click');
-            expect(this.el.innerHTML).toBe('<p>lorem</p><p>ipsum</p><p>dolor</p>');
+            if (isIE() || getEdgeVersion() > 0) {
+                // IE and Edge wraps elements in div
+                expect(this.el.innerHTML).toBe('<div>lorem</div><div>ipsum</div><div>dolor</div>');
+            } else {
+                // Other browsers should wrap them in p
+                expect(this.el.innerHTML).toBe('<p>lorem</p><p>ipsum</p><p>dolor</p>');
+            }
         });
     });
 });
diff --git a/src/js/util.js b/src/js/util.js
@@ -673,6 +673,28 @@
             return false;
         },
 
+        findFirstTextNodeInSelection: function (selection) {
+            if (selection.anchorNode.nodeType === 3) {
+                return selection.anchorNode;
+            }
+
+            var node = selection.anchorNode.firstChild;
+
+            while (node) {
+                if (selection.containsNode(node, true)) {
+                    if (node.nodeType === 3) {
+                        return node;
+                    } else {
+                        node = node.firstChild;
+                    }
+                } else {
+                    node = node.nextSibling;
+                }
+            }
+
+            return null;
+        },
+
         cleanListDOM: function (ownerDocument, element) {
             if (element.nodeName.toLowerCase() !== 'li') {
                 if (this.isIE || this.isEdge) {
@@ -686,23 +708,29 @@
                     startOffset = oldRange.startOffset,
                     endContainer = oldRange.endContainer,
                     endOffset = oldRange.endOffset,
-                    node, newNode, nextNode;
+                    node, newNode, nextNode, moveEndOffset;
 
                 if (element.nodeName.toLowerCase() === 'span') {
                     // Chrome & Safari unwraps removed li elements into a span
                     node = element;
+                    moveEndOffset = false;
                 } else {
                     // FF leaves them as text nodes
-                    node = startContainer;
+                    node = this.findFirstTextNodeInSelection(selection);
+                    moveEndOffset = startContainer.nodeType !== 3;
                 }
 
                 while (node) {
-                    if (node.nodeName.toLowerCase() !== 'span' && node.nodeName.toLowerCase() !== '#text') {
+                    if (node.nodeName.toLowerCase() !== 'span' && node.nodeType !== 3) {
                         break;
                     }
 
                     if (node.nextSibling && node.nextSibling.nodeName.toLowerCase() === 'br') {
                         node.nextSibling.remove();
+
+                        if (moveEndOffset) {
+                            endOffset--;
+                        }
                     }
 
                     nextNode = node.nextSibling;