customizable font family

packages/react/src/components/CodeMirror6.jsx

@@ -101,6 +101,7 @@ export default function CodeMirror({
   theme,
   keybindings,
   fontSize = 18,
+  fontFamily = 'monospace',
   options,
   editorDidMount,
 }) {
@@ -135,7 +136,7 @@ export default function CodeMirror({
     return staticExtensions;
   }, [keybindings]);
   return (
-    <div style={{ fontSize }} className="w-full">
+    <div style={{ fontSize, fontFamily }} className="w-full">
       <_CodeMirror
         value={value}
         theme={theme || strudelTheme}

packages/react/src/themes/algoboy.js

@@ -12,7 +12,6 @@ export const settings = {
   gutterBackground: 'transparent',
   gutterForeground: '#0f380f',
   light: true,
-  fontFamily: 'PressStart, monospace',
 };
 export default createTheme({
   theme: 'light',

packages/react/src/themes/blackscreen.js

@@ -7,10 +7,9 @@ export const settings = {
   selection: '#ffffff20',
   selectionMatch: '#036dd626',
   lineHighlight: '#ffffff10',
+  lineBackground: '#00000050',
   gutterBackground: 'transparent',
   gutterForeground: '#8a919966',
-  fontFamily: 'BigBlueTerminal, monospace',
-  //fontFamily: 'x3270, monospace',
 };
 export default createTheme({
   theme: 'dark',

packages/react/src/themes/bluescreen.js

@@ -12,7 +12,6 @@ export const settings = {
   gutterBackground: 'transparent',
   // gutterForeground: '#8a919966',
   gutterForeground: '#8a919966',
-  fontFamily: 'BigBlueTerminal, monospace',
 };
 
 export default createTheme({

packages/react/src/themes/terminal.js

@@ -9,8 +9,6 @@ export const settings = {
   lineHighlight: '#ffffff10',
   gutterBackground: 'transparent',
   gutterForeground: '#8a919966',
-  //fontFamily: 'BigBlueTerminal, monospace',
-  fontFamily: 'x3270, monospace',
 };
 export default createTheme({
   theme: 'dark',

packages/react/src/themes/whitescreen.js

@@ -11,7 +11,6 @@ export const settings = {
   gutterBackground: 'transparent',
   gutterForeground: 'black',
   light: true,
-  fontFamily: 'BigBlueTerminal, monospace',
 };
 export default createTheme({
   theme: 'light',

website/src/repl/Footer.jsx

@@ -279,18 +279,31 @@ function FormItem({ label, children }) {
 }
 
 const themeOptions = Object.fromEntries(Object.keys(themes).map((k) => [k, k]));
+const fontFamilyOptions = {
+  monospace: 'monospace',
+  BigBlueTerminal: 'BigBlueTerminal',
+  x3270: 'x3270',
+  PressStart: 'PressStart2P',
+};
 
 function SettingsTab() {
   const { state, update, reset } = useStore();
-  const { theme, keybindings, fontSize } = state;
+  const { theme, keybindings, fontSize, fontFamily } = state;
   return (
     <div className="text-foreground p-4 space-y-4">
+      <FormItem label="Theme">
+        <SelectInput
+          options={themeOptions}
+          value={theme}
+          onChange={(theme) => update((current) => ({ ...current, theme }))}
+        />
+      </FormItem>
       <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
-        <FormItem label="Theme">
+        <FormItem label="Font Family">
           <SelectInput
-            options={themeOptions}
-            value={theme}
-            onChange={(theme) => update((current) => ({ ...current, theme }))}
+            options={fontFamilyOptions}
+            value={fontFamily}
+            onChange={(fontFamily) => update((current) => ({ ...current, fontFamily }))}
           />
         </FormItem>
         <FormItem label="Font Size">

website/src/repl/Repl.css

@@ -17,6 +17,7 @@
 
 #code .cm-scroller {
   padding-bottom: 50vh;
+  font-family: inherit;
 }
 #code .cm-line > * {
   background: var(--lineBackground);

website/src/repl/Repl.jsx

@@ -121,7 +121,7 @@ export function Repl({ embedded = false }) {
 
   const { theme, themeSettings } = useTheme();
   const {
-    state: { keybindings, fontSize },
+    state: { keybindings, fontSize, fontFamily },
   } = useStore();
 
   const { code, setCode, scheduler, evaluate, activateCode, isDirty, activeCode, pattern, started, stop, error } =
@@ -283,6 +283,7 @@ export function Repl({ embedded = false }) {
             value={code}
             keybindings={keybindings}
             fontSize={fontSize}
+            fontFamily={fontFamily}
             onChange={handleChangeCode}
             onViewChanged={setView}
             onSelectionChange={handleSelectionChange}

website/src/repl/themes.mjs

@@ -410,7 +410,6 @@ export const settings = {
     gutterBackground: '#1e1e1e',
     gutterForeground: '#838383',
     gutterActiveForeground: '#fff',
-    fontFamily: 'Menlo, Monaco, Consolas, "Andale Mono", "Ubuntu Mono", "Courier New", monospace',
   },
   xcodeLight: {
     light: true,

website/src/store.mjs

@@ -2,6 +2,7 @@ export const storeKey = 'strudel-settings';
 const defaults = {
   keybindings: 'codemirror',
   theme: 'strudelTheme',
+  fontFamily: 'monospace',
   fontSize: 18,
 };