Merging with master

Merge remote-tracking branch 'origin/master' into login-block

Merging with master
Merge remote-tracking branch 'origin/master' into login-block
Carlos Purificação
2 parents b420f699 ab10b960
Showing 204 changed files with 4245 additions and 1182 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
layouts/angular-layout.html.erb
package.json
src/app/article/article-default-view.component.ts
src/app/article/article.html
src/app/article/basic-editor.component.spec.ts
src/app/article/basic-editor.component.ts
src/app/article/basic-editor.html
src/app/article/cms/article-editor/article-editor.component.ts
src/app/article/cms/basic-editor/basic-editor.component.ts
src/app/article/cms/basic-editor/basic-editor.html
src/app/article/cms/basic-editor/basic-editor.scss
src/app/article/cms/basic-options/basic-options.component.ts
@@ -34,10 +34,14 @@
     "angular-dynamic-locale": "^0.1.30",
     "angular-i18n": "^1.5.0",
     "angular-load": "^0.4.1",
-    "angular-translate-interpolation-messageformat": "^2.10.0"
+    "angular-translate-interpolation-messageformat": "^2.10.0",
+  	"angular-bind-html-compile": "^1.2.1",
+	  "angular-click-outside": "^2.7.1"
   },
   "devDependencies": {
-    "angular-mocks": "~1.5.0"
+    "angular-mocks": "~1.5.0",
+    "ng-ckeditor": "^0.2.1",
+    "ckeditor": "^4.5.8"
   },
   "overrides": {
     "bootstrap-sass": {
@@ -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'),
@@ -73,6 +80,8 @@ gulp.task(&#39;html&#39;, [&#39;inject&#39;, &#39;partials&#39;], function () {
     .pipe($.useref())
     .pipe($.revReplace({prefix: noosferoThemePrefix}))
     .pipe(htmlFilter)
+    .pipe($.replace('/bower_components/ng-ckeditor/libs/ckeditor/', noosferoThemePrefix + 'ng-ckeditor/libs/ckeditor/'))
+    .pipe($.replace('/bower_components/ng-ckeditor/ng-ckeditor.min.js', noosferoThemePrefix + 'ng-ckeditor/ng-ckeditor.min.js'))
     .pipe($.minifyHtml({
       empty: true,
       spare: true,
@@ -93,6 +102,10 @@ gulp.task(&#39;fonts&#39;, function () {
     .pipe(gulp.dest(path.join(conf.paths.dist, '/fonts/')));
 });
+gulp.task('ckeditor', function () {
+  return gulp.src(['bower_components/ng-ckeditor/**/*']).pipe(gulp.dest(path.join(conf.paths.dist, '/ng-ckeditor')));
+});
+
 gulp.task('locale', function () {
   return gulp.src([
     path.join("bower_components/angular-i18n", '*.js'),
@@ -124,6 +137,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 +153,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', 'ckeditor', '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";
@@ -34,7 +36,7 @@ exports.configTheme(argv.theme);
  *  to inject css preprocessor deps and js files in karma
  */
 exports.wiredep = {
-  exclude: [/jquery/, /\/bootstrap\.js$/, /\/bootstrap-sass\/.*\.js/, /\/bootstrap\.css/],
+  exclude: [/jquery/, /\/bootstrap\.js$/, /\/bootstrap-sass\/.*\.js/, /\/bootstrap\.css/, /ckeditor/],
   directory: 'bower_components'
 };
@@ -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');
@@ -16,7 +17,8 @@ gulp.task(&#39;watch&#39;, [&#39;inject&#39;], function () {
   gulp.watch([
     path.join(conf.paths.src, '/app/**/*.css'),
-    path.join(conf.paths.src, '/app/**/*.scss')
+    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');
@@ -33,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");
-<% if params[:angular_theme_old] || request.fullpath.start_with?('/myprofile') %>
+<% if params[:angular_theme_old] %>
   <%= render file: Rails.root.join("app/views/layouts/application-ng.html.erb"), use_full_path: false %>
 <% else %>
   <%= from_theme_include(current_theme, "index") %>
@@ -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";
+import {ArticleContentHotspotComponent} from "../hotspot/article-content-hotspot.component";
 /**
  * @ngdoc controller
@@ -30,7 +33,9 @@ export class ArticleDefaultViewComponent {
 @Component({
     selector: 'noosfero-article',
     template: 'not-used',
-    directives: [ArticleDefaultViewComponent, ArticleBlogComponent, CommentsComponent]
+    directives: [ArticleDefaultViewComponent, ArticleBlogComponent,
+        CommentsComponent, MacroDirective, ArticleToolbarHotspotComponent,
+        ArticleContentHotspotComponent]
 })
 @Inject("$element", "$scope", "$injector", "$compile")
 export class ArticleViewComponent {
@@ -40,7 +45,8 @@ export class ArticleViewComponent {
     directiveName: string;
     ngOnInit() {
-        let specificDirective = 'noosfero' + this.article.type;
+        let articleType = this.article.type.replace(/::/, '');
+        let specificDirective = 'noosfero' + articleType;
         this.directiveName = "noosfero-default-article";
         if (this.$injector.has(specificDirective + 'Directive')) {
             this.directiveName = specificDirective.replace(/([a-z])([A-Z])/g, '$1-$2').toLowerCase();
@@ -53,6 +59,5 @@ export class ArticleViewComponent {
         private $scope: ng.IScope,
         private $injector: ng.auto.IInjectorService,
         private $compile: ng.ICompileService) {
-
     }
 }
@@ -4,6 +4,10 @@
   </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>
@@ -16,9 +20,9 @@
       </span>
     </div>
   </div>
-
+  <noosfero-hotspot-article-content [article]="ctrl.article"></noosfero-hotspot-article-content>
   <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>
@@ -1,55 +0,0 @@
-import {quickCreateComponent} from "../../spec/helpers";
-import {BasicEditorComponent} from "./basic-editor.component";
-
-
-describe("Article BasicEditor", () => {
-
-    let $rootScope: ng.IRootScopeService;
-    let $q: ng.IQService;
-    let articleServiceMock: any;
-    let profileServiceMock: any;
-    let $state: any;
-    let profile = { id: 1 };
-    let notification: any;
-
-
-    beforeEach(inject((_$rootScope_: ng.IRootScopeService, _$q_: ng.IQService) => {
-        $rootScope = _$rootScope_;
-        $q = _$q_;
-    }));
-
-    beforeEach(() => {
-        $state = jasmine.createSpyObj("$state", ["transitionTo"]);
-        notification = jasmine.createSpyObj("notification", ["success"]);
-        profileServiceMock = jasmine.createSpyObj("profileServiceMock", ["getCurrentProfile"]);
-        articleServiceMock = jasmine.createSpyObj("articleServiceMock", ["createInProfile"]);
-
-        let getCurrentProfileResponse = $q.defer();
-        getCurrentProfileResponse.resolve(profile);
-
-        let articleCreate = $q.defer();
-        articleCreate.resolve({ data: { path: "path", profile: { identifier: "profile" } } });
-
-        profileServiceMock.getCurrentProfile = jasmine.createSpy("getCurrentProfile").and.returnValue(getCurrentProfileResponse.promise);
-        articleServiceMock.createInProfile = jasmine.createSpy("createInProfile").and.returnValue(articleCreate.promise);
-    });
-
-    it("create an article in the current profile when save", done => {
-        let component: BasicEditorComponent = new BasicEditorComponent(articleServiceMock, profileServiceMock, $state, notification);
-        component.save();
-        $rootScope.$apply();
-        expect(profileServiceMock.getCurrentProfile).toHaveBeenCalled();
-        expect(articleServiceMock.createInProfile).toHaveBeenCalledWith(profile, component.article);
-        done();
-    });
-
-    it("got to the new article page and display an alert when saving sucessfully", done => {
-        let component: BasicEditorComponent = new BasicEditorComponent(articleServiceMock, profileServiceMock, $state, notification);
-        component.save();
-        $rootScope.$apply();
-        expect($state.transitionTo).toHaveBeenCalledWith("main.profile.page", { page: "path", profile: "profile" });
-        expect(notification.success).toHaveBeenCalled();
-        done();
-    });
-
-});
@@ -1,35 +0,0 @@
-import {StateConfig, Component, Inject, provide} from 'ng-forward';
-import {ArticleService} from "../../lib/ng-noosfero-api/http/article.service";
-import {ProfileService} from "../../lib/ng-noosfero-api/http/profile.service";
-import {NotificationService} from "../shared/services/notification.service.ts";
-
-@Component({
-    selector: 'article-basic-editor',
-    templateUrl: "app/article/basic-editor.html",
-    providers: [
-        provide('articleService', { useClass: ArticleService }),
-        provide('profileService', { useClass: ProfileService }),
-        provide('notification', { useClass: NotificationService })
-    ]
-})
-@Inject(ArticleService, ProfileService, "$state", NotificationService)
-export class BasicEditorComponent {
-
-    article: noosfero.Article = <noosfero.Article>{};
-
-    constructor(private articleService: ArticleService,
-        private profileService: ProfileService,
-        private $state: ng.ui.IStateService,
-        private notification: NotificationService) { }
-
-    save() {
-        this.profileService.getCurrentProfile().then((profile: noosfero.Profile) => {
-            return this.articleService.createInProfile(profile, this.article);
-        }).then((response: noosfero.RestResult<noosfero.Article>) => {
-            let article = (<noosfero.Article>response.data);
-            this.$state.transitionTo('main.profile.page', { page: article.path, profile: article.profile.identifier });
-            this.notification.success({ title: "Good job!", message: "Article saved!" });
-        });
-    }
-
-}
@@ -1,11 +0,0 @@
-<form>
-  <div class="form-group">
-    <label for="titleInput">Title</label>
-    <input type="text" class="form-control" id="titleInput" placeholder="title" ng-model="vm.article.name">
-  </div>
-  <div class="form-group">
-    <label for="bodyInput">Text</label>
-    <textarea class="form-control" id="bodyInput" rows="10" ng-model="vm.article.body"></textarea>
-  </div>
-  <button type="submit" class="btn btn-default" ng-click="vm.save()">Save</button>
-</form>
@@ -0,0 +1,27 @@
+import {Component, Input, Inject} from 'ng-forward';
+
+@Component({
+    selector: 'article-editor',
+    template: "not-used"
+})
+@Inject("$element", "$scope", "$injector", "$compile")
+export class ArticleEditorComponent {
+
+    @Input() article: noosfero.Article;
+
+    constructor(
+        private $element: any,
+        private $scope: ng.IScope,
+        private $injector: ng.auto.IInjectorService,
+        private $compile: ng.ICompileService) { }
+
+    ngOnInit() {
+        let articleType = this.article.type.replace(/::/, '');
+        let specificDirective = `${articleType.charAt(0).toLowerCase()}${articleType.substring(1)}Editor`;
+        let directiveName = "article-basic-editor";
+        if (this.$injector.has(specificDirective + 'Directive')) {
+            directiveName = specificDirective.replace(/([a-z])([A-Z])/g, '$1-$2').toLowerCase();
+        }
+        this.$element.replaceWith(this.$compile('<' + directiveName + ' [article]="ctrl.article"></' + directiveName + '>')(this.$scope));
+    }
+}
@@ -0,0 +1,10 @@
+import {Component, Input} from 'ng-forward';
+
+@Component({
+    selector: 'article-basic-editor',
+    templateUrl: "app/article/cms/basic-editor/basic-editor.html"
+})
+export class BasicEditorComponent {
+
+    @Input() article: noosfero.Article;
+}
@@ -0,0 +1,10 @@
+<form>
+  <div class="form-group">
+    <label for="titleInput">{{"article.basic_editor.title" | translate}}</label>
+    <input type="text" class="form-control" id="titleInput" placeholder="{{'article.basic_editor.title' | translate}}" ng-model="ctrl.article.name">
+  </div>
+  <div class="form-group">
+    <label for="bodyInput">{{"article.basic_editor.body" | translate}}</label>
+    <html-editor [(value)]="ctrl.article.body"></html-editor>
+  </div>
+</form>
@@ -0,0 +1,11 @@
+import {Component, Input} from 'ng-forward';
+
+@Component({
+    selector: 'article-basic-options',
+    templateUrl: "app/article/cms/basic-options/basic-options.html"
+})
+export class BasicOptionsComponent {
+
+    @Input() article: noosfero.Article;
+
+}
@@ -0,0 +1,15 @@
+<div class="side-options">
+  <div class="visibility panel panel-default">
+    <div class="panel-heading">{{"article.basic_editor.visibility" | translate}}</div>
+    <div class="panel-body">
+      <div>
+        <input type="radio" ng-model="ctrl.article.published" ng-value="true"> 
+        <i class="fa fa-unlock fa-fw"></i> {{"article.basic_editor.visibility.public" | translate}}
+      </div>
+      <div>
+        <input type="radio" ng-model="ctrl.article.published" ng-value="false">
+        <i class="fa fa-lock fa-fw"></i> {{"article.basic_editor.visibility.private" | translate}}
+      </div>
+    </div>
+  </div>
+</div>
@@ -0,0 +1,15 @@
+.side-options {
+  margin-top: 25px;
+
+  .visibility {
+    .panel-heading {
+      background-color: transparent;
+      font-weight: bold;
+    }
+    .panel-body {
+      i {
+        color: #A5A5A5;
+      }
+    }
+  }
+}
@@ -0,0 +1,84 @@
+import {quickCreateComponent} from "../../../spec/helpers";
+import {CmsComponent} from "./cms.component";
+
+
+describe("Article Cms", () => {
+
+    let $rootScope: ng.IRootScopeService;
+    let $q: ng.IQService;
+    let articleServiceMock: any;
+    let profileServiceMock: any;
+    let $state: any;
+    let $stateParams: any;
+    let $window: any;
+    let profile = { id: 1 };
+    let notification: any;
+
+
+    beforeEach(inject((_$rootScope_: ng.IRootScopeService, _$q_: ng.IQService) => {
+        $rootScope = _$rootScope_;
+        $q = _$q_;
+    }));
+
+    beforeEach(() => {
+        $window = jasmine.createSpyObj("$window", ["back"]);
+        $state = jasmine.createSpyObj("$state", ["go"]);
+        notification = jasmine.createSpyObj("notification", ["success"]);
+        profileServiceMock = jasmine.createSpyObj("profileServiceMock", ["setCurrentProfileByIdentifier"]);
+        articleServiceMock = jasmine.createSpyObj("articleServiceMock", ["createInParent", "updateArticle", "get"]);
+
+        $stateParams = { profile: "profile" };
+
+        let setCurrentProfileByIdentifierResponse = $q.defer();
+        setCurrentProfileByIdentifierResponse.resolve(profile);
+
+        let articleCreate = $q.defer();
+        articleCreate.resolve({ data: { path: "path", profile: { identifier: "profile" } } });
+
+        let articleGet = $q.defer();
+        articleGet.resolve({ data: { path: "parent-path", profile: { identifier: "profile" } } });
+
+        profileServiceMock.setCurrentProfileByIdentifier = jasmine.createSpy("setCurrentProfileByIdentifier").and.returnValue(setCurrentProfileByIdentifierResponse.promise);
+        articleServiceMock.createInParent = jasmine.createSpy("createInParent").and.returnValue(articleCreate.promise);
+        articleServiceMock.updateArticle = jasmine.createSpy("updateArticle").and.returnValue(articleCreate.promise);
+        articleServiceMock.get = jasmine.createSpy("get").and.returnValue(articleGet.promise);
+    });
+
+    it("create an article in the current profile when save", done => {
+        $stateParams['parent_id'] = 1;
+        let component: CmsComponent = new CmsComponent(articleServiceMock, profileServiceMock, $state, notification, $stateParams, $window);
+        component.save();
+        $rootScope.$apply();
+        expect(profileServiceMock.setCurrentProfileByIdentifier).toHaveBeenCalled();
+        expect(articleServiceMock.createInParent).toHaveBeenCalledWith(1, component.article);
+        done();
+    });
+
+    it("got to the new article page and display an alert when saving sucessfully", done => {
+        let component: CmsComponent = new CmsComponent(articleServiceMock, profileServiceMock, $state, notification, $stateParams, $window);
+        component.save();
+        $rootScope.$apply();
+        expect($state.go).toHaveBeenCalledWith("main.profile.page", { page: "path", profile: "profile" });
+        expect(notification.success).toHaveBeenCalled();
+        done();
+    });
+
+    it("go back when cancel article edition", done => {
+        let component: CmsComponent = new CmsComponent(articleServiceMock, profileServiceMock, $state, notification, $stateParams, $window);
+        $window.history = { back: jasmine.createSpy('back') };
+        component.cancel();
+        expect($window.history.back).toHaveBeenCalled();
+        done();
+    });
+
+    it("edit existing article when save", done => {
+        $stateParams['parent_id'] = null;
+        $stateParams['id'] = 2;
+        let component: CmsComponent = new CmsComponent(articleServiceMock, profileServiceMock, $state, notification, $stateParams, $window);
+        component.save();
+        $rootScope.$apply();
+        expect(articleServiceMock.updateArticle).toHaveBeenCalledWith(component.article);
+        done();
+    });
+
+});
@@ -0,0 +1,77 @@
+import {StateConfig, Component, Inject, provide} from 'ng-forward';
+import {ArticleService} from "../../../lib/ng-noosfero-api/http/article.service";
+import {ProfileService} from "../../../lib/ng-noosfero-api/http/profile.service";
+import {NotificationService} from "../../shared/services/notification.service.ts";
+import {BasicOptionsComponent} from './basic-options/basic-options.component';
+import {BasicEditorComponent} from './basic-editor/basic-editor.component';
+import {ArticleEditorComponent} from './article-editor/article-editor.component';
+
+@Component({
+    selector: 'article-cms',
+    templateUrl: "app/article/cms/cms.html",
+    providers: [
+        provide('articleService', { useClass: ArticleService }),
+        provide('profileService', { useClass: ProfileService }),
+        provide('notification', { useClass: NotificationService })
+    ],
+    directives: [ArticleEditorComponent, BasicOptionsComponent, BasicEditorComponent]
+})
+@Inject(ArticleService, ProfileService, "$state", NotificationService, "$stateParams", "$window")
+export class CmsComponent {
+
+    article: noosfero.Article;
+    parent: noosfero.Article = <noosfero.Article>{};
+
+    id: number;
+    parentId: number;
+    profileIdentifier: string;
+
+    constructor(private articleService: ArticleService,
+        private profileService: ProfileService,
+        private $state: ng.ui.IStateService,
+        private notification: NotificationService,
+        private $stateParams: ng.ui.IStateParamsService,
+        private $window: ng.IWindowService) {
+
+        this.parentId = this.$stateParams['parent_id'];
+        this.profileIdentifier = this.$stateParams["profile"];
+        this.id = this.$stateParams['id'];
+
+        if (this.parentId) {
+            this.articleService.get(this.parentId).then((result: noosfero.RestResult<noosfero.Article>) => {
+                this.parent = result.data;
+            });
+        }
+        if (this.id) {
+            this.articleService.get(this.id).then((result: noosfero.RestResult<noosfero.Article>) => {
+                this.article = result.data;
+                this.article.name = this.article.title; // FIXME
+            });
+        } else {
+            this.article = <noosfero.Article>{ type: this.$stateParams['type'] || "TextArticle", published: true };
+        }
+    }
+
+    save() {
+        this.profileService.setCurrentProfileByIdentifier(this.profileIdentifier).then((profile: noosfero.Profile) => {
+            if (this.id) {
+                return this.articleService.updateArticle(this.article);
+            } else if (this.parentId) {
+                return this.articleService.createInParent(this.parentId, this.article);
+            } else {
+                return this.articleService.createInProfile(profile, this.article);
+            }
+        }).then((response: noosfero.RestResult<noosfero.Article>) => {
+            let article = (<noosfero.Article>response.data);
+            this.$state.go('main.profile.page', { page: article.path, profile: article.profile.identifier });
+            this.notification.success({ title: "article.basic_editor.success.title", message: "article.basic_editor.success.message" });
+        }).catch(() => {
+            this.notification.error({ message: "article.basic_editor.save.failed" });
+        });
+    }
+
+    cancel() {
+        this.$window.history.back();
+    }
+
+}
@@ -0,0 +1,18 @@
+<div class="cms">
+  <div class="row">
+    <div class="col-md-1"></div>
+    <div class="col-md-8">
+      <article-editor ng-if="vm.article" [article]="vm.article"></article-editor>
+    </div>
+    <div class="col-md-3">
+      <article-basic-options ng-if="vm.article" [article]="vm.article"></article-basic-options>
+    </div>
+  </div>
+  <div class="row">
+    <div class="col-md-1"></div>
+    <div class="col-md-8">
+      <button type="submit" class="btn btn-default" ng-click="vm.save()">{{"article.basic_editor.save" | translate}}</button>
+      <button type="button" class="btn btn-danger" ng-click="vm.cancel()">{{"article.basic_editor.cancel" | translate}}</button>
+    </div>
+  </div>
+</div>
@@ -0,0 +1,4 @@
+.cms {
+  @extend .container-fluid;
+  padding: 0 1%;
+}
@@ -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" ng-if="ctrl.article.accept_comments">
+        {{"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";
@@ -19,12 +16,13 @@ export class CommentsComponent {
     @Input() showForm = true;
     @Input() article: noosfero.Article;
     @Input() parent: noosfero.CommentViewModel;
-
     protected page = 1;
     protected perPage = 5;
     protected total = 0;
-    constructor(protected commentService: CommentService) { }
+    newComment = <noosfero.Comment>{};
+
+    constructor(protected commentService: CommentService, private $scope: ng.IScope) { }
     ngOnInit() {
         if (this.parent) {
@@ -43,7 +41,7 @@ export class CommentsComponent {
         this.comments.forEach((comment: noosfero.CommentViewModel) => {
             comment.__show_reply = false;
         });
-        if  (this.parent) {
+        if (this.parent) {
             this.parent.__show_reply = false;
         }
     }
 <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 (comment-saved)="ctrl.commentAdded($event.detail)" 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>
@@ -0,0 +1,6 @@
+.comments {
+  border-top: 2px solid #F3F3F3;
+  .comments {
+    border-top: 0;
+  }
+}
@@ -7,6 +7,8 @@ const htmlTemplate: string = &#39;&lt;noosfero-post-comment [article]=&quot;ctrl.article&quot; [r
 describe("Components", () => {
     describe("Post Comment Component", () => {
+        let properties = { article: { id: 1, accept_comments: true } };
+
         beforeEach(angular.mock.module("templates"));
         let commentService = jasmine.createSpyObj("commentService", ["createInArticle"]);
@@ -19,7 +21,7 @@ describe(&quot;Components&quot;, () =&gt; {
         @Component({ selector: 'test-container-component', directives: [PostCommentComponent], template: htmlTemplate, providers: providers })
         class ContainerComponent {
-            article = { id: 1 };
+            article = properties['article'];
             comment = { id: 2 };
         }
@@ -30,6 +32,14 @@ describe(&quot;Components&quot;, () =&gt; {
             });
         });
+        it("not render the post comment form when article doesn't accept comments", done => {
+            properties['article'].accept_comments = false;
+            helpers.createComponentFromClass(ContainerComponent).then(fixture => {
+                expect(fixture.debugElement.queryAll("form").length).toEqual(0);
+                done();
+            });
+        });
+
         it("emit an event when create comment", done => {
             helpers.createComponentFromClass(ContainerComponent).then(fixture => {
                 let component: PostCommentComponent = fixture.debugElement.componentViewChildren[0].componentInstance;
@@ -2,20 +2,23 @@ import { Inject, Input, Output, EventEmitter, Component } from &#39;ng-forward&#39;;
 import { CommentService } from "../../../../lib/ng-noosfero-api/http/comment.service";
 import { NotificationService } from "../../../shared/services/notification.service";
 import { SessionService } from "../../../login";
+import { CommentFormHotspotComponent } from "../../../hotspot/comment-form-hotspot.component";
 @Component({
     selector: 'noosfero-post-comment',
     templateUrl: 'app/article/comment/post-comment/post-comment.html',
-    outputs: ['commentSaved']
+    outputs: ['commentSaved'],
+    directives: [CommentFormHotspotComponent]
 })
 @Inject(CommentService, NotificationService, SessionService)
 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,
-<form class="clearfix post-comment">
+<form class="clearfix post-comment" ng-if="ctrl.article.accept_comments">
   <div class="form-group">
     <div class="comment media">
       <div class="media-left">
@@ -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>
 .comments {
   .post-comment {
     .media {
-      border-top: 2px solid #F3F3F3;
       padding-top: 10px;
       .media-left {
         padding: 10px 0;
-import {providers} from 'ng-forward/cjs/testing/providers';
-
 import {Input, Component, provide} from 'ng-forward';
 import * as helpers from "../../../spec/helpers";
-
-import {ComponentFixture} from 'ng-forward/cjs/testing/test-component-builder';
+import {ComponentTestHelper, createClass} from '../../../spec/component-test-helper';
 import {ContentViewerActionsComponent} from './content-viewer-actions.component';
 // this htmlTemplate will be re-used between the container components in this spec file
@@ -12,56 +9,57 @@ const htmlTemplate: string = &#39;&lt;content-viewer-actions [article]=&quot;ctrl.article&quot; [
 describe('Content Viewer Actions Component', () => {
-    beforeEach(() => {
+    let helper: ComponentTestHelper<ContentViewerActionsComponent>;
-        angular.mock.module("templates");
+    beforeEach(angular.mock.module("templates"));
-        providers((provide: any) => {
-            return <any>[
-                provide('ProfileService', {
-                    useValue: helpers.mocks.profileService
-                })
-            ];
-        });
-    });
+    let providers = [
+        provide('ProfileService', {
+            useValue: helpers.mocks.profileService
+        }),
+        provide('ArticleService', {
+            useValue: helpers.mocks.articleService
+        })
+    ].concat(helpers.provideFilters("translateFilter"));
-    let buildComponent = (): Promise<ComponentFixture> => {
-        return helpers.quickCreateComponent({
-            providers: [
-                helpers.provideEmptyObjects('Restangular'),
-                helpers.provideFilters('translateFilter')
-            ],
+    beforeEach((done) => {
+        let cls = createClass({
+            template: htmlTemplate,
             directives: [ContentViewerActionsComponent],
-            template: htmlTemplate
+            providers: providers
         });
-    };
+        helper = new ComponentTestHelper<ContentViewerActionsComponent>(cls, done);
+    });
-    it('renders content viewer actions directive', (done: Function) => {
-        buildComponent().then((fixture: ComponentFixture) => {
-            expect(fixture.debugElement.query('content-viewer-actions').length).toEqual(1);
+    it('renders content viewer actions directive', () => {
+        expect(helper.all("content-viewer-actions").length).toEqual(1);
+    });
-            done();
-        });
+    it('return article parent as container when it is not a folder', () => {
+        let article = <noosfero.Article>({ id: 1, type: 'TextArticle', parent: { id: 2 } });
+        expect(helper.component.getArticleContainer(article)).toEqual(2);
+    });
+
+    it('return article as container when it is a folder', () => {
+        let article = <noosfero.Article>({ id: 1, type: 'Folder' });
+        expect(helper.component.getArticleContainer(article)).toEqual(1);
     });
-    it('check if profile was loaded', (done: Function) => {
+    it('return article as container when it is a blog', () => {
+        let article = <noosfero.Article>({ id: 1, type: 'Blog' });
+        expect(helper.component.getArticleContainer(article)).toEqual(1);
+    });
+
+    it('check if profile was loaded', () => {
         let profile: any = {
             id: 1,
             identifier: 'the-profile-test',
             type: 'Person'
         };
-
         helpers.mocks.profileService.getCurrentProfile = () => {
             return helpers.mocks.promiseResultTemplate(profile);
         };
-
-        buildComponent().then((fixture: ComponentFixture) => {
-            let contentViewerComp: ContentViewerActionsComponent = fixture.debugElement.componentViewChildren[0].componentInstance;
-
-            expect(contentViewerComp.profile).toEqual(jasmine.objectContaining(profile));
-
-            done();
-        });
+        let component = new ContentViewerActionsComponent(<any>helpers.mocks.profileService, <any>helpers.mocks.articleService);
+        expect(component.profile).toEqual(jasmine.objectContaining(profile));
     });
-
 });
 import {Component, Inject, provide} from "ng-forward";
 import {ProfileService} from "../../../lib/ng-noosfero-api/http/profile.service";
+import {ArticleService} from "../../../lib/ng-noosfero-api/http/article.service";
 @Component({
     selector: "content-viewer-actions",
     templateUrl: "app/article/content-viewer/navbar-actions.html",
-    providers: [provide('profileService', { useClass: ProfileService })]
+    providers: [
+        provide('profileService', { useClass: ProfileService }),
+        provide('articleService', { useClass: ArticleService })
+    ]
 })
-@Inject(ProfileService)
+@Inject(ProfileService, ArticleService)
 export class ContentViewerActionsComponent {
     article: noosfero.Article;
     profile: noosfero.Profile;
+    parentId: number;
-    constructor(profileService: ProfileService) {
+    constructor(profileService: ProfileService, articleService: ArticleService) {
         profileService.getCurrentProfile().then((profile: noosfero.Profile) => {
             this.profile = profile;
+            return articleService.getCurrent();
+        }).then((article: noosfero.Article) => {
+            this.article = article;
+            this.parentId = this.getArticleContainer(article);
         });
     }
+
+    getArticleContainer(article: noosfero.Article) {
+        // FIXME get folder types from api
+        if (article.type === "Blog" || article.type === "Folder") {
+            return article.id;
+        } else if (article.parent) {
+            return article.parent.id;
+        }
+    }
 }
@@ -28,11 +28,12 @@ export class ContentViewerComponent {
     }
     activate() {
-       this.profileService.getCurrentProfile().then((profile: noosfero.Profile) => {
+        this.profileService.getCurrentProfile().then((profile: noosfero.Profile) => {
             this.profile = profile;
             return this.articleService.getArticleByProfileAndPath(this.profile, this.$stateParams["page"]);
         }).then((result: noosfero.RestResult<any>) => {
             this.article = <noosfero.Article>result.data;
+            this.articleService.setCurrent(this.article);
         });
     }
 }
 <ul class="nav navbar-nav">
   <li ng-show="vm.profile">
-    <a href="#" role="button" ui-sref="main.profile.cms({profile: vm.profile.identifier})">
+    <a ng-show="vm.parentId" href="#" role="button" ui-sref="main.cms({profile: vm.profile.identifier, parent_id: vm.parentId})">
+      <i class="fa fa-file fa-fw fa-lg"></i> {{"navbar.content_viewer_actions.new_post" | translate}}
+    </a>
+  </li>
+  <li ng-show="vm.profile">
+    <a href="#" role="button" ui-sref="main.cms({profile: vm.profile.identifier, parent_id: vm.parentId, type: 'CommentParagraphPlugin::Discussion'})">
       <i class="fa fa-file fa-fw fa-lg"></i> {{"navbar.content_viewer_actions.new_post" | translate}}
     </a>
   </li>
 /* Module Index Entry - generated using the script npm run generate-index */
 export * from "./article-default-view.component";
-export * from "./basic-editor.component";
@@ -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-content",
+    template: "<span></span>"
+})
+@Inject("$element", "$scope", "$compile")
+export class ArticleContentHotspotComponent extends PluginHotspot {
+
+    @Input() article: noosfero.Article;
+
+    constructor(
+        private $element: any,
+        private $scope: ng.IScope,
+        private $compile: ng.ICompileService) {
+        super("article_extra_content");
+    }
+
+    addHotspot(directiveName: string) {
+        this.$element.append(this.$compile('<' + directiveName + ' [article]="ctrl.article"></' + directiveName + '>')(this.$scope));
+    }
+}
@@ -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;
+}
@@ -28,12 +28,16 @@ $primary-color-dark: #0288d1;
 $default-bg-hover-color: #f8f8f8;
 $red-color: #e84e40;
 $red-color-dark: #dd191d;
+$green-color: #8bc34a;
+$green-color-dark: #689f38;
 //GRID - media queries breakpoints
 $break-xxs-min: 420px;
 $break-xs-min: 768px;
+$break-sm-min: 992px;
 $break-xxs-max: ($break-xxs-min - 1);
+$break-sm-max: ($break-sm-min - 1);
 $break-xs-max: ($break-xs-min - 1);
@@ -76,4 +80,5 @@ h1, h2, h3, h4, h5 {
 @import "layout/scss/mixins";
 @import "layout/scss/bootstrap-overrides";
 @import "layout/scss/layout";
+@import "layout/scss/sidebar";
 @import "layout/scss/tables";
@@ -5,7 +5,7 @@ import {noosferoAngularRunBlock} from &quot;./index.run&quot;;
 import {MainComponent} from "./main/main.component";
 import {bootstrap, bundle} from "ng-forward";
-import {AUTH_EVENTS} from "./login/auth-events";
+import {AuthEvents} from "./login/auth-events";
 import {AuthController} from "./login/auth.controller";
 import {Navbar} from "./layout/navbar/navbar";
@@ -14,16 +14,17 @@ declare var moment: any;
 let noosferoApp: any = bundle("noosferoApp", MainComponent, ["ngAnimate", "ngCookies", "ngStorage", "ngTouch",
     "ngSanitize", "ngMessages", "ngAria", "restangular",
-    "ui.router", "ui.bootstrap", "toastr",
-    "angularMoment", "angular.filter", "akoenig.deckgrid",
+    "ui.router", "ui.bootstrap", "toastr", "ngCkeditor",
+    "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;
 NoosferoApp.addConstants("moment", moment);
-NoosferoApp.addConstants("AUTH_EVENTS", AUTH_EVENTS);
+NoosferoApp.addConstants("AuthEvents", AuthEvents);
 NoosferoApp.addConfig(noosferoModuleConfig);
 NoosferoApp.run(noosferoAngularRunBlock);
@@ -11,7 +11,7 @@ export class BlockComponent {
     @Input() owner: any;
     ngOnInit() {
-        let blockName = (this.block && this.block.type) ? this.block.type.replace(/([a-z])([A-Z])/g, '$1-$2').toLowerCase() : "default-block";
+        let blockName = (this.block && this.block.type) ? this.block.type.replace(/::/, '').replace(/([a-z])([A-Z])/g, '$1-$2').toLowerCase() : "default-block";
         this.$element.replaceWith(this.$compile('<noosfero-' + blockName + ' [block]="ctrl.block" [owner]="ctrl.owner"></noosfero-' + blockName + '>')(this.$scope));
     }
@@ -1,51 +0,0 @@
-import {TestComponentBuilder} from 'ng-forward/cjs/testing/test-component-builder';
-import {Provider, Input, provide, Component} from 'ng-forward';
-
-import {CommunitiesBlockComponent} from './communities-block.component';
-
-const htmlTemplate: string = '<noosfero-communities-block [block]="ctrl.block" [owner]="ctrl.owner"></noosfero-communities-block>';
-
-const tcb = new TestComponentBuilder();
-
-describe("Components", () => {
-    describe("Communities Block Component", () => {
-
-        beforeEach(angular.mock.module("templates"));
-
-        let state = jasmine.createSpyObj("state", ["go"]);
-        let providers = [
-            new Provider('truncateFilter', { useValue: () => { } }),
-            new Provider('stripTagsFilter', { useValue: () => { } }),
-            new Provider('$state', { useValue: state }),
-            new Provider('CommunityService', {
-                useValue: {
-                    getByOwner: (owner: any, params: any): any => {
-                        return Promise.resolve({ data: [{ identifier: "community1" }] });
-                    }
-                }
-            }),
-        ];
-        @Component({ selector: 'test-container-component', template: htmlTemplate, directives: [CommunitiesBlockComponent], providers: providers })
-        class BlockContainerComponent {
-            block = { type: 'Block', settings: {} };
-            owner = { name: 'profile-name' };
-        }
-
-        it("get communities", done => {
-            tcb.createAsync(BlockContainerComponent).then(fixture => {
-                let block: CommunitiesBlockComponent = fixture.debugElement.componentViewChildren[0].componentInstance;
-                expect(block.profiles).toEqual([{ identifier: "community1" }]);
-                done();
-            });
-        });
-
-        it("render the profile image for each community", done => {
-            tcb.createAsync(BlockContainerComponent).then(fixture => {
-                fixture.debugElement.getLocal("$rootScope").$apply();
-                expect(fixture.debugElement.queryAll("noosfero-profile-image").length).toEqual(1);
-                done();
-            });
-        });
-
-    });
-});
@@ -1,24 +0,0 @@
-import {Input, Inject, Component} from "ng-forward";
-import {CommunityService} from "../../../../lib/ng-noosfero-api/http/community.service";
-
-@Component({
-    selector: "noosfero-communities-block",
-    templateUrl: 'app/layout/blocks/communities-block/communities-block.html',
-})
-@Inject(CommunityService)
-export class CommunitiesBlockComponent {
-
-    @Input() block: noosfero.Block;
-    @Input() owner: noosfero.Profile;
-
-    profiles: any = [];
-
-    constructor(private communityService: CommunityService) { }
-
-    ngOnInit() {
-        let limit: number = ((this.block && this.block.settings) ? this.block.settings.limit : null) || 5;
-        this.communityService.getByOwner(this.owner, { limit: limit }).then((result: noosfero.RestResult<noosfero.Community[]>) => {
-            this.profiles = result.data;
-        });
-    }
-}
@@ -1,5 +0,0 @@
-<div class="communities-block">
-  <a ng-repeat="profile in ctrl.profiles" ui-sref="main.profile.home({profile: profile.identifier})" class="profile">
-    <noosfero-profile-image [profile]="profile"></noosfero-profile-image>
-  </a>
-</div>
@@ -1,16 +0,0 @@
-.communities-block {
-  .profile {
-    margin: 10px;
-    img, i.profile-image {
-      width: 60px;
-    }
-    img {
-      display: inline-block;
-      vertical-align: top;
-    }
-    i.profile-image {
-        text-align: center;
-        font-size: 4.5em;
-    }
-  }
-}
@@ -0,0 +1,51 @@
+import {TestComponentBuilder} from 'ng-forward/cjs/testing/test-component-builder';
+import {Provider, Input, provide, Component} from 'ng-forward';
+
+import {CommunitiesBlockComponent} from './communities-block.component';
+
+const htmlTemplate: string = '<noosfero-communities-block [block]="ctrl.block" [owner]="ctrl.owner"></noosfero-communities-block>';
+
+const tcb = new TestComponentBuilder();
+
+describe("Components", () => {
+    describe("Communities Block Component", () => {
+
+        beforeEach(angular.mock.module("templates"));
+
+        let state = jasmine.createSpyObj("state", ["go"]);
+        let providers = [
+            new Provider('truncateFilter', { useValue: () => { } }),
+            new Provider('stripTagsFilter', { useValue: () => { } }),
+            new Provider('$state', { useValue: state }),
+            new Provider('CommunityService', {
+                useValue: {
+                    getByOwner: (owner: any, params: any): any => {
+                        return Promise.resolve({ data: [{ identifier: "community1" }] });
+                    }
+                }
+            }),
+        ];
+        @Component({ selector: 'test-container-component', template: htmlTemplate, directives: [CommunitiesBlockComponent], providers: providers })
+        class BlockContainerComponent {
+            block = { type: 'Block', settings: {} };
+            owner = { name: 'profile-name' };
+        }
+
+        it("get communities", done => {
+            tcb.createAsync(BlockContainerComponent).then(fixture => {
+                let block: CommunitiesBlockComponent = fixture.debugElement.componentViewChildren[0].componentInstance;
+                expect(block.profiles).toEqual([{ identifier: "community1" }]);
+                done();
+            });
+        });
+
+        it("render the profile image for each community", done => {
+            tcb.createAsync(BlockContainerComponent).then(fixture => {
+                fixture.debugElement.getLocal("$rootScope").$apply();
+                expect(fixture.debugElement.queryAll("noosfero-profile-image").length).toEqual(1);
+                done();
+            });
+        });
+
+    });
+});
@@ -0,0 +1,24 @@
+import {Input, Inject, Component} from "ng-forward";
+import {CommunityService} from "../../../../lib/ng-noosfero-api/http/community.service";
+
+@Component({
+    selector: "noosfero-communities-block",
+    templateUrl: 'app/layout/blocks/communities/communities-block.html',
+})
+@Inject(CommunityService)
+export class CommunitiesBlockComponent {
+
+    @Input() block: noosfero.Block;
+    @Input() owner: noosfero.Profile;
+
+    profiles: any = [];
+
+    constructor(private communityService: CommunityService) { }
+
+    ngOnInit() {
+        let limit: number = ((this.block && this.block.settings) ? this.block.settings.limit : null) || 5;
+        this.communityService.getByOwner(this.owner, { limit: limit }).then((result: noosfero.RestResult<noosfero.Community[]>) => {
+            this.profiles = result.data;
+        });
+    }
+}
@@ -0,0 +1,5 @@
+<div class="communities-block">
+  <a ng-repeat="profile in ctrl.profiles" ui-sref="main.profile.home({profile: profile.identifier})" class="profile">
+    <noosfero-profile-image [profile]="profile"></noosfero-profile-image>
+  </a>
+</div>
@@ -0,0 +1,16 @@
+.communities-block {
+  .profile {
+    margin: 10px;
+    img, i.profile-image {
+      width: 60px;
+    }
+    img {
+      display: inline-block;
+      vertical-align: top;
+    }
+    i.profile-image {
+        text-align: center;
+        font-size: 4.5em;
+    }
+  }
+}
@@ -0,0 +1,2 @@
+/* Module Index Entry - generated using the script npm run generate-index */
+export * from "./communities-block.component";
 /* Module Index Entry - generated using the script npm run generate-index */
-export * from "./link-list.component";
+export * from "./link-list-block.component";
@@ -0,0 +1,65 @@
+import {TestComponentBuilder} from 'ng-forward/cjs/testing/test-component-builder';
+import {Pipe, Input, provide, Component} from 'ng-forward';
+import {provideFilters} from '../../../../spec/helpers';
+
+import {LinkListBlockComponent} from './link-list-block.component';
+
+const tcb = new TestComponentBuilder();
+
+const htmlTemplate: string = '<noosfero-link-list-block [block]="ctrl.block" [owner]="ctrl.owner"></noosfero-link-list-block>';
+
+
+describe("Components", () => {
+
+    describe("Link List Block Component", () => {
+
+        beforeEach(angular.mock.module("templates"));
+
+        it("receives the block and the owner as inputs", done => {
+
+            // Creating a container component (BlockContainerComponent) to include
+            // the component under test (Block)
+            @Component({ selector: 'test-container-component', template: htmlTemplate, directives: [LinkListBlockComponent] })
+            class BlockContainerComponent {
+                block = { type: 'Block' };
+                owner = { name: 'profile-name' };
+                constructor() {
+                }
+            }
+
+            // uses the TestComponentBuilder instance to initialize the component
+            // .overrideView(LinkListBlock, { template: 'asdasdasd', pipes: [NoosferoTemplate] })
+            tcb.createAsync(BlockContainerComponent).then(fixture => {
+                // and here we can inspect and run the test assertions
+                let myComponent: LinkListBlockComponent = fixture.componentInstance;
+
+                // assure the block object inside the Block matches
+                // the provided through the parent component
+                expect(myComponent.block.type).toEqual("Block");
+                expect(myComponent.owner.name).toEqual("profile-name");
+                done();
+            });
+        });
+
+
+        it("display links stored in block settings", done => {
+
+            @Component({
+                selector: 'test-container-component',
+                template: htmlTemplate,
+                directives: [LinkListBlockComponent],
+                providers: provideFilters("noosferoTemplateFilter")
+            })
+            class CustomBlockType {
+                block: any = { settings: { links: [{ name: 'link1', address: 'address1' }, { name: 'link2', address: 'address2' }] } };
+                owner: any = { name: 'profile-name' };
+            }
+            tcb.createAsync(CustomBlockType).then(fixture => {
+                expect(fixture.debugElement.queryAll(".link-list-block a").length).toEqual(2);
+                done();
+            });
+        });
+
+    });
+
+});
@@ -0,0 +1,20 @@
+import {Component, Input} from "ng-forward";
+
+@Component({
+    selector: "noosfero-link-list-block",
+    templateUrl: "app/layout/blocks/link-list/link-list-block.html"
+})
+export class LinkListBlockComponent {
+
+    @Input() block: any;
+    @Input() owner: any;
+
+    links: any;
+
+    ngOnInit() {
+        if (this.block && this.block.settings) {
+            this.links = this.block.settings.links;
+        }
+    }
+
+}
@@ -0,0 +1,7 @@
+<div class="link-list-block">
+  <div ng-repeat="link in ctrl.links">
+    <a ng-href="{{link.address | noosferoTemplate:{profile: ctrl.owner.identifier} }}">
+      <i class="fa fa-fw icon-{{link.icon}}"></i> <span>{{link.name}}</span>
+    </a>
+  </div>
+</div>
@@ -0,0 +1,34 @@
+.icon-event {
+  @extend .fa-calendar;
+}
+.icon-photos {
+  @extend .fa-photo;
+}
+.icon-edit {
+  @extend .fa-edit;
+}
+.icon-ok {
+  @extend .fa-check;
+}
+.icon-send {
+  @extend .fa-send-o;
+}
+.icon-menu-people {
+  @extend .fa-user;
+}
+.icon-forum {
+  @extend .fa-users;
+}
+.icon-new {
+  @extend .fa-file-o;
+}
+.icon-save {
+  @extend .fa-save;
+}
+
+.link-list-block {
+  a i {
+    line-height: 25px;
+    color: #949494;
+  }
+}
@@ -1,65 +0,0 @@
-import {TestComponentBuilder} from 'ng-forward/cjs/testing/test-component-builder';
-import {Pipe, Input, provide, Component} from 'ng-forward';
-import {provideFilters} from '../../../../spec/helpers';
-
-import {LinkListBlockComponent} from './link-list.component';
-
-const tcb = new TestComponentBuilder();
-
-const htmlTemplate: string = '<noosfero-link-list-block [block]="ctrl.block" [owner]="ctrl.owner"></noosfero-link-list-block>';
-
-
-describe("Components", () => {
-
-    describe("Link List Block Component", () => {
-
-        beforeEach(angular.mock.module("templates"));
-
-        it("receives the block and the owner as inputs", done => {
-
-            // Creating a container component (BlockContainerComponent) to include
-            // the component under test (Block)
-            @Component({ selector: 'test-container-component', template: htmlTemplate, directives: [LinkListBlockComponent] })
-            class BlockContainerComponent {
-                block = { type: 'Block' };
-                owner = { name: 'profile-name' };
-                constructor() {
-                }
-            }
-
-            // uses the TestComponentBuilder instance to initialize the component
-            // .overrideView(LinkListBlock, { template: 'asdasdasd', pipes: [NoosferoTemplate] })
-            tcb.createAsync(BlockContainerComponent).then(fixture => {
-                // and here we can inspect and run the test assertions
-                let myComponent: LinkListBlockComponent = fixture.componentInstance;
-
-                // assure the block object inside the Block matches
-                // the provided through the parent component
-                expect(myComponent.block.type).toEqual("Block");
-                expect(myComponent.owner.name).toEqual("profile-name");
-                done();
-            });
-        });
-
-
-        it("display links stored in block settings", done => {
-
-            @Component({
-                selector: 'test-container-component',
-                template: htmlTemplate,
-                directives: [LinkListBlockComponent],
-                providers: provideFilters("noosferoTemplateFilter")
-            })
-            class CustomBlockType {
-                block: any = { settings: { links: [{ name: 'link1', address: 'address1' }, { name: 'link2', address: 'address2' }] } };
-                owner: any = { name: 'profile-name' };
-            }
-            tcb.createAsync(CustomBlockType).then(fixture => {
-                expect(fixture.debugElement.queryAll(".link-list-block a").length).toEqual(2);
-                done();
-            });
-        });
-
-    });
-
-});
 \ No newline at end of file
@@ -1,20 +0,0 @@
-import {Component, Input} from "ng-forward";
-
-@Component({
-    selector: "noosfero-link-list-block",
-    templateUrl: "app/layout/blocks/link-list/link-list.html"
-})
-export class LinkListBlockComponent {
-
-    @Input() block: any;
-    @Input() owner: any;
-
-    links: any;
-
-    ngOnInit() {
-        if (this.block && this.block.settings) {
-            this.links = this.block.settings.links;
-        }
-    }
-
-}
@@ -1,7 +0,0 @@
-<div class="link-list-block">
-  <div ng-repeat="link in ctrl.links">
-    <a ng-href="{{link.address | noosferoTemplate:{profile: ctrl.owner.identifier} }}">
-      <i class="fa fa-fw icon-{{link.icon}}"></i> <span>{{link.name}}</span>
-    </a>
-  </div>
-</div>
@@ -1,34 +0,0 @@
-.icon-event {
-  @extend .fa-calendar;
-}
-.icon-photos {
-  @extend .fa-photo;
-}
-.icon-edit {
-  @extend .fa-edit;
-}
-.icon-ok {
-  @extend .fa-check;
-}
-.icon-send {
-  @extend .fa-send-o;
-}
-.icon-menu-people {
-  @extend .fa-user;
-}
-.icon-forum {
-  @extend .fa-users;
-}
-.icon-new {
-  @extend .fa-file-o;
-}
-.icon-save {
-  @extend .fa-save;
-}
-
-.link-list-block {
-  a i {
-    line-height: 25px;
-    color: #949494;
-  }
-}
@@ -1,2 +0,0 @@
-/* Module Index Entry - generated using the script npm run generate-index */
-export * from "./main-block.component";
@@ -1,40 +0,0 @@
-import {TestComponentBuilder} from 'ng-forward/cjs/testing/test-component-builder';
-import {Input, provide, Component, StateConfig} from 'ng-forward';
-
-import {MainBlockComponent} from './main-block.component';
-import {NoosferoApp} from '../../../index.module';
-
-const tcb = new TestComponentBuilder();
-
-const htmlTemplate: string = '<noosfero-main-block [block]="ctrl.block" [owner]="ctrl.owner"></noosfero-main-block>';
-
-describe("Components", () => {
-    describe("Main Block Component", () => {
-
-        // the karma preprocessor html2js transform the templates html into js files which put
-        // the templates to the templateCache into the module templates
-        // we need to load the module templates here as the template for the
-        // component Block will be load on our tests
-        beforeEach(angular.mock.module("templates"));
-
-        it("check if the main block has a tag with ui-view attribute", done => {
-
-            // Creating a container component (BlockContainerComponent) to include
-            // the component under test (Block)
-            @Component({ selector: 'test-container-component', template: htmlTemplate, directives: [MainBlockComponent] })
-            class BlockContainerComponent {
-            }
-
-            // uses the TestComponentBuilder instance to initialize the component
-            tcb.createAsync(BlockContainerComponent).then(fixture => {
-                // and here we can inspect and run the test assertions
-                // let myComponent: MainBlockComponent = fixture.componentInstance;
-
-                // assure the block object inside the Block matches
-                // the provided through the parent component
-                expect(fixture.debugElement.queryAll('[ui-view="mainBlockContent"]').length).toEqual(1);
-                done();
-            });
-        });
-    });
-});
 \ No newline at end of file
@@ -1,10 +0,0 @@
-import {Component, Input} from 'ng-forward';
-import {BlockComponent} from '../block.component';
-
-@Component({
-    selector: 'noosfero-main-block',
-    templateUrl: 'app/layout/blocks/main-block/main-block.html'
-})
-export class MainBlockComponent {
-
-}
@@ -1 +0,0 @@
-<div ui-view="mainBlockContent" autoscroll></div>
@@ -0,0 +1,2 @@
+/* Module Index Entry - generated using the script npm run generate-index */
+export * from "./main-block.component";
@@ -0,0 +1,40 @@
+import {TestComponentBuilder} from 'ng-forward/cjs/testing/test-component-builder';
+import {Input, provide, Component, StateConfig} from 'ng-forward';
+
+import {MainBlockComponent} from './main-block.component';
+import {NoosferoApp} from '../../../index.module';
+
+const tcb = new TestComponentBuilder();
+
+const htmlTemplate: string = '<noosfero-main-block [block]="ctrl.block" [owner]="ctrl.owner"></noosfero-main-block>';
+
+describe("Components", () => {
+    describe("Main Block Component", () => {
+
+        // the karma preprocessor html2js transform the templates html into js files which put
+        // the templates to the templateCache into the module templates
+        // we need to load the module templates here as the template for the
+        // component Block will be load on our tests
+        beforeEach(angular.mock.module("templates"));
+
+        it("check if the main block has a tag with ui-view attribute", done => {
+
+            // Creating a container component (BlockContainerComponent) to include
+            // the component under test (Block)
+            @Component({ selector: 'test-container-component', template: htmlTemplate, directives: [MainBlockComponent] })
+            class BlockContainerComponent {
+            }
+
+            // uses the TestComponentBuilder instance to initialize the component
+            tcb.createAsync(BlockContainerComponent).then(fixture => {
+                // and here we can inspect and run the test assertions
+                // let myComponent: MainBlockComponent = fixture.componentInstance;
+
+                // assure the block object inside the Block matches
+                // the provided through the parent component
+                expect(fixture.debugElement.queryAll('[ui-view="mainBlockContent"]').length).toEqual(1);
+                done();
+            });
+        });
+    });
+});
 \ No newline at end of file
@@ -0,0 +1,10 @@
+import {Component, Input} from 'ng-forward';
+import {BlockComponent} from '../block.component';
+
+@Component({
+    selector: 'noosfero-main-block',
+    templateUrl: 'app/layout/blocks/main/main-block.html'
+})
+export class MainBlockComponent {
+
+}
@@ -0,0 +1 @@
+<div ui-view="mainBlockContent" autoscroll></div>
@@ -1,2 +0,0 @@
-/* Module Index Entry - generated using the script npm run generate-index */
-export * from "./members-block.component";
@@ -1,49 +0,0 @@
-import {TestComponentBuilder} from 'ng-forward/cjs/testing/test-component-builder';
-import {Provider, Input, provide, Component} from 'ng-forward';
-import {MembersBlockComponent} from './members-block.component';
-import {ComponentTestHelper, createClass} from './../../../../spec/component-test-helper';
-
-const htmlTemplate: string = '<noosfero-members-block [block]="ctrl.block" [owner]="ctrl.owner"></noosfero-members-block>';
-
-const tcb = new TestComponentBuilder();
-
-describe("Components", () => {
-    describe("Members Block Component", () => {
-
-        let helper: ComponentTestHelper;
-
-        let providers = [
-            new Provider('ProfileService', {
-                useValue: {
-                    getProfileMembers: (profileId: number, filters: any): any => {
-                        return Promise.resolve({ data: { people: [{ identifier: "person1" }] } });
-                    }
-                }
-            }),
-        ];
-
-        beforeEach(angular.mock.module("templates"));
-
-        beforeEach( (done) => {
-            // Custom properties for the component
-            let properties = { owner: { id: 1 } };
-            // Create the component bed for the test.
-            let cls = createClass({
-                template: htmlTemplate,
-                directives: [MembersBlockComponent],
-                providers: providers,
-                properties: properties
-            });
-            helper = new ComponentTestHelper(cls, done);
-        });
-
-        it("get members of the block owner", () => {
-            expect(helper.component.members[0].identifier).toEqual("person1");
-        });
-
-        it("render the profile image for each member", () => {
-            expect(helper.all("noosfero-profile-image").length).toEqual(1);
-        });
-
-    });
-});
 \ No newline at end of file
@@ -1,25 +0,0 @@
-import {Input, Inject, Component} from "ng-forward";
-import {ProfileService} from "../../../../lib/ng-noosfero-api/http/profile.service";
-
-@Component({
-    selector: "noosfero-members-block",
-    templateUrl: 'app/layout/blocks/members-block/members-block.html',
-})
-@Inject(ProfileService)
-export class MembersBlockComponent {
-
-    @Input() block: noosfero.Block;
-    @Input() owner: noosfero.Profile;
-
-    members: any = [];
-
-    constructor(private profileService: ProfileService) {
-
-    }
-
-    ngOnInit() {
-        this.profileService.getProfileMembers(this.owner.id, { per_page: 6 }).then((response: any) => {
-            this.members = response.data.people;
-        });
-    }
-}
@@ -1,5 +0,0 @@
-<div class="members-block">
-  <a ng-repeat="member in ctrl.members" ui-sref="main.profile.home({profile: member.identifier})" class="member">
-    <noosfero-profile-image [profile]="member"></noosfero-profile-image>
-  </a>
-</div>
@@ -1,17 +0,0 @@
-.members-block {
-  .member {
-    img, i.profile-image {
-      width: 60px;
-    }
-    img {
-      display: inline-block;
-      vertical-align: top;
-    }
-    i.profile-image {
-        text-align: center;
-        background-color: #889DB1;
-        color: #F1F1F1;
-        font-size: 4.5em;
-    }
-  }
-}
@@ -0,0 +1,2 @@
+/* Module Index Entry - generated using the script npm run generate-index */
+export * from "./members-block.component";
@@ -0,0 +1,49 @@
+import {TestComponentBuilder} from 'ng-forward/cjs/testing/test-component-builder';
+import {Provider, Input, provide, Component} from 'ng-forward';
+import {MembersBlockComponent} from './members-block.component';
+import {ComponentTestHelper, createClass} from './../../../../spec/component-test-helper';
+
+const htmlTemplate: string = '<noosfero-members-block [block]="ctrl.block" [owner]="ctrl.owner"></noosfero-members-block>';
+
+const tcb = new TestComponentBuilder();
+
+describe("Components", () => {
+    describe("Members Block Component", () => {
+
+        let helper: ComponentTestHelper<MembersBlockComponent>;
+
+        let providers = [
+            new Provider('ProfileService', {
+                useValue: {
+                    getProfileMembers: (profileId: number, filters: any): any => {
+                        return Promise.resolve({ data: { people: [{ identifier: "person1" }] } });
+                    }
+                }
+            }),
+        ];
+
+        beforeEach(angular.mock.module("templates"));
+
+        beforeEach((done) => {
+            // Custom properties for the component
+            let properties = { owner: { id: 1 } };
+            // Create the component bed for the test.
+            let cls = createClass({
+                template: htmlTemplate,
+                directives: [MembersBlockComponent],
+                providers: providers,
+                properties: properties
+            });
+            helper = new ComponentTestHelper<MembersBlockComponent>(cls, done);
+        });
+
+        it("get members of the block owner", () => {
+            expect(helper.component.members[0].identifier).toEqual("person1");
+        });
+
+        it("render the profile image for each member", () => {
+            expect(helper.all("noosfero-profile-image").length).toEqual(1);
+        });
+
+    });
+});
@@ -0,0 +1,25 @@
+import {Input, Inject, Component} from "ng-forward";
+import {ProfileService} from "../../../../lib/ng-noosfero-api/http/profile.service";
+
+@Component({
+    selector: "noosfero-members-block",
+    templateUrl: 'app/layout/blocks/members/members-block.html',
+})
+@Inject(ProfileService)
+export class MembersBlockComponent {
+
+    @Input() block: noosfero.Block;
+    @Input() owner: noosfero.Profile;
+
+    members: any = [];
+
+    constructor(private profileService: ProfileService) {
+
+    }
+
+    ngOnInit() {
+        this.profileService.getProfileMembers(this.owner.id, { per_page: 6 }).then((response: any) => {
+            this.members = response.data.people;
+        });
+    }
+}
@@ -0,0 +1,5 @@
+<div class="members-block">
+  <a ng-repeat="member in ctrl.members" ui-sref="main.profile.home({profile: member.identifier})" class="member">
+    <noosfero-profile-image [profile]="member"></noosfero-profile-image>
+  </a>
+</div>
@@ -0,0 +1,17 @@
+.members-block {
+  .member {
+    img, i.profile-image {
+      width: 60px;
+    }
+    img {
+      display: inline-block;
+      vertical-align: top;
+    }
+    i.profile-image {
+        text-align: center;
+        background-color: #889DB1;
+        color: #F1F1F1;
+        font-size: 4.5em;
+    }
+  }
+}
@@ -1,2 +0,0 @@
-/* Module Index Entry - generated using the script npm run generate-index */
-export * from "./people-block.component";
@@ -1,72 +0,0 @@
-import {TestComponentBuilder} from 'ng-forward/cjs/testing/test-component-builder';
-import {Provider} from 'ng-forward';
-import {ComponentTestHelper, createClass} from './../../../../spec/component-test-helper';
-import {providers} from 'ng-forward/cjs/testing/providers';
-import {PeopleBlockComponent} from './people-block.component';
-
-const htmlTemplate: string = '<noosfero-people-block [block]="ctrl.block" [owner]="ctrl.owner"></noosfero-people-block>';
-
-describe("Components", () => {
-
-    describe("People Block Component", () => {
-        let serviceMock = {
-                    getEnvironmentPeople: (filters: any): any => {
-                        return Promise.resolve([{ identifier: "person1" }]);
-                    }
-                };
-        let providers = [new Provider('EnvironmentService', { useValue: serviceMock })];
-
-        let helper: ComponentTestHelper;
-
-        beforeEach( angular.mock.module("templates") );
-
-        /**
-         * The beforeEach procedure will initialize the helper and parse
-         * the component according to the given providers. Unfortunetly, in
-         * this mode, the providers and properties given to the construtor
-         * can't be overriden.
-        */
-        beforeEach( (done) => {
-            // Create the component bed for the test. Optionally, this could be done
-            // in each test if one needs customization of these parameters per test
-            let cls = createClass({
-                template: htmlTemplate,
-                directives: [PeopleBlockComponent],
-                providers: providers,
-                properties: {}
-            });
-            helper = new ComponentTestHelper(cls, done);
-        });
-
-        /**
-         * By default the helper will have the component, with all properties 
-         * ready to be used. Here the mock provider 'EnvironmentService' will 
-         * return the given array with one person.
-         */
-        it("get block with one people", () => {
-            expect(helper.component.people[0].identifier).toEqual("person1");
-        });
-
-        /**
-         * There are helper functions to access the JQuery DOM like this.
-         */
-        it("render the profile image for each person", () => {
-            expect(helper.all("noosfero-profile-image").length).toEqual(1);
-        });
-
-        /**
-         * The main debugElement element is also available
-         */
-        it("render the main noosfero people block", () => {
-            expect(helper.debugElement.children().length).toEqual(1, "The people-block should have a div children");
-        });
-
-        /**
-         * Just another example of a JQuery DOM helper function
-         */
-        it("render the noosfero people block div", () => {
-            let div = helper.findChildren("noosfero-people-block", "div");
-            expect(div.className).toBe('people-block', "The class should be people-block");
-        });
-    });
-});
 \ No newline at end of file
@@ -1,26 +0,0 @@
-import {Input, Inject, Component} from "ng-forward";
-import {EnvironmentService} from "../../../../lib/ng-noosfero-api/http/environment.service";
-
-@Component({
-    selector: "noosfero-people-block",
-    templateUrl: 'app/layout/blocks/people-block/people-block.html',
-})
-@Inject(EnvironmentService)
-export class PeopleBlockComponent {
-
-    @Input() block: noosfero.Block;
-    @Input() owner: noosfero.Environment;
-    private type: string = "people";
-
-    people: noosfero.Person[] = [];
-
-    constructor(private environmentService: EnvironmentService) {
-    }
-
-    ngOnInit() {
-        this.environmentService.getEnvironmentPeople({ limit: '6' }).then((people: noosfero.Person[]) => {
-            this.people = people;
-        });
-    }
-
-}
@@ -1,5 +0,0 @@
-<div class="{{ctrl.type}}-block">
-  <a ng-repeat="person in ctrl.people" ui-sref="main.profile.home({profile: person.identifier})" class="person">
-    <noosfero-profile-image [profile]="person"></noosfero-profile-image>
-  </a>
-</div>
@@ -1,17 +0,0 @@
-.members-block {
-  .member {
-    img, i.profile-image {
-      width: 60px;
-    }
-    img {
-      display: inline-block;
-      vertical-align: top;
-    }
-    i.profile-image {
-        text-align: center;
-        background-color: #889DB1;
-        color: #F1F1F1;
-        font-size: 4.5em;
-    }
-  }
-}
@@ -0,0 +1,2 @@
+/* Module Index Entry - generated using the script npm run generate-index */
+export * from "./people-block.component";
@@ -0,0 +1,72 @@
+import {TestComponentBuilder} from 'ng-forward/cjs/testing/test-component-builder';
+import {Provider} from 'ng-forward';
+import {ComponentTestHelper, createClass} from './../../../../spec/component-test-helper';
+import {providers} from 'ng-forward/cjs/testing/providers';
+import {PeopleBlockComponent} from './people-block.component';
+
+const htmlTemplate: string = '<noosfero-people-block [block]="ctrl.block" [owner]="ctrl.owner"></noosfero-people-block>';
+
+describe("Components", () => {
+
+    describe("People Block Component", () => {
+        let serviceMock = {
+            getEnvironmentPeople: (filters: any): any => {
+                return Promise.resolve([{ identifier: "person1" }]);
+            }
+        };
+        let providers = [new Provider('EnvironmentService', { useValue: serviceMock })];
+
+        let helper: ComponentTestHelper<PeopleBlockComponent>;
+
+        beforeEach(angular.mock.module("templates"));
+
+        /**
+         * The beforeEach procedure will initialize the helper and parse
+         * the component according to the given providers. Unfortunetly, in
+         * this mode, the providers and properties given to the construtor
+         * can't be overriden.
+        */
+        beforeEach((done) => {
+            // Create the component bed for the test. Optionally, this could be done
+            // in each test if one needs customization of these parameters per test
+            let cls = createClass({
+                template: htmlTemplate,
+                directives: [PeopleBlockComponent],
+                providers: providers,
+                properties: {}
+            });
+            helper = new ComponentTestHelper<PeopleBlockComponent>(cls, done);
+        });
+
+        /**
+         * By default the helper will have the component, with all properties
+         * ready to be used. Here the mock provider 'EnvironmentService' will
+         * return the given array with one person.
+         */
+        it("get block with one people", () => {
+            expect(helper.component.people[0].identifier).toEqual("person1");
+        });
+
+        /**
+         * There are helper functions to access the JQuery DOM like this.
+         */
+        it("render the profile image for each person", () => {
+            expect(helper.all("noosfero-profile-image").length).toEqual(1);
+        });
+
+        /**
+         * The main debugElement element is also available
+         */
+        it("render the main noosfero people block", () => {
+            expect(helper.debugElement.children().length).toEqual(1, "The people-block should have a div children");
+        });
+
+        /**
+         * Just another example of a JQuery DOM helper function
+         */
+        it("render the noosfero people block div", () => {
+            let div = helper.findChildren("noosfero-people-block", "div");
+            expect(div.className).toBe('people-block', "The class should be people-block");
+        });
+    });
+});
@@ -0,0 +1,26 @@
+import {Input, Inject, Component} from "ng-forward";
+import {EnvironmentService} from "../../../../lib/ng-noosfero-api/http/environment.service";
+
+@Component({
+    selector: "noosfero-people-block",
+    templateUrl: 'app/layout/blocks/people/people-block.html',
+})
+@Inject(EnvironmentService)
+export class PeopleBlockComponent {
+
+    @Input() block: noosfero.Block;
+    @Input() owner: noosfero.Environment;
+    private type: string = "people";
+
+    people: noosfero.Person[] = [];
+
+    constructor(private environmentService: EnvironmentService) {
+    }
+
+    ngOnInit() {
+        this.environmentService.getEnvironmentPeople({ limit: '6' }).then((people: noosfero.Person[]) => {
+            this.people = people;
+        });
+    }
+
+}
@@ -0,0 +1,5 @@
+<div class="{{ctrl.type}}-block">
+  <a ng-repeat="person in ctrl.people" ui-sref="main.profile.home({profile: person.identifier})" class="person">
+    <noosfero-profile-image [profile]="person"></noosfero-profile-image>
+  </a>
+</div>
@@ -0,0 +1,17 @@
+.members-block {
+  .member {
+    img, i.profile-image {
+      width: 60px;
+    }
+    img {
+      display: inline-block;
+      vertical-align: top;
+    }
+    i.profile-image {
+        text-align: center;
+        background-color: #889DB1;
+        color: #F1F1F1;
+        font-size: 4.5em;
+    }
+  }
+}
@@ -1,2 +0,0 @@
-/* Module Index Entry - generated using the script npm run generate-index */
-export * from "./profile-image-block.component";
@@ -1,46 +0,0 @@
-import {TestComponentBuilder, ComponentFixture} from 'ng-forward/cjs/testing/test-component-builder';
-import {Pipe, Input, provide, Component} from 'ng-forward';
-
-import {ProfileImageBlockComponent} from './profile-image-block.component';
-
-import * as helpers from "./../../../../spec/helpers";
-
-const tcb = new TestComponentBuilder();
-
-const htmlTemplate: string = '<noosfero-profile-image-block  [block]="ctrl.block" [owner]="ctrl.owner"></noosfero-profile-image-block>';
-
-describe("Components", () => {
-
-    describe("Profile Image Block Component", () => {
-
-        beforeEach(angular.mock.module("templates"));
-
-        @Component({
-            selector: 'test-container-component',
-            template: htmlTemplate,
-            directives: [ProfileImageBlockComponent],
-            providers: helpers.provideFilters("translateFilter")
-        })
-        class BlockContainerComponent {
-            block = { type: 'Block' };
-            owner = { name: 'profile-name' };
-            constructor() {
-            }
-        }
-
-        it("show image if present", () => {
-            helpers.tcb.createAsync(BlockContainerComponent).then(fixture => {
-                let elProfile = fixture.debugElement.componentViewChildren[0];
-                expect(elProfile.query('div.profile-image-block').length).toEqual(1);
-            });
-        });
-
-        it("has link to the profile", () => {
-            helpers.tcb.createAsync(BlockContainerComponent).then(fixture => {
-                let elProfile = fixture.debugElement.componentViewChildren[0];
-                expect(elProfile.query('a.settings-link').length).toEqual(1);
-            });
-        });
-
-    });
-});
@@ -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");
1	-<% if params[:angular_theme_old] \|\| request.fullpath.start_with?('/myprofile') %>	1	+<% if params[:angular_theme_old] %>
2	<%= render file: Rails.root.join("app/views/layouts/application-ng.html.erb"), use_full_path: false %>	2	<%= render file: Rails.root.join("app/views/layouts/application-ng.html.erb"), use_full_path: false %>
3	<% else %>	3	<% else %>
4	<%= from_theme_include(current_theme, "index") %>	4	<%= from_theme_include(current_theme, "index") %>
	@@ -1,55 +0,0 @@	@@ -1,55 +0,0 @@
1	-import {quickCreateComponent} from "../../spec/helpers";
2	-import {BasicEditorComponent} from "./basic-editor.component";
3	-
4	-
5	-describe("Article BasicEditor", () => {
6	-
7	- let $rootScope: ng.IRootScopeService;
8	- let $q: ng.IQService;
9	- let articleServiceMock: any;
10	- let profileServiceMock: any;
11	- let $state: any;
12	- let profile = { id: 1 };
13	- let notification: any;
14	-
15	-
16	- beforeEach(inject((_$rootScope_: ng.IRootScopeService, _$q_: ng.IQService) => {
17	- $rootScope = _$rootScope_;
18	- $q = _$q_;
19	- }));
20	-
21	- beforeEach(() => {
22	- $state = jasmine.createSpyObj("$state", ["transitionTo"]);
23	- notification = jasmine.createSpyObj("notification", ["success"]);
24	- profileServiceMock = jasmine.createSpyObj("profileServiceMock", ["getCurrentProfile"]);
25	- articleServiceMock = jasmine.createSpyObj("articleServiceMock", ["createInProfile"]);
26	-
27	- let getCurrentProfileResponse = $q.defer();
28	- getCurrentProfileResponse.resolve(profile);
29	-
30	- let articleCreate = $q.defer();
31	- articleCreate.resolve({ data: { path: "path", profile: { identifier: "profile" } } });
32	-
33	- profileServiceMock.getCurrentProfile = jasmine.createSpy("getCurrentProfile").and.returnValue(getCurrentProfileResponse.promise);
34	- articleServiceMock.createInProfile = jasmine.createSpy("createInProfile").and.returnValue(articleCreate.promise);
35	- });
36	-
37	- it("create an article in the current profile when save", done => {
38	- let component: BasicEditorComponent = new BasicEditorComponent(articleServiceMock, profileServiceMock, $state, notification);
39	- component.save();
40	- $rootScope.$apply();
41	- expect(profileServiceMock.getCurrentProfile).toHaveBeenCalled();
42	- expect(articleServiceMock.createInProfile).toHaveBeenCalledWith(profile, component.article);
43	- done();
44	- });
45	-
46	- it("got to the new article page and display an alert when saving sucessfully", done => {
47	- let component: BasicEditorComponent = new BasicEditorComponent(articleServiceMock, profileServiceMock, $state, notification);
48	- component.save();
49	- $rootScope.$apply();
50	- expect($state.transitionTo).toHaveBeenCalledWith("main.profile.page", { page: "path", profile: "profile" });
51	- expect(notification.success).toHaveBeenCalled();
52	- done();
53	- });
54	-
55	-});
	@@ -1,35 +0,0 @@	@@ -1,35 +0,0 @@
1	-import {StateConfig, Component, Inject, provide} from 'ng-forward';
2	-import {ArticleService} from "../../lib/ng-noosfero-api/http/article.service";
3	-import {ProfileService} from "../../lib/ng-noosfero-api/http/profile.service";
4	-import {NotificationService} from "../shared/services/notification.service.ts";
5	-
6	-@Component({
7	- selector: 'article-basic-editor',
8	- templateUrl: "app/article/basic-editor.html",
9	- providers: [
10	- provide('articleService', { useClass: ArticleService }),
11	- provide('profileService', { useClass: ProfileService }),
12	- provide('notification', { useClass: NotificationService })
13	- ]
14	-})
15	-@Inject(ArticleService, ProfileService, "$state", NotificationService)
16	-export class BasicEditorComponent {
17	-
18	- article: noosfero.Article = <noosfero.Article>{};
19	-
20	- constructor(private articleService: ArticleService,
21	- private profileService: ProfileService,
22	- private $state: ng.ui.IStateService,
23	- private notification: NotificationService) { }
24	-
25	- save() {
26	- this.profileService.getCurrentProfile().then((profile: noosfero.Profile) => {
27	- return this.articleService.createInProfile(profile, this.article);
28	- }).then((response: noosfero.RestResult<noosfero.Article>) => {
29	- let article = (<noosfero.Article>response.data);
30	- this.$state.transitionTo('main.profile.page', { page: article.path, profile: article.profile.identifier });
31	- this.notification.success({ title: "Good job!", message: "Article saved!" });
32	- });
33	- }
34	-
35	-}
	@@ -1,11 +0,0 @@	@@ -1,11 +0,0 @@
1	-<form>
2	- <div class="form-group">
3	- <label for="titleInput">Title</label>
4	- <input type="text" class="form-control" id="titleInput" placeholder="title" ng-model="vm.article.name">
5	- </div>
6	- <div class="form-group">
7	- <label for="bodyInput">Text</label>
8	- <textarea class="form-control" id="bodyInput" rows="10" ng-model="vm.article.body"></textarea>
9	- </div>
10	- <button type="submit" class="btn btn-default" ng-click="vm.save()">Save</button>
11	-</form>
@@ -0,0 +1,27 @@		@@ -0,0 +1,27 @@
	1	+import {Component, Input, Inject} from 'ng-forward';
	2	+
	3	+@Component({
	4	+ selector: 'article-editor',
	5	+ template: "not-used"
	6	+})
	7	+@Inject("$element", "$scope", "$injector", "$compile")
	8	+export class ArticleEditorComponent {
	9	+
	10	+ @Input() article: noosfero.Article;
	11	+
	12	+ constructor(
	13	+ private $element: any,
	14	+ private $scope: ng.IScope,
	15	+ private $injector: ng.auto.IInjectorService,
	16	+ private $compile: ng.ICompileService) { }
	17	+
	18	+ ngOnInit() {
	19	+ let articleType = this.article.type.replace(/::/, '');
	20	+ let specificDirective = `${articleType.charAt(0).toLowerCase()}${articleType.substring(1)}Editor`;
	21	+ let directiveName = "article-basic-editor";
	22	+ if (this.$injector.has(specificDirective + 'Directive')) {
	23	+ directiveName = specificDirective.replace(/([a-z])([A-Z])/g, '$1-$2').toLowerCase();
	24	+ }
	25	+ this.$element.replaceWith(this.$compile('<' + directiveName + ' [article]="ctrl.article"></' + directiveName + '>')(this.$scope));
	26	+ }
	27	+}
@@ -0,0 +1,10 @@		@@ -0,0 +1,10 @@
	1	+import {Component, Input} from 'ng-forward';
	2	+
	3	+@Component({
	4	+ selector: 'article-basic-editor',
	5	+ templateUrl: "app/article/cms/basic-editor/basic-editor.html"
	6	+})
	7	+export class BasicEditorComponent {
	8	+
	9	+ @Input() article: noosfero.Article;
	10	+}