Update com-editor to use auto-growing textarea

...under hood

sketches/2024-05-30-lookslike-prototype/src/components/com-editor.ts

@@ -1,4 +1,4 @@
-import {LitElement, html, css} from 'lit-element'
+import {LitElement, html, css, PropertyValueMap} from 'lit-element'
 import {customElement, property} from 'lit/decorators.js'
 import {base} from '../styles'
 
@@ -8,7 +8,17 @@ const styles = css`
   }
 
   .editor {
+    background: transparent;
     display: block;
+    border: none;
+    padding: 0;
+    width: 100%;
+    font-size: var(--body-size, 16px);
+    font-family: var(--body-font, sans-serif);
+    line-height: var(--body-line, 1.5em);
+    min-height: var(--body-line, 1.5em);
+    overflow: hidden;
+    resize: none;
 
     &:focus {
       outline: none;
@@ -23,8 +33,28 @@ export class ComEditor extends LitElement {
   @property({type: String}) value = ''
 
   render() {
+    const oninput = (event: InputEvent) => {
+      const textarea = event.target as HTMLTextAreaElement
+      this.value = textarea.value
+    }
+
     return html`
-    <div class="editor" contenteditable="plaintext-only">${this.value}</div>
+      <textarea class="editor" @input=${oninput}>${this.value}</textarea>
     `
   }
+
+  #updateTextareaHeight() {
+    const textarea = this.shadowRoot?.querySelector('.editor') as HTMLTextAreaElement
+    textarea.style.height = '0px'
+    const height = textarea.scrollHeight
+    textarea.style.height = `${height}px`
+  }
+
+  protected updated(
+    changedProperties: Map<PropertyKey, any>
+  ): void {
+    if (changedProperties.has('value')) {
+      this.#updateTextareaHeight()
+    }
+  }
 }