feat(input-rich-text) : ajout d'un éditeur de texte riche basé sur TipTap v3

Composant MalioInputRichText aligné sur le thème Malio :
- TipTap v3.22.5 + StarterKit + Placeholder + tiptap-markdown 0.9.0
- Toolbar : gras, italique, barré, H2/H3, listes, citation, code, lien, undo/redo
- États error / success / hint, props disabled / readonly / editable
- Sortie configurable markdown (défaut) ou HTML via outputFormat
- Couleurs m-primary / m-danger / m-success / m-muted, icônes mdi:*
- Tests (12), playground page, story Histoire, MAJ CHANGELOG + COMPONENTS

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
This commit is contained in:
2026-05-04 15:11:04 +02:00
parent 3336ff0c69
commit db9dd86b7d
9 changed files with 1508 additions and 14 deletions

View File

@@ -132,6 +132,39 @@ 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.
| Prop | Type | Défaut | Description |
|------|------|--------|-------------|
| `id` | `string` | auto | Identifiant HTML |
| `label` | `string` | `''` | Label affiché au-dessus de l'éditeur |
| `modelValue` | `string \| null` | `undefined` | Contenu (v-model) |
| `placeholder` | `string` | `''` | Texte affiché quand vide |
| `minHeight` | `string` | `'160px'` | Hauteur min de la zone d'édition |
| `editable` | `boolean` | `true` | `false` → mode affichage seul (toolbar masquée) |
| `disabled` | `boolean` | `false` | Désactive l'édition et la toolbar |
| `readonly` | `boolean` | `false` | Lecture seule (toolbar visible mais désactivée) |
| `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` |
| `groupClass` | `string` | `''` | Classes CSS conteneur (twMerge) |
| `labelClass` | `string` | `''` | Classes CSS label (twMerge) |
| `editorClass` | `string` | `''` | Classes CSS wrapper éditeur (twMerge) |
**Events :** `update:modelValue(value: string)`
```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 :model-value="content" :editable="false" />
```
---
## MalioInputUpload
Champ d'upload de fichier.