Merge pull request #3257 from CatoTH/Issue3247-Remove-Color-Styles-Inside-Diff

Remove color styles insert .insert/.delete-Paragraphs - fixes #3247
This commit is contained in:
Norman Jäckel 2017-05-18 21:31:51 +02:00 committed by GitHub
commit 7c2a28b368
2 changed files with 54 additions and 4 deletions

View File

@ -976,6 +976,7 @@ angular.module('OpenSlidesApp.motions.diff', ['OpenSlidesApp.motions.lineNumberi
wrapDel.appendChild(currChild);
} else {
this.addCSSClass(currChild, 'delete');
this._removeColorStyles(currChild);
}
}
for (i = 0; i < newTextWithBreaks.childNodes.length; i++) {
@ -987,6 +988,7 @@ angular.module('OpenSlidesApp.motions.diff', ['OpenSlidesApp.motions.lineNumberi
wrapIns.appendChild(currChild);
} else {
this.addCSSClass(currChild, 'insert');
this._removeColorStyles(currChild);
}
}
@ -1018,6 +1020,38 @@ angular.module('OpenSlidesApp.motions.diff', ['OpenSlidesApp.motions.lineNumberi
});
};
/**
* This function removes color-Attributes from the styles of this node or a descendant,
* as they interfer with the green/red color in HTML and PDF
*
* For the moment, it is sufficient to do this only in paragraph diff mode, as we fall back to this mode anyway
* once we encounter SPANs or other tags inside of INS/DEL-tags
*
* @param {Element} node
* @private
*/
this._removeColorStyles = function (node) {
var styles = node.getAttribute('style');
if (styles && styles.indexOf('color') > -1) {
var stylesNew = [];
styles.split(';').forEach(function(style) {
if (!style.match(/^\s*color\s*:/i)) {
stylesNew.push(style);
}
});
if (stylesNew.join(";") === '') {
node.removeAttribute('style');
} else {
node.setAttribute('style', stylesNew.join(";"));
}
}
for (var i = 0; i < node.childNodes.length; i++) {
if (node.childNodes[i].nodeType === ELEMENT_NODE) {
this._removeColorStyles(node.childNodes[i]);
}
}
};
/**
* This function calculates the diff between two strings and tries to fix problems with the resulting HTML.
* If lineLength and firstLineNumber is given, line numbers will be returned es well

View File

@ -463,6 +463,22 @@ describe('linenumbering', function () {
expect(diff).toBe(expected.toLowerCase());
});
it('removed inline colors in inserted/deleted parts (1)', function () {
var before = "<P>...so frißt er Euch alle mit Haut und Haar.</P>",
after = "<P>...so frißt er <span style='color: #000000;'>Euch alle</span> mit Haut und Haar.</P>";
var diff = diffService.diff(before, after);
expect(diff).toBe('<P class="delete">...so frißt er Euch alle mit Haut und Haar.</P><P class="insert">...so frißt er <SPAN>Euch alle</SPAN> mit Haut und Haar.</P>');
});
it('removed inline colors in inserted/deleted parts (2)', function () {
var before = "<P>...so frißt er Euch alle mit Haut und Haar.</P>",
after = "<P>...so frißt er <span style='font-size: 2em; color: #000000; opacity: 0.5'>Euch alle</span> mit Haut und Haar.</P>";
var diff = diffService.diff(before, after);
expect(diff).toBe('<P class="delete">...so frißt er Euch alle mit Haut und Haar.</P><P class="insert">...so frißt er <SPAN style="font-size: 2em; opacity: 0.5">Euch alle</SPAN> mit Haut und Haar.</P>');
});
});
describe('ignoring line numbers', function () {
@ -509,11 +525,11 @@ describe('linenumbering', function () {
after = "<p>holen, da rief sie alle sieben herbei und sprach:</p>\n\n<p><span style=\"color: #000000;\">Hello</span></p>\n\n<p><span style=\"color: #000000;\">World</span></p>\n\n<p><span style=\"color: #000000;\">Ya</span></p>\n\n<p>Die Geißlein sagten: \" Liebe Mutter, wir wollen uns schon in acht nehmen, du kannst ohne</p>";
var diff = diffService.diff(before, after);
expect(diff).toBe("<P class=\"delete\"><SPAN class=\"os-line-number line-number-3\" data-line-number=\"3\" contenteditable=\"false\"> </SPAN>holen, da rief sie alle sieben herbei und sprach:</P><DEL>\n\n</DEL>" +
"<P class=\"delete\"><SPAN class=\"os-line-number line-number-4\" data-line-number=\"4\" contenteditable=\"false\"> </SPAN><SPAN style=\"color: #000000;\">\"Liebe Kinder, ich will hinaus in den Wald, seid auf der Hut vor dem Wolf! Wenn er <BR class=\"os-line-break\"><SPAN class=\"os-line-number line-number-5\" data-line-number=\"5\" contenteditable=\"false\"> </SPAN>hereinkommt, frisst er euch alle mit Haut und Haar. Der Bösewicht verstellt sich oft, aber <BR class=\"os-line-break\"><SPAN class=\"os-line-number line-number-6\" data-line-number=\"6\" contenteditable=\"false\"> </SPAN>an der rauen Stimme und an seinen schwarzen Füßen werdet ihr ihn schon erkennen.\"</SPAN></P><DEL>\n\n</DEL><P class=\"delete\"><SPAN class=\"os-line-number line-number-7\" data-line-number=\"7\" contenteditable=\"false\"> </SPAN>Die Geißlein sagten: \" Liebe Mutter, wir wollen uns schon in acht nehmen, du kannst ohne </P>" +
"<P class=\"delete\"><SPAN class=\"os-line-number line-number-4\" data-line-number=\"4\" contenteditable=\"false\"> </SPAN><SPAN>\"Liebe Kinder, ich will hinaus in den Wald, seid auf der Hut vor dem Wolf! Wenn er <BR class=\"os-line-break\"><SPAN class=\"os-line-number line-number-5\" data-line-number=\"5\" contenteditable=\"false\"> </SPAN>hereinkommt, frisst er euch alle mit Haut und Haar. Der Bösewicht verstellt sich oft, aber <BR class=\"os-line-break\"><SPAN class=\"os-line-number line-number-6\" data-line-number=\"6\" contenteditable=\"false\"> </SPAN>an der rauen Stimme und an seinen schwarzen Füßen werdet ihr ihn schon erkennen.\"</SPAN></P><DEL>\n\n</DEL><P class=\"delete\"><SPAN class=\"os-line-number line-number-7\" data-line-number=\"7\" contenteditable=\"false\"> </SPAN>Die Geißlein sagten: \" Liebe Mutter, wir wollen uns schon in acht nehmen, du kannst ohne </P>" +
"<P class=\"insert\">holen, da rief sie alle sieben herbei und sprach:</P><INS>\n\n</INS>" +
"<P class=\"insert\"><SPAN style=\"color: #000000;\">Hello</SPAN></P><INS>\n\n</INS>" +
"<P class=\"insert\"><SPAN style=\"color: #000000;\">World</SPAN></P><INS>\n\n</INS>" +
"<P class=\"insert\"><SPAN style=\"color: #000000;\">Ya</SPAN></P><INS>\n\n</INS>" +
"<P class=\"insert\"><SPAN>Hello</SPAN></P><INS>\n\n</INS>" +
"<P class=\"insert\"><SPAN>World</SPAN></P><INS>\n\n</INS>" +
"<P class=\"insert\"><SPAN>Ya</SPAN></P><INS>\n\n</INS>" +
"<P class=\"insert\">Die Geißlein sagten: \" Liebe Mutter, wir wollen uns schon in acht nehmen, du kannst ohne</P>");
});
});