settings sync

This commit is contained in:
Felix Roos 2023-12-17 21:16:29 +01:00
parent 592e54a53f
commit 1cdb5964c6
6 changed files with 34 additions and 58 deletions

View file

@ -7,20 +7,6 @@ import { StrudelMirror } from '@strudel/codemirror';
import { prebake } from '@strudel/repl';
import { useInView } from 'react-hook-inview';
const initialSettings = {
keybindings: 'strudelTheme',
isLineNumbersDisplayed: true,
isActiveLineHighlighted: false,
isAutoCompletionEnabled: false,
isPatternHighlightingEnabled: true,
isFlashEnabled: true,
isTooltipEnabled: false,
isLineWrappingEnabled: false,
theme: 'strudelTheme',
fontFamily: 'monospace',
fontSize: 18,
};
export function MicroRepl({
code,
hideHeader = false,
@ -56,7 +42,6 @@ export function MicroRepl({
root: containerRef.current,
initialCode: '// LOADING',
pattern: silence,
settings: initialSettings,
drawTime,
onDraw,
editPattern: (pat, id) => {
@ -76,7 +61,6 @@ export function MicroRepl({
},
});
// init settings
editor.updateSettings(initialSettings);
editor.setCode(code);
editorRef.current = editor;
}, []);

View file

@ -5,7 +5,7 @@
</head>
<body>
<p>This is a REPL:</p>
<strudel-editor
<!-- <strudel-editor
keybindings="emacs"
is-line-numbers-displayed="1"
is-active-line-highlighted="1"
@ -17,7 +17,8 @@
theme="strudelTheme"
font-family="monospace"
font-size="18"
code={`s("bd")`}></strudel-editor>
code={`s("bd")`}></strudel-editor> -->
<strudel-editor code={`s("bd")`}></strudel-editor>
<p>This is another REPL:</p>
<strudel-editor is-line-numbers-displayed="0"><!--

View file

@ -1,25 +1,12 @@
import { hash2code, logger } from '@strudel.cycles/core';
import { codemirrorSettings } from '@strudel/codemirror';
import './vanilla.css';
let editor;
const initialSettings = {
keybindings: 'codemirror',
isLineNumbersDisplayed: true,
isActiveLineHighlighted: true,
isAutoCompletionEnabled: false,
isPatternHighlightingEnabled: true,
isFlashEnabled: true,
isTooltipEnabled: false,
isLineWrappingEnabled: false,
theme: 'teletext',
fontFamily: 'monospace',
fontSize: 18,
};
async function run() {
const repl = document.getElementById('editor');
editor = repl.editor;
editor.updateSettings(initialSettings);
logger(`Welcome to Strudel! Click into the editor and then hit ctrl+enter to run the code!`, 'highlight');
const codeParam = window.location.href.split('#')[1] || '';
@ -123,8 +110,8 @@ function setFormValues(form, values) {
}
const form = document.querySelector('form[name=settings]');
setFormValues(form, initialSettings);
setFormValues(form, codemirrorSettings.get());
form.addEventListener('change', () => {
const values = getFormValues(form, initialSettings);
const values = getFormValues(form, codemirrorSettings.get());
editor?.updateSettings(values);
});