From 3a438359c399a3609f2a1907a81ae013444fb6bf Mon Sep 17 00:00:00 2001
From: liquidev <liquidev@tutanota.com>
Date: Sat, 24 Aug 2024 17:47:47 +0200
Subject: [PATCH] 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
---
 static/brush-editor.js | 16 ++++++++++++----
 static/index.css       |  7 ++++---
 2 files changed, 16 insertions(+), 7 deletions(-)

diff --git a/static/brush-editor.js b/static/brush-editor.js
index 6159db6..c0db4be 100644
--- a/static/brush-editor.js
+++ b/static/brush-editor.js
@@ -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() {
diff --git a/static/index.css b/static/index.css
index 6f27f0f..450ae7f 100644
--- a/static/index.css
+++ b/static/index.css
@@ -60,7 +60,7 @@ button, textarea, input {
     font-family: inherit;
 }
 
-pre, code {
+pre, code, textarea {
     font-family: "Fira Code", monospace;    
 }
 
@@ -113,7 +113,7 @@ input {
     border-bottom: 1px solid var(--color-panel-border);
 }
 
-*[contenteditable]:focus, input:focus {
+*[contenteditable]:focus, input:focus, textarea:focus {
     border-radius: 2px;
     outline: 1px solid #40b1f4;
     outline-offset: 4px;
@@ -215,11 +215,12 @@ rkgk-reticle-cursor {
 
 rkgk-brush-editor {
     &>.text-area {
+        box-sizing: border-box;
         width: 100%;
-        height: 100%;
         margin: 0;
         resize: none;
         white-space: pre-wrap;
+        border: none;
     }
 
     &>.errors:empty, &>.error-header:empty {