show diff in post history view

app/assets/javascripts/discourse/templates/history.js.handlebars

@@ -1,7 +1,7 @@
-<div class="modal-body">    
+<div class="modal-body">
 
   {{#if view.loading}}
-    Loading...
+    {{i18n loading}}
   {{else}}
     <div class='span8'>
 
@@ -25,19 +25,18 @@
       {{view Ember.Select
         contentBinding="view.versions"
         optionLabelPath="content.description"
-        optionValuePath="content.number"          
+        optionValuePath="content.number"
         selectionBinding="view.versionRight"}}
 
       <div class='contents'>
-        {{#if view.postRight}}
-          {{{view.postRight.cooked}}}
+        {{#if view.diff}}
+          {{{view.diff}}}
         {{else}}
           <div class='history-loading'>{{i18n loading}}</div>
         {{/if}}
       </div>
 
-    </div>        
+    </div>
   {{/if}}
 
-</div>
-
+</div>

app/assets/javascripts/discourse/views/modal/history_view.js

@@ -1,3 +1,6 @@
+/*jshint newcap:false*/
+/*global diff_match_patch:true assetPath:true*/
+
 /**
   This view handles rendering of the history of a post
 
@@ -10,6 +13,16 @@ Discourse.HistoryView = Discourse.View.extend({
   templateName: 'history',
   title: Em.String.i18n('history'),
   modalClass: 'history-modal',
+  diffLibraryLoaded: false,
+  diff: null,
+
+  init: function(){
+    this._super();
+    var historyView = this;
+    $LAB.script(assetPath('defer/google_diff_match_patch')).wait(function(){
+      historyView.set('diffLibraryLoaded', true);
+    });
+  },
 
   loadSide: function(side) {
     if (this.get("version" + side)) {
@@ -34,10 +47,23 @@ Discourse.HistoryView = Discourse.View.extend({
     this.loadSide("Right");
   }.observes('versionRight'),
 
+  loadedPosts: function() {
+    if (this.get('diffLibraryLoaded') && this.get('postLeft') && this.get('postRight')) {
+      var dmp = new diff_match_patch(),
+          before = this.get("postLeft.cooked"),
+          after = this.get("postRight.cooked"),
+          diff = dmp.diff_main(before, after);
+      dmp.diff_cleanupSemantic(diff);
+      this.set('diff', dmp.diff_prettyHtml(diff));
+    }
+  }.observes('diffLibraryLoaded', 'postLeft', 'postRight'),
+
   didInsertElement: function() {
-    this.set('loading', true);
-    this.set('postLeft', null);
-    this.set('postRight', null);
+    this.setProperties({
+      loading: true,
+      postLeft: null,
+      postRight: null
+    });
 
     var historyView = this;
     this.get('originalPost').loadVersions().then(function(result) {
@@ -46,12 +72,12 @@ Discourse.HistoryView = Discourse.View.extend({
           Em.String.i18n("changed_by", { author: item.display_username });
       });
 
-      historyView.set('loading', false);
-      historyView.set('versionLeft', result.first());
-      historyView.set('versionRight', result.last());
-      historyView.set('versions', result);
+      historyView.setProperties({
+        loading: false,
+        versionLeft: result.first(),
+        versionRight: result.last(),
+        versions: result
+      });
     });
   }
 });
-
-

app/assets/stylesheets/application/history.css.scss

@@ -8,6 +8,12 @@
   width: 960px;
   margin-left: -460px;
   min-height: 500px;
+  ins {
+    background: #e6ffe6;
+  }
+  del {
+    background: #ffe6e6;
+  }
   .modal-header {
     height: 42px;
   }

app/views/common/_discourse_javascript.html.erb

@@ -3,7 +3,8 @@
 
     // TODO: automate this to grab from the manifest, Rails voodoo should be able to get it
     var map = {
-      'defer/html-sanitizer-bundle': <%= asset_path('defer/html-sanitizer-bundle.js').inspect.html_safe %>
+      'defer/html-sanitizer-bundle': <%= asset_path('defer/html-sanitizer-bundle.js').inspect.html_safe %>,
+      'defer/google_diff_match_patch': <%= asset_path('defer/google_diff_match_patch.js').inspect.html_safe %>
     };
 
     var assetPath = function(asset){

config/application.rb

@@ -29,10 +29,12 @@ module Discourse
 
     config.assets.paths += %W(#{config.root}/config/locales)
 
-    config.assets.precompile += [
-      'admin.js', 'admin.css', 'shiny/shiny.css', 'preload_store.js',
-      'jquery.js', 'defer/html-sanitizer-bundle.js'
-    ]
+    config.assets.precompile += ['admin.js', 'admin.css', 'shiny/shiny.css', 'preload_store.js', 'jquery.js']
+
+    # Precompile all defer
+    Dir.glob("app/assets/javascripts/defer/*.js").each do |file|
+      config.assets.precompile << file
+    end
 
     # Precompile all available locales
     Dir.glob("app/assets/javascripts/locales/*.js.erb").each do |file|