diff --git a/packages/codemirror/codemirror.mjs b/packages/codemirror/codemirror.mjs
index a2c70599..e5692a55 100644
--- a/packages/codemirror/codemirror.mjs
+++ b/packages/codemirror/codemirror.mjs
@@ -108,7 +108,17 @@ export function initEditor({ initialCode = '', onChange, onEvaluate, onStop, roo
export class StrudelMirror {
constructor(options) {
- const { root, id, initialCode = '', onDraw, drawTime = [-2, 2], autodraw, prebake, ...replOptions } = options;
+ const {
+ root,
+ id,
+ initialCode = '',
+ onDraw,
+ drawTime = [-2, 2],
+ autodraw,
+ prebake,
+ bgFill = true,
+ ...replOptions
+ } = options;
this.code = initialCode;
this.root = root;
this.miniLocations = [];
@@ -183,7 +193,9 @@ export class StrudelMirror {
const cmEditor = this.root.querySelector('.cm-editor');
if (cmEditor) {
this.root.style.display = 'block';
- this.root.style.backgroundColor = 'var(--background)';
+ if (bgFill) {
+ this.root.style.backgroundColor = 'var(--background)';
+ }
cmEditor.style.backgroundColor = 'transparent';
}
const settings = codemirrorSettings.get();
diff --git a/website/src/repl/Header.jsx b/website/src/repl/Header.jsx
index b6f13060..2592b917 100644
--- a/website/src/repl/Header.jsx
+++ b/website/src/repl/Header.jsx
@@ -18,7 +18,6 @@ export function Header({ context }) {
started,
pending,
isDirty,
- lastShared,
activeCode,
handleTogglePlay,
handleUpdate,
@@ -119,7 +118,7 @@ export function Header({ context }) {
onClick={handleShare}
>
- share{lastShared && lastShared === (activeCode || code) ? 'd!' : ''}
+ share
)}
{!isEmbedded && (
diff --git a/website/src/repl/Repl.jsx b/website/src/repl/Repl.jsx
index 4cd1696a..eb2b495b 100644
--- a/website/src/repl/Repl.jsx
+++ b/website/src/repl/Repl.jsx
@@ -209,7 +209,6 @@ export function Repl({ embedded = false }) {
started,
pending,
isDirty,
- lastShared,
activeCode,
handleChangeCode,
handleTogglePlay,
diff --git a/website/src/repl/Repl2.jsx b/website/src/repl/Repl2.jsx
index 2ea527a2..ccd46c94 100644
--- a/website/src/repl/Repl2.jsx
+++ b/website/src/repl/Repl2.jsx
@@ -28,6 +28,7 @@ import { Panel } from './panel/Panel';
import { useStore } from '@nanostores/react';
import { prebake /* , resetSounds */ } from './prebake.mjs';
import { getRandomTune, initCode, loadModules, shareCode } from './util.mjs';
+import './Repl.css';
const { code: randomTune, name } = getRandomTune();
export const ReplContext = createContext(null);
@@ -50,7 +51,6 @@ if (typeof window !== 'undefined') {
export function Repl2({ embedded = false }) {
//const isEmbedded = embedded || window.location !== window.parent.location;
const isEmbedded = false;
- const [lastShared, setLastShared] = useState();
const { panelPosition, isZen } = useSettings();
/* const replState = useStore($replstate);
const isDirty = useStore($repldirty); */
@@ -89,6 +89,7 @@ export function Repl2({ embedded = false }) {
setLatestCode(code);
window.location.hash = '#' + code2hash(code);
},
+ bgFill: false,
});
// init settings
initCode().then((decoded) => {
@@ -185,7 +186,6 @@ export function Repl2({ embedded = false }) {
started,
pending,
isDirty,
- lastShared,
activeCode,
handleTogglePlay,
handleUpdate,