feat: saving images from the clipboard use hooks

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 { useClipboardImporter } from './hooks/useClipboardImporter';
 
 const SPLASH_SCREEN_TIME = 1400;
 const PLATFORM = process.platform;
@@ -26,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);

src/frontend/hooks/useClipboardImporter.ts

@@ -0,0 +1,58 @@
+import { useEffect } from 'react';
+import { RendererMessenger } from 'src/Messaging';
+import { AppToaster } from '../components/Toaster';
+import UiStore from '../stores/UiStore';
+
+const DEFAULT_FILE_NAME = 'image.png';
+
+export function useClipboardImporter(uiStore: UiStore) {
+  const pasteHandle = (e: ClipboardEvent) => {
+    const { items, files } = e.clipboardData!;
+
+    let fileName = `allusion_${Date.now()}`;
+    const type = items[0].type;
+    if (!type.match(/image/)) {
+      return;
+    }
+
+    const 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;
+    }
+
+    const 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]);
+}