feat: added MarkdownEditor.vue

Signed-off-by: Corentin Thomasset <corentin.thomasset74@gmail.com>

src/router.js

@@ -85,15 +85,22 @@ const toolsComponents = [
         ],
     },
     {
-        title: 'Miscellaneous',
+        title: 'Text',
         child: [
             {
-                icon: 'fa-align-left\n',
+                icon: 'fa-align-left',
                 text: 'Text stats',
                 path: '/text-stats',
                 component: () => import('./routes/tools/TextStats'),
                 keywords: ['word', 'count', 'size', 'bytes', 'length']
             },
+            {
+                icon: 'fab fa-markdown',
+                text: 'Markdown editor',
+                path: '/markdown-editor',
+                component: () => import('./routes/tools/MarkdownEditor'),
+                keywords: ['text', 'html', 'markdown']
+            },
         ],
     }
 ];

src/routes/tools/MarkdownEditor.vue

@@ -0,0 +1,77 @@
+<template>
+    <v-row justify="center" align="center">
+        <v-col cols="12" xl="5" lg="6" md="12">
+            <v-card>
+                <v-card-text>
+                    <v-textarea v-model="markdown" auto-grow outlined label="Markdown editor"/>
+                    <div class="text-center">
+                        <v-btn @click="copy(markdown)">copy markdown</v-btn>
+                    </div>
+                </v-card-text>
+            </v-card>
+        </v-col>
+        <v-col cols="12" xl="5" lg="6" md="12">
+            <v-card>
+                <v-card-text >
+                    <div class="preview" v-html="html"></div>
+                    <div class="text-center">
+                        <v-divider />
+                        <br>
+                        <v-btn @click="copy(html)">copy html</v-btn>
+                    </div>
+                </v-card-text>
+            </v-card>
+        </v-col>
+    </v-row>
+</template>
+
+<script>
+    // import {debounce} from "../../utils/helpers";
+    import marked from 'marked'
+    import DOMPurify from 'dompurify';
+    import {copyToClipboard} from "../../utils/helpers";
+
+    export default {
+        name: "MarkdownEditor",
+        data: () => ({
+            markdown: '# Hello, World!\nLorem ipsum **dolor** sit *amet*, consectetur adipisicing elit. A aspernatur commodi consequuntur distinctio dolore doloribus eaque earum est ipsum nobis numquam pariatur perspiciatis quasi quis, sed, sunt tempore tenetur, veniam!\n',
+        }),
+        methods: {
+            copy(text){
+                copyToClipboard(text)
+                this.$toast.success('Copied to clipboard.')
+            }
+        },
+        computed: {
+            html() {
+                return DOMPurify.sanitize(marked(this.markdown))
+            }
+        }
+    }
+</script>
+
+<style scoped lang="less">
+    ::v-deep {
+        .preview {
+            padding: 20px;
+
+            h1{
+                margin-bottom: 15px;
+            }
+            code{
+                background-color: rgba(0, 0, 0, 0.3) !important;
+                box-shadow: none;
+                color: #9a9a9a;
+                font-weight: normal;
+            }
+            pre {
+                width: 100%;
+
+                code {
+                    width: 100% !important;
+                    padding: 10px;
+                }
+            }
+        }
+    }
+</style>

src/utils/helpers.js

@@ -28,9 +28,19 @@ const isInt = (value) => {
     return Number.isInteger(value);
 }
 
+const debounce = (callback, delay = 300) => {
+    let timer;
+
+    return function(...args) {
+        clearTimeout(timer);
+        timer = setTimeout(() => callback(...args), delay);
+    }
+}
+
 export {
     copyToClipboard,
     fileIsImage,
     formatBytes,
-    isInt
+    isInt,
+    debounce
 }