Fix for firefox & keep same selection

yabwe · Apr 12, 2018 · 1192a15 · 1192a15
1 parent 3a9643c
commit 1192a15
Show file tree

Hide file tree

Showing 2 changed files with 40 additions and 18 deletions.
diff --git a/src/js/core.js b/src/js/core.js
@@ -939,7 +939,7 @@
 
             // do some DOM clean-up for known browser issues after the action
             if (action === 'insertunorderedlist' || action === 'insertorderedlist') {
-                MediumEditor.util.cleanListDOM(this.options.ownerDocument, this.getSelectedParentElement());
+                MediumEditor.util.cleanListDOM(this.options.contentWindow, this.options.ownerDocument, this.getSelectedParentElement());
             }
 
             this.checkSelection();

diff --git a/src/js/util.js b/src/js/util.js
@@ -673,36 +673,58 @@
             return false;
         },
 
-        cleanListDOM: function (ownerDocument, element) {
+        cleanListDOM: function (contentWindow, ownerDocument, element) {
             if (element.nodeName.toLowerCase() !== 'li') {
-                var newNode, nextNode,
+                var selection = contentWindow.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 unwraps removed li elements into a span
                     node = element;
+                } else {
+                    // FF leaves them as text nodes
+                    node = startContainer;
+                }
 
-                while (node && node.nodeName.toLowerCase() === 'span') {
-                    newNode = ownerDocument.createElement('p');
-                    newNode.innerHTML = node.innerHTML;
-                    node.parentNode.insertBefore(newNode, node);
+                while (node) {
+                    if (node.nodeName.toLowerCase() !== 'span' && node.nodeName.toLowerCase() !== '#text') {
+                        break;
+                    }
 
-                    if (node.nextSibling.nodeName.toLowerCase() === 'br') {
+                    if (node.nextSibling && node.nextSibling.nodeName.toLowerCase() === 'br') {
                         node.nextSibling.remove();
                     }
 
                     nextNode = node.nextSibling;
-                    node.remove();
+
+                    newNode = ownerDocument.createElement('p');
+                    node.parentNode.replaceChild(newNode, node);
+                    newNode.appendChild(node);
+
                     node = nextNode;
                 }
 
-                return;
-            }
-
-            var list = element.parentElement;
+                // 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);
+                }
             }
         },