feat: implicit keyboard binding

Since `[email protected]` keyboard is implicitly bound to modeling canvas. There is no need to implement keyboard binding in the extension.
We only need to make sure that default VS Code shortcuts do not fire when we are focused on the canvas.

Additionally, we make sure that modeling canvas stays focused after switching tabs, following default VS Code behavior for different file types.

package.json

@@ -33,6 +33,44 @@
         "category": "BPMN"
       }
     ],
+    "keybindings": [
+      {
+        "command": "",
+        "key": "ctrl+a",
+        "mac": "cmd+a",
+        "when": "activeCustomEditorId == 'bpmn-io.bpmnEditor' && focusedView == '' && !inputFocus"
+      },
+      {
+        "command": "",
+        "key": "ctrl+0",
+        "mac": "cmd+0",
+        "when": "activeCustomEditorId == 'bpmn-io.bpmnEditor' && focusedView == ''"
+      },
+      {
+        "command": "",
+        "key": "ctrl+numpad_add",
+        "mac": "cmd+numpad_add",
+        "when": "activeCustomEditorId == 'bpmn-io.bpmnEditor' && focusedView == ''"
+      },
+      {
+        "command": "",
+        "key": "ctrl+numpad_subtract",
+        "mac": "cmd+numpad_subtract",
+        "when": "activeCustomEditorId == 'bpmn-io.bpmnEditor' && focusedView == ''"
+      },
+      {
+        "command": "",
+        "key": "ctrl+=",
+        "mac": "cmd+=",
+        "when": "activeCustomEditorId == 'bpmn-io.bpmnEditor' && focusedView == ''"
+      },
+      {
+        "command": "",
+        "key": "ctrl+-",
+        "mac": "cmd+-",
+        "when": "activeCustomEditorId == 'bpmn-io.bpmnEditor' && focusedView == ''"
+      }
+    ],
     "customEditors": [
       {
         "viewType": "bpmn-io.bpmnEditor",
@@ -90,7 +128,7 @@
   },
   "dependencies": {
     "@vscode/codicons": "^0.0.35",
-    "bpmn-js": "^18.0.0",
-    "bpmn-js-color-picker": "^0.7.0"
+    "bpmn-js": "^18.1.1",
+    "bpmn-js-color-picker": "^0.7.1"
   }
 }

src/bpmn-editor.ts

@@ -303,6 +303,17 @@ export class BpmnEditor implements vscode.CustomEditorProvider<BpmnDocument> {
           document,
           webviewPanel: webviews[0]
         };
+      }),
+      vscode.window.tabGroups.onDidChangeTabs(({ opened, changed }) => {
+
+        const tabs = [ ...opened, ...changed ];
+        const active = tabs.find(tab => tab.isActive);
+        const uri = (active?.input as vscode.TabInputText)?.uri;
+        const webviews = Array.from(this.webviews.get(uri));
+
+        if (!webviews.length) return;
+
+        this.restoreFocusOnCanvas(webviews[0]);
       })
     );
   }
@@ -435,6 +446,15 @@ export class BpmnEditor implements vscode.CustomEditorProvider<BpmnDocument> {
 
   // #endregion
 
+  /**
+   * Restore focus on the modeling canvas. Enables keyboard shortcuts.
+   */
+  private restoreFocusOnCanvas(webviewPanel: vscode.WebviewPanel) {
+    vscode.commands.executeCommand('workbench.action.focusActiveEditorGroup');
+
+    this.postMessage(webviewPanel, 'focusCanvas');
+  }
+
   /**
    * Get the static HTML used for in our editor's webviews.
    */
@@ -566,7 +586,7 @@ class WebviewCollection {
    * Get all known webviews for a given uri.
    */
   public *get(uri: vscode.Uri): Iterable<vscode.WebviewPanel> {
-    const key = uri.toString();
+    const key = uri?.toString();
     for (const entry of this._webviews) {
       if (entry.resource === key) {
         yield entry.webviewPanel;

src/client/bpmn-editor.css

@@ -14,6 +14,10 @@ body {
   height: 100%;
 }
 
+#canvas svg:focus {
+  outline: none;
+}
+
 /* COLOR PICKER */
 
 .djs-popup.color-picker .entry {

src/client/bpmn-editor.js

@@ -10,20 +10,14 @@ import BpmnModeler from 'bpmn-js/lib/Modeler';
 
 import BpmnColorPickerModule from 'bpmn-js-color-picker';
 
-import KeyboardModule from './features/keyboard';
-
 /**
  * @type { import('vscode') }
  */
 const vscode = acquireVsCodeApi();
 
 const modeler = new BpmnModeler({
   container: '#canvas',
-  keyboard: {
-    bindTo: document
-  },
   additionalModules: [
-    KeyboardModule,
     BpmnColorPickerModule
   ]
 });
@@ -83,9 +77,6 @@ window.addEventListener('message', async (event) => {
     break;
   }
 
-  case 'triggerAction':
-    return modeler.get('editorActions').trigger(body.action, body.options);
-
   case 'getText':
     return modeler.saveXML({ format: true }).then(({ xml }) => {
       return vscode.postMessage({
@@ -95,6 +86,9 @@ window.addEventListener('message', async (event) => {
       });
     });
 
+  case 'focusCanvas':
+    modeler.get('canvas').focus();
+    return;
   }
 });