liquidex/rkgk
liquidex/rkgk
1
Fork 0
Code Issues 66 Pull requests Projects 1 Wiki 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:
liquidex 2024-08-24 17:47:47 +02:00
parent fb0e15c00c
commit 3a438359c3
2 changed files with 16 additions and 7 deletions
Show stats 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() { connectedCallback() {
this.classList.add("rkgk-panel"); 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.classList.add("text-area");
this.textArea.textContent = localStorage.getItem("rkgk.brushEditor.code") ?? defaultBrush; this.textArea.value = localStorage.getItem("rkgk.brushEditor.code") ?? defaultBrush;
this.textArea.contentEditable = true;
this.textArea.spellcheck = false; this.textArea.spellcheck = false;
this.textArea.rows = 1;
this.textArea.addEventListener("input", () => { this.textArea.addEventListener("input", () => {
this.#resizeTextArea();
localStorage.setItem("rkgk.brushEditor.code", this.code); localStorage.setItem("rkgk.brushEditor.code", this.code);
this.dispatchEvent( this.dispatchEvent(
Object.assign(new Event(".codeChanged"), { 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 = this.appendChild(document.createElement("h1"));
this.errorHeader.classList.add("error-header"); this.errorHeader.classList.add("error-header");
@ -36,8 +39,13 @@ export class BrushEditor extends HTMLElement {
this.errorArea.classList.add("errors"); this.errorArea.classList.add("errors");
} }
#resizeTextArea() {
this.textArea.style.height = "";
this.textArea.style.height = `${this.textArea.scrollHeight}px`;
}
get code() { get code() {
return this.textArea.textContent; return this.textArea.value;
} }
resetErrors() { resetErrors() {

7
static/index.css
View file

@ -60,7 +60,7 @@ button, textarea, input {
font-family: inherit; font-family: inherit;
} }
pre, code { pre, code, textarea {
font-family: "Fira Code", monospace; font-family: "Fira Code", monospace;
} }
@ -113,7 +113,7 @@ input {
border-bottom: 1px solid var(--color-panel-border); border-bottom: 1px solid var(--color-panel-border);
} }
*[contenteditable]:focus, input:focus { *[contenteditable]:focus, input:focus, textarea:focus {
border-radius: 2px; border-radius: 2px;
outline: 1px solid #40b1f4; outline: 1px solid #40b1f4;
outline-offset: 4px; outline-offset: 4px;
@ -215,11 +215,12 @@ rkgk-reticle-cursor {
rkgk-brush-editor { rkgk-brush-editor {
&>.text-area { &>.text-area {
box-sizing: border-box;
width: 100%; width: 100%;
height: 100%;
margin: 0; margin: 0;
resize: none; resize: none;
white-space: pre-wrap; white-space: pre-wrap;
border: none;
} }
&>.errors:empty, &>.error-header:empty { &>.errors:empty, &>.error-header:empty {