-
Notifications
You must be signed in to change notification settings - Fork 8.8k
/
markdown.jsx
61 lines (51 loc) · 1.56 KB
/
markdown.jsx
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
import React from "react"
import PropTypes from "prop-types"
import Remarkable from "remarkable"
import DomPurify from "dompurify"
import cx from "classnames"
DomPurify.addHook("beforeSanitizeElements", function (current, ) {
// Attach safe `rel` values to all elements that contain an `href`,
// i.e. all anchors that are links.
// We _could_ just look for elements that have a non-self target,
// but applying it more broadly shouldn't hurt anything, and is safer.
if (current.href) {
current.setAttribute("rel", "noopener noreferrer")
}
return current
})
// eslint-disable-next-line no-useless-escape
const isPlainText = (str) => /^[A-Z\s0-9!?\.]+$/gi.test(str)
function Markdown({ source, className = "" }) {
if(isPlainText(source)) {
// If the source text is not Markdown,
// let's save some time and just render it.
return <div className="markdown">
{source}
</div>
}
const md = new Remarkable({
html: true,
typographer: true,
breaks: true,
linkify: true,
linkTarget: "_blank"
})
const html = md.render(source)
const sanitized = sanitizer(html)
if ( !source || !html || !sanitized ) {
return null
}
return (
<div className={cx(className, "markdown")} dangerouslySetInnerHTML={{ __html: sanitized }}></div>
)
}
Markdown.propTypes = {
source: PropTypes.string.isRequired,
className: PropTypes.string
}
export default Markdown
export function sanitizer(str) {
return DomPurify.sanitize(str, {
ADD_ATTR: ["target"]
})
}