feature: Add support for markdown in the text bookmarks

6 files changed, 84 insertions, 37 deletions

diff --git a/packages/web/app/dashboard/bookmarks/components/BookmarkOptions.tsx b/packages/web/app/dashboard/bookmarks/components/BookmarkOptions.tsx
index 866a4cbd..3a2b6b35 100644
--- a/packages/web/app/dashboard/bookmarks/components/BookmarkOptions.tsx
+++ b/packages/web/app/dashboard/bookmarks/components/BookmarkOptions.tsx
@@ -86,7 +86,7 @@ export default function BookmarkOptions({ bookmark }: { bookmark: ZBookmark }) {
         <DropdownMenuTrigger asChild>
           <Button
             variant="ghost"
-            className="focus-visible:ring-0 focus-visible:ring-offset-0"
+            className="px-1 focus-visible:ring-0 focus-visible:ring-offset-0"
           >
             <MoreHorizontal />
           </Button>
diff --git a/packages/web/app/dashboard/bookmarks/components/BookmarkedTextEditor.tsx b/packages/web/app/dashboard/bookmarks/components/BookmarkedTextEditor.tsx
index e9138e03..a6df8737 100644
--- a/packages/web/app/dashboard/bookmarks/components/BookmarkedTextEditor.tsx
+++ b/packages/web/app/dashboard/bookmarks/components/BookmarkedTextEditor.tsx
@@ -3,6 +3,7 @@ import {
   Dialog,
   DialogClose,
   DialogContent,
+  DialogDescription,
   DialogFooter,
   DialogHeader,
   DialogTitle,
@@ -83,15 +84,16 @@ export function BookmarkedTextEditor({
     <Dialog open={open} onOpenChange={setOpen}>
       <DialogContent>
         <DialogHeader>
-          <DialogTitle className="pb-4">
-            {isNewBookmark ? "New Note" : "Edit Note"}
-          </DialogTitle>
-          <Textarea
-            value={noteText}
-            onChange={(e) => setNoteText(e.target.value)}
-            className="h-52 grow"
-          />
+          <DialogTitle>{isNewBookmark ? "New Note" : "Edit Note"}</DialogTitle>
+          <DialogDescription>
+            Write your note with markdown support
+          </DialogDescription>
         </DialogHeader>
+        <Textarea
+          value={noteText}
+          onChange={(e) => setNoteText(e.target.value)}
+          className="h-52 grow"
+        />
         <DialogFooter className="flex-shrink gap-1 sm:justify-end">
           <DialogClose asChild>
             <Button type="button" variant="secondary">
diff --git a/packages/web/app/dashboard/bookmarks/components/BookmarkedTextViewer.tsx b/packages/web/app/dashboard/bookmarks/components/BookmarkedTextViewer.tsx
new file mode 100644
index 00000000..aba9f8a6
--- /dev/null
+++ b/packages/web/app/dashboard/bookmarks/components/BookmarkedTextViewer.tsx
@@ -0,0 +1,21 @@
+import { ZBookmark } from "@/lib/types/api/bookmarks";
+import { Dialog, DialogContent } from "@/components/ui/dialog";
+import Markdown from "react-markdown";
+
+export function BookmarkedTextViewer({
+  content,
+  open,
+  setOpen,
+}: {
+  content: string;
+  open: boolean;
+  setOpen: (open: boolean) => void;
+}) {
+  return (
+    <Dialog open={open} onOpenChange={setOpen}>
+      <DialogContent className="max-h-[75%] overflow-scroll">
+        <Markdown className="prose">{content}</Markdown>
+      </DialogContent>
+    </Dialog>
+  );
+}
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>
+    </>
   );
 }
diff --git a/packages/web/package.json b/packages/web/package.json
index 8b135f9c..0a4a1992 100644
--- a/packages/web/package.json
+++ b/packages/web/package.json
@@ -42,6 +42,7 @@
     "react": "^18",
     "react-dom": "^18",
     "react-hook-form": "^7.50.1",
+    "react-markdown": "^9.0.1",
     "server-only": "^0.0.1",
     "superjson": "^2.2.1",
     "tailwind-merge": "^2.2.1",
@@ -50,6 +51,7 @@
     "zustand": "^4.5.1"
   },
   "devDependencies": {
+    "@tailwindcss/typography": "^0.5.10",
     "@types/bcrypt": "^5.0.2",
     "@types/react": "^18",
     "@types/react-dom": "^18",
diff --git a/packages/web/tailwind.config.ts b/packages/web/tailwind.config.ts
index 41668a3b..5797e87d 100644
--- a/packages/web/tailwind.config.ts
+++ b/packages/web/tailwind.config.ts
@@ -74,7 +74,7 @@ const config = {
       },
     },
   },
-  plugins: [require("tailwindcss-animate")],
+  plugins: [require("tailwindcss-animate"), require("@tailwindcss/typography")],
 } satisfies Config;
 
 export default config;