elias/strudel-docker
1
0
Fork 0
mirror of https://github.com/eliasstepanik/strudel-docker.git synced 2026-01-24 20:18:34 +00:00
Code Issues Packages Projects Releases Wiki Activity

vanilla-repl-cm6: add keybindings

Browse Source
This commit is contained in:
Felix Roos 2023-05-05 09:06:27 +02:00
parent 1494cc38fc
commit f069f53fae
2 changed files with 33 additions and 17 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

16
packages/core/examples/vite-vanilla-repl-cm6/codemirror.js
View File

@ -7,7 +7,7 @@ import { StateField, StateEffect } from '@codemirror/state';
import './style.css'; import './style.css';
// https://codemirror.net/docs/guide/ // https://codemirror.net/docs/guide/
export function initEditor(initialCode, onUpdate) { export function initEditor({ initialCode, onChange, onEvaluate, onStop }) {
let state = EditorState.create({ let state = EditorState.create({
doc: initialCode, doc: initialCode,
extensions: [ extensions: [
@ -22,9 +22,17 @@ export function initEditor(initialCode, onUpdate) {
syntaxHighlighting(defaultHighlightStyle), syntaxHighlighting(defaultHighlightStyle),
keymap.of(defaultKeymap), keymap.of(defaultKeymap),
//flashField, //flashField,
EditorView.updateListener.of((v) => { EditorView.updateListener.of((v) => onChange(v)),
onUpdate(v); keymap.of([
}), {
key: 'Ctrl-Enter',
run: () => onEvaluate(),
},
{
key: 'Ctrl-.',
run: () => onStop(),
},
]),
], ],
}); });

34
packages/core/examples/vite-vanilla-repl-cm6/main.js
View File

@ -5,28 +5,36 @@ import { initStrudel } from './strudel';
import { Highlighter } from './highlighter'; import { Highlighter } from './highlighter';
import { bumpStreet } from './tunes'; import { bumpStreet } from './tunes';
let code = bumpStreet; let code = bumpStreet;
const view = initEditor(code, (v) => {
code = v.state.doc.toString();
});
const repl = initStrudel(); const repl = initStrudel();
let highlighter = new Highlighter((haps) => highlightHaps(view, haps)); async function onEvaluate() {
document.getElementById('play').addEventListener('click', async () => {
const { evaluate, scheduler } = await repl; const { evaluate, scheduler } = await repl;
if (!scheduler.started) { if (!scheduler.started) {
scheduler.stop(); scheduler.stop();
scheduler.lastEnd = 0;
await evaluate(code); await evaluate(code);
highlighter.start(scheduler); highlighter.start(scheduler);
} else { } else {
await evaluate(code); await evaluate(code);
} }
}
async function onStop() {
const { scheduler } = await repl;
scheduler.stop();
highlighter.stop();
}
const view = initEditor({
initialCode: code,
onChange: (v) => {
code = v.state.doc.toString();
},
onEvaluate,
onStop,
}); });
document.getElementById('stop').addEventListener('click', async () => { let highlighter = new Highlighter((haps) => highlightHaps(view, haps));
const { stop } = await repl;
stop(); document.getElementById('play').addEventListener('click', () => onEvaluate());
highlighter.stop();
}); document.getElementById('stop').addEventListener('click', async () => onStop());