91 lines
2.7 KiB
JavaScript
91 lines
2.7 KiB
JavaScript
import { toggleLineComment } from '@codemirror/commands';
|
|
import { javascript, javascriptLanguage } from '@codemirror/lang-javascript';
|
|
import { defaultHighlightStyle, syntaxHighlighting } from '@codemirror/language';
|
|
import { Compartment, EditorState, Prec } from '@codemirror/state';
|
|
import { drawSelection, EditorView, keymap } from '@codemirror/view';
|
|
import { logger } from '@strudel/core';
|
|
import { basicSetup, flash, prebakeField, initTheme, extensions, parseBooleans } from '@strudel/codemirror';
|
|
|
|
export class PrebakeCodeMirror {
|
|
constructor(initialCode, storePrebake, containerRef, editorRef, settings) {
|
|
this.storePrebake = storePrebake;
|
|
const compartments = Object.fromEntries(Object.keys(extensions).map((key) => [key, new Compartment()]));
|
|
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: [
|
|
...initialSettings,
|
|
basicSetup,
|
|
javascript(),
|
|
javascriptLanguage.data.of({
|
|
closeBrackets: { brackets: ['(', '[', '{', "'", '"', '<'] },
|
|
bracketMatching: { brackets: ['(', '[', '{', "'", '"', '<'] },
|
|
}),
|
|
syntaxHighlighting(defaultHighlightStyle),
|
|
EditorView.updateListener.of((v) => {
|
|
if (v.docChanged) {
|
|
this.code = v.state.doc.toString();
|
|
}
|
|
}),
|
|
drawSelection({ cursorBlinkRate: 0 }),
|
|
Prec.highest(
|
|
keymap.of([
|
|
{
|
|
mac: 'Meta-Enter',
|
|
run: () => {
|
|
this.savePrebake();
|
|
},
|
|
},
|
|
{
|
|
key: 'Ctrl-Enter',
|
|
run: () => {
|
|
this.savePrebake();
|
|
},
|
|
},
|
|
{
|
|
key: 'Alt-Enter',
|
|
run: () => {
|
|
this.savePrebake();
|
|
},
|
|
},
|
|
]),
|
|
),
|
|
prebakeField,
|
|
],
|
|
});
|
|
editorRef.current = state;
|
|
this.code = initialCode;
|
|
this.view = new EditorView({
|
|
state,
|
|
parent: containerRef.current,
|
|
});
|
|
}
|
|
|
|
async savePrebake() {
|
|
flash(this.view);
|
|
this.storePrebake(this.code);
|
|
logger('[prebake] prebake saved');
|
|
}
|
|
|
|
toggleComment() {
|
|
try {
|
|
// Honor selections; toggleLineComment handles both selections and
|
|
// single line
|
|
toggleLineComment(this.view);
|
|
} catch (err) {
|
|
console.error('Error handling repl-toggle-comment event', err);
|
|
}
|
|
}
|
|
|
|
setCode(code) {
|
|
const changes = {
|
|
from: 0,
|
|
to: this.view.state.doc.length,
|
|
insert: code,
|
|
};
|
|
this.view.dispatch({ changes });
|
|
}
|
|
}
|