From da526b1fe12da75c3bf3a2f213771d9038ff7d20 Mon Sep 17 00:00:00 2001
From: Sebastian Martinez <me@sebastinez.dev>
Date: Mon, 17 Jul 2023 11:59:55 +0200
Subject: [PATCH] Replace marked namespaces with Marked instance

Based on a new addition to marked, this commits replaces the imported
marked namespaces with a Marked class, that doesn't change when
`marked.use` introduces new options or extensions.

Also changes the naming slighty to use `markdown` as module, so it
sounds more generic.

Reference: https://github.com/markedjs/marked/pull/2831

Signed-off-by: Sebastian Martinez <me@sebastinez.dev>
---
 package-lock.json                    |  8 ++--
 package.json                         |  2 +-
 src/components/InlineMarkdown.svelte |  4 +-
 src/components/Markdown.svelte       | 16 +++-----
 src/lib/markdown.ts                  | 60 ++++++++++++++--------------
 5 files changed, 42 insertions(+), 48 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index 40ec058fb2..ff91c236f1 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -35,7 +35,7 @@
         "@types/dompurify": "^3.0.2",
         "@types/katex": "^0.16.0",
         "@types/lodash": "^4.14.195",
-        "@types/marked": "^5.0.0",
+        "@types/marked": "^5.0.1",
         "@types/md5": "^2.3.2",
         "@types/node": "^18.16.12",
         "@types/sinon": "^10.0.15",
@@ -836,9 +836,9 @@
       "dev": true
     },
     "node_modules/@types/marked": {
-      "version": "5.0.0",
-      "resolved": "https://registry.npmjs.org/@types/marked/-/marked-5.0.0.tgz",
-      "integrity": "sha512-YcZe50jhltsCq7rc9MNZC/4QB/OnA2Pd6hrOSTOFajtabN+38slqgDDCeE/0F83SjkKBQcsZUj7VLWR0H5cKRA==",
+      "version": "5.0.1",
+      "resolved": "https://registry.npmjs.org/@types/marked/-/marked-5.0.1.tgz",
+      "integrity": "sha512-Y3pAUzHKh605fN6fvASsz5FDSWbZcs/65Q6xYRmnIP9ZIYz27T4IOmXfH9gWJV1dpi7f1e7z7nBGUTx/a0ptpA==",
       "dev": true
     },
     "node_modules/@types/md5": {
diff --git a/package.json b/package.json
index 5b647ed7dd..f5dc5b88ba 100644
--- a/package.json
+++ b/package.json
@@ -26,7 +26,7 @@
     "@types/dompurify": "^3.0.2",
     "@types/katex": "^0.16.0",
     "@types/lodash": "^4.14.195",
-    "@types/marked": "^5.0.0",
+    "@types/marked": "^5.0.1",
     "@types/md5": "^2.3.2",
     "@types/node": "^18.16.12",
     "@types/sinon": "^10.0.15",
diff --git a/src/components/InlineMarkdown.svelte b/src/components/InlineMarkdown.svelte
index 4302e33ef4..7083121a76 100644
--- a/src/components/InlineMarkdown.svelte
+++ b/src/components/InlineMarkdown.svelte
@@ -1,14 +1,14 @@
 <script lang="ts">
   import dompurify from "dompurify";
-  import { marked } from "marked";
 
+  import markdown from "@app/lib/markdown";
   import { twemoji } from "@app/lib/utils";
 
   export let content: string;
   export let fontSize: "tiny" | "small" | "medium" = "small";
 
   const render = (content: string): string =>
-    dompurify.sanitize(marked.parseInline(content));
+    dompurify.sanitize(markdown.parseInline(content));
 </script>
 
 <style>
diff --git a/src/components/Markdown.svelte b/src/components/Markdown.svelte
index ef4d30ed00..0dedff8032 100644
--- a/src/components/Markdown.svelte
+++ b/src/components/Markdown.svelte
@@ -2,13 +2,13 @@
   import dompurify from "dompurify";
   import matter from "@radicle/gray-matter";
   import { afterUpdate } from "svelte";
-  import { marked } from "marked";
   import { toDom } from "hast-util-to-dom";
 
   import * as router from "@app/lib/router";
+  import markdown from "@app/lib/markdown";
+  import { Renderer } from "@app/lib/markdown";
   import { highlight } from "@app/lib/syntax";
   import { isUrl, twemoji, scrollIntoView, canonicalize } from "@app/lib/utils";
-  import { Renderer } from "@app/lib/markdown";
 
   export let content: string;
   // If present, resolve all relative links with respect to this URL
@@ -52,14 +52,10 @@
   }
 
   function render(content: string): string {
-    return dompurify.sanitize(
-      marked.parse(content, {
-        renderer: new Renderer(linkBaseUrl),
-        // TODO: Disables deprecated options, remove once removed from marked
-        mangle: false,
-        headerIds: false,
-      }),
-    );
+    markdown.setOptions({
+      renderer: new Renderer(linkBaseUrl),
+    });
+    return dompurify.sanitize(markdown.parse(content));
   }
 
   afterUpdate(async () => {
diff --git a/src/lib/markdown.ts b/src/lib/markdown.ts
index 8fb0bfbbc7..d1eaf0db8d 100644
--- a/src/lib/markdown.ts
+++ b/src/lib/markdown.ts
@@ -1,7 +1,9 @@
+import type { marked } from "marked";
+
 import dompurify from "dompurify";
 import emojis from "@app/lib/emojis";
 import katex from "katex";
-import { marked, Renderer as BaseRenderer } from "marked";
+import { Marked, Renderer as BaseRenderer } from "marked";
 
 dompurify.setConfig({
   // eslint-disable-next-line @typescript-eslint/naming-convention
@@ -24,11 +26,8 @@ const emojisMarkedExtension = {
       };
     }
   },
-  renderer: (token: marked.Tokens.Generic) => {
-    return `<span>${
-      token.text in emojis ? emojis[token.text] : token.text
-    }</span>`;
-  },
+  renderer: (token: marked.Tokens.Generic): string =>
+    `<span>${token.text in emojis ? emojis[token.text] : token.text}</span>`,
 };
 
 const katexMarkedExtension = {
@@ -45,7 +44,7 @@ const katexMarkedExtension = {
       };
     }
   },
