elias/strudel-docker
1
0
Fork 0
mirror of https://github.com/eliasstepanik/strudel-docker.git synced 2026-01-19 17:48:33 +00:00
Code Issues Packages Projects Releases Wiki Activity

better theme style handling

Browse Source
This commit is contained in:
Felix Roos 2023-12-15 11:23:10 +01:00
parent be1e5a7d0e
commit 034df01e1f
3 changed files with 5 additions and 18 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
packages/codemirror/codemirror.mjs
View File

@ -10,7 +10,7 @@ import { Pattern, Drawer, repl, cleanupDraw } from '@strudel.cycles/core';
import { flash, isFlashEnabled } from './flash.mjs'; import { flash, isFlashEnabled } from './flash.mjs';
import { highlightMiniLocations, isPatternHighlightingEnabled, updateMiniLocations } from './highlight.mjs'; import { highlightMiniLocations, isPatternHighlightingEnabled, updateMiniLocations } from './highlight.mjs';
import { keybindings } from './keybindings.mjs'; import { keybindings } from './keybindings.mjs';
import { theme } from './themes.mjs'; import { initTheme, activateTheme, theme } from './themes.mjs';
import { updateWidgets, sliderPlugin } from './slider.mjs'; import { updateWidgets, sliderPlugin } from './slider.mjs';
const extensions = { const extensions = {
@ -30,6 +30,7 @@ export function initEditor({ initialCode = '', onChange, onEvaluate, onStop, set
const initialSettings = Object.keys(compartments).map((key) => const initialSettings = Object.keys(compartments).map((key) =>
compartments[key].of(extensions[key](parseBooleans(settings[key]))), compartments[key].of(extensions[key](parseBooleans(settings[key]))),
); );
initTheme(settings.theme);
let state = EditorState.create({ let state = EditorState.create({
doc: initialCode, doc: initialCode,
extensions: [ extensions: [
@ -213,6 +214,9 @@ export class StrudelMirror {
this.editor.dispatch({ this.editor.dispatch({
effects: compartments[key].reconfigure(newValue), effects: compartments[key].reconfigure(newValue),
}); });
if (key === 'theme') {
activateTheme(value);
}
} }
setLineWrappingEnabled(enabled) { setLineWrappingEnabled(enabled) {
this.reconfigureExtension('isLineWrappingEnabled', enabled); this.reconfigureExtension('isLineWrappingEnabled', enabled);

13
website/src/pages/vanilla/mini.astro
View File

@ -6,19 +6,6 @@ import HeadCommonNew from '../../components/HeadCommonNew.astro';
<html lang="en" class="dark"> <html lang="en" class="dark">
<head> <head>
<!-- <HeadCommonNew /> --> <!-- <HeadCommonNew /> -->
<style>
:root {
--background: #222;
--lineBackground: #22222299;
--foreground: #fff;
--caret: #ffcc00;
--selection: rgba(128, 203, 196, 0.5);
--selectionMatch: #036dd626;
--lineHighlight: #00000050;
--gutterBackground: transparent;
--gutterForeground: #8a919966;
}
</style>
<title>Strudel Vanilla REPL</title> <title>Strudel Vanilla REPL</title>
<script src="@strudel/repl"></script> <script src="@strudel/repl"></script>
</head> </head>

4
website/src/repl/vanilla/vanilla.mjs
View File

@ -1,5 +1,4 @@
import { hash2code, logger } from '@strudel.cycles/core'; import { hash2code, logger } from '@strudel.cycles/core';
import { activateTheme, initTheme } from '@strudel/codemirror';
import './vanilla.css'; import './vanilla.css';
let editor; let editor;
@ -16,7 +15,6 @@ const initialSettings = {
fontFamily: 'monospace', fontFamily: 'monospace',
fontSize: 18, fontSize: 18,
}; };
initTheme(initialSettings.theme);
async function run() { async function run() {
const repl = document.getElementById('editor'); const repl = document.getElementById('editor');
@ -129,6 +127,4 @@ setFormValues(form, initialSettings);
form.addEventListener('change', () => { form.addEventListener('change', () => {
const values = getFormValues(form, initialSettings); const values = getFormValues(form, initialSettings);
editor?.updateSettings(values); editor?.updateSettings(values);
// TODO: only activateTheme when it changes
activateTheme(values.theme);
}); });