Fixed bug in list plugin where delete/backspace would merge empty LI …

…elements in lists incorrectly.
tinymce · Aug 22, 2014 · caadfb0 · caadfb0
1 parent dd729c6
commit caadfb0
Show file tree

Hide file tree

Showing 3 changed files with 164 additions and 8 deletions.
diff --git a/changelog.txt b/changelog.txt
@@ -1,5 +1,6 @@
 Version 4.1.5 (2014-08-xx)
 	Fixed bug where sometimes the resize rectangles wouldn't properly render on images on WebKit/Blink.
+	Fixed bug in list plugin where delete/backspace would merge empty LI elements in lists incorrectly.
 Version 4.1.4 (2014-08-21)
 	Added new media_filter_html option to media plugin that blocks any conditional comments, scripts etc within a video element.
 	Added new content_security_policy option allows you to set custom policy for iframe contents. Patch contributed by Francois Chagnon.

diff --git a/js/tinymce/plugins/lists/plugin.js b/js/tinymce/plugins/lists/plugin.js
@@ -624,13 +624,24 @@ tinymce.PluginManager.add('lists', function(editor) {
 		self.backspaceDelete = function(isForward) {
 			function findNextCaretContainer(rng, isForward) {
 				var node = rng.startContainer, offset = rng.startOffset;
+				var nonEmptyBlocks, walker;
 
 				if (node.nodeType == 3 && (isForward ? offset < node.data.length : offset > 0)) {
 					return node;
 				}
 
-				var walker = new tinymce.dom.TreeWalker(rng.startContainer);
+				nonEmptyBlocks = editor.schema.getNonEmptyElements();
+				walker = new tinymce.dom.TreeWalker(rng.startContainer);
+
 				while ((node = walker[isForward ? 'next' : 'prev']())) {
+					if (node.nodeName == 'LI' && !node.hasChildNodes()) {
+						return node;
+					}
+
+					if (nonEmptyBlocks[node.nodeName]) {
+						return node;
+					}
+
 					if (node.nodeType == 3 && node.data.length > 0) {
 						return node;
 					}
@@ -649,8 +660,14 @@ tinymce.PluginManager.add('lists', function(editor) {
 					dom.remove(node);
 				}
 
-				while ((node = fromElm.firstChild)) {
-					toElm.appendChild(node);
+				if (dom.isEmpty(toElm)) {
+					dom.$(toElm).empty();
+				}
+
+				if (!dom.isEmpty(fromElm)) {
+					while ((node = fromElm.firstChild)) {
+						toElm.appendChild(node);
+					}
 				}
 
 				if (listNode) {

diff --git a/tests/plugins/lists.js b/tests/plugins/lists.js
@@ -71,7 +71,7 @@ test('Apply UL list to single P', function() {
 	Utils.setSelection('p', 0);
 	execCommand('InsertUnorderedList');
 
-	equal(editor.getContent(),'<ul><li>a</li></ul>');
+	equal(editor.getContent(), '<ul><li>a</li></ul>');
 	equal(editor.selection.getNode().nodeName, 'LI');
 });
 
@@ -118,7 +118,7 @@ test('Apply OL list to single P', function() {
 	Utils.setSelection('p', 0);
 	execCommand('InsertOrderedList');
 
-	equal(editor.getContent(),'<ol><li>a</li></ol>');
+	equal(editor.getContent(), '<ol><li>a</li></ol>');
 	equal(editor.selection.getNode().nodeName, 'LI');
 });
 
@@ -359,7 +359,7 @@ test('Apply UL list to single text line', function() {
 	Utils.setSelection('body', 0);
 	execCommand('InsertUnorderedList');
 
-	equal(editor.getContent(),'<ul><li>a</li></ul>');
+	equal(editor.getContent(), '<ul><li>a</li></ul>');
 	equal(editor.selection.getNode().nodeName, 'LI');
 });
 
@@ -374,7 +374,7 @@ test('Apply UL list to single text line with BR', function() {
 	Utils.setSelection('body', 0);
 	execCommand('InsertUnorderedList');
 
-	equal(editor.getContent(),'<ul><li>a</li></ul>');
+	equal(editor.getContent(), '<ul><li>a</li></ul>');
 	equal(editor.selection.getNode().nodeName, 'LI');
 });
 
@@ -1633,6 +1633,75 @@ test('Backspace at beginning of middle LI in UL inside UL', function() {
 	equal(editor.selection.getNode().nodeName, 'LI');
 });
 
+test('Backspace at beginning of LI with empty LI above in UL', function() {
+	editor.getBody().innerHTML = trimBrs(
+		'<ul>' +
+			'<li>a</li>' +
+			'<li></li>' +
+			'<li>b</li>' +
+		'</ul>'
+	);
+
+	editor.focus();
+	Utils.setSelection('li:nth-child(3)', 0);
+	editor.plugins.lists.backspaceDelete();
+
+	equal(editor.getContent(),
+		'<ul>' +
+			'<li>a</li>' +
+			'<li>b</li>' +
+		'</ul>'
+	);
+
+	equal(editor.selection.getNode().innerHTML, 'b');
+});
+
+test('Backspace at beginning of LI with BR padded empty LI above in UL', function() {
+	editor.getBody().innerHTML = (
+		'<ul>' +
+			'<li>a</li>' +
+			'<li><br></li>' +
+			'<li>b</li>' +
+		'</ul>'
+	);
+
+	editor.focus();
+	Utils.setSelection('li:nth-child(3)', 0);
+	editor.plugins.lists.backspaceDelete();
+
+	equal(editor.getContent(),
+		'<ul>' +
+			'<li>a</li>' +
+			'<li>b</li>' +
+		'</ul>'
+	);
+
+	equal(editor.selection.getNode().innerHTML, 'b');
+});
+
+test('Backspace at beginning of LI with empty LI with STRING and BR above in UL', function() {
+	editor.getBody().innerHTML = (
+		'<ul>' +
+			'<li>a</li>' +
+			'<li><strong><br></strong></li>' +
+			'<li>b</li>' +
+		'</ul>'
+	);
+
+	editor.focus();
+	Utils.setSelection('li:nth-child(3)', 0);
+	editor.plugins.lists.backspaceDelete();
+
+	equal(editor.getContent(),
+		'<ul>' +
+			'<li>a</li>' +
+			'<li>b</li>' +
+		'</ul>'
+	);
+
+	equal(editor.selection.getNode().innerHTML, 'b');
+});
+
 // Delete
 
 test('Delete at end of single LI in UL', function() {
@@ -1759,6 +1828,75 @@ test('Delete at end of middle LI in UL inside UL', function() {
 	equal(editor.selection.getNode().nodeName, 'LI');
 });
 
+test('Delete at end of LI before empty LI', function() {
+	editor.getBody().innerHTML = (
+		'<ul>' +
+			'<li>a</li>' +
+			'<li></li>' +
+			'<li>b</li>' +
+		'</ul>'
+	);
+
+	editor.focus();
+	Utils.setSelection('li', 1);
+	editor.plugins.lists.backspaceDelete(true);
+
+	equal(editor.getContent(),
+		'<ul>' +
+			'<li>a</li>' +
+			'<li>b</li>' +
+		'</ul>'
+	);
+
+	equal(editor.selection.getNode().innerHTML, 'a');
+});
+
+test('Delete at end of LI before BR padded empty LI', function() {
+	editor.getBody().innerHTML = (
+		'<ul>' +
+			'<li>a</li>' +
+			'<li><br></li>' +
+			'<li>b</li>' +
+		'</ul>'
+	);
+
+	editor.focus();
+	Utils.setSelection('li', 1);
+	editor.plugins.lists.backspaceDelete(true);
+
+	equal(editor.getContent(),
+		'<ul>' +
+			'<li>a</li>' +
+			'<li>b</li>' +
+		'</ul>'
+	);
+
+	equal(editor.selection.getNode().innerHTML, 'a');
+});
+
+test('Delete at end of LI before empty LI with STRONG', function() {
+	editor.getBody().innerHTML = (
+		'<ul>' +
+			'<li>a</li>' +
+			'<li><strong><br></strong></li>' +
+			'<li>b</li>' +
+		'</ul>'
+	);
+
+	editor.focus();
+	Utils.setSelection('li', 1);
+	editor.plugins.lists.backspaceDelete(true);
+
+	equal(editor.getContent(),
+		'<ul>' +
+			'<li>a</li>' +
+			'<li>b</li>' +
+		'</ul>'
+	);
+
+	equal(editor.selection.getNode().innerHTML, 'a');
+});
+
 test('Remove UL in inline body element contained in LI', function() {
 	inlineEditor.setContent('<ul><li>a</li></ul>');
 	inlineEditor.selection.setCursorLocation();
@@ -1805,7 +1943,7 @@ test('Apply OL list to single P', function() {
 	Utils.setSelection('p', 0);
 	execCommand('InsertDefinitionList');
 
-	equal(editor.getContent(),'<dl><dt>a</dt></dl>');
+	equal(editor.getContent(), '<dl><dt>a</dt></dl>');
 	equal(editor.selection.getNode().nodeName, 'DT');
 });