From d38f5a037b1ebece2a5402bb61f4a941d2f7efa9 Mon Sep 17 00:00:00 2001
From: Jang Min <proke03@naver.com>
Date: Fri, 3 Feb 2023 01:14:39 +0900
Subject: [PATCH] feat: export menu accessibility (#1121)

* Move export submenu(Edit -> File)

* Add export menu to context menu with no selection

* Add export shortcuts
---
 .../components/ContextMenu/ContextMenu.tsx    | 23 ++++++++
 .../src/components/TopPanel/Menu/Menu.tsx     | 42 +++++++--------
 .../tldraw/src/hooks/useKeyboardShortcuts.tsx | 54 ++++++++++++++++++-
 3 files changed, 97 insertions(+), 22 deletions(-)

diff --git a/packages/tldraw/src/components/ContextMenu/ContextMenu.tsx b/packages/tldraw/src/components/ContextMenu/ContextMenu.tsx
index 2b0997909..79b578c4b 100644
--- a/packages/tldraw/src/components/ContextMenu/ContextMenu.tsx
+++ b/packages/tldraw/src/components/ContextMenu/ContextMenu.tsx
@@ -280,6 +280,29 @@ const InnerMenu = React.memo(function InnerMenu() {
           <CMRowButton onClick={handleRedo} kbd="#⇧Z" id="TD-ContextMenu-Redo">
             <FormattedMessage id="redo" />
           </CMRowButton>
+          <ContextMenuSubMenu
+            label={`${intl.formatMessage({ id: 'export.as' })}...`}
+            size="small"
+            id="TD-ContextMenu-Export"
+          >
+            <CMRowButton onClick={handleExportSVG} id="TD-ContextMenu-Export-SVG">
+              SVG
+            </CMRowButton>
+            <CMRowButton onClick={handleExportPNG} id="TD-ContextMenu-Export-PNG">
+              PNG
+            </CMRowButton>
+            <CMRowButton onClick={handleExportJPG} id="TD-ContextMenu-Export-JPG">
+              JPG
+            </CMRowButton>
+            <CMRowButton onClick={handleExportWEBP} id="TD-ContextMenu-Export-WEBP">
+              WEBP
+            </CMRowButton>
+            {isDebugMode && (
+              <CMRowButton onClick={handleExportJSON} id="TD-ContextMenu-Export-JSON">
+                JSON
+              </CMRowButton>
+            )}
+          </ContextMenuSubMenu>
         </>
       )}
     </>
diff --git a/packages/tldraw/src/components/TopPanel/Menu/Menu.tsx b/packages/tldraw/src/components/TopPanel/Menu/Menu.tsx
index 4bcd9820f..db25db0a0 100644
--- a/packages/tldraw/src/components/TopPanel/Menu/Menu.tsx
+++ b/packages/tldraw/src/components/TopPanel/Menu/Menu.tsx
@@ -161,6 +161,27 @@ export const Menu = React.memo(function Menu({ readOnly }: MenuProps) {
                   ...
                 </DMItem>
               )}
+              <DMSubMenu
+                label={`${intl.formatMessage({ id: 'export.as' })}...`}
+                size="small"
+                id="TD-MenuItem-Export"
+              >
+                <DMItem onClick={handleExportSVG} id="TD-MenuItem-Export-SVG">
+                  SVG
+                </DMItem>
+                <DMItem onClick={handleExportPNG} id="TD-MenuItem-Export-PNG">
+                  PNG
+                </DMItem>
+                <DMItem onClick={handleExportJPG} id="TD-MenuItem-Export-JPG">
+                  JPG
+                </DMItem>
+                <DMItem onClick={handleExportWEBP} id="TD-MenuItem-Export-WEBP">
+                  WEBP
+                </DMItem>
+                <DMItem onClick={handleExportJSON} id="TD-MenuItem-Export-JSON">
+                  JSON
+                </DMItem>
+              </DMSubMenu>
               {!disableAssets && (
                 <>
                   <Divider />
@@ -233,27 +254,6 @@ export const Menu = React.memo(function Menu({ readOnly }: MenuProps) {
                 JSON
               </DMItem>
             </DMSubMenu>
-            <DMSubMenu
-              label={`${intl.formatMessage({ id: 'export.as' })}...`}
-              size="small"
-              id="TD-MenuItem-Export"
-            >
-              <DMItem onClick={handleExportSVG} id="TD-MenuItem-Export-SVG">
-                SVG
-              </DMItem>
-              <DMItem onClick={handleExportPNG} id="TD-MenuItem-Export-PNG">
-                PNG
-              </DMItem>
-              <DMItem onClick={handleExportJPG} id="TD-MenuItem-Export-JPG">
-                JPG
-              </DMItem>
-              <DMItem onClick={handleExportWEBP} id="TD-MenuItem-Export-WEBP">
-                WEBP
-              </DMItem>
-              <DMItem onClick={handleExportJSON} id="TD-MenuItem-Export-JSON">
-                JSON
-              </DMItem>
-            </DMSubMenu>
 
             <Divider />
             <DMItem
diff --git a/packages/tldraw/src/hooks/useKeyboardShortcuts.tsx b/packages/tldraw/src/hooks/useKeyboardShortcuts.tsx
index 27c436c7c..2796245f1 100644
--- a/packages/tldraw/src/hooks/useKeyboardShortcuts.tsx
+++ b/packages/tldraw/src/hooks/useKeyboardShortcuts.tsx
@@ -1,7 +1,7 @@
 import * as React from 'react'
 import { useHotkeys } from 'react-hotkeys-hook'
 import { useFileSystemHandlers, useTldrawApp } from '~hooks'
-import { AlignStyle, TDShapeType } from '~types'
+import { AlignStyle, TDExportType, TDShapeType } from '~types'
 
 export function useKeyboardShortcuts(ref: React.RefObject<HTMLDivElement>) {
   const app = useTldrawApp()
@@ -227,6 +227,58 @@ export function useKeyboardShortcuts(ref: React.RefObject<HTMLDivElement>) {
     undefined,
     [app]
   )
+
+  useHotkeys(
+    'ctrl+alt+1,⌘+alt+1',
+    (e) => {
+      if (!canHandleEvent()) return
+
+      app.exportImage(TDExportType.SVG, { scale: 2, quality: 1 })
+    },
+    undefined,
+    [app]
+  )
+  useHotkeys(
+    'ctrl+alt+2,⌘+alt+2',
+    (e) => {
+      if (!canHandleEvent()) return
+
+      app.exportImage(TDExportType.PNG, { scale: 2, quality: 1 })
+    },
+    undefined,
+    [app]
+  )
+  useHotkeys(
+    'ctrl+alt+3,⌘+alt+3',
+    (e) => {
+      if (!canHandleEvent()) return
+
+      app.exportImage(TDExportType.JPG, { scale: 2, quality: 1 })
+    },
+    undefined,
+    [app]
+  )
+  useHotkeys(
+    'ctrl+alt+4,⌘+alt+4',
+    (e) => {
+      if (!canHandleEvent()) return
+
+      app.exportImage(TDExportType.WEBP, { scale: 2, quality: 1 })
+    },
+    undefined,
+    [app]
+  )
+  useHotkeys(
+    'ctrl+alt+5,⌘+alt+5',
+    (e) => {
+      if (!canHandleEvent()) return
+
+      app.exportJson()
+    },
+    undefined,
+    [app]
+  )
+
   useHotkeys(
     'ctrl+o,⌘+o',
     (e) => {