From a6383664baff98e82e70765997a2b7deaa065235 Mon Sep 17 00:00:00 2001
From: kamtschatka <simon.schatka@gmx.at>
Date: Sat, 13 Jul 2024 12:14:40 +0200
Subject: [PATCH] [Feature Request] inside an item, add the Memos "checkbox"
 feature to do a check list into an item #300 added the possibility to add
 checkboxes

---
 .../components/dashboard/bookmarks/BookmarkedTextViewer.tsx  | 5 ++++-
 apps/web/components/ui/markdown-component.tsx                | 2 ++
 apps/web/package.json                                        | 1 +
 pnpm-lock.yaml                                               | 3 +++
 4 files changed, 10 insertions(+), 1 deletion(-)

diff --git a/apps/web/components/dashboard/bookmarks/BookmarkedTextViewer.tsx b/apps/web/components/dashboard/bookmarks/BookmarkedTextViewer.tsx
index 8a620341..88382cf7 100644
--- a/apps/web/components/dashboard/bookmarks/BookmarkedTextViewer.tsx
+++ b/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>
   );
diff --git a/apps/web/components/ui/markdown-component.tsx b/apps/web/components/ui/markdown-component.tsx
index f92cb3a3..d567ddb3 100644
--- a/apps/web/components/ui/markdown-component.tsx
+++ b/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 }) {
diff --git a/apps/web/package.json b/apps/web/package.json
index 91743602..ade09a83 100644
--- a/apps/web/package.json
+++ b/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",
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index eac8aee8..6bf4ff04 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -580,6 +580,9 @@ importers:
       react-syntax-highlighter:
         specifier: ^15.5.0
         version: 15.5.0(react@18.2.0)
+      remark-gfm:
+        specifier: ^4.0.0
+        version: 4.0.0
       sharp:
         specifier: ^0.33.3
         version: 0.33.3