Github like diff

lib/views/layout/layout.html

@@ -12,6 +12,7 @@
   <meta name="viewport" content="width=device-width,initial-scale=1">
 
   <link rel="stylesheet" href="/css/crowi{% if env  == 'production' %}.min{% endif %}.css">
+  <link rel="stylesheet" href="/css/diff2html/diff2html{% if env  == 'production' %}.min{% endif %}.css">
 
   <script src="{{ assets('/js/bundled.js') }}"></script>
   <link href='//fonts.googleapis.com/css?family=Open+Sans:400,700' rel='stylesheet' type='text/css'>

npm-shrinkwrap.json

@@ -1465,6 +1465,23 @@
       "from": "diff@>=2.2.2 <2.3.0",
       "resolved": "https://registry.npmjs.org/diff/-/diff-2.2.3.tgz"
     },
+    "diff2html": {
+      "version": "2.0.12",
+      "from": "diff2html@>=2.0.12 <3.0.0",
+      "resolved": "https://registry.npmjs.org/diff2html/-/diff2html-2.0.12.tgz",
+      "dependencies": {
+        "diff": {
+          "version": "3.2.0",
+          "from": "diff@>=3.2.0 <4.0.0",
+          "resolved": "https://registry.npmjs.org/diff/-/diff-3.2.0.tgz"
+        },
+        "whatwg-fetch": {
+          "version": "2.0.2",
+          "from": "whatwg-fetch@>=2.0.1 <3.0.0",
+          "resolved": "https://registry.npmjs.org/whatwg-fetch/-/whatwg-fetch-2.0.2.tgz"
+        }
+      }
+    },
     "dom-serializer": {
       "version": "0.1.0",
       "from": "dom-serializer@>=0.0.0 <1.0.0",

package.json

@@ -50,6 +50,7 @@
     "debug": "~2.2.0",
     "del": "~2.2.0",
     "diff": "~2.2.2",
+    "diff2html": "^2.0.12",
     "elasticsearch": "~11.0.1",
     "emojify.js": "^1.1.0",
     "errorhandler": "~1.3.4",

public/css/diff2html

@@ -0,0 +1 @@
+../../node_modules/diff2html/dist

resource/js/crowi.js

@@ -3,6 +3,7 @@
 */
 
 var jsdiff = require('diff');
+var diff2html = require('diff2html').Diff2Html;
 var io = require('socket.io-client');
 
 //require('bootstrap-sass');
@@ -758,14 +759,8 @@ $(function() {
 
           $diffDisplay.text('');
 
-          var diff = jsdiff.diffLines(previousText, currentText);
-          diff.forEach(function(part) {
-            var color = part.added ? 'green' : part.removed ? 'red' : 'grey';
-            var $span = $('<span>');
-            $span.css('color', color);
-            $span.text(part.value);
-            $diffDisplay.append($span);
-          });
+          var patch = jsdiff.createPatch($('#revision-path').text(), previousText, currentText);
+          $diffDisplay.html(diff2html.getPrettyHtml(patch));
 
           $diffDisplay.data('loaded', 1);
           $diffDisplay.slideToggle();