markdown editor on projects list

src/components/Project/Detail/ProjectHeader.vue

@@ -304,7 +304,7 @@ export default {
 }
 
 #preview {
-  height: 10em;
+  max-height: 10em;
   overflow: scroll;
 }
 

src/components/Projects/ProjectsListItem.vue

@@ -21,7 +21,16 @@
         {{ project.title }}
       </router-link>
       <div class="description">
-        <p>{{ project.description }}</p>
+        <textarea
+          :id="`editor-${project.slug}`"
+          :value="project.description"
+          :data-preview="`#preview-${project.slug}`"
+          hidden
+        />
+        <div
+          :id="`preview-${project.slug}`"
+          class="preview"
+        />
       </div>
       <div class="meta">
         <span class="right floated">
@@ -74,6 +83,7 @@
 </template>
 
 <script>
+import TextareaMarkdown from 'textarea-markdown';
 
 import { mapState } from 'vuex';
 
@@ -100,6 +110,11 @@ export default {
     },
   },
 
+  mounted() {
+    let textarea = document.getElementById(`editor-${this.project.slug}`);
+    new TextareaMarkdown(textarea);
+  },
+
   methods: {
     refreshId() {
       const crypto = window.crypto || window.msCrypto;
@@ -110,3 +125,11 @@ export default {
 };
 
 </script>
+
+<style lang="less" scoped>
+.preview {
+  max-height: 10em;
+  overflow: scroll;
+  margin-bottom: 0.8em;
+}
+</style>