From ea92acff3a3b25f6b8e72b0aa5795c5d1c7abe62 Mon Sep 17 00:00:00 2001
From: matthieu <matthieu@yuno.malio.fr>
Date: Mon, 4 May 2026 19:54:34 +0200
Subject: [PATCH] =?UTF-8?q?fix(input-rich-text)=20:=20couleurs=20de=20text?=
 =?UTF-8?q?e=20et=20surlignage=20fa=C3=A7on=20Jira?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Ajoute deux boutons à la toolbar avec popover en palette pour
appliquer une couleur de texte ou un surlignage sur la sélection.

- Extensions TipTap : @tiptap/extension-text-style,
  @tiptap/extension-color, @tiptap/extension-highlight (multicolor).
- Palette de 8 couleurs (texte) + 8 pastels (surlignage) + reset.
- Indicateur de couleur active sous l'icône.
- Fermeture du popover sur clic extérieur, Echap, ou clic dans
  l'éditeur.
- Inclut les améliorations rendu/markdown du commit précédent
  (default outputFormat html, normalizeEditorInput, styles deep
  pour h2/h3/p/ul/ol/blockquote).
- Tests : 4 nouveaux cas (15 au total).
- Story et COMPONENTS.md à jour.

Note : les couleurs ne sont pas sérialisables en markdown ; pour
les conserver au save/reload utiliser output-format=\"html\".

Co-Authored-By: RuFlo <ruv@ruv.net>
---
 COMPONENTS.md                                 |   8 +-
 .../malio/input/InputRichText.test.ts         |  32 +++
 app/components/malio/input/InputRichText.vue  | 264 +++++++++++++++++-
 app/story/input/inputRichText.story.vue       |  25 +-
 package-lock.json                             |  43 +++
 package.json                                  |   3 +
 6 files changed, 361 insertions(+), 14 deletions(-)

diff --git a/COMPONENTS.md b/COMPONENTS.md
index ecf1e1c..0794f58 100644
--- a/COMPONENTS.md
+++ b/COMPONENTS.md
@@ -134,7 +134,9 @@ Zone de texte multiligne avec compteur et redimensionnement.
 
 ## MalioInputRichText
 
-Éditeur de texte riche basé sur **TipTap v3** + **StarterKit** + **tiptap-markdown**. Toolbar avec gras, italique, barré, titres H2/H3, listes, citation, code, code-block, lien, undo/redo. Sortie en markdown (par défaut) ou HTML.
+Éditeur de texte riche basé sur **TipTap v3** + **StarterKit** + **tiptap-markdown** + **TextStyle/Color/Highlight**. Toolbar avec gras, italique, barré, titres H2/H3, listes, citation, code, code-block, lien, **couleur du texte**, **surlignage**, undo/redo. Sortie en HTML (par défaut) ou markdown.
+
+> Couleurs et surlignages ne sont **pas persistés en markdown**. Pour les conserver au save/reload, utiliser `output-format="html"`.
 
 | Prop | Type | Défaut | Description |
 |------|------|--------|-------------|
@@ -149,7 +151,7 @@ Zone de texte multiligne avec compteur et redimensionnement.
 | `hint` | `string` | `''` | Message d'aide |
 | `error` | `string` | `''` | Message d'erreur |
 | `success` | `string` | `''` | Message de succès |
-| `outputFormat` | `'markdown' \| 'html'` | `'markdown'` | Format émis dans `update:modelValue` |
+| `outputFormat` | `'markdown' \| 'html'` | `'html'` | Format émis dans `update:modelValue` |
 | `groupClass` | `string` | `''` | Classes CSS conteneur (twMerge) |
 | `labelClass` | `string` | `''` | Classes CSS label (twMerge) |
 | `editorClass` | `string` | `''` | Classes CSS wrapper éditeur (twMerge) |
@@ -159,7 +161,7 @@ Zone de texte multiligne avec compteur et redimensionnement.
 ```vue
 <MalioInputRichText v-model="note" label="Note" placeholder="Écrire ici…" />
 <MalioInputRichText v-model="cr" label="Compte-rendu" error="Trop court" />
-<MalioInputRichText v-model="article" label="Article" output-format="html" min-height="240px" />
+<MalioInputRichText v-model="article" label="Article" min-height="240px" />
 <MalioInputRichText :model-value="content" :editable="false" />
 ```
 
