add support for both wordByWord and charByChar hightlight

Author: rtfpessoa

src/diff2html.js

@@ -15,12 +15,24 @@
   function Diff2Html() {
   }
 
+  /*
+   * config
+   * {
+   * "wordByWord" : true (default)
+   * OR
+   * "charByChar" : true
+   * }
+   *
+   */
+
   /*
    * Generates pretty html from string diff input
    */
-  Diff2Html.prototype.getPrettyHtmlFromDiff = function (diffInput) {
+  Diff2Html.prototype.getPrettyHtmlFromDiff = function (diffInput, config) {
     var diffJson = diffParser.generateDiffJson(diffInput);
-    return htmlPrinter.generateLineByLineJsonHtml(diffJson);
+
+    var configOrEmpty = config || {};
+    return htmlPrinter.generateLineByLineJsonHtml(diffJson, configOrEmpty);
   };
 
   /*
@@ -33,23 +45,27 @@
   /*
    * Generates pretty html from a json object
    */
-  Diff2Html.prototype.getPrettyHtmlFromJson = function (diffJson) {
-    return htmlPrinter.generateLineByLineJsonHtml(diffJson);
+  Diff2Html.prototype.getPrettyHtmlFromJson = function (diffJson, config) {
+    var configOrEmpty = config || {};
+    return htmlPrinter.generateLineByLineJsonHtml(diffJson, configOrEmpty);
   };
 
   /*
    * Generates pretty side by side html from string diff input
    */
-  Diff2Html.prototype.getPrettySideBySideHtmlFromDiff = function (diffInput) {
+  Diff2Html.prototype.getPrettySideBySideHtmlFromDiff = function (diffInput, config) {
     var diffJson = diffParser.generateDiffJson(diffInput);
-    return htmlPrinter.generateSideBySideJsonHtml(diffJson);
+
+    var configOrEmpty = config || {};
+    return htmlPrinter.generateSideBySideJsonHtml(diffJson, configOrEmpty);
   };
 
   /*
    * Generates pretty side by side html from a json object
    */
-  Diff2Html.prototype.getPrettySideBySideHtmlFromJson = function (diffJson) {
-    return htmlPrinter.generateSideBySideJsonHtml(diffJson);
+  Diff2Html.prototype.getPrettySideBySideHtmlFromJson = function (diffJson, config) {
+    var configOrEmpty = config || {};
+    return htmlPrinter.generateSideBySideJsonHtml(diffJson, configOrEmpty);
   };
 
   if (typeof module !== 'undefined' && module.exports) {

src/line-by-line-printer.js

@@ -14,7 +14,7 @@
   function LineByLinePrinter() {
   }
 
-  LineByLinePrinter.prototype.generateLineByLineJsonHtml = function (diffFiles) {
+  LineByLinePrinter.prototype.generateLineByLineJsonHtml = function (diffFiles, config) {
     return "<div class=\"d2h-wrapper\">\n" +
       diffFiles.map(function (file) {
         return "<div class=\"d2h-file-wrapper\" data-lang=\"" + file.language + "\">\n" +
@@ -29,7 +29,7 @@
           "       <div class=\"d2h-code-wrapper\">\n" +
           "         <table class=\"d2h-diff-table\">\n" +
           "           <tbody class=\"d2h-diff-tbody\">\n" +
-          "         " + generateFileHtml(file) +
+          "         " + generateFileHtml(file, config) +
           "           </tbody>\n" +
           "         </table>\n" +
           "       </div>\n" +
@@ -39,7 +39,7 @@
       "</div>\n";
   };
 
-  function generateFileHtml(file) {
+  function generateFileHtml(file, config) {
     return file.blocks.map(function (block) {
 
       var lines = "<tr>\n" +
@@ -76,7 +76,8 @@
               oldEscapedLine = utils.escape(oldLine.content);
               newEscapedLine = utils.escape(newLine.content);
 
-              var diff = printerUtils.diffHighlight(oldEscapedLine, newEscapedLine, file.isTripleDiff);
+              config.isTripleDiff = file.isTripleDiff;
+              var diff = printerUtils.diffHighlight(oldEscapedLine, newEscapedLine, config);
 
               processedOldLines += generateLineHtml(oldLine.type, oldLine.oldNumber, oldLine.newNumber, diff.o);
               processedNewLines += generateLineHtml(newLine.type, newLine.oldNumber, newLine.newNumber, diff.n);

src/printer-utils.js

@@ -25,20 +25,25 @@
     }
   };
 
-  PrinterUtils.prototype.diffHighlight = function (diffLine1, diffLine2, isTripleDiff) {
+  PrinterUtils.prototype.diffHighlight = function (diffLine1, diffLine2, config) {
     var lineStart1, lineStart2;
 
     var prefixSize = 1;
 
-    if (isTripleDiff) prefixSize = 2;
+    if (config.isTripleDiff) prefixSize = 2;
 
     lineStart1 = diffLine1.substr(0, prefixSize);
     lineStart2 = diffLine2.substr(0, prefixSize);
 
     diffLine1 = diffLine1.substr(prefixSize);
     diffLine2 = diffLine2.substr(prefixSize);
 
-    var diff = jsDiff.diffChars(diffLine1, diffLine2);
+    var diff;
+    if (config.charByChar) diff = jsDiff.diffChars(diffLine1, diffLine2);
+    else diff = jsDiff.diffWordsWithSpace(diffLine1, diffLine2);
+
+    //var diff = jsDiff.diffChars(diffLine1, diffLine2);
+    //var diff = jsDiff.diffWordsWithSpace(diffLine1, diffLine2);
 
     var highlightedLine = "";
 

src/side-by-side-printer.js

@@ -14,10 +14,10 @@
   function SideBySidePrinter() {
   }
 
-  SideBySidePrinter.prototype.generateSideBySideJsonHtml = function (diffFiles) {
+  SideBySidePrinter.prototype.generateSideBySideJsonHtml = function (diffFiles, config) {
     return "<div class=\"d2h-wrapper\">\n" +
       diffFiles.map(function (file) {
-        var diffs = generateSideBySideFileHtml(file);
+        var diffs = generateSideBySideFileHtml(file, config);
 
         return "<div class=\"d2h-file-wrapper\" data-lang=\"" + file.language + "\">\n" +
           "     <div class=\"d2h-file-header\">\n" +
@@ -52,7 +52,7 @@
       "</div>\n";
   };
 
-  function generateSideBySideFileHtml(file) {
+  function generateSideBySideFileHtml(file, config) {
     var fileHtml = {};
     fileHtml.left = "";
     fileHtml.right = "";
@@ -101,7 +101,9 @@
               oldEscapedLine = utils.escape(oldLine.content);
               newEscapedLine = utils.escape(newLine.content);
 
-              var diff = printerUtils.diffHighlight(oldEscapedLine, newEscapedLine, file.isTripleDiff);
+              config.isTripleDiff = file.isTripleDiff;
+
+              var diff = printerUtils.diffHighlight(oldEscapedLine, newEscapedLine, config);
 
               fileHtml.left += generateSingleLineHtml(oldLine.type, oldLine.oldNumber, diff.o);
               fileHtml.right += generateSingleLineHtml(newLine.type, newLine.newNumber, diff.n);