release : couleurs et surlignage dans l'éditeur rich text (#40)

## Résumé

Ajoute deux boutons à la toolbar de \`<MalioInputRichText>\` pour appliquer une couleur de texte ou un surlignage sur la sélection, façon Jira.

## Changements

- 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 popover sur clic extérieur, Échap, ou clic dans l'éditeur
- Tests : 4 nouveaux cas (15/15 OK)
- Story et \`COMPONENTS.md\` à jour

## Limite à connaître

Les couleurs ne sont **pas sérialisables en markdown** (\`tiptap-markdown\` ne les sérialise pas). Pour les conserver au save/reload, utiliser \`output-format="html"\`.

## Release attendu

Commit type \`fix:\` → semantic-release publie **1.4.8** (patch).

Co-authored-by: kevin <kevin@yuno.malio.fr>
Co-authored-by: tristan <tristan@yuno.malio.fr>
Co-authored-by: Kevin Boudet <kevin@yuno.malio.fr>
Reviewed-on: #40

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**'})