feature: Add support for markdown in the text bookmarks

1 files changed, 49 insertions, 27 deletions

diff --git a/packages/web/app/dashboard/bookmarks/components/TextCard.tsx b/packages/web/app/dashboard/bookmarks/components/TextCard.tsx
index 7ee1a90b..1d3fad3a 100644
--- a/packages/web/app/dashboard/bookmarks/components/TextCard.tsx
+++ b/packages/web/app/dashboard/bookmarks/components/TextCard.tsx
@@ -3,9 +3,13 @@
 import { ZBookmark } from "@/lib/types/api/bookmarks";
 import BookmarkOptions from "./BookmarkOptions";
 import { api } from "@/lib/trpc";
-import { Star } from "lucide-react";
+import { Maximize2, Star } from "lucide-react";
 import { cn } from "@/lib/utils";
 import TagList from "./TagList";
+import Markdown from "react-markdown";
+import { useState } from "react";
+import { BookmarkedTextViewer } from "./BookmarkedTextViewer";
+import { Button } from "@/components/ui/button";
 
 export default function TextCard({
   bookmark: initialData,
@@ -22,6 +26,7 @@ export default function TextCard({
       initialData,
     },
   );
+  const [previewModalOpen, setPreviewModalOpen] = useState(false);
   const bookmarkedText = bookmark.content;
   if (bookmarkedText.type != "text") {
     throw new Error("Unexpected bookmark type");
@@ -30,33 +35,50 @@ export default function TextCard({
   const numWords = bookmarkedText.text.split(" ").length;
 
   return (
-    <div
-      className={cn(
-        className,
-        cn(
-          "flex flex-col gap-y-1 overflow-hidden rounded-lg p-2 shadow-md",
-          numWords > 12 ? "row-span-2 h-96" : "row-span-1 h-40",
-        ),
-      )}
-    >
-      <p className="grow overflow-hidden text-ellipsis">
-        {bookmarkedText.text}
-      </p>
-      <div className="flex flex-none flex-wrap gap-1 overflow-hidden">
-        <TagList bookmark={bookmark} />
-      </div>
-      <div className="flex w-full justify-between">
-        <div>
-          {bookmark.favourited && (
-            <Star
-              className="my-1 size-8 rounded p-1"
-              color="#ebb434"
-              fill="#ebb434"
-            />
-          )}
+    <>
+      <BookmarkedTextViewer
+        content={bookmarkedText.text}
+        open={previewModalOpen}
+        setOpen={setPreviewModalOpen}
+      />
+      <div
+        className={cn(
+          className,
+          cn(
+            "flex flex-col gap-y-1 overflow-hidden rounded-lg p-2 shadow-md",
+            numWords > 12 ? "row-span-2 h-96" : "row-span-1 h-40",
+          ),
+        )}
+      >
+        <Markdown className="prose grow overflow-hidden">
+          {bookmarkedText.text}
+        </Markdown>
+        <div className="flex flex-none flex-wrap gap-1 overflow-hidden">
+          <TagList bookmark={bookmark} />
+        </div>
+        <div className="flex w-full justify-between">
+          <div />
+          <div className="flex gap-0 text-gray-500">
+            <div>
+              {bookmark.favourited && (
+                <Star
+                  className="my-1 size-8 rounded p-1"
+                  color="#ebb434"
+                  fill="#ebb434"
+                />
+              )}
+            </div>
+            <Button
+              className="px-2"
+              variant="ghost"
+              onClick={() => setPreviewModalOpen(true)}
+            >
+              <Maximize2 size="20" />
+            </Button>
+            <BookmarkOptions bookmark={bookmark} />
+          </div>
         </div>
-        <BookmarkOptions bookmark={bookmark} />
       </div>
-    </div>
+    </>
   );
 }