stop key

src/main.js

@@ -2,6 +2,7 @@ import { EditorView, basicSetup } from "codemirror";
 import { javascript } from "@codemirror/lang-javascript";
 import { oneDark } from "@codemirror/theme-one-dark";
 import { EditorState, Prec } from "@codemirror/state";
+import { keymap } from "@codemirror/view";
 import { yCollab } from "y-codemirror.next";
 import { Session } from "@flok-editor/session";
 import { flashField, evalKeymap, remoteEvalFlash } from "@flok-editor/cm-eval";
@@ -39,6 +40,7 @@ const createEditor = (doc) => {
     );
     return;
   }
+  const stopKeys = ["Ctrl-.", "Alt-."];
   const state = EditorState.create({
     doc: doc.content,
     extensions: [
@@ -47,13 +49,22 @@ const createEditor = (doc) => {
       javascript(),
       EditorView.lineWrapping,
       oneDark,
+      Prec.highest(
+        keymap.of([
+          ...stopKeys.map((key) => ({
+            key,
+            run: () => doc.evaluate("$: silence", { from: null, to: null }),
+          })),
+        ])
+      ),
     ],
   });
 
   const editorEl = document.querySelector(`#${doc.id} .editor`);
   const view = new EditorView({
     state,
     parent: editorEl,
+    // extensions: [kabelsalatTheme],
   });
   editorViews.set(doc.id, view);
 

src/strudel.js

@@ -197,7 +197,7 @@ export class StrudelSession {
 
       await this.repl.scheduler.setPattern(allPatterns, true);
 
-      console.log("afterEval", meta);
+      //console.log("afterEval", meta);
     } catch (err) {
       console.error(err);
       this.onError(`${err}`);

src/theme.js

@@ -0,0 +1,64 @@
+// currently unused
+import { EditorView } from "codemirror";
+import { tags } from "@lezer/highlight";
+import { HighlightStyle } from "@codemirror/language";
+import { syntaxHighlighting } from "@codemirror/language";
+
+let colors = {
+  teal600: "#0d9488",
+  teal400: "#2dd4bf",
+  amber: "#d97706",
+  violet400: "#a78bfa",
+  violet300: "#c4b5fd",
+  indigo300: "#a5b4fc",
+  indigo400: "#818cf8",
+  fuchsia400: "#e879f9",
+  fuchsia300: "#f0abfc",
+  fuchsia200: "#f5d0fe",
+  whitish: "#ddd",
+  stone400: "#a8a29e",
+  stone500: "#78716c",
+};
+
+let theme = EditorView.theme(
+  {
+    "&": {
+      color: colors.teal600,
+      overflow: "hidden",
+      backgroundColor: "transparent",
+      fontSize: "16px",
+      height: "100%",
+    },
+    ".cm-gutters": {
+      "background-color": "transparent",
+      color: colors.stone500,
+    },
+    ".cm-cursor": {
+      "border-left-color": "#d9770696",
+      "border-left-width": "11px",
+    },
+    ".cm-activeLine, .cm-activeLineGutter": {
+      "background-color": "#aaaaaa20",
+    },
+    ".cm-cursorLayer": {
+      // "animation-name": "inherit !important;", // disables blinking
+    },
+    ".cm-matchingBracket": {
+      "text-decoration": "underline 0.12rem",
+      "text-underline-offset": "0.24rem",
+      "text-decoration-color": colors.fuchsia300,
+    },
+  },
+  { dark: true }
+);
+
+const highlightStyle = HighlightStyle.define([
+  { tag: tags.keyword, color: colors.fuchsia300 },
+  { tag: tags.literal, color: colors.whitish },
+  { tag: tags.squareBracket, color: colors.amber },
+  { tag: tags.punctuation, color: colors.fuchsia300 },
+  { tag: tags.operator, color: colors.fuchsia300 },
+  { tag: tags.comment, color: colors.stone500, fontStyle: "italic" },
+]);
+
+export let kabelsalatTheme = [theme, syntaxHighlighting(highlightStyle)];