Use server-side markdown renderer in WYSIWYG preview

Fixes #117

1 files changed, 34 insertions, 0 deletions

diff --git a/app/public/static/markdowntextarea.js b/app/public/static/markdowntextarea.js
new file mode 100644
index 0000000..c2ba345
--- /dev/null
+++ b/app/public/static/markdowntextarea.js
@@ -0,0 +1,34 @@
+$("textarea.markdown").each(function() {
+	async function render(plainText, preview) {
+		const response = await fetch(new Request("/api/markdown/", {
+			method: "POST",
+			credentials: "same-origin",
+			body: plainText,
+			headers: {
+				"Accept": "text/html; charset=UTF-8",
+			},
+		}));
+
+		preview.innerHTML = await response.text();
+	}
+
+	let timeout_id = null;
+
+	new EasyMDE({
+		element: this,
+		hideIcons: ["image"],
+		forceSync: true,
+		previewRender: (plainText, preview) => {
+			if (timeout_id) {
+				clearTimeout(timeout_id);
+			}
+
+			timeout_id = setTimeout(() => {
+				render(plainText, preview);
+				timeout_id = null;
+			}, 500);
+
+			return preview.innerHTML;
+		}
+	});
+})