fix some bugs

repl/src/App.js

@@ -82,6 +82,7 @@ function App() {
     log,
     togglePlay,
     activeCode,
+    setActiveCode,
     activateCode,
     pattern,
     pushLog,
@@ -90,11 +91,8 @@ function App() {
     tune: decoded || randomTune,
     defaultSynth,
     // onDraw: useCallback((time, event) => markEvent(editor)(time, event), [editor]),
-    onDraw: useCallback((_, e) => highlightEvent(e, view, codeToHighlight), [view, codeToHighlight]),
+    onDraw: useCallback((_, e, code) => code && highlightEvent(e, view, code), [view]),
   });
-  useEffect(() => {
-    setCodeToHighlight(activeCode);
-  }, [activeCode]);
   const [uiHidden, setUiHidden] = useState(false);
   const logBox = useRef();
   // scroll log box to bottom when log changes
@@ -191,6 +189,7 @@ function App() {
               uiHelpers.cleanup();
               const parsed = await evaluate(_code);
               setPattern(parsed.pattern);
+              setActiveCode(_code);
             }}
           >
             🎲 random
@@ -201,7 +200,7 @@ function App() {
         </div>
       </header>
       <section className="grow flex flex-col text-gray-100">
-        <div className="grow relative flex" id="code">
+        <div className="grow relative flex overflow-auto" id="code">
           {/* onCursor={markParens} */}
           <CodeMirror6 value={code} onChange={setCode} onViewChanged={setView} />
           <span className="p-4 absolute top-0 right-0 text-xs whitespace-pre text-right pointer-events-none">

repl/src/CodeMirror6.jsx

@@ -18,26 +18,31 @@ const highlightField = StateField.define({
     return Decoration.none;
   },
   update(highlights, tr) {
-    highlights = highlights.map(tr.changes);
+    try {
-    for (let e of tr.effects) {
+      highlights = highlights.map(tr.changes);
-      if (e.is(addHighlight)) {
+      for (let e of tr.effects) {
-        highlights = highlights.update({
+        if (e.is(addHighlight)) {
-          add: [highlightMark.range(e.value.from, e.value.to)],
+          highlights = highlights.update({
-        });
+            add: [highlightMark.range(e.value.from, e.value.to)],
-      }
+          });
-      if (e.is(removeHighlight)) {
+        }
-        highlights = highlights.update({
+        if (e.is(removeHighlight)) {
-          filter: (f, t, value) => {
+          highlights = highlights.update({
-            if (f === e.value.from && t === e.value.to) {
+            filter: (f, t, value) => {
-              return false;
+              if (f === e.value.from && t === e.value.to) {
-            }
+                return false;
-            return true;
+              }
-            // console.log('filter', f,t,value, e.value.from, e.value.to);
+              return true;
-          },
+              // console.log('filter', f,t,value, e.value.from, e.value.to);
-        });
+            },
+          });
+        }
       }
+      return highlights;
+    } catch (err) {
+      // console.warn('highlighting error', err);
+      return highlights;
     }
-    return highlights;
   },
   provide: (f) => EditorView.decorations.from(f),
 });
@@ -117,6 +122,10 @@ export function offsetToPosition(offset, code) {
 // returns absolute character offset from { line, ch }
 export function positionToOffset(position, code) {
   const lines = code.split('\n');
+  if (position.line > lines.length) {
+    // throw new Error('positionToOffset: position.line > lines.length');
+    return 0;
+  }
   let offset = 0;
   for (let i = 0; i < position.line; i++) {
     offset += lines[i].length + 1;

repl/src/themes/material-palenight.js

@@ -26,6 +26,7 @@ export const materialPalenightTheme = EditorView.theme(
     '&': {
       color: '#ffffff',
       backgroundColor: background,
+      fontSize: '16px',
       'z-index': 11,
     },
 
@@ -33,8 +34,8 @@ export const materialPalenightTheme = EditorView.theme(
     '.cm-content': {
       caretColor: cursor,
     },
-    '.cm-line > *': {
+    '.cm-line': {
-      background: '#00000070',
+      background: '#2C323699',
     },
     // done
     '&.cm-focused .cm-cursor': {
@@ -68,7 +69,7 @@ export const materialPalenightTheme = EditorView.theme(
 
     // done
     '.cm-gutters': {
-      background,
+      background: '#2C323699',
       color: '#676e95',
       border: 'none',
     },

repl/src/useRepl.mjs

@@ -11,7 +11,7 @@ let s4 = () => {
 };
 const generateHash = (code) => encodeURIComponent(btoa(code));
 
-function useRepl({ tune, defaultSynth, autolink = true, onEvent, onDraw }) {
+function useRepl({ tune, defaultSynth, autolink = true, onEvent, onDraw: onDrawProp }) {
   const id = useMemo(() => s4(), []);
   const [code, setCode] = useState(tune);
   const [activeCode, setActiveCode] = useState();
@@ -24,12 +24,12 @@ function useRepl({ tune, defaultSynth, autolink = true, onEvent, onDraw }) {
   const pushLog = useCallback((message) => setLog((log) => log + `${log ? '\n\n' : ''}${message}`), []);
 
   // below block allows disabling the highlighting by including "strudel disable-highlighting" in the code (as comment)
-  onDraw = useMemo(() => {
+  const onDraw = useMemo(() => {
     if (activeCode && !activeCode.includes('strudel disable-highlighting')) {
-      return onDraw;
+      return (time, event) => onDrawProp(time, event, activeCode);
     }
-  }, [activeCode, onDraw]);
+  }, [activeCode, onDrawProp]);
-  
+
   // cycle hook to control scheduling
   const cycle = useCycle({
     onDraw,
@@ -137,6 +137,7 @@ function useRepl({ tune, defaultSynth, autolink = true, onEvent, onDraw }) {
     dirty,
     log,
     togglePlay,
+    setActiveCode,
     activateCode,
     activeCode,
     pushLog,