diff --git a/apps/frontend/src/pages/[type]/[project]/settings/description.vue b/apps/frontend/src/pages/[type]/[project]/settings/description.vue index 6cd1c44bef..0eeb1c1ea4 100644 --- a/apps/frontend/src/pages/[type]/[project]/settings/description.vue +++ b/apps/frontend/src/pages/[type]/[project]/settings/description.vue @@ -52,8 +52,8 @@ import { usePageLeaveSafety, useSavable, } from '@modrinth/ui' -import { TeamMemberPermission } from '@modrinth/utils' -import { computed, useTemplateRef } from 'vue' +import { type MarkdownDocument, parseModrinthMarkdown, TeamMemberPermission } from '@modrinth/utils' +import { computed, ref, useTemplateRef, watch } from 'vue' import AiImageWarningModal from '~/components/ui/AiImageWarningModal.vue' import { useImageUpload } from '~/composables/image-upload.ts' @@ -73,9 +73,18 @@ const { saved, current, saving, hasChanges, reset, save } = useSavable( const { confirmLeaveModal } = usePageLeaveSafety(hasChanges) +const descriptionDocument = ref(null) +watch( + () => current.value.description, + async (text) => { + const trimmed = text?.trim() || '' + descriptionDocument.value = trimmed ? await parseModrinthMarkdown(trimmed) : null + }, + { immediate: true }, +) + const descriptionWarning = computed(() => { - const text = current.value.description?.trim() || '' - const charCount = countText(text) + const charCount = countText(descriptionDocument.value) if (charCount < MIN_DESCRIPTION_CHARS) { return `It's recommended to have a description with at least ${MIN_DESCRIPTION_CHARS} readable characters. (${charCount}/${MIN_DESCRIPTION_CHARS})`