feat(clipboard): add async clipboard support

index.html

@@ -82,6 +82,7 @@ <h1><img src="images/icons/32.png" alt=""/> JS Paint <small class="version-numbe
 		<script src="src/sessions.js"></script>
 		<script src="lib/konami.js"></script>
 		<script src="src/vaporwave-fun.js"></script>
+		<script type="module" src="src/clipboard.js"></script>
 		<script type="module" src="src/nativefs.js"></script>
 		<script type="module" src="src/service-worker.js"></script>
 

src/app.js

@@ -366,6 +366,12 @@ $G.on("cut copy paste", function(e){
 						});
 					});
 				});
+			} else if (typeof window.systemCopy === 'function') {
+				selection.canvas.toBlob(function(blob){
+					sanity_check_blob(blob, function(){
+						window.systemCopy(blob);
+					});
+				});
 			} else {
 				var data_url = selection.canvas.toDataURL();
 				cd.setData("text/x-data-uri; type=image/png", data_url);

src/clipboard.js

@@ -0,0 +1,24 @@
+if ('clipboard' in navigator && 'write' in navigator.clipboard) {
+    window.systemCopy = async blob => {
+        await navigator.clipboard.write([
+            new ClipboardItem(Object.defineProperty({}, blob.type, {value: blob, enumerable: true}))
+        ]);
+    };
+
+    window.systemPaste = async () => {
+        // TODO: Consolidate with other paste logic.
+        const items = await navigator.clipboard.read();
+        for (let item of items) {
+            try {
+                for (let type of item.types) {
+                    if(type.match(/^image\//)) {
+                        const blob = await item.getType(type);
+                        paste_image_from_file(blob);
+                    }
+                }
+            } catch(e) {
+                console.error('Clipboard API paste error', e);
+            }
+        }
+    };
+}

src/menus.js

@@ -132,7 +132,7 @@ var menus = {
 			shortcut: "Ctrl+X",
 			enabled: function(){
 				// @TODO disable if no selection (image or text)
-				return is_electron;
+				return is_electron || !!window.systemCopy;
 			},
 			action: function(){
 				document.execCommand("cut");
@@ -144,7 +144,7 @@ var menus = {
 			shortcut: "Ctrl+C",
 			enabled: function(){
 				// @TODO disable if no selection (image or text)
-				return is_electron;
+				return is_electron || !!window.systemCopy;
 			},
 			action: function(){
 				document.execCommand("copy");
@@ -155,10 +155,15 @@ var menus = {
 			item: "&Paste",
 			shortcut: "Ctrl+V",
 			enabled: function(){
-				return is_electron;
+				// @TODO disable if clipboard is empty
+				return is_electron || !!window.systemPaste;
 			},
 			action: function(){
-				document.execCommand("paste");
+				if (window.systemPaste) {
+					window.systemPaste();
+				} else {
+					document.execCommand("paste");
+				}
 			},
 			description: "Inserts the contents of the Clipboard.",
 		},

sw.js

@@ -591,7 +591,7 @@ self.__precacheManifest = [
   },
   {
     "url": "index.html",
-    "revision": "38dd7f281598658b23c77bc9a37eb4a8"
+    "revision": "ea89df303d8f4f5e7abc97e6599f6a61"
   },
   {
     "url": "lib/canvas.toBlob.js",
@@ -667,12 +667,16 @@ self.__precacheManifest = [
   },
   {
     "url": "src/app.js",
-    "revision": "7359c59f750b9a5020c489dd4bdf8d9e"
+    "revision": "93ae9216f5386f66f6aabf5812d219fa"
   },
   {
     "url": "src/canvas-change.js",
     "revision": "7b4ddd26d91b374ef236e01b5a5bd2e2"
   },
+  {
+    "url": "src/clipboard.js",
+    "revision": "f1339c58c4576f57a5562d50f885f72a"
+  },
   {
     "url": "src/electron-injected.js",
     "revision": "30c2b6a79fdcf300bd0ddce5a2aa9f5b"
@@ -711,7 +715,7 @@ self.__precacheManifest = [
   },
   {
     "url": "src/menus.js",
-    "revision": "f6b2bd6f7f1f3cad2091d158145fcb64"
+    "revision": "202dc214daf1c2b093ce8ee51a0db668"
   },
   {
     "url": "src/nativefs.js",