Merge pull request #773 from Dsm0/vscode-bindings

add vscode bindings

packages/react/package.json

@@ -33,12 +33,17 @@
   "homepage": "https://github.com/tidalcycles/strudel#readme",
   "dependencies": {
     "@codemirror/autocomplete": "^6.6.0",
+    "@codemirror/commands": "^6.0.0",
     "@codemirror/lang-javascript": "^6.1.7",
+    "@codemirror/language": "^6.0.0",
+    "@codemirror/lint": "^6.0.0",
+    "@codemirror/search": "^6.0.0",
     "@codemirror/state": "^6.2.0",
     "@codemirror/view": "^6.10.0",
     "@lezer/highlight": "^1.1.4",
     "@replit/codemirror-emacs": "^6.0.1",
     "@replit/codemirror-vim": "^6.0.14",
+    "@replit/codemirror-vscode-keymap": "^6.0.2",
     "@strudel.cycles/core": "workspace:*",
     "@strudel.cycles/transpiler": "workspace:*",
     "@strudel.cycles/webaudio": "workspace:*",

packages/react/src/components/CodeMirror6.jsx

@@ -1,8 +1,10 @@
 import { autocompletion } from '@codemirror/autocomplete';
+import { Prec } from '@codemirror/state';
 import { javascript, javascriptLanguage } from '@codemirror/lang-javascript';
-import { EditorView } from '@codemirror/view';
+import { ViewPlugin, EditorView, keymap } from '@codemirror/view';
 import { emacs } from '@replit/codemirror-emacs';
 import { vim } from '@replit/codemirror-vim';
+import { vscodeKeymap } from '@replit/codemirror-vscode-keymap';
 import _CodeMirror from '@uiw/react-codemirror';
 import React, { useCallback, useMemo } from 'react';
 import strudelTheme from '../themes/strudel-theme';
@@ -61,11 +63,25 @@ export default function CodeMirror({
     [onSelectionChange],
   );
 
+  const vscodePlugin = ViewPlugin.fromClass(
+    class {
+      constructor(view) {}
+    },
+    {
+      provide: (plugin) => {
+        return Prec.highest(keymap.of([...vscodeKeymap]));
+      },
+    },
+  );
+
+  const vscodeExtension = (options) => [vscodePlugin].concat(options ?? []);
+
   const extensions = useMemo(() => {
     let _extensions = [...staticExtensions];
     let bindings = {
       vim,
       emacs,
+      vscode: vscodeExtension,
     };
 
     if (bindings[keybindings]) {
@@ -78,6 +94,8 @@ export default function CodeMirror({
       _extensions.push(autocompletion({ override: [] }));
     }
 
+    _extensions.push([keymap.of({})]);
+
     if (isLineWrappingEnabled) {
       _extensions.push(EditorView.lineWrapping);
     }

website/src/repl/Footer.jsx

@@ -436,7 +436,7 @@ function SettingsTab({ scheduler }) {
         <ButtonGroup
           value={keybindings}
           onChange={(keybindings) => settingsMap.setKey('keybindings', keybindings)}
-          items={{ codemirror: 'Codemirror', vim: 'Vim', emacs: 'Emacs' }}
+          items={{ codemirror: 'Codemirror', vim: 'Vim', emacs: 'Emacs', vscode: 'VSCode' }}
         ></ButtonGroup>
       </FormItem>
       <FormItem label="Panel Position">