fix(taExecCommand): Fix lists for FF specifically.

Fixes #290
textAngular · Oct 20, 2014 · 0924a8c · 0924a8c
1 parent cf4c478
commit 0924a8c
Show file tree

Hide file tree

Showing 2 changed files with 80 additions and 6 deletions.
diff --git a/src/textAngular.js b/src/textAngular.js
@@ -779,11 +779,15 @@ See README.md or https://github.com/fraywing/textAngular/wiki for requirements a
 			listElement.remove();
 			taSelection.setSelectionToElementEnd($target[0]);
 		};
+		var selectLi = function(liElement){
+			if(/(<br(|\/)>)$/.test(liElement.innerHTML.trim())) taSelection.setSelectionBeforeElement(angular.element(liElement).find("br")[0]);
+			else taSelection.setSelectionToElementEnd(liElement);
+		};
 		var listToList = function(listElement, newListTag){
 			var $target = angular.element('<' + newListTag + '>' + listElement[0].innerHTML + '</' + newListTag + '>');
 			listElement.after($target);
 			listElement.remove();
-			taSelection.setSelectionToElementEnd($target.find('li')[0]);
+			selectLi($target.find('li')[0]);
 		};
 		var childElementsToList = function(elements, listElement, newListTag){
 			var html = '';
@@ -793,7 +797,7 @@ See README.md or https://github.com/fraywing/textAngular/wiki for requirements a
 			var $target = angular.element('<' + newListTag + '>' + html + '</' + newListTag + '>');
 			listElement.after($target);
 			listElement.remove();
-			taSelection.setSelectionToElementEnd($target.find('li')[0]);
+			selectLi($target.find('li')[0]);
 		};
 		return function(taDefaultWrap){
 			taDefaultWrap = taBrowserTag(taDefaultWrap);
@@ -858,8 +862,13 @@ See README.md or https://github.com/fraywing/textAngular/wiki for requirements a
 									}
 								}
 								$target = angular.element('<' + selfTag + '>' + html + '</' + selfTag + '>');
-								$nodes.pop().replaceWith($target);
-								angular.forEach($nodes, function($node){ $node.remove(); });
+								if($nodes.length){
+									$nodes.pop().replaceWith($target);
+									angular.forEach($nodes, function($node){ $node.remove(); });
+								}else{
+									// selection was empty, insert html (cursor moved automatically)
+									return taSelection.insertHtml('<' + selfTag + '>' + html + '</' + selfTag + '>');
+								}
 							}
 							taSelection.setSelectionToElementEnd($target[0]);
 							return;
@@ -2055,6 +2064,22 @@ See README.md or https://github.com/fraywing/textAngular/wiki for requirements a
 
 				rangy.getSelection().setSingleRange(range);
 			},
+			setSelectionBeforeElement: function (el){
+				var range = rangy.createRange();
+
+				range.selectNode(el);
+				range.collapse(true);
+
+				rangy.getSelection().setSingleRange(range);
+			},
+			setSelectionAfterElement: function (el){
+				var range = rangy.createRange();
+
+				range.selectNode(el);
+				range.collapse(false);
+
+				rangy.getSelection().setSingleRange(range);
+			},
 			setSelectionToElementStart: function (el){
 				var range = rangy.createRange();
 

diff --git a/test/taExecCommand.spec.js b/test/taExecCommand.spec.js
@@ -306,14 +306,18 @@ describe('taExecCommand', function(){
 	});
 
 	describe('handles lists correctly', function(){
-		var taSelectionMock, $document, contents;
+		var taSelectionMock, $document, contents, insertedHtml;
 		beforeEach(function(){
+			insertedHtml = '';
 			taSelectionMock = {
 				element: undefined,
 				getSelectionElement: function (){ return this.element; },
 				getOnlySelectedElements: function(){ return this.element.childNodes; },
 				setSelectionToElementStart: function (){ return; },
-				setSelectionToElementEnd: function (){ return; }
+				setSelectionToElementEnd: function (){ return; },
+				setSelectionAfterElement: function (){ return; },
+				setSelectionBeforeElement: function (){ return; },
+				insertHtml: function(html){ insertedHtml = html; }
 			};
 
 			module(function($provide){
@@ -335,6 +339,51 @@ describe('taExecCommand', function(){
 					$document[0].execCommand = _temp;
 				}));
 			});
+			describe('nothing selected', function(){
+				beforeEach(inject(function(taSelection){
+					element = angular.element('<div><p></p></div>');
+					taSelection.element = element.children()[0];
+				}));
+				it('to ol', inject(function(taSelection, taExecCommand){
+					taExecCommand()('insertorderedlist', false, null);
+					expect(element.html()).toBe('<ol><li></li></ol>');
+				}));
+
+				it('to ul', inject(function(taSelection, taExecCommand){
+					taExecCommand()('insertunorderedlist', false, null);
+					expect(element.html()).toBe('<ul><li></li></ul>');
+				}));
+			});
+			describe('br on line selected', function(){
+				beforeEach(inject(function(taSelection){
+					element = angular.element('<div><p><br></p></div>');
+					taSelection.element = element.children()[0];
+				}));
+				it('to ol', inject(function(taSelection, taExecCommand){
+					taExecCommand()('insertorderedlist', false, null);
+					expect(element.html()).toBe('<ol><li><br></li></ol>');
+				}));
+
+				it('to ul', inject(function(taSelection, taExecCommand){
+					taExecCommand()('insertunorderedlist', false, null);
+					expect(element.html()).toBe('<ul><li><br></li></ul>');
+				}));
+			});
+			describe('empty ta-bind', function(){
+				beforeEach(inject(function(taSelection){
+					element = angular.element('<div class="ta-bind"></div>');
+					taSelection.element = element[0];
+				}));
+				it('to ol', inject(function(taSelection, taExecCommand){
+					taExecCommand()('insertorderedlist', false, null);
+					expect(insertedHtml).toBe('<ol></ol>');
+				}));
+
+				it('to ul', inject(function(taSelection, taExecCommand){
+					taExecCommand()('insertunorderedlist', false, null);
+					expect(insertedHtml).toBe('<ul></ul>');
+				}));
+			});
 			describe('single element selected', function(){
 				beforeEach(inject(function(taSelection){
 					element = angular.element('<div><p>To the List!</p></div>');