diff --git a/app/components/malio/input/InputRichText.test.ts b/app/components/malio/input/InputRichText.test.ts
index f193f20..15ee4ca 100644
--- a/app/components/malio/input/InputRichText.test.ts
+++ b/app/components/malio/input/InputRichText.test.ts
@@ -61,10 +61,42 @@ describe('MalioInputRichText', () => {
     expect(wrapper.find('button[title="Gras"]').exists()).toBe(true)
     expect(wrapper.find('button[title="Italique"]').exists()).toBe(true)
     expect(wrapper.find('button[title="Lien"]').exists()).toBe(true)
+    expect(wrapper.find('button[title="Couleur du texte"]').exists()).toBe(true)
+    expect(wrapper.find('button[title="Surlignage"]').exists()).toBe(true)
     expect(wrapper.find('button[title="Annuler"]').exists()).toBe(true)
     expect(wrapper.find('button[title="Rétablir"]').exists()).toBe(true)
   })
 
+  it('opens and closes the text color palette', async () => {
+    const wrapper = await mountComponent({modelValue: ''})
+
+    expect(wrapper.find('[aria-label="Palette couleur du texte"]').exists()).toBe(false)
+
+    await wrapper.get('button[title="Couleur du texte"]').trigger('click')
+    expect(wrapper.find('[aria-label="Palette couleur du texte"]').exists()).toBe(true)
+
+    await wrapper.get('button[title="Couleur du texte"]').trigger('click')
+    expect(wrapper.find('[aria-label="Palette couleur du texte"]').exists()).toBe(false)
+  })
+
+  it('opens the highlight palette and closes the color palette', async () => {
+    const wrapper = await mountComponent({modelValue: ''})
+
+    await wrapper.get('button[title="Couleur du texte"]').trigger('click')
+    expect(wrapper.find('[aria-label="Palette couleur du texte"]').exists()).toBe(true)
+
+    await wrapper.get('button[title="Surlignage"]').trigger('click')
+    expect(wrapper.find('[aria-label="Palette de surlignage"]').exists()).toBe(true)
+    expect(wrapper.find('[aria-label="Palette couleur du texte"]').exists()).toBe(false)
+  })
+
+  it('disables color and highlight buttons when readonly', async () => {
+    const wrapper = await mountComponent({readonly: true, modelValue: ''})
+
+    expect(wrapper.get('button[title="Couleur du texte"]').attributes('disabled')).toBeDefined()
+    expect(wrapper.get('button[title="Surlignage"]').attributes('disabled')).toBeDefined()
+  })
+
   it('does not render the toolbar in readonly display mode (editable=false)', async () => {
     const wrapper = await mountComponent({editable: false, modelValue: '**hi**'})
 
diff --git a/app/components/malio/input/InputRichText.vue b/app/components/malio/input/InputRichText.vue
index 7f1a402..e07ae1b 100644
--- a/app/components/malio/input/InputRichText.vue
+++ b/app/components/malio/input/InputRichText.vue
@@ -46,6 +46,110 @@
 
         <span class="mx-1 h-5 w-px bg-m-border" aria-hidden="true" />
 
+        <div class="relative">
+          <button
+            type="button"
+            class="flex h-8 w-8 flex-col items-center justify-center rounded text-m-text transition-colors hover:bg-m-primary/10 disabled:cursor-not-allowed disabled:opacity-40"
+            :class="colorPickerOpen ? 'bg-m-primary/15 text-m-primary' : ''"
+            title="Couleur du texte"
+            aria-label="Couleur du texte"
+            :aria-expanded="colorPickerOpen"
+            :disabled="disabled || readonly"
+            @mousedown.prevent
+            @click="toggleColorPicker"
+          >
+            <IconifyIcon icon="mdi:format-color-text" :width="18" :height="18" />
+            <span
+              class="-mt-0.5 block h-1 w-4 rounded-sm"
+              :style="{ backgroundColor: currentTextColor ?? 'transparent' }"
+              aria-hidden="true"
+            />
+          </button>
+          <div
+            v-if="colorPickerOpen"
+            class="absolute left-0 top-full z-10 mt-1 flex w-44 flex-col gap-2 rounded-md border border-m-border bg-white p-2 shadow-lg"
+            role="dialog"
+            aria-label="Palette couleur du texte"
+          >
+            <div class="grid grid-cols-4 gap-1">
+              <button
+                v-for="swatch in textColorSwatches"
+                :key="swatch.value"
+                type="button"
+                class="h-7 w-7 rounded border border-m-border transition-transform hover:scale-110"
+                :class="currentTextColor === swatch.value ? 'ring-2 ring-m-primary ring-offset-1' : ''"
+                :style="{ backgroundColor: swatch.value }"
+                :title="swatch.label"
+                :aria-label="swatch.label"
+                @mousedown.prevent
+                @click="applyTextColor(swatch.value)"
+              />
+            </div>
+            <button
+              type="button"
+              class="flex items-center justify-center gap-1 rounded border border-m-border px-2 py-1 text-xs text-m-text transition-colors hover:bg-m-bg"
+              @mousedown.prevent
+              @click="applyTextColor(null)"
+            >
+              <IconifyIcon icon="mdi:format-color-marker-cancel" :width="14" :height="14" />
+              Aucune couleur
+            </button>
+          </div>
+        </div>
+
+        <div class="relative">
+          <button
+            type="button"
+            class="flex h-8 w-8 flex-col items-center justify-center rounded text-m-text transition-colors hover:bg-m-primary/10 disabled:cursor-not-allowed disabled:opacity-40"
+            :class="highlightPickerOpen ? 'bg-m-primary/15 text-m-primary' : ''"
+            title="Surlignage"
+            aria-label="Surlignage"
+            :aria-expanded="highlightPickerOpen"
+            :disabled="disabled || readonly"
+            @mousedown.prevent
+            @click="toggleHighlightPicker"
+          >
+            <IconifyIcon icon="mdi:marker" :width="18" :height="18" />
+            <span
+              class="-mt-0.5 block h-1 w-4 rounded-sm"
+              :style="{ backgroundColor: currentHighlightColor ?? 'transparent' }"
+              aria-hidden="true"
+            />
+          </button>
+          <div
+            v-if="highlightPickerOpen"
+            class="absolute left-0 top-full z-10 mt-1 flex w-44 flex-col gap-2 rounded-md border border-m-border bg-white p-2 shadow-lg"
+            role="dialog"
+            aria-label="Palette de surlignage"
+          >
+            <div class="grid grid-cols-4 gap-1">
+              <button
+                v-for="swatch in highlightSwatches"
+                :key="swatch.value"
+                type="button"
+                class="h-7 w-7 rounded border border-m-border transition-transform hover:scale-110"
+                :class="currentHighlightColor === swatch.value ? 'ring-2 ring-m-primary ring-offset-1' : ''"
+                :style="{ backgroundColor: swatch.value }"
+                :title="swatch.label"
+                :aria-label="swatch.label"
+                @mousedown.prevent
+                @click="applyHighlight(swatch.value)"
+              />
+            </div>
+            <button
+              type="button"
+              class="flex items-center justify-center gap-1 rounded border border-m-border px-2 py-1 text-xs text-m-text transition-colors hover:bg-m-bg"
+              @mousedown.prevent
+              @click="applyHighlight(null)"
+            >
+              <IconifyIcon icon="mdi:format-color-marker-cancel" :width="14" :height="14" />
+              Aucun surlignage
+            </button>
+          </div>
+        </div>
+
+        <span class="mx-1 h-5 w-px bg-m-border" aria-hidden="true" />
+
         <button
           type="button"
           class="flex h-8 w-8 items-center justify-center rounded text-m-text transition-colors hover:bg-m-primary/10 disabled:cursor-not-allowed disabled:opacity-40"
@@ -97,11 +201,14 @@
 </template>
 
 <script setup lang="ts">
-import { computed, onBeforeUnmount, onMounted, shallowRef, useId, watch } from 'vue'
+import { computed, onBeforeUnmount, onMounted, ref, shallowRef, useId, watch } from 'vue'
 import { Icon as IconifyIcon } from '@iconify/vue'
 import { Editor, EditorContent } from '@tiptap/vue-3'
 import StarterKit from '@tiptap/starter-kit'
 import Placeholder from '@tiptap/extension-placeholder'
+import { TextStyle } from '@tiptap/extension-text-style'
+import Color from '@tiptap/extension-color'
+import Highlight from '@tiptap/extension-highlight'
 import { Markdown } from 'tiptap-markdown'
 import { twMerge } from 'tailwind-merge'
 
@@ -139,7 +246,7 @@ const props = withDefaults(
     hint: '',
     error: '',
     success: '',
-    outputFormat: 'markdown',
+    outputFormat: 'html',
     groupClass: '',
     labelClass: '',
     editorClass: '',
@@ -207,9 +314,18 @@ const mergedReadonlyClass = computed(() =>
 
 const focusEditor = () => {
   if (isInteractionLocked.value) return
+  closePickers()
   editor.value?.commands.focus()
 }
 
+const htmlPattern = /<\/?[a-z][\s\S]*>/i
+
+const normalizeEditorInput = (value: string | null | undefined): string => {
+  const content = (value ?? '').replace(/\r\n?/g, '\n')
+  if (htmlPattern.test(content)) return content
+  return content.split('\n').join('\n\n').replace(/\n{3,}/g, '\n\n')
+}
+
 const promptForLink = () => {
   if (!editor.value) return
   const previous = editor.value.getAttributes('link').href as string | undefined
@@ -222,6 +338,78 @@ const promptForLink = () => {
   editor.value.chain().focus().extendMarkRange('link').setLink({ href: url }).run()
 }
 
+type ColorSwatch = { label: string; value: string }
+
+const textColorSwatches: ColorSwatch[] = [
+  { label: 'Rouge', value: '#bf2600' },
+  { label: 'Orange', value: '#ff8b00' },
+  { label: 'Jaune', value: '#ffc400' },
+  { label: 'Vert', value: '#00875a' },
+  { label: 'Turquoise', value: '#00a3bf' },
+  { label: 'Bleu', value: '#0747a6' },
+  { label: 'Violet', value: '#5243aa' },
+  { label: 'Gris', value: '#42526e' },
+]
+
+const highlightSwatches: ColorSwatch[] = [
+  { label: 'Rouge', value: '#fdd0c8' },
+  { label: 'Orange', value: '#ffe2c2' },
+  { label: 'Jaune', value: '#fff0b3' },
+  { label: 'Vert', value: '#c6edd0' },
+  { label: 'Turquoise', value: '#c1ecf0' },
+  { label: 'Bleu', value: '#cce0ff' },
+  { label: 'Violet', value: '#dfd8fa' },
+  { label: 'Gris', value: '#dfe1e6' },
+]
+
+const colorPickerOpen = ref(false)
+const highlightPickerOpen = ref(false)
+
+const closePickers = () => {
+  colorPickerOpen.value = false
+  highlightPickerOpen.value = false
+}
+
+const toggleColorPicker = () => {
+  highlightPickerOpen.value = false
+  colorPickerOpen.value = !colorPickerOpen.value
+}
+
+const toggleHighlightPicker = () => {
+  colorPickerOpen.value = false
+  highlightPickerOpen.value = !highlightPickerOpen.value
+}
+
+const applyTextColor = (value: string | null) => {
+  if (!editor.value) return
+  if (value === null) {
+    editor.value.chain().focus().unsetColor().run()
+  } else {
+    editor.value.chain().focus().setColor(value).run()
+  }
+  colorPickerOpen.value = false
+}
+
+const applyHighlight = (value: string | null) => {
+  if (!editor.value) return
+  if (value === null) {
+    editor.value.chain().focus().unsetHighlight().run()
+  } else {
+    editor.value.chain().focus().setHighlight({ color: value }).run()
+  }
+  highlightPickerOpen.value = false
+}
+
+const currentTextColor = computed(() => {
+  const attrs = editor.value?.getAttributes('textStyle') as { color?: string } | undefined
+  return attrs?.color ?? null
+})
+
+const currentHighlightColor = computed(() => {
+  const attrs = editor.value?.getAttributes('highlight') as { color?: string } | undefined
+  return attrs?.color ?? null
+})
+
 const toolbarButtons = computed(() => {
   const e = editor.value
   return [
@@ -242,13 +430,34 @@ const toolbarButtons = computed(() => {
 const getCurrentValue = (): string => {
   if (!editor.value) return ''
   if (props.outputFormat === 'html') return editor.value.getHTML()
-  const storage = editor.value.storage.markdown as { getMarkdown: () => string } | undefined
-  return storage ? storage.getMarkdown() : editor.value.getHTML()
+  const storage = (editor.value.storage as unknown as Record<string, { getMarkdown?: () => string } | undefined>).markdown
+  return storage?.getMarkdown ? storage.getMarkdown() : editor.value.getHTML()
+}
+
+const handleDocumentMousedown = (event: MouseEvent) => {
+  if (!colorPickerOpen.value && !highlightPickerOpen.value) return
+  const target = event.target as Node | null
+  if (!target) return
+  const popovers = document.querySelectorAll(`#${editorId.value} [role="dialog"]`)
+  const triggers = document.querySelectorAll(`#${editorId.value} [aria-expanded]`)
+  for (const node of [...popovers, ...triggers]) {
+    if (node.contains(target)) return
+  }
+  closePickers()
+}
+
+const handleDocumentKeydown = (event: KeyboardEvent) => {
+  if (event.key === 'Escape' && (colorPickerOpen.value || highlightPickerOpen.value)) {
+    closePickers()
+  }
 }
 
 onMounted(() => {
+  document.addEventListener('mousedown', handleDocumentMousedown)
+  document.addEventListener('keydown', handleDocumentKeydown)
+
   editor.value = new Editor({
-    content: props.modelValue ?? '',
+    content: normalizeEditorInput(props.modelValue),
     editable: props.editable && !props.disabled && !props.readonly,
     extensions: [
       StarterKit.configure({
@@ -259,11 +468,14 @@ onMounted(() => {
           HTMLAttributes: { rel: 'noopener noreferrer nofollow', target: '_blank' },
         },
       }),
+      TextStyle,
+      Color.configure({ types: ['textStyle'] }),
+      Highlight.configure({ multicolor: true }),
       Placeholder.configure({
         placeholder: props.placeholder,
       }),
       Markdown.configure({
-        html: false,
+        html: true,
         tightLists: true,
         bulletListMarker: '-',
         linkify: true,
@@ -290,20 +502,22 @@ onMounted(() => {
 })
 
 onBeforeUnmount(() => {
+  document.removeEventListener('mousedown', handleDocumentMousedown)
+  document.removeEventListener('keydown', handleDocumentKeydown)
   editor.value?.destroy()
 })
 
 watch(() => props.modelValue, (incoming) => {
   if (!editor.value) return
   if ((incoming ?? '') === getCurrentValue()) return
-  editor.value.commands.setContent(incoming ?? '', { emitUpdate: false })
+  editor.value.commands.setContent(normalizeEditorInput(incoming), { emitUpdate: false })
 })
 
 watch(() => [props.editable, props.disabled, props.readonly], () => {
   editor.value?.setEditable(props.editable && !props.disabled && !props.readonly)
 })
 </script>
-
+ 
 <style scoped>
 .malio-rich-text :deep(.ProseMirror) {
   outline: none;
@@ -323,4 +537,38 @@ watch(() => [props.editable, props.disabled, props.readonly], () => {
   pointer-events: none;
   height: 0;
 }
+.malio-rich-text :deep(h2) {
+  margin: 0.75rem 0 0.5rem;
+  font-size: 1.5rem;
+  line-height: 2rem;
+  font-weight: 700;
+  color: rgb(var(--m-text));
+}
+.malio-rich-text :deep(h3) {
+  margin: 0.65rem 0 0.4rem;
+  font-size: 1.25rem;
+  line-height: 1.75rem;
+  font-weight: 700;
+  color: rgb(var(--m-text));
+}
+.malio-rich-text :deep(p) {
+  margin: 0.45rem 0;
+}
+.malio-rich-text :deep(ul),
+.malio-rich-text :deep(ol) {
+  margin: 0.5rem 0;
+  padding-left: 1.5rem;
+}
+.malio-rich-text :deep(ul) {
+  list-style: disc;
+}
+.malio-rich-text :deep(ol) {
+  list-style: decimal;
+}
+.malio-rich-text :deep(blockquote) {
+  margin: 0.75rem 0;
+  border-left: 3px solid rgb(var(--m-border));
+  padding-left: 0.75rem;
+  color: rgb(var(--m-muted));
+}
 </style>
diff --git a/app/story/input/inputRichText.story.vue b/app/story/input/inputRichText.story.vue
index faf9d3f..7905a66 100644
--- a/app/story/input/inputRichText.story.vue
+++ b/app/story/input/inputRichText.story.vue
@@ -72,6 +72,17 @@
           min-height="200px"
         />
       </div>
+
+      <div class="rounded-lg border p-4 lg:col-span-2">
+        <h2 class="mb-4 text-xl font-bold">Couleurs &amp; surlignage</h2>
+        <MalioInputRichText
+          v-model="colorValue"
+          label="Note colorée"
+          output-format="html"
+          min-height="180px"
+          hint="Tester les boutons couleur du texte et surlignage (palettes Jira-like)"
+        />
+      </div>
     </div>
   </Story>
 </template>
@@ -80,7 +91,7 @@
 # MalioInputRichText
 
 Éditeur de texte riche basé sur **TipTap v3** + **StarterKit** + **tiptap-markdown**.
-Sortie en **markdown** (par défaut) ou en **HTML**. Aligné sur le thème Malio
+Sortie en **HTML** (par défaut) ou en **markdown**. Aligné sur le thème Malio
 (couleurs `m-*`, icônes `mdi:*`, états error / success / hint).
 
 ------------------------------------------------------------------------
@@ -144,10 +155,10 @@ Sortie en **markdown** (par défaut) ou en **HTML**. Aligné sur le thème Malio
 ### outputFormat
 
 - Type: `'markdown' | 'html'`
-- Défaut: `'markdown'`
+- Défaut: `'html'`
 - Description: Format émis dans `update:modelValue`.
-  - `markdown` : utilise `tiptap-markdown` (`getMarkdown()`).
   - `html` : utilise `editor.getHTML()`.
+  - `markdown` : utilise `tiptap-markdown` (`getMarkdown()`).
 
 ### groupClass / labelClass / editorClass
 
@@ -166,8 +177,15 @@ Boutons (icônes `mdi:*`) :
 - Citation
 - Code inline, Bloc de code
 - Lien (prompt URL ; vide pour retirer)
+- Couleur du texte (palette de 8 swatches + reset)
+- Surlignage (palette de 8 swatches + reset)
 - Annuler / Rétablir
 
+Les palettes couleur/surlignage s'ouvrent en popover sous leur bouton.
+Fermeture : clic sur un swatch, clic en dehors, ou touche **Échap**.
+
+> Les couleurs et surlignages ne sont **pas persistés en markdown** (spec Markdown ne couvre pas la couleur). Pour préserver les couleurs au save/reload, utiliser `output-format="html"`.
+
 ------------------------------------------------------------------------
 
 ## Accessibilité
@@ -199,4 +217,5 @@ const successValue = ref('Tout est bon de mon côté.')
 const disabledValue = ref('Contenu indisponible.')
 const readonlyValue = ref('## Compte-rendu\n\n- Point 1\n- Point 2\n\n> Citation importante')
 const htmlValue = ref('<p>Contenu <strong>riche</strong>.</p>')
+const colorValue = ref('<p>Sélectionner du texte puis utiliser les boutons <span style="color: #bf2600">couleur</span> ou <mark data-color="#fff0b3" style="background-color: #fff0b3">surlignage</mark>.</p>')
 </script>
diff --git a/package-lock.json b/package-lock.json
index b18f0b4..f6c0e06 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -10,7 +10,10 @@
       "dependencies": {
         "@nuxt/icon": "^2.2.1",
         "@nuxtjs/tailwindcss": "^6.14.0",
+        "@tiptap/extension-color": "^3.22.5",
+        "@tiptap/extension-highlight": "^3.22.5",
         "@tiptap/extension-placeholder": "^3.22.5",
+        "@tiptap/extension-text-style": "^3.22.5",
         "@tiptap/pm": "^3.22.5",
         "@tiptap/starter-kit": "^3.22.5",
         "@tiptap/vue-3": "^3.22.5",
@@ -5142,6 +5145,19 @@
         "@tiptap/pm": "3.22.5"
       }
     },
+    "node_modules/@tiptap/extension-color": {
+      "version": "3.22.5",
+      "resolved": "https://registry.npmjs.org/@tiptap/extension-color/-/extension-color-3.22.5.tgz",
+      "integrity": "sha512-4aTygOUlTFBYCvJy67SeKVdXCQw7du3Rj+N5ZutVnDnrpfzUBWsO7f+I+iDS8eMQFbWxVFLlWxGMcTbjtk1a+Q==",
+      "license": "MIT",
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/ueberdosis"
+      },
+      "peerDependencies": {
+        "@tiptap/extension-text-style": "3.22.5"
+      }
+    },
     "node_modules/@tiptap/extension-document": {
       "version": "3.22.5",
       "resolved": "https://registry.npmjs.org/@tiptap/extension-document/-/extension-document-3.22.5.tgz",
@@ -5223,6 +5239,19 @@
         "@tiptap/core": "3.22.5"
       }
     },
+    "node_modules/@tiptap/extension-highlight": {
+      "version": "3.22.5",
+      "resolved": "https://registry.npmjs.org/@tiptap/extension-highlight/-/extension-highlight-3.22.5.tgz",
+      "integrity": "sha512-byWruAOKcqRN0OuzVSKqLLrced3M9AZaR2pD1BV3aUZHzMzeBjLBfByh8s4lExH2Z547xQUdHHnUflBQ572I5A==",
+      "license": "MIT",
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/ueberdosis"
+      },
+      "peerDependencies": {
+        "@tiptap/core": "3.22.5"
+      }
+    },
     "node_modules/@tiptap/extension-horizontal-rule": {
       "version": "3.22.5",
       "resolved": "https://registry.npmjs.org/@tiptap/extension-horizontal-rule/-/extension-horizontal-rule-3.22.5.tgz",
@@ -5373,6 +5402,20 @@
         "@tiptap/core": "3.22.5"
       }
     },
+    "node_modules/@tiptap/extension-text-style": {
+      "version": "3.22.5",
+      "resolved": "https://registry.npmjs.org/@tiptap/extension-text-style/-/extension-text-style-3.22.5.tgz",
+      "integrity": "sha512-jt63jy8YbhZJUGMxTUzeivLhowGtFp6YbCFrrmZJ7G6IHu8X8LJzO81ksz5nT5l8DKpldGwnINUfA6iE91JIAg==",
+      "license": "MIT",
+      "peer": true,
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/ueberdosis"
+      },
+      "peerDependencies": {
+        "@tiptap/core": "3.22.5"
+      }
+    },
     "node_modules/@tiptap/extension-underline": {
       "version": "3.22.5",
       "resolved": "https://registry.npmjs.org/@tiptap/extension-underline/-/extension-underline-3.22.5.tgz",
diff --git a/package.json b/package.json
index 41bb3d3..f0edfa4 100644
--- a/package.json
+++ b/package.json
@@ -42,7 +42,10 @@
   "dependencies": {
     "@nuxt/icon": "^2.2.1",
     "@nuxtjs/tailwindcss": "^6.14.0",
+    "@tiptap/extension-color": "^3.22.5",
+    "@tiptap/extension-highlight": "^3.22.5",
     "@tiptap/extension-placeholder": "^3.22.5",
+    "@tiptap/extension-text-style": "^3.22.5",
     "@tiptap/pm": "^3.22.5",
     "@tiptap/starter-kit": "^3.22.5",
     "@tiptap/vue-3": "^3.22.5",