Fix markup being wrapped by self-closing anchor tags

Signed-off-by: Sebastian Martinez <me@sebastinez.dev>

src/Markdown.svelte

@@ -24,7 +24,8 @@
   let container: HTMLElement;
 
   const render = (content: string): string =>
-    dompurify.sanitize(marked.parse(content, { headerIds: false }));
+    // eslint-disable-next-line @typescript-eslint/naming-convention
+    dompurify.sanitize(marked.parse(content), { SANITIZE_DOM: false });
 
   onMount(() => {
     // Don't underline <a> tags that contain images.

src/utils.ts

@@ -521,6 +521,27 @@ const katexMarkedExtension = {
     }),
 };
 
+// Converts self closing anchor tags into empty anchor tags, to avoid erratic wrapping behaviour
+// e.g. <a name="test"/> -> <a name="test"></a>
+const anchorMarkedExtension = {
+  name: "sanitizedAnchor",
+  level: "block",
+  start: (src: string) => src.match(/<a name="([\w]+)"\/>/)?.index,
+  tokenizer(src: string) {
+    const match = src.match(/^<a name="([\w]+)"\/>/);
+    if (match) {
+      return {
+        type: "sanitizedAnchor",
+        raw: match[0],
+        text: match[1].trim(),
+      };
+    }
+  },
+  renderer: (token: marked.Tokens.Generic) => {
+    return `<a name="${token.text}"></a>`;
+  },
+};
+
 // Overwrites the rendering of heading tokens.
 // Since there are possible non ASCII characters in headings,
 // we escape them by replacing them with dashes and,
@@ -536,8 +557,6 @@ export const renderer = {
   },
 };
 
-export const markdownExtensions = [emojisMarkedExtension, katexMarkedExtension];
-
 export function twemoji(node: HTMLElement) {
   twemojiModule.parse(node, {
     base: process.env.hashRouting ? "./" : "/",
@@ -546,3 +565,9 @@ export function twemoji(node: HTMLElement) {
     className: `txt-emoji`,
   });
 }
+
+export const markdownExtensions = [
+  emojisMarkedExtension,
+  katexMarkedExtension,
+  anchorMarkedExtension,
+];