implemented markdown renderer in backend and frontend

frontend/src/Components/MarkdownEditor.svelte

@@ -2,8 +2,9 @@
     let { editable = false, value = $bindable(null) } = $props();
     let editing = $state(false);
 
-    let editValue = {source:value.source,rendered:value.rendered};
+    let editValue = $state({source:value.source,rendered:value.rendered});
 
+    let timer = null;
     function applyEdit(){
         value.source = editValue.source;
         value.rendered = editValue.rendered;
@@ -19,10 +20,22 @@
         editing = editable;
     }
 
+    async function render(){
+        const url = `${location.protocol}//${location.host.replace('5173','8080')}/api/markdown/render`;
+        const resp = await fetch(url,{
+            credentials: 'include',
+            method: 'POST',
+            body: editValue.source
+        });
+        editValue.rendered = await resp.text();
+    }
+
     function typed(ev){
         if (ev.keyCode == 13 && ev.ctrlKey) applyEdit();
         if (ev.keyCode == 27) resetEdit();
 
+        if (timer) clearTimeout(timer);
+        timer = setTimeout(render,1000);
         // TODO: start timer, send text to renderer, update editValue.rendered
     }
 </script>
@@ -37,4 +50,4 @@
 {#if editable && editing}
 <textarea bind:value={editValue.source} onkeyup={typed} autofocus></textarea>
 {/if}
-<div onclick={startEdit}>{@html value.rendered}</div>
+<div onclick={startEdit}>{@html editValue.rendered}</div>