From 7bc47f083f58e0398f4ee2298f8dc38e6b13eb10 Mon Sep 17 00:00:00 2001
From: Ahmad Mujahid <ahmad.h.mujahid@gmail.com>
Date: Mon, 17 Jun 2024 18:35:52 +0400
Subject: [PATCH 1/2] feature: support pasting image in the textfield.

---
 .../components/dashboard/UploadDropzone.tsx   |  2 +-
 .../dashboard/bookmarks/EditorCard.tsx        | 28 ++++++++++++++++++-
 2 files changed, 28 insertions(+), 2 deletions(-)

diff --git a/apps/web/components/dashboard/UploadDropzone.tsx b/apps/web/components/dashboard/UploadDropzone.tsx
index 60398ede..2807b892 100644
--- a/apps/web/components/dashboard/UploadDropzone.tsx
+++ b/apps/web/components/dashboard/UploadDropzone.tsx
@@ -17,7 +17,7 @@ import LoadingSpinner from "../ui/spinner";
 import { toast } from "../ui/use-toast";
 import BookmarkAlreadyExistsToast from "../utils/BookmarkAlreadyExistsToast";
 
-function useUploadAsset() {
+export function useUploadAsset() {
   const { mutateAsync: createBookmark } = useCreateBookmarkWithPostHook({
     onSuccess: (resp) => {
       if (resp.alreadyExists) {
diff --git a/apps/web/components/dashboard/bookmarks/EditorCard.tsx b/apps/web/components/dashboard/bookmarks/EditorCard.tsx
index badf6002..b10ef003 100644
--- a/apps/web/components/dashboard/bookmarks/EditorCard.tsx
+++ b/apps/web/components/dashboard/bookmarks/EditorCard.tsx
@@ -17,6 +17,8 @@ import { z } from "zod";
 
 import { useCreateBookmarkWithPostHook } from "@hoarder/shared-react/hooks/bookmarks";
 
+import { useUploadAsset } from "../UploadDropzone";
+
 function useFocusOnKeyPress(inputRef: React.RefObject<HTMLTextAreaElement>) {
   useEffect(() => {
     function handleKeyPress(e: KeyboardEvent) {
@@ -74,6 +76,8 @@ export default function EditorCard({ className }: { className?: string }) {
     },
   });
 
+  const uploadAsset = useUploadAsset();
+
   function tryToImportUrls(text: string): void {
     const lines = text.split("\n");
     const urls: URL[] = [];
@@ -118,6 +122,21 @@ export default function EditorCard({ className }: { className?: string }) {
     list: undefined,
   });
 
+  const handlePaste = (event: React.ClipboardEvent<HTMLTextAreaElement>) => {
+    if (event?.clipboardData?.items) {
+      Promise.all(
+        Array.from(event.clipboardData.items)
+          .filter((item) => item?.type?.startsWith("image"))
+          .map((item) => {
+            const blob = item.getAsFile();
+            if (blob) {
+              uploadAsset(blob);
+            }
+          }),
+      );
+    }
+  };
+
   return (
     <Form {...form}>
       <form
@@ -144,7 +163,7 @@ export default function EditorCard({ className }: { className?: string }) {
               disabled={isPending}
               className="h-full w-full resize-none border-none text-lg focus-visible:ring-0"
               placeholder={
-                "Paste a link, write a note or drag and drop an image in here ..."
+                "Paste a link, paste an image, write a note or drag and drop an image in here ..."
               }
               onKeyDown={(e) => {
                 if (demoMode) {
@@ -154,6 +173,13 @@ export default function EditorCard({ className }: { className?: string }) {
                   form.handleSubmit(onSubmit, onError)();
                 }
               }}
+              onPaste={(e) => {
+                if (demoMode) {
+                  e.preventDefault();
+                  return;
+                }
+                handlePaste(e);
+              }}
               {...textFieldProps}
             />
           </FormControl>

From 17b8145aef74fd0b19d7deb6ddcc2388b58ebb86 Mon Sep 17 00:00:00 2001
From: MohamedBassem <me@mbassem.com>
Date: Tue, 18 Jun 2024 07:28:12 +0000
Subject: [PATCH 2/2] minor tweaks

---
 .../components/dashboard/bookmarks/EditorCard.tsx    | 12 +++++++-----
 1 file changed, 7 insertions(+), 5 deletions(-)

diff --git a/apps/web/components/dashboard/bookmarks/EditorCard.tsx b/apps/web/components/dashboard/bookmarks/EditorCard.tsx
index b10ef003..ed262d65 100644
--- a/apps/web/components/dashboard/bookmarks/EditorCard.tsx
+++ b/apps/web/components/dashboard/bookmarks/EditorCard.tsx
@@ -122,15 +122,17 @@ export default function EditorCard({ className }: { className?: string }) {
     list: undefined,
   });
 
-  const handlePaste = (event: React.ClipboardEvent<HTMLTextAreaElement>) => {
+  const handlePaste = async (
+    event: React.ClipboardEvent<HTMLTextAreaElement>,
+  ) => {
     if (event?.clipboardData?.items) {
-      Promise.all(
+      await Promise.all(
         Array.from(event.clipboardData.items)
           .filter((item) => item?.type?.startsWith("image"))
           .map((item) => {
             const blob = item.getAsFile();
             if (blob) {
-              uploadAsset(blob);
+              return uploadAsset(blob);
             }
           }),
       );
@@ -163,7 +165,7 @@ export default function EditorCard({ className }: { className?: string }) {
               disabled={isPending}
               className="h-full w-full resize-none border-none text-lg focus-visible:ring-0"
               placeholder={
-                "Paste a link, paste an image, write a note or drag and drop an image in here ..."
+                "Paste a link or an image, write a note or drag and drop an image in here ..."
               }
               onKeyDown={(e) => {
                 if (demoMode) {
@@ -174,8 +176,8 @@ export default function EditorCard({ className }: { className?: string }) {
                 }
               }}
               onPaste={(e) => {
+                e.preventDefault();
                 if (demoMode) {
-                  e.preventDefault();
                   return;
                 }
                 handlePaste(e);