Improve markdown rendering

package.json

@@ -1,6 +1,6 @@
 {
 	"name": "app",
-	"version": "5.6.16",
+	"version": "5.6.17",
 	"description": "",
 	"author": "",
 	"license": "ISC",
@@ -34,7 +34,7 @@
 		"form-request-submit-polyfill": "^2.0.0",
 		"intersection-observer": "^0.12.0",
 		"lodash-es": "^4.17.0",
-		"markdown-to-jsx": "^7.1.6",
+		"marked": "^9.1.5",
 		"normalize-url": "^7.0.0",
 		"rc-resize-observer": "^1.0.0",
 		"react": "^17.0.2",

src/co/bookmarks/item/view.js

@@ -1,11 +1,11 @@
 import s from './view.module.styl'
 import React from 'react'
-import Markdown from 'markdown-to-jsx'
 import t from '~t'
 
 import DragItem from '~co/bookmarks/dnd/drag/item'
 import SuperLink from '~co/common/superLink'
 import SafeHtml from '~co/common/safeHtml'
+import SafeMarkdown from '~co/common/safeMarkdown'
 import Cover from './cover'
 import Tags from './tags'
 import Highlights from './highlights'
@@ -47,18 +47,14 @@ export default function BookmarkItemView(props) {
 
                 <div className={s.about}>
                     {/* Text */}
-                    <SafeHtml className={s.title}>{highlight.title || title}</SafeHtml>
+                    <SafeHtml className={s.title} html={highlight.title || title} />
 
                     <div className={s.description}>
                         {note ? (
-                            <div className={s.note}>
-                                <Markdown options={{ disableParsingRawHTML: true }}>{note}</Markdown>
-                            </div>
+                            <SafeMarkdown className={s.note} markdown={note} />
                         ) : null}
                         {excerpt ? (
-                            <SafeHtml className={s.excerpt}>
-                                {highlight.excerpt || excerpt}
-                            </SafeHtml>
+                            <SafeHtml className={s.excerpt} html={highlight.excerpt || excerpt} />
                         ) : null}
                         <Reminder reminder={reminder} />
                         <Highlights className={s.highlights} highlights={highlights} />

src/co/common/safeHtml.js

@@ -1,25 +1,25 @@
 import React, { memo } from 'react'
 import DOMPurify from 'dompurify'
 
-function safe(content) {
+function safe(html) {
     return {
         dangerouslySetInnerHTML: {
-            __html: DOMPurify.sanitize(content, { ALLOWED_TAGS: ['em'], ALLOWED_ATTR: [] })
+            __html: DOMPurify.sanitize(html, { ALLOWED_TAGS: ['em'], ALLOWED_ATTR: [] })
         }
     }
 }
 
 export default memo(
-    function({ children='', tagName='div', ...etc }) {
+    function({ html='', tagName='div', ...etc }) {
         const Tag = tagName
 
-        if (children.includes('<'))
+        if (html.includes('<'))
             return (
                 <Tag 
                     {...etc}
-                    {...safe(children)} />
+                    {...safe(html)} />
             )
 
-        return <Tag {...etc}>{children}</Tag>
+        return <Tag {...etc}>{html}</Tag>
     }
 )

src/co/common/safeMarkdown.js

@@ -0,0 +1,28 @@
+import React, { memo } from 'react'
+import DOMPurify from 'dompurify'
+import { marked } from 'marked'
+
+function safe(html) {
+    return {
+        dangerouslySetInnerHTML: {
+            __html: DOMPurify.sanitize(
+                marked.parseInline(html, { silent: true }),
+                {
+                    ALLOWED_TAGS: ['i', 'b', 'strong', 'ul', 'ol', 'li', 'pre', 'code', 'em', 'blockquote', 'a']
+                }
+            )
+        }
+    }
+}
+
+export default memo(
+    function({ markdown='', tagName='div', ...etc }) {
+        const Tag = tagName
+
+        return (
+            <Tag 
+                {...etc}
+                {...safe(markdown)} />
+        )
+    }
+)