Migrate to svelte 5

src/lib/ChatScreens/AdvancedChatEditor.svelte

@@ -1,18 +1,21 @@
 <script>
+    import { run } from 'svelte/legacy';
+
 import { onMount, createEventDispatcher } from 'svelte';
 import { EditIcon, LanguagesIcon } from "lucide-svelte";
 import { DataBase } from "../../ts/storage/database";
 import CodeMirror from 'codemirror';
 import 'codemirror/lib/codemirror.css';
 
-export let value, translate;
+    /** @type {{value: any, translate: any}} */
+    let { value = $bindable(), translate = $bindable() } = $props();
 
 const dispatch = createEventDispatcher();
-let toggleTranslate = !$DataBase.useAutoTranslateInput;
-let velement, veditor;
-let telement, teditor;
-let _value = value;
-let _translate = translate;
+let toggleTranslate = $state(!$DataBase.useAutoTranslateInput);
+let velement = $state(), veditor = $state();
+let telement = $state(), teditor = $state();
+let _value = $state(value);
+let _translate = $state(translate);
 
 const markdowns = [
     {
@@ -61,12 +64,16 @@ onMount(() => {
     toggleTranslateText();
 });
 
-$: if(value != _value) {
-    veditor.setValue(_value = value);
-}
-$: if(translate != _translate) {
-    teditor.setValue(_translate = translate);
-}
+run(() => {
+        if(value != _value) {
+        veditor.setValue(_value = value);
+    }
+    });
+run(() => {
+        if(translate != _translate) {
+        teditor.setValue(_translate = translate);
+    }
+    });
 
 function toggleTranslateText() {
     toggleTranslate = !toggleTranslate;
@@ -108,7 +115,7 @@ function updateMarks(doc) {
 <div class="flex flex-1 items-end ml-2 mr-2">
     {#if $DataBase.useAutoTranslateInput}
         <button 
-            on:click={toggleTranslateText}
+            onclick={toggleTranslateText}
             class="mr-2 bg-textcolor2 flex justify-center items-center text-gray-100 w-12 h-12 rounded-md hover:bg-green-500 transition-colors">
         {#if toggleTranslate}
             <LanguagesIcon />