1 files changed, 43 insertions, 0 deletions
diff --git a/apps/web/components/dashboard/bookmarks/BookmarkMarkdownComponent.tsx b/apps/web/components/dashboard/bookmarks/BookmarkMarkdownComponent.tsx
new file mode 100644
index 00000000..74eb0868
--- /dev/null
+++ b/apps/web/components/dashboard/bookmarks/BookmarkMarkdownComponent.tsx
@@ -0,0 +1,43 @@
+import MarkdownEditor from "@/components/ui/markdown/markdown-editor";
+import { MarkdownReadonly } from "@/components/ui/markdown/markdown-readonly";
+import { toast } from "@/components/ui/use-toast";
+
+import type { ZBookmarkTypeText } from "@hoarder/shared/types/bookmarks";
+import { useUpdateBookmarkText } from "@hoarder/shared-react/hooks/bookmarks";
+
+export function BookmarkMarkdownComponent({
+  children: bookmark,
+  readOnly = true,
+}: {
+  children: ZBookmarkTypeText;
+  readOnly?: boolean;
+}) {
+  const { mutate: updateBookmarkMutator, isPending } = useUpdateBookmarkText({
+    onSuccess: () => {
+      toast({
+        description: "Note updated!",
+      });
+    },
+    onError: () => {
+      toast({ description: "Something went wrong", variant: "destructive" });
+    },
+  });
+
+  const onSave = (text: string) => {
+    updateBookmarkMutator({
+      bookmarkId: bookmark.id,
+      text,
+    });
+  };
+  return (
+    <div className="h-full overflow-hidden">
+      {readOnly ? (
+        <MarkdownReadonly>{bookmark.content.text}</MarkdownReadonly>
+      ) : (
+        <MarkdownEditor onSave={onSave} isSaving={isPending}>
+          {bookmark.content.text}
+        </MarkdownEditor>
+      )}
+    </div>
+  );
+}