-
Notifications
You must be signed in to change notification settings - Fork 0
/
post.component.ts
109 lines (98 loc) · 2.84 KB
/
post.component.ts
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
import { AfterViewInit, Component, ElementRef, Input, OnChanges, OnInit, SimpleChanges, ViewEncapsulation } from '@angular/core';
import { PostsService } from '../../services/posts.service';
import * as marked from 'marked';
import * as Prism from 'prismjs';
import 'prismjs/prism';
import 'prismjs/components/prism-bash';
import 'prismjs/components/prism-c';
import 'prismjs/components/prism-cpp';
import 'prismjs/components/prism-csharp';
import 'prismjs/components/prism-css';
import 'prismjs/components/prism-diff';
import 'prismjs/components/prism-java';
import 'prismjs/components/prism-javascript';
import 'prismjs/components/prism-python';
import 'prismjs/components/prism-sass';
import 'prismjs/components/prism-scss';
import 'prismjs/components/prism-typescript';
@Component({
selector: 'ngxb-post, [ngxb-post]',
// templateUrl: 'post.component.html',
template: `
<ng-content></ng-content>`,
encapsulation: ViewEncapsulation.None,
styleUrls: [
'theme.scss'
]
})
export class PostComponent implements OnInit, OnChanges, AfterViewInit {
@Input() data: string;
@Input() src: string;
constructor(public postsService: PostsService,
public element: ElementRef) { }
ngOnInit() { }
ngAfterViewInit() {
if (this.data) {
this.handleData();
return;
}
if (this.src) {
console.log('src: \n', this.src);
this.handleSrc();
return;
}
this.handleRaw(this.element.nativeElement.innerHTML);
}
// SimpleChanges parameter is required for AoT compilation (do not remove)
ngOnChanges(changes: SimpleChanges) {
if ('data' in changes) {
this.handleData();
return;
}
if ('src' in changes) {
this.handleSrc();
return;
}
}
handleData() {
this.handleRaw(this.data);
}
handleSrc() {
const extension = this.src
? this.src.split('.').splice(-1).join()
: null;
this.postsService.getSource(this.src)
.subscribe(data => {
const raw = extension !== 'md'
? '```' + extension + '\n' + data + '\n```'
: data;
this.handleRaw(raw);
});
}
handleRaw(raw: string) {
// const markdown = this.prepare(raw);
const markdown = raw;
this.element.nativeElement.innerHTML = marked(markdown);
Prism.highlightAll(false);
}
prepare(raw: string) {
if (!raw) {
return '';
}
let indentStart: number;
return raw
.replace(/\>/g, '>')
.split('\n')
.map((line: string) => {
// find position of 1st non-whitespace character
// to determine the markdown indentation start
if (line.length > 0 && isNaN(indentStart)) {
indentStart = line.search(/\S|$/);
}
// remove whitespaces before indentation start
return indentStart
? line.substring(indentStart)
: line;
}).join('\n');
}
}