feature(web): Add syntax highlighting to code blocks and a quick copy button. Fixes #195 (#197)

* Any plans to support copy to clipboard (markdown code) for notes? #195
added a button to copy the markdown and added code highlighting

* Any plans to support copy to clipboard (markdown code) for notes? #195
Changed the copy-button to a generic one
added a safeguard and a message to the copy button if copying is not possible

* Some code cleanups

---------

Co-authored-by: kamtschatka <simon.schatka@gmx.at>
Co-authored-by: MohamedBassem <me@mbassem.com>

1 files changed, 2 insertions, 4 deletions

diff --git a/apps/web/components/dashboard/preview/TextContentSection.tsx b/apps/web/components/dashboard/preview/TextContentSection.tsx
index eba7d28b..2df1e964 100644
--- a/apps/web/components/dashboard/preview/TextContentSection.tsx
+++ b/apps/web/components/dashboard/preview/TextContentSection.tsx
@@ -1,5 +1,5 @@
+import { MarkdownComponent } from "@/components/ui/markdown-component";
 import { ScrollArea } from "@radix-ui/react-scroll-area";
-import Markdown from "react-markdown";
 
 import type { ZBookmark } from "@hoarder/shared/types/bookmarks";
 
@@ -9,9 +9,7 @@ export function TextContentSection({ bookmark }: { bookmark: ZBookmark }) {
   }
   return (
     <ScrollArea className="h-full">
-      <Markdown className="prose mx-auto dark:prose-invert">
-        {bookmark.content.text}
-      </Markdown>
+      <MarkdownComponent>{bookmark.content.text}</MarkdownComponent>
     </ScrollArea>
   );
 }