Refactor Markdown

package.json

@@ -11,6 +11,7 @@
     },
     "dependencies": {
         "chroma.ts": "^1.0.10",
+        "dompurify": "^3.3.0",
         "marked": "^16.4.2",
         "nuxt": "^3.21.6",
         "vue": "^3.5.34",
@@ -21,6 +22,7 @@
         "@nuxt/image": "1.10.0",
         "@nuxtjs/mdc": "^0.17.4",
         "@nuxtjs/tailwindcss": "^6.14.0",
+        "@types/dompurify": "^3.0.5",
         "prettier": "3.6.2",
         "prettier-plugin-tailwindcss": "0.6.13",
         "sass-embedded": "^1.99.0"

src/app.vue

@@ -18,7 +18,7 @@ else API.Logout();
         </NuxtLayout>
     </div>
 
-    <div class="pointer-events-none fixed left-0 top-0 z-50 h-screen w-screen" id="panels"></div>
+    <div class="pointer-events-none fixed left-0 top-0 z-50 h-screen w-full max-w-full" id="panels"></div>
 </template>
 
 <style>
@@ -28,6 +28,25 @@ html {
 
 body {
     @apply bg-dark-1 font-base text-dark-text selection:bg-highlight selection:text-dark-1;
+    overflow-x: hidden;
+    max-width: 100vw;
+}
+
+* {
+    scrollbar-color: transparent;
+}
+
+*::-webkit-scrollbar {
+    width: 8px;
+}
+
+*::-webkit-scrollbar-track {
+    background: transparent;
+}
+
+*::-webkit-scrollbar-thumb {
+    @apply bg-dark-3;
+    border-radius: 16px;
 }
 
 .fade-enter-active,

src/components/map-set/description.vue

@@ -0,0 +1,75 @@
+<script setup lang="ts">
+import { ref, computed } from 'vue';
+import type { APIMapSet } from '~/models/maps/APIMapSet';
+import API from '~/utils/api';
+
+const noDescPlaceholder = "No description provided.";
+const loadingDescPlaceholder = "No description provided.";
+const descMaxHeight = "400px"
+
+const props = defineProps<{
+    mapset: APIMapSet;
+}>();
+
+const description = ref('');
+const isFetching = ref(true);
+const isSaving = ref(false);
+const fetchError = ref<string | null>(null);
+
+try {
+    const { data } = await API.PerformGet<string>(`/mapsets/${props.mapset.id}/description`);
+    description.value = data ?? '';
+} catch {
+    fetchError.value = 'Failed to load description.';
+} finally {
+    isFetching.value = false;
+}
+
+const canEdit = computed(
+    () =>
+        utils.IsModerator(API.CurrentUser.value) ||
+        API.CurrentUser.value?.id === props.mapset.creator.id
+);
+
+const handleSave = async (value: string) => {
+    isSaving.value = true;
+    try {
+        await API.PerformPatch<string | null>(
+            `/mapsets/${props.mapset.id}/description`,
+            {content : value || ""}
+        );
+        description.value = value;
+    } catch {
+        console.error('Failed to save description.');
+    } finally {
+        isSaving.value = false;
+    }
+};
+</script>
+
+<template>
+    <div v-if="fetchError" class="error-message">{{ fetchError }}</div>
+
+    <MarkdownViewer
+        v-else-if="!canEdit"
+        :model-value="description"
+        :loading="isFetching"
+        :max-height="descMaxHeight"
+        :placeholder="noDescPlaceholder"
+        :loading-placeholder="loadingDescPlaceholder"
+    />
+
+    <MarkdownEditor
+        v-else
+        v-model="description"
+        :can-edit="!isSaving"
+        :loading="isFetching || isSaving"
+        :max-characters="api.DescriptionMaxCharLimit"
+        :sanitize="true"
+        :max-height="descMaxHeight"
+        :placeholder="noDescPlaceholder"
+        edit-placeholder="Enter description..."
+        :loading-placeholder="loadingDescPlaceholder"
+        @save="handleSave"
+    />
+</template>