API Reference
This is the long list functions you can use! Remember that you don't need to remember all of those and that
diff --git a/website/src/repl/Repl.css b/website/src/repl/Repl.css
index 911324643..97cd7a60a 100644
--- a/website/src/repl/Repl.css
+++ b/website/src/repl/Repl.css
@@ -10,11 +10,15 @@
opacity: 0.5;
}
-.cm-gutters {
- display: none !important;
-}
-
-.cm-content {
+#code .cm-content {
padding-top: 12px !important;
padding-left: 8px !important;
}
+
+#code .cm-scroller {
+ padding-bottom: 50vh;
+ font-family: inherit;
+}
+#code .cm-line > * {
+ background: var(--lineBackground);
+}
diff --git a/website/src/repl/Repl.jsx b/website/src/repl/Repl.jsx
index b26f2bbc6..ce21f1c1d 100644
--- a/website/src/repl/Repl.jsx
+++ b/website/src/repl/Repl.jsx
@@ -5,7 +5,7 @@ This program is free software: you can redistribute it and/or modify it under th
*/
import { cleanupDraw, cleanupUi, controls, evalScope, getDrawContext, logger } from '@strudel.cycles/core';
-import { CodeMirror, cx, flash, useHighlighting, useStrudel } from '@strudel.cycles/react';
+import { CodeMirror, cx, flash, useHighlighting, useStrudel, useKeydown } from '@strudel.cycles/react';
import {
getAudioContext,
getLoadedSamples,
@@ -22,6 +22,10 @@ import { Header } from './Header';
import { prebake } from './prebake.mjs';
import * as tunes from './tunes.mjs';
import PlayCircleIcon from '@heroicons/react/20/solid/PlayCircleIcon';
+import { themes } from './themes.mjs';
+import { settingsMap, useSettings, setLatestCode } from '../settings.mjs';
+
+const { latestCode } = settingsMap.get();
initAudioOnFirstClick();
@@ -110,23 +114,24 @@ export function Repl({ embedded = false }) {
const isEmbedded = embedded || window.location !== window.parent.location;
const [view, setView] = useState(); // codemirror view
const [lastShared, setLastShared] = useState();
- const [activeFooter, setActiveFooter] = useState('');
- const [isZen, setIsZen] = useState(false);
const [pending, setPending] = useState(false);
+ const { theme, keybindings, fontSize, fontFamily } = useSettings();
+
const { code, setCode, scheduler, evaluate, activateCode, isDirty, activeCode, pattern, started, stop, error } =
useStrudel({
initialCode: '// LOADING',
defaultOutput: webaudioOutput,
getTime,
- autolink: true,
beforeEval: () => {
cleanupUi();
cleanupDraw();
setPending(true);
},
- afterEval: () => {
+ afterEval: ({ code }) => {
setPending(false);
+ setLatestCode(code);
+ window.location.hash = '#' + encodeURIComponent(btoa(code));
},
onToggle: (play) => !play && cleanupDraw(false),
drawContext,
@@ -135,16 +140,13 @@ export function Repl({ embedded = false }) {
// init code
useEffect(() => {
initCode().then((decoded) => {
- if (!decoded) {
- setActiveFooter('intro'); // TODO: get rid
- }
logger(
`Welcome to Strudel! ${
decoded ? `I have loaded the code from the URL.` : `A random code snippet named "${name}" has been loaded!`
} Press play or hit ctrl+enter to run it!`,
'highlight',
);
- setCode(decoded || randomTune);
+ setCode(decoded || latestCode || randomTune);
});
}, []);
@@ -240,21 +242,18 @@ export function Repl({ embedded = false }) {
}
};
const context = {
+ scheduler,
embedded,
started,
pending,
isDirty,
lastShared,
activeCode,
- activeFooter,
- setActiveFooter,
handleChangeCode,
handleTogglePlay,
handleUpdate,
handleShuffle,
handleShare,
- isZen,
- setIsZen,
};
return (
// bg-gradient-to-t from-blue-900 to-slate-900
@@ -262,21 +261,28 @@ export function Repl({ embedded = false }) {
{
+ setView(v);
+ // window.editorView = v;
+ }}
onSelectionChange={handleSelectionChange}
/>
{error && (
-
{error.message || 'Unknown Error :-/'}
+
{error.message || 'Unknown Error :-/'}
)}
{isEmbedded && !started && (