fix: markdown list padding and replace nuxtjs/mdc (#5577)

frontend/components/global/SafeMarkdown.vue

@@ -1,12 +1,11 @@
 <template>
-  <MDC
+<!-- eslint-disable-next-line vue/no-v-html is safe here because all HTML is sanitized with DOMPurify in setup() -->
-    :value="value"
+<div v-html="value" />
-    tag="article"
-  />
 </template>
 
 <script lang="ts">
 import DOMPurify from "isomorphic-dompurify";
+import { marked } from "marked";
 
 export default defineNuxtComponent({
   props: {
@@ -40,7 +39,8 @@ export default defineNuxtComponent({
     }
 
     const value = computed(() => {
-      return sanitizeMarkdown(props.source) || "";
+      const rawHtml = marked.parse(props.source || "", { async: false });
+      return sanitizeMarkdown(rawHtml);
     });
 
     return {
@@ -56,7 +56,8 @@ export default defineNuxtComponent({
   width: 100%;
 }
 
-:deep(th, td) {
+:deep(th),
+:deep(td) {
   border: 1px solid;
   padding: 8px;
   text-align: left;
@@ -65,4 +66,10 @@ export default defineNuxtComponent({
 :deep(th) {
   font-weight: bold;
 }
+
+:deep(ul),
+:deep(ol) {
+  margin: 8px 0;
+  padding-left: 20px;
+}
 </style>

frontend/nuxt.config.ts

@@ -13,7 +13,6 @@ export default defineNuxtConfig({
     "@sidebase/nuxt-auth",
     "@nuxtjs/google-fonts",
     "vuetify-nuxt-module",
-    "@nuxtjs/mdc",
     "@nuxt/eslint",
   ],
   ssr: false,

frontend/package.json

@@ -21,7 +21,6 @@
     "@mdi/js": "^7.4.47",
     "@nuxt/eslint": "1.2.0",
     "@nuxtjs/i18n": "^9.2.1",
-    "@nuxtjs/mdc": "0.14.0",
     "@nuxtjs/proxy": "^2.1.0",
     "@sidebase/nuxt-auth": "0.10.0",
     "@vite-pwa/nuxt": "0.10.6",
@@ -31,6 +30,7 @@
     "fuse.js": "^7.1.0",
     "isomorphic-dompurify": "^2.22.0",
     "json-editor-vue": "^0.18.1",
+    "marked": "^15.0.12",
     "next-auth": "~4.21.1",
     "nuxt": "^3.15.4",
     "typescript": "5.3",