-  renderer: (token: marked.Tokens.Generic) =>
+  renderer: (token: marked.Tokens.Generic): string =>
     katex.renderToString(token.text, {
       throwOnError: false,
     }),
@@ -68,9 +67,8 @@ const footnoteReferenceMarkedExtension = {
       };
     }
   },
-  renderer: (token: marked.Tokens.Generic) => {
-    return `<sup class="footnote-ref" id="${referencePrefix}:${token.text}"><a href="#${footnotePrefix}:${token.text}">[${token.text}]</a></sup>`;
-  },
+  renderer: (token: marked.Tokens.Generic): string =>
+    `<sup class="footnote-ref" id="${referencePrefix}:${token.text}"><a href="#${footnotePrefix}:${token.text}">[${token.text}]</a></sup>`,
 };
 const footnoteMatch = /^\[\^([^\]]+)\]:\s([\S]*)/;
 const footnoteMarkedExtension = {
@@ -88,17 +86,16 @@ const footnoteMarkedExtension = {
       };
     }
   },
-  renderer: (token: marked.Tokens.Generic) => {
-    return `${
+  renderer: (token: marked.Tokens.Generic): string =>
+    `${
       token.reference === "0" ? "<hr />" : ""
     }<p class="txt-small" id="${footnotePrefix}:${token.reference}">${
       token.reference
-    }. ${marked.parseInline(
+    }. ${markedInstance.parseInline(
       token.text,
     )} <a class="txt-tiny ref-arrow" href="#${referencePrefix}:${
       token.reference
-    }">↩</a></p>`;
-  },
+    }">↩</a></p>`,
 };
 
 // Converts self closing anchor tags into empty anchor tags, to avoid erratic wrapping behaviour
@@ -117,24 +114,10 @@ const anchorMarkedExtension = {
       };
     }
   },
-  renderer: (token: marked.Tokens.Generic) => {
-    return `<a name="${token.text}"></a>`;
-  },
+  renderer: (token: marked.Tokens.Generic): string =>
+    `<a name="${token.text}"></a>`,
 };
 
-// TODO: Disables deprecated options, remove once removed from marked
-marked.use({
-  extensions: [
-    anchorMarkedExtension,
-    emojisMarkedExtension,
-    footnoteMarkedExtension,
-    footnoteReferenceMarkedExtension,
-    katexMarkedExtension,
-  ],
-  mangle: false,
-  headerIds: false,
-});
-
 export class Renderer extends BaseRenderer {
   #baseUrl: string | undefined;
 
@@ -174,3 +157,18 @@ export class Renderer extends BaseRenderer {
     }
   }
 }
+
+const markedInstance = new Marked({
+  extensions: [
+    emojisMarkedExtension,
+    katexMarkedExtension,
+    footnoteMarkedExtension,
+    footnoteReferenceMarkedExtension,
+    anchorMarkedExtension,
+  ],
+  // TODO: Disables deprecated options, remove once removed from marked
+  mangle: false,
+  headerIds: false,
+});
+
+export default markedInstance;