font settings

packages/codemirror/codemirror.mjs

@@ -67,6 +67,7 @@ export function initEditor({ initialCode = '', onChange, onEvaluate, onStop, roo
   const initialSettings = Object.keys(compartments).map((key) =>
     compartments[key].of(extensions[key](parseBooleans(settings[key]))),
   );
+
   initTheme(settings.theme);
   let state = EditorState.create({
     doc: initialCode,

website/src/components/Udels/UdelsEditor.jsx

@@ -9,11 +9,11 @@ import UserFacingErrorMessage from '@src/repl/components/UserFacingErrorMessage'
 // }
 
 export default function UdelsEditor(Props) {
-  const { context } = Props;
+  const { context, ...editorProps } = Props;
   const { containerRef, editorRef, error, init, pending, started, handleTogglePlay } = context;
 
   return (
-    <div className={'h-full flex w-full flex-col relative'}>
+    <div className={'h-full flex w-full flex-col relative'} {...editorProps}>
       <Loader active={pending} />
       <BigPlayButton started={started} handleTogglePlay={handleTogglePlay} />
       <div className="grow flex relative overflow-hidden">

website/src/components/Udels/UdelsHeader.jsx

@@ -4,7 +4,7 @@ export default function UdelsHeader(Props) {
   const { numWindows, setNumWindows } = Props;
 
   return (
-    <header id="header" className="flex text-white  z-[100] text-lg select-none bg-neutral-900">
+    <header id="header" className="flex text-white  z-[100] text-lg select-none bg-neutral-800">
       <div className="px-4 items-center gap-2  flex space-x-2 md:pt-0 select-none">
         <h1 onClick={() => {}} className={'text-l cursor-pointer flex gap-4'}>
           <div className={'mt-[1px] cursor-pointer'}>🌀</div>

website/src/repl/Repl.jsx

@@ -9,10 +9,12 @@ import UdelsEditor from '@components/Udels/UdelsEditor';
 import ReplEditor from './components/ReplEditor';
 import EmbeddedReplEditor from './components/EmbeddedReplEditor';
 import { useReplContext } from './useReplContext';
+import { useSettings } from '@src/settings.mjs';
 
 export function Repl({ embedded = false }) {
   const isEmbedded = embedded || isIframe();
   const Editor = isUdels() ? UdelsEditor : isEmbedded ? EmbeddedReplEditor : ReplEditor;
   const context = useReplContext();
-  return <Editor context={context} />;
+  const { fontFamily } = useSettings();
+  return <Editor context={context} style={{ fontFamily }} />;
 }

website/src/repl/components/EmbeddedReplEditor.jsx

@@ -9,10 +9,10 @@ import { Header } from './Header';
 // }
 
 export default function EmbeddedReplEditor(Props) {
-  const { context } = Props;
+  const { context, ...editorProps } = Props;
   const { pending, started, handleTogglePlay, containerRef, editorRef, error, init } = context;
   return (
-    <div className="h-full flex flex-col relative">
+    <div className="h-full flex flex-col relative" {...editorProps}>
       <Loader active={pending} />
       <Header context={context} embedded={true} />
       <BigPlayButton started={started} handleTogglePlay={handleTogglePlay} />

website/src/repl/components/ReplEditor.jsx

@@ -10,13 +10,13 @@ import { useSettings } from '@src/settings.mjs';
 // }
 
 export default function ReplEditor(Props) {
-  const { context } = Props;
+  const { context, ...editorProps } = Props;
   const { containerRef, editorRef, error, init, pending } = context;
   const settings = useSettings();
   const { panelPosition, isZen } = settings;
 
   return (
-    <div className="h-full flex flex-col relative">
+    <div className="h-full flex flex-col relative" {...editorProps}>
       <Loader active={pending} />
       <Header context={context} />
       <div className="grow flex relative overflow-hidden">

website/src/repl/components/panel/Panel.jsx

@@ -149,9 +149,8 @@ function PanelTab({ label, isSelected, onClick }) {
   );
 }
 function Tabs({ setTab, tab, className }) {
-  const {fontFamily, fontSize} = useSettings()
   return (
-    <div className={cx('flex select-none max-w-full overflow-auto pb-2', className)} style={{fontFamily}}>
+    <div className={cx('flex select-none max-w-full overflow-auto pb-2', className)}>
       {Object.keys(tabNames).map((key) => {
         const val = tabNames[key];
         return <PanelTab key={key} isSelected={tab === val} label={key} onClick={() => setTab(val)} />;

website/src/repl/components/panel/PatternsTab.jsx

@@ -89,7 +89,7 @@ export function PatternsTab({ context }) {
   const viewingPatternStore = useViewingPatternData();
   const viewingPatternData = parseJSON(viewingPatternStore);
 
-  const { userPatterns, patternFilter, fontFamily } = useSettings();
+  const { userPatterns, patternFilter } = useSettings();
 
   const examplePatterns = useExamplePatterns();
   const collections = examplePatterns.collections;
@@ -102,7 +102,7 @@ export function PatternsTab({ context }) {
   const autoResetPatternOnChange = !isUdels();
 
   return (
-    <div className="px-4 w-full text-foreground space-y-2  flex flex-col overflow-hidden max-h-full h-full" style={{fontFamily}}>
+    <div className="px-4 w-full text-foreground space-y-2  flex flex-col overflow-hidden max-h-full h-full">
       <ButtonGroup
         value={patternFilter}
         onChange={(value) => settingsMap.setKey('patternFilter', value)}
@@ -173,14 +173,13 @@ export function PatternsTab({ context }) {
             return (
               <section key={collection} className="py-2">
                 <h2 className="text-xl mb-2">{collection}</h2>
-               
+
-                  <PatternButtons
+                <PatternButtons
-                    onClick={(id) => updateCodeWindow({ ...patterns[id], collection }, autoResetPatternOnChange)}
+                  onClick={(id) => updateCodeWindow({ ...patterns[id], collection }, autoResetPatternOnChange)}
-                    started={context.started}
+                  started={context.started}
-                    patterns={patterns}
+                  patterns={patterns}
-                    activePattern={activePattern}
+                  activePattern={activePattern}
-                  />
+                />
-                
               </section>
             );
           })}

website/src/repl/components/panel/Reference.jsx

@@ -1,7 +1,7 @@
 import { useMemo, useState } from 'react';
 
 import jsdocJson from '../../../../../doc.json';
-import { useSettings } from '@src/settings.mjs';
+
 const availableFunctions = jsdocJson.docs
   .filter(({ name, description }) => name && !name.startsWith('_') && !!description)
   .sort((a, b) => /* a.meta.filename.localeCompare(b.meta.filename) +  */ a.name.localeCompare(b.name));
@@ -15,8 +15,6 @@ const getInnerText = (html) => {
 export function Reference() {
   const [search, setSearch] = useState('');
 
-  const {fontFamily} = useSettings()
-
   const visibleFunctions = useMemo(() => {
     return availableFunctions.filter((entry) => {
       if (!search) {
@@ -28,7 +26,7 @@ export function Reference() {
   }, [search]);
 
   return (
-    <div className="flex h-full w-full p-2 overflow-hidden" style={{fontFamily}}>
+    <div className="flex h-full w-full p-2 overflow-hidden">
       <div className="h-full  flex flex-col gap-2 w-1/3 max-w-72 ">
         <div class="w-full flex">
           <input
@@ -59,17 +57,17 @@ export function Reference() {
         id="reference-container"
       >
         <div className="prose dark:prose-invert min-w-full px-1 ">
-          <h2 >API Reference</h2>
+          <h2>API Reference</h2>
           <p>
             This is the long list of functions you can use. Remember that you don't need to remember all of those and
             that you can already make music with a small set of functions!
           </p>
           {visibleFunctions.map((entry, i) => (
             <section key={i}>
-              <h3  id={`doc-${i}`}>{entry.name}</h3>
+              <h3 id={`doc-${i}`}>{entry.name}</h3>
               {!!entry.synonyms_text && (
                 <p>
-                  Synonyms: <code className='text-foreground'>{entry.synonyms_text}</code>
+                  Synonyms: <code className="text-foreground">{entry.synonyms_text}</code>
                 </p>
               )}
               {/* <small>{entry.meta.filename}</small> */}
@@ -82,7 +80,9 @@ export function Reference() {
                 ))}
               </ul>
               {entry.examples?.map((example, j) => (
-                <pre className='bg-background' key={j}>{example}</pre>
+                <pre className="bg-background" key={j}>
+                  {example}
+                </pre>
               ))}
             </section>
           ))}

website/src/repl/components/panel/SoundsTab.jsx

@@ -11,7 +11,7 @@ const getSamples = (samples) =>
 
 export function SoundsTab() {
   const sounds = useStore(soundMap);
-  const { soundsFilter, fontFamily } = useSettings();
+  const { soundsFilter } = useSettings();
   const [search, setSearch] = useState('');
 
   const soundEntries = useMemo(() => {
@@ -52,7 +52,7 @@ export function SoundsTab() {
   });
 
   return (
-    <div id="sounds-tab" className="px-4 flex flex-col w-full h-full  text-foreground" style={{fontFamily}}>
+    <div id="sounds-tab" className="px-4 flex flex-col w-full h-full  text-foreground">
       <input
         className="w-full p-1 bg-background rounded-md my-2"
         placeholder="Search"