From 25a9099a189360f8dbf5af6cd7fbc531604255f8 Mon Sep 17 00:00:00 2001
From: Alexis <alexis.pele@pm.me>
Date: Fri, 8 Aug 2025 10:48:29 +0200
Subject: [PATCH] Added rich text to event description

---
 app/components/calendar/event/Details.vue             | 4 ++--
 app/components/calendar/form/CreateEvent.vue          | 9 +++------
 app/components/calendar/form/UpdateEvent.vue          | 9 +++------
 app/components/calendar/search/lists/EventCallout.vue | 4 +---
 4 files changed, 9 insertions(+), 17 deletions(-)

diff --git a/app/components/calendar/event/Details.vue b/app/components/calendar/event/Details.vue
index 137b25c..7836ff3 100644
--- a/app/components/calendar/event/Details.vue
+++ b/app/components/calendar/event/Details.vue
@@ -160,8 +160,8 @@ function deployDeleteModal() {
       <template v-if="event.description">
         <hr class="border-border mt-2" >
 
-        <div class="max-h-48 overflow-y-auto mt-2 text-sm text-slate-600 dark:text-slate-300">
-          {{ event.description }}
+        <div class="max-h-48 overflow-y-auto mt-2 text-sm opacity-80">
+          <div class="content-editor" v-html="event.description" />
         </div>
       </template>
     </div>
diff --git a/app/components/calendar/form/CreateEvent.vue b/app/components/calendar/form/CreateEvent.vue
index a8f2ec7..89e1662 100644
--- a/app/components/calendar/form/CreateEvent.vue
+++ b/app/components/calendar/form/CreateEvent.vue
@@ -74,14 +74,11 @@ function handleCancel() {
       </div>
 
       <div class="col-span-2 my-2 pl-8">
-        <textarea
-          id="new-event-description"
+        <InputEditor
+          disable-blocks
           v-model="eventSkeleton.description"
-          name="new-event-description"
-          :placeholder="$t('entity.addDescription')"
-          :maxlength="1200"
-          class="w-full -my-1 py-1 -mx-1 px-1 min-h-24 max-h-36 text-sm border-b-[1px] bg-transparent focus-visible:outline-hidden focus-visible:border-primary invalid:border-destructive"
         />
+
         <div class="mt-2 mb-1 text-xs opacity-50">
           {{ t('entity.calendar.event.patterns.description') }}
         </div>
diff --git a/app/components/calendar/form/UpdateEvent.vue b/app/components/calendar/form/UpdateEvent.vue
index b367ba0..f19375f 100644
--- a/app/components/calendar/form/UpdateEvent.vue
+++ b/app/components/calendar/form/UpdateEvent.vue
@@ -92,14 +92,11 @@ function handleCancel() {
       </div>
 
       <div class="col-span-2 my-2 ml-8">
-        <textarea
-          id="new-event-description"
+        <InputEditor
+          disable-blocks
           v-model="eventSkeleton.description"
-          name="new-event-description"
-          :placeholder="$t('entity.addDescription')"
-          :maxlength="1200"
-          class="w-full -my-1 py-1 -mx-1 px-1 min-h-24 max-h-36 text-sm border-b-[1px] bg-transparent focus-visible:outline-hidden focus-visible:border-primary invalid:border-destructive"
         />
+
         <div class="mt-2 mb-1 text-xs opacity-50">
           {{ t('entity.calendar.event.patterns.description') }}
         </div>
diff --git a/app/components/calendar/search/lists/EventCallout.vue b/app/components/calendar/search/lists/EventCallout.vue
index f629b97..83cc825 100644
--- a/app/components/calendar/search/lists/EventCallout.vue
+++ b/app/components/calendar/search/lists/EventCallout.vue
@@ -113,9 +113,7 @@ const dateDuration = computed<string | null>(() => props.event.endDate ? getRela
 
     <div v-if="event.description" class="text-xs md:text-sm">
       <hr class="my-3 md:my-2 border-white opacity-50" >
-      <span class="opacity-75">
-        {{ event.description }}
-      </span>
+      <div class="content-editor opacity-75" v-html="event.description" />
     </div>
   </button>
 </template>