feature: Add github markdown support which includes tables, checklist…

…s and auto links #300 (#302)

added the possibility to add checkboxes

apps/web/components/dashboard/bookmarks/BookmarkedTextViewer.tsx

@@ -1,5 +1,6 @@
 import { Dialog, DialogContent } from "@/components/ui/dialog";
 import Markdown from "react-markdown";
+import remarkGfm from "remark-gfm";
 
 export function BookmarkedTextViewer({
   content,
@@ -13,7 +14,9 @@ export function BookmarkedTextViewer({
   return (
     <Dialog open={open} onOpenChange={setOpen}>
       <DialogContent className="max-h-[75%] overflow-auto">
-        <Markdown className="prose">{content}</Markdown>
+        <Markdown remarkPlugins={[remarkGfm]} className="prose">
+          {content}
+        </Markdown>
       </DialogContent>
     </Dialog>
   );

apps/web/components/ui/markdown-component.tsx

@@ -4,6 +4,7 @@ import { cn } from "@/lib/utils";
 import Markdown from "react-markdown";
 import { Prism as SyntaxHighlighter } from "react-syntax-highlighter";
 import { dracula } from "react-syntax-highlighter/dist/cjs/styles/prism";
+import remarkGfm from "remark-gfm";
 
 function PreWithCopyBtn({ className, ...props }: React.ComponentProps<"pre">) {
   const ref = React.useRef<HTMLPreElement>(null);
@@ -27,6 +28,7 @@ export function MarkdownComponent({
 }) {
   return (
     <Markdown
+      remarkPlugins={[remarkGfm]}
       className="prose dark:prose-invert"
       components={{
         pre({ ...props }) {

apps/web/package.json

@@ -63,6 +63,7 @@
     "react-masonry-css": "^1.0.16",
     "react-select": "^5.8.0",
     "react-syntax-highlighter": "^15.5.0",
+    "remark-gfm": "^4.0.0",
     "sharp": "^0.33.3",
     "superjson": "^2.2.1",
     "tailwind-merge": "^2.2.1",