Simplifying rich text editor, to the moment.

Author: Jimskapt

package-lock.json

@@ -33,6 +33,8 @@
     "cross-spawn": "^6.0.5",
     "is-stream": "^1.1.0",
     "lodash.clonedeep": "^4.5.0",
+    "markdown-it": "^8.4.2",
+    "markdown-it-checkbox": "^1.1.0",
     "material-design-icons-iconfont": "^3.0.3",
     "pouchdb-browser": "^7.0.0",
     "raw-loader": "^0.5.1",

package.json

@@ -9,7 +9,7 @@ v-card
             v-btn(small, icon, :to="{name: 'edit-note', params: {id: id}}")
                 v-icon edit
     v-card-text
-        pre(v-if="confidential !== true || show_content", style="overflow:auto;") {{ content }}
+        pre(v-if="confidential !== true || show_content", style="overflow:auto;", v-html="htmlContent")
         i(v-else) [{{ $t('confidential') }}]
         div(v-if="subjects !== undefined", class="text-xs-right")
             v-divider(style="margin: 0.5em 0px;")
@@ -18,6 +18,11 @@ v-card
 </template>
 
 <script>
+import markdownIt from 'markdown-it';
+import markdownItCheckboxes from 'markdown-it-checkbox';
+
+const markdownConverter = markdownIt().use(markdownItCheckboxes);
+
 export default {
     name: 'note-display',
     props: ['id', 'title', 'content', 'confidential', 'subjects'],
@@ -26,6 +31,11 @@ export default {
             show_content: false,
         };
     },
+    computed: {
+        htmlContent() {
+            return markdownConverter.render(this.content);
+        },
+    },
 };
 </script>