refactor(viewer): add yt directive renderer with marked-directive pkg

package-lock.json

@@ -24,6 +24,7 @@
         "fslightbox-react": "1.7.6",
         "lodash": "4.17.21",
         "marked": "^14.1.3",
+        "marked-directive": "^1.0.7",
         "nostr-login": "1.5.2",
         "nostr-tools": "2.7.1",
         "papaparse": "5.4.1",
@@ -3936,6 +3937,15 @@
       "resolved": "https://registry.npmjs.org/asynckit/-/asynckit-0.4.0.tgz",
       "integrity": "sha512-Oei9OH4tRh0YqU3GxhX79dM/mwVgvbZJaSNaRk+bshkj0S5cfHcgYakreBjrHwatXKbz+IoIdYLxrKim2MjW0Q=="
     },
+    "node_modules/attributes-parser": {
+      "version": "2.2.3",
+      "resolved": "https://registry.npmjs.org/attributes-parser/-/attributes-parser-2.2.3.tgz",
+      "integrity": "sha512-zjOUWt95la8AdUO+kP1GBOonWrV5jy9NjJP+z9tva/DSA6FIzGKcN/gk3tdqQf/pOeB8dkyd3FCPrjhELMmrkg==",
+      "license": "MIT",
+      "dependencies": {
+        "json-loose": "^1.2.4"
+      }
+    },
     "node_modules/axios": {
       "version": "1.7.9",
       "resolved": "https://registry.npmjs.org/axios/-/axios-1.7.9.tgz",
@@ -5557,6 +5567,15 @@
       "integrity": "sha512-4bV5BfR2mqfQTJm+V5tPPdf+ZpuhiIvTuAB5g8kcrXOZpTT/QwwVRWBywX1ozr6lEuPdbHxwaJlm9G6mI2sfSQ==",
       "dev": true
     },
+    "node_modules/json-loose": {
+      "version": "1.2.4",
+      "resolved": "https://registry.npmjs.org/json-loose/-/json-loose-1.2.4.tgz",
+      "integrity": "sha512-lwMWNC5pvVI33rhYWmAsmtICWE2IH7euDY/iIPeMFE5AuzAifYgqQrjqSMzwbrFV6MWPs41XD+CajElHI4cZMQ==",
+      "license": "MIT",
+      "dependencies": {
+        "moo": "^0.5.2"
+      }
+    },
     "node_modules/json-schema-traverse": {
       "version": "0.4.1",
       "resolved": "https://registry.npmjs.org/json-schema-traverse/-/json-schema-traverse-0.4.1.tgz",
@@ -5743,6 +5762,18 @@
         "node": ">= 18"
       }
     },
+    "node_modules/marked-directive": {
+      "version": "1.0.7",
+      "resolved": "https://registry.npmjs.org/marked-directive/-/marked-directive-1.0.7.tgz",
+      "integrity": "sha512-2OilBJg5kSM0b7ijKlmIne8k1eA1YrNAWasw84fmfihgWuOQJFPmI5GzZd3DgM8PSquAKnYx87Qt5j/2Sw7JNA==",
+      "license": "MIT",
+      "dependencies": {
+        "attributes-parser": "^2.2.3"
+      },
+      "peerDependencies": {
+        "marked": ">=7.0.0"
+      }
+    },
     "node_modules/mdast-util-directive": {
       "version": "3.0.0",
       "resolved": "https://registry.npmjs.org/mdast-util-directive/-/mdast-util-directive-3.0.0.tgz",
@@ -6736,6 +6767,12 @@
         "url": "https://github.com/sponsors/isaacs"
       }
     },
+    "node_modules/moo": {
+      "version": "0.5.2",
+      "resolved": "https://registry.npmjs.org/moo/-/moo-0.5.2.tgz",
+      "integrity": "sha512-iSAJLHYKnX41mKcJKjqvnAN9sf0LMDTXDEvFv+ffuRR9a1MIuXLjMNL6EsnDHSkKLTWNqQQ5uo61P4EbU4NU+Q==",
+      "license": "BSD-3-Clause"
+    },
     "node_modules/ms": {
       "version": "2.1.3",
       "resolved": "https://registry.npmjs.org/ms/-/ms-2.1.3.tgz",

package.json

@@ -26,6 +26,7 @@
     "fslightbox-react": "1.7.6",
     "lodash": "4.17.21",
     "marked": "^14.1.3",
+    "marked-directive": "^1.0.7",
     "nostr-login": "1.5.2",
     "nostr-tools": "2.7.1",
     "papaparse": "5.4.1",

src/components/Markdown/Viewer.tsx

@@ -1,12 +1,17 @@
 import DOMPurify from 'dompurify'
 import { marked } from 'marked'
+import { createDirectives, presetDirectiveConfigs } from 'marked-directive'
+import { youtubeDirective } from './YoutubeDirective'
 
 interface ViewerProps {
   markdown: string
 }
 
 export const Viewer = ({ markdown }: ViewerProps) => {
-  const html = DOMPurify.sanitize(marked.parse(markdown, { async: false }))
+  const html = marked
+    .use(createDirectives([...presetDirectiveConfigs, youtubeDirective]))
+    .parse(DOMPurify.sanitize(markdown), { async: false })
+
   return (
     <div className='viewer' dangerouslySetInnerHTML={{ __html: html }}></div>
   )

src/components/Markdown/YoutubeDirective.tsx

@@ -0,0 +1,31 @@
+import { type DirectiveConfig } from 'marked-directive'
+
+// defines `:youtube` directive
+export const youtubeDirective: DirectiveConfig = {
+  level: 'block',
+  marker: '::',
+  renderer(token) {
+    //https://www.youtube.com/embed/<VIDEO_ID>
+    //{#<VIDEO_ID>}
+    let vid: string = ''
+    if (token.attrs && token.meta.name === 'youtube') {
+      for (const attr in token.attrs) {
+        if (
+          Object.prototype.hasOwnProperty.call(token.attrs, attr) &&
+          attr.startsWith('#')
+        ) {
+          vid = attr.replace('#', '')
+          console.log(vid)
+        }
+      }
+    }
+
+    if (vid) {
+      return `<iframe width="560" height="315" src="https://www.youtube.com/embed/${vid}" title="${
+        token.text || ''
+      }" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen></iframe>`
+    }
+
+    return false
+  }
+}

src/components/Markdown/YoutubeDirectiveDescriptor.tsx

@@ -52,7 +52,7 @@ export const YoutubeDirectiveDescriptor: DirectiveDescriptor<YoutubeDirectiveNod
             title='YouTube video player'
             frameBorder='0'
             allow='accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share'
-          ></iframe>
+          />
         </div>
       )
     }

src/styles/mdxEditor.scss

@@ -59,7 +59,7 @@
   }
 
   code {
-    background-color: var(--purple-light); // todo: fix the color
+    background-color: mediumpurple;
     border-radius: 0.4rem;
     color: var(--black);
     font-size: 0.85rem;
@@ -72,7 +72,7 @@
   }
 
   pre {
-    background: var(--black); // todo: fix the color
+    background: var(--black);
     color: var(--white);
     font-family: 'JetBrainsMono', monospace;
     margin: 1.5rem 0;
@@ -90,8 +90,6 @@
   }
 
   img {
-    width: 100%;
-    margin: 15px 0;
     background: #232323;
     border-radius: 10px;
   }