Add textarea support to lil-gui

lil-gui-textarea.ts

import { GUI, Controller } from 'lil-gui';

export class TextController extends Controller {

    private $button: HTMLButtonElement;
    private $text: HTMLTextAreaElement;

    constructor(parent: GUI, object: object, property: string, rows: number = 4) {
        super(parent, object, property, 'textarea');

        this.$button = document.createElement('button');
        this.$button.innerText = 'Edit';
        this.$widget.appendChild(this.$button);

        this.$text = document.createElement('textarea');
        this.$text.rows = rows;
        Object.assign(this.$text.style, {
            border: '0',
            outline: 'none',
            resize: 'vertical',
            width: 'calc(100% - 2 * var(--spacing))',
            fontFamily: 'var(--font-family)',
            fontSize: 'var(--input-font-size)',
            borderRadius: 'var(--widget-border-radius)',
            background: 'var(--widget-color)',
            color: 'var(--text-color)',
            margin: 'var(--spacing)',
        })
        this.parent.$children.appendChild(this.$text);

        this.$button.addEventListener('click', () => this.doShow());

        this.$text.addEventListener('keydown', (e) => {
            if (e.key === 'Enter' && !e.shiftKey) this.doSave();
            else if (e.key === 'Escape') this.doCancel();
        });

        this.$text.addEventListener('blur', () => this.doSave());

        this.doCancel();
    }

    private doShow() {
        this.$text.style.display = 'block';
        this.$text.focus();
    }

    private doSave() {
        this.$text.style.display = 'none';
        this.setValue(this.$text.value);
    }

    private doCancel() {
        this.$text.style.display = 'none';
        this.$text.value = this.getValue();
    }
}

export function addTextarea(gui: GUI, object: object, property: string, rows?: number) {
    return new TextController(gui, object, property, rows);
}