Pass mininotation locations into highlight state

packages/react/src/components/CodeMirror6.jsx

@@ -85,7 +85,7 @@ const miniLocations = StateField.define({
             }
           })
           .filter(Boolean);
-        locations = Decoration.set(decorations); // -> DecorationSet === RangeSet<Decoration>
+        locations = Decoration.set(decorations, true); // -> DecorationSet === RangeSet<Decoration>
       }
       if (e.is(showMiniLocations)) {
         // this is called every frame to show the locations that are currently active

website/src/repl/Repl.jsx

@@ -126,6 +126,13 @@ export function Repl({ embedded = false }) {
     isLineWrappingEnabled,
   } = useSettings();
 
+  const [miniLocations, setMiniLocations] = useState([]);
+  useEffect(() => {
+    if (view) {
+      updateMiniLocations(view, miniLocations);
+    }
+  }, [view, miniLocations]);
+
   const { code, setCode, scheduler, evaluate, activateCode, isDirty, activeCode, pattern, started, stop, error } =
     useStrudel({
       initialCode: '// LOADING...',
@@ -138,9 +145,7 @@ export function Repl({ embedded = false }) {
         cleanupDraw();
       },
       afterEval: ({ code, meta }) => {
-        console.log('miniLocations', meta.miniLocations, view);
+        setMiniLocations(meta.miniLocations);
-        // TODO: find a way to get hold of the codemirror view
-        // then call updateMiniLocations
         setPending(false);
         setLatestCode(code);
         window.location.hash = '#' + encodeURIComponent(btoa(code));