<div
    class="d-flex align-items-center"
    x-data="{
        is_focused: false,
        init() {
            $nextTick(() => {
                $refs.textarea.style.height = 'auto'
                $refs.textarea.style.height = $refs.textarea.scrollHeight + 'px'
            })
        },
        update_cursor_position({order, cursor_position}) {
            if (order === version_block.order) {
                $refs.textarea.focus()
                $refs.textarea.setSelectionRange(cursor_position, cursor_position)
            }
        }
    }"
    @update_cursor_position.window="
        update_cursor_position({order: $event.detail.order, cursor_position: $event.detail.cursor_position})
    "
>
    <style>
        textarea:focus {
            outline: none;
            border: none;
        }
    </style>
    {% block before_text_content %}
    {% endblock %}
    <textarea
        rows="1"
        class="w-100 border-0 bg-transparent px-1 auto-resize overflow-y-hidden {% block textarea_class %}fs-6{% endblock %}"
        style="height: 30px; resize: none;"
        x-ref="textarea"
        x-model="version_block.block.value"
        @input="update_height($event)"
        :placeholder="is_focused ? 'Write Something...' : ''"
        @focus="is_focused = true"
        @blur="is_focused = false"
        @beforeinput.debounce.300ms="update_value({version_block: version_block})"
        @keydown.backspace="delete_block_if_empty({version_block: version_block})"
        {% block shift_enter_event %}
        @keydown.shift.enter.prevent="create_blank_block({block_type: 'text', order: version_block.order + 1})"
        {% endblock %}
        @keydown.up.prevent="$dispatch('update_cursor_position', {order: version_block.order - 1, cursor_position: $event.target.selectionStart})"
        @keydown.down.prevent="$dispatch('update_cursor_position', {order: version_block.order + 1, cursor_position: $event.target.selectionStart})"
        {% block textarea_attributes %}
        {% endblock %}
    ></textarea>
</div>
