Added paste image support on Tauri

package.json

@@ -23,6 +23,7 @@
     "@fontsource/roboto": "4.5.8",
     "@khanacademy/simple-markdown": "0.8.6",
     "@matrix-org/olm": "3.2.14",
+    "@tauri-apps/api": "1.3.0",
     "@tippyjs/react": "4.2.6",
     "blurhash": "2.0.4",
     "browser-encrypt-attachment": "0.3.0",

src/app/organisms/room/RoomViewInput.jsx

@@ -10,7 +10,7 @@ import cons from '../../../client/state/cons';
 import settings from '../../../client/state/settings';
 import { openEmojiBoard, openReusableContextMenu } from '../../../client/action/navigation';
 import navigation from '../../../client/state/navigation';
-import { bytesToSize, getEventCords } from '../../../util/common';
+import { base64ToFile, bytesToSize, getEventCords } from '../../../util/common';
 import { getUsername } from '../../../util/matrixUtil';
 import colorMXID from '../../../util/colorMXID';
 
@@ -34,6 +34,7 @@ import FileIC from '../../../../public/res/ic/outlined/file.svg';
 import CrossIC from '../../../../public/res/ic/outlined/cross.svg';
 
 import commands from './commands';
+import { invoke } from '@tauri-apps/api/tauri'
 
 const CMD_REGEX = /(^\/|:|@)(\S*)$/;
 let isTyping = false;
@@ -302,7 +303,24 @@ function RoomViewInput({
     }
   };
 
-  const handlePaste = (e) => {
+  const handlePaste = async (e) => {
+    // If running in Tauri, try to read any images from the clipboard.
+    // If none are found, proceed as normal.
+    if (window.__TAURI__) {
+      try {
+        const result = await invoke('clipboard_read_image')
+        const file = base64ToFile(result, 'image.png', 'image/png')
+
+        e.preventDefault()
+
+        if (attachment === null) {
+          attachImage(roomId, file)
+        }
+      } catch (e) {
+        // No image found, proceed as normal.
+      }
+    }
+
     if (e.clipboardData === false) {
       return;
     }
@@ -314,20 +332,21 @@ function RoomViewInput({
     for (let i = 0; i < e.clipboardData.items.length; i += 1) {
       const item = e.clipboardData.items[i];
       if (item.type.indexOf('image') !== -1) {
-        const image = item.getAsFile();
-        if (attachment === null) {
-          setAttachment(image);
-          if (image !== null) {
-            roomsInput.setAttachment(roomId, image);
-            return;
-          }
-        } else {
+        if (attachment !== null) {
           return;
         }
+        attachImage(roomId, item.getAsFile())
       }
     }
   };
 
+  function attachImage(roomId, image) {
+    if (image) {
+      setAttachment(image);
+      roomsInput.setAttachment(roomId, image);
+    }
+  }
+
   function addEmoji(emoji) {
     textAreaRef.current.value += emoji.unicode;
     textAreaRef.current.focus();

src/util/common.js

@@ -228,3 +228,21 @@ export function parseIdUri(uri) {
   if (!res) return null;
   return res[1];
 }
+
+/**
+ * @param {string} base64
+ * @param {string} filename
+ * @param {string} type
+ * @returns {File}
+ */
+export function base64ToFile(base64,filename, type) {
+  const binary = atob(base64)
+  let n = binary.length
+  const u8arr = new Uint8Array(n);
+
+  while(n--){
+    u8arr[n] = binary.charCodeAt(n);
+  }
+
+  return new File([u8arr], filename, {type});
+}