Merge pull request #784 from yabwe/insert-html-bug

Fix #748 - Don't delete editor inside util.insertHTMLCommand
yabwe · Aug 18, 2015 · 70cb772 · 70cb772
2 parents 8bb5cb4 + 9741aa8
commit 70cb772
Show file tree

Hide file tree

Showing 2 changed files with 38 additions and 4 deletions.
diff --git a/spec/util.spec.js b/spec/util.spec.js
@@ -378,4 +378,31 @@ describe('MediumEditor.util', function () {
             MediumEditor.util.isIE = origIsIE;
         });
     });
+
+    describe('insertHTMLCommand', function () {
+        it('should not remove the contenteditable element when calling insert into an empty contenteditable element', function () {
+            var el = this.createElement('div', 'editable', ''),
+                origQCS = document.queryCommandSupported;
+            // Force our custom implementation to run
+            spyOn(document, 'queryCommandSupported').and.callFake(function (command) {
+                if (command === 'insertHTML') {
+                    return false;
+                }
+                return origQCS.apply(document, arguments);
+            });
+            // Mimic an editor element
+            el.setAttribute('contenteditable', true);
+            el.setAttribute('data-medium-editor-element', true);
+
+            // Make sure the element has 0 child nodes
+            while (el.firstChild) {
+                el.remove(el.firstChild);
+            }
+            selectElementContents(el);
+            MediumEditor.util.insertHTMLCommand(document, '<p>some pasted html</p>', true);
+
+            expect(el.innerHTML).toBe('<p>some pasted html</p>');
+            expect(document.body.contains(el)).toBe(true, 'The editor element has been removed from the page');
+        });
+    });
 });
diff --git a/src/js/util.js b/src/js/util.js
@@ -341,11 +341,18 @@
             if (selection.rangeCount) {
                 range = selection.getRangeAt(0);
                 toReplace = range.commonAncestorContainer;
-                // Ensure range covers maximum amount of nodes as possible
-                // By moving up the DOM and selecting ancestors whose only child is the range
-                if ((toReplace.nodeType === 3 && range.startOffset === 0 && range.endOffset === toReplace.nodeValue.length) ||
+
+                // https://github.com/yabwe/medium-editor/issues/748
+                // If the selection is an empty editor element, create a temporary text node inside of the editor
+                // and select it so that we don't delete the editor element
+                if (Util.isMediumEditorElement(toReplace) && !toReplace.firstChild) {
+                    range.selectNode(toReplace.appendChild(doc.createTextNode('')));
+                } else if ((toReplace.nodeType === 3 && range.startOffset === 0 && range.endOffset === toReplace.nodeValue.length) ||
                         (toReplace.nodeType !== 3 && toReplace.innerHTML === range.toString())) {
-                    while (toReplace.parentNode &&
+                    // Ensure range covers maximum amount of nodes as possible
+                    // By moving up the DOM and selecting ancestors whose only child is the range
+                    while (!Util.isMediumEditorElement(toReplace) &&
+                            toReplace.parentNode &&
                             toReplace.parentNode.childNodes.length === 1 &&
                             !Util.isMediumEditorElement(toReplace.parentNode)) {
                         toReplace = toReplace.parentNode;