update markdown dependency

package.json

@@ -40,7 +40,7 @@
     "leaflet": "1.6.0",
     "ledger-cosmos-js": "2.1.8",
     "long": "^5.2.0",
-    "marked": "^4.0.14",
+    "markdown-it-vue": "^1.1.7",
     "node-fetch": "^2.6.5",
     "pako": "^1.0.11",
     "portal-vue": "2.1.7",

src/views/ObjectFieldComponent.vue

@@ -63,7 +63,13 @@
           </b-tabs>
         </b-td>
         <b-td v-else>
-          <p v-html="addNewLine(value)" />
+          <markdown-view-vue
+            v-if="name==='description'"
+            class="md-body"
+            :options="options"
+            :content="addNewLine(value)"
+          />
+          <span v-else>{{ value }}</span>
         </b-td>
       </b-tr>
     </b-tbody>
@@ -71,13 +77,13 @@
 </template>
 
 <script>
-import { marked } from 'marked'
 import {
   BTableSimple, BTr, BTd, BTabs, BTab, BTbody,
 } from 'bootstrap-vue'
 import {
   abbr, getStakingValidatorByHex, isHexAddress, isStringArray, isToken, percent, tokenFormatter,
 } from '@/libs/utils'
+import MarkdownViewVue from './components/markdown/MarkdownView.vue'
 import ArrayFieldComponent from './ArrayFieldComponent.vue'
 
 export default {
@@ -90,6 +96,7 @@ export default {
     BTab,
     BTbody,
     ArrayFieldComponent,
+    MarkdownViewVue,
   },
   props: {
     tablefield: {
@@ -101,6 +108,21 @@ export default {
       default: true,
     },
   },
+  data() {
+    return {
+      options: {
+        markdownIt: {
+          linkify: true,
+        },
+        linkAttributes: {
+          attrs: {
+            target: '_blank',
+            rel: 'noopener',
+          },
+        },
+      },
+    }
+  },
   methods: {
     formatObject(value) {
       // console.log(value, typeof (value) === 'object', Object.keys(value))
@@ -141,7 +163,7 @@ export default {
         return `${percent(value)}%`
       }
       if (typeof value === 'string') {
-        return marked.parse(value.replaceAll('\\n', '\n'))
+        return value.replaceAll('\\n', '\n')
       }
 
       return value

src/views/components/markdown/MarkdownView.vue

@@ -0,0 +1,26 @@
+<template>
+  <div>
+    <markdown-it-vue
+      class="md-body"
+      :content="content"
+    />
+  </div>
+</template>
+
+<script>
+import MarkdownItVue from 'markdown-it-vue'
+import 'markdown-it-vue/dist/markdown-it-vue.css'
+
+export default {
+  name: 'MarkdownView',
+  components: {
+    MarkdownItVue,
+  },
+  props: {
+    content: {
+      type: String,
+      default: () => '',
+    },
+  },
+}
+</script>