viewer/LdInformation: use markdown rendering component

Extracted from b170f49 (GH PR #304)

1 files changed, 7 insertions, 8 deletions

diff --git a/viewer/src/components/LdInformation.vue b/viewer/src/components/LdInformation.vue
index b161485..68e1817 100644
--- a/viewer/src/components/LdInformation.vue
+++ b/viewer/src/components/LdInformation.vue
@@ -21,16 +21,20 @@
   <div v-if="item" class="flex-column" :class="$style.infopanel">
     <div v-if="item.title" :class="$style.title">{{ item.title }}</div>
     <time v-if="item.datetime" :datetime="item.datetime" :class="$style.datetime">{{ formatDate }}</time>
-    <div v-if="item.description" :class="$style.description" v-html="formatDescription" />
+    <Markdown v-if="item.description" :class="$style.description" :markdown="item.description" />
   </div>
 </template>
 
 <script lang="ts">
 import { Item } from "@/@types/gallery";
-import marked from "marked";
+import { Markdown } from "@/components/async";
 import { Component, Prop, Vue } from "vue-property-decorator";
 
-@Component
+@Component({
+  components: {
+    Markdown,
+  },
+})
 export default class LdInformation extends Vue {
   @Prop({ required: true }) readonly item!: Item;
 
@@ -39,11 +43,6 @@ export default class LdInformation extends Vue {
     const time = this.item.datetime.substr(11, 5);
     return `${date} ${time}`;
   }
-
-  get formatDescription() {
-    if (!this.item.description) return "";
-    return marked(this.item.description);
-  }
 }
 </script>