From 12bbf568703dc07c581df146f2abdd899e99e3eb Mon Sep 17 00:00:00 2001
From: Christopher Ng <chrng8@gmail.com>
Date: Fri, 10 Jan 2025 17:00:26 -0800
Subject: [PATCH] feat: Allow rich formatting of profile text

Signed-off-by: Christopher Ng <chrng8@gmail.com>
---
 apps/profile/src/views/Profile.vue                     | 10 +++-------
 .../src/components/PersonalInfo/BiographySection.vue   |  2 +-
 2 files changed, 4 insertions(+), 8 deletions(-)

diff --git a/apps/profile/src/views/Profile.vue b/apps/profile/src/views/Profile.vue
index 6f120bd7a3254..213922250e1b7 100644
--- a/apps/profile/src/views/Profile.vue
+++ b/apps/profile/src/views/Profile.vue
@@ -92,9 +92,7 @@
 							<h3 v-if="headline" class="profile__blocks-headline">
 								{{ headline }}
 							</h3>
-							<p v-if="biography" class="profile__blocks-biography">
-								{{ biography }}
-							</p>
+							<NcRichText v-if="biography" :text="biography" use-extended-markdown />
 
 							<!-- additional entries, use it with cautious -->
 							<div v-for="(section, index) in sections"
@@ -135,6 +133,7 @@ import NcAvatar from '@nextcloud/vue/dist/Components/NcAvatar.js'
 import NcButton from '@nextcloud/vue/dist/Components/NcButton.js'
 import NcContent from '@nextcloud/vue/dist/Components/NcContent.js'
 import NcEmptyContent from '@nextcloud/vue/dist/Components/NcEmptyContent.js'
+import NcRichText from '@nextcloud/vue/dist/Components/NcRichText.js'
 import AccountIcon from 'vue-material-design-icons/Account.vue'
 import MapMarkerIcon from 'vue-material-design-icons/MapMarker.vue'
 import PencilIcon from 'vue-material-design-icons/Pencil.vue'
@@ -165,6 +164,7 @@ export default defineComponent({
 		NcButton,
 		NcContent,
 		NcEmptyContent,
+		NcRichText,
 		PencilIcon,
 	},
 
@@ -401,10 +401,6 @@ $content-max-width: 640px;
 			font-weight: bold;
 			font-size: 20px;
 		}
-
-		&-biography {
-			white-space: pre-line;
-		}
 	}
 }
 
diff --git a/apps/settings/src/components/PersonalInfo/BiographySection.vue b/apps/settings/src/components/PersonalInfo/BiographySection.vue
index 32af1a03e2d18..bbfb25e25cc13 100644
--- a/apps/settings/src/components/PersonalInfo/BiographySection.vue
+++ b/apps/settings/src/components/PersonalInfo/BiographySection.vue
@@ -5,7 +5,7 @@
 
 <template>
 	<AccountPropertySection v-bind.sync="biography"
-		:placeholder="t('settings', 'Your biography')"
+		:placeholder="t('settings', 'Your biography. Markdown is supported.')"
 		:multi-line="true" />
 </template>