From 0564cc9e20ae56f0774e531366ff805ecdc3c229 Mon Sep 17 00:00:00 2001
From: Daniel-I-Am <djdecloet@gmail.com>
Date: Sat, 4 Sep 2021 19:03:49 +0200
Subject: [PATCH] Add blockquote, code, details and table support to the
 markdown editor.

---
 resources/js/components/MarkdownEditor.vue | 8 +++++++-
 resources/js/views/BlogArticle.vue         | 4 +++-
 2 files changed, 10 insertions(+), 2 deletions(-)

diff --git a/resources/js/components/MarkdownEditor.vue b/resources/js/components/MarkdownEditor.vue
index f348f87..70a2724 100644
--- a/resources/js/components/MarkdownEditor.vue
+++ b/resources/js/components/MarkdownEditor.vue
@@ -11,6 +11,10 @@
                     <li><a href="javascript:void(0)" @click="insertTag('1. ', null, true)"><i class="fas fa-list-ol"></i></a></li>
                     <li><a href="javascript:void(0)" @click="imagePopupOpen = !imagePopupOpen"><i class="fas fa-image"></i></a></li>
                     <li><a href="javascript:void(0)" @click="linkPopupOpen = !linkPopupOpen"><i class="fas fa-link"></i></a></li>
+                    <li><a href="javascript:void(0)" @click="insertTag('> ', null, true)"><i class="fas fa-quote-left"></i></a></li>
+                    <li><a href="javascript:void(0)" @click="insertTag('`', '`')"><i class="fas fa-code"></i></a></li>
+                    <li><a href="javascript:void(0)" @click="insertTag('<details><summary>', '</summary>\n    \n</details>')"><i class="fas fa-caret-square-down"></i></a></li>
+                    <li><a href="javascript:void(0)" @click="insertTag('\n| header | header |\n| ------ | ------ |\n| cell | cell |\n| cell | cell |\n', '')"><i class="fas fa-table"></i></a></li>
                 </ul>
             </div>
             <textarea class="input" ref="textarea" v-model="markdown" :cols="cols" :rows="rows"></textarea>
@@ -68,7 +72,9 @@ export default {
         },
     },
     mounted() {
-        this.converter = new showdown.Converter();
+        this.converter = new showdown.Converter({
+            tables: true,
+        });
         this.onChange = debounce(() => {
             this.onChangeHandler();
         }, 500);
diff --git a/resources/js/views/BlogArticle.vue b/resources/js/views/BlogArticle.vue
index 90113d3..2c3006f 100644
--- a/resources/js/views/BlogArticle.vue
+++ b/resources/js/views/BlogArticle.vue
@@ -56,7 +56,9 @@ export default {
                 this.date = moment(res.data.date);
                 this.summary = res.data.summary;
 
-                const converter = new showdown.Converter();
+                const converter = new showdown.Converter({
+                    tables: true,
+                });
                 this.content = converter.makeHtml(res.data.content);
 
                 this.loading = false;