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

client/lib/render-markdown.tsx

@@ -8,21 +8,56 @@ delete defaultProps.theme
 
 const renderer = new marked.Renderer()
 
-// renderer.heading = (text, level, _, slugger) => {
+const convertHtmlEntities = (str: string) => {
-//     const id = slugger.slug(text)
+    const quot = '"'
-//     const Component = `h${level}`
+    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(
+    return str.replace(combinedRegex, (match) => {
-//         //@ts-ignore
+        switch (match) {
-//         <Component>
+            case quot:
-//             <a href={`#${id}`} id={id} style={{ color: "inherit" }} >
+                return '"'
-//                 {text}
+            case apos:
-//             </a>
+                return "'"
-//         </Component>
+            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" />`
 }

server/src/lib/render-markdown.tsx

@@ -8,21 +8,56 @@ delete defaultProps.theme
 
 const renderer = new marked.Renderer()
 
-// renderer.heading = (text, level, _, slugger) => {
+const convertHtmlEntities = (str: string) => {
-//     const id = slugger.slug(text)
+    const quot = '"'
-//     const Component = `h${level}`
+    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(
+    return str.replace(combinedRegex, (match) => {
-//         //@ts-ignore
+        switch (match) {
-//         <Component>
+            case quot:
-//             <a href={`#${id}`} id={id} style={{ color: "inherit" }} >
+                return '"'
-//                 {text}
+            case apos:
-//             </a>
+                return "'"
-//         </Component>
+            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" />`
 }