feat: saving images from the clipboard use hooks

src/frontend/App.tsx

@@ -17,7 +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';
+import { useClipboardImporter } from './hooks/useClipboardImporter';
 
 const SPLASH_SCREEN_TIME = 1400;
 const PLATFORM = process.platform;
@@ -27,6 +27,7 @@ const App = observer(() => {
 
   // Listen to responses of Web Workers
   useWorkerListener();
+  useClipboardImporter(uiStore);
 
   // Show splash screen for some time or when app is not initialized
   const [showSplash, setShowSplash] = useState(true);
@@ -38,7 +39,7 @@ const App = observer(() => {
 
     // Add listener for global keyboard shortcuts
     window.addEventListener('keydown', uiStore.processGlobalShortCuts);
-    
+
     return () => window.removeEventListener('keydown', uiStore.processGlobalShortCuts);
   }, [uiStore.processGlobalShortCuts]);
 
@@ -76,7 +77,6 @@ const App = observer(() => {
             <AdvancedSearchDialog />
 
             <CustomToaster />
-            <Paster />
           </ErrorBoundary>
         </div>
       </DropContextProvider>

src/frontend/hooks/useClipboardImporter.ts

@@ -0,0 +1,53 @@
+import { useEffect } from 'react';
+import { RendererMessenger } from 'src/Messaging';
+import { AppToaster } from '../components/Toaster';
+import { useStore } from '../contexts/StoreContext';
+import UiStore from '../stores/UiStore';
+
+const DEFAULT_FILE_NAME = 'image.png';
+
+export function useClipboardImporter(uiStore: UiStore) {
+  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}`;
+      }
+      await RendererMessenger.storeFile({
+        directory,
+        filenameWithExt: fileName,
+        imgBase64,
+      });
+    });
+    reader.readAsDataURL(blob);
+  };
+
+  return useEffect(() => {
+    document.body.addEventListener('paste', pasteHandle);
+    return () => document.body.removeEventListener('paste', pasteHandle);
+  }, [pasteHandle]);
+}