From cebcb50903a757aa0bb00f1ed4eb5b048cd85e66 Mon Sep 17 00:00:00 2001
From: Alexis <alexis.pele@pm.me>
Date: Sat, 9 Aug 2025 18:55:55 +0200
Subject: [PATCH] Added tooltip on rich text

---
 app/components/global/input/Editor.vue | 253 +++++++++++++++++--------
 i18n/i18n.config.ts                    |  22 +++
 2 files changed, 198 insertions(+), 77 deletions(-)

diff --git a/app/components/global/input/Editor.vue b/app/components/global/input/Editor.vue
index ac0d508..05eb186 100644
--- a/app/components/global/input/Editor.vue
+++ b/app/components/global/input/Editor.vue
@@ -33,96 +33,195 @@ function clearFormatting() {
     <div class="flex gap-1.5">
       <!-- Inline styles -->
       <div class="flex" v-if="!props.disableInlines">
-        <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>
+        <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>
 
-        <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>
+        <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>
 
-        <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>
+        <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">
-        <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>
+        <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>
 
-        <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>
+        <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>
 
-        <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>
+        <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">
-        <UiButton
-          @click.prevent="clearFormatting"
-          variant="secondary"
-          class="size-7 rounded-e-none"
-          size="icon"
-        >
-          <PhTextTSlash weight="bold" />
-        </UiButton>
+        <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>
 
-        <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>
+        <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>
 
-        <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>
+        <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>
 
diff --git a/i18n/i18n.config.ts b/i18n/i18n.config.ts
index 475266e..db7c35a 100644
--- 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",