vanilla-repl-cm6: add flash effect

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

@@ -13,15 +13,11 @@ export function initEditor({ initialCode, onChange, onEvaluate, onStop }) {
     extensions: [
       javascript(),
       lineNumbers(),
-      /*gutter({
-        class: "cm-mygutter"
-      }),*/
       highlightField,
       highlightActiveLineGutter(),
-      //markLineGutter,
       syntaxHighlighting(defaultHighlightStyle),
       keymap.of(defaultKeymap),
-      //flashField,
+      flashField,
       EditorView.updateListener.of((v) => onChange(v)),
       keymap.of([
         {
@@ -42,7 +38,9 @@ export function initEditor({ initialCode, onChange, onEvaluate, onStop }) {
   });
 }
 
-// codemirror specific highlighting logic
+//
+//  highlighting
+//
 
 export const setHighlights = StateEffect.define();
 export const highlightField = StateField.define({
@@ -89,3 +87,40 @@ export const highlightField = StateField.define({
 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,14 +1,24 @@
 // moved from sandbox: https://codesandbox.io/s/vanilla-codemirror-strudel-2wb7yw?file=/index.html:114-186
 
-import { initEditor, highlightHaps } from './codemirror';
+import { initEditor, highlightHaps, flash } from './codemirror';
 import { initStrudel } from './strudel';
 import { Highlighter } from './highlighter';
 import { bumpStreet } from './tunes';
 let code = bumpStreet;
 const repl = initStrudel();
 
+const view = initEditor({
+  initialCode: code,
+  onChange: (v) => {
+    code = v.state.doc.toString();
+  },
+  onEvaluate,
+  onStop,
+});
+
 async function onEvaluate() {
   const { evaluate, scheduler } = await repl;
+  flash(view);
   if (!scheduler.started) {
     scheduler.stop();
     await evaluate(code);
@@ -24,15 +34,6 @@ async function onStop() {
   highlighter.stop();
 }
 
-const view = initEditor({
-  initialCode: code,
-  onChange: (v) => {
-    code = v.state.doc.toString();
-  },
-  onEvaluate,
-  onStop,
-});
-
 let highlighter = new Highlighter((haps) => highlightHaps(view, haps));
 
 document.getElementById('play').addEventListener('click', () => onEvaluate());