From 2c8fb663836113e8e0a1fd8823a43d0249ef2f4a Mon Sep 17 00:00:00 2001
From: Timothy Jaeryang Baek <tim@openwebui.com>
Date: Mon, 23 Dec 2024 01:06:59 -0700
Subject: [PATCH] refac

---
 src/lib/components/channel/Messages/Message.svelte | 12 ++++--------
 src/lib/components/common/Textarea.svelte          |  3 +++
 2 files changed, 7 insertions(+), 8 deletions(-)

diff --git a/src/lib/components/channel/Messages/Message.svelte b/src/lib/components/channel/Messages/Message.svelte
index 7c7bdacc6..f980ed1e0 100644
--- a/src/lib/components/channel/Messages/Message.svelte
+++ b/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();
 								}
diff --git a/src/lib/components/common/Textarea.svelte b/src/lib/components/common/Textarea.svelte
index 893f579b3..ab5ebe2ac 100644
--- a/src/lib/components/common/Textarea.svelte
+++ b/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}
 />