<script lang="ts">
	let { value = $bindable(), onsubmit } = $props();

	function handleKeyDown(event: KeyboardEvent) {
		if (event.key === 'Enter' && !event.shiftKey) {
			event.preventDefault();
			onsubmit();
		}
	}
</script>

<div class="rounded-md border-input border-1 px-1 w-full"
	 bind:innerText={value}
	 onkeydown={handleKeyDown}
	 contenteditable></div>

<style>
	div{
		word-wrap: break-word;
		overflow-wrap: break-word;
		word-break: break-all;
		max-height: 40vh;
		overflow: scroll;
	}
</style>