Merge branch 'comment-paragraph' into 'master'

Frontend for comment paragraph plugin See merge request !7

Merge branch 'comment-paragraph' into 'master'
Frontend for comment paragraph plugin See merge request !7
Michel Felipe
2 parents c0fd7cf6 800e2559
Showing 52 changed files with 1055 additions and 78 deletions Show diff stats
bower.json
gulp/build.js
gulp/conf.js
gulp/languages.js
gulp/server.js
gulp/styles.js
gulp/watch.js
karma.conf.js
package.json
src/app/article/article-default-view.component.ts
src/app/article/article.html
src/app/article/comment/comment-reply-tooltip.html
src/app/article/comment/comment.component.ts
src/app/article/comment/comment.html
src/app/article/comment/comment.scss
src/app/article/comment/comments.component.ts
src/app/article/comment/comments.html
src/app/article/comment/post-comment/post-comment.component.ts
src/app/article/comment/post-comment/post-comment.html
src/app/article/macro/macro.directive.spec.ts
@@ -35,6 +35,8 @@
     "angular-i18n": "^1.5.0",
     "angular-load": "^0.4.1",
     "angular-translate-interpolation-messageformat": "^2.10.0",
+	"angular-bind-html-compile": "^1.2.1",
+	"angular-click-outside": "^2.7.1",
     "ng-ckeditor": "^0.2.1",
     "ckeditor": "^4.5.8"
   },
