deps: update dependency bpmn-js to v18

CHANGELOG.md

@@ -6,6 +6,12 @@ All notable changes to the [bpmn.io vs-code extension](https://github.com/bpmn-i
 
 ___Note:__ Yet to be released changes appear here._
 
+## 0.22.0
+
+* `FIX`: make standard keyboard shortcuts work for macOS ([#92](https://github.com/bpmn-io/vs-code-bpmn-io/issues/92))
+* `DEPS`: update dependency bpmn-js to v18
+* `CHORE`: handle BPMN key bindings with VS Code API
+
 ## 0.21.5 (2024-09-25)
 
 ## What's Changed

package.json

@@ -33,6 +33,50 @@
         "category": "BPMN"
       }
     ],
+    "keybindings": [
+      {
+        "command": "",
+        "key": "ctrl+a",
+        "mac": "cmd+a",
+        "when": "bpmn-io.bpmnEditor.canvasFocused"
+      },
+      {
+        "command": "",
+        "key": "ctrl+0",
+        "mac": "cmd+0",
+        "when": "bpmn-io.bpmnEditor.canvasFocused"
+      },
+      {
+        "command": "",
+        "key": "ctrl+numpad_add",
+        "mac": "cmd+numpad_add",
+        "when": "bpmn-io.bpmnEditor.canvasFocused"
+      },
+      {
+        "command": "",
+        "key": "ctrl+numpad_subtract",
+        "mac": "cmd+numpad_subtract",
+        "when": "bpmn-io.bpmnEditor.canvasFocused"
+      },
+      {
+        "command": "",
+        "key": "ctrl+=",
+        "mac": "cmd+=",
+        "when": "bpmn-io.bpmnEditor.canvasFocused"
+      },
+      {
+        "command": "",
+        "key": "ctrl+-",
+        "mac": "cmd+-",
+        "when": "bpmn-io.bpmnEditor.canvasFocused"
+      },
+      {
+        "command": "",
+        "key": "ctrl+z",
+        "mac": "cmd+z",
+        "when": "bpmn-io.bpmnEditor.canvasFocused"
+      }
+    ],
     "customEditors": [
       {
         "viewType": "bpmn-io.bpmnEditor",
@@ -49,6 +93,7 @@
     "all": "run-s lint test",
     "lint": "eslint .",
     "vscode:prepublish": "npm run compile",
+    "package": "npx @vscode/vsce pack",
     "compile": "run-s compile:clean compile:app compile:tests",
     "compile:app": "rollup -c rollup.config.mjs",
     "compile:tests": "tsc -p ./src/test",
@@ -90,7 +135,7 @@
   },
   "dependencies": {
     "@vscode/codicons": "^0.0.35",
-    "bpmn-js": "^17.0.1",
-    "bpmn-js-color-picker": "^0.7.0"
+    "bpmn-js": "^18.1.2",
+    "bpmn-js-color-picker": "^0.7.1"
   }
 }

src/bpmn-editor.ts

@@ -303,6 +303,17 @@
           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 @@
 
   // #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.
    */
@@ -466,7 +486,7 @@
         Use a content security policy to only allow loading images from https or from our extension directory,
         and only allow scripts that have a specific nonce.
         -->
-        <meta http-equiv="Content-Security-Policy" content="default-src 'none'; font-src 'self' data:; img-src 'self' data:; img-src ${webview.cspSource} blob:; style-src ${webview.cspSource}; script-src 'nonce-${nonce}';">
+        <meta http-equiv="Content-Security-Policy" content="default-src 'none'; font-src https: 'self' data:; img-src ${webview.cspSource} blob:; style-src 'unsafe-inline' https: ${webview.cspSource}; script-src 'nonce-${nonce}';">
 
         <meta name="viewport" content="width=device-width, initial-scale=1.0">
 
@@ -485,20 +505,20 @@
   }
 
   private _requestId = 1;
   private readonly _callbacks = new Map<number, (response: any) => void>();
 
   private postMessageWithResponse<R = unknown>(panel: vscode.WebviewPanel, type: string, body: any): Promise<R> {
     const requestId = this._requestId++;
     const p = new Promise<R>(resolve => this._callbacks.set(requestId, resolve));
     panel.webview.postMessage({ type, requestId, body });
     return p;
   }
 
   private postMessage(panel: vscode.WebviewPanel, type: string, body: any = {}): void {
     panel.webview.postMessage({ type, body });
   }
 
   private onMessage(document: BpmnDocument, message: any) {
     switch (message.type) {
     case 'change':
       return document.makeEdit(message as BpmnEdit);
@@ -523,6 +543,11 @@
       return (
         this._callbacks.get(message.requestId)
       )?.(message.body);
+
+    case 'canvas-focus-change':
+      vscode.commands.executeCommand('setContext', 'bpmn-io.bpmnEditor.canvasFocused', message.value);
+      return;
+
     }
   }
 }
@@ -566,7 +591,7 @@
    * 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,18 @@ import BpmnModeler from 'bpmn-js/lib/Modeler';
 
 import BpmnColorPickerModule from 'bpmn-js-color-picker';
 
-import KeyboardModule from './features/keyboard';
+import { handleMacOsKeyboard } from './utils/macos-keyboard';
 
 /**
  * @type { import('vscode') }
  */
 const vscode = acquireVsCodeApi();
 
+handleMacOsKeyboard();
+
 const modeler = new BpmnModeler({
   container: '#canvas',
-  keyboard: {
-    bindTo: document
-  },
   additionalModules: [
-    KeyboardModule,
     BpmnColorPickerModule
   ]
 });
@@ -50,6 +48,14 @@ modeler.on('commandStack.changed', () => {
   });
 });
 
+modeler.on('canvas.focus.changed', (event) => {
+  return vscode.postMessage({
+    type: 'canvas-focus-change',
+    value: event.focused
+  });
+});
+
+
 // handle messages from the extension
 window.addEventListener('message', async (event) => {
 
@@ -83,9 +89,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 +98,9 @@ window.addEventListener('message', async (event) => {
       });
     });
 
+  case 'focusCanvas':
+    modeler.get('canvas').focus();
+    return;
   }
 });