elias/strudel-docker
1
0
Fork 0
mirror of https://github.com/eliasstepanik/strudel-docker.git synced 2026-01-25 12:38:35 +00:00
Code Issues Packages Projects Releases Wiki Activity

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

Browse Source
This commit is contained in:
Felix Roos 2023-06-07 20:19:34 +02:00
commit 02d793e9e0
5 changed files with 30 additions and 13 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
packages/react/src/components/CodeMirror6.jsx
View File

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

32
website/src/repl/Footer.jsx
View File

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

3
website/src/repl/Repl.jsx
View File

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

2
website/src/settings.mjs
View File

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

4
website/src/styles/index.css
View File

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