Merge remote-tracking branch 'origin/main' into workshop-new

packages/react/src/components/CodeMirror6.jsx

@@ -104,6 +104,7 @@ export default function CodeMirror({
   onSelectionChange,
   theme,
   keybindings,
+  isLineNumbersDisplayed,
   fontSize = 18,
   fontFamily = 'monospace',
   options,
@@ -148,6 +149,7 @@ export default function CodeMirror({
         onCreateEditor={handleOnCreateEditor}
         onUpdate={handleOnUpdate}
         extensions={extensions}
+        basicSetup={{ lineNumbers: isLineNumbersDisplayed }}
       />
     </div>
   );

website/src/repl/Footer.jsx

@@ -273,6 +273,15 @@ function SoundsTab() {
   );
 }
 
+function Checkbox({ label, value, onChange }) {
+  return (
+    <label>
+      <input type="checkbox" checked={value} onChange={onChange} />
+      {' ' + label}
+    </label>
+  );
+}
+
 function ButtonGroup({ value, onChange, items }) {
   return (
     <div className="flex max-w-lg">
@@ -355,7 +364,7 @@ const fontFamilyOptions = {
 };
 
 function SettingsTab({ scheduler }) {
-  const { theme, keybindings, fontSize, fontFamily } = useSettings();
+  const { theme, keybindings, isLineNumbersDisplayed, fontSize, fontFamily } = useSettings();
   return (
     <div className="text-foreground p-4 space-y-4">
       {/* <FormItem label="Tempo">
@@ -397,13 +406,20 @@ function SettingsTab({ scheduler }) {
           />
         </FormItem>
       </div>
-      <FormItem label="Keybindings">
-        <ButtonGroup
-          value={keybindings}
-          onChange={(keybindings) => settingsMap.setKey('keybindings', keybindings)}
-          items={{ codemirror: 'Codemirror', vim: 'Vim', emacs: 'Emacs' }}
-        ></ButtonGroup>
-      </FormItem>
+      <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
+        <FormItem label="Keybindings">
+          <ButtonGroup
+            value={keybindings}
+            onChange={(keybindings) => settingsMap.setKey('keybindings', keybindings)}
+            items={{ codemirror: 'Codemirror', vim: 'Vim', emacs: 'Emacs' }}
+          ></ButtonGroup>
+        </FormItem>
+        <Checkbox
+          label="Display line numbers"
+          onChange={(cbEvent) => settingsMap.setKey('isLineNumbersDisplayed', cbEvent.target.checked)}
+          value={isLineNumbersDisplayed}
+        />
+      </div>
       <FormItem label="Reset Settings">
         <button
           className="bg-background p-2 max-w-[300px] rounded-md hover:opacity-50"

website/src/repl/Repl.jsx

@@ -105,7 +105,7 @@ export function Repl({ embedded = false }) {
   const [lastShared, setLastShared] = useState();
   const [pending, setPending] = useState(true);
 
-  const { theme, keybindings, fontSize, fontFamily } = useSettings();
+  const { theme, keybindings, fontSize, fontFamily, isLineNumbersDisplayed } = useSettings();
 
   const { code, setCode, scheduler, evaluate, activateCode, isDirty, activeCode, pattern, started, stop, error } =
     useStrudel({
@@ -271,6 +271,7 @@ export function Repl({ embedded = false }) {
             theme={themes[theme] || themes.strudelTheme}
             value={code}
             keybindings={keybindings}
+            isLineNumbersDisplayed={isLineNumbersDisplayed}
             fontSize={fontSize}
             fontFamily={fontFamily}
             onChange={handleChangeCode}

website/src/settings.mjs

@@ -4,6 +4,7 @@ import { useStore } from '@nanostores/react';
 export const defaultSettings = {
   activeFooter: 'intro',
   keybindings: 'codemirror',
+  isLineNumbersDisplayed: true,
   theme: 'strudelTheme',
   fontFamily: 'monospace',
   fontSize: 18,
@@ -19,6 +20,7 @@ export function useSettings() {
   return {
     ...state,
     isZen: [true, 'true'].includes(state.isZen) ? true : false,
+    isLineNumbersDisplayed: [true, 'true'].includes(state.isLineNumbersDisplayed) ? true : false,
     fontSize: Number(state.fontSize),
   };
 }

website/src/styles/index.css

@@ -27,10 +27,6 @@
   src: url('/fonts/FiraCode/FiraCode-SemiBold.ttf');
 }
 
-.cm-gutters {
-  display: none !important;
-}
-
 .prose > h1:not(:first-child) {
   margin-top: 30px;
 }