fixed paste now also supports files and images

app.vue

@@ -17,8 +17,8 @@
         <div class="actions">
           <p>Actions</p>
           <div>
-            <img v-if="os == 'windows' || os == 'linux'" src="/ctrl.svg" alt="">
+            <img v-if="os === 'windows' || os === 'linux'" src="/ctrl.svg" alt="">
-            <img v-if="os == 'macos'" src="/cmd.svg" alt="">
+            <img v-if="os === 'macos'" src="/cmd.svg" alt="">
             <img src="/k.svg" alt="">
           </div>
         </div>
@@ -31,9 +31,9 @@
         <div v-for="(item, index) in group.items" :key="item.id"
           :class="['result clothoid-corner', { 'selected': isSelected(groupIndex, index) }]"
           @click="selectItem(groupIndex, index)"
-          :ref="el => { if (isSelected(groupIndex, index)) selectedElement = el }">
+          :ref="el => { if (isSelected(groupIndex, index)) selectedElement = el as HTMLElement }">
           <img v-if="item.content_type === 'image'" :src="getComputedImageUrl(item)" alt="Image" class="favicon-image">
-          <img v-else-if="isUrl(item.content)" :src="getFaviconFromDb(item.favicon)" alt="Favicon" class="favicon">
+          <img v-else-if="isUrl(item.content)" :src="getFaviconFromDb(item.favicon ?? '')" alt="Favicon" class="favicon">
           <FileIcon class="file" v-else />
           <span v-if="item.content_type === 'image'">Image ({{ item.dimensions || 'Loading...' }})</span>
           <span v-else>{{ truncateContent(item.content) }}</span>
@@ -44,7 +44,7 @@
       <img :src="getComputedImageUrl(selectedItem)" alt="Image" class="image">
     </div>
     <OverlayScrollbarsComponent v-else class="content">
-      <img v-if="isYoutubeWatchUrl(selectedItem?.content)" :src="getYoutubeThumbnail(selectedItem.content)"
+      <img v-if="selectedItem?.content && isYoutubeWatchUrl(selectedItem.content)" :src="getYoutubeThumbnail(selectedItem.content)"
         alt="YouTube Thumbnail" class="full-image">
       <span v-else>{{ selectedItem?.content || '' }}</span>
     </OverlayScrollbarsComponent>
@@ -52,10 +52,9 @@
   </div>
 </template>
 
-<script setup>
+<script setup lang="ts">
 import { ref, computed, onMounted, watch, nextTick, shallowRef } from 'vue';
 import Database from '@tauri-apps/plugin-sql';
-import { writeText, writeImage } from '@tauri-apps/plugin-clipboard-manager';
 import { OverlayScrollbarsComponent } from "overlayscrollbars-vue";
 import 'overlayscrollbars/overlayscrollbars.css';
 import { app, window } from '@tauri-apps/api';
@@ -63,35 +62,50 @@ import { platform } from '@tauri-apps/plugin-os';
 import { invoke } from '@tauri-apps/api/core';
 import { enable, isEnabled } from "@tauri-apps/plugin-autostart";
 import { listen } from '@tauri-apps/api/event';
+import { readFile } from '@tauri-apps/plugin-fs';
 
-const db = ref(null);
+interface HistoryItem {
-const history = ref([]);
+  id: number;
-const chunkSize = 50;
+  content: string;
-let offset = 0;
+  content_type: string;
-let isLoading = false;
+  timestamp: string;
-const resultsContainer = ref(null);
+  favicon?: string;
-const searchQuery = ref('');
+  dimensions?: string;
-const selectedGroupIndex = ref(0);
+}
-const selectedItemIndex = ref(0);
-const selectedElement = ref(null);
-const searchInput = ref(null);
-const os = platform();
 
