release : couleurs et surlignage dans l'éditeur rich text (#40)
All checks were successful
Release / release (push) Successful in 1m0s

## 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
This commit was merged in pull request #40.
This commit is contained in:
2026-05-04 18:03:40 +00:00
parent f30619a497
commit 7fc072ad08
6 changed files with 361 additions and 14 deletions

View File

@@ -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" />
```