Merge pull request #7531 from svbergerem/comment-preview-mentions

Render mentions in comment previews correctly

app/assets/javascripts/app/views/comment_stream_view.js

@@ -28,10 +28,13 @@ app.views.CommentStream = app.views.Base.extend({
     this.model.comments.each(this.appendComment, this);
     this.commentBox = this.$(".comment_box");
     this.commentSubmitButton = this.$("input[name='commit']");
-    new app.views.CommentMention({el: this.$el, postId: this.model.get("id")});
+    this.mentions = new app.views.CommentMention({el: this.$el, postId: this.model.get("id")});
 
     this.mdEditor = new Diaspora.MarkdownEditor(this.$(".comment_box"), {
-      onPreview: Diaspora.MarkdownEditor.simplePreview,
+      onPreview: function($mdInstance) {
+        var renderedText = app.helpers.textFormatter($mdInstance.getContent(), this.mentions.getMentionedPeople());
+        return "<div class='preview-content'>" + renderedText + "</div>";
+      }.bind(this),
       onFocus: this.openForm.bind(this)
     });
   },

spec/javascripts/app/views/comment_stream_view_spec.js

@@ -61,11 +61,13 @@ describe("app.views.CommentStream", function(){
       expect(this.view.commentSubmitButton).toEqual(this.view.$("input[name='commit']"));
     });
 
-    it("initializes CommentMention view", function() {
+    it("sets mentions", function() {
       spyOn(app.views.CommentMention.prototype, "initialize");
+      this.view.mentions = undefined;
       this.view.postRenderTemplate();
       var call = app.views.CommentMention.prototype.initialize.calls.mostRecent();
       expect(call.args[0]).toEqual({el: this.view.$el, postId: this.view.model.id});
+      expect(this.view.mentions).toBeDefined();
     });
 
     it("creates the markdown editor", function() {
@@ -75,6 +77,21 @@ describe("app.views.CommentStream", function(){
       expect(Diaspora.MarkdownEditor.prototype.initialize).toHaveBeenCalled();
       expect(this.view.mdEditor).toBeDefined();
     });
+
+    it("adds a preview method to the markdown editor that renders mentions", function() {
+      this.view.postRenderTemplate();
+      var mdInstance = {getContent: function() { return "@{test@example.org}"; }};
+      spyOn(this.view.mentions, "getMentionedPeople").and.returnValue([{
+        name: "Alice Awesome",
+        handle: "test@example.org",
+        id: "4",
+        guid: "123abc"
+      }]);
+      var renderedPreview = this.view.mdEditor.options.onPreview(mdInstance),
+          renderedText = app.helpers.textFormatter("@{test@example.org}", this.view.mentions.getMentionedPeople());
+      expect(renderedPreview).toBe("<div class='preview-content'>" + renderedText + "</div>");
+      expect(renderedPreview).toContain("Alice Awesome");
+    });
   });
 
   describe("createComment", function() {