Spaces:
Running
Running
File size: 1,469 Bytes
6e856a0 74815cb 5da61b4 6e856a0 5da61b4 1b66f8d 6e856a0 b2387f6 74815cb 6e856a0 5da61b4 6e856a0 74815cb 6e856a0 1b66f8d 6e856a0 b2387f6 6e856a0 6f12e84 6e856a0 6f12e84 6e856a0 fa72efa 6e856a0 1c8195c 6e856a0 6f12e84 6e856a0 1b66f8d 6e856a0 |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 |
<script lang="ts">
import { createEventDispatcher } from "svelte";
export let value = "";
export let minRows = 1;
export let maxRows: null | number = null;
export let placeholder = "";
export let disabled = false;
export let autofocus = false;
const dispatch = createEventDispatcher<{ submit: void }>();
$: minHeight = `${1 + minRows * 1.5}em`;
$: maxHeight = maxRows ? `${1 + maxRows * 1.5}em` : `auto`;
function handleKeydown(event: KeyboardEvent) {
// submit on enter
if (event.key === "Enter" && !event.shiftKey) {
event.preventDefault();
dispatch("submit"); // use a custom event instead of `event.target.form.requestSubmit()` as it does not work on Safari 14
}
}
let textareaElement: HTMLTextAreaElement;
</script>
<div class="relative min-w-0 flex-1">
<pre
class="invisible whitespace-pre-wrap p-3"
aria-hidden="true"
style="min-height: {minHeight}; max-height: {maxHeight}">{value + "\n"}</pre>
<!-- svelte-ignore a11y-autofocus -->
<textarea
enterkeyhint="send"
tabindex="0"
rows="1"
class="scrollbar-custom absolute top-0 m-0 h-full w-full resize-none scroll-p-3 overflow-x-hidden overflow-y-scroll border-0 bg-transparent p-3 outline-none focus:ring-0 focus-visible:ring-0"
bind:value
bind:this={textareaElement}
{disabled}
on:keydown={handleKeydown}
{placeholder}
{autofocus}
/>
</div>
<style>
pre,
textarea {
font-family: inherit;
box-sizing: border-box;
line-height: 1.5;
}
</style>
|