Merge pull request #502 from axa-group/fix/change-markdown-renderer

Replace legacy vue-markdown with marked

demo/vue-viewer/package.json

@@ -10,10 +10,10 @@
   "dependencies": {
     "axios": "^0.19.2",
     "core-js": "^2.6.5",
+    "marked": "^1.2.0",
     "sass": "^1.26.3",
     "sass-loader": "^7.1.0",
     "vue": "^2.6.11",
-    "vue-markdown": "^2.2.4",
     "vue-observe-visibility": "^0.4.6",
     "vue-router": "^3.1.6",
     "vuetify": "^2.2.17",

demo/vue-viewer/src/views/ViewerMarkdown.vue

@@ -11,10 +11,10 @@
       <v-tab>Render</v-tab>
 
       <v-tab-item class="tabItem">
-        <pre class="text">{{ documentMarkdown }}</pre>
+        <pre class="text">{{ compiledMarkdown }}</pre>
       </v-tab-item>
       <v-tab-item class="tabItem">
-        <vueMarkdown class="text">{{ documentMarkdown }}</vueMarkdown>
+        <vueMarkdown class="text">{{ compiledMarkdown }}</vueMarkdown>
       </v-tab-item>
     </v-tabs>
 
@@ -42,19 +42,21 @@
 </template>
 <script>
 import { mapState } from 'vuex';
-import VueMarkdown from 'vue-markdown';
+import marked from 'marked';
 
 export default {
   data() {
     return { error: null };
   },
-  components: { VueMarkdown },
   computed: {
     uploadedDocument() {
       return this.documentId !== null;
     },
     documentMarkdownFetched() {
-      return this.documentMarkdown !== null;
+      return this.compiledMarkdown !== null;
+    },
+    compiledMarkdown: function() {
+      return marked(this.documentMarkdown, { sanitize: true });
     },
     ...mapState({
       documentId: state => state.uuid,