improve keyboard shortcuts (#1159)

components/CopyMenu.js

@@ -1,6 +1,6 @@
 import React from 'react'
 import { useRouter } from 'next/router'
-import { useCopyTextHandler, useAsyncCallback } from 'actionsack'
+import { useCopyTextHandler, useAsyncCallback, useKeyboardListener } from 'actionsack'
 import morph from 'morphmorph'
 
 import { COLORS } from '../lib/constants'
@@ -64,8 +64,15 @@ function CopyMenu({ isVisible, toggleVisibility, copyImage, carbonRef }) {
   )
 
   const [copy, { loading }] = useAsyncCallback(async (...args) => {
+    if (clipboardSupported) {
       await copyImage(...args)
       showCopied()
+    }
+  })
+
+  useKeyboardListener('⌘-⇧-c', e => {
+    e.preventDefault()
+    copy(e)
   })
 
   return (

components/ExportMenu.js

@@ -34,6 +34,13 @@ function useSafari() {
   return isSafari
 }
 
+function preventDefault(fn) {
+  return e => {
+    e.preventDefault()
+    return fn(e)
+  }
+}
+
 function ExportMenu({
   backgroundImage,
   onChange,
@@ -48,7 +55,6 @@ function ExportMenu({
   const input = React.useRef()
 
   const [exportImage, { loading }] = useAsyncCallback(exp)
-  useKeyboardListener('⌘-⇧-e', () => exportImage())
 
   const disablePNG = isSafari && (tooLarge || !online)
 
@@ -59,6 +65,9 @@ function ExportMenu({
       filename: input.current && input.current.value,
     })
 
+  useKeyboardListener('⌘-⇧-e', preventDefault(handleExport('png')))
+  useKeyboardListener('⌘-⇧-s', preventDefault(handleExport('svg')))
+
   return (
     <div className="export-menu-container">
       <div className="flex">

pages/about.js

@@ -99,6 +99,18 @@ export default function About() {
                   <kbd>⇧ ⌘ E</kbd>
                 </td>
               </tr>
+              <tr>
+                <td>Export as SVG</td>
+                <td>
+                  <kbd>⇧ ⌘ S</kbd>
+                </td>
+              </tr>
+              <tr>
+                <td>Copy image to clipboard</td>
+                <td>
+                  <kbd>⇧ ⌘ C</kbd>
+                </td>
+              </tr>
               <tr>
                 <td>Reset settings</td>
                 <td>