newthuhole/hole_thu_frontend
4
6
Fork 2
Code Issues 8 Pull Requests Projects Releases Wiki Activity

fix: external link indicator, highlight & reply headings

Browse Source
This commit is contained in:
Liu Jiangyi
2020-06-22 22:49:38 +08:00
parent 55473e3327
commit 949cd0d80c
10 changed files with 64 additions and 6 deletions
Download Patch File Download Diff File Expand all files Collapse all files

31
src/Common.js
View File

@@ -81,6 +81,17 @@ export class HighlightedMarkdown extends Component {
)
}
},
{
shouldProcessNode: (node) => node.name === 'a',
processNode (node, children) {
return (
<a href={normalize_url(node.attribs.href)} target="_blank" rel="noopenner noreferrer" class="ext-link">
{children}
<span className="icon icon-new-tab" />
</a>
)
}
},
{
shouldProcessNode (node) {
return node.type === 'text' // pid, nickname, search
@@ -100,7 +111,10 @@ export class HighlightedMarkdown extends Component {
return (<span key={idx}>
{
rule==='url_pid' ? <span className="url-pid-link" title={p}>/##</span> :
rule==='url' ? <a href={normalize_url(p)} target="_blank" rel="noopener">{p}</a> :
rule==='url' ? <a href={normalize_url(p)} class="ext-link" target="_blank" rel="noopener noreferrer">
{p}
<span className="icon icon-new-tab" />
</a> :
rule==='pid' ? <a href={'#'+p} onClick={(e)=>{e.preventDefault(); props.show_pid(p.substring(1));}}>{p}</a> :
rule==='nickname' ? <ColoredSpan colors={props.color_picker.get(p)}>{p}</ColoredSpan> :
rule==='search' ? <span className="search-query-highlight">{p}</span> :
@@ -116,10 +130,19 @@ export class HighlightedMarkdown extends Component {
processNode: processDefs.processDefaultNode
}
]
const renderedMarkdown = renderMd(this.props.text)
const parser = new HtmlToReact.Parser()
return parser.parseWithInstructions(renderedMarkdown, node => node.type !== 'script', processInstructions)
if (props.author && props.text.match(/^(?:#+ |>|```|\t|\s*-|\s*\d+\.)/)) {
const renderedMarkdown = renderMd(props.text)
return (
<>
{props.author}
{parser.parseWithInstructions(renderedMarkdown, node => node.type !== 'script', processInstructions)}
</>
)
} else {
const renderedMarkdown = renderMd((props.author || '') + props.text)
return parser.parseWithInstructions(renderedMarkdown, node => node.type !== 'script', processInstructions)
}
}
}