Added tooltip on rich text

Fixed some UI issues with drag state
Added update logic for single day events
2025-08-09 18:55:55 +02:00 · 2025-08-09 16:40:50 +02:00 · 2025-08-09 16:24:59 +02:00 · 2025-08-08 10:49:14 +02:00 · 2025-08-08 10:48:29 +02:00 · 2025-08-07 23:01:34 +02:00
15 changed files with 1507 additions and 497 deletions
--- 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>
--- a/app/components/calendar/event/Event.vue
+++ b/app/components/calendar/event/Event.vue
@@ -2,14 +2,17 @@
 import { cn } from "@/lib/utils"
 import type { RPGDate } from "@@/models/Date"
 import type { CalendarEvent } from "@@/models/CalendarEvent"
+import { ja } from "zod/v4/locales";

 const props = defineProps<{
  event: CalendarEvent
  tileDate: RPGDate
 }>()

-const { areDatesIdentical, revealEditEventModal, revealDeleteEventModal } = useCalendar()
-const { lastActiveEvent } = storeToRefs(useCalendar())
+const buttonRef = useTemplateRef<HTMLButtonElement>('buttonRef')
+
+const { areDatesIdentical, revealEditEventModal, revealDeleteEventModal, resetSkeleton } = useCalendar()
+const { lastActiveEvent, eventSkeleton, isDraggingEvent } = storeToRefs(useCalendar())

 const spansMultipleDays = computed(() => Boolean(props.event.startDate && props.event.endDate))
 const isStartEvent = computed(() => spansMultipleDays.value && areDatesIdentical(props.tileDate, props.event.startDate))
@@ -49,13 +52,29 @@ onMounted(() => {
    handleDelete()
  })
 })
+
+// Draggable logic
+const isTileDragging = shallowRef(false)
+
+function handleDragStart() {
+  isTileDragging.value = true
+  isDraggingEvent.value = true
+  eventSkeleton.value = structuredClone(toRaw(props.event))
+  handleClosePopover()
+}
+function handleDragEnd() {
+  isTileDragging.value = false
+  isDraggingEvent.value = false
+}
 </script>

 <template>
  <UiPopover v-model:open="isPopoverDetailsOpen">
    <UiPopoverTrigger as-child>
      <button
