feat: saving images from the clipboard

src/frontend/App.tsx

@@ -17,6 +17,7 @@ import { DropContextProvider } from './contexts/DropContext';
 import Main from './containers/Main';
 import About from './containers/About';
 import { CustomThemeProvider } from './hooks/useCustomTheme';
+import { Paster } from './components/Paster';
 
 const SPLASH_SCREEN_TIME = 1400;
 const PLATFORM = process.platform;
@@ -37,7 +38,7 @@ const App = observer(() => {
 
     // Add listener for global keyboard shortcuts
     window.addEventListener('keydown', uiStore.processGlobalShortCuts);
-
+    
     return () => window.removeEventListener('keydown', uiStore.processGlobalShortCuts);
   }, [uiStore.processGlobalShortCuts]);
 
@@ -75,6 +76,7 @@ const App = observer(() => {
             <AdvancedSearchDialog />
 
             <CustomToaster />
+            <Paster />
           </ErrorBoundary>
         </div>
       </DropContextProvider>

src/frontend/components/Paster.tsx

@@ -0,0 +1,46 @@
+import React from "react";
+import { RendererMessenger } from "src/Messaging";
+import { useStore } from "../contexts/StoreContext";
+import { AppToaster } from "./Toaster";
+
+const DEFAULT_FILE_NAME = 'image.png'
+export const Paster = ({ onPaste }: { onPaste?: (data: any) => void; }) => {
+    const { uiStore } = useStore()
+    const pasteHandle = (e: ClipboardEvent) => {
+        let { items, files } = e.clipboardData!;
+
+        let fileName = `allusion_${Date.now()}`;
+        let type = items[0].type;
+        if (!type.match(/image/)) return;
+
+        let blob = items[0].getAsFile();
+        if (!blob) return
+        const file = files[0];
+        if (file && file.type.includes('image')) {
+            fileName = file.name == DEFAULT_FILE_NAME ? `allusion_${file.lastModified}.png` : file.name
+        }
+
+        let reader = new FileReader();
+        const directory = uiStore.importDirectory;
+        if (!directory) {
+            AppToaster.show({
+                message: 'Please choose a location. Settings>BackgroundProcesses>Browse',
+                timeout: 5000,
+            });
+            return
+        }
+        reader.addEventListener('loadend', async function (e) {
+            const imgBase64 = e.target!.result!.toString();
+            if (!fileName.includes('.')) {
+                let ext = imgBase64.split(';')[0].split('/')[1];
+                if (ext == 'jpeg') ext = 'jpg'
+                fileName = `${fileName}.${ext}`
+            }
+            const reply = await RendererMessenger.storeFile({ directory, filenameWithExt: fileName, imgBase64 });
+            onPaste && onPaste({ directory, filenameWithExt: fileName, imgBase64, reply });
+        });
+        reader.readAsDataURL(blob);
+    };
+    document.body.addEventListener('paste', pasteHandle);
+    return <></>;
+}