FileBrowser: Add shortcuts (#10206)

packages/filebrowser-extension/src/index.ts

@@ -1081,6 +1081,8 @@ function addCommands(
     });
   }
 
+  // matches the filebrowser itself
+  const selectorBrowser = '.jp-FileBrowser-listing';
   // matches anywhere on filebrowser
   const selectorContent = '.jp-DirListing-content';
   // matches all filebrowser items
@@ -1174,6 +1176,37 @@ function addCommands(
     selector: '.jp-DirListing-header',
     rank: 14
   });
+
+  app.commands.addKeyBinding({
+    command: CommandIDs.del,
+    selector: selectorBrowser,
+    keys: ['Delete']
+  });
+  app.commands.addKeyBinding({
+    command: CommandIDs.cut,
+    selector: selectorBrowser,
+    keys: ['Ctrl X']
+  });
+  app.commands.addKeyBinding({
+    command: CommandIDs.copy,
+    selector: selectorBrowser,
+    keys: ['Ctrl C']
+  });
+  app.commands.addKeyBinding({
+    command: CommandIDs.paste,
+    selector: selectorBrowser,
+    keys: ['Ctrl V']
+  });
+  app.commands.addKeyBinding({
+    command: CommandIDs.rename,
+    selector: selectorBrowser,
+    keys: ['F2']
+  });
+  app.commands.addKeyBinding({
+    command: CommandIDs.duplicate,
+    selector: selectorBrowser,
+    keys: ['Ctrl D']
+  });
 }
 
 /**

packages/filebrowser/src/browser.ts

@@ -138,6 +138,9 @@ export class FileBrowser extends Widget {
     this.layout.addWidget(this._crumbs);
     this.layout.addWidget(this._listing);
 
+    // We need to make the FileBrowser focusable so that it receives keyboard events
+    this.node.tabIndex = 0;
+
     if (options.restore !== false) {
       void model.restore(this.id);
     }