<script>
    import {onMount} from "svelte";

    export let block;
    let thisEl;

    function resize(e) {
        let el;
        if (e.target) {
            el = e.target;
        } else {
            el = e;
        }

        el.style.overflow = "hidden";
        el.style.height = "1px";
        el.style.height = +el.scrollHeight + "px";
    }

    onMount(() => {
        resize(thisEl);
    });
</script>

<div class="mb-0">

    <textarea
        bind:value={block.value}
        bind:this={thisEl}
        on:input={resize}
        id={block.id}
        class="form-control"
        autocomplete="off"></textarea>
</div>
<style>
    textarea {
        resize: none;
    }
</style>
