feature(web): support pasting image in the Editor Card (#228)

* feature: support pasting image in the textfield.

* minor tweaks

---------

Co-authored-by: Ahmad Mujahid <ahmad.h.mujahid@gmail.com>
Co-authored-by: MohamedBassem <me@mbassem.com>

2 files changed, 30 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..ed262d65 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,23 @@ export default function EditorCard({ className }: { className?: string }) {
     list: undefined,
   });
 
+  const handlePaste = async (
+    event: React.ClipboardEvent<HTMLTextAreaElement>,
+  ) => {
+    if (event?.clipboardData?.items) {
+      await Promise.all(
+        Array.from(event.clipboardData.items)
+          .filter((item) => item?.type?.startsWith("image"))
+          .map((item) => {
+            const blob = item.getAsFile();
+            if (blob) {
+              return uploadAsset(blob);
+            }
+          }),
+      );
+    }
+  };
+
   return (
     <Form {...form}>
       <form
@@ -144,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, 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) {
@@ -154,6 +175,13 @@ export default function EditorCard({ className }: { className?: string }) {
                   form.handleSubmit(onSubmit, onError)();
                 }
               }}
+              onPaste={(e) => {
+                e.preventDefault();
+                if (demoMode) {
+                  return;
+                }
+                handlePaste(e);
+              }}
               {...textFieldProps}
             />
           </FormControl>