From a139acc747039018533a88ed47338874c25a9498 Mon Sep 17 00:00:00 2001
From: Max Leiter <maxwell.leiter@gmail.com>
Date: Tue, 22 Mar 2022 23:16:34 -0700
Subject: [PATCH] client/server: render nested elements in headings

---
 client/lib/render-markdown.tsx     | 39 ++----------------------------
 server/src/lib/render-markdown.tsx | 39 ++----------------------------
 2 files changed, 4 insertions(+), 74 deletions(-)

diff --git a/client/lib/render-markdown.tsx b/client/lib/render-markdown.tsx
index 7919c5c2..d57b5862 100644
--- a/client/lib/render-markdown.tsx
+++ b/client/lib/render-markdown.tsx
@@ -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>
 // }
 
 
diff --git a/server/src/lib/render-markdown.tsx b/server/src/lib/render-markdown.tsx
index 7919c5c2..d57b5862 100644
--- a/server/src/lib/render-markdown.tsx
+++ b/server/src/lib/render-markdown.tsx
@@ -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>
 // }