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:
@@ -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.
|
||||
|
||||
Reference in New Issue
Block a user