Add markdown renderer to default container

client/src/components/Markdown/Markdown.vue

@@ -66,8 +66,6 @@ import { library } from "@fortawesome/fontawesome-svg-core";
 import { faDownload, faEdit } from "@fortawesome/free-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/vue-fontawesome";
 import BootstrapVue from "bootstrap-vue";
-import MarkdownIt from "markdown-it";
-import markdownItRegexp from "markdown-it-regexp";
 import { mapActions } from "pinia";
 import Vue from "vue";
 
@@ -80,13 +78,6 @@ import MarkdownContainer from "./MarkdownContainer.vue";
 import LoadingSpan from "components/LoadingSpan.vue";
 import StsDownloadButton from "components/StsDownloadButton.vue";
 
-const mdNewline = markdownItRegexp(/<br>/, () => {
-    return "<div style='clear:both;'/><br>";
-});
-
-const md = MarkdownIt();
-md.use(mdNewline);
-
 Vue.use(BootstrapVue);
 
 library.add(faDownload, faEdit);

client/src/components/Markdown/MarkdownDefault.vue

@@ -1,9 +1,23 @@
 <script setup lang="ts">
-defineProps<{
+import { computed } from "vue";
+import MarkdownIt from "markdown-it";
+//@ts-ignore
+import markdownItRegexp from "markdown-it-regexp";
+
+const mdNewline = markdownItRegexp(/<br>/, () => {
+    return "<div style='clear:both;'/><br>";
+});
+
+const md = MarkdownIt();
+md.use(mdNewline);
+
+const props = defineProps<{
     content: string;
 }>();
+
+const renderedContent = computed(() => md.render(props.content));
 </script>
 
 <template>
-    <p class="text-justify m-2" v-html="content" />
+    <p class="text-justify m-2" v-html="renderedContent" />
 </template>