riki/rkgk
riki/rkgk
1
Fork 0
Code Issues 57 Pull requests Projects 1 Activity

replace the accursed contenteditable text box with an ordinary textarea

Browse source 
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
This commit is contained in:
りき萌 2024-08-24 17:47:47 +02:00
parent fb0e15c00c
commit 3a438359c3
2 changed files with 16 additions and 7 deletions
Download patch file Download diff file Expand all files Collapse all files

16
static/brush-editor.js
View file

@ -15,12 +15,14 @@ export class BrushEditor extends HTMLElement {
connectedCallback() {
this.classList.add("rkgk-panel");
this.textArea = this.appendChild(document.createElement("pre"));
this.textArea = this.appendChild(document.createElement("textarea"));
this.textArea.classList.add("text-area");
this.textArea.textContent = localStorage.getItem("rkgk.brushEditor.code") ?? defaultBrush;
this.textArea.contentEditable = true;
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"), {
@ -28,6 +30,7 @@ export class BrushEditor extends HTMLElement {
}),
);
});
this.#resizeTextArea();
this.errorHeader = this.appendChild(document.createElement("h1"));
this.errorHeader.classList.add("error-header");
@ -36,8 +39,13 @@ export class BrushEditor extends HTMLElement {
this.errorArea.classList.add("errors");
}
#resizeTextArea() {
this.textArea.style.height = "";
this.textArea.style.height = `${this.textArea.scrollHeight}px`;
}
get code() {
return this.textArea.textContent;
return this.textArea.value;
}
resetErrors() {