client/server: render nested elements in headings

This commit is contained in:
Max Leiter 2022-03-22 23:16:34 -07:00
parent f92d854336
commit a139acc747
No known key found for this signature in database
GPG key ID: A3512F2F2F17EBDA
2 changed files with 4 additions and 74 deletions

View file

@ -8,40 +8,6 @@ delete defaultProps.theme
const renderer = new marked.Renderer()
const convertHtmlEntities = (str: string) => {
const quot = '"'
const apos = '''
const amp = '&'
const nbsp = ' '
const lt = '<'
const gt = '>'
const code = '<code>'
const endCode = '</code>'
const combinedRegex = new RegExp(`${code}|${endCode}|${quot}|${apos}|${amp}|${nbsp}|${lt}|${gt}`, 'g')
return str.replace(combinedRegex, (match) => {
switch (match) {
case quot:
return '"'
case apos:
return "'"
case amp:
return '&'
case nbsp:
return ' '
case lt:
return '<'
case gt:
return '>'
case code:
case endCode:
return '`'
default:
return match
}
})
}
renderer.heading = (text, level, _, slugger) => {
const id = slugger.slug(text)
const Component = `h${level}`
@ -51,8 +17,7 @@ renderer.heading = (text, level, _, slugger) => {
return renderToStaticMarkup(
//@ts-ignore
<Component>
<a href={`#${id}`} id={id} style={{ color: "inherit" }} >
{convertHtmlEntities(text)}
<a href={`#${id}`} id={id} style={{ color: "inherit" }} dangerouslySetInnerHTML={{ __html: (text) }} >
</a>
</Component>
)
@ -70,7 +35,7 @@ renderer.heading = (text, level, _, slugger) => {
// // dirty hack
// // if text contains elements, render as html
// return `<a href='${href}' target="_blank" rel="noopener noreferrer">${convertHtmlEntities(text)}</a>`
// return <a href={href || ""} target="_blank" rel="noopener noreferrer" dangerouslySetInnerHTML={{ __html: convertHtmlEntities(text) }} ></a>
// }

View file

@ -8,40 +8,6 @@ delete defaultProps.theme
const renderer = new marked.Renderer()
const convertHtmlEntities = (str: string) => {
const quot = '&quot;'
const apos = '&#39;'
const amp = '&amp;'
const nbsp = '&nbsp;'
const lt = '&lt;'
const gt = '&gt;'
const code = '<code>'
const endCode = '</code>'
const combinedRegex = new RegExp(`${code}|${endCode}|${quot}|${apos}|${amp}|${nbsp}|${lt}|${gt}`, 'g')
return str.replace(combinedRegex, (match) => {
switch (match) {
case quot:
return '"'
case apos:
return "'"
case amp:
return '&'
case nbsp:
return ' '
case lt:
return '<'
case gt:
return '>'
case code:
case endCode:
return '`'
default:
return match
}
})
}
renderer.heading = (text, level, _, slugger) => {
const id = slugger.slug(text)
const Component = `h${level}`
@ -51,8 +17,7 @@ renderer.heading = (text, level, _, slugger) => {
return renderToStaticMarkup(
//@ts-ignore
<Component>
<a href={`#${id}`} id={id} style={{ color: "inherit" }} >
{convertHtmlEntities(text)}
<a href={`#${id}`} id={id} style={{ color: "inherit" }} dangerouslySetInnerHTML={{ __html: (text) }} >
</a>
</Component>
)
@ -70,7 +35,7 @@ renderer.heading = (text, level, _, slugger) => {
// // dirty hack
// // if text contains elements, render as html
// return `<a href='${href}' target="_blank" rel="noopener noreferrer">${convertHtmlEntities(text)}</a>`
// return <a href={href || ""} target="_blank" rel="noopener noreferrer" dangerouslySetInnerHTML={{ __html: convertHtmlEntities(text) }} ></a>
// }