flash effect on ctrl enter

packages/react/dist/index.es.js

@@ -145,6 +145,37 @@ const materialPalenightHighlightStyle = HighlightStyle.define([
 // : Extension
 const materialPalenight = [materialPalenightTheme, materialPalenightHighlightStyle];
 
+const setFlash = StateEffect.define();
+const flashField = StateField.define({
+  create() {
+    return Decoration.none;
+  },
+  update(flash2, tr) {
+    try {
+      for (let e of tr.effects) {
+        if (e.is(setFlash)) {
+          if (e.value) {
+            const mark = Decoration.mark({ attributes: { style: `background-color: #FFCA2880` } });
+            flash2 = Decoration.set([mark.range(0, tr.newDoc.length)]);
+          } else {
+            flash2 = Decoration.set([]);
+          }
+        }
+      }
+      return flash2;
+    } catch (err) {
+      console.warn("flash error", err);
+      return flash2;
+    }
+  },
+  provide: (f) => EditorView.decorations.from(f)
+});
+const flash = (view) => {
+  view.dispatch({ effects: setFlash.of(true) });
+  setTimeout(() => {
+    view.dispatch({ effects: setFlash.of(false) });
+  }, 200);
+};
 const setHighlights = StateEffect.define();
 const highlightField = StateField.define({
   create() {
@@ -187,7 +218,8 @@ function CodeMirror({ value, onChange, onViewChanged, onCursor, options, editorD
     extensions: [
       javascript(),
       materialPalenight,
-      highlightField
+      highlightField,
+      flashField
     ]
   }));
 }
@@ -340,14 +372,7 @@ function useRepl({ tune, defaultSynth, autolink = true, onEvent, onDraw: onDrawP
             /* console.warn('no instrument chosen', event);
           throw new Error(`no instrument chosen for ${JSON.stringify(event)}`); */
           } else {
-            onTrigger(
-              time,
-              event,
-              currentTime,
-              1 /* cps */,
-              event.wholeOrPart().begin.valueOf(),
-              event.duration.valueOf(),
-            );
+            onTrigger(time, event, currentTime, 1 /* cps */);
           }
         } catch (err) {
           console.warn(err);
@@ -623,4 +648,4 @@ function useWebMidi(props) {
   return { loading, outputs, outputByName };
 }
 
-export { CodeMirror, MiniRepl, cx, useCycle, useHighlighting, usePostMessage, useRepl, useWebMidi };
+export { CodeMirror, MiniRepl, cx, flash, useCycle, useHighlighting, usePostMessage, useRepl, useWebMidi };

packages/react/src/components/CodeMirror6.jsx

@@ -7,6 +7,39 @@ import { javascript } from '@codemirror/lang-javascript';
 // import { materialPalenight } from 'codemirror6-themes';
 import { materialPalenight } from '../themes/material-palenight';
 
+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);
+};
+
 export const setHighlights = StateEffect.define();
 const highlightField = StateField.define({
   create() {
@@ -61,6 +94,7 @@ export default function CodeMirror({ value, onChange, onViewChanged, onCursor, o
           javascript(),
           materialPalenight,
           highlightField,
+          flashField,
           // theme, language, ...
         ]}
       />

packages/react/src/index.js

@@ -1,6 +1,6 @@
 // import 'tailwindcss/tailwind.css';
 
-export { default as CodeMirror } from './components/CodeMirror6';
+export { default as CodeMirror, flash } from './components/CodeMirror6';
 export * from './components/MiniRepl';
 export { default as useCycle } from './hooks/useCycle';
 export { default as useHighlighting } from './hooks/useHighlighting';

repl/src/App.jsx

@@ -6,7 +6,7 @@ This program is free software: you can redistribute it and/or modify it under th
 
 import controls from '@strudel.cycles/core/controls.mjs';
 import { evalScope, evaluate } from '@strudel.cycles/eval';
-import { CodeMirror, cx, useHighlighting, useRepl, useWebMidi } from '@strudel.cycles/react';
+import { CodeMirror, cx, flash, useHighlighting, useRepl, useWebMidi } from '@strudel.cycles/react';
 import { getDefaultSynth, cleanupDraw, cleanupUi, Tone } from '@strudel.cycles/tone';
 import React, { useCallback, useLayoutEffect, useRef, useState } from 'react';
 import './App.css';
@@ -92,6 +92,7 @@ function App() {
       if (e.ctrlKey || e.altKey) {
         if (e.code === 'Enter') {
           e.preventDefault();
+          flash(view);
           await activateCode();
         } else if (e.code === 'Period') {
           cycle.stop();
@@ -101,7 +102,7 @@ function App() {
     };
     window.addEventListener('keydown', handleKeyPress, true);
     return () => window.removeEventListener('keydown', handleKeyPress, true);
-  }, [pattern, code, activateCode, cycle]);
+  }, [pattern, code, activateCode, cycle, view]);
 
   useHighlighting({ view, pattern, active: cycle.started && !activeCode?.includes('strudel disable-highlighting') });