rkgk/static/brush-editor.js
liquidex 3a438359c3 replace the accursed contenteditable text box with an ordinary textarea
you could paste discord convos into it.

discord.
conversations.
and they'd render.
like in Discord.

lmao.

I still do wonder how to do syntax highlighting on it, but I've seen prism-code-editor, which I _think_ hides the textarea's text and overlays a non user-interactable syntax highlighted version on top.
what's cool is that we could theoretically have many such overlays - for things like highlights too
but we'll see how that goes
2024-08-24 17:50:06 +02:00

87 lines
2.8 KiB
JavaScript

const defaultBrush = `
; This is your brush.
; Feel free to edit it to your liking!
(stroke
8 ; thickness
(rgba 0.0 0.0 0.0 1.0) ; color
(vec)) ; position
`.trim();
export class BrushEditor extends HTMLElement {
constructor() {
super();
}
connectedCallback() {
this.classList.add("rkgk-panel");
this.textArea = this.appendChild(document.createElement("textarea"));
this.textArea.classList.add("text-area");
this.textArea.value = localStorage.getItem("rkgk.brushEditor.code") ?? defaultBrush;
this.textArea.spellcheck = false;
this.textArea.rows = 1;
this.textArea.addEventListener("input", () => {
this.#resizeTextArea();
localStorage.setItem("rkgk.brushEditor.code", this.code);
this.dispatchEvent(
Object.assign(new Event(".codeChanged"), {
newCode: this.code,
}),
);
});
this.#resizeTextArea();
this.errorHeader = this.appendChild(document.createElement("h1"));
this.errorHeader.classList.add("error-header");
this.errorArea = this.appendChild(document.createElement("pre"));
this.errorArea.classList.add("errors");
}
#resizeTextArea() {
this.textArea.style.height = "";
this.textArea.style.height = `${this.textArea.scrollHeight}px`;
}
get code() {
return this.textArea.value;
}
resetErrors() {
this.errorHeader.textContent = "";
this.errorArea.textContent = "";
}
renderHakuResult(phase, result) {
this.resetErrors();
console.log(result);
if (result.status != "error") return;
this.errorHeader.textContent = `${phase} failed`;
if (result.errorKind == "diagnostics") {
// This is kind of wooden; I'd prefer if the error spans were rendered inline in text,
// but I haven't integrated anything for syntax highlighting yet that would let me
// do that.
this.errorArea.textContent = result.diagnostics
.map(
(diagnostic) => `${diagnostic.start}..${diagnostic.end}: ${diagnostic.message}`,
)
.join("\n");
} else if (result.errorKind == "plain") {
this.errorHeader.textContent = result.message;
} else if (result.errorKind == "exception") {
// TODO: This should show a stack trace.
this.errorArea.textContent = `an exception occurred: ${result.message}`;
} else {
console.warn(`unknown error kind: ${result.errorKind}`);
this.errorHeader.textContent = "(unknown error kind)";
}
}
}
customElements.define("rkgk-brush-editor", BrushEditor);