import { Component , Input , ElementRef , ViewChild , EventEmitter , Output } from "@angular/core" ; import { DomSanitizer , SafeHtml } from '@angular/platform-browser' ; import { HighlightService } from './../../shared/highlight.service' ; declare var Remarkable ; export class MarkdownReplace { constructor ( public find , public replace , public render ? ) { } } @ Component ( { selector : 'markdown-component' , template : `<div class="markdown" [innerHtml]="htmlData"></div>` , providers : [ HighlightService ] } ) export class MarkdownComponent { htmlData : SafeHtml = null ; private _content = '<p>Loading...</p>' ; @ Input ( 'replace' ) replace : MarkdownReplace [ ] = [ ] ; @ Input ( 'content' ) set content ( value ) { if ( this . _content != value ) { this . _content = value ; this . render ( ) ; } } @ Output ( 'render' ) renderEvent = new EventEmitter ( ) ; get content ( ) : string { return this . _content ; } constructor ( private sanitizer , private highlightService ) { } remarkable = new Remarkable ( { html : true } ) ; render ( ) { if ( this . content == null ) { return ; } let html = this . remarkable . render ( this . content ) ; this . replace . forEach ( o => { html = html . replace ( o . find , o . replace ) ; } ) ; this . htmlData = this . sanitizer . bypassSecurityTrustHtml ( html ) ; this . replace . forEach ( o => { if ( o . render != null ) { o . render ( ) ; } } ) ; setTimeout ( ( ) => { this . highlightService . highlightAll ( ) ; this . renderEvent . emit ( ) ; } ) ; } }