diff --git a/src/components/TopicDetail/TopicDetail.tsx b/src/components/TopicDetail/TopicDetail.tsx index 5ea684e03..ed63cce3a 100644 --- a/src/components/TopicDetail/TopicDetail.tsx +++ b/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 || '', - false, + + const sanitizedMarkdown = sanitizeMarkdown( + (response as RoadmapContentDocument).description || '', ); + topicHtml = markdownToHtml(sanitizedMarkdown, false); } setIsLoading(false); diff --git a/src/lib/markdown.ts b/src/lib/markdown.ts index a88af9c8c..e0a7b2905 100644 --- a/src/lib/markdown.ts +++ b/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)'); +} diff --git a/src/pages/guides/[guideId].astro b/src/pages/guides/[guideId].astro index ea86a6bc0..c89425391 100644 --- a/src/pages/guides/[guideId].astro +++ b/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; > -
+