-        class="event-button text-2xs md:text-xs px-[5px] py-[5px] md:px-2 md:py-1 block w-full text-left rounded-sm transition-colors outline-offset-1 cursor-pointer"
+        ref="buttonRef"
+        class="event-button text-2xs md:text-xs px-[5px] py-[5px] md:px-2 md:py-1 block w-full text-left rounded-sm transition-opacity outline-offset-1 cursor-pointer"
+        :draggable="event.endDate ? 'false' : 'true'"
        :class="
          cn(
            `element-${event.category?.color}`,
@@ -63,11 +82,17 @@ onMounted(() => {
              'is-hidden': event.hidden,
              'rounded-r-none': isStartEvent,
              'rounded-l-none': isEndEvent,
+            },
+            {
+              'opacity-60': isTileDragging,
+              'opacity-100': !isTileDragging
            }
          )
        "
        @dblclick="handleDoubleClick"
        @keydown.delete="handleDelete"
+        @dragstart="handleDragStart"
+        @dragend="handleDragEnd"
      >
        <div class="line-clamp-2 [overflow-wrap:anywhere] hyphens-auto">
          {{ eventTitle }}
--- 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>
--- 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>
--- 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>
--- a/app/components/calendar/state/monthly/DayTile.vue
+++ b/app/components/calendar/state/monthly/DayTile.vue
@@ -6,6 +6,9 @@ import { storeToRefs } from "pinia"
 import { computed, ref, type ComputedRef } from "vue"

 import CalendarEventButton from "../../event/Event.vue"
+import { useToast } from "@/components/ui/toast"
+import type { APIError } from "@@/models/Errors"
+import { ToastLifetime } from "@/components/ui/toast/use-toast"

 const props = defineProps<{
  date: RPGDate
@@ -16,11 +19,14 @@ const emit = defineEmits<{
  "on-open-create-dialog": [date: RPGDate]
 }>()

+const { toast } = useToast()
+const { t } = useI18n()
+
 const calendarTile = ref()
 const calendarEventsList = ref()

-const { defaultDate, selectDate, areDatesIdentical, getFormattedDateTitle } = useCalendar()
-const { selectedDate, currentEvents, isReadOnly } = storeToRefs(useCalendar())
+const { defaultDate, selectDate, areDatesIdentical, getFormattedDateTitle, updateEventFromSkeleton, resetSkeleton } = useCalendar()
+const { selectedDate, currentEvents, isReadOnly, eventSkeleton, isDraggingEvent } = storeToRefs(useCalendar())

 const breakpoints = useBreakpoints(
  breakpointsTailwind
@@ -60,9 +66,17 @@ const { top: tileListTop } = useElementBounding(calendarEventsList)
 const numberOfEventsToFit: ComputedRef<number> = computed(() => {
  if (!eventsForTheDay.value.length) return 0

-  return Math.trunc((tileHeight.value - (tileListTop.value - tileTop.value)) / 40)
+  let offset = 0
+
+  if (isDraggingEvent.value && !tileNotHovered.value && !skeletonInsideCurrentDay.value) {
+    offset = 1
+  }
+
+  return Math.trunc((tileHeight.value - (tileListTop.value - tileTop.value)) / 40) - offset
 })

+const skeletonInsideCurrentDay = computed(() => eventsForTheDay.value.find((e) => e.id === eventSkeleton.value.id))
+
 /**
 * Events that can fit in the tile's space
 */
@@ -76,16 +90,54 @@ const eventsToDisplay: ComputedRef<CalendarEvent[]> = computed<CalendarEvent[]>(
 * Used if not all events can be seen in the tile's space
 */
 const eventsNotDisplayed: ComputedRef<number>  = computed<number>(() => eventsForTheDay.value.length - eventsToDisplay.value.length)
+
+// Handle drop events
+const { isOutside: tileNotHovered } = useMouseInElement(calendarTile)
+const isLoading = ref(false)
+
+async function handleTileDrop() {
+  if (isLoading.value) return
+  if (skeletonInsideCurrentDay.value) return
+
+  isLoading.value = true
+
+  eventSkeleton.value.startDate = props.date
+
+  const { error } = await tryCatch(updateEventFromSkeleton())
+
+  if (error) {
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    const apiError = (error as any).data as APIError
+
+    apiError.data.errors.forEach((error) => {
+      toast({
+        title: t("entity.calendar.event.editErrors.toastTitle"),
+        variant: "destructive",
+        description: t(`entity.calendar.event.editErrors.${error.path[1]}_${error.code}`),
+        duration: ToastLifetime.MEDIUM,
+      })
+    })
+
+    isLoading.value = false
+    return
+  }
+
+  isLoading.value = false
+  resetSkeleton()
+}
 </script>

 <template>
  <div
    ref="calendarTile"
-    class="tile relative p-1 md:p-2 transition-all"
+    class="tile relative p-1 md:p-2 md:pt-1 transition-all"
    :class="{
      'text-slate-300 dark:text-slate-500': props.faded,
      'text-slate-500 dark:text-slate-300': !props.faded
    }"
+    @drop.prevent="handleTileDrop"
+    @dragenter.prevent
+    @dragover.prevent
  >
    <button
      class="relative z-10 group block w-full text-2xs md:text-xs text-center cursor-pointer"
@@ -107,13 +159,25 @@ const eventsNotDisplayed: ComputedRef<number>  = computed<number>(() => eventsFo
    <ClientOnly>
      <ul
        ref="calendarEventsList"
-        class="absolute top-9 md:top-12 bottom-1 md:bottom-2 inset-x-2 grid auto-rows-min gap-1 z-10 pointer-events-none transition-opacity"
+        class="absolute top-8 md:top-10 bottom-1 md:bottom-2 inset-x-2 grid auto-rows-min gap-1 z-10 pointer-events-none transition-opacity"
        :class="{
          'opacity-40': props.faded && !isSelectedDate
        }"
      >
-        <TransitionGroup name="event">
-          <li v-for="event in eventsToDisplay" :key="event.id" class="grid w-full pointer-events-auto">
+        <li
+          v-if="!tileNotHovered && isDraggingEvent && !skeletonInsideCurrentDay"
+          :key="eventSkeleton.id"
+          class="opacity-60"
+        >
+          <CalendarEventButton :event="eventSkeleton" :tile-date="date" />
+        </li>
+
+        <TransitionGroup :name="!isDraggingEvent ? 'event' : ''">
+          <li
+            v-for="(event, i) in eventsToDisplay"
+            :key="event.id"
+            class="grid w-full pointer-events-auto"
+          >
            <CalendarEventButton :event :tile-date="date" />
          </li>
        </TransitionGroup>
@@ -158,6 +222,7 @@ const eventsNotDisplayed: ComputedRef<number>  = computed<number>(() => eventsFo

    <ClientOnly>
      <LazyCalendarDialogCreateEvent v-if="!isReadOnly && breakpoints.lg.value" :date btn-class="absolute inset-0 w-full h-full cursor-default z-0" />
+
      <button
        v-else-if="!isReadOnly && !breakpoints.lg.value"
        class="absolute inset-0 w-full h-full cursor-default z-0"
--- a/app/components/global/input/Editor.vue
+++ b/app/components/global/input/Editor.vue
@@ -0,0 +1,343 @@
+<script lang="ts" setup>
+import { useEditor, EditorContent, type Content } from '@tiptap/vue-3'
+import StarterKit from '@tiptap/starter-kit'
+import { PhArrowUDownRight, PhArrowUUpLeft, PhListBullets, PhListNumbers, PhQuotes, PhTextB, PhTextItalic, PhTextStrikethrough, PhTextTSlash } from '@phosphor-icons/vue'
+
+const props = defineProps<{
+  disableInlines?: boolean
+  disableBlocks?: boolean
+}>()
+
+const model = defineModel<any>()
+
+const editor = useEditor({
+  content: model.value as Content,
+  extensions: [
+    StarterKit
+  ],
+
+  onUpdate: ({ editor }) => {
+    model.value = editor.getHTML()
+  }
+})
+
+function clearFormatting() {
+  editor.value?.chain().focus().unsetAllMarks().run()
+  editor.value?.chain().focus().clearNodes().run()
+}
+</script>
+
+<template>
+  <div v-if="editor">
+    <!-- Toolbar -->
+    <div class="flex gap-1.5">
+      <!-- Inline styles -->
+      <div class="flex" v-if="!props.disableInlines">
+        <UiTooltipProvider :delay-duration="250">
+          <UiTooltip>
+            <UiTooltipTrigger as-child>
+              <UiButton
+                @click.prevent="editor.chain().focus().toggleBold().run()"
+                :disabled="!editor.can().chain().focus().toggleBold().run()"
+                :variant="editor.isActive('bold') ? 'default' : 'secondary'"
+                class="size-7 rounded-e-none"
+                size="icon"
+              >
+                <PhTextB weight="bold" />
+              </UiButton>
+            </UiTooltipTrigger>
+            <UiTooltipContent>
+              <p>
+                {{ $t('editor.bold') }}
+              </p>
+            </UiTooltipContent>
+          </UiTooltip>
+        </UiTooltipProvider>
+
+        <UiTooltipProvider :delay-duration="250">
+          <UiTooltip>
+            <UiTooltipTrigger as-child>
+              <UiButton
+                @click.prevent="editor.chain().focus().toggleItalic().run()"
+                :disabled="!editor.can().chain().focus().toggleItalic().run()"
+                :variant="editor.isActive('italic') ? 'default' : 'secondary'"
+                class="size-7 rounded-none"
+                size="icon"
+              >
+                <PhTextItalic weight="bold" />
+              </UiButton>
+            </UiTooltipTrigger>
+            <UiTooltipContent>
+              <p>
+                {{ $t('editor.italic') }}
+              </p>
+            </UiTooltipContent>
+          </UiTooltip>
+        </UiTooltipProvider>
+
+        <UiTooltipProvider :delay-duration="250">
+          <UiTooltip>
+            <UiTooltipTrigger as-child>
+              <UiButton
+                @click.prevent="editor.chain().focus().toggleStrike().run()"
+                :disabled="!editor.can().chain().focus().toggleStrike().run()"
+                :variant="editor.isActive('strike') ? 'default' : 'secondary'"
+                class="size-7 rounded-s-none"
+                size="icon"
+              >
+                <PhTextStrikethrough weight="bold" />
+              </UiButton>
+            </UiTooltipTrigger>
+            <UiTooltipContent>
+              <p>
+                {{ $t('editor.strike') }}
+              </p>
+            </UiTooltipContent>
+          </UiTooltip>
+        </UiTooltipProvider>
+      </div>
+
+      <!-- Block styles -->
+      <div class="flex" v-if="!props.disableBlocks">
+        <UiTooltipProvider :delay-duration="250">
+          <UiTooltip>
+            <UiTooltipTrigger as-child>
+              <UiButton
+                @click.prevent="editor.chain().focus().toggleBulletList().run()"
+                :variant="editor.isActive('bulletList') ? 'default' : 'secondary'"
+                class="size-7 rounded-e-none"
+                size="icon"
+              >
+                <PhListBullets weight="bold" />
+              </UiButton>
+            </UiTooltipTrigger>
+            <UiTooltipContent>
+              <p>
+                {{ $t('editor.ulist') }}
+              </p>
+            </UiTooltipContent>
+          </UiTooltip>
+        </UiTooltipProvider>
+
+        <UiTooltipProvider :delay-duration="250">
+          <UiTooltip>
+            <UiTooltipTrigger as-child>
+              <UiButton
+                @click.prevent="editor.chain().focus().toggleOrderedList().run()"
+                :variant="editor.isActive('orderedList') ? 'default' : 'secondary'"
+                class="size-7 rounded-none"
+                size="icon"
+              >
+                <PhListNumbers weight="bold" />
+              </UiButton>
+            </UiTooltipTrigger>
+            <UiTooltipContent>
+              <p>
+                {{ $t('editor.olist') }}
+              </p>
+            </UiTooltipContent>
+          </UiTooltip>
+        </UiTooltipProvider>
+
+        <UiTooltipProvider :delay-duration="250">
+          <UiTooltip>
+            <UiTooltipTrigger as-child>
+              <UiButton
+                @click.prevent="editor.chain().focus().toggleBlockquote().run()"
+                :variant="editor.isActive('blockquote') ? 'default' : 'secondary'"
+                class="size-7 rounded-s-none"
+                size="icon"
+              >
+                <PhQuotes weight="fill" />
+              </UiButton>
+            </UiTooltipTrigger>
+            <UiTooltipContent>
+              <p>
+                {{ $t('editor.quote') }}
+              </p>
+            </UiTooltipContent>
+          </UiTooltip>
+        </UiTooltipProvider>
+      </div>
+
+      <div class="flex">
+        <UiTooltipProvider :delay-duration="250">
+          <UiTooltip>
+            <UiTooltipTrigger as-child>
+              <UiButton
+                @click.prevent="clearFormatting"
+                variant="secondary"
+                class="size-7 rounded-e-none"
+                size="icon"
+              >
+                <PhTextTSlash weight="bold" />
+              </UiButton>
+            </UiTooltipTrigger>
+            <UiTooltipContent>
+              <p>
+                {{ $t('editor.noFormat') }}
+              </p>
+            </UiTooltipContent>
+          </UiTooltip>
+        </UiTooltipProvider>
+
+        <UiTooltipProvider :delay-duration="250">
+          <UiTooltip>
+            <UiTooltipTrigger as-child>
+              <UiButton
+                @click.prevent="editor.chain().focus().undo().run()"
+                :disabled="!editor.can().chain().focus().undo().run()"
+                variant="secondary"
+                class="size-7 rounded-none"
+                size="icon"
+              >
+                <PhArrowUUpLeft weight="bold" />
+              </UiButton>
+            </UiTooltipTrigger>
+            <UiTooltipContent>
+              <p>
+                {{ $t('editor.undo') }}
+              </p>
+            </UiTooltipContent>
+          </UiTooltip>
+        </UiTooltipProvider>
+
+        <UiTooltipProvider :delay-duration="250">
+          <UiTooltip>
+            <UiTooltipTrigger as-child>
+              <UiButton
+                @click.prevent="editor.chain().focus().redo().run()"
+                :disabled="!editor.can().chain().focus().redo().run()"
+                variant="secondary"
+                class="size-7 rounded-s-none"
+                size="icon"
+              >
+                <PhArrowUDownRight weight="bold" />
+              </UiButton>
+            </UiTooltipTrigger>
+            <UiTooltipContent>
+              <p>
+                {{ $t('editor.redo') }}
+              </p>
+            </UiTooltipContent>
+          </UiTooltip>
+        </UiTooltipProvider>
+      </div>
+    </div>
+
+    <EditorContent
+      :editor
+      class="overflow-y-auto md:text-sm border-b-1 border-border"
+    />
+  </div>
+</template>
+
+<style lang="scss">
+.tiptap,
+.content-editor {
+  /* List styles */
+  ul,
+  ol {
+    padding: 0 1rem;
+    margin: 1.25rem 1rem 1.25rem 0.4rem;
+
+    li p {
+      margin-top: 0.25em;
+      margin-bottom: 0.25em;
+    }
+  }
+
+  ul {
+    list-style-type: disc;
+  }
+
+  ol {
+    list-style-type: decimal;
+  }
+
+  /* Heading styles */
+  h1,
+  h2,
+  h3,
+  h4,
+  h5,
+  h6 {
+    line-height: 1.1;
+    margin-top: 2.5rem;
+    text-wrap: pretty;
+  }
+
+  h1,
+  h2 {
+    margin-top: 3.5rem;
+    margin-bottom: 1.5rem;
+  }
+
+  h1 {
+    font-size: 1.4rem;
+  }
+
+  h2 {
+    font-size: 1.2rem;
+  }
+
+  h3 {
+    font-size: 1.1rem;
+  }
+
+  h4,
+  h5,
+  h6 {
+    font-size: 1rem;
+  }
+
+  /* Code and preformatted text styles */
+  code {
+    background-color: var(--purple-light);
+    border-radius: 0.4rem;
+    color: var(--black);
+    font-size: 0.85rem;
+    padding: 0.25em 0.3em;
+  }
+
+  pre {
+    background: var(--black);
+    border-radius: 0.5rem;
+    color: var(--white);
+    font-family: 'JetBrainsMono', monospace;
+    margin: 1.5rem 0;
+    padding: 0.75rem 1rem;
+
+    code {
+      background: none;
+      color: inherit;
+      font-size: 0.8rem;
+      padding: 0;
+    }
+  }
+
+  blockquote {
+    border-left: 3px solid var(--gray-3);
+    margin: 1.5rem 0;
+    padding-left: 1rem;
+  }
+
+  hr {
+    border: none;
+    border-top: 1px solid var(--gray-2);
+    margin: 2rem 0;
+  }
+}
+
+/* Basic editor styles */
+.tiptap {
+  padding-block: 0.75rem;
+  min-height: 7rem;
+  max-height: 12rem;
+  overflow-y: auto;
+
+  :first-child {
+    margin-top: 0;
+  }
+}
+</style>
--- a/app/components/world/PreviewCard.vue
+++ b/app/components/world/PreviewCard.vue
@@ -47,7 +47,7 @@ const updatedAt = computed<string>(() => props.world.updatedAt ? DateTime.fromIS
    </UiCardHeader>

    <UiCardContent class="grow">
-      <p class="italic">{{ world.description }}</p>
+      <div class="md:text-sm" v-html="world.description"></div>

      <div
        v-if="isCardHovered || isCardFocused"
--- a/app/components/world/form/Create.vue
+++ b/app/components/world/form/Create.vue
@@ -67,16 +67,13 @@ function handleFormCancel() {
          name="new-world-name"
          required
          :placeholder="$t('common.title')"
-          class="w-full -my-1 mb-4 py-2 -mx-1 px-1 text-xl border-b-[1px] bg-transparent focus-visible:outline-hidden focus-visible:border-primary invalid:border-destructive"
+          class="w-full -my-1 py-2 -mx-1 px-1 text-xl border-b-[1px] bg-transparent focus-visible:outline-hidden focus-visible:border-primary invalid:border-destructive"
          @input="handleNameChange"
        >

-        <textarea
-          id="new-world-description"
+        <InputEditor
+          disable-blocks
          v-model="worldSkeleton.description"
-          name="new-world-description"
-          :placeholder="$t('entity.addDescription')"
-          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="-mx-1 grid gap-3">
--- a/app/components/world/form/Update.vue
+++ b/app/components/world/form/Update.vue
@@ -85,12 +85,9 @@ function handleFormCancel() {
          @input="handleNameChange"
        >

-        <textarea
-          id="new-world-description"
+        <InputEditor
+          disable-blocks
          v-model="worldSkeleton.description"
-          name="new-world-description"
-          :placeholder="$t('entity.addDescription')"
-          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="-mx-1 grid gap-3">
--- a/app/pages/my/worlds/[id].vue
+++ b/app/pages/my/worlds/[id].vue
@@ -190,7 +190,7 @@ function hideEditModal() {
              </UiTooltipProvider>
            </div>

-            <p>{{ world.data.description }}</p>
+            <div class="content-editor" v-html="world.data.description" />
          </div>
        </Spacing>
      </header>
--- a/app/stores/CalendarStore.ts
+++ b/app/stores/CalendarStore.ts
@@ -130,7 +130,7 @@ export const useCalendar = defineStore("calendar", () => {
    return Number(params.month)
  })
  const currentMonthData = computed<CalendarMonth>(() => {
-    return sortedMonths.value[currentMonth.value]
+    return sortedMonths.value[currentMonth.value]!
  })
  // Gets the label from currentMonth index
  const currentMonthName = computed<string>(() => getMonthName(currentMonth.value))
@@ -605,7 +605,7 @@ export const useCalendar = defineStore("calendar", () => {
    // Else, we need to accelerate and decelerate
    else {
      // First, get all the remaining days in the current month
-      const currentMonth = sortedMonths.value[datePivot.month]
+      const currentMonth = sortedMonths.value[datePivot.month]!
      dateAcc.day = currentMonth.days - datePivot.day
      if (direction === "future") {
        datePivot.month = getNextViewMonth(datePivot.month)
@@ -756,7 +756,7 @@ export const useCalendar = defineStore("calendar", () => {

    // Loop over all event once to convert the structure to a usable one
    for (let i = 0; i < allEvents.value.length; i++) {
-      const e: CalendarEvent = allEvents.value[i]
+      const e: CalendarEvent = allEvents.value[i]!

      // Estimate distance from pivot
      const startDateDays: number = convertDateToDays(e.startDate)
@@ -830,6 +830,7 @@ export const useCalendar = defineStore("calendar", () => {
  const isCreatingEvent = ref<boolean>(false)
  const isUpdatingEvent = ref<boolean>(false)
  const isDeletingEvent = ref<boolean>(false)
+  const isDraggingEvent = ref<boolean>(false)
  const operationInProgress = computed<boolean>(() => isCreatingEvent.value || isUpdatingEvent.value || isDeletingEvent.value)
  let abortController: AbortController | null = null

@@ -984,6 +985,7 @@ export const useCalendar = defineStore("calendar", () => {
    isCreatingEvent,
    isUpdatingEvent,
    isDeletingEvent,
+    isDraggingEvent,
    operationInProgress,
    eventSkeleton,
    resetSkeleton,
--- a/i18n/i18n.config.ts
+++ b/i18n/i18n.config.ts
@@ -86,6 +86,17 @@ export default defineI18nConfig(() => ({
        createdAt: "Created {createdAt}",
        updatedAt: "Last updated {updatedAt}",
      },
+      editor: {
+        bold: "Bold",
+        italic: "Italic",
+        strike: "Strikethrough",
+        ulist: "Bullet list",
+        olist: "Numbered list",
+        quote: "Quote",
+        noFormat: "Remove formatting",
+        undo: "Undo",
+        redo: "Redo"
+      },
      entity: {
        category: {
          nameSingular: "Category",
@@ -421,6 +432,17 @@ export default defineI18nConfig(() => ({
        createdAt: "Créé le {createdAt}",
        updatedAt: "Dernière modification le {updatedAt}",
      },
+      editor: {
+        bold: "Gras",
+        italic: "Italique",
+        strike: "Barré",
+        ulist: "Liste à puces",
+        olist: "Liste numerotée",
+        quote: "Citation",
+        noFormat: "Effacer le formattage",
+        undo: "Annuler",
+        redo: "Rétablir"
+      },
      entity: {
        category: {
          nameSingular: "Catégorie",
--- a/package.json
+++ b/package.json
@@ -15,22 +15,25 @@
  "dependencies": {
    "@intlify/message-compiler": "^11.1.11",
    "@nuxt/content": "3.6.3",
-    "@nuxt/eslint": "^1.7.1",
+    "@nuxt/eslint": "^1.8.0",
    "@nuxt/image": "1.11.0",
    "@nuxthub/core": "^0.9.0",
    "@nuxtjs/i18n": "^10.0.3",
    "@phosphor-icons/vue": "^2.2.1",
    "@pinia/nuxt": "^0.11.2",
    "@tailwindcss/vite": "^4.1.11",
+    "@tiptap/pm": "^3.0.9",
+    "@tiptap/starter-kit": "^3.0.9",
+    "@tiptap/vue-3": "^3.0.9",
    "@vueuse/core": "^13.6.0",
    "@vueuse/integrations": "^13.6.0",
    "@vueuse/nuxt": "^13.6.0",
    "better-sqlite3": "^12.2.0",
    "class-variance-authority": "^0.7.1",
    "clsx": "^2.1.1",
-    "lucide-vue-next": "^0.536.0",
+    "lucide-vue-next": "^0.537.0",
    "luxon": "^3.7.1",
-    "nuxt": "^4.0.2",
+    "nuxt": "^4.0.3",
    "pinia": "^3.0.3",
    "radix-vue": "^1.9.17",
    "shadcn-nuxt": "^2.2.0",
@@ -39,7 +42,7 @@
    "tailwindcss-animate": "^1.0.7",
    "vue": "^3.5.18",
    "vue-router": "^4.5.1",
-    "zod": "^4.0.14"
+    "zod": "^4.0.15"
  },
  "devDependencies": {
    "@nuxtjs/color-mode": "^3.5.2",
@@ -51,14 +54,14 @@
    "@typescript-eslint/parser": "^8.39.0",
    "eslint": "^9.32.0",
    "eslint-config-prettier": "^10.1.8",
-    "eslint-plugin-prettier": "^5.5.3",
+    "eslint-plugin-prettier": "^5.5.4",
    "eslint-plugin-vue": "^10.4.0",
    "postcss": "^8.5.6",
    "prettier": "^3.6.2",
-    "sass": "^1.89.2",
+    "sass": "^1.90.0",
    "supabase": "^2.33.9",
    "tailwindcss": "^4.1.11",
    "typescript": "^5.9.2",
-    "wrangler": "^4.27.0"
+    "wrangler": "^4.28.1"
  }
 }
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
Author	SHA1	Message	Date
Alexis	cebcb50903	Added tooltip on rich text	2025-08-09 18:55:55 +02:00
Alexis	396215bb91	Fixed some UI issues with drag state	2025-08-09 16:40:50 +02:00
Alexis	7468374bb5	Added update logic for single day events	2025-08-09 16:24:59 +02:00
Alexis	5a421cf07f	Merge branch 'feat/editor' into dev	2025-08-08 10:49:14 +02:00
Alexis	25a9099a18	Added rich text to event description	2025-08-08 10:48:29 +02:00
Alexis	c208393f9f	Bigger richtext window	2025-08-07 23:01:34 +02:00
Alexis	d75f3b5423	Added control options	2025-08-07 22:55:53 +02:00
Alexis	97ce5b3553	Added simple tiptap component	2025-08-07 22:37:49 +02:00
Alexis	0a35f441e0	Merge branch 'code/cleanup' into dev	2025-08-04 22:43:49 +02:00