Feature: keybindings settings

packages/codemirror/package.json

@@ -16,6 +16,9 @@
     "@codemirror/view": "^6.28.4",
     "codemirror": "^6.0.1",
     "@lezer/highlight": "^1.2.0",
-    "@kabelsalat/transpiler": "workspace:*"
+    "@kabelsalat/transpiler": "workspace:*",
+    "@replit/codemirror-emacs": "^6.1.0",
+    "@replit/codemirror-vim": "^6.2.1",
+    "@replit/codemirror-vscode-keymap": "^6.0.2"
   }
 }

packages/codemirror/src/codemirror.js

@@ -4,16 +4,25 @@ import { javascript } from "@codemirror/lang-javascript";
 import { insertNewline } from "@codemirror/commands";
 import { widgetPlugin } from "./widgets.js";
 import { flashField } from "./flash.js";
+import { keybindings } from "./keybindings.js";
 import {
-  lineNumbers,
-  highlightActiveLineGutter,
   highlightActiveLine,
+  highlightActiveLineGutter,
   keymap,
+  lineNumbers,
 } from "@codemirror/view";
 import { bracketMatching } from "@codemirror/language";
-import { Prec } from "@codemirror/state";
+import { Compartment, Prec } from "@codemirror/state";
 
-export function initEditor({ root, code, onChange, onEvaluate, onStop }) {
+export function initEditor({
+  root,
+  code,
+  settings,
+  onChange,
+  onEvaluate,
+  onStop,
+}) {
+  const keybindingsCompartment = new Compartment();
   let editor = new EditorView({
     extensions: [
       //basicSetup,
@@ -26,6 +35,7 @@ export function initEditor({ root, code, onChange, onEvaluate, onStop }) {
       widgetPlugin,
       EditorView.lineWrapping,
       javascript(),
+      keybindingsCompartment.of(keybindings(settings.keybindings)),
       EditorView.updateListener.of((v) => {
         if (v.docChanged) {
           onChange?.(v.state.doc.toString());
@@ -64,6 +74,7 @@ export function initEditor({ root, code, onChange, onEvaluate, onStop }) {
     ],
     parent: root,
   });
+
   const setCode = (code) => {
     const changes = {
       from: 0,
@@ -72,9 +83,15 @@ export function initEditor({ root, code, onChange, onEvaluate, onStop }) {
     };
     editor.dispatch({ changes });
   };
-  setCode(code);
 
+  setCode(code);
   const getCode = () => editor.state.doc.toString();
 
-  return { setCode, getCode, editor };
+  const setKeybindings = (bindings) => {
+    editor.dispatch({
+      effects: keybindingsCompartment.reconfigure(keybindings(bindings)),
+    });
+  };
+
+  return { setCode, getCode, editor, setKeybindings };
 }

packages/codemirror/src/keybindings.js

@@ -0,0 +1,33 @@
+import { Prec } from "@codemirror/state";
+import { keymap, ViewPlugin } from "@codemirror/view";
+import { emacs } from "@replit/codemirror-emacs";
+import { vim } from "@replit/codemirror-vim";
+import { vscodeKeymap } from "@replit/codemirror-vscode-keymap";
+import { defaultKeymap, historyKeymap } from "@codemirror/commands";
+
+const vscodePlugin = ViewPlugin.fromClass(
+  class {
+    constructor() {}
+  },
+  {
+    provide: () => {
+      return Prec.highest(keymap.of([...vscodeKeymap]));
+    },
+  }
+);
+const vscodeExtension = (options) => [vscodePlugin].concat(options ?? []);
+
+export const keymaps = {
+  vim,
+  emacs,
+  vscode: vscodeExtension,
+};
+
+export function keybindings(name) {
+  const active = keymaps[name];
+  return [
+    keymap.of(defaultKeymap),
+    keymap.of(historyKeymap),
+    active ? active() : [],
+  ];
+}

website/src/components/Codemirror.jsx

@@ -11,15 +11,17 @@ export function Codemirror(props) {
       cm.setCode(props.code);
     }
   });
+
+  createEffect(() => {
+    cm.setKeybindings(props.settings.keybindings);
+  });
+
   return (
     <div class="resize-none bg-stone-900 shrink-0 focus:ring-0 outline-0 border-0 h-full overflow-hidden">
       <div
         class="w-full max-w-full overflow-hidden h-full"
         ref={(el) => {
-          cm = initEditor({
-            root: el,
-            ...props,
-          });
+          cm = initEditor({ root: el, ...props });
           setView(cm.editor);
         }}
       ></div>

website/src/components/Reference.jsx

@@ -1,4 +1,4 @@
-import { For, createSignal } from "solid-js";
+import { createSignal, For } from "solid-js";
 import { nodeRegistry } from "@kabelsalat/core";
 import { MiniRepl } from "./MiniRepl.jsx";
 
@@ -63,8 +63,7 @@ export function Reference() {
                     ? "bg-teal-700"
                     : "bg-stone-700")
                 }
-                onClick={() => toggleTag(tag)}
-              >
+                onClick={() => toggleTag(tag)}>
                 {tag} ({tagRefs[tag]})
               </a>{" "}
             </>
@@ -84,8 +83,7 @@ export function Reference() {
                   const container = document.getElementById("scroll-container");
                   const pos = el.offsetTop - container.offsetTop - 10;
                   container.scrollTo(0, pos);
-                }}
-              >
+                }}>
                 {name}
               </a>{" "}
             </>