From f17660715a859eab2bd98f278aa44f058aa4dab9 Mon Sep 17 00:00:00 2001
From: Daniel-I-Am <djdecloet@gmail.com>
Date: Thu, 2 Sep 2021 19:50:08 +0200
Subject: [PATCH] Create basic markdown editor

---
 resources/js/components/MarkdownEditor.vue | 35 ++++++++++++++++++++++
 1 file changed, 35 insertions(+)
 create mode 100644 resources/js/components/MarkdownEditor.vue

diff --git a/resources/js/components/MarkdownEditor.vue b/resources/js/components/MarkdownEditor.vue
new file mode 100644
index 0000000..c803913
--- /dev/null
+++ b/resources/js/components/MarkdownEditor.vue
@@ -0,0 +1,35 @@
+<template>
+    <textarea v-model="markdown" cols="30" rows="10"></textarea>
+    <div ref="target" v-html="html"></div>
+</template>
+
+<script>
+import { debounce } from "../helpers";
+
+export default {
+    data() {
+        return {
+            markdown: "",
+            html: null,
+            converter: null,
+            onChange: () => {}
+        };
+    },
+    mounted() {
+        this.converter = new showdown.Converter();
+        this.onChange = debounce(() => {
+            this.onChangeHandler();
+        }, 500);
+    },
+    methods: {
+        onChangeHandler() {
+            this.html = this.converter.makeHtml(this.markdown);
+        }
+    },
+    watch: {
+        markdown() {
+            this.onChange();
+        }
+    }
+}
+</script>