feat: Add long press functionality to AutoresizeArea component

src/lib/ChatScreens/Chat.svelte

@@ -245,7 +245,9 @@
                 </div>
             {/if}
             {#if editMode}
-                <AutoresizeArea bind:value={message} />
+                <AutoresizeArea bind:value={message} handleLongPress={(e) => {
+                    editMode = false
+                }} />
             {:else if blankMessage}
                 <div class="w-full flex justify-center text-textcolor2 italic mb-12">
                     {language.noMessage}

src/lib/UI/GUI/TextAreaResizable.svelte

@@ -1,10 +1,12 @@
-<script>
+<script lang="ts">
     import { onMount } from 'svelte';
     import { DataBase } from "../../../ts/storage/database";
+    import { longpress } from 'src/ts/gui/longtouch';
 
     let textarea;
     let previousScrollHeight = 0;
     export let value = ''
+    export let handleLongPress = (e:MouseEvent) => {};
 
     function resize() {
         textarea.style.height = '0px'; // Reset the textarea height
@@ -39,6 +41,7 @@
 <textarea
     bind:this={textarea}
     on:input={handleInput}
+    use:longpress={handleLongPress}
     bind:value={value}
     style:font-size="{0.875 * ($DataBase.zoomsize / 100)}rem"
     style:line-height="{1.25 * ($DataBase.zoomsize / 100)}rem"

src/ts/gui/longtouch.ts

@@ -0,0 +1,27 @@
+export function longpress(node:HTMLElement, callback:(e:MouseEvent)=>void) {
+	const TIME_MS = 500;
+	let timeoutPtr: number;
+	function handleMouseDown(e:MouseEvent) {
+		window.addEventListener('mousemove', handleMoveBeforeLong);
+		timeoutPtr = window.setTimeout(() => {
+			window.removeEventListener('mousemove', handleMoveBeforeLong);
+			callback(e);
+		}, TIME_MS);
+	}
+	function handleMoveBeforeLong(e:MouseEvent) {
+		window.clearTimeout(timeoutPtr); 
+		window.removeEventListener('mousemove', handleMoveBeforeLong);
+	}
+	function handleMouseUp(e:MouseEvent) {
+		window.clearTimeout(timeoutPtr); 
+		window.removeEventListener('mousemove', handleMoveBeforeLong);
+	}
+	node.addEventListener('mousedown', handleMouseDown);
+	node.addEventListener('mouseup', handleMouseUp);
+	return {
+		destroy: () => {
+			node.removeEventListener('mousedown', handleMouseDown);
+			node.removeEventListener('mouseup', handleMouseUp);
+		}
+	};
+}