refac

src/lib/components/channel/Messages/Message.svelte

@@ -22,6 +22,7 @@
 	import GarbageBin from '$lib/components/icons/GarbageBin.svelte';
 	import Pencil from '$lib/components/icons/Pencil.svelte';
 	import Tooltip from '$lib/components/common/Tooltip.svelte';
+	import Textarea from '$lib/components/common/Textarea.svelte';
 
 	export let message;
 	export let showUserProfile = true;
@@ -142,16 +143,11 @@
 				{/if}
 
 				{#if edit}
-					<div class="py-1">
-						<textarea
-							id="message-edit-{message.id}"
+					<div class="py-2">
+						<Textarea
 							class=" bg-transparent outline-none w-full resize-none"
 							bind:value={editedContent}
-							on:input={(e) => {
-								e.target.style.height = '';
-								e.target.style.height = `${e.target.scrollHeight}px`;
-							}}
-							on:keydown={(e) => {
+							onKeydown={(e) => {
 								if (e.key === 'Escape') {
 									document.getElementById('close-edit-message-button')?.click();
 								}

src/lib/components/common/Textarea.svelte

@@ -6,6 +6,8 @@
 	export let className =
 		'w-full rounded-lg px-3 py-2 text-sm bg-gray-50 dark:text-gray-300 dark:bg-gray-850 outline-none resize-none h-full';
 
+	export let onKeydown: Function = () => {};
+
 	let textareaElement;
 
 	$: if (textareaElement) {
@@ -48,6 +50,7 @@
 		value = text;
 	}}
 	on:paste={handlePaste}
+	on:keydown={onKeydown}
 	data-placeholder={placeholder}
 />