blob: dedb9360735b0adf15d3a1b36ce5a286557c345a (
plain)
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
|
import * as React from 'react';
import * as marked from 'marked';
import { resolvePath } from '../utilities/path';
import { IApplicationStoreState } from '../../../../framework/src/store/applicationStore';
import connect, { Connect } from '../../../../framework/src/flux/connect';
import { Markdown } from "../components/markdown";
import '!style-loader!css-loader!github-markdown-css/github-markdown.css'
const mapProps = (state: IApplicationStoreState) => ({
content: state.helpApp.content,
currentPath: state.helpApp.currentPath
});
type HelpApplicationComponentProps = Connect<typeof mapProps>;
class HelpApplicationComponent extends React.Component<HelpApplicationComponentProps> {
/**
* Initializes a new instance.
*/
constructor(props: HelpApplicationComponentProps) {
super(props);
this.renderer = new marked.Renderer();
this.renderer.link = (href: string, title: string, text: string) => {
// check if href is rel or abs
const absUrlMatch = href.trim().match(/^https?:\/\//i);
return `<a href="${ absUrlMatch ? href : resolvePath('#/helpApp/', this.props.currentPath || '/', href) }" title="${ title }" >${ text }</a>`
};
this.renderer.image = (href: string, title: string) => {
return `<img src="${ resolvePath('/help/', this.props.currentPath || '/', href) }" alt="${ title }" />`
};
}
render(): JSX.Element {
return this.props.content ? (
<Markdown text={ this.props.content } markedOptions={ { renderer: this.renderer } } className="markdown-body"
style={{ maxWidth: "960px", margin: "1.5em auto" }} />
) : (<h2>Loading ...</h2>)
}
private renderer: marked.Renderer;
}
export const HelpApplication = connect(mapProps)(HelpApplicationComponent);
export default HelpApplication;
|
