fix: correctly render asset extracted text in the edit bookmark dialog. fixes #2181

1 files changed, 24 insertions, 4 deletions

diff --git a/apps/web/components/dashboard/bookmarks/EditBookmarkDialog.tsx b/apps/web/components/dashboard/bookmarks/EditBookmarkDialog.tsx
index 021a7b05..76208158 100644
--- a/apps/web/components/dashboard/bookmarks/EditBookmarkDialog.tsx
+++ b/apps/web/components/dashboard/bookmarks/EditBookmarkDialog.tsx
@@ -29,6 +29,7 @@ import { Textarea } from "@/components/ui/textarea";
 import { toast } from "@/components/ui/use-toast";
 import { useDialogFormReset } from "@/lib/hooks/useDialogFormReset";
 import { useTranslation } from "@/lib/i18n/client";
+import { api } from "@/lib/trpc";
 import { cn } from "@/lib/utils";
 import { zodResolver } from "@hookform/resolvers/zod";
 import { format } from "date-fns";
@@ -60,6 +61,20 @@ export function EditBookmarkDialog({
   setOpen: (v: boolean) => void;
 }) {
   const { t } = useTranslation();
+
+  const { data: assetContent, isLoading: isAssetContentLoading } =
+    api.bookmarks.getBookmark.useQuery(
+      {
+        bookmarkId: bookmark.id,
+        includeContent: true,
+      },
+      {
+        enabled: open && bookmark.content.type == BookmarkTypes.ASSET,
+        select: (b) =>
+          b.content.type == BookmarkTypes.ASSET ? b.content.content : null,
+      },
+    );
+
   const bookmarkToDefault = (bookmark: ZBookmark) => ({
     bookmarkId: bookmark.id,
     summary: bookmark.summary,
@@ -87,10 +102,7 @@ export function EditBookmarkDialog({
         ? bookmark.content.datePublished
         : undefined,
     // Asset specific fields
-    assetContent:
-      bookmark.content.type === BookmarkTypes.ASSET
-        ? bookmark.content.content
-        : undefined,
+    assetContent: assetContent ?? undefined,
   });
 
   const form = useForm<ZUpdateBookmarksRequest>({
@@ -130,6 +142,13 @@ export function EditBookmarkDialog({
   // cause the bookmark prop to change and trigger a form reset
   useDialogFormReset(open, form, bookmarkToDefault(bookmark));
 
+  // Update assetContent field when it's loaded
+  React.useEffect(() => {
+    if (assetContent && bookmark.content.type === BookmarkTypes.ASSET) {
+      form.setValue("assetContent", assetContent);
+    }
+  }, [assetContent, bookmark.content.type, form]);
+
   const isLink = bookmark.content.type === BookmarkTypes.LINK;
   const isAsset = bookmark.content.type === BookmarkTypes.ASSET;
 
@@ -228,6 +247,7 @@ export function EditBookmarkDialog({
                     </FormLabel>
                     <FormControl>
                       <Textarea
+                        disabled={isAssetContentLoading}
                         placeholder="Extracted Content"
                         {...field}
                         value={field.value ?? ""}