Skip to content

Commit

Permalink
Fix(main, taBind, textAngularSetup, globals, taTools.spec): Immproved…
Browse files Browse the repository at this point in the history 
… the issues with html and model getting out of sync

  Also corrected issue under Firefox where the initial selection was before all the content
  - globals: improved stripHtmlToText() slightly
  - main: fixed a mistyped if in switchView()
  - taBind: small formatting changes for clarity
            improved element.on('keyup') code
            element.on('focus') now detets an bad selection condition under Firefox and fixes this
  - textAngularSetup: added a coverage comment in recursiveRemoveClass() that is now needed
    because of changes to taTools.spec
  - taTools.spec: Changed the test set 'test clear button' so that now the whole
                  htmlcontent is now never selected.  This was an issue beacuse when
                  all the htmlcontent was selected this triggered the element.on('focus') fix
                  for Firefox and broke the tests here.  All the tests now run properly.
                  The biggest change was to now wrap the test content in a <div class='test-class'></div>
                  which caused the expected values to change.
  • Loading branch information
@JoelParke
JoelParke committed Aug 3, 2016
1 parent 243525d commit 5453c6b
Show file tree
Hide file tree
Showing 5 changed files with 39 additions and 26 deletions.
1 change: 0 additions & 1 deletion src/globals.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -54,7 +54,6 @@ function stripHtmlToText(html)
var tmp = document.createElement("DIV");
tmp.innerHTML = html;
var res = tmp.textContent || tmp.innerText || "";
res = res.replace(/\n/, "");
return res.trim();
}
// get html
Expand Down
2 changes: 1 addition & 1 deletion src/main.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -397,7 +397,7 @@ textAngular.directive("textAngular", [
//Show the HTML view
var _model;
/* istanbul ignore next: ngModel exists check */
if (attrs.ngModell) {
if (ngModel) {
_model = ngModel.$viewValue;
} else {
_model = scope.html;
Expand Down
39 changes: 22 additions & 17 deletions src/taBind.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -220,7 +220,9 @@ angular.module('textAngular.taBind', ['textAngular.factories', 'textAngular.DOM'
return value;
};

if(attrs.taPaste) _pasteHandler = $parse(attrs.taPaste);
if(attrs.taPaste) {
_pasteHandler = $parse(attrs.taPaste);
}

element.addClass('ta-bind');

Expand Down Expand Up @@ -296,8 +298,12 @@ angular.module('textAngular.taBind', ['textAngular.factories', 'textAngular.DOM'

// in here we are undoing the converts used elsewhere to prevent the < > and & being displayed when they shouldn't in the code.
var _compileHtml = function(){
if(_isContentEditable) return element[0].innerHTML;
if(_isInputFriendly) return element.val();
if(_isContentEditable) {
return element[0].innerHTML;
}
if(_isInputFriendly) {
return element.val();
}
throw ('textAngular Error: attempting to update non-editable taBind');
};

Expand Down Expand Up @@ -823,23 +829,9 @@ angular.module('textAngular.taBind', ['textAngular.factories', 'textAngular.DOM'
}
}
var val = _compileHtml();
/* istanbul ignore next: FF specific bug fix */
if (val==='<br>') {
// on Firefox this comes back sometimes as <br> which is strange, so we remove this here
//console.log('*************BAD****');
val='';
}
if(_defaultVal !== '' && val.trim() === ''){
_setInnerHTML(_defaultVal);
taSelection.setSelectionToElementStart(element.children()[0]);
}else if(val.substring(0, 1) !== '<' && attrs.taDefaultWrap !== ''){
/* we no longer do this, since there can be comments here and white space
var _savedSelection = rangy.saveSelection();
val = _compileHtml();
val = "<" + attrs.taDefaultWrap + ">" + val + "</" + attrs.taDefaultWrap + ">";
_setInnerHTML(val);
rangy.restoreSelection(_savedSelection);
*/
}
var triggerUndo = _lastKey !== event.keyCode && UNDO_TRIGGER_KEYS.test(event.keyCode);
if(_keyupTimeout) $timeout.cancel(_keyupTimeout);
Expand Down Expand Up @@ -876,6 +868,19 @@ angular.module('textAngular.taBind', ['textAngular.factories', 'textAngular.DOM'
element.on('focus', scope.events.focus = function(){
_focussed = true;
element.removeClass('placeholder-text');
/* istanbul ignore next: this is only triggered under Firefox and rare! */
try {
var _cont = taSelection.getSelectionElement();
// in Firefox, there is an issue that the selection is initially set to the
// whole container! And when that happens the first character is inserted before
// the <p><br></p> which is bad
// So we detect the whole container selected and then reset the selection to the
// <p>
if (_cont.tagName.toLowerCase() === 'div' && _cont.id === scope.displayElements.text.attr('id')) {
// opps we are actually selecting the whole container!
taSelection.setSelectionToElementStart(_cont.firstChild);
}
}catch(e){}
_reApplyOnSelectorHandlers();
});

Expand Down
5 changes: 4 additions & 1 deletion src/textAngularSetup.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -711,7 +711,10 @@ angular.module('textAngularSetup', [])
var $editor = this.$editor();
var recursiveRemoveClass = function(node){
node = angular.element(node);
if(node[0] !== $editor.displayElements.text[0]) node.removeAttr('class');
/* istanbul ignore next: this is not triggered in tests any longer since we now never select the whole displayELement */
if(node[0] !== $editor.displayElements.text[0]) {
node.removeAttr('class');
}
angular.forEach(node.children(), recursiveRemoveClass);
};
angular.forEach(possibleNodes, recursiveRemoveClass);
Expand Down
18 changes: 12 additions & 6 deletions test/taTools.spec.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -406,7 +406,7 @@ describe('taTools test tool actions', function(){
$window = _$window_;
$window.prompt = function(){ return ''; };
$rootScope = _$rootScope_;
$rootScope.htmlcontent = '<p class="test-class" style="text-align: left;">Test Content <b>that</b> <u>should</u> be cleared</p><h1>Test Other Tags</h1><ul><li>Test <b>1</b></li><li>Test 2</li></ul>';
$rootScope.htmlcontent = '<div class="test-class"><p class="test-class" style="text-align: left;">Test Content <b>that</b> <u>should</u> be cleared</p><h1>Test Other Tags</h1><ul><li>Test <b>1</b></li><li>Test 2</li></ul></div>';
element = _$compile_('<text-angular name="testclearbutton" ng-model="htmlcontent"></text-angular>')($rootScope);
$document.find('body').append(element);
$rootScope.$digest();
Expand All @@ -428,10 +428,16 @@ describe('taTools test tool actions', function(){
});

it('clears out all formatting', function(){
var sel = $window.rangy.getSelection();
var range = $window.rangy.createRangyRange();
range.selectNode(jQuery('div.test-class')[0]);
sel.setSingleRange(range);
sel.refresh();
//console.log(sel);
findAndTriggerButton('clear');
//expect($rootScope.htmlcontent).toBe('<p>Test Content that should be cleared</p><p>Test Other Tags</p><p>Test 1</p><p>Test 2</p>');
// bug in phantom JS
expect($rootScope.htmlcontent).toBe('<p>Test Content that should be cleared</p><h1>Test Other Tags</h1><p>Test 1</p><p>Test 2</p>');
expect($rootScope.htmlcontent).toBe('<div><p>Test Content that should be cleared</p><h1>Test Other Tags</h1><p>Test 1</p><p>Test 2</p></div>');
});

it('doesn\'t remove partially selected list elements, but clears them of formatting', function(){
Expand All @@ -442,7 +448,7 @@ describe('taTools test tool actions', function(){
sel.setSingleRange(range);
sel.refresh();
findAndTriggerButton('clear');
expect($rootScope.htmlcontent).toBe('<p class="test-class" style="text-align: left;">Test Content <b>that</b> <u>should</u> be cleared</p><h1>Test Other Tags</h1><ul><li>Test 1</li><li>Test 2</li></ul>');
expect($rootScope.htmlcontent).toBe('<div class="test-class"><p class="test-class" style="text-align: left;">Test Content <b>that</b> <u>should</u> be cleared</p><h1>Test Other Tags</h1><ul><li>Test 1</li><li>Test 2</li></ul></div>');
});

it('doesn\'t clear wholly selected list elements, but clears them of formatting', function(){
Expand All @@ -452,7 +458,7 @@ describe('taTools test tool actions', function(){
sel.setSingleRange(range);
sel.refresh();
findAndTriggerButton('clear');
expect($rootScope.htmlcontent).toBe('<p class="test-class" style="text-align: left;">Test Content <b>that</b> <u>should</u> be cleared</p><h1>Test Other Tags</h1><ul><li>Test 1</li><li>Test 2</li></ul>');
expect($rootScope.htmlcontent).toBe('<div class="test-class"><p class="test-class" style="text-align: left;">Test Content <b>that</b> <u>should</u> be cleared</p><h1>Test Other Tags</h1><ul><li>Test 1</li><li>Test 2</li></ul></div>');
});

it('doesn\'t clear singly selected list elements, but clears them of formatting', function(){
Expand All @@ -463,7 +469,7 @@ describe('taTools test tool actions', function(){
sel.setSingleRange(range);
sel.refresh();
findAndTriggerButton('clear');
expect($rootScope.htmlcontent).toBe('<p class="test-class" style="text-align: left;">Test Content <b>that</b> <u>should</u> be cleared</p><h1>Test Other Tags</h1><ul><li>Test 1</li><li>Test 2</li></ul>');
expect($rootScope.htmlcontent).toBe('<div class="test-class"><p class="test-class" style="text-align: left;">Test Content <b>that</b> <u>should</u> be cleared</p><h1>Test Other Tags</h1><ul><li>Test 1</li><li>Test 2</li></ul></div>');
});

it('doesn\'t clear singly selected list elements, but clears them of formatting', function(){
Expand All @@ -474,7 +480,7 @@ describe('taTools test tool actions', function(){
sel.setSingleRange(range);
sel.refresh();
findAndTriggerButton('clear');
expect($rootScope.htmlcontent).toBe('<p class="test-class" style="text-align: left;">Test Content <b>that</b> <u>should</u> be cleared</p><h1>Test Other Tags</h1><ul><li>Test 1</li><li>Test 2</li></ul>');
expect($rootScope.htmlcontent).toBe('<div class="test-class"><p class="test-class" style="text-align: left;">Test Content <b>that</b> <u>should</u> be cleared</p><h1>Test Other Tags</h1><ul><li>Test 1</li><li>Test 2</li></ul></div>');
});

describe('collapsed selection in list escapse list element', function(){
Expand Down

0 comments on commit 5453c6b

Please sign in to comment.