Spaces:
Running
Running
File size: 2,032 Bytes
6e856a0 09eb258 44834c9 74815cb 5da61b4 6e856a0 5da61b4 1b66f8d 44834c9 6d68eb5 6e856a0 b2387f6 74815cb 6e856a0 6d68eb5 6e856a0 0a4f58c 09eb258 0a4f58c 74815cb 6e856a0 1b66f8d 44834c9 09eb258 44834c9 6e856a0 b2387f6 6e856a0 26ccb67 6e856a0 44834c9 6e856a0 1c8195c 6e856a0 6f12e84 2d45a3c 6e856a0 1b66f8d 6e856a0 6d68eb5 4ade85f 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 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 |
<script lang="ts">
import { isDesktop } from "$lib/utils/isDesktop";
import { createEventDispatcher, onMount } from "svelte";
export let value = "";
export let minRows = 1;
export let maxRows: null | number = null;
export let placeholder = "";
export let disabled = false;
let textareaElement: HTMLTextAreaElement;
let isCompositionOn = 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 && !isCompositionOn) {
event.preventDefault();
// blur to close keyboard on mobile
textareaElement.blur();
// refocus so that user on desktop can start typing without needing to reclick on textarea
if (isDesktop(window)) {
textareaElement.focus();
}
dispatch("submit"); // use a custom event instead of `event.target.form.requestSubmit()` as it does not work on Safari 14
}
}
onMount(() => {
if (isDesktop(window)) {
textareaElement.focus();
}
});
</script>
<div class="relative min-w-0 flex-1">
<pre
class="scrollbar-custom invisible overflow-x-hidden overflow-y-scroll whitespace-pre-wrap break-words p-3"
aria-hidden="true"
style="min-height: {minHeight}; max-height: {maxHeight}">{(value || " ") + "\n"}</pre>
<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"
class:text-gray-400={disabled}
bind:value
bind:this={textareaElement}
{disabled}
on:keydown={handleKeydown}
on:compositionstart={() => (isCompositionOn = true)}
on:compositionend={() => (isCompositionOn = false)}
on:beforeinput
{placeholder}
/>
</div>
<style>
pre,
textarea {
font-family: inherit;
box-sizing: border-box;
line-height: 1.5;
}
</style>
|