@@ -6,6 +6,7 @@ var rename = require(&#39;gulp-rename&#39;);
 var insert = require('gulp-insert');
 var merge = require('merge-stream');
 var conf = require('./conf');
+var languages = require('./languages');
 var themeName = conf.paths.theme.replace('-', ' ');
 themeName = themeName.charAt(0).toUpperCase() + themeName.slice(1);
@@ -16,25 +17,31 @@ var $ = require(&#39;gulp-load-plugins&#39;)({
 });
 gulp.task('partials', function () {
-  var srcPaths = [path.join(conf.paths.tmp, '/serve/app/**/*.html')];
-  conf.paths.allSources.forEach(function(src) {
-    srcPaths.push(path.join(src, '/app/**/*.html'));
+  var merged = merge();
+  ['app', conf.paths.plugins].forEach(function(partialPath) {
+    var srcPaths = [path.join(conf.paths.tmp, '/serve/app/**/*.html')];
+    conf.paths.allSources.forEach(function(src) {
+      srcPaths.push(path.join(src, partialPath, '/**/*.html'));
+    });
+    merged.add(gulp.src(srcPaths)
+      .pipe($.minifyHtml({
+        empty: true,
+        spare: true,
+        quotes: true
+      }))
+      .pipe($.angularTemplatecache('templateCacheHtml-'+partialPath+'.js', {
+        module: 'noosferoApp',
+        root: partialPath
+      }))
+      .pipe(gulp.dest(conf.paths.tmp + '/partials/')));
   });
-  return gulp.src(srcPaths)
-    .pipe($.minifyHtml({
-      empty: true,
-      spare: true,
-      quotes: true
-    }))
-    .pipe($.angularTemplatecache('templateCacheHtml.js', {
-      module: 'noosferoApp',
-      root: 'app'
-    }))
-    .pipe(gulp.dest(conf.paths.tmp + '/partials/'));
+  return merged;
 });
 gulp.task('html', ['inject', 'partials'], function () {
-  var partialsInjectFile = gulp.src(path.join(conf.paths.tmp, '/partials/templateCacheHtml.js'), { read: false });
+  var partialsInjectFile = gulp.src([
+    path.join(conf.paths.tmp, '/partials/templateCacheHtml-app.js'),
+    path.join(conf.paths.tmp, '/partials/templateCacheHtml-plugins.js')], { read: false });
   var partialsInjectOptions = {
     starttag: '<!-- inject:partials -->',
     ignorePath: path.join(conf.paths.tmp, '/partials'),
@@ -124,6 +131,10 @@ gulp.task(&#39;clean-docs&#39;, [], function() {
     return $.del([path.join(conf.paths.docs, '/')]);
 });
+gulp.task('plugin-languages', ['locale'], function() {
+  return languages.pluginLanguages(conf.paths.dist);
+});
+
 gulp.task('noosfero', ['html'], function () {
     var layouts = gulp.src('layouts/**/*')
       .pipe(gulp.dest(path.join(conf.paths.dist, "layouts")));
@@ -136,4 +147,4 @@ gulp.task(&#39;noosfero&#39;, [&#39;html&#39;], function () {
     return merge(layouts, theme, index);
 });
-gulp.task('build', ['html', 'fonts', 'other', 'locale', 'noosfero']);
+gulp.task('build', ['html', 'fonts', 'other', 'locale', 'plugin-languages', 'noosfero']);
@@ -15,11 +15,13 @@ var path = require(&#39;path&#39;);
  */
 exports.paths = {
   src: 'src',
+  plugins: 'plugins',
   dist: 'dist',
   tmp: '.tmp',
   e2e: 'e2e',
   docs: 'docs',
-  themes: 'themes'
+  themes: 'themes',
+  languages: 'languages'
 };
 exports.configTheme = function(theme) {
   exports.paths.theme = theme || "angular-default";
@@ -0,0 +1,29 @@
+'use strict';
+
+var path = require('path');
+var gulp = require('gulp');
+var merge = require('merge-stream');
+var conf = require('./conf');
+var mergeJson = require('gulp-merge-json');
+var glob = require("glob");
+
+exports.pluginLanguages = function(dest) {
+  var merged = merge();
+  glob(path.join(conf.paths.src, conf.paths.languages, "*.json"), function (er, files) {
+    files.forEach(function(file) {
+      merged.add(exports.pluginLanguage(file, dest));
+    });
+  });
+  return merged;
+}
+
+exports.pluginLanguage = function(file, dest) {
+  var language = file.split('/').pop().replace('\.json','');
+  return gulp.src(path.join(conf.paths.src, '**', conf.paths.languages, language+'.json'))
+    .pipe(mergeJson(path.join(conf.paths.languages, language+'.json')))
+    .pipe(gulp.dest(dest))
+}
+
+gulp.task('serve-languages', function() {
+  return exports.pluginLanguages(path.join(conf.paths.tmp, '/serve'));
+});
@@ -45,7 +45,7 @@ browserSync.use(browserSyncSpa({
   selector: '[ng-app]'// Only needed for angular apps
 }));
-gulp.task('serve', ['watch'], function () {
+gulp.task('serve', ['serve-languages', 'watch'], function () {
   var srcPaths = [path.join(conf.paths.tmp, '/serve')];
   conf.paths.allSources.reverse().forEach(function(src) {
     srcPaths.push(src);
@@ -31,6 +31,7 @@ var buildStyles = function() {
   ];
   conf.paths.allSources.forEach(function(src) {
     srcPaths.push(path.join(src, '/app/**/*.scss'));
+    srcPaths.push(path.join(src, conf.paths.plugins, '/**/*.scss'));
   });
   var injectFiles = gulp.src(srcPaths, { read: false });
@@ -3,6 +3,7 @@
 var path = require('path');
 var gulp = require('gulp');
 var conf = require('./conf');
+var languages = require('./languages');
 var browserSync = require('browser-sync');
@@ -14,13 +15,11 @@ gulp.task(&#39;watch&#39;, [&#39;inject&#39;], function () {
   gulp.watch([path.join(conf.paths.src, '/*.html'), 'bower.json'], ['inject-reload']);
-  var stylePaths = [];
-  conf.paths.allSources.forEach(function(src) {
-    stylePaths.push(path.join(src, '/app/**/*.css'));
-    stylePaths.push(path.join(src, '/app/**/*.scss'));
-  });
-
-  gulp.watch(stylePaths, function(event) {
+  gulp.watch([
+    path.join(conf.paths.src, '/app/**/*.css'),
+    path.join(conf.paths.src, '/app/**/*.scss'),
+    path.join(conf.paths.src, conf.paths.plugins, '/**/*.scss')
+  ], function(event) {
     if(isOnlyChange(event)) {
       gulp.start('styles-reload');
     } else {
@@ -36,9 +35,14 @@ gulp.task(&#39;watch&#39;, [&#39;inject&#39;], function () {
     }
   });
+  gulp.watch(path.join(conf.paths.src, '**', conf.paths.languages, '*.json'), function(event) {
+      languages.pluginLanguage(event.path, path.join(conf.paths.tmp, '/serve'));
+  });
+
   var watchPaths = [];
   conf.paths.allSources.forEach(function(src) {
     watchPaths.push(path.join(src, '/app/**/*.html'));
+    watchPaths.push(path.join(src, conf.paths.plugins, '/**/*.html'));
   });
   gulp.watch(watchPaths, function(event) {
     browserSync.reload(event.path);
@@ -49,7 +49,7 @@ var _ = require(&#39;lodash&#39;);
 var wiredep = require('wiredep');
 var pathSrcHtml = [
-    path.join('./src/app/**/*.html')
+    path.join('./src/**/*.html')
 ];
 var glob = require("glob");
@@ -49,6 +49,7 @@
     "gulp-insert": "^0.5.0",
     "gulp-inject": "~3.0.0",
     "gulp-load-plugins": "~0.10.0",
+    "gulp-merge-json": "^0.4.0",
     "gulp-minify-css": "~1.2.1",
     "gulp-minify-html": "~1.0.4",
     "gulp-ng-annotate": "~1.1.0",
 import { bundle, Input, Inject, Component, Directive } from 'ng-forward';
 import {ArticleBlogComponent} from "./types/blog/blog.component";
 import {CommentsComponent} from "./comment/comments.component";
+import {MacroDirective} from "./macro/macro.directive";
+import {ArticleToolbarHotspotComponent} from "../hotspot/article-toolbar-hotspot.component";
 /**
  * @ngdoc controller
@@ -30,7 +32,8 @@ export class ArticleDefaultViewComponent {
 @Component({
     selector: 'noosfero-article',
     template: 'not-used',
-    directives: [ArticleDefaultViewComponent, ArticleBlogComponent, CommentsComponent]
+    directives: [ArticleDefaultViewComponent, ArticleBlogComponent,
+        CommentsComponent, MacroDirective, ArticleToolbarHotspotComponent]
 })
 @Inject("$element", "$scope", "$injector", "$compile")
 export class ArticleViewComponent {
@@ -53,6 +56,5 @@ export class ArticleViewComponent {
         private $scope: ng.IScope,
         private $injector: ng.auto.IInjectorService,
         private $compile: ng.ICompileService) {
-
     }
 }
@@ -4,9 +4,7 @@
   </div>
   <div class="sub-header clearfix">
-    <a href="#" class="btn btn-default btn-xs" ui-sref="main.cmsEdit({profile: ctrl.profile.identifier, id: ctrl.article.id})">
-      <i class="fa fa-pencil-square-o fa-fw fa-lg"></i> {{"article.actions.edit" | translate}}
-    </a>
+    <noosfero-hotspot-article-toolbar [article]="ctrl.article"></noosfero-hotspot-article-toolbar>
     <div class="page-info pull-right small text-muted">
       <span class="time">
         <i class="fa fa-clock-o"></i> <span am-time-ago="ctrl.article.created_at | dateFormat"></span>
@@ -21,7 +19,7 @@
   </div>
   <div class="page-body">
-    <div ng-bind-html="ctrl.article.body"></div>
+    <div bind-html-compile="ctrl.article.body"></div>
   </div>
   <noosfero-comments [article]="ctrl.article"></noosfero-comments>
@@ -0,0 +1,3 @@
+<div class="reply-tooltip">
+  <noosfero-comment [comment]="ctrl.comment.reply_of" [article]="ctrl.article" [display-actions]="false" [display-replies]="false"></noosfero-comment>
+</div>
@@ -9,6 +9,8 @@ export class CommentComponent {
     @Input() comment: noosfero.CommentViewModel;
     @Input() article: noosfero.Article;
+    @Input() displayActions = true;
+    @Input() displayReplies = true;
     showReply() {
         return this.comment && this.comment.__show_reply === true;
@@ -9,13 +9,19 @@
       <a class="pull-left" ui-sref="main.profile.home({profile: ctrl.comment.author.identifier})">
         <h4 class="media-heading">{{ctrl.comment.author.name}}</h4>
       </a>
+      <span class="reply-of" ng-if="ctrl.comment.reply_of" uib-tooltip-template="'app/article/comment/comment-reply-tooltip.html'">
+        <i class="fa fa-fw fa-mail-forward"></i>
+        <span class="author">{{ctrl.comment.reply_of.author.name}}</span>
+      </span>
       <span class="date" am-time-ago="ctrl.comment.created_at | dateFormat"></span>
     </div>
     <div class="title">{{ctrl.comment.title}}</div>
     <div class="body">{{ctrl.comment.body}}</div>
-    <a href="#" (click)="ctrl.reply()" class="small text-muted">
-      {{"comment.reply" | translate}}
-    </a>
+    <div class="actions" ng-if="ctrl.displayActions">
+      <a href="#" (click)="ctrl.reply()" class="small text-muted">
+        {{"comment.reply" | translate}}
+      </a>
+    </div>
   </div>
-  <noosfero-comments [show-form]="ctrl.showReply()" [article]="ctrl.article" [parent]="ctrl.comment"></noosfero-comments>
+  <noosfero-comments [show-form]="ctrl.showReply" [article]="ctrl.article" [parent]="ctrl.comment" ng-if="ctrl.displayReplies"></noosfero-comments>
 </div>
@@ -5,6 +5,7 @@
       @extend .text-muted;
       @extend .small;
       margin-left: 8px;
+      font-size: 12px;
     }
     .title {
       font-weight: bold;
@@ -13,7 +14,18 @@
       min-width: 40px;
     }
     .media-body {
-      padding: 0 10px 10px 10px;
+      padding: 0 10px 10px 0;
+      .reply-of {
+        font-size: 12px;
+        color: #B5B5B5;
+        margin-left: 5px;
+        i {
+          font-size: 10px;
+        }
+      }
+      h4 {
+        font-size: 16px;
+      }
     }
     noosfero-profile-image {
       img {
@@ -27,8 +39,24 @@
         font-size: 1.7em;
       }
     }
+    // Limit identation of replies
     .comments {
       margin-left: 30px;
+      .comments .comments {
+        margin-left: 0px;
+        .comment {
+          margin-left: 0px;
+        }
+      }
+    }
+    .tooltip-inner {
+      max-width: 350px;
+      text-align: left;
+      .reply-tooltip {
+        .comment {
+          margin: 5px;
+        }
+      }
     }
   }
 }
-import { Inject, Input, Output, Component, provide, EventEmitter } from 'ng-forward';
-import {INgForwardJQuery} from "ng-forward/cjs/util/jqlite-extensions";
-
-
+import { Inject, Input, Component, provide } from 'ng-forward';
 import { PostCommentComponent } from "./post-comment/post-comment.component";
 import { CommentService } from "../../../lib/ng-noosfero-api/http/comment.service";
 import { CommentComponent } from "./comment.component";
+import { PostCommentEventService } from "./post-comment/post-comment-event.service";
 @Component({
     selector: 'noosfero-comments',
     templateUrl: 'app/article/comment/comments.html',
-    directives: [PostCommentComponent, CommentComponent],
-    outputs: ['commentAdded']
+    directives: [PostCommentComponent, CommentComponent]
 })
-@Inject(CommentService, "$element")
+@Inject(CommentService, PostCommentEventService, "$scope")
 export class CommentsComponent {
-    comments: noosfero.CommentViewModel[] = [];
+    comments: noosfero.Comment[] = [];
     @Input() showForm = true;
     @Input() article: noosfero.Article;
-    @Input() parent: noosfero.CommentViewModel;
-
+    @Input() parent: noosfero.Comment;
     protected page = 1;
     protected perPage = 5;
     protected total = 0;
-    constructor(protected commentService: CommentService) { }
+    newComment = <noosfero.Comment>{};
+
+    constructor(protected commentService: CommentService, private postCommentEventService: PostCommentEventService, private $scope: ng.IScope) { }
     ngOnInit() {
         if (this.parent) {
@@ -32,20 +30,13 @@ export class CommentsComponent {
         } else {
             this.loadNextPage();
         }
-    }
-
-    commentAdded(comment: noosfero.Comment): void {
-        this.comments.push(comment);
-        this.resetShowReply();
-    }
-
-    private resetShowReply() {
-        this.comments.forEach((comment: noosfero.CommentViewModel) => {
-            comment.__show_reply = false;
+        this.postCommentEventService.subscribe((comment: noosfero.Comment) => {
+            if ((!this.parent && !comment.reply_of) || (comment.reply_of && this.parent && comment.reply_of.id === this.parent.id)) {
+                if (!this.comments) this.comments = [];
+                this.comments.push(comment);
+                this.$scope.$apply();
+            }
         });
-        if  (this.parent) {
-            this.parent.__show_reply = false;
-        }
     }
     loadComments() {
 <div class="comments">
-  <noosfero-post-comment (comment-saved)="ctrl.commentAdded($event.detail)" ng-if="ctrl.showForm" [article]="ctrl.article" [parent]="ctrl.parent"></noosfero-post-comment>
+  <noosfero-post-comment ng-if="ctrl.showForm" [article]="ctrl.article" [parent]="ctrl.parent" [comment]="ctrl.newComment"></noosfero-post-comment>
   <div class="comments-list">
     <noosfero-comment ng-repeat="comment in ctrl.comments | orderBy: 'created_at':true" [comment]="comment" [article]="ctrl.article"></noosfero-comment>
-import { Inject, Input, Output, EventEmitter, Component } from 'ng-forward';
+import { Inject, Input, Component } from 'ng-forward';
 import { CommentService } from "../../../../lib/ng-noosfero-api/http/comment.service";
 import { NotificationService } from "../../../shared/services/notification.service";
 import { SessionService } from "../../../login";
+import { PostCommentEventService } from "./post-comment-event.service";
+import { CommentFormHotspotComponent } from "../../../hotspot/comment-form-hotspot.component";
 @Component({
     selector: 'noosfero-post-comment',
     templateUrl: 'app/article/comment/post-comment/post-comment.html',
-    outputs: ['commentSaved']
+    directives: [CommentFormHotspotComponent]
 })
-@Inject(CommentService, NotificationService, SessionService)
+@Inject(CommentService, NotificationService, SessionService, PostCommentEventService)
 export class PostCommentComponent {
+    public static EVENT_COMMENT_RECEIVED = "comment.received";
+
     @Input() article: noosfero.Article;
     @Input() parent: noosfero.Comment;
-    @Output() commentSaved: EventEmitter<Comment> = new EventEmitter<Comment>();
-
-    comment = <noosfero.Comment>{};
+    @Input() comment = <noosfero.Comment>{};
     private currentUser: noosfero.User;
     constructor(private commentService: CommentService,
         private notificationService: NotificationService,
-        private session: SessionService) {
+        private session: SessionService,
+        private postCommentEventService: PostCommentEventService) {
         this.currentUser = this.session.currentUser();
     }
@@ -29,7 +32,7 @@ export class PostCommentComponent {
             this.comment.reply_of_id = this.parent.id;
         }
         this.commentService.createInArticle(this.article, this.comment).then((result: noosfero.RestResult<noosfero.Comment>) => {
-            this.commentSaved.next(result.data);
+            this.postCommentEventService.emit(result.data);
             this.comment.body = "";
             this.notificationService.success({ title: "comment.post.success.title", message: "comment.post.success.message" });
         });
@@ -8,6 +8,7 @@
       </div>
       <div class="media-body">
         <textarea class="form-control custom-control" rows="1" ng-model="ctrl.comment.body" placeholder="{{'comment.post.placeholder' | translate}}"></textarea>
+        <noosfero-hotspot-comment-form [comment]="ctrl.comment" [parent]="ctrl.parent"></noosfero-hotspot-comment-form>
         <button ng-show="ctrl.comment.body" type="submit" class="btn btn-default pull-right ng-hide" ng-click="ctrl.save()">{{"comment.post" | translate}}</button>
       </div>
     </div>
@@ -0,0 +1,25 @@
+import {Input, provide, Component} from 'ng-forward';
+import {MacroDirective} from "./macro.directive";
+
+import * as helpers from "../../../spec/helpers";
+
+const htmlTemplate: string = '<div data-macro="macro_component" data-macro-custom="custom"></div>';
+
+describe("Directives", () => {
+
+    describe("Macro directive", () => {
+        it("renders a macro component using the name passed in data-macro", (done: Function) => {
+            helpers.quickCreateComponent({ template: htmlTemplate, directives: [MacroDirective] }).then((fixture) => {
+                expect(fixture.debugElement.queryAll('macro-component').length).toEqual(1);
+                done();
+            });
+        });
+
+        it("extract custom attributes from macro", (done: Function) => {
+            helpers.quickCreateComponent({ template: htmlTemplate, directives: [MacroDirective] }).then((fixture) => {
+                expect(fixture.debugElement.query('macro-component').attr("custom")).toEqual("custom");
+                done();
+            });
+        });
+    });
+});
@@ -0,0 +1,34 @@
+import {Directive, Inject} from "ng-forward";
+
+@Directive({
+    selector: '[macro]',
+    providers: []
+})
+@Inject('$element', '$scope', '$compile')
+export class MacroDirective {
+
+    private macroPrefix = "data-macro";
+
+    constructor(private $element: any, private $scope: ng.IScope, private $compile: ng.ICompileService) {
+        let macro = $element[0].attributes[this.macroPrefix].value;
+        let componentName = this.normalizeName(macro);
+        let content = $element.html().replace(/"/g, '&quot;');
+        let customAttributes = this.extractCustomAttributes($element[0].attributes);
+        $element.replaceWith($compile(`<${componentName} [article]="ctrl.article" content="${content}" ${customAttributes}></${componentName}>`)($scope));
+    }
+
+    extractCustomAttributes(attributes: any) {
+        let customAttributes = "";
+        for (let attr of attributes) {
+            if (attr.name.startsWith(this.macroPrefix + '-')) {
+                let name = this.normalizeName(attr.name.replace(this.macroPrefix + '-', ''));
+                customAttributes += ` ${name}='${attr.value}'`;
+            }
+        }
+        return customAttributes;
+    }
+
+    normalizeName(name: string) {
+        return name.replace(/[_\/]/g, '-').toLowerCase();
+    }
+}
@@ -0,0 +1,25 @@
+import {Component, Input, Inject} from "ng-forward";
+import * as plugins from "../../plugins";
+import {dasherize} from "ng-forward/cjs/util/helpers";
+import {PluginHotspot} from "./plugin-hotspot";
+
+@Component({
+    selector: "noosfero-hotspot-article-toolbar",
+    template: "<span></span>"
+})
+@Inject("$element", "$scope", "$compile")
+export class ArticleToolbarHotspotComponent extends PluginHotspot {
+
+    @Input() article: noosfero.Article;
+
+    constructor(
+        private $element: any,
+        private $scope: ng.IScope,
+        private $compile: ng.ICompileService) {
+        super("article_extra_toolbar_buttons");
+    }
+
+    addHotspot(directiveName: string) {
+        this.$element.append(this.$compile('<' + directiveName + ' [article]="ctrl.article"></' + directiveName + '>')(this.$scope));
+    }
+}
@@ -0,0 +1,26 @@
+import {Component, Input, Inject} from "ng-forward";
+import * as plugins from "../../plugins";
+import {dasherize} from "ng-forward/cjs/util/helpers";
+import {PluginHotspot} from "./plugin-hotspot";
+
+@Component({
+    selector: "noosfero-hotspot-comment-form",
+    template: "<span></span>"
+})
+@Inject("$element", "$scope", "$compile")
+export class CommentFormHotspotComponent extends PluginHotspot {
+
+    @Input() comment: noosfero.Comment;
+    @Input() parent: noosfero.Comment;
+
+    constructor(
+        private $element: any,
+        private $scope: ng.IScope,
+        private $compile: ng.ICompileService) {
+        super("comment_form_extra_contents");
+    }
+
+    addHotspot(directiveName: string) {
+        this.$element.append(this.$compile('<' + directiveName + ' [comment]="ctrl.comment" [parent]="ctrl.parent"></' + directiveName + '>')(this.$scope));
+    }
+}
@@ -0,0 +1,5 @@
+export function Hotspot(hotspotName: string) {
+    return (target: any) => {
+        target['hotspot'] = hotspotName;
+    };
+}
@@ -0,0 +1,19 @@
+import {Component, Input, Inject} from "ng-forward";
+import * as plugins from "../../plugins";
+import {dasherize} from "ng-forward/cjs/util/helpers";
+
+export abstract class PluginHotspot {
+
+    constructor(protected hotspot: string) { }
+
+    ngOnInit() {
+        for (let component of plugins.hotspots) {
+            if (component.hotspot === this.hotspot) {
+                let directiveName = dasherize(component.name.replace('Component', ''));
+                this.addHotspot(directiveName);
+            }
+        }
+    }
+
+    abstract addHotspot(directiveName: string): any;
+}
@@ -15,9 +15,10 @@ declare var moment: any;
 let noosferoApp: any = bundle("noosferoApp", MainComponent, ["ngAnimate", "ngCookies", "ngStorage", "ngTouch",
     "ngSanitize", "ngMessages", "ngAria", "restangular",
     "ui.router", "ui.bootstrap", "toastr", "ngCkeditor",
-    "angularMoment", "angular.filter", "akoenig.deckgrid",
+    "angular-bind-html-compile","angularMoment", "angular.filter", "akoenig.deckgrid",
     "angular-timeline", "duScroll", "oitozero.ngSweetAlert",
-    "pascalprecht.translate", "tmh.dynamicLocale", "angularLoad"]).publish();
+    "pascalprecht.translate", "tmh.dynamicLocale", "angularLoad",
+    "angular-click-outside"]).publish();
 NoosferoApp.angularModule = noosferoApp;
+import * as plugins from "../../plugins";
 import {bundle, Component, StateConfig, Inject} from "ng-forward";
 import {ArticleBlogComponent} from "./../article/types/blog/blog.component";
@@ -93,7 +94,7 @@ export class EnvironmentContent {
         LinkListBlockComponent, CommunitiesBlockComponent, HtmlEditorComponent,
         MainBlockComponent, RecentDocumentsBlockComponent, Navbar, SidebarComponent, ProfileImageBlockComponent,
         MembersBlockComponent, NoosferoTemplate, DateFormat, RawHTMLBlockComponent
-    ],
+    ].concat(plugins.mainComponents).concat(plugins.hotspots),
     providers: [AuthService, SessionService, NotificationService, BodyStateClassesService]
 })
 @StateConfig([
@@ -207,4 +207,27 @@ describe(&quot;Restangular Service - base Class&quot;, () =&gt; {
         $httpBackend.flush();
     });
-});
 \ No newline at end of file
+    it("post('customPath', rootObject) calls POST /rootObjects/1/customPath", (done) => {
+        let rootObj: RootObjectModel = rootObjectRestService.getElement(1);
+        $httpBackend.expectPOST("/api/v1/rootObjects/1/customPath").respond(201, { object: { attr: 1, rootId: 1 } });
+        objectRestService.post('customPath', rootObj).then((result: noosfero.RestResult<ObjectModel>) => {
+            expect(result.data).toBeDefined();
+            expect((<any>result.data).attr).toEqual(1);
+            expect((<any>result.data).rootId).toEqual(1);
+            done();
+        });
+        $httpBackend.flush();
+    });
+
+    it("post('customPath') calls POST /objects/customPath", (done) => {
+        $httpBackend.expectPOST("/api/v1/objects/customPath").respond(201, { object: { attr: 1, rootId: 1 } });
+        objectRestService.post('customPath').then((result: noosfero.RestResult<ObjectModel>) => {
+            expect(result.data).toBeDefined();
+            expect((<any>result.data).attr).toEqual(1);
+            expect((<any>result.data).rootId).toEqual(1);
+            done();
+        });
+        $httpBackend.flush();
+    });
+
+});
@@ -261,6 +261,22 @@ export abstract class RestangularService&lt;T extends noosfero.RestModel&gt; {
         return deferred.promise;
     }
+
+    public post(path: string, rootElement?: restangular.IElement, data?: any, headers?: any): ng.IPromise<noosfero.RestResult<T>> {
+        let deferred = this.$q.defer<noosfero.RestResult<T>>();
+        let restRequest: ng.IPromise<any>;
+
+        if (rootElement) {
+            restRequest = rootElement.customPOST(data, path, headers);
+        } else {
+            restRequest = this.baseResource.customPOST(data, path, headers);
+        }
+        restRequest
+            .then(this.getHandleSuccessFunction(deferred))
+            .catch(this.getHandleErrorFunction(deferred));
+        return deferred.promise;
+    }
+
     /**
      * Returns a Restangular IElement representing the 
      */
 namespace noosfero {
-    export interface Article extends RestModel {
+    export interface Article  extends RestModel {
         path: string;
         profile: Profile;
         type: string;
-        parent: Article;
+		parent: Article;
         body: string;
         title: string;
         name: string;
         published: boolean;
+        setting: any;
     }
 -}
+}
 \ No newline at end of file
@@ -0,0 +1,78 @@
+import {AllowCommentComponent} from "./allow-comment.component";
+import {ComponentTestHelper, createClass} from '../../../spec/component-test-helper';
+import * as helpers from "../../../spec/helpers";
+import {Provider} from 'ng-forward';
+import {ComponentFixture} from 'ng-forward/cjs/testing/test-component-builder';
+
+let htmlTemplate = '<comment-paragraph-plugin-allow-comment [content]="ctrl.content" [paragraph-uuid]="ctrl.paragraphUuid" [article]="ctrl.article"></comment-paragraph-plugin-allow-comment>';
+
+describe("Components", () => {
+    describe("Allow Comment Component", () => {
+
+        let serviceMock = {
+            commentParagraphCount: () => {
+                return Promise.resolve(5);
+            }
+        };
+        let functionToggleCommentParagraph: Function;
+        let eventServiceMock = {
+            // toggleCommentParagraph
+            subscribeToggleCommentParagraph: (fn: Function) => {
+                functionToggleCommentParagraph = fn;
+            }
+        };
+
+        let providers = [
+            new Provider('CommentParagraphService', { useValue: serviceMock }),
+            new Provider('CommentParagraphEventService', { useValue: eventServiceMock })
+        ];
+        let helper: ComponentTestHelper;
+
+        beforeEach(angular.mock.module("templates"));
+
+        beforeEach((done) => {
+            let cls = createClass({
+                template: htmlTemplate,
+                directives: [AllowCommentComponent],
+                providers: providers,
+                properties: {
+                    content: "",
+                    paragraphUuid: "uuid",
+                    article: {
+                        setting: {
+                            comment_paragraph_plugin_activate: true
+                        }
+                    }
+                }
+            });
+            helper = new ComponentTestHelper(cls, done);
+        });
+
+        it('update comments count', () => {
+            expect(helper.component.commentsCount).toEqual(5);
+        });
+
+        it('display paragraph content', () => {
+            expect(helper.all(".paragraph .paragraph-content").length).toEqual(1);
+        });
+
+        it('display button to side comments', () => {
+            expect(helper.all(".paragraph .actions a").length).toEqual(1);
+        });
+
+        it('set display to true when click in show paragraph', () => {
+            helper.component.showParagraphComments();
+            expect(helper.component.display).toBeTruthy();
+        });
+
+        it('set display to false when click in hide paragraph', () => {
+            helper.component.hideParagraphComments();
+            expect(helper.component.display).toBeFalsy();
+        });
+
+        it('update article when receive a toogle paragraph event', () => {
+            functionToggleCommentParagraph({ id: 2 });
+            expect(helper.component.article.id).toEqual(2);
+        });
+    });
+});
@@ -0,0 +1,45 @@
+import {Component, Input, Inject} from "ng-forward";
+import {SideCommentsComponent} from "../side-comments/side-comments.component";
+import {CommentParagraphEventService} from "../events/comment-paragraph-event.service";
+import {CommentParagraphService} from "../http/comment-paragraph.service";
+
+@Component({
+    selector: "comment-paragraph-plugin-allow-comment",
+    templateUrl: "plugins/comment_paragraph/allow-comment/allow-comment.html",
+    directives: [SideCommentsComponent]
+})
+@Inject("$scope", CommentParagraphEventService, CommentParagraphService)
+export class AllowCommentComponent {
+
+    @Input() content: string;
+    @Input() paragraphUuid: string;
+    @Input() article: noosfero.Article;
+    commentsCount: number;
+    display = false;
+
+    constructor(private $scope: ng.IScope,
+        private commentParagraphEventService: CommentParagraphEventService,
+        private commentParagraphService: CommentParagraphService) { }
+
+    ngOnInit() {
+        this.commentParagraphEventService.subscribeToggleCommentParagraph((article: noosfero.Article) => {
+            this.article = article;
+            this.$scope.$apply();
+        });
+        this.commentParagraphService.commentParagraphCount(this.article, this.paragraphUuid).then((count: number) => {
+            this.commentsCount = count;
+        });
+    }
+
+    isActivated() {
+        return this.article && this.article.setting && this.article.setting.comment_paragraph_plugin_activate;
+    }
+
+    showParagraphComments() {
+        this.display = true;
+    }
+
+    hideParagraphComments() {
+        this.display = false;
+    }
+}
@@ -0,0 +1,12 @@
+<div class="paragraph" ng-class="{'active' : ctrl.display}">
+  <div class="paragraph-content" ng-bind-html="ctrl.content" ng-class="{'active' : ctrl.display}"></div>
+  <div ng-if="ctrl.isActivated()" class="actions">
+    <a href="#" popover-placement="right-top" popover-trigger="none"
+      uib-popover-template="'plugins/comment_paragraph/allow-comment/popover.html'"
+      (click)="ctrl.showParagraphComments()" popover-is-open="ctrl.display">
+      <div class="arrow_box" ng-class="{'active' : ctrl.display}">
+        <span class="count">{{ctrl.commentsCount > 0 ? ctrl.commentsCount : '+'}}</span>
+      </div>
+    </a>
+  </div>
+</div>
@@ -0,0 +1,62 @@
+$balloon-selected-color: #50BF68;
+$balloon-color: #c4c4c4;
+
+comment-paragraph-plugin-allow-comment {
+  .paragraph {
+    width: 100%;
+    &.active {
+      width: 80%;
+    }
+    .popover {
+      &.right > .arrow {
+      }
+    }
+    .paragraph-content {
+      width: 95%;
+      display: inline-block;
+    }
+    .actions {
+      width: 3%;
+      display: inline-block;
+      vertical-align: top;
+      margin-left: 10px;
+      .popover {
+        width: 100%;
+        max-width: 330px;
+      }
+      .count {
+        font-size: 14px;
+        font-weight: bold;
+        color: white;
+        text-align: center;
+        width: 100%;
+        display: inline-block;
+      }
+      .arrow_box {
+        position: relative;
+        background: $balloon-color;
+        margin-top: 5px;
+        width: 25px;
+        border-radius: 2px;
+        &:after {
+          top: 100%;
+          left: 50%;
+          border: solid transparent;
+          content: " ";
+          position: absolute;
+          pointer-events: none;
+          border-color: rgba(196, 196, 196, 0);
+          border-top-color: $balloon-color;
+          border-width: 6px;
+          margin-left: -6px;
+        }
+        &:hover, &.active {
+          background: $balloon-selected-color;
+          &:after {
+            border-top-color: $balloon-selected-color;
+          }
+        }
+      }
+    }
+  }
+}
@@ -0,0 +1 @@
+<comment-paragraph-side-comments id="side-comments-{{ctrl.paragraphUuid}}" click-outside="ctrl.hideParagraphComments()" [article]="ctrl.article" [paragraph-uuid]="ctrl.paragraphUuid"></comment-paragraph-side-comments>
@@ -0,0 +1,28 @@
+import {CommentParagraphEventService} from "./comment-paragraph-event.service";
+import {ComponentTestHelper, createClass} from '../../../spec/component-test-helper';
+import * as helpers from "../../../spec/helpers";
+import {Provider} from 'ng-forward';
+import {ComponentFixture} from 'ng-forward/cjs/testing/test-component-builder';
+
+describe("Services", () => {
+    describe("Comment Paragraph Event Service", () => {
+        let eventService: CommentParagraphEventService;
+
+        beforeEach(() => {
+            eventService = new CommentParagraphEventService();
+            eventService['toggleCommentParagraphEmitter'] = jasmine.createSpyObj("toggleCommentParagraphEmitter", ["next", "subscribe"]);
+        });
+
+        it('subscribe to toggle comment paragraph event', () => {
+            eventService['toggleCommentParagraphEmitter'].subscribe = jasmine.createSpy("subscribe");
+            eventService.subscribeToggleCommentParagraph(() => { });
+            expect(eventService['toggleCommentParagraphEmitter'].subscribe).toHaveBeenCalled();
+        });
+
+        it('emit event when toggle comment paragraph', () => {
+            eventService['toggleCommentParagraphEmitter'].subscribe = jasmine.createSpy("next");
+            eventService.toggleCommentParagraph(<noosfero.Article>{});
+            expect(eventService['toggleCommentParagraphEmitter'].next).toHaveBeenCalled();
+        });
+    });
+});
@@ -0,0 +1,19 @@
+import {Injectable, EventEmitter} from "ng-forward";
+
+@Injectable()
+export class CommentParagraphEventService {
+
+    private toggleCommentParagraphEmitter: EventEmitter<noosfero.Article>;
+
+    constructor() {
+        this.toggleCommentParagraphEmitter = new EventEmitter();
+    }
+
+    toggleCommentParagraph(article: noosfero.Article) {
+        this.toggleCommentParagraphEmitter.next(article);
+    }
+
+    subscribeToggleCommentParagraph(fn: (article: noosfero.Article) => void) {
+        this.toggleCommentParagraphEmitter.subscribe(fn);
+    }
+}
@@ -0,0 +1,85 @@
+import {CommentParagraphArticleButtonHotspotComponent} from "./comment-paragraph-article-button.component";
+import {ComponentTestHelper, createClass} from '../../../spec/component-test-helper';
+import * as helpers from "../../../spec/helpers";
+import {Provider} from 'ng-forward';
+import {ComponentFixture} from 'ng-forward/cjs/testing/test-component-builder';
+
+let htmlTemplate = '<comment-paragraph-article-button-hotspot [article]="ctrl.article"></comment-paragraph-article-button-hotspot>';
+
+describe("Components", () => {
+    describe("Comment Paragraph Article Button Hotspot Component", () => {
+
+        let serviceMock = jasmine.createSpyObj("CommentParagraphService", ["deactivateCommentParagraph", "activateCommentParagraph"]);
+        let eventServiceMock = jasmine.createSpyObj("CommentParagraphEventService", ["toggleCommentParagraph"]);
+
+        let providers = [
+            new Provider('CommentParagraphService', { useValue: serviceMock }),
+            new Provider('CommentParagraphEventService', { useValue: eventServiceMock })
+        ].concat(helpers.provideFilters('translateFilter'));
+        let helper: ComponentTestHelper;
+
+        beforeEach(angular.mock.module("templates"));
+
+        beforeEach((done) => {
+            let cls = createClass({
+                template: htmlTemplate,
+                directives: [CommentParagraphArticleButtonHotspotComponent],
+                providers: providers,
+                properties: {
+                    article: {}
+                }
+            });
+            helper = new ComponentTestHelper(cls, done);
+        });
+
+        it('emit event when deactivate comment paragraph in an article', () => {
+            serviceMock.deactivateCommentParagraph = jasmine.createSpy("deactivateCommentParagraph").and.returnValue(
+                { then: (fn: Function) => { fn({ data: {} }); } }
+            );
+            eventServiceMock.toggleCommentParagraph = jasmine.createSpy("toggleCommentParagraph");
+            helper.component.deactivateCommentParagraph();
+
+            expect(serviceMock.deactivateCommentParagraph).toHaveBeenCalled();
+            expect(eventServiceMock.toggleCommentParagraph).toHaveBeenCalled();
+        });
+
+        it('emit event when activate comment paragraph in an article', () => {
+            serviceMock.activateCommentParagraph = jasmine.createSpy("activateCommentParagraph").and.returnValue(
+                { then: (fn: Function) => { fn({ data: {} }); } }
+            );
+            eventServiceMock.toggleCommentParagraph = jasmine.createSpy("toggleCommentParagraph");
+            helper.component.activateCommentParagraph();
+
+            expect(serviceMock.activateCommentParagraph).toHaveBeenCalled();
+            expect(eventServiceMock.toggleCommentParagraph).toHaveBeenCalled();
+        });
+
+        it('return true when comment paragraph is active', () => {
+            helper.component.article = { setting: { comment_paragraph_plugin_activate: true } };
+            helper.detectChanges();
+            expect(helper.component.isActivated()).toBeTruthy();
+        });
+
+        it('return false when comment paragraph is not active', () => {
+            expect(helper.component.isActivated()).toBeFalsy();
+        });
+
+        it('return false when article has no setting attribute', () => {
+            helper.component.article = {};
+            helper.detectChanges();
+            expect(helper.component.isActivated()).toBeFalsy();
+        });
+
+        it('display activate button when comment paragraph is not active', () => {
+            expect(helper.all('.comment-paragraph-activate').length).toEqual(1);
+            expect(helper.all('.comment-paragraph-deactivate').length).toEqual(0);
+        });
+
+        it('display deactivate button when comment paragraph is active', () => {
+            helper.component.article = { setting: { comment_paragraph_plugin_activate: true } };
+            helper.detectChanges();
+            expect(helper.all('.comment-paragraph-deactivate').length).toEqual(1);
+            expect(helper.all('.comment-paragraph-activate').length).toEqual(0);
+        });
+    });
+});
@@ -0,0 +1,38 @@
+import { Input, Inject, Component } from "ng-forward";
+import {Hotspot} from "../../../app/hotspot/hotspot.decorator";
+import {CommentParagraphService} from "../http/comment-paragraph.service";
+import {CommentParagraphEventService} from "../events/comment-paragraph-event.service";
+
+@Component({
+    selector: "comment-paragraph-article-button-hotspot",
+    templateUrl: "plugins/comment_paragraph/hotspot/comment-paragraph-article-button.html",
+})
+@Inject("$scope", CommentParagraphService, CommentParagraphEventService)
+@Hotspot("article_extra_toolbar_buttons")
+export class CommentParagraphArticleButtonHotspotComponent {
+
+    @Input() article: noosfero.Article;
+
+    constructor(private $scope: ng.IScope,
+        private commentParagraphService: CommentParagraphService,
+        private commentParagraphEventService: CommentParagraphEventService) { }
+
+    deactivateCommentParagraph() {
+        this.toggleCommentParagraph(this.commentParagraphService.deactivateCommentParagraph(this.article));
+    }
+
+    activateCommentParagraph() {
+        this.toggleCommentParagraph(this.commentParagraphService.activateCommentParagraph(this.article));
+    }
+
+    isActivated() {
+        return this.article && this.article.setting && this.article.setting.comment_paragraph_plugin_activate;
+    }
+
+    private toggleCommentParagraph(promise: ng.IPromise<noosfero.RestResult<noosfero.Article>>) {
+        promise.then((result: noosfero.RestResult<noosfero.Article>) => {
+            this.article = result.data;
+            this.commentParagraphEventService.toggleCommentParagraph(this.article);
+        });
+    }
+}
@@ -0,0 +1,8 @@
+<a href='#' class="btn btn-default btn-xs comment-paragraph-activate" (click)="ctrl.activateCommentParagraph()"
+  ng-if="!ctrl.article.setting.comment_paragraph_plugin_activate">
+  <i class="fa fa-fw fa-plus"></i> {{"comment-paragraph-plugin.title" | translate}}
+</a>
+<a href='#' class="btn btn-default btn-xs comment-paragraph-deactivate" (click)="ctrl.deactivateCommentParagraph()"
+  ng-if="ctrl.article.setting.comment_paragraph_plugin_activate">
+  <i class="fa fa-fw fa-minus"></i> {{"comment-paragraph-plugin.title" | translate}}
+</a>
@@ -0,0 +1,26 @@
+import { Inject, Input, Component } from "ng-forward";
+import {Hotspot} from "../../../app/hotspot/hotspot.decorator";
+
+@Component({
+    selector: "comment-paragraph-form-hotspot",
+    template: "<span></span>",
+})
+@Hotspot("comment_form_extra_contents")
+@Inject("$scope")
+export class CommentParagraphFormHotspotComponent {
+
+    @Input() comment: noosfero.Comment;
+    @Input() parent: noosfero.Comment;
+
+    constructor(private $scope: ng.IScope) { }
+
+    ngOnInit() {
+        this.$scope.$watch(() => {
+            return this.parent;
+        }, () => {
+            if (this.parent && (<any>this.parent).paragraph_uuid) {
+                (<any>this.comment).paragraph_uuid = (<any>this.parent).paragraph_uuid;
+            }
+        });
+    }
+}
@@ -0,0 +1,33 @@
+import {CommentParagraphFormHotspotComponent} from "./comment-paragraph-form.component";
+import {ComponentTestHelper, createClass} from '../../../spec/component-test-helper';
+import * as helpers from "../../../spec/helpers";
+import {ComponentFixture} from 'ng-forward/cjs/testing/test-component-builder';
+
+let htmlTemplate = '<comment-paragraph-form-hotspot [comment]="ctrl.comment" [parent]="ctrl.parent"></comment-paragraph-form-hotspot>';
+
+describe("Components", () => {
+    describe("Comment Paragraph Form Hotspot Component", () => {
+
+        let helper: ComponentTestHelper;
+
+        beforeEach(angular.mock.module("templates"));
+
+        beforeEach((done) => {
+            let cls = createClass({
+                template: htmlTemplate,
+                directives: [CommentParagraphFormHotspotComponent],
+                providers: [],
+                properties: {
+                    comment: {}
+                }
+            });
+            helper = new ComponentTestHelper(cls, done);
+        });
+
+        it('set paragraph uuid when parent has it setted', () => {
+            helper.component.parent = { paragraph_uuid: 'uuid' };
+            helper.detectChanges();
+            expect((<any>helper.component.comment).paragraph_uuid).toEqual('uuid');
+        });
+    });
+});
@@ -0,0 +1,90 @@
+import {CommentParagraphService} from "./comment-paragraph.service";
+
+
+describe("Services", () => {
+
+    describe("Comment Paragraph Service", () => {
+
+        let $httpBackend: ng.IHttpBackendService;
+        let commentParagraphService: CommentParagraphService;
+
+        beforeEach(angular.mock.module("noosferoApp", ($translateProvider: angular.translate.ITranslateProvider) => {
+            $translateProvider.translations('en', {});
+        }));
+
+        beforeEach(inject((_$httpBackend_: ng.IHttpBackendService, _CommentParagraphService_: CommentParagraphService) => {
+            $httpBackend = _$httpBackend_;
+            commentParagraphService = _CommentParagraphService_;
+        }));
+
+
+        describe("Succesfull requests", () => {
+
+            it("should return paragraph comments by article", (done) => {
+                let articleId = 1;
+                $httpBackend.expectGET(`/api/v1/articles/${articleId}/comment_paragraph_plugin/comments?without_reply=true`).respond(200, { comments: [{ body: "comment1" }] });
+                commentParagraphService.getByArticle(<noosfero.Article>{ id: articleId }).then((result: noosfero.RestResult<noosfero.Comment[]>) => {
+                    expect(result.data).toEqual([{ body: "comment1" }]);
+                    done();
+                });
+                $httpBackend.flush();
+            });
+
+            it("should create a paragraph comment", (done) => {
+                let articleId = 1;
+                $httpBackend.expectPOST(`/api/v1/articles/${articleId}/comment_paragraph_plugin/comments`).respond(200, { comment: { body: "comment1" } });
+                commentParagraphService.createInArticle(<noosfero.Article>{ id: articleId }, <noosfero.Comment>{ body: "comment1" }).then((result: noosfero.RestResult<noosfero.Comment>) => {
+                    expect(result.data).toEqual({ body: "comment1" });
+                    done();
+                });
+                $httpBackend.flush();
+            });
+
+            it("activate paragraph comments for an article", (done) => {
+                let articleId = 1;
+                $httpBackend.expectPOST(`/api/v1/articles/${articleId}/comment_paragraph_plugin/activate`).respond(200, { article: { title: "article1" } });
+                commentParagraphService.activateCommentParagraph(<noosfero.Article>{ id: articleId }).then((result: noosfero.RestResult<noosfero.Article>) => {
+                    expect(result.data).toEqual({ title: "article1" });
+                    done();
+                });
+                $httpBackend.flush();
+            });
+
+            it("deactivate paragraph comments for an article", (done) => {
+                let articleId = 1;
+                $httpBackend.expectPOST(`/api/v1/articles/${articleId}/comment_paragraph_plugin/deactivate`).respond(200, { article: { title: "article1" } });
+                commentParagraphService.deactivateCommentParagraph(<noosfero.Article>{ id: articleId }).then((result: noosfero.RestResult<noosfero.Article>) => {
+                    expect(result.data).toEqual({ title: "article1" });
+                    done();
+                });
+                $httpBackend.flush();
+            });
+
+            it("return counts for paragraph comments", (done) => {
+                let articleId = 1;
+                $httpBackend.expectGET(`/api/v1/articles/${articleId}/comment_paragraph_plugin/comments/count`).respond(200, { '1': 5, '2': 6 });
+                commentParagraphService.commentParagraphCount(<noosfero.Article>{ id: articleId }, '1').then((count: number) => {
+                    expect(count).toEqual(5);
+                    done();
+                });
+                $httpBackend.flush();
+            });
+
+            it("reset promise when comment paragraph counts fails", (done) => {
+                let articleId = 1;
+                commentParagraphService['articleService'] = jasmine.createSpyObj("articleService", ["getElement"]);
+                commentParagraphService['articleService'].getElement = jasmine.createSpy("getElement").and.returnValue(
+                    {
+                        customGET: (path: string) => {
+                            return Promise.reject({});
+                        }
+                    }
+                );
+                commentParagraphService.commentParagraphCount(<noosfero.Article>{ id: articleId }, '1').catch(() => {
+                    expect(commentParagraphService['commentParagraphCountsPromise']).toBeNull();
+                    done();
+                });
+            });
+        });
+    });
+});
@@ -0,0 +1,64 @@
+import { Injectable, Inject } from "ng-forward";
+import {RestangularService} from "../../../lib/ng-noosfero-api/http/restangular_service";
+import {ArticleService} from "../../../lib/ng-noosfero-api/http/article.service";
+
+@Injectable()
+@Inject("Restangular", "$q", "$log", ArticleService)
+export class CommentParagraphService extends RestangularService<noosfero.Comment> {
+
+    private commentParagraphCountsPromise: ng.IPromise<any>;
+
+    constructor(Restangular: restangular.IService, $q: ng.IQService, $log: ng.ILogService, protected articleService: ArticleService) {
+        super(Restangular, $q, $log);
+    }
+
+    getResourcePath() {
+        return "comment_paragraph_plugin/comments";
+    }
+
+    getDataKeys() {
+        return {
+            singular: 'comment',
+            plural: 'comments'
+        };
+    }
+
+    getByArticle(article: noosfero.Article, params: any = {}): ng.IPromise<noosfero.RestResult<noosfero.Comment[]>> {
+        params['without_reply'] = true;
+        let articleElement = this.articleService.getElement(<number>article.id);
+        return this.list(articleElement, params);
+    }
+
+    createInArticle(article: noosfero.Article, comment: noosfero.Comment): ng.IPromise<noosfero.RestResult<noosfero.Comment>> {
+        let articleElement = this.articleService.getElement(<number>article.id);
+        return this.create(comment, articleElement, null, { 'Content-Type': 'application/json' }, false);
+    }
+
+    activateCommentParagraph(article: noosfero.Article) {
+        let articleElement = this.articleService.getElement(<number>article.id);
+        return this.articleService.post("comment_paragraph_plugin/activate", articleElement);
+    }
+
+    deactivateCommentParagraph(article: noosfero.Article) {
+        let articleElement = this.articleService.getElement(<number>article.id);
+        return this.articleService.post("comment_paragraph_plugin/deactivate", articleElement);
+    }
+
+    commentParagraphCount(article: noosfero.Article, paragraphUuid: string) {
+        return this.commentParagraphCounts(article).then((counts: any) => {
+            return counts[paragraphUuid];
+        });
+    }
+
+    private commentParagraphCounts(article: noosfero.Article) {
+        if (!this.commentParagraphCountsPromise) {
+            let articleElement = this.articleService.getElement(<number>article.id);
+            this.commentParagraphCountsPromise = articleElement.customGET("comment_paragraph_plugin/comments/count").then((response: restangular.IResponse) => {
+                return response.data;
+            }).catch(() => {
+                this.commentParagraphCountsPromise = null;
+            });
+        }
+        return this.commentParagraphCountsPromise;
+    }
+}
@@ -0,0 +1,6 @@
+import {AllowCommentComponent} from "./allow-comment/allow-comment.component";
+import {CommentParagraphArticleButtonHotspotComponent} from "./hotspot/comment-paragraph-article-button.component";
+import {CommentParagraphFormHotspotComponent} from "./hotspot/comment-paragraph-form.component";
+
+export let mainComponents: any = [AllowCommentComponent];
+export let hotspots: any = [CommentParagraphArticleButtonHotspotComponent, CommentParagraphFormHotspotComponent];
@@ -0,0 +1,3 @@
+{
+  "comment-paragraph-plugin.title": "Paragraph Comments"
+}
@@ -0,0 +1,3 @@
+{
+  "comment-paragraph-plugin.title": "Comentários por Parágrafo"
+}
@@ -0,0 +1,50 @@
+import {SideCommentsComponent} from "./side-comments.component";
+import {ComponentTestHelper, createClass} from '../../../spec/component-test-helper';
+import * as helpers from "../../../spec/helpers";
+import {Provider} from 'ng-forward';
+import {ComponentFixture} from 'ng-forward/cjs/testing/test-component-builder';
+
+let htmlTemplate = '<comment-paragraph-side-comments [article]="ctrl.article" [paragraph-uuid]="ctrl.paragraphUuid"></comment-paragraph-side-comments>';
+
+describe("Components", () => {
+    describe("Side Comments Component", () => {
+
+        let serviceMock = jasmine.createSpyObj("CommentParagraphService", ["getByArticle"]);
+        serviceMock.getByArticle = jasmine.createSpy("getByArticle").and.returnValue(Promise.resolve({ data: {} }));
+
+        let commentServiceMock = {};
+        let postCommentEventService = jasmine.createSpyObj("postCommentEventService", ["emit", "subscribe"]);
+        postCommentEventService.subscribe = jasmine.createSpy("subscribe");
+
+        let providers = [
+            new Provider('CommentParagraphService', { useValue: serviceMock }),
+            new Provider('CommentService', { useValue: commentServiceMock }),
+            new Provider('PostCommentEventService', { useValue: postCommentEventService })
+        ];
+        let helper: ComponentTestHelper;
+
+        beforeEach(angular.mock.module("templates"));
+
+        beforeEach((done) => {
+            let cls = createClass({
+                template: htmlTemplate,
+                directives: [SideCommentsComponent],
+                providers: providers,
+                properties: {
+                    paragraphUuid: "uuid",
+                    article: {}
+                }
+            });
+            helper = new ComponentTestHelper(cls, done);
+        });
+
+        it('call service to load paragraph comments', () => {
+            helper.component.loadComments();
+            expect(serviceMock.getByArticle).toHaveBeenCalled();
+        });
+
+        it('set paragraph uuid in new comment object', () => {
+            expect(helper.component.newComment['paragraph_uuid']).toEqual('uuid');
+        });
+    });
+});
@@ -0,0 +1,32 @@
+import {Component, Inject, Input, Output} from "ng-forward";
+import {CommentsComponent} from "../../../app/article/comment/comments.component";
+import {CommentService} from "../../../lib/ng-noosfero-api/http/comment.service";
+import {CommentParagraphService} from "../http/comment-paragraph.service";
+import { PostCommentEventService } from "../../../app/article/comment/post-comment/post-comment-event.service";
+
+@Component({
+    selector: "comment-paragraph-side-comments",
+    templateUrl: 'app/article/comment/comments.html',
+})
+@Inject(CommentService, PostCommentEventService, "$scope", CommentParagraphService)
+export class SideCommentsComponent extends CommentsComponent {
+
+    @Input() article: noosfero.Article;
+    @Input() paragraphUuid: string;
+
+    constructor(commentService: CommentService,
+        postCommentEventService: PostCommentEventService,
+        $scope: ng.IScope,
+        private commentParagraphService: CommentParagraphService) {
+        super(commentService, postCommentEventService, $scope);
+    }
+
+    ngOnInit() {
+        super.ngOnInit();
+        (<any>this.newComment).paragraph_uuid = this.paragraphUuid;
+    }
+
+    loadComments() {
+        return this.commentParagraphService.getByArticle(this.article, { page: this.page, per_page: this.perPage, paragraph_uuid: this.paragraphUuid });
+    }
+}
@@ -0,0 +1,13 @@
+comment-paragraph-side-comments {
+  .comments {
+    .comment {
+      margin: 0;
+      &.media {
+        border-top: 0;  
+      }
+      .comments {
+        margin-left: 0;
+      }
+    }
+  }
+}
@@ -0,0 +1,7 @@
+import * as commentParagraph from "./comment_paragraph";
+
+export let mainComponents: any = [];
+mainComponents = mainComponents.concat(commentParagraph.mainComponents);
+
+export let hotspots: any = [];
+hotspots = hotspots.concat(commentParagraph.hotspots);
@@ -68,6 +68,8 @@ export class ComponentTestHelper&lt;T extends any&gt; {
         this.init(done);
     }
+    fixture: any;
+
     /**
      * @ngdoc method
      * @name init
@@ -79,7 +81,8 @@ export class ComponentTestHelper&lt;T extends any&gt; {
         let promisse = this.tcb.createAsync(this.mockComponent) as Promise<ComponentFixture>;
         return promisse.then((fixture: any) => {
             // Fire all angular events and parsing
-            fixture.detectChanges();
+            this.fixture = fixture;
+            this.detectChanges();
             // The main debug element
             this.debugElement = fixture.debugElement;
             this.component = <T>this.debugElement.componentViewChildren[0].componentInstance;
@@ -96,6 +99,17 @@ export class ComponentTestHelper&lt;T extends any&gt; {
     /**
      * @ngdoc method
+     * @name detectChanges
+     * @methodOf spec.ComponentTestHelper
+     * @description
+     *  Detect changes in component
+     */
+    detectChanges() {
+        this.fixture.detectChanges();
+    }
+
+    /**
+     * @ngdoc method
      * @name all
      * @methodOf spec.ComponentTestHelper
      * @description
@@ -0,0 +1,29 @@		@@ -0,0 +1,29 @@
	1	+'use strict';
	2	+
	3	+var path = require('path');
	4	+var gulp = require('gulp');
	5	+var merge = require('merge-stream');
	6	+var conf = require('./conf');
	7	+var mergeJson = require('gulp-merge-json');
	8	+var glob = require("glob");
	9	+
	10	+exports.pluginLanguages = function(dest) {
	11	+ var merged = merge();
	12	+ glob(path.join(conf.paths.src, conf.paths.languages, "*.json"), function (er, files) {
	13	+ files.forEach(function(file) {
	14	+ merged.add(exports.pluginLanguage(file, dest));
	15	+ });
	16	+ });
	17	+ return merged;
	18	+}
	19	+
	20	+exports.pluginLanguage = function(file, dest) {
	21	+ var language = file.split('/').pop().replace('\.json','');
	22	+ return gulp.src(path.join(conf.paths.src, '**', conf.paths.languages, language+'.json'))
	23	+ .pipe(mergeJson(path.join(conf.paths.languages, language+'.json')))
	24	+ .pipe(gulp.dest(dest))
	25	+}
	26	+
	27	+gulp.task('serve-languages', function() {
	28	+ return exports.pluginLanguages(path.join(conf.paths.tmp, '/serve'));
	29	+});
	@@ -45,7 +45,7 @@ browserSync.use(browserSyncSpa({		@@ -45,7 +45,7 @@ browserSync.use(browserSyncSpa({
45	selector: '[ng-app]'// Only needed for angular apps	45	selector: '[ng-app]'// Only needed for angular apps
46	}));	46	}));
47		47
48	-gulp.task('serve', ['watch'], function () {	48	+gulp.task('serve', ['serve-languages', 'watch'], function () {
49	var srcPaths = [path.join(conf.paths.tmp, '/serve')];	49	var srcPaths = [path.join(conf.paths.tmp, '/serve')];
50	conf.paths.allSources.reverse().forEach(function(src) {	50	conf.paths.allSources.reverse().forEach(function(src) {
51	srcPaths.push(src);	51	srcPaths.push(src);
	@@ -31,6 +31,7 @@ var buildStyles = function() {		@@ -31,6 +31,7 @@ var buildStyles = function() {
31	];	31	];
32	conf.paths.allSources.forEach(function(src) {	32	conf.paths.allSources.forEach(function(src) {
33	srcPaths.push(path.join(src, '/app/*/.scss'));	33	srcPaths.push(path.join(src, '/app/*/.scss'));
		34	+ srcPaths.push(path.join(src, conf.paths.plugins, '/*/.scss'));
34	});	35	});
35	var injectFiles = gulp.src(srcPaths, { read: false });	36	var injectFiles = gulp.src(srcPaths, { read: false });
36		37
	@@ -49,7 +49,7 @@ var _ = require('lodash');		@@ -49,7 +49,7 @@ var _ = require('lodash');
49	var wiredep = require('wiredep');	49	var wiredep = require('wiredep');
50		50
51	var pathSrcHtml = [	51	var pathSrcHtml = [
52	- path.join('./src/app/*/.html')	52	+ path.join('./src/*/.html')
53	];	53	];
54		54
55	var glob = require("glob");	55	var glob = require("glob");
@@ -0,0 +1,3 @@		@@ -0,0 +1,3 @@
	1	+<div class="reply-tooltip">
	2	+ <noosfero-comment [comment]="ctrl.comment.reply_of" [article]="ctrl.article" [display-actions]="false" [display-replies]="false"></noosfero-comment>
	3	+</div>
	@@ -9,6 +9,8 @@ export class CommentComponent {		@@ -9,6 +9,8 @@ export class CommentComponent {
9		9
10	@Input() comment: noosfero.CommentViewModel;	10	@Input() comment: noosfero.CommentViewModel;
11	@Input() article: noosfero.Article;	11	@Input() article: noosfero.Article;
		12	+ @Input() displayActions = true;
		13	+ @Input() displayReplies = true;
12		14
13	showReply() {	15	showReply() {
14	return this.comment && this.comment.__show_reply === true;	16	return this.comment && this.comment.__show_reply === true;
	@@ -5,6 +5,7 @@		@@ -5,6 +5,7 @@
5	@extend .text-muted;	5	@extend .text-muted;
6	@extend .small;	6	@extend .small;
7	margin-left: 8px;	7	margin-left: 8px;
		8	+ font-size: 12px;
8	}	9	}
9	.title {	10	.title {
10	font-weight: bold;	11	font-weight: bold;
	@@ -13,7 +14,18 @@		@@ -13,7 +14,18 @@
13	min-width: 40px;	14	min-width: 40px;
14	}	15	}
15	.media-body {	16	.media-body {
16	- padding: 0 10px 10px 10px;	17	+ padding: 0 10px 10px 0;
		18	+ .reply-of {
		19	+ font-size: 12px;
		20	+ color: #B5B5B5;
		21	+ margin-left: 5px;
		22	+ i {
		23	+ font-size: 10px;
		24	+ }
		25	+ }
		26	+ h4 {
		27	+ font-size: 16px;
		28	+ }
17	}	29	}
18	noosfero-profile-image {	30	noosfero-profile-image {
19	img {	31	img {
	@@ -27,8 +39,24 @@		@@ -27,8 +39,24 @@
27	font-size: 1.7em;	39	font-size: 1.7em;
28	}	40	}
29	}	41	}
		42	+ // Limit identation of replies
30	.comments {	43	.comments {
31	margin-left: 30px;	44	margin-left: 30px;
		45	+ .comments .comments {
		46	+ margin-left: 0px;
		47	+ .comment {
		48	+ margin-left: 0px;
		49	+ }
		50	+ }
		51	+ }
		52	+ .tooltip-inner {
		53	+ max-width: 350px;
		54	+ text-align: left;
		55	+ .reply-tooltip {
		56	+ .comment {
		57	+ margin: 5px;
		58	+ }
		59	+ }
32	}	60	}
33	}	61	}
34	}	62	}
1	<div class="comments">	1	<div class="comments">
2	- <noosfero-post-comment (comment-saved)="ctrl.commentAdded($event.detail)" ng-if="ctrl.showForm" [article]="ctrl.article" [parent]="ctrl.parent"></noosfero-post-comment>	2	+ <noosfero-post-comment ng-if="ctrl.showForm" [article]="ctrl.article" [parent]="ctrl.parent" [comment]="ctrl.newComment"></noosfero-post-comment>
3		3
4	<div class="comments-list">	4	<div class="comments-list">
5	<noosfero-comment ng-repeat="comment in ctrl.comments \| orderBy: 'created_at':true" [comment]="comment" [article]="ctrl.article"></noosfero-comment>	5	<noosfero-comment ng-repeat="comment in ctrl.comments \| orderBy: 'created_at':true" [comment]="comment" [article]="ctrl.article"></noosfero-comment>
@@ -0,0 +1,25 @@		@@ -0,0 +1,25 @@
	1	+import {Input, provide, Component} from 'ng-forward';
	2	+import {MacroDirective} from "./macro.directive";
	3	+
	4	+import * as helpers from "../../../spec/helpers";
	5	+
	6	+const htmlTemplate: string = '<div data-macro="macro_component" data-macro-custom="custom"></div>';
	7	+
	8	+describe("Directives", () => {
	9	+
	10	+ describe("Macro directive", () => {
	11	+ it("renders a macro component using the name passed in data-macro", (done: Function) => {
	12	+ helpers.quickCreateComponent({ template: htmlTemplate, directives: [MacroDirective] }).then((fixture) => {
	13	+ expect(fixture.debugElement.queryAll('macro-component').length).toEqual(1);
	14	+ done();
	15	+ });
	16	+ });
	17	+
	18	+ it("extract custom attributes from macro", (done: Function) => {
	19	+ helpers.quickCreateComponent({ template: htmlTemplate, directives: [MacroDirective] }).then((fixture) => {
	20	+ expect(fixture.debugElement.query('macro-component').attr("custom")).toEqual("custom");
	21	+ done();
	22	+ });
	23	+ });
	24	+ });
	25	+});
@@ -0,0 +1,34 @@		@@ -0,0 +1,34 @@
	1	+import {Directive, Inject} from "ng-forward";
	2	+
	3	+@Directive({
	4	+ selector: '[macro]',
	5	+ providers: []
	6	+})
	7	+@Inject('$element', '$scope', '$compile')
	8	+export class MacroDirective {
	9	+
	10	+ private macroPrefix = "data-macro";
	11	+
	12	+ constructor(private $element: any, private $scope: ng.IScope, private $compile: ng.ICompileService) {
	13	+ let macro = $element[0].attributes[this.macroPrefix].value;
	14	+ let componentName = this.normalizeName(macro);
	15	+ let content = $element.html().replace(/"/g, '"');
	16	+ let customAttributes = this.extractCustomAttributes($element[0].attributes);
	17	+ $element.replaceWith($compile(`<${componentName} [article]="ctrl.article" content="${content}" ${customAttributes}></${componentName}>`)($scope));
	18	+ }
	19	+
	20	+ extractCustomAttributes(attributes: any) {
	21	+ let customAttributes = "";
	22	+ for (let attr of attributes) {
	23	+ if (attr.name.startsWith(this.macroPrefix + '-')) {
	24	+ let name = this.normalizeName(attr.name.replace(this.macroPrefix + '-', ''));
	25	+ customAttributes += ` ${name}='${attr.value}'`;
	26	+ }
	27	+ }
	28	+ return customAttributes;
	29	+ }
	30	+
	31	+ normalizeName(name: string) {
	32	+ return name.replace(/[_\/]/g, '-').toLowerCase();
	33	+ }
	34	+}