Add markdown support to filesystem

svelte/src/filesystem/viewers/FilePreview.svelte

@@ -72,7 +72,7 @@ export const toggle_playback = () => {
 {:else if viewer_type === "pdf"}
 	<Pdf state={state}/>
 {:else if viewer_type === "text"}
-	<Text state={state}>
+	<Text state={state} bind:this={viewer}>
 		<CustomBanner path={state.path}/>
 	</Text>
 {:else if viewer_type === "torrent"}

svelte/src/filesystem/viewers/Text.svelte

@@ -1,21 +1,39 @@
 <script>
+import { tick } from "svelte";
 import { fs_path_url } from "../FilesystemUtil";
 
 export let state
-let text_pre
+let text_type = "text"
 
-$: set_file(state.base)
-
-export const set_file = file => {
+export const update = () => {
+	const file = state.base
 	console.debug("Loading text file", file.name)
 
-	if (file.size > 1 << 22) { // File larger than 4 MiB
+	if (file.size > 1 << 21) { // File larger than 2 MiB
 		text_pre.innerText = "File is too large to view online.\nPlease download and view it locally."
 		return
 	}
 
+	if (
+		file.file_type.startsWith("text/markdown") ||
+		file.name.endsWith(".md") ||
+		file.name.endsWith(".markdown")
+	) {
+		markdown(file)
+	} else {
+		text(file)
+	}
+}
+
+let text_pre
+const text = async file => {
+	text_type = "text"
+	await tick()
+
 	fetch(fs_path_url(file.path)).then(resp => {
-		if (!resp.ok) { return Promise.reject(resp.status) }
+		if (!resp.ok) {
+			return Promise.reject(resp.status)
+		}
 		return resp.text()
 	}).then(resp => {
 		text_pre.innerText = resp
@@ -23,14 +41,37 @@ export const set_file = file => {
 		text_pre.innerText = "Error loading file: " + err
 	})
 }
-</script>
 
+let md_container
+const markdown = async file => {
+	text_type = "markdown"
+	await tick()
+
+	fetch(fs_path_url(file.path)+"?render_markdown").then(resp => {
+		if (!resp.ok) {
+			return Promise.reject(resp.status)
+		}
+		return resp.text()
+	}).then(resp => {
+		md_container.innerHTML = resp
+	}).catch(err => {
+		md_container.innerText = "Error loading file: " + err
+	})
+}
+</script>
 
 <div class="container">
 	<slot></slot>
-	<pre bind:this={text_pre}>
-		Loading...
-	</pre>
+
+	{#if text_type === "markdown"}
+		<section bind:this={md_container} class="md">
+			Loading...
+		</section>
+	{:else if text_type === "text"}
+		<pre bind:this={text_pre}>
+			Loading...
+		</pre>
+	{/if}
 </div>
 
 <style>
@@ -52,4 +93,10 @@ export const set_file = file => {
 	font-size: 0.9em;
 	word-break: break-word;
 }
+.container > .md {
+	display: block;
+	padding: 10px;
+	margin: auto;
+	text-align: justify;
+}
 </style>