From 3d9eaae318670986fedab257b8be344c9b43d8d5 Mon Sep 17 00:00:00 2001 From: Chocobozzz Date: Tue, 20 Feb 2018 11:04:21 +0100 Subject: Add links support in comments --- .../+video-watch/comment/video-comment-add.component.ts | 2 +- .../+video-watch/comment/video-comment.component.ts | 12 ++++++++++-- .../videos/+video-watch/comment/video-comment.service.ts | 6 ++++-- client/src/app/videos/shared/markdown.service.ts | 16 ++++++++++++---- 4 files changed, 27 insertions(+), 9 deletions(-) diff --git a/client/src/app/videos/+video-watch/comment/video-comment-add.component.ts b/client/src/app/videos/+video-watch/comment/video-comment-add.component.ts index 9e499d829..183cde000 100644 --- a/client/src/app/videos/+video-watch/comment/video-comment-add.component.ts +++ b/client/src/app/videos/+video-watch/comment/video-comment-add.component.ts @@ -2,7 +2,7 @@ import { Component, ElementRef, EventEmitter, Input, OnInit, Output, ViewChild } import { FormBuilder, FormGroup } from '@angular/forms' import { NotificationsService } from 'angular2-notifications' import { Observable } from 'rxjs/Observable' -import { VideoCommentCreate, VideoCommentThreadTree } from '../../../../../../shared/models/videos/video-comment.model' +import { VideoCommentCreate } from '../../../../../../shared/models/videos/video-comment.model' import { FormReactive } from '../../../shared' import { VIDEO_COMMENT_TEXT } from '../../../shared/forms/form-validators/video-comment' import { User } from '../../../shared/users' diff --git a/client/src/app/videos/+video-watch/comment/video-comment.component.ts b/client/src/app/videos/+video-watch/comment/video-comment.component.ts index 9176de80f..0224132ac 100644 --- a/client/src/app/videos/+video-watch/comment/video-comment.component.ts +++ b/client/src/app/videos/+video-watch/comment/video-comment.component.ts @@ -1,4 +1,5 @@ import { Component, EventEmitter, Input, OnChanges, OnInit, Output } from '@angular/core' +import { MarkdownService } from '@app/videos/shared' import * as sanitizeHtml from 'sanitize-html' import { Account as AccountInterface } from '../../../../../../shared/models/actors' import { UserRight } from '../../../../../../shared/models/users' @@ -29,7 +30,10 @@ export class VideoCommentComponent implements OnInit, OnChanges { sanitizedCommentHTML = '' newParentComments = [] - constructor (private authService: AuthService) {} + constructor ( + private authService: AuthService, + private markdownService: MarkdownService + ) {} get user () { return this.authService.getUser() @@ -90,9 +94,13 @@ export class VideoCommentComponent implements OnInit, OnChanges { private init () { this.sanitizedCommentHTML = sanitizeHtml(this.comment.text, { - allowedTags: [ 'p', 'span', 'br' ] + allowedTags: [ 'a', 'p', 'span', 'br' ], + allowedSchemes: [ 'http', 'https' ] }) + // Convert possible markdown to html + this.sanitizedCommentHTML = this.markdownService.linkify(this.comment.text) + this.newParentComments = this.parentComments.concat([ this.comment ]) } } diff --git a/client/src/app/videos/+video-watch/comment/video-comment.service.ts b/client/src/app/videos/+video-watch/comment/video-comment.service.ts index 14d32b1aa..470af1230 100644 --- a/client/src/app/videos/+video-watch/comment/video-comment.service.ts +++ b/client/src/app/videos/+video-watch/comment/video-comment.service.ts @@ -1,12 +1,14 @@ import { HttpClient, HttpParams } from '@angular/common/http' import { Injectable } from '@angular/core' +import { lineFeedToHtml } from '@app/shared/misc/utils' +import { MarkdownService } from '@app/videos/shared' import 'rxjs/add/operator/catch' import 'rxjs/add/operator/map' -import { immutableAssign, lineFeedToHtml } from '@app/shared/misc/utils' import { Observable } from 'rxjs/Observable' import { ResultList } from '../../../../../../shared/models' import { - VideoComment as VideoCommentServerModel, VideoCommentCreate, + VideoComment as VideoCommentServerModel, + VideoCommentCreate, VideoCommentThreadTree } from '../../../../../../shared/models/videos/video-comment.model' import { environment } from '../../../../environments/environment' diff --git a/client/src/app/videos/shared/markdown.service.ts b/client/src/app/videos/shared/markdown.service.ts index 3f51a82ce..a275446eb 100644 --- a/client/src/app/videos/shared/markdown.service.ts +++ b/client/src/app/videos/shared/markdown.service.ts @@ -5,6 +5,7 @@ import * as MarkdownIt from 'markdown-it' @Injectable() export class MarkdownService { private markdownIt: MarkdownIt.MarkdownIt + private linkifier: MarkdownIt.MarkdownIt constructor () { this.markdownIt = new MarkdownIt('zero', { linkify: true, breaks: true }) @@ -14,8 +15,11 @@ export class MarkdownService { .enable('link') .enable('newline') .enable('list') + this.setTargetToLinks(this.markdownIt) - this.setTargetToLinks() + this.linkifier = new MarkdownIt('zero', { linkify: true }) + .enable('linkify') + this.setTargetToLinks(this.linkifier) } markdownToHTML (markdown: string) { @@ -25,13 +29,17 @@ export class MarkdownService { return html.replace(/]+>([^<]+)<\/a>\s*...(<\/p>)?$/mi, '$1...') } - private setTargetToLinks () { + linkify (text: string) { + return this.linkifier.render(text) + } + + 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 = this.markdownIt.renderer.rules.link_open || function (tokens, idx, options, env, self) { + const defaultRender = markdownIt.renderer.rules.link_open || function (tokens, idx, options, env, self) { return self.renderToken(tokens, idx, options) } - this.markdownIt.renderer.rules.link_open = function (tokens, idx, options, env, self) { + markdownIt.renderer.rules.link_open = function (tokens, idx, options, env, self) { // If you are sure other plugins can't add `target` - drop check below const aIndex = tokens[idx].attrIndex('target') -- cgit v1.2.3