From 9328223589fac14327223eb38c988cb32b781cbd Mon Sep 17 00:00:00 2001
From: Zero~Informatique
Date: Sat, 3 Jul 2021 23:07:09 +0200
Subject: viewer/LdInformation: use markdown rendering component

Extracted from b170f49 (GH PR #304)
---
 viewer/src/components/LdInformation.vue | 15 +++++++--------
 1 file changed, 7 insertions(+), 8 deletions(-)

(limited to 'viewer')

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>
 
-- 
cgit v1.2.3