From e6950a0029321cdf805ffb74fe5c2ef86bddb60c Mon Sep 17 00:00:00 2001
From: Michael Fix <mrfix84@gmail.com>
Date: Fri, 15 Jan 2021 15:44:51 -0800
Subject: [PATCH] improve keyboard shortcuts (#1159)

---
 components/CopyMenu.js   | 13 ++++++++++---
 components/ExportMenu.js | 11 ++++++++++-
 pages/about.js           | 12 ++++++++++++
 3 files changed, 32 insertions(+), 4 deletions(-)

diff --git a/components/CopyMenu.js b/components/CopyMenu.js
index fe32105..3e3c157 100644
--- a/components/CopyMenu.js
+++ b/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) => {
-    await copyImage(...args)
-    showCopied()
+    if (clipboardSupported) {
+      await copyImage(...args)
+      showCopied()
+    }
+  })
+
+  useKeyboardListener('⌘-⇧-c', e => {
+    e.preventDefault()
+    copy(e)
   })
 
   return (
diff --git a/components/ExportMenu.js b/components/ExportMenu.js
index 0d24d50..a6d384d 100644
--- a/components/ExportMenu.js
+++ b/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">
diff --git a/pages/about.js b/pages/about.js
index e1c0411..136e84a 100644
--- a/pages/about.js
+++ b/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>