Add 'Close Current Tab' keybinding

Author: Ives van Hoorne

packages/app/src/app/pages/Sandbox/Editor/Content/Tabs/index.js

@@ -15,13 +15,6 @@ import {
 } from './elements';
 
 class EditorTabs extends React.Component {
-  componentWillMount() {
-    window.addEventListener('keydown', this.closeListener);
-  }
-  componentWillUnmount() {
-    window.removeEventListener('keydown', this.closeListener);
-  }
-
   componentDidUpdate(prevProps) {
     if (this.props.currentModuleId !== prevProps.currentModuleId) {
       // We need to scroll to the tab
@@ -42,16 +35,6 @@ class EditorTabs extends React.Component {
     }
   }
 
-  closeListener = e => {
-    if ((e.ctrlKey || e.metaKey) && e.keyCode === 87) {
-      e.preventDefault();
-      const currentPos = this.props.tabs
-        .filter(x => x)
-        .findIndex(t => t.moduleId === this.props.currentModuleId);
-      this.closeTab(currentPos);
-    }
-  };
-
   closeTab = tabIndex => {
     this.props.signals.editor.tabClosed({ tabIndex });
   };

packages/common/utils/keybindings.js

@@ -53,6 +53,18 @@ export const KEYBINDINGS = {
     signal: 'workspace.toggleCurrentWorkspaceItem',
   },
 
+  'editor.close-tab': {
+    title: 'Close Current Tab',
+    type: 'View',
+    bindings: [['Control', 'W']],
+    signal: 'editor.tabClosed',
+    payload: state => ({
+      tabIndex: state.editor.tabs
+        .filter(x => x)
+        .findIndex(t => t.moduleId === state.currentModuleId),
+    }),
+  },
+
   'editor.zen-mode': {
     title: 'Toggle Zen Mode',
     type: 'View',