-const groupedHistory = computed(() => {
+interface GroupedHistory {
+  label: string;
+  items: HistoryItem[];
+}
+
+const db: Ref<Database | null> = ref(null);
+const history: Ref<HistoryItem[]> = ref([]);
+const chunkSize: number = 50;
+let offset: number = 0;
+let isLoading: boolean = false;
+const resultsContainer: Ref<InstanceType<typeof OverlayScrollbarsComponent> | null> = ref(null);
+const searchQuery: Ref<string> = ref('');
+const selectedGroupIndex: Ref<number> = ref(0);
+const selectedItemIndex: Ref<number> = ref(0);
+const selectedElement: Ref<HTMLElement | null> = ref(null);
+const searchInput: Ref<HTMLInputElement | null> = ref(null);
+const os: Ref<string> = ref('');
+
+const groupedHistory: ComputedRef<GroupedHistory[]> = computed(() => {
   const now = new Date();
   const today = new Date(now.getFullYear(), now.getMonth(), now.getDate());
 
-  const getWeekNumber = (d) => {
+  const getWeekNumber = (d: Date): number => {
     d = new Date(Date.UTC(d.getFullYear(), d.getMonth(), d.getDate()));
     d.setUTCDate(d.getUTCDate() + 4 - (d.getUTCDay() || 7));
     const yearStart = new Date(Date.UTC(d.getUTCFullYear(), 0, 1));
-    return Math.ceil((((d - yearStart) / 86400000) + 1) / 7);
+    return Math.ceil(((Number(d) - Number(yearStart)) / 86400000 + 1) / 7);
   };
 
   const thisWeek = getWeekNumber(now);
   const thisYear = now.getFullYear();
 
-  const groups = [
+  const groups: GroupedHistory[] = [
     { label: 'Today', items: [] },
     { label: 'Yesterday', items: [] },
     { label: 'This Week', items: [] },
@@ -127,23 +141,23 @@ const groupedHistory = computed(() => {
   return groups.filter(group => group.items.length > 0);
 });
 
-const selectedItem = computed(() => {
+const selectedItem: ComputedRef<HistoryItem | null> = computed(() => {
   const group = groupedHistory.value[selectedGroupIndex.value];
   return group ? group.items[selectedItemIndex.value] : null;
 });
 
-const isSelected = (groupIndex, itemIndex) => {
+const isSelected = (groupIndex: number, itemIndex: number): boolean => {
   return selectedGroupIndex.value === groupIndex && selectedItemIndex.value === itemIndex;
 };
 
-const searchHistory = async () => {
+const searchHistory = async (): Promise<void> => {
   if (!db.value) return;
 
   history.value = [];
   offset = 0;
 
   const query = `%${searchQuery.value}%`;
-  const results = await db.value.select(
+  const results = await db.value.select<HistoryItem[]>(
     'SELECT * FROM history WHERE content LIKE ? ORDER BY timestamp DESC LIMIT ?',
     [query, chunkSize]
   );
@@ -157,7 +171,7 @@ const searchHistory = async () => {
   }));
 };
 
-const selectNext = () => {
+const selectNext = (): void => {
   const currentGroup = groupedHistory.value[selectedGroupIndex.value];
   if (selectedItemIndex.value < currentGroup.items.length - 1) {
     selectedItemIndex.value++;
@@ -168,7 +182,7 @@ const selectNext = () => {
   scrollToSelectedItem();
 };
 
-const selectPrevious = () => {
+const selectPrevious = (): void => {
   if (selectedItemIndex.value > 0) {
     selectedItemIndex.value--;
   } else if (selectedGroupIndex.value > 0) {
@@ -178,32 +192,36 @@ const selectPrevious = () => {
   scrollToSelectedItem();
 };
 
-const selectItem = (groupIndex, itemIndex) => {
+const selectItem = (groupIndex: number, itemIndex: number): void => {
   selectedGroupIndex.value = groupIndex;
   selectedItemIndex.value = itemIndex;
   scrollToSelectedItem();
 };
 
-const pasteSelectedItem = async () => {
+const pasteSelectedItem = async (): Promise<void> => {
-  if (selectedItem.value) {
+  if (!selectedItem.value) return;
+  
+  let content = selectedItem.value.content;
   if (selectedItem.value.content_type === 'image') {
-      await writeImage(selectedItem.value.content);
+    try {
-    } else {
+      content = readFile(content).toString();
-      await writeText(selectedItem.value.content);
+    } catch (error) {
+      console.error('Error reading image file:', error);
+      return;
     }
+  }
+  await invoke("write_and_paste", { content, content_type: selectedItem.value.content_type });
   await hideApp();
-    await invoke("simulate_paste");
-  }
 };
 
-const truncateContent = (content) => {
+const truncateContent = (content: string): string => {
   const maxWidth = 284;
   const charWidth = 9;
   const maxChars = Math.floor(maxWidth / charWidth);
   return content.length > maxChars ? content.slice(0, maxChars - 3) + '...' : content;
 };
 
-const isUrl = (str) => {
+const isUrl = (str: string): boolean => {
   try {
     new URL(str);
     return true;
@@ -212,25 +230,25 @@ const isUrl = (str) => {
   }
 };
 
-const isYoutubeWatchUrl = (url) => {
+const isYoutubeWatchUrl = (url: string): boolean => {
   return /^(https?:\/\/)?(www\.)?(youtube\.com|youtu\.be)\/watch\?v=[\w-]+/.test(url) || /^(https?:\/\/)?(www\.)?youtu\.be\/[\w-]+/.test(url);
 };
 
-const getYoutubeThumbnail = (url) => {
+const getYoutubeThumbnail = (url: string): string => {
   let videoId;
   if (url.includes('youtu.be')) {
     videoId = url.split('youtu.be/')[1];
   } else {
-    videoId = url.match(/[?&]v=([^&]+)/)[1];
+    videoId = url.match(/[?&]v=([^&]+)/)?.[1];
   }
   return `https://img.youtube.com/vi/${videoId}/0.jpg`;
 };
 
-const getFaviconFromDb = (favicon) => {
+const getFaviconFromDb = (favicon: string): string => {
   return `data:image/png;base64,${favicon}`;
 };
 
-const getImageDimensions = (path) => {
+const getImageDimensions = (path: string): Promise<string> => {
   return new Promise(async (resolve) => {
     const img = new Image();
     img.onload = () => resolve(`${img.width}x${img.height}`);
@@ -238,8 +256,8 @@ const getImageDimensions = (path) => {
     if (path.includes('AppData\\Roaming\\net.pandadev.qopy\\images\\')) {
       const filename = path.split('\\').pop();
       try {
-        const imageData = await invoke("read_image", { filename: filename });
+        const imageData = await invoke<Uint8Array>("read_image", { filename: filename });
-        const blob = new Blob([new Uint8Array(imageData)], { type: 'image/png' });
+        const blob = new Blob([imageData], { type: 'image/png' });
         img.src = URL.createObjectURL(blob);
       } catch (error) {
         console.error('Error reading image file:', error);
@@ -251,9 +269,9 @@ const getImageDimensions = (path) => {
   });
 };
 
-const imageUrls = shallowRef({});
+const imageUrls: Ref<Record<number, string>> = shallowRef({});
 
-const getComputedImageUrl = (item) => {
+const getComputedImageUrl = (item: HistoryItem): string => {
   if (!imageUrls.value[item.id]) {
     imageUrls.value[item.id] = '';
     getImageUrl(item.content).then(url => {
@@ -263,12 +281,12 @@ const getComputedImageUrl = (item) => {
   return imageUrls.value[item.id] || '';
 };
 
-const getImageUrl = async (path) => {
+const getImageUrl = async (path: string): Promise<string> => {
   if (path.includes('AppData\\Roaming\\net.pandadev.qopy\\images\\')) {
     const filename = path.split('\\').pop();
     try {
-      const imageData = await invoke("read_image", { filename: filename });
+      const imageData = await invoke<Uint8Array>("read_image", { filename: filename });
-      const blob = new Blob([new Uint8Array(imageData)], { type: 'image/png' });
+      const blob = new Blob([imageData], { type: 'image/png' });
       return URL.createObjectURL(blob);
     } catch (error) {
       console.error('Error reading image file:', error);
@@ -279,11 +297,11 @@ const getImageUrl = async (path) => {
   }
 };
 
-const loadHistoryChunk = async () => {
+const loadHistoryChunk = async (): Promise<void> => {
   if (!db.value || isLoading) return;
 
   isLoading = true;
-  let results;
+  let results: HistoryItem[];
 
   if (searchQuery.value) {
     const query = `%${searchQuery.value}%`;
@@ -316,37 +334,37 @@ const loadHistoryChunk = async () => {
   isLoading = false;
 };
 
-const handleScroll = () => {
+const handleScroll = (): void => {
   if (!resultsContainer.value) return;
   
-  const { viewport } = resultsContainer.value.osInstance().elements();
+  const { viewport } = resultsContainer.value?.osInstance().elements() ?? {};
-  const { scrollTop, scrollHeight, clientHeight } = viewport;
+  const { scrollTop = 0, scrollHeight = 0, clientHeight = 0 } = viewport ?? {};
   
   if (scrollHeight - scrollTop - clientHeight < 100) {
     loadHistoryChunk();
   }
 };
 
-const hideApp = async () => {
+const hideApp = async (): Promise<void> => {
   await app.hide();
   await window.getCurrentWindow().hide();
 };
 
-const focusSearchInput = () => {
+const focusSearchInput = (): void => {
   nextTick(() => {
     searchInput.value?.focus();
   });
 };
 
-const scrollToSelectedItem = () => {
+const scrollToSelectedItem = (): void => {
   nextTick(() => {
     if (selectedElement.value && resultsContainer.value) {
       const osInstance = resultsContainer.value.osInstance();
-      const { viewport } = osInstance.elements();
+      const viewport = osInstance?.elements().viewport;
-      const element = selectedElement.value;
+      if (!viewport) return;
 
       const viewportRect = viewport.getBoundingClientRect();
-      const elementRect = element.getBoundingClientRect();
+      const elementRect = selectedElement.value.getBoundingClientRect();
 
       const isAbove = elementRect.top < viewportRect.top;
       const isBelow = elementRect.bottom > viewportRect.bottom - 8;
@@ -401,6 +419,8 @@ onMounted(async () => {
   if (!await isEnabled()) {
     await enable()
   }
+
+  os.value = await platform();
 });
 
 </script>

package.json

@@ -14,6 +14,7 @@
     "@tauri-apps/cli": "^2.0.0-rc.7",
     "@tauri-apps/plugin-autostart": "^2.0.0-rc.0",
     "@tauri-apps/plugin-clipboard-manager": "^2.0.0-rc.0",
+    "@tauri-apps/plugin-fs": "^2.0.0-rc.1",
     "@tauri-apps/plugin-os": "^2.0.0-rc.0",
     "@tauri-apps/plugin-sql": "^2.0.0-rc.0",
     "nuxt": "^3.13.0",

src-tauri/Cargo.lock

@@ -3621,6 +3621,7 @@ dependencies = [
  "tauri-plugin-autostart",
  "tauri-plugin-clipboard",
  "tauri-plugin-dialog",
+ "tauri-plugin-fs",
  "tauri-plugin-os",
  "tauri-plugin-prevent-default",
  "tauri-plugin-sql",

src-tauri/Cargo.toml

@@ -10,12 +10,17 @@ rust-version = "1.70"
 tauri-build = { version = "2.0.0-rc.6", features = [] }
 
 [dependencies]
-tauri = { version = "2.0.0-rc.6", features = [ "macos-private-api", "tray-icon", "image-png"] }
+tauri = { version = "2.0.0-rc.6", features = [
+  "macos-private-api",
+  "tray-icon",
+  "image-png",
+] }
 tauri-plugin-sql = { version = "2.0.0-rc.0", features = ["sqlite"] }
 tauri-plugin-autostart = "2.0.0-rc.0"
 tauri-plugin-os = "2.0.0-rc.0"
 tauri-plugin-updater = "2.0.0-rc.1"
 tauri-plugin-dialog = "2.0.0-rc.0"
+tauri-plugin-fs = "2.0.0-rc.0"
 tauri-plugin-clipboard = "2.1.6"
 tauri-plugin-prevent-default = "0.4.0"
 sqlx = { version = "0.8.0", features = ["runtime-tokio-native-tls", "sqlite"] }

src-tauri/src/api/clipboard.rs

@@ -16,9 +16,11 @@ use sha2::{Sha256, Digest};
 use rdev::{simulate, Key, EventType};
 use lazy_static::lazy_static;
 use image::ImageFormat;
+use std::sync::atomic::{AtomicBool, Ordering};
 
 lazy_static! {
     static ref APP_DATA_DIR: Mutex<Option<std::path::PathBuf>> = Mutex::new(None);
+    static ref IS_PROGRAMMATIC_PASTE: AtomicBool = AtomicBool::new(false);
 }
 
 pub fn set_app_data_dir(path: std::path::PathBuf) {
@@ -35,7 +37,33 @@ pub fn read_image(filename: String) -> Result<Vec<u8>, String> {
 }
 
 #[tauri::command]
-pub fn simulate_paste() {
+pub async fn write_and_paste<R: Runtime>(app_handle: tauri::AppHandle<R>, content: String, content_type: String) -> Result<(), String> {
+    let clipboard = app_handle.state::<Clipboard>();
+
+    match content_type.as_str() {
+        "text" => clipboard.write_text(content).map_err(|e| e.to_string())?,
+        "image" => {
+            clipboard.write_image_base64(content).map_err(|e| e.to_string())?;
+        },
+        "files" => {
+            clipboard.write_files_uris(content.split(", ").map(|file| file.to_string()).collect::<Vec<String>>()).map_err(|e| e.to_string())?;
+        },
+        _ => return Err("Unsupported content type".to_string()),
+    }
+
+    IS_PROGRAMMATIC_PASTE.store(true, Ordering::SeqCst);
+
+    simulate_paste();
+
+    tokio::spawn(async {
+        tokio::time::sleep(tokio::time::Duration::from_millis(500)).await;
+        IS_PROGRAMMATIC_PASTE.store(false, Ordering::SeqCst);
+    });
+
+    Ok(())
+}
+
+fn simulate_paste() {
     let mut events = vec![
         EventType::KeyPress(Key::ControlLeft),
         EventType::KeyPress(Key::KeyV),
@@ -65,6 +93,11 @@ pub fn setup<R: Runtime>(app: &AppHandle<R>) {
     app.clone().listen("plugin:clipboard://clipboard-monitor/update", move |_event| {
         let app = app.clone();
         runtime.block_on(async move {
+            if IS_PROGRAMMATIC_PASTE.load(Ordering::SeqCst) {
+                println!("Ignoring programmatic paste");
+                return;
+            }
+
             let clipboard = app.state::<Clipboard>();
             let available_types = clipboard.available_types().unwrap();
             
@@ -79,12 +112,6 @@ pub fn setup<R: Runtime>(app: &AppHandle<R>) {
                             insert_content_if_not_exists(app.clone(), pool.clone(), "image", base64_image).await;
                         }
                         let _ = app.emit("plugin:clipboard://image-changed", ());
-                    } else if available_types.rtf {
-                        println!("Handling RTF change");
-                        if let Ok(rtf) = clipboard.read_rtf() {
-                            insert_content_if_not_exists(app.clone(), pool.clone(), "rtf", rtf).await;
-                        }
-                        let _ = app.emit("plugin:clipboard://rtf-changed", ());
                     } else if available_types.files {
                         println!("Handling files change");
                         if let Ok(files) = clipboard.read_files() {

src-tauri/src/main.rs

@@ -17,6 +17,7 @@ fn main() {
         .plugin(tauri_plugin_os::init())
         .plugin(tauri_plugin_sql::Builder::default().build())
         .plugin(tauri_plugin_dialog::init())
+        .plugin(tauri_plugin_fs::init())
         .plugin(tauri_plugin_updater::Builder::default().build())
         .plugin(tauri_plugin_autostart::init(
             MacosLauncher::LaunchAgent,
@@ -69,9 +70,9 @@ fn main() {
             }
         })
         .invoke_handler(tauri::generate_handler![
-            api::clipboard::simulate_paste,
             api::clipboard::get_image_path,
-            api::clipboard::read_image
+            api::clipboard::write_and_paste,
+            api::clipboard::read_image,
         ])
         .run(tauri::generate_context!())
         .expect("error while running tauri application");