10 files changed, 255 insertions, 15 deletions

diff --git a/client/src/app/shared/forms/form-validators/video-abuse-validators.service.ts b/client/src/app/shared/forms/form-validators/video-abuse-validators.service.ts
index 6e9806611..fcc966b84 100644
--- a/client/src/app/shared/forms/form-validators/video-abuse-validators.service.ts
+++ b/client/src/app/shared/forms/form-validators/video-abuse-validators.service.ts
@@ -10,20 +10,20 @@ export class VideoAbuseValidatorsService {
 
   constructor (private i18n: I18n) {
     this.VIDEO_ABUSE_REASON = {
-      VALIDATORS: [ Validators.required, Validators.minLength(2), Validators.maxLength(300) ],
+      VALIDATORS: [ Validators.required, Validators.minLength(2), Validators.maxLength(3000) ],
       MESSAGES: {
         'required': this.i18n('Report reason is required.'),
         'minlength': this.i18n('Report reason must be at least 2 characters long.'),
-        'maxlength': this.i18n('Report reason cannot be more than 300 characters long.')
+        'maxlength': this.i18n('Report reason cannot be more than 3000 characters long.')
       }
     }
 
     this.VIDEO_ABUSE_MODERATION_COMMENT = {
-      VALIDATORS: [ Validators.required, Validators.minLength(2), Validators.maxLength(300) ],
+      VALIDATORS: [ Validators.required, Validators.minLength(2), Validators.maxLength(3000) ],
       MESSAGES: {
         'required': this.i18n('Moderation comment is required.'),
         'minlength': this.i18n('Moderation comment must be at least 2 characters long.'),
-        'maxlength': this.i18n('Moderation comment cannot be more than 300 characters long.')
+        'maxlength': this.i18n('Moderation comment cannot be more than 3000 characters long.')
       }
     }
   }
diff --git a/client/src/app/shared/forms/markdown-textarea.component.ts b/client/src/app/shared/forms/markdown-textarea.component.ts
index b99169ed2..e87aca0d4 100644
--- a/client/src/app/shared/forms/markdown-textarea.component.ts
+++ b/client/src/app/shared/forms/markdown-textarea.component.ts
@@ -1,10 +1,10 @@
 import { debounceTime, distinctUntilChanged } from 'rxjs/operators'
 import { Component, forwardRef, Input, OnInit } from '@angular/core'
 import { ControlValueAccessor, NG_VALUE_ACCESSOR } from '@angular/forms'
-import { MarkdownService } from '@app/videos/shared'
 import { Subject } from 'rxjs'
 import truncate from 'lodash-es/truncate'
 import { ScreenService } from '@app/shared/misc/screen.service'
+import { MarkdownService } from '@app/shared/renderer'
 
 @Component({
   selector: 'my-markdown-textarea',
diff --git a/client/src/app/shared/misc/help.component.ts b/client/src/app/shared/misc/help.component.ts
index ba0452e77..f3426f70f 100644
--- a/client/src/app/shared/misc/help.component.ts
+++ b/client/src/app/shared/misc/help.component.ts
@@ -1,6 +1,6 @@
 import { Component, Input, OnChanges, OnInit } from '@angular/core'
-import { MarkdownService } from '@app/videos/shared'
 import { I18n } from '@ngx-translate/i18n-polyfill'
+import { MarkdownService } from '@app/shared/renderer'
 
 @Component({
   selector: 'my-help',
diff --git a/client/src/app/shared/misc/utils.ts b/client/src/app/shared/misc/utils.ts
index 78e8e9682..7cc6055c2 100644
--- a/client/src/app/shared/misc/utils.ts
+++ b/client/src/app/shared/misc/utils.ts
@@ -102,12 +102,18 @@ function objectToFormData (obj: any, form?: FormData, namespace?: string) {
   return fd
 }
 
-function lineFeedToHtml (obj: any, keyToNormalize: string) {
+function objectLineFeedToHtml (obj: any, keyToNormalize: string) {
   return immutableAssign(obj, {
-    [keyToNormalize]: obj[keyToNormalize].replace(/\r?\n|\r/g, '<br />')
+    [keyToNormalize]: lineFeedToHtml(obj[keyToNormalize])
   })
 }
 
+function lineFeedToHtml (text: string) {
+  if (!text) return text
+
+  return text.replace(/\r?\n|\r/g, '<br />')
+}
+
 function removeElementFromArray <T> (arr: T[], elem: T) {
   const index = arr.indexOf(elem)
   if (index !== -1) arr.splice(index, 1)
@@ -131,6 +137,7 @@ function scrollToTop () {
 export {
   sortBy,
   durationToString,
+  lineFeedToHtml,
   objectToUrlEncoded,
   getParameterByName,
   populateAsyncUserVideoChannels,
@@ -138,7 +145,7 @@ export {
   dateToHuman,
   immutableAssign,
   objectToFormData,
-  lineFeedToHtml,
+  objectLineFeedToHtml,
   removeElementFromArray,
   scrollToTop
 }
diff --git a/client/src/app/shared/renderer/html-renderer.service.ts b/client/src/app/shared/renderer/html-renderer.service.ts
new file mode 100644
index 000000000..d49df9b6d
--- /dev/null
+++ b/client/src/app/shared/renderer/html-renderer.service.ts
@@ -0,0 +1,35 @@
+import { Injectable } from '@angular/core'
+import { LinkifierService } from '@app/shared/renderer/linkifier.service'
+import * as sanitizeHtml from 'sanitize-html'
+
+@Injectable()
+export class HtmlRendererService {
+
+  constructor (private linkifier: LinkifierService) {
+
+  }
+
+  toSafeHtml (text: string) {
+    // Convert possible markdown to html
+    const html = this.linkifier.linkify(text)
+
+    return sanitizeHtml(html, {
+      allowedTags: [ 'a', 'p', 'span', 'br' ],
+      allowedSchemes: [ 'http', 'https' ],
+      allowedAttributes: {
+        'a': [ 'href', 'class', 'target' ]
+      },
+      transformTags: {
+        a: (tagName, attribs) => {
+          return {
+            tagName,
+            attribs: Object.assign(attribs, {
+              target: '_blank',
+              rel: 'noopener noreferrer'
+            })
+          }
+        }
+      }
+    })
+  }
+}
diff --git a/client/src/app/shared/renderer/index.ts b/client/src/app/shared/renderer/index.ts
new file mode 100644
index 000000000..39202b385
--- /dev/null
+++ b/client/src/app/shared/renderer/index.ts
@@ -0,0 +1,3 @@
+export * from './html-renderer.service'
+export * from './linkifier.service'
+export * from './markdown.service'
diff --git a/client/src/app/shared/renderer/linkifier.service.ts b/client/src/app/shared/renderer/linkifier.service.ts
new file mode 100644
index 000000000..2529c9eaf
--- /dev/null
+++ b/client/src/app/shared/renderer/linkifier.service.ts
@@ -0,0 +1,115 @@
+import { Injectable } from '@angular/core'
+import { getAbsoluteAPIUrl } from '@app/shared/misc/utils'
+// FIXME: use @types/linkify when https://github.com/DefinitelyTyped/DefinitelyTyped/pull/29682/files is merged?
+const linkify = require('linkifyjs')
+const linkifyHtml = require('linkifyjs/html')
+
+@Injectable()
+export class LinkifierService {
+
+  static CLASSNAME = 'linkified'
+
+  private linkifyOptions = {
+    className: {
+      mention: LinkifierService.CLASSNAME + '-mention',
+      url: LinkifierService.CLASSNAME + '-url'
+    }
+  }
+
+  constructor () {
+    // Apply plugin
+    this.mentionWithDomainPlugin(linkify)
+  }
+
+  linkify (text: string) {
+    return linkifyHtml(text, this.linkifyOptions)
+  }
+
+  private mentionWithDomainPlugin (linkify: any) {
+    const TT = linkify.scanner.TOKENS // Text tokens
+    const { TOKENS: MT, State } = linkify.parser // Multi tokens, state
+    const MultiToken = MT.Base
+    const S_START = linkify.parser.start
+
+    const TT_AT = TT.AT
+    const TT_DOMAIN = TT.DOMAIN
+    const TT_LOCALHOST = TT.LOCALHOST
+    const TT_NUM = TT.NUM
+    const TT_COLON = TT.COLON
+    const TT_SLASH = TT.SLASH
+    const TT_TLD = TT.TLD
+    const TT_UNDERSCORE = TT.UNDERSCORE
+    const TT_DOT = TT.DOT
+
+    function MENTION (this: any, value: any) {
+      this.v = value
+    }
+
+    linkify.inherits(MultiToken, MENTION, {
+      type: 'mentionWithDomain',
+      isLink: true,
+      toHref () {
+        return getAbsoluteAPIUrl() + '/services/redirect/accounts/' + this.toString().substr(1)
+      }
+    })
+
+    const S_AT = S_START.jump(TT_AT) // @
+    const S_AT_SYMS = new State()
+    const S_MENTION = new State(MENTION)
+    const S_MENTION_DIVIDER = new State()
+    const S_MENTION_DIVIDER_SYMS = new State()
+
+    // @_,
+    S_AT.on(TT_UNDERSCORE, S_AT_SYMS)
+
+    //  @_*
+    S_AT_SYMS
+      .on(TT_UNDERSCORE, S_AT_SYMS)
+      .on(TT_DOT, S_AT_SYMS)
+
+    // Valid mention (not made up entirely of symbols)
+    S_AT
+      .on(TT_DOMAIN, S_MENTION)
+      .on(TT_LOCALHOST, S_MENTION)
+      .on(TT_TLD, S_MENTION)
+      .on(TT_NUM, S_MENTION)
+
+    S_AT_SYMS
+      .on(TT_DOMAIN, S_MENTION)
+      .on(TT_LOCALHOST, S_MENTION)
+      .on(TT_TLD, S_MENTION)
+      .on(TT_NUM, S_MENTION)
+
+    // More valid mentions
+    S_MENTION
+      .on(TT_DOMAIN, S_MENTION)
+      .on(TT_LOCALHOST, S_MENTION)
+      .on(TT_TLD, S_MENTION)
+      .on(TT_COLON, S_MENTION)
+      .on(TT_NUM, S_MENTION)
+      .on(TT_UNDERSCORE, S_MENTION)
+
+    // Mention with a divider
+    S_MENTION
+      .on(TT_AT, S_MENTION_DIVIDER)
+      .on(TT_SLASH, S_MENTION_DIVIDER)
+      .on(TT_DOT, S_MENTION_DIVIDER)
+
+    // Mention _ trailing stash plus syms
+    S_MENTION_DIVIDER.on(TT_UNDERSCORE, S_MENTION_DIVIDER_SYMS)
+    S_MENTION_DIVIDER_SYMS.on(TT_UNDERSCORE, S_MENTION_DIVIDER_SYMS)
+
+    // Once we get a word token, mentions can start up again
+    S_MENTION_DIVIDER
+      .on(TT_DOMAIN, S_MENTION)
+      .on(TT_LOCALHOST, S_MENTION)
+      .on(TT_TLD, S_MENTION)
+      .on(TT_NUM, S_MENTION)
+
+    S_MENTION_DIVIDER_SYMS
+      .on(TT_DOMAIN, S_MENTION)
+      .on(TT_LOCALHOST, S_MENTION)
+      .on(TT_TLD, S_MENTION)
+      .on(TT_NUM, S_MENTION)
+  }
+}
diff --git a/client/src/app/shared/renderer/markdown.service.ts b/client/src/app/shared/renderer/markdown.service.ts
new file mode 100644
index 000000000..07017eca5
--- /dev/null
+++ b/client/src/app/shared/renderer/markdown.service.ts
@@ -0,0 +1,79 @@
+import { Injectable } from '@angular/core'
+
+import * as MarkdownIt from 'markdown-it'
+
+@Injectable()
+export class MarkdownService {
+  static TEXT_RULES = [
+    'linkify',
+    'autolink',
+    'emphasis',
+    'link',
+    'newline',
+    'list'
+  ]
+  static ENHANCED_RULES = MarkdownService.TEXT_RULES.concat([ 'image' ])
+
+  private textMarkdownIt: MarkdownIt.MarkdownIt
+  private enhancedMarkdownIt: MarkdownIt.MarkdownIt
+
+  constructor () {
+    this.textMarkdownIt = this.createMarkdownIt(MarkdownService.TEXT_RULES)
+    this.enhancedMarkdownIt = this.createMarkdownIt(MarkdownService.ENHANCED_RULES)
+  }
+
+  textMarkdownToHTML (markdown: string) {
+    if (!markdown) return ''
+
+    const html = this.textMarkdownIt.render(markdown)
+    return this.avoidTruncatedTags(html)
+  }
+
+  enhancedMarkdownToHTML (markdown: string) {
+    if (!markdown) return ''
+
+    const html = this.enhancedMarkdownIt.render(markdown)
+    return this.avoidTruncatedTags(html)
+  }
+
+  private createMarkdownIt (rules: string[]) {
+    const markdownIt = new MarkdownIt('zero', { linkify: true, breaks: true })
+
+    for (let rule of rules) {
+      markdownIt.enable(rule)
+    }
+
+    this.setTargetToLinks(markdownIt)
+
+    return markdownIt
+  }
+
+  private setTargetToLinks (markdownIt: MarkdownIt.MarkdownIt) {
+    // Snippet from markdown-it documentation: https://github.com/markdown-it/markdown-it/blob/master/docs/architecture.md#renderer
+    const defaultRender = markdownIt.renderer.rules.link_open || function (tokens, idx, options, env, self) {
+      return self.renderToken(tokens, idx, options)
+    }
+
+    markdownIt.renderer.rules.link_open = function (tokens, index, options, env, self) {
+      const token = tokens[index]
+
+      const targetIndex = token.attrIndex('target')
+      if (targetIndex < 0) token.attrPush([ 'target', '_blank' ])
+      else token.attrs[targetIndex][1] = '_blank'
+
+      const relIndex = token.attrIndex('rel')
+      if (relIndex < 0) token.attrPush([ 'rel', 'noopener noreferrer' ])
+      else token.attrs[relIndex][1] = 'noopener noreferrer'
+
+      // pass token to default renderer.
+      return defaultRender(tokens, index, options, env, self)
+    }
+  }
+
+  private avoidTruncatedTags (html: string) {
+    return html.replace(/\*\*?([^*]+)$/, '$1')
+      .replace(/<a[^>]+>([^<]+)<\/a>\s*...((<\/p>)|(<\/li>)|(<\/strong>))?$/mi, '$1...')
+      .replace(/\[[^\]]+\]?\(?([^\)]+)$/, '$1')
+
+  }
+}
diff --git a/client/src/app/shared/shared.module.ts b/client/src/app/shared/shared.module.ts
index d1320aeec..384f5d722 100644
--- a/client/src/app/shared/shared.module.ts
+++ b/client/src/app/shared/shared.module.ts
@@ -6,7 +6,6 @@ import { RouterModule } from '@angular/router'
 import { MarkdownTextareaComponent } from '@app/shared/forms/markdown-textarea.component'
 import { HelpComponent } from '@app/shared/misc/help.component'
 import { InfiniteScrollerDirective } from '@app/shared/video/infinite-scroller.directive'
-import { MarkdownService } from '@app/videos/shared'
 
 import { BytesPipe, KeysPipe, NgPipesModule } from 'ngx-pipes'
 import { SharedModule as PrimeSharedModule } from 'primeng/components/common/shared'
@@ -34,10 +33,10 @@ import { I18n } from '@ngx-translate/i18n-polyfill'
 import { FormValidatorService } from '@app/shared/forms/form-validators/form-validator.service'
 import {
   CustomConfigValidatorsService,
+  InstanceValidatorsService,
   LoginValidatorsService,
   ReactiveFileComponent,
   ResetPasswordValidatorsService,
-  InstanceValidatorsService,
   TextareaAutoResizeDirective,
   UserValidatorsService,
   VideoAbuseValidatorsService,
@@ -67,6 +66,7 @@ import { UserHistoryService } from '@app/shared/users/user-history.service'
 import { UserNotificationService } from '@app/shared/users/user-notification.service'
 import { UserNotificationsComponent } from '@app/shared/users/user-notifications.component'
 import { InstanceService } from '@app/shared/instance/instance.service'
+import { HtmlRendererService, LinkifierService, MarkdownService } from '@app/shared/renderer'
 
 @NgModule({
   imports: [
@@ -167,7 +167,6 @@ import { InstanceService } from '@app/shared/instance/instance.service'
     UserService,
     VideoService,
     AccountService,
-    MarkdownService,
     VideoChannelService,
     VideoCaptionService,
     VideoImportService,
@@ -192,6 +191,10 @@ import { InstanceService } from '@app/shared/instance/instance.service'
     UserHistoryService,
     InstanceService,
 
+    MarkdownService,
+    LinkifierService,
+    HtmlRendererService,
+
     I18nPrimengCalendarService,
     ScreenService,
 
diff --git a/client/src/app/shared/video-abuse/video-abuse.service.ts b/client/src/app/shared/video-abuse/video-abuse.service.ts
index 61b7e1b98..b0b59ea0c 100644
--- a/client/src/app/shared/video-abuse/video-abuse.service.ts
+++ b/client/src/app/shared/video-abuse/video-abuse.service.ts
@@ -32,9 +32,7 @@ export class VideoAbuseService {
 
   reportVideo (id: number, reason: string) {
     const url = VideoAbuseService.BASE_VIDEO_ABUSE_URL + id + '/abuse'
-    const body = {
-      reason
-    }
+    const body = { reason }
 
     return this.authHttp.post(url, body)
                .pipe(