Merge pull request #2395 from sdivyanshu90/keyboard_shortcut_add_file

Added a keyboard shortcut for adding files

Author: raclim

client/common/useKeyDownHandlers.js

@@ -38,6 +38,9 @@ export default function useKeyDownHandlers(keyHandlers) {
           /^\d+$/.test(e.code.at(-1)) ? e.code.at(-1) : e.key.toLowerCase()
         }`
       ]?.(e);
+    } else if (isCtrl && e.altKey && e.code === 'KeyN') {
+      // specifically for creating a new file
+      handlers.current[`ctrl-alt-n`]?.(e);
     } else if (isCtrl) {
       handlers.current[`ctrl-${e.key.toLowerCase()}`]?.(e);
     }

client/modules/IDE/components/Header/Nav.jsx

@@ -133,6 +133,8 @@ const ProjectMenu = () => {
 
   const replaceCommand =
     metaKey === 'Ctrl' ? `${metaKeyName}+H` : `${metaKeyName}+⌥+F`;
+  const newFileCommand =
+    metaKey === 'Ctrl' ? `${metaKeyName}+Alt+N` : `${metaKeyName}+⌥+N`;
 
   return (
     <ul className="nav__items-left" role="menubar">
@@ -220,6 +222,7 @@ const ProjectMenu = () => {
       <NavDropdownMenu id="sketch" title={t('Nav.Sketch.Title')}>
         <NavMenuItem onClick={() => dispatch(newFile(rootFile.id))}>
           {t('Nav.Sketch.AddFile')}
+          <span className="nav__keyboard-shortcut">{newFileCommand}</span>
         </NavMenuItem>
         <NavMenuItem onClick={() => dispatch(newFolder(rootFile.id))}>
           {t('Nav.Sketch.AddFolder')}

client/modules/IDE/components/Header/__snapshots__/Nav.unit.test.jsx.snap

@@ -637,6 +637,11 @@ exports[`Nav renders editor version for desktop 1`] = `
                 role="menuitem"
               >
                 Add File
+                <span
+                  class="nav__keyboard-shortcut"
+                >
+                  Ctrl+Alt+N
+                </span>
               </button>
             </li>
             <li

client/modules/IDE/components/IDEKeyHandlers.jsx

@@ -8,7 +8,8 @@ import {
   expandSidebar,
   showErrorModal,
   startSketch,
-  stopSketch
+  stopSketch,
+  newFile
 } from '../actions/ide';
 import { setAllAccessibleOutput } from '../actions/preferences';
 import { cloneProject, saveProject } from '../actions/project';
@@ -72,6 +73,11 @@ export const useIDEKeyHandlers = ({ getContent }) => {
         sidebarIsExpanded ? collapseSidebar() : expandSidebar()
       );
     },
+    'ctrl-alt-n': (e) => {
+      e.preventDefault();
+      e.stopPropagation();
+      dispatch(newFile());
+    },
     'ctrl-`': (e) => {
       e.preventDefault();
       dispatch(consoleIsExpanded ? collapseConsole() : expandConsole());

client/modules/IDE/components/KeyboardShortcutModal.jsx

@@ -6,6 +6,8 @@ function KeyboardShortcutModal() {
   const { t } = useTranslation();
   const replaceCommand =
     metaKey === 'Ctrl' ? `${metaKeyName} + H` : `${metaKeyName} + ⌥ + F`;
+  const newFileCommand =
+    metaKey === 'Ctrl' ? `${metaKeyName} + Alt + N` : `${metaKeyName} + ⌥ + N`;
   return (
     <div className="keyboard-shortcuts">
       <h3 className="keyboard-shortcuts__title">
@@ -69,6 +71,10 @@ function KeyboardShortcutModal() {
           <span className="keyboard-shortcut__command">{metaKeyName} + K</span>
           <span>{t('KeyboardShortcuts.CodeEditing.ColorPicker')}</span>
         </li>
+        <li className="keyboard-shortcut-item">
+          <span className="keyboard-shortcut__command">{newFileCommand}</span>
+          <span>{t('KeyboardShortcuts.CodeEditing.CreateNewFile')}</span>
+        </li>
       </ul>
       <h3 className="keyboard-shortcuts__title">General</h3>
       <ul className="keyboard-shortcuts__list">

translations/locales/en-US/translations.json

@@ -207,7 +207,8 @@
       "FindNextTextMatch": "Find Next Text Match",
       "FindPreviousTextMatch": "Find Previous Text Match",
       "CodeEditing": "Code Editing",
-      "ColorPicker": "Show Inline Color Picker"
+      "ColorPicker": "Show Inline Color Picker",
+      "CreateNewFile": "Create New File"
     },
     "General": {
       "StartSketch": "Start Sketch",