client: improve makrdown handling of nested elements

This commit is contained in:
Max Leiter 2022-03-22 22:05:26 -07:00
parent ef16bfc565
commit c0c18e5b61
No known key found for this signature in database
GPG key ID: A3512F2F2F17EBDA
3 changed files with 48 additions and 47 deletions

View file

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

View file

@ -97,7 +97,6 @@ input[type="checkbox"]:focus {
article *:not(pre) > code {
font-weight: 500;
font-family: var(--font-sans);
font-size: 1rem;
}
article li > p {

View file

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