From 5bcd2072b308d9237f1c9ff1ab448879020be2e0 Mon Sep 17 00:00:00 2001
From: citizenl <citizenl@126.com>
Date: Wed, 11 May 2022 10:35:23 +0800
Subject: [PATCH] feat: saving images from the clipboard use hooks

---
 src/frontend/App.tsx                       |  6 +--
 src/frontend/hooks/useClipboardImporter.ts | 53 ++++++++++++++++++++++
 2 files changed, 56 insertions(+), 3 deletions(-)
 create mode 100644 src/frontend/hooks/useClipboardImporter.ts

diff --git a/src/frontend/App.tsx b/src/frontend/App.tsx
index ca668f60f..895714b24 100644
--- a/src/frontend/App.tsx
+++ b/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>
diff --git a/src/frontend/hooks/useClipboardImporter.ts b/src/frontend/hooks/useClipboardImporter.ts
new file mode 100644
index 000000000..d6680656b
--- /dev/null
+++ b/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]);
+}