Add Edting Mapset Descriptions

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

@@ -2,7 +2,7 @@
 import API from './utils/api';
 
 // API.Setup(import.meta.dev);
-API.Setup(false); // <- use this if you don't have a local server (REMEMBER TO REVERT!)
+API.Setup(true); // <- use this if you don't have a local server (REMEMBER TO REVERT!)
 
 if (API.TokenCookie.value) await API.RefreshInfo();
 else API.Logout();
@@ -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,98 @@
+<script setup lang="ts">
+import type { APIMapSet } from '~/models/maps/APIMapSet';
+import API from '~/utils/api';
+
+const noDescPlaceholder = "No description provided.";
+const descMaxHeight = "400px";
+
+const props = defineProps<{
+    mapset: APIMapSet;
+}>();
+
+const textarea = ref<InstanceType<typeof HTMLTextAreaElement>>();
+const description = ref('');
+const isFetching = ref(true);
+const isSaving = ref(false);
+const fetchError = ref<string | null>(null);
+const isEditing = ref(false);
+
+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
+);
+
+function StartEditing() {
+    isEditing.value = true;
+    nextTick(() => UpdateTextArea());
+}
+
+function UpdateTextArea() {
+    if (!textarea.value) return;
+    textarea.value.style.height = 'auto';
+    textarea.value.style.height = `${textarea.value.scrollHeight}px`;
+}
+
+async function SaveDescription() {
+    if (!textarea.value) return;
+    const newValue = textarea.value.value;
+    isSaving.value = true;
+    try {
+        await API.PerformPatch<string | null>(
+            `/mapsets/${props.mapset.id}/description`,
+            { content: newValue || "" }
+        );
+        description.value = newValue;
+    } catch {
+        console.error('Failed to save description.');
+    } finally {
+        isSaving.value = false;
+        isEditing.value = false;
+    }
+}
+
+function CancelEditing() {
+    isEditing.value = false;
+}
+</script>
+
+<template>
+    <div class="flex w-full flex-col gap-2">
+        <div class="flex flex-row justify-end -mt-7">
+            <Button v-if="canEdit && !isEditing" @click="StartEditing" class="bg-dark-3 px-3 py-0.5 text-xs">Edit</Button>
+        </div>
+
+        <div v-if="fetchError" class="text-sm text-red">{{ fetchError }}</div>
+
+        <template v-else-if="canEdit && isEditing">
+            <textarea
+                ref="textarea"
+                class="w-full resize-none overflow-hidden rounded-md bg-dark-2 px-3 py-2 placeholder:text-dark-foreground focus:outline-none"
+                :style="{ maxHeight: descMaxHeight }"
+                @input="UpdateTextArea"
+                :value="description"
+                placeholder="Enter description..."
+                rows="1"
+            />
+            <div class="flex flex-row justify-end gap-2">
+                <Button @click="CancelEditing" class="bg-dark-3 px-3 py-0.5 text-sm" :disabled="isSaving">Cancel</Button>
+                <Button @click="SaveDescription" class="bg-highlight px-3 py-0.5 text-sm text-dark-2" :disabled="isSaving">Save</Button>
+            </div>
+        </template>
+
+        <template v-else>
+            <p class="text-sm opacity-80 whitespace-pre-wrap" :style="{ maxHeight: descMaxHeight, overflowY: 'auto' }">
+                {{ description || noDescPlaceholder }}
+            </p>
+        </template>
+    </div>
+</template>

src/components/markdown/view.vue

@@ -93,4 +93,4 @@ defineProps<{
         @apply rounded-2xl border-2 border-highlight bg-dark-2 p-6;
     }
 }
-</style>
+</style>

src/models/maps/APIMapSet.ts

