mirror of
https://github.com/eliasstepanik/strudel-docker.git
synced 2026-01-11 21:58:31 +00:00
better theme style handling
This commit is contained in:
parent
be1e5a7d0e
commit
034df01e1f
@ -10,7 +10,7 @@ import { Pattern, Drawer, repl, cleanupDraw } from '@strudel.cycles/core';
|
||||
import { flash, isFlashEnabled } from './flash.mjs';
|
||||
import { highlightMiniLocations, isPatternHighlightingEnabled, updateMiniLocations } from './highlight.mjs';
|
||||
import { keybindings } from './keybindings.mjs';
|
||||
import { theme } from './themes.mjs';
|
||||
import { initTheme, activateTheme, theme } from './themes.mjs';
|
||||
import { updateWidgets, sliderPlugin } from './slider.mjs';
|
||||
|
||||
const extensions = {
|
||||
@ -30,6 +30,7 @@ export function initEditor({ initialCode = '', onChange, onEvaluate, onStop, set
|
||||
const initialSettings = Object.keys(compartments).map((key) =>
|
||||
compartments[key].of(extensions[key](parseBooleans(settings[key]))),
|
||||
);
|
||||
initTheme(settings.theme);
|
||||
let state = EditorState.create({
|
||||
doc: initialCode,
|
||||
extensions: [
|
||||
@ -213,6 +214,9 @@ export class StrudelMirror {
|
||||
this.editor.dispatch({
|
||||
effects: compartments[key].reconfigure(newValue),
|
||||
});
|
||||
if (key === 'theme') {
|
||||
activateTheme(value);
|
||||
}
|
||||
}
|
||||
setLineWrappingEnabled(enabled) {
|
||||
this.reconfigureExtension('isLineWrappingEnabled', enabled);
|
||||
|
||||
@ -6,19 +6,6 @@ import HeadCommonNew from '../../components/HeadCommonNew.astro';
|
||||
<html lang="en" class="dark">
|
||||
<head>
|
||||
<!-- <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>
|
||||
<script src="@strudel/repl"></script>
|
||||
</head>
|
||||
|
||||
@ -1,5 +1,4 @@
|
||||
import { hash2code, logger } from '@strudel.cycles/core';
|
||||
import { activateTheme, initTheme } from '@strudel/codemirror';
|
||||
import './vanilla.css';
|
||||
|
||||
let editor;
|
||||
@ -16,7 +15,6 @@ const initialSettings = {
|
||||
fontFamily: 'monospace',
|
||||
fontSize: 18,
|
||||
};
|
||||
initTheme(initialSettings.theme);
|
||||
|
||||
async function run() {
|
||||
const repl = document.getElementById('editor');
|
||||
@ -129,6 +127,4 @@ setFormValues(form, initialSettings);
|
||||
form.addEventListener('change', () => {
|
||||
const values = getFormValues(form, initialSettings);
|
||||
editor?.updateSettings(values);
|
||||
// TODO: only activateTheme when it changes
|
||||
activateTheme(values.theme);
|
||||
});
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user