Fix markdown link issue (#4849)

src/components/TopicDetail/TopicDetail.tsx

@@ -21,7 +21,7 @@ import type {
   AllowedLinkTypes,
   RoadmapContentDocument,
 } from '../CustomRoadmap/CustomRoadmap';
-import { markdownToHtml } from '../../lib/markdown';
+import { markdownToHtml, sanitizeMarkdown } from '../../lib/markdown';
 import { cn } from '../../lib/classname';
 import { Ban, FileText, X } from 'lucide-react';
 import { getUrlParams } from '../../lib/browser';
@@ -173,10 +173,11 @@ export function TopicDetail(props: TopicDetailProps) {
         } else {
           setLinks((response as RoadmapContentDocument)?.links || []);
           setTopicTitle((response as RoadmapContentDocument)?.title || '');
-          topicHtml = markdownToHtml(
+
-            (response as RoadmapContentDocument)?.description || '',
+          const sanitizedMarkdown = sanitizeMarkdown(
-            false,
+            (response as RoadmapContentDocument).description || '',
           );
+          topicHtml = markdownToHtml(sanitizedMarkdown, false);
         }
 
         setIsLoading(false);

src/lib/markdown.ts

@@ -2,7 +2,10 @@
 import MarkdownIt from 'markdown-it';
 
 export function markdownToHtml(markdown: string, isInline = true): string {
-  const md = new MarkdownIt();
+  const md = new MarkdownIt({
+    html: true,
+    linkify: true,
+  });
 
   if (isInline) {
     return md.renderInline(markdown);
@@ -10,3 +13,10 @@ export function markdownToHtml(markdown: string, isInline = true): string {
     return md.render(markdown);
   }
 }
+
+// This is a workaround for the issue with tiptap-markdown extension
+// It doesn't support links with escaped brackets like this:
+// \\[link\\](https://example.com) -> [link](https://example.com)
+export function sanitizeMarkdown(markdown: string) {
+  return markdown.replace(/\\\[([^\\]+)\\\]\(([^\\]+)\)/g, '[$1]($2)');
+}

src/pages/guides/[guideId].astro

@@ -2,7 +2,7 @@
 import GuideHeader from '../../components/GuideHeader.astro';
 import MarkdownFile from '../../components/MarkdownFile.astro';
 import BaseLayout from '../../layouts/BaseLayout.astro';
-import { getAllGuides,GuideFileType } from '../../lib/guide';
+import { getAllGuides, type GuideFileType } from '../../lib/guide';
 
 export interface Props {
   guide: GuideFileType;
@@ -30,7 +30,7 @@ const { frontmatter: guideData } = guide;
 >
   <GuideHeader guide={guide} />
 
-  <div class='py-5 sm:py-10 max-w-[700px] mx-auto'>
+  <div class='mx-auto max-w-[700px] py-5 sm:py-10'>
     <MarkdownFile>
       <guide.Content />
     </MarkdownFile>