@@ -11,7 +11,6 @@ export type APIMapSet = {
     artist: string;
     source: string;
     tags: string[];
-    description: string;
     flags: number;
     status: APIMapSetStatus;
     submitted: number;

src/models/markdown/ParsedImage.ts

@@ -0,0 +1,11 @@
+export default class ParsedImage {
+    src: string;
+    alt: string;
+    lineNumber: number;
+
+    constructor(src: string, alt: string, lineNumber: number) {
+        this.src = src
+        this.alt = alt
+        this.lineNumber = lineNumber
+    }
+}

src/models/markdown/ParsedMarkdown.ts

@@ -1,10 +1,14 @@
+import type ParsedImage from "./ParsedImage";
 import type ParsedSection from "./ParsedSection"
 
 export default class ParsedMarkdown {
-    sections: ParsedSection[] = []
-    raw: string
+    raw: string;
+    sections: ParsedSection[];
+    images?: Array<ParsedImage>;
 
     constructor(raw: string) {
-        this.raw = raw
+        this.raw = raw;
+        this.sections = [];
+        this.images = [];
     }
 }

src/pages/set/[id]/info.vue

@@ -6,7 +6,7 @@ definePageMeta({
     alias: '/set/:id'
 });
 
-defineProps<{
+const props = defineProps<{
     mapset: APIMapSet;
     map: APIMap;
 }>();
@@ -15,8 +15,7 @@ defineProps<{
 <template>
     <div class="flex w-full flex-col gap-3 pt-2">
         <MapSetInfoSection title="Description">
-            <p class="text-sm" v-if="mapset.description">{{ mapset.description }}</p>
-            <p class="text-sm italic" v-else>No description provided.</p>
+            <MapSetDescription :mapset=mapset />
         </MapSetInfoSection>
         <MapSetInfoSection title="Source">
             <p class="text-sm" v-if="map.source">{{ map.source }}</p>
@@ -31,4 +30,4 @@ defineProps<{
             <p class="text-sm italic" v-else>No tags provided.</p>
         </MapSetInfoSection>
     </div>
-</template>
+</template>

src/utils/api.ts

@@ -15,6 +15,8 @@ export default class API {
     static TokenCookie: CookieRef<string | undefined>;
     static CurrentUser: CookieRef<APIUser | undefined>;
 
+    static DescriptionMaxCharLimit = 4000;
+
     static Setup(dev: boolean = false) {
         this.APIUrl = dev ? 'http://localhost:2434' : 'https://fluxis.flux.moe/api';
         this.AssetsUrl = dev ? 'http://localhost:2434/assets' : 'https://assets.flux.moe';
@@ -97,6 +99,39 @@ export default class API {
 
         this.CurrentUser.value = user;
     }
+
+    static async UploadToCatbox(file: File): Promise<Result<string, APIResponseErrors>> {
+        try {
+            const formData = new FormData();
+            formData.append('reqtype', 'fileupload');
+            formData.append('fileToUpload', file);
+
+            const { data, error, status } = await useFetch('https://corsproxy.io/?' + encodeURIComponent('https://catbox.moe/user/api.php'), {
+                method: 'POST',
+                body: formData,
+            });
+
+            if (error.value || !data.value) {
+                return { 
+                    data: null, 
+                    error: { 
+                        _request: error.value?.message || 'Upload failed',
+                        _status: status.value
+                    } 
+                };
+            }
+
+            const url = typeof data.value === 'string' ? data.value : String(data.value);
+            return { data: url.trim(), error: null };
+        } catch (ex: any) {
+            return { 
+                data: null, 
+                error: { 
+                    _request: ex?.message || 'Unknown error during catbox upload' 
+                } 
+            };
+        }
+    }
 }
 
 async function tryPerform<T, E = APIResponseErrors>(endpoint: string, method: string, body: any = {}): Promise<Result<T, E>> {

src/utils/markdown.ts

@@ -142,4 +142,4 @@ export default class Markdown {
 
         return html;
     }
-}
+}

tailwind.config.js

@@ -4,6 +4,7 @@ module.exports = {
     theme: {
         colors: {
             white: '#FFF',
+            gray: '#AAA',
             black: '#000',
             transparent: 'transparent',