add codemirror package

+ use it in vite-vanilla-repl-cm6

packages/core/examples/vite-vanilla-repl-cm6/codemirror.js

@@ -1,127 +0,0 @@
-import { EditorState } from '@codemirror/state';
-import { EditorView, keymap, Decoration, lineNumbers, highlightActiveLineGutter } from '@codemirror/view';
-import { defaultKeymap } from '@codemirror/commands';
-import { syntaxHighlighting, defaultHighlightStyle } from '@codemirror/language';
-import { javascript } from '@codemirror/lang-javascript';
-import { StateField, StateEffect } from '@codemirror/state';
-import { oneDark } from './one-dark';
-
-// https://codemirror.net/docs/guide/
-export function initEditor({ initialCode, onChange, onEvaluate, onStop }) {
-  let state = EditorState.create({
-    doc: initialCode,
-    extensions: [
-      oneDark,
-      javascript(),
-      lineNumbers(),
-      highlightField,
-      highlightActiveLineGutter(),
-      syntaxHighlighting(defaultHighlightStyle),
-      keymap.of(defaultKeymap),
-      flashField,
-      EditorView.updateListener.of((v) => onChange(v)),
-      keymap.of([
-        {
-          key: 'Ctrl-Enter',
-          run: () => onEvaluate(),
-        },
-        {
-          key: 'Ctrl-.',
-          run: () => onStop(),
-        },
-      ]),
-    ],
-  });
-
-  return new EditorView({
-    state,
-    parent: document.getElementById('editor'),
-  });
-}
-
-//
-//  highlighting
-//
-
-export const setHighlights = StateEffect.define();
-export const highlightField = StateField.define({
-  create() {
-    return Decoration.none;
-  },
-  update(highlights, tr) {
-    try {
-      for (let e of tr.effects) {
-        if (e.is(setHighlights)) {
-          const { haps } = e.value;
-          const marks =
-            haps
-              .map((hap) =>
-                (hap.context.locations || []).map(({ start, end }) => {
-                  // const color = hap.context.color || e.value.color || '#FFCA28';
-                  let from = tr.newDoc.line(start.line).from + start.column;
-                  let to = tr.newDoc.line(end.line).from + end.column;
-                  const l = tr.newDoc.length;
-                  if (from > l || to > l) {
-                    return; // dont mark outside of range, as it will throw an error
-                  }
-                  const mark = Decoration.mark({
-                    attributes: { style: `outline: 2px solid #FFCA28;` },
-                  });
-                  return mark.range(from, to);
-                }),
-              )
-              .flat()
-              .filter(Boolean) || [];
-          highlights = Decoration.set(marks, true);
-        }
-      }
-      return highlights;
-    } catch (err) {
-      // console.warn('highlighting error', err);
-      return Decoration.set([]);
-    }
-  },
-  provide: (f) => EditorView.decorations.from(f),
-});
-
-// helper to simply trigger highlighting for given haps
-export function highlightHaps(view, haps) {
-  view.dispatch({ effects: setHighlights.of({ haps }) });
-}
-
-//
-// flash
-//
-
-export const setFlash = StateEffect.define();
-const flashField = StateField.define({
-  create() {
-    return Decoration.none;
-  },
-  update(flash, tr) {
-    try {
-      for (let e of tr.effects) {
-        if (e.is(setFlash)) {
-          if (e.value) {
-            const mark = Decoration.mark({ attributes: { style: `background-color: #FFCA2880` } });
-            flash = Decoration.set([mark.range(0, tr.newDoc.length)]);
-          } else {
-            flash = Decoration.set([]);
-          }
-        }
-      }
-      return flash;
-    } catch (err) {
-      console.warn('flash error', err);
-      return flash;
-    }
-  },
-  provide: (f) => EditorView.decorations.from(f),
-});
-
-export const flash = (view) => {
-  view.dispatch({ effects: setFlash.of(true) });
-  setTimeout(() => {
-    view.dispatch({ effects: setFlash.of(false) });
-  }, 200);
-};

packages/core/examples/vite-vanilla-repl-cm6/main.js

@@ -1,9 +1,9 @@
 // moved from sandbox: https://codesandbox.io/s/vanilla-codemirror-strudel-2wb7yw?file=/index.html:114-186
 
-import { initEditor, highlightHaps, flash } from './codemirror';
+import { StrudelMirror } from '@strudel/codemirror';
 import { initStrudel } from './strudel';
 import { Drawer } from './drawer';
-import { bumpStreet, trafficFlam, funk42 } from './tunes';
+import { funk42 } from './tunes';
 import { pianoroll, getDrawOptions } from '@strudel.cycles/core';
 import './style.css';
 
@@ -13,7 +13,8 @@ const canvas = document.getElementById('roll');
 canvas.width = canvas.width * 2;
 canvas.height = canvas.height * 2;
 
-const view = initEditor({
+const editor = new StrudelMirror({
+  root: document.getElementById('editor'),
   initialCode: code,
   onChange: (v) => {
     code = v.state.doc.toString();
@@ -24,7 +25,7 @@ const view = initEditor({
 
 async function onEvaluate() {
   const { evaluate, scheduler } = await repl;
-  flash(view);
+  editor.flash();
   if (!scheduler.started) {
     scheduler.stop();
     await evaluate(code);
@@ -40,11 +41,12 @@ async function onStop() {
   scheduler.stop();
   drawer.stop();
 }
+
 const ctx = canvas.getContext('2d');
 let drawer = new Drawer(
   (haps, time, { drawTime }) => {
     const currentFrame = haps.filter((hap) => time >= hap.whole.begin && time <= hap.whole.end);
-    highlightHaps(view, currentFrame);
+    editor.highlight(currentFrame);
     pianoroll({ ctx, time, haps, ...getDrawOptions(drawTime, { fold: 0 }) });
   },
   [-2, 2],

packages/core/examples/vite-vanilla-repl-cm6/package.json

@@ -12,12 +12,7 @@
     "vite": "^4.3.2"
   },
   "dependencies": {
-    "@codemirror/commands": "^6.2.4",
-    "@codemirror/lang-javascript": "^6.1.7",
-    "@codemirror/language": "^6.6.0",
-    "@codemirror/state": "^6.2.0",
-    "@codemirror/view": "^6.10.0",
-    "@lezer/highlight": "^1.1.4",
+    "@strudel/codemirror": "workspace:*",
     "@strudel.cycles/core": "workspace:*",
     "@strudel.cycles/mini": "workspace:*",
     "@strudel.cycles/soundfonts": "workspace:*",