CoastalCommits/CoastalCommitsPastes
CoastalCommits/CoastalCommitsPastes
2
1
Fork 0
forked from CoastalCommitsArchival/github.com-MaxLeiter-drift
Code Pull requests Activity Actions

client/server: linkify headers and transform html entities in markdown

Browse source
This commit is contained in:
Max Leiter 2022-03-22 22:18:07 -07:00
parent c0c18e5b61
commit f92d854336
No known key found for this signature in database
GPG key ID: A3512F2F2F17EBDA
2 changed files with 106 additions and 28 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

67
client/lib/render-markdown.tsx
View file

@ -8,21 +8,56 @@ delete defaultProps.theme
const renderer = new marked.Renderer()
// renderer.heading = (text, level, _, slugger) => {
// const id = slugger.slug(text)
// const Component = `h${level}`
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 renderToStaticMarkup(
// //@ts-ignore
// <Component>
// <a href={`#${id}`} id={id} style={{ color: "inherit" }} >
// {text}
// </a>
// </Component>
// )
// }
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}`
return renderToStaticMarkup(
//@ts-ignore
<Component>
<a href={`#${id}`} id={id} style={{ color: "inherit" }} >
{convertHtmlEntities(text)}
</a>
</Component>
)
}
// TODO: support elements inside link
// renderer.link = (href, _, text) => {
// const isHrefLocal = href?.startsWith('/') || href?.startsWith('#')
// if (isHrefLocal) {
@ -32,9 +67,13 @@ const renderer = new marked.Renderer()
// </a>
// )
// }
// return `<a href="${href}" target="_blank" rel="noopener noreferrer">${text}</a>`
// // dirty hack
// // if text contains elements, render as html
// return `<a href='${href}' target="_blank" rel="noopener noreferrer">${convertHtmlEntities(text)}</a>`
// }
renderer.image = function (href, _, text) {
return `<Image loading="lazy" src="${href}" alt="${text}" layout="fill" />`
}

67
server/src/lib/render-markdown.tsx
View file

@ -8,21 +8,56 @@ delete defaultProps.theme
const renderer = new marked.Renderer()
// renderer.heading = (text, level, _, slugger) => {
// const id = slugger.slug(text)
// const Component = `h${level}`
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 renderToStaticMarkup(
// //@ts-ignore
// <Component>
// <a href={`#${id}`} id={id} style={{ color: "inherit" }} >
// {text}
// </a>
// </Component>
// )
// }
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}`
return renderToStaticMarkup(
//@ts-ignore
<Component>
<a href={`#${id}`} id={id} style={{ color: "inherit" }} >
{convertHtmlEntities(text)}
</a>
</Component>
)
}
// TODO: support elements inside link
// renderer.link = (href, _, text) => {
// const isHrefLocal = href?.startsWith('/') || href?.startsWith('#')
// if (isHrefLocal) {
@ -32,9 +67,13 @@ const renderer = new marked.Renderer()
// </a>
// )
// }
// return `<a href="${href}" target="_blank" rel="noopener noreferrer">${text}</a>`
// // dirty hack
// // if text contains elements, render as html
// return `<a href='${href}' target="_blank" rel="noopener noreferrer">${convertHtmlEntities(text)}</a>`
// }
renderer.image = function (href, _, text) {
return `<Image loading="lazy" src="${href}" alt="${text}" layout="fill" />`
}