🎆 Pasting images from clipboard

packages/renderer/src/lib/tiptap/exts/image.js

@@ -18,11 +18,11 @@ async function insertImages(files, callback) {
     if (file.path) {
       const { fileName } = await copyImage(file.path, noteId);
 
-      callback(`assets://${noteId}/${fileName}`, name);
+      callback(`assets://${noteId}/${fileName}`, file.name);
     } else {
       const { fileName } = await writeImageFile(file, noteId);
 
-      callback(`assets://${noteId}/${fileName}`, name);
+      callback(`assets://${noteId}/${fileName}`, file.name);
     }
   }
 }
@@ -47,6 +47,17 @@ export default Image.extend({
               });
             });
           },
+          copy: async (view, event) => {
+            // Handle copying images from the editor (optional, depending on your use case)
+            const { from, to } = view.state.selection;
+            const slice = view.state.doc.slice(from, to);
+            const content = view.state.schema.nodeFromJSON(slice.toJSON());
+
+            const clipboardData = event.clipboardData || window.clipboardData;
+            clipboardData.setData('application/json', JSON.stringify(content));
+
+            event.preventDefault();
+          },
         },
         handleDrop: (view, event) => {
           insertImages(event.dataTransfer.files, (src, alt) => {
@@ -69,6 +80,37 @@ export default Image.extend({
       },
     });
 
-    return [handleImagePaste];
+    const handleImageCopy = new Plugin({
+      key: new PluginKey('handleCopyLink'),
+      props: {
+        handleDOMEvents: {
+          copy: async (view, event) => {
+            // Handle copying images from outside the editor (e.g., from other websites)
+            const clipboardData = event.clipboardData || window.clipboardData;
+            const items = Array.from(clipboardData.items || []);
+
+            const imageFiles = items.filter(
+              (item) => item.type.startsWith('image/') && item.kind === 'file'
+            );
+
+            if (imageFiles.length > 0) {
+              insertImages(imageFiles, (src, alt) => {
+                clipboardData.setData('text/plain', alt);
+                clipboardData.setData(
+                  'text/html',
+                  `<img src="${src}" alt="${alt}">`
+                );
+                clipboardData.setData('text/uri-list', src);
+
+                // Add any other formats as needed
+                event.preventDefault();
+              });
+            }
+          },
+        },
+      },
+    });
+
+    return [handleImagePaste, handleImageCopy];
   },
 });

packages/renderer/src/utils/copy-image.js

@@ -10,16 +10,26 @@ const { path, ipcRenderer } = window.electron;
  **/
 async function readFile(file) {
   return new Promise((resolve, reject) => {
-    const fileReader = new FileReader(file);
+    const fileReader = new FileReader();
     fileReader.onload = (event) => {
-      /* @type {ArrayBuffer} */
       const result = event.target.result;
-      const view = new Uint32Array(result);
-      resolve(view);
+      const uint8Array = new Uint8Array(result);
+
+      // Ensure that the length is a multiple of 4
+      const paddedLength = Math.ceil(uint8Array.length / 4) * 4;
+      const paddedUint8Array = new Uint8Array(paddedLength);
+      paddedUint8Array.set(uint8Array);
+
+      // Create Uint32Array from padded Uint8Array
+      const uint32Array = new Uint32Array(paddedUint8Array.buffer);
+
+      resolve(uint32Array);
     };
+
     fileReader.onerror = (event) => {
       reject(event);
     };
+
     fileReader.readAsArrayBuffer(file);
   });
 }