From 026dae65bb40115f53dcca2721b96687cdd8c6f8 Mon Sep 17 00:00:00 2001 From: enes Date: Tue, 24 Dec 2024 16:07:00 +0100 Subject: [PATCH] refactor(viewer): add yt directive renderer with marked-directive pkg --- package-lock.json | 37 +++++++++++++++++++ package.json | 1 + src/components/Markdown/Viewer.tsx | 7 +++- src/components/Markdown/YoutubeDirective.tsx | 31 ++++++++++++++++ .../Markdown/YoutubeDirectiveDescriptor.tsx | 2 +- src/styles/mdxEditor.scss | 6 +-- 6 files changed, 78 insertions(+), 6 deletions(-) create mode 100644 src/components/Markdown/YoutubeDirective.tsx diff --git a/package-lock.json b/package-lock.json index 659a347..ecdf918 100644 --- a/package-lock.json +++ b/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", diff --git a/package.json b/package.json index 542e4a1..0bbfdcf 100644 --- a/package.json +++ b/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", diff --git a/src/components/Markdown/Viewer.tsx b/src/components/Markdown/Viewer.tsx index 2a22e75..f2684ca 100644 --- a/src/components/Markdown/Viewer.tsx +++ b/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 (
) diff --git a/src/components/Markdown/YoutubeDirective.tsx b/src/components/Markdown/YoutubeDirective.tsx new file mode 100644 index 0000000..44e4446 --- /dev/null +++ b/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/ + //{#} + 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 `` + } + + return false + } +} diff --git a/src/components/Markdown/YoutubeDirectiveDescriptor.tsx b/src/components/Markdown/YoutubeDirectiveDescriptor.tsx index 13a525f..d9c21c7 100644 --- a/src/components/Markdown/YoutubeDirectiveDescriptor.tsx +++ b/src/components/Markdown/YoutubeDirectiveDescriptor.tsx @@ -52,7 +52,7 @@ export const YoutubeDirectiveDescriptor: DirectiveDescriptor + /> ) } diff --git a/src/styles/mdxEditor.scss b/src/styles/mdxEditor.scss index 2bfc808..0a55bc4 100644 --- a/src/styles/mdxEditor.scss +++ b/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; }