Cleanup after ordered/unordered list item removal

aka434112 · Apr 15, 2018 · 98ba6ad · 98ba6ad
1 parent 3fcd1b2
commit 98ba6ad
Show file tree

Hide file tree

Showing 2 changed files with 103 additions and 8 deletions.
diff --git a/spec/content.spec.js b/spec/content.spec.js
@@ -810,4 +810,56 @@ describe('Content TestCase', function () {
             expect(para.querySelectorAll('div').length).toBe(0, 'Some <br> elements were replaced with <div> elements within the <p>');
         });
     });
+
+    describe('when list element is unlisted', function () {
+        it('should fix markup when one list element is unlisted', function () {
+            this.el.innerHTML = '<ul><li>lorem</li><li>ipsum</li><li>dolor</li></ul>';
+            var editor = this.newMediumEditor('.editor', {
+                    toolbar: {
+                        buttons: ['unorderedlist']
+                    }
+                }),
+                target = editor.elements[0].querySelector('li'),
+                toolbar = editor.getExtensionByName('toolbar');
+
+            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>');
+        });
+
+        it('should fix markup when miltiple list elements are unlisted', function () {
+            this.el.innerHTML = '<ol><li>lorem</li><li>ipsum</li><li>dolor</li></ol>';
+            var editor = this.newMediumEditor('.editor', {
+                    toolbar: {
+                        buttons: ['orderedlist']
+                    }
+                }),
+                toolbar = editor.getExtensionByName('toolbar'),
+                selection = document.getSelection(),
+                range = document.createRange();
+
+            range.setStart(this.el.querySelectorAll('li')[0].firstChild, 0);
+            range.setEnd(this.el.querySelectorAll('li')[1].firstChild, 5);
+            selection.removeAllRanges();
+            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>');
+        });
+
+        it('should fix markup when all list elements are unlisted', function () {
+            this.el.innerHTML = '<ul><li>lorem</li><li>ipsum</li><li>dolor</li></ul>';
+            var editor = this.newMediumEditor('.editor', {
+                    toolbar: {
+                        buttons: ['unorderedlist']
+                    }
+                }),
+                target = editor.elements[0].querySelector('ul'),
+                toolbar = editor.getExtensionByName('toolbar');
+
+            selectElementContentsAndFire(target);
+            fireEvent(toolbar.getToolbarElement().querySelector('[data-action="insertunorderedlist"]'), 'click');
+            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
@@ -675,17 +675,60 @@
 
         cleanListDOM: function (ownerDocument, element) {
             if (element.nodeName.toLowerCase() !== 'li') {
-                return;
-            }
+                if (this.isIE || this.isEdge) {
+                    return;
+                }
+
+                var selection = ownerDocument.getSelection(),
+                    newRange = ownerDocument.createRange(),
+                    oldRange = selection.getRangeAt(0),
+                    startContainer = oldRange.startContainer,
+                    startOffset = oldRange.startOffset,
+                    endContainer = oldRange.endContainer,
+                    endOffset = oldRange.endOffset,
+                    node, newNode, nextNode;
+
+                if (element.nodeName.toLowerCase() === 'span') {
+                    // Chrome & Safari unwraps removed li elements into a span
+                    node = element;
+                } else {
+                    // FF leaves them as text nodes
+                    node = startContainer;
+                }
+
+                while (node) {
+                    if (node.nodeName.toLowerCase() !== 'span' && node.nodeName.toLowerCase() !== '#text') {
+                        break;
+                    }
 
-            var list = element.parentElement;
+                    if (node.nextSibling && node.nextSibling.nodeName.toLowerCase() === 'br') {
+                        node.nextSibling.remove();
+                    }
+
+                    nextNode = node.nextSibling;
+
+                    newNode = ownerDocument.createElement('p');
+                    node.parentNode.replaceChild(newNode, node);
+                    newNode.appendChild(node);
+
+                    node = nextNode;
+                }
+
+                // Restore selection
+                newRange.setStart(startContainer, startOffset);
+                newRange.setEnd(endContainer, endOffset);
+                selection.removeAllRanges();
+                selection.addRange(newRange);
+            } else {
+                var list = element.parentElement;
 
-            if (list.parentElement.nodeName.toLowerCase() === 'p') { // yes we need to clean up
-                Util.unwrap(list.parentElement, ownerDocument);
+                if (list.parentElement.nodeName.toLowerCase() === 'p') { // yes we need to clean up
+                    Util.unwrap(list.parentElement, ownerDocument);
 
-                // move cursor at the end of the text inside the list
-                // for some unknown reason, the cursor is moved to end of the "visual" line
-                MediumEditor.selection.moveCursor(ownerDocument, element.firstChild, element.firstChild.textContent.length);
+                    // move cursor at the end of the text inside the list
+                    // for some unknown reason, the cursor is moved to end of the "visual" line
+                    MediumEditor.selection.moveCursor(ownerDocument, element.firstChild, element.firstChild.textContent.length);
+                }
             }
         },