dynamic highlight color

+ refactor hooks

packages/react/src/components/CodeMirror6.jsx

@@ -49,11 +49,12 @@ const highlightField = StateField.define({
     try {
       for (let e of tr.effects) {
         if (e.is(setHighlights)) {
+          const { haps } = e.value;
           const marks =
-            e.value
+            haps
               .map((hap) =>
                 (hap.context.locations || []).map(({ start, end }) => {
-                  const color = hap.context.color || '#FFCA28';
+                  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;

packages/react/src/components/MiniRepl.jsx

@@ -10,6 +10,7 @@ import { Icon } from './Icon';
 import styles from './MiniRepl.module.css';
 import './style.css';
 import { logger } from '@strudel.cycles/core';
+import useEvent from '../hooks/useEvent.mjs';
 
 const getTime = () => getAudioContext().currentTime;
 
@@ -21,6 +22,7 @@ export function MiniRepl({
   punchcard,
   canvasHeight = 200,
   theme,
+  highlightColor,
 }) {
   drawTime = drawTime || (punchcard ? [0, 4] : undefined);
   const evalOnMount = !!drawTime;
@@ -69,6 +71,7 @@ export function MiniRepl({
     pattern,
     active: started && !activeCode?.includes('strudel disable-highlighting'),
     getTime: () => scheduler.now(),
+    color: highlightColor,
   });
 
   // set active pattern on ctrl+enter
@@ -148,13 +151,3 @@ export function MiniRepl({
 function useLogger(onTrigger) {
   useEvent(logger.key, onTrigger);
 }
-
-// TODO: dedupe
-function useEvent(name, onTrigger, useCapture = false) {
-  useEffect(() => {
-    document.addEventListener(name, onTrigger, useCapture);
-    return () => {
-      document.removeEventListener(name, onTrigger, useCapture);
-    };
-  }, [onTrigger]);
-}