@dodona/papyros
Version:
Scratchpad for multiple programming languages in the browser.
115 lines • 4.1 kB
JavaScript
var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
return c > 3 && r && Object.defineProperty(target, key, r), r;
};
import { LitElement } from "lit";
import { customElement } from "lit/decorators.js";
import { EditorView, placeholder } from "@codemirror/view";
import { Compartment, EditorState, StateEffect } from "@codemirror/state";
let CodeMirrorEditor = class CodeMirrorEditor extends LitElement {
constructor() {
super(...arguments);
this.__value = "";
this.__readonly = false;
this.compartments = new Map();
this.extensions = new Map();
}
set value(value) {
if (this.__value === value)
return;
this.__value = value;
if (!this.view)
return;
this.dispatchChange();
}
set readonly(readonly) {
this.configure({
editable: EditorView.editable.of(!readonly),
});
this.__readonly = readonly;
}
dispatchChange() {
if (!this.view)
return;
this.configure({ editable: EditorView.editable.of(false) });
this.view.dispatch({
changes: {
from: 0,
to: this.view.state.doc.length,
insert: this.__value,
},
});
this.configure({ editable: EditorView.editable.of(!this.__readonly) });
}
get value() {
return this.__value;
}
set placeholder(value) {
this.configure({
placeholder: placeholder(value),
});
}
set theme(theme) {
this.configure({ theme: theme });
}
set translations(translations) {
this.configure({ translations: EditorState.phrases.of(translations) });
}
initView() {
this.view = new EditorView({
parent: this.shadowRoot,
state: EditorState.create({
doc: this.__value,
extensions: [
EditorView.updateListener.of(this.onViewUpdate.bind(this)),
[...this.compartments.keys().map((k) => this.compartments.get(k).of([]))],
],
}),
});
this.configure(Object.fromEntries(this.extensions));
}
onViewUpdate(v) {
if (v.docChanged) {
this.__value = v.state.doc.toString();
this.dispatchEvent(new CustomEvent("change", { detail: this.value }));
}
}
connectedCallback() {
super.connectedCallback();
this.initView();
}
focus() {
var _a;
(_a = this.view) === null || _a === void 0 ? void 0 : _a.focus();
}
disconnectedCallback() {
var _a;
super.disconnectedCallback();
(_a = this.view) === null || _a === void 0 ? void 0 : _a.destroy();
this.view = undefined;
}
configure(extensions) {
Object.entries(extensions).forEach(([key, ext]) => {
this.extensions.set(key, ext);
});
const effects = Object.keys(extensions).map((key) => {
const extension = extensions[key];
if (this.compartments.has(key)) {
return this.compartments.get(key).reconfigure(extension);
}
const compartment = new Compartment();
this.compartments.set(key, compartment);
return StateEffect.appendConfig.of(compartment.of(extension));
});
if (this.view) {
this.view.dispatch({ effects });
}
}
};
CodeMirrorEditor = __decorate([
customElement("p-code-mirror-editor")
], CodeMirrorEditor);
export { CodeMirrorEditor };
//# sourceMappingURL=CodeMirrorEditor.js.map