Skip to content

Commit

Permalink
enhancement(taFixChrome, main, taBind, taFixChrome.spec): added ta-ke…
Browse files Browse the repository at this point in the history 
…ep-styles to allow one to force taFixChrome to keep the styles that it mornally removes.
  • Loading branch information
@JoelParke
JoelParke committed Dec 3, 2016
1 parent 92299ec commit c61b45e
Show file tree
Hide file tree
Showing 5 changed files with 51 additions and 23 deletions.
51 changes: 33 additions & 18 deletions src/factories.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -33,7 +33,7 @@ angular.module('textAngular.factories', [])
}]).factory('taFixChrome', function(){
// get whaterever rubbish is inserted in chrome
// should be passed an html string, returns an html string
var taFixChrome = function(html){
var taFixChrome = function(html, keepStyles){
if(!html || !angular.isString(html) || html.length <= 0) return html;
// grab all elements with a style attibute
// a betterSpanMatch matches only a style=... with matching quotes
Expand Down Expand Up @@ -62,25 +62,40 @@ angular.module('textAngular.factories', [])
finalHtml='';
lastIndex=0;
}
while(match = betterSpanMatch.exec(html)){
//console.log('matched string:', match[0], 'before:', html.substring(lastIndex, match.index-1));
finalHtml += html.substring(lastIndex, match.index-1);
lastIndex += match.index;
styleVal = match[0];
lastIndex += match[0].length;
// test for chrome inserted junk
match = /font-family: inherit;|line-height: 1.[0-9]{3,12};|color: inherit; line-height: 1.1;|color: rgb\(\d{1,3}, \d{1,3}, \d{1,3}\);|background-color: rgb\(\d{1,3}, \d{1,3}, \d{1,3}\);/gi.exec(styleVal);
if (match) {
styleVal = styleVal.replace(/( |)font-family: inherit;|( |)line-height: 1.[0-9]{3,12};|( |)color: inherit;|( |)color: rgb\(\d{1,3}, \d{1,3}, \d{1,3}\);|( |)background-color: rgb\(\d{1,3}, \d{1,3}, \d{1,3}\);/ig, '');
//console.log(styleVal, styleVal.length);
if (styleVal.length>8) {
/////////////////////////////////////////////////////////////
//
// Allow control of this modification
// taKeepStyles: False - removes these modification
//
// taFixChrome removes the following styles:
// font-family: inherit;
// line-height: <number>
// color: inherit;
// color: rgb( <rgb-component>#{3} )
// background-color: rgb( <rgb-component>#{3} )
//
/////////////////////////////////////////////////////////////
if (!keepStyles) {
while (match = betterSpanMatch.exec(html)) {
//console.log('matched string:', match[0], 'before:', html.substring(lastIndex, match.index-1));
finalHtml += html.substring(lastIndex, match.index - 1);
lastIndex += match.index;
styleVal = match[0];
lastIndex += match[0].length;
// test for chrome inserted junk
match = /font-family: inherit;|line-height: 1.[0-9]{3,12};|color: inherit; line-height: 1.1;|color: rgb\(\d{1,3}, \d{1,3}, \d{1,3}\);|background-color: rgb\(\d{1,3}, \d{1,3}, \d{1,3}\);/gi.exec(styleVal);
if (match) {
styleVal = styleVal.replace(/( |)font-family: inherit;|( |)line-height: 1.[0-9]{3,12};|( |)color: inherit;|( |)color: rgb\(\d{1,3}, \d{1,3}, \d{1,3}\);|( |)background-color: rgb\(\d{1,3}, \d{1,3}, \d{1,3}\);/ig, '');
//console.log(styleVal, styleVal.length);
if (styleVal.length > 8) {
finalHtml += ' ' + styleVal;
}
} else {
finalHtml += ' ' + styleVal;
}
} else {
finalHtml += ' ' + styleVal;
}
}
finalHtml += html.substring(lastIndex);
}
finalHtml += html.substring(lastIndex);
}
//console.log('final:', finalHtml);
// only replace when something has changed, else we get focus problems on inserting lists
if(lastIndex > 0){
Expand Down
7 changes: 6 additions & 1 deletion src/main.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -375,7 +375,12 @@ textAngular.directive("textAngular", [
scope.displayElements.html.attr('ta-unsafe-sanitizer', attrs.taUnsafeSanitizer);
}

// add the main elements to the origional element
if(attrs.taKeepStyles){
scope.displayElements.text.attr('ta-keep-styles', attrs.taKeepStyles);
scope.displayElements.html.attr('ta-keep-styles', attrs.taKeepStyles);
}

// add the main elements to the origional element
scope.displayElements.scrollWindow.append(scope.displayElements.text);
element.append(scope.displayElements.scrollWindow);
element.append(scope.displayElements.html);
Expand Down
3 changes: 2 additions & 1 deletion src/taBind.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -60,6 +60,7 @@ angular.module('textAngular.taBind', ['textAngular.factories', 'textAngular.DOM'
var _focussed = false;
var _skipRender = false;
var _disableSanitizer = attrs.taUnsafeSanitizer || taOptions.disableSanitizer;
var _keepStyles = attrs.taKeepStyles || taOptions.keepStyles;
var _lastKey;
// see http://www.javascripter.net/faq/keycodes.htm for good information
// NOTE Mute On|Off 173 (Opera MSIE Safari Chrome) 181 (Firefox)
Expand Down Expand Up @@ -361,7 +362,7 @@ angular.module('textAngular.taBind', ['textAngular.factories', 'textAngular.DOM'
// catch DOM XSS via taSanitize
// Sanitizing both ways is identical
var _sanitize = function(unsafe){
return (ngModel.$oldViewValue = taSanitize(taFixChrome(unsafe), ngModel.$oldViewValue, _disableSanitizer));
return (ngModel.$oldViewValue = taSanitize(taFixChrome(unsafe, _keepStyles), ngModel.$oldViewValue, _disableSanitizer));
};

// trigger the validation calls
Expand Down
10 changes: 8 additions & 2 deletions test/taFixChrome.spec.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -32,10 +32,16 @@ describe('taFixChrome', function(){
expect(taFixChrome('<p class="p1">I can see this part of the text<span class="Apple-converted-space">&nbsp; </span>but not this part</p>')).toBe('<p class="p1">I can see this part of the text but not this part</p>');
});

it('should not damage a reasonable background-color style', function(){
//expect(taFixChrome('<a style="background-color: rgb(255, 255, 255);" href="https://www.google.pl" target="_blank">google</a>')).toBe('<a style="background-color: rgb(255, 255, 255);" href="https://www.google.pl" target="_blank">google</a>');
it('should not damage html when removing style', function(){
expect(taFixChrome('<a style="background-color: rgb(255, 255, 255);" href="https://www.google.pl" target="_blank">google</a>')).toBe('<a href="https://www.google.pl" target="_blank">google</a>');
});

it('should keep background-color style', function(){
expect(taFixChrome('<a style="background-color: rgb(255, 255, 255);" href="https://www.google.pl" target="_blank">google</a>', true)).toBe('<a style="background-color: rgb(255, 255, 255);" href="https://www.google.pl" target="_blank">google</a>');
});

it('should keep styles', function(){
expect(taFixChrome('<div><span style="font-family: inherit; line-height: 1.428571429;">Test Content</span></div>', true)).toBe('<div><span style="font-family: inherit; line-height: 1.428571429;">Test Content</span></div>');
});
});
});
3 changes: 2 additions & 1 deletion test/textAngular.spec.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -671,7 +671,8 @@ describe('textAngular', function(){
beforeEach(inject(function (_$compile_, _$rootScope_, textAngularManager) {
$rootScope = _$rootScope_;
$rootScope.html = '<p>Test Contents</p>';
element = _$compile_('<text-angular name="test" ta-unsafe-sanitizer="true" ng-model="html"></text-angular>')($rootScope);
// note that ta-unsafe-sanitizer has no effect for these tests, we simply set it true here to enable 100% coverage
element = _$compile_('<text-angular name="test" ta-keep-styles="false" ta-unsafe-sanitizer="true" ng-model="html"></text-angular>')($rootScope);
$rootScope.$digest();
editorScope = textAngularManager.retrieveEditor('test').scope;
element = editorScope.displayElements.text;
Expand Down

0 comments on commit c61b45e

Please sign in to comment.