feat: Add cmd+o shortcut to load scene (#2732)

src/actions/actionExport.tsx

@@ -9,7 +9,6 @@ import { loadFromJSON, saveAsJSON } from "../data";
 import { t } from "../i18n";
 import useIsMobile from "../is-mobile";
 import { KEYS } from "../keys";
-import { muteFSAbortError } from "../utils";
 import { register } from "./register";
 
 export const actionChangeProjectName = register({
@@ -156,18 +155,29 @@ export const actionSaveAsScene = register({
 
 export const actionLoadScene = register({
   name: "loadScene",
-  perform: (
+  perform: async (elements, appState) => {
-    elements,
+    try {
-    appState,
+      const {
-    { elements: loadedElements, appState: loadedAppState, error },
+        elements: loadedElements,
-  ) => ({
+        appState: loadedAppState,
-    elements: loadedElements,
+      } = await loadFromJSON(appState);
-    appState: {
+      return {
-      ...loadedAppState,
+        elements: loadedElements,
-      errorMessage: error,
+        appState: loadedAppState,
-    },
+        commitToHistory: true,
-    commitToHistory: true,
+      };
-  }),
+    } catch (error) {
+      if (error?.name === "AbortError") {
+        return false;
+      }
+      return {
+        elements,
+        appState: { ...appState, errorMessage: error.message },
+        commitToHistory: false,
+      };
+    }
+  },
+  keyTest: (event) => event[KEYS.CTRL_OR_CMD] && event.key === KEYS.O,
   PanelComponent: ({ updateData, appState }) => (
     <ToolButton
       type="button"
@@ -175,16 +185,7 @@ export const actionLoadScene = register({
       title={t("buttons.load")}
       aria-label={t("buttons.load")}
       showAriaLabel={useIsMobile()}
-      onClick={() => {
+      onClick={updateData}
-        loadFromJSON(appState)
-          .then(({ elements, appState }) => {
-            updateData({ elements, appState });
-          })
-          .catch(muteFSAbortError)
-          .catch((error) => {
-            updateData({ error: error.message });
-          });
-      }}
     />
   ),
 });

src/keys.ts

@@ -40,6 +40,7 @@ export const KEYS = {
   D: "d",
   E: "e",
   L: "l",
+  O: "o",
   P: "p",
   Q: "q",
   R: "r",

src/packages/excalidraw/CHANGELOG.md

@@ -16,6 +16,7 @@ Please add the latest change on the top under the correct section.
 
 ### Features
 
+- Add `cmd+o` shortcut to load scene [#2732](https://github.com/excalidraw/excalidraw/pull/2732)
 - Remove language picker, and add `langCode`, `renderFooter` [#2644](https://github.com/excalidraw/excalidraw/pull/2644):
   - BREAKING: removed the language picker from UI. It is now the host app's responsibility to implement a language picker if desirable, using the newly added [`renderFooter`](https://github.com/excalidraw/excalidraw/blob/master/src/packages/excalidraw/README.md#renderFooter) prop. The reasoning is that the i18n should be controlled by the app itself, not by the nested Excalidraw component.
   - Added [`langCode`](https://github.com/excalidraw/excalidraw/blob/master/src/packages/excalidraw/README.md#langCode) prop to control the UI language.